@yoka-ui/ui 1.0.1

package/dist/lib/layout/YkContainer/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layout/YkContainer/index.tsx"],
+  "sourcesContent": ["import classNames from 'classnames';\nimport React from 'react';\n\nexport type YkContainerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n  /** 页头左侧标题，字号 18px、颜色 #3b82fe；存在 `headerLeft` 时不展示 */\n  title?: React.ReactNode;\n  /** 自定义页头左侧，优先级高于 `title` */\n  headerLeft?: React.ReactNode;\n  /** 页头右侧插槽 */\n  headerRight?: React.ReactNode;\n  /** 是否展示页头，默认 true */\n  showHeader?: boolean;\n};\n\nconst headerBarStyle: React.CSSProperties = {\n  position: 'sticky',\n  top: 0,\n  zIndex: 10,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 12,\n  minHeight: 60,\n  padding: '10px 20px',\n  boxSizing: 'border-box',\n  background: '#fff',\n};\n\nconst titleStyle: React.CSSProperties = {\n  margin: 0,\n  fontSize: 18,\n  fontWeight: 600,\n  lineHeight: '24px',\n  color: '#3b82fe',\n};\n\n/**\n * 页面内容区布局容器（语义上类似 Pro PageContainer 的内容包裹层）：\n * 顶部可选固定（sticky）页头，左右插槽；下方区域左右与底部留白 10px、顶部与页头间距 10px；\n * 子元素纵向排列，间距 10px。\n */\nconst YkContainer = React.forwardRef<HTMLDivElement, YkContainerProps>(\n  ({ className, style, children, title, headerLeft, headerRight, showHeader = true, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={classNames('yoka-container', className)}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 10,\n        padding: '0 10px 10px',\n        boxSizing: 'border-box',\n        ...style,\n      }}\n      {...rest}\n    >\n      {showHeader ? (\n        <header style={headerBarStyle} className=\"yoka-yk-container-header\">\n          <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>\n            {headerLeft !== undefined && headerLeft !== null ? (\n              headerLeft\n            ) : title != null && title !== '' ? (\n              <div style={titleStyle}>{title}</div>\n            ) : null}\n          </div>\n          {headerRight ? (\n            <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>{headerRight}</div>\n          ) : null}\n        </header>\n      ) : null}\n      {children}\n    </div>\n  ),\n);\n\nYkContainer.displayName = 'YkContainer';\n\nexport default YkContainer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,mBAAkB;AAalB,IAAM,iBAAsC;AAAA,EAC1C,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,WAAW;AAAA,EACX,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AACd;AAEA,IAAM,aAAkC;AAAA,EACtC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AACT;AAOA,IAAM,cAAc,aAAAA,QAAM;AAAA,EACxB,CAAC,EAAE,WAAW,OAAO,UAAU,OAAO,YAAY,aAAa,aAAa,MAAM,GAAG,KAAK,GAAG,QAC3F,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,kBAAAC,SAAW,kBAAkB,SAAS;AAAA,MACjD,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,IAEH,aACC,6BAAAD,QAAA,cAAC,YAAO,OAAO,gBAAgB,WAAU,8BACvC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,QAAQ,YAAY,SAAS,KACvE,eAAe,UAAa,eAAe,OAC1C,aACE,SAAS,QAAQ,UAAU,KAC7B,6BAAAA,QAAA,cAAC,SAAI,OAAO,cAAa,KAAM,IAC7B,IACN,GACC,cACC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,YAAY,GAAG,SAAS,QAAQ,YAAY,SAAS,KAAI,WAAY,IACjF,IACN,IACE;AAAA,IACH;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;",
+  "names": ["React", "classNames"]
+}

package/dist/lib/layout/YkDrawer/index.d.ts

@@ -0,0 +1,22 @@
+import { DrawerProps } from 'antd';
+import React from 'react';
+/** 预设尺寸（px）：左右抽屉为 `width`，上下抽屉为 `height` */
+export declare const YK_DRAWER_SIZE_PX: {
+    readonly small: 378;
+    readonly medium: 550;
+    readonly large: 736;
+    readonly xlarge: 1000;
+};
+export type YkDrawerSize = keyof typeof YK_DRAWER_SIZE_PX;
+export type YkDrawerMaskEffect = 'blur' | 'dimmed' | 'none';
+export type YkDrawerPlacement = NonNullable<DrawerProps['placement']>;
+export type YkDrawerProps = Omit<DrawerProps, 'size'> & {
+    /** 预设宽高；不配 `width`/`height` 时按 `placement` 自动套用 */
+    drawerSize?: YkDrawerSize;
+    /** 遮罩：`blur` 毛玻璃+浅遮罩，`dimmed` 默认变暗，`none` 透明（仍拦截点击背后） */
+    maskEffect?: YkDrawerMaskEffect;
+    /** 是否展示外侧关闭标签（参考 DrawerPageInfo），默认 true；仅 **left/right** 生效，top/bottom 不展示外侧钮、使用 antd 默认关闭；为 true 且为左右抽屉时关闭内置标题栏关闭钮 */
+    showOuterClose?: boolean;
+};
+declare const _default: React.NamedExoticComponent<YkDrawerProps>;
+export default _default;

package/dist/lib/layout/YkDrawer/index.js

