feat: optimizing typescript templates and internationalization

- Optimized Javascript templates
- Optimized Typescript templates
- Migrated vue-i18n of templates to composition-api

frontend/packages/javascript/src/App.vue

@@ -5,8 +5,8 @@
     <!-- navigation -->
     <!-- 导航 -->
     <div class="nav" data-wails-no-drag>
-      <router-link to="/">{{ $t("nav.home") }}</router-link>
-      <router-link to="/about">{{ $t("nav.about") }}</router-link>
+      <router-link to="/">{{ t("nav.home") }}</router-link>
+      <router-link to="/about">{{ t("nav.about") }}</router-link>
     </div>
     <!-- Menu -->
     <!-- 菜单 -->
@@ -19,14 +19,14 @@
           @click="onclickLanguageHandle(item)"
           class="lang-item"
         >
-          {{ $t("languages." + item) }}
+          {{ t("languages." + item) }}
         </div>
       </div>
       <div class="bar">
         <div class="bar-btn" @click="onclickMinimise">
-          {{ $t("topbar.minimise") }}
+          {{ t("topbar.minimise") }}
         </div>
-        <div class="bar-btn" @click="onclickQuit">{{ $t("topbar.quit") }}</div>
+        <div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
       </div>
     </div>
   </div>
@@ -38,29 +38,21 @@
 </template>
 
 <script>
