@yoka-ui/ui 1.1.4 → 1.1.5

package/@Docs-yoka/exports.generated.md

@@ -1,13 +1,13 @@
 # @yoka-ui/ui 具名导出表
 
 > **自动生成**：`pnpm run generate:yoka-llms`（源文件 `src/index.tsx`）  
-> **包版本**：`1.1.4`  
-> **生成时间**：`2026-06-05T02:58:26.197Z`  
+> **包版本**：`1.1.5`  
+> **生成时间**：`2026-06-05T12:32:42.007Z`  
 > 请勿手动编辑本文件；修改导出请改 `src/index.tsx` 后重新运行上述命令。
 
 ## 使用约定（给 LLM / 业务开发者）
 
-- **包名**：`@yoka-ui/ui`（npm 公网）；可选 Git 安装：`@yoka-ui/ui`: `git+http://gitlab.sh.com/web/yoka-ui.git#v1.1.4` 等，以实际 tag 为准
+- **包名**：`@yoka-ui/ui`（npm 公网）；可选 Git 安装：`@yoka-ui/ui`: `git+http://gitlab.sh.com/web/yoka-ui.git#v1.1.5` 等，以实际 tag 为准
 - **导入**：仅使用下表中的**具名**导出（组件/值与 `export type` 类型），与发布产物 `dist/es/index.d.ts` 一致；勿臆造未列出符号。
 - **全局样式（常用）**：业务入口引入一行，例如 `import '@yoka-ui/ui/dist/index.less'`（若以 README / 实际产物路径为准）。
 - **技术栈**：React 18、Ant Design 5；复杂表单/表格优先使用库内封装（`InputTheme`、`TableTheme`、`ModCommonFilter` 等），需要原生 antd API 时查阅 [Ant Design 文档](https://ant.design) 或本仓库 `@Docs/llms.txt`（克隆源码时可用）。

package/dist/es/index.less

@@ -34,6 +34,7 @@
 @import "../../src/creative/ButtonWithProgress/index.less";
 @import "../../src/creative/GlassSegmentedRadio/index.module.less";
 @import "../../src/creative/SkillsWriter/index.module.less";
+@import "../../src/layout/YkContainer/index.module.less";
 @import "../../src/layout/YkDrawer/index.module.less";
 @import "../../src/Themes/TableTheme/index.less";
 @import "../../src/ui/LogicOperator/index.module.less";

package/dist/es/layout/YkContainer/index.d.ts

@@ -1,27 +1,37 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export type YkContainerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
-    /** 页头左侧标题，字号 18px、颜色 #3b82fe；存在 `headerLeft` 时不展示 */
+    /** 页头左侧主标题，字号18px、#3b82fe；headerLeft存在时不展示title与subTitle */
     title?: React.ReactNode;
-    /** 自定义页头左侧，优先级高于 `title` */
+    /** 页头左侧二级副标题，与title同行、下边线对齐；headerLeft优先级更高 */
+    subTitle?: React.ReactNode;
+    /** 自定义左侧整区域，优先级 > title+subTitle */
     headerLeft?: React.ReactNode;
-    /** 页头右侧插槽 */
+    /** 右侧操作插槽：元素过多自动换行展示为两行及以上 */
     headerRight?: React.ReactNode;
-    /** 是否展示页头，默认 true */
+    /** 是否渲染顶部固定页头，默认true */
     showHeader?: boolean;
 };
 /**
- * 页面内容区布局容器（语义上类似 Pro PageContainer 的内容包裹层）：
- * 顶部可选固定（sticky）页头，左右插槽；下方区域左右与底部留白 10px、顶部与页头间距 10px；
- * 子元素纵向排列，间距 10px。
+ * Yoka页面全局容器组件
+ * 1. 顶部sticky吸顶页头：左侧主/副标题同行下边线对齐、右侧自适应操作区（按钮过多自动换行两行）
+ * 2. 容器内部上下左右留白，子内容纵向间距10px，适配BI报表页面布局
+ * 3. 遵循项目antd/yoka-ui规范，样式使用CSS Modules Less
+ * @param title 主标题
+ * @param subTitle 二级副标题，与title同行
+ * @param headerLeft 自定义左侧全量插槽
+ * @param headerRight 右侧操作区域，内容自动换行
+ * @param showHeader 是否显示头部
  */
