diff --git a/README.md b/README.md
index 6140b42bebd36a5970979140fb17f1c78b2decd8..c7c25e881dc08cef811c9a5d08f8aadcf7a4ab4b 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/)
diff --git a/src/Types/Position.d.ts b/src/Types/Position.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6ff0942aaa8b96fba1695ffea6fcbca2bff2a36a
--- /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 f0c55c416be884087ff34b03488e0bda1688975a..3b4d128fb7528335ec89a60ee58bc0684762d08c 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/router/index.ts b/src/router/index.ts
index bd47fe4a2c35d155488f24d33771138c38a98242..727eb3a3e053dfab04275542251272526a74d125 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 f95339ffb69baf71681fccaf8264978303182932..048c924fd166eec8b6d1fb6df960557d3cf4b650 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
diff --git a/src/views/error/403.vue b/src/views/error/403.vue
index d614234e3fa680ac8177ae437afa602eb688a70c..0cf13fcd66aa7c5f3bdbf28b7c82fba741dcc46b 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 d08c8e97855363b4965dc80012ae64f48925b8a5..1cf0ee04b44b16da43e03bb514ce478f4bc87379 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 0257a8a8c3d30adb09ca075c7eb5ffb4ee5e7324..15cb1e145758eb4302b30cc8fe39ec883a7891d5 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;
diff --git a/src/views/pagesManage/myDirectives/index.vue b/src/views/pagesManage/myDirectives/index.vue
index 811dd16e715c36023f8cb9f4f76dee68bb9a6433..6d4dcb56e72dcfdcc6a1401f14e28d5064ffad53 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">