diff --git a/apps/web_v1/scripts/visual-check.mjs b/apps/web_v1/scripts/visual-check.mjs index dd5e8bd..341c0c3 100644 --- a/apps/web_v1/scripts/visual-check.mjs +++ b/apps/web_v1/scripts/visual-check.mjs @@ -131,7 +131,7 @@ const channelListHoverMetrics = await collectMetrics() const channelPageChecks = [] for (const channel of [ { label: '工作计划', pageClass: 'project-tasks-page', expectedHeading: '工作计划' }, - { label: 'AI 会话', pageClass: 'project-ai-page', expectedHeading: 'AI 会话' }, + { label: 'AI智能体', pageClass: 'project-ai-page', expectedHeading: 'AI智能体' }, { label: '笔记资料', pageClass: 'project-notes-page', expectedHeading: '笔记资料' }, { label: '计划任务', pageClass: 'project-cron-page', expectedHeading: '计划任务' }, { label: '新建频道', pageClass: 'project-new-channel-page', expectedHeading: '新建频道' }, diff --git a/apps/web_v1/src/App.css b/apps/web_v1/src/App.css index 863252b..80afd6e 100644 --- a/apps/web_v1/src/App.css +++ b/apps/web_v1/src/App.css @@ -1388,6 +1388,174 @@ text-overflow: ellipsis; } +.agent-chat-shell { + min-height: calc(100vh - 170px); + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + gap: 0; + margin: -12px -16px -16px; + background: var(--senlin-panel); +} + +.agent-session-list.queue-section.arco-card, +.agent-chat-panel.queue-section.arco-card { + border-top: 0; + border-right: 0; + border-bottom: 0; + border-radius: 0; + box-shadow: none; +} + +.agent-session-list.queue-section.arco-card { + border-left: 0; + background: color-mix(in srgb, var(--senlin-bg) 72%, var(--senlin-panel)); +} + +.agent-session-list.queue-section .arco-card-body { + height: 100%; + display: flex; + flex-direction: column; + gap: 28px; + padding: 18px 20px; +} + +.agent-new-chat.arco-btn { + height: 48px; + justify-content: center; + border: 1px solid var(--senlin-border); + border-radius: 999px; + background: var(--senlin-panel); + color: var(--senlin-text); + font-size: 16px; + font-weight: 600; + box-shadow: 0 4px 14px rgba(29, 33, 41, 0.08); +} + +.agent-new-chat .arco-icon { + font-size: 18px; +} + +.agent-session-groups { + display: grid; + gap: 28px; + overflow: auto; + scrollbar-width: none; +} + +.agent-session-groups:hover { + scrollbar-width: thin; +} + +.agent-session-group { + display: grid; + gap: 12px; +} + +.agent-session-group > .arco-typography { + font-size: 14px; +} + +.agent-session { + width: 100%; + overflow: hidden; + border: 0; + border-radius: 6px; + background: transparent; + color: var(--senlin-text); + padding: 5px 0; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + font-size: 16px; + line-height: 1.55; +} + +.agent-session:hover, +.agent-session.active { + color: var(--senlin-primary); +} + +.agent-chat-panel.queue-section .arco-card-body { + position: relative; + min-height: calc(100vh - 170px); + display: grid; + grid-template-rows: minmax(0, 1fr) auto; + padding: 0; +} + +.agent-chat-main { + display: grid; + place-items: center; + padding: 80px 32px 190px; +} + +.agent-chat-main h2 { + margin: 0; + color: var(--senlin-text); + font-size: 28px; + font-weight: 800; +} + +.agent-composer { + width: min(860px, calc(100% - 80px)); + display: grid; + gap: 12px; + justify-self: center; + margin: 0 0 28px; + border: 1px solid var(--senlin-border); + border-radius: 24px; + background: var(--senlin-panel); + padding: 18px 16px 14px; + box-shadow: 0 16px 40px rgba(29, 33, 41, 0.08); +} + +.agent-composer .arco-textarea-wrapper { + border: 0; + background: transparent; + padding: 0 8px; +} + +.agent-composer textarea { + color: var(--senlin-text); + font-size: 18px; +} + +.agent-composer textarea::placeholder { + color: #a9b0bc; +} + +.agent-composer-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.agent-model-chip.arco-btn { + height: 36px; + border-color: color-mix(in srgb, var(--senlin-primary) 32%, var(--senlin-border)); + border-radius: 999px; + background: var(--senlin-soft-blue); + color: var(--senlin-primary); + font-weight: 700; +} + +.agent-send-button.arco-btn { + width: 38px; + height: 38px; + background: #aebeff; +} + +.theme-dark .agent-session-list.queue-section.arco-card { + background: #1f1f1f; +} + +.theme-dark .agent-composer, +.theme-dark .agent-new-chat.arco-btn { + box-shadow: 0 16px 40px rgb(0 0 0 / 22%); +} + .reply-box, .chat-input { display: grid; diff --git a/apps/web_v1/src/api/mappers.tsx b/apps/web_v1/src/api/mappers.tsx index 564bea8..b6ee34e 100644 --- a/apps/web_v1/src/api/mappers.tsx +++ b/apps/web_v1/src/api/mappers.tsx @@ -95,7 +95,7 @@ function channelLabel(channel: BackendChannel) { case 'tasks': return '工作计划' case 'ai_sessions': - return 'AI 会话' + return 'AI智能体' case 'notes_sources': return '笔记资料' case 'cron': diff --git a/apps/web_v1/src/pages/projects/project-ai.tsx b/apps/web_v1/src/pages/projects/project-ai.tsx index e14678b..23b3f5e 100644 --- a/apps/web_v1/src/pages/projects/project-ai.tsx +++ b/apps/web_v1/src/pages/projects/project-ai.tsx @@ -1,70 +1,87 @@ -import { Avatar, Button, Card, Input, Space, Tag, Typography } from '@arco-design/web-react' -import { IconPlus, IconRobot, IconSend } from '@arco-design/web-react/icon' -import type { ProjectWorkspace } from './project-types' +import { Button, Card, Input, Space, Typography } from '@arco-design/web-react' +import { + IconArrowUp, + IconAttachment, + IconPlusCircle, + IconRobot, +} from '@arco-design/web-react/icon' +import type { AISession, ProjectWorkspace } from './project-types' -const { Title, Text, Paragraph } = Typography - -const messages = [ - { role: 'user', text: '请基于当前项目资料,整理本周风险和推进建议。' }, - { role: 'assistant', text: '我建议优先处理导出问题、权限边界和 Q3 策略评审,并把客户反馈同步到工作计划。' }, - { role: 'user', text: '把建议拆成可执行任务。' }, -] +const { Title, Text } = Typography export function ProjectAi({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) { const { aiSessions, project } = activeWorkspace - const selected = aiSessions[0] + const groupedSessions = groupSessions(aiSessions) return (