From e511d82f3b12af889424a8534d24f9d9a4767139 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 3 Nov 2026 13:55:33 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E6=9A=97=E8=89=B2):=20=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E3=80=81=E6=8E=92=E5=90=8D=E9=A6=96=E5=B1=8F?=
 =?UTF-8?q?=E5=8D=A1=E6=8E=89=E7=9A=84=E4=B8=80=E7=A7=92=E5=A4=9A=E5=9B=9E?=
 =?UTF-8?q?=E6=9D=A5=E4=BA=86=20=E2=80=94=E2=80=94=20=E5=85=A8=E7=AB=99?=
 =?UTF-8?q?=E5=85=B1=E7=94=A8=E4=B8=80=E4=B8=AA=20useDark?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/web/src/oj/rank/palette.ts                  |  2 +-
 .../src/oj/submission/components/CodeView.vue    |  2 +-
 apps/web/src/shared/components/RankAvatar.vue    |  2 +-
 apps/web/src/shared/composables/chartTheme.ts    |  2 +-
 apps/web/src/shared/composables/dark.ts          | 16 ++++++++++++++++
 .../web/src/shared/composables/darkTransition.ts |  2 +-
 apps/web/src/shared/composables/rarity.ts        |  2 +-
 apps/web/src/shared/composables/tone.ts          |  2 +-
 apps/web/vite.config.ts                          |  5 +++++
 9 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/src/shared/composables/dark.ts

diff --git a/apps/web/src/oj/rank/palette.ts b/apps/web/src/oj/rank/palette.ts
index 0532c8b..f8237b8 100644
--- a/apps/web/src/oj/rank/palette.ts
+++ b/apps/web/src/oj/rank/palette.ts
@@ -1,4 +1,4 @@
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 
 /**
  * 排名页的几种颜色（设计稿「排名重设计」G1）。用户说「颜色可以保留」：你绿、前一名蓝、
diff --git a/apps/web/src/oj/submission/components/CodeView.vue b/apps/web/src/oj/submission/components/CodeView.vue
index f9481eb..784c92b 100644
--- a/apps/web/src/oj/submission/components/CodeView.vue
+++ b/apps/web/src/oj/submission/components/CodeView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui'
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 
 /**
  * 只读的代码区：行号 + 高亮 + 可选地标红一行（编译失败 / 运行时错误报了行号时）。
diff --git a/apps/web/src/shared/components/RankAvatar.vue b/apps/web/src/shared/components/RankAvatar.vue
index 1e58237..7c4af50 100644
--- a/apps/web/src/shared/components/RankAvatar.vue
+++ b/apps/web/src/shared/components/RankAvatar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 import { rgba } from 'shared/composables/tone'
 import { displayName } from '@oj2/contract'
 
diff --git a/apps/web/src/shared/composables/chartTheme.ts b/apps/web/src/shared/composables/chartTheme.ts
index c3ad977..ede0b1a 100644
--- a/apps/web/src/shared/composables/chartTheme.ts
+++ b/apps/web/src/shared/composables/chartTheme.ts
@@ -1,4 +1,4 @@
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 import { Chart as ChartJS } from 'chart.js'
 
 /**
diff --git a/apps/web/src/shared/composables/dark.ts b/apps/web/src/shared/composables/dark.ts
new file mode 100644
index 0000000..27d7c31
--- /dev/null
+++ b/apps/web/src/shared/composables/dark.ts
@@ -0,0 +1,16 @@
+import { createGlobalState, useDark as useVueUseDark } from '@vueuse/core'
+
+/**
+ * 全站只有一个 `useDark()` 实例。**别再从 `@vueuse/core` 直接取 useDark** ——
+ * auto-import 已经把 `useDark` 指到这里（apps/web/vite.config.ts 的 priority）。
+ *
+ * VueUse 的 useDark 每个实例挂载时都要把 `<html>` 的 class 「同步」一遍，同步的写法是
+ * 往 `<head>` 插一段关掉过渡的 `<style>`、`getComputedStyle()` 逼浏览器当场重算整页样式、
+ * 再删掉。亮色模式下它那句「没什么要改就跳过」永远不成立（要摘的 `dark` 本来就不在，它也算
+ * 一次改动），所以**每个实例挂载一次就是一次整页样式重算**。
+ *
+ * 提交列表每行的结果胶囊（StatusPill → useTone）都调它：一页 30 行就是 30 次，翻页、
+ * 切筛选再来 30 次，右栏换一条又是三四次。2026-11 实测（生产构建、CPU 降速 6 倍）首屏
+ * 光这一处就占了 1.3 秒。全站共用一个之后只在第一次挂载时同步，后面的调用都是读同一个 ref。
+ */
+export const useDark = createGlobalState(() => useVueUseDark())
diff --git a/apps/web/src/shared/composables/darkTransition.ts b/apps/web/src/shared/composables/darkTransition.ts
index bae2713..71ef2b5 100644
--- a/apps/web/src/shared/composables/darkTransition.ts
+++ b/apps/web/src/shared/composables/darkTransition.ts
@@ -1,4 +1,4 @@
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 
 /**
  * 圆环从哪儿开始扩散。正常点击就用指针落点；键盘触发（Enter / 空格）时浏览器给的
diff --git a/apps/web/src/shared/composables/rarity.ts b/apps/web/src/shared/composables/rarity.ts
index 0bbe2c9..d744b0a 100644
--- a/apps/web/src/shared/composables/rarity.ts
+++ b/apps/web/src/shared/composables/rarity.ts
@@ -1,4 +1,4 @@
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 import { computed } from 'vue'
 import { RARITY_TEXT_COLOR } from 'utils/constants'
 
diff --git a/apps/web/src/shared/composables/tone.ts b/apps/web/src/shared/composables/tone.ts
index 361ad2d..06afe11 100644
--- a/apps/web/src/shared/composables/tone.ts
+++ b/apps/web/src/shared/composables/tone.ts
@@ -1,5 +1,5 @@
 import { useThemeVars } from 'naive-ui'
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 
 export type Tone = 'success' | 'error' | 'warning' | 'info' | 'default'
 
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 6e1b529..ecb523f 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -93,6 +93,11 @@ export default defineConfig(() => {
           'vue-router',
           '@vueuse/core',
           'pinia',
+          // 盖掉上面 @vueuse/core 的同名项：全站共用一个实例，原因见 shared/composables/dark.ts
+          {
+            from: 'shared/composables/dark',
+            imports: [{ name: 'useDark', priority: 10 }],
+          },
           {
             'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
           },