feat: nav bar animate

components.d.ts

@@ -12,6 +12,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AnimatePresence: typeof import('motion-v')['AnimatePresence']
     Button: typeof import('./src/components/ui/button/Button.vue')['default']
     Calendar: typeof import('./src/components/ui/calendar/Calendar.vue')['default']
     CalendarCell: typeof import('./src/components/ui/calendar/CalendarCell.vue')['default']
@@ -47,6 +48,7 @@ declare module 'vue' {
 
 // For TSX support
 declare global {
+  const AnimatePresence: typeof import('motion-v')['AnimatePresence']
   const Button: typeof import('./src/components/ui/button/Button.vue')['default']
   const Calendar: typeof import('./src/components/ui/calendar/Calendar.vue')['default']
   const CalendarCell: typeof import('./src/components/ui/calendar/CalendarCell.vue')['default']

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)
+```

src/components/menu/NavBar.vue

@@ -2,12 +2,40 @@
 import ChangeLanguageDropdownButton from "@/components/button/ChangeLanguageDropdownButton.vue";
 import ChangeThemeDropdownButton from "@/components/button/ChangeThemeDropdownButton.vue";
 import { useI18n } from "vue-i18n";
+import { throttle } from "radash";
+import { AnimatePresence, motion } from "motion-v";
 
 const { t } = useI18n();
+
+const showNavBar = ref(true);
+const curScrollY = ref(0);
+
+const handleThrottleScroll = throttle(100, () => {
+  const scrollY = window.scrollY;
+  if (scrollY > curScrollY.value) {
+    showNavBar.value = false;
+  } else {
+    showNavBar.value = true;
+  }
+  curScrollY.value = scrollY;
+});
+
+window.addEventListener("scroll", handleThrottleScroll);
 </script>
 
 <template>
-  <div class="navbar bg-base-200 shadow-sm">
+  <div class="w-full">
+    <AnimatePresence>
+      <motion.div
+        v-show="showNavBar"
+        class="navbar bg-base-200 shadow-sm"
+        :exit="{
+          y: -100,
+          transition: {
+            duration: 0.3,
+          },
+        }"
+      >
         <div class="navbar-start">
           <div class="dropdown">
             <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@@ -54,6 +82,8 @@ const { t } = useI18n();
           <ChangeThemeDropdownButton />
           <ChangeLanguageDropdownButton />
         </div>
+      </motion.div>
+    </AnimatePresence>
   </div>
 </template>
 

vite.config.ts

@@ -5,6 +5,7 @@ import tailwindcss from "@tailwindcss/vite";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
+import MotionResolver from "motion-v/resolver";
 import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 
 // https://vite.dev/config/
@@ -19,7 +20,7 @@ export default defineConfig({
       resolvers: [ElementPlusResolver()],
     }),
     Components({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver(), MotionResolver()],
       dts: true,
     }),
   ],