@@ -0,0 +1,152 @@
+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/layout/YkDrawer/index.tsx
+var YkDrawer_exports = {};
+__export(YkDrawer_exports, {
+  YK_DRAWER_SIZE_PX: () => YK_DRAWER_SIZE_PX,
+  default: () => YkDrawer_default
+});
+module.exports = __toCommonJS(YkDrawer_exports);
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_index_module = __toESM(require("./index.module.less"));
+var YK_DRAWER_SIZE_PX = {
+  small: 378,
+  medium: 550,
+  large: 736,
+  xlarge: 1e3
+};
+var MASK_BASE = {
+  blur: {
+    background: "rgba(0, 0, 0, 0.28)",
+    backdropFilter: "blur(6px)",
+    WebkitBackdropFilter: "blur(6px)"
+  },
+  dimmed: {},
+  none: {
+    background: "transparent",
+    backdropFilter: "none",
+    WebkitBackdropFilter: "none"
+  }
+};
+function resolveDimension(placement, drawerSize, widthProp, heightProp) {
+  const preset = drawerSize ? YK_DRAWER_SIZE_PX[drawerSize] : void 0;
+  const vertical = placement === "top" || placement === "bottom";
+  return {
+    width: widthProp ?? (vertical ? void 0 : preset ?? YK_DRAWER_SIZE_PX.medium),
+    height: heightProp ?? (vertical ? preset ?? YK_DRAWER_SIZE_PX.medium : void 0)
+  };
+}
+var YkDrawer = ({
+  drawerSize = "medium",
+  maskEffect = "dimmed",
+  placement = "right",
+  showOuterClose = true,
+  extra,
+  styles: userStyles,
+  className,
+  rootClassName,
+  closable,
+  mask = true,
+  /** 默认 false：点击遮罩不关闭（与 DrawerPageInfo 一致）；需要时点遮罩关闭请传 `true` */
+  maskClosable = false,
+  width: widthProp,
+  height: heightProp,
+  onClose,
+  ...rest
+}) => {
+  const { width, height } = resolveDimension(placement, drawerSize, widthProp, heightProp);
+  const maskStyle = {
+    ...MASK_BASE[maskEffect],
+    ...userStyles == null ? void 0 : userStyles.mask
+  };
+  const handleExtraKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClose == null ? void 0 : onClose(e);
+      }
+    },
+    [onClose]
+  );
+  const isVerticalPlacement = placement === "top" || placement === "bottom";
+  const showOuterCloseEffective = showOuterClose && !isVerticalPlacement;
+  const outerClose = showOuterCloseEffective ? /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(import_index_module.default.extraClose, import_index_module.default[`extraClose--${placement}`]),
+      onClick: (e) => onClose == null ? void 0 : onClose(e),
+      onKeyDown: handleExtraKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "关闭"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null)
+  ) : null;
+  const mergedExtra = showOuterCloseEffective ? /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.extraWrap }, extra, outerClose) : extra;
+  const mergedClosable = showOuterCloseEffective ? false : isVerticalPlacement ? closable === false ? false : { placement: "end", ...closable === true || closable === void 0 ? {} : closable } : closable;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.ConfigProvider,
+    {
+      theme: {
+        token: {
+          borderRadius: 2
+        }
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Drawer,
+      {
+        placement,
+        width,
+        height,
+        mask,
+        maskClosable,
+        closable: mergedClosable,
+        extra: mergedExtra,
+        onClose,
+        styles: {
+          ...userStyles,
+          mask: maskStyle
+        },
+        className,
+        rootClassName: (0, import_classnames.default)(showOuterCloseEffective && import_index_module.default.drawerRootHideBuiltinClose, rootClassName),
+        ...rest
+      }
+    )
+  );
+};
+var YkDrawer_default = import_react.default.memo(YkDrawer);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  YK_DRAWER_SIZE_PX
+});
+//# sourceMappingURL=index.js.map

