diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000000000000000000000000000000000000..93372d511cf0a46c3b06bc2353d0b1ab700fe3fa --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,5 @@ +{ + "enabledPlugins": { + "ui-ux-pro-max@ui-ux-pro-max-skill": true + } +} diff --git a/.claude/settings.local.json b/.claude/settings.local.json index ed7c7e9316050a0136ce8a45004eed0ee4c58929..3a5b507858a94ce385073f198676bb0c6644efd7 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -1,6 +1,23 @@ { "permissions": { "allow": [ + "Bash(pnpm dev:conversation)", + "mcp__ide__getDiagnostics", + "Bash(npx sass:*)", + "Bash(python3:*)", + "Bash(python:*)", + "Bash(grep -r 11 D:/IdeaProjects/farris-x/packages/conversation/src --include=*.vue --include=*.tsx --include=*.ts --include=*.jsx)", + "Bash(grep -r 在线 D:/IdeaProjects/farris-x/packages/conversation --include=*.ts --include=*.tsx --include=*.vue --include=*.scss)", + "Bash(grep -r 在线 D:/IdeaProjects/farris-x/packages/conversation/demo --include=*.ts --include=*.tsx --include=*.vue --include=*.scss)", + "Bash(grep -rl 当前 D:/IdeaProjects/farris-x --include=*.ts --include=*.tsx --include=*.vue --include=*.scss)", + "Bash(grep -r 记录 D:/IdeaProjects/farris-x/packages/conversation/src --include=*.ts --include=*.tsx --include=*.vue --include=*.scss)", + "Bash(grep -r 当前会话 D:/IdeaProjects/farris-x --include=*.ts --include=*.tsx --include=*.vue --include=*.js --include=*.jsx)", + "Bash(grep -r 当前会话 D:/IdeaProjects/farris-vue --include=*.ts --include=*.tsx --include=*.vue --include=*.js --include=*.jsx)", + "Bash(grep -r 当前会话 D:/IdeaProjects/farris-vue/packages/ui-vue --include=*.ts --include=*.tsx --include=*.vue --include=*.js --include=*.jsx)", + "Bash(dir \"D:\\\\IdeaProjects\\\\farris-x\\\\截图.png\")", + "Bash(npx tsc:*)", + "Bash(find /d/IdeaProjects/farris-x/MySpringBootProject -name *.tsx -o -name *.ts)", + "Bash(npm run:*)" "Bash(pnpm:*)", "Bash(find /Users/sagi/source/ubml/farris-x/src -name *.ts -type f)", "Bash(find /Users/sagi/source/ubml/farris-x -name *.ts -path */database/models/*)", diff --git a/.env.development b/.env.development new file mode 100644 index 0000000000000000000000000000000000000000..0e5dc37d2cdd4ebffe661678063c20b1f1b9dc51 --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +# Spring Boot API 地址 +VITE_API_BASE=http://localhost:8080/api diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..35410cacdc5e87f985c93a96520f5e11a5c822e4 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# 默认忽略的文件 +/shelf/ +/workspace.xml +# 基于编辑器的 HTTP 客户端请求 +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/farris-x.iml b/.idea/farris-x.iml new file mode 100644 index 0000000000000000000000000000000000000000..d6ebd4805981b8400db3e3291c74a743fef9a824 --- /dev/null +++ b/.idea/farris-x.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000000000000000000000000000000000000..8d66637cb9fd38ded17c4988b9f70dd425cf2e3c --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000000000000000000000000000000000000..f5bd2dfe7956dc3d496675b22a950390fa8f9f88 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000000000000000000000000000000000000..222f42c3fa2cd4e57df3d6e34eb5da2ab0667af8 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000000000000000000000000000000000000..35eb1ddfbbc029bcab630581847471d7f238ec53 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docs/superpowers/specs/2026-03-31-springboot-farris-integration-plan.md b/docs/superpowers/specs/2026-03-31-springboot-farris-integration-plan.md new file mode 100644 index 0000000000000000000000000000000000000000..70bb13701f06692bf81e39721865b044389cedc5 --- /dev/null +++ b/docs/superpowers/specs/2026-03-31-springboot-farris-integration-plan.md @@ -0,0 +1,322 @@ +# Spring Boot 项目与 farris-x 前端融合计划 + +## 1. 项目背景 + +### 1.1 目标 +将 Spring Boot 项目（AI Hub）的前端页面融合到 farris-x 项目中： +- 技术栈：使用 farris-x 现有的 React 技术栈 +- 后端接口：直接调用 Spring Boot 项目的 `/api/*` 接口（Spring Boot 项目独立运行） +- 逻辑对齐：确保 farris-x 中各页面的业务逻辑与 Spring Boot 原页面一致 + +### 1.2 已有对照关系 + +| Spring Boot 页面 | farris-x 现有实现 | 本次工作 | +|---|---|---| +| `index.html`（专家中心首页） | `renderAgentHub()` | 调整逻辑，对接 API | +| `detail.html`（专家详情） | `renderAgentDetail()` | 调整逻辑 + 实现版本历史 | +| `chat.html`（聊天页） | conversation 主组件 | 复用已有功能，对接 API | +| `create.html`（创建助手） | ❌ 不存在 | **新增** | +| `my.html`（我的助手） | ❌ 不存在 | **新增** | +| `skill-market.js`（技能市场） | ❌ 不存在 | **新增** | + +### 1.3 不实现的功能 +- 编辑助手功能（不实现） +- Spring Boot 的富文本编辑器（复用 farris-x 现有编辑器） + +--- + +## 2. 数据字段映射 + +由于 Spring Boot 与 farris-x 的字段名不同，需在 farris-x 侧做字段映射。 + +### 2.1 API 响应 → ChatAgent 类型 + +| Spring Boot API 字段 | farris-x ChatAgent 字段 | 说明 | +|---|---|---| +| `id` | `id` | ✅ 直接使用 | +| `name` 或 `title` | `name` | 统一用 `name` | +| `title` | `title` | 专家职称 | +| `category`（分类名） | `category` | ✅ 直接使用 | +| `description` | `description` | ✅ 直接使用 | +| `avatarUrl` | `avatar` | 字段名不同，需映射 | +| `views` | `views` | ✅ 直接使用 | +| `likeCount` | `likes` | 字段名不同，需映射 | +| `forkCount` | `forkCount` | ✅ 直接使用 | +| `author` | `creator` | 字段名不同，需映射 | +| `createTime` | `createdDate` | 字段名不同，需映射 | +| `systemPrompt` | `systemPrompt` | ✅ 直接使用 | +| `skills`（JSON 数组） | `skills: string[]` | 解析 JSON 后直接使用 | +| `demoConversations`（JSON） | 展示用，不存模型 | 解析后展示演示对话 | +| `price` | 用于展示，不存模型 | 价格展示 | +| `status` | 用于展示，不存模型 | 上下架状态 | + +### 2.2 内置技能映射 + +| Spring Boot API 字段 | farris-x AgentBuiltinSkill 字段 | +|---|---| +| `name` | `name` | +| `tag` | `tag` | +| `description` | `description` | +| `icon` | `icon` | + +### 2.3 版本历史映射 + +| Spring Boot API 字段 | 说明 | +|---|---| +| `version` | 版本号，如 v1.0.0 | +| `description` | 版本描述 | +| `createTime` | 创建时间 | + +--- + +## 3. 页面改造计划 + +### 3.1 专家中心（AgentHub） + +**对应文件**：`conversation.component.tsx` 中的 `renderAgentHub()` + +**API 对接**： +- `GET /api/agents/categories` → 加载分类导航 +- `GET /api/agents/list?page=1&size=100` → 加载专家列表 + +**逻辑调整**： +1. 替换 mock 数据为真实 API 调用 +2. 分类选择：点击分类 → 调用 `/api/agents/list?categoryId={id}` +3. 搜索功能：输入关键字 → 调用 `/api/agents/list?keyword={keyword}`（300ms 防抖） +4. 卡片点击 → 打开详情面板（不变） + +**字段映射**：应用上述字段映射规则 + +### 3.2 专家详情（AgentDetail） + +**对应文件**：`conversation.component.tsx` 中的 `renderAgentDetail()` + +**API 对接**： +- `GET /api/agents/detail/{id}` → 加载专家详情 +- `GET /api/agents/{id}/builtin-skills` → 加载内置技能 +- `GET /api/agents/{id}/versions` → **加载版本历史（新增）** +- `GET /api/agents/{id}/similar` → 加载相似助理 + +**Tab 展示**： +- 概览：能力说明 + 演示对话 +- 简介：详细介绍 +- 能力：内置技能列表 +- 版本历史：**新增 Tab**，展示版本列表 +- 相似助理：相似专家卡片列表 + +**版本历史 Tab 实现**： +- 布局：版本badge + 版本描述 + 日期 +- 最新版本显示 "NEW" 标签 + +**"派生聊天"按钮**：点击 → `POST /api/conversation/create` → 跳转到聊天视图 + +### 3.3 聊天页（Chat） + +**对应文件**：`conversation.component.tsx` + +**API 对接**： +- `GET /api/models/list` → 加载模型列表（用于模型选择下拉框） +- `GET /api/conversation/{sessionId}/messages` → 加载历史消息 +- `POST /api/chat/send` → 发送消息 +- `POST /api/files/upload` → 上传文件 + +**复用已有功能**： +- 富文本编辑器（保留） +- 技能标签插入（保留） +- 助手选择（保留，但可能隐藏因为是单专家聊天） +- 深度思考按钮（保留） +- 辅助工具（保留） + +**新增/调整**： +- 模型选择下拉框：从 `/api/models/list` 加载，显示模型名 +- 联网开关、记忆开关（作为运行时配置传递给 `/api/chat/send`） +- 文件上传：`POST /api/files/upload`，上传后显示文件名 +- 记忆级别选择（高/中/低） + +### 3.4 创建助手（Create Agent） + +**新增视图**：`renderCreateAgent()` + +**API 对接**： +- `GET /api/agents/categories` → 加载分类下拉框 +- `POST /api/agents/create` → 提交创建 + +**表单字段**： +1. **基本信息** + - 头像上传（Base64 预览） + - 名称（必填） + - 分类（必填，下拉框） + - 简短描述（必填） + - 详细介绍（选填） + +2. **AI 配置** + - 系统提示词（必填） + +3. **技能配置** + - 已选技能标签展示 + - 点击「添加技能」→ 打开技能市场弹窗 + +4. **演示对话** + - 动态添加 user/assistant 对话项 + - 每项含角色标签 + 文本域 + - 支持删除 + +5. **发布设置** + - 价格（默认 0） + - 状态（下架/上架） + +**提交逻辑**： +- 表单验证 → 序列化数据（含字段映射）→ POST /api/agents/create +- 创建成功 → 弹出提示 → 刷新专家列表 + +**UI 布局**：全屏覆盖聊天内容区，顶部有返回按钮 + +### 3.5 我的助手（My Agents） + +**新增视图**：`renderMyAgents()` + +**API 对接**： +- `GET /api/agents/my?author={author}` → 加载我的助手列表 +- `DELETE /api/agents/{id}` → 删除助手 + +**UI 展示**： +- 助手卡片列表（头像、名称、描述、创建时间、状态标签） +- 「编辑」和「删除」按钮（注：编辑功能本次不实现，按钮先隐藏或显示后提示「功能开发中」） +- 顶部「创建助手」按钮 → 跳转创建助手视图 + +**空状态**：无助手时显示空状态提示 + 创建按钮 + +### 3.6 技能市场弹窗（Skill Market Modal） + +**新增组件**：`renderSkillMarketModal()` + +**数据来源**：使用 Spring Boot 项目中的 Mock 数据（`MySpringBootProject/static/skill-market.js` 中的 `SKILLS_DATA`），或直接硬编码到 farris-x 中 + +**功能**： +- 分类筛选（全部/办公提效/学术研究/编程开发/生活助手） +- 关键字搜索 +- 多选支持 +- 已选技能显示为标签，可移除 +- 确认/取消按钮 + +--- + +## 4. 视图切换逻辑 + +在 `conversation.component.tsx` 中通过状态变量控制视图： + +```typescript +type ViewState = 'chat' | 'agentHub' | 'createAgent' | 'myAgents'; + +const currentView = ref('chat'); + +// 切换方法 +function showAgentHub() { currentView.value = 'agentHub'; } +function showCreateAgent() { currentView.value = 'createAgent'; } +function showMyAgents() { currentView.value = 'myAgents'; } +function showChat() { currentView.value = 'chat'; } +``` + +**导航入口**： +- 左侧导航面板：「召唤专家」→ 专家中心 +- 专家中心内：「创建助手」→ 创建助手视图 +- 左侧导航面板：「我的助手」→ 我的助手视图 +- 详情面板：「派生聊天」→ 聊天视图 + +--- + +## 5. 实施步骤 + +### Phase 1：字段映射与类型定义 +1. 在 `conversation.props.ts` 中补充缺失的字段类型（如 `price`、`status`、`longDescription`、`demoConversations`） +2. 创建 API 响应映射工具函数（将 Spring Boot 响应转为 farris-x 类型） +3. 定义 `AgentVersion` 类型 + +### Phase 2：专家中心改造 +1. 替换 mock 数据为真实 API 调用 +2. 应用字段映射 +3. 测试分类筛选和搜索功能 + +### Phase 3：专家详情改造 +1. 对接详情 API +2. 实现版本历史 Tab +3. 修复"派生聊天"按钮逻辑 + +### Phase 4：聊天页对接 +1. 对接模型列表 API +2. 对接消息加载/发送 API +3. 对接文件上传 API +4. 调整运行时配置（联网、记忆、模型选择） + +### Phase 5：新增创建助手视图 +1. 实现创建助手表单 UI +2. 实现技能市场弹窗 +3. 对接分类加载和创建提交 API + +### Phase 6：新增我的助手视图 +1. 实现我的助手列表 UI +2. 对接我的助手列表和删除 API +3. 对接创建助手跳转 + +### Phase 7：样式与细节调整 +1. 确保各视图样式与 Spring Boot 一致 +2. 优化用户体验（加载状态、空状态、错误处理） + +--- + +## 6. API 接口清单 + +| 页面 | 接口 | 方法 | 说明 | +|---|---|---|---| +| 专家中心 | `/api/agents/categories` | GET | 获取分类列表 | +| 专家中心 | `/api/agents/list` | GET | 获取专家列表（支持分类和关键字筛选） | +| 专家详情 | `/api/agents/detail/{id}` | GET | 获取专家详情 | +| 专家详情 | `/api/agents/{id}/builtin-skills` | GET | 获取内置技能 | +| 专家详情 | `/api/agents/{id}/versions` | GET | 获取版本历史 | +| 专家详情 | `/api/agents/{id}/similar` | GET | 获取相似专家 | +| 聊天页 | `/api/conversation/create` | POST | 创建会话 | +| 聊天页 | `/api/conversation/{sessionId}/messages` | GET | 获取会话消息 | +| 聊天页 | `/api/chat/send` | POST | 发送消息 | +| 聊天页 | `/api/models/list` | GET | 获取模型列表 | +| 聊天页 | `/api/files/upload` | POST | 上传文件 | +| 创建助手 | `/api/agents/create` | POST | 创建专家 | +| 我的助手 | `/api/agents/my` | GET | 获取我的专家 | +| 我的助手 | `/api/agents/{id}` | DELETE | 删除专家 | + +--- + +## 7. 关键差异与注意事项 + +### 7.1 字段名差异 +- `likeCount` ↔ `likes` +- `author` ↔ `creator` +- `avatarUrl` ↔ `avatar` +- `createTime` ↔ `createdDate` + +### 7.2 JSON 解析 +- `skills` 字段是 JSON 字符串，需解析为数组 +- `demoConversations` 字段是 JSON 字符串，需解析后展示 + +### 7.3 编辑功能不实现 +- 我的助手页面中的「编辑」按钮本次不实现功能 +- 可以显示为禁用状态或提示「功能开发中」 + +### 7.4 侧边栏折叠 +- 聊天页的侧边栏折叠功能保留，但导航链接指向内部视图切换 + +--- + +## 8. 文件变更清单 + +| 操作 | 文件路径 | 说明 | +|---|---|---| +| 修改 | `packages/conversation/src/components/conversation/conversation.component.tsx` | 主组件，核心视图逻辑 | +| 修改 | `packages/conversation/src/components/conversation/conversation.props.ts` | 补充字段类型 | +| 修改 | `packages/conversation/src/style.scss` | 新增视图样式 | +| 新增 | `packages/conversation/src/components/conversation/api/agentApi.ts` | API 请求函数 | +| 新增 | `packages/conversation/src/components/conversation/types/mapping.ts` | 字段映射工具 | + +--- + +*文档版本：v1.0* +*创建日期：2026-03-31* diff --git a/packages/conversation/.env.development b/packages/conversation/.env.development new file mode 100644 index 0000000000000000000000000000000000000000..0e5dc37d2cdd4ebffe661678063c20b1f1b9dc51 --- /dev/null +++ b/packages/conversation/.env.development @@ -0,0 +1,2 @@ +# Spring Boot API 地址 +VITE_API_BASE=http://localhost:8080/api diff --git a/packages/conversation/demo/components/workbench/workbench.component.tsx b/packages/conversation/demo/components/workbench/workbench.component.tsx index 47e83fd9050a07a78474bc884894af08ee94a221..28c8a49cab292bac1939cd06a0afbfec4644e5bd 100644 --- a/packages/conversation/demo/components/workbench/workbench.component.tsx +++ b/packages/conversation/demo/components/workbench/workbench.component.tsx @@ -4,10 +4,10 @@ import type { NavActionItem, Message, ConversationData, - HistoryItem, ChatAgent, AssistiveTool, } from '../../..'; +import { getAgentList, getCategories } from '../../../src/components/conversation/api/agentApi'; import { fetchMockChatStream, fetchMockChatSync, applyEnvelopes } from '../../api/fetch-mock-chat'; const NAV_ACTIONS: NavActionItem[] = [ @@ -73,134 +73,154 @@ const demoSessionId = export default defineComponent({ name: 'WorkbenchComponent', setup() { - const conversations = ref([]); - const activeConversationId = ref(null); - const conversationUrlByTitle = ref>({}); - const historyItems = ref([]); - const demoAgents = ref([]); - const sessionId = ref(demoSessionId); + // 历史会话列表（所有会话，包含已关闭标签页的会话） + const conversations = ref([DEFAULT_CONVERSATION]); + // 当前打开的标签页 id 列表 + const openTabIds = ref([DEFAULT_CONVERSATION.id]); + // 当前激活的标签页 id + const activeConversationId = ref(DEFAULT_CONVERSATION.id); + const agents = ref([]); + const agentsLoading = ref(false); + // 分类 ID -> 分类名称 映射 + const categoryIdToName: Record = {}; + + // 加载专家列表 + async function loadAgents() { + agentsLoading.value = true; + try { + // 先加载分类映射 + const categories = await getCategories(); + categories.forEach(cat => { + categoryIdToName[String(cat.id)] = cat.name; + }); + // 加载专家列表 + const result = await getAgentList({ page: 1, size: 100 }); + // 转换为 ChatAgent 格式 + agents.value = result.records.map((item): ChatAgent => { + return { + id: String(item.id), + name: item.name || item.title || '', + title: item.title, + category: categoryIdToName[String(item.categoryId)] || '未分类', + description: item.description, + avatar: item.avatarUrl || undefined, + views: item.views, + likes: item.likeCount, + creator: item.author, + createdDate: item.createTime ? new Date(item.createTime).toLocaleDateString('zh-CN') : undefined, + systemPrompt: item.systemPrompt, + skills: item.skills ? JSON.parse(item.skills) : [], + }; + }); + } catch (error) { + console.error('加载专家列表失败:', error); + // 失败时使用默认数据 + agents.value = DEMO_AGENTS; + } finally { + agentsLoading.value = false; + } + } + + onMounted(() => { + loadAgents(); + }); async function openOrActivateHistory(convTitle: string) { const url = conversationUrlByTitle.value[convTitle]; if (!url) return; const existing = conversations.value.find((c) => c.title === convTitle); if (existing) { + // 如果会话已存在，打开其标签页并激活 + if (!openTabIds.value.includes(existing.id)) { + openTabIds.value = [...openTabIds.value, existing.id]; + } activeConversationId.value = existing.id; - return; - } - const conv = await loadConversationFromJson(url); - conversations.value = [...conversations.value, conv]; - activeConversationId.value = conv.id; - } - - async function loadHistoryIndexAndBootstrap() { - const res = await fetch(CONVERSATION_HISTORY_INDEX_URL); - if (!res.ok) { - throw new Error(`加载会话历史索引失败: ${CONVERSATION_HISTORY_INDEX_URL} (${res.status})`); - } - const data = (await res.json()) as ConversationHistoryIndexFile; - const entries = Array.isArray(data.entries) ? data.entries : []; - - conversationUrlByTitle.value = Object.fromEntries( - entries.map((e) => [e.title, e.conversationUrl]) - ); - - historyItems.value = entries.map((e) => ({ - title: e.title, - onClick: () => { void openOrActivateHistory(e.title); }, - })); - - const defaultTitle = data.defaultTitle ?? entries[0]?.title; - const defaultUrl = defaultTitle ? conversationUrlByTitle.value[defaultTitle] : undefined; - if (defaultUrl) { - const conv = await loadConversationFromJson(defaultUrl); - conversations.value = [conv]; + } else { + // 创建新会话 + const conv = createConversation(convTitle, initialMessages); + conversations.value = [...conversations.value, conv]; + openTabIds.value = [...openTabIds.value, conv.id]; activeConversationId.value = conv.id; } } - onMounted(() => { - void Promise.all([ - loadDemoAgentsFromJson(DEMO_AGENTS_URL).then((list) => { - demoAgents.value = list; - }), - loadHistoryIndexAndBootstrap(), - ]).catch((e) => console.error(e)); - }); - function handleCloseConversation(id: string) { - const idx = conversations.value.findIndex((c) => c.id === id); - if (idx < 0) return; - const nextConversations = conversations.value.filter((c) => c.id !== id); - conversations.value = nextConversations; + // 只从 openTabIds 中移除，不影响 conversations 历史记录 + if (!openTabIds.value.includes(id)) return; + openTabIds.value = openTabIds.value.filter(tabId => tabId !== id); + // 如果关闭的是当前激活的标签页，切换到其他标签页 if (activeConversationId.value === id) { - activeConversationId.value = idx > 0 ? nextConversations[idx - 1].id : (nextConversations[0]?.id ?? null); + if (openTabIds.value.length > 0) { + activeConversationId.value = openTabIds.value[openTabIds.value.length - 1]; + } else { + activeConversationId.value = null; + } } } function handleSwitchConversation(id: string) { - activeConversationId.value = id; + // 如果标签页已打开，切换激活状态 + if (openTabIds.value.includes(id)) { + activeConversationId.value = id; + } else { + // 如果标签页未打开，打开它并激活 + openTabIds.value = [...openTabIds.value, id]; + activeConversationId.value = id; + } } - function handleUserAuthConfirm(payload: { messageId: string; optionId: string; name: string }) { - const activeId = activeConversationId.value; - if (!activeId) return; - const convIdx = conversations.value.findIndex((c) => c.id === activeId); - if (convIdx < 0) return; - const conv = conversations.value[convIdx]; - const userAck: Message = { - id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, - name: 'Sagi', - role: 'user', - content: { - type: 'text', - text: `【授权反馈】已选择「${payload.name}」（演示：真实环境将上送 command / server.chat.message.agent.confirm）` + function handleCreateDerivedChat(data: { + sessionId: string; + agentId: number; + agentName: string; + agentAvatar?: string; + systemPrompt?: string; + }) { + const newConv: ConversationData = { + id: data.sessionId, + title: data.agentName, + messages: [], + agentId: String(data.agentId), + agentConfig: { + agentId: data.agentId, + name: data.agentName, + avatar: data.agentAvatar || '', + systemPrompt: data.systemPrompt || '', }, - timestamp: Date.now(), - agentId: '' }; - const assistantAck: Message = { - id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, - name: 'inBuilder', - role: 'assistant', - content: { - type: 'text', - text: `已收到授权选项 \`${payload.optionId}\`：${payload.name}。可继续对话或执行后续任务。` - }, - timestamp: Date.now(), - agentId: '' - }; - const next = [...conversations.value]; - next[convIdx] = { ...conv, messages: [...conv.messages, userAck, assistantAck] }; - conversations.value = next; + conversations.value = [...conversations.value, newConv]; + openTabIds.value = [...openTabIds.value, newConv.id]; + activeConversationId.value = newConv.id; } - async function handleSendMessage(content: string) { - const activeId = activeConversationId.value; - if (!activeId) return; - const idx = conversations.value.findIndex((c) => c.id === activeId); - if (idx < 0) return; - const conv = conversations.value[idx]; - const pending = [...conv.pendingMessages]; - const displayed = [...conv.messages]; + function handleCreateConversation(conv: ConversationData) { + conversations.value = [...conversations.value, conv]; + openTabIds.value = [...openTabIds.value, conv.id]; + activeConversationId.value = conv.id; + } - if (pending.length === 0 && !content.trim()) { - return; - } + function handleSendMessage(content: string, msg?: Message) { + const activeId = activeConversationId.value; + let targetId = activeId; - if (pending.length > 0) { - const [next, ...rest] = pending; - const updated = [...conversations.value]; - updated[idx] = { - ...conv, - messages: [...displayed, next], - pendingMessages: rest, + // 如果没有激活的会话，创建一个新会话 + if (!targetId) { + const newConv: ConversationData = { + id: `conv-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, + title: '新对话', + messages: [], }; - conversations.value = updated; - return; + conversations.value = [...conversations.value, newConv]; + openTabIds.value = [...openTabIds.value, newConv.id]; + targetId = newConv.id; + activeConversationId.value = targetId; } - const newMsg: Message = { + const idx = conversations.value.findIndex((c) => c.id === targetId); + if (idx < 0) return; + const conv = conversations.value[idx]; + // 如果传入了消息对象，直接使用；否则创建 + const newMsg: Message = msg || { id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, name: 'Sagi', role: 'user', @@ -213,6 +233,17 @@ export default defineComponent({ conversations.value = updated; } + function handleAssistantMessage(msg: Message) { + const activeId = activeConversationId.value; + if (!activeId) return; + const idx = conversations.value.findIndex((c) => c.id === activeId); + if (idx < 0) return; + const conv = conversations.value[idx]; + const updated = [...conversations.value]; + updated[idx] = { ...conv, messages: [...conv.messages, msg] }; + conversations.value = updated; + } + const assistiveTools: AssistiveTool[] = [ { id: 'Translate', @@ -319,11 +350,11 @@ export default defineComponent({ ); diff --git a/packages/conversation/src/components/conversation/api/agentApi.ts b/packages/conversation/src/components/conversation/api/agentApi.ts new file mode 100644 index 0000000000000000000000000000000000000000..a5a8644840e5c1c4e6d29881b0d39adfb8c4a0d1 --- /dev/null +++ b/packages/conversation/src/components/conversation/api/agentApi.ts @@ -0,0 +1,192 @@ +/** + * 专家中心 API 请求函数 + * 对接 Spring Boot 项目的 /api/agents/* 接口 + */ + +import type { + ApiResponse, + AgentCategory, + AgentDetailResponse, + AgentListItem, + AgentBuiltinSkill, + AgentVersion, + PagedResponse, + CreateConversationResponse, + CreateConversationRequest, + ChatMessage, + SendMessageRequest, + SendMessageResponse, + ModelInfo, + UploadFileResponse, + CreateAgentRequest, +} from '../types/agent'; + +const API_BASE = import.meta.env.VITE_API_BASE || '/api'; + +/** + * 通用请求封装 + */ +async function request(url: string, options?: RequestInit): Promise { + const response = await fetch(url, { + ...options, + headers: { + 'Content-Type': 'application/json', + ...options?.headers, + }, + }); + const result: ApiResponse = await response.json(); + if (result.code !== 200) { + throw new Error(result.msg || '请求失败'); + } + return result.data; +} + +// ==================== 专家相关 ==================== + +/** + * 获取所有分类 + */ +export async function getCategories(): Promise { + return request(`${API_BASE}/agents/categories`); +} + +/** + * 获取专家列表 + * @param page 页码 + * @param size 每页数量 + * @param categoryId 分类ID筛选 + * @param keyword 关键字搜索 + */ +export async function getAgentList(params: { + page?: number; + size?: number; + categoryId?: string; + keyword?: string; +}): Promise> { + const searchParams = new URLSearchParams(); + searchParams.set('page', String(params.page || 1)); + searchParams.set('size', String(params.size || 100)); + if (params.categoryId) { + searchParams.set('categoryId', params.categoryId); + } + if (params.keyword) { + searchParams.set('keyword', params.keyword); + } + return request>(`${API_BASE}/agents/list?${searchParams}`); +} + +/** + * 获取专家详情 + */ +export async function getAgentDetail(id: string): Promise { + return request(`${API_BASE}/agents/detail/${id}`); +} + +/** + * 获取专家内置技能 + */ +export async function getAgentBuiltinSkills(id: string): Promise { + return request(`${API_BASE}/agents/${id}/builtin-skills`); +} + +/** + * 获取专家版本历史 + */ +export async function getAgentVersions(id: string): Promise { + return request(`${API_BASE}/agents/${id}/versions`); +} + +/** + * 获取相似专家 + */ +export async function getAgentSimilar(id: string): Promise { + return request(`${API_BASE}/agents/${id}/similar`); +} + +/** + * 创建专家 + */ +export async function createAgent(data: CreateAgentRequest): Promise { + return request(`${API_BASE}/agents/create`, { + method: 'POST', + body: JSON.stringify(data), + }); +} + +/** + * 获取我的专家列表 + * @param author 作者名 + */ +export async function getMyAgents(author: string): Promise { + return request( + `${API_BASE}/agents/my?author=${encodeURIComponent(author)}` + ); +} + +/** + * 删除专家 + */ +export async function deleteAgent(id: string): Promise { + return request(`${API_BASE}/agents/${id}`, { + method: 'DELETE', + }); +} + +// ==================== 会话相关 ==================== + +/** + * 创建会话 + */ +export async function createConversation(data: CreateConversationRequest): Promise { + return request(`${API_BASE}/conversation/create`, { + method: 'POST', + body: JSON.stringify(data), + }); +} + +/** + * 获取会话消息 + */ +export async function getConversationMessages(sessionId: string): Promise { + return request(`${API_BASE}/conversation/${sessionId}/messages`); +} + +// ==================== 聊天相关 ==================== + +/** + * 发送消息 + */ +export async function sendMessage(data: SendMessageRequest): Promise { + return request(`${API_BASE}/chat/send`, { + method: 'POST', + body: JSON.stringify(data), + }); +} + +// ==================== 模型相关 ==================== + +/** + * 获取模型列表 + */ +export async function getModelList(): Promise { + return request(`${API_BASE}/models/list`); +} + +// ==================== 文件相关 ==================== + +/** + * 上传文件 + */ +export async function uploadFile(file: File): Promise { + const formData = new FormData(); + formData.append('file', file); + const response = await fetch(`${API_BASE}/files/upload`, { + method: 'POST', + body: formData, + }); + const result: ApiResponse = await response.json(); + if (result.code !== 200) { + throw new Error(result.msg || '上传失败'); + } + return result.data; +} diff --git a/packages/conversation/src/components/conversation/conversation.component.tsx b/packages/conversation/src/components/conversation/conversation.component.tsx index e44a74c94bca502a4643c52e72cc6aa08255534e..d21e21435575481432214f9819cc15b87557abe6 100644 --- a/packages/conversation/src/components/conversation/conversation.component.tsx +++ b/packages/conversation/src/components/conversation/conversation.component.tsx @@ -1,12 +1,14 @@ import { defineComponent, ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue"; import { FLayout, FLayoutPane, FSplitter, FSplitterPane, FPopover, FNav, FListView } from "@farris/ui-vue"; -import { conversationProps, ConversationProps, Message, ChatAgent, AssistiveTool, SlotConfig } from "./conversation.props"; +import { conversationProps, ConversationProps, Message, ChatAgent, AssistiveTool, SlotConfig, ModelInfo } from "./conversation.props"; import type { PreviewConfig } from "../app-preview/types"; import type { ContentAreaContext, LayoutStrategy } from "./composition/types"; import type { VNode } from "vue"; import { renderMessageContent } from "../../utils/message-renderers"; import ChatPreview from "../chat-preview/chat-preview.component"; import { renderSlotConfig } from '../../utils/slot-config-renderers'; +import { getModelList, sendMessage as sendMessageApi, uploadFile, getAgentVersions, createConversation as createConversationApi } from "./api/agentApi"; +import type { AgentVersion } from "./types/agent"; /** 紧凑模式布局策略 */ function createCompactLayoutStrategy(): LayoutStrategy { @@ -29,7 +31,7 @@ function createNormalLayoutStrategy( showPreviewPane: () => boolean, renderPreview: () => VNode, chatPreviewPaneWidth: () => number, - chatPreviewPaneRef: { value: unknown } + chatPreviewPaneRef: any ): LayoutStrategy { return { isCompact: false, @@ -73,7 +75,7 @@ function createNormalLayoutStrategy( export default defineComponent({ name: 'Conversation', props: conversationProps, - emits: ['sendMessage', 'closeConversation', 'switchConversation', 'userAuthConfirm'], + emits: ['sendMessage', 'closeConversation', 'switchConversation', 'assistantMessage', 'createConversation'], setup(props: ConversationProps, context) { const chatNavPaneWidth = ref(260); const chatNavPaneCollapsed = ref(props.navPaneCollapsed); @@ -121,6 +123,31 @@ export default defineComponent({ const agentDetailAgent = ref(null); const agentDetailActiveTab = ref('overview'); const agentDetailDescExpanded = ref(true); + const agentVersions = ref([]); + + // 头像加载失败状态追踪 + const avatarLoadFailed = ref>({}); + + // 运行时配置：模型选择、联网搜索、记忆功能 + const selectedModel = ref(null); + const modelList = ref([]); + const enableWebSearch = ref(false); + const memoryEnabled = ref(true); + const memoryLevel = ref<'high' | 'medium' | 'low'>('medium'); + const uploadedFileIds = ref([]); + + // 加载模型列表 + async function loadModelList() { + try { + const models = await getModelList(); + modelList.value = models; + if (models.length > 0 && !selectedModel.value) { + selectedModel.value = models[0]; + } + } catch (error) { + console.error('加载模型列表失败:', error); + } + } const agentDetailTabData = computed(() => { const agent = agentDetailAgent.value; @@ -173,10 +200,20 @@ export default defineComponent({ agentDetailAgent.value = agent; agentDetailActiveTab.value = 'overview'; agentDetailDescExpanded.value = true; + // 加载版本历史 + if (agent.id) { + getAgentVersions(agent.id).then(versions => { + agentVersions.value = versions; + }).catch(error => { + console.error('加载版本历史失败:', error); + agentVersions.value = []; + }); + } } function closeAgentDetail() { agentDetailAgent.value = null; + agentVersions.value = []; } // 消息区域滚动条：鼠标移入或滚动时显示，默认隐藏 @@ -207,8 +244,29 @@ export default defineComponent({ const hoveredInputBarTimerId = ref(null); const inputBarPopoverRef = ref(); const inputBarPopoverHostRef = ref(); + const isSendingMessage = ref(false); const speechInput = ref(false); + const fileInputRef = ref(); + + // 文件上传处理 + function handleFileSelect(event: Event) { + const input = event.target as HTMLInputElement; + const files = input.files; + if (!files || files.length === 0) return; + + Array.from(files).forEach(async (file) => { + try { + const result = await uploadFile(file); + uploadedFileIds.value = [...uploadedFileIds.value, result.fileId]; + console.log('文件上传成功:', result.fileName); + } catch (error) { + console.error('文件上传失败:', error); + } + }); + // 清空 input 以便选择相同文件 + input.value = ''; + } function showMessageScrollbar() { messageScrollbarVisible.value = true; @@ -310,6 +368,8 @@ export default defineComponent({ } if ((isTabMode.value ? displayedMessages.value.length : messages.value.length) > 0) focusInputEditor(); }); + // 加载模型列表 + loadModelList(); }); onUnmounted(() => { @@ -377,6 +437,8 @@ export default defineComponent({ showPreviewPane.value = false; activePreviewConfig.value = null; } + // 确保编辑器中有常驻的 agent 标签 + nextTick(() => ensurePermanentAgentTag()); }, { immediate: true }); watch(showPreviewPane, (visible) => { @@ -435,38 +497,137 @@ export default defineComponent({ showNavPopover.value = false; } - function sendMessage() { + async function sendMessage() { const content = serializeEditorToText(); message.value = content; + if (!content) return; - // 页签模式：允许空内容发送（用于待显示队列逐条Reveal）；非页签模式仍要求有输入 - if (isTabMode.value) { - if (editorRef.value) editorRef.value.innerHTML = ''; - if (slotEditorRef.value) displayedSlotConfigs.value = []; - selectedSkills.value = []; - message.value = ''; - context.emit('sendMessage', content); - return; - } + // 正在发送中，禁止重复发送 + if (isSendingMessage.value) return; + isSendingMessage.value = true; + + // 获取当前会话和助手配置 + const activeConv = isTabMode.value + ? props.conversations?.find(c => c.id === props.activeConversationId) + : null; + const sessionId = activeConv?.id || props.conversations?.[0]?.id; + const agentConfig = activeConv?.agentConfig; + + // 构造用户消息 + const userMessage: Message = { + id: `${Date.now()}_${Math.random().toString(16).slice(2)}`, + name: 'Sagi', + role: 'user', + agentId: 'user', + content, + timestamp: Date.now(), + }; - if (!content) return; + // 如果没有 sessionId，先创建会话 + let currentSessionId = sessionId; + let currentAgentConfig = agentConfig; + if (!currentSessionId) { + // 从 agents 中获取第一个助手作为默认 + const defaultAgent = props.agents[0]; + if (!defaultAgent) { + isSendingMessage.value = false; + return; + } + currentAgentConfig = { + agentId: Number(defaultAgent.id), + name: defaultAgent.name, + avatar: defaultAgent.avatar || '', + systemPrompt: defaultAgent.systemPrompt || '', + }; + // 创建新会话 + try { + const convResponse = await createConversationApi({ agentId: Number(defaultAgent.id) }); + currentSessionId = convResponse.sessionId; + // 通知父组件创建了新会话 + context.emit('createConversation', { + id: currentSessionId, + title: currentAgentConfig.name, + messages: [], + agentId: String(currentAgentConfig.agentId), + agentConfig: currentAgentConfig, + }); + } catch (error) { + console.error('创建会话失败:', error); + isSendingMessage.value = false; + return; + } + } else if (!currentAgentConfig) { + // 如果有 sessionId 但没有 agentConfig，使用默认助手（不创建新会话） + const defaultAgent = props.agents[0]; + if (defaultAgent) { + currentAgentConfig = { + agentId: Number(defaultAgent.id), + name: defaultAgent.name, + avatar: defaultAgent.avatar || '', + systemPrompt: defaultAgent.systemPrompt || '', + }; + } + } + // 清空编辑器 if (editorRef.value) editorRef.value.innerHTML = ''; if (slotEditorRef.value) displayedSlotConfigs.value = []; selectedSkills.value = []; message.value = ''; - const id = `msg-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`; - const newMsg: Message = { - id, - name: '用户', - role: 'user', - content: { type: 'text', text: content }, - timestamp: Date.now(), - agentId: agentIdRef.value || '', - }; - messages.value = [...messages.value, newMsg]; - context.emit('sendMessage', { id, messages: messages.value }); + // 先添加用户消息到列表 + if (!isTabMode.value) { + messages.value = [...messages.value, userMessage]; + } else { + // 页签模式下通知父组件添加用户消息 + context.emit('sendMessage', content, userMessage); + } + + // 调用 API 发送消息 + if (!currentAgentConfig) { + console.error('发送消息失败: 缺少助手配置'); + isSendingMessage.value = false; + return; + } + try { + const response = await sendMessageApi({ + sessionId: currentSessionId, + message: content, + agentConfig: currentAgentConfig, + runtimeConfig: { + model: selectedModel.value?.modelId || 'gpt-4o', + enableWebSearch: enableWebSearch.value, + memoryEnabled: memoryEnabled.value, + memoryLevel: memoryLevel.value, + }, + fileIds: uploadedFileIds.value, + }); + + // 添加助手回复到消息列表 + const assistantMessage: Message = { + id: `${Date.now()}_${Math.random().toString(16).slice(2)}`, + name: currentAgentConfig.name, + role: 'assistant', + agentId: String(currentAgentConfig.agentId), + content: response.content, + timestamp: Date.now(), + }; + + if (!isTabMode.value) { + messages.value = [...messages.value, assistantMessage]; + } else { + context.emit('assistantMessage', assistantMessage); + } + } catch (error) { + console.error('发送消息失败:', error); + // 可以在这里添加错误提示 + } finally { + isSendingMessage.value = false; + // 清空已上传文件 + uploadedFileIds.value = []; + // 重新确保常驻标签存在 + ensurePermanentAgentTag(); + } } function collapseChatNavPane() { @@ -618,6 +779,52 @@ export default defineComponent({ updateMessageFromEditor(); } + /** 确保编辑器中有常驻的 agent 标签（不可删除） */ + function ensurePermanentAgentTag() { + const editor = editorRef.value; + if (!editor) return; + const agentConfig = activeConversation.value?.agentConfig; + if (!agentConfig) return; + const agentName = agentConfig.name; + // 检查是否已有常驻标签 + const existingTag = editor.querySelector('.f-chat-agent-tag[data-permanent="true"]'); + if (existingTag) { + // 已有标签，检查 agent 名称是否匹配 + const existingAgentName = existingTag.getAttribute('data-agent'); + if (existingAgentName === agentName) { + // 名称相同，不需要更新 + return; + } + // 名称不同，移除旧标签 + existingTag.remove(); + } + // 创建常驻标签（无删除按钮） + const tagEl = document.createElement('span'); + tagEl.className = 'f-chat-agent-tag'; + tagEl.setAttribute('data-agent', agentName); + tagEl.setAttribute('data-permanent', 'true'); + (tagEl as any).contentEditable = 'false'; + const textEl = document.createElement('span'); + textEl.className = 'f-chat-agent-tag-text'; + textEl.textContent = `@${agentName}`; + tagEl.appendChild(textEl); + // 插入到编辑器开头 + if (editor.firstChild) { + editor.insertBefore(tagEl, editor.firstChild); + } else { + editor.appendChild(tagEl); + } + // 在标签后添加空格 + const firstChild = editor.firstChild; + if (firstChild && firstChild.nextSibling) { + const space = document.createTextNode(' '); + editor.insertBefore(space, firstChild.nextSibling); + } else { + const space = document.createTextNode(' '); + editor.appendChild(space); + } + } + function handleAgentDblClick(agent: ChatAgent) { insertAgentMention(agent.name); } @@ -791,37 +998,53 @@ export default defineComponent({
{shouldShowAgentButton.value && !selectedAssistiveTool.value && (
- - -
    - {props.agents.map((item: ChatAgent) => { - return ( -
  • { - selectedAgent.value = item; - hideAgentListPanel(); - }}> -
    - - {item.name} -
    - -
    • - ); - })} -
- + {/* 模型选择 */} + {modelList.value.length > 0 && ( + + )} + {/* 联网搜索开关 */} + + {/* 记忆功能开关 */} + + {/* 记忆级别选择 */} + {memoryEnabled.value && ( + + )} {shouldShowAssistiveTool.value && (
)}
+ {agentDetailActiveTab.value !== 'overview' && (agent.systemPrompt || agent.description) && ( @@ -1382,16 +1740,31 @@ export default defineComponent({
相关助理 - 查看更多 › + 查看更多 ›
{relatedAgents.map(ra => (
openAgentDetail(ra)}>
- {ra.avatar - ? {ra.name} - :
- } +
+ {ra.avatar ? ( + {ra.name} { + avatarLoadFailed.value[ra.id] = true; + const img = e.target as HTMLImageElement; + img.classList.add('error'); + const parent = img.parentElement; + if (parent) { + const fallback = parent.querySelector('.f-chat-nav-agent-avatar-image') as HTMLElement; + if (fallback) fallback.classList.remove('hidden'); + } + }} + /> + ) : null} +
+
{ra.title || ra.name}
@@ -1434,32 +1807,36 @@ export default defineComponent({
-
- { agentHubActiveCategory.value = id; }} - /> -
-
- - {{ - content: (scope: { item: ChatAgent; index: number }) => renderAgentHubCard(scope.item) - }} - - {filteredAgents.value.length === 0 && ( -
暂无匹配的专家
- )} +
+
+ { agentHubActiveCategory.value = id; }} + key={props.agents.length} + /> +
+
+ + {{ + content: (scope: { item: ChatAgent; index: number }) => renderAgentHubCard(scope.item) + }} + + {filteredAgents.value.length === 0 && ( +
暂无匹配的专家
+ )} +
)} @@ -1467,7 +1844,13 @@ export default defineComponent({ ); return () => { - const hasMessages = isTabMode.value ? hasTabMessagesArea.value : messages.value.length > 0; + // 页签模式下：检查是否有激活的会话且会话中有消息 + const activeConversation = isTabMode.value + ? props.conversations?.find(c => c.id === props.activeConversationId) + : null; + const hasMessages = isTabMode.value + ? (props.activeConversationId !== null && (activeConversation?.messages.length ?? 0) > 0) + : messages.value.length > 0; const strategy = layoutStrategy.value; const contentCtx: ContentAreaContext = { hasMessages, diff --git a/packages/conversation/src/components/conversation/conversation.props.ts b/packages/conversation/src/components/conversation/conversation.props.ts index 77a3df9767d7cebd9bd9b1ba2b7ab77e8b2ec49f..e3e064b4386365f9fc8dc85756402b1014a1a18e 100644 --- a/packages/conversation/src/components/conversation/conversation.props.ts +++ b/packages/conversation/src/components/conversation/conversation.props.ts @@ -56,6 +56,12 @@ export interface ChatAgent { /** 内置技能详情 */ builtinSkills?: AgentBuiltinSkill[]; icon?: string; + /** 价格（用于展示） */ + price?: number; + /** 状态：1-上架，0-下架（用于展示） */ + status?: number; + /** 详细介绍（用于详情页简介 Tab） */ + longDescription?: string; } /** 对话类型（页签模式） */ @@ -64,16 +70,15 @@ export interface ConversationData { title: string; /** 已显示在界面上的消息 */ messages: Message[]; - /** 待显示队列；发送时将队首移入 messages */ - pendingMessages: Message[]; -} - -/** 历史对话项类型 */ -export interface HistoryItem { - id?: string; - title: string; - icon?: string; - onClick?: () => void; + /** 会话关联的智能体 ID */ + agentId?: string; + /** 智能体配置快照 */ + agentConfig?: { + agentId: number; + name: string; + avatar: string; + systemPrompt: string; + }; } /** 导航动作项类型 */ @@ -110,6 +115,14 @@ export interface AssistiveTool { configs: SlotConfig[]; } +/** 模型信息 */ +export interface ModelInfo { + id: number; + name: string; + modelId: string; + provider: string; +} + export const conversationProps = { /** 面板位置：left | right | center */ chatPanePosition: { @@ -136,11 +149,6 @@ export const conversationProps = { type: Array as PropType, default: () => [] }, - /** 历史对话列表（由外部传入） */ - historyItems: { - type: Array as PropType, - default: () => [] - }, /** 导航标题 */ navTitle: { type: String, @@ -191,24 +199,19 @@ export const conversationProps = { type: String as PropType, default: null }, + /** 打开的标签页 id 列表（页签模式），用于渲染标签页头 */ + openTabIds: { + type: Array as PropType, + default: () => [] + }, assistiveTools: { type: Array as PropType, default: () => [] }, - /** 当前智能体ID */ - currentAgentId: { - type: String as PropType, - default: null - }, - /** 当前话题ID */ - currentTopicId: { - type: String as PropType, - default: null - }, - /** 当前会话ID */ - currentSessionId: { - type: String as PropType, - default: null + /** 可用模型列表 */ + models: { + type: Array as PropType, + default: () => [] } }; diff --git a/packages/conversation/src/components/conversation/input-editor.scss b/packages/conversation/src/components/conversation/input-editor.scss new file mode 100644 index 0000000000000000000000000000000000000000..01dfc32a722329885aa70255cc4b9af699e73f14 --- /dev/null +++ b/packages/conversation/src/components/conversation/input-editor.scss @@ -0,0 +1,32 @@ +.f-chat-content-input-single-editor { + outline: none; + white-space: pre-wrap; + word-break: break-word; + font-size: 15px; + min-height: 38px; + max-height: 120px; + line-height: 1.6; + color: #1e293b; + background: #f8fafc; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 10px; + padding: 8px 12px; + transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; + + &:hover { + border-color: rgba(50, 139, 255, 0.3); + background: #fff; + } + + &:focus { + border-color: #328bff; + background: #fff; + box-shadow: 0 0 0 3px rgba(50, 139, 255, 0.1); + } + + &.is-empty::before { + content: attr(data-placeholder); + color: #94a3b8; + pointer-events: none; + } +} diff --git a/packages/conversation/src/components/conversation/types/agent.ts b/packages/conversation/src/components/conversation/types/agent.ts new file mode 100644 index 0000000000000000000000000000000000000000..9f94c8e3d5800ce8aec836c8efa9b8ef7b0ede57 --- /dev/null +++ b/packages/conversation/src/components/conversation/types/agent.ts @@ -0,0 +1,199 @@ +/** + * Spring Boot API 响应类型定义 + * 与 farris-x 类型之间的映射定义在 mapping.ts 中 + */ + +/** 演示对话项 */ +export interface DemoConversation { + role: 'user' | 'assistant'; + content: string; +} + +/** 专家版本历史 */ +export interface AgentVersion { + id: number; + agentId: number; + version: string; + description: string; + createTime: string; +} + +/** 专家分类 */ +export interface AgentCategory { + id: number; + name: string; + sortOrder: number; + count: number; +} + +/** 内置技能 */ +export interface AgentBuiltinSkill { + id: number; + agentId: number; + name: string; + tag: string; + description: string; + icon: string; + createTime: string; +} + +/** + * Spring Boot API 专家详情响应 + * 注意：skills 和 demoConversations 是 JSON 字符串 + */ +export interface AgentDetailResponse { + id: number; + categoryId: number; + avatarUrl: string; + description: string; + longDescription: string; + systemPrompt: string; + author: string; + likeCount: number; + useCount: number; + price: number; + status: number; + name: string; + title: string; + views: number; + skills: string; // JSON string + demoConversations: string; // JSON string + createTime: string; + updateTime: string; +} + +/** + * Spring Boot API 专家列表项响应 + */ +export interface AgentListItem { + id: number; + categoryId: number; + avatarUrl: string; + description: string; + longDescription: string; + systemPrompt: string; + author: string; + likeCount: number; + useCount: number; + price: number; + status: number; + name: string; + title: string; + views: number; + skills: string; + demoConversations: string; + createTime: string; + updateTime: string; +} + +/** 分页响应 */ +export interface PagedResponse { + records: T[]; + total: number; + size: number; + current: number; + pages: number; +} + +/** 统一响应格式 */ +export interface ApiResponse { + code: number; + msg: string; + data: T; +} + +/** 创建会话请求 */ +export interface CreateConversationRequest { + agentId: number; +} + +/** 创建会话响应 */ +export interface CreateConversationResponse { + sessionId: string; + agentConfig: { + agentId: number; + name: string; + avatar: string; + systemPrompt: string; + }; +} + +/** 聊天消息 */ +export interface ChatMessage { + id: number; + sessionId: number; + role: 'user' | 'assistant'; + content: string; + model: string; + createTime: string; +} + +/** 运行时配置 */ +export interface RuntimeConfig { + model: string; + enableWebSearch: boolean; + memoryEnabled: boolean; + memoryLevel: 'high' | 'medium' | 'low'; +} + +/** 发送消息请求 */ +export interface SendMessageRequest { + sessionId: string; + message: string; + agentConfig: { + agentId: number; + name: string; + avatar: string; + systemPrompt: string; + }; + runtimeConfig: RuntimeConfig; + fileIds: string[]; +} + +/** 发送消息响应 */ +export interface SendMessageResponse { + content: string; + sessionId: string; +} + +/** 模型信息 */ +export interface ModelInfo { + id: number; + provider: string; + modelId: string; + name: string; + contextWindow: number; + abilities: string; // JSON string + inputPrice: number; + outputPrice: number; + isEnabled: boolean; + sortOrder: number; +} + +/** 上传文件响应 */ +export interface UploadFileResponse { + fileId: string; + fileName: string; + fileSize: number; + fileType: string; +} + +/** 创建助手请求 */ +export interface CreateAgentRequest { + name: string; + categoryId: number; + avatarUrl: string; + description: string; + longDescription: string; + systemPrompt: string; + skills: string[]; + builtinSkills: Array<{ + name: string; + tag: string; + description: string; + icon: string; + }>; + demoConversations: DemoConversation[]; + price: number; + status: number; +} diff --git a/packages/conversation/src/components/conversation/types/index.ts b/packages/conversation/src/components/conversation/types/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..7f24fbe476b7b575c4590ef62d978cca04110b3b --- /dev/null +++ b/packages/conversation/src/components/conversation/types/index.ts @@ -0,0 +1,7 @@ +/** + * 类型定义导出 + */ + +export * from './agent'; +export * from './mapping'; +export * from './skillMarket'; diff --git a/packages/conversation/src/components/conversation/types/mapping.ts b/packages/conversation/src/components/conversation/types/mapping.ts new file mode 100644 index 0000000000000000000000000000000000000000..2980890ed36ade325f5995431f29d9883ab6c1c0 --- /dev/null +++ b/packages/conversation/src/components/conversation/types/mapping.ts @@ -0,0 +1,100 @@ +/** + * Spring Boot API 响应与 farris-x 类型之间的字段映射 + */ + +import type { ChatAgent, AgentBuiltinSkill as FarrisBuiltinSkill } from '../conversation.props'; +import type { + AgentDetailResponse, + AgentListItem, + AgentBuiltinSkill, + AgentVersion, + DemoConversation, +} from './agent'; + +/** + * 解析 JSON 字符串字段 + * 如果解析失败或为空，返回空数组 + */ +function parseJsonArray(jsonStr: string | null | undefined, fallback: T[] = []): T[] { + if (!jsonStr) return fallback; + try { + const parsed = JSON.parse(jsonStr); + return Array.isArray(parsed) ? parsed : fallback; + } catch { + return fallback; + } +} + +/** + * 将 Spring Boot 专家列表项映射为 farris-x ChatAgent + */ +export function mapAgentListItem(item: AgentListItem): Partial { + return { + id: String(item.id), + name: item.name || item.title || '', + title: item.title, + category: String(item.categoryId), // 后续需要通过分类接口获取分类名 + description: item.description, + avatar: item.avatarUrl || undefined, + views: item.views, + likes: item.likeCount, + creator: item.author, + createdDate: item.createTime ? new Date(item.createTime).toLocaleDateString('zh-CN') : undefined, + systemPrompt: item.systemPrompt, + skills: parseJsonArray(item.skills), + // 以下字段需要详情接口补充 + builtinSkills: undefined, + forkCount: undefined, + }; +} + +/** + * 将 Spring Boot 专家详情映射为 farris-x ChatAgent + */ +export function mapAgentDetail(detail: AgentDetailResponse): Partial { + return { + id: String(detail.id), + name: detail.name || detail.title || '', + title: detail.title, + description: detail.description, + avatar: detail.avatarUrl || undefined, + views: detail.views, + likes: detail.likeCount, + creator: detail.author, + createdDate: detail.createTime ? new Date(detail.createTime).toLocaleDateString('zh-CN') : undefined, + systemPrompt: detail.systemPrompt, + skills: parseJsonArray(detail.skills), + // price 和 status 用于展示，存储在组件内部 state + // longDescription 用于详情展示 + // demoConversations 用于概览 Tab 展示 + }; +} + +/** + * 将 Spring Boot 内置技能映射为 farris-x AgentBuiltinSkill + */ +export function mapBuiltinSkill(skill: AgentBuiltinSkill): FarrisBuiltinSkill { + return { + name: skill.name, + tag: skill.tag, + description: skill.description, + icon: skill.icon || undefined, + }; +} + +/** + * 将 Spring Boot 版本历史列表映射 + */ +export function mapVersions(versions: AgentVersion[]): AgentVersion[] { + return versions.map(v => ({ + ...v, + createTime: v.createTime ? new Date(v.createTime).toLocaleDateString('zh-CN') : '', + })); +} + +/** + * 将演示对话 JSON 解析为 DemoConversation 数组 + */ +export function parseDemoConversations(jsonStr: string | null | undefined): DemoConversation[] { + return parseJsonArray(jsonStr); +} diff --git a/packages/conversation/src/components/conversation/types/mockData.ts b/packages/conversation/src/components/conversation/types/mockData.ts new file mode 100644 index 0000000000000000000000000000000000000000..f2c15d16aa3e18ee3451e258bee3599b287ab5f7 --- /dev/null +++ b/packages/conversation/src/components/conversation/types/mockData.ts @@ -0,0 +1,176 @@ +/** + * Mock 数据 + * 当 Spring Boot API 没有返回数据时作为后备展示 + */ + +import type { ChatAgent } from './conversation.props'; +import type { AgentVersion } from './agent'; + +export const MOCK_CATEGORIES = [ + { id: 1, name: '办公提效', sortOrder: 1, count: 12 }, + { id: 2, name: '学术研究', sortOrder: 2, count: 8 }, + { id: 3, name: '编程开发', sortOrder: 3, count: 15 }, + { id: 4, name: '生活助手', sortOrder: 4, count: 6 }, +]; + +export const MOCK_AGENTS: ChatAgent[] = [ + { + id: '1', + name: 'Excel助手', + title: 'Excel专家', + category: '办公提效', + description: '精通Excel公式、数据透视表、VBA自动化，帮助你高效处理数据', + avatar: '', + views: 1256, + likes: 89, + forkCount: 23, + creator: '张三', + createdDate: '2024-01-15', + skills: ['公式生成', '数据透视表', 'VBA自动化'], + price: 0, + status: 1, + systemPrompt: '你是一位专业的Excel专家，精通各种Excel操作，包括公式编写、数据透视表、VBA自动化等。你会用简单易懂的方式解释复杂的Excel技巧。', + longDescription: 'Excel助手是一款专注于提升办公效率的智能助手。它能够帮助用户：\n\n1. **公式生成**：根据描述自动生成复杂的Excel公式，支持VLOOKUP、INDEX-MATCH、SUMIFS等多种函数\n2. **数据透视表**：快速创建数据透视表，支持多维度汇总和自定义计算\n3. **VBA自动化**：编写VBA宏实现批量数据处理和自动化工作流\n4. **图表可视化**：根据数据自动推荐并生成合适的图表类型', + builtinSkills: [ + { name: '公式生成', tag: 'Excel', description: '根据描述自动生成复杂Excel公式，支持VLOOKUP、INDEX-MATCH等' }, + { name: '数据透视表', tag: 'Excel', description: '快速创建数据透视表，支持多维度汇总和自定义计算' }, + { name: 'VBA自动化', tag: 'Excel', description: '编写VBA宏实现批量数据处理和自动化工作流' }, + { name: '图表可视化', tag: 'Excel', description: '根据数据自动推荐并生成合适的图表类型' }, + ], + }, + { + id: '2', + name: '论文助手', + title: '学术写作专家', + category: '学术研究', + description: '帮助撰写文献综述、研究方法指导、格式规范检查', + avatar: '', + views: 2341, + likes: 156, + forkCount: 45, + creator: '李四', + createdDate: '2024-02-20', + skills: ['文献综述', '研究方法', '格式规范'], + price: 0, + status: 1, + systemPrompt: '你是一位资深的学术写作专家，在学术研究领域有丰富的经验。你会帮助用户提升学术写作的质量和效率。', + longDescription: '论文助手是一款专注于学术研究的智能助手。它能够帮助用户：\n\n1. **文献综述**：帮助梳理和总结学术文献的核心观点\n2. **研究方法**：推荐合适的研究方法和实验设计\n3. **格式规范**：自动检查论文格式是否符合目标期刊要求\n4. **数据分析**：支持SPSS、Python等工具进行统计分析', + builtinSkills: [ + { name: '文献综述', tag: '论文', description: '帮助梳理和总结学术文献的核心观点' }, + { name: '研究方法', tag: '论文', description: '推荐合适的研究方法和实验设计' }, + { name: '格式规范', tag: '论文', description: '自动检查论文格式是否符合目标期刊要求' }, + { name: '文献检索', tag: '论文', description: '帮助检索和管理学术文献' }, + ], + }, + { + id: '3', + name: '代码审查', + title: '代码审查专家', + category: '编程开发', + description: '静态代码分析，发现潜在bug和安全风险，提供优化建议', + avatar: '', + views: 3456, + likes: 234, + forkCount: 67, + creator: '王五', + createdDate: '2024-03-10', + skills: ['代码审查', 'Bug发现', '性能优化', '安全审计'], + price: 0, + status: 1, + systemPrompt: '你是一位专业的代码审查专家，精通多种编程语言和架构设计。你会通过静态代码分析发现潜在的问题和安全风险。', + longDescription: '代码审查助手是一款专注于编程开发的智能助手。它能够帮助用户：\n\n1. **代码审查**：静态代码分析，发现潜在bug和安全风险\n2. **Bug发现**：通过代码分析发现潜在的bug和问题\n3. **性能优化**：分析代码性能瓶颈，提供优化建议\n4. **安全审计**：检查代码安全漏洞，提供修复建议', + builtinSkills: [ + { name: '代码审查', tag: '开发', description: '静态代码分析，发现潜在bug和安全风险' }, + { name: 'Bug发现', tag: '开发', description: '通过代码分析发现潜在的bug和问题' }, + { name: '性能优化', tag: '开发', description: '分析代码性能瓶颈，提供优化建议' }, + { name: '安全审计', tag: '开发', description: '检查代码安全漏洞，提供修复建议' }, + { name: '架构设计', tag: '架构', description: '提供系统架构设计和重构建议' }, + ], + }, + { + id: '4', + name: '旅行规划', + title: '旅行顾问', + category: '生活助手', + description: '提供旅行路线规划、酒店和景点推荐，让旅行更轻松', + avatar: '', + views: 1890, + likes: 112, + forkCount: 34, + creator: '赵六', + createdDate: '2024-04-05', + skills: ['旅行规划', '酒店推荐', '景点推荐'], + price: 0, + status: 1, + systemPrompt: '你是一位热情的旅行顾问，熟悉全球各地的旅游资源，能够为用户规划完美的旅行路线。', + builtinSkills: [ + { name: '旅行规划', tag: '生活', description: '提供旅行路线规划、酒店和景点推荐' }, + { name: '食谱推荐', tag: '生活', description: '根据食材和口味推荐菜谱' }, + ], + }, + { + id: '5', + name: 'PPT制作', + title: '演示文稿专家', + category: '办公提效', + description: '帮助梳理演讲逻辑，提供排版设计建议，制作专业PPT', + avatar: '', + views: 987, + likes: 67, + forkCount: 18, + creator: '孙七', + createdDate: '2024-05-12', + skills: ['逻辑梳理', '排版设计', '内容提炼'], + price: 0, + status: 1, + systemPrompt: '你是一位专业的演示文稿设计师，精通PPT制作和演示技巧，能够帮助用户制作出专业精美的演示文稿。', + builtinSkills: [ + { name: '逻辑梳理', tag: 'PPT', description: '帮助梳理演讲或文档的逻辑结构' }, + { name: '排版设计', tag: 'PPT', description: '提供专业的排版建议和视觉设计' }, + { name: '内容提炼', tag: 'PPT', description: '从长文本中提炼关键要点，生成精炼摘要' }, + ], + }, + { + id: '6', + name: '架构设计', + title: '系统架构师', + category: '编程开发', + description: '提供系统架构设计和重构建议，设计高质量系统', + avatar: '', + views: 2789, + likes: 189, + forkCount: 56, + creator: '周八', + createdDate: '2024-06-18', + skills: ['架构设计', 'API设计', '性能优化'], + price: 0, + status: 1, + systemPrompt: '你是一位经验丰富的系统架构师，精通各种架构模式和设计原则，能够帮助用户设计高质量的系统架构。', + builtinSkills: [ + { name: '架构设计', tag: '架构', description: '提供系统架构设计和重构建议' }, + { name: 'API设计', tag: '开发', description: '帮助设计RESTful API和接口规范' }, + { name: '性能优化', tag: '开发', description: '分析代码性能瓶颈，提供优化建议' }, + ], + }, +]; + +// Mock 版本历史 +export const MOCK_VERSIONS: AgentVersion[] = [ + { id: 1, agentId: 1, version: 'v1.2.0', description: '新增图表可视化功能，支持自动推荐图表类型', createTime: '2024-03-15' }, + { id: 2, agentId: 1, version: 'v1.1.0', description: '优化公式生成算法，支持更多函数类型', createTime: '2024-02-20' }, + { id: 3, agentId: 1, version: 'v1.0.0', description: '初始版本发布', createTime: '2024-01-15' }, +]; + +// 获取专家对应的 mock 版本历史 +export function getMockVersions(agentId: string): AgentVersion[] { + const agent = MOCK_AGENTS.find(a => a.id === agentId); + if (!agent) return MOCK_VERSIONS; + return MOCK_VERSIONS.map(v => ({ ...v, agentId: Number(agentId) })); +} + +// 获取 mock 相似专家 +export function getMockSimilarAgents(agentId: string): ChatAgent[] { + const agent = MOCK_AGENTS.find(a => a.id === agentId); + if (!agent) return MOCK_AGENTS.slice(0, 3); + return MOCK_AGENTS.filter(a => a.id !== agentId && a.category === agent.category).slice(0, 3); +} diff --git a/packages/conversation/src/components/conversation/types/skillMarket.ts b/packages/conversation/src/components/conversation/types/skillMarket.ts new file mode 100644 index 0000000000000000000000000000000000000000..1e83ab6e18d09205d8e39224b9ca251770279ac1 --- /dev/null +++ b/packages/conversation/src/components/conversation/types/skillMarket.ts @@ -0,0 +1,47 @@ +/** + * 技能市场 Mock 数据 + * 从 Spring Boot 项目 skill-market.js 迁移 + */ + +export const SKILL_CATEGORIES = ['全部', '办公提效', '学术研究', '编程开发', '生活助手']; + +export interface SkillItem { + id: number; + name: string; + tag: string; + category: string; + description: string; + icon: string; +} + +export const SKILLS_DATA: SkillItem[] = [ + // 办公提效 + { id: 1, name: '公式生成', tag: 'Excel', category: '办公提效', description: '根据描述自动生成复杂Excel公式，支持VLOOKUP、INDEX-MATCH等', icon: '⚡' }, + { id: 2, name: '数据透视表', tag: 'Excel', category: '办公提效', description: '快速创建数据透视表，支持多维度汇总和自定义计算', icon: '📊' }, + { id: 3, name: 'VBA自动化', tag: 'Excel', category: '办公提效', description: '编写VBA宏实现批量数据处理和自动化工作流', icon: '🔧' }, + { id: 4, name: '图表可视化', tag: 'Excel', category: '办公提效', description: '根据数据自动推荐并生成合适的图表类型', icon: '📈' }, + { id: 5, name: '逻辑梳理', tag: 'PPT', category: '办公提效', description: '帮助梳理演讲或文档的逻辑结构', icon: '🧠' }, + { id: 6, name: '排版设计', tag: 'PPT', category: '办公提效', description: '提供专业的排版建议和视觉设计', icon: '🎨' }, + { id: 7, name: '内容提炼', tag: 'PPT', category: '办公提效', description: '从长文本中提炼关键要点，生成精炼摘要', icon: '✂️' }, + + // 学术研究 + { id: 8, name: '文献综述', tag: '论文', category: '学术研究', description: '帮助梳理和总结学术文献的核心观点', icon: '📚' }, + { id: 9, name: '研究方法', tag: '论文', category: '学术研究', description: '推荐合适的研究方法和实验设计', icon: '🔬' }, + { id: 10, name: '格式规范', tag: '论文', category: '学术研究', description: '自动检查论文格式是否符合目标期刊要求', icon: '📝' }, + { id: 11, name: '数据分析', tag: '统计', category: '学术研究', description: '支持SPSS、Python等工具进行统计分析', icon: '📉' }, + { id: 12, name: '文献检索', tag: '论文', category: '学术研究', description: '帮助检索和管理学术文献', icon: '🔍' }, + + // 编程开发 + { id: 13, name: '代码审查', tag: '开发', category: '编程开发', description: '静态代码分析，发现潜在bug和安全风险', icon: '👀' }, + { id: 14, name: 'Bug发现', tag: '开发', category: '编程开发', description: '通过代码分析发现潜在的bug和问题', icon: '🐛' }, + { id: 15, name: '性能优化', tag: '开发', category: '编程开发', description: '分析代码性能瓶颈，提供优化建议', icon: '⚡' }, + { id: 16, name: '安全审计', tag: '开发', category: '编程开发', description: '检查代码安全漏洞，提供修复建议', icon: '🔒' }, + { id: 17, name: '架构设计', tag: '架构', category: '编程开发', description: '提供系统架构设计和重构建议', icon: '🏗️' }, + { id: 18, name: 'API设计', tag: '开发', category: '编程开发', description: '帮助设计RESTful API和接口规范', icon: '🔗' }, + + // 生活助手 + { id: 19, name: '旅行规划', tag: '生活', category: '生活助手', description: '提供旅行路线规划、酒店和景点推荐', icon: '✈️' }, + { id: 20, name: '食谱推荐', tag: '生活', category: '生活助手', description: '根据食材和口味推荐菜谱', icon: '🍳' }, + { id: 21, name: '健康咨询', tag: '生活', category: '生活助手', description: '提供健康饮食和运动建议', icon: '💪' }, + { id: 22, name: '理财规划', tag: '生活', category: '生活助手', description: '提供个人理财和投资建议', icon: '💰' }, +]; diff --git a/packages/conversation/src/style.scss b/packages/conversation/src/style.scss index 16899ac97e97c75e953836e655f04e150351d432..6d0946a65e0310eb508515cfcc783cb8f1f7bf37 100644 --- a/packages/conversation/src/style.scss +++ b/packages/conversation/src/style.scss @@ -77,7 +77,8 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); position: relative; height: 100%; padding: 12px; - background-color: rgb(229 242 255 / 40%); + background-color: #f8fafc; + border-right: 1px solid rgba(0, 0, 0, 0.04); transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); @@ -273,11 +274,16 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); justify-content: center; flex-shrink: 0; overflow: hidden; + position: relative; >img { width: 100%; height: 100%; object-fit: cover; + + &.error { + display: none; + } } .f-chat-nav-agent-avatar-image { @@ -621,8 +627,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); flex: 1; min-height: 0; overflow: hidden; - // background: rgba(229, 242, 255, 0.4); - background: #d8d9db30 + background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); } .f-chat-content-main-layout { @@ -708,34 +713,36 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); .f-chat-content-input { flex: 0 0 auto; - border: 1px solid rgba(233, 234, 243, 1); - border-radius: 7.59px; + border: 1px solid rgba(228, 236, 252, 1); + border-radius: 20px; background: #fff; - box-shadow: 0px 2px 10px 0px rgba(33, 62, 126, 0.13); - padding: 10px 10px 8px; + box-shadow: 0 4px 24px rgba(37, 99, 235, 0.1); + padding: 16px 20px 14px; z-index: 1; - margin: 0.5rem; + margin: 1rem 1.5rem; + transition: all 0.2s ease; &.focus { - border-color: #2a87ff; + border-color: #328bff; + box-shadow: 0 6px 32px rgba(37, 99, 235, 0.15); } >.f-chat-content-input-editor { width: 100%; - min-height: 88px; - max-height: 180px; + min-height: 120px; + max-height: 240px; overflow: auto; outline: none; white-space: pre-wrap; word-break: break-word; - font-size: 14px; - line-height: 20px; - color: rgba(0, 0, 0, 0.85); - margin-bottom: 10px; + font-size: 15px; + line-height: 1.7; + color: #1e293b; + margin-bottom: 12px; &:empty::before { content: attr(data-placeholder); - color: #9aa8bf; + color: #94a3b8; pointer-events: none; } @@ -743,17 +750,18 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); display: inline-flex; align-items: center; gap: 6px; - padding: 2px 8px; - border-radius: 12px; - background: rgba(50, 139, 255, 0.12); - border: 1px solid rgba(50, 139, 255, 0.35); - color: $primary-blue; + padding: 4px 10px; + border-radius: 14px; + background: linear-gradient(135deg, rgba(50, 139, 255, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%); + border: 1px solid rgba(50, 139, 255, 0.25); + color: #2563eb; vertical-align: baseline; - margin-right: 4px; + margin-right: 6px; + font-weight: 500; .f-chat-skill-tag-text { - font-size: 12px; - line-height: 18px; + font-size: 13px; + line-height: 20px; font-weight: 600; } @@ -763,8 +771,8 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); padding: 0; border: none; border-radius: 9px; - background: rgba(50, 139, 255, 0.18); - color: $primary-blue; + background: rgba(50, 139, 255, 0.15); + color: #2563eb; cursor: pointer; line-height: 18px; display: inline-flex; @@ -774,7 +782,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); user-select: none; &:hover { - background: rgba(50, 139, 255, 0.28); + background: rgba(50, 139, 255, 0.25); } } } @@ -783,17 +791,18 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); display: inline-flex; align-items: center; gap: 6px; - padding: 2px 8px; + padding: 4px 10px; border-radius: 14px; - background: rgba(50, 139, 255, 0.1); - border: 1px solid rgba(50, 139, 255, 0.35); - color: $primary-blue; + background: linear-gradient(135deg, rgba(50, 139, 255, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%); + border: 1px solid rgba(50, 139, 255, 0.25); + color: #2563eb; vertical-align: baseline; - margin-right: 4px; + margin-right: 6px; + font-weight: 500; .f-chat-agent-tag-text { - font-size: 12px; - line-height: 18px; + font-size: 13px; + line-height: 20px; font-weight: 600; } @@ -803,8 +812,8 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); padding: 0; border: none; border-radius: 9px; - background: rgba(50, 139, 255, 0.16); - color: $primary-blue; + background: rgba(50, 139, 255, 0.15); + color: #2563eb; cursor: pointer; line-height: 18px; display: inline-flex; @@ -814,21 +823,22 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); user-select: none; &:hover { - background: rgba(50, 139, 255, 0.26); + background: rgba(50, 139, 255, 0.25); } } } .f-chat-content-input-slot-input { - background-color: #EAF2FF; - padding: 2px 6px; - border-radius: 6px; + background-color: rgba(50, 139, 255, 0.08); + padding: 4px 10px; + border-radius: 8px; display: inline-flex; align-items: center; font-size: 13px; margin: 0 6px; overflow: hidden; vertical-align: middle; + border: 1px solid rgba(50, 139, 255, 0.2); input { border: none; @@ -839,14 +849,14 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); width: 100%; min-width: 0; font-family: inherit; - color: #7191c8; + color: #2563eb; white-space: nowrap; line-height: normal; padding: 0; margin: 0; &:focus { - color: #333; // 获得焦点时的颜色 + color: #1e40af; } &:not(:placeholder-shown) { @@ -870,20 +880,38 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); display: flex; align-items: center; justify-content: space-between; - gap: 10px; + gap: 16px; + padding-top: 8px; >.f-chat-content-input-single-editor { outline: none; white-space: pre-wrap; word-break: break-word; - font-size: 14px; - height: 20px; - line-height: 20px; - color: rgba(0, 0, 0, 0.85); + font-size: 15px; + min-height: 38px; + max-height: 120px; + line-height: 1.6; + color: #1e293b; + background: #f8fafc; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 10px; + padding: 8px 12px; + transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; + + &:hover { + border-color: rgba(50, 139, 255, 0.3); + background: #fff; + } + + &:focus { + border-color: #328bff; + background: #fff; + box-shadow: 0 0 0 3px rgba(50, 139, 255, 0.1); + } - &:empty::before { + &[data-empty='true']::before { content: attr(data-placeholder); - color: #9aa8bf; + color: #94a3b8; pointer-events: none; } } @@ -892,7 +920,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); >.f-chat-content-input-toolbar-right { display: flex; align-items: center; - gap: 8px; + gap: 12px; flex-wrap: wrap; } @@ -900,36 +928,37 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); display: inline-flex; align-items: center; gap: 6px; - border: none; - background: transparent; - padding: 6px; - border-radius: 10px; + border: 1px solid rgba(0, 0, 0, 0.06); + background: #fff; + padding: 6px 10px; + border-radius: 8px; cursor: pointer; - color: rgba(0, 0, 0, 0.65); - transition: - background-color 0.2s ease, - box-shadow 0.2s ease, - color 0.2s ease; + color: #64748b; + transition: all 0.2s ease; -webkit-user-select: none; user-select: none; >i { font-size: 16px; - color: rgba(0, 0, 0, 0.55); + color: #64748b; } >span { font-size: 12px; + font-weight: 500; } &:hover { - background: rgba(229, 242, 255, 0.55); - color: rgba(0, 0, 0, 0.75); + background: rgba(50, 139, 255, 0.06); + border-color: rgba(50, 139, 255, 0.2); + color: #328bff; } &.primary { - background-image: linear-gradient(58deg, $button-blue-light 0%, $button-blue 100%); + background: linear-gradient(135deg, #328bff 0%, #2563eb 100%); color: #fff; + border: none; + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); >i, >span { @@ -937,8 +966,8 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } &:hover { - background-image: linear-gradient(-51deg, $button-blue-light 0%, $button-blue 100%); - box-shadow: 0 4px 14px 0 rgba(69, 144, 255, 0.35); + background: linear-gradient(135deg, #4a9eff 0%, #3b82f6 100%); + box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.35); } } } @@ -988,8 +1017,16 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } .f-chat-tool-btn-send { - padding: 3px 11px; - border-radius: 8px; + padding: 8px 16px; + border-radius: 10px; + background: linear-gradient(135deg, #328bff 0%, #2563eb 100%); + border: none; + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); + + &:hover { + background: linear-gradient(135deg, #4a9eff 0%, #3b82f6 100%); + box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); + } } } } @@ -1002,30 +1039,30 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); gap: 8px; .f-chat-skill-btn { - border: 1px solid rgba(0, 0, 0, 0.08); + border: 1px solid rgba(0, 0, 0, 0.06); background: #fff; - border-radius: 999px; - padding: 6px 12px; - font-size: 12px; - color: rgba(0, 0, 0, 0.75); + border-radius: 20px; + padding: 8px 16px; + font-size: 13px; + font-weight: 500; + color: #64748b; cursor: pointer; - transition: - background-color 0.2s ease, - box-shadow 0.2s ease, - border-color 0.2s ease, - color 0.2s ease; + transition: all 0.2s ease; -webkit-user-select: none; user-select: none; &:hover { - border-color: rgba(50, 139, 255, 0.35); - box-shadow: 0 2px 10px rgba(69, 144, 255, 0.12); + border-color: rgba(50, 139, 255, 0.3); + background: rgba(50, 139, 255, 0.04); + color: #328bff; + box-shadow: 0 2px 8px rgba(50, 139, 255, 0.1); } &.selected { - border-color: rgba(50, 139, 255, 0.55); - background: rgba(50, 139, 255, 0.12); - color: $primary-blue; + border-color: rgba(50, 139, 255, 0.5); + background: linear-gradient(135deg, rgba(50, 139, 255, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%); + color: #2563eb; + font-weight: 600; box-shadow: 0 2px 10px rgba(69, 144, 255, 0.14); } } @@ -1059,7 +1096,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); &.empty { overflow-x: hidden; - background-image: linear-gradient(0deg, #F2F8FE 0%, #fff 98%); + background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%); >.f-chat-content-empty { height: 100%; @@ -1087,20 +1124,21 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); gap: 0; >.f-chat-content-header-title { - font-size: 2rem; - line-height: 28px; - font-weight: 500; + font-size: 1.75rem; + line-height: 1.3; + font-weight: 600; text-align: center; - color: rgba(0, 0, 0, 0.9); + color: #1e293b; + letter-spacing: -0.01em; } >.f-chat-content-header-subtitle { - font-size: 1.4rem; - line-height: 1.4; + font-size: 1rem; + line-height: 1.5; font-weight: 400; text-align: center; - color: rgba(0, 0, 0, 0.55); - margin-top: 1rem; + color: #64748b; + margin-top: 0.75rem; } } @@ -1185,29 +1223,29 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } .f-chat-message-bubble { - padding: 10px 12px; - border-radius: 12px; + padding: 12px 16px; + border-radius: 16px; background: #fff; - border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + border: 1px solid rgba(0, 0, 0, 0.04); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); font-size: 14px; - line-height: 20px; + line-height: 1.6; white-space: pre-wrap; word-break: break-word; - color: rgba(0, 0, 0, 0.85); + color: #1e293b; width: fit-content; max-width: 100%; } /* 文件操作消息：使用 bubble 样式 */ .f-chat-message-file-operation { - padding: 10px 12px; - border-radius: 12px; + padding: 12px 16px; + border-radius: 16px; background: #fff; - border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + border: 1px solid rgba(0, 0, 0, 0.04); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); font-size: 13px; - color: rgba(0, 0, 0, 0.85); + color: #1e293b; max-width: 100%; } @@ -1421,7 +1459,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); font-size: 13px; color: rgba(0, 0, 0, 0.85); max-width: 100%; @@ -1504,7 +1542,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); width: 100%; max-width: 100%; } @@ -1661,7 +1699,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); width: 100%; max-width: 100%; } @@ -1866,7 +1904,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); width: 100%; max-width: 100%; } @@ -2012,29 +2050,30 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } &.user .f-chat-message-bubble { - background: rgba(50, 139, 255, 0.1); - border-color: rgba(50, 139, 255, 0.25); + background: linear-gradient(135deg, rgba(50, 139, 255, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%); + border-color: rgba(50, 139, 255, 0.2); } .f-chat-message-user-avatar { - width: 32px; - height: 32px; + width: 36px; + height: 36px; border-radius: 50%; - background: rgba(50, 139, 255, 0.15); + background: linear-gradient(135deg, rgba(50, 139, 255, 0.2) 0%, rgba(99, 102, 241, 0.15) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12); .f-chat-message-user-avatar-image { width: 24px; height: 24px; border-radius: 50%; - background: rgba(50, 139, 255, 0.3); + background: linear-gradient(135deg, rgba(50, 139, 255, 0.35) 0%, rgba(99, 102, 241, 0.3) 100%); display: flex; align-items: center; justify-content: center; - color: rgba(50, 139, 255, 0.9); + color: #2563eb; font-size: 12px; font-weight: 600; line-height: 24px; @@ -2043,53 +2082,54 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } .f-chat-message-assistant-avatar { - width: 32px; - height: 32px; + width: 36px; + height: 36px; border-radius: 50%; - background: #dce9ff; + background: linear-gradient(135deg, #dce9ff 0%, #e8f0ff 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1); .f-chat-message-assistant-avatar-image { background-image: url(/assets/icon/robot-avatar-mini.png); background-size: contain; - width: 26px; - height: 26px; + width: 24px; + height: 24px; } } .f-chat-message-assistant-avatar[data-agent-id="agent-requirement"] { - background: #dce9ff; + background: linear-gradient(135deg, #dce9ff 0%, #e0e8ff 100%); } .f-chat-message-assistant-avatar[data-agent-id="agent-architecture"] { - background: #ffe5cc; + background: linear-gradient(135deg, #ffe5cc 0%, #fff0e0 100%); } .f-chat-message-assistant-avatar[data-agent-id="agent-model"] { - background: #e7f7e9; + background: linear-gradient(135deg, #e7f7e9 0%, #edfaf0 100%); } .f-chat-message-assistant-avatar[data-agent-id="agent-code"] { - background: #ffe6f2; + background: linear-gradient(135deg, #ffe6f2 0%, #fff0f7 100%); } .f-chat-message-assistant-avatar[data-agent-id="agent-ux"] { - background: #fff2cc; + background: linear-gradient(135deg, #fff2cc 0%, #fff8e0 100%); } .f-chat-message-assistant-avatar[data-agent-id="agent-permission"] { - background: #e8e6ff; + background: linear-gradient(135deg, #e8e6ff 0%, #f0efff 100%); } .f-chat-message-assistant-avatar[data-agent-id="agent-flow"] { - background: #e1f5ff; + background: linear-gradient(135deg, #e1f5ff 0%, #eaf8ff 100%); } .f-chat-message-assistant-avatar[data-agent-id="agent-analysis"] { - background: #f2e8ff; + background: linear-gradient(135deg, #f2e8ff 0%, #f7f0ff 100%); } } } @@ -2111,24 +2151,188 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); background: #fff; box-sizing: border-box; + // 两栏布局 + >.f-chat-agent-hub-layout { + display: flex; + flex: 1; + height: 100%; + overflow: hidden; + } + + // 左侧分类边栏 + >.f-chat-agent-hub-layout>.f-chat-agent-hub-sidebar { + width: 220px; + flex-shrink: 0; + background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); + border-right: 1px solid rgba(0, 0, 0, 0.06); + display: flex; + flex-direction: column; + overflow-y: auto; + + .f-chat-agent-hub-sidebar-header { + padding: 20px 16px 16px; + border-bottom: 1px solid rgba(0, 0, 0, 0.04); + display: flex; + align-items: center; + justify-content: space-between; + + .f-chat-agent-hub-sidebar-title { + font-size: 17px; + font-weight: 600; + color: #1e293b; + letter-spacing: -0.01em; + } + + .f-chat-agent-hub-sidebar-close-btn { + width: 28px; + height: 28px; + border: none; + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + transition: all 0.15s ease; + color: #64748b; + + &:hover { + background: rgba(0, 0, 0, 0.06); + color: #1e293b; + } + + .f-icon { + font-size: 16px; + } + } + } + + .f-chat-agent-hub-sidebar-search { + display: flex; + align-items: center; + gap: 8px; + margin: 12px 12px; + padding: 10px 14px; + background: rgba(0, 0, 0, 0.03); + border-radius: 10px; + transition: all 0.2s ease; + + &:focus-within { + background: #fff; + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); + } + + >i { + font-size: 14px; + color: rgba(0, 0, 0, 0.35); + flex-shrink: 0; + } + + >input { + flex: 1; + border: none; + outline: none; + background: transparent; + font-size: 13px; + color: #1e293b; + + &::placeholder { + color: rgba(0, 0, 0, 0.35); + } + } + } + + .f-chat-agent-hub-sidebar-nav { + flex: 1; + padding: 8px 0; + + .f-chat-agent-hub-sidebar-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 16px; + cursor: pointer; + transition: all 0.15s ease; + color: #64748b; + font-size: 14px; + border-radius: 8px; + margin: 2px 8px; + + &:hover { + background: rgba(0, 0, 0, 0.04); + color: #1e293b; + } + + &.active { + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%); + color: #2563eb; + font-weight: 500; + } + } + } + + .f-chat-agent-hub-sidebar-footer { + padding: 12px 16px; + border-top: 1px solid rgba(0, 0, 0, 0.04); + + .f-chat-agent-hub-sidebar-create-btn { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 10px 16px; + background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); + border: none; + border-radius: 10px; + font-size: 14px; + color: #fff; + cursor: pointer; + transition: all 0.2s ease; + font-weight: 500; + + >i { + font-size: 14px; + } + + &:hover { + background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); + box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3); + transform: translateY(-1px); + } + } + } + } + + // 右侧主内容区 + >.f-chat-agent-hub-layout>.f-chat-agent-hub-main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + background: #f8fafc; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + } + >.f-chat-agent-hub-header { flex: 0 0 auto; display: flex; - align-items: flex-start; + align-items: center; justify-content: space-between; gap: 16px; - padding: 20px 24px 12px; + padding: 20px 24px; + background: #fff; .f-chat-agent-hub-header-left { display: flex; - align-items: flex-start; - gap: 10px; + align-items: center; + gap: 12px; } .f-chat-agent-hub-header-right { display: flex; align-items: center; - gap: 10px; + gap: 12px; flex-shrink: 0; } @@ -2136,67 +2340,74 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); display: flex; align-items: center; justify-content: center; - width: 28px; - height: 28px; + width: 36px; + height: 36px; padding: 0; border: none; background: transparent; - border-radius: 6px; + border-radius: 8px; cursor: pointer; - color: rgba(0, 0, 0, 0.35); - transition: background-color 0.2s ease, color 0.2s ease; + color: #64748b; + transition: all 0.15s ease; flex-shrink: 0; >i { - font-size: 14px; + font-size: 16px; } &:hover { - background-color: rgba(0, 0, 0, 0.06); - color: rgba(0, 0, 0, 0.65); + background: #f1f5f9; + color: #334155; + } + + &:focus { + outline: 2px solid #3b82f6; + outline-offset: 2px; } } .f-chat-agent-hub-header-text { display: flex; flex-direction: column; - gap: 4px; + gap: 2px; } .f-chat-agent-hub-title { - font-size: 16px; - font-weight: 700; - color: rgba(0, 0, 0, 0.88); - line-height: 1.5; + font-size: 18px; + font-weight: 600; + color: #0f172a; + line-height: 1.3; + letter-spacing: -0.02em; } .f-chat-agent-hub-subtitle { font-size: 13px; - color: rgba(0, 0, 0, 0.45); + color: #64748b; line-height: 1.4; } .f-chat-agent-hub-search { display: flex; align-items: center; - gap: 6px; - padding: 6px 12px; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; - background: #fafbfc; - min-width: 200px; - max-width: 280px; + gap: 8px; + padding: 8px 14px; + border: 1px solid #e2e8f0; + border-radius: 10px; + background: #f8fafc; + min-width: 220px; + max-width: 300px; flex-shrink: 0; - transition: border-color 0.2s ease, box-shadow 0.2s ease; + transition: all 0.15s ease; &:focus-within { - border-color: rgba(50, 139, 255, 0.5); - box-shadow: 0 0 0 2px rgba(50, 139, 255, 0.1); + border-color: #3b82f6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); + background: #fff; } >i { font-size: 14px; - color: rgba(0, 0, 0, 0.35); + color: #94a3b8; flex-shrink: 0; } @@ -2206,27 +2417,80 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); outline: none; background: transparent; font-size: 13px; - color: rgba(0, 0, 0, 0.85); + color: #1e293b; line-height: 20px; min-width: 0; &::placeholder { - color: rgba(0, 0, 0, 0.3); + color: #94a3b8; } } } } - >.f-chat-agent-hub-nav { + >.f-chat-agent-hub-content { + display: flex; + flex-direction: row; + flex: 1 1 auto; + min-height: 0; + background: #f8fafc; + } + + >.f-chat-agent-hub-content>.f-chat-agent-hub-nav { flex: 0 0 auto; - padding: 0 24px; - border-bottom: 1px solid rgba(0, 0, 0, 0.06); + width: 200px; + padding: 16px 12px; + border-right: 1px solid rgba(0, 0, 0, 0.06); + border-bottom: none; + overflow-y: auto; + background: #fff; + + :deep(.farris-nav) { + flex-direction: column !important; + gap: 4px; + } + + :deep(.farris-nav-item) { + display: block !important; + width: 100% !important; + text-align: left !important; + padding: 10px 14px !important; + border-radius: 8px !important; + transition: all 0.15s ease !important; + + .farris-nav-item-link-text { + font-size: 13px; + font-weight: 500; + color: #475569; + line-height: 1.5; + letter-spacing: 0.01em; + display: block; + } + + &:hover { + background: #f1f5f9 !important; + + .farris-nav-item-link-text { + color: #1e293b; + } + } + + &.active, + &.farris-nav-item-active { + background: #eff6ff !important; + + .farris-nav-item-link-text { + color: #3b82f6; + font-weight: 600; + } + } + } } - >.f-chat-agent-hub-body { + >.f-chat-agent-hub-content>.f-chat-agent-hub-body { flex: 1 1 auto; overflow-y: auto; - padding: 20px 24px; + padding: 24px; min-height: 0; } @@ -2236,14 +2500,15 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); :deep(.f-listview-body) { display: grid !important; - grid-template-columns: repeat(auto-fill, 320px); - gap: 20px; - padding: 0; - justify-content: start; + grid-template-columns: repeat(auto-fill, 280px) !important; + gap: 24px !important; + padding: 0 !important; + justify-content: start !important; } :deep(.f-list-content) { - padding: 16px 24px; + padding: 0 !important; + display: contents !important; } :deep(.f-listview-item), @@ -2253,6 +2518,9 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border: none !important; background: transparent !important; box-shadow: none !important; + width: 280px !important; + max-width: 280px !important; + min-width: 280px !important; &:hover, &.active, @@ -2268,35 +2536,60 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); flex-direction: column; align-items: center; text-align: center; - width: 320px; - height: 220px; + width: 280px; + min-height: 200px; + padding: 24px 20px 20px; margin: 10px; - padding: 20px 16px 16px; box-sizing: border-box; - border-radius: 12px; - border: 1px solid rgba(0, 0, 0, 0.06); - border-top: 3px solid #7c5cfc; + border-radius: 16px; + border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; cursor: pointer; - transition: background-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease; + transition: all 0.2s ease; + position: relative; + overflow: hidden; + + // Top accent line + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); + opacity: 0; + transition: opacity 0.2s ease; + } &:hover { - box-shadow: 0 4px 16px rgba(124, 92, 252, 0.15); + border-color: rgba(59, 130, 246, 0.3); + box-shadow: 0 4px 20px rgba(59, 130, 246, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.1); transform: translateY(-2px); + + &::before { + opacity: 1; + } + } + + &:focus { + outline: 2px solid #3b82f6; + outline-offset: 2px; } } .f-chat-agent-hub-card-avatar { - width: 64px; - height: 64px; + width: 60px; + height: 60px; border-radius: 50%; overflow: hidden; - margin-bottom: 10px; + margin-bottom: 14px; flex-shrink: 0; - background: #f0f2f5; + background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%); display: flex; align-items: center; justify-content: center; + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15); >img { width: 100%; @@ -2305,35 +2598,80 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } .f-chat-nav-agent-avatar { - width: 64px; - height: 64px; + width: 60px; + height: 60px; + border-radius: 50%; + background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); + display: flex; + align-items: center; + justify-content: center; + position: relative; + + img.error { + display: none; + } + + .f-chat-nav-agent-avatar-text { + font-size: 24px; + font-weight: 600; + color: #fff; + text-transform: uppercase; + } .f-chat-nav-agent-avatar-image { - width: 52px; - height: 52px; + width: 48px; + height: 48px; + background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%); + border-radius: 50%; + } + } + + // 头像图片加载失败时显示默认头像 + .f-chat-agent-hub-card-avatar-img { + width: 100%; + height: 100%; + object-fit: cover; + + &.hidden { + display: none; + } + + &.error { + display: none; + } + } + + .f-chat-nav-agent-avatar { + &.hidden { + display: none; } } } .f-chat-agent-hub-card-name { - font-size: 14px; + font-size: 15px; font-weight: 600; - color: rgba(0, 0, 0, 0.88); - margin-bottom: 4px; + color: #1e293b; + margin-bottom: 6px; line-height: 1.4; + letter-spacing: -0.01em; } .f-chat-agent-hub-card-title { - font-size: 13px; - font-weight: 600; - color: #7c5cfc; - margin-bottom: 8px; - line-height: 1.4; + font-size: 12px; + font-weight: 500; + color: #3b82f6; + background: #eff6ff; + padding: 2px 8px; + border-radius: 4px; + margin-bottom: 10px; + line-height: 1.5; + display: inline-block; } .f-chat-agent-hub-card-desc { font-size: 12px; - color: rgba(0, 0, 0, 0.5); + color: #64748b; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; @@ -2343,9 +2681,9 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); .f-chat-agent-hub-empty { text-align: center; - padding: 64px 16px; - font-size: 13px; - color: rgba(0, 0, 0, 0.35); + padding: 80px 24px; + font-size: 14px; + color: #94a3b8; } .f-chat-agent-detail { @@ -2364,22 +2702,24 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); display: flex; align-items: center; justify-content: center; - width: 32px; - height: 32px; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; + width: 36px; + height: 36px; + border: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 10px; background: #fff; cursor: pointer; - color: rgba(0, 0, 0, 0.65); - transition: background-color 0.2s, border-color 0.2s; + color: #64748b; + transition: all 0.2s ease; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); >i { font-size: 14px; } &:hover { - background: rgba(0, 0, 0, 0.04); - border-color: rgba(0, 0, 0, 0.2); + background: rgba(50, 139, 255, 0.06); + border-color: rgba(50, 139, 255, 0.2); + color: #328bff; } } @@ -2422,48 +2762,52 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } .f-chat-agent-detail-name { - font-size: 18px; + font-size: 20px; font-weight: 700; - color: rgba(0, 0, 0, 0.88); - line-height: 1.4; + color: #1e293b; + line-height: 1.3; + letter-spacing: -0.01em; } .f-chat-agent-detail-meta-row { display: flex; align-items: center; - gap: 4px; + gap: 6px; font-size: 13px; - color: rgba(0, 0, 0, 0.45); - margin-top: 2px; + color: #64748b; + margin-top: 4px; } .f-chat-agent-detail-sep { - color: rgba(0, 0, 0, 0.25); - margin: 0 2px; + color: #cbd5e1; + margin: 0 4px; } .f-chat-agent-detail-tags-row { display: flex; align-items: center; justify-content: space-between; - padding: 10px 24px; + padding: 12px 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .f-chat-agent-detail-tags-left { display: flex; gap: 8px; + flex-wrap: wrap; } .f-chat-agent-detail-tag { display: inline-flex; align-items: center; gap: 4px; - padding: 2px 10px; - border-radius: 4px; - background: rgba(0, 0, 0, 0.04); - border: 1px solid rgba(0, 0, 0, 0.06); + padding: 4px 12px; + border-radius: 20px; + background: rgba(50, 139, 255, 0.08); + border: 1px solid rgba(50, 139, 255, 0.15); font-size: 12px; - color: rgba(0, 0, 0, 0.65); + font-weight: 500; + color: #2563eb; } .f-chat-agent-detail-tags-right { @@ -2487,6 +2831,26 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); flex: 0 0 auto; padding: 0 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); + + // 优化导航项文字排版 + .farris-nav-item-link-text { + font-size: 14px; + font-weight: 500; + color: #64748b; + line-height: 1.5; + letter-spacing: 0.01em; + padding: 12px 16px; + transition: color 0.2s ease, font-weight 0.2s ease; + } + + .farris-nav-item-active .farris-nav-item-link-text { + color: #3b82f6; + font-weight: 600; + } + + .farris-nav-item:hover .farris-nav-item-link-text { + color: #3b82f6; + } } .f-chat-agent-detail-body { @@ -2514,10 +2878,12 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } .f-chat-agent-detail-desc-section { - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.04); + border-radius: 12px; margin-bottom: 24px; overflow: hidden; + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .f-chat-agent-detail-desc-header { @@ -2673,22 +3039,24 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); .f-chat-agent-detail-cap-card { display: flex; - gap: 12px; - padding: 14px 16px; - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 10px; - transition: box-shadow 0.2s; + gap: 14px; + padding: 16px; + border: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 12px; + transition: all 0.2s ease; + background: #fff; &:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1); + border-color: rgba(59, 130, 246, 0.2); } } .f-chat-agent-detail-cap-card-icon { - width: 40px; - height: 40px; - border-radius: 8px; - background: #f0f2f5; + width: 44px; + height: 44px; + border-radius: 10px; + background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); display: flex; align-items: center; justify-content: center; @@ -2702,7 +3070,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); >i { font-size: 20px; - color: rgba(0, 0, 0, 0.45); + color: #6366f1; } } @@ -2714,7 +3082,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); .f-chat-agent-detail-cap-card-name { font-size: 14px; font-weight: 600; - color: rgba(0, 0, 0, 0.85); + color: #1e293b; display: flex; align-items: center; gap: 8px; @@ -2722,17 +3090,17 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); .f-chat-agent-detail-cap-tag { font-size: 11px; - padding: 1px 6px; - border-radius: 4px; - background: rgba(50, 139, 255, 0.1); - color: #328bff; + padding: 2px 8px; + border-radius: 6px; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%); + color: #2563eb; font-weight: 500; } .f-chat-agent-detail-cap-card-desc { font-size: 12px; - color: rgba(0, 0, 0, 0.5); - line-height: 1.5; + color: #64748b; + line-height: 1.6; margin-top: 4px; } @@ -2742,13 +3110,14 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); align-items: center; justify-content: center; padding: 48px 16px; - border: 1px dashed rgba(0, 0, 0, 0.1); - border-radius: 10px; - color: rgba(0, 0, 0, 0.25); + border: 1px dashed rgba(0, 0, 0, 0.08); + border-radius: 12px; + color: #94a3b8; .f-chat-agent-detail-cap-empty-icon { font-size: 40px; margin-bottom: 8px; + opacity: 0.5; } .f-chat-agent-detail-cap-empty-text { @@ -2759,13 +3128,13 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); .f-chat-agent-detail-similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 16px; + gap: 24px; .f-chat-agent-hub-card { - width: auto; + width: 280px; height: auto; min-height: 200px; - margin: 0; + margin: 10px; } } @@ -2776,27 +3145,124 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); color: rgba(0, 0, 0, 0.35); } + .f-chat-agent-detail-loading, + .f-chat-agent-detail-error { + text-align: center; + padding: 64px 16px; + font-size: 14px; + } + + .f-chat-agent-detail-loading { + color: #999; + } + + .f-chat-agent-detail-error { + color: #ff4d4f; + } + + .f-chat-agent-detail-history { + padding: 16px 0; + + .f-chat-agent-detail-history-list { + display: flex; + flex-direction: column; + gap: 16px; + } + + .f-chat-agent-detail-history-item { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding-bottom: 16px; + border-bottom: 1px solid #eee; + + &:last-child { + border-bottom: none; + } + } + + .f-chat-agent-detail-history-left { + display: flex; + gap: 12px; + align-items: flex-start; + } + + .f-chat-agent-detail-history-badge { + padding: 4px 8px; + background: #f0f0f0; + color: #666; + border-radius: 4px; + font-size: 12px; + font-weight: 500; + height: fit-content; + + &.latest { + background: #7c5cfc; + color: #fff; + } + } + + .f-chat-agent-detail-history-info { + flex: 1; + } + + .f-chat-agent-detail-history-desc { + font-size: 14px; + color: #333; + margin-bottom: 4px; + } + + .f-chat-agent-detail-history-date { + font-size: 12px; + color: #999; + } + + .f-chat-agent-detail-history-new { + padding: 4px 8px; + background: #4a90e2; + color: #fff; + border-radius: 4px; + font-size: 12px; + height: fit-content; + } + } + .f-chat-agent-detail-chat-btn { width: 100%; - padding: 10px 16px; + padding: 12px 20px; border: none; - border-radius: 8px; - background: #1a1a1a; + border-radius: 12px; + background: linear-gradient(135deg, #328bff 0%, #2563eb 100%); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; - transition: background-color 0.2s; + transition: all 0.2s ease; + box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25); &:hover { - background: #333; + background: linear-gradient(135deg, #4a9eff 0%, #3b82f6 100%); + box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35); + transform: translateY(-1px); + } + + &:active { + transform: translateY(0); + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); } } .f-chat-agent-detail-sidebar-card { - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 10px; + border: 1px solid rgba(0, 0, 0, 0.04); + border-radius: 14px; padding: 16px; + background: #fff; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); + transition: box-shadow 0.2s ease; + + &:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); + } } .f-chat-agent-detail-sidebar-card-header { @@ -2957,7 +3423,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); background: #fff; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 2px 12px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); margin: 0 8px 1rem 8px; >iframe { @@ -3058,10 +3524,10 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); >span { font-size: 14px; } - } + } } ->.f-chat-nav-agents { +.f-chat-nav-agents { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); @@ -3069,154 +3535,32 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); flex-direction: column; position: relative; - >.f-chat-nav-agents-title { + .f-chat-nav-agents-btn { display: flex; align-items: center; - justify-content: space-between; - margin-bottom: 6px; - - >span { - font-size: 12px; - color: #999; - font-weight: 400; - } - - .f-chat-nav-agents-add-btn { - display: flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - padding: 0; - border: none; - background: transparent; - border-radius: 4px; - cursor: pointer; - color: rgba(0, 0, 0, 0.45); - transition: background-color 0.2s ease, color 0.2s ease; - -webkit-user-select: none; - user-select: none; - - >i { - font-size: 14px; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.06); - color: rgba(0, 0, 0, 0.65); - } - - &:active { - background-color: rgba(0, 0, 0, 0.1); - } - } - } - - >.f-chat-nav-agents-list { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 6px; - - .f-chat-nav-agents-empty-hint { - grid-column: 1 / -1; - font-size: 12px; - color: rgba(0, 0, 0, 0.45); - line-height: 1.5; - padding: 8px 0; - } - - .f-chat-nav-agent-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 4px; - padding: 8px 4px; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.2s ease, box-shadow 0.2s ease; - - &:hover { - background-color: rgba(255, 255, 255, 0.8); - box-shadow: 0 2px 6px rgba(69, 144, 255, 0.18); - } - - &.selected { - background-color: #fff; - box-shadow: 0 2px 8px rgba(69, 144, 255, 0.22); - } - - .f-chat-nav-agent-avatar { - width: 32px; - height: 32px; - border-radius: 50%; - background: #dce9ff; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - - >img { - width: 100%; - height: 100%; - object-fit: cover; - } - - .f-chat-nav-agent-avatar-image { - background-image: url(/assets/icon/robot-avatar-mini.png); - background-size: contain; - width: 26px; - height: 26px; - } - } - - .f-chat-nav-agent-name { - font-size: 11px; - color: rgba(0, 0, 0, 0.85); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: center; - width: 100%; - line-height: 1.2; - } - } - - .f-chat-nav-agent-avatar[data-agent-id="agent-requirement"] { - background: #dce9ff; - } - - .f-chat-nav-agent-avatar[data-agent-id="agent-architecture"] { - background: #ffe5cc; - } - - .f-chat-nav-agent-avatar[data-agent-id="agent-model"] { - background: #e7f7e9; - } - - .f-chat-nav-agent-avatar[data-agent-id="agent-code"] { - background: #ffe6f2; - } - - .f-chat-nav-agent-avatar[data-agent-id="agent-ux"] { - background: #fff2cc; - } - - .f-chat-nav-agent-avatar[data-agent-id="agent-permission"] { - background: #e8e6ff; - } + gap: 8px; + padding: 10px 12px; + border: none; + background: transparent; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; + color: inherit; + font-size: 14px; - .f-chat-nav-agent-avatar[data-agent-id="agent-flow"] { - background: #e1f5ff; + .f-icon { + font-size: 16px; + color: $button-blue; } - .f-chat-nav-agent-avatar[data-agent-id="agent-analysis"] { - background: #f2e8ff; + &:hover { + background-color: rgba(255, 255, 255, 0.6); + box-shadow: 0 2px 8px rgba(69, 144, 255, 0.15); } } } ->.f-chat-nav-history { +.f-chat-nav-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); @@ -3256,6 +3600,12 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); box-shadow: 0 2px 8px rgba(69, 144, 255, 0.15); } + &.active { + background-color: white; + box-shadow: 0 2px 8px rgba(69, 144, 255, 0.2); + font-weight: 500; + } + >i { font-size: 16px; display: flex; @@ -3490,8 +3840,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); flex: 1; min-height: 0; overflow: hidden; - // background: rgba(229, 242, 255, 0.4); - background: #d8d9db30; + background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); } .f-chat-content-main-layout { @@ -3577,34 +3926,35 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); .f-chat-content-input { flex: 0 0 auto; - border: 1px solid rgba(233, 234, 243, 1); - border-radius: 7.59px; + border: 1px solid rgba(228, 236, 252, 1); + border-radius: 20px; background: #fff; - box-shadow: 0px 2px 10px 0px rgba(33, 62, 126, 0.13); - padding: 10px 10px 8px; + box-shadow: 0 4px 24px rgba(37, 99, 235, 0.1); + padding: 16px 20px 14px; z-index: 1; - margin: 0.5rem; + margin: 1rem 1.5rem; &.focus { - border-color: #2a87ff; + border-color: #328bff; + box-shadow: 0 6px 32px rgba(37, 99, 235, 0.15); } >.f-chat-content-input-editor { width: 100%; - min-height: 88px; - max-height: 180px; + min-height: 120px; + max-height: 240px; overflow: auto; outline: none; white-space: pre-wrap; word-break: break-word; - font-size: 14px; - line-height: 20px; - color: rgba(0, 0, 0, 0.85); - margin-bottom: 10px; + font-size: 15px; + line-height: 1.7; + color: #1e293b; + margin-bottom: 12px; &:empty::before { content: attr(data-placeholder); - color: #9aa8bf; + color: #94a3b8; pointer-events: none; } @@ -3652,17 +4002,18 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); display: inline-flex; align-items: center; gap: 6px; - padding: 2px 8px; + padding: 4px 10px; border-radius: 14px; - background: rgba(50, 139, 255, 0.1); - border: 1px solid rgba(50, 139, 255, 0.35); - color: $primary-blue; + background: linear-gradient(135deg, rgba(50, 139, 255, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%); + border: 1px solid rgba(50, 139, 255, 0.25); + color: #2563eb; vertical-align: baseline; - margin-right: 4px; + margin-right: 6px; + font-weight: 500; .f-chat-agent-tag-text { - font-size: 12px; - line-height: 18px; + font-size: 13px; + line-height: 20px; font-weight: 600; } @@ -3672,8 +4023,8 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); padding: 0; border: none; border-radius: 9px; - background: rgba(50, 139, 255, 0.16); - color: $primary-blue; + background: rgba(50, 139, 255, 0.15); + color: #2563eb; cursor: pointer; line-height: 18px; display: inline-flex; @@ -3683,21 +4034,22 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); user-select: none; &:hover { - background: rgba(50, 139, 255, 0.26); + background: rgba(50, 139, 255, 0.25); } } } .f-chat-content-input-slot-input { - background-color: #eaf2ff; - padding: 2px 6px; - border-radius: 6px; + background-color: rgba(50, 139, 255, 0.08); + padding: 4px 10px; + border-radius: 8px; display: inline-flex; align-items: center; font-size: 13px; margin: 0 6px; overflow: hidden; vertical-align: middle; + border: 1px solid rgba(50, 139, 255, 0.2); input { border: none; @@ -3708,14 +4060,14 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); width: 100%; min-width: 0; font-family: inherit; - color: #7191c8; + color: #2563eb; white-space: nowrap; line-height: normal; padding: 0; margin: 0; &:focus { - color: #333; // 获得焦点时的颜色 + color: #1e40af; } &:not(:placeholder-shown) { @@ -3739,20 +4091,38 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); display: flex; align-items: center; justify-content: space-between; - gap: 10px; + gap: 16px; + padding-top: 8px; >.f-chat-content-input-single-editor { outline: none; white-space: pre-wrap; word-break: break-word; - font-size: 14px; - height: 20px; - line-height: 20px; - color: rgba(0, 0, 0, 0.85); + font-size: 15px; + min-height: 38px; + max-height: 120px; + line-height: 1.6; + color: #1e293b; + background: #f8fafc; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 10px; + padding: 8px 12px; + transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; - &:empty::before { + &:hover { + border-color: rgba(50, 139, 255, 0.3); + background: #fff; + } + + &:focus { + border-color: #328bff; + background: #fff; + box-shadow: 0 0 0 3px rgba(50, 139, 255, 0.1); + } + + &[data-empty='true']::before { content: attr(data-placeholder); - color: #9aa8bf; + color: #94a3b8; pointer-events: none; } } @@ -3761,44 +4131,102 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); >.f-chat-content-input-toolbar-right { display: flex; align-items: center; - gap: 8px; + gap: 12px; + flex-wrap: wrap; + } + + >.f-chat-content-input-toolbar-left { flex-wrap: wrap; + min-width: 0; + } + + .f-chat-config-bar { + display: flex; + align-items: center; + gap: 16px; + padding: 10px 16px; + background: #f8fafc; + border-top: 1px solid rgba(0, 0, 0, 0.04); + font-size: 13px; + color: #64748b; + + .f-chat-config-select { + padding: 6px 12px; + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 8px; + font-size: 13px; + background: #fff; + color: #1e293b; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + border-color: rgba(50, 139, 255, 0.3); + } + + &:focus { + outline: none; + border-color: #328bff; + box-shadow: 0 0 0 3px rgba(50, 139, 255, 0.1); + } + } + + .f-chat-config-checkbox { + display: flex; + align-items: center; + gap: 6px; + cursor: pointer; + color: #64748b; + + input { + cursor: pointer; + width: 16px; + height: 16px; + accent-color: #2563eb; + } + } + + .f-chat-uploaded-files { + font-size: 12px; + color: #999; + } } .f-chat-tool-btn { display: inline-flex; align-items: center; gap: 6px; - border: none; - background: transparent; - padding: 6px; - border-radius: 10px; + border: 1px solid rgba(0, 0, 0, 0.06); + background: #fff; + padding: 6px 10px; + border-radius: 8px; cursor: pointer; - color: rgba(0, 0, 0, 0.65); - transition: background-color 0.2s ease, box-shadow 0.2s ease, - color 0.2s ease; + color: #64748b; + transition: all 0.2s ease; -webkit-user-select: none; user-select: none; >i { font-size: 16px; - color: rgba(0, 0, 0, 0.55); + color: #64748b; } >span { font-size: 12px; + font-weight: 500; } &:hover { - background: rgba(229, 242, 255, 0.55); - color: rgba(0, 0, 0, 0.75); + background: rgba(50, 139, 255, 0.06); + border-color: rgba(50, 139, 255, 0.2); + color: #328bff; } &.primary { - background-image: linear-gradient(58deg, - $button-blue-light 0%, - $button-blue 100%); + background: linear-gradient(135deg, #328bff 0%, #2563eb 100%); color: #fff; + border: none; + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); >i, >span { @@ -3806,10 +4234,8 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } &:hover { - background-image: linear-gradient(-51deg, - $button-blue-light 0%, - $button-blue 100%); - box-shadow: 0 4px 14px 0 rgba(69, 144, 255, 0.35); + background: linear-gradient(135deg, #4a9eff 0%, #3b82f6 100%); + box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.35); } } } @@ -3817,20 +4243,21 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); .f-chat-tool-btn-agent, .f-chat-tool-btn-assistive-tool, .f-chat-tool-btn-slot-config { - background: #f6f7fb; - border: 1px solid transparent; - border-radius: 5px; + background: #f8fafc; + border: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 8px; &.active { - background: rgba(216, 233, 255, 0.9); - border-color: rgba(191, 219, 255, 1); + background: linear-gradient(135deg, rgba(50, 139, 255, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%); + border-color: rgba(50, 139, 255, 0.3); img { opacity: 1; } span { - color: #318bff; + color: #2563eb; + font-weight: 600; } } @@ -3840,11 +4267,11 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } span { - color: #8a98b6; + color: #64748b; letter-spacing: 0; text-align: left; font-size: 13px; - font-weight: 400; + font-weight: 500; } } @@ -3859,8 +4286,16 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } .f-chat-tool-btn-send { - padding: 3px 11px; - border-radius: 8px; + padding: 8px 16px; + border-radius: 10px; + background: linear-gradient(135deg, #328bff 0%, #2563eb 100%); + border: none; + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); + + &:hover { + background: linear-gradient(135deg, #4a9eff 0%, #3b82f6 100%); + box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); + } } } } @@ -3873,28 +4308,30 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); gap: 8px; .f-chat-skill-btn { - border: 1px solid rgba(0, 0, 0, 0.08); + border: 1px solid rgba(0, 0, 0, 0.06); background: #fff; - border-radius: 999px; - padding: 6px 12px; - font-size: 12px; - color: rgba(0, 0, 0, 0.75); + border-radius: 20px; + padding: 8px 16px; + font-size: 13px; + font-weight: 500; + color: #64748b; cursor: pointer; - transition: background-color 0.2s ease, box-shadow 0.2s ease, - border-color 0.2s ease, color 0.2s ease; + transition: all 0.2s ease; -webkit-user-select: none; user-select: none; &:hover { - border-color: rgba(50, 139, 255, 0.35); - box-shadow: 0 2px 10px rgba(69, 144, 255, 0.12); + border-color: rgba(50, 139, 255, 0.3); + background: rgba(50, 139, 255, 0.04); + color: #328bff; + box-shadow: 0 2px 8px rgba(50, 139, 255, 0.1); } &.selected { - border-color: rgba(50, 139, 255, 0.55); - background: rgba(50, 139, 255, 0.12); - color: $primary-blue; - box-shadow: 0 2px 10px rgba(69, 144, 255, 0.14); + border-color: rgba(50, 139, 255, 0.5); + background: linear-gradient(135deg, rgba(50, 139, 255, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%); + color: #2563eb; + font-weight: 600; } } } @@ -3927,7 +4364,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); &.empty { overflow-x: hidden; - background-image: linear-gradient(0deg, #f2f8fe 0%, #fff 98%); + background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%); >.f-chat-content-empty { height: 100%; @@ -3955,20 +4392,21 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); gap: 0; >.f-chat-content-header-title { - font-size: 2rem; - line-height: 28px; - font-weight: 500; + font-size: 1.75rem; + line-height: 1.3; + font-weight: 600; text-align: center; - color: rgba(0, 0, 0, 0.9); + color: #1e293b; + letter-spacing: -0.01em; } >.f-chat-content-header-subtitle { - font-size: 1.4rem; - line-height: 1.4; + font-size: 1rem; + line-height: 1.5; font-weight: 400; text-align: center; - color: rgba(0, 0, 0, 0.55); - margin-top: 1rem; + color: #64748b; + margin-top: 0.75rem; } } @@ -4057,7 +4495,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); font-size: 14px; line-height: 20px; white-space: pre-wrap; @@ -4073,7 +4511,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); font-size: 13px; color: rgba(0, 0, 0, 0.85); max-width: 100%; @@ -4293,7 +4731,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); width: 100%; max-width: 100%; } @@ -4448,7 +4886,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); width: 100%; max-width: 100%; } @@ -4654,7 +5092,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); - box-shadow: 0 2px 10px rgba(3, 18, 51, 0.06); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); width: 100%; max-width: 100%; } @@ -5205,6 +5643,1055 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); align-items: flex-start; } +// ============================================ +// 创建助手视图样式 +// ============================================ +.f-chat-create-agent { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #fff; + z-index: 100; + display: flex; + flex-direction: column; + overflow: hidden; + + &.hidden { + display: none; + } + + .f-chat-create-agent-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 20px; + border-bottom: 1px solid #e8e8e8; + background: #fff; + + .f-chat-create-agent-header-left { + display: flex; + align-items: center; + gap: 12px; + } + + .f-chat-create-agent-back-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + + &:hover { + background: #f5f5f5; + } + + .f-icon { + font-size: 18px; + color: #666; + } + } + + .f-chat-create-agent-title { + font-size: 18px; + font-weight: 600; + color: #333; + } + + .f-chat-create-agent-header-right { + display: flex; + align-items: center; + gap: 12px; + } + + .f-chat-create-agent-btn { + padding: 8px 20px; + border: 1px solid #d9d9d9; + background: #fff; + border-radius: 4px; + font-size: 14px; + color: #666; + cursor: pointer; + transition: all 0.2s; + + &:hover { + border-color: $button-blue; + color: $button-blue; + } + + &.primary { + background: linear-gradient(58deg, $button-blue-light 0%, $button-blue 100%); + border-color: $button-blue; + color: #fff; + + &:hover { + box-shadow: 0 4px 14px 0 rgba(69, 144, 255, 0.35); + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } + } + } + + .f-chat-create-agent-error { + margin: 12px 20px; + padding: 12px 16px; + background: #fff2f0; + border: 1px solid #ffa39e; + border-radius: 4px; + color: #cf1322; + font-size: 14px; + } + + .f-chat-create-agent-body { + flex: 1; + overflow-y: auto; + padding: 20px; + } + + .f-chat-create-agent-section { + margin-bottom: 24px; + + .f-chat-create-agent-section-title { + font-size: 16px; + font-weight: 600; + color: #333; + margin-bottom: 16px; + display: flex; + align-items: center; + gap: 8px; + + .f-chat-create-agent-section-subtitle { + font-size: 12px; + font-weight: 400; + color: #999; + } + + .f-chat-create-agent-add-skill-btn { + margin-left: auto; + padding: 4px 12px; + border: 1px solid $button-blue; + background: #fff; + border-radius: 4px; + font-size: 12px; + color: $button-blue; + cursor: pointer; + display: flex; + align-items: center; + gap: 4px; + transition: all 0.2s; + + &:hover { + background: rgba(14, 109, 237, 0.08); + } + + .f-icon { + font-size: 12px; + } + } + + .f-chat-create-agent-add-demo-btn { + margin-left: auto; + padding: 4px 12px; + border: 1px solid #d9d9d9; + background: #fff; + border-radius: 4px; + font-size: 12px; + color: #666; + cursor: pointer; + display: flex; + align-items: center; + gap: 4px; + + &:hover { + border-color: $button-blue; + color: $button-blue; + } + + .f-icon { + font-size: 12px; + } + } + } + } + + .f-chat-create-agent-form-row { + display: flex; + gap: 20px; + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0; + } + } + + .f-chat-create-agent-form-item { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + + .f-chat-create-agent-label { + font-size: 14px; + color: #333; + font-weight: 500; + + .required { + color: #ff4d4f; + } + } + + .f-chat-create-agent-input, + .f-chat-create-agent-select, + .f-chat-create-agent-textarea { + padding: 8px 12px; + border: 1px solid #d9d9d9; + border-radius: 4px; + font-size: 14px; + color: #333; + transition: border-color 0.2s; + + &:focus { + outline: none; + border-color: $button-blue; + } + + &.error { + border-color: #ff4d4f; + } + + &::placeholder { + color: #bfbfbf; + } + } + + .f-chat-create-agent-input, + .f-chat-create-agent-select { + height: 36px; + } + + .f-chat-create-agent-textarea { + min-height: 80px; + resize: vertical; + } + + .f-chat-create-agent-system-prompt { + min-height: 120px; + } + + .f-chat-create-agent-error-text { + font-size: 12px; + color: #ff4d4f; + } + } + + .f-chat-create-agent-avatar-upload { + display: flex; + align-items: center; + gap: 12px; + + .f-chat-create-agent-avatar-preview { + width: 64px; + height: 64px; + border: 1px dashed #d9d9d9; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: #fafafa; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .f-icon { + font-size: 24px; + color: #bfbfbf; + } + } + + .f-chat-create-agent-input { + flex: 1; + } + } + + .f-chat-create-agent-skills { + display: flex; + flex-wrap: wrap; + gap: 8px; + min-height: 36px; + padding: 8px; + border: 1px solid #d9d9d9; + border-radius: 4px; + background: #fafafa; + + .f-chat-create-agent-skill-tag { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 8px; + background: #e6f4ff; + border: 1px solid #91caff; + border-radius: 4px; + font-size: 12px; + color: $button-blue; + + button { + border: none; + background: transparent; + color: $button-blue; + cursor: pointer; + padding: 0; + font-size: 14px; + line-height: 1; + } + } + + .f-chat-create-agent-empty-text { + font-size: 12px; + color: #999; + } + } + + .f-chat-create-agent-demo-list { + display: flex; + flex-direction: column; + gap: 12px; + } + + .f-chat-create-agent-demo-item { + padding: 12px; + border: 1px solid #e8e8e8; + border-radius: 8px; + background: #fafafa; + + .f-chat-create-agent-demo-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; + + .f-chat-create-agent-select { + width: 100px; + height: 28px; + font-size: 12px; + } + + .f-chat-create-agent-demo-remove-btn { + width: 28px; + height: 28px; + border: none; + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + color: #999; + + &:hover { + background: #ff4d4f; + color: #fff; + } + + .f-icon { + font-size: 14px; + } + } + } + + .f-chat-create-agent-textarea { + width: 100%; + min-height: 60px; + } + } + + .f-chat-create-agent-demo-empty { + padding: 24px; + text-align: center; + color: #999; + font-size: 14px; + border: 1px dashed #d9d9d9; + border-radius: 8px; + } +} + +// ============================================ +// 我的助手视图样式 +// ============================================ +.f-chat-my-agents { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #fff; + z-index: 100; + display: flex; + flex-direction: column; + overflow: hidden; + + &.hidden { + display: none; + } + + .f-chat-my-agents-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 20px; + border-bottom: 1px solid #e8e8e8; + background: #fff; + + .f-chat-my-agents-header-left { + display: flex; + align-items: center; + gap: 12px; + } + + .f-chat-my-agents-back-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + + &:hover { + background: #f5f5f5; + } + + .f-icon { + font-size: 18px; + color: #666; + } + } + + .f-chat-my-agents-title { + font-size: 18px; + font-weight: 600; + color: #333; + } + + .f-chat-my-agents-header-right { + display: flex; + align-items: center; + gap: 12px; + } + + .f-chat-my-agents-create-btn { + padding: 8px 16px; + border: 1px solid $button-blue; + background: #fff; + border-radius: 4px; + font-size: 14px; + color: $button-blue; + cursor: pointer; + display: flex; + align-items: center; + gap: 6px; + transition: all 0.2s; + + &:hover { + background: rgba(14, 109, 237, 0.08); + } + + .f-icon { + font-size: 14px; + } + } + } + + .f-chat-my-agents-body { + flex: 1; + overflow-y: auto; + padding: 20px; + } + + .f-chat-my-agents-loading, + .f-chat-my-agents-error { + padding: 40px; + text-align: center; + color: #999; + font-size: 14px; + } + + .f-chat-my-agents-error { + color: #ff4d4f; + } + + .f-chat-my-agents-list { + display: flex; + flex-direction: column; + gap: 12px; + } + + .f-chat-my-agents-card { + display: flex; + align-items: center; + padding: 16px; + border: 1px solid #e8e8e8; + border-radius: 8px; + background: #fff; + transition: border-color 0.2s, box-shadow 0.2s; + + &:hover { + border-color: #91caff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + } + + .f-chat-my-agents-card-avatar { + width: 48px; + height: 48px; + border-radius: 8px; + overflow: hidden; + flex-shrink: 0; + background: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .f-chat-nav-agent-avatar-image { + width: 32px; + height: 32px; + border-radius: 4px; + background: $button-blue-light; + } + } + + .f-chat-my-agents-card-content { + flex: 1; + min-width: 0; + margin-left: 12px; + + .f-chat-my-agents-card-name { + font-size: 15px; + font-weight: 500; + color: #333; + margin-bottom: 4px; + } + + .f-chat-my-agents-card-desc { + font-size: 13px; + color: #666; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 4px; + } + + .f-chat-my-agents-card-meta { + display: flex; + align-items: center; + gap: 12px; + font-size: 12px; + color: #999; + + .f-chat-my-agents-card-status { + padding: 2px 8px; + border-radius: 4px; + font-size: 11px; + + &.online { + background: #f6ffed; + color: #52c41a; + border: 1px solid #b7eb8f; + } + + &.offline { + background: #fff2f0; + color: #ff4d4f; + border: 1px solid #ffccc7; + } + } + } + } + + .f-chat-my-agents-card-actions { + display: flex; + align-items: center; + gap: 8px; + margin-left: 12px; + } + + .f-chat-my-agents-card-btn { + width: 32px; + height: 32px; + border: 1px solid #d9d9d9; + background: #fff; + border-radius: 4px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + + .f-icon { + font-size: 14px; + color: #666; + } + + &:hover:not(:disabled) { + border-color: $button-blue; + background: rgba(14, 109, 237, 0.08); + + .f-icon { + color: $button-blue; + } + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + &.delete:hover:not(:disabled) { + border-color: #ff4d4f; + background: rgba(255, 77, 79, 0.08); + + .f-icon { + color: #ff4d4f; + } + } + } + } + + .f-chat-my-agents-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 20px; + text-align: center; + + .f-chat-my-agents-empty-icon { + width: 80px; + height: 80px; + border-radius: 50%; + background: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 16px; + + .f-icon { + font-size: 36px; + color: #d9d9d9; + } + } + + .f-chat-my-agents-empty-text { + font-size: 14px; + color: #999; + margin-bottom: 20px; + } + + .f-chat-my-agents-empty-btn { + padding: 8px 20px; + border: 1px solid $button-blue; + background: $button-blue; + border-radius: 4px; + font-size: 14px; + color: #fff; + cursor: pointer; + transition: all 0.2s; + + &:hover { + background: $button-blue-light; + box-shadow: 0 4px 14px 0 rgba(69, 144, 255, 0.35); + } + } + } +} + +// ============================================ +// 技能市场弹窗样式 +// ============================================ +.f-chat-skill-market-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(4px); + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + + &.hidden { + display: none; + } + + .f-chat-skill-market-modal-content { + width: 720px; + max-width: 90vw; + max-height: 80vh; + background: #fff; + border-radius: 16px; + display: flex; + flex-direction: column; + overflow: hidden; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); + } + + .f-chat-skill-market-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); + + .f-chat-skill-market-modal-title { + font-size: 17px; + font-weight: 600; + color: #1e293b; + } + + .f-chat-skill-market-modal-close { + width: 32px; + height: 32px; + border: none; + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; + transition: all 0.15s ease; + + &:hover { + background: rgba(0, 0, 0, 0.05); + } + + .f-icon { + font-size: 18px; + color: #64748b; + } + } + } + + .f-chat-skill-market-modal-body { + flex: 1; + overflow-y: auto; + padding: 20px 24px; + background: #f8fafc; + } + + .f-chat-skill-market-modal-search { + margin-bottom: 16px; + + .f-chat-skill-market-modal-categories { + display: flex; + gap: 8px; + margin-bottom: 14px; + flex-wrap: wrap; + } + + .f-chat-skill-market-modal-cat-btn { + padding: 8px 18px; + border: 1px solid rgba(0, 0, 0, 0.08); + background: #fff; + border-radius: 20px; + font-size: 13px; + color: #64748b; + cursor: pointer; + transition: all 0.2s ease; + font-weight: 500; + + &:hover { + border-color: #3B82F6; + color: #2563eb; + background: rgba(59, 130, 246, 0.04); + } + + &.active { + background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); + border-color: #2563eb; + color: #fff; + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); + } + } + + .f-chat-skill-market-modal-search-box { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 10px; + background: #fff; + transition: all 0.2s ease; + + &:focus-within { + border-color: #3B82F6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); + } + + .f-icon { + font-size: 16px; + color: #94a3b8; + } + + input { + flex: 1; + border: none; + background: transparent; + font-size: 14px; + color: #1e293b; + outline: none; + + &::placeholder { + color: #94a3b8; + } + } + } + } + + .f-chat-skill-market-modal-list { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .f-chat-skill-market-modal-item { + display: flex; + align-items: flex-start; + padding: 14px; + border: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 12px; + cursor: pointer; + transition: all 0.2s ease; + background: #fff; + + &:hover { + border-color: rgba(59, 130, 246, 0.3); + background: rgba(59, 130, 246, 0.02); + box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08); + } + + &.selected { + border-color: #3B82F6; + background: rgba(59, 130, 246, 0.05); + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); + + .f-chat-skill-market-modal-item-check { + color: #2563eb; + } + } + + .f-chat-skill-market-modal-item-icon { + width: 36px; + height: 36px; + border-radius: 10px; + background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + flex-shrink: 0; + } + + .f-chat-skill-market-modal-item-info { + flex: 1; + min-width: 0; + margin-left: 12px; + + .f-chat-skill-market-modal-item-name { + font-size: 14px; + font-weight: 500; + color: #1e293b; + margin-bottom: 4px; + display: flex; + align-items: center; + + .f-chat-skill-market-modal-item-tag { + margin-left: 8px; + padding: 2px 8px; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%); + border-radius: 6px; + font-size: 11px; + color: #2563eb; + font-weight: 500; + } + } + + .f-chat-skill-market-modal-item-desc { + font-size: 12px; + color: #64748b; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 1.5; + } + } + + .f-chat-skill-market-modal-item-check { + width: 22px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: #cbd5e1; + + .f-icon { + font-size: 18px; + } + } + } + + .f-chat-skill-market-modal-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 24px; + border-top: 1px solid rgba(0, 0, 0, 0.06); + background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); + + .f-chat-skill-market-modal-selected { + display: flex; + align-items: center; + gap: 8px; + flex: 1; + min-width: 0; + + .f-chat-skill-market-modal-selected-label { + font-size: 13px; + color: #64748b; + flex-shrink: 0; + } + + .f-chat-skill-market-modal-selected-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; + } + + .f-chat-skill-market-modal-selected-tag { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 10px; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + border-radius: 8px; + font-size: 12px; + color: #2563eb; + font-weight: 500; + + button { + border: none; + background: transparent; + color: #2563eb; + cursor: pointer; + padding: 0; + font-size: 16px; + line-height: 1; + margin-left: 2px; + opacity: 0.7; + transition: opacity 0.15s; + + &:hover { + opacity: 1; + } + } + } + + .f-chat-skill-market-modal-selected-empty { + font-size: 12px; + color: #94a3b8; + } + } + + .f-chat-skill-market-modal-actions { + display: flex; + gap: 10px; + flex-shrink: 0; + margin-left: 16px; + } + + .f-chat-skill-market-modal-btn { + padding: 10px 22px; + border: 1px solid rgba(0, 0, 0, 0.1); + background: #fff; + border-radius: 10px; + font-size: 14px; + color: #64748b; + cursor: pointer; + transition: all 0.2s ease; + font-weight: 500; + + &:hover { + border-color: #2563eb; + color: #2563eb; + background: rgba(37, 99, 235, 0.04); + } + + &.primary { + background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); + border-color: #2563eb; + color: #fff; + box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25); + + &:hover { + background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); + box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); + transform: translateY(-1px); + } + } + } + } +} + +// ============================================ +// 专家中心头部按钮样式 +// ============================================ +.f-chat-agent-hub-my-btn { + padding: 8px 16px; + border: 1px solid #d9d9d9; + background: #fff; + border-radius: 4px; + font-size: 14px; + color: #666; + cursor: pointer; + display: flex; + align-items: center; + gap: 6px; + transition: all 0.2s; + + &:hover { + border-color: $button-blue; + color: $button-blue; + } + + .f-icon { + font-size: 14px; + } +} + @import "./components/prompts/index.scss"; @import "./components/carousel/index.scss"; @import "./components/welcome/index.scss"; @@ -5214,4 +6701,3 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); @import "./components/generate-process/index.scss"; @import "./components/started-todo/index.scss"; @import "./components/todo/index.scss"; -@import "./components/enterprise-cloud/index.scss"; \ No newline at end of file diff --git a/packages/conversation/src/vite-env.d.ts b/packages/conversation/src/vite-env.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..70196022212082aa0593ebe3198bf2a033685388 --- /dev/null +++ b/packages/conversation/src/vite-env.d.ts @@ -0,0 +1,9 @@ +/// + +interface ImportMetaEnv { + readonly VITE_API_BASE: string +} + +interface ImportMeta { + readonly env: ImportMetaEnv +} diff --git a/packages/conversation/vite.config.ts b/packages/conversation/vite.config.ts index 467cb453b2ca8e30c2a19460121cb7facaf1b343..f210b22f6357d12b9fc494b4ab270226e3dcd192 100644 --- a/packages/conversation/vite.config.ts +++ b/packages/conversation/vite.config.ts @@ -12,11 +12,11 @@ export default defineConfig({ '@': resolve(__dirname, 'src'), }, }, - server: { - proxy: { - '/trpc': { - target: 'http://localhost:3210', - changeOrigin: true, + css: { + preprocessorOptions: { + scss: { + api: 'modern', + silenceDeprecations: ['legacy-js-api', 'import'], }, }, },