fix: 彻底修复所有表格和列表的文字溢出问题
关键修复: 1. 所有表格添加 table-layout: fixed 2. 表格列头添加明确的宽度百分比控制 3. 文件列表 - 修复 display: flex 导致的溢出 - 将 flex 从 td 移到内部 div - 文件名使用 flex: 1 + min-width: 0 - 所有图标添加 flex-shrink: 0 4. 分享列表 - 移除 max-width，使用列头宽度控制 5. 用户列表 - 移除 max-width，使用列头宽度控制 所有表格现在都能正确处理长文本，不会溢出容器 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -748,7 +748,7 @@
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<div v-else class="file-list">
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #ddd; background: #f5f5f5;">
|
||||
<th style="padding: 12px; text-align: left; width: 40%;">文件名</th>
|
||||
@@ -765,7 +765,8 @@
|
||||
@touchend="handleLongPressEnd"
|
||||
@mouseover="$event.currentTarget.style.background='#f9f9f9'"
|
||||
@mouseout="$event.currentTarget.style.background='white'">
|
||||
<td style="padding: 10px; display: flex; align-items: center; gap: 10px;">
|
||||
<td style="padding: 10px;">
|
||||
<div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
|
||||
<!-- 图片缩略图 -->
|
||||
<img v-if="file.name.match(/\.(jpg|jpeg|png|gif|bmp|svg|webp)$/i) && getThumbnailUrl(file)"
|
||||
:src="getThumbnailUrl(file)"
|
||||
@@ -777,15 +778,16 @@
|
||||
<i class="fas fa-play" style="font-size: 14px; color: white;"></i>
|
||||
</div>
|
||||
<!-- 文件夹图标 -->
|
||||
<i v-else-if="file.isDirectory" class="fas fa-folder" style="font-size: 20px; color: #FFC107;"></i>
|
||||
<i v-else-if="file.isDirectory" class="fas fa-folder" style="font-size: 20px; color: #FFC107; flex-shrink: 0;"></i>
|
||||
<!-- 其他文件类型图标 -->
|
||||
<i v-else-if="file.name.match(/\.(mp3|wav|flac|aac|ogg)$/i)" class="fas fa-file-audio" style="font-size: 20px; color: #FF5722;"></i>
|
||||
<i v-else-if="file.name.match(/\.(pdf)$/i)" class="fas fa-file-pdf" style="font-size: 20px; color: #F44336;"></i>
|
||||
<i v-else-if="file.name.match(/\.(doc|docx)$/i)" class="fas fa-file-word" style="font-size: 20px; color: #2196F3;"></i>
|
||||
<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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block;" :title="file.name">{{ file.name }}</span>
|
||||
<i v-else-if="file.name.match(/\.(mp3|wav|flac|aac|ogg)$/i)" class="fas fa-file-audio" style="font-size: 20px; color: #FF5722; flex-shrink: 0;"></i>
|
||||
<i v-else-if="file.name.match(/\.(pdf)$/i)" class="fas fa-file-pdf" style="font-size: 20px; color: #F44336; flex-shrink: 0;"></i>
|
||||
<i v-else-if="file.name.match(/\.(doc|docx)$/i)" class="fas fa-file-word" style="font-size: 20px; color: #2196F3; flex-shrink: 0;"></i>
|
||||
<i v-else-if="file.name.match(/\.(xls|xlsx)$/i)" class="fas fa-file-excel" style="font-size: 20px; color: #4CAF50; flex-shrink: 0;"></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; flex-shrink: 0;"></i>
|
||||
<i v-else class="fas fa-file" style="font-size: 20px; color: #9E9E9E; flex-shrink: 0;"></i>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;" :title="file.name">{{ file.name }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding: 10px; color: #666;">{{ file.isDirectory ? '-' : file.sizeFormatted }}</td>
|
||||
<td style="padding: 10px; color: #666;">{{ formatDate(file.modifiedTime) }}</td>
|
||||
@@ -1155,21 +1157,21 @@
|
||||
</div>
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<table v-else style="width: 100%; border-collapse: collapse;">
|
||||
<table v-else style="width: 100%; border-collapse: collapse; table-layout: fixed;">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #ddd;">
|
||||
<th style="padding: 10px; text-align: left;">文件路径</th>
|
||||
<th style="padding: 10px; text-align: left;">分享链接</th>
|
||||
<th style="padding: 10px; text-align: center;">访问次数</th>
|
||||
<th style="padding: 10px; text-align: center;">下载次数</th>
|
||||
<th style="padding: 10px; text-align: center;">到期时间</th>
|
||||
<th style="padding: 10px; text-align: center;">操作</th>
|
||||
<th style="padding: 10px; text-align: left; width: 20%;">文件路径</th>
|
||||
<th style="padding: 10px; text-align: left; width: 30%;">分享链接</th>
|
||||
<th style="padding: 10px; text-align: center; width: 10%;">访问次数</th>
|
||||
<th style="padding: 10px; text-align: center; width: 10%;">下载次数</th>
|
||||
<th style="padding: 10px; text-align: center; width: 20%;">到期时间</th>
|
||||
<th style="padding: 10px; text-align: center; width: 10%;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="share in shares" :key="share.id" style="border-bottom: 1px solid #eee;">
|
||||
<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;">
|
||||
<td style="padding: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="share.share_path">{{ share.share_path }}</td>
|
||||
<td style="padding: 10px; overflow: hidden;">
|
||||
<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>
|
||||
@@ -1314,23 +1316,23 @@
|
||||
|
||||
<h3 style="margin-bottom: 20px;">用户管理</h3>
|
||||
<div style="overflow-x: auto;">
|
||||
<table style="width: 100%; border-collapse: collapse; min-width: 900px;">
|
||||
<table style="width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px;">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #ddd; background: #f5f5f5;">
|
||||
<th style="padding: 10px; text-align: left;">ID</th>
|
||||
<th style="padding: 10px; text-align: left;">用户名</th>
|
||||
<th style="padding: 10px; text-align: left;">邮箱</th>
|
||||
<th style="padding: 10px; text-align: center;">存储权限</th>
|
||||
<th style="padding: 10px; text-align: center;">当前存储</th>
|
||||
<th style="padding: 10px; text-align: center;">配额使用</th>
|
||||
<th style="padding: 10px; text-align: center;">状态</th>
|
||||
<th style="padding: 10px; text-align: center;">操作</th>
|
||||
<th style="padding: 10px; text-align: left; width: 5%;">ID</th>
|
||||
<th style="padding: 10px; text-align: left; width: 12%;">用户名</th>
|
||||
<th style="padding: 10px; text-align: left; width: 15%;">邮箱</th>
|
||||
<th style="padding: 10px; text-align: center; width: 10%;">存储权限</th>
|
||||
<th style="padding: 10px; text-align: center; width: 10%;">当前存储</th>
|
||||
<th style="padding: 10px; text-align: center; width: 13%;">配额使用</th>
|
||||
<th style="padding: 10px; text-align: center; width: 10%;">状态</th>
|
||||
<th style="padding: 10px; text-align: center; width: 25%;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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; max-width: 150px;">
|
||||
<td style="padding: 10px; overflow: hidden;">
|
||||
<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="管理员">
|
||||
@@ -1338,7 +1340,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</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; font-size: 12px; color: #666; 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>
|
||||
@@ -1396,7 +1398,7 @@
|
||||
<div v-if="passwordResetRequests.length === 0" class="alert alert-info">
|
||||
暂无待审核的密码重置请求
|
||||
</div>
|
||||
<table v-else style="width: 100%; border-collapse: collapse;">
|
||||
<table v-else style="width: 100%; border-collapse: collapse; table-layout: fixed;">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #ddd;">
|
||||
<th style="padding: 10px; text-align: left;">用户名</th>
|
||||
@@ -1582,7 +1584,7 @@
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<div v-else class="file-list">
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #ddd; background: #f5f5f5;">
|
||||
<th style="padding: 12px; text-align: left; width: 50%;">文件名</th>
|
||||
@@ -1596,17 +1598,19 @@
|
||||
@dblclick="handleInspectionFileClick(file)"
|
||||
@mouseover="$event.currentTarget.style.background='#f9f9f9'"
|
||||
@mouseout="$event.currentTarget.style.background='white'">
|
||||
<td style="padding: 10px; display: flex; align-items: center; gap: 10px;">
|
||||
<i v-if="file.isDirectory" class="fas fa-folder" style="font-size: 20px; color: #FFC107;"></i>
|
||||
<td style="padding: 10px;">
|
||||
<div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
|
||||
<i v-if="file.isDirectory" class="fas fa-folder" style="font-size: 20px; color: #FFC107; flex-shrink: 0;"></i>
|
||||
<i v-else-if="file.name.match(/\.(jpg|jpeg|png|gif|bmp|svg)$/i)" class="fas fa-file-image" style="font-size: 20px; color: #4CAF50;"></i>
|
||||
<i v-else-if="file.name.match(/\.(mp4|avi|mov|wmv|flv|mkv)$/i)" class="fas fa-file-video" style="font-size: 20px; color: #9C27B0;"></i>
|
||||
<i v-else-if="file.name.match(/\.(mp3|wav|flac|aac|ogg)$/i)" class="fas fa-file-audio" style="font-size: 20px; color: #FF5722;"></i>
|
||||
<i v-else-if="file.name.match(/\.(pdf)$/i)" class="fas fa-file-pdf" style="font-size: 20px; color: #F44336;"></i>
|
||||
<i v-else-if="file.name.match(/\.(doc|docx)$/i)" class="fas fa-file-word" style="font-size: 20px; color: #2196F3;"></i>
|
||||
<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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block;" :title="file.name">{{ file.name }}</span>
|
||||
<i v-else-if="file.name.match(/\.(mp3|wav|flac|aac|ogg)$/i)" class="fas fa-file-audio" style="font-size: 20px; color: #FF5722; flex-shrink: 0;"></i>
|
||||
<i v-else-if="file.name.match(/\.(pdf)$/i)" class="fas fa-file-pdf" style="font-size: 20px; color: #F44336; flex-shrink: 0;"></i>
|
||||
<i v-else-if="file.name.match(/\.(doc|docx)$/i)" class="fas fa-file-word" style="font-size: 20px; color: #2196F3; flex-shrink: 0;"></i>
|
||||
<i v-else-if="file.name.match(/\.(xls|xlsx)$/i)" class="fas fa-file-excel" style="font-size: 20px; color: #4CAF50; flex-shrink: 0;"></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; flex-shrink: 0;"></i>
|
||||
<i v-else class="fas fa-file" style="font-size: 20px; color: #9E9E9E; flex-shrink: 0;"></i>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;" :title="file.name">{{ file.name }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding: 10px; color: #666;">{{ file.isDirectory ? '-' : file.sizeFormatted }}</td>
|
||||
<td style="padding: 10px; color: #666;">{{ formatDate(file.modifiedAt) }}</td>
|
||||
|
||||
Reference in New Issue
Block a user