refactor: 🔥 重构纵向横向布局，组件分离，增强可扩展性

src/layout/components/Header/components/Setting.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="m-setting">
     <el-tooltip effect="dark" content="主题设置" placement="bottom">
-      <el-icon  style="font-size: 20px;" class="bell"><Setting @click="changeSwitch('showSetting',true)"/></el-icon>
+      <el-icon  style="font-size: 20px;" class="bell header-icon"><Setting @click="changeSwitch('showSetting',true)"/></el-icon>
     </el-tooltip>
   </div>
 </template>

src/layout/components/Main/index.vue

@@ -9,13 +9,11 @@
         </transition>
       </router-view>
     </div>
-    <Theme />
-
   </div>
 </template>
 
 <script lang="ts" setup>
-  import Theme from '@/components/Theme/index.vue'
+
 
   import { computed, ref } from 'vue'
   import {useSettingStore} from "@/store/modules/setting"

src/layout/components/TagsView/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tags-wrap-container">
+  <div class="m-tags-view">
     <div class="tags-view">
       <el-tabs
           v-model="activeTabsValue"
@@ -125,12 +125,13 @@ const removeTab = async (activeTabPath: string) => {
 }
 </script>
 <style lang="scss" scoped>
-.tags-wrap-container{
+.m-tags-view{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 10px;
   padding-right: 10px;
+  background: white;
   .right-btn{
     height: 100%;
     flex-shrink: 0;