From 97c8fe212b971631fb41a3589cfc026698599d29 Mon Sep 17 00:00:00 2001
From: "tao.chen" <93983997+taochen-ct@users.noreply.github.com>
Date: Tue, 25 Aug 2026 09:59:59 +0800
Subject: [PATCH] update: replace Icon with lucide-react

---
 .../app/features/schedules/ArtifactList.tsx   | 28 +++++++++----
 .../app/features/schedules/NodeInspector.tsx  | 11 ++---
 .../app/features/schedules/RunHistory.tsx     |  6 +--
 .../schedules/ScheduleCanvasHeader.tsx        |  2 -
 .../features/schedules/ScheduleInspector.tsx  |  4 +-
 .../app/features/schedules/ScheduleList.tsx   |  4 +-
 .../app/features/schedules/SchedulePage.tsx   | 42 ++++++++++++-------
 7 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/frontend/app/features/schedules/ArtifactList.tsx b/frontend/app/features/schedules/ArtifactList.tsx
index 7cb2559..ec6811a 100644
--- a/frontend/app/features/schedules/ArtifactList.tsx
+++ b/frontend/app/features/schedules/ArtifactList.tsx
@@ -1,7 +1,14 @@
 import { memo, useMemo, useState } from "react";
 
-import { type ScheduleArtifact } from "../../services/api";
-import Icon from "../../components/common/Icon";
+import { type ScheduleArtifact } from "~/services/api";
+import {
+  BookText,
+  ChevronRight,
+  ExternalLink,
+  FileCode2,
+  GripVertical,
+  Search,
+} from "lucide-react";
 import { shortHash } from "./utils";
 
 // 包裹 memo 让父级 SchedulePage 在画布交互(setSelectedNodeId /
