feat: update template

frontend/.eslintrc.cjs

@@ -1,15 +1,15 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  extends: [
+  'extends': [
-    "plugin:vue/vue3-essential",
+    'plugin:vue/vue3-essential',
-    "eslint:recommended",
+    'eslint:recommended',
-    "@vue/eslint-config-typescript/recommended",
+    '@vue/eslint-config-typescript',
-    "@vue/eslint-config-prettier",
+    '@vue/eslint-config-prettier'
   ],
   parserOptions: {
-    ecmaVersion: "latest",
+    ecmaVersion: 'latest'
-  },
+  }
-};
+}

frontend/.prettierrc.json

@@ -0,0 +1 @@
+{}

frontend/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

frontend/README.md

@@ -1,4 +1,4 @@
-# vue
+# frontend
 
 This template should help get you started developing with Vue 3 in Vite.
 

frontend/package.tmpl.json

@@ -1,7 +1,6 @@
 {
-  "name": "vue",
+  "name": "{{.ProjectName}}",
   "version": "0.0.0",
-  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
@@ -11,25 +10,26 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "pinia": "^2.0.17",
+    "pinia": "^2.0.21",
-    "vue": "^3.2.37",
+    "vue": "^3.2.38",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.3"
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",
-    "@types/node": "^16.11.47",
+    "@types/node": "^16.11.56",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^3.0.3",
-    "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.21.0",
+    "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
+    "sass": "^1.55.0",
     "typescript": "~4.7.4",
-    "vite": "^3.0.4",
+    "vite": "^3.0.9",
-    "vue-tsc": "^0.39.5"
+    "vue-tsc": "^0.40.7"
   }
 }

frontend/src/App.vue

@@ -1,17 +1,181 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const { t, availableLocales: languages, locale } = useI18n();
+
+const onclickLanguageHandle = (item: string) => {
+  item !== locale.value ? (locale.value = item) : false;
+};
+
+const onclickMinimise = () => {};
+
+const onclickQuit = () => {};
+
+document.body.addEventListener("click", function (event) {
+  event.preventDefault();
+});
 </script>
 
 <template>
-  <header>
+  <!-- Header -->
-    <nav>
+  <div class="header">
-      <RouterLink to="/">Home</RouterLink>
+    <!-- navigation -->
-      <RouterLink to="/about">About</RouterLink>
+    <div class="nav">
-    </nav>
+      <router-link to="/">{{ t("nav.home") }}</router-link>
-  </header>
+      <router-link to="/about">{{ t("nav.about") }}</router-link>
-  <br />
+    </div>
-
+    <!-- Menu -->
-  <RouterView />
+    <div class="menu">
+      <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">
+          {{ t("topbar.minimise") }}
+        </div>
+        <div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
+      </div>
+    </div>
+  </div>
+  <!-- Page -->
+  <div class="view">
+    <router-view />
+  </div>
 </template>
 
