style: 样式调整左侧菜单调整

2024-11-23 18:49:21 +08:00 · 2022-08-17 17:46:49 +08:00 · 2022-08-17 17:46:49 +08:00 · 9bcbe1df05
commit 9bcbe1df05
parent ade1e0cea2
53 changed files with 430 additions and 95 deletions
--- a/.gitignore
+++ b/.gitignore
@ -14,3 +14,4 @@

 # Dependency directories (remove the comment below to include it)
 # vendor/
+/pkg/
--- a/frontend/src/assets/iconfont/iconfont.css
+++ b/frontend/src/assets/iconfont/iconfont.css
@ -1,9 +1,9 @@
@font-face {
  font-family: "panel"; /* Project id 3575356 */
-  src: url('iconfont.woff2?t=1661325242934') format('woff2'),
-       url('iconfont.woff?t=1661325242934') format('woff'),
-       url('iconfont.ttf?t=1661325242934') format('truetype'),
-       url('iconfont.svg?t=1661325242934#panel') format('svg');
+  src: url('iconfont.woff2?t=1662608296116') format('woff2'),
+       url('iconfont.woff?t=1662608296116') format('woff'),
+       url('iconfont.ttf?t=1662608296116') format('truetype'),
+       url('iconfont.svg?t=1662608296116#panel') format('svg');
 }

 .panel {
@ -14,12 +14,56 @@
  -moz-osx-font-smoothing: grayscale;
 }

