@appthen/cli 1.2.11 → 1.2.13

package/tests/test-app/src/pages/ui/styleSelectorPage.tsx

@@ -0,0 +1,1554 @@
+/**
+ * UI风格选择器
+ * @type Page
+ * @route /ui/styles
+ * @screen 2560w #f5f5f5
+ * @frames web
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+
+
+class IProps {
+  /* 页面标题 */
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* UI风格列表 */
+  styles?: {
+    /* @example 1 */id?: number,
+    /* @example 现代简约 */name?: string,
+    /* @example 简洁、留白、清晰，注重内容本身 */description?: string,
+    features?: string,
+    colors?: string,
+    /* @example 现代简约风格，使用大留白、清晰排版、简洁线条，色彩以白色和灰色为主，强调内容本身，去除多余装饰 */prompt?: string,
+  }[];
+  /* Toast显示状态 */
+  toastVisible?: boolean;
+  /* Toast消息 */
+  toastMessage?: string;
+  /* 预览模态框显示状态 */
+  previewVisible?: boolean;
+  /* 当前预览的风格 */
+  currentStyle?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    styles: [
+      {
+        id: 1,
+        name: '现代简约',
+        description: '简洁、留白、清晰，注重内容本身',
+        features: ['大留白', '清晰排版', '无装饰'],
+        colors: ['#ffffff', '#f5f5f5', '#333333'],
+        prompt:
+          '现代简约风格，使用大留白、清晰排版、简洁线条，色彩以白色和灰色为主，强调内容本身，去除多余装饰',
+      },
+      {
+        id: 2,
+        name: '玻璃拟态',
+        description: '毛玻璃效果、半透明、柔和阴影',
+        features: ['毛玻璃', '半透明', '柔和阴影'],
+        colors: ['rgba(255,255,255,0.2)', '#e0e5ec', '#6366f1'],
+        prompt:
+          '玻璃拟态风格，使用毛玻璃效果、半透明背景、柔和阴影，色彩偏冷色调，营造通透感和层次感',
+      },
+      {
+        id: 3,
+        name: '新拟态',
+        description: '柔和阴影、凸起凹陷、真实触感',
+        features: ['软阴影', '凸起效果', '触感真实'],
+        colors: ['#e0e5ec', '#ffffff', '#a3b1c6'],
+        prompt:
+          '新拟态风格，使用柔和阴影创造凸起和凹陷效果，色彩为浅灰色系，营造真实触感和立体感',
+      },
+      {
+        id: 4,
+        name: '扁平化',
+        description: '无阴影、纯色块、简洁图标',
+        features: ['无阴影', '纯色块', '简洁图标'],
+        colors: ['#3498db', '#2ecc71', '#e74c3c'],
+        prompt:
+          '扁平化风格，去除所有阴影和渐变，使用纯色块和简洁图标，色彩鲜艳对比强烈，强调简洁明了',
+      },
+      {
+        id: 5,
+        name: '赛博朋克',
+        description: '霓虹灯、未来感、暗黑背景',
+        features: ['霓虹灯', '未来感', '暗黑背景'],
+        colors: ['#00ff87', '#60efff', '#0d0221'],
+        prompt:
+          '赛博朋克风格，使用霓虹灯色彩、发光效果、暗黑背景，营造未来科技感和反乌托邦氛围',
+      },
+      {
+        id: 6,
+        name: '暗黑模式',
+        description: '深色背景、高对比度、护眼',
+        features: ['深色背景', '高对比度', '护眼'],
+        colors: ['#1a1a1a', '#2d2d2d', '#ffffff'],
+        prompt:
+          '暗黑模式风格，使用深色背景、高对比度文字，减少眼睛疲劳，营造沉浸式体验',
+      },
+      {
+        id: 7,
+        name: '卡片式',
+        description: '圆角卡片、阴影层次、模块化',
+        features: ['圆角卡片', '阴影层次', '模块化'],
+        colors: ['#ffffff', '#f8f9fa', '#dee2e6'],
+        prompt:
+          '卡片式风格，使用圆角卡片、柔和阴影、模块化布局，内容清晰分组，层次分明',
+      },
+      {
+        id: 8,
+        name: '渐变风格',
+        description: '色彩渐变、流动感、视觉冲击',
+        features: ['色彩渐变', '流动感', '视觉冲击'],
+        colors: ['#667eea', '#764ba2', '#f093fb'],
+        prompt:
+          '渐变风格，使用丰富的色彩渐变、流动的视觉效果，营造动感和现代感，视觉冲击力强',
+      },
+      {
+        id: 9,
+        name: '极简主义',
+        description: '最少元素、功能优先、克制设计',
+        features: ['最少元素', '功能优先', '克制设计'],
+        colors: ['#ffffff', '#000000', '#f0f0f0'],
+        prompt:
+          '极简主义风格，使用最少的元素和色彩，功能优先，克制设计，强调"少即是多"的理念',
+      },
+      {
+        id: 10,
+        name: '复古风格',
+        description: '怀旧色彩、复古字体、经典元素',
+        features: ['怀旧色彩', '复古字体', '经典元素'],
+        colors: ['#d4a373', '#faedcd', '#ccd5ae'],
+        prompt:
+          '复古风格，使用怀旧色彩、复古字体和经典设计元素，营造温暖怀旧的氛围',
+      },
+      {
+        id: 11,
+        name: '科技感',
+        description: '蓝色调、线条感、数据可视化',
+        features: ['蓝色调', '线条感', '数据可视化'],
+        colors: ['#0066cc', '#00ccff', '#001a33'],
+        prompt:
+          '科技感风格，使用蓝色调、线条感设计、数据可视化元素，营造专业科技氛围',
+      },
+      {
+        id: 12,
+        name: '自然风格',
+        description: '自然色彩、有机形状、植物元素',
+        features: ['自然色彩', '有机形状', '植物元素'],
+        colors: ['#2d6a4f', '#95d5b2', '#d8f3dc'],
+        prompt:
+          '自然风格，使用自然色彩、有机形状、植物元素，营造清新自然、和谐舒适的氛围',
+      },
+      {
+        id: 13,
+        name: '波普艺术',
+        description: '大胆色彩、重复图案、流行文化',
+        features: ['大胆色彩', '重复图案', '流行文化'],
+        colors: ['#ff6b6b', '#ffd93d', '#6bcb77'],
+        prompt:
+          '波普艺术风格，使用大胆鲜艳色彩、重复图案、流行文化元素，营造活泼有趣的视觉效果',
+      },
+      {
+        id: 14,
+        name: '手绘风格',
+        description: '手绘线条、不规则形状、温暖感',
+        features: ['手绘线条', '不规则形状', '温暖感'],
+        colors: ['#f4a261', '#e9c46a', '#2a9d8f'],
+        prompt:
+          '手绘风格，使用手绘线条、不规则形状、温暖色彩，营造亲切友好的氛围',
+      },
+      {
+        id: 15,
+        name: '商务专业',
+        description: '稳重色彩、清晰层次、信任感',
+        features: ['稳重色彩', '清晰层次', '信任感'],
+        colors: ['#1e3a8a', '#3b82f6', '#f8fafc'],
+        prompt:
+          '商务专业风格，使用稳重色彩、清晰层次、专业排版，营造可信赖的专业形象',
+      },
+      {
+        id: 16,
+        name: 'Material Design',
+        description: '谷歌Material Design风格，卡片阴影、涟漪效果',
+        features: ['卡片阴影', '涟漪效果', '蓝色主题'],
+        colors: ['#1a73e8', '#4285f4', '#e8f0fe'],
+        prompt:
+          '谷歌Material Design风格，使用卡片阴影、涟漪效果、蓝色主题，层次分明，交互丰富，遵循Material Design设计规范',
+      },
+      {
+        id: 17,
+        name: '飞书风格',
+        description: '飞书Lark风格，简洁现代、蓝色圆角',
+        features: ['简洁现代', '蓝色圆角', '卡片式'],
+        colors: ['#3370ff', '#dee0e3', '#f5f6f7'],
+        prompt:
+          '飞书Lark风格，使用简洁现代的设计语言，蓝色主题，圆角卡片，清晰的视觉层次，适合企业协作产品',
+      },
+      {
+        id: 18,
+        name: '字节跳动风格',
+        description: '字节跳动风格，活力橙色、年轻化',
+        features: ['活力橙色', '年轻化', '动效丰富'],
+        colors: ['#f85959', '#ff7b7b', '#fff5f5'],
+        prompt:
+          '字节跳动风格，使用活力橙色主题，年轻化设计，丰富的动效，圆角元素，充满活力和创新感',
+      },
+      {
+        id: 19,
+        name: 'Figma风格',
+        description: 'Figma设计工具风格，暗色紫色、专业工具',
+        features: ['暗色紫色', '专业工具', '界面紧凑'],
+        colors: ['#1c1c1e', '#2c2c2e', '#8b5cf6'],
+        prompt:
+          'Figma风格，使用暗色背景，紫色主题，紧凑的界面布局，专业工具感，适合设计类产品',
+      },
+      {
+        id: 20,
+        name: 'Apple风格',
+        description: '苹果iOS风格，毛玻璃、优雅简洁',
+        features: ['毛玻璃', '优雅简洁', 'SF字体'],
+        colors: ['#f5f5f7', '#ffffff', '#007aff'],
+        prompt:
+          '苹果iOS风格，使用毛玻璃效果、优雅简洁的设计、SF字体，圆角元素，细腻的动画，高端质感',
+      },
+      {
+        id: 21,
+        name: 'Microsoft Fluent',
+        description: '微软Fluent设计，亚克力效果、深度层次',
+        features: ['亚克力效果', '深度层次', '明亮配色'],
+        colors: ['#0078d4', '#00bcf2', '#f3f2f1'],
+        prompt:
+          '微软Fluent设计风格，使用亚克力效果、深度层次、明亮配色，光影效果丰富，现代感强',
+      },
+      {
+        id: 22,
+        name: '淘宝风格',
+        description: '淘宝电商风格，橙色活力、促销感',
+        features: ['橙色活力', '促销感', '信息密集'],
+        colors: ['#ff5000', '#ff9000', '#ffede8'],
+        prompt:
+          '淘宝电商风格，使用橙色主题，充满活力的促销感，信息密集但有序，适合电商产品',
+      },
+      {
+        id: 23,
+        name: '微信风格',
+        description: '微信社交风格，绿色简洁、清新友好',
+        features: ['绿色简洁', '清新友好', '卡片气泡'],
+        colors: ['#07c160', '#95ec69', '#f5f5f5'],
+        prompt:
+          '微信社交风格，使用绿色主题，清新友好的设计，卡片气泡布局，简洁实用，适合社交产品',
+      },
+      {
+        id: 24,
+        name: 'B站风格',
+        description: '哔哩哔哩风格，粉色年轻、二次元',
+        features: ['粉色年轻', '二次元', '活泼有趣'],
+        colors: ['#fb7299', '#23ade5', '#ffffff'],
+        prompt:
+          '哔哩哔哩风格，使用粉色和蓝色主题，年轻化设计，二次元元素，活泼有趣，适合视频社区',
+      },
+      {
+        id: 25,
+        name: 'Notion风格',
+        description: 'Notion文档风格，极简灰白、内容优先',
+        features: ['极简灰白', '内容优先', '模块化'],
+        colors: ['#ffffff', '#f7f7f5', '#37352f'],
+        prompt:
+          'Notion风格，使用极简的灰白配色，内容优先的设计，模块化布局，清晰的信息架构，适合文档和知识管理',
+      },
+      {
+        id: 26,
+        name: 'Linear风格',
+        description: 'Linear任务管理，暗色紫色、现代科技',
+        features: ['暗色紫色', '现代科技', '流畅动效'],
+        colors: ['#5e6ad2', '#8e44ad', '#0a0a0b'],
+        prompt:
+          'Linear风格，使用暗色背景，紫色主题，现代科技感，流畅的动效，适合任务管理和协作工具',
+      },
+      {
+        id: 27,
+        name: 'Vercel风格',
+        description: 'Vercel极简黑白，科技感、开发者友好',
+        features: ['极简黑白', '科技感', '开发者友好'],
+        colors: ['#000000', '#ffffff', '#0070f3'],
+        prompt:
+          'Vercel风格，使用极简的黑白配色，强烈的科技感，开发者友好的设计，清晰的信息展示，适合开发者工具',
+      },
+      {
+        id: 28,
+        name: 'Stripe风格',
+        description: 'Stripe支付风格，蓝紫渐变、专业金融',
+        features: ['蓝紫渐变', '专业金融', '精致细节'],
+        colors: ['#635bff', '#80eeff', '#0a2540'],
+        prompt:
+          'Stripe风格，使用蓝紫渐变，专业金融感，精致的细节设计，值得信赖，适合金融和支付产品',
+      },
+      {
+        id: 29,
+        name: 'Airbnb风格',
+        description: 'Airbnb旅行风格，活力圆润、温暖友好',
+        features: ['活力圆润', '温暖友好', '图片主导'],
+        colors: ['#ff385c', '#008489', '#ffffff'],
+        prompt:
+          'Airbnb风格，使用活力圆润的设计，温暖友好的氛围，图片主导的布局，适合旅行和生活方式产品',
+      },
+      {
+        id: 30,
+        name: 'Spotify风格',
+        description: 'Spotify音乐风格，黑色绿色、沉浸体验',
+        features: ['黑色绿色', '沉浸体验', '圆角卡片'],
+        colors: ['#000000', '#1db954', '#191414'],
+        prompt:
+          'Spotify风格，使用黑色背景，绿色主题，沉浸式的音乐体验，圆角卡片，适合音乐和娱乐产品',
+      },
+    ],
+    toastVisible: false,
+    toastMessage: '',
+  };
+
+  handleCopyPrompt(style) {
+    navigator.clipboard.writeText(style.prompt).then(() => {
+      this.setState({
+        toastVisible: true,
+        toastMessage: `已复制 "${style.name}" 提示词`,
+      });
+      setTimeout(() => {
+        this.setState({
+          toastVisible: false,
+        });
+      }, 2000);
+    });
+  }
+
+  handlePreview(style) {
+    this.setState({
+      previewVisible: true,
+      currentStyle: style,
+    });
+  }
+
+  handleClosePreview() {
+    this.setState({
+      previewVisible: false,
+      currentStyle: null,
+    });
+  }
+
+  renderStylePreview(style) {
+    const styleId = style.id;
+    return (
+      <div className="space-y-6">
+        {/* 现代简约 */}
+        {styleId === 1 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-12">
+              <h3 className="text-3xl font-light text-gray-900 mb-4">
+                现代简约
+              </h3>
+              <p className="text-gray-500 max-w-md mx-auto">
+                少即是多，留白让内容呼吸
+              </p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-gray-900 text-white text-sm tracking-wider hover:bg-gray-700 transition-colors">
+                <span>按钮</span>
+              </button>
+              <button className="px-8 py-3 border-2 border-gray-900 text-gray-900 text-sm tracking-wider hover:bg-gray-900 hover:text-white transition-colors">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 border border-gray-200 focus:outline-none focus:border-gray-900 transition-colors"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 玻璃拟态 */}
+        {styleId === 2 && (
+          <div className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-8 space-y-6">
+            <div className="backdrop-blur-xl bg-white/20 rounded-2xl p-8 border border-white/30 shadow-xl">
+              <h3 className="text-2xl font-bold text-white mb-4">玻璃拟态</h3>
+              <p className="text-white/80 mb-6">毛玻璃效果，半透明质感</p>
+              <div className="space-y-4">
+                <button className="w-full py-3 bg-white/30 text-white rounded-xl hover:bg-white/40 transition-colors backdrop-blur-sm">
+                  <span>按钮</span>
+                </button>
+                <input
+                  type="text"
+                  placeholder="输入框..."
+                  className="w-full px-4 py-3 bg-white/20 text-white placeholder-white/60 rounded-xl border border-white/30 focus:outline-none focus:border-white/50 backdrop-blur-sm"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 新拟态 */}
+        {styleId === 3 && (
+          <div className="bg-[#e0e5ec] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-bold text-gray-700 mb-4">新拟态</h3>
+              <p className="text-gray-500">软阴影，真实触感</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#e0e5ec] text-gray-700 rounded-xl shadow-[8px_8px_16px_#b8bec7,-8px_-8px_16px_#ffffff] hover:shadow-[4px_4px_8px_#b8bec7,-4px_-4px_8px_#ffffff] transition-shadow">
+                <span>凸起按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-[#e0e5ec] text-gray-700 rounded-xl shadow-[inset_4px_4px_8px_#b8bec7,inset_-4px_-4px_8px_#ffffff]">
+                <span>凹陷按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-[#e0e5ec] text-gray-700 rounded-xl shadow-[inset_4px_4px_8px_#b8bec7,inset_-4px_-4px_8px_#ffffff] focus:outline-none"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 扁平化 */}
+        {styleId === 4 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-bold text-gray-900 mb-4">扁平化</h3>
+              <p className="text-gray-600">无阴影，纯色块，简洁明了</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-blue-500 text-white font-bold hover:bg-blue-600 transition-colors">
+                <span>主要按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-green-500 text-white font-bold hover:bg-green-600 transition-colors">
+                <span>成功按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-red-500 text-white font-bold hover:bg-red-600 transition-colors">
+                <span>危险按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-gray-100 border-2 border-gray-300 text-gray-900 font-bold focus:outline-none focus:border-blue-500"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 赛博朋克 */}
+        {styleId === 5 && (
+          <div className="bg-[#0d0221] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3
+                className="text-3xl font-bold text-[#00ff87] mb-4"
+                style={{
+                  textShadow: '0 0 10px #00ff87, 0 0 20px #00ff87',
+                }}
+              >
+                赛博朋克
+              </h3>
+              <p className="text-[#60efff]">霓虹灯，未来感，暗黑背景</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button
+                className="px-8 py-3 bg-transparent border-2 border-[#00ff87] text-[#00ff87] font-bold hover:bg-[#00ff87] hover:text-[#0d0221] transition-all"
+                style={{
+                  boxShadow: '0 0 10px #00ff87',
+                }}
+              >
+                <span>按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-[#60efff] text-[#0d0221] font-bold hover:shadow-[0_0_20px_#60efff] transition-all">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-transparent border-2 border-[#60efff] text-[#60efff] placeholder-[#60efff]/50 focus:outline-none focus:shadow-[0_0_10px_#60efff]"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 暗黑模式 */}
+        {styleId === 6 && (
+          <div className="bg-[#1a1a1a] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-white mb-4">暗黑模式</h3>
+              <p className="text-gray-400">深色背景，高对比度，护眼舒适</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-white text-[#1a1a1a] font-bold hover:bg-gray-200 transition-colors">
+                <span>主要按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-[#2d2d2d] text-white font-bold border border-gray-600 hover:bg-[#3d3d3d] transition-colors">
+                <span>次要按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-[#2d2d2d] text-white placeholder-gray-500 border border-gray-700 focus:outline-none focus:border-white"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 卡片式 */}
+        {styleId === 7 && (
+          <div className="bg-gray-100 p-8 space-y-6">
+            <div className="bg-white rounded-2xl shadow-lg p-6">
+              <h3 className="text-2xl font-bold text-gray-900 mb-4">卡片式</h3>
+              <p className="text-gray-600 mb-6">圆角卡片，阴影层次，模块化</p>
+              <div className="flex space-x-4">
+                <button className="px-6 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-colors shadow-md">
+                  <span>按钮</span>
+                </button>
+                <button className="px-6 py-3 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition-colors">
+                  <span>按钮</span>
+                </button>
+              </div>
+            </div>
+            <div className="bg-white rounded-2xl shadow-md p-6">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 渐变风格 */}
+        {styleId === 8 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 bg-clip-text text-transparent mb-4">
+                渐变风格
+              </h3>
+              <p className="text-gray-600">色彩渐变，流动感，视觉冲击</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-xl hover:opacity-90 transition-opacity shadow-lg">
+                <span>按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-gradient-to-r from-blue-500 to-cyan-500 text-white font-bold rounded-xl hover:opacity-90 transition-opacity shadow-lg">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-gradient-to-r from-purple-50 to-pink-50 border-2 border-purple-200 rounded-xl focus:outline-none focus:border-purple-500"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 极简主义 */}
+        {styleId === 9 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-12">
+              <h3 className="text-2xl font-light text-black mb-4">极简主义</h3>
+              <p className="text-gray-400 text-sm">最少元素，功能优先</p>
+            </div>
+            <div className="flex justify-center space-x-6">
+              <button className="px-6 py-2 bg-black text-white text-sm hover:bg-gray-800 transition-colors">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入"
+                className="w-full px-0 py-2 border-b border-black bg-transparent focus:outline-none"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 复古风格 */}
+        {styleId === 10 && (
+          <div className="bg-[#faedcd] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-serif text-[#d4a373] mb-4">
+                复古风格
+              </h3>
+              <p className="text-[#ccd5ae]">怀旧色彩，温暖氛围</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#d4a373] text-white font-serif hover:bg-[#c49463] transition-colors rounded-lg">
+                <span>按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-[#ccd5ae] text-[#d4a373] font-serif hover:bg-[#bbc59e] transition-colors rounded-lg">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-white/80 border-2 border-[#d4a373] text-[#d4a373] placeholder-[#d4a373]/50 rounded-lg focus:outline-none"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 科技感 */}
+        {styleId === 11 && (
+          <div className="bg-[#001a33] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3
+                className="text-2xl font-bold text-[#00ccff] mb-4"
+                style={{
+                  textShadow: '0 0 10px #00ccff',
+                }}
+              >
+                科技感
+              </h3>
+              <p className="text-[#0066cc]">蓝色调，线条感，专业科技</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button
+                className="px-8 py-3 bg-[#0066cc] text-white font-bold hover:bg-[#0088ff] transition-colors border border-[#00ccff]"
+                style={{
+                  boxShadow: '0 0 15px rgba(0, 204, 255, 0.3)',
+                }}
+              >
+                <span>按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-transparent border-2 border-[#00ccff] text-[#00ccff] font-bold hover:bg-[#00ccff]/10 transition-colors">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-[#003366] text-[#00ccff] placeholder-[#00ccff]/50 border border-[#0066cc] focus:outline-none focus:border-[#00ccff]"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 自然风格 */}
+        {styleId === 12 && (
+          <div className="bg-[#d8f3dc] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-[#2d6a4f] mb-4">
+                自然风格
+              </h3>
+              <p className="text-[#95d5b2]">自然色彩，有机形状</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#2d6a4f] text-white font-bold hover:bg-[#1b4332] transition-colors rounded-full">
+                <span>按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-[#95d5b2] text-[#2d6a4f] font-bold hover:bg-[#74c69d] transition-colors rounded-full">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-white/70 border-2 border-[#95d5b2] text-[#2d6a4f] placeholder-[#2d6a4f]/50 rounded-full focus:outline-none focus:border-[#2d6a4f]"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 波普艺术 */}
+        {styleId === 13 && (
+          <div className="bg-[#ffd93d] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3
+                className="text-4xl font-black text-[#ff6b6b] mb-4"
+                style={{
+                  textShadow: '3px 3px 0 #6bcb77',
+                }}
+              >
+                波普艺术
+              </h3>
+              <p className="text-[#6bcb77] font-bold">大胆色彩，重复图案</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#ff6b6b] text-white font-black hover:bg-[#ff5252] transition-colors border-4 border-black shadow-[4px_4px_0_#000]">
+                <span>按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-[#6bcb77] text-white font-black hover:bg-[#5cb86c] transition-colors border-4 border-black shadow-[4px_4px_0_#000]">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-white border-4 border-black text-gray-900 font-bold focus:outline-none shadow-[4px_4px_0_#000]"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 手绘风格 */}
+        {styleId === 14 && (
+          <div className="bg-[#fef9f3] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3
+                className="text-3xl text-[#f4a261] mb-4"
+                style={{
+                  fontFamily: 'cursive',
+                }}
+              >
+                手绘风格
+              </h3>
+              <p className="text-[#e9c46a]">手绘线条，温暖亲切</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button
+                className="px-8 py-3 bg-[#f4a261] text-white font-bold hover:bg-[#e76f51] transition-colors rounded-2xl"
+                style={{
+                  border: '2px solid #2a9d8f',
+                  transform: 'rotate(-1deg)',
+                }}
+              >
+                <span>按钮</span>
+              </button>
+              <button
+                className="px-8 py-3 bg-[#e9c46a] text-[#2a9d8f] font-bold hover:bg-[#d4a373] transition-colors rounded-2xl"
+                style={{
+                  border: '2px solid #f4a261',
+                  transform: 'rotate(1deg)',
+                }}
+              >
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-white border-2 border-dashed border-[#f4a261] text-[#2a9d8f] placeholder-[#f4a261]/50 rounded-2xl focus:outline-none focus:border-[#2a9d8f]"
+                style={{
+                  transform: 'rotate(-0.5deg)',
+                }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* 商务专业 */}
+        {styleId === 15 && (
+          <div className="bg-[#f8fafc] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-bold text-[#1e3a8a] mb-4">
+                商务专业
+              </h3>
+              <p className="text-gray-600">稳重色彩，清晰层次</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#1e3a8a] text-white font-bold hover:bg-[#1e40af] transition-colors">
+                <span>主要按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-[#1e3a8a] font-bold border-2 border-[#1e3a8a] hover:bg-[#1e3a8a] hover:text-white transition-colors">
+                <span>次要按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-white border-2 border-gray-300 text-gray-900 focus:outline-none focus:border-[#3b82f6]"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Material Design */}
+        {styleId === 16 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-medium text-gray-800 mb-4">
+                Material Design
+              </h3>
+              <p className="text-gray-500">卡片阴影，涟漪效果，蓝色主题</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#1a73e8] text-white font-medium rounded shadow-md hover:shadow-lg hover:bg-[#1557b0] transition-all">
+                <span>主要按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-transparent text-[#1a73e8] font-medium rounded hover:bg-[#e8f0fe] transition-colors">
+                <span>文本按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto bg-white rounded-lg shadow-md p-4">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 border-b-2 border-gray-300 text-gray-800 focus:outline-none focus:border-[#1a73e8]"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
+              <div className="flex items-center space-x-4">
+                <div className="w-12 h-12 bg-[#e8f0fe] rounded-full flex items-center justify-center">
+                  <span className="text-[#1a73e8] text-xl">👤</span>
+                </div>
+                <div>
+                  <h4 className="font-medium text-gray-800">用户卡片</h4>
+                  <p className="text-sm text-gray-500">卡片阴影示例</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 飞书风格 */}
+        {styleId === 17 && (
+          <div className="bg-[#f5f6f7] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-semibold text-gray-900 mb-4">
+                飞书 Lark
+              </h3>
+              <p className="text-gray-500">简洁现代，蓝色圆角，卡片式</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#3370ff] text-white font-medium rounded-lg hover:bg-[#2b5acc] transition-colors">
+                <span>主要按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-gray-700 font-medium rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
+                <span>次要按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto bg-white rounded-xl shadow-sm p-4">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-gray-50 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#3370ff]"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-white rounded-xl shadow-sm p-5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="w-10 h-10 bg-[#3370ff] rounded-lg flex items-center justify-center text-white font-medium">
+                    <span>L</span>
+                  </div>
+                  <div>
+                    <h4 className="font-medium text-gray-900">飞书文档</h4>
+                    <p className="text-sm text-gray-500">协作编辑中</p>
+                  </div>
+                </div>
+                <span className="px-3 py-1 bg-[#e8f3ff] text-[#3370ff] text-xs rounded-full">
+                  进行中
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 字节跳动风格 */}
+        {styleId === 18 && (
+          <div className="bg-[#fff5f5] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-[#f85959] mb-4">
+                字节跳动
+              </h3>
+              <p className="text-gray-600">活力橙色，年轻化，动效丰富</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#f85959] text-white font-bold rounded-full hover:bg-[#e04a4a] transition-all transform hover:scale-105">
+                <span>主要按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-[#f85959] font-bold rounded-full border-2 border-[#f85959] hover:bg-[#f85959] hover:text-white transition-all">
+                <span>次要按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-5 py-4 bg-white rounded-full text-gray-900 focus:outline-none focus:ring-4 focus:ring-[#f85959]/20"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-white rounded-2xl shadow-lg p-5">
+              <div className="flex items-center space-x-4">
+                <div className="w-14 h-14 bg-gradient-to-br from-[#f85959] to-[#ff7b7b] rounded-2xl flex items-center justify-center text-white text-2xl">
+                  <span>🚀</span>
+                </div>
+                <div>
+                  <h4 className="font-bold text-gray-900">今日头条</h4>
+                  <p className="text-sm text-gray-500">个性化推荐</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Figma风格 */}
+        {styleId === 19 && (
+          <div className="bg-[#1c1c1e] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-bold text-white mb-4">Figma</h3>
+              <p className="text-gray-400">暗色紫色，专业工具，界面紧凑</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-6 py-2 bg-[#8b5cf6] text-white font-medium rounded hover:bg-[#7c3aed] transition-colors">
+                <span>按钮</span>
+              </button>
+              <button className="px-6 py-2 bg-[#2c2c2e] text-gray-300 font-medium rounded hover:bg-[#3c3c3e] transition-colors">
+                <span>按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-2 bg-[#2c2c2e] text-white border border-gray-600 rounded focus:outline-none focus:border-[#8b5cf6]"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-[#2c2c2e] rounded-lg p-4 space-y-3">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-400">图层</span>
+                <span className="text-gray-500">Frame 1</span>
+              </div>
+              <div className="h-8 bg-[#3c3c3e] rounded flex items-center px-3">
+                <span className="text-gray-300 text-sm">Rectangle</span>
+              </div>
+              <div className="h-8 bg-[#3c3c3e] rounded flex items-center px-3">
+                <span className="text-gray-300 text-sm">Text</span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Apple风格 */}
+        {styleId === 20 && (
+          <div className="bg-[#f5f5f7] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-semibold text-gray-900 mb-4">
+                Apple iOS
+              </h3>
+              <p className="text-gray-500">毛玻璃，优雅简洁，SF字体</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#007aff] text-white font-medium rounded-xl hover:bg-[#0056b3] transition-colors">
+                <span>主要按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-[#007aff] font-medium rounded-xl hover:bg-gray-100 transition-colors">
+                <span>次要按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-white rounded-xl text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#007aff]/50"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-white/70 backdrop-blur-xl rounded-2xl p-5 shadow-sm border border-white/50">
+              <div className="flex items-center space-x-4">
+                <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center text-white text-xl">
+                  <span>📱</span>
+                </div>
+                <div>
+                  <h4 className="font-semibold text-gray-900">iPhone 15</h4>
+                  <p className="text-sm text-gray-500">最新款</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Microsoft Fluent */}
+        {styleId === 21 && (
+          <div className="bg-[#f3f2f1] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-semibold text-gray-900 mb-4">
+                Microsoft Fluent
+              </h3>
+              <p className="text-gray-600">亚克力效果，深度层次，明亮配色</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#0078d4] text-white font-medium rounded hover:bg-[#106ebe] transition-colors">
+                <span>主要按钮</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-gray-700 font-medium rounded hover:bg-gray-100 transition-colors">
+                <span>次要按钮</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入框..."
+                className="w-full px-4 py-3 bg-white border border-gray-300 rounded text-gray-900 focus:outline-none focus:border-[#0078d4]"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-white/80 backdrop-blur rounded-lg shadow-lg p-5">
+              <div className="flex items-center space-x-4">
+                <div className="w-12 h-12 bg-[#0078d4] rounded-lg flex items-center justify-center text-white text-xl">
+                  <span>🪟</span>
+                </div>
+                <div>
+                  <h4 className="font-semibold text-gray-900">Windows 11</h4>
+                  <p className="text-sm text-gray-600">现代操作系统</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 淘宝风格 */}
+        {styleId === 22 && (
+          <div className="bg-[#ffede8] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-[#ff5000] mb-4">淘宝</h3>
+              <p className="text-gray-600">橙色活力，促销感，信息密集</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-gradient-to-r from-[#ff5000] to-[#ff9000] text-white font-bold rounded-full hover:shadow-lg transition-all">
+                <span>立即购买</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-[#ff5000] font-bold rounded-full border-2 border-[#ff5000] hover:bg-[#ff5000] hover:text-white transition-all">
+                <span>加入购物车</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="搜索商品..."
+                className="w-full px-5 py-3 bg-white rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#ff5000]"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-white rounded-xl shadow-md p-4">
+              <div className="flex space-x-3">
+                <div className="w-20 h-20 bg-gradient-to-br from-[#ff5000] to-[#ff9000] rounded-lg flex items-center justify-center text-white text-2xl">
+                  <span>🛍️</span>
+                </div>
+                <div className="flex-1">
+                  <h4 className="font-bold text-gray-900 mb-1">爆款商品</h4>
+                  <p className="text-[#ff5000] font-bold text-lg">¥99.00</p>
+                  <p className="text-gray-400 text-sm line-through">¥199.00</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 微信风格 */}
+        {styleId === 23 && (
+          <div className="bg-[#f5f5f5] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-medium text-gray-900 mb-4">微信</h3>
+              <p className="text-gray-500">绿色简洁，清新友好，卡片气泡</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#07c160] text-white font-medium rounded-lg hover:bg-[#06ad56] transition-colors">
+                <span>发送</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-gray-700 font-medium rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
+                <span>取消</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入消息..."
+                className="w-full px-4 py-3 bg-white rounded-lg text-gray-900 focus:outline-none focus:border-[#07c160]"
+              />
+            </div>
+            <div className="max-w-md mx-auto space-y-3">
+              <div className="flex justify-end">
+                <div className="bg-[#95ec69] rounded-2xl rounded-tr-sm px-4 py-2 max-w-xs">
+                  <p className="text-gray-900">你好！这是微信风格</p>
+                </div>
+              </div>
+              <div className="flex justify-start">
+                <div className="bg-white rounded-2xl rounded-tl-sm px-4 py-2 max-w-xs shadow-sm">
+                  <p className="text-gray-900">绿色气泡，清新友好</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* B站风格 */}
+        {styleId === 24 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-[#fb7299] mb-4">
+                哔哩哔哩
+              </h3>
+              <p className="text-gray-500">粉色年轻，二次元，活泼有趣</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#fb7299] text-white font-bold rounded-full hover:bg-[#e05e87] transition-colors">
+                <span>关注</span>
+              </button>
+              <button className="px-8 py-3 bg-[#23ade5] text-white font-bold rounded-full hover:bg-[#1c8bb8] transition-colors">
+                <span>投币</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="搜索视频..."
+                className="w-full px-5 py-3 bg-gray-100 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#fb7299]"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-gray-50 rounded-xl p-4">
+              <div className="flex space-x-4">
+                <div className="w-32 h-20 bg-gradient-to-br from-[#fb7299] to-[#23ade5] rounded-lg flex items-center justify-center text-white text-3xl">
+                  <span>📺</span>
+                </div>
+                <div className="flex-1">
+                  <h4 className="font-bold text-gray-900 mb-1 line-clamp-2">
+                    【教程】如何设计好看的UI界面
+                  </h4>
+                  <p className="text-gray-500 text-sm">UP主 · 10万播放</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Notion风格 */}
+        {styleId === 25 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-semibold text-[#37352f] mb-4">
+                Notion
+              </h3>
+              <p className="text-gray-500">极简灰白，内容优先，模块化</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-6 py-2 bg-[#37352f] text-white font-medium rounded hover:bg-gray-800 transition-colors">
+                <span>+ 新建页面</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="输入标题..."
+                className="w-full px-0 py-2 border-b border-gray-200 bg-transparent text-gray-900 focus:outline-none focus:border-[#37352f]"
+              />
+            </div>
+            <div className="max-w-md mx-auto space-y-4">
+              <div className="flex items-center space-x-2 text-gray-700">
+                <span className="text-gray-400">•</span>
+                <span>极简的文档编辑体验</span>
+              </div>
+              <div className="flex items-center space-x-2 text-gray-700">
+                <span className="text-gray-400">•</span>
+                <span>模块化的内容组织</span>
+              </div>
+              <div className="flex items-center space-x-2 text-gray-700">
+                <span className="text-gray-400">•</span>
+                <span>清晰的信息架构</span>
+              </div>
+              <div className="h-px bg-gray-200 my-4"></div>
+              <div className="bg-[#f7f7f5] rounded-lg p-4">
+                <p className="text-gray-500 text-sm">待办事项</p>
+                <div className="flex items-center space-x-2 mt-2">
+                  <input type="checkbox" className="w-4 h-4" />
+                  <span className="text-gray-700">完成Notion风格设计</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Linear风格 */}
+        {styleId === 26 && (
+          <div className="bg-[#0a0a0b] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-2xl font-bold text-white mb-4">Linear</h3>
+              <p className="text-gray-400">暗色紫色，现代科技，流畅动效</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-6 py-2 bg-[#5e6ad2] text-white font-medium rounded hover:bg-[#4e5ac2] transition-colors">
+                <span>创建任务</span>
+              </button>
+              <button className="px-6 py-2 bg-[#1c1c1e] text-gray-300 font-medium rounded hover:bg-[#2c2c2e] transition-colors">
+                <span>筛选</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="搜索任务..."
+                className="w-full px-4 py-2 bg-[#1c1c1e] text-white border border-gray-700 rounded focus:outline-none focus:border-[#5e6ad2]"
+              />
+            </div>
+            <div className="max-w-md mx-auto space-y-2">
+              <div className="bg-[#1c1c1e] rounded-lg p-4 flex items-center justify-between hover:bg-[#2c2c2e] transition-colors cursor-pointer">
+                <div className="flex items-center space-x-3">
+                  <div className="w-5 h-5 rounded border-2 border-[#5e6ad2]"></div>
+                  <span className="text-white">设计新的登录页面</span>
+                </div>
+                <span className="px-2 py-1 bg-[#5e6ad2]/20 text-[#5e6ad2] text-xs rounded">
+                  进行中
+                </span>
+              </div>
+              <div className="bg-[#1c1c1e] rounded-lg p-4 flex items-center justify-between hover:bg-[#2c2c2e] transition-colors cursor-pointer">
+                <div className="flex items-center space-x-3">
+                  <div className="w-5 h-5 rounded border-2 border-gray-600"></div>
+                  <span className="text-gray-400">优化性能</span>
+                </div>
+                <span className="px-2 py-1 bg-gray-700 text-gray-400 text-xs rounded">
+                  待处理
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Vercel风格 */}
+        {styleId === 27 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-black mb-4">Vercel</h3>
+              <p className="text-gray-500">极简黑白，科技感，开发者友好</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-black text-white font-medium rounded hover:bg-gray-800 transition-colors">
+                <span>Deploy</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-black font-medium rounded border border-gray-300 hover:bg-gray-50 transition-colors">
+                <span>Documentation</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="Search..."
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded text-gray-900 focus:outline-none focus:border-black"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-gray-50 rounded-lg p-5">
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-black font-medium">project-name</span>
+                <span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">
+                  Ready
+                </span>
+              </div>
+              <div className="text-sm text-gray-500 space-y-1">
+                <div>• Framework: Next.js</div>
+                <div>• Region: Hong Kong</div>
+                <div>• Last Deployed: 2 hours ago</div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Stripe风格 */}
+        {styleId === 28 && (
+          <div className="bg-[#0a2540] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-white mb-4 bg-gradient-to-r from-[#635bff] to-[#80eeff] bg-clip-text text-transparent">
+                Stripe
+              </h3>
+              <p className="text-gray-400">蓝紫渐变，专业金融，精致细节</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-gradient-to-r from-[#635bff] to-[#7c3aed] text-white font-medium rounded hover:opacity-90 transition-opacity">
+                <span>Start now</span>
+              </button>
+              <button className="px-8 py-3 bg-transparent text-white font-medium rounded border border-white/30 hover:bg-white/10 transition-colors">
+                <span>Contact sales</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="Email address"
+                className="w-full px-4 py-3 bg-white/10 text-white border border-white/20 rounded focus:outline-none focus:border-[#635bff]"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-gradient-to-br from-[#635bff]/20 to-[#80eeff]/20 rounded-xl p-5 border border-white/10">
+              <div className="flex items-center space-x-4">
+                <div className="w-12 h-12 bg-gradient-to-br from-[#635bff] to-[#80eeff] rounded-xl flex items-center justify-center text-white text-xl">
+                  <span>💳</span>
+                </div>
+                <div>
+                  <h4 className="font-semibold text-white">Payments</h4>
+                  <p className="text-sm text-gray-400">
+                    Accept payments online
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Airbnb风格 */}
+        {styleId === 29 && (
+          <div className="bg-white p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-[#ff385c] mb-4">Airbnb</h3>
+              <p className="text-gray-500">活力圆润，温暖友好，图片主导</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#ff385c] text-white font-bold rounded-lg hover:bg-[#d9324e] transition-colors">
+                <span>预订</span>
+              </button>
+              <button className="px-8 py-3 bg-white text-[#ff385c] font-bold rounded-lg border border-gray-300 hover:border-gray-400 transition-colors">
+                <span>联系房东</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="搜索目的地..."
+                className="w-full px-5 py-3 bg-white border border-gray-300 rounded-xl text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#ff385c]"
+              />
+            </div>
+            <div className="max-w-md mx-auto rounded-2xl overflow-hidden shadow-lg">
+              <div className="h-32 bg-gradient-to-br from-[#ff385c] to-[#008489] flex items-center justify-center text-white text-4xl">
+                <span>🏠</span>
+              </div>
+              <div className="p-4">
+                <h4 className="font-bold text-gray-900 mb-1">温馨公寓</h4>
+                <p className="text-gray-500 text-sm mb-2">上海市 · 整套公寓</p>
+                <p className="text-[#ff385c] font-bold">¥458 / 晚</p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Spotify风格 */}
+        {styleId === 30 && (
+          <div className="bg-[#191414] p-8 space-y-6">
+            <div className="text-center py-8">
+              <h3 className="text-3xl font-bold text-white mb-4">Spotify</h3>
+              <p className="text-gray-400">黑色绿色，沉浸体验，圆角卡片</p>
+            </div>
+            <div className="flex justify-center space-x-4">
+              <button className="px-8 py-3 bg-[#1db954] text-white font-bold rounded-full hover:bg-[#1ed760] transition-colors">
+                <span>播放</span>
+              </button>
+              <button className="px-8 py-3 bg-transparent text-white font-bold rounded-full border border-gray-600 hover:border-white transition-colors">
+                <span>收藏</span>
+              </button>
+            </div>
+            <div className="max-w-md mx-auto">
+              <input
+                type="text"
+                placeholder="搜索音乐..."
+                className="w-full px-4 py-3 bg-[#282828] text-white border border-transparent rounded focus:outline-none focus:border-[#1db954]"
+              />
+            </div>
+            <div className="max-w-md mx-auto bg-[#282828] rounded-lg p-4 hover:bg-[#333333] transition-colors cursor-pointer">
+              <div className="flex items-center space-x-4">
+                <div className="w-16 h-16 bg-gradient-to-br from-[#1db954] to-[#1ed760] rounded-lg flex items-center justify-center text-white text-2xl">
+                  <span>🎵</span>
+                </div>
+                <div className="flex-1">
+                  <h4 className="font-bold text-white">精选歌单</h4>
+                  <p className="text-gray-400 text-sm">今日推荐 · 50首歌曲</p>
+                </div>
+                <button className="w-10 h-10 bg-[#1db954] rounded-full flex items-center justify-center text-white">
+                  <span>▶</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Page className="bg-gradient-to-br from-[#f8fafc] to-[#f1f5f9] min-h-screen p-[24px]">
+        <View className="ml-[auto] mr-[auto] mb-[32px]">
+          <View className="">
+            <h1 className="text-4xl font-bold text-[#111827] mb-[12px]">
+              UI风格选择器
+            </h1>
+            <p className="text-[#4b5563] text-lg">
+              30种UI风格，包括知名产品风格，点击卡片预览效果并复制提示词
+            </p>
+          </View>
+        </View>
+        <View className="ml-[auto] mr-[auto]">
+          <View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {this.state.styles.map((style, index) => (
+              <View
+                key={style.id}
+                onClick={() => this.handlePreview(style)}
+                className="shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group bg-[#ffffff] rounded-2xl cursor-pointer overflow-hidden"
+              >
+                <View className="h-[12px] flex">
+                  {style.colors.map((color, index) => (
+                    <View
+                      key={index}
+                      className="flex-1"
+                      style={{ backgroundColor: color }}
+                    />
+                  ))}
+                </View>
+                <View className="p-[24px]">
+                  <h3 className="text-xl text-gray-900 group-hover:text-blue-600 transition-colors font-bold mb-[8px]">
+                    <Text>{style.name}</Text>
+                  </h3>
+                  <p className="text-[#4b5563] mb-[16px] text-sm [lineHeight:1.625]">
+                    <Text>{style.description}</Text>
+                  </p>
+                  <View className="gap-2 flex flex-wrap mb-[16px]">
+                    {style.features.map((feature, index) => (
+                      <Text
+                        key={index}
+                        className="pl-[12px] pr-[12px] pt-[4px] pb-[4px] bg-[#f3f4f6] text-[#374151] text-xs rounded-full"
+                      >
+                        {feature}
+                      </Text>
+                    ))}
+                  </View>
+                  <View className="border-gray-200 border-solid bg-[var(--gray-50)] rounded-lg p-[12px] border border-solid">
+                    <p className="line-clamp-2 text-xs text-[#6b7280]">
+                      <Text>{style.prompt}</Text>
+                    </p>
+                  </View>
+                  <View className="text-gray-400 text-sm group-hover:text-blue-500 transition-colors mt-[16px] flex items-center justify-center">
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      className="w-[16px] h-[16px] mr-[4px]"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      />
+                    </svg>
+                    <Text>点击预览效果</Text>
+                  </View>
+                </View>
+              </View>
+            ))}
+          </View>
+        </View>
+        <View className="ml-[auto] mr-[auto] mt-[48px]">
+          <p className="text-[#6b7280] text-sm">
+            <Text>共{this.state.styles?.length || 0}种UI风格可供选择</Text>
+          </p>
+        </View>
+        {!!this.state.previewVisible && this.state.currentStyle && (
+          <View className="inset-0 fixed bg-[var(--opacity-50)] flex items-center justify-center z-50 p-[16px]">
+            <View className="bg-[#ffffff] rounded-2xl shadow-[0 25px 50px -12px rgb(0 0 0 / 0.25)] w-full overflow-hidden">
+              <View className="border-gray-200 p-[24px] border-b-[1px] border-b-solid flex items-center justify-between">
+                <View>
+                  <h2 className="text-2xl font-bold text-[#111827]">
+                    <Text>{this.state.currentStyle.name}</Text>
+                  </h2>
+                  <p className="text-[#4b5563] mt-[4px]">
+                    <Text>{this.state.currentStyle.description}</Text>
+                  </p>
+                </View>
+                <button
+                  onClick={() => this.handleClosePreview()}
+                  className="text-gray-400 hover:text-gray-600 transition-colors"
+                >
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    className="w-[24px] h-[24px]"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </View>
+              <View className="p-[24px] overflow-y-auto">
+                <Text>{this.renderStylePreview(this.state.currentStyle)}</Text>
+              </View>
+              <View className="border-gray-200 p-[24px] border-t border-t-solid bg-[var(--gray-50)] flex items-center justify-between">
+                <View className="space-x-2 flex items-center">
+                  {this.state.currentStyle.colors.map((color, index) => (
+                    <View
+                      key={index}
+                      className="w-8 h-8 rounded-full border-2 border-white shadow"
+                      style={{ backgroundColor: color }}
+                      title={color}
+                    />
+                  ))}
+                </View>
+                <button
+                  onClick={() => this.handleCopyPrompt(this.state.currentStyle)}
+                  className="bg-blue-500 hover:bg-blue-600 transition-colors space-x-2 pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#ffffff] rounded-lg flex items-center"
+                >
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    className="w-[20px] h-[20px]"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                    />
+                  </svg>
+                  <Text>复制提示词</Text>
+                </button>
+              </View>
+            </View>
+          </View>
+        )}
+        {!!this.state.toastVisible && (
+          <View className="left-1/2 transform -translate-x-1/2 space-x-2 animate-bounce fixed bottom-[32px] bg-[#111827] text-[#ffffff] pl-[24px] pr-[24px] pt-[12px] pb-[12px] rounded-lg shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)] flex items-center">
+            <svg
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              className="w-[20px] h-[20px]"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+            <Text className="text-sm font-medium">
+              {this.state.toastMessage}
+            </Text>
+          </View>
+        )}
+      </Page>
+    );
+  }
+}
+
+export default Document;