refactor(web): adopt modular Vue architecture and isolate bearer sessions

web/vite.config.ts

@@ -1,32 +1,41 @@
-import vue from '@vitejs/plugin-vue'
 import { createHash } from 'node:crypto'
 import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
+  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), '@@': fileURLToPath(new URL('./src/common', import.meta.url)) } },
   plugins: [
     vue(),
+    UnoCSS(),
+    AutoImport({ imports: ['vue', 'vue-router', 'pinia'], dts: 'types/auto/auto-imports.d.ts' }),
+    Components({ dts: 'types/auto/components.d.ts', resolvers: [ElementPlusResolver({ importStyle: false })] }),
     {
       name: 'rawmark-pwa',
       apply: 'build',
       enforce: 'post',
       generateBundle(_options, bundle) {
         // 只统计应用内可选字体；Maple 与 KaTeX 不在 fonts.css 内。
-        const fontCSS = readFileSync(new URL('./src/themes/fonts.css', import.meta.url), 'utf8')
+        const fontCSS = readFileSync(new URL('./src/common/appearance/fonts.css', import.meta.url), 'utf8')
         const fontPaths = new Set([...fontCSS.matchAll(/url\(['"]?(\.?\/?fonts\/[^)'"]+)/g)].map(match => match[1]!))
-        const size = [...fontPaths].reduce((total, path) => total + readFileSync(new URL('./src/themes/' + path, import.meta.url)).byteLength, 0)
+        const size = [...fontPaths].reduce((total, path) => total + readFileSync(new URL(`./src/common/appearance/${path}`, import.meta.url)).byteLength, 0)
         const manifest = JSON.stringify({ optionalFontsSize: size })
         this.emitFile({ type: 'asset', fileName: 'font-storage.json', source: manifest })
 
         // 缓存列表由产物生成，覆盖懒加载资源，旧页面更新后仍能加载其依赖。
-        const files = Object.keys(bundle).filter((name) => name === 'index.html' || name.startsWith('assets/')).sort()
+        const files = Object.keys(bundle).filter(name => name === 'index.html' || name.startsWith('assets/')).sort()
         const version = createHash('sha256')
         for (const name of files) {
           const item = bundle[name]!
           version.update(name).update(item.type === 'chunk' ? item.code : item.source)
         }
         for (const name of ['manifest.webmanifest', 'icon.svg', 'icons/icon-192.png', 'icons/icon-512.png', 'icons/maskable-512.png', 'icons/apple-touch-icon.png']) {
-          version.update(readFileSync(new URL('./public/' + name, import.meta.url)))
+          version.update(readFileSync(new URL(`./public/${name}`, import.meta.url)))
           files.push(name)
         }
         version.update(manifest)
@@ -38,7 +47,7 @@ export default defineConfig({
         entry.source = entry.source.replace('</head>', `<meta name="rawmark-version" content="${buildVersion}" />\n  </head>`)
         const source = readFileSync(new URL('./src/service-worker.js', import.meta.url), 'utf8')
           .replace('__VERSION__', buildVersion)
-          .replace('__PRECACHE__', JSON.stringify(files.map((name) => '/' + name)))
+          .replace('__PRECACHE__', JSON.stringify(files.map(name => `/${name}`)))
         this.emitFile({ type: 'asset', fileName: 'sw.js', source })
       },
     },