fix: bugs

apps/app/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "frontend:dev": "vite",
     "frontend:build": "vue-tsc --noEmit && vite build",
+    "frontend:preview": "vite preview",
     "tauri": "tauri",
     "build": "tauri build",
     "dev": "tauri dev",
@@ -21,7 +22,6 @@
     "element-plus": "^2.8.4",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
-    "vue-i18n": "^11.0.1",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

apps/app/src/App.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import Layout from "@repo/commons/src/Layout.vue";
 import { layout } from "./router.ts";
-import { useLocale } from "@repo/commons/src/utils/uses";
-import { useI18n } from "vue-i18n";
 import WindowButton from "./components/WindowButton.vue";
+import { useI18n } from "vue-i18n";
+import { useLocale } from "@repo/commons/src/utils/uses";
 
-useLocale().injectComposer(useI18n());
+useLocale().injectI18n(useI18n());
 </script>
 
 <template>

apps/app/src/main.ts

@@ -9,34 +9,38 @@ import { createI18n } from "vue-i18n";
 import { useLocale } from "@repo/commons/src/utils/uses";
 import { type } from "@tauri-apps/plugin-os";
 
-const app = createApp(App);
-app.use(router);
-app.use(ElementPlus);
-app.use(createPinia());
-
 (async () => {
+  const app = createApp(App);
+  app.use(router);
+  app.use(ElementPlus);
+  const pinia = createPinia();
+  app.use(pinia);
+
   const messages: any = {};
-  const localeStore = useLocale();
+  const localeStore = useLocale(pinia);
   for (const locale of localeStore.locales) {
     messages[locale] = (await import(`./assets/i18n/${locale}.json`)).default;
   }
   const i18n = createI18n(await useLocale().getConfig(messages));
 
   return {
+    app,
     i18n,
   };
-})().then(async ({ i18n }) => {
+})().then(async ({ app, i18n }) => {
   app.use(i18n);
   setRouter(router);
   app.mount("#app");
-  const os = type();
-  if (os == "macos") {
-    document.body.classList.add("tauri-macos");
-  } else if (os == "windows" || os == "linux") {
-    document.body.classList.add("tauri-desktop");
-  } else {
-    document.body.classList.add("tauri-mobile");
-  }
-  if (!agreedEula.value) await router.push("/welcome/welcome");
-  await loadApp();
+  await loadApp(async (loadingInfo) => {
+    loadingInfo.setMessage("loading.default");
+    const os = type();
+    if (os == "macos") {
+      document.body.classList.add("tauri-macos");
+    } else if (os == "windows" || os == "linux") {
+      document.body.classList.add("tauri-desktop");
+    } else {
+      document.body.classList.add("tauri-mobile");
+    }
+    if (!agreedEula.value) await router.push("/welcome/welcome");
+  });
 });

apps/app/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
-// @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/
@@ -29,4 +28,7 @@ export default defineConfig(async () => ({
       ignored: ["**/src-tauri/**"],
     },
   },
+  build: {
+    minify: false,
+  },
 }));

apps/web/app.vue

@@ -22,7 +22,7 @@ useHead({
 });
 
 // 加载
