2025-07-17：学习

Kafka 说：许多人都是开发某个项目中的若干模块，多人协作之下，遵循项目统一的 UI 规范就变得很有必要。用 AI 编程辅助开发时，同样需要遵循项目的 UI 规范。以下是我在实际工作里用到的描述，大家可以依据自己项目的情况进行调整，然后告知 AI 编程工具。

本文档旨在为 AI 辅助开发提供一套详细的 UI 设计规范，以确保所有子系统在视觉和交互上保持一致性。

1. 核心技术栈

系统采用经典的“头部-侧边栏-主内容区”布局模式，由 el-container、el-header、el-aside 和 el-main 构建。

Header (头部):
- 位于页面顶部，固定高度。
- 通常包含系统 Logo、标题、以及用户操作区（如消息、全屏、用户信息、退出登录）。
- 背景色: 通常为深色或品牌主色调。
- 文本颜色: 通常为白色或浅灰色 (#FFFFFF)。
Aside (侧边栏):
- 位于页面左侧，用于主导航。
- 使用 el-menu 组件实现，可折叠。
- 背景色: 通常与 Header 保持一致或稍浅。
- 激活菜单项: 高亮显示，通常使用品牌主色或白色。
Main (主内容区):
- 页面核心区域，用于展示视图内容。
- 背景色: 浅灰色 (#f0f2f5 或类似颜色)。
- 内容通常包裹在 div.main 容器内。

主色调 (Primary):
- 蓝色 (#409EFF - Element UI 默认主色) 用于主要操作按钮、链接、高亮文本和图标。
- 在组件中通过 type="primary" 使用。
辅助色:
- 成功 (Success): #67C23A (用于成功提示)。
- 警告 (Warning): #E6A23C (用于警告提示、需要用户注意的操作)。
- 危险 (Danger/Error): #F56C6C (用于删除操作、错误提示、未处理状态)。在代码中通过 .c-red 类或 type="danger" 实现。
- 信息 (Info): #909399 (用于次要信息、禁用状态)。
文本颜色:
- 主要文本: #303133 (深灰色)。
- 常规文本: #606266 (中灰色)。
- 次要文本/占位符: #909399 (浅灰色)。
背景色:
- 页面背景: #f0f2f5 (浅灰色)。
- 卡片/表格背景: #FFFFFF (白色)。
- 表格头部背景: #F6F7FC (极浅的蓝灰色)。

字体族: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif (Element UI 默认)。
字号:
- 主标题 (Dialog Title): 18px。
- 页面/卡片标题: 16px。
- 正文/表格内容: 14px。
- 次要信息/树形控件标签: 12px。
字重:
- 标题: bold。
- 正文: normal。

使用 el-card 作为页面区域划分的主要容器。
查询区域卡片:
- class: box-card box-card-query。
- shadow="never"，无阴影，仅有边框。
- 内部包含 el-form 用于查询条件。
内容区域卡片:
- shadow="hover" 或默认。
- 通常用于包裹表格、表单等主要内容。

查询表单:
- el-form 设置 :inline="true" 和 size="small"。
- el-form-item 紧凑排列。
- 输入框 el-input 应带有 placeholder 和 clearable 属性。
- 查询按钮 (el-button) 在右侧，包含“查询”和“重置”两个按钮。
  - 查询按钮: type="primary", icon="el-icon-search"。
  - 重置按钮: 默认类型, icon="el-icon-refresh"。
弹窗表单 (Dialog Form):
- size="small"。
- label-width 通常为 80px、100px 或 120px，根据内容对齐。
- 使用 el-row 和 el-col 进行栅格布局。
- 输入框 el-input、el-select 等宽度应设置为 style="width:100%" 以适应栅格。
- 必填项需配置 rules，并显示 * 标记。

尺寸:
- 主要操作按钮 (如页面顶部的“添加”、“导出”) 使用 size="small"。
- 表格内的操作按钮 (如“编辑”、“删除”) 使用 type="text" 和 size="small"。
类型:
- 主要操作 (查询、保存、添加): type="primary"。
- 删除操作: type="text" 并添加红色样式 (class="c-red")。
- 取消操作: 默认类型。
- 重置操作: 默认类型。
- 上传操作: type="primary", :plain="true" (幽灵按钮)。
图标:
- 常用操作应附带 Element UI 图标，如 icon="el-icon-search", icon="el-icon-refresh", icon="el-icon-plus", icon="el-icon-delete"。

使用 el-table 组件。
样式:
- border: 带有纵向边框。
- :header-cell-style="{ background: '#F6F7FC' }": 自定义表头背景色。
- :height="tableHeight": 高度动态计算，通常为 window.innerHeight 减去其他元素的高度，以实现全屏展示。
对齐:
- 关键信息（如名称、编号）: 默认左对齐。
- 状态、数量、操作列: align="center" 居中对齐。
操作列:
- 固定在表格最右侧。
- 使用 type="text" 的 el-button。
- 删除按钮应为红色。

使用 el-dialog 组件。
尺寸:
- 简单表单: width="500px"。
- 复杂表单或包含多列的: width="800px" 或 900px。
- 地图或特殊组件: 自定义宽度，可能 top="5vh" 以便垂直居中。
行为:
- :close-on-click-modal="false": 禁止点击遮罩层关闭。
- :append-to-body="true": 当在其他弹窗内打开时，确保层级正确。
- 底部包含“取消”和“保存/确定”按钮，居中或居右对齐。

Element UI 图标: 主要用于按钮和提示，如 el-icon-search。
自定义图标:
- 通过 iconfont class 使用。
- font-family: "iconfont" !important;
- font-size: 16px;
- 例如: <i class="iconfont icon-delete"></i>。

一个标准的管理页面 (index.vue) 通常包含以下部件：

在生成新的 Vue 组件时，请遵循以下指令：

文件结构:
- 在 <template> 中，根元素通常是 <div class="main">。
- 遵循“查询-操作-表格-分页-弹窗”的布局顺序。
组件使用:
- 严格使用 element-ui 组件，并遵循上述规范。
- 对于表单和表格，size 统一为 small 或 mini。
样式:
- 优先使用 type 属性（如 primary, danger）来定义按钮和文本颜色。
- 对于自定义样式，使用 <style scoped>，并遵循现有命名约定（如 .c-red, .fr）。
- 表格高度应动态计算: this.tableHeight = window.innerHeight - ...。
逻辑:
- 数据请求封装在 methods 中，并使用 this.util.request。
- 分页逻辑 (handleSizeChange, handleCurrentChange) 和查询逻辑 (query, resetQuery) 保持一致。
- 在 mounted钩子中调用初始数据加载方法。