@pisell/private-materials 6.3.54 → 6.3.56

package/lib/components/walletList/tempHolderSelector/index.js

@@ -0,0 +1,166 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/walletList/tempHolderSelector/index.tsx
+var tempHolderSelector_exports = {};
+__export(tempHolderSelector_exports, {
+  default: () => TempHolderSelector,
+  getAvatarText: () => getAvatarText
+});
+module.exports = __toCommonJS(tempHolderSelector_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_ahooks = require("ahooks");
+var import_materials2 = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_serve = require("../serve");
+var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
+var import_index = require("./index.less");
+var ACol = import_antd.Col;
+var ARow = import_antd.Row;
+var getAvatarText = (name) => {
+  if (!name) return "";
+  const words = name.trim().split(/\s+/);
+  const initials = words.slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+  return initials;
+};
+function TempHolderSelector(props) {
+  var _a;
+  const [value, setValue] = (0, import_react.useState)(props.value);
+  const { visible, onCancel, onConfirm, confirmLoading } = props;
+  const context = (0, import_useEngineContext.default)();
+  const _getHolderList = (0, import_ahooks.useRequest)(import_serve.getHolderList, {
+    defaultParams: [
+      {
+        skip: 1,
+        num: 100,
+        form_id: props.formId,
+        customer_id: props.customerId
+      }
+    ],
+    onSuccess: (res) => {
+      if (Array.isArray(res.list) && res.list.length > 0) {
+        setValue(res.list[0].form_record_id);
+      }
+    }
+  });
+  const onAddHolder = async () => {
+    var _a2, _b, _c, _d, _e, _f;
+    let _formForFilling = props.formId;
+    const { data: formConfig } = await (0, import_serve.getFormConfig)(props.formId);
+    if (((_a2 = formConfig == null ? void 0 : formConfig.form) == null ? void 0 : _a2.form_type) === "minors" && Array.isArray(formConfig == null ? void 0 : formConfig.field)) {
+      const detail = (_b = formConfig == null ? void 0 : formConfig.field) == null ? void 0 : _b.find(
+        (item) => item.filed_type === "form_to_form" && item.status === "hide"
+      );
+      if (detail) {
+        _formForFilling = (_c = detail == null ? void 0 : detail.setting) == null ? void 0 : _c.linkedTable;
+      }
+    }
+    (_f = (_e = (_d = context == null ? void 0 : context.appHelper) == null ? void 0 : _d.utils) == null ? void 0 : _e.action) == null ? void 0 : _f.call(_e, {
+      type: "pisell1.form",
+      data: {
+        form_id: _formForFilling,
+        form_title: import_utils.locales.getText("page.wallet.tempHolderSelector.create"),
+        isV2API: true
+      },
+      callback: (res) => {
+        if ((res == null ? void 0 : res.status) === "success") {
+          if (_formForFilling !== props.formId) {
+            _getHolderList.refresh();
+          } else {
+            _getHolderList.mutate((prev) => ({
+              ...prev,
+              list: [res.values, ...prev.list]
+            }));
+            setValue(res.values.form_record_id);
+          }
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_materials2.PisellModal,
+    {
+      title: import_utils.locales.getText("page.wallet.tempHolderSelector.title"),
+      platform: (0, import_utils.isMobile)() ? "h5" : "pc",
+      visible,
+      onClose: onCancel,
+      onOk: () => {
+      },
+      onCancel,
+      footer: /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          type: "primary",
+          block: true,
+          onClick: () => {
+            onConfirm(value);
+          },
+          disabled: !value,
+          loading: confirmLoading
+        },
+        import_utils.locales.getText("page.wallet.tempHolderSelector.confirm")
+      ),
+      width: 640,
+      bodyStyle: { padding: 0 },
+      headerDivider: false,
+      destroyOnClose: true,
+      className: "temp-holder-selector-modal"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_materials.Spin, { spinning: _getHolderList.loading }, /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-content" }, /* @__PURE__ */ import_react.default.createElement(ARow, { gutter: [16, 16] }, /* @__PURE__ */ import_react.default.createElement(ACol, { span: 8, xs: { span: 12 }, sm: { span: 8 } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "temp-holder-selector-block temp-holder-selector-block-create",
+        onClick: onAddHolder
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-avatar" }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { useTextAvatar: true, size: "xxl" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-plus", style: { fontSize: "24px" } }))),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-name" }, import_utils.locales.getText("page.wallet.tempHolderSelector.create"))
+    ))), Array.isArray((_a = _getHolderList.data) == null ? void 0 : _a.list) && _getHolderList.data.list.map((item) => /* @__PURE__ */ import_react.default.createElement(ACol, { span: 8, xs: { span: 12 }, sm: { span: 8 }, key: item.id }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `temp-holder-selector-block-wrapper ${value === item.form_record_id ? "temp-holder-selector-block-wrapper-active" : ""}`
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "temp-holder-selector-block",
+          onClick: () => {
+            setValue(item.form_record_id);
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-avatar" }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { useTextAvatar: true, size: "xxl" }, getAvatarText(item.main_field))),
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-name" }, item.main_field)
+      )
+    ))))))
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getAvatarText
+});

