feat: initially complete typescript support

frontend/TS/package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build  --emptyOutDir",
+    "build:finally": "vue-tsc --noEmit && vite build  --emptyOutDir",
+    "build": "vite build  --emptyOutDir",
     "build:watch": "vue-tsc --noEmit && vite build --watch  --emptyOutDir",
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.23"
+    "vue": "^3.2.23",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.10.2",

frontend/TS/src/App.vue

@@ -1,21 +1,212 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
+  <!-- Header -->
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <!-- 头部 -->
+  <div class="header" data-wails-drag>
+    <!-- navigation -->
+    <!-- 导航 -->
+    <div class="nav" data-wails-no-drag>
+      <router-link to="/">{{ "Home" }}</router-link>
+      <router-link to="/about">{{ "About" }}</router-link>
+    </div>
+    <!-- Menu -->
+    <!-- 菜单 -->
+    <div class="menu" data-wails-no-drag>
+      <!-- <div class="language">
+        <div
+          v-for="item in languages"
+          :key="item"
+          :class="{ active: item === locale }"
+          @click="onclickLanguageHandle(item)"
+          class="lang-item"
+        >
+          {{ $t("languages." + item) }}
+        </div>
+      </div> -->
+      <div class="bar">
+        <div class="bar-btn" @click="onclickMinimise">
+          {{ "Minimise" }}
+        </div>
+        <div class="bar-btn" @click="onclickQuit">{{ "Quit" }}</div>
+      </div>
+    </div>
+  </div>
+  <!-- Page -->
+  <!-- 页面 -->
+  <div class="view">
+    <router-view />
+  </div>
 </template>
 
