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

- 移除 main.js 并替换为8个 JS 模块
- 移除 main.css 并替换为7个 CSS 模块
- 更新 base.html 以加载模块化文件
- 通过 index.css 保持完全向后兼容
- 改进代码组织、可维护性和可复用性

static/css/buttons.css

@@ -0,0 +1,149 @@
+/**
+ * 按钮样式
+ */
+
+/* 通用按钮基类 */
+.btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 6px;
+    font-size: 1em;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: inherit;
+}
+
+.btn:hover {
+    background-color: var(--hover-bg);
+    transform: translateY(-1px);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+/* 导航栏按钮 */
+.nav-btn {
+    color: var(--secondary-text);
+    font-size: 1.1em;
+    padding: 8px 10px;
+}
+
+.nav-btn:hover {
+    color: var(--text-color);
+}
+
+/* 主题/视图切换按钮 */
+.theme-toggle,
+.view-toggle {
+    background: none;
+    border: none;
+    color: var(--secondary-text);
+    cursor: pointer;
+    padding: 8px 10px;
+    border-radius: 6px;
+    font-size: 1.1em;
+    transition: all 0.2s ease;
+}
+
+.theme-toggle:hover,
+.view-toggle:hover {
+    background-color: var(--hover-bg);
+    color: var(--text-color);
+    transform: translateY(-1px);
+}
+
+.theme-toggle:active,
+.view-toggle:active {
+    transform: translateY(0);
+}
+
+/* 删除按钮 */
+.delete-btn {
+    background: none;
+    border: none;
+    color: var(--danger-color);
+    cursor: pointer;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 0.9em;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.delete-btn:hover {
+    background-color: rgba(220, 53, 69, 0.1);
+    color: var(--danger-hover-color);
+    transform: translateY(-1px);
+}
+
+.delete-btn:active {
+    transform: translateY(0);
+}
+
+/* 下载按钮 */
+.download-btn {
+    background: none;
+    border: none;
+    color: var(--success-color);
+    cursor: pointer;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 0.9em;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.download-btn:hover {
+    background-color: rgba(40, 167, 69, 0.1);
+    color: #218838;
+    transform: translateY(-1px);
+}
+
+.download-btn:active {
+    transform: translateY(0);
+}
+
+/* 操作链接按钮 */
+.action-link {
+    color: var(--link-color);
+    text-decoration: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.action-link:hover {
+    background-color: var(--hover-bg);
+    text-decoration: none;
+}
+
+button.action-link {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 0.9em;
+    font-family: inherit;
+}
+
+/* 重命名按钮 */
+.rename-btn,
+.grid-action-btn.rename {
+    color: var(--warning-color);
+}
+
+.rename-btn:hover,
+.grid-action-btn.rename:hover {
+    color: var(--warning-hover-color);
+}