refactor: 模块化前端代码 - 将 main.js 和 main.css 拆分为专用模块

- 移除 main.js 并替换为8个 JS 模块 - 移除 main.css 并替换为7个 CSS 模块 - 更新 base.html 以加载模块化文件 - 通过 index.css 保持完全向后兼容 - 改进代码组织、可维护性和可复用性
2025-12-06 15:26:10 +08:00 · 2025-11-15 12:45:19 +08:00
parent 724351a551
commit 730ee20048
18 changed files with 2322 additions and 2100 deletions
--- a/static/css/table.css
+++ b/static/css/table.css
@@ -0,0 +1,197 @@
+/**
+ * 表格和列表视图样式
+ */
+
+.files-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+.checkbox-col {
+    width: 48px;
+    text-align: center;
+}
+
+.checkbox-col input {
+    transform: scale(1.05);
+    accent-color: var(--link-color);
+}
+
+.files-table th,
+.files-table td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.files-table th {
+    background-color: var(--hover-bg);
+    color: var(--text-color);
+    font-weight: 600;
+}
+
+.files-table tr:hover {
+    background-color: var(--hover-bg);
+}
+
+.file-name-col {
+    width: auto;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+}
+
+.file-name-col a {
+    display: inline-block;
+    max-width: calc(100% - 30px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+.file-name-col:hover {
+    background-color: var(--hover-bg);
+}
+
+.file-icon {
+    margin-right: 8px;
+    pointer-events: none;
+}
+
+.folder {
+    color: var(--folder-color);
+}
+
+.file {
+    color: var(--file-color);
+}
+
+.file-size {
+    color: var(--secondary-text);
+    font-size: 0.9em;
+}
+
+.file-size-col {
+    width: 100px;
+    min-width: 100px;
+    white-space: nowrap;
+}
+
+.last-modified {
+    color: var(--secondary-text);
+    font-size: 0.9em;
+}
+
+.last-modified-col {
+    width: 180px;
+    min-width: 180px;
+    white-space: nowrap;
+}
+
+.actions-col {
+    white-space: nowrap;
+}
+
+.actions-col > * {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 4px;
+}
+
+.breadcrumb {
+    margin-bottom: 12px;
+    font-size: 0.95em;
+    color: var(--secondary-text);
+    background-color: var(--container-bg);
+    padding: 8px 12px;
+    border-radius: 4px;
+}
+
+.empty-message {
+    text-align: center;
+    padding: 40px;
+    color: var(--secondary-text);
+}
+
+@media (max-width: 1200px) {
+    .files-table .action-text {
+        display: none;
+    }
+    .files-table .action-link {
+        padding: 6px 8px;
+    }
+}
+
+@media (max-width: 992px) {
+    .last-modified-col {
+        display: none !important;
+    }
+    .file-name-col {
+        max-width: 200px;
+    }
+}
+
+@media (max-width: 768px) {
+    .file-size-col {
+        display: none !important;
+    }
+    .file-name-col {
+        max-width: 150px;
+    }
+
+    .files-table .action-text {
+        display: none;
+    }
+
+    .files-table .action-link,
+    .files-table button.action-link {
+        padding: 6px;
+        font-size: 1em;
+        margin-left: 2px;
+    }
+
+    .files-table td,
+    .files-table th {
+        padding: 8px 4px;
+    }
+
+    .actions-col > * {
+        margin-left: 2px;
+        gap: 2px;
+    }
+}
+
+@media (max-width: 480px) {
+    .files-table td,
+    .files-table th {
+        padding: 6px 2px;
+        font-size: 0.9em;
+    }
+
+    .checkbox-col {
+        width: 30px;
+    }
+
+    .file-name-col {
+        max-width: 120px;
+        font-size: 0.85em;
+    }
+
+    .files-table .action-link,
+    .files-table button.action-link {
+        padding: 4px;
+        font-size: 0.9em;
+        margin-left: 1px;
+    }
+
+    .actions-col > * {
+        margin-left: 1px;
+        gap: 1px;
+    }
+}