package/lib/components/walletList/tempHolderSelector/index.less

@@ -0,0 +1,63 @@
+.temp-holder-selector-content {
+  padding: 16px;
+}
+
+.temp-holder-selector-block-wrapper {
+  border: 2px solid transparent;
+  border-radius: 8px;
+  height: 100%;
+  transition: all 0.2s ease;
+
+  &-active {
+    border-color: var(--theme-color, #7f56d9);
+    
+    .temp-holder-selector-block {
+      border-color: transparent;
+    }
+  }
+}
+
+.temp-holder-selector-block {
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #eaecf0;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: center;
+  height: 100%;
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--Gray-50, #f9fafb);
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  }
+
+  &-avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  &-plus {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    border: 2px dashed #d9d9d9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: #999;
+    background: #fafafa;
+  }
+
+  &-name {
+    font-size: 14px;
+    color: #333;
+    word-break: break-all;
+    line-height: 1.5;
+    font-weight: bold;
+  }
+}

package/lib/index.d.ts

@@ -22,7 +22,6 @@ export { default as TaxSelect } from './components/taxSelect';
 export { default as EftposPay } from './components/eftposPay';
 export { default as ToCPay } from './components/pay/toC';
 export { default as Eftpos } from './components/eftpos';
-export { default as Wallet } from './components/wallet';
 export { default as WalletList } from './components/walletList';
 export { default as BookingDashboard } from './components/booking/dashboard';
 export { default as PisellSelectCustomerModal } from './components/pisellSelectCustomerModal';
@@ -58,3 +57,5 @@ export { Login2, Register2, AuthModal } from './pro/Login2.0';
 export { default as WalletEditor } from './plus/walletEditor';
 export { default as WalletPassGallery } from './plus/walletPassGallery';
 export { default as WalletPassDetail } from './plus/walletPassGallery/components/passDetail';
+export { default as SelectHolder } from './plus/selectHolder';
+export { default as HolderList } from './plus/selectHolder/components/HolderList';

package/lib/index.js

