基本功能完成，下一步开始美化UI

.trae/documents/Implementation Plan for User Group Management System.md

@@ -0,0 +1,45 @@
+I will implement the User Group Management System as follows:
+
+### 1. Database Schema Changes
+*   **New Table `user_groups`**: Stores group info (id, name, description, is_system, created_at).
+*   **New Table `user_group_members`**: Links users to groups (group_id, user_id, created_at).
+*   **Update `exam_tasks`**: Add `selection_config` column to store the original assignment logic (e.g., which groups were selected).
+*   **Migration Script**: Create `scripts/migrate_user_groups.ts` to initialize tables and the default "All Users" group, adding all existing users to it.
+
+### 2. Backend Implementation (Node.js/Express)
+*   **Models**:
+    *   `UserGroupModel`: CRUD for groups, membership management, and "All Users" logic.
+    *   Update `UserModel`: Methods to fetch user's groups.
+    *   Update `ExamTaskModel`: Handle `selection_config`.
+*   **Controllers**:
+    *   `UserGroupController`: API endpoints for group management.
+    *   Update `UserController`:
+        *   Auto-add new users to "All Users" group.
+        *   Handle group assignment updates.
+    *   Update `ExamTaskController`:
+        *   Support assigning tasks by `groupIds`.
+        *   Logic to flatten groups + users and remove duplicates.
+*   **API Routes**: Register new `/api/user-groups` endpoints.
+
+### 3. Frontend Implementation (React)
+*   **User Management (`UserManagePage`)**:
+    *   Add a **Tab Interface**: "User List" vs "User Group Management".
+    *   **Group Management Tab**: List groups, Create/Edit/Delete groups (with "All Users" protection).
+    *   **User List**: Show assigned groups in the table.
+    *   **User Edit Modal**: Add a Multi-select component to manage user's groups.
+*   **Exam Task Assignment (`ExamTaskPage`)**:
+    *   Update Assignment Modal.
+    *   Add **User Group Selection** (Multi-select).
+    *   Show "Selected Users" count and "Selected Groups" count.
+    *   Implement logic to calculate total unique users before saving.
+
+### 4. Business Logic & Constraints
+*   **"All Users" Group**:
+    *   Created automatically.
+    *   Cannot be deleted or renamed.
+    *   All new users join automatically.
+    *   Users cannot be removed from it manually.
+*   **Audit**: Record group membership changes (log to database/console as appropriate).
+*   **Permissions**: Ensure only admins can manage groups (reusing existing Admin middleware).
+
+I will start by creating the migration script and updating the backend models.

.trae/documents/Modify User Selection List Style and Sorting.md

@@ -0,0 +1,24 @@
+I will modify the "Participating Users" selection component in `src/pages/admin/ExamTaskPage.tsx` to support displaying up to 50 users with a scrollbar and automatic sorting.
+
+**Implementation Steps:**
+
+1. **Add Custom CSS (`src/index.css`):**
+
+   * Add a `.user-select-scrollable` class to handle the scrollbar logic for the Ant Design Select component.
+
+   * Set `max-height` (e.g., 120px) and `overflow-y: auto` for the `.ant-select-selector` to ensure it scrolls when many users are selected.
+
+2. **Update Component (`src/pages/admin/ExamTaskPage.tsx`):**
+
+   * **Remove Restrictions:** Remove `maxTagCount={3}` and `maxTagPlaceholder` props from the `Select` component to allow all selected users to be displayed.
+
+   * **Apply Style:** Add `className="user-select-scrollable"` to the `Select` component.
+
+   * **Implement Sorting:** Add a `normalize` function to the parent `Form.Item`. This function will intercept value changes and sort the selected User IDs alphabetically by their names (using `localeCompare` for Chinese support).
+
+3. **Verification:**
+
+   * Ensure the development server is running.
+
+   * Provide a preview URL for you to test the changes (User selection should expand, show a scrollbar after filling up, and selected names should automatically sort).
+

.trae/documents/Optimize User Selection Display and Table Layout.md

@@ -0,0 +1,26 @@
+I will modify `src/pages/admin/ExamTaskPage.tsx` to optimize the user selection display and the table layout.
+
+**Implementation Steps:**
+
+1. **Optimize User Selection (`Select`** **Component):**
+
+   * Add `optionLabelProp="label"` to the `Select` component.
+
+   * Update `Select.Option` to include a `label={user.name}` prop.
+
+   * This ensures that while the dropdown still shows "Name (Phone)" for clarity, the selected tags in the input box will only show "Name", saving significant space.
+
+2. **Optimize Table Layout (`columns`** **Configuration):**
+
+   * **Task Name & Subject:** Add specific `width` properties (e.g., `200px` and `150px`) and `ellipsis: true` to the "Task Name" and "Exam Subject" columns to give them more space and handle overflow gracefully.
+
+   * **Action Column:** Change the `<Space>` component in the "Action" column to `<Space direction="vertical" size={0}>`. This will stack the "Edit", "Report", and "Delete" buttons vertically, reducing the column's required width. I will also set a fixed, narrower width for this column.
+
+3. **Verification:**
+
+   * Verify that selected users in the form only show their names.
+
+   * Verify that the table "Action" column is narrower with vertically stacked buttons.
+
+   * Verify that "Task Name" and "Exam Subject" columns are wider.
+

.trae/documents/UI视觉全面升级方案.md

