pda-kit-mcp-server 2.0.1

package/spec-data/dialog.md

@@ -0,0 +1,419 @@
+---
+id: "109-弹窗"
+name: "Dialog"
+category: "反馈/Feedback"
+version: "1.0.0"
+source: "MasterGo"
+source_url: "https://mastergo.ky-tech.com.cn/goto/UgXxpJD6"
+tokens:
+  colors:
+    - --color-mask
+    - --color-grey-1
+    - --color-grey-2
+    - --color-black-2
+    - --color-black-6
+    - --color-grey-6
+    - --color-main-6
+    - --color-green-6
+    - --color-red-6
+    - --color-yellow-6
+  spacing:
+    - --spacing-4dp
+    - --spacing-8dp
+    - --spacing-16dp
+    - --spacing-24dp
+    - --spacing-40dp
+  typography:
+    - 正文/【20】Text_Bold
+    - 辅助文本/【14】Auxiliary_Normal_S
+    - 按钮/【22】Button_Normal
+    - 按钮/【22】Button_Bold
+variants:
+  header_types:
+    - 正文单行
+    - 正文带勾选
+    - 无描述-有输入框
+    - 有描述-有输入框
+    - 带图标
+    - 带插图
+    - 区间输入
+    - 头部插图
+    - 正文带提示
+    - 输入框（新）
+    - 带单位
+  footer_types:
+    - 两个按钮
+    - 单个按钮
+    - 多个按钮
+  status_types:
+    - 成功
+    - 失败
+    - 警告
+---
+
+# Dialog 弹窗组件
+
+> 居中展示的模态框，用于提醒、拦截、确认等交互场景。  
+> 基于 PDA Kit 基础组件库，结合 MasterGo 设计稿整理。
+
+---
+
+## AI 指令
+
+```yaml
+NEGATIVE_PROMPTS:
+  - "⛔ 禁止在 Dialog 内使用渐变背景"
+  - "⛔ 禁止按钮区超过 3 个按钮"
+  - "⛔ 禁止按钮文字使用非标准颜色"
+  - "⛔ 禁止修改 16px 圆角（组件级例外）"
+  - "⛔ 禁止内容区 padding ≠ 36px 40px"
+
+MANDATORY:
+  - "✅ 遮罩层必须用 --color-mask（rgba(0,0,0,0.6)）"
+  - "✅ 主按钮颜色使用 --color-main-6"
+  - "✅ 所有颜色必须使用 --color-* Token，禁止裸 Hex"
+  - "✅ 按钮高度固定 54px，字体 按钮/【22】Button_*"
+  - "✅ 状态图标 48px 圆形，背景用对应色系 --color-*-1"
+```
+
+---
+
+## 1. 组件概览
+
+| 属性 | 值 |
+|------|-----|
+| 组件名称 | 弹窗（Dialog） |
+| 组件 ID | `109-弹窗` |
+| 设计宽度 | **400px** |
+| 圆角 | **16px**（组件级例外，非 `--radius-4dp`） |
+| 投影 | `0px 8px 32px 0px rgba(0,0,0,0.12)` |
+| 展示位置 | 页面居中 |
+| 关闭按钮 | 可选（`关闭`: boolean） |
+| 变体 | 默认 |
+
+---
+
+## 2. 组件结构
+
+弹窗由以下子组件组合而成：
+
+```
+┌──────────────────────────────┐
+│        遮罩层 (Mask)          │
+│  ┌────────────────────────┐  │
+│  │   弹窗容器 (400px)      │  │
+│  │  ┌──────────────────┐  │  │
+│  │  │  弹窗内容区        │  │  │
+│  │  │  (头部类型)        │  │  │
+│  │  └──────────────────┘  │  │
+│  │  ┌──────────────────┐  │  │
+│  │  │  弹窗按钮区        │  │  │
+│  │  │  (底部类型)        │  │  │
+│  │  └──────────────────┘  │  │
+│  └────────────────────────┘  │
+└──────────────────────────────┘
+```
+
+### 2.1 遮罩层（`067-遮罩层`）
+
+| 属性 | 值 |
+|------|-----|
+| 类型 | **弹窗浮层遮罩60%** / 新手引导遮罩80% / 下拉菜单遮罩50% |
+| 弹窗默认遮罩色 | `var(--color-mask)` |
+| 定位 | fixed，全屏覆盖 |
+| 内容对齐 | flex，水平垂直居中 |
+| 入场动画 | fadeIn，0.2s ease |
+
+### 2.2 弹窗内容区（`106-弹窗内容区`）
+
+| 属性 | 说明 |
+|------|------|
+| 组件尺寸 | 440 × 2899px |
+| **最小高度** | **158px** |
+| **内边距** | **36px 40px** |
+| **内容对齐** | flex column，垂直居中，水平居中 |
+| **元素间距** | 8px（`var(--spacing-8dp)`） |
+| **标题** | 弹窗主标题文本 |
+| **副标题** | 弹窗副标题/描述文本 |
+| **副文本** | 是否显示副文本（boolean） |
+| **属性1（头部类型）** | 见下方变体列表 |
+
+### 2.3 弹窗按钮区（`107-弹窗按钮区`）
+
+| 属性 | 说明 |
+|------|------|
+| 组件尺寸 | 440 × 428px |
+| **属性1（底部类型）** | `两个按钮` / `单个按钮` / `多个按钮` |
+
+#### 按钮样式
+
+| 属性 | 值 |
+|------|-----|
+| 按钮高度 | **54px** |
+| 字体 | PingFang SC，18px |
+| 背景 | 透明（文本按钮） |
+| 顶部边框 | `1px solid var(--color-grey-2)`（分隔内容区与按钮区） |
+
+#### 底部类型详解
+
+| 类型 | 布局 | 说明 |
+|------|------|------|
+| **两个按钮** | 水平排列 | 左右均分，按钮间竖线分隔（`1px × 24px`，`var(--color-grey-2)`） |
+| **单个按钮** | 水平撑满 | 单个按钮占满整行 |
+| **多个按钮** | 竖向堆叠 | 最多 3 个按钮，一行一个，分割线隔开；主按钮在第一行 |
+
+> **多个按钮** 规则：主按钮（primary）置顶，其余按钮按优先级排列；按钮间用 `border-bottom: 1px solid var(--color-grey-2)` 分割，无竖线分隔符。
+
+#### 按钮状态色
+
+| 状态 | 文字颜色 | 字重 |
+|------|---------|------|
+| `.primary`（主按钮） | `var(--color-main-6)` | Semibold 600 |
+| `.default`（次要按钮） | `var(--color-grey-6)` | Regular |
+| `.danger`（危险按钮） | `var(--color-red-6)` | Regular |
+
+### 2.4 弹窗状态（`108-弹窗状态`）
+
+| 属性 | 说明 |
+|------|------|
+| 组件尺寸 | 360 × 462px |
+| **属性1** | `成功` / `失败` / `警告` |
+
+#### 状态图标
+
+| 状态 | 背景色 | 图标色 | 图标尺寸 |
+|------|--------|--------|---------|
+| 成功 | `var(--color-green-1)` | `var(--color-green-6)` | 48px 圆形, 24px 字号 |
+| 失败 | `var(--color-red-1)` | `var(--color-red-6)` | 48px 圆形, 24px 字号 |
+| 警告 | `var(--color-yellow-1)` | `var(--color-yellow-6)` | 48px 圆形, 24px 字号 |
+
+---
+
+## 3. 头部类型变体（11 种）
+
+| 序号 | 变体名称 | 说明 |
+|------|---------|------|
+| 1 | **正文单行** | 标题 + 单行正文描述 |
+| 2 | **正文带勾选** | 标题 + 正文 + 勾选框 |
+| 3 | **无描述-有输入框** | 标题 + 输入框（无描述文本） |
+| 4 | **有描述-有输入框** | 标题 + 描述文本 + 输入框 |
+| 5 | **带图标** | 标题 + 状态图标 |
+| 6 | **带插图** | 标题 + 插图区域 |
+| 7 | **区间输入** | 标题 + 区间范围输入 |
+| 8 | **头部插图** | 顶部插图 + 标题 |
+| 9 | **正文带提示** | 标题 + 提示信息文本 |
+| 10 | **输入框（新）** | 标题 + 副标题 + 新型输入框 |
+| 11 | **带单位** | 标题 + 副标题 + 带单位的输入 |
+
+---
+
+## 4. 设计稿实际变体尺寸
+
+设计稿画布（组 669）中展示的实际组合：
+
+| 组合 | 宽度 | 高度 |
+|------|------|------|
+| 正文单行 + 两个按钮 | 400px | 228px |
+| 正文单行（仅头部） | 400px | 158px |
+| 正文带勾选 + 两个按钮 | 400px | 268px |
+| 区间输入 + 两个按钮 | 400px | 254px |
+| 输入框（新）+ 两个按钮 | 400px | 305px |
+| 带单位 + 两个按钮 | 400px | 306px |
+
+---
+
+## 5. 样式规格
+
+### 5.1 弹窗容器
+
+| 属性 | 值 |
+|------|-----|
+| 宽度 | 400px |
+| 背景 | `var(--color-grey-1)` |
+| 圆角 | 16px（组件级例外） |
+| 投影 | `0px 8px 32px 0px rgba(0,0,0,0.12)` |
+| 溢出 | hidden |
+| 入场动画 | scale(0.9)→scale(1) + translateY(20px)→0，0.25s cubic-bezier |
+
+### 5.2 内容区
+
+| 属性 | 值 |
+|------|-----|
+| 最小高度 | 158px |
+| 内边距 | 36px 40px |
+| 布局 | flex column，居中 |
+| 元素间距 | 8px |
+
+### 5.3 标题
+
+| 属性 | 值 |
+|------|-----|
+| 字体 | PingFang SC Semibold |
+| 字号 | 20px |
+| 行高 | 28px |
+| 颜色 | `var(--color-black-6)` |
+| 对齐 | 居中 |
+
+### 5.4 副标题
+
+| 属性 | 值 |
+|------|-----|
+| 字体 | PingFang SC Regular |
+| 字号 | 14px |
+| 行高 | 20px |
+| 颜色 | `var(--color-grey-6)` |
+| 对齐 | 居中 |
+
+### 5.5 输入框
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | 40px |
+| 内边距 | 0 8px |
+| 边框 | `1px solid var(--color-black-2)` |
+| 圆角 | 4px（`var(--radius-4dp)`） |
+| 字号 | 16px |
+| 聚焦边框 | `var(--color-main-6)` |
+
+### 5.6 勾选框
+
+| 属性 | 值 |
+|------|-----|
+| 尺寸 | 18px × 18px |
+| 强调色 | `var(--color-main-6)` |
+| 文字 | 14px, `var(--color-grey-6)` |
+
+### 5.7 按钮区
+
+| 属性 | 值 |
+|------|-----|
+| 按钮高度 | 54px |
+| 顶部边框 | `1px solid var(--color-grey-2)` |
+| 按钮字号 | 18px |
+| 按钮间竖线 | `1px × 24px`, `var(--color-grey-2)`（仅水平双按钮） |
+| 竖向按钮间分割线 | `border-bottom: 1px solid var(--color-grey-2)` |
+
+---
+
+## 6. 设计变量（Design Tokens）
+
+### 6.1 颜色
+
+| Token | 色值 | 用途 |
+|-------|------|------|
+| `--color-mask` | `rgba(0, 0, 0, 0.6)` | 弹窗遮罩 |
+| `--color-grey-1` | `#ffffff` | 弹窗背景 |
+| `--color-grey-2` | `#f3f4f6` | 浅灰背景 / 分割线 |
+| `--color-black-2` | `#dddddd` | 输入框边框 |
+| `--color-black-6` | `#333333` | 正文标题文字 |
+| `--color-grey-6` | `#52567b` | 辅助灰色文字 |
+| `--color-main-6` | `#6445d1` | 主色 / 按钮文字 / 聚焦色 |
+| `--color-green-6` | `#03c15f` | 成功状态 |
+| `--color-red-6` | `#fb5251` | 失败 / 错误状态 |
+| `--color-yellow-6` | `#ff9f02` | 警告状态 |
+| `--color-green-1` | `#e9fff0` | 成功状态背景 |
+| `--color-red-1` | `#ffece8` | 失败状态背景 |
+| `--color-yellow-1` | `#fffae7` | 警告状态背景 |
+
+### 6.2 字体
+
+| Token | 字体 | 字号 | 字重 | 行高 |
+|-------|------|------|------|------|
+| `标题文本/【22】Title_Bold_S` | PingFang SC | 22px | Semibold | 30px |
+| `正文/【20】Text_Normal` | PingFang SC | 20px | Regular | 28px |
+| `正文/【20】Text_Bold` | PingFang SC | 20px | Semibold | 28px |
+| `辅助文本/【16】Auxiliary_Normal_M` | PingFang SC | 16px | Regular | 22px |
+| `辅助文本/【14】Auxiliary_Normal_S` | PingFang SC | 14px | Regular | 20px |
+| `按钮/【22】Button_Bold` | PingFang SC | 22px | Semibold | 30px |
+| `按钮/【22】Button_Normal` | PingFang SC | 22px | Regular | 30px |
+
+### 6.3 间距
+
+| Token | 值 | 说明 |
+|-------|-----|------|
+| `--spacing-4dp` | 4px | S 间距 |
+| `--spacing-8dp` | 8px | M 间距，最常用 |
+| `--spacing-16dp` | 16px | L 间距，最常用 |
+| `--spacing-24dp` | 24px | XL 间距 |
+| `--spacing-40dp` | 40px | XXL 间距，最大 |
+
+### 6.4 圆角
+
+| Token | 值 | 说明 |
+|-------|-----|------|
+| `--radius-2dp` | 2px | 极小圆角 |
+| `--radius-4dp` | 4px | 通用圆角（上限） |
+| `--radius-full` | 9999px | 仅 Badge/头像 |
+
+> **注意**：Dialog 组件级的 16px 圆角不在 Token 体系中，为组件级例外。生成代码时必须写 `border-radius: 16px`。
+
+### 6.5 投影
+
+| Token | 值 | 说明 |
+|-------|-----|------|
+| Dialog 投影（无对应 Token） | `0px 8px 32px 0px rgba(0,0,0,0.12)` | 弹窗浮层阴影 |
+
+---
+
+## 7. 动画规范
+
+| 元素 | 动画 | 时长 | 缓动 |
+|------|------|------|------|
+| 遮罩层 | fadeIn（opacity 0→1） | 0.2s | ease |
+| 弹窗容器 | scale(0.9)+translateY(20px) → scale(1)+translateY(0) | 0.25s | cubic-bezier(0.175,0.885,0.32,1.275) |
+
+---
+
+## 8. 使用说明
+
+### 基本用法
+弹窗组件居中展示，通常包含三个部分：
+1. **遮罩层** — 覆盖全屏，`var(--color-mask)`
+2. **内容区** — 承载标题、描述、输入框、图标等，padding `36px 40px`，最小高度 `158px`
+3. **按钮区** — 承载操作按钮（单按钮 / 双按钮 / 多按钮），高度 `54px`
+
+### 底部按钮规则
+- **两个按钮**：水平排列，取消在左（default），确定在右（primary），竖线分隔
+- **单个按钮**：撑满整行，primary 样式
+- **多个按钮**：竖向堆叠，主按钮置顶，其余用分割线隔开，最多 3 个
+
+### 状态提示
+通过弹窗状态组件可展示操作结果：
+- **成功** — 绿色圆形图标 + 成功标题 + 描述
+- **失败** — 红色圆形图标 + 失败标题 + 描述
+- **警告** — 黄色圆形图标 + 警告标题 + 描述
+
+---
+
+## 9. 相关组件
+
+| 组件 | ID | 说明 |
+|------|-----|------|
+| 弹窗 | `109-弹窗` | 弹窗主组件 |
+| 弹窗内容区 | `106-弹窗内容区` | 弹窗头部内容 |
+| 弹窗按钮区 | `107-弹窗按钮区` | 弹窗底部按钮 |
+| 弹窗状态 | `108-弹窗状态` | 状态提示（成功/失败/警告） |
+| 弹窗插图 | `110-弹窗插图` | 弹窗内插图 |
+| 遮罩层 | `067-遮罩层` | 弹窗遮罩 |
+| 更新提示弹窗 | `111-更新提示弹窗` | 应用更新提示弹窗 |
+
+---
+
+## 10. 🔴 AI 错误对照表
+
+生成 Dialog 代码后，逐项自检以下条目：
+
+| # | 检查项 | 正确 | 常见错误 |
+|---|--------|------|---------|
+| 1 | 遮罩层颜色 | `var(--color-mask)` | `rgba(0,0,0,0.5)` 或裸 Hex |
+| 2 | 弹窗圆角 | `16px`（组件例外） | `var(--radius-4dp)` 或 `4px` |
+| 3 | 内容区 padding | `36px 40px` | `24px 24px` |
+| 4 | 按钮高度 | `54px` | `44px` 或 `48px` |
+| 5 | 主按钮颜色 | `var(--color-main-6)` | `#1677ff`（Ant Design 蓝） |
+| 6 | 按钮区顶部边框 | `1px solid var(--color-grey-2)` | 无边框 |
+| 7 | 按钮字体 | `18px` / `按钮/【22】Button_*` | `14px` 或 `16px` |
+| 8 | 状态图标尺寸 | `48px` 圆形 | `32px` 或 `64px` |
+| 9 | 分割线颜色 | `var(--color-grey-2)` | `#e5e5e5` |
+| 10 | 内容区最小高度 | `158px` | 无最小高度，内容撑开 |
+| 11 | 替换颜色 Token | 全用 `--color-*` | 残留裸 Hex（如 `#333`、`#333333`） |
+| 12 | 按钮区按钮数 | ≤ 3 个 | 超过 3 个按钮 |

