test: align Taro visual guardrails with legacy UI

docs/refactor/taro-visual-language.md

@@ -1,36 +1,36 @@
 # Taro H5 视觉语言规范
 
-更新时间：2026-07-01
+更新时间：2026-07-02
 
 这份规范用于约束 `apps/taro` 的学生端、租户后台和平台后台。旧题库前端参考目录为 `F:\project\参考\旧题库小程序前端文件`，只作为页面状态、学习流程、后台信息密度和微信平台交互的参考，不继承旧 PocketBase 直连、旧鉴权、旧字段模型或旧技术栈。
 
 ## 总原则
 
 - Taro 是前端体验层：负责路由、布局、交互、公开运行时配置、Supabase Auth session 和统一 API client；复杂业务判断、权限、价格、权益、导入、支付、CRM 和对象存储签名以后端为准。
-- Web 首发优先做成可反复使用的工具型产品，不做营销落地页式的大图 Hero、装饰卡片堆叠、渐变背景和过度留白。
-- 学生端要接近旧题库小程序的学习节奏：入口清楚、题目阅读专注、答题卡稳定、错题/收藏/报告路径短。
-- 租户后台和平台后台要接近运营工具：信息密度高、层级清楚、操作按钮固定、列表和指标可扫读。
+- Web 首发优先做成可反复使用的工具型产品，不做营销落地页式的大图 Hero、装饰卡片堆叠和过度留白。
+- 学生端要接近旧题库小程序/旧 Web 的学习节奏：浅灰网格背景、PC 左侧栏、移动底部 dock、蓝色学习横幅、彩色学习模块、白色统计卡和短路径练习入口。
+- 租户后台和平台后台要接近旧后台运营工具：浅灰/白色密集工作台、圆角侧栏、深色 active nav、表格/列表优先、操作按钮固定、指标可扫读。
 
 ## 视觉基线
 
 | 项 | 规范 |
 | --- | --- |
-| 页面背景 | `#f6f8fb`、`#f8fafc`、`#f7f9fc` 这类浅灰蓝工作台背景 |
+| 页面背景 | `#f4f6f9` 为主，叠加旧题库 40px 网格线；后台主区可用白色/浅灰工作台背景 |
 | 主文字 | `#0f172a`、`#111827`、`#172033` |
 | 次级文字 | `#64748b`、`#475569` |
-| 主色 | `#2563eb` / `#1d4ed8`，租户发布主题后可由后端安全 token 覆盖 |
+| 主色 | 旧题库蓝 `#1152d4`，辅以 `#2563eb` / `#1d4ed8`；租户发布主题后可由后端安全 token 覆盖 |
 | 成功/强调 | `#10b981`、`#16a34a`，只用于进度、完成、兑换等状态 |
 | 危险 | `#be123c`、`#dc2626`，只用于退款、驳回、删除、失败 |
-| 圆角 | 卡片、按钮、输入框、面板统一不超过 `8px`；小进度条、chip、badge 可用 `999px` |
+| 圆角 | 延续旧题库圆润但克制的尺度：输入/小按钮约 `8-12px`，列表/卡片约 `12-18px`，首页模块/登录/侧栏面板可到 `24-32px`；进度条、chip、badge、头像、滚动条和装饰标记可用 `999px` |
 | 字体 | 固定 px/rpx 风格，不使用 `vw/vh/vmin/vmax` 缩放字体 |
 | 字距 | 不使用负 `letter-spacing` |
-| 装饰 | 禁止径向渐变、模糊光斑、装饰性大渐变背景；头像预设和水印纹理是当前允许例外 |
+| 装饰 | 禁止径向光斑和裸 `filter: blur()` 装饰；允许旧题库样式里的网格背景、蓝色学习横幅、彩色模块卡、主按钮渐变、状态面板渐变，以及侧栏/dock 的受控 `backdrop-filter` |
 
 ## 页面结构
 
-- 学生端页面使用 `student-page`、`student-topbar`、`section-block`、`list-stack`、`quiet-panel` 等现有类名体系。
-- 租户后台使用 `admin-page`、`admin-shell`、`admin-header`、`admin-metric`、`admin-row`、`admin-button`。
-- 平台后台使用 `platform-page`、`platform-shell`、`platform-header`、`platform-metric`、`platform-row`、`platform-button`。
+- 学生端页面使用 `StudentLegacyShell` 提供 PC 左侧栏和移动 dock；页面内部继续使用 `student-page`、`student-topbar`、`section-block`、`list-stack`、`quiet-panel` 等现有类名体系。
+- 租户后台使用 `AdminLegacyShell` 提供旧后台侧栏/移动横向 nav，并复用 `admin-page`、`admin-shell`、`admin-header`、`admin-metric`、`admin-row`、`admin-button`。
+- 平台后台使用 `AdminLegacyShell` 提供旧后台侧栏/移动横向 nav，并复用 `platform-page`、`platform-shell`、`platform-header`、`platform-metric`、`platform-row`、`platform-button`。
 - 新页面优先复用这些体系，不要为同类按钮、卡片、列表重新发明一套视觉类名。
 - 页面区域不要做卡片套卡片。重复列表项、工具面板、表单组可以是卡片；页面大 section 应保持无外框或全宽分区。
 
@@ -62,10 +62,10 @@ npm run smoke:taro:h5:interaction
 
 `taro-visual-guardrails` 会扫描 `apps/taro/src/**/*.css`，阻断：
 
-- 卡片、按钮、面板、输入框出现超过 `8px` 的圆角。
-- 进度条/chip/badge/pill 之外滥用 `999px` 大圆角。
+- 卡片、按钮、面板、输入框出现超过旧题库 `32px` 尺度的大圆角。
+- 进度条/chip/badge/pill/头像/滚动条/装饰标记之外滥用 `999px` 大圆角。
 - 使用 `vw/vh/vmin/vmax` 做字体大小。
 - 负 `letter-spacing`。
-- 装饰性径向渐变、模糊背景和未登记线性渐变。
+- 装饰性径向渐变、裸 `filter: blur()`、未登记的 `backdrop-filter` 或未登记线性渐变。
 
 如确实需要新增例外，必须先说明 UI 目的，再更新 `scripts/taro-visual-guardrails.js` 的白名单和这份文档。