feat: 菜单基本不

package-lock.json

@@ -17,6 +17,7 @@
         "vue-router": "^4.3.0"
       },
       "devDependencies": {
+        "@digitalacorn/vite-plugin-svg-icons": "^3.0.0-pre.1",
         "@tsconfig/node20": "^20.1.4",
         "@types/node": "^20.12.5",
         "@vitejs/plugin-vue": "^5.0.4",
@@ -28,7 +29,6 @@
         "tailwindcss": "^3.4.3",
         "typescript": "~5.4.0",
         "vite": "^5.2.8",
-        "vite-plugin-svg-icons": "^2.0.1",
         "vite-plugin-vue-devtools": "^7.0.25",
         "vue-tsc": "^2.0.11"
       }
@@ -576,6 +576,45 @@
         "vue": "^3.0.11"
       }
     },
+    "node_modules/@digitalacorn/vite-plugin-svg-icons": {
+      "version": "3.0.0-pre.1",
+      "resolved": "https://registry.npmmirror.com/@digitalacorn/vite-plugin-svg-icons/-/vite-plugin-svg-icons-3.0.0-pre.1.tgz",
+      "integrity": "sha512-UYSUlbvr8lGys3pFi9q9DjiarDG64gIjPhouuCvuxGPlRpjkSn3K2485HeNyVDSUBR1TRMXI+tmS3GXb/Y0tnQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/svgo": "^2.6.1",
+        "cors": "^2.8.5",
+        "debug": "^4.3.3",
+        "etag": "^1.8.1",
+        "fs-extra": "^10.0.0",
+        "pathe": "^0.2.0",
+        "svg-baker": "1.7.0",
+        "svgo": "^2.8.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.9.16"
+      }
+    },
+    "node_modules/@digitalacorn/vite-plugin-svg-icons/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@digitalacorn/vite-plugin-svg-icons/node_modules/pathe": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-0.2.0.tgz",
+      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
+      "dev": true
+    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
@@ -6640,45 +6679,6 @@
         }
       }
     },
-    "node_modules/vite-plugin-svg-icons": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/vite-plugin-svg-icons/-/vite-plugin-svg-icons-2.0.1.tgz",
-      "integrity": "sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==",
-      "dev": true,
-      "dependencies": {
-        "@types/svgo": "^2.6.1",
-        "cors": "^2.8.5",
-        "debug": "^4.3.3",
-        "etag": "^1.8.1",
-        "fs-extra": "^10.0.0",
-        "pathe": "^0.2.0",
-        "svg-baker": "1.7.0",
-        "svgo": "^2.8.0"
-      },
-      "peerDependencies": {
-        "vite": ">=2.0.0"
-      }
-    },
-    "node_modules/vite-plugin-svg-icons/node_modules/fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/vite-plugin-svg-icons/node_modules/pathe": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-0.2.0.tgz",
-      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-      "dev": true
-    },
     "node_modules/vite-plugin-vue-devtools": {
       "version": "7.1.3",
       "integrity": "sha512-qv8Z4yok9RYo6TEs89WnIAlmTHby/+XTim8tlSnMs3lAPcQqqcl/wGRY8gAeYrGCANngOqO+VuabW3Jb1HZtyw==",

package.json

@@ -20,6 +20,7 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
+    "@digitalacorn/vite-plugin-svg-icons": "^3.0.0-pre.1",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.12.5",
     "@vitejs/plugin-vue": "^5.0.4",
@@ -31,7 +32,6 @@
     "tailwindcss": "^3.4.3",
     "typescript": "~5.4.0",
     "vite": "^5.2.8",
-    "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-devtools": "^7.0.25",
     "vue-tsc": "^2.0.11"
   }

src/App.vue

