feat(ui): 更新任务流程卡片样式和图标

- 引入 Element Plus 图标组件替代原有文字图标
- 移除卡片阴影属性优化视觉效果
- 调整结果区域按钮组布局对齐方式
- 更新文本域样式增加颜色变量支持
- 注释掉编辑卡片背景色定义
- 添加图标依赖包到项目配置
This commit is contained in:
zhaoweijie
2025-12-21 19:57:33 +08:00
parent cc22655a1e
commit 7da5e82d40
4 changed files with 4936 additions and 4132 deletions

View File

@@ -17,6 +17,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.2",
"@jsplumb/browser-ui": "^6.2.10",
"@types/markdown-it": "^14.1.2",
"@vueuse/core": "^14.0.0",

8857
frontend/pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref } from 'vue'
import { getActionTypeDisplay } from '@/layout/components/config.ts'
import { CloseBold, Select } from '@element-plus/icons-vue'
const props = defineProps<{
step: {
@@ -117,20 +118,18 @@ function handleCancel() {
<el-button
type="success"
size="small"
icon="Check"
:icon="Select"
@click="handleSave(process.ID)"
title="保存"
>
</el-button>
<el-button
type="danger"
size="small"
icon="Close"
:icon="CloseBold"
@click="handleCancel"
title="取消"
>
×
</el-button>
</div>
</div>
@@ -196,7 +195,7 @@ function handleCancel() {
.edit-card {
position: relative;
background: #f0f2f5;
//background: #f0f2f5;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -213,6 +212,7 @@ function handleCancel() {
border-radius: 4px;
resize: vertical;
min-height: 60px;
color: var(--color-text-taskbar);
}
}

View File

@@ -322,7 +322,7 @@ defineExpose({
<div class="text-[18px] font-bold mb-[18px] flex justify-between items-center px-[20px]">
<span class="text-[var(--color-text-title-header)]">执行结果</span>
<div
class="flex items-center gap-[14px] task-button-group"
class="flex items-center justify-end gap-[14px] task-button-group min-w-[175px]"
@mouseleave="handleButtonMouseLeave"
>
<!-- 任务过程按钮 -->
@@ -416,7 +416,6 @@ defineExpose({
<el-card
class="card-item w-full relative"
:class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
:shadow="true"
:id="`task-results-${item.Id}-0`"
@click="emit('setCurrentTask', item)"
>
@@ -487,7 +486,6 @@ defineExpose({
<el-card
class="card-item w-full relative output-object-card"
:shadow="true"
:class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
:id="`task-results-${item.Id}-1`"
@click="emit('setCurrentTask', item)"