feat(ui): 更新任务流程卡片样式和图标
- 引入 Element Plus 图标组件替代原有文字图标 - 移除卡片阴影属性优化视觉效果 - 调整结果区域按钮组布局对齐方式 - 更新文本域样式增加颜色变量支持 - 注释掉编辑卡片背景色定义 - 添加图标依赖包到项目配置
This commit is contained in:
@@ -17,6 +17,7 @@
|
|||||||
"format": "prettier --write src/"
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.2",
|
||||||
"@jsplumb/browser-ui": "^6.2.10",
|
"@jsplumb/browser-ui": "^6.2.10",
|
||||||
"@types/markdown-it": "^14.1.2",
|
"@types/markdown-it": "^14.1.2",
|
||||||
"@vueuse/core": "^14.0.0",
|
"@vueuse/core": "^14.0.0",
|
||||||
|
|||||||
9051
frontend/pnpm-lock.yaml
generated
9051
frontend/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { getActionTypeDisplay } from '@/layout/components/config.ts'
|
import { getActionTypeDisplay } from '@/layout/components/config.ts'
|
||||||
|
import { CloseBold, Select } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
step: {
|
step: {
|
||||||
@@ -117,20 +118,18 @@ function handleCancel() {
|
|||||||
<el-button
|
<el-button
|
||||||
type="success"
|
type="success"
|
||||||
size="small"
|
size="small"
|
||||||
icon="Check"
|
:icon="Select"
|
||||||
@click="handleSave(process.ID)"
|
@click="handleSave(process.ID)"
|
||||||
title="保存"
|
title="保存"
|
||||||
>
|
>
|
||||||
√
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
type="danger"
|
type="danger"
|
||||||
size="small"
|
size="small"
|
||||||
icon="Close"
|
:icon="CloseBold"
|
||||||
@click="handleCancel"
|
@click="handleCancel"
|
||||||
title="取消"
|
title="取消"
|
||||||
>
|
>
|
||||||
×
|
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -196,7 +195,7 @@ function handleCancel() {
|
|||||||
|
|
||||||
.edit-card {
|
.edit-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #f0f2f5;
|
//background: #f0f2f5;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
@@ -213,6 +212,7 @@ function handleCancel() {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
|
color: var(--color-text-taskbar);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -322,7 +322,7 @@ defineExpose({
|
|||||||
<div class="text-[18px] font-bold mb-[18px] flex justify-between items-center px-[20px]">
|
<div class="text-[18px] font-bold mb-[18px] flex justify-between items-center px-[20px]">
|
||||||
<span class="text-[var(--color-text-title-header)]">执行结果</span>
|
<span class="text-[var(--color-text-title-header)]">执行结果</span>
|
||||||
<div
|
<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"
|
@mouseleave="handleButtonMouseLeave"
|
||||||
>
|
>
|
||||||
<!-- 任务过程按钮 -->
|
<!-- 任务过程按钮 -->
|
||||||
@@ -416,7 +416,6 @@ defineExpose({
|
|||||||
<el-card
|
<el-card
|
||||||
class="card-item w-full relative"
|
class="card-item w-full relative"
|
||||||
:class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
|
:class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
|
||||||
:shadow="true"
|
|
||||||
:id="`task-results-${item.Id}-0`"
|
:id="`task-results-${item.Id}-0`"
|
||||||
@click="emit('setCurrentTask', item)"
|
@click="emit('setCurrentTask', item)"
|
||||||
>
|
>
|
||||||
@@ -487,7 +486,6 @@ defineExpose({
|
|||||||
|
|
||||||
<el-card
|
<el-card
|
||||||
class="card-item w-full relative output-object-card"
|
class="card-item w-full relative output-object-card"
|
||||||
:shadow="true"
|
|
||||||
:class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
|
:class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
|
||||||
:id="`task-results-${item.Id}-1`"
|
:id="`task-results-${item.Id}-1`"
|
||||||
@click="emit('setCurrentTask', item)"
|
@click="emit('setCurrentTask', item)"
|
||||||
|
|||||||
Reference in New Issue
Block a user