feat: 完成项目滚动列表

package-lock.json

@@ -2041,6 +2041,96 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
       "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg=="
     },
+    "@material-ui/core": {
+      "version": "4.12.4",
+      "resolved": "https://registry.npmmirror.com/@material-ui/core/-/core-4.12.4.tgz",
+      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.5",
+        "@material-ui/system": "^4.12.2",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.3",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmmirror.com/@material-ui/icons/-/icons-4.11.3.tgz",
+      "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.5",
+      "resolved": "https://registry.npmmirror.com/@material-ui/styles/-/styles-4.11.5.tgz",
+      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.3",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.5.1",
+        "jss-plugin-camel-case": "^10.5.1",
+        "jss-plugin-default-unit": "^10.5.1",
+        "jss-plugin-global": "^10.5.1",
+        "jss-plugin-nested": "^10.5.1",
+        "jss-plugin-props-sort": "^10.5.1",
+        "jss-plugin-rule-value-function": "^10.5.1",
+        "jss-plugin-vendor-prefixer": "^10.5.1",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.20",
+          "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
+          "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmmirror.com/@material-ui/system/-/system-4.12.2.tgz",
+      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.3",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.20",
+          "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
+          "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+        }
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmmirror.com/@material-ui/utils/-/utils-4.11.3.tgz",
+      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@mui/base": {
       "version": "5.0.0-alpha.79",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.79.tgz",
@@ -8637,6 +8727,11 @@
         "commander": "*"
       }
     },
+    "moment": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.3.tgz",
+      "integrity": "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -9086,6 +9181,11 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmmirror.com/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "postcss": {
       "version": "8.4.13",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.13.tgz",
