feat: update

package.json

@@ -31,6 +31,7 @@
     "eslint-plugin-vue": "^9.3.0",
     "naive-ui": "^2.34.3",
     "prettier": "^2.7.1",
+    "sass": "^1.58.0",
     "unplugin-auto-import": "^0.14.2",
     "unplugin-vue-components": "^0.23.0",
     "vite": "^4.0.0",

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   highcharts-vue: ^1.4.0
   naive-ui: ^2.34.3
   prettier: ^2.7.1
+  sass: ^1.58.0
   unplugin-auto-import: ^0.14.2
   unplugin-vue-components: ^0.23.0
   vite: ^4.0.0
@@ -38,9 +39,10 @@ devDependencies:
   eslint-plugin-vue: 9.9.0_eslint@8.33.0
   naive-ui: 2.34.3_vue@3.2.47
   prettier: 2.8.4
+  sass: 1.58.0
   unplugin-auto-import: 0.14.2
   unplugin-vue-components: 0.23.0_vue@3.2.47
-  vite: 4.1.1
+  vite: 4.1.1_sass@1.58.0
   vite-plugin-windicss: 1.8.10_vite@4.1.1
   windicss: 3.5.6
 
@@ -663,7 +665,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.1.1
+      vite: 4.1.1_sass@1.58.0
       vue: 3.2.47
     dev: true
 
@@ -1597,6 +1599,10 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable/4.2.4:
+    resolution: {integrity: sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==}
+    dev: true
+
   /import-fresh/3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -2161,6 +2167,16 @@ packages:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
     dev: true
 
+  /sass/1.58.0:
+    resolution: {integrity: sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.2.4
+      source-map-js: 1.0.2
+    dev: true
+
   /scule/1.0.0:
     resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
     dev: true
@@ -2443,13 +2459,13 @@ packages:
       '@windicss/plugin-utils': 1.8.10
       debug: 4.3.4
       kolorist: 1.7.0
-      vite: 4.1.1
+      vite: 4.1.1_sass@1.58.0
       windicss: 3.5.6
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite/4.1.1:
+  /vite/4.1.1_sass@1.58.0:
     resolution: {integrity: sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -2478,6 +2494,7 @@ packages:
       postcss: 8.4.21
       resolve: 1.22.1
       rollup: 3.14.0
+      sass: 1.58.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true

src/App.vue

@@ -10,7 +10,15 @@ const themeOverrides = {
     primaryColor: "#2d8cf0",
     primaryColorHover: "#2d8cf0",
     primaryColorPressed: "#2d8cf0",
-    primaryColorSuppl: "#2d8cf0"
+    primaryColorSuppl: "#2d8cf0",
+  },
+  Menu: {
+    itemColorActive: "#2080f0",
+    itemColorActiveHover: "#2080f0",
+    itemTextColorActive: "#fff",
+    itemTextColor: "#bbb",
+    itemTextColorActiveHover: "#fff",
+    itemTextColorHoverHorizontalInverted: "#fff",
   },
 };
 </script>
@@ -20,7 +28,6 @@ const themeOverrides = {
     :locale="zhCN"
     :date-locale="dateZhCN"
     :theme-overrides="themeOverrides"
-    class="h-full"
   >
     <n-message-provider>
       <RouterView />

src/assets/base.css

@@ -4,8 +4,3 @@
   box-sizing: border-box;
   margin: 0;
 }
-
-html,
-body {
-  height: 100%;
-}

src/assets/main.css

@@ -1,5 +1 @@
 @import "./base.css";
-
-#app {
-  height: 100%;
-}

src/components/menu/index.vue → src/layoput/components/menu/index.vue

@@ -3,6 +3,7 @@
     :options="menuOptions"
     :value="$route.path"
     :default-expand-all="true"
+    class="h-full"
   />
 </template>
 

src/layoput/index.vue

@@ -1,24 +1,32 @@
 <template>
-  <n-layout class="h-full" has-sider>
-    <n-layout-sider
-      collapse-mode="transform"
-      :collapsed-width="0"
-      show-trigger="bar"
-      :native-scrollbar="false"
-      bordered
-    >
-      <h2>冷链验证报告生成系统</h2>
-      <MenuComponent />
-    </n-layout-sider>
+  <n-layout
+    has-sider
+    position="absolute"
+    style="top: 0; right: 0; bottom: 0; left: 0"
+  >
+    <n-config-provider :theme="darkTheme">
+      <n-layout-sider
+        collapse-mode="transform"
+        :collapsed-width="0"
+        show-trigger="bar"
+        :native-scrollbar="false"
+        :bordered="false"
+        content-style="height: 100%"
+        class="h-full"
+      >
+        <h2>冷链验证报告生成系统</h2>
+        <MenuComponent />
+      </n-layout-sider>
+    </n-config-provider>
     <n-layout>
-      <n-layout-header bordered>
-        <div class="flex justify-end">
+      <n-layout-header>
+        <n-space justify="end">
           <n-dropdown trigger="hover" :options="options">
             <div class="leading-[60px] cursor-pointer hover:bg-[#f6f6f6] px-3">
               <span>用户名</span>
             </div>
           </n-dropdown>
-        </div>
+        </n-space>
       </n-layout-header>
       <n-layout-content
         style="height: calc(100vh - 64px)"
@@ -34,7 +42,8 @@
 </template>
 
 <script setup>
-import MenuComponent from "@/components/menu/index.vue";
+import MenuComponent from "@/layoput/components/menu/index.vue";
+import { darkTheme } from "naive-ui";
 
 const options = [
   {
@@ -58,9 +67,6 @@ const options = [
 </script>
 
 <style scoped>
-.n-layout-sider {
-  box-shadow: rgba(29, 35, 41, 0.05) 2px 0 8px;
-}
 h2 {
   text-align: center;
   line-height: 64px;