iod/AgentCoord
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(agent): 支持自定义API配置并优化UI交互

Browse Source 
- 为agent.json添加apiUrl、apiKey、apiModel字段支持
- 更新API接口类型定义，支持传递自定义API配置
- 优化AgentRepoList组件UI样式和交互效果
- 增强JSON文件上传校验逻辑，支持API配置验证
- 改进任务结果页面布局和视觉呈现
- 添加任务过程查看抽屉功能
- 实现执行按钮动态样式和悬停效果
- 优化节点连接线渲染逻辑和性能
This commit is contained in:
zhaoweijie
2025-12-15 20:46:54 +08:00
parent 6392301833
commit 77530c49f8
25 changed files with 2040 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
frontend/src/styles/theme.scss
View File

@@ -1,16 +1,207 @@
// 浅色模式
:root {
--color-bg: #fff;
--color-bg-secondary: #fafafa;
--color-bg-tertiary: #f5f5f5;
--color-text: #000;
--color-bg: #ffffff;
--color-bg-secondary: #ffffff;
--color-bg-tertiary: #f0f0f0; //正确
--color-bg-quaternary: rgba(0, 0, 0, 11%);
--color-bg-quinary: #f7f7f7;
--color-text: #36404F;
// 标题文字颜色
--color-text-title-header: #262626;
--color-text-secondary: #4f4f4f;
--color-border-default: #e0e0e0;
--color-accent: #222222;
--color-accent-secondary: #315ab4;
// 鼠标悬浮背景色
--color-bg-hover: #f0f0f0;
// 鼠标悬浮字体颜色
--color-text-hover: #222222;
// 分割线颜色
--color-border: #D8D8d8;
// 内容区鼠标悬浮颜色
--color-bg-content-hover: #f0f0f0;
//列表背景颜色
--color-bg-list: #E1E1E1;
// 详情卡文字内容
--color-text-detail: #4f4f4f;
// 详情卡背景颜色
--color-bg-detail: #f7f7f7;
// 任务栏背景颜色
--color-bg-taskbar: #ffffff;
// 详情列表背景颜色
--color-bg-detail-list: rgba(230, 230, 230, 0.6) ;//#E6E6E6 60%
// 详情列表运行后背景颜色
--color-bg-detail-list-run: #e6e6e6; //运行后背景色#e6e6e6 100%
// 旋转图标背景颜色
--color-bg-icon-rotate: #a7a7a7;
// 智能体列表背景颜色
--color-agent-list-bg: #ededed; //背景色#fbfcff
// 智能体边框颜色
--color-agent-list-border: #E0E0E070; //边框#FFFFFF60 60%
//智能体鼠标悬浮颜色
--color-agent-list-hover-bg: #f7f7f7; //hover背景色#FFFFFF 100%
// 智能体鼠标悬浮边框颜色
--color-agent-list-hover-border: #e0e0e0; //hover边框#E0E0E0 100%
//智能体鼠标悬浮阴影
--color-agent-list-hover-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); //hover阴影 #FFFFFF 100%
//任务框下拉阴影
--color-task-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.2);
// 卡片边框颜色
--color-card-border: #ececec;
// 卡片鼠标悬浮边框颜色
--color-card-border-hover: #ececec;
// 任务大纲卡片颜色
--color-card-bg-task: #ededed;
// 任务大纲卡片悬浮颜色
--color-card-bg-task-hover: #f7f7f7;
// 任务大纲卡片悬浮阴影效果
--color-card-shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
// 卡片阴影效果
--color-card-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.17);
// 任务大纲边框颜色
--color-card-border-task: #E0E0E0; //边框颜色#FFFFFF60
// 执行结果卡片颜色
--color-card-bg-result: #ececec;
// 执行结果边框颜色
--color-card-border-result: #ececec;
// 执行结果卡片悬浮颜色
--color-card-bg-result-hover: #ededed;
// 头部背景颜色
--color-header-bg: #ffffff;
// 头部字体颜色
--color-text-title: #2a3342;
//结果卡背景颜色
--color-bg-result: #eaedee;
// 任务字体背景颜色
--color-text-task: #36404F;
// 指示灯背景颜色
--color-bg-indicator: #f7f7f7;
// 三个卡片背景颜色
--color-bg-three: #fbfcff;
// 三个卡片边框颜色
--color-card-border-three: #FFFFFF60;
// 流程卡片背景颜色
--color-bg-flow: #f0f0f0;
// 三个卡片阴影
--color-card-shadow-three: 0px 0px 5px 0px rgba(0, 0, 0, 0.17);
// 头部阴影
--color-header-shadow: 0px 0px 5px 0px rgba(161, 161, 161, 0.5);
// 执行结果详情背景颜色
--color-bg-result-detail: #f7f7f7;
// 智能体库字体颜色
--color-text-agent-list: #636364;
// 智能体库字体悬浮颜色
--color-text-agent-list-hover: #222222;
// 任务栏字体颜色
--color-text-taskbar: #222222;
// 智能体卡片被选中后背景颜色
--color-agent-list-selected-bg: #f7f7f7; //选中后背景色#171b22 100%
// 结果卡片运行前颜色
--color-text-result-detail: rgba(0,0,0,0.6);
// 结果卡片运行后颜色
--color-text-result-detail-run: #000;
}
// 深色模式
html.dark {
--color-bg: #131A27;
--color-bg-secondary: #050505;
--color-bg-secondary: rgba(5, 5, 5, 0.4);
--color-bg-tertiary: #20222A;
--color-bg-quaternary: #24252A;
--color-bg-quinary: #29303c;
--color-text: #fff;
// 标题文字颜色
--color-text-title-header: #ffffff;
--color-text-secondary: #C9C9C9;
--color-border-default: #494B51;
--color-accent: #00F3FF;
--color-accent-secondary: #315ab4;
// 鼠标悬浮背景色
--color-bg-hover: #1c1e25;
// 鼠标悬浮字体颜色
--color-text-hover: #00f3ff;
// 分割线颜色
--color-border: #494B51;
// 内容区鼠标悬浮颜色
--color-bg-content-hover: #171b22;
// 列表背景颜色
--color-bg-list: #171B22;
// 详情卡文字内容
--color-text-detail: #ffffff;
// 详情卡背景颜色
--color-bg-detail: #20222a;
// 任务栏背景颜色
--color-bg-taskbar: #20222a;
// 详情列表背景颜色
--color-bg-detail-list: #050505; //运行后背景色#18191f 60%
//详情列表运行后背景颜色
--color-bg-detail-list-run: #050505;
// 旋转图标背景颜色
--color-bg-icon-rotate: #151619;
// 智能体列表背景颜色
--color-agent-list-bg: #1d222b; //背景色#181b20 100%
// 智能体边框颜色
--color-agent-list-border: rgba(8,8,8,0.6);
//智能体鼠标悬浮颜色
--color-agent-list-hover-bg: rgba(23,27,34,1); //hover背景色#171b22 100%
// 智能体鼠标悬浮边框颜色
--color-agent-list-hover-border: rgba(8,8,8,1); //hover边框#080808 100%
//智能体鼠标悬浮阴影
--color-agent-list-hover-shadow: 0 2 4 #00000050; //hover阴影 0 2 4 #00000050
//任务框下拉阴影
--color-task-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.2);
// 卡片边框颜色
--color-card-border: #1a1a1a;
// 卡片鼠标悬浮边框颜色
--color-card-border-hover: #151515;
// 任务大纲卡片颜色
--color-card-bg-task: #20222a;
// 任务大纲卡片悬浮颜色
--color-card-bg-task-hover: #171b22;
// 任务大纲边框颜色
--color-card-border-task: #151515;
// 执行结果卡片颜色
--color-card-bg-result: #1a1a1a;
// 执行结果边框颜色
--color-card-border-result: #151515;
// 执行结果卡片悬浮颜色
--color-card-bg-result-hover: #171b22;
// 头部背景颜色
--color-header-bg: #050505;
// 标题头部字体颜色
--color-text-title: #2c72e7;
// 卡片阴影效果
--color-card-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.17);
// 任务大纲卡片悬浮阴影效果
--color-card-shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
// 结果卡背景颜色
--color-bg-result: #0d1119;
// 任务字体背景颜色
--color-text-task: #d7d7d7;
// 指示灯背景颜色
--color-bg-indicator: #17181a;
// 三个卡片背景颜色
--color-bg-three: #29303c;
// 三个卡片边框颜色
--color-card-border-three: #393d42;
// 流程卡片背景颜色
--color-bg-flow: #1C222a;
// 三个卡片阴影
--color-card-shadow-three: 0px 0px 6px 0px rgba(0, 0, 0, 0.8);
// 头部阴影
--color-header-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
// 执行结果详情背景颜色
--color-bg-result-detail: #24252a;
// 智能体库字体颜色
--color-text-agent-list: #969696;
// 智能体库字体悬浮颜色
--color-text-agent-list-hover: #b8b8b8;
// 任务栏字体颜色
--color-text-taskbar: #ffffff;
// 智能体卡片被选中后背景颜色
--color-agent-list-selected-bg: #20222a; //选中后背景色#171b22 100%
// 结果卡片运行前颜色
--color-text-result-detail: #6c6e72;
// 结果卡片运行后颜色
--color-text-result-detail-run: #fff;
}

