pb-sxp-ui 1.0.99 → 1.0.101

package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -7,6 +7,7 @@ require("./WaterfallList.less");
 const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const css_1 = require("@emotion/css");
+const tool_1 = require("../../../../core/utils/tool");
 const WaterfallFlowItem = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -104,11 +105,15 @@ const WaterfallFlowItem = (props) => {
         react_1.default.createElement("div", { className: 'waterFallList-content-listItem-picture', ref: pictRef },
             react_1.default.createElement(FormatImage_1.default, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', onLoad: imgLoad, ref: imgDom })),
         react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info' },
-            react_1.default.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
-            react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
+            react_1.default.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title), dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
+                } }),
+            react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
+                } }))));
 };
 function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
     const scrollParent = (0, react_1.useRef)(null);
@@ -286,24 +291,30 @@ function WaterfallList(_a) {
                         objectFit: 'cover',
                         marginBottom: '20px'
                     }), src: (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.picture }))),
-            react_1.default.createElement("div", { className: 'waterFallList-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc }, (_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info),
-            react_1.default.createElement("div", { hidden: !((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.link), className: 'waterFallList-collection', style: Object.assign({}, (_g = props === null || props === void 0 ? void 0 : props.textStyles) === null || _g === void 0 ? void 0 : _g.hashTagLink), onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'),
+            react_1.default.createElement("div", { className: 'waterFallList-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info, (_f = props === null || props === void 0 ? void 0 : props.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagDesc)
+                } }),
+            react_1.default.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), className: 'waterFallList-collection', style: Object.assign({}, (_h = props === null || props === void 0 ? void 0 : props.textStyles) === null || _h === void 0 ? void 0 : _h.hashTagLink), onClick: handleClickLink, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.linkTitle) || 'Shop the collection', (_k = props === null || props === void 0 ? void 0 : props.textStyles) === null || _k === void 0 ? void 0 : _k.hashTagLink)
+                } }),
             react_1.default.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
                 list.map((item, ind) => {
                     var _a;
                     return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
                 }),
-                react_1.default.createElement("div", { hidden: !((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.link), style: {
+                react_1.default.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
                         position: 'absolute',
                         width: '100%',
-                        transform: `translate(0px,${(_p = ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.top) +
-                            ((_o = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_m = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _m === void 0 ? void 0 : _m.length) - 1]) === null || _o === void 0 ? void 0 : _o.height)) !== null && _p !== void 0 ? _p : 0}px)`,
-                        height: ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.link)
-                            ? ((_r = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _r === void 0 ? void 0 : _r.offsetHeight) || ((_s = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _s === void 0 ? void 0 : _s.height) || '100px'
+                        transform: `translate(0px,${(_r = ((_o = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_m = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _m === void 0 ? void 0 : _m.length) - 1]) === null || _o === void 0 ? void 0 : _o.top) +
+                            ((_q = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_p = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _p === void 0 ? void 0 : _p.length) - 1]) === null || _q === void 0 ? void 0 : _q.height)) !== null && _r !== void 0 ? _r : 0}px)`,
+                        height: ((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.link)
+                            ? ((_t = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _t === void 0 ? void 0 : _t.offsetHeight) || ((_u = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _u === void 0 ? void 0 : _u.height) || '100px'
                             : 0
                     } }))),
-        react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
-        react_1.default.createElement("div", { ref: buttonRef, hidden: !((_u = data === null || data === void 0 ? void 0 : data.tag) === null || _u === void 0 ? void 0 : _u.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            react_1.default.createElement("button", { "aria-label": ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.linkTitle) || 'Shop the collection'))))));
+        react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        react_1.default.createElement("div", { ref: buttonRef, hidden: !((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            react_1.default.createElement("button", { "aria-label": ((_x = data === null || data === void 0 ? void 0 : data.tag) === null || _x === void 0 ? void 0 : _x.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(((_y = data === null || data === void 0 ? void 0 : data.tag) === null || _y === void 0 ? void 0 : _y.linkTitle) || 'Shop the collection', props === null || props === void 0 ? void 0 : props.buttonStyle)
+                } }))))));
 }
 exports.default = WaterfallList;

package/lib/core/components/SxpPageRender/index.d.ts

@@ -35,6 +35,7 @@ export interface ISxpPageRenderProps {
         likeIconXPosit?: string;
         swipeTipOffset?: number;
         consent?: any[];
+        videoPlayIcon?: string;
     };
     descStyle?: CSSProperties;
     tipText?: {

package/lib/core/components/SxpPageRender/index.js

@@ -171,11 +171,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         return h;
     }, [tagList, waterFallData]);
