🌀: 调整悬浮菜单样式

package/component/src/component/menu/index.less

@@ -311,22 +311,35 @@
   }
 }
 
-.layui-sub-menu-popup.layui-dropdown > dl {
+/* popup menu 样式开始 */
+.layui-sub-menu-popup-content {
   border: unset;
   border-radius: 2px;
-  background-color: #393d49;
+  background-color: #353535;
-}
 
-.layui-nav.layui-nav-collapse {
+  .layui-nav-item {
-  .layui-sub-menu-popup dl .layui-nav-item {
     width: 100%;
-    > a {
+
+    * {
+      color: rgba(255, 255, 255, 0.7)
+    }
+
+    >a {
       display: flex;
       align-items: center;
       text-overflow: ellipsis;
-      padding: 5px 20px 5px 20px;
+      padding: 5px 15px 5px 15px;
+      font-size: 13.5px;
+      min-height: 30px;
+      min-width: 60px;
+
       .layui-sub-menu-icon {
+        margin-top: 2px;
         margin-right: 8px;
+
+        .layui-icon {
+          font-size: 14px;
+        }
       }
     }
 
@@ -340,9 +353,39 @@
       display: inline-block;
       font-size: 12.5px !important;
       margin-top: 0;
-      margin-left: 30px;
+      margin-left: 25px;
       padding: 0;
       right: -8px;
+
+      .layui-icon {
+        font-size: 14px;
+      }
     }
+
   }
-}
+
+  .layui-this {
+    background-color: var(--global-primary-color);
+  }
+}
+
+.layui-sub-menu-popup-theme {
+  &-light {
+    background-color: #FFF;
+
+    .layui-this {
+      * {
+        color: whitesmoke !important;
+      }
+    }
+
+    .layui-nav-item {
+      * {
+        color: gray;
+      }
+    }
+
+
+  }
+}
+/* popup menu 样式结束 */

package/component/src/component/menu/index.vue

@@ -46,6 +46,7 @@ const isCollapseTransition: ComputedRef = computed(
   () => props.collapseTransition
 );
 const oldOpenKeys: Ref = ref<string[]>(props.openKeys);
+const menuTheme = computed(() => props.theme);
 
 const openKeys = computed({
   get() {
@@ -86,6 +87,7 @@ provide("selectedKey", selectedKey);
 provide("openKeys", openKeys);
 provide("isCollapse", isCollapse);
 provide("isCollapseTransition", isCollapseTransition);
+provide("menuTheme", menuTheme);
 </script>
 
 <template>

package/component/src/component/subMenu/SubMenuPopup.vue

@@ -17,7 +17,10 @@ export interface LaySubMenuPopupProps {
 const props = defineProps<LaySubMenuPopupProps>();
 
 const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
-const { level } = useLevel();
+const theme = inject("menuTheme") as Ref<string>;
+const computedTheme = computed(() => {
+  return theme.value === "light" ? "-light" : "";
+});
 
 const isOpen = computed(() => {
   return openKeys.value.includes(props.id);
@@ -30,10 +33,11 @@ const isOpen = computed(() => {
     placement="right-top"
     :autoFitMinWidth="false"
     :contentOffset="3"
+    :renderToBody="true"
     class="layui-sub-menu-popup"
   >
     <li :class="['layui-nav-item']">
-      <a href="javascript:void(0)">
+      <a href="javascript:void(0)" style="justify-content: space-between">
         <div>
           <!-- 图标 -->
           <i v-if="$slots.icon" class="layui-sub-menu-icon">
@@ -55,7 +59,14 @@ const isOpen = computed(() => {
       </a>
     </li>
     <template #content>
-      <slot></slot>
+      <div
+        :class="[
+          'layui-sub-menu-popup-content',
+          `layui-sub-menu-popup-theme${computedTheme}`,
+        ]"
+      >
+        <slot></slot>
+      </div>
     </template>
   </lay-dropdown>
 </template>

package/document-component/src/document/zh-CN/components/menu.md

@@ -429,10 +429,14 @@ export default {
 ::: demo
 
 <template>
-  <lay-switch v-model="collapse20"></lay-switch>
+  <lay-switch v-model="collapse20"></lay-switch>&nbsp;&nbsp;
+  <lay-switch v-model="active20">
+    <template #onswitch-icon>😄</template>
+    <template #unswitch-icon>🤔</template>
+  </lay-switch>
   <br/>
   <br/>
-  <lay-menu v-model:selectedKey="selectedKey20" v-model:tree="isTree20" v-model:openKeys="openKeys20" :collapse="collapse20">
+  <lay-menu v-model:selectedKey="selectedKey20" :theme="active20 ? 'dark' : 'light'" v-model:tree="isTree20" v-model:openKeys="openKeys20" :collapse="collapse20">
     <lay-menu-item id="1">
         <template #icon>
           <lay-icon type="layui-icon-home"></lay-icon> 
@@ -575,11 +579,13 @@ export default {
     const openKeys20 = ref(["7"])
     const collapse20 = ref(true)   
     const isTree20 = ref(true)
+    const active20 = ref(true)
     return {
       selectedKey,
       openKeys6,
       colapse,
-      isTree
+      isTree,
+      active20
     }
   }
 }