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

feat:设置面板放大缩小参数调整

Browse Source
This commit is contained in:
liailing1026
2026-03-04 15:02:32 +08:00
parent a61016eace
commit 7a8acc7375
2 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/layout/components/Main/TaskTemplate/UnifiedSettingsPanel.vue
View File

@@ -70,7 +70,7 @@ const handleTabChange = (tabKey: string) => {
} }
// 切换到执行过程编排时，延迟触发自适应视图 // 切换到执行过程编排时，延迟触发自适应视图
watch(activeTab, (newTab) => { watch(activeTab, newTab => {
if (newTab === 'process') { if (newTab === 'process') {
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
@@ -153,13 +153,13 @@ defineExpose({
// 面板主体 // 面板主体
.settings-panel { .settings-panel {
position: fixed; position: fixed;
bottom: 6%; bottom: 24px;
left: 0; left: 24px;
right: 0; right: 24px;
width: 80%; width: auto;
max-width: 1200px; max-width: none;
margin: 0 auto; margin: 0 auto;
height: 70vh; height: calc(100% - 194px);
background: var(--color-bg-three); background: var(--color-bg-three);
border-radius: 20px; border-radius: 20px;
box-shadow: 0 -4px 30px rgba(0, 0, 0.4); box-shadow: 0 -4px 30px rgba(0, 0, 0.4);
@@ -171,12 +171,12 @@ defineExpose({
&.is-maximized { &.is-maximized {
max-width: none; max-width: none;
left: 24px; left: 0;
right: 24px; right: 0;
width: auto; width: 100vw;
height: calc(100% - 194px); height: 100vh;
bottom: 24px; bottom: 0;
border-radius: 20px; border-radius: 8px;
} }
} }

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

@@ -54,6 +54,16 @@
--color-card-bg-task: #ededed; --color-card-bg-task: #ededed;
// 任务大纲卡片悬浮颜色 // 任务大纲卡片悬浮颜色
--color-card-bg-task-hover: #f7f7f7; --color-card-bg-task-hover: #f7f7f7;
// 流程列表背景颜色
--color-flow-list-bg: #f5f5f5;
// 任务大纲区域背景颜色
--color-task-outline-bg: #f3f3f3;
// 分组删除按钮背景色
--color-group-delete-bg: #e0e0e0;
// 分组删除按钮悬浮背景色
--color-group-delete-bg-hover: #c0c0c0;
// 分组删除按钮图标颜色
--color-group-delete-icon: #333333;
// 任务大纲卡片悬浮阴影效果 // 任务大纲卡片悬浮阴影效果
--color-card-shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); --color-card-shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
// 卡片阴影效果 // 卡片阴影效果
@@ -187,6 +197,16 @@ html.dark {
--color-card-bg-task: #20222a; --color-card-bg-task: #20222a;
// 任务大纲卡片悬浮颜色 // 任务大纲卡片悬浮颜色
--color-card-bg-task-hover: #171b22; --color-card-bg-task-hover: #171b22;
// 流程列表背景颜色
--color-flow-list-bg: #20242C;
// 任务大纲区域背景颜色
--color-task-outline-bg: #242a34;
// 分组删除按钮背景色
--color-group-delete-bg: #2d2d2d;
// 分组删除按钮悬浮背景色
--color-group-delete-bg-hover: #0c0c0c;
// 分组删除按钮图标颜色
--color-group-delete-icon: #d8d8d8;
// 任务大纲边框颜色 // 任务大纲边框颜色
--color-card-border-task: #151515; --color-card-border-task: #151515;
// 任务大纲节点边框颜色（固定#585858） // 任务大纲节点边框颜色（固定#585858）