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

fix: unify share/direct link click and copy actions

Browse Source
This commit is contained in:
yuyx
2026-02-17 22:39:19 +08:00
parent e909d9917a
commit b261d2750c
1 changed files with 65 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/app.html
View File

@@ -1575,6 +1575,33 @@
padding: 8px 12px; padding: 8px 12px;
font-size: 13px; font-size: 13px;
} }
.share-card__url-link {
color: var(--accent-1);
word-break: break-all;
user-select: text;
cursor: text;
text-decoration: none;
}
.share-list-link-text {
color: #667eea;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: text;
cursor: text;
}
.share-list-actions {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.share-list-actions .btn {
padding: 6px 10px;
font-size: 12px;
}
.share-toolbar { .share-toolbar {
display: flex; display: flex;
gap: 10px; gap: 10px;
@@ -1720,6 +1747,14 @@
flex: 1; flex: 1;
min-width: 108px; min-width: 108px;
} }
.share-list-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.share-list-actions .btn {
width: 100%;
}
.share-success-actions { .share-success-actions {
flex-direction: column; flex-direction: column;
} }
@@ -2971,7 +3006,7 @@
</div> </div>
<div class="share-card__url" style="font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; word-break: break-all;"> <div class="share-card__url" style="font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; word-break: break-all;">
<i class="fas fa-link"></i> <i class="fas fa-link"></i>
<a :href="share.share_url" target="_blank" class="share-card__url-link" style="color: var(--accent-1); word-break: break-all;">{{ share.share_url }}</a> <span class="share-card__url-link" :title="share.share_url">{{ share.share_url }}</span>
</div> </div>
<div class="share-card__meta"> <div class="share-card__meta">
<span><i class="fas fa-eye"></i> 访问 {{ share.view_count }}</span> <span><i class="fas fa-eye"></i> 访问 {{ share.view_count }}</span>
@@ -2997,19 +3032,19 @@
<table v-else class="share-list-table"> <table v-else class="share-list-table">
<thead> <thead>
<tr style="border-bottom: 2px solid #ddd;"> <tr style="border-bottom: 2px solid #ddd;">
<th style="padding: 10px; text-align: left; width: 20%;">文件路径</th> <th style="padding: 10px; text-align: left; width: 18%;">文件路径</th>
<th style="padding: 10px; text-align: left; width: 30%;">分享链接</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: 8%;">访问次数</th>
<th style="padding: 10px; text-align: center; width: 10%;">下载次数</th> <th style="padding: 10px; text-align: center; width: 8%;">下载次数</th>
<th style="padding: 10px; text-align: center; width: 20%;">到期时间</th> <th style="padding: 10px; text-align: center; width: 16%;">到期时间</th>
<th style="padding: 10px; text-align: center; width: 10%;">操作</th> <th style="padding: 10px; text-align: center; width: 20%;">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="share in filteredShares" :key="share.id" style="border-bottom: 1px solid #eee;"> <tr v-for="share in filteredShares" :key="share.id" style="border-bottom: 1px solid #eee;">
<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; text-overflow: ellipsis; white-space: nowrap;" :title="share.share_path">{{ share.share_path }}</td>
<td style="padding: 10px; overflow: hidden;"> <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> <span class="share-list-link-text" :title="share.share_url">{{ share.share_url }}</span>
</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>
@@ -3018,9 +3053,17 @@
<span v-else :style="{color: isExpiringSoon(share.expires_at) ? '#ffc107' : isExpired(share.expires_at) ? '#dc3545' : '#667eea'}" :title="share.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(share.expires_at) }}</span> <span v-else :style="{color: isExpiringSoon(share.expires_at) ? '#ffc107' : isExpired(share.expires_at) ? '#dc3545' : '#667eea'}" :title="share.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(share.expires_at) }}</span>
</td> </td>
<td style="padding: 10px; text-align: center;"> <td style="padding: 10px; text-align: center;">
<button class="btn" style="background: #ef4444; color: white;" @click="deleteShare(share.id)"> <div class="share-list-actions">
<button class="btn btn-secondary" @click.stop="openShare(share.share_url)">
<i class="fas fa-up-right-from-square"></i> 打开
</button>
<button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)">
<i class="fas fa-copy"></i> 复制链接
</button>
<button class="btn" style="background: #ef4444; color: white;" @click.stop="deleteShare(share.id)">
<i class="fas fa-trash"></i> 删除 <i class="fas fa-trash"></i> 删除
</button> </button>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@@ -3047,18 +3090,18 @@
<table v-else class="share-list-table"> <table v-else class="share-list-table">
<thead> <thead>
<tr style="border-bottom: 2px solid #ddd;"> <tr style="border-bottom: 2px solid #ddd;">
<th style="padding: 10px; text-align: left; width: 26%;">文件路径</th> <th style="padding: 10px; text-align: left; width: 22%;">文件路径</th>
<th style="padding: 10px; text-align: left; width: 36%;">直链地址</th> <th style="padding: 10px; text-align: left; width: 30%;">直链地址</th>
<th style="padding: 10px; text-align: center; width: 8%;">下载</th> <th style="padding: 10px; text-align: center; width: 8%;">下载</th>
<th style="padding: 10px; text-align: center; width: 15%;">到期时间</th> <th style="padding: 10px; text-align: center; width: 16%;">到期时间</th>
<th style="padding: 10px; text-align: center; width: 15%;">操作</th> <th style="padding: 10px; text-align: center; width: 24%;">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="link in filteredDirectLinks" :key="`direct-${link.id}`" style="border-bottom: 1px solid #eee;"> <tr v-for="link in filteredDirectLinks" :key="`direct-${link.id}`" style="border-bottom: 1px solid #eee;">
<td style="padding: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="link.file_path">{{ link.file_path }}</td> <td style="padding: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="link.file_path">{{ link.file_path }}</td>
<td style="padding: 10px; overflow: hidden;"> <td style="padding: 10px; overflow: hidden;">
<a :href="link.direct_url" target="_blank" style="color: #667eea; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="link.direct_url">{{ link.direct_url }}</a> <span class="share-list-link-text" :title="link.direct_url">{{ link.direct_url }}</span>
</td> </td>
<td style="padding: 10px; text-align: center;">{{ link.download_count || 0 }}</td> <td style="padding: 10px; text-align: center;">{{ link.download_count || 0 }}</td>
<td style="padding: 10px; text-align: center;"> <td style="padding: 10px; text-align: center;">
@@ -3066,11 +3109,14 @@
<span v-else :style="{color: isExpiringSoon(link.expires_at) ? '#ffc107' : isExpired(link.expires_at) ? '#dc3545' : '#667eea'}" :title="link.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(link.expires_at) }}</span> <span v-else :style="{color: isExpiringSoon(link.expires_at) ? '#ffc107' : isExpired(link.expires_at) ? '#dc3545' : '#667eea'}" :title="link.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(link.expires_at) }}</span>
</td> </td>
<td style="padding: 10px; text-align: center;"> <td style="padding: 10px; text-align: center;">
<div style="display: inline-flex; gap: 6px;"> <div class="share-list-actions">
<button class="btn btn-secondary" @click="copyDirectLink(link.direct_url)"> <button class="btn btn-secondary" @click.stop="openShare(link.direct_url)">
<i class="fas fa-copy"></i> 复制 <i class="fas fa-up-right-from-square"></i> 打开
</button> </button>
<button class="btn" style="background: #ef4444; color: white;" @click="deleteDirectLink(link.id)"> <button class="btn btn-secondary" @click.stop="copyDirectLink(link.direct_url)">
<i class="fas fa-copy"></i> 复制链接
</button>
<button class="btn" style="background: #ef4444; color: white;" @click.stop="deleteDirectLink(link.id)">
<i class="fas fa-trash"></i> 删除 <i class="fas fa-trash"></i> 删除
</button> </button>
</div> </div>