提交

2026-05-25 17:43:49 +08:00
1 parent 771f010a39
commit ee4abd361e
@@ -544,7 +544,7 @@ watchDebounced(
 - **THEN** SHALL 拒绝 `picture-card`、`show-file-list` 默认列表、与规范不一致的尺寸/色值
 ### Requirement: 按钮须携带图标

-`web-admin` 中所有带文字标签的 `el-button`（或 `ElButton`）SHALL 在文字前方包含 `<el-icon>` 子元素，使用 `@element-plus/icons-vue` 提供的图标组件；SHALL NOT 出现仅有文字而无图标的按钮。图标的引入方式为在文件 `<script setup>` 中显式 `import` 所需图标组件（`@element-plus/icons-vue` 不属于 auto-import 范围）。
+`web-admin` 中所有带文字标签的 `el-button`（或 `ElButton`）SHALL 在文字**前方**包含 `<el-icon>` 子元素，使用 `@element-plus/icons-vue` 提供的图标组件；SHALL NOT 出现仅有文字而无图标的按钮。该规则适用于列表工具栏、表格操作列、`el-dialog` / 抽屉的 `#footer` 底栏、表单内 `link` / `plain` / `size="small"` 等**凡渲染可见文案的按钮**，不限于 `type="primary"`。图标的引入方式为在文件 `<script setup>` 中显式 `import` 所需图标组件（`@element-plus/icons-vue` 不属于 auto-import 范围）。图标与文字间距由全局样式保证（与 Fresh Mint 弹窗底栏约定一致，约 6px）。

 #### 常用按钮图标映射

@@ -562,6 +562,12 @@ watchDebounced(
 | 配置 / 设置 | `Setting` 或 `SetUp` | 操作列「配置」按钮 |
 | 导入 / 上传 | `Upload` | 工具栏「导入」、表单「上传」按钮 |
 | 折叠 / 展开 | `ArrowDown` / `ArrowUp` | 工具栏「展开/收起」按钮 |
+| 充值 / 发起充值 | `Wallet` | 渠道服务订单等预付款充值操作 |
+| 退款 / 申请退款 | `Sell` | 退款、退费类操作 |
+| 购买产品 | `ShoppingCart` | 购买、下单类操作 |
+| 退订 | `Remove` | 退订、减少持有类操作 |
+| 作废 | `Delete` | 作废流水/订单（与删除同图标，可用 `op-warn` 样式区分） |
+| 操作流水 / 记录列表 | `List` | 「操作流水」等子列表入口 |

 #### Scenario: 新增列表页工具栏按钮

@@ -588,6 +594,12 @@ watchDebounced(
 - **WHEN** PR 包含新增或修改的 `el-button`
 - **THEN** 审查者 SHALL 确认该按钮包含 `<el-icon>` 子元素，且图标组件已从 `@element-plus/icons-vue` 显式导入

+#### Scenario: 渠道服务订单与财务确认页
+
+- **WHEN** 实现或修改 `web-admin/src/views/pilot-service/channel-service-order/**` 或 `channel-service-order-finance/**` 中的按钮（含弹窗底栏、表格操作列、行内 link 删除）
+- **THEN** 每个带文案的 `el-button` SHALL 按上表携带图标（如查看 `View`、确认 `Check`、取消 `Close`、作废 `Delete`、发起充值 `Wallet` 等）
+- **THEN** 弹窗底栏取消/确定 SHALL 使用 `btn-ghost` / `btn-main` 类名并与 Demo 页图标约定一致
+
 #### 标准写法示例

 ```html
@@ -944,3 +956,37 @@ import { protocolStatusLabel, protocolStatusTagType } from '@/utils/status-tag-r
 - **WHEN** 新增 P28 或更高级别模式，或全站页面映射变更
 - **THEN** 维护者 SHALL 同步更新 `docs/web-admin-ui-pattern-index.md` 与本 Requirement 决策表

+### Requirement: 金额与单价千分位输入与展示
+
+金额、单价等可编辑输入字段 SHALL 使用 `AmountInput` 组件（路径 `@/components/common/amount-input/index.vue`），满足以下行为：
+
+| 时机 | 行为 |
+|------|------|
+| 聚焦输入中 | 纯数字展示，无千分位逗号，如 `1234567.89` |
+| 失焦后 | 千分位展示，如 `1,234,567.89` |
+| 再次聚焦 | 自动去掉逗号，恢复纯数字便于修改 |
+| 提交/API | `number` 类型，不受逗号影响 |
+
+金额、单价等只读展示（列表列、查看弹窗、合计文案）SHALL 使用 `formatMoneyDisplay` 工具函数（路径 `@/utils/money-format.ts`），整数部分千分位、小数位默认 2 位。
+
+业务 `.vue` 文件 SHALL NOT 复制千分位正则或 `addThousandSeparators` 等函数实现；SHALL 统一引用 `@/utils/money-format.ts`。
+
+不在范围内：数量、份数、排序号、百分比系数等非金额字段（仍用 `el-input-number`）。
+
+#### Scenario: 新增金额输入字段
+
+- **WHEN** 新增可编辑的金额或单价字段
+- **THEN** SHALL 使用 `<AmountInput v-model="..." />` 组件
+- **THEN** SHALL NOT 使用 `<el-input-number>` 或页面内联 focus/blur 千分位逻辑
+
+#### Scenario: 新增金额只读展示
+
+- **WHEN** 在列表列、查看弹窗、合计文案中展示金额
+- **THEN** SHALL 使用 `formatMoneyDisplay(v, 2)` 格式化
+- **THEN** 货币符号 `¥` 仍在模板侧拼接，不内置于函数
+
+#### Scenario: Code review 金额展示
+
+- **WHEN** PR 涉及金额/单价字段展示
+- **THEN** 审查者 SHALL 确认使用 `AmountInput`（可编辑）或 `formatMoneyDisplay`（只读），拒绝页面内复制千分位实现
+