.github/CHANGELOG.md

@@ -1,62 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [v2.0.0-beta.8] - 2022-05-06
-
-### Added
-
-- Add issue stale bots by [@misitebao](https://github.com/misitebao)
-
-### Changed
-
-- Switch to the form template by [@misitebao](https://github.com/misitebao)
-- Upgrade the front-end development method in dev mode by [@daoif](https://github.com/daoif)
-
-## [v2.0.0-beta.7] - 2022-03-23
-
-### Added
-
-- Optimize the basic template of the front-end project page by [@misitebao](https://github.com/misitebao)
-- `Typescript` templates add internationalization support by [@misitebao](https://github.com/misitebao)
-
-### Changed
-
-- Replaced `Javascript` template `vue-i18n` with `composition-api` by [@misitebao](https://github.com/misitebao)
-
-## [v2.0.0-beta.6] - 2022-03-16
-
-### Changed
-
-- Upgrade `vite` and `vue` to the latest version ([vite@2.8.6](https://github.com/vitejs/vite/releases/tag/v2.8.6), [vue@3.2.31](https://github.com/vuejs/core/releases/tag/v3.2.31)) by [@misitebao](https://github.com/misitebao)
-
-### Fixed
-
-- Fix mac window border display problem by [@misitebao](https://github.com/misitebao)
-
-## [v2.0.0-beta.5] - 2022-03-06
-
-### Added
-
-- Add `frontend:dev:watcher` by [@misitebao](https://github.com/misitebao), corresponding to wails cli version is [v2.0.0-beta.33](https://github.com/wailsapp/wails/releases/tag/v2.0.0-beta.33)
-
-## [v2.0.0-beta.4] - 2022-02-23
-
-### Added
-
-- Add typescript template option by [@misitebao](https://github.com/misitebao)
-
-### Changed
-
-- Modify window size by [@eighteenzheng](https://github.com/eighteenzheng)
-
-[unreleased]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.8...HEAD
-[v2.0.0-beta.8]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.7...v2.0.0-beta.8
-[v2.0.0-beta.7]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.6...v2.0.0-beta.7
-[v2.0.0-beta.6]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.5...v2.0.0-beta.6
-[v2.0.0-beta.5]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.4...v2.0.0-beta.5
-[v2.0.0-beta.4]: https://github.com/misitebao/wails-template-vue/compare/v2.0.0-beta.3...v2.0.0-beta.4

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,33 +0,0 @@
-name: Bug Report
-description: Please describe in detail the problems you encountered in the process of using.
-labels: ["bug"]
-
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Please answer these questions before you submit a bug.
-
-  - type: textarea
-    attributes:
-      label: 1. Your usage scenarios?
-    validations:
-      required: true
-
-  - type: textarea
-    attributes:
-      label: 2. What did you do?
-    validations:
-      required: true
-
-  - type: textarea
-    attributes:
-      label: 3. What are your problems?
-    validations:
-      required: true
-
-  - type: textarea
-    attributes:
-      label: 4. What is your expected outcome?
-    validations:
-      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: GitHub Discussions
-    url: https://github.com/misitebao/yakia/discussions
-    about: If your question is not a feature or a bug, please go to the discussion panel and retrieve if your question already exists before submitting.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,21 +0,0 @@
-name: Feature Request
-description: Please describe in detail the features you expect.
-labels: ["enhancement"]
-
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Please answer these questions before you submit the desired feature.
-
-  - type: textarea
-    attributes:
-      label: 1. Your usage scenarios?
-    validations:
-      required: true
-
-  - type: textarea
-    attributes:
-      label: 2. What is your expected outcome?
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/issue-template-bug.md

@@ -0,0 +1,15 @@
+---
+name: Bug Template | 问题提交模板
+about: Please describe in detail the problems you encountered in the process of using | 请详细描述您使用过程中遇到的问题
+title: "[Bug]Some problem... | 一些问题。。。"
+---
+
+<!-- Please answer these questions before you submit a bug. | 请在您提交 bug 之前，回答以下这些问题。 -->
+
+#### 1. Your usage scenarios? | 您使用的场景？
+
+#### 2. What did you do? | 您做了什么操作？
+
+#### 3. What are your problems? | 您遇到了什么问题？
+
+#### 4. What is your expected outcome? | 您期望的结果是怎样的？

.github/ISSUE_TEMPLATE/issue-template-feature.md

@@ -0,0 +1,11 @@
+---
+name: Feature Template | 功能提交模板
+about: Please describe in detail the features you expect | 请详细描述您期望的功能
+title: "[Feature]Some feature... | 一些功能。。。"
+---
+
+<!-- Please answer these questions before you submit the desired feature. | 请在您提交期望的功能之前，回答以下这些问题。 -->
+
+#### 1. Your usage scenarios? | 您使用的场景？
+
+#### 2. What is your expected outcome? | 您期望的结果是怎样的？

.github/README.md

@@ -1,151 +0,0 @@
-<h1 align="center">Wails Template Vue</h1>
-
-<p align="center">
-  <img src="./logo.png" height="280" />
-</p>
-
-<p align="center">
-  Wails template based on Vue ecology
-</p>
-
-<p align="center">
-  <a href="https://github.com/misitebao/wails-template-vue/blob/main/LICENSE">
-    <img alt="GitHub" src="https://img.shields.io/github/license/misitebao/wails-template-vue"/>
-  </a>
-  <a href="https://github.com/misitebao/standard-repository">
-    <img alt="GitHub" src="https://cdn.jsdelivr.net/gh/misitebao/standard-repository@main/assets/badge_flat.svg"/>
-  </a>
-  <a href="https://github.com/misitebao/wails-template-vue/releases">
-    <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/misitebao/wails-template-vue?include_prereleases&sort=semver">
-  </a>
-  <a href="https://github.com/wailsapp/awesome-wails">
-    <img alt="Awesome-Wails" src="https://cdn.jsdelivr.net/gh/sindresorhus/awesome@main/media/badge.svg"/>
-  </a>
-  <br/>
-  <img src="https://img.shields.io/badge/platform-windows%20%7C%20macos%20%7C%20linux-brightgreen?"/>
-</p>
-
-<div align="center">
-<strong>
-<samp>
-
-[English](README.md) · [简体中文](README.zh-Hans.md)
-
-</samp>
-</strong>
-</div>
-
-## Table of Contents
-
-<details>
-  <summary>Click me to Open/Close the directory listing</summary>
-
-- [Table of Contents](#table-of-contents)
-- [Introductions](#introductions)
-  - [Official Website](#official-website)
-  - [Background](#background)
-- [Graphic Demo](#graphic-demo)
-- [Features](#features)
-- [Architecture](#architecture)
-- [Getting Started](#getting-started)
-- [Maintainer](#maintainer)
-- [Contributors](#contributors)
-- [Community Exchange](#community-exchange)
-- [Part Of Users](#part-of-users)
-- [Changelog](#changelog)
-- [Donators](#donators)
-- [Sponsors](#sponsors)
-- [Special Thanks](#special-thanks)
-- [License](#license)
-
-</details>
-
-## Introductions
-
-This project is a [Wails](https://github.com/wailsapp/wails) template based on the [Vue](https://vuejs.org/) ecosystem. You can use this project to quickly develop your application.
-
-### Background
-
-The official built-in template only provides the minimum content required to develop an application. If you want to develop an application quickly, you still need to do a lot of work yourself. Based on this, this template project provides you with out-of-the-box functions, you can Get started developing your app quickly.
-
-## Graphic Demo
-
-[![Demo Screenshot](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.en.png "click to view gif demo")](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.gif)
-
-## Features
-
-- Single page routing support
-- Built-in internationalization
-- Built-in bright and dark themes
-- Built-in FontAwesome icon library
-- Integrated TailwindCSS
-- Integrate TypeScript
-- Perfect for Windows, MacOS, Linux platforms
-
-## Getting Started
-
-**New Project**:
-
-```
-wails init -n <Your Appname> -t https://github.com/misitebao/wails-template-vue[@version]
-```
-
-flag description:
-
-- n - The name of the application to be created
-- t - Template name, supports built-in template names and third-party templates in the form of hyperlinks
-- @version - Specify the version of a specific Git Tag, if no version is specified, the code of the master branch will be used by default
-
-**Reference document**:
-
-The front-end part uses Vue Vue-Router and Vue-I18N:
-
-- Vue - Use vue3.x version, please refer to the official [Vue3.x Documents](https://vuejs.org/) for specific usage.
-- Vue-Router - Use Vue-Router 4.x version, please refer to the official [Vue-Router Documents](https://router.vuejs.org/) for specific usage.
-- Vue-I18N - Use Vue-I18N 9.x version, please refer to official [Vue-I18N Documents](https://vue-i18n.intlify.dev/) for specific usage.
-- TypeScript - Please refer to official [TypeScript Documents](https://www.typescriptlang.org/) for specific usage.
-- TailwindCSS - Please refer to official [TailwindCSS Documents](https://tailwindcss.com/) for specific usage.
-
-Then you can refer to the official [Wails document](https://wails.io) to start developing your application🤞.
-
-## Maintainer
-
-Thanks to the maintainers of these projects:
-
-<a href="https://github.com/misitebao">
-  <img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/>
-</a>
-
-## Contributors
-
-Thanks to all the contributors involved in the development. [Contributors](https://github.com/misitebao/wails-template-vue/graphs/contributors)
-
-<a href="https://github.com/eighteenzheng">
-  <img src="https://github.com/eighteenzheng.png" width="40" height="40" alt="eighteenzheng" title="eighteenzheng"/>
-</a>
-<a href="https://github.com/daoif">
-  <img src="https://github.com/daoif.png" width="40" height="40" alt="daoif" title="daoif"/>
-</a>
-
-## Community Exchange
-
-- [Github Discussions](https://github.com/wailsapp/wails/discussions) - The official Github communication community of the Wails project
-- [Wails Slack](https://invite.slack.golangbridge.org/) - Wails official communication channel
-- [Twitter](https://twitter.com/wailsapp) - Wails official Twitter account
-
-Chinese Community:
-
-- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ Group: 1067173054</a> - QQ Chinese Community Exchange Group
-
-## Part Of Users
-
-- [Wails API Demos](https://github.com/misitebao/wails-api-demos) - A sample program for exploring Wails API, inspired by [Electron API Demos](https://github.com/electron/electron-api-demos)
-- [Hayate](https://github.com/misitebao/hayate) - Windows application installation boot program implemented using Wails.
-
-## Changelog
-
-Check out the changelog [here](./CHANGELOG.md).
-
-## License
-
-[License MIT](./LICENSE)

.github/README.zh-Hans.md

@@ -1,152 +0,0 @@
-<h1 align="center">Wails Template Vue</h1>
-
-<p align="center">
-  <img src="./logo.png" height="280" />
-</p>
-
-<p align="center">
-  基于 Vue 生态的 Wails 模板
-</p>
-
-<p align="center">
-  <a href="https://github.com/misitebao/wails-template-vue/blob/main/LICENSE">
-    <img alt="GitHub" src="https://img.shields.io/github/license/misitebao/wails-template-vue"/>
-  </a>
-  <a href="https://github.com/misitebao/standard-repository">
-    <img alt="GitHub" src="https://cdn.jsdelivr.net/gh/misitebao/standard-repository@main/assets/badge_flat.svg"/>
-  </a>
-  <a href="https://github.com/misitebao/wails-template-vue/releases">
-    <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/misitebao/wails-template-vue?include_prereleases&sort=semver">
-  </a>
-  <a href="https://github.com/wailsapp/awesome-wails">
-    <img alt="Awesome-Wails" src="https://cdn.jsdelivr.net/gh/sindresorhus/awesome@main/media/badge.svg"/>
-  </a>
-  <br/>
-  <img src="https://img.shields.io/badge/platform-windows%20%7C%20macos%20%7C%20linux-brightgreen?"/>
-</p>
-
-<div align="center">
-<strong>
-<samp>
-
-[English](README.md) · [简体中文](README.zh-Hans.md)
-
-</samp>
-</strong>
-</div>
-
-## 内容目录
-
-<details>
-  <summary>点我 打开/关闭 目录列表</summary>
-
-- [国际化](#国际化)
-- [内容目录](#内容目录)
-- [项目介绍](#项目介绍)
-  - [官方网站](#官方网站)
-  - [背景](#背景)
-- [图形演示](#图形演示)
-- [功能](#功能)
-- [架构](#架构)
-- [快速入门](#快速入门)
-- [维护者](#维护者)
-- [贡献者](#贡献者)
-- [社区交流](#社区交流)
-- [部分用户](#部分用户)
-- [更新日志](#更新日志)
-- [捐赠者](#捐赠者)
-- [赞助商](#赞助商)
-- [特别感谢](#特别感谢)
-- [许可证](#许可证)
-
-</details>
-
-## 项目介绍
-
-本项目是一个基于 [Vue](https://vuejs.org/) 生态的 [Wails](https://github.com/wailsapp/wails) 模板，使用此项目可以快速开发您的应用。
-
-### 背景
-
-官方内置的模板仅仅提供了开发应用所需的最少的内容，如果你想快速开发应用，则仍然需要自己做很多工作，基于此，本模板项目为您提供了开箱即用的功能，您可以快速开始开发您的应用。
-
-## 图形演示
-
-[![演示截图](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.zh-Hans.png "点击查看gif演示")](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/.github/preview.gif)
-
-## 功能
-
-- 单页路由支持
-- 内置国际化
-- 内置明亮、暗黑主题
-- 内置 FontAwesome 图标库
-- 集成 TailwindCSS
-- 集成 TypeScript
-- 完美适配 Windows、MacOS、Linux 平台
-
-## 快速入门
-
-**新建项目**:
-
-```
-wails init -n <你的应用名称> -t https://github.com/misitebao/wails-template-vue[@version]
-```
-
-参数说明：
-
-- n - 将要创建的应用名称
-- t - 模板名称，支持内置模板名称以及超链接形式的第三方模板
-- @version - 指定特定 Git Tag 的版本，如果不指定版本，则默认使用主分支的代码
-
-**参考文档**：
-
-前端部分使用了 Vue、Vue-Router、Vue-I18N、TypeScript 和 TailwindCSS。
-
-- Vue - 使用 Vue 3.x 版本，具体使用方式请参考[Vue3.x 官方文档](https://vuejs.org/)。
-- Vue-Router - 使用 Vue-Router 4.x 版本，具体使用方式请参考[Vue-Router 官方文档](https://router.vuejs.org/)。
-- Vue-I18N - 使用 Vue-I18N 9.x 版本，具体使用方式请参考[Vue-I18N 官方文档](https://vue-i18n.intlify.dev/)。
-- TypeScript - 具体使用方式请参考[TypeScript 官方文档](https://www.typescriptlang.org/)。
-- TailwindCSS - 具体使用方式请参考[TailwindCSS 官方文档](https://tailwindcss.com/)
-
-然后您就可以参考 [Wails 官方文档](https://wails.io)开始开发您的应用啦 🤞!
-
-## 维护者
-
-感谢这些项目的维护者：
-
-<a href="https://github.com/misitebao">
-  <img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/>
-</a>
-
-## 贡献者
-
-感谢所有参与开发的贡献者。[贡献者列表](https://github.com/misitebao/wails-template-vue/graphs/contributors)
-
-<a href="https://github.com/eighteenzheng">
-  <img src="https://github.com/eighteenzheng.png" width="40" height="40" alt="eighteenzheng" title="eighteenzheng"/>
-</a>
-<a href="https://github.com/daoif">
-  <img src="https://github.com/daoif.png" width="40" height="40" alt="daoif" title="daoif"/>
-</a>
-
-## 社区交流
-
-- [Github Discussions](https://github.com/wailsapp/wails/discussions) - Github 官方推荐的 Wails 项目讨论区
-- [Wails Slack](https://invite.slack.golangbridge.org/) - Wails 官方交流频道
-- [Twitter](https://twitter.com/wailsapp) - Wails 官方推特账号
-
-中文社区：
-
-- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ 群：1067173054</a> - QQ 中文社区交流群
-
-## 部分用户
-
-- [Wails API Demos](https://github.com/misitebao/wails-api-demos) - 一个用于探索 Wails API 的示例程序，灵感来源自 [Electron API Demos](https://github.com/electron/electron-api-demos)
-- [Hayate](https://github.com/misitebao/hayate) - 使用 Wails 实现的 Windows 应用安装引导程序。
-
-## 更新日志
-
-更新日志请查看[这里](./CHANGELOG.md)。
-
-## 许可证
-
-[License MIT](./LICENSE)

.github/pull-request-template.md

@@ -1 +1,5 @@
 <!-- Please list your updates | 请列出您的更新内容 -->
+
+-
+-
+-

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-Present Misite Bao
+Copyright (c) 2021 misitebao
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -0,0 +1,185 @@
+<p align="center">
+  <img src="https://cdn.jsdelivr.net/gh/misitebao/CDN@main/logo/wails-template-vue.png" height="280" />
+</p>
+<p align="center">
+  A Wails template based on Vue and Vue-Router
+</p>
+<p align="center">
+  <a href="https://github.com/misitebao/wails-template-vue/blob/main/LICENSE">
+    <img alt="GitHub" src="https://img.shields.io/github/license/misitebao/wails-template-vue?style=flat-square"/>
+  </a>
+  <a href="https://github.com/misitebao/standard-repository">
+    <img alt="GitHub" src="https://cdn.jsdelivr.net/gh/misitebao/standard-repository@main/assets/badge_flat-square.svg"/>
+  </a>
+  <a href="https://github.com/misitebao/wails-template-vue">
+    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/misitebao/wails-template-vue?style=flat-square"/>
+  </a>
+  <a href="https://github.com/misitebao/wails-template-vue/releases">
+    <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/misitebao/wails-template-vue?include_prereleases&sort=semver&style=flat-square">
+  </a>
+  <a href="https://github.com/misitebao">
+    <img alt="GitHub user" src="https://img.shields.io/badge/author-misitebao-brightgreen?style=flat-square"/>
+  </a>
+  <a href="https://github.com/wailsapp/wails">
+    <img alt="Gitter" src="https://img.shields.io/badge/For-Wails-brightgreen?style=flat-square&color=ff3c3c"/>
+  </a>
+  <a href="https://github.com/wailsapp/awesome-wails">
+    <img alt="Awesome-Wails" src="https://cdn.jsdelivr.net/gh/sindresorhus/awesome@main/media/badge-flat.svg"/>
+  </a>
+  <img src="https://img.shields.io/badge/platform-windows%20%7C%20macos%20%7C%20linux-brightgreen?style=flat-square"/>
+</p>
+
+<span id="nav-1"></span>
+
+## Internationalization
+
+[English](README.md) | [简体中文](README.zh-Hans.md)
+
+<span id="nav-2"></span>
+
+## Table of Contents
+
+<details>
+  <summary>Click me to Open/Close the directory listing</summary>
+
+- [Internationalization](#nav-1)
+- [Table of Contents](#nav-2)
+- [Introductions](#nav-3)
+  - [Official Website](#nav-3-1)
+  - [Background](#nav-3-2)
+- [Graphic Demo](#nav-4)
+- [Features](#nav-5)
+- [Architecture](#nav-6)
+- [Getting Started](#nav-7)
+- [Maintainer](#nav-8)
+- [Contributors](#nav-9)
+- [Community Exchange](#nav-10)
+- [Part Of Users](#nav-11)
+- [Release History](CHANGE.md)
+- [Donators](#nav-12)
+- [Sponsors](#nav-13)
+- [Special Thanks](#nav-14)
+- [License](#nav-15)
+
+</details>
+
+<span id="nav-3"></span>
+
+## Introductions
+
+The wails-template-vue template is a Vue template that supports Wails programs and provides Router and i18n functions by default.
+
+<span id="nav-3-1"></span>
+
+<!-- ### Official Website -->
+
+<span id="nav-3-2"></span>
+
+### Background
+
+I hope that Vue and its powerful community ecology can be used in Wails applications to develop single-page applications that support multiple routes.
+
+<span id="nav-4"></span>
+
+## Graphic Demo
+
+[![Demo Screenshot](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/preview.png "click to view gif demo")](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/preview.gif)
+
+<span id="nav-5"></span>
+
+## Features
+
+- Compatible with Windows, MacOS, Linux platforms
+- Support single page routing and i18n.
+- Built-in Sass preprocessor.
+- A consistent UI experience across platforms(Comes with JetbrainsMono font package).
+- Comes with a complete API example(Currently under development and testing...).
+
+<span id="nav-6"></span>
+
+<!-- ## Architecture -->
+
+<span id="nav-7"></span>
+
+## Getting Started
+
+### New Project
+
+```
+wails init -n [Your Appname] -t https://github.com/misitebao/wails-template-vue
+```
+
+flag description:
+
+- n - The name of the application to be created
+- t - Template name, supports built-in template names and third-party templates in the form of hyperlinks
+
+### Front-end reference document
+
+The front-end part uses Vue Vue-Router and Vue-I18N:
+
+- Vue - Use vue3.x version, please refer to the official [Vue3.x Documents](https://v3.vuejs.org/guide/introduction.html) for specific usage.
+- Vue-Router - Use Vue-Router 4.x version, please refer to the official [Vue-Router Documents](https://next.router.vuejs.org/) for specific usage.
+- Vue-I18N - Use Vue-I18N 9.x version, please refer to official [Vue-I18N Documents](https://vue-i18n.intlify.dev/) for specific usage.
+
+Then you can refer to the official [Wails document](https://wails.io) to start developing your application🤞.
+
+<span id="nav-8"></span>
+
+## Maintainer
+
+Thanks to the maintainers of these projects:
+
+<a href="https://github.com/misitebao"><img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/></a>
+
+<details>
+  <summary>Click me to Open/Close the contributors listing</summary>
+
+- [Misitebao](https://github.com/misitebao) - Project author, full stack engineer.
+
+</details>
+
+<span id="nav-9"></span>
+
+## Contributors
+
+Thank you to all the contributors who participated in the development of wails-template-vue. [Contributors](https://github.com/misitebao/wails-template-vue/graphs/contributors)
+
+<a href="https://github.com/crushonyou18"><img src="https://github.com/crushonyou18.png" width="40" height="40" alt="crushonyou18" title="crushonyou18"/></a>
+
+<span id="nav-10"></span>
+
+## Community Exchange
+
+- [Github Discussions](https://github.com/wailsapp/wails/discussions) - The official Github communication community of the Wails project
+- [Wails Slack](https://invite.slack.golangbridge.org/) - Wails official communication channel
+- [Twitter](https://twitter.com/wailsapp) - Wails official Twitter account
+
+Chinese Community:
+
+- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ Group: 1067173054</a> - QQ Chinese Community Exchange Group
+
+<span id="nav-11"></span>
+
+## Part Of Users
+
+- [Wails API Demos](https://github.com/misitebao/wails-api-demos) - A sample program for exploring Wails API, inspired by [Electron API Demos](https://github.com/electron/electron-api-demos)
+- [Hayate](https://github.com/misitebao/hayate) - Windows application installation boot program implemented using Wails.
+
+<span id="nav-12"></span>
+
+<!-- ## Donators -->
+
+<span id="nav-13"></span>
+
+<!-- ## Sponsors -->
+
+<span id="nav-14"></span>
+
+<!-- ## Special Thanks -->
+
+<span id="nav-15"></span>
+
+## License
+
+[License MIT](LICENSE)

README.zh-Hans.md

@@ -0,0 +1,184 @@
+<p align="center">
+  <img src="https://cdn.jsdelivr.net/gh/misitebao/CDN@main/logo/wails-template-vue.png" height="280" />
+</p>
+<p align="center">
+  基于Vue和Vue-Router的Wails模板
+</p>
+<p align="center">
+  <a href="https://github.com/misitebao/wails-template-vue/blob/main/LICENSE">
+    <img alt="GitHub" src="https://img.shields.io/github/license/misitebao/wails-template-vue?style=flat-square"/>
+  </a>
+  <a href="https://github.com/misitebao/standard-repository">
+    <img alt="GitHub" src="https://cdn.jsdelivr.net/gh/misitebao/standard-repository@main/assets/badge_flat-square.svg"/>
+  </a>
+  <a href="https://github.com/misitebao/wails-template-vue">
+    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/misitebao/wails-template-vue?style=flat-square"/>
+  </a>
+  <a href="https://github.com/misitebao/wails-template-vue/releases">
+    <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/misitebao/wails-template-vue?include_prereleases&sort=semver&style=flat-square">
+  </a>
+  <a href="https://github.com/misitebao">
+    <img alt="GitHub user" src="https://img.shields.io/badge/author-misitebao-brightgreen?style=flat-square"/>
+  </a>
+  <a href="https://github.com/wailsapp/wails">
+    <img alt="Gitter" src="https://img.shields.io/badge/For-Wails-brightgreen?style=flat-square&color=ff3c3c"/>
+  </a>
+  <a href="https://github.com/wailsapp/awesome-wails">
+    <img alt="Awesome-Wails" src="https://cdn.jsdelivr.net/gh/sindresorhus/awesome@main/media/badge-flat.svg"/>
+  </a>
+  <img src="https://img.shields.io/badge/platform-windows%20%7C%20macos%20%7C%20linux-brightgreen?style=flat-square"/>
+</p>
+<span id="nav-1"></span>
+
+## 国际化
+
+[English](README.md) | [简体中文](README.zh-Hans.md)
+
+<span id="nav-2"></span>
+
+## 内容目录
+
+<details>
+  <summary>点我 打开/关闭 目录列表</summary>
+
+- [国际化](#nav-1)
+- [内容目录](#nav-2)
+- [项目介绍](#nav-3)
+  - [官方网站](#nav-3-1)
+  - [背景](#nav-3-2)
+- [图形演示](#nav-4)
+- [功能特色](#nav-5)
+- [架构](#nav-6)
+- [新手入门](#nav-7)
+- [维护者](#nav-8)
+- [贡献者](#nav-9)
+- [社区交流](#nav-10)
+- [部分用户](#nav-11)
+- [发布记录](CHANGE.md)
+- [捐赠者](#nav-12)
+- [赞助商](#nav-13)
+- [特别感谢](#nav-14)
+- [版权许可](#nav-15)
+
+</details>
+
+<span id="nav-3"></span>
+
+## 项目介绍
+
+wails-template-vue 模板是一个支持 Wails 应用的 Vue 模板，默认提供路由和国际化功能。
+
+<span id="nav-3-1"></span>
+
+<!-- ### 官方网站 -->
+
+<span id="nav-3-2"></span>
+
+### 背景
+
+希望在 Wails 应用中使用 Vue 及其强大的社区生态开发支持多路由的单页应用。
+
+<span id="nav-4"></span>
+
+## 图形演示
+
+[![演示截图](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/preview.png "点击查看gif演示")](https://cdn.jsdelivr.net/gh/misitebao/wails-template-vue@main/preview.gif)
+
+<span id="nav-5"></span>
+
+## 功能特色
+
+- 兼容 Windows、MacOS、Linux 平台
+- 支持单页路由和国际化
+- 内置 Sass 预处理器
+- 跨平台一致的 UI 体验（内置 JetbrainsMono 字体包）
+- 附带完整的 APi 示例（目前正在开发测试中。。。）
+
+<span id="nav-6"></span>
+
+<!-- ## 架构 -->
+
+<span id="nav-7"></span>
+
+## 新手入门
+
+### 新建项目
+
+```
+wails init -n [你的应用名称] -t https://github.com/misitebao/wails-template-vue
+```
+
+参数说明：
+
+- n - 将要创建的应用名称
+- t - 模板名称，支持内置模板名称以及超链接形式的第三方模板
+
+### 前端部分参考文档
+
+前端部分使用了 Vue Vue-Router 和 Vue-I18N。
+
+- Vue - 使用 Vue 3.x 版本，具体使用方式请参考[Vue3.x 官方文档](https://v3.vuejs.org/guide/introduction.html)。
+- Vue-Router - 使用 Vue-Router 4.x 版本，具体使用方式请参考[Vue-Router 官方文档](https://next.router.vuejs.org/)。
+- Vue-I18N - 使用 Vue-I18N 9.x 版本，具体使用方式请参考[Vue-I18N 官方文档](https://vue-i18n.intlify.dev/)。
+
+然后您就可以参考 [Wails 官方文档](https://wails.io)开始开发您的应用啦 🤞!
+
+<span id="nav-8"></span>
+
+## 维护者
+
+感谢这些项目的维护者：
+
+<a href="https://github.com/misitebao"><img src="https://github.com/misitebao.png" width="40" height="40" alt="misitebao" title="misitebao"/></a>
+
+<details>
+  <summary>点我 打开/关闭 贡献者列表</summary>
+
+- [米司特包](https://github.com/misitebao) - 项目作者，全栈工程师。
+
+</details>
+
+<span id="nav-9"></span>
+
+## 贡献者
+
+感谢所有参与 wails-template-vue 开发的贡献者。[贡献者列表](https://github.com/misitebao/wails-template-vue/graphs/contributors)
+
+<a href="https://github.com/crushonyou18"><img src="https://github.com/crushonyou18.png" width="40" height="40" alt="crushonyou18" title="crushonyou18"/></a>
+
+<span id="nav-10"></span>
+
+## 社区交流
+
+- [Github Discussions](https://github.com/wailsapp/wails/discussions) - Github 官方推荐的 Wails 项目讨论区
+- [Wails Slack](https://invite.slack.golangbridge.org/) - Wails 官方交流频道
+- [Twitter](https://twitter.com/wailsapp) - Wails 官方推特账号
+
+中文社区：
+
+- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=utlUvDwtcNG5knHBLwVdMvG39WeHh7oj&jump_from=webapi">QQ 群：1067173054</a> - QQ 中文社区交流群
+
+<span id="nav-11"></span>
+
+## 部分用户
+
+- [Wails API Demos](https://github.com/misitebao/wails-api-demos) - 一个用于探索 Wails API 的示例程序，灵感来源自 [Electron API Demos](https://github.com/electron/electron-api-demos)
+- [Hayate](https://github.com/misitebao/hayate) - 使用 Wails 实现的 Windows 应用安装引导程序。
+
+<span id="nav-12"></span>
+
+<!-- ## 捐赠者 -->
+
+<span id="nav-13"></span>
+
+<!-- ## 赞助商 -->
+
+<span id="nav-14"></span>
+
+<!-- ## 特别感谢 -->
+
+<span id="nav-15"></span>
+
+## 版权许可
+
+[License MIT](LICENSE)

app.tmpl.go

@@ -30,16 +30,6 @@ func (a *App) domReady(ctx context.Context) {
 	// 在这里添加你的操作
 }
 
-// beforeClose is called when the application is about to quit,
-// either by clicking the window close button or calling runtime.Quit.
-// Returning true will cause the application to continue,
-// false will continue shutdown as normal.
-// beforeClose在单击窗口关闭按钮或调用runtime.Quit即将退出应用程序时被调用.
-// 返回 true 将导致应用程序继续，false 将继续正常关闭。
-func (a *App) beforeClose(ctx context.Context) (prevent bool) {
-	return false
-}
-
 // shutdown is called at application termination
 // 在应用程序终止时被调用
 func (a *App) shutdown(ctx context.Context) {

frontend/.eslintrc.cjs

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

frontend/.gitignore

@@ -1,28 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

frontend/.prettierrc.json

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

frontend/.vscode/extensions.json

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

frontend/JS/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+# dist
+dist-ssr
+*.local

frontend/JS/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}

frontend/JS/README.md

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

frontend/JS/index.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>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

frontend/JS/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "js",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --emptyOutDir",
+    "build:watch": "vite build --watch --emptyOutDir",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.23",
+    "vue-i18n": "^9.1.9",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.10.2",
+    "sass": "^1.44.0",
+    "vite": "^2.7.0"
+  }
+}

frontend/JS/src/App.vue

@@ -1,31 +1,16 @@
-<script setup lang="ts">
-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 -->
-  <div class="header">
+  <!-- 头部 -->
+  <div class="header" data-wails-drag>
     <!-- navigation -->
-    <div class="nav">
-      <router-link to="/">{{ t("nav.home") }}</router-link>
-      <router-link to="/about">{{ t("nav.about") }}</router-link>
+    <!-- 导航 -->
+    <div class="nav" data-wails-no-drag>
+      <router-link to="/">{{ $t("nav.home") }}</router-link>
+      <router-link to="/about">{{ $t("nav.about") }}</router-link>
     </div>
     <!-- Menu -->
-    <div class="menu">
+    <!-- 菜单 -->
+    <div class="menu" data-wails-no-drag>
       <div class="language">
         <div
           v-for="item in languages"
@@ -34,23 +19,67 @@ document.body.addEventListener("click", function (event) {
           @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>
   <!-- Page -->
+  <!-- 页面 -->
   <div class="view">
     <router-view />
   </div>
 </template>
 
+<script>
+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");
@@ -73,7 +102,9 @@ body {
   // width: 900px;
   // height: 520px;
   height: 100%;
-  background-color: rgba(219, 188, 239, 0.9);
+  margin-right: 1px;
+  border-radius: 6px;
+  background-color: rgba(219,188,239,.9);
   overflow: hidden;
 }
 .header {
@@ -84,7 +115,7 @@ body {
   justify-content: space-between;
   height: 50px;
   padding: 0 10px;
-  background-color: rgba(171, 126, 220, 0.9);
+  background-color: rgba(171,126,220,.9);
   .nav {
     a {
       display: inline-block;

frontend/JS/src/components/HelloWorld.vue

@@ -1,13 +1,17 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string;
-}>();
-</script>
-
 <template>
   <div class="hello-world" v-text="msg"></div>
 </template>
 
+<script>
+export default {
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .hello-world {
   height: 76px;

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

@@ -0,0 +1,34 @@
+<template>
+  <span class="openlink" @click="onClickhandle">
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+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/JS/src/components/public/index.js

@@ -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/JS/src/i18n/index.js

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

frontend/JS/src/i18n/messages/en.json

@@ -15,7 +15,7 @@
   "homepage": {
     "welcome": "Welcome to use Wails program developed based on Vue",
     "getting-started": "Getting Started",
-    "star-me": "Github"
+    "star-me": "Star Me"
   },
   "aboutpage": {
     "title": "Wails Template Vue",

frontend/JS/src/i18n/messages/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/JS/src/i18n/messages/zh-Hans.json

@@ -14,8 +14,8 @@
   },
   "homepage": {
     "welcome": "欢迎使用基于Vue开发的Wails程序",
-    "getting-started": "快速入门",
-    "star-me": "Github"
+    "getting-started": "新手入门",
+    "star-me": "给我点星"
   },
   "aboutpage": {
     "title": "Wails Template Vue",

frontend/JS/src/main.js

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

frontend/JS/src/router/index.js

@@ -0,0 +1,27 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import Home from "@/views/Home.vue";
+
+const routes = [
+  {
+    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/JS/src/views/About.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="about">
+    <!-- Title -->
+    <div class="title">{{ $t("aboutpage.title") }}</div>
+    <!-- Information -->
+    <!-- 信息 -->
+    <div class="content">
+      <div class="comeon">
+        <img :src="comeonGif" alt />
+      </div>
+      <ul class="info">
+        <li class="info-item">
+          <div class="name">{{ $t("aboutpage.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">{{ $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>
+          <OpenLink class="link" href="https://github.com/misitebao">{{
+            $t("aboutpage.misitebao")
+          }}</OpenLink>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Thanks -->
+    <!-- 谢语 -->
+    <div class="thank">{{ $t("aboutpage.thanks") }}</div>
+  </div>
+</template>
+<script>
+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/JS/src/views/Home.vue

@@ -1,32 +1,39 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-
-import HelloWorld from "@/components/HelloWorld.vue";
-
-const { t } = useI18n();
-</script>
-
 <template>
   <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">
-      <a
+      <OpenLink
         href="https://wails.io/docs/gettingstarted/installation"
         class="btn start"
-        >{{ t("homepage.getting-started") }}</a
+        >{{ $t("homepage.getting-started") }}</OpenLink
       >
-      <a
+      <OpenLink
         href="https://github.com/misitebao/wails-template-vue"
         class="btn star"
-        >{{ t("homepage.star-me") }}</a
+        >{{ $t("homepage.star-me") }}</OpenLink
       >
     </div>
   </div>
 </template>
 
+<script>
+// @ 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 {

frontend/JS/vite.config.js

@@ -0,0 +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",
+    rollupOptions: {
+      output: {
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`,
+      },
+    },
+  },
+});

frontend/README.md

@@ -1,46 +0,0 @@
-# frontend
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```

frontend/TS/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

frontend/TS/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}

frontend/TS/README.md

@@ -0,0 +1,11 @@
+# Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

frontend/TS/index.html

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

frontend/TS/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "ts",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "vite",
+    "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-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.10.2",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.0",
+    "vue-tsc": "^0.28.10"
+  }
+}

frontend/TS/src/App.vue

@@ -0,0 +1,212 @@
+<template>
+  <!-- Header -->
+  <!-- 头部 -->
+  <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>
+
+<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 {
+  position: relative;
+  // width: 900px;
+  // height: 520px;
+  height: 100%;
+  margin-right: 1px;
+  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

@@ -0,0 +1,23 @@
+<template>
+  <div class="hello-world" v-text="msg"></div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hello-world {
+  height: 76px;
+  line-height: 38px;
+  margin: 16px 150px;
+  text-align: center;
+  font-size: 26px;
+}
+</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/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

frontend/TS/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from "@/router";
+
+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

@@ -1,47 +1,52 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-
-import comeonGif from "@/assets/images/comeon.gif";
-
-const { t } = useI18n();
-</script>
-
 <template>
   <div class="about">
     <!-- Title -->
-    <div class="title">{{ t("aboutpage.title") }}</div>
+    <div class="title">{{ "Wails Template Vue" }}</div>
     <!-- Information -->
+    <!-- 信息 -->
     <div class="content">
       <div class="comeon">
-        <img :src="comeonGif" alt="Gif" />
+        <img :src="comeonGif" alt />
       </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
+          <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">{{ t("aboutpage.wails-repository") }}</div>
-          <a class="link" href="https://github.com/wailsapp/wails"
-            >https://github.com/wailsapp/wails</a
+          <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">{{ t("aboutpage.author") }}</div>
-          <a class="link" href="https://github.com/misitebao">{{
-            t("aboutpage.misitebao")
-          }}</a>
+          <div class="name">{{ "Author" }}</div>
+          <OpenLink class="link" href="https://github.com/misitebao">{{
+            "Misitebao"
+          }}</OpenLink>
         </li>
       </ul>
     </div>
 
     <!-- Thanks -->
-    <div class="thank">{{ t("aboutpage.thanks") }}</div>
+    <!-- 谢语 -->
+    <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 {

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/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

frontend/TS/vite.config.ts

@@ -1,18 +1,17 @@
-import { fileURLToPath, URL } from "node:url";
-
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import vueJsx from "@vitejs/plugin-vue-jsx";
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx()],
+  plugins: [vue()],
   resolve: {
     alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+      "@": path.resolve(__dirname, "src"),
     },
   },
   build: {
+    outDir:"../dist",
     rollupOptions: {
       output: {
         entryFileNames: `assets/[name].js`,

frontend/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

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>