diff --git a/src/App.vue b/src/App.vue
index 22a5bdc3..e6e81198 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -137,3 +137,9 @@ const needsUpdate = (latestStr: string) => {
   <TopHeader />
   <router-view></router-view>
 </template>
+
+<style>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>
diff --git a/src/components/CustomSwitch.vue b/src/components/CustomSwitch.vue
index 95ff7850..3bbcd111 100644
--- a/src/components/CustomSwitch.vue
+++ b/src/components/CustomSwitch.vue
@@ -25,8 +25,4 @@ const valueChange = () => {
   </div>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/components/CustomUIDInput.vue b/src/components/CustomUIDInput.vue
index eb3e6f91..0f674019 100644
--- a/src/components/CustomUIDInput.vue
+++ b/src/components/CustomUIDInput.vue
@@ -25,8 +25,4 @@ defineEmits(['submit', 'update:modelValue'])
   </div>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/components/DialogListItem.vue b/src/components/DialogListItem.vue
index 09bb8043..90b6498f 100644
--- a/src/components/DialogListItem.vue
+++ b/src/components/DialogListItem.vue
@@ -18,8 +18,4 @@ const props = defineProps({
   </div>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/components/LauncherBanner.vue b/src/components/LauncherBanner.vue
index 09843982..9719b9d8 100644
--- a/src/components/LauncherBanner.vue
+++ b/src/components/LauncherBanner.vue
@@ -27,8 +27,4 @@ const openLink = (url: string) => {
   </MyCarousel>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/components/LauncherPosts.vue b/src/components/LauncherPosts.vue
index c983ad19..6bbfa427 100644
--- a/src/components/LauncherPosts.vue
+++ b/src/components/LauncherPosts.vue
@@ -46,10 +46,6 @@ const openLink = (url: string) => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .truncated {
   @apply inline-block max-w-full overflow-ellipsis whitespace-nowrap overflow-hidden;
 }
diff --git a/src/components/LoadFailedBlock.vue b/src/components/LoadFailedBlock.vue
index fd1a577d..acec00cb 100644
--- a/src/components/LoadFailedBlock.vue
+++ b/src/components/LoadFailedBlock.vue
@@ -58,8 +58,4 @@ const refresh = () => {
   </div>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/components/LoadingIcon.vue b/src/components/LoadingIcon.vue
index 5586e0f6..1819eb8b 100644
--- a/src/components/LoadingIcon.vue
+++ b/src/components/LoadingIcon.vue
@@ -16,10 +16,6 @@ defineProps({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .icon-loading {
   animation: 1s linear 0s infinite running rotate;
 }
diff --git a/src/components/MyCarousel.vue b/src/components/MyCarousel.vue
index 842c2794..be9c9b5a 100644
--- a/src/components/MyCarousel.vue
+++ b/src/components/MyCarousel.vue
@@ -248,10 +248,6 @@ defineExpose({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .indicator-selected {
   @apply w-7 bg-white;
 }
diff --git a/src/components/MyCheckbox.vue b/src/components/MyCheckbox.vue
index 359a2d03..c44fd68e 100644
--- a/src/components/MyCheckbox.vue
+++ b/src/components/MyCheckbox.vue
@@ -37,8 +37,4 @@ const switchStatus = () => {
   </div>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/components/MyDropdown.vue b/src/components/MyDropdown.vue
index ebbefec5..0a64a9e4 100644
--- a/src/components/MyDropdown.vue
+++ b/src/components/MyDropdown.vue
@@ -114,10 +114,6 @@ const onMouseLeave = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
diff --git a/src/components/MyTabs.vue b/src/components/MyTabs.vue
index bbf8f25b..8786e619 100644
--- a/src/components/MyTabs.vue
+++ b/src/components/MyTabs.vue
@@ -54,10 +54,6 @@ const selectTab = (idx: number) => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .tab-selected {
   @apply text-white bg-blue-600 cursor-default;
 }
diff --git a/src/components/MyTag.vue b/src/components/MyTag.vue
index 7036a78d..02a9dc5e 100644
--- a/src/components/MyTag.vue
+++ b/src/components/MyTag.vue
@@ -20,8 +20,4 @@ defineProps({
   </div>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/components/MyTooltip.vue b/src/components/MyTooltip.vue
index 742a171c..4a02950c 100644
--- a/src/components/MyTooltip.vue
+++ b/src/components/MyTooltip.vue
@@ -89,10 +89,6 @@ const onMouseLeave = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
diff --git a/src/components/ScrollWrapper.vue b/src/components/ScrollWrapper.vue
index 55450f51..4b0b5639 100644
--- a/src/components/ScrollWrapper.vue
+++ b/src/components/ScrollWrapper.vue
@@ -242,10 +242,6 @@ defineExpose({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 ::-webkit-scrollbar {
   width: 0 !important;
 }
diff --git a/src/components/TemplateDialog.vue b/src/components/TemplateDialog.vue
index b07e575c..97f69f53 100644
--- a/src/components/TemplateDialog.vue
+++ b/src/components/TemplateDialog.vue
@@ -60,10 +60,6 @@ defineExpose({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .v-enter-active .outer {
   transition: opacity 0.5s ease;
 }
diff --git a/src/components/TopHeader.vue b/src/components/TopHeader.vue
index e9b1ba75..d2d7ae48 100644
--- a/src/components/TopHeader.vue
+++ b/src/components/TopHeader.vue
@@ -22,15 +22,30 @@ const home = () => {
 }
 const genshin = () => {
   selection.value = 1
-  router.push('/gspage')
+  router.push({
+    name: 'tempPage',
+    query: {
+      from: 'gs',
+    },
+  })
 }
 const starRail = () => {
   selection.value = 2
-  router.push('/srpage')
+  router.push({
+    name: 'tempPage',
+    query: {
+      from: 'sr',
+    },
+  })
 }
 const honkai3 = () => {
   selection.value = 3
-  router.push('/hipage')
+  router.push({
+    name: 'tempPage',
+    query: {
+      from: 'hi3',
+    },
+  })
 }
 const settings = () => {
   selection.value = 4
@@ -116,10 +131,6 @@ const winMin = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .drag {
   -webkit-app-region: drag;
 }
diff --git a/src/components/UpdateDialogContent.vue b/src/components/UpdateDialogContent.vue
index bc2e1ab0..79112975 100644
--- a/src/components/UpdateDialogContent.vue
+++ b/src/components/UpdateDialogContent.vue
@@ -84,8 +84,4 @@ const offColor = computed(() => {
   </div>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index ec9b6734..0a299654 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -48,7 +48,7 @@
   "mainBgDialog_filter": "Image",
   "mainpage_title": "miHoYo miXeD Launcher",
   "mainpage_buttonText": "Launch {game}",
-  "genshin_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=en-us&launcher_id=10",
+  "gs_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=en-us&launcher_id=10",
   "gs_enkaLangCode": "en",
   "gs_emptyPlayerTip": "Player details will be displayed here",
   "gs_showcaseTip": "Player details unavailable, please enable 'Show Character Details' in game and try again.",
diff --git a/src/i18n/fr_FR.json b/src/i18n/fr_FR.json
index c5130af4..f0db6e2e 100644
--- a/src/i18n/fr_FR.json
+++ b/src/i18n/fr_FR.json
@@ -48,7 +48,7 @@
   "mainBgDialog_filter": "Image",
   "mainpage_title": "miHoYo miXeD Launcher",
   "mainpage_buttonText": "Lancer {game}",
-  "genshin_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=fr-fr&launcher_id=10",
+  "gs_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=fr-fr&launcher_id=10",
   "gs_enkaLangCode": "fr",
   "gs_emptyPlayerTip": "Les détails du joueur s'afficheront ici",
   "gs_showcaseTip": "Les détails du joueur ne sont pas disponibles, veuillez activer 'Afficher les détails du personnage' dans le jeu et réessayez.",
diff --git a/src/i18n/ja_JP.json b/src/i18n/ja_JP.json
index bd7f1501..91f3b4da 100644
--- a/src/i18n/ja_JP.json
+++ b/src/i18n/ja_JP.json
@@ -48,7 +48,7 @@
   "mainBgDialog_filter": "画像",
   "mainpage_title": "miHoYo miXeD ランチャー",
   "mainpage_buttonText": "{game}を起動！",
-  "genshin_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=ja-jp&launcher_id=10",
+  "gs_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=ja-jp&launcher_id=10",
   "gs_enkaLangCode": "ja",
   "gs_emptyPlayerTip": "キャラの詳細がここに表示されます",
   "gs_showcaseTip": "キャラの詳細情報が利用できません。ゲーム内で「キャラクターの詳細を表示」を有効にして、もう一度お試しください。",
diff --git a/src/i18n/ru_RU.json b/src/i18n/ru_RU.json
index 6a5e2ff8..5ae46dd2 100644
--- a/src/i18n/ru_RU.json
+++ b/src/i18n/ru_RU.json
@@ -48,7 +48,7 @@
   "mainBgDialog_filter": "Изображение",
   "mainpage_title": "Запуск miHoYo miXeD",
   "mainpage_buttonText": "Запустить {game}",
-  "genshin_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=ru-ru&launcher_id=10",
+  "gs_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=ru-ru&launcher_id=10",
   "gs_enkaLangCode": "ru",
   "gs_emptyPlayerTip": "Информация о игроке будет отображена здесь",
   "gs_showcaseTip": "Информация о игроке недоступна. Включите 'Отображение деталей персонажей' в игре и попробуйте снова.",
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
index 55da9bbd..86dfb086 100644
--- a/src/i18n/zh_CN.json
+++ b/src/i18n/zh_CN.json
@@ -48,7 +48,7 @@
   "mainBgDialog_filter": "图片",
   "mainpage_title": "米哈游聚合启动器",
   "mainpage_buttonText": "{game}启动",
-  "genshin_launcherContentsUrl": "https://sdk-static.mihoyo.com/hk4e_cn/mdk/launcher/api/content?filter_adv=false&key=eYd89JmJ&language=zh-cn&launcher_id=18",
+  "gs_launcherContentsUrl": "https://sdk-static.mihoyo.com/hk4e_cn/mdk/launcher/api/content?filter_adv=false&key=eYd89JmJ&language=zh-cn&launcher_id=18",
   "gs_enkaLangCode": "chs",
   "gs_emptyPlayerTip": "此处将显示角色的详细信息",
   "gs_showcaseTip": "当前暂无详细信息，请在游戏内打开“显示角色详情”后再试。",
diff --git a/src/i18n/zh_TW.json b/src/i18n/zh_TW.json
index 577d0908..6b401c81 100644
--- a/src/i18n/zh_TW.json
+++ b/src/i18n/zh_TW.json
@@ -48,7 +48,7 @@
   "mainBgDialog_filter": "圖片",
   "mainpage_title": "米哈游聚合啓動器",
   "mainpage_buttonText": "{game}啓動",
-  "genshin_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=zh-tw&launcher_id=10",
+  "gs_launcherContentsUrl": "https://sdk-os-static.mihoyo.com/hk4e_global/mdk/launcher/api/content?filter_adv=false&key=gcStgarh&language=zh-tw&launcher_id=10",
   "gs_enkaLangCode": "cht",
   "gs_emptyPlayerTip": "此處將顯示角色的詳細信息",
   "gs_showcaseTip": "當前暫無詳細信息，請在游戲内打開”顯示角色詳情“后再試。",
diff --git a/src/pages/GenshinPage/GenshinPage.vue b/src/pages/GamePage.vue
similarity index 62%
rename from src/pages/GenshinPage/GenshinPage.vue
rename to src/pages/GamePage.vue
index 4dfa1026..c413504f 100644
--- a/src/pages/GenshinPage/GenshinPage.vue
+++ b/src/pages/GamePage.vue
@@ -1,26 +1,62 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { translate } from '../../i18n'
-import { LauncherInfo, PostInfo } from '../../types/launcher/launcherInfo'
-import GenshinInfoCard from './Components/GenshinInfoCard.vue'
-import { useDialog } from '../../utils/template-dialog'
-import GenshinDialog from './Components/GenshinDialog.vue'
-import GSImportDialog from './Components/GSImportDialog.vue'
-import ScrollWrapper from '../../components/ScrollWrapper.vue'
-import MyDropdown from '../../components/MyDropdown.vue'
+import { Component, computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { translate } from '../i18n'
+import { LauncherInfo, PostInfo } from '../types/launcher/launcherInfo'
+import GenshinInfoCard from './GenshinPage/Components/GenshinInfoCard.vue'
+import { useDialog } from '../utils/template-dialog'
+import GenshinDialog from './GenshinPage/Components/GenshinDialog.vue'
+import GSImportDialog from './GenshinPage/Components/GSImportDialog.vue'
+import ScrollWrapper from '../components/ScrollWrapper.vue'
+import MyDropdown from '../components/MyDropdown.vue'
+import StarRailDialog from './StarRailPage/Components/StarRailDialog.vue'
+import Honkai3Dialog from './Honkai3Page/Components/Honkai3Dialog.vue'
+import SRImportDialog from './StarRailPage/Components/SRImportDialog.vue'
+import HI3ImportDialog from './Honkai3Page/Components/HI3ImportDialog.vue'
+import StarRailInfoCard from './StarRailPage/Components/StarRailInfoCard.vue'
 
-const gameName = translate('general_gs')
+const game = useRoute().query.game
+const gameName = translate(`general_${game}`)
 
-const gsLauncherPath = ref('')
-const gsGamePath = ref('')
 const launcherPath = ref('')
 const gamePath = ref('')
-const timeUpd3_8 = Date.parse('2023/07/05 12:00:00 UTC+8')
 const timeNow = Date.now()
-const timeDelta = computed(
-  () => Math.ceil((timeNow - timeUpd3_8) / 1000 / 3600 / 24 - 0.5) % 42,
-)
+const timeDelta = computed(() => {
+  let timeUpd = 0
+  switch (game) {
+    case 'gs':
+      timeUpd = Date.parse('2023/07/05 12:00:00 UTC+8')
+      break
+    case 'sr':
+      timeUpd = Date.parse('2023/10/11 12:00:00 UTC+8')
+      break
+    case 'hi3':
+      timeUpd = Date.parse('2023/07/06 12:00:00 UTC+8')
+      break
+  }
+  return Math.ceil((timeNow - timeUpd) / 1000 / 3600 / 24 - 0.5) % 42
+})
+const defaultBG = computed(() => {
+  switch (game) {
+    case 'gs':
+      return '../../src/assets/gsbanner.png'
+    case 'sr':
+      return '../../src/assets/srbanner.jpg'
+    case 'hi3':
+      return '../../src/assets/hi3banner.webp'
+  }
+})
+const prefFont = computed(() => {
+  switch (game) {
+    case 'gs':
+      return 'gs'
+    case 'sr':
+      return 'sr-sans'
+    case 'hi3':
+      return 'hi3'
+  }
+})
+let dialogComponent: Component = GenshinDialog
 const launcherInfo = ref<LauncherInfo>({
   adv: undefined,
   banner: [],
@@ -39,9 +75,21 @@ const scrollBarRef = ref()
 const postTypeMap = new Map<string, PostInfo[]>()
 
 onMounted(async () => {
+  switch (game) {
+    case 'gs':
+      dialogComponent = GenshinDialog
+      break
+    case 'sr':
+      dialogComponent = StarRailDialog
+      break
+    case 'hi3':
+      dialogComponent = Honkai3Dialog
+      break
+  }
+
   // 获取原神启动器信息
   window.axios
-    .post(translate('genshin_launcherContentsUrl'))
+    .post(translate(`${game}_launcherContentsUrl`))
     .then(value => {
       launcherInfo.value = value.data
       launcherInfo.value.post.forEach(post => {
@@ -53,30 +101,28 @@ onMounted(async () => {
           postTypeMap.set(post.type, [post])
         }
       })
-      console.log(postTypeMap)
       launcherInfoReady.value = true
-      console.log(launcherInfo.value)
     })
     .catch(err => {
       launcherInfoFailed.value = true
       errMsg.value = err.toString()
     })
-  gsLauncherPath.value = await window.store.get('gsLauncherPath')
-  gsGamePath.value = await window.store.get('gsGamePath')
+  launcherPath.value = await window.store.get(`${game}LauncherPath`)
+  gamePath.value = await window.store.get(`${game}GamePath`)
   window.store
-    .get('genshinUpd')
+    .get(`${game}Upd`)
     .then(resp => {
-      if (gsLauncherPath.value && !resp) {
+      if (launcherPath.value && !resp) {
         if (timeDelta.value > 40) {
           useDialog(
-            GenshinDialog,
+            dialogComponent,
             {
               onCancel(dispose: () => void) {
                 dispose()
               },
               onOk(dispose: () => void) {
-                window.child.exec(gsLauncherPath.value)
-                window.store.set('genshinUpd', true, false)
+                window.child.exec(launcherPath.value)
+                window.store.set(`${game}Upd`, true, false)
                 dispose()
               },
             },
@@ -94,14 +140,14 @@ onMounted(async () => {
           )
         } else if (timeDelta.value > 0 && timeDelta.value < 3) {
           useDialog(
-            GenshinDialog,
+            dialogComponent,
             {
               onCancel(dispose: () => void) {
                 dispose()
               },
               onOk(dispose: () => void) {
-                window.child.exec(gsLauncherPath.value)
-                window.store.set('genshinUpd', true, false)
+                window.child.exec(launcherPath.value)
+                window.store.set(`${game}Upd`, true, false)
                 dispose()
               },
             },
@@ -117,14 +163,14 @@ onMounted(async () => {
           )
         } else if (timeDelta.value == 0) {
           useDialog(
-            GenshinDialog,
+            dialogComponent,
             {
               onCancel(dispose: () => void) {
                 dispose()
               },
               onOk(dispose: () => void) {
-                window.child.exec(gsLauncherPath.value)
-                window.store.set('genshinUpd', true, false)
+                window.child.exec(launcherPath.value)
+                window.store.set(`${game}Upd`, true, false)
                 dispose()
               },
             },
@@ -139,11 +185,11 @@ onMounted(async () => {
           )
         }
       } else if (
-        gsLauncherPath.value &&
+        launcherPath.value &&
         timeDelta.value > 2 &&
         timeDelta.value < 37
       ) {
-        window.store.set('genshinUpd', false, false)
+        window.store.set(`${game}Upd`, false, false)
       }
     })
     .catch(err => {
@@ -152,7 +198,20 @@ onMounted(async () => {
 })
 
 const importButtonClick = () => {
-  useDialog(GSImportDialog, {
+  let importDialogComponent: Component = GSImportDialog
+  switch (game) {
+    case 'gs':
+      importDialogComponent = GSImportDialog
+      break
+    case 'sr':
+      importDialogComponent = SRImportDialog
+      break
+    case 'hi3':
+      importDialogComponent = HI3ImportDialog
+      break
+  }
+
+  useDialog(importDialogComponent, {
     onOk(dispose: () => void) {
       dispose()
       refresh()
@@ -165,8 +224,8 @@ const importButtonClick = () => {
   })
 }
 
-const gsLaunch = async () => {
-  await window.child.exec(gsGamePath.value)
+const launchGame = async () => {
+  await window.child.exec(gamePath.value)
   const trayOnLaunch = await window.store.get('trayOnLaunch')
   if (trayOnLaunch) {
     window.win.tray()
@@ -178,17 +237,17 @@ const handleCommand = (idx: number) => {
 
   switch (commands[idx]) {
     case 'openLauncher':
-      window.child.exec(gsLauncherPath.value)
+      window.child.exec(launcherPath.value)
       break
     case 'clearPath':
-      window.store.delete('gsLauncherPath')
-      window.store.delete('gsGamePath')
-      window.store.delete('genshinUpd')
-      gsLauncherPath.value = ''
-      gsGamePath.value = ''
+      window.store.delete(`${game}LauncherPath`)
+      window.store.delete(`${game}GamePath`)
+      window.store.delete(`${game}Upd`)
+      launcherPath.value = ''
+      gamePath.value = ''
       break
     case 'clearPlayerinfo':
-      window.store.delete('genshinInfo')
+      window.store.delete(`${game}Info`)
       refresh()
       break
   }
@@ -200,11 +259,10 @@ const handleScroll = ({ top }: Record<string, number>) => {
 
 const router = useRouter()
 const refresh = () => {
-  console.log('click on refresh')
   router.push({
     name: 'tempPage',
     query: {
-      from: '/gspage',
+      from: game,
     },
   })
 }
@@ -223,7 +281,9 @@ const refresh = () => {
       height="120"
       width="120"
     />
-    <div class="mt-3 font-gs text-xl">{{ $t('general_loading') }}</div>
+    <div class="mt-3 text-xl" :class="`font-${game}`">
+      {{ $t('general_loading') }}
+    </div>
   </div>
   <LoadFailedBlock
     v-else-if="launcherInfoFailed"
@@ -250,7 +310,7 @@ const refresh = () => {
         :src="
           launcherInfoReady && launcherInfo.adv
             ? launcherInfo.adv.background
-            : '../../src/assets/gsbanner.png'
+            : defaultBG
         "
         @touchmove.prevent
         @mousewheel.prevent
@@ -278,7 +338,8 @@ const refresh = () => {
           !hideElements
         "
         :postTypeMap="postTypeMap"
-        class="absolute left-16 top-96 z-50 rounded-xl backdrop-blur-md pl-3 pr-1 font-gs"
+        class="absolute left-16 top-96 z-50 rounded-xl backdrop-blur-md pl-3 pr-1"
+        :class="`font-${prefFont}`"
         style="
           height: 112px;
           width: 396px;
@@ -296,19 +357,20 @@ const refresh = () => {
       <div
         class="items-scroll flex flex-col content-center items-center w-full"
       >
-        <div class="w-full flex flex-row justify-between">
-          <div class="w-1"></div>
+        <div class="w-full flex flex-row relative">
+          <div class="h-16 my-3" />
           <div
-            v-if="gsGamePath"
-            class="transition-all"
-            :class="hideElements ? ' -translate-x-96' : ''"
+            v-if="gamePath"
+            class="absolute right-0 transition-all"
+            :class="hideElements ? 'right-1/2 translate-x-1/2' : ''"
             style="transition-duration: 500ms"
           >
             <div
-              class="mx-2 my-3 flex flex-row rounded-full bg-yellow-400 font-gs"
+              class="mx-2 my-3 flex flex-row rounded-full bg-yellow-400"
+              :class="`font-${prefFont}`"
             >
               <button
-                @click="gsLaunch"
+                @click="launchGame"
                 class="pl-4 px-4 text-2xl font-bold rounded-full h-16 hover:bg-yellow-500 active:bg-yellow-800 active:scale-90 transition-all"
               >
                 {{ $t('general_launchGame') }}
@@ -332,33 +394,34 @@ const refresh = () => {
               </MyDropdown>
             </div>
           </div>
-          <div v-else>
-            <div class="justify-between flex flex-row">
-              <div class="w-1"></div>
-              <div class="flex flex-row">
-                <button
-                  @click="importButtonClick"
-                  class="mx-2 my-3 rounded-full h-16 text-2xl bg-yellow-400 font-gs w-48 hover:bg-yellow-500 active:bg-yellow-800 active:scale-90 transition-all cursor-default"
-                  :class="hideElements ? ' -translate-x-96' : ''"
-                  style="transition-duration: 500ms"
-                >
-                  {{ $t('general_importGame') }}
-                </button>
-              </div>
-            </div>
-          </div>
+          <button
+            v-else
+            @click="importButtonClick"
+            class="absolute right-0 mx-2 my-3 rounded-full h-16 text-2xl bg-yellow-400 w-48 hover:bg-yellow-500 active:bg-yellow-800 active:scale-90 transition-all cursor-default"
+            :class="
+              hideElements
+                ? `font-${prefFont} right-1/2 translate-x-1/2`
+                : `font-${prefFont}`
+            "
+            style="transition-duration: 500ms"
+          >
+            {{ $t('general_importGame') }}
+          </button>
         </div>
-        <GenshinInfoCard class="my-2 w-full mb-4 shadow-md"></GenshinInfoCard>
+        <GenshinInfoCard
+          v-if="game === 'gs'"
+          class="my-2 w-full mb-4 shadow-md"
+        />
+        <StarRailInfoCard
+          v-else-if="game === 'sr'"
+          class="my-2 w-full mb-4 shadow-md"
+        />
       </div>
     </ScrollWrapper>
   </div>
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .bg-pic {
   width: 98vw;
   height: 96.5vh;
@@ -375,22 +438,6 @@ const refresh = () => {
   width: 80vw;
 }
 
-.import-button-enabled {
-  @apply border border-gray-400 text-gray-600 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-100 active:bg-blue-300;
-}
-
-.import-button-disabled {
-  @apply bg-gray-100 text-gray-400 pointer-events-none;
-}
-
-.confirm-button-enabled {
-  @apply bg-blue-600 text-white hover:bg-blue-500 active:scale-90;
-}
-
-.confirm-button-disabled {
-  @apply bg-blue-200 text-white pointer-events-none;
-}
-
 .banner-enter-from,
 .banner-leave-to {
   @apply opacity-0 -translate-y-10 pointer-events-none blur-md -translate-x-14 scale-110;
diff --git a/src/pages/GenshinPage/Components/GSCharDetailsOverlay.vue b/src/pages/GenshinPage/Components/GSCharDetailsOverlay.vue
index f168fc4a..33ca88bf 100644
--- a/src/pages/GenshinPage/Components/GSCharDetailsOverlay.vue
+++ b/src/pages/GenshinPage/Components/GSCharDetailsOverlay.vue
@@ -180,10 +180,6 @@ const closeDialog = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .divider-bg {
   background: #dad2c5;
 }
diff --git a/src/pages/GenshinPage/Components/GSImportDialog.vue b/src/pages/GenshinPage/Components/GSImportDialog.vue
index 281a826a..bb43813c 100644
--- a/src/pages/GenshinPage/Components/GSImportDialog.vue
+++ b/src/pages/GenshinPage/Components/GSImportDialog.vue
@@ -140,10 +140,6 @@ const onDialogOk = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .import-button-enabled {
   @apply text-sm border hover:border-yellow-500 active:bg-white hover:shadow;
   color: #cea652;
diff --git a/src/pages/GenshinPage/Components/GenshinButton.vue b/src/pages/GenshinPage/Components/GenshinButton.vue
index ef2414f8..2e5ec332 100644
--- a/src/pages/GenshinPage/Components/GenshinButton.vue
+++ b/src/pages/GenshinPage/Components/GenshinButton.vue
@@ -40,10 +40,6 @@ defineProps({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .button-wrapper {
   @apply border-2 mx-3 h-9 p-1 rounded-full bg-white transition-all cursor-default shadow-lg;
   background: #4a5366;
diff --git a/src/pages/GenshinPage/Components/GenshinDialog.vue b/src/pages/GenshinPage/Components/GenshinDialog.vue
index 706bd14e..3bc69898 100644
--- a/src/pages/GenshinPage/Components/GenshinDialog.vue
+++ b/src/pages/GenshinPage/Components/GenshinDialog.vue
@@ -218,10 +218,6 @@ defineExpose({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .v-enter-active .outer {
   transition: opacity 0.5s ease;
 }
diff --git a/src/pages/GenshinPage/Components/GenshinInfoCard.vue b/src/pages/GenshinPage/Components/GenshinInfoCard.vue
index 14831771..7abe1e54 100644
--- a/src/pages/GenshinPage/Components/GenshinInfoCard.vue
+++ b/src/pages/GenshinPage/Components/GenshinInfoCard.vue
@@ -152,7 +152,7 @@ const requestInfo = () => {
       router.push({
         name: 'tempPage',
         query: {
-          from: '/gspage',
+          from: 'gs',
         },
       })
     })
@@ -993,10 +993,6 @@ const countRolledSubstat = (stats: any[], prop: string) => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .font-gs {
   font-family: genshin-font, serif;
 }
diff --git a/src/pages/Honkai3Page/Components/HI3ImportDialog.vue b/src/pages/Honkai3Page/Components/HI3ImportDialog.vue
index 1daac280..a8efc608 100644
--- a/src/pages/Honkai3Page/Components/HI3ImportDialog.vue
+++ b/src/pages/Honkai3Page/Components/HI3ImportDialog.vue
@@ -151,10 +151,6 @@ const onDialogOk = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .import-button-enabled {
   border-width: 1px;
   border-color: rgb(72, 107, 161);
diff --git a/src/pages/Honkai3Page/Components/Honkai3Button.vue b/src/pages/Honkai3Page/Components/Honkai3Button.vue
index 9fd0b5e6..2f6e5857 100644
--- a/src/pages/Honkai3Page/Components/Honkai3Button.vue
+++ b/src/pages/Honkai3Page/Components/Honkai3Button.vue
@@ -48,10 +48,6 @@ defineProps({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .button-wrapper {
   @apply mx-3 h-9 rounded transition-all cursor-default;
 }
diff --git a/src/pages/Honkai3Page/Components/Honkai3Dialog.vue b/src/pages/Honkai3Page/Components/Honkai3Dialog.vue
index b812911a..40edeac5 100644
--- a/src/pages/Honkai3Page/Components/Honkai3Dialog.vue
+++ b/src/pages/Honkai3Page/Components/Honkai3Dialog.vue
@@ -163,10 +163,6 @@ defineExpose({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .v-enter-active .outer {
   transition: opacity 0.5s ease;
 }
diff --git a/src/pages/Honkai3Page/Honkai3Page.vue b/src/pages/Honkai3Page/Honkai3Page.vue
deleted file mode 100644
index 71a82143..00000000
--- a/src/pages/Honkai3Page/Honkai3Page.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { translate } from '../../i18n'
-import { LauncherInfo, PostInfo } from '../../types/launcher/launcherInfo'
-import { useDialog } from '../../utils/template-dialog'
-import HI3ImportDialog from './Components/HI3ImportDialog.vue'
-import Honkai3Dialog from './Components/Honkai3Dialog.vue'
-import MyDropdown from '../../components/MyDropdown.vue'
-import ScrollWrapper from '../../components/ScrollWrapper.vue'
-
-const gameName = translate('general_hi3')
-
-const hiLauncherPath = ref('')
-const hiGamePath = ref('')
-const launcherPath = ref('')
-const gamePath = ref('')
-const timeUpd6_8 = Date.parse('2023/07/06 12:00:00 UTC+8')
-const timeNow = Date.now()
-const timeDelta = computed(
-  () => Math.ceil((timeNow - timeUpd6_8) / 1000 / 3600 / 24 - 0.5) % 42,
-)
-const launcherInfo = ref<LauncherInfo>({
-  banner: [],
-  icon: [],
-  post: [],
-  qq: [],
-})
-const launcherInfoReady = ref(false)
-const launcherInfoFailed = ref(false)
-const errMsg = ref('')
-const hideElements = ref(false)
-const scrollBarRef = ref()
-
-const postTypeMap = new Map()
-
-onMounted(async () => {
-  // 获取崩3启动器信息
-  window.axios
-    .post(translate('hi3_launcherContentsUrl'))
-    .then(value => {
-      launcherInfo.value = value.data
-      launcherInfo.value.post.forEach((post: PostInfo) => {
-        let tmp = postTypeMap.get(post.type)
-        if (tmp) {
-          tmp.push(post)
-          postTypeMap.set(post.type, tmp)
-        } else {
-          postTypeMap.set(post.type, [post])
-        }
-      })
-      launcherInfoReady.value = true
-      console.log(launcherInfo.value)
-    })
-    .catch(err => {
-      launcherInfoFailed.value = true
-      errMsg.value = err.toString()
-    })
-  hiLauncherPath.value = await window.store.get('hi3LauncherPath')
-  hiGamePath.value = await window.store.get('hi3GamePath')
-  window.store
-    .get('honkai3Upd')
-    .then(resp => {
-      if (hiLauncherPath.value && !resp) {
-        if (timeDelta.value > 40) {
-          useDialog(
-            Honkai3Dialog,
-            {
-              onOk(dispose: () => void) {
-                window.child.exec(hiLauncherPath.value)
-                window.store.set('honkai3Upd', true, false)
-                dispose()
-              },
-            },
-            {
-              title: translate('general_gameUpdBoxTitle'),
-              msg: translate('general_gameUpdBoxText1', {
-                game: gameName,
-                beDays: translate('general_beDays', {
-                  n: 42 - timeDelta.value,
-                }),
-              }),
-              msgCenter: false,
-              showCancel: true,
-            },
-          )
-        } else if (timeDelta.value > 0 && timeDelta.value < 3) {
-          useDialog(
-            Honkai3Dialog,
-            {
-              onOk(dispose: () => void) {
-                window.child.exec(hiLauncherPath.value)
-                window.store.set('honkai3Upd', true, false)
-                dispose()
-              },
-            },
-            {
-              title: translate('general_gameUpdBoxTitle'),
-              msg: translate('general_gameUpdBoxText2', {
-                game: gameName,
-                days: translate('general_days', { n: timeDelta.value }),
-              }),
-              msgCenter: false,
-              showCancel: true,
-            },
-          )
-        } else if (timeDelta.value == 0) {
-          useDialog(
-            Honkai3Dialog,
-            {
-              onOk(dispose: () => void) {
-                window.child.exec(hiLauncherPath.value)
-                window.store.set('honkai3Upd', true, false)
-                dispose()
-              },
-            },
-            {
-              title: translate('general_gameUpdBoxTitle'),
-              msg: translate('general_gameUpdBoxText3', {
-                game: gameName,
-              }),
-              msgCenter: false,
-              showCancel: true,
-            },
-          )
-        }
-      } else if (
-        hiLauncherPath.value &&
-        timeDelta.value > 2 &&
-        timeDelta.value < 37
-      ) {
-        window.store.set('honkai3Upd', false, false)
-      }
-    })
-    .catch(err => {
-      console.error(err)
-    })
-})
-
-const importButtonClick = () => {
-  useDialog(HI3ImportDialog, {
-    onOk(dispose: () => void) {
-      refresh()
-      dispose()
-    },
-    onCancel(dispose: () => void) {
-      gamePath.value = ''
-      launcherPath.value = ''
-      dispose()
-    },
-  })
-}
-const hiLaunch = async () => {
-  await window.child.exec(hiGamePath.value)
-  const trayOnLaunch = await window.store.get('trayOnLaunch')
-  if (trayOnLaunch) {
-    window.win.tray()
-  }
-}
-
-const handleCommand = (idx: number) => {
-  const commands = ['openLauncher', 'clearPath', 'clearPlayerinfo']
-
-  switch (commands[idx]) {
-    case 'openLauncher':
-      window.child.exec(hiLauncherPath.value)
-      break
-    case 'clearPath':
-      window.store.delete('hi3LauncherPath')
-      window.store.delete('hi3GamePath')
-      window.store.delete('honkai3Upd')
-      hiLauncherPath.value = ''
-      hiGamePath.value = ''
-      break
-    // case 'clearPlayerinfo':
-    //     window.store.delete('honkai3Info')
-    // router.push({
-    //     name: 'tempPage',
-    //     query: {
-    //         from: '/hipage'
-    //     }
-    // })
-    //     break
-  }
-}
-
-const handleScroll = ({ top }: Record<string, number>) => {
-  hideElements.value = top > 0
-}
-
-const router = useRouter()
-const refresh = () => {
-  router.push({
-    name: 'tempPage',
-    query: {
-      from: '/hipage',
-    },
-  })
-}
-</script>
-
-<template>
-  <div
-    v-if="!launcherInfoFailed && !launcherInfoReady"
-    class="absolute pointer-events-none z-0 align-middle justify-center text-center"
-    style="top: 45%; left: 45%"
-  >
-    <img
-      :src="'../../src/assets/kleeLoading.gif'"
-      class="align-middle self-center object-scale-down"
-      loading="eager"
-      height="120"
-      width="120"
-    />
-    <div class="mt-3 text-xl">{{ $t('general_loading') }}</div>
-  </div>
-  <LoadFailedBlock
-    v-else-if="launcherInfoFailed"
-    class="absolute z-10 -translate-x-1/2"
-    style="margin-left: 50%; margin-top: 25vh"
-    :gameNo="2"
-    :errMsg="errMsg"
-  >
-  </LoadFailedBlock>
-  <div
-    class="transition-all relative"
-    :class="launcherInfoReady ? 'opacity-100' : 'opacity-0 blur-lg scale-90'"
-    style="width: 98vw; height: 92vh; transition-duration: 400ms"
-  >
-    <div
-      class="bg-pic"
-      style="transition-duration: 500ms; border-radius: 1.5rem 1.5rem 0 0"
-      :class="{ 'scale-95': hideElements }"
-    >
-      <img
-        class="top-0 rounded-3xl transition-all h-full w-full object-cover"
-        :class="hideElements ? 'blur-md scale-125 brightness-75' : ''"
-        style="transition-duration: 500ms"
-        :src="
-          launcherInfo.adv && launcherInfoReady
-            ? launcherInfo.adv.background
-            : '../../src/assets/hi3banner.webp'
-        "
-        @touchmove.prevent
-        @mousewheel.prevent
-      />
-    </div>
-    <Transition name="banner">
-      <LauncherBanner
-        class="absolute left-16 top-48 z-50 rounded-xl transition-all"
-        v-if="
-          launcherInfoReady &&
-          'banner' in launcherInfo &&
-          launcherInfo.banner.length > 0 &&
-          !hideElements
-        "
-        :banners="launcherInfo.banner"
-        style="height: 182px; width: 396px; transition-duration: 500ms"
-      />
-    </Transition>
-    <Transition name="posts">
-      <LauncherPosts
-        :postTypeMap="postTypeMap"
-        v-if="
-          launcherInfoReady &&
-          'post' in launcherInfo &&
-          launcherInfo.post.length > 0 &&
-          !hideElements
-        "
-        class="absolute left-16 top-96 z-50 rounded-xl transition-all backdrop-blur-md pl-3 pr-1 font-bold"
-        style="
-          height: 112px;
-          width: 396px;
-          background-color: rgb(255 255 255 / 0.7);
-          transition-duration: 500ms;
-        "
-      />
-    </Transition>
-    <ScrollWrapper
-      ref="scrollBarRef"
-      height="91vh"
-      class="scroll-wrapper absolute z-40"
-      @scroll="handleScroll"
-      show-bar="never"
-    >
-      <div
-        class="items-scroll flex flex-col content-center items-center w-full"
-      >
-        <div class="w-full flex flex-row justify-between">
-          <div class="w-1"></div>
-          <div
-            v-if="hiGamePath"
-            class="transition-all"
-            :class="hideElements ? ' -translate-x-96' : ''"
-            style="transition-duration: 500ms"
-          >
-            <div class="mx-2 my-3 flex flex-row rounded-full bg-yellow-400">
-              <button
-                @click="hiLaunch"
-                class="pl-4 px-4 text-2xl rounded-full h-16 hover:bg-yellow-500 active:bg-yellow-800 active:scale-90 transition-all font-bold"
-              >
-                {{ $t('general_launchGame') }}
-              </button>
-              <MyDropdown
-                class="h-full px-1"
-                @command="handleCommand"
-                item-class="text-sm"
-                placement="top"
-                width="200px"
-                :items="[
-                  $t('general_openOfficialLauncher'),
-                  $t('general_clearGamePath'),
-                ]"
-              >
-                <button
-                  class="text-xl font-sr text-gray-900 px-2 mt-1 h-14 rounded-full hover:bg-yellow-500 transition-all"
-                >
-                  …
-                </button>
-              </MyDropdown>
-            </div>
-          </div>
-          <div v-else>
-            <div class="justify-between flex flex-row">
-              <div class="w-1"></div>
-              <div class="flex flex-row">
-                <button
-                  @click="importButtonClick"
-                  class="mx-2 my-3 rounded-full h-16 text-2xl bg-yellow-400 font-bold w-48 hover:bg-yellow-500 active:bg-yellow-800 active:scale-90 transition-all cursor-default"
-                  :class="hideElements ? ' -translate-x-96' : ''"
-                  style="transition-duration: 500ms"
-                >
-                  {{ $t('general_importGame') }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- <div
-                    class="my-2 h-36 w-full mb-4 shadow-md text-center rounded-2xl bg-white bg-opacity-40 backdrop-blur-md">
-                    崩坏3玩家信息尚未支持，敬请期待</div> -->
-      </div>
-    </ScrollWrapper>
-  </div>
-</template>
-
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.bg-pic {
-  width: 98vw;
-  height: 96.5vh;
-  /* -webkit-mask: linear-gradient(white 50%, transparent) */
-  -webkit-mask: linear-gradient(white, white);
-}
-
-.scroll-wrapper {
-  top: 2vh;
-  left: 8vw;
-}
-
-.items-scroll {
-  margin-top: 67vh;
-  width: 82vw;
-}
-
-.import-button-enabled {
-  @apply border border-gray-400 text-gray-600 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-100 active:bg-blue-300;
-}
-
-.import-button-disabled {
-  @apply bg-gray-100 text-gray-400 pointer-events-none;
-}
-
-.confirm-button-enabled {
-  @apply bg-blue-600 text-white hover:bg-blue-500 active:scale-90;
-}
-
-.confirm-button-disabled {
-  @apply bg-blue-200 text-white pointer-events-none;
-}
-
-.font-sr {
-  font-family: sr-font, sans-serif;
-}
-
-.banner-enter-from,
-.banner-leave-to {
-  @apply opacity-0 -translate-y-10 pointer-events-none blur-md -translate-x-14 scale-110;
-}
-
-.posts-enter-from,
-.posts-leave-to {
-  @apply opacity-0 -translate-y-2 pointer-events-none blur-md -translate-x-14 scale-110;
-}
-
-.banner-enter-active,
-.banner-leave-active,
-.posts-enter-active,
-.posts-leave-active {
-  transition: all 0.5s ease;
-}
-</style>
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 790a2ad2..318b797e 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -218,10 +218,6 @@ const resetPic = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .bg-pic {
   width: 98vw;
   height: 92vh;
diff --git a/src/pages/SettingsPage/SettingsPage.vue b/src/pages/SettingsPage/SettingsPage.vue
index 9dae213e..ef7859c0 100644
--- a/src/pages/SettingsPage/SettingsPage.vue
+++ b/src/pages/SettingsPage/SettingsPage.vue
@@ -395,10 +395,6 @@ const showClearDialog = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .title {
   @apply text-4xl font-bold mt-8 cursor-default;
 }
diff --git a/src/pages/StarRailPage/Components/SRCharDetailsDialog.vue b/src/pages/StarRailPage/Components/SRCharDetailsDialog.vue
index 745151a2..5086f87a 100644
--- a/src/pages/StarRailPage/Components/SRCharDetailsDialog.vue
+++ b/src/pages/StarRailPage/Components/SRCharDetailsDialog.vue
@@ -186,8 +186,4 @@ const trimAdditions = (additions: AttributeInfo[]) => {
   </StarRailDialog>
 </template>
 
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style scoped></style>
diff --git a/src/pages/StarRailPage/Components/SRImportDialog.vue b/src/pages/StarRailPage/Components/SRImportDialog.vue
index e222081e..1c715dc0 100644
--- a/src/pages/StarRailPage/Components/SRImportDialog.vue
+++ b/src/pages/StarRailPage/Components/SRImportDialog.vue
@@ -140,10 +140,6 @@ const onDialogOk = () => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .import-button-enabled {
   @apply border border-gray-400 text-gray-600 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-100 active:bg-blue-300;
 }
diff --git a/src/pages/StarRailPage/Components/StarRailButton.vue b/src/pages/StarRailPage/Components/StarRailButton.vue
index e2aa7256..be1b9aac 100644
--- a/src/pages/StarRailPage/Components/StarRailButton.vue
+++ b/src/pages/StarRailPage/Components/StarRailButton.vue
@@ -36,10 +36,6 @@ defineProps({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .button-wrapper {
   @apply mx-3 h-9 p-1 rounded-full bg-white transition-all cursor-default;
   border-width: 1px;
diff --git a/src/pages/StarRailPage/Components/StarRailDialog.vue b/src/pages/StarRailPage/Components/StarRailDialog.vue
index 5deb4bcc..b5f6137a 100644
--- a/src/pages/StarRailPage/Components/StarRailDialog.vue
+++ b/src/pages/StarRailPage/Components/StarRailDialog.vue
@@ -192,10 +192,6 @@ defineExpose({
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .v-enter-active .outer {
   transition: opacity 0.5s ease;
 }
diff --git a/src/pages/StarRailPage/Components/StarRailInfoCard.vue b/src/pages/StarRailPage/Components/StarRailInfoCard.vue
index a75641d7..21ecea7f 100644
--- a/src/pages/StarRailPage/Components/StarRailInfoCard.vue
+++ b/src/pages/StarRailPage/Components/StarRailInfoCard.vue
@@ -156,7 +156,7 @@ const requestInfo = () => {
       router.push({
         name: 'tempPage',
         query: {
-          from: '/srpage',
+          from: 'sr',
         },
       })
     })
@@ -973,10 +973,6 @@ const showCharDetails = (index: number) => {
 </template>
 
 <style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .font-sr {
   font-family: sr-font, sans-serif;
 }
diff --git a/src/pages/StarRailPage/StarRailPage.vue b/src/pages/StarRailPage/StarRailPage.vue
deleted file mode 100644
index dfcd0e20..00000000
--- a/src/pages/StarRailPage/StarRailPage.vue
+++ /dev/null
@@ -1,401 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { translate } from '../../i18n'
-import StarRailInfoCard from './Components/StarRailInfoCard.vue'
-import { useDialog } from '../../utils/template-dialog'
-import StarRailDialog from './Components/StarRailDialog.vue'
-import SRImportDialog from './Components/SRImportDialog.vue'
-import { LauncherInfo, PostInfo } from '../../types/launcher/launcherInfo'
-import ScrollWrapper from '../../components/ScrollWrapper.vue'
-import MyDropdown from '../../components/MyDropdown.vue'
-
-const gameName = translate('general_sr')
-
-const srLauncherPath = ref('')
-const srGamePath = ref('')
-const launcherPath = ref('')
-const gamePath = ref('')
-const timeUpd1_4 = Date.parse('2023/10/11 12:00:00 UTC+8')
-const timeNow = Date.now()
-const timeDelta = computed(
-  () => Math.ceil((timeNow - timeUpd1_4) / 1000 / 3600 / 24 - 0.5) % 42,
-)
-const launcherInfo = ref<LauncherInfo>({
-  banner: [],
-  icon: [],
-  post: [],
-  qq: [],
-})
-const launcherInfoReady = ref(false)
-const launcherInfoFailed = ref(false)
-const errMsg = ref('')
-const hideElements = ref(false)
-const scrollBarRef = ref()
-
-const postTypeMap = new Map()
-
-onMounted(async () => {
-  window.axios
-    .post(translate('sr_launcherContentsUrl'))
-    .then(value => {
-      launcherInfo.value = value.data
-      launcherInfo.value.post.forEach((post: PostInfo) => {
-        let tmp = postTypeMap.get(post.type)
-        if (tmp) {
-          tmp.push(post)
-          postTypeMap.set(post.type, tmp)
-        } else {
-          postTypeMap.set(post.type, [post])
-        }
-      })
-      launcherInfoReady.value = true
-    })
-    .catch(err => {
-      launcherInfoFailed.value = true
-      errMsg.value = err.toString()
-    })
-  srLauncherPath.value = await window.store.get('srLauncherPath')
-  srGamePath.value = await window.store.get('srGamePath')
-  window.store
-    .get('starRailUpd')
-    .then(resp => {
-      if (srLauncherPath.value && !resp) {
-        console.log(timeDelta.value)
-        if (timeDelta.value > 40) {
-          useDialog(
-            StarRailDialog,
-            {
-              onOk(dispose: () => void) {
-                window.child.exec(srLauncherPath.value)
-                window.store.set('starRailUpd', true, false)
-                dispose()
-              },
-            },
-            {
-              title: translate('general_gameUpdBoxTitle'),
-              msg: translate('general_gameUpdBoxText1', {
-                game: gameName,
-                beDays: translate('general_beDays', {
-                  n: 42 - timeDelta.value,
-                }),
-              }),
-              msgCenter: false,
-              showCancel: true,
-            },
-          )
-        } else if (timeDelta.value > 0 && timeDelta.value < 3) {
-          useDialog(
-            StarRailDialog,
-            {
-              onOk(dispose: () => void) {
-                window.child.exec(srLauncherPath.value)
-                window.store.set('starRailUpd', true, false)
-                dispose()
-              },
-            },
-            {
-              title: translate('general_gameUpdBoxTitle'),
-              msg: translate('general_gameUpdBoxText2', {
-                game: gameName,
-                days: translate('general_days', { n: timeDelta.value }),
-              }),
-              msgCenter: false,
-              showCancel: true,
-            },
-          )
-        } else if (timeDelta.value == 0) {
-          useDialog(
-            StarRailDialog,
-            {
-              onOk(dispose: () => void) {
-                window.child.exec(srLauncherPath.value)
-                window.store.set('starRailUpd', true, false)
-                dispose()
-              },
-            },
-            {
-              title: translate('general_gameUpdBoxTitle'),
-              msg: translate('general_gameUpdBoxText3', {
-                game: gameName,
-              }),
-              msgCenter: false,
-              showCancel: true,
-            },
-          )
-        }
-      } else if (
-        srLauncherPath.value &&
-        timeDelta.value > 2 &&
-        timeDelta.value < 37
-      ) {
-        window.store.set('starRailUpd', false, false)
-      }
-    })
-    .catch(err => {
-      console.error(err)
-    })
-})
-
-const importButtonClick = () => {
-  useDialog(SRImportDialog, {
-    onOk(dispose: () => void) {
-      refresh()
-      dispose()
-    },
-    onCancel(dispose: () => void) {
-      gamePath.value = ''
-      launcherPath.value = ''
-      dispose()
-    },
-  })
-}
-const srLaunch = async () => {
-  await window.child.exec(srGamePath.value)
-  const trayOnLaunch = await window.store.get('trayOnLaunch')
-  if (trayOnLaunch) {
-    await window.win.tray()
-  }
-}
-
-const handleCommand = (idx: number) => {
-  const commands = ['openLauncher', 'clearPath', 'clearPlayerinfo']
-
-  switch (commands[idx]) {
-    case 'openLauncher':
-      window.child.exec(srLauncherPath.value)
-      break
-    case 'clearPath':
-      window.store.delete('srLauncherPath')
-      window.store.delete('srGamePath')
-      window.store.delete('starRailUpd')
-      srLauncherPath.value = ''
-      srGamePath.value = ''
-      break
-    case 'clearPlayerinfo':
-      window.store.delete('starRailInfo')
-      refresh()
-      break
-  }
-}
-
-const handleScroll = ({ top }: Record<string, number>) => {
-  hideElements.value = top > 0
-}
-
-const router = useRouter()
-const refresh = () => {
-  router.push({
-    name: 'tempPage',
-    query: {
-      from: '/srpage',
-    },
-  })
-}
-</script>
-
-<template>
-  <div
-    v-if="!launcherInfoFailed && !launcherInfoReady"
-    class="absolute pointer-events-none z-0 align-middle justify-center text-center"
-    style="top: 45%; left: 45%"
-  >
-    <img
-      :src="'../../src/assets/kleeLoading.gif'"
-      class="align-middle self-center object-scale-down"
-      loading="eager"
-      height="120"
-      width="120"
-    />
-    <div class="mt-3 font-sr text-xl">{{ $t('general_loading') }}</div>
-  </div>
-  <LoadFailedBlock
-    v-else-if="launcherInfoFailed"
-    class="absolute z-10 -translate-x-1/2"
-    style="margin-left: 50%; margin-top: 25vh"
-    :gameNo="1"
-    :errMsg="errMsg"
-  >
-  </LoadFailedBlock>
-  <div
-    class="transition-all relative"
-    :class="launcherInfoReady ? 'opacity-100' : 'opacity-0 blur-lg scale-90'"
-    style="width: 98vw; height: 92vh; transition-duration: 400ms"
-  >
-    <div
-      class="bg-pic"
-      style="transition-duration: 500ms; border-radius: 1.5rem 1.5rem 0 0"
-      :class="hideElements ? 'scale-x-95 translate-y-3' : ''"
-    >
-      <img
-        class="top-0 rounded-3xl transition-all h-full w-full object-cover"
-        :class="hideElements ? 'blur-md scale-125 brightness-75' : ''"
-        style="transition-duration: 500ms"
-        :src="
-          launcherInfoReady && launcherInfo.adv
-            ? launcherInfo.adv.background
-            : '../../src/assets/srbanner.jpg'
-        "
-        @touchmove.prevent
-        @mousewheel.prevent
-        alt="Launcher background image for Honkai Star Rail"
-      />
-    </div>
-    <Transition name="banner">
-      <LauncherBanner
-        class="absolute left-16 top-48 z-50 rounded-xl transition-all"
-        v-if="
-          launcherInfoReady &&
-          'banner' in launcherInfo &&
-          launcherInfo.banner.length > 0 &&
-          !hideElements
-        "
-        :banners="launcherInfo.banner"
-        style="height: 182px; width: 396px"
-      />
-    </Transition>
-    <Transition name="posts">
-      <LauncherPosts
-        :postTypeMap="postTypeMap"
-        v-if="
-          launcherInfoReady &&
-          'post' in launcherInfo &&
-          launcherInfo.post.length > 0 &&
-          !hideElements
-        "
-        class="absolute left-16 top-96 z-50 rounded-xl transition-all backdrop-blur-md pl-3 pr-1 font-sr-sans"
-        style="
-          height: 112px;
-          width: 396px;
-          background-color: rgb(255 255 255 / 0.7);
-        "
-      />
-    </Transition>
-    <ScrollWrapper
-      ref="scrollBarRef"
-      height="91vh"
-      class="scroll-wrapper absolute z-40"
-      @scroll="handleScroll"
-      show-bar="never"
-    >
-      <div
-        class="items-scroll flex flex-col content-center items-center w-full"
-      >
-        <div class="w-full flex flex-row justify-between">
-          <div class="w-1"></div>
-          <div
-            v-if="srGamePath"
-            class="transition-all"
-            :class="hideElements ? ' -translate-x-96' : ''"
-            style="transition-duration: 500ms"
-          >
-            <div
-              class="mx-2 my-3 flex flex-row rounded-full bg-yellow-400 font-sr"
-            >
-              <button
-                @click="srLaunch"
-                class="pl-4 px-4 text-2xl font-bold rounded-full h-16 hover:bg-yellow-500 active:bg-yellow-800 active:scale-90 transition-all"
-              >
-                {{ $t('general_launchGame') }}
-              </button>
-              <MyDropdown
-                class="h-full px-1"
-                @command="handleCommand"
-                item-class="font-sr-sans text-sm"
-                placement="top"
-                width="200px"
-                :items="[
-                  $t('general_openOfficialLauncher'),
-                  $t('general_clearGamePath'),
-                  $t('general_clearProfileInfo'),
-                ]"
-              >
-                <button
-                  class="text-xl text-gray-900 px-2 mt-1 h-14 rounded-full hover:bg-yellow-500 transition-all"
-                >
-                  …
-                </button>
-              </MyDropdown>
-            </div>
-          </div>
-          <div v-else>
-            <div class="justify-between flex flex-row">
-              <div class="w-1"></div>
-              <div class="flex flex-row">
-                <button
-                  @click="importButtonClick"
-                  class="mx-2 my-3 rounded-full h-16 text-2xl bg-yellow-400 font-sr w-48 hover:bg-yellow-500 active:bg-yellow-800 active:scale-90 transition-all cursor-default"
-                  :class="hideElements ? ' -translate-x-96' : ''"
-                  style="transition-duration: 500ms"
-                >
-                  {{ $t('general_importGame') }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <StarRailInfoCard class="my-2 w-full shadow-md"></StarRailInfoCard>
-      </div>
-    </ScrollWrapper>
-  </div>
-</template>
-
-<style scoped>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.bg-pic {
-  width: 98vw;
-  height: 96.4vh;
-  -webkit-mask: linear-gradient(white 50%, transparent);
-  /* -webkit-mask: linear-gradient(white, white); */
-}
-
-.bg-mask {
-  -webkit-mask: linear-gradient(white 50%, transparent);
-}
-
-.scroll-wrapper {
-  top: 2vh;
-  left: 8vw;
-}
-
-.items-scroll {
-  margin-top: 67vh;
-  width: 82vw;
-}
-
-.import-button-enabled {
-  @apply border border-gray-400 text-gray-600 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-100 active:bg-blue-300;
-}
-
-.import-button-disabled {
-  @apply bg-gray-100 text-gray-400 pointer-events-none;
-}
-
-.confirm-button-enabled {
-  @apply bg-blue-600 text-white hover:bg-blue-500 active:scale-90;
-}
-
-.confirm-button-disabled {
-  @apply bg-blue-200 text-white pointer-events-none;
-}
-
-.banner-enter-from,
-.banner-leave-to {
-  @apply opacity-0 -translate-y-10 pointer-events-none blur-md -translate-x-14 scale-110;
-}
-
-.posts-enter-from,
-.posts-leave-to {
-  @apply opacity-0 -translate-y-2 pointer-events-none blur-md -translate-x-14 scale-110;
-}
-
-.banner-enter-active,
-.banner-leave-active,
-.posts-enter-active,
-.posts-leave-active {
-  transition: all 0.5s ease;
-}
-</style>
diff --git a/src/pages/tmpPage.vue b/src/pages/tmpPage.vue
index fc32df91..2ff3613d 100644
--- a/src/pages/tmpPage.vue
+++ b/src/pages/tmpPage.vue
@@ -5,7 +5,12 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()
 onMounted(() => {
-  router.push(route.query.from as string)
+  router.push({
+    name: 'gamepage',
+    query: {
+      game: route.query.from as string,
+    },
+  })
 })
 </script>
 
diff --git a/src/router/router.ts b/src/router/router.ts
index 759b1825..2a17fa01 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -1,8 +1,6 @@
 import * as VueRouter from 'vue-router'
 import MainPage from '../pages/MainPage.vue'
-import StarRailPage from '../pages/StarRailPage/StarRailPage.vue'
-import GenshinPage from '../pages/GenshinPage/GenshinPage.vue'
-import Honkai3Page from '../pages/Honkai3Page/Honkai3Page.vue'
+import GamePage from '../pages/GamePage.vue'
 import SettingsPage from '../pages/SettingsPage/SettingsPage.vue'
 import tmpPage from '../pages/tmpPage.vue'
 
@@ -15,19 +13,9 @@ const router = VueRouter.createRouter({
       component: MainPage,
     },
     {
-      name: 'gspage',
-      path: '/gspage',
-      component: GenshinPage,
-    },
-    {
-      name: 'srpage',
-      path: '/srpage',
-      component: StarRailPage,
-    },
-    {
-      name: 'hipage',
-      path: '/hipage',
-      component: Honkai3Page,
+      name: 'gamepage',
+      path: '/gamepage',
+      component: GamePage,
     },
     {
       name: 'settingsPage',
diff --git a/src/style.css b/src/style.css
index dbb12bd5..60a455f0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -45,7 +45,6 @@ h1 {
 
 button {
     border-radius: 8px;
-    border: 1px solid transparent;
     padding: 0.6em 1.2em;
     font-size: 1em;
     font-weight: 500;
@@ -55,15 +54,6 @@ button {
     transition: border-color 0.25s;
 }
 
-button:hover {
-    border-color: #646cff;
-}
-
-/* button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-} */
-
 code {
     background-color: #1a1a1a;
     padding: 2px 4px;
diff --git a/tailwind.config.js b/tailwind.config.js
index 72b38ead..1e13ee9d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [
-        "./index.html",
-        "./src/**/*.{html,js,ts,vue}",
-    ],
-    theme: {
-        extend: {},
-    },
-    plugins: [],
-};
+  content: ['./index.html', './src/**/*.{html,js,ts,vue}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}