From e9b38b48e9b71d8959474964ceed9ae805f05f89 Mon Sep 17 00:00:00 2001
From: gushen610140 <w56038009@outlook.com>
Date: Mon, 2 Feb 2026 21:03:52 +0800
Subject: [PATCH] feat: home page optimize

---
 components.d.ts                               |  2 +
 docs/cli-feature/auto-router.md               |  6 +++
 src/App.vue                                   |  2 +-
 src/components/card/DatePickerDisplayCard.vue | 17 ++++++
 src/pages/index.vue                           | 53 +++++++++++++++----
 src/utils/navigator.ts                        | 13 +++++
 6 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 src/components/card/DatePickerDisplayCard.vue
 create mode 100644 src/utils/navigator.ts

diff --git a/components.d.ts b/components.d.ts
index 0ad67c6..79c1c0e 100644
--- a/components.d.ts
+++ b/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']
diff --git a/docs/cli-feature/auto-router.md b/docs/cli-feature/auto-router.md
index bf224fc..f4305d9 100644
--- a/docs/cli-feature/auto-router.md
+++ b/docs/cli-feature/auto-router.md
@@ -104,6 +104,12 @@ const router = createRouter({
 4. 中文命名：兼容性差，且不利于团队协作和项目维护。
 :::
 
+## 路由跳转
+
+Hucky 封装了 `utils/navigator.ts` 模块，提供了 `navigateTo` 函数，用于在 Vue 组件中进行路由跳转。
+
+如果您以 `/` 开头，将会跳转到前端路由，如果您以 `http` 开头，将会跳转到外部链接。通过设定 `replace` 参数为 `true`，可以在跳转外部链接时，替换当前页面而不是打开新标签页。
+
 ## 特殊规则
 
 :::danger 危险
diff --git a/src/App.vue b/src/App.vue
index 2545dc4..47fd5d2 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/card/DatePickerDisplayCard.vue b/src/components/card/DatePickerDisplayCard.vue
new file mode 100644
index 0000000..29560b0
--- /dev/null
+++ b/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>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 946ec01..c35676f 100644
--- a/src/pages/index.vue
+++ b/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>
-    <NavBar />
-    <div class="w-full p-4 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 class="bg-base-200">
+    <div class="h-screen flex flex-col">
+      <NavBar class="fixed top-0 left-0 z-10" />
+      <div class="hero flex-1">
+        <div class="hero-content text-center">
+          <div class="max-w-md">
+            <h1 class="text-5xl font-bold">欢迎加入</h1>
+            <p class="py-6">
+              超现代化的 Vue3 Based 脚手架<br />
+              赋予您高效的开发体验<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>
diff --git a/src/utils/navigator.ts b/src/utils/navigator.ts
new file mode 100644
index 0000000..a036da7
--- /dev/null
+++ b/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);
+};