@donglegeyu/company-ui 1.2.9 → 1.2.11

package/dist/cjs/template-components/DetailPageTemplate/index.js

@@ -103,50 +103,45 @@ function DetailPageTemplate({
         actions: titleActions
       }
     ),
-    hasInfoCard && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-card", children: [
-      hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-top", children: [
-        (avatar !== void 0 || primaryName !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-identity", children: [
-          avatar !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-avatar", children: avatar }),
-          primaryName !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-primary-name", children: primaryName })
-        ] }),
-        tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-info-tags", children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_basic_components.CompanyTag, { className: tagVariantClass[tag.variant ?? "default"], children: tag.text }, index)) })
-      ] }),
-      infoFields && infoFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: "dpt-info-fields",
-          style: { gridTemplateColumns: `repeat(${infoColumns}, minmax(0, 1fr))` },
-          children: infoFields.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-field-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dpt-field-label", children: [
-              field.label,
-              "："
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-field-value", children: field.value ?? "--" })
-          ] }, index))
-        }
-      ),
-      infoArea
-    ] }),
-    showDivider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        className: `dpt-content${isScrolling ? " scrolling" : ""}`,
+        className: `dpt-scroll${isScrolling ? " scrolling" : ""}`,
         onScroll: handleScroll,
-        children: tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_basic_components.CompanyTabs,
-          {
-            activeKey: activeTab,
-            onChange: handleTabChange,
-            items: tabs.map((tab) => ({
-              key: tab.key,
-              label: tab.label,
-              disabled: tab.disabled,
-              children: tab.children
-            }))
-          }
-        ) : children
+        children: [
+          hasInfoCard && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-card", children: [
+            hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-top", children: [
+              (avatar !== void 0 || primaryName !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-identity", children: [
+                avatar !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-avatar", children: avatar }),
+                primaryName !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-primary-name", children: primaryName })
+              ] }),
+              tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-info-tags", children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_basic_components.CompanyTag, { className: tagVariantClass[tag.variant ?? "default"], children: tag.text }, index)) })
+            ] }),
+            infoFields && infoFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-info-fields", children: infoFields.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-field-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dpt-field-label", children: [
+                field.label,
+                "："
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-field-value", children: field.value ?? "--" })
+            ] }, index)) }),
+            infoArea
+          ] }),
+          showDivider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-container", children: tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_basic_components.CompanyTabs,
+            {
+              activeKey: activeTab,
+              onChange: handleTabChange,
+              items: tabs.map((tab) => ({
+                key: tab.key,
+                label: tab.label,
+                disabled: tab.disabled,
+                children: tab.children
+              }))
+            }
+          ) : children })
+        ]
       }
-    ) })
+    )
   ] });
 }

package/dist/cjs/template-components/DetailPageTemplate/index.scss

@@ -10,9 +10,7 @@
   background: #f5f5f5;
 
   .dpt-page-title {
-    position: sticky;
-    top: 0;
-    z-index: 20;
+    flex-shrink: 0;
     background: var(--ant-color-bg-container);
   }
 
