Toolbox/public/tools/private_clipboard/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/16X16PNG/attach.png" type="image/png" />
    <link rel="stylesheet" href="/common/common.css" />
    <link rel="stylesheet" href="/tools/private_clipboard/clipboard.css" />
  </head>
  <body>
    <!-- 登录界面 -->
    <section id="pc-auth" class="pc-auth-card">
      <h2>私人剪贴板 - 登录</h2>
      <div class="pc-auth-form" autocomplete="off">
        <input id="pc-login-user" placeholder="用户名" autocomplete="off" readonly />
        <input id="pc-login-pass" placeholder="密码" type="password" autocomplete="off" readonly />
        <button id="pc-btn-login" class="btn">登录</button>
      </div>
      <div id="pc-auth-status" class="pc-auth-status" style="display:none"></div>
    </section>

    <!-- 主应用界面 -->
    <main id="pc-app" class="pc-main" style="display:none">
      <div class="pc-topbar">
        <span class="pc-topbar-title">私人剪贴板</span>
        <button id="pc-btn-logout" class="btn pc-btn-logout" type="button">注销</button>
      </div>
      <section class="pc-input">
        <div class="pc-desktop-entry pc-desktop-only">
          <div class="pc-entry-tabs" role="tablist" aria-label="桌面录入方式">
            <button id="pc-entry-quick" class="btn pc-entry-tab active" type="button" role="tab" aria-selected="true">快捷录入</button>
            <button id="pc-entry-classic" class="btn pc-entry-tab" type="button" role="tab" aria-selected="false">传统录入</button>
          </div>
          <div id="pc-entry-panel-quick" class="pc-entry-panel active" role="tabpanel">
            <div id="paste-zone" class="pc-paste-zone" tabindex="0">
              <div class="pc-paste-text">在这里粘贴文字 / 图片 / 文件</div>
              <div class="pc-paste-hint">适合临时快速收集，聚焦后可用 Ctrl+V / ⌘V，支持拖拽多文件</div>
              <div class="pc-paste-actions">
              </div>
            </div>
          </div>
          <div id="pc-entry-panel-classic" class="pc-entry-panel" role="tabpanel" aria-hidden="true">
            <div class="pc-classic-note">适合重要内容的稳妥录入，减少误操作。图片和文件都支持多选。</div>
            <div class="pc-classic-grid">
              <div class="pc-classic-block">
                <div class="pc-classic-title">文字录入</div>
                <textarea id="pc-classic-text" class="pc-classic-text" placeholder="输入文字后，点保存文字" spellcheck="false"></textarea>
                <div class="pc-classic-actions">
                  <button id="pc-classic-text-save" class="btn" type="button">保存文字</button>
                </div>
              </div>
              <div class="pc-classic-block">
                <div class="pc-classic-title">图片录入</div>
                <input id="pc-classic-image" class="pc-classic-file" type="file" accept="image/*" multiple />
                <div class="pc-classic-hint">可多选图片，统一上传</div>
                <div class="pc-classic-actions">
                  <button id="pc-classic-image-save" class="btn" type="button">保存图片</button>
                </div>
              </div>
              <div class="pc-classic-block">
                <div class="pc-classic-title">文件录入</div>
                <input id="pc-classic-file" class="pc-classic-file" type="file" multiple />
                <div class="pc-classic-hint">可多选文件，统一上传</div>
                <div class="pc-classic-actions">
                  <button id="pc-classic-file-save" class="btn" type="button">保存文件</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <textarea id="pc-paste-input" class="pc-paste-input pc-desktop-only" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea>
        <div class="pc-mobile-inputs pc-mobile-only">
          <div class="pc-mobile-block">
            <div class="pc-mobile-title">文字</div>
            <textarea id="pc-mobile-text" class="pc-mobile-text" placeholder="输入文字后点击保存" spellcheck="false"></textarea>
            <div class="pc-mobile-actions">
              <button id="pc-mobile-text-save" class="btn" type="button">保存文字</button>
            </div>
          </div>
          <div class="pc-mobile-block">
            <div class="pc-mobile-title">图片</div>
            <input id="pc-mobile-image" class="pc-mobile-file" type="file" accept="image/*" multiple />
            <div class="pc-mobile-actions">
              <button id="pc-mobile-image-save" class="btn" type="button">保存图片</button>
            </div>
          </div>
          <div class="pc-mobile-block">
            <div class="pc-mobile-title">文件</div>
            <input id="pc-mobile-file" class="pc-mobile-file" type="file" multiple />
            <div class="pc-mobile-actions">
              <button id="pc-mobile-file-save" class="btn" type="button">保存文件</button>
            </div>
          </div>
        </div>
        <div id="pc-status" class="pc-status"></div>
        <div id="pc-progress" class="pc-progress">
          <div class="pc-progress-row">
            <div id="pc-progress-text" class="pc-progress-text"></div>
            <div id="pc-progress-percent" class="pc-progress-percent"></div>
          </div>
          <div class="pc-progress-bar">
            <div id="pc-progress-fill" class="pc-progress-fill"></div>
          </div>
        </div>
      </section>
      <section class="pc-list">
        <div class="pc-list-header">
          <div class="pc-list-title">
            <span id="pc-view-title">全部内容</span>
            <span id="pc-count" class="pc-count"></span>
          </div>
          <div class="pc-list-actions">
            <button id="pc-manage-folders" class="btn" type="button">目录管理</button>
            <button id="pc-refresh" class="btn" type="button">刷新</button>
          </div>
        </div>
        <div class="pc-view-tabs">
          <button id="pc-view-all" class="btn active" type="button">全部内容</button>
          <button id="pc-view-favorites" class="btn" type="button">我的收藏</button>
        </div>
        <div id="pc-favorite-filter" class="pc-favorite-filter" style="display:none">
          <label for="pc-folder-select">收藏目录</label>
          <select id="pc-folder-select"></select>
        </div>
        <div class="pc-filter">
          <div class="pc-filter-types">
            <button class="btn pc-filter-btn" data-type="all" type="button">全部</button>
            <button class="btn pc-filter-btn" data-type="text" type="button">文字</button>
            <button class="btn pc-filter-btn" data-type="image" type="button">图片</button>
            <button class="btn pc-filter-btn" data-type="file" type="button">文件</button>
          </div>
          <div class="pc-filter-search">
            <input id="pc-filter-input" placeholder="筛选关键字（内容/文件名）" />
            <button id="pc-filter-clear" class="btn" type="button">清空</button>
          </div>
        </div>
        <div id="pc-pagination-top" class="pc-pagination"></div>
        <div id="pc-items" class="pc-items"></div>
        <div id="pc-empty" class="pc-empty">暂无内容</div>
        <div id="pc-pagination-bottom" class="pc-pagination"></div>
      </section>
    </main>
    <div id="pc-favorite-modal" class="pc-modal">
      <div class="pc-modal-backdrop" data-close="favorite"></div>
      <div class="pc-modal-body">
        <div class="pc-modal-header">
          <div class="pc-modal-title">收藏到目录</div>
          <button id="pc-favorite-close" class="btn" type="button">关闭</button>
        </div>
        <div class="pc-modal-content">
          <div class="pc-modal-row">
            <label for="pc-favorite-folder-select">选择目录</label>
            <select id="pc-favorite-folder-select"></select>
          </div>
          <div class="pc-modal-row pc-modal-row-stack">
            <label for="pc-favorite-note">收藏备注</label>
            <textarea id="pc-favorite-note" rows="4" placeholder="可选：写下为什么要留这条，方便以后快速想起"></textarea>
          </div>
          <div class="pc-modal-actions">
            <button id="pc-favorite-go-manage" class="btn" type="button">管理目录</button>
            <button id="pc-favorite-confirm" class="btn" type="button">确认收藏</button>
          </div>
        </div>
      </div>
    </div>
    <div id="pc-folder-modal" class="pc-modal">
      <div class="pc-modal-backdrop" data-close="folder"></div>
      <div class="pc-modal-body">
        <div class="pc-modal-header">
          <div class="pc-modal-title">收藏目录管理</div>
          <button id="pc-folder-close" class="btn" type="button">关闭</button>
        </div>
        <div class="pc-modal-content">
          <div class="pc-modal-row">
            <input id="pc-folder-name" placeholder="目录名称，例如：工作参考" />
            <input id="pc-folder-sort" type="number" min="1" step="1" placeholder="排序(正整数)" />
            <button id="pc-folder-create" class="btn" type="button">新增目录</button>
          </div>
          <div id="pc-folder-list" class="pc-folder-list"></div>
        </div>
      </div>
    </div>
    <div id="pc-unfavorite-modal" class="pc-modal">
      <div class="pc-modal-backdrop" data-close="unfavorite"></div>
      <div class="pc-modal-body">
        <div class="pc-modal-header">
          <div class="pc-modal-title">确认取消收藏</div>
          <button id="pc-unfavorite-close" class="btn" type="button">关闭</button>
        </div>
        <div class="pc-modal-content">
          <div id="pc-unfavorite-message" class="pc-modal-message">取消收藏后，这条内容将失去长期保护，之后才能被删除。</div>
          <div class="pc-modal-actions">
            <button id="pc-unfavorite-cancel" class="btn" type="button">先保留</button>
            <button id="pc-unfavorite-confirm" class="btn" type="button">确认取消</button>
          </div>
        </div>
      </div>
    </div>
    <div id="pc-viewer" class="pc-viewer">
      <div id="pc-viewer-backdrop" class="pc-viewer-backdrop"></div>
      <div class="pc-viewer-body">
        <div class="pc-viewer-toolbar">
          <div id="pc-viewer-count" class="pc-viewer-count"></div>
          <button id="pc-viewer-close" class="pc-viewer-close" type="button">✕</button>
        </div>
        <button id="pc-viewer-prev" class="pc-viewer-nav prev" type="button">‹</button>
        <img id="pc-viewer-img" class="pc-viewer-img" />
        <button id="pc-viewer-next" class="pc-viewer-nav next" type="button">›</button>
        <div class="pc-viewer-actions">
          <button id="pc-viewer-copy-url" class="btn" type="button">复制URL</button>
          <button id="pc-viewer-copy-img" class="btn" type="button">复制图片</button>
        </div>
      </div>
    </div>
    <script src="/tools/private_clipboard/clipboard.js"></script>
  </body>
  </html>