UI 风格约束

本文档用于约束星痕课程工坊的整体界面风格。所有新增页面、组件、弹窗和后台管理界面，都应与首页保持同一套视觉语言：清爽、留白充足、低噪声、以蓝色作为主行动色。

设计基调

整体气质：轻盈、克制、专业，避免强装饰感。
页面背景：使用浅灰蓝底色，优先采用 #f5f7fb 或接近色。
内容承载：主要内容放在白色卡片、白色面板或无框布局中。
视觉重心：蓝色只用于主操作、当前状态、重要标签和焦点反馈。
禁止新增大面积紫色、红色渐变、深色后台主题，除非是明确的品牌改版。

颜色

核心颜色以 src/styles.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 和通用类，只有在现有样式无法表达新组件语义时，再添加新的局部类。