feat: add Sticky and ContentDetailWrap doc

.vitepress/config.js

@@ -89,6 +89,16 @@ function createNav() {
         },
       ],
     },
+    {
+      text: '常用Hooks',
+      link: '/hooks/',
+      items: [
+        {
+          text: 'useWatermark',
+          link: '/hooks/useWatermark',
+        },
+      ],
+    },
     {
       text: '相关链接',
       items: [
@@ -131,6 +141,12 @@ function createNav() {
 
 function createSidebar() {
   return {
+    '/hooks/': [
+      {
+        text: 'useWatermark',
+        link: '/hooks/useWatermark',
+      },
+    ],
     '/components/': [
       {
         text: '组件',
@@ -209,6 +225,14 @@ function createSidebar() {
             text: 'ContentDetailWrap 详情包裹组件',
             link: '/components/content-detail-wrap',
           },
+          {
+            text: 'InputPassword 密码输入框组件',
+            link: '/components/input-password',
+          },
+          {
+            text: 'Footer 页脚组件',
+            link: '/components/footer',
+          },
         ],
       },
       {

components/footer.md

@@ -0,0 +1,18 @@
+# Footer 页脚
+
+为整个项目提供页脚信息，自动适应，内容高度不够时，会一直保持在最底部，内容超出则跟随在内容后面。
+
+Footer 组件位于 [src/components/Footer](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/Footer) 内，如果需要修改页脚信息，可在组件内自定义修改。
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { Footer } from '@/components/Footer'
+</script>
+
+<template>
+  <Footer />
+</template>
+
+```

components/input-password.md

@@ -0,0 +1,30 @@
+# InputPassword 密码输入框
+
+对 `element-plus` 的 `Input` 组件进行封装。
+
+InputPassword 组件位于 [src/components/InputPassword](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/InputPassword) 内
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { InputPassword } from '@/components/InputPassword'
+import { ref } from 'vue'
+
+const password = ref('')
+</script>
+
+<template>
+  <InputPassword v-model="password" strength />
+</template>
+
+```
+
+## InputPassword 属性
+
+除以下参数外，还支持 `element-plus` 的 `Input` 所有属性，[详见](https://element-plus.org/zh-CN/component/input.html#autocomplete-%E5%B1%9E%E6%80%A7)
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| strength | 是否显示强度校验 | `boolean` | - | false |
+| modelValue | 选中项绑定值，支持v-model | `string` | - | - |

hooks/useWatermark.md

@@ -0,0 +1,39 @@
+# useWatermark
+
+为元素设置水印
+
+useWatermark 位于 [src/hooks/web/useWatermark.ts](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/hooks/web/useWatermark.ts)
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { useWatermark } from '@/hooks/web/useWatermark'
+import { onBeforeUnmount } from 'vue'
+
+const { setWatermark, clear } = useWatermark()
+
+const { t } = useI18n()
+
+setWatermark('ElementPlusAdmin')
+
+onBeforeUnmount(() => {
+  clear()
+})
+</script>
+
+```
+
+### 参数介绍
+
+```ts
+const { setWatermark, clear } = useWatermark()
+```
+
+**setWatermark**
+
+`setWatermark` 用于设置水印文案，接收一个 `string` 类型的参数
+
+**clear**
+
+`clear` 用于清除水印