Add product and design docs

DESIGN.md

+---
+name: 账号与域名资产管理台
+description: 面向数字资产管理员的专业后台工作台
+colors:
+  page-bg: "#f4f7fb"
+  surface: "#ffffff"
+  surface-soft: "#fafcff"
+  surface-muted: "#f3f6fb"
+  line: "#e7edf6"
+  line-strong: "#d9e2f2"
+  text-main: "#1f2a44"
+  text-strong: "#101828"
+  text-sub: "#667085"
+  text-soft: "#98a2b3"
+  brand: "#2563eb"
+  brand-deep: "#1d4ed8"
+  brand-soft: "#eef3ff"
+  success: "#22c55e"
+  success-soft: "#ecfdf3"
+  warning: "#ff8a00"
+  warning-soft: "#fff6ea"
+  danger: "#ef4444"
+  danger-soft: "#fff2f3"
+  purple: "#7c4dff"
+  purple-soft: "#f3efff"
+  nav-start: "#071224"
+  nav-end: "#0b162d"
+  nav-active: "#4271d5"
+typography:
+  headline:
+    fontFamily: "\"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
+    fontSize: "24px"
+    fontWeight: 700
+    lineHeight: 1.2
+  title:
+    fontFamily: "\"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
+    fontSize: "16px"
+    fontWeight: 700
+    lineHeight: 1.35
+  body:
+    fontFamily: "\"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
+    fontSize: "14px"
+    fontWeight: 400
+    lineHeight: 1.5
+  label:
+    fontFamily: "\"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
+    fontSize: "13px"
+    fontWeight: 600
+    lineHeight: 1.4
+rounded:
+  sm: "8px"
+  md: "10px"
+  lg: "12px"
+  xl: "16px"
+  panel: "20px"
+spacing:
+  xs: "8px"
+  sm: "10px"
+  md: "12px"
+  lg: "16px"
+  xl: "24px"
+  xxl: "32px"
+components:
+  button-primary:
+    backgroundColor: "{colors.brand}"
+    textColor: "{colors.surface}"
+    rounded: "{rounded.md}"
+    padding: "0 16px"
+    height: "42px"
+  button-secondary:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.text-main}"
+    rounded: "{rounded.md}"
+    padding: "0 16px"
+    height: "42px"
+  card-default:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.text-main}"
+    rounded: "{rounded.xl}"
+    padding: "16px 18px"
+  input-default:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.text-main}"
+    rounded: "{rounded.md}"
+    padding: "0 12px"
+    height: "40px"
+  nav-item-active:
+    backgroundColor: "{colors.nav-active}"
+    textColor: "{colors.surface}"
+    rounded: "{rounded.xl}"
+    padding: "0 14px"
+    height: "50px"
+---
+
+# Design System: 账号与域名资产管理台
+
+## 1. Overview
+
+**Creative North Star: "稳态运营驾驶舱"**
+
+这个系统的视觉基调来自典型运营后台，但刻意压低了展示欲，强调的是一眼读懂、快速定位、持续处理。页面以浅色主工作区、深色侧边导航、清晰边界和规则卡片密度为主，目的是让管理员把注意力稳定放在资产状态、异常记录、筛选结果和详情面板上，而不是被装饰性视觉带走。
+
+它的设计哲学是“专业先于新奇，秩序先于表演”。品牌蓝只承担主操作、当前选中和重点状态提示，不负责渲染气氛；卡片、表格、筛选区和详情面板共用一套近似组件语法，让多模块切换时没有陌生成本。这个系统明确拒绝营销官网式大标题宣传感，也拒绝炫技数据大屏式夸张视觉噪声。
+
+**Key Characteristics:**
+- 信息密度中高，但通过稳定栅格和分区边界保持可扫读。
+- 主色克制，只在关键动作、选中项和重点提示上发声。
+- 导航、表格、筛选、详情采用统一组件词汇，避免“每块都像不同系统”。
+- 风险状态通过颜色加文本共同表达，不把识别责任压给颜色本身。
+
+## 2. Colors
+
+这套配色属于典型产品后台的 restrained（克制型配色，白话：以中性色为主，只保留一个明确主色）的策略，重点是稳定和可信，而不是制造气氛。
+
+### Primary
+- **运营蓝** (`#2563eb`): 用于主按钮、激活标签、链接、选中态和关键数字，是全局最明确的操作颜色。
+- **深运营蓝** (`#1d4ed8`): 用于需要更强确认感的文字强调和深一层品牌动作，避免所有蓝色都停留在同一层级。
+
+### Secondary
+- **风险橙** (`#ff8a00`): 用于待处理、即将到期、提醒类状态，承担“需要看一眼但还不是事故”的语义。
+- **异常红** (`#ef4444`): 用于失败、异常、危险动作和到期警示，是最高风险层级颜色。
+- **状态绿** (`#22c55e`): 用于正常、成功、已启用、可外呼等正向状态反馈。
+- **辅助紫** (`#7c4dff`): 仅出现在个别统计卡和辅助分类中，用来区分信息簇，不承担主流程动作。
+
+### Neutral
+- **页面底灰** (`#f4f7fb`): 作为整体页面底色，给工作区提供柔和但不发黄的背景层。
+- **主表面白** (`#ffffff`): 作为卡片、表格、详情抽屉和输入框的主承载面。
+- **浅表面蓝灰** (`#fafcff`, `#f3f6fb`): 用于层级较轻的辅助表面、标签背景和局部区块。
+- **分隔线灰** (`#e7edf6`, `#d9e2f2`): 用于边框、表格分隔和输入控件描边，保证结构清楚但不过度抢眼。
+- **正文深墨** (`#1f2a44`, `#101828`): 主正文、标题和关键数字的基准文字颜色。
+- **辅助文字灰** (`#667085`, `#98a2b3`): 用于说明、次要字段、占位和不应抢主焦点的文字。
+
+### Named Rules
+**The One Accent Rule.** 主品牌蓝只用于主动作、当前选择和关键提示，不能把整屏 inactive（未激活，白话：用户当前没在操作、没被选中的元素）内容都刷成蓝色。
+
+**The No Showroom Rule.** 不允许把异常红、风险橙、品牌蓝同时大面积铺满同一屏；后台页面的颜色任务是分级，不是表演。
+
+## 3. Typography
+
+**Display Font:** `Segoe UI, PingFang SC, Microsoft YaHei, sans-serif`
+**Body Font:** `Segoe UI, PingFang SC, Microsoft YaHei, sans-serif`
+**Label/Mono Font:** 无独立字体，继续沿用同一套无衬线系统字栈
+
+**Character:** 这套排版没有做品牌展示型字体表演，而是选择 Windows 与中文后台环境里稳定、清楚、熟悉的系统字路线。它追求的是长期阅读不累、字段扫描不乱、不同模块之间视觉语气统一。
+
+### Hierarchy
+- **Headline** (`700`, `24px`, `1.2`): 用在页面主标题、详情主标题和关键页面头部，负责定义当前工作上下文。
+- **Title** (`700`, `16px`, `1.35`): 用在卡片标题、分区标题、侧栏标题和详情小节标题，承担模块内层级组织。
+- **Body** (`400`, `14px`, `1.5`): 用在表格主体、详情字段、说明内容和普通交互文本，是系统的主阅读层。
+- **Label** (`600`, `13px`, `1.4`): 用在筛选标签、状态说明、辅助标题、次级字段名和按钮文案，承担短文本识别任务。
+
+### Named Rules
+**The No Hero Rule.** 这是后台，不是营销官网；不使用夸张展示级标题，不引入 fluid typography（流体字级，白话：会跟着屏幕尺寸明显变化的标题尺寸）来制造戏剧性。
+
+**The Scan First Rule.** 表格、筛选和详情字段优先保证扫读效率，字号和字重变化必须服务层级，不允许为了“设计感”牺牲字段清晰度。
+
+## 4. Elevation
+
+这套系统采用轻量阴影加边框的混合层级。深度表达不是靠强烈漂浮感，而是靠白色表面、细边框、浅阴影和背景层对比共同完成。侧边导航和主内容区通过底色与边界自然分层，详情抽屉再用轻微横向阴影补一层结构感。
+
+### Shadow Vocabulary
+- **常规卡片阴影** (`0 12px 32px rgba(13, 44, 100, 0.07)`): 用于常规卡片、筛选区、表格容器和空态容器，提供轻微浮起感。
+- **轻量控件阴影** (`0 4px 14px rgba(13, 44, 100, 0.05)`): 用于指标卡、输入框等更轻层级部件，避免内容看上去贴死在背景上。
+- **抽屉侧阴影** (`-10px 0 28px rgba(15, 23, 42, 0.03)`): 用于右侧详情面板，强调它是辅助阅读层，不是新的主页面。
+
+### Named Rules
+**The Border Before Shadow Rule.** 先依赖边框和表面层级表达结构，再用浅阴影补充，不允许用厚重阴影去假装高级感。
+
+## 5. Components
+
+### Buttons
+- **Shape:** 中等圆角（`10px`），既保留工具型后台的利落感，又避免过硬。
+- **Primary:** 品牌蓝渐变底（核心值为 `#2563eb`）配白字，高度固定 `42px`，用于新增、确认、批量主操作等高优先级动作。
+- **Hover / Focus:** 现有样式主要通过边框、底色和阴影轻微加强，不依赖夸张位移动效。
+- **Secondary / Ghost:** 白底描边按钮与主按钮同高同圆角，负责次级操作、导出、重置、展开等动作。
+
+### Chips
+- **Style:** 状态标签采用浅底色加深色文字加细边框的组合，圆角 `8px`，尺寸紧凑，适合在表格和详情里高频重复。
+- **State:** success / warning / danger / neutral 四类语义稳定复用，不允许每个模块私自造新颜色系统。
+
+### Cards / Containers
+- **Corner Style:** 大部分业务卡片使用 `16px` 圆角，局部小容器和控件退到 `10px` 到 `12px`。
+- **Background:** 主承载面统一为白色，局部通过浅蓝灰背景做轻分层。
+- **Shadow Strategy:** 轻阴影配细边框，不追求漂浮悬空感。
+- **Border:** 默认使用 `#e7edf6` 或 `#d9e2f2` 描边，既分隔内容，也让后台结构足够规整。
+- **Internal Padding:** 以 `16px` 到 `24px` 为主，保证表格、详情、卡片之间有稳定呼吸感。
+
+### Inputs / Fields
+- **Style:** 白底、细描边、`10px` 圆角、高度 `40px`，用统一字段外观支撑筛选区的高频使用。
+- **Focus:** 当前代码以边框和轻阴影为主，后续可补更明确 focus（焦点态，白话：键盘或当前激活输入框的高亮状态）规则，但不能破坏整体克制气质。
+- **Error / Disabled:** 应继续沿用风险色和弱化文字处理，不能只改占位符或只改背景色。
+
+### Navigation
+- **Style:** 深色侧边导航配浅色主内容区，是这个系统最强的结构识别点。
+- **Typography:** 导航标签使用 `14px` 到 `15px`、中高字重，确保收起前后都易识别。
+- **Default / Hover / Active:** 默认透明，hover 与 active 使用半透明蓝色底和轻边框，让当前所在模块被稳定看见，但不过度发光。
+- **Mobile Treatment:** 小屏下直接隐藏侧栏，优先保住主内容阅读区。
+
+### Tables
+- **Style:** 表格头使用非常浅的蓝灰底，正文保持白底，通过细边框和选中态内阴影区分记录。
+- **State:** 选中行使用浅蓝背景和内描边强调，不用整行重色块压住文本。
+- **Behavior:** 表格与右侧详情形成“列表看全局，抽屉看细节”的双栏工作方式，是系统的核心交互骨架。
+
+## 6. Do's and Don'ts
+
+### Do:
+- **Do** 保持后台工具式层级，让筛选、表格、状态标签、详情抽屉形成稳定阅读顺序。
+- **Do** 用品牌蓝集中表达主动作、激活项和关键链接，不把它扩散成整屏装饰色。
+- **Do** 让异常、待处理、即将到期这类状态同时依赖文字和颜色表达，避免只靠色块传递风险。
+- **Do** 在不同模块里复用同一套按钮、筛选框、状态标签、卡片和表格语言，保证切换成本低。
+- **Do** 把圆角控制在当前尺度附近（`8px` 到 `20px`），维持稳重、专业的产品界面气质。
+
+### Don't:
+- **Don't** 做成营销官网，不要加入大段宣传式文案、超大英雄标题、强情绪氛围背景或展示型首屏。
+- **Don't** 做成炫技数据大屏，不要使用大面积深色底、强发光、夸张渐变、赛博风图表或秀场式大数字。
+- **Don't** 做得太花哨，不要让装饰优先级高过数据、筛选、状态和处理动作。
+- **Don't** 把 inactive（未激活，白话：当前不是重点的元素）按钮、标签、卡片也做成高饱和强对比，那会破坏后台的稳态阅读节奏。
+- **Don't** 发明过于奇怪的按钮、输入框、标签和弹层样式；这类后台产品应以熟悉、可信的组件词汇优先。

