diff --git a/mock/role/index.ts b/mock/role/index.ts
index 921c288..09954d8 100644
--- a/mock/role/index.ts
+++ b/mock/role/index.ts
@@ -226,14 +226,6 @@ const adminList = [
           title: 'router.countTo'
         }
       },
-      {
-        path: 'watermark',
-        component: 'views/Components/Watermark',
-        name: 'Watermark',
-        meta: {
-          title: 'router.watermark'
-        }
-      },
       {
         path: 'qrcode',
         component: 'views/Components/Qrcode',
@@ -260,6 +252,27 @@ const adminList = [
       }
     ]
   },
+  {
+    path: '/hooks',
+    component: '#',
+    redirect: '/hooks/useWatermark',
+    name: 'Hooks',
+    meta: {
+      title: 'hooks',
+      icon: 'ic:outline-webhook',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'useWatermark',
+        component: 'views/hooks/useWatermark',
+        name: 'UseWatermark',
+        meta: {
+          title: 'useWatermark'
+        }
+      }
+    ]
+  },
   {
     path: '/level',
     component: '#',
@@ -452,10 +465,11 @@ const testList: string[] = [
   '/components/icon',
   '/components/echart',
   '/components/count-to',
-  '/components/watermark',
   '/components/qrcode',
   '/components/highlight',
   '/components/infotip',
+  '/hooks',
+  '/hooks/useWatermark',
   '/level',
   '/level/menu1',
   '/level/menu1/menu1-1',
diff --git a/src/router/index.ts b/src/router/index.ts
index f7b62b2..72c8e43 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -277,14 +277,6 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
           title: t('router.countTo')
         }
       },
-      {
-        path: 'watermark',
-        component: () => import('@/views/Components/Watermark.vue'),
-        name: 'Watermark',
-        meta: {
-          title: t('router.watermark')
-        }
-      },
       {
         path: 'qrcode',
         component: () => import('@/views/Components/Qrcode.vue'),
@@ -311,6 +303,27 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/hooks',
+    component: Layout,
+    redirect: '/hooks/useWatermark',
+    name: 'Hooks',
+    meta: {
+      title: t('router.component'),
+      icon: 'ic:outline-webhook',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'useWatermark',
+        component: () => import('@/views/hooks/useWatermark.vue'),
+        name: 'UseWatermark',
+        meta: {
+          title: 'useWatermark'
+        }
+      }
+    ]
+  },
   {
     path: '/level',
     component: Layout,
diff --git a/src/views/Components/Watermark.vue b/src/views/hooks/useWatermark.vue
similarity index 87%
rename from src/views/Components/Watermark.vue
rename to src/views/hooks/useWatermark.vue
index 3cf92ce..88029c0 100644
--- a/src/views/Components/Watermark.vue
+++ b/src/views/hooks/useWatermark.vue
@@ -20,12 +20,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <ContentWrap :title="t('watermarkDemo.watermark')">
+  <ContentWrap title="useWatermark">
     <ElButton type="primary" @click="setWatermark(title)">
       {{ t('watermarkDemo.createdWatermark') }}
     </ElButton>
     <ElButton type="danger" @click="clear">{{ t('watermarkDemo.clearWatermark') }}</ElButton>
-    <ElButton type="warning" @click="setWatermark(`${title}-new`)">
+    <ElButton type="warning" @click="setWatermark(`New${title}`)">
       {{ t('watermarkDemo.resetWatermark') }}
     </ElButton>
   </ContentWrap>