chore: add and update gitignore rules for project files
add a comprehensive gitignore file to exclude unnecessary files like dependencies, runtime data, uploads, local configs and debug temporary files
This commit is contained in:
yangxiangyuan
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"_comment": "OSS 文件柜前端鉴权配置",
|
||||
"enable_auth_comment": "true: 启用三层鉴权（cookie/GUID/token）; false: 完全放开访问",
|
||||
"enable_auth": true,
|
||||
"max_age_days_comment": "鉴权 cookie 最大有效天数（1~365），过期后需重新获取入口授权",
|
||||
"max_age_days": 30,
|
||||
"cookieName_comment": "鉴权 Cookie 名称（gate 外层 cookie，不等于业务登录态）",
|
||||
"cookieName": "oss_file_cabinet_gate",
|
||||
"requireGuid_comment": "true：入口必须带 guid 参数，否则直接拒绝；false：允许仅凭 token 或已有会话访问",
|
||||
"requireGuid": true,
|
||||
"guidParam_comment": "URL 中的 GUID 参数名，建议使用小写 guid",
|
||||
"guidParam": "guid",
|
||||
"guidValue_comment": "GUID 参数值，建议使用高强度随机长串并定期更换，不在前端硬编码",
|
||||
"guidValue": "db8a_2f1c-90e7-45a-a(d2-c3e4f50890"
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,688 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #f5f5f7;
|
||||
--window-bg: #ffffff;
|
||||
--sidebar-bg: #ececec;
|
||||
--header-bg: #f0f0f2;
|
||||
--text: #1d1d1f;
|
||||
--text-secondary: #6e6e73;
|
||||
--border: rgba(0,0,0,0.08);
|
||||
--selection: #0a84ff;
|
||||
--selection-bg: rgba(10,132,255,0.14);
|
||||
--selection-border: rgba(10,132,255,0.35);
|
||||
--hover-bg: rgba(0,0,0,0.04);
|
||||
--danger: #ff3b30;
|
||||
--shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.08);
|
||||
--radius: 10px;
|
||||
--radius-sm: 6px;
|
||||
}
|
||||
|
||||
:root.theme-dark {
|
||||
--bg: #1e1e1e;
|
||||
--window-bg: #2c2c2e;
|
||||
--sidebar-bg: #232325;
|
||||
--header-bg: #2a2a2c;
|
||||
--text: #f5f5f7;
|
||||
--text-secondary: #a1a1a6;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--selection: #0a84ff;
|
||||
--selection-bg: rgba(10,132,255,0.25);
|
||||
--selection-border: rgba(10,132,255,0.5);
|
||||
--hover-bg: rgba(255,255,255,0.05);
|
||||
--shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; color: inherit; }
|
||||
input, select, textarea { font-family: inherit; outline: none; }
|
||||
|
||||
/* ===== 登录页 ===== */
|
||||
.login-screen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #6b7dff 0%, #b066ff 50%, #ff6ec7 100%);
|
||||
}
|
||||
|
||||
:root.theme-dark .login-screen { background: linear-gradient(180deg, #1a1d2e 0%, #2a1d3a 50%, #3a1d2e 100%); }
|
||||
|
||||
.login-card {
|
||||
width: 320px;
|
||||
padding: 32px 28px;
|
||||
background: var(--window-bg);
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
text-align: center;
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
}
|
||||
|
||||
.login-icon { font-size: 48px; margin-bottom: 8px; }
|
||||
.login-card h1 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
|
||||
.login-subtitle { font-size: 12px; color: var(--text-secondary); margin-bottom: 20px; }
|
||||
|
||||
.login-form { text-align: left; }
|
||||
.form-group { margin-bottom: 12px; }
|
||||
.form-group label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
}
|
||||
.form-group input:focus { border-color: var(--selection); }
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 9px 16px;
|
||||
background: var(--selection);
|
||||
color: #fff;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-top: 6px;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn-primary:hover { opacity: 0.88; }
|
||||
.btn-ghost {
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn-ghost:hover { background: var(--hover-bg); }
|
||||
|
||||
.login-error { margin-top: 12px; color: var(--danger); font-size: 12px; text-align: center; min-height: 16px; }
|
||||
|
||||
/* ===== Finder 窗口 ===== */
|
||||
.finder-app { width: 100%; height: 100vh; padding: 12px; }
|
||||
|
||||
.finder-window {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--window-bg);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.finder-titlebar {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
background: var(--header-bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.window-buttons { display: flex; gap: 8px; }
|
||||
.window-buttons span {
|
||||
width: 12px; height: 12px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
.btn-close { background: #ff5f57; }
|
||||
.btn-mini { background: #febc2e; }
|
||||
.btn-max { background: #28c840; }
|
||||
|
||||
.finder-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.finder-actions { display: flex; gap: 6px; }
|
||||
.icon-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.icon-btn:hover { background: var(--hover-bg); color: var(--text); }
|
||||
|
||||
/* ===== Toolbar ===== */
|
||||
.finder-toolbar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
gap: 12px;
|
||||
background: var(--header-bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-buttons { display: flex; gap: 4px; }
|
||||
.nav-btn {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.nav-btn:hover { background: var(--hover-bg); color: var(--text); }
|
||||
|
||||
.path-bar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 12px;
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
min-height: 28px;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.crumb {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.crumb.active { color: var(--text); font-weight: 500; }
|
||||
.crumb:hover:not(.active) { background: var(--hover-bg); color: var(--text); }
|
||||
.crumb-sep { color: var(--text-secondary); opacity: 0.5; }
|
||||
|
||||
.view-switcher {
|
||||
display: flex;
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 2px;
|
||||
}
|
||||
.view-btn {
|
||||
width: 28px; height: 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.view-btn:hover { color: var(--text); }
|
||||
.view-btn.active { background: var(--window-bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
|
||||
|
||||
.search-box input {
|
||||
width: 180px;
|
||||
padding: 6px 10px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
}
|
||||
.search-box input:focus { border-color: var(--selection); }
|
||||
|
||||
/* ===== Body ===== */
|
||||
.finder-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.finder-sidebar {
|
||||
width: 180px;
|
||||
background: var(--sidebar-bg);
|
||||
padding: 10px 6px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.sidebar-section-title {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
padding: 8px 10px 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
margin: 1px 0;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
}
|
||||
.sidebar-item:hover { background: var(--hover-bg); }
|
||||
.sidebar-item.active { background: var(--selection); color: #fff; }
|
||||
.sidebar-icon { font-size: 14px; }
|
||||
|
||||
.finder-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: var(--window-bg);
|
||||
}
|
||||
|
||||
/* ===== 文件区 ===== */
|
||||
.file-area {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 18px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 图标视图 */
|
||||
.icon-view {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
|
||||
gap: 16px;
|
||||
align-content: start;
|
||||
}
|
||||
.icon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 8px 6px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 0.12s;
|
||||
user-select: none;
|
||||
}
|
||||
.icon-item:hover { background: var(--hover-bg); }
|
||||
.icon-item.selected { background: var(--selection-bg); }
|
||||
.icon-wrap {
|
||||
width: 64px; height: 64px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 34px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 12px;
|
||||
background: var(--file-icon-bg, #f0f0f0);
|
||||
overflow: hidden;
|
||||
}
|
||||
.icon-wrap.file-red { background: #ffebee; }
|
||||
.icon-wrap.file-blue { background: #e3f2fd; }
|
||||
.icon-wrap.file-green { background: #e8f5e9; }
|
||||
.icon-wrap.file-orange { background: #fff3e0; }
|
||||
.icon-wrap.file-purple { background: #f3e5f5; }
|
||||
.icon-wrap.file-pink { background: #fce4ec; }
|
||||
.icon-wrap.file-yellow { background: #fffde7; }
|
||||
.icon-wrap.file-image { background: #e8eaf6; }
|
||||
.icon-wrap.file-text { background: #f5f5f5; }
|
||||
.icon-wrap.file-gray { background: #f0f0f0; }
|
||||
.icon-thumb {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.icon-name {
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
max-width: 80px;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 列表视图 */
|
||||
.list-table {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.list-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 1fr) 100px 180px 100px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--border);
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
.list-row:hover { background: var(--hover-bg); }
|
||||
.list-row.selected { background: var(--selection-bg); }
|
||||
.list-header {
|
||||
background: var(--header-bg);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
cursor: default;
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 1;
|
||||
}
|
||||
.list-header:hover { background: var(--header-bg); }
|
||||
.col-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.col-size, .col-modified, .col-kind { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.row-icon {
|
||||
width: 22px; height: 22px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 13px;
|
||||
border-radius: 5px;
|
||||
flex-shrink: 0;
|
||||
background: var(--file-icon-bg, #f0f0f0);
|
||||
}
|
||||
.row-icon.file-red { background: #ffebee; }
|
||||
.row-icon.file-blue { background: #e3f2fd; }
|
||||
.row-icon.file-green { background: #e8f5e9; }
|
||||
.row-icon.file-orange { background: #fff3e0; }
|
||||
.row-icon.file-purple { background: #f3e5f5; }
|
||||
.row-icon.file-pink { background: #fce4ec; }
|
||||
.row-icon.file-yellow { background: #fffde7; }
|
||||
.row-icon.file-image { background: #e8eaf6; }
|
||||
.row-icon.file-text { background: #f5f5f5; }
|
||||
.row-icon.file-gray { background: #f0f0f0; }
|
||||
|
||||
/* 分栏视图 */
|
||||
.file-area.column-view {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
}
|
||||
.column {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
border-right: 1px solid var(--border);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.column:last-child { border-right: none; }
|
||||
.column-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--border);
|
||||
user-select: none;
|
||||
}
|
||||
.column-row:hover { background: var(--hover-bg); }
|
||||
.column-row.selected { background: var(--selection); color: #fff; }
|
||||
.column-hint { flex: 2; display: flex; align-items: center; justify-content: center; }
|
||||
.column-empty { color: var(--text-secondary); font-size: 12px; }
|
||||
.col-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.column-info-panel { padding: 20px; text-align: center; }
|
||||
.column-info-name { font-size: 14px; font-weight: 600; margin-bottom: 12px; word-break: break-all; }
|
||||
.column-info-row { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
|
||||
.file-area.column-view { overflow-x: auto; }
|
||||
.column { min-width: 180px; max-width: 280px; }
|
||||
|
||||
/* 状态栏 */
|
||||
.finder-statusbar {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 14px;
|
||||
background: var(--header-bg);
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
|
||||
.empty-title { font-size: 15px; margin-bottom: 4px; font-weight: 500; color: var(--text); opacity: 0.7; }
|
||||
.empty-hint { font-size: 12px; }
|
||||
|
||||
/* 拖拽蒙层 */
|
||||
.drop-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(10,132,255,0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
border: 3px dashed var(--selection);
|
||||
}
|
||||
.drop-box {
|
||||
background: var(--window-bg);
|
||||
padding: 32px 48px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow);
|
||||
pointer-events: auto;
|
||||
}
|
||||
.drop-icon { font-size: 48px; margin-bottom: 8px; }
|
||||
.drop-text { font-size: 14px; color: var(--text); }
|
||||
|
||||
/* 选框 */
|
||||
.selection-rect {
|
||||
position: fixed;
|
||||
border: 1px solid var(--selection);
|
||||
background: var(--selection-bg);
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
/* ===== 右键菜单 ===== */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
min-width: 200px;
|
||||
background: var(--window-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.1);
|
||||
padding: 4px;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.cm-item {
|
||||
padding: 7px 12px;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
}
|
||||
.cm-item:hover { background: var(--selection); color: #fff; }
|
||||
.cm-item.danger { color: var(--danger); }
|
||||
.cm-item.danger:hover { background: var(--danger); color: #fff; }
|
||||
.cm-sep {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 4px 8px;
|
||||
}
|
||||
|
||||
/* ===== 弹窗 ===== */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background: var(--window-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
padding: 20px 24px;
|
||||
min-width: 360px;
|
||||
max-width: 520px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 14px;
|
||||
color: var(--text);
|
||||
}
|
||||
.modal-body {
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.modal-body label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.modal-body label:first-child { margin-top: 0; }
|
||||
.modal-body input, .modal-body select {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
}
|
||||
.modal-body input:focus, .modal-body select:focus { border-color: var(--selection); }
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
.modal-footer .btn-primary, .modal-footer .btn-ghost {
|
||||
width: auto;
|
||||
min-width: 72px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 简介 */
|
||||
.info-row {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 12px;
|
||||
}
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-label {
|
||||
width: 80px;
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info-value {
|
||||
flex: 1;
|
||||
color: var(--text);
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 分享输出 */
|
||||
.share-output { margin-top: 8px; }
|
||||
.share-title { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
|
||||
.share-url-box {
|
||||
padding: 8px 10px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
font-size: 11px;
|
||||
font-family: 'SF Mono', Menlo, monospace;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 图片预览 */
|
||||
.modal-content.image-preview {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
min-width: auto;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow: visible;
|
||||
}
|
||||
.modal-content.image-preview img {
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
transition: transform 0.08s ease-out;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--window-bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.modal-close:hover { background: var(--selection); color: #fff; }
|
||||
|
||||
/* ===== Toast ===== */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--window-bg);
|
||||
color: var(--text);
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
||||
font-size: 13px;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
align-items: center;
|
||||
border: 1px solid var(--border);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.toast-success { border-left: 3px solid #28c840; }
|
||||
.toast-error { border-left: 3px solid var(--danger); }
|
||||
.toast-info { border-left: 3px solid var(--selection); }
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
|
||||
:root.theme-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
|
||||
:root.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.finder-sidebar { width: 140px; }
|
||||
.list-row { grid-template-columns: minmax(180px, 1fr) 80px 140px 80px; font-size: 11px; }
|
||||
.search-box input { width: 120px; }
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user