From 21554d2bfac5397e1cd3733dbfd02bca71f3bc72 Mon Sep 17 00:00:00 2001 From: LiuHao Date: Thu, 25 Jan 2024 14:43:20 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E8=B0=83=E6=95=B4=E4=BB=BB=E5=8A=A1?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/svg/caret-back.svg | 1 + src/assets/icons/svg/caret-forward.svg | 1 + src/components/BpmnDesign/PropertyPanel.vue | 13 +- src/components/BpmnDesign/index.vue | 205 +++++++++++++------- src/directive/highCode/code.scss | 92 --------- src/directive/highCode/index.ts | 55 ------ src/directive/index.ts | 3 - 7 files changed, 139 insertions(+), 231 deletions(-) create mode 100644 src/assets/icons/svg/caret-back.svg create mode 100644 src/assets/icons/svg/caret-forward.svg delete mode 100644 src/directive/highCode/code.scss delete mode 100644 src/directive/highCode/index.ts diff --git a/src/assets/icons/svg/caret-back.svg b/src/assets/icons/svg/caret-back.svg new file mode 100644 index 0000000..9bae722 --- /dev/null +++ b/src/assets/icons/svg/caret-back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/caret-forward.svg b/src/assets/icons/svg/caret-forward.svg new file mode 100644 index 0000000..1ec3f7d --- /dev/null +++ b/src/assets/icons/svg/caret-forward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/BpmnDesign/PropertyPanel.vue b/src/components/BpmnDesign/PropertyPanel.vue index 62d90f5..9f89384 100644 --- a/src/components/BpmnDesign/PropertyPanel.vue +++ b/src/components/BpmnDesign/PropertyPanel.vue @@ -1,7 +1,6 @@ @@ -92,9 +91,9 @@ onMounted(() => { diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue index 3132e3b..89bf37c 100644 --- a/src/components/BpmnDesign/index.vue +++ b/src/components/BpmnDesign/index.vue @@ -3,70 +3,78 @@
- -
-
- 保 存 - - 预 览 - - + + +
+ + 保 存 + + 预 览 + + - - 下 载 - - - - - - - - - - - - - - - - - - - - - - - - + + 下 载 + + + + + + + + + + + + + + + + + + + + + + + + - -
- -
- + + + - -
- + +
+ + +
+ +
+ +
+
+
+ + +
- - -
-
- + +
+
- +
@@ -95,6 +103,8 @@ const dialog = reactive({ title: '编辑流程' }); +const panelFlag = ref(false); + const xmlUploadRef = ref(); const canvas = ref(); @@ -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: 30px; + height: 35px; + padding: 0; } - .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; + + .process-panel { + transition: width 0.25s ease-in; + .process-panel-bar { + width: 34px; + height: 40px; + .open-bar { + width: 34px; + 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%; - overflow: hidden; + height: calc(100vh - 50px); } - :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; } } diff --git a/src/directive/highCode/code.scss b/src/directive/highCode/code.scss deleted file mode 100644 index f208fe7..0000000 --- a/src/directive/highCode/code.scss +++ /dev/null @@ -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; -} diff --git a/src/directive/highCode/index.ts b/src/directive/highCode/index.ts deleted file mode 100644 index 7f559c7..0000000 --- a/src/directive/highCode/index.ts +++ /dev/null @@ -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; diff --git a/src/directive/index.ts b/src/directive/index.ts index e00fc29..ef25ee8 100644 --- a/src/directive/index.ts +++ b/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); };