完善框架,增加路由

README.md

@@ -1,5 +1,5 @@
 # 管理端
-框架采用vue3+ts+naiveUi+vite6 技术栈
+框架采用vue3+ts+naiveUi+vite6 技术栈，适配方案 flex+百分比
 
 ## 目录结构
 ```

src/assets/global.css

@@ -4,8 +4,10 @@ html,
 body {
   margin: 0;
   padding: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
+  min-width: 70vw;
+  min-height: 50vh;
   overflow: hidden;
 }
 

src/assets/icons/1.svg

@@ -0,0 +1,11 @@
+<svg width="240" height="26" viewBox="0 0 240 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Vector">
+<path d="M176.107 25.4608C172.309 25.4608 169.085 24.2509 166.434 21.8311C163.783 19.4099 162.458 16.4624 162.458 12.9887C162.458 9.51361 163.78 6.56339 166.425 4.13803C169.071 1.71268 172.292 0.5 176.089 0.5C179.887 0.5 183.111 1.7099 185.762 4.12971C188.413 6.55091 189.738 9.49836 189.738 12.9721C189.738 16.4472 188.416 19.3974 185.771 21.8227C183.125 24.2481 179.903 25.4608 176.107 25.4608ZM192.011 25.2528V23.1727C194.663 22.6874 196.842 21.4913 198.547 19.5846C200.252 17.6779 201.105 15.4765 201.105 12.9804C201.105 10.4843 200.252 8.28291 198.547 6.37618C196.842 4.46946 194.663 3.27342 192.011 2.78807V0.708006C195.311 1.19335 198.029 2.5967 200.168 4.91806C202.308 7.23941 203.378 9.92685 203.378 12.9804C203.378 16.0339 202.308 18.7214 200.168 21.0427C198.029 23.3641 195.311 24.7674 192.011 25.2528ZM176.098 23.3807C179.243 23.3807 181.924 22.3663 184.141 20.3376C186.358 18.3088 187.466 15.8564 187.465 12.9804C187.465 10.103 186.356 7.64988 184.139 5.62112C181.921 3.59236 179.241 2.57868 176.098 2.58006C172.953 2.58006 170.272 3.59444 168.055 5.6232C165.838 7.65196 164.73 10.1044 164.731 12.9804C164.731 15.8578 165.84 18.3109 168.057 20.3397C170.274 22.3684 172.955 23.3821 176.098 23.3807Z" fill="#E25319"/>
+<path d="M22.3567 10.9086C29.1085 10.9086 29.7577 16.2431 29.7577 18.0082V18.3612C29.7577 20.3224 29.0652 22.0091 27.7668 23.3819C26.4251 24.794 24.867 25.4608 23.0059 25.4608H1.10593C0.759684 25.4608 0.5 25.2254 0.5 24.8724V21.8522C0.5 21.4991 0.759684 21.2246 1.14921 21.2246H22.3567C24.9968 21.2246 25.17 18.3612 25.1267 17.7336C25.0401 17.1453 24.6073 15.1841 22.5731 15.1841H7.59802C3.65949 15.1841 0.5 12.0461 0.5 8.16296V7.61382C0.5 3.73064 3.65949 0.592711 7.59802 0.592711H29.1085C29.4547 0.592711 29.7577 0.867279 29.7577 1.2203V4.20132C29.7144 4.59357 29.4547 4.86813 29.0652 4.86813H8.24723C6.55929 4.86813 5.21759 6.20175 5.21759 7.88839C5.21759 9.57502 6.55929 10.9086 8.24723 10.9086H22.3567Z" fill="white"/>
+<path d="M60.4569 4.43667C60.4569 4.43667 62.9671 21.303 63.3567 24.7547C63.3999 25.147 63.097 25.4608 62.6642 25.4608H59.2883C58.942 25.4608 58.6391 25.2647 58.5958 24.9901L55.6527 6.16253C55.5229 5.65262 55.1766 5.26037 54.5274 5.26037C53.8782 5.26037 53.532 5.65262 53.4021 6.16253L50.0695 22.7935C49.9397 23.3427 49.4203 23.7349 48.8144 23.7349H45.828C45.2221 23.7349 44.746 23.3427 44.6161 22.7935L41.2403 6.16253C41.1104 5.65262 40.7642 5.26037 40.115 5.26037C39.4657 5.26037 39.1195 5.65262 38.9897 6.16253L37.1286 24.9901C37.0853 25.2647 36.7824 25.4608 36.4361 25.4608H33.1468C32.714 25.4608 32.411 25.147 32.4543 24.7547C32.7573 21.6168 34.1855 4.43667 34.1855 4.43667C34.575 2.2009 36.6958 0.592711 39.2061 0.592711H41.0238C43.5341 0.592711 45.6549 2.2009 46.0444 4.43667L47.1264 11.6931L48.5547 4.43667C48.9875 2.2009 51.1082 0.592711 53.5752 0.592711H55.4363C57.9466 0.592711 60.0673 2.2009 60.4569 4.43667Z" fill="white"/>
+<path d="M98.0917 24.9509C98.2216 25.2254 98.0484 25.5 97.7455 25.5H93.4174C92.9846 25.5 92.5951 25.2254 92.422 24.8332L85.2807 7.73149C84.5882 6.08408 82.9868 4.98581 81.169 4.98581C79.2646 4.98581 77.62 6.08408 76.9275 7.77072L69.9593 24.8332C69.7862 25.2254 69.3967 25.5 68.9639 25.5H64.7656C64.506 25.5 64.3328 25.1862 64.4194 24.9509L73.0322 5.96641C75.0231 1.57331 80.3899 -0.740909 85.3672 1.41642C87.488 2.31857 89.1326 4.12288 90.0415 6.24098L98.0917 24.9509Z" fill="white"/>
+<path d="M122.597 19.2241L128.137 24.794C128.397 25.0293 128.181 25.4608 127.834 25.4608H123.03C122.511 25.4608 121.991 25.2647 121.645 24.9116L115.889 19.4595C115.629 19.1849 115.283 19.0673 114.893 19.028H104.852C104.506 19.028 104.246 19.3026 104.246 19.6164V24.9116C104.246 25.2254 103.943 25.5 103.597 25.5H100.135C99.7885 25.5 99.5288 25.2254 99.5288 24.9116V19.1849C99.5288 16.753 101.693 14.7526 104.419 14.7526H120.953C123.593 14.7526 124.155 11.1832 124.155 9.81037C124.155 6.90779 123.16 4.86813 121.169 4.86813H100.265C99.8317 4.86813 99.5288 4.59357 99.5288 4.20132V1.2203C99.5288 0.867279 99.7885 0.592711 100.135 0.592711H121.602C125.714 0.592711 128.786 4.20132 128.786 9.81037C128.786 12.1638 127.704 17.9298 122.684 18.8711C122.554 18.9496 122.467 19.1065 122.597 19.2241Z" fill="white"/>
+<path d="M137.242 0.553485C137.589 0.553485 137.892 0.828055 137.892 1.18107V4.24055C137.892 4.59357 137.589 4.86813 137.242 4.86813H130.75C130.404 4.86813 130.144 4.59357 130.144 4.24055V1.18107C130.144 0.828055 130.404 0.553485 130.75 0.553485H137.242ZM158.753 0.553485C159.099 0.553485 159.402 0.828055 159.402 1.18107V4.24055C159.402 4.59357 159.099 4.86813 158.796 4.86813H147.889C147.543 4.86813 147.284 5.1427 147.284 5.4565V24.8724C147.284 25.1862 146.981 25.4608 146.678 25.4608H143.215C142.869 25.4608 142.609 25.1862 142.609 24.8724V5.2996C142.609 2.67159 144.903 0.553485 147.803 0.553485H158.753Z" fill="white"/>
+<path d="M238.894 0.592711C239.197 0.592711 239.5 0.828055 239.5 1.18107V20.0871C239.5 23.0681 237.033 25.4608 234.003 25.4608H232.575C229.762 25.4608 227.208 23.931 225.91 21.4991L217.6 5.77029C217.427 5.45649 217.081 5.22115 216.691 5.22115H216.215C215.523 5.22115 214.96 5.80951 214.96 6.51555V24.8724C214.96 25.2254 214.657 25.4608 214.311 25.4608H210.848C210.502 25.4608 210.242 25.2254 210.242 24.8724V5.96641C210.242 2.98538 212.666 0.592711 215.696 0.592711H216.951C219.504 0.592711 221.885 1.96555 223.097 4.20132L231.753 19.9694C231.926 20.3224 232.272 20.5185 232.662 20.5185L233.484 20.4793C234.22 20.4793 234.782 19.9302 234.782 19.2241V1.18107C234.782 0.828055 235.042 0.592711 235.388 0.592711H238.894Z" fill="white"/>
+</g>
+</svg>

src/assets/icons/2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745204951948" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3717" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M810.666667 191.616a106.666667 106.666667 0 0 1-128.512 104.448l-54.613334 90.325333A170.24 170.24 0 0 1 682.666667 514.474667l55.296 11.136a106.666667 106.666667 0 1 1-11.904 62.890666l-56.277334-11.306666a171.306667 171.306667 0 0 1-74.410666 83.754666l21.12 64.512h2.176a106.666667 106.666667 0 1 1-62.805334 20.394667l-21.205333-64.682667a170.410667 170.410667 0 0 1-160.085333-67.925333l-76.544 36.138667a106.666667 106.666667 0 1 1-25.941334-58.538667l74.837334-35.328a170.965333 170.965333 0 0 1 33.450666-152.192l-42.282666-48.213333a106.666667 106.666667 0 1 1 49.664-40.448l41.898666 47.786666A169.898667 169.898667 0 0 1 512 341.333333c21.546667 0 42.197333 4.010667 61.184 11.306667l53.12-87.893333A106.666667 106.666667 0 1 1 810.666667 191.658667z m-64 0a42.666667 42.666667 0 1 0-85.333334 0 42.666667 42.666667 0 0 0 85.333334 0zM298.666667 298.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m213.333333 320a106.666667 106.666667 0 1 0 0-213.333334 106.666667 106.666667 0 0 0 0 213.333334z m-277.333333 42.666666a42.666667 42.666667 0 1 0-85.333334 0 42.666667 42.666667 0 0 0 85.333334 0z m426.666666 170.752a42.666667 42.666667 0 1 0-85.333333 0 42.666667 42.666667 0 0 0 85.333333 0z m170.666667-213.418666a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" p-id="3718" data-spm-anchor-id="a313x.search_index.0.i6.67303a81ubRvGX" class="selected" fill="#0FCEA0"></path></svg>

src/assets/icons/4.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="squares-filled">
+<path id="Vector" d="M7.33317 13.2917L13.2842 7.34068M12.3712 18.337L18.3332 12.375M7.87034 17.7962L17.7951 7.87141M14.6665 7.33329V5.49996C14.6665 5.01373 14.4733 4.54741 14.1295 4.2036C13.7857 3.85978 13.3194 3.66663 12.8332 3.66663H5.49984C5.01361 3.66663 4.54729 3.85978 4.20347 4.2036C3.85966 4.54741 3.6665 5.01373 3.6665 5.49996V12.8333C3.6665 13.3195 3.85966 13.7858 4.20347 14.1297C4.54729 14.4735 5.01361 14.6666 5.49984 14.6666H7.33317M9.1665 7.33329H16.4998C17.5124 7.33329 18.3332 8.1541 18.3332 9.16663V16.5C18.3332 17.5125 17.5124 18.3333 16.4998 18.3333H9.1665C8.15398 18.3333 7.33317 17.5125 7.33317 16.5V9.16663C7.33317 8.1541 8.15398 7.33329 9.1665 7.33329Z" stroke="#D9DFE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/icons/5.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="devices">
+<path id="Vector" d="M16.5 7.33329V4.58329C16.5 4.34018 16.4034 4.10702 16.2315 3.93511C16.0596 3.7632 15.8264 3.66663 15.5833 3.66663H3.66667C3.42355 3.66663 3.19039 3.7632 3.01849 3.93511C2.84658 4.10702 2.75 4.34018 2.75 4.58329V15.5833C2.75 15.8264 2.84658 16.0596 3.01849 16.2315C3.19039 16.4034 3.42355 16.5 3.66667 16.5H11.9167M14.6667 8.24996H16.5M12.8333 7.33329H18.3333C18.8396 7.33329 19.25 7.7437 19.25 8.24996V17.4166C19.25 17.9229 18.8396 18.3333 18.3333 18.3333H12.8333C12.3271 18.3333 11.9167 17.9229 11.9167 17.4166V8.24996C11.9167 7.7437 12.3271 7.33329 12.8333 7.33329Z" stroke="#D9DFE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/icons/6.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="users">
+<path id="Vector" d="M2.75 19.25V17.4167C2.75 16.4442 3.13631 15.5116 3.82394 14.8239C4.51158 14.1363 5.44421 13.75 6.41667 13.75H10.0833C11.0558 13.75 11.9884 14.1363 12.6761 14.8239C13.3637 15.5116 13.75 16.4442 13.75 17.4167V19.25M14.6667 2.86917C15.4554 3.07111 16.1545 3.52981 16.6537 4.17296C17.1529 4.8161 17.4239 5.6071 17.4239 6.42125C17.4239 7.23541 17.1529 8.02641 16.6537 8.66955C16.1545 9.31269 15.4554 9.7714 14.6667 9.97334M19.25 19.25V17.4167C19.2453 16.6074 18.9731 15.8224 18.4757 15.1841C17.9782 14.5457 17.2836 14.0898 16.5 13.8875M11.9167 6.41667C11.9167 8.44171 10.275 10.0833 8.25 10.0833C6.22496 10.0833 4.58333 8.44171 4.58333 6.41667C4.58333 4.39162 6.22496 2.75 8.25 2.75C10.275 2.75 11.9167 4.39162 11.9167 6.41667Z" stroke="#D9DFE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/icons/7.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chart-dots-2">
+<path id="Vector" d="M2.75 2.75V19.25H19.25M19.25 2.75L13.75 4.125M12.937 6.09583L15.477 9.48292M14.6667 11.4583L10.0833 13.2917M10.0833 13.75C10.0833 14.7625 9.26252 15.5833 8.25 15.5833C7.23748 15.5833 6.41667 14.7625 6.41667 13.75C6.41667 12.7375 7.23748 11.9167 8.25 11.9167C9.26252 11.9167 10.0833 12.7375 10.0833 13.75ZM13.75 4.58333C13.75 5.59586 12.9292 6.41667 11.9167 6.41667C10.9041 6.41667 10.0833 5.59586 10.0833 4.58333C10.0833 3.57081 10.9041 2.75 11.9167 2.75C12.9292 2.75 13.75 3.57081 13.75 4.58333ZM18.3333 11C18.3333 12.0125 17.5125 12.8333 16.5 12.8333C15.4875 12.8333 14.6667 12.0125 14.6667 11C14.6667 9.98748 15.4875 9.16667 16.5 9.16667C17.5125 9.16667 18.3333 9.98748 18.3333 11Z" stroke="#D9DFE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/icons/8.svg

@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="user-circle">
+<path id="Vector" d="M6 16.9954C6.19095 16.3701 6.58167 15.8219 7.1142 15.4323C7.64673 15.0427 9.2927 14.8324 9.95628 14.8326H13.0422C13.7066 14.8323 15.3534 15.0432 15.8863 15.4337C16.4192 15.8242 16.8098 16.3735 17 17M13.8137 10.2775C13.8137 11.5354 12.7775 12.555 11.4993 12.555C10.221 12.555 9.18483 11.5354 9.18483 10.2775C9.18483 9.01968 10.221 8 11.4993 8C12.7775 8 13.8137 9.01968 13.8137 10.2775Z" stroke="#D9DFE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M2.94365 9.65889C1.36205 8.42218 2.50806 5.89427 4.48053 6.26877C4.77681 6.32511 5.08221 6.31069 5.37187 6.2267C5.66153 6.1427 5.92726 5.9915 6.14744 5.7854C6.36762 5.57929 6.53602 5.32411 6.63894 5.04063C6.74186 4.75714 6.77639 4.45336 6.73972 4.154C6.49634 2.16128 9.09414 1.1833 10.2254 2.8429C10.3951 3.09197 10.6212 3.29749 10.8852 3.44274C11.1493 3.58799 11.4439 3.66888 11.7451 3.67884C12.0464 3.6888 12.3457 3.62755 12.6188 3.50005C12.8919 3.37256 13.131 3.18243 13.3168 2.94511C14.5535 1.36352 17.0814 2.50953 16.7069 4.48199C16.6506 4.77828 16.665 5.08368 16.749 5.37334C16.833 5.66299 16.9842 5.92873 17.1903 6.14891C17.3964 6.36909 17.6516 6.53749 17.935 6.64041C18.2185 6.74333 18.5223 6.77785 18.8217 6.74118C20.8144 6.49781 21.7924 9.09561 20.1328 10.2269C19.8837 10.3966 19.6782 10.6226 19.5329 10.8867C19.3877 11.1508 19.3068 11.4454 19.2968 11.7466C19.2869 12.0478 19.3481 12.3471 19.4756 12.6202C19.6031 12.8933 19.7932 13.1325 20.0306 13.3183C21.6122 14.555 20.4661 17.0829 18.4937 16.7084C18.1974 16.652 17.892 16.6664 17.6023 16.7504C17.3127 16.8344 17.0469 16.9856 16.8268 17.1917C16.6066 17.3978 16.4382 17.653 16.3353 17.9365C16.2323 18.22 16.1978 18.5238 16.2345 18.8231C16.4779 20.8159 13.8801 21.7938 12.7488 20.1342C12.5791 19.8852 12.353 19.6797 12.089 19.5344C11.8249 19.3891 11.5303 19.3083 11.2291 19.2983C10.9278 19.2883 10.6285 19.3496 10.3554 19.4771C10.0824 19.6046 9.8432 19.7947 9.65742 20.032C8.42072 21.6136 5.8928 20.4676 6.2673 18.4951C6.32364 18.1989 6.30923 17.8935 6.22523 17.6038C6.14124 17.3141 5.99003 17.0484 5.78393 16.8282C5.57783 16.6081 5.32265 16.4396 5.03916 16.3367C4.75567 16.2338 4.45189 16.1993 4.15254 16.236C2.15981 16.4793 1.18184 13.8815 2.84144 12.7503C3.91549 12.0172 3.96562 10.4589 2.94365 9.65889Z" stroke="#D9DFE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/icons/9.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon/logout">
+<path id="Vector" d="M12.8333 7.33335V5.50002C12.8333 5.01379 12.6402 4.54747 12.2964 4.20366C11.9525 3.85984 11.4862 3.66669 11 3.66669H4.58333C4.0971 3.66669 3.63079 3.85984 3.28697 4.20366C2.94315 4.54747 2.75 5.01379 2.75 5.50002V16.5C2.75 16.9863 2.94315 17.4526 3.28697 17.7964C3.63079 18.1402 4.0971 18.3334 4.58333 18.3334H11C11.4862 18.3334 11.9525 18.1402 12.2964 17.7964C12.6402 17.4526 12.8333 16.9863 12.8333 16.5V14.6667M6.41667 11H19.25M19.25 11L16.5 8.25002M19.25 11L16.5 13.75" stroke="#B3BECD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/main.ts

@@ -2,7 +2,9 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import naive from '@/assets/native-plugin'
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import {
+  createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw
+} from 'vue-router'
 import Icon from '@/components/icon.vue'
 import 'virtual:svg-icons-register'
 import piniaPersist from 'pinia-plugin-persist'
@@ -16,7 +18,7 @@ routes.push({ path: '/:path(.*)', redirect: '/' })
 
 const app = createApp(App)
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes
 })
 app.component('Icon', Icon)

src/pages/device/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>device</div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped>
+
+</style>

src/pages/device/route.ts

@@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router'
+import index from '../index.vue'
+
+export default {
+  path: '/device',
+  meta: {
+    authorize: true
+  },
+  component: index,
+  redirect: 'device',
+  children: [
+    {
+      path: '',
+      name: 'device',
+      component: () => import('./index.vue')
+    }
+  ]
+} as RouteRecordRaw

src/pages/home/index.vue

@@ -1,99 +0,0 @@
-<template>
-  <n-layout has-sider>
-    <n-layout-sider
-      bordered
-      show-trigger
-      collapse-mode="width"
-      :collapsed-width="64"
-      :width="240"
-      :native-scrollbar="false"
-    >
-      <n-menu
-        :collapsed-width="64"
-        :collapsed-icon-size="22"
-        :options="menuOptions"
-      />
-    </n-layout-sider>
-    <n-layout>
-      123
-    </n-layout>
-  </n-layout>
-</template>
-<script setup lang="ts">
-import NetService from '@/services/net.service'
-const menuOptions = [
-  {
-    label: '且听风吟',
-    key: 'hear-the-wind-sing'
-  },
-  {
-    label: '1973年的弹珠玩具',
-    key: 'pinball-1973',
-    disabled: true,
-    children: [
-      {
-        label: '鼠',
-        key: 'rat'
-      }
-    ]
-  },
-  {
-    label: '寻羊冒险记',
-    key: 'a-wild-sheep-chase',
-    disabled: true
-  },
-  {
-    label: '舞，舞，舞',
-    key: 'dance-dance-dance',
-    children: [
-      {
-        type: 'group',
-        label: '人物',
-        key: 'people',
-        children: [
-          {
-            label: '叙事者',
-            key: 'narrator'
-          },
-          {
-            label: '羊男',
-            key: 'sheep-man'
-          }
-        ]
-      },
-      {
-        label: '饮品',
-        key: 'beverage',
-        children: [
-          {
-            label: '威士忌',
-            key: 'whisky'
-          }
-        ]
-      },
-      {
-        label: '食物',
-        key: 'food',
-        children: [
-          {
-            label: '三明治',
-            key: 'sandwich'
-          }
-        ]
-      },
-      {
-        label: '过去增多，未来减少',
-        key: 'the-past-increases-the-future-recedes'
-      }
-    ]
-  }
-]
-const netService = new NetService()
-
-netService.get('/sQuoteCenter/realTime.htm?code=JO_71&_=1744857439593').then((res) => {
-  console.log(666, res)
-})
-</script>
-<style lang="scss" scoped>
-
-</style>

src/pages/home/route.ts

@@ -1,10 +0,0 @@
-import { RouteRecordRaw } from 'vue-router'
-import home from './index.vue'
-
-export default {
-  path: '/home',
-  meta: {
-    authorize: true
-  },
-  component: home
-} as RouteRecordRaw

src/pages/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <n-layout has-sider>
+    <n-layout-sider
+      v-model:collapsed="isTrigger"
+      bordered
+      show-trigger
+      collapse-mode="width"
+      width="216"
+      :native-scrollbar="false"
+    >
+      <n-menu
+        accordion
+        :collapsed-icon-size="24"
+        :options="menuOptions"
+      />
+    </n-layout-sider>
+    <n-layout>
+      <router-view />
+    </n-layout>
+  </n-layout>
+</template>
+<script setup lang="ts">
+import { h, ref } from 'vue'
+import Icon from '@/components/icon.vue'
+import { RouterLink } from 'vue-router'
+
+const isTrigger = ref(false)
+const menuOptions = [
+  {
+    label: () => h('img', {
+      src: new URL('@/assets/icons/1.svg', import.meta.url).href,
+      width: '100%',
+      height: '100%'
+    }),
+    icon: () => h(Icon, {
+      name: '2',
+      size: 24
+    }),
+    disabled: true,
+    key: ''
+  },
+  {
+    icon: () => h('img', {
+      src: new URL('@/assets/icons/3.svg', import.meta.url).href,
+      width: (isTrigger.value ? '24px' : '60px'),
+      height: (isTrigger.value ? '24px' : '60px'),
+      style: {
+        transition: '0.2s'
+      }
+    }),
+    label: () => h('div', {
+      style: {
+        margin: '0 0 0 15px'
+      }
+    }, [
+      h('p', {
+        style: {
+          margin: 0
+        }
+      }, { default: () => '欢迎回家' }),
+      h('p', {
+        style: {
+          margin: 0
+        }
+      }, { default: () => '捷克' })
+    ]),
+    disabled: true,
+    key: ''
+  },
+  {
+    label: () => h(RouterLink, { to: { path: '/room' } }, { default: () => '房间' }),
+    key: 'room',
+    icon: () => h(Icon, { name: '4', size: 24 })
+  },
+  {
+    label: () => h(RouterLink, { to: { path: '/device' } }, { default: () => '设备' }),
+    key: 'device',
+    icon: () => h(Icon, { name: '5', size: 24 })
+  },
+  {
+    label: () => h(RouterLink, { to: { path: '/person' } }, { default: () => '成员' }),
+    key: 'person',
+    icon: () => h(Icon, { name: '6', size: 24 })
+  },
+  {
+    label: () => h(RouterLink, { to: { path: '/static' } }, { default: () => '统计' }),
+    key: 'static',
+    icon: () => h(Icon, { name: '7', size: 24 })
+  },
+  {
+    label: () => h(RouterLink, { to: { path: '/seting' } }, { default: () => '设置' }),
+    key: 'seting',
+    icon: () => h(Icon, { name: '8', size: 24 })
+  },
+  {
+    label: () => h(RouterLink, { to: { path: '/' } }, { default: () => '退出' }),
+    key: 'logout',
+    icon: () => h(Icon, { name: '9', size: 24 })
+  }
+]
+
+</script>
+<style lang="scss" scoped>
+:deep(.n-menu) {
+  --n-item-height: 40px;
+  height: 100%;
+  padding: 0;
+
+  .n-menu-item-content {
+    padding-right: 32px;
+  }
+
+  &>div {
+    &:first-child {
+      margin: 0;
+      --n-item-height: 80px;
+
+      &>div {
+        height: 80px;
+        position: relative;
+        opacity: 1;
+
+        &::after {
+          content: '';
+          width: 80%;
+          height: 2px;
+          background: var(--n-border-color);
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, 0);
+          bottom: 0;
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      --n-item-height: 80px;
+      margin: 20px 0 60px 0;
+
+      &>div {
+        opacity: 1;
+      }
+    }
+
+  }
+
+}
+</style>

src/pages/person/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>person</div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped>
+
+</style>

src/pages/person/route.ts

@@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router'
+import index from '../index.vue'
+
+export default {
+  path: '/person',
+  meta: {
+    authorize: true
+  },
+  component: index,
+  redirect: 'person',
+  children: [
+    {
+      path: '',
+      name: 'person',
+      component: () => import('./index.vue')
+    }
+  ]
+} as RouteRecordRaw

src/pages/room/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>room</div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped>
+
+</style>

src/pages/room/route.ts

@@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router'
+import index from '../index.vue'
+
+export default {
+  path: '/room',
+  meta: {
+    authorize: true
+  },
+  component: index,
+  redirect: 'room',
+  children: [
+    {
+      path: '',
+      name: 'room',
+      component: () => import('./index.vue')
+    }
+  ]
+} as RouteRecordRaw

src/pages/seting/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>seting</div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped>
+
+</style>

src/pages/seting/route.ts

@@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router'
+import index from '../index.vue'
+
+export default {
+  path: '/seting',
+  meta: {
+    authorize: true
+  },
+  component: index,
+  redirect: 'seting',
+  children: [
+    {
+      path: '',
+      name: 'seting',
+      component: () => import('./index.vue')
+    }
+  ]
+} as RouteRecordRaw

src/pages/static/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>static</div>
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped>
+
+</style>

src/pages/static/route.ts

@@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router'
+import index from '../index.vue'
+
+export default {
+  path: '/static',
+  meta: {
+    authorize: true
+  },
+  component: index,
+  redirect: 'static',
+  children: [
+    {
+      path: '',
+      name: 'static',
+      component: () => import('./index.vue')
+    }
+  ]
+} as RouteRecordRaw

src/pages/test/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>3D测试</div>
-</template>

src/pages/test/route.ts

@@ -1,10 +0,0 @@
-import { RouteRecordRaw } from 'vue-router'
-
-export default {
-  path: '/test',
-  meta: {
-    authorize: true
-  },
-  component: () => import('./index.vue'),
-  children: []
-} as RouteRecordRaw