diff --git a/components.d.ts b/components.d.ts
index 89fd2299..7ef9e93f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,28 +7,28 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    Add: typeof import('./src/components/toolbar/Add.vue')['default']
-    ArticleContentDialog: typeof import('./src/components/dialog/ArticleContentDialog.vue')['default']
-    ArticleList: typeof import('./src/components/list/ArticleList.vue')['default']
-    Backgorund: typeof import('./src/components/Backgorund.vue')['default']
+    Add: typeof import('./src/pages/pc/components/toolbar/Add.vue')['default']
+    ArticleContentDialog: typeof import('./src/pages/pc/components/dialog/ArticleContentDialog.vue')['default']
+    ArticleList: typeof import('./src/pages/pc/components/list/ArticleList.vue')['default']
+    Backgorund: typeof import('./src/pages/pc/components/Backgorund.vue')['default']
     BackIcon: typeof import('./src/components/icon/BackIcon.vue')['default']
     BaseButton: typeof import('./src/components/BaseButton.vue')['default']
     BaseIcon: typeof import('./src/components/BaseIcon.vue')['default']
-    BaseList: typeof import('./src/components/list/BaseList.vue')['default']
-    ChapterName: typeof import('./src/components/toolbar/ChapterName.vue')['default']
+    BaseList: typeof import('./src/pages/pc/components/list/BaseList.vue')['default']
+    ChapterName: typeof import('./src/pages/pc/components/toolbar/ChapterName.vue')['default']
     Close: typeof import('./src/components/icon/Close.vue')['default']
-    CollectNotice: typeof import('./src/components/CollectNotice.vue')['default']
+    CollectNotice: typeof import('./src/pages/pc/components/CollectNotice.vue')['default']
     DeleteIcon: typeof import('./src/components/icon/DeleteIcon.vue')['default']