@@ -0,0 +1,58 @@
+# UI视觉升级与品牌化实施方案
+
+本计划旨在对现有系统进行全面的视觉升级，重点引入全新的色彩规范（Mars Green）并实施严格的Logo展示规范。
+
+## 1. 视觉系统构建 (Visual System)
+**目标**: 建立以"Mars Green"为核心的科技感视觉体系。
+- **色彩规范 (Colors)**:
+  - **主色 (Primary)**: `#008C8C` (Mars Green)。
+  - **辅助色 (Secondary)**: `#00A3A3` (明亮), `#006666` (深沉)。
+  - **中性色**: 调整灰度色阶，配合青色调，营造冷峻科技感。
+  - **操作**: 更新 `tailwind.config.js` 的 `colors` 配置，更新 `src/main.tsx` 的 Ant Design `token`。
+- **Logo 占位组件 (Brand Identity)**:
+  - **组件化**: 创建 `src/components/common/Logo.tsx`。
+  - **规格**:
+    - `Primary`: 100x40px (Nav Left), 带 "Placeholder" 水印 (15% opacity)。
+    - `Secondary`: 80x30px (Footer Right), 简化版。
+  - **可配置性**: 使用 CSS 变量或 Props 控制路径，预留未来替换接口。
+  - **响应式**: 移动端自动切换为图标模式或缩小比例。
+
+## 2. 全局样式配置 (Global Configuration)
+- **Ant Design 主题**:
+  - `colorPrimary`: `#008C8C`。
+  - `borderRadius`: `8px` (圆角适中，兼顾亲和力与专业感)。
+  - `fontFamily`: 优先使用系统字体栈，配合 `Inter`。
+- **排版系统**:
+  - 建立 8px 网格间距系统 (Spacing Token)。
+  - 优化全局字号与行高。
+
+## 3. 布局与组件改造 (Layout & Components)
+**目标**: 植入品牌元素，优化空间布局。
+- **通用布局组件 (Layouts)**:
+  - **`AdminLayout.tsx`**:
+    - 顶部导航栏左侧植入 100x40px Logo 区域。
+    - 底部增加 Footer 区域，右侧植入 80x30px Logo。
+    - 调整侧边栏配色，呼应主色调。
+  - **用户端页面 (`HomePage.tsx`)**:
+    - 重构页面结构，从单一居中容器改为 `Header - Content - Footer` 结构。
+    - 确保 Logo 在首屏清晰可见。
+- **组件样式微调**:
+  - **Button**: 增加高度至 40px/48px，增强点击感。
+  - **Card**: 优化阴影 (Shadow) 和圆角，减少视觉噪点。
+  - **Input**: 统一高度和边框颜色。
+
+## 4. 实施步骤
+1.  **核心配置**: 修改 `tailwind.config.js` 和 `src/main.tsx`，确立 Mars Green 主调。
+2.  **组件开发**: 实现 `Logo` 组件。
+3.  **布局重构**:
+    - 改造 `AdminLayout`，加入 Header/Footer Logo 区域。
+    - 改造 `HomePage`，加入 Header/Footer 结构。
+4.  **样式覆盖**: 遍历主要页面，替换旧的颜色类名 (如 `text-blue-600` -> `text-primary-600`)，调整间距。
+5.  **验证**: 检查 Logo 尺寸、位置及水印效果，验证移动端适配。
+
+## 5. 交付物
+- 更新后的 UI 代码库。
+- 响应式设计规范文档 (含 Logo 使用规范)。
+- 视觉走查清单。
+
+请确认执行。

.trae/documents/加宽考试任务管理页面的操作列.md

@@ -0,0 +1,6 @@
+我将修改 `src/pages/admin/ExamTaskPage.tsx` 文件，找到表格配置中的“操作”列定义。
+
+具体变更如下：
+- 将操作列的宽度 `width` 从 `80` 增加到 `120`。
+
+这将使操作列更宽，符合您的要求。

.trae/documents/升级考试统计饼图为现代环形图.md

@@ -0,0 +1,31 @@
+我将修改 `src/pages/admin/AdminDashboardPage.tsx` 文件，将原本逻辑有误且样式陈旧的实心饼图升级为**现代化的环形图 (Donut Chart)**。
+
+### 具体修改计划：
+
+1.  **修正数据计算逻辑**：
+    *   目前的逻辑中，“已完成”、“合格”、“优秀”存在包含关系，导致饼图数据重叠。
+    *   **新逻辑**（确保各部分互斥且总和为总人数）：
+        *   **未完成** (`Incomplete`): 总人数 - 已完成
+        *   **不及格** (`Failed`): 已完成 - 合格
+        *   **合格** (`Passed`): 合格 - 优秀 (即“合格但未达优秀”)
+        *   **优秀** (`Excellent`): 优秀人数
+    *   这样四个部分加起来正好等于总人数，能准确反映分布情况。
+
+2.  **升级图表视觉效果**：
+    *   **环形设计**：设置 `innerRadius={40}` 和 `outerRadius={60}`，将饼图变为环形图，视觉上更轻量现代。
+    *   **颜色优化**：使用 Ant Design 标准色板：
+        *   优秀: `#fa8c16` (橙色)
+        *   合格: `#52c41a` (绿色)
+        *   不及格: `#ff4d4f` (红色)
+        *   未完成: `#f0f0f0` (浅灰，降低视觉干扰)
+    *   **交互优化**：
+        *   移除杂乱的外部连线 Label，保持界面整洁。
+        *   优化 `Tooltip`，鼠标悬停时显示具体人数和占比。
+        *   在环形图中心添加文字（如“总计”或完成率），充分利用空间。
+
+3.  **代码实现**：
+    *   修改 `AdminDashboardPage.tsx` 中的 `pieData` 生成逻辑。
+    *   更新 `Recharts` 的 `Pie` 组件属性配置。
+
+### 预期效果：
+新的环形图将清晰地展示考试的整体进度和成绩分布，消除数据重叠带来的误解，并且在视觉上更加美观、专业。