-declare const YkContainer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
-    /** 页头左侧标题，字号 18px、颜色 #3b82fe；存在 `headerLeft` 时不展示 */
+declare const YkContainer: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** 页头左侧主标题，字号18px、#3b82fe；headerLeft存在时不展示title与subTitle */
     title?: React.ReactNode;
-    /** 自定义页头左侧，优先级高于 `title` */
+    /** 页头左侧二级副标题，与title同行、下边线对齐；headerLeft优先级更高 */
+    subTitle?: React.ReactNode;
+    /** 自定义左侧整区域，优先级 > title+subTitle */
     headerLeft?: React.ReactNode;
-    /** 页头右侧插槽 */
+    /** 右侧操作插槽：元素过多自动换行展示为两行及以上 */
     headerRight?: React.ReactNode;
-    /** 是否展示页头，默认 true */
+    /** 是否渲染顶部固定页头，默认true */
     showHeader?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>>;
 export default YkContainer;

package/dist/es/layout/YkContainer/index.js

@@ -29,47 +29,13 @@ var __objRest = (source, exclude) => {
 
 // src/layout/YkContainer/index.tsx
 import classNames from "classnames";
-import React from "react";
-var headerBarStyle = {
-  position: "sticky",
-  top: 0,
-  zIndex: 10,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: 12,
-  minHeight: 60,
-  padding: "10px 20px",
-  boxSizing: "border-box",
-  background: "#fff"
-};
-var titleStyle = {
-  margin: 0,
-  fontSize: 18,
-  fontWeight: 600,
-  lineHeight: "24px",
-  color: "#3b82fe"
-};
-var YkContainer = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, style, children, title, headerLeft, headerRight, showHeader = true } = _b, rest = __objRest(_b, ["className", "style", "children", "title", "headerLeft", "headerRight", "showHeader"]);
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      __spreadValues({
-        ref,
-        className: classNames("yoka-container", className),
-        style: __spreadValues({
-          display: "flex",
-          flexDirection: "column",
-          gap: 10,
-          padding: "0 10px 10px",
-          boxSizing: "border-box"
-        }, style)
-      }, rest),
-      showHeader ? /* @__PURE__ */ React.createElement("header", { style: headerBarStyle, className: "yoka-yk-container-header" }, /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center" } }, headerLeft !== void 0 && headerLeft !== null ? headerLeft : title != null && title !== "" ? /* @__PURE__ */ React.createElement("div", { style: titleStyle }, title) : null), headerRight ? /* @__PURE__ */ React.createElement("div", { style: { flexShrink: 0, display: "flex", alignItems: "center" } }, headerRight) : null) : null,
-      children
-    );
-  }
+import React, { forwardRef, memo } from "react";
+import styles from "./index.module.less";
+var YkContainer = memo(
+  forwardRef((props, ref) => {
+    const _a = props, { className, style, children, title, subTitle, headerLeft, headerRight, showHeader = true } = _a, rest = __objRest(_a, ["className", "style", "children", "title", "subTitle", "headerLeft", "headerRight", "showHeader"]);
+    return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: classNames("yoka-container", styles.containerWrap, className), style }, rest), showHeader && /* @__PURE__ */ React.createElement("header", { className: styles.headerBar }, /* @__PURE__ */ React.createElement("div", { className: styles.headerLeftWrap }, headerLeft != null ? headerLeft : /* @__PURE__ */ React.createElement("div", { className: styles.titleRow }, title && /* @__PURE__ */ React.createElement("div", { className: styles.mainTitle }, title), subTitle && /* @__PURE__ */ React.createElement("div", { className: styles.subTitle }, subTitle))), headerRight && /* @__PURE__ */ React.createElement("div", { className: styles.headerRightWrap }, headerRight)), /* @__PURE__ */ React.createElement("div", { className: styles.contentWrap }, children));
+  })
 );
 YkContainer.displayName = "YkContainer";
 var YkContainer_default = YkContainer;

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

