@pisell/materials 1.0.998 → 1.0.1000

package/lib/components/PisellCards/components/TextCard/TextCard.stories.js

@@ -0,0 +1,653 @@
+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/PisellCards/components/TextCard/TextCard.stories.tsx
+var TextCard_stories_exports = {};
+__export(TextCard_stories_exports, {
+  BadgeDot: () => BadgeDot,
+  BadgeLargeNumber: () => BadgeLargeNumber,
+  BadgeNumber: () => BadgeNumber,
+  BadgePositions: () => BadgePositions,
+  BadgeSizeAndOffset: () => BadgeSizeAndOffset,
+  BadgeText: () => BadgeText,
+  BadgeZero: () => BadgeZero,
+  BothIcons: () => BothIcons,
+  ClickInteraction: () => ClickInteraction,
+  CompleteExample: () => CompleteExample,
+  Default: () => Default,
+  IconConfig: () => IconConfig,
+  MultipleCards: () => MultipleCards,
+  NotClickable: () => NotClickable,
+  PrefixIcon: () => PrefixIcon,
+  PrefixSlot: () => PrefixSlot,
+  ReactNodeText: () => ReactNodeText,
+  SizeDefault: () => SizeDefault,
+  SizeLarge: () => SizeLarge,
+  SizeSmall: () => SizeSmall,
+  StateActive: () => StateActive,
+  StateDisabled: () => StateDisabled,
+  StateLoading: () => StateLoading,
+  StatePriority: () => StatePriority,
+  SuffixIcon: () => SuffixIcon,
+  SuffixSlot: () => SuffixSlot,
+  TabNavigation: () => TabNavigation,
+  TextConfig: () => TextConfig,
+  VariantDashed: () => VariantDashed,
+  VariantFilled: () => VariantFilled,
+  VariantGradient: () => VariantGradient,
+  VariantLight: () => VariantLight,
+  VariantOutlined: () => VariantOutlined,
+  VariantText: () => VariantText,
+  VerticalNavigation: () => VerticalNavigation,
+  VeryLongText: () => VeryLongText,
+  VeryLongTextMultiLine: () => VeryLongTextMultiLine,
+  VeryLongTextWithLargeBadgeAndIcon: () => VeryLongTextWithLargeBadgeAndIcon,
+  VeryLongTextWithWidth: () => VeryLongTextWithWidth,
+  WidthModeAuto: () => WidthModeAuto,
+  WidthModeFixed: () => WidthModeFixed,
+  WidthModeFull: () => WidthModeFull,
+  WithTag: () => WithTag,
+  default: () => TextCard_stories_default
+});
+module.exports = __toCommonJS(TextCard_stories_exports);
+var import_react = __toESM(require("react"));
+var import_test = require("@storybook/test");
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_TextCard = __toESM(require("./TextCard"));
+var meta = {
+  title: "Atom Components/PisellCards/TextCard",
+  component: import_TextCard.default,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "文本卡片组件，用于展示带图标、文本、标签和角标的信息项。支持 6 种样式变体、3 种尺寸、4 种状态。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      control: "text",
+      description: "卡片显示的文本内容（必填）"
+    },
+    variant: {
+      control: "select",
+      options: ["text", "filled", "light", "outlined", "gradient", "dashed"],
+      description: "卡片样式变体"
+    },
+    size: {
+      control: "select",
+      options: ["small", "default", "large"],
+      description: "卡片尺寸"
+    },
+    clickable: {
+      control: "boolean",
+      description: "是否可点击"
+    },
+    widthMode: {
+      control: "select",
+      options: ["auto", "fixed", "full"],
+      description: "宽度模式"
+    }
+  }
+};
+var TextCard_stories_default = meta;
+var Default = {
+  args: {
+    text: "Tab title"
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    await (0, import_test.expect)(canvas.getByText("Tab title")).toBeInTheDocument();
+  }
+};
+var MultipleCards = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Tab title" }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Another tab" }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "More tab" }))
+};
+var ReactNodeText = {
+  args: {
+    text: /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "blue" } }, "Custom Text")
+  }
+};
+var VariantText = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Default", variant: "text" }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Active", variant: "text", active: { value: true } }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Disabled", variant: "text", disabled: { value: true } }))
+};
+var VariantFilled = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Default", variant: "filled" }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Active", variant: "filled", active: { value: true } }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Disabled", variant: "filled", disabled: { value: true } }))
+};
+var VariantLight = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Default", variant: "light" }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Active", variant: "light", active: { value: true } }))
+};
+var VariantOutlined = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Default", variant: "outlined" }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Active", variant: "outlined", active: { value: true } }))
+};
+var VariantGradient = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Default", variant: "gradient" }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Active", variant: "gradient", active: { value: true } }))
+};
+var VariantDashed = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Default", variant: "dashed" }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Active", variant: "dashed", active: { value: true } }))
+};
+var SizeSmall = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Small", size: "small", variant: "filled" }), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Small Active",
+      size: "small",
+      variant: "filled",
+      active: { value: true }
+    }
+  ))
+};
+var SizeDefault = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Default", size: "default", variant: "filled" }), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Default Active",
+      size: "default",
+      variant: "filled",
+      active: { value: true }
+    }
+  ))
+};
+var SizeLarge = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Large", size: "large", variant: "filled" }), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Large Active",
+      size: "large",
+      variant: "filled",
+      active: { value: true }
+    }
+  ))
+};
+var StateActive = {
+  render: () => {
+    const [activeKey, setActiveKey] = (0, import_react.useState)("tab1");
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+      import_TextCard.default,
+      {
+        text: "Tab 1",
+        variant: "filled",
+        active: { value: activeKey === "tab1" },
+        onClick: () => setActiveKey("tab1")
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_TextCard.default,
+      {
+        text: "Tab 2",
+        variant: "filled",
+        active: { value: activeKey === "tab2" },
+        onClick: () => setActiveKey("tab2")
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_TextCard.default,
+      {
+        text: "Tab 3",
+        variant: "filled",
+        active: { value: activeKey === "tab3" },
+        onClick: () => setActiveKey("tab3")
+      }
+    ));
+  }
+};
+var StateDisabled = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Disabled", variant: "filled", disabled: { value: true } }), /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Normal", variant: "filled" }))
+};
+var StateLoading = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Loading",
+      variant: "filled",
+      loading: {
+        value: true,
+        extra: /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { size: "small", style: { marginLeft: 8 } })
+      }
+    }
+  ))
+};
+var StatePriority = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Loading > Disabled > Active",
+      variant: "filled",
+      active: { value: true, extra: /* @__PURE__ */ import_react.default.createElement("span", null, "Active") },
+      disabled: { value: true, extra: /* @__PURE__ */ import_react.default.createElement("span", null, "Disabled") },
+      loading: { value: true, extra: /* @__PURE__ */ import_react.default.createElement("span", null, "Loading") }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Disabled > Active",
+      variant: "filled",
+      active: { value: true, extra: /* @__PURE__ */ import_react.default.createElement("span", null, "Active") },
+      disabled: { value: true, extra: /* @__PURE__ */ import_react.default.createElement("span", null, "Disabled") }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Active",
+      variant: "filled",
+      active: { value: true, extra: /* @__PURE__ */ import_react.default.createElement("span", null, "Active") }
+    }
+  ))
+};
+var PrefixIcon = {
+  args: {
+    text: "Password",
+    variant: "filled",
+    prefixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.BellOutlined, null)
+  }
+};
+var SuffixIcon = {
+  args: {
+    text: "Password",
+    variant: "filled",
+    suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null)
+  }
+};
+var BothIcons = {
+  args: {
+    text: "Password",
+    variant: "filled",
+    prefixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.BellOutlined, null),
+    suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null)
+  }
+};
+var IconConfig = {
+  args: {
+    text: "Password",
+    variant: "filled",
+    prefixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.BellOutlined, null),
+    iconConfig: { size: 20, color: "#ff4d4f" }
+  }
+};
+var WithTag = {
+  args: {
+    text: "Password",
+    variant: "filled",
+    tag: /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { color: "blue" }, "2")
+  }
+};
+var BadgeDot = {
+  args: {
+    text: "Password",
+    variant: "filled",
+    badge: { type: "dot" }
+  }
+};
+var BadgeNumber = {
+  args: {
+    text: "Password",
+    variant: "filled",
+    badge: { type: "number", content: 99 }
+  }
+};
+var BadgeText = {
+  args: {
+    text: "Password",
+    variant: "filled",
+    badge: { type: "text", content: "New" }
+  }
+};
+var BadgePositions = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Top Right (默认)",
+      variant: "filled",
+      badge: { type: "number", content: 99 }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Top Left",
+      variant: "filled",
+      badge: { type: "number", content: 99, offset: [-10, 0] }
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Bottom Right",
+      variant: "filled",
+      badge: { type: "number", content: 99, offset: [0, 10] }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Bottom Left",
+      variant: "filled",
+      badge: { type: "number", content: 99, offset: [-10, 10] }
+    }
+  )))
+};
+var PrefixSlot = {
+  args: {
+    text: "Custom Prefix",
+    variant: "filled",
+    prefixSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "red" } }, "🔥"),
+    prefixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.BellOutlined, null)
+  }
+};
+var SuffixSlot = {
+  args: {
+    text: "Custom Suffix",
+    variant: "filled",
+    suffixSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "green" } }, "✓"),
+    suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null),
+    tag: /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, null, "Tag")
+  }
+};
+var TextConfig = {
+  args: {
+    text: "Custom Font",
+    variant: "filled",
+    textConfig: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: "#ff4d4f"
+    }
+  }
+};
+var WidthModeAuto = {
+  args: {
+    text: "Auto Width",
+    variant: "filled",
+    widthMode: "auto",
+    maxWidth: 300
+  }
+};
+var WidthModeFixed = {
+  args: {
+    text: "Fixed Width",
+    variant: "filled",
+    widthMode: "fixed",
+    width: 200
+  }
+};
+var WidthModeFull = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", border: "1px dashed #ccc", padding: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_TextCard.default, { text: "Full Width", variant: "filled", widthMode: "full" }))
+};
+var ClickInteraction = {
+  render: () => {
+    const [clicked, setClicked] = (0, import_react.useState)(false);
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
+      import_TextCard.default,
+      {
+        text: "Click Me",
+        variant: "filled",
+        onClick: () => setClicked(true)
+      }
+    ), clicked && /* @__PURE__ */ import_react.default.createElement("div", null, "已点击！"));
+  }
+};
+var NotClickable = {
+  args: {
+    text: "Not Clickable",
+    variant: "filled",
+    clickable: false
+  }
+};
+var CompleteExample = {
+  args: {
+    text: "Complete Example",
+    variant: "filled",
+    size: "large",
+    prefixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.BellOutlined, null),
+    suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null),
+    tag: /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { color: "blue" }, "Hot"),
+    badge: { type: "number", content: 99 },
+    active: { value: true },
+    onClick: () => console.log("clicked")
+  }
+};
+var TabNavigation = {
+  render: () => {
+    const [activeKey, setActiveKey] = (0, import_react.useState)("tab1");
+    const tabs = [
+      { key: "tab1", label: "My details" },
+      { key: "tab2", label: "Profile" },
+      { key: "tab3", label: "Password" },
+      { key: "tab4", label: "Team", badge: 2 },
+      { key: "tab5", label: "Plan" },
+      { key: "tab6", label: "Billing" },
+      { key: "tab7", label: "Email" },
+      { key: "tab8", label: "Notifications", badge: 2 },
+      { key: "tab9", label: "Integrations" },
+      { key: "tab10", label: "API" }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { wrap: true }, tabs.map((tab) => /* @__PURE__ */ import_react.default.createElement(
+      import_TextCard.default,
+      {
+        key: tab.key,
+        text: tab.label,
+        variant: "filled",
+        active: { value: activeKey === tab.key },
+        onClick: () => setActiveKey(tab.key),
+        badge: tab.badge ? { type: "number", content: tab.badge } : void 0
+      }
+    )));
+  }
+};
+var VerticalNavigation = {
+  render: () => {
+    const [activeKey, setActiveKey] = (0, import_react.useState)("item1");
+    const items = [
+      { key: "item1", label: "My details" },
+      { key: "item2", label: "Profile" },
+      { key: "item3", label: "Password" },
+      { key: "item4", label: "Team", badge: 2 },
+      { key: "item5", label: "Plan" },
+      { key: "item6", label: "Billing" },
+      { key: "item7", label: "Email" },
+      { key: "item8", label: "Notifications", badge: 2 },
+      { key: "item9", label: "Integrations" },
+      { key: "item10", label: "API" }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical", style: { width: 200 } }, items.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      import_TextCard.default,
+      {
+        key: item.key,
+        text: item.label,
+        variant: "light",
+        widthMode: "full",
+        active: { value: activeKey === item.key },
+        onClick: () => setActiveKey(item.key),
+        badge: item.badge ? { type: "number", content: item.badge } : void 0
+      }
+    )));
+  }
+};
+var BadgeZero = {
+  args: {
+    text: "Notifications",
+    variant: "filled",
+    badge: { type: "number", content: 0 }
+  }
+};
+var BadgeLargeNumber = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Messages",
+      variant: "filled",
+      badge: { type: "number", content: 999999 }
+    }
+  )
+};
+var VeryLongText = {
+  args: {
+    text: "这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常 very long text content",
+    variant: "filled"
+  }
+};
+var VeryLongTextWithWidth = {
+  args: {
+    text: "这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常 very long text content",
+    variant: "filled",
+    textConfig: { maxLines: 1, ellipsis: true },
+    style: { width: 200 }
+  }
+};
+var VeryLongTextMultiLine = {
+  args: {
+    text: "这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常 very long text content",
+    variant: "filled",
+    textConfig: { maxLines: 2, ellipsis: true },
+    style: { width: 300 }
+  }
+};
+var BadgeSizeAndOffset = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical", size: "large" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "角标大小（通过 size 属性控制）"), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Small Badge",
+      variant: "filled",
+      badge: { type: "number", content: 99, size: "small" }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Default Badge",
+      variant: "filled",
+      badge: { type: "number", content: "default" }
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "角标 offset 位置（通过 offset 控制位置）"), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Offset [0, 0] (默认)",
+      variant: "filled",
+      badge: { type: "number", content: 99, offset: [0, 0] }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Offset [5, 5]",
+      variant: "filled",
+      badge: { type: "number", content: 99, offset: [5, 5] }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Offset [10, 10]",
+      variant: "filled",
+      badge: { type: "number", content: 99, offset: [10, 10] }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Offset [-5, -5]",
+      variant: "filled",
+      badge: { type: "number", content: 99, offset: [-5, -5] }
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "角标 offset 和大小组合"), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Small + Offset",
+      variant: "filled",
+      badge: {
+        type: "number",
+        content: 99,
+        size: "small",
+        offset: [5, 5]
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TextCard.default,
+    {
+      text: "Default + Offset",
+      variant: "filled",
+      badge: {
+        type: "number",
+        content: 99,
+        size: "default",
+        offset: [10, 10]
+      }
+    }
+  ))))
+};
+var VeryLongTextWithLargeBadgeAndIcon = {
+  args: {
+    text: "这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常 very long text content",
+    variant: "filled",
+    prefixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.BellOutlined, null),
+    suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null),
+    badge: { type: "number", content: 999999, offset: [10, 10] },
+    textConfig: { maxLines: 1, ellipsis: true },
+    style: { width: 200 }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BadgeDot,
+  BadgeLargeNumber,
+  BadgeNumber,
+  BadgePositions,
+  BadgeSizeAndOffset,
+  BadgeText,
+  BadgeZero,
+  BothIcons,
+  ClickInteraction,
+  CompleteExample,
+  Default,
+  IconConfig,
+  MultipleCards,
+  NotClickable,
+  PrefixIcon,
+  PrefixSlot,
+  ReactNodeText,
+  SizeDefault,
+  SizeLarge,
+  SizeSmall,
+  StateActive,
+  StateDisabled,
+  StateLoading,
+  StatePriority,
+  SuffixIcon,
+  SuffixSlot,
+  TabNavigation,
+  TextConfig,
+  VariantDashed,
+  VariantFilled,
+  VariantGradient,
+  VariantLight,
+  VariantOutlined,
+  VariantText,
+  VerticalNavigation,
+  VeryLongText,
+  VeryLongTextMultiLine,
+  VeryLongTextWithLargeBadgeAndIcon,
+  VeryLongTextWithWidth,
+  WidthModeAuto,
+  WidthModeFixed,
+  WidthModeFull,
+  WithTag
+});

package/lib/components/PisellCards/components/TextCard/components/BadgeWrapper.d.ts

@@ -3,6 +3,7 @@ import { BadgeWrapperProps } from '../types';
 /**
  * BadgeWrapper 角标包装组件
  * 负责角标的渲染和定位，支持红点、数字、文本三种类型
+ * 位置通过 offset 控制，大小通过 size 控制
  *
  * @example
  * ```tsx