xuyueandClaude Opus 5.5
e511d82f3b
VueUse 的 useDark 每个实例挂载时都插一段 style、getComputedStyle 逼整页重算样式， 亮色下它的「没东西要改就跳过」永远不成立。提交列表每行的结果胶囊（useTone）都调它， 一页 30 行就是 30 次整页重算，翻页、换条再来。 改成 shared/composables/dark.ts 的 createGlobalState，auto-import 用 priority 盖掉 @vueuse/core 的同名项，显式 import 的 7 处一并换掉。 生产构建、CPU 降速 6 倍实测：提交列表首屏主线程 2015 → 1092ms（列表出来 1.34 → 0.85 秒）， 排名 1950 → 850ms，比赛 1060 → 757ms；右栏换到没看过的一条不再每次卡 100ms。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { useThemeVars } from 'naive-ui'
|
||
import { useDark } from 'shared/composables/dark'
|
||
|
||
export type Tone = 'success' | 'error' | 'warning' | 'info' | 'default'
|
||
|
||
export function rgba(hex: string, alpha: number) {
|
||
const value = hex.replace('#', '')
|
||
const full =
|
||
value.length === 3
|
||
? value
|
||
.split('')
|
||
.map((c) => c + c)
|
||
.join('')
|
||
: value.slice(0, 6)
|
||
const n = parseInt(full, 16)
|
||
return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`
|
||
}
|
||
|
||
/**
|
||
* 提交列表里各种小胶囊的配色：浅底 + 深一档的字（设计稿「提交列表重设计 · 定稿」）。
|
||
* 从主题色里取，暗色下字换成主题色本身（深色字放在暗底上看不清）。
|
||
* 不用 color-mix：Chrome 105 没有（111 才有），机房有一部分还是 105。
|
||
*/
|
||
export function useTone() {
|
||
const theme = useThemeVars()
|
||
const isDark = useDark()
|
||
|
||
return function tone(kind: Tone) {
|
||
const t = theme.value
|
||
const base = {
|
||
success: t.successColor,
|
||
error: t.errorColor,
|
||
warning: t.warningColor,
|
||
info: t.infoColor,
|
||
default: t.textColor3,
|
||
}[kind]
|
||
const pressed = {
|
||
success: t.successColorPressed,
|
||
error: t.errorColorPressed,
|
||
warning: t.warningColorPressed,
|
||
info: t.infoColorPressed,
|
||
default: t.textColor2,
|
||
}[kind]
|
||
return {
|
||
color: isDark.value ? base : pressed,
|
||
background: kind === 'default' ? t.actionColor : rgba(base, isDark.value ? 0.16 : 0.12),
|
||
solid: base,
|
||
}
|
||
}
|
||
}
|