feat: nav bar animate

docs/.vitepress/config.ts

@@ -27,6 +27,8 @@ export default defineConfig({
           { text: "组件库", link: "/cli-feature/component-lib" },
           { text: "国际化", link: "/cli-feature/international" },
           { text: "图表", link: "/cli-feature/chart" },
+          { text: "辅助工具", link: "/cli-feature/radash" },
+          { text: "动画", link: "/cli-feature/motion" },
         ],
       },
     ],

docs/cli-feature/motion.md

@@ -0,0 +1,33 @@
+# 动画
+
+## 使用
+
+:::warning 警告
+motion-v 的自动引入系统经过测试无法使用，您仍需要手动引入
+:::
+
+Hucky 安装了 [motion-v](https://motion.net.cn/docs/vue) 库，您可以在组件中使用它来添加动画效果。
+
+简单来看，您只需要引入 motion-v 的 `motion` 组件，并使用它来包裹需要添加动画效果的元素，然后编写 :animate 指令即可。
+
+```html
+<motion.div :animate="{ rotate: 360 }" />
+```
+
+您也可以通过设置 :initial 指令来设置元素的初始状态。
+
+```html
+<motion.div :animate="{ rotate: 360 }" :initial="{ rotate: 0 }" />
+```
+
+通过 `AnimatePresence` 组件，您可以在元素进入或退出时添加动画效果。
+
+```html
+<AnimatePresence>
+  <motion.div v-if="show" :exit="{ opacity: 0 }" />
+</AnimatePresence>
+```
+
+:::tip 提示
+exit 会自动为元素的进入也添加动画效果。
+:::

docs/cli-feature/radash.md

@@ -0,0 +1,34 @@
+# 辅助工具
+
+## 使用
+
+Hucky 安装了 [Radash](https://radash.uihtm.com/) 库，用于辅助处理数组、对象、字符串等数据。
+
+您可以自行查询文档来了解更多用法。
+
+## 节流
+
+在查阅 Radash 文档时发现其 `throttle` 函数的使用存在错误，在这里补充纠正，在文档中的用法如下：
+
+```ts
+import { throttle } from 'radash'
+
+const throttledScroll = throttle(() => {
+  console.log('Scroll event handled')
+}, 100)
+
+window.addEventListener('scroll', throttledScroll)
+// 滚动时，函数最多每100ms执行一次
+```
+
+事实上 `throttle` 函数的第一个参数才是节流时间，第二个参数是函数。正确写法应该如下：
+
+```ts
+import { throttle } from 'radash'
+
+const throttledScroll = throttle(100, () => {
+  console.log('Scroll event handled')
+})
+
+window.addEventListener('scroll', throttledScroll)
+```