From b6d81db331bc38f39574d748c3ecca273493f96b Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Thu, 25 Jan 2024 01:53:53 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BpmnDesign/index.vue           | 161 +++++++++++-------
 src/components/BpmnDesign/panel/TaskPanel.vue |   2 +-
 src/directive/highCode/code.scss              |  92 ++++++++++
 src/directive/highCode/index.ts               |  55 ++++++
 src/directive/index.ts                        |   3 +
 src/main.ts                                   |   3 +-
 6 files changed, 253 insertions(+), 63 deletions(-)
 create mode 100644 src/directive/highCode/code.scss
 create mode 100644 src/directive/highCode/index.ts

diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index f84da6a..3132e3b 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -1,64 +1,76 @@
 <template>
-  <el-dialog ref="flowDialogRef" v-model="dialog.visible" width="95%" :title="dialog.title" @close="closeDialog">
-    <div class="app-containers">
-      <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">
-        <div class="flex pb-3 justify-between">
-          <div>
-            <el-upload ref="xmlUploadRef" action="" style="display: none" />
-            <el-tooltip effect="dark" content="加载xml" placement="bottom">
-              <el-button size="small" icon="FolderOpened" @click="loadXML" />
-            </el-tooltip>
-            <el-tooltip effect="dark" content="新建" placement="bottom">
-              <el-button size="small" icon="CirclePlus" @click="newDiagram" />
-            </el-tooltip>
-            <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
-              <el-button size="small" icon="Rank" @click="fitViewport" />
-            </el-tooltip>
-            <el-tooltip effect="dark" content="放大" placement="bottom">
-              <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
-            </el-tooltip>
-            <el-tooltip effect="dark" content="缩小" placement="bottom">
-              <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
-            </el-tooltip>
-            <el-tooltip effect="dark" content="后退" placement="bottom">
-              <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
-            </el-tooltip>
-            <el-tooltip effect="dark" content="前进" placement="bottom">
-              <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
-            </el-tooltip>
+  <div class="containers">
+    <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>
+            <div class="">
+              <div>
+                <el-button size="small" type="primary">保 存</el-button>
+                <el-dropdown size="small" class="ml-[13px]">
+                  <el-button size="small" type="primary"> 预 览 </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item>
+                      <el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
 
-            <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
-              <el-button>复制</el-button>
-              <highlightjs :code="xmlStr" language="html" />
-            </el-dialog>
+                <el-dropdown size="small" class="ml-[13px]">
+                  <el-button size="small" type="primary"> 下 载 </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item>
+                      <el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+                <el-upload ref="xmlUploadRef" action="" style="display: none" />
+                <el-tooltip effect="dark" content="加载xml" placement="bottom">
+                  <el-button class="ml-[13px]" size="small" icon="FolderOpened" @click="loadXML" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="新建" placement="bottom">
+                  <el-button size="small" icon="CirclePlus" @click="newDiagram" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
+                  <el-button size="small" icon="Rank" @click="fitViewport" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="放大" placement="bottom">
+                  <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="缩小" placement="bottom">
+                  <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="后退" placement="bottom">
+                  <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="前进" placement="bottom">
+                  <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
+                </el-tooltip>
 
-            <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
-              <div style="text-align: center" v-html="svgData" />
-            </el-dialog>
-          </div>
-          <div>
-            <el-button size="small" icon="Document" @click="previewXML">XML预览</el-button>
-            <el-button size="small" icon="View" @click="previewSVG">SVG预览</el-button>
-            <el-button size="small" icon="Download" @click="downloadXML">XML</el-button>
-            <el-button size="small" icon="Download" @click="downloadSVG">SVG</el-button>
-            <el-button size="small" type="primary">保 存</el-button>
-          </div>
-        </div>
-      </el-header>
-      <el-container class="h-full">
-        <el-container style="align-items: stretch">
-          <el-main style="padding: 0">
+                <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
+                  <div v-code class="hljs-container">
+                    <highlightjs :code="xmlStr" :autodetect="false" language="XML" />
+                  </div>
+                </el-dialog>
+
+                <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
+                  <div style="text-align: center" v-html="svgData" />
+                </el-dialog>
+              </div>
+            </div>
+          </el-header>
+          <el-container class="pl-[20px] pr-[20px]" style="align-items: stretch">
             <div ref="canvas" class="canvas" />
