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>
    <main class="pc-main">
      <section class="pc-input">
        <div id="paste-zone" class="pc-paste-zone pc-desktop-only" tabindex="0">
          <div class="pc-paste-text">在这里粘贴文字 / 图片 / 文件</div>
          <div class="pc-paste-hint">聚焦后可用 Ctrl+V / ⌘V，支持拖拽多文件</div>
          <div class="pc-paste-actions">
           
          </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-items" class="pc-items"></div>
        <div id="pc-empty" class="pc-empty">暂无内容</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-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-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>