@@ -1,7 +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,OAAO,gBAAgB;AACvB,OAAO,WAAW;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,MAAM;AAAA,EACxB,CAAC,IAA4F,QAAK;AAAjG,iBAAE,aAAW,OAAO,UAAU,OAAO,YAAY,aAAa,aAAa,KA1C9E,IA0CG,IAAoF,iBAApF,IAAoF,CAAlF,aAAW,SAAO,YAAU,SAAO,cAAY,eAAa;AAC7D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,kBAAkB,SAAS;AAAA,QACjD,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,WACR;AAAA,SAED;AAAA,MAEH,aACC,oCAAC,YAAO,OAAO,gBAAgB,WAAU,8BACvC,oCAAC,SAAI,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,QAAQ,YAAY,SAAS,KACvE,eAAe,UAAa,eAAe,OAC1C,aACE,SAAS,QAAQ,UAAU,KAC7B,oCAAC,SAAI,OAAO,cAAa,KAAM,IAC7B,IACN,GACC,cACC,oCAAC,SAAI,OAAO,EAAE,YAAY,GAAG,SAAS,QAAQ,YAAY,SAAS,KAAI,WAAY,IACjF,IACN,IACE;AAAA,MACH;AAAA,IACH;AAAA;AAEJ;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;",
+  "sourcesContent": ["import classNames from 'classnames';\nimport React, { forwardRef, memo, ReactNode } from 'react';\nimport styles from './index.module.less';\n\nexport type YkContainerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n  /** 页头左侧主标题，字号18px、#3b82fe；headerLeft存在时不展示title与subTitle */\n  title?: React.ReactNode;\n  /** 页头左侧二级副标题，与title同行、下边线对齐；headerLeft优先级更高 */\n  subTitle?: React.ReactNode;\n  /** 自定义左侧整区域，优先级 > title+subTitle */\n  headerLeft?: React.ReactNode;\n  /** 右侧操作插槽：元素过多自动换行展示为两行及以上 */\n  headerRight?: React.ReactNode;\n  /** 是否渲染顶部固定页头，默认true */\n  showHeader?: boolean;\n};\n\n/**\n * Yoka页面全局容器组件\n * 1. 顶部sticky吸顶页头：左侧主/副标题同行下边线对齐、右侧自适应操作区（按钮过多自动换行两行）\n * 2. 容器内部上下左右留白，子内容纵向间距10px，适配BI报表页面布局\n * 3. 遵循项目antd/yoka-ui规范，样式使用CSS Modules Less\n * @param title 主标题\n * @param subTitle 二级副标题，与title同行\n * @param headerLeft 自定义左侧全量插槽\n * @param headerRight 右侧操作区域，内容自动换行\n * @param showHeader 是否显示头部\n */\nconst YkContainer = memo(\n  forwardRef<HTMLDivElement, YkContainerProps>((props, ref) => {\n    const { className, style, children, title, subTitle, headerLeft, headerRight, showHeader = true, ...rest } = props;\n\n    return (\n      <div ref={ref} className={classNames('yoka-container', styles.containerWrap, className)} style={style} {...rest}>\n        {showHeader && (\n          <header className={styles.headerBar}>\n            {/* 左侧标题区 */}\n            <div className={styles.headerLeftWrap}>\n              {headerLeft ?? (\n                <div className={styles.titleRow}>\n                  {title && <div className={styles.mainTitle}>{title}</div>}\n                  {subTitle && <div className={styles.subTitle}>{subTitle}</div>}\n                </div>\n              )}\n            </div>\n            {/* 右侧操作区：核心flex-wrap:wrap 超出自动换行两行 */}\n            {headerRight && <div className={styles.headerRightWrap}>{headerRight}</div>}\n          </header>\n        )}\n        {/* 页面主体内容 */}\n        <div className={styles.contentWrap}>{children}</div>\n      </div>\n    );\n  }),\n);\n\nYkContainer.displayName = 'YkContainer';\nexport default YkContainer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS,YAAY,YAAuB;AACnD,OAAO,YAAY;AA0BnB,IAAM,cAAc;AAAA,EAClB,WAA6C,CAAC,OAAO,QAAQ;AAC3D,UAA6G,YAArG,aAAW,OAAO,UAAU,OAAO,UAAU,YAAY,aAAa,aAAa,KA9B/F,IA8BiH,IAAT,iBAAS,IAAT,CAA5F,aAAW,SAAO,YAAU,SAAO,YAAU,cAAY,eAAa;AAE9E,WACE,oCAAC,wBAAI,KAAU,WAAW,WAAW,kBAAkB,OAAO,eAAe,SAAS,GAAG,SAAkB,OACxG,cACC,oCAAC,YAAO,WAAW,OAAO,aAExB,oCAAC,SAAI,WAAW,OAAO,kBACpB,kCACC,oCAAC,SAAI,WAAW,OAAO,YACpB,SAAS,oCAAC,SAAI,WAAW,OAAO,aAAY,KAAM,GAClD,YAAY,oCAAC,SAAI,WAAW,OAAO,YAAW,QAAS,CAC1D,CAEJ,GAEC,eAAe,oCAAC,SAAI,WAAW,OAAO,mBAAkB,WAAY,CACvE,GAGF,oCAAC,SAAI,WAAW,OAAO,eAAc,QAAS,CAChD;AAAA,EAEJ,CAAC;AACH;AAEA,YAAY,cAAc;AAC1B,IAAO,sBAAQ;",
   "names": []
 }

