237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: 修复前端所有页面的文字溢出问题

Browse Source 
修复内容：
1. 文件列表 - 列表视图文件名溢出控制
2. 用户列表 - 用户名和邮箱溢出控制
3. 分享列表 - 文件路径和分享链接溢出控制

所有长文本现在都会正确显示省略号，不会导致UI布局异常

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
喻勇祥
2025-11-14 19:47:36 +08:00
parent f9d0a30d46
commit d99568e418
3 changed files with 56 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/app.html
View File

@@ -785,7 +785,7 @@
<i v-else-if="file.name.match(/\.(xls|xlsx)$/i)" class="fas fa-file-excel" style="font-size: 20px; color: #4CAF50;"></i>
<i v-else-if="file.name.match(/\.(zip|rar|7z|tar|gz)$/i)" class="fas fa-file-archive" style="font-size: 20px; color: #795548;"></i>
<i v-else class="fas fa-file" style="font-size: 20px; color: #9E9E9E;"></i>
<span>{{ file.name }}</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block;" :title="file.name">{{ file.name }}</span>
</td>
<td style="padding: 10px; color: #666;">{{ file.isDirectory ? '-' : file.sizeFormatted }}</td>
<td style="padding: 10px; color: #666;">{{ formatDate(file.modifiedTime) }}</td>
@@ -1330,13 +1330,15 @@
<tbody>
<tr v-for="u in adminUsers" :key="u.id" style="border-bottom: 1px solid #eee;">
<td style="padding: 10px;">{{ u.id }}</td>
<td style="padding: 10px;">
{{ u.username }}
<span v-if="u.is_admin" style="color: #28a745; margin-left: 5px;" title="管理员">
<i class="fas fa-crown"></i>
</span>
<td style="padding: 10px; max-width: 150px;">
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="u.username">
<span>{{ u.username }}</span>
<span v-if="u.is_admin" style="color: #28a745; margin-left: 5px; white-space: nowrap;" title="管理员">
<i class="fas fa-crown"></i>
</span>
</div>
</td>
<td style="padding: 10px; font-size: 12px; color: #666;">{{ u.email }}</td>
<td style="padding: 10px; font-size: 12px; color: #666; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="u.email">{{ u.email }}</td>
<td style="padding: 10px; text-align: center; font-size: 12px;">
<span v-if="u.storage_permission === 'local_only'" style="background: #667eea; color: white; padding: 3px 8px; border-radius: 4px;">仅本地</span>
<span v-else-if="u.storage_permission === 'sftp_only'" style="background: #6c757d; color: white; padding: 3px 8px; border-radius: 4px;">仅SFTP</span>
@@ -1604,7 +1606,7 @@
<i v-else-if="file.name.match(/\.(xls|xlsx)$/i)" class="fas fa-file-excel" style="font-size: 20px; color: #4CAF50;"></i>
<i v-else-if="file.name.match(/\.(zip|rar|7z|tar|gz)$/i)" class="fas fa-file-archive" style="font-size: 20px; color: #795548;"></i>
<i v-else class="fas fa-file" style="font-size: 20px; color: #9E9E9E;"></i>
<span>{{ file.name }}</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block;" :title="file.name">{{ file.name }}</span>
</td>
<td style="padding: 10px; color: #666;">{{ file.isDirectory ? '-' : file.sizeFormatted }}</td>
<td style="padding: 10px; color: #666;">{{ formatDate(file.modifiedAt) }}</td>