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>