Selaa lähdekoodia

feat: 重构工作流编辑器顶部工具栏 UI

- 添加返回按钮(左上角圆形按钮,hover 左移动画)
- 移除所有 emoji,使用 Element Plus 图标
- 优化按钮布局:撤销/重做、适应/验证/清空、保存
- 保存按钮移至右侧,突出主要操作
- 工具栏添加渐变背景和阴影
- 优化统计信息显示(图标+文字,背景卡片)
- 统一按钮样式,移除 size='small' 使用默认尺寸
何文松 21 tuntia sitten
vanhempi
commit
7b8773eb34
1 muutettua tiedostoa jossa 62 lisäystä ja 20 poistoa
  1. 62 20
      frontend/vue-demo/src/components/workflow/RuleWorkflow.vue

+ 62 - 20
frontend/vue-demo/src/components/workflow/RuleWorkflow.vue

@@ -5,6 +5,7 @@ import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { ArrowLeft, Grid, Connection } from '@element-plus/icons-vue'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 import '@vue-flow/controls/dist/style.css'
@@ -899,34 +900,44 @@ defineExpose({
   <div class="rule-workflow" @click="hideContextMenu">
     <div class="workflow-toolbar">
       <div class="toolbar-left">
+        <el-button text circle @click="$emit('close')" title="返回" class="back-button">
+          <el-icon :size="20"><ArrowLeft /></el-icon>
+        </el-button>
+        
+        <el-divider direction="vertical" />
+        
         <el-button-group>
-          <el-button size="small" :disabled="!canUndo" @click="undo" title="撤销 (Ctrl+Z)">
-            ↩️ 撤销
+          <el-button :disabled="!canUndo" @click="undo" title="撤销 (Ctrl+Z)" :icon="'RefreshLeft'">
+            撤销
           </el-button>
-          <el-button size="small" :disabled="!canRedo" @click="redo" title="重做 (Ctrl+Y)">
-            ↪️ 重做
+          <el-button :disabled="!canRedo" @click="redo" title="重做 (Ctrl+Y)" :icon="'RefreshRight'">
+            重做
           </el-button>
         </el-button-group>
         
         <el-divider direction="vertical" />
         
-        <el-button size="small" @click="handleFitView" title="适应视图">📐 适应</el-button>
-        <el-button size="small" @click="validateWorkflow" title="验证工作流">✅ 验证</el-button>
-        <el-button size="small" type="danger" plain @click="handleClear">🗑️ 清空</el-button>
-        
-        <el-divider direction="vertical" />
-        
-        <el-button type="primary" size="small" @click="handleSave" title="保存 (Ctrl+S)">
-          💾 保存规则
-        </el-button>
+        <el-button @click="handleFitView" title="适应视图" :icon="'FullScreen'">适应</el-button>
+        <el-button @click="validateWorkflow" title="验证工作流" :icon="'CircleCheck'">验证</el-button>
+        <el-button type="danger" plain @click="handleClear" :icon="'Delete'">清空</el-button>
       </div>
       <div class="toolbar-right">
         <span class="workflow-stats">
-          节点: {{ nodes.length }} | 连线: {{ edges.length }}
+          <el-icon><Grid /></el-icon>
+          <span>{{ nodes.length }} 节点</span>
+          <span class="stats-divider">·</span>
+          <el-icon><Connection /></el-icon>
+          <span>{{ edges.length }} 连线</span>
         </span>
         <el-tag v-if="validationErrors.length > 0" type="warning" size="small">
           {{ validationErrors.filter(e => e.type === 'error').length }} 错误
         </el-tag>
+        
+        <el-divider direction="vertical" />
+        
+        <el-button type="primary" @click="handleSave" title="保存 (Ctrl+S)" :icon="'Check'">
+          保存规则
+        </el-button>
       </div>
     </div>
     
@@ -1098,25 +1109,56 @@ defineExpose({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
-  background: white;
-  border-bottom: 1px solid #e4e7ed;
+  padding: 14px 20px;
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+  border-bottom: 1.5px solid #e8ecf0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
 }
 
 .toolbar-left {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: 10px;
+}
+
+.back-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
+    transform: translateX(-2px);
+  }
 }
 
 .toolbar-right {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
 }
 
 .workflow-stats {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 13px;
-  color: #909399;
+  color: #606266;
+  padding: 6px 12px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  font-weight: 500;
+  
+  .el-icon {
+    font-size: 16px;
+    color: #909399;
+  }
+  
+  .stats-divider {
+    color: #d0d7de;
+    margin: 0 4px;
+  }
 }
 
 .workflow-container {