@@ -11556,7 +11656,7 @@
     },
     "webpack-dev-server": {
       "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
       "integrity": "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw==",
       "requires": {
         "@types/bonjour": "^3.5.9",

package.json

@@ -7,6 +7,8 @@
     "@babel/core": "^7.16.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.4",
     "@mui/styles": "^5.8.0",
@@ -50,6 +52,7 @@
     "mobx-react": "^7.4.0",
     "mobx-react-lite": "^3.4.0",
     "mockjs": "^1.1.0",
+    "moment": "^2.29.3",
     "postcss": "^8.4.4",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",

src/api/api_manager.ts

-import { BACKEND_API_URI_PREFIX } from './api_prefix'
+import { BACKEND_API_URI_PREFIX } from "./api_prefix";
 
 const RESTAPI = {
-    API_USER_FETCH: `${BACKEND_API_URI_PREFIX}/accounts/current`,//获取账户信息
-    API_PROJECT_LIST: `${BACKEND_API_URI_PREFIX}/cpp/project/list`,//获取产品列表
-}
+  API_USER_FETCH: `${BACKEND_API_URI_PREFIX}/accounts/current`, //获取账户信息
+  API_PRIVILEGE_LIST: `${BACKEND_API_URI_PREFIX}/routes/privilege/list`, //获取产品列表
+  API_PROJECT_LIST: `${BACKEND_API_URI_PREFIX}/cpp/project/list`, //获取产品下的项目列表
+  // routes/privilege/list
+};
 
-export default RESTAPI
\ No newline at end of file
+export default RESTAPI;

src/api/project_api.ts

+import request from "@/utils/axios/service";
+import Api from "./api_manager"
+
+function current() {
+  return request({
+    url: Api.API_USER_FETCH,
+    method: "get",
+  });
+}
+
+function menu() {
+  return request({
+    url: "/accounts/menu-mock",
+    method: "get",
+  });
+}
+
+// 查询当前用户可以看到的项目列表
+function product() {
+  return request({
+    url: Api.API_PROJECT_LIST + "?name=",
+    method: "get",
+
+  });
+}
+
+export { current, menu, product };

src/assets/project/noData.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="220px" height="143px" viewBox="0 0 220 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 6</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="72.6" height="77" rx="2.2"></rect>
+        <filter x="-17.2%" y="-16.2%" width="139.9%" height="137.7%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.0553718645   0 0 0 0 0.196954257  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="未创建项目" transform="translate(-720.000000, -376.000000)">
+            <g id="编组-6" transform="translate(720.000000, 376.000000)">
+                <rect id="矩形" x="0" y="0" width="220" height="143"></rect>
+                <g id="img_启动ssh" transform="translate(13.200000, 17.600000)">
+                    <g id="编组-7">
+                        <ellipse id="椭圆形" fill="#F3F9FF" fill-rule="nonzero" opacity="0.55971" cx="90.11849" cy="61.6" rx="90.11849" ry="61.6"></ellipse>
+                        <g id="矩形" transform="translate(16.418490, 12.100000)" fill="#F2F2F5" fill-rule="nonzero">
+                            <rect id="矩形" x="1.95399252e-15" y="0" width="149.6" height="100.1" rx="2.2"></rect>
+                        </g>
+                        <path d="M16.41849,14.3 C16.41849,13.08494 17.40343,12.1 18.61849,12.1 L163.8186,12.1 C165.033,12.1 166.0186,13.08494 166.0186,14.3 L166.0186,24.2 L16.41849,24.2 L16.41849,14.3 Z" id="矩形备份-9" fill="#D9DDE3" fill-rule="nonzero"></path>
+                        <rect id="矩形备份-15" fill="#FFFFFF" fill-rule="nonzero" x="30.71849" y="40.7" width="123.2" height="64.9" rx="1.1"></rect>
+                        <rect id="矩形_2" fill-opacity="0.159801" fill="#136EFA" fill-rule="nonzero" x="36.21849" y="44" width="11" height="11"></rect>
+                        <rect id="矩形备份-2" fill-opacity="0.159801" fill="#86A8DD" fill-rule="nonzero" x="76.91849" y="68.2" width="42.9" height="4.4" rx="1.1"></rect>
+                        <rect id="矩形备份-4" fill-opacity="0.159801" fill="#86A8DD" fill-rule="nonzero" x="76.91849" y="90.2" width="42.9" height="4.4" rx="1.1"></rect>
+                        <rect id="矩形备份-3" fill-opacity="0.159801" fill="#86A8DD" fill-rule="nonzero" x="60.41849" y="68.2" width="11" height="4.4" rx="1.1"></rect>
+                        <rect id="矩形备份-5" fill-opacity="0.159801" fill="#86A8DD" fill-rule="nonzero" x="60.41849" y="90.2" width="11" height="4.4" rx="1.1"></rect>
+                        <rect id="矩形备份" fill-opacity="0.235003" fill="#02CDD1" fill-rule="nonzero" x="50.51849" y="44" width="11" height="11"></rect>
+                        <rect id="矩形备份-34" fill="#FFFFFF" fill-rule="nonzero" x="30.71849" y="28.6" width="123.2" height="8.8" rx="1.1"></rect>
+                        <circle id="椭圆形备份-11" fill="#FFFFFF" fill-rule="nonzero" cx="37.31849" cy="18.7" r="2.2"></circle>
+                        <circle id="椭圆形备份-13" fill="#FFFFFF" fill-rule="nonzero" cx="48.31849" cy="18.7" r="2.2"></circle>
+                        <circle id="椭圆形备份-12" fill="#FFFFFF" fill-rule="nonzero" cx="26.31849" cy="18.7" r="2.2"></circle>
+                        <rect id="矩形备份-21" fill="#4C93FF" fill-rule="nonzero" x="34.01849" y="31.9" width="17.6" height="2.2"></rect>
+                        <rect id="矩形备份-35" fill="#4C93FF" fill-rule="nonzero" x="129.7186" y="33" width="17.6" height="1.65"></rect>
+                        <g id="编组-6" transform="translate(116.518600, 35.200000)" fill-rule="nonzero">
+                            <g id="矩形">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                                <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                            </g>
+                        </g>
+                        <circle id="椭圆形_2" stroke-opacity="0.346236" stroke="#136EFA" stroke-width="2.2" cx="43.91849" cy="71.5" r="7.7"></circle>
+                        <circle id="椭圆形备份" fill-opacity="0.753196" fill="#18B267" fill-rule="nonzero" cx="43.91849" cy="92.4" r="7.7"></circle>
+                        <path d="M51.61849,70.4 C51.61849,66.75493 48.66356,63.8 45.01849,63.8" id="形状" stroke="#136EFA" stroke-width="3.3"></path>
+                        <polyline id="路径-7" stroke="#FFFFFF" stroke-width="1.1" points="39.8134 92.9005 42.69518 95.94827 48.19518 90.44827"></polyline>
+                    </g>
+                    <g id="编组备份" transform="translate(131.918600, 59.400000)">
+                        <path d="M16.9103,27.88181 L15.3142,33.44319 L10.5765,33.44319 C10.3422,33.44319 10.1519,33.59356 10.1519,33.77902 L10.1519,34.77463 C10.1519,34.96009 10.3422,35.11079 10.5765,35.11079 L31.5436,35.11079 C31.7768,35.11079 31.9671,34.96009 31.9671,34.77463 L31.9671,33.75636 C31.9671,33.57112 31.7768,33.42075 31.5436,33.42075 L26.1778,33.42075 L24.3529,27.83671 L16.9103,27.88181 Z" id="Fill-1" fill="#136EFA"></path>
+                        <path d="M39.9179,28.787 L1.8447,28.787 C0.825,28.787 0,27.96112 0,26.94219 L0,1.84481 C0,0.82588 0.825,0 1.8447,0 L39.9179,0 C40.9365,0 41.7626,0.82588 41.7626,1.84481 L41.7626,26.94219 C41.7626,27.96112 40.9365,28.787 39.9179,28.787 Z" id="Fill-3" fill="#136EFA"></path>
+                        <polygon id="Fill-5" fill="#FFFFFF" opacity="0.881487" points="1.6357 24.90576 40.0433 24.90576 40.0433 1.41724 1.6357 1.41724"></polygon>
+                        <path d="M21.5248,26.78984 C21.5248,27.12897 21.2509,27.40364 20.911,27.40364 C20.5722,27.40364 20.2972,27.12897 20.2972,26.78984 C20.2972,26.45071 20.5722,26.17604 20.911,26.17604 C21.2509,26.17604 21.5248,26.45071 21.5248,26.78984 Z" id="Fill-7" fill="#EFEFEF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/projectIcon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 18备份 3</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-18备份-3">
+            <rect id="矩形" fill="#FFFFFF" x="0" y="0" width="32" height="32" rx="4"></rect>
+            <g id="编组-18备份" transform="translate(6.000000, 6.000000)">
+                <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
+                <g id="编组-17" transform="translate(1.666667, 1.800000)">
+                    <path d="M0,12.3158333 L0,6.76916667 C0,6.11833333 0.7125,5.71916667 1.2675,6.05833333 L7.10083333,9.62333333 C7.34916667,9.77416667 7.5,10.0433333 7.5,10.3341667 L7.5,15.8808333 C7.5,16.5316667 6.7875,16.9308333 6.2325,16.5916667 L0.399166667,13.0266667 C0.150833333,12.8758333 0,12.6066667 0,12.3158333 Z" id="路径" fill="#A8CAFF" fill-rule="nonzero"></path>
+                    <path d="M16.6666667,11.9933333 L16.6666667,7.79416667 C16.6666667,6.89833333 16.6666667,6.45 16.4533333,6.2125 C16.3308333,6.07583333 16.1658333,5.98333333 15.985,5.95 C15.6708333,5.89166667 15.2883333,6.12583333 14.5241667,6.5925 L9.84083333,9.455 L9.84083333,9.455 C9.5725,9.61833333 9.43916667,9.7 9.34666667,9.81666667 C9.29166667,9.88583333 9.24833333,9.96333333 9.21833333,10.0458333 C9.16666667,10.1858333 9.16666667,10.3425 9.16666667,10.6566667 L9.16666667,14.8558333 C9.16666667,15.7516667 9.16666667,16.2 9.38,16.4375 C9.5025,16.5741667 9.6675,16.6666667 9.84833333,16.7 C10.1625,16.7583333 10.545,16.5241667 11.3091667,16.0575 L15.9925,13.195 C16.2608333,13.0316667 16.3941667,12.95 16.4866667,12.8333333 C16.5416667,12.7641667 16.585,12.6866667 16.615,12.6041667 C16.6666667,12.4641667 16.6666667,12.3075 16.6666667,11.9933333 Z" id="路径" fill="#A8CAFF" fill-rule="nonzero"></path>
+                    <path d="M2.47083333,3.315 L7.91083333,0.115 C8.17166667,-0.0383333333 8.495,-0.0383333333 8.75583333,0.115 L14.1958333,3.315 C14.7433333,3.6375 14.7433333,4.42916667 14.1958333,4.75166667 L8.75583333,7.95166667 C8.495,8.105 8.17166667,8.105 7.91083333,7.95166667 L2.47083333,4.75166667 C1.92333333,4.42916667 1.92333333,3.6375 2.47083333,3.315 Z" id="路径" fill="#A8CAFF" fill-rule="nonzero"></path>
+                    <circle id="椭圆形" fill="#1370FF" fill-rule="nonzero" cx="14.1666667" cy="13.2" r="3.33333333"></circle>
+                    <line x1="14.1666667" y1="13.2" x2="14.1666667" y2="11.5333333" id="路径" stroke="#FFFFFF" stroke-width="0.8125" stroke-linecap="round"></line>
+                    <line x1="14.1666667" y1="13.2" x2="15.4166667" y2="13.2" id="路径" stroke="#FFFFFF" stroke-width="0.8125" stroke-linecap="round"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/projectIconSmall.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 18</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-18">
+            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            <g id="编组-17" transform="translate(2.000000, 2.160000)">
+                <path d="M0,14.779 L0,8.123 C0,7.342 0.855,6.863 1.521,7.27 L8.521,11.548 C8.819,11.729 9,12.052 9,12.401 L9,19.057 C9,19.838 8.145,20.317 7.479,19.91 L0.479,15.632 C0.181,15.451 0,15.128 0,14.779 Z" id="路径" fill="#AFCEFF" fill-rule="nonzero"></path>
+                <path d="M20,14.392 L20,9.353 C20,8.278 20,7.74 19.744,7.455 C19.597,7.291 19.399,7.18 19.182,7.14 C18.805,7.07 18.346,7.351 17.429,7.911 L11.809,11.346 L11.809,11.346 C11.487,11.542 11.327,11.64 11.216,11.78 C11.15,11.863 11.098,11.956 11.062,12.055 C11,12.223 11,12.411 11,12.788 L11,17.827 C11,18.902 11,19.44 11.256,19.725 C11.403,19.889 11.601,20 11.818,20.04 C12.195,20.11 12.654,19.829 13.571,19.269 L19.191,15.834 C19.513,15.638 19.673,15.54 19.784,15.4 C19.85,15.317 19.902,15.224 19.938,15.125 C20,14.957 20,14.769 20,14.392 Z" id="路径" fill="#AFCEFF" fill-rule="nonzero"></path>
+                <path d="M2.965,3.978 L9.493,0.138 C9.806,-0.046 10.194,-0.046 10.507,0.138 L17.035,3.978 C17.692,4.365 17.692,5.315 17.035,5.702 L10.507,9.542 C10.194,9.726 9.806,9.726 9.493,9.542 L2.965,5.702 C2.308,5.315 2.308,4.365 2.965,3.978 Z" id="路径" fill="#AFCEFF" fill-rule="nonzero"></path>
+                <circle id="椭圆形" fill="#1370FF" fill-rule="nonzero" cx="17" cy="15.84" r="4"></circle>
+                <line x1="17" y1="15.84" x2="17" y2="13.84" id="路径" stroke="#FFFFFF" stroke-linecap="round"></line>
+                <line x1="17" y1="15.84" x2="18.5" y2="15.84" id="路径" stroke="#FFFFFF" stroke-linecap="round"></line>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/projectSetting.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/项目设置</title>
+    <defs>
+        <filter color-interpolation-filters="auto" id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.540000 0 0 0 0 0.564000 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="1.Base基础/Icon图标/项目设置" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="背景" x="0" y="0" width="16" height="16"></rect>
+        <g filter="url(#filter-1)" id="项目设置">
+            <g>
+                <path d="M10.3115139,0.785133195 C10.3755597,0.771624135 10.4453689,0.766989913 10.5042749,0.794023758 L10.496,0.792 L12.4222041,1.92660078 C12.4559203,1.95719461 12.4812649,1.99554138 12.4995296,2.03712459 L12.521778,2.10136218 C12.5433438,2.18324054 12.5426377,2.27315196 12.5086525,2.35408221 L12.5086525,2.35408221 L12.5048006,2.36325497 L12.500855,2.37339637 C12.4840295,2.41651602 12.2821914,2.9537808 12.2821914,3.4239819 C12.2821914,4.19023092 12.5792307,4.88335657 13.0540612,5.3859324 C13.5439168,5.90441126 14.2215221,6.22104975 14.9662484,6.22104975 L14.9662484,6.22104975 L14.9972506,6.22104975 C15.0498002,6.28382486 15.076073,6.37642377 15.0946517,6.48033289 C15.1008851,6.51473263 15.25,7.34188133 15.25,8.00533082 C15.25,8.66737979 15.1010676,9.49361375 15.0943199,9.53058939 C15.07605,9.63286911 15.0492782,9.72511901 14.9979973,9.78866221 L14.9979973,9.78866221 L14.9662682,9.78866221 C14.2215791,9.78866221 13.5440039,10.1052781 13.0541588,10.6236657 C12.5792668,11.1262288 12.2822113,11.819322 12.2822113,12.5854135 C12.2822113,13.0633674 12.4859773,13.5981268 12.5029718,13.6411469 L12.5029718,13.6411469 L12.5074956,13.6526223 C12.5434026,13.7339976 12.5443228,13.8251291 12.5223924,13.9079504 C12.5028075,13.9819135 12.4646577,14.0530337 12.4018898,14.099455 L12.405,14.095 L10.4481974,15.2366664 C10.4348404,15.2411364 10.4210591,15.2444698 10.4069281,15.2466857 L10.3635604,15.25 C10.263522,15.25 10.1638019,15.2086135 10.1012748,15.1361523 C9.8023742,14.7872629 8.74070743,13.8890234 7.95899092,13.8890234 C7.23777174,13.8890234 6.20467319,14.6831976 5.82852375,15.113358 C5.78299038,15.1660371 5.71513977,15.1953819 5.64752747,15.2103769 C5.5856678,15.2240961 5.51805495,15.2283952 5.4681655,15.2052094 L5.4681655,15.2052094 L5.464,15.203 L3.57644234,14.0819598 C3.54295021,14.0517742 3.51787907,14.0137663 3.49982514,13.9725262 L3.47783167,13.9088156 C3.45618706,13.8264678 3.45718182,13.735983 3.49128245,13.654389 L3.49128245,13.654389 L3.49560429,13.6438226 L3.50193727,13.6273674 C3.53876372,13.5297751 3.71780868,13.0304496 3.71780868,12.5853924 C3.71780868,11.8193033 3.42075488,11.1262121 2.94586849,10.6236497 C2.45602443,10.1052579 1.77845122,9.7886411 1.03377167,9.7886411 L1.03377167,9.7886411 L1.00292788,9.7886411 C0.950315899,9.72573378 0.923953458,9.6326991 0.904129254,9.52195387 C0.897650311,9.48798028 0.75,8.66482749 0.75,8.0053097 C0.75,7.34441337 0.897848614,6.52032512 0.905715983,6.47853298 C0.923936126,6.37654964 0.950558339,6.28454366 1.00153983,6.22107084 L1.00153983,6.22107084 L1.03377167,6.22107084 C1.7784884,6.22107084 2.45609161,5.9044315 2.94594621,5.38594835 C3.4207711,4.88337328 3.71780868,4.19024958 3.71780868,3.42400299 C3.71780868,3.02238874 3.57391765,2.58082274 3.51757676,2.42371732 L3.49612978,2.36618463 L3.49315408,2.35869169 C3.45683118,2.27204258 3.45656197,2.18287001 3.47809083,2.10170557 C4.57078234,1.37491171 5.22597891,1.07614779 5.67360535,0.949157118 C5.79924532,0.913513324 5.89595722,0.889926603 5.97304559,0.890276597 C6.30133364,1.23618208 7.30122443,2.03357391 8.0410091,2.03357391 C8.79391996,2.03357391 9.82900874,1.20312298 10.1257116,0.879260616 C10.1726744,0.827482687 10.2425344,0.7996829 10.3115139,0.785133195 Z" id="路径" stroke="#8A9099" stroke-width="1.5" fill-rule="nonzero"></path>
+                <circle id="椭圆形备份" stroke="#8A9099" stroke-width="1.5" cx="8" cy="8" r="2.45"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/style/public.css

+div::-webkit-scrollbar, main::-webkit-scrollbar {
+  width: 8px;
+  height: 5px !important;
+}
+
+div::-webkit-scrollbar-track, main::-webkit-scrollbar-track {
+  background-color: #fff;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+div::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb {
+  background-color: #D8D8D8;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  height: 5px !important;
+}
\ No newline at end of file

src/index.tsx

@@ -7,6 +7,7 @@ import { Provider } from "mobx-react";
 import { stores } from "@/store/index";
 import { MySnackbarProvider } from "@/components/MySnackbar";
 import "@/mocks/index";
+import './assets/style/public.css'
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement

src/store/index.ts

@@ -2,10 +2,11 @@ import * as React from "react";
 import { configure } from "mobx";
 import permissionStore from "./modules/permission";
 import menuStore from "./modules/menu";
+import currentProjectStore from "./modules/currentProject";
 
 configure({ enforceActions: "always" });
 
-export const stores = { permissionStore, menuStore };
+export const stores = { permissionStore, menuStore, currentProjectStore };
 export const CounterContext = React.createContext(stores);
 
 export const useStores = () => React.useContext(CounterContext);

src/store/modules/currentProject.ts

+import { makeAutoObservable } from "mobx";
+// import { routes, navigate, operation, route } from "@/router";
+type projectInfo =  {
+    id?: string
+    name?: string
+    desc?: string
+}
+class currentProject {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  projectInfo: projectInfo = {}
+  changeProject = (project:projectInfo) => {
+      this.projectInfo = project
+  }
+}
+
+const currentProjectStore = new currentProject();
+
+export default currentProjectStore;

src/views/MenuLayout/CurrentProject/index.module.css

+.currentProject {
+  background-color: #f7f8fa;
+  padding: 17px 16px 17px 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+.logo {
+  width: 32px;
+  border-radius: 4px;
+  background-color: #fff;
+  margin-right: 12px;
+  display: block;
+}
+.info {
+  flex: 1;
+}
+.name {
+  color: #1e2633;
+  line-height: 22px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.desc {
+  color: #8a9099;
+  line-height: 20px;
+  font-size: 14px;
+}
+.showProjectList {
+  color: #c2c6cc;
+  font-size: 12px;
+}
+.projectBox {
+  width: 260px;
+  height: calc(100vh - 57px);
+  background-color: #fff;
+  border-right: 1px solid #ebedf0;
+  display: flex;
+  flex-direction: column;
+}
+.searchBox {
+  height: 56px;
+}
+.projectlist {
+  flex: 1;
+  overflow-y: scroll;
+}
+.projectli {
+  height: 86px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin: 0 0 0 24px;
+  padding: 20px 24px 20px 0;
+  border-bottom: 1px solid #f0f2f5;
+}
+.projectliLogo {
+  width: 24px;
+  margin-right: 12px;
+}
+.projectName {
+  color: #1e2633;
+  line-height: 22px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.projectOwner {
+  color: #565c66;
+  line-height: 20px;
+  font-size: 14px;
+  margin-right: 32px;
+}
+.createdAt {
+  color: #8a9099;
+  line-height: 20px;
+  font-size: 14px;
+}
+/* <div className={style.projectli}>
+    <img src={logo} alt="" className={style.logo} />
+    <div className={style.projectliInfo}>
+        <div className={style.projectName}>{item.name}</div>
+        <div className={style.projectOwnerTime}>
+            <div className={style.projectOwner}>{item.owner}</div>
+            <div className={style.projectTime}>{item.createdAt}</div>
+        </div>
+    </div>
+</div> */

src/views/MenuLayout/CurrentProject/index.tsx

+// import { useEffect } from "react";
+import logo from "@/assets/project/projectIcon.svg";
+import smallLogo from "@/assets/project/projectIconSmall.svg";
+import style from "./index.module.css";
+import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
+import Popper from "@material-ui/core/Popper";
+import Paper from "@material-ui/core/Paper";
+import Fade from "@material-ui/core/Fade";
+import { useEffect, useState } from "react";
+import useMyRequest from "@/hooks/useMyRequest";
+import { product } from "@/api/project_api";
+import moment from "moment";
+
+const CurrentProject = () => {
+  const currentProjectInfo = {
+    id: "123",
+    name: "项目名称",
+    desc: "项目描述",
+  };
+  const [open, setOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [name, setName] = useState("");
+  const handleShowProjectList = (e: any) => {
+    setOpen(!open);
+    setAnchorEl(anchorEl ? null : e.currentTarget);
+  };
+  const [projectList, setProjectList] = useState<any>([]);
+
+  const { data, error, loading, run } = useMyRequest(product, {
+    manual: true,
+    onSuccess: (result, params) => {
+      console.log(result);
+      setProjectList(result.data);
+      // setState('');
+      // message.success(`The username was changed to "${params[0]}" !`);
+    },
+  });
+  useEffect(() => {
+    run();
+  }, []);
+
+  return (
+    <div
+      className={style.currentProject}
+      aria-describedby="projectList"
+      onClick={handleShowProjectList}
+    >
+      <img src={logo} alt="" className={style.logo} />
+      <div className={style.info}>
+        <div className={style.name}>{currentProjectInfo.name}</div>
+        <div className={style.desc}>{currentProjectInfo.desc}</div>
+      </div>
+      <ArrowForwardIosIcon
+        className={style.showProjectList}
+        style={{ fontSize: 12 }}
+      />
+      <Popper
+        open={open}
+        anchorEl={anchorEl}
+        placement="right-start"
+        transition
+      >
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <Paper>
+              <div className={style.projectBox}>
+                <div className={style.searchBox} onClick={() => run()}>
+                  searchBox
+                </div>
+                <div className={style.projectlist}>
+                  {projectList.map((item: any) => {
+                    return (
+                      <div className={style.projectli}>
+                        <img
+                          src={smallLogo}
+                          alt=""
+                          className={style.projectliLogo}
+                        />
+                        <div className={style.projectliInfo}>
+                          <div className={style.projectName}>{item.name}</div>
+                          <div className={style.projectOwnerTime}>
+                            <span className={style.projectOwner}>
+                              {item.owner}
+                            </span>
+                            <span className={style.projectTime}>
+                              {moment(item.createdAt).format("YYYY-MM-DD")}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
+      {/* <Popper id="projectList" open={open} placement="right-start">
+                <div className={style.name}>projectlist</div>
+            </Popper> */}
+    </div>
+  );
+};
+
+export default CurrentProject;

src/views/MenuLayout/index.module.css

@@ -3,6 +3,12 @@
   align-items: flex-start;
   justify-content: center;
 }
-.content{
+.aside {
+  border-right: 1px solid #e6e8eb;
+  width: 10%;
+  min-width: 220px;
+  height: calc(100vh - 57px);
+}
+.content {
   flex: 1;
 }

src/views/MenuLayout/index.tsx

@@ -5,6 +5,7 @@ import {
   ListItemText,
   ListItemButton,
 } from "@mui/material";
+import CurrentProject from "./CurrentProject";
 import React from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import style from "./index.module.css";
@@ -18,7 +19,8 @@ const MenuLayout = observer(() => {
 
   return (
     <Box className={style.container}>
-      <Box sx={{ width: "10%", minWidth: "220px" }}>
+      <Box className={style.aside}>
+        <CurrentProject />
         <List>
           {permissionStore.sidebarRouters.map((item, index) => {
             return (