-.p-arrow-right:before {
-  content: "\e665";
+.p-plan:before {
+  content: "\e746";
+}
+
+.p-database:before {
+  content: "\e754";
+}
+
+.p-rejected-order:before {
+  content: "\e75e";
+}
+
+.p-toolbox:before {
+  content: "\e769";
+}
+
+.p-website:before {
+  content: "\e781";
+}
+
+.p-config:before {
+  content: "\e78e";
+}
+
+.p-appstore1:before {
+  content: "\e792";
+}
+
+.p-log:before {
+  content: "\e793";
+}
+
+.p-host:before {
+  content: "\e7b1";
 }

 .p-home:before {
-  content: "\e615";
+  content: "\e7c6";
+}
+
+.p-appstore:before {
+  content: "\eb65";
+}
+
+.p-docker:before {
+  content: "\e659";
+}
+
+.p-arrow-right:before {
+  content: "\e665";
 }

 .p-terminal:before {
--- a/frontend/src/assets/iconfont/iconfont.js
+++ b/frontend/src/assets/iconfont/iconfont.js
--- a/frontend/src/assets/iconfont/iconfont.svg
+++ b/frontend/src/assets/iconfont/iconfont.svg
@ -14,9 +14,31 @@
    />
      <missing-glyph />
      
-      <glyph glyph-name="arrow-right" unicode="&#58981;" d="M320 10.666667c-8.533333 0-17.066667 4.266667-23.466667 10.666666-12.8 12.8-10.666667 34.133333 2.133334 44.8L654.933333 384 298.666667 701.866667c-12.8 10.666667-14.933333 32-2.133334 44.8 10.666667 12.8 32 14.933333 44.8 2.133333l384-341.333333c6.4-6.4 10.666667-14.933333 10.666667-23.466667 0-8.533333-4.266667-17.066667-10.666667-23.466667l-384-341.333333c-6.4-6.4-12.8-8.533333-21.333333-8.533333z"  horiz-adv-x="1024" />
+      <glyph glyph-name="plan" unicode="&#59206;" d="M234.666667 682.666667h57.706666v-63.978667L234.666667 618.666667v-106.666667h554.666666v106.666667h-55.232v64H789.333333a64 64 0 0 0 64-64v-512a64 64 0 0 0-64-64H234.666667a64 64 0 0 0-64 64V618.666667a64 64 0 0 0 64 64z m554.666666-234.666667H234.666667v-341.333333h554.666666V448z m-384-192v-64h-106.666666v64h106.666666z m160 0v-64h-106.666666v64h106.666666z m160 0v-64h-106.666666v64h106.666666z m-320 128v-64h-106.666666v64h106.666666z m160 0v-64h-106.666666v64h106.666666z m160 0v-64h-106.666666v64h106.666666zM697.728 725.333333v-106.666666h-64.021333V725.333333h64z m-104.170667-42.666666v-64l-160.618666 0.021333V682.666667h160.618666z m-197.013333 42.666666v-106.666666h-64V725.333333h64z"  horiz-adv-x="1024" />
      
-      <glyph glyph-name="home" unicode="&#58901;" d="M952.425495 660.2478590000001L536.893002 889.551637a51.586902 51.586902 0 0 1-49.781361 0L70.54741 660.2478590000001a51.586902 51.586902 0 0 1-25.793451-45.396474v-691.264483a51.586902 51.586902 0 0 1 51.586901-51.586902h210.216625a51.586902 51.586902 0 0 1 51.586902 51.586902V188.48564199999998a51.586902 51.586902 0 0 0 51.586902 51.586902h204.284131a51.586902 51.586902 0 0 0 51.586901-51.586902V-76.41309799999999a51.586902 51.586902 0 0 1 51.586902-51.586902h210.474559a51.586902 51.586902 0 0 1 51.586902 51.586902V614.8513849999999a51.586902 51.586902 0 0 1-26.825189 45.396474z"  horiz-adv-x="1024" />
+      <glyph glyph-name="database" unicode="&#59220;" d="M94.64086164 251.18037332999995l146.54173153-70.34521008 270.97275142-131.24028917 261.3154951 126.60584297 156.27666015 74.85020205a77.6722963 77.6722963 0 0 0-36.35063467-103.12291791l-347.37639939-168.23819378a77.6722963 77.6722963 0 0 0-67.73024237 0L130.91382401 147.92800119000003A77.6722963 77.6722963 0 0 0 94.64086164 251.18037332999995z m834.77005866 162.54222578a77.6722963 77.6722963 0 0 0-36.01405513-103.82196978L545.99457541 141.66243555000005a77.6722963 77.6722963 0 0 0-67.73024236 0L130.91382401 309.90062933A77.6722963 77.6722963 0 0 0 93.08741571 409.63185778l384.73677392-181.46837451 34.33115496-16.62187141 347.3763994 168.23819378-0.18123496 0.0776723 70.06041127 33.83922961zM546.02046578 779.89569422l347.35050904-168.21230341a77.6722963 77.6722963 0 0 0 0-139.81013334l-347.35050904-168.23819378a77.6722963 77.6722963 0 0 0-67.73024237 0L130.91382401 471.87325747a77.6722963 77.6722963 0 0 0 0 139.81013334L478.29022341 779.86980386a77.6722963 77.6722963 0 0 0 67.73024237 0z m-33.86512119-69.90506667l-347.3763994-168.21230341 347.3763994-168.23819378 347.3763994 168.23819378-347.3763994 168.21230341z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="rejected-order" unicode="&#59230;" d="M810.666667 256a64 64 0 0 0 64-64v-128a64 64 0 0 0-64-64h-149.333334a64 64 0 0 0-64 64v128a64 64 0 0 0 64 64h149.333334zM298.666667 704h42.666666v-63.978667L298.666667 640v-533.333333h256v-64H298.666667a64 64 0 0 0-64 64V640a64 64 0 0 0 64 64z m512-512h-149.333334v-128h149.333334v128z m-21.333334-32v-64h-105.898666v64H789.333333zM725.333333 704a64 64 0 0 0 64-64v-341.333333h-64V640h-42.666666V704h42.666666z m-170.666666-341.333333v-64h-192v64h192z m106.666666 128v-64H362.666667v64h298.666666zM576 768a64 64 0 0 0 64-64v-42.666667a64 64 0 0 0-64-64h-128a64 64 0 0 0-64 64V704a64 64 0 0 0 64 64h128z m0-64h-128v-42.666667h128V704z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="toolbox" unicode="&#59241;" d="M261.68888853 611.5555552000001v-68.26666667h-68.26666666v-113.77777706h637.15555626v113.77777706h-68.26666666v68.26666667h68.26666666a68.26666667 68.26666667 0 0 0 68.26666667-68.26666667v-455.1111104a68.26666667 68.26666667 0 0 0-68.26666667-68.26666666H193.42222187a68.26666667 68.26666667 0 0 0-68.26666667 68.26666666V543.28888853a68.26666667 68.26666667 0 0 0 68.26666667 68.26666667h68.26666666z m568.8888896-250.3111104h-204.8v-136.53333333H398.22222187v136.53333333h-204.8v-273.06666667h637.15555626V361.2444448z m-273.06666666 0h-91.02222294v-68.26666667h91.02222294v68.26666667z m91.02222186 409.6a68.26666667 68.26666667 0 0 0 68.26666667-68.26666667v-159.2888896H307.2v159.2888896a68.26666667 68.26666667 0 0 0 68.26666667 68.26666667h273.06666666z m0-68.26666667H375.46666667v-91.02222293h273.06666666v91.02222293z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="website" unicode="&#59265;" d="M854.4 95.10000000000002c0.2 0.3 0.5 0.6 0.7 0.9C920.6 173.89999999999998 960 274.29999999999995 960 384s-39.4 210.1-104.8 288c-0.2 0.3-0.5 0.5-0.7 0.8-1.1 1.3-2.1 2.5-3.2 3.7-0.4 0.5-0.8 0.9-1.2 1.4-1.4 1.6-2.7 3.1-4.1 4.7l-0.1 0.1c-1.5 1.7-3.1 3.4-4.6 5.1l-0.1 0.1c-3.2 3.4-6.4 6.8-9.7 10.1l-0.1 0.1-4.8 4.8-0.3 0.3c-1.5 1.5-3 2.9-4.5 4.3-0.5 0.5-1 1-1.6 1.5-1 1-2 1.9-3 2.8-0.3 0.3-0.7 0.6-1 1C736.4 786.8 629.5 832 512 832s-224.4-45.2-304.3-119.2c-0.3-0.3-0.7-0.6-1-1-1-0.9-2-1.9-3-2.9-0.5-0.5-1-1-1.6-1.5-1.5-1.4-3-2.9-4.5-4.3l-0.3-0.3-4.8-4.8-0.1-0.1c-3.3-3.3-6.5-6.7-9.7-10.1l-0.1-0.1c-1.6-1.7-3.1-3.4-4.6-5.1l-0.1-0.1c-1.4-1.5-2.8-3.1-4.1-4.7-0.4-0.5-0.8-0.9-1.2-1.4-1.1-1.2-2.1-2.5-3.2-3.7-0.2-0.3-0.5-0.5-0.7-0.8C103.4 594.1 64 493.7 64 384s39.4-210.1 104.8-288c0.2-0.3 0.5-0.6 0.7-0.9 1-1.2 2.1-2.5 3.1-3.7 0.4-0.5 0.8-0.9 1.2-1.4 1.4-1.6 2.7-3.1 4.1-4.7 0-0.1 0.1-0.1 0.1-0.2 1.5-1.7 3-3.4 4.6-5l0.1-0.1c3.2-3.4 6.4-6.8 9.6-10.1l0.1-0.1c1.6-1.6 3.1-3.2 4.7-4.7l0.3-0.3c3.3-3.3 6.7-6.5 10.1-9.6 80.1-74 187-119.2 304.5-119.2s224.4 45.2 304.3 119.2c3.4 3.1 6.7 6.3 10 9.6l0.3 0.3c1.6 1.6 3.2 3.1 4.7 4.7l0.1 0.1c3.3 3.3 6.5 6.7 9.6 10.1l0.1 0.1c1.5 1.7 3.1 3.3 4.6 5 0 0.1 0.1 0.1 0.1 0.2 1.4 1.5 2.8 3.1 4.1 4.7 0.4 0.5 0.8 0.9 1.2 1.4 1.2 1.3 2.3 2.5 3.3 3.7z m4.1 142.6c-13.8-32.6-32-62.8-54.2-90.2-24.9 21.5-52.2 40.3-81.5 55.9 11.6 46.9 18.8 98.4 20.7 152.6H887c-3-40.9-12.6-80.6-28.5-118.3zM887 412H743.5c-1.9 54.2-9.1 105.7-20.7 152.6 29.3 15.6 56.6 34.4 81.5 55.9 22.2-27.4 40.4-57.6 54.2-90.2C874.4 492.6 884 452.9 887 412zM658.3 730.5c39.7-16.8 75.8-40 107.6-69.2-18.5-15.8-38.4-29.7-59.4-41.8-15.7 45-35.8 84.1-59.2 115.4 3.7-1.4 7.4-2.9 11-4.4z m-90.6-700.6c-9.2-7.2-18.4-12.7-27.7-16.4V199c39.9-2.8 78.6-11.6 115.7-26.2-8.3-24.6-17.9-47.3-29-67.8-17.4-32.4-37.8-58.3-59-75.1z m59 633.1c11-20.6 20.7-43.3 29-67.8-37.1-14.6-75.8-23.4-115.7-26.2V754.4c9.2-3.7 18.5-9.1 27.7-16.4 21.2-16.7 41.6-42.6 59-75zM540 255.10000000000002V356h147.5c-1.6-44.2-7.1-87.1-16.3-127.8l-0.3-1.2c-41.1 15.6-85.1 25.3-130.9 28.1z m0 156.9V512.9c45.8 2.8 89.8 12.5 130.9 28.1l0.3-1.2c9.2-40.7 14.7-83.5 16.3-127.8H540z m-56-56v-100.9c-45.8-2.8-89.8-12.5-130.9-28.1l-0.3 1.2c-9.2 40.7-14.7 83.5-16.3 127.8H484z m-147.5 56c1.6 44.2 7.1 87.1 16.3 127.8l0.3 1.2c41.1-15.6 85-25.3 130.9-28.1V412H336.5zM484 199v-185.4c-9.2 3.7-18.5 9.1-27.7 16.4-21.2 16.7-41.7 42.7-59.1 75.1-11 20.6-20.7 43.3-29 67.8 37.2 14.6 75.9 23.3 115.8 26.1z m0 370c-39.9 2.8-78.6 11.6-115.7 26.2 8.3 24.6 17.9 47.3 29 67.8 17.4 32.4 37.8 58.4 59.1 75.1 9.2 7.2 18.4 12.7 27.7 16.4V569zM365.7 730.5c3.7 1.5 7.3 3 11 4.4-23.4-31.3-43.5-70.4-59.2-115.4-21 12-40.9 26-59.4 41.8 31.8 29.2 67.9 52.4 107.6 69.2zM165.5 530.3c13.8 32.6 32 62.8 54.2 90.2 24.9-21.5 52.2-40.3 81.5-55.9-11.6-46.9-18.8-98.4-20.7-152.6H137c3 40.9 12.6 80.6 28.5 118.3zM137 356h143.5c1.9-54.2 9.1-105.7 20.7-152.6-29.3-15.6-56.6-34.4-81.5-55.9-22.2 27.4-40.4 57.6-54.2 90.2C149.6 275.4 140 315.1 137 356z m228.7-318.5c-39.7 16.8-75.8 40-107.6 69.2 18.5 15.8 38.4 29.7 59.4 41.8 15.7-45 35.8-84.1 59.2-115.4-3.7 1.4-7.4 2.9-11 4.4z m292.6 0c-3.7-1.5-7.3-3-11-4.4 23.4 31.3 43.5 70.4 59.2 115.4 21-12 40.9-26 59.4-41.8-31.8-29.2-67.9-52.4-107.6-69.2z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="config" unicode="&#59278;" d="M924.8 270.29999999999995l-65.5 56c3.1 19 4.7 38.4 4.7 57.8s-1.6 38.8-4.7 57.8l65.5 56c10.1 8.6 13.8 22.6 9.3 35.2l-0.9 2.6c-18.1 50.5-44.9 96.9-79.7 137.9l-1.8 2.1c-8.6 10.1-22.5 13.9-35.1 9.5l-81.3-28.9c-30 24.6-63.5 44-99.7 57.6l-15.7 85c-2.4 13.1-12.7 23.3-25.8 25.7l-2.7 0.5c-52.1 9.4-106.9 9.4-159 0l-2.7-0.5c-13.1-2.4-23.4-12.6-25.8-25.7l-15.8-85.4c-35.9-13.6-69.2-32.9-99-57.4l-81.9 29.1c-12.5 4.4-26.5 0.7-35.1-9.5l-1.8-2.1c-34.8-41.1-61.6-87.5-79.7-137.9l-0.9-2.6c-4.5-12.5-0.8-26.5 9.3-35.2l66.3-56.6c-3.1-18.8-4.6-38-4.6-57.1 0-19.2 1.5-38.4 4.6-57.1L99 270.5c-10.1-8.6-13.8-22.6-9.3-35.2l0.9-2.6c18.1-50.4 44.9-96.9 79.7-137.9l1.8-2.1c8.6-10.1 22.5-13.9 35.1-9.5l81.9 29.1c29.8-24.5 63.1-43.9 99-57.4l15.8-85.4c2.4-13.1 12.7-23.3 25.8-25.7l2.7-0.5c26.1-4.7 52.8-7.1 79.5-7.1 26.7 0 53.5 2.4 79.5 7.1l2.7 0.5c13.1 2.4 23.4 12.6 25.8 25.7l15.7 85c36.2 13.6 69.7 32.9 99.7 57.6l81.3-28.9c12.5-4.4 26.5-0.7 35.1 9.5l1.8 2.1c34.8 41.1 61.6 87.5 79.7 137.9l0.9 2.6c4.5 12.3 0.8 26.3-9.3 35zM788.3 430.1c2.5-15.1 3.8-30.6 3.8-46.1s-1.3-31-3.8-46.1l-6.6-40.1 74.7-63.9c-11.3-26.1-25.6-50.7-42.6-73.6L721 193.20000000000005l-31.4-25.8c-23.9-19.6-50.5-35-79.3-45.8l-38.1-14.3-17.9-97c-28.1-3.2-56.8-3.2-85 0l-17.9 97.2-37.8 14.5c-28.5 10.8-55 26.2-78.7 45.7l-31.4 25.9-93.4-33.2c-17 22.9-31.2 47.6-42.6 73.6l75.5 64.5-6.5 40c-2.4 14.9-3.7 30.3-3.7 45.5 0 15.3 1.2 30.6 3.7 45.5l6.5 40-75.5 64.5c11.3 26.1 25.6 50.7 42.6 73.6l93.4-33.2 31.4 25.9c23.7 19.5 50.2 34.9 78.7 45.7l37.9 14.3 17.9 97.2c28.1 3.2 56.8 3.2 85 0l17.9-97 38.1-14.3c28.7-10.8 55.4-26.2 79.3-45.8l31.4-25.8 92.8 32.9c17-22.9 31.2-47.6 42.6-73.6L781.8 470l6.5-39.9zM512 570c-97.2 0-176-78.8-176-176s78.8-176 176-176 176 78.8 176 176-78.8 176-176 176z m79.2-255.2C570 293.70000000000005 541.9 282 512 282c-29.9 0-58 11.7-79.2 32.8C411.7 336 400 364.1 400 394c0 29.9 11.7 58 32.8 79.2C454 494.4 482.1 506 512 506c29.9 0 58-11.6 79.2-32.8C612.3 452 624 423.9 624 394c0-29.9-11.7-58-32.8-79.2z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="appstore1" unicode="&#59282;" d="M464 752H160c-8.8 0-16-7.2-16-16v-304c0-8.8 7.2-16 16-16h304c8.8 0 16 7.2 16 16V736c0 8.8-7.2 16-16 16z m-52-268H212V684h200v-200zM864 752H560c-8.8 0-16-7.2-16-16v-304c0-8.8 7.2-16 16-16h304c8.8 0 16 7.2 16 16V736c0 8.8-7.2 16-16 16z m-52-268H612V684h200v-200zM464 352H160c-8.8 0-16-7.2-16-16v-304c0-8.8 7.2-16 16-16h304c8.8 0 16 7.2 16 16V336c0 8.8-7.2 16-16 16z m-52-268H212V284h200v-200zM864 352H560c-8.8 0-16-7.2-16-16v-304c0-8.8 7.2-16 16-16h304c8.8 0 16 7.2 16 16V336c0 8.8-7.2 16-16 16z m-52-268H612V284h200v-200z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="log" unicode="&#59283;" d="M880 784H144c-17.7 0-32-14.3-32-32v-736c0-17.7 14.3-32 32-32h736c17.7 0 32 14.3 32 32V752c0 17.7-14.3 32-32 32z m-40-728H184V712h656v-656zM492 496h184c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H492c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8zM492 352h184c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H492c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8zM492 208h184c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H492c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8zM380 528m-40 0a40 40 0 1 1 80 0 40 40 0 1 1-80 0ZM380 384m-40 0a40 40 0 1 1 80 0 40 40 0 1 1-80 0ZM380 240m-40 0a40 40 0 1 1 80 0 40 40 0 1 1-80 0Z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="host" unicode="&#59313;" d="M832 832H192c-17.7 0-32-14.3-32-32v-832c0-17.7 14.3-32 32-32h640c17.7 0 32 14.3 32 32V800c0 17.7-14.3 32-32 32z m-600-72h560v-208H232V760z m560-480H232V488h560v-208z m0-272H232V216h560v-208zM496 688H312c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h184c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8zM312 352h184c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H312c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8zM680 108m-40 0a40 40 0 1 1 80 0 40 40 0 1 1-80 0Z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="home" unicode="&#59334;" d="M946.5 391L560.1 777.2l-25.9 25.9c-12.3 12.2-32.1 12.2-44.4 0L77.5 391c-12.3-12.3-18.9-28.6-18.8-46 0.4-35.2 29.7-63.3 64.9-63.3h42.5V-44h691.8V281.70000000000005h43.4c17.1 0 33.2 6.7 45.3 18.8 12.1 12.1 18.7 28.2 18.7 45.3 0 17-6.7 33.1-18.8 45.2zM568 28H456V232h112v-204z m217.9 325.7V28H632V256c0 22.1-17.9 40-40 40H432c-22.1 0-40-17.9-40-40v-228H238.1V353.70000000000005h-96l370 369.7 23.1-23.1L882 353.70000000000005h-96.1z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="appstore" unicode="&#60261;" d="M464 752H160c-8.8 0-16-7.2-16-16v-304c0-8.8 7.2-16 16-16h304c8.8 0 16 7.2 16 16V736c0 8.8-7.2 16-16 16z m-52-268H212V684h200v-200z m452 268H560c-8.8 0-16-7.2-16-16v-304c0-8.8 7.2-16 16-16h304c8.8 0 16 7.2 16 16V736c0 8.8-7.2 16-16 16z m-52-268H612V684h200v-200zM464 352H160c-8.8 0-16-7.2-16-16v-304c0-8.8 7.2-16 16-16h304c8.8 0 16 7.2 16 16V336c0 8.8-7.2 16-16 16z m-52-268H212V284h200v-200z m452 268H560c-8.8 0-16-7.2-16-16v-304c0-8.8 7.2-16 16-16h304c8.8 0 16 7.2 16 16V336c0 8.8-7.2 16-16 16z m-52-268H612V284h200v-200z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="docker" unicode="&#58969;" d="M205.653333 158.933333c-29.184 0-55.637333 23.893333-55.637333 52.906667s23.893333 53.034667 55.68 53.034667c31.914667 0 55.893333-23.893333 55.893333-52.992s-26.538667-52.906667-55.68-52.906667z m683.178667 288.554667c-5.76 42.325333-32 76.8-66.56 103.253333l-13.44 10.666667-10.837333-13.226667c-21.077333-23.893333-29.44-66.261333-26.88-97.92 2.56-23.978667 10.24-47.786667 23.637333-66.304-10.837333-5.546667-24.234667-10.666667-34.56-16.085333a225.706667 225.706667 0 0 0-71.68-10.666667H4.138667l-2.56-15.786666a297.813333 297.813333 0 0 1 23.978666-151.04l10.410667-18.56v-2.56c64-105.941333 177.92-153.6 301.994667-153.6 238.677333 0 434.432 103.253333 527.232 325.674666 60.8-2.645333 122.197333 13.226667 151.04 71.509334l7.68 13.226666-12.8 7.978667c-34.56 21.077333-81.92 23.893333-121.6 13.226667l-0.768-0.085334z m-341.674667 42.325333h-103.594666v-103.253333h103.68V489.898667l-0.085334-0.128z m0 129.834667h-103.594666v-103.253333h103.68V619.52l-0.085334 0.128z m0 132.437333h-103.594666v-103.253333h103.68v103.253333h-0.085334z m126.72-262.272H570.88v-103.253333h103.253333V489.898667l-0.298666-0.128z m-383.914666 0H187.008v-103.253333h103.338667V489.898667l-0.426667-0.128z m129.28 0h-102.4v-103.253333H419.84V489.898667l-0.64-0.128z m-257.28 0H59.733333v-103.253333h103.594667V489.898667l-1.28-0.128z m257.28 129.834667h-102.4v-103.253333H419.84V619.52l-0.64 0.128z m-129.92 0H187.178667v-103.253333H290.133333V619.52l-0.682666 0.128z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="arrow-right" unicode="&#58981;" d="M320 10.666667c-8.533333 0-17.066667 4.266667-23.466667 10.666666-12.8 12.8-10.666667 34.133333 2.133334 44.8L654.933333 384 298.666667 701.866667c-12.8 10.666667-14.933333 32-2.133334 44.8 10.666667 12.8 32 14.933333 44.8 2.133333l384-341.333333c6.4-6.4 10.666667-14.933333 10.666667-23.466667 0-8.533333-4.266667-17.066667-10.666667-23.466667l-384-341.333333c-6.4-6.4-12.8-8.533333-21.333333-8.533333z"  horiz-adv-x="1024" />
      
      <glyph glyph-name="terminal" unicode="&#59492;" d="M89.6 89.6h844.8V678.4H89.6v-588.8zM0 768h1024v-768H0V768z m242.816-577.536L192 241.28l154.304 154.368L192 549.952l50.816 50.816L448 395.648l-205.184-205.184z m584.32-13.248H512V256h315.072v-78.72z"  horiz-adv-x="1024" />
      
--- a/frontend/src/assets/iconfont/iconfont.ttf
+++ b/frontend/src/assets/iconfont/iconfont.ttf
--- a/frontend/src/assets/iconfont/iconfont.woff
+++ b/frontend/src/assets/iconfont/iconfont.woff
--- a/frontend/src/assets/iconfont/iconfont.woff2
+++ b/frontend/src/assets/iconfont/iconfont.woff2
--- a/frontend/src/components/app-layout/header/components/CollapseIcon.vue
+++ b/frontend/src/components/app-layout/header/components/CollapseIcon.vue
@ -1,5 +1,5 @@
 <template>
-    <el-icon class="collapse-icon" @click="menuStore.setCollapse()">
+    <el-icon :size="25" class="collapse-icon" @click="menuStore.setCollapse()">
        <component :is="isCollapse ? 'expand' : 'fold'"></component>
    </el-icon>
 </template>
@ -12,5 +12,9 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
 </script>

 <style scoped lang="scss">
-@import '../index.scss';
+// @import '../index.scss';
+
+.collapse-icon {
+    cursor: pointer;
+}
 </style>
--- a/frontend/src/components/app-layout/header/index.vue
+++ b/frontend/src/components/app-layout/header/index.vue
@ -6,14 +6,10 @@
        </div>
        <div class="header-ri flx-center">
            <div class="header-icon">
-                <!-- Language -->
                <Language id="language"></Language>
-                <!-- Theme -->
                <Theme id="theme"></Theme>
            </div>
-            <!-- User name -->
            <span class="username">1Panel</span>
-            <!-- Avatar -->
            <Avatar></Avatar>
        </div>
    </div>
--- a/frontend/src/components/app-layout/index.vue
+++ b/frontend/src/components/app-layout/index.vue
@ -3,9 +3,9 @@
        <template #menu>
            <Menu></Menu>
        </template>
-        <template #header>
+        <!-- <template #header>
            <Header></Header>
-        </template>
+        </template> -->
        <template #footer>
            <Footer></Footer>
        </template>
@ -13,7 +13,7 @@
 </template>
 <script setup lang="ts">
 import Layout from '@/layout/index.vue';
-import Header from './header/index.vue';
+// import Header from './header/index.vue';
 import Footer from './footer/index.vue';
 import Menu from './menu/index.vue';
 </script>
--- a/frontend/src/components/app-layout/menu/components/sub-item.vue
+++ b/frontend/src/components/app-layout/menu/components/sub-item.vue
@ -3,29 +3,23 @@
        <el-sub-menu v-if="subItem.children && subItem.children.length > 1" :index="subItem.path">
            <template #title>
                <el-icon>
-                    <component :is="subItem.meta?.icon"></component>
+                    <SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
                </el-icon>
-                <span>{{ subItem.meta?.title }}</span>
+                <span>{{ $t(subItem.meta?.title as string) }}</span>
            </template>
            <SubItem :menuList="subItem.children" />
        </el-sub-menu>
        <el-menu-item v-else-if="subItem.children && subItem.children.length === 1" :index="subItem.children[0].path">
            <el-icon>
-                <component :is="subItem.meta?.icon"></component>
+                <SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
            </el-icon>
-            <template v-if="!subItem.meta?.isLink" #title>
+            <template #title>
                <span>{{ $t(subItem.meta?.title as string) }}</span>
            </template>
        </el-menu-item>
        <el-menu-item v-else :index="subItem.path">
-            <el-icon>
-                <component :is="subItem.meta?.icon"></component>
-            </el-icon>
-            <template v-if="!subItem.meta?.isLink" #title>
-                <span>{{ subItem.meta?.title }}</span>
-            </template>
-            <template v-else #title>
-                <a class="menu-href" :href="subItem.isLink" target="_blank">{{ subItem.meta?.title }}</a>
+            <template #title>
+                <span style="margin-left: 10px">{{ $t(subItem.meta?.title as string) }}</span>
            </template>
        </el-menu-item>
    </template>
@ -33,6 +27,7 @@

 <script setup lang="ts">
 import { RouteRecordRaw } from 'vue-router';
+import SvgIcon from '@/components/svg-icon/svg-icon.vue';

 defineProps<{ menuList: RouteRecordRaw[] }>();
 </script>
--- a/frontend/src/components/app-layout/menu/index.scss
+++ b/frontend/src/components/app-layout/menu/index.scss
@ -31,6 +31,11 @@
            border-right: none;
        }
    }
