shanxia2.0/docs/crm-migration/ref-ui-standards.md

参考：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 后面：

<template #label>排序号<span class="form-label-tip">数值越小越靠前</span></template>