UI设计文档
1. 项目概述
Lynxe UI是一个基于Vue 3 + TypeScript开发的现代化Web应用界面，主要用于AI助手交互、计划执行和系统配置管理。项目采用了模块化架构设计，具有良好的可扩展性和可维护性。
1.1 项目定位
- 提供直观、易用的AI助手交互界面
- 支持复杂计划的可视化执行与管理
- 提供全面的系统配置管理功能
- 支持多语言国际化
- 适配不同屏幕尺寸
1.2 核心价值
- 现代化的UI设计，提升用户体验
- 模块化架构，便于扩展和维护
- 高性能渲染，确保流畅的用户交互
- 完善的国际化支持，便于全球化部署
- 强大的状态管理，确保数据一致性
2. 架构设计
2.1 技术栈
| 类别 | 技术 | 版本 | 用途 |
|---|---|---|---|
| 框架 | Vue | 3.3.8 | 前端框架 |
| 语言 | TypeScript | ~5.3.3 | 类型安全开发 |
| 构建工具 | Vite | ^5.4.21 | 项目构建与开发 |
| UI组件库 | Ant Design Vue | ^4.0.8 | 基础UI组件 |
| 状态管理 | Pinia | ^2.3.1 | 全局状态管理 |
| 路由 | Vue Router | ^4.2.5 | 页面导航 |
| 国际化 | Vue I18n | ^9.14.5 | 多语言支持 |
| HTTP客户端 | Axios | ^1.12.0 | API请求 |
| 图标库 | Iconify | ^4.1.1 | 图标管理 |
| 编辑器 | Monaco Editor | ^0.45.0 | 代码编辑 |
| 进度条 | NProgress | ^0.2.0 | 页面加载进度 |
| 颜色选择器 | Vue3 ColorPicker | ^2.3.0 | 颜色选择组件 |
| 日期处理 | Dayjs | ^1.11.10 | 日期时间格式化 |
| 富文本处理 | Marked | ^16.2.0 | Markdown渲染 |
| 代码高亮 | Highlight.js | ^11.11.1 | 代码语法高亮 |
| 安全处理 | DOMPurify | ^3.2.6 | HTML净化 |
2.2 整体架构
Lynxe UI采用了经典的三层架构设计，同时结合了Vue 3的组合式API和组件化思想，构建了一个现代化的Web应用架构。
#### 2.2.1 三层架构
1. 表现层：由Vue组件组成，负责UI渲染和用户交互
- 页面组件（Views）：负责整体页面布局和路由管理
- 通用组件（Components）：可复用的UI组件
- 布局组件：负责页面布局结构
- 组合式函数（Composables）：封装可复用的业务逻辑
- 状态管理（Stores）：管理应用状态
- 路由守卫：处理路由跳转逻辑
- API服务：封装后端API请求
- 工具函数：通用工具方法
- 类型定义：TypeScript类型定义
应用的初始化流程如下：
1. 加载依赖资源（CSS、字体等） 2. 创建Vue应用实例 3. 初始化插件（Pinia、Ant Design Vue、Vue3 ColorPicker、i18n、router） 4. 初始化消息对话框单例 5. 初始化语言设置 6. 挂载应用到DOM
核心初始化代码位于 src/main.ts：
const app = createApp(App)
const pinia = createPinia()
app.use(pinia).use(Antd).use(Vue3ColorPicker).use(i18n).use(router)
// 初始化消息对话框单例
useMessageDialogSingleton()
// 初始化语言设置
initializeLanguage()
.then(() => {
app.mount('#app')
})
.catch(error => {
console.error('Failed to initialize language, mounting app with default language:', error)
app.mount('#app')
})
2.3 核心模块
| 模块 | 主要职责 | 文件位置 | 核心实现 |
|---|---|---|---|
| 对话系统 | 处理用户与AI助手的交互 | src/views/home/, src/views/direct/, src/components/chat/ | ChatContainer.vue, UserInputForm.vue, ResponseSection.vue |
| 计划执行 | 管理和执行AI计划 | src/composables/usePlanExecution.ts, src/components/chat/ExecutionDetails.vue | ExecutionDetails.vue, usePlanExecution.ts |
| 模板管理 | 管理计划模板 | src/stores/templateStore.ts, src/composables/usePlanTemplateConfig.ts | templateStore.ts, usePlanTemplateConfig.ts |
| 配置管理 | 系统配置管理 | src/views/configs/ | configs/index.vue, 各配置子组件 |
| 文件浏览器 | 管理系统文件 | src/components/file-browser/ | FileBrowser.vue, FileTreeNode.vue |
| 国际化 | 多语言支持 | src/base/i18n/ | i18n/index.ts, 语言文件 |
| 消息提示 | 全局消息提示 | src/composables/useToast.ts | useToast.ts |
| 表单验证 | 表单验证逻辑 | 基于Ant Design Vue表单组件 | Form组件, 自定义验证规则 |
3. 设计思想
3.1 组件化设计
Lynxe UI采用了高度组件化的设计思想，将UI拆分为可复用的组件，每个组件都有明确的职责和接口。
#### 3.1.1 组件设计原则
- 单一职责原则：每个组件只负责一个功能，如
ChatContainer.vue只负责对话展示，UserInputForm.vue只负责用户输入 - 高内聚低耦合：组件内部逻辑紧密相关，组件之间通过props和emit进行通信，如
ChatContainer通过props接收消息，通过emit触发事件 - 可配置性：通过props实现组件的灵活配置，如
BlurCard组件支持自定义内容和样式 - 可测试性：组件设计便于单元测试，如纯展示组件便于快照测试
组件分为以下几个层次：
1. 页面组件（Views）：负责整体页面布局和路由管理，如 home/index.vue、direct/index.vue
2. 业务组件：实现特定业务功能的组件，如 ChatContainer.vue、ExecutionDetails.vue
3. 通用组件：可复用的UI组件，如 BlurCard.vue、LanguageSwitcher.vue
4. 基础组件：基于Ant Design Vue封装的基础组件，提供统一的样式和行为
#### 3.1.3 组件通信
组件之间通过以下方式进行通信：
- Props：父组件向子组件传递数据
- Emit：子组件向父组件触发事件
- Provide/Inject：跨组件层级共享数据，如国际化配置
- 状态管理：通过Pinia共享全局状态，如模板管理、任务管理
3.2 组合式API
Lynxe UI充分利用了Vue 3的组合式API，将业务逻辑封装为可复用的组合式函数。
#### 3.2.1 组合式函数设计原则
- 逻辑复用：将可复用的业务逻辑封装为组合式函数，如
useRequest封装API请求逻辑 - 关注点分离：将不同关注点的逻辑分离到不同的组合式函数中，如
useScrollBehavior处理滚动逻辑 - 类型安全：充分利用TypeScript确保类型安全，如
usePlanExecution定义了明确的返回类型 - 生命周期管理：在组合式函数中管理相关的生命周期，如
usePlanExecution在组件卸载时清理资源
| 组合式函数 | 主要职责 | 文件位置 |
|---|---|---|
usePlanExecution | 处理计划执行逻辑 | src/composables/usePlanExecution.ts |
usePlanTemplateConfig | 处理计划模板配置 | src/composables/usePlanTemplateConfig.ts |
useRequest | 封装API请求逻辑 | src/composables/useRequest.ts |
useToast | 处理提示消息 | src/composables/useToast.ts |
useScrollBehavior | 处理滚动行为 | src/components/chat/composables/useScrollBehavior.ts |
useMessageFormatting | 处理消息格式化 | src/components/chat/composables/useMessageFormatting.ts |
usePlanTemplateConfigSingleton | 计划模板配置单例 | src/composables/usePlanTemplateConfig.ts |
useMessageDialogSingleton | 消息对话框单例 | src/composables/useMessageDialog.ts |
- 更好的逻辑复用：通过组合式函数可以轻松复用业务逻辑
- 更灵活的代码组织：可以根据逻辑关注点组织代码，而不是根据选项类型
- 更好的类型推导：TypeScript可以更好地推导组合式函数的类型
- 更小的打包体积：组合式API的按需引入可以减小打包体积
- 更清晰的代码结构：通过组合式函数可以将相关逻辑组织在一起，提高代码可读性
3.3 状态管理
Lynxe UI使用Pinia进行状态管理，将应用状态分为多个独立的store，每个store负责管理特定领域的状态。
#### 3.3.1 状态管理设计原则
- 单一数据源：所有状态都集中在store中管理，确保数据一致性
- 状态不可变：状态更新必须通过actions进行，确保状态变更可追踪
- 模块化设计：按功能模块划分store，如
taskStore管理任务状态，templateStore管理模板状态 - 类型安全：充分利用TypeScript确保状态类型安全
- 响应式设计：利用Vue的响应式系统，确保状态变更能及时反映到UI
| Store | 主要职责 | 文件位置 |
|---|---|---|
taskStore | 管理当前任务状态 | src/stores/task.ts |
templateStore | 管理计划模板 | src/stores/templateStore.ts |
sidebarStore | 管理侧边栏状态 | src/stores/sidebar.ts |
namespaceStore | 管理命名空间 | src/stores/namespaceStore.ts |
memoryStore | 管理记忆数据 | src/stores/memory.ts |
parameterHistoryStore | 管理参数历史 | src/stores/parameterHistoryStore.ts |
uploadedFilesStore | 管理上传文件 | src/stores/uploadedFilesStore.ts |
每个Store都遵循以下设计模式：
1. State：定义状态数据结构 2. Getters：定义派生状态，用于计算复杂数据 3. Actions：定义状态更新逻辑，支持异步操作 4. Mutations：（可选）定义同步状态更新，Pinia中可直接在actions中修改状态
3.4 国际化设计
Lynxe UI支持国际化，采用Vue I18n实现多语言切换。
#### 3.4.1 国际化实现架构
国际化实现架构包括：
1. 语言文件：定义各语言的翻译文本，如 en.ts、zh.ts
2. I18n配置：初始化和配置Vue I18n实例
3. 语言切换：提供语言切换功能
4. 后端同步：将语言设置同步到后端
#### 3.4.2 国际化核心实现
核心国际化逻辑位于 src/base/i18n/index.ts：
export const i18n = createI18n({
legacy: false,
locale: localeConfig.locale,
fallbackLocale: 'zh',
messages: {
en: en,
zh: zh,
},
})
// 初始化语言
export const initializeLanguage = async () => {
try {
// 从后端获取语言设置
const backendLanguage = await getLanguageFromBackend()
// 更新语言配置
i18n.global.locale.value = backendLanguage
localeConfig.locale = backendLanguage
localStorage.setItem(LOCAL_STORAGE_LOCALE, backendLanguage)
return backendLanguage
} catch (error) {
// 失败时从localStorage获取，或使用默认语言
const storedLanguage = localStorage.getItem(LOCAL_STORAGE_LOCALE)
const defaultLanguage = storedLanguage || 'zh'
i18n.global.locale.value = defaultLanguage
localeConfig.locale = defaultLanguage
localStorage.setItem(LOCAL_STORAGE_LOCALE, defaultLanguage)
return defaultLanguage
}
}
// 切换语言
export const changeLanguage = async (locale: string) => {
try {
// 保存到后端
await setLanguageInBackend(locale as 'zh' | 'en')
} catch (error) {
console.warn('Failed to save language to backend, continuing with localStorage only:', error)
}
// 保存到localStorage
localStorage.setItem(LOCAL_STORAGE_LOCALE, locale)
// 更新Vue i18n和配置
i18n.global.locale.value = locale as 'zh' | 'en'
localeConfig.locale = locale
}
#### 3.4.3 国际化使用方式
在组件中使用国际化：
<!-- 在模板中使用 -->
<h1>{{ $t('home.welcomeTitle') }}</h1>
<!-- 在脚本中使用 -->
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const title = t('home.welcomeTitle')
</script>
3.5 响应式设计
Lynxe UI采用了响应式设计，确保在不同屏幕尺寸下都能提供良好的用户体验。
#### 3.5.1 响应式设计原则
- 流体布局：使用百分比、flex、grid等布局方式，确保布局能自适应不同屏幕尺寸
- 媒体查询：针对不同屏幕尺寸应用不同的样式，如
@media (max-width: 768px) - 弹性字体：使用相对单位（rem、em）定义字体大小，确保字体能自适应屏幕尺寸
- 自适应组件：组件能根据屏幕尺寸调整自身大小和布局
- 触摸友好：针对移动设备优化交互，确保触摸操作流畅
响应式实现主要通过以下方式：
1. CSS媒体查询：针对不同屏幕尺寸应用不同样式 2. Flex布局：使用flex实现灵活的布局 3. Grid布局：使用grid实现复杂的网格布局 4. 相对单位：使用rem、em等相对单位 5. 组件适配：组件内部根据屏幕尺寸调整布局
例如，ChatContainer.vue 中的响应式设计：
@media (max-width: 768px) {
.chat-container {
.messages {
padding: 16px;
}
.scroll-to-bottom {
bottom: 20px;
right: 20px;
width: 36px;
height: 36px;
svg {
font-size: 18px;
}
}
}
}
4. UI设计原则
4.1 深色主题
Lynxe UI采用了深色主题设计，主要基于以下考虑：
- 减少视觉疲劳：深色主题适合长时间使用，减少眼睛疲劳
- 突出内容：深色背景能更好地突出内容，提高可读性
- 现代化视觉效果：深色主题具有现代化的视觉效果，符合当前设计趋势
- 省电：对于OLED屏幕，深色主题能减少电量消耗
深色主题的主要颜色方案：
| 颜色类型 | 颜色值 | 用途 |
|---|---|---|
| 背景色 | #0a0a0a | 主背景色 |
| 文字色 | #ffffff | 主文字色 |
| 主色调 | #667eea → #764ba2 | 渐变主色调，用于强调和交互元素 |
| 辅助色 | #4f46e5 | 辅助色，用于次要交互元素 |
| 边框色 | rgba(255, 255, 255, 0.1) | 边框和分隔线 |
| 强调色 | #4f46e5 | 强调色，用于重要元素 |
| 错误色 | #ff6b6b | 错误提示色 |
| 成功色 | #4ade80 | 成功提示色 |
| 警告色 | #fbbf24 | 警告提示色 |
深色主题通过CSS变量和样式定义实现：
body {
background: #0a0a0a;
color: #ffffff;
}
/* 定义CSS变量 */
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--background-color: #0a0a0a;
--text-color: #ffffff;
--border-color: rgba(255, 255, 255, 0.1);
}
4.2 现代化UI
Lynxe UI采用了现代化的UI设计，主要特点包括：
#### 4.2.1 渐变效果
使用渐变色彩增强视觉吸引力，如按钮、卡片等元素：
.send-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
#### 4.2.2 模糊效果
使用毛玻璃效果增强层次感，如卡片、输入框等元素：
.input-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
}
#### 4.2.3 动画效果
添加平滑的过渡动画和悬浮效果，提升用户体验：
.send-button {
transition: all 0.2s ease;
&:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
}
#### 4.2.4 卡片设计
采用模块化的卡片布局，清晰展示内容：
.example-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
#### 4.2.5 简洁的排版
采用清晰的层次结构，使用不同的字体大小、粗细和颜色区分内容层级：
.welcome-title {
font-size: 32px;
font-weight: 600;
color: #ffffff;
margin: 0 0 16px 0;
}
.welcome-subtitle {
font-size: 18px;
color: #888888;
margin: 0;
line-height: 1.5;
}
4.3 交互设计
Lynxe UI注重用户交互体验，主要设计原则包括：
#### 4.3.1 直观的操作流程
设计清晰的操作流程，减少用户的认知负担，如对话流程、配置流程等。
#### 4.3.2 及时的反馈机制
提供及时的反馈，让用户知道操作的结果，如按钮点击反馈、加载状态、成功/错误提示等。
#### 4.3.3 清晰的视觉引导
使用颜色、图标、动画等元素引导用户操作，如高亮当前步骤、提示可交互元素等。
#### 4.3.4 支持键盘快捷键
支持常用的键盘快捷键，提高操作效率，如Ctrl+Enter发送消息、Tab切换焦点等。
#### 4.3.5 减少用户操作步骤
优化操作流程，减少不必要的步骤，如自动保存、默认值设置等。
#### 4.3.6 智能提示
提供智能提示和建议，帮助用户完成操作，如输入提示、模板建议等。
5. 核心功能模块设计
5.1 对话系统
对话系统是Lynxe UI的核心功能，负责处理用户与AI助手的交互。
#### 5.1.1 对话系统架构
对话系统由以下核心组件组成：
1. ChatContainer：对话容器组件，负责整体对话布局和消息展示 2. UserInputForm：用户输入表单，负责用户输入和文件上传 3. ResponseSection：响应展示组件，负责展示AI响应 4. ExecutionDetails：执行详情组件，负责展示计划执行详情 5. RecursiveSubPlan：递归子计划组件，负责展示嵌套计划
#### 5.1.2 对话流程
对话流程如下：
1. 用户输入消息或上传文件 2. 系统发送请求到后端 3. 后端返回响应（可能包含计划执行） 4. 系统展示响应内容 5. 如果包含计划执行，展示计划执行详情 6. 用户可以继续输入或终止对话
#### 5.1.3 对话系统核心实现
ChatContainer.vue 是对话系统的核心组件，负责管理对话消息和渲染：
<template>
<div class="chat-container">
<!-- 消息容器 -->
<div class="messages" ref="messagesRef" @click="handleMessageContainerClick">
<!-- 消息列表 -->
<div
v-for="message in compatibleMessages"
:key="message.id"
class="chat-message"
:class="[getMessageClasses(message), { streaming: isMessageStreaming(message.id) }]"
>
<!-- 用户消息 -->
<div v-if="message.type === 'user'" class="user-message" :data-message-id="message.id">
<!-- 用户消息内容 -->
</div>
<!-- 助手消息 -->
<div v-else-if="message.type === 'assistant'" class="assistant-message">
<!-- 计划执行详情 -->
<ExecutionDetails
v-if="message.planExecution"
:plan-execution="message.planExecution"
:step-actions="message.stepActions || []"
:generic-input="message.genericInput || ''"
@step-selected="handleStepSelected"
/>
<!-- 响应内容 -->
<ResponseSection
v-if="message.content || message.error || isMessageStreaming(message.id) || message.planExecution?.userInputWaitState?.waiting"
:content="message.content || ''"
:is-streaming="isMessageStreaming(message.id) || false"
v-bind="{
...(message.error ? { error: message.error } : {}),
...(message.planExecution?.userInputWaitState ? { userInputWaitState: message.planExecution.userInputWaitState } : {}),
...(message.planExecution?.currentPlanId ? { planId: message.planExecution.currentPlanId } : {})
}"
:timestamp="message.timestamp"
:generic-input="message.genericInput || ''"
@copy="() => handleCopyMessage(message.id)"
@regenerate="() => handleRegenerateMessage(message.id)"
@retry="() => handleRetryMessage(message.id)"
@user-input-submitted="(inputData: Record<string, unknown>) => handleUserInputSubmit(message, inputData)"
/>
</div>
</div>
<!-- 加载指示器 -->
<div v-if="isLoading" class="loading-message">
<!-- 加载内容 -->
</div>
</div>
<!-- 滚动到底部按钮 -->
<Transition name="scroll-button">
<button
v-if="showScrollToBottom"
class="scroll-to-bottom"
@click="() => scrollToBottom()"
:title="$t('chat.scrollToBottom')"
>
<Icon icon="carbon:chevron-down" />
</button>
</Transition>
</div>
</template>
#### 5.1.4 消息类型
对话系统支持多种消息类型：
1. 用户消息：用户发送的消息，包含文本和附件 2. 助手消息：AI助手返回的消息，包含文本、计划执行等 3. 系统消息：系统发送的消息，如错误提示、状态更新等 4. 计划执行消息：包含计划执行详情的消息
5.2 计划执行
计划执行模块负责管理和执行AI计划，支持复杂计划的可视化执行与管理。
#### 5.2.1 计划执行架构
计划执行模块由以下核心组件组成：
1. usePlanExecution：计划执行组合式函数，负责计划执行逻辑 2. ExecutionDetails：执行详情组件，负责展示计划执行详情 3. RecursiveSubPlan：递归子计划组件，负责展示嵌套计划 4. TaskStop：任务停止组合式函数，负责停止计划执行
#### 5.2.2 计划执行流程
计划执行流程如下：
1. 用户选择计划模板或输入指令 2. 系统加载计划模板并配置参数 3. 用户确认执行计划 4. 系统发送执行请求到后端 5. 后端执行计划并返回执行状态 6. 系统实时展示执行详情 7. 执行完成后展示结果
#### 5.2.3 计划执行状态管理
计划执行状态包括：
1. 待执行：计划已创建但未执行 2. 执行中：计划正在执行 3. 暂停：计划执行已暂停 4. 完成：计划执行完成 5. 失败：计划执行失败 6. 终止：计划执行被终止
#### 5.2.4 计划执行详情展示
计划执行详情通过 ExecutionDetails 组件展示，包括：
1. 计划基本信息：计划名称、类型、状态等 2. 执行步骤：计划的执行步骤和状态 3. 步骤详情：每个步骤的详细信息和结果 4. 子计划：嵌套的子计划执行详情 5. 执行日志：计划执行的详细日志
5.3 配置管理
配置管理模块负责系统配置的管理，包括基础配置、数据库配置、MCP配置、模型配置等。
#### 5.3.1 配置管理架构
配置管理模块由以下核心组件组成：
1. configs/index.vue：配置管理主页面 2. basicConfig.vue：基础配置页面 3. databaseConfig.vue：数据库配置页面 4. mcpConfig.vue：MCP配置页面 5. modelConfig.vue：模型配置页面 6. namespaceConfig.vue：命名空间配置页面 7. planTemplateConfig.vue：计划模板配置页面
#### 5.3.2 配置管理流程
配置管理流程如下：
1. 用户进入配置管理页面 2. 选择配置类别 3. 查看或编辑配置 4. 保存配置 5. 系统验证配置并保存到后端 6. 配置生效
#### 5.3.3 配置验证
配置管理模块提供了完善的配置验证机制：
1. 前端验证：使用Ant Design Vue的表单验证功能 2. 后端验证：后端API进行配置验证 3. 实时验证：输入时进行实时验证 4. 提交验证：提交时进行完整验证
5.4 模板管理
模板管理模块负责计划模板的管理，支持模板创建、编辑、删除、导入、导出等功能。
#### 5.4.1 模板管理架构
模板管理模块由以下核心组件组成：
1. templateStore：模板状态管理 2. usePlanTemplateConfig：计划模板配置组合式函数 3. usePlanTemplateImport：计划模板导入组合式函数 4. TemplateList：模板列表组件 5. PlanTemplateConfig：计划模板配置组件
#### 5.4.2 模板管理功能
模板管理模块提供以下功能：
1. 模板列表：展示所有计划模板 2. 模板创建：创建新的计划模板 3. 模板编辑：编辑现有计划模板 4. 模板删除：删除计划模板 5. 模板导入：从文件导入计划模板 6. 模板导出：导出计划模板到文件 7. 模板执行：基于模板执行计划
#### 5.4.3 模板数据结构
计划模板数据结构包括：
1. 基本信息：模板名称、描述、类型等 2. 计划配置：计划的具体配置，包括步骤、参数等 3. 元数据：创建时间、更新时间、创建者等 4. 版本信息：模板版本号、变更记录等
6. 代码组织与规范
6.1 文件结构
代码按照功能模块进行组织，每个模块都有明确的职责和边界。主要文件结构如下：
src/
├── api/ # API服务，封装后端API请求
├── base/ # 基础配置，如国际化、主题等
├── components/ # 可复用组件
├── composables/ # 组合式函数，封装可复用的业务逻辑
├── plugins/ # 插件配置
├── router/ # 路由配置
├── stores/ # 状态管理，使用Pinia
├── types/ # TypeScript类型定义
├── utils/ # 工具函数
├── views/ # 页面组件
├── App.vue # 根组件
└── main.ts # 入口文件
#### 6.1.1 API目录结构
API目录按照功能模块划分，每个API服务负责一个功能领域：
src/api/
├── admin-api-service.ts # 管理API
├── agent-execution.ts # 代理执行API
├── agent.ts # 代理API
├── common-api-service.ts # 通用API
├── config-api-service.ts # 配置API
├── cron-api-service.ts # 定时任务API
├── datasource-config-api-service.ts # 数据源配置API
├── direct-api-service.ts # 直接API
├── file-browser-api-service.ts # 文件浏览器API
├── file-upload-api-service.ts # 文件上传API
├── language.ts # 语言API
├── mcp-api-service.ts # MCP API
├── memory-api-service.ts # 记忆API
├── model-api-service.ts # 模型API
├── namespace-api-service.ts # 命名空间API
├── plan-act-api-service.ts # 计划执行API
├── plan-parameter-api-service.ts # 计划参数API
└── tool-api-service.ts # 工具API
#### 6.1.2 组件目录结构
组件目录按照功能模块划分，每个组件都有自己的目录和相关文件：
src/components/
├── blurCard/ # 模糊卡片组件
├── chat/ # 对话相关组件
│ ├── composables/ # 对话相关组合式函数
│ ├── ChatContainer.vue # 对话容器组件
│ ├── ExecutionDetails.vue # 执行详情组件
│ ├── RecursiveSubPlan.vue # 递归子计划组件
│ ├── ResponseSection.vue # 响应展示组件
│ └── UserInputForm.vue # 用户输入表单
├── cron-task-modal/ # 定时任务模态框
├── editor/ # 编辑器组件
├── file-browser/ # 文件浏览器组件
├── file-upload/ # 文件上传组件
├── flex/ # 弹性布局组件
├── input/ # 输入组件
├── language-switcher/ # 语言切换组件
├── memory/ # 记忆组件
├── modal/ # 模态框组件
├── publish-service-modal/ # 发布服务模态框
├── right-panel/ # 右侧面板组件
├── select/ # 选择组件
├── shared/ # 共享组件
├── sidebar/ # 侧边栏组件
├── switch/ # 开关组件
├── toast/ # 提示组件
├── tool-selection-modal/ # 工具选择模态框
├── GroupedSelect.vue # 分组选择组件
├── MonacoEditor.vue # Monaco编辑器组件
└── TabPanel.vue # 标签页组件
6.2 编码规范
Lynxe UI遵循以下编码规范：
1. TypeScript规范：
- 使用严格模式
- 明确类型定义
- 避免使用
any类型 - 使用接口定义对象类型
- 使用类型别名定义复杂类型
- 使用