feat: 流程设计

.env

@@ -1,7 +1,7 @@
 # 【通用】环境变量
 
 #  版本号
-VITE_VERSION = 2.5.7
+VITE_VERSION = 3.0.0
 
 # 端口号
 VITE_PORT = 3006

package.json

@@ -69,6 +69,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^3.0.2",
     "pinia-plugin-persistedstate": "^4.3.0",
+    "pnpm": "^10.17.1",
     "qrcode.vue": "^3.6.0",
     "vue": "^3.5.12",
     "vue-draggable-plus": "^0.6.0",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       pinia-plugin-persistedstate:
         specifier: ^4.3.0
         version: 4.3.0(pinia@3.0.2(typescript@5.6.3)(vue@3.5.15(typescript@5.6.3)))
+      pnpm:
+        specifier: ^10.17.1
+        version: 10.17.1
       qrcode.vue:
         specifier: ^3.6.0
         version: 3.6.0(vue@3.5.15(typescript@5.6.3))
@@ -164,7 +167,7 @@ importers:
         version: 4.6.0(stylelint@16.20.0(typescript@5.6.3))
       stylelint-config-recommended-scss:
         specifier: ^14.1.0
-        version: 14.1.0(postcss@8.4.49)(stylelint@16.20.0(typescript@5.6.3))
+        version: 14.1.0(postcss@8.5.3)(stylelint@16.20.0(typescript@5.6.3))
       stylelint-config-recommended-vue:
         specifier: ^1.5.0
         version: 1.5.0(postcss-html@1.7.0)(stylelint@16.20.0(typescript@5.6.3))
@@ -3315,6 +3318,11 @@ packages:
   pkg-types@2.1.0:
     resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
 
+  pnpm@10.17.1:
+    resolution: {integrity: sha512-F8Vg/KSGeulHOjiZrYSogzSRTzeb5G1FXL+S5c9LOdNJhdRS0lg7rxmWf6dstcF7yeJFUp0LmHRXIapyAOyveg==}
+    engines: {node: '>=18.12'}
+    hasBin: true
+
   postcss-html@1.7.0:
     resolution: {integrity: sha512-MfcMpSUIaR/nNgeVS8AyvyDugXlADjN9AcV7e5rDfrF1wduIAGSkL4q2+wgrZgA3sHVAHLDO9FuauHhZYW2nBw==}
     engines: {node: ^12 || >=14}
@@ -7613,6 +7621,8 @@ snapshots:
       exsolve: 1.0.5
       pathe: 2.0.3
 
+  pnpm@10.17.1: {}
+
   postcss-html@1.7.0:
     dependencies:
       htmlparser2: 8.0.2
@@ -7632,9 +7642,9 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
-  postcss-scss@4.0.9(postcss@8.4.49):
+  postcss-scss@4.0.9(postcss@8.5.3):
     dependencies:
-      postcss: 8.4.49
+      postcss: 8.5.3
 
   postcss-selector-parser@6.1.2:
     dependencies:
@@ -7941,14 +7951,14 @@ snapshots:
       stylelint: 16.20.0(typescript@5.6.3)
       stylelint-order: 6.0.4(stylelint@16.20.0(typescript@5.6.3))
 
-  stylelint-config-recommended-scss@14.1.0(postcss@8.4.49)(stylelint@16.20.0(typescript@5.6.3)):
+  stylelint-config-recommended-scss@14.1.0(postcss@8.5.3)(stylelint@16.20.0(typescript@5.6.3)):
     dependencies:
-      postcss-scss: 4.0.9(postcss@8.4.49)
+      postcss-scss: 4.0.9(postcss@8.5.3)
       stylelint: 16.20.0(typescript@5.6.3)
       stylelint-config-recommended: 14.0.1(stylelint@16.20.0(typescript@5.6.3))
       stylelint-scss: 6.10.0(stylelint@16.20.0(typescript@5.6.3))
     optionalDependencies:
