From 67545252fe1ea7da1859eb04a619121652b81a73 Mon Sep 17 00:00:00 2001
From: JaguarJack <njphper@gmail.com>
Date: Sat, 4 Mar 2023 09:59:23 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=BE=AE=E8=B0=83=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/components/admin/dialog/index.vue   |  6 +--
 .../admin/layout/components/Menu/item.vue     |  8 ++--
 .../admin/layout/components/Menu/menus.vue    | 41 ++++++++++---------
 resources/admin/styles/theme/dark.scss        |  2 +
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/resources/admin/components/admin/dialog/index.vue b/resources/admin/components/admin/dialog/index.vue
index c7c2277..e009f36 100644
--- a/resources/admin/components/admin/dialog/index.vue
+++ b/resources/admin/components/admin/dialog/index.vue
@@ -6,9 +6,9 @@
           <div>
             <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
           </div>
-          <div class="flex w-14 justify-between">
-            <Icon :name="fullscreenIcon" @click="fullscreen" class="hover:cursor-pointer" />
-            <Icon name="x-mark" class="hover:cursor-pointer" @click="close" />
+          <div class="flex w-12 justify-end">
+            <!--<Icon :name="fullscreenIcon" @click="fullscreen" className="hover:cursor-pointer w-4 h-4" />-->
+            <Icon name="x-mark" className="hover:cursor-pointer w-5 h-5" @click="close" />
           </div>
         </div>
       </template>
diff --git a/resources/admin/layout/components/Menu/item.vue b/resources/admin/layout/components/Menu/item.vue
index 6d8075a..6b47aa3 100644
--- a/resources/admin/layout/components/Menu/item.vue
+++ b/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'
 
diff --git a/resources/admin/layout/components/Menu/menus.vue b/resources/admin/layout/components/Menu/menus.vue
index 1c69f35..b8482bd 100644
--- a/resources/admin/layout/components/Menu/menus.vue
+++ b/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>
\ No newline at end of file
+
+: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>
diff --git a/resources/admin/styles/theme/dark.scss b/resources/admin/styles/theme/dark.scss
index c78dfba..3b885e3 100644
--- a/resources/admin/styles/theme/dark.scss
+++ b/resources/admin/styles/theme/dark.scss
@@ -29,4 +29,6 @@ html.dark {
 
   // side sub menu margin
   --sider-sub-menu-bg-margin: 0px 0.05rem;
+
+  --el-mask-color: transparent;
 }