-    Dialog: typeof import('./src/components/dialog/Dialog.vue')['default']
-    DictDiglog: typeof import('./src/components/dialog/DictDiglog.vue')['default']
-    DictGroup: typeof import('./src/components/list/DictGroup.vue')['default']
-    DictItem: typeof import('./src/components/list/DictItem.vue')['default']
-    DictList: typeof import('./src/components/list/DictList.vue')['default']
-    DictListPanel: typeof import('./src/components/DictListPanel.vue')['default']
-    EditAbleText: typeof import('./src/components/EditAbleText.vue')['default']
-    EditArticle: typeof import('./src/components/article/EditArticle.vue')['default']
-    EditBatchArticleModal: typeof import('./src/components/article/EditBatchArticleModal.vue')['default']
-    EditSingleArticleModal: typeof import('./src/components/article/EditSingleArticleModal.vue')['default']
+    Dialog: typeof import('./src/pages/pc/components/dialog/Dialog.vue')['default']
+    DictDiglog: typeof import('./src/pages/pc/components/dialog/DictDiglog.vue')['default']
+    DictGroup: typeof import('./src/pages/pc/components/list/DictGroup.vue')['default']
+    DictItem: typeof import('./src/pages/pc/components/list/DictItem.vue')['default']
+    DictList: typeof import('./src/pages/pc/components/list/DictList.vue')['default']
+    DictListPanel: typeof import('./src/pages/pc/components/DictListPanel.vue')['default']
+    EditAbleText: typeof import('./src/pages/pc/components/EditAbleText.vue')['default']
+    EditArticle: typeof import('./src/pages/pc/components/article/EditArticle.vue')['default']
+    EditBatchArticleModal: typeof import('./src/pages/pc/components/article/EditBatchArticleModal.vue')['default']
+    EditSingleArticleModal: typeof import('./src/pages/pc/components/article/EditSingleArticleModal.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElForm: typeof import('element-plus/es')['ElForm']
@@ -44,31 +44,31 @@ declare module 'vue' {
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     Empty: typeof import('./src/components/Empty.vue')['default']
-    FeedbackModal: typeof import('./src/components/toolbar/FeedbackModal.vue')['default']
-    Fireworks: typeof import('./src/components/Fireworks.vue')['default']
-    IconWrapper: typeof import('./src/components/IconWrapper.vue')['default']
-    Input: typeof import('./src/components/Input.vue')['default']
-    List: typeof import('./src/components/list/List.vue')['default']
-    Logo: typeof import('./src/components/Logo.vue')['default']
-    MiniDialog: typeof import('./src/components/dialog/MiniDialog.vue')['default']
-    PopConfirm: typeof import('./src/components/PopConfirm.vue')['default']
-    RepeatSetting: typeof import('./src/components/toolbar/RepeatSetting.vue')['default']
-    RightTopBar: typeof import('./src/components/RightTopBar.vue')['default']
-    Ring: typeof import('./src/components/Ring.vue')['default']
+    FeedbackModal: typeof import('./src/pages/pc/components/toolbar/FeedbackModal.vue')['default']
+    Fireworks: typeof import('./src/pages/pc/components/Fireworks.vue')['default']
+    IconWrapper: typeof import('./src/pages/pc/components/IconWrapper.vue')['default']
+    Input: typeof import('./src/pages/pc/components/Input.vue')['default']
+    List: typeof import('./src/pages/pc/components/list/List.vue')['default']
+    Logo: typeof import('./src/pages/pc/components/Logo.vue')['default']
+    MiniDialog: typeof import('./src/pages/pc/components/dialog/MiniDialog.vue')['default']
+    PopConfirm: typeof import('./src/pages/pc/components/PopConfirm.vue')['default']
+    RepeatSetting: typeof import('./src/pages/pc/components/toolbar/RepeatSetting.vue')['default']
+    RightTopBar: typeof import('./src/pages/pc/components/RightTopBar.vue')['default']
+    Ring: typeof import('./src/pages/pc/components/Ring.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Setting: typeof import('./src/components/Setting.vue')['default']
-    SettingDialog: typeof import('./src/components/dialog/SettingDialog.vue')['default']
-    Slide: typeof import('./src/components/Slide.vue')['default']
+    Setting: typeof import('./src/pages/pc/components/Setting.vue')['default']
+    SettingDialog: typeof import('./src/pages/pc/components/dialog/SettingDialog.vue')['default']
+    Slide: typeof import('./src/pages/pc/components/Slide.vue')['default']
     SlideHorizontal: typeof import('./src/components/slide/SlideHorizontal.vue')['default']
     SlideItem: typeof import('./src/components/slide/SlideItem.vue')['default']
-    Toolbar: typeof import('./src/components/toolbar/index.vue')['default']
-    Tooltip: typeof import('./src/components/Tooltip.vue')['default']
-    TranslateSetting: typeof import('./src/components/toolbar/TranslateSetting.vue')['default']
+    Toolbar: typeof import('./src/pages/pc/components/toolbar/index.vue')['default']
+    Tooltip: typeof import('./src/pages/pc/components/Tooltip.vue')['default']
+    TranslateSetting: typeof import('./src/pages/pc/components/toolbar/TranslateSetting.vue')['default']
     VolumeIcon: typeof import('./src/components/icon/VolumeIcon.vue')['default']
-    VolumeSetting: typeof import('./src/components/toolbar/VolumeSetting.vue')['default']
-    WordList: typeof import('./src/components/list/WordList.vue')['default']
-    WordListDialog: typeof import('./src/components/dialog/WordListDialog.vue')['default']
+    VolumeSetting: typeof import('./src/pages/pc/components/toolbar/VolumeSetting.vue')['default']
+    WordList: typeof import('./src/pages/pc/components/list/WordList.vue')['default']
+    WordListDialog: typeof import('./src/pages/pc/components/dialog/WordListDialog.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
diff --git a/src/App.vue b/src/App.vue
index f79fa645..a10423d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,12 +5,12 @@ import {BaseState, useBaseStore} from "@/stores/base.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {cloneDeep} from "lodash-es";
-import Backgorund from "@/components/Backgorund.vue";
+import Backgorund from "@/pages/pc/components/Backgorund.vue";
 import useTheme from "@/hooks/theme.ts";
 import * as localforage from "localforage";
-import SettingDialog from "@/components/dialog/SettingDialog.vue";
-import ArticleContentDialog from "@/components/dialog/ArticleContentDialog.vue";
-import CollectNotice from "@/components/CollectNotice.vue";
+import SettingDialog from "@/pages/pc/components/dialog/SettingDialog.vue";
+import ArticleContentDialog from "@/pages/pc/components/dialog/ArticleContentDialog.vue";
+import CollectNotice from "@/pages/pc/components/CollectNotice.vue";
 import {SAVE_DICT_KEY, SAVE_SETTING_KEY} from "@/utils/const.ts";
 import {isMobile, shakeCommonDict} from "@/utils";
 import router, {routes} from "@/router.ts";
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index d2a2d22e..bb90d84d 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Tooltip from "@/components/Tooltip.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {Icon} from "@iconify/vue";
 
 interface IProps {
diff --git a/src/components/BaseIcon.vue b/src/components/BaseIcon.vue
index 6a3a8064..a7067641 100644
--- a/src/components/BaseIcon.vue
+++ b/src/components/BaseIcon.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
-import Tooltip from "@/components/Tooltip.vue";
-import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import {Icon} from "@iconify/vue";
 
 defineProps<{
diff --git a/src/components/icon/Close.vue b/src/components/icon/Close.vue
index 1888f30b..34a2b64f 100644
--- a/src/components/icon/Close.vue
+++ b/src/components/icon/Close.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {Icon} from "@iconify/vue";
-import Tooltip from "@/components/Tooltip.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 
 defineEmits(['click'])
 defineProps<{
diff --git a/src/components/icon/VolumeIcon.vue b/src/components/icon/VolumeIcon.vue
index 3f18ff76..8959e27f 100644
--- a/src/components/icon/VolumeIcon.vue
+++ b/src/components/icon/VolumeIcon.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {Icon} from "@iconify/vue";
 import {$ref} from "vue/macros";
-import IconWrapper from "@/components/IconWrapper.vue";
-import Tooltip from "@/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {ShortcutKey} from "@/types.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 
diff --git a/src/pages/mobile/components/CollectList.vue b/src/pages/mobile/components/CollectList.vue
index f5abc8e1..017964f8 100644
--- a/src/pages/mobile/components/CollectList.vue
+++ b/src/pages/mobile/components/CollectList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
 import BaseIcon from "@/components/BaseIcon.vue";
-import WordList from "@/components/list/WordList.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import PopConfirm from "@/components/PopConfirm.vue";
+import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
 import {$computed, $ref} from "vue/macros";
 import {Dict, DictType} from "@/types.ts";
 import {useRouter} from "vue-router";
diff --git a/src/pages/mobile/components/MobilePanel.vue b/src/pages/mobile/components/MobilePanel.vue
index 7a579e4c..02382e1b 100644
--- a/src/pages/mobile/components/MobilePanel.vue
+++ b/src/pages/mobile/components/MobilePanel.vue
@@ -4,23 +4,23 @@ import {useBaseStore} from "@/stores/base.ts"
 import {$computed, $ref} from "vue/macros"
 import {computed, onMounted, onUnmounted, provide, watch} from "vue"
 import {Dict, DictType, ShortcutKey} from "@/types.ts"
-import PopConfirm from "@/components/PopConfirm.vue"
+import PopConfirm from "@/pages/pc/components/PopConfirm.vue"
 import BaseButton from "@/components/BaseButton.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import Close from "@/components/icon/Close.vue";
 import Empty from "@/components/Empty.vue";
 import {useArticleOptions, useWordOptions} from "@/hooks/dict.ts";
 import {Icon} from "@iconify/vue";
-import Tooltip from "@/components/Tooltip.vue";
-import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRouter} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {cloneDeep} from "lodash-es";
-import WordList from "@/components/list/WordList.vue";
-import ArticleList from "@/components/list/ArticleList.vue";
-import Slide from "@/components/Slide.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
+import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
+import Slide from "@/pages/pc/components/Slide.vue";
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
 import CollectList from "@/pages/mobile/components/CollectList.vue";
diff --git a/src/pages/mobile/components/SimpleList.vue b/src/pages/mobile/components/SimpleList.vue
index 5a2ab254..0b9aaec6 100644
--- a/src/pages/mobile/components/SimpleList.vue
+++ b/src/pages/mobile/components/SimpleList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
 import BaseIcon from "@/components/BaseIcon.vue";
-import WordList from "@/components/list/WordList.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import PopConfirm from "@/components/PopConfirm.vue";
+import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
 import {$ref} from "vue/macros";
 import {Dict, DictType} from "@/types.ts";
 import {useBaseStore} from "@/stores/base.ts";
diff --git a/src/pages/mobile/components/WrongList.vue b/src/pages/mobile/components/WrongList.vue
index 6184d064..9993b10a 100644
--- a/src/pages/mobile/components/WrongList.vue
+++ b/src/pages/mobile/components/WrongList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
 import BaseIcon from "@/components/BaseIcon.vue";
-import WordList from "@/components/list/WordList.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import PopConfirm from "@/components/PopConfirm.vue";
+import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
 import {$ref} from "vue/macros";
 import {Dict, DictType} from "@/types.ts";
 import {useBaseStore} from "@/stores/base.ts";
diff --git a/src/pages/mobile/my/My.vue b/src/pages/mobile/my/My.vue
index d145594a..58296ac6 100644
--- a/src/pages/mobile/my/My.vue
+++ b/src/pages/mobile/my/My.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/components/IconWrapper.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import useTheme from "@/hooks/theme.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {$ref} from "vue/macros";
 import SlideItem from "@/components/slide/SlideItem.vue";
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
-import WordList from "@/components/list/WordList.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import {useRouter} from "vue-router";
 import {useBaseStore} from "@/stores/base.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
diff --git a/src/pages/mobile/practice/index-test.vue b/src/pages/mobile/practice/index-test.vue
index f509ecc1..a86218c8 100644
--- a/src/pages/mobile/practice/index-test.vue
+++ b/src/pages/mobile/practice/index-test.vue
@@ -13,8 +13,8 @@ import BaseButton from "@/components/BaseButton.vue";
 import Options from "@/pages/pc/practice/Options.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import MobilePanel from "@/pages/mobile/components/MobilePanel.vue";
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
-import WordList from "@/components/list/WordList.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import Empty from "@/components/Empty.vue";
 import {Icon} from "@iconify/vue";
 import router from "@/router.ts";
diff --git a/src/pages/mobile/practice/practice-word/Typing.vue b/src/pages/mobile/practice/practice-word/Typing.vue
index 8e7f6d94..dd01a8ac 100644
--- a/src/pages/mobile/practice/practice-word/Typing.vue
+++ b/src/pages/mobile/practice/practice-word/Typing.vue
@@ -9,7 +9,7 @@ import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio, use
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {cloneDeep} from "lodash-es";
 import {onUnmounted, watch, onMounted, nextTick} from "vue";
-import Tooltip from "@/components/Tooltip.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 
 interface IProps {
   word: Word,
diff --git a/src/pages/mobile/practice/practice-word/TypingWord.vue b/src/pages/mobile/practice/practice-word/TypingWord.vue
index 9fa37176..fa533d41 100644
--- a/src/pages/mobile/practice/practice-word/TypingWord.vue
+++ b/src/pages/mobile/practice/practice-word/TypingWord.vue
@@ -12,16 +12,16 @@ import Typing from "@/pages/mobile/practice/practice-word/Typing.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useWordOptions} from "@/hooks/dict.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
-import WordList from "@/components/list/WordList.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import Empty from "@/components/Empty.vue";
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
 import MobilePanel from "@/pages/mobile/components/MobilePanel.vue";
 import router from "@/router.ts";
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/components/IconWrapper.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import useTheme from "@/hooks/theme.ts";
 
 interface IProps {
diff --git a/src/components/Backgorund.vue b/src/pages/pc/components/Backgorund.vue
similarity index 96%
rename from src/components/Backgorund.vue
rename to src/pages/pc/components/Backgorund.vue
index 551af423..7ffeff58 100644
--- a/src/components/Backgorund.vue
+++ b/src/pages/pc/components/Backgorund.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="background" class="anim">
-    <img src="@/assets/img/moon.png" alt="" id="moon" style="display:none">
+    <img src="../../../assets/img/moon.png" alt="" id="moon" style="display:none">
     <Transition name="fade">
       <canvas ref="canvas" v-show="settingStore.theme === 'dark'"/>
     </Transition>
diff --git a/src/components/CollectNotice.vue b/src/pages/pc/components/CollectNotice.vue
similarity index 100%
rename from src/components/CollectNotice.vue
rename to src/pages/pc/components/CollectNotice.vue
diff --git a/src/components/DictListPanel.vue b/src/pages/pc/components/DictListPanel.vue
similarity index 96%
rename from src/components/DictListPanel.vue
rename to src/pages/pc/components/DictListPanel.vue
index 88a0f9e6..e1fcd91d 100644
--- a/src/components/DictListPanel.vue
+++ b/src/pages/pc/components/DictListPanel.vue
@@ -5,8 +5,8 @@ import {$computed, $ref} from "vue/macros";
 import {dictionaryResources} from "@/assets/dictionary.ts";
 import {groupBy} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";
-import DictList from "@/components/list/DictList.vue";
-import DictGroup from "@/components/list/DictGroup.vue";
+import DictList from "@/pages/pc/components/list/DictList.vue";
+import DictGroup from "@/pages/pc/components/list/DictGroup.vue";
 
 const emit = defineEmits<{
   add: [],
@@ -107,7 +107,7 @@ const groupedByCategoryAndTag = $computed(() => {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/variable";
+@import "@/assets/css/style";
 
 .dict-list-panel {
   width: 50%;
diff --git a/src/components/EditAbleText.vue b/src/pages/pc/components/EditAbleText.vue
similarity index 100%
rename from src/components/EditAbleText.vue
rename to src/pages/pc/components/EditAbleText.vue
diff --git a/src/components/Fireworks.vue b/src/pages/pc/components/Fireworks.vue
similarity index 100%
rename from src/components/Fireworks.vue
rename to src/pages/pc/components/Fireworks.vue
diff --git a/src/components/IconWrapper.vue b/src/pages/pc/components/IconWrapper.vue
similarity index 100%
rename from src/components/IconWrapper.vue
rename to src/pages/pc/components/IconWrapper.vue
diff --git a/src/components/Input.vue b/src/pages/pc/components/Input.vue
similarity index 98%
rename from src/components/Input.vue
rename to src/pages/pc/components/Input.vue
index 89943efb..038166b9 100644
--- a/src/components/Input.vue
+++ b/src/pages/pc/components/Input.vue
@@ -40,7 +40,7 @@ useDisableEventListener(() => focus)
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .base-input {
   border: 1px solid var(--color-second-bg);
diff --git a/src/components/Logo.vue b/src/pages/pc/components/Logo.vue
similarity index 100%
rename from src/components/Logo.vue
rename to src/pages/pc/components/Logo.vue
diff --git a/src/components/PopConfirm.vue b/src/pages/pc/components/PopConfirm.vue
similarity index 100%
rename from src/components/PopConfirm.vue
rename to src/pages/pc/components/PopConfirm.vue
diff --git a/src/components/RightTopBar.vue b/src/pages/pc/components/RightTopBar.vue
similarity index 84%
rename from src/components/RightTopBar.vue
rename to src/pages/pc/components/RightTopBar.vue
index 40ee4641..85f27877 100644
--- a/src/components/RightTopBar.vue
+++ b/src/pages/pc/components/RightTopBar.vue
@@ -2,10 +2,10 @@
 
 import {ShortcutKey} from "@/types.ts";
 import {$ref} from "vue/macros";
-import FeedbackModal from "@/components/toolbar/FeedbackModal.vue";
+import FeedbackModal from "@/pages/pc/components/toolbar/FeedbackModal.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
-import Tooltip from "@/components/Tooltip.vue";
-import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import {Icon} from "@iconify/vue";
 import useTheme from "@/hooks/theme.ts";
 import {useSettingStore} from "@/stores/setting.ts";
diff --git a/src/components/Ring.vue b/src/pages/pc/components/Ring.vue
similarity index 97%
rename from src/components/Ring.vue
rename to src/pages/pc/components/Ring.vue
index dd8fd81d..209e8464 100644
--- a/src/components/Ring.vue
+++ b/src/pages/pc/components/Ring.vue
@@ -44,7 +44,7 @@ onMounted(() => {
 })
 </script>
 <style scoped lang="scss">
-@import "@/assets/css/variable.scss";
+@import "@/assets/css/variable";
 
 $w: 80rem;
 $w2: calc($w / 2);
diff --git a/src/components/Setting.vue b/src/pages/pc/components/Setting.vue
similarity index 99%
rename from src/components/Setting.vue
rename to src/pages/pc/components/Setting.vue
index 7703f0f6..aef2c3d1 100644
--- a/src/components/Setting.vue
+++ b/src/pages/pc/components/Setting.vue
@@ -420,7 +420,7 @@ function importData(e) {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/variable";
+@import "@/assets/css/style";
 
 .setting {
   width: 40vw;
diff --git a/src/components/Slide.vue b/src/pages/pc/components/Slide.vue
similarity index 100%
rename from src/components/Slide.vue
rename to src/pages/pc/components/Slide.vue
diff --git a/src/components/Tooltip.vue b/src/pages/pc/components/Tooltip.vue
similarity index 98%
rename from src/components/Tooltip.vue
rename to src/pages/pc/components/Tooltip.vue
index ea7da339..cb4b8d8e 100644
--- a/src/components/Tooltip.vue
+++ b/src/pages/pc/components/Tooltip.vue
@@ -68,7 +68,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .tip {
   position: fixed;
diff --git a/src/components/article/EditArticle.vue b/src/pages/pc/components/article/EditArticle.vue
similarity index 99%
rename from src/components/article/EditArticle.vue
rename to src/pages/pc/components/article/EditArticle.vue
index 05cb0fcb..ccfae6ec 100644
--- a/src/components/article/EditArticle.vue
+++ b/src/pages/pc/components/article/EditArticle.vue
@@ -2,7 +2,7 @@
 
 import {Article, DefaultArticle, Sentence, TranslateEngine, TranslateType} from "@/types.ts";
 import BaseButton from "@/components/BaseButton.vue";
-import EditAbleText from "@/components/EditAbleText.vue";
+import EditAbleText from "@/pages/pc/components/EditAbleText.vue";
 import {Icon} from "@iconify/vue";
 import {
   getNetworkTranslate,
@@ -381,7 +381,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .content {
   color: var(--color-font-1);
diff --git a/src/components/article/EditBatchArticleModal.vue b/src/pages/pc/components/article/EditBatchArticleModal.vue
similarity index 96%
rename from src/components/article/EditBatchArticleModal.vue
rename to src/pages/pc/components/article/EditBatchArticleModal.vue
index d25ee558..82b52002 100644
--- a/src/components/article/EditBatchArticleModal.vue
+++ b/src/pages/pc/components/article/EditBatchArticleModal.vue
@@ -5,16 +5,16 @@ import BaseButton from "@/components/BaseButton.vue";
 import {cloneDeep} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";
 import {$ref} from "vue/macros";
-import List from "@/components/list/List.vue";
-import Dialog from "@/components/dialog/Dialog.vue";
-import EditArticle from "@/components/article/EditArticle.vue";
+import List from "@/pages/pc/components/list/List.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
+import EditArticle from "@/pages/pc/components/article/EditArticle.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useDisableEventListener, useWindowClick} from "@/hooks/event.ts";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {nanoid} from "nanoid";
 import {syncMyDictList} from "@/hooks/dict.ts";
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 
 const emit = defineEmits<{
   importData: [val: Event]
@@ -207,7 +207,7 @@ useWindowClick(() => showExport = false)
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .add-article {
   //position: fixed;
diff --git a/src/components/article/EditSingleArticleModal.vue b/src/pages/pc/components/article/EditSingleArticleModal.vue
similarity index 85%
rename from src/components/article/EditSingleArticleModal.vue
rename to src/pages/pc/components/article/EditSingleArticleModal.vue
index 5a815e80..55acae1e 100644
--- a/src/components/article/EditSingleArticleModal.vue
+++ b/src/pages/pc/components/article/EditSingleArticleModal.vue
@@ -2,8 +2,8 @@
 
 import {Article, DefaultArticle} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
-import Dialog from "@/components/dialog/Dialog.vue";
-import EditArticle from "@/components/article/EditArticle.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
+import EditArticle from "@/pages/pc/components/article/EditArticle.vue";
 import {useDisableEventListener} from "@/hooks/event.ts";
 
 interface IProps {
@@ -41,7 +41,7 @@ useDisableEventListener(() => props.modelValue)
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .wrapper {
   width: 100%;
diff --git a/src/components/dialog/ArticleContentDialog.vue b/src/pages/pc/components/dialog/ArticleContentDialog.vue
similarity index 94%
rename from src/components/dialog/ArticleContentDialog.vue
rename to src/pages/pc/components/dialog/ArticleContentDialog.vue
index 3860f384..a2d78773 100644
--- a/src/components/dialog/ArticleContentDialog.vue
+++ b/src/pages/pc/components/dialog/ArticleContentDialog.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 
-import Dialog from "@/components/dialog/Dialog.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import {$ref} from "vue/macros";
 import {onMounted, onUnmounted, watch} from "vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import WordList from "@/components/list/WordList.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import {Article, DefaultArticle} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
 import Empty from "@/components/Empty.vue";
diff --git a/src/components/dialog/Dialog.vue b/src/pages/pc/components/dialog/Dialog.vue
similarity index 98%
rename from src/components/dialog/Dialog.vue
rename to src/pages/pc/components/dialog/Dialog.vue
index 8710dcb8..ab082eab 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/pages/pc/components/dialog/Dialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {onMounted, onUnmounted, watch} from "vue";
-import Tooltip from "@/components/Tooltip.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {Icon} from '@iconify/vue';
 import {useEventListener} from "@/hooks/event.ts";
 import {$ref} from "vue/macros";
@@ -186,7 +186,7 @@ async function cancel() {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/variable.scss";
+@import "@/assets/css/variable";
 
 $modal-mask-bg: rgba(#000, .45);
 $radius: 24rem;
diff --git a/src/components/dialog/DictDiglog.vue b/src/pages/pc/components/dialog/DictDiglog.vue
similarity index 97%
rename from src/components/dialog/DictDiglog.vue
rename to src/pages/pc/components/dialog/DictDiglog.vue
index ccaba5fd..1ab60a60 100644
--- a/src/components/dialog/DictDiglog.vue
+++ b/src/pages/pc/components/dialog/DictDiglog.vue
@@ -7,21 +7,21 @@ import {$computed, $ref} from "vue/macros";
 import BaseButton from "@/components/BaseButton.vue";
 import {Icon} from '@iconify/vue';
 import "vue-activity-calendar/style.css";
-import WordListDialog from "@/components/dialog/WordListDialog.vue";
+import WordListDialog from "@/pages/pc/components/dialog/WordListDialog.vue";
 import {isArticle} from "@/hooks/article.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
-import Slide from "@/components/Slide.vue";
+import Slide from "@/pages/pc/components/Slide.vue";
 import Empty from "@/components/Empty.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
-import Dialog from "@/components/dialog/Dialog.vue";
-import EditBatchArticleModal from "@/components/article/EditBatchArticleModal.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
+import EditBatchArticleModal from "@/pages/pc/components/article/EditBatchArticleModal.vue";
 import {nanoid} from "nanoid";
-import DictListPanel from "@/components/DictListPanel.vue";
+import DictListPanel from "@/pages/pc/components/DictListPanel.vue";
 import {useRouter} from "vue-router";
-import ArticleList from "@/components/list/ArticleList.vue";
-import BaseList from "@/components/list/BaseList.vue";
+import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
+import BaseList from "@/pages/pc/components/list/BaseList.vue";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import {ArchiveReader, libarchiveWasm} from 'libarchive-wasm';
 import {getDictFile} from "@/utils";
@@ -422,7 +422,7 @@ function handleChangeArticleChapterIndex(val: any) {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/variable";
+@import "@/assets/css/style";
 
 $header-height: 60rem;
 
diff --git a/src/components/dialog/MiniDialog.vue b/src/pages/pc/components/dialog/MiniDialog.vue
similarity index 96%
rename from src/components/dialog/MiniDialog.vue
rename to src/pages/pc/components/dialog/MiniDialog.vue
index acce991f..ea9e56d8 100644
--- a/src/components/dialog/MiniDialog.vue
+++ b/src/pages/pc/components/dialog/MiniDialog.vue
@@ -20,7 +20,7 @@ withDefaults(defineProps<IProps>(), {
 </template>
 
 <style lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .mini-row-title {
   min-height: 35rem;
diff --git a/src/components/dialog/SettingDialog.vue b/src/pages/pc/components/dialog/SettingDialog.vue
similarity index 95%
rename from src/components/dialog/SettingDialog.vue
rename to src/pages/pc/components/dialog/SettingDialog.vue
index 20bf39e0..1f359d68 100644
--- a/src/components/dialog/SettingDialog.vue
+++ b/src/pages/pc/components/dialog/SettingDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Dialog from "@/components/dialog/Dialog.vue"
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue"
 import {Icon} from '@iconify/vue';
 import {ref} from "vue";
 import {useSettingStore} from "@/stores/setting.ts";
@@ -11,7 +11,7 @@ import {DefaultShortcutKeyMap, ShortcutKey} from "@/types.ts";
 import BaseButton from "@/components/BaseButton.vue";
 import {SoundFileOptions} from "@/utils/const.ts";
 import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import Setting from "@/components/Setting.vue";
+import Setting from "@/pages/pc/components/Setting.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 
 const runtimeStore = useRuntimeStore()
@@ -28,7 +28,7 @@ let disabledDialogEscKey = $ref(true)
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/variable";
+@import "@/assets/css/style";
 
 .setting-modal {
   width: 40vw;
diff --git a/src/components/dialog/WordListDialog.vue b/src/pages/pc/components/dialog/WordListDialog.vue
similarity index 89%
rename from src/components/dialog/WordListDialog.vue
rename to src/pages/pc/components/dialog/WordListDialog.vue
index ba8f4cb4..bd69dc43 100644
--- a/src/components/dialog/WordListDialog.vue
+++ b/src/pages/pc/components/dialog/WordListDialog.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 
-import Dialog from "@/components/dialog/Dialog.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import {$ref} from "vue/macros";
 import {onMounted, onUnmounted, watch} from "vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import WordList from "@/components/list/WordList.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import Empty from "@/components/Empty.vue";
 
 let show = $ref(false)
diff --git a/src/components/list/ArticleList.vue b/src/pages/pc/components/list/ArticleList.vue
similarity index 95%
rename from src/components/list/ArticleList.vue
rename to src/pages/pc/components/list/ArticleList.vue
index d463ebef..029a076a 100644
--- a/src/components/list/ArticleList.vue
+++ b/src/pages/pc/components/list/ArticleList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
-import Input from "@/components/Input.vue";
+import Input from "@/pages/pc/components/Input.vue";
 import {$computed, $ref} from "vue/macros";
 import {Article} from "@/types.ts";
-import BaseList from "@/components/list/BaseList.vue";
+import BaseList from "@/pages/pc/components/list/BaseList.vue";
 
 const props = withDefaults(defineProps<{
   list: Article[],
diff --git a/src/components/list/BaseList.vue b/src/pages/pc/components/list/BaseList.vue
similarity index 99%
rename from src/components/list/BaseList.vue
rename to src/pages/pc/components/list/BaseList.vue
index 16fae05d..714a597c 100644
--- a/src/components/list/BaseList.vue
+++ b/src/pages/pc/components/list/BaseList.vue
@@ -174,7 +174,7 @@ defineExpose({scrollToBottom, scrollToItem})
 </template>
 
 <style lang="scss" scoped>
-@import "@/assets/css/variable";
+@import "@/assets/css/style";
 
 .scroller {
   flex: 1;
diff --git a/src/components/list/DictGroup.vue b/src/pages/pc/components/list/DictGroup.vue
similarity index 92%
rename from src/components/list/DictGroup.vue
rename to src/pages/pc/components/list/DictGroup.vue
index 35d79b97..e9a876a8 100644
--- a/src/components/list/DictGroup.vue
+++ b/src/pages/pc/components/list/DictGroup.vue
@@ -2,8 +2,8 @@
 import {$computed, $ref} from "vue/macros";
 import {watch} from "vue";
 import {DictResource} from "@/types.ts";
-import DictItem from "@/components/list/DictItem.vue";
-import DictList from "@/components/list/DictList.vue";
+import DictItem from "@/pages/pc/components/list/DictItem.vue";
+import DictList from "@/pages/pc/components/list/DictList.vue";
 
 const props = defineProps<{
   category: string,
diff --git a/src/components/list/DictItem.vue b/src/pages/pc/components/list/DictItem.vue
similarity index 100%
rename from src/components/list/DictItem.vue
rename to src/pages/pc/components/list/DictItem.vue
diff --git a/src/components/list/DictList.vue b/src/pages/pc/components/list/DictList.vue
similarity index 90%
rename from src/components/list/DictList.vue
rename to src/pages/pc/components/list/DictList.vue
index d3dd614e..87a8119d 100644
--- a/src/components/list/DictList.vue
+++ b/src/pages/pc/components/list/DictList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {Dict} from "@/types.ts";
 import {Icon} from "@iconify/vue";
-import DictItem from "@/components/list/DictItem.vue";
+import DictItem from "@/pages/pc/components/list/DictItem.vue";
 
 defineProps<{
   list?: Dict[],
diff --git a/src/components/list/List.vue b/src/pages/pc/components/list/List.vue
similarity index 98%
rename from src/components/list/List.vue
rename to src/pages/pc/components/list/List.vue
index e2a2cff3..0d8d562f 100644
--- a/src/components/list/List.vue
+++ b/src/pages/pc/components/list/List.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends {id:string}">
 
 import BaseIcon from "@/components/BaseIcon.vue";
-import Input from "@/components/Input.vue";
+import Input from "@/pages/pc/components/Input.vue";
 import {$computed, $ref} from "vue/macros";
 import {cloneDeep, throttle} from "lodash-es";
 import {Article} from "@/types.ts";
diff --git a/src/components/list/WordList.vue b/src/pages/pc/components/list/WordList.vue
similarity index 96%
rename from src/components/list/WordList.vue
rename to src/pages/pc/components/list/WordList.vue
index 4be1fd51..994e3cfd 100644
--- a/src/components/list/WordList.vue
+++ b/src/pages/pc/components/list/WordList.vue
@@ -3,7 +3,7 @@
 import {$ref} from "vue/macros";
 import {Word} from "@/types.ts";
 import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import BaseList from "@/components/list/BaseList.vue";
+import BaseList from "@/pages/pc/components/list/BaseList.vue";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
 
 const props = withDefaults(defineProps<{
diff --git a/src/components/toolbar/Add.vue b/src/pages/pc/components/toolbar/Add.vue
similarity index 83%
rename from src/components/toolbar/Add.vue
rename to src/pages/pc/components/toolbar/Add.vue
index 576eb406..7f728121 100644
--- a/src/components/toolbar/Add.vue
+++ b/src/pages/pc/components/toolbar/Add.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/components/IconWrapper.vue";
-import Tooltip from "@/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {$ref} from "vue/macros";
 
 let show = $ref(false)
diff --git a/src/components/toolbar/ChapterName.vue b/src/pages/pc/components/toolbar/ChapterName.vue
similarity index 97%
rename from src/components/toolbar/ChapterName.vue
rename to src/pages/pc/components/toolbar/ChapterName.vue
index f11438c2..284f37bb 100644
--- a/src/components/toolbar/ChapterName.vue
+++ b/src/pages/pc/components/toolbar/ChapterName.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useBaseStore} from "@/stores/base.ts";
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {nextTick, watch} from "vue";
diff --git a/src/components/toolbar/FeedbackModal.vue b/src/pages/pc/components/toolbar/FeedbackModal.vue
similarity index 95%
rename from src/components/toolbar/FeedbackModal.vue
rename to src/pages/pc/components/toolbar/FeedbackModal.vue
index f954c0dc..98a3c36b 100644
--- a/src/components/toolbar/FeedbackModal.vue
+++ b/src/pages/pc/components/toolbar/FeedbackModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Dialog from "@/components/dialog/Dialog.vue"
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue"
 import BaseButton from "@/components/BaseButton.vue";
 import {GITHUB} from "@/config/ENV.ts";
 
@@ -42,7 +42,7 @@ const emit = defineEmits([
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/variable";
+@import "@/assets/css/style";
 
 .feedback-modal {
   width: 500rem;
diff --git a/src/components/toolbar/RepeatSetting.vue b/src/pages/pc/components/toolbar/RepeatSetting.vue
similarity index 91%
rename from src/components/toolbar/RepeatSetting.vue
rename to src/pages/pc/components/toolbar/RepeatSetting.vue
index fe584af9..cf603f73 100644
--- a/src/components/toolbar/RepeatSetting.vue
+++ b/src/pages/pc/components/toolbar/RepeatSetting.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/components/IconWrapper.vue";
-import Tooltip from "@/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
diff --git a/src/components/toolbar/TranslateSetting.vue b/src/pages/pc/components/toolbar/TranslateSetting.vue
similarity index 92%
rename from src/components/toolbar/TranslateSetting.vue
rename to src/pages/pc/components/toolbar/TranslateSetting.vue
index 0bf5cbfb..5e72991c 100644
--- a/src/components/toolbar/TranslateSetting.vue
+++ b/src/pages/pc/components/toolbar/TranslateSetting.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/components/IconWrapper.vue";
-import Tooltip from "@/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import BaseButton from "@/components/BaseButton.vue";
-import Dialog from "@/components/dialog/Dialog.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {ShortcutKey} from "@/types.ts";
 
@@ -107,7 +107,7 @@ function save() {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .setting {
   position: relative;
diff --git a/src/components/toolbar/VolumeSetting.vue b/src/pages/pc/components/toolbar/VolumeSetting.vue
similarity index 96%
rename from src/components/toolbar/VolumeSetting.vue
rename to src/pages/pc/components/toolbar/VolumeSetting.vue
index 8130f60f..798e0982 100644
--- a/src/components/toolbar/VolumeSetting.vue
+++ b/src/pages/pc/components/toolbar/VolumeSetting.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/components/IconWrapper.vue";
-import Tooltip from "@/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useSettingStore} from "@/stores/setting.ts";
diff --git a/src/components/toolbar/index.vue b/src/pages/pc/components/toolbar/index.vue
similarity index 92%
rename from src/components/toolbar/index.vue
rename to src/pages/pc/components/toolbar/index.vue
index 3604b60b..2836b1f9 100644
--- a/src/components/toolbar/index.vue
+++ b/src/pages/pc/components/toolbar/index.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import Tooltip from "@/components/Tooltip.vue"
+import Tooltip from "@/pages/pc/components/Tooltip.vue"
 import useTheme from "@/hooks/theme.ts"
 import {useBaseStore} from "@/stores/base.ts"
-import FeedbackModal from "@/components/toolbar/FeedbackModal.vue"
+import FeedbackModal from "@/pages/pc/components/toolbar/FeedbackModal.vue"
 
 import {Icon} from '@iconify/vue';
 
-import IconWrapper from "@/components/IconWrapper.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import {watch} from "vue"
-import VolumeSetting from "@/components/toolbar/VolumeSetting.vue";
-import RepeatSetting from "@/components/toolbar/RepeatSetting.vue";
-import TranslateSetting from "@/components/toolbar/TranslateSetting.vue";
+import VolumeSetting from "@/pages/pc/components/toolbar/VolumeSetting.vue";
+import RepeatSetting from "@/pages/pc/components/toolbar/RepeatSetting.vue";
+import TranslateSetting from "@/pages/pc/components/toolbar/TranslateSetting.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {$ref} from "vue/macros";
 import {DictType, ShortcutKey} from "@/types.ts";
-import ChapterName from "@/components/toolbar/ChapterName.vue";
+import ChapterName from "@/pages/pc/components/toolbar/ChapterName.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 
diff --git a/src/pages/pc/dict/DictManage.vue b/src/pages/pc/dict/DictManage.vue
index bb3183a1..75035483 100644
--- a/src/pages/pc/dict/DictManage.vue
+++ b/src/pages/pc/dict/DictManage.vue
@@ -7,10 +7,10 @@ import "vue-activity-calendar/style.css";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
-import Slide from "@/components/Slide.vue";
+import Slide from "@/pages/pc/components/Slide.vue";
 import ArticleDictDetail from "@/pages/pc/dict/components/ArticleDictDetail.vue";
 import WordDictDetail from "@/pages/pc/dict/components/WordDictDetail.vue";
-import DictListPanel from "@/components/DictListPanel.vue";
+import DictListPanel from "@/pages/pc/components/DictListPanel.vue";
 import EditDict from "@/pages/pc/dict/components/EditDict.vue";
 import {useRoute} from "vue-router";
 
diff --git a/src/pages/pc/dict/components/ArticleDictDetail.vue b/src/pages/pc/dict/components/ArticleDictDetail.vue
index 078a5b5b..26bfff8a 100644
--- a/src/pages/pc/dict/components/ArticleDictDetail.vue
+++ b/src/pages/pc/dict/components/ArticleDictDetail.vue
@@ -8,19 +8,19 @@ import {$computed, $ref} from "vue/macros";
 import {cloneDeep} from "lodash-es";
 import {Article, DefaultArticle, DefaultDict, Dict, DictResource, DictType, Sort, TranslateType} from "@/types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
-import EditBatchArticleModal from "@/components/article/EditBatchArticleModal.vue";
+import EditBatchArticleModal from "@/pages/pc/components/article/EditBatchArticleModal.vue";
 import {no} from "@/utils";
 import {Icon} from "@iconify/vue";
 import EditDict from "@/pages/pc/dict/components/EditDict.vue";
 import {nanoid} from "nanoid";
 import {useBaseStore} from "@/stores/base.ts";
 import {useSettingStore} from "@/stores/setting.ts";
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import * as XLSX from "xlsx";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import {syncMyDictList} from "@/hooks/dict.ts";
 import {useWindowClick} from "@/hooks/event.ts";
-import ArticleList from "@/components/list/ArticleList.vue";
+import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
 import * as copy from "copy-to-clipboard";
 import {getTranslateText} from "@/hooks/article.ts";
 
diff --git a/src/pages/pc/dict/components/ChapterWordList.vue b/src/pages/pc/dict/components/ChapterWordList.vue
index e5bf3c09..60c477d3 100644
--- a/src/pages/pc/dict/components/ChapterWordList.vue
+++ b/src/pages/pc/dict/components/ChapterWordList.vue
@@ -5,12 +5,12 @@ import BaseIcon from "@/components/BaseIcon.vue";
 import Empty from "@/components/Empty.vue";
 import {$computed, $ref} from "vue/macros";
 import {nextTick, watch} from "vue";
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {useWindowClick} from "@/hooks/event.ts";
 import {cloneDeep, reverse, shuffle} from "lodash-es";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
-import WordList from '@/components/list/WordList.vue'
+import WordList from '@/pages/pc/components/list/WordList.vue'
 
 const props = defineProps<{
   title: string,
diff --git a/src/pages/pc/dict/components/WordDictDetail.vue b/src/pages/pc/dict/components/WordDictDetail.vue
index e9c87b6d..3f8fca53 100644
--- a/src/pages/pc/dict/components/WordDictDetail.vue
+++ b/src/pages/pc/dict/components/WordDictDetail.vue
@@ -12,17 +12,17 @@ import {reactive, watch} from "vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useBaseStore} from "@/stores/base.ts";
 import {useSettingStore} from "@/stores/setting.ts";
-import Dialog from "@/components/dialog/Dialog.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import * as XLSX from "xlsx";
-import WordListDialog from "@/components/dialog/WordListDialog.vue";
+import WordListDialog from "@/pages/pc/components/dialog/WordListDialog.vue";
 import {no} from "@/utils";
 import {Icon} from "@iconify/vue";
 import EditDict from "@/pages/pc/dict/components/EditDict.vue";
 import {syncMyDictList} from "@/hooks/dict.ts";
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import {useWindowClick} from "@/hooks/event.ts";
-import BaseList from "@/components/list/BaseList.vue";
+import BaseList from "@/pages/pc/components/list/BaseList.vue";
 
 const emit = defineEmits<{
   back: []
diff --git a/src/pages/pc/dict/index.vue b/src/pages/pc/dict/index.vue
index 1fe35c59..d8e0a2ed 100644
--- a/src/pages/pc/dict/index.vue
+++ b/src/pages/pc/dict/index.vue
@@ -4,8 +4,8 @@ import DictManage from "@/pages/pc/dict/DictManage.vue";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import RightTopBar from "@/components/RightTopBar.vue";
-import Logo from "@/components/Logo.vue";
+import RightTopBar from "@/pages/pc/components/RightTopBar.vue";
+import Logo from "@/pages/pc/components/Logo.vue";
 
 const router = useRoute()
 const runtimeStore = useRuntimeStore()
diff --git a/src/pages/pc/practice/Options.vue b/src/pages/pc/practice/Options.vue
index 65d525b9..489e27e2 100644
--- a/src/pages/pc/practice/Options.vue
+++ b/src/pages/pc/practice/Options.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
-import Tooltip from "@/components/Tooltip.vue";
-import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import {Icon} from "@iconify/vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useWordOptions} from "@/hooks/dict.ts";
diff --git a/src/pages/pc/practice/Panel.vue b/src/pages/pc/practice/Panel.vue
index 6828d125..6760ef18 100644
--- a/src/pages/pc/practice/Panel.vue
+++ b/src/pages/pc/practice/Panel.vue
@@ -4,23 +4,23 @@ import {useBaseStore} from "@/stores/base.ts"
 import {$computed, $ref} from "vue/macros"
 import {computed, onMounted, onUnmounted, provide, watch} from "vue"
 import {Dict, DictType, ShortcutKey} from "@/types.ts"
-import PopConfirm from "@/components/PopConfirm.vue"
+import PopConfirm from "@/pages/pc/components/PopConfirm.vue"
 import BaseButton from "@/components/BaseButton.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import Close from "@/components/icon/Close.vue";
 import Empty from "@/components/Empty.vue";
 import {useArticleOptions, useWordOptions} from "@/hooks/dict.ts";
 import {Icon} from "@iconify/vue";
-import Tooltip from "@/components/Tooltip.vue";
-import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRouter} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {cloneDeep} from "lodash-es";
-import WordList from "@/components/list/WordList.vue";
-import ArticleList from "@/components/list/ArticleList.vue";
-import Slide from "@/components/Slide.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
+import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
+import Slide from "@/pages/pc/components/Slide.vue";
 
 const router = useRouter()
 const store = useBaseStore()
diff --git a/src/pages/pc/practice/Statistics.vue b/src/pages/pc/practice/Statistics.vue
index a57d4671..24394228 100644
--- a/src/pages/pc/practice/Statistics.vue
+++ b/src/pages/pc/practice/Statistics.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Dialog from "@/components/dialog/Dialog.vue";
+import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
 import {useBaseStore} from "@/stores/base.ts";
-import Ring from "@/components/Ring.vue";
-import Tooltip from "@/components/Tooltip.vue";
-import Fireworks from "@/components/Fireworks.vue";
+import Ring from "@/pages/pc/components/Ring.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
+import Fireworks from "@/pages/pc/components/Fireworks.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {DefaultDisplayStatistics, DisplayStatistics, ShortcutKey} from "@/types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
diff --git a/src/pages/pc/practice/index.vue b/src/pages/pc/practice/index.vue
index af8a0639..cc446beb 100644
--- a/src/pages/pc/practice/index.vue
+++ b/src/pages/pc/practice/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import Toolbar from "@/components/toolbar/index.vue"
+import Toolbar from "@/pages/pc/components/toolbar/index.vue"
 import {onMounted, onUnmounted, watch} from "vue";
 import {usePracticeStore} from "@/stores/practice.ts";
 import Footer from "@/pages/pc/practice/Footer.vue";
@@ -14,11 +14,11 @@ import {MessageBox} from "@/utils/MessageBox.tsx";
 import PracticeArticle from "@/pages/pc/practice/practice-article/index.vue";
 import PracticeWord from "@/pages/pc/practice/practice-word/index.vue";
 import {ShortcutKey} from "@/types.ts";
-import DictModal from "@/components/dialog/DictDiglog.vue";
+import DictModal from "@/pages/pc/components/dialog/DictDiglog.vue";
 import {useStartKeyboardEventListener} from "@/hooks/event.ts";
 import useTheme from "@/hooks/theme.ts";
-import RightTopBar from "@/components/RightTopBar.vue";
-import Logo from "@/components/Logo.vue";
+import RightTopBar from "@/pages/pc/components/RightTopBar.vue";
+import Logo from "@/pages/pc/components/Logo.vue";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
diff --git a/src/pages/pc/practice/practice-article/TypingArticle.vue b/src/pages/pc/practice/practice-article/TypingArticle.vue
index 27e6a48d..8f94c3ca 100644
--- a/src/pages/pc/practice/practice-article/TypingArticle.vue
+++ b/src/pages/pc/practice/practice-article/TypingArticle.vue
@@ -11,8 +11,8 @@ import {cloneDeep} from "lodash-es";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import Options from "@/pages/pc/practice/Options.vue";
 import {Icon} from "@iconify/vue";
-import IconWrapper from "@/components/IconWrapper.vue";
-import Tooltip from "@/components/Tooltip.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useArticleOptions} from "@/hooks/dict.ts";
 
diff --git a/src/pages/pc/practice/practice-article/index.vue b/src/pages/pc/practice/practice-article/index.vue
index 9a7dc54b..8dd7c1db 100644
--- a/src/pages/pc/practice/practice-article/index.vue
+++ b/src/pages/pc/practice/practice-article/index.vue
@@ -18,17 +18,17 @@ import {onMounted, onUnmounted, watch} from "vue";
 import {renewSectionTexts, renewSectionTranslates} from "@/hooks/translate.ts";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import {useBaseStore} from "@/stores/base.ts";
-import EditSingleArticleModal from "@/components/article/EditSingleArticleModal.vue";
+import EditSingleArticleModal from "@/pages/pc/components/article/EditSingleArticleModal.vue";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
-import IconWrapper from "@/components/IconWrapper.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import {Icon} from "@iconify/vue";
-import Tooltip from "@/components/Tooltip.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {syncMyDictList, useArticleOptions} from "@/hooks/dict.ts";
-import ArticleList from "@/components/list/ArticleList.vue";
+import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
 import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 
 const store = useBaseStore()
diff --git a/src/pages/pc/practice/practice-word/Typing.vue b/src/pages/pc/practice/practice-word/Typing.vue
index 3ee48d84..662004d2 100644
--- a/src/pages/pc/practice/practice-word/Typing.vue
+++ b/src/pages/pc/practice/practice-word/Typing.vue
@@ -9,7 +9,7 @@ import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio, use
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {cloneDeep} from "lodash-es";
 import {onUnmounted, watch, onMounted} from "vue";
-import Tooltip from "@/components/Tooltip.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 
 interface IProps {
   word: Word,
diff --git a/src/pages/pc/practice/practice-word/TypingWord.vue b/src/pages/pc/practice/practice-word/TypingWord.vue
index 6f517107..1769182c 100644
--- a/src/pages/pc/practice/practice-word/TypingWord.vue
+++ b/src/pages/pc/practice/practice-word/TypingWord.vue
@@ -9,17 +9,17 @@ import {usePracticeStore} from "@/stores/practice.ts"
 import {useSettingStore} from "@/stores/setting.ts";
 import {useOnKeyboardEventListener, useWindowClick} from "@/hooks/event.ts";
 import {Icon} from "@iconify/vue";
-import Tooltip from "@/components/Tooltip.vue";
+import Tooltip from "@/pages/pc/components/Tooltip.vue";
 import Options from "@/pages/pc/practice/Options.vue";
 import Typing from "@/pages/pc/practice/practice-word/Typing.vue";
 import Panel from "@/pages/pc/practice/Panel.vue";
-import IconWrapper from "@/components/IconWrapper.vue";
+import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {syncMyDictList, useWordOptions} from "@/hooks/dict.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
-import WordList from "@/components/list/WordList.vue";
+import WordList from "@/pages/pc/components/list/WordList.vue";
 import Empty from "@/components/Empty.vue";
-import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import BaseButton from "@/components/BaseButton.vue";
 
 interface IProps {
diff --git a/src/utils/MessageBox.tsx b/src/utils/MessageBox.tsx
index c11e2d74..a638f937 100644
--- a/src/utils/MessageBox.tsx
+++ b/src/utils/MessageBox.tsx
@@ -1,5 +1,5 @@
 import {createVNode, render} from 'vue'
-import Dialog, {ModalProps} from "@/components/dialog/Dialog.vue";
+import Dialog, {ModalProps} from "@/pages/pc/components/dialog/Dialog.vue";
 
 export class MessageBox {
   static confirm(