135
frontend/src/styles/variables.module.scss
View File

@@ -4,6 +4,96 @@ $bg-tertiary: var(--color-bg-tertiary);
$bg-quaternary: var(--color-bg-quaternary);
$text: var(--color-text);
$text-secondary: var(--color-text-secondary);
// 鼠标悬浮
$bg-hover: var(--color-bg-hover);
// 字体悬浮
$text-hover: var(--color-text-hover);
// 分割线
$border: var(--color-border);
// 内容区鼠标悬浮
$bg-content-hover: var(--color-bg-content-hover);
// 列表背景颜色
$bg-list: var(--color-bg-list);
// 详情卡文字内容
$text-detail: var(--color-text-detail);
// 详情卡背景颜色
$bg-detail: var(--color-bg-detail);
// 任务栏背景颜色
$bg-taskbar: var(--color-bg-taskbar);
// 详情列表背景颜色
$bg-detail-list: var(--color-bg-detail-list);
// 旋转图标背景颜色
$bg-icon-rotate: var(--color-bg-icon-rotate);
// 智能体列表背景颜色
$agent-list-bg: var(--color-agent-list-bg);
// 智能体边框颜色
$agent-list-border: var(--color-agent-list-border);
//智能体鼠标悬浮颜色
$agent-list-hover-bg: var(--color-agent-list-hover-bg);
// 智能体鼠标悬浮边框颜色
$agent-list-hover-border: var(--color-agent-list-hover-border);
//智能体鼠标悬浮阴影
$agent-list-hover-shadow: var(--color-agent-list-hover-shadow);
//任务框下拉阴影
$task-shadow: var(--color-task-shadow);
// 卡片边框颜色
$card-border: var(--color-card-border);
// 卡片鼠标悬浮边框颜色
$card-border-hover: var(--color-card-border-hover);
// 标题文字颜色
$text-title: var(--color-text-title);
// 任务大纲卡片颜色
$card-bg-task: var(--color-card-bg-task);
// 任务大纲边框颜色
$card-border-task: var(--color-card-border-task);
// 执行结果卡片颜色
$card-bg-result: var(--color-card-bg-result);
// 执行结果边框颜色
$card-border-result: var(--color-card-border-result);
// 头部背景颜色
$header-bg: var(--color-header-bg);
// 头部字体颜色
$header-text-title: var(--color-text-title);
// 卡片阴影效果
$card-shadow: var(--color-card-shadow);
// 任务大纲卡片悬浮颜色
$card-bg-task-hover: var(--color-card-bg-task-hover);
// 任务大纲卡片悬浮阴影效果
$card-shadow-hover: var(--color-card-shadow-hover);
// 结果卡背景颜色
$bg-result: var(--color-bg-result);
// 执行结果卡片悬浮颜色
$card-bg-result-hover: var(--color-card-bg-result-hover);
// 详情列表运行后背景颜色
$bg-detail-list-run: var(--color-bg-detail-list-run);
// 任务字体背景颜色
$text-task: var(--color-text-task);
// 指示灯背景颜色
$bg-indicator: var(--color-bg-indicator);
// 三个卡片背景颜色
$bg-three: var(--color-bg-three);
// 流程卡片背景颜色
$bg-flow: var(--color-bg-flow);
// 三个卡片边框颜色
$card-border-three: var(--color-card-border-three);
// 三个卡片阴影
$card-shadow-three: var(--color-card-shadow-three);
// 头部阴影
$header-shadow: var(--color-header-shadow);
// 执行结果详情背景颜色
$bg-result-detail: var(--color-bg-result-detail);
// 智能体库字体颜色
$text-agent-list: var(--color-text-agent-list);
// 智能体库字体悬浮颜色
$text-agent-list-hover: var(--color-text-agent-list-hover);
// 任务栏字体颜色
$text-taskbar: var(--color-text-taskbar);
// 智能体卡片被选中后背景颜色
$agent-list-selected-bg: var(--color-agent-list-selected-bg); //选中后背景色#171b22 100%
// 结果卡片运行前颜色
$text-result-detail: var(--color-text-result-detail);
:export {
bg: $bg;
@@ -12,4 +102,49 @@ $text-secondary: var(--color-text-secondary);
bg-quaternary: $bg-quaternary;
text: $text;
text-secondary: $text-secondary;
bg-hover:$bg-hover;
text-hover:$text-hover;
border: $border;
bg-content-hover:$bg-content-hover;
bg-list: $bg-list;
text-detail: $text-detail;
bg-detail: $bg-detail;
bg-taskbar: $bg-taskbar;
bg-detail-list: $bg-detail-list;
bg-icon-rotate:$bg-icon-rotate;
agent-list-bg: $agent-list-bg;
agent-list-border: $agent-list-border;
agent-list-hover-bg: $agent-list-hover-bg;
agent-list-hover-border: $agent-list-hover-border;
agent-list-hover-shadow: $agent-list-hover-shadow;
task-shadow: $task-shadow;
card-border: $card-border;
card-border-hover: $card-border-hover;
text-title: $text-title;
card-border: $card-border;
card-bg-task: $card-bg-task;
card-border-task: $card-border-task;
card-bg-result: $card-bg-result;
card-border-result: $card-border-result;
header-bg: $header-bg;
header-text-title: $header-text-title;
card-shadow: $card-shadow;
card-bg-task-hover: $card-bg-task-hover;
card-shadow-hover: $card-shadow-hover;
bg-result: $bg-result;
card-bg-result-hover: $card-bg-result-hover;
bg-detail-list-run: $bg-detail-list-run;
text-task: $text-task;
bg-indicator: $bg-indicator;
bg-three: $bg-three;
bg-flow: $bg-flow;
card-border-three: $card-border-three;
card-shadow-three: $card-shadow-three;
header-shadow: $header-shadow;
bg-result-detail: $bg-result-detail;
text-agent-list: $text-agent-list;
text-agent-list-hover: $text-agent-list-hover;
text-taskbar: $text-taskbar;
agent-list-selected-bg: $agent-list-selected-bg;
text-result-detail: $text-result-detail;
}