style: 微调样式

resources/admin/layout/components/Menu/item.vue

@@ -2,16 +2,16 @@
   <el-sub-menu :index="menu?.path" :class="subMenuClass" v-if="menu?.children?.length">
     <template #title>
       <el-icon>
-        <Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm"/>
+        <Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm" />
       </el-icon>
       <span>{{ menu?.meta?.title }}</span>
     </template>
-    <slot/>
+    <slot />
   </el-sub-menu>
 
   <el-menu-item v-else class="ct-menu-item" :index="menu?.path" @click="isMiniScreen() && store.changeExpaned()">
     <el-icon>
-      <Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm"/>
+      <Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm" />
     </el-icon>
     <span>{{ menu?.meta?.title }}</span>
   </el-menu-item>
@@ -19,7 +19,7 @@
 
 <script lang="ts" name="MenuItem" setup>
 import { Menu } from '/admin/types/Menu'
-import { PropType } from 'vue'
+import { onMounted, PropType, ref } from 'vue'
 import { useAppStore } from '/admin/stores/modules/app'
 import { isMiniScreen } from '/admin/support/helper'
 

resources/admin/layout/components/Menu/menus.vue

@@ -1,16 +1,16 @@
 <template>
   <el-menu
-      :default-active="appStore.getActiveMenu"
-      background-color="var(--sider-menu-bg-color)"
-      active-text-color="var(--sider-ment-active-text-color)"
-      text-color="var(--sider-menu-text-color)"
-      :collapse="!appStore.isExpand"
-      :collapse-transition="false"
-      :router="true"
-      @select="selectMenu"
-      :unique-opened="true"
+    :default-active="appStore.getActiveMenu"
+    background-color="var(--sider-menu-bg-color)"
+    active-text-color="var(--sider-ment-active-text-color)"
+    text-color="var(--sider-menu-text-color)"
+    :collapse="!appStore.isExpand"
+    :collapse-transition="false"
+    :router="true"
+    @select="selectMenu"
+    :unique-opened="true"
   >
-    <slot/>
+    <slot />
   </el-menu>
 </template>
 <script lang="ts" setup name="menus">
@@ -30,14 +30,6 @@ const selectMenu = (index: string) => {
   border-right: none;
 }
 
-:deep(.el-menu--inline) {
-  @apply pt-1 pb-2;
-}
-
-:deep(.ct-menu-item) {
-  @apply mt-1;
-}
-
 :deep(.is-active) {
   background-color: var(--side-active-menu-bg-color) !important;
 }
@@ -62,5 +54,16 @@ const selectMenu = (index: string) => {
 
 :deep(.el-menu-item:hover) {
   background-color: var(--sider-sub-menu-hover-bg-color) !important;
+  border-right: 3px solid;
+  border-right-color: var(--el-color-primary);
 }
-</style>
+
+:deep(.el-menu-item.is-active) {
+  border-right: 3px solid;
+  border-right-color: var(--el-color-primary);
+}
+
+:deep(.el-menu-item) {
+  height: 50px !important;
+}
+</style>