Toolbox/public/tools/cloud_sheets/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_sheets/cloud_sheets.css?v=3" />
</head>
<body class="theme-cloud-sheets" data-theme="dark">
  <main class="container">
    <div id="cs-header" class="cs-header">
      <h2><span class="logo-ico" aria-hidden="true"></span>云表格</h2>
      <div class="header-actions">
        <button id="cs-search-open" class="icon-theme" title="搜索表格" aria-label="搜索表格">🔍</button>
        <button id="cs-toggle-theme" class="icon-theme" title="切换主题" aria-label="切换主题">🌙</button>
        <button id="cs-logout-btn" class="icon-toggle" title="退出登录" aria-label="退出登录">🚪</button>
      </div>
    </div>
    <div id="cs-login" class="card cs-login" style="max-width:450px; margin:24px auto; display:none">
      <h3 style="margin:0 0 16px 0; text-align:center; font-size:20px">欢迎使用云表格</h3>
      <div class="list-card">
        <div class="modal-row">
          <label class="modal-label">👤 用户名</label>
          <input id="cs-username" class="modal-input" type="text" autocomplete="off" readonly placeholder="请输入用户名" />
        </div>
        <div class="modal-row">
          <label class="modal-label">🔒 密码</label>
          <input id="cs-password" class="modal-input" type="password" autocomplete="off" readonly placeholder="请输入密码" />
        </div>
        <div class="action-buttons" style="margin-top:16px; justify-content:center">
          <button id="cs-login-btn" class="action-btn" style="padding:10px 24px">
            <span>🔐</span>立即登录
          </button>
          <div id="cs-login-status" class="status" style="display:none; margin-left:12px"></div>
        </div>
      </div>
    </div>
    <div id="cs-app" style="display:none">
      <div class="cs-split">
        <aside class="cs-left">
          <div class="cs-left-header">
            <div class="actions">
              <button id="cs-new" class="mini-btn">新建</button>
              <button id="cs-refresh-list" class="mini-btn">刷新</button>
              <button id="cs-clone" class="mini-btn">克隆</button>
              <button id="cs-star" class="mini-btn">加星</button>
              <button id="cs-pin" class="mini-btn">置顶</button>
              <button id="cs-delete" class="mini-btn">删除</button>
              <button id="cs-trash-tab" class="mini-btn">回收站</button>
            </div>
          </div>
          <ul id="cs-list" class="cs-list"></ul>
        </aside>
        <section class="cs-right">
          <div id="cs-home-view" style="display:flex; flex:1; align-items:center; justify-content:center; color:#94a3b8; font-size:1.5rem; user-select:none;">
            统计分析，待开发中。。。
          </div>
          <div id="cs-editor-view" style="display:none; flex:1; flex-direction:column; overflow:hidden;">
            <div class="cs-right-header">
              <input id="cs-title" class="modal-input" placeholder="输入表格标题" />
              <div class="actions">
                <button id="cs-save" class="primary-btn">保存</button>
                <button id="cs-fullscreen" class="mini-btn">全屏</button>
                <button id="cs-version-btn" class="mini-btn">版本</button>
                <button id="cs-attach-toggle" class="mini-btn">附件</button>
              </div>
            </div>
            <div class="cs-editor-wrap">
              <div id="cs-univer" class="cs-univer-host"></div>
              <textarea id="cs-fallback-json" class="cs-fallback-json" style="display:none"></textarea>
            </div>
            <div id="cs-attach-panel" class="card cs-attach-panel" style="display:none">
              <div class="action-buttons">
                <button id="cs-attach-btn" class="action-btn">上传附件</button>
                <input id="cs-attach-file" type="file" style="display:none" />
              </div>
              <div id="cs-attachments" class="list-card"></div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </main>
  <div id="cs-search-layer" class="cs-search-layer" style="display:none">
    <div class="cs-search-box">
      <div class="cs-search-header">
        <input id="cs-search-input" class="cs-search-input" type="text" placeholder="搜索标题或内容摘要..." />
        <button id="cs-search-close" class="cs-search-close">关闭</button>
      </div>
      <div id="cs-search-results" class="cs-search-results"></div>
    </div>
  </div>
  <div id="cs-versions-modal" class="modal" style="display:none">
    <div class="modal-body cs-versions-body">
      <div class="cs-versions-header">
        <div>版本历史</div>
        <button id="cs-versions-close" class="icon-theme">✕</button>
      </div>
      <div id="cs-versions-list" class="cs-versions-list"></div>
    </div>
  </div>
  <div id="cs-loading" class="cs-loading" style="display:none">
    <div class="cs-loading-box">
      <div id="cs-loading-title">处理中</div>
      <div id="cs-loading-msg" class="cs-loading-msg"></div>
      <div id="cs-loading-status" class="cs-loading-status">运行中</div>
      <div id="cs-loading-logs" class="cs-loading-logs"></div>
      <div class="cs-loading-actions">
        <button id="cs-loading-copy" class="mini-btn">复制日志</button>
        <button id="cs-loading-close" class="mini-btn">关闭</button>
      </div>
    </div>
  </div>
  <div id="cs-dialog" class="cs-dialog" style="display:none">
    <div class="cs-dialog-box">
      <div class="cs-dialog-head">
        <div id="cs-dialog-title">提示</div>
        <button id="cs-dialog-close" class="icon-theme">✕</button>
      </div>
      <div id="cs-dialog-msg" class="cs-dialog-msg"></div>
      <div id="cs-dialog-actions" class="cs-dialog-actions"></div>
    </div>
  </div>
  <script src="/common/common.js"></script>
  <script src="/tools/cloud_sheets/cloud_sheets.js?v=19"></script>
</body>
</html>