style(ui): 数据表格统一细节——表头规格、选中行高亮
- 全站表格表头统一为 11px/700/0.07em 次要色,上下 11px - 多选表格(用户/违禁词/兑换码)选中行加灰底 + 左缘黑条高亮 - 未显式设色的 td 默认次要文本色 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
+16
-1
@@ -340,10 +340,25 @@ button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: poi
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid rgb(24 24 27 / 0.07);
|
||||
}
|
||||
.theme-text .card table thead :is(th, td) { font-weight: 700; letter-spacing: 0.04em; }
|
||||
/* 表头统一:各页曾分别写 10px/11px、tracking 0.2em/0.04em——收拢到同一规格。 */
|
||||
.theme-text .card table thead :is(th, td) {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--fg-3);
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.theme-text .card table tbody tr { transition: background-color 0.12s ease; }
|
||||
.theme-text .card table tbody tr:hover { background-color: #f7f7f8; }
|
||||
.theme-text .card table tbody tr:last-child { border-bottom: 0; }
|
||||
/* 多选表格的选中行高亮(行加 .row-on) */
|
||||
.theme-text .card table tbody tr.row-on { background-color: rgb(24 24 27 / 0.035); }
|
||||
.theme-text .card table tbody tr.row-on:hover { background-color: #f0f0f2; }
|
||||
/* 表体单元格基线:没显式设颜色的 td 统一次要色,数字/名称列各自覆盖 */
|
||||
.theme-text .card table tbody td { color: var(--fg-2); }
|
||||
.theme-text .card table tbody tr.row-on td:first-child { box-shadow: inset 2px 0 0 #18181b; }
|
||||
.public-dark .hover\:bg-slate-50:hover { background: rgb(255 255 255 / 0.04); }
|
||||
.public-dark .hover\:bg-slate-100:hover { background: rgb(255 255 255 / 0.06); }
|
||||
|
||||
|
||||
@@ -154,7 +154,7 @@ onMounted(load)
|
||||
<tbody>
|
||||
<tr v-if="loading && !items.length"><td colspan="5" class="text-center text-xs text-white/40 py-10">加载中…</td></tr>
|
||||
<tr v-else-if="!items.length"><td colspan="5" class="text-center text-xs text-white/40 py-10">还没有违禁词</td></tr>
|
||||
<tr v-for="w in pagedItems" :key="w.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
|
||||
<tr v-for="w in pagedItems" :key="w.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors" :class="selected.has(w.id) && 'row-on'">
|
||||
<td class="px-3 py-3.5 align-middle text-center">
|
||||
<input type="checkbox" :checked="selected.has(w.id)" @change="toggleSelect(w.id)" @click.stop class="chk" />
|
||||
</td>
|
||||
|
||||
@@ -249,7 +249,8 @@ const pageNumbers = computed(() => {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="c in pagedItems" :key="c.code"
|
||||
class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
|
||||
class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors"
|
||||
:class="selected.has(c.code) && 'row-on'">
|
||||
<td class="px-3 py-3.5 align-middle text-center">
|
||||
<input type="checkbox" :checked="selected.has(c.code)" @change="toggleSelect(c.code)" @click.stop
|
||||
class="chk" />
|
||||
|
||||
@@ -310,7 +310,8 @@ async function doRecharge() {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="u in pagedItems" :key="u.id"
|
||||
class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
|
||||
class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors"
|
||||
:class="selected.has(u.id) && 'row-on'">
|
||||
<td class="px-3 py-3.5 align-middle text-center">
|
||||
<input type="checkbox" :checked="selected.has(u.id)" @change="toggleSelect(u.id)" @click.stop
|
||||
class="chk" />
|
||||
|
||||
Reference in New Issue
Block a user