q792602257/DataMate
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chenghh-9609
2025-10-22 15:51:50 +08:00
parent f17e82a3cc
commit 69b9517181
20 changed files with 66 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/CardView.tsx
View File

@@ -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 */}

2
frontend/src/components/DetailHeader.tsx
View File

@@ -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"

2
frontend/src/components/RadioCard.tsx
View File

@@ -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,

6
frontend/src/components/TagManagement.tsx
View File

@@ -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

2
frontend/src/components/TaskPopover.tsx
View File

@@ -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">

26
frontend/src/index.css
View File

@@ -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;
}
}

4
frontend/src/pages/DataAnnotation/Annotate/components/ImageAnnotation.tsx
View File

@@ -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}

4
frontend/src/pages/DataAnnotation/Create/CreateTask.tsx
View File

@@ -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}

4
frontend/src/pages/DataCleansing/Create/CreateTask.tsx
View File

@@ -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 ? (

4
frontend/src/pages/DataCleansing/Create/CreateTempate.tsx
View File

@@ -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 ? (

2
frontend/src/pages/DataCleansing/Create/components/OperatorOrchestration.tsx
View File

@@ -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}

2
frontend/src/pages/DataCleansing/Home/components/ProcessFlowDiagram.tsx
View File

@@ -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) => {

6
frontend/src/pages/DataCleansing/cleansing.model.ts
View File

@@ -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;

4
frontend/src/pages/DataManagement/Create/CreateDataset.tsx
View File

@@ -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}>
确定

2
frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx
View File

@@ -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" && (

4
frontend/src/pages/Layout/MainLayout.tsx
View File

@@ -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>

6
frontend/src/pages/OperatorMarket/Create/OperatorPluginCreate.tsx
View File

@@ -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} />
)}

9
frontend/src/pages/OperatorMarket/Home/OperatorMarket.tsx
View File

@@ -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 })

4
frontend/src/pages/OperatorMarket/Home/components/Filters.tsx
View File

@@ -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

16
frontend/src/pages/OperatorMarket/Home/components/List.tsx
View File

@@ -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) => (