feat: 添加 UnoCSS 样式到主要组件

- AppLayout.vue: 添加渐变背景和响应式布局
- App.vue: 美化主页面，包含卡片布局和绿色主题按钮
- index.page.vue: 创建彩色渐变的英雄区块，包含动画效果和交互卡片

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/App.vue

@@ -11,19 +11,37 @@ const getName = async () => {
 </script>
 
 <template>
-  <div>
-    <h1>You did it!</h1>
-    <p>
-      Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-      documentation
-    </p>
-    <button class="green" @click="getName" aria-label="get name">
-      Name from API is: {{ name }}
-    </button>
+  <div class="app-container bg-slate-50 min-h-screen">
+    <div class="container mx-auto px-6 py-8">
+      <h1 class="text-4xl font-extrabold text-emerald-600 mb-6 text-center">You did it!</h1>
+      <div class="bg-white rounded-lg shadow-lg p-8 mb-8">
+        <p class="text-lg text-gray-700 mb-6 text-center">
+          Visit
+          <a
+            href="https://vuejs.org/"
+            target="_blank"
+            rel="noopener"
+            class="text-emerald-500 hover:text-emerald-700 underline font-semibold"
+          >
+            vuejs.org
+          </a>
+          to read the documentation
+        </p>
+        <div class="flex justify-center">
+          <button
+            class="bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg"
+            @click="getName"
+            aria-label="get name"
+          >
+            Name from API is: {{ name }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <DynamicDialog />
+    <ConfirmDialog />
+    <Toast />
+    <RouterView />
   </div>
-
-  <DynamicDialog /> <ConfirmDialog /> <Toast />
-  <RouterView />
 </template>
-
-<style scoped></style>

src/layouts/naive-ui/AppLayout.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="app-layout">
-    <div>AppLayout</div>
-    <router-view />
+  <div class="app-layout min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+    <main class="max-w-7xl mx-auto px-4 py-8">
+      <router-view />
+    </main>
   </div>
 </template>
 

src/pages/index.page.vue

@@ -1,7 +1,31 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div></div>
+  <div
+    class="hero-section bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 rounded-xl p-8 shadow-2xl"
+  >
+    <div class="text-center">
+      <h2 class="text-3xl font-bold text-white mb-4 animate-bounce">🎉 This is the index page</h2>
+      <p class="text-white/90 text-lg mb-6">Welcome to your awesome Vue.js application!</p>
+      <div class="flex justify-center space-x-4">
+        <div
+          class="bg-white/20 backdrop-blur-sm rounded-lg p-4 hover:bg-white/30 transition-all duration-300"
+        >
+          <span class="text-white font-semibold">Feature 1</span>
+        </div>
+        <div
+          class="bg-white/20 backdrop-blur-sm rounded-lg p-4 hover:bg-white/30 transition-all duration-300"
+        >
+          <span class="text-white font-semibold">Feature 2</span>
+        </div>
+        <div
+          class="bg-white/20 backdrop-blur-sm rounded-lg p-4 hover:bg-white/30 transition-all duration-300"
+        >
+          <span class="text-white font-semibold">Feature 3</span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>