Initial commit for Mock Data Master

.gitignore

@@ -0,0 +1,5 @@
+__pycache__/
+*.py[cod]
+.DS_Store
+venv/
+.env

Dockerfile

@@ -0,0 +1,17 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user for Hugging Face Spaces
+RUN useradd -m -u 1000 user
+USER user
+
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+CMD ["python", "app.py"]

README.md

@@ -1,11 +1,89 @@
 ---
 title: Mock Data Master
-emoji: 🐨
-colorFrom: purple
-colorTo: blue
+emoji: 🎲
+colorFrom: blue
+colorTo: indigo
 sdk: docker
 pinned: false
-short_description: '1'
+short_description: 虚拟数据生成大师 - 开发者必备工具
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Mock Data Master (虚拟数据生成大师)
+
+**Mock Data Master** 是一个强大的虚拟数据生成工具，专为开发者、测试人员和产品经理设计。它可以快速生成成千上万条逼真的测试数据，支持导出为 CSV、JSON 和 SQL 格式。
+
+不再需要手动编造测试数据，**Mock Data Master** 帮你一键搞定！
+
+## ✨ 核心功能
+
+- **🚀 极速生成**：毫秒级响应，支持一次生成多达 1000 条数据预览。
+- **🇨🇳 中文优化**：基于 `Faker` 库，完美支持中文姓名、地址、公司名、职位等。
+- **🧩 丰富类型**：
+  - **基础信息**: 姓名, 邮箱, 手机号, 地址, 身份证号, 城市.
+  - **商业/办公**: 公司名, 职位, ISBN, 信用卡号, 颜色.
+  - **网络/技术**: UUID, IPv4, User Agent, URL, 图片链接, 文件名.
+  - **内容**: 短句, 段落, 布尔值, 整数 (支持范围).
+- **⚡ 快速模板**: 内置 **用户(User)**、**电商(E-commerce)**、**订单(Order)**、**文章(Article)** 等常用模型，一键加载。
+- **💾 多格式导出**:
+  - **CSV**: 适用于 Excel 分析。
+  - **JSON**: 适用于 API 模拟。
+  - **SQL**: 直接生成 `INSERT` 语句 (支持自定义表名)，快速导入数据库。
+- **🛠️ 实用工具**:
+  - **自动保存**: 本地缓存配置，刷新不丢失。
+  - **一键复制**: 方便快捷地获取 JSON/SQL 代码。
+  - **重置功能**: 快速恢复默认状态。
+- **🔒 隐私安全**: 所有数据均为随机生成，无真实用户信息。
+
+## 🛠 技术栈
+
+- **Backend**: Flask (Python)
+- **Frontend**: Vue 3 (CDN), Tailwind CSS (CDN)
+- **Core Library**: Faker
+- **Icons**: Phosphor Icons
+- **Deployment**: Docker (Hugging Face Spaces Compatible)
+
+## 🚀 快速开始
+
+### Docker 部署 (推荐)
+
+```bash
+# 构建镜像
+docker build -t mock-data-master .
+
+# 运行容器
+docker run -p 7860:7860 mock-data-master
+```
+
+访问 `http://localhost:7860` 即可使用。
+
+### 本地开发
+
+1. 安装依赖：
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+2. 运行应用：
+   ```bash
+   python app.py
+   ```
+
+## 📝 使用指南
+
+1. **选择模板** (可选)：点击“快速模板”下拉框，选择一个场景（如电商产品）快速填充字段。
+2. **自定义配置**：
+   - 添加/删除字段。
+   - 修改字段名和类型。
+   - 设置整数范围（如价格 10-5000）。
+3. **生成数据**：点击“立即生成数据”按钮。
+4. **导出/复制**：
+   - 点击 CSV/JSON/SQL 按钮下载文件。
+   - 在 SQL 弹窗中可以直接复制语句。
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 PR！
+
+## 📄 许可证
+
+MIT License

app.py

