build: 菜单样式

src/components/Hamburger/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] dark:hover:bg-[var(--el-fill-color-light)]"
+    class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px]"
     @click="toggleClick"
   >
     <svg
@@ -38,7 +38,6 @@ function toggleClick() {
   width: 20px;
   height: 20px;
   vertical-align: -4px;
-
   &.is-active {
     transform: rotate(180deg);
   }

src/components/SvgIcon/index.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: "#657dbc",
+    default: "",
   },
   size: {
     type: String,

src/layout/components/Settings/index.vue

@@ -1,24 +1,7 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/store/modules/settings";
 
-import IconEpSunny from "~icons/ep/sunny";
-import IconEpMoon from "~icons/ep/moon";
-
-/**
- * 暗黑模式
- */
 const settingsStore = useSettingsStore();
-const isDark = useDark();
-const toggleDark = () => useToggle(isDark);
-
-/**
- * 切换布局
- */
-function changeLayout(layout: string) {
-  settingsStore.changeSetting({ key: "layout", value: layout });
-  window.document.body.setAttribute("layout", settingsStore.layout);
-}
-
 // 主题颜色
 const themeColors = ref<string[]>([
   "#409EFF",
@@ -28,7 +11,6 @@ const themeColors = ref<string[]>([
   "#6959CD",
   "#f5222d",
 ]);
-
 /**
  * 切换主题颜色
  */
@@ -36,30 +18,13 @@ function changeThemeColor(color: string) {
   document.documentElement.style.setProperty("--el-color-primary", color);
   settingsStore.changeSetting({ key: "layout", value: color });
 }
-
-onMounted(() => {
-  window.document.body.setAttribute("layout", settingsStore.layout);
-});
 </script>
 
 <template>
   <div class="settings-container">
     <h3 class="text-base font-bold">项目配置</h3>
-    <el-divider>主题</el-divider>
-
-    <div class="flex justify-center" @click.stop>
-      <el-switch
-        v-model="isDark"
-        inline-prompt
-        :active-icon="IconEpMoon"
-        :inactive-icon="IconEpSunny"
-        active-color="var(--el-fill-color-dark)"
-        inactive-color="var(--el-color-primary)"
-        @change="toggleDark"
-      />
-    </div>
-
     <el-divider>界面设置</el-divider>
+
     <div class="py-[8px] flex justify-between">
       <span class="text-xs">开启 Tags-View</span>
       <el-switch v-model="settingsStore.tagsView" />
@@ -86,114 +51,11 @@ onMounted(() => {
         @click="changeThemeColor(color)"
       />
     </ul>
-
-    <el-divider>导航设置</el-divider>
-
-    <ul class="layout">
-      <el-tooltip content="左侧模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-left ' +
-            (settingsStore.layout == 'left' ? 'is-active' : '')
-          "
-          @click="changeLayout('left')"
-        >
-          <div />
-          <div />
-        </li>
-      </el-tooltip>
-      <el-tooltip content="顶部模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-top ' +
-            (settingsStore.layout == 'top' ? 'is-active' : '')
-          "
-          @click="changeLayout('top')"
-        >
-          <div />
-          <div />
-        </li>
-      </el-tooltip>
-      <el-tooltip content="混合模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-mix ' +
-            (settingsStore.layout == 'mix' ? 'is-active' : '')
-          "
-          @click="changeLayout('mix')"
-        >
-          <div />
-          <div />
-        </li>
-      </el-tooltip>
-    </ul>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .settings-container {
   padding: 16px;
-
-  .layout {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    width: 100%;
-    height: 50px;
-
-    &-item {
-      position: relative;
-      width: 18%;
-      height: 45px;
-      overflow: hidden;
-      cursor: pointer;
-      background: #f0f2f5;
-      border-radius: 4px;
-    }
-
-    &-item.is-active {
-      border: 2px solid var(--el-color-primary);
-    }
-
-    &-mix div:nth-child(1) {
-      width: 100%;
-      height: 30%;
-      background: #1b2a47;
-      box-shadow: 0 0 1px #888;
-    }
-
-    &-mix div:nth-child(2) {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 30%;
-      height: 70%;
-      background: #1b2a47;
-      box-shadow: 0 0 1px #888;
-    }
-
-    &-top div:nth-child(1) {
-      width: 100%;
-      height: 30%;
-      background: #1b2a47;
-      box-shadow: 0 0 1px #888;
-    }
-
-    &-left div:nth-child(1) {
-      width: 30%;
-      height: 100%;
-      background: #1b2a47;
-    }
-
-    &-left div:nth-child(2) {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 70%;
-      height: 30%;
-      background: #fff;
-      box-shadow: 0 0 1px #888;
-    }
-  }
 }
 </style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import path from 'path-browserify';
-import { isExternal } from '@/utils/index';
-import AppLink from './Link.vue';
+import path from "path-browserify";
+import { isExternal } from "@/utils/index";
+import AppLink from "./Link.vue";
 
-import SvgIcon from '@/components/SvgIcon/index.vue';
+import SvgIcon from "@/components/SvgIcon/index.vue";
 
 const props = defineProps({
   /**
@@ -11,7 +11,7 @@ const props = defineProps({
    */
   item: {
     type: Object,
-    required: true
+    required: true,
   },
 
   /**
@@ -19,8 +19,8 @@ const props = defineProps({
    */
   basePath: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 });
 
 const onlyOneChild = ref(); // 临时变量，唯一子路由
@@ -52,7 +52,7 @@ function hasOneShowingChild(children = [], parent: any) {
 
   // 2：如果无子路由, 复制当前路由信息作为其子路由，满足只拥有一个子路由的条件，所以返回 true
   if (showingChildren.length === 0) {
-    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
+    onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
     return true;
   }
   return false;
@@ -78,13 +78,20 @@ function resolvePath(routePath: string) {
 <template>
   <div v-if="!item.meta || !item.meta.hidden">
     <!-- 只包含一个子路由节点的路由，显示其【唯一子路由】 -->
-    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)">
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren)
+      "
+    >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)">
-          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"
-/>
+          <svg-icon
+            v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
+            :icon-class="onlyOneChild.meta.icon"
+          />
           <template #title>
-            {{ onlyOneChild.meta.title }}
+            <span>{{ onlyOneChild.meta.title }}</span>
           </template>
         </el-menu-item>
       </app-link>
@@ -97,7 +104,7 @@ function resolvePath(routePath: string) {
           v-if="item.meta && item.meta.icon"
           :icon-class="item.meta.icon"
         />
-        <span v-if="item.meta && item.meta.title">{{item.meta.title }}</span>
+        <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
 
       <sidebar-item

src/layout/components/Sidebar/index.vue

@@ -20,12 +20,10 @@ const { sidebarLogo } = storeToRefs(settingsStore);
   <div :class="{ 'has-logo': sidebarLogo }">
     <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
     <el-scrollbar>
-      <el-menu size="large"
+      <el-menu
+        size="large"
         :default-active="currRoute.path"
         :collapse="!appStore.sidebar.opened"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :active-text-color="variables.menuActiveText"
         :unique-opened="false"
         :collapse-transition="false"
         mode="vertical"

src/main.ts

@@ -1,18 +1,17 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from '@/router';
-import { setupStore } from '@/store';
-import { setupDirective } from '@/directive';
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "@/router";
+import { setupStore } from "@/store";
+import { setupDirective } from "@/directive";
 
-import '@/permission';
+import "@/permission";
 
 // 本地SVG图标
-import 'virtual:svg-icons-register';
+import "virtual:svg-icons-register";
 
 // 样式
-import 'element-plus/theme-chalk/dark/css-vars.css';
-import '@/styles/index.scss';
-import 'uno.css';
+import "@/styles/index.scss";
+import "uno.css";
 
 const app = createApp(App);
 // 全局注册 自定义指令(directive)
@@ -20,4 +19,4 @@ setupDirective(app);
 // 全局注册 状态管理(store)
 setupStore(app);
 
-app.use(router).mount('#app');
+app.use(router).mount("#app");

src/settings.ts

@@ -33,18 +33,12 @@ interface DefaultSettings {
 
 const defaultSettings: DefaultSettings = {
   title: "水母星球数据看板系统",
-  showSettings: true,
-  tagsView: true,
+  showSettings: false,
+  tagsView: false,
   fixedHeader: false,
   sidebarLogo: true,
   layout: "left",
-  /**
-   *  主题模式
-   *
-   * dark:暗黑模式
-   * light: 明亮模式
-   */
-  theme: "light"
+  theme: "light",
 };
 
 export default defaultSettings;

src/store/modules/app.ts

@@ -1,6 +1,5 @@
 import { defineStore } from "pinia";
 import { useStorage } from "@vueuse/core";
-import defaultSettings from "@/settings";
 
 // setup
 export const useAppStore = defineStore("app", () => {

src/styles/dark.scss

@@ -1,32 +0,0 @@
-html.dark {
-  --menuBg: var(--el-bg-color-overlay);
-  --menuText: #fff;
-  --menuActiveText: var(--el-menu-active-color);
-  --menuHover: rgb(0 0 0 / 20%);
-  --subMenuBg: var(--el-menu-bg-color);
-  --subMenuActiveText: var(--el-menu-active-color);
-  --subMenuHover: rgb(0 0 0 / 20%);
-
-  .navbar {
-    background-color: var(--el-bg-color);
-
-    .setting-container .setting-item:hover {
-      background: var(--el-fill-color-light);
-    }
-  }
-
-  .right-panel-btn {
-    background-color: var(--el-color-primary-dark);
-  }
-
-  .svg-icon,
-  svg {
-    fill: var(--el-text-color-regular);
-  }
-
-  .sidebar-container {
-    .el-menu-item.is-active .svg-icon {
-      fill: var(--el-color-primary);
-    }
-  }
-}

src/styles/index.scss

@@ -1,16 +1,2 @@
-@import "./sidebar";
 @import "./reset";
-@import "./dark";
-
-.app-container {
-  margin: 20px;
-
-  .search {
-    padding: 18px 0 0 10px;
-    margin-bottom: 10px;
-    background-color: var(--el-bg-color-overlay);
-    border: 1px solid var(--el-border-color-light);
-    border-radius: 4px;
-    box-shadow: var(--el-box-shadow-light);
-  }
-}
+@import "./sidebar";

src/styles/reset.scss

@@ -28,6 +28,7 @@ body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   line-height: inherit;
+  font-size: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizelegibility;

src/styles/sidebar.scss

@@ -61,78 +61,41 @@
       border: none;
     }
 
-    //// menu hover
-    //.el-sub-menu__title {
-    //  &:hover {
-    //    background-color: $menuHover !important;
-    //  }
-    //}
-	//
-    //.is-active > .el-sub-menu__title {
-    //  color: $subMenuActiveText !important;
-    //}
-	//
-    //& .nest-menu .el-sub-menu > .el-sub-menu__title,
-    //& .el-sub-menu .el-menu-item {
-    //  min-width: $sideBarWidth !important;
-    //  background-color: $subMenuBg !important;
-	//
-    //  &:hover {
-    //    background-color: $subMenuHover !important;
-    //  }
-    //}
+    .el-sub-menu__title {
+      display: none;
+    }
+
+    .el-menu-item {
+      margin: 36px auto 0;
+      width: 210px;
+      height: 38px;
+      line-height: 38px;
+      border-radius: 5px;
+      color: #657dbc;
+      font-size: 16px;
+      span {
+        color: $menuText;
+      }
+      &.is-active {
+        background: $menuHover;
+        color: #ffffff;
+        span {
+          color: $menuBg;
+        }
+      }
+    }
   }
 
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
-
       .svg-icon {
         margin-right: 0;
       }
     }
-
     .main-container {
       margin-left: 54px;
     }
-
-    //.el-sub-menu {
-    //  overflow: hidden;
-	//
-    //  & > .el-sub-menu__title {
-    //    padding: 0 !important;
-	//
-    //    .svg-icon {
-    //      margin-left: 20px;
-    //    }
-	//
-    //    .sub-el-icon {
-    //      margin-left: 19px;
-    //    }
-	//
-    //    .el-sub-menu__icon-arrow {
-    //      display: none;
-    //    }
-    //  }
-    //}
-	//
-    //.el-menu--collapse {
-    //  .el-sub-menu {
-    //    & > .el-sub-menu__title {
-    //      & > span {
-    //        display: inline-block;
-    //        width: 0;
-    //        height: 0;
-    //        overflow: hidden;
-    //        visibility: hidden;
-    //      }
-    //    }
-    //  }
-    //}
-  }
-
-  .el-menu--collapse .el-menu .el-sub-menu {
-    min-width: $sideBarWidth !important;
   }
 
   // mobile responsive
@@ -140,12 +103,10 @@
     .main-container {
       margin-left: 0;
     }
-
     .sidebar-container {
       width: $sideBarWidth !important;
       transition: transform 0.28s;
     }
-
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
@@ -154,7 +115,6 @@
       }
     }
   }
-
   .withoutAnimation {
     .main-container,
     .sidebar-container {
@@ -162,50 +122,3 @@
     }
   }
 }
-
-// when menu collapsed
-.el-menu--vertical {
-  & > .el-menu {
-    .svg-icon {
-      margin-right: 16px;
-    }
-
-    .sub-el-icon {
-      margin-right: 12px;
-      margin-left: -2px;
-    }
-  }
-
-  //.nest-menu .el-sub-menu > .el-sub-menu__title,
-  .el-menu-item {
-	font-size: 18px;
-	margin-top: 36px;
-	height: 38px;
-	line-height: 38px;
-	width:210px;
-	border-radius: 5px;
-    &:hover {
-      // you can use $subMenuHover
-      background-color: $menuHover !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  > .el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
-    }
-  }
-}

src/styles/variables.scss

@@ -5,9 +5,10 @@
   --menuText: #23283c;
   --menuActiveText: #ffffff;
   --menuHover: #4284f2;
-  //--subMenuBg: #1f2d3d;
-  //--subMenuActiveText: #f4f4f5;
-  //--subMenuHover: #001528;
+
+  //--subMenuBg: #e6e8f9;
+  //--subMenuActiveText: #23283c;
+  //--subMenuHover: #4284f2;
 }
 
 $menuBg: var(--menuBg);