1

Design/Vue界面设计规约.md

@@ -0,0 +1,82 @@
+# 东软环保公众监督系统 - 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`: 4px
+  - `sm`: 8px
+  - `md`: 16px
+  - `lg`: 24px
+  - `xl`: 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` 的配置，确保代码风格统一。