Toolbox/public/tools/cloud_notes/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_notes/cloud_notes.css" />
</head>
<body class="theme-cloud" data-theme="dark">
  <main class="container">
    <div id="cn-header" class="cn-header">
      <h2><span class="logo-ico" aria-hidden="true"></span>云笔记</h2>
      <div class="header-actions">
        <button id="cn-search" class="icon-theme" title="搜索笔记" aria-label="搜索笔记">🔍</button>
        <button id="cn-toggle-theme" class="icon-theme" title="切换主题" aria-label="切换主题">🌙</button>
        <button id="cn-settings" class="icon-toggle" title="系统设置" aria-label="系统设置">⚙️</button>
        <button id="cn-logout-btn" class="icon-toggle" title="退出登录" aria-label="退出登录">🚪</button>
      </div>
    </div>
    <div id="cn-login" class="card" 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="cn-username" class="modal-input" type="text" autocomplete="off" readonly placeholder="请输入用户名" />
        </div>
        <div class="modal-row">
          <label class="modal-label">🔒 密码</label>
          <input id="cn-password" class="modal-input" type="password" autocomplete="off" readonly placeholder="请输入密码" />
        </div>
        <div class="action-buttons" style="margin-top:16px; justify-content:center">
          <button id="cn-login-btn" class="action-btn" style="padding:10px 24px">
            <span>🔐</span>立即登录
          </button>
          <div id="cn-login-status" class="status" style="display:none; margin-left:12px"></div>
        </div>
      </div>
    </div>
    <div id="cn-app" style="display:none">
      <div class="cn-split">
        <aside id="cn-left" class="cn-left">
          <div class="cn-main-tabs">
            <button type="button" class="cn-main-tab active" data-tab="notes">笔记</button>
            <button type="button" class="cn-main-tab" data-tab="tags">标签</button>
            <button type="button" class="cn-main-tab" data-tab="trash">回收站</button>
          </div>
          <div id="cn-tags-filter" class="cn-tags-filter" style="display:none"></div>
          <div class="cn-left-header">
            <div class="title" id="cn-left-title"></div>
            <div class="actions">
              <button id="cn-new" class="mini-btn">新建</button>
              <button id="cn-star" class="mini-btn">加星</button>
              <button id="cn-pin" class="mini-btn">置顶</button>
              <button id="cn-delete" class="mini-btn">删除</button>
              <button id="cn-clone" class="mini-btn">克隆</button>
              <button id="cn-refresh" class="mini-btn">刷新</button>
            </div>
          </div>
          <ul id="cn-list" class="cn-list"></ul>
        </aside>
        <section class="cn-right">
          <div class="cn-right-header">
            <div id="cn-right-title" class="title">驾驶舱</div>
            <div class="actions">
              <button id="cn-attach-toggle" type="button" class="mini-btn" title="展开附件" aria-label="展开附件">展开附件</button>
              <button id="cn-fullscreen" type="button" class="mini-btn" title="全屏" aria-label="全屏">全屏</button>
              <button id="cn-right-tab-dashboard" type="button" class="mini-btn">驾驶舱</button>
              <button id="cn-right-tab-editor" type="button" class="mini-btn">编辑笔记</button>
              <button id="cn-save" class="primary-btn" style="display:none">💾 保存笔记</button>
            </div>
          </div>
          <div class="cn-right-inner">
            <div id="cn-dashboard" class="card cn-dashboard">
              <div class="cn-dashboard-inner">
                <div class="cn-dashboard-placeholder">正在加载驾驶舱数据…</div>
              </div>
            </div>
            <div id="cn-editor-pane" style="display:none">
              <div class="card">
                <input id="cn-title" class="modal-input" placeholder="输入标题" style="max-width:none" />
              </div>
              <div class="card cn-tag-bar">
                <div class="cn-tag-bar-inner">
                  <div class="cn-tag-ico" title="标签">🏷️</div>
                  <div id="cn-note-tag-chips" class="cn-tag-chips"></div>
                  <button id="cn-note-tag-add" type="button" class="cn-tag-add" title="新建标签">➕</button>
                </div>
                <div id="cn-note-tag-picker" class="cn-tag-picker" style="display:none"></div>
              </div>
              <div class="cn-editor-wrapper">
                <textarea id="cn-editor"></textarea>
              </div>
              <div id="cn-attach-panel" class="card" style="margin-top:12px; display:none">
                <div class="action-buttons">
                  <button id="cn-attach" class="action-btn"><span>📎</span>附件</button>
                  <input id="cn-attach-file" type="file" style="display:none" />
                </div>
                <div id="cn-attachments" class="list-card"></div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </main>
  <div id="cn-search-layer" class="cn-search-layer" style="display:none">
    <div class="cn-search-box">
      <div class="cn-search-header">
        <div class="cn-search-scope">全部笔记</div>
        <div class="cn-search-input-wrap">
          <input id="cn-search-input" class="cn-search-input" type="text" placeholder="搜索标题或正文..." />
        </div>
        <button id="cn-search-close" class="cn-search-close" type="button" aria-label="关闭搜索">✕</button>
      </div>
      <div class="cn-search-toolbar">
        <div id="cn-search-count" class="cn-search-count"></div>
        <div class="cn-search-sort-wrap">
          <button id="cn-search-sort-btn" type="button" class="cn-search-sort-btn">默认排序</button>
          <div id="cn-search-sort-menu" class="cn-search-sort-menu" style="display:none">
            <button type="button" data-sort="default" class="active">默认排序</button>
            <button type="button" data-sort="title">笔记名称</button>
            <button type="button" data-sort="updated_at">修改时间</button>
            <button type="button" data-sort="created_at">创建时间</button>
            <button type="button" data-sort="size">笔记大小</button>
          </div>
        </div>
      </div>
      <div id="cn-search-results" class="cn-search-results"></div>
    </div>
  </div>
  <script src="/common/common.js"></script>
  <div id="cn-settings-modal" class="modal" style="display:none">
    <div class="modal-body cn-settings-body">
      <div class="cn-settings-header">
        <div class="cn-settings-title">设置</div>
        <button id="cn-settings-close" type="button" class="icon-theme" aria-label="关闭设置">✕</button>
      </div>
      <div class="cn-settings-tabs">
        <button type="button" class="cn-settings-tab active" data-tab="idle">无响应锁定</button>
        <button type="button" class="cn-settings-tab" data-tab="tags">标签设置</button>
        <button type="button" class="cn-settings-tab" data-tab="tiny_toolbar">Tiny工具栏设置</button>
      </div>
      <div class="cn-settings-panels">
        <div class="cn-settings-panel active" data-tab="idle">
          <div class="modal-row">
            <label class="modal-label">无操作锁定时间（分钟）</label>
            <input id="cn-settings-idle-minutes" class="modal-input" type="number" min="0" max="720" placeholder="留空或 0 表示不启用" />
          </div>
          <div class="modal-row">
            <div class="modal-label">超过设定时间没有键盘或鼠标操作时，将自动返回登录页面。</div>
          </div>
          <div class="action-buttons">
            <button id="cn-settings-idle-save" type="button" class="action-btn">保存设置</button>
          </div>
        </div>
        <div class="cn-settings-panel" data-tab="tags">
          <div class="modal-row">
            <div class="modal-label">标签列表（名称与颜色）</div>
          </div>
          <div id="cn-settings-tags-list" class="cn-tags-settings-list"></div>
          <div class="action-buttons">
            <button id="cn-settings-tags-add" type="button" class="action-btn">新增标签</button>
            <button id="cn-settings-tags-save" type="button" class="action-btn">保存标签</button>
          </div>
        </div>
        <div class="cn-settings-panel" data-tab="tiny_toolbar">
          <div class="modal-row">
            <div class="modal-label">选择 TinyMCE 工具栏中需要显示的功能</div>
          </div>
          <div id="cn-settings-tiny-toolbar-list" class="cn-tags-settings-list"></div>
          <div class="action-buttons">
            <button id="cn-settings-tiny-toolbar-save" type="button" class="action-btn">保存设置</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="cn-versions-modal" class="modal" style="display:none">
    <div class="modal-body cn-versions-body">
      <div class="cn-versions-header">
        <div class="cn-versions-title">版本历史</div>
        <button id="cn-versions-close" type="button" class="icon-theme" aria-label="关闭版本">✕</button>
      </div>
      <div class="cn-versions-toolbar">
        <div id="cn-versions-summary" class="cn-versions-summary"></div>
        <div class="cn-versions-actions">
          <button id="cn-versions-compare" type="button" class="mini-btn">对比选中</button>
        </div>
      </div>
      <div class="cn-versions-main">
        <div id="cn-versions-list" class="cn-versions-list"></div>
        <div class="cn-versions-compare">
          <div class="cn-compare-header">
            <div id="cn-compare-left-title" class="cn-compare-title">左侧版本</div>
            <div id="cn-compare-right-title" class="cn-compare-title">右侧版本</div>
          </div>
          <div class="cn-compare-body">
            <div id="cn-compare-left" class="cn-compare-pane"></div>
            <div id="cn-compare-right" class="cn-compare-pane"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="cn-conflict-modal" class="modal" style="display:none">
    <div class="modal-body cn-conflict-body">
      <div class="cn-conflict-title">版本冲突</div>
      <div id="cn-conflict-desc" class="cn-conflict-desc"></div>
      <div class="cn-conflict-actions">
        <button id="cn-conflict-compare" type="button" class="action-btn">查看对比</button>
        <button id="cn-conflict-force" type="button" class="action-btn">覆盖保存</button>
        <button id="cn-conflict-cancel" type="button" class="action-btn">取消</button>
      </div>
    </div>
  </div>
  <script src="/tools/cloud_notes/cloud_notes.js?v=3"></script>
</body>
</html>