feat(pkb): Complete PKB module frontend migration with V3 design
Summary: - Implement PKB Dashboard and Workspace pages based on V3 prototype - Add single-layer header with integrated Tab navigation - Implement 3 work modes: Full Text, Deep Read, Batch Processing - Integrate Ant Design X Chat component for AI conversations - Create BatchModeComplete with template selection and document processing - Add compact work mode selector with dropdown design Backend: - Migrate PKB controllers and services to /modules/pkb structure - Register v2 API routes at /api/v2/pkb/knowledge - Maintain dual API routes for backward compatibility Technical details: - Use Zustand for state management - Handle SSE streaming responses for AI chat - Support document selection for Deep Read mode - Implement batch processing with progress tracking Known issues: - Batch processing API integration pending - Knowledge assets page navigation needs optimization Status: Frontend functional, pending refinement
This commit is contained in:
59
docs/03-业务模块/PKB-个人知识库/05-测试文档/与原型图的差距.md
Normal file
59
docs/03-业务模块/PKB-个人知识库/05-测试文档/与原型图的差距.md
Normal file
@@ -0,0 +1,59 @@
|
||||
# **与原型图的差距**
|
||||
|
||||
文档目的: 修正开发实现效果(图 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 值,不要凭感觉估算。
|
||||
Reference in New Issue
Block a user