Add range details panel

source/Component/AttrInput/AttrInput.scss

@@ -0,0 +1,78 @@
+@import "../Theme/Theme.scss";
+
+div.attr-input {
+	width: 100%;
+	display: flex;
+	min-height: 24px;
+	padding: 8px 0;
+
+	div.input-intro {
+		width: 50%;
+		height: 100%;
+		max-width: 180px;
+		display: flex;
+		align-items: center;
+	}
+
+	div.input-content {
+		width: 50%;
+		height: 100%;
+		max-width: 180px;
+		box-sizing: border-box;
+		border-radius: 3px;
+		overflow: hidden;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		min-height: 24px;
+
+		input {
+			padding: 0 5px;
+			width: 100%;
+			height: 100%;
+			border: none;
+			outline:none;
+		};
+
+		input:focus {
+			border: none;
+		}
+
+		div.button-left, div.button-right {
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			vertical-align: middle;
+			cursor: pointer;
+			user-select: none;
+			padding: 0 3px;
+		}
+	}
+}
+
+div.dark.attr-input {
+
+	div.input-content,
+	div.input-content input {
+		background-color: $lt-bg-color-lvl3-dark;
+		color: $lt-font-color-normal-dark;
+	}
+
+	div.button-left:hover, div.button-right:hover {
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+}
+
+div.light.attr-input {
+
+	div.input-content,
+	div.input-content input {
+		background-color: $lt-bg-color-lvl3-light;
+		color: $lt-font-color-normal-light;
+	}
+
+	div.button-left:hover, div.button-right:hover {
+		background-color: $lt-bg-color-lvl2-light;
+	}
+}

source/Component/AttrInput/AttrInput.tsx

@@ -0,0 +1,37 @@
+import { Component, ReactNode } from "react";
+import { FontLevel, Theme } from "@Component/Theme/Theme";
+import "./AttrInput.scss";
+import { Icon } from "@fluentui/react";
+
+interface IAttrInputProps {
+	isNumber?: boolean;
+}
+
+class AttrInput extends Component<IAttrInputProps> {
+	public render(): ReactNode {
+
+		return <Theme
+			className="attr-input"
+			fontLevel={FontLevel.normal}
+		>
+			<div className="input-intro">
+				Input
+			</div>
+			<div className="input-content">
+				{
+					this.props.isNumber ? <div className="button-left">
+						<Icon iconName="ChevronLeft"></Icon>
+					</div> : null
+				}
+				<input className="input"></input>
+				{
+					this.props.isNumber ? <div className="button-right">
+						<Icon iconName="ChevronRight"></Icon>
+					</div> : null
+				}
+			</div>
+		</Theme>
+	}
+}
+
+export { AttrInput };

source/Localization/EN-US.ts

@@ -28,6 +28,8 @@ const EN_US = {
     "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",
+    "Panel.Title.Range.Details.View": "Range attributes",
+    "Panel.Info.Range.Details.View": "Edit View Range attributes",
 
 }
 export default EN_US;

source/Localization/ZH-CN.ts

@@ -28,5 +28,7 @@ const ZH_CN = {
     "Panel.Info.Render.View": "实时仿真结果预览",
     "Panel.Title.Object.List.View": "对象列表",
     "Panel.Info.Object.List.View": "编辑查看全部对象属性",
+    "Panel.Title.Range.Details.View": "范围属性",
+    "Panel.Info.Range.Details.View": "编辑查看范围属性",
 }
 export default ZH_CN;

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -75,8 +75,7 @@ class SimulatorWeb extends Component {
                     items: [{
                         panles: ["ObjectList", "Test tab"]
                     }, {
-                        items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}],
-                        layout: LayoutDirection.Y
+                        panles: ["RangeDetails", "Label e"]
                     }],
                     layout: LayoutDirection.Y
                 }

source/Panel/Panel.tsx

@@ -4,6 +4,7 @@ import { Localization } from "@Component/Localization/Localization";
 import { RenderView } from "./RenderView/RenderView";
 import { ObjectList } from "./ObjectList/ObjectList";
 import { ObjectCommand } from "./ObjectList/ObjectCommand";
+import { RangeDetails } from "./RangeDetails/RangeDetails";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -19,6 +20,7 @@ interface IPanelInfo {
 type PanelId = ""
 | "RenderView" // 主渲染器
 | "ObjectList" // 对象列表
+| "RangeDetails" // 范围属性
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -30,6 +32,10 @@ PanelInfoMap.set("ObjectList", {
     nameKey: "Panel.Title.Object.List.View", introKay: "Panel.Info.Object.List.View",
     class: ObjectList, header: ObjectCommand, hidePadding: true
 })
+PanelInfoMap.set("RangeDetails", {
+    nameKey: "Panel.Title.Range.Details.View", introKay: "Panel.Info.Range.Details.View",
+    class: RangeDetails
+})
 
 function getPanelById(panelId: PanelId): ReactNode {
 	switch (panelId) {

source/Panel/RangeDetails/RangeDetails.tsx

@@ -0,0 +1,14 @@
+import { Component, ReactNode } from "react";
+import { AttrInput } from "@Component/AttrInput/AttrInput";
+import "./RangeDetails.scss";
+
+class RangeDetails extends Component {
+	public render(): ReactNode {
+		return <div>
+			<AttrInput></AttrInput>
+			<AttrInput isNumber></AttrInput>
+		</div>
+	}
+}
+
+export { RangeDetails };