From c53f5f9c49ef8a2b9fa7de4f1c172af6a18c6af9 Mon Sep 17 00:00:00 2001
From: umbor <14857490+umbors@users.noreply.github.com>
Date: Sat, 10 Jun 2023 23:16:51 +0800
Subject: [PATCH 1/7] Add i18n basic components

Add i18n basic components
---
 webui/package.json                |   2 +
 webui/src/locales/index.ts        |  13 +++
 webui/src/locales/lang/en.yaml    | 127 ++++++++++++++++++++++++++++++
 webui/src/locales/lang/zh-CN.yaml | 126 +++++++++++++++++++++++++++++
 webui/src/main.ts                 |   2 +
 webui/vite.config.ts              |   5 ++
 6 files changed, 275 insertions(+)
 create mode 100644 webui/src/locales/index.ts
 create mode 100644 webui/src/locales/lang/en.yaml
 create mode 100644 webui/src/locales/lang/zh-CN.yaml

diff --git a/webui/package.json b/webui/package.json
index b2b1258a..b49ccc44 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -23,11 +23,13 @@
     "naive-ui": "^2.34.4",
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.3.0-beta.19",
     "vue-router": "^4.2.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.6",
     "@icon-park/vue-next": "^1.4.2",
+    "@intlify/unplugin-vue-i18n": "^0.11.0",
     "@storybook/addon-essentials": "^7.0.12",
     "@storybook/addon-interactions": "^7.0.12",
     "@storybook/addon-links": "^7.0.12",
diff --git a/webui/src/locales/index.ts b/webui/src/locales/index.ts
new file mode 100644
index 00000000..cb6d0b77
--- /dev/null
+++ b/webui/src/locales/index.ts
@@ -0,0 +1,13 @@
+import { createI18n } from 'vue-i18n';
+import messages from '@intlify/unplugin-vue-i18n/messages'
+
+const i18n = createI18n({
+    legacy: false,
+    locale: 'zh-CN',
+    globalInjection: true,
+    silentTranslationWarn: true,
+    globalInstall: true,
+    messages
+  })
+
+export default i18n;
\ No newline at end of file
diff --git a/webui/src/locales/lang/en.yaml b/webui/src/locales/lang/en.yaml
new file mode 100644
index 00000000..e23fcf00
--- /dev/null
+++ b/webui/src/locales/lang/en.yaml
@@ -0,0 +1,127 @@
+login:
+  title: 'Login'
+  username: 'Username'
+  password: 'Password'
+  loginbtn: 'Login'
+  default: 'Default'
+
+sidebar:
+  title: 'Menu'
+  homepage: 'HomePage'
+  player: 'Player'
+  log: 'Log'
+  config: 'Config'
+  logout: 'Logout'
+
+topbar:
+  start: 'Start'
+  pause: 'Pause'
+  restart: 'Restart'
+  shutdown: 'Shutdown'
+  resetrule: 'Reset Rule'
+
+  profile: 
+    title: 'Profile'
+    poptitle: 'Change Account'
+    username: 'Username'
+    password: 'Password'
+    updatebtn: 'Update'
+    
+  add:
+    title: 'Add Bangumi'
+    rsslink: 'RSS Link'
+    placeholder: 'Please enter the RSS link'
+    analyse: 'Analyse'
+
+homepage:
+  title: 'Bangumi List'
+  rule: 
+    officaltitle: 'Official Title'
+    year: 'Year'
+    season: 'Season'
+    offset: 'Offset'
+    exclude: 'Exclude'
+    enable: 'Enable'
+    disable: 'Disable'
+    delete: 'Delete'
+    apply: 'Apply'
+    yesbtn: 'Yes'
+    nobtn: 'No'
+    enablehit: 'Do you want to enable this rule?'
+    deletehit: 'Delete Local File?'
+    enablerule: 'Enable Rule'
+    editrule: 'Edit Rule'
+
+player:
+  title: 'Player'
+  hit: 'Please set up the media player'
+
+log:
+  title: 'Log'
+  reset: 'Reset'
+  copy: 'Copy'
+  contactinfo: 'Contact Infomation'
+  go: 'Go'
+  join: 'Join'
+  bugrepo: 'Bug Report'
+
+config:
+  title: 'Config'
+  normalset: 
+    title: 'Normal Setting'
+    rssintvl: 'Interval Time of Rss'
+    renameintvl: 'Interval Time of Rename'
+    webport: 'WebUI Port'
+    debug: 'Debug'
+
+  parserset: 
+    title: 'Parser Setting'
+    enable: 'Enable'
+    source: 'Source'
+    token: 'Token'
+    url: 'Custom Url'
+    language: 'Language'
+    type: 'Parser Type'
+    exclude: 'Exclude'
+
+  downloaderset: 
+    title: 'Downloader Setting'
+    type: 'Downloader Type'
+    host: 'Host'
+    username: 'Username'
+    password: 'Password'
+    path: 'Download Path'
+    ssl: 'SSL'
+  
+  manageset: 
+    title: 'Manage SEtting'
+    enable: 'Enable'
+    method: 'Rename Method'
+    eps: 'EPS complete'
+    grouptag: 'Add Group Tag'
+    deletebadtorr: 'Delete Bad Torrent'
+
+  notificationset: 
+    title: 'Notification Setting'
+    enable: 'Enable'
+    type: 'Type'
+    token: 'Token'
+    chatid: 'Chat ID'
+
+  proxyset: 
+    title: 'Proxy Setting'
+    enable: 'Enable'
+    type: 'Proxy Type'
+    host: 'Host'
+    port: 'Port'
+    username: 'Username'
+    password: 'Password'
+
+  mediaplayerset: 
+    title: 'Media Player Setting'
+    type: 'type'
+    url: 'url'
+
+  cancel: 'Cancel'
+  apply: 'Apply'
+  
\ No newline at end of file
diff --git a/webui/src/locales/lang/zh-CN.yaml b/webui/src/locales/lang/zh-CN.yaml
new file mode 100644
index 00000000..2a45e847
--- /dev/null
+++ b/webui/src/locales/lang/zh-CN.yaml
@@ -0,0 +1,126 @@
+login:
+  title: '登录'
+  username: '用户名'
+  password: '密码'
+  loginbtn: '登录'
+  default: '默认账号密码 '
+
+sidebar:
+  title: '菜单'
+  homepage: '主页'
+  player: '播放器'
+  log: '日志'
+  config: '设置'
+  logout: '退出'
+
+topbar:
+  start: '启动'
+  pause: '暂停'
+  restart: '重启'
+  shutdown: '关闭'
+  resetrule: '重置规则'
+
+  profile: 
+    title: '账户资料'
+    poptitle: '修改账户信息'
+    username: '用户名'
+    password: '密码'
+    updatebtn: '更新'
+
+  add:
+    title: '添加番剧'
+    rsslink: 'RSS链接'
+    placeholder: '请输入RSS链接'
+    analyse: '分析'
+
+homepage:
+  title: '番剧列表'
+  rule: 
+    officaltitle: '官方名称'
+    year: '年份'
+    season: '季度'
+    offset: '偏移'
+    exclude: '排除'
+    enable: '启用'
+    disable: '禁用'
+    delete: '删除'
+    apply: '应用'
+    yesbtn: '是'
+    nobtn: '否'
+    enablehit: '确定要让规则生效吗？'
+    deletehit: '删除本地文件？'
+    enablerule: '启用规则'
+    editrule: '编辑规则'
+
+player:
+  title: '播放器'
+  hit: '请设置播放器地址'
+
+log:
+  title: '日志'
+  reset: '重置'
+  copy: '复制'
+  contactinfo: '联系方式'
+  go: '访问'
+  join: '加入'
+  bugrepo: 'Bug反馈'
+
+config:
+  title: '系统设置'
+  normalset: 
+    title: '一般设置'
+    rssintvl: 'RSS间隔'
+    renameintvl: '重命名间隔'
+    webport: '网页端口'
+    debug: '调试'
+
+  parserset: 
+    title: '解析设置'
+    enable: '启用'
+    source: '数据源'
+    token: 'Token'
+    url: '自定义网址'
+    language: '语言'
+    type: '解析类型'
+    exclude: '排除'
+
+  downloaderset: 
+    title: '下载设置'
+    type: '下载器类型'
+    host: '下载器地址'
+    username: '用户名'
+    password: '密码'
+    path: '下载地址'
+    ssl: 'SSL'
+  
+  manageset: 
+    title: '番剧管理设置'
+    enable: '启用'
+    method: '重命名方式'
+    eps: 'EPS完成'
+    grouptag: '添加组标签'
+    deletebadtorr: '删除坏种'
+
+  notificationset: 
+    title: '推送设置'
+    enable: '启用'
+    type: '类型'
+    token: 'Token'
+    chatid: 'Chat ID'
+
+  proxyset: 
+    title: '代理设置'
+    enable: '启用'
+    type: '类型'
+    host: '地址'
+    port: '端口'
+    username: '用户名'
+    password: '密码'
+
+  mediaplayerset: 
+    title: '播放器设置'
+    type: '类型'
+    url: '播放器地址'
+
+  cancel: '取消'
+  apply: '应用'
diff --git a/webui/src/main.ts b/webui/src/main.ts
index 7dd15cc8..f0d24b1b 100644
--- a/webui/src/main.ts
+++ b/webui/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { router } from './router';
+import i18n from './locales';
 import App from './App.vue';
 
 import '@unocss/reset/tailwind-compat.css';
@@ -11,4 +12,5 @@ const pinia = createPinia();
 const app = createApp(App);
 app.use(router);
 app.use(pinia);
+app.use(i18n);
 app.mount('#app');
diff --git a/webui/vite.config.ts b/webui/vite.config.ts
index 267af685..eccc5e32 100644
--- a/webui/vite.config.ts
+++ b/webui/vite.config.ts
@@ -6,6 +6,8 @@ import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import VueRouter from 'unplugin-vue-router/vite';
 import { VueRouterAutoImports } from 'unplugin-vue-router';
+import vueI18n from '@intlify/unplugin-vue-i18n/vite';
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -34,6 +36,9 @@ export default defineConfig({
         'src/components/setting',
       ],
     }),
