Add object list color value view

source/Component/DetailsList/DetailsList.tsx

@@ -8,6 +8,7 @@ type IItems = Record<string, any> & {key: string, select?: boolean};
 interface IColumns<D extends IItems, K extends keyof D> {
     key: K;
     className?: string;
+    noDefaultStyle?: boolean;
     beforeCheckbox?: boolean;
     render: (data: D[K]) => ReactNode,
     click?: (data: D[K]) => any,
@@ -23,8 +24,15 @@ interface IDetailsListProps {
 class DetailsList extends Component<IDetailsListProps> {
 
     private renderValue<D extends IItems, K extends keyof D>(item: IItems, column: IColumns<D, K>) {
+        const classList: string[] = [];
+        if (!column.noDefaultStyle) {
+            classList.push("details-list-value");
+        }
+        if (column.className) {
+            classList.push(column.className);
+        }
         return <div
-            className={"details-list-value" + (column.className ? ` ${column.className}` : "")}
+            className={classList.join(" ")}
             key={column.key as any}
         >
             {column.render(item[column.key as any])}

source/Context/Status.tsx

@@ -8,7 +8,11 @@ import { Setting } from "./Setting";
 import { I18N } from "@Component/Localization/Localization";
 
 function randomColor() {
-    return [Math.random(), Math.random(), Math.random(), 1]
+    return [
+        Math.random() * .8 + .2,
+        Math.random() * .8 + .2,
+        Math.random() * .8 + .2, 1
+    ]
 }
 
 class Status extends Emitter<{

source/Panel/ObjectList/ObjectList.scss

@@ -0,0 +1,7 @@
+div.object-list-color-value {
+    height: calc( 100% - 6px);
+    margin: 3px 0;
+    margin-left: 3px;
+    border-radius: 1000px;
+    width: 3px;
+}

source/Panel/ObjectList/ObjectList.tsx

@@ -2,6 +2,7 @@ import { Component, ReactNode } from "react";
 import { DetailsList } from "@Component/DetailsList/DetailsList";
 import { useStatus, IMixinStatusProps } from "@Context/Status";
 import { Localization } from "@Component/Localization/Localization";
+import "./ObjectList.scss";
 
 @useStatus
 class ObjectList extends Component<IMixinStatusProps> {
@@ -44,14 +45,24 @@ class ObjectList extends Component<IMixinStatusProps> {
             }))}
             columns={[
                 {
+                    key: "color",
+                    noDefaultStyle: true,
+                    beforeCheckbox: true,
+                    render: (color) => <div
+                        className="object-list-color-value"
+                        style={{
+                            background: `rgb(${
+                                Math.floor(color[0] * 255)
+                            }, ${
+                                Math.floor(color[1] * 255)
+                            }, ${
+                                Math.floor(color[2] * 255)
+                            })`
+                        }}
+                    />
+                }, {
                     key: "name",
                     render: (name) => <span>{name}</span>
-                // }, {
-                //     key: "behaviors",
-                //     render: (behaviors) => <span>{(behaviors as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
-                // }, {
-                //     key: "label",
-                //     render: (label) => <span>{(label as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
                 }
             ]}
         />