-    const height = (0, react_1.useMemo)(() => {
+    const minusHeight = (0, react_1.useMemo)(() => {
         let minusHeight = 0;
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
             minusHeight += 45;
         }
+        return minusHeight;
+    }, []);
+    const height = (0, react_1.useMemo)(() => {
         return containerHeight - minusHeight - tagHeight;
     }, [globalConfig, containerHeight, tagHeight]);
     const renderLogo = (0, react_1.useMemo)(() => {
@@ -188,7 +191,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current }));
+            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
         }
         if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -210,6 +213,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         isMuted,
         activeIndex,
         globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
+        globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon,
         viewTime,
         tipText,
         resolver,
@@ -407,7 +411,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
             } })),
         renderLogo,
-        react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
+        react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
+                top: minusHeight
+            } }),
         isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
         react_1.default.createElement(react_2.Swiper, { style: {
                 marginTop: tagHeight

package/lib/core/context/EditorDataProvider.d.ts

@@ -20,6 +20,7 @@ interface IEditorDataContext {
     setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
     openConsent?: boolean;
     setOpenConsent?: React.Dispatch<React.SetStateAction<boolean>>;
+    sxpFontLinks?: any[];
 }
 interface IEditorProviderProps {
     data?: any;

package/lib/core/context/EditorDataProvider.js

@@ -28,7 +28,8 @@ const EditorDataProvider = ({ children, data }) => {
             openHashtag,
             setOpenHashtag,
             openConsent,
-            setOpenConsent
+            setOpenConsent,
+            sxpFontLinks: data === null || data === void 0 ? void 0 : data.sxpFontLinks
         } }, children));
 };
 function useEditorDataProvider() {

package/lib/core/utils/tool.d.ts

@@ -2,4 +2,9 @@ declare function uuid(len: number, radix: number): string;
 declare const getIndexByblockType: (type: string, index: number) => number | "initial";
 export declare const generateRandomString: (length: number) => string;
 export declare const getUid: () => string;
+interface IfontType {
+    'fontFamily-cn': string;
+    'fontFamily-en': string;
+}
+export declare const setFontForText: (textContent?: string | null, style?: IfontType | any) => string;
 export { uuid, getIndexByblockType };

package/lib/core/utils/tool.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIndexByblockType = exports.uuid = exports.getUid = exports.generateRandomString = void 0;
+exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
 const uuid_1 = require("uuid");
 function uuid(len, radix) {
     const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
@@ -52,3 +52,47 @@ const getUid = () => {
     return uid;
 };
 exports.getUid = getUid;
+const setFontForText = (textContent, style) => {
+    if (!textContent)
+        return '';
+    let content = '';
+    const cn = style === null || style === void 0 ? void 0 : style['fontFamily-cn'];
+    const en = style === null || style === void 0 ? void 0 : style['fontFamily-en'];
+    if (!cn && !en) {
+        return textContent;
+    }
+    let text = textContent;
+    const chineseRegex = /[\u4e00-\u9fa5]/g;
+    const englishRegex = /[^\u4e00-\u9fa5]/g;
+    const cnStyle = `font-family:${cn !== null && cn !== void 0 ? cn : 'inherit'}`;
+    const enStyle = `font-family:${en !== null && en !== void 0 ? en : 'inherit'}`;
+    const fn = (str) => {
+        let chineseStartIndex = str.search(chineseRegex);
+        let englishStartIndex = str.search(englishRegex);
+        if (chineseStartIndex !== -1 && englishStartIndex !== -1 && chineseStartIndex < englishStartIndex) {
+            content += `<span style="${cnStyle}">${str.substring(chineseStartIndex, englishStartIndex)}</span>`;
+            text = str.substring(englishStartIndex, str === null || str === void 0 ? void 0 : str.length);
+        }
+        if (chineseStartIndex !== -1 && englishStartIndex !== -1 && chineseStartIndex > englishStartIndex) {
+            content += `<span style="${enStyle}">${str.substring(englishStartIndex, chineseStartIndex)}</span>`;
+            text = str.substring(chineseStartIndex, str === null || str === void 0 ? void 0 : str.length);
+        }
+        if (chineseStartIndex === -1) {
+            content += `<span style="${enStyle}">${str.substring(englishStartIndex, str === null || str === void 0 ? void 0 : str.length)}</span>`;
+            text = '';
+            return false;
+        }
+        if (englishStartIndex === -1) {
+            content += `<span style="${cnStyle}">${str.substring(chineseStartIndex, str === null || str === void 0 ? void 0 : str.length)}</span>`;
+            text = '';
+            return false;
+        }
+        return true;
+    };
+    let w = true;
+    while (w) {
+        w = fn(text);
+    }
+    return content;
+};
+exports.setFontForText = setFontForText;

package/lib/index.d.ts

@@ -8,5 +8,4 @@ export { default as SxpDataSourceProvider } from './core/context/SxpDataSourcePr
 export { default as SxpPageCore } from './core/components/SxpPageCore';
 export { default as EditorDataProvider } from './core/context/EditorDataProvider';
 export { useEditorDataProvider } from './core/context/EditorDataProvider';
-export { default as defaultSetting } from './materials/sxp/defaultSetting';
 export default Pagebuilder;

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultSetting = exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
+exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
 const tslib_1 = require("tslib");
 const Pagebuilder_1 = require("./core/Pagebuilder");
 exports.core = tslib_1.__importStar(require("./core"));
@@ -19,6 +19,4 @@ var EditorDataProvider_1 = require("./core/context/EditorDataProvider");
 Object.defineProperty(exports, "EditorDataProvider", { enumerable: true, get: function () { return tslib_1.__importDefault(EditorDataProvider_1).default; } });
 var EditorDataProvider_2 = require("./core/context/EditorDataProvider");
 Object.defineProperty(exports, "useEditorDataProvider", { enumerable: true, get: function () { return EditorDataProvider_2.useEditorDataProvider; } });
-var defaultSetting_1 = require("./materials/sxp/defaultSetting");
-Object.defineProperty(exports, "defaultSetting", { enumerable: true, get: function () { return tslib_1.__importDefault(defaultSetting_1).default; } });
 exports.default = Pagebuilder_1.Pagebuilder;

package/lib/materials/sxp/HashTag/settingRender.d.ts

@@ -38,27 +38,25 @@ declare const _default: ({
         } | {
             type: string;
             label: string;
-            child: ({
+            child: {
                 type: string;
                 name: string[];
-                options?: undefined;
-                initialValue?: undefined;
-                addonAfter?: undefined;
-            } | {
+                bottomText: string;
+            }[];
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+        } | {
+            type: string;
+            label: string;
+            child: ({
                 type: string;
-                options: {
-                    label: string;
-                    value: string;
-                }[];
                 name: string[];
-                initialValue: string;
                 addonAfter?: undefined;
             } | {
                 type: string;
                 addonAfter: string;
                 name: string[];
-                options?: undefined;
-                initialValue?: undefined;
             })[];
             options?: undefined;
             name?: undefined;
@@ -105,19 +103,19 @@ declare const _default: ({
     } | {
         type: string;
         label: string;
-        child: ({
+        child: {
             type: string;
             name: string[];
-            initialValue: string;
-            options?: undefined;
-            addonAfter?: undefined;
-        } | {
+            bottomText: string;
+        }[];
+        name?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
             type: string;
             name: string[];
-            options: {
-                label: string;
-                value: string;
-            }[];
             initialValue: string;
             addonAfter?: undefined;
         } | {
@@ -125,7 +123,6 @@ declare const _default: ({
             name: string[];
             addonAfter: string;
             initialValue?: undefined;
-            options?: undefined;
         })[];
         name?: undefined;
         initialValue?: undefined;

package/lib/materials/sxp/HashTag/settingRender.js

@@ -1,7 +1,5 @@
 "use strict";
-var _a, _b;
 Object.defineProperty(exports, "__esModule", { value: true });
-const defaultSetting_1 = require("../defaultSetting");
 exports.default = [
     {
         title: 'Banner',
@@ -70,14 +68,24 @@ exports.default = [
                         label: '标题字体',
                         child: [
                             {
-                                type: 'Color',
-                                name: ['color']
+                                type: 'Select',
+                                name: ['fontFamily-cn'],
+                                bottomText: '中文字体'
                             },
                             {
                                 type: 'Select',
-                                options: defaultSetting_1.fontOptions,
-                                name: ['fontFamily'],
-                                initialValue: (_a = defaultSetting_1.fontOptions === null || defaultSetting_1.fontOptions === void 0 ? void 0 : defaultSetting_1.fontOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+                                name: ['fontFamily-en'],
+                                bottomText: '英文/其他字体'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'Group',
+                        label: '',
+                        child: [
+                            {
+                                type: 'Color',
+                                name: ['color']
                             },
                             {
                                 type: 'Number',
@@ -144,15 +152,25 @@ exports.default = [
                 label: '字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['props', 'buttonStyle', 'color'],
-                        initialValue: '#fff'
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['props', 'buttonStyle', 'fontFamily'],
-                        options: defaultSetting_1.fontOptions,
-                        initialValue: (_b = defaultSetting_1.fontOptions === null || defaultSetting_1.fontOptions === void 0 ? void 0 : defaultSetting_1.fontOptions[0]) === null || _b === void 0 ? void 0 : _b.value
+                        name: ['props', 'buttonStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'buttonStyle', 'color'],
+                        initialValue: '#fff'
                     },
                     {
                         type: 'Number',

package/lib/materials/sxp/popup/AppointForm/Form.d.ts

@@ -0,0 +1,14 @@
+import { IAppointFormProps } from '.';
+import React from 'react';
+interface IFormProps {
+    columns?: {
+        title?: string;
+        dataIndex?: string;
+        valueType?: string;
+        key?: string;
+    }[];
+    layout?: IAppointFormProps['layoutType'];
+    onChange?: (data: Record<string, any>) => void;
+}
+declare const _default: React.NamedExoticComponent<IFormProps>;
+export default _default;

package/lib/materials/sxp/popup/AppointForm/Form.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const react_2 = tslib_1.__importDefault(require("react"));
+const Form = ({ layout, columns, onChange }) => {
+    return (react_2.default.createElement(react_2.default.Fragment, null, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => (react_2.default.createElement("div", { key: index, className: 'pb-appoint-form-container-item', style: { flexDirection: layout === 'horizontal' ? 'row' : 'column' } },
+        layout !== 'inline' && react_2.default.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
+        (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (react_2.default.createElement("input", { className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex, onChange: onChange })))))));
+};
+exports.default = (0, react_1.memo)(Form);

package/lib/materials/sxp/popup/AppointForm/index.js

@@ -7,11 +7,12 @@ const lodash_1 = require("lodash");
 const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const tool_1 = require("../../../../core/utils/tool");
+const Form_1 = tslib_1.__importDefault(require("./Form"));
 const AppointForm = (_a) => {
-    var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
+    var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType = 'inline', isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
     const { submitForm, popupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
-    const formRef = (0, react_1.useRef)();
     const [loading, setLoading] = (0, react_1.useState)(false);
     const defaultColumns = (0, react_1.useMemo)(() => [
         {
@@ -39,27 +40,26 @@ const AppointForm = (_a) => {
             key: '4'
         }
     ], []);
+    const [formData, setFormData] = (0, react_1.useState)({});
     const columnsData = (0, react_1.useMemo)(() => {
-        if (layoutType === undefined) {
-            const list = (0, lodash_1.cloneDeep)(columns) || defaultColumns;
-            return list === null || list === void 0 ? void 0 : list.map((obj) => (Object.assign(Object.assign({}, obj), { title: undefined, fieldProps: { placeholder: obj === null || obj === void 0 ? void 0 : obj.title } })));
-        }
-        else {
-            return (0, lodash_1.cloneDeep)(columns) || defaultColumns;
-        }
-    }, [layoutType, columns, defaultColumns]);
+        return (0, lodash_1.cloneDeep)(columns) || defaultColumns;
+    }, [columns, defaultColumns]);
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const { name, value } = e.target;
+        setFormData(Object.assign(Object.assign({}, formData), { [name]: value }));
+    }, [formData]);
     const handleSubmit = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f, _g;
-        const vals = yield ((_b = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue());
+        var _b, _c, _d, _e, _f;
+        const vals = formData;
         if (!vals)
             return;
-        const arr = (_d = (_c = Object.keys(vals)) === null || _c === void 0 ? void 0 : _c.map((key) => {
+        const arr = (_c = (_b = Object.keys(vals)) === null || _b === void 0 ? void 0 : _b.map((key) => {
             var _a;
             return ({
                 name: key,
                 value: (_a = vals[key]) !== null && _a !== void 0 ? _a : ''
             });
-        })) === null || _d === void 0 ? void 0 : _d.filter((item) => item === null || item === void 0 ? void 0 : item.value);
+        })) === null || _c === void 0 ? void 0 : _c.filter((item) => item === null || item === void 0 ? void 0 : item.value);
         if (!arr || !(arr === null || arr === void 0 ? void 0 : arr.length))
             return;
         setLoading(true);
@@ -68,8 +68,8 @@ const AppointForm = (_a) => {
         if (res) {
             if (isExternalLink) {
                 const data = popupDetailData;
-                const product = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct;
-                const cta = (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.bindCta;
+                const product = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
+                const cta = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta;
                 const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
                 jumpToWeb(data, product, cta, position);
             }
@@ -80,10 +80,15 @@ const AppointForm = (_a) => {
         }
     }), 1000);
     return (react_1.default.createElement("div", { className: 'pb-appoint-form' },
-        react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}` }, title),
+        react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}`, dangerouslySetInnerHTML: {
+                __html: (0, tool_1.setFontForText)(title, textStyle)
+            } }),
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
-            react_1.default.createElement("div", { className: 'pb-appoint-form-container' })),
+            react_1.default.createElement("div", { className: 'pb-appoint-form-container' },
+                react_1.default.createElement(Form_1.default, { columns: columnsData, layout: layoutType, onChange: handleChange }))),
         react_1.default.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
-            react_1.default.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
+            react_1.default.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle), dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(loading ? 'loading...' : submitText, submitButtonStyle)
+                } }))));
 };
 exports.default = (0, react_1.memo)(AppointForm);

package/lib/materials/sxp/popup/AppointForm/settingRender.d.ts

@@ -15,27 +15,24 @@ declare const _default: ({
     } | {
         type: string;
         label: string;
-        child: ({
+        child: {
             type: string;
             name: string[];
-            options?: undefined;
-            initialValue?: undefined;
-            addonAfter?: undefined;
-        } | {
+            bottomText: string;
+        }[];
+        name?: undefined;
+        options?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
             type: string;
             name: string[];
-            options: {
-                label: string;
-                value: string;
-            }[];
-            initialValue: string;
             addonAfter?: undefined;
         } | {
             type: string;
             name: string[];
             addonAfter: string;
-            options?: undefined;
-            initialValue?: undefined;
         })[];
         name?: undefined;
         options?: undefined;
@@ -58,20 +55,12 @@ declare const _default: ({
             type: string;
             name: string[];
             initialValue: string;
-            options?: undefined;
-            addonAfter?: undefined;
-        } | {
-            type: string;
-            name: string[];
-            options: any[];
-            initialValue: any;
             addonAfter?: undefined;
         } | {
             type: string;
             name: string[];
             addonAfter: string;
             initialValue: number;
-            options?: undefined;
         })[];
         name?: undefined;
         options?: undefined;

package/lib/materials/sxp/popup/AppointForm/settingRender.js

@@ -1,8 +1,5 @@
 "use strict";
-var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const defaultSetting_1 = tslib_1.__importStar(require("../../defaultSetting"));
 exports.default = [
     {
         type: 'Text',
@@ -22,14 +19,24 @@ exports.default = [
                 label: '标题字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['textStyle', 'color']
+                        type: 'Select',
+                        name: ['testStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['textStyle', 'fontFamily'],
-                        options: defaultSetting_1.fontOptions,
-                        initialValue: (_a = defaultSetting_1.fontOptions === null || defaultSetting_1.fontOptions === void 0 ? void 0 : defaultSetting_1.fontOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+                        name: ['testStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['textStyle', 'color']
                     },
                     {
                         type: 'Number',
@@ -77,15 +84,25 @@ exports.default = [
                 label: '提交按钮字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['props', 'submitButtonStyle', 'color'],
-                        initialValue: '#fff'
+                        type: 'Select',
+                        name: ['props', 'submitButtonStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['props', 'submitButtonStyle', 'fontFamily'],
-                        options: defaultSetting_1.default === null || defaultSetting_1.default === void 0 ? void 0 : defaultSetting_1.default.fontOptions,
-                        initialValue: (_c = (_b = defaultSetting_1.default === null || defaultSetting_1.default === void 0 ? void 0 : defaultSetting_1.default.fontOptions) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value
+                        name: ['props', 'submitButtonStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'submitButtonStyle', 'color'],
+                        initialValue: '#fff'
                     },
                     {
                         type: 'Number',