186 lines
9.6 KiB
PHP
186 lines
9.6 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
@ini_set('display_errors', '1');
|
|
@error_reporting(E_ALL);
|
|
@date_default_timezone_set('UTC');
|
|
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '快速导入、自动去重、智能分批提取手机号码工具';
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
$projectName = $_SERVER['PROJECT_NAME'] ?? '号码分批大师';
|
|
?>
|
|
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title><?= htmlspecialchars($projectName) ?> - 专业级号码分批与去重工具</title>
|
|
|
|
<?php if ($projectDescription): ?>
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<?php endif; ?>
|
|
|
|
<?php if ($projectImageUrl): ?>
|
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<?php endif; ?>
|
|
|
|
<!-- Fonts & Icons -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<!-- CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i data-lucide="zap" fill="currentColor"></i>
|
|
<span><?= htmlspecialchars($projectName) ?></span>
|
|
</a>
|
|
<div class="d-flex align-items-center gap-4">
|
|
<span class="text-muted small d-none d-lg-inline">
|
|
<i data-lucide="shield-check" class="me-1" style="width: 16px;"></i> 纯前端处理，隐私安全
|
|
</span>
|
|
<button class="btn btn-sm btn-light" onclick="location.reload()">
|
|
<i data-lucide="refresh-cw" style="width: 14px;"></i> 重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero-section container">
|
|
<h1>号码智能处理中心</h1>
|
|
<p>支持万级号码导入、全自动去重、自定义灵活分批，提升您的工作效率。</p>
|
|
</header>
|
|
|
|
<main class="container pb-5">
|
|
<div class="row g-4">
|
|
<!-- Left Column: Input -->
|
|
<div class="col-lg-7">
|
|
<div class="card mb-4 border-0 shadow-lg">
|
|
<div class="card-body p-4 p-md-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4 class="fw-bold mb-0">1. 号码采集</h4>
|
|
<div class="badge bg-light text-primary border px-3 py-2 rounded-pill">
|
|
<i data-lucide="database" class="me-1" style="width: 14px;"></i> 实时提取
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dropzone" class="dropzone mb-4">
|
|
<i data-lucide="file-up"></i>
|
|
<h5 class="fw-bold">拖放文件或点击上传</h5>
|
|
<p class="text-muted small">支持 TXT, CSV, EXCEL 格式内容提取</p>
|
|
<input type="file" id="fileInput" class="d-none" accept=".txt,.csv,.xlsx">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-bold mb-2">手动粘贴号码</label>
|
|
<textarea id="numberInput" class="form-control" rows="10" placeholder="请在此处粘贴号码列表，系统将自动识别手机号格式..."></textarea>
|
|
</div>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-label">识别总数</div>
|
|
<div class="stat-value" id="totalCount">0</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">去重后</div>
|
|
<div class="stat-value text-primary" id="uniqueCount">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center justify-content-between bg-light p-3 rounded-pill px-4">
|
|
<div class="form-check form-switch mb-0">
|
|
<input class="form-check-input" type="checkbox" id="autoDedupe" checked>
|
|
<label class="form-check-label fw-bold" for="autoDedupe">开启自动去重</label>
|
|
</div>
|
|
<button class="btn btn-link btn-sm text-danger text-decoration-none fw-bold" onclick="document.getElementById('numberInput').value = ''; document.getElementById('numberInput').dispatchEvent(new Event('input'));">
|
|
<i data-lucide="trash-2" style="width: 14px;"></i> 全部清空
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Settings & Results -->
|
|
<div class="col-lg-5">
|
|
<div class="sticky-panel">
|
|
<div class="card mb-4 border-0 shadow-lg">
|
|
<div class="card-body p-4 p-md-5">
|
|
<h4 class="fw-bold mb-4">2. 拆分配置</h4>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label small fw-bold text-uppercase text-muted">分批模式</label>
|
|
<select id="splitMode" class="form-select border-2">
|
|
<option value="count">按分批份数 (平均分配或指定分配)</option>
|
|
<option value="size">按每批固定额度 (每份 X 条)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="splitValueContainer" class="mb-4">
|
|
<label class="form-label small fw-bold text-uppercase text-muted" id="splitValueLabel">分批数量</label>
|
|
<div class="input-group">
|
|
<input type="number" id="splitValue" class="form-control border-2" value="2" min="1">
|
|
<span class="input-group-text bg-light border-2" id="unitText">份</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Batch Count Inputs -->
|
|
<div id="dynamicCountsContainer" class="mb-4 d-none">
|
|
<label class="form-label small fw-bold text-uppercase text-muted mb-2">指定每份数量 (可选，末份自动补足)</label>
|
|
<div id="dynamicInputsList" class="d-flex flex-column gap-2">
|
|
<!-- Inputs will be injected here -->
|
|
</div>
|
|
</div>
|
|
|
|
<button id="splitBtn" class="btn btn-primary w-100 py-3 mt-2 fs-5">
|
|
<i data-lucide="scissors" fill="currentColor"></i> 执行智能拆分
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="resultsWrapper" class="mt-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4 class="fw-bold mb-0">3. 处理结果</h4>
|
|
<span id="batchCountBadge" class="badge bg-primary rounded-pill d-none">0 个批次</span>
|
|
</div>
|
|
<div id="resultsContainer">
|
|
<div class="empty-state text-center py-5">
|
|
<div class="bg-light rounded-circle d-inline-flex p-4 mb-3">
|
|
<i data-lucide="layout-grid" class="text-muted" style="width: 48px; height: 48px;"></i>
|
|
</div>
|
|
<p class="text-muted">请完成上方配置并执行拆分</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="container py-5">
|
|
<div class="row align-items-center border-top pt-4">
|
|
<div class="col-md-6 text-center text-md-start">
|
|
<p class="text-muted mb-0 small">© <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. 本工具部署于本地环境，数据不经过服务器。</p>
|
|
</div>
|
|
<div class="col-md-6 text-center text-md-end">
|
|
<div class="d-inline-flex gap-3 text-muted small">
|
|
<span>系统状态: <span class="text-success">● 正常</span></span>
|
|
<span>环境: PHP <?= PHP_VERSION ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
<script src="assets/js/main.js?v=<?= time() ?>"></script>
|
|
</body>
|
|
</html>
|