优化页面字体渲染与图例对齐

- 全局开启文字抗锯齿,行高舒展至 1.55,中文显示更精致
- 表头/eyebrow 字距从 0.14em/0.06em 收到 0.02-0.04em,去掉松散感
- 表头与统计卡等字号微调(11px→11.5px),弱化文字发虚
- 总走势图例改为 flex 布局、圆点固定尺寸,与文字垂直居中
- 用户走势 ECharts 图例改为圆形图标、8px 尺寸,圆点与文字对齐
This commit is contained in:
2026-09-15 16:00:38 +08:00
parent 6606b9178c
commit 59d5523146
3 changed files with 38 additions and 18 deletions

View File

@@ -327,20 +327,24 @@ onBeforeUnmount(() => {
margin-top: 2px;
color: var(--faint);
font-size: 12px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.tt-legend {
display: inline-flex;
align-items: center;
gap: 4px;
margin-right: 4px;
gap: 5px;
line-height: 1;
}
.tt-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex: 0 0 8px;
}
.tt-dot.token {

View File

@@ -29,10 +29,11 @@ const option = computed<echarts.EChartsCoreOption>(() => ({
data: ['Token', '成本'],
top: 2,
right: 6,
itemWidth: 10,
itemHeight: 10,
itemGap: 12,
textStyle: { color: '#5b6575', fontSize: 11 },
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
itemGap: 14,
textStyle: { color: '#5b6575', fontSize: 11, lineHeight: 12 },
},
tooltip: {
trigger: 'axis',

View File

@@ -49,6 +49,18 @@ body,
color: var(--text);
}
/* 中文渲染精细化:抗锯齿 + 舒展行高(浏览器默认行高对中文偏挤) */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
line-height: 1.55;
font-size: 14px;
}
button,
input {
font: inherit;
@@ -89,9 +101,9 @@ button {
.eyebrow {
color: var(--accent);
letter-spacing: 0.14em;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 11px;
font-size: 11.5px;
font-weight: 700;
margin: 0 0 10px;
}
@@ -230,14 +242,16 @@ h1 {
.stat .k {
color: var(--muted);
font-size: 12px;
font-size: 12.5px;
letter-spacing: 0.01em;
}
.stat .v {
margin-top: 8px;
margin-top: 7px;
font-size: 22px;
font-weight: 600;
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.2;
}
.stat .s {
@@ -342,11 +356,12 @@ table.rank > tbody > tr.user-row > td {
padding: 11px 14px;
vertical-align: middle;
text-align: center;
line-height: 1.45;
}
table.rank > thead > tr > th {
font-size: 11px;
letter-spacing: 0.06em;
font-size: 11.5px;
letter-spacing: 0.02em;
color: var(--faint);
font-weight: 600;
border-bottom: 1px solid var(--line);
@@ -592,8 +607,8 @@ table.rank > tbody > tr.user-row > td.time-col {
.model-table th {
color: var(--faint);
font-size: 11px;
letter-spacing: 0.06em;
font-size: 11.5px;
letter-spacing: 0.02em;
text-align: center;
background: var(--bg-head);
white-space: nowrap;
@@ -631,7 +646,7 @@ table.rank > tbody > tr.user-row > td.time-col {
}
.avail {
font-size: 11px;
font-size: 11.5px;
padding: 2px 9px;
border-radius: 999px;
white-space: nowrap;
@@ -989,7 +1004,7 @@ table.rank > tbody > tr.user-row > td.time-col {
.window-recover {
margin-left: auto;
color: var(--faint);
font-size: 11px;
font-size: 11.5px;
}
.window-bar {