wxauto_api/static/js/pages/templates.js

const APP_TEMPLATE = `
<div class="app">
    <aside class="sidebar">
        <div class="sidebar-header">
            <h1>WXAuto</h1>
            <span>中控系统</span>
        </div>
        <nav class="sidebar-nav">
            <a href="#" class="nav-item active" data-page="dashboard">
                <span class="nav-icon">📊</span>
                <span>控制台</span>
            </a>
            <a href="#" class="nav-item" data-page="nodes">
                <span class="nav-icon">📱</span>
                <span>节点管理</span>
            </a>
            <a href="#" class="nav-item" data-page="monitor">
                <span class="nav-icon">🔔</span>
                <span>监控告警</span>
            </a>
            <a href="#" class="nav-item" data-page="send">
                <span class="nav-icon">✉️</span>
                <span>快捷消息</span>
            </a>
            <a href="#" class="nav-item" data-page="logs">
                <span class="nav-icon">📋</span>
                <span>实时日志</span>
            </a>
            <a href="#" class="nav-item" data-page="external">
                <span class="nav-icon">🔗</span>
                <span>外部接入</span>
            </a>
            <a href="#" class="nav-item" data-page="plugins">
                <span class="nav-icon">🧩</span>
                <span>插件管理</span>
            </a>
        </nav>
    </aside>
    <main class="main-content">
        <div id="page-content"></div>
    </main>
</div>
`;

const PAGES = {
    dashboard: `
        <div class="page-header">
            <h1>控制台</h1>
        </div>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-label">在线节点</div>
                <div class="stat-value" id="onlineCount">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">离线节点</div>
                <div class="stat-value" id="offlineCount">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">总消息数</div>
                <div class="stat-value" id="totalMessages">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">今日消息</div>
                <div class="stat-value" id="todayMessages">-</div>
            </div>
        </div>
    `,
    nodes: `
        <div class="page-header">
            <h1>节点管理</h1>
            <button class="btn btn-primary" onclick="showAddNodeModal()">
                <span class="icon">➕</span> 添加节点
            </button>
        </div>
        <div class="node-list" id="nodesTable">
            <div class="loading">加载中...</div>
        </div>
    `,
    monitor: `
        <div class="page-header">
            <h1>监控告警</h1>
        </div>
        <div class="settings-grid">
            <div class="settings-card">
                <h3>🔔 监控设置</h3>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="monitorEnabled" onchange="updateMonitorConfig()">
                        启用节点监控
                    </label>
                </div>
                <div class="form-group">
                    <label>检测间隔（秒）</label>
                    <input type="number" id="checkInterval" class="input input-sm" value="30" min="10" onchange="updateMonitorConfig()">
                </div>
            </div>
            <div class="settings-card">
                <h3>📊 回调地址</h3>
                <div class="form-group">
                    <label>Webhook 接收地址</label>
                    <p style="color: #666; font-size: 12px; margin: 5px 0;">
                        配置此地址用于接收微信状态回调
                    </p>
                    <code>/api/v1/callback/node/reset</code>
                </div>
            </div>
        </div>
        <div class="page-header" style="margin-top: 30px;">
            <h3>🔗 Webhook 渠道</h3>
            <button class="btn btn-primary" onclick="showAddWebhookModal()">
                <span class="icon">➕</span> 添加 Webhook
            </button>
        </div>
        <div class="webhook-list" id="webhookTable">
            <div class="loading">加载中...</div>
        </div>
    `,
    send: `
        <div class="page-header">
            <h1>快捷消息</h1>
        </div>
        <div class="form-card">
            <div class="form-group">
                <label>选择节点</label>
                <select id="sendNode" class="select">
                    <option value="">加载中...</option>
                </select>
            </div>
            <div class="form-group">
                <label>接收人</label>
                <input type="text" id="sendWho" class="input" placeholder="接收人昵称或备注">
            </div>
            <div class="form-group">
                <label>消息内容</label>
                <textarea id="quickMsg" class="textarea" rows="3" placeholder="输入消息内容..."></textarea>
            </div>
            <button class="btn btn-primary" onclick="sendQuickMessage()">
                <span class="icon">📤</span> 发送
            </button>
        </div>
    `,
    logs: `
        <div class="page-header">
            <h1>实时日志</h1>
            <button class="btn btn-secondary" onclick="loadLogs()">
                <span class="icon">🔄</span> 刷新
            </button>
        </div>
        <div class="log-list" id="logContainer">
            <div class="loading">加载中...</div>
        </div>
    `,
    external: `
        <div class="page-header">
            <h1>外部接入</h1>
        </div>
        <div class="form-card">
            <h3>API 接入信息</h3>
            <div class="form-group">
                <label>API 地址</label>
                <code id="externalApiUrl">/api/v1/external/send</code>
            </div>
            <div class="form-group">
                <label>认证密钥</label>
                <input type="text" id="externalApiKey" class="input" value="your-external-api-key" readonly>
            </div>
            <h3 style="margin-top: 20px;">接入示例 (cURL)</h3>
            <pre class="code-block">curl -X POST "http://your-server:8080/api/v1/external/send" \\
  -H "X-ExternalKey: your-external-api-key" \\
  -H "Content-Type: application/json" \\
  -d '{"node_id": "wx1", "who": "文件传输助手", "msg": "测试消息"}'</pre>
        </div>
    `,
    plugins: `
        <div class="page-header">
            <h1>插件管理</h1>
        </div>
        <div class="plugin-list" id="pluginTable">
            <div class="loading">加载中...</div>
        </div>
    `
};

window.PAGES = PAGES;
window.APP_TEMPLATE = APP_TEMPLATE;

function getPage(name) {
    return PAGES[name] || '<p>页面不存在</p>';
}