+ {/* 页面标题和工具栏 */}
+ form.submit()}
+ width={520}
+ >
+
+
+
+ );
+}
diff --git a/apps/web/src/pages/health/ArticleEditor.tsx b/apps/web/src/pages/health/ArticleEditor.tsx
new file mode 100644
index 0000000..3a82de7
--- /dev/null
+++ b/apps/web/src/pages/health/ArticleEditor.tsx
@@ -0,0 +1,516 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button, Input, Select, Space, message, Spin } from 'antd';
+import { ArrowLeftOutlined, SaveOutlined, SendOutlined } from '@ant-design/icons';
+import { Editor, Toolbar } from '@wangeditor/editor-for-react';
+import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
+import {
+ articleApi,
+ articleCategoryApi,
+ articleTagApi,
+ type Article,
+ type ArticleTagItem,
+} from '../../api/health/articles';
+import { useThemeMode } from '../../hooks/useThemeMode';
+import { AuthButton } from '../../components/AuthButton';
+import '@wangeditor/editor/dist/css/style.css';
+
+export default function ArticleEditor() {
+ const { id } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+ const isEdit = Boolean(id);
+ const isDark = useThemeMode();
+
+ // 表单状态
+ const [title, setTitle] = useState('');
+ const [summary, setSummary] = useState('');
+ const [content, setContent] = useState('');
+ const [coverImage, setCoverImage] = useState('');
+ const [slug, setSlug] = useState('');
+ const [categoryId, setCategoryId] = useState
+
+ } onClick={openCreateModal}>
+ 新建分类
+
+
+
+
+ {/* 表格容器 */}
+
+
+ 分类管理
+管理文章分类，支持多级分类结构
+
+
+
+
+ {/* 新建/编辑分类弹窗 */}
+
+
+ );
+ }
+
+ return (
+
+ {/* 页面标题栏 */}
+
+ );
+}
diff --git a/apps/web/src/pages/health/ArticleManageList.tsx b/apps/web/src/pages/health/ArticleManageList.tsx
new file mode 100644
index 0000000..e1980ab
--- /dev/null
+++ b/apps/web/src/pages/health/ArticleManageList.tsx
@@ -0,0 +1,498 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+ Table,
+ Button,
+ Space,
+ Input,
+ Select,
+ Tag,
+ Tabs,
+ Popconfirm,
+ message,
+ Modal,
+ Form,
+} from 'antd';
+import {
+ PlusOutlined,
+ SearchOutlined,
+ EditOutlined,
+ DeleteOutlined,
+ SendOutlined,
+ CheckOutlined,
+ CloseOutlined,
+ RollbackOutlined,
+ EyeOutlined,
+} from '@ant-design/icons';
+import {
+ articleApi,
+ articleCategoryApi,
+ type ArticleListItem,
+ type ArticleStatus,
+ type ArticleTagItem,
+} from '../../api/health/articles';
+import { useThemeMode } from '../../hooks/useThemeMode';
+import { AuthButton } from '../../components/AuthButton';
+
+const STATUS_TABS: { key: string; label: string }[] = [
+ { key: '', label: '全部' },
+ { key: 'draft', label: '草稿' },
+ { key: 'pending_review', label: '待审核' },
+ { key: 'published', label: '已发布' },
+ { key: 'rejected', label: '已拒绝' },
+];
+
+const STATUS_CONFIG: Record<
+ string,
+ { label: string; color: string }
+> = {
+ draft: { label: '草稿', color: 'default' },
+ pending_review: { label: '待审核', color: 'processing' },
+ published: { label: '已发布', color: 'success' },
+ rejected: { label: '已拒绝', color: 'error' },
+};
+
+export default function ArticleManageList() {
+ const [articles, setArticles] = useState
+
+ }
+ onClick={() => navigate('/health/articles')}
+ />
+
+
+
+ }
+ onClick={handleSave}
+ loading={saving}
+ >
+ 保存草稿
+
+
+
+ }
+ onClick={handleSubmit}
+ loading={saving}
+ >
+ 提交审核
+
+
+
+
+
+ {/* 主体布局: 左侧编辑区 + 右侧设置面板 */}
+
+
+ {isEdit ? '编辑文章' : '新建文章'}
+
+ {/* 左侧: 富文本编辑器 */}
+
+
+
+
+ {/* 右侧: 设置面板 */}
+
+
+
+ setContent(editorInstance.getHtml())}
+ mode="default"
+ style={{
+ minHeight: 500,
+ background: isDark ? '#111827' : '#FFFFFF',
+ color: isDark ? '#e2e8f0' : '#1e293b',
+ }}
+ />
+
+
+ {/* 标题 */}
+
+
+
+ setTitle(e.target.value)}
+ placeholder="请输入文章标题"
+ maxLength={200}
+ showCount
+ />
+
+
+ {/* 分类 */}
+
+
+
+
+ {/* 标签 */}
+
+
+
+
+ {/* 摘要 */}
+
+
+ setSummary(e.target.value)}
+ placeholder="请输入文章摘要"
+ rows={3}
+ maxLength={500}
+ showCount
+ />
+
+
+ {/* 封面图 */}
+
+
+ setCoverImage(e.target.value)}
+ placeholder="请输入封面图片 URL"
+ />
+ {coverImage && (
+
+
+ {/* Slug */}
+
+ 
{
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
+
+ )}
+
+
+ setSlug(e.target.value)}
+ placeholder="例如: health-tips-for-elderly"
+ />
+
+
+ {/* 排序 */}
+
+
+ setSortOrder(Number(e.target.value))}
+ placeholder="0"
+ />
+
+
+ {record.cover_image && (
+
+ )}
+
+ ),
+ },
+ {
+ title: '分类',
+ dataIndex: 'category_name',
+ key: 'category_name',
+ width: 120,
+ render: (v?: string) => v || 未分类,
+ },
+ {
+ title: '标签',
+ dataIndex: 'tags',
+ key: 'tags',
+ width: 180,
+ render: (tags?: ArticleTagItem[]) => {
+ if (!tags || tags.length === 0) {
+ return -;
+ }
+ return (
+
+
+ navigate(`/health/articles/${record.id}/edit`)}
+ >
+ {title}
+
+ {record.summary && (
+
+ {record.summary}
+
+ )}
+
+ {/* 页面标题和工具栏 */}
+
+
+ }
+ onClick={() => navigate('/health/articles/new')}
+ >
+ 新建文章
+
+
+
+
+ {/* 筛选栏 */}
+
+
+ 内容管理
+管理健康科普文章、资讯和内容发布
+
+ }
+ value={keyword}
+ onChange={(e) => debouncedSearch(e.target.value)}
+ allowClear
+ style={{ width: 220, borderRadius: 8 }}
+ />
+
+
+ {/* 状态标签页 + 表格 */}
+
+ {
+ setStatusTab(key);
+ setPage(1);
+ }}
+ items={STATUS_TABS.map((tab) => ({ key: tab.key, label: tab.label }))}
+ style={{ padding: '0 16px', marginBottom: 0 }}
+ />
+ {
+ setPage(p);
+ fetchArticles(p);
+ },
+ showTotal: (t) => `共 ${t} 条记录`,
+ style: { padding: '12px 16px', margin: 0 },
+ }}
+ />
+
+
+ {/* 拒绝理由弹窗 */}
+