@yoka-ui/ui 1.1.1 → 1.1.5

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.1",
+    "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",