@@ -0,0 +1,75 @@
+from flask import Flask, render_template, request, jsonify, send_file
+from faker import Faker
+import csv
+import json
+import io
+import random
+
+app = Flask(__name__)
+
+# Resolve conflict with Vue.js
+app.jinja_env.variable_start_string = '[['
+app.jinja_env.variable_end_string = ']]'
+
+fake = Faker('zh_CN')  # Default to Chinese
+
+# Mapping of frontend types to Faker methods or custom logic
+FIELD_TYPES = {
+    'name': {'label': '姓名', 'method': lambda f: f.name()},
+    'address': {'label': '地址', 'method': lambda f: f.address()},
+    'email': {'label': '邮箱', 'method': lambda f: f.email()},
+    'phone_number': {'label': '手机号', 'method': lambda f: f.phone_number()},
+    'company': {'label': '公司', 'method': lambda f: f.company()},
+    'job': {'label': '职位', 'method': lambda f: f.job()},
+    'ssn': {'label': '身份证号', 'method': lambda f: f.ssn()},
+    'date_this_year': {'label': '今年日期', 'method': lambda f: f.date_this_year().isoformat()},
+    'date_of_birth': {'label': '出生日期', 'method': lambda f: f.date_of_birth().isoformat()},
+    'city': {'label': '城市', 'method': lambda f: f.city()},
+    'text': {'label': '随机文本', 'method': lambda f: f.sentence()},
+    'integer': {'label': '随机整数', 'method': lambda f: random.randint(0, 100)}, # Basic default
+    'boolean': {'label': '布尔值', 'method': lambda f: random.choice([True, False])},
+    'uuid': {'label': 'UUID', 'method': lambda f: f.uuid4()},
+    'ipv4': {'label': 'IPv4地址', 'method': lambda f: f.ipv4()},
+    'url': {'label': 'URL链接', 'method': lambda f: f.url()},
+}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/types')
+def get_types():
+    return jsonify([{
+        'value': k, 
+        'label': v['label']
+    } for k, v in FIELD_TYPES.items()])
+
+@app.route('/api/generate', methods=['POST'])
+def generate_data():
+    data = request.json
+    count = min(data.get('count', 10), 1000) # Limit to 1000 for preview/safety
+    schema = data.get('schema', [])
+    
+    results = []
+    for _ in range(count):
+        row = {}
+        for field in schema:
+            field_name = field.get('name')
+            field_type = field.get('type')
+            
+            if field_type in FIELD_TYPES:
+                # Handle special cases if needed (e.g. ranges for integers)
+                if field_type == 'integer':
+                    min_val = int(field.get('min', 0))
+                    max_val = int(field.get('max', 100))
+                    row[field_name] = random.randint(min_val, max_val)
+                else:
+                    row[field_name] = FIELD_TYPES[field_type]['method'](fake)
+            else:
+                row[field_name] = None
+        results.append(row)
+        
+    return jsonify(results)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,2 @@
+Flask==3.0.0
+Faker==22.5.1

