LabelingSystem/web/apps/lq_label/PROJECT_TASK_REDESIGN_SUMMARY.md

项目和任务管理页面重新设计总结

概述

本次重新设计了项目管理（ProjectsView）和任务管理（TasksView）页面，采用现代化的表格设计和筛选方法，完全支持三种主题模式（白色、深色、护眼模式）。

设计原则

1. 现代简约风格

• 无 emoji 表情
• 无渐变色
• 无紫色类色彩
• 圆角设计（12px 卡片，8px 按钮）
• 清晰的视觉层次

2. 主题系统集成

• 完全使用 CSS 变量（--theme-*）
• 支持三种主题模式切换
• 所有颜色都从主题配置中获取
• 平滑的过渡动画

3. 高效的信息展示

• 清晰的表格布局
• 直观的搜索和筛选功能
• 快速的操作按钮
• 友好的空状态提示

主要改进

项目管理页面（ProjectListView）

功能特性

1. 搜索功能

   • 实时搜索项目名称和描述
   • 搜索框带图标提示
   • 响应式布局

2. 表格设计

   • 现代化的表格样式
   • 悬停高亮效果
   • 固定表头（sticky header）
   • 圆角边框

3. 操作按钮

   • 查看详情（Eye 图标）
   • 编辑项目（Edit 图标）
   • 删除项目（Trash2 图标）
   • 悬停时显示提示

4. 状态显示

   • 任务数量徽章
   • 活跃/非活跃状态区分
   • 创建时间显示（日期+时间）

5. 对话框

   • 创建项目对话框
   • 删除确认对话框
   • 模态遮罩层
   • 平滑动画效果

视觉改进

• 清晰的页面标题和副标题
• 主操作按钮（创建项目）突出显示
• 错误消息带图标提示
• 空状态友好提示
• 加载状态动画

任务管理页面（TaskListView）

功能特性

1. 状态筛选

   • 全部/待处理/进行中/已完成
   • 按钮式筛选器
   • 活跃状态高亮

2. 搜索功能

   • 搜索任务名称、项目ID、负责人
   • 实时过滤结果
   • 搜索框带图标

3. 表格设计

   • 7列信息展示
   • 进度条可视化
   • 状态徽章
   • 操作按钮组

4. 进度显示

   • 可视化进度条
   • 百分比数字
   • 平滑过渡动画

5. 操作按钮

   • 开始标注（Play 图标，主色调）
   • 查看详情（Eye 图标）
   • 删除任务（Trash2 图标，危险色）

视觉改进

• 状态徽章颜色区分（待处理/进行中/已完成）
• 进度条动态宽度
• 操作按钮悬停效果
• 空状态和加载状态

技术实现

组件结构

views/
├── project-list-view/
│   ├── project-list-view.tsx       # 项目列表组件
│   └── project-list-view.module.scss  # 样式文件
└── task-list-view/
    ├── task-list-view.tsx          # 任务列表组件
    └── task-list-view.module.scss     # 样式文件

图标使用

使用 Lucide React 图标库：

• Plus - 创建按钮
• Search - 搜索框
• Eye - 查看详情
• Edit - 编辑
• Trash2 - 删除
• Play - 开始标注
• FolderOpen - 空状态（项目）
• ListTodo - 空状态（任务）
• AlertCircle - 错误提示

样式系统

CSS 变量使用

// 背景色
--theme-background
--theme-background-secondary
--theme-background-tertiary

// 文本色
--theme-headline
--theme-paragraph
--theme-paragraph-subtle

// 交互元素
--theme-button
--theme-button-text
--theme-button-hover
--theme-button-active

// 边框
--theme-border
--theme-border-subtle

// 状态色
--theme-success
--theme-warning
--theme-error
--theme-info

// 卡片
--theme-card-background
--theme-card-border
--theme-card-hover

// 阴影
--theme-shadow

关键样式特性

1. 圆角设计

   • 卡片：12px
   • 按钮：8px
   • 输入框：8px
   • 徽章：12px

