pda-kit-mcp-server 2.0.1

package/spec-data/tag.md

@@ -0,0 +1,363 @@
+---
+id: tag
+name: 标签
+category: "数据展示/Data Display"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TY0U15li
+source_doc_id: 103417331857122
+component_count: 5
+---
+
+# 标签 Tag
+
+业务状态标签，分 **大标签**（已选中的 4 种类型）和 **小标签**（已选中的 7 种类型）。用于展示订单/任务/物品的状态信息。
+
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **字体**：PingFang SC。
+
+---
+
+## 组件总览
+
+| 组件 | Key | 说明 |
+|------|-----|------|
+| 大标签/默认通用 | `649:7926` | 灰色大标签，4 种显隐变体（图标/关闭） |
+| 大标签/完成成功 | `649:5080` | 绿色大标签，4 种显隐变体（图标/关闭） |
+| 大标签/失败出错 | `649:5559` | 红色大标签，4 种显隐变体（图标/关闭） |
+| 大标签/突出警示 | `649:5609` | 橙色大标签，4 种显隐变体（图标/关闭） |
+| 小标签 | `6526:6440` | 小标签，7 种色彩类型 + 1 种带图标变体 |
+
+---
+
+## 1. 大标签
+
+用于列表/卡片中强调关键状态，如"已完成""派送中""已取消"。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 类型 | enum | `默认通用` / `完成成功` / `失败出错` / `突出警示` |
+| 显示图标 | boolean | 左侧状态图标，**默认不显示** |
+| 显示关闭 | boolean | 右侧关闭按钮（`icons/assets/common_ic_close_o.svg`），默认隐藏 |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 内边距 | `4px 8px` |
+| 圆角 | `8px` |
+| 边框 | `1px solid` |
+| 文字 | `18px / 25px`，PingFang SC |
+| 左侧图标 | `16×16` |
+| 右侧关闭图标 | `16×16`，`icons/assets/common_ic_close_o.svg` |
+| 元素间距 | `8px` |
+
+### 颜色（4 类型）
+
+| 类型 | 背景 | 边框 | 文字 | 左侧图标 |
+|------|------|------|------|---------|
+| 默认通用 | `--color-grey-2` | `--color-grey-3` | `--color-grey-7` | `icons/assets/common_ic_caution.svg` |
+| 完成成功 | `--color-green-1` | `--color-green-3` | `--color-green-7` | `icons/assets/common_ic_check_two.svg` |
+| 失败出错 | `--color-red-1` | `--color-red-3` | `--color-red-7` | `icons/assets/common_ic_close_two.svg` |
+| 突出警示 | `--color-yellow-2` | `--color-yellow-3` | `--color-yellow-7` | `icons/assets/common_ic_caution.svg` |
+
+### 变体组合
+
+每种类型按「显示图标」「显示关闭」排列出 4 种变体：
+
+| 显示图标 | 显示关闭 | 结构 |
+|---------|---------|------|
+| on | on | `[icon] 文字 [关闭]` |
+| on | off | `[icon] 文字` |
+| off | on | `文字 [关闭]` |
+| off | off | `文字` |
+
+---
+
+## 2. 小标签
+
+用于表格行/卡片中展示紧凑状态，如"正常""异常""已签收"。
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 类型 | enum | `默认通用` / `默认带图标` / `失败出错` / `完成成功` / `突出警示` / `正常状态` / `主题紫色` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 高度 | `28px` |
+| 内边距 | `4px 8px` |
+| 圆角 | `4px` |
+| 边框 | `1px solid` |
+| 文字 | `14px / 20px`，PingFang SC Semibold（`600`） |
+| 右侧图标 | `16×16`（仅 `默认带图标` 类型使用 `icons/assets/common_ic_arrow_down_o.svg`） |
+
+### 颜色（7 类型）
+
+| 类型 | 背景 | 边框 | 文字 | 宽度 | 图标 |
+|------|------|------|------|------|------|
+| 默认通用 | `--color-grey-2` | `--color-grey-3` | `--color-grey-6` | 自适应 | — |
+| 默认带图标 | `--color-grey-2` | `--color-grey-3` | `--color-grey-6` | 自适应 | `icons/assets/common_ic_arrow_down_o.svg`（右） |
+| 失败出错 | `--color-red-1` | `--color-red-3` | `--color-red-7` | 自适应 | — |
+| 完成成功 | `--color-green-1` | `--color-green-3` | `--color-green-7` | 自适应 | — |
+| 突出警示 | `--color-yellow-1` | `--color-yellow-3` | `--color-yellow-7` | 自适应 | — |
+| 正常状态 | `--color-blue-1` | `--color-blue-3` | `--color-blue-6` | 自适应 | — |
+| 主题紫色 | `--color-main-1` | `--color-main-3` | `--color-main-6` | 自适应 | — |
+
+> `默认带图标` 的图标与文字间距为 `4px`（其他元素间距为 `8px`），图标在文字右侧。
+
+---
+
+## HTML 示例
+
+### 大标签
+
+```html
+<!-- 大标签 默认通用 带图标+关闭 -->
+<div class="tag-large tag-large-grey">
+  <img src="./icons/assets/common_ic_caution.svg" class="tag-icon" alt="" />
+  <span class="tag-text">默认通用</span>
+  <img src="./icons/assets/common_ic_close_o.svg" class="tag-close" alt="关闭" onclick="dismissTag(this)" />
+</div>
+
+<!-- 大标签 完成成功 只显示文字（默认） -->
+<div class="tag-large tag-large-green">
+  <span class="tag-text">完成成功</span>
+</div>
+
+<!-- 大标签 失败出错 带图标 -->
+<div class="tag-large tag-large-red">
+  <img src="./icons/assets/common_ic_close_two.svg" class="tag-icon" alt="" />
+  <span class="tag-text">失败出错</span>
+</div>
+
+<!-- 大标签 突出警示 带文字+关闭 -->
+<div class="tag-large tag-large-orange">
+  <span class="tag-text">突出警示</span>
+  <img src="./icons/assets/common_ic_close_o.svg" class="tag-close" alt="关闭" onclick="dismissTag(this)" />
+</div>
+```
+
+### 小标签
+
+```html
+<!-- 默认通用 -->
+<span class="tag-small tag-small-grey">默认通用</span>
+
+<!-- 默认带图标 -->
+<span class="tag-small tag-small-grey">
+  默认带icon
+  <img src="./icons/assets/common_ic_arrow_down_o.svg" class="tag-icon-right" alt="" />
+</span>
+
+<!-- 失败出错 -->
+<span class="tag-small tag-small-red">失败出错</span>
+
+<!-- 完成成功 -->
+<span class="tag-small tag-small-green">完成成功</span>
+
+<!-- 突出警示 -->
+<span class="tag-small tag-small-orange">突出警示</span>
+
+<!-- 正常状态 -->
+<span class="tag-small tag-small-blue">正常状态</span>
+
+<!-- 主题紫色 -->
+<span class="tag-small tag-small-purple">主题紫色</span>
+```
+
+---
+
+## CSS
+
+### 大标签
+
+```css
+/* 大标签 基础 */
+.tag-large {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border: 1px solid;
+  border-radius: 8px;
+}
+
+/* 图标（左） */
+.tag-large .tag-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* 关闭按钮（右） */
+.tag-large .tag-close {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+/* 文字 */
+.tag-large .tag-text {
+  font-size: 18px;
+  line-height: 25px;
+  font-family: PingFang SC;
+}
+
+/* 颜色 - 默认通用（灰） */
+.tag-large-grey {
+  background: var(--color-grey-2);
+  border-color: var(--color-grey-3);
+}
+.tag-large-grey .tag-text { color: var(--color-grey-7); }
+
+/* 颜色 - 完成成功（绿） */
+.tag-large-green {
+  background: var(--color-green-1);
+  border-color: var(--color-green-3);
+}
+.tag-large-green .tag-text { color: var(--color-green-7); }
+
+/* 颜色 - 失败出错（红） */
+.tag-large-red {
+  background: var(--color-red-1);
+  border-color: var(--color-red-3);
+}
+.tag-large-red .tag-text { color: var(--color-red-7); }
+
+/* 颜色 - 突出警示（橙） */
+.tag-large-orange {
+  background: var(--color-yellow-2);
+  border-color: var(--color-yellow-3);
+}
+.tag-large-orange .tag-text { color: var(--color-yellow-7); }
+```
+
+### 小标签
+
+```css
+/* 小标签 基础 */
+.tag-small {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 28px;
+  padding: 4px 8px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  font-family: PingFang SC;
+  white-space: nowrap;
+}
+
+/* 右侧图标 */
+.tag-small .tag-icon-right {
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+/* 颜色 - 默认通用（灰） */
+.tag-small-grey {
+  background: var(--color-grey-2);
+  border-color: var(--color-grey-3);
+  color: var(--color-grey-6);
+}
+
+/* 颜色 - 失败出错（红） */
+.tag-small-red {
+  background: var(--color-red-1);
+  border-color: var(--color-red-3);
+  color: var(--color-red-7);
+}
+
+/* 颜色 - 完成成功（绿） */
+.tag-small-green {
+  background: var(--color-green-1);
+  border-color: var(--color-green-3);
+  color: var(--color-green-7);
+}
+
+/* 颜色 - 突出警示（橙） */
+.tag-small-orange {
+  background: var(--color-yellow-1);
+  border-color: var(--color-yellow-3);
+  color: var(--color-yellow-7);
+}
+
+/* 颜色 - 正常状态（蓝） */
+.tag-small-blue {
+  background: var(--color-blue-1);
+  border-color: var(--color-blue-3);
+  color: var(--color-blue-6);
+}
+
+/* 颜色 - 主题紫色 */
+.tag-small-purple {
+  background: var(--color-main-1);
+  border-color: var(--color-main-3);
+  color: var(--color-main-6);
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-grey-2` | `#F3F4F6` | 默认通用标签背景（大/小） |
+| `--color-grey-3` | `#E0E4F0` | 默认通用标签边框（大/小） |
+| `--color-grey-6` | `#52567B` | 小标签默认通用文字 |
+| `--color-grey-7` | `#383B6F` | 大标签默认通用文字 |
+| `--color-green-1` | `#E9FFF0` | 完成成功标签背景（大/小） |
+| `--color-green-3` | `#82E6A8` | 完成成功标签边框（大/小） |
+| `--color-green-7` | `#01A356` | 完成成功标签文字（大/小） |
+| `--color-red-1` | `#FFECE8` | 失败出错标签背景（大/小） |
+| `--color-red-3` | `#FDB2AC` | 失败出错标签边框（大/小） |
+| `--color-red-7` | `#CF3337` | 失败出错标签文字（大/小） |
+| `--color-yellow-1` | `#FFFAE7` | 小标签突出警示背景 |
+| `--color-yellow-2` | `#FFEEBA` | 大标签突出警示背景 |
+| `--color-yellow-3` | `#FEDE8B` | 突出警示标签边框（大/小） |
+| `--color-yellow-7` | `#D07A01` | 突出警示标签文字（大/小） |
+| `--color-blue-1` | `#E7F3FF` | 小标签正常状态背景 |
+| `--color-blue-3` | `#9FC8FD` | 小标签正常状态边框 |
+| `--color-blue-6` | `#3376FA` | 小标签正常状态文字 |
+| `--color-main-1` | `#F1E7FF` | 小标签主题紫色背景 |
+| `--color-main-3` | `#B9A0ED` | 小标签主题紫色边框 |
+| `--color-main-6` | `#6445D1` | 小标签主题紫色文字 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **尺寸按场景选型**：
+   | 场景 | 组件 |
+   |------|------|
+   | 列表/卡片顶部状态标识 | 大标签 |
+   | 表格行内紧凑状态 | 小标签 |
+2. **类型按语义匹配**：
+   | 语义 | 大标签 | 小标签 |
+   |------|--------|--------|
+   | 正常/灰色/通用 | 默认通用 | 默认通用 / 默认带图标 |
+   | 成功/通过/完成 | 完成成功 | 完成成功 |
+   | 失败/错误/异常 | 失败出错 | 失败出错 |
+   | 警告/需注意 | 突出警示 | 突出警示 |
+   | 进行中/信息 | — | 正常状态（蓝） |
+   | 品牌强调 | — | 主题紫色 |
+3. **大标签图标/关闭按需显隐**：左侧状态图标和右侧关闭按钮各自独立控制，4 种组合
+4. **大标签默认通用文字用 `--color-grey-7`**，小标签默认通用文字用 `--color-grey-6`，注意区分
+5. **小标签 `默认带图标` 类型**：图标 `common_ic_arrow_down_o` 在文字右侧，间距 `4px`（不是默认的 `8px`）
+6. **颜色用 Token**：禁止裸 Hex，全部用 `--color-*` 引用
+7. **文字不换行**：标签内文字 `white-space: nowrap`
+8. **关闭按钮点击**：点击 `common_ic_close_o` 应移除该标签 DOM 节点

