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