fix: 修改路由

src/layouts/index.vue

@@ -1,19 +1,8 @@
 <template>
   <div class="app-container">
     <div class="head-menu">
-      <!-- <t-head-menu :default-value="activeMenu">
-        <t-menu-item value="/" :to="'/'"> 测试用例 </t-menu-item>
-        <t-menu-item value="/flow" :to="'/flow'">用例设计 </t-menu-item>
-      </t-head-menu> -->
-      <el-menu
-        ellipsis
-        mode="horizontal"
-        :router="false"
-        :default-active="activeMenu"
-        style="width: 1000px">
-        <el-menu-item :index="'/'" @click="handleClickMenu('/')"> 测试用例 </el-menu-item>
-        <el-menu-item :index="'/flow'" @click="handleClickMenu('/flow')">用例设计 </el-menu-item>
-      </el-menu>
+      <el-button color="#626aef" @click="handleClickMenu('/')">测试用例</el-button>
+      <el-button color="#626aef" @click="handleClickMenu('/flow')">用例设计</el-button>
     </div>
     <div class="main-container">
       <router-view />
@@ -27,15 +16,6 @@
 <script setup lang="tsx" name="Layout">
 import router from '@/router'
 const version = ref('v1.0.0')
-const currentRoute = useRoute()
-const activeMenu = computed(() => {
-  const { meta, path } = unref(currentRoute)
-  // 如果设置路径，侧边栏将高亮显示您设置的路径
-  if (meta.activeMenu) {
-    return meta.activeMenu as string
-  }
-  return path
-})
 
 const handleClickMenu = (path: string) => {
   router.push(path)
@@ -46,6 +26,10 @@ const handleClickMenu = (path: string) => {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  .head-menu {
+    background: linear-gradient(135deg, var(--ev-c-primary), var(--ev-c-dark));
+    height: 55px;
+  }
 }
 
 .main-container {
@@ -63,31 +47,3 @@ const handleClickMenu = (path: string) => {
   color: var(--ev-c-white);
 }
 </style>
-<style>
-.t-head-menu {
-  background: linear-gradient(135deg, var(--ev-c-primary), var(--ev-c-dark));
-}
-
-.t-menu {
-  font-size: 16px;
-  font-weight: 700 !important;
-}
-
-.t-menu__item {
-  color: var(--ev-c-white);
-}
-
-.t-menu__item:hover {
-  background-color: rgba(255, 255, 255, 0.15) !important;
-  /* color: var(--ev-c-white); */
-}
-
-.t-menu__item.t-is-active {
-  color: var(--ev-c-white);
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.t-menu__content {
-  font-weight: 700 !important;
-}
-</style>

src/store/index.ts

@@ -3,7 +3,7 @@ import { IndexType } from './types'
 
 export const useIndexStore = defineStore('index', {
   state: (): IndexType => ({
-    showGrid: false,
+    showGrid: true,
     type: 'mesh',
     size: 10,
     color: '#e5e5e5',
@@ -11,7 +11,7 @@ export const useIndexStore = defineStore('index', {
     colorSecond: '#d0d0d0',
     thicknessSecond: 1,
     factor: 4,
-    bgColor: '#e5e5e5',
+    bgColor: '#ffffff',
     showImage: false,
     repeat: 'watermark',
     angle: 30,

src/views/components/ConfigPanel/ConfigGrid/index.vue

@@ -4,11 +4,11 @@
       <el-tab-pane label="网格" name="1">
         <el-row align="middle">
           <el-col :span="24">
-            <el-checkbox v-model="showGrid"> Show Grid </el-checkbox>
+            <el-checkbox v-model="showGrid"> 显示网格 </el-checkbox>
           </el-col>
         </el-row>
         <el-row align="middle" v-show="showGrid">
-          <el-col :span="10">Grid Type</el-col>
+          <el-col :span="10">网格类型</el-col>
           <el-col :span="12">
             <el-select size="small" style="width: 100%" v-model="type">
               <el-option :value="GRID_TYPE.DOT">Dot</el-option>
@@ -19,7 +19,7 @@
           </el-col>
         </el-row>
         <el-row align="middle" v-show="showGrid">
-          <el-col :span="10">Grid Size</el-col>
+          <el-col :span="10">网格大小</el-col>
           <el-col :span="10">
             <el-slider size="small" :min="1" :max="20" :step="1" v-model="size" />
           </el-col>
@@ -89,87 +89,11 @@
 
       <el-tab-pane label="背景" name="2">
         <el-row align="middle">
-          <el-col :span="6">Color</el-col>
+          <el-col :span="6">颜色</el-col>
           <el-col :span="14">
             <el-input size="small" type="color" v-model="bgColor" style="width: 100%" />
           </el-col>
         </el-row>
-        <el-row align="middle">
-          <el-col :span="14" :offset="6">
-            <el-checkbox v-model="showImage"> Show Image </el-checkbox>
-          </el-col>
-        </el-row>
-        <div v-if="showImage">
-          <el-row align="middle">
-            <el-col :span="6">Repeat</el-col>
-            <el-col :span="14">
-              <el-select size="small" style="width: 100%" v-model="repeat">
-                <el-option :value="REPEAT_TYPE.NO_REPEAT">No Repeat</el-option>
-                <el-option :value="REPEAT_TYPE.REPEAT">Repeat</el-option>
-                <el-option :value="REPEAT_TYPE.REPEAT_X">Repeat X</el-option>
-                <el-option :value="REPEAT_TYPE.REPEAT_Y">Repeat Y</el-option>
-                <el-option :value="REPEAT_TYPE.ROUND">Round</el-option>
-                <el-option :value="REPEAT_TYPE.SPACE">Space</el-option>
-                <el-option :value="REPEAT_TYPE.FLIPX">Flip X</el-option>
-                <el-option :value="REPEAT_TYPE.FLIPY">Flip Y</el-option>
-                <el-option :value="REPEAT_TYPE.FLIPXY">Flip XY</el-option>
-                <el-option :value="REPEAT_TYPE.WATERMARK">Watermark</el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <div v-if="repeat === 'watermark'">
-            <el-row align="middle">
-              <el-col :span="16" :offset="6" style="font-size: 12px"> Watermark Angle </el-col>
-              <el-col :span="14" :offset="6">
-                <el-slider size="small" :min="0" :max="360" :step="1" v-model="angle" />
-              </el-col>
-              <el-col :span="2">
-                <div class="result">{{ angle }}</div>
-              </el-col>
-            </el-row>
-          </div>
-
-          <el-row align="middle">
-            <el-col :span="6">Position</el-col>
-            <el-col :span="14">
-              <el-select size="small" style="width: 100%" v-model="position">
-                <el-option value="center">center</el-option>
-                <el-option value="left">left</el-option>
-                <el-option value="right">right</el-option>
-                <el-option value="top">top</el-option>
-                <el-option value="bottom">bottom</el-option>
-                <el-option value="50px 50px">50px 50px</el-option>
-                <el-option :value="JSON.stringify({ x: 50, y: 50 })">
-                  {`{ x: 50, y: 50 }`}
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row align="middle">
-            <el-col :span="6">Size</el-col>
-            <el-col :span="14">
-              <el-select size="small" style="width: 100%" v-model="bgSize">
-                <el-option value="auto auto">auto auto</el-option>
-                <el-option value="cover">cover</el-option>
-                <el-option value="contain">contain</el-option>
-                <el-option value="30px 30px">30px 30px</el-option>
-                <el-option value="100% 100%">100% 100%</el-option>
-                <el-option :value="JSON.stringify({ width: 150, height: 150 })">
-                  {`{width: 150, height: 150 }`}
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row align="middle">
-            <el-col :span="6">Opacity</el-col>
-            <el-col :span="12">
-              <el-slider size="small" :min="0.05" :max="1" :step="0.05" v-model="opacity" />
-            </el-col>
-            <el-col :span="4">
-              <div class="result">{{ opacity.toFixed(2) }}</div>
-            </el-col>
-          </el-row>
-        </div>
       </el-tab-pane>
     </el-tabs>
   </div>

src/views/components/ToolBar/index.vue

@@ -2,7 +2,7 @@
   <div class="bar">
     <el-tooltip class="item" effect="dark" content="清除 (Cmd + D)" placement="bottom">
       <el-button name="delete" @click="handleClick" class="item-space" size="small">
-        delete
+        清除
       </el-button>
     </el-tooltip>
 
@@ -13,7 +13,7 @@
         @click="handleClick"
         class="item-space"
         size="small">
-        undo
+        撤销
       </el-button>
     </el-tooltip>
 
@@ -29,40 +29,40 @@
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="复制 (Cmd + Shift + Z)" placement="bottom">
-      <el-button name="copy" @click="handleClick" class="item-space" size="small"> copy </el-button>
+      <el-button name="copy" @click="handleClick" class="item-space" size="small"> 复制 </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="剪切 (Cmd + X)" placement="bottom">
-      <el-button name="cut" @click="handleClick" class="item-space" size="small"> cut </el-button>
+      <el-button name="cut" @click="handleClick" class="item-space" size="small"> 剪切 </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="粘贴 (Cmd + V)" placement="bottom">
       <el-button name="paste" @click="handleClick" class="item-space" size="small">
-        paste
+        粘贴
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="保存PNG (Cmd + S)" placement="bottom">
       <el-button name="savePNG" @click="handleClick" class="item-space" size="small">
-        savePNG
+        保存PNG
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="保存SVG (Cmd + S)" placement="bottom">
       <el-button name="saveSVG" @click="handleClick" class="item-space" size="small">
-        saveSVG
+        保存SVG
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="打印 (Cmd + P)" placement="bottom">
       <el-button name="print" @click="handleClick" class="item-space" size="small">
-        print
+        打印
       </el-button>
     </el-tooltip>
 
     <el-tooltip class="item" effect="dark" content="导出 (Cmd + P)" placement="bottom">
       <el-button name="toJSON" @click="handleClick" class="item-space" size="small">
-        toJSON
+        导出JSON
       </el-button>
     </el-tooltip>
   </div>

src/views/graph/index.ts

@@ -26,7 +26,12 @@ export default class FlowGraph {
    * @param {*} flag 默认为true，传入false只实例化画板
    * @returns
    */
-  public static init(dom: HTMLElement, width = 1200, height = 900, flag = true) {
+  public static init(
+    dom: HTMLElement,
+    width: number = 1200,
+    height: number = 900,
+    flag: boolean = true
+  ) {
     // 初始化 流程图画板
     this.graph = new Graph({
       background: {
@@ -199,7 +204,10 @@ export default class FlowGraph {
   private static initStencil() {
     this.stencil = new Addon.Stencil({
       target: this.graph,
-      stencilGraphWidth: 280,
+      title: '节点搜索',
+      stencilGraphWidth: 250,
+      placeholder: '请输入节点关键字',
+      notFoundText: '未搜索到结果',
       search: { rect: true },
       collapsable: true,
       groups: [
@@ -212,25 +220,25 @@ export default class FlowGraph {
           name: 'custom-image',
           title: '系统设计图',
           graphHeight: 600
+        },
+        {
+          name: 'combination',
+          title: '组合节点',
+          layoutOptions: {
+            columns: 1,
+            marginX: 60
+          },
+          graphHeight: 260
+        },
+        {
+          name: 'group',
+          title: '节点组',
+          graphHeight: 100,
+          layoutOptions: {
+            columns: 1,
+            marginX: 60
+          }
         }
-        // {
-        //   name: 'combination',
-        //   title: '组合节点',
-        //   layoutOptions: {
-        //     columns: 1,
-        //     marginX: 60,
-        //   },
-        //   graphHeight: 260,
-        // },
-        // {
-        //   name: 'group',
-        //   title: '节点组',
-        //   graphHeight: 100,
-        //   layoutOptions: {
-        //     columns: 1,
-        //     marginX: 60,
-        //   },
-        // },
       ]
     })
     const stencilContainer = document.querySelector('#stencil')
@@ -413,8 +421,8 @@ export default class FlowGraph {
     })
     this.stencil.load([r1, r2, r3, r4], 'basic')
     this.stencil.load(imgNodes, 'custom-image')
-    // this.stencil.load([c1, c2, c3], 'combination')
-    // this.stencil.load([g1], 'group')
+    this.stencil.load([c1, c2, c3], 'combination')
+    this.stencil.load([g1], 'group')
   }
 
   // 根据json渲染节点和边

src/views/graph/ports.ts

@@ -5,42 +5,44 @@ const circle = {
   strokeWidth: 1,
   fill: '#fff',
   style: {
-    visibility: 'hidden',
-  },
+    visibility: 'hidden'
+  }
 }
 
-
 export const basicPorts = {
   groups: {
     top: {
       position: 'top',
-      attrs: { circle },
+      attrs: { circle }
     },
     right: {
       position: 'right',
-      attrs: { circle },
+      attrs: { circle }
     },
     bottom: {
       position: 'bottom',
-      attrs: { circle },
+      attrs: { circle }
     },
     left: {
       position: 'left',
-      attrs: { circle },
-    },
+      attrs: { circle }
+    }
   },
   items: [
     {
-      group: 'top',
+      group: 'top'
     },
     {
-      group: 'right',
+      group: 'top'
     },
     {
-      group: 'bottom',
+      group: 'right'
     },
     {
-      group: 'left',
+      group: 'bottom'
+    },
+    {
+      group: 'left'
     }
   ]
 }
@@ -49,22 +51,22 @@ export const customPorts = {
   groups: {
     top: {
       position: {
-        name: 'absolute',
+        name: 'absolute'
       }
     },
     right: {
       position: {
-        name: 'absolute',
+        name: 'absolute'
       }
     },
     bottom: {
       position: {
-        name: 'absolute',
+        name: 'absolute'
       }
     },
     left: {
       position: {
-        name: 'absolute',
+        name: 'absolute'
       }
     }
   },
@@ -75,16 +77,16 @@ export const customPorts = {
       // 通过 args 指定绝对位置
       args: {
         x: '50%',
-        y: '0%',
+        y: '0%'
       },
-      attrs: { circle },
+      attrs: { circle }
     },
     {
       id: 'port2',
       group: 'right',
       args: {
         x: '100%',
-        y: '50%',
+        y: '50%'
       },
       attrs: { circle }
     },
@@ -93,7 +95,7 @@ export const customPorts = {
       group: 'bottom',
       args: {
         x: '50%',
-        y: '100%',
+        y: '100%'
       },
       attrs: { circle }
     },
@@ -102,9 +104,9 @@ export const customPorts = {
       group: 'left',
       args: {
         x: '0%',
-        y: '50%',
+        y: '50%'
       },
       attrs: { circle }
     }
   ]
-}
+}