Toolbox/public/tools/oss_file_cabinet/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OSS 文件柜</title>
  <link rel="stylesheet" href="oss_file_cabinet.css">
</head>
<body>
  <div id="loginScreen" class="login-screen">
    <div class="login-card">
      <div class="login-icon">🗂️</div>
      <h1>OSS 文件柜</h1>
      <p class="login-subtitle">请输入账号和密码登录</p>
      <div class="login-form">
        <div class="form-group">
          <label>用户名</label>
          <input type="text" id="loginUsername" autocomplete="username" autofocus>
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" id="loginPassword" autocomplete="current-password">
        </div>
        <button id="loginBtn" class="btn-primary">登录</button>
        <div id="loginError" class="login-error"></div>
      </div>
    </div>
  </div>

  <div id="app" class="finder-app" style="display:none;">
    <div class="finder-window">
      <div class="finder-titlebar">
        <div class="window-buttons">
          <span class="btn-close"></span>
          <span class="btn-mini"></span>
          <span class="btn-max"></span>
        </div>
        <div class="finder-title">OSS 文件柜</div>
        <div class="finder-actions">
          <button id="btnThemeToggle" class="icon-btn" title="切换浅色/深色模式">🌓</button>
          <button id="btnLogout" class="icon-btn" title="退出登录">⎋</button>
        </div>
      </div>

      <div class="finder-toolbar">
        <div class="nav-buttons">
          <button id="btnBack" class="nav-btn" title="返回">◀</button>
          <button id="btnForward" class="nav-btn" title="前进">▶</button>
        </div>
        <div class="path-bar" id="pathBar"></div>
        <div class="view-switcher">
          <button class="view-btn active" data-view="icon" title="图标视图">▦</button>
          <button class="view-btn" data-view="list" title="列表视图">☰</button>
          <button class="view-btn" data-view="column" title="分栏视图">▥</button>
        </div>
        <div class="search-box">
          <input type="text" id="searchInput" placeholder="搜索">
        </div>
      </div>

      <div class="finder-body">
        <div class="finder-sidebar">
          <div class="sidebar-section-title">个人收藏</div>
          <div class="sidebar-item active" data-target="home">
            <span class="sidebar-icon">🏠</span><span>全部文件</span>
          </div>
          <div class="sidebar-item" data-target="trash">
            <span class="sidebar-icon">🗑️</span><span>废纸篓</span>
          </div>
          <div class="sidebar-item" data-target="images">
            <span class="sidebar-icon">🖼️</span><span>图片</span>
          </div>
        </div>

        <div class="finder-content">
          <div id="fileArea" class="file-area icon-view">
            <div class="empty-state" style="display:none;">
              <div class="empty-icon">📂</div>
              <div class="empty-title">空文件夹</div>
              <div class="empty-hint">拖拽文件到此处或点击「上传」</div>
            </div>
          </div>
        </div>
      </div>

      <div class="finder-statusbar">
        <span id="statusInfo">0 个项目</span>
        <span id="statusSelect"></span>
      </div>
    </div>

    <div id="dropOverlay" class="drop-overlay">
      <div class="drop-box">
        <div class="drop-icon">⬆️</div>
        <div class="drop-text">松开以将文件上传到当前目录</div>
      </div>
    </div>
  </div>

  <div id="filePreview" class="modal" style="display:none;">
    <div class="modal-backdrop"></div>
    <div class="modal-content image-preview">
      <button class="modal-close" id="closePreview">✕</button>
      <div id="previewContainer"></div>
    </div>
  </div>

  <div id="contextMenu" class="context-menu" style="display:none;">
    <div class="cm-item" data-action="open">打开</div>
    <div class="cm-item" data-action="preview">预览</div>
    <div class="cm-item" data-action="rename">重命名</div>
    <div class="cm-item" data-action="info">显示简介</div>
    <div class="cm-sep"></div>
    <div class="cm-item" data-action="copy">复制</div>
    <div class="cm-item" data-action="move">移动到…</div>
    <div class="cm-item" data-action="download">下载</div>
    <div class="cm-item" data-action="compress">压缩</div>
    <div class="cm-item" data-action="share">分享临时链接…</div>
    <div class="cm-item" data-action="raw_url">原始OSS链接（不建议）</div>
    <div class="cm-sep"></div>
    <div class="cm-item danger" data-action="delete">移到废纸篓</div>
  </div>

  <div id="folderContextMenu" class="context-menu" style="display:none;">
    <div class="cm-item" data-action="new_folder">新建文件夹</div>
    <div class="cm-item" data-action="upload">上传文件…</div>
    <div class="cm-sep"></div>
    <div class="cm-item" data-action="paste">粘贴</div>
    <div class="cm-item" data-action="refresh">刷新</div>
  </div>

  <div id="trashContextMenu" class="context-menu" style="display:none;">
    <div class="cm-item" data-action="restore">放回</div>
    <div class="cm-item danger" data-action="empty_perm">彻底删除</div>
  </div>

  <div id="modalDialog" class="modal" style="display:none;">
    <div class="modal-backdrop"></div>
    <div class="modal-content">
      <div class="modal-title" id="modalTitle"></div>
      <div class="modal-body" id="modalBody"></div>
      <div class="modal-footer">
        <button class="btn-ghost" id="modalCancel">取消</button>
        <button class="btn-primary" id="modalOk">确定</button>
      </div>
    </div>
  </div>

  <input type="file" id="fileInput" multiple style="display:none;">
  <script src="oss_file_cabinet.js"></script>
</body>
</html>