@yqg/permission 1.0.9 → 1.0.11-alpha.1

package/src/hooks/useDragable.ts

@@ -0,0 +1,129 @@
+// useDraggable.js
+
+import { ref, onBeforeUnmount, watch, onMounted } from 'vue';
+
+export default function useDraggable(props: { top: any }, showModal: () => void) {
+    const currentTop = ref(0);
+    const isDragging = ref(false);   // 是否正在拖拽
+    const startX = ref(0);           // 鼠标按下时的X坐标
+    const initialX = ref(0);         // 元素初始X坐标
+    const initialY = ref(0);
+    const dragElement = ref<any>(null);
+
+    watch(() => props.top, (newVal) => {
+        currentTop.value = newVal;
+    }, { immediate: true });
+
+    // 获取元素的初始位置
+    const getPosition = (el: HTMLElement) => {
+        const rect = el.getBoundingClientRect();
+        return {
+            x: rect.left,
+            y: rect.top
+        };
+    };
+
+    // 限制拖拽元素在屏幕内
+    const constrainToScreen = (clientX: number, clientY: number, el: HTMLElement) => {
+        const { innerWidth, innerHeight } = window;
+        const elRect = el.getBoundingClientRect();
+
+        const constrainedX = Math.min(Math.max(clientX, 0), innerWidth - elRect.width);
+        const constrainedY = Math.min(Math.max(clientY, 0), innerHeight - elRect.height);
+
+        return { x: constrainedX, y: constrainedY };
+    };
+
+    // 鼠标移动时的处理函数
+    const onMouseMove = (e: MouseEvent, el: HTMLElement) => {
+        if (!isDragging.value) return;
+
+        const { clientX, clientY } = e;
+        const { x, y } = constrainToScreen(clientX - startX.value + initialX.value, clientY - currentTop.value + initialY.value, el);
+
+        el.style.left = `${x}px`;
+        el.style.top = `${y}px`;
+
+    };
+
+    // 鼠标松开时的处理函数
+    const onMouseUp = (e: MouseEvent, el: HTMLElement) => {
+        if (!isDragging.value) return;
+
+        // 阻止点击事件触发
+        e.preventDefault();  // 阻止默认行为
+        e.stopPropagation(); // 阻止事件冒泡
+
+        // // 获取元素当前的位置
+        const { x: currentX, y: currentY } = getPosition(el);
+        if ( Math.abs(currentY - initialY.value) < 10 && Math.abs(currentX - initialX.value) < 10) {
+            showModal();
+            // 卸载拖拽
+            isDragging.value = false;
+
+            return;
+        }
+
+
+        isDragging.value = false;
+        const { clientY } = e;
+
+        // 在鼠标松开时设置x为初始位置，y为鼠标当前位置
+        const { x, y } = constrainToScreen(initialX.value, clientY - currentTop.value + initialY.value, el);
+        el.style.transition = 'all 0.3s';
+        el.style.left = `${x}px`;
+        el.style.top = `${y}px`;
+
+        // 清除事件监听
+        document.removeEventListener('mousemove', (e) => onMouseMove(e, el));
+        document.removeEventListener('mouseup', (e) => onMouseUp(e, el));
+    };
+
+    // 鼠标按下时的处理函数
+    const onMouseDown = (e: MouseEvent, el: HTMLElement) => {
+        isDragging.value = true;
+
+        // 阻止点击事件触发
+        e.preventDefault();  // 阻止默认行为
+        e.stopPropagation();
+
+        // 获取鼠标按下时的位置
+        startX.value = e.clientX;
+        currentTop.value = e.clientY;
+
+
+        // 获取元素的初始位置
+        const { x, y } = getPosition(el);
+        initialX.value = x;
+        initialY.value = y;
+        el.style.transition = 'none';
+
+        // 添加鼠标移动和鼠标松开事件监听
+        document.addEventListener('mousemove', (e) => onMouseMove(e, el));
+        document.addEventListener('mouseup', (e) => onMouseUp(e, el));
+    };
+
+    // 返回拖拽的绑定方法
+    const bindDraggable = () => {
+        onMounted(() => {
+            const el = dragElement.value?.$el;
+            if (el) {
+                el.addEventListener('mousedown', (e: MouseEvent) => onMouseDown(e, el));
+            }
+        });
+
+        onBeforeUnmount(() => {
+            const el = dragElement.value?.$el;
+            if (el) {
+                el.removeEventListener('mousedown', (e: MouseEvent) => onMouseDown(e, el));
+            }
+        });
+    };
+
+    bindDraggable();
+
+    return {
+        currentTop,
+        dragElement,
+    };
+}

