Explorar el Código

feat: 合并工作流弹窗 header 和工具栏为统一顶部栏

- 隐藏弹窗默认 header(:show-close='false')
- 在工具栏中添加标题显示
- 在工具栏右侧添加关闭按钮(X 图标)
- 优化布局:返回按钮 | 标题 | 操作按钮 | 统计信息 | 保存 | 关闭
- 关闭按钮 hover 显示红色背景
- 传递 workflowTitle prop 到 RuleWorkflow 组件
何文松 hace 21 horas
padre
commit
06aef5c220

+ 30 - 2
frontend/vue-demo/src/components/workflow/RuleWorkflow.vue

@@ -5,7 +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 { ArrowLeft, Grid, Connection, Close } 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'
@@ -23,7 +23,8 @@ const props = defineProps({
   elements: { type: Array, default: () => [] },
   rules: { type: Array, default: () => [] },
   targetRule: { type: Object, default: null },  // 编辑的目标规则
-  targetElement: { type: Object, default: null }  // 目标要素(单要素模式)
+  targetElement: { type: Object, default: null },  // 目标要素(单要素模式)
+  workflowTitle: { type: String, default: '新建规则' }  // 工作流标题
 })
 
 const emit = defineEmits(['save', 'close'])
@@ -906,6 +907,10 @@ defineExpose({
         
         <el-divider direction="vertical" />
         
+        <div class="workflow-title">{{ workflowTitle }}</div>
+        
+        <el-divider direction="vertical" />
+        
         <el-button-group>
           <el-button :disabled="!canUndo" @click="undo" title="撤销 (Ctrl+Z)" :icon="'RefreshLeft'">
             撤销
@@ -938,6 +943,10 @@ defineExpose({
         <el-button type="primary" @click="handleSave" title="保存 (Ctrl+S)" :icon="'Check'">
           保存规则
         </el-button>
+        
+        <el-button text circle @click="$emit('close')" title="关闭" class="close-button">
+          <el-icon :size="18"><Close /></el-icon>
+        </el-button>
       </div>
     </div>
     
@@ -1121,6 +1130,13 @@ defineExpose({
   gap: 10px;
 }
 
+.workflow-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1f2937;
+  letter-spacing: 0.3px;
+}
+
 .back-button {
   width: 36px;
   height: 36px;
@@ -1133,6 +1149,18 @@ defineExpose({
   }
 }
 
+.close-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    background: #fee;
+    color: #f56c6c;
+  }
+}
+
 .toolbar-right {
   display: flex;
   align-items: center;

+ 2 - 0
frontend/vue-demo/src/views/Editor.vue

@@ -982,6 +982,7 @@
       :title="workflowTargetRule ? `编辑规则 - ${workflowTargetElement?.elementName || workflowTargetRule.elementKey}` : '新建规则'"
       fullscreen
       :close-on-click-modal="false"
+      :show-close="false"
       class="rule-workflow-dialog"
     >
       <RuleWorkflow
@@ -993,6 +994,7 @@
         :rules="rules"
         :target-rule="workflowTargetRule"
         :target-element="workflowTargetElement"
+        :workflow-title="workflowTargetRule ? `编辑规则 - ${workflowTargetElement?.elementName || workflowTargetRule.elementKey}` : '新建规则'"
         @save="handleWorkflowSave"
         @close="showRuleWorkflow = false"
       />