refactor: update component styles and improve layout with new utility classes

chenghh-9609 · chenghh-9609 · commit 69b951718128 · 2025-10-22T15:51:50.000+08:00
diff --git a/frontend/src/components/CardView.tsx b/frontend/src/components/CardView.tsx
@@ -168,12 +168,12 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
   const ops = (item) =>
     typeof operations === "function" ? operations(item) : operations;
   return (
-    <div className="flex-1 flex flex-col overflow-auto">
-      <div className="overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
+    <div className="flex-overflow-hidden">
+      <div className="flex-overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
         {data.map((item) => (
           <div
             key={item.id}
-            className="border border-gray-100 rounded-lg p-4 bg-white hover:shadow-lg transition-shadow duration-200"
+            className="border-card p-4 bg-white hover:shadow-lg transition-shadow duration-200"
           >
             <div className="flex flex-col space-y-4 h-full">
               {/* Header */}
diff --git a/frontend/src/components/DetailHeader.tsx b/frontend/src/components/DetailHeader.tsx
@@ -48,7 +48,7 @@ function DetailHeader<T>({
       <div className="flex items-start justify-between">
         <div className="flex items-start gap-4 flex-1">
           <div
-            className={`w-16 h-16 text-white rounded-xl flex items-center justify-center shadow-lg ${
+            className={`w-16 h-16 text-white rounded-lg flex-center shadow-lg ${
               data?.iconColor
                 ? data.iconColor
                 : "bg-gradient-to-br from-blue-100 to-blue-200"
diff --git a/frontend/src/components/RadioCard.tsx b/frontend/src/components/RadioCard.tsx
@@ -32,7 +32,7 @@ const RadioCard: React.FC<RadioCardProps> = ({
       {options.map((option) => (
         <div
           key={option.value}
-          className="border border-gray-200 rounded-lg hover:shadow-lg p-4 text-center"
+          className="border-card hover:shadow-lg p-4 text-center"
           style={{
             borderColor: value === option.value ? "#1677ff" : undefined,
             background: value === option.value ? "#e6f7ff" : undefined,
diff --git a/frontend/src/components/TagManagement.tsx b/frontend/src/components/TagManagement.tsx
@@ -30,7 +30,7 @@ function CustomTag({
   return (
     <div
       key={tag.id}
-      className="flex items-center justify-between px-4 py-2 border border-gray-100 rounded-md hover:bg-gray-50"
+      className="flex items-center justify-between px-4 py-2 border-card hover:bg-gray-50"
     >
       {editingTag?.id === tag.id ? (
         <div className="flex gap-2 flex-1">
@@ -199,7 +199,7 @@ const TagManager: React.FC = ({
         title="标签管理"
         width={500}
       >
-        <div className="space-y-4 flex flex-col overflow-y-auto h-full">
+        <div className="space-y-4 flex-overflow">
           {/* Add New Tag */}
           <div className="flex gap-2">
             <Input
@@ -223,7 +223,7 @@ const TagManager: React.FC = ({
             </Button>
           </div>
 
-          <div className="flex-1 overflow-auto">
+          <div className="flex-overflow">
             <div className="overflow-auto grid grid-cols-2 gap-2">
               {tags.map((tag) => (
                 <CustomTag
diff --git a/frontend/src/components/TaskPopover.tsx b/frontend/src/components/TaskPopover.tsx
@@ -89,7 +89,7 @@ export default function TaskPopover() {
                 {tasks.map((task) => (
                   <div
                     key={task.id}
-                    className="p-3 border border-gray-100 rounded-lg hover:bg-gray-50"
+                    className="p-3 border-card hover:bg-gray-50"
                   >
                     <div className="space-y-2">
                       <div className="flex items-center justify-between">
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -42,4 +42,28 @@
   opacity: 100%;
   visibility: visible;
   transform: translateX(0);
-}
+}
+
+@layer components {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+  .flex-overflow-auto {
+    @apply flex-1 flex flex-col overflow-auto h-full;
+  }
+  .flex-overflow-hidden {
+    @apply flex flex-col h-full overflow-hidden;
+  }
+  .border-card {
+    @apply border border-[#f0f0f0] rounded-lg bg-white;
+  }
+  .border {
+    @apply border border-gray-100;
+  }
+  .border-bottom {
+    @apply border-b border-gray-100;
+  }
+  .border-top {
+    @apply border-t border-gray-100;
+  }
+}
diff --git a/frontend/src/pages/DataAnnotation/Annotate/components/ImageAnnotation.tsx b/frontend/src/pages/DataAnnotation/Annotate/components/ImageAnnotation.tsx
@@ -429,7 +429,7 @@ export default function ImageAnnotationWorkspace({
               }`}
               onClick={() => setSelectedImageIndex(index)}
             >
-              <div className="w-8 h-8 bg-gray-200 rounded flex items-center justify-center text-sm font-medium mr-3">
+              <div className="w-8 h-8 bg-gray-200 rounded flex-center text-sm font-medium mr-3">
                 {index + 1}
               </div>
               <img
@@ -462,7 +462,7 @@ export default function ImageAnnotationWorkspace({
               </div>
             </div>
 
-            <div className="flex-1 border rounded-lg overflow-hidden bg-gray-100 relative">
+            <div className="flex-1 border-card overflow-hidden bg-gray-100 relative">
               <canvas
                 ref={canvasRef}
                 width={800}
diff --git a/frontend/src/pages/DataAnnotation/Create/CreateTask.tsx b/frontend/src/pages/DataAnnotation/Create/CreateTask.tsx
@@ -123,7 +123,7 @@ export default function AnnotationTaskCreate() {
   };
 
   return (
-    <div className="h-full flex flex-col overflow-auto">
+    <div className="flex-overflow-auto">
       {/* Header */}
       <div className="flex items-center mb-2">
         <Link to="/data/annotation">
@@ -134,7 +134,7 @@ export default function AnnotationTaskCreate() {
         <h1 className="text-xl font-bold bg-clip-text">创建标注任务</h1>
       </div>
 
-      <div className="h-full flex-1 overflow-y-auto flex flex-col bg-white rounded-lg shadow-sm">
+      <div className="flex-overflow-auto bg-white rounded-lg shadow-sm">
         <div className="flex-1 overflow-y-auto p-6">
           <Form
             form={form}
diff --git a/frontend/src/pages/DataCleansing/Create/CreateTask.tsx b/frontend/src/pages/DataCleansing/Create/CreateTask.tsx
@@ -101,9 +101,9 @@ export default function CleansingTaskCreate() {
         </div>
       </div>
       {/* Step Content */}
-      <div className="h-full mb-4 flex flex-col overflow-auto flex-1 bg-white rounded shadow-sm">
+      <div className="flex-overflow-auto bg-white border-card">
         <div className="flex-1 overflow-auto m-6">{renderStepContent()}</div>
-        <div className="flex justify-end p-6 gap-3 border-t border-gray-200">
+        <div className="flex justify-end p-6 gap-3 border-top">
           <Button onClick={() => navigate("/data/cleansing")}>取消</Button>
           {currentStep > 1 && <Button onClick={handlePrev}>上一步</Button>}
           {currentStep === 2 ? (
diff --git a/frontend/src/pages/DataCleansing/Create/CreateTempate.tsx b/frontend/src/pages/DataCleansing/Create/CreateTempate.tsx
@@ -90,9 +90,9 @@ export default function CleansingTemplateCreate() {
         </div>
       </div>
 
-      <div className="h-full mb-4 flex flex-col overflow-auto flex-1 bg-white rounded shadow-sm">
+      <div className="flex-overflow-auto border-card">
         <div className="flex-1 overflow-auto m-6">{renderStepContent()}</div>
-        <div className="flex justify-end p-6 gap-3 border-t border-gray-200">
+        <div className="flex justify-end p-6 gap-3 border-top">
           <Button onClick={() => navigate("/data/cleansing")}>取消</Button>
           {currentStep > 1 && <Button onClick={handlePrev}>上一步</Button>}
           {currentStep === 2 ? (
diff --git a/frontend/src/pages/DataCleansing/Create/components/OperatorOrchestration.tsx b/frontend/src/pages/DataCleansing/Create/components/OperatorOrchestration.tsx
@@ -105,7 +105,7 @@ const OperatorFlow: React.FC<OperatorFlowProps> = ({
       </div>
       {/* 编排区域 */}
       <div
-        className="flex-1 overflow-auto p-4 flex flex-col gap-2"
+        className="flex-overflow-auto p-4 gap-2"
         onDragOver={(e) => e.preventDefault()}
         onDragLeave={handleContainerDragLeave}
         onDrop={handleDropToContainer}
diff --git a/frontend/src/pages/DataCleansing/Home/components/ProcessFlowDiagram.tsx b/frontend/src/pages/DataCleansing/Home/components/ProcessFlowDiagram.tsx
@@ -56,7 +56,7 @@ export default function ProcessFlowDiagram() {
   ];
 
   return (
-    <div className="rounded-xl border border-gray-200 p-6 bg-white">
+    <div className="border-card p-6">
       <div className="w-full flex items-center justify-center">
         <div className="w-full flex items-center space-x-12">
           {flowSteps.map((step, index) => {
diff --git a/frontend/src/pages/DataCleansing/cleansing.model.ts b/frontend/src/pages/DataCleansing/cleansing.model.ts
@@ -16,7 +16,11 @@ export interface CleansingTask {
     color: string;
   };
   startedAt: string;
-  progress: number;
+  progress: {
+    finishedFileNum: number;
+    process: 100,
+    totalFileNum: number;
+  };
   operators: OperatorI[];
   createdAt: string;
   updatedAt: string;
diff --git a/frontend/src/pages/DataManagement/Create/CreateDataset.tsx b/frontend/src/pages/DataManagement/Create/CreateDataset.tsx
@@ -56,7 +56,7 @@ export default function DatasetCreate() {
       </div>
 
       {/* form */}
-      <div className="h-full flex flex-col flex-1 overflow-auto bg-white border-gray-200 rounded shadow-sm">
+      <div className="flex-overflow-auto border-card">
         <div className="flex-1 p-6 overflow-auto">
           <Form
             form={form}
@@ -67,7 +67,7 @@ export default function DatasetCreate() {
             <BasicInformation data={newDataset} setData={setNewDataset} />
           </Form>
         </div>
-        <div className="flex gap-2 justify-end p-6 border-t border-gray-200">
+        <div className="flex gap-2 justify-end p-6 border-top">
           <Button onClick={() => navigate("/data/management")}>取消</Button>
           <Button type="primary" onClick={handleSubmit}>
             确定
diff --git a/frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx b/frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx
@@ -200,7 +200,7 @@ export default function DatasetDetail() {
           },
         }}
       />
-      <div className="h-full flex flex-col flex-1 overflow-auto p-6 pt-2 bg-white rounded-md shadow">
+      <div className="flex-overflow-auto p-6 pt-2 bg-white rounded-md shadow">
         <Tabs activeKey={activeTab} items={tabList} onChange={setActiveTab} />
         <div className="h-full overflow-auto">
           {activeTab === "overview" && (
diff --git a/frontend/src/pages/Layout/MainLayout.tsx b/frontend/src/pages/Layout/MainLayout.tsx
@@ -9,9 +9,9 @@ const MainLayout = () => {
         {/* Sidebar */}
         <Sidebar />
         {/* Main Content */}
-        <div className="flex-1 flex flex-col overflow-auto p-6">
+        <div className="flex-overflow-auto p-6">
           {/* Content Area */}
-          <div className="flex-1 flex flex-col overflow-auto">
+          <div className="flex-overflow-auto">
             <Outlet />
           </div>
         </div>
diff --git a/frontend/src/pages/OperatorMarket/Create/OperatorPluginCreate.tsx b/frontend/src/pages/OperatorMarket/Create/OperatorPluginCreate.tsx
@@ -123,7 +123,7 @@ export default function OperatorPluginCreate() {
   };
 
   return (
-    <div className="h-full flex flex-col overflow-auto bg-gray-50">
+    <div className="flex-overflow-auto bg-gray-50">
       {/* Header */}
       <div className="flex justify-between items-center">
         <div className="flex items-center gap-4">
@@ -167,8 +167,8 @@ export default function OperatorPluginCreate() {
       </div>
 
       {/* Content */}
-      <div className="h-full flex flex-col flex-1 overflow-y-auto p-6 mt-4 bg-white rounded-md shadow">
-        <div className="h-full w-full flex flex-col flex-1 overflow-y-auto">
+      <div className="flex-overflow-auto p-6 mt-4 bg-white border-card">
+        <div className="flex-overflow-auto">
           {uploadStep === "upload" && (
             <UploadStep onUpload={handleFileUpload} isUploading={isUploading} />
           )}
diff --git a/frontend/src/pages/OperatorMarket/Home/OperatorMarket.tsx b/frontend/src/pages/OperatorMarket/Home/OperatorMarket.tsx
@@ -115,9 +115,9 @@ export default function OperatorMarketPage() {
         </div> */}
       </div>
       {/* Main Content */}
-      <div className="flex flex-1 overflow-auto h-full bg-white rounded-lg">
+      <div className="flex-overflow-auto flex-row border-card">
         <div
-          className={`border-r border-gray-200 transition-all duration-300 ${
+          className={`border-r border-gray-100 transition-all duration-300 ${
             showFilters
               ? "translate-x-0 w-56"
               : "-translate-x-full w-0 opacity-0"
@@ -130,7 +130,7 @@ export default function OperatorMarketPage() {
             setSelectedFilters={setSelectedFilters}
           />
         </div>
-        <div className="flex-1 bg-yellow flex flex-col px-4 my-4">
+        <div className="flex-overflow-auto p-6 ">
           <div className="flex w-full items-top gap-4 border-b border-gray-200 mb-4">
             {!showFilters && (
               <Button
@@ -139,9 +139,8 @@ export default function OperatorMarketPage() {
                 onClick={() => setShowFilters(true)}
               />
             )}
-            <div className="flex-1">
+            <div className="flex-1 mb-4">
               <SearchControls
-                className="mb-4"
                 searchTerm={searchParams.keyword}
                 onSearchChange={(keyword) =>
                   setSearchParams({ ...searchParams, keyword })
diff --git a/frontend/src/pages/OperatorMarket/Home/components/Filters.tsx b/frontend/src/pages/OperatorMarket/Home/components/Filters.tsx
@@ -129,7 +129,7 @@ const Filters: React.FC<FiltersProps> = ({
   );
 
   return (
-    <div className="p-4 space-y-4 h-full overflow-y-auto">
+    <div className="p-6 space-y-4 h-full overflow-y-auto">
       {/* Filter Header */}
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-gray-900 flex items-center gap-2">
@@ -142,7 +142,7 @@ const Filters: React.FC<FiltersProps> = ({
               className="cursor-pointer hover:text-blue-500"
             ></Button>
           </Tooltip>
-          筛选器
+          <h4>筛选器</h4>
         </h3>
         {hasActiveFilters && (
           <span
diff --git a/frontend/src/pages/OperatorMarket/Home/components/List.tsx b/frontend/src/pages/OperatorMarket/Home/components/List.tsx
@@ -1,6 +1,6 @@
-import { Button, Avatar, List, Tag, Badge } from "antd";
+import { Button, List, Tag, Badge } from "antd";
 import { DeleteOutlined, EditOutlined, StarFilled } from "@ant-design/icons";
-import { Brain, Code, Cpu, Package, Zap, Settings, X } from "lucide-react";
+import { Zap, Settings, X } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { Operator } from "../../operator.model";
@@ -49,20 +49,10 @@ export function ListView({ operators, pagination }) {
       statusConfig[status as keyof typeof statusConfig] || statusConfig.active
     );
   };
-  const getTypeIcon = (type: string) => {
-    const iconMap = {
-      preprocessing: Code,
-      training: Brain,
-      inference: Cpu,
-      postprocessing: Package,
-    };
-    const IconComponent = iconMap[type as keyof typeof iconMap] || Code;
-    return <IconComponent className="w-4 h-4" />;
-  };
 
   return (
     <List
-      className="p-4 overflow-auto mx-4"
+      className="p-4 flex-1 overflow-auto mx-4"
       dataSource={operators}
       pagination={pagination}
       renderItem={(operator) => (

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ export default function TaskPopover() {`
`89`	`89`	`{tasks.map((task) => (`
`90`	`90`	`<div`
`91`	`91`	`key={task.id}`
`92`		`- className="p-3 border border-gray-100 rounded-lg hover:bg-gray-50"`
	`92`	`+ className="p-3 border-card hover:bg-gray-50"`
`93`	`93`	`>`
`94`	`94`	`<div className="space-y-2">`
`95`	`95`	`<div className="flex items-center justify-between">`