templates/index.html

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mock Data Master - 虚拟数据生成大师</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        .scrollbar-hide::-webkit-scrollbar { display: none; }
+        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 h-screen flex flex-col overflow-hidden">
+    <div id="app" class="flex flex-col h-full">
+        <!-- Header -->
+        <header class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shadow-sm z-10">
+            <div class="flex items-center gap-3">
+                <div class="bg-blue-600 text-white p-2 rounded-lg">
+                    <i class="ph ph-database text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="font-bold text-xl text-gray-900">Mock Data Master</h1>
+                    <p class="text-xs text-gray-500">虚拟数据生成大师</p>
+                </div>
+            </div>
+            <div class="flex items-center gap-4">
+                <a href="https://github.com/duqing2026" target="_blank" class="text-gray-500 hover:text-gray-900">
+                    <i class="ph ph-github-logo text-2xl"></i>
+                </a>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 flex overflow-hidden">
+            <!-- Left Panel: Configuration -->
+            <div class="w-1/3 min-w-[350px] max-w-[500px] bg-white border-r border-gray-200 flex flex-col z-0">
+                <div class="p-5 border-b border-gray-100 bg-gray-50/50">
+                    <h2 class="font-semibold text-gray-700 mb-4 flex items-center gap-2">
+                        <i class="ph ph-faders"></i> 数据模型配置
+                    </h2>
+                    <div class="flex items-center gap-4 mb-2">
+                        <label class="text-sm font-medium text-gray-600">生成行数</label>
+                        <input type="number" v-model.number="rowCount" min="1" max="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-sm">
+                    </div>
+                </div>
+
+                <div class="flex-1 overflow-y-auto p-5 space-y-3">
+                    <div v-for="(field, index) in schema" :key="index" class="bg-white border border-gray-200 rounded-lg p-3 shadow-sm hover:shadow-md transition group relative">
+                        <div class="flex items-start gap-3">
+                            <div class="flex-1 space-y-2">
+                                <div class="flex gap-2">
+                                    <input type="text" v-model="field.name" placeholder="字段名 (如: username)" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-blue-500 outline-none font-mono">
+                                    <select v-model="field.type" class="w-32 px-2 py-1.5 border border-gray-300 rounded text-sm focus:border-blue-500 outline-none bg-gray-50">
+                                        <option v-for="type in availableTypes" :value="type.value">{{ type.label }}</option>
+                                    </select>
+                                </div>
+                                <!-- Extra options for integer -->
+                                <div v-if="field.type === 'integer'" class="flex gap-2 items-center text-xs text-gray-500 pl-1">
+                                    <span>Min:</span>
+                                    <input type="number" v-model.number="field.min" class="w-16 border rounded px-1 py-0.5">
+                                    <span>Max:</span>
+                                    <input type="number" v-model.number="field.max" class="w-16 border rounded px-1 py-0.5">
+                                </div>
+                            </div>
+                            <button @click="removeField(index)" class="text-gray-400 hover:text-red-500 p-1 rounded hover:bg-red-50 transition">
+                                <i class="ph ph-trash"></i>
+                            </button>
+                        </div>
+                        <div class="absolute left-0 top-0 bottom-0 w-1 bg-blue-500 rounded-l-lg opacity-0 group-hover:opacity-100 transition"></div>
+                    </div>
+
+                    <button @click="addField" class="w-full py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 hover:bg-blue-50 transition flex items-center justify-center gap-2 font-medium">
+                        <i class="ph ph-plus-circle"></i> 添加字段
+                    </button>
+                </div>
+
+                <div class="p-5 border-t border-gray-200 bg-white">
+                    <button @click="generateData" :disabled="loading" class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold shadow-lg shadow-blue-200 transition flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed">
+                        <span v-if="loading" class="animate-spin"><i class="ph ph-spinner"></i></span>
+                        <span v-else><i class="ph ph-lightning"></i> 生成数据</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Right Panel: Preview & Export -->
+            <div class="flex-1 flex flex-col bg-gray-50 overflow-hidden">
+                <!-- Toolbar -->
+                <div class="px-6 py-3 border-b border-gray-200 bg-white flex items-center justify-between">
+                    <div class="flex items-center gap-2 text-sm text-gray-500">
+                        <i class="ph ph-table"></i>
+                        <span>数据预览 ({{ generatedData.length }} 行)</span>
+                    </div>
+                    <div class="flex gap-2" v-if="generatedData.length > 0">
+                        <button @click="exportCSV" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm hover:bg-gray-50 text-gray-700 flex items-center gap-2 transition">
+                            <i class="ph ph-file-csv text-green-600"></i> CSV
+                        </button>
+                        <button @click="exportJSON" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm hover:bg-gray-50 text-gray-700 flex items-center gap-2 transition">
+                            <i class="ph ph-brackets-curly text-yellow-600"></i> JSON
+                        </button>
+                        <button @click="exportSQL" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm hover:bg-gray-50 text-gray-700 flex items-center gap-2 transition">
+                            <i class="ph ph-database text-blue-600"></i> SQL
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Table Content -->
+                <div class="flex-1 overflow-auto p-6 relative">
+                    <div v-if="generatedData.length === 0" class="h-full flex flex-col items-center justify-center text-gray-400">
+                        <i class="ph ph-table text-6xl mb-4 text-gray-300"></i>
+                        <p>暂无数据，请配置模型并点击生成</p>
+                    </div>
+                    
+                    <div v-else class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+                        <div class="overflow-x-auto">
+                            <table class="w-full text-sm text-left">
+                                <thead class="bg-gray-50 border-b border-gray-200 text-gray-600 font-medium">
+                                    <tr>
+                                        <th class="px-4 py-3 w-16 text-center">#</th>
+                                        <th v-for="col in schema" :key="col.name" class="px-4 py-3 whitespace-nowrap">{{ col.name }}</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-gray-100">
+                                    <tr v-for="(row, idx) in generatedData" :key="idx" class="hover:bg-blue-50/30 transition">
+                                        <td class="px-4 py-3 text-center text-gray-400 font-mono text-xs">{{ idx + 1 }}</td>
+                                        <td v-for="col in schema" :key="col.name" class="px-4 py-3 whitespace-nowrap text-gray-700 max-w-xs truncate">
+                                            {{ formatValue(row[col.name]) }}
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        
+        <!-- SQL Modal (Simple Overlay) -->
+        <div v-if="showSQLModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+            <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl flex flex-col max-h-[80vh]">
+                <div class="p-4 border-b border-gray-100 flex justify-between items-center">
+                    <h3 class="font-bold text-lg">SQL 预览</h3>
+                    <button @click="showSQLModal = false" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
+                </div>
+                <div class="flex-1 overflow-auto p-4 bg-gray-900 text-gray-100 font-mono text-sm rounded-b-xl whitespace-pre">
+                    {{ sqlContent }}
+                </div>
+                <div class="p-4 border-t border-gray-100 flex justify-end gap-3 bg-white rounded-b-xl">
+                    <input type="text" v-model="tableName" placeholder="表名" class="border rounded px-2 py-1 text-sm">
+                    <button @click="downloadSQL" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">下载 .sql</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted } = Vue;
+
+        createApp({
+            setup() {
+                const schema = ref([
+                    { name: 'id', type: 'integer', min: 1, max: 1000 },
+                    { name: 'full_name', type: 'name' },
+                    { name: 'email', type: 'email' },
+                    { name: 'city', type: 'city' }
+                ]);
+                const availableTypes = ref([]);
+                const rowCount = ref(50);
+                const generatedData = ref([]);
+                const loading = ref(false);
+                const showSQLModal = ref(false);
+                const sqlContent = ref('');
+                const tableName = ref('users');
+
+                // Fetch types from backend
+                const fetchTypes = async () => {
+                    try {
+                        const res = await fetch('/api/types');
+                        availableTypes.value = await res.json();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                };
+
+                const addField = () => {
+                    schema.value.push({ name: 'new_field', type: 'text' });
+                };
+
+                const removeField = (index) => {
+                    schema.value.splice(index, 1);
+                };
+
+                const generateData = async () => {
+                    if (schema.value.length === 0) return;
+                    loading.value = true;
+                    try {
+                        const res = await fetch('/api/generate', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                count: rowCount.value,
+                                schema: schema.value
+                            })
+                        });
+                        generatedData.value = await res.json();
+                    } catch (e) {
+                        alert('生成失败');
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const formatValue = (val) => {
+                    if (val === true) return 'TRUE';
+                    if (val === false) return 'FALSE';
+                    return val;
+                };
+
+                // Export functions
+                const exportCSV = () => {
+                    if (!generatedData.value.length) return;
+                    const headers = schema.value.map(f => f.name).join(',');
+                    const rows = generatedData.value.map(row => 
+                        schema.value.map(f => {
+                            let val = row[f.name];
+                            if (val === null) return '';
+                            // Handle string escaping for CSV
+                            if (typeof val === 'string') {
+                                val = val.replace(/"/g, '""');
+                                if (val.includes(',') || val.includes('"') || val.includes('\n')) {
+                                    val = `"${val}"`;
+                                }
+                            }
+                            return val;
+                        }).join(',')
+                    ).join('\n');
+                    
+                    const csvContent = `${headers}\n${rows}`;
+                    downloadFile(csvContent, 'mock_data.csv', 'text/csv;charset=utf-8;');
+                };
+
+                const exportJSON = () => {
+                    if (!generatedData.value.length) return;
+                    downloadFile(JSON.stringify(generatedData.value, null, 2), 'mock_data.json', 'application/json');
+                };
+
+                const generateSQL = () => {
+                    if (!generatedData.value.length) return '';
+                    const table = tableName.value || 'table_name';
+                    const cols = schema.value.map(f => f.name).join(', ');
+                    
+                    const stmts = generatedData.value.map(row => {
+                        const vals = schema.value.map(f => {
+                            const val = row[f.name];
+                            if (val === null) return 'NULL';
+                            if (typeof val === 'number') return val;
+                            if (typeof val === 'boolean') return val ? 1 : 0;
+                            return `'${String(val).replace(/'/g, "''")}'`;
+                        }).join(', ');
+                        return `INSERT INTO ${table} (${cols}) VALUES (${vals});`;
+                    }).join('\n');
+                    
+                    return stmts;
+                };
+
+                const exportSQL = () => {
+                    sqlContent.value = generateSQL();
+                    showSQLModal.value = true;
+                };
+
+                const downloadSQL = () => {
+                    const sql = generateSQL();
+                    downloadFile(sql, 'mock_data.sql', 'text/sql');
+                };
+
+                const downloadFile = (content, fileName, mimeType) => {
+                    const blob = new Blob([content], { type: mimeType });
+                    const link = document.createElement('a');
+                    link.href = URL.createObjectURL(blob);
+                    link.download = fileName;
+                    link.click();
+                    URL.revokeObjectURL(link.href);
+                };
+
+                onMounted(() => {
+                    fetchTypes();
+                    generateData(); // Auto generate on load
+                });
+
+                return {
+                    schema, availableTypes, rowCount, generatedData, loading,
+                    addField, removeField, generateData, formatValue,
+                    exportCSV, exportJSON, exportSQL,
+                    showSQLModal, sqlContent, tableName, downloadSQL
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>