pda-kit-mcp-server 2.0.1

package/spec-data/waybill-number.md

@@ -0,0 +1,257 @@
+---
+id: waybill-number
+name: 运单号
+category: molecule
+version: "2.0.0"
+tokens:
+  prefixPattern: "KY"
+  suffixLength: 6
+  fontSize: 16px
+  lineHeight: 22px
+  normalWeight: 400
+  boldWeight: 600
+  maxWidth: 216px
+  searchIcon: 查件.svg
+---
+
+> **🧠 AI 指令 — 强制约束（MANDATORY，违反即错误）**
+>
+> ```yaml
+> NEGATIVE_PROMPTS:
+>   - ⛔ 禁止运单号不以 KY 开头（如 KD / SF / YT 等均非法）
+>   - ⛔ 禁止后六位不加粗（必须 font-weight: 600）
+>   - ⛔ 禁止运单号以其他前缀开头（KY 是唯一合法前缀）
+>   - ⛔ 禁止运单号长度不足 7 位（KY + 至少 5 位数字 → 后六位才有意义）
+>   - ⛔ 禁止运单号与查件按钮分开展示（例外场景除外）
+>   - ⛔ 禁止在 HTML 中手写 style="background: var(--color-*)"
+>
+> MANDATORY:
+>   - 所有运单号必须以 KY 开头，格式：KY + 数字串
+>   - 后六位 font-weight: 600（Semibold），前缀 font-weight: 400
+>   - 查件按钮默认跟随，尺寸 32×32，图标 24×24
+>   - 始终使用本组件定义的 CSS 类名
+> ```
+>
+> ```css
+> /* ⛔ AI 必须逐字复制这些关键值，不可修改 */
+> .waybill-prefix { font-weight: 400; }
+> .waybill-suffix { font-weight: 600; }
+> /* 运单号格式：KY + 数字串，后六位加粗 */
+> /* 例：KY5000202389355 → KY50002（Regular）+ 389355（Bold） */
+> ```
+
+---
+
+# 运单号 Waybill Number
+
+运单号文本展示组件。**全局硬性规则：所有运单号必须以 KY 开头，后六位自动加粗突出**，末尾固定跟随查件图标按钮。全局通用，除少数特殊场景外，所有出现运单号的位置均应使用本组件。
+
+> **核心规则**：
+> - **KY 前缀**：所有运单号必须以 KY 开头，格式 `KY + 数字串`。这是全局铁律，不可改。
+> - **后六位加粗**：运单号末尾 6 位使用 SemiBold（600），前缀 Regular（400）。
+> - **查件按钮跟随**：不可分割。
+> **颜色规则**：全部使用 Token（`--color-{色系}-{色阶}`），禁止 Hex。
+> **图标规则**：查件图标使用 `icons-应用/应用/其他/查件.svg`。
+
+---
+
+## 组件总览
+
+| 组件 | Key | 用途 |
+|------|-----|------|
+| 运单号（文本） | 运单号文本 | 运单号主文本：前段常规 + 后六位 SemiBold |
+| 查件按钮 | 查件图标按钮 | 运单号尾部的查件图标按钮，点击跳转查件页面 |
+
+---
+
+## 1. 运单号文本
+
+### Props
+
+| Prop | 类型 | 默认 | 说明 |
+|------|------|------|------|
+| 运单号 | string | — | 完整的运单号字符串（如 `KY5000202389355`），必须以 KY 开头 |
+| 显示查件 | boolean | `true` | 是否在尾部显示查件按钮。大多数场景为 `true`，少数内部管理场景可为 `false` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 字号 | `16px`（前段）/ `16px`（后六位） |
+| 行高 | `22px` |
+| 字重 | 前段 `400`（Regular），后六位 `600`（Semibold） |
+| 字体 | PingFang SC |
+| 前段文字颜色 | `--color-black-6`（`#333333`） |
+| 后六位颜色 | `--color-black-6`（`#333333`） |
+| 前后段间距 | `0`（紧接，无间距） |
+
+### 截取规则
+
+```
+运单号 = 前缀部分 + 后六位
+
+例：KY5000202389355
+     └前缀┘└后六位┘
+     Regular  Semibold
+```
+
+> 后六位始终从运单号末尾向前截取 6 个字符。
+
+---
+
+## 2. 查件按钮
+
+### Props
+
+| Prop | 类型 | 值 |
+|------|------|-----|
+| 类型 | enum | `图标按钮` |
+| 图标 | icon-ref | `icons-应用/应用/其他/查件.svg` |
+
+### 规格
+
+| 属性 | 值 |
+|------|------|
+| 容器尺寸 | `32 × 32` |
+| 背景 | 透明（跟随父容器） |
+| 图标尺寸 | `24 × 24`，居中放置于容器内 |
+| 颜色 | `--color-grey-6`（`#52567B`），default 态 |
+
+> 查件按钮为图标按钮/常规，沿用 [button.md](button.md) 中图标按钮规格。
+
+### 点击行为
+
+| 事件 | 行为 |
+|------|------|
+| 点击查件按钮 | 跳转查件页面，携带当前运单号作为查询参数 |
+
+---
+
+## 组合布局
+
+运单号文本 + 查件按钮为行内组合，整体在同一行展示：
+
+```
+┌──────────────────────────────────┐
+│  KY5000202389355  [🔍查件]   │
+│  └Regular┘└Bold┘   查件按钮    │
+└──────────────────────────────────┘
+```
+
+### 组合规格
+
+| 属性 | 值 |
+|------|------|
+| 布局 | 水平排列（`flex-row`） |
+| 运单号文本-查件按钮间距 | `--spacing-8`（`8px`） |
+| 垂直对齐 | `items-center` |
+| 运单号最大宽度 | `216px`（超出省略`...`，仅前缀截断，后六位保留） |
+| 查件按钮 | `flex-shrink: 0`（不可被压缩） |
+
+---
+
+## HTML 示例
+
+### 场景 A：默认（显示查件按钮）
+
+```html
+<!-- 运单号组件：后六位加粗 + 查件按钮 -->
+<div class="waybill-row">
+  <p class="waybill-number">
+    <span class="waybill-prefix">KY50002</span><span class="waybill-suffix">389355</span>
+  </p>
+  <div class="waybill-search-btn" onclick="openSearch('KY5000202389355')">
+    <img src="./icons-应用/应用/其他/查件.svg" width="24" height="24" alt="查件" />
+  </div>
+</div>
+```
+
+### 场景 B：例外（不显示查件按钮，`显示查件=false`）
+
+```html
+<!-- 运单号组件：仅后六位加粗，无查件按钮 -->
+<div class="waybill-row">
+  <p class="waybill-number">
+    <span class="waybill-prefix">KY50002</span><span class="waybill-suffix">389355</span>
+  </p>
+</div>
+```
+
+---
+
+## CSS
+
+```css
+/* 运单号行容器 */
+.waybill-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+/* 运单号文本 */
+.waybill-number {
+  max-width: 216px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-black-6);
+  font-size: 16px;
+  line-height: 22px;
+  font-family: PingFang SC;
+}
+
+/* 前缀：常规字重 */
+.waybill-prefix {
+  font-weight: 400;
+}
+
+/* 后六位：加粗突出 */
+.waybill-suffix {
+  font-weight: 600;
+}
+
+/* 查件按钮 */
+.waybill-search-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.waybill-search-btn img {
+  width: 24px;
+  height: 24px;
+}
+```
+
+---
+
+## 颜色 Token
+
+| Token | 色值 | 使用场景 |
+|-------|------|---------|
+| `--color-black-6` | `#333333` | 运单号文字颜色（前段 + 后六位） |
+| `--color-grey-6` | `#52567B` | 查件按钮图标颜色 |
+
+---
+
+## 使用规则（AI 必读）
+
+1. **后六位必须加粗**：运单号末尾 6 位始终使用 `font-weight: 600`（Semibold），前缀使用 `font-weight: 400`（Regular）
+2. **查件按钮默认跟随**：Props `显示查件` 默认为 `true`，运单号尾部跟随查件图标按钮，点击跳转查件页面
+3. **全局通用**：所有列表项、详情页、卡片、弹窗中出现运单号时，默认使用本组件
+4. **例外场景**（`显示查件=false`，仅显示运单号文本）：
+   - 打印预览页
+   - 纯导出/报表场景
+   - 已明确标注「不可查件」的历史运单
+   - 运单号仅作数据标识、无交互需求的配置页面
+5. **溢出省略**：运单号超长时，最大宽度 216px，超出部分用 `...` 省略。省略仅作用在前缀部分，后六位始终保持完整可见
+6. **查件图标**：固定使用 `icons-应用/应用/其他/查件.svg`，尺寸 24×24，容器 32×32
+7. **禁止拆分**：运单号文本 + 查件按钮为绑定组合，不可只显示运单号而遗漏查件按钮（例外场景除外）
+8. **CSS 类名**：使用本文档定义的 CSS 类名（`.waybill-row` / `.waybill-number` / `.waybill-prefix` / `.waybill-suffix` / `.waybill-search-btn`），保证全局一致性