diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..a5a7217
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,5 @@
+# Classworks KV 默认服务器域名
+VITE_DEFAULT_KV_SERVER=https://kv.wuyuan.dev
+
+# Classworks KV 授权服务器域名
+VITE_DEFAULT_AUTH_SERVER=https://kv.houlang.cloud
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 4c54ffe..de72770 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -32,6 +32,10 @@ jobs:
           node-version: "20.x"
 
       - name: Build
+        env:
+          VITE_APP_ID: d158067f53627d2b98babe8bffd2fd7d
+          VITE_DEFAULT_KV_SERVER: https://kv.wuyuan.dev
+          VITE_DEFAULT_AUTH_SERVER: https://kv.houlang.cloud
         run: |
           npm install
           npm run build
diff --git a/.gitignore b/.gitignore
index 1139e42..6ad341f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -172,4 +172,3 @@ dist
 vite.config.*.timestamp-*.mjs
 *.timestamp-*
 
-kv-admin
\ No newline at end of file
diff --git a/package.json b/package.json
index 01e1b34..9a2b20a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "Classworks",
+  "name": "classworks",
   "private": true,
   "type": "module",
   "version": "0.0.0",
@@ -14,17 +14,21 @@
     "@examaware-cs/player": "^1.0.2",
     "@mdi/font": "7.4.47",
     "@microsoft/clarity": "^1.0.0",
+    "@vueuse/core": "^13.9.0",
     "axios": "^1.11.0",
     "idb": "^8.0.3",
     "js-base64": "^3.7.8",
     "js-yaml": "^4.1.0",
+    "lucide-vue-next": "^0.545.0",
+    "marked": "^16.4.0",
     "pinyin-pro": "^3.27.0",
     "ratelimit-header-parser": "^0.1.0",
     "roboto-fontface": "*",
-    "tdesign-vue-next": "^1.17.1",
+    "socket.io-client": "^4.8.1",
     "typewriter-effect": "^2.21.0",
     "uuid": "^9.0.1",
     "vue": "^3.5.20",
+    "vue-sonner": "^2.0.9",
     "vuetify": "^3.9.6"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47676e0..44074de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@microsoft/clarity':
         specifier: ^1.0.0
         version: 1.0.0
+      '@vueuse/core':
+        specifier: ^13.9.0
+        version: 13.9.0(vue@3.5.20)
       axios:
         specifier: ^1.11.0
         version: 1.11.0
@@ -32,6 +35,12 @@ importers:
       js-yaml:
         specifier: ^4.1.0
         version: 4.1.0
+      lucide-vue-next:
+        specifier: ^0.545.0
+        version: 0.545.0(vue@3.5.20)
+      marked:
+        specifier: ^16.4.0
+        version: 16.4.0
       pinyin-pro:
         specifier: ^3.27.0
         version: 3.27.0
@@ -41,9 +50,9 @@ importers:
       roboto-fontface:
         specifier: '*'
         version: 0.10.0
-      tdesign-vue-next:
-        specifier: ^1.17.1
-        version: 1.17.1(vue@3.5.20)
+      socket.io-client:
+        specifier: ^4.8.1
+        version: 4.8.1
       typewriter-effect:
         specifier: ^2.21.0
         version: 2.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -53,6 +62,9 @@ importers:
       vue:
         specifier: ^3.5.20
         version: 3.5.20
+      vue-sonner:
+        specifier: ^2.0.9
+        version: 2.0.9
       vuetify:
         specifier: ^3.9.6
         version: 3.9.6(vite-plugin-vuetify@2.1.2)(vue@3.5.20)
@@ -65,25 +77,25 @@ importers:
         version: 1.0.0
       '@vitejs/plugin-vue':
         specifier: ^5.2.3
-        version: 5.2.3(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)
+        version: 5.2.3(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)
       eslint:
         specifier: ^9.14.0
-        version: 9.15.0(jiti@2.4.2)
+        version: 9.15.0(jiti@2.6.1)
       eslint-plugin-import:
         specifier: ^2.29.1
-        version: 2.31.0(eslint@9.15.0(jiti@2.4.2))
+        version: 2.31.0(eslint@9.15.0(jiti@2.6.1))
       eslint-plugin-n:
         specifier: ^16.6.2
-        version: 16.6.2(eslint@9.15.0(jiti@2.4.2))
+        version: 16.6.2(eslint@9.15.0(jiti@2.6.1))
       eslint-plugin-node:
         specifier: ^11.1.0
-        version: 11.1.0(eslint@9.15.0(jiti@2.4.2))
+        version: 11.1.0(eslint@9.15.0(jiti@2.6.1))
       eslint-plugin-promise:
         specifier: ^6.4.0
-        version: 6.6.0(eslint@9.15.0(jiti@2.4.2))
+        version: 6.6.0(eslint@9.15.0(jiti@2.6.1))
       eslint-plugin-vue:
         specifier: ^9.30.0
-        version: 9.31.0(eslint@9.15.0(jiti@2.4.2))
+        version: 9.31.0(eslint@9.15.0(jiti@2.6.1))
       pinia:
         specifier: ^3.0.3
         version: 3.0.3(vue@3.5.20)
@@ -95,10 +107,10 @@ importers:
         version: 1.86.3
       unplugin-auto-import:
         specifier: ^19.1.2
-        version: 19.1.2
+        version: 19.1.2(@vueuse/core@13.9.0(vue@3.5.20))
       unplugin-fonts:
         specifier: ^1.3.1
-        version: 1.3.1(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))
+        version: 1.3.1(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))
       unplugin-vue-components:
         specifier: ^28.4.1
         version: 28.4.1(@babel/parser@7.28.3)(vue@3.5.20)
@@ -107,16 +119,16 @@ importers:
         version: 0.12.0(vue-router@4.5.1(vue@3.5.20))(vue@3.5.20)
       vite:
         specifier: ^5.4.17
-        version: 5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
+        version: 5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
       vite-plugin-pwa:
         specifier: ^1.0.3
