feat: 🎸 批量替换了iconfont

2025-08-26 17:52:19 +08:00
parent 88b7d62cfb
commit 4f780816c6
8 changed files with 58 additions and 75 deletions
--- a/src/assets/iconfont/iconfont.js
+++ b/src/assets/iconfont/iconfont.js
--- a/src/components/IconFont/index.jsx
+++ b/src/components/IconFont/index.jsx
@@ -1,12 +1,11 @@
-import "@/assets/iconfont/iconfont.js";
+const baseUrl =
+  "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/";

 const IconFont = (props) => {
-  const { className, name, onClick } = props;
+  const { className, src, onClick } = props;

  return (
-    <svg className={`icon ${className}`} aria-hidden="true" onClick={onClick}>
-      <use xlinkHref={`#${name}`}></use>
-    </svg>
+    <img src={`${baseUrl}${src}.png`} className={className} onClick={onClick} />
  );
 };

--- a/src/components/Sidebar/index.css
+++ b/src/components/Sidebar/index.css
@@ -145,7 +145,8 @@

        .sidebar-menu-icon {
          margin: 0 10px;
-          font-size: 20px;
+          width: 20px;
+          height: 20px;
        }
        .sidebar-menu-text {
          margin-left: 10px;
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -11,7 +11,6 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const studentInfo = useSelector((state) => state.student.studentInfo);
-  console.log(studentInfo);
  const handleNavClick = (path) => {
    navigate(path);
  };
@@ -67,7 +66,10 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
                    key={j.path}
                    onClick={() => handleNavClick(j.path)}
                  >
-                    <IconFont className="sidebar-menu-icon" name={j.icon} />
+                    <IconFont
+                      className="sidebar-menu-icon"
+                      src={location.pathname === j.path ? j.active : j.default}
+                    />
                    <span className="sidebar-menu-text">{j.name}</span>
                  </li>
                ))}
--- a/src/components/StageProgress/index.css
+++ b/src/components/StageProgress/index.css
@@ -83,16 +83,24 @@
    color: #0077ff !important;
  }