package/dist/es/layout/YkContainer/index.module.less

@@ -0,0 +1,73 @@
+.containerWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 10px 10px;
+  box-sizing: border-box;
+}
+
+// 顶部吸顶头部容器
+.headerBar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 10px 20px;
+  min-height: 60px;
+  background: #fff;
+  box-sizing: border-box;
+  gap: 12px;
+}
+
+// 左侧标题区域
+.headerLeftWrap {
+  flex: 1;
+  min-width: 0;
+
+  .titleRow {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+  }
+
+  .mainTitle {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+    color: #3b82fe;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .subTitle {
+    font-size: 14px;
+    line-height: 24px;
+    color: #666;
+    word-break: break-all;
+  }
+}
+
+// 右侧操作区【关键：自动换行】
+.headerRightWrap {
+  flex-shrink: 0;
+  display: flex;
+  flex-wrap: wrap; // 空间不足自动换行，实现两行布局
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px; // 按钮横向间距
+  row-gap: 8px; // 换行后两行纵向间距
+  max-width: 55%; // 限制最大宽度，避免挤压左侧标题
+
+  // 适配antd/yoka-ui按钮、标签等组件
+  :global(.ant-btn, .yoka-btn) {
+    flex-shrink: 0;
+  }
+}
+
+// 页面内容区
+.contentWrap {
+  width: 100%;
+}

package/dist/lib/index.less

@@ -34,6 +34,7 @@
 @import "../../src/creative/ButtonWithProgress/index.less";
 @import "../../src/creative/GlassSegmentedRadio/index.module.less";
 @import "../../src/creative/SkillsWriter/index.module.less";
+@import "../../src/layout/YkContainer/index.module.less";
 @import "../../src/layout/YkDrawer/index.module.less";
 @import "../../src/Themes/TableTheme/index.less";
 @import "../../src/ui/LogicOperator/index.module.less";

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

@@ -1,27 +1,37 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export type YkContainerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
-    /** 页头左侧标题，字号 18px、颜色 #3b82fe；存在 `headerLeft` 时不展示 */
+    /** 页头左侧主标题，字号18px、#3b82fe；headerLeft存在时不展示title与subTitle */
     title?: React.ReactNode;
