update: 菜单调整完成

src/App.vue

@@ -47,6 +47,11 @@ const themeConfig: GlobalThemeOverrides = {
     itemTextColorHover: lightVariable.primaryColor,
     itemIconColorCollapsed: lightVariable.tipFontColor,
   },
+  Layout: {
+    color: lightVariable.backgroundColor,
+    siderColor: lightVariable.layoutBackgroundColor,
+    siderBorderColor: lightVariable.backgroundColor,
+  },
 };
 
 </script>

src/pages/home/index.vue

@@ -4,7 +4,7 @@ import MenuBtnGroup from './menu-btn-group/index.vue';
 import User from './user/index.vue';
 import Local from './local/index.vue';
 import Menu from './menu/index.vue';
-import {NLayout} from 'naive-ui';
+import {NLayout, NLayoutContent} from 'naive-ui';
 
 defineOptions({
   name: 'Home',
@@ -25,6 +25,7 @@ defineOptions({
 
     <NLayout class="content" hasSider>
       <Menu />
+      <NLayoutContent />
     </NLayout>
   </div>
 </template>

src/pages/home/menu/index.css

@@ -11,10 +11,13 @@
 }
 
 .collapsed-icon {
-  padding: 6px 0 6px 28px;
-  font-size: var(--title-font-size);
+  padding: 6px 28px;
+  padding-right: 12px;
+  font-size: 22px;
   color: var(--tip-font-color);
+  text-align: right;
   cursor: pointer;
+  transition: padding 300ms linear;
 
   &:deep(.i-icon) {
     transition: transform 300ms linear;
@@ -22,6 +25,8 @@
 }
 
 .reversa-collapsed-icon {
+  padding-right: 26px;
+
   &:deep(.i-icon) {
     transform: rotate(180deg);
   }

src/pages/home/menu/index.vue

@@ -12,12 +12,19 @@ const [collapsed, setCollapsed] = useToggle();
 
 <template>
   <NLayoutSider
+    bordered
     collapseMode="width"
     width="214"
     class="slider"
     :collapsed="collapsed"
     :collapsedWidth="76"
   >
+    <div
+      @click="setCollapsed(!collapsed)"
+      :class="['collapsed-icon', {'reversa-collapsed-icon': collapsed}]"
+    >
+      <MenuUnfoldOne theme="filled" />
+    </div>
     <NScrollbar class="menu">
       <NMenu
         :collapsedWidth="76"
@@ -28,12 +35,6 @@ const [collapsed, setCollapsed] = useToggle();
         :indent="28"
       />
     </NScrollbar>
-    <div
-      @click="setCollapsed(!collapsed)"
-      :class="['collapsed-icon', {'reversa-collapsed-icon': collapsed}]"
-    >
-      <MenuUnfoldOne theme="filled" />
-    </div>
   </NLayoutSider>
 </template>
 

src/utils/theme.ts

@@ -8,7 +8,10 @@ const theme = {
   primaryColor7: '#9ba6d3',
   primaryColor8: '#c2c9e5',
   primaryColor9: '#e7e9f4',
+  backgroundColor: 'f5f5f5',
+  layoutBackgroundColor: '#ffffff',
 } as const;
+
 const font = {
   tipFontSize: 12,
   contentFontSize: 14,