修改 sidebar 样式

package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.4",
     "@types/node": "^17.0.23",
-    "axios": "^0.26.1",
     "aplayer": "^1.10.1",
+    "axios": "^0.26.1",
     "clipboard": "^2.0.10",
     "copy-to-clipboard": "^3.3.1",
     "echarts": "^5.3.2",
@@ -24,9 +24,14 @@
     "lodash-unified": "^1.0.2",
     "md-editor-v3": "^1.11.6",
     "moment": "^2.29.4",
+    "node-sass": "^8.0.0",
     "pinia": "^2.0.13",
     "qs": "^6.10.3",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
     "save": "^2.4.0",
+    "scss": "^0.2.4",
+    "style-loader": "^3.3.1",
     "type-fest": "^2.12.2",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
@@ -40,10 +45,10 @@
     "@vitejs/plugin-vue": "^2.3.0",
     "mockjs": "^1.1.0",
     "typescript": "^4.5.4",
+    "v-contextmenu": "^3.0.0",
     "vite": "^2.9.13",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.6",
-    "v-contextmenu": "^3.0.0",
     "vue-tsc": "^0.29.8"
   }
 }

src/components/layout/Layout.vue

@@ -1,12 +1,11 @@
 <template>
-  <div class="4444">
+  <div>
     <el-container>
-      <el-aside width="150px">
+      <el-aside width="180px">
         <SideBar></SideBar>
       </el-aside>
       <el-container>
-        <el-header
+        <el-header>
-          style="border-bottom-style:solid; border-bottom-width: 0.5px; border-bottom-color:rgba(151, 151, 151, 0.3);">
           <NavBar></NavBar>
         </el-header>
         <el-main>
@@ -20,7 +19,6 @@
           <div>
             <el-avatar @click="openGithub" src="https://github.githubassets.com/favicons/favicon.svg" />
           </div>
-
         </el-footer>
       </el-container>
     </el-container>
@@ -31,6 +29,32 @@
 import MainApp from '../layout/MainApp.vue'
 import NavBar from "../layout/NavBar.vue"
 import SideBar from "../layout/SideBar.vue"
