# 参考：shanxia2.0 UI 规范强制要求

> 前端 UI 适配时同步参考此文档。

---

## 颜色

- 主色 `#10b981`（Fresh Mint），暗色 `#059669`，背景 `#ecfdf5`
- **禁止**使用小程序色 `#0a9f6d`
- Tag 颜色：success=正常/已完成、warning=进行中/待确认、danger=异常/拒绝、info=待执行/停用、primary=特殊分类

## 弹窗/对话框

- 表单 `label-position="top"`（强约束）
- 禁止背景模糊：`backdrop-filter: none`
- 使用 `.dialog-form-layout` 类
- 默认两列栅格 `.form-grid-2`，跨整行用 `.form-col-span-2`
- `destroy-on-close` + `:close-on-click-modal="false"` + `align-center`
- **禁止使用 `el-drawer`**
- 详情查看使用 `SystemViewDialog` 模式或标准 el-dialog

## 表格

- 所有列使用 `min-width`（不用 `width`）
- 操作列 `fixed="right"`，`min-width >= 260px`
- 状态/类型字段用 `<el-tag :type="..." size="small">`
- 空值显示 `-`，不显示 "null"/"undefined"
- 默认排序 `create_time DESC`

## 按钮

- 所有 `el-button` 带可见文字时必须包含 `<el-icon>`
- 工具栏只有一个 `type="primary"` 按钮
- "已选 N 项"在工具栏最左

## 附件上传

- 使用 MinIO（`fetchUploadAttachment`）
- 上传触发为卡片式（140×96px，虚线边框）
- 多附件逗号分隔 URL

## 列表面板

- `panel-top` → `h2.title-bar-heading` 带主色竖线
- 不在弹窗内使用 `<header class="page-head">`
- 排序字段（orderNum）默认不展示

## 字段注释

字段提示放在 label 后面：
```vue
<template #label>排序号<span class="form-label-tip">数值越小越靠前</span></template>
```