feat: menu - 未完成

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^1.6.8",
+    "naive-ui": "^2.38.2",
     "pinia": "^2.1.7",
     "sass": "^1.77.1",
     "sass-loader": "^14.2.1",
@@ -30,6 +31,7 @@
     "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

@@ -4,18 +4,6 @@ import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-    <p class="mr-5 bg-black">hello</p>
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
   <RouterView />
 </template>
 

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

@@ -0,0 +1 @@
+<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

@@ -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.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

@@ -0,0 +1 @@
+<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-menu-control.svg

@@ -0,0 +1,45 @@
+<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-source.svg

@@ -0,0 +1,45 @@
+<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

@@ -0,0 +1,14 @@
+<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/styles/common.scss

@@ -8,9 +8,9 @@
 @font-face {
   font-display: swap;
   font-family: 'AlimamaShuHeiTi';
-  src: url('/fonts/AlimamaShuHeiTi-Bold.woff2') format('woff2'),
-  url('/fonts/AlimamaShuHeiTi-Bold.woff') format('woff'),
-  url('/fonts/AlimamaShuHeiTi-Bold.ttf') format('ttf');
+  src: url('@/assets/font/AlimamaShuHeiTi-Bold.woff2') format('woff2'),
+  url('@/assets/font/AlimamaShuHeiTi-Bold.woff') format('woff'),
+  url('@/assets/font/AlimamaShuHeiTi-Bold.ttf') format('ttf');
   font-weight: normal;
   font-style: normal;
 }

src/assets/svgs/icon-source.svg

@@ -0,0 +1,45 @@
+<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.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.83276 10.4167C5.83276 8.1155 7.69826 6.25 9.99943 6.25C12.3006 6.25 14.1661 8.1155 14.1661 10.4167V17.0833H5.83276V10.4167Z" stroke="#1A2029" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M10 2.08362V3.33362" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9549 3.88672L14.1514 4.84429" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5912 8.45261L16.3601 8.66969" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.40942 8.45349L3.64043 8.67053" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.04614 3.88672L5.84964 4.84429" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 17.0836H17.9167" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,5 @@
+<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="M9.99973 18C11.2266 18 13.3245 16.4 13.3245 10C13.3245 3.6 11.2266 2 9.99973 2C8.77288 2 6.67505 3.70782 6.67505 10C6.67505 16.2922 8.77288 18 9.99973 18Z" stroke="#1A2029" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.80177 14.1902C3.41521 15.2616 5.90377 16.2554 11.6623 12.903C17.4208 9.55061 17.8115 6.88063 17.1981 5.80927C16.5846 4.73792 13.9991 3.80058 8.33759 7.09651C2.67607 10.3924 2.18833 13.1189 2.80177 14.1902Z" stroke="#1A2029" stroke-width="1.3" 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.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/svgs/menu-analyse-pymol.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.49048 12.5L7.50802 6.26607V1.66666H12.5119V6.26607L15.5193 12.5" stroke="#1A2029" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M3.2476 18.1971C2.56973 17.869 2.2862 17.0534 2.61433 16.3755L4.49033 12.5C4.49033 12.5 7.5 14.5833 10 12.5C12.5 10.4167 15.5192 12.5 15.5192 12.5L17.3896 16.3772C17.4788 16.562 17.5251 16.7645 17.5251 16.9697C17.5251 17.7228 16.9145 18.3333 16.1615 18.3333H3.84173C3.63594 18.3333 3.43283 18.2867 3.2476 18.1971Z" stroke="#1A2029" stroke-width="1.3" stroke-linejoin="round"/>
+</svg>

src/assets/svgs/menu-analyse-water.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" stroke="#1A2029" stroke-width="1.3" stroke-linejoin="round"/>
+</svg>

src/assets/svgs/menu-analyse.svg

