pda-kit-mcp-server 2.0.1

package/spec-data/location-selector.md

@@ -0,0 +1,630 @@
+---
+id: location-selector
+name: 选择点部/分拨/网点选择器
+category: business
+version: 1.0.0
+tokens:
+  layout: "flex flex-col w-full"
+  theme: "bg-grey-1"
+---
+
+# 选择点部/分拨/网点选择器
+
+> **业务组件**：用于选择卸货地、经停地、目的地、附近点部等物流节点。
+
+---
+
+## 1. 组件结构
+
+```
+LocationSelector
+├── Header（标题栏）
+├── Section（分组）
+│   ├── SectionHeader（分组标题）
+│   └── TagGroup（标签组）
+├── NearbyList（附近点部列表）
+│   └── ListItem（列表项）
+└── History（历史记录）
+```
+
+---
+
+## 2. 分组标题 SectionHeader
+
+### 规格
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | 40px |
+| 背景 | `bg-grey-2` (#F3F4F6) |
+| 内边距 | 8px 16px |
+| 图标 | 20×20px，颜色 `--color-grey-7` |
+| 标题文字 | 18px / 600 / `--color-grey-7` |
+
+### HTML 结构
+
+```html
+<div class="section-header">
+  <svg class="section-icon" width="20" height="20">
+    <use href="../icons/icons-sprite.svg#common_ic_location_o"/>
+  </svg>
+  <span class="section-title">其他卸货地</span>
+</div>
+```
+
+### CSS
+
+```css
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 40px;
+  padding: 8px 16px;
+  background: var(--color-grey-2);
+}
+
+.section-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-grey-7);
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-grey-7);
+  line-height: 25px;
+}
+```
+
+---
+
+## 3. 标签 Tag
+
+### 规格
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | 40px（含边框） |
+| 内边距 | 7.5px 10px |
+| 圆角 | 8px (`rounded-8dp`) |
+| 字体 | 18px / 400 / PingFang SC |
+| 行高 | 25px |
+
+### 状态
+
+| 状态 | 背景 | 边框 | 文字颜色 |
+|------|------|------|---------|
+| **默认 (off)** | `bg-grey-2` | `border-grey-3` | `--color-grey-7` |
+| **选中 (on)** | `bg-grey-2` | `border-grey-2` (透明边框) | `--color-grey-7` |
+
+### HTML 结构
+
+```html
+<!-- 默认状态 -->
+<div class="tag">
+  <span class="tag-text">国际代理</span>
+</div>
+
+<!-- 选中状态 -->
+<div class="tag active">
+  <span class="tag-text">达达外请</span>
+</div>
+```
+
+### CSS
+
+```css
+.tag {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 7.5px 10px;
+  background: var(--color-grey-2);
+  border: 1px solid var(--color-grey-3);
+  border-radius: 8px;
+  cursor: default;
+}
+
+.tag.active {
+  border-color: var(--color-grey-2);
+}
+
+.tag-text {
+  font-size: 18px;
+  font-family: "PingFang SC";
+  line-height: 25px;
+  color: var(--color-grey-7);
+}
+```
+
+---
+
+## 4. 标签组 TagGroup
+
+### 规格
+
+| 属性 | 值 |
+|------|-----|
+| 布局 | flex-wrap |
+| 列间距 | 16px |
+| 行间距 | 8px |
+| 内边距 | 0 16px |
+
+### HTML 结构
+
+```html
+<div class="tag-group">
+  <div class="tag"><span class="tag-text">国际代理</span></div>
+  <div class="tag active"><span class="tag-text">达达外请</span></div>
+  <div class="tag"><span class="tag-text">闪送外请</span></div>
+</div>
+```
+
+### CSS
+
+```css
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  padding: 0 16px;
+}
+```
+
+---
+
+## 5. 附近点部列表 NearbyList
+
+### 列表项 ListItem
+
+| 属性 | 值 |
+|------|-----|
+| 高度 | 70px |
+| 内边距 | 16px |
+| 背景 | `bg-grey-1` |
+| 分割线 | 1px `border-grey-3` |
+
+### 左侧内容
+
+| 属性 | 值 |
+|------|-----|
+| 标题 | 20px / 600 / `--color-black-6` |
+| 副标题 | 16px / 400 / `--color-black-4` |
+
+### 右侧标签
+
+| 属性 | 值 |
+|------|-----|
+| 背景 | `bg-grey-2` |
+| 圆角 | 4px |
+| 文字 | 14px / 600 / `--color-grey-7` |
+| 内边距 | 4px 8px |
+
+### HTML 结构
+
+```html
+<div class="nearby-list">
+  <div class="list-item">
+    <div class="list-item-left">
+      <span class="list-item-title">黄田福围点部</span>
+    </div>
+    <div class="list-item-right">
+      <span class="distance-tag">300米</span>
+    </div>
+  </div>
+  <div class="list-divider"></div>
+</div>
+```
+
+### CSS
+
+```css
+.nearby-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70px;
+  padding: 0 16px;
+  background: var(--color-grey-1);
+}
+
+.list-item-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.list-item-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-black-6);
+  line-height: 28px;
+}
+
+.list-item-right {
+  display: flex;
+  align-items: center;
+}
+
+.distance-tag {
+  padding: 4px 8px;
+  background: var(--color-grey-2);
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-grey-7);
+  line-height: 20px;
+}
+
+.list-divider {
+  height: 1px;
+  background: var(--color-grey-3);
+  margin: 0 16px;
+}
+```
+
+---
+
+## 6. 历史记录 History
+
+### 规格
+
+| 属性 | 值 |
+|------|-----|
+| 布局 | flex-wrap |
+| 间距 | 16px |
+| 可删除 | 带关闭图标 |
+
+### 关闭图标
+
+| 属性 | 值 |
+|------|-----|
+| 尺寸 | 16×16px |
+| 颜色 | `--color-grey-5` |
+
+### HTML 结构
+
+```html
+<div class="history-section">
+  <div class="section-header">
+    <svg class="section-icon" width="20" height="20">
+      <use href="../icons/icons-sprite.svg#common_ic_history_o"/>
+    </svg>
+    <span class="section-title">历史记录</span>
+    <button class="clear-btn" onclick="clearHistory()">清除</button>
+  </div>
+  <div class="history-tags">
+    <div class="tag active">
+      <span class="tag-text">黄点福围点部</span>
+      <svg class="tag-close" width="16" height="16" onclick="removeTag(this)">
+        <use href="../icons/icons-sprite.svg#common_ic_close_o"/>
+      </svg>
+    </div>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+.history-section .section-header {
+  justify-content: space-between;
+}
+
+.clear-btn {
+  font-size: 16px;
+  color: var(--color-main-6);
+  background: none;
+  border: none;
+  cursor: default;
+}
+
+.history-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+}
+
+.history-tags .tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tag-close {
+  width: 16px;
+  height: 16px;
+  color: var(--color-grey-5);
+  cursor: default;
+}
+```
+
+---
+
+## 7. 完整示例
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>选择点部/分拨/网点</title>
+  <link rel="stylesheet" href="../tokens/pdakit.css">
+  <style>
+    /* 双端响应式沙箱 */
+    body {
+      font-family: "PingFang SC", -apple-system, sans-serif;
+      background: var(--color-grey-2);
+      margin: 0;
+      padding: 0;
+    }
+    
+    @media (min-width: 1024px) {
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+      }
+      .pda-sandbox {
+        width: 412px;
+        height: 844px;
+        border: 1px solid var(--color-grey-3);
+        overflow: hidden;
+      }
+    }
+    
+    .location-selector {
+      width: 100%;
+      height: 100%;
+      background: var(--color-grey-1);
+      overflow-y: auto;
+    }
+    
+    /* SectionHeader */
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      height: 40px;
+      padding: 8px 16px;
+      background: var(--color-grey-2);
+    }
+    
+    .section-icon {
+      width: 20px;
+      height: 20px;
+      color: var(--color-grey-7);
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-grey-7);
+      line-height: 25px;
+    }
+    
+    /* Tag */
+    .tag-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px 16px;
+      padding: 12px 16px;
+    }
+    
+    .tag {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      padding: 7.5px 10px;
+      background: var(--color-grey-2);
+      border: 1px solid var(--color-grey-3);
+      border-radius: 8px;
+      cursor: default;
+    }
+    
+    .tag.active {
+      border-color: var(--color-grey-2);
+    }
+    
+    .tag-text {
+      font-size: 18px;
+      font-family: "PingFang SC";
+      line-height: 25px;
+      color: var(--color-grey-7);
+    }
+    
+    /* NearbyList */
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 70px;
+      padding: 0 16px;
+      background: var(--color-grey-1);
+    }
+    
+    .list-item-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--color-black-6);
+      line-height: 28px;
+    }
+    
+    .distance-tag {
+      padding: 4px 8px;
+      background: var(--color-grey-2);
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-grey-7);
+      line-height: 20px;
+    }
+    
+    .list-divider {
+      height: 1px;
+      background: var(--color-grey-3);
+      margin: 0 16px;
+    }
+    
+    /* History */
+    .clear-btn {
+      margin-left: auto;
+      font-size: 16px;
+      color: var(--color-main-6);
+      background: none;
+      border: none;
+      cursor: default;
+    }
+    
+    .tag-close {
+      width: 16px;
+      height: 16px;
+      color: var(--color-grey-5);
+    }
+  </style>
+</head>
+<body>
+
+<div class="pda-sandbox">
+  <div class="location-selector">
+    
+    <!-- 其他卸货地 -->
+    <div class="section">
+      <div class="section-header">
+        <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+          <circle cx="12" cy="10" r="3"/>
+        </svg>
+        <span class="section-title">其他卸货地</span>
+      </div>
+      <div class="tag-group">
+        <div class="tag"><span class="tag-text">国际代理</span></div>
+        <div class="tag"><span class="tag-text">京东分拨</span></div>
+        <div class="tag active"><span class="tag-text">达达外请</span></div>
+        <div class="tag active"><span class="tag-text">闪送外请</span></div>
+        <div class="tag"><span class="tag-text">自提柜</span></div>
+      </div>
+    </div>
+    
+    <!-- 经停地 -->
+    <div class="section">
+      <div class="section-header">
+        <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/>
+          <polyline points="12 6 12 12 16 14"/>
+        </svg>
+        <span class="section-title">经停地</span>
+      </div>
+      <div class="tag-group">
+        <div class="tag"><span class="tag-text">武汉</span></div>
+        <div class="tag"><span class="tag-text">北京</span></div>
+        <div class="tag active"><span class="tag-text">上海</span></div>
+        <div class="tag active"><span class="tag-text">深圳-上海-武汉</span></div>
+      </div>
+    </div>
+    
+    <!-- 目的地 -->
+    <div class="section">
+      <div class="section-header">
+        <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+        </svg>
+        <span class="section-title">目的地</span>
+      </div>
+      <div class="tag-group">
+        <div class="tag"><span class="tag-text">武汉</span></div>
+        <div class="tag"><span class="tag-text">北京</span></div>
+        <div class="tag active"><span class="tag-text">上海</span></div>
+      </div>
+    </div>
+    
+    <!-- 附近点部 -->
+    <div class="section">
+      <div class="section-header">
+        <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+          <circle cx="12" cy="10" r="3"/>
+        </svg>
+        <span class="section-title">附近点部</span>
+      </div>
+      <div class="nearby-list">
+        <div class="list-item">
+          <span class="list-item-title">黄田福围点部</span>
+          <span class="distance-tag">300米</span>
+        </div>
+        <div class="list-divider"></div>
+        <div class="list-item">
+          <span class="list-item-title">黄田后瑞点部</span>
+          <span class="distance-tag">300米</span>
+        </div>
+        <div class="list-divider"></div>
+        <div class="list-item">
+          <span class="list-item-title">机场分拨一区</span>
+          <span class="distance-tag">300米</span>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 历史记录 -->
+    <div class="section">
+      <div class="section-header">
+        <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="1 4 1 10 7 10"/>
+          <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
+        </svg>
+        <span class="section-title">历史记录</span>
+        <button class="clear-btn">清除</button>
+      </div>
+      <div class="tag-group">
+        <div class="tag active">
+          <span class="tag-text">黄点福围点部</span>
+          <svg class="tag-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"/>
+            <line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </div>
+        <div class="tag active">
+          <span class="tag-text">华强燕南点部</span>
+          <svg class="tag-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"/>
+            <line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</div>
+
+</body>
+</html>
+```
+
+---
+
+## 8. AI 生成检查清单
+
+- [ ] 使用 `var(--color-*)` Token，无裸 Hex
+- [ ] 圆角使用 4px（列表项）或 8px（标签）
+- [ ] 无 `transition` / `animation`
+- [ ] 图标使用 `<svg><use href="..."/></svg>`
+- [ ] 所有可点击元素 `cursor: default`
+- [ ] 双端响应式沙箱布局
+
+---
+
+**文档版本：** v1.0.0  
+**最后更新：** 2024-01-01  
+**状态：** 强制生效