4.4 KiB
4.4 KiB
东软环保公众监督系统 - Vue 界面设计规约
1. 设计原则
- 一致性: 所有界面元素、组件和交互行为应保持高度一致。
- 清晰性: 界面布局、信息层级和操作指引清晰明确，避免用户困惑。
- 效率性: 简化操作流程，减少不必要的点击和输入，让用户高效完成任务。
- 响应式: 确保在不同尺寸的设备上（特别是PC端主流分辨率）都能获得良好的视觉和交互体验。
- 美观性: 遵循现代化的审美标准，界面简洁、美观、专业。
2. 颜色系统 (Color Palette)
颜色方案以"科技蓝"为主色调，辅以中性灰和功能色，营造专业、冷静、可靠的视觉感受。
- 主色 (Primary)
Brand Blue:#409EFF- 用于关键操作按钮、Logo、导航高亮等。
- 功能色 (Functional)
Success Green:#67C23A- 用于成功提示、操作完成状态。Warning Orange:#E6A23C- 用于警告信息、需要用户注意的操作。Danger Red:#F56C6C- 用于错误提示、删除、高危操作。Info Gray:#909399- 用于普通信息、辅助说明。
- 中性色 (Neutral)
Text Primary:#303133- 主要文字颜色。Text Regular:#606266- 常规文字、次要信息。Text Secondary:#909399- 辅助、占位文字。Border Color:#DCDFE6- 边框、分割线。Background:#F5F7FA- 页面背景色。Container Background:#FFFFFF- 卡片、表格等容器背景色。
3. 字体与排版 (Typography)
- 字体族:
Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif - 字号体系:
H1 / 页面主标题: 24px (Bold)H2 / 区域标题: 20px (Bold)H3 / 卡片/弹窗标题: 18px (Medium)正文/表格内容: 14px (Regular)辅助/说明文字: 12px (Regular)
- 行高:
1.6-1.8，保证阅读舒适性。 - 段落间距:
16px
4. 布局与间距 (Layout & Spacing)
- 主布局: 采用经典的侧边栏导航 + 内容区的布局方式。
NEPM (管理端)/NEPV (大屏端): 左侧为固定菜单栏，右侧为内容展示区。NEPS (公众端)/NEPG (网格员端): 根据移动端优先原则，可采用底部Tab栏或顶部导航。
- 间距单位: 以
8px为基础栅格单位。xs: 4pxsm: 8pxmd: 16pxlg: 24pxxl: 32px
- 页面内边距 (Padding): 主要内容区域应有
24px的内边距。 - 组件间距 (Gap): 卡片、表单项之间保持
16px或24px的间距。
5. 核心组件样式规约
5.1 按钮 (Button)
- 主按钮 (Primary):
background: #409EFF,color: #FFFFFF。用于页面核心操作。 - 次按钮 (Default):
border: 1px solid #DCDFE6,background: #FFFFFF。用于非核心或次要操作。 - 危险按钮 (Danger):
background: #F56C6C,color: #FFFFFF。用于删除等高危操作。 - 尺寸: 高度分为
大 (40px),中 (32px),小 (24px)三档。
5.2 表格 (Table)
- 表头: 背景色
#FAFAFA, 字体加粗。 - 行: 偶数行可设置
#F5F7FA的背景色以增强区分度 (斑马纹)。 - 操作区: 表格最后一列通常为操作区，放置
查看、编辑、删除等按钮，建议使用文字按钮或小尺寸图标按钮。
5.3 表单 (Form)
- 标签 (Label): 右对齐，与输入框保持
8px距离。 - 输入框 (Input): 统一高度，
hover和focus状态有明显视觉反馈 (边框颜色变为#409EFF)。 - 必填项: 在标签前用红色
*标示。
5.4 卡片 (Card)
- 样式:
background: #FFFFFF,border-radius: 8px,box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)。 - 内边距:
20px。
6. 编码与实现规约
- 组件化: 遵循Vue的组件化思想，将可复用的UI和逻辑封装成组件。
- 命名规范:
- 组件文件名:
PascalCase(e.g.,UserTable.vue) - props/data/methods:
camelCase(e.g.,tableData)
- 组件文件名:
- 状态管理: 使用
Pinia统一管理全局状态，如用户信息、角色权限等。 - API请求: 封装
Axios，统一处理请求头、响应拦截和错误处理。 - TypeScript: 全程使用TypeScript，为
props,emits,data和store提供明确的类型定义。 - 代码风格: 遵循
ESLint + Prettier的配置，确保代码风格统一。