fix: 修复分享页面文件名过长导致布局溢出的问题

修改内容:
1. 单文件显示 (.single-file-name):
   - 添加 max-width: 100% 限制最大宽度
   - 使用 -webkit-line-clamp: 3 限制最多显示3行
   - 超出部分显示省略号 (...)
   - 改用 word-break: break-word 更优雅的换行

2. 列表视图文件名:
   - 添加 .file-name-container 和 .file-name-text 类
   - 使用 overflow: hidden 和 text-overflow: ellipsis
   - 单行显示，超出显示省略号
   - 设置 min-width: 0 确保flex容器正确缩小

修复效果:
- 文件名再长也不会溢出到界面外
- 单文件视图最多显示3行
- 列表视图单行显示带省略号
- 鼠标悬停在网格视图文件名上会显示完整文件名(title属性)

frontend/share.html

@@ -82,7 +82,20 @@
       align-items: center;
       gap: 15px;
     }
-    .file-icon {
+    /* 列表视图文件名容器 */
+    .file-name-container {
+      flex: 1;
+      min-width: 0;  /* 允许flex子项缩小到内容大小以下 */
+      max-width: 100%;
+    }
+    .file-name-text {
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+    }
+        .file-icon {
       font-size: 24px;
     }
     .loading {
@@ -193,9 +206,17 @@
       font-size: 20px;
       font-weight: 600;
       text-align: center;
-      word-break: break-all;
+      word-break: break-word;
       margin-bottom: 15px;
       color: #333;
+      /* 限制文件名显示，防止过长溢出 */
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;  /* 最多显示3行 */
+      -webkit-box-orient: vertical;
+      line-height: 1.4;
     }
     .single-file-size {
       font-size: 16px;
@@ -556,8 +577,8 @@
             <li v-for="file in files" :key="file.name" class="file-item">
               <div class="file-info">
                 <i class="file-icon fas" :class="getFileIcon(file)" :style="getIconColor(file)"></i>
-                <div>
-                  <div style="font-weight: 500;">{{ file.name }}</div>
+                <div class="file-name-container">
+                  <div class="file-name-text">{{ file.name }}</div>
                   <div style="font-size: 12px; color: #999;">{{ file.sizeFormatted }}</div>
                 </div>
               </div>