@@ -1,10 +1,47 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import { RouterView } from 'vue-router';
+import { NConfigProvider } from 'naive-ui';
+import type { GlobalThemeOverrides } from 'naive-ui';
+
+const primaryColor = '#1A2029';
+
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    // primaryColor: '#2A68FF',
+  },
+  Menu: {
+    itemTextColor: primaryColor,
+    itemTextColorActive: primaryColor,
+    itemTextColorActiveHover: primaryColor,
+    itemTextColorChildActiveHover: primaryColor,
+    itemTextColorChildActive: primaryColor,
+    itemColorActive: '#FCFDFE',
+    itemColorActiveHover: '#FCFDFE',
+    arrowColorChildActive: primaryColor
+  }
+  // Menu: {
+  //   itemTextColorHorizontal: '#161616',
+  //   itemTextColorHoverHorizontal: '#2A68FF',
+  //   itemTextColor: '#161616',
+  //   itemColorHover: 'rgba(42, 104, 255, 0.1)',
+  //   itemTextColorHover: '#2A68FF',
+  // },
+  // Pagination: {
+  //   itemColorActiveHover: '#0092FF',
+  //   itemColorActive: '0092FF',
+  //   itemColor: "#f7f7f7",
+  //   itemTextColorActive: '#fff',
+  //   itemTextColorHover: '#fff',
+  //   itemColorHover: '#0092FF',
+  // }
+}
+
 </script>
 
 <template>
-  <RouterView />
+  <NConfigProvider :theme-overrides="themeOverrides">
+    <RouterView />
+  </NConfigProvider>
 </template>
 
 <style scoped lang="scss">

src/assets/icons/home/icon-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/assets/icons/icon-child.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.3333C13.4518 18.3333 16.25 15.5351 16.25 12.0833C16.25 6.25 10 1.66667 10 1.66667C10 1.66667 3.75 6.25 3.75 12.0833C3.75 15.5351 6.54821 18.3333 10 18.3333Z" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3.75 12.0834C3.75 15.5352 6.54821 18.3334 10 18.3334C13.4518 18.3334 16.25 15.5352 16.25 12.0834C16.25 12.0834 12.5 13.3334 10 12.0834C7.5 10.8334 3.75 12.0834 3.75 12.0834Z" stroke="#1A2029" stroke-width="1.3" stroke-linejoin="round"/>
-</svg>

src/assets/icons/icon-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/assets/icons/icon-source.svg

@@ -1,45 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="15" cy="15" r="15" fill="url(#paint0_linear_971_3105)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 22C19.1421 22 22.5 18.6421 22.5 14.5C22.5 10.3579 19.1421 7 15 7C10.8579 7 7.5 10.3579 7.5 14.5C7.5 18.6421 10.8579 22 15 22ZM15 10.3333C15.4602 10.3333 15.8333 9.96024 15.8333 9.5C15.8333 9.03976 15.4602 8.66667 15 8.66667C14.5398 8.66667 14.1667 9.03976 14.1667 9.5C14.1667 9.96024 14.5398 10.3333 15 10.3333ZM12.5 10.3333C12.5 10.7936 12.1269 11.1667 11.6667 11.1667C11.2064 11.1667 10.8333 10.7936 10.8333 10.3333C10.8333 9.8731 11.2064 9.5 11.6667 9.5C12.1269 9.5 12.5 9.8731 12.5 10.3333ZM10 13.6667C10.4602 13.6667 10.8333 13.2936 10.8333 12.8333C10.8333 12.3731 10.4602 12 10 12C9.53976 12 9.16667 12.3731 9.16667 12.8333C9.16667 13.2936 9.53976 13.6667 10 13.6667ZM20.8333 12.8333C20.8333 13.2936 20.4602 13.6667 20 13.6667C19.5398 13.6667 19.1667 13.2936 19.1667 12.8333C19.1667 12.3731 19.5398 12 20 12C20.4602 12 20.8333 12.3731 20.8333 12.8333ZM18.4905 9.44382C18.3006 9.307 18.0369 9.34167 17.8888 9.52295L14.3491 13.8547C14.0632 14.2046 14.1314 14.723 14.498 14.9871C14.8646 15.2511 15.3779 15.1515 15.6191 14.7695L18.6061 10.0396C18.7311 9.84169 18.6805 9.58065 18.4905 9.44382Z" fill="url(#paint1_linear_971_3105)"/>
-<g filter="url(#filter0_b_971_3105)">
-<rect x="6.66675" y="17.8334" width="16.6667" height="5" rx="1.66667" fill="url(#paint2_linear_971_3105)" fill-opacity="0.4"/>
-<rect x="6.87508" y="18.0417" width="16.25" height="4.58333" rx="1.45833" stroke="url(#paint3_linear_971_3105)" stroke-width="0.416667"/>
-</g>
-<g filter="url(#filter1_d_971_3105)">
-<path d="M13.3333 20.3334H16.6666" stroke="white" stroke-width="0.833333" stroke-linecap="round"/>
-</g>
-<defs>
-<filter id="filter0_b_971_3105" x="3.33341" y="14.5" width="23.3334" height="11.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.66667"/>
-<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_971_3105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_971_3105" result="shape"/>
-</filter>
-<filter id="filter1_d_971_3105" x="12.0832" y="19.0834" width="7.50008" height="4.16668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="0.833333" dy="0.833333"/>
-<feGaussianBlur stdDeviation="0.833333"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.390545 0 0 0 0 0.0477269 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_971_3105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_971_3105" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_971_3105" x1="27.5" y1="11.5" x2="6.5" y2="23" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFAF13"/>
-<stop offset="1" stop-color="#EC9107"/>
-</linearGradient>
-<linearGradient id="paint1_linear_971_3105" x1="8.42857" y1="8.69877" x2="22.9273" y2="26.2551" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0.5"/>
-</linearGradient>
-<linearGradient id="paint2_linear_971_3105" x1="15.0001" y1="22.8334" x2="15.0001" y2="17.8559" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#FFB45B" stop-opacity="0.7"/>
-</linearGradient>
-<linearGradient id="paint3_linear_971_3105" x1="8.5261" y1="18.528" x2="10.7869" y2="26.064" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0.7"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-</defs>
-</svg>

