diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/App.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/App.tsx
index 54ee45b6a34ce0f34ca67209ae544c71d10d1b28..7853b34d23e6cbf907580c42513bed18011f8f0d 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/App.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/App.tsx
@@ -72,16 +72,16 @@ const App = () => {
   }, [currentGraph, JSON.stringify(subgraphs)]);
 
   return <div className="flex h-screen w-screen flex-col">
-    <Loading/>
-    <Toaster position="bottom-right" closeButton richColors/>
+    <Loading />
+    <Toaster position="bottom-right" closeButton richColors />
     {modelPath
       ? <>
-        <Toolbar/>
+        <Toolbar />
         <div className="flex-1">
-          <ModelStructure/>
+          <ModelStructure />
         </div>
       </>
-      : <FileUpload/>
+      : <FileUpload />
     }
   </div>
 }
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Fsg/Filter.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Fsg/Filter.tsx
index 5ddcb71a72e86e2ee5423b39d721164311a8c9f2..badca84eeb25712c1fd27686cd35a471aaa718f9 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Fsg/Filter.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Fsg/Filter.tsx
@@ -35,7 +35,7 @@ const Filter = (props: {
   const t = useI18n()
   const [repeatTimes, setRepeatTimes] = useState<number>(2)
   const [minNodes, setMinNodes] = useState<number>(2)
-  const [maxNodes, setMaxNodes] = useState<number>(8)
+  const [maxNodes, setMaxNodes] = useState<number>(3)
   const [loadingExportBtn, setLoadingExportBtn] = useState<boolean>(false)
   const [loadingQueryBtn, setLoadingQueryBtn] = useState<boolean>(false)
   const visible = useAtomValue(fsgVisibleAtom)
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Fsg/index.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Fsg/index.tsx
index 926aebb29d3f87b3465ad23f5bbf903cc8f67d59..152b6774caa2fcdfe738b57048dab207f10b12f0 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Fsg/index.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Fsg/index.tsx
@@ -137,6 +137,9 @@ const getColumns = (t: I18nFunc): ColumnsType<FsgTableRow> => {
   ]
 }
 
+const DEFAULT_TOP = 60
+const DEFAULT_MARGIN = 80
+
 const Fsg = () => {
   const [visible, setVisible] = useAtom(fsgPanelVisibleAtom)
   const t = useI18n()
@@ -144,7 +147,7 @@ const Fsg = () => {
   const containerRef = useRef<HTMLDivElement>(null)
   const [loading, setLoading] = useState<boolean>(false)
   const [width, setWidth] = useState<number>(690)
-  const [top, setTop] = useState<number>(5)
+  const [top, setTop] = useState<number>(DEFAULT_TOP)
   const [left, setLeft] = useState<number>(10)
   const [isLock, setIsLock] = useState<boolean>(false)
   const [fsgVis, setFsgVis] = useAtom(fsgVisibleAtom)
@@ -220,15 +223,18 @@ const Fsg = () => {
   const moveContainer: ResizerType['callback'] = (moveX, moveY) => {
     setLeft(oLeft => {
       const newLeft = oLeft + moveX
-      if (newLeft > window.innerWidth - 80) {
-        return window.innerWidth - 80
+      if (newLeft > window.innerWidth - DEFAULT_MARGIN) {
+        return window.innerWidth - DEFAULT_MARGIN
       }
       return newLeft > 0 ? newLeft : 0
     })
     setTop(oTop => {
       const newTop = oTop + moveY
-      if (newTop > window.innerHeight - 80) {
-        return window.innerHeight - 80
+      if (newTop < DEFAULT_TOP) {
+        return DEFAULT_TOP
+      }
+      if (newTop > window.innerHeight - DEFAULT_MARGIN) {
+        return window.innerHeight - DEFAULT_MARGIN
       }
       return newTop > 0 ? newTop : 0
     })
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/StringLikeArray.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/StringLikeArray.tsx
deleted file mode 100644
index e8fbdfb42be80e7c408e774291cd01361482caa6..0000000000000000000000000000000000000000
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/StringLikeArray.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright (c) 2025, Huawei Technologies Co., Ltd.
-// All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0  (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-const StringLikeArray = ({ name, value }: AttrProps<"string-like-array">) =>
-  <div
-    className="flex justify-between">
-    <div className="w-24">
-      {name}
-    </div>
-
-    <div className="flex flex-1 flex-col">
-      {value.map((t, i) => <div key={t + i}>
-        {t}
-      </div>)}
-    </div>
-  </div>
-
-export default StringLikeArray
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/TensorVals.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/TensorVals.tsx
deleted file mode 100644
index 0db027196d245e792b39716f9d685f6e6d80fe73..0000000000000000000000000000000000000000
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/TensorVals.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright (c) 2025, Huawei Technologies Co., Ltd.
-// All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0  (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-const TensorVals = ({ name, value }: AttrProps<"tensor-vals">) => <div
-  className="flex justify-between">
-  <div className="w-24">
-    {name}
-  </div>
-
-  <div className="flex flex-1 flex-col">
-    {value.map((t, i) => <div key={t + i}>
-      {t}
-    </div>)}
-  </div>
-</div>
-
-export default TensorVals
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/TensorsTuple.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/TensorsTuple.tsx
deleted file mode 100644
index 785dfd80d905cacbee8265dfa6e58b448914bc8d..0000000000000000000000000000000000000000
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/TensorsTuple.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright (c) 2025, Huawei Technologies Co., Ltd.
-// All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0  (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-const TensorsTuple = ({ name, value }: AttrProps<"tensors-tuple">) => <div
-  className="flex justify-between">
-  <div className="w-24">
-    {name}
-  </div>
-
-  <div className="flex flex-1 flex-col">
-    {value.map((tensors, i) =>
-      <div key={i} className="flex pl-2">
-        <div className="font-medium text-gray-400">
-          -
-        </div>
-
-        {tensors.map((tensor, j) =>
-          <div key={j} className="ml-2 flex">
-            <div className="mr-1 h-1 w-1 self-center rounded-full bg-gray-500"/>
-            <div>
-              {tensor}
-            </div>
-          </div>)}
-      </div>)}
-  </div>
-</div>
-
-export default TensorsTuple
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/index.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/index.tsx
deleted file mode 100644
index 0f96c5b882ffa7ea023deb46369b2f593deef5b2..0000000000000000000000000000000000000000
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright (c) 2025, Huawei Technologies Co., Ltd.
-// All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0  (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import StringLike from "./StringLike"
-import StringLikeArray from "./StringLikeArray"
-import TensorVals from "./TensorVals"
-import TensorsTuple from "./TensorsTuple"
-
-type Props = {
-  name: string
-  attr: AttrValue
-}
-
-const Attribute = ({ name, attr }: Props) => {
-  const { type, value } = attr
-
-  switch (type) {
-    case "string-like":
-    case "tensor-val":
-      return <StringLike name={name} value={value}/>
-    case "string-like-array":
-      return <StringLikeArray name={name} value={value}/>
-    case "tensor-vals":
-      return <TensorVals name={name} value={value}/>
-    case "tensors-tuple":
-      return <TensorsTuple name={name} value={value}/>
-    default:
-      break
-  }
-}
-
-export default Attribute
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/StringLike.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/Attribute.tsx
similarity index 50%
rename from plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/StringLike.tsx
rename to plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/Attribute.tsx
index cba36f63cf9b167575a0136f864a8ef5d8ebb29f..5f277b651210b62ca61cc3f85277c0913f75839d 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/StringLike.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/Attribute.tsx
@@ -16,14 +16,30 @@
 import { joinCls } from "libs"
 import { Tooltip } from "ui"
 
-type Props = AttrProps<"string-like" | "tensor-val">
+export const Attribute = ({ name, attr }: Props) => {
+  const { type, value } = attr
 
-const StringLike = ({name, value}: Props) => {
+  switch (type) {
+    case "string-like":
+    case "tensor-val":
+      return <StringLike name={name} value={value} />
+    case "string-like-array":
+      return <StringLikeArray name={name} value={value} />
+    case "tensor-vals":
+      return <TensorVals name={name} value={value} />
+    case "tensors-tuple":
+      return <TensorsTuple name={name} value={value} />
+    default:
+      break
+  }
+}
+
+const StringLike = ({ name, value }: StringLikeProps) => {
   const containerStyle = joinCls(
     "group relative overflow-hidden rounded-xl",
     "bg-gradient-to-br from-blue-500/10 to-purple-600/10 backdrop-blur-sm",
     "border border-blue-500/20 dark:border-purple-600/30",
-    "px-2 py-1.5"
+    "px-2 py-1.5 my-[5px]"
   )
 
   const nameLabelStyle = joinCls(
@@ -48,9 +64,9 @@ const StringLike = ({name, value}: Props) => {
         content={value || "EMPTY_STR"}
         className="w-full truncate"
       >
-          <span className={valueLabelStyle}>
-            {value || "EMPTY_STR"}
-          </span>
+        <span className={valueLabelStyle}>
+          {value || "EMPTY_STR"}
+        </span>
       </Tooltip>
     </div>
 
@@ -58,8 +74,57 @@ const StringLike = ({name, value}: Props) => {
       "absolute top-0 right-0 h-full w-1 opacity-0",
       "bg-gradient-to-b from-blue-500/60 to-purple-600/60",
       "transition-opacity duration-300 group-hover:opacity-100"
-    )}/>
+    )} />
   </div>
 }
 
-export default StringLike
+const StringLikeArray = ({ name, value }: AttrProps<"string-like-array">) =>
+  <div
+    className="flex justify-between my-[5px]">
+    <div className="w-24">
+      {name}
+    </div>
+
+    <div className="flex flex-1 flex-col">
+      {value.map((str, i) => <div key={`${str}_${i}`}>
+        {str}
+      </div>)}
+    </div>
+  </div>
+
+const TensorVals = ({ name, value }: AttrProps<"tensor-vals">) => <div
+  className="flex justify-between my-[5px]">
+  <div className="w-24">
+    {name}
+  </div>
+
+  <div className="flex flex-1 flex-col">
+    {value.map((Tensor, i) => <div key={`${Tensor}_${i}`}>
+      {Tensor}
+    </div>)}
+  </div>
+</div>
+
+const TensorsTuple = ({ name, value }: AttrProps<"tensors-tuple">) => <div
+  className="flex justify-between my-[5px]">
+  <div className="w-24">
+    {name}
+  </div>
+
+  <div className="flex flex-1 flex-col">
+    {value.map((tensors, i) =>
+      <div key={i} className="flex pl-2">
+        <div className="font-medium text-gray-400">
+          -
+        </div>
+
+        {tensors.map((tensor, j) =>
+          <div key={j} className="ml-2 flex">
+            <div className="mr-1 h-1 w-1 self-center rounded-full bg-gray-500" />
+            <div>
+              {tensor}
+            </div>
+          </div>)}
+      </div>)}
+  </div>
+</div>
\ No newline at end of file
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/attribute.d.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/attributes.d.ts
similarity index 87%
rename from plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/attribute.d.ts
rename to plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/attributes.d.ts
index 1bba304c6828890f022ca0e6035f480f1f802a06..3d4e5a8636923686a4ff4788bc5b2fd32c93b959 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attribute/attribute.d.ts
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/attributes.d.ts
@@ -21,3 +21,10 @@ type AttrProps<T extends AttrValue["type"]> = {
     name: string
     value: AttrMap[T]["value"]
 }
+
+type Props = {
+    name: string
+    attr: AttrValue
+}
+
+type StringLikeProps = AttrProps<"string-like" | "tensor-val">
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/index.tsx
similarity index 55%
rename from plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes.tsx
rename to plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/index.tsx
index e40dea744ba7eff5d59ad6fe2be705b69ba9c70f..1e268602405b5ff5c68c6b29f9c3b0c9206381bb 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Attributes/index.tsx
@@ -14,28 +14,16 @@
 // limitations under the License.
 
 import { useContext } from "react"
-import Divider from "../Divider"
-import PropertiesContext from "../context"
-import Attribute from "./Attribute"
+import Divider from "../../Divider"
+import PropertiesContext from "../../context"
+import { Attribute } from "./Attribute"
 
-type Props = {
-  attributes: [string, AttrValue][]
-}
-
-const Attributes = ({ attributes }: Props) => {
+export const getAttributes = (attributes: [string, AttrValue][], renderList: JSX.Element[]) => {
   const { t } = useContext(PropertiesContext)
 
-  if (!attributes.length) return null
-
-  return <>
-    <h1 className="my-2.5 font-medium text-slate-600 text-sm dark:text-slate-400">{t("panel.attrs")}</h1>
-    <div className="flex flex-col gap-y-1.5">
-      {attributes.map(([name, attr]) => <Attribute
-        key={name} name={name} attr={attr}/>)}
-    </div>
-
-    <Divider/>
-  </>
+  if (!attributes.length) {
+    return
+  }
+  renderList.push(<Divider />, <h1 className="my-[5px] font-medium text-slate-600 text-sm dark:text-slate-400">{t("panel.attrs")}</h1>)
+  attributes.forEach(([name, attr]) => renderList.push(<Attribute key={name} name={name} attr={attr} />))
 }
-
-export default Attributes
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Initializer.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Initializer.tsx
index e1c9833d3d2a32025c24e42aaaf33c4bcdffee66..be1eb2a9367573173a2aa5c59d773c77eeae733f 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Initializer.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Initializer.tsx
@@ -15,23 +15,10 @@
 
 import Divider from "../Divider"
 
-type Props = {
-  data?: Tensor[]
+export const getInitializer = (data: Tensor[], renderList: JSX.Element[]) => {
+  if (!data) {
+    return
+  }
+  renderList.push(<Divider />, <div>Initializer</div>)
+  data.forEach((t, i) => renderList.push(<div key={i}>【{t.category}】{t.repr}</div>))
 }
-
-const Initializer = ({data}: Props) => {
-  if (!data) return null
-
-  return <>
-    <div>Initializer</div>
-    <div>
-      {data.map((t, i) => <div key={i}>
-        【{t.category}】{t.repr}
-      </div>)}
-    </div>
-
-    <Divider/>
-  </>
-}
-
-export default Initializer
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/InputOutput.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/InputOutput.tsx
index 4f21fbb9eb34cc19a6588491b4ddce6e42ca92ae..4685f4b37b35329aa7034a5af022b18f117e59e4 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/InputOutput.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/InputOutput.tsx
@@ -13,30 +13,80 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { joinCls } from "libs"
+import { Tooltip } from "ui"
 import { useContext } from "react"
 import PropertiesContext from "../context"
-import IoItem from "./IoItem"
+import Divider from "../Divider"
 
 type Props = {
   i18key: string
   data: string[]
 }
 
-const InputOutput = ({ i18key, data }: Props) => {
+type IoItemProps = {
+  id: string
+}
+
+export const getInputOutput = ({ i18key, data }: Props, renderList: JSX.Element[]) => {
   const { t } = useContext(PropertiesContext)
 
   const processed = data.filter(t => t.length)
 
-  if (!processed.length) return null
+  if (!processed.length) {
+    return
+  }
+  renderList.push(<Divider />, <h1 className="my-[5px] font-medium text-slate-600 text-sm dark:text-slate-400">{t(i18key)}</h1>)
+  data.forEach((i) => renderList.push(<IoItem key={i} id={i} />))
+}
+
+
+const IoItem = ({ id }: IoItemProps) => {
+  const { nodes, parameters } = useContext(PropertiesContext)
+
+  const content = nodes[id]?.opType ?? parameters[id]
 
-  return <>
-    <h1 className="my-2.5 font-medium text-slate-600 text-sm dark:text-slate-400">{t(i18key)}</h1>
-    <div className="my-2">
-      <div className="flex flex-col gap-y-2">
-        {data.map(i => <IoItem key={i} id={i}/>)}
-      </div>
+  const containerStyle = joinCls(
+    "group relative overflow-hidden rounded-xl my-[5px]",
+    "bg-gradient-to-br from-blue-500/10 to-purple-600/10 backdrop-blur-sm",
+    "border border-blue-500/20 dark:border-purple-600/30",
+    "px-2 py-1.5 transition-all duration-200 hover:shadow-md",
+    "hover:bg-gradient-to-br hover:from-blue-500/15 hover:to-purple-600/15"
+  )
+
+  const idStyle = joinCls(
+    "font-mono text-xs text-blue-600 dark:text-blue-400",
+    "truncate max-w-[140px] transition-colors",
+    "group-hover:text-blue-800 dark:group-hover:text-blue-300"
+  )
+
+  const contentStyle = joinCls(
+    "font-mono text-xs text-purple-600 dark:text-purple-400",
+    "truncate max-w-[160px] px-2 py-0.5 rounded",
+    "bg-gradient-to-r from-purple-200/70 to-violet-200/70",
+    "dark:from-purple-900/40 dark:to-violet-900/40",
+    "group-hover:from-purple-300 group-hover:to-violet-300",
+    "dark:group-hover:from-purple-800 dark:group-hover:to-violet-800"
+  )
+
+  return <div className={containerStyle}>
+    <div className="flex items-center justify-between gap-3">
+      <Tooltip content={id} className="w-full truncate">
+        <span className={idStyle}>{id}</span>
+      </Tooltip>
+      {content && (
+        <Tooltip content={content} className="w-full truncate">
+          <span className={contentStyle}>{content}</span>
+        </Tooltip>
+      )}
     </div>
-  </>
-}
 
-export default InputOutput
+    <div
+      className={joinCls(
+        "absolute top-0 right-0 h-full w-0.5 bg-gradient-to-b from-blue-500/0",
+        "to-purple-600/0 transition-all duration-300 group-hover:w-1",
+        "group-hover:from-blue-500/60 group-hover:to-purple-600/60"
+      )}
+    />
+  </div>
+}
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/IoItem.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/IoItem.tsx
deleted file mode 100644
index b55da59907c4b9eac336faa26e86d2ad74099fc0..0000000000000000000000000000000000000000
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/IoItem.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright (c) 2025, Huawei Technologies Co., Ltd.
-// All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0  (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { joinCls } from "libs"
-import { useContext } from "react"
-import { Tooltip } from "ui"
-import PropertiesContext from "../context"
-
-type Props = {
-  id: string
-}
-
-const IoItem = ({id}: Props) => {
-  const {nodes, parameters} = useContext(PropertiesContext)
-
-  const content = nodes[id]?.opType ?? parameters[id]
-
-  const containerStyle = joinCls(
-    "group relative overflow-hidden rounded-xl",
-    "bg-gradient-to-br from-blue-500/10 to-purple-600/10 backdrop-blur-sm",
-    "border border-blue-500/20 dark:border-purple-600/30",
-    "px-2 py-1.5 transition-all duration-200 hover:shadow-md",
-    "hover:bg-gradient-to-br hover:from-blue-500/15 hover:to-purple-600/15"
-  )
-
-  const idStyle = joinCls(
-    "font-mono text-xs text-blue-600 dark:text-blue-400",
-    "truncate max-w-[140px] transition-colors",
-    "group-hover:text-blue-800 dark:group-hover:text-blue-300"
-  )
-
-  const contentStyle = joinCls(
-    "font-mono text-xs text-purple-600 dark:text-purple-400",
-    "truncate max-w-[160px] px-2 py-0.5 rounded",
-    "bg-gradient-to-r from-purple-200/70 to-violet-200/70",
-    "dark:from-purple-900/40 dark:to-violet-900/40",
-    "group-hover:from-purple-300 group-hover:to-violet-300",
-    "dark:group-hover:from-purple-800 dark:group-hover:to-violet-800"
-  )
-
-  return <div className={containerStyle}>
-    <div className="flex items-center justify-between gap-3">
-      <Tooltip content={id} className="w-full truncate">
-        <span className={idStyle}>{id}</span>
-      </Tooltip>
-      {content && (
-        <Tooltip content={content} className="w-full truncate">
-          <span className={contentStyle}>{content}</span>
-        </Tooltip>
-      )}
-    </div>
-
-    <div
-      className={joinCls(
-        "absolute top-0 right-0 h-full w-0.5 bg-gradient-to-b from-blue-500/0",
-        "to-purple-600/0 transition-all duration-300 group-hover:w-1",
-        "group-hover:from-blue-500/60 group-hover:to-purple-600/60"
-      )}
-    />
-  </div>
-}
-
-export default IoItem
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Metadata.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Metadata.tsx
index 4054a0147985376e0230d9b24ce9ac2e1d757e1e..0d0260cda6a0d620a04a6fb06c9e13b6f43e5553 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Metadata.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/Metadata.tsx
@@ -21,7 +21,7 @@ import PropertiesContext from "../context"
 type MetadataItemProps = {
   i18nKey: string
   value: string
-  tooltip: boolean
+  tooltip?: boolean
 }
 
 const MetadataItem = ({i18nKey, value, tooltip}: MetadataItemProps) => {
@@ -29,7 +29,8 @@ const MetadataItem = ({i18nKey, value, tooltip}: MetadataItemProps) => {
 
   const valueLabel = <div className={joinCls(
     "font-mono font-semibold text-slate-700 text-sm dark:text-slate-200",
-    "truncate rounded-lg bg-slate-100/50 px-2 py-1 dark:bg-slate-800/50"
+    "truncate rounded-lg bg-slate-100/50 px-2 py-1 dark:bg-slate-800/50",
+    "max-w-[200px] "
   )}>
     {value}
   </div>
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/index.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/index.tsx
index 4d7e84058d3e303f81338f4b5081dcb837f82318..622422729a9128ef5f9c3c7c34a2f83540e19b9c 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/index.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Node/index.tsx
@@ -13,11 +13,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Divider from "../Divider"
-import Attributes from "./Attributes"
-import Initializer from "./Initializer"
-import InputOutput from "./InputOutput"
+import { getAttributes } from "./Attributes"
+import { getInitializer } from "./Initializer"
+import { getInputOutput } from "./InputOutput"
 import Metadata from "./Metadata"
+import { VirtualScroll } from "ui"
 
 type Props = {
   node: ModelNode
@@ -27,18 +27,17 @@ const NodeProperty = ({ node }: Props) => {
   if (!node) return null
 
   const attributes = Object.entries(node.attributes ?? {})
+  const renderList: JSX.Element[] = [<Metadata node={node} />]
 
-  const ioDivider = node.input.length > 0 && node.output.length > 0
+  getAttributes(attributes, renderList)
+  getInitializer(node.tensors, renderList)
+  getInputOutput({ i18key: "panel.inputs", data: node.input }, renderList)
+  getInputOutput({ i18key: "panel.outputs", data: node.output }, renderList)
 
-  return <>
-    <Metadata node={node}/>
-    <Divider/>
-    <Attributes attributes={attributes}/>
-    <Initializer data={node.tensors}/>
-    <InputOutput i18key="panel.inputs" data={node.input}/>
-    {ioDivider && <Divider/>}
-    <InputOutput i18key="panel.outputs" data={node.output}/>
-  </>
+  return <VirtualScroll
+      className="rounded-xl bg-white/80 p-4 dark:bg-slate-800/50 overflow-x-hidden w-[320px]"
+      items={renderList}
+    />
 }
 
 export default NodeProperty
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/index.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/index.tsx
index a9fc53e65a66a66a748ae750bba624c7986c9b1b..fcfc1494ee78251695954adf120ceeb2d9f0faf0 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/index.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/index.tsx
@@ -50,17 +50,7 @@ const Properties = () => {
       "glass-effect border border-white/20 dark:border-slate-700/50",
     )}>
       <Header isNode={isNode}/>
-      <div
-        className="scrollbar-thin scrollbar-thumb-rounded-lg flex-1 overflow-y-auto pr-2"
-        style={{
-          scrollbarWidth: "thin",
-          scrollbarColor: "rgba(156, 163, 175, 0.5) transparent",
-        }}
-      >
-        <div className="rounded-xl bg-white/80 p-4 dark:bg-slate-800/50">
-          {content}
-        </div>
-      </div>
+      {content}
       <div className="h-2.5 bg-transparent"/>
     </div>
   </PropertiesContext.Provider>
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/index.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/index.tsx
index 8ca4389cc502fa4722e7a5b37795afceadb2ebcb..59bf2d54a736dda4fdb50906b8956bf00f442245 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/index.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/index.tsx
@@ -223,20 +223,21 @@ const GraphPath = () => {
   </div>
 }
 
-const ModelStructure = () =>
+const ModelStructure = () => <>
   <Responsive className="relative h-full">
     {props => (
       <>
         <Grid {...props} />
         <ModelStructureComp {...props} />
-        <GraphPath />
-        <Fsg />
-        <Properties />
-        <Control />
-        <SearchModal />
-        <Dynamic />
       </>
     )}
   </Responsive>
+  <GraphPath />
+  <Fsg />
+  <Properties />
+  <Control />
+  <SearchModal />
+  <Dynamic />
+</>
 
 export default ModelStructure
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ui/VirtualScroll.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ui/VirtualScroll.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0ae68c8182a62d948076d096180657fb6d92a42c
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ui/VirtualScroll.tsx
@@ -0,0 +1,238 @@
+// Copyright (c) 2025, Huawei Technologies Co., Ltd.
+// All rights reserved.
+//
+// Licensed under the Apache License, Version 2.0  (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { clsx } from 'libs'
+import {
+  useState,
+  useLayoutEffect,
+  useRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+} from 'react'
+
+type VirtualScrollProps = {
+  items: ReactNode[]
+  containerHeight?: number
+  className?: string
+  buffer?: number // 缓冲数量
+}
+
+// 每个项的尺寸信息
+type ItemSize = {
+  size: number // 高度
+  measured: boolean // 是否已测量
+}
+
+const ESTIMATED_ITEM_HEIGHT = 20;
+
+export const VirtualScroll = ({ items, containerHeight, buffer = 10, className = '' }: VirtualScrollProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const itemElementsRef = useRef<(HTMLDivElement | null)[]>([])
+  const sizesRef = useRef<ItemSize[]>(items.map(() => ({ size: ESTIMATED_ITEM_HEIGHT, measured: false })))
+  const [height, setHeight] = useState(containerHeight ?? 400)
+  const [visibleRange, setVisibleRange] = useState({
+    start: 0,
+    end: Math.min(items.length, Math.ceil(height / ESTIMATED_ITEM_HEIGHT) + buffer * 2)
+  })
+
+  // 获取累计偏移量（用于 transform 和定位）
+  const getOffset = (index: number): number => {
+    let offset = 0;
+    for (let i = 0; i < index; i++) {
+      offset += sizesRef.current[i]?.size ?? ESTIMATED_ITEM_HEIGHT;
+    }
+    return offset;
+  }
+
+  // 总高度 = 所有 item 高度之和
+  const getTotalHeight = useCallback((): number => {
+    return getOffset(items.length)
+  }, [items, getOffset])
+
+  // 二分查找：找到第一个 `offset >= target` 的索引
+  const findIndex = useCallback((target: number): number => {
+    let start = 0
+    let end = items.length
+    while (start < end) {
+      const mid = Math.floor((start + end) / 2);
+      const midOffset = getOffset(mid);
+      if (midOffset < target) {
+        start = mid + 1
+      } else {
+        end = mid
+      }
+    }
+    return start
+  }, [items, getOffset])
+
+  // 测量指定索引的元素高度
+  const measureItem = (index: number) => {
+    if (index >= sizesRef.current.length) {
+      return false
+    }
+    const ele = itemElementsRef.current[index]
+    if (ele) {
+      const actualHeight = ele.offsetHeight
+      const current = sizesRef.current[index]
+      if (!current.measured || current.size !== actualHeight) { // 高度变化
+        sizesRef.current[index] = { size: actualHeight, measured: true }
+        return true
+      }
+    }
+    return false
+  }
+
+  // 更新可见范围
+  const updateVisibleRange = useCallback(() => {
+    const container = containerRef.current
+    if (container === null || items.length === 0) {
+      return
+    }
+
+    const scrollTop = container.scrollTop
+    const containerHeight = container.clientHeight
+
+    // 找到第一个在视口内的项
+    const start = Math.max(0, findIndex(scrollTop) - buffer)
+    // 找到最后一个在视口内的项
+    const end = Math.min(items.length, findIndex(scrollTop + containerHeight) + buffer)
+
+    setVisibleRange({ start, end })
+  }, [items, buffer, findIndex])
+
+  // 滚动处理
+  const handleScroll = useCallback(() => {
+    requestAnimationFrame(() => {
+      updateVisibleRange()
+    })
+  }, [updateVisibleRange])
+
+  // 初始渲染 & 滚动监听
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    // 初始测量所有已渲染的项
+    let didUpdate = false
+    for (let i = visibleRange.start; i < visibleRange.end; i++) {
+      if (measureItem(i)) {
+        didUpdate = true
+      }
+    }
+
+    // 如果有高度更新，重新计算可见范围
+    if (didUpdate) {
+      updateVisibleRange()
+    }
+
+    container.addEventListener('scroll', handleScroll, { passive: true })
+    // 强制触发一次 layout
+    handleScroll()
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll)
+    }
+  }, [visibleRange.start, visibleRange.end, handleScroll, updateVisibleRange])
+
+  // 动态设置 ref 并测量
+  const setItemRef = useCallback((el: HTMLDivElement | null, index: number) => {
+    if (el === null) {
+      return
+    }
+    itemElementsRef.current[index] = el
+  }, [])
+
+  useLayoutEffect(() => {
+    const parent = containerRef.current?.parentElement
+    if (parent === undefined || parent === null) {
+      return
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const newHeight = entry.contentRect.height
+        if (newHeight !== height) {
+          setHeight(newHeight)
+          requestAnimationFrame(() => {
+            updateVisibleRange()
+          })
+        }
+      }
+    })
+
+    resizeObserver.observe(parent)
+
+    // 初始设置
+    setHeight(parent.clientHeight)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [updateVisibleRange])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) {
+      return
+    }
+
+    // 滚动到顶部
+    container.scrollTop = 0
+  }, [items])
+
+  const { start, end } = visibleRange
+  const visibleItems = items.slice(start, end)
+  const startOffset = getOffset(start)
+
+  return (<div
+    ref={containerRef}
+    className={clsx(
+      "virtual-scroll-container overflow-y-auto relativetouch-pan-y ",
+      "touch-pinch-zoom", className
+    )}
+    style={{
+      height,
+      contain: 'strict',
+      scrollbarWidth: "thin",
+      scrollbarColor: "rgba(156, 163, 175, 0.5) transparent",
+    }}
+  >
+    {/* 占位，撑起总高度 */}
+    <div style={{ height: getTotalHeight(), position: 'relative' }}>
+      {/* 可见项容器 */}
+      <div
+        className="absolute top-0 left-0 w-full will-change-transform"
+        style={{ transform: `translateY(${startOffset}px)` }}
+      >
+        {visibleItems.map((item, index) => {
+          const globalIndex = start + index;
+          return (
+            <div
+              key={globalIndex}
+              ref={(el) => setItemRef(el, globalIndex)}
+              style={{
+                contain: 'layout',
+                overflowAnchor: 'none',
+              }}
+            >
+              {item}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  </div>)
+}
\ No newline at end of file
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ui/index.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ui/index.ts
index f7ccca2cb7bdb643d1d155057a8cc298541f0574..148615a5e07b46758c3e6c326a811ffd3ded4661 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ui/index.ts
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ui/index.ts
@@ -16,3 +16,4 @@
 export * from "./Tooltip"
 export * from "./Switch"
 export * from "./Loading"
+export * from "./VirtualScroll"