From 845e3b08292a72cef25894f0763b5405c4ddd572 Mon Sep 17 00:00:00 2001
From: daoif <46199660+daoif@users.noreply.github.com>
Date: Thu, 5 May 2022 04:19:20 +0800
Subject: [PATCH] Make TS template in wails beta 35 can be built and run
 normally (#31)

* Make TS template in wails beta 35 can be built and run normally

* Make TS template in wails beta 35 can be built and run normally2
---
 frontend/packages/typescript/package.json     |  7 +++--
 frontend/packages/typescript/src/App.vue      | 26 ++++++++++++-------
 .../src/components/public/OpenLink.vue        |  3 ++-
 wails.tmpl.json                               |  3 +--
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/frontend/packages/typescript/package.json b/frontend/packages/typescript/package.json
index 5a2600f..9e66b98 100644
--- a/frontend/packages/typescript/package.json
+++ b/frontend/packages/typescript/package.json
@@ -1,11 +1,10 @@
 {
   "name": "ts",
+  "private": true,
   "version": "0.1.0",
   "scripts": {
     "dev": "vite",
-    "build:finally": "vue-tsc --noEmit && vite build  --emptyOutDir",
-    "build:dev": "vite build --mode development --emptyOutDir",
-    "build:dev:watch": "vite build --mode development --watch --emptyOutDir",
+    "build":"vite build",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -15,7 +14,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.1",
     "sass": "^1.49.9",
-    "typescript": "^4.4.4",
+    "typescript": "^4.5.4",
     "vite": "^2.9.2",
     "vue-tsc": "^0.28.10",
     "vite-plugin-html": "^3.2.0"
diff --git a/frontend/packages/typescript/src/App.vue b/frontend/packages/typescript/src/App.vue
index 76555fd..be2d648 100644
--- a/frontend/packages/typescript/src/App.vue
+++ b/frontend/packages/typescript/src/App.vue
@@ -12,13 +12,8 @@
     <!-- 菜单 -->
     <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"
-        >
+        <div v-for="item in languages" :key="item" :class="{ active: item === locale }"
+          @click="onclickLanguageHandle(item)" class="lang-item">
           {{ t("languages." + item) }}
         </div>
       </div>
@@ -40,6 +35,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
+import { WindowMinimise, Quit } from "../../../wailsjs/runtime";
 
 export default defineComponent({
   setup() {
@@ -55,10 +51,10 @@ export default defineComponent({
     };
 
     const onclickMinimise = () => {
-      window.runtime.WindowMinimise();
+      WindowMinimise();
     };
     const onclickQuit = () => {
-      window.runtime.Quit();
+      Quit();
     };
 
     return {
@@ -81,6 +77,7 @@ html {
   width: 100%;
   height: 100%;
 }
+
 body {
   width: 100%;
   height: 100%;
@@ -98,6 +95,7 @@ body {
   background-color: rgba(219, 188, 239, 0.9);
   overflow: hidden;
 }
+
 .header {
   display: flex;
   flex-direction: row;
@@ -107,6 +105,7 @@ body {
   height: 50px;
   padding: 0 10px;
   background-color: rgba(171, 126, 220, 0.9);
+
   .nav {
     a {
       display: inline-block;
@@ -122,6 +121,7 @@ body {
       color: #000000;
       font-size: 14px;
       white-space: nowrap;
+
       &:hover,
       &.router-link-exact-active {
         background-color: #d7a8d8;
@@ -129,17 +129,20 @@ body {
       }
     }
   }
+
   .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;
@@ -151,10 +154,12 @@ body {
         text-decoration: none;
         color: #000000;
         font-size: 14px;
+
         &:hover {
           background-color: #ff050542;
           cursor: pointer;
         }
+
         &.active {
           background-color: #ff050542;
           color: #ffffff;
@@ -162,6 +167,7 @@ body {
         }
       }
     }
+
     .bar {
       display: flex;
       flex-direction: row;
@@ -169,6 +175,7 @@ body {
       align-items: center;
       justify-content: flex-end;
       min-width: 150px;
+
       .bar-btn {
         display: inline-block;
         min-width: 80px;
@@ -182,6 +189,7 @@ body {
         text-decoration: none;
         color: #000000;
         font-size: 14px;
+
         &:hover {
           background-color: #d7a8d8;
           color: #ffffff;
diff --git a/frontend/packages/typescript/src/components/public/OpenLink.vue b/frontend/packages/typescript/src/components/public/OpenLink.vue
index e015476..73c6836 100644
--- a/frontend/packages/typescript/src/components/public/OpenLink.vue
+++ b/frontend/packages/typescript/src/components/public/OpenLink.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { BrowserOpenURL } from "../../../../../wailsjs/runtime";
 export default defineComponent({
   name: "OpenLink",
   props: {
@@ -16,7 +17,7 @@ export default defineComponent({
       // 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);
+      BrowserOpenURL(props.href);
     };
 
     return {
diff --git a/wails.tmpl.json b/wails.tmpl.json
index 8dbaf6f..faca8cd 100644
--- a/wails.tmpl.json
+++ b/wails.tmpl.json
@@ -4,8 +4,7 @@
   "assetdir": "frontend/dist",
   "frontend:install": "npm install",
   "frontend:build": "npm run build -w js",
-  "frontend:dev": "npm run build:dev -w js",
-  "frontend:dev:watcher": "npm run build:dev:watch -w js",
+  "frontend:dev:watcher": "npm run dev -w js",
   "debounceMS": 1200,
   "author": {
     "name": "{{.AuthorName}}",