Add behavior list component style

source/Component/BehaviorList/BehaviorList.scss

@@ -73,7 +73,7 @@ div.behavior-list {
                         }
         
                         div.behavior-action-button.hover-blue:hover i {
-                            color: $lt-blue;
+                            color: $lt-green;
                         }
                     }
                 }

source/Component/BehaviorPicker/BehaviorPicker.scss

@@ -1,7 +1,9 @@
+@import "../Theme/Theme.scss";
 
 div.behavior-picker-list {
     width: 100%;
     max-width: 400px;
+    padding: 8px 0;
 
     div.behavior-picker-line {
         width: 100%;
@@ -22,5 +24,63 @@ div.behavior-picker-list {
                 z-index: 2;
             }
         }
+
+        div.behavior-picker-line-icon-view {
+            width: 30px;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            i.behavior-icon {
+                display: inline-block;
+            }
+
+            i.view-icon {
+                display: none;
+            }
+
+            i.view-icon:hover {
+                color: $lt-green;
+            }
+        }
+
+        div.behavior-picker-title {
+            height: 100%;
+            width: calc(100% - 60px);
+            display: flex;
+            align-items: center;
+
+            div {
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+
+        div.behavior-picker-line-delete-view {
+            width: 30px;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            i:hover {
+                color: $lt-red;
+            }
+        }
+    }
+
+    div.behavior-picker-line:hover {
+
+        div.behavior-picker-line-icon-view {
+            
+            i.behavior-icon {
+                display: none;
+            }
+
+            i.view-icon {
+                display: inline-block;
+            }
+        }
     }
 }

source/Component/BehaviorPicker/BehaviorPicker.tsx

@@ -1,35 +1,63 @@
 import { DetailsList } from "@Component/DetailsList/DetailsList";
 import { Component, ReactNode } from "react";
 import { Behavior } from "@Model/Behavior";
+import { Icon } from "@fluentui/react";
+import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
+import { Localization } from "@Component/Localization/Localization";
 import "./BehaviorPicker.scss";
 
 interface IBehaviorPickerProps {
-    behavior: Behavior[]
+    behavior: Behavior[];
+    delete?: (behavior: Behavior) => void;
+    action?: (behavior: Behavior) => void;
+    add?: () => void;
 }
 
-class BehaviorPicker extends Component<IBehaviorPickerProps> {
+@useSettingWithEvent("language")
+class BehaviorPicker extends Component<IBehaviorPickerProps & IMixinSettingProps> {
 
     private getData() {
-        let data: Array<{key: string, behavior: Behavior}> = [];
+        let data: Array<{key: string, behavior: Behavior | undefined}> = [];
         for (let i = 0; i < this.props.behavior.length; i++) {
             data.push({
                 key: this.props.behavior[i].id,
                 behavior: this.props.behavior[i]
             })
         }
+        data.push({
+            key: "@@AddButton_List_Key",
+            behavior: undefined
+        })
         return data;
     }
 
-    private renderColor(color: string): ReactNode {
+    private renderLine = (behavior?: Behavior): ReactNode => {
-        return <div className="behavior-picker-line-color-view">
+        if (behavior) {
-            <div style={{ borderLeft: `10px solid ${color}` }}/>
-        </div>    
-    }
-
-    private renderLine = (behavior: Behavior): ReactNode => {
             return <>
-            {this.renderColor(behavior.color)}
+                <div className="behavior-picker-line-color-view">
+                    <div style={{ borderLeft: `10px solid ${behavior.color}` }}/>
+                </div>
+                <div className="behavior-picker-line-icon-view">
+                    <Icon iconName={behavior.iconName} className="behavior-icon"/>
+                    <Icon iconName="EditCreate" className="view-icon"/>
+                </div>
+                <div className={`behavior-picker-title ${this.props.setting?.language}`}>
+                    <div>{behavior.name}</div>
+                </div>
+                <div className="behavior-picker-line-delete-view">
+                    <Icon iconName="Delete"/>
+                </div>
             </>;
+        } else {
+            return <>
+                <div className="behavior-picker-line-icon-view">
+                    <Icon iconName="Add" className="add-icon"/>
+                </div>
+                <div className={`behavior-picker-title`}>
+                    <Localization i18nKey="Behavior.Picker.Add.Button"/>
+                </div>
+            </>;
+        }
     }
 
     public render(): ReactNode {

source/Component/Localization/Localization.scss

@@ -1,7 +1,7 @@
-span.ZH_CN {
+span.ZH_CN, div.span.ZH_CN {
     font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', Tahoma, Arial, sans-serif;
 }
 
-span.EN_US {
+span.EN_US, div.span.EN_US {
     font-family: 'Segoe UI Web Regular', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
 }

source/Component/Theme/Theme.scss

@@ -1,5 +1,6 @@
 @import "@fluentui/react/dist/sass/References";
 
+$lt-green: rgb(50, 237, 69);
 $lt-blue: rgb(81, 79, 235);
 $lt-red: rgb(240, 94, 94);
 

source/Localization/EN-US.ts

@@ -30,6 +30,7 @@ const EN_US = {
     "Object.List.New.Label": "Label {id}",
     "Object.List.No.Data": "There are no objects in the model, click the button to create it",
     "Object.Picker.List.No.Data": "There is no model in the model for this option",
+    "Behavior.Picker.Add.Button": "Click here to assign behavior to this group",
     "Panel.Title.Notfound": "{id}",
     "Panel.Info.Notfound": "This panel with id {id} can not found!",
     "Panel.Title.Render.View": "Live preview",

source/Localization/ZH-CN.ts

@@ -30,6 +30,7 @@ const ZH_CN = {
     "Object.List.New.Label": "标签 {id}",
     "Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
     "Object.Picker.List.No.Data": "模型中没有合适此选项的模型",
+    "Behavior.Picker.Add.Button": "点击此处以赋予行为到此群",
     "Panel.Title.Notfound": "{id}",
     "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
     "Panel.Title.Render.View": "实时预览",

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -91,6 +91,7 @@ class SimulatorWeb extends Component {
                     }, {
                         panels: ["GroupDetails", "RangeDetails", "LabelDetails"]
                     }],
+                    scale: 30,
                     layout: LayoutDirection.Y
                 }
             ],

source/Panel/ObjectList/ObjectList.scss

@@ -20,6 +20,10 @@ div.object-list {
             opacity: 0;
         }
 
+        i.checkbox-icon:hover {
+            color: $lt-green;
+        }
+
         i.type-icon {
             display: inline-block;
             opacity: 1;