chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(network): add asset style lab mockups

Browse Source
This commit is contained in:
chihlasm
2026-04-14 02:10:48 +00:00
parent 91cc9a4170
commit c37e216e0b
6 changed files with 396 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/components/network/nodes/DeviceNode.tsx
View File

@@ -1,10 +1,12 @@
import { memo, useState, useRef, useEffect } from 'react'
import { Position, NodeResizer, useReactFlow, type NodeProps } from '@xyflow/react'
import { HardDrive, Network, ShieldCheck } from 'lucide-react'
import { BaseNode, BaseNodeHeader, BaseNodeContent } from '../ui/base-node'
import { BaseHandle } from '../ui/base-handle'
import { NodeStatusIndicator, type NodeStatus } from '../ui/node-status-indicator'
import { NodeTooltip, NodeTooltipTrigger, NodeTooltipContent } from '../ui/node-tooltip'
import { getDeviceRenderConfig } from './deviceRegistry'
import { getDeviceRenderConfig, CATEGORY_LABELS } from './deviceRegistry'
import { cn } from '@/lib/utils'
import type { DeviceProperties } from '@/types'
export interface DeviceNodeData {
@@ -29,9 +31,48 @@ const NODE_DEFAULT = 120 // default square side in px
const NODE_MIN = 80 // minimum square side in px
const NODE_MAX = 280 // maximum square side in px
function DeviceNodeChrome({
category,
accentClass,
glyph,
}: {
category: string
accentClass: string
glyph: string
}) {
const MetaIcon = category === 'network'
? Network
: category === 'security'
? ShieldCheck
: HardDrive
return (
<>
<div className="pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between px-2 py-1">
<span className={cn('rounded-full border px-1.5 py-0.5 text-[8px] font-semibold tracking-[0.18em]', accentClass)}>
{glyph}
</span>
<span className="text-[8px] font-medium uppercase tracking-[0.16em] text-muted-foreground/80">
{CATEGORY_LABELS[category] ?? category}
</span>
</div>
<div className="pointer-events-none absolute inset-x-3 top-6 h-px bg-gradient-to-r from-transparent via-border-default to-transparent" />
<div className="pointer-events-none absolute bottom-2 left-2 flex items-center gap-1 rounded-full border border-default bg-page/80 px-1.5 py-0.5 text-[8px] uppercase tracking-[0.14em] text-muted-foreground">
<MetaIcon size={9} />
<span>Asset</span>
</div>
<div className="pointer-events-none absolute bottom-2 right-2 flex gap-1">
<span className="h-1.5 w-1.5 rounded-full bg-border-default" />
<span className="h-1.5 w-1.5 rounded-full bg-border-default/80" />
<span className="h-1.5 w-1.5 rounded-full bg-border-default/60" />
</div>
</>
)
}
function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
const nodeData = data as unknown as DeviceNodeData
const { icon: Icon, color } = getDeviceRenderConfig(nodeData.deviceType, nodeData.category)
const { icon: Icon, color, accentClass, surfaceClass, category, glyph } = getDeviceRenderConfig(nodeData.deviceType, nodeData.category)
const status = (nodeData.properties?.status || 'unknown') as NodeStatus
const ip = nodeData.properties?.ip
const props = nodeData.properties || {}
@@ -46,6 +87,8 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
const labelPx = Math.max(9, Math.min(20, Math.round(scale * 11)))
// IP font: 9px at default, clamped to [8, 16]
const ipPx = Math.max(8, Math.min(16, Math.round(scale * 9)))
const typePx = Math.max(8, Math.min(13, Math.round(scale * 8.5)))
const iconPlateSize = Math.round(Math.max(36, Math.min(92, scale * 56)))
const [editing, setEditing] = useState(false)
const [labelValue, setLabelValue] = useState(nodeData.label ?? '')
@@ -81,9 +124,23 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
<NodeStatusIndicator status={status}>
<NodeTooltip>
<NodeTooltipTrigger>
<BaseNode className="w-full h-full group flex flex-col items-center justify-center">
<BaseNodeHeader className="flex-col gap-1 items-center py-2 px-2">
<Icon size={iconPx} style={{ color }} />
<BaseNode className="group h-full w-full bg-gradient-to-b from-card via-card to-page/80">
<div className={cn('pointer-events-none absolute inset-x-0 top-0 h-14 bg-gradient-to-b', surfaceClass)} />
<DeviceNodeChrome category={category} accentClass={accentClass} glyph={glyph} />
<BaseNodeHeader className="flex h-full flex-col items-center justify-center gap-2 px-2 pt-8 pb-3">
<div
className={cn(
'relative flex items-center justify-center rounded-2xl border shadow-inner',
accentClass,
)}
style={{ width: iconPlateSize, height: iconPlateSize }}
>
<div className="absolute inset-[5px] rounded-[14px] border border-white/8 bg-page/65" />
<div className="absolute inset-x-2 top-2 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
<div className="relative z-10">
<Icon size={iconPx} style={{ color }} />
</div>
</div>
{editing ? (
<input
ref={inputRef}
@@ -109,7 +166,7 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
) : (
<span
style={{ fontSize: labelPx }}
className="font-medium text-primary text-center leading-tight line-clamp-2 cursor-default"
className="max-w-[88%] cursor-default text-center font-medium leading-tight text-primary line-clamp-2"
onDoubleClick={e => {
e.stopPropagation()
setEditing(true)
@@ -118,10 +175,21 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
{labelValue}
</span>
)}
<span
style={{ fontSize: typePx }}
className="rounded-full border border-default bg-page/70 px-2 py-0.5 text-[9px] uppercase tracking-[0.18em] text-muted-foreground"
>
{nodeData.deviceType.replace(/-/g, ' ')}
</span>
</BaseNodeHeader>
{ip && (
<BaseNodeContent className="items-center pt-0 pb-1">
<span className="font-mono text-muted-foreground" style={{ fontSize: ipPx }}>{ip}</span>
<BaseNodeContent className="items-center pt-0 pb-3">
<span
className="rounded-full border border-default bg-page/80 px-2 py-0.5 font-mono text-muted-foreground"
style={{ fontSize: ipPx }}
>
{ip}
</span>
</BaseNodeContent>
)}
<BaseHandle type="target" position={Position.Top} />