source/Component/DetailsList/DetailsList.scss

@@ -0,0 +1,49 @@
+@import "../Theme/Theme.scss";
+
+div.details-list {
+    width: 100%;
+
+    div.details-list-item {
+        display: flex;
+        align-items: stretch;
+        user-select: none;
+        cursor: pointer;
+        min-height: 30px;
+
+        div.details-list-value {
+            padding: 5px 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        div.details-list-checkbox {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 10px;
+        }
+    }
+}
+
+div.light.details-list {
+    
+    div.details-list-item:nth-child(2n) {
+        background-color: rgba($lt-bg-color-lvl5-light, .4);
+    }
+
+    div.details-list-item:hover {
+        background-color: $lt-bg-color-lvl3-light;
+    }
+}
+
+div.dark.details-list {
+
+    div.details-list-item:nth-child(2n) {
+        background-color: rgba($lt-bg-color-lvl5-dark, .4);
+    }
+
+    div.details-list-item:hover {
+        background-color: $lt-bg-color-lvl3-dark;
+    }
+}

source/Component/DetailsList/DetailsList.tsx

@@ -0,0 +1,71 @@
+import { Icon } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import { BackgroundLevel, FontLevel, Theme } from "../Theme/Theme";
+import "./DetailsList.scss";
+
+type IItems = Record<string, any> & {key: string, select?: boolean};
+
+interface IColumns<D extends IItems, K extends keyof D> {
+    key: K;
+    className?: string;
+    beforeCheckbox?: boolean;
+    render: (data: D[K]) => ReactNode,
+    click?: (data: D[K]) => any,
+}
+
+interface IDetailsListProps {
+    items: IItems[];
+    columns: IColumns<this["items"][number], keyof this["items"][number]>[];
+    hideCheckBox?: boolean;
+    checkboxClassName?: string;
+}
+
+class DetailsList extends Component<IDetailsListProps> {
+
+    private renderValue<D extends IItems, K extends keyof D>(item: IItems, column: IColumns<D, K>) {
+        return <div
+            className={"details-list-value" + (column.className ? ` ${column.className}` : "")}
+            key={column.key as any}
+        >
+            {column.render(item[column.key as any])}
+        </div>
+    }
+
+    public render(): ReactNode {
+        return <Theme
+            className="details-list"
+            backgroundLevel={BackgroundLevel.Level4}
+            fontLevel={FontLevel.normal}
+        >{
+            this.props.items.map((item) => {
+                const { checkboxClassName } = this.props;
+                return <div className="details-list-item" key={item.key}>
+                    {
+                        this.props.columns.map((column) => {
+                            if (column.beforeCheckbox) {
+                                return this.renderValue(item, column);
+                            }
+                        })
+                    }
+                    {
+                        this.props.hideCheckBox ? null :
+                        <div 
+                            className={"details-list-checkbox" + (checkboxClassName ? ` ${checkboxClassName}` : "")}
+                        >
+                            <Icon iconName="CheckMark"></Icon>
+                        </div>
+                    }
+                    {
+                        this.props.columns.map((column) => {
+                            if (!column.beforeCheckbox) {
+                                return this.renderValue(item, column);
+                            }
+                        })
+                    }
+                </div>
+            })
+        }</Theme>
+    }
+}
+
+export { DetailsList };

source/Component/Theme/Theme.scss

@@ -1,6 +1,6 @@
 @import "@fluentui/react/dist/sass/References";
 
-$lt-font-size-normal: $ms-font-size-14;
+$lt-font-size-normal: 13px;
 $lt-font-size-lvl3: $ms-font-size-16;
 $lt-font-size-lvl2: $ms-font-size-18;
 $lt-font-size-lvl1: $ms-font-size-24;

source/Localization/EN-US.ts

@@ -23,6 +23,8 @@ const EN_US = {
     "Panel.Info.Notfound": "This panel with id {id} can not found!",
     "Panel.Title.Render.View": "Live preview",
     "Panel.Info.Render.View": "Live simulation results preview",
+    "Panel.Title.Object.List.View": "Object list",
+    "Panel.Info.Object.List.View": "Edit View All Object Properties",
 
 }
 export default EN_US;

source/Localization/ZH-CN.ts

@@ -23,5 +23,7 @@ const ZH_CN = {
     "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
     "Panel.Title.Render.View": "实时预览",
     "Panel.Info.Render.View": "实时仿真结果预览",
+    "Panel.Title.Object.List.View": "对象列表",
+    "Panel.Info.Object.List.View": "编辑查看全部对象属性",
 }
 export default ZH_CN;

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -72,7 +72,7 @@ class SimulatorWeb extends Component {
                 },
                 {
                     items: [{
-                        panles: ["Label d"]
+                        panles: ["ObjectList"]
                     }, {
                         items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}],
                         layout: LayoutDirection.Y

source/Panel/ObjectList/ObjectList.tsx

@@ -0,0 +1,30 @@
+import { Component, ReactNode } from "react";
+import { DetailsList } from "@Component/DetailsList/DetailsList";
+
+class ObjectList extends Component {
+    public render(): ReactNode {
+        return <DetailsList
+            items={[
+                {key: "1", name: "Object 01", behaviors: [{name: "B1"}, {name: "B2"}], label: [{name: "L1"}, {name: "L2"}]},
+                {key: "2", name: "New Object", behaviors: [{name: "M1"}], label: [{name: "L1"}]},
+                {key: "3", name: "Range 01", behaviors: [], label: []},
+                {key: "4", name: "Cube", behaviors: [{name: "AA1"}], label: []},
+                {key: "5", name: "Custom Object", behaviors: [{name: "B1"}], label: [{name: "Q1"}, {name: "L2"}]}
+            ]}
+            columns={[
+                {
+                    key: "name",
+                    render: (name) => <span>{name}</span>
+                }, {
+                    key: "behaviors",
+                    render: (behaviors) => <span>{(behaviors as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
+                }, {
+                    key: "label",
+                    render: (label) => <span>{(label as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
+                }
+            ]}
+        />
+    }
+}
+
+export { ObjectList };

source/Panel/Panel.tsx

@@ -2,6 +2,7 @@ import { ReactNode, Component, FunctionComponent } from "react";
 import { Theme } from "@Component/Theme/Theme";
 import { Localization } from "@Component/Localization/Localization";
 import { RenderView } from "./RenderView/RenderView";
+import { ObjectList } from "./ObjectList/ObjectList";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -15,6 +16,7 @@ interface IPanelInfo {
 
 type PanelId = ""
 | "RenderView" // 主渲染器
+| "ObjectList" // 对象列表
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -22,6 +24,10 @@ PanelInfoMap.set("RenderView", {
 	nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View",
     class: RenderView, hidePadding: true, hideScrollBar: true, isDeepDark: true
 });
+PanelInfoMap.set("ObjectList", {
+    nameKey: "Panel.Title.Object.List.View", introKay: "Panel.Info.Object.List.View",
+    class: ObjectList, hidePadding: true
+})
 
 function getPanelById(panelId: PanelId): ReactNode {
 	switch (panelId) {