From 7681c53bde3be85af9c7f4ed67b34d14970f1740 Mon Sep 17 00:00:00 2001
From: 0xJacky <me@jackyu.cn>
Date: Mon, 1 Aug 2022 10:18:18 +0800
Subject: [PATCH] [frontend-next] Added vite-plugin-build-id

---
 frontend-next/components.d.ts                 |  1 -
 frontend-next/package.json                    |  5 ++-
 .../src/components/CodeEditor/CodeEditor.vue  |  2 +-
 frontend-next/src/views/domain/DomainEdit.vue | 36 ++++++++++------
 frontend-next/src/views/other/About.vue       |  4 +-
 frontend-next/version.json                    |  1 +
 frontend-next/vite.config.ts                  |  6 ++-
 frontend-next/yarn.lock                       | 43 +++++++++++++------
 8 files changed, 65 insertions(+), 33 deletions(-)
 create mode 100644 frontend-next/version.json

diff --git a/frontend-next/components.d.ts b/frontend-next/components.d.ts
index 9959a464..af71a6ea 100644
--- a/frontend-next/components.d.ts
+++ b/frontend-next/components.d.ts
@@ -7,7 +7,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AAvatar: typeof import('ant-design-vue/es')['Avatar']
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
diff --git a/frontend-next/package.json b/frontend-next/package.json
index f710c2d8..244e064d 100644
--- a/frontend-next/package.json
+++ b/frontend-next/package.json
@@ -1,11 +1,11 @@
 {
     "name": "nginx-ui-frontend-next",
     "private": true,
-    "version": "0.0.0",
+    "version": "1.5.0",
     "type": "commonjs",
     "scripts": {
         "dev": "vite",
-        "build": "vue-tsc --noEmit && vite build",
+        "build": "vite build",
         "preview": "vite preview",
         "gettext:extract": "vue-gettext-extract",
         "gettext:compile": "vue-gettext-compile"
@@ -21,6 +21,7 @@
         "pinia": "^2.0.17",
         "pinia-plugin-persistedstate": "^1.6.3",
         "reconnecting-websocket": "^4.4.0",
+        "vite-plugin-build-id": "^0.1.1",
         "vue": "^3.2.37",
         "vue-chartjs": "^4.1.1",
         "vue-router": "4",
diff --git a/frontend-next/src/components/CodeEditor/CodeEditor.vue b/frontend-next/src/components/CodeEditor/CodeEditor.vue
index fa14b9c8..b7823f39 100644
--- a/frontend-next/src/components/CodeEditor/CodeEditor.vue
+++ b/frontend-next/src/components/CodeEditor/CodeEditor.vue
@@ -11,7 +11,7 @@ const {content} = defineProps(['content'])
         v-model:value="content"
         lang="nginx"
         theme="monokai"
-        style="height: 300px"/>
+        style="min-height: 100vh"/>
 </template>
 
 <style scoped>
diff --git a/frontend-next/src/views/domain/DomainEdit.vue b/frontend-next/src/views/domain/DomainEdit.vue
index f07b7c93..2366f9a4 100644
--- a/frontend-next/src/views/domain/DomainEdit.vue
+++ b/frontend-next/src/views/domain/DomainEdit.vue
@@ -109,7 +109,7 @@ function disable() {
 <template>
     <div>
         <a-card :bordered="false">
-            <template v-slot:title>
+            <template #title>
                 <span style="margin-right: 10px">{{ interpolate($gettext('Edit %{n}'), {n: name}) }}</span>
                 <a-tag color="blue" v-if="enabled">
                     {{ $gettext('Enabled') }}
@@ -118,14 +118,18 @@ function disable() {
                     {{ $gettext('Disabled') }}
                 </a-tag>
             </template>
-            <template v-slot:extra>
-                <a-switch size="small" v-model:checked="advance_mode" @change="on_mode_change"/>
-                <template v-if="advance_mode">
-                    {{ $gettext('Advance Mode') }}
-                </template>
-                <template v-else>
-                    {{ $gettext('Basic Mode') }}
-                </template>
+            <template #extra>
+                <div class="mode-switch">
+                    <div class="switch">
+                        <a-switch size="small" v-model:checked="advance_mode" @change="on_mode_change"/>
+                    </div>
+                    <template v-if="advance_mode">
+                        <div>{{ $gettext('Advance Mode') }}</div>
+                    </template>
+                    <template v-else>
+                        <div>{{ $gettext('Basic Mode') }}</div>
+                    </template>
+                </div>
             </template>
 
             <transition name="slide-fade">
@@ -172,13 +176,19 @@ function disable() {
     box-shadow: unset;
 }
 
+.mode-switch {
+    display: flex;
+
+    .switch {
+        display: flex;
+        align-items: center;
+        margin-right: 5px;
+    }
+}
+
 .domain-edit-container {
     max-width: 800px;
     margin: 0 auto;
-
-    /deep/ .ant-form-item-label > label::after {
-        content: none;
-    }
 }
 
 .slide-fade-enter-active {
diff --git a/frontend-next/src/views/other/About.vue b/frontend-next/src/views/other/About.vue
index 8f1507b2..42a0dfc6 100644
--- a/frontend-next/src/views/other/About.vue
+++ b/frontend-next/src/views/other/About.vue
@@ -5,9 +5,9 @@ import logo from '@/assets/img/logo.png'
 const {$gettext} = gettext
 
 const this_year = new Date().getFullYear()
-const version = import.meta.env.VITE_APP_VERSION
+const version = import.meta.env.VITE_APP_VERSION // import.meta.env.VITE_APP_VERSION
 const build_id = import.meta.env.VITE_APP_TOTAL_BUILD ?? $gettext('Development Mode')
-const api_root = import.meta.env.VITE_API_ROOT
+console.log(import.meta)
 </script>
 
 <template>
diff --git a/frontend-next/version.json b/frontend-next/version.json
new file mode 100644
index 00000000..398dd01b
--- /dev/null
+++ b/frontend-next/version.json
@@ -0,0 +1 @@
+{"version":"1.5.0","build_id":6,"total_build":76}
\ No newline at end of file
diff --git a/frontend-next/vite.config.ts b/frontend-next/vite.config.ts
index f9ff74ee..26b8db04 100644
--- a/frontend-next/vite.config.ts
+++ b/frontend-next/vite.config.ts
@@ -5,6 +5,7 @@ import Components from 'unplugin-vue-components/vite'
 import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
 import {fileURLToPath, URL} from 'url'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import vitePluginBuildId from 'vite-plugin-build-id'
 
 
 // https://vitejs.dev/config/
@@ -24,7 +25,7 @@ export default defineConfig({
             '.less'
         ]
     },
-    plugins: [vue(), vueJsx(),
+    plugins: [vue(), vueJsx(), vitePluginBuildId(),
         Components({
             resolvers: [AntDesignVueResolver({importStyle: false})]
         }),
@@ -51,6 +52,9 @@ export default defineConfig({
             },
         }),
     ],
+    define: {
+        'APP_VERSION': JSON.stringify(process.env.npm_package_version)
+    },
     css: {
         preprocessorOptions: {
             less: {
diff --git a/frontend-next/yarn.lock b/frontend-next/yarn.lock
index e0ec95ba..52a10644 100644
--- a/frontend-next/yarn.lock
+++ b/frontend-next/yarn.lock
@@ -408,10 +408,10 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
   integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
-"@types/node@*":
-  version "18.6.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.2.tgz#ffc5f0f099d27887c8d9067b54e55090fcd54126"
-  integrity sha512-KcfkBq9H4PI6Vpu5B/KoPeuVDAbmi+2mDBqGPGUgoL7yXQtcWGu2vJWmmRkneWK3Rh0nIAX192Aa87AqKHYChQ==
+"@types/node@*", "@types/node@^18.6.3":
+  version "18.6.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.3.tgz#4e4a95b6fe44014563ceb514b2598b3e623d1c98"
+  integrity sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -963,9 +963,9 @@ copy-anything@^2.0.1:
     is-what "^3.14.1"
 
 core-js@^3.15.1:
-  version "3.24.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.24.0.tgz#4928d4e99c593a234eb1a1f9abd3122b04d3ac57"
-  integrity sha512-IeOyT8A6iK37Ep4kZDD423mpi6JfPRoPUdQwEWYiGolvn4o6j2diaRzNfDfpTdu3a5qMbrGUzKUpYpRY8jXCkQ==
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.24.1.tgz#cf7724d41724154010a6576b7b57d94c5d66e64f"
+  integrity sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==
 
 cosmiconfig@^7.0.1:
   version "7.0.1"
@@ -1444,7 +1444,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-"glob@5 - 7", glob@^7.2.0:
+"glob@5 - 7", glob@^7.1.3, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -2251,6 +2251,13 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 rollup@^2.75.6:
   version "2.77.2"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.2.tgz#6b6075c55f9cc2040a5912e6e062151e42e2c4e3"
@@ -2469,7 +2476,7 @@ tslib@^2.0.3, tslib@^2.3.0, tslib@^2.3.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-"typescript@2 - 4", typescript@^4.6.4:
+"typescript@2 - 4", typescript@^4.6.4, typescript@^4.7.4:
   version "4.7.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
   integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
@@ -2535,6 +2542,16 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+vite-plugin-build-id@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-build-id/-/vite-plugin-build-id-0.1.1.tgz#dbd95512f2e53949d06e426216b4893b624a828a"
+  integrity sha512-dnrAlSxq9yzhCM+31nMOUh8pYnhuNk76BZuT31d5GtTD7ilr+SrJoqK5NOQTAZe1+Zkp3kq8xFlgOoVpS4RCCg==
+  dependencies:
+    "@types/node" "^18.6.3"
+    rimraf "^3.0.2"
+    typescript "^4.7.4"
+    vite "^3.0.4"
+
 vite-plugin-html@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/vite-plugin-html/-/vite-plugin-html-3.2.0.tgz#0d4df9900642a321a139f1c25c05195ba9d0ec79"
@@ -2553,10 +2570,10 @@ vite-plugin-html@^3.2.0:
     node-html-parser "^5.3.3"
     pathe "^0.2.0"
 
-vite@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.3.tgz#c7b2ed9505a36a04be1d5d23aea4ea6fc028043f"
-  integrity sha512-sDIpIcl3mv1NUaSzZwiXGEy1ZoWwwC2vkxUHY6yiDacR6zf//ZFuBJrozO62gedpE43pmxnLATNR5IYUdAEkMQ==
+vite@^3.0.0, vite@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.4.tgz#c61688d6b97573e96cf5ac25f2d68597b5ce68e8"
+  integrity sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==
   dependencies:
     esbuild "^0.14.47"
     postcss "^8.4.14"