Add label details panel

source/Panel/LabelDetails/LabelDetails.tsx

@@ -0,0 +1,54 @@
+import { Component, ReactNode } from "react";
+import { AttrInput } from "@Component/AttrInput/AttrInput";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { AllI18nKeys } from "@Component/Localization/Localization";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
+import { ColorInput } from "@Component/ColorInput/ColorInput";
+import "./LabelDetails.scss";
+import { LabelList } from "@Component/LabelList/LabelList";
+import { Label } from "@Model/Label";
+
+@useStatusWithEvent("focusLabelChange")
+class LabelDetails extends Component<IMixinStatusProps> {
+    
+    public readonly AttrI18nKey: AllI18nKeys[] = [
+        "Common.Attr.Key.Display.Name",
+        "Common.Attr.Key.Color",
+    ]
+
+    private renderFrom(label: Label) {
+        return <>
+
+            <LabelList
+                labels={[label]}
+                canDelete
+                deleteLabel={() => {
+                    if (this.props.status) {
+                        this.props.status.model.deleteLabel(label);
+                        this.props.status.setLabelObject();
+                    }
+                }}
+            />
+            
+            <AttrInput keyI18n="Common.Attr.Key.Display.Name" maxLength={15} value={label.name}/>
+
+            <ColorInput keyI18n="Common.Attr.Key.Color" value={label.color} valueChange={(color) => {
+                if (this.props.status) {
+                    
+                }
+            }}/>
+
+		</>;
+    }
+
+	public render(): ReactNode {
+        if (this.props.status) {
+            if (this.props.status.focusLabel) {
+                return this.renderFrom(this.props.status.focusLabel);
+            }
+        }
+		return <ErrorMessage i18nKey="Panel.Info.Label.Details.Error.Unspecified"/>;
+	}
+}
+
+export { LabelDetails };

source/Panel/LabelList/LabelList.scss

@@ -1,33 +1,8 @@
 @import "../../Component/Theme/Theme.scss";
 
-div.label-list-command-bar {
+div.label-list-panel-root {
     width: 100%;
-    height: 30px;
-    flex-shrink: 0;
-    display: flex;
-
-    div.command-item {
-        width: 30px;
-        height: 100%;
-        display: flex;
-        flex-shrink: 0;
-        justify-content: center;
-        align-items: center;
-        user-select: none;
-        cursor: pointer;
-    }
-}
-
-div.dark.label-list-command-bar {
-
-    div.command-item:hover {
-        background-color: $lt-bg-color-lvl3-dark;
-    }
-}
-
-div.light.label-list-command-bar {
-
-    div.command-item:hover {
-        background-color: $lt-bg-color-lvl3-light;
-    }
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
 }

source/Panel/LabelList/LabelList.tsx

@@ -1,7 +1,7 @@
-import { Theme } from "@Component/Theme/Theme";
 import { LabelList as LabelListComponent } from "@Component/LabelList/LabelList";
 import { Component } from "react";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Label } from "@Model/Label";
 import "./LabelList.scss";
 
@@ -9,15 +9,48 @@ interface ILabelListProps {
 
 }
 
-@useStatusWithEvent("labelChange")
-class LabelList extends Component<ILabelListProps & IMixinStatusProps> {
+@useSetting
+@useStatusWithEvent("labelChange", "focusLabelChange")
+class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSettingProps> {
     
+    private labelInnerClick: boolean = false;
+
     public render() {
         let labels: Label[] = [];
         if (this.props.status) {
             labels = this.props.status.model.labelPool.concat([]);
         }
-        return <LabelListComponent labels={labels} canDelete/>
+        return <div
+            className="label-list-panel-root"
+            onClick={() => {
+                if (this.props.status && !this.labelInnerClick) {
+                    this.props.status.setLabelObject();
+                }
+                this.labelInnerClick = false;
+            }}
+        >
+            <LabelListComponent
+                canDelete
+                labels={labels}
+                focusLabel={this.props.status ? this.props.status.focusLabel : undefined}
+                clickLabel={(label) => {
+                    if (this.props.status) {
+                        this.props.status.setLabelObject(label);
+                    }
+                    if (this.props.setting) {
+                        this.props.setting.layout.focus("LabelDetails");
+                    }
+                    this.labelInnerClick = true;
+                }}
+                deleteLabel={(label) => {
+                    if (this.props.status) {
+                        this.props.status.model.deleteLabel(label);
+                        this.props.status.setLabelObject();
+                    }
+                    this.labelInnerClick = true;
+                }}
+            />
+        </div>;
     }
 }
 

source/Panel/ObjectList/ObjectList.tsx

@@ -36,12 +36,15 @@ class ObjectList extends Component<IMixinStatusProps & IMixinSettingProps> {
                 }
             }))}
             clickLine={(item) => {
-                if (this.props.setting) {
-                    this.props.setting.layout.focus("ObjectList");
-                }
                 if (this.props.status) {
                     this.props.status.setFocusObject(new Set<ObjectID>().add(item.key));
                 }
+                if (this.props.setting) {
+                    if (item.key.slice(0, 1) === "R") {
+                        this.props.setting.layout.focus("RangeDetails");
+                    }
+                    this.props.setting.layout.focus("ObjectList");
+                }
             }}
             checkBox={(item) => {
                 if (this.props.setting) {

source/Panel/Panel.tsx

@@ -6,6 +6,7 @@ import { ObjectList } from "./ObjectList/ObjectList";
 import { ObjectCommand } from "./ObjectList/ObjectCommand";
 import { RangeDetails } from "./RangeDetails/RangeDetails";
 import { LabelList } from "./LabelList/LabelList";
+import { LabelDetails } from "./LabelDetails/LabelDetails";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -23,6 +24,7 @@ type PanelId = ""
 | "ObjectList" // 对象列表
 | "RangeDetails" // 范围属性
 | "LabelList" // 标签列表
+| "LabelDetails" // 标签属性
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -40,7 +42,11 @@ PanelInfoMap.set("RangeDetails", {
 })
 PanelInfoMap.set("LabelList", {
     nameKey: "Panel.Title.Label.List.View", introKay: "Panel.Info.Label.List.View",
-    class: LabelList
+    class: LabelList, hidePadding: true
+})
+PanelInfoMap.set("LabelDetails", {
+    nameKey: "Panel.Title.Label.Details.View", introKay: "Panel.Info.Label.Details.View",
+    class: LabelDetails
 })
 
 function getPanelById(panelId: PanelId): ReactNode {