-          </el-main>
-          <el-scrollbar height="610px">
-            <el-aside style="width: 400px; min-height: 590px; background-color: #fff; box-shadow: 0 0 5px 1px #999">
+            <div class="panel-div">
               <PropertyPanel v-if="bpmnModeler" :modeler="bpmnModeler" :users="users" :groups="groups" />
-            </el-aside>
-          </el-scrollbar>
+            </div>
+          </el-container>
         </el-container>
-      </el-container>
-    </div>
-  </el-dialog>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup name="BpmnDesign">
@@ -73,13 +85,14 @@ import diagramXML from '@/components/BpmnDesign/assets/defaultXML';
 import flowableModdle from '@/components/BpmnDesign/assets/moddle/flowable';
 import Modules from './assets/module/index';
 import useModelerStore from '@/store/modules/modeler';
+
 const modelerStore = useModelerStore();
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const dialog = reactive({
   visible: true,
-  title: '流程设计器'
+  title: '编辑流程'
 });
 
 const xmlUploadRef = ref<ElUploadInstance>();
@@ -317,13 +330,39 @@ const getProcessElement = () => {
 </script>
 
 <style lang="scss" scoped>
-.app-containers {
-  width: 100%;
-  height: 100%;
-  .canvas {
+.containers {
+  .app-containers {
     width: 100%;
     height: 100%;
-    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
+    .canvas {
+      width: 100%;
+      height: 100%;
+      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: 30px;
+    }
+    .panel-div {
+      height: 100%;
+      box-shadow: 0 0 8px #cccccc;
+      overflow-x: hidden;
+      overflow-y: auto;
+      box-sizing: border-box;
+      width: 500px;
+      padding: 10px;
+      background-color: #fff;
+    }
+  }
+
+  :deep(.el-dialog .el-dialog__body) {
+    padding: 0 !important;
+    max-height: 100% !important;
+    height: 100%;
+    overflow: hidden;
+  }
+  :deep(.el-dialog) {
+    overflow: hidden;
   }
 }
 </style>
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
index 472f327..114cb7b 100644
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/src/components/BpmnDesign/panel/TaskPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-collapse>
-      <el-collapse-item title="Consistency" name="1">
+      <el-collapse-item title="常规" name="1">
         <el-form ref="formRef" size="small" :model="formData" :rules="formRules" label-width="90px">
           <el-form-item prop="id" label="节点 ID">
             <el-input v-model="formData.id" @change="idChange"> </el-input>
diff --git a/src/directive/highCode/code.scss b/src/directive/highCode/code.scss
new file mode 100644
index 0000000..f208fe7
--- /dev/null
+++ b/src/directive/highCode/code.scss
@@ -0,0 +1,92 @@
+/* 语法高亮 */
+.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;
+}
diff --git a/src/directive/highCode/index.ts b/src/directive/highCode/index.ts
new file mode 100644
index 0000000..7f559c7
--- /dev/null
+++ b/src/directive/highCode/index.ts
@@ -0,0 +1,55 @@
+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;
diff --git a/src/directive/index.ts b/src/directive/index.ts
index ef25ee8..e00fc29 100644
--- a/src/directive/index.ts
+++ b/src/directive/index.ts
@@ -1,9 +1,12 @@
 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);
 };
diff --git a/src/main.ts b/src/main.ts
index ccca9ed..f0efc72 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,7 +16,8 @@ import directive from './directive';
 import plugins from './plugins/index'; // plugins
 
 // 高亮组件
-import 'highlight.js/styles/a11y-light.css';
+// import 'highlight.js/styles/a11y-light.css';
+import 'highlight.js/styles/atom-one-dark.css';
 import 'highlight.js/lib/common';
 import HighLight from '@highlightjs/vue-plugin';