-useLocale().injectComposer(useI18n());
+useLocale().injectI18n(useI18n());
 loadApp(async (loadingInfo) => {
   loadingInfo.setMessage("loading.default");
   setRouter(useRouter());

package.json

@@ -7,17 +7,19 @@
     "app:dev": "turbo run dev --filter=mcsl-future-tauri",
     "app:fix": "turbo run fix --filter=mcsl-future-tauri",
     "app:lint": "turbo run lint --filter=mcsl-future-tauri",
-    "docs:build": "turbo run build --filter=mcsl-future-docs",
-    "docs:dev": "turbo run dev --filter=mcsl-future-docs",
+    "app:test": "turbo run test --filter=mcsl-future-tauri",
     "daemon:build": "turbo run build --filter=mcsl-future-daemon-rs",
     "daemon:dev": "turbo run dev --filter=mcsl-future-daemon-rs",
+    "daemon:test": "turbo run test --filter=mcsl-future-daemon-rs",
     "web:build": "turbo run build --filter=mcsl-future-web",
     "web:dev": "turbo run dev --filter=mcsl-future-web",
     "web:fix": "turbo run fix --filter=mcsl-future-web",
     "web:lint": "turbo run lint --filter=mcsl-future-web",
+    "web:test": "turbo run test --filter=mcsl-future-web",
     "build": "turbo run build --continue",
     "lint": "turbo run lint --continue",
-    "fix": "turbo run fix --continue"
+    "fix": "turbo run fix --continue",
+    "test": "turbo run test --continue"
   },
   "devDependencies": {
     "prettier": "^3.2.5",

packages/commons/src/components/LoadingOverlay.vue

@@ -2,6 +2,9 @@
 import FancyBackground from "./FancyBackground.vue";
 import { canHideOverlay, mcslLoadingInfo } from "../utils/loader";
 import { getLogoSrc } from "../utils/common";
+import { useI18n } from "vue-i18n";
+
+const i18n = useI18n();
 </script>
 
 <template>
@@ -11,8 +14,8 @@ import { getLogoSrc } from "../utils/common";
       <FancyBackground light="5" />
       <img :src="getLogoSrc()" alt="" />
       <h1>
-        {{ $t("app.name") }}
-        <span>{{ $t("app.name.future") }}</span>
+        {{ i18n.t("app.name") }}
+        <span>{{ i18n.t("app.name.future") }}</span>
       </h1>
       <div>
         <div v-loading="true" class="loading-overlay__loading-icon" />

packages/commons/src/components/sidebar/Sidebar.vue

@@ -7,6 +7,8 @@ import { useScreenWidth } from "../../utils/uses";
 import { tasks, TaskStatus } from "../../utils/tasks";
 import SidebarLogo from "./SidebarLogo.vue";
 import { router } from "../../utils/globals";
+import { useLocalStorage } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
 
 defineProps({
   isInDrawer: {
@@ -17,6 +19,7 @@ defineProps({
   },
 });
 
+const i18n = useI18n();
 const showNewInstance = ref(false); // 新建实例对话框
 const showTasks = ref(false); // 任务对话框
 const isCollapsed = useLocalStorage("sidebar-collapsed", false); // 侧边栏是否折叠
@@ -47,7 +50,7 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
             }"
             @click="router.push('/')"
           >
-            <i class="fa fa-home" /><span>{{ $t("sidebar.home") }}</span>
+            <i class="fa fa-home" /><span>{{ i18n.t("sidebar.home") }}</span>
           </ElButton>
 
           <ElButton
@@ -58,7 +61,9 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
             }"
             @click="router.push('/instances')"
           >
-            <i class="fa fa-server" /><span>{{ $t("sidebar.instances") }}</span>
+            <i class="fa fa-server" /><span>{{
+              i18n.t("sidebar.instances")
+            }}</span>
           </ElButton>
 
           <ElButton
@@ -69,7 +74,9 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
             }"
             @click="router.push('/news')"
           >
-            <i class="fa fa-newspaper" /><span>{{ $t("sidebar.news") }}</span>
+            <i class="fa fa-newspaper" /><span>{{
+              i18n.t("sidebar.news")
+            }}</span>
           </ElButton>
 
           <ElButton
@@ -82,7 +89,7 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
             @click="router.push('/help-center')"
           >
             <i class="fa fa-question" /><span>{{
-              $t("sidebar.help-center")
+              i18n.t("sidebar.help-center")
             }}</span>
           </ElButton>
 
@@ -105,7 +112,9 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
             class="sidebar__menu-item-primary sidebar__menu-item"
             @click="showNewInstance = true"
           >
-            <i class="fa fa-plus" /><span>{{ $t("sidebar.newInstance") }}</span>
+            <i class="fa fa-plus" /><span>{{
+              i18n.t("sidebar.newInstance")
+            }}</span>
           </ElButton>
           <!-- 新建实例对话框 -->
           <NewInstance v-model="showNewInstance" />
@@ -124,7 +133,9 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
               class="sidebar__menu-item-secondary sidebar__menu-item"
               @click="showTasks = true"
             >
-              <i class="fa fa-tasks" /><span>{{ $t("sidebar.tasks") }}</span>
+              <i class="fa fa-tasks" /><span>{{
+                i18n.t("sidebar.tasks")
+              }}</span>
             </ElButton>
           </ElBadge>
           <!-- 任务对话框 -->
@@ -139,7 +150,9 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
               }"
               @mouseenter="expandedButtonIndex = 0"
             >
