@blocklet/pages-kit-block-studio 0.4.145 → 0.4.147
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -173,6 +173,9 @@ function Layout({ loadState, loadedData }) {
|
|
|
173
173
|
},
|
|
174
174
|
};
|
|
175
175
|
}, [staticData, location.pathname]);
|
|
176
|
+
const notSelectedBlock = (0, react_1.useMemo)(() => {
|
|
177
|
+
return !currentPage?.blockName || !currentPage?.code;
|
|
178
|
+
}, [currentPage]);
|
|
176
179
|
const getStaticData = (0, react_1.useCallback)(() => {
|
|
177
180
|
return staticData[location.pathname]?.main || {};
|
|
178
181
|
}, [staticData, location.pathname]);
|
|
@@ -422,6 +425,44 @@ function Layout({ loadState, loadedData }) {
|
|
|
422
425
|
const initialLocale = url.searchParams.get('locale') || locale || 'en';
|
|
423
426
|
return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "custom-component-root", sx: { height: '100%', width: '100%', overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme_1.pagesTheme, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), children: (0, jsx_runtime_1.jsx)(components_2.CustomComponentRenderer, { locale: initialLocale, componentId: initialComponentId || state.metadata.id, dev: { mode: 'draft', components: mergedAllBlocks, defaultLocale }, properties: mergedPropertiesValues }, `custom-${renderComponentTrigger}`) }) }) }));
|
|
424
427
|
}
|
|
428
|
+
// 没有匹配到路由，使用欢迎页面
|
|
429
|
+
if (notSelectedBlock) {
|
|
430
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", sx: {
|
|
431
|
+
backgroundColor: 'background.default',
|
|
432
|
+
p: 3,
|
|
433
|
+
textAlign: 'center',
|
|
434
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: "https://api.iconify.design/fluent-emoji:waving-hand.svg", sx: { width: 64, height: 64, mb: 3 }, alt: "Welcome" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", sx: { mb: 2, fontWeight: 'bold', color: 'primary.main' }, children: t('themeTranslations.welcomeTitle') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: { mb: 4, color: 'text.secondary', maxWidth: 600 }, children: t('themeTranslations.welcomeDescription') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2, mb: 4 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), onClick: () => {
|
|
435
|
+
state.createBlockOpen = true;
|
|
436
|
+
}, children: t('themeTranslations.createBlock') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", component: "a", href: "https://community.arcblock.io/", target: "_blank", rel: "noopener", children: t('themeTranslations.getHelp') })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
437
|
+
display: 'flex',
|
|
438
|
+
flexDirection: 'column',
|
|
439
|
+
gap: 2,
|
|
440
|
+
p: 3,
|
|
441
|
+
bgcolor: 'background.paper',
|
|
442
|
+
borderRadius: 2,
|
|
443
|
+
boxShadow: 1,
|
|
444
|
+
maxWidth: 600,
|
|
445
|
+
mx: 2,
|
|
446
|
+
width: 'calc(100% - 32px)',
|
|
447
|
+
mt: 2,
|
|
448
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: { color: 'primary.main', mb: 1, textAlign: 'center' }, children: t('themeTranslations.quickStart') }), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2.5, children: [1, 2, 3].map((step) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
449
|
+
bgcolor: 'primary.main',
|
|
450
|
+
color: 'primary.contrastText',
|
|
451
|
+
width: 24,
|
|
452
|
+
height: 24,
|
|
453
|
+
borderRadius: '50%',
|
|
454
|
+
display: 'flex',
|
|
455
|
+
alignItems: 'center',
|
|
456
|
+
justifyContent: 'center',
|
|
457
|
+
fontWeight: 'bold',
|
|
458
|
+
flexShrink: 0,
|
|
459
|
+
}, children: step }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: {
|
|
460
|
+
flex: 1,
|
|
461
|
+
minWidth: 0,
|
|
462
|
+
wordBreak: 'break-word',
|
|
463
|
+
textAlign: 'left',
|
|
464
|
+
}, children: t(`themeTranslations.step${step}`) })] }, step))) })] })] }, "content-welcome"));
|
|
465
|
+
}
|
|
425
466
|
// 外部容器，包含设备切换按钮和iframe
|
|
426
467
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 1, display: 'flex', justifyContent: 'center', borderBottom: '1px solid #e0e0e0' }, children: (0, jsx_runtime_1.jsxs)(material_1.ToggleButtonGroup, { size: "small", exclusive: true, color: "primary", value: state.simulatorType, onChange: (_, value) => (state.simulatorType = value ?? state.simulatorType), sx: {
|
|
427
468
|
'& > button': {
|
|
@@ -512,7 +553,7 @@ function Layout({ loadState, loadedData }) {
|
|
|
512
553
|
display: state.draggingSplitPane ? 'none' : 'flex',
|
|
513
554
|
}, onLoad: () => {
|
|
514
555
|
state.iframeLoaded = true;
|
|
515
|
-
}, title: "Component Preview" })] })] }) })] }, "middle-panel"));
|
|
556
|
+
}, title: "Component Preview" })] })] }) }, "content-iframe")] }, "middle-panel"));
|
|
516
557
|
}, [
|
|
517
558
|
loadedData,
|
|
518
559
|
loadState,
|
|
@@ -528,7 +569,20 @@ function Layout({ loadState, loadedData }) {
|
|
|
528
569
|
if (state.draggingSplitPane) {
|
|
529
570
|
return DraggingSplitPlaceholder;
|
|
530
571
|
}
|
|
531
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.List, { sx: {
|
|
572
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.List, { sx: {
|
|
573
|
+
height: '100%',
|
|
574
|
+
overflowY: 'auto',
|
|
575
|
+
display: 'flex',
|
|
576
|
+
flexDirection: 'column',
|
|
577
|
+
gap: 1,
|
|
578
|
+
// add disabled backdrop if not selected block
|
|
579
|
+
'& .MuiListItem-root': {
|
|
580
|
+
pointerEvents: notSelectedBlock ? 'none' : 'auto',
|
|
581
|
+
opacity: notSelectedBlock ? 0.5 : 1,
|
|
582
|
+
backdropFilter: notSelectedBlock ? 'blur(10px) !important' : 'none',
|
|
583
|
+
userSelect: notSelectedBlock ? 'none' : 'auto',
|
|
584
|
+
},
|
|
585
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.BasicInfo, { config: state.metadata }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(components_1.PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: defaultLocale, allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
|
|
532
586
|
updater(state.metadata);
|
|
533
587
|
}, useI18nEditor: false }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 1, sx: { mt: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", color: "primary", onClick: async () => {
|
|
534
588
|
try {
|
|
@@ -802,14 +856,14 @@ function CreateResource({ open, onClose }) {
|
|
|
802
856
|
// 这里我们在运行时扩展 translations 对象，而不是修改源文件
|
|
803
857
|
if (!locales_1.translations.en.themeTranslations) {
|
|
804
858
|
locales_1.translations.en.themeTranslations = {
|
|
805
|
-
search: 'Search
|
|
806
|
-
createNewBlock: 'Create New
|
|
859
|
+
search: 'Search Components...',
|
|
860
|
+
createNewBlock: 'Create New Component',
|
|
807
861
|
name: 'Name',
|
|
808
862
|
description: 'Description',
|
|
809
863
|
create: 'Create',
|
|
810
|
-
blockNameRequired: '
|
|
811
|
-
blockNameExists: '
|
|
812
|
-
failedCreateBlock: 'Failed to create
|
|
864
|
+
blockNameRequired: 'Component name is required',
|
|
865
|
+
blockNameExists: 'Component name already exists, please try another name',
|
|
866
|
+
failedCreateBlock: 'Failed to create component',
|
|
813
867
|
createResource: 'Create Resource',
|
|
814
868
|
failedLoadCode: 'Failed to load component code',
|
|
815
869
|
interfaceToProperties: 'Interface → Properties',
|
|
@@ -838,6 +892,14 @@ if (!locales_1.translations.en.themeTranslations) {
|
|
|
838
892
|
configUpdateConfirmation: 'Configuration will be updated after confirmation.',
|
|
839
893
|
operationFailed: 'Operation failed',
|
|
840
894
|
noRoutesFound: 'No Components Found',
|
|
895
|
+
welcomeTitle: 'Welcome to Component Studio',
|
|
896
|
+
welcomeDescription: 'Create, customize, and manage your components with ease. Select an existing component or create a new one to start your creative journey.',
|
|
897
|
+
createBlock: 'Create Component',
|
|
898
|
+
getHelp: 'Community Support',
|
|
899
|
+
quickStart: 'Quick Start Guide',
|
|
900
|
+
step1: 'Browse and select components from the left menu, or create your own',
|
|
901
|
+
step2: 'Preview your component in the center area with responsive design views',
|
|
902
|
+
step3: 'Customize properties and configurations in the right panel to bring your ideas to life',
|
|
841
903
|
};
|
|
842
904
|
}
|
|
843
905
|
if (!locales_1.translations.zh.themeTranslations) {
|
|
@@ -847,8 +909,8 @@ if (!locales_1.translations.zh.themeTranslations) {
|
|
|
847
909
|
name: '名称',
|
|
848
910
|
description: '描述',
|
|
849
911
|
create: '创建',
|
|
850
|
-
blockNameRequired: '
|
|
851
|
-
blockNameExists: '
|
|
912
|
+
blockNameRequired: '组件名称不能为空',
|
|
913
|
+
blockNameExists: '组件名称已存在，请尝试其他名称',
|
|
852
914
|
failedCreateBlock: '创建组件失败',
|
|
853
915
|
createResource: '创建资源',
|
|
854
916
|
failedLoadCode: '加载组件代码失败',
|
|
@@ -878,5 +940,13 @@ if (!locales_1.translations.zh.themeTranslations) {
|
|
|
878
940
|
configUpdateConfirmation: '确认后将更新配置。',
|
|
879
941
|
operationFailed: '执行操作失败',
|
|
880
942
|
noRoutesFound: '未找到组件',
|
|
943
|
+
welcomeTitle: '欢迎使用 Block Studio',
|
|
944
|
+
welcomeDescription: '轻松创建、自定义和管理您的组件。选择现有组件或创建新组件，开启您的创意之旅。',
|
|
945
|
+
createBlock: '创建组件',
|
|
946
|
+
getHelp: '社区支持',
|
|
947
|
+
quickStart: '快速入门指南',
|
|
948
|
+
step1: '从左侧菜单浏览并选择组件，或创建您自己的组件',
|
|
949
|
+
step2: '在中央区域预览您的组件，支持响应式设计视图',
|
|
950
|
+
step3: '在右侧面板自定义属性和配置，让您的创意变为现实',
|
|
881
951
|
};
|
|
882
952
|
}
|