From 44bcc594c0e0c7b7198065b8a1760f1b0170db5d Mon Sep 17 00:00:00 2001
From: vudsen <xu2237803016@outlook.com>
Date: Tue, 20 Jan 2026 19:10:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20sc=E3=80=81jvm?=
 =?UTF-8?q?=E3=80=81memory=E3=80=81ognl=E3=80=81getstatic=20=E7=9A=84?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/channel/[channelId]/Header.tsx  |   1 +
 .../_component/MemoryMessageDetail.tsx        |  70 +++++++
 .../_component/OgnlCommonMessageDetail.tsx    |  12 ++
 .../_component/ScMessageDetail.tsx            | 189 ++++++++++++++++++
 .../_component/WatchMessageDetail.tsx         |  28 ---
 .../_console/_message_view/_register/jvm.ts   |   0
 .../_message_view/_register/memory.ts         |  12 ++
 .../_message_view/_register/ognl-common.tsx   |  70 +++++++
 .../_console/_message_view/_register/sc.ts    |  12 ++
 .../_console/_message_view/_register/watch.ts |  12 --
 .../_tabs/_console/_message_view/init.ts      |   2 +-
 11 files changed, 367 insertions(+), 41 deletions(-)
 create mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/MemoryMessageDetail.tsx
 create mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/OgnlCommonMessageDetail.tsx
 create mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/ScMessageDetail.tsx
 delete mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/WatchMessageDetail.tsx
 create mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/jvm.ts
 create mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/memory.ts
 create mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/ognl-common.tsx
 create mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/sc.ts
 delete mode 100644 spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/watch.ts