+import { settingsStore } from "@/store/modules/settings"
+
+// -- IMPORT --
+const useSettingsStore = settingsStore()
+
+// -- REACTIVE OBJECT --
+
+// -- REF OBJECT --
+
+// -- EVENT DEFINITION
+const iniPage = () => {
+  const screenWidth = document.body.clientWidth
+  if (screenWidth < 1000) {
+    useSettingsStore.settings.isMobile = true
+    // isSider.value = false
+    // isCollaps.value = true
+  } else if (screenWidth >= 1000 && screenWidth < 1200) {
+    useSettingsStore.settings.isMobile = false
+    // isSider.value = false
+    // isCollaps.value = true
+  } else {
+    useSettingsStore.settings.isMobile = false
+    // isSider.value = true
+    // isCollaps.value = false
+  }
+}
 
 const openGithub = () => {
   let href = 'https://github.com/simple321vip'
@@ -42,47 +66,28 @@ const openSiteQuery = () => {
   window.open(href, '_blank')
 }
 
+/**
+ * AUTO INVOKE FUNCTION
+ */
+iniPage()
 
 </script>
 
 <style scoped>
-/* .el-header,
+.el-header {
-.el-footer {
+  border-bottom-style: solid;
-
+  border-bottom-width: 0.5px;
-  color: rgb(51, 51, 51);
+  border-bottom-color: rgba(151, 151, 151, 0.3);
-  text-align: center;
-  line-height: 60px;
-} */
-/* 
-
-
-.el-aside {
-  background-color: #e9eef3;
-  color: #333;
-  text-align: left;
-  line-height: 200px;
 }
 
 .el-main {
-  background-color: #e9eef3;
+  padding: 16px;
-  color: #333;
-  /* line-height: 450px; */
-/* vertical-align: top;
-  padding: 5px;
 }
 
-body > .el-container {
+.el-aside {
-  margin-bottom: 40px;
+  margin-left: -10px;
 }
 
-.el-container:nth-child(5) .el-aside,
-.el-container:nth-child(6) .el-aside {
-  line-height: 260px;
-}
-
-.el-container:nth-child(7) .el-aside {
-  line-height: 320px;
-} */
 .el-footer {
   display: flex;
   justify-content: space-around;

src/components/layout/MainApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="section-main" style="height:100%;">
+  <section class="section-main">
     <router-view />
   </section>
 </template>
@@ -8,4 +8,8 @@
 </script>
 
 <style>
+.section-main {
+  height: 100%;
+  padding: 14px;
+}
 </style>

src/components/layout/SideBar.vue

@@ -1,27 +1,113 @@
 <template>
   <div>
-    <el-menu router class="side_Style" :style="{ height: sideHeight }">
+    <el-menu router class="el-menu-vertical" :style="{ height: sideHeight }" :background-color="theme.background"
-      <el-menu-item v-for="(route, index) in current_routes" v-bind:key="index" v-bind:index="route.path"
+      :active-text-color="theme?.background">
-        v-bind:title="route.meta?.name">{{ route.meta?.name }}</el-menu-item>
+
+      <el-menu-item v-for="(route, index) in current_routes" :key="index" :index="route.path" :title="route.meta?.name"
+        @click="onclick()">
+        <template #title>
+          <div class="gva-menu-item">
+            <el-icon v-if="index == 0" :size="20">
+              <Sunny />
+            </el-icon>
+            <el-icon v-if="index == 1" :size="20">
+              <EditPen />
+            </el-icon>
+            <el-icon v-if="index == 2" :size="20">
+              <Star />
+            </el-icon>
+            <el-icon v-if="index == 3" :size="20">
+              <Notebook />
+            </el-icon>
+            <el-icon v-if="index == 4" :size="20">
+              <Calendar />
+            </el-icon>
+            <el-icon v-if="index == 5" :size="20">
+              <MostlyCloudy />
+            </el-icon>
+            <el-icon v-if="index == 10" :size="20">
+              <Setting />
+            </el-icon>
+            <span>{{ route.meta?.name }}</span>
+          </div>
+        </template>
+      </el-menu-item>
     </el-menu>
   </div>
 </template>
 
 <script setup lang='ts'>
-import { RouteRecordRaw } from "vue-router";
+import { onBeforeMount, ref } from 'vue'
-// import { store } from "../../store/index";
+import router from "@/router/index"
-import router from "../../router/index";
+import { settingsStore } from "@/store/modules/settings"
-import { onBeforeMount, ref } from 'vue';
+import { Theme } from "@/entity/index";
-let current_routes = router.options.routes[0].children;
 
+// -- IMPORT --
+const useSettingsStore = settingsStore()
 
+// -- REACTIVE OBJECT --
+
+// -- REF OBJECT --
 let sideHeight = ref("")
+
+let current_routes = router.options.routes[0].children
+const theme = ref<Theme>({
+  background: '#fff',
+  activeBackground: '#4D70FF',
+  activeText: '#fff',
+  normalText: '#333',
+  hoverBackground: 'rgba(64, 158, 255, 0.08)',
+  hoverText: '#333'
+})
+
+// -- EVENT DEFINITION
+const onclick = () => {
+  activeBackground.value = '#4D70FF'
+}
+
+const getTheme = () => {
+  switch (useSettingsStore.sideMode) {
+    // white color
+    case '#fff':
+      theme.value = {
+        background: '#fff',
+        activeBackground: '#4D70FF',
+        activeText: '#fff',
+        normalText: '#333',
+        hoverBackground: 'rgba(64, 158, 255, 0.08)',
+        hoverText: '#333',
+      }
+      break;
+
+    // black color
+    case '#191a23':
+      theme.value = {
+        background: '#191a23',
+        activeBackground: '#4D70FF',
+        activeText: '#fff',
+        normalText: '#fff',
+        hoverBackground: 'rgba(64, 158, 255, 0.08)',
+        hoverText: '#fff',
+      }
+      break;
+  }
+}
+
+/**
+ * AUTO INVOKE FUNCTION
+ */
+getTheme()
+
 onBeforeMount(() => {
   sideHeight.value = window.innerHeight + 'px'
 })
+const activeBackground = ref(theme.value.activeBackground)
+onclick()
+
+
 </script>
 
-<style>
+<style lang="scss" scoped>
 .side_Style {
   width: 100px;
 }
@@ -30,6 +116,15 @@ onBeforeMount(() => {
   width: 200px;
 }
 
+.gva-menu-item {
+  color: #fff;
+}
+
+.el-menu-item.is-active {
+  color: v-bind(activeBackground);
+  background: v-bind(activeBackground);
+}
+
 /* .el-menu-item {
   background-color: #01dfd7;
 } */

src/entity/index.ts

@@ -3,4 +3,13 @@ type Tenant = {
   account: string
 }
 
-export { Tenant }
+type Theme = {
+  background: string,
+  activeBackground: string,
+  activeText: string,
+  normalText: string,
+  hoverBackground: string,
+  hoverText: string,
+}
+
+export { Tenant, Theme }

src/style/mixin.scss

@@ -0,0 +1 @@
+$color: red;

vite.config.ts

@@ -17,6 +17,12 @@ export default defineConfig(({ mode }) => {
         localEnabled: true,
       }),
     ],
+    pluginOptions: {
+      'style-resources-loader': {
+        preProcessor: 'scss',
+        patterns: []
+      }
+    },
     base: env.VITE_RES_URL,
     resolve: {
       alias: {
@@ -25,7 +31,9 @@ export default defineConfig(({ mode }) => {
     },
     css: {
       preprocessorOptions: {
-
+        scss: {
+          additionalData: `@import "@/style/mixin.scss";`
+        }
       }
     }
   }