@@ -0,0 +1,60 @@
+<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_970_996)"/>
+<path d="M13.8328 7.54243L9.10864 8.80826C7.05664 9.35809 6.16095 10.9086 6.71051 12.9596L7.97419 17.6757C8.52526 19.7323 10.0762 20.6272 12.1282 20.0774L16.8467 18.8131C18.8987 18.2632 19.7944 16.7128 19.2448 14.6618L17.9796 9.94001C17.4357 7.88752 15.8848 6.9926 13.8328 7.54243Z" fill="url(#paint1_linear_970_996)"/>
+<g filter="url(#filter0_b_970_996)">
+<path d="M19.4631 10H13.8736C11.4458 10 9.99837 11.4467 9.99837 13.8733V19.4533C9.99837 21.8867 11.4458 23.3333 13.8736 23.3333H19.4564C21.8843 23.3333 23.3317 21.8867 23.3317 19.46V13.8733C23.3383 11.4467 21.891 10 19.4631 10Z" fill="white" fill-opacity="0.4"/>
+<path d="M23.1233 13.8728V13.8733V19.46C23.1233 20.6319 22.7747 21.5422 22.1572 22.1593C21.5398 22.7765 20.6289 23.125 19.4564 23.125H13.8736C12.7011 23.125 11.7903 22.7765 11.1729 22.1586C10.5555 21.5407 10.2067 20.6287 10.2067 19.4533V13.8733C10.2067 12.7015 10.5554 11.7912 11.1728 11.174C11.7903 10.5569 12.7011 10.2083 13.8736 10.2083H19.4631C20.6357 10.2083 21.5464 10.5569 22.163 11.1739C22.7795 11.7909 23.1266 12.701 23.1233 13.8728Z" stroke="url(#paint2_linear_970_996)" stroke-width="0.416667"/>
+</g>
+<g filter="url(#filter1_d_970_996)">
+<path d="M13.2478 21.2697C13.5212 21.2697 13.748 21.043 13.748 20.7697V19.3897C13.748 19.1163 13.5212 18.8897 13.2478 18.8897C12.9743 18.8897 12.7475 19.1163 12.7475 19.3897V20.7697C12.7475 21.043 12.9743 21.2697 13.2478 21.2697Z" fill="url(#paint3_linear_970_996)" shape-rendering="crispEdges"/>
+<path d="M16.6628 21.2697C16.9363 21.2697 17.1631 21.043 17.1631 20.7697V18.003C17.1631 17.7297 16.9363 17.503 16.6628 17.503C16.3893 17.503 16.1626 17.7297 16.1626 18.003V20.7697C16.1626 21.043 16.3893 21.2697 16.6628 21.2697Z" fill="url(#paint4_linear_970_996)" shape-rendering="crispEdges"/>
+<path d="M20.0778 21.2697C20.3513 21.2697 20.5781 21.043 20.5781 20.7697V16.623C20.5781 16.3497 20.3513 16.123 20.0778 16.123C19.8044 16.123 19.5776 16.3497 19.5776 16.623V20.7697C19.5776 21.043 19.8044 21.2697 20.0778 21.2697Z" fill="url(#paint5_linear_970_996)" shape-rendering="crispEdges"/>
+<path d="M20.0778 15.0163C20.3513 15.0163 20.5781 14.7897 20.5781 14.5163H20.5848V12.563C20.5848 12.5563 20.5781 12.5497 20.5781 12.543C20.5781 12.503 20.5648 12.4697 20.5581 12.4363C20.5514 12.403 20.5514 12.3763 20.5381 12.3497C20.5314 12.323 20.5114 12.303 20.4914 12.2763C20.4714 12.2497 20.4514 12.223 20.4247 12.1963C20.418 12.1963 20.418 12.1897 20.4113 12.183C20.3913 12.1697 20.3713 12.163 20.3513 12.1497C20.318 12.1297 20.2913 12.1097 20.2579 12.0963C20.2246 12.083 20.1912 12.083 20.1579 12.0763C20.1312 12.0763 20.1112 12.063 20.0845 12.063H18.1302C17.8567 12.063 17.63 12.2897 17.63 12.563C17.63 12.8363 17.8567 13.063 18.1302 13.063H18.964C17.3765 14.7297 15.3755 15.9097 13.1277 16.4697C12.8542 16.5363 12.6942 16.8097 12.7609 17.0763C12.8209 17.303 13.021 17.4563 13.2478 17.4563C13.2878 17.4563 13.3278 17.4563 13.3678 17.443C15.749 16.8497 17.8767 15.6163 19.5776 13.8697V14.5163C19.5776 14.7897 19.8044 15.0163 20.0778 15.0163Z" fill="url(#paint6_linear_970_996)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_b_970_996" x="6.66503" y="6.66667" width="20" height="20" 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_970_996"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_970_996" result="shape"/>
+</filter>
+<filter id="filter1_d_970_996" x="11.9124" y="11.2297" width="11.1723" height="12.54" 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 0.889855 0 0 0 0 0.889855 0 0 0 0 0.889855 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_970_996"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_970_996" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_970_996" x1="27" y1="10.5" x2="4.5" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1FDF8F"/>
+<stop offset="1" stop-color="#1AB7A1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_970_996" x1="6.87291" y1="10.7752" x2="21.2996" y2="21.0462" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_970_996" x1="11.4859" y1="11.8523" x2="22.4382" y2="22.8047" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.7"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint3_linear_970_996" x1="20.4961" y1="12.1463" x2="13.4127" y2="22.563" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+<linearGradient id="paint4_linear_970_996" x1="20.4961" y1="12.1463" x2="13.4127" y2="22.563" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+<linearGradient id="paint5_linear_970_996" x1="20.4961" y1="12.1463" x2="13.4127" y2="22.563" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+<linearGradient id="paint6_linear_970_996" x1="20.4961" y1="12.1463" x2="13.4127" y2="22.563" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/svgs/menu-answers.svg

