细节修改

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -20,7 +20,7 @@
     height: 100%;
     position: fixed;
     font-size: 0px;
-    top: 100px;
+    top: 96px;
     bottom: 0;
     left: 0;
     z-index: 1001;

ruoyi-ui/src/layout/components/AppMain.vue

@@ -47,7 +47,7 @@ export default {
 
 
     //+++++++++++
-    position:fixed;
+    /* position:fixed; */
   }
 
   .fixed-header + .app-main {

ruoyi-ui/src/layout/index.vue

@@ -52,7 +52,7 @@
       <sidebar
         v-if="!sidebar.hide"
         class="sidebar-container"
-        style="background-color: #222653; border-top-left-radius: 15px"
+        style="background-color: #222653;"
       />
       <div
         :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
@@ -160,6 +160,8 @@ export default {
   width: 100%;
   z-index: 1;
   background: #fff;
+  border-bottom: 1px solid #6f7af3;
+  box-shadow: 0px 0px 2px 0px #222653;
 }
 .jianbiase {
   width: 87.55px;

ruoyi-ui/src/store/index.js

@@ -20,7 +20,8 @@ const store = new Vuex.Store({
     settings,
     flow
   },
-  getters
+  getters,
+  
 })
 
 export default store

ruoyi-ui/src/views/index.vue

@@ -49,7 +49,7 @@ export default {
     padding: 10px 20px;
     margin: 0 0 20px;
     font-size: 17.5px;
-    border-left: 5px solid #eee;
+    /* border-left: 5px solid #eee; */
   }
 
   hr {

ruoyi-ui/src/views/login.vue

@@ -187,7 +187,7 @@ export default {
         ],
         code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
-      loading: false,
+      loading: true,
       // 验证码开关
       captchaEnabled: true,
       // 注册开关

ruoyi-ui/src/views/system/processModeling/flow-x6/components/ConfigPanel/ConfigGrid/index.vue

@@ -15,7 +15,7 @@
             <el-select style="width: 100%" v-model="type">
               <el-option :value="GRID_TYPE.DOT">Dot</el-option>
               <el-option :value="GRID_TYPE.FIXED_DOT">Fixed Dot</el-option>
-              <el-option :value="GRID_TYPE.MESH">Mesh</el-option>
+              <el-option :value="GRID_TYPE.MESH" default>Mesh</el-option>
               <el-option :value="GRID_TYPE.DOUBLE_MESH">Double Mesh</el-option>
             </el-select>
           </el-col>
@@ -23,7 +23,7 @@
         <el-row align="middle" v-show="showGrid">
           <el-col :span='10'>Grid Size</el-col>
           <el-col :span='10'>
-            <el-slider :min='1' :max='20' :step='1' v-model="size" />
+            <el-slider :min='9' :max='20' :step='1' v-model="size" />
           </el-col>
           <el-col :span='2'>
             <div class="result">{{size}}</div>
@@ -59,7 +59,7 @@
             <el-col :span='10'>Secondary Thickness</el-col>
             <el-col :span='10'>
               <el-slider
-                  :min='0.5'
+                  :min='1.5'
                   :max='10'
                   :step='0.5'
                   v-model="thicknessSecond"

ruoyi-ui/src/views/system/processModeling/flow-x6/graph/index.js

@@ -1,8 +1,9 @@
-import {Graph, Addon, FunctionExt, Shape} from '@antv/x6'
+import {Graph, Addon, FunctionExt, Shape,Dom} from '@antv/x6'
 import './shape'
 import { customPorts ,basicPorts} from './ports'
 // import { getImg } from '../../../utils'
 import graphData from './data/data'
+import { translate } from '@antv/x6/lib/util/dom/transform'
 const insertCss = require('insert-css')
 
 insertCss(`
@@ -25,7 +26,7 @@ export default class FlowGraph {
    * @param {*} flag 默认为true，传入false只实例化画板
    * @returns 
    */
-  static init(dom, width = 1200, height = 900, flag = true) {
+  static init(dom, width = 800, height = 800, flag = true) {
     // 初始化 流程图画板
     this.graph = new Graph({
       background: {
@@ -217,15 +218,19 @@ export default class FlowGraph {
     this.stencil = new Addon.Stencil({
       target: this.graph,
       stencilGraphWidth: 280,
-      search: { rect: true },
+      search: { rect: true ,ellipse:true,polygon:true,},
       collapsable: true,
       groups: [
         {
           name: 'basic',
           title: '基础节点',
           graphHeight: 280,
+          layoutOptions: {
+                columns: 1,
+                marginX: 8,
+              },
         },
-        // {
+        // {  
         //   name: 'custom-image',
         //   title: '系统设计图',
         //   graphHeight: 600
@@ -258,23 +263,38 @@ export default class FlowGraph {
     const { graph } = this
     // 基础节点
     const r1 = graph.createNode({
+      
       shape: 'flow-chart-rect',
+      width:60,
+      height:40,
       attrs: {
         body: {
           rx: 24,
           ry: 24,
+          stroke: '#07448a',
+          
         },
         text: {
-          text: '起始节点',
+          text: '开始',
+          
         },
-        
+  
       },
     })
     const r2 = graph.createNode({
       shape: 'flow-chart-rect',
+      width:58,
+      height:38,
       attrs: {
         text: {
-          text: '流程节点',
+          text: '流程',
+          // refX: -100,
+          // refY: 40,
+        },
+        body: {
+          stroke: '#07448a',  // 边框颜色
+          // x: -140,
+          // y: 40,
         },
       },
     })
@@ -284,13 +304,17 @@ export default class FlowGraph {
       height: 52,
       angle: 45,
       attrs: {
+        body: {
+          stroke: '#07448a',  // 边框颜色
+        },
+        
         'edit-text': {
           style: {
             transform: 'rotate(-45deg)',
           },
         },
         text: {
-          text: '判断节点',
+          text: '判断',
           transform: 'rotate(-45deg)',
         },
       },
@@ -333,46 +357,398 @@ export default class FlowGraph {
     })
     const r4 = graph.createNode({
       shape: 'flow-chart-rect',
-      width: 70,
-      height: 70,
+      width: 56,
+      height:56,
       attrs: {
         body: {
           rx: 35,
           ry: 35,
+          stroke: '#07448a',
         },
         text: {
-          text: '联系节点',
+          text: '联系',
         },
       },
     })
     const r5 = graph.createNode({
-      shape: 'flow-chart-rect',
-      width:60,
-      height:60,
+      shape: 'polygon',
+      width:57,
+      height:47,
+
       attrs: {
+        // style: {
+        //   visibility: 'hidden',
+        // },
         body: {
           refPoints: '10,0 40,0 30,20 0,20',
-          stroke: 'rgba(95,149,255)',  // 边框颜色
+          stroke: '#07448a',  // 边框颜色
+          strokeWidth: 1,
+          width:50,
+          height:40,
+          fill: '#fff', // 填充颜色
+          transform:'skewX(-30deg)',
+          refX: 15,
+          
+        },
+        fo: {
+          refWidth: '100%',
+          refHeight: '100%',
+          stroke: '#07448a',  // 边框颜色
           strokeWidth: 1,
         },
+        foBody: {
+          xmlns: Dom.ns.xhtml,
+          style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            stroke: '#07448a',  // 边框颜色
+            strokeWidth: 1,
+          },
+        },
+        text: {
+          text: '数据',
+        },
+        'edit-text': {
+          contenteditable: 'true',
+          class: 'x6-edit-text',
+          style: {
+            width: '100%',
+            textAlign: 'center',
+            fontSize: 12,
+            color: 'rgba(0,0,0,0.85)',
+          },
+        },
       },
-      label: '数据节点',
-      
+      ports: {
+        groups: {
+          // 输入链接桩群组定义
+          in: {
+            position: 'top',
+            attrs: {
+              style: {
+                visibility: 'hidden',
+              },
+              circle: {
+                r: 4,
+                magnet: true,
+                stroke: '#5F95FF',
+                strokeWidth: 1,
+                fill: '#fff',
+              },
+            },
+          },
+          // 输出链接桩群组定义
+          out: {
+            position: 'bottom',
+            attrs: {
+              style: {
+                visibility: 'hidden',
+              },
+              circle: {
+                r: 4,
+                magnet: true,
+                stroke: '#5F95FF',
+                strokeWidth: 1,
+                fill: '#fff',
+              },
+            },
+          },
+          on: {
+            position: 'left',
+            attrs: {
+              style: {
+                visibility: 'hidden',
+              },
+              circle: {
+                r:4,
+                magnet: true,
+                stroke: '#5F95FF',
+                strokeWidth: 1,
+                fill: '#fff',
+              },
+            },
+          },
+          un: {
+            position: 'right',
+            attrs: {
+              style: {
+                visibility: 'hidden',
+              },
+              circle: {
+                r: 4,
+                magnet: true,
+                stroke: '#5F95FF',
+                strokeWidth: 1,
+                fill: '#fff',
+              },
+            },
+          },
+        },
+        items: [
+          {
+            id: 'port1',
+            group: 'in',
+            attrs: {
+              circle: {
+                style: {
+                  visibility: 'hidden',
+                },
+              },
+            },
+          },
+          {
+            id: 'port2',
+            group: 'un',
+            attrs: {
+              circle: {
+                style: {
+                  visibility: 'hidden',
+                },
+              },
+            },
+          },
+          {
+            id: 'port3',
+            group: 'on',
+            attrs: {
+              circle: {
+                style: {
+                  visibility: 'hidden',
+                },
+              },
+            },
+          },
+          {
+            id: 'port4',
+            group: 'out',
+            attrs: {
+              circle: {
+                style: {
+                  visibility: 'hidden',
+                },
+              },
+            },
+          },
+        ],
+      },
+      markup: [
+        {
+          tagName: 'rect',
+          selector: 'body',
+        },
+        {
+          tagName: 'text',
+          selector: 'text',
+        },
+        {
+          tagName: 'foreignObject',
+          selector: 'fo',
+          children: [
+            {
+              ns: Dom.ns.xhtml,
+              tagName: 'body',
+              selector: 'foBody',
+              children: [
+                {
+                  tagName: 'div',
+                  selector: 'edit-text',
+                },
+              ],
+            },
+          ],
+        },
+      ],
     })
     const r6 = graph.createNode({
-      shape: 'flow-chart-rect',
-      width: 80,
-      height: 50,
+      shape: 'ellipse',
+      width: 70,
+      height: 40,
       attrs: {
+        // style: {
+        //   visibility: 'hidden',
+        // },
         body: {
           rx: 10, // 圆角矩形
           ry: 10,
           strokeWidth: 1,
-          stroke: 'rgba(95,149,255)',
+          stroke: '#07448a',
         },
-  
+        text: {
+          text: '可选',
+        },
+        fo: {
+          refWidth: '100%',
+          refHeight: '100%',
+          stroke: '#07448a',  // 边框颜色
+          strokeWidth: 1,
+        },
+        foBody: {
+          xmlns: Dom.ns.xhtml,
+          style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            stroke: '#07448a',  // 边框颜色
+            strokeWidth: 1,
+          },
+        },
+        'edit-text': {
+          contenteditable: 'true',
+          class: 'x6-edit-text',
+          style: {
+            width: '100%',
+            textAlign: 'center',
+            fontSize: 12,
+            color: 'rgba(0,0,0,0.85)',
+          },
+        },
+      },
+      ports: {
+        groups: {
+          // 输入链接桩群组定义
+          in: {
+            position: 'top',
+
+            attrs: {
+              style: {
+                visibility: 'hidden',
+              },
+              circle: {
+                r: 4,
+                magnet: true,
+                stroke: '#5F95FF',
+                strokeWidth: 1,
+                fill: '#fff',
+              },
+            },
+          },
+          // 输出链接桩群组定义
+          out: {
+            position: 'bottom',
+            attrs: {
+              style: {
+                visibility: 'hidden',
+              },
+              circle: {
+                r: 4,
+                magnet: true,
+                stroke: '#5F95FF',
+                strokeWidth: 1,
+                fill: '#fff',
+              },
+            },
+           
+          },
+          on: {
+            position: 'left',
+            attrs: {
+              style: {
+                visibility: 'hidden',
+              },
+              circle: {
+                r:4,
+                magnet: true,
+                stroke: '#5F95FF',
+                strokeWidth: 1,
+                fill: '#fff',
+              },
+            },
+          },
+          un: {
+            position: 'right', 
+            attrs: {
+              style: {
+                visibility: 'hidden',
+              },
+              circle: {
+                r: 4,
+                magnet: true,
+                stroke: '#5F95FF',
+                strokeWidth: 1,
+                fill: '#fff',
+              },
+            },
+          },
+        },
+        items: [
+          {
+            id: 'port1',
+            group: 'in',
+            attrs: {
+              circle: {
+                style: {
+                  visibility: 'hidden',
+                },
+              },
+            },
+          },
+          {
+            id: 'port2',
+            group: 'un',
+            attrs: {
+              circle: {
+                style: {
+                  visibility: 'hidden',
+                },
+              },
+            },
+          },
+          {
+            id: 'port3',
+            group: 'on',
+            attrs: {
+              circle: {
+                style: {
+                  visibility: 'hidden',
+                },
+              },
+            },
+          },
+          {
+            id: 'port4',
+            group: 'out',
+            attrs: {
+              circle: {
+                style: {
+                  visibility: 'hidden',
+                },
+              },
+            },
+          },
+        ],
       },
-      label: '连接节点',
+      markup: [
+        {
+          tagName: 'rect',
+          selector: 'body',
+        },
+        {
+          tagName: 'text',
+          selector: 'text',
+        },
+        {
+          tagName: 'foreignObject',
+          selector: 'fo',
+          children: [
+            {
+              ns: Dom.ns.xhtml,
+              tagName: 'body',
+              selector: 'foBody',
+              children: [
+                {
+                  tagName: 'div',
+                  selector: 'edit-text',
+                },
+              ],
+            },
+          ],
+        },
+      ],
     })
 // 这里创新新的节点+++++++++++++
 
@@ -464,7 +840,7 @@ export default class FlowGraph {
     //     ports: { ...customPorts }
     //   })
     // })
-    this.stencil.load([r1, r2, r3, r4,r5,r6], 'basic')
+    this.stencil.load([r1, r2, r3, r4,r5,], 'basic')
     // 这里需要注入新增节点，+++++++++++++++++
 
 
@@ -485,6 +861,7 @@ export default class FlowGraph {
       ports[i].style.visibility = show ? 'visible' : 'hidden'
     }
   }
+
   
   // 事件相关
   static initEvent() {
@@ -492,7 +869,7 @@ export default class FlowGraph {
     const container = document.getElementById('container')
     // 右键编辑文本
     graph.on('node:contextmenu', ({ cell, view }) => {
-      console.log(view.container)
+      // console.log(view.container)
       const oldText = cell.attr('text/text')
       cell.attr('text/style/display', 'none')
       const elem = view.container.querySelector('.x6-edit-text')
@@ -502,7 +879,7 @@ export default class FlowGraph {
       }
       const onBlur = () => {
         cell.attr('text/text', elem.innerText)
-        cell.attr('text/style/display', 'inline-block')
+        // cell.attr('text/style/display', 'inline-block')
       }
       if(elem){
         elem.addEventListener('blur', () => {

ruoyi-ui/src/views/system/processModeling/flow-x6/graph/shape.js

@@ -5,7 +5,9 @@ import { basicPorts, customPorts } from './ports'
 export const FlowChartRect = Graph.registerNode('flow-chart-rect', {
   inherit: 'rect',
   width: 80,
-  height: 42,
+  height: 80,
+  x:120,
+  y:120,
   attrs: {
     body: {
       stroke: '#5F95FF',
@@ -21,9 +23,9 @@ export const FlowChartRect = Graph.registerNode('flow-chart-rect', {
       style: {
         width: '100%',
         height: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        // display: 'flex',
+        // justifyContent: 'center',
+        // alignItems: 'center',
       },
     },
     'edit-text': {
@@ -210,6 +212,9 @@ export const FlowChartRect = Graph.registerNode('flow-chart-rect', {
 //   ports: { ...basicPorts },
 // })
 // 组合节点
+
+
+
 export const FlowChartImageRect = Graph.registerNode('flow-chart-image-rect', {
   inherit: 'rect',
   width: 200,

ruoyi-ui/src/views/system/processModeling/flow-x6/index.vue

@@ -15,6 +15,7 @@
       <div class="config">
         <config-panel v-if="isReady" />
       </div>
+      <Drawer ref="drawer" />
     </div>
   </div>
 </template>
@@ -40,6 +41,7 @@ export default {
     // this.destroyFn();
   },
   methods: {
+    
     initGraph() {
       const graph = FlowGraph.init(
         $("#container"),
@@ -82,6 +84,9 @@ export default {
 .x6-widget-selection-inner {
   border: 1px dashed #5f95ff;
 }
+.x6-graph-svg-viewport {
+  padding: 0;
+}
 
 @keyframes stroke {
   100% {
@@ -108,4 +113,83 @@ export default {
   text-shadow: 0 0 2px #ff6e06;
   animation-delay: -3s;
 }
+
+ .x6-widget-stencil {
+   color: rgba(34, 38, 83, 1);
+   background: #fff;
+ }  
+ .x6-widget-stencil-title {  
+  background: rgba(7, 68, 138, 1);
+  color: #fff;
+}
+.x6-widget-stencil-search-text {
+   color: #fff;
+   background: rgba(7, 68, 138, 1);
+ }
+ .x6-widget-stencil-group > .x6-widget-stencil-group-title {
+   /* background: #7daee3; */
+   color: #000;
+   height: 40px;
+   font-size: 18px;
+   line-height: 40px;
+   font-weight: normal;
+
+ }
+
+
+ .x6-widget-stencil.collapsable > .x6-widget-stencil-title::before, .x6-widget-stencil-group.collapsable > .x6-widget-stencil-group-title::before {
+    background-image: url('');
+    opacity: 0.4;
+    transition: all 0.3s;
+}
+.x6-widget-stencil-title{
+  visibility: hidden;
+}
+.x6-widget-stencil-search{
+  visibility: hidden;
+}
+.x6-widget-stencil {
+    position: absolute;
+    top: -80px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.config{
+  width: 20%;
+  padding: 0 0;
+}
+#stencil{
+  width: 10%;
+}
+.el-tabs__header {
+  background: rgba(229, 229, 229);
+   /* height: 40px; */
+}
+.el-tabs__item {
+    height: 40px;
+    line-height: 40px;
+    font-size: 18px;
+    font-weight: normal;
+    /* color: #fff; */
+    position: relative;
+    margin-left: 10px;
+}
+/* .el-tabs__item:hover {
+    color: #fff;
+    cursor: pointer;
+} */
+/* .el-tabs__item.is-active {
+    color: #fff;
+} */
+.el-tab-pane{
+  margin-left: 10px;
+}
+.x6-graph-svg-stag{
+  margin-left: -10px;
+}
+.x6-graph{
+  height: 800px !important;
+}
 </style>

ruoyi-ui/src/views/system/test/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <el-row :gutter="15">
+  <div class="wrap">
+    <el-row :gutter="15" class="wrapp">
       <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
         <el-col :span="15">
           <el-form-item label="手机号" prop="mobile">
@@ -190,6 +190,15 @@ export default {
 
 </script>
 <style>
+.wrapp{
+  margin-top: 30px;
+}
+.wrap{
+  width: 1100px;
+  margin: 30px auto;
+  border:2px solid #fcfbfb;
+  border-radius: 15px;
+}
 .el-upload__tip {
   line-height: 1.2;
 }

ruoyi-ui/src/views/tool/build/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="left-board">
-      <div class="logo-wrapper">
+      <!-- <div class="logo-wrapper">
         <div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
-      </div>
+      </div> -->
      <el-scrollbar class="left-scrollbar">
         <div class="components-list">
           <div class="components-title">