@@ -64,6 +64,7 @@ __export(src_exports, {
   EventScheduleCalendar: () => import_scheduleCalendar.default,
   EventSelectHolder: () => import_selectHolder.default,
   EventTimeResourceSelector: () => import_timeResourceSelector.default,
+  HolderList: () => import_HolderList.default,
   Login: () => import_login.default,
   Login2: () => import_Login2.Login2,
   OAuthConfig: () => import_admin.OAuthConfig,
@@ -82,6 +83,7 @@ __export(src_exports, {
   SaasLogin: () => import_saasLogin.default,
   SaasRegister: () => import_saasRegister.default,
   Schedules: () => import_schedules.default,
+  SelectHolder: () => import_selectHolder2.default,
   ShoppingCart: () => import_shoppingCart.default,
   StepController: () => import_stepController.default,
   SubTotal: () => import_subTotal.default,
@@ -90,7 +92,6 @@ __export(src_exports, {
   ToCPay: () => import_toC.default,
   VerticalAddService: () => import_addServiceVariant.default,
   VerticalClient: () => import_clientVariant.VerticalClient,
-  Wallet: () => import_wallet.default,
   WalletEditor: () => import_walletEditor.default,
   WalletList: () => import_walletList.default,
   WalletPassDetail: () => import_passDetail.default,
@@ -125,7 +126,6 @@ var import_taxSelect = __toESM(require("./components/taxSelect"));
 var import_eftposPay = __toESM(require("./components/eftposPay"));
 var import_toC = __toESM(require("./components/pay/toC"));
 var import_eftpos = __toESM(require("./components/eftpos"));
-var import_wallet = __toESM(require("./components/wallet"));
 var import_walletList = __toESM(require("./components/walletList"));
 var import_dashboard = __toESM(require("./components/booking/dashboard"));
 var import_pisellSelectCustomerModal = __toESM(require("./components/pisellSelectCustomerModal"));
@@ -160,6 +160,8 @@ var import_Login2 = require("./pro/Login2.0");
 var import_walletEditor = __toESM(require("./plus/walletEditor"));
 var import_walletPassGallery = __toESM(require("./plus/walletPassGallery"));
 var import_passDetail = __toESM(require("./plus/walletPassGallery/components/passDetail"));
+var import_selectHolder2 = __toESM(require("./plus/selectHolder"));
+var import_HolderList = __toESM(require("./plus/selectHolder/components/HolderList"));
 import_dayjs.default.extend(import_weekday.default);
 import_dayjs.default.extend(import_localeData.default);
 // Annotate the CommonJS export names for ESM import in node:
@@ -199,6 +201,7 @@ import_dayjs.default.extend(import_localeData.default);
   EventScheduleCalendar,
   EventSelectHolder,
   EventTimeResourceSelector,
+  HolderList,
   Login,
   Login2,
   OAuthConfig,
@@ -217,6 +220,7 @@ import_dayjs.default.extend(import_localeData.default);
   SaasLogin,
   SaasRegister,
   Schedules,
+  SelectHolder,
   ShoppingCart,
   StepController,
   SubTotal,
@@ -225,7 +229,6 @@ import_dayjs.default.extend(import_localeData.default);
   ToCPay,
   VerticalAddService,
   VerticalClient,
-  Wallet,
   WalletEditor,
   WalletList,
   WalletPassDetail,

package/lib/plus/clientName/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 import { IClientNameProps } from './type';
 declare const ClientName: ({ className, dataSource, style }: IClientNameProps) => JSX.Element | null;

package/lib/plus/selectHolder/components/ErrorTip/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const ErrorTip: ({ text }: any) => JSX.Element;
+export default ErrorTip;

package/lib/{components/wallet/PointCard/model.js → plus/selectHolder/components/ErrorTip/index.js}

@@ -16,28 +16,15 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/wallet/PointCard/model.tsx
-var model_exports = {};
-__export(model_exports, {
-  Context: () => Context,
-  Provider: () => Provider
+// src/plus/selectHolder/components/ErrorTip/index.tsx
+var ErrorTip_exports = {};
+__export(ErrorTip_exports, {
+  default: () => ErrorTip_default
 });
-module.exports = __toCommonJS(model_exports);
-var import_utils = require("@pisell/utils");
-var defaultState = {
-  total: 0
+module.exports = __toCommonJS(ErrorTip_exports);
+var import_materials = require("@pisell/materials");
+var import_index = require("./index.less");
+var ErrorTip = ({ text }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "event-booking-error-tip" }, /* @__PURE__ */ React.createElement("div", { className: "error-icon-wrapper" }, /* @__PURE__ */ React.createElement(import_materials.Iconfont, { type: "pisell2-alert-circle", className: "icon-warning" })), /* @__PURE__ */ React.createElement("span", null, text));
 };
-var { Provider, Context } = (0, import_utils.miniRedux)({
-  namespace: "state",
-  state: defaultState,
-  reducers: {
-    setState(state, payload) {
-      return { ...state, ...payload };
-    }
-  }
-});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Context,
-  Provider
-});
+var ErrorTip_default = ErrorTip;

package/lib/plus/selectHolder/components/ErrorTip/index.less

@@ -0,0 +1,51 @@
+.event-booking-error-tip {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  padding: 6px 16px 6px 6px;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 12px;
+  border: 1px solid var(--Error-300, #fda29b);
+  background: var(--Error-25, #fffbfa);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  color: var(--Error-700, #b42318);
+  font-size: 14px;
+  font-weight: 600;
+
+  .error-icon-wrapper {
+    position: relative;
+    width: 38px;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      border: 2px solid var(--Error-600, #d92d20);
+      opacity: 0.1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid var(--Error-600, #d92d20);
+      opacity: 0.3;
+    }
+
+    .icon-warning {
+      position: relative;
+      z-index: 1;
+      font-size: 20px;
+      color: #ff4d4f;
+    }
+  }
+}

package/lib/plus/selectHolder/components/HolderItem/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HolderItemProps } from '../../types';
+import './index.less';
+export declare const PREFIX = "pisell-lowcode-holder-item";
+declare const HolderItem: React.FC<HolderItemProps>;
+export default HolderItem;

package/lib/plus/selectHolder/components/HolderItem/index.js

@@ -0,0 +1,101 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/selectHolder/components/HolderItem/index.tsx
+var HolderItem_exports = {};
+__export(HolderItem_exports, {
+  PREFIX: () => PREFIX,
+  default: () => HolderItem_default
+});
+module.exports = __toCommonJS(HolderItem_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("../../utils");
+var import_index = require("./index.less");
+var PREFIX = "pisell-lowcode-holder-item";
+var HolderItem = ({
+  item,
+  displayConfig,
+  value,
+  isAddItem
+}) => {
+  const {
+    showAvatar = true,
+    showTitle = true,
+    showSubtitle = false,
+    selectType = "single",
+    direction = "vertical",
+    showExtraFields = false,
+    extraFields = []
+  } = displayConfig || {};
+  const isSelected = (0, import_react.useMemo)(() => {
+    if (!(value == null ? void 0 : value.length) || !(item == null ? void 0 : item.value)) return false;
+    return value.includes(item.value);
+  }, [value, item == null ? void 0 : item.value]);
+  const extraFieldsCom = (0, import_react.useMemo)(() => {
+    if (!showExtraFields || !(extraFields == null ? void 0 : extraFields.length)) return null;
+    return extraFields.map((field) => {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-extra-field` }, (field == null ? void 0 : field.isShowLabel) && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-extra-field-label` }, field.label, ":"), (field == null ? void 0 : field.isShowValue) && (field == null ? void 0 : field.value) && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-extra-field-value` }, item == null ? void 0 : item[field.value]));
+    });
+  }, [showExtraFields, extraFields, item]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `${PREFIX}-wrap ${isSelected ? `${PREFIX}-wrap-selected` : ""}`
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_materials.PisellCard, { padding: 20, selected: isSelected }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${PREFIX}-card ${direction === "horizontal" ? `${PREFIX}-card-horizontal` : ""}`
+      },
+      showAvatar ? /* @__PURE__ */ import_react.default.createElement(
+        import_materials.PisellAvatar,
+        {
+          src: item == null ? void 0 : item.avatar,
+          useTextAvatar: !(item == null ? void 0 : item.avatar) && !isAddItem,
+          className: `${isAddItem ? `${PREFIX}-add-avatar` : ""}`,
+          size: "xxl"
+        },
+        (0, import_utils.getAvatarText)(item.label)
+      ) : null,
+      (showTitle || showSubtitle) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-info` }, showTitle && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-name` }, item.label), showSubtitle && item.subtitle && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-subtitle` }, item.subtitle), extraFieldsCom),
+      selectType === "multiple" && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${PREFIX}-check-icon ${isSelected ? `${PREFIX}-check-icon-selected` : ""}`
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "CheckCircleFilled" })
+      )
+    ))
+  );
+};
+var HolderItem_default = HolderItem;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PREFIX
+});

