update 调整任务面板样式

src/assets/icons/svg/caret-back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M321.94 98L158.82 237.78a24 24 0 000 36.44L321.94 414c15.57 13.34 39.62 2.28 39.62-18.22v-279.6c0-20.5-24.05-31.56-39.62-18.18z"/></svg>

src/assets/icons/svg/caret-forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z"/></svg>

src/components/BpmnDesign/PropertyPanel.vue

@@ -1,7 +1,6 @@
 <template>
-  <div ref="propertyPanel" class="property-panel">
+  <div ref="propertyPanel">
-    <div v-if="nodeName">{{ nodeName }}</div>
+    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
-    <el-divider />
     <component :is="component" v-if="element" :element="element" :modeler="modeler" :users="users" :groups="groups" />
   </div>
 </template>
@@ -92,9 +91,9 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.el-divider {
+.node-name {
-  margin-top: 10px;
+  font-size: 16px;
-  margin-bottom: 15px;
+  font-weight: bold;
-  border: 1px solid #ccc;
+  padding: 10px;
 }
 </style>

src/components/BpmnDesign/index.vue

@@ -3,70 +3,78 @@
     <el-dialog ref="flowDialogRef" v-model="dialog.visible" width="100%" fullscreen :title="dialog.title" @close="closeDialog">
       <div class="app-containers">
         <el-container class="h-full">
-          <el-header>
+          <el-container style="align-items: stretch">
-            <div class="">
+            <el-header>
-              <div>
+              <div class="process-toolbar">
-                <el-button size="small" type="primary">保 存</el-button>
+                <el-space wrap :size="10">
-                <el-dropdown size="small" class="ml-[13px]">
+                  <el-button size="small" type="primary">保 存</el-button>
-                  <el-button size="small" type="primary"> 预 览 </el-button>
+                  <el-dropdown size="small">
-                  <template #dropdown>
+                    <el-button size="small" type="primary"> 预 览 </el-button>
-                    <el-dropdown-menu>
+                    <template #dropdown>
-                      <el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item>
+                      <el-dropdown-menu>
-                      <el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item>
+                        <el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item>
-                    </el-dropdown-menu>
+                        <el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item>
-                  </template>
+                      </el-dropdown-menu>
-                </el-dropdown>
+                    </template>
+                  </el-dropdown>
 
-                <el-dropdown size="small" class="ml-[13px]">
+                  <el-dropdown size="small">
-                  <el-button size="small" type="primary"> 下 载 </el-button>
+                    <el-button size="small" type="primary"> 下 载 </el-button>
-                  <template #dropdown>
+                    <template #dropdown>
-                    <el-dropdown-menu>
+                      <el-dropdown-menu>
-                      <el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item>
+                        <el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item>
-                      <el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item>
+                        <el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item>
-                    </el-dropdown-menu>
+                      </el-dropdown-menu>
-                  </template>
+                    </template>
-                </el-dropdown>
+                  </el-dropdown>
-                <el-upload ref="xmlUploadRef" action="" style="display: none" />
+                  <el-upload ref="xmlUploadRef" action="" style="display: none" />
-                <el-tooltip effect="dark" content="加载xml" placement="bottom">
+                  <el-tooltip effect="dark" content="加载xml" placement="bottom">
-                  <el-button class="ml-[13px]" size="small" icon="FolderOpened" @click="loadXML" />
+                    <el-button size="small" icon="FolderOpened" @click="loadXML" />
-                </el-tooltip>
+                  </el-tooltip>
-                <el-tooltip effect="dark" content="新建" placement="bottom">
+                  <el-tooltip effect="dark" content="新建" placement="bottom">
-                  <el-button size="small" icon="CirclePlus" @click="newDiagram" />
+                    <el-button size="small" icon="CirclePlus" @click="newDiagram" />
-                </el-tooltip>
+                  </el-tooltip>
-                <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
+                  <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
-                  <el-button size="small" icon="Rank" @click="fitViewport" />
+                    <el-button size="small" icon="Rank" @click="fitViewport" />
-                </el-tooltip>
+                  </el-tooltip>
-                <el-tooltip effect="dark" content="放大" placement="bottom">
+                  <el-tooltip effect="dark" content="放大" placement="bottom">
-                  <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
+                    <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
-                </el-tooltip>
+                  </el-tooltip>
-                <el-tooltip effect="dark" content="缩小" placement="bottom">
+                  <el-tooltip effect="dark" content="缩小" placement="bottom">
-                  <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
+                    <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
-                </el-tooltip>
+                  </el-tooltip>
-                <el-tooltip effect="dark" content="后退" placement="bottom">
+                  <el-tooltip effect="dark" content="后退" placement="bottom">
-                  <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
+                    <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
-                </el-tooltip>
+                  </el-tooltip>
-                <el-tooltip effect="dark" content="前进" placement="bottom">
+                  <el-tooltip effect="dark" content="前进" placement="bottom">
-                  <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
+                    <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
-                </el-tooltip>
+                  </el-tooltip>
 
-                <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
+                  <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
-                  <div v-code class="hljs-container">
+                    <highlightjs :code="xmlStr" language="XML" />
-                    <highlightjs :code="xmlStr" :autodetect="false" language="XML" />
+                  </el-dialog>
-                  </div>
-                </el-dialog>
 
-                <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
+                  <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
-                  <div style="text-align: center" v-html="svgData" />
+                    <div style="text-align: center" v-html="svgData" />
-                </el-dialog>
+                  </el-dialog>
+                </el-space>
+              </div>
+            </el-header>
+            <div ref="canvas" class="canvas" />
+          </el-container>
+          <div :class="{ 'process-panel': true, 'hide': panelFlag }">
+            <div class="process-panel-bar" @click="panelFlag = !panelFlag">
+              <div class="open-bar">
+                <el-link type="default" :underline="false">
+                  <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
+                </el-link>
               </div>
             </div>
-          </el-header>
+
-          <el-container class="pl-[20px] pr-[20px]" style="align-items: stretch">
+            <div v-show="!panelFlag" v-if="bpmnModeler" class="panel-content">
-            <div ref="canvas" class="canvas" />
+              <PropertyPanel :modeler="bpmnModeler" :users="users" :groups="groups" />
-            <div class="panel-div">
-              <PropertyPanel v-if="bpmnModeler" :modeler="bpmnModeler" :users="users" :groups="groups" />
             </div>
-          </el-container>
+          </div>
         </el-container>
       </div>
     </el-dialog>
@@ -95,6 +103,8 @@ const dialog = reactive({
   title: '编辑流程'
 });
 
+const panelFlag = ref(false);
+
 const xmlUploadRef = ref<ElUploadInstance>();
 
 const canvas = ref<HTMLDivElement>();
@@ -340,29 +350,76 @@ const getProcessElement = () => {
       background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
     }
     .el-header {
-      border-bottom: -1px 0 1px solid rgb(218 218 218);
+      height: 35px;
-      height: 30px;
+      padding: 0;
     }
-    .panel-div {
+
-      height: 100%;
+    .process-panel {
-      box-shadow: 0 0 8px #cccccc;
+      transition: width 0.25s ease-in;
-      overflow-x: hidden;
+      .process-panel-bar {
-      overflow-y: auto;
+        width: 34px;
-      box-sizing: border-box;
+        height: 40px;
-      width: 500px;
+        .open-bar {
-      padding: 10px;
+          width: 34px;
-      background-color: #fff;
+          line-height: 40px;
+        }
+      }
+      // 收起面板样式
+      &.hide {
+        width: 34px;
+        overflow: hidden;
+        padding: 0;
+        .process-panel-bar {
+          width: 34px;
+          height: 100%;
+          box-sizing: border-box;
+          display: block;
+          text-align: left;
+          line-height: 34px;
+        }
+        .process-panel-bar:hover {
+          background-color: #f5f7fa;
+        }
+      }
     }
   }
 
   :deep(.el-dialog .el-dialog__body) {
-    padding: 0 !important;
     max-height: 100% !important;
-    height: 100%;
+    height: calc(100vh - 50px);
-    overflow: hidden;
   }
-  :deep(.el-dialog) {
+
-    overflow: hidden;
+  .process-toolbar {
+    pre {
+      margin: 0;
+      height: 100%;
+      max-height: calc(80vh - 32px);
+      overflow-x: hidden;
+      overflow-y: auto;
+      :deep(.hljs) {
+        word-break: break-word;
+        white-space: pre-wrap;
+        padding: 0.5em;
+      }
+    }
+  }
+}
+.open-bar {
+  font-size: 20px;
+  cursor: pointer;
+  text-align: center;
+  color: #606266;
+}
+.process-panel {
+  box-sizing: border-box;
+  padding: 0 8px 0 8px;
+  border-left: 1px solid #eeeeee;
+  box-shadow: #cccccc 0 0 8px;
+  max-height: 100%;
+  width: 480px;
+  :deep(.el-collapse) {
+    height: calc(100vh - 162px);
+    overflow: auto;
   }
 }
 </style>

src/directive/highCode/code.scss

@@ -1,92 +0,0 @@
-/* 语法高亮 */
-.hljs-container {
-  position: relative;
-  display: block;
-  display: flex;
-  width: max-content;
-  margin-left: 100px;
-  padding: 30px 10px 2px 0;
-  overflow-x: hidden;
-  font-size: 14px;
-  line-height: 24px;
-  text-align: left;
-  background: #21252b;
-  box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
-}
-
-/** 3个点 */
-.hljs-container::before {
-  position: absolute;
-  top: 10px;
-  left: 15px;
-  width: 12px;
-  height: 12px;
-  overflow: visible;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 12px;
-  white-space: nowrap;
-  text-indent: 75px;
-  background-color: #fc625d;
-  border-radius: 16px;
-  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-  content: attr(codetype);
-}
-
-/** 滚动条 */
-:deep(.hljs) {
-  overflow-x: auto;
-}
-
-:deep(.hljs::-webkit-scrollbar) {
-  width: 12px !important;
-  height: 12px !important;
-}
-
-:deep(.hljs::-webkit-scrollbar-thumb) {
-  height: 30px !important;
-  background: #d1d8e6;
-  background-clip: content-box;
-  border: 2px solid transparent;
-  border-radius: 19px;
-  opacity: 0.8;
-}
-
-:deep(.hljs::-webkit-scrollbar-thumb:hover) {
-  background: #a5b3cf;
-  background-clip: content-box;
-  border: 2px solid transparent;
-}
-
-:deep(.hljs::-webkit-scrollbar-track-piece) {
-  width: 30px;
-  height: 30px;
-  background: #333;
-}
-
-::-webkit-scrollbar-button {
-  display: none;
-}
-
-/** 行数样式 */
-.hljs-code-number {
-  padding: 17px 10px 0;
-  color: #d1d8e6;
-  font-size: 12px;
-  list-style: none;
-  border-right: 1px solid #d1d8e6;
-}
-
-/** 复制样式 */
-.hljs-copy {
-  position: absolute;
-  top: 50px;
-  right: 30px;
-  display: none;
-  padding: 0 10px;
-  color: #66a9ff;
-  font-size: 10px;
-  background-color: #ecf5ff;
-  border-radius: 3px;
-  cursor: pointer;
-}

src/directive/highCode/index.ts

@@ -1,55 +0,0 @@
-import './code.scss';
-import { Directive } from 'vue';
-const vCode: Directive = {
-  mounted(el: HTMLElement) {
-    //获取代码片段
-    const code: HTMLElement = el.querySelector('code.hljs');
-    const pre = document.getElementsByTagName('pre')[0];
-    const html = code?.innerHTML;
-    const size = html.split('\n').length;
-
-    //插入行数
-    const ul = document.createElement('ul');
-    for (let i = 1; i <= size; i++) {
-      const li = document.createElement('li');
-      li.innerText = i + '';
-      ul.appendChild(li);
-    }
-
-    ul.classList.add('hljs-code-number');
-
-    el.insertBefore(ul, pre);
-
-    //插入复制功能
-    const copy: HTMLDivElement = document.createElement('div');
-    copy.classList.add('hljs-copy');
-    copy.innerText = '复制';
-    //添加点击事件
-    copy.addEventListener('click', () => {
-      //创建一个输入框
-      const textarea = document.createElement('textarea');
-      document.body.appendChild(textarea);
-      textarea.setAttribute('readonly', 'readonly');
-      textarea.value = code.innerText;
-      textarea.select();
-      if (document.execCommand('copy')) {
-        document.execCommand('copy');
-        copy.innerText = '复制成功';
-      }
-      document.body.removeChild(textarea);
-    });
-
-    pre.appendChild(copy);
-
-    //鼠标移入显示复制按钮
-    el.addEventListener('mouseout', () => {
-      copy.innerText = '复制';
-      copy.style.display = 'none';
-    });
-    el.addEventListener('mouseover', () => {
-      copy.style.display = 'block';
-    });
-  }
-};
-
-export default vCode;

src/directive/index.ts

@@ -1,12 +1,9 @@
 import copyText from './common/copyText';
 import { hasPermi, hasRoles } from './permission';
-import code from './highCode';
 import { App } from 'vue';
 
 export default (app: App) => {
   app.directive('copyText', copyText);
   app.directive('hasPermi', hasPermi);
   app.directive('hasRoles', hasRoles);
-  app.directive('hasRoles', hasRoles);
-  app.directive('code', code);
 };