-    /** 自定义页头左侧，优先级高于 `title` */
+    /** 页头左侧二级副标题，与title同行、下边线对齐；headerLeft优先级更高 */
+    subTitle?: React.ReactNode;
+    /** 自定义左侧整区域，优先级 > title+subTitle */
     headerLeft?: React.ReactNode;
-    /** 页头右侧插槽 */
+    /** 右侧操作插槽：元素过多自动换行展示为两行及以上 */
     headerRight?: React.ReactNode;
-    /** 是否展示页头，默认 true */
+    /** 是否渲染顶部固定页头，默认true */
     showHeader?: boolean;
 };
 /**
- * 页面内容区布局容器（语义上类似 Pro PageContainer 的内容包裹层）：
- * 顶部可选固定（sticky）页头，左右插槽；下方区域左右与底部留白 10px、顶部与页头间距 10px；
- * 子元素纵向排列，间距 10px。
+ * Yoka页面全局容器组件
+ * 1. 顶部sticky吸顶页头：左侧主/副标题同行下边线对齐、右侧自适应操作区（按钮过多自动换行两行）
+ * 2. 容器内部上下左右留白，子内容纵向间距10px，适配BI报表页面布局
+ * 3. 遵循项目antd/yoka-ui规范，样式使用CSS Modules Less
+ * @param title 主标题
+ * @param subTitle 二级副标题，与title同行
+ * @param headerLeft 自定义左侧全量插槽
+ * @param headerRight 右侧操作区域，内容自动换行
+ * @param showHeader 是否显示头部
  */
-declare const YkContainer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
-    /** 页头左侧标题，字号 18px、颜色 #3b82fe；存在 `headerLeft` 时不展示 */
+declare const YkContainer: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** 页头左侧主标题，字号18px、#3b82fe；headerLeft存在时不展示title与subTitle */
     title?: React.ReactNode;
-    /** 自定义页头左侧，优先级高于 `title` */
+    /** 页头左侧二级副标题，与title同行、下边线对齐；headerLeft优先级更高 */
+    subTitle?: React.ReactNode;
+    /** 自定义左侧整区域，优先级 > title+subTitle */
     headerLeft?: React.ReactNode;
-    /** 页头右侧插槽 */
+    /** 右侧操作插槽：元素过多自动换行展示为两行及以上 */
     headerRight?: React.ReactNode;
-    /** 是否展示页头，默认 true */
+    /** 是否渲染顶部固定页头，默认true */
     showHeader?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>>;
 export default YkContainer;

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

@@ -34,45 +34,12 @@ __export(YkContainer_exports, {
 module.exports = __toCommonJS(YkContainer_exports);
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
-var headerBarStyle = {
-  position: "sticky",
-  top: 0,
-  zIndex: 10,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: 12,
-  minHeight: 60,
-  padding: "10px 20px",
-  boxSizing: "border-box",
-  background: "#fff"
-};
-var titleStyle = {
-  margin: 0,
-  fontSize: 18,
-  fontWeight: 600,
-  lineHeight: "24px",
-  color: "#3b82fe"
-};
-var YkContainer = import_react.default.forwardRef(
-  ({ className, style, children, title, headerLeft, headerRight, showHeader = true, ...rest }, ref) => /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      ref,
-      className: (0, import_classnames.default)("yoka-container", className),
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 10,
-        padding: "0 10px 10px",
-        boxSizing: "border-box",
-        ...style
-      },
-      ...rest
-    },
-    showHeader ? /* @__PURE__ */ import_react.default.createElement("header", { style: headerBarStyle, className: "yoka-yk-container-header" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center" } }, headerLeft !== void 0 && headerLeft !== null ? headerLeft : title != null && title !== "" ? /* @__PURE__ */ import_react.default.createElement("div", { style: titleStyle }, title) : null), headerRight ? /* @__PURE__ */ import_react.default.createElement("div", { style: { flexShrink: 0, display: "flex", alignItems: "center" } }, headerRight) : null) : null,
-    children
-  )
+var import_index_module = __toESM(require("./index.module.less"));
+var YkContainer = (0, import_react.memo)(
+  (0, import_react.forwardRef)((props, ref) => {
+    const { className, style, children, title, subTitle, headerLeft, headerRight, showHeader = true, ...rest } = props;
+    return /* @__PURE__ */ import_react.default.createElement("div", { ref, className: (0, import_classnames.default)("yoka-container", import_index_module.default.containerWrap, className), style, ...rest }, showHeader && /* @__PURE__ */ import_react.default.createElement("header", { className: import_index_module.default.headerBar }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.headerLeftWrap }, headerLeft ?? /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.titleRow }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.mainTitle }, title), subTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.subTitle }, subTitle))), headerRight && /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.headerRightWrap }, headerRight)), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.contentWrap }, children));
+  })
 );
 YkContainer.displayName = "YkContainer";
 var YkContainer_default = YkContainer;

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

