feat: #update

src/assets/templates/prototype/customer/UserBehavior.vue

@@ -149,30 +149,25 @@
                 <td class="px-6 py-4">
                   <div class="flex items-center">
                     <div class="flex-shrink-0 h-10 w-10">
-                      <img 
-                        class="h-10 w-10 rounded-full object-cover" 
-                        :src="behavior.userAvatar" 
-                        :alt="behavior.userName"
-                        @error="handleImageError"
-                      >
+                      <img class="h-10 w-10 rounded-full object-cover" :src="behavior.user.avatar" :alt="behavior.user.name">
                     </div>
                     <div class="ml-4">
-                      <div class="text-sm font-medium text-gray-900 dark:text-white">{{ behavior.userName }}</div>
-                      <div class="text-sm text-gray-500 dark:text-gray-400">{{ behavior.userId }}</div>
+                      <div class="text-sm font-medium text-gray-900 dark:text-white">{{ behavior.user.name }}</div>
+                      <div class="text-sm text-gray-500 dark:text-gray-400">{{ behavior.user.id }}</div>
                     </div>
                   </div>
                 </td>
                 <td class="px-6 py-4">
-                  <span :class="['user-type-tag', `type-${behavior.userType}`]">
-                    {{ behavior.userType === 'new' ? '新用户' : 
-                       behavior.userType === 'regular' ? '普通用户' : 'VIP用户' }}
+                  <span :class="['user-type-tag', `type-${behavior.user.type}`]">
+                    {{ behavior.user.type === 'new' ? '新用户' : 
+                       behavior.user.type === 'regular' ? '普通用户' : 'VIP用户' }}
                   </span>
                 </td>
                 <td class="px-6 py-4">
-                  <span :class="['behavior-type-tag', `type-${behavior.behaviorType}`]">
-                    {{ behavior.behaviorType === 'browse' ? '浏览' : 
-                       behavior.behaviorType === 'search' ? '搜索' : 
-                       behavior.behaviorType === 'purchase' ? '购买' : '评论' }}
+                  <span :class="['behavior-type-tag', `type-${behavior.type}`]">
+                    {{ behavior.type === 'browse' ? '浏览' : 
+                       behavior.type === 'search' ? '搜索' : 
+                       behavior.type === 'purchase' ? '购买' : '评论' }}
                   </span>
                 </td>
                 <td class="px-6 py-4">
