gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 00:09:16 +08:00
Code

feat: Remove Redundant Code (#7484)

Browse Source
This commit is contained in:
zhengkunwang 2024-12-20 15:32:25 +08:00 committed by GitHub
parent 8d48640c1d
commit ea7e92db84
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 0 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/directives/index.ts
View File

@ -1,30 +0,0 @@
import { App } from 'vue';
import copy from './modules/copy';
import waterMarker from './modules/water-marker';
import draggable from './modules/draggable';
import debounce from './modules/debounce';
import throttle from './modules/throttle';
import longpress from './modules/longpress';
import drawerDrag from './modules/drawer-drag';
const directivesList: any = {
// Custom directives
copy,
waterMarker,
draggable,
debounce,
throttle,
longpress,
drawerDrag,
};
const directives = {
install: function (app: App<Element>) {
Object.keys(directivesList).forEach((key) => {
// 注册所有自定义指令
app.directive(key, directivesList[key]);
});
},
};
export default directives;

35
frontend/src/directives/modules/copy.ts
View File

@ -1,35 +0,0 @@
/**
* v-copy
* 复制某个值至剪贴板
* 接收参数：string类型/Ref<string>类型/Reactive<string>类型
*/
import { MsgSuccess } from '@/utils/message';
import type { Directive, DirectiveBinding } from 'vue';
interface ElType extends HTMLElement {
copyData: string | number;
__handleClick__: any;
}
const copy: Directive = {
mounted(el: ElType, binding: DirectiveBinding) {
el.copyData = binding.value;
el.addEventListener('click', handleClick);
},
updated(el: ElType, binding: DirectiveBinding) {
el.copyData = binding.value;
},
beforeUnmount(el: ElType) {
el.removeEventListener('click', el.__handleClick__);
},
};
function handleClick(this: any) {
const input = document.createElement('input');
input.value = this.copyData.toLocaleString();
document.body.appendChild(input);
input.select();
document.execCommand('Copy');
document.body.removeChild(input);
MsgSuccess('复制成功');
}
export default copy;

31
frontend/src/directives/modules/debounce.ts
View File

@ -1,31 +0,0 @@
/**
* v-debounce
* 按钮防抖指令，可自行扩展至input
* 接收参数：function类型
*/
import type { Directive, DirectiveBinding } from 'vue';
interface ElType extends HTMLElement {
__handleClick__: () => any;
}
const debounce: Directive = {
mounted(el: ElType, binding: DirectiveBinding) {
if (typeof binding.value !== 'function') {
throw 'callback must be a function';
}
let timer: NodeJS.Timeout | null = null;
el.__handleClick__ = function () {
if (timer) {
clearInterval(timer);
}
timer = setTimeout(() => {
binding.value();
}, 500);
};
el.addEventListener('click', el.__handleClick__);
},
beforeUnmount(el: ElType) {
el.removeEventListener('click', el.__handleClick__);
},
};
export default debounce;

49
frontend/src/directives/modules/draggable.ts
View File

@ -1,49 +0,0 @@
/*
需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
思路：
1、设置需要拖拽的元素为absolute，其父元素为relative。
2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
4、鼠标松开(onmouseup)时完成一次拖拽
使用：在 Dom 上加上 v-draggable 即可
<div class="dialog-model" v-draggable></div>
*/
import type { Directive } from 'vue';
interface ElType extends HTMLElement {
parentNode: any;
}
const draggable: Directive = {
mounted: function (el: ElType) {
el.style.cursor = 'move';
el.style.position = 'absolute';
el.onmousedown = function (e) {
let disX = e.pageX - el.offsetLeft;
let disY = e.pageY - el.offsetTop;
document.onmousemove = function (e) {
let x = e.pageX - disX;
let y = e.pageY - disY;
let maxX = el.parentNode.offsetWidth - el.offsetWidth;
let maxY = el.parentNode.offsetHeight - el.offsetHeight;
if (x < 0) {
x = 0;
} else if (x > maxX) {
x = maxX;
}
if (y < 0) {
y = 0;
} else if (y > maxY) {
y = maxY;
}
el.style.left = x + 'px';
el.style.top = y + 'px';
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
};
};
},
};
export default draggable;

60
frontend/src/directives/modules/drawer-drag.ts
View File

@ -1,60 +0,0 @@
/*
需求：实现一个drawer可拖拽指令。
使用：在 Dom 上加上 v-draggable 即可
<el-drawer v-drawerDrag />
*/
import type { Directive } from 'vue';
interface ElType extends HTMLElement {
parentNode: any;
}
const drawerDrag: Directive = {
mounted: function (el: ElType) {
const minWidth = 400;
const maxWidth = document.body.clientWidth;
const dragDom = el.querySelector('.el-drawer');
(dragDom as HTMLElement).style.overflow = 'auto';
const resizeElL = document.createElement('div');
dragDom.appendChild(resizeElL);
resizeElL.style.cursor = 'w-resize';
resizeElL.style.position = 'absolute';
resizeElL.style.height = '100%';
resizeElL.style.width = '10px';
resizeElL.style.left = '0px';
resizeElL.style.top = '0px';
resizeElL.onmousedown = (e) => {
const elW = dragDom.clientWidth;
const EloffsetLeft = (dragDom as HTMLElement).offsetLeft;
const clientX = e.clientX;
document.onmousemove = function (e) {
e.preventDefault();
// 左侧鼠标拖拽位置
if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
// 往左拖拽
if (clientX > e.clientX) {
if (dragDom.clientWidth < maxWidth) {
(dragDom as HTMLElement).style.width = elW + (clientX - e.clientX) + 'px';
} else {
(dragDom as HTMLElement).style.width = maxWidth + 'px';
}
}
// 往右拖拽
if (clientX < e.clientX) {
if (dragDom.clientWidth > minWidth) {
(dragDom as HTMLElement).style.width = elW - (e.clientX - clientX) + 'px';
} else {
(dragDom as HTMLElement).style.width = minWidth + 'px';
}
}
}
};
// 拉伸结束
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
};
export default drawerDrag;

49
frontend/src/directives/modules/longpress.ts
View File

@ -1,49 +0,0 @@
/**
* v-longpress
* 长按指令，长按时触发事件
*/
import type { Directive, DirectiveBinding } from 'vue';
const directive: Directive = {
mounted(el: HTMLElement, binding: DirectiveBinding) {
if (typeof binding.value !== 'function') {
throw 'callback must be a function';
}
// 定义变量
let pressTimer: any = null;
// 创建计时器（ 2秒后执行函数 ）
const start = (e: any) => {
if (e.button) {
if (e.type === 'click' && e.button !== 0) {
return;
}
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler(e);
}, 1000);
}
};
// 取消计时器
const cancel = () => {
if (pressTimer !== null) {
clearTimeout(pressTimer);
pressTimer = null;
}
};
// 运行函数
const handler = (e: MouseEvent | TouchEvent) => {
binding.value(e);
};
// 添加事件监听器
el.addEventListener('mousedown', start);
el.addEventListener('touchstart', start);
// 取消计时器
el.addEventListener('click', cancel);
el.addEventListener('mouseout', cancel);
el.addEventListener('touchend', cancel);
el.addEventListener('touchcancel', cancel);
},
};
export default directive;

