Merge pull request #1235 from easyops-cn/jimmy/property-editor-ui

fix(): 优化属性编辑器
easyops-cn · Jul 25, 2024 · 5d5dea8 · 5d5dea8
2 parents c8f0f67 + b9c3177
commit 5d5dea8
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 47 deletions.
diff --git a/...isual-builder/src/property-editor/components/AdvancedFormItem/AdvancedFormItem.shadow.css b/...isual-builder/src/property-editor/components/AdvancedFormItem/AdvancedFormItem.shadow.css
@@ -11,12 +11,12 @@
     eo-icon[icon="code"] {
       cursor: pointer;
       padding: 2px 4px;
-      background: var(--palette-gray-7);
       border-radius: 6px;
+      color: var(--text-color-secondary);
 
       &.isActive {
         background: var(--color-brand);
-        color: #fff;
+        color: var(--color-normal-text);
       }
     }
   }

diff --git a/bricks/visual-builder/src/property-editor/components/CategoryTitle/CategoryTitle.shadow.css b/bricks/visual-builder/src/property-editor/components/CategoryTitle/CategoryTitle.shadow.css
@@ -1,12 +1,10 @@
 .custom-category-title {
   font-size: 14px;
   font-weight: 600;
-  line-height: 14px;
-  margin-bottom: 12px;
-  border-left: 2px solid;
-  padding-left: 6px;
-  border-color: #8d8d8d;
-  margin-top: 18px;
+  line-height: 28px;
+  margin: 16px -16px 6px -16px;
+  padding-left: 16px;
+  background-color: var(--palette-gray-6);
 
   &:first-child {
     margin-top: 0;

diff --git a/bricks/visual-builder/src/property-editor/components/common/ColorPickerComponent.tsx b/bricks/visual-builder/src/property-editor/components/common/ColorPickerComponent.tsx
@@ -2,10 +2,11 @@ import React, { useEffect, useMemo, useState } from "react";
 import { ColorPicker } from "antd";
 import { ColorPickerProps } from "antd/lib/color-picker";
 import {
-  compressPresets,
-  presets,
+  palettePresets,
+  systemPresetColorsMap,
   transformCssVariablesToColor,
   trasnformColorToCssVariables,
+  allPresets,
 } from "../../utils/colorTransform";
 interface ColorPickerComponentProps extends Omit<ColorPickerProps, "onChange"> {
   onChange?: (value: string) => void;
@@ -15,16 +16,19 @@ export function ColorPickerComponent(
   props: ColorPickerComponentProps
 ): React.ReactElement {
   const [value, setValue] = useState<string>();
-  const transformPresets = useMemo(() => compressPresets(presets), []);
+  const transformPresets = useMemo(() => allPresets, []);
 
   const handleChange = (color: string) => {
-    props.onChange?.(trasnformColorToCssVariables(presets, color));
+    props.onChange?.(
+      trasnformColorToCssVariables(palettePresets, systemPresetColorsMap, color)
+    ); // 转成颜色变量存储
   };
 
   useEffect(() => {
     if (props.value) {
       const value = transformCssVariablesToColor(
-        presets,
+        palettePresets,
+        systemPresetColorsMap,
         props.value as string
       );
       setValue(value);
@@ -36,7 +40,13 @@ export function ColorPickerComponent(
   return (
     <ColorPicker
       getPopupContainer={() => document.body}
-      showText={true}
+      showText={(color) =>
+        trasnformColorToCssVariables(
+          palettePresets,
+          systemPresetColorsMap,
+          color.toHexString()
+        )
+      } // 转成颜色变量展示
       presets={transformPresets}
       {...props}
       value={value}

diff --git a/bricks/visual-builder/src/property-editor/components/common/CustomTab.module.css b/bricks/visual-builder/src/property-editor/components/common/CustomTab.module.css
@@ -4,7 +4,11 @@
     display: flex;
     align-items: stretch;
     justify-items: flex-start;
-    margin-bottom: 8px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+    background-color: var(--palette-gray-blue-3);
+    padding: 2px;
+    width: 108px;
 
     .customTabItem {
       position: relative;
@@ -15,17 +19,21 @@
       transform: translateZ(0);
 
       &.active {
-        background-color: var(--palette-gray-6);
+        background-color: var(--palette-gray-2);
         box-shadow:
           0 1px 2px 0 rgba(0, 0, 0, 0.03),
           0 1px 6px -1px rgba(0, 0, 0, 0.02),
           0 2px 4px 0 rgba(0, 0, 0, 0.02);
-        color: #fff;
+        color: var(--color-brand);
       }
 
       .customTabItemLabel {
         padding: 2px 12px;
       }
     }
+
+    .customTabItem:hover {
+      color: var(--color-brand-hover);
+    }
   }
 }
diff --git a/bricks/visual-builder/src/property-editor/index.tsx b/bricks/visual-builder/src/property-editor/index.tsx
@@ -403,6 +403,7 @@ export function LegacyPropertyEditor(
                 onFieldInitialValueChange,
                 onFormInitialValuesChange,
                 onFormValidateSuccess,
+                onFormValuesChange,
                 onSubmit: onSubmitEffect,
                 onAdvancedChange: onAdvancedChangeEffect,
               }}

diff --git a/bricks/visual-builder/src/property-editor/style.css b/bricks/visual-builder/src/property-editor/style.css
@@ -2,10 +2,19 @@
 @import url("./components/CategoryTitle/CategoryTitle.shadow.css");
 
 .property-form-wrapper {
+  padding-left: 16px;
+  padding-right: 16px;
+
   .antdV5-formily-item-feedback-layout-loose {
     margin-bottom: 10px;
   }
   .antdV5-formily-item .antdV5-formily-item-control {
     align-self: center;
   }
+
+  .antdV5-formily-item-layout-vertical .antdV5-formily-item-label {
+    line-height: 32px;
+    min-height: 30px;
+    padding: 0;
+  }
 }
diff --git a/bricks/visual-builder/src/property-editor/utils/colorTransform.ts b/bricks/visual-builder/src/property-editor/utils/colorTransform.ts
@@ -16,37 +16,119 @@ const genPresets = (presets: Record<string, string>): Presets =>
     colors: generate(colors),
   }));
 
-export const presets = genPresets({
-  amber: "#f7bf02",
-  yellow: "#fadb14",
-  orange: "#e38306",
-  pink: "#ff1a79",
-  red: "#f24c25",
-  blue: "#1a7aff",
-  indigo: "#3844e8",
-  "deep-purple": "#6641f9",
-  "gray-blue": "#778dc3",
-  purple: "#893ad8",
-  cyan: "#21d4f3",
-  teal: "#1dc897",
-  green: "#08BF33",
-});
-
-export const compressPresets = (presets: Presets): Presets => {
+const paletteGrayColorsMap: Record<string, string> = {
+  "var(--palette-gray-1)": "#ffffff",
+  "var(--palette-gray-2)": "#fafafa",
+  "var(--palette-gray-3)": "#f5f5f5",
+  "var(--palette-gray-4)": "#e8e8e8",
+  "var(--palette-gray-5)": "#d9d9d9",
+  "var(--palette-gray-6)": "#bfbfbf",
+  "var(--palette-gray-7)": "#8c8c8c",
+  "var(--palette-gray-8)": "#595959",
+  "var(--palette-gray-9)": "#262626",
+  "var(--palette-gray-10)": "#000000",
+};
+
+const extraPalettePresets: Presets = [
+  {
+    label: "gray",
+    colors: Object.values(paletteGrayColorsMap),
+  },
+];
+
+export const palettePresets = extraPalettePresets.concat(
+  genPresets({
+    red: "#f24c25",
+    orange: "#e38306",
+    yellow: "#fadb14",
+    green: "#08BF33",
+    cyan: "#21d4f3",
+    blue: "#1a7aff",
+    purple: "#893ad8",
+    amber: "#f7bf02",
+    pink: "#ff1a79",
+    indigo: "#3844e8",
+    "deep-purple": "#6641f9",
+    "gray-blue": "#778dc3",
+    teal: "#1dc897",
+  })
+);
+
+// 内置颜色: 文本与线条
+const textAndLineColorMap: Record<string, string> = {
+  "#595959": "var(--color-normal-text)", // var(--palette-gray-8);
+  "#bfbfbf": "var(--color-disabled-text)", // var(--palette-gray-6);
+  "#8c8c8c": "var(--color-secondary-text)", // var(--palette-gray-7);
+  "#262626": "var(--color-strong-text)", // var(--palette-gray-9);
+  "#d9d9d9": "var(--color-border-divider-line)", // var(--palette-gray-5);
+  "#e8e8e8": "var(--color-text-divider-line)", // var(--palette-gray-4);
+};
+
+// 内置颜色: 常用主题色
+const themeColorMap: Record<string, string> = {
+  "#08bf33": "var(--theme-green-color)", // var(--palette-green-6);
+  "#77e686": "var(--theme-green-border-color)", // var(--palette-green-3);
+  "#e6ffe7": "var(--theme-green-background)", // var(--palette-green-1);
+  "#f24c25": "var(--theme-red-color)", // var(--palette-red-6);
+  "#ffbba1": "var(--theme-red-border-color)", // var(--palette-red-3);
+  "#fff5f0": "var(--theme-red-background)", // var(--palette-red-1);
+  "#1a7aff": "var(--theme-blue-color)", // var(--palette-blue-6);
+  "#94cbff": "var(--theme-blue-border-color)", // var(--palette-blue-3);
+  "#e6f4ff": "var(--theme-blue-background)", // var(--palette-blue-1);
+  "#e38306": "var(--theme-orange-color)", // var(--palette-orange-6);
+  "#ffd582": "var(--theme-orange-border-color)", // var(--palette-orange-3);
+  "#fff8e6": "var(--theme-orange-background)", // var(--palette-orange-1);
+  "#21d4f3": "var(--theme-cyan-color)", // var(--palette-cyan-6);
+  "#9efaff": "var(--theme-cyan-border-color)", // var(--palette-cyan-3);
+  "#f0ffff": "var(--theme-cyan-background)", // var(--palette-cyan-1);
+  "#893ad8": "var(--theme-purple-color)", // var(--palette-purple-6);
+  "#e6bfff": "var(--theme-purple-border-color)", // var(--palette-purple-3);
+  "#faf0ff": "var(--theme-purple-background)", // var(--palette-purple-1);
+  "#3844e8": "var(--theme-geekblue-color)", // var(--palette-geekblue-6);
+  "#b8c4ff": "var(--theme-geekblue-border-color)", // var(--palette-geekblue-3);
+  "#f0f3ff": "var(--theme-geekblue-background)", // var(--palette-geekblue-1);
+};
+export const systemPresetColorsMap: Record<string, string> = {
+  ...textAndLineColorMap,
+  ...themeColorMap,
+};
+
+export const compressPalettePresets = (palettePresets: Presets): Presets => {
   return [
     {
-      label: "系统默认",
-      colors: presets.map((item) => item.colors).flat(),
+      label: "调色板",
+      colors: palettePresets.map((item) => item.colors).flat(),
+      defaultOpen: false,
     },
   ];
 };
 
+export const allPresets: Presets = (
+  [
+    {
+      label: "文本与线条",
+      colors: Object.keys(textAndLineColorMap),
+      defaultOpen: true,
+    },
+    {
+      label: "常用主题色",
+      colors: Object.keys(themeColorMap),
+      defaultOpen: true,
+    },
+  ] as Presets
+).concat(compressPalettePresets(palettePresets));
+
 export const trasnformColorToCssVariables = (
-  presets: Presets,
+  palettePresets: Presets,
+  systemPresetColorsMap: Record<string, string>,
   color: string
 ) => {
+  if (color in systemPresetColorsMap) {
+    return systemPresetColorsMap[color];
+  }
+
   let matchColor = color;
-  presets.forEach((preset) => {
+  palettePresets.forEach((preset) => {
     const key = preset.label;
 
     const index = preset.colors.findIndex((item) =>
@@ -65,11 +147,19 @@ export const trasnformColorToCssVariables = (
 
 export const transformCssVariablesToColor = (
   presets: Presets,
-  color: string
+  systemPresetColorsMap: Record<string, string>,
+  colorVairable: string
 ) => {
-  const [, key, index] = color.match(/^var\(--palette-(\w+)-(\d+)\)$/) ?? [];
+  for (const color in systemPresetColorsMap) {
+    if (systemPresetColorsMap[color] === colorVairable) {
+      return color;
+    }
+  }
 
-  let matchColor = color;
+  const [, key, index] =
+    colorVairable.match(/^var\(--palette-([\w-]+)-(\d+)\)$/) ?? [];
+
+  let matchColor = colorVairable;
   if (key && index) {
     presets.forEach((preset) => {
       const color = preset.colors[Number(index) - 1];

diff --git a/bricks/visual-builder/src/property-editor/utils/colorTrasnform.spec.ts b/bricks/visual-builder/src/property-editor/utils/colorTrasnform.spec.ts
@@ -1,6 +1,6 @@
 import {
   Presets,
-  compressPresets,
+  compressPalettePresets,
   transformCssVariablesToColor,
   trasnformColorToCssVariables,
 } from "./colorTransform";
@@ -16,33 +16,58 @@ const mockPresets = [
   },
 ] as Presets;
 
+const mockSystemPresetColorsMap: Record<string, string> = {
+  "#aaabbb": "var(aaabbb)",
+  "#aaaccc": "var(aaaccc)",
+};
+
 describe("Color transform", () => {
   it.each<[string, string]>([
+    ["var(aaabbb)", "#aaabbb"],
+    ["var(aaaccc)", "#aaaccc"],
     ["var(--palette-blue-1)", "#aaa"],
     ["var(--palette-blue-2)", "#bbb"],
     ["var(--palette-red-1)", "#ccc"],
     ["var(--palette-red-3)", "var(--palette-red-3)"],
     ["var(--palette-random-1)", "var(--palette-random-1)"],
     ["--palette-random-1", "--palette-random-1"],
   ])("trasnformColorToCssVariables %s should get %s", (color, result) => {
-    expect(transformCssVariablesToColor(mockPresets, color)).toBe(result);
+    expect(
+      transformCssVariablesToColor(
+        mockPresets,
+        mockSystemPresetColorsMap,
+        color
+      )
+    ).toBe(result);
   });
 
   it.each<[string, string]>([
+    ["#aaabbb", "var(aaabbb)"],
+    ["#aaaccc", "var(aaaccc)"],
     ["#aaa", "var(--palette-blue-1)"],
     ["#bbb", "var(--palette-blue-2)"],
     ["#ccc", "var(--palette-red-1)"],
     ["var(--palette-red-3)", "var(--palette-red-3)"],
     ["var(--palette-random-1)", "var(--palette-random-1)"],
   ])("trasnformColorToCssVariables %s should get %s", (color, result) => {
-    expect(trasnformColorToCssVariables(mockPresets, color)).toBe(result);
+    expect(
+      trasnformColorToCssVariables(
+        mockPresets,
+        mockSystemPresetColorsMap,
+        color
+      )
+    ).toBe(result);
   });
 });
 
-describe("compressPresets", () => {
+describe("compressPalettePresets", () => {
   it("should work", () => {
-    expect(compressPresets(mockPresets)).toEqual([
-      { colors: ["#aaa", "#bbb", "#ccc", "#ddd"], label: "系统默认" },
+    expect(compressPalettePresets(mockPresets)).toEqual([
+      {
+        colors: ["#aaa", "#bbb", "#ccc", "#ddd"],
+        label: "调色板",
+        defaultOpen: false,
+      },
     ]);
   });
 });
diff --git a/shared/property-editor/index.d.ts b/shared/property-editor/index.d.ts
@@ -23,6 +23,7 @@ export interface EditorComponentProps<
     onFieldInit: typeof onFieldInit;
     onFieldValueChange: typeof onFieldValueChange;
     onFieldInitialValueChange: typeof onFieldInitialValueChange;
+    onFormValuesChange: typeof onFormValuesChange;
     onFormInitialValuesChange: typeof onFormInitialValuesChange;
     onFormValidateSuccess: typeof onFormValidateSuccess;
     onSubmit: (listener: (value: any, form: Form) => any) => void;