Spaces:

duqing026
/

aura-ui-prototype

Sleeping

App Files Files Community

Trae Assistant commited on Feb 3

Commit

7e13234

0 Parent(s):

Update: Enhance UI, add upload feature, localize content

Browse files

Files changed (5) hide show

Dockerfile +17 -0
README.md +21 -0
app.py +44 -0
requirements.txt +2 -0
templates/index.html +561 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,17 @@

+FROM python:3.11-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+# Create a non-root user for security
+RUN useradd -m -u 1000 user
+USER user
+ENV FLASK_APP=app.py
+ENV PORT=7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md ADDED Viewed

	@@ -0,0 +1,21 @@

+---
+title: Aura UI Component Library
+emoji: 🎨
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+pinned: false
+short_description: 现代 UI 组件库展示 (Modern UI Library Showcase)
+---
+# Aura UI Prototype
+这是一个模拟现代 UI 组件库（如 shadcn/ui）的雏形展示项目。
+使用 Flask + Vue 3 + Tailwind CSS 构建。
+## 功能
+- 现代化的深色/科技感 UI 设计
+- 组件展示与代码预览
+- 响应式侧边栏导航
+- 包含 Button, Card, Input, Badge 等基础组件演示

app.py ADDED Viewed

	@@ -0,0 +1,44 @@