-        version: 1.0.3(@vite-pwa/assets-generator@1.0.0)(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
+        version: 1.0.3(@vite-pwa/assets-generator@1.0.0)(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
       vite-plugin-vue-layouts:
         specifier: ^0.11.0
-        version: 0.11.0(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue-router@4.5.1(vue@3.5.20))(vue@3.5.20)
+        version: 0.11.0(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue-router@4.5.1(vue@3.5.20))(vue@3.5.20)
       vite-plugin-vuetify:
         specifier: ^2.1.2
-        version: 2.1.2(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)(vuetify@3.9.6)
+        version: 2.1.2(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)(vuetify@3.9.6)
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.20)
@@ -212,18 +224,10 @@ packages:
     resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.25.9':
-    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.25.9':
-    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-identifier@7.27.1':
     resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
     engines: {node: '>=6.9.0'}
@@ -240,16 +244,6 @@ packages:
     resolution: {integrity: sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.26.2':
-    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/parser@7.27.0':
-    resolution: {integrity: sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/parser@7.28.3':
     resolution: {integrity: sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==}
     engines: {node: '>=6.0.0'}
@@ -632,14 +626,6 @@ packages:
     resolution: {integrity: sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.26.0':
-    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.27.0':
-    resolution: {integrity: sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.28.2':
     resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
     engines: {node: '>=6.9.0'}
@@ -977,6 +963,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
@@ -1239,6 +1228,9 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@socket.io/component-emitter@3.1.2':
+    resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
+
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
 
@@ -1278,6 +1270,9 @@ packages:
   '@types/validator@13.15.3':
     resolution: {integrity: sha512-7bcUmDyS6PN3EuD9SlGGOxM77F8WLVsrwkxyWxKnxzmXoequ6c7741QBrANq6htVRGOITJ7z72mTP6Z4XyuG+Q==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@vite-pwa/assets-generator@1.0.0':
     resolution: {integrity: sha512-tWRF/tsqGkND5+dDVnJz7DzQkIRjtTRRYvA3y6l4FwTwK47OK72p1X7ResSz6T7PimIZMuFd+arsB8NRIG+Sww==}
     engines: {node: '>=16.14.0'}
@@ -1299,27 +1294,15 @@ packages:
       vue:
         optional: true
 
-  '@vue/compiler-core@3.5.13':
-    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
-
   '@vue/compiler-core@3.5.20':
     resolution: {integrity: sha512-8TWXUyiqFd3GmP4JTX9hbiTFRwYHgVL/vr3cqhr4YQ258+9FADwvj7golk2sWNGHR67QgmCZ8gz80nQcMokhwg==}
 
-  '@vue/compiler-dom@3.5.13':
-    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
-
   '@vue/compiler-dom@3.5.20':
     resolution: {integrity: sha512-whB44M59XKjqUEYOMPYU0ijUV0G+4fdrHVKDe32abNdX/kJe1NUEMqsi4cwzXa9kyM9w5S8WqFsrfo1ogtBZGQ==}
 
-  '@vue/compiler-sfc@3.5.13':
-    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
-
   '@vue/compiler-sfc@3.5.20':
     resolution: {integrity: sha512-SFcxapQc0/feWiSBfkGsa1v4DOrnMAQSYuvDMpEaxbpH5dKbnEM5KobSNSgU+1MbHCl+9ftm7oQWxvwDB6iBfw==}
 
-  '@vue/compiler-ssr@3.5.13':
-    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
-
   '@vue/compiler-ssr@3.5.20':
     resolution: {integrity: sha512-RSl5XAMc5YFUXpDQi+UQDdVjH9FnEpLDHIALg5J0ITHxkEzJ8uQLlo7CIbjPYqmZtt6w0TsIPbo1izYXwDG7JA==}
 
@@ -1349,9 +1332,6 @@ packages:
     peerDependencies:
       vue: 3.5.20
 
-  '@vue/shared@3.5.13':
-    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
-
   '@vue/shared@3.5.20':
     resolution: {integrity: sha512-SoRGP596KU/ig6TfgkCMbXkr4YJ91n/QSdMuqeP5r3hVIYA3CPHUBCc7Skak0EAKV+5lL4KyIh61VA/pK1CIAA==}
 
@@ -1361,6 +1341,19 @@ packages:
       vue: ^3.0.0
       vuetify: ^3.0.0
 
+  '@vueuse/core@13.9.0':
+    resolution: {integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/metadata@13.9.0':
+    resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
+
+  '@vueuse/shared@13.9.0':
+    resolution: {integrity: sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==}
+    peerDependencies:
+      vue: ^3.5.0
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1425,12 +1418,8 @@ packages:
     resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
     engines: {node: '>= 0.4'}
 
-  ast-kit@1.3.1:
-    resolution: {integrity: sha512-3bIRV4s/cNAee2rKjuvYdoG+0CMqtOIgCvWrJL6zG8R0fDyMwYzStspX5JqXPbdMzM+qxHZ6g2rMHKhr3HkPlQ==}
-    engines: {node: '>=16.14.0'}
-
-  ast-kit@1.4.2:
-    resolution: {integrity: sha512-lvGehj1XsrIoQrD5CfPduIzQbcpuX2EPjlk/vDMDQF9U9HLRB6WwMTdighj5n52hdhh8xg9VgPTU7Q25MuJ/rw==}
+  ast-kit@1.4.3:
+    resolution: {integrity: sha512-MdJqjpodkS5J149zN0Po+HPshkTdUyrvF7CKTafUgv69vBSPtncrj+3IiUgqdd7ElIEkbeXCsEouBUwLrw9Ilg==}
     engines: {node: '>=16.14.0'}
 
   ast-walker-scope@0.6.2:
@@ -1715,6 +1704,10 @@ packages:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
 
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -1731,6 +1724,13 @@ packages:
   electron-to-chromium@1.5.132:
     resolution: {integrity: sha512-QgX9EBvWGmvSRa74zqfnG7+Eno0Ak0vftBll0Pt2/z5b3bEGYL6OUXLgKPtvx73dn3dvwrlyVkjPKRRlhLYTEg==}
 
+  engine.io-client@6.6.3:
+    resolution: {integrity: sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==}
+
+  engine.io-parser@5.2.3:
+    resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
+    engines: {node: '>=10.0.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -2379,6 +2379,10 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
   js-base64@3.7.8:
     resolution: {integrity: sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==}
 
@@ -2444,6 +2448,70 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
   local-pkg@1.1.1:
     resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
     engines: {node: '>=14'}
@@ -2474,6 +2542,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-vue-next@0.545.0:
+    resolution: {integrity: sha512-UXOQYVdJ2dmwkC0jawC9D5efCw/vyogTKvPx7gJ8ZzhrDblcP5oUt44CyMgjX1WJX7gG5XxGdB5FrT/sYM637Q==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   magic-string-ast@0.7.1:
     resolution: {integrity: sha512-ub9iytsEbT7Yw/Pd29mSo/cNQpaEu67zR1VVcXDiYjSFwzeBxNdTd0FMnSslLQXiRj8uGPzwsaoefrMD5XAmdw==}
     engines: {node: '>=16.14.0'}
@@ -2481,12 +2554,14 @@ packages:
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
-  magic-string@0.30.12:
-    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
-
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  marked@16.4.0:
+    resolution: {integrity: sha512-CTPAcRBq57cn3R8n3hwc2REddc28hjR7RzDXQ+lXLmMJYqn20BaI2cGw6QjgZGIgVfp2Wdfw4aMzgNteQ6qJgQ==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -2534,11 +2609,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -2628,9 +2698,6 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -2677,10 +2744,6 @@ packages:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
-  postcss@8.4.49:
-    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.5.3:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -3050,6 +3113,14 @@ packages:
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
+  socket.io-client@4.8.1:
+    resolution: {integrity: sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==}
+    engines: {node: '>=10.0.0'}
+
+  socket.io-parser@4.2.4:
+    resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
+    engines: {node: '>=10.0.0'}
+
   sortablejs@1.15.6:
     resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
 
@@ -3435,6 +3506,20 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-sonner@2.0.9:
+    resolution: {integrity: sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw==}
+    peerDependencies:
+      '@nuxt/kit': ^4.0.3
+      '@nuxt/schema': ^4.0.3
+      nuxt: ^4.0.3
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@nuxt/schema':
+        optional: true
+      nuxt:
+        optional: true
+
   vue@3.5.20:
     resolution: {integrity: sha512-2sBz0x/wis5TkF1XZ2vH25zWq3G1bFEPOfkBcx2ikowmphoQsPH6X0V3mmPCXA2K1N/XGTnifVyDQP4GfDDeQw==}
     peerDependencies:
@@ -3552,16 +3637,32 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  ws@8.17.1:
+    resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
 
+  xmlhttprequest-ssl@2.1.2:
+    resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
+    engines: {node: '>=0.4.0'}
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  yaml@2.7.1:
-    resolution: {integrity: sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==}
-    engines: {node: '>= 14'}
+  yaml@2.8.1:
+    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+    engines: {node: '>= 14.6'}
     hasBin: true
 
   yocto-queue@0.1.0:
@@ -3715,12 +3816,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-string-parser@7.25.9': {}
-
   '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.25.9': {}
-
   '@babel/helper-validator-identifier@7.27.1': {}
 
   '@babel/helper-validator-option@7.25.9': {}
@@ -3738,14 +3835,6 @@ snapshots:
       '@babel/template': 7.27.0
       '@babel/types': 7.28.2
 
-  '@babel/parser@7.26.2':
-    dependencies:
-      '@babel/types': 7.26.0
-
-  '@babel/parser@7.27.0':
-    dependencies:
-      '@babel/types': 7.27.0
-
   '@babel/parser@7.28.3':
     dependencies:
       '@babel/types': 7.28.2
@@ -4228,16 +4317,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.26.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
-
-  '@babel/types@7.27.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
-
   '@babel/types@7.28.2':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
@@ -4321,9 +4400,9 @@ snapshots:
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.1(eslint@9.15.0(jiti@2.4.2))':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.15.0(jiti@2.6.1))':
     dependencies:
-      eslint: 9.15.0(jiti@2.4.2)
+      eslint: 9.15.0(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
@@ -4462,7 +4541,7 @@ snapshots:
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/resolve-uri@3.1.2': {}
@@ -4476,10 +4555,12 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/sourcemap-codec': 1.5.5
 
   '@mdi/font@7.4.47': {}
 
@@ -4674,6 +4755,8 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@socket.io/component-emitter@3.1.2': {}
+
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     dependencies:
       ejs: 3.1.10
@@ -4707,6 +4790,8 @@ snapshots:
 
   '@types/validator@13.15.3': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@vite-pwa/assets-generator@1.0.0':
     dependencies:
       cac: 6.7.14
@@ -4716,15 +4801,15 @@ snapshots:
       sharp-ico: 0.1.5
       unconfig: 7.3.1
 
-  '@vitejs/plugin-vue@5.2.3(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)':
+  '@vitejs/plugin-vue@5.2.3(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)':
     dependencies:
-      vite: 5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
+      vite: 5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
       vue: 3.5.20
 
   '@vue-macros/common@1.16.1(vue@3.5.20)':
     dependencies:
-      '@vue/compiler-sfc': 3.5.13
-      ast-kit: 1.4.2
+      '@vue/compiler-sfc': 3.5.20
+      ast-kit: 1.4.3
       local-pkg: 1.1.1
       magic-string-ast: 0.7.1
       pathe: 2.0.3
@@ -4732,14 +4817,6 @@ snapshots:
     optionalDependencies:
       vue: 3.5.20
 
-  '@vue/compiler-core@3.5.13':
-    dependencies:
-      '@babel/parser': 7.26.2
-      '@vue/shared': 3.5.13
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
   '@vue/compiler-core@3.5.20':
     dependencies:
       '@babel/parser': 7.28.3
@@ -4748,28 +4825,11 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.13':
-    dependencies:
-      '@vue/compiler-core': 3.5.13
-      '@vue/shared': 3.5.13
-
   '@vue/compiler-dom@3.5.20':
     dependencies:
       '@vue/compiler-core': 3.5.20
       '@vue/shared': 3.5.20
 
-  '@vue/compiler-sfc@3.5.13':
-    dependencies:
-      '@babel/parser': 7.26.2
-      '@vue/compiler-core': 3.5.13
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-ssr': 3.5.13
-      '@vue/shared': 3.5.13
-      estree-walker: 2.0.2
-      magic-string: 0.30.12
-      postcss: 8.4.49
-      source-map-js: 1.2.1
-
   '@vue/compiler-sfc@3.5.20':
     dependencies:
       '@babel/parser': 7.28.3
@@ -4782,11 +4842,6 @@ snapshots:
       postcss: 8.5.6
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.13':
-    dependencies:
-      '@vue/compiler-dom': 3.5.13
-      '@vue/shared': 3.5.13
-
   '@vue/compiler-ssr@3.5.20':
     dependencies:
       '@vue/compiler-dom': 3.5.20
@@ -4834,8 +4889,6 @@ snapshots:
       '@vue/shared': 3.5.20
       vue: 3.5.20
 
-  '@vue/shared@3.5.13': {}
-
   '@vue/shared@3.5.20': {}
 
   '@vuetify/loader-shared@2.1.1(vue@3.5.20)(vuetify@3.9.6)':
@@ -4844,6 +4897,19 @@ snapshots:
       vue: 3.5.20
       vuetify: 3.9.6(vite-plugin-vuetify@2.1.2)(vue@3.5.20)
 
+  '@vueuse/core@13.9.0(vue@3.5.20)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.9.0
+      '@vueuse/shared': 13.9.0(vue@3.5.20)
+      vue: 3.5.20
+
+  '@vueuse/metadata@13.9.0': {}
+
+  '@vueuse/shared@13.9.0(vue@3.5.20)':
+    dependencies:
+      vue: 3.5.20
+
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
@@ -4940,20 +5006,15 @@ snapshots:
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
 
-  ast-kit@1.3.1:
+  ast-kit@1.4.3:
     dependencies:
-      '@babel/parser': 7.27.0
-      pathe: 1.1.2
-
-  ast-kit@1.4.2:
-    dependencies:
-      '@babel/parser': 7.27.0
+      '@babel/parser': 7.28.3
       pathe: 2.0.3
 
   ast-walker-scope@0.6.2:
     dependencies:
-      '@babel/parser': 7.27.0
-      ast-kit: 1.3.1
+      '@babel/parser': 7.28.3
+      ast-kit: 1.4.3
 
   async-function@1.0.0: {}
 
@@ -5233,6 +5294,9 @@ snapshots:
 
   detect-libc@2.0.3: {}
 
+  detect-libc@2.1.2:
+    optional: true
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -5249,6 +5313,20 @@ snapshots:
 
   electron-to-chromium@1.5.132: {}
 
+  engine.io-client@6.6.3:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+      engine.io-parser: 5.2.3
+      ws: 8.17.1
+      xmlhttprequest-ssl: 2.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  engine.io-parser@5.2.3: {}
+
   entities@4.5.0: {}
 
   es-abstract@1.23.5:
@@ -5431,9 +5509,9 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@9.15.0(jiti@2.4.2)):
+  eslint-compat-utils@0.5.1(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.15.0(jiti@2.4.2)
+      eslint: 9.15.0(jiti@2.6.1)
       semver: 7.6.3
 
   eslint-import-resolver-node@0.3.9:
@@ -5444,29 +5522,29 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(eslint-import-resolver-node@0.3.9)(eslint@9.15.0(jiti@2.4.2)):
+  eslint-module-utils@2.12.0(eslint-import-resolver-node@0.3.9)(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      eslint: 9.15.0(jiti@2.4.2)
+      eslint: 9.15.0(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-es-x@7.8.0(eslint@9.15.0(jiti@2.4.2)):
+  eslint-plugin-es-x@7.8.0(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.2))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
-      eslint: 9.15.0(jiti@2.4.2)
-      eslint-compat-utils: 0.5.1(eslint@9.15.0(jiti@2.4.2))
+      eslint: 9.15.0(jiti@2.6.1)
+      eslint-compat-utils: 0.5.1(eslint@9.15.0(jiti@2.6.1))
 
-  eslint-plugin-es@3.0.1(eslint@9.15.0(jiti@2.4.2)):
+  eslint-plugin-es@3.0.1(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.15.0(jiti@2.4.2)
+      eslint: 9.15.0(jiti@2.6.1)
       eslint-utils: 2.1.0
       regexpp: 3.2.0
 
-  eslint-plugin-import@2.31.0(eslint@9.15.0(jiti@2.4.2)):
+  eslint-plugin-import@2.31.0(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -5475,9 +5553,9 @@ snapshots:
       array.prototype.flatmap: 1.3.2
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.15.0(jiti@2.4.2)
+      eslint: 9.15.0(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(eslint-import-resolver-node@0.3.9)(eslint@9.15.0(jiti@2.4.2))
+      eslint-module-utils: 2.12.0(eslint-import-resolver-node@0.3.9)(eslint@9.15.0(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -5493,12 +5571,12 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-n@16.6.2(eslint@9.15.0(jiti@2.4.2)):
+  eslint-plugin-n@16.6.2(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.2))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.6.1))
       builtins: 5.1.0
-      eslint: 9.15.0(jiti@2.4.2)
-      eslint-plugin-es-x: 7.8.0(eslint@9.15.0(jiti@2.4.2))
+      eslint: 9.15.0(jiti@2.6.1)
+      eslint-plugin-es-x: 7.8.0(eslint@9.15.0(jiti@2.6.1))
       get-tsconfig: 4.8.1
       globals: 13.24.0
       ignore: 5.3.2
@@ -5508,30 +5586,30 @@ snapshots:
       resolve: 1.22.8
       semver: 7.6.3
 
-  eslint-plugin-node@11.1.0(eslint@9.15.0(jiti@2.4.2)):
+  eslint-plugin-node@11.1.0(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.15.0(jiti@2.4.2)
-      eslint-plugin-es: 3.0.1(eslint@9.15.0(jiti@2.4.2))
+      eslint: 9.15.0(jiti@2.6.1)
+      eslint-plugin-es: 3.0.1(eslint@9.15.0(jiti@2.6.1))
       eslint-utils: 2.1.0
       ignore: 5.3.2
       minimatch: 3.1.2
       resolve: 1.22.8
       semver: 6.3.1
 
-  eslint-plugin-promise@6.6.0(eslint@9.15.0(jiti@2.4.2)):
+  eslint-plugin-promise@6.6.0(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.15.0(jiti@2.4.2)
+      eslint: 9.15.0(jiti@2.6.1)
 
-  eslint-plugin-vue@9.31.0(eslint@9.15.0(jiti@2.4.2)):
+  eslint-plugin-vue@9.31.0(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.2))
-      eslint: 9.15.0(jiti@2.4.2)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.6.1))
+      eslint: 9.15.0(jiti@2.6.1)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.4.2))
+      vue-eslint-parser: 9.4.3(eslint@9.15.0(jiti@2.6.1))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -5556,9 +5634,9 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.15.0(jiti@2.4.2):
+  eslint@9.15.0(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.4.2))
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.19.0
       '@eslint/core': 0.9.0
@@ -5593,7 +5671,7 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
-      jiti: 2.4.2
+      jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
 
@@ -6076,6 +6154,9 @@ snapshots:
 
   jiti@2.4.2: {}
 
+  jiti@2.6.1:
+    optional: true
+
   js-base64@3.7.8: {}
 
   js-tokens@4.0.0: {}
@@ -6125,6 +6206,52 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+    optional: true
+
   local-pkg@1.1.1:
     dependencies:
       mlly: 1.7.4
@@ -6153,6 +6280,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-vue-next@0.545.0(vue@3.5.20):
+    dependencies:
+      vue: 3.5.20
+
   magic-string-ast@0.7.1:
     dependencies:
       magic-string: 0.30.17
@@ -6161,14 +6292,12 @@ snapshots:
     dependencies:
       sourcemap-codec: 1.4.8
 
-  magic-string@0.30.12:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  marked@16.4.0: {}
+
   math-intrinsics@1.1.0: {}
 
   merge2@1.4.1: {}
@@ -6209,8 +6338,6 @@ snapshots:
 
   nanoid@3.3.11: {}
 
-  nanoid@3.3.7: {}
-
   natural-compare@1.4.0: {}
 
   node-addon-api@7.1.1:
@@ -6306,8 +6433,6 @@ snapshots:
 
   path-parse@1.0.7: {}
 
-  pathe@1.1.2: {}
-
   pathe@2.0.3: {}
 
   perfect-debounce@1.0.0: {}
@@ -6346,12 +6471,6 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss@8.4.49:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
   postcss@8.5.3:
     dependencies:
       nanoid: 3.3.11
@@ -6766,6 +6885,24 @@ snapshots:
 
   smob@1.5.0: {}
 
+  socket.io-client@4.8.1:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+      engine.io-client: 6.6.3
+      socket.io-parser: 4.2.4
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  socket.io-parser@4.2.4:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+
   sortablejs@1.15.6: {}
 
   source-map-js@1.2.1: {}
@@ -7074,7 +7211,7 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-auto-import@19.1.2:
+  unplugin-auto-import@19.1.2(@vueuse/core@13.9.0(vue@3.5.20)):
     dependencies:
       local-pkg: 1.1.1
       magic-string: 0.30.17
@@ -7082,12 +7219,14 @@ snapshots:
       unimport: 4.1.3
       unplugin: 2.2.2
       unplugin-utils: 0.2.4
+    optionalDependencies:
+      '@vueuse/core': 13.9.0(vue@3.5.20)
 
-  unplugin-fonts@1.3.1(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)):
+  unplugin-fonts@1.3.1(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)):
     dependencies:
       fast-glob: 3.3.2
       unplugin: 2.0.0-beta.1
-      vite: 5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
+      vite: 5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
 
   unplugin-utils@0.2.4:
     dependencies:
@@ -7112,7 +7251,7 @@ snapshots:
 
   unplugin-vue-router@0.12.0(vue-router@4.5.1(vue@3.5.20))(vue@3.5.20):
     dependencies:
-      '@babel/types': 7.27.0
+      '@babel/types': 7.28.2
       '@vue-macros/common': 1.16.1(vue@3.5.20)
       ast-walker-scope: 0.6.2
       chokidar: 4.0.3
@@ -7126,7 +7265,7 @@ snapshots:
       scule: 1.3.0
       unplugin: 2.2.2
       unplugin-utils: 0.2.4
-      yaml: 2.7.1
+      yaml: 2.8.1
     optionalDependencies:
       vue-router: 4.5.1(vue@3.5.20)
     transitivePeerDependencies:
@@ -7164,12 +7303,12 @@ snapshots:
 
   varint@6.0.0: {}
 
-  vite-plugin-pwa@1.0.3(@vite-pwa/assets-generator@1.0.0)(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(workbox-build@7.3.0)(workbox-window@7.3.0):
+  vite-plugin-pwa@1.0.3(@vite-pwa/assets-generator@1.0.0)(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(workbox-build@7.3.0)(workbox-window@7.3.0):
     dependencies:
       debug: 4.4.0
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.12
-      vite: 5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
+      vite: 5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
       workbox-build: 7.3.0
       workbox-window: 7.3.0
     optionalDependencies:
@@ -7177,42 +7316,43 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-layouts@0.11.0(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue-router@4.5.1(vue@3.5.20))(vue@3.5.20):
+  vite-plugin-vue-layouts@0.11.0(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue-router@4.5.1(vue@3.5.20))(vue@3.5.20):
     dependencies:
       debug: 4.3.7
       fast-glob: 3.3.2
-      vite: 5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
+      vite: 5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
       vue: 3.5.20
       vue-router: 4.5.1(vue@3.5.20)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vuetify@2.1.2(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)(vuetify@3.9.6):
+  vite-plugin-vuetify@2.1.2(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)(vuetify@3.9.6):
     dependencies:
       '@vuetify/loader-shared': 2.1.1(vue@3.5.20)(vuetify@3.9.6)
       debug: 4.4.0
       upath: 2.0.1
-      vite: 5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
+      vite: 5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)
       vue: 3.5.20
       vuetify: 3.9.6(vite-plugin-vuetify@2.1.2)(vue@3.5.20)
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0):
+  vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.3
       rollup: 4.39.0
     optionalDependencies:
       fsevents: 2.3.3
+      lightningcss: 1.30.1
       sass: 1.86.3
       sass-embedded: 1.86.3
       terser: 5.39.0
 
-  vue-eslint-parser@9.4.3(eslint@9.15.0(jiti@2.4.2)):
+  vue-eslint-parser@9.4.3(eslint@9.15.0(jiti@2.6.1)):
     dependencies:
       debug: 4.3.7
-      eslint: 9.15.0(jiti@2.4.2)
+      eslint: 9.15.0(jiti@2.6.1)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -7227,6 +7367,8 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.20
 
+  vue-sonner@2.0.9: {}
+
   vue@3.5.20:
     dependencies:
       '@vue/compiler-dom': 3.5.20
@@ -7239,7 +7381,7 @@ snapshots:
     dependencies:
       vue: 3.5.20
     optionalDependencies:
-      vite-plugin-vuetify: 2.1.2(vite@5.4.17(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)(vuetify@3.9.6)
+      vite-plugin-vuetify: 2.1.2(vite@5.4.17(lightningcss@1.30.1)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0))(vue@3.5.20)(vuetify@3.9.6)
 
   webidl-conversions@4.0.2: {}
 
@@ -7429,10 +7571,14 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  ws@8.17.1: {}
+
   xml-name-validator@4.0.0: {}
 
+  xmlhttprequest-ssl@2.1.2: {}
+
   yallist@3.1.1: {}
 
-  yaml@2.7.1: {}
+  yaml@2.8.1: {}
 
   yocto-queue@0.1.0: {}
diff --git a/src/App.vue b/src/App.vue
index d97ba1c..17abb14 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,15 @@
 <template>
   <v-app>
-    <!-- KvInitialize 组件自行决定是否展示或执行跳转 -->
-    <kv-initialize />
     <!-- 正常路由 -->
     <router-view v-slot="{ Component, route }">
-      <transition name="md3" mode="out-in">
-        <component :is="Component" :key="route.path" />
+      <transition
+        name="md3"
+        mode="out-in"
+      >
+        <component
+          :is="Component"
+          :key="route.path"
+        />
       </transition>
     </router-view>
     <global-message />
@@ -18,9 +22,7 @@ import { onMounted } from "vue";
 import { useTheme } from "vuetify";
 import { getSetting } from "@/utils/settings";
 import RateLimitModal from "@/components/RateLimitModal.vue";
-import KvInitialize from "@/components/KvInitialize.vue";
 import Clarity from "@microsoft/clarity";
-
 const theme = useTheme();
 
 onMounted(() => {
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
deleted file mode 100644
index 060f9cc..0000000
--- a/src/components/AppFooter.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <v-footer height="40" app>
-    <a
-      v-for="item in items"
-      :key="item.title"
-      :href="item.href"
-      :title="item.title"
-      class="d-inline-block mx-2 social-link"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <v-icon :icon="item.icon" :size="item.icon === 'mdi-earth' ? 24 : 16" />
-    </a>
-
-
-    <div
-      class="text-caption text-disabled"
-      style="position: absolute; right: 16px"
-    >
-
-      <a
-        class="text-decoration-none on-surface"
-        href="https://github.com/ZeroCatDev/Classworks"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Classworks
-      </a>  <a
-        class="text-decoration-none on-surface"
-        href="https://beian.miit.gov.cn"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        浙ICP备2024068645号
-      </a>
-    </div>
-  </v-footer>
-</template>
-
-<script setup>
-import { useDisplay } from "vuetify";
-const { mobile } = useDisplay();
-
-const items = [
-  {
-    title: "Classworks",
-    icon: `mdi-earth`,
-    href: "https://cs.houlangs.com",
-  },
-  {
-    title: "ZeroCat",
-    icon: "mdi-xml",
-    href: "https://zerocat.houlangs.com",
-  },
-  {
-    title: "GitHub",
-    icon: "mdi-github",
-    href: "https://github.com/ZeroCatDev/Classworks",
-  },
-];
-</script>
-
-<style scoped lang="sass">
-.social-link :deep(.v-icon)
-  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
-  text-decoration: none
-  transition: .2s ease-in-out
-
-  &:hover
-    color: rgba(25, 118, 210, 1)
-</style>
diff --git a/src/components/ChatWidget.vue b/src/components/ChatWidget.vue
new file mode 100644
index 0000000..3cfa99a
--- /dev/null
+++ b/src/components/ChatWidget.vue
@@ -0,0 +1,396 @@
+<template>
+  <!-- Floating toggle button -->
+  <div
+    v-if="showToggleButton"
+    class="chat-toggle"
+    :style="toggleStyle"
+  >
+    <v-btn
+      icon
+      color="primary"
+      variant="flat"
+      @click="open()"
+    >
+      <v-badge
+        :content="unreadCount || undefined"
+        :model-value="unreadCount > 0"
+        color="error"
+        overlap
+      >
+        <v-icon>
+          mdi-chat
+        </v-icon>
+      </v-badge>
+    </v-btn>
+  </div>
+
+  <!-- Chat panel -->
+  <div
+    v-show="visible"
+    class="chat-panel"
+    :style="panelStyle"
+  >
+    <v-card
+      border
+      elevation="8"
+      class="chat-card"
+    >
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2">
+          mdi-chat-processing
+        </v-icon>
+        <span class="text-subtitle-1">设备聊天室</span>
+        <v-spacer />
+        <v-tooltip location="top">
+          <template #activator="{ props }">
+            <v-chip
+              v-bind="props"
+              size="x-small"
+              :color="connected ? 'success' : 'grey'"
+              variant="tonal"
+            >
+              {{ connected ? '已连接' : '未连接' }}
+            </v-chip>
+          </template>
+          <span>Socket {{ socketId || '-' }}</span>
+        </v-tooltip>
+        <v-btn
+          icon
+          variant="text"
+          @click="close()"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="chat-body">
+        <div
+          ref="listRef"
+          class="messages"
+        >
+          <template
+            v-for="msg in decoratedMessages"
+            :key="msg._id"
+          >
+            <div
+              v-if="msg._type === 'divider'"
+              class="divider-row"
+            >
+              <v-divider class="my-2" />
+              <div class="divider-text">
+                今天 - 上次访问
+              </div>
+              <v-divider class="my-2" />
+            </div>
+            <div
+              v-else
+              class="message-row"
+              :class="{ self: msg.self }"
+            >
+              <div class="avatar">
+                <v-avatar
+                  size="24"
+                  :color="msg.self ? 'primary' : 'grey'"
+                >
+                  <v-icon size="small">
+                    {{ msg.self ? 'mdi-account' : 'mdi-account-outline' }}
+                  </v-icon>
+                </v-avatar>
+              </div>
+              <div class="bubble">
+                <div class="text">
+                  {{ msg.text }}
+                </div>
+                <div class="meta">
+                  {{ formatTime(msg.at) }}
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="chat-input">
+        <v-btn
+          icon
+          variant="text"
+          class="mr-1"
+          @click="insertEmoji('😄')"
+        >
+          <v-icon>mdi-emoticon-outline</v-icon>
+        </v-btn>
+        <v-textarea
+          ref="inputRef"
+          v-model="text"
+          class="flex-grow-1"
+          rows="1"
+          auto-grow
+          variant="solo"
+          hide-details
+          placeholder="输入消息"
+          @keydown.enter.prevent="handleEnter"
+          @keydown.shift.enter.stop
+        />
+        <v-btn
+          color="primary"
+          :disabled="!canSend"
+          class="ml-2"
+          @click="send"
+        >
+          <v-icon start>
+            mdi-send
+          </v-icon>
+          发送
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import { getSetting } from '@/utils/settings'
+import { getSocket, joinToken, on as socketOn } from '@/utils/socketClient'
+
+export default {
+  name: 'ChatWidget',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    showButton: {
+      type: Boolean,
+      default: true,
+    },
+    offset: {
+      type: Number,
+      default: 16,
+    },
+    width: {
+      type: Number,
+      default: 380,
+    },
+    height: {
+      type: Number,
+      default: 520,
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      visible: this.modelValue,
+      text: '',
+      messages: [],
+      lastVisit: null,
+      unreadCount: 0,
+      connected: false,
+      socketId: '',
+    }
+  },
+  computed: {
+    panelStyle() {
+      return {
+        right: this.offset + 'px',
+        bottom: this.offset + 'px',
+        width: this.width + 'px',
+        height: this.height + 'px',
+      }
+    },
+    toggleStyle() {
+      return {
+        right: this.offset + 'px',
+        bottom: this.offset + 'px',
+      }
+    },
+    canSend() {
+      const token = getSetting('server.kvToken')
+      return !!(token && this.text.trim())
+    },
+    showToggleButton() {
+      return this.$props.showButton && !this.visible
+    },
+    decoratedMessages() {
+      // Insert divider between lastVisit and now
+      if (!this.lastVisit) return this.messages
+      const idx = this.messages.findIndex(m => m.at && new Date(m.at).getTime() >= new Date(this.lastVisit).getTime())
+      if (idx <= 0) return this.messages
+      const before = this.messages.slice(0, idx)
+      const after = this.messages.slice(idx)
+      return [
+        ...before,
+        { _id: 'divider', _type: 'divider' },
+        ...after,
+      ]
+    },
+  },
+  watch: {
+    modelValue(val) {
+      this.visible = val
+      if (val) {
+        this.onOpen()
+      }
+    },
+  },
+  mounted() {
+    try {
+      const stored = localStorage.getItem('chat.lastVisit')
+      if (stored) this.lastVisit = stored
+    } catch (e) { void e }
+
+    // Prepare socket
+    const s = getSocket()
+    this.connected = !!s.connected
+    this.socketId = s.id || ''
+
+    s.on('connect', () => {
+      this.connected = true
+      this.socketId = s.id || ''
+    })
+    s.on('disconnect', () => {
+      this.connected = false
+    })
+
+    // Auto join by token if exists
+    const token = getSetting('server.kvToken')
+    if (token) joinToken(token)
+
+    // Listen chat messages
+    this.offMessage = socketOn('chat:message', (msg) => {
+      this.pushMessage(msg)
+    })
+
+    // If initially visible, run open logic
+    if (this.visible) this.onOpen()
+  },
+  beforeUnmount() {
+    if (this.offMessage) this.offMessage()
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.$emit('update:modelValue', true)
+      this.onOpen()
+    },
+    close() {
+      this.visible = false
+      this.$emit('update:modelValue', false)
+      try {
+        localStorage.setItem('chat.lastVisit', new Date().toISOString())
+      } catch (e) { void e }
+      this.unreadCount = 0
+    },
+    onOpen() {
+      // Scroll to bottom on open
+      this.$nextTick(() => this.scrollToBottom())
+    },
+    insertEmoji(ch) {
+      this.text += ch
+      this.$nextTick(() => {
+        if (this.$refs.inputRef?.$el?.querySelector) {
+          const ta = this.$refs.inputRef.$el.querySelector('textarea')
+          ta?.focus()
+        }
+      })
+    },
+    handleEnter(e) {
+      if (e.shiftKey) return
+      this.send()
+    },
+    send() {
+      const val = this.text.trim()
+      if (!val) return
+      const s = getSocket()
+      s.emit('chat:send', val)
+      this.text = ''
+    },
+    pushMessage(msg) {
+      const entry = {
+        _id: `${msg.at || Date.now()}-${Math.random()}`,
+        text: typeof msg?.text === 'string' ? msg.text : (msg?.text || ''),
+        at: msg.at || new Date().toISOString(),
+        senderId: msg.senderId,
+        self: !!(msg.senderId && msg.senderId === this.socketId),
+      }
+      // ignore empty
+      if (!entry.text) return
+      this.messages.push(entry)
+      // unread when hidden
+      if (!this.visible) this.unreadCount++
+      this.$nextTick(() => this.scrollToBottom())
+      // trim
+      if (this.messages.length > 500) this.messages.shift()
+    },
+    formatTime(iso) {
+      try {
+        const d = new Date(iso)
+        const hh = String(d.getHours()).padStart(2, '0')
+        const mm = String(d.getMinutes()).padStart(2, '0')
+        return `${hh}:${mm}`
+      } catch (e) {
+        void e
+        return ''
+      }
+    },
+    scrollToBottom() {
+      const el = this.$refs.listRef
+      if (!el) return
+      try {
+        el.scrollTop = el.scrollHeight
+      } catch (e) { void e }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.chat-toggle {
+  position: fixed;
+  z-index: 1100;
+}
+.chat-panel {
+  position: fixed;
+  z-index: 1101;
+}
+.chat-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.chat-body {
+  padding: 8px 12px;
+  height: calc(100% - 120px);
+}
+.messages {
+  height: 100%;
+  overflow: auto;
+}
+.message-row {
+  display: flex;
+  align-items: flex-end;
+  margin: 8px 0;
+}
+.message-row.self {
+  flex-direction: row-reverse;
+}
+.message-row .avatar { width: 28px; display: flex; justify-content: center; }
+.message-row .bubble {
+  max-width: 70%;
+  background: rgba(255,255,255,0.06);
+  border-radius: 10px;
+  padding: 6px 10px;
+  margin: 0 8px;
+}
+.message-row.self .bubble {
+  background: rgba(33,150,243,0.15);
+}
+.bubble .text { white-space: pre-wrap; word-break: break-word; }
+.bubble .meta { font-size: 12px; opacity: 0.6; margin-top: 2px; text-align: right; }
+.divider-row { text-align: center; color: rgba(255,255,255,0.6); font-size: 12px; }
+.divider-text { margin: 4px 0; }
+.chat-input { padding: 8px; }
+</style>
diff --git a/src/components/FloatingICP.vue b/src/components/FloatingICP.vue
index 4209b2f..4c82f63 100644
--- a/src/components/FloatingICP.vue
+++ b/src/components/FloatingICP.vue
@@ -1,77 +1,52 @@
 <template>
-  <v-slide-x-transition>
-    <v-card
-      class="floating-icp"
-      elevation="2"
-      rounded="pill"
-      variant="tonal"
-      color="surface-variant"
-      @mouseenter="isHovered = true"
-      @mouseleave="isHovered = false"
-    >
-      <v-btn
-        variant="text"
-        class="icp-button"
-        href="https://beian.miit.gov.cn/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <v-icon
-          icon="mdi-shield-check"
-          size="small"
-          :class="{ 'rotate-icon': isHovered }"
-          class="mr-1"
-        />
-        <span class="text-caption">浙ICP备2024068645号</span>
-      </v-btn>
-    </v-card>
-  </v-slide-x-transition>
+  <a
+    class="floating-icp-link"
+    href="https://beian.miit.gov.cn/"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="浙ICP备2024068645号"
+  >
+    浙ICP备2024068645号
+  </a>
 </template>
 
 <script>
 export default {
   name: 'FloatingICP',
-  data() {
-    return {
-      isHovered: false
-    }
-  }
 }
+
 </script>
 
 <style scoped>
-.floating-icp {
+.floating-icp-link {
   position: fixed;
-  bottom: 24px;
-  right: 24px;
+  right: 4px;
+  bottom: 0;
   z-index: 100;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  color: rgb(107, 107, 107);
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  transition: none !important;
 }
 
-.floating-icp:hover {
-  transform: translateX(-4px);
-}
-
-.icp-button {
-  padding: 0 16px;
-  height: 32px;
-  min-width: unset;
-}
-
-.rotate-icon {
-  transform: rotate(360deg);
-  transition: transform 0.6s ease;
+.floating-icp-link:hover,
+.floating-icp-link:focus,
+.floating-icp-link:active {
+  color: rgb(65, 65, 65);
+  text-decoration: none;
+  outline: none;
 }
 
 @media (max-width: 600px) {
-  .floating-icp {
+  .floating-icp-link {
     right: 16px;
-    bottom: 80px; /* 避免与其他悬浮组件重叠 */
-  }
-
-  .icp-button {
-    padding: 0 12px;
+    bottom: 0;
+    font-size: 14px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/InitServiceChooser.vue b/src/components/InitServiceChooser.vue
new file mode 100644
index 0000000..078cabd
--- /dev/null
+++ b/src/components/InitServiceChooser.vue
@@ -0,0 +1,393 @@
+<template>
+  <div
+    v-if="visible"
+    class="init-overlay"
+  >
+    <div class="init-container">
+      <div class="init-header">
+        <div class="title">
+          欢迎使用 Classworks
+        </div>
+        <div class="subtitle">
+          请选择你的使用方式
+        </div>
+      </div>
+
+      <!-- 主要选择卡片 -->
+      <div class="main-card-row">
+        <!-- 初次使用 -->
+        <v-card
+          class="main-service-card gradient-new clickable"
+          elevation="4"
+          @click="showGuideDialog = true"
+        >
+          <v-card-item>
+            <div class="card-horizontal-layout">
+              <div class="card-icon-wrapper">
+                <v-icon
+                  size="48"
+                  color="primary"
+                >
+                  mdi-new-box
+                </v-icon>
+              </div>
+              <div class="card-content">
+                <div class="text-h6 font-weight-bold">
+                  初次使用
+                </div>
+                <div class="text-body-2 text-medium-emphasis mt-1">
+                  了解 Classworks KV 并开始使用
+                </div>
+              </div>
+            </div>
+          </v-card-item>
+        </v-card>
+
+        <!-- 已注册设备 -->
+        <v-card
+          class="main-service-card gradient-registered clickable"
+          elevation="4"
+          @click="showDeviceAuthDialog = true"
+        >
+          <v-card-item>
+            <div class="card-horizontal-layout">
+              <div class="card-icon-wrapper">
+                <v-icon
+                  size="48"
+                  color="success"
+                >
+                  mdi-account-check
+                </v-icon>
+              </div>
+              <div class="card-content">
+                <div class="text-h6 font-weight-bold">
+                  已注册
+                </div>
+                <div class="text-body-2 text-medium-emphasis mt-1">
+                  使用设备 Namespace 登录
+                </div>
+              </div>
+            </div>
+          </v-card-item>
+        </v-card>
+
+        <!-- Classworks KV 控制台 -->
+        <v-card
+          class="main-service-card clickable"
+          elevation="4"
+          @click="openClassworksKV"
+        >
+          <v-card-item>
+            <div class="card-horizontal-layout">
+              <div class="card-icon-wrapper">
+                <v-icon
+                  size="48"
+                  color="info"
+                >
+                  mdi-database-cog
+                </v-icon>
+              </div>
+              <div class="card-content">
+                <div class="text-h6 font-weight-bold">
+                  Classworks KV
+                </div>
+                <div class="text-body-2 text-medium-emphasis mt-1">
+                  打开云端控制台管理数据
+                </div>
+              </div>
+            </div>
+          </v-card-item>
+        </v-card>
+      </div>
+  <div class="options-buttons">
+          <v-btn
+            variant="tonal"
+            prepend-icon="mdi-laptop"
+            size="small"
+            @click="useLocalMode"
+          >
+            使用本地模式
+          </v-btn>
+          <v-btn
+            variant="tonal"
+            prepend-icon="mdi-flash"
+            size="small"
+            @click="handleAutoAuthorize"
+          >
+            授权码式授权（弃用）
+          </v-btn>
+          <v-btn
+            variant="tonal"
+            prepend-icon="mdi-key"
+            size="small"
+            @click="showTokenDialog = true"
+          >
+            输入 Token
+          </v-btn>
+          <v-btn
+            variant="tonal"
+            prepend-icon="mdi-code-tags"
+            size="small"
+            @click="showAlternativeCodeDialog = true"
+          >
+            输入替代代码
+          </v-btn>
+        </div>
+
+
+      <div class="footer-hint">
+        完成授权后可使用作业同步、考试看板等在线功能。
+      </div>
+    </div>
+
+    <!-- 对话框 -->
+    <v-dialog
+      v-model="showGuideDialog"
+      max-width="600"
+    >
+      <FirstTimeGuide @close="showGuideDialog = false" />
+    </v-dialog>
+
+    <v-dialog
+      v-model="showDeviceAuthDialog"
+      max-width="500"
+    >
+      <DeviceAuthDialog
+        :show-cancel="true"
+        @success="handleAuthSuccess"
+        @cancel="showDeviceAuthDialog = false"
+      />
+    </v-dialog>
+
+    <v-dialog
+      v-model="showTokenDialog"
+      max-width="500"
+    >
+      <TokenInputDialog
+        :show-cancel="true"
+        @success="handleTokenSuccess"
+        @cancel="showTokenDialog = false"
+      />
+    </v-dialog>
+
+    <v-dialog
+      v-model="showAlternativeCodeDialog"
+      max-width="500"
+    >
+      <AlternativeCodeDialog
+        :show-cancel="true"
+        @submit="handleAlternativeCodeSubmit"
+        @cancel="showAlternativeCodeDialog = false"
+      />
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { getSetting, setSetting } from '@/utils/settings'
+import DeviceAuthDialog from './auth/DeviceAuthDialog.vue'
+import TokenInputDialog from './auth/TokenInputDialog.vue'
+import AlternativeCodeDialog from './auth/AlternativeCodeDialog.vue'
+import FirstTimeGuide from './auth/FirstTimeGuide.vue'
+
+const emit = defineEmits(['done'])
+
+// 控制显示：仅首页且无 kvToken（且 provider 不是 kv-local）显示
+const visible = ref(false)
+
+// 对话框控制
+const showGuideDialog = ref(false)
+const showDeviceAuthDialog = ref(false)
+const showTokenDialog = ref(false)
+const showAlternativeCodeDialog = ref(false)
+
+const provider = computed(() => getSetting('server.provider'))
+const isKvProvider = computed(() => provider.value === 'kv-server' || provider.value === 'classworkscloud')
+const kvToken = computed(() => getSetting('server.kvToken'))
+
+const evaluateVisibility = () => {
+  const path = window.location.pathname
+  const onHome = path === '/' || path === '/index' || path === '/index.html'
+  const need = isKvProvider.value && (!kvToken.value || kvToken.value === '')
+  visible.value = onHome && need
+}
+
+onMounted(() => {
+  evaluateVisibility()
+})
+
+const handleAutoAuthorize = () => {
+  const authDomain = getSetting('server.authDomain')
+  const appId = 'd158067f53627d2b98babe8bffd2fd7d'
+  const currentDomain = window.location.origin
+  const callbackUrl = encodeURIComponent(`${currentDomain}/authorizecallback`)
+  const uuid = getSetting('device.uuid') || '00000000-0000-4000-8000-000000000000'
+
+  let url = `${authDomain}/authorize?app_id=${appId}&mode=callback&callback_url=${callbackUrl}&remark=Classworks 自动授权 来自${window.location.hostname} ${new Date().toLocaleString()}`
+  if (uuid !== '00000000-0000-4000-8000-000000000000') {
+    url += `&uuid=${encodeURIComponent(uuid)}`
+  }
+  window.location.href = url
+}
+
+const handleAuthSuccess = () => {
+  showDeviceAuthDialog.value = false
+  evaluateVisibility()
+  emit('done')
+}
+
+const handleTokenSuccess = () => {
+  showTokenDialog.value = false
+  evaluateVisibility()
+  emit('done')
+}
+
+const handleAlternativeCodeSubmit = (code) => {
+  console.log('替代代码:', code)
+  // TODO: 实现替代代码逻辑
+  showAlternativeCodeDialog.value = false
+}
+
+const useLocalMode = () => {
+  setSetting('server.provider', 'kv-local')
+  visible.value = false
+  // 轻量刷新以让首页数据源切换
+  window.location.reload()
+  emit('done')
+}
+
+const openClassworksKV = () => {
+  window.open(getSetting('server.authDomain'), '_blank')
+}
+</script>
+
+<style scoped>
+.init-overlay {
+  position: relative;
+}
+
+.init-container {
+  max-width: 900px;
+  margin: 24px auto;
+  padding: 8px 16px;
+}
+
+.init-header .title {
+  font-size: 28px;
+  font-weight: 700;
+  text-align:left;
+  margin-bottom: 8px;
+}
+
+.init-header .subtitle {
+  font-size: 14px;
+  opacity: .75;
+  text-align: left;
+}
+
+/* 主要卡片 */
+.main-card-row {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+}
+
+.main-service-card {
+  min-height: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.main-service-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+}
+
+.main-service-card .v-card-item {
+  padding: 20px 24px;
+}
+
+.card-horizontal-layout {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.card-icon-wrapper {
+  flex-shrink: 0;
+}
+
+.card-content {
+  flex: 1;
+  text-align: left;
+}
+
+.gradient-new {
+  background: linear-gradient(135deg, rgba(33,150,243,.12), rgba(103,80,164,0.08) 60%);
+  border: 2px solid rgba(33,150,243,.2);
+}
+
+.gradient-registered {
+  background: linear-gradient(135deg, rgba(76,175,80,.12), rgba(0,184,212,0.08) 60%);
+  border: 2px solid rgba(76,175,80,.2);
+}
+
+.gradient-kv {
+  background: linear-gradient(135deg, rgba(0,184,212,.12), rgba(33,150,243,0.08) 60%);
+  border: 2px solid rgba(0,184,212,.2);
+}
+
+/* 其他选项 */
+.alternative-options {
+  margin-top: 40px;
+  padding: 20px;
+  background: rgba(var(--v-theme-surface-variant), 0.3);
+  border-radius: 12px;
+}
+
+.options-title {
+  font-size: 14px;
+  font-weight: 600;
+  opacity: 0.8;
+  margin-bottom: 12px;
+  text-align: left;
+}
+
+.options-buttons {
+  margin-top: 24px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.footer-hint {
+  margin-top: 24px;
+  font-size: 13px;
+  opacity: .7;
+  text-align: left;
+}
+
+@media (max-width: 768px) {
+  .card-horizontal-layout {
+    gap: 16px;
+  }
+
+  .card-icon-wrapper .v-icon {
+    font-size: 40px !important;
+  }
+
+  .options-buttons {
+    flex-direction: column;
+  }
+
+  .options-buttons .v-btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/KvInitialize.vue b/src/components/KvInitialize.vue
index c60de73..70765a3 100644
--- a/src/components/KvInitialize.vue
+++ b/src/components/KvInitialize.vue
@@ -94,7 +94,7 @@ const goToAuthorize = () => {
 
   const uuid =
     getSetting("device.uuid") || "00000000-0000-4000-8000-000000000000";
-  let authorizeUrl = `${authDomain}/authorize?app_id=${appId}&mode=callback&callback_url=${callbackUrl}`;
+  let authorizeUrl = `${authDomain}/authorize?app_id=${appId}&mode=callback&callback_url=${callbackUrl}&remark=Classworks 自动授权 来自${window.location.hostname} ${new Date().toLocaleString()}`;
 
   // 如果UUID不是默认值，附加编码后的 uuid 参数用于迁移
   if (uuid !== "00000000-0000-4000-8000-000000000000") {
diff --git a/src/components/MigrationTool.vue b/src/components/MigrationTool.vue
index ed5993d..00acab9 100644
--- a/src/components/MigrationTool.vue
+++ b/src/components/MigrationTool.vue
@@ -225,7 +225,7 @@
 
 <script>
 import { openDB } from "idb";
-import axios from "@/assets/fonts/axios/axios";
+import axios from "@/axios/axios";
 import { getSetting, setSetting } from "@/utils/settings";
 
 export default {
diff --git a/src/components/ReadOnlyTokenWarning.vue b/src/components/ReadOnlyTokenWarning.vue
new file mode 100644
index 0000000..3cd9e59
--- /dev/null
+++ b/src/components/ReadOnlyTokenWarning.vue
@@ -0,0 +1,125 @@
+<template>
+  <v-alert
+    v-if="isReadOnly"
+    type="warning"
+    variant="tonal"
+    prominent
+    closable
+    class="readonly-warning"
+    @click:close="dismissed = true"
+  >
+    <template #prepend>
+      <v-icon icon="mdi-lock-alert" />
+    </template>
+    <v-alert-title>当前使用只读 Token</v-alert-title>
+    <div class="text-body-2">
+      您当前的访问令牌为只读权限，无法修改数据。如需编辑权限，请联系管理员或重新授权。
+    </div>
+    <template v-if="tokenInfo">
+      <div class="mt-2 text-caption">
+        <div>
+          <strong>设备类型：</strong>{{ deviceTypeLabel }}
+        </div>
+        <div v-if="tokenInfo.note">
+          <strong>备注：</strong>{{ tokenInfo.note }}
+        </div>
+        <div v-if="tokenInfo.device">
+          <strong>设备：</strong>{{ tokenInfo.device.name }} ({{ tokenInfo.device.namespace }})
+        </div>
+      </div>
+    </template>
+  </v-alert>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { getSetting } from '@/utils/settings'
+import axios from '@/axios/axios'
+
+const props = defineProps({
+  autoCheck: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const tokenInfo = ref(null)
+const loading = ref(false)
+const dismissed = ref(false)
+
+const isReadOnly = computed(() => {
+  return !dismissed.value && tokenInfo.value?.isReadOnly === true
+})
+
+const deviceTypeLabel = computed(() => {
+  const typeMap = {
+    student: '学生',
+    teacher: '教师',
+    admin: '管理员',
+    readonly: '只读',
+  }
+  return typeMap[tokenInfo.value?.deviceType] || tokenInfo.value?.deviceType || '未知'
+})
+
+const checkTokenPermission = async () => {
+  const provider = getSetting('server.provider')
+  const isKvProvider = provider === 'kv-server' || provider === 'classworkscloud'
+
+  if (!isKvProvider) {
+    return
+  }
+
+  const kvToken = getSetting('server.kvToken')
+  if (!kvToken) {
+    return
+  }
+
+  loading.value = true
+  try {
+    const serverUrl = getSetting('server.domain')
+    if (!serverUrl) return
+
+    const response = await axios.get(`${serverUrl}/kv/_token`, {
+      headers: {
+        Authorization: `Bearer ${kvToken}`
+      }
+    })
+
+    if (response.data) {
+      tokenInfo.value = response.data
+    }
+  } catch (err) {
+    console.error('获取 Token 信息失败:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 监听设置变化
+const kvToken = computed(() => getSetting('server.kvToken'))
+watch(kvToken, () => {
+  if (props.autoCheck) {
+    checkTokenPermission()
+  }
+})
+
+onMounted(() => {
+  if (props.autoCheck) {
+    checkTokenPermission()
+  }
+})
+
+// 暴露方法供外部调用
+defineExpose({
+  checkTokenPermission,
+  tokenInfo,
+  isReadOnly
+})
+</script>
+
+<style scoped>
+.readonly-warning {
+  margin: 16px;
+  border-left: 4px solid rgb(var(--v-theme-warning));
+}
+</style>
diff --git a/src/components/StudentNameManager.vue b/src/components/StudentNameManager.vue
new file mode 100644
index 0000000..e4330c0
--- /dev/null
+++ b/src/components/StudentNameManager.vue
@@ -0,0 +1,261 @@
+<template>
+  <!-- 学生姓名选择对话框 -->
+  <v-dialog
+    v-model="showDialog"
+    max-width="500"
+    persistent
+  >
+    <v-card>
+      <v-card-title>设置学生姓名</v-card-title>
+      <v-card-text>
+        <div class="mb-2">
+          请从列表中选择您的姓名：
+        </div>
+        <v-autocomplete
+          v-model="selectedName"
+          :items="studentList"
+          item-title="name"
+          item-value="name"
+          label="学生姓名"
+          placeholder="选择您的姓名"
+          clearable
+          hide-details
+        />
+        <div
+          v-if="studentList.length > 0"
+          class="mt-2 text-caption text-medium-emphasis"
+        >
+          共 {{ studentList.length }} 位学生
+        </div>
+        <v-alert
+          v-if="error"
+          type="error"
+          variant="tonal"
+          class="mt-3"
+        >
+          {{ error }}
+        </v-alert>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          variant="text"
+          @click="skipSetting"
+        >
+          稍后设置
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          :disabled="!selectedName || saving"
+          :loading="saving"
+          color="primary"
+          @click="saveStudentName"
+        >
+          确认
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- 顶栏学生姓名显示（通过插槽暴露给父组件） -->
+  <slot
+    name="header-display"
+    :student-name="currentStudentName"
+    :is-student="isStudentToken"
+    :open-dialog="openDialog"
+  />
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { getSetting, watchSettings } from '@/utils/settings'
+import axios from '@/axios/axios'
+import dataProvider from '@/utils/dataProvider'
+const emit = defineEmits(['token-info-updated'])
+
+const showDialog = ref(false)
+const selectedName = ref('')
+const studentList = ref([])
+const currentStudentName = ref('')
+const saving = ref(false)
+const error = ref('')
+const tokenInfo = ref(null)
+
+const isStudentToken = computed(() => tokenInfo.value?.deviceType === 'student')
+const isReadOnly = computed(() => tokenInfo.value?.isReadOnly === true)
+const displayName = computed(() => tokenInfo.value?.note || '设置名称')
+const hasToken = computed(() => !!kvToken.value)
+const kvToken = computed(() => getSetting('server.kvToken'))
+const provider = computed(() => getSetting('server.provider'))
+const isKvProvider = computed(() => provider.value === 'kv-server' || provider.value === 'classworkscloud')
+
+// 检查是否需要设置学生姓名
+const checkStudentNameStatus = async () => {
+  if (!isKvProvider.value || !kvToken.value) {
+    return
+  }
+
+  try {
+    const serverUrl = getSetting('server.domain')
+    if (!serverUrl) return
+
+    // 获取 Token 信息
+    const tokenResponse = await axios.get(`${serverUrl}/kv/_token`, {
+      headers: {
+        Authorization: `Bearer ${kvToken.value}`
+      }
+    })
+
+    tokenInfo.value = tokenResponse.data
+
+    // 如果不是学生类型，不需要处理
+    if (tokenInfo.value.deviceType !== 'student') {
+      return
+    }
+
+    // 保存当前学生姓名
+    currentStudentName.value = tokenInfo.value.note || ''
+
+    // 获取学生列表
+    const listResponse = await axios.get(`${serverUrl}/kv/classworks-list-main`, {
+      headers: {
+        Authorization: `Bearer ${kvToken.value}`
+      }
+    })
+
+    const list = listResponse.data.value || []
+    studentList.value = Array.isArray(list) ? list : []
+
+    // 如果学生列表为空，不需要提示
+    if (studentList.value.length === 0) {
+      return
+    }
+
+    // 检查当前姓名是否在学生列表中
+    const currentNote = tokenInfo.value.note || ''
+    const nameExists = studentList.value.some(student => student.name === currentNote)
+
+    // 如果姓名为空或不在列表中，显示对话框
+    if (!currentNote || !nameExists) {
+      showDialog.value = true
+      selectedName.value = ''
+    }
+
+  } catch (err) {
+    console.error('检查学生姓名状态失败:', err)
+  }
+}
+
+// 保存学生姓名
+const saveStudentName = async () => {
+  if (!selectedName.value || saving.value) return
+  error.value = ''
+  saving.value = true
+
+  try {
+    const serverUrl = getSetting('server.domain')
+    const token = kvToken.value
+
+    const response = await axios.post(
+      `${serverUrl}/apps/tokens/${token}/set-student-name`,
+      {
+        name: selectedName.value
+      }
+    )
+
+    if (response.data.success) {
+      currentStudentName.value = selectedName.value
+      showDialog.value = false
+      // 刷新 token 信息
+      await checkStudentNameStatus()
+      // 通知父组件更新显示
+      emit('token-info-updated')
+    }
+  } catch (err) {
+    const status = err?.response?.status
+    if (status === 400) {
+      error.value = '该名称不在学生列表中，请选择正确的姓名'
+    } else if (status === 403) {
+      error.value = '只有学生类型的 Token 可以设置姓名'
+    } else if (status === 404) {
+      error.value = '设备未设置学生列表或 Token 不存在'
+    } else {
+      error.value = err?.response?.data?.error?.message || err?.message || '设置失败，请稍后重试'
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+// 跳过设置
+const skipSetting = () => {
+  showDialog.value = false
+}
+
+// 手动打开对话框（用于编辑）
+const openDialog = async () => {
+  console.log('StudentNameManager.openDialog called')
+  console.log('isStudentToken:', isStudentToken.value)
+  console.log('studentList.length:', studentList.value.length)
+  console.log('currentStudentName:', currentStudentName.value)
+
+  if (!isStudentToken.value) {
+    console.log('Not a student token, cannot open dialog')
+    return
+  }
+  studentList.value = await dataProvider.loadData('classworks-list-main')
+  // 如果是学生 token，即使列表为空也应该打开对话框
+  // 可能是列表还在加载中
+  if (studentList.value.length === 0) {
+    console.log('Student list is empty, trying to load...')
+    // 重新加载学生列表
+    checkStudentNameStatus().then(() => {
+      if (studentList.value.length > 0) {
+        selectedName.value = currentStudentName.value
+        showDialog.value = true
+      } else {
+        console.warn('Student list is still empty after reload')
+      }
+    })
+  } else {
+    selectedName.value = currentStudentName.value
+    showDialog.value = true
+    console.log('Dialog opened, showDialog:', showDialog.value)
+  }
+}
+
+// 监听 token 变化
+watch(kvToken, () => {
+  checkStudentNameStatus()
+})
+
+// 监听设置变化
+watchSettings(() => {
+  checkStudentNameStatus()
+})
+
+// 监听 tokenInfo 变化，通知父组件
+watch(tokenInfo, () => {
+  emit('token-info-updated')
+}, { deep: true })
+
+// 初始化
+onMounted(() => {
+  checkStudentNameStatus()
+})
+
+// 暴露方法和状态给父组件
+defineExpose({
+  checkStudentNameStatus,
+  openDialog,
+  currentStudentName,
+  isStudentToken,
+  isReadOnly,
+  displayName,
+  hasToken,
+  tokenInfo
+})
+</script>
+
+<style scoped>
+/* 组件样式 */
+</style>
diff --git a/src/components/auth/AlternativeCodeDialog.vue b/src/components/auth/AlternativeCodeDialog.vue
new file mode 100644
index 0000000..07a5e08
--- /dev/null
+++ b/src/components/auth/AlternativeCodeDialog.vue
@@ -0,0 +1,68 @@
+<template>
+  <v-card>
+    <v-card-title>输入替代代码</v-card-title>
+    <v-card-text>
+      <v-textarea
+        v-model="code"
+        label="替代代码"
+        placeholder="请输入替代代码"
+        variant="outlined"
+        density="comfortable"
+        rows="5"
+        hide-details="auto"
+      />
+      <v-alert
+        type="info"
+        variant="tonal"
+        class="mt-3"
+      >
+        替代代码功能暂未实现，敬请期待
+      </v-alert>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        v-if="showCancel"
+        variant="text"
+        @click="$emit('cancel')"
+      >
+        取消
+      </v-btn>
+      <v-btn
+        :disabled="!code"
+        color="primary"
+        @click="submit"
+      >
+        提交
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  showCancel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['submit', 'cancel'])
+
+const code = ref('')
+
+const submit = () => {
+  if (!code.value) return
+  // TODO: 实现替代代码逻辑
+  emit('submit', code.value)
+}
+
+// 暴露清空表单的方法
+defineExpose({
+  reset: () => {
+    code.value = ''
+  }
+})
+</script>
diff --git a/src/components/auth/DeviceAuthDialog.vue b/src/components/auth/DeviceAuthDialog.vue
new file mode 100644
index 0000000..0259dac
--- /dev/null
+++ b/src/components/auth/DeviceAuthDialog.vue
@@ -0,0 +1,198 @@
+<template>
+  <v-card class="auth-card">
+    <v-card-text class="pa-8">
+      <div class="text-center mb-6">
+        <v-icon
+          size="80"
+          color="success"
+          class="mb-4"
+        >
+          mdi-account-key
+        </v-icon>
+        <h2 class="text-h4 mb-3">
+          设备认证
+        </h2>
+        <p class="text-body-1 text-medium-emphasis">
+          输入你在 Classworks KV 获取的认证信息
+        </p>
+      </div>
+
+      <v-card
+        variant="tonal"
+        color="info"
+        class="pa-4 mb-6"
+      >
+        <div class="text-body-2">
+          <v-icon
+            size="20"
+            class="mr-2"
+          >
+            mdi-information
+          </v-icon>
+         对于已有UUID的用户，您应当使用UUID与您的密码登录。
+        </div>
+      </v-card>
+
+      <div class="form-section">
+        <v-text-field
+          v-model="form.namespace"
+          label="命名空间"
+          class="mb-4"
+          variant="outlined"
+          hide-details="auto"
+          prepend-inner-icon="mdi-identifier"
+        >
+
+        </v-text-field>
+
+        <v-text-field
+          v-model="form.password"
+          label="认证码"
+          type="text"
+          variant="outlined"
+          prepend-inner-icon="mdi-lock-outline"
+        >
+
+        </v-text-field>
+
+        <v-alert
+          v-if="error"
+          type="error"
+          variant="tonal"
+          class="mt-4"
+          closable
+          @click:close="error = ''"
+        >
+          {{ error }}
+        </v-alert>
+      </div>
+    </v-card-text>
+
+    <v-card-actions class="pa-6 pt-0">
+      <v-btn
+        v-if="showCancel"
+        size="large"
+        variant="text"
+        @click="$emit('cancel')"
+      >
+        取消
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        :disabled="!form.namespace || authenticating"
+        :loading="authenticating"
+        size="x-large"
+        color="primary"
+        variant="elevated"
+        class="px-8"
+        @click="authenticate"
+      >
+        <v-icon
+          start
+          size="24"
+        >
+          mdi-login
+        </v-icon>
+        <span class="text-h6">认证并登录</span>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getSetting, setSetting } from '@/utils/settings'
+import axios from '@/axios/axios'
+
+defineProps({
+  showCancel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['success', 'cancel'])
+
+const form = ref({
+  namespace: '',
+  password: ''
+})
+const authenticating = ref(false)
+const error = ref('')
+
+const authenticate = async () => {
+  if (!form.value.namespace || authenticating.value) return
+  error.value = ''
+  authenticating.value = true
+
+  try {
+    const serverUrl = getSetting('server.domain')
+    if (!serverUrl) throw new Error('未配置服务器域名')
+
+    // 验证设备并获取 token
+    const response = await axios.post(`${serverUrl}/apps/auth/token`, {
+      namespace: form.value.namespace,
+      password: form.value.password || undefined,
+      appId: "d158067f53627d2b98babe8bffd2fd7d"
+    })
+
+    if (!response.data.success) {
+      throw new Error('设备验证失败')
+    }
+
+    const tokenData = response.data
+
+    // 保存 Token
+    setSetting('server.kvToken', tokenData.token)
+
+    // 如果返回了 device 信息，保存 uuid
+    if (tokenData.device?.uuid) {
+      setSetting('device.uuid', tokenData.device.uuid)
+    }
+
+    emit('success', tokenData)
+
+  } catch (err) {
+    const status = err?.response?.status
+    if (status === 401 || status === 403) {
+      error.value = '密码错误或无权限访问'
+    } else if (status === 404) {
+      error.value = '设备不存在,请检查 namespace 是否正确'
+    } else {
+      error.value = err?.response?.data?.error?.message || err?.message || '认证失败,请稍后重试'
+    }
+  } finally {
+    authenticating.value = false
+  }
+}
+
+// 暴露清空表单的方法
+defineExpose({
+  reset: () => {
+    form.value = { namespace: '', password: '' }
+    error.value = ''
+  }
+})
+</script>
+
+<style scoped>
+.auth-card {
+  max-width: 100%;
+  min-height: 500px;
+}
+
+.form-section {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* 触屏优化 */
+.v-btn {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.v-btn.v-btn--size-x-large {
+  min-height: 60px;
+}
+</style>
diff --git a/src/components/auth/FirstTimeGuide.vue b/src/components/auth/FirstTimeGuide.vue
new file mode 100644
index 0000000..1b8e787
--- /dev/null
+++ b/src/components/auth/FirstTimeGuide.vue
@@ -0,0 +1,671 @@
+<template>
+  <v-card class="guide-card">
+    <!-- 进度指示器 -->
+    <v-progress-linear
+      :model-value="(currentStep / totalSteps) * 100"
+      color="primary"
+      height="6"
+    />
+
+    <v-card-text class="pa-8">
+      <!-- 步骤 1: 欢迎 -->
+      <div
+        v-show="currentStep === 1"
+        class="step-content"
+      >
+        <div class="text-center mb-6">
+          <v-icon
+            size="80"
+            color="primary"
+            class="mb-4"
+          >
+            mdi-hand-wave
+          </v-icon>
+          <h2 class="text-h4 mb-3">
+            欢迎使用 Classworks
+          </h2>
+          <p class="text-body-1 text-medium-emphasis">
+            适用于班级大屏的作业板小工具
+          </p>
+        </div>
+      </div>
+
+      <!-- 步骤 2: Classworks 和 KV 的关系图 -->
+      <div
+        v-show="currentStep === 2"
+        class="step-content"
+      >
+        <h3 class="text-h5 mb-6 text-center">
+          Classworks 和 Classworks KV 的关系
+        </h3>
+
+        <v-card
+          variant="tonal"
+          color="primary"
+          class="pa-6 mb-6"
+        >
+          <div class="relationship-diagram">
+            <!-- Classworks 应用 -->
+            <div class="diagram-item">
+              <v-card
+                elevation="8"
+                color="blue-darken-1"
+                class="pa-4"
+              >
+                <div class="text-center">
+                  <v-icon
+                    size="60"
+                    color="white"
+                  >
+                    mdi-laptop
+                  </v-icon>
+                  <h4 class="text-h6 text-white mt-2">
+                    Classworks
+                  </h4>
+                  <p class="text-caption text-white mt-1">
+                    作业板应用
+                  </p>
+                </div>
+              </v-card>
+
+              <div class="diagram-description mt-3">
+                <v-chip
+                  color="blue"
+                  variant="flat"
+                  size="small"
+                  class="mb-2"
+                >
+                  前端应用
+                </v-chip>
+                <div class="text-body-2">
+                  • 显示作业内容<br>
+                  • 管理班级信息<br>
+                  • 提供用户界面
+                </div>
+              </div>
+            </div>
+
+            <!-- 连接线 -->
+            <div class="diagram-connector">
+              <v-icon
+                size="40"
+                color="primary"
+              >
+                mdi-swap-horizontal
+              </v-icon>
+              <div class="text-caption font-weight-bold mt-2">
+                数据同步
+              </div>
+            </div>
+
+            <!-- Classworks KV -->
+            <div class="diagram-item">
+              <v-card
+                elevation="8"
+                color="green-darken-1"
+                class="pa-4"
+              >
+                <div class="text-center">
+                  <v-icon
+                    size="60"
+                    color="white"
+                  >
+                    mdi-cloud-sync
+                  </v-icon>
+                  <h4 class="text-h6 text-white mt-2">
+                    Classworks KV
+                  </h4>
+                  <p class="text-caption text-white mt-1">
+                    云端数据库
+                  </p>
+                </div>
+              </v-card>
+
+              <div class="diagram-description mt-3">
+                <v-chip
+                  color="green"
+                  variant="flat"
+                  size="small"
+                  class="mb-2"
+                >
+                  后端服务
+                </v-chip>
+                <div class="text-body-2">
+                  • 存储作业数据<br>
+                  • 多设备同步<br>
+                  • 权限管理
+                </div>
+              </div>
+            </div>
+          </div>
+        </v-card>
+
+        <!-- 工作流程说明 -->
+        <v-card
+          variant="outlined"
+          class="pa-5 mb-4"
+        >
+          <h4 class="text-h6 mb-4">
+            <v-icon
+              color="primary"
+              class="mr-2"
+            >
+              mdi-information
+            </v-icon>
+            工作流程
+          </h4>
+
+          <v-timeline
+            side="end"
+            density="compact"
+            line-thickness="2"
+          >
+            <v-timeline-item
+              dot-color="primary"
+              size="small"
+            >
+              <div class="text-body-2">
+                <strong>步骤 1:</strong> 在 Classworks 应用中编辑作业
+              </div>
+            </v-timeline-item>
+
+            <v-timeline-item
+              dot-color="success"
+              size="small"
+            >
+              <div class="text-body-2">
+                <strong>步骤 2:</strong> 数据自动上传到 Classworks KV
+              </div>
+            </v-timeline-item>
+
+            <v-timeline-item
+              dot-color="info"
+              size="small"
+            >
+              <div class="text-body-2">
+                <strong>步骤 3:</strong> 其他设备从 Classworks KV 同步数据
+              </div>
+            </v-timeline-item>
+
+            <v-timeline-item
+              dot-color="warning"
+              size="small"
+            >
+              <div class="text-body-2">
+                <strong>步骤 4:</strong> 所有设备显示相同的作业内容
+              </div>
+            </v-timeline-item>
+          </v-timeline>
+        </v-card>
+
+        <!-- 优势说明 -->
+        <v-row>
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-card
+              variant="tonal"
+              color="blue"
+              class="pa-4 h-100"
+            >
+              <v-icon
+                size="40"
+                color="blue-darken-2"
+                class="mb-2"
+              >
+                mdi-devices
+              </v-icon>
+              <h5 class="text-subtitle-1 font-weight-bold mb-2">
+                多设备访问
+              </h5>
+              <p class="text-body-2">
+                在教室、办公室、家中的任何设备上访问相同的数据
+              </p>
+            </v-card>
+          </v-col>
+
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-card
+              variant="tonal"
+              color="green"
+              class="pa-4 h-100"
+            >
+              <v-icon
+                size="40"
+                color="green-darken-2"
+                class="mb-2"
+              >
+                mdi-sync
+              </v-icon>
+              <h5 class="text-subtitle-1 font-weight-bold mb-2">
+                实时同步
+              </h5>
+              <p class="text-body-2">
+                修改后立即同步，所有设备保持数据一致
+              </p>
+            </v-card>
+          </v-col>
+
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-card
+              variant="tonal"
+              color="orange"
+              class="pa-4 h-100"
+            >
+              <v-icon
+                size="40"
+                color="orange-darken-2"
+                class="mb-2"
+              >
+                mdi-shield-lock
+              </v-icon>
+              <h5 class="text-subtitle-1 font-weight-bold mb-2">
+                安全可靠
+              </h5>
+              <p class="text-body-2">
+                通过密码和命名空间隔离，保护班级数据安全
+              </p>
+            </v-card>
+          </v-col>
+        </v-row>
+      </div>
+
+      <!-- 步骤 3: 询问使用场景 -->
+      <div
+        v-show="currentStep === 3"
+        class="step-content"
+      >
+        <h3 class="text-h5 mb-6 text-center">
+          你需要在多个设备上查看作业吗？
+        </h3>
+
+        <v-card
+          variant="tonal"
+          color="info"
+          class="mb-6 pa-4"
+        >
+          <div class="text-body-2">
+            比如：在家里电脑、手机上查看，或者多个教室设备共享数据
+          </div>
+        </v-card>
+
+        <div class="button-group">
+          <v-btn
+            size="x-large"
+            block
+            variant="elevated"
+            color="primary"
+            class="mb-4 py-6"
+            @click="selectStorageType('cloud')"
+          >
+            <div class="d-flex flex-column align-center py-2">
+              <v-icon
+                size="40"
+                class="mb-2"
+              >
+                mdi-cloud-check
+              </v-icon>
+              <span class="text-h6">需要，使用云同步</span>
+              <span class="text-caption mt-1">多设备访问</span>
+            </div>
+          </v-btn>
+
+          <v-btn
+            size="x-large"
+            block
+            variant="outlined"
+            class="py-6"
+            @click="selectStorageType('local')"
+          >
+            <div class="d-flex flex-column align-center py-2">
+              <v-icon
+                size="40"
+                class="mb-2"
+              >
+                mdi-laptop
+              </v-icon>
+              <span class="text-h6">不需要，只用这台设备</span>
+              <span class="text-caption mt-1">本地存储</span>
+            </div>
+          </v-btn>
+        </div>
+      </div>
+
+      <!-- 步骤 4a: 本地存储确认 -->
+      <div
+        v-show="currentStep === 4 && storageType === 'local'"
+        class="step-content"
+      >
+        <div class="text-center mb-6">
+          <v-icon
+            size="80"
+            color="success"
+            class="mb-4"
+          >
+            mdi-check-circle
+          </v-icon>
+          <h3 class="text-h5 mb-4">
+            您可以使用本地模式
+          </h3>
+          <v-card
+            variant="tonal"
+            class="pa-4 text-left"
+          >
+            <div class="text-body-1 mb-2">
+              此数据将存储在您的浏览器中，如果您的浏览器不支持IndexedDB，可能会出现问题。如果您经常清除浏览器数据，请谨慎使用本地模式。
+            </div>
+            <div class="text-body-1 mb-2">
+              在刚才地方点击使用本地模式的按钮使用。
+            </div>
+          </v-card>
+        </div>
+      </div>
+
+      <!-- 步骤 4b: 云存储说明 -->
+      <div
+        v-show="currentStep === 4 && storageType === 'cloud'"
+        class="step-content"
+      >
+        <div class="text-center mb-6">
+          <v-icon
+            size="80"
+            color="primary"
+            class="mb-4"
+          >
+            mdi-cloud-cog
+          </v-icon>
+          <h3 class="text-h5 mb-4">
+            需要先设置云端账号
+          </h3>
+        </div>
+
+        <v-card
+          :variant="kvserverurl=='https://kv.houlang.cloud'? 'elevated' : 'outlined'"
+          :color=" kvserverurl=='https://kv.houlang.cloud'? 'primary' : 'error' "
+          class="pa-6  mb-6"
+          @click="openKVSite"
+        >
+          <v-icon
+            size="48"
+            class="mb-3"
+          >
+            mdi-open-in-new
+          </v-icon>
+          <h4 class="text-h6  font-weight-bold">
+            请访问 {{ kvserverurl=='https://kv.houlang.cloud'? 'Classworks KV' : '自定义的 Classworks KV 实例 ' }} 控制台
+          </h4>
+          <div class="text-h5 mb-6">
+            {{ kvserverurl }}
+          </div>
+          <h6 class="text-subtitle-2">
+            {{ kvserverurl=='https://kv.houlang.cloud'? '此实例由 Classworks KV 官方提供' : '此链接由您的实例、预配代码或管理员管理，当前可能不是 Classworks KV 官方的实例地址。' }}
+          </h6>
+        </v-card>
+
+        <v-card
+          variant="tonal"
+          color="info"
+          class="pa-5"
+        >
+          <div class="text-body-1 mb-3">
+            <v-icon
+              size="20"
+              class="mr-2"
+            >
+              mdi-information
+            </v-icon>
+            在控制台完成以下操作：
+          </div>
+          <div class="text-body-2 mb-2">
+            1. 注册或登录账号
+          </div>
+          <div class="text-body-2 mb-2">
+            2. 创建班级空间
+          </div>
+          <div class="text-body-2 mb-2">
+            3. 获取命名空间和密码
+          </div>
+          <div class="text-body-2">
+            4. 返回这里输入认证信息
+          </div>
+        </v-card>
+
+        <!-- 常见问题 -->
+        <v-expansion-panels
+          class="mt-6"
+          variant="accordion"
+        >
+          <v-expansion-panel>
+            <v-expansion-panel-title>
+              <div class="d-flex align-center">
+                <v-icon
+                  class="mr-3"
+                  color="warning"
+                >
+                  mdi-help-circle
+                </v-icon>
+                <span class="text-subtitle-1 font-weight-medium">我以前已经使用过 Classworks KV？</span>
+              </div>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <v-card
+                variant="tonal"
+                color="success"
+                class="pa-4"
+              >
+                <div class="text-body-2 mb-2">
+                  如果您之前已经使用过 Classworks KV，可以直接使用您的 <strong>UUID（命名空间）</strong> 和 <strong>设置的密码</strong> 进行认证。
+                </div>
+                <div class="text-body-2">
+                  返回上一页，点击"已注册"按钮，输入您的认证信息即可登录。
+                </div>
+              </v-card>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+
+          <v-expansion-panel>
+            <v-expansion-panel-title>
+              <div class="d-flex align-center">
+                <v-icon
+                  class="mr-3"
+                  color="info"
+                >
+                  mdi-help-circle
+                </v-icon>
+                <span class="text-subtitle-1 font-weight-medium">我如何配置不同类型的设备？</span>
+              </div>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <v-card
+                variant="tonal"
+                color="info"
+                class="pa-4"
+              >
+                <div class="text-body-2 mb-2">
+                  不同的密码对应不同的设备类型，这将由 <strong>管理员管理</strong>。
+                </div>
+                <div class="text-body-2 mb-2">
+                  例如：
+                </div>
+                <ul class="text-body-2 ml-4">
+                  <li class="mb-1">
+                    班级大屏使用一个密码
+                  </li>
+                  <li class="mb-1">
+                    教师设备使用另一个密码
+                  </li>
+                  <li>学生设备使用不同的密码</li>
+                </ul>
+                <div class="text-body-2 mt-3">
+                  请联系您的管理员获取对应设备类型的密码。
+                </div>
+              </v-card>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </div>
+    </v-card-text>
+
+    <!-- 底部操作按钮 -->
+    <v-card-actions class="pa-6 pt-0">
+      <v-btn
+        v-if="currentStep > 1"
+        size="large"
+        variant="text"
+        @click="prevStep"
+      >
+        <v-icon start>
+          mdi-chevron-left
+        </v-icon>
+        上一步
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        v-if="currentStep < 4"
+        :disabled="currentStep === 3 && !storageType"
+        size="large"
+        color="primary"
+        variant="elevated"
+        @click="nextStep"
+      >
+        下一步
+        <v-icon end>
+          mdi-chevron-right
+        </v-icon>
+      </v-btn>
+      <v-btn
+        v-else
+        size="large"
+        color="primary"
+        variant="elevated"
+        @click="finish"
+      >
+        关闭
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getSetting } from '@/utils/settings'
+const emit = defineEmits(['close'])
+const kvserverurl = getSetting('server.authDomain')
+const currentStep = ref(1)
+const totalSteps = 4
+const storageType = ref('')
+
+const nextStep = () => {
+  if (currentStep.value < totalSteps) {
+    currentStep.value++
+  }
+}
+
+const prevStep = () => {
+  if (currentStep.value > 1) {
+    currentStep.value--
+  }
+}
+
+const selectStorageType = (type) => {
+  storageType.value = type
+  nextStep()
+}
+
+const finish = () => {
+  emit('close')
+}
+
+const openKVSite = () => {
+  window.open(kvserverurl, '_blank')
+}
+</script>
+
+<style scoped>
+.guide-card {
+  max-width: 100%;
+  min-height: 500px;
+}
+
+.step-content {
+  min-height: 400px;
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.button-group {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.step-item {
+  cursor: default;
+}
+
+/* 触屏优化 */
+.v-btn {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 大按钮区域便于点击 */
+.v-btn.v-btn--size-x-large {
+  min-height: 120px;
+}
+
+/* 关系图样式 */
+.relationship-diagram {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.diagram-item {
+  flex: 1;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+.diagram-connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+}
+
+.diagram-description {
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .relationship-diagram {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .diagram-connector {
+    transform: rotate(90deg);
+    margin: 20px 0;
+  }
+}
+</style>
diff --git a/src/components/auth/README.md b/src/components/auth/README.md
new file mode 100644
index 0000000..b0b337f
--- /dev/null
+++ b/src/components/auth/README.md
@@ -0,0 +1,133 @@
+# 认证组件
+
+这个目录包含可复用的认证相关组件,可以在应用的任何地方使用。
+
+## 组件列表
+
+### DeviceAuthDialog.vue
+设备认证对话框,用于通过 namespace 和密码进行设备认证。
+
+**Props:**
+- `showCancel` (Boolean): 是否显示取消按钮,默认为 `false`
+
+**Events:**
+- `@success`: 认证成功时触发,传递认证数据
+- `@cancel`: 点击取消按钮时触发
+
+**暴露的方法:**
+- `reset()`: 清空表单和错误信息
+
+**使用示例:**
+```vue
+<template>
+  <v-dialog v-model="dialog">
+    <DeviceAuthDialog
+      :show-cancel="true"
+      @success="handleSuccess"
+      @cancel="dialog = false"
+    />
+  </v-dialog>
+</template>
+
+<script setup>
+import DeviceAuthDialog from '@/components/auth/DeviceAuthDialog.vue'
+</script>
+```
+
+---
+
+### TokenInputDialog.vue
+Token 输入对话框,用于手动输入 KV 授权 Token。
+
+**Props:**
+- `showCancel` (Boolean): 是否显示取消按钮,默认为 `false`
+
+**Events:**
+- `@success`: Token 验证成功时触发
+- `@cancel`: 点击取消按钮时触发
+
+**暴露的方法:**
+- `reset()`: 清空表单和错误信息
+
+**使用示例:**
+```vue
+<template>
+  <v-dialog v-model="dialog">
+    <TokenInputDialog
+      :show-cancel="true"
+      @success="handleSuccess"
+      @cancel="dialog = false"
+    />
+  </v-dialog>
+</template>
+
+<script setup>
+import TokenInputDialog from '@/components/auth/TokenInputDialog.vue'
+</script>
+```
+
+---
+
+### AlternativeCodeDialog.vue
+替代代码输入对话框（功能暂未实现）。
+
+**Props:**
+- `showCancel` (Boolean): 是否显示取消按钮,默认为 `false`
+
+**Events:**
+- `@submit`: 提交代码时触发,传递代码内容
+- `@cancel`: 点击取消按钮时触发
+
+**暴露的方法:**
+- `reset()`: 清空表单
+
+**使用示例:**
+```vue
+<template>
+  <v-dialog v-model="dialog">
+    <AlternativeCodeDialog
+      :show-cancel="true"
+      @submit="handleSubmit"
+      @cancel="dialog = false"
+    />
+  </v-dialog>
+</template>
+
+<script setup>
+import AlternativeCodeDialog from '@/components/auth/AlternativeCodeDialog.vue'
+</script>
+```
+
+---
+
+### FirstTimeGuide.vue
+初次使用指南,介绍 Classworks KV 的功能和使用方式。
+
+**Events:**
+- `@close`: 关闭指南时触发
+
+**使用示例:**
+```vue
+<template>
+  <v-dialog v-model="dialog">
+    <FirstTimeGuide @close="dialog = false" />
+  </v-dialog>
+</template>
+
+<script setup>
+import FirstTimeGuide from '@/components/auth/FirstTimeGuide.vue'
+</script>
+```
+
+## 设计原则
+
+1. **可复用性**: 所有组件都被设计为独立可复用的,可以在应用的任何地方使用
+2. **独立性**: 每个组件都包含自己的逻辑和样式,不依赖外部状态
+3. **统一接口**: 所有对话框组件都遵循相同的 props 和 events 模式
+4. **响应式设计**: 组件适配各种屏幕尺寸
+
+## 注意事项
+
+- 这些组件需要配合 Vuetify 使用
+- 组件内部使用了 `@/utils/settings` 和 `@/axios/axios`,确保这些依赖可用
+- 建议将这些组件包裹在 `v-dialog` 中使用,以获得最佳的用户体验
diff --git a/src/components/auth/TokenInputDialog.vue b/src/components/auth/TokenInputDialog.vue
new file mode 100644
index 0000000..1ef7ed2
--- /dev/null
+++ b/src/components/auth/TokenInputDialog.vue
@@ -0,0 +1,103 @@
+<template>
+  <v-card>
+    <v-card-title>输入授权 Token</v-card-title>
+    <v-card-text>
+      <v-text-field
+        v-model="token"
+        label="KV 授权 Token"
+        placeholder="粘贴从授权页面获取的 Token"
+        variant="outlined"
+        density="comfortable"
+        hide-details="auto"
+        clearable
+      />
+      <v-alert
+        v-if="error"
+        type="error"
+        variant="tonal"
+        class="mt-3"
+      >
+        {{ error }}
+      </v-alert>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        v-if="showCancel"
+        variant="text"
+        @click="$emit('cancel')"
+      >
+        取消
+      </v-btn>
+      <v-btn
+        :disabled="!token || verifying"
+        :loading="verifying"
+        color="primary"
+        @click="saveToken"
+      >
+        保存 Token
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getSetting, setSetting } from '@/utils/settings'
+import axios from '@/axios/axios'
+
+defineProps({
+  showCancel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['success', 'cancel'])
+
+const token = ref('')
+const verifying = ref(false)
+const error = ref('')
+
+const saveToken = async () => {
+  if (!token.value || verifying.value) return
+  error.value = ''
+  verifying.value = true
+
+  try {
+    const serverUrl = getSetting('server.domain')
+    if (!serverUrl) throw new Error('未配置服务器域名')
+
+    await axios.get(`${serverUrl}/kv/_info`, {
+      headers: {
+        Accept: 'application/json',
+        'x-app-token': token.value,
+      },
+    })
+
+    // 验证通过再保存
+    setSetting('server.kvToken', token.value)
+    emit('success')
+
+  } catch (err) {
+    const status = err?.response?.status
+    if (status === 401 || status === 403) {
+      error.value = 'Token 无效或无权限,请确认后重试'
+    } else if (status === 404) {
+      error.value = '命名空间不存在或服务器未就绪'
+    } else {
+      error.value = err?.response?.data?.message || err?.message || '验证失败,请稍后重试'
+    }
+  } finally {
+    verifying.value = false
+  }
+}
+
+// 暴露清空表单的方法
+defineExpose({
+  reset: () => {
+    token.value = ''
+    error.value = ''
+  }
+})
+</script>
diff --git a/src/components/settings/cards/CloudNamespaceInfoCard.vue b/src/components/settings/cards/CloudNamespaceInfoCard.vue
index 974fecf..c0933e7 100644
--- a/src/components/settings/cards/CloudNamespaceInfoCard.vue
+++ b/src/components/settings/cards/CloudNamespaceInfoCard.vue
@@ -65,16 +65,16 @@
             </div>
           </div>
         </v-card-text> </v-card
-      ><v-card title="Classworks KV" subtitle="云原生键值数据库" border hover
+      ><v-card title="Classworks KV" subtitle="文档形键值数据库" border hover
         ><v-card-text
           >Classworks KV
-          是厚浪云推出的云原生键值数据库，其是一个开放的云应用平台，为各种应用提供存储服务。此设备正在使用其服务，如果您希望管理设备信息，请前往
+          是厚浪云推出的文档形键值数据库，其是一个开放的云应用平台，为各种应用提供存储服务。此设备正在使用其服务，如果您希望管理设备信息，请前往
           Classworks KV
           的网站，如果您在服务推出前就在使用 Classworks，您的数据已被自动迁移。
           <br/><br/>Classworks KV 的全域管理员是 <a href="https://wuyuan.dev" target="_blank">孙悟元</a></v-card-text
         ><v-card-actions
           ><v-btn
-            href="https://kv.houlang.cloud"
+            :href="defaultAuthServer"
             class="text-none"
             append-icon="mdi-open-in-new"
             target="_blank"
@@ -102,15 +102,35 @@
         刷新设备信息
       </v-btn>
 
-      <v-btn color="primary" @click="reinitializeCloudStorage">
+      <v-btn color="error" variant="outlined" @click="showReinitDialog = true">
         重新初始化云端存储
       </v-btn>
     </v-card-actions>
+
+    <!-- 重新初始化确认对话框 -->
+    <v-dialog v-model="showReinitDialog" max-width="500">
+      <v-card>
+        <v-card-title>确认重新初始化</v-card-title>
+        <v-card-text>
+          <v-alert type="warning" variant="tonal" class="mb-3">
+            <v-alert-title>警告</v-alert-title>
+            此操作将清除当前的云端存储配置（包括 Token），您需要重新进行授权。
+          </v-alert>
+          <p>您确定要重新初始化云端存储吗？</p>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="showReinitDialog = false">取消</v-btn>
+          <v-btn color="error" @click="confirmReinitialize">确认</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
 <script>
 import { kvServerProvider } from "@/utils/providers/kvServerProvider";
+import { setSetting, getSetting } from "@/utils/settings";
 
 export default {
   name: "CloudNamespaceInfoCard",
@@ -125,6 +145,8 @@ export default {
       namespaceInfo: {},
       loading: false,
       hasNamespaceInfo: false,
+      showReinitDialog: false, // 确认对话框显示状态
+      defaultAuthServer: getSetting('server.authDomain'),
     };
   },
   watch: {
@@ -168,13 +190,16 @@ export default {
     async reloadInfo() {
       await this.fetchNamespaceInfo();
     },
-    reinitializeCloudStorage() {
-      // 触发 KvInitialize 组件的重新初始化
-      try {
-        window.dispatchEvent(new CustomEvent("kvinit:open"));
-      } catch (e) {
-        console.error("重新初始化云端存储失败:", e);
-      }
+    confirmReinitialize() {
+      // 删除 token 配置（设置为空字符串以触发 shouldShowInit）
+      setSetting('server.kvToken', '');
+      setSetting('device.uuid', '');
+
+      // 关闭对话框
+      this.showReinitDialog = false;
+
+      // 返回主页（将触发 InitServiceChooser 组件显示）
+      this.$router.push('/');
     },
   },
 };
diff --git a/src/main.js b/src/main.js
index 958ca24..5768f5c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,8 @@
 
 // Plugins
 import { registerPlugins } from '@/plugins'
+import { createPinia } from 'pinia'
+const pinia = createPinia()
 
 // Components
 import App from './App.vue'
@@ -15,9 +17,9 @@ import GlobalMessage from '@/components/GlobalMessage.vue'
 import { createApp } from 'vue'
 import Clarity from '@microsoft/clarity';
 const projectId = "rhp8uqoc3l"
-import TDesign from 'tdesign-vue-next'
-import 'tdesign-vue-next/es/style/index.css'
-import '@examaware-cs/player/dist/player.css'
+//import TDesign from 'tdesign-vue-next'
+//import 'tdesign-vue-next/es/style/index.css'
+//import '@examaware-cs/player/dist/player.css'
 
 Clarity.init(projectId);
 import messageService from './utils/message';
@@ -25,8 +27,9 @@ import messageService from './utils/message';
 const app = createApp(App)
 
 registerPlugins(app)
-app.use(TDesign)
+//app.use(TDesign)
 app.use(messageService);
+app.use(pinia)
 
 app.component('GlobalMessage', GlobalMessage)
 
diff --git a/src/pages/DataMigration.vue b/src/pages/DataMigration.vue
index 4c0f2eb..70c1d24 100644
--- a/src/pages/DataMigration.vue
+++ b/src/pages/DataMigration.vue
@@ -3,24 +3,38 @@
     <v-row>
       <v-col cols="12">
         <div class="d-flex align-center mb-6">
-          <v-icon size="x-large" color="primary" class="mr-3"
-            >mdi-database-sync</v-icon
+          <v-icon
+            size="x-large"
+            color="primary"
+            class="mr-3"
           >
+            mdi-database-sync
+          </v-icon>
           <div>
-            <h1 class="text-h4">数据迁移工具</h1>
+            <h1 class="text-h4">
+              数据迁移工具
+            </h1>
             <div class="text-subtitle-1 text-grey">
               将现有数据迁移至 KV 存储系统
             </div>
           </div>
         </div>
 
-        <v-card class="mb-6" variant="tonal" color="info" density="compact">
+        <v-card
+          class="mb-6"
+          variant="tonal"
+          color="info"
+        >
           <v-card-text class="d-flex align-center">
-            <v-icon color="info" class="mr-2">mdi-information-outline</v-icon>
-            <span
-              >使用此工具可以将数据从旧存储系统迁移到新的 KV
-              存储系统，选择本地或云端迁移，以确保数据不会丢失。</span
+            <v-icon
+              color="info"
+              class="mr-2"
             >
+              mdi-information-outline
+            </v-icon>
+            <span>
+              使用此工具可以将数据从旧存储系统迁移到新的 KV 存储系统，选择本地或云端迁移，以确保数据不会丢失。
+            </span>
           </v-card-text>
         </v-card>
 
@@ -29,12 +43,20 @@
     </v-row>
 
     <!-- 一键迁移对话框 -->
-    <v-dialog v-model="showMigrationDialog" max-width="500" persistent>
+    <v-dialog
+      v-model="showMigrationDialog"
+      max-width="500"
+      persistent
+    >
       <v-card>
         <v-card-title class="text-h5 d-flex align-center">
-          <v-icon color="primary" size="large" class="mr-3"
-            >mdi-database-sync</v-icon
+          <v-icon
+            color="primary"
+            size="large"
+            class="mr-3"
           >
+            mdi-database-sync
+          </v-icon>
           一键数据迁移
         </v-card-title>
         <v-card-text class="mt-4">
@@ -45,8 +67,7 @@
 
           <v-alert
             color="info"
-            variant="outlined"
-            density="compact"
+            variant="tonal"
             class="mt-4"
             icon="mdi-information-outline"
           >
@@ -62,7 +83,7 @@
           </v-alert>
         </v-card-text>
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer />
           <v-btn
             color="grey-darken-1"
             variant="text"
@@ -74,11 +95,16 @@
             color="primary"
             size="large"
             variant="elevated"
-            @click="startAutoMigration"
             :loading="isAutoMigrating"
             :disabled="isAutoMigrating"
+            @click="startAutoMigration"
           >
-            <v-icon left class="mr-2">mdi-database-export</v-icon>
+            <v-icon
+              left
+              class="mr-2"
+            >
+              mdi-database-export
+            </v-icon>
             开始一键迁移
           </v-btn>
         </v-card-actions>
diff --git a/src/pages/debug-init.vue b/src/pages/debug-init.vue
index d4d419d..5cd6778 100644
--- a/src/pages/debug-init.vue
+++ b/src/pages/debug-init.vue
@@ -72,9 +72,9 @@
         md="6"
       >
         <v-card>
-          <v-card-title>KvInitialize 预览</v-card-title>
+          <v-card-title>初始化组件已替换</v-card-title>
           <v-card-text>
-            <kv-initialize />
+            已迁移为首页内联的 InitServiceChooser 组件。
           </v-card-text>
         </v-card>
       </v-col>
@@ -84,7 +84,6 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import KvInitialize from '@/components/KvInitialize.vue'
 import { getSetting, setSetting } from '@/utils/settings'
 import { kvServerProvider } from '@/utils/providers/kvServerProvider'
 
diff --git a/src/pages/debug-socket.vue b/src/pages/debug-socket.vue
new file mode 100644
index 0000000..a4ade0c
--- /dev/null
+++ b/src/pages/debug-socket.vue
@@ -0,0 +1,408 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <v-card
+          border
+          class="mb-4"
+        >
+          <v-card-title>连接信息</v-card-title>
+          <v-card-text>
+            <v-list density="compact">
+              <v-list-item>
+                <v-list-item-title>Server URL</v-list-item-title>
+                <v-list-item-subtitle>{{ serverUrl }}</v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-title>当前 KV Token</v-list-item-title>
+                <v-list-item-subtitle>{{ currentToken || '(未配置)' }}</v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-title>连接状态</v-list-item-title>
+                <v-list-item-subtitle>
+                  <v-chip
+                    :color="connected ? 'success' : 'error'"
+                    size="small"
+                    class="mr-2"
+                  >
+                    {{ connected ? 'connected' : 'disconnected' }}
+                  </v-chip>
+                  <span v-if="socketId">id: {{ socketId }}</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-title>已加入 Token</v-list-item-title>
+                <v-list-item-subtitle>{{ joinedToken || '-' }}</v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-title>当前数据键</v-list-item-title>
+                <v-list-item-subtitle>{{ currentDataKey }}</v-list-item-subtitle>
+              </v-list-item>
+            </v-list>
+            <v-divider class="my-4" />
+            <v-row>
+              <v-col
+                cols="12"
+                md="8"
+              >
+                <v-text-field
+                  v-model="manualToken"
+                  label="手动加入 Token (留空使用配置的 Token)"
+                  clearable
+                />
+              </v-col>
+              <v-col
+                cols="12"
+                md="4"
+                class="d-flex align-center"
+              >
+                <v-btn
+                  color="primary"
+                  class="mr-2"
+                  @click="handleJoinToken(manualToken || currentToken)"
+                >
+                  加入
+                </v-btn>
+                <v-btn
+                  color="warning"
+                  class="mr-2"
+                  :disabled="!joinedToken"
+                  @click="handleLeaveToken(joinedToken)"
+                >
+                  离开当前
+                </v-btn>
+                <v-btn
+                  color="error"
+                  variant="tonal"
+                  @click="handleLeaveAll"
+                >
+                  离开全部
+                </v-btn>
+              </v-col>
+            </v-row>
+            <v-divider class="my-4" />
+            <v-row>
+              <v-col cols="12">
+                <v-card variant="tonal" color="primary" border>
+                  <v-card-title class="text-subtitle-1">聊天室消息</v-card-title>
+                  <v-card-text>
+                    <v-textarea
+                      v-model="chatInput"
+                      label="发送到当前已加入的设备频道"
+                      rows="2"
+                      auto-grow
+                      clearable
+                    />
+                    <div class="d-flex">
+                      <v-spacer />
+                      <v-btn
+                        color="primary"
+                        :disabled="!canSendChat"
+                        @click="sendChat"
+                      >
+                        发送聊天
+                      </v-btn>
+                    </div>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <v-btn
+                  color="secondary"
+                  variant="tonal"
+                  @click="reconnect"
+                >
+                  重新连接
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+
+        <v-card border>
+          <v-card-title>在线设备</v-card-title>
+          <v-card-text>
+            <v-btn
+              color="primary"
+              class="mb-3"
+              @click="fetchOnline"
+            >
+              刷新在线列表
+            </v-btn>
+            <v-list
+              v-if="onlineDevices.length"
+              density="compact"
+            >
+              <v-list-item
+                v-for="dev in onlineDevices"
+                :key="dev.uuid"
+              >
+                <template #prepend>
+                  <v-avatar
+                    :color="dev.connections > 0 ? 'success' : 'grey'"
+                    size="24"
+                  />
+                </template>
+                <v-list-item-title>{{ dev.name || '(未命名)' }}</v-list-item-title>
+                <v-list-item-subtitle>{{ dev.uuid }} · 连接数 {{ dev.connections }}</v-list-item-subtitle>
+                <template #append>
+                  <v-btn
+                    size="small"
+                    variant="text"
+                    @click="handleSelectDevice(dev)"
+                  >
+                    选择
+                  </v-btn>
+                </template>
+              </v-list-item>
+            </v-list>
+            <div
+              v-else
+              class="text-grey"
+            >
+              暂无数据
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <v-card border>
+          <v-card-title class="d-flex align-center">
+            事件日志
+            <v-spacer />
+            <v-btn
+              size="small"
+              variant="text"
+              color="error"
+              @click="clearLogs"
+            >
+              清空
+            </v-btn>
+          </v-card-title>
+          <v-card-text>
+            <v-list density="compact">
+              <v-list-item
+                v-for="(log, idx) in logs"
+                :key="idx"
+              >
+                <v-list-item-title>
+                  <span class="text-caption text-grey">{{ log.time }}</span>
+                  <span class="ml-2">{{ log.event }}</span>
+                </v-list-item-title>
+                <v-list-item-text>
+                  <pre
+                    class="mb-2"
+                    style="white-space: pre-wrap"
+                  >{{ log.payload }}</pre>
+                </v-list-item-text>
+              </v-list-item>
+            </v-list>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { getSetting } from '@/utils/settings'
+import {
+  getSocket,
+  on as socketOn,
+  joinToken,
+  leaveToken,
+  leaveAll,
+  getServerUrl
+} from '@/utils/socketClient'
+
+const currentToken = ref(getSetting('server.kvToken') || '')
+const manualToken = ref('')
+const joinedToken = ref('')
+const connected = ref(false)
+const socketId = ref('')
+const logs = ref([])
+const onlineDevices = ref([])
+const chatInput = ref('')
+
+const serverUrl = computed(() => getServerUrl())
+
+const currentDataKey = computed(() => {
+  const now = new Date()
+  const y = now.getFullYear()
+  const m = String(now.getMonth() + 1).padStart(2, '0')
+  const d = String(now.getDate()).padStart(2, '0')
+  return `classworks-data-${y}${m}${d}`
+})
+
+function pushLog(event, payload) {
+  const time = new Date().toLocaleTimeString()
+  logs.value.unshift({
+    time,
+    event,
+    payload: typeof payload === 'string' ? payload : JSON.stringify(payload, null, 2)
+  })
+  if (logs.value.length > 200) logs.value.pop()
+}
+
+function wireSocketBaseEvents() {
+  const s = getSocket()
+  connected.value = !!s.connected
+  socketId.value = s.id || ''
+
+  s.on('connect', () => {
+    connected.value = true
+    socketId.value = s.id || ''
+    pushLog('connect', { id: s.id })
+    // re-join with token if set
+    if (joinedToken.value) joinToken(joinedToken.value)
+  })
+  s.on('disconnect', (reason) => {
+    connected.value = false
+    pushLog('disconnect', { reason })
+  })
+  s.on('connect_error', (err) => pushLog('connect_error', { message: err?.message }))
+  s.on('reconnect_attempt', (n) => pushLog('reconnect_attempt', { attempt: n }))
+  s.on('reconnect', (n) => pushLog('reconnect', { attempt: n }))
+}
+
+function wireBusinessEvents() {
+  // key changes
+  socketOn('kv-key-changed', (msg) => {
+    pushLog('kv-key-changed', msg)
+  })
+  // device joined count broadcast
+  socketOn('device-joined', (msg) => {
+    pushLog('device-joined', msg)
+  })
+  // join success
+  socketOn('joined', (msg) => {
+    pushLog('joined', msg)
+  })
+  // join error
+  socketOn('join-error', (msg) => {
+    pushLog('join-error', msg)
+  })
+  // chat message
+  socketOn('chat:message', (msg) => {
+    pushLog('chat:message', msg)
+  })
+}
+
+function handleJoinToken(token) {
+  try {
+    if (!token) {
+      pushLog('join-error', 'Token 为空')
+      return
+    }
+    joinToken(token)
+    joinedToken.value = token
+    pushLog('join-token', { token })
+  } catch (e) {
+    pushLog('join-token-error', String(e))
+  }
+}
+
+function handleLeaveToken(token) {
+  try {
+    leaveToken(token)
+    if (joinedToken.value === token) joinedToken.value = ''
+    pushLog('leave-token', { token })
+  } catch (e) {
+    pushLog('leave-token-error', String(e))
+  }
+}
+
+function handleLeaveAll() {
+  try {
+    leaveAll()
+    joinedToken.value = ''
+    pushLog('leave-all', {})
+  } catch (e) {
+    pushLog('leave-all-error', String(e))
+  }
+}
+
+function reconnect() {
+  try {
+    const s = getSocket()
+    s.connect()
+  } catch (e) {
+    pushLog('reconnect-error', String(e))
+  }
+}
+
+const canSendChat = computed(() => {
+  const text = chatInput.value?.trim() || ''
+  return !!(text && (joinedToken.value || currentToken.value))
+})
+
+function sendChat() {
+  try {
+    const text = (chatInput.value || '').trim()
+    if (!text) return
+    const s = getSocket()
+    // send as plain string per server contract
+    s.emit('chat:send', text)
+    pushLog('chat:send', { text })
+    chatInput.value = ''
+  } catch (e) {
+    pushLog('chat:error', String(e))
+  }
+}
+
+function handleSelectDevice(dev) {
+  // For now, just show a message that we need the token
+  pushLog('select-device', {
+    message: '请输入该设备对应的 KV Token 以加入频道',
+    device: dev
+  })
+}
+
+async function fetchOnline() {
+  try {
+    const resp = await fetch(`${serverUrl.value}/devices/online`)
+    const data = await resp.json()
+    onlineDevices.value = Array.isArray(data?.devices) ? data.devices : []
+    pushLog('fetch-online', { count: onlineDevices.value.length })
+  } catch (e) {
+    pushLog('fetch-online-error', String(e))
+  }
+}
+
+function clearLogs() {
+  logs.value = []
+}
+
+onMounted(() => {
+  // init socket + base events
+  getSocket()
+  wireSocketBaseEvents()
+  wireBusinessEvents()
+
+  // auto join with current token if present
+  if (currentToken.value) {
+    handleJoinToken(currentToken.value)
+  }
+
+  // prime online list
+  fetchOnline()
+})
+
+onBeforeUnmount(() => {
+  try {
+    if (joinedToken.value) leaveToken(joinedToken.value)
+  } catch (e) {
+    void e
+  }
+})
+</script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index ab9e1e9..e64d154 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -7,6 +7,31 @@
     <v-spacer />
 
     <template #append>
+      <!-- 只读 Token 警告 -->
+      <v-chip
+        v-if="tokenDisplayInfo.readonly"
+        color="warning"
+        variant="tonal"
+        class="mx-2"
+        prepend-icon="mdi-lock-alert"
+      >
+        只读
+      </v-chip>
+
+      <!-- 学生名称显示 chip（始终蓝色） -->
+      <v-chip
+        v-if="tokenDisplayInfo.show"
+        color="primary"
+        variant="tonal"
+        class="mx-2"
+        prepend-icon="mdi-account"
+        :style="{ cursor: tokenDisplayInfo.disabled ? 'default' : 'pointer' }"
+        @click="handleTokenChipClick"
+      >
+        {{ tokenDisplayInfo.text }}
+      </v-chip>
+
+      <v-btn icon="mdi-chat" variant="text" @click="isChatOpen = true" />
       <v-btn
         icon="mdi-bell"
         variant="text"
@@ -17,7 +42,17 @@
       <v-btn icon="mdi-cog" variant="text" @click="$router.push('/settings')" />
     </template>
   </v-app-bar>
-  <div class="d-flex">
+  <!-- 初始化选择卡片，仅在首页且需要授权时显示；不影响顶栏 -->
+  <init-service-chooser v-if="shouldShowInit" @done="settingsTick++" />
+
+  <!-- 学生姓名管理组件 -->
+  <StudentNameManager
+    v-if="!shouldShowInit"
+    ref="studentNameManager"
+    @token-info-updated="updateTokenDisplayInfo"
+  />
+
+  <div v-if="!shouldShowInit" class="d-flex">
     <!-- 主要内容区域 -->
     <v-container class="main-window flex-grow-1 no-select" fluid>
       <!-- 有内容的科目卡片 -->
@@ -36,6 +71,7 @@
               border
               height="100%"
               class="glow-track"
+              :class="{ 'glow-highlight': highlightedCards[item.key] }"
               @click="!isEditingDisabled && openDialog(item.key)"
               @mousemove="handleMouseMove"
               @touchmove="handleTouchMove"
@@ -59,7 +95,7 @@
       <!-- 单独显示空科目 -->
       <div class="empty-subjects mt-4">
         <template v-if="emptySubjectDisplay === 'button'">
-          <v-btn-group divided variant="outlined">
+          <v-btn-group divided variant="tonal">
             <v-btn
               v-for="subject in unusedSubjects"
               :key="subject.name"
@@ -180,6 +216,7 @@
 
     <!-- 出勤统计区域 -->
     <v-col
+    v-ripple="{ class: `text-${['primary','secondary','info','success','warning','error'][Math.floor(Math.random()*6)]}` }"
       v-if="state.studentList && state.studentList.length"
       class="attendance-area no-select"
       cols="1"
@@ -541,6 +578,9 @@
   <!-- 添加ICP备案悬浮组件 -->
   <FloatingICP />
 
+  <!-- 设备聊天室（右下角浮窗） -->
+  <ChatWidget v-model="isChatOpen" :show-button="false" />
+
   <!-- 添加确认对话框 -->
   <v-dialog v-model="confirmDialog.show" max-width="400">
     <v-card>
@@ -608,8 +648,8 @@
           确认应用
         </v-btn>
       </v-card-actions>
-    </v-card>
-  </v-dialog><br/><br/><br/>
+    </v-card> </v-dialog
+  ><br /><br /><br />
 </template>
 
 <script>
@@ -617,7 +657,10 @@ import MessageLog from "@/components/MessageLog.vue";
 import RandomPicker from "@/components/RandomPicker.vue";
 import FloatingToolbar from "@/components/FloatingToolbar.vue";
 import FloatingICP from "@/components/FloatingICP.vue";
+import ChatWidget from "@/components/ChatWidget.vue";
 import HomeworkEditDialog from "@/components/HomeworkEditDialog.vue";
+import InitServiceChooser from "@/components/InitServiceChooser.vue";
+import StudentNameManager from "@/components/StudentNameManager.vue";
 import dataProvider from "@/utils/dataProvider";
 import {
   getSetting,
@@ -631,7 +674,15 @@ import "../styles/transitions.scss";
 import "../styles/global.scss";
 import { pinyin } from "pinyin-pro";
 import { debounce, throttle } from "@/utils/debounce";
-import { Base64 } from 'js-base64';
+import { Base64 } from "js-base64";
+import {
+  getSocket,
+  on as socketOn,
+  off as socketOff,
+  joinToken,
+  leaveAll,
+  onConnect as onSocketConnect,
+} from "@/utils/socketClient";
 
 export default {
   name: "Classworks 作业板",
@@ -641,6 +692,9 @@ export default {
     FloatingToolbar,
     FloatingICP,
     HomeworkEditDialog,
+    InitServiceChooser,
+    ChatWidget,
+    StudentNameManager,
   },
   data() {
     const defaultSubjects = [
@@ -653,7 +707,7 @@ export default {
       { name: "政治", order: 6 },
       { name: "历史", order: 7 },
       { name: "地理", order: 8 },
-      { name: "其他", order: 9 }
+      { name: "其他", order: 9 },
     ];
 
     return {
@@ -684,7 +738,7 @@ export default {
         snackbarText: "",
         fontSize: getSetting("font.size"),
         datePickerDialog: false,
-        selectedDate: new Date().toISOString().split("T")[0].replace(/-/g, ''),
+        selectedDate: new Date().toISOString().split("T")[0].replace(/-/g, ""),
         selectedDateObj: new Date(),
         refreshInterval: null,
         showNoDataMessage: false,
@@ -721,6 +775,28 @@ export default {
         cancelHandler: null,
         icons: {},
       },
+      settingsTick: 0,
+      isChatOpen: false,
+      highlightedCards: {}, // 记录哪些卡片需要高亮
+      // Token 显示信息（统一显示 token 信息和学生姓名）
+      tokenDisplayInfo: {
+        show: false,
+        readonly: false, // 是否是只读 token
+        text: '',
+        color: 'primary',
+        variant: 'tonal',
+        icon: 'mdi-account',
+        disabled: false
+      },
+      // 实时刷新信息
+      realtimeInfo: {
+        show: false,
+        time: "",
+        key: "",
+      },
+      $offKvChanged: null,
+      $offConnect: null,
+      debouncedRealtimeRefresh: null,
     };
   },
 
@@ -782,7 +858,7 @@ export default {
         (key) => this.state.boardData.homework[key].content?.trim()
       );
       return this.state.availableSubjects
-        .filter(subject => !usedKeys.includes(subject.name))
+        .filter((subject) => !usedKeys.includes(subject.name))
         .sort((a, b) => a.order - b.order);
     },
     emptySubjects() {
@@ -853,6 +929,16 @@ export default {
     showAntiScreenBurnCard() {
       return getSetting("display.showAntiScreenBurnCard");
     },
+    shouldShowInit() {
+      const provider = getSetting("server.provider");
+      const isKv = provider === "kv-server" || provider === "classworkscloud";
+      const token = getSetting("server.kvToken");
+      // 仅首页
+      const onHome = this.$route?.path === "/";
+      // 依赖 settingsTick 使其在设置变更时重新计算
+      void this.settingsTick;
+      return onHome && isKv && (!token || token === "");
+    },
     filteredStudents() {
       let students = [...this.state.studentList];
 
@@ -915,7 +1001,7 @@ export default {
     subjectOrder() {
       return [...this.state.availableSubjects]
         .sort((a, b) => a.order - b.order)
-        .map(subject => subject.name);
+        .map((subject) => subject.name);
     },
   },
 
@@ -956,6 +1042,24 @@ export default {
         this.updateSettings();
       });
 
+      // 连接学生姓名管理组件
+      this.$nextTick(() => {
+        const studentNameManager = this.$refs.studentNameManager;
+        if (studentNameManager) {
+          this.studentNameInfo.name = studentNameManager.currentStudentName;
+          this.studentNameInfo.isStudent = studentNameManager.isStudentToken;
+          this.studentNameInfo.openDialog = () => studentNameManager.openDialog();
+
+          // 监听学生姓名变化
+          this.$watch(() => studentNameManager.currentStudentName, (newName) => {
+            this.studentNameInfo.name = newName;
+          });
+          this.$watch(() => studentNameManager.isStudentToken, (isStudent) => {
+            this.studentNameInfo.isStudent = isStudent;
+          });
+        }
+      });
+
       document.addEventListener(
         "fullscreenchange",
         this.fullscreenChangeHandler
@@ -976,6 +1080,14 @@ export default {
       this.checkHashForRandomPicker();
 
       window.addEventListener("hashchange", this.checkHashForRandomPicker);
+
+      // 实时频道：加入设备房间并监听键变化
+      this.setupRealtimeChannel();
+
+      // 初始化 Token 显示信息
+      this.$nextTick(() => {
+        this.updateTokenDisplayInfo();
+      });
     } catch (err) {
       console.error("初始化失败:", err);
       this.showError("初始化失败，请刷新页面重试");
@@ -1008,9 +1120,63 @@ export default {
     );
 
     window.removeEventListener("hashchange", this.checkHashForRandomPicker);
+
+    // 退出设备房间并清理监听
+    try {
+      if (this.$offKvChanged) this.$offKvChanged();
+      if (this.$offConnect) this.$offConnect();
+      leaveAll();
+    } catch (e) {
+      void e;
+    }
   },
 
   methods: {
+    // 更新 Token 显示信息
+    updateTokenDisplayInfo() {
+      const manager = this.$refs.studentNameManager
+      if (!manager || !manager.hasToken) {
+        this.tokenDisplayInfo.show = false
+        this.tokenDisplayInfo.readonly = false
+        return
+      }
+
+      const displayName = manager.displayName
+      const isReadOnly = manager.isReadOnly
+      const isStudent = manager.isStudentToken
+
+      // 设置只读状态（对所有类型的 token 都显示）
+      this.tokenDisplayInfo.readonly = isReadOnly
+
+      // 只有学生类型的 token 才显示名称 chip
+      if (!isStudent) {
+        this.tokenDisplayInfo.show = false
+        return
+      }
+
+      // 设置学生名称显示（始终蓝色）
+      this.tokenDisplayInfo.text = displayName
+      this.tokenDisplayInfo.color = 'primary'
+      this.tokenDisplayInfo.icon = 'mdi-account'
+      this.tokenDisplayInfo.disabled = isReadOnly // 只读时不可点击
+      this.tokenDisplayInfo.show = true
+    },
+
+    // 处理 Token Chip 点击
+    handleTokenChipClick() {
+      console.log('Token chip clicked')
+      const manager = this.$refs.studentNameManager
+      console.log('Manager:', manager)
+      console.log('Is student token:', manager?.isStudentToken)
+
+      if (manager && manager.isStudentToken) {
+        console.log('Opening dialog...')
+        manager.openDialog()
+      } else {
+        console.log('Cannot open dialog - conditions not met')
+      }
+    },
+
     ensureDate(dateInput) {
       if (dateInput instanceof Date) {
         return dateInput;
@@ -1085,10 +1251,13 @@ export default {
           if (response.error.code === "NOT_FOUND") {
             this.state.showNoDataMessage = true;
             this.state.noDataMessage = response.error.message;
-            this.state.boardData = {
-              homework: {},
-              attendance: { absent: [], late: [], exclude: [] },
-            };
+            // 只有当前没有数据时才设置为空，避免覆盖已有的本地数据
+            if (!this.state.boardData || (!this.state.boardData.homework && !this.state.boardData.attendance)) {
+              this.state.boardData = {
+                homework: {},
+                attendance: { absent: [], late: [], exclude: [] },
+              };
+            }
           } else {
             throw new Error(response.error.message);
           }
@@ -1106,11 +1275,16 @@ export default {
           this.$message.success("下载成功", "数据已更新");
         }
       } catch (error) {
-        this.state.boardData = {
-          homework: {},
-          attendance: { absent: [], late: [], exclude: [] },
-        };
+        // 数据加载失败时不覆盖现有数据，只显示错误信息
+        console.error("数据加载失败:", error);
         this.$message.error("下载失败", error.message);
+        // 如果当前没有任何数据，才初始化为空数据
+        if (!this.state.boardData || (!this.state.boardData.homework && !this.state.boardData.attendance)) {
+          this.state.boardData = {
+            homework: {},
+            attendance: { absent: [], late: [], exclude: [] },
+          };
+        }
       } finally {
         this.loading.download = false;
       }
@@ -1194,9 +1368,7 @@ export default {
           const response = await dataProvider.loadData("classworks-list-main");
 
           if (response.success != false && Array.isArray(response)) {
-            this.state.studentList = response.map(
-              (student) => student.name
-            );
+            this.state.studentList = response.map((student) => student.name);
           }
         } catch (error) {
           console.warn(
@@ -1214,7 +1386,9 @@ export default {
 
     async loadSubjects() {
       try {
-        const subjectsResponse = await dataProvider.loadData("classworks-config-subject");
+        const subjectsResponse = await dataProvider.loadData(
+          "classworks-config-subject"
+        );
         if (subjectsResponse && Array.isArray(subjectsResponse)) {
           // 更新科目列表
           this.state.availableSubjects = subjectsResponse;
@@ -1370,6 +1544,8 @@ export default {
       this.state.contentStyle = { "font-size": `${this.state.fontSize}px` };
       this.setupAutoRefresh();
       this.updateBackendUrl();
+      // 触发依赖刷新（例如 shouldShowInit）
+      this.settingsTick++;
     },
 
     async handleDateSelect(newDate) {
@@ -1393,10 +1569,7 @@ export default {
             .catch(() => {});
 
           // Load both data and subjects in parallel
-          await Promise.all([
-            this.downloadData(),
-            this.loadSubjects()
-          ]);
+          await Promise.all([this.downloadData(), this.loadSubjects()]);
         }
       } catch (error) {
         console.error("Date processing error:", error);
@@ -1430,6 +1603,80 @@ export default {
         }));
     },
 
+    // 实时频道：加入设备房间并监听键变化
+    setupRealtimeChannel() {
+      try {
+        const token = getSetting("server.kvToken");
+        if (!token) {
+          console.warn("未配置 KV Token，无法加入实时频道");
+          return;
+        }
+
+        // Ensure socket created
+        getSocket();
+        joinToken(token);
+
+        // Re-join on reconnect
+        this.$offConnect = onSocketConnect(() => joinToken(token));
+
+        // Debounce refresh to avoid storms
+        if (!this.debouncedRealtimeRefresh) {
+          this.debouncedRealtimeRefresh = debounce(async () => {
+            const oldHomework = JSON.parse(
+              JSON.stringify(this.state.boardData.homework)
+            );
+            await this.downloadData();
+            const now = new Date();
+            const hh = String(now.getHours()).padStart(2, "0");
+            const mm = String(now.getMinutes()).padStart(2, "0");
+            const ss = String(now.getSeconds()).padStart(2, "0");
+
+            // 使用消息记录工具发送通知
+            this.$message?.info(
+              "数据已更新",
+              `已于 ${hh}:${mm}:${ss} 自动刷新`
+            ); // 检测哪些科目发生了变化
+            const changed = {};
+            for (const key in this.state.boardData.homework) {
+              const oldContent = oldHomework[key]?.content || "";
+              const newContent =
+                this.state.boardData.homework[key]?.content || "";
+              if (oldContent !== newContent) {
+                changed[key] = true;
+              }
+            }
+            // 删除的科目也算变化
+            for (const key in oldHomework) {
+              if (!this.state.boardData.homework[key]) {
+                changed[key] = true;
+              }
+            }
+
+            // 设置高亮
+            this.highlightedCards = changed;
+            // 3秒后移除高亮
+            setTimeout(() => {
+              this.highlightedCards = {};
+            }, 10000);
+          }, 800);
+        }
+
+        const handler = (msg) => {
+          // Expect msg = { uuid, key, action, created?, updatedAt?, deletedAt?, batch? }
+          if (!msg) return;
+          // We only care about current date key changes
+          const expectedKey = `classworks-data-${this.state.dateString}`;
+          if (msg.key !== expectedKey) return;
+          if (msg.action !== "upsert" && msg.action !== "delete") return;
+          // Trigger a debounced refresh
+          this.debouncedRealtimeRefresh?.(msg.key);
+        };
+
+        this.$offKvChanged = socketOn("kv-key-changed", handler);
+      } catch (e) {
+        console.warn("实时频道初始化失败", e);
+      }
+    },
 
     setAllPresent() {
       this.state.boardData.attendance = {
@@ -1728,7 +1975,7 @@ export default {
 
         try {
           const binaryString = atob(configParam);
-          const bytes = Uint8Array.from(binaryString, c => c.charCodeAt(0));
+          const bytes = Uint8Array.from(binaryString, (c) => c.charCodeAt(0));
           const decodedString = new TextDecoder().decode(bytes);
           const decodedConfig = JSON.parse(decodedString);
           console.log("从URL读取配置:", decodedConfig);
diff --git a/src/pages/settings.vue b/src/pages/settings.vue
index fae366b..e08e9b3 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -11,7 +11,7 @@
           icon="mdi-menu"
           variant="text"
           @click="drawer = !drawer"
-          class="d-md-none"
+
         />
       </template>
       <v-app-bar-title class="text-h6">设置</v-app-bar-title>
@@ -43,7 +43,32 @@
         style="width: 100%"
         direction="vertical"
       >
-        <v-tabs-window-item value="index">
+        <v-tabs-window-item value="index"
+          ><v-card class="service-card gradient-right clickable" elevation="8">
+            <v-card-item>
+              <div class="card-title">
+                <div>
+                  <div class="text-h6">Classworks KV</div>
+                  <div class="text-caption text-medium-emphasis">
+                    文档形键值数据库
+                  </div>
+                </div>
+              </div>
+            </v-card-item>
+            <v-card-text>
+              <div class="mt-4">
+                <v-btn
+                  variant="text"
+                  class="text-none"
+                  append-icon="mdi-arrow-right"
+                  rounded="xl"
+                  @click="openClassworksKV"
+                >
+                  打开 Classworks KV
+                </v-btn>
+              </div>
+            </v-card-text>
+          </v-card>
           <v-card title="Classworks" subtitle="设置" class="rounded-xl" border>
             <v-card-text>
               <v-alert
@@ -146,7 +171,6 @@
           />
         </v-tabs-window-item>
 
-
         <v-tabs-window-item value="randomPicker">
           <random-picker-card border :is-mobile="isMobile" />
         </v-tabs-window-item>
@@ -441,6 +465,9 @@ export default {
   },
 
   methods: {
+    openClassworksKV() {
+      window.open(getSetting("server.authDomain"), "_blank");
+    },
     loadAllSettings() {
       Object.keys(this.settings).forEach((section) => {
         Object.keys(this.settings[section]).forEach((key) => {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f8c5683..1d6219f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -28,6 +28,27 @@
   }
 }
 
+// 数据更新高亮效果
+.glow-highlight {
+  animation: glow-pulse 3s ease-in-out;
+  box-shadow: 0 0 20px rgba(33, 150, 243, 0.6),
+              0 0 40px rgba(33, 150, 243, 0.4),
+              0 0 60px rgba(33, 150, 243, 0.2) !important;
+}
+
+@keyframes glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(33, 150, 243, 0.6),
+                0 0 40px rgba(33, 150, 243, 0.4),
+                0 0 60px rgba(33, 150, 243, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba(33, 150, 243, 0.8),
+                0 0 60px rgba(33, 150, 243, 0.6),
+                0 0 90px rgba(33, 150, 243, 0.4);
+  }
+}
+
 // 添加卡片悬浮效果
 .grid-item .v-card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -289,80 +310,6 @@
     transform: scale(1.02);
   }
 
-  
-// 添加卡片发光效果
-.glow-track {
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s ease;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
-        rgba(255, 255, 255, 0.15) 0%,
-        rgba(255, 255, 255, 0) 70%);
-    opacity: 0;
-    transition: opacity 0.3s;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  &:hover::before {
-    opacity: 1;
-  }
-}
-
-// 添加卡片悬浮效果
-.grid-item .v-card {
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
-  }
-
-  &:active {
-    transform: translateY(-2px);
-  }
-}
-
-// 添加空科目卡片样式
-.empty-subject-card {
-  transition: all 0.3s ease;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-    transform: translateY(-4px);
-  }
-}
-
-// 修改防烧屏提示卡片，使用 tonal 样式减少信息密度
-.anti-burn-card {
-  animation: subtle-glow 4s infinite alternate;
-  transition: all 0.3s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
-  }
-}
-
-@keyframes subtle-glow {
-  0% {
-    box-shadow: 0 0 5px rgba(33, 150, 243, 0.1);
-  }
-
-  100% {
-    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
-  }
-}
-
 // 出勤管理对话框样式
 .attendance-stat {
   height: 100%;
diff --git a/src/utils/dataProvider.js b/src/utils/dataProvider.js
index 31813e2..508f397 100644
--- a/src/utils/dataProvider.js
+++ b/src/utils/dataProvider.js
@@ -183,7 +183,7 @@ export default {
         if (autoConfigureCloud) {
           // 使用classworksCloudDefaults配置
           const classworksCloudDefaults = {
-            "server.domain": "https://kv.wuyuan.dev",
+            "server.domain": import.meta.env.VITE_DEFAULT_KV_SERVER || "https://kv.wuyuan.dev",
             "server.siteKey": "",
           };
 
diff --git a/src/utils/settings.js b/src/utils/settings.js
index 6e496f0..14195cf 100644
--- a/src/utils/settings.js
+++ b/src/utils/settings.js
@@ -68,7 +68,7 @@ const SETTINGS_STORAGE_KEY = "Classworks_settings";
 
 // 新增: Classworks云端存储的默认设置
 const classworksCloudDefaults = {
-  "server.domain": "https://kv.wuyuan.dev",
+  "server.domain": import.meta.env.VITE_DEFAULT_KV_SERVER || "https://kv.wuyuan.dev",
   //"server.domain": "http://localhost:3030",
   "server.siteKey": "",
 };
@@ -206,7 +206,7 @@ const settingsDefinitions = {
   },
   "server.authDomain": {
     type: "string",
-    default: "https://kv.houlang.cloud",
+    default: import.meta.env.VITE_DEFAULT_AUTH_SERVER || "https://kv.houlang.cloud",
     description: "授权服务器域名",
     icon: "mdi-shield-account",
     validate: (value) => {
diff --git a/src/utils/socketClient.js b/src/utils/socketClient.js
new file mode 100644
index 0000000..7fbcfc1
--- /dev/null
+++ b/src/utils/socketClient.js
@@ -0,0 +1,87 @@
+// Lightweight reusable Socket.IO client singleton
+// - Uses server domain from settings when available
+// - Exposes join/leave helpers and event on/off wrappers
+
+import { io } from 'socket.io-client';
+import { getSetting } from '@/utils/settings';
+
+let socket = null;
+let connectedDomain = null;
+const listeners = new Set();
+
+export function getServerUrl() {
+  // Prefer configured server domain; fallback to env; then current origin
+  const cfg = getSetting('server.domain');
+  const envUrl = import.meta?.env?.VITE_SERVER_URL;
+  return cfg || envUrl || window.location.origin;
+}
+
+export function getSocket() {
+  const serverUrl = getServerUrl();
+  if (!socket || connectedDomain !== serverUrl) {
+    if (socket) {
+      try { socket.disconnect(); } catch (e) {
+        void e; // ignore
+      }
+      socket = null;
+    }
+    connectedDomain = serverUrl;
+    socket = io(serverUrl, { transports: ['websocket'] });
+
+    // Re-attach previously registered event handlers on new socket instance
+    listeners.forEach(({ event, handler }) => {
+      socket.on(event, handler);
+    });
+  }
+  return socket;
+}
+
+export function on(event, handler) {
+  const s = getSocket();
+  s.on(event, handler);
+  listeners.add({ event, handler });
+  return () => off(event, handler);
+}
+
+export function off(event, handler) {
+  if (!socket) return;
+  socket.off(event, handler);
+  // Remove only matching entry
+  for (const item of Array.from(listeners)) {
+    if (item.event === event && item.handler === handler) {
+      listeners.delete(item);
+    }
+  }
+}
+
+export function joinToken(token) {
+  const s = getSocket();
+  if (!token) return;
+  s.emit('join-token', { token });
+}
+
+export function leaveToken(token) {
+  if (!socket) return;
+  socket.emit('leave-token', { token });
+}
+
+export function leaveAll() {
+  if (!socket) return;
+  socket.emit('leave-all');
+}
+
+export function onConnect(handler) {
+  const s = getSocket();
+  s.on('connect', handler);
+  return () => s.off('connect', handler);
+}
+
+export function disconnect() {
+  if (!socket) return;
+  try { socket.disconnect(); } catch (e) {
+    void e; // ignore
+  }
+  socket = null;
+  connectedDomain = null;
+  listeners.clear();
+}
diff --git a/vite.config.mjs b/vite.config.mjs
index b4354a5..d386657 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -7,7 +7,7 @@ import Vue from '@vitejs/plugin-vue'
 import VueRouter from 'unplugin-vue-router/vite'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import { VitePWA } from 'vite-plugin-pwa'
-import { TDesignResolver } from 'unplugin-vue-components/resolvers'
+//import { TDesignResolver } from 'unplugin-vue-components/resolvers'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -156,11 +156,11 @@ export default defineConfig({
       },
     }),
     Components({
-      resolvers: [
-        TDesignResolver({
-          library: 'vue-next'
-        })
-      ]
+      //resolvers: [
+      //  TDesignResolver({
+      //    library: 'vue-next'
+      //  })
+      //]
     }),
     Fonts({
       google: {