fix: 修复移动端分享列表长文件名导致UI溢出问题

## 问题
在移动端"我的分享"的列表视图下,长文件名会导致:
- 表格宽度被撑开
- 分享链接等内容溢出到容器外
- 页面布局错乱

## 修复
为分享列表的表格添加文字溢出处理:

1. 文件路径列:
   - 限制max-width: 200px
   - 超出部分显示省略号(text-overflow: ellipsis)
   - 鼠标悬停显示完整路径(title属性)

2. 分享链接列:
   - 限制max-width: 250px
   - 超出部分显示省略号
   - 鼠标悬停显示完整链接

## 其他位置检查
- 大图标视图已有溢出处理(-webkit-line-clamp: 2),无需修改
- 文件列表视图也已有完善的溢出处理

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-14 17:12:15 +08:00
parent 8cda4c1a0b
commit f9d0a30d46

View File

@@ -1168,9 +1168,9 @@
</thead>
<tbody>
<tr v-for="share in shares" :key="share.id" style="border-bottom: 1px solid #eee;">
<td style="padding: 10px;">{{ share.share_path }}</td>
<td style="padding: 10px;">
<a :href="share.share_url" target="_blank" style="color: #667eea;">{{ share.share_url }}</a>
<td style="padding: 10px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="share.share_path">{{ share.share_path }}</td>
<td style="padding: 10px; max-width: 250px;">
<a :href="share.share_url" target="_blank" style="color: #667eea; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="share.share_url">{{ share.share_url }}</a>
</td>
<td style="padding: 10px; text-align: center;">{{ share.view_count }}</td>
<td style="padding: 10px; text-align: center;">{{ share.download_count }}</td>