Add panel error message component

source/Component/AttrInput/AttrInput.tsx

@@ -24,6 +24,13 @@ class AttrInput extends Component<IAttrInputProps> {
 
     private value: string = "";
     private error: ReactNode;
+    private numberTestReg = [/\.0*$/, /[1-9]+0+$/];
+
+    private numberTester(value: string) {
+        return isNaN((value as any) / 1) ||
+            this.numberTestReg[0].test(value) ||
+            this.numberTestReg[1].test(value);
+    } 
 
     private check(value: string): ReactNode {
 
@@ -37,7 +44,7 @@ class AttrInput extends Component<IAttrInputProps> {
             const praseNumber = (value as any) / 1;
 
             // 数字校验
-            if (isNaN(praseNumber) || /\.0*$/.test(value)) {
+            if (this.numberTester(value)) {
                 return <Localization i18nKey="Input.Error.Not.Number" />
             }
 

source/Component/ErrorMessage/ErrorMessage.scss

@@ -0,0 +1,3 @@
+div.panel-error-message {
+    padding-top: 5px;
+}

source/Component/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,16 @@
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { FunctionComponent } from "react";
+import "./ErrorMessage.scss";
+
+interface IErrorMessageProps {
+    i18nKey: AllI18nKeys;
+    options?: Record<string, string>;
+}
+
+const ErrorMessage: FunctionComponent<IErrorMessageProps> = (props) => {
+    return <div className="panel-error-message">
+        <Localization i18nKey={props.i18nKey} options={props.options}/>
+    </div>
+}
+
+export { ErrorMessage };

source/Localization/ZH-CN.ts

@@ -26,7 +26,7 @@ const ZH_CN = {
     "Object.List.New.Group": "组对象 {id}",
     "Object.List.New.Range": "范围对象 {id}",
     "Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
-    "Panel.Title.Notfound": "找不到面板: {id}",
+    "Panel.Title.Notfound": "{id}",
     "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
     "Panel.Title.Render.View": "实时预览",
     "Panel.Info.Render.View": "实时仿真结果预览",

source/Panel/Panel.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, Component, FunctionComponent } from "react";
 import { Theme } from "@Component/Theme/Theme";
 import { Localization } from "@Component/Localization/Localization";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import { RenderView } from "./RenderView/RenderView";
 import { ObjectList } from "./ObjectList/ObjectList";
 import { ObjectCommand } from "./ObjectList/ObjectCommand";
@@ -45,9 +46,7 @@ function getPanelById(panelId: PanelId): ReactNode {
 				const C = info.class;
 				return <C></C>
 			} else return <Theme>
-				<Localization i18nKey={"Panel.Info.Notfound"} options={{
-					id: panelId
-				}}/>
+				<ErrorMessage i18nKey={"Panel.Info.Notfound"} options={{ id: panelId }}/>
 			</Theme>
 	}
 }

source/Panel/RangeDetails/RangeDetails.tsx

@@ -1,7 +1,8 @@
 import { Component, ReactNode } from "react";
 import { AttrInput } from "@Component/AttrInput/AttrInput";
 import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
-import { AllI18nKeys } from "@Component/Localization/Localization";
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
@@ -24,14 +25,6 @@ class RangeDetails extends Component<IMixinStatusProps> {
         "Common.Attr.Key.Radius.Z"
     ]
 
-    private renderErrorFrom(error: AllI18nKeys) {
-        return <>
-            {this.AttrI18nKey.map((key, index) => {
-                return <AttrInput key={index} keyI18n={key} disable disableI18n={error}/>
-            })}
-        </>
-    }
-
     private renderAttrInput(
         id: ObjectID, key: number, val: string | number | undefined,
         change: (val: string, status: Status) => any,
@@ -115,10 +108,10 @@ class RangeDetails extends Component<IMixinStatusProps> {
 	public render(): ReactNode {
         if (this.props.status) {
             if (this.props.status.focusObject.size <= 0) {
-                return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Unspecified");
+                return <ErrorMessage i18nKey="Panel.Info.Range.Details.Attr.Error.Unspecified"/>;
             }
             if (this.props.status.focusObject.size > 1) {
-                return this.renderErrorFrom("Common.Attr.Key.Error.Multiple");
+                return <ErrorMessage i18nKey="Common.Attr.Key.Error.Multiple"/>;
             }
             let id: ObjectID = 0;
             this.props.status.focusObject.forEach((cid => id = cid));
@@ -128,10 +121,10 @@ class RangeDetails extends Component<IMixinStatusProps> {
             if (range instanceof Range) {
                 return this.renderFrom(range);
             } else {
-                return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Not.Range");
+                return <ErrorMessage i18nKey="Panel.Info.Range.Details.Attr.Error.Not.Range"/>;
             }
         }
-		return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Unspecified");
+		return <ErrorMessage i18nKey="Panel.Info.Range.Details.Attr.Error.Unspecified"/>;
 	}
 }