@@ -1,7 +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"]
+  "sourcesContent": ["import classNames from 'classnames';\nimport React, { forwardRef, memo, ReactNode } from 'react';\nimport styles from './index.module.less';\n\nexport type YkContainerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n  /** 页头左侧主标题，字号18px、#3b82fe；headerLeft存在时不展示title与subTitle */\n  title?: React.ReactNode;\n  /** 页头左侧二级副标题，与title同行、下边线对齐；headerLeft优先级更高 */\n  subTitle?: React.ReactNode;\n  /** 自定义左侧整区域，优先级 > title+subTitle */\n  headerLeft?: React.ReactNode;\n  /** 右侧操作插槽：元素过多自动换行展示为两行及以上 */\n  headerRight?: React.ReactNode;\n  /** 是否渲染顶部固定页头，默认true */\n  showHeader?: boolean;\n};\n\n/**\n * Yoka页面全局容器组件\n * 1. 顶部sticky吸顶页头：左侧主/副标题同行下边线对齐、右侧自适应操作区（按钮过多自动换行两行）\n * 2. 容器内部上下左右留白，子内容纵向间距10px，适配BI报表页面布局\n * 3. 遵循项目antd/yoka-ui规范，样式使用CSS Modules Less\n * @param title 主标题\n * @param subTitle 二级副标题，与title同行\n * @param headerLeft 自定义左侧全量插槽\n * @param headerRight 右侧操作区域，内容自动换行\n * @param showHeader 是否显示头部\n */\nconst YkContainer = memo(\n  forwardRef<HTMLDivElement, YkContainerProps>((props, ref) => {\n    const { className, style, children, title, subTitle, headerLeft, headerRight, showHeader = true, ...rest } = props;\n\n    return (\n      <div ref={ref} className={classNames('yoka-container', styles.containerWrap, className)} style={style} {...rest}>\n        {showHeader && (\n          <header className={styles.headerBar}>\n            {/* 左侧标题区 */}\n            <div className={styles.headerLeftWrap}>\n              {headerLeft ?? (\n                <div className={styles.titleRow}>\n                  {title && <div className={styles.mainTitle}>{title}</div>}\n                  {subTitle && <div className={styles.subTitle}>{subTitle}</div>}\n                </div>\n              )}\n            </div>\n            {/* 右侧操作区：核心flex-wrap:wrap 超出自动换行两行 */}\n            {headerRight && <div className={styles.headerRightWrap}>{headerRight}</div>}\n          </header>\n        )}\n        {/* 页面主体内容 */}\n        <div className={styles.contentWrap}>{children}</div>\n      </div>\n    );\n  }),\n);\n\nYkContainer.displayName = 'YkContainer';\nexport default YkContainer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,mBAAmD;AACnD,0BAAmB;AA0BnB,IAAM,kBAAc;AAAA,MAClB,yBAA6C,CAAC,OAAO,QAAQ;AAC3D,UAAM,EAAE,WAAW,OAAO,UAAU,OAAO,UAAU,YAAY,aAAa,aAAa,MAAM,GAAG,KAAK,IAAI;AAE7G,WACE,6BAAAA,QAAA,cAAC,SAAI,KAAU,eAAW,kBAAAC,SAAW,kBAAkB,oBAAAC,QAAO,eAAe,SAAS,GAAG,OAAe,GAAG,QACxG,cACC,6BAAAF,QAAA,cAAC,YAAO,WAAW,oBAAAE,QAAO,aAExB,6BAAAF,QAAA,cAAC,SAAI,WAAW,oBAAAE,QAAO,kBACpB,cACC,6BAAAF,QAAA,cAAC,SAAI,WAAW,oBAAAE,QAAO,YACpB,SAAS,6BAAAF,QAAA,cAAC,SAAI,WAAW,oBAAAE,QAAO,aAAY,KAAM,GAClD,YAAY,6BAAAF,QAAA,cAAC,SAAI,WAAW,oBAAAE,QAAO,YAAW,QAAS,CAC1D,CAEJ,GAEC,eAAe,6BAAAF,QAAA,cAAC,SAAI,WAAW,oBAAAE,QAAO,mBAAkB,WAAY,CACvE,GAGF,6BAAAF,QAAA,cAAC,SAAI,WAAW,oBAAAE,QAAO,eAAc,QAAS,CAChD;AAAA,EAEJ,CAAC;AACH;AAEA,YAAY,cAAc;AAC1B,IAAO,sBAAQ;",
+  "names": ["React", "classNames", "styles"]
 }

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

