feat(client): initialize i18n support

packages/client/app/index.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import client, { connect, Context, Dict, global, root, router } from '@koishijs/client'
+import client, { connect, Context, Dict, global, i18n, root, router } from '@koishijs/client'
 import App from './layouts/index.vue'
 import Home from './pages/home.vue'
 import Settings from './pages/settings.vue'
@@ -17,6 +17,8 @@ declare module '@koishijs/plugin-console' {
 const app = createApp(App)
 
 app.use(client)
+app.use(i18n)
+app.use(router)
 
 app.provide('ecTheme', 'dark-blue')
 
@@ -44,8 +46,6 @@ root.slot({
   component: Progress,
 })
 
-app.use(router)
-
 app.mount('#app')
 
 if (!global.static) {

packages/client/app/pages/settings.vue

@@ -8,22 +8,24 @@
 
 <script lang="ts" setup>
 
-import { Schema } from '@koishijs/client'
+import { i18n, Schema } from '@koishijs/client'
 import { useDark } from '@vueuse/core'
 import { computed } from 'vue'
 
 const isDark = useDark()
 
 const schema = Schema.object({
   isDark: Schema.boolean().description('暗色模式。'),
+  locale: Schema.union(['zh-CN', 'en-US']).hidden().description('语言设置。'),
 }).description('外观设置')
 
 const config = computed({
   get() {
-    return { isDark: isDark.value }
+    return { isDark: isDark.value, locale: i18n.global.locale.value }
   },
   set(value) {
     isDark.value = value?.isDark
+    i18n.global.locale.value = value?.locale
   },
 })
 

packages/client/app/pages/welcome.en-US.yml

@@ -0,0 +1,9 @@
+title: Welcome to Koishi！
+description: Your chatbot is ready to go. 点击下面的任一选项，开启你的 Koishi 之旅吧。
+action:
+  docs:
+    title: Documentation
+    description: The official documentation contains everything you want to know.
+  forum:
+    title: Forum
+    description: If you run into problems, you can always ask for help on the forum.

packages/client/app/pages/welcome.vue

@@ -1,20 +1,44 @@
 <template>
   <div class="k-card welcome">
-    <h1>欢迎使用 Koishi！</h1>
-    <p>你的机器人已经准备就绪。点击下面的任一选项，开启你的 Koishi 之旅吧。</p>
+    <h1>{{ t('title') }}</h1>
+    <p>{{ t('description') }}</p>
     <k-slot name="welcome-choice" class="choices">
       <a class="choice" href="https://koishi.chat" rel="noopener noreferer" target="_blank">
-        <h2>阅读文档</h2>
-        <p>开始阅读官方文档。官方文档里包含了你想要了解的全部内容。</p>
+        <h2>{{ t('action.docs.title') }}</h2>
+        <p>{{ t('action.docs.description') }}</p>
       </a>
       <a class="choice" href="https://k.ilharp.cc" rel="noopener noreferer" target="_blank">
-        <h2>前往论坛</h2>
-        <p>前往论坛与其他用户交流。如果你遇到了问题，可以在这里寻求帮助。</p>
+        <h2>{{ t('action.forum.title') }}</h2>
+        <p>{{ t('action.forum.description') }}</p>
       </a>
     </k-slot>
   </div>
 </template>
 
+<script lang="ts" setup>
+
+import { useI18n } from 'vue-i18n'
+import zhCN from './welcome.zh-CN.yml'
+import enUS from './welcome.en-US.yml'
+
+const { t, setLocaleMessage } = useI18n({
+  messages: {
+    'zh-CN': zhCN,
+    'en-US': enUS,
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept('./welcome.zh-CN.yml', (module) => {
+    setLocaleMessage('zh-CN', module.default)
+  })
+  import.meta.hot.accept('./welcome.en-US.yml', (module) => {
+    setLocaleMessage('en-US', module.default)
+  })
+}
+
+</script>
+
 <style lang="scss">
 
 .page-home .welcome {

packages/client/app/pages/welcome.zh-CN.yml

@@ -0,0 +1,9 @@
+title: 欢迎使用 Koishi！
+description: 你的机器人已经准备就绪。点击下面的任一选项，开启你的 Koishi 之旅吧。
+action:
+  docs:
+    title: 阅读文档
+    description: 开始阅读官方文档。官方文档里包含了你想要了解的全部内容。
+  forum:
+    title: 前往论坛
+    description: 前往论坛与其他用户交流。如果你遇到了问题，可以在这里寻求帮助。

packages/client/client/index.ts

@@ -6,6 +6,7 @@ import install, { isNullable } from './components'
 import Overlay from './components/chat/overlay.vue'
 import { initTask } from './loader'
 import { Context } from './context'
+import { createI18n } from 'vue-i18n'
 
 import './styles/index.scss'
 
@@ -23,6 +24,12 @@ export const router = createRouter({
   routes: [],
 })
 
+export const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-CN',
+  fallbackLocale: 'zh-CN',
+})
+
 export const root = new Context()
 
 root.slot({

packages/client/global.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="vue-i18n" />
 /// <reference types="vite/client" />
 /// <reference types="element-plus/global" />
 
@@ -7,3 +8,13 @@ declare module '*.vue' {
   const component: Component
   export default component
 }
+
+declare module '*.yaml' {
+  const content: {}
+  export default content
+}
+
+declare module '*.yml' {
+  const content: {}
+  export default content
+}

packages/client/package.json

@@ -36,6 +36,7 @@
   ],
   "dependencies": {
     "@koishijs/components": "1.0.6",
+    "@maikolib/vite-plugin-yaml": "^1.0.1",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vueuse/core": "^10.1.2",
     "cac": "^6.7.14",
@@ -47,6 +48,7 @@
     "sass": "^1.62.0",
     "vite": "^4.3.1",
     "vue": "^3.2.47",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"
   },
   "yakumo": {

packages/client/src/index.ts

@@ -2,6 +2,7 @@ import { build, InlineConfig, mergeConfig, transformWithEsbuild, UserConfig } fr
 import { RollupOutput } from 'rollup'
 import { existsSync, promises as fsp } from 'fs'
 import vue from '@vitejs/plugin-vue'
+import yaml from '@maikolib/vite-plugin-yaml'
 
 export async function buildExtension(root: string, config: UserConfig = {}) {
   if (!existsSync(root + '/client')) return
@@ -41,7 +42,10 @@ export async function buildExtension(root: string, config: UserConfig = {}) {
         },
       },
     },
-    plugins: [vue()],
+    plugins: [
+      vue(),
+      yaml(),
+    ],
     resolve: {
       alias: {
         'vue': root + '/vue.js',

plugins/console/package.json

@@ -56,6 +56,7 @@
   },
   "devDependencies": {
     "@koishijs/client": "^5.7.7",
+    "@maikolib/vite-plugin-yaml": "^1.0.1",
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^4.1.0",
     "vite": "^4.3.1"

plugins/console/src/node/index.ts

@@ -140,6 +140,7 @@ class NodeConsole extends Console {
     const { cacheDir } = this.config
     const { createServer } = require('vite') as typeof import('vite')
     const { default: vue } = require('@vitejs/plugin-vue') as typeof import('@vitejs/plugin-vue')
+    const { default: yaml } = require('@maikolib/vite-plugin-yaml') as typeof import('@maikolib/vite-plugin-yaml')
 
     this.vite = await createServer({
       root: this.root,
@@ -151,7 +152,10 @@ class NodeConsole extends Console {
           strict: false,
         },
       },
-      plugins: [vue()],
+      plugins: [
+        vue(),
+        yaml(),
+      ],
       resolve: {
         dedupe: ['vue', 'vue-demi', 'vue-router', 'element-plus', '@vueuse/core', '@popperjs/core', 'marked', 'xss'],
         alias: {