refactor(components): 重构 playground组件
- 移除 Data、Scene 和 IodRelevant 组件中的 Drawer - 优化 Data、Scene 和 IodRelevant 组件的结构 - 添加 Header 组件用于展示标题和关闭按钮 - 使用 Main 组件替代原来的 ShowCard 组件 - 调整样式和布局，提高组件的可复用性和可维护性
This commit is contained in:
zhaoweijie
@@ -1,7 +1,8 @@
|
||||
import React, { useMemo, useState } from "react"
|
||||
import React, { useEffect, useMemo, useState } from "react"
|
||||
import { DataNavigation } from "@/components/Common/DataNavigation.tsx"
|
||||
import { Card, Drawer, Skeleton } from "antd"
|
||||
import { IodRegistryEntry } from "@/types/iod.ts"
|
||||
import { useIodPlaygroundContext } from "@/components/Option/Playground/PlaygroundIod.tsx"
|
||||
|
||||
const defaultData: IodRegistryEntry[] = [
|
||||
{
|
||||
@@ -27,46 +28,86 @@ const defaultData: IodRegistryEntry[] = [
|
||||
}
|
||||
]
|
||||
|
||||
type ShowCardProps = {
|
||||
loading: boolean
|
||||
record: IodRegistryEntry
|
||||
truncate?: boolean
|
||||
type HeaderProps = {
|
||||
title: string
|
||||
showButton?: boolean
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
const ShowCard: React.FC<ShowCardProps> = ({
|
||||
loading,
|
||||
record,
|
||||
truncate = true
|
||||
}) => (
|
||||
<Card className="[&_.ant-card-body]:!p-2 !bg-[gb(248, 248, 248)] border !border-[#e9e9e9]">
|
||||
{loading ? (
|
||||
<Skeleton title={false} active />
|
||||
) : (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3
|
||||
className={`text-base font-medium mb-1 text-[#222222] break-all ${truncate ? "line-clamp-2" : ""}`}
|
||||
title={record.name}>
|
||||
{record.name}
|
||||
</h3>
|
||||
<p
|
||||
className={`text-sm text-[#383838] break-all ${truncate ? "line-clamp-2" : ""}`}
|
||||
title={record.doId}>
|
||||
数字对象标识：{record.doId}
|
||||
</p>
|
||||
<p
|
||||
className={`text-[#828282] text-xs break-all ${truncate ? "truncate" : ""}`}
|
||||
title={record.description}>
|
||||
{record.description}
|
||||
</p>
|
||||
const Header: React.FC<HeaderProps> = ({ title, showButton = true, onClick }) => (
|
||||
<DataNavigation
|
||||
Header={
|
||||
<div className="flex items-center text-[#54c41d] gap-1">
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 1025 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="6235"
|
||||
width="18"
|
||||
height="18">
|
||||
<path
|
||||
d="M980.34571 1.143792c-4.850903 0-9.824354 0.888481-14.797806 2.930966L229.773215 299.724504H20.428686c-11.233669 0-20.424853 9.446494-20.424853 21.180572V702.584302c0 11.74429 9.191184 21.180572 20.424853 21.180573h129.820365c-4.728353 14.808018-7.271248 30.51473-7.271248 46.46654 0 84.119757 68.678568 152.543014 153.176184 152.543014 70.721053 0 130.330986-47.998404 147.93721-112.847312l521.569043 209.59984c4.983664 1.919936 9.957116 2.930966 14.808019 2.930967 21.568645 0 40.839493-18.127057 40.839493-42.371358V43.525362C1021.195415 19.270849 1002.047116 1.143792 980.34571 1.143792zM296.153987 831.250663c-33.833769 0-61.274559-27.308028-61.274558-61.009035 0-14.297397 4.983664-27.951411 14.042086-38.807221l108.374269 43.525362c-2.553107 31.403211-28.972654 56.290895-61.141797 56.290894z m633.12959 74.550713L263.984844 638.501326l-16.462431-6.638077H91.915671V391.626129h155.606742l16.462431-6.638077 665.298733-267.30005v788.113374z m0 0"
|
||||
fill="#54c41d"
|
||||
p-id="6236"></path>
|
||||
</svg>
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
}
|
||||
showButton={showButton}
|
||||
onClick={onClick}
|
||||
/>
|
||||
)
|
||||
|
||||
export const PlaygroundScene = () => {
|
||||
type MainProps = {
|
||||
loading: boolean
|
||||
data: IodRegistryEntry[]
|
||||
truncate?: boolean
|
||||
}
|
||||
const Main: React.FC<MainProps> = ({ data, loading, truncate = true }) => (
|
||||
<div className="space-y-1.5 flex-1 overflow-y-auto">
|
||||
{data.map((item, index) => {
|
||||
return (
|
||||
<Card
|
||||
className="[&_.ant-card-body]:!p-2 !bg-[gb(248, 248, 248)] border !border-[#e9e9e9]"
|
||||
key={item.doId}>
|
||||
{loading ? (
|
||||
<Skeleton title={false} active />
|
||||
) : (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3
|
||||
className={`text-base font-medium mb-1 text-[#222222] break-all ${truncate ? "line-clamp-2" : ""}`}
|
||||
title={item.name}>
|
||||
{item.name}
|
||||
</h3>
|
||||
<p
|
||||
className={`text-sm text-[#383838] break-all ${truncate ? "line-clamp-2" : ""}`}
|
||||
title={item.doId}>
|
||||
数字对象标识：{item.doId}
|
||||
</p>
|
||||
<p
|
||||
className={`text-[#828282] text-xs break-all ${truncate ? "truncate" : ""}`}
|
||||
title={item.description}>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
}
|
||||
export const PlaygroundScene: React.FC<Props> = ({ className }) => {
|
||||
const { messages, iodLoading, currentMessageId, iodSearch } =
|
||||
useMessageOption()
|
||||
|
||||
const { setShowPlayground, setDetailHeader, setDetailMain } =
|
||||
useIodPlaygroundContext()
|
||||
|
||||
const data = useMemo<IodRegistryEntry[]>(() => {
|
||||
// 确保loading状态时数据大于3
|
||||
if (iodLoading) {
|
||||
@@ -87,74 +128,24 @@ export const PlaygroundScene = () => {
|
||||
return messages.length > 0 ? "推荐场景" : "热点场景"
|
||||
}, [messages])
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const showDrawer = () => {
|
||||
if (iodLoading) {
|
||||
return
|
||||
}
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
setOpen(false)
|
||||
}
|
||||
useEffect(() => {
|
||||
setDetailHeader(
|
||||
<Header title={title} showButton={false} onClick={() => setShowPlayground(false)} />
|
||||
)
|
||||
setDetailMain(<Main loading={iodLoading} data={data} truncate={false} />)
|
||||
}, [title, iodLoading, data])
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="h-full [&_.ant-card-body]:h-full [&_.ant-card-body]:!p-[20px] overflow-y-hidden"
|
||||
className={`${className}`}
|
||||
hoverable>
|
||||
<div className="h-full flex flex-col relative">
|
||||
<div className="h-full flex flex-col gap-2 relative">
|
||||
{/* 数据导航 */}
|
||||
<DataNavigation
|
||||
Header={
|
||||
<div className="flex items-center text-[#54c41d] gap-1">
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 1025 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="6235"
|
||||
width="18"
|
||||
height="18">
|
||||
<path
|
||||
d="M980.34571 1.143792c-4.850903 0-9.824354 0.888481-14.797806 2.930966L229.773215 299.724504H20.428686c-11.233669 0-20.424853 9.446494-20.424853 21.180572V702.584302c0 11.74429 9.191184 21.180572 20.424853 21.180573h129.820365c-4.728353 14.808018-7.271248 30.51473-7.271248 46.46654 0 84.119757 68.678568 152.543014 153.176184 152.543014 70.721053 0 130.330986-47.998404 147.93721-112.847312l521.569043 209.59984c4.983664 1.919936 9.957116 2.930966 14.808019 2.930967 21.568645 0 40.839493-18.127057 40.839493-42.371358V43.525362C1021.195415 19.270849 1002.047116 1.143792 980.34571 1.143792zM296.153987 831.250663c-33.833769 0-61.274559-27.308028-61.274558-61.009035 0-14.297397 4.983664-27.951411 14.042086-38.807221l108.374269 43.525362c-2.553107 31.403211-28.972654 56.290895-61.141797 56.290894z m633.12959 74.550713L263.984844 638.501326l-16.462431-6.638077H91.915671V391.626129h155.606742l16.462431-6.638077 665.298733-267.30005v788.113374z m0 0"
|
||||
fill="#54c41d"
|
||||
p-id="6236"></path>
|
||||
</svg>
|
||||
{title}
|
||||
</div>
|
||||
}
|
||||
onClick={showDrawer}
|
||||
/>
|
||||
<Header title={title} onClick={() => setShowPlayground(false)} />
|
||||
|
||||
{/* 数据列表 */}
|
||||
<div className="space-y-1.5 flex-1 overflow-y-auto">
|
||||
{data.slice(0, 3).map((item, index) => {
|
||||
return (
|
||||
<ShowCard key={item.doId} loading={iodLoading} record={item} />
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<Main loading={iodLoading} data={data.slice(0, 3)} />
|
||||
</div>
|
||||
{/* 抽屉 */}
|
||||
<Drawer
|
||||
title={title}
|
||||
closable={{ "aria-label": "Close Button" }}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
width="33.33%">
|
||||
<div className="grid grid-cols-1 gap-3 overflow-y-auto">
|
||||
{data.map((item, index) => (
|
||||
<ShowCard
|
||||
key={item.doId}
|
||||
loading={iodLoading}
|
||||
record={item}
|
||||
truncate={false}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Drawer>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user