chore: update

.eslintrc-auto-import.json

@@ -115,6 +115,7 @@
     "useArrayFilter": true,
     "useArrayFind": true,
     "useArrayFindIndex": true,
+    "useArrayFindLast": true,
     "useArrayJoin": true,
     "useArrayMap": true,
     "useArrayReduce": true,

auto-imports.d.ts

-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const $$: typeof import('vue/macros')['$$']
@@ -109,6 +112,7 @@ declare global {
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -276,5 +280,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
 }

package.json

@@ -17,32 +17,32 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
     "@tinymce/tinymce-vue": "^5.0.0",
-    "@vue-flow/controls": "^1.0.3",
-    "@vue-flow/core": "^1.14.3",
-    "@vueuse/core": "^9.12.0",
-    "axios": "^1.3.3",
+    "@vue-flow/controls": "^1.0.4",
+    "@vue-flow/core": "^1.15.2",
+    "@vueuse/core": "^9.13.0",
+    "axios": "^1.3.4",
     "blueimp-md5": "^2.19.0",
-    "element-plus": "^2.2.30",
+    "element-plus": "^2.2.32",
     "lodash-es": "^4.17.21",
-    "pinia": "^2.0.30",
+    "pinia": "^2.0.32",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@types/blueimp-md5": "^2.18.0",
-    "@types/node": "^18.13.0",
+    "@types/node": "^18.14.2",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/tsconfig": "^0.1.3",
     "ali-oss": "^6.17.1",
     "chalk": "^5.2.0",
-    "eslint": "^8.34.0",
+    "eslint": "^8.35.0",
     "eslint-plugin-vue": "^9.9.0",
-    "sass": "^1.58.1",
+    "sass": "^1.58.3",
     "typescript": "~4.9.5",
-    "unplugin-auto-import": "^0.14.2",
-    "vite": "^4.1.1",
-    "vue-tsc": "^1.0.24"
+    "unplugin-auto-import": "^0.15.0",
+    "vite": "^4.1.4",
+    "vue-tsc": "^1.2.0"
   }
 }

src/assets/styles/base.css

