feat: #update

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

@@ -0,0 +1,508 @@
+<template>
+  <div class="ant-container min-h-screen bg-gray-50">
+    <!-- 顶部导航栏 -->
+    <div class="ant-header">
+      <div class="ant-header-content">
+        <div class="ant-logo">
+          <img :src="logoUrl" alt="Ant Design Logo" class="ant-logo-img">
+          <span class="ant-logo-text">Ant Design</span>
+        </div>
+        <div class="ant-nav">
+          <a href="#" class="ant-nav-item active">首页</a>
+          <a href="#" class="ant-nav-item">组件</a>
+          <a href="#" class="ant-nav-item">文档</a>
+          <a href="#" class="ant-nav-item">主题</a>
+        </div>
+        <div class="ant-header-actions">
+          <button class="ant-btn text">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="ant-btn text">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="ant-btn text">
+            <User class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="ant-main">
+      <!-- 卡片列表 -->
+      <div class="ant-card-list">
+        <div v-for="card in cards" :key="card.id" class="ant-card">
+          <div class="ant-card-cover">
+            <img :src="card.cover" :alt="card.title" class="ant-card-cover-img">
+          </div>
+          <div class="ant-card-body">
+            <div class="ant-card-meta">
+              <div class="ant-card-meta-avatar">
+                <div class="ant-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
+              </div>
+              <div class="ant-card-meta-content">
+                <h3 class="ant-card-meta-title">{{ card.title }}</h3>
+                <p class="ant-card-meta-description">{{ card.description }}</p>
+              </div>
+            </div>
+            <p class="ant-card-content">{{ card.content }}</p>
+            <div class="ant-card-actions">
+              <button class="ant-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
+              </button>
+              <button class="ant-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
+              </button>
+              <button class="ant-btn text">
+                <Share2 class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 表单元素 -->
+      <div class="ant-form">
+        <div class="ant-form-item">
+          <label class="ant-form-item-label">文本输入</label>
+          <div class="ant-form-item-control">
+            <input type="text" placeholder="请输入内容" class="ant-input">
+          </div>
+        </div>
+        <div class="ant-form-item">
+          <label class="ant-form-item-label">密码输入</label>
+          <div class="ant-form-item-control">
+            <input type="password" placeholder="请输入密码" class="ant-input">
+          </div>
+        </div>
+        <div class="ant-form-item">
+          <label class="ant-form-item-label">下拉选择</label>
+          <div class="ant-form-item-control">
+            <select class="ant-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="ant-form-item">
+          <label class="ant-form-item-label">开关</label>
+          <div class="ant-form-item-control">
+            <label class="ant-switch">
+              <input type="checkbox">
+              <span class="ant-switch-inner"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 按钮组 -->
+      <div class="ant-btn-group">
+        <button class="ant-btn primary">主要按钮</button>
+        <button class="ant-btn default">默认按钮</button>
+        <button class="ant-btn dashed">虚线按钮</button>
+        <button class="ant-btn text">文本按钮</button>
+        <button class="ant-btn link">链接按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="ant-tabs">
+        <div class="ant-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="ant-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
+          </div>
+        </div>
+        <div class="ant-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="ant-tabs-tabpane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="ant-tabs-tabpane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="ant-tabs-tabpane">
+            <p>标签页 3 的内容</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 对话框 -->
+      <div v-if="showDialog" class="ant-modal-mask">
+        <div class="ant-modal-wrap">
+          <div class="ant-modal">
+            <div class="ant-modal-content">
+              <div class="ant-modal-header">
+                <div class="ant-modal-title">对话框标题</div>
+                <button class="ant-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="ant-modal-body">
+                <p>这是一个 Ant Design 风格的对话框示例。</p>
+              </div>
+              <div class="ant-modal-footer">
+                <button class="ant-btn" @click="showDialog = false">取消</button>
+                <button class="ant-btn primary" @click="showDialog = false">确定</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 消息提示 -->
+      <div v-if="showMessage" class="ant-message">
+        <div class="ant-message-notice">
+          <div class="ant-message-notice-content">
+            <Info class="w-5 h-5" />
+            <span>这是一条消息提示</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 通知面板 -->
+      <div v-if="showNotifications" class="ant-notification">
+        <div class="ant-notification-notice">
+          <div class="ant-notification-notice-content">
+            <div class="ant-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="ant-notification-notice-message">通知标题</div>
+            <div class="ant-notification-notice-description">通知内容</div>
+          </div>
+          <button class="ant-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { 
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0idXJsKCNwYWludDApIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDAiIHgxPSIwIiB5MT0iMCIgeDI9IjMyIiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjMTg5MEZGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA2NkZGIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+'
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDgxLjQzMSAxMTIgMTA4QzExMiAxMzQuNTY5IDEzMy40MzEgMTU2IDE2MCAxNTZDMTg2LjU2OSAxNTYgMjA4IDEzNC41NjkgMjA4IDEwOEMyMDggODEuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iIzE4OTBGRiIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjMDA2NkZGIi8+PC9zdmc+',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-blue-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDgxLjQzMSAxMTIgMTA4QzExMiAxMzQuNTY5IDEzMy40MzEgMTU2IDE2MCAxNTZDMTg2LjU2OSAxNTYgMjA4IDEzNC41NjkgMjA4IDEwOEMyMDggODEuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iIzAwNjZGRiIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjMTg5MEZGIi8+PC9zdmc+',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-blue-600'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
+</script>
+
+<style scoped>
+.ant-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+}
+
+.ant-header {
+  @apply fixed top-0 left-0 right-0 h-16 bg-white shadow-sm z-10;
+}
+
+.ant-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
+}
+
+.ant-logo {
+  @apply flex items-center;
+}
+
+.ant-logo-img {
+  @apply h-8 w-8;
+}
+
+.ant-logo-text {
+  @apply ml-2 text-xl font-medium text-gray-900;
+}
+
+.ant-nav {
+  @apply flex items-center space-x-6;
+}
+
+.ant-nav-item {
+  @apply text-gray-600 hover:text-blue-500;
+}
+
+.ant-nav-item.active {
+  @apply text-blue-500;
+}
+
+.ant-header-actions {
+  @apply flex items-center space-x-2;
+}
+
+.ant-main {
+  @apply pt-20 pb-8 px-4;
+}
+
+.ant-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+}
+
+.ant-card {
+  @apply bg-white rounded overflow-hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.ant-card-cover {
+  @apply relative h-48 overflow-hidden;
+}
+
+.ant-card-cover-img {
+  @apply w-full h-full object-cover;
+}
+
+.ant-card-body {
+  @apply p-4;
+}
+
+.ant-card-meta {
+  @apply flex items-start mb-4;
+}
+
+.ant-card-meta-avatar {
+  @apply mr-4;
+}
+
+.ant-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+}
+
+.ant-card-meta-content {
+  @apply flex-1;
+}
+
+.ant-card-meta-title {
+  @apply text-base font-medium text-gray-900;
+}
+
+.ant-card-meta-description {
+  @apply text-sm text-gray-500;
+}
+
+.ant-card-content {
+  @apply text-gray-600 mb-4;
+}
+
+.ant-card-actions {
+  @apply flex items-center border-t border-gray-100 pt-4;
+}
+
+.ant-form {
+  @apply space-y-4 mt-6;
+}
+
+.ant-form-item {
+  @apply flex flex-col;
+}
+
+.ant-form-item-label {
+  @apply mb-2 text-gray-600;
+}
+
+.ant-form-item-control {
+  @apply flex-1;
+}
+
+.ant-input,
+.ant-select {
+  @apply w-full px-4 py-2 border border-gray-300 rounded hover:border-blue-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500;
+}
+
+.ant-switch {
+  @apply relative inline-block w-12 h-6;
+}
+
+.ant-switch input {
+  @apply hidden;
+}
+
+.ant-switch-inner {
+  @apply absolute inset-0 rounded-full bg-gray-300 transition-colors duration-300;
+}
+
+.ant-switch-inner:after {
+  content: '';
+  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5 shadow transition-transform duration-300;
+}
+
+.ant-switch input:checked + .ant-switch-inner {
+  @apply bg-blue-500;
+}
+
+.ant-switch input:checked + .ant-switch-inner:after {
+  @apply translate-x-6;
+}
+
+.ant-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.ant-btn {
+  @apply px-4 py-2 rounded text-sm font-medium transition-colors duration-300;
+}
+
+.ant-btn.primary {
+  @apply bg-blue-500 text-white hover:bg-blue-600;
+}
+
+.ant-btn.default {
+  @apply bg-white text-gray-600 border border-gray-300 hover:border-blue-500 hover:text-blue-500;
+}
+
+.ant-btn.dashed {
+  @apply bg-white text-gray-600 border border-dashed border-gray-300 hover:border-blue-500 hover:text-blue-500;
+}
+
+.ant-btn.text {
+  @apply bg-transparent text-gray-600 hover:text-blue-500;
+}
+
+.ant-btn.link {
+  @apply bg-transparent text-blue-500 hover:text-blue-600;
+}
+
+.ant-tabs {
+  @apply mt-6;
+}
+
+.ant-tabs-nav {
+  @apply flex border-b border-gray-200;
+}
+
+.ant-tabs-tab {
+  @apply px-4 py-3 text-gray-600 cursor-pointer hover:text-blue-500;
+}
+
+.ant-tabs-tab.active {
+  @apply text-blue-500 border-b-2 border-blue-500;
+}
+
+.ant-tabs-content {
+  @apply p-4;
+}
+
+.ant-tabs-tabpane {
+  @apply bg-white rounded p-4;
+}
+
+.ant-modal-mask {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
+}
+
+.ant-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
+}
+
+.ant-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
+}
+
+.ant-modal-content {
+  @apply bg-white rounded shadow-lg;
+}
+
+.ant-modal-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
+}
+
+.ant-modal-title {
+  @apply text-lg font-medium text-gray-900;
+}
+
+.ant-modal-close {
+  @apply text-gray-400 hover:text-gray-500;
+}
+
+.ant-modal-body {
+  @apply p-4;
+}
+
+.ant-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
+}
+
+.ant-message {
+  @apply fixed top-4 right-4 z-50;
+}
+
+.ant-message-notice {
+  @apply mb-4;
+}
+
+.ant-message-notice-content {
+  @apply flex items-center px-4 py-3 bg-white rounded shadow-lg;
+}
+
+.ant-notification {
+  @apply fixed top-4 right-4 z-50;
+}
+
+.ant-notification-notice {
+  @apply mb-4 bg-white rounded shadow-lg overflow-hidden;
+}
+
+.ant-notification-notice-content {
+  @apply p-4;
+}
+
+.ant-notification-notice-icon {
+  @apply float-left mr-4 text-blue-500;
+}
+
+.ant-notification-notice-message {
+  @apply text-base font-medium text-gray-900;
+}
+
+.ant-notification-notice-description {
+  @apply mt-1 text-sm text-gray-500;
+}
+
+.ant-notification-notice-close {
+  @apply absolute top-4 right-4 text-gray-400 hover:text-gray-500;
+}
+</style> 

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

@@ -1,417 +1,475 @@
 <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="aurora-container min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
+    <!-- 顶部应用栏 -->
+    <div class="aurora-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <Menu class="w-5 h-5 text-purple-200 mr-4" />
+          <h1 class="text-xl font-medium text-purple-100">Aurora Design</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 class="flex items-center space-x-4">
+          <button class="aurora-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="aurora-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="aurora-icon-button">
+            <User class="w-5 h-5" />
+          </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="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">
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="aurora-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-purple-100">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="aurora-nav-item active">
+                <Home class="w-5 h-5" />
+                <span>首页</span>
+              </a>
+              <a href="#" class="aurora-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="aurora-badge">12</span>
+              </a>
+              <a href="#" class="aurora-nav-item">
                 <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>
+                <span>收藏</span>
+              </a>
+              <a href="#" class="aurora-nav-item">
+                <Settings class="w-5 h-5" />
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="aurora-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-purple-100">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="aurora-list-item">
+                  <div class="aurora-avatar bg-gradient-to-br from-purple-500 to-indigo-500">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-purple-100">卡片标题</h3>
+                    <p class="text-purple-200">卡片副标题</p>
+                  </div>
+                  <button class="aurora-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="aurora-list-item">
+                  <div class="aurora-avatar bg-gradient-to-br from-indigo-500 to-blue-500">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-purple-100">另一个标题</h3>
+                    <p class="text-purple-200">另一个副标题</p>
+                  </div>
+                  <button class="aurora-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </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 class="aurora-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-purple-100">表单元素</h2>
+              <div class="space-y-4">
+                <div class="aurora-input-group">
+                  <label class="text-purple-200">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="aurora-input">
                 </div>
-                <div>
-                  <h4 class="text-base font-bold text-white">列表项标题</h4>
-                  <p class="text-sm text-gray-300">列表项描述文本</p>
+                <div class="aurora-input-group">
+                  <label class="text-purple-200">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="aurora-input">
                 </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 class="aurora-input-group">
+                  <label class="text-purple-200">下拉选择</label>
+                  <select class="aurora-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
                 </div>
-                <div>
-                  <h4 class="text-base font-bold text-white">列表项标题</h4>
-                  <p class="text-sm text-gray-300">列表项描述文本</p>
+                <div class="flex items-center space-x-4">
+                  <label class="aurora-checkbox">
+                    <input type="checkbox">
+                    <span class="aurora-checkmark"></span>
+                    <span class="text-purple-200">复选框</span>
+                  </label>
+                  <label class="aurora-radio">
+                    <input type="radio" name="radio">
+                    <span class="aurora-radiomark"></span>
+                    <span class="text-purple-200">单选框</span>
+                  </label>
+                </div>
+                <div class="aurora-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-purple-200">开关</label>
                 </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 class="aurora-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-purple-100">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="aurora-button">主要按钮</button>
+                <button class="aurora-button outlined">次要按钮</button>
+                <button class="aurora-button text">文本按钮</button>
+                <button class="aurora-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="aurora-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-purple-100">进度指示器</h2>
+              <div class="space-y-4">
+                <div class="aurora-progress">
+                  <div class="aurora-progress-bar" style="width: 60%"></div>
+                </div>
+                <div class="aurora-progress circular">
+                  <div class="aurora-progress-circle"></div>
+                </div>
+              </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 class="aurora-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-purple-100">对话框示例</h2>
+              <button class="aurora-button" @click="showDialog = true">打开对话框</button>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="aurora-bottom-nav">
+      <a href="#" class="aurora-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="aurora-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="aurora-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="aurora-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="aurora-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="aurora-dialog-overlay">
+      <div class="aurora-dialog">
+        <div class="aurora-dialog-header">
+          <h3 class="text-purple-100">对话框标题</h3>
+          <button class="aurora-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
+        <div class="aurora-dialog-content">
+          <p class="text-purple-200">这是一个极光风格的对话框示例。</p>
+        </div>
+        <div class="aurora-dialog-actions">
+          <button class="aurora-button text" @click="showDialog = false">取消</button>
+          <button class="aurora-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Search, 
-  Bell, 
-  User, 
-  ChevronRight,
-  Sun,
-  Moon,
-  Star,
-  CheckCircle,
-  XCircle,
-  Home,
-  Settings
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
 </script>
 
 <style scoped>
+.aurora-container {
+  font-family: 'Inter', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.aurora-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, 
+    rgba(147, 51, 234, 0.1) 0%,
+    rgba(79, 70, 229, 0.1) 50%,
+    rgba(59, 130, 246, 0.1) 100%
+  );
+  animation: aurora 15s ease infinite;
+  z-index: 0;
+}
+
+@keyframes aurora {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.aurora-app-bar {
+  @apply sticky top-0 z-10 bg-purple-900/50 backdrop-blur-sm;
+  border-bottom: 1px solid rgba(147, 51, 234, 0.2);
+}
+
+.aurora-icon-button {
+  @apply p-2 rounded-full text-purple-200;
+  transition: all 0.3s ease;
+  background: rgba(147, 51, 234, 0.1);
+}
+
+.aurora-icon-button:hover {
+  @apply bg-purple-800 text-purple-100;
+  transform: scale(1.1);
+}
+
 .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);
+  @apply rounded-lg p-4 bg-purple-900/50 backdrop-blur-sm;
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  transition: all 0.3s ease;
 }
 
-.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-card:hover {
+  @apply bg-purple-900/70;
+  transform: translateY(-2px);
 }
 
-.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-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-purple-200;
+  transition: all 0.3s ease;
 }
 
-.aurora-button-text {
-  @apply px-4 py-2 text-purple-400 font-bold
-         hover:text-purple-300;
+.aurora-nav-item:hover {
+  @apply bg-purple-800 text-purple-100;
 }
 
-.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-nav-item.active {
+  @apply bg-purple-800 text-purple-100;
+  background: linear-gradient(45deg, rgba(147, 51, 234, 0.3), rgba(79, 70, 229, 0.3));
 }
 
-.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-badge {
+  @apply bg-purple-500 text-white text-xs px-2 py-1 rounded-full;
 }
 
-.aurora-label {
-  @apply block text-sm font-bold text-white mb-2;
+.aurora-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
+  transition: all 0.3s ease;
 }
 
-.aurora-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.aurora-list-item:hover {
+  @apply bg-purple-800;
+}
+
+.aurora-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+}
+
+.aurora-input-group {
+  @apply space-y-1;
 }
 
-.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-input {
+  @apply w-full px-3 py-2 rounded-lg text-purple-100;
+  background: rgba(147, 51, 234, 0.1);
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  transition: all 0.3s ease;
+}
+
+.aurora-input:focus {
+  @apply outline-none;
+  background: rgba(147, 51, 234, 0.2);
+  border-color: rgba(147, 51, 234, 0.4);
 }
 
+.aurora-input::placeholder {
+  @apply text-purple-400;
+}
+
+.aurora-checkbox,
 .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-checkmark,
+.aurora-radiomark {
+  @apply w-5 h-5 rounded;
+  background: rgba(147, 51, 234, 0.1);
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  transition: all 0.3s ease;
+}
+
+.aurora-checkmark {
+  @apply rounded;
+}
+
+.aurora-radiomark {
+  @apply rounded-full;
+}
+
+.aurora-checkbox input:checked + .aurora-checkmark,
+.aurora-radio input:checked + .aurora-radiomark {
+  @apply bg-purple-500 border-purple-500;
 }
 
 .aurora-switch {
-  @apply relative inline-flex items-center cursor-pointer;
+  @apply flex items-center space-x-2;
 }
 
 .aurora-switch input {
-  @apply sr-only;
+  @apply hidden;
 }
 
 .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;
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(147, 51, 234, 0.1);
+  transition: all 0.3s ease;
 }
 
-.aurora-tabs {
-  @apply flex space-x-2 p-1 bg-black/30 backdrop-blur-md rounded-xl;
+.aurora-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-purple-100 rounded-full top-0.5 left-0.5;
+  transition: all 0.3s ease;
 }
 
-.aurora-tab {
-  @apply px-6 py-2 text-purple-400 font-bold rounded-lg;
+.aurora-switch input:checked + label {
+  @apply bg-purple-500;
 }
 
-.aurora-tab.active {
-  @apply bg-gradient-to-r from-purple-500 to-blue-500 text-white;
+.aurora-switch input:checked + label:after {
+  @apply translate-x-6;
 }
 
-.aurora-progress {
-  @apply h-4 bg-black/30 backdrop-blur-md rounded-full;
+.aurora-button {
+  @apply px-4 py-2 rounded-lg text-purple-100;
+  background: linear-gradient(45deg, rgba(147, 51, 234, 0.3), rgba(79, 70, 229, 0.3));
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  transition: all 0.3s ease;
 }
 
-.aurora-progress-bar {
-  @apply h-full bg-gradient-to-r from-purple-500 to-blue-500 rounded-full;
-  transition: width 0.3s ease;
+.aurora-button:hover {
+  @apply bg-purple-800;
+  transform: translateY(-2px);
+}
+
+.aurora-button.outlined {
+  @apply bg-transparent border border-purple-300;
 }
 
-.aurora-health-bar {
-  @apply h-4 bg-black/30 backdrop-blur-md rounded-full;
+.aurora-button.text {
+  @apply bg-transparent border-none;
 }
 
-.aurora-health {
-  @apply h-full bg-gradient-to-r from-pink-500 to-red-500 rounded-full;
-  transition: width 0.3s ease;
+.aurora-button.icon {
+  @apply p-2 rounded-full;
+}
+
+.aurora-progress {
+  @apply h-1 rounded-full overflow-hidden;
+  background: rgba(147, 51, 234, 0.1);
 }
 
-.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-progress-bar {
+  @apply h-full rounded-full;
+  background: linear-gradient(45deg, rgba(147, 51, 234, 0.5), rgba(79, 70, 229, 0.5));
 }
 
-.aurora-alert.success {
-  @apply border-emerald-500/20 text-emerald-400
-         bg-emerald-900/30;
+.aurora-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(147, 51, 234, 0.1);
 }
 
-.aurora-alert.error {
-  @apply border-red-500/20 text-red-400
-         bg-red-900/30;
+.aurora-progress-circle {
+  @apply w-full h-full rounded-full border-4;
+  border-image: linear-gradient(45deg, rgba(147, 51, 234, 0.5), rgba(79, 70, 229, 0.5)) 1;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
 .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;
+  @apply fixed bottom-0 left-0 right-0 bg-purple-900/50 backdrop-blur-sm flex justify-around items-center py-2;
+  border-top: 1px solid rgba(147, 51, 234, 0.2);
 }
 
 .aurora-bottom-nav-item {
-  @apply flex flex-col items-center p-2 text-purple-400
-         hover:text-purple-300;
+  @apply flex flex-col items-center space-y-1 text-purple-200;
+  transition: all 0.3s ease;
+}
+
+.aurora-bottom-nav-item:hover {
+  @apply text-purple-100;
 }
 
 .aurora-bottom-nav-item.active {
-  @apply text-white;
+  @apply text-purple-100;
+  background: linear-gradient(45deg, rgba(147, 51, 234, 0.3), rgba(79, 70, 229, 0.3));
 }
 
-.aurora-color-card {
-  @apply p-4 flex items-center justify-center font-bold;
+.aurora-dialog-overlay {
+  @apply fixed inset-0 bg-black/30 flex items-center justify-center;
+  backdrop-filter: blur(4px);
 }
 
-.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-dialog {
+  @apply rounded-lg p-4 bg-purple-900/80 backdrop-blur-sm w-full max-w-md;
+  border: 1px solid rgba(147, 51, 234, 0.2);
+}
+
+.aurora-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-purple-800;
 }
 
-.aurora-breadcrumb {
-  @apply text-purple-400 hover:text-purple-300;
+.aurora-dialog-content {
+  @apply p-4;
 }
 
-.aurora-breadcrumb.active {
-  @apply text-white font-bold;
+.aurora-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-purple-800;
 }
 </style> 

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

@@ -1,238 +1,184 @@
 <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 class="brutal-container min-h-screen bg-yellow-50">
+    <!-- 顶部导航栏 -->
+    <div class="brutal-header">
+      <div class="brutal-header-content">
+        <div class="brutal-logo">
+          <img :src="logoUrl" alt="Brutalism Logo" class="brutal-logo-img">
+          <span class="brutal-logo-text">BRUTALISM</span>
         </div>
-        <div class="flex items-center space-x-4">
-          <button class="brutal-button-icon">
-            <Search class="w-5 h-5 text-black" />
+        <div class="brutal-nav">
+          <a href="#" class="brutal-nav-item active">首页</a>
+          <a href="#" class="brutal-nav-item">组件</a>
+          <a href="#" class="brutal-nav-item">文档</a>
+          <a href="#" class="brutal-nav-item">主题</a>
+        </div>
+        <div class="brutal-header-actions">
+          <button class="brutal-btn text">
+            <Search class="w-5 h-5" />
           </button>
-          <button class="brutal-button-icon">
-            <Bell class="w-5 h-5 text-black" />
+          <button class="brutal-btn text">
+            <Bell class="w-5 h-5" />
           </button>
-          <button class="brutal-button-icon">
-            <User class="w-5 h-5 text-black" />
+          <button class="brutal-btn text">
+            <User class="w-5 h-5" />
           </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 class="brutal-main">
+      <!-- 卡片列表 -->
+      <div class="brutal-card-list">
+        <div v-for="card in cards" :key="card.id" class="brutal-card">
+          <div class="brutal-card-cover">
+            <img :src="card.cover" :alt="card.title" class="brutal-card-cover-img">
           </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 class="brutal-card-body">
+            <div class="brutal-card-meta">
+              <div class="brutal-card-meta-avatar">
+                <div class="brutal-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
+              </div>
+              <div class="brutal-card-meta-content">
+                <h3 class="brutal-card-meta-title">{{ card.title }}</h3>
+                <p class="brutal-card-meta-description">{{ card.description }}</p>
+              </div>
             </div>
-            <div class="flex flex-wrap gap-4">
-              <button class="brutal-button-icon">
-                <Home class="w-5 h-5" />
+            <p class="brutal-card-content">{{ card.content }}</p>
+            <div class="brutal-card-actions">
+              <button class="brutal-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
               </button>
-              <button class="brutal-button-icon">
-                <Settings class="w-5 h-5" />
+              <button class="brutal-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
               </button>
-              <button class="brutal-button-icon">
-                <User class="w-5 h-5" />
+              <button class="brutal-btn text">
+                <Share2 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 class="brutal-form">
+        <div class="brutal-form-item">
+          <label class="brutal-form-item-label">文本输入</label>
+          <div class="brutal-form-item-control">
+            <input type="text" placeholder="请输入内容" class="brutal-input">
           </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 class="brutal-form-item">
+          <label class="brutal-form-item-label">密码输入</label>
+          <div class="brutal-form-item-control">
+            <input type="password" placeholder="请输入密码" class="brutal-input">
           </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 class="brutal-form-item">
+          <label class="brutal-form-item-label">下拉选择</label>
+          <div class="brutal-form-item-control">
+            <select class="brutal-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="brutal-form-item">
+          <label class="brutal-form-item-label">开关</label>
+          <div class="brutal-form-item-control">
+            <label class="brutal-switch">
+              <input type="checkbox">
+              <span class="brutal-switch-inner"></span>
+            </label>
           </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 class="brutal-btn-group">
+        <button class="brutal-btn primary">主要按钮</button>
+        <button class="brutal-btn secondary">次要按钮</button>
+        <button class="brutal-btn outline">轮廓按钮</button>
+        <button class="brutal-btn text">文本按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="brutal-tabs">
+        <div class="brutal-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="brutal-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
+          </div>
+        </div>
+        <div class="brutal-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="brutal-tabs-tabpane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="brutal-tabs-tabpane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="brutal-tabs-tabpane">
+            <p>标签页 3 的内容</p>
           </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 v-if="showDialog" class="brutal-modal-mask">
+        <div class="brutal-modal-wrap">
+          <div class="brutal-modal">
+            <div class="brutal-modal-content">
+              <div class="brutal-modal-header">
+                <div class="brutal-modal-title">对话框标题</div>
+                <button class="brutal-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="brutal-modal-body">
+                <p>这是一个粗野主义风格的对话框示例。</p>
+              </div>
+              <div class="brutal-modal-footer">
+                <button class="brutal-btn" @click="showDialog = false">取消</button>
+                <button class="brutal-btn primary" @click="showDialog = false">确定</button>
+              </div>
             </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 v-if="showMessage" class="brutal-message">
+        <div class="brutal-message-notice">
+          <div class="brutal-message-notice-content">
+            <Info class="w-5 h-5" />
+            <span>这是一条消息提示</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>
+      <!-- 通知面板 -->
+      <div v-if="showNotifications" class="brutal-notification">
+        <div class="brutal-notification-notice">
+          <div class="brutal-notification-notice-content">
+            <div class="brutal-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="brutal-notification-notice-message">通知标题</div>
+            <div class="brutal-notification-notice-description">通知内容</div>
+          </div>
+          <button class="brutal-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
       </div>
@@ -241,378 +187,360 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu,
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4='
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB4PSI0MCIgeT0iNDAiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTYwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-black'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB4PSI0MCIgeT0iNDAiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTYwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-black'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
-<style>
-/* Brutalism 样式 */
-.brutal-nav-bar {
-  background: white;
-  border: 4px solid black;
-  box-shadow: 8px 8px 0 black;
+<style scoped>
+.brutal-container {
+  font-family: 'Bebas Neue', sans-serif;
+  background: linear-gradient(45deg, #fef9c3, #fef08a);
 }
 
-.brutal-card {
-  background: white;
-  border: 4px solid black;
-  box-shadow: 8px 8px 0 black;
+.brutal-header {
+  @apply fixed top-0 left-0 right-0 h-16 bg-white z-10;
+  box-shadow: 8px 8px 0 #000;
+  border: 4px solid #000;
+}
+
+.brutal-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
+}
+
+.brutal-logo {
+  @apply flex items-center;
 }
 
-.brutal-color-card {
-  background: white;
-  border: 4px solid black;
-  box-shadow: 4px 4px 0 black;
+.brutal-logo-img {
+  @apply h-8 w-8;
 }
 
-.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-logo-text {
+  @apply ml-2 text-2xl font-bold text-black;
+  letter-spacing: 2px;
 }
 
-.brutal-button:hover {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0 black;
+.brutal-nav {
+  @apply flex items-center space-x-6;
 }
 
-.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-nav-item {
+  @apply text-black hover:text-red-600 transition-colors duration-300;
+  font-weight: 900;
+  letter-spacing: 1px;
 }
 
-.brutal-button-outline:hover {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0 black;
+.brutal-nav-item.active {
+  @apply text-red-600;
 }
 
-.brutal-button-text {
-  color: black;
-  padding: 12px 24px;
-  font-weight: bold;
-  transition: all 0.2s ease;
+.brutal-header-actions {
+  @apply flex items-center space-x-2;
 }
 
-.brutal-button-text:hover {
-  text-decoration: underline;
+.brutal-main {
+  @apply pt-20 pb-8 px-4;
 }
 
-.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-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
 }
 
-.brutal-button-icon:hover {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0 black;
+.brutal-card {
+  @apply bg-white overflow-hidden;
+  box-shadow: 8px 8px 0 #000;
+  border: 4px solid #000;
+  transition: all 0.3s ease;
 }
 
-.brutal-input {
-  width: 100%;
-  padding: 12px;
-  border: 4px solid black;
-  background: white;
-  box-shadow: 4px 4px 0 black;
-  transition: all 0.2s ease;
+.brutal-card:hover {
+  transform: translate(-4px, -4px);
+  box-shadow: 12px 12px 0 #000;
 }
 
-.brutal-input:focus {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0 black;
+.brutal-card-cover {
+  @apply relative h-48 overflow-hidden;
 }
 
-.brutal-input::placeholder {
-  color: black;
-  opacity: 0.5;
+.brutal-card-cover-img {
+  @apply w-full h-full object-cover;
 }
 
-.brutal-label {
-  display: block;
-  color: black;
-  font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 8px;
+.brutal-card-body {
+  @apply p-4;
 }
 
-.brutal-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.brutal-card-meta {
+  @apply flex items-start mb-4;
 }
 
-.brutal-checkmark {
-  width: 24px;
-  height: 24px;
-  border: 4px solid black;
-  background: white;
-  box-shadow: 4px 4px 0 black;
-  margin-right: 8px;
-  position: relative;
+.brutal-card-meta-avatar {
+  @apply mr-4;
 }
 
-.brutal-checkbox input:checked + .brutal-checkmark {
-  background: black;
+.brutal-avatar {
+  @apply w-10 h-10 flex items-center justify-center text-white font-bold;
+  box-shadow: 4px 4px 0 #000;
+  border: 2px solid #000;
 }
 
-.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-card-meta-content {
+  @apply flex-1;
 }
 
-.brutal-checkbox input:checked + .brutal-checkmark:after {
-  opacity: 1;
+.brutal-card-meta-title {
+  @apply text-xl font-bold text-black;
+  letter-spacing: 1px;
 }
 
-.brutal-radio {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.brutal-card-meta-description {
+  @apply text-sm text-gray-600;
 }
 
-.brutal-radiomark {
-  width: 24px;
-  height: 24px;
-  border: 4px solid black;
-  background: white;
-  box-shadow: 4px 4px 0 black;
-  margin-right: 8px;
-  position: relative;
+.brutal-card-content {
+  @apply text-black mb-4;
 }
 
-.brutal-radio input:checked + .brutal-radiomark {
-  background: black;
+.brutal-card-actions {
+  @apply flex items-center border-t-2 border-black pt-4;
 }
 
-.brutal-radiomark:after {
-  content: '';
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  background: white;
-  border-radius: 50%;
-  top: 6px;
-  left: 6px;
-  opacity: 0;
+.brutal-form {
+  @apply space-y-4 mt-6;
+}
+
+.brutal-form-item {
+  @apply flex flex-col;
+}
+
+.brutal-form-item-label {
+  @apply mb-2 text-black font-bold;
+  letter-spacing: 1px;
+}
+
+.brutal-form-item-control {
+  @apply flex-1;
 }
 
-.brutal-radio input:checked + .brutal-radiomark:after {
-  opacity: 1;
+.brutal-input,
+.brutal-select {
+  @apply w-full px-4 py-2 bg-white border-4 border-black focus:border-red-600 text-black;
+  box-shadow: 4px 4px 0 #000;
+  transition: all 0.3s ease;
+}
+
+.brutal-input:focus,
+.brutal-select:focus {
+  box-shadow: 6px 6px 0 #000;
 }
 
 .brutal-switch {
-  display: flex;
-  align-items: center;
+  @apply relative inline-block w-12 h-6;
 }
 
 .brutal-switch input {
-  display: none;
+  @apply hidden;
 }
 
-.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-inner {
+  @apply absolute inset-0 bg-white transition-colors duration-300;
+  box-shadow: 4px 4px 0 #000;
+  border: 2px solid #000;
 }
 
-.brutal-switch label:after {
+.brutal-switch-inner:after {
   content: '';
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  background: black;
-  top: 3px;
-  left: 3px;
-  transition: all 0.2s ease;
+  @apply absolute w-5 h-5 bg-black top-0.5 left-0.5 shadow transition-transform duration-300;
+  box-shadow: 2px 2px 0 #000;
+}
+
+.brutal-switch input:checked + .brutal-switch-inner {
+  @apply bg-red-600;
+}
+
+.brutal-switch input:checked + .brutal-switch-inner:after {
+  @apply translate-x-6;
+}
+
+.brutal-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.brutal-btn {
+  @apply px-4 py-2 text-sm font-bold transition-all duration-300;
+  box-shadow: 4px 4px 0 #000;
+  letter-spacing: 1px;
+}
+
+.brutal-btn.primary {
+  @apply bg-black text-white hover:bg-red-600;
+  border: 2px solid #000;
+}
+
+.brutal-btn.secondary {
+  @apply bg-red-600 text-white hover:bg-red-700;
+  border: 2px solid #000;
 }
 
-.brutal-switch input:checked + label {
-  background: black;
+.brutal-btn.outline {
+  @apply bg-transparent text-black border-4 border-black hover:border-red-600;
 }
 
-.brutal-switch input:checked + label:after {
-  background: white;
-  left: 33px;
+.brutal-btn.text {
+  @apply bg-transparent text-black hover:text-red-600;
 }
 
 .brutal-tabs {
-  display: flex;
-  border: 4px solid black;
-  background: white;
-  box-shadow: 4px 4px 0 black;
-  overflow: hidden;
+  @apply mt-6;
 }
 
-.brutal-tab {
-  padding: 12px 16px;
-  color: black;
-  font-weight: bold;
-  position: relative;
-  flex: 1;
-  text-align: center;
+.brutal-tabs-nav {
+  @apply flex border-b-4 border-black;
 }
 
-.brutal-tab.active {
-  background: black;
-  color: white;
+.brutal-tabs-tab {
+  @apply px-4 py-3 text-black cursor-pointer hover:text-red-600 transition-colors duration-300;
+  font-weight: 900;
+  letter-spacing: 1px;
 }
 
-.brutal-breadcrumbs {
-  display: flex;
-  align-items: center;
+.brutal-tabs-tab.active {
+  @apply text-red-600 border-b-4 border-red-600;
 }
 
-.brutal-breadcrumb {
-  color: black;
-  text-decoration: none;
-  font-weight: bold;
+.brutal-tabs-content {
+  @apply p-4;
 }
 
-.brutal-breadcrumb.active {
-  color: black;
-  font-weight: bold;
+.brutal-tabs-tabpane {
+  @apply bg-white p-4;
+  box-shadow: 8px 8px 0 #000;
+  border: 4px solid #000;
 }
 
-.brutal-progress {
-  height: 8px;
-  background: white;
-  border: 4px solid black;
-  box-shadow: 4px 4px 0 black;
-  overflow: hidden;
+.brutal-modal-mask {
+  @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50;
 }
 
-.brutal-progress-bar {
-  height: 100%;
-  background: black;
+.brutal-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
 }
 
-.brutal-progress-circular {
-  width: 48px;
-  height: 48px;
-  position: relative;
+.brutal-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
 }
 
-.brutal-progress-circle {
-  width: 100%;
-  height: 100%;
-  border: 4px solid black;
-  border-radius: 50%;
-  border-top-color: transparent;
-  animation: spin 1s linear infinite;
+.brutal-modal-content {
+  @apply bg-white;
+  box-shadow: 12px 12px 0 #000;
+  border: 4px solid #000;
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.brutal-modal-header {
+  @apply flex justify-between items-center p-4 border-b-4 border-black;
 }
 
-.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-modal-title {
+  @apply text-xl font-bold text-black;
+  letter-spacing: 1px;
 }
 
-.brutal-alert.success {
-  background: white;
-  border-color: black;
+.brutal-modal-close {
+  @apply text-black hover:text-red-600;
 }
 
-.brutal-alert.error {
-  background: white;
-  border-color: black;
+.brutal-modal-body {
+  @apply p-4;
 }
 
-.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-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t-4 border-black;
 }
 
-.brutal-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: black;
-  padding: 8px;
-  font-weight: bold;
+.brutal-message {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.brutal-nav-item.active {
-  color: black;
-  font-weight: bold;
+.brutal-message-notice {
+  @apply mb-4;
 }
 
-.brutal-nav-item span {
-  font-size: 12px;
-  margin-top: 4px;
+.brutal-message-notice-content {
+  @apply flex items-center px-4 py-3 bg-white;
+  box-shadow: 8px 8px 0 #000;
+  border: 4px solid #000;
 }
 
-.brutal-avatar {
-  background: white;
-  border: 4px solid black;
-  box-shadow: 4px 4px 0 black;
+.brutal-notification {
+  @apply fixed top-4 right-4 z-50;
+}
+
+.brutal-notification-notice {
+  @apply mb-4 bg-white overflow-hidden;
+  box-shadow: 8px 8px 0 #000;
+  border: 4px solid #000;
+}
+
+.brutal-notification-notice-content {
+  @apply p-4;
+}
+
+.brutal-notification-notice-icon {
+  @apply float-left mr-4 text-black;
+}
+
+.brutal-notification-notice-message {
+  @apply text-xl font-bold text-black;
+  letter-spacing: 1px;
 }
 
-.brutal-card-elevated {
-  background: white;
-  border: 4px solid black;
-  box-shadow: 4px 4px 0 black;
+.brutal-notification-notice-description {
+  @apply mt-1 text-sm text-gray-600;
 }
 
-.brutal-card-inset {
-  background: white;
-  border: 4px solid black;
-  box-shadow: inset 4px 4px 0 black;
+.brutal-notification-notice-close {
+  @apply absolute top-4 right-4 text-black hover:text-red-600;
 }
 </style> 

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

@@ -1,419 +1,483 @@
 <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="cyberpunk-container min-h-screen bg-gradient-to-br from-purple-900 via-pink-900 to-blue-900">
+    <!-- 顶部应用栏 -->
+    <div class="cyberpunk-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <Menu class="w-5 h-5 text-pink-200 mr-4" />
+          <h1 class="text-xl font-medium text-pink-100">Cyberpunk Design</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 class="flex items-center space-x-4">
+          <button class="cyberpunk-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="cyberpunk-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="cyberpunk-icon-button">
+            <User class="w-5 h-5" />
+          </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="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">
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="cyberpunk-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-pink-100">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="cyberpunk-nav-item active">
                 <Home class="w-5 h-5" />
-              </button>
-              <button class="cyberpunk-button-icon">
+                <span>首页</span>
+              </a>
+              <a href="#" class="cyberpunk-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="cyberpunk-badge">12</span>
+              </a>
+              <a href="#" class="cyberpunk-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="cyberpunk-nav-item">
                 <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>
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="cyberpunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-pink-100">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="cyberpunk-list-item">
+                  <div class="cyberpunk-avatar bg-gradient-to-br from-purple-600 to-pink-600">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-pink-100">卡片标题</h3>
+                    <p class="text-pink-200">卡片副标题</p>
+                  </div>
+                  <button class="cyberpunk-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="cyberpunk-list-item">
+                  <div class="cyberpunk-avatar bg-gradient-to-br from-pink-600 to-blue-600">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-pink-100">另一个标题</h3>
+                    <p class="text-pink-200">另一个副标题</p>
+                  </div>
+                  <button class="cyberpunk-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </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 class="cyberpunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-pink-100">表单元素</h2>
+              <div class="space-y-4">
+                <div class="cyberpunk-input-group">
+                  <label class="text-pink-200">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="cyberpunk-input">
                 </div>
-                <div>
-                  <h4 class="text-base font-bold text-pink-500">列表项标题</h4>
-                  <p class="text-sm text-white">列表项描述文本</p>
+                <div class="cyberpunk-input-group">
+                  <label class="text-pink-200">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="cyberpunk-input">
                 </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 class="cyberpunk-input-group">
+                  <label class="text-pink-200">下拉选择</label>
+                  <select class="cyberpunk-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
                 </div>
-                <div>
-                  <h4 class="text-base font-bold text-blue-500">列表项标题</h4>
-                  <p class="text-sm text-white">列表项描述文本</p>
+                <div class="flex items-center space-x-4">
+                  <label class="cyberpunk-checkbox">
+                    <input type="checkbox">
+                    <span class="cyberpunk-checkmark"></span>
+                    <span class="text-pink-200">复选框</span>
+                  </label>
+                  <label class="cyberpunk-radio">
+                    <input type="radio" name="radio">
+                    <span class="cyberpunk-radiomark"></span>
+                    <span class="text-pink-200">单选框</span>
+                  </label>
+                </div>
+                <div class="cyberpunk-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-pink-200">开关</label>
                 </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 class="cyberpunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-pink-100">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="cyberpunk-button">主要按钮</button>
+                <button class="cyberpunk-button outlined">次要按钮</button>
+                <button class="cyberpunk-button text">文本按钮</button>
+                <button class="cyberpunk-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="cyberpunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-pink-100">进度指示器</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"></div>
+                </div>
+              </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 class="cyberpunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-pink-100">对话框示例</h2>
+              <button class="cyberpunk-button" @click="showDialog = true">打开对话框</button>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="cyberpunk-bottom-nav">
+      <a href="#" class="cyberpunk-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="cyberpunk-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="cyberpunk-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="cyberpunk-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="cyberpunk-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="cyberpunk-dialog-overlay">
+      <div class="cyberpunk-dialog">
+        <div class="cyberpunk-dialog-header">
+          <h3 class="text-pink-100">对话框标题</h3>
+          <button class="cyberpunk-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
+        <div class="cyberpunk-dialog-content">
+          <p class="text-pink-200">这是一个赛博朋克风格的对话框示例。</p>
+        </div>
+        <div class="cyberpunk-dialog-actions">
+          <button class="cyberpunk-button text" @click="showDialog = false">取消</button>
+          <button class="cyberpunk-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu, 
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
 </script>
 
 <style scoped>
+.cyberpunk-container {
+  font-family: 'Orbitron', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.cyberpunk-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, 
+    rgba(147, 51, 234, 0.1) 0%,
+    rgba(236, 72, 153, 0.1) 50%,
+    rgba(59, 130, 246, 0.1) 100%
+  );
+  animation: cyberpunk 15s ease infinite;
+  z-index: 0;
+}
+
+@keyframes cyberpunk {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
 .cyberpunk-app-bar {
-  @apply bg-gray-900 p-4 mb-6 border-b-2 border-pink-500;
+  @apply sticky top-0 z-10 bg-purple-900/50 backdrop-blur-sm;
+  border-bottom: 1px solid rgba(147, 51, 234, 0.2);
+}
+
+.cyberpunk-icon-button {
+  @apply p-2 rounded-full text-pink-200;
+  transition: all 0.3s ease;
+  background: rgba(147, 51, 234, 0.1);
+  border: 1px solid rgba(147, 51, 234, 0.2);
+}
+
+.cyberpunk-icon-button:hover {
+  @apply bg-pink-800 text-pink-100;
+  transform: scale(1.1);
 }
 
 .cyberpunk-card {
-  @apply bg-gray-900 rounded-lg border-2 border-pink-500/20 shadow-[0_0_10px_rgba(236,72,153,0.3)];
+  @apply rounded-lg p-4 bg-purple-900/50 backdrop-blur-sm;
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-.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:hover {
+  @apply bg-purple-900/70;
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
-.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-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-pink-200;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(147, 51, 234, 0.2);
 }
 
-.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-nav-item:hover {
+  @apply bg-pink-800 text-pink-100;
+}
+
+.cyberpunk-nav-item.active {
+  @apply bg-pink-800 text-pink-100;
+  background: linear-gradient(45deg, rgba(147, 51, 234, 0.3), rgba(236, 72, 153, 0.3));
 }
 
-.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-badge {
+  @apply bg-pink-500 text-white text-xs px-2 py-1 rounded-full;
 }
 
-.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-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(147, 51, 234, 0.2);
 }
 
-.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-list-item:hover {
+  @apply bg-pink-800;
 }
 
-.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-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
 }
 
-.cyberpunk-label {
-  @apply block text-sm font-bold text-pink-500 mb-1;
+.cyberpunk-input-group {
+  @apply space-y-1;
 }
 
-.cyberpunk-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.cyberpunk-input {
+  @apply w-full px-3 py-2 rounded-lg text-pink-100;
+  background: rgba(147, 51, 234, 0.1);
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  transition: all 0.3s ease;
+}
+
+.cyberpunk-input:focus {
+  @apply outline-none;
+  background: rgba(147, 51, 234, 0.2);
+  border-color: rgba(147, 51, 234, 0.4);
 }
 
-.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-input::placeholder {
+  @apply text-pink-400;
 }
 
+.cyberpunk-checkbox,
 .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-checkmark,
+.cyberpunk-radiomark {
+  @apply w-5 h-5 rounded;
+  background: rgba(147, 51, 234, 0.1);
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  transition: all 0.3s ease;
+}
+
+.cyberpunk-checkmark {
+  @apply rounded;
+}
+
+.cyberpunk-radiomark {
+  @apply rounded-full;
+}
+
+.cyberpunk-checkbox input:checked + .cyberpunk-checkmark,
+.cyberpunk-radio input:checked + .cyberpunk-radiomark {
+  @apply bg-pink-500 border-pink-500;
 }
 
 .cyberpunk-switch {
-  @apply flex items-center space-x-2 cursor-pointer;
+  @apply flex items-center space-x-2;
 }
 
 .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;
+  @apply hidden;
 }
 
-.cyberpunk-list-item {
-  @apply flex items-center space-x-4 p-4 rounded-lg bg-gray-800/50
-         border border-pink-500/20;
+.cyberpunk-switch label {
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(147, 51, 234, 0.1);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(147, 51, 234, 0.2);
+}
+
+.cyberpunk-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-pink-100 rounded-full top-0.5 left-0.5;
+  transition: all 0.3s ease;
+}
+
+.cyberpunk-switch input:checked + label {
+  @apply bg-pink-500;
 }
 
-.cyberpunk-tabs {
-  @apply flex space-x-2 p-1 rounded-lg bg-gray-800 border border-pink-500/20;
+.cyberpunk-switch input:checked + label:after {
+  @apply translate-x-6;
 }
 
-.cyberpunk-tab {
-  @apply px-4 py-2 rounded-md text-gray-400 font-bold
-         hover:text-pink-500 active:text-pink-600;
+.cyberpunk-button {
+  @apply px-4 py-2 rounded-lg text-pink-100;
+  background: linear-gradient(45deg, rgba(147, 51, 234, 0.3), rgba(236, 72, 153, 0.3));
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  transition: all 0.3s ease;
 }
 
-.cyberpunk-tab.active {
-  @apply bg-pink-500 text-black;
+.cyberpunk-button:hover {
+  @apply bg-pink-800;
+  transform: translateY(-2px);
 }
 
-.cyberpunk-breadcrumbs {
-  @apply flex items-center text-sm;
+.cyberpunk-button.outlined {
+  @apply bg-transparent border border-pink-300;
 }
 
-.cyberpunk-breadcrumb {
-  @apply text-gray-400 hover:text-pink-500 font-bold;
+.cyberpunk-button.text {
+  @apply bg-transparent border-none;
 }
 
-.cyberpunk-breadcrumb.active {
-  @apply text-pink-500;
+.cyberpunk-button.icon {
+  @apply p-2 rounded-full;
 }
 
 .cyberpunk-progress {
-  @apply w-full h-4 rounded-full bg-gray-800 border border-pink-500/20
-         overflow-hidden;
+  @apply h-1 rounded-full overflow-hidden;
+  background: rgba(147, 51, 234, 0.1);
+  border: 1px solid rgba(147, 51, 234, 0.2);
 }
 
 .cyberpunk-progress-bar {
-  @apply h-full bg-pink-500 rounded-full
-         shadow-[0_0_10px_rgba(236,72,153,0.5)];
+  @apply h-full rounded-full;
+  background: linear-gradient(45deg, rgba(147, 51, 234, 0.5), 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.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(147, 51, 234, 0.1);
+  border: 1px solid rgba(147, 51, 234, 0.2);
 }
 
 .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));
+  @apply w-full h-full rounded-full border-4;
+  border-image: linear-gradient(45deg, rgba(147, 51, 234, 0.5), rgba(236, 72, 153, 0.5)) 1;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
-.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-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-purple-900/50 backdrop-blur-sm flex justify-around items-center py-2;
+  border-top: 1px solid rgba(147, 51, 234, 0.2);
 }
 
-.cyberpunk-alert.success {
-  @apply border-blue-500 text-blue-500;
+.cyberpunk-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-pink-200;
+  transition: all 0.3s ease;
 }
 
-.cyberpunk-alert.error {
-  @apply border-red-500 text-red-500;
+.cyberpunk-bottom-nav-item:hover {
+  @apply text-pink-100;
 }
 
-.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.active {
+  @apply text-pink-100;
+  background: linear-gradient(45deg, rgba(147, 51, 234, 0.3), rgba(236, 72, 153, 0.3));
 }
 
-.cyberpunk-bottom-nav-item {
-  @apply flex flex-col items-center p-2 text-gray-400 font-bold
-         hover:text-pink-500;
+.cyberpunk-dialog-overlay {
+  @apply fixed inset-0 bg-black/30 flex items-center justify-center;
+  backdrop-filter: blur(4px);
 }
 
-.cyberpunk-bottom-nav-item.active {
-  @apply text-pink-500;
+.cyberpunk-dialog {
+  @apply rounded-lg p-4 bg-purple-900/80 backdrop-blur-sm w-full max-w-md;
+  border: 1px solid rgba(147, 51, 234, 0.2);
+}
+
+.cyberpunk-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-pink-800;
+}
+
+.cyberpunk-dialog-content {
+  @apply p-4;
 }
 
-.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)];
+.cyberpunk-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-pink-800;
 }
 </style> 

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

@@ -1,609 +1,420 @@
 <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="dark-container min-h-screen bg-gray-900">
+    <!-- 顶部应用栏 -->
+    <div class="dark-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <Menu class="w-5 h-5 text-gray-300 mr-4" />
+          <h1 class="text-xl font-medium text-white">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 class="dark-icon-button">
+            <Search class="w-5 h-5" />
           </button>
-          <button class="dark-button-icon">
-            <Bell class="w-5 h-5 text-gray-200" />
+          <button class="dark-icon-button">
+            <Bell class="w-5 h-5" />
           </button>
-          <button class="dark-button-icon">
-            <User class="w-5 h-5 text-gray-200" />
+          <button class="dark-icon-button">
+            <User class="w-5 h-5" />
           </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">
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="dark-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-white">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="dark-nav-item active">
                 <Home class="w-5 h-5" />
-              </button>
-              <button class="dark-button-icon">
+                <span>首页</span>
+              </a>
+              <a href="#" class="dark-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="dark-badge">12</span>
+              </a>
+              <a href="#" class="dark-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="dark-nav-item">
                 <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>
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="dark-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="dark-list-item">
+                  <div class="dark-avatar bg-blue-600">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-white">卡片标题</h3>
+                    <p class="text-gray-400">卡片副标题</p>
+                  </div>
+                  <button class="dark-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="dark-list-item">
+                  <div class="dark-avatar bg-green-600">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-white">另一个标题</h3>
+                    <p class="text-gray-400">另一个副标题</p>
+                  </div>
+                  <button class="dark-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </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 class="dark-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">表单元素</h2>
+              <div class="space-y-4">
+                <div class="dark-input-group">
+                  <label class="text-gray-300">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="dark-input">
                 </div>
-                <div>
-                  <h4 class="text-base font-medium text-gray-200">列表项标题</h4>
-                  <p class="text-sm text-gray-400">列表项描述文本</p>
+                <div class="dark-input-group">
+                  <label class="text-gray-300">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="dark-input">
                 </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 class="dark-input-group">
+                  <label class="text-gray-300">下拉选择</label>
+                  <select class="dark-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
                 </div>
-                <div>
-                  <h4 class="text-base font-medium text-gray-200">列表项标题</h4>
-                  <p class="text-sm text-gray-400">列表项描述文本</p>
+                <div class="flex items-center space-x-4">
+                  <label class="dark-checkbox">
+                    <input type="checkbox">
+                    <span class="dark-checkmark"></span>
+                    <span class="text-gray-300">复选框</span>
+                  </label>
+                  <label class="dark-radio">
+                    <input type="radio" name="radio">
+                    <span class="dark-radiomark"></span>
+                    <span class="text-gray-300">单选框</span>
+                  </label>
+                </div>
+                <div class="dark-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-gray-300">开关</label>
                 </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 class="dark-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="dark-button">主要按钮</button>
+                <button class="dark-button outlined">次要按钮</button>
+                <button class="dark-button text">文本按钮</button>
+                <button class="dark-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="dark-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">进度指示器</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"></div>
+                </div>
+              </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 class="dark-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">对话框示例</h2>
+              <button class="dark-button" @click="showDialog = true">打开对话框</button>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="dark-bottom-nav">
+      <a href="#" class="dark-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="dark-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="dark-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="dark-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="dark-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="dark-dialog-overlay">
+      <div class="dark-dialog">
+        <div class="dark-dialog-header">
+          <h3 class="text-white">对话框标题</h3>
+          <button class="dark-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
+        <div class="dark-dialog-content">
+          <p class="text-gray-300">这是一个深色模式的对话框示例。</p>
+        </div>
+        <div class="dark-dialog-actions">
+          <button class="dark-button text" @click="showDialog = false">取消</button>
+          <button class="dark-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu,
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
 } from 'lucide-vue-next'
-</script>
 
-<style>
-/* Dark Mode 样式 */
-.dark-nav-bar {
-  background: #1f2937;
-  border-bottom: 1px solid #374151;
-}
+const showDialog = ref(false)
+</script>
 
-.dark-card {
-  background: #1f2937;
-  border: 1px solid #374151;
-  border-radius: 8px;
+<style scoped>
+.dark-container {
+  font-family: 'Inter', sans-serif;
 }
 
-.dark-color-card {
-  background: #1f2937;
-  border: 1px solid #374151;
-  border-radius: 8px;
+.dark-app-bar {
+  @apply sticky top-0 z-10 bg-gray-800;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.dark-button {
-  background: #374151;
-  color: #f3f4f6;
-  padding: 12px 24px;
-  border-radius: 8px;
-  font-weight: 500;
+.dark-icon-button {
+  @apply p-2 rounded-full text-gray-300;
+  background: rgba(255, 255, 255, 0.05);
   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-icon-button:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
 
-.dark-button-outline:hover {
-  background: #374151;
+.dark-card {
+  @apply rounded-xl p-4 bg-gray-800;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.dark-button-text {
-  color: #f3f4f6;
-  padding: 12px 24px;
-  font-weight: 500;
+.dark-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-300;
+  background: rgba(255, 255, 255, 0.05);
   transition: all 0.2s ease;
 }
 
-.dark-button-text:hover {
-  color: #d1d5db;
+.dark-nav-item:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
 
-.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-nav-item.active {
+  @apply text-white bg-blue-600;
 }
 
-.dark-button-icon:hover {
-  background: #4b5563;
+.dark-badge {
+  @apply bg-blue-600 text-white text-xs px-2 py-1 rounded-full;
 }
 
-.dark-input {
-  width: 100%;
-  padding: 12px;
-  border-radius: 8px;
-  background: #1f2937;
-  border: 1px solid #374151;
-  color: #f3f4f6;
+.dark-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
+  background: rgba(255, 255, 255, 0.05);
   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-list-item:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
 
-.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-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
 }
 
-.dark-checkbox input:checked + .dark-checkmark {
-  background: #374151;
-  border-color: #4b5563;
+.dark-input-group {
+  @apply space-y-1;
 }
 
-.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-input {
+  @apply w-full px-3 py-2 rounded-lg text-white;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.dark-checkbox input:checked + .dark-checkmark:after {
-  opacity: 1;
+.dark-input::placeholder {
+  @apply text-gray-500;
 }
 
+.dark-checkbox,
 .dark-radio {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+  @apply flex items-center space-x-2 cursor-pointer;
 }
 
+.dark-checkmark,
 .dark-radiomark {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #1f2937;
-  border: 1px solid #374151;
-  margin-right: 8px;
-  position: relative;
+  @apply w-5 h-5 rounded;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.dark-radio input:checked + .dark-radiomark {
-  border-color: #4b5563;
+.dark-checkmark {
+  @apply rounded;
 }
 
-.dark-radiomark:after {
-  content: '';
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: #f3f4f6;
-  border-radius: 50%;
-  top: 4px;
-  left: 4px;
-  opacity: 0;
+.dark-radiomark {
+  @apply rounded-full;
 }
 
-.dark-radio input:checked + .dark-radiomark:after {
-  opacity: 1;
+.dark-checkbox input:checked + .dark-checkmark,
+.dark-radio input:checked + .dark-radiomark {
+  @apply bg-blue-600 border-blue-600;
 }
 
 .dark-switch {
-  display: flex;
-  align-items: center;
+  @apply flex items-center space-x-2;
 }
 
 .dark-switch input {
-  display: none;
+  @apply hidden;
 }
 
 .dark-switch label {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 24px;
-  background: #374151;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .dark-switch label:after {
   content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: #1f2937;
-  border-radius: 50%;
-  top: 2px;
-  left: 2px;
+  @apply absolute w-5 h-5 bg-white rounded-full top-0.5 left-0.5;
   transition: all 0.2s ease;
 }
 
 .dark-switch input:checked + label {
-  background: #4b5563;
+  @apply bg-blue-600;
 }
 
 .dark-switch input:checked + label:after {
-  left: 28px;
-}
-
-.dark-tabs {
-  display: flex;
-  border-radius: 8px;
-  background: #374151;
-  overflow: hidden;
+  @apply translate-x-6;
 }
 
-.dark-tab {
-  padding: 12px 16px;
-  color: #f3f4f6;
-  font-weight: 500;
-  position: relative;
-  flex: 1;
-  text-align: center;
+.dark-button {
+  @apply px-4 py-2 rounded-lg text-white;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.2s ease;
 }
 
-.dark-tab.active {
-  background: #1f2937;
-  color: #f3f4f6;
+.dark-button:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
 
-.dark-breadcrumbs {
-  display: flex;
-  align-items: center;
+.dark-button.outlined {
+  @apply bg-transparent border border-gray-600;
 }
 
-.dark-breadcrumb {
-  color: #f3f4f6;
-  text-decoration: none;
-  font-weight: 500;
+.dark-button.text {
+  @apply bg-transparent border-none;
 }
 
-.dark-breadcrumb.active {
-  color: #f3f4f6;
-  font-weight: 500;
+.dark-button.icon {
+  @apply p-2 rounded-full;
 }
 
 .dark-progress {
-  height: 4px;
-  background: #374151;
-  border-radius: 2px;
-  overflow: hidden;
+  @apply h-2 rounded-full overflow-hidden;
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .dark-progress-bar {
-  height: 100%;
-  background: #4b5563;
-  border-radius: 2px;
+  @apply h-full bg-blue-600 rounded-full;
 }
 
-.dark-progress-circular {
-  width: 40px;
-  height: 40px;
-  position: relative;
+.dark-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .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;
+  @apply w-full h-full rounded-full border-4 border-blue-600;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
-.dark-alert.error {
-  background: #1f2937;
-  border-color: #374151;
+.dark-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-gray-800 flex justify-around items-center py-2;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.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-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-gray-300;
 }
 
-.dark-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #f3f4f6;
-  padding: 8px;
-  font-weight: 500;
+.dark-bottom-nav-item.active {
+  @apply text-white;
 }
 
-.dark-nav-item.active {
-  color: #f3f4f6;
-  font-weight: 500;
+.dark-dialog-overlay {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
 }
 
-.dark-nav-item span {
-  font-size: 12px;
-  margin-top: 4px;
+.dark-dialog {
+  @apply rounded-xl p-4 bg-gray-800 w-full max-w-md;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.dark-avatar {
-  background: #374151;
-  border-radius: 8px;
+.dark-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-700;
 }
 
-.dark-card-elevated {
-  background: #1f2937;
-  border: 1px solid #374151;
-  border-radius: 8px;
+.dark-dialog-content {
+  @apply p-4;
 }
 
-.dark-card-inset {
-  background: #374151;
-  border-radius: 8px;
+.dark-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-700;
 }
 </style> 

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

@@ -0,0 +1,507 @@
+<template>
+  <div class="element-container min-h-screen bg-gray-50">
+    <!-- 顶部导航栏 -->
+    <div class="element-header">
+      <div class="element-header-content">
+        <div class="element-logo">
+          <img :src="logoUrl" alt="Element Logo" class="element-logo-img">
+          <span class="element-logo-text">Element UI</span>
+        </div>
+        <div class="element-nav">
+          <a href="#" class="element-nav-item active">首页</a>
+          <a href="#" class="element-nav-item">组件</a>
+          <a href="#" class="element-nav-item">文档</a>
+          <a href="#" class="element-nav-item">主题</a>
+        </div>
+        <div class="element-header-actions">
+          <button class="element-button text">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="element-button text">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="element-button text">
+            <User class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="element-main">
+      <!-- 卡片列表 -->
+      <div class="element-card-list">
+        <div v-for="card in cards" :key="card.id" class="element-card">
+          <div class="element-card-header">
+            <div class="element-avatar" :class="card.avatarClass">
+              {{ card.initials }}
+            </div>
+            <div class="element-card-info">
+              <h3 class="element-card-title">{{ card.title }}</h3>
+              <p class="element-card-subtitle">{{ card.description }}</p>
+            </div>
+            <div class="element-card-actions">
+              <button class="element-button text">
+                <MoreVertical class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+          <div class="element-card-body">
+            <img :src="card.cover" alt="Card Cover" class="element-card-cover">
+            <p>{{ card.content }}</p>
+          </div>
+          <div class="element-card-footer">
+            <button class="element-button text">
+              <Heart class="w-5 h-5" />
+              <span>{{ card.likes }}</span>
+            </button>
+            <button class="element-button text">
+              <MessageSquare class="w-5 h-5" />
+              <span>{{ card.comments }}</span>
+            </button>
+            <button class="element-button text">
+              <Share2 class="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 表单元素 -->
+      <div class="element-form">
+        <div class="element-form-item">
+          <label class="element-form-label">文本输入</label>
+          <div class="element-form-content">
+            <input type="text" placeholder="请输入内容" class="element-input">
+          </div>
+        </div>
+        <div class="element-form-item">
+          <label class="element-form-label">密码输入</label>
+          <div class="element-form-content">
+            <input type="password" placeholder="请输入密码" class="element-input">
+          </div>
+        </div>
+        <div class="element-form-item">
+          <label class="element-form-label">下拉选择</label>
+          <div class="element-form-content">
+            <select class="element-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="element-form-item">
+          <label class="element-form-label">开关</label>
+          <div class="element-form-content">
+            <label class="element-switch">
+              <input type="checkbox">
+              <span class="element-switch-core"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 按钮组 -->
+      <div class="element-button-group">
+        <button class="element-button primary">主要按钮</button>
+        <button class="element-button success">成功按钮</button>
+        <button class="element-button warning">警告按钮</button>
+        <button class="element-button danger">危险按钮</button>
+        <button class="element-button info">信息按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="element-tabs">
+        <div class="element-tabs-header">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="element-tabs-item"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
+          </div>
+        </div>
+        <div class="element-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="element-tab-pane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="element-tab-pane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="element-tab-pane">
+            <p>标签页 3 的内容</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 对话框 -->
+      <div v-if="showDialog" class="element-dialog-wrapper">
+        <div class="element-dialog">
+          <div class="element-dialog-header">
+            <span class="element-dialog-title">对话框标题</span>
+            <button class="element-dialog-close" @click="showDialog = false">
+              <X class="w-5 h-5" />
+            </button>
+          </div>
+          <div class="element-dialog-body">
+            <p>这是一个 Element UI 风格的对话框示例。</p>
+          </div>
+          <div class="element-dialog-footer">
+            <button class="element-button" @click="showDialog = false">取消</button>
+            <button class="element-button primary" @click="showDialog = false">确定</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 消息提示 -->
+      <div v-if="showMessage" class="element-message">
+        <div class="element-message-content">
+          <Info class="w-5 h-5" />
+          <span>这是一条消息提示</span>
+        </div>
+      </div>
+
+      <!-- 通知面板 -->
+      <div v-if="showNotifications" class="element-notification">
+        <div class="element-notification-title">
+          <span>通知</span>
+          <button class="element-notification-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+        <div class="element-notification-list">
+          <div v-for="notification in notifications" :key="notification.id" class="element-notification-item">
+            <div class="element-notification-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="element-notification-content">
+              <h4>{{ notification.title }}</h4>
+              <p>{{ notification.content }}</p>
+            </div>
+            <span class="element-notification-time">{{ notification.time }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { 
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0idXJsKCNwYWludDApIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDAiIHgxPSIwIiB5MT0iMCIgeDI9IjMyIiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjNDFCODgzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMkQ4ODVGIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+'
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDgxLjQzMSAxMTIgMTA4QzExMiAxMzQuNTY5IDEzMy40MzEgMTU2IDE2MCAxNTZDMTg2LjU2OSAxNTYgMjA4IDEzNC41NjkgMjA4IDEwOEMyMDggODEuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iIzQxQjg4MyIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjMkQ4ODVGIi8+PC9zdmc+',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-green-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDg1LjQzMSAxMTIgMTE4QzExMiAxNTAuNTY5IDEzMy40MzEgMTcyIDE2MCAxNzJDMTg2LjU2OSAxNzIgMjA4IDE1MC41NjkgMjA4IDExOEMyMDggODUuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iIzJEOjg1RiIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjNDFCODgzIi8+PC9zdmc+',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-green-600'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
+
+const notifications = ref([
+  { 
+    id: 1, 
+    title: '新消息', 
+    content: 'Alice 给你发送了一条消息', 
+    time: '刚刚'
+  },
+  { 
+    id: 2, 
+    title: '系统通知', 
+    content: '系统将在今晚进行维护', 
+    time: '1小时前'
+  }
+])
+</script>
+
+<style scoped>
+.element-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
+}
+
+.element-header {
+  @apply fixed top-0 left-0 right-0 h-16 bg-white shadow-sm z-10;
+}
+
+.element-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
+}
+
+.element-logo {
+  @apply flex items-center;
+}
+
+.element-logo-img {
+  @apply h-8 w-8;
+}
+
+.element-logo-text {
+  @apply ml-2 text-xl font-medium text-gray-900;
+}
+
+.element-nav {
+  @apply flex items-center space-x-6;
+}
+
+.element-nav-item {
+  @apply text-gray-600 hover:text-blue-500;
+}
+
+.element-nav-item.active {
+  @apply text-blue-500;
+}
+
+.element-header-actions {
+  @apply flex items-center space-x-2;
+}
+
+.element-main {
+  @apply pt-20 pb-8 px-4;
+}
+
+.element-card-list {
+  @apply space-y-4;
+}
+
+.element-card {
+  @apply bg-white rounded shadow-sm overflow-hidden;
+}
+
+.element-card-header {
+  @apply flex items-center p-4 border-b border-gray-100;
+}
+
+.element-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+}
+
+.element-card-info {
+  @apply flex-1 ml-4;
+}
+
+.element-card-title {
+  @apply text-lg font-medium text-gray-900;
+}
+
+.element-card-subtitle {
+  @apply text-sm text-gray-500;
+}
+
+.element-card-actions {
+  @apply ml-4;
+}
+
+.element-card-body {
+  @apply p-4;
+}
+
+.element-card-footer {
+  @apply flex items-center px-4 py-3 border-t border-gray-100;
+}
+
+.element-form {
+  @apply space-y-4 mt-6;
+}
+
+.element-form-item {
+  @apply flex items-center;
+}
+
+.element-form-label {
+  @apply w-24 text-right pr-4 text-gray-600;
+}
+
+.element-form-content {
+  @apply flex-1;
+}
+
+.element-input,
+.element-select {
+  @apply w-full px-4 py-2 border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500;
+}
+
+.element-switch {
+  @apply relative inline-block w-12 h-6;
+}
+
+.element-switch input {
+  @apply hidden;
+}
+
+.element-switch-core {
+  @apply absolute inset-0 rounded-full bg-gray-300 transition-colors duration-300;
+}
+
+.element-switch-core:after {
+  content: '';
+  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5 shadow transition-transform duration-300;
+}
+
+.element-switch input:checked + .element-switch-core {
+  @apply bg-blue-500;
+}
+
+.element-switch input:checked + .element-switch-core:after {
+  @apply translate-x-6;
+}
+
+.element-button-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.element-button {
+  @apply px-4 py-2 rounded text-sm font-medium transition-colors duration-300;
+}
+
+.element-button.primary {
+  @apply bg-blue-500 text-white hover:bg-blue-600;
+}
+
+.element-button.success {
+  @apply bg-green-500 text-white hover:bg-green-600;
+}
+
+.element-button.warning {
+  @apply bg-yellow-500 text-white hover:bg-yellow-600;
+}
+
+.element-button.danger {
+  @apply bg-red-500 text-white hover:bg-red-600;
+}
+
+.element-button.info {
+  @apply bg-gray-500 text-white hover:bg-gray-600;
+}
+
+.element-button.text {
+  @apply bg-transparent text-gray-600 hover:text-blue-500;
+}
+
+.element-tabs {
+  @apply mt-6;
+}
+
+.element-tabs-header {
+  @apply flex border-b border-gray-200;
+}
+
+.element-tabs-item {
+  @apply px-4 py-3 text-gray-600 cursor-pointer hover:text-blue-500;
+}
+
+.element-tabs-item.active {
+  @apply text-blue-500 border-b-2 border-blue-500;
+}
+
+.element-tabs-content {
+  @apply p-4;
+}
+
+.element-tab-pane {
+  @apply bg-white rounded p-4;
+}
+
+.element-dialog-wrapper {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
+}
+
+.element-dialog {
+  @apply bg-white rounded shadow-lg w-full max-w-md;
+}
+
+.element-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
+}
+
+.element-dialog-title {
+  @apply text-lg font-medium text-gray-900;
+}
+
+.element-dialog-close {
+  @apply text-gray-400 hover:text-gray-500;
+}
+
+.element-dialog-body {
+  @apply p-4;
+}
+
+.element-dialog-footer {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
+}
+
+.element-message {
+  @apply fixed top-4 right-4 z-50;
+}
+
+.element-message-content {
+  @apply flex items-center px-4 py-3 bg-white rounded shadow-lg;
+}
+
+.element-notification {
+  @apply fixed top-4 right-4 w-80 bg-white rounded shadow-lg z-50;
+}
+
+.element-notification-title {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
+}
+
+.element-notification-close {
+  @apply text-gray-400 hover:text-gray-500;
+}
+
+.element-notification-list {
+  @apply max-h-96 overflow-y-auto;
+}
+
+.element-notification-item {
+  @apply flex items-start p-4 border-b border-gray-200;
+}
+
+.element-notification-icon {
+  @apply w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500;
+}
+
+.element-notification-content {
+  @apply flex-1 ml-4;
+}
+
+.element-notification-time {
+  @apply text-xs text-gray-400;
+}
+</style> 

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

@@ -0,0 +1,431 @@
+<template>
+  <div class="flat-container min-h-screen bg-gray-50">
+    <!-- 顶部应用栏 -->
+    <div class="flat-app-bar">
+      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-5 h-5 text-white mr-4" />
+          <h1 class="text-xl font-medium text-white">Flat Design</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="flat-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="flat-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="flat-icon-button">
+            <User class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="flat-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="flat-nav-item active">
+                <Home class="w-5 h-5" />
+                <span>首页</span>
+              </a>
+              <a href="#" class="flat-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="flat-badge">12</span>
+              </a>
+              <a href="#" class="flat-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="flat-nav-item">
+                <Settings class="w-5 h-5" />
+                <span>设置</span>
+              </a>
+            </nav>
+          </div>
+        </div>
+
+        <!-- 中间内容 -->
+        <div class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="flat-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="flat-list-item">
+                  <div class="flat-avatar bg-blue-500">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-gray-900">卡片标题</h3>
+                    <p class="text-gray-600">卡片副标题</p>
+                  </div>
+                  <button class="flat-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="flat-list-item">
+                  <div class="flat-avatar bg-indigo-500">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-gray-900">另一个标题</h3>
+                    <p class="text-gray-600">另一个副标题</p>
+                  </div>
+                  <button class="flat-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 表单元素 -->
+          <div class="flat-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">表单元素</h2>
+              <div class="space-y-4">
+                <div class="flat-input-group">
+                  <label class="text-gray-700">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="flat-input">
+                </div>
+                <div class="flat-input-group">
+                  <label class="text-gray-700">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="flat-input">
+                </div>
+                <div class="flat-input-group">
+                  <label class="text-gray-700">下拉选择</label>
+                  <select class="flat-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
+                </div>
+                <div class="flex items-center space-x-4">
+                  <label class="flat-checkbox">
+                    <input type="checkbox">
+                    <span class="flat-checkmark"></span>
+                    <span class="text-gray-700">复选框</span>
+                  </label>
+                  <label class="flat-radio">
+                    <input type="radio" name="radio">
+                    <span class="flat-radiomark"></span>
+                    <span class="text-gray-700">单选框</span>
+                  </label>
+                </div>
+                <div class="flat-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-gray-700">开关</label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 按钮组 -->
+          <div class="flat-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="flat-button">主要按钮</button>
+                <button class="flat-button outlined">次要按钮</button>
+                <button class="flat-button text">文本按钮</button>
+                <button class="flat-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 进度指示器 -->
+          <div class="flat-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">进度指示器</h2>
+              <div class="space-y-4">
+                <div class="flat-progress">
+                  <div class="flat-progress-bar" style="width: 60%"></div>
+                </div>
+                <div class="flat-progress circular">
+                  <div class="flat-progress-circle"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 对话框 -->
+          <div class="flat-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">对话框示例</h2>
+              <button class="flat-button" @click="showDialog = true">打开对话框</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="flat-bottom-nav">
+      <a href="#" class="flat-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="flat-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="flat-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="flat-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="flat-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="flat-dialog-overlay">
+      <div class="flat-dialog">
+        <div class="flat-dialog-header">
+          <h3 class="text-gray-900">对话框标题</h3>
+          <button class="flat-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+        <div class="flat-dialog-content">
+          <p class="text-gray-600">这是一个扁平化设计风格的对话框示例。</p>
+        </div>
+        <div class="flat-dialog-actions">
+          <button class="flat-button text" @click="showDialog = false">取消</button>
+          <button class="flat-button" @click="showDialog = false">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
+</script>
+
+<style scoped>
+.flat-container {
+  font-family: 'Segoe UI', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.flat-app-bar {
+  @apply sticky top-0 z-10 bg-blue-500;
+}
+
+.flat-icon-button {
+  @apply p-2 text-white;
+  transition: all 0.2s ease;
+}
+
+.flat-icon-button:hover {
+  @apply bg-blue-600;
+}
+
+.flat-card {
+  @apply bg-white p-4;
+  border: 1px solid #e5e7eb;
+}
+
+.flat-nav-item {
+  @apply flex items-center space-x-3 p-2 text-gray-700;
+  transition: all 0.2s ease;
+}
+
+.flat-nav-item:hover {
+  @apply bg-gray-100;
+}
+
+.flat-nav-item.active {
+  @apply bg-blue-500 text-white;
+}
+
+.flat-badge {
+  @apply bg-red-500 text-white text-xs px-2 py-1;
+}
+
+.flat-list-item {
+  @apply flex items-center space-x-4 p-2;
+  transition: all 0.2s ease;
+}
+
+.flat-list-item:hover {
+  @apply bg-gray-50;
+}
+
+.flat-avatar {
+  @apply w-10 h-10 flex items-center justify-center text-white font-medium;
+}
+
+.flat-input-group {
+  @apply space-y-1;
+}
+
+.flat-input {
+  @apply w-full px-3 py-2 text-gray-900;
+  border: 1px solid #e5e7eb;
+  transition: all 0.2s ease;
+}
+
+.flat-input:focus {
+  @apply outline-none;
+  border-color: #3b82f6;
+}
+
+.flat-input::placeholder {
+  @apply text-gray-400;
+}
+
+.flat-checkbox,
+.flat-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.flat-checkmark,
+.flat-radiomark {
+  @apply w-5 h-5;
+  border: 1px solid #e5e7eb;
+  transition: all 0.2s ease;
+}
+
+.flat-checkmark {
+  @apply rounded;
+}
+
+.flat-radiomark {
+  @apply rounded-full;
+}
+
+.flat-checkbox input:checked + .flat-checkmark,
+.flat-radio input:checked + .flat-radiomark {
+  @apply bg-blue-500 border-blue-500;
+}
+
+.flat-switch {
+  @apply flex items-center space-x-2;
+}
+
+.flat-switch input {
+  @apply hidden;
+}
+
+.flat-switch label {
+  @apply relative inline-block w-12 h-6 cursor-pointer;
+  background: #e5e7eb;
+  transition: all 0.2s ease;
+}
+
+.flat-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-white top-0.5 left-0.5;
+  transition: all 0.2s ease;
+}
+
+.flat-switch input:checked + label {
+  @apply bg-blue-500;
+}
+
+.flat-switch input:checked + label:after {
+  @apply translate-x-6;
+}
+
+.flat-button {
+  @apply px-4 py-2 text-white;
+  background: #3b82f6;
+  transition: all 0.2s ease;
+}
+
+.flat-button:hover {
+  @apply bg-blue-600;
+}
+
+.flat-button.outlined {
+  @apply bg-transparent border border-blue-500 text-blue-500;
+}
+
+.flat-button.text {
+  @apply bg-transparent border-none text-blue-500;
+}
+
+.flat-button.icon {
+  @apply p-2;
+}
+
+.flat-progress {
+  @apply h-1;
+  background: #e5e7eb;
+}
+
+.flat-progress-bar {
+  @apply h-full;
+  background: #3b82f6;
+}
+
+.flat-progress.circular {
+  @apply w-12 h-12;
+  background: transparent;
+  border: 4px solid #e5e7eb;
+}
+
+.flat-progress-circle {
+  @apply w-full h-full border-4;
+  border-color: #3b82f6;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+}
+
+.flat-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-white flex justify-around items-center py-2;
+  border-top: 1px solid #e5e7eb;
+}
+
+.flat-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-gray-600;
+  transition: all 0.2s ease;
+}
+
+.flat-bottom-nav-item:hover {
+  @apply text-blue-500;
+}
+
+.flat-bottom-nav-item.active {
+  @apply text-blue-500;
+}
+
+.flat-dialog-overlay {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
+}
+
+.flat-dialog {
+  @apply bg-white w-full max-w-md;
+  border: 1px solid #e5e7eb;
+}
+
+.flat-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
+}
+
+.flat-dialog-content {
+  @apply p-4;
+}
+
+.flat-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
+}
+</style> 

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

@@ -1,567 +1,711 @@
 <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="fluent-container min-h-screen bg-gray-50">
+    <!-- 顶部应用栏 -->
+    <div class="fluent-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <button class="fluent-icon-button" @click="isMenuOpen = !isMenuOpen">
+            <Menu class="w-5 h-5" />
+          </button>
+          <h1 class="text-xl font-medium text-gray-900 ml-4">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" />
+          <div class="fluent-search-box">
+            <Search class="w-5 h-5 text-gray-500" />
+            <input type="text" placeholder="搜索..." class="fluent-search-input">
+          </div>
+          <button class="fluent-icon-button" @click="showNotifications = !showNotifications">
+            <Bell class="w-5 h-5" />
+            <span v-if="unreadCount > 0" class="fluent-badge">{{ unreadCount }}</span>
           </button>
-          <button class="fluent-button-icon">
-            <User class="w-5 h-5 text-gray-600" />
+          <button class="fluent-icon-button" @click="showProfile = !showProfile">
+            <User class="w-5 h-5" />
           </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>
+    <!-- 侧边菜单 -->
+    <div class="fluent-side-menu" :class="{ 'is-open': isMenuOpen }">
+      <nav class="space-y-2">
+        <a href="#" class="fluent-nav-item active">
+          <Home class="w-5 h-5" />
+          <span>首页</span>
+        </a>
+        <a href="#" class="fluent-nav-item">
+          <Inbox class="w-5 h-5" />
+          <span>收件箱</span>
+          <span class="fluent-badge">12</span>
+        </a>
+        <a href="#" class="fluent-nav-item">
+          <Star class="w-5 h-5" />
+          <span>收藏</span>
+        </a>
+        <a href="#" class="fluent-nav-item">
+          <Settings class="w-5 h-5" />
+          <span>设置</span>
+        </a>
+      </nav>
+    </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 class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 统计卡片 -->
+        <div class="fluent-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">数据统计</h2>
+            <div class="grid grid-cols-2 gap-4">
+              <div class="fluent-stat-card">
+                <div class="fluent-stat-icon">
+                  <Users class="w-6 h-6" />
+                </div>
+                <div class="fluent-stat-content">
+                  <span class="text-gray-500">用户数</span>
+                  <span class="text-2xl font-bold">1,234</span>
+                </div>
+              </div>
+              <div class="fluent-stat-card">
+                <div class="fluent-stat-icon">
+                  <Activity class="w-6 h-6" />
+                </div>
+                <div class="fluent-stat-content">
+                  <span class="text-gray-500">活跃度</span>
+                  <span class="text-2xl font-bold">89%</span>
+                </div>
+              </div>
             </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 class="fluent-card md:col-span-2">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">数据趋势</h2>
+            <div class="fluent-chart">
+              <div class="h-48 flex items-end space-x-2">
+                <div v-for="i in 7" :key="i" class="fluent-chart-bar" :style="{ height: `${Math.random() * 100}%` }"></div>
+              </div>
             </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 class="fluent-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">任务列表</h2>
+            <div class="space-y-4">
+              <div v-for="task in tasks" :key="task.id" class="fluent-task-item">
+                <label class="fluent-checkbox">
+                  <input type="checkbox" v-model="task.completed">
+                  <span class="fluent-checkmark"></span>
+                </label>
+                <div class="flex-1">
+                  <h3 class="font-medium" :class="{ 'line-through text-gray-400': task.completed }">
+                    {{ task.title }}
+                  </h3>
+                  <p class="text-sm text-gray-500">{{ task.dueDate }}</p>
+                </div>
+                <button class="fluent-icon-button">
+                  <MoreVertical class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="fluent-card md:col-span-2">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">消息列表</h2>
+            <div class="space-y-4">
+              <div v-for="message in messages" :key="message.id" class="fluent-message-item">
+                <div class="fluent-avatar" :class="message.avatarClass">
+                  {{ message.initials }}
                 </div>
-                <div>
-                  <h4 class="text-base font-semibold">列表项标题</h4>
-                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                <div class="flex-1">
+                  <div class="flex justify-between">
+                    <h3 class="font-medium">{{ message.sender }}</h3>
+                    <span class="text-sm text-gray-500">{{ message.time }}</span>
+                  </div>
+                  <p class="text-gray-600">{{ message.content }}</p>
                 </div>
+                <button class="fluent-icon-button">
+                  <MoreVertical class="w-5 h-5" />
+                </button>
               </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 class="fluent-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">表单元素</h2>
+            <div class="space-y-4">
+              <div class="fluent-input-group">
+                <label class="text-gray-600">文本输入</label>
+                <input type="text" placeholder="请输入内容" class="fluent-input">
+              </div>
+              <div class="fluent-input-group">
+                <label class="text-gray-600">密码输入</label>
+                <input type="password" placeholder="请输入密码" class="fluent-input">
+              </div>
+              <div class="fluent-input-group">
+                <label class="text-gray-600">下拉选择</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>
+                  <span class="text-gray-600">复选框</span>
+                </label>
+                <label class="fluent-radio">
+                  <input type="radio" name="radio">
+                  <span class="fluent-radiomark"></span>
+                  <span class="text-gray-600">单选框</span>
+                </label>
+              </div>
+              <div class="fluent-switch">
+                <input type="checkbox" id="switch1">
+                <label for="switch1" class="text-gray-600">开关</label>
               </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 class="fluent-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">按钮样式</h2>
+            <div class="space-y-4">
+              <div class="flex flex-wrap gap-4">
+                <button class="fluent-button">主要按钮</button>
+                <button class="fluent-button outlined">次要按钮</button>
+                <button class="fluent-button text">文本按钮</button>
+                <button class="fluent-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="flex flex-wrap gap-4">
+                <button class="fluent-button small">小按钮</button>
+                <button class="fluent-button large">大按钮</button>
+                <button class="fluent-button loading">
+                  <Loader2 class="w-5 h-5 animate-spin" />
+                </button>
+              </div>
             </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 class="fluent-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">进度指示器</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"></div>
+              </div>
+              <div class="flex justify-between text-sm text-gray-500">
+                <span>0%</span>
+                <span>60%</span>
+                <span>100%</span>
+              </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 class="fluent-card md:col-span-3">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">标签页</h2>
+            <div class="fluent-tabs">
+              <button 
+                v-for="tab in tabs" 
+                :key="tab.id"
+                class="fluent-tab"
+                :class="{ active: activeTab === tab.id }"
+                @click="activeTab = tab.id"
+              >
+                {{ tab.label }}
+              </button>
             </div>
-            <div class="fluent-alert error">
-              <XCircle class="w-5 h-5 mr-2" />
-              <span>错误提示</span>
+            <div class="mt-4">
+              <div v-if="activeTab === 'tab1'" class="fluent-tab-content">
+                <p>标签页 1 的内容</p>
+              </div>
+              <div v-if="activeTab === 'tab2'" class="fluent-tab-content">
+                <p>标签页 2 的内容</p>
+              </div>
+              <div v-if="activeTab === 'tab3'" class="fluent-tab-content">
+                <p>标签页 3 的内容</p>
+              </div>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="fluent-bottom-nav">
+      <a href="#" class="fluent-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="fluent-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="fluent-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="fluent-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="fluent-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="fluent-dialog-overlay">
+      <div class="fluent-dialog">
+        <div class="fluent-dialog-header">
+          <h3 class="text-gray-900">对话框标题</h3>
+          <button class="fluent-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
-          <button class="fluent-nav-item">
+        </div>
+        <div class="fluent-dialog-content">
+          <p class="text-gray-600">这是一个 Fluent Design 风格的对话框示例。</p>
+        </div>
+        <div class="fluent-dialog-actions">
+          <button class="fluent-button text" @click="showDialog = false">取消</button>
+          <button class="fluent-button" @click="showDialog = false">确定</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 通知面板 -->
+    <div v-if="showNotifications" class="fluent-notification-panel">
+      <div class="fluent-notification-header">
+        <h3 class="text-gray-900">通知</h3>
+        <button class="fluent-icon-button" @click="showNotifications = false">
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+      <div class="fluent-notification-list">
+        <div v-for="notification in notifications" :key="notification.id" class="fluent-notification-item">
+          <div class="fluent-notification-icon">
             <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 class="flex-1">
+            <h4 class="font-medium">{{ notification.title }}</h4>
+            <p class="text-sm text-gray-500">{{ notification.content }}</p>
+          </div>
+          <span class="text-xs text-gray-400">{{ notification.time }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 个人资料面板 -->
+    <div v-if="showProfile" class="fluent-profile-panel">
+      <div class="fluent-profile-header">
+        <div class="fluent-avatar large">JD</div>
+        <div class="ml-4">
+          <h3 class="font-medium">John Doe</h3>
+          <p class="text-sm text-gray-500">john.doe@example.com</p>
         </div>
+        <button class="fluent-icon-button" @click="showProfile = false">
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+      <div class="fluent-profile-menu">
+        <a href="#" class="fluent-profile-menu-item">
+          <User class="w-5 h-5" />
+          <span>个人资料</span>
+        </a>
+        <a href="#" class="fluent-profile-menu-item">
+          <Settings class="w-5 h-5" />
+          <span>设置</span>
+        </a>
+        <a href="#" class="fluent-profile-menu-item">
+          <LogOut class="w-5 h-5" />
+          <span>退出登录</span>
+        </a>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu,
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X, Users, Activity, Loader2,
+  LogOut
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showNotifications = ref(false)
+const showProfile = ref(false)
+const isMenuOpen = ref(false)
+const activeTab = ref('tab1')
+const unreadCount = ref(3)
+
+const tasks = ref([
+  { id: 1, title: '完成项目报告', dueDate: '今天', completed: false },
+  { id: 2, title: '回复客户邮件', dueDate: '明天', completed: true },
+  { id: 3, title: '准备会议材料', dueDate: '后天', completed: false }
+])
+
+const messages = ref([
+  { 
+    id: 1, 
+    sender: 'Alice', 
+    content: '你好，请问项目进展如何？', 
+    time: '10:30', 
+    initials: 'A',
+    avatarClass: 'bg-blue-500'
+  },
+  { 
+    id: 2, 
+    sender: 'Bob', 
+    content: '会议时间改到下午3点', 
+    time: '09:15', 
+    initials: 'B',
+    avatarClass: 'bg-green-500'
+  }
+])
+
+const notifications = ref([
+  { 
+    id: 1, 
+    title: '新消息', 
+    content: 'Alice 给你发送了一条消息', 
+    time: '刚刚'
+  },
+  { 
+    id: 2, 
+    title: '系统通知', 
+    content: '系统将在今晚进行维护', 
+    time: '1小时前'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
-<style>
-/* Fluent Design 样式 */
-.fluent-command-bar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
+<style scoped>
+.fluent-container {
+  font-family: 'Segoe UI', sans-serif;
 }
 
-.fluent-card {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+.fluent-app-bar {
+  @apply sticky top-0 z-10 bg-white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.fluent-button {
-  background: #0078D4;
-  color: white;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-weight: 500;
+.fluent-icon-button {
+  @apply p-2 rounded-full text-gray-600 hover:bg-gray-100;
   transition: all 0.2s ease;
 }
 
-.fluent-button:hover {
-  background: #106EBE;
+.fluent-icon-button:active {
+  @apply bg-gray-200;
 }
 
-.fluent-button-outline {
-  border: 1px solid #0078D4;
-  color: #0078D4;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-weight: 500;
+.fluent-search-box {
+  @apply flex items-center px-4 py-2 rounded-full bg-gray-100;
   transition: all 0.2s ease;
 }
 
-.fluent-button-text {
-  color: #0078D4;
-  padding: 8px 16px;
-  font-weight: 500;
-  transition: all 0.2s ease;
+.fluent-search-box:focus-within {
+  @apply bg-white ring-2 ring-blue-500;
 }
 
-.fluent-button-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
+.fluent-search-input {
+  @apply ml-2 bg-transparent outline-none w-48;
 }
 
-.fluent-button-icon:hover {
-  background: rgba(0, 0, 0, 0.04);
+.fluent-side-menu {
+  @apply fixed top-0 left-0 h-full w-64 bg-white p-4 transform -translate-x-full transition-transform duration-300;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.fluent-input {
-  width: 100%;
-  padding: 8px 0;
-  border-bottom: 1px solid #E1E1E1;
+.fluent-side-menu.is-open {
+  @apply translate-x-0;
+}
+
+.fluent-card {
+  @apply rounded-lg p-4 bg-white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.fluent-stat-card {
+  @apply flex items-center p-4 rounded-lg bg-gray-50;
+}
+
+.fluent-stat-icon {
+  @apply w-12 h-12 rounded-full flex items-center justify-center text-blue-500 bg-blue-50;
+}
+
+.fluent-stat-content {
+  @apply ml-4;
+}
+
+.fluent-chart {
+  @apply p-4 rounded-lg bg-gray-50;
+}
+
+.fluent-chart-bar {
+  @apply w-8 bg-blue-500 rounded-t;
+  transition: height 0.3s ease;
+}
+
+.fluent-task-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg hover:bg-gray-50;
   transition: all 0.2s ease;
 }
 
-.fluent-input:focus {
-  border-bottom-color: #0078D4;
+.fluent-message-item {
+  @apply flex items-center space-x-4 p-4 rounded-lg hover:bg-gray-50;
+  transition: all 0.2s ease;
 }
 
-.fluent-label {
-  display: block;
-  color: #605E5C;
-  font-size: 12px;
-  margin-bottom: 4px;
+.fluent-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-600 hover:bg-gray-100;
+  transition: all 0.2s ease;
 }
 
-.fluent-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.fluent-nav-item.active {
+  @apply text-blue-500 bg-blue-50;
 }
 
-.fluent-checkmark {
-  width: 18px;
-  height: 18px;
-  border: 2px solid #605E5C;
-  border-radius: 2px;
-  margin-right: 8px;
-  position: relative;
+.fluent-badge {
+  @apply bg-red-500 text-white text-xs px-2 py-1 rounded-full;
 }
 
-.fluent-checkbox input:checked + .fluent-checkmark {
-  background: #0078D4;
-  border-color: #0078D4;
+.fluent-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
 }
 
-.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-avatar.large {
+  @apply w-16 h-16;
 }
 
-.fluent-checkbox input:checked + .fluent-checkmark:after {
-  opacity: 1;
+.fluent-input-group {
+  @apply space-y-1;
 }
 
-.fluent-radio {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.fluent-input {
+  @apply w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500;
+  transition: all 0.2s ease;
 }
 
-.fluent-radiomark {
-  width: 18px;
-  height: 18px;
-  border: 2px solid #605E5C;
-  border-radius: 50%;
-  margin-right: 8px;
-  position: relative;
+.fluent-checkbox,
+.fluent-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
 }
 
-.fluent-radio input:checked + .fluent-radiomark {
-  border-color: #0078D4;
+.fluent-checkmark,
+.fluent-radiomark {
+  @apply w-5 h-5 border-2 border-gray-300 rounded;
+  transition: all 0.2s ease;
 }
 
-.fluent-radiomark:after {
-  content: '';
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: #0078D4;
-  border-radius: 50%;
-  top: 2px;
-  left: 2px;
-  opacity: 0;
+.fluent-radiomark {
+  @apply rounded-full;
 }
 
-.fluent-radio input:checked + .fluent-radiomark:after {
-  opacity: 1;
+.fluent-checkbox input:checked + .fluent-checkmark,
+.fluent-radio input:checked + .fluent-radiomark {
+  @apply border-blue-500 bg-blue-500;
 }
 
 .fluent-switch {
-  display: flex;
-  align-items: center;
+  @apply flex items-center space-x-2;
 }
 
 .fluent-switch input {
-  display: none;
+  @apply hidden;
 }
 
 .fluent-switch label {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 20px;
-  background: #C8C6C4;
-  border-radius: 10px;
-  cursor: pointer;
+  @apply relative inline-block w-12 h-6 rounded-full bg-gray-300 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;
+  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5;
   transition: all 0.2s ease;
 }
 
 .fluent-switch input:checked + label {
-  background: #0078D4;
+  @apply bg-blue-500;
 }
 
 .fluent-switch input:checked + label:after {
-  left: 22px;
+  @apply translate-x-6;
 }
 
-.fluent-tabs {
-  display: flex;
-  border-bottom: 1px solid #E1E1E1;
+.fluent-button {
+  @apply px-4 py-2 rounded-lg text-white bg-blue-500 hover:bg-blue-600;
+  transition: all 0.2s ease;
 }
 
-.fluent-tab {
-  padding: 12px 16px;
-  color: #605E5C;
-  font-weight: 500;
-  position: relative;
+.fluent-button.outlined {
+  @apply bg-transparent border border-blue-500 text-blue-500 hover:bg-blue-50;
 }
 
-.fluent-tab.active {
-  color: #0078D4;
+.fluent-button.text {
+  @apply bg-transparent border-none text-blue-500 hover:bg-blue-50;
 }
 
-.fluent-tab.active:after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #0078D4;
+.fluent-button.icon {
+  @apply p-2;
 }
 
-.fluent-breadcrumbs {
-  display: flex;
-  align-items: center;
+.fluent-button.small {
+  @apply px-3 py-1 text-sm;
 }
 
-.fluent-breadcrumb {
-  color: #0078D4;
-  text-decoration: none;
+.fluent-button.large {
+  @apply px-6 py-3 text-lg;
 }
 
-.fluent-breadcrumb.active {
-  color: #605E5C;
+.fluent-button.loading {
+  @apply cursor-wait;
 }
 
 .fluent-progress {
-  height: 4px;
-  background: #E1E1E1;
-  border-radius: 2px;
-  overflow: hidden;
+  @apply h-2 rounded-full overflow-hidden bg-gray-200;
 }
 
 .fluent-progress-bar {
-  height: 100%;
-  background: #0078D4;
-  border-radius: 2px;
+  @apply h-full rounded-full bg-blue-500;
+  transition: width 0.3s ease;
 }
 
-.fluent-progress-circular {
-  width: 40px;
-  height: 40px;
-  position: relative;
+.fluent-progress.circular {
+  @apply w-12 h-12 rounded-full border-4 border-gray-200;
 }
 
 .fluent-progress-circle {
-  width: 100%;
-  height: 100%;
-  border: 3px solid #E1E1E1;
-  border-radius: 50%;
-  border-top-color: #0078D4;
+  @apply w-full h-full border-4 border-blue-500 border-t-transparent;
   animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+  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-tabs {
+  @apply flex space-x-2 p-1 rounded-lg bg-gray-100;
 }
 
-.fluent-alert.success {
-  background: #DFF6DD;
-  color: #107C10;
+.fluent-tab {
+  @apply px-4 py-2 rounded-md text-gray-600 hover:bg-white;
+  transition: all 0.2s ease;
 }
 
-.fluent-alert.error {
-  background: #FDE7E9;
-  color: #A4262C;
+.fluent-tab.active {
+  @apply text-blue-500 bg-white;
 }
 
-.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-tab-content {
+  @apply p-4 rounded-lg bg-white;
 }
 
-.fluent-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #605E5C;
-  padding: 8px;
+.fluent-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 flex justify-around items-center py-2 bg-white;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.fluent-nav-item.active {
-  color: #0078D4;
+.fluent-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-500;
+  transition: all 0.2s ease;
+}
+
+.fluent-bottom-nav-item.active {
+  @apply text-blue-500;
+}
+
+.fluent-dialog-overlay {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
+}
+
+.fluent-dialog {
+  @apply rounded-lg p-4 bg-white w-full max-w-md;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.fluent-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
+}
+
+.fluent-dialog-content {
+  @apply p-4;
 }
 
-.fluent-nav-item span {
-  font-size: 12px;
-  margin-top: 4px;
+.fluent-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
+}
+
+.fluent-notification-panel {
+  @apply fixed top-0 right-0 w-80 bg-white rounded-lg;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.fluent-notification-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
+}
+
+.fluent-notification-list {
+  @apply max-h-96 overflow-y-auto;
+}
+
+.fluent-notification-item {
+  @apply flex items-center space-x-4 p-4 border-b border-gray-200 hover:bg-gray-50;
+  transition: all 0.2s ease;
+}
+
+.fluent-notification-icon {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-blue-500 bg-blue-50;
+}
+
+.fluent-profile-panel {
+  @apply fixed top-0 right-0 w-80 bg-white rounded-lg;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.fluent-profile-header {
+  @apply flex items-center p-4 border-b border-gray-200;
+}
+
+.fluent-profile-menu {
+  @apply space-y-2 p-4;
+}
+
+.fluent-profile-menu-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-600 hover:bg-gray-100;
+  transition: all 0.2s ease;
 }
 </style> 

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

@@ -0,0 +1,483 @@
+<template>
+  <div class="futuristic-container min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900">
+    <!-- 顶部应用栏 -->
+    <div class="futuristic-app-bar">
+      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-5 h-5 text-blue-200 mr-4" />
+          <h1 class="text-xl font-medium text-blue-200">Futuristic Design</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="futuristic-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="futuristic-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="futuristic-icon-button">
+            <User class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="futuristic-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-blue-200">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="futuristic-nav-item active">
+                <Home class="w-5 h-5" />
+                <span>首页</span>
+              </a>
+              <a href="#" class="futuristic-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="futuristic-badge">12</span>
+              </a>
+              <a href="#" class="futuristic-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="futuristic-nav-item">
+                <Settings class="w-5 h-5" />
+                <span>设置</span>
+              </a>
+            </nav>
+          </div>
+        </div>
+
+        <!-- 中间内容 -->
+        <div class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="futuristic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-200">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="futuristic-list-item">
+                  <div class="futuristic-avatar bg-gradient-to-br from-blue-500 to-indigo-500">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-blue-200">卡片标题</h3>
+                    <p class="text-blue-300">卡片副标题</p>
+                  </div>
+                  <button class="futuristic-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="futuristic-list-item">
+                  <div class="futuristic-avatar bg-gradient-to-br from-indigo-500 to-purple-500">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-blue-200">另一个标题</h3>
+                    <p class="text-blue-300">另一个副标题</p>
+                  </div>
+                  <button class="futuristic-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 表单元素 -->
+          <div class="futuristic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-200">表单元素</h2>
+              <div class="space-y-4">
+                <div class="futuristic-input-group">
+                  <label class="text-blue-300">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="futuristic-input">
+                </div>
+                <div class="futuristic-input-group">
+                  <label class="text-blue-300">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="futuristic-input">
+                </div>
+                <div class="futuristic-input-group">
+                  <label class="text-blue-300">下拉选择</label>
+                  <select class="futuristic-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
+                </div>
+                <div class="flex items-center space-x-4">
+                  <label class="futuristic-checkbox">
+                    <input type="checkbox">
+                    <span class="futuristic-checkmark"></span>
+                    <span class="text-blue-300">复选框</span>
+                  </label>
+                  <label class="futuristic-radio">
+                    <input type="radio" name="radio">
+                    <span class="futuristic-radiomark"></span>
+                    <span class="text-blue-300">单选框</span>
+                  </label>
+                </div>
+                <div class="futuristic-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-blue-300">开关</label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 按钮组 -->
+          <div class="futuristic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-200">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="futuristic-button">主要按钮</button>
+                <button class="futuristic-button outlined">次要按钮</button>
+                <button class="futuristic-button text">文本按钮</button>
+                <button class="futuristic-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 进度指示器 -->
+          <div class="futuristic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-200">进度指示器</h2>
+              <div class="space-y-4">
+                <div class="futuristic-progress">
+                  <div class="futuristic-progress-bar" style="width: 60%"></div>
+                </div>
+                <div class="futuristic-progress circular">
+                  <div class="futuristic-progress-circle"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 对话框 -->
+          <div class="futuristic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-200">对话框示例</h2>
+              <button class="futuristic-button" @click="showDialog = true">打开对话框</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="futuristic-bottom-nav">
+      <a href="#" class="futuristic-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="futuristic-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="futuristic-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="futuristic-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="futuristic-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="futuristic-dialog-overlay">
+      <div class="futuristic-dialog">
+        <div class="futuristic-dialog-header">
+          <h3 class="text-blue-200">对话框标题</h3>
+          <button class="futuristic-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+        <div class="futuristic-dialog-content">
+          <p class="text-blue-300">这是一个未来主义风格的对话框示例。</p>
+        </div>
+        <div class="futuristic-dialog-actions">
+          <button class="futuristic-button text" @click="showDialog = false">取消</button>
+          <button class="futuristic-button" @click="showDialog = false">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
+</script>
+
+<style scoped>
+.futuristic-container {
+  font-family: 'Orbitron', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.futuristic-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, 
+    rgba(59, 130, 246, 0.1) 0%,
+    rgba(99, 102, 241, 0.1) 50%,
+    rgba(147, 51, 234, 0.1) 100%
+  );
+  animation: futuristic 15s ease infinite;
+  z-index: 0;
+}
+
+@keyframes futuristic {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.futuristic-app-bar {
+  @apply sticky top-0 z-10 bg-slate-900/50 backdrop-blur-sm;
+  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-icon-button {
+  @apply p-2 rounded-full text-blue-200;
+  transition: all 0.3s ease;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-icon-button:hover {
+  @apply bg-blue-800 text-blue-100;
+  transform: scale(1.1);
+}
+
+.futuristic-card {
+  @apply rounded-lg p-4 bg-slate-900/50 backdrop-blur-sm;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.futuristic-card:hover {
+  @apply bg-slate-900/70;
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.futuristic-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-blue-200;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-nav-item:hover {
+  @apply bg-blue-800 text-blue-100;
+}
+
+.futuristic-nav-item.active {
+  @apply bg-blue-800 text-blue-100;
+  background: linear-gradient(45deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.3));
+}
+
+.futuristic-badge {
+  @apply bg-blue-500 text-white text-xs px-2 py-1 rounded-full;
+}
+
+.futuristic-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-list-item:hover {
+  @apply bg-blue-800;
+}
+
+.futuristic-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+}
+
+.futuristic-input-group {
+  @apply space-y-1;
+}
+
+.futuristic-input {
+  @apply w-full px-3 py-2 rounded-lg text-blue-200;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  transition: all 0.3s ease;
+}
+
+.futuristic-input:focus {
+  @apply outline-none;
+  background: rgba(59, 130, 246, 0.2);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+.futuristic-input::placeholder {
+  @apply text-blue-400;
+}
+
+.futuristic-checkbox,
+.futuristic-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.futuristic-checkmark,
+.futuristic-radiomark {
+  @apply w-5 h-5 rounded;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  transition: all 0.3s ease;
+}
+
+.futuristic-checkmark {
+  @apply rounded;
+}
+
+.futuristic-radiomark {
+  @apply rounded-full;
+}
+
+.futuristic-checkbox input:checked + .futuristic-checkmark,
+.futuristic-radio input:checked + .futuristic-radiomark {
+  @apply bg-blue-500 border-blue-500;
+}
+
+.futuristic-switch {
+  @apply flex items-center space-x-2;
+}
+
+.futuristic-switch input {
+  @apply hidden;
+}
+
+.futuristic-switch label {
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(59, 130, 246, 0.1);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-blue-100 rounded-full top-0.5 left-0.5;
+  transition: all 0.3s ease;
+}
+
+.futuristic-switch input:checked + label {
+  @apply bg-blue-500;
+}
+
+.futuristic-switch input:checked + label:after {
+  @apply translate-x-6;
+}
+
+.futuristic-button {
+  @apply px-4 py-2 rounded-lg text-blue-200;
+  background: linear-gradient(45deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.3));
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  transition: all 0.3s ease;
+}
+
+.futuristic-button:hover {
+  @apply bg-blue-800;
+  transform: translateY(-2px);
+}
+
+.futuristic-button.outlined {
+  @apply bg-transparent border border-blue-300;
+}
+
+.futuristic-button.text {
+  @apply bg-transparent border-none;
+}
+
+.futuristic-button.icon {
+  @apply p-2 rounded-full;
+}
+
+.futuristic-progress {
+  @apply h-1 rounded-full overflow-hidden;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-progress-bar {
+  @apply h-full rounded-full;
+  background: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(99, 102, 241, 0.5));
+}
+
+.futuristic-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-progress-circle {
+  @apply w-full h-full rounded-full border-4;
+  border-image: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(99, 102, 241, 0.5)) 1;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+}
+
+.futuristic-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-slate-900/50 backdrop-blur-sm flex justify-around items-center py-2;
+  border-top: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-blue-200;
+  transition: all 0.3s ease;
+}
+
+.futuristic-bottom-nav-item:hover {
+  @apply text-blue-100;
+}
+
+.futuristic-bottom-nav-item.active {
+  @apply text-blue-100;
+  background: linear-gradient(45deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.3));
+}
+
+.futuristic-dialog-overlay {
+  @apply fixed inset-0 bg-black/30 flex items-center justify-center;
+  backdrop-filter: blur(4px);
+}
+
+.futuristic-dialog {
+  @apply rounded-lg p-4 bg-slate-900/80 backdrop-blur-sm w-full max-w-md;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.futuristic-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-blue-800;
+}
+
+.futuristic-dialog-content {
+  @apply p-4;
+}
+
+.futuristic-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-blue-800;
+}
+</style> 

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

@@ -1,472 +1,397 @@
 <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="glass-container min-h-screen bg-gradient-to-br from-purple-500 to-pink-500">
+    <!-- 背景装饰 -->
+    <div class="glass-bg-decorations">
+      <div class="glass-bg-circle circle-1"></div>
+      <div class="glass-bg-circle circle-2"></div>
+      <div class="glass-bg-circle circle-3"></div>
+    </div>
+
+    <!-- 顶部应用栏 -->
+    <div class="glass-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <Menu class="w-5 h-5 text-white mr-4" />
+          <h1 class="text-xl font-medium 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 class="glass-icon-button">
+            <Search class="w-5 h-5" />
           </button>
-          <button class="glass-button-icon">
-            <Bell class="w-5 h-5 text-white" />
+          <button class="glass-icon-button">
+            <Bell class="w-5 h-5" />
           </button>
-          <button class="glass-button-icon">
-            <User class="w-5 h-5 text-white" />
+          <button class="glass-icon-button">
+            <User class="w-5 h-5" />
           </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">
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="glass-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-white">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="glass-nav-item active">
                 <Home class="w-5 h-5" />
-              </button>
-              <button class="glass-button-icon">
+                <span>首页</span>
+              </a>
+              <a href="#" class="glass-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="glass-badge">12</span>
+              </a>
+              <a href="#" class="glass-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="glass-nav-item">
                 <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>
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="glass-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="glass-list-item">
+                  <div class="glass-avatar bg-white/20">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-white">卡片标题</h3>
+                    <p class="text-white/80">卡片副标题</p>
+                  </div>
+                  <button class="glass-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="glass-list-item">
+                  <div class="glass-avatar bg-white/20">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-white">另一个标题</h3>
+                    <p class="text-white/80">另一个副标题</p>
+                  </div>
+                  <button class="glass-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </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 class="glass-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">表单元素</h2>
+              <div class="space-y-4">
+                <div class="glass-input-group">
+                  <label class="text-white/80">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="glass-input">
                 </div>
-                <div>
-                  <h4 class="text-base font-semibold text-white">列表项标题</h4>
-                  <p class="text-sm text-white/80">列表项描述文本</p>
+                <div class="glass-input-group">
+                  <label class="text-white/80">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="glass-input">
                 </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 class="glass-input-group">
+                  <label class="text-white/80">下拉选择</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>
+                    <span class="text-white/80">复选框</span>
+                  </label>
+                  <label class="glass-radio">
+                    <input type="radio" name="radio">
+                    <span class="glass-radiomark"></span>
+                    <span class="text-white/80">单选框</span>
+                  </label>
                 </div>
-                <div>
-                  <h4 class="text-base font-semibold text-white">列表项标题</h4>
-                  <p class="text-sm text-white/80">列表项描述文本</p>
+                <div class="glass-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-white/80">开关</label>
                 </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 class="glass-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="glass-button">主要按钮</button>
+                <button class="glass-button outlined">次要按钮</button>
+                <button class="glass-button text">文本按钮</button>
+                <button class="glass-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="glass-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">进度指示器</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"></div>
+                </div>
+              </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 class="glass-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-white">对话框示例</h2>
+              <button class="glass-button" @click="showDialog = true">打开对话框</button>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="glass-bottom-nav">
+      <a href="#" class="glass-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="glass-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="glass-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="glass-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="glass-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="glass-dialog-overlay">
+      <div class="glass-dialog">
+        <div class="glass-dialog-header">
+          <h3 class="text-white">对话框标题</h3>
+          <button class="glass-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
+        <div class="glass-dialog-content">
+          <p class="text-white/80">这是一个 Glassmorphism 风格的对话框示例。</p>
+        </div>
+        <div class="glass-dialog-actions">
+          <button class="glass-button text" @click="showDialog = false">取消</button>
+          <button class="glass-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu,
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
 </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);
+<style scoped>
+.glass-container {
+  font-family: 'Inter', sans-serif;
+  position: relative;
+  overflow: hidden;
 }
 
-.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-bg-decorations {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
 }
 
-.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-bg-circle {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  opacity: 0.3;
 }
 
-.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-bg-circle.circle-1 {
+  width: 300px;
+  height: 300px;
+  background: #ff6b6b;
+  top: -100px;
+  left: -100px;
 }
 
-.glass-button:hover {
-  background: rgba(255, 255, 255, 0.2);
+.glass-bg-circle.circle-2 {
+  width: 400px;
+  height: 400px;
+  background: #4ecdc4;
+  bottom: -200px;
+  right: -100px;
 }
 
-.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-bg-circle.circle-3 {
+  width: 200px;
+  height: 200px;
+  background: #ffd166;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
-.glass-button-outline:hover {
+.glass-app-bar {
+  @apply sticky top-0 z-10;
   background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.glass-button-text {
-  color: white;
-  padding: 12px 24px;
-  font-weight: 500;
+.glass-icon-button {
+  @apply p-2 rounded-full text-white;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
   transition: all 0.2s ease;
 }
 
-.glass-button-text:hover {
-  opacity: 0.8;
+.glass-icon-button:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
 
-.glass-button-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.glass-card {
+  @apply rounded-xl p-4;
   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);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.glass-input {
-  width: 100%;
-  padding: 12px;
-  border-radius: 12px;
+.glass-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-white/80;
   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 {
+.glass-nav-item:hover {
   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-nav-item.active {
+  @apply text-white;
+  background: rgba(255, 255, 255, 0.2);
 }
 
-.glass-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.glass-badge {
+  @apply bg-white/20 text-white text-xs px-2 py-1 rounded-full;
+  backdrop-filter: blur(10px);
 }
 
-.glass-checkmark {
-  width: 24px;
-  height: 24px;
-  border-radius: 8px;
+.glass-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
   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;
+  transition: all 0.2s ease;
 }
 
-.glass-checkbox input:checked + .glass-checkmark {
+.glass-list-item:hover {
   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-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+}
+
+.glass-input-group {
+  @apply space-y-1;
+}
+
+.glass-input {
+  @apply w-full px-3 py-2 rounded-lg text-white;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.glass-checkbox input:checked + .glass-checkmark:after {
-  opacity: 1;
+.glass-input::placeholder {
+  @apply text-white/50;
 }
 
+.glass-checkbox,
 .glass-radio {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+  @apply flex items-center space-x-2 cursor-pointer;
 }
 
+.glass-checkmark,
 .glass-radiomark {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
+  @apply w-5 h-5 rounded;
   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;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.glass-radio input:checked + .glass-radiomark {
-  background: rgba(255, 255, 255, 0.2);
+.glass-checkmark {
+  @apply rounded;
 }
 
-.glass-radiomark:after {
-  content: '';
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  background: white;
-  border-radius: 50%;
-  top: 6px;
-  left: 6px;
-  opacity: 0;
+.glass-radiomark {
+  @apply rounded-full;
 }
 
-.glass-radio input:checked + .glass-radiomark:after {
-  opacity: 1;
+.glass-checkbox input:checked + .glass-checkmark,
+.glass-radio input:checked + .glass-radiomark {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .glass-switch {
-  display: flex;
-  align-items: center;
+  @apply flex items-center space-x-2;
 }
 
 .glass-switch input {
-  display: none;
+  @apply hidden;
 }
 
 .glass-switch label {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 30px;
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
   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;
+  @apply absolute w-5 h-5 bg-white rounded-full top-0.5 left-0.5;
   transition: all 0.2s ease;
 }
 
@@ -475,149 +400,90 @@ import {
 }
 
 .glass-switch input:checked + label:after {
-  left: 33px;
+  @apply translate-x-6;
 }
 
-.glass-tabs {
-  display: flex;
-  border-radius: 12px;
+.glass-button {
+  @apply px-4 py-2 rounded-lg text-white;
   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;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.2s ease;
 }
 
-.glass-tab.active {
+.glass-button:hover {
   background: rgba(255, 255, 255, 0.2);
 }
 
-.glass-breadcrumbs {
-  display: flex;
-  align-items: center;
+.glass-button.outlined {
+  @apply bg-transparent border border-white/20;
 }
 
-.glass-breadcrumb {
-  color: white;
-  text-decoration: none;
+.glass-button.text {
+  @apply bg-transparent border-none;
 }
 
-.glass-breadcrumb.active {
-  color: white;
-  font-weight: 500;
+.glass-button.icon {
+  @apply p-2 rounded-full;
 }
 
 .glass-progress {
-  height: 8px;
+  @apply h-2 rounded-full overflow-hidden;
   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;
+  @apply h-full bg-white/20 rounded-full;
 }
 
-.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 {
+.glass-progress.circular {
+  @apply w-12 h-12 rounded-full;
   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-progress-circle {
+  @apply w-full h-full rounded-full border-4 border-white/20;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
-.glass-nav-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+.glass-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 flex justify-around items-center py-2;
   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;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.glass-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: white;
-  padding: 8px;
+.glass-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-white/80;
 }
 
-.glass-nav-item.active {
-  color: white;
-  font-weight: 500;
+.glass-bottom-nav-item.active {
+  @apply text-white;
 }
 
-.glass-nav-item span {
-  font-size: 12px;
-  margin-top: 4px;
+.glass-dialog-overlay {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
+  backdrop-filter: blur(10px);
 }
 
-.glass-avatar {
+.glass-dialog {
+  @apply rounded-xl p-4 w-full max-w-md;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.glass-card-elevated {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+.glass-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-white/10;
 }
 
-.glass-card-inset {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+.glass-dialog-content {
+  @apply p-4;
+}
+
+.glass-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-white/10;
 }
 </style> 

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

@@ -1,56 +1,185 @@
 <template>
-  <div class="gradient-container min-h-screen">
+  <div class="gradient-container min-h-screen bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500">
     <!-- 顶部导航栏 -->
-    <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 class="gradient-header">
+      <div class="gradient-header-content">
+        <div class="gradient-logo">
+          <img :src="logoUrl" alt="Gradient Logo" class="gradient-logo-img">
+          <span class="gradient-logo-text">Gradient</span>
+        </div>
+        <div class="gradient-nav">
+          <a href="#" class="gradient-nav-item active">首页</a>
+          <a href="#" class="gradient-nav-item">组件</a>
+          <a href="#" class="gradient-nav-item">文档</a>
+          <a href="#" class="gradient-nav-item">主题</a>
+        </div>
+        <div class="gradient-header-actions">
+          <button class="gradient-btn text">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="gradient-btn text">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="gradient-btn text">
+            <User class="w-5 h-5" />
+          </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 class="gradient-main">
+      <!-- 卡片列表 -->
+      <div class="gradient-card-list">
+        <div v-for="card in cards" :key="card.id" class="gradient-card">
+          <div class="gradient-card-cover">
+            <img :src="card.cover" :alt="card.title" class="gradient-card-cover-img">
+          </div>
+          <div class="gradient-card-body">
+            <div class="gradient-card-meta">
+              <div class="gradient-card-meta-avatar">
+                <div class="gradient-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
+              </div>
+              <div class="gradient-card-meta-content">
+                <h3 class="gradient-card-meta-title">{{ card.title }}</h3>
+                <p class="gradient-card-meta-description">{{ card.description }}</p>
+              </div>
+            </div>
+            <p class="gradient-card-content">{{ card.content }}</p>
+            <div class="gradient-card-actions">
+              <button class="gradient-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
+              </button>
+              <button class="gradient-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
+              </button>
+              <button class="gradient-btn text">
+                <Share2 class="w-5 h-5" />
+              </button>
+            </div>
           </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 class="gradient-form">
+        <div class="gradient-form-item">
+          <label class="gradient-form-item-label">文本输入</label>
+          <div class="gradient-form-item-control">
+            <input type="text" placeholder="请输入内容" class="gradient-input">
+          </div>
+        </div>
+        <div class="gradient-form-item">
+          <label class="gradient-form-item-label">密码输入</label>
+          <div class="gradient-form-item-control">
+            <input type="password" placeholder="请输入密码" class="gradient-input">
+          </div>
+        </div>
+        <div class="gradient-form-item">
+          <label class="gradient-form-item-label">下拉选择</label>
+          <div class="gradient-form-item-control">
+            <select class="gradient-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="gradient-form-item">
+          <label class="gradient-form-item-label">开关</label>
+          <div class="gradient-form-item-control">
+            <label class="gradient-switch">
+              <input type="checkbox">
+              <span class="gradient-switch-inner"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 按钮组 -->
+      <div class="gradient-btn-group">
+        <button class="gradient-btn primary">主要按钮</button>
+        <button class="gradient-btn secondary">次要按钮</button>
+        <button class="gradient-btn outline">轮廓按钮</button>
+        <button class="gradient-btn text">文本按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="gradient-tabs">
+        <div class="gradient-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="gradient-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
+          </div>
+        </div>
+        <div class="gradient-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="gradient-tabs-tabpane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="gradient-tabs-tabpane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="gradient-tabs-tabpane">
+            <p>标签页 3 的内容</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 对话框 -->
+      <div v-if="showDialog" class="gradient-modal-mask">
+        <div class="gradient-modal-wrap">
+          <div class="gradient-modal">
+            <div class="gradient-modal-content">
+              <div class="gradient-modal-header">
+                <div class="gradient-modal-title">对话框标题</div>
+                <button class="gradient-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="gradient-modal-body">
+                <p>这是一个渐变风格的对话框示例。</p>
+              </div>
+              <div class="gradient-modal-footer">
+                <button class="gradient-btn" @click="showDialog = false">取消</button>
+                <button class="gradient-btn primary" @click="showDialog = false">确定</button>
+              </div>
             </div>
           </div>
         </div>
+      </div>
+
+      <!-- 消息提示 -->
+      <div v-if="showMessage" class="gradient-message">
+        <div class="gradient-message-notice">
+          <div class="gradient-message-notice-content">
+            <Info class="w-5 h-5" />
+            <span>这是一条消息提示</span>
+          </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 v-if="showNotifications" class="gradient-notification">
+        <div class="gradient-notification-notice">
+          <div class="gradient-notification-notice-content">
+            <div class="gradient-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="gradient-notification-notice-message">通知标题</div>
+            <div class="gradient-notification-notice-description">通知内容</div>
           </div>
+          <button class="gradient-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
+          </button>
         </div>
       </div>
     </div>
@@ -58,115 +187,370 @@
 </template>
 
 <script setup>
-import { Palette, Droplet, Layers } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { 
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0idXJsKCNwYWludDApIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDAiIHgxPSIwIiB5MT0iMCIgeDI9IjMyIiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjRkY2QjAwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkYwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+'
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2MCAyMEM4MC4yNjggMjAgMjAgODAuMjY4IDIwIDE2MEMyMCAyMzkuNzMyIDgwLjI2OCAzMDAgMTYwIDMwMEMyMzkuNzMyIDMwMCAzMDAgMjM5LjczMiAzMDAgMTYwQzMwMCA4MC4yNjggMjM5LjczMiAyMCAxNjAgMjBaIiBmaWxsPSJ1cmwoI3BhaW50MCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MCIgeDE9IjAiIHkxPSIwIiB4Mj0iMzIwIiB5Mj0iMjQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGNkIwMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-orange-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2MCAyMEM4MC4yNjggMjAgMjAgODAuMjY4IDIwIDE2MEMyMCAyMzkuNzMyIDgwLjI2OCAzMDAgMTYwIDMwMEMyMzkuNzMyIDMwMCAzMDAgMjM5LjczMiAzMDAgMTYwQzMwMCA4MC4yNjggMjM5LjczMiAyMCAxNjAgMjBaIiBmaWxsPSJ1cmwoI3BhaW50MCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MCIgeDE9IjAiIHkxPSIwIiB4Mj0iMzIwIiB5Mj0iMjQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGNkIwMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-orange-600'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
 <style scoped>
 .gradient-container {
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  font-family: 'Inter', sans-serif;
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.gradient-header {
+  @apply fixed top-0 left-0 right-0 h-16 backdrop-blur-md bg-white/10 z-10;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.gradient-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
+}
+
+.gradient-logo {
+  @apply flex items-center;
+}
+
+.gradient-logo-img {
+  @apply h-8 w-8;
+}
+
+.gradient-logo-text {
+  @apply ml-2 text-xl font-medium text-white;
+  background: linear-gradient(to right, #fff, #e2e8f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.gradient-nav {
+  @apply flex items-center space-x-6;
+}
+
+.gradient-nav-item {
+  @apply text-white/80 hover:text-white;
+  transition: all 0.3s ease;
+}
+
+.gradient-nav-item.active {
+  @apply text-white;
+  background: linear-gradient(to right, #fff, #e2e8f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.gradient-header-actions {
+  @apply flex items-center space-x-2;
+}
+
+.gradient-main {
+  @apply pt-20 pb-8 px-4;
+}
+
+.gradient-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
 }
 
 .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);
+  @apply backdrop-blur-md bg-white/10 rounded-xl overflow-hidden;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
 }
 
-.gradient-btn {
-  background: linear-gradient(45deg, #ec4899, #8b5cf6);
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: 8px;
-  font-weight: bold;
+.gradient-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+}
+
+.gradient-card-cover {
+  @apply relative h-48 overflow-hidden;
+}
+
+.gradient-card-cover-img {
+  @apply w-full h-full object-cover;
+}
+
+.gradient-card-body {
+  @apply p-4;
+}
+
+.gradient-card-meta {
+  @apply flex items-start mb-4;
+}
+
+.gradient-card-meta-avatar {
+  @apply mr-4;
+}
+
+.gradient-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+}
+
+.gradient-card-meta-content {
+  @apply flex-1;
+}
+
+.gradient-card-meta-title {
+  @apply text-base font-medium text-white;
+}
+
+.gradient-card-meta-description {
+  @apply text-sm text-white/80;
+}
+
+.gradient-card-content {
+  @apply text-white/90 mb-4;
+}
+
+.gradient-card-actions {
+  @apply flex items-center border-t border-white/10 pt-4;
+}
+
+.gradient-form {
+  @apply space-y-4 mt-6;
+}
+
+.gradient-form-item {
+  @apply flex flex-col;
+}
+
+.gradient-form-item-label {
+  @apply mb-2 text-white/90;
+}
+
+.gradient-form-item-control {
+  @apply flex-1;
+}
+
+.gradient-input,
+.gradient-select {
+  @apply w-full px-4 py-2 backdrop-blur-md bg-white/10 rounded-xl border border-white/10 focus:border-white/20 focus:ring-1 focus:ring-white/20 text-white;
   transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
 }
 
-.gradient-btn::before {
+.gradient-input:focus,
+.gradient-select:focus {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.gradient-switch {
+  @apply relative inline-block w-12 h-6;
+}
+
+.gradient-switch input {
+  @apply hidden;
+}
+
+.gradient-switch-inner {
+  @apply absolute inset-0 rounded-full backdrop-blur-md bg-white/10 transition-colors duration-300;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.gradient-switch-inner:after {
   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;
+  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5 shadow transition-transform duration-300;
 }
 
-.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;
+.gradient-switch input:checked + .gradient-switch-inner {
+  background: linear-gradient(to right, #ec4899, #8b5cf6);
+}
+
+.gradient-switch input:checked + .gradient-switch-inner:after {
+  @apply translate-x-6;
+}
+
+.gradient-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.gradient-btn {
+  @apply px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300;
+}
+
+.gradient-btn.primary {
+  background: linear-gradient(to right, #ec4899, #8b5cf6);
+  @apply text-white hover:opacity-90;
+}
+
+.gradient-btn.secondary {
+  background: linear-gradient(to right, #8b5cf6, #6366f1);
+  @apply text-white hover:opacity-90;
+}
+
+.gradient-btn.outline {
+  @apply bg-transparent text-white border border-white/20 hover:border-white/40;
+}
+
+.gradient-btn.text {
+  @apply bg-transparent text-white/80 hover:text-white;
+}
+
+.gradient-tabs {
+  @apply mt-6;
+}
+
+.gradient-tabs-nav {
+  @apply flex border-b border-white/10;
+}
+
+.gradient-tabs-tab {
+  @apply px-4 py-3 text-white/80 cursor-pointer hover:text-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-tabs-tab.active {
+  @apply text-white;
+  background: linear-gradient(to right, #fff, #e2e8f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  border-bottom: 2px solid transparent;
+  border-image: linear-gradient(to right, #ec4899, #8b5cf6) 1;
 }
 
-.gradient-effect {
-  width: 100%;
-  height: 100px;
-  border-radius: 8px;
-  animation: gradientShift 5s ease infinite;
+.gradient-tabs-content {
+  @apply p-4;
 }
 
-.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;
+.gradient-tabs-tabpane {
+  @apply backdrop-blur-md bg-white/10 rounded-xl p-4;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-@keyframes gradientShift {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
+.gradient-modal-mask {
+  @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50;
 }
 
-@keyframes gradientMove {
-  0% {
-    background-position: 0% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
+.gradient-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
+}
+
+.gradient-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
+}
+
+.gradient-modal-content {
+  @apply backdrop-blur-md bg-white/10 rounded-xl shadow-lg;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.gradient-modal-header {
+  @apply flex justify-between items-center p-4 border-b border-white/10;
+}
+
+.gradient-modal-title {
+  @apply text-lg font-medium text-white;
+}
+
+.gradient-modal-close {
+  @apply text-white/80 hover:text-white;
+}
+
+.gradient-modal-body {
+  @apply p-4;
+}
+
+.gradient-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t border-white/10;
+}
+
+.gradient-message {
+  @apply fixed top-4 right-4 z-50;
+}
+
+.gradient-message-notice {
+  @apply mb-4;
+}
+
+.gradient-message-notice-content {
+  @apply flex items-center px-4 py-3 backdrop-blur-md bg-white/10 rounded-xl shadow-lg;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.gradient-notification {
+  @apply fixed top-4 right-4 z-50;
+}
+
+.gradient-notification-notice {
+  @apply mb-4 backdrop-blur-md bg-white/10 rounded-xl shadow-lg overflow-hidden;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.gradient-notification-notice-content {
+  @apply p-4;
+}
+
+.gradient-notification-notice-icon {
+  @apply float-left mr-4 text-white;
+}
+
+.gradient-notification-notice-message {
+  @apply text-base font-medium text-white;
+}
+
+.gradient-notification-notice-description {
+  @apply mt-1 text-sm text-white/80;
+}
+
+.gradient-notification-notice-close {
+  @apply absolute top-4 right-4 text-white/80 hover:text-white;
 }
 </style> 

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

@@ -1,268 +1,185 @@
 <template>
-  <div class="holographic-container min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
+  <div class="holographic-container min-h-screen bg-gradient-to-br from-blue-900 to-purple-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 class="holographic-header">
+      <div class="holographic-header-content">
+        <div class="holographic-logo">
+          <img :src="logoUrl" alt="Holographic Logo" class="holographic-logo-img">
+          <span class="holographic-logo-text">Holographic</span>
+        </div>
+        <div class="holographic-nav">
+          <a href="#" class="holographic-nav-item active">首页</a>
+          <a href="#" class="holographic-nav-item">组件</a>
+          <a href="#" class="holographic-nav-item">文档</a>
+          <a href="#" class="holographic-nav-item">主题</a>
+        </div>
+        <div class="holographic-header-actions">
+          <button class="holographic-btn text">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="holographic-btn text">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="holographic-btn text">
+            <User class="w-5 h-5" />
+          </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 class="holographic-main">
+      <!-- 卡片列表 -->
+      <div class="holographic-card-list">
+        <div v-for="card in cards" :key="card.id" class="holographic-card">
+          <div class="holographic-card-cover">
+            <img :src="card.cover" :alt="card.title" class="holographic-card-cover-img">
           </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 class="holographic-card-body">
+            <div class="holographic-card-meta">
+              <div class="holographic-card-meta-avatar">
+                <div class="holographic-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
               </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 class="holographic-card-meta-content">
+                <h3 class="holographic-card-meta-title">{{ card.title }}</h3>
+                <p class="holographic-card-meta-description">{{ card.description }}</p>
               </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>
+            <p class="holographic-card-content">{{ card.content }}</p>
+            <div class="holographic-card-actions">
+              <button class="holographic-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
+              </button>
+              <button class="holographic-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
+              </button>
+              <button class="holographic-btn text">
+                <Share2 class="w-5 h-5" />
+              </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="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 class="holographic-form">
+        <div class="holographic-form-item">
+          <label class="holographic-form-item-label">文本输入</label>
+          <div class="holographic-form-item-control">
+            <input type="text" placeholder="请输入内容" class="holographic-input">
           </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 class="holographic-form-item">
+          <label class="holographic-form-item-label">密码输入</label>
+          <div class="holographic-form-item-control">
+            <input type="password" placeholder="请输入密码" class="holographic-input">
           </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 class="holographic-form-item">
+          <label class="holographic-form-item-label">下拉选择</label>
+          <div class="holographic-form-item-control">
+            <select class="holographic-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
           </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 class="holographic-form-item">
+          <label class="holographic-form-item-label">开关</label>
+          <div class="holographic-form-item-control">
+            <label class="holographic-switch">
+              <input type="checkbox">
+              <span class="holographic-switch-inner"></span>
+            </label>
           </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 class="holographic-btn-group">
+        <button class="holographic-btn primary">主要按钮</button>
+        <button class="holographic-btn secondary">次要按钮</button>
+        <button class="holographic-btn outline">轮廓按钮</button>
+        <button class="holographic-btn text">文本按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="holographic-tabs">
+        <div class="holographic-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="holographic-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
           </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-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="holographic-tabs-tabpane">
+            <p>标签页 1 的内容</p>
           </div>
-          <div class="holographic-nav-item">
-            <div class="nav-icon">
-              <Stars class="w-6 h-6" />
-            </div>
-            <span class="text-white/80">设置</span>
+          <div v-if="activeTab === 'tab2'" class="holographic-tabs-tabpane">
+            <p>标签页 2 的内容</p>
           </div>
-          <div class="holographic-nav-item">
-            <div class="nav-icon">
-              <ChevronDown class="w-6 h-6" />
-            </div>
-            <span class="text-white/80">更多</span>
+          <div v-if="activeTab === 'tab3'" class="holographic-tabs-tabpane">
+            <p>标签页 3 的内容</p>
           </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 v-if="showDialog" class="holographic-modal-mask">
+        <div class="holographic-modal-wrap">
+          <div class="holographic-modal">
+            <div class="holographic-modal-content">
+              <div class="holographic-modal-header">
+                <div class="holographic-modal-title">对话框标题</div>
+                <button class="holographic-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="holographic-modal-body">
+                <p>这是一个全息投影风格的对话框示例。</p>
+              </div>
+              <div class="holographic-modal-footer">
+                <button class="holographic-btn" @click="showDialog = false">取消</button>
+                <button class="holographic-btn primary" @click="showDialog = false">确定</button>
+              </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="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 v-if="showMessage" class="holographic-message">
+        <div class="holographic-message-notice">
+          <div class="holographic-message-notice-content">
+            <Info class="w-5 h-5" />
+            <span>这是一条消息提示</span>
           </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 v-if="showNotifications" class="holographic-notification">
+        <div class="holographic-notification-notice">
+          <div class="holographic-notification-notice-content">
+            <div class="holographic-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="holographic-notification-notice-message">通知标题</div>
+            <div class="holographic-notification-notice-description">通知内容</div>
           </div>
+          <button class="holographic-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
+          </button>
         </div>
       </div>
     </div>
@@ -271,590 +188,359 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Sparkles, Zap, Stars, ChevronDown, X } from 'lucide-vue-next'
+import { 
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0idXJsKCNwYWludDApIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDAiIHgxPSIwIiB5MT0iMCIgeDI9IjMyIiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDA2NkZGIi8+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9IiNGRjAwRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRkZGMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2MCAyMEM4MC4yNjggMjAgMjAgODAuMjY4IDIwIDE2MEMyMCAyMzkuNzMyIDgwLjI2OCAzMDAgMTYwIDMwMEMyMzkuNzMyIDMwMCAzMDAgMjM5LjczMiAzMDAgMTYwQzMwMCA4MC4yNjggMjM5LjczMiAyMCAxNjAgMjBaIiBmaWxsPSJ1cmwoI3BhaW50MCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MCIgeDE9IjAiIHkxPSIwIiB4Mj0iMzIwIiB5Mj0iMjQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGQjRGRiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGODBGRiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-pink-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2MCAyMEM4MC4yNjggMjAgMjAgODAuMjY4IDIwIDE2MEMyMCAyMzkuNzMyIDgwLjI2OCAzMDAgMTYwIDMwMEMyMzkuNzMyIDMwMCAzMDAgMjM5LjczMiAzMDAgMTYwQzMwMCA4MC4yNjggMjM5LjczMiAyMCAxNjAgMjBaIiBmaWxsPSJ1cmwoI3BhaW50MCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MCIgeDE9IjAiIHkxPSIwIiB4Mj0iMzIwIiB5Mj0iMjQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGQjRGRiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGODBGRiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-pink-600'
+  }
+])
 
-const showModal = ref(false)
-const currentTab = ref(0)
 const tabs = ref([
-  { title: '标签一', content: '这是第一个标签页的内容' },
-  { title: '标签二', content: '这是第二个标签页的内容' },
-  { title: '标签三', content: '这是第三个标签页的内容' }
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
 ])
 </script>
 
 <style scoped>
 .holographic-container {
+  font-family: 'Orbitron', sans-serif;
   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;
+    linear-gradient(45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(0, 255, 255, 0.1) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(0, 255, 255, 0.1) 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
 
-.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-header {
+  @apply fixed top-0 left-0 right-0 h-16 backdrop-blur-md bg-black/30 z-10;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-.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-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
 }
 
-.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-logo {
+  @apply flex items-center;
 }
 
-.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-logo-img {
+  @apply h-8 w-8;
 }
 
-.holographic-input:focus {
-  outline: none;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+.holographic-logo-text {
+  @apply ml-2 text-xl font-medium text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
 }
 
-.holographic-effect {
-  width: 100%;
-  height: 100px;
-  background: linear-gradient(45deg, #6366f1, #8b5cf6);
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
+.holographic-nav {
+  @apply flex items-center space-x-6;
 }
 
-.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);
-  }
+.holographic-nav-item {
+  @apply text-cyan-400 hover:text-cyan-300;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
-@keyframes gridMove {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 40px 40px;
-  }
+.holographic-nav-item.active {
+  @apply text-cyan-300;
+  text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
 }
 
-.holographic-switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
+.holographic-header-actions {
+  @apply flex items-center space-x-2;
 }
 
-.holographic-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+.holographic-main {
+  @apply pt-20 pb-8 px-4;
 }
 
-.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;
+.holographic-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
 }
 
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  transition: .4s;
-  border-radius: 50%;
+.holographic-card {
+  @apply backdrop-blur-md bg-black/30 rounded-xl overflow-hidden;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
+  transition: all 0.3s ease;
 }
 
-input:checked + .slider {
-  background: linear-gradient(45deg, #6366f1, #8b5cf6);
+.holographic-card:hover {
+  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
+  transform: translateY(-5px);
 }
 
-input:checked + .slider:before {
-  transform: translateX(26px);
+.holographic-card-cover {
+  @apply relative h-48 overflow-hidden;
 }
 
-.holographic-checkbox {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.holographic-card-cover-img {
+  @apply w-full h-full object-cover;
 }
 
-.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-card-body {
+  @apply p-4;
 }
 
-.holographic-checkbox input[type="checkbox"]:checked {
-  background: linear-gradient(45deg, #6366f1, #8b5cf6);
-  border-color: transparent;
+.holographic-card-meta {
+  @apply flex items-start mb-4;
 }
 
-.holographic-checkbox input[type="checkbox"]:checked::after {
-  content: "✓";
-  position: absolute;
-  color: white;
-  font-size: 14px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.holographic-card-meta-avatar {
+  @apply mr-4;
 }
 
-.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-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
 }
 
-.holographic-card-small:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
+.holographic-card-meta-content {
+  @apply flex-1;
 }
 
-.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-card-meta-title {
+  @apply text-base font-medium text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
-.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-card-meta-description {
+  @apply text-sm text-cyan-300;
 }
 
-.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-card-content {
+  @apply text-cyan-200 mb-4;
 }
 
-.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-card-actions {
+  @apply flex items-center border-t border-cyan-500/20 pt-4;
 }
 
-.holographic-btn-small:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-2px);
+.holographic-form {
+  @apply space-y-4 mt-6;
 }
 
-.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-form-item {
+  @apply flex flex-col;
 }
 
-.holographic-btn-icon:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+.holographic-form-item-label {
+  @apply mb-2 text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
-.holographic-stat {
-  background: rgba(255, 255, 255, 0.05);
-  padding: 1rem;
-  border-radius: 8px;
-  text-align: center;
-  min-width: 100px;
+.holographic-form-item-control {
+  @apply flex-1;
 }
 
-.holographic-progress {
-  height: 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
-  overflow: hidden;
+.holographic-input,
+.holographic-select {
+  @apply w-full px-4 py-2 backdrop-blur-md bg-black/30 rounded-xl border border-cyan-500/20 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 text-cyan-200;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
 }
 
-.progress-bar {
-  height: 100%;
-  background: linear-gradient(90deg, #6366f1, #8b5cf6);
-  border-radius: 2px;
-  animation: progress 2s ease-in-out;
+.holographic-switch {
+  @apply relative inline-block w-12 h-6;
 }
 
-.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-switch input {
+  @apply hidden;
 }
 
-.holographic-notification:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateX(4px);
+.holographic-switch-inner {
+  @apply absolute inset-0 rounded-full backdrop-blur-md bg-black/30 transition-colors duration-300;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-.notification-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: rgba(99, 102, 241, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.holographic-switch-inner:after {
+  content: '';
+  @apply absolute w-5 h-5 rounded-full bg-cyan-400 top-0.5 left-0.5 shadow transition-transform duration-300;
+  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
 }
 
-.notification-icon.warning {
-  background: rgba(234, 179, 8, 0.2);
+.holographic-switch input:checked + .holographic-switch-inner {
+  @apply bg-cyan-500/30;
 }
 
-.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-switch input:checked + .holographic-switch-inner:after {
+  @apply translate-x-6;
 }
 
-.holographic-nav-item:hover {
-  background: rgba(255, 255, 255, 0.1);
+.holographic-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
 }
 
-.nav-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.holographic-btn {
+  @apply px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300;
 }
 
-@keyframes progress {
-  from {
-    width: 0;
-  }
-  to {
-    width: 75%;
-  }
+.holographic-btn.primary {
+  @apply backdrop-blur-md bg-cyan-500/30 text-cyan-400 hover:bg-cyan-500/40;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-.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;
+.holographic-btn.secondary {
+  @apply backdrop-blur-md bg-purple-500/30 text-purple-400 hover:bg-purple-500/40;
+  box-shadow: 0 0 20px rgba(147, 51, 234, 0.2);
+  border: 1px solid rgba(147, 51, 234, 0.2);
 }
 
-.modal-close:hover {
-  background: rgba(255, 255, 255, 0.1);
+.holographic-btn.outline {
+  @apply backdrop-blur-md bg-transparent text-cyan-400 border border-cyan-500/20 hover:border-cyan-500;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
 }
 
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  margin-top: 1.5rem;
+.holographic-btn.text {
+  @apply bg-transparent text-cyan-400 hover:text-cyan-300;
 }
 
 .holographic-tabs {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  overflow: hidden;
+  @apply mt-6;
 }
 
-.tabs-header {
-  display: flex;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+.holographic-tabs-nav {
+  @apply flex border-b border-cyan-500/20;
 }
 
-.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;
+.holographic-tabs-tab {
+  @apply px-4 py-3 text-cyan-400 cursor-pointer hover:text-cyan-300;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
-.tab-button.active {
-  color: white;
+.holographic-tabs-tab.active {
+  @apply text-cyan-300 border-b-2 border-cyan-500;
+  text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
 }
 
-.tab-button.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #6366f1, #8b5cf6);
+.holographic-tabs-content {
+  @apply p-4;
 }
 
-.tabs-content {
-  padding: 1.5rem;
+.holographic-tabs-tabpane {
+  @apply backdrop-blur-md bg-black/30 rounded-xl p-4;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-.tab-panel {
-  display: none;
-  color: rgba(255, 255, 255, 0.8);
+.holographic-modal-mask {
+  @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50;
 }
 
-.tab-panel.active {
-  display: block;
-  animation: fadeIn 0.3s ease-out;
+.holographic-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
 }
 
-.holographic-loader {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 2rem;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
+.holographic-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
 }
 
-.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-modal-content {
+  @apply backdrop-blur-md bg-black/30 rounded-xl shadow-lg;
+  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
+  border: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-.holographic-skeleton {
-  padding: 1.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
+.holographic-modal-header {
+  @apply flex justify-between items-center p-4 border-b border-cyan-500/20;
 }
 
-.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;
+.holographic-modal-title {
+  @apply text-lg font-medium text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
-.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-modal-close {
+  @apply text-cyan-400 hover:text-cyan-300;
 }
 
-.holographic-spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
+.holographic-modal-body {
+  @apply p-4;
 }
 
-.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;
+.holographic-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t border-cyan-500/20;
 }
 
-@keyframes modalSlide {
-  from {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
+.holographic-message {
+  @apply fixed top-4 right-4 z-50;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.holographic-message-notice {
+  @apply mb-4;
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.holographic-message-notice-content {
+  @apply flex items-center px-4 py-3 backdrop-blur-md bg-black/30 rounded-xl shadow-lg;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-@keyframes skeleton {
-  to {
-    background-position: 200% 0;
-  }
+.holographic-notification {
+  @apply fixed top-4 right-4 z-50;
+}
+
+.holographic-notification-notice {
+  @apply mb-4 backdrop-blur-md bg-black/30 rounded-xl shadow-lg overflow-hidden;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
+}
+
+.holographic-notification-notice-content {
+  @apply p-4;
+}
+
+.holographic-notification-notice-icon {
+  @apply float-left mr-4 text-cyan-400;
+}
+
+.holographic-notification-notice-message {
+  @apply text-base font-medium text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+}
+
+.holographic-notification-notice-description {
+  @apply mt-1 text-sm text-cyan-300;
+}
+
+.holographic-notification-notice-close {
+  @apply absolute top-4 right-4 text-cyan-400 hover:text-cyan-300;
 }
 </style> 

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

@@ -1,562 +1,498 @@
 <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 class="ios-container min-h-screen bg-gray-50">
+    <!-- 顶部状态栏 -->
+    <div class="ios-status-bar">
+      <div class="ios-status-bar-time">9:41</div>
+      <div class="ios-status-bar-icons">
+        <div class="ios-signal"></div>
+        <div class="ios-wifi"></div>
+        <div class="ios-battery"></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>
+    <!-- 顶部导航栏 -->
+    <div class="ios-nav-bar">
+      <div class="ios-nav-bar-content">
+        <button class="ios-nav-button" @click="isMenuOpen = !isMenuOpen">
+          <Menu class="w-5 h-5" />
+        </button>
+        <h1 class="ios-nav-title">iOS Design</h1>
+        <button class="ios-nav-button" @click="showSearch = !showSearch">
+          <Search class="w-5 h-5" />
+        </button>
+      </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>
+    <!-- 搜索栏 -->
+    <div v-if="showSearch" class="ios-search-bar">
+      <div class="ios-search-input">
+        <Search class="w-5 h-5 text-gray-400" />
+        <input type="text" placeholder="搜索" class="ios-search-field">
+        <button class="ios-search-cancel" @click="showSearch = false">取消</button>
+      </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 class="ios-content">
+      <!-- 卡片列表 -->
+      <div class="ios-card-list">
+        <div v-for="card in cards" :key="card.id" class="ios-card">
+          <div class="ios-card-header">
+            <div class="ios-avatar" :class="card.avatarClass">
+              {{ card.initials }}
             </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 class="ios-card-info">
+              <h3 class="ios-card-title">{{ card.title }}</h3>
+              <p class="ios-card-subtitle">{{ card.subtitle }}</p>
             </div>
+            <button class="ios-card-action">
+              <MoreVertical class="w-5 h-5" />
+            </button>
+          </div>
+          <div class="ios-card-content">
+            <p>{{ card.content }}</p>
+          </div>
+          <div class="ios-card-footer">
+            <button class="ios-button">
+              <Heart class="w-5 h-5" />
+              <span>{{ card.likes }}</span>
+            </button>
+            <button class="ios-button">
+              <MessageSquare class="w-5 h-5" />
+              <span>{{ card.comments }}</span>
+            </button>
+            <button class="ios-button">
+              <Share2 class="w-5 h-5" />
+            </button>
           </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 class="ios-form">
+        <div class="ios-form-group">
+          <label class="ios-label">文本输入</label>
+          <input type="text" placeholder="请输入内容" class="ios-input">
         </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 class="ios-form-group">
+          <label class="ios-label">密码输入</label>
+          <input type="password" placeholder="请输入密码" class="ios-input">
         </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 class="ios-form-group">
+          <label class="ios-label">下拉选择</label>
+          <select class="ios-input">
+            <option>选项 1</option>
+            <option>选项 2</option>
+            <option>选项 3</option>
+          </select>
+        </div>
+        <div class="ios-form-group">
+          <label class="ios-switch">
+            <input type="checkbox">
+            <span class="ios-switch-slider"></span>
+            <span class="ios-switch-label">开关</span>
+          </label>
         </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>
+      <!-- 按钮组 -->
+      <div class="ios-button-group">
+        <button class="ios-button primary">主要按钮</button>
+        <button class="ios-button secondary">次要按钮</button>
+        <button class="ios-button destructive">危险按钮</button>
+      </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 class="ios-tabs">
+        <div class="ios-tab-header">
+          <button 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="ios-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
+          </button>
         </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 class="ios-tab-content">
+          <div v-if="activeTab === 'tab1'" class="ios-tab-pane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="ios-tab-pane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="ios-tab-pane">
+            <p>标签页 3 的内容</p>
           </div>
         </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 class="ios-tab-bar">
+      <a href="#" class="ios-tab-bar-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="ios-tab-bar-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="ios-tab-bar-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="ios-tab-bar-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="ios-tab-bar-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="ios-dialog-overlay">
+      <div class="ios-dialog">
+        <div class="ios-dialog-header">
+          <h3 class="ios-dialog-title">对话框标题</h3>
+          <p class="ios-dialog-message">这是一个 iOS 风格的对话框示例。</p>
+        </div>
+        <div class="ios-dialog-actions">
+          <button class="ios-dialog-button cancel" @click="showDialog = false">取消</button>
+          <button class="ios-dialog-button confirm" @click="showDialog = false">确定</button>
         </div>
       </div>
     </div>
+
+    <!-- 操作表 -->
+    <div v-if="showActionSheet" class="ios-action-sheet">
+      <div class="ios-action-sheet-content">
+        <div class="ios-action-sheet-title">选择操作</div>
+        <button class="ios-action-sheet-item">
+          <Camera class="w-5 h-5" />
+          <span>拍照</span>
+        </button>
+        <button class="ios-action-sheet-item">
+          <Image class="w-5 h-5" />
+          <span>从相册选择</span>
+        </button>
+        <button class="ios-action-sheet-item destructive">
+          <Trash2 class="w-5 h-5" />
+          <span>删除</span>
+        </button>
+      </div>
+      <button class="ios-action-sheet-cancel" @click="showActionSheet = false">取消</button>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, MoreVertical, Home,
+  Heart, MessageSquare, Share2, Camera,
+  Image, Trash2, Bell, User, Plus
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showActionSheet = ref(false)
+const showSearch = ref(false)
+const isMenuOpen = ref(false)
+const activeTab = ref('tab1')
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    subtitle: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-blue-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    subtitle: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-green-500'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
-<style>
-/* iOS 样式 */
+<style scoped>
+.ios-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+}
+
+.ios-status-bar {
+  @apply fixed top-0 left-0 right-0 h-6 flex justify-between items-center px-4 bg-white;
+}
+
+.ios-status-bar-time {
+  @apply text-sm font-medium;
+}
+
+.ios-status-bar-icons {
+  @apply flex items-center space-x-2;
+}
+
 .ios-nav-bar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
+  @apply fixed top-6 left-0 right-0 h-12 flex items-center justify-center bg-white;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
-.ios-card {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+.ios-nav-bar-content {
+  @apply flex items-center justify-between w-full max-w-md px-4;
 }
 
-.ios-button {
-  background: #007AFF;
-  color: white;
-  padding: 8px 16px;
-  border-radius: 8px;
-  font-weight: 500;
-  transition: all 0.2s ease;
+.ios-nav-title {
+  @apply text-lg font-semibold;
 }
 
-.ios-button:hover {
-  background: #0066CC;
+.ios-nav-button {
+  @apply p-2 rounded-full text-gray-600;
 }
 
-.ios-button-outline {
-  border: 1px solid #007AFF;
-  color: #007AFF;
-  padding: 8px 16px;
-  border-radius: 8px;
-  font-weight: 500;
-  transition: all 0.2s ease;
+.ios-search-bar {
+  @apply fixed top-[4.5rem] left-0 right-0 p-4 bg-white;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
-.ios-button-text {
-  color: #007AFF;
-  padding: 8px 16px;
-  font-weight: 500;
-  transition: all 0.2s ease;
+.ios-search-input {
+  @apply flex items-center bg-gray-100 rounded-full px-4;
 }
 
-.ios-button-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
+.ios-search-field {
+  @apply flex-1 py-2 px-4 bg-transparent outline-none;
 }
 
-.ios-button-icon:hover {
-  background: rgba(0, 0, 0, 0.04);
+.ios-search-cancel {
+  @apply ml-4 text-blue-500;
 }
 
-.ios-input {
-  width: 100%;
-  padding: 8px 0;
-  border-bottom: 1px solid #E5E5EA;
-  transition: all 0.2s ease;
+.ios-content {
+  @apply pt-24 pb-16 px-4;
 }
 
-.ios-input:focus {
-  border-bottom-color: #007AFF;
+.ios-card-list {
+  @apply space-y-4;
 }
 
-.ios-label {
-  display: block;
-  color: #8E8E93;
-  font-size: 12px;
-  margin-bottom: 4px;
+.ios-card {
+  @apply bg-white rounded-xl overflow-hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.ios-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.ios-card-header {
+  @apply flex items-center p-4;
 }
 
-.ios-checkmark {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #8E8E93;
-  border-radius: 4px;
-  margin-right: 8px;
-  position: relative;
+.ios-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
 }
 
-.ios-checkbox input:checked + .ios-checkmark {
-  background: #007AFF;
-  border-color: #007AFF;
+.ios-card-info {
+  @apply flex-1 ml-4;
 }
 
-.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-card-title {
+  @apply font-semibold;
 }
 
-.ios-checkbox input:checked + .ios-checkmark:after {
-  opacity: 1;
+.ios-card-subtitle {
+  @apply text-sm text-gray-500;
 }
 
-.ios-radio {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.ios-card-action {
+  @apply p-2 text-gray-400;
 }
 
-.ios-radiomark {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #8E8E93;
-  border-radius: 50%;
-  margin-right: 8px;
-  position: relative;
+.ios-card-content {
+  @apply px-4 pb-4;
 }
 
-.ios-radio input:checked + .ios-radiomark {
-  border-color: #007AFF;
+.ios-card-footer {
+  @apply flex items-center px-4 py-3 border-t border-gray-100;
 }
 
-.ios-radiomark:after {
-  content: '';
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: #007AFF;
-  border-radius: 50%;
-  top: 3px;
-  left: 3px;
-  opacity: 0;
+.ios-button {
+  @apply flex items-center space-x-1 text-gray-500;
 }
 
-.ios-radio input:checked + .ios-radiomark:after {
-  opacity: 1;
+.ios-form {
+  @apply space-y-4 mt-6;
 }
 
-.ios-switch {
-  display: flex;
-  align-items: center;
+.ios-form-group {
+  @apply space-y-1;
 }
 
-.ios-switch input {
-  display: none;
+.ios-label {
+  @apply text-sm text-gray-500;
 }
 
-.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-input {
+  @apply w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500;
+}
+
+.ios-switch {
+  @apply flex items-center;
 }
 
-.ios-switch label:after {
+.ios-switch-slider {
+  @apply relative inline-block w-12 h-6 rounded-full bg-gray-200;
+}
+
+.ios-switch-slider:after {
   content: '';
-  position: absolute;
-  width: 27px;
-  height: 27px;
-  background: white;
-  border-radius: 50%;
-  top: 2px;
-  left: 2px;
+  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5;
   transition: all 0.2s ease;
 }
 
-.ios-switch input:checked + label {
-  background: #34C759;
+.ios-switch input:checked + .ios-switch-slider {
+  @apply bg-green-500;
+}
+
+.ios-switch input:checked + .ios-switch-slider:after {
+  @apply translate-x-6;
 }
 
-.ios-switch input:checked + label:after {
-  left: 22px;
+.ios-switch-label {
+  @apply ml-3 text-gray-600;
+}
+
+.ios-button-group {
+  @apply space-y-2 mt-6;
+}
+
+.ios-button {
+  @apply w-full py-3 rounded-xl text-center font-medium;
+}
+
+.ios-button.primary {
+  @apply bg-blue-500 text-white;
+}
+
+.ios-button.secondary {
+  @apply bg-gray-100 text-gray-900;
+}
+
+.ios-button.destructive {
+  @apply bg-red-500 text-white;
 }
 
 .ios-tabs {
-  display: flex;
-  border-bottom: 1px solid #E5E5EA;
+  @apply mt-6;
+}
+
+.ios-tab-header {
+  @apply flex border-b border-gray-200;
 }
 
 .ios-tab {
-  padding: 12px 16px;
-  color: #8E8E93;
-  font-weight: 500;
-  position: relative;
+  @apply flex-1 py-3 text-center text-gray-500;
 }
 
 .ios-tab.active {
-  color: #007AFF;
+  @apply text-blue-500 border-b-2 border-blue-500;
 }
 
-.ios-tab.active:after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #007AFF;
+.ios-tab-content {
+  @apply p-4;
 }
 
-.ios-breadcrumbs {
-  display: flex;
-  align-items: center;
+.ios-tab-pane {
+  @apply bg-white rounded-xl p-4;
 }
 
-.ios-breadcrumb {
-  color: #007AFF;
-  text-decoration: none;
+.ios-tab-bar {
+  @apply fixed bottom-0 left-0 right-0 flex justify-around items-center py-2 bg-white;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.ios-breadcrumb.active {
-  color: #8E8E93;
+.ios-tab-bar-item {
+  @apply flex flex-col items-center text-gray-500;
 }
 
-.ios-progress {
-  height: 4px;
-  background: #E5E5EA;
-  border-radius: 2px;
-  overflow: hidden;
+.ios-tab-bar-item.active {
+  @apply text-blue-500;
 }
 
-.ios-progress-bar {
-  height: 100%;
-  background: #007AFF;
-  border-radius: 2px;
+.ios-dialog-overlay {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
 }
 
-.ios-progress-circular {
-  width: 40px;
-  height: 40px;
-  position: relative;
+.ios-dialog {
+  @apply bg-white rounded-xl w-full max-w-md overflow-hidden;
 }
 
-.ios-progress-circle {
-  width: 100%;
-  height: 100%;
-  border: 3px solid #E5E5EA;
-  border-radius: 50%;
-  border-top-color: #007AFF;
-  animation: spin 1s linear infinite;
+.ios-dialog-header {
+  @apply p-4 text-center;
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.ios-dialog-title {
+  @apply text-lg font-semibold;
 }
 
-.ios-alert {
-  background: #F2F2F7;
-  color: #000000;
-  padding: 12px 16px;
-  border-radius: 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.ios-dialog-message {
+  @apply mt-2 text-gray-500;
 }
 
-.ios-alert.success {
-  background: #E8F5E9;
-  color: #2E7D32;
+.ios-dialog-actions {
+  @apply flex border-t border-gray-200;
 }
 
-.ios-alert.error {
-  background: #FFEBEE;
-  color: #C62828;
+.ios-dialog-button {
+  @apply flex-1 py-3 text-center font-medium;
 }
 
-.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-dialog-button.cancel {
+  @apply text-gray-500;
 }
 
-.ios-tab-bar-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #8E8E93;
-  padding: 8px;
+.ios-dialog-button.confirm {
+  @apply text-blue-500;
 }
 
-.ios-tab-bar-item.active {
-  color: #007AFF;
+.ios-action-sheet {
+  @apply fixed inset-0 flex flex-col justify-end;
+}
+
+.ios-action-sheet-content {
+  @apply bg-white rounded-t-2xl overflow-hidden;
+}
+
+.ios-action-sheet-title {
+  @apply p-4 text-center text-gray-500;
+}
+
+.ios-action-sheet-item {
+  @apply flex items-center space-x-3 p-4 border-t border-gray-100;
+}
+
+.ios-action-sheet-item.destructive {
+  @apply text-red-500;
 }
 
-.ios-tab-bar-item span {
-  font-size: 12px;
-  margin-top: 4px;
+.ios-action-sheet-cancel {
+  @apply mt-2 p-4 bg-white rounded-2xl text-center font-medium;
 }
 </style> 

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

@@ -1,416 +1,444 @@
 <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="material-container min-h-screen bg-gray-50">
+    <!-- 顶部应用栏 -->
+    <div class="material-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <Menu class="w-5 h-5 text-white mr-4" />
+          <h1 class="text-xl font-medium text-white">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 class="flex items-center space-x-4">
+          <button class="material-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="material-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="material-icon-button">
+            <User class="w-5 h-5" />
+          </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="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">
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="material-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="material-nav-item active">
                 <Home class="w-5 h-5" />
-              </button>
-              <button class="material-button-icon">
+                <span>首页</span>
+              </a>
+              <a href="#" class="material-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="material-badge">12</span>
+              </a>
+              <a href="#" class="material-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="material-nav-item">
                 <Settings class="w-5 h-5" />
-              </button>
-              <button class="material-button-icon">
-                <User class="w-5 h-5" />
-              </button>
-            </div>
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="material-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="material-list-item">
+                  <div class="material-avatar bg-blue-500">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-gray-900">卡片标题</h3>
+                    <p class="text-gray-600">卡片副标题</p>
+                  </div>
+                  <button class="material-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="material-list-item">
+                  <div class="material-avatar bg-indigo-500">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-gray-900">另一个标题</h3>
+                    <p class="text-gray-600">另一个副标题</p>
+                  </div>
+                  <button class="material-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </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 class="material-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">表单元素</h2>
+              <div class="space-y-4">
+                <div class="material-input-group">
+                  <label class="text-gray-700">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="material-input">
                 </div>
-                <div>
-                  <h4 class="text-base font-medium">列表项标题</h4>
-                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                <div class="material-input-group">
+                  <label class="text-gray-700">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="material-input">
                 </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 class="material-input-group">
+                  <label class="text-gray-700">下拉选择</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>
+                    <span class="text-gray-700">复选框</span>
+                  </label>
+                  <label class="material-radio">
+                    <input type="radio" name="radio">
+                    <span class="material-radiomark"></span>
+                    <span class="text-gray-700">单选框</span>
+                  </label>
                 </div>
-                <div>
-                  <h4 class="text-base font-medium">列表项标题</h4>
-                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                <div class="material-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-gray-700">开关</label>
                 </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 class="material-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="material-button">主要按钮</button>
+                <button class="material-button outlined">次要按钮</button>
+                <button class="material-button text">文本按钮</button>
+                <button class="material-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="material-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">进度指示器</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"></div>
+                </div>
+              </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 class="material-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">对话框示例</h2>
+              <button class="material-button" @click="showDialog = true">打开对话框</button>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="material-bottom-nav">
+      <a href="#" class="material-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="material-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="material-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="material-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="material-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="material-dialog-overlay">
+      <div class="material-dialog">
+        <div class="material-dialog-header">
+          <h3 class="text-gray-900">对话框标题</h3>
+          <button class="material-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
+        <div class="material-dialog-content">
+          <p class="text-gray-600">这是一个 Material Design 风格的对话框示例。</p>
+        </div>
+        <div class="material-dialog-actions">
+          <button class="material-button text" @click="showDialog = false">取消</button>
+          <button class="material-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu, 
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
 </script>
 
 <style scoped>
+.material-container {
+  font-family: 'Roboto', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
 .material-app-bar {
-  @apply bg-white shadow-md p-4 mb-6;
+  @apply sticky top-0 z-10 bg-blue-500;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.material-icon-button {
+  @apply p-2 rounded-full text-white;
+  transition: all 0.3s ease;
+}
+
+.material-icon-button:hover {
+  @apply bg-blue-600;
 }
 
 .material-card {
-  @apply bg-white rounded-lg shadow-sm border border-gray-200;
+  @apply rounded-lg p-4 bg-white;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  transition: all 0.3s ease;
 }
 
-.material-card-elevated {
-  @apply bg-white rounded-lg shadow-md;
+.material-card:hover {
+  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2), 0 6px 7px 0 rgba(0, 0, 0, 0.14), 0 2px 12px 0 rgba(0, 0, 0, 0.12);
 }
 
-.material-card-outlined {
-  @apply bg-white rounded-lg border border-gray-200;
+.material-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-700;
+  transition: all 0.3s ease;
 }
 
-.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-nav-item:hover {
+  @apply bg-gray-100;
 }
 
-.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-nav-item.active {
+  @apply bg-blue-50 text-blue-600;
 }
 
-.material-button-text {
-  @apply bg-transparent text-blue-600 px-4 py-2 rounded-lg
-         hover:bg-blue-100 active:bg-blue-200;
+.material-badge {
+  @apply bg-red-500 text-white text-xs px-2 py-1 rounded-full;
 }
 
-.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-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
+  transition: all 0.3s ease;
 }
 
-.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-list-item:hover {
+  @apply bg-gray-50;
 }
 
-.material-label {
-  @apply block text-sm font-medium text-gray-700 mb-1;
+.material-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
 }
 
-.material-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.material-input-group {
+  @apply space-y-1;
 }
 
-.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-input {
+  @apply w-full px-3 py-2 rounded-lg text-gray-900;
+  background: transparent;
+  border-bottom: 2px solid #e5e7eb;
+  transition: all 0.3s ease;
+}
+
+.material-input:focus {
+  @apply outline-none;
+  border-bottom-color: #3b82f6;
 }
 
+.material-input::placeholder {
+  @apply text-gray-400;
+}
+
+.material-checkbox,
 .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-checkmark,
+.material-radiomark {
+  @apply w-5 h-5 rounded;
+  background: transparent;
+  border: 2px solid #e5e7eb;
+  transition: all 0.3s ease;
+}
+
+.material-checkmark {
+  @apply rounded;
+}
+
+.material-radiomark {
+  @apply rounded-full;
+}
+
+.material-checkbox input:checked + .material-checkmark,
+.material-radio input:checked + .material-radiomark {
+  @apply bg-blue-500 border-blue-500;
 }
 
 .material-switch {
-  @apply flex items-center space-x-2 cursor-pointer;
+  @apply flex items-center space-x-2;
 }
 
 .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;
+  @apply hidden;
 }
 
-.material-list-item {
-  @apply flex items-center space-x-4 p-4 rounded-lg bg-gray-50
-         border border-gray-200 shadow-inner;
+.material-switch label {
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: #e5e7eb;
+  transition: all 0.3s ease;
 }
 
-.material-tabs {
-  @apply flex space-x-2 p-1 rounded-lg bg-gray-50 border border-gray-200;
+.material-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-white rounded-full top-0.5 left-0.5;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.material-tab {
-  @apply px-4 py-2 rounded-md text-gray-600
-         hover:bg-gray-200 active:bg-gray-300;
+.material-switch input:checked + label {
+  @apply bg-blue-500;
 }
 
-.material-tab.active {
-  @apply bg-blue-500 text-white;
+.material-switch input:checked + label:after {
+  @apply translate-x-6;
 }
 
-.material-breadcrumbs {
-  @apply flex items-center text-sm;
+.material-button {
+  @apply px-4 py-2 rounded-lg text-white;
+  background: #3b82f6;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.material-breadcrumb {
-  @apply text-gray-600 hover:text-blue-500;
+.material-button:hover {
+  @apply bg-blue-600;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.material-breadcrumb.active {
-  @apply text-blue-500;
+.material-button.outlined {
+  @apply bg-transparent border-2 border-blue-500 text-blue-500;
+  box-shadow: none;
+}
+
+.material-button.text {
+  @apply bg-transparent border-none text-blue-500;
+  box-shadow: none;
+}
+
+.material-button.icon {
+  @apply p-2 rounded-full;
 }
 
 .material-progress {
-  @apply w-full h-4 rounded-full bg-gray-100 border border-gray-200
-         shadow-inner overflow-hidden;
+  @apply h-1 rounded-full overflow-hidden;
+  background: #e5e7eb;
 }
 
 .material-progress-bar {
-  @apply h-full bg-blue-500 rounded-full;
+  @apply h-full rounded-full;
+  background: #3b82f6;
 }
 
-.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.circular {
+  @apply w-12 h-12 rounded-full;
+  background: transparent;
+  border: 4px solid #e5e7eb;
 }
 
 .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));
+  @apply w-full h-full rounded-full border-4;
+  border-color: #3b82f6;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+}
+
+.material-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-white flex justify-around items-center py-2;
+  box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.2), 0 -4px 5px 0 rgba(0, 0, 0, 0.14), 0 -1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-.material-snackbar {
-  @apply flex items-center justify-between p-4 rounded-lg bg-gray-800 text-white;
+.material-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-gray-600;
+  transition: all 0.3s ease;
 }
 
-.material-alert {
-  @apply flex items-center p-4 rounded-lg bg-blue-100
-         border border-blue-200 shadow-inner text-blue-600;
+.material-bottom-nav-item:hover {
+  @apply text-blue-500;
 }
 
-.material-alert.success {
-  @apply bg-green-100 border-green-200 text-green-600;
+.material-bottom-nav-item.active {
+  @apply text-blue-500;
 }
 
-.material-alert.error {
-  @apply bg-red-100 border-red-200 text-red-600;
+.material-dialog-overlay {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
 }
 
-.material-bottom-nav {
-  @apply fixed bottom-0 left-0 right-0 bg-white shadow-lg
-         flex justify-around p-2;
+.material-dialog {
+  @apply rounded-lg p-4 bg-white w-full max-w-md;
+  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2), 0 6px 7px 0 rgba(0, 0, 0, 0.14), 0 2px 12px 0 rgba(0, 0, 0, 0.12);
 }
 
-.material-bottom-nav-item {
-  @apply flex flex-col items-center p-2 text-gray-600
-         hover:text-blue-500;
+.material-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
 }
 
-.material-bottom-nav-item.active {
-  @apply text-blue-500;
+.material-dialog-content {
+  @apply p-4;
 }
 
-.material-color-card {
-  @apply p-4 rounded-lg shadow-md border border-gray-200
-         flex items-center justify-center font-medium;
+.material-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
 }
 </style> 

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

@@ -1,609 +1,421 @@
 <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="minimal-container min-h-screen bg-white">
+    <!-- 顶部应用栏 -->
+    <div class="minimal-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <Menu class="w-5 h-5 text-gray-600 mr-4" />
+          <h1 class="text-xl font-medium text-gray-900">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 class="minimal-icon-button">
+            <Search class="w-5 h-5" />
           </button>
-          <button class="minimal-button-icon">
-            <Bell class="w-5 h-5 text-gray-800" />
+          <button class="minimal-icon-button">
+            <Bell class="w-5 h-5" />
           </button>
-          <button class="minimal-button-icon">
-            <User class="w-5 h-5 text-gray-800" />
+          <button class="minimal-icon-button">
+            <User class="w-5 h-5" />
           </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">
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="minimal-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-900">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="minimal-nav-item active">
                 <Home class="w-5 h-5" />
-              </button>
-              <button class="minimal-button-icon">
+                <span>首页</span>
+              </a>
+              <a href="#" class="minimal-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="minimal-badge">12</span>
+              </a>
+              <a href="#" class="minimal-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="minimal-nav-item">
                 <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>
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="minimal-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="minimal-list-item">
+                  <div class="minimal-avatar bg-gray-100">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-gray-900">卡片标题</h3>
+                    <p class="text-gray-600">卡片副标题</p>
+                  </div>
+                  <button class="minimal-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="minimal-list-item">
+                  <div class="minimal-avatar bg-gray-100">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-gray-900">另一个标题</h3>
+                    <p class="text-gray-600">另一个副标题</p>
+                  </div>
+                  <button class="minimal-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </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 class="minimal-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">表单元素</h2>
+              <div class="space-y-4">
+                <div class="minimal-input-group">
+                  <label class="text-gray-700">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="minimal-input">
                 </div>
-                <div>
-                  <h4 class="text-base font-medium text-gray-800">列表项标题</h4>
-                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                <div class="minimal-input-group">
+                  <label class="text-gray-700">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="minimal-input">
                 </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 class="minimal-input-group">
+                  <label class="text-gray-700">下拉选择</label>
+                  <select class="minimal-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
                 </div>
-                <div>
-                  <h4 class="text-base font-medium text-gray-800">列表项标题</h4>
-                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                <div class="flex items-center space-x-4">
+                  <label class="minimal-checkbox">
+                    <input type="checkbox">
+                    <span class="minimal-checkmark"></span>
+                    <span class="text-gray-700">复选框</span>
+                  </label>
+                  <label class="minimal-radio">
+                    <input type="radio" name="radio">
+                    <span class="minimal-radiomark"></span>
+                    <span class="text-gray-700">单选框</span>
+                  </label>
+                </div>
+                <div class="minimal-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-gray-700">开关</label>
                 </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 class="minimal-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="minimal-button">主要按钮</button>
+                <button class="minimal-button outlined">次要按钮</button>
+                <button class="minimal-button text">文本按钮</button>
+                <button class="minimal-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="minimal-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">进度指示器</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"></div>
+                </div>
+              </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 class="minimal-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-900">对话框示例</h2>
+              <button class="minimal-button" @click="showDialog = true">打开对话框</button>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="minimal-bottom-nav">
+      <a href="#" class="minimal-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="minimal-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="minimal-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="minimal-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="minimal-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="minimal-dialog-overlay">
+      <div class="minimal-dialog">
+        <div class="minimal-dialog-header">
+          <h3 class="text-gray-900">对话框标题</h3>
+          <button class="minimal-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
+        <div class="minimal-dialog-content">
+          <p class="text-gray-600">这是一个极简风格的对话框示例。</p>
+        </div>
+        <div class="minimal-dialog-actions">
+          <button class="minimal-button text" @click="showDialog = false">取消</button>
+          <button class="minimal-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu,
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
 } from 'lucide-vue-next'
-</script>
 
-<style>
-/* Minimalist 样式 */
-.minimal-nav-bar {
-  background: white;
-  border-bottom: 1px solid #e5e7eb;
-}
+const showDialog = ref(false)
+</script>
 
-.minimal-card {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+<style scoped>
+.minimal-container {
+  font-family: 'Inter', sans-serif;
 }
 
-.minimal-color-card {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+.minimal-app-bar {
+  @apply sticky top-0 z-10 bg-white;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.minimal-button {
-  background: #f3f4f6;
-  color: #374151;
-  padding: 12px 24px;
-  border-radius: 8px;
-  font-weight: 500;
+.minimal-icon-button {
+  @apply p-2 rounded-full text-gray-600;
   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-icon-button:hover {
+  @apply bg-gray-100;
 }
 
-.minimal-button-outline:hover {
-  background: #f3f4f6;
+.minimal-card {
+  @apply rounded-lg p-4 bg-white;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.minimal-button-text {
-  color: #374151;
-  padding: 12px 24px;
-  font-weight: 500;
+.minimal-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-600;
   transition: all 0.2s ease;
 }
 
-.minimal-button-text:hover {
-  color: #111827;
+.minimal-nav-item:hover {
+  @apply bg-gray-100;
 }
 
-.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-nav-item.active {
+  @apply text-gray-900 bg-gray-100;
 }
 
-.minimal-button-icon:hover {
-  background: #e5e7eb;
+.minimal-badge {
+  @apply bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full;
 }
 
-.minimal-input {
-  width: 100%;
-  padding: 12px;
-  border-radius: 8px;
-  background: white;
-  border: 1px solid #e5e7eb;
-  color: #374151;
+.minimal-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
   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-list-item:hover {
+  @apply bg-gray-100;
 }
 
-.minimal-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.minimal-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-gray-600 font-medium;
 }
 
-.minimal-checkmark {
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  background: white;
-  border: 1px solid #e5e7eb;
-  margin-right: 8px;
-  position: relative;
+.minimal-input-group {
+  @apply space-y-1;
 }
 
-.minimal-checkbox input:checked + .minimal-checkmark {
-  background: #f3f4f6;
-  border-color: #9ca3af;
+.minimal-input {
+  @apply w-full px-3 py-2 rounded-lg text-gray-900;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
 }
 
-.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-input:focus {
+  @apply border-gray-400 outline-none;
 }
 
-.minimal-checkbox input:checked + .minimal-checkmark:after {
-  opacity: 1;
+.minimal-input::placeholder {
+  @apply text-gray-400;
 }
 
+.minimal-checkbox,
 .minimal-radio {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+  @apply flex items-center space-x-2 cursor-pointer;
 }
 
+.minimal-checkmark,
 .minimal-radiomark {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: white;
-  border: 1px solid #e5e7eb;
-  margin-right: 8px;
-  position: relative;
+  @apply w-5 h-5 rounded;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
 }
 
-.minimal-radio input:checked + .minimal-radiomark {
-  border-color: #9ca3af;
+.minimal-checkmark {
+  @apply rounded;
 }
 
-.minimal-radiomark:after {
-  content: '';
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: #374151;
-  border-radius: 50%;
-  top: 4px;
-  left: 4px;
-  opacity: 0;
+.minimal-radiomark {
+  @apply rounded-full;
 }
 
-.minimal-radio input:checked + .minimal-radiomark:after {
-  opacity: 1;
+.minimal-checkbox input:checked + .minimal-checkmark,
+.minimal-radio input:checked + .minimal-radiomark {
+  @apply bg-gray-900 border-gray-900;
 }
 
 .minimal-switch {
-  display: flex;
-  align-items: center;
+  @apply flex items-center space-x-2;
 }
 
 .minimal-switch input {
-  display: none;
+  @apply hidden;
 }
 
 .minimal-switch label {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 24px;
-  background: #e5e7eb;
-  border-radius: 12px;
-  cursor: pointer;
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(0, 0, 0, 0.1);
   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;
+  @apply absolute w-5 h-5 bg-white rounded-full top-0.5 left-0.5;
   transition: all 0.2s ease;
 }
 
 .minimal-switch input:checked + label {
-  background: #9ca3af;
+  @apply bg-gray-900;
 }
 
 .minimal-switch input:checked + label:after {
-  left: 28px;
-}
-
-.minimal-tabs {
-  display: flex;
-  border-radius: 8px;
-  background: #f3f4f6;
-  overflow: hidden;
+  @apply translate-x-6;
 }
 
-.minimal-tab {
-  padding: 12px 16px;
-  color: #374151;
-  font-weight: 500;
-  position: relative;
-  flex: 1;
-  text-align: center;
+.minimal-button {
+  @apply px-4 py-2 rounded-lg text-gray-900;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
 }
 
-.minimal-tab.active {
-  background: white;
-  color: #111827;
+.minimal-button:hover {
+  @apply bg-gray-100;
 }
 
-.minimal-breadcrumbs {
-  display: flex;
-  align-items: center;
+.minimal-button.outlined {
+  @apply bg-transparent border border-gray-300;
 }
 
-.minimal-breadcrumb {
-  color: #374151;
-  text-decoration: none;
-  font-weight: 500;
+.minimal-button.text {
+  @apply bg-transparent border-none;
 }
 
-.minimal-breadcrumb.active {
-  color: #111827;
-  font-weight: 500;
+.minimal-button.icon {
+  @apply p-2 rounded-full;
 }
 
 .minimal-progress {
-  height: 4px;
-  background: #f3f4f6;
-  border-radius: 2px;
-  overflow: hidden;
+  @apply h-1 rounded-full overflow-hidden;
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .minimal-progress-bar {
-  height: 100%;
-  background: #9ca3af;
-  border-radius: 2px;
+  @apply h-full bg-gray-900 rounded-full;
 }
 
-.minimal-progress-circular {
-  width: 40px;
-  height: 40px;
-  position: relative;
+.minimal-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .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;
+  @apply w-full h-full rounded-full border-4 border-gray-900;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
-.minimal-alert.error {
-  background: white;
-  border-color: #e5e7eb;
+.minimal-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-white flex justify-around items-center py-2;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.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-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-gray-600;
 }
 
-.minimal-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #374151;
-  padding: 8px;
-  font-weight: 500;
+.minimal-bottom-nav-item.active {
+  @apply text-gray-900;
 }
 
-.minimal-nav-item.active {
-  color: #111827;
-  font-weight: 500;
+.minimal-dialog-overlay {
+  @apply fixed inset-0 bg-black/20 flex items-center justify-center;
 }
 
-.minimal-nav-item span {
-  font-size: 12px;
-  margin-top: 4px;
+.minimal-dialog {
+  @apply rounded-lg p-4 bg-white w-full max-w-md;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.minimal-avatar {
-  background: #f3f4f6;
-  border-radius: 8px;
+.minimal-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
 }
 
-.minimal-card-elevated {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+.minimal-dialog-content {
+  @apply p-4;
 }
 
-.minimal-card-inset {
-  background: #f3f4f6;
-  border-radius: 8px;
+.minimal-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
 }
 </style> 

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

@@ -1,237 +1,184 @@
 <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 class="morphism-container min-h-screen bg-gradient-to-br from-purple-100 to-blue-100">
+    <!-- 顶部导航栏 -->
+    <div class="morphism-header">
+      <div class="morphism-header-content">
+        <div class="morphism-logo">
+          <img :src="logoUrl" alt="Morphism Logo" class="morphism-logo-img">
+          <span class="morphism-logo-text">Morphism</span>
         </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 class="morphism-nav">
+          <a href="#" class="morphism-nav-item active">首页</a>
+          <a href="#" class="morphism-nav-item">组件</a>
+          <a href="#" class="morphism-nav-item">文档</a>
+          <a href="#" class="morphism-nav-item">主题</a>
+        </div>
+        <div class="morphism-header-actions">
+          <button class="morphism-btn text">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="morphism-btn text">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="morphism-btn text">
+            <User class="w-5 h-5" />
+          </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="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 class="morphism-main">
+      <!-- 卡片列表 -->
+      <div class="morphism-card-list">
+        <div v-for="card in cards" :key="card.id" class="morphism-card">
+          <div class="morphism-card-cover">
+            <img :src="card.cover" :alt="card.title" class="morphism-card-cover-img">
           </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 class="morphism-card-body">
+            <div class="morphism-card-meta">
+              <div class="morphism-card-meta-avatar">
+                <div class="morphism-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
+              </div>
+              <div class="morphism-card-meta-content">
+                <h3 class="morphism-card-meta-title">{{ card.title }}</h3>
+                <p class="morphism-card-meta-description">{{ card.description }}</p>
+              </div>
             </div>
-            <div class="flex flex-wrap gap-4">
-              <button class="morphism-button-icon">
-                <Layers class="w-5 h-5" />
+            <p class="morphism-card-content">{{ card.content }}</p>
+            <div class="morphism-card-actions">
+              <button class="morphism-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
               </button>
-              <button class="morphism-button-icon">
-                <Box class="w-5 h-5" />
+              <button class="morphism-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
               </button>
-              <button class="morphism-button-icon">
-                <Box class="w-5 h-5" />
+              <button class="morphism-btn text">
+                <Share2 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 class="morphism-form">
+        <div class="morphism-form-item">
+          <label class="morphism-form-item-label">文本输入</label>
+          <div class="morphism-form-item-control">
+            <input type="text" placeholder="请输入内容" class="morphism-input">
           </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 class="morphism-form-item">
+          <label class="morphism-form-item-label">密码输入</label>
+          <div class="morphism-form-item-control">
+            <input type="password" placeholder="请输入密码" class="morphism-input">
           </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 class="morphism-form-item">
+          <label class="morphism-form-item-label">下拉选择</label>
+          <div class="morphism-form-item-control">
+            <select class="morphism-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="morphism-form-item">
+          <label class="morphism-form-item-label">开关</label>
+          <div class="morphism-form-item-control">
+            <label class="morphism-switch">
+              <input type="checkbox">
+              <span class="morphism-switch-inner"></span>
+            </label>
           </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 class="morphism-btn-group">
+        <button class="morphism-btn primary">主要按钮</button>
+        <button class="morphism-btn secondary">次要按钮</button>
+        <button class="morphism-btn outline">轮廓按钮</button>
+        <button class="morphism-btn text">文本按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="morphism-tabs">
+        <div class="morphism-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="morphism-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
           </div>
         </div>
+        <div class="morphism-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="morphism-tabs-tabpane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="morphism-tabs-tabpane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="morphism-tabs-tabpane">
+            <p>标签页 3 的内容</p>
+          </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 v-if="showDialog" class="morphism-modal-mask">
+        <div class="morphism-modal-wrap">
+          <div class="morphism-modal">
+            <div class="morphism-modal-content">
+              <div class="morphism-modal-header">
+                <div class="morphism-modal-title">对话框标题</div>
+                <button class="morphism-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="morphism-modal-body">
+                <p>这是一个 Morphism 风格的对话框示例。</p>
+              </div>
+              <div class="morphism-modal-footer">
+                <button class="morphism-btn" @click="showDialog = false">取消</button>
+                <button class="morphism-btn primary" @click="showDialog = false">确定</button>
+              </div>
             </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 v-if="showMessage" class="morphism-message">
+        <div class="morphism-message-notice">
+          <div class="morphism-message-notice-content">
+            <Info class="w-5 h-5" />
+            <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>
+      <!-- 通知面板 -->
+      <div v-if="showNotifications" class="morphism-notification">
+        <div class="morphism-notification-notice">
+          <div class="morphism-notification-notice-content">
+            <div class="morphism-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="morphism-notification-notice-message">通知标题</div>
+            <div class="morphism-notification-notice-description">通知内容</div>
+          </div>
+          <button class="morphism-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
       </div>
@@ -240,178 +187,328 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Search, 
-  Bell, 
-  User, 
-  ChevronRight,
-  Layers,
-  Box,
-  Zap,
-  Stars,
-  CheckCircle,
-  XCircle,
-  Home,
-  Settings
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0idXJsKCNwYWludDApIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDAiIHgxPSIwIiB5MT0iMCIgeDI9IjMyIiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjQjQ3RkZGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkY3RkJGIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+'
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNlNmYwZmYiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDgxLjQzMSAxMTIgMTA4QzExMiAxMzQuNTY5IDEzMy40MzEgMTU2IDE2MCAxNTZDMTg2LjU2OSAxNTYgMjA4IDEzNC41NjkgMjA4IDEwOEMyMDggODEuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iI2I0N2ZmZiIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjZmY3ZmJmIi8+PC9zdmc+',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-purple-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNlNmYwZmYiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDgxLjQzMSAxMTIgMTA4QzExMiAxMzQuNTY5IDEzMy40MzEgMTU2IDE2MCAxNTZDMTg2LjU2OSAxNTYgMjA4IDEzNC41NjkgMjA4IDEwOEMyMDggODEuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iI2ZmN2ZiZiIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjYjQ3ZmZmIi8+PC9zdmc+',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-blue-500'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
 <style scoped>
+.morphism-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.morphism-header {
+  @apply fixed top-0 left-0 right-0 h-16 backdrop-blur-md bg-white/30 z-10;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+}
+
+.morphism-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
+}
+
+.morphism-logo {
+  @apply flex items-center;
+}
+
+.morphism-logo-img {
+  @apply h-8 w-8;
+}
+
+.morphism-logo-text {
+  @apply ml-2 text-xl font-medium text-gray-900;
+}
+
+.morphism-nav {
+  @apply flex items-center space-x-6;
+}
+
+.morphism-nav-item {
+  @apply text-gray-600 hover:text-purple-500;
+}
+
+.morphism-nav-item.active {
+  @apply text-purple-500;
+}
+
+.morphism-header-actions {
+  @apply flex items-center space-x-2;
+}
+
+.morphism-main {
+  @apply pt-20 pb-8 px-4;
+}
+
+.morphism-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+}
+
 .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);
+  @apply backdrop-blur-md bg-white/30 rounded-xl overflow-hidden;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.morphism-card-cover {
+  @apply relative h-48 overflow-hidden;
+}
+
+.morphism-card-cover-img {
+  @apply w-full h-full object-cover;
+}
+
+.morphism-card-body {
+  @apply p-4;
 }
 
-.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-card-meta {
+  @apply flex items-start mb-4;
 }
 
-.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-card-meta-avatar {
+  @apply mr-4;
 }
 
-.morphism-button-text {
-  @apply px-4 py-2 text-gray-700 font-bold
-         hover:text-gray-800;
+.morphism-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
 }
 
-.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-card-meta-content {
+  @apply flex-1;
 }
 
-.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-card-meta-title {
+  @apply text-base font-medium text-gray-900;
 }
 
-.morphism-label {
-  @apply block text-sm font-bold text-gray-800 mb-2;
+.morphism-card-meta-description {
+  @apply text-sm text-gray-500;
 }
 
-.morphism-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.morphism-card-content {
+  @apply text-gray-600 mb-4;
 }
 
-.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-card-actions {
+  @apply flex items-center border-t border-gray-100/50 pt-4;
 }
 
-.morphism-radio {
-  @apply flex items-center space-x-2 cursor-pointer;
+.morphism-form {
+  @apply space-y-4 mt-6;
 }
 
-.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-form-item {
+  @apply flex flex-col;
+}
+
+.morphism-form-item-label {
+  @apply mb-2 text-gray-600;
+}
+
+.morphism-form-item-control {
+  @apply flex-1;
+}
+
+.morphism-input,
+.morphism-select {
+  @apply w-full px-4 py-2 backdrop-blur-md bg-white/30 rounded-xl border border-gray-200/50 focus:border-purple-500 focus:ring-1 focus:ring-purple-500;
 }
 
 .morphism-switch {
-  @apply relative inline-flex items-center cursor-pointer;
+  @apply relative inline-block w-12 h-6;
 }
 
 .morphism-switch input {
-  @apply sr-only;
+  @apply hidden;
+}
+
+.morphism-switch-inner {
+  @apply absolute inset-0 rounded-full backdrop-blur-md bg-white/30 transition-colors duration-300;
+  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.15);
 }
 
-.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-switch-inner:after {
+  content: '';
+  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5 shadow transition-transform duration-300;
+}
+
+.morphism-switch input:checked + .morphism-switch-inner {
+  @apply bg-purple-500;
+}
+
+.morphism-switch input:checked + .morphism-switch-inner:after {
+  @apply translate-x-6;
+}
+
+.morphism-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.morphism-btn {
+  @apply px-4 py-2 rounded-xl text-sm font-medium transition-colors duration-300;
+}
+
+.morphism-btn.primary {
+  @apply backdrop-blur-md bg-purple-500 text-white hover:bg-purple-600;
+  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.15);
+}
+
+.morphism-btn.secondary {
+  @apply backdrop-blur-md bg-blue-500 text-white hover:bg-blue-600;
+  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.15);
+}
+
+.morphism-btn.outline {
+  @apply backdrop-blur-md bg-white/30 text-gray-600 border border-gray-200/50 hover:border-purple-500 hover:text-purple-500;
+}
+
+.morphism-btn.text {
+  @apply bg-transparent text-gray-600 hover:text-purple-500;
 }
 
 .morphism-tabs {
-  @apply flex space-x-2 p-1 bg-white/80 backdrop-blur-sm rounded-xl;
+  @apply mt-6;
+}
+
+.morphism-tabs-nav {
+  @apply flex border-b border-gray-200/50;
+}
+
+.morphism-tabs-tab {
+  @apply px-4 py-3 text-gray-600 cursor-pointer hover:text-purple-500;
+}
+
+.morphism-tabs-tab.active {
+  @apply text-purple-500 border-b-2 border-purple-500;
+}
+
+.morphism-tabs-content {
+  @apply p-4;
+}
+
+.morphism-tabs-tabpane {
+  @apply backdrop-blur-md bg-white/30 rounded-xl p-4;
+}
+
+.morphism-modal-mask {
+  @apply fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50;
+}
+
+.morphism-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
+}
+
+.morphism-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
 }
 
-.morphism-tab {
-  @apply px-6 py-2 text-gray-700 font-bold rounded-lg;
+.morphism-modal-content {
+  @apply backdrop-blur-md bg-white/30 rounded-xl shadow-lg;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.morphism-tab.active {
-  @apply bg-blue-500 text-white;
+.morphism-modal-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200/50;
 }
 
-.morphism-progress {
-  @apply h-4 bg-white/80 backdrop-blur-sm rounded-full;
+.morphism-modal-title {
+  @apply text-lg font-medium text-gray-900;
 }
 
-.morphism-progress-bar {
-  @apply h-full bg-blue-500 rounded-full;
-  transition: width 0.3s ease;
+.morphism-modal-close {
+  @apply text-gray-400 hover:text-gray-500;
 }
 
-.morphism-health-bar {
-  @apply h-4 bg-white/80 backdrop-blur-sm rounded-full;
+.morphism-modal-body {
+  @apply p-4;
 }
 
-.morphism-health {
-  @apply h-full bg-red-500 rounded-full;
-  transition: width 0.3s ease;
+.morphism-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200/50;
 }
 
-.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-message {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.morphism-alert.success {
-  @apply border-emerald-200 text-emerald-800
-         bg-emerald-50/80;
+.morphism-message-notice {
+  @apply mb-4;
 }
 
-.morphism-alert.error {
-  @apply border-red-200 text-red-800
-         bg-red-50/80;
+.morphism-message-notice-content {
+  @apply flex items-center px-4 py-3 backdrop-blur-md bg-white/30 rounded-xl shadow-lg;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.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-notification {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.morphism-bottom-nav-item {
-  @apply flex flex-col items-center p-2 text-gray-700
-         hover:text-gray-800;
+.morphism-notification-notice {
+  @apply mb-4 backdrop-blur-md bg-white/30 rounded-xl shadow-lg overflow-hidden;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.morphism-bottom-nav-item.active {
-  @apply text-blue-500;
+.morphism-notification-notice-content {
+  @apply p-4;
 }
 
-.morphism-color-card {
-  @apply p-4 flex items-center justify-center font-bold;
+.morphism-notification-notice-icon {
+  @apply float-left mr-4 text-purple-500;
 }
 
-.morphism-list-item {
-  @apply p-4 bg-white/80 backdrop-blur-sm rounded-xl
-         hover:bg-white/90 transition-colors duration-200;
+.morphism-notification-notice-message {
+  @apply text-base font-medium text-gray-900;
 }
 
-.morphism-breadcrumb {
-  @apply text-gray-700 hover:text-gray-800;
+.morphism-notification-notice-description {
+  @apply mt-1 text-sm text-gray-500;
 }
 
-.morphism-breadcrumb.active {
-  @apply text-blue-500 font-bold;
+.morphism-notification-notice-close {
+  @apply absolute top-4 right-4 text-gray-400 hover:text-gray-500;
 }
 </style> 

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

@@ -1,237 +1,184 @@
 <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 class="neon-container min-h-screen bg-black">
+    <!-- 顶部导航栏 -->
+    <div class="neon-header">
+      <div class="neon-header-content">
+        <div class="neon-logo">
+          <img :src="logoUrl" alt="Neon Logo" class="neon-logo-img">
+          <span class="neon-logo-text">NEON</span>
         </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 class="neon-nav">
+          <a href="#" class="neon-nav-item active">首页</a>
+          <a href="#" class="neon-nav-item">组件</a>
+          <a href="#" class="neon-nav-item">文档</a>
+          <a href="#" class="neon-nav-item">主题</a>
+        </div>
+        <div class="neon-header-actions">
+          <button class="neon-btn text">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="neon-btn text">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="neon-btn text">
+            <User class="w-5 h-5" />
+          </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="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 class="neon-main">
+      <!-- 卡片列表 -->
+      <div class="neon-card-list">
+        <div v-for="card in cards" :key="card.id" class="neon-card">
+          <div class="neon-card-cover">
+            <img :src="card.cover" :alt="card.title" class="neon-card-cover-img">
           </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 class="neon-card-body">
+            <div class="neon-card-meta">
+              <div class="neon-card-meta-avatar">
+                <div class="neon-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
+              </div>
+              <div class="neon-card-meta-content">
+                <h3 class="neon-card-meta-title">{{ card.title }}</h3>
+                <p class="neon-card-meta-description">{{ card.description }}</p>
+              </div>
             </div>
-            <div class="flex flex-wrap gap-4">
-              <button class="neon-button-icon">
-                <Zap class="w-5 h-5" />
+            <p class="neon-card-content">{{ card.content }}</p>
+            <div class="neon-card-actions">
+              <button class="neon-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
               </button>
-              <button class="neon-button-icon">
-                <Moon class="w-5 h-5" />
+              <button class="neon-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
               </button>
-              <button class="neon-button-icon">
-                <Star class="w-5 h-5" />
+              <button class="neon-btn text">
+                <Share2 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 class="neon-form">
+        <div class="neon-form-item">
+          <label class="neon-form-item-label">文本输入</label>
+          <div class="neon-form-item-control">
+            <input type="text" placeholder="请输入内容" class="neon-input">
           </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 class="neon-form-item">
+          <label class="neon-form-item-label">密码输入</label>
+          <div class="neon-form-item-control">
+            <input type="password" placeholder="请输入密码" class="neon-input">
           </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 class="neon-form-item">
+          <label class="neon-form-item-label">下拉选择</label>
+          <div class="neon-form-item-control">
+            <select class="neon-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="neon-form-item">
+          <label class="neon-form-item-label">开关</label>
+          <div class="neon-form-item-control">
+            <label class="neon-switch">
+              <input type="checkbox">
+              <span class="neon-switch-inner"></span>
+            </label>
           </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 class="neon-btn-group">
+        <button class="neon-btn primary">主要按钮</button>
+        <button class="neon-btn secondary">次要按钮</button>
+        <button class="neon-btn outline">轮廓按钮</button>
+        <button class="neon-btn text">文本按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="neon-tabs">
+        <div class="neon-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="neon-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
           </div>
         </div>
+        <div class="neon-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="neon-tabs-tabpane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="neon-tabs-tabpane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="neon-tabs-tabpane">
+            <p>标签页 3 的内容</p>
+          </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 v-if="showDialog" class="neon-modal-mask">
+        <div class="neon-modal-wrap">
+          <div class="neon-modal">
+            <div class="neon-modal-content">
+              <div class="neon-modal-header">
+                <div class="neon-modal-title">对话框标题</div>
+                <button class="neon-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="neon-modal-body">
+                <p>这是一个霓虹灯风格的对话框示例。</p>
+              </div>
+              <div class="neon-modal-footer">
+                <button class="neon-btn" @click="showDialog = false">取消</button>
+                <button class="neon-btn primary" @click="showDialog = false">确定</button>
+              </div>
             </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 v-if="showMessage" class="neon-message">
+        <div class="neon-message-notice">
+          <div class="neon-message-notice-content">
+            <Info class="w-5 h-5" />
+            <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>
+      <!-- 通知面板 -->
+      <div v-if="showNotifications" class="neon-notification">
+        <div class="neon-notification-notice">
+          <div class="neon-notification-notice-content">
+            <div class="neon-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="neon-notification-notice-message">通知标题</div>
+            <div class="neon-notification-notice-description">通知内容</div>
+          </div>
+          <button class="neon-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
       </div>
@@ -240,204 +187,354 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Search, 
-  Bell, 
-  User, 
-  ChevronRight,
-  Zap,
-  Moon,
-  Star,
-  CheckCircle,
-  XCircle,
-  Home,
-  Settings
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0idXJsKCNwYWludDApIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDAiIHgxPSIwIiB5MT0iMCIgeDI9IjMyIiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDBGRkZGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkYwMEZGIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+'
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDgxLjQzMSAxMTIgMTA4QzExMiAxMzQuNTY5IDEzMy40MzEgMTU2IDE2MCAxNTZDMTg2LjU2OSAxNTYgMjA4IDEzNC41NjkgMjA4IDEwOEMyMDggODEuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iIzAwRkZGRiIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjRkYwMEZGIi8+PC9zdmc+',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-cyan-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDgxLjQzMSAxMTIgMTA4QzExMiAxMzQuNTY5IDEzMy40MzEgMTU2IDE2MCAxNTZDMTg2LjU2OSAxNTYgMjA4IDEzNC41NjkgMjA4IDEwOEMyMDggODEuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iI0ZGMDBCQiIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjMDBGRkZGIi8+PC9zdmc+',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-pink-500'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
 <style scoped>
+.neon-container {
+  font-family: 'Orbitron', sans-serif;
+  background: linear-gradient(45deg, #000, #1a1a1a);
+}
+
+.neon-header {
+  @apply fixed top-0 left-0 right-0 h-16 bg-black/80 z-10;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+}
+
+.neon-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
+}
+
+.neon-logo {
+  @apply flex items-center;
+}
+
+.neon-logo-img {
+  @apply h-8 w-8;
+}
+
+.neon-logo-text {
+  @apply ml-2 text-xl font-medium text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+}
+
+.neon-nav {
+  @apply flex items-center space-x-6;
+}
+
+.neon-nav-item {
+  @apply text-cyan-400 hover:text-cyan-300;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+}
+
+.neon-nav-item.active {
+  @apply text-cyan-300;
+  text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+}
+
+.neon-header-actions {
+  @apply flex items-center space-x-2;
+}
+
+.neon-main {
+  @apply pt-20 pb-8 px-4;
+}
+
+.neon-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+}
+
 .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);
+  @apply bg-black/80 rounded-xl overflow-hidden;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.neon-card:hover {
+  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
+  transform: translateY(-5px);
+}
+
+.neon-card-cover {
+  @apply relative h-48 overflow-hidden;
+}
+
+.neon-card-cover-img {
+  @apply w-full h-full object-cover;
 }
 
-.neon-glow {
-  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
+.neon-card-body {
+  @apply p-4;
 }
 
-.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-card-meta {
+  @apply flex items-start mb-4;
 }
 
-.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-card-meta-avatar {
+  @apply mr-4;
 }
 
-.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-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
 }
 
-.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-card-meta-content {
+  @apply flex-1;
 }
 
-.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-card-meta-title {
+  @apply text-base font-medium text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
-.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-card-meta-description {
+  @apply text-sm text-cyan-300;
 }
 
-.neon-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.neon-card-content {
+  @apply text-cyan-200 mb-4;
 }
 
-.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-card-actions {
+  @apply flex items-center border-t border-cyan-500/20 pt-4;
 }
 
-.neon-radio {
-  @apply flex items-center space-x-2 cursor-pointer;
+.neon-form {
+  @apply space-y-4 mt-6;
 }
 
-.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-form-item {
+  @apply flex flex-col;
+}
+
+.neon-form-item-label {
+  @apply mb-2 text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+}
+
+.neon-form-item-control {
+  @apply flex-1;
+}
+
+.neon-input,
+.neon-select {
+  @apply w-full px-4 py-2 bg-black/80 rounded-xl border border-cyan-500/20 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 text-cyan-200;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
 }
 
 .neon-switch {
-  @apply relative inline-flex items-center cursor-pointer;
+  @apply relative inline-block w-12 h-6;
 }
 
 .neon-switch input {
-  @apply sr-only;
+  @apply hidden;
+}
+
+.neon-switch-inner {
+  @apply absolute inset-0 rounded-full bg-black/80 transition-colors duration-300;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-.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-switch-inner:after {
+  content: '';
+  @apply absolute w-5 h-5 rounded-full bg-cyan-400 top-0.5 left-0.5 shadow transition-transform duration-300;
+  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+}
+
+.neon-switch input:checked + .neon-switch-inner {
+  @apply bg-cyan-500/30;
+}
+
+.neon-switch input:checked + .neon-switch-inner:after {
+  @apply translate-x-6;
+}
+
+.neon-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.neon-btn {
+  @apply px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300;
+}
+
+.neon-btn.primary {
+  @apply bg-cyan-500/30 text-cyan-400 hover:bg-cyan-500/40;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
+}
+
+.neon-btn.secondary {
+  @apply bg-purple-500/30 text-purple-400 hover:bg-purple-500/40;
+  box-shadow: 0 0 20px rgba(147, 51, 234, 0.2);
+  border: 1px solid rgba(147, 51, 234, 0.2);
+}
+
+.neon-btn.outline {
+  @apply bg-transparent text-cyan-400 border border-cyan-500/20 hover:border-cyan-500;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
+}
+
+.neon-btn.text {
+  @apply bg-transparent text-cyan-400 hover:text-cyan-300;
 }
 
 .neon-tabs {
-  @apply flex space-x-2 p-1 bg-black/50 rounded-xl;
+  @apply mt-6;
+}
+
+.neon-tabs-nav {
+  @apply flex border-b border-cyan-500/20;
+}
+
+.neon-tabs-tab {
+  @apply px-4 py-3 text-cyan-400 cursor-pointer hover:text-cyan-300;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+}
+
+.neon-tabs-tab.active {
+  @apply text-cyan-300 border-b-2 border-cyan-500;
+  text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+}
+
+.neon-tabs-content {
+  @apply p-4;
+}
+
+.neon-tabs-tabpane {
+  @apply bg-black/80 rounded-xl p-4;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
+}
+
+.neon-modal-mask {
+  @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50;
+}
+
+.neon-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
+}
+
+.neon-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
 }
 
-.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-modal-content {
+  @apply bg-black/80 rounded-xl shadow-lg;
+  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
+  border: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-.neon-tab.active {
-  @apply bg-pink-500 text-white;
-  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
+.neon-modal-header {
+  @apply flex justify-between items-center p-4 border-b border-cyan-500/20;
 }
 
-.neon-progress {
-  @apply h-4 bg-black/50 rounded-full;
+.neon-modal-title {
+  @apply text-lg font-medium text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
-.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-modal-close {
+  @apply text-cyan-400 hover:text-cyan-300;
 }
 
-.neon-health-bar {
-  @apply h-4 bg-black/50 rounded-full;
+.neon-modal-body {
+  @apply p-4;
 }
 
-.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-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t border-cyan-500/20;
 }
 
-.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-message {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.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-message-notice {
+  @apply mb-4;
 }
 
-.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-message-notice-content {
+  @apply flex items-center px-4 py-3 bg-black/80 rounded-xl shadow-lg;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 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-notification {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.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-notification-notice {
+  @apply mb-4 bg-black/80 rounded-xl shadow-lg overflow-hidden;
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  border: 1px solid rgba(0, 255, 255, 0.2);
 }
 
-.neon-bottom-nav-item.active {
-  @apply text-white;
-  text-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
+.neon-notification-notice-content {
+  @apply p-4;
 }
 
-.neon-color-card {
-  @apply p-4 flex items-center justify-center font-bold;
-  box-shadow: 0 0 10px currentColor;
+.neon-notification-notice-icon {
+  @apply float-left mr-4 text-cyan-400;
 }
 
-.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-notification-notice-message {
+  @apply text-base font-medium text-cyan-400;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
-.neon-breadcrumb {
-  @apply text-pink-500 hover:text-pink-400;
-  text-shadow: 0 0 5px rgba(236, 72, 153, 0.5);
+.neon-notification-notice-description {
+  @apply mt-1 text-sm text-cyan-300;
 }
 
-.neon-breadcrumb.active {
-  @apply text-white font-bold;
-  text-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
+.neon-notification-notice-close {
+  @apply absolute top-4 right-4 text-cyan-400 hover:text-cyan-300;
 }
 </style> 

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

@@ -1,598 +1,758 @@
 <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="neu-container min-h-screen bg-gray-100">
+    <!-- 顶部应用栏 -->
+    <div class="neu-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <button class="neu-icon-button" @click="isMenuOpen = !isMenuOpen">
+            <Menu class="w-5 h-5" />
+          </button>
+          <h1 class="text-xl font-medium text-gray-700 ml-4">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" />
+          <div class="neu-search-box">
+            <Search class="w-5 h-5 text-gray-500" />
+            <input type="text" placeholder="搜索..." class="neu-search-input">
+          </div>
+          <button class="neu-icon-button" @click="showNotifications = !showNotifications">
+            <Bell class="w-5 h-5" />
+            <span v-if="unreadCount > 0" class="neu-badge">{{ unreadCount }}</span>
           </button>
-          <button class="neu-button-icon">
-            <User class="w-5 h-5 text-gray-600" />
+          <button class="neu-icon-button" @click="showProfile = !showProfile">
+            <User class="w-5 h-5" />
           </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>
+    <!-- 侧边菜单 -->
+    <div class="neu-side-menu" :class="{ 'is-open': isMenuOpen }">
+      <nav class="space-y-2">
+        <a href="#" class="neu-nav-item active">
+          <Home class="w-5 h-5" />
+          <span>首页</span>
+        </a>
+        <a href="#" class="neu-nav-item">
+          <Inbox class="w-5 h-5" />
+          <span>收件箱</span>
+          <span class="neu-badge">12</span>
+        </a>
+        <a href="#" class="neu-nav-item">
+          <Star class="w-5 h-5" />
+          <span>收藏</span>
+        </a>
+        <a href="#" class="neu-nav-item">
+          <Settings class="w-5 h-5" />
+          <span>设置</span>
+        </a>
+      </nav>
+    </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 class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 统计卡片 -->
+        <div class="neu-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">数据统计</h2>
+            <div class="grid grid-cols-2 gap-4">
+              <div class="neu-stat-card">
+                <div class="neu-stat-icon">
+                  <Users class="w-6 h-6" />
+                </div>
+                <div class="neu-stat-content">
+                  <span class="text-gray-500">用户数</span>
+                  <span class="text-2xl font-bold">1,234</span>
+                </div>
+              </div>
+              <div class="neu-stat-card">
+                <div class="neu-stat-icon">
+                  <Activity class="w-6 h-6" />
+                </div>
+                <div class="neu-stat-content">
+                  <span class="text-gray-500">活跃度</span>
+                  <span class="text-2xl font-bold">89%</span>
+                </div>
+              </div>
             </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 class="neu-card md:col-span-2">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">数据趋势</h2>
+            <div class="neu-chart">
+              <!-- 这里可以添加图表组件 -->
+              <div class="h-48 flex items-end space-x-2">
+                <div v-for="i in 7" :key="i" class="neu-chart-bar" :style="{ height: `${Math.random() * 100}%` }"></div>
+              </div>
             </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 class="neu-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">任务列表</h2>
+            <div class="space-y-4">
+              <div v-for="task in tasks" :key="task.id" class="neu-task-item">
+                <label class="neu-checkbox">
+                  <input type="checkbox" v-model="task.completed">
+                  <span class="neu-checkmark"></span>
+                </label>
+                <div class="flex-1">
+                  <h3 class="font-medium" :class="{ 'line-through text-gray-400': task.completed }">
+                    {{ task.title }}
+                  </h3>
+                  <p class="text-sm text-gray-500">{{ task.dueDate }}</p>
+                </div>
+                <button class="neu-icon-button">
+                  <MoreVertical class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="neu-card md:col-span-2">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">消息列表</h2>
+            <div class="space-y-4">
+              <div v-for="message in messages" :key="message.id" class="neu-message-item">
+                <div class="neu-avatar" :class="message.avatarClass">
+                  {{ message.initials }}
                 </div>
-                <div>
-                  <h4 class="text-base font-semibold text-gray-700">列表项标题</h4>
-                  <p class="text-sm text-gray-600">列表项描述文本</p>
+                <div class="flex-1">
+                  <div class="flex justify-between">
+                    <h3 class="font-medium">{{ message.sender }}</h3>
+                    <span class="text-sm text-gray-500">{{ message.time }}</span>
+                  </div>
+                  <p class="text-gray-600">{{ message.content }}</p>
                 </div>
+                <button class="neu-icon-button">
+                  <MoreVertical class="w-5 h-5" />
+                </button>
               </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 class="neu-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">表单元素</h2>
+            <div class="space-y-4">
+              <div class="neu-input-group">
+                <label class="text-gray-600">文本输入</label>
+                <input type="text" placeholder="请输入内容" class="neu-input">
+              </div>
+              <div class="neu-input-group">
+                <label class="text-gray-600">密码输入</label>
+                <input type="password" placeholder="请输入密码" class="neu-input">
+              </div>
+              <div class="neu-input-group">
+                <label class="text-gray-600">下拉选择</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>
+                  <span class="text-gray-600">复选框</span>
+                </label>
+                <label class="neu-radio">
+                  <input type="radio" name="radio">
+                  <span class="neu-radiomark"></span>
+                  <span class="text-gray-600">单选框</span>
+                </label>
+              </div>
+              <div class="neu-switch">
+                <input type="checkbox" id="switch1">
+                <label for="switch1" class="text-gray-600">开关</label>
               </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 class="neu-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">按钮样式</h2>
+            <div class="space-y-4">
+              <div class="flex flex-wrap gap-4">
+                <button class="neu-button">主要按钮</button>
+                <button class="neu-button outlined">次要按钮</button>
+                <button class="neu-button text">文本按钮</button>
+                <button class="neu-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="flex flex-wrap gap-4">
+                <button class="neu-button small">小按钮</button>
+                <button class="neu-button large">大按钮</button>
+                <button class="neu-button loading">
+                  <Loader2 class="w-5 h-5 animate-spin" />
+                </button>
+              </div>
             </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 class="neu-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">进度指示器</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"></div>
+              </div>
+              <div class="flex justify-between text-sm text-gray-500">
+                <span>0%</span>
+                <span>60%</span>
+                <span>100%</span>
+              </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 class="neu-card md:col-span-3">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">标签页</h2>
+            <div class="neu-tabs">
+              <button 
+                v-for="tab in tabs" 
+                :key="tab.id"
+                class="neu-tab"
+                :class="{ active: activeTab === tab.id }"
+                @click="activeTab = tab.id"
+              >
+                {{ tab.label }}
+              </button>
             </div>
-            <div class="neu-alert error">
-              <XCircle class="w-5 h-5 mr-2" />
-              <span>错误提示</span>
+            <div class="mt-4">
+              <div v-if="activeTab === 'tab1'" class="neu-tab-content">
+                <p>标签页 1 的内容</p>
+              </div>
+              <div v-if="activeTab === 'tab2'" class="neu-tab-content">
+                <p>标签页 2 的内容</p>
+              </div>
+              <div v-if="activeTab === 'tab3'" class="neu-tab-content">
+                <p>标签页 3 的内容</p>
+              </div>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="neu-bottom-nav">
+      <a href="#" class="neu-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="neu-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="neu-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="neu-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="neu-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="neu-dialog-overlay">
+      <div class="neu-dialog">
+        <div class="neu-dialog-header">
+          <h3 class="text-gray-700">对话框标题</h3>
+          <button class="neu-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
-          <button class="neu-nav-item">
+        </div>
+        <div class="neu-dialog-content">
+          <p class="text-gray-600">这是一个 Neumorphism 风格的对话框示例。</p>
+        </div>
+        <div class="neu-dialog-actions">
+          <button class="neu-button text" @click="showDialog = false">取消</button>
+          <button class="neu-button" @click="showDialog = false">确定</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 通知面板 -->
+    <div v-if="showNotifications" class="neu-notification-panel">
+      <div class="neu-notification-header">
+        <h3 class="text-gray-700">通知</h3>
+        <button class="neu-icon-button" @click="showNotifications = false">
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+      <div class="neu-notification-list">
+        <div v-for="notification in notifications" :key="notification.id" class="neu-notification-item">
+          <div class="neu-notification-icon">
             <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 class="flex-1">
+            <h4 class="font-medium">{{ notification.title }}</h4>
+            <p class="text-sm text-gray-500">{{ notification.content }}</p>
+          </div>
+          <span class="text-xs text-gray-400">{{ notification.time }}</span>
         </div>
       </div>
     </div>
+
+    <!-- 个人资料面板 -->
+    <div v-if="showProfile" class="neu-profile-panel">
+      <div class="neu-profile-header">
+        <div class="neu-avatar large">JD</div>
+        <div class="ml-4">
+          <h3 class="font-medium">John Doe</h3>
+          <p class="text-sm text-gray-500">john.doe@example.com</p>
+        </div>
+        <button class="neu-icon-button" @click="showProfile = false">
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+      <div class="neu-profile-menu">
+        <a href="#" class="neu-profile-menu-item">
+          <User class="w-5 h-5" />
+          <span>个人资料</span>
+        </a>
+        <a href="#" class="neu-profile-menu-item">
+          <Settings class="w-5 h-5" />
+          <span>设置</span>
+        </a>
+        <a href="#" class="neu-profile-menu-item">
+          <LogOut class="w-5 h-5" />
+          <span>退出登录</span>
+        </a>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu,
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X, Users, Activity, Loader2,
+  LogOut
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showNotifications = ref(false)
+const showProfile = ref(false)
+const isMenuOpen = ref(false)
+const activeTab = ref('tab1')
+const unreadCount = ref(3)
+
+const tasks = ref([
+  { id: 1, title: '完成项目报告', dueDate: '今天', completed: false },
+  { id: 2, title: '回复客户邮件', dueDate: '明天', completed: true },
+  { id: 3, title: '准备会议材料', dueDate: '后天', completed: false }
+])
+
+const messages = ref([
+  { 
+    id: 1, 
+    sender: 'Alice', 
+    content: '你好，请问项目进展如何？', 
+    time: '10:30', 
+    initials: 'A',
+    avatarClass: 'bg-blue-500'
+  },
+  { 
+    id: 2, 
+    sender: 'Bob', 
+    content: '会议时间改到下午3点', 
+    time: '09:15', 
+    initials: 'B',
+    avatarClass: 'bg-green-500'
+  }
+])
+
+const notifications = ref([
+  { 
+    id: 1, 
+    title: '新消息', 
+    content: 'Alice 给你发送了一条消息', 
+    time: '刚刚'
+  },
+  { 
+    id: 2, 
+    title: '系统通知', 
+    content: '系统将在今晚进行维护', 
+    time: '1小时前'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
-<style>
-/* Neumorphism 样式 */
-.neu-nav-bar {
-  background: #E6E7EE;
-  border-radius: 12px;
-  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+<style scoped>
+.neu-container {
+  font-family: 'Inter', sans-serif;
+}
+
+.neu-app-bar {
+  @apply sticky top-0 z-10 bg-gray-100;
+  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
+}
+
+.neu-icon-button {
+  @apply p-2 rounded-full text-gray-600;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
+  transition: all 0.2s ease;
+}
+
+.neu-icon-button:active {
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
+}
+
+.neu-search-box {
+  @apply flex items-center px-4 py-2 rounded-full;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
+}
+
+.neu-search-input {
+  @apply ml-2 bg-transparent outline-none w-48;
+}
+
+.neu-side-menu {
+  @apply fixed top-0 left-0 h-full w-64 bg-gray-100 p-4 transform -translate-x-full transition-transform duration-300;
+  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
+}
+
+.neu-side-menu.is-open {
+  @apply translate-x-0;
 }
 
 .neu-card {
-  background: #E6E7EE;
-  border-radius: 12px;
-  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+  @apply rounded-xl p-4;
+  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
 }
 
-.neu-color-card {
-  background: #E6E7EE;
-  border-radius: 12px;
-  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+.neu-stat-card {
+  @apply flex items-center p-4 rounded-xl;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #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-stat-icon {
+  @apply w-12 h-12 rounded-full flex items-center justify-center text-blue-500;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
 }
 
-.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-stat-content {
+  @apply ml-4;
 }
 
-.neu-button-icon:hover {
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+.neu-chart {
+  @apply p-4 rounded-xl;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
 }
 
-.neu-input {
-  width: 100%;
-  padding: 12px;
-  border-radius: 12px;
-  background: #E6E7EE;
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+.neu-chart-bar {
+  @apply w-8 bg-blue-500 rounded-t;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
+}
+
+.neu-task-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
+}
+
+.neu-message-item {
+  @apply flex items-center space-x-4 p-4 rounded-lg;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
+}
+
+.neu-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-600;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
   transition: all 0.2s ease;
 }
 
-.neu-input:focus {
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+.neu-nav-item:hover {
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
 }
 
-.neu-label {
-  display: block;
-  color: #31344B;
-  font-size: 14px;
-  margin-bottom: 8px;
+.neu-nav-item.active {
+  @apply text-blue-500;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
 }
 
-.neu-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.neu-badge {
+  @apply bg-red-500 text-white text-xs px-2 py-1 rounded-full;
+  box-shadow: 2px 2px 4px #d1d9e6, -2px -2px 4px #ffffff;
 }
 
-.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-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
 }
 
-.neu-checkbox input:checked + .neu-checkmark {
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+.neu-avatar.large {
+  @apply w-16 h-16;
 }
 
-.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-input-group {
+  @apply space-y-1;
 }
 
-.neu-checkbox input:checked + .neu-checkmark:after {
-  opacity: 1;
+.neu-input {
+  @apply w-full px-4 py-2 rounded-lg text-gray-600;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
+  transition: all 0.2s ease;
 }
 
+.neu-input:focus {
+  @apply outline-none;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff, 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.neu-checkbox,
 .neu-radio {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+  @apply flex items-center space-x-2 cursor-pointer;
 }
 
+.neu-checkmark,
 .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;
+  @apply w-5 h-5;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
+  transition: all 0.2s ease;
 }
 
-.neu-radio input:checked + .neu-radiomark {
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+.neu-checkmark {
+  @apply rounded;
 }
 
-.neu-radiomark:after {
-  content: '';
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  background: #31344B;
-  border-radius: 50%;
-  top: 6px;
-  left: 6px;
-  opacity: 0;
+.neu-radiomark {
+  @apply rounded-full;
 }
 
-.neu-radio input:checked + .neu-radiomark:after {
-  opacity: 1;
+.neu-checkbox input:checked + .neu-checkmark,
+.neu-radio input:checked + .neu-radiomark {
+  @apply bg-blue-500;
+  box-shadow: inset 4px 4px 8px #2563eb, inset -4px -4px 8px #3b82f6;
 }
 
 .neu-switch {
-  display: flex;
-  align-items: center;
+  @apply flex items-center space-x-2;
 }
 
 .neu-switch input {
-  display: none;
+  @apply hidden;
 }
 
 .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;
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
   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;
+  @apply absolute w-5 h-5 rounded-full top-0.5 left-0.5;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
   transition: all 0.2s ease;
 }
 
 .neu-switch input:checked + label {
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+  @apply bg-blue-500;
 }
 
 .neu-switch input:checked + label:after {
-  left: 33px;
+  @apply translate-x-6;
 }
 
-.neu-tabs {
-  display: flex;
-  border-radius: 12px;
-  background: #E6E7EE;
-  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
-  overflow: hidden;
+.neu-button {
+  @apply px-4 py-2 rounded-lg text-white;
+  background: linear-gradient(145deg, #3b82f6, #2563eb);
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
+  transition: all 0.2s ease;
 }
 
-.neu-tab {
-  padding: 12px 16px;
-  color: #31344B;
-  font-weight: 500;
-  position: relative;
-  flex: 1;
-  text-align: center;
+.neu-button:hover {
+  box-shadow: inset 4px 4px 8px #2563eb, inset -4px -4px 8px #3b82f6;
 }
 
-.neu-tab.active {
-  background: #E6E7EE;
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+.neu-button.outlined {
+  @apply bg-transparent border border-blue-500 text-blue-500;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
 }
 
-.neu-breadcrumbs {
-  display: flex;
-  align-items: center;
+.neu-button.text {
+  @apply bg-transparent border-none text-blue-500;
+  box-shadow: none;
 }
 
-.neu-breadcrumb {
-  color: #31344B;
-  text-decoration: none;
+.neu-button.icon {
+  @apply p-2;
 }
 
-.neu-breadcrumb.active {
-  color: #31344B;
-  font-weight: 500;
+.neu-button.small {
+  @apply px-3 py-1 text-sm;
+}
+
+.neu-button.large {
+  @apply px-6 py-3 text-lg;
+}
+
+.neu-button.loading {
+  @apply cursor-wait;
 }
 
 .neu-progress {
-  height: 8px;
-  background: #E6E7EE;
-  border-radius: 4px;
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
-  overflow: hidden;
+  @apply h-2 rounded-full overflow-hidden;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
 }
 
 .neu-progress-bar {
-  height: 100%;
-  background: #31344B;
-  border-radius: 4px;
+  @apply h-full rounded-full;
+  background: linear-gradient(145deg, #3b82f6, #2563eb);
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
 }
 
-.neu-progress-circular {
-  width: 48px;
-  height: 48px;
-  position: relative;
+.neu-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
 }
 
 .neu-progress-circle {
-  width: 100%;
-  height: 100%;
-  border: 4px solid #E6E7EE;
-  border-radius: 50%;
-  border-top-color: #31344B;
-  animation: spin 1s linear infinite;
+  @apply w-full h-full border-4;
+  border-color: #3b82f6;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.neu-tabs {
+  @apply flex space-x-2 p-1 rounded-lg;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
+}
+
+.neu-tab {
+  @apply px-4 py-2 rounded-md text-gray-600;
+  transition: all 0.2s ease;
 }
 
-.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-tab:hover {
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
 }
 
-.neu-alert.success {
-  background: #E6E7EE;
-  color: #31344B;
+.neu-tab.active {
+  @apply text-blue-500;
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
 }
 
-.neu-alert.error {
-  background: #E6E7EE;
-  color: #31344B;
+.neu-tab-content {
+  @apply p-4 rounded-lg;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
 }
 
-.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-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 flex justify-around items-center py-2 bg-gray-100;
+  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
 }
 
-.neu-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #31344B;
-  padding: 8px;
+.neu-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-gray-600;
+  transition: all 0.2s ease;
 }
 
-.neu-nav-item.active {
-  color: #31344B;
-  font-weight: 500;
+.neu-bottom-nav-item:hover {
+  @apply text-blue-500;
 }
 
-.neu-nav-item span {
-  font-size: 12px;
-  margin-top: 4px;
+.neu-bottom-nav-item.active {
+  @apply text-blue-500;
 }
 
-.neu-avatar {
-  background: #E6E7EE;
-  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+.neu-dialog-overlay {
+  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
+}
+
+.neu-dialog {
+  @apply rounded-lg p-4 bg-gray-100 w-full max-w-md;
+  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
+}
+
+.neu-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
 }
 
-.neu-card-elevated {
-  background: #E6E7EE;
-  box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF;
+.neu-dialog-content {
+  @apply p-4;
+}
+
+.neu-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
+}
+
+.neu-notification-panel {
+  @apply fixed top-0 right-0 w-80 bg-gray-100 rounded-lg;
+  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
+}
+
+.neu-notification-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
+}
+
+.neu-notification-list {
+  @apply max-h-96 overflow-y-auto;
+}
+
+.neu-notification-item {
+  @apply flex items-center space-x-4 p-4 border-b border-gray-200;
+}
+
+.neu-notification-icon {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-blue-500;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
+}
+
+.neu-profile-panel {
+  @apply fixed top-0 right-0 w-80 bg-gray-100 rounded-lg;
+  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
+}
+
+.neu-profile-header {
+  @apply flex items-center p-4 border-b border-gray-200;
+}
+
+.neu-profile-menu {
+  @apply space-y-2 p-4;
+}
+
+.neu-profile-menu-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-600;
+  box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
+  transition: all 0.2s ease;
 }
 
-.neu-card-inset {
-  background: #E6E7EE;
-  box-shadow: inset 8px 8px 15px #D1D9E6, inset -8px -8px 15px #FFFFFF;
+.neu-profile-menu-item:hover {
+  box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
 }
 </style> 

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

@@ -0,0 +1,470 @@
+<template>
+  <div class="nordic-container min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
+    <!-- 顶部应用栏 -->
+    <div class="nordic-app-bar">
+      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-5 h-5 text-slate-800 mr-4" />
+          <h1 class="text-xl font-medium text-slate-800">Nordic Design</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="nordic-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="nordic-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="nordic-icon-button">
+            <User class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="nordic-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-slate-800">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="nordic-nav-item active">
+                <Home class="w-5 h-5" />
+                <span>首页</span>
+              </a>
+              <a href="#" class="nordic-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="nordic-badge">12</span>
+              </a>
+              <a href="#" class="nordic-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="nordic-nav-item">
+                <Settings class="w-5 h-5" />
+                <span>设置</span>
+              </a>
+            </nav>
+          </div>
+        </div>
+
+        <!-- 中间内容 -->
+        <div class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="nordic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-slate-800">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="nordic-list-item">
+                  <div class="nordic-avatar bg-gradient-to-br from-blue-400 to-indigo-400">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-slate-800">卡片标题</h3>
+                    <p class="text-slate-600">卡片副标题</p>
+                  </div>
+                  <button class="nordic-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="nordic-list-item">
+                  <div class="nordic-avatar bg-gradient-to-br from-indigo-400 to-purple-400">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-slate-800">另一个标题</h3>
+                    <p class="text-slate-600">另一个副标题</p>
+                  </div>
+                  <button class="nordic-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 表单元素 -->
+          <div class="nordic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-slate-800">表单元素</h2>
+              <div class="space-y-4">
+                <div class="nordic-input-group">
+                  <label class="text-slate-600">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="nordic-input">
+                </div>
+                <div class="nordic-input-group">
+                  <label class="text-slate-600">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="nordic-input">
+                </div>
+                <div class="nordic-input-group">
+                  <label class="text-slate-600">下拉选择</label>
+                  <select class="nordic-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
+                </div>
+                <div class="flex items-center space-x-4">
+                  <label class="nordic-checkbox">
+                    <input type="checkbox">
+                    <span class="nordic-checkmark"></span>
+                    <span class="text-slate-600">复选框</span>
+                  </label>
+                  <label class="nordic-radio">
+                    <input type="radio" name="radio">
+                    <span class="nordic-radiomark"></span>
+                    <span class="text-slate-600">单选框</span>
+                  </label>
+                </div>
+                <div class="nordic-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-slate-600">开关</label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 按钮组 -->
+          <div class="nordic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-slate-800">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="nordic-button">主要按钮</button>
+                <button class="nordic-button outlined">次要按钮</button>
+                <button class="nordic-button text">文本按钮</button>
+                <button class="nordic-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 进度指示器 -->
+          <div class="nordic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-slate-800">进度指示器</h2>
+              <div class="space-y-4">
+                <div class="nordic-progress">
+                  <div class="nordic-progress-bar" style="width: 60%"></div>
+                </div>
+                <div class="nordic-progress circular">
+                  <div class="nordic-progress-circle"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 对话框 -->
+          <div class="nordic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-slate-800">对话框示例</h2>
+              <button class="nordic-button" @click="showDialog = true">打开对话框</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="nordic-bottom-nav">
+      <a href="#" class="nordic-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="nordic-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="nordic-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="nordic-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="nordic-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="nordic-dialog-overlay">
+      <div class="nordic-dialog">
+        <div class="nordic-dialog-header">
+          <h3 class="text-slate-800">对话框标题</h3>
+          <button class="nordic-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+        <div class="nordic-dialog-content">
+          <p class="text-slate-600">这是一个北欧风格的对话框示例。</p>
+        </div>
+        <div class="nordic-dialog-actions">
+          <button class="nordic-button text" @click="showDialog = false">取消</button>
+          <button class="nordic-button" @click="showDialog = false">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
+</script>
+
+<style scoped>
+.nordic-container {
+  font-family: 'Inter', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.nordic-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, 
+    rgba(59, 130, 246, 0.05) 0%,
+    rgba(99, 102, 241, 0.05) 50%,
+    rgba(147, 51, 234, 0.05) 100%
+  );
+  z-index: 0;
+}
+
+.nordic-app-bar {
+  @apply sticky top-0 z-10 bg-white/80 backdrop-blur-sm;
+  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-icon-button {
+  @apply p-2 rounded-full text-slate-800;
+  transition: all 0.3s ease;
+  background: rgba(59, 130, 246, 0.05);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-icon-button:hover {
+  @apply bg-blue-50 text-blue-600;
+  transform: scale(1.1);
+}
+
+.nordic-card {
+  @apply rounded-lg p-4 bg-white/80 backdrop-blur-sm;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+}
+
+.nordic-card:hover {
+  @apply bg-white;
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
+}
+
+.nordic-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-slate-800;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-nav-item:hover {
+  @apply bg-blue-50 text-blue-600;
+}
+
+.nordic-nav-item.active {
+  @apply bg-blue-50 text-blue-600;
+  background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
+}
+
+.nordic-badge {
+  @apply bg-blue-500 text-white text-xs px-2 py-1 rounded-full;
+}
+
+.nordic-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-list-item:hover {
+  @apply bg-blue-50;
+}
+
+.nordic-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+}
+
+.nordic-input-group {
+  @apply space-y-1;
+}
+
+.nordic-input {
+  @apply w-full px-3 py-2 rounded-lg text-slate-800;
+  background: rgba(59, 130, 246, 0.05);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  transition: all 0.3s ease;
+}
+
+.nordic-input:focus {
+  @apply outline-none;
+  background: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.nordic-input::placeholder {
+  @apply text-slate-400;
+}
+
+.nordic-checkbox,
+.nordic-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.nordic-checkmark,
+.nordic-radiomark {
+  @apply w-5 h-5 rounded;
+  background: rgba(59, 130, 246, 0.05);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  transition: all 0.3s ease;
+}
+
+.nordic-checkmark {
+  @apply rounded;
+}
+
+.nordic-radiomark {
+  @apply rounded-full;
+}
+
+.nordic-checkbox input:checked + .nordic-checkmark,
+.nordic-radio input:checked + .nordic-radiomark {
+  @apply bg-blue-500 border-blue-500;
+}
+
+.nordic-switch {
+  @apply flex items-center space-x-2;
+}
+
+.nordic-switch input {
+  @apply hidden;
+}
+
+.nordic-switch label {
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(59, 130, 246, 0.05);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-white rounded-full top-0.5 left-0.5;
+  transition: all 0.3s ease;
+}
+
+.nordic-switch input:checked + label {
+  @apply bg-blue-500;
+}
+
+.nordic-switch input:checked + label:after {
+  @apply translate-x-6;
+}
+
+.nordic-button {
+  @apply px-4 py-2 rounded-lg text-slate-800;
+  background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  transition: all 0.3s ease;
+}
+
+.nordic-button:hover {
+  @apply bg-blue-50 text-blue-600;
+  transform: translateY(-2px);
+}
+
+.nordic-button.outlined {
+  @apply bg-transparent border border-blue-300;
+}
+
+.nordic-button.text {
+  @apply bg-transparent border-none;
+}
+
+.nordic-button.icon {
+  @apply p-2 rounded-full;
+}
+
+.nordic-progress {
+  @apply h-1 rounded-full overflow-hidden;
+  background: rgba(59, 130, 246, 0.05);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-progress-bar {
+  @apply h-full rounded-full;
+  background: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(99, 102, 241, 0.5));
+}
+
+.nordic-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(59, 130, 246, 0.05);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-progress-circle {
+  @apply w-full h-full rounded-full border-4;
+  border-image: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(99, 102, 241, 0.5)) 1;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+}
+
+.nordic-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-sm flex justify-around items-center py-2;
+  border-top: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-slate-800;
+  transition: all 0.3s ease;
+}
+
+.nordic-bottom-nav-item:hover {
+  @apply text-blue-600;
+}
+
+.nordic-bottom-nav-item.active {
+  @apply text-blue-600;
+  background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
+}
+
+.nordic-dialog-overlay {
+  @apply fixed inset-0 bg-black/10 flex items-center justify-center;
+  backdrop-filter: blur(4px);
+}
+
+.nordic-dialog {
+  @apply rounded-lg p-4 bg-white/90 backdrop-blur-sm w-full max-w-md;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.nordic-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-slate-200;
+}
+
+.nordic-dialog-content {
+  @apply p-4;
+}
+
+.nordic-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-slate-200;
+}
+</style> 

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

@@ -1,237 +1,184 @@
 <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 class="organic-container min-h-screen bg-gradient-to-br from-green-50 to-emerald-50">
+    <!-- 顶部导航栏 -->
+    <div class="organic-header">
+      <div class="organic-header-content">
+        <div class="organic-logo">
+          <img :src="logoUrl" alt="Organic Design Logo" class="organic-logo-img">
+          <span class="organic-logo-text">ORGANIC</span>
         </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 class="organic-nav">
+          <a href="#" class="organic-nav-item active">首页</a>
+          <a href="#" class="organic-nav-item">组件</a>
+          <a href="#" class="organic-nav-item">文档</a>
+          <a href="#" class="organic-nav-item">主题</a>
+        </div>
+        <div class="organic-header-actions">
+          <button class="organic-btn text">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="organic-btn text">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="organic-btn text">
+            <User class="w-5 h-5" />
+          </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="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 class="organic-main">
+      <!-- 卡片列表 -->
+      <div class="organic-card-list">
+        <div v-for="card in cards" :key="card.id" class="organic-card">
+          <div class="organic-card-cover">
+            <img :src="card.cover" :alt="card.title" class="organic-card-cover-img">
           </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 class="organic-card-body">
+            <div class="organic-card-meta">
+              <div class="organic-card-meta-avatar">
+                <div class="organic-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
+              </div>
+              <div class="organic-card-meta-content">
+                <h3 class="organic-card-meta-title">{{ card.title }}</h3>
+                <p class="organic-card-meta-description">{{ card.description }}</p>
+              </div>
             </div>
-            <div class="flex flex-wrap gap-4">
-              <button class="organic-button-icon">
-                <Leaf class="w-5 h-5" />
+            <p class="organic-card-content">{{ card.content }}</p>
+            <div class="organic-card-actions">
+              <button class="organic-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
               </button>
-              <button class="organic-button-icon">
-                <Flower class="w-5 h-5" />
+              <button class="organic-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
               </button>
-              <button class="organic-button-icon">
-                <TreePine class="w-5 h-5" />
+              <button class="organic-btn text">
+                <Share2 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 class="organic-form">
+        <div class="organic-form-item">
+          <label class="organic-form-item-label">文本输入</label>
+          <div class="organic-form-item-control">
+            <input type="text" placeholder="请输入内容" class="organic-input">
           </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 class="organic-form-item">
+          <label class="organic-form-item-label">密码输入</label>
+          <div class="organic-form-item-control">
+            <input type="password" placeholder="请输入密码" class="organic-input">
           </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 class="organic-form-item">
+          <label class="organic-form-item-label">下拉选择</label>
+          <div class="organic-form-item-control">
+            <select class="organic-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="organic-form-item">
+          <label class="organic-form-item-label">开关</label>
+          <div class="organic-form-item-control">
+            <label class="organic-switch">
+              <input type="checkbox">
+              <span class="organic-switch-inner"></span>
+            </label>
           </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 class="organic-btn-group">
+        <button class="organic-btn primary">主要按钮</button>
+        <button class="organic-btn secondary">次要按钮</button>
+        <button class="organic-btn outline">轮廓按钮</button>
+        <button class="organic-btn text">文本按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="organic-tabs">
+        <div class="organic-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="organic-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
           </div>
         </div>
+        <div class="organic-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="organic-tabs-tabpane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="organic-tabs-tabpane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="organic-tabs-tabpane">
+            <p>标签页 3 的内容</p>
+          </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 v-if="showDialog" class="organic-modal-mask">
+        <div class="organic-modal-wrap">
+          <div class="organic-modal">
+            <div class="organic-modal-content">
+              <div class="organic-modal-header">
+                <div class="organic-modal-title">对话框标题</div>
+                <button class="organic-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="organic-modal-body">
+                <p>这是一个有机设计风格的对话框示例。</p>
+              </div>
+              <div class="organic-modal-footer">
+                <button class="organic-btn" @click="showDialog = false">取消</button>
+                <button class="organic-btn primary" @click="showDialog = false">确定</button>
+              </div>
             </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 v-if="showMessage" class="organic-message">
+        <div class="organic-message-notice">
+          <div class="organic-message-notice-content">
+            <Info class="w-5 h-5" />
+            <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>
+      <!-- 通知面板 -->
+      <div v-if="showNotifications" class="organic-notification">
+        <div class="organic-notification-notice">
+          <div class="organic-notification-notice-content">
+            <div class="organic-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="organic-notification-notice-message">通知标题</div>
+            <div class="organic-notification-notice-description">通知内容</div>
+          </div>
+          <button class="organic-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
       </div>
@@ -240,178 +187,346 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Search, 
-  Bell, 
-  User, 
-  ChevronRight,
-  Leaf,
-  Flower,
-  TreePine,
-  Skull,
-  Map
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiM0MEYyQTUiLz48L3N2Zz4='
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiM0MEYyQTUiLz48L3N2Zz4=',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-green-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiMyRDg4NUYiLz48L3N2Zz4=',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-green-600'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
 <style scoped>
+.organic-container {
+  font-family: 'Quicksand', sans-serif;
+  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
+}
+
+.organic-header {
+  @apply fixed top-0 left-0 right-0 h-16 bg-white/80 backdrop-blur-md z-10;
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
+  border-bottom: 1px solid rgba(16, 185, 129, 0.1);
+}
+
+.organic-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
+}
+
+.organic-logo {
+  @apply flex items-center;
+}
+
+.organic-logo-img {
+  @apply h-8 w-8;
+}
+
+.organic-logo-text {
+  @apply ml-2 text-xl font-medium text-emerald-600;
+}
+
+.organic-nav {
+  @apply flex items-center space-x-6;
+}
+
+.organic-nav-item {
+  @apply text-emerald-600 hover:text-emerald-500 transition-colors duration-300;
+}
+
+.organic-nav-item.active {
+  @apply text-emerald-500 font-medium;
+}
+
+.organic-header-actions {
+  @apply flex items-center space-x-2;
+}
+
+.organic-main {
+  @apply pt-20 pb-8 px-4;
+}
+
+.organic-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+}
+
 .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;
+  @apply bg-white rounded-2xl overflow-hidden;
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.1);
+  transition: all 0.3s ease;
 }
 
-.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-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15);
 }
 
-.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-card-cover {
+  @apply relative h-48 overflow-hidden;
 }
 
-.organic-button-text {
-  @apply px-4 py-2 text-green-600 font-bold
-         hover:text-green-700;
+.organic-card-cover-img {
+  @apply w-full h-full object-cover;
 }
 
-.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-card-body {
+  @apply p-4;
 }
 
-.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-card-meta {
+  @apply flex items-start mb-4;
 }
 
-.organic-label {
-  @apply block text-sm font-bold text-green-800 mb-2;
+.organic-card-meta-avatar {
+  @apply mr-4;
 }
 
-.organic-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.organic-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
 }
 
-.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-card-meta-content {
+  @apply flex-1;
 }
 
-.organic-radio {
-  @apply flex items-center space-x-2 cursor-pointer;
+.organic-card-meta-title {
+  @apply text-base font-medium text-emerald-600;
 }
 
-.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-card-meta-description {
+  @apply text-sm text-emerald-500;
+}
+
+.organic-card-content {
+  @apply text-emerald-700 mb-4;
+}
+
+.organic-card-actions {
+  @apply flex items-center border-t border-emerald-100 pt-4;
+}
+
+.organic-form {
+  @apply space-y-4 mt-6;
+}
+
+.organic-form-item {
+  @apply flex flex-col;
+}
+
+.organic-form-item-label {
+  @apply mb-2 text-emerald-600;
+}
+
+.organic-form-item-control {
+  @apply flex-1;
+}
+
+.organic-input,
+.organic-select {
+  @apply w-full px-4 py-2 bg-white rounded-xl border border-emerald-200 focus:border-emerald-400 focus:ring-1 focus:ring-emerald-400 text-emerald-700;
+  transition: all 0.3s ease;
+}
+
+.organic-input:focus,
+.organic-select:focus {
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
 }
 
 .organic-switch {
-  @apply relative inline-flex items-center cursor-pointer;
+  @apply relative inline-block w-12 h-6;
 }
 
 .organic-switch input {
-  @apply sr-only;
+  @apply hidden;
 }
 
-.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-switch-inner {
+  @apply absolute inset-0 rounded-full bg-emerald-100 transition-colors duration-300;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.organic-switch-inner:after {
+  content: '';
+  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5 shadow transition-transform duration-300;
+  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
+}
+
+.organic-switch input:checked + .organic-switch-inner {
+  @apply bg-emerald-400;
+}
+
+.organic-switch input:checked + .organic-switch-inner:after {
+  @apply translate-x-6;
+}
+
+.organic-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.organic-btn {
+  @apply px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300;
+}
+
+.organic-btn.primary {
+  @apply bg-emerald-500 text-white hover:bg-emerald-600;
+  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
+}
+
+.organic-btn.secondary {
+  @apply bg-teal-500 text-white hover:bg-teal-600;
+  box-shadow: 0 4px 10px rgba(20, 184, 166, 0.2);
+}
+
+.organic-btn.outline {
+  @apply bg-transparent text-emerald-600 border border-emerald-200 hover:border-emerald-400;
+}
+
+.organic-btn.text {
+  @apply bg-transparent text-emerald-600 hover:text-emerald-500;
 }
 
 .organic-tabs {
-  @apply flex space-x-2 p-1 bg-green-50 rounded-xl;
+  @apply mt-6;
+}
+
+.organic-tabs-nav {
+  @apply flex border-b border-emerald-100;
+}
+
+.organic-tabs-tab {
+  @apply px-4 py-3 text-emerald-600 cursor-pointer hover:text-emerald-500 transition-colors duration-300;
+}
+
+.organic-tabs-tab.active {
+  @apply text-emerald-500 font-medium border-b-2 border-emerald-400;
+}
+
+.organic-tabs-content {
+  @apply p-4;
+}
+
+.organic-tabs-tabpane {
+  @apply bg-white rounded-2xl p-4;
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.1);
+}
+
+.organic-modal-mask {
+  @apply fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50;
+}
+
+.organic-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
+}
+
+.organic-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
 }
 
-.organic-tab {
-  @apply px-6 py-2 text-green-600 font-bold rounded-lg;
+.organic-modal-content {
+  @apply bg-white rounded-2xl shadow-lg;
+  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15);
+  border: 1px solid rgba(16, 185, 129, 0.1);
 }
 
-.organic-tab.active {
-  @apply bg-green-600 text-white;
+.organic-modal-header {
+  @apply flex justify-between items-center p-4 border-b border-emerald-100;
 }
 
-.organic-progress {
-  @apply h-4 bg-green-100 rounded-full;
+.organic-modal-title {
+  @apply text-lg font-medium text-emerald-600;
 }
 
-.organic-progress-bar {
-  @apply h-full bg-green-600 rounded-full;
-  transition: width 0.3s ease;
+.organic-modal-close {
+  @apply text-emerald-600 hover:text-emerald-500;
 }
 
-.organic-health-bar {
-  @apply h-4 bg-red-100 rounded-full;
+.organic-modal-body {
+  @apply p-4;
 }
 
-.organic-health {
-  @apply h-full bg-red-500 rounded-full;
-  transition: width 0.3s ease;
+.organic-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t border-emerald-100;
 }
 
-.organic-alert {
-  @apply flex items-center justify-between p-4
-         bg-green-50 border border-green-200
-         text-green-800 rounded-xl;
+.organic-message {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.organic-alert.success {
-  @apply border-emerald-200 text-emerald-800
-         bg-emerald-50;
+.organic-message-notice {
+  @apply mb-4;
 }
 
-.organic-alert.error {
-  @apply border-red-200 text-red-800
-         bg-red-50;
+.organic-message-notice-content {
+  @apply flex items-center px-4 py-3 bg-white rounded-2xl shadow-lg;
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.1);
 }
 
-.organic-bottom-nav {
-  @apply fixed bottom-0 left-0 right-0
-         bg-white border-t border-green-200
-         flex justify-around p-2;
+.organic-notification {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.organic-bottom-nav-item {
-  @apply flex flex-col items-center p-2 text-green-600
-         hover:text-green-700;
+.organic-notification-notice {
+  @apply mb-4 bg-white rounded-2xl shadow-lg overflow-hidden;
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.1);
 }
 
-.organic-bottom-nav-item.active {
-  @apply text-green-700;
+.organic-notification-notice-content {
+  @apply p-4;
 }
 
-.organic-color-card {
-  @apply p-4 flex items-center justify-center font-bold;
+.organic-notification-notice-icon {
+  @apply float-left mr-4 text-emerald-600;
 }
 
-.organic-list-item {
-  @apply p-4 bg-green-50 rounded-xl
-         hover:bg-green-100 transition-colors duration-200;
+.organic-notification-notice-message {
+  @apply text-base font-medium text-emerald-600;
 }
 
-.organic-breadcrumb {
-  @apply text-green-600 hover:text-green-700;
+.organic-notification-notice-description {
+  @apply mt-1 text-sm text-emerald-500;
 }
 
-.organic-breadcrumb.active {
-  @apply text-green-700 font-bold;
+.organic-notification-notice-close {
+  @apply absolute top-4 right-4 text-emerald-600 hover:text-emerald-500;
 }
 </style> 

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

@@ -0,0 +1,3 @@
+<script setup>
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMkM0LjI2OCAyIDIgOC4yNjggMiAxNkMyIDIzLjczMiA4LjI2OCAzMCAxNiAzMEMyMy43MzIgMzAgMzAgMjMuNzMyIDMwIDE2QzMwIDguMjY4IDIzLjczMiAyIDE2IDJaIiBmaWxsPSJ1cmwoI3BhaW50MCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MCIgeDE9IjAiIHkxPSIwIiB4Mj0iMzIiIHkyPSIzMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiM0QkY1QjkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyMkQ5QjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='
+</script> 

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

@@ -1,237 +1,184 @@
 <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 class="pixel-container min-h-screen bg-indigo-900">
+    <!-- 顶部导航栏 -->
+    <div class="pixel-header">
+      <div class="pixel-header-content">
+        <div class="pixel-logo">
+          <img :src="logoUrl" alt="Pixel Art Logo" class="pixel-logo-img">
+          <span class="pixel-logo-text">PIXEL ART</span>
         </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 class="pixel-nav">
+          <a href="#" class="pixel-nav-item active">首页</a>
+          <a href="#" class="pixel-nav-item">组件</a>
+          <a href="#" class="pixel-nav-item">文档</a>
+          <a href="#" class="pixel-nav-item">主题</a>
+        </div>
+        <div class="pixel-header-actions">
+          <button class="pixel-btn text">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="pixel-btn text">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="pixel-btn text">
+            <User class="w-5 h-5" />
+          </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="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 class="pixel-main">
+      <!-- 卡片列表 -->
+      <div class="pixel-card-list">
+        <div v-for="card in cards" :key="card.id" class="pixel-card">
+          <div class="pixel-card-cover">
+            <img :src="card.cover" :alt="card.title" class="pixel-card-cover-img">
           </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 class="pixel-card-body">
+            <div class="pixel-card-meta">
+              <div class="pixel-card-meta-avatar">
+                <div class="pixel-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
+              </div>
+              <div class="pixel-card-meta-content">
+                <h3 class="pixel-card-meta-title">{{ card.title }}</h3>
+                <p class="pixel-card-meta-description">{{ card.description }}</p>
+              </div>
             </div>
-            <div class="flex flex-wrap gap-4">
-              <button class="pixel-button-icon">
-                <Sword class="w-5 h-5" />
+            <p class="pixel-card-content">{{ card.content }}</p>
+            <div class="pixel-card-actions">
+              <button class="pixel-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
               </button>
-              <button class="pixel-button-icon">
-                <Shield class="w-5 h-5" />
+              <button class="pixel-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
               </button>
-              <button class="pixel-button-icon">
-                <Heart class="w-5 h-5" />
+              <button class="pixel-btn text">
+                <Share2 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 class="pixel-form">
+        <div class="pixel-form-item">
+          <label class="pixel-form-item-label">文本输入</label>
+          <div class="pixel-form-item-control">
+            <input type="text" placeholder="请输入内容" class="pixel-input">
           </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 class="pixel-form-item">
+          <label class="pixel-form-item-label">密码输入</label>
+          <div class="pixel-form-item-control">
+            <input type="password" placeholder="请输入密码" class="pixel-input">
           </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 class="pixel-form-item">
+          <label class="pixel-form-item-label">下拉选择</label>
+          <div class="pixel-form-item-control">
+            <select class="pixel-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="pixel-form-item">
+          <label class="pixel-form-item-label">开关</label>
+          <div class="pixel-form-item-control">
+            <label class="pixel-switch">
+              <input type="checkbox">
+              <span class="pixel-switch-inner"></span>
+            </label>
           </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 class="pixel-btn-group">
+        <button class="pixel-btn primary">主要按钮</button>
+        <button class="pixel-btn secondary">次要按钮</button>
+        <button class="pixel-btn outline">轮廓按钮</button>
+        <button class="pixel-btn text">文本按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="pixel-tabs">
+        <div class="pixel-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="pixel-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
+          </div>
+        </div>
+        <div class="pixel-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="pixel-tabs-tabpane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="pixel-tabs-tabpane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="pixel-tabs-tabpane">
+            <p>标签页 3 的内容</p>
           </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 v-if="showDialog" class="pixel-modal-mask">
+        <div class="pixel-modal-wrap">
+          <div class="pixel-modal">
+            <div class="pixel-modal-content">
+              <div class="pixel-modal-header">
+                <div class="pixel-modal-title">对话框标题</div>
+                <button class="pixel-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="pixel-modal-body">
+                <p>这是一个像素艺术风格的对话框示例。</p>
+              </div>
+              <div class="pixel-modal-footer">
+                <button class="pixel-btn" @click="showDialog = false">取消</button>
+                <button class="pixel-btn primary" @click="showDialog = false">确定</button>
+              </div>
             </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 v-if="showMessage" class="pixel-message">
+        <div class="pixel-message-notice">
+          <div class="pixel-message-notice-content">
+            <Info class="w-5 h-5" />
+            <span>这是一条消息提示</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>
+      <!-- 通知面板 -->
+      <div v-if="showNotifications" class="pixel-notification">
+        <div class="pixel-notification-notice">
+          <div class="pixel-notification-notice-content">
+            <div class="pixel-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="pixel-notification-notice-message">通知标题</div>
+            <div class="pixel-notification-notice-description">通知内容</div>
+          </div>
+          <button class="pixel-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
       </div>
@@ -240,223 +187,361 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Search, 
-  Bell, 
-  User, 
-  ChevronRight,
-  Gamepad as GamepadIcon,
-  Sword,
-  Shield,
-  Heart,
-  Skull,
-  Map,
-  Backpack
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
 } from 'lucide-vue-next'
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4='
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB4PSI0MCIgeT0iNDAiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTYwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-black'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cmVjdCB4PSI0MCIgeT0iNDAiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTYwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-black'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </script>
 
 <style scoped>
-@font-face {
-  font-family: 'PixelFont';
-  src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+.pixel-container {
+  font-family: 'Press Start 2P', cursive;
+  background: linear-gradient(45deg, #1e1b4b, #312e81);
+  image-rendering: pixelated;
 }
 
-.pixel-font {
-  font-family: 'Press Start 2P', cursive;
+.pixel-header {
+  @apply fixed top-0 left-0 right-0 h-16 bg-indigo-800/90 backdrop-blur-sm z-10;
+  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
+  border-bottom: 4px solid #4f46e5;
+}
+
+.pixel-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
+}
+
+.pixel-logo {
+  @apply flex items-center;
+}
+
+.pixel-logo-img {
+  @apply h-8 w-8;
   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-logo-text {
+  @apply ml-2 text-xl font-medium text-indigo-200;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.pixel-nav {
+  @apply flex items-center space-x-6;
+}
+
+.pixel-nav-item {
+  @apply text-indigo-200 hover:text-indigo-100 transition-colors duration-300;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.pixel-nav-item.active {
+  @apply text-indigo-100 font-medium;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.pixel-header-actions {
+  @apply flex items-center space-x-2;
+}
+
+.pixel-main {
+  @apply pt-20 pb-8 px-4;
+}
+
+.pixel-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
 }
 
 .pixel-card {
-  @apply border-4 border-yellow-400;
-  image-rendering: pixelated;
-  box-shadow: 4px 4px 0 theme('colors.yellow.600');
+  @apply bg-indigo-800 overflow-hidden;
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
+  border: 4px solid #4f46e5;
+  transition: all 0.3s ease;
 }
 
-.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-card:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
 }
 
-.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-card-cover {
+  @apply relative h-48 overflow-hidden;
 }
 
-.pixel-button-text {
-  @apply px-4 py-2 text-yellow-400 font-bold hover:text-yellow-300;
+.pixel-card-cover-img {
+  @apply w-full h-full object-cover;
   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-card-body {
+  @apply p-4;
 }
 
-.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-card-meta {
+  @apply flex items-start mb-4;
 }
 
-.pixel-label {
-  @apply block text-sm font-bold text-yellow-400 mb-2;
-  image-rendering: pixelated;
+.pixel-card-meta-avatar {
+  @apply mr-4;
 }
 
-.pixel-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.pixel-avatar {
+  @apply w-10 h-10 flex items-center justify-center text-white font-medium;
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
+  border: 2px solid #4f46e5;
 }
 
-.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-card-meta-content {
+  @apply flex-1;
 }
 
-.pixel-radio {
-  @apply flex items-center space-x-2 cursor-pointer;
+.pixel-card-meta-title {
+  @apply text-base font-medium text-indigo-200;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
 }
 
-.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-card-meta-description {
+  @apply text-sm text-indigo-300;
+}
+
+.pixel-card-content {
+  @apply text-indigo-100 mb-4;
+}
+
+.pixel-card-actions {
+  @apply flex items-center border-t-2 border-indigo-700 pt-4;
+}
+
+.pixel-form {
+  @apply space-y-4 mt-6;
+}
+
+.pixel-form-item {
+  @apply flex flex-col;
+}
+
+.pixel-form-item-label {
+  @apply mb-2 text-indigo-200;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.pixel-form-item-control {
+  @apply flex-1;
+}
+
+.pixel-input,
+.pixel-select {
+  @apply w-full px-4 py-2 bg-indigo-800 border-2 border-indigo-700 focus:border-indigo-500 text-indigo-100;
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+.pixel-input:focus,
+.pixel-select:focus {
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
 }
 
 .pixel-switch {
-  @apply relative inline-flex items-center cursor-pointer;
+  @apply relative inline-block w-12 h-6;
 }
 
 .pixel-switch input {
-  @apply sr-only;
+  @apply hidden;
 }
 
-.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-switch-inner {
+  @apply absolute inset-0 bg-indigo-700 transition-colors duration-300;
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
+  border: 2px solid #4f46e5;
+}
+
+.pixel-switch-inner:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-indigo-200 top-0.5 left-0.5 shadow transition-transform duration-300;
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+.pixel-switch input:checked + .pixel-switch-inner {
+  @apply bg-indigo-500;
+}
+
+.pixel-switch input:checked + .pixel-switch-inner:after {
+  @apply translate-x-6;
+}
+
+.pixel-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.pixel-btn {
+  @apply px-4 py-2 text-sm font-medium transition-all duration-300;
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+.pixel-btn.primary {
+  @apply bg-indigo-500 text-white hover:bg-indigo-600;
+  border: 2px solid #4f46e5;
+}
+
+.pixel-btn.secondary {
+  @apply bg-purple-500 text-white hover:bg-purple-600;
+  border: 2px solid #7c3aed;
+}
+
+.pixel-btn.outline {
+  @apply bg-transparent text-indigo-200 border-2 border-indigo-700 hover:border-indigo-500;
+}
+
+.pixel-btn.text {
+  @apply bg-transparent text-indigo-200 hover:text-indigo-100;
 }
 
 .pixel-tabs {
-  @apply flex space-x-2 p-1 bg-gray-700 border-4 border-yellow-400;
+  @apply mt-6;
 }
 
-.pixel-tab {
-  @apply px-6 py-2 text-yellow-400 font-bold;
-  image-rendering: pixelated;
+.pixel-tabs-nav {
+  @apply flex border-b-2 border-indigo-700;
 }
 
-.pixel-tab.active {
-  @apply bg-yellow-400 text-gray-900;
+.pixel-tabs-tab {
+  @apply px-4 py-3 text-indigo-200 cursor-pointer hover:text-indigo-100 transition-colors duration-300;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
 }
 
-.pixel-progress {
-  @apply h-4 bg-gray-700 border-4 border-yellow-400;
+.pixel-tabs-tab.active {
+  @apply text-indigo-100 font-medium border-b-2 border-indigo-500;
 }
 
-.pixel-progress-bar {
-  @apply h-full bg-yellow-400;
-  transition: width 0.3s steps(10);
+.pixel-tabs-content {
+  @apply p-4;
 }
 
-.pixel-health-bar {
-  @apply h-4 bg-red-900 border-4 border-red-400;
+.pixel-tabs-tabpane {
+  @apply bg-indigo-800 p-4;
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
+  border: 2px solid #4f46e5;
 }
 
-.pixel-health {
-  @apply h-full bg-red-500;
-  transition: width 0.3s steps(10);
+.pixel-modal-mask {
+  @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50;
 }
 
-.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-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
 }
 
-.pixel-alert.success {
-  @apply border-green-400 text-green-400
-         bg-green-900;
+.pixel-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
 }
 
-.pixel-alert.error {
-  @apply border-red-400 text-red-400
-         bg-red-900;
+.pixel-modal-content {
+  @apply bg-indigo-800;
+  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
+  border: 4px solid #4f46e5;
 }
 
-.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-modal-header {
+  @apply flex justify-between items-center p-4 border-b-2 border-indigo-700;
 }
 
-.pixel-bottom-nav-item {
-  @apply flex flex-col items-center p-2 text-yellow-400
-         hover:text-yellow-300;
-  image-rendering: pixelated;
+.pixel-modal-title {
+  @apply text-lg font-medium text-indigo-200;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
 }
 
-.pixel-bottom-nav-item.active {
-  @apply text-yellow-300;
+.pixel-modal-close {
+  @apply text-indigo-200 hover:text-indigo-100;
 }
 
-.pixel-color-card {
-  @apply p-4 border-4 border-gray-700
-         flex items-center justify-center font-bold;
-  image-rendering: pixelated;
+.pixel-modal-body {
+  @apply p-4;
 }
 
-.pixel-list-item {
-  @apply p-4 bg-gray-700 border-4 border-yellow-400
-         hover:bg-gray-600;
-  image-rendering: pixelated;
+.pixel-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t-2 border-indigo-700;
 }
 
-.pixel-breadcrumb {
-  @apply text-yellow-400 hover:text-yellow-300;
-  image-rendering: pixelated;
+.pixel-message {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.pixel-breadcrumb.active {
-  @apply text-yellow-300;
+.pixel-message-notice {
+  @apply mb-4;
 }
 
-.pixel-icon {
-  image-rendering: pixelated;
-  transform: scale(1.5);
+.pixel-message-notice-content {
+  @apply flex items-center px-4 py-3 bg-indigo-800;
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
+  border: 2px solid #4f46e5;
+}
+
+.pixel-notification {
+  @apply fixed top-4 right-4 z-50;
+}
+
+.pixel-notification-notice {
+  @apply mb-4 bg-indigo-800 overflow-hidden;
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
+  border: 2px solid #4f46e5;
+}
+
+.pixel-notification-notice-content {
+  @apply p-4;
+}
+
+.pixel-notification-notice-icon {
+  @apply float-left mr-4 text-indigo-200;
+}
+
+.pixel-notification-notice-message {
+  @apply text-base font-medium text-indigo-200;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.pixel-notification-notice-description {
+  @apply mt-1 text-sm text-indigo-300;
+}
+
+.pixel-notification-notice-close {
+  @apply absolute top-4 right-4 text-indigo-200 hover:text-indigo-100;
 }
 </style> 

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

@@ -1,431 +1,469 @@
 <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="retro-container min-h-screen bg-gradient-to-br from-orange-100 via-yellow-100 to-amber-100">
+    <!-- 顶部应用栏 -->
+    <div class="retro-app-bar">
+      <div class="container mx-auto px-4 py-3 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>
+          <Menu class="w-5 h-5 text-amber-900 mr-4" />
+          <h1 class="text-xl font-medium text-amber-900">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 class="flex items-center space-x-4">
+          <button class="retro-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="retro-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="retro-icon-button">
+            <User class="w-5 h-5" />
+          </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="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">
+    <!-- 主要内容区 -->
+    <div class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="retro-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-amber-900">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="retro-nav-item active">
                 <Home class="w-5 h-5" />
-              </button>
-              <button class="retro-button-icon">
+                <span>首页</span>
+              </a>
+              <a href="#" class="retro-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="retro-badge">12</span>
+              </a>
+              <a href="#" class="retro-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="retro-nav-item">
                 <Settings class="w-5 h-5" />
-              </button>
-              <button class="retro-button-icon">
-                <User class="w-5 h-5" />
-              </button>
-            </div>
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="retro-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-900">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="retro-list-item">
+                  <div class="retro-avatar bg-gradient-to-br from-orange-400 to-yellow-400">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-amber-900">卡片标题</h3>
+                    <p class="text-amber-800">卡片副标题</p>
+                  </div>
+                  <button class="retro-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="retro-list-item">
+                  <div class="retro-avatar bg-gradient-to-br from-yellow-400 to-amber-400">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-amber-900">另一个标题</h3>
+                    <p class="text-amber-800">另一个副标题</p>
+                  </div>
+                  <button class="retro-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </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 class="retro-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-900">表单元素</h2>
+              <div class="space-y-4">
+                <div class="retro-input-group">
+                  <label class="text-amber-800">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="retro-input">
                 </div>
-                <div>
-                  <h4 class="text-base font-bold text-amber-800">列表项标题</h4>
-                  <p class="text-sm text-amber-600">列表项描述文本</p>
+                <div class="retro-input-group">
+                  <label class="text-amber-800">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="retro-input">
                 </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 class="retro-input-group">
+                  <label class="text-amber-800">下拉选择</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>
+                    <span class="text-amber-800">复选框</span>
+                  </label>
+                  <label class="retro-radio">
+                    <input type="radio" name="radio">
+                    <span class="retro-radiomark"></span>
+                    <span class="text-amber-800">单选框</span>
+                  </label>
                 </div>
-                <div>
-                  <h4 class="text-base font-bold text-amber-800">列表项标题</h4>
-                  <p class="text-sm text-amber-600">列表项描述文本</p>
+                <div class="retro-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-amber-800">开关</label>
                 </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 class="retro-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-900">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="retro-button">主要按钮</button>
+                <button class="retro-button outlined">次要按钮</button>
+                <button class="retro-button text">文本按钮</button>
+                <button class="retro-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
             </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 class="retro-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-900">进度指示器</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"></div>
+                </div>
+              </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 class="retro-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-900">对话框示例</h2>
+              <button class="retro-button" @click="showDialog = true">打开对话框</button>
             </div>
           </div>
         </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>
+    <!-- 底部导航栏 -->
+    <div class="retro-bottom-nav">
+      <a href="#" class="retro-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="retro-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="retro-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="retro-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="retro-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="retro-dialog-overlay">
+      <div class="retro-dialog">
+        <div class="retro-dialog-header">
+          <h3 class="text-amber-900">对话框标题</h3>
+          <button class="retro-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
+        <div class="retro-dialog-content">
+          <p class="text-amber-800">这是一个复古风格的对话框示例。</p>
+        </div>
+        <div class="retro-dialog-actions">
+          <button class="retro-button text" @click="showDialog = false">取消</button>
+          <button class="retro-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu, 
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
 </script>
 
 <style scoped>
+.retro-container {
+  font-family: 'Press Start 2P', cursive;
+  position: relative;
+  overflow: hidden;
+}
+
+.retro-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d97706' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
+  z-index: 0;
+}
+
 .retro-app-bar {
-  @apply bg-amber-100 p-4 mb-6 border-b-4 border-amber-800;
+  @apply sticky top-0 z-10 bg-orange-100/50 backdrop-blur-sm;
+  border-bottom: 2px solid rgba(180, 83, 9, 0.2);
+}
+
+.retro-icon-button {
+  @apply p-2 rounded-full text-amber-900;
+  transition: all 0.3s ease;
+  background: rgba(180, 83, 9, 0.1);
+  border: 2px solid rgba(180, 83, 9, 0.2);
+}
+
+.retro-icon-button:hover {
+  @apply bg-amber-200 text-amber-900;
+  transform: scale(1.1);
 }
 
 .retro-card {
-  @apply bg-amber-50 rounded-lg border-2 border-amber-800 shadow-lg;
+  @apply rounded-lg p-4 bg-orange-100/50 backdrop-blur-sm;
+  border: 2px solid rgba(180, 83, 9, 0.2);
+  transition: all 0.3s ease;
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
 }
 
-.retro-card-elevated {
-  @apply bg-amber-50 rounded-lg border-2 border-amber-800 shadow-xl;
+.retro-card:hover {
+  @apply bg-orange-100/70;
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
 }
 
-.retro-card-outlined {
-  @apply bg-amber-50 rounded-lg border-2 border-amber-800;
+.retro-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-amber-900;
+  transition: all 0.3s ease;
+  border: 2px solid rgba(180, 83, 9, 0.2);
 }
 
-.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-nav-item:hover {
+  @apply bg-amber-200 text-amber-900;
+}
+
+.retro-nav-item.active {
+  @apply bg-amber-200 text-amber-900;
+  background: linear-gradient(45deg, rgba(180, 83, 9, 0.1), rgba(146, 64, 14, 0.1));
 }
 
-.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-badge {
+  @apply bg-amber-500 text-white text-xs px-2 py-1 rounded-full;
 }
 
-.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-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
+  transition: all 0.3s ease;
+  border: 2px solid rgba(180, 83, 9, 0.2);
 }
 
-.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-list-item:hover {
+  @apply bg-amber-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-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
 }
 
-.retro-label {
-  @apply block text-sm font-bold text-amber-800 mb-1;
+.retro-input-group {
+  @apply space-y-1;
 }
 
-.retro-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.retro-input {
+  @apply w-full px-3 py-2 rounded-lg text-amber-900;
+  background: rgba(180, 83, 9, 0.1);
+  border: 2px solid rgba(180, 83, 9, 0.2);
+  transition: all 0.3s ease;
 }
 
-.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-input:focus {
+  @apply outline-none;
+  background: rgba(180, 83, 9, 0.2);
+  border-color: rgba(180, 83, 9, 0.4);
 }
 
+.retro-input::placeholder {
+  @apply text-amber-400;
+}
+
+.retro-checkbox,
 .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-checkmark,
+.retro-radiomark {
+  @apply w-5 h-5 rounded;
+  background: rgba(180, 83, 9, 0.1);
+  border: 2px solid rgba(180, 83, 9, 0.2);
+  transition: all 0.3s ease;
+}
+
+.retro-checkmark {
+  @apply rounded;
+}
+
+.retro-radiomark {
+  @apply rounded-full;
+}
+
+.retro-checkbox input:checked + .retro-checkmark,
+.retro-radio input:checked + .retro-radiomark {
+  @apply bg-amber-500 border-amber-500;
 }
 
 .retro-switch {
-  @apply flex items-center space-x-2 cursor-pointer;
+  @apply flex items-center space-x-2;
 }
 
 .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;
+  @apply hidden;
 }
 
-.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-switch label {
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(180, 83, 9, 0.1);
+  transition: all 0.3s ease;
+  border: 2px solid rgba(180, 83, 9, 0.2);
+}
+
+.retro-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-amber-100 rounded-full top-0.5 left-0.5;
+  transition: all 0.3s ease;
+}
+
+.retro-switch input:checked + label {
+  @apply bg-amber-500;
 }
 
-.retro-tabs {
-  @apply flex space-x-2 p-1 rounded-lg bg-amber-50 border-2 border-amber-800;
+.retro-switch input:checked + label:after {
+  @apply translate-x-6;
 }
 
-.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-button {
+  @apply px-4 py-2 rounded-lg text-amber-900;
+  background: linear-gradient(45deg, rgba(180, 83, 9, 0.1), rgba(146, 64, 14, 0.1));
+  border: 2px solid rgba(180, 83, 9, 0.2);
+  transition: all 0.3s ease;
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
 }
 
-.retro-tab.active {
-  @apply bg-amber-500 text-white;
+.retro-button:hover {
+  @apply bg-amber-200;
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
 }
 
-.retro-breadcrumbs {
-  @apply flex items-center text-sm;
+.retro-button.outlined {
+  @apply bg-transparent border border-amber-300;
 }
 
-.retro-breadcrumb {
-  @apply text-amber-800 hover:text-amber-600 font-bold
-         transition-all duration-200;
+.retro-button.text {
+  @apply bg-transparent border-none;
 }
 
-.retro-breadcrumb.active {
-  @apply text-amber-600;
+.retro-button.icon {
+  @apply p-2 rounded-full;
 }
 
 .retro-progress {
-  @apply w-full h-4 rounded-full bg-amber-50 border-2 border-amber-800
-         overflow-hidden;
+  @apply h-1 rounded-full overflow-hidden;
+  background: rgba(180, 83, 9, 0.1);
+  border: 2px solid rgba(180, 83, 9, 0.2);
 }
 
 .retro-progress-bar {
-  @apply h-full bg-amber-500 rounded-full
-         transition-all duration-300;
+  @apply h-full rounded-full;
+  background: linear-gradient(45deg, rgba(180, 83, 9, 0.5), rgba(146, 64, 14, 0.5));
 }
 
-.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.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(180, 83, 9, 0.1);
+  border: 2px solid rgba(180, 83, 9, 0.2);
 }
 
 .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));
+  @apply w-full h-full rounded-full border-4;
+  border-image: linear-gradient(45deg, rgba(180, 83, 9, 0.5), rgba(146, 64, 14, 0.5)) 1;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
-.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-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-orange-100/50 backdrop-blur-sm flex justify-around items-center py-2;
+  border-top: 2px solid rgba(180, 83, 9, 0.2);
 }
 
-.retro-alert.success {
-  @apply border-green-800 text-green-800;
+.retro-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-amber-900;
+  transition: all 0.3s ease;
 }
 
-.retro-alert.error {
-  @apply border-red-800 text-red-800;
+.retro-bottom-nav-item:hover {
+  @apply text-amber-900;
 }
 
-.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.active {
+  @apply text-amber-900;
+  background: linear-gradient(45deg, rgba(180, 83, 9, 0.1), rgba(146, 64, 14, 0.1));
 }
 
-.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-dialog-overlay {
+  @apply fixed inset-0 bg-black/30 flex items-center justify-center;
+  backdrop-filter: blur(4px);
 }
 
-.retro-bottom-nav-item.active {
-  @apply text-amber-600;
+.retro-dialog {
+  @apply rounded-lg p-4 bg-orange-100/80 backdrop-blur-sm w-full max-w-md;
+  border: 2px solid rgba(180, 83, 9, 0.2);
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.retro-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-amber-800;
+}
+
+.retro-dialog-content {
+  @apply p-4;
 }
 
-.retro-color-card {
-  @apply p-4 rounded-lg border-2 border-amber-800
-         flex items-center justify-center font-bold
-         shadow-lg;
+.retro-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-amber-800;
 }
 </style> 

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

@@ -1,335 +1,472 @@
 <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="skeuomorphic-container min-h-screen bg-gradient-to-b from-gray-100 to-gray-200">
+    <!-- 顶部应用栏 -->
+    <div class="skeuomorphic-app-bar">
+      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-5 h-5 text-gray-700 mr-4" />
+          <h1 class="text-xl font-medium text-gray-700">Skeuomorphic Design</h1>
+        </div>
         <div class="flex items-center space-x-4">
-          <button class="skeuomorphic-button">
-            <Search class="w-6 h-6" />
+          <button class="skeuomorphic-icon-button">
+            <Search class="w-5 h-5" />
           </button>
-          <button class="skeuomorphic-button">
-            <Bell class="w-6 h-6" />
+          <button class="skeuomorphic-icon-button">
+            <Bell class="w-5 h-5" />
           </button>
-          <button class="skeuomorphic-button">
-            <User class="w-6 h-6" />
+          <button class="skeuomorphic-icon-button">
+            <User class="w-5 h-5" />
           </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 class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="skeuomorphic-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-gray-700">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="skeuomorphic-nav-item active">
+                <Home class="w-5 h-5" />
+                <span>首页</span>
+              </a>
+              <a href="#" class="skeuomorphic-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="skeuomorphic-badge">12</span>
+              </a>
+              <a href="#" class="skeuomorphic-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="skeuomorphic-nav-item">
+                <Settings class="w-5 h-5" />
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="skeuomorphic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-700">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="skeuomorphic-list-item">
+                  <div class="skeuomorphic-avatar bg-blue-500">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-gray-700">卡片标题</h3>
+                    <p class="text-gray-600">卡片副标题</p>
+                  </div>
+                  <button class="skeuomorphic-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="skeuomorphic-list-item">
+                  <div class="skeuomorphic-avatar bg-indigo-500">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-gray-700">另一个标题</h3>
+                    <p class="text-gray-600">另一个副标题</p>
+                  </div>
+                  <button class="skeuomorphic-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            </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-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 class="skeuomorphic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-700">表单元素</h2>
+              <div class="space-y-4">
+                <div class="skeuomorphic-input-group">
+                  <label class="text-gray-700">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="skeuomorphic-input">
+                </div>
+                <div class="skeuomorphic-input-group">
+                  <label class="text-gray-700">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="skeuomorphic-input">
+                </div>
+                <div class="skeuomorphic-input-group">
+                  <label class="text-gray-700">下拉选择</label>
+                  <select class="skeuomorphic-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
+                </div>
+                <div class="flex items-center space-x-4">
+                  <label class="skeuomorphic-checkbox">
+                    <input type="checkbox">
+                    <span class="skeuomorphic-checkmark"></span>
+                    <span class="text-gray-700">复选框</span>
+                  </label>
+                  <label class="skeuomorphic-radio">
+                    <input type="radio" name="radio">
+                    <span class="skeuomorphic-radiomark"></span>
+                    <span class="text-gray-700">单选框</span>
+                  </label>
+                </div>
+                <div class="skeuomorphic-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-gray-700">开关</label>
+                </div>
+              </div>
             </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 class="skeuomorphic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-700">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="skeuomorphic-button">主要按钮</button>
+                <button class="skeuomorphic-button outlined">次要按钮</button>
+                <button class="skeuomorphic-button text">文本按钮</button>
+                <button class="skeuomorphic-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
+            </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-progress">
-            <div class="progress-bar" style="width: 60%"></div>
-          </div>
-          <div class="skeuomorphic-progress-circle">
-            <div class="progress-circle" style="--progress: 60%"></div>
+          <!-- 进度指示器 -->
+          <div class="skeuomorphic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-700">进度指示器</h2>
+              <div class="space-y-4">
+                <div class="skeuomorphic-progress">
+                  <div class="skeuomorphic-progress-bar" style="width: 60%"></div>
+                </div>
+                <div class="skeuomorphic-progress circular">
+                  <div class="skeuomorphic-progress-circle"></div>
+                </div>
+              </div>
+            </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 class="skeuomorphic-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-gray-700">对话框示例</h2>
+              <button class="skeuomorphic-button" @click="showDialog = true">打开对话框</button>
+            </div>
           </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 class="skeuomorphic-bottom-nav">
+      <a href="#" class="skeuomorphic-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="skeuomorphic-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="skeuomorphic-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="skeuomorphic-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="skeuomorphic-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="skeuomorphic-dialog-overlay">
+      <div class="skeuomorphic-dialog">
+        <div class="skeuomorphic-dialog-header">
+          <h3 class="text-gray-700">对话框标题</h3>
+          <button class="skeuomorphic-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+        <div class="skeuomorphic-dialog-content">
+          <p class="text-gray-600">这是一个拟物化设计风格的对话框示例。</p>
+        </div>
+        <div class="skeuomorphic-dialog-actions">
+          <button class="skeuomorphic-button text" @click="showDialog = false">取消</button>
+          <button class="skeuomorphic-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu, 
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
 </script>
 
 <style scoped>
-.skeuomorphic-nav-bar {
-  @apply bg-amber-100 p-4 rounded-lg shadow-inner border border-amber-200;
+.skeuomorphic-container {
+  font-family: 'Helvetica Neue', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.skeuomorphic-app-bar {
+  @apply sticky top-0 z-10;
+  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+  border-bottom: 1px solid #dee2e6;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.skeuomorphic-icon-button {
+  @apply p-2 rounded-md text-gray-700;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  border: 1px solid #dee2e6;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.skeuomorphic-icon-button:hover {
+  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .skeuomorphic-card {
-  @apply bg-amber-50 p-6 rounded-lg shadow-md border border-amber-200;
+  @apply rounded-lg p-4;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  border: 1px solid #dee2e6;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.skeuomorphic-card-inset {
-  @apply bg-amber-100 p-4 rounded-lg shadow-inner border border-amber-200;
+.skeuomorphic-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-md text-gray-700;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  border: 1px solid #dee2e6;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
 }
 
-.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-nav-item:hover {
+  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.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-nav-item.active {
+  background: linear-gradient(to bottom, #3b82f6, #2563eb);
+  border-color: #1d4ed8;
+  color: white;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
-.skeuomorphic-button-text {
-  @apply bg-transparent text-amber-600 px-4 py-2 rounded-lg
-         hover:bg-amber-100 active:bg-amber-200;
+.skeuomorphic-badge {
+  @apply bg-red-500 text-white text-xs px-2 py-1 rounded-md;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
-.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-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-md;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  border: 1px solid #dee2e6;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
 }
 
-.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-list-item:hover {
+  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.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-avatar {
+  @apply w-10 h-10 rounded-md flex items-center justify-center text-white font-medium;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
-.skeuomorphic-checkbox {
-  @apply flex items-center space-x-2 cursor-pointer;
+.skeuomorphic-input-group {
+  @apply space-y-1;
+}
+
+.skeuomorphic-input {
+  @apply w-full px-3 py-2 rounded-md text-gray-700;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  border: 1px solid #dee2e6;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
 }
 
-.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-input:focus {
+  @apply outline-none;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  border-color: #3b82f6;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(59, 130, 246, 0.2);
 }
 
+.skeuomorphic-checkbox,
 .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-checkmark,
+.skeuomorphic-radiomark {
+  @apply w-5 h-5;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  border: 1px solid #dee2e6;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.skeuomorphic-checkmark {
+  @apply rounded-md;
+}
+
+.skeuomorphic-radiomark {
+  @apply rounded-full;
+}
+
+.skeuomorphic-checkbox input:checked + .skeuomorphic-checkmark,
+.skeuomorphic-radio input:checked + .skeuomorphic-radiomark {
+  background: linear-gradient(to bottom, #3b82f6, #2563eb);
+  border-color: #1d4ed8;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .skeuomorphic-switch {
-  @apply flex items-center space-x-2 cursor-pointer;
+  @apply flex items-center space-x-2;
 }
 
 .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;
+  @apply hidden;
 }
 
-.skeuomorphic-list-item {
-  @apply flex items-center space-x-4 p-4 rounded-lg bg-amber-100
-         border border-amber-200 shadow-inner;
+.skeuomorphic-switch label {
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.skeuomorphic-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 rounded-full top-0.5 left-0.5;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.skeuomorphic-switch input:checked + label {
+  background: linear-gradient(to bottom, #3b82f6, #2563eb);
+}
+
+.skeuomorphic-switch input:checked + label:after {
+  @apply translate-x-6;
 }
 
-.skeuomorphic-tabs {
-  @apply flex space-x-2 p-1 rounded-lg bg-amber-100 border border-amber-200;
+.skeuomorphic-button {
+  @apply px-4 py-2 rounded-md text-white;
+  background: linear-gradient(to bottom, #3b82f6, #2563eb);
+  border: 1px solid #1d4ed8;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.skeuomorphic-button:hover {
+  background: linear-gradient(to bottom, #2563eb, #1d4ed8);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
-.skeuomorphic-tabs button {
-  @apply px-4 py-2 rounded-md text-amber-600
-         hover:bg-amber-200 active:bg-amber-300;
+.skeuomorphic-button.outlined {
+  @apply bg-transparent border border-blue-500 text-blue-500;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.skeuomorphic-tabs button.active {
-  @apply bg-amber-500 text-white;
+.skeuomorphic-button.text {
+  @apply bg-transparent border-none text-blue-500;
+  box-shadow: none;
 }
 
-.skeuomorphic-breadcrumb {
-  @apply flex items-center space-x-2 text-amber-600;
+.skeuomorphic-button.icon {
+  @apply p-2;
 }
 
 .skeuomorphic-progress {
-  @apply w-full h-4 rounded-full bg-amber-100 border border-amber-200
-         shadow-inner overflow-hidden;
+  @apply h-2 rounded-full overflow-hidden;
+  background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.skeuomorphic-progress-bar {
+  @apply h-full rounded-full;
+  background: linear-gradient(to bottom, #3b82f6, #2563eb);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
-.skeuomorphic-progress .progress-bar {
-  @apply h-full bg-amber-500 rounded-full;
+.skeuomorphic-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .skeuomorphic-progress-circle {
-  @apply w-16 h-16 rounded-full bg-amber-100 border border-amber-200
-         shadow-inner flex items-center justify-center;
+  @apply w-full h-full border-4;
+  border-color: #3b82f6;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+}
+
+.skeuomorphic-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 flex justify-around items-center py-2;
+  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+  border-top: 1px solid #dee2e6;
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.skeuomorphic-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-gray-700;
+  transition: all 0.2s ease;
+}
+
+.skeuomorphic-bottom-nav-item:hover {
+  @apply text-blue-500;
+}
+
+.skeuomorphic-bottom-nav-item.active {
+  @apply text-blue-500;
+}
+
+.skeuomorphic-dialog-overlay {
+  @apply fixed inset-0 bg-black/50 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-dialog {
+  @apply rounded-lg p-4 bg-white w-full max-w-md;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+  border: 1px solid #dee2e6;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.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-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-gray-200;
 }
 
-.skeuomorphic-alert.error {
-  @apply bg-red-100 border-red-200 text-red-600;
+.skeuomorphic-dialog-content {
+  @apply p-4;
 }
 
-.skeuomorphic-color-card {
-  @apply p-4 rounded-lg shadow-md border border-amber-200
-         flex items-center justify-center font-medium;
+.skeuomorphic-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
 }
 </style> 

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

@@ -1,167 +1,466 @@
 <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 class="steampunk-container min-h-screen bg-gradient-to-br from-amber-900 via-yellow-900 to-brown-900">
+    <!-- 顶部应用栏 -->
+    <div class="steampunk-app-bar">
+      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-5 h-5 text-amber-200 mr-4" />
+          <h1 class="text-xl font-medium text-amber-100">Steampunk Design</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <button class="steampunk-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="steampunk-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="steampunk-icon-button">
+            <User class="w-5 h-5" />
+          </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 class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="steampunk-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-amber-100">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="steampunk-nav-item active">
+                <Home class="w-5 h-5" />
+                <span>首页</span>
+              </a>
+              <a href="#" class="steampunk-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="steampunk-badge">12</span>
+              </a>
+              <a href="#" class="steampunk-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="steampunk-nav-item">
+                <Settings class="w-5 h-5" />
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="steampunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-100">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="steampunk-list-item">
+                  <div class="steampunk-avatar bg-gradient-to-br from-amber-600 to-yellow-600">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-amber-100">卡片标题</h3>
+                    <p class="text-amber-200">卡片副标题</p>
+                  </div>
+                  <button class="steampunk-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="steampunk-list-item">
+                  <div class="steampunk-avatar bg-gradient-to-br from-yellow-600 to-brown-600">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-amber-100">另一个标题</h3>
+                    <p class="text-amber-200">另一个副标题</p>
+                  </div>
+                  <button class="steampunk-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </div>
-            
-            <!-- 输入框 -->
-            <div class="space-y-2">
-              <input type="text" class="steampunk-input" placeholder="输入文本">
-              <textarea class="steampunk-input" placeholder="多行文本"></textarea>
+          </div>
+
+          <!-- 表单元素 -->
+          <div class="steampunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-100">表单元素</h2>
+              <div class="space-y-4">
+                <div class="steampunk-input-group">
+                  <label class="text-amber-200">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="steampunk-input">
+                </div>
+                <div class="steampunk-input-group">
+                  <label class="text-amber-200">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="steampunk-input">
+                </div>
+                <div class="steampunk-input-group">
+                  <label class="text-amber-200">下拉选择</label>
+                  <select class="steampunk-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
+                </div>
+                <div class="flex items-center space-x-4">
+                  <label class="steampunk-checkbox">
+                    <input type="checkbox">
+                    <span class="steampunk-checkmark"></span>
+                    <span class="text-amber-200">复选框</span>
+                  </label>
+                  <label class="steampunk-radio">
+                    <input type="radio" name="radio">
+                    <span class="steampunk-radiomark"></span>
+                    <span class="text-amber-200">单选框</span>
+                  </label>
+                </div>
+                <div class="steampunk-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-amber-200">开关</label>
+                </div>
+              </div>
             </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 class="steampunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-100">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="steampunk-button">主要按钮</button>
+                <button class="steampunk-button outlined">次要按钮</button>
+                <button class="steampunk-button text">文本按钮</button>
+                <button class="steampunk-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 进度指示器 -->
+          <div class="steampunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-100">进度指示器</h2>
+              <div class="space-y-4">
+                <div class="steampunk-progress">
+                  <div class="steampunk-progress-bar" style="width: 60%"></div>
+                </div>
+                <div class="steampunk-progress circular">
+                  <div class="steampunk-progress-circle"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 对话框 -->
+          <div class="steampunk-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-amber-100">对话框示例</h2>
+              <button class="steampunk-button" @click="showDialog = true">打开对话框</button>
+            </div>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- 底部导航栏 -->
+    <div class="steampunk-bottom-nav">
+      <a href="#" class="steampunk-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="steampunk-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="steampunk-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="steampunk-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="steampunk-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="steampunk-dialog-overlay">
+      <div class="steampunk-dialog">
+        <div class="steampunk-dialog-header">
+          <h3 class="text-amber-100">对话框标题</h3>
+          <button class="steampunk-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+        <div class="steampunk-dialog-content">
+          <p class="text-amber-200">这是一个蒸汽朋克风格的对话框示例。</p>
+        </div>
+        <div class="steampunk-dialog-actions">
+          <button class="steampunk-button text" @click="showDialog = false">取消</button>
+          <button class="steampunk-button" @click="showDialog = false">确定</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { Settings, Zap, Stars, ChevronDown, X } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
 </script>
 
 <style scoped>
 .steampunk-container {
-  background-image: url('@/assets/steampunk-bg.jpg');
-  background-size: cover;
-  background-attachment: fixed;
+  font-family: 'Cinzel', serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.steampunk-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d97706' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
+  z-index: 0;
+}
+
+.steampunk-app-bar {
+  @apply sticky top-0 z-10 bg-amber-900/50 backdrop-blur-sm;
+  border-bottom: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-icon-button {
+  @apply p-2 rounded-full text-amber-200;
+  transition: all 0.3s ease;
+  background: rgba(180, 83, 9, 0.1);
+  border: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-icon-button:hover {
+  @apply bg-amber-800 text-amber-100;
+  transform: scale(1.1);
 }
 
 .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;
+  @apply rounded-lg p-4 bg-amber-900/50 backdrop-blur-sm;
+  border: 1px solid rgba(180, 83, 9, 0.2);
   transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-.steampunk-btn:hover {
-  background: #78350f;
+.steampunk-card:hover {
+  @apply bg-amber-900/70;
   transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.steampunk-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-amber-200;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-nav-item:hover {
+  @apply bg-amber-800 text-amber-100;
+}
+
+.steampunk-nav-item.active {
+  @apply bg-amber-800 text-amber-100;
+  background: linear-gradient(45deg, rgba(180, 83, 9, 0.3), rgba(146, 64, 14, 0.3));
 }
 
-.steampunk-btn-secondary {
-  background: #fef3c7;
-  color: #92400e;
-  padding: 0.5rem 1rem;
-  border: 2px solid #92400e;
-  border-radius: 4px;
-  font-weight: bold;
+.steampunk-badge {
+  @apply bg-amber-500 text-white text-xs px-2 py-1 rounded-full;
+}
+
+.steampunk-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
   transition: all 0.3s ease;
+  border: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-list-item:hover {
+  @apply bg-amber-800;
+}
+
+.steampunk-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+}
+
+.steampunk-input-group {
+  @apply space-y-1;
 }
 
 .steampunk-input {
-  width: 100%;
-  padding: 0.5rem;
-  background: #fef3c7;
-  border: 2px solid #92400e;
-  border-radius: 4px;
-  color: #92400e;
+  @apply w-full px-3 py-2 rounded-lg text-amber-100;
+  background: rgba(180, 83, 9, 0.1);
+  border: 1px solid rgba(180, 83, 9, 0.2);
+  transition: all 0.3s ease;
 }
 
 .steampunk-input:focus {
-  outline: none;
-  border-color: #78350f;
-  box-shadow: 0 0 0 2px rgba(146, 64, 14, 0.2);
+  @apply outline-none;
+  background: rgba(180, 83, 9, 0.2);
+  border-color: rgba(180, 83, 9, 0.4);
 }
 
-.gear-decoration {
-  width: 100px;
-  height: 100px;
-  background: #92400e;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 10s linear infinite;
+.steampunk-input::placeholder {
+  @apply text-amber-400;
 }
 
-.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;
+.steampunk-checkbox,
+.steampunk-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+}
+
+.steampunk-checkmark,
+.steampunk-radiomark {
+  @apply w-5 h-5 rounded;
+  background: rgba(180, 83, 9, 0.1);
+  border: 1px solid rgba(180, 83, 9, 0.2);
+  transition: all 0.3s ease;
+}
+
+.steampunk-checkmark {
+  @apply rounded;
 }
 
-.pipe-decoration::before {
+.steampunk-radiomark {
+  @apply rounded-full;
+}
+
+.steampunk-checkbox input:checked + .steampunk-checkmark,
+.steampunk-radio input:checked + .steampunk-radiomark {
+  @apply bg-amber-500 border-amber-500;
+}
+
+.steampunk-switch {
+  @apply flex items-center space-x-2;
+}
+
+.steampunk-switch input {
+  @apply hidden;
+}
+
+.steampunk-switch label {
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(180, 83, 9, 0.1);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-switch label:after {
   content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: #78350f;
-  border-radius: 50%;
-  top: 50%;
-  left: 10px;
-  transform: translateY(-50%);
+  @apply absolute w-5 h-5 bg-amber-100 rounded-full top-0.5 left-0.5;
+  transition: all 0.3s ease;
+}
+
+.steampunk-switch input:checked + label {
+  @apply bg-amber-500;
+}
+
+.steampunk-switch input:checked + label:after {
+  @apply translate-x-6;
+}
+
+.steampunk-button {
+  @apply px-4 py-2 rounded-lg text-amber-100;
+  background: linear-gradient(45deg, rgba(180, 83, 9, 0.3), rgba(146, 64, 14, 0.3));
+  border: 1px solid rgba(180, 83, 9, 0.2);
+  transition: all 0.3s ease;
+}
+
+.steampunk-button:hover {
+  @apply bg-amber-800;
+  transform: translateY(-2px);
+}
+
+.steampunk-button.outlined {
+  @apply bg-transparent border border-amber-300;
+}
+
+.steampunk-button.text {
+  @apply bg-transparent border-none;
+}
+
+.steampunk-button.icon {
+  @apply p-2 rounded-full;
+}
+
+.steampunk-progress {
+  @apply h-1 rounded-full overflow-hidden;
+  background: rgba(180, 83, 9, 0.1);
+  border: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-progress-bar {
+  @apply h-full rounded-full;
+  background: linear-gradient(45deg, rgba(180, 83, 9, 0.5), rgba(146, 64, 14, 0.5));
+}
+
+.steampunk-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(180, 83, 9, 0.1);
+  border: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-progress-circle {
+  @apply w-full h-full rounded-full border-4;
+  border-image: linear-gradient(45deg, rgba(180, 83, 9, 0.5), rgba(146, 64, 14, 0.5)) 1;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+}
+
+.steampunk-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-amber-900/50 backdrop-blur-sm flex justify-around items-center py-2;
+  border-top: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-amber-200;
+  transition: all 0.3s ease;
+}
+
+.steampunk-bottom-nav-item:hover {
+  @apply text-amber-100;
+}
+
+.steampunk-bottom-nav-item.active {
+  @apply text-amber-100;
+  background: linear-gradient(45deg, rgba(180, 83, 9, 0.3), rgba(146, 64, 14, 0.3));
+}
+
+.steampunk-dialog-overlay {
+  @apply fixed inset-0 bg-black/30 flex items-center justify-center;
+  backdrop-filter: blur(4px);
+}
+
+.steampunk-dialog {
+  @apply rounded-lg p-4 bg-amber-900/80 backdrop-blur-sm w-full max-w-md;
+  border: 1px solid rgba(180, 83, 9, 0.2);
+}
+
+.steampunk-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-amber-800;
+}
+
+.steampunk-dialog-content {
+  @apply p-4;
+}
+
+.steampunk-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-amber-800;
 }
 </style> 

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

@@ -1,238 +1,184 @@
 <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 class="three-d-container min-h-screen bg-gradient-to-br from-blue-900 to-purple-900">
+    <!-- 顶部导航栏 -->
+    <div class="three-d-header">
+      <div class="three-d-header-content">
+        <div class="three-d-logo">
+          <img :src="logoUrl" alt="3D Design Logo" class="three-d-logo-img">
+          <span class="three-d-logo-text">3D DESIGN</span>
         </div>
-        <div class="flex items-center space-x-4">
-          <button class="three-d-button-icon">
-            <Search class="w-5 h-5 text-indigo-900" />
+        <div class="three-d-nav">
+          <a href="#" class="three-d-nav-item active">首页</a>
+          <a href="#" class="three-d-nav-item">组件</a>
+          <a href="#" class="three-d-nav-item">文档</a>
+          <a href="#" class="three-d-nav-item">主题</a>
+        </div>
+        <div class="three-d-header-actions">
+          <button class="three-d-btn text">
+            <Search class="w-5 h-5" />
           </button>
-          <button class="three-d-button-icon">
-            <Bell class="w-5 h-5 text-indigo-900" />
+          <button class="three-d-btn text">
+            <Bell class="w-5 h-5" />
           </button>
-          <button class="three-d-button-icon">
-            <User class="w-5 h-5 text-indigo-900" />
+          <button class="three-d-btn text">
+            <User class="w-5 h-5" />
           </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 class="three-d-main">
+      <!-- 卡片列表 -->
+      <div class="three-d-card-list">
+        <div v-for="card in cards" :key="card.id" class="three-d-card">
+          <div class="three-d-card-cover">
+            <img :src="card.cover" :alt="card.title" class="three-d-card-cover-img">
           </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 class="three-d-card-body">
+            <div class="three-d-card-meta">
+              <div class="three-d-card-meta-avatar">
+                <div class="three-d-avatar" :class="card.avatarClass">
+                  {{ card.initials }}
+                </div>
+              </div>
+              <div class="three-d-card-meta-content">
+                <h3 class="three-d-card-meta-title">{{ card.title }}</h3>
+                <p class="three-d-card-meta-description">{{ card.description }}</p>
+              </div>
             </div>
-            <div class="flex flex-wrap gap-4">
-              <button class="three-d-button-icon">
-                <Home class="w-5 h-5" />
+            <p class="three-d-card-content">{{ card.content }}</p>
+            <div class="three-d-card-actions">
+              <button class="three-d-btn text">
+                <Heart class="w-5 h-5" />
+                <span>{{ card.likes }}</span>
               </button>
-              <button class="three-d-button-icon">
-                <Settings class="w-5 h-5" />
+              <button class="three-d-btn text">
+                <MessageSquare class="w-5 h-5" />
+                <span>{{ card.comments }}</span>
               </button>
-              <button class="three-d-button-icon">
-                <User class="w-5 h-5" />
+              <button class="three-d-btn text">
+                <Share2 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 class="three-d-form">
+        <div class="three-d-form-item">
+          <label class="three-d-form-item-label">文本输入</label>
+          <div class="three-d-form-item-control">
+            <input type="text" placeholder="请输入内容" class="three-d-input">
           </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 class="three-d-form-item">
+          <label class="three-d-form-item-label">密码输入</label>
+          <div class="three-d-form-item-control">
+            <input type="password" placeholder="请输入密码" class="three-d-input">
           </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 class="three-d-form-item">
+          <label class="three-d-form-item-label">下拉选择</label>
+          <div class="three-d-form-item-control">
+            <select class="three-d-select">
+              <option>选项 1</option>
+              <option>选项 2</option>
+              <option>选项 3</option>
+            </select>
+          </div>
+        </div>
+        <div class="three-d-form-item">
+          <label class="three-d-form-item-label">开关</label>
+          <div class="three-d-form-item-control">
+            <label class="three-d-switch">
+              <input type="checkbox">
+              <span class="three-d-switch-inner"></span>
+            </label>
           </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 class="three-d-btn-group">
+        <button class="three-d-btn primary">主要按钮</button>
+        <button class="three-d-btn secondary">次要按钮</button>
+        <button class="three-d-btn outline">轮廓按钮</button>
+        <button class="three-d-btn text">文本按钮</button>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="three-d-tabs">
+        <div class="three-d-tabs-nav">
+          <div 
+            v-for="tab in tabs" 
+            :key="tab.id"
+            class="three-d-tabs-tab"
+            :class="{ active: activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
           </div>
         </div>
+        <div class="three-d-tabs-content">
+          <div v-if="activeTab === 'tab1'" class="three-d-tabs-tabpane">
+            <p>标签页 1 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab2'" class="three-d-tabs-tabpane">
+            <p>标签页 2 的内容</p>
+          </div>
+          <div v-if="activeTab === 'tab3'" class="three-d-tabs-tabpane">
+            <p>标签页 3 的内容</p>
+          </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 v-if="showDialog" class="three-d-modal-mask">
+        <div class="three-d-modal-wrap">
+          <div class="three-d-modal">
+            <div class="three-d-modal-content">
+              <div class="three-d-modal-header">
+                <div class="three-d-modal-title">对话框标题</div>
+                <button class="three-d-modal-close" @click="showDialog = false">
+                  <X class="w-5 h-5" />
+                </button>
+              </div>
+              <div class="three-d-modal-body">
+                <p>这是一个3D风格的对话框示例。</p>
+              </div>
+              <div class="three-d-modal-footer">
+                <button class="three-d-btn" @click="showDialog = false">取消</button>
+                <button class="three-d-btn primary" @click="showDialog = false">确定</button>
+              </div>
             </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 v-if="showMessage" class="three-d-message">
+        <div class="three-d-message-notice">
+          <div class="three-d-message-notice-content">
+            <Info class="w-5 h-5" />
+            <span>这是一条消息提示</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>
+      <!-- 通知面板 -->
+      <div v-if="showNotifications" class="three-d-notification">
+        <div class="three-d-notification-notice">
+          <div class="three-d-notification-notice-content">
+            <div class="three-d-notification-notice-icon">
+              <Bell class="w-5 h-5" />
+            </div>
+            <div class="three-d-notification-notice-message">通知标题</div>
+            <div class="three-d-notification-notice-description">通知内容</div>
+          </div>
+          <button class="three-d-notification-notice-close" @click="showNotifications = false">
+            <X class="w-5 h-5" />
           </button>
         </div>
       </div>
@@ -241,434 +187,385 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { 
-  Menu,
-  Search, 
-  Bell, 
-  User, 
-  Home, 
-  Settings, 
-  ChevronRight, 
-  CheckCircle, 
-  XCircle, 
-  Compass 
+  Search, Bell, User, MoreVertical,
+  Heart, MessageSquare, Share2, X,
+  Info
 } from 'lucide-vue-next'
+
+const showDialog = ref(false)
+const showMessage = ref(false)
+const showNotifications = ref(false)
+const activeTab = ref('tab1')
+
+const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgNEwwIDE2TDE2IDI4VDI4IDE2VDE2IDRaIiBmaWxsPSJ1cmwoI3BhaW50MCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MCIgeDE9IjAiIHkxPSIwIiB4Mj0iMzIiIHkyPSIzMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiM0RjU1QjgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyRDM0NjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='
+
+const cards = ref([
+  {
+    id: 1,
+    title: '卡片标题',
+    description: '副标题',
+    content: '这是卡片的内容，可以包含多行文本。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2MCAyMEM4MC4yNjggMjAgMjAgODAuMjY4IDIwIDE2MEMyMCAyMzkuNzMyIDgwLjI2OCAzMDAgMTYwIDMwMEMyMzkuNzMyIDMwMCAzMDAgMjM5LjczMiAzMDAgMTYwQzMwMCA4MC4yNjggMjM5LjczMiAyMCAxNjAgMjBaIiBmaWxsPSJ1cmwoI3BhaW50MCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MCIgeDE9IjAiIHkxPSIwIiB4Mj0iMzIwIiB5Mj0iMjQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iIzRGNTVCOCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzJEMzQ2MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==',
+    likes: 42,
+    comments: 8,
+    initials: 'JD',
+    avatarClass: 'bg-blue-500'
+  },
+  {
+    id: 2,
+    title: '另一个标题',
+    description: '另一个副标题',
+    content: '这是另一个卡片的内容。',
+    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2MCAyMEM4MC4yNjggMjAgMjAgODAuMjY4IDIwIDE2MEMyMCAyMzkuNzMyIDgwLjI2OCAzMDAgMTYwIDMwMEMyMzkuNzMyIDMwMCAzMDAgMjM5LjczMiAzMDAgMTYwQzMwMCA4MC4yNjggMjM5LjczMiAyMCAxNjAgMjBaIiBmaWxsPSJ1cmwoI3BhaW50MCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MCIgeDE9IjAiIHkxPSIwIiB4Mj0iMzIwIiB5Mj0iMjQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iIzRGNTVCOCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzJEMzQ2MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==',
+    likes: 36,
+    comments: 5,
+    initials: 'AB',
+    avatarClass: 'bg-blue-600'
+  }
+])
+
+const tabs = ref([
+  { id: 'tab1', label: '标签页 1' },
+  { id: 'tab2', label: '标签页 2' },
+  { id: 'tab3', label: '标签页 3' }
+])
 </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);
+<style scoped>
+.three-d-container {
+  font-family: 'Orbitron', sans-serif;
+  perspective: 1000px;
+  transform-style: preserve-3d;
 }
 
-.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-header {
+  @apply fixed top-0 left-0 right-0 h-16 bg-blue-800/90 backdrop-blur-sm z-10;
+  transform: translateZ(20px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 
-.three-d-card:hover {
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-header-content {
+  @apply container mx-auto px-4 h-full flex items-center justify-between;
 }
 
-.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-logo {
+  @apply flex items-center;
 }
 
-.three-d-color-card:hover {
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-logo-img {
+  @apply h-8 w-8;
+  transform: translateZ(10px);
 }
 
-.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-logo-text {
+  @apply ml-2 text-2xl font-bold text-white;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  transform: translateZ(10px);
 }
 
-.three-d-button:hover {
-  background: #4f46e5;
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-nav {
+  @apply flex items-center space-x-6;
 }
 
-.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-nav-item {
+  @apply text-white/90 hover:text-white transition-all duration-300;
+  transform: translateZ(10px);
 }
 
-.three-d-button-outline:hover {
-  background: #eef2ff;
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-nav-item.active {
+  @apply text-white font-bold;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
 }
 
-.three-d-button-text {
-  color: #6366f1;
-  padding: 12px 24px;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  transform-style: preserve-3d;
+.three-d-header-actions {
+  @apply flex items-center space-x-2;
+}
+
+.three-d-main {
+  @apply pt-20 pb-8 px-4;
 }
 
-.three-d-button-text:hover {
-  color: #4f46e5;
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-card-list {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
 }
 
-.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;
+.three-d-card {
+  @apply bg-blue-800/90 backdrop-blur-sm overflow-hidden;
+  transform: translateZ(0);
   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;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 
-.three-d-button-icon:hover {
-  background: #4f46e5;
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-card:hover {
+  transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 }
 
-.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-card-cover {
+  @apply relative h-48 overflow-hidden;
 }
 
-.three-d-input:focus {
-  border-color: #4f46e5;
-  outline: none;
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-card-cover-img {
+  @apply w-full h-full object-cover;
+  transform: translateZ(0);
+  transition: transform 0.3s ease;
 }
 
-.three-d-input::placeholder {
-  color: #6366f1;
+.three-d-card:hover .three-d-card-cover-img {
+  transform: scale(1.1) translateZ(10px);
 }
 
-.three-d-label {
-  display: block;
-  color: #6366f1;
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 8px;
+.three-d-card-body {
+  @apply p-4;
 }
 
-.three-d-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.three-d-card-meta {
+  @apply flex items-start mb-4;
 }
 
-.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-card-meta-avatar {
+  @apply mr-4;
 }
 
-.three-d-checkbox input:checked + .three-d-checkmark {
-  background: #6366f1;
-  border-color: #4f46e5;
+.three-d-avatar {
+  @apply w-10 h-10 flex items-center justify-center text-white font-bold;
+  transform: translateZ(10px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }
 
-.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-card-meta-content {
+  @apply flex-1;
 }
 
-.three-d-radio input:checked + .three-d-radiomark {
-  border-color: #4f46e5;
+.three-d-card-meta-title {
+  @apply text-xl font-bold text-white;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  transform: translateZ(10px);
 }
 
-.three-d-radiomark:after {
-  content: '';
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: #6366f1;
-  border-radius: 50%;
-  top: 4px;
-  left: 4px;
-  opacity: 0;
+.three-d-card-meta-description {
+  @apply text-sm text-white/70;
+  transform: translateZ(5px);
+}
+
+.three-d-card-content {
+  @apply text-white/90 mb-4;
+  transform: translateZ(0);
+}
+
+.three-d-card-actions {
+  @apply flex items-center border-t border-white/10 pt-4;
+  transform: translateZ(5px);
+}
+
+.three-d-form {
+  @apply space-y-4 mt-6;
+}
+
+.three-d-form-item {
+  @apply flex flex-col;
 }
 
-.three-d-radio input:checked + .three-d-radiomark:after {
-  opacity: 1;
+.three-d-form-item-label {
+  @apply mb-2 text-white font-bold;
+  transform: translateZ(10px);
+}
+
+.three-d-form-item-control {
+  @apply flex-1;
+}
+
+.three-d-input,
+.three-d-select {
+  @apply w-full px-4 py-2 bg-blue-800/90 backdrop-blur-sm border-2 border-white/20 focus:border-white/40 text-white;
+  transform: translateZ(0);
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.three-d-input:focus,
+.three-d-select:focus {
+  transform: translateZ(10px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
 }
 
 .three-d-switch {
-  display: flex;
-  align-items: center;
+  @apply relative inline-block w-12 h-6;
 }
 
 .three-d-switch input {
-  display: none;
+  @apply hidden;
 }
 
-.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-inner {
+  @apply absolute inset-0 bg-blue-800/90 backdrop-blur-sm transition-colors duration-300;
+  transform: translateZ(0);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  border: 2px solid white/20;
 }
 
-.three-d-switch label:after {
+.three-d-switch-inner:after {
   content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: #eef2ff;
-  border-radius: 50%;
-  top: 2px;
-  left: 2px;
-  transition: all 0.3s ease;
+  @apply absolute w-5 h-5 bg-white top-0.5 left-0.5 shadow transition-transform duration-300;
+  transform: translateZ(5px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }
 
-.three-d-switch input:checked + label {
-  background: #4f46e5;
+.three-d-switch input:checked + .three-d-switch-inner {
+  @apply bg-purple-500;
 }
 
-.three-d-switch input:checked + label:after {
-  left: 28px;
+.three-d-switch input:checked + .three-d-switch-inner:after {
+  @apply translate-x-6;
+}
+
+.three-d-btn-group {
+  @apply flex flex-wrap gap-2 mt-6;
+}
+
+.three-d-btn {
+  @apply px-4 py-2 text-sm font-bold transition-all duration-300;
+  transform: translateZ(0);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.three-d-btn:hover {
+  transform: translateZ(10px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+}
+
+.three-d-btn.primary {
+  @apply bg-blue-500 text-white hover:bg-blue-600;
+}
+
+.three-d-btn.secondary {
+  @apply bg-purple-500 text-white hover:bg-purple-600;
+}
+
+.three-d-btn.outline {
+  @apply bg-transparent text-white border-2 border-white/20 hover:border-white/40;
+}
+
+.three-d-btn.text {
+  @apply bg-transparent text-white hover:text-white/80;
 }
 
 .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;
+  @apply mt-6;
 }
 
-.three-d-tab.active {
-  background: #eef2ff;
-  color: #6366f1;
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-tabs-nav {
+  @apply flex border-b border-white/10;
 }
 
-.three-d-breadcrumbs {
-  display: flex;
-  align-items: center;
+.three-d-tabs-tab {
+  @apply px-4 py-3 text-white/90 cursor-pointer hover:text-white transition-all duration-300;
+  transform: translateZ(0);
 }
 
-.three-d-breadcrumb {
-  color: #6366f1;
-  text-decoration: none;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  transform-style: preserve-3d;
+.three-d-tabs-tab:hover {
+  transform: translateZ(10px);
 }
 
-.three-d-breadcrumb:hover {
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-tabs-tab.active {
+  @apply text-white font-bold;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  transform: translateZ(20px);
 }
 
-.three-d-breadcrumb.active {
-  color: #4f46e5;
-  font-weight: 500;
+.three-d-tabs-content {
+  @apply p-4;
 }
 
-.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-tabs-tabpane {
+  @apply bg-blue-800/90 backdrop-blur-sm p-4;
+  transform: translateZ(0);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 
-.three-d-progress-bar {
-  height: 100%;
-  background: #4f46e5;
-  border-radius: 2px;
+.three-d-modal-mask {
+  @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50;
 }
 
-.three-d-progress-circular {
-  width: 40px;
-  height: 40px;
-  position: relative;
+.three-d-modal-wrap {
+  @apply fixed inset-0 overflow-auto;
 }
 
-.three-d-progress-circle {
-  width: 100%;
-  height: 100%;
-  border: 2px solid #6366f1;
-  border-radius: 50%;
-  border-top-color: #4f46e5;
-  animation: spin 1s linear infinite;
+.three-d-modal {
+  @apply relative top-20 mx-auto w-full max-w-md;
+  transform: translateZ(50px);
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.three-d-modal-content {
+  @apply bg-blue-800/90 backdrop-blur-sm;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 }
 
-.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-modal-header {
+  @apply flex justify-between items-center p-4 border-b border-white/10;
 }
 
-.three-d-alert:hover {
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-modal-title {
+  @apply text-xl font-bold text-white;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
 }
 
-.three-d-alert.success {
-  background: #eef2ff;
-  border-color: #6366f1;
+.three-d-modal-close {
+  @apply text-white/90 hover:text-white;
 }
 
-.three-d-alert.error {
-  background: #eef2ff;
-  border-color: #6366f1;
+.three-d-modal-body {
+  @apply p-4;
 }
 
-.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-modal-footer {
+  @apply flex justify-end space-x-2 p-4 border-t border-white/10;
 }
 
-.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-message {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.three-d-nav-item:hover {
-  transform: translateY(-2px) rotateX(5deg);
+.three-d-message-notice {
+  @apply mb-4;
 }
 
-.three-d-nav-item.active {
-  color: #4f46e5;
-  font-weight: 500;
+.three-d-message-notice-content {
+  @apply flex items-center px-4 py-3 bg-blue-800/90 backdrop-blur-sm;
+  transform: translateZ(30px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 
-.three-d-nav-item span {
-  font-size: 12px;
-  margin-top: 4px;
+.three-d-notification {
+  @apply fixed top-4 right-4 z-50;
 }
 
-.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-notification-notice {
+  @apply mb-4 bg-blue-800/90 backdrop-blur-sm overflow-hidden;
+  transform: translateZ(30px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+}
+
+.three-d-notification-notice-content {
+  @apply p-4;
+}
+
+.three-d-notification-notice-icon {
+  @apply float-left mr-4 text-white;
+}
+
+.three-d-notification-notice-message {
+  @apply text-xl font-bold text-white;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
 }
 
-.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-notification-notice-description {
+  @apply mt-1 text-sm text-white/70;
 }
 
-.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);
+.three-d-notification-notice-close {
+  @apply absolute top-4 right-4 text-white/90 hover:text-white;
 }
 </style> 

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

@@ -1,219 +1,469 @@
 <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 class="threed-container min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
+    <!-- 顶部应用栏 -->
+    <div class="threed-app-bar">
+      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+        <div class="flex items-center">
+          <Menu class="w-5 h-5 text-blue-600 mr-4" />
+          <h1 class="text-xl font-medium text-blue-900">3D Design</h1>
         </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 class="flex items-center space-x-4">
+          <button class="threed-icon-button">
+            <Search class="w-5 h-5" />
+          </button>
+          <button class="threed-icon-button">
+            <Bell class="w-5 h-5" />
+          </button>
+          <button class="threed-icon-button">
+            <User class="w-5 h-5" />
+          </button>
         </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 class="container mx-auto p-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- 左侧导航 -->
+        <div class="threed-card">
+          <div class="p-4">
+            <h2 class="text-lg font-medium mb-4 text-blue-900">导航菜单</h2>
+            <nav class="space-y-2">
+              <a href="#" class="threed-nav-item active">
+                <Home class="w-5 h-5" />
+                <span>首页</span>
+              </a>
+              <a href="#" class="threed-nav-item">
+                <Inbox class="w-5 h-5" />
+                <span>收件箱</span>
+                <span class="threed-badge">12</span>
+              </a>
+              <a href="#" class="threed-nav-item">
+                <Star class="w-5 h-5" />
+                <span>收藏</span>
+              </a>
+              <a href="#" class="threed-nav-item">
+                <Settings class="w-5 h-5" />
+                <span>设置</span>
+              </a>
+            </nav>
           </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 class="md:col-span-2 space-y-6">
+          <!-- 卡片列表 -->
+          <div class="threed-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-900">卡片列表</h2>
+              <div class="space-y-4">
+                <div class="threed-list-item">
+                  <div class="threed-avatar bg-blue-500">JD</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-blue-900">卡片标题</h3>
+                    <p class="text-blue-600">卡片副标题</p>
+                  </div>
+                  <button class="threed-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+                <div class="threed-list-item">
+                  <div class="threed-avatar bg-indigo-500">AB</div>
+                  <div class="flex-1">
+                    <h3 class="font-medium text-blue-900">另一个标题</h3>
+                    <p class="text-blue-600">另一个副标题</p>
+                  </div>
+                  <button class="threed-icon-button">
+                    <MoreVertical class="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             </div>
-            <div>
-              <h4 class="text-sm font-bold text-indigo-900">列表项标题</h4>
-              <p class="text-sm text-indigo-800">列表项描述文本</p>
+          </div>
+
+          <!-- 表单元素 -->
+          <div class="threed-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-900">表单元素</h2>
+              <div class="space-y-4">
+                <div class="threed-input-group">
+                  <label class="text-blue-700">文本输入</label>
+                  <input type="text" placeholder="请输入内容" class="threed-input">
+                </div>
+                <div class="threed-input-group">
+                  <label class="text-blue-700">密码输入</label>
+                  <input type="password" placeholder="请输入密码" class="threed-input">
+                </div>
+                <div class="threed-input-group">
+                  <label class="text-blue-700">下拉选择</label>
+                  <select class="threed-input">
+                    <option>选项 1</option>
+                    <option>选项 2</option>
+                    <option>选项 3</option>
+                  </select>
+                </div>
+                <div class="flex items-center space-x-4">
+                  <label class="threed-checkbox">
+                    <input type="checkbox">
+                    <span class="threed-checkmark"></span>
+                    <span class="text-blue-700">复选框</span>
+                  </label>
+                  <label class="threed-radio">
+                    <input type="radio" name="radio">
+                    <span class="threed-radiomark"></span>
+                    <span class="text-blue-700">单选框</span>
+                  </label>
+                </div>
+                <div class="threed-switch">
+                  <input type="checkbox" id="switch1">
+                  <label for="switch1" class="text-blue-700">开关</label>
+                </div>
+              </div>
             </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 class="threed-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-900">按钮样式</h2>
+              <div class="flex flex-wrap gap-4">
+                <button class="threed-button">主要按钮</button>
+                <button class="threed-button outlined">次要按钮</button>
+                <button class="threed-button text">文本按钮</button>
+                <button class="threed-button icon">
+                  <Plus class="w-5 h-5" />
+                </button>
+              </div>
             </div>
-            <div>
-              <h4 class="text-sm font-bold text-indigo-900">列表项标题</h4>
-              <p class="text-sm text-indigo-800">列表项描述文本</p>
+          </div>
+
+          <!-- 进度指示器 -->
+          <div class="threed-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-900">进度指示器</h2>
+              <div class="space-y-4">
+                <div class="threed-progress">
+                  <div class="threed-progress-bar" style="width: 60%"></div>
+                </div>
+                <div class="threed-progress circular">
+                  <div class="threed-progress-circle"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 对话框 -->
+          <div class="threed-card">
+            <div class="p-4">
+              <h2 class="text-lg font-medium mb-4 text-blue-900">对话框示例</h2>
+              <button class="threed-button" @click="showDialog = true">打开对话框</button>
             </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 class="threed-bottom-nav">
+      <a href="#" class="threed-bottom-nav-item active">
+        <Home class="w-6 h-6" />
+        <span>首页</span>
+      </a>
+      <a href="#" class="threed-bottom-nav-item">
+        <Search class="w-6 h-6" />
+        <span>搜索</span>
+      </a>
+      <a href="#" class="threed-bottom-nav-item">
+        <Plus class="w-6 h-6" />
+        <span>添加</span>
+      </a>
+      <a href="#" class="threed-bottom-nav-item">
+        <Bell class="w-6 h-6" />
+        <span>通知</span>
+      </a>
+      <a href="#" class="threed-bottom-nav-item">
+        <User class="w-6 h-6" />
+        <span>我的</span>
+      </a>
+    </div>
+
+    <!-- 对话框 -->
+    <div v-if="showDialog" class="threed-dialog-overlay">
+      <div class="threed-dialog">
+        <div class="threed-dialog-header">
+          <h3 class="text-blue-900">对话框标题</h3>
+          <button class="threed-icon-button" @click="showDialog = false">
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+        <div class="threed-dialog-content">
+          <p class="text-blue-600">这是一个 3D 风格的对话框示例。</p>
+        </div>
+        <div class="threed-dialog-actions">
+          <button class="threed-button text" @click="showDialog = false">取消</button>
+          <button class="threed-button" @click="showDialog = false">确定</button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { Palette, Type, Box, User, ChevronRight, Settings, Home, Compass, Bell, Check } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { 
+  Menu, Search, Bell, User, Home, 
+  Inbox, Star, Settings, MoreVertical,
+  Plus, X
+} from 'lucide-vue-next'
+
+const showDialog = ref(false)
 </script>
 
-<style>
-/* 3D 样式 */
-.3d-card {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+<style scoped>
+.threed-container {
+  font-family: 'Inter', sans-serif;
+  perspective: 1000px;
+}
+
+.threed-app-bar {
+  @apply sticky top-0 z-10 bg-white/80 backdrop-blur-sm;
+  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
+  transform-style: preserve-3d;
+  transform: translateZ(10px);
+}
+
+.threed-icon-button {
+  @apply p-2 rounded-full text-blue-600;
   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);
+.threed-icon-button:hover {
+  @apply bg-blue-100;
+  transform: translateZ(5px);
 }
 
-.3d-icon {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+.threed-card {
+  @apply rounded-lg p-4 bg-white/80 backdrop-blur-sm;
+  border: 1px solid rgba(59, 130, 246, 0.1);
   transform-style: preserve-3d;
   transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
 }
 
-.3d-icon:hover {
-  transform: translateY(-3px) rotateX(3deg);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+.threed-card:hover {
+  transform: translateZ(10px);
+  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
 }
 
-.3d-button {
-  background: linear-gradient(135deg, #4f46e5, #7c3aed);
-  border-radius: 8px;
-  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
+.threed-nav-item {
+  @apply flex items-center space-x-3 p-2 rounded-lg text-blue-600;
   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);
+.threed-nav-item:hover {
+  @apply bg-blue-100;
+  transform: translateZ(5px);
+}
+
+.threed-nav-item.active {
+  @apply text-blue-900 bg-blue-100;
+  transform: translateZ(5px);
 }
 
-.3d-button-outline {
-  background: transparent;
-  border: 2px solid #4f46e5;
-  border-radius: 8px;
-  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.1);
+.threed-badge {
+  @apply bg-blue-500 text-white text-xs px-2 py-1 rounded-full;
+  transform: translateZ(5px);
+}
+
+.threed-list-item {
+  @apply flex items-center space-x-4 p-2 rounded-lg;
   transform-style: preserve-3d;
   transition: all 0.3s ease;
 }
 
-.3d-button-text {
-  background: transparent;
-  border: none;
+.threed-list-item:hover {
+  @apply bg-blue-100;
+  transform: translateZ(5px);
+}
+
+.threed-avatar {
+  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
+  transform: translateZ(5px);
+}
+
+.threed-input-group {
+  @apply space-y-1;
+}
+
+.threed-input {
+  @apply w-full px-3 py-2 rounded-lg text-blue-900;
+  border: 1px solid rgba(59, 130, 246, 0.1);
   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);
+.threed-input:focus {
+  @apply border-blue-400 outline-none;
+  transform: translateZ(5px);
+}
+
+.threed-input::placeholder {
+  @apply text-blue-400;
+}
+
+.threed-checkbox,
+.threed-radio {
+  @apply flex items-center space-x-2 cursor-pointer;
+  transform-style: preserve-3d;
+}
+
+.threed-checkmark,
+.threed-radiomark {
+  @apply w-5 h-5 rounded;
+  border: 1px solid rgba(59, 130, 246, 0.1);
   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);
+.threed-checkmark {
+  @apply rounded;
+}
+
+.threed-radiomark {
+  @apply rounded-full;
+}
+
+.threed-checkbox input:checked + .threed-checkmark,
+.threed-radio input:checked + .threed-radiomark {
+  @apply bg-blue-500 border-blue-500;
+  transform: translateZ(5px);
 }
 
-.3d-checkbox {
-  background: white;
-  border: 2px solid #e0e7ff;
-  border-radius: 4px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
+.threed-switch {
+  @apply flex items-center space-x-2;
+  transform-style: preserve-3d;
+}
+
+.threed-switch input {
+  @apply hidden;
+}
+
+.threed-switch label {
+  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
+  background: rgba(59, 130, 246, 0.1);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.threed-switch label:after {
+  content: '';
+  @apply absolute w-5 h-5 bg-white rounded-full top-0.5 left-0.5;
+  transform: translateZ(5px);
+  transition: all 0.3s ease;
+}
+
+.threed-switch input:checked + label {
+  @apply bg-blue-500;
+  transform: translateZ(5px);
+}
+
+.threed-switch input:checked + label:after {
+  @apply translate-x-6;
+}
+
+.threed-button {
+  @apply px-4 py-2 rounded-lg text-blue-900;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.threed-button:hover {
+  @apply bg-blue-100;
+  transform: translateZ(5px);
+}
+
+.threed-button.outlined {
+  @apply bg-transparent border border-blue-300;
+}
+
+.threed-button.text {
+  @apply bg-transparent border-none;
+}
+
+.threed-button.icon {
+  @apply p-2 rounded-full;
+}
+
+.threed-progress {
+  @apply h-1 rounded-full overflow-hidden;
+  background: rgba(59, 130, 246, 0.1);
+  transform-style: preserve-3d;
+}
+
+.threed-progress-bar {
+  @apply h-full bg-blue-500 rounded-full;
+  transform: translateZ(5px);
+}
+
+.threed-progress.circular {
+  @apply w-12 h-12 rounded-full;
+  background: rgba(59, 130, 246, 0.1);
+  transform-style: preserve-3d;
+}
+
+.threed-progress-circle {
+  @apply w-full h-full rounded-full border-4 border-blue-500;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+  transform: translateZ(5px);
+}
+
+.threed-bottom-nav {
+  @apply fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-sm flex justify-around items-center py-2;
+  border-top: 1px solid rgba(59, 130, 246, 0.1);
+  transform-style: preserve-3d;
+  transform: translateZ(10px);
+}
+
+.threed-bottom-nav-item {
+  @apply flex flex-col items-center space-y-1 text-blue-600;
   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);
+.threed-bottom-nav-item:hover {
+  transform: translateZ(5px);
+}
+
+.threed-bottom-nav-item.active {
+  @apply text-blue-900;
+  transform: translateZ(5px);
+}
+
+.threed-dialog-overlay {
+  @apply fixed inset-0 bg-black/20 flex items-center justify-center;
   transform-style: preserve-3d;
 }
 
-.3d-title {
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+.threed-dialog {
+  @apply rounded-lg p-4 bg-white/80 backdrop-blur-sm w-full max-w-md;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  transform-style: preserve-3d;
+  transform: translateZ(20px);
+  box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
+}
+
+.threed-dialog-header {
+  @apply flex justify-between items-center p-4 border-b border-blue-200;
+}
+
+.threed-dialog-content {
+  @apply p-4;
+}
+
+.threed-dialog-actions {
+  @apply flex justify-end space-x-2 p-4 border-t border-blue-200;
 }
 </style> 

src/router/index.js

@@ -20,116 +20,161 @@ 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'
+import AntDesignView from '../assets/templates/ui-standard/AntDesignView.vue'
+import ElementUIView from '../assets/templates/ui-standard/ElementUIView.vue'
+import FlatView from '../assets/templates/ui-standard/FlatView.vue'
+import NordicView from '../assets/templates/ui-standard/NordicView.vue'
+import FuturisticView from '../assets/templates/ui-standard/FuturisticView.vue'
+
+const 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',
+    name: 'ThreeD',
+    component: ThreeDDesignView
+  },
+  {
+    path: '/skeuomorphic',
+    name: 'skeuomorphic',
+    component: SkeuomorphicView
+  },
+  {
+    path: '/material',
+    name: 'material',
+    component: MaterialView
+  },
+  {
+    path: '/ios',
+    name: 'IOSDesign',
+    component: IOSDesignView
+  },
+  {
+    path: '/fluent',
+    name: 'FluentDesign',
+    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',
+    name: 'PixelArt',
+    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
+  },
+  {
+    path: '/ant',
+    name: 'AntDesign',
+    component: AntDesignView
+  },
+  {
+    path: '/element',
+    name: 'ElementUI',
+    component: ElementUIView
+  },
+  {
+    path: '/flat',
+    name: 'Flat',
+    component: FlatView
+  },
+  {
+    path: '/nordic',
+    name: 'Nordic',
+    component: NordicView
+  },
+  {
+    path: '/futuristic',
+    name: 'Futuristic',
+    component: FuturisticView
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/'
+  }
+]
 
 const router = createRouter({
   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
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth'
+      }
     }
-  ]
+    return { top: 0, behavior: 'smooth' }
+  }
 })
 
 export default router

src/views/HomeView.vue

@@ -1,238 +1,16 @@
 <template>
-  <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="home-container min-h-screen bg-gray-100 p-4 md:p-8">
+    <div class="max-w-7xl mx-auto">
+      <h1 class="text-4xl font-bold text-gray-900 mb-8">设计风格展示</h1>
       
       <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">
+        <router-link v-for="style in designStyles" 
+          :key="style.path" 
+          :to="style.path" 
+          :class="style.cardClass">
           <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>
+            <h3 class="text-xl font-semibold" :class="style.titleClass">{{ style.name }}</h3>
+            <p class="text-sm" :class="style.descriptionClass">{{ style.description }}</p>
           </div>
         </router-link>
       </div>
@@ -241,312 +19,319 @@
 </template>
 
 <script setup>
-import { 
-  Layers, Apple, Monitor, Box, Droplet, Square, 
-  Minus, Moon, Clock, Image, Zap, Sun, 
-  Settings, Leaf
-} from 'lucide-vue-next'
+const designStyles = [
+  { path: '/fluent', name: 'Fluent Design', description: '微软流畅设计系统', cardClass: 'fluent-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
+  { path: '/ios', name: 'iOS Design', description: '苹果设计风格', cardClass: 'ios-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
+  { path: '/element', name: 'Element UI', description: '饿了么设计系统', cardClass: 'element-card', titleClass: 'text-white', descriptionClass: 'text-green-100' },
+  { path: '/ant', name: 'Ant Design', description: '蚂蚁设计系统', cardClass: 'ant-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
+  { path: '/morphism', name: 'Morphism', description: '变形设计风格', cardClass: 'morphism-card', titleClass: 'text-purple-900', descriptionClass: 'text-purple-700' },
+  { path: '/holographic', name: 'Holographic', description: '全息设计风格', cardClass: 'holographic-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
+  { path: '/gradient', name: 'Gradient', description: '渐变设计风格', cardClass: 'gradient-card', titleClass: 'text-white', descriptionClass: 'text-pink-100' },
+  { path: '/neon', name: 'Neon', description: '霓虹设计风格', cardClass: 'neon-card', titleClass: 'text-pink-400', descriptionClass: 'text-pink-300' },
+  { path: '/organic', name: 'Organic', description: '有机设计风格', cardClass: 'organic-card', titleClass: 'text-green-900', descriptionClass: 'text-green-700' },
+  { path: '/pixel', name: 'Pixel Art', description: '像素艺术风格', cardClass: 'pixel-card', titleClass: 'text-yellow-900', descriptionClass: 'text-yellow-700' },
+  { path: '/brutalism', name: 'Brutalism', description: '粗野主义风格', cardClass: 'brutalism-card', titleClass: 'text-black', descriptionClass: 'text-gray-800' },
+  { path: '/3d', name: '3D Design', description: '3D设计风格', cardClass: 'three-d-card', titleClass: 'text-white', descriptionClass: 'text-blue-200' },
+  { path: '/skeuomorphic', name: 'Skeuomorphic', description: '拟物设计风格', cardClass: 'skeuomorphic-card', titleClass: 'text-amber-900', descriptionClass: 'text-amber-700' },
+  { path: '/neumorphism', name: 'Neumorphism', description: '新拟物设计风格', cardClass: 'neumorphism-card', titleClass: 'text-gray-800', descriptionClass: 'text-gray-600' },
+  { path: '/flat', name: 'Flat', description: '扁平设计风格', cardClass: 'flat-card', titleClass: 'text-white', descriptionClass: 'text-red-100' },
+  { path: '/material', name: 'Material', description: '材料设计风格', cardClass: 'material-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
+  { path: '/nordic', name: 'Nordic', description: '北欧设计风格', cardClass: 'nordic-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
+  { path: '/futuristic', name: 'Futuristic', description: '未来主义风格', cardClass: 'futuristic-card', titleClass: 'text-white', descriptionClass: 'text-cyan-100' },
+  { path: '/retro', name: 'Retro', description: '复古设计风格', cardClass: 'retro-card', titleClass: 'text-orange-900', descriptionClass: 'text-orange-700' },
+  { path: '/cyberpunk', name: 'Cyberpunk', description: '赛博朋克风格', cardClass: 'cyberpunk-card', titleClass: 'text-pink-400', descriptionClass: 'text-purple-300' },
+  { path: '/steampunk', name: 'Steampunk', description: '蒸汽朋克风格', cardClass: 'steampunk-card', titleClass: 'text-amber-100', descriptionClass: 'text-amber-200' },
+  { path: '/aurora', name: 'Aurora', description: '极光设计风格', cardClass: 'aurora-card', titleClass: 'text-white', descriptionClass: 'text-green-100' },
+  { path: '/minimalist', name: 'Minimalist', description: '极简设计风格', cardClass: 'minimalist-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
+  { path: '/dark-mode', name: 'Dark Mode', description: '暗黑模式风格', cardClass: 'dark-mode-card', titleClass: 'text-white', descriptionClass: 'text-gray-300' },
+  { path: '/glassmorphism', name: 'Glassmorphism', description: '玻璃态设计风格', cardClass: 'glassmorphism-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-700' }
+]
 </script>
 
 <style scoped>
-.card-content {
-  @apply p-6 rounded-xl transition-all duration-300;
+.home-container {
+  font-family: 'Inter', sans-serif;
 }
 
-/* Material Design Card */
-.material-card {
-  @apply bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300;
+.card-content {
+  @apply p-6 rounded-lg h-full flex flex-col justify-center;
+  transition: all 0.3s ease;
 }
 
-.material-card:hover {
-  transform: translateY(-4px);
+/* Fluent Design Card */
+.fluent-card {
+  @apply bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.material-icon {
-  @apply w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4;
+.fluent-card:hover {
+  @apply shadow-lg;
+  transform: translateY(-4px);
 }
 
 /* iOS Design Card */
 .ios-card {
-  @apply bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300;
+  @apply bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .ios-card:hover {
+  @apply shadow-lg;
   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%);
+/* Element UI Card */
+.element-card {
+  @apply bg-gradient-to-br from-green-500 to-green-600 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
 }
 
-.fluent-card:hover {
+.element-card:hover {
+  @apply shadow-lg;
   transform: translateY(-4px);
 }
 
-.fluent-icon {
-  @apply w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4;
+/* Ant Design Card */
+.ant-card {
+  @apply bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
 }
 
-/* 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);
+.ant-card:hover {
+  @apply shadow-lg;
+  transform: translateY(-4px);
 }
 
-.neumorphism-card:hover {
-  transform: translateY(-4px);
+/* Morphism Card */
+.morphism-card {
+  @apply bg-gradient-to-br from-purple-100 to-pink-100 backdrop-blur-md rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.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);
+.morphism-card:hover {
+  @apply shadow-lg;
+  transform: translateY(-4px);
 }
 
-/* Glassmorphism Card */
-.glassmorphism-card {
-  @apply rounded-xl transition-all duration-300;
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10px);
+/* Holographic Card */
+.holographic-card {
+  @apply bg-gradient-to-br from-blue-600/30 via-purple-600/30 to-pink-600/30 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
   border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(8px);
 }
 
-.glassmorphism-card:hover {
+.holographic-card:hover {
+  @apply shadow-lg;
   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);
+/* Gradient Card */
+.gradient-card {
+  @apply bg-gradient-to-br from-pink-600 via-purple-600 to-indigo-600 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
 }
 
-/* Brutalism Card */
-.brutalism-card {
-  @apply rounded-none border-4 border-black bg-white transition-all duration-300;
+.gradient-card:hover {
+  @apply shadow-lg;
+  transform: translateY(-4px);
 }
 
-.brutalism-card:hover {
-  transform: translate(-4px, -4px);
-  box-shadow: 4px 4px 0 black;
+/* Neon Card */
+.neon-card {
+  @apply bg-black rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid #ff00ff;
+  box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
 }
 
-.brutalism-icon {
-  @apply w-12 h-12 border-4 border-black flex items-center justify-center mb-4;
+.neon-card:hover {
+  @apply shadow-lg;
+  transform: translateY(-4px);
 }
 
-/* Minimalist Card */
-.minimalist-card {
-  @apply bg-white rounded-lg transition-all duration-300;
-  border: 1px solid #e5e7eb;
+/* Organic Card */
+.organic-card {
+  @apply bg-gradient-to-br from-green-200 to-green-300 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.minimalist-card:hover {
+.organic-card:hover {
+  @apply shadow-lg;
   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;
+/* Pixel Art Card */
+.pixel-card {
+  @apply bg-gradient-to-br from-yellow-300 to-yellow-400 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 2px solid #000;
 }
 
-.dark-mode-card:hover {
+.pixel-card:hover {
+  @apply shadow-lg;
   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;
+/* Brutalism Card */
+.brutalism-card {
+  @apply bg-yellow-200 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 3px solid #000;
+  box-shadow: 8px 8px 0 #000;
 }
 
-.retro-card:hover {
+.brutalism-card:hover {
+  @apply shadow-lg;
   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;
+  @apply bg-gradient-to-br from-blue-900 to-purple-900 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
   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);
+  @apply shadow-lg;
+  transform: translateY(-4px) rotateX(5deg) rotateY(5deg);
 }
 
 /* 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);
+  @apply bg-gradient-to-br from-amber-200 to-amber-300 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* 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;
+/* Neumorphism Card */
+.neumorphism-card {
+  @apply bg-gray-100 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
 }
 
-/* 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;
+/* Flat Card */
+.flat-card {
+  @apply bg-gradient-to-br from-red-500 to-red-600 rounded-lg shadow-md overflow-hidden cursor-pointer;
+  transition: all 0.3s ease;
+  border: none;
 }
 
-.steampunk-card:hover {
+.flat-card:hover {
+  @apply shadow-lg;
   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);
+/* Material Card */
+.material-card {
+  @apply bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.morphism-icon {
-  @apply w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4;
+/* Nordic Card */
+.nordic-card {
+  @apply bg-gradient-to-br from-white to-gray-100 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-/* Holographic Card */
-.holographic-card {
-  @apply bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-xl transition-all duration-300;
+/* Futuristic Card */
+.futuristic-card {
+  @apply bg-gradient-to-br from-cyan-600 to-blue-600 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
   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;
+/* Retro Card */
+.retro-card {
+  @apply bg-gradient-to-br from-orange-400 to-pink-400 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 2px solid #000;
 }
 
-/* Neon Card */
-.neon-card {
-  @apply bg-black rounded-xl transition-all duration-300;
+/* Cyberpunk Card */
+.cyberpunk-card {
+  @apply bg-gradient-to-r from-pink-600 via-purple-600 to-cyan-600 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
   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;
+/* Steampunk Card */
+.steampunk-card {
+  @apply bg-gradient-to-r from-amber-800 to-amber-900 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 2px solid #8B4513;
 }
 
-/* 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;
+/* Aurora Card */
+.aurora-card {
+  @apply bg-gradient-to-r from-green-500 via-blue-600 to-purple-600 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.organic-card:hover {
-  transform: translateY(-4px);
+/* Minimalist Card */
+.minimalist-card {
+  @apply bg-white rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.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;
+/* Dark Mode Card */
+.dark-mode-card {
+  @apply bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Pixel Art Card */
-.pixel-art-card {
-  @apply bg-gray-900 rounded-none transition-all duration-300;
-  border: 2px solid #4b5563;
+.dark-mode-card .text-gray-600 {
+  @apply text-gray-400;
 }
 
-.pixel-art-card:hover {
-  transform: translate(-4px, -4px);
-  box-shadow: 4px 4px 0 #4b5563;
+/* Glassmorphism Card */
+.glassmorphism-card {
+  @apply bg-white/30 backdrop-blur-md rounded-lg shadow-md overflow-hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.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;
+/* 统一悬停效果 */
+.fluent-card:hover,
+.ios-card:hover,
+.element-card:hover,
+.ant-card:hover,
+.morphism-card:hover,
+.holographic-card:hover,
+.gradient-card:hover,
+.neon-card:hover,
+.organic-card:hover,
+.pixel-card:hover,
+.brutalism-card:hover,
+.three-d-card:hover,
+.skeuomorphic-card:hover,
+.neumorphism-card:hover,
+.flat-card:hover,
+.material-card:hover,
+.nordic-card:hover,
+.futuristic-card:hover,
+.retro-card:hover,
+.cyberpunk-card:hover,
+.steampunk-card:hover,
+.aurora-card:hover,
+.minimalist-card:hover,
+.dark-mode-card:hover,
+.glassmorphism-card:hover {
+  @apply shadow-lg;
+  transform: translateY(-4px);
 }
 </style>