视觉规范
色彩系统
主色调
primary
#5E6AD2
用于图标、重点文字、交互元素高亮
浅色主题颜色方案
背景色
文本色
深色主题颜色方案
背景色
文本色
功能色
#5E6AD2 - 用于主要操作和强调
#E2E8F0 / #334155 - 用于分割和边界
#8A8F98 - 用于次要信息和提示
排版系统
标题层级
一级标题
text-3xl font-bold
二级标题
text-2xl font-semibold
三级标题
text-xl font-semibold
四级标题
font-semibold text-lg
正文与列表
正文文本
默认文本样式，辅助文本使用text-sm
示例：这是一段普通正文文本，用于展示内容信息。
列表样式
有序列表：list-decimal pl-5 space-y-2
- 列表项1
- 列表项2
无序列表：list-disc pl-5 space-y-1
- 列表项A
- 列表项B
图标规范
本项目使用Font Awesome 4.7.0图标库，以下是所有页面中使用的图标分类整理。
图标尺寸规范
小图标 (0.75rem)
text-xs
标准图标 (1rem)
text-base
中等图标 (1.125rem)
text-sm
大图标 (1.25rem)
text-xl
加大图标 (1.875rem)
text-xl
超大图标 (3.75rem)
text-6xl
导航与交互图标
无障碍访问，用于品牌标识和导航
返回按钮，导航返回
前进按钮，导航前进
向下箭头，展开内容
向上箭头，返回顶部
菜单按钮，移动端导航
主题与设置图标
月亮图标，深色主题切换
太阳图标，浅色主题切换
内容与信息图标
信息提示，帮助说明
灯泡，创意和想法
书籍，文档和指南
文档，文本文件
列表，清单项目
列表，详细清单
用户与社交图标
用户组，团队协作
用户，个人账户
握手，合作和伙伴关系
地球，全球和网络
Twitter，社交媒体
邮件，联系和通信
功能与工具图标
齿轮，设置和配置
扳手，工具和修复
芯片，技术和AI
插头，连接和集成
滑块，控制和调节
刷新，更新和重新加载
状态与反馈图标
成功状态，完成确认
检查，确认和验证
复选框，选择和选项
禁止，限制和排除
问题，帮助和疑问
外部链接，跳转到其他页面
设计与创意图标
画笔，设计和创意
眼睛，视觉和观察
鼠标指针，交互和点击
手机，移动设备
天平，平衡和公平
心形，喜爱和关怀
其他专用图标
毕业帽，教育和学习
立方体，模块和组件
礼物，奖励和赠品
火箭，启动和加速
指南针，方向和导航
拼图，解决方案和适配
组件规范
导航
导航容器
- • 固定定位：sticky top-0 z-50
- • 背景：backdrop-blur-md bg-light-200/80 dark:bg-dark-800/80
- • 边框：border-b border-light-400 dark:border-dark-600
- • 过渡：transition-all duration-300
桌面端导航链接
- • 基础样式：px-3 py-2 text-sm font-medium
- • 悬停效果：hover:text-primary
- • 过渡：transition-colors duration-200
- • 显示控制：hidden lg:flex
移动端导航链接
- • 基础样式：block px-3 py-2 rounded-md text-base font-medium
- • 悬停效果：hover:bg-light-300 dark:hover:bg-dark-600
- • 过渡：transition-colors duration-200
- • 显示控制：lg:hidden
导航按钮
- • 基础样式：p-2 rounded-full
- • 悬停效果：hover:bg-light-300 dark:hover:bg-dark-700
- • 过渡：transition-all duration-200
表单元素
文本输入框
基础状态
w-full p-3/p-4 bg-light-200 dark:bg-dark-800
border border-light-400 dark:border-dark-600 rounded-md
聚焦状态
focus:ring-2 focus:ring-primary focus:border-primary
transition-colors
单选、多选按钮
基础状态
包裹容器：flex items-center p-4 bg-light-200 dark:bg-dark-800
border border-light-400 dark:border-dark-600 rounded-md cursor-pointer
单选框本身：mr-3 text-primary focus:ring-primary
悬停状态
hover:border-primary transition-colors
按钮
基础状态
bg-primary #5E6AD2
悬浮状态
bg-primary/90 rgba(94, 106, 210, 0.9)（基于#5E6AD2计算）
内容组件与布局
卡片组件
基础样式：
bg-light-100 dark:bg-dark-700 rounded-xl border border-light-400 dark:border-dark-600
悬停效果：
hover:shadow-lg transition-all duration-300
内边距：
统一使用p-6
客户声音/引用组件
带左侧蓝色边框的引用容器
bg-light-200 dark:bg-dark-800 p-5 rounded-lg border-l-4 border-primary
其他组件
标签/标题栏：
phase-tag px-6 py-3 border-b border-light-400 dark:border-dark-600 flex items-center
图标容器：
w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center
部分为w-12 h-12
布局规范
内容容器
max-w-4xl mx-auto
网格布局
grid md:grid-cols-3 gap-4
间距系统
space-y-8、space-y-6、mb-4等
交互规范
通用交互
悬停效果
卡片
hover:shadow-lg transition-all duration-300
(阴影增强)
按钮/可点击元素
hover:bg-light-300 dark:hover:bg-dark-600
transition-colors duration-200
特殊卡片
hover:border-primary/50 transition-all
duration-300 hover:scale-105
过渡动画
统一使用 transition-all duration-300（部分元素使用 duration-200）
桌面端交互
-
导航
通过锚点链接实现页面内导航（如href="#intro"）
-
列表交互
使用图标增强列表项的交互提示
-
内容区块
卡片式布局，每个功能区块独立封装
移动端交互
-
菜单展示
移动端使用隐藏式菜单，通过触发显示
-
响应式布局
使用lg:hidden控制移动端特有元素
-
触控优化
交互元素采用较大点击区域
组件交互细节
折叠/展开
存在section-hidden类，支持内容区块的折叠展开功能
表单元素
保持一致的交互模式，符合整体设计风格
提示反馈
通过颜色变化和图标提供操作反馈
响应式设计规范
断点划分
大屏幕
使用lg:前缀控制大屏幕样式
中等屏幕
使用md:前缀控制中等屏幕样式
布局适配
大屏幕
- 多列网格布局
- 完整导航展示
- 更宽松的间距
- 充分利用屏幕空间
小屏幕
- 单列布局
- 隐藏式导航菜单
- 紧凑但舒适的间距
- 垂直堆叠内容
元素适配
图标大小
在不同屏幕下保持一致的尺寸比例
文本大小
使用相对单位，确保各设备可读性
间距调整
小屏幕下保持合适的内容间距
设计原则体现
包容性设计
通过明暗模式切换支持不同视觉需求，确保所有用户都能舒适地使用界面。
一致性
所有卡片、按钮、列表等元素保持统一的设计语言，使用户能够快速熟悉和使用界面。
可访问性
提供足够的颜色对比度、清晰的文本层级和交互反馈，确保不同能力的用户都能访问。
简洁性
界面元素风格简约，聚焦内容传递，减少视觉干扰，帮助用户高效获取信息。
设计规范的价值不仅在于定义视觉样式，更在于建立一套共同的设计语言，让团队成员能够高效协作，为用户创造一致且优质的体验。