source/Component/AttrInput/AttrInput.tsx

@@ -12,6 +12,7 @@ interface IAttrInputProps {
     value?: number | string;
 	isNumber?: boolean;
     maxLength?: number;
+    minLength?: number;
     max?: number;
     min?: number;
     step?: number;
@@ -40,6 +41,11 @@ class AttrInput extends Component<IAttrInputProps> {
             return <Localization i18nKey="Input.Error.Length" options={{ num: maxLength.toString() }} />
         }
 
+        const minLength = this.props.minLength ?? 1;
+        if (value.length < minLength) {
+            return <Localization i18nKey="Input.Error.Length.Less" options={{ num: minLength.toString() }} />
+        }
+
         if (this.props.isNumber) {
             const praseNumber = (value as any) / 1;
 

source/Component/LabelList/LabelList.scss

@@ -63,14 +63,22 @@ div.light.label {
     }
 }
 
-div.dark.label:hover,
+div.dark.label:hover {
-div.dark.label.focus {
     color: $lt-font-color-lvl2-dark;
     background-color: $lt-bg-color-lvl2-dark;
 }
 
-div.light.label:hover,
+div.dark.label.focus {
-div.light.label.focus {
+    color: $lt-font-color-lvl1-dark;
+    background-color: $lt-bg-color-lvl1-dark;
+}
+
+div.light.label:hover {
     color: $lt-font-color-lvl2-light;
     background-color: $lt-bg-color-lvl2-light;
 }
+
+div.light.label.focus {
+    color: $lt-font-color-lvl1-light;
+    background-color: $lt-bg-color-lvl1-light;
+}

source/Component/LabelList/LabelList.tsx

@@ -38,9 +38,6 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
                 }
                 this.isDeleteClick = false;
             }}
-            style={{
-                borderColor: isFocus ? colorCss : undefined
-            }}
         >
             <div className="label-color" style={{
                 backgroundColor: colorCss,

source/Component/TogglesInput/TogglesInput.tsx

@@ -9,7 +9,9 @@ interface ITogglesInputProps {
     infoI18n?: AllI18nKeys;
     value?: boolean;
     disable?: boolean;
-    valueChange?: (color: boolean) => any;
+    onIconName?: string;
+    offIconName?: string;
+    valueChange?: (value: boolean) => any;
 }
 
 class TogglesInput extends Component<ITogglesInputProps> {
@@ -33,9 +35,17 @@ class TogglesInput extends Component<ITogglesInputProps> {
                         }
                     })}
                 >
-                    <Icon iconName="CheckMark" style={{
+                    <Icon
-                        display: this.props.value ? "inline-block" : "none"
+                        iconName={
-                    }}></Icon>
+                            this.props.value ? 
+                                this.props.onIconName ?? "CheckMark" :
+                                this.props.offIconName ?? undefined
+                        }
+                        style={{
+                            display: this.props.value ? "inline-block" : 
+                                this.props.offIconName ? "inline-block" : "none"
+                        }}
+                    ></Icon>
                 </div>    
             </div>
         </Theme>

source/Context/Status.tsx

@@ -32,6 +32,7 @@ interface IStatusEvent {
     objectChange: void;
     labelChange: void;
     rangeAttrChange: void;
+    labelAttrChange: void;
 }
 
 class Status extends Emitter<IStatusEvent> {
@@ -120,6 +121,24 @@ class Status extends Emitter<IStatusEvent> {
         }
     }
 
+    /**
+     * 修改范围属性
+     */
+    public changeLabelAttrib<K extends keyof Label>
+    (label: Label, key: K, val: Label[K]) {
+        let findLabel: Label | undefined;
+        for (let i = 0; i < this.model.labelPool.length; i++) {
+            if (this.model.labelPool[i].equal(label)) {
+                findLabel = this.model.labelPool[i];
+                break;
+            }
+        }
+        if (findLabel) {
+            findLabel[key] = val;
+            this.emit("labelAttrChange");
+        }
+     }
+
     /**
      * 鼠标工具状态
      */

source/Localization/EN-US.ts

@@ -23,6 +23,7 @@ const EN_US = {
     "Input.Error.Max": "Enter value must be less than {num}",
     "Input.Error.Min": "Enter value must be greater than {num}",
     "Input.Error.Length": "The length of the input content must be less than {num}",
+    "Input.Error.Length.Less": "The length of the input content must be greater than {num}",
     "Object.List.New.Group": "Group object {id}",
     "Object.List.New.Range": "Range object {id}",
     "Object.List.New.Label": "Label {id}",
@@ -49,6 +50,7 @@ const EN_US = {
     "Common.Attr.Key.Color": "Color",
     "Common.Attr.Key.Display": "Display",
     "Common.Attr.Key.Update": "Update",
+    "Common.Attr.Key.Delete": "Delete",
     "Common.Attr.Key.Error.Multiple": "Multiple values",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",

source/Localization/ZH-CN.ts

@@ -23,6 +23,7 @@ const ZH_CN = {
     "Input.Error.Max": "输入数值须小于 {number}",
     "Input.Error.Min": "输入数值须大于 {number}",
     "Input.Error.Length": "输入内容长度须小于 {number}",
+    "Input.Error.Length.Less": "输入内容长度须大于 {number}",
     "Object.List.New.Group": "组对象 {id}",
     "Object.List.New.Range": "范围对象 {id}",
     "Object.List.New.Label": "标签 {id}",
@@ -49,6 +50,7 @@ const ZH_CN = {
     "Common.Attr.Key.Color": "颜色",
     "Common.Attr.Key.Display": "显示",
     "Common.Attr.Key.Update": "更新",
+    "Common.Attr.Key.Delete": "删除",
     "Common.Attr.Key.Error.Multiple": "多重数值",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",

source/Panel/LabelDetails/LabelDetails.tsx

@@ -4,37 +4,32 @@ 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";
+import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
+import "./LabelDetails.scss";
 
-@useStatusWithEvent("focusLabelChange")
+@useStatusWithEvent("focusLabelChange", "labelAttrChange", "labelChange")
 class LabelDetails extends Component<IMixinStatusProps> {
 
-    public readonly AttrI18nKey: AllI18nKeys[] = [
-        "Common.Attr.Key.Display.Name",
-        "Common.Attr.Key.Color",
-    ]
-
     private renderFrom(label: Label) {
         return <>
             
-            <LabelList
+            <AttrInput keyI18n="Common.Attr.Key.Display.Name" maxLength={15} value={label.name} valueChange={(value) => {
-                labels={[label]}
-                canDelete
-                deleteLabel={() => {
                 if (this.props.status) {
-                        this.props.status.model.deleteLabel(label);
+                    this.props.status.changeLabelAttrib(label, "name", value);
-                        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) {
+                    this.props.status.changeLabelAttrib(label, "color", color);
+                }
+            }}/>
 
+            <TogglesInput keyI18n="Common.Attr.Key.Delete" onIconName="delete" offIconName="delete" valueChange={() => {
+                if (this.props.status) {
+                    this.props.status.model.deleteLabel(label);
+                    this.props.status.setLabelObject();
                 }
             }}/>
 

source/Panel/LabelList/LabelList.tsx

@@ -10,7 +10,7 @@ interface ILabelListProps {
 }
 
 @useSetting
-@useStatusWithEvent("labelChange", "focusLabelChange")
+@useStatusWithEvent("labelChange", "focusLabelChange", "labelAttrChange")
 class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSettingProps> {
     
     private labelInnerClick: boolean = false;