-<style scoped></style>
+<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 {
+  position: relative;
+  // width: 900px;
+  // height: 520px;
+  height: 100%;
+  background-color: rgba(219, 188, 239, 0.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, 0.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/src/assets/base.css

@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

frontend/src/assets/css/font.css

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

frontend/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/src/assets/main.css

@@ -1,35 +0,0 @@
-@import "./base.css";
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string;
+}>();
+</script>
+
+<template>
+  <div class="hello-world" v-text="msg"></div>
+</template>
+
+<style scoped>
+.hello-world {
+  height: 76px;
+  line-height: 38px;
+  margin: 16px 150px;
+  text-align: center;
+  font-size: 26px;
+}
+</style>

frontend/src/i18n/index.ts

@@ -1,15 +1,15 @@
 import { createI18n } from "vue-i18n";
 
-import en from "./locales/en.json";
 import zhHans from "./locales/zh-Hans.json";
+import en from "./locales/en.json";
 
 const i18n = createI18n({
-  locale: "ja",
+  locale: "en",
   fallbackLocale: "en",
   legacy: false,
   messages: {
-    en,
     "zh-Hans": zhHans,
+    en: en,
   },
 });
 

frontend/src/i18n/locales/en.json

@@ -1,3 +1,32 @@
 {
-  "hello": "hello world"
+  "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": "Github"
+  },
+  "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/src/i18n/locales/zh-Hans.json

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

frontend/src/main.ts

@@ -3,12 +3,14 @@ import { createPinia } from "pinia";
 
 import App from "./App.vue";
 import router from "./router";
+import i18n from "./i18n";
 
-import "./assets/main.css";
+// import "./assets/main.css";
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
+app.use(i18n);
 
 app.mount("#app");

frontend/src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 
 const router = createRouter({
-  history: createWebHashHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(),
   routes: [
     {
       path: "/",

frontend/src/stores/counter.ts

@@ -1,16 +1,12 @@
+import { ref, computed } from "vue";
 import { defineStore } from "pinia";
 
-export const useCounterStore = defineStore({
+export const useCounterStore = defineStore("counter", () => {
-  id: "counter",
+  const count = ref(0);
-  state: () => ({
+  const doubleCount = computed(() => count.value * 2);
-    counter: 0,
+  function increment() {
-  }),
+    count.value++;
-  getters: {
+  }
-    doubleCount: (state) => state.counter * 2,
+
-  },
+  return { count, doubleCount, increment };
-  actions: {
-    increment() {
-      this.counter++;
-    },
-  },
 });

frontend/src/views/AboutView.vue

@@ -1,5 +1,94 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import comeonGif from "@/assets/images/comeon.gif";
+
+const { t } = useI18n();
+</script>
+
 <template>
-  <div class="about">About</div>
+  <div class="about">
+    <!-- Title -->
+    <div class="title">{{ t("aboutpage.title") }}</div>
+    <!-- Information -->
+    <div class="content">
+      <div class="comeon">
+        <img :src="comeonGif" alt="Gif" />
+      </div>
+      <ul class="info">
+        <li class="info-item">
+          <div class="name">{{ t("aboutpage.project-repository") }}</div>
+          <a class="link" href="https://github.com/misitebao/wails-template-vue"
+            >https://github.com/misitebao/wails-template-vue</a
+          >
+        </li>
+        <li class="info-item">
+          <div class="name">{{ t("aboutpage.wails-repository") }}</div>
+          <a class="link" href="https://github.com/wailsapp/wails"
+            >https://github.com/wailsapp/wails</a
+          >
+        </li>
+        <li class="info-item">
+          <div class="name">{{ t("aboutpage.author") }}</div>
+          <a class="link" href="https://github.com/misitebao">{{
+            t("aboutpage.misitebao")
+          }}</a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Thanks -->
+    <div class="thank">{{ t("aboutpage.thanks") }}</div>
+  </div>
 </template>
 
-<style></style>
+<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/src/views/HomeView.vue

@@ -1,5 +1,76 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import HelloWorld from "@/components/HelloWorld.vue";
+
+const { t } = useI18n();
+</script>
 
 <template>
-  <div class="home">Home</div>
+  <div class="home">
+    <!-- Logo -->
+    <img class="logo" alt="Vue logo" src="../assets/logo.png" />
+    <HelloWorld :msg="t('homepage.welcome')" />
+    <!-- Bottom button -->
+    <div class="link">
+      <a
+        href="https://wails.io/docs/gettingstarted/installation"
+        class="btn start"
+        >{{ t("homepage.getting-started") }}</a
+      >
+      <a
+        href="https://github.com/misitebao/wails-template-vue"
+        class="btn star"
+        >{{ t("homepage.star-me") }}</a
+      >
+    </div>
+  </div>
 </template>
+
+<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/tsconfig.json

@@ -1,18 +1,13 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": [
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-    "env.d.ts",
-    "src/**/*",
-    "src/**/*.vue"
-  ],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": [
+      "@/*": ["./src/*"]
-        "./src/*"
-      ]
     }
   },
+
   "references": [
     {
       "path": "./tsconfig.config.json"

frontend/vite.config.ts

@@ -13,7 +13,6 @@ export default defineConfig({
     },
   },
   build: {
-    outDir: "./dist",
     rollupOptions: {
       output: {
         entryFileNames: `assets/[name].js`,

go.tmpl.mod

@@ -1,6 +1,6 @@
 module changeme
 
-go 1.17
+go 1.18
 
 require github.com/wailsapp/wails/v2 {{.WailsVersion}}