Add ComboInput component

source/Component/ComboInput/ComboInput.scss

@@ -35,12 +35,25 @@ div.combo-input-root {
             min-height: $line-min-height;
             display: flex;
             align-items: center;
-            padding-left: 5px;
+            padding-left: 8px;
+            white-space: nowrap;
+            word-break: keep-all;
+            text-overflow: ellipsis;
+            overflow: hidden;
 
             span {
                 display: block;
             }
         }
+
+        div.list-button {
+            width: $line-min-height;
+            height: $line-min-height;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
 }
 

source/Component/ComboInput/ComboInput.tsx

@@ -2,6 +2,7 @@ import { Component, createRef, ReactNode } from "react";
 import { FontLevel, Theme } from "@Component/Theme/Theme";
 import { PickerList, IDisplayItem } from "../PickerList/PickerList";
 import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { Icon } from "@fluentui/react";
 import "./ComboInput.scss";
 
 interface IComboInputProps {
@@ -30,11 +31,17 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
     private renderPicker() {
         return <PickerList
             target={this.pickerTarget}
-            displayItems={this.props.allOption ?? []}
+            displayItems={(this.props.allOption ?? []).map((item) => {
+                return item.key === this.props.value?.key ? 
+                    {...item, mark: true} : item;
+            })}
             clickDisplayItems={((item) => {
                 if (this.props.valueChange) {
                     this.props.valueChange(item);
                 }
+                this.setState({
+                    isPickerVisible: false
+                })
             })}
             dismiss={() => {
                 this.setState({
@@ -66,6 +73,9 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
                             null
                         }
                     </div>
+                    <div className="list-button">
+                        <Icon iconName="ChevronDownMed"/>
+                    </div>
                 </div>
             </Theme>
 
@@ -74,4 +84,4 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
     }
 }
 
-export { ComboInput };
+export { ComboInput, IDisplayItem };

source/Component/PickerList/PickerList.tsx

@@ -11,6 +11,7 @@ type IPickerListItem = CtrlObject | Label;
 type IDisplayItem = {
     nameKey: AllI18nKeys;
     key: string;
+	mark?: boolean;
 }
 
 interface IPickerListProps {
@@ -82,12 +83,12 @@ class PickerList extends Component<IPickerListProps> {
 				}
 			}}
 		>
-			<div
+			<div className="list-item-icon">
-                className="list-item-name"
+				<Icon iconName="CheckMark" style={{
-                style={{
+					display: item.mark ? "block" : "none"
-                    paddingLeft: 10
+				}}/>
-                }}
+			</div>
-            >
+			<div className="list-item-name">
 				<Localization i18nKey={item.nameKey}/>
 			</div>
 		</div>;

source/Model/Group.ts

@@ -18,6 +18,11 @@ class Group extends CtrlObject {
 	 */
 	public individuals: Set<Individual> = new Set();
 
+    /**
+     * 个体生成方式
+     */
+    public genMethod: GenMod = GenMod.Point;
+
 	/**
 	 * 创建个体
      * @param count 创建数量
@@ -148,4 +153,4 @@ class Group extends CtrlObject {
 }
 
 export default Group;
-export { Group };
+export { Group, GenMod };

source/Panel/GroupDetails/GroupDetails.tsx

@@ -6,13 +6,22 @@ import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
 import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
 import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
-import { Group } from "@Model/Group";
+import { Group, GenMod } from "@Model/Group";
 import { AllI18nKeys } from "@Component/Localization/Localization";
-import { ComboInput } from "@Component/ComboInput/ComboInput";
+import { ComboInput, IDisplayItem } from "@Component/ComboInput/ComboInput";
 import "./GroupDetails.scss";
 
 interface IGroupDetailsProps {}
 
+const mapGenModToI18nKey = new Map<GenMod, AllI18nKeys>();
+mapGenModToI18nKey.set(GenMod.Point, "Common.Attr.Key.Generation.Mod.Point");
+mapGenModToI18nKey.set(GenMod.Range, "Common.Attr.Key.Generation.Mod.Range");
+
+const allOption: IDisplayItem[] = [
+    {nameKey: "Common.Attr.Key.Generation.Mod.Point", key: GenMod.Point},
+    {nameKey: "Common.Attr.Key.Generation.Mod.Range", key: GenMod.Range}
+];
+
 @useStatusWithEvent("groupAttrChange", "groupLabelChange", "focusObjectChange")
 class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
 
@@ -117,10 +126,16 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
 
             <ComboInput
                 keyI18n="Common.Attr.Key.Generation.Mod"
-                allOption={[
+                value={{
-                    {nameKey: "Common.Attr.Key.Generation.Mod.Point", key: "P"},
+                    nameKey: mapGenModToI18nKey.get(group.genMethod) ?? "Common.No.Data",
-                    {nameKey: "Common.Attr.Key.Generation.Mod.Range", key: "R"}
+                    key: group.genMethod
-                ]}
+                }}
+                allOption={allOption}
+                valueChange={(value) => {
+                    if (this.props.status) {
+                        this.props.status.changeGroupAttrib(group.id, "genMethod", value.key as any);
+                    }
+                }}
             />
 		</>
 	}