|
|
@@ -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 {
|