From fa0665fe4d209ab86ae9d6e0c51c1e5306be47bd Mon Sep 17 00:00:00 2001
From: liushengkai <949919743@qq.com>
Date: Sat, 16 Sep 2023 14:05:17 +0800
Subject: [PATCH 1/4] feat: change readme

---
 README.md | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 6140b42..c7c25e8 100644
--- a/README.md
+++ b/README.md
@@ -3,15 +3,12 @@
 #### 介绍
 前端， 基于vue3 + TypeScript + Element Plus + vue-router + Pinia
 
-#### 软件架构
-软件架构说明
-
-
 #### 安装教程
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+```
+npm install
+npm run dev
+```
 
 #### 使用说明
 
@@ -24,12 +21,3 @@
 3.  提交代码
 4.  新建 Pull Request
 
-
-#### 特技
-
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
-- 
Gitee


From e1fccd2a5f8c3abdbce2cc9b7ddd13baa0208e74 Mon Sep 17 00:00:00 2001
From: liushengkai <949919743@qq.com>
Date: Wed, 20 Sep 2023 16:49:39 +0800
Subject: [PATCH 2/4] style: set color

---
 src/views/error/403.vue | 1 -
 src/views/error/404.vue | 1 -
 src/views/error/500.vue | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/views/error/403.vue b/src/views/error/403.vue
index d614234..0cf13fc 100644
--- a/src/views/error/403.vue
+++ b/src/views/error/403.vue
@@ -36,7 +36,6 @@ const onBack = () => {
 
   .desc {
     font-size: 14px;
-    color: #333;
   }
   .icon {
     width: 35vw;
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index d08c8e9..1cf0ee0 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -27,7 +27,6 @@ const onBack = () => {
 
   .desc {
     font-size: 14px;
-    color: #333;
   }
   .icon {
     width: 40vw;
diff --git a/src/views/error/500.vue b/src/views/error/500.vue
index 0257a8a..15cb1e1 100644
--- a/src/views/error/500.vue
+++ b/src/views/error/500.vue
@@ -36,7 +36,6 @@ const onBack = () => {
 
   .desc {
     font-size: 14px;
-    color: #333;
   }
   .icon {
     width: 35vw;
-- 
Gitee


From d48897cfe1f96aad2b4a1cd4602c205a1ec2255c Mon Sep 17 00:00:00 2001
From: liushengkai <949919743@qq.com>
Date: Wed, 20 Sep 2023 17:22:47 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat=EF=BC=9A=20404=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E6=9C=80=E5=90=8E=E6=89=8D=E5=8A=A8=E6=80=81=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts         | 6 ------
 src/store/modules/router.ts | 7 +++++++
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index bd47fe4..727eb3a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -81,12 +81,6 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     meta: { title: '登录', hidden: true, noTagView: true },
     component: () => import('@/views/login/index.vue')
   },
-  {
-    name: 'error404',
-    path: '/:catchAll(.*)',
-    meta: { hidden: true },
-    component: () => import('@/views/error/404.vue')
-  },
   components,
   error
 ]
diff --git a/src/store/modules/router.ts b/src/store/modules/router.ts
index f95339f..048c924 100644
--- a/src/store/modules/router.ts
+++ b/src/store/modules/router.ts
@@ -106,6 +106,13 @@ const routerStore = defineStore('routerStore', {
       routes.map((item) => {
         router.addRoute(item)
       })
+      const item404 = {
+        name: 'error404',
+        path: '/:catchAll(.*)',
+        meta: { hidden: true },
+        component: () => import('@/views/error/404.vue')
+      }
+      router.addRoute(item404)
       this.routes = constantRoutes.concat(routes)
       this.setFlattenRouters()
       return this.routes
-- 
Gitee


From 062d811d0b7d940034c28c2320eeac492c163b20 Mon Sep 17 00:00:00 2001
From: liushengkai <949919743@qq.com>
Date: Thu, 21 Sep 2023 19:34:16 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat=EF=BC=9A=20=E6=8B=96=E6=8B=BD=E6=8C=87?=
 =?UTF-8?q?=E4=BB=A4=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Types/Position.d.ts                      |  6 ++++++
 src/directives/modules/draggable.ts          |  8 ++++++++
 src/views/pagesManage/myDirectives/index.vue | 11 ++++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/Types/Position.d.ts

diff --git a/src/Types/Position.d.ts b/src/Types/Position.d.ts
new file mode 100644
index 0000000..6ff0942
--- /dev/null
+++ b/src/Types/Position.d.ts
@@ -0,0 +1,6 @@
+export interface Position {
+  left?: string
+  right?: string
+  top?: string
+  bottom?: string
+}
\ No newline at end of file
diff --git a/src/directives/modules/draggable.ts b/src/directives/modules/draggable.ts
index f0c55c4..3b4d128 100644
--- a/src/directives/modules/draggable.ts
+++ b/src/directives/modules/draggable.ts
@@ -1,4 +1,5 @@
 import type { Directive, DirectiveBinding } from 'vue'
+import type { Position } from '@/Types/Position'
 
 function getStyle(el: HTMLElement, attr: string) {
   return window.getComputedStyle(el, null).getPropertyValue(attr)
@@ -70,6 +71,13 @@ const instance: Directive = {
 
       // 监听鼠标抬起
       document.onmouseup = () => {
+        if (binding.value && typeof binding.value === 'function') {
+          const result: Position = {
+            left: el.style.left,
+            top: el.style.top
+          }
+          binding.value(result)
+        }
         document.onmousemove = null
         document.onmouseup = null
       }
diff --git a/src/views/pagesManage/myDirectives/index.vue b/src/views/pagesManage/myDirectives/index.vue
index 811dd16..6d4dcb5 100644
--- a/src/views/pagesManage/myDirectives/index.vue
+++ b/src/views/pagesManage/myDirectives/index.vue
@@ -24,8 +24,9 @@
     <el-divider border-style="dashed" />
     <section>
       <h3>draggable 拖拽</h3>
+      <p>当前距离左上坐标（{{left}}, {{top}}）</p>
       <div id="draggableBox">
-        <div class="item" v-draggable:draggableBox>仅限父元素拖拽</div>
+        <div class="item" v-draggable:draggableBox="onDraggable">仅限父元素拖拽</div>
       </div>
     </section>
     <el-divider border-style="dashed" />
@@ -52,6 +53,7 @@ import Container from '@/components/Container.vue'
 import Cookies from 'js-cookie'
 import useStore from '@/store'
 import { ElMessage } from 'element-plus'
+import type { Position } from '@/Types/Position'
 
 import type { Ref } from 'vue'
 
@@ -64,6 +66,8 @@ const { permission } = useStore()
 let currentRole: Ref<string> = ref('admin')
 let loading: Ref<boolean> = ref(false)
 let key: Ref<boolean> = ref(true)
+let left: Ref<String> = ref('')
+let top: Ref<String> = ref('')
 
 const onChangeRole = async (e: string) => {
   loading.value = true
@@ -86,6 +90,11 @@ const loadCallback = (arg: IntersectionObserverEntry, index: number) => {
     ${index === 2 ? '每次出现在窗口都会执行一次该回调' : '该回调仅执行一次'}`
   )
 }
+
+const onDraggable = (info: Position) => {
+  left.value = info.left as string
+  top.value = info.top as string
+}
 </script>
 
 <style scoped lang="scss">
-- 
Gitee