-      postcss: 8.4.49
+      postcss: 8.5.3
 
   stylelint-config-recommended-vue@1.5.0(postcss-html@1.7.0)(stylelint@16.20.0(typescript@5.6.3)):
     dependencies:

src/components/business/EasyProcess/common/data.ts

@@ -2,14 +2,14 @@ import { EasyProcess } from './data.type'
 
 export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
   start: {
-    title: '发起人',
+    title: '开始',
     color: '#FFFFFF',
     bgColor: '#1e83e9',
     canAdd: false,
     canRemoved: false,
     hasDrawer: false,
     icon: { name: 'start', color: '#1e83e9' },
-    defaultNode: { nodeName: '发起人', nodeType: 'start', nodeData: {} }
+    defaultNode: { nodeName: '开始', nodeType: 'start', nodeData: {} }
   },
   router: {
     title: '条件分支',
@@ -35,6 +35,36 @@ export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
     hasDrawer: true,
     icon: { name: 'condition', color: '#3CB371' },
     defaultNode: { nodeName: '条件', nodeType: 'condition', isLastCondition: false, nodeData: {} }
+  },
+  fault:{
+    title: '故障触发',
+    color: '#FFFFFF',
+    bgColor: '#FF4500',
+    canAdd: true,
+    canRemoved: true,
+    hasDrawer: true,
+    icon: { name: 'fault', color: '#FF4500' },
+    defaultNode: { nodeName: '故障触发', nodeType: 'fault', nodeData: {} }
+  },
+  voice:{
+    title: '语音交互',
+    color: '#FFFFFF',
+    bgColor: '#FF69B4',
+    canAdd: true,
+    canRemoved: true,
+    hasDrawer: true,
+    icon: { name: 'voice', color: '#FF69B4' },
+    defaultNode: { nodeName: '语音交互', nodeType: 'voice', nodeData: {} }
+  },
+  operate:{
+    title: '基本操作',
+    color: '#FFFFFF',
+    bgColor: '#8A2BE2',
+    canAdd: true,
+    canRemoved: true,
+    hasDrawer: true,
+    icon: { name: 'operate', color: '#8A2BE2' },
+    defaultNode: { nodeName: '基本操作', nodeType: 'operate', nodeData: {} }
   }
 }
 

src/components/business/EasyProcess/index.vue

@@ -3,7 +3,7 @@
     <!-- 流程 -->
     <div class="ep-process" :style="`transform: scale(${zoom / 100});`">
       <!-- 递归节点 -->
-      <NodeWrap v-if="processData && processData.nodeConfig" :node="processData.nodeConfig" />
+      <NodeWrap v-if="processData && processData.process" :node="processData.process" />
       <!-- 结束节点 -->
       <EndNode />
     </div>
@@ -61,7 +61,8 @@
   provide(KEY_PROCESS_DATA, processData)
 
   watchEffect(() => {
-    processData.value = copy(props.data?.nodeConfig ? props.data : blankProcessData)
+    // processData.value = copy(props.data?.process ? props.data : blankProcessData)
+    processData.value = copy({process:blankProcessData})
     nextTick(() => validate())
   })
 

src/components/business/EasyProcess/node/base/BaseNode.vue

@@ -7,6 +7,7 @@
         :style="{ color: config.color, 'background-color': config.bgColor }"
       >
         <svg-icon :icon-class="config.icon.name" class="ep-node-icon" color="#FFFFFF" />
+        <Icon v-if="isCondition" icon-class="condition" class="ep-node-icon" color="#FFFFFF" />
         <div class="ep-node-header-title">{{ config.title }}</div>
         <svg-icon
           icon-class="close"

src/components/business/EasyProcess/node/fault/faultDrawer.vue

@@ -0,0 +1,4 @@
+<template>
+    <!-- 异常触发节点 -->
+    <div> 异常触发配置 </div>
+</template>

src/components/business/EasyProcess/node/fault/faultNode.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>触发故障</div>
+</template>

src/components/business/EasyProcess/node/operate/operateDrawer.vue