-<style>
+<script lang="ts">
+import { ref, watch } from "vue";
+// import i18n from "@/i18n";
+
+export default {
+  setup() {
+    // List of supported languages
+    // 支持的语言列表
+    // const languages = i18n.global.availableLocales;
+    // Current language
+    // 当前语言
+    // const locale = ref("zh-Hans");
+    // locale.value = i18n.global.locale;
+
+    // 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();
+    };
+    const onclickQuit = () => {
+      window.runtime.Quit();
+    };
+
+    return {
+      // languages,
+      // locale,
+      // onclickLanguageHandle,
+      onclickMinimise,
+      onclickQuit,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import url("./assets/css/reset.css");
+@import url("./assets/css/font.css");
+
+html {
+  width: 100%;
+  height: 100%;
+}
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: "JetBrainsMono";
+  background-color: transparent;
+}
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  position: relative;
-  -webkit-font-smoothing: antialiased;
+  // width: 900px;
-  -moz-osx-font-smoothing: grayscale;
+  // height: 520px;
-  text-align: center;
+  height: 100%;
-  color: #2c3e50;
+  margin-right: 1px;
-  margin-top: 60px;
+  border-radius: 6px;
+  background-color: rgba(219,188,239,.9);
+  overflow: hidden;
+}
+.header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  padding: 0 10px;
+  background-color: rgba(171,126,220,.9);
+  .nav {
+    a {
+      display: inline-block;
+      min-width: 50px;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 5px;
+      margin-right: 8px;
+      background-color: #ab7edc;
+      border-radius: 2px;
+      text-align: center;
+      text-decoration: none;
+      color: #000000;
+      font-size: 14px;
+      white-space: nowrap;
+      &:hover,
+      &.router-link-exact-active {
+        background-color: #d7a8d8;
+        color: #ffffff;
+      }
+    }
+  }
+  .menu {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    .language {
+      margin-right: 20px;
+      border-radius: 2px;
+      background-color: #c3c3c3;
+      overflow: hidden;
+      .lang-item {
+        display: inline-block;
+        min-width: 50px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 5px;
+        background-color: transparent;
+        text-align: center;
+        text-decoration: none;
+        color: #000000;
+        font-size: 14px;
+        &:hover {
+          background-color: #ff050542;
+          cursor: pointer;
+        }
+        &.active {
+          background-color: #ff050542;
+          color: #ffffff;
+          cursor: not-allowed;
+        }
+      }
+    }
+    .bar {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      min-width: 150px;
+      .bar-btn {
+        display: inline-block;
+        min-width: 80px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 5px;
+        margin-left: 8px;
+        background-color: #ab7edc;
+        border-radius: 2px;
+        text-align: center;
+        text-decoration: none;
+        color: #000000;
+        font-size: 14px;
+        &:hover {
+          background-color: #d7a8d8;
+          color: #ffffff;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+.view {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
 }
 </style>

frontend/TS/src/assets/css/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "JetBrainsMono";
+  src: url("../fonts/JetBrainsMono-Medium.woff2");
+}

frontend/TS/src/assets/css/reset.css

@@ -0,0 +1,124 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

frontend/TS/src/components/HelloWorld.vue

@@ -1,52 +1,23 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
 <template>
-  <h1>{{ msg }}</h1>
+  <div class="hello-world" v-text="msg"></div>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
 </template>
 
+<script lang="ts">
+export default {
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-a {
+.hello-world {
-  color: #42b983;
+  height: 76px;
-}
+  line-height: 38px;
-
+  margin: 16px 150px;
-label {
+  text-align: center;
-  margin: 0 0.5em;
+  font-size: 26px;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
 }
 </style>

frontend/TS/src/components/public/OpenLink.vue

@@ -0,0 +1,34 @@
+<template>
+  <span class="openlink" @click="onClickhandle">
+    <slot></slot>
+  </span>
+</template>
+
+<script lang="ts">
+// import i18n from "@/i18n";
+export default {
+  name: "OpenLink",
+  props: {
+    href: String,
+  },
+  setup(props) {
+    const onClickhandle = () => {
+      // You cannot use the a tag directly, you need to call the Go method here to open the link using the default browser.
+      // 不能直接使用a标签，需要在这里调用Go方法以使用默认浏览器打开链接。
+
+      window.runtime.BrowserOpenURL(props.href);
+    };
+
+    return {
+      onClickhandle,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.openlink {
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>

frontend/TS/src/components/public/index.ts

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

frontend/TS/src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from "@/router";
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

frontend/TS/src/router/index.ts

@@ -0,0 +1,27 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
+import Home from "@/views/Home.vue";
+
+const routes:Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/about",
+    name: "About",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: function () {
+      return import(/* webpackChunkName: "about" */ "../views/About.vue");
+    },
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;

frontend/TS/src/views/About.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="about">
+    <!-- Title -->
+    <div class="title">{{ "Wails Template Vue" }}</div>
+    <!-- Information -->
+    <!-- 信息 -->
+    <div class="content">
+      <div class="comeon">
+        <img :src="comeonGif" alt />
+      </div>
+      <ul class="info">
+        <li class="info-item">
+          <div class="name">{{ "Project Repository" }}</div>
+          <OpenLink
+            class="link"
+            href="https://github.com/misitebao/wails-template-vue"
+            >https://github.com/misitebao/wails-template-vue</OpenLink
+          >
+        </li>
+        <li class="info-item">
+          <div class="name">{{ "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>
+          <OpenLink class="link" href="https://github.com/misitebao">{{
+            "Misitebao"
+          }}</OpenLink>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Thanks -->
+    <!-- 谢语 -->
+    <div class="thank">{{ "Thank you all for your support🙏!" }}</div>
+  </div>
+</template>
+<script lang="ts">
+import comeonGif from "@/assets/images/comeon.gif";
+export default {
+  setup() {
+    return {
+      comeonGif,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.about {
+  .title {
+    margin: 30px auto 10px;
+    font-size: 38px;
+    color: #a150b5;
+    text-align: center;
+  }
+  .content {
+    position: relative;
+    margin: 36px 20px;
+    .comeon {
+      position: absolute;
+      left: 26px;
+      top: 38px;
+      max-width: 66%;
+      img {
+        width: 220px;
+        height: 180px;
+      }
+    }
+    .info {
+      margin: 0 0 0 33%;
+      font-size: 24px;
+      text-align: left;
+      .info-item {
+        margin-bottom: 10px;
+        .name {
+          line-height: 40px;
+          font-size: 28px;
+          color: #6d6363;
+        }
+        .link {
+          line-height: 30px;
+          font-size: 20px;
+          color: #5f6c86;
+        }
+      }
+    }
+  }
+
+  .thank {
+    height: 68px;
+    line-height: 68px;
+    margin: 36px auto;
+    text-align: center;
+    font-size: 40px;
+  }
+}
+</style>

frontend/TS/src/views/Home.vue

@@ -0,0 +1,83 @@
+<template>
+  <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" />
+    <!-- Bottom button -->
+    <!-- 底部按钮 -->
+    <div class="link">
+      <OpenLink
+        href="https://wails.io/docs/gettingstarted/installation"
+        class="btn start"
+        >{{ "Getting Started" }}</OpenLink
+      >
+      <OpenLink
+        href="https://github.com/misitebao/wails-template-vue"
+        class="btn star"
+        >{{ "Star Me" }}</OpenLink
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// @ is an alias to /src
+import HelloWorld from "@/components/HelloWorld.vue";
+
+export default {
+  name: "Home",
+  components: {
+    HelloWorld,
+  },
+  setup() {
+    return {};
+  },
+};
+</script>
+<style lang="scss">
+.home {
+  .logo {
+    display: block;
+    width: 620px;
+    height: 280px;
+    margin: 10px auto 10px;
+  }
+  .link {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    margin: 18px auto;
+    .btn {
+      display: block;
+      width: 150px;
+      height: 50px;
+      line-height: 50px;
+      padding: 0 5px;
+      margin: 0 30px;
+      border-radius: 8px;
+      text-align: center;
+      font-weight: 700;
+      font-size: 16px;
+      white-space: nowrap;
+      text-decoration: none;
+      cursor: pointer;
+      &.start {
+        background-color: #fd0404;
+        color: #ffffff;
+        &:hover {
+          background-color: #ec2e2e;
+        }
+      }
+      &.star {
+        background-color: #ffffff;
+        color: #fd0404;
+        &:hover {
+          background-color: #f3f3f3;
+        }
+      }
+    }
+  }
+}
+</style>

frontend/TS/vite.config.ts

@@ -1,10 +1,23 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
   build: {
-    outDir: "../dist",
+    outDir:"../dist",
+    rollupOptions: {
+      output: {
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`,
+      },
+    },
   },
 });

frontend/index.js.tmpl.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{.ProjectName}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

frontend/index.ts.tmpl.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{.ProjectName}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

frontend/package.tmpl.json

@@ -5,7 +5,7 @@
   "main": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "preinstall": "cp -f index.html JS/index.html &cp -f index.html TS/index.html && rm -rf index.html"
+    "postinstall": "cp -f index.js.html JS/index.html & cp -f index.ts.html TS/index.html && rm -rf *.html"
   },
   "author": "{{.AuthorName}}",
   "license": "ISC",