@@ -0,0 +1,47 @@
+<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_970_1025)"/>
+<path d="M14.5661 7.04512L9.60574 8.37424C7.45114 8.95157 6.51066 10.5796 7.0877 12.7331L8.41457 17.685C8.99319 19.8445 10.6217 20.7842 12.7763 20.2068L17.7307 18.8793C19.8853 18.302 20.8258 16.674 20.2487 14.5204L18.9203 9.56258C18.3492 7.40746 16.7207 6.4678 14.5661 7.04512Z" fill="url(#paint1_linear_970_1025)"/>
+<g filter="url(#filter0_b_970_1025)">
+<path d="M22.2778 9.5H13.3889C12.1593 9.5 11.1667 10.4981 11.1667 11.7289V19.9165C11.1667 21.1473 12.1593 22.1454 13.3889 22.1454H13.9519C14.5444 22.1454 15.1074 22.378 15.5222 22.7983L16.7889 24.0666C17.3667 24.6445 18.3074 24.6445 18.8852 24.0666L20.1519 22.7983C20.5667 22.378 21.137 22.1454 21.7222 22.1454H22.2778C23.5074 22.1454 24.5 21.1473 24.5 19.9165V11.7289C24.5 10.4981 23.5074 9.5 22.2778 9.5Z" fill="url(#paint2_linear_970_1025)" fill-opacity="0.4"/>
+<path d="M13.3889 9.70833H22.2778C23.3916 9.70833 24.2917 10.6124 24.2917 11.7289V19.9165C24.2917 21.033 23.3916 21.9371 22.2778 21.9371H21.7222C21.0827 21.9371 20.4588 22.1911 20.0041 22.6515C20.0039 22.6516 20.0037 22.6518 20.0036 22.652L18.7379 23.9193L18.7378 23.9194C18.2414 24.4158 17.4327 24.4158 16.9363 23.9194L16.9362 23.9193L15.6705 22.652C15.6703 22.6518 15.6702 22.6517 15.6701 22.6515C15.2156 22.1913 14.5992 21.9371 13.9519 21.9371H13.3889C12.2751 21.9371 11.375 21.033 11.375 19.9165V11.7289C11.375 10.6124 12.2751 9.70833 13.3889 9.70833Z" stroke="url(#paint3_linear_970_1025)" stroke-width="0.416667"/>
+</g>
+<g filter="url(#filter1_bd_970_1025)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3333 15.3333C15.3333 15.8856 14.8856 16.3333 14.3333 16.3333C13.781 16.3333 13.3333 15.8856 13.3333 15.3333C13.3333 14.7811 13.781 14.3333 14.3333 14.3333C14.8856 14.3333 15.3333 14.7811 15.3333 15.3333ZM18.6341 15.3333C18.6341 15.8856 18.1864 16.3333 17.6341 16.3333C17.0818 16.3333 16.6341 15.8856 16.6341 15.3333C16.6341 14.7811 17.0818 14.3333 17.6341 14.3333C18.1864 14.3333 18.6341 14.7811 18.6341 15.3333ZM20.9349 16.3333C21.4872 16.3333 21.9349 15.8856 21.9349 15.3333C21.9349 14.7811 21.4872 14.3333 20.9349 14.3333C20.3826 14.3333 19.9349 14.7811 19.9349 15.3333C19.9349 15.8856 20.3826 16.3333 20.9349 16.3333Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_b_970_1025" x="7.83333" y="6.16667" width="20" height="21.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_970_1025"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_970_1025" result="shape"/>
+</filter>
+<filter id="filter1_bd_970_1025" x="10" y="11" width="15.2682" height="8.66667" 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_970_1025"/>
+<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 0.28 0 0 0 0 0.46 0 0 0 0 1 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_970_1025" result="effect2_dropShadow_970_1025"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_970_1025" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_970_1025" x1="1.45833" y1="27.8571" x2="28.9227" y2="26.7417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#201CE2"/>
+<stop offset="1" stop-color="#48BDFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_970_1025" x1="7.25823" y1="10.4395" x2="22.4062" y2="21.2241" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_970_1025" x1="17.8333" y1="24.5" x2="17.8333" y2="9.56749" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5B9BFF" stop-opacity="0.7"/>
+</linearGradient>
+<linearGradient id="paint3_linear_970_1025" x1="12.6541" y1="11.5839" x2="24.8906" y2="22.4607" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.7"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/svgs/menu-arrow-bottom.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.54597 1.08061L4.47877 5.14261C4.42284 5.21667 4.35049 5.27675 4.26741 5.31811C4.18433 5.35948 4.09278 5.38101 3.99997 5.38101C3.90716 5.38101 3.81562 5.35948 3.73254 5.31811C3.64946 5.27675 3.5771 5.21667 3.52117 5.14261L0.453971 1.08121C0.420228 1.03668 0.399587 0.983618 0.394375 0.927994C0.389163 0.872371 0.399586 0.816397 0.424471 0.766378C0.449356 0.716359 0.487713 0.674283 0.535222 0.644888C0.582731 0.615494 0.637504 0.59995 0.693371 0.600006H7.30597C7.36179 0.599922 7.41652 0.615411 7.46401 0.644731C7.51151 0.674052 7.54988 0.71604 7.57482 0.765976C7.59975 0.815911 7.61027 0.871814 7.60517 0.927396C7.60007 0.982979 7.57957 1.03604 7.54597 1.08061Z" fill="#1A2029"/>
+</svg>