@@ -0,0 +1,3 @@
+<template>
+    <div> 基本操作 </div>
+</template>

src/components/business/EasyProcess/node/operate/operateNode.vue

@@ -0,0 +1,3 @@
+<template>
+    <div> 基本操作 </div>
+</template>

src/components/business/EasyProcess/node/start/startDrawer.vue

@@ -1,22 +0,0 @@
-<template>
-  <!-- 发起人配置 -->
-  <div>
-    <el-form :model="props.config" label-width="80px">
-      <el-form-item label="发起人">
-        <el-input v-model="props.config.name" />
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script setup name="StartDrawer">
-  const props = defineProps({
-    config: {
-      // 传入的流程配置数据
-      type: Object,
-      default: () => {}
-    }
-  })
-</script>
-
-<style lang="scss" scoped></style>

src/components/business/EasyProcess/node/start/startNode.vue

@@ -1,33 +1,16 @@
 <template>
   <!-- 发起人节点 -->
-  <div> 发起人: {{ node.config.name }} </div>
+  <div style="text-align: center;"> 开始节点</div>
 </template>
 
 <script setup name="StartNode">
-  import { inject } from 'vue'
-  import { KEY_VALIDATOR } from '../../config/keys'
-
   const props = defineProps({
-    tempNodeId: {
-      // 临时节点ID
-      type: String
-    },
+    tempNodeId: { type: String },
     node: {
-      // 传入的流程配置数据
       type: Object,
       default: () => {}
     }
   })
-  // 获取流程验证器实例
-  const validator = inject(KEY_VALIDATOR)
-
-  // 注册验证器
-  validator.register(props.tempNodeId, () => {
-    return {
-      valid: props.node.config.name ? true : false,
-      message: '请选择发起人'
-    }
-  })
 </script>
 
 <style lang="scss" scoped></style>

src/components/business/EasyProcess/node/voice/voiceDrawer.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>语言广播配置</div>
+</template>

src/components/business/EasyProcess/node/voice/voiceNode.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>语言广播</div>
+</template>

src/main.ts

@@ -12,7 +12,6 @@ import '@styles/el-light.scss'                      // Element 自定义主题
 import '@styles/el-dark.scss'                       // Element 自定义主题（暗色）
 import '@styles/dark.scss'                          // 系统主题
 import '@icons/system/iconfont.css'                 // 系统图标
-import '@utils/sys/console.ts'                      // 控制台输出内容
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { setupGlobDirectives } from './directives'
 import { setupErrorHandle } from './utils/sys/error-handle'

src/mock/upgrade/changeLog.ts

@@ -7,4 +7,10 @@ interface UpgradeLog {
   remark?: string // 备注
 }
 
-export const upgradeLogList = ref<UpgradeLog[]>([])
+export const upgradeLogList = ref<UpgradeLog[]>([
+  {
+    version: '3.0.0',
+    title: '系统上线',
+    date: '2025-10-01',
+  }
+])

src/utils/sys/console.ts

@@ -1,13 +0,0 @@
-// ANSI 转义码生成网站  https://patorjk.com/software/taag/#p=display&f=Big&t=ABB%0A
-const asciiArt = `
-\x1b[32m欢迎使用 Art Design Pro！
-\x1b[0m
-\x1b[36m如果您觉得项目对您有帮助，请点击下面的链接为我点个 ★Star 支持一下！祝您使用愉快！
-\x1b[0m
-\x1b[33mGitHub: https://github.com/Daymychen/art-design-pro
-\x1b[0m
-\x1b[31m技术支持（QQ群）: 821834289，与开发者一起交流，群里会有小伙伴帮忙解答问题。
-\x1b[0m
-`
-
-console.log(asciiArt)

src/views/train/monitor/data/flow.json

@@ -2,7 +2,7 @@
   "processId": "10001",
   "processName": "请假审批11",
   "nodeConfig": {
-    "nodeName": "发起人",
+    "nodeName": "开始",
     "nodeType": "start",
     "nodeData": {
       "name": null