fix: 框架样式

package.json

@@ -35,7 +35,8 @@
   "eslintConfig": {
     "root": true,
     "env": {
-      "node": true
+      "node": true,
+      "vue/setup-compiler-macros": true
     },
     "globals": {
       "VE_ENV": "readonly",

src/layout/MenuIcon.vue

@@ -1,59 +1,34 @@
 <template>
-  <svg v-if="name === 'device'" viewBox="0 0 24 24" width="22" height="22" fill="none">
-    <path
-      d="M4 10c2.5-1 5-4.5 6.5-8 .8 3.5 2.8 6.5 6.5 8-3 .5-5.5 2-7 5-1.2-2-3.2-3.8-6-5z"
-      stroke="currentColor"
-      stroke-width="1.6"
-      stroke-linejoin="round"
-    />
-    <circle cx="9" cy="10" r="1.2" fill="currentColor" />
-    <circle cx="14" cy="10" r="1.2" fill="currentColor" />
-    <path d="M8 14.5c1 .8 2.2 1.3 3.5 1.3s2.5-.5 3.5-1.3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
-  </svg>
-
-  <svg v-else-if="name === 'planting'" viewBox="0 0 24 24" width="22" height="22" fill="none">
-    <path
-      d="M12 21v-7"
-      stroke="currentColor"
-      stroke-width="1.6"
-      stroke-linecap="round"
-    />
-    <path
-      d="M12 14c-4.5 0-7-3-7-7 4.5 0 7 3 7 7z"
-      stroke="currentColor"
-      stroke-width="1.6"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M12 11c2.2-2.5 5.5-3.5 8-3.2-1 4-4 6.2-8 6.2"
-      stroke="currentColor"
-      stroke-width="1.6"
-      stroke-linejoin="round"
-    />
-  </svg>
-
-  <svg v-else-if="name === 'personnel'" viewBox="0 0 24 24" width="22" height="22" fill="none">
-    <circle cx="12" cy="9" r="3.2" stroke="currentColor" stroke-width="1.6" />
-    <path
-      d="M6.5 19c.8-3 3-4.5 5.5-4.5S16.7 16 17.5 19"
-      stroke="currentColor"
-      stroke-width="1.6"
-      stroke-linecap="round"
-    />
-    <path
-      d="M8 6.5c1-1.5 2.5-2.3 4-2.3s3 .8 4 2.3"
-      stroke="currentColor"
-      stroke-width="1.6"
-      stroke-linecap="round"
-    />
-  </svg>
+  <img class="menu-icon" :src="iconSrc" :alt="name" />
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+import deviceIcon from "@/assets/layout/device.png";
+import leafIcon from "@/assets/layout/leaf.png";
+import personIcon from "@/assets/layout/person.png";
+
+const props = defineProps({
   name: {
     type: String,
     required: true,
   },
 });
+
+const iconMap = {
+  device: deviceIcon,
+  planting: leafIcon,
+  personnel: personIcon,
+};
+
+const iconSrc = computed(() => iconMap[props.name] || deviceIcon);
 </script>
+
+<style scoped>
+.menu-icon {
+  display: block;
+  width: 18px;
+  height: 22px;
+  object-fit: contain;
+}
+</style>

src/layout/index.vue

@@ -18,7 +18,7 @@
     </aside>
 
     <div class="layout-main">
-      <header class="layout-header">
+      <div class="layout-header">
         <div class="header-right">
           <el-dropdown trigger="click">
             <div class="user-entry">
@@ -40,7 +40,7 @@
             </template>
           </el-dropdown>
         </div>
-      </header>
+      </div>
 
       <main class="layout-content">
         <router-view v-slot="{ Component }">
@@ -86,19 +86,20 @@ const go = (path) => {
 .layout-aside {
   width: 280px;
   flex-shrink: 0;
-  background: #1a1a1a;
+  background: #000;
   display: flex;
   flex-direction: column;
-  color: #cfcfcf;
+  color: rgba(255, 255, 255, 0.6);
 }
 
 .brand {
-  height: 64px;
+  height: 76px;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: url('@/assets/layout/title-bg.png') no-repeat center center;
+  background-size: 100% 100%;
 }
 
 .brand-logo {
@@ -111,49 +112,62 @@ const go = (path) => {
   font-size: 24px;
   letter-spacing: 2px;
   font-family: "PangMenZhengDao";
-  background: linear-gradient(to bottom, #F3C11D, #ffffff);
+  background: linear-gradient(180deg, #FFD489 0%, #FFFFFF 100%);
+  // background: linear-gradient(to bottom, #F3C11D, #ffffff);
   background-clip: text;
   color: transparent;
   text-decoration: none;
 }
 
 .side-menu {
-  padding: 16px 12px;
+  padding: 13px 0 12px 20px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 }
 
 .side-menu__item {
-  height: 48px;
+  height: 60px;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0 16px;
-  border-radius: 8px;
+  border-radius: 4px 0 0 4px;
   cursor: pointer;
   color: #9a9a9a;
   transition: background 0.2s, color 0.2s;
 
   &:hover {
-    color: #e8d48b;
-    background: rgba(212, 175, 55, 0.08);
+    color: #FFD489;
   }
 
   &.is-active {
-    color: #d4af37;
-    background: linear-gradient(90deg, rgba(212, 175, 55, 0.28), rgba(212, 175, 55, 0.08));
+    font-weight: 500;
+    color: #FFD489;
+    background: linear-gradient(90deg, rgba(255, 212, 137, 0.18) 0%, rgba(25, 25, 25, 0) 100%);
   }
 }
 
 .side-menu__icon {
   display: inline-flex;
-  width: 22px;
-  height: 22px;
+
+  :deep(.menu-icon) {
+    filter: grayscale(1);
+    transition: filter 0.2s;
+  }
+}
+
+.side-menu__item.is-active .side-menu__icon,
+.side-menu__item:hover .side-menu__icon {
+  :deep(.menu-icon) {
+    filter: none;
+  }
 }
 
 .side-menu__text {
-  font-size: 15px;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: 2px;
 }
 
 .layout-main {
@@ -164,14 +178,15 @@ const go = (path) => {
 }
 
 .layout-header {
-  height: 64px;
+  height: 76px;
   flex-shrink: 0;
   background: #fff;
+  // box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.1) inset;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 0 24px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
 }
 
 .header-right {
@@ -206,6 +221,6 @@ const go = (path) => {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  background: #f5f5f5;
+  background: #F5F5F5;
 }
 </style>