feat: 编辑器选择字体时支持预览,字体配置支持 previewUrl

baidu · Dec 18, 2024 · ea5c9c3 · ea5c9c3
1 parent 856539e
commit ea5c9c3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/packages/amis-theme-editor-helper/src/helper/declares.ts b/packages/amis-theme-editor-helper/src/helper/declares.ts
@@ -18,6 +18,8 @@ export interface Font {
   label: string;
   token: string;
   value?: string | number;
+  className?: string;
+  previewUrl?: string;
   body?: {value: string | number}[];
 }
 
@@ -98,7 +100,12 @@ export interface ThemeDefinition {
       base: {
         label: string;
         token: string;
-        body: {value: string}[];
+        body: {
+          value: string;
+          label?: string;
+          className?: string;
+          previewUrl?: string;
+        }[];
       };
       size: {
         label: string;

diff --git a/packages/amis-theme-editor-helper/src/helper/getGlobalData.ts b/packages/amis-theme-editor-helper/src/helper/getGlobalData.ts
@@ -112,6 +112,7 @@ export function getGlobalData(data: ThemeDefinition | undefined): GlobalData {
     if (key !== 'base') {
       fonts[key].body.forEach((font, i: number) => {
         children.push({
+          ...font,
           label: `${font.label}(${font.value})`,
           value: `var(${font.token})`,
           realValue: `${font.value}`
@@ -121,7 +122,8 @@ export function getGlobalData(data: ThemeDefinition | undefined): GlobalData {
     } else {
       fonts['base'].body.forEach((font, i: number) => {
         children.push({
-          label: font.value,
+          ...font,
+          label: font.label || font.value,
           value: font.value,
           realValue: font.value
         });

diff --git a/packages/amis-theme-editor-helper/src/renderers/Font.tsx b/packages/amis-theme-editor-helper/src/renderers/Font.tsx
@@ -1092,6 +1092,26 @@ function FontEditor(props: FontEditorProps) {
                   }}
                   itemName="fontFamily"
                   menuTpl="label"
+                  menuLabelRender={(option: any) => {
+                    return (
+                      <div
+                        className={option.className}
+                        style={
+                          option.previewUrl
+                            ? {
+                                background: `url(${option.previewUrl}) no-repeat`,
+                                backgroundSize: 'contain',
+                                height: '100%'
+                              }
+                            : {
+                                fontFamily: option.value
+                              }
+                        }
+                      >
+                        {option.previewUrl ? ' ' : option.html || option.label}
+                      </div>
+                    );
+                  }}
                   state={state}
                   placeholder={editorDefaultValue?.fontFamily || '字体'}
                 />

diff --git a/packages/amis-theme-editor-helper/src/renderers/ThemeSelect.tsx b/packages/amis-theme-editor-helper/src/renderers/ThemeSelect.tsx
@@ -29,6 +29,7 @@ interface ThemeSelectProps {
   state?: string;
   itemName?: string;
   menuTpl?: string;
+  menuLabelRender?: (option: Option) => JSX.Element;
   placeholder?: string;
   editorValueToken?: string | {[key: string]: string};
 }
@@ -53,7 +54,8 @@ function ThemeSelectContent(props: ThemeSelectContentProps) {
     menuTpl,
     placeholder,
     editorValueToken,
-    data
+    data,
+    menuLabelRender
   } = props;
   // 期望value是string类型
   const value = props.value + '';
@@ -240,7 +242,9 @@ function ThemeSelectContent(props: ThemeSelectContentProps) {
                       'ThemeSelectContent-input-select-item--active'
                   )}
                 >
-                  {item.html || item.label}
+                  {menuLabelRender
+                    ? menuLabelRender(item)
+                    : item.html || item.label}
                 </div>
               );
             })}