feat: 优化响应式布局，调整标题和操作按钮样式

static/css/main.css

@@ -28,8 +28,6 @@
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    max-width: 1200px;
-    margin: 0 auto;
     padding: 20px;
     background-color: var(--bg-color);
     color: var(--text-color);
@@ -41,6 +39,9 @@ body {
     border-radius: 8px;
     box-shadow: 0 2px 4px var(--shadow-color);
     padding: 20px;
+    width: calc(100% - 40px);
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
 h1 {
@@ -51,6 +52,14 @@ h1 {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+h1 > div {
+    display: flex;
+    gap: 8px;
+    align-items: center;
 }
 
 /* 通用按钮样式 */
@@ -637,6 +646,20 @@ video.preview-content {
         font-size: 12px;
         padding: 15px;
     }
+
+    .files-table .action-text {
+        display: none;
+    }
+
+    .files-table .action-link {
+        padding: 6px;
+        font-size: 1.1em;
+    }
+
+    .files-table td,
+    .files-table th {
+        padding: 8px 4px;
+    }
 }
 
 /* 上传进度提示 */
@@ -819,3 +842,148 @@ video.preview-content {
 .grid-action-btn.rename:hover {
     color: var(--warning-hover-color, #e0a800);
 }
+
+.file-name-col {
+    width: auto;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.file-name-col a {
+    display: inline-block;
+    max-width: calc(100% - 30px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+.file-size-col {
+    width: 100px;
+    min-width: 100px;
+    white-space: nowrap;
+}
+
+.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;
+}
+
+@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) {
+    body {
+        padding: 10px;
+    }
+    
+    .container {
+        padding: 12px;
+        width: calc(100% - 20px);
+    }
+    
+    h1 {
+        margin-bottom: 20px;
+        padding-bottom: 8px;
+        justify-content: flex-start;
+    }
+    
+    h1 > div {
+        width: 100%;
+        justify-content: flex-start;
+    }
+    
+    .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;
+    }
+}
+        font-size: 1.1em;
+    }
+
+    .files-table td,
+    .files-table th {
+        padding: 8px 4px;
+    }
+}

templates/index.html

@@ -59,10 +59,10 @@ current_prefix }}"{% endblock %} {% block content %}
                 <th class="checkbox-col">
                     <input type="checkbox" id="selectAll" aria-label="全选" />
                 </th>
-                <th>名称</th>
+                <th class="file-name-col">名称</th>
-                <th>大小</th>
+                <th class="file-size-col">大小</th>
-                <th>最后修改时间</th>
+                <th class="last-modified-col">最后修改时间</th>
-                <th>操作</th>
+                <th class="actions-col">操作</th>
             </tr>
         </thead>
         <tbody>
@@ -77,7 +77,7 @@ current_prefix }}"{% endblock %} {% block content %}
                         aria-label="选择 {{ entry.name }}"
                     />
                 </td>
-                <td>
+                <td class="file-name-col">
                     {% if entry.is_dir %}
                     <i class="file-icon folder fas fa-folder"></i>
                     <a href="/{{ entry.key.rstrip('/') }}">{{ entry.name }}</a>
@@ -86,54 +86,54 @@ current_prefix }}"{% endblock %} {% block content %}
                     <a href="{{ entry.file_url }}" target="_blank">{{ entry.name }}</a>
                     {% endif %}
                 </td>
-                <td class="file-size">
+                <td class="file-size-col file-size">
                     {% if not entry.is_dir %} {{ entry.size|filesizeformat }} {% else %} - {% endif %}
                 </td>
-                <td class="last-modified">
+                <td class="last-modified-col last-modified">
                     {% if not entry.is_dir %} {{ entry.last_modified }} {% else %} - {% endif %}
                 </td>
-                <td>
+                <td class="actions-col">
                     {% if entry.is_dir %}
                     <button
                         class="action-link rename-btn"
                         onclick="promptRename('{{ entry.key }}', '{{ entry.name }}', true)"
                     >
-                        <i class="fas fa-edit"></i> 重命名
+                        <i class="fas fa-edit"></i><span class="action-text"> 重命名</span>
                     </button>
                     <button class="action-link delete-btn" onclick="deleteFolder('{{ entry.key }}')">
-                        <i class="fas fa-trash"></i> 删除
+                        <i class="fas fa-trash"></i><span class="action-text"> 删除</span>
                     </button>
                     <button class="action-link copy-btn" onclick="promptCopyOrMove('{{ entry.key }}', true, 'copy')">
-                        <i class="fas fa-copy"></i> 复制
+                        <i class="fas fa-copy"></i><span class="action-text"> 复制</span>
                     </button>
                     <button class="action-link move-btn" onclick="promptCopyOrMove('{{ entry.key }}', true, 'move')">
-                        <i class="fas fa-arrows-alt-h"></i> 移动
+                        <i class="fas fa-arrows-alt-h"></i><span class="action-text"> 移动</span>
                     </button>
                     {% else %}
                     <button class="action-link" onclick="openPreview('{{ entry.file_url }}', '{{ entry.name }}')">
-                        <i class="fas fa-eye"></i> 预览
+                        <i class="fas fa-eye"></i><span class="action-text"> 预览</span>
                     </button>
                     <button
                         class="action-link download-btn"
                         data-download-key="{{ entry.key }}"
                         data-download-name="{{ entry.name }}"
                     >
-                        <i class="fas fa-download"></i> 下载
+                        <i class="fas fa-download"></i><span class="action-text"> 下载</span>
                     </button>
                     <button class="action-link delete-btn" onclick="deleteFile('{{ entry.key }}')">
-                        <i class="fas fa-trash"></i> 删除
+                        <i class="fas fa-trash"></i><span class="action-text"> 删除</span>
                     </button>
                     <button
                         class="action-link rename-btn"
                         onclick="promptRename('{{ entry.key }}', '{{ entry.name }}')"
                     >
-                        <i class="fas fa-edit"></i> 重命名
+                        <i class="fas fa-edit"></i><span class="action-text"> 重命名</span>
                     </button>
                     <button class="action-link copy-btn" onclick="promptCopyOrMove('{{ entry.key }}', false, 'copy')">
-                        <i class="fas fa-copy"></i> 复制
+                        <i class="fas fa-copy"></i><span class="action-text"> 复制</span>
                     </button>
                     <button class="action-link move-btn" onclick="promptCopyOrMove('{{ entry.key }}', false, 'move')">
-                        <i class="fas fa-arrows-alt-h"></i> 移动
+                        <i class="fas fa-arrows-alt-h"></i><span class="action-text"> 移动</span>
                     </button>
                     {% endif %}
                 </td>