feat(aia): Complete AIA V2.0 with universal streaming capabilities
Major Updates: - Add StreamingService with OpenAI Compatible format (backend/common/streaming) - Upgrade Chat component V2 with Ant Design X integration - Implement AIA module with 12 intelligent agents - Create AgentHub with 100% prototype V11 restoration - Create ChatWorkspace with streaming response support - Add ThinkingBlock for deep thinking display - Add useAIStream Hook for OpenAI Compatible stream handling Backend Common Capabilities (~400 lines): - OpenAIStreamAdapter: SSE adapter with OpenAI format - StreamingService: unified streaming service - Support content and reasoning_content dual streams - Deep thinking tag processing (<think>...</think>) Frontend Common Capabilities (~2000 lines): - AIStreamChat: modern streaming chat component - ThinkingBlock: collapsible deep thinking display - ConversationList: conversation management with grouping - useAIStream: OpenAI Compatible stream handler Hook - useConversations: conversation state management Hook - Modern design styles (Ultramodern theme) AIA Module Frontend (~1500 lines): - AgentHub: 12 agent cards with timeline design - ChatWorkspace: fullscreen immersive chat interface - AgentCard: theme-colored cards (blue/yellow/teal/purple) - 5 phases, 12 agents configuration - Responsive layout (desktop + mobile) AIA Module Backend (~900 lines): - agentService: 12 agents config with system prompts - conversationService: refactored with StreamingService - attachmentService: file upload skeleton (30k token limit) - 12 API endpoints with authentication - Full CRUD for conversations and messages Documentation: - AIA module status and development guide - Universal capabilities catalog (11 services) - Quick reference card for developers - System overview updates Testing: - Stream response verified (HTTP 200) - Authentication working correctly - Auto conversation creation working - Deep thinking display working - Message input and send working Status: Core features completed (85%), attachment and history loading pending
This commit is contained in:
210
frontend-v2/src/modules/aia/styles/agent-card.css
Normal file
210
frontend-v2/src/modules/aia/styles/agent-card.css
Normal file
@@ -0,0 +1,210 @@
|
||||
/**
|
||||
* AgentCard 智能体卡片样式
|
||||
*
|
||||
* 100%还原原型图V11
|
||||
*/
|
||||
|
||||
/* === 卡片基础样式 === */
|
||||
.agent-card {
|
||||
background-color: #F6F9FF;
|
||||
border: 1px solid #E0E7FF;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
min-height: 145px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.agent-card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: #4F6EF2;
|
||||
border-width: 1.5px;
|
||||
background-color: #EEF4FF;
|
||||
box-shadow: 0 8px 16px rgba(79, 110, 242, 0.12);
|
||||
margin: -0.5px;
|
||||
}
|
||||
|
||||
/* === 工具卡片（青色主题） === */
|
||||
.agent-card.tool-card {
|
||||
background-color: #F0FDFA;
|
||||
border-color: #CCFBF1;
|
||||
}
|
||||
|
||||
.agent-card.tool-card:hover {
|
||||
border-color: #0D9488;
|
||||
background-color: #E0F2F1;
|
||||
box-shadow: 0 8px 16px rgba(13, 148, 136, 0.15);
|
||||
}
|
||||
|
||||
/* === 头部布局 === */
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* === 图标容器 === */
|
||||
.icon-box {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #DCE6FF;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.agent-card:hover .icon-box {
|
||||
background-color: #DBEafe;
|
||||
border-color: #93C5FD;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.agent-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #4F6EF2;
|
||||
}
|
||||
|
||||
/* 工具卡片图标 */
|
||||
.agent-card.tool-card .icon-box {
|
||||
border-color: #CCFBF1;
|
||||
}
|
||||
|
||||
.agent-card.tool-card .agent-icon {
|
||||
color: #0D9488;
|
||||
}
|
||||
|
||||
.agent-card.tool-card:hover .icon-box {
|
||||
background-color: #CCFBF1;
|
||||
border-color: #5EEAD4;
|
||||
}
|
||||
|
||||
/* 黄色主题图标 */
|
||||
.agent-card.theme-yellow .icon-box {
|
||||
border-color: #FEF08A;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow .agent-icon {
|
||||
color: #CA8A04;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow:hover {
|
||||
border-color: #CA8A04;
|
||||
background-color: #FEF9C3;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow:hover .icon-box {
|
||||
background-color: #FEF08A;
|
||||
border-color: #FACC15;
|
||||
}
|
||||
|
||||
/* 紫色主题图标 */
|
||||
.agent-card.theme-purple .icon-box {
|
||||
border-color: #E9D5FF;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple .agent-icon {
|
||||
color: #9333EA;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple:hover {
|
||||
border-color: #9333EA;
|
||||
background-color: #F3E8FF;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple:hover .icon-box {
|
||||
background-color: #E9D5FF;
|
||||
border-color: #C084FC;
|
||||
}
|
||||
|
||||
/* === 标题 === */
|
||||
.card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* === 序号水印 === */
|
||||
.num-watermark {
|
||||
color: #E0E7FF;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.agent-card:hover .num-watermark {
|
||||
color: #C7D2FE;
|
||||
}
|
||||
|
||||
.agent-card.tool-card .num-watermark {
|
||||
color: #CCFBF1;
|
||||
}
|
||||
|
||||
.agent-card.tool-card:hover .num-watermark {
|
||||
color: #99F6E4;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow .num-watermark {
|
||||
color: #FEF08A;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow:hover .num-watermark {
|
||||
color: #FDE047;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple .num-watermark {
|
||||
color: #E9D5FF;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple:hover .num-watermark {
|
||||
color: #D8B4FE;
|
||||
}
|
||||
|
||||
/* === 描述文本 === */
|
||||
.desc-text {
|
||||
text-align: justify;
|
||||
line-height: 1.5;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-top: 8px;
|
||||
flex-grow: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* === 跳转图标（工具类） === */
|
||||
.link-icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #94A3B8;
|
||||
opacity: 0.6;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.agent-card:hover .link-icon {
|
||||
opacity: 1;
|
||||
color: #0D9488;
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user