package/dist/lib/layout/YkDrawer/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layout/YkDrawer/index.tsx"],
+  "sourcesContent": ["import { CloseOutlined } from '@ant-design/icons';\nimport { ConfigProvider, Drawer, DrawerProps } from 'antd';\nimport classNames from 'classnames';\nimport React, { useCallback } from 'react';\nimport styles from './index.module.less';\n\n/** 预设尺寸（px）：左右抽屉为 `width`，上下抽屉为 `height` */\nexport const YK_DRAWER_SIZE_PX = {\n  small: 378,\n  medium: 550,\n  large: 736,\n  xlarge: 1000,\n} as const;\n\nexport type YkDrawerSize = keyof typeof YK_DRAWER_SIZE_PX;\n\nexport type YkDrawerMaskEffect = 'blur' | 'dimmed' | 'none';\n\nexport type YkDrawerPlacement = NonNullable<DrawerProps['placement']>;\n\nexport type YkDrawerProps = Omit<DrawerProps, 'size'> & {\n  /** 预设宽高；不配 `width`/`height` 时按 `placement` 自动套用 */\n  drawerSize?: YkDrawerSize;\n  /** 遮罩：`blur` 毛玻璃+浅遮罩，`dimmed` 默认变暗，`none` 透明（仍拦截点击背后） */\n  maskEffect?: YkDrawerMaskEffect;\n  /** 是否展示外侧关闭标签（参考 DrawerPageInfo），默认 true；仅 **left/right** 生效，top/bottom 不展示外侧钮、使用 antd 默认关闭；为 true 且为左右抽屉时关闭内置标题栏关闭钮 */\n  showOuterClose?: boolean;\n};\n\nconst MASK_BASE: Record<YkDrawerMaskEffect, React.CSSProperties> = {\n  blur: {\n    background: 'rgba(0, 0, 0, 0.28)',\n    backdropFilter: 'blur(6px)',\n    WebkitBackdropFilter: 'blur(6px)',\n  },\n  dimmed: {},\n  none: {\n    background: 'transparent',\n    backdropFilter: 'none',\n    WebkitBackdropFilter: 'none',\n  },\n};\n\nfunction resolveDimension(\n  placement: YkDrawerPlacement,\n  drawerSize: YkDrawerSize | undefined,\n  widthProp: DrawerProps['width'],\n  heightProp: DrawerProps['height'],\n): Pick<DrawerProps, 'width' | 'height'> {\n  const preset = drawerSize ? YK_DRAWER_SIZE_PX[drawerSize] : undefined;\n  const vertical = placement === 'top' || placement === 'bottom';\n  return {\n    width: widthProp ?? (vertical ? undefined : (preset ?? YK_DRAWER_SIZE_PX.medium)),\n    height: heightProp ?? (vertical ? (preset ?? YK_DRAWER_SIZE_PX.medium) : undefined),\n  };\n}\n\nconst YkDrawer: React.FC<YkDrawerProps> = ({\n  drawerSize = 'medium',\n  maskEffect = 'dimmed',\n  placement = 'right',\n  showOuterClose = true,\n  extra,\n  styles: userStyles,\n  className,\n  rootClassName,\n  closable,\n  mask = true,\n  /** 默认 false：点击遮罩不关闭（与 DrawerPageInfo 一致）；需要时点遮罩关闭请传 `true` */\n  maskClosable = false,\n  width: widthProp,\n  height: heightProp,\n  onClose,\n  ...rest\n}) => {\n  const { width, height } = resolveDimension(placement, drawerSize, widthProp, heightProp);\n\n  const maskStyle: React.CSSProperties = {\n    ...MASK_BASE[maskEffect],\n    ...userStyles?.mask,\n  };\n\n  const handleExtraKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onClose?.(e);\n      }\n    },\n    [onClose],\n  );\n\n  const isVerticalPlacement = placement === 'top' || placement === 'bottom';\n  /** 外侧关闭条仅在左右抽屉展示 */\n  const showOuterCloseEffective = showOuterClose && !isVerticalPlacement;\n\n  const outerClose = showOuterCloseEffective ? (\n    <div\n      className={classNames(styles.extraClose, styles[`extraClose--${placement}`])}\n      onClick={(e) => onClose?.(e)}\n      onKeyDown={handleExtraKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-label=\"关闭\"\n    >\n      <CloseOutlined />\n    </div>\n  ) : null;\n\n  const mergedExtra = showOuterCloseEffective ? (\n    <div className={styles.extraWrap}>\n      {extra}\n      {outerClose}\n    </div>\n  ) : (\n    extra\n  );\n\n  /** top/bottom：内置关闭钮默认在标题栏右侧（antd `closable.placement: 'end'`） */\n  const mergedClosable: DrawerProps['closable'] = showOuterCloseEffective\n    ? false\n    : isVerticalPlacement\n      ? closable === false\n        ? false\n        : { placement: 'end', ...(closable === true || closable === undefined ? {} : closable) }\n      : closable;\n\n  return (\n    <ConfigProvider\n      theme={{\n        token: {\n          borderRadius: 2,\n        },\n      }}\n    >\n      <Drawer\n        placement={placement}\n        width={width}\n        height={height}\n        mask={mask}\n        maskClosable={maskClosable}\n        closable={mergedClosable}\n        extra={mergedExtra}\n        onClose={onClose}\n        styles={{\n          ...userStyles,\n          mask: maskStyle,\n        }}\n        className={className}\n        rootClassName={classNames(showOuterCloseEffective && styles.drawerRootHideBuiltinClose, rootClassName)}\n        {...rest}\n      />\n    </ConfigProvider>\n  );\n};\n\nexport default React.memo(YkDrawer);\n"],
+  "mappings": "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",
+  "names": ["React", "classNames", "styles"]
+}

package/dist/lib/layout/YkDrawer/index.module.less