-              <i class="fa fa-cloud" /><span>{{ $t("sidebar.daemon") }}</span>
+              <i class="fa fa-cloud" /><span>{{
+                i18n.t("sidebar.daemon")
+              }}</span>
             </ElButton>
 
             <ElButton
@@ -152,7 +165,9 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
               @mouseenter="expandedButtonIndex = 1"
               @click="router.push('/settings')"
             >
-              <i class="fa fa-gear" /><span>{{ $t("sidebar.settings") }}</span>
+              <i class="fa fa-gear" /><span>{{
+                i18n.t("sidebar.settings")
+              }}</span>
             </ElButton>
 
             <!-- 折叠侧边栏按钮，仅大屏模式下显示 -->
@@ -165,7 +180,7 @@ const expandedButtonIndex = ref(0); // 当前展开的底部按钮索引
               @mouseenter="expandedButtonIndex = 2"
             >
               <i class="fa fa-angle-left" /><span>{{
-                $t("sidebar.collapse")
+                i18n.t("sidebar.collapse")
               }}</span>
             </ElButton>
           </div>

packages/commons/src/components/sidebar/SidebarLogo.vue

@@ -1,14 +1,17 @@
 <!-- 侧边栏标题，手机抽屉模式下将会单独放置在抽屉标题部分 -->
 <script setup lang="ts">
 import { getLogoSrc } from "../../utils/common.js";
+import { useI18n } from "vue-i18n";
+
+const i18n = useI18n();
 </script>
 
 <template>
   <div class="sidebar__logo-container">
     <ElImage :src="getLogoSrc()" alt="" />
     <p>
-      {{ $t("app.name.abbr") }}
-      <span>{{ $t("app.name.future") }}</span>
+      {{ i18n.t("app.name.abbr") }}
+      <span>{{ i18n.t("app.name.future") }}</span>
     </p>
   </div>
 </template>

packages/commons/src/components/sidebar/TasksDialog.vue

@@ -1,6 +1,9 @@
 <!-- 任务对话框 TODO: 完善任务机制 -->
 <script lang="ts" setup>
 import { ProgressTask, SimpleTask, tasks, TaskStatus } from "../../utils/tasks";
+import { useI18n } from "vue-i18n";
+
+const i18n = useI18n();
 
 const visible = defineModel({
   type: Boolean,
@@ -22,20 +25,20 @@ function getTaskStatus(task: SimpleTask) {
 <template>
   <ElDialog
     v-model="visible"
-    :title="$t('sidebar.tasks')"
+    :title="i18n.t('sidebar.tasks')"
     width="600px"
     @close="visible = false"
   >
-    <ElEmpty v-if="tasks.length === 0" :description="$t('tasks.empty')" />
+    <ElEmpty v-if="tasks.length === 0" :description="i18n.t('tasks.empty')" />
     <ElScrollbar v-else class="task-dialog__scrollbar" height="500px">
       <ElCard v-for="task in tasks" :key="task.id" class="task-dialog__card">
         <h3>{{ task.name }}</h3>
         <h4>{{ task.desc }}</h4>
-        <sup>{{ $t("tasks.id") + task.id }}</sup>
+        <sup>{{ i18n.t("tasks.id") + task.id }}</sup>
         <p class="status">
-          {{ $t("tasks.status") }}
+          {{ i18n.t("tasks.status") }}
           <span :class="['task-dialog__status-' + task.status]">
-            {{ $t("tasks.status." + task.status) }}
+            {{ i18n.t("tasks.status." + task.status) }}
           </span>
         </p>
         <ElProgress

packages/commons/src/pages/Debug.vue

@@ -5,7 +5,8 @@ import Page from "../components/page/Page.vue";
 
 const locale = ref(useLocale().localeStorage);
 const locales: Ref<{ label: string; value: string }[]> = ref([]);
-const messages = useLocale().getMessages()(async () => {
+const messages = useLocale().getMessages();
+(async () => {
   for (const locale in messages) {
     const message = messages[locale].default;
     locales.value.push({