@duxweb/dvha-template 1.0.0

package/template/base/uno.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, presetIcons, presetWind3 } from 'unocss'
+import icons from '@iconify-json/tabler/icons.json'
+
+const generateSafeList = () => {
+  return Object.keys(icons.icons).flatMap((item) => {
+    return `i-tabler:${item}`
+  })
+};
+
+const safeList = generateSafeList()
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetIcons({
+      collections: {
+        tabler: () => import('@iconify-json/tabler/icons.json').then(i => i.default),
+      },
+    }),
+  ],
+  safelist: safeList,
+})

package/template/base/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/base/vite.config.ts

@@ -0,0 +1,34 @@
+import { resolve } from 'node:path'
+import vue from '@vitejs/plugin-vue'
+import VueJsx from '@vitejs/plugin-vue-jsx'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    VueJsx(),
+    UnoCSS(),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        index: resolve(__dirname, 'index.html'),
+      },
+      output: {
+        entryFileNames: 'js/[name]-[hash].js',
+        chunkFileNames: 'js/[name]-[hash].js',
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            return id
+              .toString()
+              .split('node_modules/')[1]
+              .split('/')[0]
+              .toString()
+          }
+        },
+      },
+    },
+    outDir: resolve(__dirname, 'dist'),
+  },
+})

