55 lines
1.6 KiB
Markdown
55 lines
1.6 KiB
Markdown
# 参考：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>
|
||
```
|