mirror of
https://github.com/misitebao/wails-template-vue
synced 2025-05-24 10:08:02 +08:00
feat: update front-end template
This commit is contained in:
misitebao
parent
b04cf5a5d9
commit
d563be5f1a
@ -16,7 +16,9 @@
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"serve": "^12.0.0"
|
||||
"serve": "^12.0.0",
|
||||
"stylus": "^0.54.7",
|
||||
"stylus-loader": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
@ -2968,6 +2970,18 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/css": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npm.taobao.org/css/download/css-2.2.4.tgz",
|
||||
"integrity": "sha1-xkZ1XHOXHyu6amAeLPL9cbEpiSk=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.3",
|
||||
"source-map": "^0.6.1",
|
||||
"source-map-resolve": "^0.5.2",
|
||||
"urix": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-color-names": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz",
|
||||
@ -3017,6 +3031,15 @@
|
||||
"webpack": "^4.0.0 || ^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-parse": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/css-parse/download/css-parse-2.0.0.tgz",
|
||||
"integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"css": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-select": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.nlark.com/css-select/download/css-select-4.1.3.tgz?cache=0&sync_timestamp=1622994276976&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcss-select%2Fdownload%2Fcss-select-4.1.3.tgz",
|
||||
@ -3869,22 +3892,23 @@
|
||||
}
|
||||
},
|
||||
"node_modules/es-abstract": {
|
||||
"version": "1.18.5",
|
||||
"resolved": "https://registry.nlark.com/es-abstract/download/es-abstract-1.18.5.tgz?cache=0&sync_timestamp=1627880655441&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fes-abstract%2Fdownload%2Fes-abstract-1.18.5.tgz",
|
||||
"integrity": "sha1-mxDefUwgajWB/VshJCM+BNtJrhk=",
|
||||
"version": "1.18.6",
|
||||
"resolved": "https://registry.nlark.com/es-abstract/download/es-abstract-1.18.6.tgz?cache=0&sync_timestamp=1631076806734&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fes-abstract%2Fdownload%2Fes-abstract-1.18.6.tgz",
|
||||
"integrity": "sha1-LETj6npiVQORZNJlWXd6bZeMtFY=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.2",
|
||||
"es-to-primitive": "^1.2.1",
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.1.1",
|
||||
"get-symbol-description": "^1.0.0",
|
||||
"has": "^1.0.3",
|
||||
"has-symbols": "^1.0.2",
|
||||
"internal-slot": "^1.0.3",
|
||||
"is-callable": "^1.2.3",
|
||||
"is-callable": "^1.2.4",
|
||||
"is-negative-zero": "^2.0.1",
|
||||
"is-regex": "^1.1.3",
|
||||
"is-string": "^1.0.6",
|
||||
"is-regex": "^1.1.4",
|
||||
"is-string": "^1.0.7",
|
||||
"object-inspect": "^1.11.0",
|
||||
"object-keys": "^1.1.1",
|
||||
"object.assign": "^4.1.2",
|
||||
@ -4720,6 +4744,19 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/get-symbol-description": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.nlark.com/get-symbol-description/download/get-symbol-description-1.0.0.tgz",
|
||||
"integrity": "sha1-f9uByQAQH71WTdXxowr1qtweWNY=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.2",
|
||||
"get-intrinsic": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/get-value": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npm.taobao.org/get-value/download/get-value-2.0.6.tgz",
|
||||
@ -6221,6 +6258,12 @@
|
||||
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.clonedeep": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz?cache=0&sync_timestamp=1599054271708&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.clonedeep%2Fdownload%2Flodash.clonedeep-4.5.0.tgz",
|
||||
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.defaultsdeep": {
|
||||
"version": "4.6.1",
|
||||
"resolved": "https://registry.nlark.com/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz",
|
||||
@ -10130,6 +10173,78 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/stylus": {
|
||||
"version": "0.54.8",
|
||||
"resolved": "https://registry.nlark.com/stylus/download/stylus-0.54.8.tgz",
|
||||
"integrity": "sha1-PaPmWWa8Vnp7BEv+DuzmU+CZ0Uc=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"css-parse": "~2.0.0",
|
||||
"debug": "~3.1.0",
|
||||
"glob": "^7.1.6",
|
||||
"mkdirp": "~1.0.4",
|
||||
"safer-buffer": "^2.1.2",
|
||||
"sax": "~1.2.4",
|
||||
"semver": "^6.3.0",
|
||||
"source-map": "^0.7.3"
|
||||
},
|
||||
"bin": {
|
||||
"stylus": "bin/stylus"
|
||||
},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/stylus-loader": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.nlark.com/stylus-loader/download/stylus-loader-3.0.2.tgz",
|
||||
"integrity": "sha1-J6cGQgsFo44DjnyssVNXjUUFE8Y=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loader-utils": "^1.0.2",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"when": "~3.6.x"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"stylus": ">=0.52.4"
|
||||
}
|
||||
},
|
||||
"node_modules/stylus/node_modules/debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.nlark.com/debug/download/debug-3.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdebug%2Fdownload%2Fdebug-3.1.0.tgz",
|
||||
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/stylus/node_modules/mkdirp": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz?cache=0&sync_timestamp=1609157854165&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-1.0.4.tgz",
|
||||
"integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34=",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"mkdirp": "bin/cmd.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/stylus/node_modules/ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.nlark.com/ms/download/ms-2.0.0.tgz?cache=0&sync_timestamp=1629910562433&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fms%2Fdownload%2Fms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/stylus/node_modules/source-map": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.7.3.tgz",
|
||||
"integrity": "sha1-UwL4FpAxc1ImVECS5kmB91F1A4M=",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1626703400240&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
|
||||
@ -11990,6 +12105,12 @@
|
||||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/when": {
|
||||
"version": "3.6.4",
|
||||
"resolved": "https://registry.npm.taobao.org/when/download/when-3.6.4.tgz",
|
||||
"integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz",
|
||||
@ -14862,6 +14983,18 @@
|
||||
"randomfill": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"css": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npm.taobao.org/css/download/css-2.2.4.tgz",
|
||||
"integrity": "sha1-xkZ1XHOXHyu6amAeLPL9cbEpiSk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"inherits": "^2.0.3",
|
||||
"source-map": "^0.6.1",
|
||||
"source-map-resolve": "^0.5.2",
|
||||
"urix": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"css-color-names": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz",
|
||||
@ -14899,6 +15032,15 @@
|
||||
"semver": "^6.3.0"
|
||||
}
|
||||
},
|
||||
"css-parse": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/css-parse/download/css-parse-2.0.0.tgz",
|
||||
"integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"css-select": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.nlark.com/css-select/download/css-select-4.1.3.tgz?cache=0&sync_timestamp=1622994276976&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcss-select%2Fdownload%2Fcss-select-4.1.3.tgz",
|
||||
@ -15611,22 +15753,23 @@
|
||||
}
|
||||
},
|
||||
"es-abstract": {
|
||||
"version": "1.18.5",
|
||||
"resolved": "https://registry.nlark.com/es-abstract/download/es-abstract-1.18.5.tgz?cache=0&sync_timestamp=1627880655441&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fes-abstract%2Fdownload%2Fes-abstract-1.18.5.tgz",
|
||||
"integrity": "sha1-mxDefUwgajWB/VshJCM+BNtJrhk=",
|
||||
"version": "1.18.6",
|
||||
"resolved": "https://registry.nlark.com/es-abstract/download/es-abstract-1.18.6.tgz?cache=0&sync_timestamp=1631076806734&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fes-abstract%2Fdownload%2Fes-abstract-1.18.6.tgz",
|
||||
"integrity": "sha1-LETj6npiVQORZNJlWXd6bZeMtFY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"call-bind": "^1.0.2",
|
||||
"es-to-primitive": "^1.2.1",
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.1.1",
|
||||
"get-symbol-description": "^1.0.0",
|
||||
"has": "^1.0.3",
|
||||
"has-symbols": "^1.0.2",
|
||||
"internal-slot": "^1.0.3",
|
||||
"is-callable": "^1.2.3",
|
||||
"is-callable": "^1.2.4",
|
||||
"is-negative-zero": "^2.0.1",
|
||||
"is-regex": "^1.1.3",
|
||||
"is-string": "^1.0.6",
|
||||
"is-regex": "^1.1.4",
|
||||
"is-string": "^1.0.7",
|
||||
"object-inspect": "^1.11.0",
|
||||
"object-keys": "^1.1.1",
|
||||
"object.assign": "^4.1.2",
|
||||
@ -16314,6 +16457,16 @@
|
||||
"pump": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"get-symbol-description": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.nlark.com/get-symbol-description/download/get-symbol-description-1.0.0.tgz",
|
||||
"integrity": "sha1-f9uByQAQH71WTdXxowr1qtweWNY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"call-bind": "^1.0.2",
|
||||
"get-intrinsic": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"get-value": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npm.taobao.org/get-value/download/get-value-2.0.6.tgz",
|
||||
@ -17539,6 +17692,12 @@
|
||||
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.clonedeep": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz?cache=0&sync_timestamp=1599054271708&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.clonedeep%2Fdownload%2Flodash.clonedeep-4.5.0.tgz",
|
||||
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.defaultsdeep": {
|
||||
"version": "4.6.1",
|
||||
"resolved": "https://registry.nlark.com/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz",
|
||||
@ -20862,6 +21021,62 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylus": {
|
||||
"version": "0.54.8",
|
||||
"resolved": "https://registry.nlark.com/stylus/download/stylus-0.54.8.tgz",
|
||||
"integrity": "sha1-PaPmWWa8Vnp7BEv+DuzmU+CZ0Uc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-parse": "~2.0.0",
|
||||
"debug": "~3.1.0",
|
||||
"glob": "^7.1.6",
|
||||
"mkdirp": "~1.0.4",
|
||||
"safer-buffer": "^2.1.2",
|
||||
"sax": "~1.2.4",
|
||||
"semver": "^6.3.0",
|
||||
"source-map": "^0.7.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.nlark.com/debug/download/debug-3.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdebug%2Fdownload%2Fdebug-3.1.0.tgz",
|
||||
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz?cache=0&sync_timestamp=1609157854165&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-1.0.4.tgz",
|
||||
"integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34=",
|
||||
"dev": true
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.nlark.com/ms/download/ms-2.0.0.tgz?cache=0&sync_timestamp=1629910562433&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fms%2Fdownload%2Fms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.7.3.tgz",
|
||||
"integrity": "sha1-UwL4FpAxc1ImVECS5kmB91F1A4M=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylus-loader": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.nlark.com/stylus-loader/download/stylus-loader-3.0.2.tgz",
|
||||
"integrity": "sha1-J6cGQgsFo44DjnyssVNXjUUFE8Y=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.0.2",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"when": "~3.6.x"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1626703400240&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
|
||||
@ -22418,6 +22633,12 @@
|
||||
"integrity": "sha1-f4RzvIOd/YdgituV1+sHUhFXikI=",
|
||||
"dev": true
|
||||
},
|
||||
"when": {
|
||||
"version": "3.6.4",
|
||||
"resolved": "https://registry.npm.taobao.org/when/download/when-3.6.4.tgz",
|
||||
"integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=",
|
||||
"dev": true
|
||||
},
|
||||
"which": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz",
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"serve": "^12.0.0"
|
||||
},
|
||||
"author": "{{.AuthorName}}"
|
||||
"serve": "^12.0.0",
|
||||
"stylus": "^0.54.7",
|
||||
"stylus-loader": "^3.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 20 KiB |
@ -1,38 +1,204 @@
|
||||
<template>
|
||||
<div id="nav">
|
||||
<div class="menu">
|
||||
<router-link to="/">{{ $t("menu.home") }}</router-link> |
|
||||
<router-link to="/about">{{ $t("menu.about") }}</router-link>
|
||||
<!-- Header -->
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<!-- navigation -->
|
||||
<!-- 导航 -->
|
||||
<div class="nav">
|
||||
<router-link to="/">{{ $t("nav.home") }}</router-link>
|
||||
<router-link to="/about">{{ $t("nav.about") }}</router-link>
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<!-- 菜单 -->
|
||||
<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="onclickExit">{{ $t("topbar.exit") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page -->
|
||||
<!-- 页面 -->
|
||||
<div class="view">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<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) => {
|
||||
console.log('The new language is: ' + locale.value)
|
||||
i18n.global.locale = newValue
|
||||
})
|
||||
|
||||
|
||||
// Since the current js runtime has not been developed yet, so first call Go to complete. Later,
|
||||
// it will be updated to be called directly when js is running.
|
||||
// 由于当前js运行时还没有开发完成，所以先调用Go完成。后续会更新为js运行时直接调用。
|
||||
const onclickMinimise = () => {
|
||||
alert(i18n.global.t("global.not-supported"))
|
||||
|
||||
}
|
||||
const onclickExit = () => {
|
||||
alert(i18n.global.t("global.not-supported"))
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
languages,
|
||||
locale,
|
||||
onclickLanguageHandle,
|
||||
onclickMinimise,
|
||||
onclickExit
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import url("./assets/css/reset.css");
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #d579b2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin 0
|
||||
padding 0
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
background-color: #ededed;
|
||||
position: relative;
|
||||
// width: 900px;
|
||||
// height: 520px;
|
||||
width 100%
|
||||
height 100%
|
||||
background-color: #dbbcef;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
background-color: #ab7edc;
|
||||
.nav {
|
||||
a {
|
||||
display: inline-block;
|
||||
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;
|
||||
&: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{
|
||||
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: 50px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
.view {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow hidden
|
||||
}
|
||||
</style>
|
||||
|
||||
124
frontend/src/assets/css/reset.css
Normal file
124
frontend/src/assets/css/reset.css
Normal file
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 22 KiB |
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="hello" v-text="msg"></div>
|
||||
<div class="hello-world" v-text="msg"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -13,7 +13,11 @@ export default {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.hello {
|
||||
margin: 10px 0;
|
||||
.hello-world {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: 16px auto;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
}
|
||||
</style>
|
||||
|
||||
37
frontend/src/components/public/OpenLink.vue
Normal file
37
frontend/src/components/public/OpenLink.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<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方法以使用默认浏览器打开链接。
|
||||
console.log(i18n.global.t("global.click-link") + props.href)
|
||||
|
||||
|
||||
alert(i18n.global.t("global.click-link") + props.href + i18n.global.t("global.not-supported"))
|
||||
}
|
||||
|
||||
return {
|
||||
onClickhandle
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.openlink{
|
||||
cursor pointer
|
||||
text-decoration underline
|
||||
}
|
||||
</style>
|
||||
10
frontend/src/components/public/index.js
Normal file
10
frontend/src/components/public/index.js
Normal file
@ -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)
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,31 @@
|
||||
{
|
||||
"welcome": "Welcome to Your Vue.js App",
|
||||
"menu": {
|
||||
"nav": {
|
||||
"home": "Home",
|
||||
"about": "About"
|
||||
},
|
||||
"about": {
|
||||
"welcome": "This is an about page"
|
||||
"languages": {
|
||||
"en": "English",
|
||||
"zh-Hans": "简体中文"
|
||||
},
|
||||
"topbar": {
|
||||
"minimise": "Minimise",
|
||||
"exit": "Exit"
|
||||
},
|
||||
"homepage": {
|
||||
"welcome": "Welcome to use Wails program developed based on Vue",
|
||||
"getting-started": "Getting Started",
|
||||
"star-me": "Star Me"
|
||||
},
|
||||
"aboutpage": {
|
||||
"title": "Wails Template Vue",
|
||||
"project-repository": "Project Repository",
|
||||
"author": "Author",
|
||||
"misitebao": "Misitebao",
|
||||
"wails-repository": "Wails Repository",
|
||||
"thanks": "Thank you all for your support🙏！"
|
||||
},
|
||||
"global": {
|
||||
"not-supported": "Because it is a beta version, it can't be done for the time being, it will be completed later.",
|
||||
"click-link": "The currently clicked link is: "
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,31 @@
|
||||
{
|
||||
"welcome": "欢迎使用Vue.js应用程序",
|
||||
"menu": {
|
||||
"nav": {
|
||||
"home": "主页",
|
||||
"about": "关于"
|
||||
},
|
||||
"about": {
|
||||
"welcome": "这是一个关于页面"
|
||||
"languages": {
|
||||
"en": "English",
|
||||
"zh-Hans": "简体中文"
|
||||
},
|
||||
"topbar": {
|
||||
"minimise": "最小化",
|
||||
"exit": "退出"
|
||||
},
|
||||
"homepage": {
|
||||
"welcome": "欢迎使用基于Vue开发的Wails程序",
|
||||
"getting-started": "新手入门",
|
||||
"star-me": "给我点星"
|
||||
},
|
||||
"aboutpage": {
|
||||
"title": "Wails Template Vue",
|
||||
"project-repository": "项目仓库",
|
||||
"author": "作者",
|
||||
"misitebao": "米司特包",
|
||||
"wails-repository": "Wails 仓库",
|
||||
"thanks": "感谢各位大佬的支持🙏！"
|
||||
},
|
||||
"global": {
|
||||
"not-supported": "由于是测试版，所以暂时做不了，后续会完成它。",
|
||||
"click-link": "当前点击的链接是: "
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,12 @@ 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')
|
||||
|
||||
@ -1,5 +1,65 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>{{ $t("about.welcome") }}</h1>
|
||||
<!-- Title -->
|
||||
<div class="title">{{ $t('aboutpage.title') }}</div>
|
||||
<!-- Information -->
|
||||
<!-- 信息 -->
|
||||
<ul class="info">
|
||||
<li class="info-item">
|
||||
<span class="name">{{ $t('aboutpage.project-repository') + ': ' }}</span>
|
||||
<OpenLink
|
||||
class="link"
|
||||
href="https://github.com/misitebao/wails-template-vue"
|
||||
>https://github.com/misitebao/wails-template-vue</OpenLink>
|
||||
</li>
|
||||
<li class="info-item">
|
||||
<span class="name">{{ $t('aboutpage.author') + ': ' }}</span>
|
||||
<OpenLink class="link" href="https://github.com/misitebao">{{ $t('aboutpage.misitebao') }}</OpenLink>
|
||||
</li>
|
||||
<li class="info-item">
|
||||
<span class="name">{{ $t('aboutpage.wails-repository') + ': ' }}</span>
|
||||
<OpenLink
|
||||
class="link"
|
||||
href="https://github.com/wailsapp/wails"
|
||||
>https://github.com/wailsapp/wails</OpenLink>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Thanks -->
|
||||
<!-- 谢语 -->
|
||||
<div class="thank">{{ $t('aboutpage.thanks') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="stylus">
|
||||
.about{
|
||||
.title{
|
||||
margin 30px auto
|
||||
font-size 36px
|
||||
color #a150b5
|
||||
text-align center
|
||||
}
|
||||
.info{
|
||||
margin 14px 60px
|
||||
// background-color red
|
||||
font-size 24px
|
||||
.info-item{
|
||||
height 60px
|
||||
line-height 60px
|
||||
white-space nowrap
|
||||
.name{
|
||||
color #6d6363
|
||||
|
||||
}
|
||||
.link{
|
||||
color #5f6c86
|
||||
}
|
||||
}
|
||||
}
|
||||
.thank{
|
||||
height: 68px;
|
||||
line-height: 68px;
|
||||
margin: 47px auto;
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,30 +1,77 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png" />
|
||||
<HelloWorld :msg="$t('welcome')" />
|
||||
<button @click="changeLanguage" v-text="'I18N'"></button>
|
||||
<!-- Logo -->
|
||||
<img class="logo" alt="Vue logo" src="../assets/logo.png" />
|
||||
<HelloWorld :msg="$t('homepage.welcome')" />
|
||||
<!-- Bottom button -->
|
||||
<!-- 底部按钮 -->
|
||||
<div class="link">
|
||||
<OpenLink href="https://beta.wails.io" class="btn start">{{ $t('homepage.getting-started') }}</OpenLink>
|
||||
<OpenLink
|
||||
href="https://github.com/misitebao/wails-template-vue"
|
||||
class="btn star"
|
||||
>{{ $t('homepage.star-me') }}</OpenLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from "@/components/HelloWorld.vue";
|
||||
import i18n from "@/i18n";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
components: {
|
||||
HelloWorld,
|
||||
HelloWorld
|
||||
},
|
||||
setup() {
|
||||
const changeLanguage = function () {
|
||||
if (i18n.global.locale === "en") {
|
||||
i18n.global.locale = "zh-Hans";
|
||||
} else {
|
||||
i18n.global.locale = "en";
|
||||
}
|
||||
};
|
||||
return { changeLanguage };
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
.home{
|
||||
.logo{
|
||||
display block
|
||||
width 620px
|
||||
height 280px
|
||||
margin 30px auto 10px
|
||||
}
|
||||
.link{
|
||||
display flex
|
||||
flex-direction row
|
||||
flex-wrap nowrap
|
||||
align-items center
|
||||
justify-content center
|
||||
margin 24px auto
|
||||
.btn{
|
||||
display block
|
||||
width 136px
|
||||
height 46px
|
||||
line-height 46px
|
||||
margin 0 10px
|
||||
border-radius 8px
|
||||
text-align center
|
||||
font-weight bold
|
||||
font-size: 14px;
|
||||
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>
|
||||
|
||||
10
frontend/vue.config.js
Normal file
10
frontend/vue.config.js
Normal file
@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
// The build file does not use the hash file name
|
||||
// 构建文件不使用hash文件名
|
||||
filenameHashing: false,
|
||||
// Package the css into a separate file
|
||||
// 将css打包到单独的文件
|
||||
css: {
|
||||
extract: "true"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user