chore: Upgrade vConsole for dynamic themes (#51)

Author: cwandev

build/vite/index.ts

@@ -0,0 +1,45 @@
+import path from 'node:path'
+import { viteVConsole } from 'vite-plugin-vconsole'
+
+// https://github.com/vadxq/vite-plugin-vconsole/issues/21
+
+export function createViteVConsole(command: 'serve' | 'build') {
+  return viteVConsole({
+    entry: [path.resolve('src/main.ts')],
+    enabled: command === 'serve',
+    config: {
+      maxLogNumber: 1000,
+      theme: 'light',
+    },
+    dynamicConfig: {
+      theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
+    },
+    eventListener: `
+      const targetElement = document.querySelector('html'); // 择要监听的元素
+      const observerOptions = {
+        attributes: true, // 监听属性变化
+        attributeFilter: ['class'] // 只监听class属性变化
+      };
+
+      // 定义回调函数来处理观察到的变化
+      function handleAttributeChange(mutationsList) {
+        for(let mutation of mutationsList) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            if (window && window.vConsole) {
+              window.vConsole.dynamicChange.value = new Date().getTime();
+            }
+          }
+        }
+      }
+
+      // 创建观察者实例并传入回调函数
+      const observer = new MutationObserver(handleAttributeChange);
+
+      // 开始观察目标元素
+      observer.observe(targetElement, observerOptions);
+
+      // 当不再需要观察时，停止观察
+      // observer.disconnect();
+    `,
+  })
+}

package.json

@@ -66,7 +66,7 @@
     "unplugin-vue-router": "^0.7.0",
     "vite": "^5.0.12",
     "vite-plugin-mock-dev-server": "^1.4.7",
-    "vite-plugin-vconsole": "^2.0.1",
+    "vite-plugin-vconsole": "^2.1.1",
     "vite-plugin-vue-devtools": "^7.0.14",
     "vitest": "^1.2.2",
     "vue-tsc": "^1.8.27"