# UI 风格约束 本文档用于约束星痕课程工坊的整体界面风格。所有新增页面、组件、弹窗和后台管理界面，都应与首页保持同一套视觉语言：清爽、留白充足、低噪声、以蓝色作为主行动色。 ## 设计基调 - 整体气质：轻盈、克制、专业，避免强装饰感。 - 页面背景：使用浅灰蓝底色，优先采用 `#f5f7fb` 或接近色。 - 内容承载：主要内容放在白色卡片、白色面板或无框布局中。 - 视觉重心：蓝色只用于主操作、当前状态、重要标签和焦点反馈。 - 禁止新增大面积紫色、红色渐变、深色后台主题，除非是明确的品牌改版。 ## 颜色 核心颜色以 `src/styles.css` 中的 CSS 变量为准： ```css --blue: #245bd6; --blue-dark: #1646b5; --ink: #17213a; --muted: #78839a; --line: #e4e8f0; --paper: #fff; ``` 使用规则： - 主按钮、当前导航、关键徽标使用 `--blue`。 - 主按钮 hover 使用 `--blue-dark`。 - 正文主色使用 `--ink` 或接近的深蓝灰。 - 次要说明文字使用 `--muted` 或灰蓝色。 - 边框使用 `--line` 或低饱和浅灰蓝。 - 浅蓝背景优先使用 `#edf3ff`、`#eff6ff`、`#f8fbff` 这一类低饱和色。 语义色可以保留： - 删除、错误、拒绝：红色。 - 成功、完成：绿色。 - 警告、待处理：黄色或金色。 语义色只用于状态表达，不应用作普通装饰色。 ## 按钮 按钮样式必须与首页主按钮保持一致，优先复用已有类名： - 主操作：`.primary-button` - 次操作：`.secondary-button` - 小按钮：`.small-button` - 强调按钮：`.highlight-button` 按钮约束： - 圆角使用 `--button-radius`，当前为 `8px`。 - 普通按钮最小高度使用 `--button-height`，当前为 `44px`。 - 小按钮最小高度使用 `--button-small-height`，当前为 `34px`。 - 主按钮背景使用 `--blue`，不要新增紫蓝渐变。 - hover 可以轻微上浮，但不要使用夸张动画。 - disabled 状态必须降低透明度并移除阴影。 - 可点击元素必须保留清晰的 `focus-visible` 焦点样式。 ## 卡片与面板 - 卡片背景优先使用白色或接近白色。 - 卡片边框使用浅灰蓝，避免高对比描边。 - 常规卡片圆角控制在 `8px` 到 `14px`。 - 阴影应轻、薄、低透明度，只用于区分层级。 - 后台页面也使用浅色背景和白色面板，不使用深色登录页或深色管理壳。 - 不要在卡片里再堆多层装饰卡片；复杂信息优先用分组、分隔线、网格和标签组织。 ## 表单 - 输入框背景使用白色或 `#fbfcfe`。 - 输入框边框使用浅灰蓝。 - 输入框 focus 使用蓝色边框和低透明度蓝色外发光。 - label 使用中性深灰蓝，避免纯黑。 - 必填星号允许使用红色，这是语义状态。 - 表单间距保持稳定，不要因为错误提示或动态内容导致布局跳动。 ## 标签与徽标 - 普通信息标签使用浅蓝、浅灰蓝或白色描边。 - 当前状态、主要编号、关键 badge 使用蓝色体系。 - 管理员身份、导航入口、分集编号等非错误状态，不使用紫色或红色。 - 圆角标签可以使用 `4px` 到 `8px`，胶囊标签仅用于筛选、状态或非常短的元信息。 ## 导航 - 当前导航项使用 `--blue`。 - 普通导航项使用灰蓝色。 - 顶部导航和后台导航都应保持浅色背景、细边框、轻阴影或无阴影。 - 不同端的入口可以通过文字和小 badge 区分，但不应换成另一套颜色主题。 ## 弹窗 - 弹窗使用白色背景、浅边框、轻阴影。 - 弹窗标题、表单、按钮应与页面内组件同源。 - tab、分段控件、上传区域等交互元素使用蓝色作为 active 或 focus 状态。 - 遮罩和阴影只用于层级，不要让弹窗呈现深色主题。 ## 排版 - 字体沿用全局字体栈：`Inter`、`SF Pro Display`、`PingFang SC`、`Microsoft YaHei`。 - 首页可以使用更大的展示字号；后台、表格、卡片内标题应更紧凑。 - 正文说明文字保持灰蓝色，行高舒适。 - 不新增负 letter-spacing；界面文字应优先清晰易读。 ## 新增 UI 检查清单 提交新增页面或组件前，至少检查： - 是否复用了现有按钮类，而不是重新写一套按钮。 - 页面背景、卡片、输入框是否仍是浅灰蓝和白色体系。 - 主色是否统一为 `--blue`，没有新增紫色、紫蓝渐变或深色主题。 - 红色是否只用于错误、删除、拒绝等语义状态。 - hover、active、disabled、focus-visible 状态是否完整。 - 文案是否在移动端和桌面端都不会溢出按钮、卡片或标签。 - 后台页面是否与首页保持同一品牌感，而不是变成独立视觉系统。 ## 修改入口 全局视觉变量和通用组件样式集中在： - `src/styles.css` 新增样式时优先扩展已有 token 和通用类，只有在现有样式无法表达新组件语义时，再添加新的局部类。