fix(webui): fix routing failed when initiated to extension route

packages/plugin-webui/client/components/message.vue

@@ -21,6 +21,8 @@ defineProps<{
 <style lang="scss" scoped>
 
 .k-message {
+  white-space: break-spaces;
+
   img {
     max-height: 400px;
   }

packages/plugin-webui/client/global.d.ts

@@ -13,7 +13,4 @@ declare module '~/client' {
   export * from 'koishi-plugin-webui/client'
 }
 
-declare const KOISHI_ENDPOINT: string
-declare const KOISHI_TITLE: string
-declare const KOISHI_UI_PATH: string
-declare const KOISHI_DEV_MODE: boolean
+declare const KOISHI_CONFIG: import('~/server').ClientConfig

packages/plugin-webui/client/index.ts

@@ -23,7 +23,7 @@ declare module 'vue-router' {
 }
 
 export const router = createRouter({
-  history: createWebHistory(KOISHI_UI_PATH),
+  history: createWebHistory(KOISHI_CONFIG.uiPath),
   routes: [],
 })
 
@@ -74,7 +74,7 @@ export const socket = ref<WebSocket>(null)
 const listeners: Record<string, (data: any) => void> = {}
 
 export function start() {
-  const endpoint = new URL(KOISHI_ENDPOINT, location.origin).toString()
+  const endpoint = new URL(KOISHI_CONFIG.endpoint, location.origin).toString()
   socket.value = new WebSocket(endpoint.replace(/^http/, 'ws'))
   socket.value.onmessage = (ev) => {
     const data = JSON.parse(ev.data)

packages/plugin-webui/client/main.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-undef */
 
 import { createApp, defineAsyncComponent } from 'vue'
+import { START_LOCATION } from 'vue-router'
 import Card from './components/card.vue'
 import Collapse from './components/collapse.vue'
 import Button from './components/button.vue'
@@ -79,18 +80,25 @@ receive('expire', () => {
   router.push('/login')
 })
 
-router.beforeEach((route) => {
+router.beforeEach((route, from) => {
+  if (from === START_LOCATION) {
+    loadingExtensions.then(() => router.replace(route))
+  }
   if (route.meta.authority && !user.value) {
     return history.state.forward === '/login' ? '/' : '/login'
   }
 })
 
 router.afterEach((route) => {
   if (typeof route.name === 'string') {
-    document.title = `${route.name} | ${KOISHI_TITLE}`
+    document.title = `${route.name} | ${KOISHI_CONFIG.title}`
   }
 })
 
 start()
 
-app.mount('#app')
+const loadingExtensions = Promise.all(KOISHI_CONFIG.extensions.map(path => {
+  return import(/* @vite-ignore */ path)
+}))
+
+loadingExtensions.then(() => app.mount('#app'))

packages/plugin-webui/client/views/sandbox.vue

@@ -52,7 +52,6 @@ receive('sandbox:clear', (data) => {
 .sandbox {
   p {
     padding-left: 1rem;
-    white-space: break-spaces;
     color: rgba(244, 244, 245, .8);
   }
 

packages/plugin-webui/src/server.ts

@@ -1,4 +1,4 @@
-import { Context, noop, snakeCase } from 'koishi-core'
+import { Context, noop } from 'koishi-core'
 import { resolve, extname } from 'path'
 import { promises as fs, Stats, createReadStream } from 'fs'
 import { WebAdapter } from './adapter'
@@ -16,14 +16,15 @@ export interface Config extends WebAdapter.Config, Profile.Config, Meta.Config,
   devMode?: boolean
 }
 
-export namespace WebServer {
-  export interface Global {
-    title: string
-    uiPath: string
-    endpoint: string
-    devMode: boolean
-  }
+export interface ClientConfig {
+  title: string
+  uiPath: string
+  endpoint: string
+  devMode: boolean
+  extensions: string[]
+}
 
+export namespace WebServer {
   export interface Sources extends Record<string, DataSource> {
     meta: Meta
     stats: Statistics
@@ -35,7 +36,6 @@ export namespace WebServer {
 export class WebServer {
   root: string
   adapter: WebAdapter
-  global: WebServer.Global
   sources: WebServer.Sources
   entries: Record<string, string> = {}
 
@@ -44,9 +44,6 @@ export class WebServer {
 
   constructor(private ctx: Context, public config: Config) {
     this.root = resolve(__dirname, '..', config.devMode ? 'client' : 'dist')
-    const { apiPath, uiPath, devMode, selfUrl, title } = config
-    const endpoint = selfUrl + apiPath
-    this.global = { title, uiPath, endpoint, devMode }
     this.sources = {
       profile: new Profile(ctx, config),
       meta: new Meta(ctx, config),
@@ -104,19 +101,15 @@ export class WebServer {
   }
 
   private async transformHtml(template: string) {
-    if (this.vite) {
-      template = await this.vite.transformIndexHtml(this.config.uiPath, template)
-    }
-    const headInjection = '<script>' + Object.entries(this.global).map(([key, value]) => {
-      return `window.KOISHI_${snakeCase(key).toUpperCase()} = ${JSON.stringify(value)};`
-    }).join('\n') + '</script>'
-    const bodyInjection = Object.entries(this.entries).map(([name, filename]) => {
-      const src = this.config.devMode ? '/vite/@fs' + filename : `./assets/${name}`
-      return `<script type="module" src="${src}"></script>`
-    }).join('\n')
-    return template
-      .replace('</title>', '</title>' + headInjection)
-      .replace('</body>', bodyInjection + '</body>')
+    if (this.vite) template = await this.vite.transformIndexHtml(this.config.uiPath, template)
+    const { apiPath, uiPath, devMode, selfUrl, title } = this.config
+    const endpoint = selfUrl + apiPath
+    const extensions = Object.entries(this.entries).map(([name, filename]) => {
+      return this.config.devMode ? '/vite/@fs' + filename : `./${name}`
+    })
+    const global: ClientConfig = { title, uiPath, endpoint, devMode, extensions }
+    const headInjection = `<script>KOISHI_CONFIG = ${JSON.stringify(global)}</script>`
+    return template.replace('</title>', '</title>' + headInjection)
   }
 
   private async createAdapter() {