Apq
/
FeHelper
mirror of https://github.com/zxlie/FeHelper.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>数据Mock工具 - FeHelper</title>
    <link rel="stylesheet" href="index.css"/>
    <script type="text/javascript" src="../static/vendor/evalCore.min.js"></script>
    <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
</head>

<body>
    <div class="wrapper" id="pageContainer">
        <!-- 现代化顶部导航栏 -->
        <div class="main-navbar">
            <div class="navbar-brand">
                <a href="https://fehelper.com" target="_blank" class="brand-link">
                    <img src="../static/img/fe-16.png" alt="fehelper"/> 
                    <span class="brand-text">FeHelper</span>
                    <span class="brand-subtitle">数据Mock工具</span>
                </a>
            </div>
            <div class="navbar-actions">
                <a href="#" @click="openOptionsPage($event)" class="nav-item other-tools-link">
                    <i class="nav-icon">⊕</i>
                    <span>探索更多实用工具</span>
                    <span class="tool-market-badge">工具市场</span>
                </a>
                <a href="#" @click="openDonateModal($event)" class="nav-item donate-link">
                    <i class="nav-icon">❤</i>
                    <span>打赏鼓励</span>
                </a>
            </div>
        </div>

        <div class="panel panel-default">
            <!-- 主要内容 - 左右布局 -->
            <div class="panel-body" v-cloak>
                <div class="main-content-layout">
                    <!-- 左侧配置操作区 -->
                    <div class="config-section">
                        <!-- 快速模板 -->
                        <div class="template-section template-top">
                            <h4>快速模板</h4>
                            <div class="template-buttons">
                                <button @click="loadTemplate('user')" class="btn btn-template">用户信息</button>
                                <button @click="loadTemplate('employee')" class="btn btn-template">员工信息</button>
                                <button @click="loadTemplate('product')" class="btn btn-template">商品信息</button>
                                <button @click="loadTemplate('order')" class="btn btn-template">订单信息</button>
                                <button @click="loadTemplate('api')" class="btn btn-template">API测试数据</button>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="action-buttons action-buttons-top">
                            <button @click="generateData" class="btn btn-success">生成数据</button>
                            <button @click="selectAll" class="btn btn-info">全选</button>
                            <button @click="clearAll" class="btn btn-warning">清空</button>
                        </div>

                        <!-- 数据类型选择区域 -->
                        <div class="data-type-section">
                            <h4>选择数据类型</h4>
                            <div class="data-type-tabs">
                                <button class="data-tab" 
                                        :class="{ active: activeTab === 'personal' }"
                                        @click="activeTab = 'personal'">
                                    个人信息
                                </button>
                                <button class="data-tab" 
                                        :class="{ active: activeTab === 'business' }"
                                        @click="activeTab = 'business'">
                                    商业数据
                                </button>
                                <button class="data-tab" 
                                        :class="{ active: activeTab === 'technical' }"
                                        @click="activeTab = 'technical'">
                                    技术数据
                                </button>
                                <button class="data-tab" 
                                        :class="{ active: activeTab === 'custom' }"
                                        @click="activeTab = 'custom'">
                                    自定义数据
                                </button>
                            </div>
                        </div>

                        <!-- 个人信息数据 -->
                        <div v-show="activeTab === 'personal'" class="data-content">
                            <div class="field-group">
                                <h5>基本信息</h5>
                                <div class="field-row">
                                    <label><input type="checkbox" v-model="selectedFields.name"> 姓名</label>
                                    <label><input type="checkbox" v-model="selectedFields.email"> 邮箱</label>
                                    <label><input type="checkbox" v-model="selectedFields.phone"> 手机号</label>
                                    <label><input type="checkbox" v-model="selectedFields.idCard"> 身份证号</label>
                                </div>
                                <div class="field-row">
                                    <label><input type="checkbox" v-model="selectedFields.gender"> 性别</label>
                                    <label><input type="checkbox" v-model="selectedFields.age"> 年龄</label>
                                    <label><input type="checkbox" v-model="selectedFields.birthday"> 生日</label>
                                    <label><input type="checkbox" v-model="selectedFields.address"> 地址</label>
                                </div>
                            </div>
                        </div>

                        <!-- 商业数据 -->
                        <div v-show="activeTab === 'business'" class="data-content">
                            <div class="field-group">
                                <h5>商业信息</h5>
                                <div class="field-row">
                                    <label><input type="checkbox" v-model="selectedFields.company"> 公司名称</label>
                                    <label><input type="checkbox" v-model="selectedFields.department"> 部门</label>
                                    <label><input type="checkbox" v-model="selectedFields.position"> 职位</label>
                                    <label><input type="checkbox" v-model="selectedFields.salary"> 薪资</label>
                                </div>
                                <div class="field-row">
                                    <label><input type="checkbox" v-model="selectedFields.bankCard"> 银行卡号</label>
                                    <label><input type="checkbox" v-model="selectedFields.creditCard"> 信用卡号</label>
                                    <label><input type="checkbox" v-model="selectedFields.price"> 价格</label>
                                    <label><input type="checkbox" v-model="selectedFields.currency"> 货币</label>
                                </div>
                            </div>
                        </div>

                        <!-- 技术数据 -->
                        <div v-show="activeTab === 'technical'" class="data-content">
                            <div class="field-group">
                                <h5>技术信息</h5>
                                <div class="field-row">
                                    <label><input type="checkbox" v-model="selectedFields.uuid"> UUID</label>
                                    <label><input type="checkbox" v-model="selectedFields.ip"> IP地址</label>
                                    <label><input type="checkbox" v-model="selectedFields.mac"> MAC地址</label>
                                    <label><input type="checkbox" v-model="selectedFields.userAgent"> User Agent</label>
                                </div>
                                <div class="field-row">
                                    <label><input type="checkbox" v-model="selectedFields.url"> URL</label>
                                    <label><input type="checkbox" v-model="selectedFields.domain"> 域名</label>
                                    <label><input type="checkbox" v-model="selectedFields.password"> 密码</label>
                                    <label><input type="checkbox" v-model="selectedFields.token"> Token</label>
                                </div>
                                <div class="field-row">
                                    <label><input type="checkbox" v-model="selectedFields.color"> 颜色值</label>
                                    <label><input type="checkbox" v-model="selectedFields.timestamp"> 时间戳</label>
                                    <label><input type="checkbox" v-model="selectedFields.filename"> 文件名</label>
                                    <label><input type="checkbox" v-model="selectedFields.mimeType"> MIME类型</label>
                                </div>
                            </div>
                        </div>

                        <!-- 自定义数据 -->
                        <div v-show="activeTab === 'custom'" class="data-content">
                            <div class="field-group">
                                <h5>自定义规则</h5>
                                <div class="custom-input">
                                    <label>字段名称：</label>
                                    <input type="text" v-model="customField.name" placeholder="请输入字段名">
                                </div>
                                <div class="custom-input">
                                    <label>数据类型：</label>
                                    <select v-model="customField.type">
                                        <option value="string">字符串</option>
                                        <option value="number">数字</option>
                                        <option value="boolean">布尔值</option>
                                        <option value="date">日期</option>
                                        <option value="array">数组</option>
                                    </select>
                                </div>
                                <div class="custom-input">
                                    <label>生成规则：</label>
                                    <input type="text" v-model="customField.rule" placeholder="如：长度10-20的随机字符串">
                                </div>
                                <button @click="addCustomField" class="btn btn-primary">添加字段</button>
                            </div>
                            
                            <div v-if="customFields.length > 0" class="custom-fields-list">
                                <h5>已添加字段</h5>
                                <div v-for="(field, index) in customFields" :key="index" class="custom-field-item">
                                    <span>{{ field.name }} ({{ field.type }})</span>
                                    <button @click="removeCustomField(index)" class="btn-remove">删除</button>
                                </div>
                            </div>
                        </div>

                        <!-- 生成配置 -->
                        <div class="generate-config">
                            <div class="config-row">
                                <label>生成数量：</label>
                                <input type="number" v-model="generateCount" min="1" max="1000" value="10">
                            </div>
                            <div class="config-row">
                                <label>输出格式：</label>
                                <select v-model="outputFormat">
                                    <option value="json">JSON</option>
                                    <option value="csv">CSV</option>
                                    <option value="sql">SQL INSERT</option>
                                    <option value="xml">XML</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧结果展示区 -->
                    <div class="result-section">
                        <div class="result-panel">
                            <div class="result-header">
                                <h4 v-if="generatedData">生成结果 ({{ generateCount }} 条)</h4>
                                <h4 v-else>数据结果</h4>
                                <div class="result-actions">
                                    <span class="data-size" v-if="generatedData">{{ dataSize }}</span>
                                    <span class="data-size" v-else>等待生成</span>
                                    <button @click="copyResult" class="btn btn-primary btn-sm" :disabled="!generatedData">复制结果</button>
                                    <button @click="downloadData" class="btn btn-secondary btn-sm" :disabled="!generatedData">下载文件</button>
                                </div>
                            </div>
                            <div class="result-content">
                                <div v-if="!generatedData" class="empty-result">
                                    <div class="empty-icon">📊</div>
                                    <div class="empty-text">
                                        <h5>暂无生成结果</h5>
                                        <p>请选择数据字段并点击"生成数据"按钮</p>
                                    </div>
                                </div>
                                <pre v-else>{{ generatedData }}</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="fake-data-lib.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>