feat: home page optimize

components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     ChangeLanguageDropdownButton: typeof import('./src/components/button/ChangeLanguageDropdownButton.vue')['default']
     ChangeThemeDropdownButton: typeof import('./src/components/button/ChangeThemeDropdownButton.vue')['default']
     DatePicker: typeof import('./src/components/date-picker/DatePicker.vue')['default']
+    DatePickerDisplayCard: typeof import('./src/components/card/DatePickerDisplayCard.vue')['default']
     DevelopProgressCard: typeof import('./src/components/card/DevelopProgressCard.vue')['default']
     DevelopProgressDiagram: typeof import('./src/components/diagram/DevelopProgressDiagram.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -62,6 +63,7 @@ declare global {
   const ChangeLanguageDropdownButton: typeof import('./src/components/button/ChangeLanguageDropdownButton.vue')['default']
   const ChangeThemeDropdownButton: typeof import('./src/components/button/ChangeThemeDropdownButton.vue')['default']
   const DatePicker: typeof import('./src/components/date-picker/DatePicker.vue')['default']
+  const DatePickerDisplayCard: typeof import('./src/components/card/DatePickerDisplayCard.vue')['default']
   const DevelopProgressCard: typeof import('./src/components/card/DevelopProgressCard.vue')['default']
   const DevelopProgressDiagram: typeof import('./src/components/diagram/DevelopProgressDiagram.vue')['default']
   const ElButton: typeof import('element-plus/es')['ElButton']

docs/cli-feature/auto-router.md

@@ -104,6 +104,12 @@ const router = createRouter({
 4. 中文命名：兼容性差，且不利于团队协作和项目维护。
 :::
 
+## 路由跳转
+
+Hucky 封装了 `utils/navigator.ts` 模块，提供了 `navigateTo` 函数，用于在 Vue 组件中进行路由跳转。
+
+如果您以 `/` 开头，将会跳转到前端路由，如果您以 `http` 开头，将会跳转到外部链接。通过设定 `replace` 参数为 `true`，可以在跳转外部链接时，替换当前页面而不是打开新标签页。
+
 ## 特殊规则
 
 :::danger 危险

src/App.vue

@@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n";
 import { useLanguageStore } from "./stores/LanguageStore";
 
 onMounted(() => {
-  // 加载 i18n
+  // 加载 i18n 初始语言
   useI18n().locale.value = useLanguageStore().language;
 });
 </script>

src/components/card/DatePickerDisplayCard.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import DatePicker from "../date-picker/DatePicker.vue";
+</script>
+
+<template>
+  <div class="card bg-base-100 w-96 shadow-sm">
+    <div class="p-4 min-h-82">
+      <DatePicker />
+    </div>
+    <div class="card-body">
+      <h2 class="card-title">日期选择器</h2>
+      <p>日期选择器组件演示</p>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/pages/index.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
+import DatePickerDisplayCard from "@/components/card/DatePickerDisplayCard.vue";
 import DevelopProgressCard from "@/components/card/DevelopProgressCard.vue";
 import NavBar from "@/components/menu/NavBar.vue";
+import { navigateTo } from "@/utils/navigator";
 
 const progress = ref([
   {
@@ -35,17 +37,46 @@ const progress = ref([
 </script>
 
 <template>
-  <div>
+  <div class="bg-base-200">
-    <NavBar />
+    <div class="h-screen flex flex-col">
-    <div class="w-full p-4 grid grid-cols-3 gap-4 justify-items-center">
+      <NavBar class="fixed top-0 left-0 z-10" />
-      <DevelopProgressCard
+      <div class="hero flex-1">
-        v-for="item in progress"
+        <div class="hero-content text-center">
-        :key="item.title"
+          <div class="max-w-md">
-        :completed="item.completed"
+            <h1 class="text-5xl font-bold">欢迎加入</h1>
-        :pending="item.pending"
+            <p class="py-6">
-        :title="item.title"
+              超现代化的 Vue3 Based 脚手架<br />
-        :intro="item.intro"
+              赋予您高效的开发体验<br />
-      />
+              使用 bun docs 命令启动 Hucky 的文档服务器
+            </p>
+            <button
+              class="btn btn-primary"
+              @click="navigateTo('http://localhost:5174')"
+            >
+              查阅文档
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="p-4 min-h-screen">
+      <h1 class="text-4xl font-bold mb-12 ml-10">脚手架开发进度</h1>
+      <div class="w-full grid grid-cols-3 gap-4 justify-items-center">
+        <DevelopProgressCard
+          v-for="item in progress"
+          :key="item.title"
+          :completed="item.completed"
+          :pending="item.pending"
+          :title="item.title"
+          :intro="item.intro"
+        />
+      </div>
+    </div>
+    <div class="p-4 min-h-screen">
+      <h1 class="text-4xl font-bold mb-12 ml-10">组件演示</h1>
+      <div class="w-full grid grid-cols-3 gap-4 justify-items-center">
+        <DatePickerDisplayCard />
+      </div>
     </div>
   </div>
 </template>

src/utils/navigator.ts

@@ -0,0 +1,13 @@
+import router from "@/router";
+
+export const navigateTo = (path: string, replace?: boolean = false) => {
+  if (path.startsWith("http")) {
+    if (replace) {
+      window.open(path, "_self");
+    } else {
+      window.open(path, "_blank");
+    }
+    return;
+  }
+  router.push(path);
+};