PRODUCT.md

+# Product
+
+## Register
+
+product
+
+## Users
+数字资产管理员是这个系统的主要使用者，负责日常维护域名账号、手机号卡、企微号、微信资料等数字资产。使用场景以日常运营后台为主，通常发生在盘点资产、核查异常、处理到期、跟进续费、确认归属、补充资料这些高频任务中。
+
+## Product Purpose
+这个产品用于集中管理数字资产台账，覆盖域名、微信资料、手机号卡和提醒中心等模块，把原本分散的信息统一汇总到一个可检索、可筛选、可追踪的工作台里。成功标准不是展示感，而是让管理员能够更快发现异常、更稳处理到期和续费事项、更清楚掌握每条资产记录的状态与归属。
+
+## Brand Personality
+产品气质以专业、稳重、高效为核心。界面表达应当优先服务任务本身，让用户快速扫描信息、理解状态、完成处理动作，而不是被视觉效果分散注意力。情绪目标是可信、清晰、可控，给人一种“这是能拿来处理日常运营事务的后台工具”的感觉。
+
+## Anti-references
+不要像营销官网，不要强调宣传感、口号感或大面积展示型编排。不要像炫技数据大屏，不要通过夸张发光、强烈渐变、超大数字秀场式布局制造存在感。不要太花哨，避免为了“设计感”牺牲后台工具应有的稳定性、可读性和操作效率。
+
+## Design Principles
+1. 让信息优先于装饰：状态、归属、时间、风险等级必须比装饰性视觉更先被看见。
+2. 让处理动作贴近数据：筛选、批量操作、详情查看应围绕记录本身组织，减少来回跳转和寻找。
+3. 让风险可被快速识别：异常、待处理、即将到期等高风险信息要稳定突出，但不能只靠颜色表达。
+4. 让多模块体验保持一致：域名、微信、手机号卡等模块要共享相近的操作语法和组件节奏，降低切换成本。
+5. 让后台长期使用不疲劳：视觉上克制、可靠、耐看，支持长时间查看表格、详情和筛选面板。
+
+## Accessibility & Inclusion
+以后台日常使用为主，默认保证基础可读性和低风险交互。文本与背景需要保持足够对比度，关键信息不能只靠颜色区分；如果后续增加动效，应支持减少动效，避免把闪动、飞入、夸张过渡做成完成任务的前提条件。