package/spec-data/tooltip.md

@@ -0,0 +1,202 @@
+---
+id: tooltip
+name: 气泡提示
+category: "反馈/Feedback"
+version: "1.0.0"
+source: PDAKit-基础组件
+source_url: https://mastergo.ky-tech.com.cn/goto/TY2xlSMH
+source_doc_id: 103417331857122
+component_count: 2
+---
+
+# 气泡提示 Tooltip
+
+轻量提示气泡，用于表单校验提示、操作引导、错误说明等场景。黑色背景 + 三角箭头，指向目标元素。
+
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **字体**：PingFang SC。
+
+---
+
+## 组件总览
+
+| 组件 | Key | 说明 |
+|------|-----|------|
+| 提示Tips/三角底部 | `6276:4996` | 气泡在上，三角箭头指向下方 |
+| 提示Tips/三角顶部 | `6276:5037` | 三角箭头在上方，气泡在下 |
+
+---
+
+## 规格
+
+### 气泡主体
+
+| 属性 | 值 |
+|------|------|
+| 背景 | `--color-black-7`（`#000000`） |
+| 文字颜色 | `--color-grey-1`（`#FFFFFF`） |
+| 内边距 | `12px 16px` |
+| 圆角 | `8px` |
+| 文字 | `16px / 22px`，PingFang SC |
+| 布局 | 水平排列（`flex-row`），居左对齐 |
+
+### 三角箭头
+
+| 属性 | 值 |
+|------|------|
+| 尺寸 | `48×8` |
+| 颜色 | 与气泡背景一致（`#000000`） |
+| 资源 | SVG 三角图形 |
+
+### 气泡 + 三角 间距
+
+| 属性 | 值 |
+|------|------|
+| 气泡与三角间距 | `0px`（紧贴） |
+| 三角与目标元素间距 | 按实际场景调整 |
+
+---
+
+## 变体
+
+### 三角底部（三角箭头朝下）
+
+```
+┌──────────────┐
+│   提示文字    │  ← 气泡：黑底白字，圆角 8px
+└──────┬───────┘
+       ▼         ← 三角：48×8，尖头朝下
+```
+
+- 气泡在上方，三角箭头指向下方目标元素
+- 常用于表单字段上方、按钮下方的错误提示
+
+### 三角顶部（三角箭头朝上）
+
+```
+       ▲         ← 三角：48×8，尖头朝上
+┌──────┴───────┐
+│   提示文字    │  ← 气泡：黑底白字，圆角 8px
+└──────────────┘
+```
+
+- 三角在上方，气泡在下方
+- 常用于输入框下方的校验提示、下拉菜单旁的说明
+
+---
+
+## HTML 示例
+
+```html
+<!-- 三角底部：气泡在上，箭头朝下 -->
+<div class="tooltip tooltip-bottom">
+  <div class="tooltip-bubble">
+    <span class="tooltip-text">请输入</span>
+  </div>
+  <div class="tooltip-arrow tooltip-arrow-down"></div>
+</div>
+
+<!-- 三角顶部：箭头朝上，气泡在下 -->
+<div class="tooltip tooltip-top">
+  <div class="tooltip-arrow tooltip-arrow-up"></div>
+  <div class="tooltip-bubble">
+    <span class="tooltip-text">请选择至少一项</span>
+  </div>
+</div>
+```
+
+---
+
+## CSS
+
+```css
+/* 气泡容器 */
+.tooltip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* 气泡主体 */
+.tooltip-bubble {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 12px 16px;
+  background: var(--color-black-7);
+  border-radius: 8px;
+}
+
+/* 文字 */
+.tooltip-text {
+  color: var(--color-grey-1);
+  font-size: 16px;
+  line-height: 22px;
+  font-family: PingFang SC;
+}
+
+/* 三角箭头 */
+.tooltip-arrow {
+  width: 48px;
+  height: 8px;
+}
+
+/* 三角朝下 */
+.tooltip-arrow-down {
+  background: url('./icons/assets/tooltip_arrow_down.svg') center/contain no-repeat;
+}
+
+/* 三角朝上 */
+.tooltip-arrow-up {
+  background: url('./icons/assets/tooltip_arrow_up.svg') center/contain no-repeat;
+}
+
+/* ===== 动效 ===== */
+/* 气泡在按钮上方（三角底部）→ 由上往下显示 */
+@keyframes tooltipFadeDown {
+  from { opacity: 0; transform: translate(-50%, -8px); }
+  to   { opacity: 1; transform: translate(-50%, 0); }
+}
+/* 气泡在按钮下方（三角顶部）→ 由下往上显示 */
+@keyframes tooltipFadeUp {
+  from { opacity: 0; transform: translate(-50%, 8px); }
+  to   { opacity: 1; transform: translate(-50%, 0); }
+}
+.tooltip-animate-down {
+  animation: tooltipFadeDown 200ms ease-out;
+}
+.tooltip-animate-up {
+  animation: tooltipFadeUp 200ms ease-out;
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-black-7` | `#000000` | 气泡背景、三角箭头颜色 |
+| `--color-grey-1` | `#FFFFFF` | 气泡文字颜色 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **三角方向按场景**：
+   | 场景 | 变体 |
+   |------|------|
+   | 表单输入框上方错误提示 | 三角底部（箭头朝下指向输入框） |
+   | 输入框下方校验说明 | 三角顶部（箭头朝上指向输入框） |
+   | 按钮/图标悬停提示 | 视位置而定，箭头指向触发元素 |
+2. **文字简洁**：气泡内文字尽量短，1-2 行，不超过 20 字
+3. **颜色用 Token**：禁止裸 Hex，全部用 `--color-*` 引用
+4. **气泡宽度自适应**：宽度随文字内容撑开，不设固定宽
+5. **三角居中**：三角的水平位置需对齐目标元素中心，CSS 用 `align-self` 或 JS 动态计算偏移
+6. **定位**：气泡为绝对定位，相对于目标元素偏移展示，偏移量按实际间距调整
+7. **显示动效（必须）**：
+    | 变体 | 动效 | 说明 |
+    |------|------|------|
+    | 三角底部（气泡在上） | `tooltipFadeUp` | 气泡在目标上方，从目标位置**由下往上**淡入展开，`200ms ease-out` |
+    | 三角顶部（气泡在下） | `tooltipFadeDown` | 气泡在目标下方，从目标位置**由上往下**淡入展开，`200ms ease-out` |
+    每次显示时重新触发动画（`void el.offsetWidth` 强制回流），隐藏时移除动画类