Use rainbow bg color to mark build in label

source/Component/Localization/Localization.tsx

@@ -9,7 +9,7 @@ const LanguageDataBase = {
     EN_US, ZH_CN
 }
 
-type AllI18nKeys = keyof typeof EN_US;
+type AllI18nKeys = (keyof typeof EN_US) | string;
 
 interface ILocalizationProps {
     className?: string;
@@ -17,14 +17,17 @@ interface ILocalizationProps {
     options?: Record<string, string>;
 }
 
-function I18N(language: Language | IMixinSettingProps, key: keyof typeof EN_US, values?: Record<string, string>) {
+function I18N(language: Language | IMixinSettingProps, key: AllI18nKeys, values?: Record<string, string>) {
     let lang: Language;
     if (typeof language === "string") {
         lang = language;
     } else {
         lang = language.setting?.language ?? "EN_US";
     }
-    let i18nValue = LanguageDataBase[lang][key];
+    let languageDataBase = LanguageDataBase[lang];
+    if (!languageDataBase) languageDataBase = LanguageDataBase["EN_US"];
+    let i18nValue = languageDataBase[key as keyof typeof EN_US];
+    if (!i18nValue) i18nValue = key;
     if (values) {
         for (let valueKey in values) {
             i18nValue = i18nValue.replaceAll(new RegExp(`\\{\\s*${valueKey}\\s*\\}`, "g"), values[valueKey]);

source/Component/ObjectPicker/ObjectPicker.scss

@@ -1,4 +1,5 @@
 @import "../Theme/Theme.scss";
+@import "../PickerList/RainbowBg.scss";
 
 $line-min-height: 24px;
 

source/Component/ObjectPicker/ObjectPicker.tsx

@@ -97,20 +97,8 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
 
     public render(): ReactNode {
 
-        let disPlayInfo: IDisplayInfo;
+        let disPlayInfo: IDisplayInfo = getObjectDisplayInfo(this.props.value);
-        let isDelete: boolean = false;
+        let isDelete: boolean = !!this.props.value?.isDeleted();
-
-        if (this.props.value) {
-            disPlayInfo = getObjectDisplayInfo(this.props.value);
-            isDelete = this.props.value.isDeleted();
-        } else {
-            disPlayInfo = {
-                name: "Input.Error.Select",
-                icon: "Label",
-                color: "transparent",
-                needI18n: true
-            }
-        }
 
         return <>
             <TextField
@@ -129,9 +117,13 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                 }}
             >
                 <div
-                    className="list-color"
+                    className={
+                        "list-color" + (
+                            disPlayInfo.allLabel ? " rainbow-back-ground-color" : ""
+                        )
+                    }
                     style={{
-                            backgroundColor: disPlayInfo.color
+                        backgroundColor: disPlayInfo.color
                     }}
                 />
                 <div className="list-button">
@@ -145,7 +137,7 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                     }}
                 >
                     {   
-                        disPlayInfo.needI18n ? 
+                        disPlayInfo.internal ? 
                             <Localization i18nKey={disPlayInfo.name as any}/> :
                             <span>{disPlayInfo.name}</span>
                     }

source/Component/PickerList/PickerList.scss

@@ -1,3 +1,5 @@
+@import "./RainbowBg.scss";
+
 div.picker-list-root {
 	min-width: 200px;
 	height: 100%;

source/Component/PickerList/PickerList.tsx

@@ -12,7 +12,8 @@ interface IDisplayInfo {
     color: string;
     icon: string;
     name: string;
-    needI18n?: boolean;
+    internal: boolean;
+    allLabel: boolean;
 };
 
 interface IDisplayItem {
@@ -21,12 +22,23 @@ interface IDisplayItem {
 	mark?: boolean;
 }
 
-function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
+function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
 
-	let color: number[] = [];
+    if (!item) {
+        return {
+            color: "transparent",
+            icon: "Label",
+            name: "Input.Error.Select",
+            internal: true,
+            allLabel: false
+        }
+    }
+
+	let color: number[] | string = [];
 	let icon: string = "tag";
 	let name: string = "";
-    let needI18n: boolean = false;
+    let internal: boolean = false;
+    let allLabel: boolean = false;
 
 	if (item instanceof Range) {
 		icon = "CubeShape"
@@ -35,6 +47,7 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
 		icon = "WebAppBuilderFragment"
 	}
 	if (item instanceof CtrlObject) {
+        color = [];
 		color[0] = Math.round(item.color[0] * 255);
 		color[1] = Math.round(item.color[1] * 255);
 		color[2] = Math.round(item.color[2] * 255);
@@ -43,7 +56,9 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
 	if (item instanceof Label) {
 
 		if (item.isBuildIn) {
-            needI18n = true;
+            internal = true;
+            allLabel = true;
+            color = "transparent";
             if (item.id === "AllRange") {
                 icon = "ProductList";
                 name = "Build.In.Label.Name.All.Range";
@@ -60,11 +75,16 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
         }
 	}
 
+    if (Array.isArray(color)) {
+        color = `rgb(${color[0]},${color[1]},${color[2]})`;
+    }
+
 	return {
-		color: needI18n ? "transparent" : `rgb(${color[0]},${color[1]},${color[2]})`,
+		color: color,
 		icon: icon,
 		name: name,
-        needI18n: needI18n
+        internal: internal,
+        allLabel: allLabel
 	}
 }
 
@@ -92,7 +112,11 @@ class PickerList extends Component<IPickerListProps> {
 				}
 			}}
 		>
-			<div className="list-item-color"
+			<div className={
+                "list-item-color" + (
+                    displayInfo.allLabel ? " rainbow-back-ground-color" : ""
+                )
+            }
 				style={{
 					backgroundColor: displayInfo.color
 				}}
@@ -102,8 +126,8 @@ class PickerList extends Component<IPickerListProps> {
 			</div>
 			<div className="list-item-name">
 				{
-                    displayInfo.needI18n ? 
+                    displayInfo.internal ? 
-                        <Localization i18nKey={displayInfo.name as any}/> : 
+                        <Localization i18nKey={displayInfo.name}/> :
                         displayInfo.name
                 }
 			</div>

source/Component/PickerList/RainbowBg.scss

@@ -0,0 +1,13 @@
+div.rainbow-back-ground-color {
+    background-image: linear-gradient(
+        to top,
+        orangered,
+        orange,
+        gold,
+        lightgreen,
+        cyan,
+        dodgerblue,
+        mediumpurple,
+        hotpink,
+        orangered);
+}