diff --git a/spectre-frontend/src/pages/channel/[channelId]/Header.tsx b/spectre-frontend/src/pages/channel/[channelId]/Header.tsx
index 207e7e0..be13e30 100644
--- a/spectre-frontend/src/pages/channel/[channelId]/Header.tsx
+++ b/spectre-frontend/src/pages/channel/[channelId]/Header.tsx
@@ -110,6 +110,7 @@ const Header: React.FC<ToolbarProps> = (props) => {
               <Input
                 label="Classloader Hash"
                 name="hash"
+                defaultValue={classloaderHash}
                 labelPlacement="outside-top"
               />
               <Button
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/MemoryMessageDetail.tsx b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/MemoryMessageDetail.tsx
new file mode 100644
index 0000000..d318d33
--- /dev/null
+++ b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/MemoryMessageDetail.tsx
@@ -0,0 +1,70 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from '@heroui/react'
+import React, { useMemo } from 'react'
+import type { DetailComponentProps } from '@/pages/channel/[channelId]/_tabs/_console/_message_view/factory.ts'
+import PercentageData from '@/pages/channel/[channelId]/_tabs/_dashboard/PercentageData.tsx'
+
+type MemoryInfo = {
+  max: number
+  name: string
+  total: number
+  type: string
+  used: number
+}
+type MemoryMessage = {
+  jobId: number
+  memoryInfo: Record<string, MemoryInfo[]>
+  type: 'memory'
+  fid: number
+}
+const MemoryMessageDetail: React.FC<DetailComponentProps<MemoryMessage>> = ({
+  msg,
+}) => {
+  const infos = useMemo(() => {
+    const infos: MemoryInfo[] = []
+    console.log(msg.memoryInfo)
+    for (const entry of Object.entries(msg.memoryInfo)) {
+      infos.push(...entry[1])
+    }
+    return infos
+  }, [msg.fid])
+  return (
+    <Table>
+      <TableHeader>
+        <TableColumn>名称</TableColumn>
+        <TableColumn>类型</TableColumn>
+        <TableColumn>总大小</TableColumn>
+        <TableColumn>使用量</TableColumn>
+        <TableColumn>最大</TableColumn>
+      </TableHeader>
+      <TableBody items={infos}>
+        {(info) => (
+          <TableRow key={info.name}>
+            <TableCell>{info.name}</TableCell>
+            <TableCell>{info.type}</TableCell>
+            <TableCell>{(info.total / 1024 / 1024).toFixed(0)}MB</TableCell>
+            <TableCell>
+              {(info.used / 1024 / 1024).toFixed(0)}MB (
+              <PercentageData rate={info.used / info.total} />)
+            </TableCell>
+            <TableCell>
+              {info.max < 0 ? (
+                <span className="italic">unlimited</span>
+              ) : (
+                `${(info.max / 1024 / 1024).toFixed(0)}MB`
+              )}
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  )
+}
+
+export default MemoryMessageDetail
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/OgnlCommonMessageDetail.tsx b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/OgnlCommonMessageDetail.tsx
new file mode 100644
index 0000000..ea43b2a
--- /dev/null
+++ b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/OgnlCommonMessageDetail.tsx
@@ -0,0 +1,12 @@
+import type React from 'react'
+import OgnlMessageView from '@/pages/channel/[channelId]/_tabs/_console/_message_view/_component/_ognl_result/OgnlMessageView.tsx'
+
+const OgnlCommonMessageDetail: React.FC<{ raw: string }> = ({ raw }) => {
+  return (
+    <div className="text-sm">
+      <OgnlMessageView raw={raw} />
+    </div>
+  )
+}
+
+export default OgnlCommonMessageDetail
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/ScMessageDetail.tsx b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/ScMessageDetail.tsx
new file mode 100644
index 0000000..9086c59
--- /dev/null
+++ b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/ScMessageDetail.tsx
@@ -0,0 +1,189 @@
+import React, { useCallback } from 'react'
+import type { DetailComponentProps } from '@/pages/channel/[channelId]/_tabs/_console/_message_view/factory.ts'
+import {
+  Card,
+  CardBody,
+  Code,
+  Link,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tooltip,
+} from '@heroui/react'
+import { updateChannelContext } from '@/store/channelSlice.ts'
+import { useDispatch } from 'react-redux'
+import KVGird from '@/components/KVGird'
+import KVGridItem from '@/components/KVGird/KVGridItem.tsx'
+
+type Fields = {
+  annotations: string[]
+  modifier: string
+  name: string
+  static: boolean
+  type: string
+}
+
+type ClassInfo = {
+  annotation: boolean
+  annotations: string[]
+  anonymousClass: boolean
+  array: boolean
+  classInfo: string
+  classLoaderHash: string
+  classloader: string[]
+  codeSource: string
+  enum: boolean
+  fields?: Fields[]
+  interface: boolean
+  interfaces: string[]
+  localClass: boolean
+  memberClass: boolean
+  modifier: string
+  name: string
+  primitive: boolean
+  simpleName: string
+  superClass: string[]
+  synthetic: boolean
+}
+type ScMessage = {
+  fid: number
+  withField: boolean
+  type: 'sc'
+  segment: number
+  jobId: number
+  detailed: boolean
+  classNames?: string[]
+  classInfo?: ClassInfo
+}
+
+const ListDisplay: React.FC<{
+  entities: string[]
+  name: string
+  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
+}> = ({ entities, color, name }) => {
+  return (
+    <div>
+      <span className="text-sm font-bold">{name}:</span>
+      {entities.length > 0 ? (
+        <ul className="mt-3 ml-6 list-disc space-y-2">
+          {entities.map((entity) => (
+            <li key={entity}>
+              <Code color={color}>{entity}</Code>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <span className="ml-2">无</span>
+      )}
+    </div>
+  )
+}
+
+const ClassInfoDisplay: React.FC<{ classInfo: ClassInfo }> = ({
+  classInfo,
+}) => {
+  const dispatch = useDispatch()
+  // context.messageBus.
+  const applyClassloader = useCallback(() => {
+    dispatch(
+      updateChannelContext({
+        classloaderHash: classInfo.classLoaderHash,
+      }),
+    )
+  }, [classInfo.classLoaderHash, dispatch])
+
+  let type: string
+  if (classInfo.interface) {
+    type = 'Interface'
+  } else if (classInfo.enum) {
+    type = 'Enum'
+  } else if (classInfo.annotation) {
+    type = 'Annotation'
+  } else if (classInfo.anonymousClass) {
+    type = 'Anonymous Class'
+  } else if (classInfo.array) {
+    type = 'Array'
+  } else if (classInfo.localClass) {
+    type = 'Local Class'
+  } else if (classInfo.memberClass) {
+    type = 'Member Class'
+  } else {
+    type = 'Class'
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="header-1">{classInfo.name}</div>
+      <Card>
+        <CardBody className="space-y-3 text-sm">
+          <div className="header-2">详细信息</div>
+          <KVGird>
+            <KVGridItem name="修饰符">{classInfo.modifier}</KVGridItem>
+            <KVGridItem name="类型">{type}</KVGridItem>
+            <KVGridItem name="Classloader Hash">
+              <Tooltip content="应用到默认 Classloader" placement="bottom">
+                <Link
+                  size="sm"
+                  onPress={applyClassloader}
+                  className="cursor-pointer"
+                  underline="always"
+                >
+                  #{classInfo.classLoaderHash}
+                </Link>
+              </Tooltip>
+            </KVGridItem>
+          </KVGird>
+          <ListDisplay
+            name="注解"
+            color="warning"
+            entities={classInfo.annotations}
+          />
+          <ListDisplay
+            name="接口"
+            color="primary"
+            entities={classInfo.interfaces}
+          />
+          <ListDisplay name="Classloader" entities={classInfo.classloader} />
+          {classInfo.fields ? (
+            <>
+              <div className="header-2">字段信息</div>
+              <Table removeWrapper>
+                <TableHeader>
+                  <TableColumn>名称</TableColumn>
+                  <TableColumn>类型</TableColumn>
+                  <TableColumn>静态</TableColumn>
+                  <TableColumn>修饰符</TableColumn>
+                </TableHeader>
+                <TableBody items={classInfo.fields}>
+                  {(field) => (
+                    <TableRow key={field.name}>
+                      <TableCell>{field.name}</TableCell>
+                      <TableCell>{field.type}</TableCell>
+                      <TableCell>{field.static.toString()}</TableCell>
+                      <TableCell>{field.modifier}</TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </>
+          ) : null}
+        </CardBody>
+      </Card>
+    </div>
+  )
+}
+
+const ScMessageDetail: React.FC<DetailComponentProps<ScMessage>> = ({
+  msg,
+}) => {
+  if (msg.classNames) {
+    return <ListDisplay name="搜索到以下类" entities={msg.classNames} />
+  } else if (msg.classInfo) {
+    return <ClassInfoDisplay classInfo={msg.classInfo} />
+  }
+}
+
+export default ScMessageDetail
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/WatchMessageDetail.tsx b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/WatchMessageDetail.tsx
deleted file mode 100644
index 911031e..0000000
--- a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_component/WatchMessageDetail.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type React from 'react'
-import type { DetailComponentProps } from '@/pages/channel/[channelId]/_tabs/_console/_message_view/factory.ts'
-import OgnlMessageView from '@/pages/channel/[channelId]/_tabs/_console/_message_view/_component/_ognl_result/OgnlMessageView.tsx'
-
-type WatchMessage = {
-  type: 'watch'
-  jobId: number
-  accessPoint: string
-  className: string
-  cost: number
-  methodName: string
-  sizeLimit: number
-  ts: string
-  value: string
-  fid: number
-}
-
-const WatchMessageDetail: React.FC<DetailComponentProps<WatchMessage>> = ({
-  msg,
-}) => {
-  return (
-    <div className="text-sm">
-      <OgnlMessageView raw={msg.value} />
-    </div>
-  )
-}
-
-export default WatchMessageDetail
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/jvm.ts b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/jvm.ts
new file mode 100644
index 0000000..e69de29
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/memory.ts b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/memory.ts
new file mode 100644
index 0000000..256d2a9
--- /dev/null
+++ b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/memory.ts
@@ -0,0 +1,12 @@
+import { registerMessageView } from '@/pages/channel/[channelId]/_tabs/_console/_message_view/factory.ts'
+import MemoryMessageDetail from '@/pages/channel/[channelId]/_tabs/_console/_message_view/_component/MemoryMessageDetail.tsx'
+
+registerMessageView({
+  detailComponent: MemoryMessageDetail,
+  display: (_) => ({
+    color: 'default',
+    name: '查看内存信息',
+    tag: 'memory',
+  }),
+  type: 'memory',
+})
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/ognl-common.tsx b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/ognl-common.tsx
new file mode 100644
index 0000000..de9fcab
--- /dev/null
+++ b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/ognl-common.tsx
@@ -0,0 +1,70 @@
+import { type DetailComponentProps, registerMessageView } from '../factory.ts'
+import OgnlCommonMessageDetail from '../_component/OgnlCommonMessageDetail.tsx'
+import type { ArthasResponseWithId } from '@/api/impl/arthas.ts'
+import React from 'react'
+
+function createComponent<T extends ArthasResponseWithId>(
+  ognlResultGetter: (r: T) => string,
+): React.FC<DetailComponentProps<T>> {
+  const Component: React.FC<DetailComponentProps<T>> = (props) => {
+    return <OgnlCommonMessageDetail raw={ognlResultGetter(props.msg)} />
+  }
+  return Component
+}
+
+type WatchMessage = {
+  type: 'watch'
+  jobId: number
+  accessPoint: string
+  className: string
+  cost: number
+  methodName: string
+  sizeLimit: number
+  ts: string
+  value: string
+  fid: number
+}
+
+registerMessageView({
+  type: 'watch',
+  display: (message) => ({
+    name: `${message.className}#${message.methodName}`,
+    color: 'default',
+    tag: 'watch',
+  }),
+  detailComponent: createComponent<WatchMessage>((msg) => msg.value),
+})
+
+type GetStaticMessage = {
+  type: 'getstatic'
+  jobId: number
+  fid: number
+  field: string
+  fieldName: string
+}
+
+registerMessageView({
+  type: 'getstatic',
+  display: (message) => ({
+    name: `查看静态属性: ${message.fieldName}`,
+    color: 'default',
+    tag: 'getstatic',
+  }),
+  detailComponent: createComponent<GetStaticMessage>((msg) => msg.field),
+})
+
+type OgnlMessage = {
+  type: 'ognl'
+  jobId: number
+  fid: number
+  value: string
+}
+registerMessageView({
+  type: 'ognl',
+  display: (_) => ({
+    name: `执行 Ognl 表达式`,
+    color: 'default',
+    tag: 'ognl',
+  }),
+  detailComponent: createComponent<OgnlMessage>((msg) => msg.value),
+})
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/sc.ts b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/sc.ts
new file mode 100644
index 0000000..d7e0fce
--- /dev/null
+++ b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/sc.ts
@@ -0,0 +1,12 @@
+import { registerMessageView } from '@/pages/channel/[channelId]/_tabs/_console/_message_view/factory.ts'
+import ScMessageDetail from '@/pages/channel/[channelId]/_tabs/_console/_message_view/_component/ScMessageDetail.tsx'
+
+registerMessageView({
+  detailComponent: ScMessageDetail,
+  type: 'sc',
+  display: (_) => ({
+    tag: 'sc',
+    name: '查找类',
+    color: 'default',
+  }),
+})
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/watch.ts b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/watch.ts
deleted file mode 100644
index d2918e3..0000000
--- a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/_register/watch.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { registerMessageView } from '../factory.ts'
-import WatchMessageDetail from '../_component/WatchMessageDetail.tsx'
-
-registerMessageView({
-  type: 'watch',
-  display: (message) => ({
-    name: `${message.className}#${message.methodName}`,
-    color: 'default',
-    tag: 'watch',
-  }),
-  detailComponent: WatchMessageDetail,
-})
diff --git a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/init.ts b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/init.ts
index bdc1d6d..9aa6fb3 100644
--- a/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/init.ts
+++ b/spectre-frontend/src/pages/channel/[channelId]/_tabs/_console/_message_view/init.ts
@@ -1 +1 @@
-import.meta.glob('./_register/*.ts', { eager: true })
+import.meta.glob('./_register/*.{ts,tsx}', { eager: true })