src/assets/svgs/menu-control.svg

@@ -0,0 +1,45 @@
+<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/components/Layout/TheMenu.vue

@@ -0,0 +1,109 @@
+<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 { 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 (name: string, size = 30, color = '#fff') {
+  return () => h(SvgIcon, { name, size, color })
+}
+
+function renderLabel (val) {
+  return <span class="pl-1 test">{val}</span>
+}
+
+const menuOptions: MenuOption[] = [
+  {
+    label: () => renderLabel('智慧总控'),
+    icon: renderIcon("menu-control"),
+    key: '/'
+  },
+  {
+    label: () => renderLabel('专家问答'),
+    icon: renderIcon("menu-answers"),
+    key: '/'
+  },
+  {
+    label: () => renderLabel('智能分析'),
+    icon: renderIcon("menu-analyse"),
+    key: '/',
+    expandIcon: () => h('span', 123),
+    children: [
+      {
+        label:() =>  renderLabel('水质报警'),
+        key: 'rat',
+        icon: renderIcon("menu-analyse-water", 20, '#1A2029'),
+      },
+      {
+        label: '生化报警',
+        key: 'rat',
+        icon: renderIcon("menu-analyse-pymol", 20, '#1A2029'),
+      },
+      {
+        label: '预测报警',
+        key: 'rat',
+        icon: renderIcon("menu-analyse-notice", 20, '#1A2029'),
+      },
+      {
+        label: '智能工单',
+        key: 'rat',
+        icon: renderIcon("menu-analyse-order", 20, '#1A2029'),
+      }
+    ]
+  },
+  {
+    label: () => renderLabel('智能助手'),
+    icon: renderIcon("menu-user"),
+    key: '/'
+  },
+  
+  {
+    label: () => renderLabel('用户中心'),
+    icon: renderIcon("menu-help"),
+    key: '/'
+  },
+]
+
+const handleUpdateValue = () => {
+  console.log(123123);
+}
+
+</script>
+
+<template>
+  <n-menu
+    :options="menuOptions"
+    :theme-overrides="menuThemeOverrides"
+    :icon-size="30"
+    inverted
+    @update:value="handleUpdateValue"
+  >
+  </n-menu>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+
+<style lang="scss">
+.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
+  border: 1px solid #fff;
+  background: #FCFDFE;
+}
+// .n-base-icon {
+//   background: url('@/assets/svgs/menu-arrow-bottom.svg') center center no-repeat;
+//   svg {
+//     display: none;
+//   }
+// }
+</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <n-icon :size="size" :color="color">
+    <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>
+import { computed } from 'vue'
+import { NIcon } from "naive-ui"
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon'
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: '#fff'
+  },
+  size: {
+    type: String,
+    default: '1em'
+  }
+})
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`)
+</script>
+
+
+<style>
+.svg-icon {
+  /* color: #fff; */
+}
+</style>
+

src/main.ts

@@ -1,6 +1,7 @@
-import './assets/main.css'
+// import './assets/main.css'
 import './assets/styles/tailwind.css'
 import './assets/styles/index.scss'
+import 'virtual:svg-icons-register'
 
 import { createApp } from 'vue'
 
@@ -8,9 +9,13 @@ import App from './App.vue'
 import router from './router'
 import pinia from './stores'
 
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
 const app = createApp(App)
 
 app.use(pinia)
 app.use(router)
 
+app.component('svg-icon', SvgIcon)
+
 app.mount('#app')

src/router/index.ts

@@ -10,12 +10,12 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/about',
-      name: 'about',
+      path: '/analyse',
+      name: 'analyse',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
+      component: () => import('@/views/answer/AnswerView.vue')
     }
   ]
 })

src/views/answer/AnswerView.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+
+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>
+          <span class="block w-[70px] font-[10px]">人工智能运营体智慧决策助手</span>
+        </div>
+      </div>
+
+      <div class="menu-cotainer">
+        <TheMenu></TheMenu>
+      </div>
+    </aside>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+
+  .viewport {
+    width: 100vw;
+    height: 100vh;
+    background: #F2F6FC;
+  }
+
+  .aside-container {
+    border-right: 1px solid #DBE5ED;
+  }
+
+  .menu-cotainer {
+    // padding: 0 7px;
+  }
+
+.logo-main {
+  font-family: AlimamaShuHeiTi;
+
+  .title {
+    font-size: 10px;
+    line-height: 12px;
+  }
+}
+</style>

vite.config.ts

@@ -1,9 +1,11 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import VueDevTools from 'vite-plugin-vue-devtools'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,11 +13,20 @@ export default defineConfig({
     vue(),
     vueJsx(),
     VueDevTools(),
+    createSvgIconsPlugin({
+
+      iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
+      
+      symbolId: 'icon-[dir]-[name]',
+      
+      svgoOptions: true
+    }),
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
+    },
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
   },
   css: {
     preprocessorOptions: {