-  .stage-progress-item-text,
-  .stage-progress-item-icon {
+  .stage-progress-item-text {
    font-size: 16px;
    font-weight: 500;
    color: #86909c;
    margin: 0 5px;
  }

-  .stage-progress-item-text-active,
-  .stage-progress-item-icon-active {
+  .stage-progress-item-icon {
+    width: 20px;
+    height: 20px;
+  }
+  .stage-progress-item-icon2 {
+    width: 5px;
+    height: 10px;
+    margin: 0 10px;
+  }
+
+  .stage-progress-item-text-active {
    color: #fff !important;
  }

--- a/src/components/StageProgress/index.jsx
+++ b/src/components/StageProgress/index.jsx
@@ -18,15 +18,12 @@ const StageProgress = () => {
        <span className="stage-progress-item-text stage-progress-item-text-active">
          生涯起航
        </span>
-        <IconFont
-          name="icon-zuoye"
-          className="stage-progress-item-icon stage-progress-item-icon-active"
-        />
+        <IconFont src="recuUY5n0dIJKu" className="stage-progress-item-icon" />
      </li>
      <li className="stage-progress-item">
        <span className="stage-progress-item-step">step2</span>
        <span className="stage-progress-item-text">能力跃升</span>
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5kKp4Qc5" className="stage-progress-item-icon" />
      </li>
      <li className="stage-progress-text" onClick={handleClickStar}>
        <span>垂直方向选择</span>
@@ -34,16 +31,16 @@ const StageProgress = () => {
      <li className="stage-progress-item">
        <span className="stage-progress-item-step">step3</span>
        <span className="stage-progress-item-text">垂直精进</span>
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5qlmzVhH" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5xdpLNXn" className="stage-progress-item-icon2" />
+        <IconFont src="recuUY5joxSk5C" className="stage-progress-item-icon" />
      </li>
      <li className="stage-progress-item4 ">
        <span className="stage-progress-item-step">step4</span>
        <span className="stage-progress-item-text">决胜求职</span>
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5lTOco3Q" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5xdpLNXn" className="stage-progress-item-icon2" />
+        <IconFont src="recuUY5luVMCPc" className="stage-progress-item-icon" />
      </li>
    </ul>
  );
--- a/src/global.css
+++ b/src/global.css
@@ -189,14 +189,6 @@ html {
  font-size: 32;
 }

-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentcolor;
-  overflow: hidden;
-}
-
 /* ==============================
   自定义字体使用示例
   ============================== */
@@ -207,30 +199,3 @@ body {
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
 }
-
-/* 使用自定义字体的工具类 */
-.font-unitext {
-  font-family: "Unitext", sans-serif;
-}
-
-.font-custom {
-  font-family: "CustomFont", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-}
-
-/* 特定场景的字体应用 */
-.title-custom {
-  font-family: "Unitext", serif;
-  font-weight: 900;
-  font-style: italic;
-}
-
-.text-custom {
-  font-family: "CustomFont", sans-serif;
-  font-weight: 400;
-}
-
-.text-custom-bold {
-  font-family: "CustomFont", sans-serif;
-  font-weight: 700;
-}
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -40,21 +40,24 @@ export default [
        path: "/dashboard",
        name: "主页",
        element: <Dashboard />,
-        icon: "icon-home",
+        default: "recuUY5h1bw5IS",
+        active: "recuUY5gBxD77p",
        showMenuItem: true,
      },
      {
        path: "/profile",
        name: "个人档案",
        element: <PersonalProfile />,
-        icon: "icon-dangan",
+        default: "recuUY58caXGYc",
+        active: "recuUY57QGFVLZ",
        showMenuItem: true,
      },
      {
        path: "/calendar",
        name: "日历",
        element: <CalendarPage />,
-        icon: "icon-rili",
+        default: "recuUY5da0tNkb",
+        active: "recuUY5dvQEYlx",
        showMenuItem: true,
      },
    ],
@@ -68,35 +71,40 @@ export default [
        path: "/public-courses",
        name: "公共课直播间",
        element: <PublicCourses />,
-        icon: "icon-zhibojian",
+        default: "recuUY58WKcNff",
+        active: "recuUY58zAsmTX",
        showMenuItem: true,
      },
      {
        path: "/live",
        name: "课程直播间",
        element: <LivePage />,
-        icon: "icon-kecheng",
+        default: "recuUY5aCUaFlW",
+        active: "recuUY5abx7Arx",
        showMenuItem: true,
      },
      {
        path: "/career-tree",
        name: "就业管家知识树",
        element: <CareerTreePage />,
-        icon: "icon-zhishishu",
+        default: "recuUY59K6SkoO",
+        active: "recuUY59l98AZg",
        showMenuItem: true,
      },
      {
        path: "/homework",
        name: "课后作业",
        element: <HomeworkPage />,
-        icon: "icon-zuoye",
+        default: "recuUY5bpDGGa2",
+        active: "recuUY5aZHbzCC",
        showMenuItem: true,
      },
      {
        path: "/job-strategy",
        name: "定制求职策略",
        element: <JobStrategyPage />,
-        icon: "icon-dingzhicelue",
+        default: "recuUY5h1bw5IS",
+        active: "recuUY5742LbQO",
        showMenuItem: true,
      },
      {
@@ -104,13 +112,13 @@ export default [
        name: "定制求职策略详情",
        element: <JobStrategyDetailPage />,
        showMenu: false,
-        icon: null,
      },
      {
        path: "/interview-simulation",
        name: "线下面试模拟",
        element: <InterviewSimulationPage />,
-        icon: "icon-mianshimoni",
+        default: "recuUY5geqjOp8",
+        active: "recuUY5fQqg5MD",
        showMenuItem: true,
      },
    ],
@@ -124,14 +132,16 @@ export default [
        path: "/expert-support",
        name: "专家支持中心",
        element: <ExpertSupportPage />,
-        icon: "icon-zhichizhongxin",
+        default: "recuUY5hQnbcBY",
+        active: "recuUY5hsxnmk6",
        showMenuItem: true,
      },
      {
        path: "/company-jobs",
        name: "企业内推岗位",
        element: <CompanyJobsPage />,
-        icon: "icon-neitui",
+        default: "recuUY5chbV7Mn",
+        active: "recuUY5bPS4Ixx",
        showMenuItem: true,
      },
      {
@@ -139,27 +149,29 @@ export default [
        name: "企业内推岗位列表",
        element: <CompanyJobsListPage />,
        showMenu: false,
-        icon: null,
      },
      {
        path: "/resume-interview",
        name: "我的简历与面试",
        element: <ResumeInterviewPage />,
-        icon: "icon-jianli",
+        default: "recuUY5dTT3xbx",
+        active: "recuUY5dvQEYlx",
        showMenuItem: true,
      },
      {
        path: "/project-library",
        name: "我的项目库",
        element: <ProjectLibraryPage />,
-        icon: "icon-jianli",
+        default: "recuUY5eH5ZaYR",
+        active: "recuUY5ejgtOo5",
        showMenuItem: true,
      },
      {
        path: "/portfolio",
        name: "我的作品集",
        element: <Portfolio />,
-        icon: "icon-zuopinji",
+        default: "recuUY5frYJKLC",
+        active: "recuUY5f5an72x",
        showMenuItem: true,
      },
    ],