41
frontend/src/directives/modules/throttle.ts
View File

@ -1,41 +0,0 @@
/*
需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。
思路：
1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮
2、将需要触发的方法绑定在指令上
使用：给 Dom 加上 v-throttle 及回调函数即可
<button v-throttle="debounceClick">节流提交</button>
*/
import type { Directive, DirectiveBinding } from 'vue';
interface ElType extends HTMLElement {
__handleClick__: () => any;
disabled: boolean;
}
const throttle: Directive = {
mounted(el: ElType, binding: DirectiveBinding) {
if (typeof binding.value !== 'function') {
throw 'callback must be a function';
}
let timer: NodeJS.Timeout | null = null;
el.__handleClick__ = function () {
if (timer) {
clearTimeout(timer);
}
if (!el.disabled) {
el.disabled = true;
binding.value();
timer = setTimeout(() => {
el.disabled = false;
}, 1000);
}
};
el.addEventListener('click', el.__handleClick__);
},
beforeUnmount(el: ElType) {
el.removeEventListener('click', el.__handleClick__);
},
};
export default throttle;

36
frontend/src/directives/modules/water-marker.ts
View File

@ -1,36 +0,0 @@
/*
需求：给整个页面添加背景水印。
思路：
1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
2、将其设置为背景图片，从而实现页面或组件水印效果
使用：设置水印文案，颜色，字体大小即可
<div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
*/
import type { Directive, DirectiveBinding } from 'vue';
const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => {
// 水印文字，父元素，字体，文字颜色
let can: HTMLCanvasElement = document.createElement('canvas');
parentNode.appendChild(can);
can.width = 200;
can.height = 150;
can.style.display = 'none';
let cans = can.getContext('2d') as CanvasRenderingContext2D;
cans.rotate((-20 * Math.PI) / 180);
cans.font = font || '16px Microsoft JhengHei';
cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)';
cans.textAlign = 'left';
cans.textBaseline = 'Middle' as CanvasTextBaseline;
cans.fillText(str, can.width / 10, can.height / 2);
parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')';
};
const waterMarker = {
mounted(el: DirectiveBinding, binding: DirectiveBinding) {
addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);
},
};
export default waterMarker;

2
frontend/src/main.ts
View File

@ -14,7 +14,6 @@ for (const path in styleModule) {
styleModule[path]?.();
}
import directives from '@/directives/index';
import router from '@/routers/index';
import i18n from '@/lang/index';
import pinia from '@/store/index';
@ -39,6 +38,5 @@ Object.keys(Icons).forEach((key) => {
app.use(router);
app.use(i18n);
app.use(pinia);
app.use(directives);
app.use(Components);
app.mount('#app');