HaHafeng
66255368b7
Features - User Management (Phase 4.1): - Database: Add user_modules table for fine-grained module permissions - Database: Add 4 user permissions (view/create/edit/delete) to role_permissions - Backend: UserService (780 lines) - CRUD with tenant isolation - Backend: UserController + UserRoutes (648 lines) - 13 API endpoints - Backend: Batch import users from Excel - Frontend: UserListPage (412 lines) - list/filter/search/pagination - Frontend: UserFormPage (341 lines) - create/edit with module config - Frontend: UserDetailPage (393 lines) - details/tenant/module management - Frontend: 3 modal components (592 lines) - import/assign/configure - API: GET/POST/PUT/DELETE /api/admin/users/* endpoints Architecture Upgrade - Module Permission System: - Backend: Add getUserModules() method in auth.service - Backend: Login API returns modules array in user object - Frontend: AuthContext adds hasModule() method - Frontend: Navigation filters modules based on user.modules - Frontend: RouteGuard checks requiredModule instead of requiredVersion - Frontend: Remove deprecated version-based permission system - UX: Only show accessible modules in navigation (clean UI) - UX: Smart redirect after login (avoid 403 for regular users) Fixes: - Fix UTF-8 encoding corruption in ~100 docs files - Fix pageSize type conversion in userService (String to Number) - Fix authUser undefined error in TopNavigation - Fix login redirect logic with role-based access check - Update Git commit guidelines v1.2 with UTF-8 safety rules Database Changes: - CREATE TABLE user_modules (user_id, tenant_id, module_code, is_enabled) - ADD UNIQUE CONSTRAINT (user_id, tenant_id, module_code) - INSERT 4 permissions + role assignments - UPDATE PUBLIC tenant with 8 module subscriptions Technical: - Backend: 5 new files (~2400 lines) - Frontend: 10 new files (~2500 lines) - Docs: 1 development record + 2 status updates + 1 guideline update - Total: ~4900 lines of code Status: User management 100% complete, module permission system operational
59 lines
3.7 KiB
Markdown
59 lines
3.7 KiB
Markdown
# **与原型图的差距**
|
||
|
||
文档目的： 修正开发实现效果（图 17.png）与产品设计稿（图 18.png）之间的视觉差距，提升产品精致度。
|
||
优先级： High (P0) \- 影响视觉体验的核心问题
|
||
|
||
## **1\. 总体布局与间距 (Global Layout & Spacing)**
|
||
|
||
设计稿强调了清晰的层级和呼吸感，而实现版本的元素过于紧凑，导致界面显得拥挤。
|
||
|
||
* **页面边距 (Page Margins):**
|
||
* **问题:** 实现版左右边距似乎过窄（或不一致），导致内容贴边。
|
||
* **修改:** 全局内容区域（Container）的左右 Padding 需要统一，建议设置为 16px 或 20px（请参考设计稿具体数值），保持视觉平衡。
|
||
* **卡片/区块间距:**
|
||
* **问题:** 列表项或卡片之间的垂直间距过小。
|
||
* **修改:** 增加卡片/列表项之间的 margin-bottom，确保内容块之间有明显的区分。
|
||
|
||
## **2\. 字体与排版 (Typography)**
|
||
|
||
这是造成视觉差异最大的部分。实现版本文字层级拉不开，重点不突出。
|
||
|
||
* **标题文字 (Headings):**
|
||
* **问题:** 实现版的标题字重（Font Weight）不足，且字号可能偏小。
|
||
* **修改:** 加大标题字重，使用 font-weight: 600 (Semi-bold) 或 bold。微调字号大小，确保与设计稿一致。
|
||
* **正文/辅助文字 (Body/Secondary Text):**
|
||
* **问题:** 辅助信息（如日期、标签、描述）颜色过深，导致与标题抢夺视线。
|
||
* **修改:**
|
||
* 将主要文字颜色调整为深灰（如 \#333333 或 \#1F2937）。
|
||
* 将辅助文字（次要信息）颜色调整为浅灰（如 \#666666 或 \#9CA3AF），拉开层级。
|
||
* **行高 (Line Height):**
|
||
* **问题:** 多行文本的行间距过密，阅读体验差。
|
||
* **修改:** 增加 line-height，建议设置为字号的 1.4 至 1.5 倍。
|
||
|
||
## **3\. 组件与视觉样式 (Components & Visual Styles)**
|
||
|
||
* **圆角 (Border Radius):**
|
||
* **问题:** 实现版的按钮、卡片或图片的圆角看起来比较直（或者圆角数值不对）。
|
||
* **修改:** 统一圆角大小。如果设计稿是 8px 或 12px，请确保 CSS 中严格执行，不要使用默认的直角。
|
||
* **阴影与边框 (Shadows & Borders):**
|
||
* **问题:** 设计稿中可能运用了轻微的投影来增加立体感，或者使用了极细的分隔线，而实现版本可能丢失了阴影，或者边框颜色过深。
|
||
* **修改:**
|
||
* 如果是卡片设计，添加轻微的 box-shadow（例如 0 2px 8px rgba(0,0,0,0.05)）。
|
||
* 分隔线颜色应更淡，建议使用 \#E5E7EB 或类似极浅灰色。
|
||
* **图片/图标 (Images & Icons):**
|
||
* **问题:** 图片比例可能失调（被拉伸或压缩），或者图标位置未居中对齐。
|
||
* **修改:**
|
||
* 图片设置 object-fit: cover 防止变形。
|
||
* 检查图标与文字的垂直对齐方式（flex 布局下使用 align-items: center）。
|
||
|
||
## **4\. 导航与顶部栏 (Navigation/Header)**
|
||
|
||
* **状态栏/顶部栏:**
|
||
* **问题:** 顶部栏的高度可能不足，或者背景色与设计稿有色差。
|
||
* **修改:** 校验顶部栏高度（Height），确保标题文字在垂直方向绝对居中。
|
||
|
||
### **修改建议总结 (Action Items for Engineers)**
|
||
|
||
1. **CSS 变量化:** 建议将设计稿中的**主色、辅色、字号标准、圆角值**定义为 CSS 变量（Variables），避免硬编码（Hard-coding），防止不一致。
|
||
2. **Flexbox 对齐:** 检查所有列表项，确保使用 display: flex 并正确设置 align-items: center，解决图标与文字的高低差问题。
|
||
3. **盒子模型检查:** 打开浏览器开发者工具，逐个核对 Padding 和 Margin 值，不要凭感觉估算。 |