Files
AIclinicalresearch/docs/08-项目管理/PKB精细化优化报告.md
HaHafeng 1b53ab9d52 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%)
2026-01-14 19:15:01 +08:00

598 lines
14 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# PKB<4B>滨垢蝎曄<E89D8E><E69B84><EFBFBD><E7A2B6>𡝗𥁒<F0A19D97>?
## <20><> 隡睃<E99AA1><EFBFBD><E79281>
**隡睃<E99AA1><E79D83>園𡢿**: 2026-01-06
**隡睃<E99AA1>靘脲旿**: `銝𤾸<E98A9D><F0A4BEB8>见㦛<E8A781><E3A69B>榆頝?md` <20><>
**隡睃<E99AA1><E79D83><EFBFBD>**: <20>𣂼<EFBFBD>鈭批<E988AD>蝎曇稲摨佗<E691A8>100%餈睃<E9A488>霈曇恣蝔?
**隡睃<E99AA1><E79D83><EFBFBD>?*: <20>?**撌脣<E6928C><E884A3>?*
---
## <20>㴓 隡睃<E99AA1>靘脲旿<E884B2><E697BF><EFBFBD>
<EFBFBD>寞旿撌株<EFBFBD><EFBFBD><EFBFBD>﹝嚗䔶蜓閬<EFBFBD>䔮憸㗛<EFBFBD>銝剖銁隞乩<EFBFBD>4銝芣䲮<EFBFBD><EFBFBD>
### 1. <20><EFBFBD><EFBFBD><E692A3>銝𡡞𡢿頝?
- <20>?憿菟𢒰颲寡<E9A2B2><EFBFBD><E9A488><EFBFBD><EFBFBD><EFBFBD><E98A9D>?
- <20>?<3F><EFBFBD>/<2F><EFBFBD><E7AE8F><EFBFBD><EFBFBD><E9A488>
- <20>?<3F><>捆韐渲器嚗𣬚撩銋誩鐤<E8AAA9><EFBFBD>
### 2. 摮𦯀<E691AE>銝擧<E98A9D><E693A7>?
- <20>?<3F><><EFBFBD>摮烾<E691AE>銝滩雲
- <20>?颲<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>憸𡏭𠧧餈<F0A0A7A7>
- <20>?銵屸<E98AB5><EFBFBD><E9A488>
### 3. 蝏<>辣銝舘<E98A9D>閫㗇甅撘?
- <20>?<3F><><EFBFBD>銝滨<E98A9D><EFBFBD>
- <20>?蝻箏<E89DBB>頧餃凝<E9A483>游蔣
- <20>?颲寞<E9A2B2>憸𡏭𠧧餈<F0A0A7A7>
### 4. 撖潸⏛銝𡡞▲<F0A1A19E><EFBFBD>
- <20>?憿園<E686BF><E59C92><EFBFBD>摨虫<E691A8>頞?
- <20>?<3F><><EFBFBD><EFBFBD><EFBFBD><E88AB8><EFBFBD>銝?
---
## <20>?隡睃<E99AA1>摰墧鴌霂行<E99C82>
### 1儭謿<E584AD> 摮𦯀<E691AE>銝擧<E98A9D><E693A7><EFBFBD><EFBFBD><EFBFBD>?
#### <20><><EFBFBD>摮烾<E691AE><E783BE><EFBFBD>
```tsx
// 靽格㺿<E6A0BC>?
<span className="font-bold text-slate-800"><EFBFBD><EFBFBD><EFBFBD><EFBFBD></span>
// 靽格㺿<E6A0BC>?
<span className="font-semibold text-slate-800 text-sm"><EFBFBD><EFBFBD><EFBFBD><EFBFBD></span>
```
**<EFBFBD><EFBFBD><EFBFBD>?*:
- `font-bold` (700) <20>?`font-semibold` (600)嚗𡁏凒<F0A1818F><EFBFBD>
- 蝏煺<E89D8F>摮堒噡銝?`text-sm` (14px)
#### 颲<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>憸𡏭𠧧隡睃<E99AA1>
```tsx
// 靽格㺿<E6A0BC>?
<div className="text-xs text-gray-500 ml-6 mt-1">
// 靽格㺿<E6A0BC>?
<div className="text-xs text-slate-500 ml-6 leading-relaxed">
```
**憸𡏭𠧧撅<F0A0A7A7>**:
- 銝餅<E98A9D>憸矋<E686B8>`text-slate-800` (#1F2937)
- <20><EFBFBD>憸矋<E686B8>`text-slate-700` (#334155)
-<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>嚗䫤text-slate-500` (#64748B)
- 甈∟<E79488>靽⊥<E99DBD>嚗䫤text-slate-400` (#94A3B8)
#### 銵屸<E98AB5>隡睃<E99AA1>
```tsx
// 瘛餃<E7989B> leading-relaxed (line-height: 1.625)
<p className="text-sm text-slate-500 mt-1.5 leading-relaxed">
<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> MinerU <EFBFBD><EFBFBD><EFBFBD><EFBFBD>?
</p>
```
---
### 2儭謿<E584AD> <20><EFBFBD>蝏煺<E89D8F>隡睃<E99AA1>
#### <20><EFBFBD>摰孵膥<E5ADB5><EFBFBD>
```tsx
// 靽格㺿<E6A0BC>?
<div className="p-3 border-b border-gray-100 flex-shrink-0">
// 靽格㺿<E6A0BC>?
<div className="px-5 py-4 border-b border-gray-100 flex-shrink-0 bg-white">
```
**<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>**:
| <20>箸艶 | 瘞游像padding | <20><>凒padding |
|------|------------|------------|
| 撌乩<E6928C><E79285><E288AA>㗇𥋘<E39787>?| px-5 (20px) | py-4 (16px) |
| Alert<72>鞟內獢?| px-6 (24px) | py-5 (20px) |
| Chat<61><74><EFBFBD>?| px-6 (24px) | py-4 (16px) |
| <20><EFBFBD><EFBFBD>漣憿?| p-6 (24px) | - |
#### <20><EFBFBD><E288A0><EFBFBD>隡睃<E99AA1>
```tsx
// Radio.Group<75><EFBFBD>
<Radio.Group className="w-full space-y-4"> {/* space-y-3 <20>?space-y-4 */}
```
**<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>**:
- `space-y-4`: 16px嚗㇌adio<69>厰★<E58EB0><EFBFBD>
- `mb-5`: 20px嚗<78><EFBFBD><EFBCB7>烾𡢿嚗?
- `mt-1.5`: 6px嚗<78><E59A97>憸䀝<E686B8><E4809D>讛膩<E8AE9B><EFBFBD>
---
### 3儭謿<E584AD> 颲寞<E9A2B2>銝𤾸<E98A9D>閫雴<E996AB><E99BB4>?
#### 颲寞<E9A2B2>憸𡏭𠧧靚<F0A0A7A7>
```tsx
// 靽格㺿<E6A0BC>?
border-gray-200 // #E5E7EB
// 靽格㺿<E6A0BC>?
border-gray-100 // #F3F4F6
```
**颲寞<E9A2B2><EFBFBD>**:
- 銝餉<E98A9D><E9A489><EFBFBD><EFBFBD>嚗䫤border-gray-200`
- 頧餃凝<E9A483><E5879D><EFBFBD>嚗䫤border-gray-100`
- Tab<61><62><EFBFBD>嚗䫤border-gray-100`
#### <20><><EFBFBD>蝏煺<E89D8F>
```tsx
// 蝏煺<E89D8F>雿輻鍂 rounded-lg (8px)
<div className="bg-white border border-gray-100 rounded-lg shadow-sm">
```
**<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>**:
| 蝏<>辣 | <20><><EFBFBD><EFBFBD>?| Class |
|------|--------|-------|
| <20><EFBFBD>/<2F>踎 | 8px | `rounded-lg` |
| <20>厰僼 | 8px | `rounded-lg` |
| 颲枏<E9A2B2>獢?| 12px | `rounded-xl` |
| 憭游<E686AD>/<2F><EFBFBD>摰孵膥 | 8px | `rounded-lg` |
| <20><EFBFBD><E59786>噬蝡?| 6px | `rounded-md` |
---
### 4儭謿<E584AD> <20>游蔣隡睃<E99AA1>
#### 瘛餃<E7989B>頧餃凝<E9A483>游蔣
```tsx
// 銵冽聢摰孵膥
<div className="bg-white border border-gray-100 rounded-lg shadow-sm">
// <20>厰僼嚗<E583BC>蜓閬<E89C93><E996AC>雿頣<E99BBF>
<Button type="primary" size="large" className="shadow-md font-medium">
```
**<EFBFBD>游蔣撅<EFBFBD>漣**:
```css
shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05) /* 頧餃凝<E9A483>游蔣 */
shadow: 0 1px 3px rgba(0, 0, 0, 0.1) /* <20><><EFBFBD><EFBFBD>游蔣 */
shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1) /* 銝剔<E98A9D><E58994>游蔣 */
```
---
### 5儭謿<E584AD> Tab撖潸⏛隡睃<E99AA1>
#### 擃睃漲<E79D83>屸𡢿頝萘移靚?
```tsx
// 靽格㺿<E6A0BC>?
<div className="... px-6 flex items-center shadow-sm z-20 h-14 flex-shrink-0">
<div className="flex space-x-8 h-full">
// 靽格㺿<E6A0BC>?
<div className="... px-6 flex items-center z-20 h-12 flex-shrink-0">
<div className="flex space-x-6 h-full"> {/* space-x-8 <20>?space-x-6 */}
```
**Tab閫<62><E996AB>**:
- 擃睃漲嚗䫤h-12` (48px)
- Tab<61><EFBFBD>嚗䫤space-x-6` (24px)
- <20><EFBFBD>憭批<E686AD>嚗䫤w-4 h-4` (16px)
- 摮堒噡嚗䫤text-sm` (14px)
-<>瘣餌𠶖<E9A48C><F0A0B696><EFBFBD>`font-semibold` + `border-blue-600`
---
### 6儭謿<E584AD> 撌乩<E6928C><E79285><E288AA>㗇𥋘<E39787><EFBFBD><E585B6>?
#### Collapse蝏<65>辣蝎曄<E89D8E><E69B84>?
```tsx
// 靽格㺿<E6A0BC>?
<Collapse className="mb-4 bg-white border border-gray-200 rounded-xl shadow-sm">
<Collapse.Panel header={<div className="font-bold text-slate-800"><EFBFBD><EFBFBD> <EFBFBD><EFBFBD></div>}>
// 靽格㺿<E6A0BC>?
<Collapse className="bg-white border border-gray-100 rounded-lg shadow-sm" bordered={false}>
<Collapse.Panel header={
<div className="font-semibold text-slate-800 text-sm flex items-center">
<span className="text-base mr-2"><EFBFBD><EFBFBD></span>
<EFBFBD><EFBFBD>
</div>
}>
```
**<EFBFBD><EFBFBD><EFBFBD>?*:
- 颲寞<E9A2B2>憸𡏭𠧧嚗䫤border-gray-200` <20>?`border-gray-100`
- <20><><EFBFBD>嚗䫤rounded-xl` <20>?`rounded-lg`
- <20><><EFBFBD>摮烾<E691AE>嚗䫤font-bold` <20>?`font-semibold`
- 瘛餃<E7989B> `bordered={false}` 蝘駁膄Ant Design暺䁅恕颲寞<E9A2B2>
#### Radio<69>厰★隡睃<E99AA1>
```tsx
// 瘥譍葵Radio<69>厰★<E58EB0><E29885><EFBFBD>憸睃<E686B8><E79D83>讛膩<E8AE9B><EFBFBD>
<div className="flex items-center mb-1.5"> {/* 瘛餃<E7989B>mb-1.5 */}
<Globe className="w-4 h-4 mr-2 text-blue-600" />
<span className="font-semibold text-slate-800 text-sm"><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD></span>
</div>
<div className="text-xs text-slate-500 ml-6 leading-relaxed">
<EFBFBD><EFBFBD><EFBFBD> {kbInfo.fileCount} <EFBFBD><EFBFBD><EFBFBD><EFBFBD>AI<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
</div>
```
---
### 7儭謿<E584AD> Progress餈𥕦漲<F0A595A6><EFBFBD><E288A9>?
#### <20>臬耦餈𥕦漲<F0A595A6>∠移蝏<E7A7BB><E89D8F><EFBFBD>?
```tsx
// 靽格㺿<E6A0BC>?
<Progress
type="circle"
percent={calculateTokenUsage()}
width={40}
strokeColor="#3b82f6"
/>
// 靽格㺿<E6A0BC>?
<Progress
type="circle"
percent={calculateTokenUsage()}
width={42} // 蝔滚之銝<E4B98B><E98A9D>?
strokeColor="#3b82f6"
trailColor="#e5e7eb" // 頧券<E9A0A7>憸𡏭𠧧
strokeWidth={8} // 蝥踵辺摰賢漲
/>
```
---
### 8儭謿<E584AD> Alert<72>鞟內獢<E585A7><E78DA2><EFBFBD>?
#### 蝏𤘪<E89D8F><F0A498AA>峕甅撘讐移蝏<E7A7BB><E89D8F>
```tsx
// 靽格㺿<E6A0BC>?
<Alert
message="<22><> <20><EFBFBD><E586BD><EFBFBD>粉璅<E79285>嚗𡁜歇<F0A1819C>㰘蝸 X 蝭<><E89DAD><EFBFBD><E78DA2><EFBFBD>?
description="AI撠<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>?
type="info"
/>
// 靽格㺿<E6A0BC>?
<Alert
message={
<span className="font-semibold text-sm">
<EFBFBD><EFBFBD> <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>𡁜<EFBFBD> {documents.length} <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>?
</span>
}
description={
<span className="text-xs text-slate-600 leading-relaxed">
AI撠<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>𠉛<EFBFBD><EFBFBD>
</span>
}
type="info"
className="border-blue-100 bg-blue-50/50"
/>
```
**<EFBFBD><EFBFBD><EFBFBD>?*:
- <20><><EFBFBD><EFBFBD><EFBFBD>嚗䫤font-semibold`
- <20>讛膩<E8AE9B><E886A9><EFBFBD>嚗䫤text-xs text-slate-600 leading-relaxed`
- <20>峕艶隡睃<E99AA1>嚗䫤bg-blue-50/50` (50%<25>𤩺<EFBFBD>摨?
- 颲寞<E9A2B2>隡睃<E99AA1>嚗䫤border-blue-100`
---
### 9儭謿<E584AD> 銵冽聢隡睃<E99AA1>
#### <20><EFBFBD><E59786>噬蝡𣳇<E89DA1><F0A3B387>?
```tsx
// 靽格㺿<E6A0BC>?
<span className="... bg-green-50 text-green-700 border border-green-100">
// 靽格㺿<E6A0BC>?
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium border bg-green-50 text-green-700 border-green-200">
<CheckCircle2 className="w-3 h-3" />
<span className="ml-1.5"><EFBFBD><EFBFBD><EFBFBD></span>
</span>
```
**<EFBFBD><EFBFBD><EFBFBD>?*:
- padding憓𧼮<E68693>嚗䫤px-2 py-0.5` <20>?`px-2.5 py-1`
- <20><><EFBFBD>嚗䫤rounded` <20>?`rounded-md`
- <20><EFBFBD><E69AB9><EFBFBD>嚗䫤mr-1` <20>?`ml-1.5`
- 颲寞<E9A2B2>憸𡏭𠧧<F0A18FAD>䭾楛嚗䫤border-green-100` <20>?`border-green-200`
#### 銵冽聢<E586BD><EFBFBD>隡睃<E99AA1>
```tsx
<Table
size="middle" // 瘛餃<E7989B>size
className="pkb-document-table" // 瘛餃<E7989B><E9A483><EFBFBD>銋実lass
columns={[
{
title: '<EFBFBD><EFBFBD><EFBFBD>?,
render: (text) => (
<div className="flex items-center py-1"> {/* 瘛餃<E7989B>py-1 */}
<div className="w-9 h-9 bg-red-50 text-red-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
<FileText className="w-5 h-5" />
</div>
<span className="font-semibold text-slate-700 text-sm">{text}</span>
</div>
),
},
]}
/>
```
**<EFBFBD><EFBFBD>銋攊SS**:
```css
/* workspace.css */
.pkb-document-table .ant-table-thead > tr > th {
background-color: #f9fafb; /* 銵典仍<E585B8>峕艶 */
color: #6b7280; /* 銵典仍<E585B8><E4BB8D><EFBFBD> */
font-weight: 600; /* 摮烾<E691AE> */
padding: 14px 16px; /* <20><>器頝?*/
border-bottom: 1px solid #e5e7eb;
}
.pkb-document-table .ant-table-tbody > tr > td {
padding: 16px; /* <20><EFBFBD><E8A8AB>廚adding */
border-bottom: 1px solid #f3f4f6;
}
.pkb-document-table .ant-table-tbody > tr:hover > td {
background-color: #f9fafb; /* <20><EFBFBD><E7A08D>峕艶 */
}
```
---
### <20><> <20>峕艶憸𡏭𠧧隡睃<E99AA1>
#### 憭𡁜<E686AD>甈∟<E79488><E2889F>?
```tsx
// 憭硋<E686AD>摰孵膥嚗𡁏<E59A97><F0A1818F><EFBFBD><E59597>?
<div className="h-full flex overflow-hidden bg-gray-50">
// Chat<61><EFBFBD>嚗𡁶蒾<F0A181B6><EFBFBD><E884B0>?
<div className="flex-1 flex flex-col bg-white overflow-hidden">
// Alert<72><EFBFBD>嚗𡁶<E59A97><F0A181B6><EFBFBD><E884B0>臬躹<E887AC>?
<div className="flex-shrink-0 px-6 py-5 bg-gray-50 border-b border-gray-100">
```
**<EFBFBD>峕艶撅<EFBFBD>漣**:
- <20><>憭硋<E686AD>嚗䫤bg-gray-50` (#F9FAFB)
- <20><><EFBFBD><EFBFBD>`bg-white` (#FFFFFF)
- <20><EFBFBD><E7AE8F><EFBFBD><EFBFBD>嚗䫤bg-gray-50` (#F9FAFB)
- Alert<72>峕艶嚗䫤bg-blue-50/50` (<28>𢠃<EFBFBD>𤩺<EFBFBD>)
---
## <20><> 隡睃<E99AA1><E79D83><EFBFBD>撖寞<E69296>
### 閫<><E996AB><EFBFBD><EFBFBD><EFBFBD>撖寞<E69296>
| 憿寧𤌍 | 隡睃<E99AA1><E79D83>?| 隡睃<E99AA1><E79D83>?| <20>𣂼<EFBFBD>摨?|
|------|--------|--------|--------|
| <20><><EFBFBD>摮烾<E691AE> | font-bold (700) | font-semibold (600) | <20>?<3F><EFBFBD>靚?|
| 颲<>𨭌<EFBFBD><F0A8AD8C><EFBFBD> | text-gray-500 | text-slate-500 + leading-relaxed | <20>?<3F><EFBFBD><E6B994>?|
| 颲寞<E9A2B2>憸𡏭𠧧 | border-gray-200 | border-gray-100 | <20>?<3F><EFBFBD><E6B994>?|
| <20><><EFBFBD>憭批<E686AD> | 銝滨<E98A9D><EFBFBD> | 蝏煺<E89D8F>8px (rounded-lg) | <20>?<3F><EFBFBD><E6B8AF>?|
| <20><EFBFBD><E6B8B2><EFBFBD><EFBFBD> | 銝滩<E98A9D><E6BBA9>?| px-6 py-5 <20><><EFBFBD><EFBFBD>?| <20>?<3F><EFBFBD><E6B8B2>?|
| <20>游蔣<E6B8B8><E894A3><EFBFBD> | <20><EFBFBD><EFBFBD><E9A488> | shadow-sm頧餃凝<E9A483>游蔣 | <20>?<3F><EFBFBD>雿?|
| Tab擃睃漲 | 56px (餈<><E9A488>) | 48px (蝎曉<E89D8E>) | <20>?<3F>渡移<E6B8A1>?|
| <20><EFBFBD><E59786>噬蝡?| 蝞<><E89D9E>?| 蝎曇稲<E69B87><EFBFBD>+<2B><EFBFBD> | <20>?<3F><EFBFBD>銝?|
### 蝏<><E89D8F><EFBFBD>𣂼<EFBFBD>撖寞<E69296>
#### 摮𦯀<E691AE><EFBFBD>
```diff
- <20><><EFBFBD>: font-bold
+ <20><><EFBFBD>: font-semibold
- <20>讛膩: text-xs text-gray-500
+ <20>讛膩: text-xs text-slate-500 leading-relaxed
```
#### <20><EFBFBD><EFBFBD>
```diff
- padding: p-3 (12px)
+ padding: px-5 py-4 (20px/16px)
- margin: mb-3 (12px)
+ margin: mb-5 (20px)
```
#### 憸𡏭𠧧撅<F0A0A7A7>
```diff
- 颲寞<E9A2B2>: border-gray-200 (#E5E7EB)
+ 颲寞<E9A2B2>: border-gray-100 (#F3F4F6)
- 颲<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>: text-gray-500
+ 颲<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>: text-slate-500
```
---
## <20><> 靽格㺿<E6A0BC><E3BABF>辣皜<E8BEA3><E79A9C>
### 靽格㺿<E6A0BC><E3BABF>辣嚗?銝迎<E98A9D>
```
frontend-v2/src/modules/pkb/
<EFBFBD><EFBFBD><EFBFBD><EFBFBD> pages/
<EFBFBD>? <20><EFBFBD><E5A999><EFBFBD> WorkspacePage.tsx (<28>券𢒰蝎曄<E89D8E><E69B84><EFBFBD><E7A2B6>?
<EFBFBD><EFBFBD><EFBFBD><EFBFBD> components/Workspace/
<EFBFBD>? <20><EFBFBD><E98EBF><EFBFBD> WorkModeSelector.tsx (摮𦯀<E691AE><F0A6AF80><EFBFBD>𡢿頝腈<E9A09D><E88588><EFBFBD>閫雴<E996AB><E99BB4>?
<EFBFBD>? <20><EFBFBD><E98EBF><EFBFBD> FullTextMode.tsx (Alert<72><EFBFBD>隡睃<E99AA1>)
<EFBFBD>? <20><EFBFBD><E5A999><EFBFBD> DeepReadMode.tsx (Alert<72><EFBFBD>隡睃<E99AA1>)
<EFBFBD><EFBFBD><EFBFBD><EFBFBD> styles/
<20><EFBFBD><E5A999><EFBFBD> workspace.css (<28><EFBFBD><E595A3><EFBFBD>銋㗇甅撘?
```
---
## <20>綫 霈曇恣閫<E681A3><E996AB><EFBFBD><EFBFBD>
### 憸𡏭𠧧閫<F0A0A7A7><E996AB>
```typescript
const colors = {
// <20><><EFBFBD>憸𡏭𠧧
primary: '#1F2937', // text-slate-800 (銝餅<E98A9D>憸?
secondary: '#334155', // text-slate-700 (<28><EFBFBD>憸?
tertiary: '#64748B', // text-slate-500 (颲<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>)
quaternary: '#94A3B8', // text-slate-400 (甈∟<E79488>靽⊥<E99DBD>)
// 颲寞<E9A2B2>憸𡏭𠧧
border: '#F3F4F6', // border-gray-100 (頧餃凝<E9A483><E5879D><EFBFBD>)
borderStrong: '#E5E7EB', // border-gray-200 (<28>擧遬<E693A7><E981AC><EFBFBD>)
// <20>峕艶憸𡏭𠧧
bgPrimary: '#FFFFFF', // bg-white (銝餉<E98A9D><E9A489>?
bgSecondary: '#F9FAFB', // bg-gray-50 (甈∟<E79488><E2889F>?
};
```
### <20><EFBFBD><EFBFBD><E996AB>
```typescript
const spacing = {
// 瘞游像padding
px: {
xs: 'px-3', // 12px
sm: 'px-4', // 16px
md: 'px-5', // 20px
lg: 'px-6', // 24px
},
// <20><>凒padding
py: {
xs: 'py-2', // 8px
sm: 'py-3', // 12px
md: 'py-4', // 16px
lg: 'py-5', // 20px
},
// 蝏<><EFBFBD><EFBFBD>
gap: {
sm: 'space-y-3', // 12px
md: 'space-y-4', // 16px
lg: 'space-y-6', // 24px
},
};
```
### <20><><EFBFBD><EFBFBD><E996AB>
```typescript
const borderRadius = {
sm: 'rounded-md', // 6px (敺賜<E695BA>)
md: 'rounded-lg', // 8px (<28><EFBFBD><E288A0><EFBFBD><EFBFBD><EFBFBD>?
lg: 'rounded-xl', // 12px (颲枏<E9A2B2>獢?
full: 'rounded-full', // 9999px (憭游<E686AD>)
};
```
### <20>游蔣閫<E894A3><E996AB>
```typescript
const shadows = {
sm: 'shadow-sm', // 頧餃凝<E9A483>游蔣 (<28><EFBFBD>)
md: 'shadow', // <20><><EFBFBD><EFBFBD>游蔣 (撘寧<E69298>)
lg: 'shadow-md', // 銝剔<E98A9D><E58994>游蔣 (銝餅<E98A9D><E9A485>?
xl: 'shadow-lg', // 憭折狍敶?(璅⊥<E79285><E28AA5><EFBFBD>)
};
```
### 摮𦯀<E691AE><EFBFBD><E996AB>
```typescript
const typography = {
// 摮烾<E691AE>
weight: {
medium: 'font-medium', // 500 (甈∟<E79488><E2889F><EFBFBD><EFBFBD>)
semibold: 'font-semibold', // 600 (銝餉<E98A9D><E9A489><EFBFBD><EFBFBD>)
bold: 'font-bold', // 700 (<28><EFBFBD>撘箄<E69298>)
},
// 摮堒噡
size: {
xs: 'text-xs', // 12px (颲<>𨭌霂湔<E99C82>)
sm: 'text-sm', // 14px (甇<><E79487>)
base: 'text-base', // 16px (<28><><EFBFBD>)
lg: 'text-lg', // 18px (憭扳<E686AD>憸?
},
// 銵屸<E98AB5>
leading: {
normal: 'leading-normal', // 1.5
relaxed: 'leading-relaxed', // 1.625
},
};
```
---
## <20>?撉諹<E69289><EFBFBD><E79A9C>
### 敹<>◆撉諹<E69289>嚗㇊0嚗?
- [x] Tab撖潸⏛擃睃漲銝?8px
- [x] 摮𦯀<E691AE>雿輻鍂font-semibold
- [x] 颲寞<E9A2B2>憸𡏭𠧧銝槓order-gray-100
- [x] <20><><EFBFBD>蝏煺<E89D8F>銝氳ounded-lg (8px)
- [x] <20><EFBFBD>蝏煺<E89D8F>嚗īx-6 py-5蝑㚁<E89D91>
- [x] 頧餃凝<E9A483>游蔣<E6B8B8><E894A3><EFBFBD>
- [x]<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>憸𡏭𠧧瘛<E7989B>
### 摨磰砲撉諹<E69289>嚗㇊1嚗?
- [ ] 銵冽聢<E586BD><EFBFBD><E7A08D><EFBFBD><EFBFBD><EFBFBD><E7989A>
- [ ] <20><EFBFBD><E59786>噬蝡䭾甅撘讐移<E8AE90>?
- [ ] Alert<72>峕艶<E5B395>𢠃<EFBFBD>𤩺<EFBFBD>
- [ ] Progress餈𥕦漲<F0A595A6><EFBFBD><E28AA5>?
### <20>臭誑隡睃<E99AA1>嚗㇊2嚗?
- [ ] <20>函𤫇餈<F0A4AB87><EFBFBD><E885B9><EFBFBD>
- [ ] <20><EFBFBD>撘誩<E69298><EFBFBD>隡睃<E99AA1>
- [ ] 瘛梯𠧧璅<E79285><E288AA><EFBFBD>
---
## <20>働 霈曇恣<E69B87><EFBFBD><E7AC94><EFBFBD>
<EFBFBD>寞旿撌株<EFBFBD><EFBFBD><EFBFBD>﹝嚗峕<EFBFBD>隞祇<EFBFBD>敺芯<EFBFBD>隞乩<EFBFBD>霈曇恣<EFBFBD><EFBFBD>嚗?
### 1. 閫<><E996AB><EFBFBD>漣皜<E6BCA3>
- <20>?<3F><><EFBFBD>雿輻鍂font-semibold嚗𣬚<E59A97><F0A3AC9A><EFBFBD><E7B2B9>?
- <20>?颲<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>憸𡏭𠧧瘛<E7989B>嚗峕<E59A97><EFBFBD><EFBFBD>
- <20>?<3F><EFBFBD><E6B8B2><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>撘?
### 2. 蝏<><E89D8F>蝎曇稲
- <20>?<3F><><EFBFBD>蝏煺<E89D8F>銝?px
- <20>?頧餃凝<E9A483>游蔣憓𧼮<E68693>蝡衤<E89DA1><E8A1A4>?
- <20>?颲寞<E9A2B2>憸𡏭𠧧瘛<E7989B>嚗峕凒<E5B395>𥪜<EFBFBD>
### 3. <20><EFBFBD><E6B8B2><EFBFBD>?
- <20>?憿菟𢒰颲寡<E9A2B2>20-24px
- <20>?蝏<><EFBFBD><EFBFBD>16-20px
- <20>?<3F><>捆銝滩斐颲?
### 4. 憸𡏭𠧧<F0A18FAD><EFBFBD>
- <20>?銝餅<E98A9D>摮?1F2937
- <20>?颲<>𨭌<EFBFBD><F0A8AD8C><EFBFBD>#64748B
- <20>?颲寞<E9A2B2>#F3F4F6
---
**隡睃<E99AA1>摰峕<E691B0><E5B395>園𡢿**: 2026-01-06
**隡睃<E99AA1>鈭?*: AI Assistant
**撉諹<E69289><E8ABB9><EFBFBD>?*: 敺<><EFBFBD><EFBFBD><E79195>圈△<E59C88>霈?