前端界面重新设计总结

设计目标

系统性地重新设计前端界面，打造现代化、专业的标注平台，遵循以下原则：

现代简约风格 - 干净整洁，无 emoji，专业感
三种主题模式 - 白色、深色、护眼模式
后台管理风格 - 侧边栏 + 顶部导航 + 内容区
高效信息架构 - 圆角设计，清晰的视觉层次
标注效率优先 - 减少干扰，突出核心功能

实现内容

1. 主题系统

创建的文件

src/theme/theme-config.ts

定义三种主题模式的颜色配置
白色模式：干净专业，使用蓝色作为主色调
深色模式：现代舒适，使用深蓝灰色背景
护眼模式：温暖舒适，使用指定的护眼色彩方案
- background: #f9f4ef
- headline: #020826
- paragraph: #716040
- button: #8c7851
- buttontext: #fffffe

src/atoms/theme-atoms.ts

使用 Jotai 管理主题状态
支持 localStorage 持久化
提供派生 atoms 用于主题判断

src/components/theme-provider/

ThemeProvider 组件
自动应用 CSS 变量到文档根元素
监听主题变化并实时更新

src/components/theme-switcher/

主题切换组件
三个按钮：白色、深色、护眼
带图标和标签，响应式设计

2. 布局系统

重新设计的组件

src/components/layout/layout.tsx + layout.module.scss

现代后台管理布局
侧边栏 + 顶部栏 + 内容区
响应式设计，移动端友好

src/components/layout/top-bar.tsx + top-bar.module.scss

新增顶部导航栏
显示当前页面标题
集成主题切换器
固定高度 64px（移动端 56px）

src/components/layout/sidebar.tsx + sidebar.module.scss

完全重新设计的侧边栏
移除所有 emoji
添加自定义 Logo（SVG 图标）
现代化菜单项设计
活动状态使用主题色高亮
移动端滑动抽屉 + 遮罩层

3. 首页重新设计

src/views/home-view.tsx + home-view.module.scss

移除所有 emoji
Hero Section：大标题 + 描述 + 双按钮
Features Grid：三个功能卡片，悬停效果
Stats Section：三个统计项
使用 CSS 模块化样式
完全响应式设计

4. 全局样式

src/styles/global.scss

基础重置样式
主题变量应用
滚动条样式
焦点样式
选择样式
工具类
卡片样式
按钮基础样式
状态颜色
加载动画

主题色彩方案

白色模式（Light）

背景：#ffffff, #f8f9fa, #f1f3f5
文字：#1a1a1a, #4a4a4a, #6b7280
按钮：#2563eb（蓝色）
边框：#e5e7eb

深色模式（Dark）

背景：#0f172a, #1e293b, #334155
文字：#f1f5f9, #cbd5e1, #94a3b8
按钮：#3b82f6（亮蓝色）
边框：#334155

护眼模式（Eye-Care）

背景：#f9f4ef, #eaddcf, #e5d4c1
文字：#020826, #716040, #8c7851
按钮：#8c7851（棕色）
边框：#d4c4b0

设计特点

1. 无渐变色

所有颜色使用纯色
避免使用渐变效果
保持界面简洁专业

2. 无紫色

主色调使用蓝色系（白色/深色模式）
护眼模式使用棕色系
避免使用紫色或类似颜色

3. 圆角设计

卡片：12px 圆角
按钮：8-10px 圆角
输入框：8px 圆角
Logo 图标：8px 圆角

4. 文本层次

标题：大字号，粗体，headline 颜色
正文：中等字号，paragraph 颜色
辅助文本：小字号，paragraph-subtle 颜色

5. 交互反馈

悬停：背景色变化 + 边框高亮
活动：主题色背景 + 白色文字
点击：轻微缩放或位移
过渡：0.2-0.3s ease 动画

6. 响应式设计

桌面端：侧边栏固定，内容区自适应
平板端：侧边栏可收起
移动端：汉堡菜单 + 滑动抽屉

技术实现

CSS 变量系统

所有颜色通过 CSS 变量定义：

--theme-background
--theme-headline
--theme-paragraph
--theme-button
--theme-border
...

主题切换流程

用户点击主题按钮
更新 Jotai atom 状态
ThemeProvider 监听变化
应用新的 CSS 变量
所有组件自动更新

样式组织

全局样式：global.scss
组件样式：component.module.scss
主题配置：theme-config.ts
避免内联样式

LabelStudio 编辑器

主题适配策略

暂不修改编辑器内部样式
编辑器保持默认样式
只修改编辑器容器的背景和边框
避免样式冲突和复杂度

未来优化方向

如果需要编辑器主题适配：

研究 LabelStudio 的主题系统
创建自定义 CSS 覆盖
测试所有标注类型
确保不影响功能

使用方法

切换主题

点击顶部栏右侧的主题切换器
选择白色、深色或护眼模式
主题自动保存到 localStorage
下次访问自动应用上次选择的主题

自定义主题

修改 src/theme/theme-config.ts 中的颜色值：

export const themes: Record<ThemeMode, ThemeColors> = {
  light: {
    background: '#ffffff',
    // ... 其他颜色
  },
  // ...
};

添加新主题

在 ThemeMode 类型中添加新模式
在 themes 对象中添加颜色配置
在 ThemeSwitcher 中添加按钮
更新 CSS 变量映射

文件清单

新增文件

src/theme/theme-config.ts - 主题配置
src/atoms/theme-atoms.ts - 主题状态管理
src/components/theme-provider/ - 主题提供者
src/components/theme-switcher/ - 主题切换器
src/components/layout/top-bar.tsx - 顶部栏
src/components/layout/top-bar.module.scss - 顶部栏样式
src/components/layout/layout.module.scss - 布局样式
src/components/layout/sidebar.module.scss - 侧边栏样式
src/views/home-view.module.scss - 首页样式
src/styles/global.scss - 全局样式

修改文件

src/app/app.tsx - 集成 ThemeProvider
src/main.tsx - 导入全局样式
src/components/layout/layout.tsx - 重新设计布局
src/components/layout/sidebar.tsx - 重新设计侧边栏
src/views/home-view.tsx - 重新设计首页

下一步建议

1. 其他页面重新设计

ProjectsView - 项目列表页
ProjectDetailView - 项目详情页
TasksView - 任务列表页
AnnotationView - 标注页面
使用相同的设计语言和组件

2. 组件库扩展

创建统一的 Button 组件
创建统一的 Card 组件
创建统一的 Input 组件
创建统一的 Table 组件

3. 动画优化

添加页面切换动画
添加列表项加载动画
添加骨架屏
优化过渡效果

4. 无障碍性

添加 ARIA 标签
键盘导航支持
屏幕阅读器优化
对比度检查

5. 性能优化

懒加载组件
图片优化
代码分割
缓存策略

总结

成功实现了现代化、专业的前端界面重新设计：

✅ 三种主题模式（白色、深色、护眼） ✅ 后台管理风格布局 ✅ 移除所有 emoji ✅ 圆角设计 ✅ 清晰的视觉层次 ✅ 响应式设计 ✅ 主题持久化 ✅ 平滑过渡动画 ✅ 专业的色彩方案 ✅ 模块化样式组织

用户现在可以：

在三种主题之间自由切换
享受现代化的界面设计
在不同设备上获得良好体验
长时间使用护眼模式减少疲劳
获得高效的标注工作流程

这为标注平台提供了完整的现代化界面基础！

THEME_REDESIGN_SUMMARY.md 7.3 KB Vēsture Neapstrādāts