@@ -0,0 +1,45 @@
+/* 外侧关闭标签（与 DrawerPageInfo 视觉一致，按 placement 调整位置） */
+.extraWrap {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.extraClose {
+  position: absolute;
+  z-index: 1;
+  width: 45px;
+  height: 40px;
+  color: #fff;
+  line-height: 40px;
+  text-align: center;
+  background: rgb(59, 134, 249);
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+}
+
+/* 抽屉在右侧：标签向左伸出 */
+.extraClose--right {
+  top: 5px;
+  left: -45px;
+  border-radius: 8px 0 0 8px;
+}
+
+/* 抽屉在左侧：标签向右伸出 */
+.extraClose--left {
+  top: 5px;
+  right: -45px;
+  left: auto;
+  border-radius: 0 8px 8px 0;
+}
+
+.drawerRootHideBuiltinClose {
+  :global(.ant-drawer-close) {
+    display: none;
+  }
+}

package/dist/lib/ui/LabelSelect/demo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LabelSelectDemo: React.FC;
+export default LabelSelectDemo;

package/dist/lib/ui/LabelSelect/demo.js

@@ -0,0 +1,113 @@
+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/ui/LabelSelect/demo.tsx
+var demo_exports = {};
+__export(demo_exports, {
+  default: () => demo_default
+});
+module.exports = __toCommonJS(demo_exports);
+var import_react = __toESM(require("react"));
+var import_index = __toESM(require("./index"));
+var import_antd = require("antd");
+var labelOptions = [
+  { label: "高优先级", value: "high", labelColor: "red" },
+  { label: "中优先级", value: "medium", labelColor: "orange" },
+  { label: "低优先级", value: "low", labelColor: "green" },
+  { label: "待处理", value: "pending", labelColor: "blue" },
+  { label: "已完成", value: "completed", labelColor: "gray", disabled: true }
+];
+var mixedOptions = [
+  { label: "高优先级", value: "high", labelColor: "red" },
+  { label: "中优先级", value: "medium", labelColor: "orange" },
+  { label: "低优先级", value: "low" },
+  // 没有labelColor，使用默认显示方式
+  { label: "待处理", value: "pending", labelColor: "blue" },
+  { label: "已完成", value: "completed" }
+  // 没有labelColor，使用默认显示方式
+];
+var LabelSelectDemo = () => {
+  const handleLabelChange = (value) => {
+    console.log("选择的值:", value);
+  };
+  const customOptionRender = (option) => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { color: option.labelColor }, option.label), /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "12px", color: "#666" } }, option.value));
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "LabelSelect 组件使用示例"), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 24 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "1. 智能Tag渲染（根据labelColor自动判断）"), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#888888", marginBottom: 12 } }, "当选项包含labelColor时自动使用Tag显示，否则使用默认显示方式"), /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      label: "事件标签",
+      customOptions: mixedOptions,
+      onChange: handleLabelChange,
+      selectWidth: 240,
+      labelWidth: 120,
+      placeholder: "请选择事件标签",
+      allowClear: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 24 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "2. 基本使用（全部使用Tag显示）"), /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      label: "事件标签",
+      customOptions: labelOptions,
+      onChange: handleLabelChange,
+      selectWidth: 200,
+      labelWidth: 120,
+      placeholder: "请选择事件标签",
+      allowClear: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 24 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "3. 在表单中使用"), /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      label: "注册状态",
+      customOptions: labelOptions,
+      formItemProps: {
+        rules: [{ required: true, message: "请选择状态" }],
+        style: { minWidth: 200 }
+      },
+      required: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 24 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "4. 自定义选项渲染"), /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      label: "事件标签",
+      customOptions: labelOptions,
+      optionRender: customOptionRender,
+      selectWidth: 240
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 24 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "5. 标签在顶部"), /* @__PURE__ */ import_react.default.createElement(import_index.default, { label: "事件标签", labelPosition: "top", customOptions: labelOptions, selectWidth: 200 })), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 24 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "6. 使用标准options（兼容ProFormSelect）"), /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      label: "事件",
+      options: [
+        { label: "事件1", value: "event1" },
+        { label: "事件2", value: "event2" }
+      ],
+      selectWidth: 200
+    }
+  )));
+};
+var demo_default = LabelSelectDemo;
+//# sourceMappingURL=demo.js.map