2. 间距系统

   • 小间距：8px
   • 中间距：12px
   • 大间距：16px
   • 舒适间距：24px

3. 过渡动画

   • 按钮悬停：0.2s ease
   • 表格行悬停：0.15s ease
   • 进度条：0.3s ease
   • 对话框：0.3s ease

4. 响应式设计

   • 搜索框最大宽度：400px
   • 对话框最大宽度：480px-600px
   • 表格自适应滚动

用户体验改进

1. 搜索和筛选

• 项目页面：按名称和描述搜索
• 任务页面：按状态筛选 + 按名称/项目/负责人搜索
• 实时过滤，无需提交
• 清晰的筛选状态指示

2. 空状态处理

• 友好的图标和文案
• 引导用户进行下一步操作
• 区分"无数据"和"无匹配结果"

3. 加载状态

• 旋转加载动画
• 加载文案提示
• 不阻塞页面布局

4. 错误处理

• 醒目的错误提示
• 带图标的错误消息
• 不影响其他功能使用

5. 操作反馈

• 按钮悬停效果
• 表格行悬停高亮
• 删除确认对话框
• 提交中状态显示

主题适配

白色主题（Light）

• 背景：纯白色
• 主色调：蓝色（#2563eb）
• 清晰的边框和阴影
• 高对比度文本

深色主题（Dark）

• 背景：深蓝灰色（#0f172a）
• 主色调：亮蓝色（#3b82f6）
• 柔和的边框
• 舒适的文本对比度

护眼主题（Eye-Care）

• 背景：暖米色（#f9f4ef）
• 主色调：棕色（#8c7851）
• 温暖的色调
• 适合长时间使用

无障碍性

1. 语义化 HTML

   • 使用 <table> 标签
   • 正确的标题层级
   • 按钮带 title 属性

2. 键盘导航

   • 所有交互元素可聚焦
   • Tab 键顺序合理

3. 颜色对比度

   • 符合 WCAG 2.1 AA 标准
   • 状态不仅依赖颜色

4. 视觉反馈

   • 悬停状态
   • 焦点状态
   • 活跃状态

性能优化

1. CSS 优化

   • 使用 CSS 变量减少重复
   • 硬件加速的动画（transform）
   • 避免昂贵的 CSS 属性

2. 渲染优化

   • 条件渲染对话框
   • 虚拟化长列表（未来可添加）
   • 防抖搜索（未来可添加）

3. 状态管理

   • 使用 Jotai 原子状态
   • 避免不必要的重渲染
   • 合理的状态分离

未来改进方向

1. 功能增强

   • 批量操作（多选）
   • 排序功能
   • 分页或虚拟滚动
   • 导出数据

2. 交互优化

   • 拖拽排序
   • 快捷键支持
   • 右键菜单
   • 撤销/重做

3. 视觉增强

   • 更多动画效果
   • 数据可视化
   • 自定义主题
   • 暗色模式优化

4. 性能提升

   • 虚拟滚动
   • 懒加载
   • 缓存策略
   • 离线支持

文件清单

修改的文件

• web/apps/lq_label/src/views/project-list-view/project-list-view.tsx
• web/apps/lq_label/src/views/task-list-view/task-list-view.tsx

新增的文件

• web/apps/lq_label/src/views/project-list-view/project-list-view.module.scss
• web/apps/lq_label/src/views/task-list-view/task-list-view.module.scss
• web/apps/lq_label/PROJECT_TASK_REDESIGN_SUMMARY.md（本文件）

总结

本次重新设计完全遵循了用户的要求：

• ✅ 现代化、标准化的设计
• ✅ 无 emoji、无渐变色、无紫色
• ✅ 后台管理风格的布局
• ✅ 三种主题模式支持
• ✅ 圆角和艺术化的文本放置
• ✅ 高效的标注效率和信息获取
• ✅ 使用 Lucide React 图标
• ✅ 现代化的表格样式和筛选方法

页面现在更加专业、清晰、易用，完全符合现代标注平台的设计标准。