chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): 操作按钮改幽灵样式——平时仅图标，悬停出底

Browse Source 
- .act/.op 去底色边框，悬停浅灰底，危险按钮悬停淡红底+红字
- 用户/模型/兑换码/违禁词/并发分组/渠道六页统一

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
chiyi
2026-10-27 18:06:06 +08:00
co-authored by Devin
parent a9640ff059
commit edd5253529
6 changed files with 22 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/BannedWordsView.vue
+4 -5
View File
@@ -202,14 +202,13 @@ onMounted(load)
<style scoped> <style scoped>
.act { .act {
display: inline-flex; align-items: center; justify-content: center; display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
color: var(--fg-2); background: var(--surface-2); color: var(--fg-3); background: transparent;
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
} }
.act:hover { background: var(--hover); color: var(--fg); } .act:hover { background: var(--hover); color: var(--fg); }
.act.danger { color: rgb(253 164 175); background: rgb(244 63 94 / 0.12); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3); } .act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
.btn-soft.danger { .btn-soft.danger {
color: rgb(253 164 175); color: rgb(253 164 175);
background: rgb(244 63 94 / 0.12); background: rgb(244 63 94 / 0.12);
frontend/src/views/CdksView.vue
+3 -11
View File
@@ -332,20 +332,12 @@ const pageNumbers = computed(() => {
/* row icon action buttons — mirror 账号管理 for a consistent look */ /* row icon action buttons — mirror 账号管理 for a consistent look */
.act { .act {
display: inline-flex; align-items: center; justify-content: center; display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
border-radius: 0.5rem; color: var(--fg-3); background: transparent;
color: var(--fg-2);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
} }
.act:hover { background: var(--hover); color: var(--fg); } .act:hover { background: var(--hover); color: var(--fg); }
.act.danger { .act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
color: rgb(253 164 175);
background: rgb(244 63 94 / 0.12);
box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
}
.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
.fp { .fp {
display: inline-flex; align-items: center; gap: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;
frontend/src/views/ChannelsView.vue
+2 -2
View File
@@ -324,9 +324,9 @@ onMounted(load)
.lbl { display: block; font-size: 0.72rem; font-weight: 500; color: var(--fg-3); margin-bottom: 0.4rem; } .lbl { display: block; font-size: 0.72rem; font-weight: 500; color: var(--fg-3); margin-bottom: 0.4rem; }
.op { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 7px; margin-left: 4px; border-radius: 7px; background: var(--surface-2); color: var(--fg-2); } .op { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; margin-left: 4px; border-radius: 8px; background: transparent; color: var(--fg-3); transition: background 0.15s, color 0.15s; }
.op:hover { background: var(--hover); color: var(--fg); } .op:hover { background: var(--hover); color: var(--fg); }
.op.danger:hover { background: rgb(244 63 94 / 0.15); color: rgb(251 113 133); } .op.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
/* iOS-style switch for 模型开关 in the sync modal */ /* iOS-style switch for 模型开关 in the sync modal */
.sw { position: relative; width: 2rem; height: 1.15rem; border-radius: 9999px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.18s ease; flex-shrink: 0; } .sw { position: relative; width: 2rem; height: 1.15rem; border-radius: 9999px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.18s ease; flex-shrink: 0; }
frontend/src/views/ConcurrencyView.vue
+4 -5
View File
@@ -137,14 +137,13 @@ onMounted(load)
<style scoped> <style scoped>
.act { .act {
display: inline-flex; align-items: center; justify-content: center; display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
color: var(--fg-2); background: var(--surface-2); color: var(--fg-3); background: transparent;
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
} }
.act:hover { background: var(--hover); color: var(--fg); } .act:hover { background: var(--hover); color: var(--fg); }
.act.danger { color: rgb(253 164 175); background: rgb(244 63 94 / 0.12); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3); } .act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; } .fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-from, .fade-leave-to { opacity: 0; }
</style> </style>
frontend/src/views/ModelsView.vue
+6 -19
View File
@@ -273,25 +273,12 @@ onMounted(loadModels)
/* --- compact square icon button for the actions column --- */ /* --- compact square icon button for the actions column --- */
.act { .act {
display: inline-flex; display: inline-flex; align-items: center; justify-content: center;
align-items: center; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
justify-content: center; color: var(--fg-3); background: transparent;
width: 1.9rem; transition: background 0.15s, color 0.15s;
height: 1.9rem;
border-radius: 0.5rem;
color: var(--fg-2);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
} }
.act:hover { background: var(--hover); color: var(--fg); } .act:hover { background: var(--hover); color: var(--fg); }
.act.danger { .act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
color: rgb(225 29 72);
background: rgb(244 63 94 / 0.08);
box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.22);
}
.act.danger:hover {
color: #fff;
background: rgb(225 29 72);
}
</style> </style>
frontend/src/views/UsersView.vue
+3 -11
View File
@@ -625,20 +625,12 @@ async function doRecharge() {
/* --- icon-only action buttons */ /* --- icon-only action buttons */
.act { .act {
display: inline-flex; align-items: center; justify-content: center; display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
border-radius: 0.5rem; color: var(--fg-3); background: transparent;
color: var(--fg-2);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
} }
.act:hover { background: var(--hover); color: var(--fg); } .act:hover { background: var(--hover); color: var(--fg); }
.act.danger { .act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
color: rgb(253 164 175);
background: rgb(244 63 94 / 0.12);
box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
}
.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
/* disabled inputs in the edit modal — readable, but visually 'cool' so the /* disabled inputs in the edit modal — readable, but visually 'cool' so the
admin knows they can't change them. */ admin knows they can't change them. */