@pisell/materials 1.0.998 → 1.0.999

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

@@ -0,0 +1,870 @@
+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/GraphicTextCard/GraphicTextCard.stories.tsx
+var GraphicTextCard_stories_exports = {};
+__export(GraphicTextCard_stories_exports, {
+  BadgeDot: () => BadgeDot,
+  BadgeNumber: () => BadgeNumber,
+  BadgePositions: () => BadgePositions,
+  BadgeShowZero: () => BadgeShowZero,
+  BadgeSizeAndOffset: () => BadgeSizeAndOffset,
+  BadgeSizes: () => BadgeSizes,
+  BadgeText: () => BadgeText,
+  ClickInteraction: () => ClickInteraction,
+  CompleteExample: () => CompleteExample,
+  Default: () => Default,
+  GraphicConfigIcon: () => GraphicConfigIcon,
+  GraphicConfigSize: () => GraphicConfigSize,
+  GraphicImagePriority: () => GraphicImagePriority,
+  GraphicSlot: () => GraphicSlot,
+  MultipleCards: () => MultipleCards,
+  NavigationMenu: () => NavigationMenu,
+  NotClickable: () => NotClickable,
+  PrefixSlot: () => PrefixSlot,
+  ProductCategories: () => ProductCategories,
+  ReactNodeText: () => ReactNodeText,
+  SizeDefault: () => SizeDefault,
+  SizeLarge: () => SizeLarge,
+  SizeSmall: () => SizeSmall,
+  StateActive: () => StateActive,
+  StateDisabled: () => StateDisabled,
+  StateLoading: () => StateLoading,
+  StatePriority: () => StatePriority,
+  SuffixSlot: () => SuffixSlot,
+  TextAlign: () => TextAlign,
+  TextConfig: () => TextConfig,
+  TextEllipsis: () => TextEllipsis,
+  VariantCard: () => VariantCard,
+  VariantHorizontal: () => VariantHorizontal,
+  VariantVerticalIcon: () => VariantVerticalIcon,
+  VariantVerticalImage: () => VariantVerticalImage,
+  WidthModeAuto: () => WidthModeAuto,
+  WidthModeFixed: () => WidthModeFixed,
+  WidthModeFull: () => WidthModeFull,
+  default: () => GraphicTextCard_stories_default
+});
+module.exports = __toCommonJS(GraphicTextCard_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_GraphicTextCard = __toESM(require("./GraphicTextCard"));
+var meta = {
+  title: "Atom Components/PisellCards/GraphicTextCard",
+  component: import_GraphicTextCard.default,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "图文卡片组件，结合图标/图片、文本和状态标识。支持 4 种样式变体、3 种尺寸、4 种状态。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      control: "text",
+      description: "卡片显示的文本内容（必填）"
+    },
+    variant: {
+      control: "select",
+      options: ["vertical-image", "vertical-icon", "horizontal", "card"],
+      description: "卡片样式变体"
+    },
+    size: {
+      control: "select",
+      options: ["small", "default", "large"],
+      description: "卡片尺寸"
+    },
+    clickable: {
+      control: "boolean",
+      description: "是否可点击"
+    },
+    widthMode: {
+      control: "select",
+      options: ["auto", "fixed", "full"],
+      description: "宽度模式"
+    }
+  }
+};
+var GraphicTextCard_stories_default = meta;
+var Default = {
+  args: {
+    text: "分类一",
+    image: "https://via.placeholder.com/80"
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    await (0, import_test.expect)(canvas.getByText("分类一")).toBeInTheDocument();
+  }
+};
+var MultipleCards = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_GraphicTextCard.default, { text: "分类一", image: "https://via.placeholder.com/80" }), /* @__PURE__ */ import_react.default.createElement(import_GraphicTextCard.default, { text: "分类二", image: "https://via.placeholder.com/80" }), /* @__PURE__ */ import_react.default.createElement(import_GraphicTextCard.default, { text: "分类三", image: "https://via.placeholder.com/80" }))
+};
+var ReactNodeText = {
+  args: {
+    text: /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "blue" } }, "自定义文本"),
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "vertical-icon"
+  }
+};
+var VariantVerticalImage = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "分类一",
+      image: "https://via.placeholder.com/80",
+      variant: "vertical-image"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "分类二",
+      image: "https://via.placeholder.com/80",
+      variant: "vertical-image",
+      active: { value: true }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "分类三",
+      image: "https://via.placeholder.com/80",
+      variant: "vertical-image",
+      disabled: { value: true }
+    }
+  ))
+};
+var VariantVerticalIcon = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "首页",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "商城",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ShoppingOutlined, null),
+      variant: "vertical-icon",
+      active: { value: true }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "我的",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null),
+      variant: "vertical-icon"
+    }
+  ))
+};
+var VariantHorizontal = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "商品分类",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.AppstoreOutlined, null),
+      variant: "horizontal"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "热门推荐",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.AppstoreOutlined, null),
+      variant: "horizontal",
+      active: { value: true }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "限时特惠",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.GiftOutlined, null),
+      variant: "horizontal"
+    }
+  ))
+};
+var VariantCard = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "会员中心",
+      image: "https://via.placeholder.com/120",
+      variant: "card"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "VIP 专区",
+      image: "https://via.placeholder.com/120",
+      variant: "card",
+      active: { value: true }
+    }
+  ))
+};
+var SizeSmall = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "小尺寸",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      size: "small"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "小尺寸 Active",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      size: "small",
+      active: { value: true }
+    }
+  ))
+};
+var SizeDefault = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "默认尺寸",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      size: "default"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "默认尺寸 Active",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      size: "default",
+      active: { value: true }
+    }
+  ))
+};
+var SizeLarge = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "大尺寸",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      size: "large"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "大尺寸 Active",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      size: "large",
+      active: { value: true }
+    }
+  ))
+};
+var StateActive = {
+  render: () => {
+    const [activeKey, setActiveKey] = (0, import_react.useState)("home");
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+      import_GraphicTextCard.default,
+      {
+        text: "首页",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+        variant: "vertical-icon",
+        active: { value: activeKey === "home" },
+        onClick: () => setActiveKey("home")
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_GraphicTextCard.default,
+      {
+        text: "商城",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ShoppingOutlined, null),
+        variant: "vertical-icon",
+        active: { value: activeKey === "shop" },
+        onClick: () => setActiveKey("shop")
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_GraphicTextCard.default,
+      {
+        text: "我的",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null),
+        variant: "vertical-icon",
+        active: { value: activeKey === "user" },
+        onClick: () => setActiveKey("user")
+      }
+    ));
+  }
+};
+var StateDisabled = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "禁用状态",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      disabled: { value: true }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "正常状态",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon"
+    }
+  ))
+};
+var StateLoading = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "加载中",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      loading: {
+        value: true,
+        extra: /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { size: "small" })
+      }
+    }
+  ))
+};
+var StatePriority = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Loading > Disabled > Active",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      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_GraphicTextCard.default,
+    {
+      text: "Disabled > Active",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      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_GraphicTextCard.default,
+    {
+      text: "Active",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      active: { value: true, extra: /* @__PURE__ */ import_react.default.createElement("span", null, "Active") }
+    }
+  ))
+};
+var GraphicImagePriority = {
+  args: {
+    text: "图片优先",
+    image: "https://via.placeholder.com/100",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "vertical-image"
+  }
+};
+var GraphicConfigSize = {
+  args: {
+    text: "自定义尺寸",
+    image: "https://via.placeholder.com/100",
+    variant: "vertical-image",
+    graphicConfig: {
+      width: 100,
+      height: 100
+    }
+  }
+};
+var GraphicConfigIcon = {
+  args: {
+    text: "自定义图标",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "vertical-icon",
+    graphicConfig: {
+      iconSize: 32,
+      iconColor: "#ff4d4f",
+      background: "#fff1f0",
+      borderRadius: 8
+    }
+  }
+};
+var GraphicSlot = {
+  args: {
+    text: "自定义图形",
+    variant: "vertical-icon",
+    graphicSlot: /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          width: 64,
+          height: 64,
+          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+          borderRadius: 8,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#fff",
+          fontSize: 24
+        }
+      },
+      "🎉"
+    )
+  }
+};
+var BadgeDot = {
+  args: {
+    text: "消息",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+    variant: "vertical-icon",
+    badge: { type: "dot" }
+  }
+};
+var BadgeNumber = {
+  args: {
+    text: "消息",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+    variant: "vertical-icon",
+    badge: { type: "number", content: 99 }
+  }
+};
+var BadgeText = {
+  args: {
+    text: "活动",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.GiftOutlined, null),
+    variant: "vertical-icon",
+    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_GraphicTextCard.default,
+    {
+      text: "Top Right (默认)",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99 }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Top Left",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, offset: [-10, 0] }
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Bottom Right",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, offset: [0, 10] }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Bottom Left",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, offset: [-10, 10] }
+    }
+  )))
+};
+var BadgeSizes = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Small Badge",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, size: "small" }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Default Badge",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, size: "default" }
+    }
+  ))
+};
+var BadgeShowZero = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Hide Zero",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 0, showZero: false }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Show Zero",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 0, showZero: true }
+    }
+  ))
+};
+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_GraphicTextCard.default,
+    {
+      text: "Small Badge",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, size: "small" }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Default Badge",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99 }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Large Badge",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, size: "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_GraphicTextCard.default,
+    {
+      text: "Offset [0, 0] (默认)",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, offset: [0, 0] }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Offset [5, 5]",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, offset: [5, 5] }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Offset [10, 10]",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: { type: "number", content: 99, offset: [10, 10] }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Offset [-5, -5]",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      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_GraphicTextCard.default,
+    {
+      text: "Small + Offset",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: {
+        type: "number",
+        content: 99,
+        size: "small",
+        offset: [5, 5]
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "Default + Offset",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null),
+      variant: "vertical-icon",
+      badge: {
+        type: "number",
+        content: 99,
+        size: "default",
+        offset: [10, 10]
+      }
+    }
+  ))))
+};
+var PrefixSlot = {
+  args: {
+    text: "前置插槽",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "horizontal",
+    prefixSlot: /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          width: 4,
+          height: 40,
+          background: "#1890ff",
+          borderRadius: 2
+        }
+      }
+    )
+  }
+};
+var SuffixSlot = {
+  args: {
+    text: "后置插槽",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "horizontal",
+    suffixSlot: /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, { style: { color: "#999" } })
+  }
+};
+var TextConfig = {
+  args: {
+    text: "自定义文本",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "vertical-icon",
+    textConfig: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: "#1890ff"
+    }
+  }
+};
+var TextEllipsis = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "这是一段很长很长很长很长很长很长的文本内容这是一段很长很长很长很长很长很长的文本内容这是一段很长很长很长很长很长很长的文本内容",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "horizontal",
+      textConfig: { maxLines: 1, ellipsis: true },
+      style: { width: 200 }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "这是一段很长很长很长很长很长很长的文本内容这是一段很长很长很长很长很长很长的文本内容，会显示两行然后省略这是一段很长很长很长很长很长很长的文本内容，会显示两行然后省略这是一段很长很长很长很长很长很长的文本内容，会显示两行然后省略，会显示两行然后省略",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "horizontal",
+      textConfig: { maxLines: 2, ellipsis: true },
+      style: { width: 200 }
+    }
+  ))
+};
+var TextAlign = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "左对齐",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      textConfig: { textAlign: "left" }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "居中对齐",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      textConfig: { textAlign: "center" }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_GraphicTextCard.default,
+    {
+      text: "右对齐",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "vertical-icon",
+      textConfig: { textAlign: "right" }
+    }
+  ))
+};
+var WidthModeAuto = {
+  args: {
+    text: "自动宽度",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "horizontal",
+    widthMode: "auto",
+    maxWidth: 300
+  }
+};
+var WidthModeFixed = {
+  args: {
+    text: "固定宽度",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "horizontal",
+    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_GraphicTextCard.default,
+    {
+      text: "撑满容器",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+      variant: "horizontal",
+      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_GraphicTextCard.default,
+      {
+        text: "点击我",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+        variant: "vertical-icon",
+        onClick: () => setClicked(true)
+      }
+    ), clicked && /* @__PURE__ */ import_react.default.createElement("div", null, "已点击！"));
+  }
+};
+var NotClickable = {
+  args: {
+    text: "不可点击",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "vertical-icon",
+    clickable: false
+  }
+};
+var NavigationMenu = {
+  render: () => {
+    const [activeKey, setActiveKey] = (0, import_react.useState)("home");
+    const menuItems = [
+      { key: "home", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null), text: "首页" },
+      { key: "shop", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ShoppingOutlined, null), text: "商城" },
+      { key: "message", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MessageOutlined, null), text: "消息", badge: 5 },
+      { key: "user", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), text: "我的" }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, menuItems.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      import_GraphicTextCard.default,
+      {
+        key: item.key,
+        text: item.text,
+        icon: item.icon,
+        variant: "vertical-icon",
+        active: { value: activeKey === item.key },
+        badge: item.badge ? { type: "number", content: item.badge } : void 0,
+        onClick: () => setActiveKey(item.key)
+      }
+    )));
+  }
+};
+var ProductCategories = {
+  render: () => {
+    const categories = [
+      { id: 1, name: "电子产品", image: "https://via.placeholder.com/80" },
+      {
+        id: 2,
+        name: "服装鞋包",
+        image: "https://via.placeholder.com/80",
+        hot: true
+      },
+      { id: 3, name: "美妆护肤", image: "https://via.placeholder.com/80" },
+      {
+        id: 4,
+        name: "食品生鲜",
+        image: "https://via.placeholder.com/80",
+        badge: "New"
+      }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { wrap: true }, categories.map((category) => /* @__PURE__ */ import_react.default.createElement(
+      import_GraphicTextCard.default,
+      {
+        key: category.id,
+        text: category.name,
+        image: category.image,
+        variant: "vertical-image",
+        badge: category.hot ? { type: "text", content: "Hot", color: "#ff4d4f" } : category.badge ? { type: "text", content: category.badge, color: "#52c41a" } : void 0,
+        onClick: () => console.log("点击分类:", category.name)
+      }
+    )));
+  }
+};
+var CompleteExample = {
+  args: {
+    text: "完整示例",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.HomeOutlined, null),
+    variant: "vertical-icon",
+    size: "large",
+    badge: { type: "number", content: 99, size: "small", offset: [5, 5] },
+    textConfig: {
+      fontSize: 16,
+      fontWeight: "bold",
+      color: "#1890ff"
+    },
+    active: { value: true },
+    onClick: () => console.log("clicked")
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BadgeDot,
+  BadgeNumber,
+  BadgePositions,
+  BadgeShowZero,
+  BadgeSizeAndOffset,
+  BadgeSizes,
+  BadgeText,
+  ClickInteraction,
+  CompleteExample,
+  Default,
+  GraphicConfigIcon,
+  GraphicConfigSize,
+  GraphicImagePriority,
+  GraphicSlot,
+  MultipleCards,
+  NavigationMenu,
+  NotClickable,
+  PrefixSlot,
+  ProductCategories,
+  ReactNodeText,
+  SizeDefault,
+  SizeLarge,
+  SizeSmall,
+  StateActive,
+  StateDisabled,
+  StateLoading,
+  StatePriority,
+  SuffixSlot,
+  TextAlign,
+  TextConfig,
+  TextEllipsis,
+  VariantCard,
+  VariantHorizontal,
+  VariantVerticalIcon,
+  VariantVerticalImage,
+  WidthModeAuto,
+  WidthModeFixed,
+  WidthModeFull
+});