update 代码高亮设置
This commit is contained in:
LiuHao
parent
32c9b6f656
commit
b6d81db331
@ -1,12 +1,34 @@
|
||||
<template>
|
||||
<el-dialog ref="flowDialogRef" v-model="dialog.visible" width="95%" :title="dialog.title" @close="closeDialog">
|
||||
<div class="containers">
|
||||
<el-dialog ref="flowDialogRef" v-model="dialog.visible" width="100%" fullscreen :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">
|
||||
<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-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 size="small" icon="FolderOpened" @click="loadXML" />
|
||||
<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" />
|
||||
@ -28,37 +50,27 @@
|
||||
</el-tooltip>
|
||||
|
||||
<el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
|
||||
<el-button>复制</el-button>
|
||||
<highlightjs :code="xmlStr" language="html" />
|
||||
<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-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-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>
|
||||
</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,7 +330,8 @@ const getProcessElement = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-containers {
|
||||
.containers {
|
||||
.app-containers {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
@ -325,5 +339,30 @@ const getProcessElement = () => {
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
|
||||
92
src/directive/highCode/code.scss
Normal file
92
src/directive/highCode/code.scss
Normal file
@ -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;
|
||||
}
|
||||
55
src/directive/highCode/index.ts
Normal file
55
src/directive/highCode/index.ts
Normal file
@ -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;
|
||||
@ -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);
|
||||
};
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user