Skip to content

Commit e8e2c1a

Browse files
chenghh-9609chenghh-9609
authored
refactor: 修复标签管理功能、优化数据选择项显示、屏蔽开发中功能 (#12)
* refactor: clean up tag management and dataset handling, update API endpoints * feat: add showTime prop to DevelopmentInProgress component across multiple pages * refactor: update component styles and improve layout with new utility classes
1 parent 1c97afe commit e8e2c1a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+223
-237
lines changed

‎frontend/src/components/CardView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,12 +168,12 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
168168
const ops = (item) =>
169169
typeof operations === "function" ? operations(item) : operations;
170170
return (
171-
<div className="flex-1 flex flex-col overflow-auto">
172-
<div className="overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
171+
<div className="flex-overflow-hidden">
172+
<div className="flex-overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
173173
{data.map((item) => (
174174
<div
175175
key={item.id}
176-
className="border border-gray-100 rounded-lg p-4 bg-white hover:shadow-lg transition-shadow duration-200"
176+
className="border-card p-4 bg-white hover:shadow-lg transition-shadow duration-200"
177177
>
178178
<div className="flex flex-col space-y-4 h-full">
179179
{/* Header */}

‎frontend/src/components/DetailHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function DetailHeader<T>({
4848
<div className="flex items-start justify-between">
4949
<div className="flex items-start gap-4 flex-1">
5050
<div
51-
className={`w-16 h-16 text-white rounded-xl flex items-center justify-center shadow-lg ${
51+
className={`w-16 h-16 text-white rounded-lg flex-center shadow-lg ${
5252
data?.iconColor
5353
? data.iconColor
5454
: "bg-gradient-to-br from-blue-100 to-blue-200"

‎frontend/src/components/DevelopmentInProgress.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { Button } from "antd";
2-
3-
const DevelopmentInProgress = ({ showHome = true }) => {
2+
const DevelopmentInProgress = ({ showHome = true, showTime = "" }) => {
43
return (
54
<div className="mt-40 flex flex-col items-center justify-center">
65
<div className="hero-icon">🚧</div>
76
<h1 className="text-2xl font-bold">功能开发中</h1>
8-
<p className="mt-4">
9-
为了给您带来更好的体验，我们计划<b>2025.10.30</b>
10-
开放此功能
11-
</p>
7+
{showTime && (
8+
<p className="mt-4">
9+
为了给您带来更好的体验，我们计划<b>{showTime}</b>
10+
开放此功能
11+
</p>
12+
)}
1213
{showHome && (
1314
<Button
1415
type="primary"

‎frontend/src/components/RadioCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const RadioCard: React.FC<RadioCardProps> = ({
3232
{options.map((option) => (
3333
<div
3434
key={option.value}
35-
className="border border-gray-200 rounded-lg hover:shadow-lg p-4 text-center"
35+
className="border-card hover:shadow-lg p-4 text-center"
3636
style={{
3737
borderColor: value === option.value ? "#1677ff" : undefined,
3838
background: value === option.value ? "#e6f7ff" : undefined,

‎frontend/src/components/TagManagement.tsx‎

Lines changed: 41 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function CustomTag({
3030
return (
3131
<div
3232
key={tag.id}
33-
className="flex items-center justify-between px-4 py-2 border border-gray-100 rounded-md hover:bg-gray-50"
33+
className="flex items-center justify-between px-4 py-2 border-card hover:bg-gray-50"
3434
>
3535
{editingTag?.id === tag.id ? (
3636
<div className="flex gap-2 flex-1">
@@ -92,17 +92,6 @@ function CustomTag({
9292
);
9393
}
9494

95-
export const mockPreparedTags = [
96-
{ id: "1", name: "重要" },
97-
{ id: "2", name: "待处理" },
98-
{ id: "3", name: "已完成" },
99-
{ id: "4", name: "审核中" },
100-
{ id: "5", name: "高优先级" },
101-
{ id: "6", name: "低优先级" },
102-
{ id: "7", name: "客户A" },
103-
{ id: "8", name: "客户B" },
104-
];
105-
10695
const TagManager: React.FC = ({
10796
onFetch,
10897
onCreate,
@@ -112,7 +101,7 @@ const TagManager: React.FC = ({
112101
onFetch: () => Promise<any>;
113102
onCreate: (tag: Pick<TagItem, "name">) => Promise<{ ok: boolean }>;
114103
onDelete: (tagId: number) => Promise<{ ok: boolean }>;
115-
onUpdate: (oldTagId: number, newTag: string) => Promise<{ ok: boolean }>;
104+
onUpdate: (tag: TagItem) => Promise<{ ok: boolean }>;
116105
}) => {
117106
const [showTagManager, setShowTagManager] = useState(false);
118107
const { message } = App.useApp();
@@ -121,9 +110,6 @@ const TagManager: React.FC = ({
121110
const [editingTag, setEditingTag] = useState<string | null>(null);
122111
const [editingTagValue, setEditingTagValue] = useState("");
123112

124-
// 预置标签
125-
const [preparedTags, setPreparedTags] = useState(mockPreparedTags);
126-
127113
// 获取标签列表
128114
const fetchTags = async () => {
129115
if (!onFetch) return;
@@ -161,7 +147,7 @@ const TagManager: React.FC = ({
161147

162148
const updateTag = async (oldTag: TagItem, newTag: string) => {
163149
try {
164-
await onUpdate?.(oldTag.id, { ...oldTag, name: newTag });
150+
await onUpdate?.({ ...oldTag, name: newTag });
165151
fetchTags();
166152
message.success("标签更新成功");
167153
} catch (error) {
@@ -213,54 +199,47 @@ const TagManager: React.FC = ({
213199
title="标签管理"
214200
width={500}
215201
>
216-
<div className="space-y-4">
202+
<div className="space-y-4 flex-overflow">
217203
{/* Add New Tag */}
218-
<div className="space-y-2">
219-
<div className="flex gap-2">
220-
<Input
221-
placeholder="输入标签名称..."
222-
value={newTag}
223-
allowClear
224-
onChange={(e) => setNewTag(e.target.value)}
225-
onKeyPress={(e) => {
226-
if (e.key === "Enter") {
227-
addTag(e.target.value);
228-
}
229-
}}
230-
/>
231-
<Button
232-
type="primary"
233-
onClick={handleCreateNewTag}
234-
disabled={!newTag.trim()}
235-
icon={<PlusOutlined />}
236-
>
237-
添加
238-
</Button>
239-
</div>
240-
</div>
241-
242-
<h2 className="font-large font-bold w-full">预置标签</h2>
243-
<div className="grid grid-cols-2 gap-2">
244-
{preparedTags.length > 0 &&
245-
preparedTags.map((tag) => <CustomTag key={tag.id} tag={tag} />)}
204+
<div className="flex gap-2">
205+
<Input
206+
placeholder="输入标签名称..."
207+
value={newTag}
208+
allowClear
209+
onChange={(e) => setNewTag(e.target.value)}
210+
onKeyPress={(e) => {
211+
if (e.key === "Enter") {
212+
addTag(e.target.value);
213+
}
214+
}}
215+
/>
216+
<Button
217+
type="primary"
218+
onClick={handleCreateNewTag}
219+
disabled={!newTag.trim()}
220+
icon={<PlusOutlined />}
221+
>
222+
添加
223+
</Button>
246224
</div>
247225

248-
<h2 className="font-large font-bold w-full">自定义标签</h2>
249-
<div className="grid grid-cols-2 gap-2 mt-4">
250-
{tags.map((tag) => (
251-
<CustomTag
252-
isEditable
253-
key={tag.id}
254-
tag={tag}
255-
editingTag={editingTag}
256-
editingTagValue={editingTagValue}
257-
setEditingTag={setEditingTag}
258-
setEditingTagValue={setEditingTagValue}
259-
handleEditTag={handleEditTag}
260-
handleCancelEdit={handleCancelEdit}
261-
handleDeleteTag={handleDeleteTag}
262-
/>
263-
))}
226+
<div className="flex-overflow">
227+
<div className="overflow-auto grid grid-cols-2 gap-2">
228+
{tags.map((tag) => (
229+
<CustomTag
230+
isEditable
231+
key={tag.id}
232+
tag={tag}
233+
editingTag={editingTag}
234+
editingTagValue={editingTagValue}
235+
setEditingTag={setEditingTag}
236+
setEditingTagValue={setEditingTagValue}
237+
handleEditTag={handleEditTag}
238+
handleCancelEdit={handleCancelEdit}
239+
handleDeleteTag={handleDeleteTag}
240+
/>
241+
))}
242+
</div>
264243
</div>
265244
</div>
266245
</Drawer>

‎frontend/src/components/TaskPopover.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default function TaskPopover() {
8989
{tasks.map((task) => (
9090
<div
9191
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"
9393
>
9494
<div className="space-y-2">
9595
<div className="flex items-center justify-between">

‎frontend/src/index.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,28 @@
4242
opacity: 100%;
4343
visibility: visible;
4444
transform: translateX(0);
45-
}
45+
}
46+
47+
@layer components {
48+
.flex-center {
49+
@apply flex items-center justify-center;
50+
}
51+
.flex-overflow-auto {
52+
@apply flex-1 flex flex-col overflow-auto h-full;
53+
}
54+
.flex-overflow-hidden {
55+
@apply flex flex-col h-full overflow-hidden;
56+
}
57+
.border-card {
58+
@apply border border-[#f0f0f0] rounded-lg bg-white;
59+
}
60+
.border {
61+
@apply border border-gray-100;
62+
}
63+
.border-bottom {
64+
@apply border-b border-gray-100;
65+
}
66+
.border-top {
67+
@apply border-t border-gray-100;
68+
}
69+
}

‎frontend/src/pages/DataAnnotation/Annotate/components/ImageAnnotation.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -429,7 +429,7 @@ export default function ImageAnnotationWorkspace({
429429
}`}
430430
onClick={() => setSelectedImageIndex(index)}
431431
>
432-
<div className="w-8 h-8 bg-gray-200 rounded flex items-center justify-center text-sm font-medium mr-3">
432+
<div className="w-8 h-8 bg-gray-200 rounded flex-center text-sm font-medium mr-3">
433433
{index + 1}
434434
</div>
435435
<img
@@ -462,7 +462,7 @@ export default function ImageAnnotationWorkspace({
462462
</div>
463463
</div>
464464

465-
<div className="flex-1 border rounded-lg overflow-hidden bg-gray-100 relative">
465+
<div className="flex-1 border-card overflow-hidden bg-gray-100 relative">
466466
<canvas
467467
ref={canvasRef}
468468
width={800}

‎frontend/src/pages/DataAnnotation/Create/CreateTask.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export default function AnnotationTaskCreate() {
123123
};
124124

125125
return (
126-
<div className="h-full flex flex-col overflow-auto">
126+
<div className="flex-overflow-auto">
127127
{/* Header */}
128128
<div className="flex items-center mb-2">
129129
<Link to="/data/annotation">
@@ -134,7 +134,7 @@ export default function AnnotationTaskCreate() {
134134
<h1 className="text-xl font-bold bg-clip-text">创建标注任务</h1>
135135
</div>
136136

137-
<div className="h-full flex-1 overflow-y-auto flex flex-col bg-white rounded-lg shadow-sm">
137+
<div className="flex-overflow-auto bg-white rounded-lg shadow-sm">
138138
<div className="flex-1 overflow-y-auto p-6">
139139
<Form
140140
form={form}

‎frontend/src/pages/DataAnnotation/Create/components/CreateAnnptationTaskDialog.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { queryDatasetsUsingGet } from "@/pages/DataManagement/dataset.api";
2-
import { datasetTypeMap } from "@/pages/DataManagement/dataset.const";
2+
import {
3+
datasetTypeMap,
4+
mapDataset,
5+
} from "@/pages/DataManagement/dataset.const";
36
import { Button, Form, Input, Modal, Select } from "antd";
47
import TextArea from "antd/es/input/TextArea";
58
import { Database } from "lucide-react";
@@ -26,7 +29,7 @@ export default function CreateAnnotationTask({
2629
page: 0,
2730
size: 1000,
2831
});
29-
setDatasets(data.content || []);
32+
setDatasets(data.content.map(mapDataset) || []);
3033
};
3134
fetchDatasets();
3235
}, [open]);
@@ -74,22 +77,20 @@ export default function CreateAnnotationTask({
7477
>
7578
<Select
7679
placeholder="请选择数据集"
77-
options={datasets.map((dataset) => ({
78-
label: (
79-
<div className="flex items-center justify-between gap-3 py-2">
80-
<div className="flex items-center font-sm text-gray-900">
81-
<span>
82-
{dataset.icon || <Database className="w-4 h-4 mr-2" />}
83-
</span>
84-
<span>{dataset.name}</span>
80+
options={datasets.map((dataset) => {
81+
return {
82+
label: (
83+
<div className="flex items-center justify-between gap-3 py-2">
84+
<div className="flex items-center font-sm text-gray-900">
85+
<span className="mr-2">{dataset.icon}</span>
86+
<span>{dataset.name}</span>
87+
</div>
88+
<div className="text-xs text-gray-500">{dataset.size}</div>
8589
</div>
86-
<div className="text-xs text-gray-500">
87-
{datasetTypeMap[dataset?.datasetType]?.label}
88-
</div>
89-
</div>
90-
),
91-
value: dataset.id,
92-
}))}
90+
),
91+
value: dataset.id,
92+
};
93+
})}
9394
/>
9495
</Form.Item>
9596
</Form>

0 commit comments

Comments
 (0)