@zat-design/sisyphus-react 4.7.0-beta.2 → 4.7.1

package/es/ProLayout/style/index.less

@@ -1,4 +1,5 @@
 @import '../../style/variables.less';
+@import './variables.less';
 @import '../components/Layout/index.less';
 @import '../components/ProCollapse/style/index.less';
 @import '../components/ProFooter/style/index.less';
@@ -6,6 +7,12 @@
 @import '../components/TabsManager/style/index.less';
 
 .pro-layout {
+  --pro-layout-menu-fold-width: @pro-layout-menu-fold-width;
+
+  &.pro-layout-show-collapsed-menu-label {
+    --pro-layout-menu-fold-width: @pro-layout-menu-label-width;
+  }
+
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -138,6 +145,10 @@
             color: #fff;
           }
 
+          h2 {
+            color: var(--zaui-base-bg, #ffffff);
+          }
+
           &::before {
             position: absolute;
             top: 4px;
@@ -174,6 +185,16 @@
     }
   }
 
+  .pro-layout-menu-fold-show-label .pro-layout-menu-fold-list li {
+    &.active::before,
+    &:hover::before {
+      top: 0;
+      left: 8px;
+      width: calc(100% - 16px);
+      height: 56px;
+    }
+  }
+
   .pro-layout-menu-collapsed {
     background: #f7f9fd;
     border-right: none;
@@ -291,7 +312,7 @@
   .pro-layout-tabs-bar-wrapper {
     // 与 pro-layout-content 对齐：同样的左右边距，无内边距让 tab 从左侧直接对齐
     margin-right: var(--zaui-space-size-md, 16px);
-    margin-left: 48px;
+    margin-left: @pro-layout-menu-fold-size;
     padding: 0;
     // 滚动时固定在 header 和 notice 正下方
     position: sticky;
@@ -314,7 +335,7 @@
 
     // 菜单展开时与内容区同步右移
     &.tabs-menu-open {
-      margin-left: 220px;
+      margin-left: @pro-layout-menu-open-width;
     }
 
     // Tab 存在时展开
@@ -337,7 +358,7 @@
     margin-top: 0;
     margin-right: var(--zaui-space-size-md, 16px);
     margin-bottom: 0;
-    margin-left: 48px;
+    margin-left: @pro-layout-menu-fold-size;
     padding: 0 var(--zaui-space-size-md, 16px);
     background: #ffffff;
     border-top: 1px solid rgb(235 236 238);

package/es/ProLayout/style/variables.less

@@ -0,0 +1,4 @@
+@pro-layout-menu-fold-width: 48px;
+@pro-layout-menu-label-width: 72px;
+@pro-layout-menu-fold-size: var(--pro-layout-menu-fold-width, @pro-layout-menu-fold-width);
+@pro-layout-menu-open-width: 220px;

package/es/ProUpload/components/ButtonRender.js

@@ -5,6 +5,7 @@ import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
 import { CloudUploadOutlined } from "@ant-design/icons";
 import { FileItem } from "./FileItem";
 import { DraggableUploadListItem } from "./DraggableUploadListItem";
+import { isEmptyReactNode } from "../../utils";
 import locale from "../../locale";
 const ButtonRender = (props) => {
   var _a, _b;
@@ -46,13 +47,14 @@ const ButtonRender = (props) => {
       ) });
     }
   };
+  const tipText = typeof extraTipText === "function" ? extraTipText() : extraTipText;
   return /* @__PURE__ */ jsxs("div", { className: "pro-upload-button", children: [
     /* @__PURE__ */ jsx(DndContext, { sensors: [sensor], onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: fileList.map((i) => i.uid), strategy: rectSortingStrategy, children: /* @__PURE__ */ jsx(Upload, { ...buttonUploadProps, children: !isView && /* @__PURE__ */ jsxs("div", { className: "pro-upload-button-inner", children: [
       /* @__PURE__ */ jsxs(Button, { ...buttonProps, disabled: disabled || isView, children: [
         /* @__PURE__ */ jsx(CloudUploadOutlined, {}),
         buttonText
       ] }),
-      afterRender ? /* @__PURE__ */ jsx(
+      !isEmptyReactNode(afterRender) ? /* @__PURE__ */ jsx(
         "div",
         {
           className: "pro-upload-button-inner-right",
@@ -61,7 +63,7 @@ const ButtonRender = (props) => {
         }
       ) : null
     ] }) }) }) }),
-    extraTipText && /* @__PURE__ */ jsx("div", { className: "upload-tip-txt", children: typeof extraTipText === "function" ? extraTipText() : extraTipText })
+    !isEmptyReactNode(tipText) && /* @__PURE__ */ jsx("div", { className: "upload-tip-txt", children: tipText })
   ] });
 };
 var ButtonRender_default = ButtonRender;