package/src/i18n/en-US.ts

@@ -3,35 +3,34 @@ export default {
     applyPermission: '申请权限',
     applyReason: '申请理由',
     approvalProcess: '审批流程',
-    applyReason1: '新入职员工申请',
-    applyReason2: '项目需要',
-    applyReason3: '数据查询与分析',
     applyReasonPlaceholder: '请尽可能详细描述申请理由',
     cancel: '取消',
     submit: '确定',
     close: '关闭',
     viewApprovalDetail: '查看审批详情',
-	applyMore: '继续申请其他权限',
+    applyMore: '继续申请其他权限',
     successTips: '已提交申请，审批通过后可拥有相关权限',
     resoultTitle: '操作结果反馈',
     start: '发起',
     end: '结束',
-	noNeed: '无需审批',
+    noNeed: '无需审批',
     adaptDepartment: '适用部门',
-	noApprovalProcess: '无审批流程',
+    noApprovalProcess: '无审批流程',
     excessTips: '一次最多可申请{number}个权限',
     unavailableTips: '您暂无权限查看/操作该页面，请点击下方按钮进行申请',
     appliedTips: '权限已申请，正在{status}...',
     unapplyTips: '您暂无权限查看/操作该页面，且该页面中没有您可以申请的权限，',
-	callManager: '如有需要请联系系统管理员',
-	manager: '系统管理员',
+    callManager: '如有需要请联系系统管理员',
+    manager: '系统管理员',
     availableTime: '有效期',
-	selectPlaceholder: '请选择权限点',
-	reasonPlaceholder: '请输入申请理由',
-	maxCountTips: '一次最多只可申请{count}个权限',
-	maxLengthTips: '最多{length}个字符',
-	lastDays: '{count}天后到期',
-	taday: '今天到期',
+    selectPlaceholder: '请选择权限点',
+    reasonPlaceholder: '请输入申请理由',
+    maxCountTips: '一次最多只可申请{count}个权限',
+    maxLengthTips: '最多{length}个字符',
+    lastDays: '{count}天后到期',
+    taday: '今天到期',
+    clickToApply: '点击申请菜单',
+    noPermissionTips: '该菜单下暂无权限点',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',
@@ -48,10 +47,10 @@ export default {
         PENDING: '审批中',
         NO: '不可申请',
         OWNER: '永久拥有',
-		TEMP_OWNER: '临时拥有',
+        TEMP_OWNER: '临时拥有',
     },
-	operationType: {
-		QUERY: '查询',
-		MANAGE: '操作',	
-	}
+    operationType: {
+        QUERY: '查询',
+        MANAGE: '操作',
+    }
 };

package/src/i18n/zh-CH.ts

@@ -3,9 +3,6 @@ export default {
     applyPermission: '申请权限',
     applyReason: '申请理由',
     approvalProcess: '审批流程',
-    applyReason1: '新入职员工申请',
-    applyReason2: '项目需要',
-    applyReason3: '数据查询与分析',
     applyReasonPlaceholder: '请尽可能详细描述申请理由',
     cancel: '取消',
     submit: '确定',
@@ -32,6 +29,8 @@ export default {
 	maxLengthTips: '最多{length}个字符',
 	lastDays: '{count}天后到期',
 	taday: '今天到期',
+    clickToApply: '点击申请菜单',
+    noPermissionTips: '该菜单下暂无权限点',
     availiables: {
         SEVEN_DAYS: '7天',
         THIRTY_DAYS: '30天',

package/src/typings/index.d.ts

@@ -35,6 +35,7 @@ declare type LevelMapType = {
     [key in LevelType]: {
         color: string;
         text: string;
+		background: string;
     };
 };