package/dist/lib/ui/LabelSelect/demo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ui/LabelSelect/demo.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport LabelSelect from './index';\nimport { Tag } from 'antd';\n\n// 自定义选项数据（模拟您的labelOptions）\nconst labelOptions = [\n  { label: '高优先级', value: 'high', labelColor: 'red' },\n  { label: '中优先级', value: 'medium', labelColor: 'orange' },\n  { label: '低优先级', value: 'low', labelColor: 'green' },\n  { label: '待处理', value: 'pending', labelColor: 'blue' },\n  { label: '已完成', value: 'completed', labelColor: 'gray', disabled: true },\n];\n\n// 混合选项数据（包含有labelColor和没有labelColor的选项）\nconst mixedOptions = [\n  { label: '高优先级', value: 'high', labelColor: 'red' },\n  { label: '中优先级', value: 'medium', labelColor: 'orange' },\n  { label: '低优先级', value: 'low' }, // 没有labelColor，使用默认显示方式\n  { label: '待处理', value: 'pending', labelColor: 'blue' },\n  { label: '已完成', value: 'completed' }, // 没有labelColor，使用默认显示方式\n];\n\n// 使用示例组件\nconst LabelSelectDemo: React.FC = () => {\n  const handleLabelChange = (value: string) => {\n    console.log('选择的值:', value);\n  };\n\n  // 自定义渲染函数示例\n  const customOptionRender = (option: any) => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n      <Tag color={option.labelColor}>{option.label}</Tag>\n      <span style={{ fontSize: '12px', color: '#666' }}>{option.value}</span>\n    </div>\n  );\n\n  return (\n    <div style={{ padding: 24 }}>\n      <h2>LabelSelect 组件使用示例</h2>\n\n      {/* 示例1：智能Tag渲染（根据labelColor自动判断） */}\n      <div style={{ marginBottom: 24 }}>\n        <h3>1. 智能Tag渲染（根据labelColor自动判断）</h3>\n        <p style={{ color: '#888888', marginBottom: 12 }}>\n          当选项包含labelColor时自动使用Tag显示，否则使用默认显示方式\n        </p>\n        <LabelSelect\n          label='事件标签'\n          customOptions={mixedOptions}\n          onChange={handleLabelChange}\n          selectWidth={240}\n          labelWidth={120}\n          placeholder='请选择事件标签'\n          allowClear\n        />\n      </div>\n\n      {/* 示例2：基本使用（全部使用Tag显示） */}\n      <div style={{ marginBottom: 24 }}>\n        <h3>2. 基本使用（全部使用Tag显示）</h3>\n        <LabelSelect\n          label='事件标签'\n          customOptions={labelOptions}\n          onChange={handleLabelChange}\n          selectWidth={200}\n          labelWidth={120}\n          placeholder='请选择事件标签'\n          allowClear\n        />\n      </div>\n\n      {/* 示例3：在表单中使用 */}\n      <div style={{ marginBottom: 24 }}>\n        <h3>3. 在表单中使用</h3>\n        <LabelSelect\n          label='注册状态'\n          customOptions={labelOptions}\n          formItemProps={{\n            rules: [{ required: true, message: '请选择状态' }],\n            style: { minWidth: 200 },\n          }}\n          required\n        />\n      </div>\n\n      {/* 示例4：自定义选项渲染 */}\n      <div style={{ marginBottom: 24 }}>\n        <h3>4. 自定义选项渲染</h3>\n        <LabelSelect\n          label='事件标签'\n          customOptions={labelOptions}\n          optionRender={customOptionRender}\n          selectWidth={240}\n        />\n      </div>\n\n      {/* 示例5：标签在顶部 */}\n      <div style={{ marginBottom: 24 }}>\n        <h3>5. 标签在顶部</h3>\n        <LabelSelect label='事件标签' labelPosition='top' customOptions={labelOptions} selectWidth={200} />\n      </div>\n\n      {/* 示例6：使用标准options（兼容性） */}\n      <div style={{ marginBottom: 24 }}>\n        <h3>6. 使用标准options（兼容ProFormSelect）</h3>\n        <LabelSelect\n          label='事件'\n          options={[\n            { label: '事件1', value: 'event1' },\n            { label: '事件2', value: 'event2' },\n          ]}\n          selectWidth={200}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default LabelSelectDemo;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAwB;AACxB,kBAAoB;AAGpB,IAAM,eAAe;AAAA,EACnB,EAAE,OAAO,QAAQ,OAAO,QAAQ,YAAY,MAAM;AAAA,EAClD,EAAE,OAAO,QAAQ,OAAO,UAAU,YAAY,SAAS;AAAA,EACvD,EAAE,OAAO,QAAQ,OAAO,OAAO,YAAY,QAAQ;AAAA,EACnD,EAAE,OAAO,OAAO,OAAO,WAAW,YAAY,OAAO;AAAA,EACrD,EAAE,OAAO,OAAO,OAAO,aAAa,YAAY,QAAQ,UAAU,KAAK;AACzE;AAGA,IAAM,eAAe;AAAA,EACnB,EAAE,OAAO,QAAQ,OAAO,QAAQ,YAAY,MAAM;AAAA,EAClD,EAAE,OAAO,QAAQ,OAAO,UAAU,YAAY,SAAS;AAAA,EACvD,EAAE,OAAO,QAAQ,OAAO,MAAM;AAAA;AAAA,EAC9B,EAAE,OAAO,OAAO,OAAO,WAAW,YAAY,OAAO;AAAA,EACrD,EAAE,OAAO,OAAO,OAAO,YAAY;AAAA;AACrC;AAGA,IAAM,kBAA4B,MAAM;AACtC,QAAM,oBAAoB,CAAC,UAAkB;AAC3C,YAAQ,IAAI,SAAS,KAAK;AAAA,EAC5B;AAGA,QAAM,qBAAqB,CAAC,WAC1B,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE,KAC1D,6BAAAA,QAAA,cAAC,mBAAI,OAAO,OAAO,cAAa,OAAO,KAAM,GAC7C,6BAAAA,QAAA,cAAC,UAAK,OAAO,EAAE,UAAU,QAAQ,OAAO,OAAO,KAAI,OAAO,KAAM,CAClE;AAGF,SACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,GAAG,KACxB,6BAAAA,QAAA,cAAC,YAAG,oBAAkB,GAGtB,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,GAAG,KAC7B,6BAAAA,QAAA,cAAC,YAAG,8BAA4B,GAChC,6BAAAA,QAAA,cAAC,OAAE,OAAO,EAAE,OAAO,WAAW,cAAc,GAAG,KAAG,sCAElD,GACA,6BAAAA,QAAA;AAAA,IAAC,aAAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,eAAe;AAAA,MACf,UAAU;AAAA,MACV,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAY;AAAA,MACZ,YAAU;AAAA;AAAA,EACZ,CACF,GAGA,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,GAAG,KAC7B,6BAAAA,QAAA,cAAC,YAAG,oBAAkB,GACtB,6BAAAA,QAAA;AAAA,IAAC,aAAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,eAAe;AAAA,MACf,UAAU;AAAA,MACV,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAY;AAAA,MACZ,YAAU;AAAA;AAAA,EACZ,CACF,GAGA,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,GAAG,KAC7B,6BAAAA,QAAA,cAAC,YAAG,WAAS,GACb,6BAAAA,QAAA;AAAA,IAAC,aAAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,eAAe;AAAA,MACf,eAAe;AAAA,QACb,OAAO,CAAC,EAAE,UAAU,MAAM,SAAS,QAAQ,CAAC;AAAA,QAC5C,OAAO,EAAE,UAAU,IAAI;AAAA,MACzB;AAAA,MACA,UAAQ;AAAA;AAAA,EACV,CACF,GAGA,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,GAAG,KAC7B,6BAAAA,QAAA,cAAC,YAAG,YAAU,GACd,6BAAAA,QAAA;AAAA,IAAC,aAAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,eAAe;AAAA,MACf,cAAc;AAAA,MACd,aAAa;AAAA;AAAA,EACf,CACF,GAGA,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,GAAG,KAC7B,6BAAAA,QAAA,cAAC,YAAG,UAAQ,GACZ,6BAAAA,QAAA,cAAC,aAAAC,SAAA,EAAY,OAAM,QAAO,eAAc,OAAM,eAAe,cAAc,aAAa,KAAK,CAC/F,GAGA,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,GAAG,KAC7B,6BAAAA,QAAA,cAAC,YAAG,iCAA+B,GACnC,6BAAAA,QAAA;AAAA,IAAC,aAAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAS;AAAA,QACP,EAAE,OAAO,OAAO,OAAO,SAAS;AAAA,QAChC,EAAE,OAAO,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,MACA,aAAa;AAAA;AAAA,EACf,CACF,CACF;AAEJ;AAEA,IAAO,eAAQ;",
+  "names": ["React", "LabelSelect"]
+}

