+ {/* Sidebar */}
+
+
+ {/* Overlay for mobile */}
+ {sideOpen &&
setSideOpen(false)} />}
+
+ {/* Main */}
+
+
+
+ {title}
+
+
+
+ {children}
+
+
+
+ )
+}
diff --git a/web-react/src/components/ArticleModal.jsx b/web-react/src/components/ArticleModal.jsx
new file mode 100644
index 0000000..426f69b
--- /dev/null
+++ b/web-react/src/components/ArticleModal.jsx
@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react'
+
+function fmt(iso) {
+ if (!iso) return ''
+ return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })
+}
+
+export default function ArticleModal({ article, onClose }) {
+ // Закрытие по Escape
+ useEffect(() => {
+ const handler = e => { if (e.key === 'Escape') onClose() }
+ window.addEventListener('keydown', handler)
+ // Блокируем скролл страницы под модалкой
+ document.body.style.overflow = 'hidden'
+ return () => {
+ window.removeEventListener('keydown', handler)
+ document.body.style.overflow = ''
+ }
+ }, [onClose])
+
+ return (
+
+
e.stopPropagation()}>
+
+
+ {article.cover_url && (
+
+ )}
+
+
+
+ {article.category && (
+ {article.category.name}
+ )}
+ {fmt(article.published_at)}
+
+
+
{article.title}
+
+
+
+ {article.tags?.length > 0 && (
+
+ {article.tags.map(t => (
+ #{t.name}
+ ))}
+
+ )}
+
+ {article.source_url && (
+
+ )}
+
+
+
+ )
+}
diff --git a/web-react/src/components/Confirm.jsx b/web-react/src/components/Confirm.jsx
new file mode 100644
index 0000000..29d6d5c
--- /dev/null
+++ b/web-react/src/components/Confirm.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function Confirm({ message, onOk, onCancel }) {
+ return (
+
+
e.stopPropagation()}>
+
{message}
+
+
+
+
+
+
+ )
+}
diff --git a/web-react/src/components/FilterBar.jsx b/web-react/src/components/FilterBar.jsx
new file mode 100644
index 0000000..0181470
--- /dev/null
+++ b/web-react/src/components/FilterBar.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+
+const DATE_PRESETS = [
+ { value: '', label: 'Всё время' },
+ { value: 'week', label: 'Неделя' },
+ { value: 'month', label: 'Месяц' },
+ { value: '3months',label: '3 месяца' },
+ { value: 'year', label: 'Год' },
+]
+
+export default function FilterBar({ categories, tags, filters, onChange }) {
+ const set = key => val => onChange({ ...filters, [key]: val, page: 1 })
+
+ return (
+
+ {/* Категории */}
+
+
+ {categories.map(c => (
+
+ ))}
+
+
+ {/* Теги */}
+ {tags.length > 0 && (
+
+ {tags.map(t => (
+
+ ))}
+
+ )}
+
+ {/* Даты */}
+
+ {DATE_PRESETS.map(p => (
+
+ ))}
+
+
+ )
+}
diff --git a/web-react/src/components/Loader.jsx b/web-react/src/components/Loader.jsx
new file mode 100644
index 0000000..0a370c8
--- /dev/null
+++ b/web-react/src/components/Loader.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function Loader({ full = false }) {
+ const style = full
+ ? { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '60vh' }
+ : { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }
+
+ return (
+
+ )
+}
diff --git a/web-react/src/components/NewsCard.jsx b/web-react/src/components/NewsCard.jsx
new file mode 100644
index 0000000..0d97188
--- /dev/null
+++ b/web-react/src/components/NewsCard.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+
+function fmt(iso) {
+ if (!iso) return ''
+ return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })
+}
+
+function domain(url) {
+ try { return new URL(url).hostname.replace('www.', '') }
+ catch { return url }
+}
+
+export default function NewsCard({ article, onClick }) {
+ const { title, cover_url, excerpt, category, published_at, tags = [], source_url } = article
+ const [imgExpanded, setImgExpanded] = useState(false)
+
+ return (
+
+ {/* Шапка: категория + дата */}
+
+
+ {/* Заголовок */}
+ {title}
+
+ {/* Превью текста */}
+ {excerpt && {excerpt}
}
+
+ {/* Обложка */}
+ {cover_url && (
+
+
{ e.stopPropagation(); setImgExpanded(v => !v) }}
+ />
+
e.stopPropagation()}>
+ {tags.map(t => (
+ #{t.name}
+ ))}
+
+ )}
+
+ {/* Подвал */}
+
+ Читать полностью →
+
+
+ )
+}
diff --git a/web-react/src/components/StatusBadge.jsx b/web-react/src/components/StatusBadge.jsx
new file mode 100644
index 0000000..704d79f
--- /dev/null
+++ b/web-react/src/components/StatusBadge.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+const MAP = {
+ published: { label: 'Опубликовано', color: 'var(--c-success)' },
+ draft: { label: 'Черновик', color: 'var(--c-warning)' },
+ archived: { label: 'Архив', color: 'var(--c-text-2)' },
+}
+
+export default function StatusBadge({ status }) {
+ const { label, color } = MAP[status] ?? { label: status, color: 'var(--c-text-2)' }
+ return (
+
+ {label}
+
+ )
+}
diff --git a/web-react/src/hooks/useAuth.js b/web-react/src/hooks/useAuth.js
new file mode 100644
index 0000000..acada54
--- /dev/null
+++ b/web-react/src/hooks/useAuth.js
@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+// Токен хранится в localStorage — сохраняется при перезагрузке
+export function useAuth() {
+ const [token, setToken] = useState(() => localStorage.getItem('token') || '')
+ const navigate = useNavigate()
+
+ const saveToken = t => {
+ localStorage.setItem('token', t)
+ setToken(t)
+ }
+
+ const logout = () => {
+ localStorage.removeItem('token')
+ setToken('')
+ navigate('/admin/login')
+ }
+
+ return { token, saveToken, logout, isAuth: !!token }
+}
diff --git a/web-react/src/hooks/useTheme.js b/web-react/src/hooks/useTheme.js
new file mode 100644
index 0000000..803b61d
--- /dev/null
+++ b/web-react/src/hooks/useTheme.js
@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react'
+
+// Тёмная тема: переключает атрибут data-theme на
+export function useTheme() {
+ const [dark, setDark] = useState(() => localStorage.getItem('theme') === 'dark')
+
+ useEffect(() => {
+ document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
+ localStorage.setItem('theme', dark ? 'dark' : 'light')
+ }, [dark])
+
+ return { dark, toggle: () => setDark(d => !d) }
+}
diff --git a/web-react/src/main.jsx b/web-react/src/main.jsx
new file mode 100644
index 0000000..0cee85a
--- /dev/null
+++ b/web-react/src/main.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './theme.css'
+import './app.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+
+)
diff --git a/web-react/src/pages/NewsDetail.jsx b/web-react/src/pages/NewsDetail.jsx
new file mode 100644
index 0000000..400224e
--- /dev/null
+++ b/web-react/src/pages/NewsDetail.jsx
@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { getArticle } from '../api/index'
+import Loader from '../components/Loader'
+
+function fmt(iso) {
+ if (!iso) return ''
+ return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })
+}
+
+export default function NewsDetail() {
+ const { slug } = useParams()
+ const navigate = useNavigate()
+ const [article, setArticle] = useState(null)
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ getArticle(slug)
+ .then(setArticle)
+ .catch(() => setError('Статья не найдена'))
+ .finally(() => setLoading(false))
+ }, [slug])
+
+ if (loading) return
+ if (error) return (
+
+
{error}
+
+
+ )
+
+ return (
+
+
+
+ {article.cover_url && (
+
+ )}
+
+
+ {article.category && {article.category.name}}
+ {fmt(article.published_at)}
+
+
+
{article.title}
+
+
+
+ {article.tags?.length > 0 && (
+
+ {article.tags.map(t => (
+ #{t.name}
+ ))}
+
+ )}
+
+ {article.source_url && (
+
+ )}
+
+ )
+}
diff --git a/web-react/src/pages/NewsFeed.jsx b/web-react/src/pages/NewsFeed.jsx
new file mode 100644
index 0000000..f4db6af
--- /dev/null
+++ b/web-react/src/pages/NewsFeed.jsx
@@ -0,0 +1,190 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { useTheme } from '../hooks/useTheme'
+import { getNews, getCategories, getTags, getArticle } from '../api/index'
+import NewsCard from '../components/NewsCard'
+import FilterBar from '../components/FilterBar'
+import Loader from '../components/Loader'
+import ArticleModal from '../components/ArticleModal'
+
+const PAGE_SIZE = 20
+
+function presetToDateFrom(preset) {
+ if (!preset) return null
+ const now = new Date()
+ const days = { week: 7, month: 30, '3months': 90, year: 365 }[preset]
+ if (!days) return null
+ now.setDate(now.getDate() - days)
+ return now.toISOString()
+}
+
+export default function NewsFeed() {
+ const { dark, toggle } = useTheme()
+ const [articles, setArticles] = useState([])
+ const [total, setTotal] = useState(0)
+ const [categories, setCategories] = useState([])
+ const [tags, setTags] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [filters, setFilters] = useState({ category: null, tag: null, datePreset: '', page: 1 })
+
+ // Поиск с debounce
+ const [searchInput, setSearchInput] = useState('')
+ const [searchQuery, setSearchQuery] = useState('')
+ const debounceRef = useRef(null)
+
+ const handleSearch = e => {
+ const val = e.target.value
+ setSearchInput(val)
+ clearTimeout(debounceRef.current)
+ debounceRef.current = setTimeout(() => {
+ setSearchQuery(val.trim())
+ setFilters(f => ({ ...f, page: 1 }))
+ }, 400)
+ }
+
+ const clearSearch = () => {
+ setSearchInput('')
+ setSearchQuery('')
+ setFilters(f => ({ ...f, page: 1 }))
+ }
+
+ // Модальное окно
+ const [modalArticle, setModalArticle] = useState(null)
+
+ useEffect(() => {
+ Promise.all([getCategories(), getTags(30)]).then(([cats, tgs]) => {
+ setCategories(cats)
+ setTags(tgs)
+ }).catch(() => {})
+ }, [])
+
+ const loadNews = useCallback(async () => {
+ setLoading(true)
+ try {
+ const params = {
+ limit: PAGE_SIZE,
+ offset: (filters.page - 1) * PAGE_SIZE,
+ }
+ if (filters.category) params.category = filters.category
+ if (filters.tag) params.tag = filters.tag
+ const df = presetToDateFrom(filters.datePreset)
+ if (df) params.date_from = df
+ if (searchQuery) params.q = searchQuery
+
+ const data = await getNews(params)
+ setArticles(data.items ?? [])
+ setTotal(data.total ?? 0)
+ } catch {
+ setArticles([])
+ } finally {
+ setLoading(false)
+ }
+ }, [filters, searchQuery])
+
+ useEffect(() => { loadNews() }, [loadNews])
+
+ const openArticle = async (slug) => {
+ setModalArticle({ _loading: true })
+ try {
+ const data = await getArticle(slug)
+ setModalArticle(data)
+ } catch {
+ setModalArticle(null)
+ }
+ }
+
+ const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+
+ return (
+ <>
+
+
+
+
+
+ {/* Счётчик результатов при поиске */}
+ {searchQuery && !loading && (
+
+ {total > 0
+ ? `Найдено: ${total} ${total === 1 ? 'новость' : total < 5 ? 'новости' : 'новостей'} по запросу «${searchQuery}»`
+ : `По запросу «${searchQuery}» ничего не найдено`
+ }
+
+ )}
+
+ {loading
+ ?
+ : articles.length === 0
+ ?
+ Новостей не найдено
+
+ :
+ {articles.map(a => (
+ openArticle(a.slug)} />
+ ))}
+
+ }
+
+ {!loading && totalPages > 1 && (
+
+
+ {filters.page} / {totalPages}
+
+
+ )}
+
+
+ {/* Модальное окно статьи */}
+ {modalArticle && (
+ modalArticle._loading
+ ? (
+
setModalArticle(null)}>
+
e.stopPropagation()}>
+
+
+
+ )
+ :
setModalArticle(null)} />
+ )}
+
+ )
+}
diff --git a/web-react/src/pages/admin/ArticleEditor.jsx b/web-react/src/pages/admin/ArticleEditor.jsx
new file mode 100644
index 0000000..45e4416
--- /dev/null
+++ b/web-react/src/pages/admin/ArticleEditor.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { useAuth } from '../../hooks/useAuth'
+
+export default function ArticleEditor() {
+ const { id } = useParams()
+ const navigate = useNavigate()
+ const { token } = useAuth()
+
+ const editorUrl = `/editor/${id}?t=${token}`
+
+ // Слушаем сообщение «закрыть» из iframe-редактора
+ React.useEffect(() => {
+ const handler = e => {
+ if (e.data?.type === 'editor-close') navigate('/admin/articles')
+ }
+ window.addEventListener('message', handler)
+ return () => window.removeEventListener('message', handler)
+ }, [navigate])
+
+ return (
+
+ )
+}
diff --git a/web-react/src/pages/admin/ArticlesList.jsx b/web-react/src/pages/admin/ArticlesList.jsx
new file mode 100644
index 0000000..a12b4fa
--- /dev/null
+++ b/web-react/src/pages/admin/ArticlesList.jsx
@@ -0,0 +1,162 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuth } from '../../hooks/useAuth'
+import { adminListArticles, adminDeleteArticle, adminPublishArticle, adminCreateArticle } from '../../api/index'
+import AdminLayout from '../../components/AdminLayout'
+import StatusBadge from '../../components/StatusBadge'
+import Confirm from '../../components/Confirm'
+import Loader from '../../components/Loader'
+
+const PAGE = 20
+
+function fmt(iso) {
+ if (!iso) return '—'
+ return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+export default function ArticlesList() {
+ const { token } = useAuth()
+ const navigate = useNavigate()
+ const [items, setItems] = useState([])
+ const [total, setTotal] = useState(0)
+ const [page, setPage] = useState(1)
+ const [status, setStatus] = useState('')
+ const [searchInput, setSearchInput] = useState('')
+ const [searchQuery, setSearchQuery] = useState('')
+ const [loading, setLoading] = useState(true)
+ const [creating, setCreating] = useState(false)
+ const [confirm, setConfirm] = useState(null) // { id, title }
+
+ const createNew = async () => {
+ setCreating(true)
+ try {
+ const article = await adminCreateArticle(token)
+ navigate(`/admin/articles/${article.id}`)
+ } catch {
+ setCreating(false)
+ }
+ }
+
+ // Debounce поиска 300ms
+ useEffect(() => {
+ const t = setTimeout(() => { setSearchQuery(searchInput); setPage(1) }, 300)
+ return () => clearTimeout(t)
+ }, [searchInput])
+
+ const load = useCallback(async () => {
+ setLoading(true)
+ try {
+ const params = { limit: PAGE, offset: (page - 1) * PAGE }
+ if (status) params.status = status
+ if (searchQuery) params.q = searchQuery
+ const data = await adminListArticles(token, params)
+ setItems(data?.items ?? [])
+ setTotal(data?.total ?? 0)
+ } finally {
+ setLoading(false)
+ }
+ }, [token, page, status, searchQuery])
+
+ useEffect(() => { load() }, [load])
+
+ const doDelete = async () => {
+ if (!confirm) return
+ await adminDeleteArticle(token, confirm.id).catch(() => {})
+ setConfirm(null)
+ load()
+ }
+
+ const doPublish = async id => {
+ await adminPublishArticle(token, id).catch(() => {})
+ load()
+ }
+
+ const totalPages = Math.max(1, Math.ceil(total / PAGE))
+
+ return (
+
+ {confirm && (
+ setConfirm(null)}
+ />
+ )}
+
+ {/* Тулбар */}
+
+
+
+ {['', 'published', 'draft'].map(s => (
+
+ ))}
+
+
setSearchInput(e.target.value)}
+ style={{ width: 220, fontSize: '0.85rem' }}
+ />
+
+ Всего: {total}
+
+
+
+
+
+ | Заголовок |
+ Статус |
+ Дата |
+ Действия |
+
+
+
+ {items.map(a => (
+
+ |
+ {a.title}
+ |
+ |
+
+ {fmt(a.published_at ?? a.created_at)}
+ |
+
+
+ ✏️
+ {a.status !== 'published' && (
+
+ )}
+
+
+ |
+
+ ))}
+
+
+
+
+ {page} / {totalPages}
+
+
+ )}
+
+ )}
+
+ )
+}
diff --git a/web-react/src/pages/admin/Categories.jsx b/web-react/src/pages/admin/Categories.jsx
new file mode 100644
index 0000000..cb561fc
--- /dev/null
+++ b/web-react/src/pages/admin/Categories.jsx
@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react'
+import { useAuth } from '../../hooks/useAuth'
+import { adminListCategories, adminCreateCategory, adminUpdateCategory, adminDeleteCategory } from '../../api/index'
+import AdminLayout from '../../components/AdminLayout'
+import Confirm from '../../components/Confirm'
+import Loader from '../../components/Loader'
+
+export default function Categories() {
+ const { token } = useAuth()
+ const [cats, setCats] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [newName, setNewName] = useState('')
+ const [editing, setEditing] = useState(null) // { id, name }
+ const [confirm, setConfirm] = useState(null) // { id, name }
+ const [alert, setAlert] = useState(null)
+
+ const load = async () => {
+ setLoading(true)
+ try { setCats(await adminListCategories(token)) }
+ finally { setLoading(false) }
+ }
+
+ useEffect(() => { load() }, [token])
+
+ const flash = (type, msg) => {
+ setAlert({ type, msg })
+ setTimeout(() => setAlert(null), 3000)
+ }
+
+ const doCreate = async e => {
+ e.preventDefault()
+ if (!newName.trim()) return
+ try {
+ await adminCreateCategory(token, newName.trim())
+ setNewName('')
+ flash('success', 'Категория создана')
+ load()
+ } catch { flash('error', 'Ошибка создания') }
+ }
+
+ const doUpdate = async () => {
+ if (!editing) return
+ try {
+ await adminUpdateCategory(token, editing.id, editing.name)
+ setEditing(null)
+ flash('success', 'Сохранено')
+ load()
+ } catch { flash('error', 'Ошибка сохранения') }
+ }
+
+ const doDelete = async () => {
+ if (!confirm) return
+ try {
+ await adminDeleteCategory(token, confirm.id)
+ setConfirm(null)
+ flash('success', 'Удалено')
+ load()
+ } catch { flash('error', 'Ошибка удаления') }
+ }
+
+ return (
+
+ {confirm && (
+ setConfirm(null)}
+ />
+ )}
+
+ {alert && {alert.msg}
}
+
+
+
+ {loading ? : (
+
+ )}
+
+ )
+}
diff --git a/web-react/src/pages/admin/Dashboard.jsx b/web-react/src/pages/admin/Dashboard.jsx
new file mode 100644
index 0000000..db1e197
--- /dev/null
+++ b/web-react/src/pages/admin/Dashboard.jsx
@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { useAuth } from '../../hooks/useAuth'
+import { adminListArticles } from '../../api/index'
+import AdminLayout from '../../components/AdminLayout'
+import StatusBadge from '../../components/StatusBadge'
+import Loader from '../../components/Loader'
+
+function fmt(iso) {
+ if (!iso) return '—'
+ return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+export default function Dashboard() {
+ const { token } = useAuth()
+ const [stats, setStats] = useState({ published: 0, drafts: 0, total: 0 })
+ const [recent, setRecent] = useState([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ Promise.all([
+ adminListArticles(token, { limit: 1, status: 'published' }),
+ adminListArticles(token, { limit: 1, status: 'draft' }),
+ adminListArticles(token, { limit: 8 }),
+ ]).then(([pub, draft, all]) => {
+ setStats({
+ published: pub?.total ?? 0,
+ drafts: draft?.total ?? 0,
+ total: all?.total ?? 0,
+ })
+ setRecent(all?.items ?? [])
+ }).catch(() => {})
+ .finally(() => setLoading(false))
+ }, [token])
+
+ return (
+
+ {loading ? : (
+ <>
+
+
+
{stats.total}
+
Всего статей
+
+
+
{stats.published}
+
Опубликовано
+
+
+
{stats.drafts}
+
Черновики
+
+
+
+
+
+ | Заголовок |
+ Статус |
+ Дата |
+ |
+
+
+
+ {recent.map(a => (
+
+ |
+ {a.title}
+ |
+ |
+ {fmt(a.published_at ?? a.created_at)} |
+
+ Открыть
+ |
+
+ ))}
+
+
+
+ 🎬
+ {filename}
+
+ )
+ return (
+