package/es/ProUpload/components/DragRender.js

@@ -6,6 +6,7 @@ import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
 import { CloudUploadOutlined } from "@ant-design/icons";
 import { DragSingleFileItem, FileItem, getFileExt, getFileIcon } from "./FileItem";
 import { DraggableUploadListItem } from "./DraggableUploadListItem";
+import { isEmptyReactNode } from "../../utils";
 import locale from "../../locale";
 const { Dragger } = Upload;
 const DragRender = (props) => {
@@ -88,9 +89,11 @@ const DragRender = (props) => {
     disabled,
     openFileDialogOnClick: !showDraggerSingleRender
   };
+  const header = headerRender();
+  const footer = footerRender();
   return /* @__PURE__ */ jsxs("div", { className: "pro-upload-dragger", children: [
     /* @__PURE__ */ jsxs("div", { className: "pro-upload-handle-box", children: [
-      /* @__PURE__ */ jsx("div", { className: "pro-upload-dragger-header", children: headerRender() }),
+      !isEmptyReactNode(header) && /* @__PURE__ */ jsx("div", { className: "pro-upload-dragger-header", children: header }),
       /* @__PURE__ */ jsx(Dragger, { ...dragUploadProps, children: /* @__PURE__ */ jsxs("div", { className: "drag-upload-inner", ref: refReSelect, children: [
         !showDraggerSingleRender && /* @__PURE__ */ jsxs("div", { className: "upload-dragger-control", children: [
           /* @__PURE__ */ jsxs("div", { className: "dragger-txt-line1", children: [
@@ -108,11 +111,11 @@ const DragRender = (props) => {
             "：",
             extExt.length > 0 ? extExt.join("、") : `${(_h = (_g = locale) == null ? void 0 : _g.ProUpload) == null ? void 0 : _h.draggerLimitless}`
           ] }),
-          customTextRender && /* @__PURE__ */ jsx("p", { className: "file-ext", children: customTextRender })
+          !isEmptyReactNode(customTextRender) && /* @__PURE__ */ jsx("p", { className: "file-ext", children: customTextRender })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "dragger-file-show", children: showDraggerSingleRender && draggerSingleRender(fileList[0]) })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "pro-upload-dragger-footer", children: footerRender() })
+      !isEmptyReactNode(footer) && /* @__PURE__ */ jsx("div", { className: "pro-upload-dragger-footer", children: footer })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "pro-upload-file-list", children: /* @__PURE__ */ jsx(DndContext, { sensors: [sensor], onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: fileList.map((i) => i.uid), strategy: rectSortingStrategy, children: maxCount > 1 && fileList.map((file) => {
       return /* @__PURE__ */ jsx(DraggableUploadListItem, { file, children: /* @__PURE__ */ jsx(

package/es/ProUpload/components/ImageRender.js

@@ -9,6 +9,7 @@ import { PlusOutlined } from "@ant-design/icons";
 import { Example } from "./Example";
 import { getFileExt, getFileIcon } from "./FileItem";
 import { DraggableUploadListItem } from "./DraggableUploadListItem";
+import { isEmptyReactNode } from "../../utils";
 import lookSvg from "../../assets/look.svg";
 import deleteSvg from "../../assets/delete.svg";
 import downloadSvg from "../../assets/download.svg";
@@ -149,31 +150,37 @@ const ImageRender = (props) => {
       ) });
     }
   };
-  return /* @__PURE__ */ jsxs(Space, { orientation: "vertical", size: 8, className: "pro-upload-image", children: [
-    headerRender(),
-    /* @__PURE__ */ jsxs("div", { className: "pro-upload-image", children: [
-      /* @__PURE__ */ jsx(DndContext, { sensors: [sensor], onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: fileList.map((i) => i.uid), strategy: rectSortingStrategy, children: /* @__PURE__ */ jsx(Upload, { ...imageUploadProps, children: fileList.length < maxCount && !isView && (centerRender ? isFunction(centerRender) ? centerRender() : centerRender : /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `pro-upload-image-inner ${disabled ? "pro-upload-image-disabled" : ""} `,
-          children: [
-            /* @__PURE__ */ jsx(PlusOutlined, {}),
-            /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: (_b = (_a = locale) == null ? void 0 : _a.ProUpload) == null ? void 0 : _b.buttonText })
-          ]
-        }
-      )) }) }) }),
-      showExampleContent && !isView && /* @__PURE__ */ jsx(
-        Example,
-        {
-          className: "image-example",
-          exampleTitle,
-          exampleContent,
-          exampleModalProps
-        }
-      ),
-      extraTipText && /* @__PURE__ */ jsx("div", { className: "upload-tip-txt", children: extraTipText })
+  const footer = footerRender();
+  const hasFooter = !isEmptyReactNode(footer);
+  const hasCenterRender = typeof centerRender === "function" || !isEmptyReactNode(centerRender);
+  const tipText = typeof extraTipText === "function" ? extraTipText() : extraTipText;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Space, { orientation: "vertical", size: 8, className: "pro-upload-image", children: [
+      headerRender(),
+      /* @__PURE__ */ jsxs("div", { className: "pro-upload-image", children: [
+        /* @__PURE__ */ jsx(DndContext, { sensors: [sensor], onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: fileList.map((i) => i.uid), strategy: rectSortingStrategy, children: /* @__PURE__ */ jsx(Upload, { ...imageUploadProps, children: fileList.length < maxCount && !isView && (hasCenterRender ? isFunction(centerRender) ? centerRender() : centerRender : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `pro-upload-image-inner ${disabled ? "pro-upload-image-disabled" : ""} `,
+            children: [
+              /* @__PURE__ */ jsx(PlusOutlined, {}),
+              /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: (_b = (_a = locale) == null ? void 0 : _a.ProUpload) == null ? void 0 : _b.buttonText })
+            ]
+          }
+        )) }) }) }),
+        showExampleContent && !isView && /* @__PURE__ */ jsx(
+          Example,
+          {
+            className: "image-example",
+            exampleTitle,
+            exampleContent,
+            exampleModalProps
+          }
+        ),
+        !isEmptyReactNode(tipText) && /* @__PURE__ */ jsx("div", { className: "upload-tip-txt", children: tipText })
+      ] }),
+      hasFooter && /* @__PURE__ */ jsx("div", { className: "pro-upload-image-footer", children: footer })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "pro-upload-image-footer", children: footerRender() }),
     /* @__PURE__ */ jsx(
       Modal,
       {

package/es/ProUpload/style/index.less

@@ -4,6 +4,11 @@
   // 将拖拽项的内部层级限制在上传组件内，避免覆盖相邻字段的下拉浮层。
   isolation: isolate;
 
+  > .pro-upload-image {
+    // 图片布局不参与文本基线对齐，避免顶部出现额外行盒留白。
+    vertical-align: top;
+  }
+
   // display: inline-flex;
 
   // 拖拽上传

package/es/utils/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const customEqualForFunction: (value: any, other: any) => boolean;
 /**
  * 兼容 React17/18 的 startTransition。
@@ -10,6 +11,8 @@ export declare function compatStartTransition(cb: () => void): void;
  * 空值 或者 仅包含空值的数组视为空
  */
 export declare const isEmpty: (value: any, emptyValue?: string) => boolean;
+/** 判断 React 节点是否没有可渲染内容，保留数字 0 */
+export declare const isEmptyReactNode: (value: React.ReactNode) => boolean;
 /**
  * 生成用于 UI 元素的随机短 ID（非安全用途）
  */

package/es/utils/index.js

@@ -32,6 +32,12 @@ const isEmpty = (value, emptyValue) => {
   }
   return false;
 };
+const isEmptyReactNode = (value) => {
+  if (Array.isArray(value)) {
+    return value.every(isEmptyReactNode);
+  }
+  return value === void 0 || value === null || typeof value === "boolean" || value === "";
+};
 const generateId = () => Math.random().toString(36).slice(-6);
 const isEllipsisActive = (element) => {
   if (!element)
@@ -47,5 +53,6 @@ export {
   customEqualForFunction,
   generateId,
   isEllipsisActive,
-  isEmpty
+  isEmpty,
+  isEmptyReactNode
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.7.0-beta.2",
+  "version": "4.7.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public",