+import os
+from flask import Flask, render_template, request, jsonify
+app = Flask(__name__)
+# Configure upload folder and max size (e.g., 100MB)
+UPLOAD_FOLDER = 'uploads'
+if not os.path.exists(UPLOAD_FOLDER):
+    os.makedirs(UPLOAD_FOLDER)
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024  # 100MB limit
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({'error': '没有文件部分'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': '未选择文件'}), 400
+    if file:
+        filename = file.filename
+        # Ensure safe filename if needed, but for now just save it
+        # In a real app, use werkzeug.utils.secure_filename
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        try:
+            file.save(file_path)
+            return jsonify({
+                'message': '文件上传成功',
+                'filename': filename,
+                'size': os.path.getsize(file_path)
+            }), 200
+        except Exception as e:
+            return jsonify({'error': str(e)}), 500
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,561 @@

+<!DOCTYPE html>
+<html lang="zh-CN" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aura UI - 现代组件库展示</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        border: "hsl(var(--border))",
+                        input: "hsl(var(--input))",
+                        ring: "hsl(var(--ring))",
+                        background: "hsl(var(--background))",
+                        foreground: "hsl(var(--foreground))",
+                        primary: {
+                            DEFAULT: "hsl(var(--primary))",
+                            foreground: "hsl(var(--primary-foreground))",
+                        },
+                        secondary: {
+                            DEFAULT: "hsl(var(--secondary))",
+                            foreground: "hsl(var(--secondary-foreground))",
+                        },
+                        destructive: {
+                            DEFAULT: "hsl(var(--destructive))",
+                            foreground: "hsl(var(--destructive-foreground))",
+                        },
+                        muted: {
+                            DEFAULT: "hsl(var(--muted))",
+                            foreground: "hsl(var(--muted-foreground))",
+                        },
+                        accent: {
+                            DEFAULT: "hsl(var(--accent))",
+                            foreground: "hsl(var(--accent-foreground))",
+                        },
+                        popover: {
+                            DEFAULT: "hsl(var(--popover))",
+                            foreground: "hsl(var(--popover-foreground))",
+                        },
+                        card: {
+                            DEFAULT: "hsl(var(--card))",
+                            foreground: "hsl(var(--card-foreground))",
+                        },
+                    },
+                    borderRadius: {
+                        lg: "var(--radius)",
+                        md: "calc(var(--radius) - 2px)",
+                        sm: "calc(var(--radius) - 4px)",
+                    },
+                }
+            }
+        }
+    </script>
+    <style>
+        @layer base {
+            :root {
+                --background: 240 10% 3.9%;
+                --foreground: 0 0% 98%;
+                --card: 240 10% 3.9%;
+                --card-foreground: 0 0% 98%;
+                --popover: 240 10% 3.9%;
+                --popover-foreground: 0 0% 98%;
+                --primary: 0 0% 98%;
+                --primary-foreground: 240 5.9% 10%;
+                --secondary: 240 3.7% 15.9%;
+                --secondary-foreground: 0 0% 98%;
+                --muted: 240 3.7% 15.9%;
+                --muted-foreground: 240 5% 64.9%;
+                --accent: 240 3.7% 15.9%;
+                --accent-foreground: 0 0% 98%;
+                --destructive: 0 62.8% 30.6%;
+                --destructive-foreground: 0 0% 98%;
+                --border: 240 3.7% 15.9%;
+                --input: 240 3.7% 15.9%;
+                --ring: 240 4.9% 83.9%;
+                --radius: 0.5rem;
+            }
+        }
+        body {
+            @apply bg-background text-foreground;
+            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            -webkit-font-smoothing: antialiased;
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            @apply bg-muted rounded-full;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            @apply bg-muted-foreground/50;
+        }
+        .glass {
+            background: rgba(24, 24, 27, 0.6);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+        }
+    </style>
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+</head>
+<body>
+    <div id="app" class="flex flex-col h-screen overflow-hidden">
+        <!-- Top Navigation -->
+        <header class="h-14 border-b border-border glass flex items-center px-6 sticky top-0 z-50">
+            <div class="flex items-center gap-2 mr-8">
+                <div class="w-6 h-6 bg-primary rounded-md flex items-center justify-center text-primary-foreground font-bold text-xs">A</div>
+                <span class="font-bold text-lg tracking-tight">Aura UI</span>
+            </div>
+            <nav class="flex items-center gap-6 text-sm font-medium text-muted-foreground">
+                <a href="#" class="text-foreground transition-colors hover:text-foreground">文档</a>
+                <a href="#" class="transition-colors hover:text-foreground">组件</a>
+                <a href="#" class="transition-colors hover:text-foreground">博客</a>
+                <a href="#" class="transition-colors hover:text-foreground">展示</a>
+            </nav>
+            <div class="ml-auto flex items-center gap-4">
+                <div class="relative w-64 hidden md:block">
+                    <i class="ph ph-magnifying-glass absolute left-2 top-2.5 text-muted-foreground"></i>
+                    <input type="text" placeholder="搜索组件..." class="w-full h-9 pl-8 pr-4 rounded-md bg-secondary/50 border border-transparent focus:border-ring focus:outline-none text-sm text-foreground placeholder:text-muted-foreground transition-all">
+                    <div class="absolute right-2 top-2 flex items-center gap-1">
+                        <kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+                            <span class="text-xs">⌘</span>K
+                        </kbd>
+                    </div>
+                </div>
+                <a href="https://github.com" target="_blank" class="text-muted-foreground hover:text-foreground transition-colors">
+                    <i class="ph ph-github-logo text-xl"></i>
+                </a>
+            </div>
+        </header>
+        <div class="flex flex-1 overflow-hidden">
+            <!-- Sidebar -->
+            <aside class="w-64 border-r border-border bg-background/50 overflow-y-auto hidden md:block">
+                <div class="p-6 space-y-8">
+                    <div v-for="(group, groupName) in menuItems" :key="groupName">
+                        <h4 class="mb-2 text-sm font-semibold tracking-tight text-foreground">${ groupName }</h4>
+                        <div class="grid grid-flow-row auto-rows-max text-sm">
+                            <a
+                                v-for="item in group"
+                                :key="item.id"
+                                @click.prevent="selectComponent(item.id)"
+                                href="#"
+                                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1.5 hover:underline text-muted-foreground hover:text-foreground"
+                                :class="{ 'font-medium text-foreground bg-accent/50': currentComponent === item.id }"
+                            >
+                                ${ item.name }
+                                <span v-if="item.new" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline font-bold">New</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+            <!-- Main Content -->
+            <main class="flex-1 overflow-y-auto p-8 xl:px-12">
+                <div class="max-w-4xl mx-auto space-y-8 pb-12">
+                    <!-- Breadcrumb -->
+                    <div class="flex items-center space-x-2 text-sm text-muted-foreground">
+                        <span>组件</span>
+                        <i class="ph ph-caret-right text-xs"></i>
+                        <span class="text-foreground font-medium">${ activeComponent.name }</span>
+                    </div>
+                    <!-- Header -->
+                    <div class="space-y-2">
+                        <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+                            ${ activeComponent.name }
+                        </h1>
+                        <p class="text-lg text-muted-foreground">
+                            ${ activeComponent.description }
+                        </p>
+                    </div>
+                    <!-- Tabs -->
+                    <div class="w-full">
+                        <div class="flex items-center w-full border-b border-border mb-4">
+                            <button
+                                @click="activeTab = 'preview'"
+                                class="relative h-10 px-4 py-2 -mb-px text-sm font-medium transition-colors border-b-2"
+                                :class="activeTab === 'preview' ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'"
+                            >
+                                预览
+                            </button>
+                            <button
+                                @click="activeTab = 'code'"
+                                class="relative h-10 px-4 py-2 -mb-px text-sm font-medium transition-colors border-b-2"
+                                :class="activeTab === 'code' ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'"
+                            >
+                                代码
+                            </button>
+                        </div>
+                        <!-- Preview Tab -->
+                        <div v-if="activeTab === 'preview'" class="relative rounded-xl border border-border bg-background/50 shadow-sm min-h-[350px] flex items-center justify-center p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+                            <!-- Dynamic Component Rendering -->
+                            <div v-html="activeComponent.html" class="w-full max-w-md mx-auto flex flex-col items-center gap-4"></div>
+                        </div>
+                        <!-- Code Tab -->
+                        <div v-if="activeTab === 'code'" class="relative rounded-xl border border-border bg-[#09090b] shadow-sm overflow-hidden">
+                            <div class="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/20">
+                                <span class="text-xs text-muted-foreground">index.html</span>
+                                <button class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1">
+                                    <i class="ph ph-copy"></i> 复制
+                                </button>
+                            </div>
+                            <div class="p-4 overflow-x-auto">
+                                <pre class="text-sm font-mono text-muted-foreground leading-relaxed"><code v-text="activeComponent.code"></code></pre>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Installation -->
+                    <div class="space-y-4 pt-8">
+                        <h3 class="text-2xl font-semibold tracking-tight">安装</h3>
+                        <div class="rounded-lg border border-border bg-[#09090b] px-4 py-3 font-mono text-sm text-foreground">
+                            <span class="text-muted-foreground">$</span> npm install @aura-ui/${ activeComponent.id }
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <script>
+        const { createApp } = Vue
+        createApp({
+            delimiters: ['${', '}'],
+            data() {
+                return {
+                    currentComponent: 'button',
+                    activeTab: 'preview',
+                    uploadStatus: '',
+                    menuItems: {
+                        '入门': [
+                            { id: 'intro', name: '介绍' },
+                            { id: 'install', name: '安装' }
+                        ],
+                        '基础组件': [
+                            { id: 'button', name: 'Button 按钮' },
+                            { id: 'badge', name: 'Badge 徽章' },
+                            { id: 'card', name: 'Card 卡片', new: true },
+                            { id: 'input', name: 'Input 输入框' },
+                            { id: 'dialog', name: 'Dialog 对话框' },
+                            { id: 'upload', name: 'Upload 上传', new: true },
+                            { id: 'table', name: 'Table 表格' }
+                        ]
+                    },
+                    components: {
+                        button: {
+                            id: 'button',
+                            name: 'Button',
+                            description: '触发业务逻辑或控制操作的交互式元素。',
+                            html: `
+                                <div class="flex flex-wrap gap-4 items-center justify-center">
+                                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+                                        主要按钮
+                                    </button>
+                                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2">
+                                        次要按钮
+                                    </button>
+                                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
+                                        轮廓按钮
+                                    </button>
+                                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
+                                        幽灵按钮
+                                    </button>
+                                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 px-4 py-2">
+                                        破坏性按钮
+                                    </button>
+                                </div>
+                            `,
+                            code: `<Button variant="default">主要按钮</Button>
+<Button variant="secondary">次要按钮</Button>
+<Button variant="outline">轮廓按钮</Button>
+<Button variant="ghost">幽灵按钮</Button>
+<Button variant="destructive">破坏性按钮</Button>`
+                        },
+                        badge: {
+                            id: 'badge',
+                            name: 'Badge',
+                            description: '用于显示状态或属性的小型视觉元素。',
+                            html: `
+                                <div class="flex gap-4">
+                                    <div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">默认</div>
+                                    <div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">次要</div>
+                                    <div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80">破坏性</div>
+                                    <div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground">轮廓</div>
+                                </div>
+                            `,
+                            code: `<Badge>默认</Badge>
+<Badge variant="secondary">次要</Badge>
+<Badge variant="destructive">破坏性</Badge>
+<Badge variant="outline">轮廓</Badge>`
+                        },
+                        card: {
+                            id: 'card',
+                            name: 'Card',
+                            description: '显示相关内容的容器。',
+                            html: `
+                                <div class="rounded-xl border border-border bg-card text-card-foreground shadow-sm w-[350px]">
+                                    <div class="flex flex-col space-y-1.5 p-6">
+                                        <h3 class="text-2xl font-semibold leading-none tracking-tight">创建项目</h3>
+                                        <p class="text-sm text-muted-foreground">一键部署你的新项目到 Aura 平台。</p>
+                                    </div>
+                                    <div class="p-6 pt-0 space-y-4">
+                                        <div class="space-y-2">
+                                            <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">项目名称</label>
+                                            <input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="我的新项目">
+                                        </div>
+                                        <div class="space-y-2">
+                                            <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">框架</label>
+                                            <select class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
+                                                <option>Vue.js</option>
+                                                <option>React</option>
+                                                <option>Svelte</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center p-6 pt-0 gap-4">
+                                        <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 flex-1">取消</button>
+                                        <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 flex-1">部署</button>
+                                    </div>
+                                </div>
+                            `,
+                            code: `<Card class="w-[350px]">
+  <CardHeader>
+    <CardTitle>创建项目</CardTitle>
+    <CardDescription>一键部署你的新项目到 Aura 平台。</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <form>
+      <div class="grid w-full items-center gap-4">
+        <div class="flex flex-col space-y-1.5">
+          <Label htmlFor="name">项目名称</Label>
+          <Input id="name" placeholder="我的新项目" />
+        </div>
+        <div class="flex flex-col space-y-1.5">
+          <Label htmlFor="framework">框架</Label>
+          <Select>
+            <SelectTrigger id="framework">
+              <SelectValue placeholder="选择" />
+            </SelectTrigger>
+            <SelectContent position="popper">
+              <SelectItem value="vue">Vue.js</SelectItem>
+              <SelectItem value="react">React</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </form>
+  </CardContent>
+  <CardFooter class="flex justify-between">
+    <Button variant="outline">取消</Button>
+    <Button>部署</Button>
+  </CardFooter>
+</Card>`
+                        },
+                        input: {
+                            id: 'input',
+                            name: 'Input',
+                            description: '允许用户输入文本的字段。',
+                            html: `
+                                <div class="grid w-full max-w-sm items-center gap-1.5">
+                                    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">邮箱</label>
+                                    <input type="email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Email" value="user@example.com">
+                                    <p class="text-[0.8rem] text-muted-foreground">请输入您的常用邮箱地址。</p>
+                                </div>
+                            `,
+                            code: `<div class="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="email">邮箱</Label>
+  <Input type="email" id="email" placeholder="Email" />
+</div>`
+                        },
+                        dialog: {
+                            id: 'dialog',
+                            name: 'Dialog',
+                            description: '模态对话框，覆盖在主要内容之上。',
+                            html: `
+                                <div class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4">
+                                    <div class="fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg sm:rounded-lg md:w-full">
+                                        <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+                                            <h2 class="text-lg font-semibold leading-none tracking-tight">编辑资料</h2>
+                                            <p class="text-sm text-muted-foreground">在这里修改您的个人信息。完成后点击保存。</p>
+                                        </div>
+                                        <div class="grid gap-4 py-4">
+                                            <div class="grid grid-cols-4 items-center gap-4">
+                                                <label class="text-right text-sm font-medium">姓名</label>
+                                                <input class="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" value="Pedro Duarte">
+                                            </div>
+                                            <div class="grid grid-cols-4 items-center gap-4">
+                                                <label class="text-right text-sm font-medium">用户名</label>
+                                                <input class="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" value="@peduarte">
+                                            </div>
+                                        </div>
+                                        <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+                                            <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">保存修改</button>
+                                        </div>
+                                        <button class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                                            <i class="ph ph-x text-lg"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            `,
+                            code: `<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>编辑资料</DialogTitle>
+      <DialogDescription>
+        在这里修改您的个人信息。完成后点击保存。
+      </DialogDescription>
+    </DialogHeader>
+    <!-- Form Fields -->
+    <DialogFooter>
+      <Button type="submit">保存修改</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`
+                        },
+                        upload: {
+                            id: 'upload',
+                            name: 'Upload',
+                            description: '文件上传组件，支持拖拽和点击上传。',
+                            html: `
+                                <div class="w-full max-w-sm items-center gap-1.5">
+                                    <div class="flex items-center justify-center w-full">
+                                        <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer bg-muted/50 hover:bg-muted border-border hover:border-primary transition-colors">
+                                            <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                                                <i class="ph ph-cloud-arrow-up text-4xl mb-4 text-muted-foreground"></i>
+                                                <p class="mb-2 text-sm text-muted-foreground"><span class="font-semibold">点击上传</span> 或拖拽文件到这里</p>
+                                                <p class="text-xs text-muted-foreground">支持各种格式 (最大 100MB)</p>
+                                            </div>
+                                            <input id="dropzone-file" type="file" class="hidden" @change="handleFileUpload" />
+                                        </label>
+                                    </div>
+                                    <div v-if="uploadStatus" class="mt-4 p-4 rounded-md bg-muted/50 text-sm overflow-auto max-h-40">
+                                        <p class="font-medium mb-1">状态:</p>
+                                        <pre class="text-xs whitespace-pre-wrap font-mono">${ uploadStatus }</pre>
+                                    </div>
+                                    <div class="mt-4 flex justify-center">
+                                         <button @click="triggerUpload" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+                                            手动触发上传
+                                        </button>
+                                    </div>
+                                </div>
+                            `,
+                            code: `<Upload url="/api/upload" />`
+                        },
+                        table: {
+                            id: 'table',
+                            name: 'Table',
+                            description: '展示数据集合的表格组件。',
+                            html: `
+                                <div class="w-full overflow-auto rounded-lg border border-border">
+                                    <table class="w-full caption-bottom text-sm">
+                                        <thead class="[&_tr]:border-b">
+                                            <tr class="border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+                                                <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">发票号</th>
+                                                <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">状态</th>
+                                                <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">方式</th>
+                                                <th class="h-12 px-4 text-right align-middle font-medium text-muted-foreground">金额</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody class="[&_tr:last-child]:border-0">
+                                            <tr class="border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+                                                <td class="p-4 align-middle font-medium">INV001</td>
+                                                <td class="p-4 align-middle">已支付</td>
+                                                <td class="p-4 align-middle">信用卡</td>
+                                                <td class="p-4 align-middle text-right">¥250.00</td>
+                                            </tr>
+                                            <tr class="border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+                                                <td class="p-4 align-middle font-medium">INV002</td>
+                                                <td class="p-4 align-middle">处理中</td>
+                                                <td class="p-4 align-middle">PayPal</td>
+                                                <td class="p-4 align-middle text-right">¥150.00</td>
+                                            </tr>
+                                            <tr class="border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+                                                <td class="p-4 align-middle font-medium">INV003</td>
+                                                <td class="p-4 align-middle">未支付</td>
+                                                <td class="p-4 align-middle">银行转账</td>
+                                                <td class="p-4 align-middle text-right">¥350.00</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            `,
+                            code: `<Table :data="invoices" />`
+                        }
+                    }
+                }
+            },
+            computed: {
+                activeComponent() {
+                    return this.components[this.currentComponent] || {
+                        name: 'Aura UI',
+                        description: 'Modern, Accessible, Open Source.',
+                        html: '<div class="text-center">请从左侧选择组件</div>',
+                        code: ''
+                    }
+                }
+            },
+            methods: {
+                selectComponent(id) {
+                    if (this.components[id]) {
+                        this.currentComponent = id;
+                        this.activeTab = 'preview';
+                        this.uploadStatus = '';
+                    }
+                },
+                triggerUpload() {
+                    const fileInput = document.getElementById('dropzone-file');
+                    if (fileInput) {
+                        fileInput.click();
+                    }
+                },
+                async handleFileUpload(event) {
+                    const file = event.target.files[0];
+                    if (!file) return;
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    this.uploadStatus = '正在上传...';
+                    try {
+                        const response = await fetch('/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const result = await response.json();
+                        if (response.ok) {
+                            this.uploadStatus = '成功: ' + JSON.stringify(result, null, 2);
+                        } else {
+                            this.uploadStatus = '错误: ' + JSON.stringify(result, null, 2);
+                        }
+                    } catch (error) {
+                        this.uploadStatus = '网络错误: ' + error.message;
+                    }
+                }
+            }
+        }).mount('#app')
+    </script>
+</body>
+</html>