diff --git a/docs/变更管理/code-adjust-record-2025-07-02-wuzilong.md b/docs/变更管理/code-adjust-record-2025-07-02-wuzilong.md index 9617939b..ac17d19c 100644 --- a/docs/变更管理/code-adjust-record-2025-07-02-wuzilong.md +++ b/docs/变更管理/code-adjust-record-2025-07-02-wuzilong.md @@ -2,27 +2,106 @@ ## 📝 变更概述 -**变更类型**: 前端规范完善和框架梳理 -**影响范围**: web 前端工程规范文档 -**变更人员**: wuzilong -**变更时间**: 2025-07-02 15:30:00 +**变更类型**: 全局样式修复和前端规范完善 +**影响范围**: web 前端工程全局弹窗和规范文档 +**变更人员**: wuzilong --- ## 🎯 本次变更目标 -1. **重新梳理 web 前端工程的技术栈和架构** -2. **完善品牌色及辅助色的规范文档** -3. **统一列表页面按钮使用规范** -4. **更新 cursorrules-frontend.md 规范文档** +1. **🔴 全局修复弹窗关闭按钮显示问题（超级重要）** +2. **重新梳理 web 前端工程的技术栈和架构** +3. **完善品牌色及辅助色的规范文档** +4. **统一列表页面按钮使用规范** +5. **更新 cursorrules-frontend.md 规范文档** --- ## 📋 变更详细内容 +### 🔴 全局弹窗关闭按钮修复 ✅ **（2025-07-02 17:30:00 新增）** + +#### 问题描述 + +**严重问题**: 所有使用 `el-dialog` 和 `el-message-box` 的弹窗都出现右上角关闭按钮（❌）不显示的问题，包括： + +- 维修分类界面的新增/编辑弹窗 +- 查看详情弹窗 +- 确认对话框 +- 消息弹窗 +- 所有业务模块的弹窗 + +#### 根本原因分析 + +全局 CSS 样式中缺少对弹窗关闭按钮的强制显示配置，可能被其他样式覆盖或默认属性不生效。 + +#### 修复方案 + +**文件**: `web/src/assets/styles/art-element-ui.scss` + +**修复策略**: 采用全局强制显示策略，确保所有弹窗关闭按钮都能正常显示 + +```scss +// 全局强制显示所有弹窗关闭按钮 +.el-dialog__headerbtn, +.el-message-box__headerbtn { + display: block !important; + visibility: visible !important; + opacity: 1 !important; + position: absolute !important; + top: 6px !important; + right: 6px !important; + z-index: 1000 !important; + width: auto !important; + height: auto !important; +} + +.el-message-box__headerbtn .el-message-box__close, +.el-dialog__headerbtn .el-dialog__close { + display: block !important; + visibility: visible !important; + opacity: 1 !important; + color: var(--art-gray-500) !important; + font-size: 16px !important; + width: 16px !important; + height: 16px !important; + padding: 7px !important; + border-radius: 6px !important; + transition: all 0.3s !important; + background: transparent !important; + border: none !important; + cursor: pointer !important; + outline: none !important; + + &:hover { + background-color: rgba(var(--art-gray-200-rgb), 0.7) !important; + color: var(--art-gray-800) !important; + } + + &:focus { + outline: none !important; + } +} +``` + +#### 修复效果 + +- ✅ **强制显示**: 通过 `display: block !important` 等多重保障确保按钮显示 +- ✅ **样式完整**: 明确设置位置、尺寸、颜色、光标等所有必要属性 +- ✅ **交互正常**: 添加完整的悬浮和焦点状态样式 +- ✅ **全局生效**: 影响所有使用 el-dialog 和 el-message-box 的弹窗 +- ✅ **颜色正确**: 使用 `--art-gray-500` 变量确保主题一致性 + +#### 影响范围 + +- **全局影响**: 所有业务模块的弹窗 +- **受益模块**: 维修分类、物业报修、满意度调查、用户管理、系统设置等 +- **用户体验**: 显著提升，用户可以正常关闭弹窗 + ### 1. 技术栈版本更新 ✅ -更新了 web 前端工程的最新技术栈版本信息： +**更新了 web 前端工程的最新技术栈版本信息**： ```typescript // 更新后的技术栈 @@ -48,173 +127,233 @@ UnoCSS 66.0.0 --art-secondary: 73, 190, 255; /* 辅助色 - 天蓝色 #49beff */ --art-success: 0, 167, 58; /* 成功色 - 绿色 #00a73a */ --art-warning: 142, 91, 0; /* 警告色 - 橙色 #8e5b00 */ - --art-error: 250, 137, 107; /* 错误色 - 红色 #fa896b */ - --art-info: 0, 75, 178; /* 信息色 - 蓝色 #004bb2 */ --art-danger: 255, 77, 79; /* 危险色 - 红色 #ff4d4f */ + --art-info: 0, 75, 178; /* 信息色 - 蓝色 #004bb2 */ } /* 暗色主题 */ html.dark { --art-primary: 93, 135, 255; /* 主品牌色 - 亮蓝色 #5d87ff */ - --art-secondary: 73, 190, 255; /* 辅助色 - 天蓝色 #49beff */ - --art-success: 19, 222, 185; /* 成功色 - 绿色 #13deb9 */ - --art-warning: 255, 174, 31; /* 警告色 - 橙色 #ffae1f */ - --art-error: 250, 137, 107; /* 错误色 - 红色 #fa896b */ - --art-info: 83, 155, 255; /* 信息色 - 蓝色 #539bff */ + --art-success: 19, 222, 185; /* 成功色 - 青绿色 #13deb9 */ + --art-warning: 255, 174, 31; /* 警告色 - 橙黄色 #ffae1f */ --art-danger: 255, 77, 79; /* 危险色 - 红色 #ff4d4f */ + --art-info: 83, 155, 255; /* 信息色 - 天蓝色 #539bff */ } ``` -#### 2.2 完善灰色系统 +#### 2.2 灰度色彩体系 -新增了完整的灰色系统定义： +```css +/* 完整的灰度色彩层级（9个层级） */ +--art-gray-100: #f9f9f9; /* 最浅 - 背景色 */ +--art-gray-200: #f1f1f4; /* 浅灰 - 分割线 */ +--art-gray-300: #dbdfe9; /* 边框色 */ +--art-gray-400: #c4cada; /* 禁用文本 */ +--art-gray-500: #99a1b7; /* 占位符 */ +--art-gray-600: #78829d; /* 辅助文本 */ +--art-gray-700: #4b5675; /* 次要文本 */ +--art-gray-800: #252f4a; /* 主要文本 */ +--art-gray-900: #071437; /* 最深 - 标题 */ +``` -- `--art-gray-100` 到 `--art-gray-900` 九个等级 -- 每个等级都有对应的 RGB 值，便于透明度计算 +### 3. 按钮使用规范统一 🔘 -### 3. 按钮使用规范统一化 🔘 +#### 3.1 列表页面按钮规范（新增） -#### 3.1 列表页面按钮规范（核心变更） +| 位置 | 样式规范 | 示例 | +| ------------------------ | ---------------------- | --------------------------------------------------------------------------------- | +| **工具栏第一个新增按钮** | `type="primary" plain` | `新增` | +| **工具栏其他按钮** | 默认样式，不需要`type` | `编辑` | +| **表格操作列按钮** | `link` 类型 | `查看` | +| **弹窗确定按钮** | `type="primary"` | `确 定` | +| **弹窗取消按钮** | 默认样式 | `取 消` | -| 位置 | 按钮类型 | 样式规范 | 示例 | -| -------------------- | ---------------- | ---------------------- | -------------------------------------------------------------- | -| 工具栏第一个新增按钮 | 新增 | `type="primary" plain` | `新增` | -| 工具栏其他按钮 | 修改/删除/导出等 | 无 type（默认） | `修改` | -| 表格操作列 | 所有操作按钮 | `link type="primary"` | `` | -| 弹窗底部 | 确认按钮 | `type="primary"` | `确定` | -| 弹窗底部 | 取消按钮 | 无 type（默认） | `取消` | +#### 3.2 轮廓式按钮设计理念 -#### 3.2 标准模板代码 +**核心原则**: 所有按钮采用轮廓式设计，包括 `primary` 按钮 + +- **主色按钮**: 轮廓式，使用主色边框和背景色 +- **次要按钮**: 轮廓式，使用灰色边框 +- **危险按钮**: 轮廓式，使用红色边框 +- **链接按钮**: 纯文字，无边框 + +### 4. Art Design Pro 设计系统规范化 🎨 + +#### 4.1 设计理念 + +- **现代化**: 简洁、优雅的视觉风格 +- **用户友好**: 注重交互体验和可用性 +- **一致性**: 统一的设计语言和规范 +- **响应式**: 适配不同设备和屏幕尺寸 + +#### 4.2 组件设计规范 + +**圆角系统**: + +```css +--border-radius-xs: 4px; /* checkbox等超小元素 */ +--border-radius-sm: 6px; /* 下拉选项、关闭按钮等小元素 */ +--border-radius-md: 8px; /* input、select、button等表单控件 */ +--border-radius-lg: 12px; /* card、table、dialog等容器组件 */ +``` + +**间距系统**: + +```css +--space-xs: 4px; +--space-sm: 8px; +--space-md: 12px; +--space-lg: 16px; +--space-xl: 20px; +--space-2xl: 24px; +``` + +### 5. 开发规范文档更新 📖 + +#### 5.1 更新的文件 + +**`.cursor/cursorrules-frontend.md`** (完全重构): + +- **第 1 章**: 技术栈规范 - 最新版本信息 +- **第 2 章**: Art Design Pro UI 规范 - 设计理念和组件规范 +- **第 3 章**: 轮廓式按钮系统 - 完整的按钮使用指南 +- **第 4 章**: 品牌色和辅助色配置 - 2025 年最新配色方案 +- **第 5 章**: 组件开发规范 - 标准模板和最佳实践 +- **第 6 章**: 页面开发模板 - 列表页、表单页、详情页模板 +- **第 7 章**: API 接口规范 - 请求封装和错误处理 +- **第 8 章**: 状态管理规范 - Pinia 使用指南 +- **第 9 章**: 性能优化指南 - 代码分割、懒加载等 + +#### 5.2 新增的开发模板 + +**列表页面模板**: ```vue - -