package/template/ui-configs/base/pages/404.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+    <div class="max-w-md w-full text-center">
+      <!-- 404 图标 -->
+      <div class="mb-8">
+        <div class="text-8xl font-bold text-gray-300 mb-4">404</div>
+        <div class="i-tabler:face-sad text-6xl text-gray-400 mx-auto"></div>
+      </div>
+
+      <!-- 错误信息 -->
+      <div class="mb-8">
+        <h1 class="text-2xl font-bold text-gray-900 mb-2">页面不存在</h1>
+        <p class="text-gray-600">抱歉，您访问的页面无法找到</p>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="space-y-3 mb-8">
+        <button
+          @click="goHome"
+          class="w-full flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium"
+        >
+          <div class="i-tabler:home mr-2"></div>
+          返回首页
+        </button>
+
+        <button
+          @click="goBack"
+          class="w-full flex items-center justify-center px-6 py-3 border text-gray-700 rounded-lg hover:bg-gray-50 font-medium"
+        >
+          <div class="i-tabler:arrow-left mr-2"></div>
+          返回上页
+        </button>
+      </div>
+
+      <!-- 底部信息 -->
+      <p class="text-xs text-gray-400">
+        错误代码: {{ errorCode }} | {{ currentTime }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const errorCode = ref('ERR_404_NOT_FOUND')
+
+const currentTime = computed(() => {
+  return new Date().toLocaleString('zh-CN')
+})
+
+const goHome = () => {
+  window.location.href = '/'
+}
+
+const goBack = () => {
+  if (window.history.length > 1) {
+    window.history.back()
+  } else {
+    goHome()
+  }
+}
+</script>

package/template/ui-configs/base/pages/home.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="p-6">
+    <!-- 欢迎区域 -->
+    <div class="bg-white rounded-lg shadow-sm border p-8 mb-8">
+      <div class="text-center">
+        <div class="i-tabler:home text-5xl text-blue-600 mx-auto mb-4"></div>
+        <h1 class="text-3xl font-bold text-gray-900 mb-4">欢迎使用 DVHA</h1>
+        <p class="text-gray-600 max-w-2xl mx-auto">
+          基于 Vue 3 + UnoCSS + @duxweb/dvha-core 构建的现代化管理系统
+        </p>
+      </div>
+    </div>
+
+    <!-- @duxweb/dvha-core 特点展示 -->
+    <div class="mb-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:brand-vue text-3xl text-green-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Vue 3 支持</h3>
+          <p class="text-gray-600 text-sm">基于最新的 Vue 3 Composition API，提供现代化的开发体验</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:brand-typescript text-3xl text-blue-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">TypeScript</h3>
+          <p class="text-gray-600 text-sm">完整的 TypeScript 支持，提供类型安全和更好的开发体验</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:layout-dashboard text-3xl text-purple-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">多管理端</h3>
+          <p class="text-gray-600 text-sm">支持多个独立的管理端，每个管理端可以有不同的配置</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:database text-3xl text-orange-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">数据提供者</h3>
+          <p class="text-gray-600 text-sm">灵活的数据提供者模式，支持各种 API 和数据源</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:shield-check text-3xl text-red-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">认证系统</h3>
+          <p class="text-gray-600 text-sm">内置完整的认证和权限管理系统，支持多种认证方式</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:route text-3xl text-indigo-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">路由管理</h3>
+          <p class="text-gray-600 text-sm">智能的路由和菜单管理，支持动态路由和权限控制</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 开始使用 -->
+    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border p-8 text-center">
+      <h3 class="text-xl font-bold text-gray-900 mb-4">开始构建您的管理系统</h3>
+      <p class="text-gray-600 mb-6">@duxweb/dvha-core 为您提供了构建现代化管理系统所需的所有工具</p>
+      <div class="flex justify-center space-x-4">
+        <a href="https://github.com/duxweb/dux-vue" target="_blank"
+           class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
+          <div class="i-tabler:brand-github mr-2"></div>
+          查看源码
+        </a>
+        <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">
+          <div class="i-tabler:book mr-2"></div>
+          查看文档
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 首页逻辑
+console.log('首页已加载')
+</script>

package/template/ui-configs/base/pages/layout.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="min-h-screen bg-gray-50 flex flex-col">
+    <!-- 头部 -->
+    <header class="bg-white shadow-sm border-b fixed w-full top-0 z-50">
+      <div class="flex items-center justify-between h-16 px-4">
+        <div class="flex items-center">
+          <button @click="toggleSidebar" class="p-2 rounded hover:bg-gray-100 lg:hidden">
+            <div class="i-tabler:menu-2 text-xl"></div>
+          </button>
+          <div class="flex items-center ml-4 lg:ml-0">
+            <div class="i-tabler:brand-vue text-2xl text-blue-600 mr-3"></div>
+            <h1 class="text-xl font-bold">{{ manage.config?.title || 'Dux Admin' }}</h1>
+          </div>
+        </div>
+
+        <!-- 用户菜单 -->
+        <div class="relative">
+          <button @click="showUserMenu = !showUserMenu" class="flex items-center p-2 rounded hover:bg-gray-100">
+            <div class="i-tabler:user-circle text-xl mr-2"></div>
+            <span class="hidden md:block text-sm font-medium">{{ getUserName() }}</span>
+            <div class="i-tabler:chevron-down text-sm ml-1 hidden md:block"></div>
+          </button>
+
+          <div v-if="showUserMenu" class="absolute right-0 mt-2 w-40 bg-white rounded-md shadow-lg border z-50">
+            <div class="py-1">
+              <button @click="handleLogout" class="flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100">
+                <div class="i-tabler:logout mr-3"></div>
+                退出登录
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="flex pt-16 flex-1">
+      <!-- 侧边栏 -->
+      <Sidebar :sidebar-open="sidebarOpen" />
+
+      <!-- 遮罩层 -->
+      <div v-if="sidebarOpen" @click="toggleSidebar" class="fixed inset-0 z-30 bg-black bg-opacity-50 lg:hidden"></div>
+
+      <!-- 主内容 -->
+      <main class="flex-1">
+        <RouterView />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useManage, useGetAuth, useLogout } from '@duxweb/dvha-core'
+import Sidebar from './menu.vue'
+
+const manage = useManage()
+const user = useGetAuth()
+
+const { mutate: logout } = useLogout({
+  onSuccess: () => console.log('退出成功'),
+  onError: (error) => console.error('退出失败:', error)
+})
+
+const sidebarOpen = ref(false)
+const showUserMenu = ref(false)
+
+const getUserName = () => user?.info?.name || user?.info?.username || 'Admin'
+const toggleSidebar = () => sidebarOpen.value = !sidebarOpen.value
+const handleLogout = () => logout()
+
+const closeDropdowns = (event: Event) => {
+  if (!(event.target as HTMLElement).closest('.relative')) {
+    showUserMenu.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', closeDropdowns))
+onUnmounted(() => document.removeEventListener('click', closeDropdowns))
+</script>

package/template/ui-configs/base/pages/login.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+      <!-- 登录卡片 -->
+      <div class="bg-white rounded-lg shadow-sm border p-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-8">
+          <div class="i-tabler:shield-check text-4xl text-blue-600 mx-auto mb-4"></div>
+          <h1 class="text-2xl font-bold text-gray-900 mb-2">系统登录</h1>
+          <p class="text-gray-500 text-sm">欢迎使用管理系统，请登录</p>
+        </div>
+
+        <!-- 登录表单 -->
+        <form @submit.prevent="handleLogin" class="space-y-4">
+          <!-- 用户名 -->
+          <div>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                <div class="i-tabler:user text-gray-400"></div>
+              </div>
+              <input
+                v-model="form.username"
+                type="text"
+                placeholder="请输入用户名"
+                class="w-full pl-10 pr-3 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                :class="{'border-red-300': errors.username}"
+              />
+            </div>
+            <p v-if="errors.username" class="mt-1 text-sm text-red-600">{{ errors.username }}</p>
+          </div>
+
+          <!-- 密码 -->
+          <div>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                <div class="i-tabler:lock text-gray-400"></div>
+              </div>
+              <input
+                v-model="form.password"
+                :type="showPassword ? 'text' : 'password'"
+                placeholder="请输入密码"
+                class="w-full pl-10 pr-12 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                :class="{'border-red-300': errors.password}"
+              />
+              <button
+                type="button"
+                @click="showPassword = !showPassword"
+                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
+              >
+                <div :class="showPassword ? 'i-tabler:eye-off' : 'i-tabler:eye'"></div>
+              </button>
+            </div>
+            <p v-if="errors.password" class="mt-1 text-sm text-red-600">{{ errors.password }}</p>
+          </div>
+
+          <!-- 记住我和忘记密码 -->
+          <div class="flex items-center justify-between">
+            <label class="flex items-center">
+              <input v-model="form.remember" type="checkbox" class="h-4 w-4 text-blue-600 rounded border-gray-300" />
+              <span class="ml-2 text-sm text-gray-600">记住我</span>
+            </label>
+            <a href="#" class="text-sm text-blue-600 hover:text-blue-500">忘记密码？</a>
+          </div>
+
+          <!-- 登录按钮 -->
+          <button
+            type="submit"
+            :disabled="loading"
+            class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <span v-if="loading" class="flex items-center justify-center">
+              <div class="i-tabler:loader-2 animate-spin mr-2"></div>
+              登录中...
+            </span>
+            <span v-else>登录</span>
+          </button>
+        </form>
+
+        <!-- 注册提示 -->
+        <div class="mt-6 text-center">
+          <span class="text-sm text-gray-500">还没有账号？</span>
+          <a href="#" class="text-sm text-blue-600 hover:text-blue-500 font-medium ml-1">立即注册</a>
+        </div>
+      </div>
+
+      <!-- 版权信息 -->
+      <p class="mt-6 text-center text-xs text-gray-400">
+        © 2024 Dux Template. All rights reserved.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useLogin } from '@duxweb/dvha-core'
+
+const showPassword = ref(false)
+
+const form = reactive({
+  username: '',
+  password: '',
+  remember: false
+})
+
+const errors = reactive({
+  username: '',
+  password: ''
+})
+
+const { mutate: login, isLoading: loading } = useLogin({
+  onSuccess: () => console.log('登录成功'),
+  onError: (error) => {
+    console.error('登录失败:', error)
+    if (error?.message) {
+      if (error.message.includes('用户名') || error.message.includes('username')) {
+        errors.username = error.message
+      } else if (error.message.includes('密码') || error.message.includes('password')) {
+        errors.password = error.message
+      } else {
+        errors.password = error.message
+      }
+    } else {
+      errors.password = '登录失败，请检查用户名和密码'
+    }
+  }
+})
+
+const validateForm = () => {
+  errors.username = ''
+  errors.password = ''
+
+  let isValid = true
+
+  if (!form.username.trim()) {
+    errors.username = '请输入用户名'
+    isValid = false
+  }
+
+  if (!form.password.trim()) {
+    errors.password = '请输入密码'
+    isValid = false
+  }
+
+  return isValid
+}
+
+const handleLogin = async () => {
+  if (!validateForm()) return
+
+  try {
+    await login({
+      username: form.username,
+      password: form.password,
+      remember: form.remember
+    })
+  } catch (error) {
+    console.error('登录过程中发生错误:', error)
+  }
+}
+</script>

package/template/ui-configs/base/pages/menu.vue

@@ -0,0 +1,32 @@
+<template>
+  <aside
+    :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
+    class="fixed inset-y-0 left-0 z-40 w-64 bg-white shadow-lg border-r pt-16 transition-transform lg:translate-x-0 lg:static lg:inset-0"
+  >
+    <div class="h-full overflow-y-auto p-4">
+      <nav class="space-y-2">
+        <router-link
+          v-for="menu in menuList"
+          :key="menu.name"
+          :to="menu.path"
+          class="flex items-center px-3 py-2 text-sm font-medium rounded-md"
+          :class="active === menu.name ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'"
+        >
+          <div :class="[menu.icon, 'mr-3']"></div>
+          {{ menu.label }}
+        </router-link>
+      </nav>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { useMenu } from '@duxweb/dvha-core'
+
+defineProps<{
+  sidebarOpen: boolean
+}>()
+
+const { data: menuList,active } = useMenu()
+
+</script>

package/template/ui-configs/base.json

@@ -0,0 +1,22 @@
+{
+  "name": "base",
+  "display": "Vue 3 + Vite + UnoCSS",
+  "description": "基础的 Vue 3 项目模板",
+  "dependencies": {
+    "@duxweb/dvha-core": "latest",
+    "@iconify-json/tabler": "^1.2.18",
+    "@unocss/preset-icons": "^66.1.2",
+    "@vueuse/core": "^13.2.0",
+    "@vueuse/integrations": "^13.2.0",
+    "axios": "^1.9.0",
+    "lodash-es": "^4.17.21",
+    "unocss": "^66.1.2",
+    "@unocss/reset": "^66.1.2"
+  },
+  "devDependencies": {},
+  "imports": [
+    "import '@unocss/reset/tailwind.css'",
+    "import 'virtual:uno.css'"
+  ],
+  "appUse": []
+}

package/template/ui-configs/elementui/pages/404.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+    <div class="max-w-md w-full text-center">
+      <!-- 404 图标 -->
+      <div class="mb-8">
+        <div class="text-8xl font-bold text-gray-300 mb-4">404</div>
+        <div class="i-tabler:face-sad text-6xl text-gray-400 mx-auto"></div>
+      </div>
+
+      <!-- 错误信息 -->
+      <div class="mb-8">
+        <h1 class="text-2xl font-bold text-gray-900 mb-2">页面不存在</h1>
+        <p class="text-gray-600">抱歉，您访问的页面无法找到</p>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="space-y-3 mb-8">
+        <button
+          @click="goHome"
+          class="w-full flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium"
+        >
+          <div class="i-tabler:home mr-2"></div>
+          返回首页
+        </button>
+
+        <button
+          @click="goBack"
+          class="w-full flex items-center justify-center px-6 py-3 border text-gray-700 rounded-lg hover:bg-gray-50 font-medium"
+        >
+          <div class="i-tabler:arrow-left mr-2"></div>
+          返回上页
+        </button>
+      </div>
+
+      <!-- 底部信息 -->
+      <p class="text-xs text-gray-400">
+        错误代码: {{ errorCode }} | {{ currentTime }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const errorCode = ref('ERR_404_NOT_FOUND')
+
+const currentTime = computed(() => {
+  return new Date().toLocaleString('zh-CN')
+})
+
+const goHome = () => {
+  window.location.href = '/'
+}
+
+const goBack = () => {
+  if (window.history.length > 1) {
+    window.history.back()
+  } else {
+    goHome()
+  }
+}
+</script>

package/template/ui-configs/elementui/pages/home.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="p-6">
+    <!-- 欢迎区域 -->
+    <div class="bg-white rounded-lg shadow-sm border p-8 mb-8">
+      <div class="text-center">
+        <div class="i-tabler:home text-5xl text-blue-600 mx-auto mb-4"></div>
+        <h1 class="text-3xl font-bold text-gray-900 mb-4">欢迎使用 DVHA</h1>
+        <p class="text-gray-600 max-w-2xl mx-auto">
+          基于 Vue 3 + UnoCSS + @duxweb/dvha-core 构建的现代化管理系统
+        </p>
+      </div>
+    </div>
+
+    <!-- @duxweb/dvha-core 特点展示 -->
+    <div class="mb-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:brand-vue text-3xl text-green-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Vue 3 支持</h3>
+          <p class="text-gray-600 text-sm">基于最新的 Vue 3 Composition API，提供现代化的开发体验</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:brand-typescript text-3xl text-blue-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">TypeScript</h3>
+          <p class="text-gray-600 text-sm">完整的 TypeScript 支持，提供类型安全和更好的开发体验</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:layout-dashboard text-3xl text-purple-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">多管理端</h3>
+          <p class="text-gray-600 text-sm">支持多个独立的管理端，每个管理端可以有不同的配置</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:database text-3xl text-orange-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">数据提供者</h3>
+          <p class="text-gray-600 text-sm">灵活的数据提供者模式，支持各种 API 和数据源</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:shield-check text-3xl text-red-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">认证系统</h3>
+          <p class="text-gray-600 text-sm">内置完整的认证和权限管理系统，支持多种认证方式</p>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border p-6">
+          <div class="i-tabler:route text-3xl text-indigo-600 mb-4"></div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">路由管理</h3>
+          <p class="text-gray-600 text-sm">智能的路由和菜单管理，支持动态路由和权限控制</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 开始使用 -->
+    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border p-8 text-center">
+      <h3 class="text-xl font-bold text-gray-900 mb-4">开始构建您的管理系统</h3>
+      <p class="text-gray-600 mb-6">@duxweb/dvha-core 为您提供了构建现代化管理系统所需的所有工具</p>
+      <div class="flex justify-center space-x-4">
+        <a href="https://github.com/duxweb/dux-vue" target="_blank"
+           class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
+          <div class="i-tabler:brand-github mr-2"></div>
+          查看源码
+        </a>
+        <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">
+          <div class="i-tabler:book mr-2"></div>
+          查看文档
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 首页逻辑
+console.log('首页已加载')
+</script>