package/lib/plus/selectHolder/components/HolderItem/index.less

@@ -0,0 +1,105 @@
+.pisell-lowcode-holder-item {
+  &-wrap {
+    height: 100%;
+    border: 1px solid transparent;
+
+    .pisell-lowcode-card-body {
+      height: 100%;
+      position: relative;
+    }
+  }
+
+  &-wrap-selected {
+    border: none;
+  }
+
+  &-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 100%;
+    color: var(--Text-Text_1, #1b1b1b);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    width: 100%;
+    text-align: center;
+
+    // 确保头像不变形
+    .pisell-lowcode-avatar {
+      flex-shrink: 0;
+    }
+  }
+
+  &-add-avatar {
+    background: #f4ebff !important;
+  }
+
+  &-card-horizontal {
+    flex-direction: row;
+    gap: 20px;
+
+    .pisell-lowcode-holder-item-info {
+      align-items: flex-start;
+      text-align: left;
+      flex: 1;
+    }
+  }
+
+  &-check-icon {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    color: #d0d5dd;
+    font-size: 14px;
+  }
+
+  &-check-icon-selected {
+    color: #7f56d9;
+  }
+
+  &-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    color: #1b1b1b;
+    font-size: 14px;
+    font-weight: 400;
+    word-wrap: break-word;
+  }
+
+  &-name {
+    width: 100%;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
+
+  &-subtitle {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
+
+  &-extra-field {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}

package/lib/plus/selectHolder/components/HolderList/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { HolderOption, HolderDisplayProps } from '../../types';
+export interface HolderListProps {
+    /** 选项数据源 */
+    dataSource?: HolderOption[];
+    /** 当前选中的值数组 */
+    selectedValues?: any[];
+    /** 显示配置 */
+    displayConfig?: HolderDisplayProps;
+    /** 渲染添加项的函数 */
+    renderAddItem?: () => React.ReactNode;
+    /** 列数 */
+    columns?: number;
+    /** 水平间距 */
+    horizontalGap?: number;
+    /** 垂直间距 */
+    verticalGap?: number;
+    /** 是否允许添加 */
+    allowAdd?: boolean;
+    /** 点击事件处理函数 */
+    onClick?: (item: HolderOption) => void;
+}
+/**
+ * @title: HolderList 选项列表组件
+ * @description: 抽离的选项列表组件，可以在 Modal 外部独立使用
+ * @Author: WangHan
+ * @Date: 2025-01-XX
+ */
+declare const HolderList: React.FC<HolderListProps>;
+export default HolderList;