@abtnode/ux 1.16.48 → 1.16.49-beta-20250812-040454-05aece54

package/lib/blocklet/branding.js

@@ -940,6 +940,7 @@ function BlockletBranding({
   blocklet,
   onUpdate = () => {},
   hasPermission = false,
+  showFields = [],
   ...rest
 }) {
   const {
@@ -1031,27 +1032,29 @@ function BlockletBranding({
   };
   return /*#__PURE__*/_jsxs(Div, {
     ...rest,
-    children: [/*#__PURE__*/_jsxs(Box, {
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h6",
-        sx: {
-          fontWeight: 600
-        },
-        children: t('blocklet.config.baseInfo')
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
+    children: [(!showFields.length || showFields.includes('base-info-title')) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h6",
+          sx: {
+            fontWeight: 600
+          },
+          children: t('blocklet.config.baseInfo')
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          sx: {
+            color: 'text.secondary'
+          },
+          children: t('blocklet.config.baseInfoDesc')
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        className: "config-form",
+        component: Divider,
         sx: {
-          color: 'text.secondary'
-        },
-        children: t('blocklet.config.baseInfoDesc')
+          my: 3
+        }
       })]
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "config-form",
-      component: Divider,
-      sx: {
-        my: 3
-      }
-    }), configurableEnvs.map(item => /*#__PURE__*/_jsxs(_Fragment, {
+    }), (showFields.length ? configurableEnvs.filter(item => showFields.includes(item.key)) : configurableEnvs).map(item => /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Section, {
         title: item.title,
         desc: item.description,
@@ -1072,237 +1075,323 @@ function BlockletBranding({
           my: 3
         }
       })]
-    })), /*#__PURE__*/_jsx(Section, {
-      title: t('blocklet.config.languages'),
-      desc: t('blocklet.config.languagesDesc'),
-      children: /*#__PURE__*/_jsx(FormAutocompleteInput, {
-        style: {
-          marginTop: 0
-        },
-        disabled: disabled,
-        loading: state.loading,
-        options: languages,
-        noEmpty: true,
-        initialValue: customLanguages ? customLanguages.value.split(',') : ['en', 'zh'],
-        onSubmit: value => onSubmitConfig('BLOCKLET_APP_LANGUAGES', value),
-        helperText: t('blocklet.config.selectLanguagesTip'),
-        placeholder: t('blocklet.config.languagesSearch'),
-        filterKeys: languagesFilterKeys,
-        renderLabel: (code, item) => {
-          if (item.name === item.enName) {
-            return `${item.name} (${code.toUpperCase()})`;
+    })), (!showFields.length || showFields.includes(BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LANGUAGES)) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Section, {
+        title: t('blocklet.config.languages'),
+        desc: t('blocklet.config.languagesDesc'),
+        children: /*#__PURE__*/_jsx(FormAutocompleteInput, {
+          style: {
+            marginTop: 0
+          },
+          disabled: disabled,
+          loading: state.loading,
+          options: languages,
+          noEmpty: true,
+          initialValue: customLanguages ? customLanguages.value.split(',') : ['en', 'zh'],
+          onSubmit: value => onSubmitConfig('BLOCKLET_APP_LANGUAGES', value),
+          helperText: t('blocklet.config.selectLanguagesTip'),
+          placeholder: t('blocklet.config.languagesSearch'),
+          filterKeys: languagesFilterKeys,
+          renderLabel: (code, item) => {
+            if (item.name === item.enName) {
+              return `${item.name} (${code.toUpperCase()})`;
+            }
+            return `${item.name},  ${item.enName} (${code.toUpperCase()})`;
           }
-          return `${item.name},  ${item.enName} (${code.toUpperCase()})`;
-        }
-      })
-    }), /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        mt: 6
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h6",
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        className: "config-form",
+        component: Divider,
         sx: {
-          fontWeight: 600
-        },
-        children: t('blocklet.config.logoSettings')
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
+          my: 3
+        }
+      })]
+    }), (!showFields.length || showFields.includes('logo-settings-title')) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Box, {
         sx: {
-          color: 'text.secondary'
+          mt: 6
         },
-        children: t('blocklet.config.logoSettingsDesc')
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h6",
+          sx: {
+            fontWeight: 600
+          },
+          children: t('blocklet.config.logoSettings')
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          sx: {
+            color: 'text.secondary'
+          },
+          children: t('blocklet.config.logoSettingsDesc')
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          sx: {
+            color: 'warning.main'
+          },
+          children: t('blocklet.config.changeImageTip')
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        className: "config-form",
+        component: Divider,
         sx: {
-          color: 'warning.main'
-        },
-        children: t('blocklet.config.changeImageTip')
+          my: 3
+        }
       })]
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "config-form",
-      component: Divider,
-      sx: {
-        my: 3
-      }
     }), /*#__PURE__*/_jsxs(Form, {
-      children: [/*#__PURE__*/_jsx(Section, {
-        title: t('blocklet.config.logoSquare'),
-        desc: `${t('blocklet.config.logoSquareDesc')}\n${t('blocklet.config.logoDesc', {
-          width: 512,
-          height: 512,
-          maxSize: 5
-        })}`,
-        link: "https://www.didwallet.io/",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: 'flex',
-            gap: 3,
-            flexWrap: 'wrap'
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
+      children: [(!showFields.length || showFields.includes(BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO)) && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Section, {
+          title: t('blocklet.config.logoSquare'),
+          desc: `${t('blocklet.config.logoSquareDesc')}\n${t('blocklet.config.logoDesc', {
+            width: 512,
+            height: 512,
+            maxSize: 5
+          })}`,
+          link: "https://www.didwallet.io/",
+          children: /*#__PURE__*/_jsxs(Box, {
             sx: {
-              alignSelf: 'flex-start',
               display: 'flex',
-              flexDirection: 'column',
-              gap: 3
+              gap: 3,
+              flexWrap: 'wrap'
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: t('common.lightMode')
-            }), /*#__PURE__*/_jsx(Box, {
+            children: [/*#__PURE__*/_jsxs(Box, {
               sx: {
-                width: 307,
-                height: 173,
-                position: 'relative',
-                borderRadius: '4px',
-                overflow: 'hidden'
+                alignSelf: 'flex-start',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 3
               },
-              children: /*#__PURE__*/_jsx(AppLogoCard, {
-                name: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_NAME').value,
-                icon: logoUrl,
-                did: blocklet.meta.did
-              })
-            }), /*#__PURE__*/_jsx(LogoUploader, {
-              did: blocklet.meta.did,
-              width: 80,
-              type: "square",
-              prefix: prefix,
-              url: logoUrl,
-              enabled: hasPermission,
-              headers: getSessionInHeader,
-              aspectRatio: 1,
-              children: /*#__PURE__*/_jsx(Button, {
-                variant: "outlined",
-                color: "primary",
-                children: t('common.upload')
-              })
-            })]
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              alignSelf: 'flex-start',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 3
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: t('common.darkMode')
-            }), /*#__PURE__*/_jsx(Box, {
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: t('common.lightMode')
+              }), /*#__PURE__*/_jsx(Box, {
+                sx: {
+                  width: 307,
+                  height: 173,
+                  position: 'relative',
+                  borderRadius: '4px',
+                  overflow: 'hidden'
+                },
+                children: /*#__PURE__*/_jsx(AppLogoCard, {
+                  name: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_NAME').value,
+                  icon: logoUrl,
+                  did: blocklet.meta.did
+                })
+              }), /*#__PURE__*/_jsx(LogoUploader, {
+                did: blocklet.meta.did,
+                width: 80,
+                type: "square",
+                prefix: prefix,
+                url: logoUrl,
+                enabled: hasPermission,
+                headers: getSessionInHeader,
+                aspectRatio: 1,
+                children: /*#__PURE__*/_jsx(Button, {
+                  variant: "outlined",
+                  color: "primary",
+                  children: t('common.upload')
+                })
+              })]
+            }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                width: 307,
-                height: 173,
-                position: 'relative',
-                borderRadius: '4px',
-                overflow: 'hidden'
+                alignSelf: 'flex-start',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 3
               },
-              children: /*#__PURE__*/_jsx(AppLogoCard, {
-                dark: true,
-                name: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_NAME').value,
-                icon: logoDarkUrl,
-                did: blocklet.meta.did
-              })
-            }), /*#__PURE__*/_jsx(LogoUploader, {
-              did: blocklet.meta.did,
-              width: 80,
-              type: "square-dark",
-              prefix: prefix,
-              url: logoDarkUrl,
-              enabled: hasPermission,
-              headers: getSessionInHeader,
-              aspectRatio: 1,
-              children: /*#__PURE__*/_jsx(Button, {
-                variant: "outlined",
-                color: "primary",
-                children: t('common.upload')
-              })
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: t('common.darkMode')
+              }), /*#__PURE__*/_jsx(Box, {
+                sx: {
+                  width: 307,
+                  height: 173,
+                  position: 'relative',
+                  borderRadius: '4px',
+                  overflow: 'hidden'
+                },
+                children: /*#__PURE__*/_jsx(AppLogoCard, {
+                  dark: true,
+                  name: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_NAME').value,
+                  icon: logoDarkUrl,
+                  did: blocklet.meta.did
+                })
+              }), /*#__PURE__*/_jsx(LogoUploader, {
+                did: blocklet.meta.did,
+                width: 80,
+                type: "square-dark",
+                prefix: prefix,
+                url: logoDarkUrl,
+                enabled: hasPermission,
+                headers: getSessionInHeader,
+                aspectRatio: 1,
+                children: /*#__PURE__*/_jsx(Button, {
+                  variant: "outlined",
+                  color: "primary",
+                  children: t('common.upload')
+                })
+              })]
             })]
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        className: "config-form",
-        component: Divider,
-        sx: {
-          my: 3
-        }
-      }), /*#__PURE__*/_jsx(Section, {
-        title: t('blocklet.config.logoRect'),
-        desc: `${t('blocklet.config.logoRectDesc')}`,
-        children: /*#__PURE__*/_jsxs(Box, {
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "config-form",
+          component: Divider,
           sx: {
-            display: 'flex',
-            gap: 3,
-            flexWrap: 'wrap'
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
+            my: 3
+          }
+        })]
+      }), (!showFields.length || showFields.includes(BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT)) && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Section, {
+          title: t('blocklet.config.logoRect'),
+          desc: `${t('blocklet.config.logoRectDesc')}`,
+          children: /*#__PURE__*/_jsxs(Box, {
             sx: {
-              alignSelf: 'flex-start',
               display: 'flex',
-              flexDirection: 'column',
-              gap: 3
+              gap: 3,
+              flexWrap: 'wrap'
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: t('common.lightMode')
-            }), /*#__PURE__*/_jsxs(Box, {
+            children: [/*#__PURE__*/_jsxs(Box, {
               sx: {
-                width: 307,
-                height: 173,
-                position: 'relative',
-                borderRadius: '4px',
-                overflow: 'hidden'
+                alignSelf: 'flex-start',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 3
               },
-              children: [rectLogoUrl ? /*#__PURE__*/_jsx(HeaderLogo, {
-                viewBox: "0 0 384 216",
-                sx: {
-                  width: '100%',
-                  height: '100%'
-                }
-              }) : /*#__PURE__*/_jsx(HeaderLogoEmpty, {
-                viewBox: "0 0 384 216",
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: t('common.lightMode')
+              }), /*#__PURE__*/_jsxs(Box, {
                 sx: {
-                  width: '100%',
-                  height: '100%'
-                }
-              }), rectLogoUrl && /*#__PURE__*/_jsx(Box, {
-                component: "img",
-                src: rectLogoUrl,
-                alt: "app-logo",
+                  width: 307,
+                  height: 173,
+                  position: 'relative',
+                  borderRadius: '4px',
+                  overflow: 'hidden'
+                },
+                children: [rectLogoUrl ? /*#__PURE__*/_jsx(HeaderLogo, {
+                  viewBox: "0 0 384 216",
+                  sx: {
+                    width: '100%',
+                    height: '100%'
+                  }
+                }) : /*#__PURE__*/_jsx(HeaderLogoEmpty, {
+                  viewBox: "0 0 384 216",
+                  sx: {
+                    width: '100%',
+                    height: '100%'
+                  }
+                }), rectLogoUrl && /*#__PURE__*/_jsx(Box, {
+                  component: "img",
+                  src: rectLogoUrl,
+                  alt: "app-logo",
+                  sx: {
+                    position: 'absolute',
+                    top: 112,
+                    left: 64,
+                    maxHeight: 40,
+                    maxWidth: 120
+                  }
+                })]
+              }), /*#__PURE__*/_jsx(LogoUploader, {
+                did: blocklet.meta.did,
+                width: 80,
+                height: "auto",
+                type: "rect",
+                prefix: prefix,
+                url: rectLogoUrl,
+                enabled: hasPermission,
+                headers: getSessionInHeader,
+                aspectRatio: NaN,
+                minWidth: 80,
+                minHeight: 120,
+                children: /*#__PURE__*/_jsx(Button, {
+                  variant: "outlined",
+                  children: t('common.upload')
+                })
+              })]
+            }), /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                alignSelf: 'flex-start',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 3
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: t('common.darkMode')
+              }), /*#__PURE__*/_jsxs(Box, {
                 sx: {
-                  position: 'absolute',
-                  top: 112,
-                  left: 64,
-                  maxHeight: 40,
-                  maxWidth: 120
-                }
+                  width: 307,
+                  height: 173,
+                  position: 'relative',
+                  borderRadius: '4px',
+                  overflow: 'hidden'
+                },
+                children: [rectLogoDarkUrl ? /*#__PURE__*/_jsx(HeaderLogoDark, {
+                  viewBox: "0 0 384 216",
+                  sx: {
+                    width: '100%',
+                    height: '100%'
+                  }
+                }) : /*#__PURE__*/_jsx(HeaderLogoEmptyDark, {
+                  viewBox: "0 0 384 216",
+                  sx: {
+                    width: '100%',
+                    height: '100%'
+                  }
+                }), rectLogoDarkUrl && /*#__PURE__*/_jsx(Box, {
+                  component: "img",
+                  src: rectLogoDarkUrl,
+                  alt: "app-logo",
+                  sx: {
+                    position: 'absolute',
+                    top: 112,
+                    left: 64,
+                    maxHeight: 40,
+                    maxWidth: 120
+                  }
+                })]
+              }), /*#__PURE__*/_jsx(LogoUploader, {
+                did: blocklet.meta.did,
+                width: 80,
+                height: "auto",
+                type: "rect-dark",
+                prefix: prefix,
+                url: rectLogoDarkUrl,
+                enabled: hasPermission,
+                headers: getSessionInHeader,
+                aspectRatio: NaN,
+                minWidth: 80,
+                minHeight: 120,
+                children: /*#__PURE__*/_jsx(Button, {
+                  variant: "outlined",
+                  children: t('common.upload')
+                })
               })]
