支持板块图标与主题色自定义，并优化列表加载与未保存离开提示。

新增后端图标校验与色槽规范化，前端展示 BoardBadge/骨架屏，发帖与板块管理页增加未保存确认。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-28 17:13:32 +08:00
parent e038d4f9e9
commit 55c256654b
63 changed files with 1966 additions and 714 deletions
--- a/frontend/src/pages/BoardsManagePage.tsx
+++ b/frontend/src/pages/BoardsManagePage.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -24,20 +23,25 @@ import {
  Form, FormControl, FormField, FormItem, FormLabel, FormMessage,
 } from '@/components/ui/form';
 import { notify } from '@/lib/notify';
+import { cn } from '@/lib/utils';
 import { api } from '../api/client';
 import { useAdminGuard } from '../layouts/AdminLayout';
 import type { Board } from '../api/types';
+import { BoardColorPicker, BoardIconPicker } from '../components/BoardAppearancePicker';
+import BoardIconDisplay from '../components/BoardIconDisplay';
+import { getBoardThemeIndex } from '../utils/boardTheme';

 const boardSchema = z.object({
  name: z.string().min(1, '请输入名称').max(64),
  description: z.string().max(500).optional(),
  sort_order: z.coerce.number().min(0),
+  icon: z.string().max(64).optional(),
+  color_index: z.coerce.number().min(-1).max(7),
 });

 type BoardFormValues = z.infer<typeof boardSchema>;

 export default function BoardsManagePage() {
-  const nav = useNavigate();
  const { ready } = useAdminGuard();
  const [boards, setBoards] = useState<Board[]>([]);
  const [loading, setLoading] = useState(true);
@@ -47,9 +51,12 @@ export default function BoardsManagePage() {

  const form = useForm<BoardFormValues>({
    resolver: zodResolver(boardSchema),
-    defaultValues: { name: '', description: '', sort_order: 1 },
+    defaultValues: { name: '', description: '', sort_order: 1, icon: '', color_index: -1 },
  });

+  const watchColorIndex = form.watch('color_index');
+  const editingPreviewId = editing?.id ?? boards.length + 1;
+
  const load = () => {
    setLoading(true);
    api.boards()
@@ -64,7 +71,7 @@ export default function BoardsManagePage() {

  const openCreate = () => {
    setEditing(null);
-    form.reset({ name: '', description: '', sort_order: boards.length + 1 });
+    form.reset({ name: '', description: '', sort_order: boards.length + 1, icon: '', color_index: -1 });
    setModalOpen(true);
  };

@@ -74,6 +81,8 @@ export default function BoardsManagePage() {
      name: board.name,
      description: board.description ?? '',
      sort_order: board.sort_order,
+      icon: board.icon ?? '',
+      color_index: board.color_index ?? -1,
    });
    setModalOpen(true);
  };
@@ -81,11 +90,18 @@ export default function BoardsManagePage() {
  const handleSubmit = async (values: BoardFormValues) => {
    setSubmitting(true);
    try {
+      const body = {
+        name: values.name,
+        description: values.description ?? '',
+        sort_order: values.sort_order,
+        icon: values.icon ?? '',
+        color_index: values.color_index ?? -1,
+      };
      if (editing) {
-        await api.updateBoard(editing.id, values);
+        await api.updateBoard(editing.id, body);
        notify.success('板块已更新');
      } else {
-        await api.createBoard(values);
+        await api.createBoard(body);
        notify.success('板块已创建');
      }
      setModalOpen(false);
@@ -119,7 +135,7 @@ export default function BoardsManagePage() {
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <h1>板块管理</h1>
-            <p>创建、编辑或删除论坛板块，用户发帖前需先有板块</p>
+            <p>创建、编辑或删除论坛板块；可为每个板块自定义图标与色标</p>
          </div>
          <Button onClick={openCreate}>
            <Plus />
@@ -137,6 +153,7 @@ export default function BoardsManagePage() {
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[60px]">ID</TableHead>
+                    <TableHead className="w-[52px]">图标</TableHead>
                    <TableHead>名称</TableHead>
                    <TableHead>简介</TableHead>
                    <TableHead className="w-[70px]">排序</TableHead>
@@ -145,9 +162,16 @@ export default function BoardsManagePage() {
                  </TableRow>
                </TableHeader>
                <TableBody>
-                  {boards.map(board => (
+                  {boards.map(board => {
+                    const themeIdx = getBoardThemeIndex(board);
+                    return (
                    <TableRow key={board.id}>
                      <TableCell>{board.id}</TableCell>
+                      <TableCell>
+                        <span className={cn('board-table-icon', `sidebar-board-icon--${themeIdx}`)}>
+                          <BoardIconDisplay board={board} />
+                        </span>
+                      </TableCell>
                      <TableCell><strong>{board.name}</strong></TableCell>
                      <TableCell className="max-w-[200px] truncate">{board.description}</TableCell>
                      <TableCell>{board.sort_order}</TableCell>
@@ -179,7 +203,8 @@ export default function BoardsManagePage() {
                        </div>
                      </TableCell>
                    </TableRow>
-                  ))}
+                    );
+                  })}
                </TableBody>
              </Table>
              {boards.length === 0 && (
@@ -192,7 +217,7 @@ export default function BoardsManagePage() {
      </div>

      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent>
+        <DialogContent className="board-manage-dialog">
          <DialogHeader>
            <DialogTitle>{editing ? '编辑板块' : '新建板块'}</DialogTitle>
          </DialogHeader>
@@ -224,6 +249,40 @@ export default function BoardsManagePage() {
                  </FormItem>
                )}
              />
+              <FormField
+                control={form.control}
+                name="icon"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>板块图标</FormLabel>
+                    <FormControl>
+                      <BoardIconPicker
+                        value={field.value ?? ''}
+                        onChange={field.onChange}
+                        board={{ id: editingPreviewId, color_index: watchColorIndex }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="color_index"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>色标颜色</FormLabel>
+                    <FormControl>
+                      <BoardColorPicker
+                        value={field.value ?? -1}
+                        onChange={field.onChange}
+                        boardId={editingPreviewId}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
              <FormField
                control={form.control}
                name="sort_order"
--- a/frontend/src/pages/ComposePage.tsx
+++ b/frontend/src/pages/ComposePage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useNavigate, useSearchParams, useParams } from 'react-router-dom';
 import { ArrowLeft, Send, Tag } from 'lucide-react';
 import { notify } from '@/lib/notify';
@@ -7,9 +7,18 @@ import { useAuth } from '../hooks/useAuth';
 import type { Board } from '../api/types';
 import { isHtmlEmpty } from '../utils/postContent';
 import { useForumLimits } from '../hooks/useForumLimits';
+import { useUnsavedChangesGuard } from '../hooks/useUnsavedChangesGuard';
 import ArticleEditor from '../components/ArticleEditor';
+import UnsavedChangesDialog from '../components/UnsavedChangesDialog';
 import { Spinner } from '@/components/ui/spinner';

+interface ComposeBaseline {
+  title: string;
+  tags: string;
+  content: string;
+  boardId: string;
+}
+
 export default function ComposePage() {
  const nav = useNavigate();
  const { id: editIdParam } = useParams();
@@ -27,6 +36,7 @@ export default function ComposePage() {
  const [content, setContent] = useState('');
  const [publishing, setPublishing] = useState(false);
  const [loading, setLoading] = useState(isEdit);
+  const [baseline, setBaseline] = useState<ComposeBaseline | null>(null);

  useEffect(() => {
    if (authLoading) return;
@@ -50,10 +60,17 @@ export default function ComposePage() {
            nav(`/post/${editId}`);
            return;
          }
-          setBoardId(String(post.board_id));
+          const loadedBoardId = String(post.board_id);
+          setBoardId(loadedBoardId);
          setTitle(post.title);
          setTags(post.tags ?? '');
          setContent(post.content ?? '');
+          setBaseline({
+            title: post.title,
+            tags: post.tags ?? '',
+            content: post.content ?? '',
+            boardId: loadedBoardId,
+          });
        })
        .catch((e: unknown) => {
          notify.error(e instanceof Error ? e.message : '加载帖子失败');
@@ -66,12 +83,37 @@ export default function ComposePage() {
    api.boards().then(d => {
      const list = d.boards ?? [];
      setBoards(list);
+      const initialBoardId = defaultBoard || (list.length > 0 ? String(list[0].id) : '');
      if (!defaultBoard && list.length > 0) {
-        setBoardId(String(list[0].id));
+        setBoardId(initialBoardId);
      }
+      setBaseline({
+        title: '',
+        tags: '',
+        content: '',
+        boardId: initialBoardId,
+      });
    }).catch(() => {});
  }, [user, authLoading, nav, defaultBoard, isEdit, editId]);

+  const isDirty = useMemo(() => {
+    if (!baseline) return false;
+    return (
+      title !== baseline.title
+      || tags !== baseline.tags
+      || content !== baseline.content
+      || (!isEdit && boardId !== baseline.boardId)
+    );
+  }, [baseline, title, tags, content, boardId, isEdit]);
+
+  const {
+    dialogOpen,
+    stayOnPage,
+    discardAndLeave,
+    requestLeave,
+    markSaved,
+  } = useUnsavedChangesGuard({ isDirty });
+
  if (authLoading) {
    return (
      <div className="compose-page compose-page--empty">
@@ -127,10 +169,12 @@ export default function ComposePage() {
      if (isEdit) {
        await api.updatePost(editId!, payload);
        notify.success('帖子已更新');
+        markSaved();
        nav(`/post/${editId}`);
      } else {
        const res = await api.createPost({ board_id: boardId, ...payload });
        notify.success('发帖成功');
+        markSaved();
        nav(`/post/${res.post_id}`);
      }
    } catch (e: unknown) {
@@ -146,7 +190,11 @@ export default function ComposePage() {
    <div className="compose-page">
      <div className="compose-canvas">
        <header className="compose-header">
-          <button type="button" className="compose-back" onClick={() => nav(isEdit ? `/post/${editId}` : -1)}>
+          <button
+            type="button"
+            className="compose-back"
+            onClick={() => requestLeave(() => nav(isEdit ? `/post/${editId}` : -1))}
+          >
            <ArrowLeft size={16} />
            <span>返回</span>
          </button>
@@ -215,6 +263,12 @@ export default function ComposePage() {
          />
        </div>
      </div>
+      <UnsavedChangesDialog
+        open={dialogOpen}
+        onStay={stayOnPage}
+        onLeave={discardAndLeave}
+        isEdit={isEdit}
+      />
    </div>
  );
 }
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -183,19 +183,20 @@ export default function HomePage() {

  return (
    <div className="page-wrap" ref={pageWrapRef}>
-      <div className="feed-top">
-        <FeedHeader
-          boardId={boardId}
-          keyword={keyword}
-          boards={ctx?.boards ?? []}
-          stats={ctx?.stats ?? null}
-          postTotal={postTotal}
-        />
-        {showSortBar && (
-          <FeedSortBar value={sort} onChange={handleSortChange} postTotal={postTotal} />
-        )}
-      </div>
-      <VirtualPostList
+      <div className="feed-panel">
+        <div className="feed-top">
+          <FeedHeader
+            boardId={boardId}
+            keyword={keyword}
+            boards={ctx?.boards ?? []}
+            stats={ctx?.stats ?? null}
+            postTotal={postTotal}
+          />
+          {showSortBar && (
+            <FeedSortBar value={sort} onChange={handleSortChange} postTotal={postTotal} />
+          )}
+        </div>
+        <VirtualPostList
        posts={posts}
        sort={sort}
        loading={loading}
@@ -209,6 +210,7 @@ export default function HomePage() {
        onScrollTopChange={(top) => { scrollTopRef.current = top; }}
        onScrollRestored={() => setRestoreScrollTop(null)}
      />
+      </div>
    </div>
  );
 }
--- a/frontend/src/pages/PostDetailPage.tsx
+++ b/frontend/src/pages/PostDetailPage.tsx
@@ -4,6 +4,7 @@ import { ArrowLeft, ThumbsUp, Star, Pencil, Pin, History, Lock } from 'lucide-re
 import PinnedIcon from '@/components/PinnedIcon';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import BoardBadge from '@/components/BoardBadge';
 import { Spinner } from '@/components/ui/spinner';
 import { notify } from '@/lib/notify';
 import { api } from '../api/client';
@@ -214,7 +215,7 @@ export default function PostDetailPage() {
            返回
          </Button>
          {post.board && (
-            <Badge variant="green" className="post-detail-board-tag">{post.board.name}</Badge>
+            <BoardBadge board={post.board} className="post-detail-board-tag" />
          )}
        </div>