package/dist/lib/ui/LabelSelect/index.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { SelectProps, FormItemProps } from 'antd';
+/** 自定义选项类型 */
+export interface CustomOption {
+    label: string;
+    value: string | number;
+    /** 标签颜色，用于显示带颜色的标签 */
+    labelColor?: string;
+    /** 禁用状态 */
+    disabled?: boolean;
+    /** 自定义渲染函数 */
+    render?: (option: CustomOption) => React.ReactNode;
+}
+export interface LabelSelectProps extends Omit<SelectProps, 'onChange' | 'optionRender'> {
+    /** 标签文本 */
+    label: string;
+    /** 标签宽度，默认120px */
+    labelWidth?: number | string;
+    /** 选择器宽度，默认200px */
+    selectWidth?: number | string;
+    /** 标签位置，默认在左侧 */
+    labelPosition?: 'left' | 'top';
+    /** Form.Item 相关属性 */
+    formItemProps?: Omit<FormItemProps, 'children'>;
+    /** 是否必填 */
+    required?: boolean;
+    /** 值变化回调 */
+    onChange?: (value: any, option: any) => void;
+    /** 高级选项：自定义选项配置 */
+    customOptions?: CustomOption[];
+    /** 是否显示标签颜色 */
+    showTagColor?: boolean;
+    /** 自定义选项渲染函数 */
+    optionRender?: (option: CustomOption) => React.ReactNode;
+}
+/**
+ * 自定义标签选择器组件
+ * 提供更好的排版控制和标签样式，支持高级自定义选项
+ */
+declare const LabelSelect: React.FC<LabelSelectProps>;
+export default LabelSelect;

package/dist/lib/ui/LabelSelect/index.js

@@ -0,0 +1,124 @@
+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/ui/LabelSelect/index.tsx
+var LabelSelect_exports = {};
+__export(LabelSelect_exports, {
+  default: () => LabelSelect_default
+});
+module.exports = __toCommonJS(LabelSelect_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var { Text } = import_antd.Typography;
+var LabelSelect = ({
+  label,
+  labelWidth = 80,
+  selectWidth = 200,
+  labelPosition = "left",
+  formItemProps,
+  required = false,
+  onChange,
+  style,
+  options,
+  children,
+  customOptions,
+  showTagColor = false,
+  optionRender,
+  ...selectProps
+}) => {
+  const renderLabel = () => /* @__PURE__ */ import_react.default.createElement(
+    Text,
+    {
+      style: {
+        display: "block",
+        width: labelPosition === "left" ? labelWidth : "100%",
+        textAlign: labelPosition === "left" ? "right" : "left",
+        paddingRight: labelPosition === "left" ? 8 : 0,
+        marginBottom: labelPosition === "top" ? 4 : 0,
+        color: "#333"
+      }
+    },
+    required && /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#ff4d4f", marginRight: 2 } }, "*"),
+    label
+  );
+  const renderCustomOptions = () => {
+    if (!customOptions || customOptions.length === 0)
+      return null;
+    return customOptions.map((option) => {
+      const optionContent = option.render ? option.render(option) : option.labelColor ? /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { color: option.labelColor }, option.label) : option.label;
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Select.Option, { key: option.value, value: option.value, disabled: option.disabled }, optionRender ? optionRender(option) : optionContent);
+    });
+  };
+  const renderSelect = () => {
+    const selectPropsWithOptions = {
+      ...selectProps,
+      style: {
+        width: selectWidth,
+        ...style
+      },
+      onChange
+    };
+    if (customOptions && customOptions.length > 0) {
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Select, { ...selectPropsWithOptions }, renderCustomOptions());
+    }
+    if (children) {
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Select, { ...selectPropsWithOptions }, children);
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Select, { options, ...selectPropsWithOptions });
+  };
+  if (formItemProps) {
+    const labelCol = labelPosition === "top" ? { span: 24 } : void 0;
+    const wrapperCol = labelPosition === "top" ? { span: 24 } : void 0;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        ...formItemProps,
+        label: renderLabel(),
+        labelCol: formItemProps.labelCol || labelCol,
+        wrapperCol: formItemProps.wrapperCol || wrapperCol,
+        style: {
+          marginBottom: 16,
+          ...formItemProps.style
+        }
+      },
+      renderSelect()
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Space,
+    {
+      direction: labelPosition === "top" ? "vertical" : "horizontal",
+      align: labelPosition === "top" ? "start" : "center",
+      style: { width: "100%" }
+    },
+    renderLabel(),
+    renderSelect()
+  );
+};
+var LabelSelect_default = LabelSelect;
+//# sourceMappingURL=index.js.map

