[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { BehaviorModelDisplay } from "@/components/behavior-model-display" export default function HomePage() { return (

网络空间行为模型展示

统一描述网络空间各类行为的结构化表达：什么时间，某资产对象（主体）对另一个资产对象（客体）进行了什么动作，产生什么结果

) } [V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" isMerged="true" "use client" import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" const Collapsible = CollapsiblePrimitive.Root const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent export { Collapsible, CollapsibleTrigger, CollapsibleContent } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef>( ({ className, ...props }, ref) => (

), ) Table.displayName = "Table" const TableHeader = React.forwardRef>( ({ className, ...props }, ref) => , ) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef>( ({ className, ...props }, ref) => ( tr]:last:border-b-0", className)} {...props} /> ), ) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableRow.displayName = "TableRow" const TableHead = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableHead.displayName = "TableHead" const TableCell = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCell.displayName = "TableCell" const TableCaption = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCaption.displayName = "TableCaption" export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/behavior-model-display.tsx" isEdit="true" isQuickEdit="true" "use client" import React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { ChevronDown, ChevronRight, Clock, Server, Target, Activity, CheckCircle, XCircle, Database, User, FileText, } from "lucide-react" // 示例数据 - 基于用户提供的JSON结构 const sampleBehaviorData = { ASTM: "2025-08-29 10:38:50", UPTM: "2025-09-10 10:55:29", COS: [ { COID: "", COIP: "192.168.1.199", TYPE: "1000", ATAG: "VjYJzJHhHkki3RLjxE", }, ], DTTP: 1025, INFO: { CODE: 1025, TYPE: 0, RET: { RET: 0, LBL: null, }, TIME: "2025-08-29 02:38:50", SOURCE: 1, SUB: { GID: "730132010000000011", PORT: 3456, IP: "192.168.40.1", MAC: "dd:ac:c6:5f:ef:3f", }, OBJ: { GID: "730132010000000022", PORT: 3456, IP: "192.168.40.2", MAC: "00:1A:2B:3C:4D:5E", }, EXT: { TPROTO: "TCP", ROLE: 1, DPRID: "bb1fc289beee8f197d7136ea50ea9e13", SPRID: "bb1fc289beee8f197d7136ea50ea9e02", DPID: "22222", SESSEQ: "test123456789abcdef", DATADR: 0, SPID: "11111", }, }, } // 多种行为模型示例数据 const multipleBehaviorData = [ sampleBehaviorData, // 数据库行为示例 - 主体为数据库，客体为null { ASTM: "2025-09-12 08:24:58", UPTM: "2025-09-12 08:24:59", COS: [ { COID: "00211300013853", COIP: "192.168.1.221", TYPE: "1000", ATAG: "ZykYoRTfF2i2iue4pW", }, ], DTTP: 542, INFO: { CODE: 542, TYPE: 0, RET: { RET: 0, LBL: null, }, TIME: "2025-09-12 08:24:59", SOURCE: 1, SUB: { STYPE: "DB", APPID: "P001", TYPE: 12, MDIPA: "192.168.1.221", NAME: "Database", }, OBJ: null, EXT: { DESR: "DM6.0 PSGSM2000 60G 48G 80%", }, }, }, // 文件操作行为示例 - 主体为用户，客体为文件 { ASTM: "2025-09-12 08:24:58", UPTM: "2025-09-12 08:25:01", COS: [ { COID: "00211300013853", COIP: "192.168.1.221", TYPE: "1000", ATAG: "ZykYoRTfF2i2iue4pW", }, ], DTTP: 532, INFO: { CODE: 532, TYPE: 6, RET: { RET: 0, LBL: null, }, TIME: "2025-09-12 08:25:01", SOURCE: 1, SUB: { ID: "admin", }, OBJ: { FID: "c895563f663af68056006a58bdb46c07263d5309e521a854cacac257600e2738", PATH: "/home/d5000/shenyang/bin/somsml", NAME: "somsml", }, EXT: null, }, }, ] function renderObjectProperties(obj: any, title: string, icon: React.ComponentType, iconColor: string) { if (!obj) { return (

{React.createElement(icon, { className: `h-4 w-4 ${iconColor}` })} {title}

无数据

) } return (

{React.createElement(icon, { className: `h-4 w-4 ${iconColor}` })} {title}

{Object.entries(obj).map(([key, value]) => (

{key}: {String(value)}

))}

) } function getObjectIcon(obj: any) { if (!obj) return { icon: Target, color: "text-gray-400" } // 根据对象属性判断类型 if (obj.STYPE === "DB" || obj.NAME === "Database") { return { icon: Database, color: "text-blue-600" } } if (obj.ID || obj.USER_ID) { return { icon: User, color: "text-green-600" } } if (obj.FID || obj.PATH || obj.NAME) { return { icon: FileText, color: "text-orange-600" } } if (obj.GID || obj.IP || obj.MAC) { return { icon: Server, color: "text-purple-600" } } return { icon: Target, color: "text-gray-600" } } interface BehaviorModelProps { data: typeof sampleBehaviorData index?: number } function BehaviorModelCard({ data, index }: BehaviorModelProps) { const [isExpanded, setIsExpanded] = useState(false) const getBehaviorTypeLabel = (code: number) => { const types: Record = { 1025: "网络连接行为", 542: "数据库状态行为", 532: "文件操作行为", 2001: "Web访问行为", 3001: "数据库查询行为", } return types[code] || `行为类型 ${code}` } const getResultStatus = (ret: number) => { return ret === 0 ? { icon: CheckCircle, label: "成功", color: "text-green-600" } : { icon: XCircle, label: "失败", color: "text-red-600" } } const resultStatus = getResultStatus(data.INFO.RET.RET) const ResultIcon = resultStatus.icon const subjectIcon = getObjectIcon(data.INFO.SUB) const objectIcon = getObjectIcon(data.INFO.OBJ) return (

{getBehaviorTypeLabel(data.INFO.CODE)} {index !== undefined && #{index + 1}} {data.INFO.TIME} 行为编码: {data.INFO.CODE} 设备ID: {data.COS[0]?.COID || "未设置"} 设备IP: {data.COS[0]?.COIP}

{/* 主体、客体、行为结果 */}

核心行为信息

{renderObjectProperties(data.INFO.SUB, "主体对象", subjectIcon.icon, subjectIcon.color)} {renderObjectProperties(data.INFO.OBJ, "客体对象", objectIcon.icon, objectIcon.color)}

行为结果

结果码: {data.INFO.RET.RET}

状态: {resultStatus.label}

{data.INFO.RET.LBL && (

标签: {data.INFO.RET.LBL}

)}

动作类型: {data.INFO.TYPE}

{/* 完整设备信息 */}

完整设备信息 (COS)

设备ID 设备IP 类型标签 {data.COS.map((cos, idx) => ( {cos.COID || "未设置"} {cos.COIP} {cos.TYPE} {cos.ATAG} ))}

{data.INFO.EXT && (

扩展属性 (EXT)

{Object.entries(data.INFO.EXT).map(([key, value]) => (

{key}: {String(value)}

))}

)} {/* 时间信息 */}

时间信息

创建时间: {data.ASTM}

更新时间: {data.UPTM}

数据类型: {data.DTTP}

) } export function BehaviorModelDisplay() { const [viewMode, setViewMode] = useState<"single" | "multiple">("single") return (

setViewMode(value as "single" | "multiple")}> 单个行为模型多个行为模型

行为模型详细展示

展示单个行为模型的完整结构化信息

多类型行为模型对比

展示不同类型行为模型的结构差异

{multipleBehaviorData.map((data, index) => ( ))}

) }