feat(ui): add comprehensive Tailwind CSS v4 demo page

This commit replaces the basic placeholder with a full-featured demo page showcasing Tailwind CSS v4 capabilities.

- Implements a modern, responsive landing page layout in `TailwindcssDemo.vue`.
- Defines a custom primary color palette and a float animation using the new `@theme` at-rule in `main.css`.
- Adds a custom `.text-gradient` utility class.
- Updates the router to nest the demo page, improving scalability for future routes.

src/router/index.ts

@@ -2,7 +2,19 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [{ path: '/', name: 'home', component: import('@/views/TailwindcssDemo.vue') }],
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      children: [
+        {
+          path: '/tailwindcss-demo',
+          name: 'TailwindcssDemo',
+          component: () => import('@/views/TailwindcssDemo.vue'),
+        },
+      ],
+    },
+  ],
 })
 
 export default router

src/styles/main.css

@@ -1,2 +1,44 @@
-@import './base.css';
 @import 'tailwindcss';
+
+/* 定义主题变量 */
+@theme {
+  /* 定义你的 primary 色板 */
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-200: #bae6fd;
+  --color-primary-300: #7dd3fc;
+  --color-primary-400: #38bdf8;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-700: #0369a1;
+  --color-primary-800: #075985;
+  --color-primary-900: #0c4a6e;
+
+  /* 定义动画变量 */
+  --animate-float: float 6s ease-in-out infinite;
+
+  /* 定义 keyframes */
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+}
+
+/* 定义自定义 utility / gradient text 类（如果需要） */
+@layer utilities {
+  .text-gradient {
+    @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
+  }
+}
+
+/* 也可以写成 */
+/*
+@utility text-gradient {
+  @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
+}
+ */

src/views/TailwindcssDemo.vue

@@ -1,11 +1,168 @@
-<script lang="ts" setup>
+<script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from "vue";
 
-const frameworkName = ref<string>('Tailwindcss');
+const frameworkName = ref("TailwindCSS");
 </script>
 
 <template>
-  <div class="tailwindcss-demo">
+  <div class="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 p-4 md:p-8">
-    Hello, {{ frameworkName }}!
+    <div class="max-w-6xl mx-auto">
+      <!-- 导航栏 -->
+      <nav class="flex items-center justify-between p-4 bg-white/80 backdrop-blur-md rounded-2xl shadow-lg mb-8">
+        <div class="flex items-center space-x-2">
+          <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+          </div>
+          <span class="text-2xl font-bold text-gradient">TailwindCSS</span>
+        </div>
+
+        <div class="hidden md:flex space-x-6">
+          <a href="#" class="text-primary-900 hover:text-primary-600 font-medium transition-colors">首页</a>
+          <a href="#" class="text-primary-900 hover:text-primary-600 font-medium transition-colors">文档</a>
+          <a href="#" class="text-primary-900 hover:text-primary-600 font-medium transition-colors">组件</a>
+          <a href="#" class="text-primary-900 hover:text-primary-600 font-medium transition-colors">示例</a>
+        </div>
+
+        <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors shadow-md">
+          开始使用
+        </button>
+      </nav>
+
+      <!-- 主内容区 -->
+      <main class="bg-white rounded-2xl shadow-lg overflow-hidden">
+        <div class="grid md:grid-cols-2 gap-8 p-8">
+          <div class="flex flex-col justify-center space-y-6">
+            <h1 class="text-4xl md:text-5xl font-bold text-primary-900">
+              欢迎使用 <span class="text-gradient">TailwindCSS 4</span>
+            </h1>
+            <p class="text-lg text-primary-700">
+              一个功能类优先的 CSS 框架，让您能够快速构建现代网站，而无需离开您的 HTML。
+            </p>
+
+            <div class="flex flex-wrap gap-4 mt-4">
+              <button
+                class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-xl transition-all shadow-md hover:shadow-lg flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                </svg>
+                创建项目
+              </button>
+              <button
+                class="border border-primary-200 hover:border-primary-400 text-primary-700 px-6 py-3 rounded-xl transition-all">
+                了解更多
+              </button>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-center">
+            <div class="relative w-full max-w-md">
+              <div class="absolute -top-10 -left-10 w-32 h-32 bg-primary-200 rounded-full opacity-50 animate-float">
+              </div>
+              <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-primary-300 rounded-full opacity-30 animate-float"
+                style="animation-delay: 2s;"></div>
+
+              <div class="relative bg-gradient-to-br from-primary-500 to-primary-700 p-1 rounded-2xl shadow-xl">
+                <div class="bg-white rounded-xl p-4">
+                  <div class="flex space-x-2 mb-4">
+                    <div class="w-3 h-3 rounded-full bg-red-400"></div>
+                    <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
+                    <div class="w-3 h-3 rounded-full bg-green-400"></div>
+                  </div>
+
+                  <div class="p-2 font-mono text-sm bg-primary-50 rounded-lg">
+                    <div class="text-primary-900">
+                      <span class="text-purple-500">const</span>
+                      <span class="text-blue-500"> frameworkName</span> =
+                      <span class="text-green-500">'TailwindCSS'</span>;
+                    </div>
+                    <br />
+                    <div class="text-primary-900">
+                      <span class="text-purple-500">function</span>
+                      <span class="text-blue-500"> Welcome</span>() {
+                    </div>
+                    <div class="text-primary-900 pl-4">
+                      <span class="text-purple-500">return</span> (
+                    </div>
+                    <div class="text-primary-900 pl-8">
+                      <span class="text-pink-500">&lt;div</span>
+                      <span class="text-blue-500"> class</span>=
+                      <span class="text-green-500">"p-4 bg-blue-100 rounded"</span><span
+                        class="text-pink-500">&gt;</span>
+                    </div>
+                    <div class="text-primary-900 pl-12">
+                      Hello, <span class="text-pink-500">{{ frameworkName }}</span>!
+                    </div>
+                    <div class="text-primary-900 pl-8">
+                      <span class="text-pink-500">&lt;/div&gt;</span>
+                    </div>
+                    <div class="text-primary-900 pl-4">);</div>
+                    <div class="text-primary-900">}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 特性部分 -->
+        <div class="bg-primary-50 py-12 px-8">
+          <h2 class="text-3xl font-bold text-center text-primary-900 mb-12">核心特性</h2>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+              <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary-600" fill="none" viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <h3 class="text-xl font-semibold text-primary-900 mb-2">响应式设计</h3>
+              <p class="text-primary-700">使用响应式工具类轻松构建移动优先的响应式布局。</p>
+            </div>
+
+            <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+              <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary-600" fill="none" viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
+                </svg>
+              </div>
+              <h3 class="text-xl font-semibold text-primary-900 mb-2">组件友好</h3>
+              <p class="text-primary-700">
+                与Vue、React等现代前端框架完美配合，轻松构建可复用组件。
+              </p>
+            </div>
+
+            <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+              <div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary-600" fill="none" viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+              </div>
+              <h3 class="text-xl font-semibold text-primary-900 mb-2">高度可定制</h3>
+              <p class="text-primary-700">
+                通过配置文件轻松定制设计系统，满足品牌个性化需求。
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <!-- 页脚 -->
+      <footer class="mt-8 text-center text-primary-600">
+        <p>© 2023 TailwindCSS 演示页面. 使用 Vue 3 和 TailwindCSS 4 构建。</p>
+      </footer>
+    </div>
   </div>
 </template>
+
+<style scoped></style>