package/dist/lib/ui/LabelSelect/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ui/LabelSelect/index.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { Select, Form, Typography, Space, Tag } from 'antd';\nimport type { SelectProps, FormItemProps } from 'antd';\n\nconst { Text } = Typography;\n\n/** 自定义选项类型 */\nexport interface CustomOption {\n  label: string;\n  value: string | number;\n  /** 标签颜色，用于显示带颜色的标签 */\n  labelColor?: string;\n  /** 禁用状态 */\n  disabled?: boolean;\n  /** 自定义渲染函数 */\n  render?: (option: CustomOption) => React.ReactNode;\n}\n\nexport interface LabelSelectProps extends Omit<SelectProps, 'onChange' | 'optionRender'> {\n  /** 标签文本 */\n  label: string;\n  /** 标签宽度，默认120px */\n  labelWidth?: number | string;\n  /** 选择器宽度，默认200px */\n  selectWidth?: number | string;\n  /** 标签位置，默认在左侧 */\n  labelPosition?: 'left' | 'top';\n  /** Form.Item 相关属性 */\n  formItemProps?: Omit<FormItemProps, 'children'>;\n  /** 是否必填 */\n  required?: boolean;\n  /** 值变化回调 */\n  onChange?: (value: any, option: any) => void;\n\n  /** 高级选项：自定义选项配置 */\n  customOptions?: CustomOption[];\n  /** 是否显示标签颜色 */\n  showTagColor?: boolean;\n  /** 自定义选项渲染函数 */\n  optionRender?: (option: CustomOption) => React.ReactNode;\n}\n\n/**\n * 自定义标签选择器组件\n * 提供更好的排版控制和标签样式，支持高级自定义选项\n */\nconst LabelSelect: React.FC<LabelSelectProps> = ({\n  label,\n  labelWidth = 80,\n  selectWidth = 200,\n  labelPosition = 'left',\n  formItemProps,\n  required = false,\n  onChange,\n  style,\n  options,\n  children,\n  customOptions,\n  showTagColor = false,\n  optionRender,\n  ...selectProps\n}) => {\n  // 渲染标签\n  const renderLabel = () => (\n    <Text\n      style={{\n        display: 'block',\n        width: labelPosition === 'left' ? labelWidth : '100%',\n        textAlign: labelPosition === 'left' ? 'right' : 'left',\n        paddingRight: labelPosition === 'left' ? 8 : 0,\n        marginBottom: labelPosition === 'top' ? 4 : 0,\n        color: '#333',\n      }}\n    >\n      {required && <span style={{ color: '#ff4d4f', marginRight: 2 }}>*</span>}\n      {label}\n    </Text>\n  );\n\n  // 渲染自定义选项\n  const renderCustomOptions = () => {\n    if (!customOptions || customOptions.length === 0) return null;\n\n    return customOptions.map((option) => {\n      // 智能判断：如果设置了labelColor，自动使用Tag展示\n      const optionContent = option.render ? (\n        option.render(option)\n      ) : option.labelColor ? (\n        <Tag color={option.labelColor}>{option.label}</Tag>\n      ) : (\n        option.label\n      );\n\n      return (\n        <Select.Option key={option.value} value={option.value} disabled={option.disabled}>\n          {optionRender ? optionRender(option) : optionContent}\n        </Select.Option>\n      );\n    });\n  };\n\n  // 渲染选择器\n  const renderSelect = () => {\n    const selectPropsWithOptions = {\n      ...selectProps,\n      style: {\n        width: selectWidth,\n        ...style,\n      },\n      onChange,\n    };\n\n    // 如果提供了自定义选项，优先使用自定义选项\n    if (customOptions && customOptions.length > 0) {\n      return <Select {...selectPropsWithOptions}>{renderCustomOptions()}</Select>;\n    }\n\n    // 如果提供了children，使用children\n    if (children) {\n      return <Select {...selectPropsWithOptions}>{children}</Select>;\n    }\n\n    // 使用标准的options\n    return <Select options={options} {...selectPropsWithOptions} />;\n  };\n\n  // 如果使用 Form.Item 包装\n  if (formItemProps) {\n    // 当 labelPosition 为 top 时，设置 Form.Item 的 labelCol 使其占满整行\n    const labelCol = labelPosition === 'top' ? { span: 24 } : undefined;\n    const wrapperCol = labelPosition === 'top' ? { span: 24 } : undefined;\n\n    return (\n      <Form.Item\n        {...formItemProps}\n        label={renderLabel()}\n        labelCol={formItemProps.labelCol || labelCol}\n        wrapperCol={formItemProps.wrapperCol || wrapperCol}\n        style={{\n          marginBottom: 16,\n          ...formItemProps.style,\n        }}\n      >\n        {renderSelect()}\n      </Form.Item>\n    );\n  }\n\n  // 独立使用\n  return (\n    <Space\n      direction={labelPosition === 'top' ? 'vertical' : 'horizontal'}\n      align={labelPosition === 'top' ? 'start' : 'center'}\n      style={{ width: '100%' }}\n    >\n      {renderLabel()}\n      {renderSelect()}\n    </Space>\n  );\n};\n\nexport default LabelSelect;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAqD;AAGrD,IAAM,EAAE,KAAK,IAAI;AA0CjB,IAAM,cAA0C,CAAC;AAAA,EAC/C;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,MAAM;AAEJ,QAAM,cAAc,MAClB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO,kBAAkB,SAAS,aAAa;AAAA,QAC/C,WAAW,kBAAkB,SAAS,UAAU;AAAA,QAChD,cAAc,kBAAkB,SAAS,IAAI;AAAA,QAC7C,cAAc,kBAAkB,QAAQ,IAAI;AAAA,QAC5C,OAAO;AAAA,MACT;AAAA;AAAA,IAEC,YAAY,6BAAAA,QAAA,cAAC,UAAK,OAAO,EAAE,OAAO,WAAW,aAAa,EAAE,KAAG,GAAC;AAAA,IAChE;AAAA,EACH;AAIF,QAAM,sBAAsB,MAAM;AAChC,QAAI,CAAC,iBAAiB,cAAc,WAAW;AAAG,aAAO;AAEzD,WAAO,cAAc,IAAI,CAAC,WAAW;AAEnC,YAAM,gBAAgB,OAAO,SAC3B,OAAO,OAAO,MAAM,IAClB,OAAO,aACT,6BAAAA,QAAA,cAAC,mBAAI,OAAO,OAAO,cAAa,OAAO,KAAM,IAE7C,OAAO;AAGT,aACE,6BAAAA,QAAA,cAAC,mBAAO,QAAP,EAAc,KAAK,OAAO,OAAO,OAAO,OAAO,OAAO,UAAU,OAAO,YACrE,eAAe,aAAa,MAAM,IAAI,aACzC;AAAA,IAEJ,CAAC;AAAA,EACH;AAGA,QAAM,eAAe,MAAM;AACzB,UAAM,yBAAyB;AAAA,MAC7B,GAAG;AAAA,MACH,OAAO;AAAA,QACL,OAAO;AAAA,QACP,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAGA,QAAI,iBAAiB,cAAc,SAAS,GAAG;AAC7C,aAAO,6BAAAA,QAAA,cAAC,sBAAQ,GAAG,0BAAyB,oBAAoB,CAAE;AAAA,IACpE;AAGA,QAAI,UAAU;AACZ,aAAO,6BAAAA,QAAA,cAAC,sBAAQ,GAAG,0BAAyB,QAAS;AAAA,IACvD;AAGA,WAAO,6BAAAA,QAAA,cAAC,sBAAO,SAAmB,GAAG,wBAAwB;AAAA,EAC/D;AAGA,MAAI,eAAe;AAEjB,UAAM,WAAW,kBAAkB,QAAQ,EAAE,MAAM,GAAG,IAAI;AAC1D,UAAM,aAAa,kBAAkB,QAAQ,EAAE,MAAM,GAAG,IAAI;AAE5D,WACE,6BAAAA,QAAA;AAAA,MAAC,iBAAK;AAAA,MAAL;AAAA,QACE,GAAG;AAAA,QACJ,OAAO,YAAY;AAAA,QACnB,UAAU,cAAc,YAAY;AAAA,QACpC,YAAY,cAAc,cAAc;AAAA,QACxC,OAAO;AAAA,UACL,cAAc;AAAA,UACd,GAAG,cAAc;AAAA,QACnB;AAAA;AAAA,MAEC,aAAa;AAAA,IAChB;AAAA,EAEJ;AAGA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,kBAAkB,QAAQ,aAAa;AAAA,MAClD,OAAO,kBAAkB,QAAQ,UAAU;AAAA,MAC3C,OAAO,EAAE,OAAO,OAAO;AAAA;AAAA,IAEtB,YAAY;AAAA,IACZ,aAAa;AAAA,EAChB;AAEJ;AAEA,IAAO,sBAAQ;",
+  "names": ["React"]
+}

