feat: 🎸 更新了一些资源

src/components/Sidebar/index.css

@@ -65,45 +65,49 @@
     align-items: center;
     flex-direction: column;
 
-    .sidebar-menu-title {
+    .sidebar-menu-item-wrapper {
       width: 100%;
-      height: 36px;
-      text-align: left;
-      line-height: 36px;
-      color: #bfbfbf;
-      font-size: 14px;
-      font-weight: 400;
-    }
 
-    .sidebar-menu-item-active {
-      background-color: #e8f3ff;
-
-      .sidebar-menu-icon {
-        color: #0275f2 !important;
-      }
-      .sidebar-menu-text {
-        color: #0275f2 !important;
-      }
-    }
-
-    .sidebar-menu-item {
-      width: 100%;
-      height: 40px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      border-radius: 8px;
-      cursor: pointer;
-
-      .sidebar-menu-icon {
-        margin: 0 10px;
-        font-size: 20px;
-      }
-      .sidebar-menu-text {
-        margin-left: 10px;
-        font-size: 16px;
+      .sidebar-menu-title {
+        width: 100%;
+        height: 36px;
+        text-align: left;
+        line-height: 36px;
+        color: #bfbfbf;
+        font-size: 14px;
         font-weight: 400;
-        color: #616065;
+      }
+
+      .sidebar-menu-item-active {
+        background-color: #e8f3ff;
+
+        .sidebar-menu-icon {
+          color: #0275f2 !important;
+        }
+        .sidebar-menu-text {
+          color: #0275f2 !important;
+        }
+      }
+
+      .sidebar-menu-item {
+        width: 100%;
+        height: 40px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        border-radius: 8px;
+        cursor: pointer;
+
+        .sidebar-menu-icon {
+          margin: 0 10px;
+          font-size: 20px;
+        }
+        .sidebar-menu-text {
+          margin-left: 10px;
+          font-size: 16px;
+          font-weight: 400;
+          color: #616065;
+        }
       }
     }
   }
@@ -165,18 +169,21 @@
       opacity: 0;
       transition: opacity 0.3s ease;
     }
-    .sidebar-menu-item {
-      justify-content: center;
+    .sidebar-menu-item-wrapper {
+      .sidebar-menu-item {
+        justify-content: center;
 
-      .sidebar-menu-icon {
-        margin: 0;
-      }
-      .sidebar-menu-text {
-        opacity: 0;
-        transform: translateX(-10px);
-        pointer-events: none;
-        transition: opacity 0.3s ease, transform 0.3s ease;
-        width: 0;
+        .sidebar-menu-icon {
+          margin: 0;
+        }
+        .sidebar-menu-text {
+          opacity: 0;
+          transform: translateX(-10px);
+          pointer-events: none;
+          transition: opacity 0.3s ease, transform 0.3s ease;
+          width: 0;
+          display: none;
+        }
       }
     }
   }

src/components/Sidebar/index.jsx

@@ -44,10 +44,8 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
         {routes
           .filter((item) => item.showMenu)
           ?.map((item) => (
-            <>
-              <p className="sidebar-menu-title" key={item.name}>
-                {item.name}
-              </p>
+            <div key={item.key} className="sidebar-menu-item-wrapper">
+              <p className="sidebar-menu-title">{item.name}</p>
               {item.routes
                 ?.filter((i) => i.showMenuItem)
                 ?.map((j) => (
@@ -60,14 +58,11 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
                     key={j.path}
                     onClick={() => handleNavClick(j.path)}
                   >
-                    <IconFont
-                      className="sidebar-menu-icon"
-                      name="icon-yishiming"
-                    />
+                    <IconFont className="sidebar-menu-icon" name={j.icon} />
                     <span className="sidebar-menu-text">{j.name}</span>
                   </li>
                 ))}
-            </>
+            </div>
           ))}
       </ul>
       <div className="sidebar-btn" onClick={toggleSidebar}>

src/components/StageProgress/index.css

@@ -42,10 +42,8 @@
       color: #bfbfbf;
     }
     .star {
-      width: 20px;
-      height: 20px;
-      background-image: url("@/assets/images/StageProgress/star_active.png");
-      background-size: 100% 100%;
+      font-size: 20px;
+      color: #88b4ff;
       position: relative;
 
       &::before {

src/components/StageProgress/index.jsx

@@ -1,4 +1,5 @@
 import { useNavigate } from "react-router-dom";
+import IconFont from "@/components/IconFont";
 import "./index.css";
 
 const StageProgress = () => {
@@ -13,7 +14,9 @@ const StageProgress = () => {
       <li className="stage-progress-item stage-progress-item1-active" />
       <li className="stage-progress-item  stage-progress-item2" />
       <li className="stage-progress-star" onClick={handleClickStar}>
-        <div className="star" />
+        <div className="star">
+          <IconFont name="icon-star" />
+        </div>
         <span>垂直方向选择</span>
       </li>
       <li className="stage-progress-item  stage-progress-item3" />