@@ -64,8 +62,10 @@
     }
 
     .dpt-info-fields {
-      display: grid;
-      gap: 8px 24px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 8px calc(16px + 24px);
 
       .dpt-field-item {
         display: flex;
@@ -127,32 +127,14 @@
     color: #faad14;
   }
 
-  .dpt-divider {
-    height: 12px;
-    flex-shrink: 0;
-    background: #f5f5f5;
-  }
-
-  .dpt-container {
-    width: 100%;
+  .dpt-scroll {
     flex: 1;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
-    align-self: stretch;
-    z-index: 3;
-    border-radius: 6px 6px 0 0;
-    background: #ffffff;
-    overflow: hidden;
-  }
-
-  .dpt-content {
-    flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
     scrollbar-color: transparent transparent;
-    padding: 0 16px 16px;
 
     &::-webkit-scrollbar {
       width: 6px;
@@ -174,4 +156,26 @@
       background-color: rgba(0, 0, 0, 0.2);
     }
   }
+
+  .dpt-divider {
+    height: 12px;
+    flex-shrink: 0;
+    background: #f5f5f5;
+  }
+
+  .dpt-container {
+    width: 100%;
+    flex-grow: 1;
+    background: #ffffff;
+    border-radius: 6px 6px 0 0;
+    padding: 0 16px;
+
+    .ant-tabs-nav {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      margin: 0;
+      background: #ffffff;
+    }
+  }
 }

package/dist/es/template-components/DetailPageTemplate/index.js

@@ -78,55 +78,52 @@ export default function DetailPageTemplate(_ref) {
       onBack: onBack,
       className: "dpt-page-title",
       actions: titleActions
-    }), hasInfoCard && /*#__PURE__*/_jsxs("div", {
-      className: "dpt-info-card",
-      children: [hasHeader && /*#__PURE__*/_jsxs("div", {
-        className: "dpt-info-top",
-        children: [(avatar !== undefined || primaryName !== undefined) && /*#__PURE__*/_jsxs("div", {
-          className: "dpt-info-identity",
-          children: [avatar !== undefined && /*#__PURE__*/_jsx("div", {
-            className: "dpt-avatar",
-            children: avatar
-          }), primaryName !== undefined && /*#__PURE__*/_jsx("span", {
-            className: "dpt-primary-name",
-            children: primaryName
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "dpt-scroll".concat(isScrolling ? ' scrolling' : ''),
+      onScroll: handleScroll,
+      children: [hasInfoCard && /*#__PURE__*/_jsxs("div", {
+        className: "dpt-info-card",
+        children: [hasHeader && /*#__PURE__*/_jsxs("div", {
+          className: "dpt-info-top",
+          children: [(avatar !== undefined || primaryName !== undefined) && /*#__PURE__*/_jsxs("div", {
+            className: "dpt-info-identity",
+            children: [avatar !== undefined && /*#__PURE__*/_jsx("div", {
+              className: "dpt-avatar",
+              children: avatar
+            }), primaryName !== undefined && /*#__PURE__*/_jsx("span", {
+              className: "dpt-primary-name",
+              children: primaryName
+            })]
+          }), tags && tags.length > 0 && /*#__PURE__*/_jsx("div", {
+            className: "dpt-info-tags",
+            children: tags.map(function (tag, index) {
+              var _tag$variant;
+              return /*#__PURE__*/_jsx(CompanyTag, {
+                className: tagVariantClass[(_tag$variant = tag.variant) !== null && _tag$variant !== void 0 ? _tag$variant : 'default'],
+                children: tag.text
+              }, index);
+            })
           })]
-        }), tags && tags.length > 0 && /*#__PURE__*/_jsx("div", {
-          className: "dpt-info-tags",
-          children: tags.map(function (tag, index) {
-            var _tag$variant;
-            return /*#__PURE__*/_jsx(CompanyTag, {
-              className: tagVariantClass[(_tag$variant = tag.variant) !== null && _tag$variant !== void 0 ? _tag$variant : 'default'],
-              children: tag.text
+        }), infoFields && infoFields.length > 0 && /*#__PURE__*/_jsx("div", {
+          className: "dpt-info-fields",
+          children: infoFields.map(function (field, index) {
+            var _field$value;
+            return /*#__PURE__*/_jsxs("div", {
+              className: "dpt-field-item",
+              children: [/*#__PURE__*/_jsxs("span", {
+                className: "dpt-field-label",
+                children: [field.label, "\uFF1A"]
+              }), /*#__PURE__*/_jsx("span", {
+                className: "dpt-field-value",
+                children: (_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : '--'
+              })]
             }, index);
           })
-        })]
-      }), infoFields && infoFields.length > 0 && /*#__PURE__*/_jsx("div", {
-        className: "dpt-info-fields",
-        style: {
-          gridTemplateColumns: "repeat(".concat(infoColumns, ", minmax(0, 1fr))")
-        },
-        children: infoFields.map(function (field, index) {
-          var _field$value;
-          return /*#__PURE__*/_jsxs("div", {
-            className: "dpt-field-item",
-            children: [/*#__PURE__*/_jsxs("span", {
-              className: "dpt-field-label",
-              children: [field.label, "\uFF1A"]
-            }), /*#__PURE__*/_jsx("span", {
-              className: "dpt-field-value",
-              children: (_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : '--'
-            })]
-          }, index);
-        })
-      }), infoArea]
-    }), showDivider && /*#__PURE__*/_jsx("div", {
-      className: "dpt-divider"
-    }), /*#__PURE__*/_jsx("div", {
-      className: "dpt-container",
-      children: /*#__PURE__*/_jsx("div", {
-        className: "dpt-content".concat(isScrolling ? ' scrolling' : ''),
-        onScroll: handleScroll,
+        }), infoArea]
+      }), showDivider && /*#__PURE__*/_jsx("div", {
+        className: "dpt-divider"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "dpt-container",
         children: tabs && tabs.length > 0 ? /*#__PURE__*/_jsx(CompanyTabs, {
           activeKey: activeTab,
           onChange: handleTabChange,
@@ -139,7 +136,7 @@ export default function DetailPageTemplate(_ref) {
             };
           })
         }) : children
-      })
+      })]
     })]
   });
 }

package/dist/es/template-components/DetailPageTemplate/index.scss

@@ -10,9 +10,7 @@
   background: #f5f5f5;
 
   .dpt-page-title {
-    position: sticky;
-    top: 0;
-    z-index: 20;
+    flex-shrink: 0;
     background: var(--ant-color-bg-container);
   }
 
@@ -64,8 +62,10 @@
     }
 
     .dpt-info-fields {
-      display: grid;
-      gap: 8px 24px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 8px calc(16px + 24px);
 
       .dpt-field-item {
         display: flex;
@@ -127,32 +127,14 @@
     color: #faad14;
   }
 
-  .dpt-divider {
-    height: 12px;
-    flex-shrink: 0;
-    background: #f5f5f5;
-  }
-
-  .dpt-container {
-    width: 100%;
+  .dpt-scroll {
     flex: 1;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
-    align-self: stretch;
-    z-index: 3;
-    border-radius: 6px 6px 0 0;
-    background: #ffffff;
-    overflow: hidden;
-  }
-
-  .dpt-content {
-    flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
     scrollbar-color: transparent transparent;
-    padding: 0 16px 16px;
 
     &::-webkit-scrollbar {
       width: 6px;
@@ -174,4 +156,26 @@
       background-color: rgba(0, 0, 0, 0.2);
     }
   }
+
+  .dpt-divider {
+    height: 12px;
+    flex-shrink: 0;
+    background: #f5f5f5;
+  }
+
+  .dpt-container {
+    width: 100%;
+    flex-grow: 1;
+    background: #ffffff;
+    border-radius: 6px 6px 0 0;
+    padding: 0 16px;
+
+    .ant-tabs-nav {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      margin: 0;
+      background: #ffffff;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donglegeyu/company-ui",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",