@@ -0,0 +1,73 @@
+.containerWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 10px 10px;
+  box-sizing: border-box;
+}
+
+// 顶部吸顶头部容器
+.headerBar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 10px 20px;
+  min-height: 60px;
+  background: #fff;
+  box-sizing: border-box;
+  gap: 12px;
+}
+
+// 左侧标题区域
+.headerLeftWrap {
+  flex: 1;
+  min-width: 0;
+
+  .titleRow {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+  }
+
+  .mainTitle {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+    color: #3b82fe;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .subTitle {
+    font-size: 14px;
+    line-height: 24px;
+    color: #666;
+    word-break: break-all;
+  }
+}
+
+// 右侧操作区【关键：自动换行】
+.headerRightWrap {
+  flex-shrink: 0;
+  display: flex;
+  flex-wrap: wrap; // 空间不足自动换行，实现两行布局
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px; // 按钮横向间距
+  row-gap: 8px; // 换行后两行纵向间距
+  max-width: 55%; // 限制最大宽度，避免挤压左侧标题
+
+  // 适配antd/yoka-ui按钮、标签等组件
+  :global(.ant-btn, .yoka-btn) {
+    flex-shrink: 0;
+  }
+}
+
+// 页面内容区
+.contentWrap {
+  width: 100%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yoka-ui/ui",
-    "version": "1.1.4",
+    "version": "1.1.5",
     "private": false,
     "description": "",
     "homepage": "",
@@ -102,10 +102,11 @@
         "@changesets/cli": "^2.27.1",
         "@commitlint/cli": "^20.5.0",
         "@commitlint/config-conventional": "^20.5.0",
-        "@storybook/addon-a11y": "10.3.5",
-        "@storybook/addon-docs": "10.3.5",
+        "@storybook/addon-a11y": "10.4.1",
+        "@storybook/addon-docs": "10.4.1",
         "@storybook/addon-webpack5-compiler-swc": "4.0.3",
-        "@storybook/react-webpack5": "10.3.5",
+        "@storybook/react": "10.4.1",
+        "@storybook/react-webpack5": "10.4.1",
         "@storybook/test-runner": "0.24.3",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^13.4.0",
@@ -128,7 +129,7 @@
         "less-loader": "^12.3.2",
         "lint-staged": "^16.2.7",
         "rimraf": "^6.1.2",
-        "storybook": "^10.3.5",
+        "storybook": "^10.4.1",
         "style-loader": "^4.0.0",
         "stylelint": "^14",
         "ts-node": "^10.9.1",
@@ -148,11 +149,6 @@
             "npx @biomejs/biome check --write"
         ]
     },
-    "pnpm": {
-        "onlyBuiltDependencies": [
-            "esbuild"
-        ]
-    },
     "publishConfig": {
         "access": "public"
     }