@@ -68,7 +75,7 @@ function ArtifactListImpl({
         </div>
       </div>
       <label className="mx-[10px] mb-[7px] flex min-h-[35px] items-center gap-[7px] rounded-[6px] border border-[#dce5ed] bg-white px-[9px] text-[#95a3b2] focus-within:border-[#8db9e8] focus-within:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]">
-        <Icon name="search" size={15} />
+        <Search size={15} />
         <input
           className="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[#33475d] outline-none placeholder:text-[#a6b2be]"
           value={keyword}
@@ -85,7 +92,6 @@ function ArtifactListImpl({
           groups.map(([scriptName, items]) => {
             const isExpanded = expandedScriptNames.has(scriptName);
             const scriptType = items[0].script_type;
-            const iconName = scriptType === "notebook" ? "notebook" : "python";
             return (
               <div
                 key={scriptName}
@@ -102,7 +108,7 @@ function ArtifactListImpl({
                       data-state={isExpanded ? "open" : "closed"}
                       className="h-[14px] w-[14px] flex-none text-[#9aa7b5] transition-transform duration-[180ms] data-[state=open]:rotate-90"
                     >
-                      <Icon name="chevron" size={14} />
+                      <ChevronRight size={14} />
                     </span>
                     <span
                       className={`grid h-[27px] w-[27px] flex-none place-items-center rounded-[6px] ${
@@ -111,7 +117,11 @@ function ArtifactListImpl({
                           : "bg-[#eaf3ff] text-[#326fc1]"
                       }`}
                     >
-                      <Icon name={iconName} size={14} />
+                      {scriptType === "notebook" ? (
+                        <BookText size={14} />
+                      ) : (
+                        <FileCode2 size={14} />
+                      )}
                     </span>
                     <span
                       className="max-w-[125px] min-w-0 truncate text-[11px] font-semibold text-[#33465a] min-[1281px]:max-w-none"
@@ -146,7 +156,7 @@ function ArtifactListImpl({
                         >
                           <span className="flex min-w-0 items-center gap-[5px]">
                             <span className="h-[13px] w-[13px] flex-none text-[#c4cdd6] group-hover:text-[#7e8d9d]">
-                              <Icon name="grip-vertical" size={13} />
+                              <GripVertical size={13} />
                             </span>
                             <span className="flex-none text-[10px] font-semibold text-[#526477]">
                               {artifact.version_label}
@@ -156,7 +166,7 @@ function ArtifactListImpl({
                             </span>
                           </span>
                           <span className="grid h-[18px] w-[18px] flex-none place-items-center rounded-[4px] text-[#c1cad3] group-hover:bg-[#eef6ff] group-hover:text-[#287ac5]">
-                            <Icon name="external" size={12} />
+                            <ExternalLink size={12} />
                           </span>
                         </div>
                       ))}
@@ -170,7 +180,7 @@ function ArtifactListImpl({
       <p className="mx-[10px] mb-[9px] mt-[3px] flex items-center justify-center gap-1 rounded-[6px] border border-line-soft bg-[#f8fafc] p-[7px_8px] text-center text-[9px] leading-[1.45] text-[#8795a4]">
         <span>按住</span>
         <span className="inline-flex items-center justify-center text-[#9eabb8]">
-          <Icon name="grip-vertical" size={12} />
+          <GripVertical size={12} />
         </span>
         <span>拖拽卡片到画布即可绑定节点</span>
       </p>
diff --git a/frontend/app/features/schedules/NodeInspector.tsx b/frontend/app/features/schedules/NodeInspector.tsx
index 4d6b0ad..19f12d4 100644
--- a/frontend/app/features/schedules/NodeInspector.tsx
+++ b/frontend/app/features/schedules/NodeInspector.tsx
@@ -1,5 +1,5 @@
 import { type ScheduleNode } from "../../services/api";
-import Icon from "../../components/common/Icon";
+import { BookText, FileCode2 } from "lucide-react";
 import { shortHash } from "./utils";
 import { PYTHON_VERSION_OPTIONS, type NodeForm } from "./state/schedulesStore";
 
@@ -28,10 +28,11 @@ export function NodeInspector({
               : "bg-[#eaf3ff] text-[#326fc1]"
           }`}
         >
-          <Icon
-            name={node.version.script_type === "notebook" ? "notebook" : "python"}
-            size={17}
-          />
+          {node.version.script_type === "notebook" ? (
+            <BookText size={17} />
+          ) : (
+            <FileCode2 size={17} />
+          )}
         </span>
         <div className="flex min-w-0 flex-col gap-[3px]">
           <small className="text-[9px] text-[#96a2af]">节点配置</small>
diff --git a/frontend/app/features/schedules/RunHistory.tsx b/frontend/app/features/schedules/RunHistory.tsx
index 16e1245..3e9bb6c 100644
--- a/frontend/app/features/schedules/RunHistory.tsx
+++ b/frontend/app/features/schedules/RunHistory.tsx
@@ -5,7 +5,7 @@ import {
 } from "../../services/api";
 
 import { useApi } from "../../context/AuthContext";
-import Icon from "../../components/common/Icon";
+import { RefreshCw, X } from "lucide-react";
 import { useSchedulesStore } from "./state/schedulesStore";
 import {
   formatDuration,
@@ -231,7 +231,7 @@ export function RunHistory({
           disabled={disabled || loading}
           onClick={onRefresh}
         >
-          <Icon name="refresh" size={13} />
+          <RefreshCw size={13} />
         </button>
       </header>
       <div className="flex min-h-0 flex-1 flex-col gap-[7px] overflow-auto p-[9px]">
@@ -316,7 +316,7 @@ export function RunHistory({
                           aria-label="关闭运行结果"
                           onClick={() => toggleRun(run.run_id)}
                         >
-                          <Icon name="close" size={16} />
+                          <X size={16} />
                         </button>
                       </header>
                       <div className="min-h-0 overflow-auto bg-[#f8fbfe] p-[18px]">
diff --git a/frontend/app/features/schedules/ScheduleCanvasHeader.tsx b/frontend/app/features/schedules/ScheduleCanvasHeader.tsx
index 3d90825..0d6fbee 100644
--- a/frontend/app/features/schedules/ScheduleCanvasHeader.tsx
+++ b/frontend/app/features/schedules/ScheduleCanvasHeader.tsx
@@ -1,5 +1,3 @@
-import Icon from "../../components/common/Icon";
-
 export function ScheduleCanvasHeader({
   linkSourceId,
   onCancelLink,
diff --git a/frontend/app/features/schedules/ScheduleInspector.tsx b/frontend/app/features/schedules/ScheduleInspector.tsx
index c3793e1..45d5e85 100644
--- a/frontend/app/features/schedules/ScheduleInspector.tsx
+++ b/frontend/app/features/schedules/ScheduleInspector.tsx
@@ -1,5 +1,5 @@
 import { type Schedule, type CronPreview } from "../../services/api";
-import Icon from "../../components/common/Icon";
+import { Settings } from "lucide-react";
 import { formatTime } from "./utils";
 
 type ScheduleForm = {
@@ -33,7 +33,7 @@ export function ScheduleInspector({
   if (!schedule) {
     return (
       <div className="flex min-h-full flex-col items-center justify-center p-[30px] text-center text-[#9aa8b6] [&>svg]:mb-[10px] [&>svg]:text-[#93b4d6]">
-        <Icon name="settings" size={28} />
+        <Settings size={28} />
         <strong className="text-[14px] text-[#516a82]">调度属性</strong>
         <p className="text-[11px] leading-[1.6]">
           选中调度方案后可配置触发方式、Cron 和执行策略。
diff --git a/frontend/app/features/schedules/ScheduleList.tsx b/frontend/app/features/schedules/ScheduleList.tsx
index 9b73b7c..0a7e2bf 100644
--- a/frontend/app/features/schedules/ScheduleList.tsx
+++ b/frontend/app/features/schedules/ScheduleList.tsx
@@ -1,5 +1,5 @@
 import { type Schedule } from "../../services/api";
-import Icon from "../../components/common/Icon";
+import { Search } from "lucide-react";
 
 export function ScheduleList({
   schedules,
@@ -36,7 +36,7 @@ export function ScheduleList({
         </div>
       </div>
       <label className="mx-[10px] mb-[7px] flex min-h-[35px] items-center gap-[7px] rounded-[6px] border border-[#dce5ed] bg-white px-[9px] text-[#95a3b2] focus-within:border-[#8db9e8] focus-within:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]">
-        <Icon name="search" size={15} />
+        <Search size={15} />
         <input
           className="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[#33475d] outline-none placeholder:text-[#a6b2be]"
           value={keyword}
diff --git a/frontend/app/features/schedules/SchedulePage.tsx b/frontend/app/features/schedules/SchedulePage.tsx
index ab45f47..859cef4 100644
--- a/frontend/app/features/schedules/SchedulePage.tsx
+++ b/frontend/app/features/schedules/SchedulePage.tsx
@@ -9,7 +9,17 @@ import {
   useRef,
   useState,
 } from "react";
-import { Plus } from 'lucide-react';
+import {
+  BookText,
+  CalendarClock,
+  Check,
+  FileCode2,
+  PackageOpen,
+  Play,
+  Plus,
+  Settings,
+  X,
+} from 'lucide-react';
 import {
   type Schedule,
   type ScheduleArtifact,
@@ -18,7 +28,6 @@ import {
 } from "~/services/api";
 
 import { useApi, useAuth } from "~/context/AuthContext";
-import Icon from "../../components/common/Icon";
 import { NodeInspector } from "./NodeInspector";
 import { RunHistory } from "./RunHistory";
 import { ScheduleInspector } from "./ScheduleInspector";
@@ -92,7 +101,7 @@ function RunNowButton({
       }
       onClick={() => useSchedulesStore.getState().runNow()}
     >
-      <Icon name="play" size={14} />立即运行
+      <Play size={14} />立即运行
     </button>
   );
 }
@@ -370,7 +379,7 @@ export default function SchedulePage({
             disabled={!schedule || Boolean(busy)}
             onClick={() => useSchedulesStore.getState().saveSchedule()}
           >
-            <Icon name="check" size={15} />保存配置
+            <Check size={15} />保存配置
           </button>
           <button
             className="inline-flex min-h-[32px] cursor-pointer items-center justify-center gap-[5px] rounded-[6px] border border-[#dce5ee] bg-white px-2 text-[12px] font-semibold text-[#526477] enabled:hover:border-[#aac6e5] enabled:hover:bg-[#f6faff] enabled:hover:text-[#126aca] disabled:cursor-not-allowed disabled:opacity-50 min-[1281px]:px-3"
@@ -517,10 +526,11 @@ export default function SchedulePage({
                           : "bg-[#eaf3ff] text-[#316fbf]"
                       }`}
                     >
-                      <Icon
-                        name={node.version.script_type === "notebook" ? "notebook" : "python"}
-                        size={14}
-                      />
+                      {node.version.script_type === "notebook" ? (
+                        <BookText size={14} />
+                      ) : (
+                        <FileCode2 size={14} />
+                      )}
                     </span>
                     <strong className="min-w-0 flex-1 truncate text-[12px] text-[#243b53]">
                       {node.node_name}
@@ -536,7 +546,7 @@ export default function SchedulePage({
                         setSelectedEdgeId(null);
                       }}
                     >
-                      <Icon name="settings" size={14} />
+                      <Settings size={14} />
                     </button>
                   </div>
                   <p className="mt-2 mb-1.5 truncate text-[10px] text-[#7e8d9d]">
@@ -571,7 +581,7 @@ export default function SchedulePage({
 
               {!schedule ? (
                 <div className="sticky left-1/2 top-[46%] z-0 mx-auto mt-[190px] flex w-[350px] flex-col items-center text-center text-[#9aa8b6] [&>svg]:mb-3 [&>svg]:text-[#8cb4de]">
-                  <Icon name="schedule" size={34} />
+                  <CalendarClock size={34} />
                   <strong className="text-[14px] text-[#567089]">还没有选中调度方案</strong>
                   <p className="my-[7px_13px] text-[11px]">点击"新建"创建一个调度，然后拖入稳定版本脚本。</p>
                   <button
@@ -584,7 +594,7 @@ export default function SchedulePage({
                 </div>
               ) : schedule.nodes.length === 0 ? (
                 <div className="sticky left-1/2 top-[46%] z-0 mx-auto mt-[190px] flex w-[350px] flex-col items-center text-center text-[#9aa8b6] [&>svg]:mb-3 [&>svg]:text-[#8cb4de]">
-                  <Icon name="release" size={34} />
+                  <PackageOpen size={34} />
                   <strong className="text-[14px] text-[#567089]">从稳定版本开始编排</strong>
                   <p className="my-[7px_13px] text-[11px]">把左侧脚本卡片拖到这里，或双击卡片快速加入。</p>
                 </div>
@@ -680,7 +690,7 @@ export default function SchedulePage({
                 role="menuitem"
                 onClick={() => useSchedulesStore.getState().renameSchedule(contextMenu.schedule)}
               >
-                <Icon name="settings" size={14} />
+                <Settings size={14} />
                 改名
               </button>
               <button
@@ -689,7 +699,7 @@ export default function SchedulePage({
                 role="menuitem"
                 onClick={() => useSchedulesStore.getState().removeSchedule(contextMenu.schedule)}
               >
-                <Icon name="close" size={14} />
+                <X size={14} />
                 删除调度方案
               </button>
             </>
@@ -702,7 +712,7 @@ export default function SchedulePage({
               role="menuitem"
               onClick={() => useSchedulesStore.getState().removeNode(contextMenu.node)}
             >
-              <Icon name="close" size={14} />
+              <X size={14} />
               删除画布节点
             </button>
           )}
@@ -713,7 +723,7 @@ export default function SchedulePage({
               role="menuitem"
               onClick={() => useSchedulesStore.getState().removeEdge(contextMenu.edge)}
             >
-              <Icon name="close" size={14} />
+              <X size={14} />
               删除画布连线
             </button>
           )}
@@ -740,7 +750,7 @@ export default function SchedulePage({
                 disabled={Boolean(busy)}
                 onClick={() => setCreateDialogOpen(false)}
               >
-                <Icon name="close" />
+                <X size={14} />
               </button>
             </div>
             <form onSubmit={handleCreateScheduleSubmit}>