Add behavior picker component

source/Component/BehaviorPicker/BehaviorPicker.scss

@@ -0,0 +1,26 @@
+
+div.behavior-picker-list {
+    width: 100%;
+    max-width: 400px;
+
+    div.behavior-picker-line {
+        width: 100%;
+        padding: 0 !important;
+        display: flex !important;
+        justify-content: flex-start !important;
+
+        div.behavior-picker-line-color-view {
+            width: 0;
+            max-width: 0;
+            height: 100%;
+
+            div {
+                width: 0;
+                height: 0;
+                border-bottom: 10px solid transparent;
+                position: relative;
+                z-index: 2;
+            }
+        }
+    }
+}

source/Component/BehaviorPicker/BehaviorPicker.tsx

@@ -0,0 +1,49 @@
+import { DetailsList } from "@Component/DetailsList/DetailsList";
+import { Component, ReactNode } from "react";
+import { Behavior } from "@Model/Behavior";
+import "./BehaviorPicker.scss";
+
+interface IBehaviorPickerProps {
+    behavior: Behavior[]
+}
+
+class BehaviorPicker extends Component<IBehaviorPickerProps> {
+
+    private getData() {
+        let data: Array<{key: string, behavior: Behavior}> = [];
+        for (let i = 0; i < this.props.behavior.length; i++) {
+            data.push({
+                key: this.props.behavior[i].id,
+                behavior: this.props.behavior[i]
+            })
+        }
+        return data;
+    }
+
+    private renderColor(color: string): ReactNode {
+        return <div className="behavior-picker-line-color-view">
+            <div style={{ borderLeft: `10px solid ${color}` }}/>
+        </div>    
+    }
+
+    private renderLine = (behavior: Behavior): ReactNode => {
+        return <>
+            {this.renderColor(behavior.color)}
+        </>;
+    }
+
+    public render(): ReactNode {
+        return <DetailsList
+            hideCheckBox
+            className="behavior-picker-list"
+            items={this.getData()}
+            columns={[{
+                className: "behavior-picker-line",
+                key: "behavior",
+                render: this.renderLine
+            }]}
+        />
+    }
+}
+
+export { BehaviorPicker };

source/Localization/EN-US.ts

@@ -69,6 +69,7 @@ const EN_US = {
     "Common.Attr.Title.Basic": "Basic properties",
     "Common.Attr.Title.Spatial": "Spatial property",
     "Common.Attr.Title.Individual.Generation": "Individual generation",
+    "Common.Attr.Title.Behaviors": "Behaviors list",
     "Common.Attr.Title.Individual.kill": "Individual kill",
     "Common.Attr.Key.Display.Name": "Display name",
     "Common.Attr.Key.Position.X": "Position X",

source/Localization/ZH-CN.ts

@@ -69,6 +69,7 @@ const ZH_CN = {
     "Common.Attr.Title.Basic": "基础属性",
     "Common.Attr.Title.Spatial": "空间属性",
     "Common.Attr.Title.Individual.Generation": "生成个体",
+    "Common.Attr.Title.Behaviors": "行为列表",
     "Common.Attr.Title.Individual.kill": "消除个体",
     "Common.Attr.Key.Display.Name": "显示名称",
     "Common.Attr.Key.Position.X": "X 坐标",

source/Panel/GroupDetails/GroupDetails.tsx

@@ -11,6 +11,7 @@ import { AllI18nKeys } from "@Component/Localization/Localization";
 import { ComboInput, IDisplayItem } from "@Component/ComboInput/ComboInput";
 import { ObjectPicker } from "@Component/ObjectPicker/ObjectPicker";
 import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
+import { BehaviorPicker } from "@Component/BehaviorPicker/BehaviorPicker";
 import "./GroupDetails.scss";
 
 interface IGroupDetailsProps {}
@@ -107,6 +108,12 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
 					}
 				}}
 			/>
+            
+            <Message i18nKey="Common.Attr.Title.Behaviors" isTitle/>
+
+            <BehaviorPicker
+                behavior={group.behaviors}
+            />
 
             <Message i18nKey="Common.Attr.Title.Individual.Generation" isTitle/>