feat(agent): 支持自定义API配置并优化UI交互
- 为agent.json添加apiUrl、apiKey、apiModel字段支持 - 更新API接口类型定义，支持传递自定义API配置 - 优化AgentRepoList组件UI样式和交互效果 - 增强JSON文件上传校验逻辑，支持API配置验证 - 改进任务结果页面布局和视觉呈现 - 添加任务过程查看抽屉功能 - 实现执行按钮动态样式和悬停效果 - 优化节点连接线渲染逻辑和性能
This commit is contained in:
zhaoweijie
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user