mysoft
/
license-admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>License 管理平台</title>
    <link rel="stylesheet" href="/web/css/index.css">
</head>
<body>
    <!-- Toast 通知容器 -->
    <div class="toast-container" id="toast-container"></div>

    <!-- 确认对话框 -->
    <div id="confirmDialog" class="confirm-dialog">
        <div class="confirm-content">
            <div class="confirm-icon">⚠️</div>
            <div class="confirm-title" id="confirm-title">确认操作</div>
            <div class="confirm-message" id="confirm-message"></div>
            <div class="confirm-actions">
                <button class="btn btn-secondary" onclick="closeConfirmDialog(false)">取消</button>
                <button class="btn btn-danger" onclick="closeConfirmDialog(true)" id="confirm-ok-btn">确定</button>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="header">
            <h1>🔑 License 管理平台</h1>
            <div style="display: flex; gap: 10px;">
                <button class="btn btn-primary" onclick="openBatchModal()">📦 批量生成</button>
                <button class="btn btn-primary" onclick="exportToCSV()">📥 导出 CSV</button>
                <button class="btn btn-primary" onclick="openCreateModal()">+ 创建 License</button>
            </div>
        </div>

        <!-- 统计信息卡片 -->
        <div class="stats-container" id="stats-container" style="display: none;">
            <div class="stat-card primary">
                <div class="stat-label">总 License 数</div>
                <div class="stat-value" id="stat-total">0</div>
            </div>
            <div class="stat-card success">
                <div class="stat-label">已激活</div>
                <div class="stat-value" id="stat-activated">0</div>
            </div>
            <div class="stat-card warning">
                <div class="stat-label">未激活</div>
                <div class="stat-value" id="stat-unactivated">0</div>
            </div>
            <div class="stat-card danger">
                <div class="stat-label">总设备数</div>
                <div class="stat-value" id="stat-devices">0</div>
            </div>
        </div>

        <div class="card">
            <div id="loading" class="loading" style="display: none;">加载中...</div>
            <div id="empty-state" class="empty-state" style="display: none;">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <p>暂无 License 数据</p>
            </div>
            <div class="table-container" id="table-container" style="display: none;">
                <!-- 筛选和操作栏 -->
                <div class="filter-bar">
                    <div class="filter-group">
                        <label for="status-filter">状态筛选：</label>
                        <select id="status-filter" class="filter-select" onchange="handleStatusFilter()">
                            <option value="">全部</option>
                            <option value="activated">已激活</option>
                            <option value="unactivated">未激活</option>
                        </select>
                    </div>
                    <div style="display: flex; gap: 10px;">
                        <button class="btn btn-primary" id="batch-update-btn" onclick="openBatchUpdateModal()" style="display: none;">
                            ⚙️ 批量修改最大设备数
                        </button>
                        <button class="btn btn-danger" id="batch-delete-btn" onclick="batchDeleteLicenses()" style="display: none;">
                            批量删除
                        </button>
                    </div>
                </div>
                <div style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                    <input type="checkbox" id="select-all" onchange="toggleSelectAll()" style="width: 18px; height: 18px; cursor: pointer;">
                    <label for="select-all" style="cursor: pointer; user-select: none;">全选</label>
                    <span id="selected-count" style="color: #6b7280; font-size: 14px;">已选择 0 项</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th style="width: 50px;">
                                <input type="checkbox" id="select-all-header" onchange="toggleSelectAll()" style="width: 18px; height: 18px; cursor: pointer;">
                            </th>
                            <th>ID</th>
                            <th>激活码</th>
                            <th>设备详情</th>
                            <th>绑定设备数</th>
                            <th>备注</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="license-table-body">
                    </tbody>
                </table>
                <div class="pagination" id="pagination"></div>
            </div>
        </div>
    </div>

    <!-- 创建/编辑 Modal -->
    <div id="licenseModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-title">创建 License</h2>
                <button class="close" onclick="closeModal()">&times;</button>
            </div>
            <form id="licenseForm" onsubmit="handleSubmit(event)">
                <input type="hidden" id="license-id">
                <div class="form-group">
                    <label for="license-key">激活码 *</label>
                    <input type="text" id="license-key" required placeholder="例如: VIP-8888">
                </div>
                <div class="form-group">
                    <label for="license-max-devices">最大设备数 *</label>
                    <input type="number" id="license-max-devices" required min="1" value="2">
                </div>
                <div class="form-group">
                    <label for="license-bound-devices">已绑定设备 (JSON 数组，可选)</label>
                    <input type="text" id="license-bound-devices" placeholder='例如: ["device-1", "device-2"]'>
                </div>
                <div class="form-group">
                    <label for="license-remark">备注 (可选)</label>
                    <textarea id="license-remark" rows="3" placeholder="请输入备注信息" style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 14px; font-family: inherit; resize: vertical;"></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 批量生成 Modal -->
    <div id="batchModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>批量生成 License</h2>
                <button class="close" onclick="closeBatchModal()">&times;</button>
            </div>
            <form id="batchForm" onsubmit="handleBatchSubmit(event)">
                <div class="form-group">
                    <label for="batch-prefix">激活码前缀 *</label>
                    <input type="text" id="batch-prefix" required placeholder="例如: VIP" value="VIP">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">
                        生成的激活码格式：前缀-随机32位字符串（如：VIP-A3B9C2D4E5F6G7H8I9J0K1L2M3N4O5P6）
                    </small>
                </div>
                <div class="form-group">
                    <label for="batch-count">生成数量 *</label>
                    <input type="number" id="batch-count" required min="1" max="1000" value="10">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">
                        一次最多可生成 1000 个
                    </small>
                </div>
                <div class="form-group">
                    <label for="batch-max-devices">最大设备数 *</label>
                    <input type="number" id="batch-max-devices" required min="1" value="2">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeBatchModal()">取消</button>
                    <button type="submit" class="btn btn-primary">生成</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 设备列表 Modal -->
    <div id="deviceListModal" class="modal device-list-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="device-list-title">设备列表</h2>
                <button class="close" onclick="closeDeviceListModal()">&times;</button>
            </div>
            <div id="device-list-content">
                <div class="device-list-empty">加载中...</div>
            </div>
        </div>
    </div>

    <!-- 批量修改最大设备数 Modal -->
    <div id="batchUpdateModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>批量修改最大设备数</h2>
                <button class="close" onclick="closeBatchUpdateModal()">&times;</button>
            </div>
            <form id="batchUpdateForm" onsubmit="handleBatchUpdateSubmit(event)">
                <div class="form-group">
                    <label>已选择 <span id="batch-update-count">0</span> 个 License</label>
                </div>
                <div class="form-group">
                    <label for="batch-update-max-devices">新的最大设备数 *</label>
                    <input type="number" id="batch-update-max-devices" required min="1" value="2">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">
                        将把选中 License 的最大设备数统一修改为此值
                    </small>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeBatchUpdateModal()">取消</button>
                    <button type="submit" class="btn btn-primary">确认修改</button>
                </div>
            </form>
        </div>
    </div>

    <script src="/web/js/index.js"></script>

</body>
</html>