pda-kit-mcp-server 2.0.1

package/spec-data/badge.md

@@ -0,0 +1,461 @@
+---
+id: badge
+name: 徽标
+category: "数据展示/Data Display"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TXWUI4fE
+source_doc_id: 103417331857122
+component_count: 1
+---
+
+# 徽标 Badge
+
+数字/状态徽标组件，展示在图标、标签栏、按钮或卡片右上角，用于提示未读数、新内容或状态标记。
+
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **字体**：PingFang SC，Semibold（`600`），文字白色。
+
+---
+
+## 组件总览
+
+| 尺寸 | 适用场景 | 变体数 |
+|------|---------|--------|
+| `16` | 标签栏图标角标、小按钮角标 | 8（默认4 + 自定义4） |
+| `20` | 大图标角标、卡片角标 | 8（默认4 + 自定义4） |
+| `小红点` | 纯状态标记（无数字） | 2 |
+| **合计** | | **18 + 2（带描边 × 全部）** |
+
+---
+
+## Variants
+
+| Property | 值 | 说明 |
+|----------|-----|------|
+| 尺寸 | `16` / `20` / `小红点` | 控制整体大小 |
+| 类型 | `1位数` / `2位数` / `超过2位数` / `NEW` / `小红点` | 控制显示内容（仅数字和字母） |
+| 颜色 | `红色（默认）` / `自定义颜色` | 红色为 `--color-red-6`，自定义为 `--color-main-6`。**所有类型和尺寸均支持自定义颜色** |
+| 带描边 | `OFF` / `ON` | ON 时为徽标添加 1px 白色外描边 |
+
+---
+
+## CSS 类名组合
+
+| 类名 | 作用 | 适用尺寸 |
+|------|------|---------|
+| `.badge` | 基础样式：inline-flex / center / nowrap | 通用 |
+| `.badge-16` | 尺寸=16 样式 | 16 |
+| `.badge-20` | 尺寸=20 样式 | 20 |
+| `.badge-20-single` | 尺寸=20 / 1位数专用（padding 4px 代替 6px） | 20/1位数 |
+| `.badge-dot` | 小红点样式 | 小红点 |
+| `.badge-bordered` | 叠加 1px 白色外描边 | 通用 |
+| `.badge-custom` | 背景替换为品牌紫 | 通用 |
+
+**组合示例：**
+
+```
+尺寸16 + 1位数 + 默认红色 + 带描边  → class="badge badge-16 badge-bordered"
+尺寸20 + 2位数 + 自定义颜色 + 无描边 → class="badge badge-20 badge-custom"
+尺寸20 + 1位数 + 默认红色             → class="badge badge-20 badge-20-single"
+小红点 + 带描边                      → class="badge-dot badge-bordered"
+```
+
+---
+
+## 1. 尺寸=16（标签栏/小按钮角标）
+
+### 高度计算
+
+`padding-top(1px) + line-height(14px) + padding-bottom(1px) = 16px`
+
+### 最小宽度
+
+| 类型 | 内容宽度 | padding | 最小总宽 | 示例 |
+|------|---------|---------|---------|------|
+| 1位数 | `8px`（固定） | `1px 4px` | `16px` | `9` |
+| 2位数 | 自适应 | `1px 4px` | 内容+8px | `27` |
+| 超过2位数 | 自适应 | `1px 4px` | 内容+8px | `99+` |
+| NEW | 自适应 | `1px 4px` | 内容+8px | `NEW` |
+
+> **1位数**：文字元素宽度固定为 `8px`，保证单数字徽标视觉居中且宽度稳定。
+
+### 规格
+
+| 属性 | 所有类型 |
+|------|---------|
+| 容器 | `inline-flex / center / center` |
+| 内边距 | `1px 4px` |
+| 圆角 | `8px` |
+| 背景 | `--color-red-6` |
+| 字号/行高 | `10px / 14px` |
+| 文字颜色 | `--color-grey-1` |
+| 字重/字体 | `600` / PingFang SC |
+| 文字折行 | `white-space: nowrap` |
+
+### HTML
+
+```html
+<!-- 1位数：文字固定 width:8px -->
+<span class="badge badge-16">9</span>
+
+<!-- 2位数 -->
+<span class="badge badge-16">27</span>
+
+<!-- 超过2位数：固定文案 "99+" -->
+<span class="badge badge-16">99+</span>
+
+<!-- NEW 标签 -->
+<span class="badge badge-16">NEW</span>
+
+<!-- 带描边 + 自定义颜色 -->
+<span class="badge badge-16 badge-bordered badge-custom">5</span>
+```
+
+### CSS
+
+```css
+.badge {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.badge-16 {
+  padding: 1px 4px;
+  min-height: 16px;
+  border-radius: 8px;
+  background: var(--color-red-6);
+  color: var(--color-grey-1);
+  font-size: 10px;
+  line-height: 14px;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+
+/* 尺寸=16 下，1位数固定 8px 宽 */
+.badge-16 > span {
+  width: 8px;
+}
+```
+
+---
+
+## 2. 尺寸=20（大图标/卡片角标）
+
+### 高度计算
+
+`padding-top(0) + line-height(20px) + padding-bottom(0) = 20px`
+
+> 高度由行高直接撑起，无上下内边距。
+
+### 最小宽度
+
+| 类型 | 内容宽度 | padding | 最小总宽 | 示例 |
+|------|---------|---------|---------|------|
+| 1位数 | `12px`（固定） | `0 4px` | `20px` | `9` |
+| 2位数 | 自适应 | `0 6px` | 内容+12px | `24` |
+| 超过2位数 | 自适应 | `0 6px` | 内容+12px | `99+` |
+| NEW | 自适应 | `0 6px` | 内容+12px | `NEW` |
+
+> **1位数**：左右 padding 为 `4px`（区别于其他类型的 `6px`），文字宽度固定为 `12px`。
+
+### 规格
+
+| 属性 | 1位数 | 2位数 / 99+ / NEW |
+|------|-------|-------------------|
+| 容器 | `inline-flex / center / center` | 同 |
+| 内边距 | `0 4px` | `0 6px` |
+| 圆角 | `11px` | `11px` |
+| 背景 | `--color-red-6` | `--color-red-6` |
+| 字号/行高 | `14px / 20px` | `14px / 20px` |
+| 文字颜色 | `--color-grey-1` | `--color-grey-1` |
+| 字重/字体 | `600` / PingFang SC | `600` / PingFang SC` |
+| 文字折行 | `white-space: nowrap` | 同 |
+
+### HTML
+
+```html
+<!-- 1位数：使用 badge-20-single（padding 4px） -->
+<span class="badge badge-20 badge-20-single">9</span>
+
+<!-- 2位数 -->
+<span class="badge badge-20">24</span>
+
+<!-- 超过2位数 -->
+<span class="badge badge-20">99+</span>
+
+<!-- NEW -->
+<span class="badge badge-20">NEW</span>
+
+<!-- 带描边 + 自定义颜色 -->
+<span class="badge badge-20 badge-bordered badge-custom">6</span>
+```
+
+### CSS
+
+```css
+.badge-20 {
+  padding: 0 6px;
+  min-height: 20px;
+  border-radius: 11px;
+  background: var(--color-red-6);
+  color: var(--color-grey-1);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+
+/* 1位数：padding 收窄为 4px，文字固定 12px 宽 */
+.badge-20-single {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.badge-20-single > span {
+  width: 12px;
+}
+```
+
+---
+
+## 3. 小红点
+
+纯标记点，无文字。用于提示存在新内容但无需展示具体数量。
+
+### 规格
+
+| 属性 | 值 |
+|------|-----|
+| 尺寸 | `6 × 6` |
+| 形状 | 圆形（`border-radius: 6px`，半宽即为圆） |
+| 背景 | `--color-red-6` |
+| display | `inline-block`（无 flex，无文字） |
+| 描边 | OFF 时无；ON 时 `1px solid --color-grey-1` |
+
+### HTML
+
+```html
+<!-- 无描边 -->
+<span class="badge-dot"></span>
+
+<!-- 带描边 -->
+<span class="badge-dot badge-bordered"></span>
+
+<!-- 自定义颜色（紫色圆点） -->
+<span class="badge-dot badge-custom"></span>
+```
+
+### CSS
+
+```css
+.badge-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  background: var(--color-red-6);
+}
+```
+
+---
+
+## 4. 自定义颜色
+
+默认红色（`--color-red-6`）替换为品牌紫（`--color-main-6` / `#6445D1`），用于区分消息类型或业务线标记。**所有类型和尺寸均支持**。
+
+### 适用尺寸 × 类型
+
+| 尺寸 | 1位数 | 2位数 | 99+ | NEW |
+|------|-------|-------|-----|-----|
+| 16 | ✅ | ✅ | ✅ | ✅ |
+| 20 | ✅ | ✅ | ✅ | ✅ |
+| 小红点 | — | — | — | — |
+
+> 小红点也支持自定义颜色（`.badge-dot.badge-custom`）。
+
+### HTML
+
+```html
+<!-- 尺寸=16 全类型 -->
+<span class="badge badge-16 badge-custom">9</span>
+<span class="badge badge-16 badge-custom">27</span>
+<span class="badge badge-16 badge-custom">99+</span>
+<span class="badge badge-16 badge-custom">NEW</span>
+
+<!-- 尺寸=20 全类型（1位数注意加 badge-20-single） -->
+<span class="badge badge-20 badge-20-single badge-custom">9</span>
+<span class="badge badge-20 badge-custom">24</span>
+<span class="badge badge-20 badge-custom">99+</span>
+<span class="badge badge-20 badge-custom">NEW</span>
+```
+
+### CSS
+
+```css
+.badge-custom {
+  background: var(--color-main-6);
+}
+```
+
+---
+
+## 5. 带描边（`带描边=ON`）
+
+白色外描边，用于徽标叠加在有色背景上时增加视觉分离。**所有尺寸和类型均可叠加**。
+
+| 属性 | 值 |
+|------|-----|
+| 边框 | `1px solid --color-grey-1`（`#FFFFFF`） |
+
+> 描边会增加容器总宽高各 2px（左右/上下各 1px）。绝对定位时注意偏移补偿。
+
+```css
+.badge-bordered {
+  border: 1px solid var(--color-grey-1);
+}
+```
+
+---
+
+## 6. 覆盖位置
+
+徽标通常相对于父元素**绝对定位在右上角**。父容器须设置 `position: relative`。具体偏移值以实际业务场景中徽标与父元素的对齐效果为准。
+
+```
+┌────────────┐
+│  [图标]  ┌┐│  ← 徽标右上角
+│         └┘│
+└────────────┘
+```
+
+```css
+.badge-parent {
+  position: relative;
+}
+.badge-pos {
+  position: absolute;
+  top: 0;
+  right: 0;
+  /* 偏移值根据业务场景中的 visual fit 调整 */
+}
+```
+
+---
+
+## 截断规则
+
+| 输入值 | 显示文案 | 类型 |
+|--------|---------|------|
+| `0` ~ `9` | 原数字 | `1位数` |
+| `10` ~ `99` | 原数字 | `2位数` |
+| `≥100` | `99+` | `超过2位数` |
+| 标记型 | `NEW` | `NEW` |
+
+> 数字类型与文案类型互斥。一个徽标要么显示数字，要么显示 `NEW`，不可混用。
+
+---
+
+## 完整 CSS 汇总
+
+```css
+/* ===== 基础 ===== */
+.badge {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+}
+
+/* ===== 尺寸 16 ===== */
+.badge-16 {
+  padding: 1px 4px;
+  min-height: 16px;
+  border-radius: 8px;
+  background: var(--color-red-6);
+  color: var(--color-grey-1);
+  font-size: 10px;
+  line-height: 14px;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+.badge-16 > span {
+  width: 8px;          /* 仅 1 位数生效 */
+}
+
+/* ===== 尺寸 20 ===== */
+.badge-20 {
+  padding: 0 6px;      /* 默认 padding */
+  min-height: 20px;
+  border-radius: 11px;
+  background: var(--color-red-6);
+  color: var(--color-grey-1);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+.badge-20-single {
+  padding-left: 4px;
+  padding-right: 4px;  /* 1 位数 padding 收窄 */
+}
+.badge-20-single > span {
+  width: 12px;         /* 仅 1 位数生效 */
+}
+
+/* ===== 小红点 ===== */
+.badge-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  background: var(--color-red-6);
+}
+
+/* ===== 修饰 ===== */
+.badge-bordered {
+  border: 1px solid var(--color-grey-1);
+}
+.badge-custom {
+  background: var(--color-main-6);
+}
+
+/* ===== 定位 ===== */
+.badge-parent {
+  position: relative;
+}
+.badge-pos {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-red-6` | `#FB5251` | 徽标默认背景；小红点背景 |
+| `--color-main-6` | `#6445D1` | 自定义颜色徽标背景 |
+| `--color-grey-1` | `#FFFFFF` | 徽标文字颜色；描边颜色 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **尺寸匹配场景**：标签栏角标用 `16`，卡片/大图标角标用 `20`，纯状态提示用 `小红点`
+2. **溢出自动 99+**：数据超过 99 时，文本固定显示为 `99+`
+3. **数字字体统一**：全部使用 PingFang SC Semibold（`600`），与系统其他数字展示保持一致
+4. **带描边**：徽标叠加在非白色背景上时，应开启 `带描边=ON`（叠加 `.badge-bordered`）。描边会撑开容器 2px/边，注意定位补偿
+5. **绝对定位**：徽标默认定位在父元素右上角。父容器需设置 `position: relative`
+6. **偏移值按需调整**：`top`/`right` 偏移值以实际业务场景中徽标与父元素的 visual fit 为准，不做硬编码
+7. **自定义颜色**：`--color-main-6`（品牌紫）对所有类型（1位数/2位数/99+/NEW）和所有尺寸（16/20/小红点）生效
+8. **NEW 标签**：用于标记新功能入口，不属于数字溢出体系。数字与 `NEW` 互斥
+9. **仅展示数字或字母**：徽标内容限定为数字（0-99）或固定文案（`99+`、`NEW`），不承载图标
+10. **小红点**：`6×6`，纯标记，无文字内容
+11. **CSS 类名组合**：基础 `.badge` + 尺寸（`.badge-16` / `.badge-20` / `.badge-dot`）+ 修饰（`.badge-bordered` / `.badge-custom`）+ 1位数专用（`.badge-20-single`）
+12. **1位数内容宽度**：尺寸=16 时内容宽度固定 `8px`，尺寸=20 时固定 `12px`，保证单数字居中稳定
+13. **高度来源**：尺寸=16 由 `padding(1+1) + line-height(14)` 得 16px；尺寸=20 由 `line-height(20)` 直接撑起（无上下 padding）

package/spec-data/button.md

@@ -0,0 +1,148 @@
+---
+id: button
+name: Button 按钮
+category: atom
+version: "2.0.0"
+tokens:
+  height: 64px
+  minWidth: 100px
+  borderRadius: rounded
+  gap: gap-8
+  fontSizeLarge: text-22
+  fontSizeSmall: text-14
+  paddingX: px-16
+states:
+  - normal
+  - active
+  - disabled
+  - loading
+variants:
+  - primary (纯色/提交)
+  - secondary (线框/次要)
+  - disabled (不可用)
+---
+
+> **🧠 AI 指令 — 强制约束（MANDATORY，违反即错误）**
+>
+> ```yaml
+> NEGATIVE_PROMPTS:
+>   - ⛔ 禁止使用 text-sm / text-base / text-lg 等 Tailwind 默认字号
+>   - ⛔ 禁止使用 bg-blue-500 / bg-gray-100 等 Tailwind 默认色板
+>   - ⛔ 禁止使用 rounded-lg / rounded-xl / rounded-2xl 等大圆角
+>   - ⛔ 禁止使用 transition 属性（如 transition-colors / transition-all）
+>   - ⛔ 禁止使用 ring / ring-offset / focus:ring 等 focus 环
+>   - ⛔ 禁止在 PDA 上使用 :hover 伪类，触屏设备无 hover
+>   - ⛔ 禁用文字白色无边框不可用态（disabled 必须肉眼看得出禁用）
+>   - ⛔ 禁止在 HTML 中手写 style="background: var(--color-*)"
+>
+> MANDATORY:
+>   - 圆角统一 rounded（4px），不可使用更大圆角
+>   - 交互态使用 :active，禁止 :hover
+>   - 状态切换瞬间完成，禁止 transition
+>   - 触控热区 ≥ 48px
+>   - 文字使用 PDA Kit font: 简写形式
+> ```
+
+---
+
+# Button 按钮
+
+## 语义结构（Semantic Structure）
+
+```
+Button
+├── Left Icon  (可选，通过 SVG <use> 调用)
+├── Label Text (必填)
+└── Right Icon (可选)
+```
+
+## 尺寸定义
+
+| 尺寸 | 高度 | 最小宽度 | 内边距 | 字号 | 适用场景 |
+|------|------|---------|--------|------|---------|
+| **Large** | 64px | 100px | 17px 16px | 22px/400 | 页面底部主操作（提交、确认、下一步） |
+| **Medium** | 48px | 80px | 12px 16px | 16px/400 | 表单内操作（搜索、筛选、扫码） |
+| **Small** | 40px | 64px | 8px 12px | 14px/400 | 表格内操作、标签操作、列表右侧 |
+
+## 变体
+
+### Primary（纯色实心，最常用）
+
+```html
+<!-- Large Primary（页面底部提交按钮） -->
+<button class="
+  flex items-center justify-center gap-8
+  min-w-[100px] h-16 px-16
+  rounded
+  font-normal text-22
+  bg-main-6 text-grey-1
+  cursor-pointer
+  active:bg-main-7
+  disabled:bg-main-2 disabled:text-main-2 disabled:cursor-not-allowed
+">
+  确认提交
+</button>
+
+<!-- Medium Primary -->
+<button class="
+  flex items-center justify-center gap-8
+  min-w-[80px] h-12 px-16
+  rounded
+  font-normal text-16
+  bg-main-6 text-grey-1
+  cursor-pointer
+  active:bg-main-7
+  disabled:bg-main-2 disabled:text-main-2 disabled:cursor-not-allowed
+">
+  搜索
+</button>
+
+<!-- Small Primary -->
+<button class="
+  flex items-center justify-center gap-4
+  min-w-[64px] h-10 px-12
+  rounded-sm
+  font-normal text-14
+  bg-main-6 text-grey-1
+  cursor-pointer
+  active:bg-main-7
+  disabled:bg-main-2 disabled:text-main-3 disabled:cursor-not-allowed
+">
+  详情
+</button>
+```
+
+### Secondary（线框）
+
+```html
+<button class="
+  flex items-center justify-center gap-8
+  min-w-[80px] h-12 px-16
+  rounded border border-main-6
+  font-normal text-16
+  bg-grey-1 text-main-6
+  cursor-pointer
+  active:bg-main-1
+  disabled:border-grey-3 disabled:text-grey-4 disabled:cursor-not-allowed
+">
+  取消
+</button>
+```
+
+## 状态
+
+| 状态 | Primary 表现 | Secondary 表现 |
+|------|-------------|---------------|
+| Normal | bg-main-6, text-grey-1 | bg-grey-1, border-main-6, text-main-6 |
+| Active | bg-main-7（瞬间切换，无 transition） | bg-main-1（瞬间切换，无 transition） |
+| Disabled | bg-main-2, text-main-2, cursor-not-allowed | border-grey-3, text-grey-4, cursor-not-allowed |
+| Loading | 文字替换为加载指示器 + "处理中..." | 同 Primary |
+
+## AI 生成规则
+
+1. 页面底部操作区必须使用 **Large Primary** 按钮（64px 高）
+2. 按钮必须放在 `.bottom-bar { flex-shrink: 0; }` 容器内，不可使用 `position: fixed`
+3. 主操作按钮占据最大宽度（`flex-1`），次要按钮使用 Medium
+4. 所有按钮圆角 = `rounded`（4px），不得使用 `rounded-lg`(8px) 或更大
+5. 所有按钮禁止 `transition` 属性
+6. disabled 态必须同时改变背景色和文字色，不可仅改变透明度