Toolbox/public/tools/cloud/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>云产品管理</title>
  <link rel="icon" href="/icons/cloud.svg" type="image/svg+xml" />
  <link rel="stylesheet" href="/common/common.css" />
  <link rel="stylesheet" href="/tools/cloud/cloud.css" />
</head>
<body class="theme-cloud">
  <main class="container">
    <div class="cloud-header"><h2><span class="logo-ico" aria-hidden="true"></span>云产品管理</h2><div class="cloud-tabs"><div class="tabs horizontal"><button id="tab-ops" class="tab active"><svg width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="currentColor"/><path d="M4 22c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>运营商</button><button id="tab-ecs" class="tab"><svg width="16" height="16" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="9" y="19" width="6" height="1.5" fill="currentColor"/></svg>ECS服务器</button><button id="tab-vas" class="tab"><svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2"/></svg>增值服务</button><button id="tab-renew" class="tab"><svg width="16" height="16" viewBox="0 0 24 24"><path d="M6 9a6 6 0 0 1 10 0l2-2v6h-6l2-2a4 4 0 1 0-6 0" fill="none" stroke="currentColor" stroke-width="2"/></svg>续费情况</button><button id="tab-notes" class="tab"><svg width="16" height="16" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" fill="none" stroke="currentColor" stroke-width="2"/><polyline points="14 2 14 8 20 8" fill="none" stroke="currentColor" stroke-width="2"/><line x1="16" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2"/><line x1="16" y1="17" x2="8" y2="17" stroke="currentColor" stroke-width="2"/><polyline points="10 9 9 9 8 9" fill="none" stroke="currentColor" stroke-width="2"/></svg>学习笔记</button><button id="tab-balance" class="tab"><svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-3.4 8.9-8 10-4.6-1.1-8-5-8-10V6l8-4z" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 12h8M12 8v8" stroke="currentColor" stroke-width="2"/></svg>欠费通知</button></div></div><div class="header-actions"><button id="cloud-toggle-theme" class="icon-theme" title="深色/浅色切换" aria-label="深色/浅色切换">🌙</button><button id="cloud-toggle-nav" class="icon-toggle" title="显示/隐藏导航" aria-label="显示/隐藏导航"></button></div></div>
    <div class="cloud-layout">
      
      <div id="cloud-content">
        <div id="status" class="status" style="display:none"></div>
        <button id="font-size-toggle" class="font-size-toggle" title="切换字体大小">字体大小</button>

        <section id="panel-ops" class="panel card">
          <div class="action-buttons">
            <button class="action-btn" onclick="openModal('ops', 'add')">
              <span>➕</span>新增运营商
            </button>
          </div>
          <div class="list-card"><table class="grid"><thead><tr><th>名称</th><th>账号</th><th>登录密码</th><th>手机</th><th>关联人</th><th>备注</th><th class="col-cert">认证</th><th class="col-actions">操作</th></tr></thead><tbody id="ops-body"></tbody></table></div>
        </section>

        <section id="panel-ecs" class="panel card" style="display:none">
          <div class="action-buttons">
            <button class="action-btn" onclick="openModal('ecs', 'add')">
              <span>➕</span>新增服务器
            </button>
          </div>
          <div class="list-card"><table class="grid"><thead><tr><th>ID</th><th>运营商</th><th>服务器名称</th><th>所在地区</th><th>所在区域</th><th>远程桌面IP</th><th>远程账号</th><th>远程账号密码</th><th>服务器配置</th><th>开放端口范围</th><th class="col-actions">操作</th></tr></thead><tbody id="ecs-body"></tbody></table></div>
        </section>

        <section id="panel-vas" class="panel card" style="display:none">
          <div class="action-buttons">
            <button class="action-btn" onclick="openModal('vas', 'add')">
              <span>➕</span>新增增值服务
            </button>
          </div>
          <div class="list-card"><table class="grid"><thead><tr><th>ID</th><th>运营商</th><th>名称</th><th>增值服务配置</th><th>Access信息</th><th class="col-actions">操作</th></tr></thead><tbody id="vas-body"></tbody></table></div>
        </section>

        <section id="panel-renew" class="panel card" style="display:none">
          <div class="action-buttons">
            <button class="action-btn" onclick="openModal('renew', 'add')">
              <span>➕</span>新增续费记录
            </button>
          </div>
          <div class="list-card"><table class="grid"><thead><tr><th>缴费主体</th><th>主体名称</th><th>主体ID</th><th>缴费日期</th><th>缴费金额</th><th>发票</th><th>公司缴费人</th><th>到期日期</th><th>下期预计费用</th><th class="col-actions">操作</th></tr></thead><tbody id="rn-body"></tbody></table></div>
        </section>

        <section id="panel-notes" class="panel card" style="display:none">
          <div class="action-buttons">
            <button class="action-btn" onclick="openModal('notes', 'add')">
              <span>➕</span>新增学习笔记
            </button>
          </div>
          <div class="list-card"><table class="grid"><thead><tr><th>关联类型</th><th>关联主体</th><th>问题描述</th><th>解决方案</th><th>附件</th><th class="col-actions">操作</th></tr></thead><tbody id="nt-body"></tbody></table></div>
        </section>

        <section id="panel-balance" class="panel card" style="display:none">
          <div class="action-buttons">
            <button id="balance-btn-scan" class="action-btn">
              <span>📬</span>立即补扫
            </button>
            <button id="balance-btn-refresh" class="action-btn view">
              <span>🔄</span>刷新列表
            </button>
            <input id="balance-keyword" class="modal-input balance-search" placeholder="搜索标题或正文关键词" />
          </div>
          <div class="balance-tip-box">
            <div class="balance-tip-title">扩展提示</div>
            <div class="balance-tip-text">当前已接入阿里云欠费邮件告警。未来如需增加亿速云等其他云厂商告警邮件，按插件式扩展即可：每个来源独立维护匹配规则、解析逻辑、推送策略与配置，不影响现有阿里云链路。</div>
          </div>
          <div id="balance-status-cards" class="balance-status-cards"></div>
          <div class="list-card">
            <table class="grid">
              <thead>
                <tr>
                  <th>接收时间(北京)</th>
                  <th>风险级别</th>
                  <th>邮件标题</th>
                  <th>邮件正文</th>
                  <th>发件人</th>
                  <th>日历同步</th>
                  <th>周报预留</th>
                  <th class="col-actions">操作</th>
                </tr>
              </thead>
              <tbody id="balance-body"></tbody>
            </table>
          </div>
          <div id="balance-pagination" class="balance-pagination"></div>
        </section>

        <!-- 模态框容器 -->
        <div id="modal-overlay" class="modal-overlay">
          <div id="modal" class="modal">
            <div class="modal-header">
              <h3 id="modal-title" class="modal-title">模态框标题</h3>
              <button class="modal-close" onclick="closeModal()">×</button>
            </div>
            <div id="modal-body" class="modal-body">
              <!-- 模态框内容将通过JavaScript动态生成 -->
            </div>
            <div id="modal-footer" class="modal-footer">
              <!-- 模态框按钮将通过JavaScript动态生成 -->
            </div>
          </div>
        </div>

        <section class="debug" id="cloud-debug" style="display:none">
          <div class="debug-actions">
            <button id="cd-btn-copy" class="btn">复制调试信息</button>
            <button id="cd-btn-refresh" class="btn">刷新</button>
            <button id="cd-btn-clear" class="btn">清空</button>
          </div>
          <div id="cd-output" class="debug-output"></div>
        </section>
      </div>
    </div>

    <section class="debug" id="cloud-debug" style="display:none">
      <div class="debug-actions">
        <button id="cd-btn-copy" class="btn">复制调试信息</button>
        <button id="cd-btn-refresh" class="btn">刷新</button>
        <button id="cd-btn-clear" class="btn">清空</button>
      </div>
      <div id="cd-output" class="debug-output"></div>
    </section>
  </main>
  <script src="/common/common.js"></script>
  <link rel="stylesheet" href="/tools/cloud/theme/tokens.css" />
  <link rel="stylesheet" href="/tools/cloud/theme/components.css" />
  <script src="/tools/cloud/cloud.js"></script>
  <script src="/tools/cloud/theme/script.js"></script>
  <script>
    try { fetch('/api/debug/event', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ source:'cloud', action:'inline_boot' }) }) } catch {}
  </script>
</body>
</html>