+    vueI18n({
+        include: path.resolve(__dirname, './src/locales/lang/**')
+    }),
   ],
   css: {
     preprocessorOptions: {

From 513f81798c70d56ee78a8d10ded8c1c26bc6f98d Mon Sep 17 00:00:00 2001
From: umbor <14857490+umbors@users.noreply.github.com>
Date: Sat, 10 Jun 2023 23:17:48 +0800
Subject: [PATCH 2/7] Change Vue page to use i18n plugin

---
 webui/src/components/ab-add-bangumi.vue       |  8 +++---
 webui/src/components/ab-change-account.vue    | 12 ++++-----
 webui/src/components/ab-edit-rule.vue         | 24 +++++++++--------
 webui/src/components/ab-rule.vue              | 12 +++++----
 webui/src/components/ab-status-bar.vue        | 13 ++++++++--
 webui/src/components/layout/ab-sidebar.vue    | 19 +++++++-------
 webui/src/components/layout/ab-topbar.vue     | 26 +++++++++++++------
 .../components/setting/config-download.vue    | 16 +++++++-----
 .../src/components/setting/config-manage.vue  | 14 +++++-----
 .../src/components/setting/config-normal.vue  | 12 +++++----
 .../setting/config-notification.vue           | 12 +++++----
 .../src/components/setting/config-parser.vue  | 18 +++++++------
 .../src/components/setting/config-player.vue  |  6 ++---
 webui/src/components/setting/config-proxy.vue | 16 +++++++-----
 webui/src/pages/login.vue                     | 10 +++----
 15 files changed, 127 insertions(+), 91 deletions(-)

diff --git a/webui/src/components/ab-add-bangumi.vue b/webui/src/components/ab-add-bangumi.vue
index 4b630e69..0bfa0bc5 100644
--- a/webui/src/components/ab-add-bangumi.vue
+++ b/webui/src/components/ab-add-bangumi.vue
@@ -111,21 +111,21 @@ async function subscribe() {
 </script>
 
 <template>
-  <ab-popup v-model:show="show" title="Add Bangumi" css="w-360px">
+  <ab-popup v-model:show="show" :title="$t('topbar.add.title')" css="w-360px">
     <div v-if="!analysis.next" space-y-12px>
       <ab-setting
         v-model:data="rss"
-        label="RSS Link"
+        :label="$t('topbar.add.rsslink')"
         type="input"
         :prop="{
-          placeholder: 'Please enter the RSS link',
+          placeholder: $t('topbar.add.placeholder'),
         }"
         :bottom-line="true"
       ></ab-setting>
 
       <div flex="~ justify-end">
         <ab-button size="small" :loading="analysis.loading" @click="analyser"
-          >Analyse</ab-button
+          >{{$t('topbar.add.analyse')}}</ab-button
         >
       </div>
     </div>
diff --git a/webui/src/components/ab-change-account.vue b/webui/src/components/ab-change-account.vue
index c44f15e9..02ab9e01 100644
--- a/webui/src/components/ab-change-account.vue
+++ b/webui/src/components/ab-change-account.vue
@@ -7,22 +7,22 @@ const { user, update } = useAuth();
 </script>
 
 <template>
-  <ab-popup v-model:show="show" title="Change Account" css="w-365px">
+  <ab-popup v-model:show="show" :title="$t('topbar.profile.poptitle')" css="w-365px">
     <div space-y-16px>
-      <ab-label label="Username">
+      <ab-label :label="$t('topbar.profile.username')">
         <input
           v-model="user.username"
           type="text"
-          placeholder="username"
+          :placeholder="$t('topbar.profile.username')"
           ab-input
         />
       </ab-label>
 
-      <ab-label label="Password">
+      <ab-label :label="$t('topbar.profile.password')">
         <input
           v-model="user.password"
           type="password"
-          placeholder="password"
+          :placeholder="$t('topbar.profile.password')"
           ab-input
         />
       </ab-label>
@@ -30,7 +30,7 @@ const { user, update } = useAuth();
       <div line></div>
 
       <div flex="~ justify-end">
-        <ab-button size="small" @click="update">Update</ab-button>
+        <ab-button size="small" @click="update">{{$t('topbar.profile.updatebtn')}}</ab-button>
       </div>
     </div>
   </ab-popup>
diff --git a/webui/src/components/ab-edit-rule.vue b/webui/src/components/ab-edit-rule.vue
index 2cfbdac5..d2389a26 100644
--- a/webui/src/components/ab-edit-rule.vue
+++ b/webui/src/components/ab-edit-rule.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { BangumiRule } from '#/bangumi';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n({ useScope: 'global' });
 const emit = defineEmits<{
   (e: 'apply', rule: BangumiRule): void;
   (e: 'enable', id: number): void;
@@ -52,9 +54,9 @@ function emitEnable() {
 
 const popupTitle = computed(() => {
   if (rule.value.deleted) {
-    return 'Enable Rule';
+    return t('homepage.rule.enablerule');
   } else {
-    return 'Edit Rule';
+    return t('homepage.rule.editrule');
   }
 });
 
@@ -70,15 +72,15 @@ const boxSize = computed(() => {
 <template>
   <ab-popup v-model:show="show" :title="popupTitle" :css="boxSize">
     <div v-if="rule.deleted">
-      <div>Do you want to enable this rule?</div>
+      <div>{{$t('homepage.rule.enablehit')}}</div>
 
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
         <ab-button size="small" type="warn" @click="() => emitEnable()"
-          >Yes</ab-button
+          >{{$t('homepage.rule.yesbtn')}}</ab-button
         >
-        <ab-button size="small" @click="() => close()">No</ab-button>
+        <ab-button size="small" @click="() => close()">{{$t('homepage.rule.nobtn')}}</ab-button>
       </div>
     </div>
 
@@ -90,28 +92,28 @@ const boxSize = computed(() => {
           size="small"
           type="warn"
           @click="() => showDeleteFileDialog('disable')"
-          >Disable</ab-button
+          >{{$t('homepage.rule.disable')}}</ab-button
         >
         <ab-button
           size="small"
           type="warn"
           @click="() => showDeleteFileDialog('delete')"
-          >Delete</ab-button
+          >{{$t('homepage.rule.delete')}}</ab-button
         >
-        <ab-button size="small" @click="emitApply">Apply</ab-button>
+        <ab-button size="small" @click="emitApply">{{$t('homepage.rule.apply')}}</ab-button>
       </div>
     </div>
 
     <ab-popup v-model:show="deleteFileDialog.show" title="Delete">
-      <div>Delete Local File?</div>
+      <div>{{$t('homepage.rule.deletehit')}}</div>
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
         <ab-button size="small" type="warn" @click="() => emitdeleteFile(true)"
-          >Yes</ab-button
+          >{{$t('homepage.rule.yesbtn')}}</ab-button
         >
         <ab-button size="small" @click="() => emitdeleteFile(false)"
-          >No</ab-button
+          >{{$t('homepage.rule.nobtn')}}</ab-button
         >
       </div>
     </ab-popup>
diff --git a/webui/src/components/ab-rule.vue b/webui/src/components/ab-rule.vue
index d232dbc2..1fbce13f 100644
--- a/webui/src/components/ab-rule.vue
+++ b/webui/src/components/ab-rule.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { BangumiRule } from '#/bangumi';
 import type { SettingItem } from '#/components';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n({ useScope: 'global' });
 const rule = defineModel<BangumiRule>('rule', {
   required: true,
 });
@@ -9,7 +11,7 @@ const rule = defineModel<BangumiRule>('rule', {
 const items: SettingItem<BangumiRule>[] = [
   {
     configKey: 'official_title',
-    label: 'Officical Ttile',
+    label: t('homepage.rule.officaltitle'),
     type: 'input',
     prop: {
       type: 'text',
@@ -17,7 +19,7 @@ const items: SettingItem<BangumiRule>[] = [
   },
   {
     configKey: 'year',
-    label: 'Year',
+    label: t('homepage.rule.year'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -26,7 +28,7 @@ const items: SettingItem<BangumiRule>[] = [
   },
   {
     configKey: 'season',
-    label: 'Season',
+    label: t('homepage.rule.season'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -36,7 +38,7 @@ const items: SettingItem<BangumiRule>[] = [
   },
   {
     configKey: 'offset',
-    label: 'Offset',
+    label: t('homepage.rule.offset'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -45,7 +47,7 @@ const items: SettingItem<BangumiRule>[] = [
   },
   {
     configKey: 'filter',
-    label: 'Exclude',
+    label: t('homepage.rule.exclude'),
     type: 'dynamic-tags',
     bottomLine: true,
   },
diff --git a/webui/src/components/ab-status-bar.vue b/webui/src/components/ab-status-bar.vue
index 2b49f792..6dfe2f23 100644
--- a/webui/src/components/ab-status-bar.vue
+++ b/webui/src/components/ab-status-bar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { AddOne, More } from '@icon-park/vue-next';
+import { Earth, AddOne, More } from '@icon-park/vue-next';
 
 withDefaults(
   defineProps<{
@@ -17,13 +17,22 @@ withDefaults(
   }
 );
 
-defineEmits(['clickAdd']);
+defineEmits(['clickAdds']);
 </script>
 
 <template>
   <Menu>
     <div rel>
       <div fx-cer space-x-16px>
+        <Earth
+          theme="outline"
+          size="24"
+          fill="#fff"
+          is-btn
+          btn-click
+          @click="() => $emit('changeLang')"
+        />
+        
         <AddOne
           theme="outline"
           size="24"
diff --git a/webui/src/components/layout/ab-sidebar.vue b/webui/src/components/layout/ab-sidebar.vue
index b032038b..93648902 100644
--- a/webui/src/components/layout/ab-sidebar.vue
+++ b/webui/src/components/layout/ab-sidebar.vue
@@ -9,7 +9,8 @@ import {
   Play,
   SettingTwo,
 } from '@icon-park/vue-next';
-
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n({ useScope: 'global' });
 const props = withDefaults(
   defineProps<{
     open?: boolean;
@@ -28,39 +29,39 @@ const items = [
   {
     id: 1,
     icon: Home,
-    label: 'HomePage',
+    label: t('sidebar.homepage'),
     path: '/bangumi',
   },
   {
     id: 2,
     icon: Calendar,
-    label: 'Calendar',
+    label: t('sidebar.calendar'),
     path: '/calendar',
     hidden: true,
   },
   {
     id: 3,
     icon: Play,
-    label: 'Player',
+    label: t('sidebar.player'),
     path: '/player',
   },
   {
     id: 4,
     icon: Download,
-    label: 'Downloader',
+    label: t('sidebar.downloader'),
     path: '/downloader',
     hidden: true,
   },
   {
     id: 5,
     icon: Log,
-    label: 'Log',
+    label: t('sidebar.log'),
     path: '/log',
   },
   {
     id: 6,
     icon: SettingTwo,
-    label: 'Config',
+    label: t('sidebar.config'),
     path: '/config',
   },
 ];
@@ -88,7 +89,7 @@ const items = [
         @click="toggle"
       >
         <div :class="[!show && 'abs opacity-0']" transition-opacity>
-          <div text-h1>Menu</div>
+          <div text-h1>{{$t('sidebar.title')}}</div>
         </div>
 
         <MenuUnfold
@@ -138,7 +139,7 @@ const items = [
         @click="logout"
       >
         <Logout :size="24" />
-        <div text-h2>Logout</div>
+        <div text-h2>{{$t('sidebar.logout')}}</div>
       </div>
     </div>
   </div>
diff --git a/webui/src/components/layout/ab-topbar.vue b/webui/src/components/layout/ab-topbar.vue
index 2a2b8352..4e13dd3c 100644
--- a/webui/src/components/layout/ab-topbar.vue
+++ b/webui/src/components/layout/ab-topbar.vue
@@ -7,7 +7,8 @@ import {
   Refresh,
   Format,
 } from '@icon-park/vue-next';
-
+import { useI18n } from 'vue-i18n';
+const { t, locale } = useI18n({ useScope: 'global' });
 const search = ref('');
 const show = ref(false);
 const showAdd = ref(false);
@@ -19,37 +20,37 @@ const { running } = storeToRefs(useProgramStore());
 const items = [
   {
     id: 1,
-    label: 'Start',
+    label: t('topbar.start'),
     icon: PlayOne,
     handle: start,
   },
   {
     id: 2,
-    label: 'Pause',
+    label: t('topbar.pause'),
     icon: Pause,
     handle: pause,
   },
   {
     id: 3,
-    label: 'Restart',
+    label: t('topbar.restart'),
     icon: Refresh,
     handle: restart,
   },
   {
     id: 4,
-    label: 'Shutdown',
+    label: t('topbar.shutdown'),
     icon: Power,
     handle: shutdown,
   },
   {
     id: 5,
-    label: 'Reset Rule',
+    label: t('topbar.resetrule'),
     icon: Format,
     handle: resetRule,
   },
   {
     id: 6,
-    label: 'Profile',
+    label: t('topbar.profile.title'),
     icon: Me,
     handle: () => {
       show.value = true;
@@ -64,6 +65,14 @@ onBeforeMount(() => {
 onUnmounted(() => {
   offUpdate();
 });
+
+function changeLocale(){
+  if(t.value === 'zh-CN'){
+    t.value = locale.value = 'en'
+  } else {
+    t.value = locale.value = 'zh-CN';
+  }
+}
 </script>
 
 <template>
@@ -76,10 +85,11 @@ onUnmounted(() => {
     <ab-search v-model:value="search" hidden />
 
     <div ml-auto>
-      <ab-status-bar
+        <ab-status-bar
         :items="items"
         :running="running"
         @click-add="() => (showAdd = true)"
+        @change-lang="() => changeLocale()"
       ></ab-status-bar>
     </div>
 
diff --git a/webui/src/components/setting/config-download.vue b/webui/src/components/setting/config-download.vue
index 6350008c..15ed432f 100644
--- a/webui/src/components/setting/config-download.vue
+++ b/webui/src/components/setting/config-download.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { Downloader, DownloaderType } from '#/config';
 import type { SettingItem } from '#/components';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const downloader = getSettingGroup('downloader');
@@ -10,7 +12,7 @@ const downloaderType: DownloaderType = ['qbittorrent'];
 const items: SettingItem<Downloader>[] = [
   {
     configKey: 'type',
-    label: 'Downloader Type',
+    label: t('config.downloaderset.type'),
     type: 'select',
     css: 'w-115px',
     prop: {
@@ -19,7 +21,7 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'host',
-    label: 'Host',
+    label: t('config.downloaderset.host'),
     type: 'input',
     prop: {
       type: 'text',
@@ -28,7 +30,7 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'username',
-    label: 'Username',
+    label: t('config.downloaderset.username'),
     type: 'input',
     prop: {
       type: 'text',
@@ -37,7 +39,7 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'password',
-    label: 'Password',
+    label: t('config.downloaderset.password'),
     type: 'input',
     prop: {
       type: 'text',
@@ -47,7 +49,7 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'path',
-    label: 'Download Path',
+    label: t('config.downloaderset.path'),
     type: 'input',
     prop: {
       type: 'text',
@@ -56,14 +58,14 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'ssl',
-    label: 'SSL',
+    label: t('config.downloaderset.ssl'),
     type: 'switch',
   },
 ];
 </script>
 
 <template>
-  <ab-fold-panel title="Downloader Setting">
+  <ab-fold-panel :title="$t('config.downloaderset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/components/setting/config-manage.vue b/webui/src/components/setting/config-manage.vue
index f06a53a2..9aa6375a 100644
--- a/webui/src/components/setting/config-manage.vue
+++ b/webui/src/components/setting/config-manage.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { BangumiManage, RenameMethod } from '#/config';
 import type { SettingItem } from '#/components';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const manage = getSettingGroup('bangumi_manage');
@@ -10,12 +12,12 @@ const renameMethod: RenameMethod = ['normal', 'pn', 'advance', 'none'];
 const items: SettingItem<BangumiManage>[] = [
   {
     configKey: 'enable',
-    label: 'Enable',
+    label: t('config.manageset.enable'),
     type: 'switch',
   },
   {
     configKey: 'rename_method',
-    label: 'Rename Method',
+    label: t('config.manageset.method'),
     type: 'select',
     prop: {
       items: renameMethod,
@@ -24,24 +26,24 @@ const items: SettingItem<BangumiManage>[] = [
   },
   {
     configKey: 'eps_complete',
-    label: 'Eps complete',
+    label: t('config.manageset.eps'),
     type: 'switch',
   },
   {
     configKey: 'group_tag',
-    label: 'Add Group Tag',
+    label: t('config.manageset.grouptag'),
     type: 'switch',
   },
   {
     configKey: 'remove_bad_torrent',
-    label: 'Delete Bad Torrent',
+    label: t('config.manageset.deletebadtorr'),
     type: 'switch',
   },
 ];
 </script>
 
 <template>
-  <ab-fold-panel title="Manage Setting">
+  <ab-fold-panel :title="$t('config.manageset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/components/setting/config-normal.vue b/webui/src/components/setting/config-normal.vue
index 5d7c8a0f..7e97ebee 100644
--- a/webui/src/components/setting/config-normal.vue
+++ b/webui/src/components/setting/config-normal.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { Log, Program } from '#/config';
 import type { SettingItem } from '#/components';
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n({ useScope: 'global' })
 const { getSettingGroup } = useConfigStore();
 
 const program = getSettingGroup('program');
@@ -10,7 +12,7 @@ const log = getSettingGroup('log');
 const programItems: SettingItem<Program>[] = [
   {
     configKey: 'rss_time',
-    label: 'Interval Time of Rss',
+    label: t('config.normalset.rssintvl'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -20,7 +22,7 @@ const programItems: SettingItem<Program>[] = [
   },
   {
     configKey: 'rename_time',
-    label: 'Interval Time of Rename',
+    label: t('config.normalset.renameintvl'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -30,7 +32,7 @@ const programItems: SettingItem<Program>[] = [
   },
   {
     configKey: 'webui_port',
-    label: 'WebUI Port',
+    label: t('config.normalset.webport'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -43,13 +45,13 @@ const programItems: SettingItem<Program>[] = [
 
 const logItems: SettingItem<Log> = {
   configKey: 'debug_enable',
-  label: 'Debug',
+  label: t('config.normalset.debug'),
   type: 'switch',
 };
 </script>
 
 <template>
-  <ab-fold-panel title="Normal Setting">
+  <ab-fold-panel :title="$t('config.normalset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in programItems"
diff --git a/webui/src/components/setting/config-notification.vue b/webui/src/components/setting/config-notification.vue
index 3cf016c0..95dd8ebe 100644
--- a/webui/src/components/setting/config-notification.vue
+++ b/webui/src/components/setting/config-notification.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { Notification, NotificationType } from '#/config';
 import type { SettingItem } from '#/components';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const notification = getSettingGroup('notification');
@@ -10,13 +12,13 @@ const notificationType: NotificationType = ['telegram', 'server-chan', 'bark', '
 const items: SettingItem<Notification>[] = [
   {
     configKey: 'enable',
-    label: 'Enable',
+    label: t("config.notificationset.enable"),
     type: 'switch',
     bottomLine: true,
   },
   {
     configKey: 'type',
-    label: 'Type',
+    label: t("config.notificationset.type"),
     type: 'select',
     css: 'w-140px',
     prop: {
@@ -25,7 +27,7 @@ const items: SettingItem<Notification>[] = [
   },
   {
     configKey: 'token',
-    label: 'Token',
+    label: t("config.notificationset.token"),
     type: 'input',
     prop: {
       type: 'text',
@@ -34,7 +36,7 @@ const items: SettingItem<Notification>[] = [
   },
   {
     configKey: 'chat_id',
-    label: 'Chat ID',
+    label: t("config.notificationset.chatid"),
     type: 'input',
     prop: {
       type: 'text',
@@ -45,7 +47,7 @@ const items: SettingItem<Notification>[] = [
 </script>
 
 <template>
-  <ab-fold-panel title="Notification Setting">
+  <ab-fold-panel :title="$t('config.notificationset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/components/setting/config-parser.vue b/webui/src/components/setting/config-parser.vue
index 06495b81..9374c336 100644
--- a/webui/src/components/setting/config-parser.vue
+++ b/webui/src/components/setting/config-parser.vue
@@ -6,7 +6,9 @@ import type {
   RssParserType,
 } from '#/config';
 import type { SettingItem } from '#/components';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const parser = getSettingGroup('rss_parser');
@@ -19,12 +21,12 @@ const parserMethods: RssParserMethodType = ['tmdb', 'mikan', 'parser'];
 const items: SettingItem<RssParser>[] = [
   {
     configKey: 'enable',
-    label: 'Enable',
+    label: t('config.parserset.enable'),
     type: 'switch',
   },
   {
     configKey: 'type',
-    label: 'Source',
+    label: t('config.parserset.source'),
     type: 'select',
     css: 'w-115px',
     prop: {
@@ -33,7 +35,7 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'token',
-    label: 'Token',
+    label: t('config.parserset.token'),
     type: 'input',
     prop: {
       type: 'text',
@@ -42,7 +44,7 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'custom_url',
-    label: 'Custom Url',
+    label: t('config.parserset.url'),
     type: 'input',
     prop: {
       type: 'text',
@@ -52,7 +54,7 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'language',
-    label: 'Language',
+    label: t('config.parserset.language'),
     type: 'select',
     prop: {
       items: langs,
@@ -60,7 +62,7 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'parser_type',
-    label: 'Parser Type',
+    label: t('config.parserset.type'),
     type: 'select',
     prop: {
       items: parserMethods,
@@ -68,14 +70,14 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'filter',
-    label: 'Exclude',
+    label: t('config.parserset.exclude'),
     type: 'dynamic-tags',
   },
 ];
 </script>
 
 <template>
-  <ab-fold-panel title="Parser Setting">
+  <ab-fold-panel :title="$t('config.parserset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/components/setting/config-player.vue b/webui/src/components/setting/config-player.vue
index b34a0e62..d43b96f2 100644
--- a/webui/src/components/setting/config-player.vue
+++ b/webui/src/components/setting/config-player.vue
@@ -3,19 +3,19 @@ const { types, type, url } = storeToRefs(usePlayerStore());
 </script>
 
 <template>
-  <ab-fold-panel title="Media Player Setting">
+  <ab-fold-panel :title="$t('config.mediaplayerset.title')">
     <div space-y-12px>
       <ab-setting
         v-model:data="type"
         type="select"
-        label="type"
+        :label="$t('config.mediaplayerset.type')"
         :prop="{ items: types }"
       ></ab-setting>
 
       <ab-setting
         v-model:data="url"
         type="input"
-        label="url"
+        :label="$t('config.mediaplayerset.url')"
         :prop="{ placeholder: 'media player url' }"
       ></ab-setting>
     </div>
diff --git a/webui/src/components/setting/config-proxy.vue b/webui/src/components/setting/config-proxy.vue
index 9c82b6b4..bc37750e 100644
--- a/webui/src/components/setting/config-proxy.vue
+++ b/webui/src/components/setting/config-proxy.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { Proxy, ProxyType } from '#/config';
 import type { SettingItem } from '#/components';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const proxy = getSettingGroup('proxy');
@@ -10,12 +12,12 @@ const proxyType: ProxyType = ['http', 'https', 'socks5'];
 const items: SettingItem<Proxy>[] = [
   {
     configKey: 'enable',
-    label: 'Enable',
+    label: t('config.proxyset.enable'),
     type: 'switch',
   },
   {
     configKey: 'type',
-    label: 'Proxy Type',
+    label: t('config.proxyset.type'),
     type: 'select',
     prop: {
       items: proxyType,
@@ -24,7 +26,7 @@ const items: SettingItem<Proxy>[] = [
   },
   {
     configKey: 'host',
-    label: 'Host',
+    label: t('config.proxyset.host'),
     type: 'input',
     prop: {
       type: 'text',
@@ -33,7 +35,7 @@ const items: SettingItem<Proxy>[] = [
   },
   {
     configKey: 'port',
-    label: 'Port',
+    label: t('config.proxyset.port'),
     type: 'input',
     prop: {
       type: 'text',
@@ -42,7 +44,7 @@ const items: SettingItem<Proxy>[] = [
   },
   {
     configKey: 'username',
-    label: 'Username',
+    label: t('config.proxyset.username'),
     type: 'input',
     prop: {
       type: 'text',
@@ -51,7 +53,7 @@ const items: SettingItem<Proxy>[] = [
   },
   {
     configKey: 'password',
-    label: 'Password',
+    label: t('config.proxyset.password'),
     type: 'input',
     prop: {
       type: 'text',
@@ -62,7 +64,7 @@ const items: SettingItem<Proxy>[] = [
 </script>
 
 <template>
-  <ab-fold-panel title="Proxy Setting">
+  <ab-fold-panel :title="$t('config.proxyset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/pages/login.vue b/webui/src/pages/login.vue
index 59b9c8b7..eb020a2c 100644
--- a/webui/src/pages/login.vue
+++ b/webui/src/pages/login.vue
@@ -8,9 +8,9 @@ definePage({
 
 <template>
   <div f-cer layout-container>
-    <ab-container title="Login" w-365px>
+    <ab-container :title="$t('login.title')" w-365px>
       <div space-y-16px>
-        <ab-label label="Username">
+        <ab-label :label="$t('login.username')">
           <input
             v-model="user.username"
             type="text"
@@ -19,7 +19,7 @@ definePage({
           />
         </ab-label>
 
-        <ab-label label="Password">
+        <ab-label :label="$t('login.password')">
           <input
             v-model="user.password"
             type="password"
@@ -32,13 +32,13 @@ definePage({
         <div line></div>
 
         <div flex="~ justify-end">
-          <ab-button size="small" @click="login">Login</ab-button>
+          <ab-button size="small" @click="login">{{$t('login.loginbtn')}}</ab-button>
         </div>
       </div>
     </ab-container>
 
     <div bg="#C7C4AB" text-white rounded-4px py-4px px-2em text-main>
-      <div>Default: admin adminadmin</div>
+      <div>{{$t('login.default')}}: admin adminadmin</div>
     </div>
   </div>
 </template>

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 3/7] 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>

From 2723b259dcbf06f3410654a1f9b8c8276834d65f Mon Sep 17 00:00:00 2001
From: umbor <14857490+umbors@users.noreply.github.com>
Date: Sun, 11 Jun 2023 12:53:30 +0800
Subject: [PATCH 4/7] Add language detection and storage

Save language setting to localstorage (first time using browser language) and fix some bugs in en-US.yaml
---
 webui/src/components/layout/ab-topbar.vue      | 10 +++++++---
 webui/src/locales/index.ts                     | 11 ++++++++++-
 webui/src/locales/lang/{en.yaml => en-US.yaml} |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)
 rename webui/src/locales/lang/{en.yaml => en-US.yaml} (98%)

diff --git a/webui/src/components/layout/ab-topbar.vue b/webui/src/components/layout/ab-topbar.vue
index 4e13dd3c..5f8629ec 100644
--- a/webui/src/components/layout/ab-topbar.vue
+++ b/webui/src/components/layout/ab-topbar.vue
@@ -67,10 +67,14 @@ onUnmounted(() => {
 });
 
 function changeLocale(){
-  if(t.value === 'zh-CN'){
-    t.value = locale.value = 'en'
+  if(localStorage.getItem('lang') === 'zh-CN'){
+    locale.value = 'en-US';
+    localStorage.setItem('lang', locale.value);
+    location.reload();
   } else {
-    t.value = locale.value = 'zh-CN';
+    locale.value = 'zh-CN';
+    localStorage.setItem('lang', locale.value);
+    location.reload();
   }
 }
 </script>
diff --git a/webui/src/locales/index.ts b/webui/src/locales/index.ts
index cb6d0b77..d9faf181 100644
--- a/webui/src/locales/index.ts
+++ b/webui/src/locales/index.ts
@@ -1,9 +1,18 @@
 import { createI18n } from 'vue-i18n';
 import messages from '@intlify/unplugin-vue-i18n/messages'
 
+//Default language is the same as last setting (undefined is browser language)
+let lang = localStorage.getItem('lang');
+if(lang === null){
+    const navLang = navigator.language || navigator.userLanguage;
+    let localLang = navLang || false;
+    lang = localLang || 'en-US';
+}
+localStorage.setItem('lang', lang);
+
 const i18n = createI18n({
     legacy: false,
-    locale: 'zh-CN',
+    locale: lang,
     globalInjection: true,
     silentTranslationWarn: true,
     globalInstall: true,
diff --git a/webui/src/locales/lang/en.yaml b/webui/src/locales/lang/en-US.yaml
similarity index 98%
rename from webui/src/locales/lang/en.yaml
rename to webui/src/locales/lang/en-US.yaml
index e23fcf00..ed748707 100644
--- a/webui/src/locales/lang/en.yaml
+++ b/webui/src/locales/lang/en-US.yaml
@@ -94,7 +94,7 @@ config:
     ssl: 'SSL'
   
   manageset: 
-    title: 'Manage SEtting'
+    title: 'Manage Setting'
     enable: 'Enable'
     method: 'Rename Method'
     eps: 'EPS complete'

From 4ae0bcec653e071b61cf20754ba524cb3ba2dceb Mon Sep 17 00:00:00 2001
From: umbor <14857490+umbors@users.noreply.github.com>
Date: Sun, 11 Jun 2023 14:24:17 +0800
Subject: [PATCH 5/7] Fix some bugs

Fix some bugs
---
 webui/package.json                        |  2 +-
 webui/src/components/layout/ab-topbar.vue | 10 ++++++----
 webui/src/locales/index.ts                |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/webui/package.json b/webui/package.json
index b49ccc44..4da38e55 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -23,7 +23,7 @@
     "naive-ui": "^2.34.4",
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
-    "vue-i18n": "^9.3.0-beta.19",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.1"
   },
   "devDependencies": {
diff --git a/webui/src/components/layout/ab-topbar.vue b/webui/src/components/layout/ab-topbar.vue
index 5f8629ec..3963bee0 100644
--- a/webui/src/components/layout/ab-topbar.vue
+++ b/webui/src/components/layout/ab-topbar.vue
@@ -68,12 +68,14 @@ onUnmounted(() => {
 
 function changeLocale(){
   if(localStorage.getItem('lang') === 'zh-CN'){
-    locale.value = 'en-US';
-    localStorage.setItem('lang', locale.value);
+    let newLang = 'en-US';
+    locale.value = newLang;
+    localStorage.setItem('lang', newLang);
     location.reload();
   } else {
-    locale.value = 'zh-CN';
-    localStorage.setItem('lang', locale.value);
+    let newLang = 'zh-CN';
+    locale.value = newLang;
+    localStorage.setItem('lang', newLang);
     location.reload();
   }
 }
diff --git a/webui/src/locales/index.ts b/webui/src/locales/index.ts
index d9faf181..33bab3b1 100644
--- a/webui/src/locales/index.ts
+++ b/webui/src/locales/index.ts
@@ -4,7 +4,7 @@ import messages from '@intlify/unplugin-vue-i18n/messages'
 //Default language is the same as last setting (undefined is browser language)
 let lang = localStorage.getItem('lang');
 if(lang === null){
-    const navLang = navigator.language || navigator.userLanguage;
+    const navLang = navigator.language;
     let localLang = navLang || false;
     lang = localLang || 'en-US';
 }

From 0715db157449a99bec516e01d4942b68dd1328f4 Mon Sep 17 00:00:00 2001
From: umbor <14857490+umbors@users.noreply.github.com>
Date: Sun, 11 Jun 2023 16:18:13 +0800
Subject: [PATCH 6/7] Add i18n plugin to pnpm-lock.yaml

Update pnpm-lock.yaml and fix some bugs
---
 webui/pnpm-lock.yaml                  | 215 +++++++++++++++++++++++++-
 webui/src/components/ab-edit-rule.vue |   2 +-
 webui/src/pages/index/config.vue      |   6 -
 3 files changed, 214 insertions(+), 9 deletions(-)

diff --git a/webui/pnpm-lock.yaml b/webui/pnpm-lock.yaml
index fc0eb5d5..3d09976c 100644
--- a/webui/pnpm-lock.yaml
+++ b/webui/pnpm-lock.yaml
@@ -1,4 +1,8 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
 
 dependencies:
   '@headlessui/vue':
@@ -22,6 +26,9 @@ dependencies:
   vue:
     specifier: ^3.3.4
     version: 3.3.4
+  vue-i18n:
+    specifier: ^9.2.2
+    version: 9.2.2(vue@3.3.4)
   vue-router:
     specifier: ^4.2.1
     version: 4.2.1(vue@3.3.4)
@@ -33,6 +40,9 @@ devDependencies:
   '@icon-park/vue-next':
     specifier: ^1.4.2
     version: 1.4.2(vue@3.3.4)
+  '@intlify/unplugin-vue-i18n':
+    specifier: ^0.11.0
+    version: 0.11.0(vue-i18n@9.2.2)
   '@storybook/addon-essentials':
     specifier: ^7.0.12
     version: 7.0.12(react-dom@18.2.0)(react@18.2.0)
@@ -1837,6 +1847,110 @@ packages:
       - supports-color
     dev: true
 
+  /@intlify/bundle-utils@6.0.1(vue-i18n@9.2.2):
+    resolution: {integrity: sha512-BkeZNKZiC0B7K3OYMwiPLoAqsZmKH3SxTL75vYAkuQ//XWR8WO0NpfjXhTxgLTVFHxMcNb2agAopC0DP6fqDrg==}
+    engines: {node: '>= 14.16'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+    dependencies:
+      '@intlify/message-compiler': 9.3.0-beta.17
+      '@intlify/shared': 9.3.0-beta.17
+      acorn: 8.8.2
+      escodegen: 2.0.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 1.4.1
+      magic-string: 0.30.0
+      mlly: 1.2.1
+      source-map: 0.6.1
+      vue-i18n: 9.2.2(vue@3.3.4)
+      yaml-eslint-parser: 0.3.2
+    dev: true
+
+  /@intlify/core-base@9.2.2:
+    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/devtools-if': 9.2.2
+      '@intlify/message-compiler': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+
+  /@intlify/devtools-if@9.2.2:
+    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+
+  /@intlify/message-compiler@9.2.2:
+    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+      source-map: 0.6.1
+
+  /@intlify/message-compiler@9.3.0-beta.17:
+    resolution: {integrity: sha512-i7hvVIRk1Ax2uKa9xLRJCT57to08OhFMhFXXjWN07rmx5pWQYQ23MfX1xgggv9drnWTNhqEiD+u4EJeHoS5+Ww==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.3.0-beta.17
+      source-map: 0.6.1
+    dev: true
+
+  /@intlify/shared@9.2.2:
+    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    engines: {node: '>= 14'}
+
+  /@intlify/shared@9.3.0-beta.17:
+    resolution: {integrity: sha512-mscf7RQsUTOil35jTij4KGW1RC9SWQjYScwLxP53Ns6g24iEd5HN7ksbt9O6FvTmlQuX77u+MXpBdfJsGqizLQ==}
+    engines: {node: '>= 14'}
+    dev: true
+
+  /@intlify/unplugin-vue-i18n@0.11.0(vue-i18n@9.2.2):
+    resolution: {integrity: sha512-ivcLZo08fvepHWV8o5lcKfhcKFSWqhwrqIAU6pUIbvq2ICo9fnXnIPYIZj7FeuHDLW1G3ADm44ZhQC3nYmvDlg==}
+    engines: {node: '>= 14.16'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+      vue-i18n-bridge: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+      vue-i18n-bridge:
+        optional: true
+    dependencies:
+      '@intlify/bundle-utils': 6.0.1(vue-i18n@9.2.2)
+      '@intlify/shared': 9.3.0-beta.17
+      '@rollup/pluginutils': 5.0.2
+      '@vue/compiler-sfc': 3.3.4
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      pathe: 1.1.0
+      picocolors: 1.0.0
+      source-map: 0.6.1
+      unplugin: 1.3.1
+      vue-i18n: 9.2.2(vue@3.3.4)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
+  /@intlify/vue-devtools@9.2.2:
+    resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+
   /@istanbuljs/load-nyc-config@1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -3721,6 +3835,14 @@ packages:
       negotiator: 0.6.3
     dev: true
 
+  /acorn-jsx@5.3.2(acorn@7.4.1):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 7.4.1
+    dev: true
+
   /acorn-jsx@5.3.2(acorn@8.8.2):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -5002,6 +5124,19 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /escodegen@2.0.0:
+    resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+      optionator: 0.8.3
+    optionalDependencies:
+      source-map: 0.6.1
+    dev: true
+
   /eslint-config-prettier@8.8.0(eslint@8.41.0):
     resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==}
     hasBin: true
@@ -5387,6 +5522,15 @@ packages:
       - supports-color
     dev: true
 
+  /espree@6.2.1:
+    resolution: {integrity: sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2(acorn@7.4.1)
+      eslint-visitor-keys: 1.3.0
+    dev: true
+
   /espree@9.5.2:
     resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6622,6 +6766,17 @@ packages:
     hasBin: true
     dev: true
 
+  /jsonc-eslint-parser@1.4.1:
+    resolution: {integrity: sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      acorn: 7.4.1
+      eslint-utils: 2.1.0
+      eslint-visitor-keys: 1.3.0
+      espree: 6.2.1
+      semver: 6.3.0
+    dev: true
+
   /jsonc-eslint-parser@2.3.0:
     resolution: {integrity: sha512-9xZPKVYp9DxnM3sd1yAsh/d59iIaswDkai8oTxbursfKYbg/ibjX0IzFt35+VZ8iEW453TVTXztnRvYUQlAfUQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6679,6 +6834,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /levn@0.3.0:
+    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+    dev: true
+
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -7267,6 +7430,18 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
+  /optionator@0.8.3:
+    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.3.0
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+      word-wrap: 1.2.3
+    dev: true
+
   /optionator@0.9.1:
     resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
     engines: {node: '>= 0.8.0'}
@@ -7524,6 +7699,11 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /prelude-ls@1.1.2:
+    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -8247,7 +8427,6 @@ packages:
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
@@ -8614,6 +8793,13 @@ packages:
       typescript: 4.9.5
     dev: true
 
+  /type-check@0.3.2:
+    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.1.2
+    dev: true
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -9219,6 +9405,18 @@ packages:
       - supports-color
     dev: true
 
+  /vue-i18n@9.2.2(vue@3.3.4):
+    resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+      '@vue/devtools-api': 6.5.0
+      vue: 3.3.4
+
   /vue-inbrowser-compiler-independent-utils@4.71.1(vue@3.3.4):
     resolution: {integrity: sha512-K3wt3iVmNGaFEOUR4JIThQRWfqokxLfnPslD41FDZB2ajXp789+wCqJyGYlIFsvEQ2P61PInw6/ph5iiqg51gg==}
     peerDependencies:
@@ -9475,6 +9673,14 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
+  /yaml-eslint-parser@0.3.2:
+    resolution: {integrity: sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==}
+    dependencies:
+      eslint-visitor-keys: 1.3.0
+      lodash: 4.17.21
+      yaml: 1.10.2
+    dev: true
+
   /yaml-eslint-parser@1.2.2:
     resolution: {integrity: sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -9484,6 +9690,11 @@ packages:
       yaml: 2.2.2
     dev: true
 
+  /yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: true
+
   /yaml@2.2.2:
     resolution: {integrity: sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==}
     engines: {node: '>= 14'}
diff --git a/webui/src/components/ab-edit-rule.vue b/webui/src/components/ab-edit-rule.vue
index d2389a26..cda6fcb8 100644
--- a/webui/src/components/ab-edit-rule.vue
+++ b/webui/src/components/ab-edit-rule.vue
@@ -104,7 +104,7 @@ const boxSize = computed(() => {
       </div>
     </div>
 
-    <ab-popup v-model:show="deleteFileDialog.show" title="Delete">
+    <ab-popup v-model:show="deleteFileDialog.show" :title="$t('homepage.rule.delete')">
       <div>{{$t('homepage.rule.deletehit')}}</div>
       <div line my-8px></div>
 
diff --git a/webui/src/pages/index/config.vue b/webui/src/pages/index/config.vue
index 22e175ac..a05861ab 100644
--- a/webui/src/pages/index/config.vue
+++ b/webui/src/pages/index/config.vue
@@ -1,10 +1,4 @@
-<script lang="ts">
-
-</script>
 <script lang="ts" setup>
-import { string } from 'yargs';
-import { thisTypeAnnotation } from '@babel/types';
-
 const { getConfig, setConfig } = useConfigStore();
 
 getConfig();

From a9c037e69cd8c7a1ab902ca58afd2e5cf504a665 Mon Sep 17 00:00:00 2001
From: umbor <14857490+umbors@users.noreply.github.com>
Date: Mon, 12 Jun 2023 13:08:36 +0800
Subject: [PATCH 7/7] Remove unplugin-vue-i18n and change language file format
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

去除unplugin-vue-i18n，语言文件改为json格式，把i18n-ally的localespaths设置为"src/locales/lang"就可以用。缺少downloader及calendar及format问题也一并修改。
---
 webui/package.json                            |   1 -
 webui/pnpm-lock.yaml                          | 166 +-----------------
 webui/src/components/ab-add-bangumi.vue       |   6 +-
 webui/src/components/ab-change-account.vue    |  10 +-
 webui/src/components/ab-edit-rule.vue         |  45 +++--
 webui/src/components/ab-rule.vue              |   2 +-
 webui/src/components/ab-status-bar.vue        |   4 +-
 webui/src/components/layout/ab-sidebar.vue    |   8 +-
 webui/src/components/layout/ab-topbar.vue     |  11 +-
 .../components/setting/config-download.vue    |   2 +-
 .../src/components/setting/config-manage.vue  |   2 +-
 .../src/components/setting/config-normal.vue  |   4 +-
 .../setting/config-notification.vue           |  10 +-
 .../src/components/setting/config-parser.vue  |   2 +-
 webui/src/components/setting/config-proxy.vue |   2 +-
 webui/src/locales/index.ts                    |  34 ++--
 webui/src/locales/lang/en-US.json             | 132 ++++++++++++++
 webui/src/locales/lang/en-US.yaml             | 127 --------------
 webui/src/locales/lang/zh-CN.json             | 132 ++++++++++++++
 webui/src/locales/lang/zh-CN.yaml             | 126 -------------
 webui/src/pages/index.vue                     |  11 +-
 webui/src/pages/index/bangumi.vue             |   2 +-
 webui/src/pages/index/config.vue              |  20 ++-
 webui/src/pages/index/log.vue                 |  32 ++--
 webui/src/pages/index/player.vue              |   8 +-
 webui/src/pages/login.vue                     |   6 +-
 webui/vite.config.ts                          |   5 -
 27 files changed, 394 insertions(+), 516 deletions(-)
 create mode 100644 webui/src/locales/lang/en-US.json
 delete mode 100644 webui/src/locales/lang/en-US.yaml
 create mode 100644 webui/src/locales/lang/zh-CN.json
 delete mode 100644 webui/src/locales/lang/zh-CN.yaml

diff --git a/webui/package.json b/webui/package.json
index b28cbbe6..ab19d880 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -30,7 +30,6 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.6",
     "@icon-park/vue-next": "^1.4.2",
-    "@intlify/unplugin-vue-i18n": "^0.11.0",
     "@storybook/addon-essentials": "^7.0.12",
     "@storybook/addon-interactions": "^7.0.12",
     "@storybook/addon-links": "^7.0.12",
diff --git a/webui/pnpm-lock.yaml b/webui/pnpm-lock.yaml
index c8904dd0..a26fb05d 100644
--- a/webui/pnpm-lock.yaml
+++ b/webui/pnpm-lock.yaml
@@ -40,9 +40,6 @@ devDependencies:
   '@icon-park/vue-next':
     specifier: ^1.4.2
     version: 1.4.2(vue@3.3.4)
-  '@intlify/unplugin-vue-i18n':
-    specifier: ^0.11.0
-    version: 0.11.0(vue-i18n@9.2.2)
   '@storybook/addon-essentials':
     specifier: ^7.0.12
     version: 7.0.12(react-dom@18.2.0)(react@18.2.0)
@@ -1850,31 +1847,6 @@ packages:
       - supports-color
     dev: true
 
-  /@intlify/bundle-utils@6.0.1(vue-i18n@9.2.2):
-    resolution: {integrity: sha512-BkeZNKZiC0B7K3OYMwiPLoAqsZmKH3SxTL75vYAkuQ//XWR8WO0NpfjXhTxgLTVFHxMcNb2agAopC0DP6fqDrg==}
-    engines: {node: '>= 14.16'}
-    peerDependencies:
-      petite-vue-i18n: '*'
-      vue-i18n: '*'
-    peerDependenciesMeta:
-      petite-vue-i18n:
-        optional: true
-      vue-i18n:
-        optional: true
-    dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.17
-      '@intlify/shared': 9.3.0-beta.17
-      acorn: 8.8.2
-      escodegen: 2.0.0
-      estree-walker: 2.0.2
-      jsonc-eslint-parser: 1.4.1
-      magic-string: 0.30.0
-      mlly: 1.2.1
-      source-map: 0.6.1
-      vue-i18n: 9.2.2(vue@3.3.4)
-      yaml-eslint-parser: 0.3.2
-    dev: true
-
   /@intlify/core-base@9.2.2:
     resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
     engines: {node: '>= 14'}
@@ -1883,12 +1855,14 @@ packages:
       '@intlify/message-compiler': 9.2.2
       '@intlify/shared': 9.2.2
       '@intlify/vue-devtools': 9.2.2
+    dev: false
 
   /@intlify/devtools-if@9.2.2:
     resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
     engines: {node: '>= 14'}
     dependencies:
       '@intlify/shared': 9.2.2
+    dev: false
 
   /@intlify/message-compiler@9.2.2:
     resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
@@ -1896,56 +1870,12 @@ packages:
     dependencies:
       '@intlify/shared': 9.2.2
       source-map: 0.6.1
-
-  /@intlify/message-compiler@9.3.0-beta.17:
-    resolution: {integrity: sha512-i7hvVIRk1Ax2uKa9xLRJCT57to08OhFMhFXXjWN07rmx5pWQYQ23MfX1xgggv9drnWTNhqEiD+u4EJeHoS5+Ww==}
-    engines: {node: '>= 14'}
-    dependencies:
-      '@intlify/shared': 9.3.0-beta.17
-      source-map: 0.6.1
-    dev: true
+    dev: false
 
   /@intlify/shared@9.2.2:
     resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
     engines: {node: '>= 14'}
-
-  /@intlify/shared@9.3.0-beta.17:
-    resolution: {integrity: sha512-mscf7RQsUTOil35jTij4KGW1RC9SWQjYScwLxP53Ns6g24iEd5HN7ksbt9O6FvTmlQuX77u+MXpBdfJsGqizLQ==}
-    engines: {node: '>= 14'}
-    dev: true
-
-  /@intlify/unplugin-vue-i18n@0.11.0(vue-i18n@9.2.2):
-    resolution: {integrity: sha512-ivcLZo08fvepHWV8o5lcKfhcKFSWqhwrqIAU6pUIbvq2ICo9fnXnIPYIZj7FeuHDLW1G3ADm44ZhQC3nYmvDlg==}
-    engines: {node: '>= 14.16'}
-    peerDependencies:
-      petite-vue-i18n: '*'
-      vue-i18n: '*'
-      vue-i18n-bridge: '*'
-    peerDependenciesMeta:
-      petite-vue-i18n:
-        optional: true
-      vue-i18n:
-        optional: true
-      vue-i18n-bridge:
-        optional: true
-    dependencies:
-      '@intlify/bundle-utils': 6.0.1(vue-i18n@9.2.2)
-      '@intlify/shared': 9.3.0-beta.17
-      '@rollup/pluginutils': 5.0.2
-      '@vue/compiler-sfc': 3.3.4
-      debug: 4.3.4
-      fast-glob: 3.2.12
-      js-yaml: 4.1.0
-      json5: 2.2.3
-      pathe: 1.1.0
-      picocolors: 1.0.0
-      source-map: 0.6.1
-      unplugin: 1.3.1
-      vue-i18n: 9.2.2(vue@3.3.4)
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
+    dev: false
 
   /@intlify/vue-devtools@9.2.2:
     resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
@@ -1953,6 +1883,7 @@ packages:
     dependencies:
       '@intlify/core-base': 9.2.2
       '@intlify/shared': 9.2.2
+    dev: false
 
   /@istanbuljs/load-nyc-config@1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
@@ -3838,14 +3769,6 @@ packages:
       negotiator: 0.6.3
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@7.4.1):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 7.4.1
-    dev: true
-
   /acorn-jsx@5.3.2(acorn@8.8.2):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -5127,19 +5050,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /escodegen@2.0.0:
-    resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
-    engines: {node: '>=6.0'}
-    hasBin: true
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-      optionator: 0.8.3
-    optionalDependencies:
-      source-map: 0.6.1
-    dev: true
-
   /eslint-config-prettier@8.8.0(eslint@8.41.0):
     resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==}
     hasBin: true
@@ -5525,15 +5435,6 @@ packages:
       - supports-color
     dev: true
 
-  /espree@6.2.1:
-    resolution: {integrity: sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      acorn: 7.4.1
-      acorn-jsx: 5.3.2(acorn@7.4.1)
-      eslint-visitor-keys: 1.3.0
-    dev: true
-
   /espree@9.5.2:
     resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6775,17 +6676,6 @@ packages:
     hasBin: true
     dev: true
 
-  /jsonc-eslint-parser@1.4.1:
-    resolution: {integrity: sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      acorn: 7.4.1
-      eslint-utils: 2.1.0
-      eslint-visitor-keys: 1.3.0
-      espree: 6.2.1
-      semver: 6.3.0
-    dev: true
-
   /jsonc-eslint-parser@2.3.0:
     resolution: {integrity: sha512-9xZPKVYp9DxnM3sd1yAsh/d59iIaswDkai8oTxbursfKYbg/ibjX0IzFt35+VZ8iEW453TVTXztnRvYUQlAfUQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6843,14 +6733,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /levn@0.3.0:
-    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.1.2
-      type-check: 0.3.2
-    dev: true
-
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -7439,18 +7321,6 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
-  /optionator@0.8.3:
-    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.3.0
-      prelude-ls: 1.1.2
-      type-check: 0.3.2
-      word-wrap: 1.2.3
-    dev: true
-
   /optionator@0.9.1:
     resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
     engines: {node: '>= 0.8.0'}
@@ -7708,11 +7578,6 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
-  /prelude-ls@1.1.2:
-    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
-    engines: {node: '>= 0.8.0'}
-    dev: true
-
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -8802,13 +8667,6 @@ packages:
       typescript: 4.9.5
     dev: true
 
-  /type-check@0.3.2:
-    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.1.2
-    dev: true
-
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -9425,6 +9283,7 @@ packages:
       '@intlify/vue-devtools': 9.2.2
       '@vue/devtools-api': 6.5.0
       vue: 3.3.4
+    dev: false
 
   /vue-inbrowser-compiler-independent-utils@4.71.1(vue@3.3.4):
     resolution: {integrity: sha512-K3wt3iVmNGaFEOUR4JIThQRWfqokxLfnPslD41FDZB2ajXp789+wCqJyGYlIFsvEQ2P61PInw6/ph5iiqg51gg==}
@@ -9682,14 +9541,6 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
-  /yaml-eslint-parser@0.3.2:
-    resolution: {integrity: sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==}
-    dependencies:
-      eslint-visitor-keys: 1.3.0
-      lodash: 4.17.21
-      yaml: 1.10.2
-    dev: true
-
   /yaml-eslint-parser@1.2.2:
     resolution: {integrity: sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -9699,11 +9550,6 @@ packages:
       yaml: 2.2.2
     dev: true
 
-  /yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
-    dev: true
-
   /yaml@2.2.2:
     resolution: {integrity: sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==}
     engines: {node: '>= 14'}
diff --git a/webui/src/components/ab-add-bangumi.vue b/webui/src/components/ab-add-bangumi.vue
index 0bfa0bc5..5b380ab7 100644
--- a/webui/src/components/ab-add-bangumi.vue
+++ b/webui/src/components/ab-add-bangumi.vue
@@ -124,9 +124,9 @@ async function subscribe() {
       ></ab-setting>
 
       <div flex="~ justify-end">
-        <ab-button size="small" :loading="analysis.loading" @click="analyser"
-          >{{$t('topbar.add.analyse')}}</ab-button
-        >
+        <ab-button size="small" :loading="analysis.loading" @click="analyser">{{
+          $t('topbar.add.analyse')
+        }}</ab-button>
       </div>
     </div>
 
diff --git a/webui/src/components/ab-change-account.vue b/webui/src/components/ab-change-account.vue
index 02ab9e01..a685245e 100644
--- a/webui/src/components/ab-change-account.vue
+++ b/webui/src/components/ab-change-account.vue
@@ -7,7 +7,11 @@ const { user, update } = useAuth();
 </script>
 
 <template>
-  <ab-popup v-model:show="show" :title="$t('topbar.profile.poptitle')" css="w-365px">
+  <ab-popup
+    v-model:show="show"
+    :title="$t('topbar.profile.poptitle')"
+    css="w-365px"
+  >
     <div space-y-16px>
       <ab-label :label="$t('topbar.profile.username')">
         <input
@@ -30,7 +34,9 @@ const { user, update } = useAuth();
       <div line></div>
 
       <div flex="~ justify-end">
-        <ab-button size="small" @click="update">{{$t('topbar.profile.updatebtn')}}</ab-button>
+        <ab-button size="small" @click="update">{{
+          $t('topbar.profile.updatebtn')
+        }}</ab-button>
       </div>
     </div>
   </ab-popup>
diff --git a/webui/src/components/ab-edit-rule.vue b/webui/src/components/ab-edit-rule.vue
index a36a61e5..0602cd3d 100644
--- a/webui/src/components/ab-edit-rule.vue
+++ b/webui/src/components/ab-edit-rule.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { BangumiRule } from '#/bangumi';
 import { useI18n } from 'vue-i18n';
+import type { BangumiRule } from '#/bangumi';
 
-const { t } = useI18n({ useScope: 'global' });
 const emit = defineEmits<{
   (e: 'apply', rule: BangumiRule): void;
   (e: 'enable', id: number): void;
@@ -12,7 +11,7 @@ const emit = defineEmits<{
     opts: { id: number; deleteFile: boolean }
   ): void;
 }>();
-
+const { t } = useI18n({ useScope: 'global' });
 const show = defineModel('show', { default: false });
 const rule = defineModel<BangumiRule>('rule', {
   required: true,
@@ -72,15 +71,17 @@ const boxSize = computed(() => {
 <template>
   <ab-popup v-model:show="show" :title="popupTitle" :css="boxSize">
     <div v-if="rule.deleted">
-      <div>{{$t('homepage.rule.enablehit')}}</div>
+      <div>{{ $t('homepage.rule.enablehit') }}</div>
 
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
-        <ab-button size="small" type="warn" @click="() => emitEnable()"
-          >{{$t('homepage.rule.yesbtn')}}</ab-button
-        >
-        <ab-button size="small" @click="() => close()">{{$t('homepage.rule.nobtn')}}</ab-button>
+        <ab-button size="small" type="warn" @click="() => emitEnable()">{{
+          $t('homepage.rule.yesbtn')
+        }}</ab-button>
+        <ab-button size="small" @click="() => close()">{{
+          $t('homepage.rule.nobtn')
+        }}</ab-button>
       </div>
     </div>
 
@@ -92,29 +93,37 @@ const boxSize = computed(() => {
           size="small"
           type="warn"
           @click="() => showDeleteFileDialog('disable')"
-          >{{$t('homepage.rule.disable')}}</ab-button
+          >{{ $t('homepage.rule.disable') }}</ab-button
         >
         <ab-button
           size="small"
           type="warn"
           @click="() => showDeleteFileDialog('delete')"
-          >{{$t('homepage.rule.delete')}}</ab-button
+          >{{ $t('homepage.rule.delete') }}</ab-button
         >
-        <ab-button size="small" @click="emitApply">{{$t('homepage.rule.apply')}}</ab-button>
+        <ab-button size="small" @click="emitApply">{{
+          $t('homepage.rule.apply')
+        }}</ab-button>
       </div>
     </div>
 
-    <ab-popup v-model:show="deleteFileDialog.show" :title="$t('homepage.rule.delete')">
-      <div>{{$t('homepage.rule.deletehit')}}</div>
+    <ab-popup
+      v-model:show="deleteFileDialog.show"
+      :title="$t('homepage.rule.delete')"
+    >
+      <div>{{ $t('homepage.rule.deletehit') }}</div>
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
-        <ab-button size="small" type="warn" @click="() => emitdeleteFile(true)"
-          >{{$t('homepage.rule.yesbtn')}}</ab-button
-        >
-        <ab-button size="small" @click="() => emitdeleteFile(false)"
-          >{{$t('homepage.rule.nobtn')}}</ab-button
+        <ab-button
+          size="small"
+          type="warn"
+          @click="() => emitdeleteFile(true)"
+          >{{ $t('homepage.rule.yesbtn') }}</ab-button
         >
+        <ab-button size="small" @click="() => emitdeleteFile(false)">{{
+          $t('homepage.rule.nobtn')
+        }}</ab-button>
       </div>
     </ab-popup>
   </ab-popup>
diff --git a/webui/src/components/ab-rule.vue b/webui/src/components/ab-rule.vue
index 1fbce13f..1baf825c 100644
--- a/webui/src/components/ab-rule.vue
+++ b/webui/src/components/ab-rule.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { BangumiRule } from '#/bangumi';
 import type { SettingItem } from '#/components';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n({ useScope: 'global' });
 const rule = defineModel<BangumiRule>('rule', {
diff --git a/webui/src/components/ab-status-bar.vue b/webui/src/components/ab-status-bar.vue
index 6dfe2f23..5af9f165 100644
--- a/webui/src/components/ab-status-bar.vue
+++ b/webui/src/components/ab-status-bar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { Earth, AddOne, More } from '@icon-park/vue-next';
+import { AddOne, Earth, More } from '@icon-park/vue-next';
 
 withDefaults(
   defineProps<{
@@ -32,7 +32,7 @@ defineEmits(['clickAdds']);
           btn-click
           @click="() => $emit('changeLang')"
         />
-        
+
         <AddOne
           theme="outline"
           size="24"
diff --git a/webui/src/components/layout/ab-sidebar.vue b/webui/src/components/layout/ab-sidebar.vue
index 93648902..ec2fc882 100644
--- a/webui/src/components/layout/ab-sidebar.vue
+++ b/webui/src/components/layout/ab-sidebar.vue
@@ -10,7 +10,7 @@ import {
   SettingTwo,
 } from '@icon-park/vue-next';
 import { useI18n } from 'vue-i18n';
-const { t } = useI18n({ useScope: 'global' });
+
 const props = withDefaults(
   defineProps<{
     open?: boolean;
@@ -19,7 +19,7 @@ const props = withDefaults(
     open: false,
   }
 );
-
+const { t } = useI18n({ useScope: 'global' });
 const show = ref(props.open);
 const toggle = () => (show.value = !show.value);
 const route = useRoute();
@@ -89,7 +89,7 @@ const items = [
         @click="toggle"
       >
         <div :class="[!show && 'abs opacity-0']" transition-opacity>
-          <div text-h1>{{$t('sidebar.title')}}</div>
+          <div text-h1>{{ $t('sidebar.title') }}</div>
         </div>
 
         <MenuUnfold
@@ -139,7 +139,7 @@ const items = [
         @click="logout"
       >
         <Logout :size="24" />
-        <div text-h2>{{$t('sidebar.logout')}}</div>
+        <div text-h2>{{ $t('sidebar.logout') }}</div>
       </div>
     </div>
   </div>
diff --git a/webui/src/components/layout/ab-topbar.vue b/webui/src/components/layout/ab-topbar.vue
index 8429d6ac..b110f61f 100644
--- a/webui/src/components/layout/ab-topbar.vue
+++ b/webui/src/components/layout/ab-topbar.vue
@@ -8,6 +8,7 @@ import {
   Refresh,
 } from '@icon-park/vue-next';
 import { useI18n } from 'vue-i18n';
+
 const { t, locale } = useI18n({ useScope: 'global' });
 const search = ref('');
 const show = ref(false);
@@ -66,14 +67,14 @@ onUnmounted(() => {
   offUpdate();
 });
 
-function changeLocale(){
-  if(localStorage.getItem('lang') === 'zh-CN'){
-    let newLang = 'en-US';
+function changeLocale() {
+  if (localStorage.getItem('lang') === 'zh-CN') {
+    const newLang = 'en-US';
     locale.value = newLang;
     localStorage.setItem('lang', newLang);
     location.reload();
   } else {
-    let newLang = 'zh-CN';
+    const newLang = 'zh-CN';
     locale.value = newLang;
     localStorage.setItem('lang', newLang);
     location.reload();
@@ -91,7 +92,7 @@ function changeLocale(){
     <ab-search v-model:value="search" hidden />
 
     <div ml-auto>
-        <ab-status-bar
+      <ab-status-bar
         :items="items"
         :running="running"
         @click-add="() => (showAdd = true)"
diff --git a/webui/src/components/setting/config-download.vue b/webui/src/components/setting/config-download.vue
index 15ed432f..09d2db82 100644
--- a/webui/src/components/setting/config-download.vue
+++ b/webui/src/components/setting/config-download.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { Downloader, DownloaderType } from '#/config';
 import type { SettingItem } from '#/components';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
diff --git a/webui/src/components/setting/config-manage.vue b/webui/src/components/setting/config-manage.vue
index 9aa6375a..10472374 100644
--- a/webui/src/components/setting/config-manage.vue
+++ b/webui/src/components/setting/config-manage.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { BangumiManage, RenameMethod } from '#/config';
 import type { SettingItem } from '#/components';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
diff --git a/webui/src/components/setting/config-normal.vue b/webui/src/components/setting/config-normal.vue
index 7e97ebee..42592a4a 100644
--- a/webui/src/components/setting/config-normal.vue
+++ b/webui/src/components/setting/config-normal.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { Log, Program } from '#/config';
 import type { SettingItem } from '#/components';
-import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const program = getSettingGroup('program');
diff --git a/webui/src/components/setting/config-notification.vue b/webui/src/components/setting/config-notification.vue
index b9f855f1..99fbe3fa 100644
--- a/webui/src/components/setting/config-notification.vue
+++ b/webui/src/components/setting/config-notification.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { Notification, NotificationType } from '#/config';
 import type { SettingItem } from '#/components';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
@@ -17,13 +17,13 @@ const notificationType: NotificationType = [
 const items: SettingItem<Notification>[] = [
   {
     configKey: 'enable',
-    label: t("config.notificationset.enable"),
+    label: t('config.notificationset.enable'),
     type: 'switch',
     bottomLine: true,
   },
   {
     configKey: 'type',
-    label: t("config.notificationset.type"),
+    label: t('config.notificationset.type'),
     type: 'select',
     css: 'w-140px',
     prop: {
@@ -32,7 +32,7 @@ const items: SettingItem<Notification>[] = [
   },
   {
     configKey: 'token',
-    label: t("config.notificationset.token"),
+    label: t('config.notificationset.token'),
     type: 'input',
     prop: {
       type: 'text',
@@ -41,7 +41,7 @@ const items: SettingItem<Notification>[] = [
   },
   {
     configKey: 'chat_id',
-    label: t("config.notificationset.chatid"),
+    label: t('config.notificationset.chatid'),
     type: 'input',
     prop: {
       type: 'text',
diff --git a/webui/src/components/setting/config-parser.vue b/webui/src/components/setting/config-parser.vue
index 9374c336..13f04b3d 100644
--- a/webui/src/components/setting/config-parser.vue
+++ b/webui/src/components/setting/config-parser.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type {
   RssParser,
   RssParserLang,
@@ -6,7 +7,6 @@ import type {
   RssParserType,
 } from '#/config';
 import type { SettingItem } from '#/components';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
diff --git a/webui/src/components/setting/config-proxy.vue b/webui/src/components/setting/config-proxy.vue
index bc37750e..04407b4e 100644
--- a/webui/src/components/setting/config-proxy.vue
+++ b/webui/src/components/setting/config-proxy.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { Proxy, ProxyType } from '#/config';
 import type { SettingItem } from '#/components';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
diff --git a/webui/src/locales/index.ts b/webui/src/locales/index.ts
index 33bab3b1..bcc4a795 100644
--- a/webui/src/locales/index.ts
+++ b/webui/src/locales/index.ts
@@ -1,22 +1,28 @@
 import { createI18n } from 'vue-i18n';
-import messages from '@intlify/unplugin-vue-i18n/messages'
+import enUS from './lang/en-US.json';
+import zhCN from './lang/zh-CN.json';
 
-//Default language is the same as last setting (undefined is browser language)
+const messages = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
+
+// Default language is the same as last setting (undefined is browser language)
 let lang = localStorage.getItem('lang');
-if(lang === null){
-    const navLang = navigator.language;
-    let localLang = navLang || false;
-    lang = localLang || 'en-US';
+if (lang === null) {
+  const navLang = navigator.language;
+  const localLang = navLang || false;
+  lang = localLang || 'en-US';
 }
 localStorage.setItem('lang', lang);
 
 const i18n = createI18n({
-    legacy: false,
-    locale: lang,
-    globalInjection: true,
-    silentTranslationWarn: true,
-    globalInstall: true,
-    messages
-  })
+  legacy: false,
+  locale: lang,
+  globalInjection: true,
+  silentTranslationWarn: true,
+  globalInstall: true,
+  messages,
+});
 
-export default i18n;
\ No newline at end of file
+export default i18n;
diff --git a/webui/src/locales/lang/en-US.json b/webui/src/locales/lang/en-US.json
new file mode 100644
index 00000000..513e240d
--- /dev/null
+++ b/webui/src/locales/lang/en-US.json
@@ -0,0 +1,132 @@
+{
+  "login": {
+    "title": "Login",
+    "username": "Username",
+    "password": "Password",
+    "loginbtn": "Login",
+    "default": "Default"
+  },
+  "sidebar": {
+    "title": "Menu",
+    "homepage": "HomePage",
+    "player": "Player",
+    "log": "Log",
+    "config": "Config",
+    "logout": "Logout",
+    "downloader": "Downloader",
+    "calendar": "Calendar"
+  },
+  "topbar": {
+    "start": "Start",
+    "pause": "Pause",
+    "restart": "Restart",
+    "shutdown": "Shutdown",
+    "resetrule": "Reset Rule",
+    "profile": {
+      "title": "Profile",
+      "poptitle": "Change Account",
+      "username": "Username",
+      "password": "Password",
+      "updatebtn": "Update"
+    },
+    "add": {
+      "title": "Add Bangumi",
+      "rsslink": "RSS Link",
+      "placeholder": "Please enter the RSS link",
+      "analyse": "Analyse"
+    }
+  },
+  "homepage": {
+    "title": "Bangumi List",
+    "rule": {
+      "officaltitle": "Official Title",
+      "year": "Year",
+      "season": "Season",
+      "offset": "Offset",
+      "exclude": "Exclude",
+      "enable": "Enable",
+      "disable": "Disable",
+      "delete": "Delete",
+      "apply": "Apply",
+      "yesbtn": "Yes",
+      "nobtn": "No",
+      "enablehit": "Do you want to enable this rule?",
+      "deletehit": "Delete Local File?",
+      "enablerule": "Enable Rule",
+      "editrule": "Edit Rule"
+    }
+  },
+  "player": {
+    "title": "Player",
+    "hit": "Please set up the media player"
+  },
+  "log": {
+    "title": "Log",
+    "reset": "Reset",
+    "copy": "Copy",
+    "contactinfo": "Contact Infomation",
+    "go": "Go",
+    "join": "Join",
+    "bugrepo": "Bug Report"
+  },
+  "config": {
+    "title": "Config",
+    "normalset": {
+      "title": "Normal Setting",
+      "rssintvl": "Interval Time of Rss",
+      "renameintvl": "Interval Time of Rename",
+      "webport": "WebUI Port",
+      "debug": "Debug"
+    },
+    "parserset": {
+      "title": "Parser Setting",
+      "enable": "Enable",
+      "source": "Source",
+      "token": "Token",
+      "url": "Custom Url",
+      "language": "Language",
+      "type": "Parser Type",
+      "exclude": "Exclude"
+    },
+    "downloaderset": {
+      "title": "Downloader Setting",
+      "type": "Downloader Type",
+      "host": "Host",
+      "username": "Username",
+      "password": "Password",
+      "path": "Download Path",
+      "ssl": "SSL"
+    },
+    "manageset": {
+      "title": "Manage Setting",
+      "enable": "Enable",
+      "method": "Rename Method",
+      "eps": "EPS complete",
+      "grouptag": "Add Group Tag",
+      "deletebadtorr": "Delete Bad Torrent"
+    },
+    "notificationset": {
+      "title": "Notification Setting",
+      "enable": "Enable",
+      "type": "Type",
+      "token": "Token",
+      "chatid": "Chat ID"
+    },
+    "proxyset": {
+      "title": "Proxy Setting",
+      "enable": "Enable",
+      "type": "Proxy Type",
+      "host": "Host",
+      "port": "Port",
+      "username": "Username",
+      "password": "Password"
+    },
+    "mediaplayerset": {
+      "title": "Media Player Setting",
+      "type": "type",
+      "url": "url"
+    },
+    "cancel": "Cancel",
+    "apply": "Apply"
+  }
+}
diff --git a/webui/src/locales/lang/en-US.yaml b/webui/src/locales/lang/en-US.yaml
deleted file mode 100644
index ed748707..00000000
--- a/webui/src/locales/lang/en-US.yaml
+++ /dev/null
@@ -1,127 +0,0 @@
-login:
-  title: 'Login'
-  username: 'Username'
-  password: 'Password'
-  loginbtn: 'Login'
-  default: 'Default'
-
-sidebar:
-  title: 'Menu'
-  homepage: 'HomePage'
-  player: 'Player'
-  log: 'Log'
-  config: 'Config'
-  logout: 'Logout'
-
-topbar:
-  start: 'Start'
-  pause: 'Pause'
-  restart: 'Restart'
-  shutdown: 'Shutdown'
-  resetrule: 'Reset Rule'
-
-  profile: 
-    title: 'Profile'
-    poptitle: 'Change Account'
-    username: 'Username'
-    password: 'Password'
-    updatebtn: 'Update'
-    
-  add:
-    title: 'Add Bangumi'
-    rsslink: 'RSS Link'
-    placeholder: 'Please enter the RSS link'
-    analyse: 'Analyse'
-
-homepage:
-  title: 'Bangumi List'
-  rule: 
-    officaltitle: 'Official Title'
-    year: 'Year'
-    season: 'Season'
-    offset: 'Offset'
-    exclude: 'Exclude'
-    enable: 'Enable'
-    disable: 'Disable'
-    delete: 'Delete'
-    apply: 'Apply'
-    yesbtn: 'Yes'
-    nobtn: 'No'
-    enablehit: 'Do you want to enable this rule?'
-    deletehit: 'Delete Local File?'
-    enablerule: 'Enable Rule'
-    editrule: 'Edit Rule'
-
-player:
-  title: 'Player'
-  hit: 'Please set up the media player'
-
-log:
-  title: 'Log'
-  reset: 'Reset'
-  copy: 'Copy'
-  contactinfo: 'Contact Infomation'
-  go: 'Go'
-  join: 'Join'
-  bugrepo: 'Bug Report'
-
-config:
-  title: 'Config'
-  normalset: 
-    title: 'Normal Setting'
-    rssintvl: 'Interval Time of Rss'
-    renameintvl: 'Interval Time of Rename'
-    webport: 'WebUI Port'
-    debug: 'Debug'
-
-  parserset: 
-    title: 'Parser Setting'
-    enable: 'Enable'
-    source: 'Source'
-    token: 'Token'
-    url: 'Custom Url'
-    language: 'Language'
-    type: 'Parser Type'
-    exclude: 'Exclude'
-
-  downloaderset: 
-    title: 'Downloader Setting'
-    type: 'Downloader Type'
-    host: 'Host'
-    username: 'Username'
-    password: 'Password'
-    path: 'Download Path'
-    ssl: 'SSL'
-  
-  manageset: 
-    title: 'Manage Setting'
-    enable: 'Enable'
-    method: 'Rename Method'
-    eps: 'EPS complete'
-    grouptag: 'Add Group Tag'
-    deletebadtorr: 'Delete Bad Torrent'
-
-  notificationset: 
-    title: 'Notification Setting'
-    enable: 'Enable'
-    type: 'Type'
-    token: 'Token'
-    chatid: 'Chat ID'
-
-  proxyset: 
-    title: 'Proxy Setting'
-    enable: 'Enable'
-    type: 'Proxy Type'
-    host: 'Host'
-    port: 'Port'
-    username: 'Username'
-    password: 'Password'
-
-  mediaplayerset: 
-    title: 'Media Player Setting'
-    type: 'type'
-    url: 'url'
-
-  cancel: 'Cancel'
-  apply: 'Apply'
-  
\ No newline at end of file
diff --git a/webui/src/locales/lang/zh-CN.json b/webui/src/locales/lang/zh-CN.json
new file mode 100644
index 00000000..c83e5acc
--- /dev/null
+++ b/webui/src/locales/lang/zh-CN.json
@@ -0,0 +1,132 @@
+{
+  "login": {
+    "title": "登录",
+    "username": "用户名",
+    "password": "密码",
+    "loginbtn": "登录",
+    "default": "默认账号密码 "
+  },
+  "sidebar": {
+    "title": "菜单",
+    "homepage": "主页",
+    "player": "播放器",
+    "log": "日志",
+    "config": "设置",
+    "logout": "退出",
+    "calendar": "日历",
+    "downloader": "下载器"
+  },
+  "topbar": {
+    "start": "启动",
+    "pause": "暂停",
+    "restart": "重启",
+    "shutdown": "关闭",
+    "resetrule": "重置规则",
+    "profile": {
+      "title": "账户资料",
+      "poptitle": "修改账户信息",
+      "username": "用户名",
+      "password": "密码",
+      "updatebtn": "更新"
+    },
+    "add": {
+      "title": "添加番剧",
+      "rsslink": "RSS链接",
+      "placeholder": "请输入RSS链接",
+      "analyse": "分析"
+    }
+  },
+  "homepage": {
+    "title": "番剧列表",
+    "rule": {
+      "officaltitle": "官方名称",
+      "year": "年份",
+      "season": "季度",
+      "offset": "偏移",
+      "exclude": "排除",
+      "enable": "启用",
+      "disable": "禁用",
+      "delete": "删除",
+      "apply": "应用",
+      "yesbtn": "是",
+      "nobtn": "否",
+      "enablehit": "确定要让规则生效吗？",
+      "deletehit": "删除本地文件？",
+      "enablerule": "启用规则",
+      "editrule": "编辑规则"
+    }
+  },
+  "player": {
+    "title": "播放器",
+    "hit": "请设置播放器地址"
+  },
+  "log": {
+    "title": "日志",
+    "reset": "重置",
+    "copy": "复制",
+    "contactinfo": "联系方式",
+    "go": "访问",
+    "join": "加入",
+    "bugrepo": "Bug反馈"
+  },
+  "config": {
+    "title": "系统设置",
+    "normalset": {
+      "title": "一般设置",
+      "rssintvl": "RSS间隔",
+      "renameintvl": "重命名间隔",
+      "webport": "网页端口",
+      "debug": "调试"
+    },
+    "parserset": {
+      "title": "解析设置",
+      "enable": "启用",
+      "source": "数据源",
+      "token": "Token",
+      "url": "自定义网址",
+      "language": "语言",
+      "type": "解析类型",
+      "exclude": "排除"
+    },
+    "downloaderset": {
+      "title": "下载设置",
+      "type": "下载器类型",
+      "host": "下载器地址",
+      "username": "用户名",
+      "password": "密码",
+      "path": "下载地址",
+      "ssl": "SSL"
+    },
+    "manageset": {
+      "title": "番剧管理设置",
+      "enable": "启用",
+      "method": "重命名方式",
+      "eps": "EPS完成",
+      "grouptag": "添加组标签",
+      "deletebadtorr": "删除坏种"
+    },
+    "notificationset": {
+      "title": "推送设置",
+      "enable": "启用",
+      "type": "类型",
+      "token": "Token",
+      "chatid": "Chat ID"
+    },
+    "proxyset": {
+      "title": "代理设置",
+      "enable": "启用",
+      "type": "类型",
+      "host": "地址",
+      "port": "端口",
+      "username": "用户名",
+      "password": "密码"
+    },
+    "mediaplayerset": {
+      "title": "播放器设置",
+      "type": "类型",
+      "url": "播放器地址"
+    },
+    "cancel": "取消",
+    "apply": "应用"
+  }
+}
diff --git a/webui/src/locales/lang/zh-CN.yaml b/webui/src/locales/lang/zh-CN.yaml
deleted file mode 100644
index 2a45e847..00000000
--- a/webui/src/locales/lang/zh-CN.yaml
+++ /dev/null
@@ -1,126 +0,0 @@
-login:
-  title: '登录'
-  username: '用户名'
-  password: '密码'
-  loginbtn: '登录'
-  default: '默认账号密码 '
-
-sidebar:
-  title: '菜单'
-  homepage: '主页'
-  player: '播放器'
-  log: '日志'
-  config: '设置'
-  logout: '退出'
-
-topbar:
-  start: '启动'
-  pause: '暂停'
-  restart: '重启'
-  shutdown: '关闭'
-  resetrule: '重置规则'
-
-  profile: 
-    title: '账户资料'
-    poptitle: '修改账户信息'
-    username: '用户名'
-    password: '密码'
-    updatebtn: '更新'
-
-  add:
-    title: '添加番剧'
-    rsslink: 'RSS链接'
-    placeholder: '请输入RSS链接'
-    analyse: '分析'
-
-homepage:
-  title: '番剧列表'
-  rule: 
-    officaltitle: '官方名称'
-    year: '年份'
-    season: '季度'
-    offset: '偏移'
-    exclude: '排除'
-    enable: '启用'
-    disable: '禁用'
-    delete: '删除'
-    apply: '应用'
-    yesbtn: '是'
-    nobtn: '否'
-    enablehit: '确定要让规则生效吗？'
-    deletehit: '删除本地文件？'
-    enablerule: '启用规则'
-    editrule: '编辑规则'
-
-player:
-  title: '播放器'
-  hit: '请设置播放器地址'
-
-log:
-  title: '日志'
-  reset: '重置'
-  copy: '复制'
-  contactinfo: '联系方式'
-  go: '访问'
-  join: '加入'
-  bugrepo: 'Bug反馈'
-
-config:
-  title: '系统设置'
-  normalset: 
-    title: '一般设置'
-    rssintvl: 'RSS间隔'
-    renameintvl: '重命名间隔'
-    webport: '网页端口'
-    debug: '调试'
-
-  parserset: 
-    title: '解析设置'
-    enable: '启用'
-    source: '数据源'
-    token: 'Token'
-    url: '自定义网址'
-    language: '语言'
-    type: '解析类型'
-    exclude: '排除'
-
-  downloaderset: 
-    title: '下载设置'
-    type: '下载器类型'
-    host: '下载器地址'
-    username: '用户名'
-    password: '密码'
-    path: '下载地址'
-    ssl: 'SSL'
-  
-  manageset: 
-    title: '番剧管理设置'
-    enable: '启用'
-    method: '重命名方式'
-    eps: 'EPS完成'
-    grouptag: '添加组标签'
-    deletebadtorr: '删除坏种'
-
-  notificationset: 
-    title: '推送设置'
-    enable: '启用'
-    type: '类型'
-    token: 'Token'
-    chatid: 'Chat ID'
-
-  proxyset: 
-    title: '代理设置'
-    enable: '启用'
-    type: '类型'
-    host: '地址'
-    port: '端口'
-    username: '用户名'
-    password: '密码'
-
-  mediaplayerset: 
-    title: '播放器设置'
-    type: '类型'
-    url: '播放器地址'
-
-  cancel: '取消'
-  apply: '应用'
diff --git a/webui/src/pages/index.vue b/webui/src/pages/index.vue
index 97175bb5..b458bf0a 100644
--- a/webui/src/pages/index.vue
+++ b/webui/src/pages/index.vue
@@ -13,12 +13,11 @@ definePage({
       <ab-sidebar />
 
       <div layout-content>
-
-          <RouterView v-slot="{ Component }">
-            <KeepAlive>
-              <component :is="Component" />
-            </KeepAlive>
-          </RouterView>
+        <RouterView v-slot="{ Component }">
+          <KeepAlive>
+            <component :is="Component" />
+          </KeepAlive>
+        </RouterView>
       </div>
     </main>
   </div>
diff --git a/webui/src/pages/index/bangumi.vue b/webui/src/pages/index/bangumi.vue
index 508c3192..fc6dc328 100644
--- a/webui/src/pages/index/bangumi.vue
+++ b/webui/src/pages/index/bangumi.vue
@@ -105,7 +105,7 @@ definePage({
         :season="i.season"
         @click="() => open(i)"
       ></ab-bangumi-card>
-  
+
       <ab-edit-rule
         v-model:show="editRule.show"
         v-model:rule="editRule.item"
diff --git a/webui/src/pages/index/config.vue b/webui/src/pages/index/config.vue
index a05861ab..2ad8d034 100644
--- a/webui/src/pages/index/config.vue
+++ b/webui/src/pages/index/config.vue
@@ -15,26 +15,28 @@ definePage({
       <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 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>
+        <ab-button type="warn" @click="getConfig">{{
+          $t('config.cancel')
+        }}</ab-button>
+        <ab-button @click="setConfig">{{ $t('config.apply') }}</ab-button>
       </div>
     </div>
   </div>
diff --git a/webui/src/pages/index/log.vue b/webui/src/pages/index/log.vue
index bcd3bf17..fe33e93d 100644
--- a/webui/src/pages/index/log.vue
+++ b/webui/src/pages/index/log.vue
@@ -29,13 +29,15 @@ definePage({
         >
           <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>
+          <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>
@@ -45,44 +47,44 @@ definePage({
                 link="https://github.com/EstrellaXD/Auto_Bangumi"
                 target="_blank"
               >
-              {{$t('log.go')}}
+                {{ $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')}}
+                {{ $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')}}
+                {{ $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')}}
+                {{ $t('log.join') }}
               </ab-button>
             </ab-label>
           </div>
         </ab-container>
-  
+
         <ab-container :title="$t('log.bugrepo')">
           <div space-y-12px>
             <ab-button
@@ -94,9 +96,9 @@ definePage({
               link="https://github.com/EstrellaXD/Auto_Bangumi/issues"
               >Github Issue</ab-button
             >
-  
+
             <div line></div>
-  
+
             <ab-button
               mx-auto
               text-16px
diff --git a/webui/src/pages/index/player.vue b/webui/src/pages/index/player.vue
index 5c131681..0cba5d1f 100644
--- a/webui/src/pages/index/player.vue
+++ b/webui/src/pages/index/player.vue
@@ -11,11 +11,11 @@ const { url } = storeToRefs(usePlayerStore());
   <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
-        >
+        <RouterLink to="/config" hover:underline>{{
+          $t('player.hit')
+        }}</RouterLink>
       </div>
-    </template>    
+    </template>
     <iframe
       v-else
       :src="url"
diff --git a/webui/src/pages/login.vue b/webui/src/pages/login.vue
index eb020a2c..ad4c3997 100644
--- a/webui/src/pages/login.vue
+++ b/webui/src/pages/login.vue
@@ -32,13 +32,15 @@ definePage({
         <div line></div>
 
         <div flex="~ justify-end">
-          <ab-button size="small" @click="login">{{$t('login.loginbtn')}}</ab-button>
+          <ab-button size="small" @click="login">{{
+            $t('login.loginbtn')
+          }}</ab-button>
         </div>
       </div>
     </ab-container>
 
     <div bg="#C7C4AB" text-white rounded-4px py-4px px-2em text-main>
-      <div>{{$t('login.default')}}: admin adminadmin</div>
+      <div>{{ $t('login.default') }}: admin adminadmin</div>
     </div>
   </div>
 </template>
diff --git a/webui/vite.config.ts b/webui/vite.config.ts
index eccc5e32..267af685 100644
--- a/webui/vite.config.ts
+++ b/webui/vite.config.ts
@@ -6,8 +6,6 @@ import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import VueRouter from 'unplugin-vue-router/vite';
 import { VueRouterAutoImports } from 'unplugin-vue-router';
-import vueI18n from '@intlify/unplugin-vue-i18n/vite';
-import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -36,9 +34,6 @@ export default defineConfig({
         'src/components/setting',
       ],
     }),
-    vueI18n({
-        include: path.resolve(__dirname, './src/locales/lang/**')
-    }),
   ],
   css: {
     preprocessorOptions: {