package/spec-data/divider.md

@@ -0,0 +1,208 @@
+---
+id: divider
+name: 分割线
+category: "布局/Layout"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TXmtB2FI
+source_doc_id: 103417331857122
+component_count: 3
+---
+
+# 分割线 Divider
+
+PDAKit 分割线体系：**横向 2 类型 × 2 样式 / 纵向 1 类型 × 2 样式**，用于信息分区。
+
+> **状态命名统一**：分割线无交互状态，仅区分 `solid`（直线）/ `dashed`（虚线）。
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。Token 定义见文末 [附录](#附录-a颜色-token)。
+
+---
+
+## 组件总览
+
+| 组件 | Key | 变体数 |
+|------|-----|--------|
+| 分割线/横向-默认 | `002-分割线-横向-默认` | 2 样式 = 2 |
+| 分割线/横向-标题 | `003-分割线-横向-标题` | 2 样式 = 2 |
+| 分割线/纵向 | `004-分割线-纵向` | 2 样式 = 2 |
+
+---
+
+## 1. 分割线/横向-默认
+
+**描述**: 信息分割使用，通栏水平细线。需带标题时切换为「分割线/横向-标题」。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 类型 | enum | `直线` / `虚线` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 线条颜色 | `--color-black-2` |
+| 线条高度 | `1px` |
+| 线条宽度 | 撑满容器（`self-stretch`） |
+
+### CSS 示例
+
+```css
+/* 分割线 横向-直线 */
+.divider-h-solid {
+  width: 100%;
+  height: 1px;
+  background: var(--color-black-2);
+  border: none;
+}
+
+/* 分割线 横向-虚线 */
+.divider-h-dashed {
+  width: 100%;
+  height: 0;
+  border: none;
+  border-bottom: 1px dashed var(--color-black-2);
+}
+```
+
+---
+
+## 2. 分割线/横向-标题
+
+**描述**: 带标题的水平分割线，标题居中，左右各一条线。可切换直线/虚线。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 文本 | string | 任意（默认 `请输入标题`） |
+| 类型 | enum | `直线` / `虚线` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 线条颜色 | `--color-black-2` |
+| 线条高度 | `1px` |
+| 标题颜色 | `--color-black-5` |
+| 标题字体 | `text/16/22`，PingFang SC Regular |
+| 线-标题间距 | `--spacing-8` |
+| 顶部内边距 | `--spacing-16` |
+| 底部内边距 | `--spacing-8` |
+
+### 颜色
+
+| 样式 | state | 线条 | 标题 |
+|------|-------|------|------|
+| 直线 | solid | `--color-black-2` | `--color-black-5` |
+| 虚线 | dashed | `--color-black-2` | `--color-black-5` |
+
+### CSS 示例
+
+```css
+/* 分割线 横向-标题 直线 */
+.divider-title-solid {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16) 0 var(--spacing-8);
+}
+.divider-title-solid::before,
+.divider-title-solid::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-black-2);
+}
+.divider-title-solid .title {
+  color: var(--color-black-5);
+  font-size: 16px;
+  line-height: 22px;
+  font-family: PingFang SC;
+  white-space: nowrap;
+}
+
+/* 分割线 横向-标题 虚线 */
+.divider-title-dashed::before,
+.divider-title-dashed::after {
+  content: '';
+  flex: 1;
+  height: 0;
+  border-bottom: 1px dashed var(--color-black-2);
+}
+```
+
+---
+
+## 3. 分割线/纵向
+
+**描述**: 垂直分割线，用于左右信息分区。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 属性 3 | enum | `直线` / `虚线` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 线条颜色 | `--color-black-2` |
+| 线条宽度 | `1px` |
+| 线条高度 | 撑满容器（`self-stretch`） |
+
+### CSS 示例
+
+```css
+/* 分割线 纵向-直线 */
+.divider-v-solid {
+  width: 1px;
+  align-self: stretch;
+  background: var(--color-black-2);
+  border: none;
+}
+
+/* 分割线 纵向-虚线 */
+.divider-v-dashed {
+  width: 0;
+  align-self: stretch;
+  border-left: 1px dashed var(--color-black-2);
+}
+```
+
+---
+
+## 附录 A：颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-black-2` | `#dddddd` | 分割线颜色（直线/虚线通用） |
+| `--color-black-5` | `#666666` | 横向-标题的文字颜色 |
+
+> 详见 [tokens/colors.md](../tokens/colors.md)
+
+---
+
+## 附录 B：字体 Token
+
+| Token | 字号 | 行高 | 对齐 | 适用组件 |
+|-------|------|------|------|---------|
+| `text/16/22` | 16px | 22px | left | 分割线/横向-标题 |
+
+> 字体统一 PingFang SC，字重 Regular。详见 [tokens/typography.md](../tokens/typography.md)
+
+---
+
+## 使用规则（AI 必读）
+
+1. **颜色用 Token**：禁止裸 Hex，线条用 `--color-black-2`，标题用 `--color-black-5`
+2. **类型选型**：
+   | 场景 | 组件 |
+   |------|------|
+   | 段落/区块间通用分割 | 分割线/横向-默认 |
+   | 带分类标题的分割 | 分割线/横向-标题 |
+   | 左右内容分区 | 分割线/纵向 |
+3. **样式切换**：直线（`solid`）用于常规场景，虚线（`dashed`）用于弱化分割感
+4. **引用命名**：使用 `❖PDAKit™：分割线/横向-默认` 格式