-
+
diff --git a/src/directive/highCode/code.scss b/src/directive/highCode/code.scss
new file mode 100644
index 00000000..f208fe7d
--- /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 00000000..7f559c7b
--- /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 ef25ee89..e00fc292 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 ccca9ed5..f0efc726 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';