src/assets/icons/icon-test.svg

@@ -1,14 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.781 9.75193C9.90611 8.75107 10.7569 8 11.7656 8H36.2344C37.2431 8 38.0939 8.75107 38.219 9.75193L41.719 37.7519C41.8682 38.9456 40.9374 40 39.7344 40H8.26555C7.06256 40 6.13179 38.9456 6.281 37.7519L9.781 9.75193Z" fill="url(#paint0_linear_1_257)" stroke="url(#paint1_linear_1_257)" stroke-width="4" stroke-linejoin="round"/>
-<path d="M15 18C15 18 17 22 24 22C31 22 33 18 33 18" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear_1_257" x1="7.98947" y1="37.7143" x2="40.4488" y2="36.253" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2A67F8"/>
-<stop offset="1" stop-color="#4892FF"/>
-</linearGradient>
-<linearGradient id="paint1_linear_1_257" x1="7.98947" y1="37.7143" x2="40.4488" y2="36.253" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2A67F8"/>
-<stop offset="1" stop-color="#4892FF"/>
-</linearGradient>
-</defs>
-</svg>

src/assets/svgs/icon-source.svg

@@ -1,45 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="15" cy="15" r="15" fill="url(#paint0_linear_971_3105)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 22C19.1421 22 22.5 18.6421 22.5 14.5C22.5 10.3579 19.1421 7 15 7C10.8579 7 7.5 10.3579 7.5 14.5C7.5 18.6421 10.8579 22 15 22ZM15 10.3333C15.4602 10.3333 15.8333 9.96024 15.8333 9.5C15.8333 9.03976 15.4602 8.66667 15 8.66667C14.5398 8.66667 14.1667 9.03976 14.1667 9.5C14.1667 9.96024 14.5398 10.3333 15 10.3333ZM12.5 10.3333C12.5 10.7936 12.1269 11.1667 11.6667 11.1667C11.2064 11.1667 10.8333 10.7936 10.8333 10.3333C10.8333 9.8731 11.2064 9.5 11.6667 9.5C12.1269 9.5 12.5 9.8731 12.5 10.3333ZM10 13.6667C10.4602 13.6667 10.8333 13.2936 10.8333 12.8333C10.8333 12.3731 10.4602 12 10 12C9.53976 12 9.16667 12.3731 9.16667 12.8333C9.16667 13.2936 9.53976 13.6667 10 13.6667ZM20.8333 12.8333C20.8333 13.2936 20.4602 13.6667 20 13.6667C19.5398 13.6667 19.1667 13.2936 19.1667 12.8333C19.1667 12.3731 19.5398 12 20 12C20.4602 12 20.8333 12.3731 20.8333 12.8333ZM18.4905 9.44382C18.3006 9.307 18.0369 9.34167 17.8888 9.52295L14.3491 13.8547C14.0632 14.2046 14.1314 14.723 14.498 14.9871C14.8646 15.2511 15.3779 15.1515 15.6191 14.7695L18.6061 10.0396C18.7311 9.84169 18.6805 9.58065 18.4905 9.44382Z" fill="url(#paint1_linear_971_3105)"/>
-<g filter="url(#filter0_b_971_3105)">
-<rect x="6.66675" y="17.8334" width="16.6667" height="5" rx="1.66667" fill="url(#paint2_linear_971_3105)" fill-opacity="0.4"/>
-<rect x="6.87508" y="18.0417" width="16.25" height="4.58333" rx="1.45833" stroke="url(#paint3_linear_971_3105)" stroke-width="0.416667"/>
-</g>
-<g filter="url(#filter1_d_971_3105)">
-<path d="M13.3333 20.3334H16.6666" stroke="white" stroke-width="0.833333" stroke-linecap="round"/>
-</g>
-<defs>
-<filter id="filter0_b_971_3105" x="3.33341" y="14.5" width="23.3334" height="11.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.66667"/>
-<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_971_3105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_971_3105" result="shape"/>
-</filter>
-<filter id="filter1_d_971_3105" x="12.0832" y="19.0834" width="7.50008" height="4.16668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="0.833333" dy="0.833333"/>
-<feGaussianBlur stdDeviation="0.833333"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.390545 0 0 0 0 0.0477269 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_971_3105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_971_3105" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_971_3105" x1="27.5" y1="11.5" x2="6.5" y2="23" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFAF13"/>
-<stop offset="1" stop-color="#EC9107"/>
-</linearGradient>
-<linearGradient id="paint1_linear_971_3105" x1="8.42857" y1="8.69877" x2="22.9273" y2="26.2551" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0.5"/>
-</linearGradient>
-<linearGradient id="paint2_linear_971_3105" x1="15.0001" y1="22.8334" x2="15.0001" y2="17.8559" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#FFB45B" stop-opacity="0.7"/>
-</linearGradient>
-<linearGradient id="paint3_linear_971_3105" x1="8.5261" y1="18.528" x2="10.7869" y2="26.064" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0.7"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-</defs>
-</svg>

src/assets/svgs/menu-control.svg

@@ -1,45 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="15" cy="15" r="15" fill="url(#paint0_linear_971_3105)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 22C19.1421 22 22.5 18.6421 22.5 14.5C22.5 10.3579 19.1421 7 15 7C10.8579 7 7.5 10.3579 7.5 14.5C7.5 18.6421 10.8579 22 15 22ZM15 10.3333C15.4602 10.3333 15.8333 9.96024 15.8333 9.5C15.8333 9.03976 15.4602 8.66667 15 8.66667C14.5398 8.66667 14.1667 9.03976 14.1667 9.5C14.1667 9.96024 14.5398 10.3333 15 10.3333ZM12.5 10.3333C12.5 10.7936 12.1269 11.1667 11.6667 11.1667C11.2064 11.1667 10.8333 10.7936 10.8333 10.3333C10.8333 9.8731 11.2064 9.5 11.6667 9.5C12.1269 9.5 12.5 9.8731 12.5 10.3333ZM10 13.6667C10.4602 13.6667 10.8333 13.2936 10.8333 12.8333C10.8333 12.3731 10.4602 12 10 12C9.53976 12 9.16667 12.3731 9.16667 12.8333C9.16667 13.2936 9.53976 13.6667 10 13.6667ZM20.8333 12.8333C20.8333 13.2936 20.4602 13.6667 20 13.6667C19.5398 13.6667 19.1667 13.2936 19.1667 12.8333C19.1667 12.3731 19.5398 12 20 12C20.4602 12 20.8333 12.3731 20.8333 12.8333ZM18.4905 9.44382C18.3006 9.307 18.0369 9.34167 17.8888 9.52295L14.3491 13.8547C14.0632 14.2046 14.1314 14.723 14.498 14.9871C14.8646 15.2511 15.3779 15.1515 15.6191 14.7695L18.6061 10.0396C18.7311 9.84169 18.6805 9.58065 18.4905 9.44382Z" fill="url(#paint1_linear_971_3105)"/>
-<g filter="url(#filter0_b_971_3105)">
-<rect x="6.66675" y="17.8334" width="16.6667" height="5" rx="1.66667" fill="url(#paint2_linear_971_3105)" fill-opacity="0.4"/>
-<rect x="6.87508" y="18.0417" width="16.25" height="4.58333" rx="1.45833" stroke="url(#paint3_linear_971_3105)" stroke-width="0.416667"/>
-</g>
-<g filter="url(#filter1_d_971_3105)">
-<path d="M13.3333 20.3334H16.6666" stroke="white" stroke-width="0.833333" stroke-linecap="round"/>
-</g>
-<defs>
-<filter id="filter0_b_971_3105" x="3.33341" y="14.5" width="23.3334" height="11.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.66667"/>
-<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_971_3105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_971_3105" result="shape"/>
-</filter>
-<filter id="filter1_d_971_3105" x="12.0832" y="19.0834" width="7.50008" height="4.16668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="0.833333" dy="0.833333"/>
-<feGaussianBlur stdDeviation="0.833333"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.390545 0 0 0 0 0.0477269 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_971_3105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_971_3105" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_971_3105" x1="27.5" y1="11.5" x2="6.5" y2="23" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFAF13"/>
-<stop offset="1" stop-color="#EC9107"/>
-</linearGradient>
-<linearGradient id="paint1_linear_971_3105" x1="8.42857" y1="8.69877" x2="22.9273" y2="26.2551" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0.5"/>
-</linearGradient>
-<linearGradient id="paint2_linear_971_3105" x1="15.0001" y1="22.8334" x2="15.0001" y2="17.8559" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#FFB45B" stop-opacity="0.7"/>
-</linearGradient>
-<linearGradient id="paint3_linear_971_3105" x1="8.5261" y1="18.528" x2="10.7869" y2="26.064" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0.7"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-</defs>
-</svg>

src/assets/svgs/menu/analyse-notice-active.svg

@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.8335 10.4167C5.8335 8.1155 7.699 6.25 10.0002 6.25C12.3013 6.25 14.1668 8.1155 14.1668 10.4167V17.0833H5.8335V10.4167Z" fill="#1A2029" stroke="#1A2029" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M10 2.08334V3.33334" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9549 3.88675L14.1514 4.84432" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5909 8.45303L16.3599 8.67012" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.40869 8.45309L3.6397 8.67014" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.04541 3.88669L5.84891 4.84426" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 17.0833H17.9167" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/svgs/menu/analyse-order-active.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 6L13.4641 8V12L10 14L6.5359 12V8L10 6Z" fill="#1A2029"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 18C11.2269 18 13.3247 16.4 13.3247 10C13.3247 3.6 11.2269 2 9.99998 2C8.77312 2 6.67529 3.70782 6.67529 10C6.67529 16.2922 8.77312 18 9.99998 18Z" stroke="#1A2029" stroke-width="1.18857" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.80152 14.1902C3.41497 15.2616 5.90352 16.2554 11.662 12.903C17.4205 9.55061 17.8113 6.88063 17.1978 5.80927C16.5844 4.73792 13.9988 3.80058 8.33735 7.09651C2.67583 10.3924 2.18809 13.1189 2.80152 14.1902Z" stroke="#1A2029" stroke-width="1.18857" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.80256 5.80927C2.18912 6.88063 2.57985 9.55061 8.33838 12.903C14.0969 16.2554 16.5854 15.2616 17.1988 14.1902C17.8123 13.1189 17.3246 10.3924 11.663 7.09651C6.00154 3.80058 3.41601 4.73792 2.80256 5.80927Z" stroke="#1A2029" stroke-width="1.18857" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/svgs/menu/analyse-pymol-active.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.49023 12.5L7.50778 6.26607V1.66666H12.5117V6.26607L15.519 12.5" stroke="#1A2029" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M3.24784 18.1971C2.56997 17.869 2.28645 17.0534 2.61457 16.3755L4.49058 12.5C4.49058 12.5 7.50024 14.5833 10.0002 12.5C12.5002 10.4167 15.5194 12.5 15.5194 12.5L17.3899 16.3772C17.479 16.562 17.5253 16.7645 17.5253 16.9697C17.5253 17.7228 16.9148 18.3333 16.1617 18.3333H3.84197C3.63619 18.3333 3.43307 18.2867 3.24784 18.1971Z" fill="#1A2029" stroke="#1A2029" stroke-width="1.3" stroke-linejoin="round"/>
+</svg>

src/assets/svgs/menu/analyse-water-active.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.3333C13.4518 18.3333 16.25 15.5351 16.25 12.0833C16.25 6.24999 10 1.66666 10 1.66666C10 1.66666 3.75 6.24999 3.75 12.0833C3.75 15.5351 6.54821 18.3333 10 18.3333Z" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 12.0834C3.75 15.5352 6.54821 18.3334 10 18.3334C13.4518 18.3334 16.25 15.5352 16.25 12.0834C16.25 12.0834 12.5 13.3334 10 12.0834C7.5 10.8334 3.75 12.0834 3.75 12.0834Z" fill="#1A2029" stroke="#1A2029" stroke-width="0.833333" stroke-linejoin="round"/>
+</svg>

src/assets/svgs/menu/warn-tips.svg

@@ -0,0 +1,12 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_971_5490)">
+<path d="M11.3577 8.21838C11.0507 8.92755 10.6355 9.54368 10.1123 10.0668C9.5892 10.59 8.97503 11.0053 8.2703 11.3121C7.5654 11.6193 6.81079 11.7727 6.00645 11.7727C5.20231 11.7727 4.44556 11.6193 3.73621 11.3121C3.02704 11.0053 2.41092 10.59 1.88784 10.0668C1.36458 9.54366 0.949269 8.92755 0.642455 8.21838C0.335282 7.50905 0.181875 6.7523 0.181875 5.94814C0.181875 5.1438 0.335282 4.38919 0.642455 3.68429C0.949269 2.97957 1.36458 2.36539 1.88784 1.84232C2.41092 1.31906 3.02704 0.903919 3.73621 0.596933C4.44556 0.289946 5.20231 0.136353 6.00645 0.136353C6.81079 0.136353 7.5654 0.289945 8.2703 0.596933C8.97501 0.903933 9.5892 1.31906 10.1123 1.84232C10.6355 2.36541 11.0507 2.97958 11.3577 3.68429C11.6646 4.38919 11.8182 5.1438 11.8182 5.94814C11.8182 6.7523 11.6647 7.50905 11.3577 8.21838Z" fill="#FF7152"/>
+<path d="M5.99996 8.31116C5.53511 8.31116 5.15859 8.68767 5.15859 9.15252C5.15859 9.61738 5.53511 9.99389 5.99996 9.99389C6.46482 9.99389 6.84133 9.61738 6.84133 9.15252C6.84133 8.68767 6.46482 8.31116 5.99996 8.31116Z" fill="white"/>
+<path d="M5.99996 7.49662C5.76774 7.49662 5.57928 7.10389 5.57928 6.61902L5.15859 2.66983C5.15859 2.18496 5.53511 1.79224 5.99996 1.79224C6.46482 1.79224 6.84133 2.18496 6.84133 2.66983L6.42065 6.61902C6.42065 7.10389 6.23218 7.49662 5.99996 7.49662Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_971_5490">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/Layout/TheMenu.vue

