@pisell/materials 6.0.22 → 6.1.2

package/lib/components/walletCard/index.js

@@ -42,6 +42,7 @@ var import_pisellModal = __toESM(require("./../pisellModal"));
 var import_Amount = __toESM(require("./../pisellText/components/Amount"));
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
 var import_Guest = __toESM(require("./Guest"));
+var import_Guide = __toESM(require("./Guide"));
 var import_index = require("./index.less");
 var DEFAULT_PROPS = {
   symbol: "$",
@@ -89,10 +90,29 @@ var toBooleanValue = (value) => {
   if (value === 1 || value === "1") return true;
   return !!value;
 };
-var useCodeModal = (cardNo, onCodeClick) => {
+var useCodeModal = (cardNo, onCodeClick, codeType) => {
+  var _a;
   const [isModalOpen, setIsModalOpen] = (0, import_react.useState)(false);
+  const context = (0, import_useEngineContext.default)();
+  const { interaction } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
   const handleCodeClick = (e) => {
+    var _a2, _b, _c, _d;
     e.stopPropagation();
+    if ((_b = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.isAppEnv) == null ? void 0 : _b.call(_a2)) {
+      const typeMap = {
+        orCode: "qrCode",
+        barCode: "barCode"
+      };
+      (_d = (_c = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _c.postMessageToApp) == null ? void 0 : _d.call(_c, {
+        module: "global",
+        key: "openCodeModal",
+        data: {
+          type: typeMap[codeType] || codeType,
+          value: cardNo
+        }
+      });
+      return;
+    }
     if (onCodeClick) {
       onCodeClick();
     } else {
@@ -241,6 +261,7 @@ var CodeModal = ({ isOpen, onClose, codeType, cardNo, platform }) => {
   );
 };
 var WalletCard = (props) => {
+  var _a;
   const mergedProps = { ...DEFAULT_PROPS, ...props };
   const {
     symbol,
@@ -257,7 +278,8 @@ var WalletCard = (props) => {
     onCodeClick,
     onClick,
     className,
-    style
+    style,
+    isGuide
   } = mergedProps;
   const showIcon = toBooleanValue(mergedProps.showIcon);
   const showWalletName = toBooleanValue(mergedProps.showWalletName);
@@ -269,18 +291,35 @@ var WalletCard = (props) => {
   const { utils } = context.appHelper || {};
   const { isModalOpen, handleCodeClick, closeModal } = useCodeModal(
     cardNo,
-    onCodeClick
+    onCodeClick,
+    codeType
   );
   const backgroundStyle = (0, import_react.useMemo)(() => {
+    var _a2;
     if (props.customBackgroundImage) {
       return { backgroundImage: `url(${props.customBackgroundImage})` };
     } else {
+      if (((_a2 = props == null ? void 0 : props.walletGuideConfig) == null ? void 0 : _a2.backgroundColor) && isGuide || (props == null ? void 0 : props.backgroundColor) && !isLogin) {
+        return {
+          backgroundImage: "none"
+        };
+      }
       return {
         backgroundImage: `url(https://file.mypisell-dev.com/pisel/image/9/${mode === "dark" ? "3d039c83ff5b84fadafb8a23c33d6cc42025_02_26_00_42_53_288_08413160975__720_456__" : "61dcbe950c9451164a6bb1d17d5bc5f02025_02_26_00_43_42_741_04853453608__720_456__"}.png)`
       };
     }
-  }, [props.customBackgroundImage, mode]);
+  }, [
+    props.customBackgroundImage,
+    mode,
+    (_a = props == null ? void 0 : props.walletGuideConfig) == null ? void 0 : _a.backgroundColor,
+    props == null ? void 0 : props.backgroundColor,
+    isLogin,
+    isGuide
+  ]);
   const goWallet = () => {
+    if (!(items == null ? void 0 : items.length)) {
+      return;
+    }
     utils == null ? void 0 : utils.action({
       type: "pisell1.goWallet",
       data: {},
@@ -309,11 +348,11 @@ var WalletCard = (props) => {
           className: (0, import_classnames.default)(
             "pisell-wallet-card-content",
             mode,
-            !isLogin && "pisell-wallet-card-guest-content"
+            (!isLogin || isGuide) && "pisell-wallet-card-guest-content"
           ),
           style: backgroundStyle
         },
-        isLogin ? /* @__PURE__ */ import_react.default.createElement(
+        isLogin ? !isGuide ? /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
             onClick: () => {
@@ -346,7 +385,7 @@ var WalletCard = (props) => {
               symbol
             }
           )
-        ) : /* @__PURE__ */ import_react.default.createElement(import_Guest.default, { setting: props })
+        ) : /* @__PURE__ */ import_react.default.createElement(import_Guide.default, { setting: props }) : /* @__PURE__ */ import_react.default.createElement(import_Guest.default, { setting: props })
       ),
       cardStyle === "full" && isLogin && /* @__PURE__ */ import_react.default.createElement(
         "div",

package/lib/components/walletCard/index.less

@@ -20,7 +20,7 @@
 
     // 暗色主题
     &.dark {
-      background-color: #000;
+      background-color: transparent;
 
       .pisell-wallet-card-header-left {
         color: #fff;
@@ -39,7 +39,7 @@
 
     // 亮色主题
     &.light {
-      background-color: #fff;
+      background-color: transparent;
 
       .pisell-wallet-card-header-left {
         color: #101828;
@@ -210,7 +210,6 @@
 
         text {
           fill: #000;
-          font-family: Inter;
           font-size: 12px;
           font-style: normal;
           font-weight: 400;
@@ -223,7 +222,6 @@
     // 二维码下方文本样式
     .pisell-wallet-card-code-qrcode-value {
       color: #000;
-      font-family: Inter;
       font-size: 12px;
       text-align: center;
       font-style: normal;
@@ -240,7 +238,7 @@
 
 // 二维码模态框
 .pisell-qrcode-modal {
-  .pisell-qrcode-modal-content{
+  .pisell-qrcode-modal-content {
     pointer-events: auto;
     touch-action: none;
     overscroll-behavior: none;

package/lib/hooks/useResponsive.js

@@ -35,7 +35,8 @@ var responsiveConfig = {
 function handleResize() {
   const oldInfo = info;
   calculate();
-  if (oldInfo === info) return;
+  if (oldInfo === info)
+    return;
   for (const subscriber of subscribers) {
     subscriber();
   }
@@ -57,7 +58,8 @@ function calculate() {
 }
 function configResponsive(config) {
   responsiveConfig = config;
-  if (info) calculate();
+  if (info)
+    calculate();
 }
 function useResponsive() {
   if (import_utils.isBrowser && !listening) {
@@ -68,7 +70,8 @@ function useResponsive() {
   }
   const [state, setState] = (0, import_react.useState)(info);
   (0, import_react.useEffect)(() => {
-    if (!import_utils.isBrowser) return;
+    if (!import_utils.isBrowser)
+      return;
     if (!listening) {
       window.addEventListener("resize", handleResize);
     }

package/lib/index.d.ts

@@ -138,3 +138,4 @@ export { default as PisellList01 } from './components/pisellList01';
 export { default as SectionFooters } from './components/section-footers';
 export { default as ProductCard } from './components/productCard';
 export { default as Collapse } from './components/collapse';
+export { default as PisellGoodPassCard } from './components/pisellGoodPassCard';

package/lib/index.js

@@ -127,6 +127,7 @@ __export(src_exports, {
   PisellEmpty: () => import_pisellEmpty.default,
   PisellFloatingPanel: () => import_pisellFloatingPanel.default,
   PisellFooter: () => import_footer.default,
+  PisellGoodPassCard: () => import_pisellGoodPassCard.default,
   PisellHeader: () => import_header.default,
   PisellHeaderProgressBar: () => import_pisellHeaderProgressBar.default,
   PisellImageCarousels: () => import_pisellImageCarousels.default,
@@ -341,6 +342,7 @@ var import_pisellList01 = __toESM(require("./components/pisellList01"));
 var import_section_footers = __toESM(require("./components/section-footers"));
 var import_productCard = __toESM(require("./components/productCard"));
 var import_collapse = __toESM(require("./components/collapse"));
+var import_pisellGoodPassCard = __toESM(require("./components/pisellGoodPassCard"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -441,6 +443,7 @@ var import_collapse = __toESM(require("./components/collapse"));
   PisellEmpty,
   PisellFloatingPanel,
   PisellFooter,
+  PisellGoodPassCard,
   PisellHeader,
   PisellHeaderProgressBar,
   PisellImageCarousels,

package/lib/locales/en-US.d.ts

@@ -117,9 +117,16 @@ declare const _default: {
     'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
-    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-edit': string;
+    'pisell-wallet-pass-card-name': string;
+    'pisell-wallet-pass-card-store-name': string;
     'pisell-wallet-pass-card-balance': string;
+    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-code': string;
     'pisell-wallet-pass-card-valid-to': string;
+    'pisell-wallet-pass-card-confirm': string;
+    'pisell-wallet-pass-card-cancel': string;
+    'pisell-wallet-pass-card-required': string;
     'pisell-wallet-pass-card-expireDate': string;
     'pisell-adjust-price-price-override': string;
     'pisell-adjust-price-discount': string;
@@ -220,7 +227,11 @@ declare const _default: {
     'pisell-lowcode-navigation-menu-add-page': string;
     'pisell-lowcode-navigation-menu-add-page-tip': string;
     'pisell-lowcode-navigation-menu-tag-base': string;
+    'pisell-lowcode-navigation-menu-tag-proCode': string;
     'pisell-lowcode-navigation-menu-tag-pisell1': string;
+    'pisell-lowcode-navigation-menu-tag-group': string;
+    'pisell-lowcode-navigation-menu-tag-sub-menu': string;
+    'pisell-lowcode-navigation-menu-tag-custom': string;
     'pisell-data-source-form-app-identifier-pattern': string;
     'pisell-data-source-form-app-identifier-start-with-letter': string;
     'pisell-group-permissions-rule-required': string;
@@ -259,5 +270,9 @@ declare const _default: {
     'pisell-login-and-register-register-button-text': string;
     'pisell-login-and-register-remember-me': string;
     'pisell-login-and-register-forgot-password': string;
+    'pisell2.text.goodpass.product-vouchers': string;
+    'pisell2.text.goodpass.last-settlement': string;
+    'pisell2.text.goodpass.view-more': string;
+    'pisell2.text.goodpass.save': string;
 };
 export default _default;

package/lib/locales/en-US.js

@@ -149,9 +149,16 @@ var en_US_default = {
   "pisell-information-entry-scan-exit": "Exit",
   // 钱包卡片组件
   "pisell-wallet-pass-card-detail": "Detail",
-  "pisell-wallet-pass-card-redeem": "Redeem",
+  "pisell-wallet-pass-card-edit": "Edit",
+  "pisell-wallet-pass-card-name": "Name",
+  "pisell-wallet-pass-card-store-name": "StoreName",
   "pisell-wallet-pass-card-balance": "Balance",
+  "pisell-wallet-pass-card-redeem": "Redeem",
+  "pisell-wallet-pass-card-code": "Code",
   "pisell-wallet-pass-card-valid-to": "Valid to",
+  "pisell-wallet-pass-card-confirm": "Confirm",
+  "pisell-wallet-pass-card-cancel": "Cancel",
+  "pisell-wallet-pass-card-required": "This field is required",
   "pisell-wallet-pass-card-expireDate": "Long term",
   // 金额修改组件
   "pisell-adjust-price-price-override": "Price override",
@@ -267,7 +274,11 @@ var en_US_default = {
   "pisell-lowcode-navigation-menu-add-page": "Add page",
   "pisell-lowcode-navigation-menu-add-page-tip": "No navigation found. Please add a submenu or page.",
   "pisell-lowcode-navigation-menu-tag-base": "Base",
+  "pisell-lowcode-navigation-menu-tag-proCode": "Pro code",
   "pisell-lowcode-navigation-menu-tag-pisell1": "Pisell 1.0",
+  "pisell-lowcode-navigation-menu-tag-group": "Group",
+  "pisell-lowcode-navigation-menu-tag-sub-menu": "Submenu",
+  "pisell-lowcode-navigation-menu-tag-custom": "Custom",
   // 应用标识符
   "pisell-data-source-form-app-identifier-pattern": "Can only contain lowercase letters, numbers, hyphens, dots, and underscores",
   "pisell-data-source-form-app-identifier-start-with-letter": "Must start with a letter",
@@ -310,5 +321,10 @@ var en_US_default = {
   "pisell-login-and-register-register-password-placeholder": "Create a password",
   "pisell-login-and-register-register-button-text": "Create account",
   "pisell-login-and-register-remember-me": "Remember me",
-  "pisell-login-and-register-forgot-password": "Forgot password?"
+  "pisell-login-and-register-forgot-password": "Forgot password?",
+  // 商品券组件
+  "pisell2.text.goodpass.product-vouchers": "Promotions & Vouchers",
+  "pisell2.text.goodpass.last-settlement": "(Last payment)",
+  "pisell2.text.goodpass.view-more": "View More",
+  "pisell2.text.goodpass.save": "Save"
 };

package/lib/locales/zh-CN.d.ts

@@ -117,9 +117,16 @@ declare const _default: {
     'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
-    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-edit': string;
+    'pisell-wallet-pass-card-name': string;
+    'pisell-wallet-pass-card-store-name': string;
     'pisell-wallet-pass-card-balance': string;
+    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-code': string;
     'pisell-wallet-pass-card-valid-to': string;
+    'pisell-wallet-pass-card-confirm': string;
+    'pisell-wallet-pass-card-cancel': string;
+    'pisell-wallet-pass-card-required': string;
     'pisell-wallet-pass-card-expireDate': string;
     'pisell-adjust-price-price-override': string;
     'pisell-adjust-price-discount': string;
@@ -219,7 +226,11 @@ declare const _default: {
     'pisell-lowcode-navigation-menu-add-page': string;
     'pisell-lowcode-navigation-menu-add-page-tip': string;
     'pisell-lowcode-navigation-menu-tag-base': string;
+    'pisell-lowcode-navigation-menu-tag-proCode': string;
     'pisell-lowcode-navigation-menu-tag-pisell1': string;
+    'pisell-lowcode-navigation-menu-tag-group': string;
+    'pisell-lowcode-navigation-menu-tag-sub-menu': string;
+    'pisell-lowcode-navigation-menu-tag-custom': string;
     'pisell-data-source-form-app-identifier-pattern': string;
     'pisell-data-source-form-app-identifier-start-with-letter': string;
     'pisell-data-source-form-app-identifier-special-ends': string;
@@ -254,5 +265,9 @@ declare const _default: {
     'pisell-login-and-register-register-button-text': string;
     'pisell-login-and-register-remember-me': string;
     'pisell-login-and-register-forgot-password': string;
+    'pisell2.text.goodpass.product-vouchers': string;
+    'pisell2.text.goodpass.last-settlement': string;
+    'pisell2.text.goodpass.view-more': string;
+    'pisell2.text.goodpass.save': string;
 };
 export default _default;

package/lib/locales/zh-CN.js

@@ -149,9 +149,16 @@ var zh_CN_default = {
   "pisell-information-entry-scan-exit": "退出",
   // 钱包卡片组件
   "pisell-wallet-pass-card-detail": "详情",
-  "pisell-wallet-pass-card-redeem": "兑换",
+  "pisell-wallet-pass-card-edit": "编辑",
+  "pisell-wallet-pass-card-name": "商品名称",
+  "pisell-wallet-pass-card-store-name": "共享店铺名称",
   "pisell-wallet-pass-card-balance": "余额",
+  "pisell-wallet-pass-card-redeem": "兑换",
+  "pisell-wallet-pass-card-code": "识别码编号",
   "pisell-wallet-pass-card-valid-to": "有效期至",
+  "pisell-wallet-pass-card-confirm": "确认",
+  "pisell-wallet-pass-card-cancel": "取消",
+  "pisell-wallet-pass-card-required": "此字段必填",
   "pisell-wallet-pass-card-expireDate": "长期",
   // 金额修改组件
   "pisell-adjust-price-price-override": "一口价",
@@ -264,7 +271,11 @@ var zh_CN_default = {
   "pisell-lowcode-navigation-menu-add-page": "添加页面",
   "pisell-lowcode-navigation-menu-add-page-tip": "没有找到导航，请添加子菜单或页面。",
   "pisell-lowcode-navigation-menu-tag-base": "基础",
+  "pisell-lowcode-navigation-menu-tag-proCode": "Pro code",
   "pisell-lowcode-navigation-menu-tag-pisell1": "Pisell 1.0",
+  "pisell-lowcode-navigation-menu-tag-group": "分组",
+  "pisell-lowcode-navigation-menu-tag-sub-menu": "子菜单",
+  "pisell-lowcode-navigation-menu-tag-custom": "自定义",
   // 应用标识符
   "pisell-data-source-form-app-identifier-pattern": "只能包含小写字母、数字、连字符、点和下划线",
   "pisell-data-source-form-app-identifier-start-with-letter": "必须以字母开头",
@@ -301,5 +312,10 @@ var zh_CN_default = {
   "pisell-login-and-register-register-password-placeholder": "创建密码",
   "pisell-login-and-register-register-button-text": "创建账户",
   "pisell-login-and-register-remember-me": "记住我",
-  "pisell-login-and-register-forgot-password": "忘记密码？"
+  "pisell-login-and-register-forgot-password": "忘记密码？",
+  // 商品券
+  "pisell2.text.goodpass.product-vouchers": "优惠促销",
+  "pisell2.text.goodpass.last-settlement": "(上次结算)",
+  "pisell2.text.goodpass.view-more": "查看更多",
+  "pisell2.text.goodpass.save": "节省"
 };

package/lib/locales/zh-TW.d.ts

@@ -117,9 +117,16 @@ declare const _default: {
     'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
-    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-edit': string;
+    'pisell-wallet-pass-card-name': string;
+    'pisell-wallet-pass-card-store-name': string;
     'pisell-wallet-pass-card-balance': string;
+    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-code': string;
     'pisell-wallet-pass-card-valid-to': string;
+    'pisell-wallet-pass-card-confirm': string;
+    'pisell-wallet-pass-card-cancel': string;
+    'pisell-wallet-pass-card-required': string;
     'pisell-wallet-pass-card-expireDate': string;
     'pisell-adjust-price-price-override': string;
     'pisell-adjust-price-discount': string;
@@ -219,7 +226,11 @@ declare const _default: {
     'pisell-lowcode-navigation-menu-add-page': string;
     'pisell-lowcode-navigation-menu-add-page-tip': string;
     'pisell-lowcode-navigation-menu-tag-base': string;
+    'pisell-lowcode-navigation-menu-tag-proCode': string;
     'pisell-lowcode-navigation-menu-tag-pisell1': string;
+    'pisell-lowcode-navigation-menu-tag-group': string;
+    'pisell-lowcode-navigation-menu-tag-sub-menu': string;
+    'pisell-lowcode-navigation-menu-tag-custom': string;
     'pisell-data-source-form-app-identifier-pattern': string;
     'pisell-data-source-form-app-identifier-start-with-letter': string;
     'pisell-data-source-form-app-identifier-special-ends': string;
@@ -254,5 +265,9 @@ declare const _default: {
     'pisell-login-and-register-register-button-text': string;
     'pisell-login-and-register-remember-me': string;
     'pisell-login-and-register-forgot-password': string;
+    'pisell2.text.goodpass.product-vouchers': string;
+    'pisell2.text.goodpass.last-settlement': string;
+    'pisell2.text.goodpass.view-more': string;
+    'pisell2.text.goodpass.save': string;
 };
 export default _default;

package/lib/locales/zh-TW.js

@@ -149,9 +149,16 @@ var zh_TW_default = {
   "pisell-information-entry-scan-exit": "退出",
   // 钱包卡片组件
   "pisell-wallet-pass-card-detail": "詳情",
-  "pisell-wallet-pass-card-redeem": "兌換",
+  "pisell-wallet-pass-card-edit": "編輯",
+  "pisell-wallet-pass-card-name": "商品名稱",
+  "pisell-wallet-pass-card-store-name": "共享店鋪名稱",
   "pisell-wallet-pass-card-balance": "餘額",
+  "pisell-wallet-pass-card-redeem": "兌換",
+  "pisell-wallet-pass-card-code": "識別碼編號",
   "pisell-wallet-pass-card-valid-to": "有效期至",
+  "pisell-wallet-pass-card-confirm": "確認",
+  "pisell-wallet-pass-card-cancel": "取消",
+  "pisell-wallet-pass-card-required": "此欄位為必填",
   "pisell-wallet-pass-card-expireDate": "長期",
   // 金额修改组件
   "pisell-adjust-price-price-override": "一口價",
@@ -266,7 +273,11 @@ var zh_TW_default = {
   "pisell-lowcode-navigation-menu-add-page": "添加頁面",
   "pisell-lowcode-navigation-menu-add-page-tip": "沒有找到導航, 請添加子菜單或頁面。",
   "pisell-lowcode-navigation-menu-tag-base": "基础",
+  "pisell-lowcode-navigation-menu-tag-proCode": "Pro code",
   "pisell-lowcode-navigation-menu-tag-pisell1": "Pisell 1.0",
+  "pisell-lowcode-navigation-menu-tag-group": "分組",
+  "pisell-lowcode-navigation-menu-tag-sub-menu": "子菜單",
+  "pisell-lowcode-navigation-menu-tag-custom": "自定義",
   // 应用标识符
   "pisell-data-source-form-app-identifier-pattern": "只能包含小寫字母、數字、連字符、點和下劃線",
   "pisell-data-source-form-app-identifier-start-with-letter": "必須以字母開頭",
@@ -303,5 +314,9 @@ var zh_TW_default = {
   "pisell-login-and-register-register-password-placeholder": "創建密碼",
   "pisell-login-and-register-register-button-text": "創建帳戶",
   "pisell-login-and-register-remember-me": "記住我",
-  "pisell-login-and-register-forgot-password": "忘記密碼？"
+  "pisell-login-and-register-forgot-password": "忘記密碼？",
+  "pisell2.text.goodpass.product-vouchers": "優惠促銷",
+  "pisell2.text.goodpass.last-settlement": "(上次結算)",
+  "pisell2.text.goodpass.view-more": "查看更多",
+  "pisell2.text.goodpass.save": "節省"
 };

package/lowcode/_setters/antd-icon-setter/index.tsx

@@ -226,11 +226,12 @@ const AntdIconSetter = (props: AntdIconSetterProps) => {
       <Balloon
         className="lc-antd-icon-setter-balloon"
         trigger={triggerNode}
-        needAdjust
+        autoAdjust
         triggerType="click"
         closable={false}
         alignEdge
-        align="lt"
+        align="l"
+        v2
         style={{ width: 300 }}
       >
         <div className="lc-antd-icon-setter-header">

package/lowcode/div/meta.ts

@@ -8,7 +8,7 @@ const DivMeta: ComponentMetadata = {
   devMode: "proCode",
   npm: {
     package: "@pisell/materials",
-    version: "1.0.3",
+    version: "1.0.4",
     exportName: "Div",
     main: "src/index.tsx",
     destructuring: true,
@@ -16,27 +16,62 @@ const DivMeta: ComponentMetadata = {
   },
   props: [
     {
-      title: "others",
-      name: "others",
-      setter: ["JsonSetter","VariableSetter"],
+      title: "基础类名",
+      name: "baseClassName",
+      propType: "string",
+      setter: ["StringSetter", "VariableSetter"]
+    },
+    {
+      title: "自定义类名",
+      name: "className",
+      propType: "string",
+      setter: ["StringSetter", "VariableSetter"]
+    },
+    {
+      title: "渲染内容",
+      name: "render",
+      propType: "func",
+      setter: [
+        {
+          componentName: "FunctionSetter",
+        },
+        "VariableSetter",
+      ],
     },
+    {
+      title: "其他属性",
+      name: "others",
+      propType: "object",
+      setter: ["JsonSetter", "VariableSetter"]
+    }
   ],
   configure: {
     supports: {
       style: true,
+      className: true,
       events: [
         {
           name: "onClick",
           template:
             "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
         },
+        {
+          name: "onMouseEnter",
+          template: "onMouseEnter(event){\n// 鼠标进入时的回调\n}",
+        },
+        {
+          name: "onMouseLeave",
+          template: "onMouseLeave(event){\n// 鼠标离开时的回调\n}",
+        },
       ],
+      loop: true,
     },
     component: {
       isContainer: true,
     },
   },
 };
+
 const snippets: Snippet[] = [
   {
     title: "Div",