style: 调整 Token 列表显示布局

This commit is contained in:
2026-05-25 14:57:42 +08:00
parent f7cc91adaa
commit e85208dc0f
2 changed files with 4 additions and 1 deletions
+1
View File
@@ -533,3 +533,4 @@
- `frontend/src/components/ApiTokenManager.vue` renders Token values as a compact row with right-side icon buttons: an eye button toggles masked/full Token display, and a copy button copies the complete Token directly from the row. - `frontend/src/components/ApiTokenManager.vue` renders Token values as a compact row with right-side icon buttons: an eye button toggles masked/full Token display, and a copy button copies the complete Token directly from the row.
- The per-row operation dropdown now keeps edit, enable/disable, regenerate, and delete actions; copying is surfaced beside the Token value for faster repeated use. - The per-row operation dropdown now keeps edit, enable/disable, regenerate, and delete actions; copying is surfaced beside the Token value for faster repeated use.
- Build verification: `npm run build` passed with only the existing Vite large chunk warning. - Build verification: `npm run build` passed with only the existing Vite large chunk warning.
- Follow-up UI adjustment: the eye/copy buttons now sit immediately after the Token text instead of being pushed to the far right, and Token rows show `created_at` in the metadata area.
+3 -1
View File
@@ -75,6 +75,7 @@
</div> </div>
</div> </div>
<div class="api-token-meta"> <div class="api-token-meta">
<span>创建:{{ formatDateTime(token.created_at) }}</span>
<span>到期:{{ formatExpiration(token.expires_at) }}</span> <span>到期:{{ formatExpiration(token.expires_at) }}</span>
<span>最近使用:{{ formatDateTime(token.last_used_at) }}</span> <span>最近使用:{{ formatDateTime(token.last_used_at) }}</span>
<span v-if="token.last_used_from">来源:{{ token.last_used_from }}</span> <span v-if="token.last_used_from">来源:{{ token.last_used_from }}</span>
@@ -564,7 +565,8 @@ function formatDateInput(date: Date): string {
.api-token-value { .api-token-value {
min-width: 0; min-width: 0;
flex: 1; max-width: min(72ch, 100%);
flex: 0 1 auto;
overflow: hidden; overflow: hidden;
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
font-family: var(--td-font-family-mono); font-family: var(--td-font-family-mono);