@@ -67,7 +67,7 @@ button,
 select,
 textarea {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-appearance: none;
+  appearance: none;
   border: 0;
   border-radius: 0;
   font: inherit;
@@ -84,3 +84,6 @@ textarea:focus {
   margin-right: 0 !important;
   border-bottom: 1px solid #e6e6e6;
 }
+.info .el-form-item {
+  margin-bottom: 0;
+}

src/components/flow/CustomEdge.vue

 <script setup>
 import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
-import { computed } from 'vue'
+import { CircleClose } from '@element-plus/icons-vue'
 
 const props = defineProps({
   id: { type: String, required: true },
@@ -38,8 +38,8 @@ export default {
         position: 'absolute',
         transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
       }"
-      class="nodrag nopan">
-      <button class="edgebutton" @click="removeEdges([id])">×</button>
+      @click="removeEdges([id])">
+      <el-icon style="color: var(--main-color)"><CircleClose /></el-icon>
     </div>
   </EdgeLabelRenderer>
 </template>

src/components/flow/Index.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow, PanelPosition } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import Sidebar from './Sidebar.vue'
 import CustomNode from './CustomNode.vue'
@@ -85,21 +85,37 @@ const onDrop = (event: DragEvent) => {
   <div class="flow">
     <Sidebar></Sidebar>
     <el-card shadow="never" class="flow-main" @drop="onDrop">
-      <VueFlow fit-view-on-init @dragover="onDragOver" style="min-height: 50vh" v-bind="$attrs">
+      <slot name="header">
+        <el-row align="middle" v-if="action === 'edit'">
+          <el-button type="primary" size="large">配置连接</el-button>
+          <el-alert center style="flex: 1; margin-left: 20px">
+            <p style="text-align: center">
+              用户旅程的基本组成：触发条件+营销动作+条件分支<br />
+              您可以从左侧组件区域选择的对应的触发条件、营销动作和条件分支，拖拽到右侧的画布里面，进行编排组合个性化的用户旅程。
+            </p>
+          </el-alert>
+        </el-row>
+      </slot>
+      <VueFlow
+        fit-view-on-init
+        :zoom-on-scroll="false"
+        :prevent-scrolling="false"
+        @dragover="onDragOver"
+        v-bind="$attrs">
         <template #node-custom="node">
           <CustomNode :node="node" />
         </template>
         <template #edge-custom="props">
           <CustomEdge v-bind="props" />
         </template>
-        <Controls />
+        <Controls :showInteractive="false" :position="PanelPosition.BottomRight" />
       </VueFlow>
       <slot name="footer"></slot>
     </el-card>
   </div>
 </template>
 
-<style>
+<style lang="scss">
 @import '@vue-flow/core/dist/style.css';
 @import '@vue-flow/core/dist/theme-default.css';
 @import '@vue-flow/controls/dist/style.css';
@@ -107,8 +123,18 @@ const onDrop = (event: DragEvent) => {
 .flow {
   display: flex;
   column-gap: 20px;
+  height: 80vh;
 }
 .flow-main {
   flex: 1;
+  .el-card__body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+  .vue-flow {
+    flex: 1;
+  }
 }
 </style>

src/components/flow/Sidebar.vue

@@ -110,6 +110,7 @@ const onDragStart = (event: DragEvent, data: any) => {
 }
 .flow-sidebar {
   width: 300px;
+  overflow-y: auto;
   dt {
     color: #fff;
     line-height: 30px;

src/modules/group/components/ViewDialog.vue

@@ -95,9 +95,9 @@ function handleRefresh() {
         </el-col>
         <el-col :span="12">
           <el-form-item label="状态">
-            <el-tag :type="data.status === '1' ? 'success' : 'danger'">
+            <span :style="`color:${data.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'}`">
               {{ getNameByValue(data.status, statusList) }}
-            </el-tag>
+            </span>
           </el-form-item>
         </el-col>
       </el-row>

src/modules/label/components/LabelViewDialog.vue

@@ -45,9 +45,9 @@ function handleUpdate() {
         </el-col>
         <el-col :span="12">
           <el-form-item label="状态">
-            <el-tag :type="data.status === '1' ? 'success' : 'danger'">
+            <span :style="`color:${data.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'}`">
               {{ getNameByValue(data.status, statusList) }}
-            </el-tag>
+            </span>
           </el-form-item>
         </el-col>
       </el-row>

src/modules/trip/template/components/ViewDialog.vue

@@ -20,14 +20,14 @@ const statusList = useMapStore().getMapValuesByKey('system_status')
       </el-row>
       <el-row justify="space-between">
         <el-form-item label="是否允许学生查看解析" prop="is_view_answer">
-          <el-tag :type="data.is_view_answer === '1' ? 'success' : 'danger'">
+          <span :style="`color:${data.is_view_answer === '1' ? 'var(--main-success-color)' : 'var(--main-color)'}`">
             {{ data.is_view_answer === '1' ? '允许' : '不允许' }}
-          </el-tag>
+          </span>
         </el-form-item>
         <el-form-item label="状态" prop="status">
-          <el-tag :type="data.status === '1' ? 'success' : 'danger'">
+          <span :style="`color:${data.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'}`">
             {{ getNameByValue(data.status, statusList) }}
-          </el-tag>
+          </span>
         </el-form-item>
       </el-row>
     </el-form>

src/modules/trip/template/views/Setting.vue

@@ -43,7 +43,7 @@ function handleSubmit() {
 <template>
   <AppCard title="固定旅程模版配置">
     <el-card shadow="never" style="margin-bottom: 20px" v-if="detail">
-      <el-form label-suffix="：">
+      <el-form label-suffix="：" class="info">
         <el-row justify="space-between">
           <el-col :span="8">
             <el-form-item label="旅程模版名称">{{ detail.name }}</el-form-item>
@@ -64,17 +64,18 @@ function handleSubmit() {
           </el-col>
           <el-col :span="8">
             <el-form-item label="状态">
-              <el-tag :type="detail.status === '1' ? 'success' : 'danger'">
+              <span :style="`color:${detail.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'}`">
                 {{ getNameByValue(detail.status, statusList) }}
-              </el-tag>
+              </span>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </el-card>
-    <TripFlow v-model="elements" action="edit" role="teacher" style="height: 80vh">
+    <TripFlow v-model="elements" action="edit" role="teacher">
       <template #footer>
         <el-row justify="center">
+          <el-button plain auto-insert-space>取消</el-button>
           <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
         </el-row>
       </template>