Feature/blog cms admin UI

[vH192Hv]

设计方案

页面路由

路由	页面	说明
/admin/blog	BlogPostsPage	帖子列表（分页/过滤/搜索）
/admin/blog/new	PostEditorPage	创建新帖子
/admin/blog/:id/edit	PostEditorPage	编辑已有帖子

组件架构

BlogPostsPage
  ├── PostStatusBadge          # 彩色状态标签 (DRAFT/PUBLISHED/ARCHIVED)
  ├── 搜索栏 (useDebounce, 300ms)
  ├── 状态过滤器 + 标签过滤器
  ├── 帖子表格 (title, author, status, tags, date, actions)
  └── 分页控件

PostEditorPage
  ├── Breadcrumb
  └── PostForm
        ├── Title (slugg 自动生成)
        ├── Slug (可手动编辑)
        ├── Content (Markdown textarea)
        ├── Excerpt
        ├── Cover Image URL
        ├── TagSelector ──── 标签多选 + 内联创建
        ├── Status ──── 分段控件 (按转换规则限可用选项)
        └── Actions ──── Delete / Cancel / Save

关键实现细节

BlogPostsPage:

• 搜索防抖 (useDebounce, 300ms)，与 UsersTable 一致
• 空状态区分："数据库为空" vs "无匹配过滤器"
• 从 wasp/client/operations 导入操作函数
• 接收 user: AuthUser prop，传入 DefaultLayout

PostEditorPage:

• 通过路由 param :id 区分 create/edit 模式
• useQuery(getPost, { enabled: isEditing }) 条件加载
• 所有导航（save/cancel/delete）由页面级回调控制
• handleCreateTag 捕获错误并打印日志

PostForm:

• generateSlug() 从 utils.ts 导入（浏览器安全）
• getAllowedTransitions() 限制状态选项
• onCancel/onDelete 回调 → 父组件控制导航
• 表单级字段校验 (title, slug, content required)

TagSelector:

• 已选标签: 主色背景 + X 移除按钮
• 未选标签: 灰色背景 + ✓ 添加图标
• 新建标签: 文本输入 + Enter/Add 按钮
• 创建后自动选中新标签

PostStatusBadge:

• DRAFT: 黄色, PUBLISHED: 绿色, ARCHIVED: 灰色
• 使用 shadcn/ui 语义色彩 token (bg-*-100, text-*-800)
• 支持 dark mode

侧边栏导航

在 admin sidebar MENU 区添加 "Blog" 导航项（FileText 图标），位于 Users 和 Settings 之间。

执行方案

• 创建 PostStatusBadge.tsx 组件
• 创建 TagSelector.tsx 组件
• 创建 PostForm.tsx 共享表单组件
• 创建 BlogPostsPage.tsx 列表页
• 创建 PostEditorPage.tsx 编辑页
• 在 admin.wasp.ts 注册 3 条路由
• 在 Sidebar.tsx 添加 Blog 导航项

文件变更

文件	操作	行数
template/app/src/blog-cms/BlogPostsPage.tsx	新增	185
template/app/src/blog-cms/PostEditorPage.tsx	新增	128
template/app/src/blog-cms/components/PostForm.tsx	新增	245
template/app/src/blog-cms/components/TagSelector.tsx	新增	124
template/app/src/blog-cms/components/PostStatusBadge.tsx	新增	24
template/app/src/admin/admin.wasp.ts	修改	+17
template/app/src/admin/layout/Sidebar.tsx	修改	+21

🔽 依赖 PR2 (operations) — 合并顺序第 3（与 PR4 并行）