-            }), /*#__PURE__*/_jsx(LogoUploader, {
-              did: blocklet.meta.did,
-              width: 80,
-              height: "auto",
-              type: "rect",
-              prefix: prefix,
-              url: rectLogoUrl,
-              enabled: hasPermission,
-              headers: getSessionInHeader,
-              aspectRatio: NaN,
-              minWidth: 80,
-              minHeight: 120,
-              children: /*#__PURE__*/_jsx(Button, {
-                variant: "outlined",
-                children: t('common.upload')
-              })
             })]
-          }), /*#__PURE__*/_jsxs(Box, {
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "config-form",
+          component: Divider,
+          sx: {
+            my: 3
+          }
+        })]
+      }), (!showFields.length || showFields.includes(BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON)) && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Section, {
+          title: t('blocklet.config.logoFavicon'),
+          desc: `${t('blocklet.config.logoFaviconDesc')}\n${t('blocklet.config.logoDesc', {
+            width: 512,
+            height: 512,
+            maxSize: 5
+          })}`,
+          children: /*#__PURE__*/_jsxs(Box, {
             sx: {
               alignSelf: 'flex-start',
               display: 'flex',
               flexDirection: 'column',
               gap: 3
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: t('common.darkMode')
-            }), /*#__PURE__*/_jsxs(Box, {
+            children: [/*#__PURE__*/_jsxs(Box, {
               sx: {
                 width: 307,
                 height: 173,
@@ -1310,175 +1399,107 @@ function BlockletBranding({
                 borderRadius: '4px',
                 overflow: 'hidden'
               },
-              children: [rectLogoDarkUrl ? /*#__PURE__*/_jsx(HeaderLogoDark, {
+              children: [/*#__PURE__*/_jsx(Favicon, {
                 viewBox: "0 0 384 216",
                 sx: {
                   width: '100%',
                   height: '100%'
                 }
-              }) : /*#__PURE__*/_jsx(HeaderLogoEmptyDark, {
-                viewBox: "0 0 384 216",
-                sx: {
-                  width: '100%',
-                  height: '100%'
-                }
-              }), rectLogoDarkUrl && /*#__PURE__*/_jsx(Box, {
+              }), faviconUrl && /*#__PURE__*/_jsx(Box, {
                 component: "img",
-                src: rectLogoDarkUrl,
+                src: faviconUrl,
                 alt: "app-logo",
                 sx: {
                   position: 'absolute',
-                  top: 112,
-                  left: 64,
-                  maxHeight: 40,
-                  maxWidth: 120
+                  top: 62,
+                  left: 146,
+                  width: 44,
+                  height: 44,
+                  borderRadius: '12px'
                 }
               })]
             }), /*#__PURE__*/_jsx(LogoUploader, {
               did: blocklet.meta.did,
               width: 80,
-              height: "auto",
-              type: "rect-dark",
+              type: "favicon",
               prefix: prefix,
-              url: rectLogoDarkUrl,
+              url: faviconUrl,
               enabled: hasPermission,
               headers: getSessionInHeader,
-              aspectRatio: NaN,
-              minWidth: 80,
-              minHeight: 120,
+              aspectRatio: 1,
               children: /*#__PURE__*/_jsx(Button, {
                 variant: "outlined",
                 children: t('common.upload')
               })
             })]
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        className: "config-form",
-        component: Divider,
-        sx: {
-          my: 3
-        }
-      }), /*#__PURE__*/_jsx(Section, {
-        title: t('blocklet.config.logoFavicon'),
-        desc: `${t('blocklet.config.logoFaviconDesc')}\n${t('blocklet.config.logoDesc', {
-          width: 512,
-          height: 512,
-          maxSize: 5
-        })}`,
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            alignSelf: 'flex-start',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 3
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
-            sx: {
-              width: 307,
-              height: 173,
-              position: 'relative',
-              borderRadius: '4px',
-              overflow: 'hidden'
-            },
-            children: [/*#__PURE__*/_jsx(Favicon, {
-              viewBox: "0 0 384 216",
-              sx: {
-                width: '100%',
-                height: '100%'
-              }
-            }), faviconUrl && /*#__PURE__*/_jsx(Box, {
-              component: "img",
-              src: faviconUrl,
-              alt: "app-logo",
-              sx: {
-                position: 'absolute',
-                top: 62,
-                left: 146,
-                width: 44,
-                height: 44,
-                borderRadius: '12px'
-              }
-            })]
-          }), /*#__PURE__*/_jsx(LogoUploader, {
-            did: blocklet.meta.did,
-            width: 80,
-            type: "favicon",
-            prefix: prefix,
-            url: faviconUrl,
-            enabled: hasPermission,
-            headers: getSessionInHeader,
-            aspectRatio: 1,
-            children: /*#__PURE__*/_jsx(Button, {
-              variant: "outlined",
-              children: t('common.upload')
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        className: "config-form",
-        component: Divider,
-        sx: {
-          my: 3
-        }
-      }), /*#__PURE__*/_jsx(Section, {
-        title: t('blocklet.config.splashPortrait'),
-        desc: t('blocklet.config.splashDesc'),
-        link: "https://www.arcsphere.io/",
-        children: /*#__PURE__*/_jsxs(Box, {
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "config-form",
+          component: Divider,
           sx: {
-            display: 'flex',
-            gap: 3,
-            alignSelf: 'flex-start',
-            '.uploader-wrapper': {
-              borderRadius: 0
-            },
-            flexWrap: 'wrap'
-          },
-          children: [/*#__PURE__*/_jsx(LogoUploader, {
-            did: blocklet.meta.did,
-            height: 400,
-            width: 225,
-            type: "splash-portrait",
-            prefix: prefix,
-            url: splashPortraitUrl,
-            enabled: hasPermission,
-            headers: getSessionInHeader,
-            aspectRatio: 9 / 16,
-            minWidth: 900,
-            minHeight: 1000,
-            allowSVG: false
-          }), /*#__PURE__*/_jsx(Box, {
+            my: 3
+          }
+        })]
+      }), (!showFields.length || showFields.includes(BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPLASH_PORTRAIT)) && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Section, {
+          title: t('blocklet.config.splashPortrait'),
+          desc: t('blocklet.config.splashDesc'),
+          link: "https://www.arcsphere.io/",
+          children: /*#__PURE__*/_jsxs(Box, {
             sx: {
-              width: '100%',
-              maxWidth: 400,
-              aspectRatio: '16 / 9',
-              // 保持比例
-              position: 'relative'
+              display: 'flex',
+              gap: 3,
+              alignSelf: 'flex-start',
+              '.uploader-wrapper': {
+                borderRadius: 0
+              },
+              flexWrap: 'wrap'
             },
-            children: /*#__PURE__*/_jsx(LogoUploader, {
+            children: [/*#__PURE__*/_jsx(LogoUploader, {
               did: blocklet.meta.did,
-              height: "100%",
-              width: "100%",
-              type: "splash-landscape",
+              height: 400,
+              width: 225,
+              type: "splash-portrait",
               prefix: prefix,
-              url: splashLandscapeUrl,
+              url: splashPortraitUrl,
               enabled: hasPermission,
               headers: getSessionInHeader,
-              aspectRatio: 16 / 9,
-              minWidth: 1600,
-              minHeight: 900,
+              aspectRatio: 9 / 16,
+              minWidth: 900,
+              minHeight: 1000,
               allowSVG: false
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        className: "config-form",
-        component: Divider,
-        sx: {
-          my: 3
-        }
-      }), /*#__PURE__*/_jsx(Section, {
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                width: '100%',
+                maxWidth: 400,
+                aspectRatio: '16 / 9',
+                // 保持比例
+                position: 'relative'
+              },
+              children: /*#__PURE__*/_jsx(LogoUploader, {
+                did: blocklet.meta.did,
+                height: "100%",
+                width: "100%",
+                type: "splash-landscape",
+                prefix: prefix,
+                url: splashLandscapeUrl,
+                enabled: hasPermission,
+                headers: getSessionInHeader,
+                aspectRatio: 16 / 9,
+                minWidth: 1600,
+                minHeight: 900,
+                allowSVG: false
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "config-form",
+          component: Divider,
+          sx: {
+            my: 3
+          }
+        })]
+      }), (!showFields.length || showFields.includes(BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPLASH_LANDSCAPE)) && /*#__PURE__*/_jsx(Section, {
         title: t('blocklet.config.ogImage'),
         desc: t('blocklet.config.ogImageDesc'),
         children: /*#__PURE__*/_jsx(Box, {
@@ -1530,7 +1551,8 @@ export default function BlockletBrandingWithPermission(props) {
 BlockletBranding.propTypes = {
   blocklet: PropTypes.object.isRequired,
   onUpdate: PropTypes.func,
-  hasPermission: PropTypes.bool
+  hasPermission: PropTypes.bool,
+  showFields: PropTypes.array
 };
 const Div = styled(Box)`
   max-width: 1536px;