@@ -1,75 +1,73 @@
 <script setup lang="tsx">
-import { defineComponent, h, Component } from 'vue'
-import { NIcon, useMessage, NMenu, MenuProps } from 'naive-ui'
-
-import type { MenuOption } from 'naive-ui'
+import {  h } from 'vue'
+import { NMenu } from 'naive-ui'
 import { RouterLink } from 'vue-router'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 
-import CommunityIcon from '@/components/icons/IconCommunity.vue'
-
-type MenuThemeOverrides = NonNullable<MenuProps['themeOverrides']>
 
-const menuThemeOverrides: MenuThemeOverrides = {
-  // fontSize: '13px'
+function renderIcon(props: {name: string, size?: number, class?: string[], color?: string}) {
+  return () => h(SvgIcon, { ...props })
 }
 
-function renderIcon (name: string, size = 30, color = '#fff') {
-  return () => h(SvgIcon, { name, size, color })
+function renderChildrenIcon({ name, size = 20 }:{ name:string, size?: number }) {
+  return () => (
+    <div class="flex items-center justify-center">
+      { renderIcon({ name, size, class: ['icon-default'] })() }
+      { renderIcon({ name: name + '-active', size, class: ['icon-active', 'hidden'] })() }
+    </div>
+  )
 }
 
-function renderLabel (val) {
-  return <span class="pl-1 test">{val}</span>
+function renderLabel (val: string) {
+  return (<span class="pl-1 test">{ val }</span>);
 }
 
 const menuOptions: MenuOption[] = [
   {
     label: () => renderLabel('智慧总控'),
-    icon: renderIcon("menu-control"),
+    icon: renderIcon({name: 'menu-control'}),
     key: '/'
   },
   {
     label: () => renderLabel('专家问答'),
-    icon: renderIcon("menu-answers"),
+    icon: renderIcon({name: 'menu-answers'}),
     key: '/'
   },
   {
     label: () => renderLabel('智能分析'),
-    icon: renderIcon("menu-analyse"),
+    icon: renderIcon({ name: 'menu-analyse' }),
     key: '/',
-    expandIcon: () => h('span', 123),
     children: [
       {
         label:() =>  renderLabel('水质报警'),
-        key: 'rat',
-        icon: renderIcon("menu-analyse-water", 20, '#1A2029'),
+        icon: renderChildrenIcon({ name: 'menu-analyse-water' }),
+        key: 'key1',
       },
       {
         label: '生化报警',
-        key: 'rat',
-        icon: renderIcon("menu-analyse-pymol", 20, '#1A2029'),
+        icon: renderChildrenIcon({ name: 'menu-analyse-pymol' }),
+        key: 'key2',
       },
       {
         label: '预测报警',
-        key: 'rat',
-        icon: renderIcon("menu-analyse-notice", 20, '#1A2029'),
+        icon: renderChildrenIcon({ name: 'menu-analyse-notice' }),
+        key: 'key3',
       },
       {
         label: '智能工单',
-        key: 'rat',
-        icon: renderIcon("menu-analyse-order", 20, '#1A2029'),
+        icon: renderChildrenIcon({ name: 'menu-analyse-order' }),
+        key: 'key4',
       }
     ]
   },
   {
     label: () => renderLabel('智能助手'),
-    icon: renderIcon("menu-user"),
+    icon: renderIcon({ name: 'menu-user' }),
     key: '/'
   },
-  
   {
     label: () => renderLabel('用户中心'),
-    icon: renderIcon("menu-help"),
+    icon: renderIcon({ name: 'menu-help' }),
     key: '/'
   },
 ]
@@ -83,9 +81,7 @@ const handleUpdateValue = () => {
 <template>
   <n-menu
     :options="menuOptions"
-    :theme-overrides="menuThemeOverrides"
     :icon-size="30"
-    inverted
     @update:value="handleUpdateValue"
   >
   </n-menu>
@@ -96,12 +92,49 @@ const handleUpdateValue = () => {
 </style>
 
 <style lang="scss">
+
+@mixin sub-menu-active {
+  .n-menu-item-content__icon {
+    .icon-default {
+      display: none;
+    }
+    .icon-active {
+      display: block;
+    }
+  }
+  
+  .n-menu-item-content-header {
+    font-weight: bold;
+  }
+
+}
+
 .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
   border: 1px solid #fff;
   background: #FCFDFE;
 }
+
+// 子菜单hover
+.n-submenu-children {
+  .n-menu-item-content:hover {
+    @include sub-menu-active();
+  }
+}
+// reset - 选中状态
+.n-menu-item-content--selected {
+  @include sub-menu-active();
+  &:not(.n-menu-item-content--disabled)::before {
+    border: 1px solid #fff;
+    background: #FCFDFE;
+  }
+}
+
+// reset - 选中状态
+// .n-menu-item-content--selected {
+//   font-weight: bold;
+// }
 // .n-base-icon {
-//   background: url('@/assets/svgs/menu-arrow-bottom.svg') center center no-repeat;
+//   background: url('@/assets/svgs/menu/arrow.svg') center center no-repeat;
 //   svg {
 //     display: none;
 //   }

src/components/SvgIcon/index.vue

@@ -3,13 +3,10 @@
     <svg aria-hidden="true">
       <use :xlink:href="symbolId" />
     </svg>
-    <!-- <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size" >
-      <use :xlink:href="symbolId" />
-    </svg> -->
   </n-icon>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { NIcon } from "naive-ui"
 const props = defineProps({

src/views/answer/AnswerView.vue

@@ -1,15 +1,16 @@
-<script setup lang="ts">
-
+<script setup>
+import SvgIcon from '@/components/SvgIcon';
 import TheMenu from "@/components/Layout/TheMenu.vue";
-
 </script>
 
 <template>
   <div class="viewport">
     <aside class="aside-container w-60 h-full">
       <div class="logo-main py-[14px] px-[20px]">
-        <div class="title flex items-center">
-          <div class="w-[28px] h-[28px] bg-black"></div>
+        <div class="title flex items-center space-x-2">
+          <div class="w-[28px] h-[28px]">
+            <SvgIcon name="common-logo" :size="28"></SvgIcon>
+          </div>
           <span class="block w-[70px] font-[10px]">人工智能运营体智慧决策助手</span>
         </div>
       </div>
@@ -17,26 +18,71 @@ import TheMenu from "@/components/Layout/TheMenu.vue";
       <div class="menu-cotainer">
         <TheMenu></TheMenu>
       </div>
+
+      <div class="warn-container px-[20px]">
+        <dl class="warn-content px-[12px] py-[12px]">
+          <dt class="title h-[20px] mb-[12px] text-[16px]"></dt>
+          <dd class="info">
+            <SvgIcon name="menu-warn-tips"></SvgIcon>
+            <span class="pl-[4px]">您有100个报警信息，请解决</span>
+          </dd>
+          <dd class="info">
+            <SvgIcon name="menu-warn-tips"></SvgIcon>
+            <span class="pl-[4px]">您有100个报警信息，请解决</span>
+          </dd>
+        </dl>
+      </div>
     </aside>
   </div>
 
 </template>
 
 <style scoped lang="scss">
+.warn-container {
+  height: 100px;
 
-  .viewport {
-    width: 100vw;
-    height: 100vh;
-    background: #F2F6FC;
-  }
+  .warn-content {
+    border: 1px solid #fff;
+    border-radius: 6px;
+    background: #FAF5F7;
 
-  .aside-container {
-    border-right: 1px solid #DBE5ED;
-  }
+    .title {
+      background: url("@/assets/images/warn-text.png") left center no-repeat;
+      background-size: 62px 14px;
+    }
+
+    .info {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #333;
+      cursor: pointer;
+
+      &:not(:last-child) {
+        margin-bottom: 10px;
+      }
 
-  .menu-cotainer {
-    // padding: 0 7px;
+      &:hover {
+        color: #5E5E5E;
+      }
+    }
   }
+}
+
+.viewport {
+  @include flex(y, start, start);
+  width: 100vw;
+  height: 100vh;
+  background: #F2F6FC;
+}
+
+.aside-container {
+  border-right: 1px solid #DBE5ED;
+}
+
+.menu-cotainer {
+  // padding: 0 7px;
+}
 
 .logo-main {
   font-family: AlimamaShuHeiTi;

vite.config.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import { createSvgIconsPlugin } from '@digitalacorn/vite-plugin-svg-icons'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import VueDevTools from 'vite-plugin-vue-devtools'
@@ -19,7 +19,9 @@ export default defineConfig({
       
       symbolId: 'icon-[dir]-[name]',
       
-      svgoOptions: true
+      svgoOptions: true,
+
+      replaceStrokeWithCurrentColor: false
     }),
   ],
   resolve: {