feat(aia): Complete AIA V2.0 with universal streaming capabilities
Major Changes: - Add StreamingService with OpenAI Compatible format - Upgrade Chat component V2 with Ant Design X integration - Implement AIA module with 12 intelligent agents - Update API routes to unified /api/v1 prefix - Update system documentation Backend (~1300 lines): - common/streaming: OpenAI Compatible adapter - modules/aia: 12 agents, conversation service, streaming integration - Update route versions (RVW, PKB to v1) Frontend (~3500 lines): - modules/aia: AgentHub + ChatWorkspace (100% prototype restoration) - shared/Chat: AIStreamChat, ThinkingBlock, useAIStream Hook - Update API endpoints to v1 Documentation: - AIA module status guide - Universal capabilities catalog - System overview updates - All module documentation sync Tested: Stream response verified, authentication working Status: AIA V2.0 core completed (85%)
This commit is contained in:
@@ -1,59 +1,52 @@
|
||||
# **与原型图的差距**
|
||||
# **荳主次蝙句崟逧<EFBFBD>ｷｮ霍?*
|
||||
|
||||
文档目的： 修正开发实现效果（图 17.png）与产品设计稿（图 18.png）之间的视觉差距，提升产品精致度。
|
||||
优先级： High (P0) \- 影响视觉体验的核心问题
|
||||
|
||||
## **1\. 总体布局与间距 (Global Layout & Spacing)**
|
||||
|
||||
设计稿强调了清晰的层级和呼吸感，而实现版本的元素过于紧凑，导致界面显得拥挤。
|
||||
譁<EFBFBD>｡｣逶ｮ逧<EFBFBD>ｼ?菫ｮ豁｣蠑蜿大ｮ樒鴫謨域棡<E59F9F>亥<EFBFBD>?17.png<6E>我ｸ惹ｺｧ蜩∬ｮｾ隶｡遞ｿ<E9819E>亥<EFBFBD>?18.png<6E>我ｹ矩龍逧<E9BE8D>ｧ<EFBFBD>ｧ牙ｷｮ霍晢ｼ梧署蜊<E7BDB2>ｺｧ蜩∫ｲｾ閾ｴ蠎ｦ縲?
|
||||
莨伜<EFBFBD>郤ｧ<EFBFBD><EFBFBD> High (P0) \- 蠖ｱ蜩崎ｧ<EFBFBD>ｧ我ｽ馴ｪ檎噪譬ｸ蠢<EFBFBD>琉鬚?
|
||||
## **1\. 諤ｻ菴灘ｸ<E78198>ｱ荳朱龍霍?(Global Layout & Spacing)**
|
||||
|
||||
隶ｾ隶｡遞ｿ蠑ｺ隹<EFBFBD>ｺ<EFBFBD>ｸ<EFBFBD>匆逧<EFBFBD>ｱらｺｧ蜥悟他蜷ｸ諢滂ｼ瑚悟ｮ樒鴫迚域悽逧<EFBFBD><EFBFBD>邏<EFBFBD>霑<EFBFBD>ｺ守ｴｧ蜃托ｼ悟ｯｼ閾ｴ逡碁擇譏ｾ蠕玲凶謖､縲?
|
||||
* **鬘ｵ髱｢霎ｹ霍<EFBDB9> (Page Margins):**
|
||||
* **问题:** 实现版左右边距似乎过窄（或不一致），导致内容贴边。
|
||||
* **修改:** 全局内容区域（Container）的左右 Padding 需要统一，建议设置为 16px 或 20px（请参考设计稿具体数值），保持视觉平衡。
|
||||
* **髣ｮ鬚<EFBFBD>:** 螳樒鴫迚亥ｷｦ蜿ｳ霎ｹ霍昜ｼｼ荵手ｿ<E6898B>ｪ<EFBFBD>ｼ域<EFBDBC>荳堺ｸ閾ｴ<E996BE>会ｼ悟ｯｼ閾ｴ蜀<EFBDB4>ｮｹ雍ｴ霎ｹ縲?
|
||||
* **菫ｮ謾ｹ:** 蜈ｨ螻蜀<C280>ｮｹ蛹ｺ蝓滂ｼ<E6BB82>ontainer<EFBFBD>臥噪蟾ｦ蜿ｳ Padding 髴隕∫ｻ滉ｸ<EFBFBD>悟ｻｺ隶ｮ隶ｾ鄂ｮ荳ｺ 16px 謌?20px<EFBFBD>郁ｯｷ蜿り<EFBFBD>ｮｾ隶｡遞ｿ蜈ｷ菴捺焚蛟ｼ<EFBFBD>会ｼ御ｿ晄戟隗<EFBFBD>ｧ牙ｹｳ陦｡縲?
|
||||
* **蜊｡迚<EFBDA1>/蛹ｺ蝮鈴龍霍<E9BE8D>:**
|
||||
* **问题:** 列表项或卡片之间的垂直间距过小。
|
||||
* **修改:** 增加卡片/列表项之间的 margin-bottom，确保内容块之间有明显的区分。
|
||||
|
||||
## **2\. 字体与排版 (Typography)**
|
||||
|
||||
这是造成视觉差异最大的部分。实现版本文字层级拉不开，重点不突出。
|
||||
* **髣ｮ鬚<EFBFBD>:** 蛻苓｡ｨ鬘ｹ謌門今迚<E4BB8A>ｹ矩龍逧<E9BE8D>桙逶ｴ髣ｴ霍晁ｿ<E69981>ｰ上?
|
||||
* **菫ｮ謾ｹ:** 蠅槫刈蜊｡迚<EFBDA1>/蛻苓｡ｨ鬘ｹ荵矩龍逧<E9BE8D> margin-bottom<6F>檎｡ｮ菫晏<E88FAB>螳ｹ蝮嶺ｹ矩龍譛画<E8AD9B>譏ｾ逧<EFBDBE>玄蛻<E78E84>?
|
||||
## **2\. 蟄嶺ｽ謎ｸ取賜迚?(Typography)**
|
||||
|
||||
霑呎弍騾<EFBFBD>謌占ｧ<EFBFBD>ｧ牙ｷｮ蠑よ怙螟ｧ逧<EFBFBD>Κ蛻<EFBFBD>ょｮ樒鴫迚域悽譁<EFBFBD>ｭ怜ｱらｺｧ諡我ｸ榊ｼ<EFBFBD>碁㍾轤ｹ荳咲ｪ∝<EFBFBD>縲?
|
||||
* **譬<>｢俶枚蟄<E69E9A> (Headings):**
|
||||
* **问题:** 实现版的标题字重（Font Weight）不足，且字号可能偏小。
|
||||
* **修改:** 加大标题字重，使用 font-weight: 600 (Semi-bold) 或 bold。微调字号大小，确保与设计稿一致。
|
||||
* **髣ｮ鬚<EFBFBD>:** 螳樒鴫迚育噪譬<E599AA>｢伜ｭ鈴㍾<E988B4><E38DBE>ont Weight<68>我ｸ崎ｶｳ<EFBDB6>御ｸ泌ｭ怜捷蜿ｯ閭ｽ蛛丞ｰ上?
|
||||
* **菫ｮ謾ｹ:** 蜉<>螟ｧ譬<EFBDA7>｢伜ｭ鈴㍾<E988B4>御ｽｿ逕?font-weight: 600 (Semi-bold) 謌?bold縲ょｾｮ隹<EFBFBD>ｭ怜捷螟ｧ蟆擾ｼ檎｡ｮ菫昜ｸ手ｮｾ隶｡遞ｿ荳閾ｴ縲?
|
||||
* **豁｣譁<EFBDA3>/霎<>勧譁<E58BA7>ｭ<EFBFBD> (Body/Secondary Text):**
|
||||
* **问题:** 辅助信息（如日期、标签、描述）颜色过深，导致与标题抢夺视线。
|
||||
* **髣ｮ鬚<EFBFBD>:** 霎<>勧菫｡諱ｯ<E8ABB1>亥ｦよ律譛溘∵<C280><E288B5>ｭｾ縲∵緒霑ｰ<E99C91>蛾｢懆牡霑<E789A1>ｷｱ<EFBDB7>悟ｯｼ閾ｴ荳取<E88DB3><E58F96>｢俶瓦螟ｺ隗<EFBDBA>ｺｿ縲?
|
||||
* **菫ｮ謾ｹ:**
|
||||
* 将主要文字颜色调整为深灰（如 \#333333 或 \#1F2937）。
|
||||
* 将辅助文字（次要信息）颜色调整为浅灰（如 \#666666 或 \#9CA3AF），拉开层级。
|
||||
* 蟆<EFBFBD>ｸｻ隕∵枚蟄鈴｢懆牡隹<EFBFBD>紛荳ｺ豺ｱ轣ｰ<EFBFBD>亥ｦ<EFBFBD> \#333333 謌?\#1F2937<EFBFBD>峨?
|
||||
* 蟆<EFBFBD>ｾ<EFBFBD>勧譁<EFBFBD>ｭ暦ｼ域ｬ｡隕∽ｿ｡諱ｯ<EFBFBD>蛾｢懆牡隹<EFBFBD>紛荳ｺ豬<EFBFBD><EFBFBD><EFBFBD>亥ｦ<EFBFBD> \#666666 謌?\#9CA3AF<EFBFBD>会ｼ梧級蠑螻らｺｧ縲?
|
||||
* **陦碁ｫ<E7A281> (Line Height):**
|
||||
* **问题:** 多行文本的行间距过密，阅读体验差。
|
||||
* **修改:** 增加 line-height，建议设置为字号的 1.4 至 1.5 倍。
|
||||
|
||||
## **3\. 组件与视觉样式 (Components & Visual Styles)**
|
||||
* **髣ｮ鬚<EFBFBD>:** 螟夊｡梧枚譛ｬ逧<EFBDAC>｡碁龍霍晁ｿ<E69981>ｯ<EFBFBD>ｼ碁<EFBDBC>隸ｻ菴馴ｪ悟ｷｮ縲?
|
||||
* **菫ｮ謾ｹ:** 蠅槫刈 line-height<EFBFBD>悟ｻｺ隶ｮ隶ｾ鄂ｮ荳ｺ蟄怜捷逧?1.4 閾?1.5 蛟阪?
|
||||
## **3\. 扈<>ｻｶ荳手ｧ<E6898B>ｧ画<EFBDA7>ｷ蠑?(Components & Visual Styles)**
|
||||
|
||||
* **蝨<>ｧ<EFBFBD> (Border Radius):**
|
||||
* **问题:** 实现版的按钮、卡片或图片的圆角看起来比较直（或者圆角数值不对）。
|
||||
* **修改:** 统一圆角大小。如果设计稿是 8px 或 12px，请确保 CSS 中严格执行，不要使用默认的直角。
|
||||
* **阴影与边框 (Shadows & Borders):**
|
||||
* **问题:** 设计稿中可能运用了轻微的投影来增加立体感，或者使用了极细的分隔线，而实现版本可能丢失了阴影，或者边框颜色过深。
|
||||
* **髣ｮ鬚<EFBFBD>:** 螳樒鴫迚育噪謖蛾聴縲∝今迚<E4BB8A><E8BF9A>蝗ｾ迚<EFBDBE>噪蝨<E599AA>ｧ堤恚襍ｷ譚･豈碑ｾ<E7A291>峩<EFBFBD>域<EFBFBD>閠<EFBFBD>怕隗呈焚蛟ｼ荳榊ｯｹ<EFBDAF>峨?
|
||||
* **菫ｮ謾ｹ:** 扈滉ｸ蝨<C280>ｧ貞､ｧ蟆上ょｦよ棡隶ｾ隶｡遞ｿ譏?8px 謌?12px<EFBFBD>瑚ｯｷ遑ｮ菫<EFBFBD> CSS 荳ｭ荳･譬ｼ謇ｧ陦鯉ｼ御ｸ崎ｦ∽ｽｿ逕ｨ鮟倩ｮ､逧<EFBDA4>峩隗偵?
|
||||
* **髦ｴ蠖ｱ荳手ｾｹ譯?(Shadows & Borders):**
|
||||
* **髣ｮ鬚<EFBFBD>:** 隶ｾ隶｡遞ｿ荳ｭ蜿ｯ閭ｽ霑千畑莠<E79591>ｽｻ蠕ｮ逧<EFBDAE>兜蠖ｱ譚･蠅槫刈遶倶ｽ捺─<E68DBA>梧<EFBFBD>閠<EFBFBD>ｽｿ逕ｨ莠<EFBDA8>栫扈<E6A0AB>噪蛻<E599AA>囈郤ｿ<E983A4>瑚悟ｮ樒鴫迚域悽蜿ｯ閭ｽ荳｢螟ｱ莠<EFBDB1>亢蠖ｱ<E8A096>梧<EFBFBD>閠<EFBFBD>ｾｹ譯<EFBDB9>｢懆牡霑<E789A1>ｷｱ縲?
|
||||
* **菫ｮ謾ｹ:**
|
||||
* 如果是卡片设计，添加轻微的 box-shadow（例如 0 2px 8px rgba(0,0,0,0.05)）。
|
||||
* 分隔线颜色应更淡，建议使用 \#E5E7EB 或类似极浅灰色。
|
||||
* 螯よ棡譏ｯ蜊｡迚<EFBFBD>ｮｾ隶｡<EFBFBD>梧ｷｻ蜉<EFBFBD>霓ｻ蠕ｮ逧?box-shadow<EFBFBD>井ｾ句ｦ?0 2px 8px rgba(0,0,0,0.05)<EFBFBD>峨?
|
||||
* 蛻<EFBFBD>囈郤ｿ鬚懆牡蠎疲峩豺｡<EFBFBD>悟ｻｺ隶ｮ菴ｿ逕?\#E5E7EB 謌也ｱｻ莨ｼ譫∵ｵ<E288B5><EFBDB5>濶ｲ縲?
|
||||
* **蝗ｾ迚<EFBDBE>/蝗ｾ譬<EFBDBE> (Images & Icons):**
|
||||
* **问题:** 图片比例可能失调（被拉伸或压缩），或者图标位置未居中对齐。
|
||||
* **髣ｮ鬚<EFBFBD>:** 蝗ｾ迚<EFBDBE>ｯ比ｾ句庄閭ｽ螟ｱ隹<EFBDB1>ｼ郁｢ｫ諡我ｼｸ謌門視郛ｩ<E9839B>会ｼ梧<EFBDBC>閠<EFBFBD>崟譬<E5B49F>ｽ咲ｽｮ譛ｪ螻<EFBDAA>ｸｭ蟇ｹ鮨舌?
|
||||
* **菫ｮ謾ｹ:**
|
||||
* 图片设置 object-fit: cover 防止变形。
|
||||
* 检查图标与文字的垂直对齐方式（flex 布局下使用 align-items: center）。
|
||||
|
||||
* 蝗ｾ迚<EFBFBD>ｮｾ鄂ｮ object-fit: cover 髦ｲ豁｢蜿伜ｽ｢縲?
|
||||
* 譽譟･蝗ｾ譬<EFBFBD>ｸ取枚蟄礼噪蝙ら峩蟇ｹ鮨先婿蠑擾ｼ<EFBFBD>lex 蟶<>ｱ荳倶ｽｿ逕?align-items: center<EFBFBD>峨?
|
||||
## **4\. 蟇ｼ闊ｪ荳朱｡ｶ驛ｨ譬<EFBDA8> (Navigation/Header)**
|
||||
|
||||
* **状态栏/顶部栏:**
|
||||
* **问题:** 顶部栏的高度可能不足，或者背景色与设计稿有色差。
|
||||
* **修改:** 校验顶部栏高度（Height），确保标题文字在垂直方向绝对居中。
|
||||
|
||||
* **迥ｶ諤∵<EFBFBD><EFBFBD>/鬘ｶ驛ｨ譬?**
|
||||
* **髣ｮ鬚<EFBFBD>:** 鬘ｶ驛ｨ譬冗噪鬮伜ｺｦ蜿ｯ閭ｽ荳崎ｶｳ<EFBDB6>梧<EFBFBD>閠<EFBFBD>レ譎ｯ濶ｲ荳手ｮｾ隶｡遞ｿ譛芽牡蟾ｮ縲?
|
||||
* **菫ｮ謾ｹ:** 譬｡鬪碁｡ｶ驛ｨ譬城ｫ伜ｺｦ<EFBDBA><EFBDA6>eight<68>会ｼ檎｡ｮ菫晄<E88FAB><E69984>｢俶枚蟄怜惠蝙ら峩譁ｹ蜷醍ｻ晏ｯｹ螻<EFBDB9>ｸｭ縲?
|
||||
### **菫ｮ謾ｹ蟒ｺ隶ｮ諤ｻ扈<EFBDBB> (Action Items for Engineers)**
|
||||
|
||||
1. **CSS 变量化:** 建议将设计稿中的**主色、辅色、字号标准、圆角值**定义为 CSS 变量（Variables），避免硬编码（Hard-coding），防止不一致。
|
||||
2. **Flexbox 对齐:** 检查所有列表项，确保使用 display: flex 并正确设置 align-items: center，解决图标与文字的高低差问题。
|
||||
3. **盒子模型检查:** 打开浏览器开发者工具，逐个核对 Padding 和 Margin 值，不要凭感觉估算。
|
||||
1. **CSS 蜿倬㍼蛹?** 蟒ｺ隶ｮ蟆<EFBFBD>ｮｾ隶｡遞ｿ荳ｭ逧<EFBFBD>**荳ｻ濶ｲ縲∬ｾ<E288AC>牡縲∝ｭ怜捷譬<E68DB7>㊥縲∝怕隗貞?*螳壻ｹ我ｸ?CSS 蜿倬㍼<E580AC><E38DBC>ariables<65>会ｼ碁∩蜈咲｡ｬ郛也<E9839B><E4B99F>ｼ<EFBFBD>ard-coding<6E>会ｼ碁亟豁｢荳堺ｸ閾ｴ縲?
|
||||
2. **Flexbox 蟇ｹ鮨<EFBFBD>:** 譽譟･謇譛牙<EFBFBD>陦ｨ鬘ｹ<EFBFBD>檎｡ｮ菫昜ｽｿ逕?display: flex 蟷ｶ豁｣遑ｮ隶ｾ鄂?align-items: center<EFBFBD>瑚ｧ｣蜀ｳ蝗ｾ譬<EFBFBD>ｸ取枚蟄礼噪鬮倅ｽ主ｷｮ髣ｮ鬚倥?
|
||||
3. **逶貞ｭ先ｨ｡蝙区｣譟?** 謇灘ｼ豬剰ｧ亥勣蠑蜿題<E9A18C>ｷ･蜈ｷ<E89C88>碁蝉ｸｪ譬ｸ蟇ｹ Padding 蜥?Margin 蛟ｼ<EFBFBD>御ｸ崎ｦ∝<EFBFBD>諢溯ｧ我ｼｰ邂励
|
||||
Reference in New Issue
Block a user