third/APIPark
1
0
Fork 0
mirror of https://github.com/APIParkLab/APIPark.git synced 2026-06-14 20:41:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: 文件拆分

Browse Source
This commit is contained in:
scarqin
2024-12-23 17:45:50 +08:00
parent 14548e4bc5
commit 7ac97ca739
6 changed files with 59 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/packages/core/src/pages/playground/components/KeyStatusCard.tsx → frontend/packages/core/src/pages/playground/components/KeyStatusNode.tsx
+4 -5
View File
@@ -8,16 +8,17 @@ interface KeyStatus {
priority?: number
}
interface KeyStatusCardProps {
keys: KeyStatus[]
interface KeyStatusNodeData {
title: string
keys: KeyStatus[]
}
const KEY_SIZE = '1.25rem' // 20px
const KEY_GAP = '0.25rem' // 4px
const MAX_KEYS = 10
const KeyStatusCard: React.FC<KeyStatusCardProps> = ({ keys = [], title }) => {
export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) => {
const { title, keys = [] } = data
const totalKeys = keys.length
const keyWidth = totalKeys > 5 ? `calc((100% - ${(totalKeys - 1) * 0.25}rem) / ${totalKeys})` : KEY_SIZE
@@ -54,5 +55,3 @@ const KeyStatusCard: React.FC<KeyStatusCardProps> = ({ keys = [], title }) => {
</div>
)
}
export default KeyStatusCard
frontend/packages/core/src/pages/playground/components/ModelCard.tsx
-36
View File
@@ -1,36 +0,0 @@
import { Icon } from '@iconify/react'
import { Handle, Position } from '@xyflow/react'
import React from 'react'
import { ModelCardStatus } from './types'
interface ModelCardProps {
title: string
status: ModelCardStatus
defaultModel: string
onSettingClick?: () => void
}
const ModelCard: React.FC<ModelCardProps> = ({ title, status, defaultModel, onSettingClick }) => (
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] relative">
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />
<div className="flex justify-between items-center">
<div className="flex gap-2 items-center">
<Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
<span className="text-base text-gray-900">{title}</span>
<Icon
icon={status === 'success' ? 'mdi:check-circle' : 'mdi:close-circle'}
className={`text-xl ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}
/>
</div>
<Icon
icon="mdi:cog"
className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]"
onClick={onSettingClick}
/>
</div>
<div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
</div>
)
export default ModelCard
frontend/packages/core/src/pages/playground/components/ModelCardNode.tsx
+37
View File
@@ -0,0 +1,37 @@
import { Icon } from '@iconify/react'
import { Handle, Position } from '@xyflow/react'
import React from 'react'
import { ModelCardStatus } from './types'
interface ModelCardData {
title: string
status: ModelCardStatus
defaultModel: string
}
type ModelCardNodeData = ModelCardData & {
id: string
position: { x: number; y: number }
}
export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
const { title, status, defaultModel } = data
return (
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] relative">
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />
<div className="flex justify-between items-center">
<div className="flex gap-2 items-center">
<Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
<span className="text-base text-gray-900">{title}</span>
<Icon
icon={status === 'success' ? 'mdi:check-circle' : 'mdi:close-circle'}
className={`text-xl ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}
/>
</div>
<Icon icon="mdi:cog" className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]" />
</div>
<div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
</div>
)
}
frontend/packages/core/src/pages/playground/components/NodeComponents.tsx
+3 -103
View File
@@ -1,103 +1,3 @@
import { Icon } from '@iconify/react'
import { Handle, NodeProps, Position } from '@xyflow/react'
import React from 'react'
import { ModelCardStatus } from './types'
interface KeyStatus {
status: ModelCardStatus
keyID: number | string
priority?: number
}
interface KeyStatusNodeData {
title: string
keys: KeyStatus[]
}
interface ModelCardData {
title: string
status: ModelCardStatus
defaultModel: string
}
type ModelCardNodeData = ModelCardData & {
id: string
position: { x: number; y: number }
}
const KEY_SIZE = '1.25rem' // 20px
const KEY_GAP = '0.25rem' // 4px
const MAX_KEYS = 10
export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) => {
const { title, keys = [] } = data
const totalKeys = keys.length
const keyWidth = totalKeys > 5 ? `calc((100% - ${(totalKeys - 1) * 0.25}rem) / ${totalKeys})` : KEY_SIZE
return (
<div className="relative p-4 bg-white rounded-lg shadow-sm node-card">
<Handle type="target" position={Position.Left} />
<div className="flex flex-col gap-2">
<div className="text-sm text-gray-900">{title}</div>
<div
className="flex gap-1 w-full"
style={{
maxWidth: `calc(${MAX_KEYS} * ${KEY_SIZE} + (${MAX_KEYS} - 1) * ${KEY_GAP})`,
minHeight: KEY_SIZE
}}
>
{keys
.sort((a, b) => (a.priority || 0) - (b.priority || 0))
.map((key) => (
<div
key={key.keyID}
style={{
width: keyWidth,
height: KEY_SIZE
}}
className={`
rounded-md flex-shrink-0
${key.status === 'success' ? 'bg-green-500' : 'bg-red-500'}
transition-all duration-200 hover:opacity-80
`}
/>
))}
</div>
</div>
</div>
)
}
export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
const { title, status, defaultModel } = data
return (
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] relative">
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />
<div className="flex justify-between items-center">
<div className="flex gap-2 items-center">
<Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
<span className="text-base text-gray-900">{title}</span>
<Icon
icon={status === 'success' ? 'mdi:check-circle' : 'mdi:close-circle'}
className={`text-xl ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}
/>
</div>
<Icon icon="mdi:cog" className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]" />
</div>
<div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
</div>
)
}
export const ServiceCardNode: React.FC<NodeProps> = () => {
return (
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[150px] relative">
<Handle type="source" position={Position.Right} />
<div className="flex flex-col gap-2 items-center">
<Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
<span className="text-base text-gray-900">AI Service</span>
</div>
</div>
)
}
export { KeyStatusNode } from './KeyStatusNode'
export { ModelCardNode } from './ModelCardNode'
export { ServiceCardNode } from './ServiceCardNode'
frontend/packages/core/src/pages/playground/components/ServiceCard.tsx
-15
View File
@@ -1,15 +0,0 @@
import { Icon } from '@iconify/react'
import { Handle, Position } from '@xyflow/react'
import React from 'react'
const ServiceCard: React.FC = () => (
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[150px] relative">
<Handle type="source" position={Position.Right} />
<div className="flex flex-col gap-2 items-center">
<Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
<span className="text-base text-gray-900">AI Service</span>
</div>
</div>
)
export default ServiceCard
frontend/packages/core/src/pages/playground/components/ServiceCardNode.tsx
+15
View File
@@ -0,0 +1,15 @@
import { Icon } from '@iconify/react'
import { Handle, NodeProps, Position } from '@xyflow/react'
import React from 'react'
export const ServiceCardNode: React.FC<NodeProps> = () => {
return (
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[150px] relative">
<Handle type="source" position={Position.Right} />
<div className="flex flex-col gap-2 items-center">
<Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
<span className="text-base text-gray-900">AI Service</span>
</div>
</div>
)
}