@pisell/materials 1.8.38 → 1.8.41

package/es/components/PisellCards/components/GraphicTextCard/docs/GraphicTextCard.md

@@ -361,38 +361,84 @@ export default () => {
 };
 ```
 
-### 角标位置
+### 角标位置和大小
+
+角标位置通过 `offset` 控制，大小通过 `size` 控制。
 
 ```tsx
 import { PisellCards } from '@pisell/materials';
 import { HomeOutlined } from '@ant-design/icons';
 
+export default () => {
+  return (
+    <div style={{ display: 'flex', gap: '16px', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', gap: '16px' }}>
+        <PisellCards.GraphicTextCard
+          text="Top Right (默认)"
+          icon={<HomeOutlined />}
+          variant="vertical-icon"
+          badge={{ type: 'number', content: 99 }}
+        />
+        <PisellCards.GraphicTextCard
+          text="Top Left"
+          icon={<HomeOutlined />}
+          variant="vertical-icon"
+          badge={{ type: 'number', content: 99, offset: [-10, 0] }}
+        />
+        <PisellCards.GraphicTextCard
+          text="Bottom Right"
+          icon={<HomeOutlined />}
+          variant="vertical-icon"
+          badge={{ type: 'number', content: 99, offset: [0, 10] }}
+        />
+        <PisellCards.GraphicTextCard
+          text="Bottom Left"
+          icon={<HomeOutlined />}
+          variant="vertical-icon"
+          badge={{ type: 'number', content: 99, offset: [-10, 10] }}
+        />
+      </div>
+      <div style={{ display: 'flex', gap: '16px' }}>
+        <PisellCards.GraphicTextCard
+          text="Small Badge"
+          icon={<HomeOutlined />}
+          variant="vertical-icon"
+          badge={{ type: 'number', content: 99, size: 'small' }}
+        />
+        <PisellCards.GraphicTextCard
+          text="Default Badge"
+          icon={<HomeOutlined />}
+          variant="vertical-icon"
+          badge={{ type: 'number', content: 99, size: 'default' }}
+        />
+      </div>
+    </div>
+  );
+};
+```
+
+### 角标显示零值
+
+通过 `showZero` 控制数字角标是否显示零值。
+
+```tsx
+import { PisellCards } from '@pisell/materials';
+import { MessageOutlined } from '@ant-design/icons';
+
 export default () => {
   return (
     <div style={{ display: 'flex', gap: '16px' }}>
       <PisellCards.GraphicTextCard
-        text="右上角"
-        icon={<HomeOutlined />}
-        variant="vertical-icon"
-        badge={{ type: 'number', content: 5, position: 'top-right' }}
-      />
-      <PisellCards.GraphicTextCard
-        text="左上角"
-        icon={<HomeOutlined />}
+        text="Hide Zero"
+        icon={<MessageOutlined />}
         variant="vertical-icon"
-        badge={{ type: 'number', content: 5, position: 'top-left' }}
+        badge={{ type: 'number', content: 0, showZero: false }}
       />
       <PisellCards.GraphicTextCard
-        text="右下角"
-        icon={<HomeOutlined />}
-        variant="vertical-icon"
-        badge={{ type: 'number', content: 5, position: 'bottom-right' }}
-      />
-      <PisellCards.GraphicTextCard
-        text="左下角"
-        icon={<HomeOutlined />}
+        text="Show Zero"
+        icon={<MessageOutlined />}
         variant="vertical-icon"
-        badge={{ type: 'number', content: 5, position: 'bottom-left' }}
+        badge={{ type: 'number', content: 0, showZero: true }}
       />
     </div>
   );
@@ -850,14 +896,28 @@ export default () => {
 
 ### BadgeConfig
 
-| 参数     | 说明                                          | 类型                                                           | 默认值        |
-| -------- | --------------------------------------------- | -------------------------------------------------------------- | ------------- |
-| type     | 角标类型                                      | `'dot' \| 'number' \| 'text'`                                  | `'dot'`       |
-| content  | 角标内容（数字或文本）                        | `ReactNode`                                                    | -             |
-| position | 角标位置                                      | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` |
-| offset   | 角标偏移量 [x, y]（正数向右/下，负数向左/上） | `[number, number]`                                             | -             |
-| color    | 角标颜色                                      | `string`                                                       | -             |
-| style    | 角标自定义样式                                | `CSSProperties`                                                | -             |
+| 参数     | 说明                   | 类型                  | 默认值   |
+| -------- | ---------------------- | --------------------- | -------- |
+| type     | 角标类型               | `'dot' \| 'number' \| 'text'` | `'dot'`  |
+| content  | 角标内容（数字或文本） | `ReactNode`           | -        |
+| offset   | 角标偏移量 [x, y]      | `[number, number]`    | -        |
+| size     | 角标大小               | `'small' \| 'default'` | -        |
+| color    | 角标颜色               | `string`              | -        |
+| style    | 角标自定义样式         | `CSSProperties`       | -        |
+| showZero | 是否显示零值           | `boolean`             | `false`  |
+
+**角标位置说明**：
+- 角标位置通过 `offset` 控制，不设置 `offset` 时默认在右上角
+- `offset` 格式为 `[x, y]`，正数向右/下偏移，负数向左/上偏移
+- 例如：`offset: [0, 0]` 为默认位置，`offset: [-10, 0]` 向左偏移，`offset: [0, 10]` 向下偏移
+
+**角标大小说明**：
+- `size: 'small'` - 小尺寸角标
+- `size: 'default'` - 默认尺寸角标（不设置时使用默认尺寸）
+
+**角标显示零值说明**：
+- `showZero: true` - 当 content 为 0 时显示角标
+- `showZero: false` - 当 content 为 0 时不显示角标（默认）
 
 ### TextConfig
 

package/es/components/PisellCards/components/GraphicTextCard/types.d.ts

@@ -68,9 +68,9 @@ interface GraphicConfig extends PisellImageCardProps {
  */
 type BadgeType = 'dot' | 'number' | 'text';
 /**
- * 角标位置
+ * 角标大小
  */
-type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type BadgeSize = 'small' | 'default';
 /**
  * 角标配置
  */
@@ -85,16 +85,19 @@ interface BadgeConfig {
    * 当 type 为 'number' 或 'text' 时有效
    */
   content?: ReactNode;
-  /**
-   * 角标位置
-   * @default 'top-right'
-   */
-  position?: BadgePosition;
   /**
    * 角标偏移量 [x, y]
    * 正数向右/下偏移，负数向左/上偏移
+   * 通过 offset 可以控制角标的位置，例如：
+   * - [0, 0] 或 不设置：默认右上角
+   * - [10, 10]：向右下偏移
+   * - [-10, -10]：向左上偏移
    */
   offset?: [number, number];
+  /**
+   * 角标大小
+   */
+  size?: BadgeSize;
   /**
    * 角标颜色
    */
@@ -103,6 +106,14 @@ interface BadgeConfig {
    * 角标自定义样式
    */
   style?: CSSProperties;
+  /**
+   * 角标是否显示零值
+   */
+  showZero?: boolean;
+  /**
+   * 角标其他属性
+   */
+  [key: string]: any;
 }
 /**
  * 文本配置

package/es/components/PisellCards/components/TextCard/TextCard.js

@@ -32,8 +32,7 @@ const _excluded = [
 	"className",
 	"style",
 	"children",
-	"dataSource",
-	"textAlign"
+	"dataSource"
 ];
 /**
 * TextCard 文本卡片组件
@@ -55,7 +54,7 @@ const _excluded = [
 * ```
 */
 const TextCard = (props) => {
-	const { text, variant = "text", size = "default", clickable = true, prefixIcon, suffixIcon, iconConfig, tag, tagConfig, badge, prefixSlot, suffixSlot, textConfig, widthMode = "auto", width, maxWidth = 400, onClick, render, active, disabled, loading, className, style, children, dataSource, textAlign } = props, restProps = _objectWithoutProperties(props, _excluded);
+	const { text, variant = "text", size = "default", clickable = true, prefixIcon, suffixIcon, iconConfig, tag, tagConfig, badge, prefixSlot, suffixSlot, textConfig, widthMode = "auto", width, maxWidth = 400, onClick, render, active, disabled, loading, className, style, children, dataSource } = props, restProps = _objectWithoutProperties(props, _excluded);
 	/**
 	* 合并状态样式
 	* 优先级：loading > disabled > active

package/es/components/PisellCards/components/TextCard/components/BadgeWrapper.js

@@ -1,9 +1,21 @@
+import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { _objectWithoutProperties } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
 import React from "react";
 import { Badge } from "antd";
 //#region src/components/PisellCards/components/TextCard/components/BadgeWrapper.tsx
+const _excluded = [
+	"type",
+	"content",
+	"offset",
+	"size",
+	"color",
+	"style",
+	"showZero"
+];
 /**
 * BadgeWrapper 角标包装组件
 * 负责角标的渲染和定位，支持红点、数字、文本三种类型
+* 位置通过 offset 控制，大小通过 size 控制
 *
 * @example
 * ```tsx
@@ -26,24 +38,26 @@ import { Badge } from "antd";
 const BadgeWrapper = (props) => {
 	const { badge, children } = props;
 	if (!badge) return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-	const { type = "dot", content, position = "top-right", offset, color, style } = badge;
+	const { type = "dot", content, offset, size, color, style, showZero = false } = badge, rest = _objectWithoutProperties(badge, _excluded);
 	/**
 	* 根据角标类型渲染不同的 Badge
 	*/
 	const renderBadge = () => {
-		if (type === "dot") return /* @__PURE__ */ React.createElement(Badge, {
+		if (type === "dot") return /* @__PURE__ */ React.createElement(Badge, _objectSpread2({
 			dot: true,
 			color,
 			offset,
+			size,
 			style
-		}, children);
-		if (type === "number" || type === "text") return /* @__PURE__ */ React.createElement(Badge, {
+		}, rest), children);
+		if (type === "number" || type === "text") return /* @__PURE__ */ React.createElement(Badge, _objectSpread2({
 			count: content,
 			color,
 			offset,
+			size,
 			style,
-			showZero: type === "number"
-		}, children);
+			showZero
+		}, rest), children);
 		return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 	};
 	return renderBadge();

package/es/components/PisellCards/components/TextCard/components/TextContent.js

@@ -64,7 +64,9 @@ const TextContent = (props) => {
 		fontWeight,
 		color,
 		ellipsis,
-		maxLines
+		maxLines,
+		textAlign,
+		flex
 	]);
 	if (active === null || active === void 0 ? void 0 : active.value) console.log("textStyle11", textStyle);
 	return /* @__PURE__ */ React.createElement("div", {

package/es/components/PisellCards/components/TextCard/docs/TextCard.$tab-dev.md

@@ -108,10 +108,12 @@ export interface TextCardProps extends PisellBasicCardProps {
   badge?: {
     type?: 'dot' | 'number' | 'text';
     content?: ReactNode;
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     offset?: [number, number];
+    size?: 'small' | 'default';
     color?: string;
     style?: CSSProperties;
+    showZero?: boolean;
+    [key: string]: any;
   };
 
   // ========== 插槽配置 ==========
@@ -470,10 +472,11 @@ const TextContent: React.FC<TextContentProps> = (props) => {
 
 ### 6.5 角标渲染
 
-使用 Ant Design Badge 组件封装：
+使用 Ant Design Badge 组件封装，位置通过 `offset` 控制，大小通过 `size` 控制，零值显示通过 `showZero` 控制：
 
 ```
 // BadgeWrapper.tsx
+import React, { CSSProperties } from 'react';
 import { Badge } from 'antd';
 
 const BadgeWrapper: React.FC<BadgeWrapperProps> = (props) => {
@@ -483,12 +486,12 @@ const BadgeWrapper: React.FC<BadgeWrapperProps> = (props) => {
     return <>{children}</>;
   }
 
-  const { type = 'dot', content, position = 'top-right', offset, color, style } = badge;
+  const { type = 'dot', content, offset, size, color, style, showZero = false, ...rest } = badge;
 
   // 根据 type 渲染不同的角标
   if (type === 'dot') {
     return (
-      <Badge dot color={color} offset={offset} style={style}>
+      <Badge dot color={color} offset={offset} size={size} style={style} {...rest}>
         {children}
       </Badge>
     );
@@ -496,7 +499,15 @@ const BadgeWrapper: React.FC<BadgeWrapperProps> = (props) => {
 
   if (type === 'number' || type === 'text') {
     return (
-      <Badge count={content} color={color} offset={offset} style={style}>
+      <Badge
+        count={content}
+        color={color}
+        offset={offset}
+        size={size}
+        style={style}
+        showZero={showZero}
+        {...rest}
+      >
         {children}
       </Badge>
     );
@@ -506,6 +517,26 @@ const BadgeWrapper: React.FC<BadgeWrapperProps> = (props) => {
 };
 ```
 
+**角标位置控制说明**：
+
+- 角标位置通过 `offset` 控制，不设置 `offset` 时默认在右上角
+- `offset` 格式为 `[x, y]`，正数向右/下偏移，负数向左/上偏移
+- 例如：`offset: [0, 0]` 为默认位置，`offset: [-10, 0]` 向左偏移，`offset: [0, 10]` 向下偏移
+
+**角标大小控制说明**：
+
+- 角标大小通过 `size` 属性控制，可选值：`'small' | 'default'`
+- `size='small'` 时显示小尺寸角标
+- `size='default'` 时显示默认尺寸角标
+- 不设置 `size` 时使用默认尺寸
+
+**角标显示零值说明**：
+
+- 通过 `showZero` 属性控制数字角标是否显示零值
+- `showZero=true` 时，当 `content` 为 0 时显示角标
+- `showZero=false` 时，当 `content` 为 0 时不显示角标（默认）
+- 非零值不受 `showZero` 影响，正常显示
+
 ### 6.6 主组件实现
 
 ```