From 3d1362b997aee241e966eeef97d9223234def4db Mon Sep 17 00:00:00 2001
From: umbor <14857490+umbors@users.noreply.github.com>
Date: Sat, 10 Jun 2023 23:24:09 +0800
Subject: [PATCH] Change Vue page with route name as page title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

研究了下发现$route.name不能用i18n给的变量赋值，于是把index.vue里的title部分挪到各个文件里，并微调了下缩进保持格式一致（显示修改很多，实际只有几行）

I don't think using route.name as H1 title is a good choice since variable from i18n cannot be assigned to $route.name. So I move title part of index.vue to separate files and adjust indentation to make it looks clear.
---
 webui/src/pages/index.vue         |   3 -
 webui/src/pages/index/bangumi.vue |  43 +++----
 webui/src/pages/index/config.vue  |  53 +++++----
 webui/src/pages/index/log.vue     | 179 +++++++++++++++---------------
 webui/src/pages/index/player.vue  |  38 ++++---
 5 files changed, 165 insertions(+), 151 deletions(-)

diff --git a/webui/src/pages/index.vue b/webui/src/pages/index.vue
index d638a790..97175bb5 100644
--- a/webui/src/pages/index.vue
+++ b/webui/src/pages/index.vue
@@ -13,15 +13,12 @@ definePage({
       <ab-sidebar />
 
       <div layout-content>
-        <ab-page-title :title="$route.name"></ab-page-title>
 
-        <div overflow-auto mt-12px flex-grow>
           <RouterView v-slot="{ Component }">
             <KeepAlive>
               <component :is="Component" />
             </KeepAlive>
           </RouterView>
-        </div>
       </div>
     </main>
   </div>
diff --git a/webui/src/pages/index/bangumi.vue b/webui/src/pages/index/bangumi.vue
index 811bddff..508c3192 100644
--- a/webui/src/pages/index/bangumi.vue
+++ b/webui/src/pages/index/bangumi.vue
@@ -93,25 +93,28 @@ definePage({
 </script>
 
 <template>
-  <div flex="~ wrap" gap-y-12px gap-x-50px>
-    <ab-bangumi-card
-      v-for="i in data"
-      :key="i.id"
-      :class="[i.deleted && 'grayscale']"
-      :poster="i.poster_link ?? ''"
-      :name="i.official_title"
-      :season="i.season"
-      @click="() => open(i)"
-    ></ab-bangumi-card>
-
-    <ab-edit-rule
-      v-model:show="editRule.show"
-      v-model:rule="editRule.item"
-      @enable="(id) => enableRule(id)"
-      @delete-file="
-        (type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
-      "
-      @apply="(rule) => updateRule(rule)"
-    ></ab-edit-rule>
+  <ab-page-title :title="$t('homepage.title')"></ab-page-title>
+  <div overflow-auto mt-12px flex-grow>
+    <div flex="~ wrap" gap-y-12px gap-x-50px>
+      <ab-bangumi-card
+        v-for="i in data"
+        :key="i.id"
+        :class="[i.deleted && 'grayscale']"
+        :poster="i.poster_link ?? ''"
+        :name="i.official_title"
+        :season="i.season"
+        @click="() => open(i)"
+      ></ab-bangumi-card>
+  
+      <ab-edit-rule
+        v-model:show="editRule.show"
+        v-model:rule="editRule.item"
+        @enable="(id) => enableRule(id)"
+        @delete-file="
+          (type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
+        "
+        @apply="(rule) => updateRule(rule)"
+      ></ab-edit-rule>
+    </div>
   </div>
 </template>
diff --git a/webui/src/pages/index/config.vue b/webui/src/pages/index/config.vue
index bdb6b3a3..22e175ac 100644
--- a/webui/src/pages/index/config.vue
+++ b/webui/src/pages/index/config.vue
@@ -1,4 +1,10 @@
+<script lang="ts">
+
+</script>
 <script lang="ts" setup>
+import { string } from 'yargs';
+import { thisTypeAnnotation } from '@babel/types';
+
 const { getConfig, setConfig } = useConfigStore();
 
 getConfig();
@@ -9,30 +15,33 @@ definePage({
 </script>
 
 <template>
-  <div h-full flex="~ col">
-    <div grid="~ cols-2" gap-20px mb-auto>
-      <div space-y-20px>
-        <config-normal></config-normal>
-
-        <config-parser></config-parser>
-
-        <config-download></config-download>
-
-        <config-manage></config-manage>
+  <ab-page-title :title="$t('config.title')"></ab-page-title>
+  <div overflow-auto mt-12px flex-grow>
+    <div h-full flex="~ col">
+      <div grid="~ cols-2" gap-20px mb-auto>
+        <div space-y-20px>
+          <config-normal></config-normal>
+  
+          <config-parser></config-parser>
+  
+          <config-download></config-download>
+  
+          <config-manage></config-manage>
+        </div>
+  
+        <div space-y-20px>
+          <config-notification></config-notification>
+  
+          <config-proxy></config-proxy>
+  
+          <config-player></config-player>
+        </div>
       </div>
-
-      <div space-y-20px>
-        <config-notification></config-notification>
-
-        <config-proxy></config-proxy>
-
-        <config-player></config-player>
+  
+      <div fx-cer justify-end gap-8px mt-20px>
+        <ab-button type="warn" @click="getConfig">{{$t('config.cancel')}}</ab-button>
+        <ab-button @click="setConfig">{{$t('config.apply')}}</ab-button>
       </div>
     </div>
-
-    <div fx-cer justify-end gap-8px mt-20px>
-      <ab-button type="warn" @click="getConfig">Cancel</ab-button>
-      <ab-button @click="setConfig">Apply</ab-button>
-    </div>
   </div>
 </template>
diff --git a/webui/src/pages/index/log.vue b/webui/src/pages/index/log.vue
index 94431fa0..bcd3bf17 100644
--- a/webui/src/pages/index/log.vue
+++ b/webui/src/pages/index/log.vue
@@ -16,96 +16,99 @@ definePage({
 </script>
 
 <template>
-  <div flex="~ wrap" gap-12px>
-    <ab-container title="Log" w-660px grow>
-      <div
-        rounded-10px
-        border="1px solid black"
-        overflow-auto
-        p-10px
-        max-h-60vh
-      >
-        <pre text-main>{{ log }}</pre>
-      </div>
-
-      <div flex="~ justify-end" space-x-10px mt-12px>
-        <ab-button type="warn" size="small" @click="reset">Reset</ab-button>
-        <ab-button size="small" @click="copy">Copy</ab-button>
-      </div>
-    </ab-container>
-
-    <div grow w-500px space-y-20px>
-      <ab-container title="Contact Infomation">
-        <div space-y-12px>
-          <ab-label label="Github">
-            <ab-button
-              size="small"
-              link="https://github.com/EstrellaXD/Auto_Bangumi"
-              target="_blank"
-            >
-              Go
-            </ab-button>
-          </ab-label>
-
-          <ab-label label="WebUI Repo">
-            <ab-button
-              size="small"
-              link="https://github.com/Rewrite0/Auto_Bangumi_WebUI"
-              target="_blank"
-            >
-              Go
-            </ab-button>
-          </ab-label>
-
-          <div line></div>
-
-          <ab-label label="Twitter">
-            <ab-button
-              size="small"
-              link="https://twitter.com/Estrella_Pan"
-              target="_blank"
-            >
-              Go
-            </ab-button>
-          </ab-label>
-
-          <ab-label label="Telegram Group">
-            <ab-button
-              size="small"
-              link="https://t.me/autobangumi"
-              target="_blank"
-            >
-              Join
-            </ab-button>
-          </ab-label>
-        </div>
-      </ab-container>
-
-      <ab-container title="Bug Report">
-        <div space-y-12px>
-          <ab-button
-            mx-auto
-            text-16px
-            w-300px
-            h-46px
-            rounded-10px
-            link="https://github.com/EstrellaXD/Auto_Bangumi/issues"
-            >Github Issue</ab-button
-          >
-
-          <div line></div>
-
-          <ab-button
-            mx-auto
-            text-16px
-            w-300px
-            h-46px
-            rounded-10px
-            link="mailto:estrellaxd05@gmail.com"
-            >Email Contact</ab-button
-          >
+  <ab-page-title :title="$t('log.title')"></ab-page-title>
+  <div overflow-auto mt-12px flex-grow>
+    <div flex="~ wrap" gap-12px>
+      <ab-container :title="$t('log.title')" w-660px grow>
+        <div
+          rounded-10px
+          border="1px solid black"
+          overflow-auto
+          p-10px
+          max-h-60vh
+        >
+          <pre text-main>{{ log }}</pre>
+        </div>
+  
+        <div flex="~ justify-end" space-x-10px mt-12px>
+          <ab-button type="warn" size="small" @click="reset">{{$t('log.reset')}}</ab-button>
+          <ab-button size="small" @click="copy">{{$t('log.copy')}}</ab-button>
         </div>
       </ab-container>
+  
+      <div grow w-500px space-y-20px>
+        <ab-container :title="$t('log.contactinfo')">
+          <div space-y-12px>
+            <ab-label label="Github">
+              <ab-button
+                size="small"
+                link="https://github.com/EstrellaXD/Auto_Bangumi"
+                target="_blank"
+              >
+              {{$t('log.go')}}
+              </ab-button>
+            </ab-label>
+  
+            <ab-label label="WebUI Repo">
+              <ab-button
+                size="small"
+                link="https://github.com/Rewrite0/Auto_Bangumi_WebUI"
+                target="_blank"
+              >
+              {{$t('log.go')}}
+              </ab-button>
+            </ab-label>
+  
+            <div line></div>
+  
+            <ab-label label="Twitter">
+              <ab-button
+                size="small"
+                link="https://twitter.com/Estrella_Pan"
+                target="_blank"
+              >
+              {{$t('log.go')}}
+              </ab-button>
+            </ab-label>
+  
+            <ab-label label="Telegram Group">
+              <ab-button
+                size="small"
+                link="https://t.me/autobangumi"
+                target="_blank"
+              >
+              {{$t('log.join')}}
+              </ab-button>
+            </ab-label>
+          </div>
+        </ab-container>
+  
+        <ab-container :title="$t('log.bugrepo')">
+          <div space-y-12px>
+            <ab-button
+              mx-auto
+              text-16px
+              w-300px
+              h-46px
+              rounded-10px
+              link="https://github.com/EstrellaXD/Auto_Bangumi/issues"
+              >Github Issue</ab-button
+            >
+  
+            <div line></div>
+  
+            <ab-button
+              mx-auto
+              text-16px
+              w-300px
+              h-46px
+              rounded-10px
+              link="mailto:estrellaxd05@gmail.com"
+              >Email Contact</ab-button
+            >
+          </div>
+        </ab-container>
+      </div>
     </div>
   </div>
 </template>
diff --git a/webui/src/pages/index/player.vue b/webui/src/pages/index/player.vue
index c97ec45a..5c131681 100644
--- a/webui/src/pages/index/player.vue
+++ b/webui/src/pages/index/player.vue
@@ -7,22 +7,24 @@ const { url } = storeToRefs(usePlayerStore());
 </script>
 
 <template>
-  <template v-if="url === ''">
-    <div wh-full f-cer text-h1 text-primary>
-      <RouterLink to="/config" hover:underline
-        >Please set up the media player</RouterLink
-      >
-    </div>
-  </template>
-
-  <iframe
-    v-else
-    :src="url"
-    frameborder="0"
-    allowfullscreen="true"
-    w-full
-    h-full
-    flex-1
-    rounded-12px
-  ></iframe>
+  <ab-page-title :title="$t('player.title')"></ab-page-title>
+  <div overflow-auto mt-12px flex-grow>
+    <template v-if="url === ''">
+      <div wh-full f-cer text-h1 text-primary>
+        <RouterLink to="/config" hover:underline
+          >{{ $t('player.hit')}}</RouterLink
+        >
+      </div>
+    </template>    
+    <iframe
+      v-else
+      :src="url"
+      frameborder="0"
+      allowfullscreen="true"
+      w-full
+      h-full
+      flex-1
+      rounded-12px
+    ></iframe>
+  </div>
 </template>