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

polish(operator cards): improve icon color distinction and subtle UI … (#217)

Browse Source 
polish(operator cards): improve icon color distinction and subtle UI details
This commit is contained in:
Kecheng Sha
2025-12-31 10:54:34 +08:00
committed by GitHub
parent f183b9f2f3
commit 01e1c6c7e9
5 changed files with 679 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,90 +1,101 @@
import { Button, List, Tag } from "antd";
import { useNavigate } from "react-router";
import { Operator } from "../../operator.model";
export function ListView({ operators = [], pagination, operations }) {
const navigate = useNavigate();
const handleViewOperator = (operator: Operator) => {
navigate(`/data/operator-market/plugin-detail/${operator.id}`);
};
return (
<List
className="p-4 flex-1 overflow-auto mx-4"
dataSource={operators}
pagination={pagination}
renderItem={(operator) => (
<List.Item
className="hover:bg-gray-50 transition-colors px-6 py-4"
actions={[
// <Button
// key="favorite"
// type="text"
// size="small"
// onClick={() => handleToggleFavorite(operator.id)}
// className={
// favoriteOperators.has(operator.id)
// ? "text-yellow-500 hover:text-yellow-600"
// : "text-gray-400 hover:text-yellow-500"
// }
// icon={
// <StarFilled
// style={{
// fontSize: "16px",
// color: favoriteOperators.has(operator.id)
// ? "#ffcc00ff"
// : "#d1d5db",
// cursor: "pointer",
// }}
// onClick={() => handleToggleFavorite(operator.id)}
// />
// }
// title="收藏"
// />,
...operations.map((operation) => (
<Button
type="text"
size="small"
title={operation.label}
icon={operation.icon}
danger={operation.danger}
onClick={() => operation.onClick(operator)}
/>
)),
]}
>
<List.Item.Meta
avatar={
<div className="w-12 h-12 bg-gradient-to-br from-sky-300 to-blue-500 rounded-lg flex items-center justify-center">
<div className="w-8 h-8 text-white">{operator?.icon}</div>
</div>
}
title={
<div className="flex items-center gap-3">
<span
className="font-medium text-gray-900 cursor-pointer hover:text-blue-600"
onClick={() => handleViewOperator(operator)}
>
{operator.name}
</span>
<Tag color="default">v{operator.version}</Tag>
</div>
}
description={
<div className="space-y-2">
<div className="text-gray-600 ">{operator.description}</div>
{/* <div className="flex items-center gap-4 text-xs text-gray-500">
<span>作者: {operator.author}</span>
<span>类型: {operator.type}</span>
<span>框架: {operator.framework}</span>
<span>使用次数: {operator?.usage?.toLocaleString()}</span>
</div> */}
</div>
}
/>
</List.Item>
)}
/>
);
}
import { Button, List, Tag } from "antd";
import { useNavigate } from "react-router";
import { Operator } from "../../operator.model";
export function ListView({ operators = [], pagination, operations }) {
const navigate = useNavigate();
const handleViewOperator = (operator: Operator) => {
navigate(`/data/operator-market/plugin-detail/${operator.id}`);
};
return (
<List
className="p-4 flex-1 overflow-auto mx-4"
dataSource={operators}
pagination={pagination}
renderItem={(operator) => (
<List.Item
className="hover:bg-gray-50 transition-colors px-6 py-4"
actions={[
// <Button
// key="favorite"
// type="text"
// size="small"
// onClick={() => handleToggleFavorite(operator.id)}
// className={
// favoriteOperators.has(operator.id)
// ? "text-yellow-500 hover:text-yellow-600"
// : "text-gray-400 hover:text-yellow-500"
// }
// icon={
// <StarFilled
// style={{
// fontSize: "16px",
// color: favoriteOperators.has(operator.id)
// ? "#ffcc00ff"
// : "#d1d5db",
// cursor: "pointer",
// }}
// onClick={() => handleToggleFavorite(operator.id)}
// />
// }
// title="收藏"
// />,
...operations.map((operation) => (
<Button
type="text"
size="small"
title={operation.label}
icon={operation.icon}
danger={operation.danger}
onClick={() => operation.onClick(operator)}
/>
)),
]}
>
<List.Item.Meta
avatar={
<div
className={`w-12 h-12 rounded-lg flex items-center justify-center ${
operator?.iconColor
? ""
: "bg-gradient-to-br from-sky-300 to-blue-500"
}`}
style={
operator?.iconColor
? { backgroundColor: operator.iconColor }
: undefined
}
>
<div className="w-[2.8rem] h-[2.8rem] text-white">{operator?.icon}</div>
</div>
}
title={
<div className="flex items-center gap-3">
<span
className="font-medium text-gray-900 cursor-pointer hover:text-blue-600"
onClick={() => handleViewOperator(operator)}
>
{operator.name}
</span>
<Tag color="default">v{operator.version}</Tag>
</div>
}
description={
<div className="space-y-2">
<div className="text-gray-600 ">{operator.description}</div>
{/* <div className="flex items-center gap-4 text-xs text-gray-500">
<span>作者: {operator.author}</span>
<span>类型: {operator.type}</span>
<span>框架: {operator.framework}</span>
<span>使用次数: {operator?.usage?.toLocaleString()}</span>
</div> */}
</div>
}
/>
</List.Item>
)}
/>
);
}