-import { ref, watch } from "vue";
-import i18n from "@/i18n";
+import { useI18n } from "vue-i18n";
 
 export default {
   setup() {
+    const { t, availableLocales, locale } = useI18n();
+
     // List of supported languages
     // 支持的语言列表
-    const languages = i18n.global.availableLocales;
-    // Current language
-    // 当前语言
-    const locale = ref("zh-Hans");
-    locale.value = i18n.global.locale;
+    const languages = availableLocales;
 
     // Click to switch language
     // 点击切换语言
     const onclickLanguageHandle = (item) => {
       item !== locale.value ? (locale.value = item) : false;
     };
-    // Monitor current language changes
-    // 监听当前语言变动
-    watch(locale, (newValue, oldValue) => {
-      i18n.global.locale = newValue;
-    });
 
     const onclickMinimise = () => {
       window.runtime.WindowMinimise();
@@ -70,6 +62,7 @@ export default {
     };
 
     return {
+      t,
       languages,
       locale,
       onclickLanguageHandle,
@@ -102,7 +95,7 @@ body {
   // width: 900px;
   // height: 520px;
   height: 100%;
-  background-color: rgba(219,188,239,.9);
+  background-color: rgba(219, 188, 239, 0.9);
   overflow: hidden;
 }
 .header {
@@ -113,7 +106,7 @@ body {
   justify-content: space-between;
   height: 50px;
   padding: 0 10px;
-  background-color: rgba(171,126,220,.9);
+  background-color: rgba(171, 126, 220, 0.9);
   .nav {
     a {
       display: inline-block;

frontend/packages/javascript/src/components/public/OpenLink.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import i18n from "@/i18n";
 export default {
   name: "OpenLink",
   props: {

frontend/packages/javascript/src/i18n/index.js

@@ -1,8 +1,8 @@
 import { createI18n } from "vue-i18n";
 
-import zhHans from "./messages/zh-Hans.json";
-import en from "./messages/en.json";
-import fr from "./messages/fr.json";
+import zhHans from "./locales/zh-Hans.json";
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
 
 const i18n = createI18n({
   locale: "en",

frontend/packages/javascript/src/main.js

@@ -7,4 +7,8 @@ import i18n from "@/i18n";
 // 注册全局通用组件
 import publicComponents from "@/components/public";
 
-createApp(App).use(router).use(i18n).use(publicComponents).mount("#app");
+const app = createApp(App);
+
+app.use(publicComponents);
+
+app.use(router).use(i18n).mount("#app");

frontend/packages/javascript/src/views/About.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="about">
     <!-- Title -->
-    <div class="title">{{ $t("aboutpage.title") }}</div>
+    <div class="title">{{ t("aboutpage.title") }}</div>
     <!-- Information -->
     <!-- 信息 -->
     <div class="content">
       <div class="comeon">
-        <img :src="comeonGif" alt />
+        <img :src="comeonGif" alt="Gif" />
       </div>
       <ul class="info">
         <li class="info-item">
-          <div class="name">{{ $t("aboutpage.project-repository") }}</div>
+          <div class="name">{{ t("aboutpage.project-repository") }}</div>
           <OpenLink
             class="link"
             href="https://github.com/misitebao/wails-template-vue"
@@ -18,15 +18,15 @@
           >
         </li>
         <li class="info-item">
-          <div class="name">{{ $t("aboutpage.wails-repository") }}</div>
+          <div class="name">{{ t("aboutpage.wails-repository") }}</div>
           <OpenLink class="link" href="https://github.com/wailsapp/wails"
             >https://github.com/wailsapp/wails</OpenLink
           >
         </li>
         <li class="info-item">
-          <div class="name">{{ $t("aboutpage.author") }}</div>
+          <div class="name">{{ t("aboutpage.author") }}</div>
           <OpenLink class="link" href="https://github.com/misitebao">{{
-            $t("aboutpage.misitebao")
+            t("aboutpage.misitebao")
           }}</OpenLink>
         </li>
       </ul>
@@ -34,14 +34,18 @@
 
     <!-- Thanks -->
     <!-- 谢语 -->
-    <div class="thank">{{ $t("aboutpage.thanks") }}</div>
+    <div class="thank">{{ t("aboutpage.thanks") }}</div>
   </div>
 </template>
 <script>
+import { useI18n } from "vue-i18n";
 import comeonGif from "@/assets/images/comeon.gif";
+
 export default {
   setup() {
+    const { t } = useI18n();
     return {
+      t,
       comeonGif,
     };
   },

frontend/packages/javascript/src/views/Home.vue

@@ -2,26 +2,26 @@
   <div class="home">
     <!-- Logo -->
     <img class="logo" alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld :msg="$t('homepage.welcome')" />
+    <HelloWorld :msg="t('homepage.welcome')" />
     <!-- Bottom button -->
     <!-- 底部按钮 -->
     <div class="link">
       <OpenLink
         href="https://wails.io/docs/gettingstarted/installation"
         class="btn start"
-        >{{ $t("homepage.getting-started") }}</OpenLink
+        >{{ t("homepage.getting-started") }}</OpenLink
       >
       <OpenLink
         href="https://github.com/misitebao/wails-template-vue"
         class="btn star"
-        >{{ $t("homepage.star-me") }}</OpenLink
+        >{{ t("homepage.star-me") }}</OpenLink
       >
     </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
+import { useI18n } from "vue-i18n";
 import HelloWorld from "@/components/HelloWorld.vue";
 
 export default {
@@ -30,7 +30,10 @@ export default {
     HelloWorld,
   },
   setup() {
-    return {};
+    const { t } = useI18n();
+    return {
+      t,
+    };
   },
 };
 </script>

frontend/packages/typescript/src/App.vue

@@ -5,13 +5,13 @@
     <!-- navigation -->
     <!-- 导航 -->
     <div class="nav" data-wails-no-drag>
-      <router-link to="/">{{ "Home" }}</router-link>
-      <router-link to="/about">{{ "About" }}</router-link>
+      <router-link to="/">{{ t("nav.home") }}</router-link>
+      <router-link to="/about">{{ t("nav.about") }}</router-link>
     </div>
     <!-- Menu -->
     <!-- 菜单 -->
     <div class="menu" data-wails-no-drag>
-      <!-- <div class="language">
+      <div class="language">
         <div
           v-for="item in languages"
           :key="item"
@@ -19,14 +19,14 @@
           @click="onclickLanguageHandle(item)"
           class="lang-item"
         >
-          {{ $t("languages." + item) }}
+          {{ t("languages." + item) }}
         </div>
-      </div> -->
+      </div>
       <div class="bar">
         <div class="bar-btn" @click="onclickMinimise">
-          {{ "Minimise" }}
+          {{ t("topbar.minimise") }}
         </div>
-        <div class="bar-btn" @click="onclickQuit">{{ "Quit" }}</div>
+        <div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
       </div>
     </div>
   </div>
@@ -38,29 +38,21 @@
 </template>
 
 <script lang="ts">
-import { ref, watch } from "vue";
-// import i18n from "@/i18n";
+import { defineComponent } from "vue";
+import { useI18n } from "vue-i18n";
 
-export default {
+export default defineComponent({
   setup() {
+    const { t, availableLocales, locale } = useI18n({ useScope: "global" });
     // List of supported languages
     // 支持的语言列表
-    // const languages = i18n.global.availableLocales;
-    // Current language
-    // 当前语言
-    // const locale = ref("zh-Hans");
-    // locale.value = i18n.global.locale;
+    const languages = availableLocales;
 
     // Click to switch language
     // 点击切换语言
-    // const onclickLanguageHandle = (item) => {
-    //   item !== locale.value ? (locale.value = item) : false;
-    // };
-    // Monitor current language changes
-    // 监听当前语言变动
-    // watch(locale, (newValue, oldValue) => {
-    //   i18n.global.locale = newValue;
-    // });
+    const onclickLanguageHandle = (item: string) => {
+      item !== locale.value ? (locale.value = item) : false;
+    };
 
     const onclickMinimise = () => {
       window.runtime.WindowMinimise();
@@ -70,14 +62,15 @@ export default {
     };
 
     return {
-      // languages,
-      // locale,
-      // onclickLanguageHandle,
+      t,
+      languages,
+      locale,
+      onclickLanguageHandle,
       onclickMinimise,
       onclickQuit,
     };
   },
-};
+});
 </script>
 
 <style lang="scss">
@@ -102,7 +95,7 @@ body {
   // width: 900px;
   // height: 520px;
   height: 100%;
-  background-color: rgba(219,188,239,.9);
+  background-color: rgba(219, 188, 239, 0.9);
   overflow: hidden;
 }
 .header {
@@ -113,7 +106,7 @@ body {
   justify-content: space-between;
   height: 50px;
   padding: 0 10px;
-  background-color: rgba(171,126,220,.9);
+  background-color: rgba(171, 126, 220, 0.9);
   .nav {
     a {
       display: inline-block;

frontend/packages/typescript/src/components/HelloWorld.vue

@@ -3,12 +3,14 @@
 </template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "HelloWorld",
   props: {
     msg: String,
   },
-};
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

frontend/packages/typescript/src/components/public/OpenLink.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-// import i18n from "@/i18n";
-export default {
+import { defineComponent } from "vue";
+export default defineComponent({
   name: "OpenLink",
   props: {
     href: String,
@@ -23,7 +23,7 @@ export default {
       onClickhandle,
     };
   },
-};
+});
 </script>
 
 <style lang="scss">

frontend/packages/typescript/src/components/public/index.ts

@@ -1,10 +1,11 @@
+import { App } from "vue";
 import OpenLink from "@/components/public/OpenLink.vue";
 
 // Encapsulate global components as plug-ins
 // 将全局组件封装为插件
 
 export default {
-  install(app) {
+  install(app: App) {
     app.component(OpenLink.name, OpenLink);
   },
 };

frontend/packages/typescript/src/i18n/index.ts

@@ -0,0 +1,17 @@
+import { createI18n } from "vue-i18n";
+
+import zhHans from "./locales/zh-Hans.json";
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+
+const i18n = createI18n({
+  locale: "en",
+  fallbackLocale: "en",
+  messages: {
+    "zh-Hans": zhHans,
+    en: en,
+    fr: fr,
+  },
+});
+
+export default i18n;

frontend/packages/typescript/src/i18n/locales/en.json

@@ -0,0 +1,32 @@
+{
+  "nav": {
+    "home": "Home",
+    "about": "About"
+  },
+  "languages": {
+    "en": "English",
+    "zh-Hans": "简体中文",
+    "fr": "Français"
+  },
+  "topbar": {
+    "minimise": "Minimise",
+    "quit": "Quit"
+  },
+  "homepage": {
+    "welcome": "Welcome to use Wails program developed based on Vue",
+    "getting-started": "Getting Started",
+    "star-me": "Star Me"
+  },
+  "aboutpage": {
+    "title": "Wails Template Vue",
+    "project-repository": "Project Repository",
+    "author": "Author",
+    "misitebao": "Misitebao",
+    "wails-repository": "Wails Repository",
+    "thanks": "Thank you all for your support🙏!"
+  },
+  "global": {
+    "not-supported": "Because it is a beta version, it can't be done for the time being, it will be completed later.",
+    "click-link": "The currently clicked link is: "
+  }
+}

frontend/packages/typescript/src/i18n/locales/fr.json

@@ -0,0 +1,32 @@
+{
+  "nav": {
+    "home": "Page d'accueil",
+    "about": "À propos"
+  },
+  "languages": {
+    "en": "English",
+    "zh-Hans": "简体中文",
+    "fr": "Français"
+  },
+  "topbar": {
+    "minimise": "Minimiser",
+    "quit": "Quitter"
+  },
+  "homepage": {
+    "welcome": "Bienvenue à utiliser le programme Wails développé sur la base de Vue",
+    "getting-started": "Commencer",
+    "star-me": "Étoile moi"
+  },
+  "aboutpage": {
+    "title": "Wails Template Vue",
+    "project-repository": "Référentiel de projets",
+    "author": "Auteur",
+    "misitebao": "Misitebao",
+    "wails-repository": "Wails Dépôt",
+    "thanks": "Merci à tous pour votre soutien🙏!"
+  },
+  "global": {
+    "not-supported": "Parce qu'il s'agit d'une version bêta, cela ne peut pas être fait pour le moment, il sera complété plus tard.",
+    "click-link": "Le lien actuellement cliqué est: "
+  }
+}

frontend/packages/typescript/src/i18n/locales/zh-Hans.json

@@ -0,0 +1,32 @@
+{
+  "nav": {
+    "home": "主页",
+    "about": "关于"
+  },
+  "languages": {
+    "en": "English",
+    "zh-Hans": "简体中文",
+    "fr": "Français"
+  },
+  "topbar": {
+    "minimise": "最小化",
+    "quit": "退出"
+  },
+  "homepage": {
+    "welcome": "欢迎使用基于Vue开发的Wails程序",
+    "getting-started": "新手入门",
+    "star-me": "给我点星"
+  },
+  "aboutpage": {
+    "title": "Wails Template Vue",
+    "project-repository": "项目仓库",
+    "author": "作者",
+    "misitebao": "米司特包",
+    "wails-repository": "Wails 仓库",
+    "thanks": "感谢各位大佬的支持🙏！"
+  },
+  "global": {
+    "not-supported": "由于是测试版，所以暂时做不了，后续会完成它。",
+    "click-link": "当前点击的链接是: "
+  }
+}

frontend/packages/typescript/src/main.ts

@@ -1,5 +1,14 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from "@/router";
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import i18n from "./i18n";
 
-createApp(App).use(router).mount('#app')
+// Register global common components
+// 注册全局通用组件
+import publicComponents from "./components/public/";
+
+const app = createApp(App);
+
+app.use(publicComponents);
+
+app.use(router).use(i18n).mount("#app");

frontend/packages/typescript/src/views/About.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="about">
     <!-- Title -->
-    <div class="title">{{ "Wails Template Vue" }}</div>
+    <div class="title">{{ t("aboutpage.title") }}</div>
     <!-- Information -->
     <!-- 信息 -->
     <div class="content">
       <div class="comeon">
-        <img :src="comeonGif" alt />
+        <img :src="comeonGif" alt="Gif" />
       </div>
       <ul class="info">
         <li class="info-item">
-          <div class="name">{{ "Project Repository" }}</div>
+          <div class="name">{{ t("aboutpage.project-repository") }}</div>
           <OpenLink
             class="link"
             href="https://github.com/misitebao/wails-template-vue"
@@ -18,15 +18,15 @@
           >
         </li>
         <li class="info-item">
-          <div class="name">{{ "Wails Repository" }}</div>
+          <div class="name">{{ t("aboutpage.wails-repository") }}</div>
           <OpenLink class="link" href="https://github.com/wailsapp/wails"
             >https://github.com/wailsapp/wails</OpenLink
           >
         </li>
         <li class="info-item">
-          <div class="name">{{ "Author" }}</div>
+          <div class="name">{{ t("aboutpage.author") }}</div>
           <OpenLink class="link" href="https://github.com/misitebao">{{
-            "Misitebao"
+            t("aboutpage.misitebao")
           }}</OpenLink>
         </li>
       </ul>
@@ -34,18 +34,23 @@
 
     <!-- Thanks -->
     <!-- 谢语 -->
-    <div class="thank">{{ "Thank you all for your support🙏!" }}</div>
+    <div class="thank">{{ t("aboutpage.thanks") }}</div>
   </div>
 </template>
 <script lang="ts">
+import { defineComponent } from "vue";
+import { useI18n } from "vue-i18n";
 import comeonGif from "@/assets/images/comeon.gif";
-export default {
+
+export default defineComponent({
   setup() {
+    const { t } = useI18n({ useScope: "global" });
     return {
+      t,
       comeonGif,
     };
   },
-};
+});
 </script>
 <style lang="scss">
 .about {

frontend/packages/typescript/src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <!-- Logo -->
     <img class="logo" alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to use Wails program developed based on Vue" />
+    <HelloWorld :msg="t('homepage.welcome')" />
     <!-- Bottom button -->
     <!-- 底部按钮 -->
     <div class="link">
@@ -21,18 +21,22 @@
 </template>
 
 <script lang="ts">
-// @ is an alias to /src
+import { defineComponent } from "vue";
+import { useI18n } from "vue-i18n";
 import HelloWorld from "@/components/HelloWorld.vue";
 
-export default {
+export default defineComponent({
   name: "Home",
   components: {
     HelloWorld,
   },
   setup() {
-    return {};
+    const { t } = useI18n({ useScope: "global" });
+    return {
+      t,
+    };
   },
-};
+});
 </script>
 <style lang="scss">
 .home {