+    .menu-footer {
+        height: 30px;
+        background-color: #c0c0c0;
+        text-align: center;
+    }
 }
 .el-menu,
 .el-menu--popup {
--- a/frontend/src/components/app-layout/menu/index.vue
+++ b/frontend/src/components/app-layout/menu/index.vue
@ -1,7 +1,7 @@
 <template>
    <div
        class="menu"
-        :style="{ width: isCollapse ? '65px' : '220px' }"
+        :style="{ width: isCollapse ? '65px' : '180px' }"
        element-loading-text="Loading..."
        :element-loading-spinner="loadingSvg"
        element-loading-svg-view-box="-10, -10, 50, 50"
@ -22,6 +22,9 @@
                <SubItem :menuList="routerMenus"></SubItem>
            </el-menu>
        </el-scrollbar>
+        <div class="menu-footer">
+            <CollapseIcon></CollapseIcon>
+        </div>
    </div>
 </template>

@ -33,6 +36,7 @@ import { loadingSvg } from '@/utils/svg';
 import Logo from './components/logo.vue';
 import SubItem from './components/sub-item.vue';
 import { menuList } from '@/routers/router';
+import CollapseIcon from '../header/components/collapseicon.vue';
 const route = useRoute();
 const menuStore = MenuStore();

--- a/frontend/src/components/svg-icon/svg-icon.vue
+++ b/frontend/src/components/svg-icon/svg-icon.vue
@ -1,6 +1,6 @@
 <template>
    <svg :class="svgClass" aria-hidden="true">
-        <use :xlink:href="iconClassName" :fill="color" />
+        <use :xlink:href="iconClassName" />
    </svg>
 </template>
 <script setup lang="ts">
@ -33,15 +33,15 @@ const svgClass = computed(() => {
 </script>
 <style scoped>
 .svg-icon {
-    width: 1.5em;
-    height: 1.5em;
+    width: 2.5em;
+    height: 2.5em;
    position: relative;
    fill: currentColor;
    vertical-align: -2px;
-    padding-top: 0.3em;
-    padding-bottom: 0.3em;
-    padding-left: 0.3em;
-    padding-right: 0.3em;
+    padding-top: 0.1em;
+    padding-bottom: 0.1em;
+    padding-left: 0.1em;
+    padding-right: 0.1em;
 }
 .table-icon {
    width: 1.5em;
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -84,6 +84,21 @@ export default {
    menu: {
        home: '概览',
        demo: '样例',
+        terminal: '终端',
+        operations: '操作日志',
+        files: '文件',
+        apps: '应用商店',
+        website: '网站',
+        project: '项目',
+        config: '配置',
+        firewall: '防火墙',
+        database: '数据库',
+        container: '容器',
+        plan: '计划任务',
+        host: '主机',
+        security: '安全',
+        systemConfig: '面板设置',
+        toolbox: '工具箱',
        terminal: '终端管理',
        monitor: '监控',
        operations: '操作记录',
--- a/frontend/src/routers/modules/demo.ts
+++ b/frontend/src/routers/modules/demo.ts
--- a/frontend/src/routers/modules/
+++ b/frontend/src/routers/modules/
@ -1,25 +0,0 @@
-import { Layout } from '@/routers/constant';
-
-// demo
-const demoRouter = {
-    sort: 3,
-    path: '/files',
-    component: Layout,
-    redirect: '/files',
-    meta: {
-        icon: 'files',
-        title: 'menu.files',
-    },
-    children: [
-        {
-            path: '/files',
-            name: 'File',
-            component: () => import('@/views/file-management/index.vue'),
-            meta: {
-                keepAlive: true,
-            },
-        },
-    ],
-};
-
-export default demoRouter;
--- a/frontend/src/routers/modules/app-store.ts
+++ b/frontend/src/routers/modules/app-store.ts
@ -0,0 +1,25 @@
+import { Layout } from '@/routers/constant';
+
+// demo
+const appStoreRouter = {
+    sort: 2,
+    path: '/apps',
+    component: Layout,
+    redirect: '/apps',
+    meta: {
+        icon: 'p-appstore',
+        title: 'menu.apps',
+    },
+    children: [
+        {
+            path: '/apps',
+            name: 'App',
+            component: () => import('@/views/app-store/index.vue'),
+            meta: {
+                keepAlive: true,
+            },
+        },
+    ],
+};
+
+export default appStoreRouter;
--- a/frontend/src/routers/modules/config.ts
+++ b/frontend/src/routers/modules/config.ts
@ -0,0 +1,25 @@
+import { Layout } from '@/routers/constant';
+
+const systemConfigRouter = {
+    sort: 7,
+    path: '/config',
+    component: Layout,
+    redirect: '/config',
+    meta: {
+        icon: 'p-config',
+        title: 'menu.systemConfig',
+    },
+    children: [
+        {
+            path: '/config',
+            name: 'SystemConfig',
+            component: () => import('@/views/system-config/index.vue'),
+            meta: {
+                hidden: true,
+                keepAlive: true,
+            },
+        },
+    ],
+};
+
+export default systemConfigRouter;
--- a/frontend/src/routers/modules/container.ts
+++ b/frontend/src/routers/modules/container.ts
@ -0,0 +1,24 @@
+import { Layout } from '@/routers/constant';
+
+const webSiteRouter = {
+    sort: 5,
+    path: '/containers',
+    component: Layout,
+    redirect: '/containers',
+    meta: {
+        icon: 'p-docker',
+        title: 'menu.container',
+    },
+    children: [
+        {
+            path: '/containers',
+            name: 'Container',
+            component: () => import('@/views/container/index.vue'),
+            meta: {
+                keepAlive: true,
+            },
+        },
+    ],
+};
+
+export default webSiteRouter;
--- a/frontend/src/routers/modules/database.ts
+++ b/frontend/src/routers/modules/database.ts
@ -0,0 +1,24 @@
+import { Layout } from '@/routers/constant';
+
+const databaseRouter = {
+    sort: 4,
+    path: '/database',
+    component: Layout,
+    redirect: '/database',
+    meta: {
+        icon: 'p-database',
+        title: 'menu.database',
+    },
+    children: [
+        {
+            path: '/database',
+            name: 'Database',
+            component: () => import('@/views/database/index.vue'),
+            meta: {
+                keepAlive: true,
+            },
+        },
+    ],
+};
+
+export default databaseRouter;
--- a/frontend/src/routers/modules/host.ts
+++ b/frontend/src/routers/modules/host.ts
@ -0,0 +1,43 @@
+import { Layout } from '@/routers/constant';
+
+const hostRouter = {
+    sort: 6,
+    path: '/host',
+    component: Layout,
+    redirect: '/host/security',
+    meta: {
+        icon: 'p-host',
+        title: 'menu.host',
+    },
+    children: [
+        {
+            path: '/host/security',
+            name: 'Security',
+            component: () => import('@/views/host/security/index.vue'),
+            meta: {
+                title: 'menu.security',
+                keepAlive: true,
+            },
+        },
+        {
+            path: '/host/files',
+            name: 'File',
+            component: () => import('@/views/host/file-management/index.vue'),
+            meta: {
+                title: 'menu.files',
+                keepAlive: true,
+            },
+        },
+        // {
+        //     path: '/host/terminal',
+        //     name: 'Terminal',
+        //     component: () => import('@/views/host/terminal/index.vue'),
+        //     meta: {
+        //         title: 'menu.terminal',
+        //         keepAlive: true,
+        //     },
+        // },
+    ],
+};
+
+export default hostRouter;
--- a/frontend/src/routers/modules/operation-log.ts
+++ b/frontend/src/routers/modules/operation-log.ts
@ -1,13 +1,13 @@
 import { Layout } from '@/routers/constant';

 const operationRouter = {
-    sort: 3,
+    sort: 8,
    path: '/operations',
    component: Layout,
    redirect: '/operation',
    meta: {
        title: 'menu.operations',
-        icon: 'notebook',
+        icon: 'p-log',
    },
    children: [
        {
--- a/frontend/src/routers/modules/plan.ts
+++ b/frontend/src/routers/modules/plan.ts
@ -0,0 +1,24 @@
+import { Layout } from '@/routers/constant';
+
+const planRouter = {
+    sort: 5,
+    path: '/plans',
+    component: Layout,
+    redirect: '/plans',
+    meta: {
+        icon: 'p-plan',
+        title: 'menu.plan',
+    },
+    children: [
+        {
+            path: '/plans',
+            name: 'Plan',
+            component: () => import('@/views/plan/index.vue'),
+            meta: {
+                keepAlive: true,
+            },
+        },
+    ],
+};
+
+export default planRouter;
--- a/frontend/src/routers/modules/terminal.ts
+++ b/frontend/src/routers/modules/terminal.ts
@ -1,28 +0,0 @@
-import { Layout } from '@/routers/constant';
-
-const terminalRouter = {
-    sort: 2,
-    path: '/terminals',
-    component: Layout,
-    redirect: '/terminal',
-    meta: {
-        title: 'menu.terminal',
-        icon: 'monitor',
-    },
-    children: [
-        {
-            path: '/terminals/terminal',
-            name: 'Terminal',
-            component: () => import('@/views/terminal/index.vue'),
-            meta: {
-                requiresAuth: true,
-                key: 'Terminal',
-                title: 'terminal.conn',
-                icon: 'Connection',
-                activeMenu: '/terminals',
-            },
-        },
-    ],
-};
-
-export default terminalRouter;
--- a/frontend/src/routers/modules/toolbox.ts
+++ b/frontend/src/routers/modules/toolbox.ts
@ -0,0 +1,24 @@
+import { Layout } from '@/routers/constant';
+
+const toolBoxRouter = {
+    sort: 7,
+    path: '/toolbox',
+    component: Layout,
+    redirect: '/toolbox',
+    meta: {
+        icon: 'p-toolbox',
+        title: 'menu.toolbox',
+    },
+    children: [
+        {
+            path: '/toolbox',
+            name: 'ToolBox',
+            component: () => import('@/views/toolbox/index.vue'),
+            meta: {
+                keepAlive: true,
+            },
+        },
+    ],
+};
+
+export default toolBoxRouter;
--- a/frontend/src/routers/modules/website.ts
+++ b/frontend/src/routers/modules/website.ts
@ -0,0 +1,43 @@
+import { Layout } from '@/routers/constant';
+
+const webSiteRouter = {
+    sort: 3,
+    path: '/websites',
+    component: Layout,
+    redirect: '/websites',
+    meta: {
+        icon: 'p-website',
+        title: 'menu.website',
+    },
+    children: [
+        {
+            path: '/websites',
+            name: 'Website',
+            component: () => import('@/views/website/project/index.vue'),
+            meta: {
+                title: 'menu.project',
+                keepAlive: true,
+            },
+        },
+        {
+            path: '/websites/config',
+            name: 'Config',
+            component: () => import('@/views/website/config/index.vue'),
+            meta: {
+                title: 'menu.config',
+                keepAlive: true,
+            },
+        },
+        {
+            path: '/websites/firewall',
+            name: 'Firewall',
+            component: () => import('@/views/website/project/index.vue'),
+            meta: {
+                title: 'menu.firewall',
+                keepAlive: true,
+            },
+        },
+    ],
+};
+
+export default webSiteRouter;
--- a/frontend/src/routers/router.ts
+++ b/frontend/src/routers/router.ts
@ -10,7 +10,7 @@ const homeRouter: RouteRecordRaw = {
    meta: {
        keepAlive: true,
        title: 'menu.home',
-        icon: 'home-filled',
+        icon: 'p-home',
    },
    children: [
        {
--- a/frontend/src/views/app-store/index.vue
+++ b/frontend/src/views/app-store/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/container/index.vue
+++ b/frontend/src/views/container/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/database/index.vue
+++ b/frontend/src/views/database/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/host/file-management/change-role/index.vue
+++ b/frontend/src/views/host/file-management/change-role/index.vue
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
--- a/frontend/src/views/host/file-management/compress/index.vue
+++ b/frontend/src/views/host/file-management/compress/index.vue
--- a/frontend/src/views/host/file-management/create/index.vue
+++ b/frontend/src/views/host/file-management/create/index.vue
--- a/frontend/src/views/host/file-management/decompress/index.vue
+++ b/frontend/src/views/host/file-management/decompress/index.vue
--- a/frontend/src/views/host/file-management/download/index.vue
+++ b/frontend/src/views/host/file-management/download/index.vue
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
--- a/frontend/src/views/host/file-management/move/index.vue
+++ b/frontend/src/views/host/file-management/move/index.vue
--- a/frontend/src/views/host/file-management/rename/index.vue
+++ b/frontend/src/views/host/file-management/rename/index.vue
--- a/frontend/src/views/host/file-management/upload/index.vue
+++ b/frontend/src/views/host/file-management/upload/index.vue
--- a/frontend/src/views/host/file-management/wget/index.vue
+++ b/frontend/src/views/host/file-management/wget/index.vue
--- a/frontend/src/views/host/security/index.vue
+++ b/frontend/src/views/host/security/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/host/terminal/command/index.vue
+++ b/frontend/src/views/host/terminal/command/index.vue
--- a/frontend/src/views/host/terminal/host/index.vue
+++ b/frontend/src/views/host/terminal/host/index.vue
--- a/frontend/src/views/host/terminal/index.vue
+++ b/frontend/src/views/host/terminal/index.vue
--- a/frontend/src/views/host/terminal/terminal/index.vue
+++ b/frontend/src/views/host/terminal/terminal/index.vue
--- a/frontend/src/views/plan/index.vue
+++ b/frontend/src/views/plan/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/system-config/index.vue
+++ b/frontend/src/views/system-config/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/toolbox/index.vue
+++ b/frontend/src/views/toolbox/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/website/config/index.vue
+++ b/frontend/src/views/website/config/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/website/firewall/index.vue
+++ b/frontend/src/views/website/firewall/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>
--- a/frontend/src/views/website/project/index.vue
+++ b/frontend/src/views/website/project/index.vue
@ -0,0 +1,7 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
+</script>