package/dist/lib/ui/LogicOperator/index.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+export type LogicOperatorProps = {
+    value?: string;
+    onChange?: (value: string) => void;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    onlyShow?: boolean;
+};
+declare const LogicOperator: FC<LogicOperatorProps>;
+export default LogicOperator;

package/dist/lib/ui/LogicOperator/index.js

@@ -0,0 +1,42 @@
+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/ui/LogicOperator/index.tsx
+var LogicOperator_exports = {};
+__export(LogicOperator_exports, {
+  default: () => LogicOperator_default
+});
+module.exports = __toCommonJS(LogicOperator_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_index_module = __toESM(require("./index.module.less"));
+var LogicOperator = ({ value = "and", onChange, style, disabled, onlyShow }) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.logicOperator, style }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.topLine }), onlyShow ? /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.onlyShowValue }, value === "and" ? "且" : "或") : /* @__PURE__ */ import_react.default.createElement(import_antd.Radio.Group, { value, onChange: (e) => !disabled && (onChange == null ? void 0 : onChange(e.target.value)), buttonStyle: "solid" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Radio.Button, { value: "and" }, "且"), /* @__PURE__ */ import_react.default.createElement(import_antd.Radio.Button, { value: "or" }, "或")), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.bottomLine }));
+};
+var LogicOperator_default = LogicOperator;
+//# sourceMappingURL=index.js.map