@@ -265,7 +260,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import * as echarts from 'echarts'
 import { 
   LineChart,
@@ -326,13 +321,14 @@ let trendChart = null
 let distributionChart = null
 
 // Mock data
+// 模拟数据
 const mockUserBehaviors = ref([
   {
     id: 'B1001',
     userId: 'U1001',
     userName: '张三',
     userType: 'vip',
-    userAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=张三',
+    userAvatar: 'https://images.unsplash.com/photo-1695048133148-1e0e1b0b0b0b',
     behaviorType: 'browse',
     targetId: 'P1001',
     targetName: '智能手表 Pro',
@@ -348,7 +344,7 @@ const mockUserBehaviors = ref([
     userId: 'U1002',
     userName: '李四',
     userType: 'normal',
-    userAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=李四',
+    userAvatar: 'https://images.unsplash.com/photo-1695048133148-1e0e1b0b0b0c',
     behaviorType: 'search',
     targetId: null,
     targetName: '无线耳机',
@@ -364,7 +360,7 @@ const mockUserBehaviors = ref([
     userId: 'U1003',
     userName: '王五',
     userType: 'vip',
-    userAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=王五',
+    userAvatar: 'https://images.unsplash.com/photo-1695048133148-1e0e1b0b0b0d',
     behaviorType: 'add_to_cart',
     targetId: 'P1002',
     targetName: '无线耳机 Air',
@@ -380,7 +376,7 @@ const mockUserBehaviors = ref([
     userId: 'U1004',
     userName: '赵六',
     userType: 'normal',
-    userAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=赵六',
+    userAvatar: 'https://images.unsplash.com/photo-1695048133148-1e0e1b0b0b0e',
     behaviorType: 'purchase',
     targetId: 'P1003',
     targetName: '智能音箱 Mini',
@@ -396,7 +392,7 @@ const mockUserBehaviors = ref([
     userId: 'U1005',
     userName: '钱七',
     userType: 'vip',
-    userAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=钱七',
+    userAvatar: 'https://images.unsplash.com/photo-1695048133148-1e0e1b0b0b0f',
     behaviorType: 'review',
     targetId: 'P1004',
     targetName: '运动相机 4K',
@@ -523,139 +519,11 @@ const handleExportReport = () => {
   console.log('导出报表')
 }
 
-// 初始化图表
-const initCharts = () => {
-  // 销毁已存在的图表实例
-  if (trendChart) {
-    trendChart.dispose()
-  }
-  if (distributionChart) {
-    distributionChart.dispose()
-  }
-
-  // 初始化趋势图表
-  if (trendChartRef.value) {
-    trendChart = echarts.init(trendChartRef.value)
-    const trendOption = {
-      tooltip: {
-        trigger: 'axis'
-      },
-      legend: {
-        data: ['行为数', '用户数', '平均时长(分钟)']
-      },
-      xAxis: {
-        type: 'category',
-        data: behaviorTrends.value.map(item => item.date)
-      },
-      yAxis: [
-        {
-          type: 'value',
-          name: '数量'
-        },
-        {
-          type: 'value',
-          name: '时长',
-          position: 'right'
-        }
-      ],
-      series: [
-        {
-          name: '行为数',
-          type: 'line',
-          data: behaviorTrends.value.map(item => item.behaviors)
-        },
-        {
-          name: '用户数',
-          type: 'line',
-          data: behaviorTrends.value.map(item => item.users)
-        },
-        {
-          name: '平均时长(分钟)',
-          type: 'line',
-          yAxisIndex: 1,
-          data: behaviorTrends.value.map(item => item.duration)
-        }
-      ]
-    }
-    trendChart.setOption(trendOption)
-  }
-
-  // 初始化分布图表
-  if (distributionChartRef.value) {
-    distributionChart = echarts.init(distributionChartRef.value)
-    const distributionOption = {
-      tooltip: {
-        trigger: 'item'
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left'
-      },
-      series: [
-        {
-          name: '行为类型',
-          type: 'pie',
-          radius: '50%',
-          data: behaviorTypeDistribution.value.map(item => ({
-            name: item.type === 'browse' ? '浏览' : 
-                  item.type === 'search' ? '搜索' : 
-                  item.type === 'purchase' ? '购买' : '评论',
-            value: item.value
-          })),
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ]
-    }
-    distributionChart.setOption(distributionOption)
-  }
-}
-
-// 处理图片加载错误
-const handleImageError = (event) => {
-  event.target.src = 'https://via.placeholder.com/40' // 使用默认头像
-}
-
 // 生命周期钩子
 onMounted(() => {
   // 初始化数据
   console.log('用户行为分析页面已加载')
-  
-  // 初始化图表
-  nextTick(() => {
-    initCharts()
-  })
-
-  // 监听窗口大小变化，重新调整图表大小
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  // 销毁图表实例
-  if (trendChart) {
-    trendChart.dispose()
-  }
-  if (distributionChart) {
-    distributionChart.dispose()
-  }
-  // 移除事件监听
-  window.removeEventListener('resize', handleResize)
 })
-
-// 处理窗口大小变化
-const handleResize = () => {
-  if (trendChart) {
-    trendChart.resize()
-  }
-  if (distributionChart) {
-    distributionChart.resize()
-  }
-}
 </script>
 
 <style scoped>

src/assets/templates/ui-standard/AuroraView.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-blue-900 p-4 md:p-8">
+    <!-- App Bar -->
+    <div class="aurora-card bg-black/30 backdrop-blur-md p-4 mb-6 rounded-2xl border border-purple-500/20">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Sun class="w-6 h-6 text-purple-400 mr-4" />
+          <h1 class="text-xl font-bold text-white">极光设计</h1>
+        </div>
+        <div class="flex items-center">
+          <Search class="w-5 h-5 text-purple-400 mr-4" />
+          <Bell class="w-5 h-5 text-purple-400 mr-4" />
+          <User class="w-5 h-5 text-purple-400" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="aurora-color-card bg-gradient-to-r from-purple-500 to-blue-500 rounded-xl">
+              <span class="text-white font-bold">Primary</span>
+            </div>
+            <div class="aurora-color-card bg-gradient-to-r from-pink-500 to-purple-500 rounded-xl">
+              <span class="text-white font-bold">Secondary</span>
+            </div>
+            <div class="aurora-color-card bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl">
+              <span class="text-white font-bold">Accent</span>
+            </div>
+            <div class="aurora-color-card bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl">
+              <span class="text-white font-bold">Success</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold text-white">H1 Bold 34px</h1>
+            <h2 class="text-3xl font-bold text-white">H2 Bold 24px</h2>
+            <h3 class="text-2xl font-bold text-white">H3 Bold 20px</h3>
+            <p class="text-base text-gray-300">Body Regular 16px</p>
+            <p class="text-sm text-gray-400">Caption Regular 12px</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="aurora-button-primary">
+                <span>主要按钮</span>
+              </button>
+              <button class="aurora-button-secondary">
+                <span>次要按钮</span>
+              </button>
+              <button class="aurora-button-text">
+                <span>文本按钮</span>
+              </button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="aurora-button-icon">
+                <Sun class="w-5 h-5" />
+              </button>
+              <button class="aurora-button-icon">
+                <Moon class="w-5 h-5" />
+              </button>
+              <button class="aurora-button-icon">
+                <Star class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="aurora-label">文本输入</label>
+              <input type="text" class="aurora-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="aurora-label">下拉选择</label>
+              <select class="aurora-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="aurora-checkbox">
+                <input type="checkbox">
+                <span class="aurora-checkmark"></span>
+                <span>复选框</span>
+              </label>
+              <label class="aurora-radio">
+                <input type="radio" name="radio">
+                <span class="aurora-radiomark"></span>
+                <span>单选框</span>
+              </label>
+            </div>
+            <div class="aurora-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="aurora-card-item bg-black/30 backdrop-blur-md rounded-xl border border-purple-500/20">
+              <h3 class="text-lg font-bold text-white mb-2">基础卡片</h3>
+              <p class="text-gray-300">带有极光效果的卡片样式</p>
+            </div>
+            <div class="aurora-card-item bg-black/30 backdrop-blur-md rounded-xl border border-purple-500/20">
+              <h3 class="text-lg font-bold text-white mb-2">高亮卡片</h3>
+              <p class="text-gray-300">带有渐变效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">列表</h2>
+          <div class="space-y-4">
+            <div class="aurora-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-black/30 backdrop-blur-md rounded-xl flex items-center justify-center mr-4 border border-purple-500/20">
+                  <Sun class="w-5 h-5 text-purple-400" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-white">列表项标题</h4>
+                  <p class="text-sm text-gray-300">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="aurora-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-black/30 backdrop-blur-md rounded-xl flex items-center justify-center mr-4 border border-purple-500/20">
+                  <Moon class="w-5 h-5 text-purple-400" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-white">列表项标题</h4>
+                  <p class="text-sm text-gray-300">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="aurora-tabs">
+              <button class="aurora-tab active">标签1</button>
+              <button class="aurora-tab">标签2</button>
+              <button class="aurora-tab">标签3</button>
+            </div>
+            <div class="aurora-breadcrumbs">
+              <a href="#" class="aurora-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-purple-400 mx-2" />
+              <a href="#" class="aurora-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-purple-400 mx-2" />
+              <span class="aurora-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="aurora-progress">
+              <div class="aurora-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="aurora-health-bar">
+              <div class="aurora-health" style="width: 75%"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="aurora-card bg-black/30 backdrop-blur-md p-6 rounded-2xl border border-purple-500/20">
+          <h2 class="text-lg font-bold text-white mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="aurora-alert">
+              <span>这是一条提示消息</span>
+              <button class="aurora-button-text">关闭</button>
+            </div>
+            <div class="aurora-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="aurora-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="aurora-bottom-nav">
+          <button class="aurora-bottom-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="aurora-bottom-nav-item">
+            <Sun class="w-5 h-5" />
+            <span>极光</span>
+          </button>
+          <button class="aurora-bottom-nav-item">
+            <Moon class="w-5 h-5" />
+            <span>夜晚</span>
+          </button>
+          <button class="aurora-bottom-nav-item">
+            <Settings class="w-5 h-5" />
+            <span>设置</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Search, 
+  Bell, 
+  User, 
+  ChevronRight,
+  Sun,
+  Moon,
+  Star,
+  CheckCircle,
+  XCircle,
+  Home,
+  Settings
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.aurora-card {
+  @apply border border-purple-500/20;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+}
+
+.aurora-button-primary {
+  @apply px-6 py-3 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-bold
+         rounded-xl hover:from-purple-600 hover:to-blue-600
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl;
+}
+
+.aurora-button-secondary {
+  @apply px-6 py-3 bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold
+         rounded-xl hover:from-pink-600 hover:to-purple-600
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl;
+}
+
+.aurora-button-text {
+  @apply px-4 py-2 text-purple-400 font-bold
+         hover:text-purple-300;
+}
+
+.aurora-button-icon {
+  @apply p-3 bg-black/30 backdrop-blur-md text-purple-400
+         rounded-xl hover:bg-black/40
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl border border-purple-500/20;
+}
+
+.aurora-input {
+  @apply w-full px-4 py-3 bg-black/30 backdrop-blur-md text-white
+         border border-purple-500/20 rounded-xl
+         focus:outline-none focus:border-purple-500
+         placeholder-gray-400;
+}
+
+.aurora-label {
+  @apply block text-sm font-bold text-white mb-2;
+}
+
+.aurora-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.aurora-checkbox input {
+  @apply w-6 h-6 bg-black/30 backdrop-blur-md border-2 border-purple-500/20
+         rounded-lg checked:bg-gradient-to-r checked:from-purple-500 checked:to-blue-500;
+}
+
+.aurora-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.aurora-radio input {
+  @apply w-6 h-6 bg-black/30 backdrop-blur-md border-2 border-purple-500/20
+         rounded-full checked:bg-gradient-to-r checked:from-purple-500 checked:to-blue-500;
+}
+
+.aurora-switch {
+  @apply relative inline-flex items-center cursor-pointer;
+}
+
+.aurora-switch input {
+  @apply sr-only;
+}
+
+.aurora-switch label {
+  @apply w-16 h-8 bg-black/30 backdrop-blur-md rounded-full
+         after:content-[''] after:absolute after:top-0 after:left-0
+         after:bg-white after:border-2 after:border-purple-500/20
+         after:h-6 after:w-6 after:rounded-full
+         after:transition-all after:duration-200
+         peer-checked:after:translate-x-8
+         peer-checked:bg-gradient-to-r peer-checked:from-purple-500 peer-checked:to-blue-500;
+}
+
+.aurora-tabs {
+  @apply flex space-x-2 p-1 bg-black/30 backdrop-blur-md rounded-xl;
+}
+
+.aurora-tab {
+  @apply px-6 py-2 text-purple-400 font-bold rounded-lg;
+}
+
+.aurora-tab.active {
+  @apply bg-gradient-to-r from-purple-500 to-blue-500 text-white;
+}
+
+.aurora-progress {
+  @apply h-4 bg-black/30 backdrop-blur-md rounded-full;
+}
+
+.aurora-progress-bar {
+  @apply h-full bg-gradient-to-r from-purple-500 to-blue-500 rounded-full;
+  transition: width 0.3s ease;
+}
+
+.aurora-health-bar {
+  @apply h-4 bg-black/30 backdrop-blur-md rounded-full;
+}
+
+.aurora-health {
+  @apply h-full bg-gradient-to-r from-pink-500 to-red-500 rounded-full;
+  transition: width 0.3s ease;
+}
+
+.aurora-alert {
+  @apply flex items-center justify-between p-4
+         bg-black/30 backdrop-blur-md border border-purple-500/20
+         text-white rounded-xl;
+}
+
+.aurora-alert.success {
+  @apply border-emerald-500/20 text-emerald-400
+         bg-emerald-900/30;
+}
+
+.aurora-alert.error {
+  @apply border-red-500/20 text-red-400
+         bg-red-900/30;
+}
+
+.aurora-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0
+         bg-black/30 backdrop-blur-md border-t border-purple-500/20
+         flex justify-around p-2;
+}
+
+.aurora-bottom-nav-item {
+  @apply flex flex-col items-center p-2 text-purple-400
+         hover:text-purple-300;
+}
+
+.aurora-bottom-nav-item.active {
+  @apply text-white;
+}
+
+.aurora-color-card {
+  @apply p-4 flex items-center justify-center font-bold;
+}
+
+.aurora-list-item {
+  @apply p-4 bg-black/30 backdrop-blur-md rounded-xl
+         hover:bg-black/40 transition-colors duration-200
+         border border-purple-500/20;
+}
+
+.aurora-breadcrumb {
+  @apply text-purple-400 hover:text-purple-300;
+}
+
+.aurora-breadcrumb.active {
+  @apply text-white font-bold;
+}
+</style> 

src/assets/templates/ui-standard/BrutalismView.vue

@@ -0,0 +1,618 @@
+<template>
+  <div class="min-h-screen bg-yellow-100 p-4 md:p-8">
+    <!-- Navigation Bar -->
+    <div class="brutal-nav-bar p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-black mr-4" />
+          <h1 class="text-xl font-bold text-black">Brutalism</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="brutal-button-icon">
+            <Search class="w-5 h-5 text-black" />
+          </button>
+          <button class="brutal-button-icon">
+            <Bell class="w-5 h-5 text-black" />
+          </button>
+          <button class="brutal-button-icon">
+            <User class="w-5 h-5 text-black" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="brutal-color-card p-4">
+              <span class="text-black">Primary</span>
+            </div>
+            <div class="brutal-color-card p-4">
+              <span class="text-black">Light</span>
+            </div>
+            <div class="brutal-color-card p-4">
+              <span class="text-black">Dark</span>
+            </div>
+            <div class="brutal-color-card p-4">
+              <span class="text-black">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold text-black">Large Title</h1>
+            <h2 class="text-3xl font-bold text-black">Title 1</h2>
+            <h3 class="text-2xl font-bold text-black">Title 2</h3>
+            <h4 class="text-xl font-bold text-black">Title 3</h4>
+            <p class="text-base text-black">Body</p>
+            <p class="text-sm text-black">Caption</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="brutal-button">主要按钮</button>
+              <button class="brutal-button-outline">轮廓按钮</button>
+              <button class="brutal-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="brutal-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="brutal-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="brutal-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="brutal-label">文本输入</label>
+              <input type="text" class="brutal-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="brutal-label">下拉选择</label>
+              <select class="brutal-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="brutal-checkbox">
+                <input type="checkbox">
+                <span class="brutal-checkmark"></span>
+                复选框
+              </label>
+              <label class="brutal-radio">
+                <input type="radio" name="radio">
+                <span class="brutal-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="brutal-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="brutal-card-elevated p-4">
+              <h3 class="text-lg font-bold mb-2 text-black">基础卡片</h3>
+              <p class="text-black">带有粗野风格的基础卡片样式</p>
+            </div>
+            <div class="brutal-card-inset p-4">
+              <h3 class="text-lg font-bold mb-2 text-black">内嵌卡片</h3>
+              <p class="text-black">带有内嵌效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">列表</h2>
+          <div class="divide-y divide-black">
+            <div class="brutal-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 brutal-avatar flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-black" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-black">列表项标题</h4>
+                  <p class="text-sm text-black">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="brutal-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 brutal-avatar flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-black" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-black">列表项标题</h4>
+                  <p class="text-sm text-black">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="brutal-tabs">
+              <button class="brutal-tab active">标签1</button>
+              <button class="brutal-tab">标签2</button>
+              <button class="brutal-tab">标签3</button>
+            </div>
+            <div class="brutal-breadcrumbs">
+              <a href="#" class="brutal-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-black mx-2" />
+              <a href="#" class="brutal-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-black mx-2" />
+              <span class="brutal-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="brutal-progress">
+              <div class="brutal-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="brutal-progress-circular">
+              <div class="brutal-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="brutal-card p-6">
+          <h2 class="text-lg font-bold text-black mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="brutal-alert">
+              <span class="text-black">这是一条提示消息</span>
+              <button class="brutal-button-text">关闭</button>
+            </div>
+            <div class="brutal-alert success">
+              <CheckCircle class="w-5 h-5 mr-2 text-black" />
+              <span class="text-black">成功提示</span>
+            </div>
+            <div class="brutal-alert error">
+              <XCircle class="w-5 h-5 mr-2 text-black" />
+              <span class="text-black">错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="brutal-nav-bar">
+          <button class="brutal-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="brutal-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="brutal-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="brutal-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu,
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style>
+/* Brutalism 样式 */
+.brutal-nav-bar {
+  background: white;
+  border: 4px solid black;
+  box-shadow: 8px 8px 0 black;
+}
+
+.brutal-card {
+  background: white;
+  border: 4px solid black;
+  box-shadow: 8px 8px 0 black;
+}
+
+.brutal-color-card {
+  background: white;
+  border: 4px solid black;
+  box-shadow: 4px 4px 0 black;
+}
+
+.brutal-button {
+  background: black;
+  color: white;
+  padding: 12px 24px;
+  border: 4px solid black;
+  font-weight: bold;
+  box-shadow: 4px 4px 0 black;
+  transition: all 0.2s ease;
+}
+
+.brutal-button:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 black;
+}
+
+.brutal-button-outline {
+  background: white;
+  color: black;
+  padding: 12px 24px;
+  border: 4px solid black;
+  font-weight: bold;
+  box-shadow: 4px 4px 0 black;
+  transition: all 0.2s ease;
+}
+
+.brutal-button-outline:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 black;
+}
+
+.brutal-button-text {
+  color: black;
+  padding: 12px 24px;
+  font-weight: bold;
+  transition: all 0.2s ease;
+}
+
+.brutal-button-text:hover {
+  text-decoration: underline;
+}
+
+.brutal-button-icon {
+  width: 48px;
+  height: 48px;
+  border: 4px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  box-shadow: 4px 4px 0 black;
+  transition: all 0.2s ease;
+}
+
+.brutal-button-icon:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 black;
+}
+
+.brutal-input {
+  width: 100%;
+  padding: 12px;
+  border: 4px solid black;
+  background: white;
+  box-shadow: 4px 4px 0 black;
+  transition: all 0.2s ease;
+}
+
+.brutal-input:focus {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 black;
+}
+
+.brutal-input::placeholder {
+  color: black;
+  opacity: 0.5;
+}
+
+.brutal-label {
+  display: block;
+  color: black;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.brutal-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.brutal-checkmark {
+  width: 24px;
+  height: 24px;
+  border: 4px solid black;
+  background: white;
+  box-shadow: 4px 4px 0 black;
+  margin-right: 8px;
+  position: relative;
+}
+
+.brutal-checkbox input:checked + .brutal-checkmark {
+  background: black;
+}
+
+.brutal-checkmark:after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 12px;
+  border: 2px solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 4px;
+  left: 8px;
+  opacity: 0;
+}
+
+.brutal-checkbox input:checked + .brutal-checkmark:after {
+  opacity: 1;
+}
+
+.brutal-radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.brutal-radiomark {
+  width: 24px;
+  height: 24px;
+  border: 4px solid black;
+  background: white;
+  box-shadow: 4px 4px 0 black;
+  margin-right: 8px;
+  position: relative;
+}
+
+.brutal-radio input:checked + .brutal-radiomark {
+  background: black;
+}
+
+.brutal-radiomark:after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: white;
+  border-radius: 50%;
+  top: 6px;
+  left: 6px;
+  opacity: 0;
+}
+
+.brutal-radio input:checked + .brutal-radiomark:after {
+  opacity: 1;
+}
+
+.brutal-switch {
+  display: flex;
+  align-items: center;
+}
+
+.brutal-switch input {
+  display: none;
+}
+
+.brutal-switch label {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  background: white;
+  border: 4px solid black;
+  box-shadow: 4px 4px 0 black;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.brutal-switch label:after {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: black;
+  top: 3px;
+  left: 3px;
+  transition: all 0.2s ease;
+}
+
+.brutal-switch input:checked + label {
+  background: black;
+}
+
+.brutal-switch input:checked + label:after {
+  background: white;
+  left: 33px;
+}
+
+.brutal-tabs {
+  display: flex;
+  border: 4px solid black;
+  background: white;
+  box-shadow: 4px 4px 0 black;
+  overflow: hidden;
+}
+
+.brutal-tab {
+  padding: 12px 16px;
+  color: black;
+  font-weight: bold;
+  position: relative;
+  flex: 1;
+  text-align: center;
+}
+
+.brutal-tab.active {
+  background: black;
+  color: white;
+}
+
+.brutal-breadcrumbs {
+  display: flex;
+  align-items: center;
+}
+
+.brutal-breadcrumb {
+  color: black;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.brutal-breadcrumb.active {
+  color: black;
+  font-weight: bold;
+}
+
+.brutal-progress {
+  height: 8px;
+  background: white;
+  border: 4px solid black;
+  box-shadow: 4px 4px 0 black;
+  overflow: hidden;
+}
+
+.brutal-progress-bar {
+  height: 100%;
+  background: black;
+}
+
+.brutal-progress-circular {
+  width: 48px;
+  height: 48px;
+  position: relative;
+}
+
+.brutal-progress-circle {
+  width: 100%;
+  height: 100%;
+  border: 4px solid black;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.brutal-alert {
+  background: white;
+  color: black;
+  padding: 12px 16px;
+  border: 4px solid black;
+  box-shadow: 4px 4px 0 black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.brutal-alert.success {
+  background: white;
+  border-color: black;
+}
+
+.brutal-alert.error {
+  background: white;
+  border-color: black;
+}
+
+.brutal-nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  border-top: 4px solid black;
+  display: flex;
+  justify-content: space-around;
+  padding: 12px 0;
+}
+
+.brutal-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: black;
+  padding: 8px;
+  font-weight: bold;
+}
+
+.brutal-nav-item.active {
+  color: black;
+  font-weight: bold;
+}
+
+.brutal-nav-item span {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.brutal-avatar {
+  background: white;
+  border: 4px solid black;
+  box-shadow: 4px 4px 0 black;
+}
+
+.brutal-card-elevated {
+  background: white;
+  border: 4px solid black;
+  box-shadow: 4px 4px 0 black;
+}
+
+.brutal-card-inset {
+  background: white;
+  border: 4px solid black;
+  box-shadow: inset 4px 4px 0 black;
+}
+</style> 

src/assets/templates/ui-standard/CyberpunkView.vue

@@ -0,0 +1,419 @@
+<template>
+  <div class="min-h-screen bg-black p-4 md:p-8">
+    <!-- App Bar -->
+    <div class="cyberpunk-app-bar bg-gray-900 p-4 mb-6 border-b-2 border-pink-500">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-pink-500 mr-4" />
+          <h1 class="text-xl font-bold text-pink-500">Cyberpunk</h1>
+        </div>
+        <div class="flex items-center">
+          <Search class="w-5 h-5 text-pink-500 mr-4" />
+          <Bell class="w-5 h-5 text-pink-500 mr-4" />
+          <User class="w-5 h-5 text-pink-500" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="cyberpunk-color-card bg-pink-500 p-4">
+              <span class="text-black font-bold">Primary</span>
+            </div>
+            <div class="cyberpunk-color-card bg-blue-500 p-4">
+              <span class="text-black font-bold">Accent</span>
+            </div>
+            <div class="cyberpunk-color-card bg-purple-500 p-4">
+              <span class="text-black font-bold">Secondary</span>
+            </div>
+            <div class="cyberpunk-color-card bg-gray-900 p-4">
+              <span class="text-pink-500 font-bold">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold text-pink-500">H1 Bold 34px</h1>
+            <h2 class="text-3xl font-bold text-blue-500">H2 Bold 24px</h2>
+            <h3 class="text-2xl font-bold text-purple-500">H3 Bold 20px</h3>
+            <p class="text-base text-white">Body Regular 16px</p>
+            <p class="text-sm text-gray-400">Caption Regular 12px</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="cyberpunk-button">主要按钮</button>
+              <button class="cyberpunk-button-outline">轮廓按钮</button>
+              <button class="cyberpunk-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="cyberpunk-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="cyberpunk-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="cyberpunk-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="cyberpunk-label">文本输入</label>
+              <input type="text" class="cyberpunk-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="cyberpunk-label">下拉选择</label>
+              <select class="cyberpunk-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="cyberpunk-checkbox">
+                <input type="checkbox">
+                <span class="cyberpunk-checkmark"></span>
+                复选框
+              </label>
+              <label class="cyberpunk-radio">
+                <input type="radio" name="radio">
+                <span class="cyberpunk-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="cyberpunk-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="cyberpunk-card-elevated p-4">
+              <h3 class="text-lg font-bold text-pink-500 mb-2">基础卡片</h3>
+              <p class="text-white">带有霓虹效果的卡片样式</p>
+            </div>
+            <div class="cyberpunk-card-outlined p-4">
+              <h3 class="text-lg font-bold text-blue-500 mb-2">轮廓卡片</h3>
+              <p class="text-white">带有边框的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">列表</h2>
+          <div class="divide-y divide-pink-500/20">
+            <div class="cyberpunk-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-pink-500/20 rounded-full flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-pink-500" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-pink-500">列表项标题</h4>
+                  <p class="text-sm text-white">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="cyberpunk-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-blue-500/20 rounded-full flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-blue-500" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-blue-500">列表项标题</h4>
+                  <p class="text-sm text-white">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="cyberpunk-tabs">
+              <button class="cyberpunk-tab active">标签1</button>
+              <button class="cyberpunk-tab">标签2</button>
+              <button class="cyberpunk-tab">标签3</button>
+            </div>
+            <div class="cyberpunk-breadcrumbs">
+              <a href="#" class="cyberpunk-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-pink-500 mx-2" />
+              <a href="#" class="cyberpunk-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-pink-500 mx-2" />
+              <span class="cyberpunk-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="cyberpunk-progress">
+              <div class="cyberpunk-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="cyberpunk-progress-circular">
+              <div class="cyberpunk-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="cyberpunk-card p-6">
+          <h2 class="text-lg font-bold text-pink-500 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="cyberpunk-alert">
+              <span>这是一条提示消息</span>
+              <button class="cyberpunk-button-text">关闭</button>
+            </div>
+            <div class="cyberpunk-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="cyberpunk-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="cyberpunk-bottom-nav">
+          <button class="cyberpunk-bottom-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="cyberpunk-bottom-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="cyberpunk-bottom-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="cyberpunk-bottom-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu, 
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.cyberpunk-app-bar {
+  @apply bg-gray-900 p-4 mb-6 border-b-2 border-pink-500;
+}
+
+.cyberpunk-card {
+  @apply bg-gray-900 rounded-lg border-2 border-pink-500/20 shadow-[0_0_10px_rgba(236,72,153,0.3)];
+}
+
+.cyberpunk-card-elevated {
+  @apply bg-gray-900 rounded-lg border-2 border-pink-500 shadow-[0_0_15px_rgba(236,72,153,0.5)];
+}
+
+.cyberpunk-card-outlined {
+  @apply bg-gray-900 rounded-lg border-2 border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)];
+}
+
+.cyberpunk-button {
+  @apply bg-pink-500 text-black px-4 py-2 rounded-lg font-bold
+         hover:bg-pink-600 active:bg-pink-700
+         border-2 border-pink-500
+         shadow-[0_0_10px_rgba(236,72,153,0.5)];
+}
+
+.cyberpunk-button-outline {
+  @apply bg-transparent text-pink-500 px-4 py-2 rounded-lg font-bold
+         border-2 border-pink-500
+         hover:bg-pink-500/20 active:bg-pink-500/30
+         shadow-[0_0_10px_rgba(236,72,153,0.3)];
+}
+
+.cyberpunk-button-text {
+  @apply bg-transparent text-pink-500 px-4 py-2 rounded-lg font-bold
+         hover:bg-pink-500/20 active:bg-pink-500/30;
+}
+
+.cyberpunk-button-icon {
+  @apply flex items-center justify-center p-2 rounded-lg
+         bg-pink-500/20 text-pink-500
+         hover:bg-pink-500/30 active:bg-pink-500/40
+         border-2 border-pink-500/50
+         shadow-[0_0_10px_rgba(236,72,153,0.3)];
+}
+
+.cyberpunk-input {
+  @apply w-full px-4 py-2 rounded-lg bg-gray-800 border-2 border-pink-500/50
+         text-white placeholder-gray-500
+         focus:outline-none focus:border-pink-500
+         shadow-[0_0_10px_rgba(236,72,153,0.3)];
+}
+
+.cyberpunk-label {
+  @apply block text-sm font-bold text-pink-500 mb-1;
+}
+
+.cyberpunk-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.cyberpunk-checkbox input {
+  @apply w-5 h-5 rounded border-2 border-pink-500
+         checked:bg-pink-500 checked:border-pink-500
+         focus:outline-none focus:ring-2 focus:ring-pink-500/50;
+}
+
+.cyberpunk-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.cyberpunk-radio input {
+  @apply w-5 h-5 rounded-full border-2 border-pink-500
+         checked:bg-pink-500 checked:border-pink-500
+         focus:outline-none focus:ring-2 focus:ring-pink-500/50;
+}
+
+.cyberpunk-switch {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.cyberpunk-switch input {
+  @apply w-12 h-6 rounded-full bg-gray-800 border-2 border-pink-500
+         checked:bg-pink-500 checked:border-pink-500
+         focus:outline-none focus:ring-2 focus:ring-pink-500/50;
+}
+
+.cyberpunk-list-item {
+  @apply flex items-center space-x-4 p-4 rounded-lg bg-gray-800/50
+         border border-pink-500/20;
+}
+
+.cyberpunk-tabs {
+  @apply flex space-x-2 p-1 rounded-lg bg-gray-800 border border-pink-500/20;
+}
+
+.cyberpunk-tab {
+  @apply px-4 py-2 rounded-md text-gray-400 font-bold
+         hover:text-pink-500 active:text-pink-600;
+}
+
+.cyberpunk-tab.active {
+  @apply bg-pink-500 text-black;
+}
+
+.cyberpunk-breadcrumbs {
+  @apply flex items-center text-sm;
+}
+
+.cyberpunk-breadcrumb {
+  @apply text-gray-400 hover:text-pink-500 font-bold;
+}
+
+.cyberpunk-breadcrumb.active {
+  @apply text-pink-500;
+}
+
+.cyberpunk-progress {
+  @apply w-full h-4 rounded-full bg-gray-800 border border-pink-500/20
+         overflow-hidden;
+}
+
+.cyberpunk-progress-bar {
+  @apply h-full bg-pink-500 rounded-full
+         shadow-[0_0_10px_rgba(236,72,153,0.5)];
+}
+
+.cyberpunk-progress-circular {
+  @apply w-16 h-16 rounded-full bg-gray-800 border border-pink-500/20
+         flex items-center justify-center;
+}
+
+.cyberpunk-progress-circle {
+  @apply w-12 h-12 rounded-full border-4 border-pink-500
+         border-t-transparent;
+  transform: rotate(calc(var(--progress) * 3.6deg));
+}
+
+.cyberpunk-alert {
+  @apply flex items-center justify-between p-4 rounded-lg bg-gray-800
+         border-2 border-pink-500 text-white font-bold;
+}
+
+.cyberpunk-alert.success {
+  @apply border-blue-500 text-blue-500;
+}
+
+.cyberpunk-alert.error {
+  @apply border-red-500 text-red-500;
+}
+
+.cyberpunk-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-gray-900 border-t-2 border-pink-500
+         flex justify-around p-2;
+}
+
+.cyberpunk-bottom-nav-item {
+  @apply flex flex-col items-center p-2 text-gray-400 font-bold
+         hover:text-pink-500;
+}
+
+.cyberpunk-bottom-nav-item.active {
+  @apply text-pink-500;
+}
+
+.cyberpunk-color-card {
+  @apply p-4 rounded-lg border-2 border-pink-500/50
+         flex items-center justify-center font-bold
+         shadow-[0_0_10px_rgba(236,72,153,0.3)];
+}
+</style> 

src/assets/templates/ui-standard/DarkModeView.vue

@@ -0,0 +1,609 @@
+<template>
+  <div class="min-h-screen bg-gray-900 p-4 md:p-8">
+    <!-- Navigation Bar -->
+    <div class="dark-nav-bar p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-gray-200 mr-4" />
+          <h1 class="text-xl font-medium text-gray-200">Dark Mode</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="dark-button-icon">
+            <Search class="w-5 h-5 text-gray-200" />
+          </button>
+          <button class="dark-button-icon">
+            <Bell class="w-5 h-5 text-gray-200" />
+          </button>
+          <button class="dark-button-icon">
+            <User class="w-5 h-5 text-gray-200" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="dark-color-card p-4">
+              <span class="text-gray-200">Primary</span>
+            </div>
+            <div class="dark-color-card p-4">
+              <span class="text-gray-200">Light</span>
+            </div>
+            <div class="dark-color-card p-4">
+              <span class="text-gray-200">Dark</span>
+            </div>
+            <div class="dark-color-card p-4">
+              <span class="text-gray-200">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-medium text-gray-200">Large Title</h1>
+            <h2 class="text-3xl font-medium text-gray-200">Title 1</h2>
+            <h3 class="text-2xl font-medium text-gray-200">Title 2</h3>
+            <h4 class="text-xl font-medium text-gray-200">Title 3</h4>
+            <p class="text-base text-gray-400">Body</p>
+            <p class="text-sm text-gray-500">Caption</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="dark-button">主要按钮</button>
+              <button class="dark-button-outline">轮廓按钮</button>
+              <button class="dark-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="dark-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="dark-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="dark-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="dark-label">文本输入</label>
+              <input type="text" class="dark-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="dark-label">下拉选择</label>
+              <select class="dark-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="dark-checkbox">
+                <input type="checkbox">
+                <span class="dark-checkmark"></span>
+                复选框
+              </label>
+              <label class="dark-radio">
+                <input type="radio" name="radio">
+                <span class="dark-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="dark-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="dark-card-elevated p-4">
+              <h3 class="text-lg font-medium mb-2 text-gray-200">基础卡片</h3>
+              <p class="text-gray-400">带有暗色风格的基础卡片样式</p>
+            </div>
+            <div class="dark-card-inset p-4">
+              <h3 class="text-lg font-medium mb-2 text-gray-200">内嵌卡片</h3>
+              <p class="text-gray-400">带有内嵌效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">列表</h2>
+          <div class="divide-y divide-gray-700">
+            <div class="dark-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 dark-avatar flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-gray-200" />
+                </div>
+                <div>
+                  <h4 class="text-base font-medium text-gray-200">列表项标题</h4>
+                  <p class="text-sm text-gray-400">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="dark-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 dark-avatar flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-gray-200" />
+                </div>
+                <div>
+                  <h4 class="text-base font-medium text-gray-200">列表项标题</h4>
+                  <p class="text-sm text-gray-400">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="dark-tabs">
+              <button class="dark-tab active">标签1</button>
+              <button class="dark-tab">标签2</button>
+              <button class="dark-tab">标签3</button>
+            </div>
+            <div class="dark-breadcrumbs">
+              <a href="#" class="dark-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-gray-500 mx-2" />
+              <a href="#" class="dark-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-gray-500 mx-2" />
+              <span class="dark-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="dark-progress">
+              <div class="dark-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="dark-progress-circular">
+              <div class="dark-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="dark-card p-6">
+          <h2 class="text-lg font-medium text-gray-200 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="dark-alert">
+              <span class="text-gray-200">这是一条提示消息</span>
+              <button class="dark-button-text">关闭</button>
+            </div>
+            <div class="dark-alert success">
+              <CheckCircle class="w-5 h-5 mr-2 text-gray-200" />
+              <span class="text-gray-200">成功提示</span>
+            </div>
+            <div class="dark-alert error">
+              <XCircle class="w-5 h-5 mr-2 text-gray-200" />
+              <span class="text-gray-200">错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="dark-nav-bar">
+          <button class="dark-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="dark-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="dark-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="dark-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu,
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style>
+/* Dark Mode 样式 */
+.dark-nav-bar {
+  background: #1f2937;
+  border-bottom: 1px solid #374151;
+}
+
+.dark-card {
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+}
+
+.dark-color-card {
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+}
+
+.dark-button {
+  background: #374151;
+  color: #f3f4f6;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.dark-button:hover {
+  background: #4b5563;
+}
+
+.dark-button-outline {
+  background: transparent;
+  color: #f3f4f6;
+  padding: 12px 24px;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.dark-button-outline:hover {
+  background: #374151;
+}
+
+.dark-button-text {
+  color: #f3f4f6;
+  padding: 12px 24px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.dark-button-text:hover {
+  color: #d1d5db;
+}
+
+.dark-button-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #374151;
+  transition: all 0.2s ease;
+}
+
+.dark-button-icon:hover {
+  background: #4b5563;
+}
+
+.dark-input {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  background: #1f2937;
+  border: 1px solid #374151;
+  color: #f3f4f6;
+  transition: all 0.2s ease;
+}
+
+.dark-input:focus {
+  border-color: #4b5563;
+  outline: none;
+}
+
+.dark-input::placeholder {
+  color: #6b7280;
+}
+
+.dark-label {
+  display: block;
+  color: #f3f4f6;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.dark-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.dark-checkmark {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  background: #1f2937;
+  border: 1px solid #374151;
+  margin-right: 8px;
+  position: relative;
+}
+
+.dark-checkbox input:checked + .dark-checkmark {
+  background: #374151;
+  border-color: #4b5563;
+}
+
+.dark-checkmark:after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 12px;
+  border: 2px solid #f3f4f6;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 2px;
+  left: 6px;
+  opacity: 0;
+}
+
+.dark-checkbox input:checked + .dark-checkmark:after {
+  opacity: 1;
+}
+
+.dark-radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.dark-radiomark {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #1f2937;
+  border: 1px solid #374151;
+  margin-right: 8px;
+  position: relative;
+}
+
+.dark-radio input:checked + .dark-radiomark {
+  border-color: #4b5563;
+}
+
+.dark-radiomark:after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #f3f4f6;
+  border-radius: 50%;
+  top: 4px;
+  left: 4px;
+  opacity: 0;
+}
+
+.dark-radio input:checked + .dark-radiomark:after {
+  opacity: 1;
+}
+
+.dark-switch {
+  display: flex;
+  align-items: center;
+}
+
+.dark-switch input {
+  display: none;
+}
+
+.dark-switch label {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+  background: #374151;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.dark-switch label:after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: #1f2937;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: all 0.2s ease;
+}
+
+.dark-switch input:checked + label {
+  background: #4b5563;
+}
+
+.dark-switch input:checked + label:after {
+  left: 28px;
+}
+
+.dark-tabs {
+  display: flex;
+  border-radius: 8px;
+  background: #374151;
+  overflow: hidden;
+}
+
+.dark-tab {
+  padding: 12px 16px;
+  color: #f3f4f6;
+  font-weight: 500;
+  position: relative;
+  flex: 1;
+  text-align: center;
+}
+
+.dark-tab.active {
+  background: #1f2937;
+  color: #f3f4f6;
+}
+
+.dark-breadcrumbs {
+  display: flex;
+  align-items: center;
+}
+
+.dark-breadcrumb {
+  color: #f3f4f6;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.dark-breadcrumb.active {
+  color: #f3f4f6;
+  font-weight: 500;
+}
+
+.dark-progress {
+  height: 4px;
+  background: #374151;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.dark-progress-bar {
+  height: 100%;
+  background: #4b5563;
+  border-radius: 2px;
+}
+
+.dark-progress-circular {
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.dark-progress-circle {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #374151;
+  border-radius: 50%;
+  border-top-color: #4b5563;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.dark-alert {
+  background: #1f2937;
+  color: #f3f4f6;
+  padding: 12px 16px;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dark-alert.success {
+  background: #1f2937;
+  border-color: #374151;
+}
+
+.dark-alert.error {
+  background: #1f2937;
+  border-color: #374151;
+}
+
+.dark-nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #1f2937;
+  border-top: 1px solid #374151;
+  display: flex;
+  justify-content: space-around;
+  padding: 12px 0;
+}
+
+.dark-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #f3f4f6;
+  padding: 8px;
+  font-weight: 500;
+}
+
+.dark-nav-item.active {
+  color: #f3f4f6;
+  font-weight: 500;
+}
+
+.dark-nav-item span {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.dark-avatar {
+  background: #374151;
+  border-radius: 8px;
+}
+
+.dark-card-elevated {
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+}
+
+.dark-card-inset {
+  background: #374151;
+  border-radius: 8px;
+}
+</style> 

src/assets/templates/ui-standard/FluentDesignView.vue

@@ -0,0 +1,567 @@
+<template>
+  <div class="min-h-screen bg-gray-50 p-4 md:p-8">
+    <!-- Command Bar -->
+    <div class="fluent-command-bar bg-white shadow-sm p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-gray-600 mr-4" />
+          <h1 class="text-xl font-semibold text-gray-900">Fluent Design</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="fluent-button-icon">
+            <Search class="w-5 h-5 text-gray-600" />
+          </button>
+          <button class="fluent-button-icon">
+            <Bell class="w-5 h-5 text-gray-600" />
+          </button>
+          <button class="fluent-button-icon">
+            <User class="w-5 h-5 text-gray-600" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="fluent-color-card bg-blue-500 p-4 rounded-lg">
+              <span class="text-white">Primary</span>
+            </div>
+            <div class="fluent-color-card bg-blue-100 p-4 rounded-lg">
+              <span class="text-blue-900">Light</span>
+            </div>
+            <div class="fluent-color-card bg-blue-700 p-4 rounded-lg">
+              <span class="text-white">Dark</span>
+            </div>
+            <div class="fluent-color-card bg-gray-100 p-4 rounded-lg">
+              <span class="text-gray-900">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-semibold">Large Title</h1>
+            <h2 class="text-3xl font-semibold">Title 1</h2>
+            <h3 class="text-2xl font-semibold">Title 2</h3>
+            <h4 class="text-xl font-semibold">Title 3</h4>
+            <p class="text-base">Body</p>
+            <p class="text-sm">Caption</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="fluent-button">主要按钮</button>
+              <button class="fluent-button-outline">轮廓按钮</button>
+              <button class="fluent-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="fluent-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="fluent-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="fluent-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="fluent-label">文本输入</label>
+              <input type="text" class="fluent-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="fluent-label">下拉选择</label>
+              <select class="fluent-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="fluent-checkbox">
+                <input type="checkbox">
+                <span class="fluent-checkmark"></span>
+                复选框
+              </label>
+              <label class="fluent-radio">
+                <input type="radio" name="radio">
+                <span class="fluent-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="fluent-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="fluent-card-elevated p-4">
+              <h3 class="text-lg font-semibold mb-2">基础卡片</h3>
+              <p class="text-gray-600">带有阴影的基础卡片样式</p>
+            </div>
+            <div class="fluent-card-outlined p-4">
+              <h3 class="text-lg font-semibold mb-2">轮廓卡片</h3>
+              <p class="text-gray-600">带有边框的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">列表</h2>
+          <div class="divide-y divide-gray-200">
+            <div class="fluent-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-blue-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-semibold">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="fluent-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-semibold">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="fluent-tabs">
+              <button class="fluent-tab active">标签1</button>
+              <button class="fluent-tab">标签2</button>
+              <button class="fluent-tab">标签3</button>
+            </div>
+            <div class="fluent-breadcrumbs">
+              <a href="#" class="fluent-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <a href="#" class="fluent-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <span class="fluent-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="fluent-progress">
+              <div class="fluent-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="fluent-progress-circular">
+              <div class="fluent-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="fluent-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="fluent-alert">
+              <span>这是一条提示消息</span>
+              <button class="fluent-button-text">关闭</button>
+            </div>
+            <div class="fluent-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="fluent-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="fluent-nav-bar">
+          <button class="fluent-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="fluent-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="fluent-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="fluent-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu,
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style>
+/* Fluent Design 样式 */
+.fluent-command-bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.fluent-card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.fluent-button {
+  background: #0078D4;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.fluent-button:hover {
+  background: #106EBE;
+}
+
+.fluent-button-outline {
+  border: 1px solid #0078D4;
+  color: #0078D4;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.fluent-button-text {
+  color: #0078D4;
+  padding: 8px 16px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.fluent-button-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.fluent-button-icon:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.fluent-input {
+  width: 100%;
+  padding: 8px 0;
+  border-bottom: 1px solid #E1E1E1;
+  transition: all 0.2s ease;
+}
+
+.fluent-input:focus {
+  border-bottom-color: #0078D4;
+}
+
+.fluent-label {
+  display: block;
+  color: #605E5C;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.fluent-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.fluent-checkmark {
+  width: 18px;
+  height: 18px;
+  border: 2px solid #605E5C;
+  border-radius: 2px;
+  margin-right: 8px;
+  position: relative;
+}
+
+.fluent-checkbox input:checked + .fluent-checkmark {
+  background: #0078D4;
+  border-color: #0078D4;
+}
+
+.fluent-checkmark:after {
+  content: '';
+  position: absolute;
+  width: 5px;
+  height: 10px;
+  border: 2px solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 1px;
+  left: 6px;
+  opacity: 0;
+}
+
+.fluent-checkbox input:checked + .fluent-checkmark:after {
+  opacity: 1;
+}
+
+.fluent-radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.fluent-radiomark {
+  width: 18px;
+  height: 18px;
+  border: 2px solid #605E5C;
+  border-radius: 50%;
+  margin-right: 8px;
+  position: relative;
+}
+
+.fluent-radio input:checked + .fluent-radiomark {
+  border-color: #0078D4;
+}
+
+.fluent-radiomark:after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #0078D4;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  opacity: 0;
+}
+
+.fluent-radio input:checked + .fluent-radiomark:after {
+  opacity: 1;
+}
+
+.fluent-switch {
+  display: flex;
+  align-items: center;
+}
+
+.fluent-switch input {
+  display: none;
+}
+
+.fluent-switch label {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background: #C8C6C4;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.fluent-switch label:after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: all 0.2s ease;
+}
+
+.fluent-switch input:checked + label {
+  background: #0078D4;
+}
+
+.fluent-switch input:checked + label:after {
+  left: 22px;
+}
+
+.fluent-tabs {
+  display: flex;
+  border-bottom: 1px solid #E1E1E1;
+}
+
+.fluent-tab {
+  padding: 12px 16px;
+  color: #605E5C;
+  font-weight: 500;
+  position: relative;
+}
+
+.fluent-tab.active {
+  color: #0078D4;
+}
+
+.fluent-tab.active:after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #0078D4;
+}
+
+.fluent-breadcrumbs {
+  display: flex;
+  align-items: center;
+}
+
+.fluent-breadcrumb {
+  color: #0078D4;
+  text-decoration: none;
+}
+
+.fluent-breadcrumb.active {
+  color: #605E5C;
+}
+
+.fluent-progress {
+  height: 4px;
+  background: #E1E1E1;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.fluent-progress-bar {
+  height: 100%;
+  background: #0078D4;
+  border-radius: 2px;
+}
+
+.fluent-progress-circular {
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.fluent-progress-circle {
+  width: 100%;
+  height: 100%;
+  border: 3px solid #E1E1E1;
+  border-radius: 50%;
+  border-top-color: #0078D4;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.fluent-alert {
+  background: #F3F2F1;
+  color: #323130;
+  padding: 12px 16px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fluent-alert.success {
+  background: #DFF6DD;
+  color: #107C10;
+}
+
+.fluent-alert.error {
+  background: #FDE7E9;
+  color: #A4262C;
+}
+
+.fluent-nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  display: flex;
+  justify-content: space-around;
+  padding: 8px 0;
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.fluent-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #605E5C;
+  padding: 8px;
+}
+
+.fluent-nav-item.active {
+  color: #0078D4;
+}
+
+.fluent-nav-item span {
+  font-size: 12px;
+  margin-top: 4px;
+}
+</style> 

src/assets/templates/ui-standard/GlassmorphismView.vue

@@ -0,0 +1,623 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 p-4 md:p-8">
+    <!-- Navigation Bar -->
+    <div class="glass-nav-bar p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-white mr-4" />
+          <h1 class="text-xl font-semibold text-white">Glassmorphism</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="glass-button-icon">
+            <Search class="w-5 h-5 text-white" />
+          </button>
+          <button class="glass-button-icon">
+            <Bell class="w-5 h-5 text-white" />
+          </button>
+          <button class="glass-button-icon">
+            <User class="w-5 h-5 text-white" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="glass-color-card p-4">
+              <span class="text-white">Primary</span>
+            </div>
+            <div class="glass-color-card p-4">
+              <span class="text-white">Light</span>
+            </div>
+            <div class="glass-color-card p-4">
+              <span class="text-white">Dark</span>
+            </div>
+            <div class="glass-color-card p-4">
+              <span class="text-white">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-semibold text-white">Large Title</h1>
+            <h2 class="text-3xl font-semibold text-white">Title 1</h2>
+            <h3 class="text-2xl font-semibold text-white">Title 2</h3>
+            <h4 class="text-xl font-semibold text-white">Title 3</h4>
+            <p class="text-base text-white/80">Body</p>
+            <p class="text-sm text-white/60">Caption</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="glass-button">主要按钮</button>
+              <button class="glass-button-outline">轮廓按钮</button>
+              <button class="glass-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="glass-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="glass-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="glass-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="glass-label">文本输入</label>
+              <input type="text" class="glass-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="glass-label">下拉选择</label>
+              <select class="glass-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="glass-checkbox">
+                <input type="checkbox">
+                <span class="glass-checkmark"></span>
+                复选框
+              </label>
+              <label class="glass-radio">
+                <input type="radio" name="radio">
+                <span class="glass-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="glass-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="glass-card-elevated p-4">
+              <h3 class="text-lg font-semibold mb-2 text-white">基础卡片</h3>
+              <p class="text-white/80">带有玻璃效果的基础卡片样式</p>
+            </div>
+            <div class="glass-card-inset p-4">
+              <h3 class="text-lg font-semibold mb-2 text-white">内嵌卡片</h3>
+              <p class="text-white/80">带有内嵌效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">列表</h2>
+          <div class="divide-y divide-white/20">
+            <div class="glass-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 glass-avatar flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <h4 class="text-base font-semibold text-white">列表项标题</h4>
+                  <p class="text-sm text-white/80">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="glass-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 glass-avatar flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <h4 class="text-base font-semibold text-white">列表项标题</h4>
+                  <p class="text-sm text-white/80">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="glass-tabs">
+              <button class="glass-tab active">标签1</button>
+              <button class="glass-tab">标签2</button>
+              <button class="glass-tab">标签3</button>
+            </div>
+            <div class="glass-breadcrumbs">
+              <a href="#" class="glass-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-white/60 mx-2" />
+              <a href="#" class="glass-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-white/60 mx-2" />
+              <span class="glass-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="glass-progress">
+              <div class="glass-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="glass-progress-circular">
+              <div class="glass-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="glass-card p-6">
+          <h2 class="text-lg font-semibold text-white mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="glass-alert">
+              <span class="text-white">这是一条提示消息</span>
+              <button class="glass-button-text">关闭</button>
+            </div>
+            <div class="glass-alert success">
+              <CheckCircle class="w-5 h-5 mr-2 text-white" />
+              <span class="text-white">成功提示</span>
+            </div>
+            <div class="glass-alert error">
+              <XCircle class="w-5 h-5 mr-2 text-white" />
+              <span class="text-white">错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="glass-nav-bar">
+          <button class="glass-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="glass-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="glass-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="glass-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu,
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style>
+/* Glassmorphism 样式 */
+.glass-nav-bar {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.glass-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.glass-color-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.glass-button {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-weight: 500;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.2s ease;
+}
+
+.glass-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.glass-button-outline {
+  background: transparent;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-weight: 500;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.2s ease;
+}
+
+.glass-button-outline:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.glass-button-text {
+  color: white;
+  padding: 12px 24px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.glass-button-text:hover {
+  opacity: 0.8;
+}
+
+.glass-button-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.2s ease;
+}
+
+.glass-button-icon:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.glass-input {
+  width: 100%;
+  padding: 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  transition: all 0.2s ease;
+}
+
+.glass-input:focus {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.glass-input::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.glass-label {
+  display: block;
+  color: white;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.glass-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.glass-checkmark {
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin-right: 8px;
+  position: relative;
+}
+
+.glass-checkbox input:checked + .glass-checkmark {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.glass-checkmark:after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 12px;
+  border: 2px solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 4px;
+  left: 8px;
+  opacity: 0;
+}
+
+.glass-checkbox input:checked + .glass-checkmark:after {
+  opacity: 1;
+}
+
+.glass-radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.glass-radiomark {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin-right: 8px;
+  position: relative;
+}
+
+.glass-radio input:checked + .glass-radiomark {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.glass-radiomark:after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: white;
+  border-radius: 50%;
+  top: 6px;
+  left: 6px;
+  opacity: 0;
+}
+
+.glass-radio input:checked + .glass-radiomark:after {
+  opacity: 1;
+}
+
+.glass-switch {
+  display: flex;
+  align-items: center;
+}
+
+.glass-switch input {
+  display: none;
+}
+
+.glass-switch label {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 15px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.glass-switch label:after {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: white;
+  border-radius: 50%;
+  top: 3px;
+  left: 3px;
+  transition: all 0.2s ease;
+}
+
+.glass-switch input:checked + label {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.glass-switch input:checked + label:after {
+  left: 33px;
+}
+
+.glass-tabs {
+  display: flex;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  overflow: hidden;
+}
+
+.glass-tab {
+  padding: 12px 16px;
+  color: white;
+  font-weight: 500;
+  position: relative;
+  flex: 1;
+  text-align: center;
+}
+
+.glass-tab.active {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.glass-breadcrumbs {
+  display: flex;
+  align-items: center;
+}
+
+.glass-breadcrumb {
+  color: white;
+  text-decoration: none;
+}
+
+.glass-breadcrumb.active {
+  color: white;
+  font-weight: 500;
+}
+
+.glass-progress {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.glass-progress-bar {
+  height: 100%;
+  background: white;
+  border-radius: 4px;
+}
+
+.glass-progress-circular {
+  width: 48px;
+  height: 48px;
+  position: relative;
+}
+
+.glass-progress-circle {
+  width: 100%;
+  height: 100%;
+  border: 4px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  border-top-color: white;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.glass-alert {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.glass-alert.success {
+  background: rgba(34, 197, 94, 0.1);
+  border-color: rgba(34, 197, 94, 0.2);
+}
+
+.glass-alert.error {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+.glass-nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  justify-content: space-around;
+  padding: 12px 0;
+}
+
+.glass-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: white;
+  padding: 8px;
+}
+
+.glass-nav-item.active {
+  color: white;
+  font-weight: 500;
+}
+
+.glass-nav-item span {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.glass-avatar {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.glass-card-elevated {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.glass-card-inset {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+</style> 

src/assets/templates/ui-standard/GradientView.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="gradient-container min-h-screen">
+    <!-- 顶部导航栏 -->
+    <div class="gradient-nav p-4">
+      <div class="container mx-auto flex justify-between items-center">
+        <h1 class="text-2xl font-bold text-white">渐变设计</h1>
+        <div class="flex space-x-4">
+          <button class="gradient-btn">首页</button>
+          <button class="gradient-btn">组件</button>
+          <button class="gradient-btn">文档</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-8">
+      <div class="grid grid-cols-3 gap-8">
+        <!-- 左侧栏：颜色系统 -->
+        <div class="gradient-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-white">渐变系统</h2>
+          <div class="space-y-4">
+            <div class="gradient-swatch bg-gradient-to-r from-rose-500 to-orange-500 h-12 rounded"></div>
+            <div class="gradient-swatch bg-gradient-to-r from-violet-500 to-fuchsia-500 h-12 rounded"></div>
+            <div class="gradient-swatch bg-gradient-to-r from-cyan-500 to-blue-500 h-12 rounded"></div>
+            <div class="gradient-swatch bg-gradient-to-r from-emerald-500 to-teal-500 h-12 rounded"></div>
+          </div>
+        </div>
+
+        <!-- 中间栏：组件展示 -->
+        <div class="gradient-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-white">组件展示</h2>
+          <div class="space-y-6">
+            <!-- 按钮 -->
+            <div class="space-y-2">
+              <button class="gradient-btn w-full">主要按钮</button>
+              <button class="gradient-btn-secondary w-full">次要按钮</button>
+            </div>
+            
+            <!-- 输入框 -->
+            <div class="space-y-2">
+              <input type="text" class="gradient-input" placeholder="输入文本">
+              <textarea class="gradient-input" placeholder="多行文本"></textarea>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧栏：渐变效果 -->
+        <div class="gradient-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-white">渐变效果</h2>
+          <div class="space-y-4">
+            <div class="gradient-effect bg-gradient-to-r from-rose-500 via-fuchsia-500 to-indigo-500"></div>
+            <div class="gradient-animation"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Palette, Droplet, Layers } from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.gradient-container {
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+}
+
+.gradient-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.gradient-btn {
+  background: linear-gradient(45deg, #ec4899, #8b5cf6);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 8px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.gradient-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: 0.5s;
+}
+
+.gradient-btn:hover::before {
+  left: 100%;
+}
+
+.gradient-btn-secondary {
+  background: transparent;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+
+.gradient-input {
+  width: 100%;
+  padding: 0.75rem;
+  background: rgba(255,255,255,0.1);
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.gradient-input:focus {
+  outline: none;
+  border-color: #ec4899;
+  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2);
+}
+
+.gradient-effect {
+  width: 100%;
+  height: 100px;
+  border-radius: 8px;
+  animation: gradientShift 5s ease infinite;
+}
+
+.gradient-animation {
+  width: 100%;
+  height: 100px;
+  background: linear-gradient(90deg, 
+    #ec4899 0%, 
+    #f472b6 25%, 
+    #8b5cf6 50%, 
+    #a78bfa 75%, 
+    #ec4899 100%
+  );
+  background-size: 200% 100%;
+  border-radius: 8px;
+  animation: gradientMove 3s linear infinite;
+}
+
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes gradientMove {
+  0% {
+    background-position: 0% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+</style> 

src/assets/templates/ui-standard/HolographicView.vue

@@ -0,0 +1,860 @@
+<template>
+  <div class="holographic-container min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
+    <!-- 顶部导航栏 -->
+    <div class="holographic-nav p-4">
+      <div class="container mx-auto flex justify-between items-center">
+        <h1 class="text-2xl font-bold text-white">全息设计系统</h1>
+        <div class="flex space-x-4">
+          <button class="holographic-btn">首页</button>
+          <button class="holographic-btn">组件</button>
+          <button class="holographic-btn">文档</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-8">
+      <!-- 设计原则 -->
+      <div class="holographic-card p-6 mb-8">
+        <h2 class="text-xl font-bold mb-4 text-white">设计原则</h2>
+        <div class="grid grid-cols-3 gap-4">
+          <div class="p-4 border border-white/20 rounded-lg">
+            <Sparkles class="w-8 h-8 mb-2 text-white" />
+            <h3 class="text-lg font-semibold text-white mb-2">透明与光效</h3>
+            <p class="text-white/80">利用半透明效果和光效创造未来科技感</p>
+          </div>
+          <div class="p-4 border border-white/20 rounded-lg">
+            <Zap class="w-8 h-8 mb-2 text-white" />
+            <h3 class="text-lg font-semibold text-white mb-2">动态交互</h3>
+            <p class="text-white/80">流畅的动画和交互效果增强用户体验</p>
+          </div>
+          <div class="p-4 border border-white/20 rounded-lg">
+            <Stars class="w-8 h-8 mb-2 text-white" />
+            <h3 class="text-lg font-semibold text-white mb-2">空间层次</h3>
+            <p class="text-white/80">通过深度和层次感创造立体空间效果</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-8">
+        <!-- 左侧栏：颜色系统 -->
+        <div class="holographic-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-white">颜色系统</h2>
+          <div class="space-y-4">
+            <div class="color-swatch bg-gradient-to-r from-purple-500 to-pink-500 h-12 rounded"></div>
+            <div class="color-swatch bg-gradient-to-r from-blue-500 to-cyan-500 h-12 rounded"></div>
+            <div class="color-swatch bg-gradient-to-r from-indigo-500 to-purple-500 h-12 rounded"></div>
+            <div class="color-swatch bg-gradient-to-r from-pink-500 to-rose-500 h-12 rounded"></div>
+          </div>
+        </div>
+
+        <!-- 中间栏：组件展示 -->
+        <div class="holographic-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-white">组件展示</h2>
+          <div class="space-y-6">
+            <!-- 按钮 -->
+            <div class="space-y-2">
+              <button class="holographic-btn w-full">主要按钮</button>
+              <button class="holographic-btn-secondary w-full">次要按钮</button>
+              <button class="holographic-btn-icon w-full flex items-center justify-center">
+                <Sparkles class="w-4 h-4 mr-2" />
+                图标按钮
+              </button>
+            </div>
+            
+            <!-- 输入框 -->
+            <div class="space-y-2">
+              <input type="text" class="holographic-input" placeholder="输入文本">
+              <textarea class="holographic-input" placeholder="多行文本"></textarea>
+              <div class="holographic-select">
+                <select class="w-full">
+                  <option>选项 1</option>
+                  <option>选项 2</option>
+                  <option>选项 3</option>
+                </select>
+              </div>
+            </div>
+
+            <!-- 开关和复选框 -->
+            <div class="space-y-2">
+              <label class="holographic-switch">
+                <input type="checkbox">
+                <span class="slider"></span>
+              </label>
+              <div class="holographic-checkbox">
+                <input type="checkbox" id="checkbox1">
+                <label for="checkbox1">复选框</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧栏：特效展示 -->
+        <div class="holographic-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-white">特效展示</h2>
+          <div class="space-y-4">
+            <div class="holographic-effect"></div>
+            <div class="holographic-grid"></div>
+            <div class="holographic-card-small p-4">
+              <h3 class="text-lg font-semibold text-white mb-2">卡片悬浮效果</h3>
+              <p class="text-white/80">带有光效和透明度的卡片设计</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 应用场景展示 -->
+      <div class="holographic-card p-6 mt-8">
+        <h2 class="text-xl font-bold mb-4 text-white">应用场景</h2>
+        <div class="grid grid-cols-2 gap-6">
+          <div class="holographic-scene p-6">
+            <h3 class="text-lg font-semibold text-white mb-4">数据可视化</h3>
+            <div class="holographic-chart"></div>
+            <div class="mt-4 flex justify-between">
+              <div class="holographic-stat">
+                <div class="text-2xl font-bold text-white">1,234</div>
+                <div class="text-white/60">今日访问</div>
+              </div>
+              <div class="holographic-stat">
+                <div class="text-2xl font-bold text-white">89%</div>
+                <div class="text-white/60">转化率</div>
+              </div>
+            </div>
+          </div>
+          <div class="holographic-scene p-6">
+            <h3 class="text-lg font-semibold text-white mb-4">控制面板</h3>
+            <div class="holographic-controls grid grid-cols-2 gap-4">
+              <button class="holographic-btn-small">控制 1</button>
+              <button class="holographic-btn-small">控制 2</button>
+              <button class="holographic-btn-small">控制 3</button>
+              <button class="holographic-btn-small">控制 4</button>
+            </div>
+            <div class="mt-4">
+              <div class="holographic-progress">
+                <div class="progress-bar" style="width: 75%"></div>
+              </div>
+              <div class="text-white/60 mt-2">系统负载: 75%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 通知系统 -->
+      <div class="holographic-card p-6 mt-8">
+        <h2 class="text-xl font-bold mb-4 text-white">通知系统</h2>
+        <div class="space-y-4">
+          <div class="holographic-notification">
+            <div class="flex items-start">
+              <div class="notification-icon">
+                <Sparkles class="w-5 h-5" />
+              </div>
+              <div class="ml-3">
+                <h4 class="text-white font-semibold">系统更新</h4>
+                <p class="text-white/60">新版本已发布，包含多项性能优化</p>
+              </div>
+            </div>
+          </div>
+          <div class="holographic-notification">
+            <div class="flex items-start">
+              <div class="notification-icon warning">
+                <Zap class="w-5 h-5" />
+              </div>
+              <div class="ml-3">
+                <h4 class="text-white font-semibold">警告</h4>
+                <p class="text-white/60">系统资源使用率过高</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 导航菜单 -->
+      <div class="holographic-card p-6 mt-8">
+        <h2 class="text-xl font-bold mb-4 text-white">导航菜单</h2>
+        <div class="grid grid-cols-4 gap-4">
+          <div class="holographic-nav-item">
+            <div class="nav-icon">
+              <Sparkles class="w-6 h-6" />
+            </div>
+            <span class="text-white/80">首页</span>
+          </div>
+          <div class="holographic-nav-item">
+            <div class="nav-icon">
+              <Zap class="w-6 h-6" />
+            </div>
+            <span class="text-white/80">分析</span>
+          </div>
+          <div class="holographic-nav-item">
+            <div class="nav-icon">
+              <Stars class="w-6 h-6" />
+            </div>
+            <span class="text-white/80">设置</span>
+          </div>
+          <div class="holographic-nav-item">
+            <div class="nav-icon">
+              <ChevronDown class="w-6 h-6" />
+            </div>
+            <span class="text-white/80">更多</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 模态框展示 -->
+      <div class="holographic-card p-6 mt-8">
+        <h2 class="text-xl font-bold mb-4 text-white">模态框</h2>
+        <button class="holographic-btn" @click="showModal = true">打开模态框</button>
+        <div v-if="showModal" class="holographic-modal">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="text-xl font-bold text-white">系统提示</h3>
+              <button class="modal-close" @click="showModal = false">
+                <X class="w-5 h-5" />
+              </button>
+            </div>
+            <div class="modal-body">
+              <p class="text-white/80">这是一个全息风格的模态框示例，展示了系统的提示信息。</p>
+            </div>
+            <div class="modal-footer">
+              <button class="holographic-btn-secondary" @click="showModal = false">取消</button>
+              <button class="holographic-btn" @click="showModal = false">确认</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 标签页展示 -->
+      <div class="holographic-card p-6 mt-8">
+        <h2 class="text-xl font-bold mb-4 text-white">标签页</h2>
+        <div class="holographic-tabs">
+          <div class="tabs-header">
+            <button 
+              v-for="(tab, index) in tabs" 
+              :key="index"
+              :class="['tab-button', { active: currentTab === index }]"
+              @click="currentTab = index"
+            >
+              {{ tab.title }}
+            </button>
+          </div>
+          <div class="tabs-content">
+            <div v-for="(tab, index) in tabs" 
+              :key="index"
+              :class="['tab-panel', { active: currentTab === index }]"
+            >
+              {{ tab.content }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载状态 -->
+      <div class="holographic-card p-6 mt-8">
+        <h2 class="text-xl font-bold mb-4 text-white">加载状态</h2>
+        <div class="grid grid-cols-3 gap-4">
+          <div class="holographic-loader">
+            <div class="loader-circle"></div>
+            <span class="text-white/80">加载中...</span>
+          </div>
+          <div class="holographic-skeleton">
+            <div class="skeleton-header"></div>
+            <div class="skeleton-content"></div>
+            <div class="skeleton-content"></div>
+          </div>
+          <div class="holographic-spinner">
+            <div class="spinner"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Sparkles, Zap, Stars, ChevronDown, X } from 'lucide-vue-next'
+
+const showModal = ref(false)
+const currentTab = ref(0)
+const tabs = ref([
+  { title: '标签一', content: '这是第一个标签页的内容' },
+  { title: '标签二', content: '这是第二个标签页的内容' },
+  { title: '标签三', content: '这是第三个标签页的内容' }
+])
+</script>
+
+<style scoped>
+.holographic-container {
+  background-image: 
+    linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%);
+  background-size: 60px 60px;
+}
+
+.holographic-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.holographic-btn {
+  background: linear-gradient(45deg, #6366f1, #8b5cf6);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 8px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.holographic-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: 0.5s;
+}
+
+.holographic-btn:hover::before {
+  left: 100%;
+}
+
+.holographic-btn-secondary {
+  background: transparent;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+
+.holographic-input {
+  width: 100%;
+  padding: 0.75rem;
+  background: rgba(255,255,255,0.1);
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.holographic-input:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.holographic-effect {
+  width: 100%;
+  height: 100px;
+  background: linear-gradient(45deg, #6366f1, #8b5cf6);
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.holographic-effect::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
+  transform: rotate(45deg);
+  animation: shine 3s infinite;
+}
+
+.holographic-grid {
+  width: 100%;
+  height: 100px;
+  background: 
+    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px) 0 0 / 20px 20px,
+    linear-gradient(0deg, rgba(255,255,255,0.1) 1px, transparent 1px) 0 0 / 20px 20px;
+  border-radius: 8px;
+  animation: gridMove 20s linear infinite;
+}
+
+@keyframes shine {
+  0% {
+    transform: translateX(-100%) rotate(45deg);
+  }
+  100% {
+    transform: translateX(100%) rotate(45deg);
+  }
+}
+
+@keyframes gridMove {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 40px 40px;
+  }
+}
+
+.holographic-switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.holographic-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background: linear-gradient(45deg, #6366f1, #8b5cf6);
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+
+.holographic-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.holographic-checkbox input[type="checkbox"] {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  position: relative;
+}
+
+.holographic-checkbox input[type="checkbox"]:checked {
+  background: linear-gradient(45deg, #6366f1, #8b5cf6);
+  border-color: transparent;
+}
+
+.holographic-checkbox input[type="checkbox"]:checked::after {
+  content: "✓";
+  position: absolute;
+  color: white;
+  font-size: 14px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.holographic-select {
+  position: relative;
+}
+
+.holographic-select select {
+  appearance: none;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 0.75rem;
+  color: white;
+  cursor: pointer;
+}
+
+.holographic-select::after {
+  content: "";
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid white;
+}
+
+.holographic-card-small {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.holographic-card-small:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.holographic-scene {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+}
+
+.holographic-chart {
+  height: 200px;
+  background: linear-gradient(45deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.holographic-chart::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px) 0 0 / 20px 20px,
+    linear-gradient(0deg, rgba(255,255,255,0.1) 1px, transparent 1px) 0 0 / 20px 20px;
+  animation: gridMove 20s linear infinite;
+}
+
+.holographic-btn-small {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  padding: 0.5rem 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  transition: all 0.3s ease;
+}
+
+.holographic-btn-small:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+}
+
+.holographic-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background: linear-gradient(45deg, #6366f1, #8b5cf6);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 8px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+
+.holographic-btn-icon:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.holographic-stat {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 1rem;
+  border-radius: 8px;
+  text-align: center;
+  min-width: 100px;
+}
+
+.holographic-progress {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #6366f1, #8b5cf6);
+  border-radius: 2px;
+  animation: progress 2s ease-in-out;
+}
+
+.holographic-notification {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 1rem;
+  border-radius: 8px;
+  border-left: 3px solid #6366f1;
+  transition: all 0.3s ease;
+}
+
+.holographic-notification:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateX(4px);
+}
+
+.notification-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(99, 102, 241, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.notification-icon.warning {
+  background: rgba(234, 179, 8, 0.2);
+}
+
+.holographic-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.holographic-nav-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.nav-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes progress {
+  from {
+    width: 0;
+  }
+  to {
+    width: 75%;
+  }
+}
+
+.holographic-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  width: 90%;
+  max-width: 500px;
+  padding: 1.5rem;
+  animation: modalSlide 0.3s ease-out;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.modal-close {
+  background: transparent;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.modal-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.holographic-tabs {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.tabs-header {
+  display: flex;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tab-button {
+  padding: 1rem 1.5rem;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.tab-button.active {
+  color: white;
+}
+
+.tab-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #6366f1, #8b5cf6);
+}
+
+.tabs-content {
+  padding: 1.5rem;
+}
+
+.tab-panel {
+  display: none;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.tab-panel.active {
+  display: block;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.holographic-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+}
+
+.loader-circle {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.holographic-skeleton {
+  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+}
+
+.skeleton-header {
+  height: 24px;
+  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
+  background-size: 200% 100%;
+  animation: skeleton 1.5s infinite;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}
+
+.skeleton-content {
+  height: 16px;
+  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
+  background-size: 200% 100%;
+  animation: skeleton 1.5s infinite;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+}
+
+.holographic-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid transparent;
+  border-top-color: #6366f1;
+  border-right-color: #8b5cf6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes modalSlide {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes skeleton {
+  to {
+    background-position: 200% 0;
+  }
+}
+</style> 

src/assets/templates/ui-standard/IOSDesignView.vue

@@ -0,0 +1,562 @@
+<template>
+  <div class="min-h-screen bg-gray-50 p-4 md:p-8">
+    <!-- Navigation Bar -->
+    <div class="ios-nav-bar bg-white shadow-sm p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <h1 class="text-xl font-semibold text-gray-900">iOS 设计</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="ios-button-icon">
+            <Search class="w-5 h-5 text-gray-600" />
+          </button>
+          <button class="ios-button-icon">
+            <Bell class="w-5 h-5 text-gray-600" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="ios-color-card bg-blue-500 p-4 rounded-lg">
+              <span class="text-white">Primary</span>
+            </div>
+            <div class="ios-color-card bg-blue-100 p-4 rounded-lg">
+              <span class="text-blue-900">Light</span>
+            </div>
+            <div class="ios-color-card bg-blue-700 p-4 rounded-lg">
+              <span class="text-white">Dark</span>
+            </div>
+            <div class="ios-color-card bg-gray-100 p-4 rounded-lg">
+              <span class="text-gray-900">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold">Large Title</h1>
+            <h2 class="text-3xl font-bold">Title 1</h2>
+            <h3 class="text-2xl font-semibold">Title 2</h3>
+            <h4 class="text-xl font-semibold">Title 3</h4>
+            <p class="text-base">Body</p>
+            <p class="text-sm">Caption</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="ios-button">主要按钮</button>
+              <button class="ios-button-outline">轮廓按钮</button>
+              <button class="ios-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="ios-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="ios-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="ios-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="ios-label">文本输入</label>
+              <input type="text" class="ios-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="ios-label">下拉选择</label>
+              <select class="ios-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="ios-checkbox">
+                <input type="checkbox">
+                <span class="ios-checkmark"></span>
+                复选框
+              </label>
+              <label class="ios-radio">
+                <input type="radio" name="radio">
+                <span class="ios-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="ios-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="ios-card-elevated p-4">
+              <h3 class="text-lg font-semibold mb-2">基础卡片</h3>
+              <p class="text-gray-600">带有阴影的基础卡片样式</p>
+            </div>
+            <div class="ios-card-outlined p-4">
+              <h3 class="text-lg font-semibold mb-2">轮廓卡片</h3>
+              <p class="text-gray-600">带有边框的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">列表</h2>
+          <div class="divide-y divide-gray-200">
+            <div class="ios-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-blue-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-semibold">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="ios-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-semibold">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="ios-tabs">
+              <button class="ios-tab active">标签1</button>
+              <button class="ios-tab">标签2</button>
+              <button class="ios-tab">标签3</button>
+            </div>
+            <div class="ios-breadcrumbs">
+              <a href="#" class="ios-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <a href="#" class="ios-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <span class="ios-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="ios-progress">
+              <div class="ios-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="ios-progress-circular">
+              <div class="ios-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="ios-card p-6">
+          <h2 class="text-lg font-semibold text-gray-900 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="ios-alert">
+              <span>这是一条提示消息</span>
+              <button class="ios-button-text">关闭</button>
+            </div>
+            <div class="ios-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="ios-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Tab Bar -->
+        <div class="ios-tab-bar">
+          <button class="ios-tab-bar-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="ios-tab-bar-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="ios-tab-bar-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="ios-tab-bar-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style>
+/* iOS 样式 */
+.ios-nav-bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.ios-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.ios-button {
+  background: #007AFF;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.ios-button:hover {
+  background: #0066CC;
+}
+
+.ios-button-outline {
+  border: 1px solid #007AFF;
+  color: #007AFF;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.ios-button-text {
+  color: #007AFF;
+  padding: 8px 16px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.ios-button-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.ios-button-icon:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.ios-input {
+  width: 100%;
+  padding: 8px 0;
+  border-bottom: 1px solid #E5E5EA;
+  transition: all 0.2s ease;
+}
+
+.ios-input:focus {
+  border-bottom-color: #007AFF;
+}
+
+.ios-label {
+  display: block;
+  color: #8E8E93;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.ios-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ios-checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #8E8E93;
+  border-radius: 4px;
+  margin-right: 8px;
+  position: relative;
+}
+
+.ios-checkbox input:checked + .ios-checkmark {
+  background: #007AFF;
+  border-color: #007AFF;
+}
+
+.ios-checkmark:after {
+  content: '';
+  position: absolute;
+  width: 5px;
+  height: 10px;
+  border: 2px solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 1px;
+  left: 6px;
+  opacity: 0;
+}
+
+.ios-checkbox input:checked + .ios-checkmark:after {
+  opacity: 1;
+}
+
+.ios-radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ios-radiomark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #8E8E93;
+  border-radius: 50%;
+  margin-right: 8px;
+  position: relative;
+}
+
+.ios-radio input:checked + .ios-radiomark {
+  border-color: #007AFF;
+}
+
+.ios-radiomark:after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #007AFF;
+  border-radius: 50%;
+  top: 3px;
+  left: 3px;
+  opacity: 0;
+}
+
+.ios-radio input:checked + .ios-radiomark:after {
+  opacity: 1;
+}
+
+.ios-switch {
+  display: flex;
+  align-items: center;
+}
+
+.ios-switch input {
+  display: none;
+}
+
+.ios-switch label {
+  position: relative;
+  display: inline-block;
+  width: 51px;
+  height: 31px;
+  background: #E5E5EA;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.ios-switch label:after {
+  content: '';
+  position: absolute;
+  width: 27px;
+  height: 27px;
+  background: white;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: all 0.2s ease;
+}
+
+.ios-switch input:checked + label {
+  background: #34C759;
+}
+
+.ios-switch input:checked + label:after {
+  left: 22px;
+}
+
+.ios-tabs {
+  display: flex;
+  border-bottom: 1px solid #E5E5EA;
+}
+
+.ios-tab {
+  padding: 12px 16px;
+  color: #8E8E93;
+  font-weight: 500;
+  position: relative;
+}
+
+.ios-tab.active {
+  color: #007AFF;
+}
+
+.ios-tab.active:after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #007AFF;
+}
+
+.ios-breadcrumbs {
+  display: flex;
+  align-items: center;
+}
+
+.ios-breadcrumb {
+  color: #007AFF;
+  text-decoration: none;
+}
+
+.ios-breadcrumb.active {
+  color: #8E8E93;
+}
+
+.ios-progress {
+  height: 4px;
+  background: #E5E5EA;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.ios-progress-bar {
+  height: 100%;
+  background: #007AFF;
+  border-radius: 2px;
+}
+
+.ios-progress-circular {
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.ios-progress-circle {
+  width: 100%;
+  height: 100%;
+  border: 3px solid #E5E5EA;
+  border-radius: 50%;
+  border-top-color: #007AFF;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ios-alert {
+  background: #F2F2F7;
+  color: #000000;
+  padding: 12px 16px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ios-alert.success {
+  background: #E8F5E9;
+  color: #2E7D32;
+}
+
+.ios-alert.error {
+  background: #FFEBEE;
+  color: #C62828;
+}
+
+.ios-tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  display: flex;
+  justify-content: space-around;
+  padding: 8px 0;
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.ios-tab-bar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #8E8E93;
+  padding: 8px;
+}
+
+.ios-tab-bar-item.active {
+  color: #007AFF;
+}
+
+.ios-tab-bar-item span {
+  font-size: 12px;
+  margin-top: 4px;
+}
+</style> 

src/assets/templates/ui-standard/MaterialView.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="min-h-screen bg-gray-50 p-4 md:p-8">
+    <!-- App Bar -->
+    <div class="material-app-bar bg-white shadow-md p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-gray-600 mr-4" />
+          <h1 class="text-xl font-medium text-gray-900">Material Design</h1>
+        </div>
+        <div class="flex items-center">
+          <Search class="w-5 h-5 text-gray-600 mr-4" />
+          <Bell class="w-5 h-5 text-gray-600 mr-4" />
+          <User class="w-5 h-5 text-gray-600" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="material-color-card bg-blue-500 p-4 rounded-lg">
+              <span class="text-white">Primary</span>
+            </div>
+            <div class="material-color-card bg-blue-100 p-4 rounded-lg">
+              <span class="text-blue-900">Light</span>
+            </div>
+            <div class="material-color-card bg-blue-700 p-4 rounded-lg">
+              <span class="text-white">Dark</span>
+            </div>
+            <div class="material-color-card bg-gray-100 p-4 rounded-lg">
+              <span class="text-gray-900">Surface</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-light">H1 Light 34px</h1>
+            <h2 class="text-3xl font-light">H2 Light 24px</h2>
+            <h3 class="text-2xl font-regular">H3 Regular 20px</h3>
+            <p class="text-base font-regular">Body Regular 16px</p>
+            <p class="text-sm font-regular">Caption Regular 12px</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="material-button">主要按钮</button>
+              <button class="material-button-outline">轮廓按钮</button>
+              <button class="material-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="material-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="material-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="material-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="material-label">文本输入</label>
+              <input type="text" class="material-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="material-label">下拉选择</label>
+              <select class="material-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="material-checkbox">
+                <input type="checkbox">
+                <span class="material-checkmark"></span>
+                复选框
+              </label>
+              <label class="material-radio">
+                <input type="radio" name="radio">
+                <span class="material-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="material-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="material-card-elevated p-4">
+              <h3 class="text-lg font-medium mb-2">基础卡片</h3>
+              <p class="text-gray-600">带有阴影的基础卡片样式</p>
+            </div>
+            <div class="material-card-outlined p-4">
+              <h3 class="text-lg font-medium mb-2">轮廓卡片</h3>
+              <p class="text-gray-600">带有边框的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">列表</h2>
+          <div class="divide-y divide-gray-200">
+            <div class="material-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-blue-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-medium">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="material-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-medium">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="material-tabs">
+              <button class="material-tab active">标签1</button>
+              <button class="material-tab">标签2</button>
+              <button class="material-tab">标签3</button>
+            </div>
+            <div class="material-breadcrumbs">
+              <a href="#" class="material-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <a href="#" class="material-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <span class="material-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="material-progress">
+              <div class="material-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="material-progress-circular">
+              <div class="material-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Snackbar -->
+        <div class="material-card p-6">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="material-snackbar">
+              <span>这是一条提示消息</span>
+              <button class="material-button-text">关闭</button>
+            </div>
+            <div class="material-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="material-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="material-bottom-nav">
+          <button class="material-bottom-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="material-bottom-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="material-bottom-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="material-bottom-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu, 
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.material-app-bar {
+  @apply bg-white shadow-md p-4 mb-6;
+}
+
+.material-card {
+  @apply bg-white rounded-lg shadow-sm border border-gray-200;
+}
+
+.material-card-elevated {
+  @apply bg-white rounded-lg shadow-md;
+}
+
+.material-card-outlined {
+  @apply bg-white rounded-lg border border-gray-200;
+}
+
+.material-button {
+  @apply bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md 
+         hover:bg-blue-600 active:shadow-inner active:translate-y-0.5 
+         border border-blue-600;
+}
+
+.material-button-outline {
+  @apply bg-transparent text-blue-600 px-4 py-2 rounded-lg 
+         border-2 border-blue-500 shadow-md
+         hover:bg-blue-100 active:shadow-inner active:translate-y-0.5;
+}
+
+.material-button-text {
+  @apply bg-transparent text-blue-600 px-4 py-2 rounded-lg
+         hover:bg-blue-100 active:bg-blue-200;
+}
+
+.material-button-icon {
+  @apply flex items-center justify-center p-2 rounded-lg
+         bg-blue-100 text-blue-600 shadow-md
+         hover:bg-blue-200 active:shadow-inner active:translate-y-0.5
+         border border-blue-200;
+}
+
+.material-input {
+  @apply w-full px-4 py-2 rounded-lg bg-gray-50 border-2 border-gray-300
+         focus:outline-none focus:border-blue-500 shadow-inner;
+}
+
+.material-label {
+  @apply block text-sm font-medium text-gray-700 mb-1;
+}
+
+.material-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.material-checkbox input {
+  @apply w-5 h-5 rounded border-2 border-blue-500
+         checked:bg-blue-500 checked:border-blue-500
+         focus:outline-none focus:ring-2 focus:ring-blue-200;
+}
+
+.material-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.material-radio input {
+  @apply w-5 h-5 rounded-full border-2 border-blue-500
+         checked:bg-blue-500 checked:border-blue-500
+         focus:outline-none focus:ring-2 focus:ring-blue-200;
+}
+
+.material-switch {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.material-switch input {
+  @apply w-12 h-6 rounded-full bg-gray-200 border-2 border-gray-300
+         checked:bg-blue-500 checked:border-blue-600
+         focus:outline-none focus:ring-2 focus:ring-blue-200;
+}
+
+.material-list-item {
+  @apply flex items-center space-x-4 p-4 rounded-lg bg-gray-50
+         border border-gray-200 shadow-inner;
+}
+
+.material-tabs {
+  @apply flex space-x-2 p-1 rounded-lg bg-gray-50 border border-gray-200;
+}
+
+.material-tab {
+  @apply px-4 py-2 rounded-md text-gray-600
+         hover:bg-gray-200 active:bg-gray-300;
+}
+
+.material-tab.active {
+  @apply bg-blue-500 text-white;
+}
+
+.material-breadcrumbs {
+  @apply flex items-center text-sm;
+}
+
+.material-breadcrumb {
+  @apply text-gray-600 hover:text-blue-500;
+}
+
+.material-breadcrumb.active {
+  @apply text-blue-500;
+}
+
+.material-progress {
+  @apply w-full h-4 rounded-full bg-gray-100 border border-gray-200
+         shadow-inner overflow-hidden;
+}
+
+.material-progress-bar {
+  @apply h-full bg-blue-500 rounded-full;
+}
+
+.material-progress-circular {
+  @apply w-16 h-16 rounded-full bg-gray-100 border border-gray-200
+         shadow-inner flex items-center justify-center;
+}
+
+.material-progress-circle {
+  @apply w-12 h-12 rounded-full border-4 border-blue-500
+         border-t-transparent;
+  transform: rotate(calc(var(--progress) * 3.6deg));
+}
+
+.material-snackbar {
+  @apply flex items-center justify-between p-4 rounded-lg bg-gray-800 text-white;
+}
+
+.material-alert {
+  @apply flex items-center p-4 rounded-lg bg-blue-100
+         border border-blue-200 shadow-inner text-blue-600;
+}
+
+.material-alert.success {
+  @apply bg-green-100 border-green-200 text-green-600;
+}
+
+.material-alert.error {
+  @apply bg-red-100 border-red-200 text-red-600;
+}
+
+.material-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-white shadow-lg
+         flex justify-around p-2;
+}
+
+.material-bottom-nav-item {
+  @apply flex flex-col items-center p-2 text-gray-600
+         hover:text-blue-500;
+}
+
+.material-bottom-nav-item.active {
+  @apply text-blue-500;
+}
+
+.material-color-card {
+  @apply p-4 rounded-lg shadow-md border border-gray-200
+         flex items-center justify-center font-medium;
+}
+</style> 

src/assets/templates/ui-standard/MinimalistView.vue

@@ -0,0 +1,609 @@
+<template>
+  <div class="min-h-screen bg-white p-4 md:p-8">
+    <!-- Navigation Bar -->
+    <div class="minimal-nav-bar p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-gray-800 mr-4" />
+          <h1 class="text-xl font-medium text-gray-800">Minimalist</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="minimal-button-icon">
+            <Search class="w-5 h-5 text-gray-800" />
+          </button>
+          <button class="minimal-button-icon">
+            <Bell class="w-5 h-5 text-gray-800" />
+          </button>
+          <button class="minimal-button-icon">
+            <User class="w-5 h-5 text-gray-800" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="minimal-color-card p-4">
+              <span class="text-gray-800">Primary</span>
+            </div>
+            <div class="minimal-color-card p-4">
+              <span class="text-gray-800">Light</span>
+            </div>
+            <div class="minimal-color-card p-4">
+              <span class="text-gray-800">Dark</span>
+            </div>
+            <div class="minimal-color-card p-4">
+              <span class="text-gray-800">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-medium text-gray-800">Large Title</h1>
+            <h2 class="text-3xl font-medium text-gray-800">Title 1</h2>
+            <h3 class="text-2xl font-medium text-gray-800">Title 2</h3>
+            <h4 class="text-xl font-medium text-gray-800">Title 3</h4>
+            <p class="text-base text-gray-600">Body</p>
+            <p class="text-sm text-gray-500">Caption</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="minimal-button">主要按钮</button>
+              <button class="minimal-button-outline">轮廓按钮</button>
+              <button class="minimal-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="minimal-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="minimal-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="minimal-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="minimal-label">文本输入</label>
+              <input type="text" class="minimal-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="minimal-label">下拉选择</label>
+              <select class="minimal-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="minimal-checkbox">
+                <input type="checkbox">
+                <span class="minimal-checkmark"></span>
+                复选框
+              </label>
+              <label class="minimal-radio">
+                <input type="radio" name="radio">
+                <span class="minimal-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="minimal-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="minimal-card-elevated p-4">
+              <h3 class="text-lg font-medium mb-2 text-gray-800">基础卡片</h3>
+              <p class="text-gray-600">带有极简风格的基础卡片样式</p>
+            </div>
+            <div class="minimal-card-inset p-4">
+              <h3 class="text-lg font-medium mb-2 text-gray-800">内嵌卡片</h3>
+              <p class="text-gray-600">带有内嵌效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">列表</h2>
+          <div class="divide-y divide-gray-200">
+            <div class="minimal-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 minimal-avatar flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-gray-800" />
+                </div>
+                <div>
+                  <h4 class="text-base font-medium text-gray-800">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="minimal-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 minimal-avatar flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-gray-800" />
+                </div>
+                <div>
+                  <h4 class="text-base font-medium text-gray-800">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="minimal-tabs">
+              <button class="minimal-tab active">标签1</button>
+              <button class="minimal-tab">标签2</button>
+              <button class="minimal-tab">标签3</button>
+            </div>
+            <div class="minimal-breadcrumbs">
+              <a href="#" class="minimal-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <a href="#" class="minimal-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <span class="minimal-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="minimal-progress">
+              <div class="minimal-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="minimal-progress-circular">
+              <div class="minimal-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="minimal-card p-6">
+          <h2 class="text-lg font-medium text-gray-800 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="minimal-alert">
+              <span class="text-gray-800">这是一条提示消息</span>
+              <button class="minimal-button-text">关闭</button>
+            </div>
+            <div class="minimal-alert success">
+              <CheckCircle class="w-5 h-5 mr-2 text-gray-800" />
+              <span class="text-gray-800">成功提示</span>
+            </div>
+            <div class="minimal-alert error">
+              <XCircle class="w-5 h-5 mr-2 text-gray-800" />
+              <span class="text-gray-800">错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="minimal-nav-bar">
+          <button class="minimal-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="minimal-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="minimal-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="minimal-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu,
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style>
+/* Minimalist 样式 */
+.minimal-nav-bar {
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.minimal-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+
+.minimal-color-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+
+.minimal-button {
+  background: #f3f4f6;
+  color: #374151;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.minimal-button:hover {
+  background: #e5e7eb;
+}
+
+.minimal-button-outline {
+  background: transparent;
+  color: #374151;
+  padding: 12px 24px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.minimal-button-outline:hover {
+  background: #f3f4f6;
+}
+
+.minimal-button-text {
+  color: #374151;
+  padding: 12px 24px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.minimal-button-text:hover {
+  color: #111827;
+}
+
+.minimal-button-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f4f6;
+  transition: all 0.2s ease;
+}
+
+.minimal-button-icon:hover {
+  background: #e5e7eb;
+}
+
+.minimal-input {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  color: #374151;
+  transition: all 0.2s ease;
+}
+
+.minimal-input:focus {
+  border-color: #9ca3af;
+  outline: none;
+}
+
+.minimal-input::placeholder {
+  color: #9ca3af;
+}
+
+.minimal-label {
+  display: block;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.minimal-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.minimal-checkmark {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  margin-right: 8px;
+  position: relative;
+}
+
+.minimal-checkbox input:checked + .minimal-checkmark {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.minimal-checkmark:after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 12px;
+  border: 2px solid #374151;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 2px;
+  left: 6px;
+  opacity: 0;
+}
+
+.minimal-checkbox input:checked + .minimal-checkmark:after {
+  opacity: 1;
+}
+
+.minimal-radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.minimal-radiomark {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: white;
+  border: 1px solid #e5e7eb;
+  margin-right: 8px;
+  position: relative;
+}
+
+.minimal-radio input:checked + .minimal-radiomark {
+  border-color: #9ca3af;
+}
+
+.minimal-radiomark:after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #374151;
+  border-radius: 50%;
+  top: 4px;
+  left: 4px;
+  opacity: 0;
+}
+
+.minimal-radio input:checked + .minimal-radiomark:after {
+  opacity: 1;
+}
+
+.minimal-switch {
+  display: flex;
+  align-items: center;
+}
+
+.minimal-switch input {
+  display: none;
+}
+
+.minimal-switch label {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+  background: #e5e7eb;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.minimal-switch label:after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: all 0.2s ease;
+}
+
+.minimal-switch input:checked + label {
+  background: #9ca3af;
+}
+
+.minimal-switch input:checked + label:after {
+  left: 28px;
+}
+
+.minimal-tabs {
+  display: flex;
+  border-radius: 8px;
+  background: #f3f4f6;
+  overflow: hidden;
+}
+
+.minimal-tab {
+  padding: 12px 16px;
+  color: #374151;
+  font-weight: 500;
+  position: relative;
+  flex: 1;
+  text-align: center;
+}
+
+.minimal-tab.active {
+  background: white;
+  color: #111827;
+}
+
+.minimal-breadcrumbs {
+  display: flex;
+  align-items: center;
+}
+
+.minimal-breadcrumb {
+  color: #374151;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.minimal-breadcrumb.active {
+  color: #111827;
+  font-weight: 500;
+}
+
+.minimal-progress {
+  height: 4px;
+  background: #f3f4f6;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.minimal-progress-bar {
+  height: 100%;
+  background: #9ca3af;
+  border-radius: 2px;
+}
+
+.minimal-progress-circular {
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.minimal-progress-circle {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #f3f4f6;
+  border-radius: 50%;
+  border-top-color: #9ca3af;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.minimal-alert {
+  background: white;
+  color: #374151;
+  padding: 12px 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.minimal-alert.success {
+  background: white;
+  border-color: #e5e7eb;
+}
+
+.minimal-alert.error {
+  background: white;
+  border-color: #e5e7eb;
+}
+
+.minimal-nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-around;
+  padding: 12px 0;
+}
+
+.minimal-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #374151;
+  padding: 8px;
+  font-weight: 500;
+}
+
+.minimal-nav-item.active {
+  color: #111827;
+  font-weight: 500;
+}
+
+.minimal-nav-item span {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.minimal-avatar {
+  background: #f3f4f6;
+  border-radius: 8px;
+}
+
+.minimal-card-elevated {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+
+.minimal-card-inset {
+  background: #f3f4f6;
+  border-radius: 8px;
+}
+</style> 

src/assets/templates/ui-standard/MorphismView.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 p-4 md:p-8">
+    <!-- App Bar -->
+    <div class="morphism-card bg-white/80 backdrop-blur-sm p-4 mb-6 rounded-2xl shadow-lg">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Layers class="w-6 h-6 text-gray-700 mr-4" />
+          <h1 class="text-xl font-bold text-gray-800">拟态设计</h1>
+        </div>
+        <div class="flex items-center">
+          <Search class="w-5 h-5 text-gray-600 mr-4" />
+          <Bell class="w-5 h-5 text-gray-600 mr-4" />
+          <User class="w-5 h-5 text-gray-600" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="morphism-color-card bg-blue-500 rounded-xl">
+              <span class="text-white font-bold">Primary</span>
+            </div>
+            <div class="morphism-color-card bg-purple-500 rounded-xl">
+              <span class="text-white font-bold">Secondary</span>
+            </div>
+            <div class="morphism-color-card bg-pink-500 rounded-xl">
+              <span class="text-white font-bold">Accent</span>
+            </div>
+            <div class="morphism-color-card bg-teal-500 rounded-xl">
+              <span class="text-white font-bold">Success</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold text-gray-800">H1 Bold 34px</h1>
+            <h2 class="text-3xl font-bold text-gray-800">H2 Bold 24px</h2>
+            <h3 class="text-2xl font-bold text-gray-800">H3 Bold 20px</h3>
+            <p class="text-base text-gray-700">Body Regular 16px</p>
+            <p class="text-sm text-gray-600">Caption Regular 12px</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="morphism-button-primary">
+                <span>主要按钮</span>
+              </button>
+              <button class="morphism-button-secondary">
+                <span>次要按钮</span>
+              </button>
+              <button class="morphism-button-text">
+                <span>文本按钮</span>
+              </button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="morphism-button-icon">
+                <Layers class="w-5 h-5" />
+              </button>
+              <button class="morphism-button-icon">
+                <Box class="w-5 h-5" />
+              </button>
+              <button class="morphism-button-icon">
+                <Box class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="morphism-label">文本输入</label>
+              <input type="text" class="morphism-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="morphism-label">下拉选择</label>
+              <select class="morphism-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="morphism-checkbox">
+                <input type="checkbox">
+                <span class="morphism-checkmark"></span>
+                <span>复选框</span>
+              </label>
+              <label class="morphism-radio">
+                <input type="radio" name="radio">
+                <span class="morphism-radiomark"></span>
+                <span>单选框</span>
+              </label>
+            </div>
+            <div class="morphism-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="morphism-card-item bg-white/80 backdrop-blur-sm rounded-xl">
+              <h3 class="text-lg font-bold text-gray-800 mb-2">基础卡片</h3>
+              <p class="text-gray-700">带有拟态效果的卡片样式</p>
+            </div>
+            <div class="morphism-card-item bg-white/80 backdrop-blur-sm rounded-xl">
+              <h3 class="text-lg font-bold text-gray-800 mb-2">高亮卡片</h3>
+              <p class="text-gray-700">带有阴影效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">列表</h2>
+          <div class="space-y-4">
+            <div class="morphism-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-white/80 backdrop-blur-sm rounded-xl flex items-center justify-center mr-4">
+                  <Layers class="w-5 h-5 text-gray-700" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-gray-800">列表项标题</h4>
+                  <p class="text-sm text-gray-700">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="morphism-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-white/80 backdrop-blur-sm rounded-xl flex items-center justify-center mr-4">
+                  <Box class="w-5 h-5 text-gray-700" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-gray-800">列表项标题</h4>
+                  <p class="text-sm text-gray-700">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="morphism-tabs">
+              <button class="morphism-tab active">标签1</button>
+              <button class="morphism-tab">标签2</button>
+              <button class="morphism-tab">标签3</button>
+            </div>
+            <div class="morphism-breadcrumbs">
+              <a href="#" class="morphism-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-gray-600 mx-2" />
+              <a href="#" class="morphism-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-gray-600 mx-2" />
+              <span class="morphism-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="morphism-progress">
+              <div class="morphism-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="morphism-health-bar">
+              <div class="morphism-health" style="width: 75%"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="morphism-card bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
+          <h2 class="text-lg font-bold text-gray-800 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="morphism-alert">
+              <span>这是一条提示消息</span>
+              <button class="morphism-button-text">关闭</button>
+            </div>
+            <div class="morphism-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="morphism-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="morphism-bottom-nav">
+          <button class="morphism-bottom-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="morphism-bottom-nav-item">
+            <Layers class="w-5 h-5" />
+            <span>组件</span>
+          </button>
+          <button class="morphism-bottom-nav-item">
+            <Box class="w-5 h-5" />
+            <span>元素</span>
+          </button>
+          <button class="morphism-bottom-nav-item">
+            <Settings class="w-5 h-5" />
+            <span>设置</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Search, 
+  Bell, 
+  User, 
+  ChevronRight,
+  Layers,
+  Box,
+  Zap,
+  Stars,
+  CheckCircle,
+  XCircle,
+  Home,
+  Settings
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.morphism-card {
+  @apply border border-gray-200/50;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+}
+
+.morphism-button-primary {
+  @apply px-6 py-3 bg-blue-500 text-white font-bold
+         rounded-xl hover:bg-blue-600
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl;
+}
+
+.morphism-button-secondary {
+  @apply px-6 py-3 bg-purple-500 text-white font-bold
+         rounded-xl hover:bg-purple-600
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl;
+}
+
+.morphism-button-text {
+  @apply px-4 py-2 text-gray-700 font-bold
+         hover:text-gray-800;
+}
+
+.morphism-button-icon {
+  @apply p-3 bg-white/80 backdrop-blur-sm text-gray-700
+         rounded-xl hover:bg-white/90
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl;
+}
+
+.morphism-input {
+  @apply w-full px-4 py-3 bg-white/80 backdrop-blur-sm text-gray-800
+         border border-gray-200/50 rounded-xl
+         focus:outline-none focus:border-blue-400
+         placeholder-gray-400;
+}
+
+.morphism-label {
+  @apply block text-sm font-bold text-gray-800 mb-2;
+}
+
+.morphism-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.morphism-checkbox input {
+  @apply w-6 h-6 bg-white/80 backdrop-blur-sm border-2 border-gray-200/50
+         rounded-lg checked:bg-blue-500 checked:border-blue-500;
+}
+
+.morphism-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.morphism-radio input {
+  @apply w-6 h-6 bg-white/80 backdrop-blur-sm border-2 border-gray-200/50
+         rounded-full checked:bg-blue-500 checked:border-blue-500;
+}
+
+.morphism-switch {
+  @apply relative inline-flex items-center cursor-pointer;
+}
+
+.morphism-switch input {
+  @apply sr-only;
+}
+
+.morphism-switch label {
+  @apply w-16 h-8 bg-white/80 backdrop-blur-sm rounded-full
+         after:content-[''] after:absolute after:top-0 after:left-0
+         after:bg-white after:border-2 after:border-gray-200/50
+         after:h-6 after:w-6 after:rounded-full
+         after:transition-all after:duration-200
+         peer-checked:after:translate-x-8
+         peer-checked:bg-blue-500;
+}
+
+.morphism-tabs {
+  @apply flex space-x-2 p-1 bg-white/80 backdrop-blur-sm rounded-xl;
+}
+
+.morphism-tab {
+  @apply px-6 py-2 text-gray-700 font-bold rounded-lg;
+}
+
+.morphism-tab.active {
+  @apply bg-blue-500 text-white;
+}
+
+.morphism-progress {
+  @apply h-4 bg-white/80 backdrop-blur-sm rounded-full;
+}
+
+.morphism-progress-bar {
+  @apply h-full bg-blue-500 rounded-full;
+  transition: width 0.3s ease;
+}
+
+.morphism-health-bar {
+  @apply h-4 bg-white/80 backdrop-blur-sm rounded-full;
+}
+
+.morphism-health {
+  @apply h-full bg-red-500 rounded-full;
+  transition: width 0.3s ease;
+}
+
+.morphism-alert {
+  @apply flex items-center justify-between p-4
+         bg-white/80 backdrop-blur-sm border border-gray-200/50
+         text-gray-800 rounded-xl;
+}
+
+.morphism-alert.success {
+  @apply border-emerald-200 text-emerald-800
+         bg-emerald-50/80;
+}
+
+.morphism-alert.error {
+  @apply border-red-200 text-red-800
+         bg-red-50/80;
+}
+
+.morphism-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0
+         bg-white/80 backdrop-blur-sm border-t border-gray-200/50
+         flex justify-around p-2;
+}
+
+.morphism-bottom-nav-item {
+  @apply flex flex-col items-center p-2 text-gray-700
+         hover:text-gray-800;
+}
+
+.morphism-bottom-nav-item.active {
+  @apply text-blue-500;
+}
+
+.morphism-color-card {
+  @apply p-4 flex items-center justify-center font-bold;
+}
+
+.morphism-list-item {
+  @apply p-4 bg-white/80 backdrop-blur-sm rounded-xl
+         hover:bg-white/90 transition-colors duration-200;
+}
+
+.morphism-breadcrumb {
+  @apply text-gray-700 hover:text-gray-800;
+}
+
+.morphism-breadcrumb.active {
+  @apply text-blue-500 font-bold;
+}
+</style> 

src/assets/templates/ui-standard/NeonView.vue

@@ -0,0 +1,443 @@
+<template>
+  <div class="min-h-screen bg-black p-4 md:p-8">
+    <!-- App Bar -->
+    <div class="neon-card bg-black/50 p-4 mb-6 rounded-2xl border border-pink-500/20">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Zap class="w-6 h-6 text-pink-500 neon-glow mr-4" />
+          <h1 class="text-xl font-bold text-pink-500 neon-glow">霓虹设计</h1>
+        </div>
+        <div class="flex items-center">
+          <Search class="w-5 h-5 text-pink-500 neon-glow mr-4" />
+          <Bell class="w-5 h-5 text-pink-500 neon-glow mr-4" />
+          <User class="w-5 h-5 text-pink-500 neon-glow" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="neon-color-card bg-pink-500 rounded-xl">
+              <span class="text-white font-bold">Primary</span>
+            </div>
+            <div class="neon-color-card bg-cyan-500 rounded-xl">
+              <span class="text-white font-bold">Secondary</span>
+            </div>
+            <div class="neon-color-card bg-purple-500 rounded-xl">
+              <span class="text-white font-bold">Accent</span>
+            </div>
+            <div class="neon-color-card bg-green-500 rounded-xl">
+              <span class="text-white font-bold">Success</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold text-pink-500 neon-glow">H1 Bold 34px</h1>
+            <h2 class="text-3xl font-bold text-cyan-500 neon-glow">H2 Bold 24px</h2>
+            <h3 class="text-2xl font-bold text-purple-500 neon-glow">H3 Bold 20px</h3>
+            <p class="text-base text-gray-300">Body Regular 16px</p>
+            <p class="text-sm text-gray-400">Caption Regular 12px</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="neon-button-primary">
+                <span>主要按钮</span>
+              </button>
+              <button class="neon-button-secondary">
+                <span>次要按钮</span>
+              </button>
+              <button class="neon-button-text">
+                <span>文本按钮</span>
+              </button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="neon-button-icon">
+                <Zap class="w-5 h-5" />
+              </button>
+              <button class="neon-button-icon">
+                <Moon class="w-5 h-5" />
+              </button>
+              <button class="neon-button-icon">
+                <Star class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="neon-label">文本输入</label>
+              <input type="text" class="neon-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="neon-label">下拉选择</label>
+              <select class="neon-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="neon-checkbox">
+                <input type="checkbox">
+                <span class="neon-checkmark"></span>
+                <span>复选框</span>
+              </label>
+              <label class="neon-radio">
+                <input type="radio" name="radio">
+                <span class="neon-radiomark"></span>
+                <span>单选框</span>
+              </label>
+            </div>
+            <div class="neon-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="neon-card-item bg-black/50 rounded-xl border border-pink-500/20">
+              <h3 class="text-lg font-bold text-pink-500 neon-glow mb-2">基础卡片</h3>
+              <p class="text-gray-300">带有霓虹效果的卡片样式</p>
+            </div>
+            <div class="neon-card-item bg-black/50 rounded-xl border border-cyan-500/20">
+              <h3 class="text-lg font-bold text-cyan-500 neon-glow mb-2">高亮卡片</h3>
+              <p class="text-gray-300">带有发光效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">列表</h2>
+          <div class="space-y-4">
+            <div class="neon-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-black/50 rounded-xl flex items-center justify-center mr-4 border border-pink-500/20">
+                  <Zap class="w-5 h-5 text-pink-500 neon-glow" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-pink-500 neon-glow">列表项标题</h4>
+                  <p class="text-sm text-gray-300">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="neon-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-black/50 rounded-xl flex items-center justify-center mr-4 border border-cyan-500/20">
+                  <Moon class="w-5 h-5 text-cyan-500 neon-glow" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-cyan-500 neon-glow">列表项标题</h4>
+                  <p class="text-sm text-gray-300">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="neon-tabs">
+              <button class="neon-tab active">标签1</button>
+              <button class="neon-tab">标签2</button>
+              <button class="neon-tab">标签3</button>
+            </div>
+            <div class="neon-breadcrumbs">
+              <a href="#" class="neon-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-pink-500 neon-glow mx-2" />
+              <a href="#" class="neon-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-pink-500 neon-glow mx-2" />
+              <span class="neon-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="neon-progress">
+              <div class="neon-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="neon-health-bar">
+              <div class="neon-health" style="width: 75%"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="neon-card bg-black/50 p-6 rounded-2xl border border-pink-500/20">
+          <h2 class="text-lg font-bold text-pink-500 neon-glow mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="neon-alert">
+              <span>这是一条提示消息</span>
+              <button class="neon-button-text">关闭</button>
+            </div>
+            <div class="neon-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="neon-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="neon-bottom-nav">
+          <button class="neon-bottom-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="neon-bottom-nav-item">
+            <Zap class="w-5 h-5" />
+            <span>霓虹</span>
+          </button>
+          <button class="neon-bottom-nav-item">
+            <Moon class="w-5 h-5" />
+            <span>夜晚</span>
+          </button>
+          <button class="neon-bottom-nav-item">
+            <Settings class="w-5 h-5" />
+            <span>设置</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Search, 
+  Bell, 
+  User, 
+  ChevronRight,
+  Zap,
+  Moon,
+  Star,
+  CheckCircle,
+  XCircle,
+  Home,
+  Settings
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.neon-card {
+  @apply border border-pink-500/20;
+  background: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
+}
+
+.neon-glow {
+  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
+}
+
+.neon-button-primary {
+  @apply px-6 py-3 bg-pink-500 text-white font-bold
+         rounded-xl hover:bg-pink-600
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
+}
+
+.neon-button-secondary {
+  @apply px-6 py-3 bg-cyan-500 text-white font-bold
+         rounded-xl hover:bg-cyan-600
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl;
+  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
+}
+
+.neon-button-text {
+  @apply px-4 py-2 text-pink-500 font-bold
+         hover:text-pink-400;
+  text-shadow: 0 0 5px rgba(236, 72, 153, 0.5);
+}
+
+.neon-button-icon {
+  @apply p-3 bg-black/50 text-pink-500
+         rounded-xl hover:bg-black/60
+         active:scale-95 transition-all duration-200
+         shadow-lg hover:shadow-xl border border-pink-500/20;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
+}
+
+.neon-input {
+  @apply w-full px-4 py-3 bg-black/50 text-white
+         border border-pink-500/20 rounded-xl
+         focus:outline-none focus:border-pink-500
+         placeholder-gray-400;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.1);
+}
+
+.neon-label {
+  @apply block text-sm font-bold text-pink-500 mb-2;
+  text-shadow: 0 0 5px rgba(236, 72, 153, 0.5);
+}
+
+.neon-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.neon-checkbox input {
+  @apply w-6 h-6 bg-black/50 border-2 border-pink-500/20
+         rounded-lg checked:bg-pink-500;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
+}
+
+.neon-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.neon-radio input {
+  @apply w-6 h-6 bg-black/50 border-2 border-pink-500/20
+         rounded-full checked:bg-pink-500;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
+}
+
+.neon-switch {
+  @apply relative inline-flex items-center cursor-pointer;
+}
+
+.neon-switch input {
+  @apply sr-only;
+}
+
+.neon-switch label {
+  @apply w-16 h-8 bg-black/50 rounded-full
+         after:content-[''] after:absolute after:top-0 after:left-0
+         after:bg-white after:border-2 after:border-pink-500/20
+         after:h-6 after:w-6 after:rounded-full
+         after:transition-all after:duration-200
+         peer-checked:after:translate-x-8
+         peer-checked:bg-pink-500;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
+}
+
+.neon-tabs {
+  @apply flex space-x-2 p-1 bg-black/50 rounded-xl;
+}
+
+.neon-tab {
+  @apply px-6 py-2 text-pink-500 font-bold rounded-lg;
+  text-shadow: 0 0 5px rgba(236, 72, 153, 0.5);
+}
+
+.neon-tab.active {
+  @apply bg-pink-500 text-white;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
+}
+
+.neon-progress {
+  @apply h-4 bg-black/50 rounded-full;
+}
+
+.neon-progress-bar {
+  @apply h-full bg-pink-500 rounded-full;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
+  transition: width 0.3s ease;
+}
+
+.neon-health-bar {
+  @apply h-4 bg-black/50 rounded-full;
+}
+
+.neon-health {
+  @apply h-full bg-cyan-500 rounded-full;
+  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
+  transition: width 0.3s ease;
+}
+
+.neon-alert {
+  @apply flex items-center justify-between p-4
+         bg-black/50 border border-pink-500/20
+         text-white rounded-xl;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
+}
+
+.neon-alert.success {
+  @apply border-green-500/20 text-green-400
+         bg-green-900/30;
+  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
+}
+
+.neon-alert.error {
+  @apply border-red-500/20 text-red-400
+         bg-red-900/30;
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
+}
+
+.neon-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0
+         bg-black/50 border-t border-pink-500/20
+         flex justify-around p-2;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
+}
+
+.neon-bottom-nav-item {
+  @apply flex flex-col items-center p-2 text-pink-500
+         hover:text-pink-400;
+  text-shadow: 0 0 5px rgba(236, 72, 153, 0.5);
+}
+
+.neon-bottom-nav-item.active {
+  @apply text-white;
+  text-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
+}
+
+.neon-color-card {
+  @apply p-4 flex items-center justify-center font-bold;
+  box-shadow: 0 0 10px currentColor;
+}
+
+.neon-list-item {
+  @apply p-4 bg-black/50 rounded-xl
+         hover:bg-black/60 transition-colors duration-200
+         border border-pink-500/20;
+  box-shadow: 0 0 10px rgba(236, 72, 153, 0.1);
+}
+
+.neon-breadcrumb {
+  @apply text-pink-500 hover:text-pink-400;
+  text-shadow: 0 0 5px rgba(236, 72, 153, 0.5);
+}
+
+.neon-breadcrumb.active {
+  @apply text-white font-bold;
+  text-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
+}
+</style> 

src/assets/templates/ui-standard/NeumorphismView.vue

@@ -0,0 +1,598 @@
+<template>
+  <div class="min-h-screen bg-gray-100 p-4 md:p-8">
+    <!-- Navigation Bar -->
+    <div class="neu-nav-bar p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-gray-600 mr-4" />
+          <h1 class="text-xl font-semibold text-gray-700">Neumorphism</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="neu-button-icon">
+            <Search class="w-5 h-5 text-gray-600" />
+          </button>
+          <button class="neu-button-icon">
+            <Bell class="w-5 h-5 text-gray-600" />
+          </button>
+          <button class="neu-button-icon">
+            <User class="w-5 h-5 text-gray-600" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="neu-color-card p-4">
+              <span class="text-gray-700">Primary</span>
+            </div>
+            <div class="neu-color-card p-4">
+              <span class="text-gray-700">Light</span>
+            </div>
+            <div class="neu-color-card p-4">
+              <span class="text-gray-700">Dark</span>
+            </div>
+            <div class="neu-color-card p-4">
+              <span class="text-gray-700">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-semibold text-gray-700">Large Title</h1>
+            <h2 class="text-3xl font-semibold text-gray-700">Title 1</h2>
+            <h3 class="text-2xl font-semibold text-gray-700">Title 2</h3>
+            <h4 class="text-xl font-semibold text-gray-700">Title 3</h4>
+            <p class="text-base text-gray-600">Body</p>
+            <p class="text-sm text-gray-500">Caption</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="neu-button">主要按钮</button>
+              <button class="neu-button-pressed">按下按钮</button>
+              <button class="neu-button-outline">轮廓按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="neu-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="neu-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="neu-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="neu-label">文本输入</label>
+              <input type="text" class="neu-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="neu-label">下拉选择</label>
+              <select class="neu-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="neu-checkbox">
+                <input type="checkbox">
+                <span class="neu-checkmark"></span>
+                复选框
+              </label>
+              <label class="neu-radio">
+                <input type="radio" name="radio">
+                <span class="neu-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="neu-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="neu-card-elevated p-4">
+              <h3 class="text-lg font-semibold mb-2">基础卡片</h3>
+              <p class="text-gray-600">带有阴影的基础卡片样式</p>
+            </div>
+            <div class="neu-card-inset p-4">
+              <h3 class="text-lg font-semibold mb-2">内嵌卡片</h3>
+              <p class="text-gray-600">带有内嵌效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">列表</h2>
+          <div class="divide-y divide-gray-200">
+            <div class="neu-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 neu-avatar flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-gray-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-semibold text-gray-700">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="neu-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 neu-avatar flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-gray-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-semibold text-gray-700">列表项标题</h4>
+                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="neu-tabs">
+              <button class="neu-tab active">标签1</button>
+              <button class="neu-tab">标签2</button>
+              <button class="neu-tab">标签3</button>
+            </div>
+            <div class="neu-breadcrumbs">
+              <a href="#" class="neu-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <a href="#" class="neu-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-gray-400 mx-2" />
+              <span class="neu-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="neu-progress">
+              <div class="neu-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="neu-progress-circular">
+              <div class="neu-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="neu-card p-6">
+          <h2 class="text-lg font-semibold text-gray-700 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="neu-alert">
+              <span>这是一条提示消息</span>
+              <button class="neu-button-text">关闭</button>
+            </div>
+            <div class="neu-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="neu-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="neu-nav-bar">
+          <button class="neu-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="neu-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="neu-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="neu-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu,
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style>
+/* Neumorphism 样式 */
+.neu-nav-bar {
+  background: #E6E7EE;
+  border-radius: 12px;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+}
+
+.neu-card {
+  background: #E6E7EE;
+  border-radius: 12px;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+}
+
+.neu-color-card {
+  background: #E6E7EE;
+  border-radius: 12px;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+}
+
+.neu-button {
+  background: #E6E7EE;
+  color: #31344B;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-weight: 500;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  transition: all 0.2s ease;
+}
+
+.neu-button:hover {
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+
+.neu-button-pressed {
+  background: #E6E7EE;
+  color: #31344B;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-weight: 500;
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+
+.neu-button-outline {
+  background: transparent;
+  color: #31344B;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-weight: 500;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+}
+
+.neu-button-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #E6E7EE;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  transition: all 0.2s ease;
+}
+
+.neu-button-icon:hover {
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+
+.neu-input {
+  width: 100%;
+  padding: 12px;
+  border-radius: 12px;
+  background: #E6E7EE;
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+  transition: all 0.2s ease;
+}
+
+.neu-input:focus {
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+
+.neu-label {
+  display: block;
+  color: #31344B;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.neu-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.neu-checkmark {
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: #E6E7EE;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  margin-right: 8px;
+  position: relative;
+}
+
+.neu-checkbox input:checked + .neu-checkmark {
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+
+.neu-checkmark:after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 12px;
+  border: 2px solid #31344B;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 4px;
+  left: 8px;
+  opacity: 0;
+}
+
+.neu-checkbox input:checked + .neu-checkmark:after {
+  opacity: 1;
+}
+
+.neu-radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.neu-radiomark {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #E6E7EE;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  margin-right: 8px;
+  position: relative;
+}
+
+.neu-radio input:checked + .neu-radiomark {
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+
+.neu-radiomark:after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #31344B;
+  border-radius: 50%;
+  top: 6px;
+  left: 6px;
+  opacity: 0;
+}
+
+.neu-radio input:checked + .neu-radiomark:after {
+  opacity: 1;
+}
+
+.neu-switch {
+  display: flex;
+  align-items: center;
+}
+
+.neu-switch input {
+  display: none;
+}
+
+.neu-switch label {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  background: #E6E7EE;
+  border-radius: 15px;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.neu-switch label:after {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: #E6E7EE;
+  border-radius: 50%;
+  top: 3px;
+  left: 3px;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  transition: all 0.2s ease;
+}
+
+.neu-switch input:checked + label {
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+
+.neu-switch input:checked + label:after {
+  left: 33px;
+}
+
+.neu-tabs {
+  display: flex;
+  border-radius: 12px;
+  background: #E6E7EE;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  overflow: hidden;
+}
+
+.neu-tab {
+  padding: 12px 16px;
+  color: #31344B;
+  font-weight: 500;
+  position: relative;
+  flex: 1;
+  text-align: center;
+}
+
+.neu-tab.active {
+  background: #E6E7EE;
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+
+.neu-breadcrumbs {
+  display: flex;
+  align-items: center;
+}
+
+.neu-breadcrumb {
+  color: #31344B;
+  text-decoration: none;
+}
+
+.neu-breadcrumb.active {
+  color: #31344B;
+  font-weight: 500;
+}
+
+.neu-progress {
+  height: 8px;
+  background: #E6E7EE;
+  border-radius: 4px;
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+  overflow: hidden;
+}
+
+.neu-progress-bar {
+  height: 100%;
+  background: #31344B;
+  border-radius: 4px;
+}
+
+.neu-progress-circular {
+  width: 48px;
+  height: 48px;
+  position: relative;
+}
+
+.neu-progress-circle {
+  width: 100%;
+  height: 100%;
+  border: 4px solid #E6E7EE;
+  border-radius: 50%;
+  border-top-color: #31344B;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.neu-alert {
+  background: #E6E7EE;
+  color: #31344B;
+  padding: 12px 16px;
+  border-radius: 12px;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.neu-alert.success {
+  background: #E6E7EE;
+  color: #31344B;
+}
+
+.neu-alert.error {
+  background: #E6E7EE;
+  color: #31344B;
+}
+
+.neu-nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #E6E7EE;
+  display: flex;
+  justify-content: space-around;
+  padding: 12px 0;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+}
+
+.neu-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #31344B;
+  padding: 8px;
+}
+
+.neu-nav-item.active {
+  color: #31344B;
+  font-weight: 500;
+}
+
+.neu-nav-item span {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.neu-avatar {
+  background: #E6E7EE;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+}
+
+.neu-card-elevated {
+  background: #E6E7EE;
+  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+}
+
+.neu-card-inset {
+  background: #E6E7EE;
+  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+}
+</style> 

src/assets/templates/ui-standard/OrganicDesignView.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="min-h-screen bg-green-50 p-4 md:p-8">
+    <!-- App Bar -->
+    <div class="organic-card bg-white p-4 mb-6 rounded-2xl shadow-sm">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Leaf class="w-6 h-6 text-green-600 mr-4" />
+          <h1 class="text-xl font-bold text-green-800">有机设计</h1>
+        </div>
+        <div class="flex items-center">
+          <Search class="w-5 h-5 text-green-600 mr-4" />
+          <Bell class="w-5 h-5 text-green-600 mr-4" />
+          <User class="w-5 h-5 text-green-600" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="organic-color-card bg-green-600 rounded-xl">
+              <span class="text-white font-bold">Primary</span>
+            </div>
+            <div class="organic-color-card bg-amber-500 rounded-xl">
+              <span class="text-white font-bold">Secondary</span>
+            </div>
+            <div class="organic-color-card bg-teal-500 rounded-xl">
+              <span class="text-white font-bold">Accent</span>
+            </div>
+            <div class="organic-color-card bg-emerald-500 rounded-xl">
+              <span class="text-white font-bold">Success</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold text-green-800">H1 Bold 34px</h1>
+            <h2 class="text-3xl font-bold text-green-800">H2 Bold 24px</h2>
+            <h3 class="text-2xl font-bold text-green-800">H3 Bold 20px</h3>
+            <p class="text-base text-green-700">Body Regular 16px</p>
+            <p class="text-sm text-green-600">Caption Regular 12px</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="organic-button-primary">
+                <span>主要按钮</span>
+              </button>
+              <button class="organic-button-secondary">
+                <span>次要按钮</span>
+              </button>
+              <button class="organic-button-text">
+                <span>文本按钮</span>
+              </button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="organic-button-icon">
+                <Leaf class="w-5 h-5" />
+              </button>
+              <button class="organic-button-icon">
+                <Flower class="w-5 h-5" />
+              </button>
+              <button class="organic-button-icon">
+                <TreePine class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="organic-label">文本输入</label>
+              <input type="text" class="organic-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="organic-label">下拉选择</label>
+              <select class="organic-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="organic-checkbox">
+                <input type="checkbox">
+                <span class="organic-checkmark"></span>
+                <span>复选框</span>
+              </label>
+              <label class="organic-radio">
+                <input type="radio" name="radio">
+                <span class="organic-radiomark"></span>
+                <span>单选框</span>
+              </label>
+            </div>
+            <div class="organic-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="organic-card-item bg-green-50 rounded-xl">
+              <h3 class="text-lg font-bold text-green-800 mb-2">基础卡片</h3>
+              <p class="text-green-700">带有有机纹理的卡片样式</p>
+            </div>
+            <div class="organic-card-item bg-amber-50 rounded-xl">
+              <h3 class="text-lg font-bold text-amber-800 mb-2">高亮卡片</h3>
+              <p class="text-amber-700">带有自然纹理的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">列表</h2>
+          <div class="space-y-4">
+            <div class="organic-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
+                  <Leaf class="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-green-800">列表项标题</h4>
+                  <p class="text-sm text-green-700">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="organic-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center mr-4">
+                  <Flower class="w-5 h-5 text-amber-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-green-800">列表项标题</h4>
+                  <p class="text-sm text-green-700">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="organic-tabs">
+              <button class="organic-tab active">标签1</button>
+              <button class="organic-tab">标签2</button>
+              <button class="organic-tab">标签3</button>
+            </div>
+            <div class="organic-breadcrumbs">
+              <a href="#" class="organic-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-green-600 mx-2" />
+              <a href="#" class="organic-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-green-600 mx-2" />
+              <span class="organic-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="organic-progress">
+              <div class="organic-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="organic-health-bar">
+              <div class="organic-health" style="width: 75%"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="organic-card bg-white p-6 rounded-2xl shadow-sm">
+          <h2 class="text-lg font-bold text-green-800 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="organic-alert">
+              <span>这是一条提示消息</span>
+              <button class="organic-button-text">关闭</button>
+            </div>
+            <div class="organic-alert success">
+              <Leaf class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="organic-alert error">
+              <Skull class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="organic-bottom-nav">
+          <button class="organic-bottom-nav-item active">
+            <Map class="w-5 h-5" />
+            <span>地图</span>
+          </button>
+          <button class="organic-bottom-nav-item">
+            <Leaf class="w-5 h-5" />
+            <span>植物</span>
+          </button>
+          <button class="organic-bottom-nav-item">
+            <Flower class="w-5 h-5" />
+            <span>花朵</span>
+          </button>
+          <button class="organic-bottom-nav-item">
+            <TreePine class="w-5 h-5" />
+            <span>树木</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Search, 
+  Bell, 
+  User, 
+  ChevronRight,
+  Leaf,
+  Flower,
+  TreePine,
+  Skull,
+  Map
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.organic-card {
+  @apply border border-green-200;
+  background-image: linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%),
+                    linear-gradient(-45deg, rgba(0,0,0,0.02) 25%, transparent 25%),
+                    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.02) 75%),
+                    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.02) 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
+}
+
+.organic-button-primary {
+  @apply px-6 py-3 bg-green-600 text-white font-bold
+         rounded-xl hover:bg-green-700
+         active:scale-95 transition-all duration-200
+         shadow-sm hover:shadow-md;
+}
+
+.organic-button-secondary {
+  @apply px-6 py-3 bg-amber-500 text-white font-bold
+         rounded-xl hover:bg-amber-600
+         active:scale-95 transition-all duration-200
+         shadow-sm hover:shadow-md;
+}
+
+.organic-button-text {
+  @apply px-4 py-2 text-green-600 font-bold
+         hover:text-green-700;
+}
+
+.organic-button-icon {
+  @apply p-3 bg-green-100 text-green-600
+         rounded-full hover:bg-green-200
+         active:scale-95 transition-all duration-200
+         shadow-sm hover:shadow-md;
+}
+
+.organic-input {
+  @apply w-full px-4 py-3 bg-white text-green-800
+         border border-green-200 rounded-xl
+         focus:outline-none focus:border-green-400
+         placeholder-green-400;
+}
+
+.organic-label {
+  @apply block text-sm font-bold text-green-800 mb-2;
+}
+
+.organic-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.organic-checkbox input {
+  @apply w-6 h-6 bg-white border-2 border-green-200
+         rounded-lg checked:bg-green-600 checked:border-green-600;
+}
+
+.organic-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.organic-radio input {
+  @apply w-6 h-6 bg-white border-2 border-green-200
+         rounded-full checked:bg-green-600 checked:border-green-600;
+}
+
+.organic-switch {
+  @apply relative inline-flex items-center cursor-pointer;
+}
+
+.organic-switch input {
+  @apply sr-only;
+}
+
+.organic-switch label {
+  @apply w-16 h-8 bg-green-200 rounded-full
+         after:content-[''] after:absolute after:top-0 after:left-0
+         after:bg-white after:border-2 after:border-green-200
+         after:h-6 after:w-6 after:rounded-full
+         after:transition-all after:duration-200
+         peer-checked:after:translate-x-8
+         peer-checked:bg-green-600;
+}
+
+.organic-tabs {
+  @apply flex space-x-2 p-1 bg-green-50 rounded-xl;
+}
+
+.organic-tab {
+  @apply px-6 py-2 text-green-600 font-bold rounded-lg;
+}
+
+.organic-tab.active {
+  @apply bg-green-600 text-white;
+}
+
+.organic-progress {
+  @apply h-4 bg-green-100 rounded-full;
+}
+
+.organic-progress-bar {
+  @apply h-full bg-green-600 rounded-full;
+  transition: width 0.3s ease;
+}
+
+.organic-health-bar {
+  @apply h-4 bg-red-100 rounded-full;
+}
+
+.organic-health {
+  @apply h-full bg-red-500 rounded-full;
+  transition: width 0.3s ease;
+}
+
+.organic-alert {
+  @apply flex items-center justify-between p-4
+         bg-green-50 border border-green-200
+         text-green-800 rounded-xl;
+}
+
+.organic-alert.success {
+  @apply border-emerald-200 text-emerald-800
+         bg-emerald-50;
+}
+
+.organic-alert.error {
+  @apply border-red-200 text-red-800
+         bg-red-50;
+}
+
+.organic-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0
+         bg-white border-t border-green-200
+         flex justify-around p-2;
+}
+
+.organic-bottom-nav-item {
+  @apply flex flex-col items-center p-2 text-green-600
+         hover:text-green-700;
+}
+
+.organic-bottom-nav-item.active {
+  @apply text-green-700;
+}
+
+.organic-color-card {
+  @apply p-4 flex items-center justify-center font-bold;
+}
+
+.organic-list-item {
+  @apply p-4 bg-green-50 rounded-xl
+         hover:bg-green-100 transition-colors duration-200;
+}
+
+.organic-breadcrumb {
+  @apply text-green-600 hover:text-green-700;
+}
+
+.organic-breadcrumb.active {
+  @apply text-green-700 font-bold;
+}
+</style> 

src/assets/templates/ui-standard/PixelArtView.vue

@@ -0,0 +1,462 @@
+<template>
+  <div class="min-h-screen bg-gray-900 p-4 md:p-8 pixel-bg">
+    <!-- App Bar -->
+    <div class="pixel-card bg-gray-800 p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <GamepadIcon class="w-6 h-6 text-yellow-400 mr-4 pixel-icon" />
+          <h1 class="text-xl font-bold text-yellow-400 pixel-font">像素风格</h1>
+        </div>
+        <div class="flex items-center">
+          <Search class="w-5 h-5 text-yellow-400 mr-4 pixel-icon" />
+          <Bell class="w-5 h-5 text-yellow-400 mr-4 pixel-icon" />
+          <User class="w-5 h-5 text-yellow-400 pixel-icon" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="pixel-color-card bg-yellow-400">
+              <span class="text-gray-900 font-bold pixel-font">Primary</span>
+            </div>
+            <div class="pixel-color-card bg-red-500">
+              <span class="text-white font-bold pixel-font">Secondary</span>
+            </div>
+            <div class="pixel-color-card bg-blue-500">
+              <span class="text-white font-bold pixel-font">Accent</span>
+            </div>
+            <div class="pixel-color-card bg-green-500">
+              <span class="text-white font-bold pixel-font">Success</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold text-yellow-400 pixel-font">H1 Bold 34px</h1>
+            <h2 class="text-3xl font-bold text-yellow-400 pixel-font">H2 Bold 24px</h2>
+            <h3 class="text-2xl font-bold text-yellow-400 pixel-font">H3 Bold 20px</h3>
+            <p class="text-base text-yellow-400 pixel-font">Body Regular 16px</p>
+            <p class="text-sm text-yellow-400 pixel-font">Caption Regular 12px</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="pixel-button-primary">
+                <span class="pixel-font">主要按钮</span>
+              </button>
+              <button class="pixel-button-secondary">
+                <span class="pixel-font">次要按钮</span>
+              </button>
+              <button class="pixel-button-text">
+                <span class="pixel-font">文本按钮</span>
+              </button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="pixel-button-icon">
+                <Sword class="w-5 h-5" />
+              </button>
+              <button class="pixel-button-icon">
+                <Shield class="w-5 h-5" />
+              </button>
+              <button class="pixel-button-icon">
+                <Heart class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="pixel-label">文本输入</label>
+              <input type="text" class="pixel-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="pixel-label">下拉选择</label>
+              <select class="pixel-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="pixel-checkbox">
+                <input type="checkbox">
+                <span class="pixel-checkmark"></span>
+                <span class="pixel-font">复选框</span>
+              </label>
+              <label class="pixel-radio">
+                <input type="radio" name="radio">
+                <span class="pixel-radiomark"></span>
+                <span class="pixel-font">单选框</span>
+              </label>
+            </div>
+            <div class="pixel-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch" class="pixel-font">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">卡片</h2>
+          <div class="space-y-4">
+            <div class="pixel-card-item bg-gray-700">
+              <h3 class="text-lg font-bold text-yellow-400 mb-2 pixel-font">基础卡片</h3>
+              <p class="text-yellow-400 pixel-font">带有像素边框的卡片样式</p>
+            </div>
+            <div class="pixel-card-item bg-gray-700">
+              <h3 class="text-lg font-bold text-yellow-400 mb-2 pixel-font">高亮卡片</h3>
+              <p class="text-yellow-400 pixel-font">带有发光效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">列表</h2>
+          <div class="space-y-4">
+            <div class="pixel-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-gray-700 flex items-center justify-center mr-4">
+                  <Sword class="w-5 h-5 text-yellow-400" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-yellow-400 pixel-font">列表项标题</h4>
+                  <p class="text-sm text-yellow-400 pixel-font">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="pixel-list-item">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-gray-700 flex items-center justify-center mr-4">
+                  <Shield class="w-5 h-5 text-yellow-400" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-yellow-400 pixel-font">列表项标题</h4>
+                  <p class="text-sm text-yellow-400 pixel-font">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">导航</h2>
+          <div class="space-y-4">
+            <div class="pixel-tabs">
+              <button class="pixel-tab active">标签1</button>
+              <button class="pixel-tab">标签2</button>
+              <button class="pixel-tab">标签3</button>
+            </div>
+            <div class="pixel-breadcrumbs">
+              <a href="#" class="pixel-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-yellow-400 mx-2" />
+              <a href="#" class="pixel-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-yellow-400 mx-2" />
+              <span class="pixel-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">进度</h2>
+          <div class="space-y-4">
+            <div class="pixel-progress">
+              <div class="pixel-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="pixel-health-bar">
+              <div class="pixel-health" style="width: 75%"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="pixel-card bg-gray-800 p-6">
+          <h2 class="text-lg font-bold text-yellow-400 mb-4 pixel-font">提示</h2>
+          <div class="space-y-4">
+            <div class="pixel-alert">
+              <span class="pixel-font">这是一条提示消息</span>
+              <button class="pixel-button-text">关闭</button>
+            </div>
+            <div class="pixel-alert success">
+              <Heart class="w-5 h-5 mr-2" />
+              <span class="pixel-font">成功提示</span>
+            </div>
+            <div class="pixel-alert error">
+              <Skull class="w-5 h-5 mr-2" />
+              <span class="pixel-font">错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="pixel-bottom-nav">
+          <button class="pixel-bottom-nav-item active">
+            <Map class="w-5 h-5" />
+            <span class="pixel-font">地图</span>
+          </button>
+          <button class="pixel-bottom-nav-item">
+            <Sword class="w-5 h-5" />
+            <span class="pixel-font">装备</span>
+          </button>
+          <button class="pixel-bottom-nav-item">
+            <Heart class="w-5 h-5" />
+            <span class="pixel-font">状态</span>
+          </button>
+          <button class="pixel-bottom-nav-item">
+            <Backpack class="w-5 h-5" />
+            <span class="pixel-font">背包</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Search, 
+  Bell, 
+  User, 
+  ChevronRight,
+  Gamepad as GamepadIcon,
+  Sword,
+  Shield,
+  Heart,
+  Skull,
+  Map,
+  Backpack
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'PixelFont';
+  src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+}
+
+.pixel-font {
+  font-family: 'Press Start 2P', cursive;
+  image-rendering: pixelated;
+}
+
+.pixel-bg {
+  background-image: linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
+                    linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
+                    linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
+                    linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
+  background-size: 4px 4px;
+  background-position: 0 0, 2px 0, 2px -2px, 0px 2px;
+}
+
+.pixel-card {
+  @apply border-4 border-yellow-400;
+  image-rendering: pixelated;
+  box-shadow: 4px 4px 0 theme('colors.yellow.600');
+}
+
+.pixel-button-primary {
+  @apply px-6 py-3 bg-yellow-400 text-gray-900 font-bold
+         border-b-4 border-r-4 border-yellow-600
+         hover:translate-x-[2px] hover:translate-y-[2px]
+         hover:border-b-2 hover:border-r-2
+         active:translate-x-[4px] active:translate-y-[4px]
+         active:border-b-0 active:border-r-0
+         transition-all duration-100;
+  image-rendering: pixelated;
+}
+
+.pixel-button-secondary {
+  @apply px-6 py-3 bg-gray-700 text-yellow-400 font-bold
+         border-b-4 border-r-4 border-gray-600
+         hover:translate-x-[2px] hover:translate-y-[2px]
+         hover:border-b-2 hover:border-r-2
+         active:translate-x-[4px] active:translate-y-[4px]
+         active:border-b-0 active:border-r-0
+         transition-all duration-100;
+  image-rendering: pixelated;
+}
+
+.pixel-button-text {
+  @apply px-4 py-2 text-yellow-400 font-bold hover:text-yellow-300;
+  image-rendering: pixelated;
+}
+
+.pixel-button-icon {
+  @apply p-3 bg-gray-700 text-yellow-400
+         border-b-4 border-r-4 border-gray-600
+         hover:translate-x-[2px] hover:translate-y-[2px]
+         hover:border-b-2 hover:border-r-2
+         active:translate-x-[4px] active:translate-y-[4px]
+         active:border-b-0 active:border-r-0
+         transition-all duration-100;
+  image-rendering: pixelated;
+}
+
+.pixel-input {
+  @apply w-full px-4 py-3 bg-gray-700 text-yellow-400
+         border-4 border-yellow-400
+         focus:outline-none focus:border-yellow-300
+         placeholder-yellow-600;
+  image-rendering: pixelated;
+}
+
+.pixel-label {
+  @apply block text-sm font-bold text-yellow-400 mb-2;
+  image-rendering: pixelated;
+}
+
+.pixel-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.pixel-checkbox input {
+  @apply w-6 h-6 bg-gray-700 border-4 border-yellow-400
+         checked:bg-yellow-400 checked:border-yellow-600;
+  image-rendering: pixelated;
+}
+
+.pixel-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.pixel-radio input {
+  @apply w-6 h-6 bg-gray-700 border-4 border-yellow-400
+         checked:bg-yellow-400 checked:border-yellow-600;
+  image-rendering: pixelated;
+}
+
+.pixel-switch {
+  @apply relative inline-flex items-center cursor-pointer;
+}
+
+.pixel-switch input {
+  @apply sr-only;
+}
+
+.pixel-switch label {
+  @apply w-16 h-8 bg-gray-700 border-4 border-yellow-400
+         after:content-[''] after:absolute after:top-0 after:left-0
+         after:bg-yellow-400 after:border-4 after:border-yellow-600
+         after:h-6 after:w-6
+         after:transition-all after:duration-100
+         peer-checked:after:translate-x-8;
+  image-rendering: pixelated;
+}
+
+.pixel-tabs {
+  @apply flex space-x-2 p-1 bg-gray-700 border-4 border-yellow-400;
+}
+
+.pixel-tab {
+  @apply px-6 py-2 text-yellow-400 font-bold;
+  image-rendering: pixelated;
+}
+
+.pixel-tab.active {
+  @apply bg-yellow-400 text-gray-900;
+}
+
+.pixel-progress {
+  @apply h-4 bg-gray-700 border-4 border-yellow-400;
+}
+
+.pixel-progress-bar {
+  @apply h-full bg-yellow-400;
+  transition: width 0.3s steps(10);
+}
+
+.pixel-health-bar {
+  @apply h-4 bg-red-900 border-4 border-red-400;
+}
+
+.pixel-health {
+  @apply h-full bg-red-500;
+  transition: width 0.3s steps(10);
+}
+
+.pixel-alert {
+  @apply flex items-center justify-between p-4
+         bg-gray-700 border-4 border-yellow-400
+         text-yellow-400;
+  image-rendering: pixelated;
+}
+
+.pixel-alert.success {
+  @apply border-green-400 text-green-400
+         bg-green-900;
+}
+
+.pixel-alert.error {
+  @apply border-red-400 text-red-400
+         bg-red-900;
+}
+
+.pixel-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0
+         bg-gray-800 border-t-4 border-yellow-400
+         flex justify-around p-2;
+}
+
+.pixel-bottom-nav-item {
+  @apply flex flex-col items-center p-2 text-yellow-400
+         hover:text-yellow-300;
+  image-rendering: pixelated;
+}
+
+.pixel-bottom-nav-item.active {
+  @apply text-yellow-300;
+}
+
+.pixel-color-card {
+  @apply p-4 border-4 border-gray-700
+         flex items-center justify-center font-bold;
+  image-rendering: pixelated;
+}
+
+.pixel-list-item {
+  @apply p-4 bg-gray-700 border-4 border-yellow-400
+         hover:bg-gray-600;
+  image-rendering: pixelated;
+}
+
+.pixel-breadcrumb {
+  @apply text-yellow-400 hover:text-yellow-300;
+  image-rendering: pixelated;
+}
+
+.pixel-breadcrumb.active {
+  @apply text-yellow-300;
+}
+
+.pixel-icon {
+  image-rendering: pixelated;
+  transform: scale(1.5);
+}
+</style> 

src/assets/templates/ui-standard/RetroView.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="min-h-screen bg-amber-50 p-4 md:p-8">
+    <!-- App Bar -->
+    <div class="retro-app-bar bg-amber-100 p-4 mb-6 border-b-4 border-amber-800">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-amber-800 mr-4" />
+          <h1 class="text-xl font-bold text-amber-800">Retro Design</h1>
+        </div>
+        <div class="flex items-center">
+          <Search class="w-5 h-5 text-amber-800 mr-4" />
+          <Bell class="w-5 h-5 text-amber-800 mr-4" />
+          <User class="w-5 h-5 text-amber-800" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="retro-color-card bg-amber-500 p-4">
+              <span class="text-white font-bold">Primary</span>
+            </div>
+            <div class="retro-color-card bg-amber-100 p-4">
+              <span class="text-amber-800 font-bold">Light</span>
+            </div>
+            <div class="retro-color-card bg-amber-700 p-4">
+              <span class="text-white font-bold">Dark</span>
+            </div>
+            <div class="retro-color-card bg-amber-50 p-4">
+              <span class="text-amber-800 font-bold">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-bold text-amber-800">H1 Bold 34px</h1>
+            <h2 class="text-3xl font-bold text-amber-800">H2 Bold 24px</h2>
+            <h3 class="text-2xl font-bold text-amber-800">H3 Bold 20px</h3>
+            <p class="text-base text-amber-800">Body Regular 16px</p>
+            <p class="text-sm text-amber-600">Caption Regular 12px</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="retro-button">主要按钮</button>
+              <button class="retro-button-outline">轮廓按钮</button>
+              <button class="retro-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="retro-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="retro-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="retro-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="retro-label">文本输入</label>
+              <input type="text" class="retro-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="retro-label">下拉选择</label>
+              <select class="retro-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="retro-checkbox">
+                <input type="checkbox">
+                <span class="retro-checkmark"></span>
+                复选框
+              </label>
+              <label class="retro-radio">
+                <input type="radio" name="radio">
+                <span class="retro-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="retro-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="retro-card-elevated p-4">
+              <h3 class="text-lg font-bold text-amber-800 mb-2">基础卡片</h3>
+              <p class="text-amber-600">带有阴影的卡片样式</p>
+            </div>
+            <div class="retro-card-outlined p-4">
+              <h3 class="text-lg font-bold text-amber-800 mb-2">轮廓卡片</h3>
+              <p class="text-amber-600">带有边框的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">列表</h2>
+          <div class="divide-y divide-amber-200">
+            <div class="retro-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-amber-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-amber-800">列表项标题</h4>
+                  <p class="text-sm text-amber-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="retro-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-amber-600" />
+                </div>
+                <div>
+                  <h4 class="text-base font-bold text-amber-800">列表项标题</h4>
+                  <p class="text-sm text-amber-600">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="retro-tabs">
+              <button class="retro-tab active">标签1</button>
+              <button class="retro-tab">标签2</button>
+              <button class="retro-tab">标签3</button>
+            </div>
+            <div class="retro-breadcrumbs">
+              <a href="#" class="retro-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-amber-400 mx-2" />
+              <a href="#" class="retro-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-amber-400 mx-2" />
+              <span class="retro-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="retro-progress">
+              <div class="retro-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="retro-progress-circular">
+              <div class="retro-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="retro-card p-6">
+          <h2 class="text-lg font-bold text-amber-800 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="retro-alert">
+              <span>这是一条提示消息</span>
+              <button class="retro-button-text">关闭</button>
+            </div>
+            <div class="retro-alert success">
+              <CheckCircle class="w-5 h-5 mr-2" />
+              <span>成功提示</span>
+            </div>
+            <div class="retro-alert error">
+              <XCircle class="w-5 h-5 mr-2" />
+              <span>错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="retro-bottom-nav">
+          <button class="retro-bottom-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="retro-bottom-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="retro-bottom-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="retro-bottom-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu, 
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.retro-app-bar {
+  @apply bg-amber-100 p-4 mb-6 border-b-4 border-amber-800;
+}
+
+.retro-card {
+  @apply bg-amber-50 rounded-lg border-2 border-amber-800 shadow-lg;
+}
+
+.retro-card-elevated {
+  @apply bg-amber-50 rounded-lg border-2 border-amber-800 shadow-xl;
+}
+
+.retro-card-outlined {
+  @apply bg-amber-50 rounded-lg border-2 border-amber-800;
+}
+
+.retro-button {
+  @apply bg-amber-500 text-white px-4 py-2 rounded-lg font-bold
+         hover:bg-amber-600 active:bg-amber-700
+         border-2 border-amber-800
+         shadow-lg hover:shadow-xl active:shadow-md
+         transition-all duration-200;
+}
+
+.retro-button-outline {
+  @apply bg-transparent text-amber-800 px-4 py-2 rounded-lg font-bold
+         border-2 border-amber-800
+         hover:bg-amber-100 active:bg-amber-200
+         shadow-lg hover:shadow-xl active:shadow-md
+         transition-all duration-200;
+}
+
+.retro-button-text {
+  @apply bg-transparent text-amber-800 px-4 py-2 rounded-lg font-bold
+         hover:bg-amber-100 active:bg-amber-200
+         transition-all duration-200;
+}
+
+.retro-button-icon {
+  @apply flex items-center justify-center p-2 rounded-lg
+         bg-amber-100 text-amber-800
+         hover:bg-amber-200 active:bg-amber-300
+         border-2 border-amber-800
+         shadow-lg hover:shadow-xl active:shadow-md
+         transition-all duration-200;
+}
+
+.retro-input {
+  @apply w-full px-4 py-2 rounded-lg bg-amber-50 border-2 border-amber-800
+         text-amber-800 placeholder-amber-400
+         focus:outline-none focus:border-amber-600
+         shadow-lg focus:shadow-xl
+         transition-all duration-200;
+}
+
+.retro-label {
+  @apply block text-sm font-bold text-amber-800 mb-1;
+}
+
+.retro-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.retro-checkbox input {
+  @apply w-5 h-5 rounded border-2 border-amber-800
+         checked:bg-amber-500 checked:border-amber-800
+         focus:outline-none focus:ring-2 focus:ring-amber-500/50
+         transition-all duration-200;
+}
+
+.retro-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.retro-radio input {
+  @apply w-5 h-5 rounded-full border-2 border-amber-800
+         checked:bg-amber-500 checked:border-amber-800
+         focus:outline-none focus:ring-2 focus:ring-amber-500/50
+         transition-all duration-200;
+}
+
+.retro-switch {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.retro-switch input {
+  @apply w-12 h-6 rounded-full bg-amber-50 border-2 border-amber-800
+         checked:bg-amber-500 checked:border-amber-800
+         focus:outline-none focus:ring-2 focus:ring-amber-500/50
+         transition-all duration-200;
+}
+
+.retro-list-item {
+  @apply flex items-center space-x-4 p-4 rounded-lg bg-amber-50
+         border-2 border-amber-800
+         hover:bg-amber-100
+         transition-all duration-200;
+}
+
+.retro-tabs {
+  @apply flex space-x-2 p-1 rounded-lg bg-amber-50 border-2 border-amber-800;
+}
+
+.retro-tab {
+  @apply px-4 py-2 rounded-md text-amber-800 font-bold
+         hover:text-amber-600 active:text-amber-700
+         transition-all duration-200;
+}
+
+.retro-tab.active {
+  @apply bg-amber-500 text-white;
+}
+
+.retro-breadcrumbs {
+  @apply flex items-center text-sm;
+}
+
+.retro-breadcrumb {
+  @apply text-amber-800 hover:text-amber-600 font-bold
+         transition-all duration-200;
+}
+
+.retro-breadcrumb.active {
+  @apply text-amber-600;
+}
+
+.retro-progress {
+  @apply w-full h-4 rounded-full bg-amber-50 border-2 border-amber-800
+         overflow-hidden;
+}
+
+.retro-progress-bar {
+  @apply h-full bg-amber-500 rounded-full
+         transition-all duration-300;
+}
+
+.retro-progress-circular {
+  @apply w-16 h-16 rounded-full bg-amber-50 border-2 border-amber-800
+         flex items-center justify-center;
+}
+
+.retro-progress-circle {
+  @apply w-12 h-12 rounded-full border-4 border-amber-500
+         border-t-transparent;
+  transform: rotate(calc(var(--progress) * 3.6deg));
+}
+
+.retro-alert {
+  @apply flex items-center justify-between p-4 rounded-lg bg-amber-50
+         border-2 border-amber-800 text-amber-800 font-bold;
+}
+
+.retro-alert.success {
+  @apply border-green-800 text-green-800;
+}
+
+.retro-alert.error {
+  @apply border-red-800 text-red-800;
+}
+
+.retro-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-amber-100 border-t-4 border-amber-800
+         flex justify-around p-2;
+}
+
+.retro-bottom-nav-item {
+  @apply flex flex-col items-center p-2 text-amber-800 font-bold
+         hover:text-amber-600 transition-all duration-200;
+}
+
+.retro-bottom-nav-item.active {
+  @apply text-amber-600;
+}
+
+.retro-color-card {
+  @apply p-4 rounded-lg border-2 border-amber-800
+         flex items-center justify-center font-bold
+         shadow-lg;
+}
+</style> 

src/assets/templates/ui-standard/SkeuomorphicView.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="min-h-screen bg-amber-50 p-6">
+    <!-- 顶部导航栏 -->
+    <div class="skeuomorphic-nav-bar mb-8">
+      <div class="flex items-center justify-between">
+        <button class="skeuomorphic-button">
+          <Menu class="w-6 h-6" />
+        </button>
+        <div class="flex items-center space-x-4">
+          <button class="skeuomorphic-button">
+            <Search class="w-6 h-6" />
+          </button>
+          <button class="skeuomorphic-button">
+            <Bell class="w-6 h-6" />
+          </button>
+          <button class="skeuomorphic-button">
+            <User class="w-6 h-6" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="grid grid-cols-3 gap-6">
+      <!-- 颜色系统 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">颜色系统</h3>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="skeuomorphic-color-card bg-amber-500">
+            <span class="text-white">主色</span>
+          </div>
+          <div class="skeuomorphic-color-card bg-amber-200">
+            <span class="text-amber-800">浅色</span>
+          </div>
+          <div class="skeuomorphic-color-card bg-amber-700">
+            <span class="text-white">深色</span>
+          </div>
+          <div class="skeuomorphic-color-card bg-amber-50">
+            <span class="text-amber-800">背景色</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 排版系统 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">排版系统</h3>
+        <div class="space-y-4">
+          <h1 class="text-3xl font-bold text-amber-800">标题 1</h1>
+          <h2 class="text-2xl font-bold text-amber-800">标题 2</h2>
+          <h3 class="text-xl font-bold text-amber-800">标题 3</h3>
+          <p class="text-base text-amber-800">正文文本</p>
+          <p class="text-sm text-amber-600">小号文本</p>
+        </div>
+      </div>
+
+      <!-- 按钮组件 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">按钮组件</h3>
+        <div class="space-y-4">
+          <button class="skeuomorphic-button">主要按钮</button>
+          <button class="skeuomorphic-button-outline">轮廓按钮</button>
+          <button class="skeuomorphic-button-text">文本按钮</button>
+          <button class="skeuomorphic-button-icon">
+            <Home class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      <!-- 表单元素 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">表单元素</h3>
+        <div class="space-y-4">
+          <input type="text" class="skeuomorphic-input" placeholder="文本输入框">
+          <select class="skeuomorphic-select">
+            <option>下拉选择</option>
+          </select>
+          <div class="flex items-center space-x-4">
+            <label class="skeuomorphic-checkbox">
+              <input type="checkbox">
+              <span>复选框</span>
+            </label>
+            <label class="skeuomorphic-radio">
+              <input type="radio" name="radio">
+              <span>单选框</span>
+            </label>
+          </div>
+          <label class="skeuomorphic-switch">
+            <input type="checkbox">
+            <span>开关</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- 卡片组件 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">卡片组件</h3>
+        <div class="space-y-4">
+          <div class="skeuomorphic-card-inset">
+            <h4 class="font-semibold mb-2">内嵌卡片</h4>
+            <p class="text-sm">卡片内容</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 列表组件 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">列表组件</h3>
+        <div class="space-y-4">
+          <div class="skeuomorphic-list-item">
+            <div class="w-10 h-10 bg-amber-200 rounded-full"></div>
+            <div>
+              <h4 class="font-semibold">列表项标题</h4>
+              <p class="text-sm text-amber-600">列表项描述</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 导航组件 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">导航组件</h3>
+        <div class="space-y-4">
+          <div class="skeuomorphic-tabs">
+            <button class="active">标签 1</button>
+            <button>标签 2</button>
+            <button>标签 3</button>
+          </div>
+          <div class="skeuomorphic-breadcrumb">
+            <span>首页</span>
+            <ChevronRight class="w-4 h-4" />
+            <span>当前页面</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 进度指示器 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">进度指示器</h3>
+        <div class="space-y-4">
+          <div class="skeuomorphic-progress">
+            <div class="progress-bar" style="width: 60%"></div>
+          </div>
+          <div class="skeuomorphic-progress-circle">
+            <div class="progress-circle" style="--progress: 60%"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 提示组件 -->
+      <div class="skeuomorphic-card">
+        <h3 class="text-lg font-semibold mb-4">提示组件</h3>
+        <div class="space-y-4">
+          <div class="skeuomorphic-alert">
+            <CheckCircle class="w-5 h-5" />
+            <span>成功提示</span>
+          </div>
+          <div class="skeuomorphic-alert error">
+            <XCircle class="w-5 h-5" />
+            <span>错误提示</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="skeuomorphic-nav-bar fixed bottom-0 left-0 right-0">
+      <div class="flex justify-around">
+        <button class="skeuomorphic-button-icon">
+          <Home class="w-6 h-6" />
+          <span>首页</span>
+        </button>
+        <button class="skeuomorphic-button-icon">
+          <Compass class="w-6 h-6" />
+          <span>发现</span>
+        </button>
+        <button class="skeuomorphic-button-icon">
+          <Bell class="w-6 h-6" />
+          <span>通知</span>
+        </button>
+        <button class="skeuomorphic-button-icon">
+          <User class="w-6 h-6" />
+          <span>我的</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu, 
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.skeuomorphic-nav-bar {
+  @apply bg-amber-100 p-4 rounded-lg shadow-inner border border-amber-200;
+}
+
+.skeuomorphic-card {
+  @apply bg-amber-50 p-6 rounded-lg shadow-md border border-amber-200;
+}
+
+.skeuomorphic-card-inset {
+  @apply bg-amber-100 p-4 rounded-lg shadow-inner border border-amber-200;
+}
+
+.skeuomorphic-button {
+  @apply bg-amber-500 text-white px-4 py-2 rounded-lg shadow-md 
+         hover:bg-amber-600 active:shadow-inner active:translate-y-0.5 
+         border border-amber-600;
+}
+
+.skeuomorphic-button-outline {
+  @apply bg-transparent text-amber-600 px-4 py-2 rounded-lg 
+         border-2 border-amber-500 shadow-md
+         hover:bg-amber-100 active:shadow-inner active:translate-y-0.5;
+}
+
+.skeuomorphic-button-text {
+  @apply bg-transparent text-amber-600 px-4 py-2 rounded-lg
+         hover:bg-amber-100 active:bg-amber-200;
+}
+
+.skeuomorphic-button-icon {
+  @apply flex items-center justify-center p-2 rounded-lg
+         bg-amber-100 text-amber-600 shadow-md
+         hover:bg-amber-200 active:shadow-inner active:translate-y-0.5
+         border border-amber-200;
+}
+
+.skeuomorphic-input {
+  @apply w-full px-4 py-2 rounded-lg bg-amber-50 border-2 border-amber-300
+         focus:outline-none focus:border-amber-500 shadow-inner;
+}
+
+.skeuomorphic-select {
+  @apply w-full px-4 py-2 rounded-lg bg-amber-50 border-2 border-amber-300
+         focus:outline-none focus:border-amber-500 shadow-inner;
+}
+
+.skeuomorphic-checkbox {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.skeuomorphic-checkbox input {
+  @apply w-5 h-5 rounded border-2 border-amber-500
+         checked:bg-amber-500 checked:border-amber-500
+         focus:outline-none focus:ring-2 focus:ring-amber-200;
+}
+
+.skeuomorphic-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.skeuomorphic-radio input {
+  @apply w-5 h-5 rounded-full border-2 border-amber-500
+         checked:bg-amber-500 checked:border-amber-500
+         focus:outline-none focus:ring-2 focus:ring-amber-200;
+}
+
+.skeuomorphic-switch {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.skeuomorphic-switch input {
+  @apply w-12 h-6 rounded-full bg-amber-200 border-2 border-amber-300
+         checked:bg-amber-500 checked:border-amber-600
+         focus:outline-none focus:ring-2 focus:ring-amber-200;
+}
+
+.skeuomorphic-list-item {
+  @apply flex items-center space-x-4 p-4 rounded-lg bg-amber-100
+         border border-amber-200 shadow-inner;
+}
+
+.skeuomorphic-tabs {
+  @apply flex space-x-2 p-1 rounded-lg bg-amber-100 border border-amber-200;
+}
+
+.skeuomorphic-tabs button {
+  @apply px-4 py-2 rounded-md text-amber-600
+         hover:bg-amber-200 active:bg-amber-300;
+}
+
+.skeuomorphic-tabs button.active {
+  @apply bg-amber-500 text-white;
+}
+
+.skeuomorphic-breadcrumb {
+  @apply flex items-center space-x-2 text-amber-600;
+}
+
+.skeuomorphic-progress {
+  @apply w-full h-4 rounded-full bg-amber-100 border border-amber-200
+         shadow-inner overflow-hidden;
+}
+
+.skeuomorphic-progress .progress-bar {
+  @apply h-full bg-amber-500 rounded-full;
+}
+
+.skeuomorphic-progress-circle {
+  @apply w-16 h-16 rounded-full bg-amber-100 border border-amber-200
+         shadow-inner flex items-center justify-center;
+}
+
+.skeuomorphic-progress-circle .progress-circle {
+  @apply w-12 h-12 rounded-full border-4 border-amber-500
+         border-t-transparent;
+  transform: rotate(calc(var(--progress) * 3.6deg));
+}
+
+.skeuomorphic-alert {
+  @apply flex items-center space-x-2 p-4 rounded-lg bg-amber-100
+         border border-amber-200 shadow-inner text-amber-600;
+}
+
+.skeuomorphic-alert.error {
+  @apply bg-red-100 border-red-200 text-red-600;
+}
+
+.skeuomorphic-color-card {
+  @apply p-4 rounded-lg shadow-md border border-amber-200
+         flex items-center justify-center font-medium;
+}
+</style> 

src/assets/templates/ui-standard/SteampunkView.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="steampunk-container bg-amber-50 min-h-screen">
+    <!-- 顶部导航栏 -->
+    <div class="steampunk-nav bg-amber-900 text-amber-100 p-4 shadow-lg">
+      <div class="container mx-auto flex justify-between items-center">
+        <h1 class="text-2xl font-bold">蒸汽朋克设计</h1>
+        <div class="flex space-x-4">
+          <button class="steampunk-btn">首页</button>
+          <button class="steampunk-btn">组件</button>
+          <button class="steampunk-btn">文档</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-8">
+      <div class="grid grid-cols-3 gap-8">
+        <!-- 左侧栏：颜色系统 -->
+        <div class="steampunk-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-amber-800">颜色系统</h2>
+          <div class="space-y-4">
+            <div class="color-swatch bg-amber-900 h-12 rounded"></div>
+            <div class="color-swatch bg-amber-800 h-12 rounded"></div>
+            <div class="color-swatch bg-amber-700 h-12 rounded"></div>
+            <div class="color-swatch bg-amber-600 h-12 rounded"></div>
+          </div>
+        </div>
+
+        <!-- 中间栏：组件展示 -->
+        <div class="steampunk-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-amber-800">组件展示</h2>
+          <div class="space-y-6">
+            <!-- 按钮 -->
+            <div class="space-y-2">
+              <button class="steampunk-btn w-full">主要按钮</button>
+              <button class="steampunk-btn-secondary w-full">次要按钮</button>
+            </div>
+            
+            <!-- 输入框 -->
+            <div class="space-y-2">
+              <input type="text" class="steampunk-input" placeholder="输入文本">
+              <textarea class="steampunk-input" placeholder="多行文本"></textarea>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧栏：装饰元素 -->
+        <div class="steampunk-card p-6">
+          <h2 class="text-xl font-bold mb-4 text-amber-800">装饰元素</h2>
+          <div class="space-y-4">
+            <div class="gear-decoration"></div>
+            <div class="pipe-decoration"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Settings, Zap, Stars, ChevronDown, X } from 'lucide-vue-next'
+</script>
+
+<style scoped>
+.steampunk-container {
+  background-image: url('@/assets/steampunk-bg.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+}
+
+.steampunk-card {
+  background: rgba(251, 245, 235, 0.9);
+  border: 2px solid #92400e;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.steampunk-btn {
+  background: #92400e;
+  color: #fef3c7;
+  padding: 0.5rem 1rem;
+  border: 2px solid #78350f;
+  border-radius: 4px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+
+.steampunk-btn:hover {
+  background: #78350f;
+  transform: translateY(-2px);
+}
+
+.steampunk-btn-secondary {
+  background: #fef3c7;
+  color: #92400e;
+  padding: 0.5rem 1rem;
+  border: 2px solid #92400e;
+  border-radius: 4px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+
+.steampunk-input {
+  width: 100%;
+  padding: 0.5rem;
+  background: #fef3c7;
+  border: 2px solid #92400e;
+  border-radius: 4px;
+  color: #92400e;
+}
+
+.steampunk-input:focus {
+  outline: none;
+  border-color: #78350f;
+  box-shadow: 0 0 0 2px rgba(146, 64, 14, 0.2);
+}
+
+.gear-decoration {
+  width: 100px;
+  height: 100px;
+  background: #92400e;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 10s linear infinite;
+}
+
+.gear-decoration::before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: #fef3c7;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pipe-decoration {
+  width: 100%;
+  height: 40px;
+  background: #92400e;
+  border-radius: 20px;
+  position: relative;
+}
+
+.pipe-decoration::before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: #78350f;
+  border-radius: 50%;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+}
+</style> 

src/assets/templates/ui-standard/ThreeDDesignView.vue

@@ -0,0 +1,674 @@
+<template>
+  <div class="min-h-screen bg-indigo-50 p-4 md:p-8">
+    <!-- Navigation Bar -->
+    <div class="three-d-nav-bar p-4 mb-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-6 h-6 text-indigo-900 mr-4" />
+          <h1 class="text-xl font-medium text-indigo-900">3D Design</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="three-d-button-icon">
+            <Search class="w-5 h-5 text-indigo-900" />
+          </button>
+          <button class="three-d-button-icon">
+            <Bell class="w-5 h-5 text-indigo-900" />
+          </button>
+          <button class="three-d-button-icon">
+            <User class="w-5 h-5 text-indigo-900" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left Column -->
+      <div class="space-y-6">
+        <!-- Color System -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">色彩系统</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <div class="three-d-color-card p-4">
+              <span class="text-indigo-900">Primary</span>
+            </div>
+            <div class="three-d-color-card p-4">
+              <span class="text-indigo-900">Light</span>
+            </div>
+            <div class="three-d-color-card p-4">
+              <span class="text-indigo-900">Dark</span>
+            </div>
+            <div class="three-d-color-card p-4">
+              <span class="text-indigo-900">Background</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Typography -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">排版</h2>
+          <div class="space-y-4">
+            <h1 class="text-4xl font-medium text-indigo-900">Large Title</h1>
+            <h2 class="text-3xl font-medium text-indigo-900">Title 1</h2>
+            <h3 class="text-2xl font-medium text-indigo-900">Title 2</h3>
+            <h4 class="text-xl font-medium text-indigo-900">Title 3</h4>
+            <p class="text-base text-indigo-800">Body</p>
+            <p class="text-sm text-indigo-700">Caption</p>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">按钮</h2>
+          <div class="space-y-4">
+            <div class="flex flex-wrap gap-4">
+              <button class="three-d-button">主要按钮</button>
+              <button class="three-d-button-outline">轮廓按钮</button>
+              <button class="three-d-button-text">文本按钮</button>
+            </div>
+            <div class="flex flex-wrap gap-4">
+              <button class="three-d-button-icon">
+                <Home class="w-5 h-5" />
+              </button>
+              <button class="three-d-button-icon">
+                <Settings class="w-5 h-5" />
+              </button>
+              <button class="three-d-button-icon">
+                <User class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle Column -->
+      <div class="space-y-6">
+        <!-- Form Elements -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">表单元素</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="three-d-label">文本输入</label>
+              <input type="text" class="three-d-input" placeholder="请输入内容">
+            </div>
+            <div>
+              <label class="three-d-label">下拉选择</label>
+              <select class="three-d-input">
+                <option>选项1</option>
+                <option>选项2</option>
+                <option>选项3</option>
+              </select>
+            </div>
+            <div class="flex items-center space-x-4">
+              <label class="three-d-checkbox">
+                <input type="checkbox">
+                <span class="three-d-checkmark"></span>
+                复选框
+              </label>
+              <label class="three-d-radio">
+                <input type="radio" name="radio">
+                <span class="three-d-radiomark"></span>
+                单选框
+              </label>
+            </div>
+            <div class="three-d-switch">
+              <input type="checkbox" id="switch">
+              <label for="switch">开关</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cards -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">卡片</h2>
+          <div class="space-y-4">
+            <div class="three-d-card-elevated p-4">
+              <h3 class="text-lg font-medium mb-2 text-indigo-900">基础卡片</h3>
+              <p class="text-indigo-800">带有 3D 效果的基础卡片样式</p>
+            </div>
+            <div class="three-d-card-inset p-4">
+              <h3 class="text-lg font-medium mb-2 text-indigo-900">内嵌卡片</h3>
+              <p class="text-indigo-800">带有内嵌效果的卡片样式</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lists -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">列表</h2>
+          <div class="divide-y divide-indigo-200">
+            <div class="three-d-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 three-d-avatar flex items-center justify-center mr-4">
+                  <User class="w-5 h-5 text-indigo-900" />
+                </div>
+                <div>
+                  <h4 class="text-base font-medium text-indigo-900">列表项标题</h4>
+                  <p class="text-sm text-indigo-800">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+            <div class="three-d-list-item py-4">
+              <div class="flex items-center">
+                <div class="w-10 h-10 three-d-avatar flex items-center justify-center mr-4">
+                  <Settings class="w-5 h-5 text-indigo-900" />
+                </div>
+                <div>
+                  <h4 class="text-base font-medium text-indigo-900">列表项标题</h4>
+                  <p class="text-sm text-indigo-800">列表项描述文本</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column -->
+      <div class="space-y-6">
+        <!-- Navigation -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">导航</h2>
+          <div class="space-y-4">
+            <div class="three-d-tabs">
+              <button class="three-d-tab active">标签1</button>
+              <button class="three-d-tab">标签2</button>
+              <button class="three-d-tab">标签3</button>
+            </div>
+            <div class="three-d-breadcrumbs">
+              <a href="#" class="three-d-breadcrumb">首页</a>
+              <ChevronRight class="w-4 h-4 text-indigo-600 mx-2" />
+              <a href="#" class="three-d-breadcrumb">分类</a>
+              <ChevronRight class="w-4 h-4 text-indigo-600 mx-2" />
+              <span class="three-d-breadcrumb active">当前页面</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">进度</h2>
+          <div class="space-y-4">
+            <div class="three-d-progress">
+              <div class="three-d-progress-bar" style="width: 60%"></div>
+            </div>
+            <div class="three-d-progress-circular">
+              <div class="three-d-progress-circle" style="--progress: 75"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Alerts -->
+        <div class="three-d-card p-6">
+          <h2 class="text-lg font-medium text-indigo-900 mb-4">提示</h2>
+          <div class="space-y-4">
+            <div class="three-d-alert">
+              <span class="text-indigo-900">这是一条提示消息</span>
+              <button class="three-d-button-text">关闭</button>
+            </div>
+            <div class="three-d-alert success">
+              <CheckCircle class="w-5 h-5 mr-2 text-indigo-900" />
+              <span class="text-indigo-900">成功提示</span>
+            </div>
+            <div class="three-d-alert error">
+              <XCircle class="w-5 h-5 mr-2 text-indigo-900" />
+              <span class="text-indigo-900">错误提示</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="three-d-nav-bar">
+          <button class="three-d-nav-item active">
+            <Home class="w-5 h-5" />
+            <span>首页</span>
+          </button>
+          <button class="three-d-nav-item">
+            <Compass class="w-5 h-5" />
+            <span>发现</span>
+          </button>
+          <button class="three-d-nav-item">
+            <Bell class="w-5 h-5" />
+            <span>通知</span>
+          </button>
+          <button class="three-d-nav-item">
+            <User class="w-5 h-5" />
+            <span>我的</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { 
+  Menu,
+  Search, 
+  Bell, 
+  User, 
+  Home, 
+  Settings, 
+  ChevronRight, 
+  CheckCircle, 
+  XCircle, 
+  Compass 
+} from 'lucide-vue-next'
+</script>
+
+<style>
+/* 3D Design 样式 */
+.three-d-nav-bar {
+  background: #eef2ff;
+  border-bottom: 2px solid #6366f1;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+}
+
+.three-d-card {
+  background: #eef2ff;
+  border: 2px solid #6366f1;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease;
+}
+
+.three-d-card:hover {
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-color-card {
+  background: #eef2ff;
+  border: 2px solid #6366f1;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease;
+}
+
+.three-d-color-card:hover {
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-button {
+  background: #6366f1;
+  color: #eef2ff;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border: 2px solid #6366f1;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+}
+
+.three-d-button:hover {
+  background: #4f46e5;
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-button-outline {
+  background: transparent;
+  color: #6366f1;
+  padding: 12px 24px;
+  border: 2px solid #6366f1;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+}
+
+.three-d-button-outline:hover {
+  background: #eef2ff;
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-button-text {
+  color: #6366f1;
+  padding: 12px 24px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  transform-style: preserve-3d;
+}
+
+.three-d-button-text:hover {
+  color: #4f46e5;
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-button-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #6366f1;
+  border: 2px solid #6366f1;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+}
+
+.three-d-button-icon:hover {
+  background: #4f46e5;
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-input {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  background: #eef2ff;
+  border: 2px solid #6366f1;
+  color: #6366f1;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+}
+
+.three-d-input:focus {
+  border-color: #4f46e5;
+  outline: none;
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-input::placeholder {
+  color: #6366f1;
+}
+
+.three-d-label {
+  display: block;
+  color: #6366f1;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.three-d-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.three-d-checkmark {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  background: #eef2ff;
+  border: 2px solid #6366f1;
+  margin-right: 8px;
+  position: relative;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+}
+
+.three-d-checkbox input:checked + .three-d-checkmark {
+  background: #6366f1;
+  border-color: #4f46e5;
+}
+
+.three-d-checkmark:after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 12px;
+  border: 2px solid #eef2ff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 2px;
+  left: 6px;
+  opacity: 0;
+}
+
+.three-d-checkbox input:checked + .three-d-checkmark:after {
+  opacity: 1;
+}
+
+.three-d-radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.three-d-radiomark {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #eef2ff;
+  border: 2px solid #6366f1;
+  margin-right: 8px;
+  position: relative;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+}
+
+.three-d-radio input:checked + .three-d-radiomark {
+  border-color: #4f46e5;
+}
+
+.three-d-radiomark:after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #6366f1;
+  border-radius: 50%;
+  top: 4px;
+  left: 4px;
+  opacity: 0;
+}
+
+.three-d-radio input:checked + .three-d-radiomark:after {
+  opacity: 1;
+}
+
+.three-d-switch {
+  display: flex;
+  align-items: center;
+}
+
+.three-d-switch input {
+  display: none;
+}
+
+.three-d-switch label {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+  background: #6366f1;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+}
+
+.three-d-switch label:after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: #eef2ff;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: all 0.3s ease;
+}
+
+.three-d-switch input:checked + label {
+  background: #4f46e5;
+}
+
+.three-d-switch input:checked + label:after {
+  left: 28px;
+}
+
+.three-d-tabs {
+  display: flex;
+  border-radius: 8px;
+  background: #6366f1;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+}
+
+.three-d-tab {
+  padding: 12px 16px;
+  color: #eef2ff;
+  font-weight: 500;
+  position: relative;
+  flex: 1;
+  text-align: center;
+  transition: all 0.3s ease;
+  transform-style: preserve-3d;
+}
+
+.three-d-tab.active {
+  background: #eef2ff;
+  color: #6366f1;
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-breadcrumbs {
+  display: flex;
+  align-items: center;
+}
+
+.three-d-breadcrumb {
+  color: #6366f1;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  transform-style: preserve-3d;
+}
+
+.three-d-breadcrumb:hover {
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-breadcrumb.active {
+  color: #4f46e5;
+  font-weight: 500;
+}
+
+.three-d-progress {
+  height: 4px;
+  background: #6366f1;
+  border-radius: 2px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+}
+
+.three-d-progress-bar {
+  height: 100%;
+  background: #4f46e5;
+  border-radius: 2px;
+}
+
+.three-d-progress-circular {
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.three-d-progress-circle {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #6366f1;
+  border-radius: 50%;
+  border-top-color: #4f46e5;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.three-d-alert {
+  background: #eef2ff;
+  color: #6366f1;
+  padding: 12px 16px;
+  border: 2px solid #6366f1;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease;
+}
+
+.three-d-alert:hover {
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-alert.success {
+  background: #eef2ff;
+  border-color: #6366f1;
+}
+
+.three-d-alert.error {
+  background: #eef2ff;
+  border-color: #6366f1;
+}
+
+.three-d-nav-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #eef2ff;
+  border-top: 2px solid #6366f1;
+  display: flex;
+  justify-content: space-around;
+  padding: 12px 0;
+  box-shadow: 0 -4px 6px -1px rgba(99, 102, 241, 0.1), 0 -2px 4px -1px rgba(99, 102, 241, 0.06);
+}
+
+.three-d-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #6366f1;
+  padding: 8px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  transform-style: preserve-3d;
+}
+
+.three-d-nav-item:hover {
+  transform: translateY(-2px) rotateX(5deg);
+}
+
+.three-d-nav-item.active {
+  color: #4f46e5;
+  font-weight: 500;
+}
+
+.three-d-nav-item span {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.three-d-avatar {
+  background: #6366f1;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+}
+
+.three-d-card-elevated {
+  background: #eef2ff;
+  border: 2px solid #6366f1;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+}
+
+.three-d-card-inset {
+  background: #6366f1;
+  border-radius: 8px;
+  box-shadow: inset 0 4px 6px -1px rgba(99, 102, 241, 0.1), inset 0 2px 4px -1px rgba(99, 102, 241, 0.06);
+}
+</style> 

src/assets/templates/ui-standard/ThreeDView.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 p-4 md:p-8">
+    <!-- Header -->
+    <div class="mb-12">
+      <h1 class="text-3xl font-bold text-indigo-900 3d-title">3D Design</h1>
+      <p class="text-indigo-800">立体设计风格</p>
+    </div>
+
+    <!-- Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+      <div class="3d-card p-6">
+        <div class="w-12 h-12 3d-icon flex items-center justify-center mb-4">
+          <Palette class="w-6 h-6 text-indigo-600" />
+        </div>
+        <h3 class="text-xl font-bold text-indigo-900 mb-2">设计特点</h3>
+        <p class="text-indigo-800">立体效果，深度感，光影变化。</p>
+      </div>
+      <div class="3d-card p-6">
+        <div class="w-12 h-12 3d-icon flex items-center justify-center mb-4">
+          <Type class="w-6 h-6 text-indigo-600" />
+        </div>
+        <h3 class="text-xl font-bold text-indigo-900 mb-2">排版</h3>
+        <p class="text-indigo-800">立体文字，层次分明，空间感。</p>
+      </div>
+      <div class="3d-card p-6">
+        <div class="w-12 h-12 3d-icon flex items-center justify-center mb-4">
+          <Box class="w-6 h-6 text-indigo-600" />
+        </div>
+        <h3 class="text-xl font-bold text-indigo-900 mb-2">组件</h3>
+        <p class="text-indigo-800">立体按钮，悬浮效果，动态交互。</p>
+      </div>
+    </div>
+
+    <!-- Buttons -->
+    <div class="3d-card p-6 mb-8">
+      <h2 class="text-xl font-bold text-indigo-900 mb-4">按钮样式</h2>
+      <div class="flex flex-wrap gap-4">
+        <button class="3d-button px-4 py-2 text-white">
+          主要按钮
+        </button>
+        <button class="3d-button-outline px-4 py-2 text-indigo-900">
+          轮廓按钮
+        </button>
+        <button class="3d-button-text px-4 py-2 text-indigo-900">
+          文本按钮
+        </button>
+      </div>
+    </div>
+
+    <!-- Form Elements -->
+    <div class="3d-card p-6 mb-8">
+      <h2 class="text-xl font-bold text-indigo-900 mb-4">表单元素</h2>
+      <div class="space-y-4">
+        <div>
+          <label class="block text-sm font-bold text-indigo-900 mb-1">文本输入</label>
+          <input type="text" class="3d-input w-full px-3 py-2 text-indigo-900" placeholder="请输入内容">
+        </div>
+        <div>
+          <label class="block text-sm font-bold text-indigo-900 mb-1">下拉选择</label>
+          <select class="3d-input w-full px-3 py-2 text-indigo-900">
+            <option>选项1</option>
+            <option>选项2</option>
+            <option>选项3</option>
+          </select>
+        </div>
+        <div class="flex items-center space-x-2">
+          <div class="3d-checkbox w-4 h-4 flex items-center justify-center">
+            <Check class="w-3 h-3 text-indigo-600" />
+          </div>
+          <span class="text-sm font-bold text-indigo-900">复选框</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Lists -->
+    <div class="3d-card overflow-hidden">
+      <div class="divide-y divide-indigo-100">
+        <div class="p-4 flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="w-12 h-12 3d-icon flex items-center justify-center mr-4">
+              <User class="w-6 h-6 text-indigo-600" />
+            </div>
+            <div>
+              <h4 class="text-sm font-bold text-indigo-900">列表项标题</h4>
+              <p class="text-sm text-indigo-800">列表项描述文本</p>
+            </div>
+          </div>
+          <ChevronRight class="w-4 h-4 text-indigo-400" />
+        </div>
+        <div class="p-4 flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="w-12 h-12 3d-icon flex items-center justify-center mr-4">
+              <Settings class="w-6 h-6 text-indigo-600" />
+            </div>
+            <div>
+              <h4 class="text-sm font-bold text-indigo-900">列表项标题</h4>
+              <p class="text-sm text-indigo-800">列表项描述文本</p>
+            </div>
+          </div>
+          <ChevronRight class="w-4 h-4 text-indigo-400" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <div class="fixed bottom-0 left-0 right-0 3d-nav p-4">
+      <div class="flex justify-around">
+        <button class="3d-icon p-2">
+          <Home class="w-6 h-6 text-indigo-600" />
+        </button>
+        <button class="3d-icon p-2">
+          <Compass class="w-6 h-6 text-indigo-600" />
+        </button>
+        <button class="3d-icon p-2">
+          <Bell class="w-6 h-6 text-indigo-600" />
+        </button>
+        <button class="3d-icon p-2">
+          <User class="w-6 h-6 text-indigo-600" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Palette, Type, Box, User, ChevronRight, Settings, Home, Compass, Bell, Check } from 'lucide-vue-next'
+</script>
+
+<style>
+/* 3D 样式 */
+.3d-card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.3d-card:hover {
+  transform: translateY(-5px) rotateX(5deg);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+}
+
+.3d-icon {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.3d-icon:hover {
+  transform: translateY(-3px) rotateX(3deg);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.3d-button {
+  background: linear-gradient(135deg, #4f46e5, #7c3aed);
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.3d-button:hover {
+  transform: translateY(-3px) rotateX(3deg);
+  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
+}
+
+.3d-button-outline {
+  background: transparent;
+  border: 2px solid #4f46e5;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.1);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.3d-button-text {
+  background: transparent;
+  border: none;
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.3d-input {
+  background: white;
+  border: 2px solid #e0e7ff;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.3d-input:focus {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.3d-checkbox {
+  background: white;
+  border: 2px solid #e0e7ff;
+  border-radius: 4px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.3d-nav {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  transform-style: preserve-3d;
+}
+
+.3d-title {
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+</style> 

src/router/index.js

@@ -1,17 +1,135 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: HomeView
-  }
-]
+import MinimalistView from '../assets/templates/ui-standard/MinimalistView.vue'
+import DarkModeView from '../assets/templates/ui-standard/DarkModeView.vue'
+import RetroView from '../assets/templates/ui-standard/RetroView.vue'
+import ThreeDDesignView from '../assets/templates/ui-standard/ThreeDDesignView.vue'
+import SkeuomorphicView from '../assets/templates/ui-standard/SkeuomorphicView.vue'
+import MaterialView from '../assets/templates/ui-standard/MaterialView.vue'
+import IOSDesignView from '../assets/templates/ui-standard/IOSDesignView.vue'
+import FluentDesignView from '../assets/templates/ui-standard/FluentDesignView.vue'
+import NeumorphismView from '../assets/templates/ui-standard/NeumorphismView.vue'
+import GlassmorphismView from '../assets/templates/ui-standard/GlassmorphismView.vue'
+import BrutalismView from '../assets/templates/ui-standard/BrutalismView.vue'
+import CyberpunkView from '../assets/templates/ui-standard/CyberpunkView.vue'
+import OrganicDesignView from '../assets/templates/ui-standard/OrganicDesignView.vue'
+import PixelArtView from '../assets/templates/ui-standard/PixelArtView.vue'
+import MorphismView from '../assets/templates/ui-standard/MorphismView.vue'
+import AuroraView from '../assets/templates/ui-standard/AuroraView.vue'
+import NeonView from '../assets/templates/ui-standard/NeonView.vue'
+import SteampunkView from '../assets/templates/ui-standard/SteampunkView.vue'
+import HolographicView from '../assets/templates/ui-standard/HolographicView.vue'
+import GradientView from '../assets/templates/ui-standard/GradientView.vue'
 
 const router = createRouter({
-  history: createWebHashHistory(location.pathname),
-  routes
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/minimalist',
+      name: 'minimalist',
+      component: MinimalistView
+    },
+    {
+      path: '/dark-mode',
+      name: 'dark-mode',
+      component: DarkModeView
+    },
+    {
+      path: '/retro',
+      name: 'retro',
+      component: RetroView
+    },
+    {
+      path: '/3d-design',
+      name: '3d-design',
+      component: ThreeDDesignView
+    },
+    {
+      path: '/skeuomorphic',
+      name: 'skeuomorphic',
+      component: SkeuomorphicView
+    },
+    {
+      path: '/material',
+      name: 'material',
+      component: MaterialView
+    },
+    {
+      path: '/ios',
+      name: 'ios',
+      component: IOSDesignView
+    },
+    {
+      path: '/fluent',
+      name: 'fluent',
+      component: FluentDesignView
+    },
+    {
+      path: '/neumorphism',
+      name: 'neumorphism',
+      component: NeumorphismView
+    },
+    {
+      path: '/glassmorphism',
+      name: 'glassmorphism',
+      component: GlassmorphismView
+    },
+    {
+      path: '/brutalism',
+      name: 'brutalism',
+      component: BrutalismView
+    },
+    {
+      path: '/cyberpunk',
+      name: 'cyberpunk',
+      component: CyberpunkView
+    },
+    {
+      path: '/organic',
+      name: 'organic',
+      component: OrganicDesignView
+    },
+    {
+      path: '/pixel-art',
+      name: 'pixel-art',
+      component: PixelArtView
+    },
+    {
+      path: '/morphism',
+      name: 'morphism',
+      component: MorphismView
+    },
+    {
+      path: '/aurora',
+      name: 'aurora',
+      component: AuroraView
+    },
+    {
+      path: '/neon',
+      name: 'neon',
+      component: NeonView
+    },
+    {
+      path: '/steampunk',
+      name: 'steampunk',
+      component: SteampunkView
+    },
+    {
+      path: '/holographic',
+      name: 'holographic',
+      component: HolographicView
+    },
+    {
+      path: '/gradient',
+      name: 'gradient',
+      component: GradientView
+    }
+  ]
 })
 
 export default router

src/views/HomeView.vue

@@ -1,12 +1,552 @@
 <template>
-  <div class="h-screen w-screen flex justify-center items-center">
-    <h2>欢迎使用Prototype Design, 请您根据您的需要设计您的Prototype</h2>
+  <div class="min-h-screen bg-gray-100 p-4 md:p-8">
+    <div class="container mx-auto">
+      <h1 class="text-3xl font-bold text-gray-800 mb-8">设计风格</h1>
+      <p class="text-gray-800 mb-8">您可以选择您的设计风格偏好创建您的设计原型</p>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <!-- Material Design -->
+        <router-link to="/material" class="material-card">
+          <div class="card-content">
+            <div class="material-icon">
+              <Layers class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Material Design</h2>
+            <p class="text-gray-600">Google 的现代设计语言，强调层次感和动效</p>
+          </div>
+        </router-link>
+
+        <!-- iOS Design -->
+        <router-link to="/ios" class="ios-card">
+          <div class="card-content">
+            <div class="ios-icon">
+              <Apple class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">iOS Design</h2>
+            <p class="text-gray-600">苹果的设计语言，注重简洁和优雅</p>
+          </div>
+        </router-link>
+
+        <!-- Fluent Design -->
+        <router-link to="/fluent" class="fluent-card">
+          <div class="card-content">
+            <div class="fluent-icon">
+              <Monitor class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Fluent Design</h2>
+            <p class="text-gray-600">微软的现代设计语言，强调深度和光效</p>
+          </div>
+        </router-link>
+
+        <!-- Neumorphism -->
+        <router-link to="/neumorphism" class="neumorphism-card">
+          <div class="card-content">
+            <div class="neumorphism-icon">
+              <Box class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Neumorphism</h2>
+            <p class="text-gray-600">软拟态设计，通过光影创造立体感</p>
+          </div>
+        </router-link>
+
+        <!-- Glassmorphism -->
+        <router-link to="/glassmorphism" class="glassmorphism-card">
+          <div class="card-content">
+            <div class="glassmorphism-icon">
+              <Droplet class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Glassmorphism</h2>
+            <p class="text-gray-600">玻璃拟态设计，强调透明和模糊效果</p>
+          </div>
+        </router-link>
+
+        <!-- Brutalism -->
+        <router-link to="/brutalism" class="brutalism-card">
+          <div class="card-content">
+            <div class="brutalism-icon">
+              <Square class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Brutalism</h2>
+            <p class="text-gray-600">粗野主义设计，强调原始和粗犷</p>
+          </div>
+        </router-link>
+
+        <!-- Minimalist -->
+        <router-link to="/minimalist" class="minimalist-card">
+          <div class="card-content">
+            <div class="minimalist-icon">
+              <Minus class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Minimalist</h2>
+            <p class="text-gray-600">极简主义设计，强调留白和简洁</p>
+          </div>
+        </router-link>
+
+        <!-- Dark Mode -->
+        <router-link to="/dark-mode" class="dark-mode-card">
+          <div class="card-content">
+            <div class="dark-mode-icon">
+              <Moon class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Dark Mode</h2>
+            <p class="text-gray-600">深色模式设计，强调对比和舒适</p>
+          </div>
+        </router-link>
+
+        <!-- Retro -->
+        <router-link to="/retro" class="retro-card">
+          <div class="card-content">
+            <div class="retro-icon">
+              <Clock class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Retro</h2>
+            <p class="text-gray-600">复古风格设计，强调怀旧和经典</p>
+          </div>
+        </router-link>
+
+        <!-- 3D Design -->
+        <router-link to="/3d-design" class="three-d-card">
+          <div class="card-content">
+            <div class="three-d-icon">
+              <Box class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">ThreeD</h2>
+            <p class="text-gray-600">三维设计，立体空间感</p>
+          </div>
+        </router-link>
+
+        <!-- Skeuomorphic -->
+        <router-link to="/skeuomorphic" class="skeuomorphic-card">
+          <div class="card-content">
+            <div class="skeuomorphic-icon">
+              <Image class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Skeuomorphic</h2>
+            <p class="text-gray-600">拟物化设计，模拟真实物体纹理</p>
+          </div>
+        </router-link>
+
+        <!-- Cyberpunk -->
+        <router-link to="/cyberpunk" class="cyberpunk-card">
+          <div class="card-content">
+            <div class="cyberpunk-icon">
+              <Zap class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Cyberpunk</h2>
+            <p class="text-gray-600">赛博朋克风格，强调未来科技感</p>
+          </div>
+        </router-link>
+
+        <!-- Aurora -->
+        <router-link to="/aurora" class="aurora-card">
+          <div class="card-content">
+            <div class="aurora-icon">
+              <Sun class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Aurora</h2>
+            <p class="text-gray-600">极光风格，强调光效和渐变</p>
+          </div>
+        </router-link>
+
+        <!-- Steampunk -->
+        <router-link to="/steampunk" class="steampunk-card">
+          <div class="card-content">
+            <div class="steampunk-icon">
+              <Settings class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Steampunk</h2>
+            <p class="text-gray-600">蒸汽朋克风格，强调机械和复古</p>
+          </div>
+        </router-link>
+
+        <!-- Morphism -->
+        <router-link to="/morphism" class="morphism-card">
+          <div class="card-content">
+            <div class="morphism-icon">
+              <Box class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Morphism</h2>
+            <p class="text-gray-600">形态设计，流畅动效</p>
+          </div>
+        </router-link>
+
+        <!-- Holographic -->
+        <router-link to="/holographic" class="holographic-card">
+          <div class="card-content">
+            <div class="holographic-icon">
+              <Zap class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Holographic</h2>
+            <p class="text-gray-600">全息设计，未来科技感</p>
+          </div>
+        </router-link>
+
+        <!-- Gradient -->
+        <router-link to="/gradient" class="gradient-card">
+          <div class="card-content">
+            <div class="gradient-icon">
+              <Droplet class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Gradient</h2>
+            <p class="text-gray-600">渐变设计，流畅色彩过渡</p>
+          </div>
+        </router-link>
+
+        <!-- Neon -->
+        <router-link to="/neon" class="neon-card">
+          <div class="card-content">
+            <div class="neon-icon">
+              <Zap class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Neon</h2>
+            <p class="text-gray-600">霓虹设计，发光效果</p>
+          </div>
+        </router-link>
+
+        <!-- Organic -->
+        <router-link to="/organic" class="organic-card">
+          <div class="card-content">
+            <div class="organic-icon">
+              <Leaf class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Organic</h2>
+            <p class="text-gray-600">有机设计，自然流畅</p>
+          </div>
+        </router-link>
+
+        <!-- Pixel Art -->
+        <router-link to="/pixel-art" class="pixel-art-card">
+          <div class="card-content">
+            <div class="pixel-art-icon">
+              <Square class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">Pixel Art</h2>
+            <p class="text-gray-600">像素艺术，复古游戏风格</p>
+          </div>
+        </router-link>
+
+        <!-- ThreeD -->
+        <router-link to="/3d-design" class="three-d-card">
+          <div class="card-content">
+            <div class="three-d-icon">
+              <Box class="w-8 h-8" />
+            </div>
+            <h2 class="text-xl font-bold">ThreeD</h2>
+            <p class="text-gray-600">三维设计，立体空间感</p>
+          </div>
+        </router-link>
+      </div>
+    </div>
   </div>
 </template>
 
-<script>
-
-export default {}
+<script setup>
+import { 
+  Layers, Apple, Monitor, Box, Droplet, Square, 
+  Minus, Moon, Clock, Image, Zap, Sun, 
+  Settings, Leaf
+} from 'lucide-vue-next'
 </script>
-<style>
+
+<style scoped>
+.card-content {
+  @apply p-6 rounded-xl transition-all duration-300;
+}
+
+/* Material Design Card */
+.material-card {
+  @apply bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300;
+}
+
+.material-card:hover {
+  transform: translateY(-4px);
+}
+
+.material-icon {
+  @apply w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4;
+}
+
+/* iOS Design Card */
+.ios-card {
+  @apply bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300;
+}
+
+.ios-card:hover {
+  transform: translateY(-4px);
+}
+
+.ios-icon {
+  @apply w-12 h-12 bg-gray-100 rounded-2xl flex items-center justify-center mb-4;
+}
+
+/* Fluent Design Card */
+.fluent-card {
+  @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300;
+  background: linear-gradient(135deg, #0078D4 0%, #00B4FF 100%);
+}
+
+.fluent-card:hover {
+  transform: translateY(-4px);
+}
+
+.fluent-icon {
+  @apply w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4;
+}
+
+/* Neumorphism Card */
+.neumorphism-card {
+  @apply rounded-xl transition-all duration-300;
+  background: #E0E5EC;
+  box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);
+}
+
+.neumorphism-card:hover {
+  transform: translateY(-4px);
+}
+
+.neumorphism-icon {
+  @apply w-12 h-12 rounded-xl flex items-center justify-center mb-4;
+  background: #E0E5EC;
+  box-shadow: inset 3px 3px 7px rgb(163,177,198,0.6), inset -3px -3px 7px rgba(255,255,255, 0.5);
+}
+
+/* Glassmorphism Card */
+.glassmorphism-card {
+  @apply rounded-xl transition-all duration-300;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.glassmorphism-card:hover {
+  transform: translateY(-4px);
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.glassmorphism-icon {
+  @apply w-12 h-12 rounded-xl flex items-center justify-center mb-4;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(5px);
+}
+
+/* Brutalism Card */
+.brutalism-card {
+  @apply rounded-none border-4 border-black bg-white transition-all duration-300;
+}
+
+.brutalism-card:hover {
+  transform: translate(-4px, -4px);
+  box-shadow: 4px 4px 0 black;
+}
+
+.brutalism-icon {
+  @apply w-12 h-12 border-4 border-black flex items-center justify-center mb-4;
+}
+
+/* Minimalist Card */
+.minimalist-card {
+  @apply bg-white rounded-lg transition-all duration-300;
+  border: 1px solid #e5e7eb;
+}
+
+.minimalist-card:hover {
+  transform: translateY(-4px);
+}
+
+.minimalist-icon {
+  @apply w-12 h-12 border border-gray-200 rounded-lg flex items-center justify-center mb-4;
+}
+
+/* Dark Mode Card */
+.dark-mode-card {
+  @apply bg-gray-900 text-white rounded-xl transition-all duration-300;
+}
+
+.dark-mode-card:hover {
+  transform: translateY(-4px);
+}
+
+.dark-mode-icon {
+  @apply w-12 h-12 bg-gray-800 rounded-xl flex items-center justify-center mb-4;
+}
+
+/* Retro Card */
+.retro-card {
+  @apply bg-amber-50 rounded-lg border-2 border-amber-800 transition-all duration-300;
+}
+
+.retro-card:hover {
+  transform: translateY(-4px);
+}
+
+.retro-icon {
+  @apply w-12 h-12 bg-amber-100 rounded-lg border-2 border-amber-800 flex items-center justify-center mb-4;
+}
+
+/* 3D Design Card */
+.three-d-card {
+  @apply bg-gradient-to-br from-blue-600 to-indigo-600 rounded-xl transition-all duration-300;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+
+.three-d-card:hover {
+  transform: translateY(-4px) rotateX(10deg);
+}
+
+.three-d-icon {
+  @apply w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4;
+  transform: translateZ(20px);
+}
+
+/* Skeuomorphic Card */
+.skeuomorphic-card {
+  @apply bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl border border-gray-300 transition-all duration-300;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.2);
+}
+
+.skeuomorphic-card:hover {
+  transform: translateY(-4px);
+}
+
+.skeuomorphic-icon {
+  @apply w-12 h-12 bg-gradient-to-br from-gray-200 to-gray-300 rounded-xl border border-gray-400 flex items-center justify-center mb-4;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
+}
+
+/* Cyberpunk Card */
+.cyberpunk-card {
+  @apply bg-gradient-to-br from-purple-900 via-pink-900 to-red-900 rounded-xl transition-all duration-300;
+  border: 1px solid rgba(255, 0, 255, 0.3);
+}
+
+.cyberpunk-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
+}
+
+.cyberpunk-icon {
+  @apply w-12 h-12 bg-black/30 rounded-xl border border-pink-500/30 flex items-center justify-center mb-4;
+}
+
+/* Aurora Card */
+.aurora-card {
+  @apply bg-gradient-to-br from-gray-900 via-purple-900 to-blue-900 rounded-xl transition-all duration-300;
+  border: 1px solid rgba(147, 51, 234, 0.3);
+}
+
+.aurora-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
+}
+
+.aurora-icon {
+  @apply w-12 h-12 bg-black/30 rounded-xl border border-purple-500/30 flex items-center justify-center mb-4;
+}
+
+/* Steampunk Card */
+.steampunk-card {
+  @apply bg-amber-50 rounded-xl border-2 border-amber-800 transition-all duration-300;
+  background-image: url('@/assets/steampunk-bg.jpg');
+  background-size: cover;
+}
+
+.steampunk-card:hover {
+  transform: translateY(-4px);
+}
+
+.steampunk-icon {
+  @apply w-12 h-12 bg-amber-900 rounded-xl border-2 border-amber-800 flex items-center justify-center mb-4;
+  color: #fef3c7;
+}
+
+/* Morphism Card */
+.morphism-card {
+  @apply bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl transition-all duration-300;
+}
+
+.morphism-card:hover {
+  transform: translateY(-4px);
+}
+
+.morphism-icon {
+  @apply w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4;
+}
+
+/* Holographic Card */
+.holographic-card {
+  @apply bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-xl transition-all duration-300;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.holographic-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
+}
+
+.holographic-icon {
+  @apply w-12 h-12 bg-white/20 rounded-xl border border-white/30 flex items-center justify-center mb-4;
+}
+
+/* Gradient Card */
+.gradient-card {
+  @apply bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 rounded-xl transition-all duration-300;
+}
+
+.gradient-card:hover {
+  transform: translateY(-4px);
+}
+
+.gradient-icon {
+  @apply w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4;
+}
+
+/* Neon Card */
+.neon-card {
+  @apply bg-black rounded-xl transition-all duration-300;
+  border: 1px solid #ff00ff;
+  box-shadow: 0 0 10px #ff00ff;
+}
+
+.neon-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 0 20px #ff00ff;
+}
+
+.neon-icon {
+  @apply w-12 h-12 bg-black rounded-xl border border-cyan-500 flex items-center justify-center mb-4;
+  color: #00ffff;
+  text-shadow: 0 0 5px #00ffff;
+}
+
+/* Organic Card */
+.organic-card {
+  @apply bg-gradient-to-br from-green-100 to-emerald-100 rounded-xl transition-all duration-300;
+  border: 1px solid #10b981;
+}
+
+.organic-card:hover {
+  transform: translateY(-4px);
+}
+
+.organic-icon {
+  @apply w-12 h-12 bg-green-100 rounded-xl border border-emerald-200 flex items-center justify-center mb-4;
+  color: #10b981;
+}
+
+/* Pixel Art Card */
+.pixel-art-card {
+  @apply bg-gray-900 rounded-none transition-all duration-300;
+  border: 2px solid #4b5563;
+}
+
+.pixel-art-card:hover {
+  transform: translate(-4px, -4px);
+  box-shadow: 4px 4px 0 #4b5563;
+}
+
+.pixel-art-icon {
+  @apply w-12 h-12 bg-gray-800 rounded-none border-2 border-gray-700 flex items-center justify-center mb-4;
+  color: #9ca3af;
+}
 </style>