@lambo-design/detail-table 1.0.0-beta.21 → 1.0.0-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/detail-table",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.23",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.60",
-    "@lambo-design/shared": "^1.0.0-beta.43"
+    "@lambo-design/shared": "^1.0.0-beta.43",
+    "@lambo-design/core": "^4.7.1-beta.60"
   },
   "scripts": {}
 }

package/src/components/Col.js

@@ -15,7 +15,8 @@ const ColProps = {
     validator: function(value) {
       return ["horizontal", "vertical"].indexOf(value) !== -1;
     }
-  }
+  },
+  totalCols: Number
 };
 
 const Col = {
@@ -27,15 +28,8 @@ const Col = {
     const { key } = ctx.data;
     const label = getComponentFromProp(child, "label");
     const slots = getSlots(child);
-
-    // Calculate the total width and column width
-    const totalWidth = 100; // You can adjust this value according to your needs
-    const columnWidth = totalWidth / 6;
-
-    // Set label and content widths
-    const labelWidth = columnWidth;
-    const contentWidth = columnWidth * 2;
-
+    const labelColSpan = Math.floor(100 / ColProps.totalCols * 0.3); // 计算 label 的长度
+    const contextColSpan = Math.floor(100 / ColProps.totalCols * 0.7); // 计算 context 的长度
     const labelProps = {
       attrs: {},
       class: [
@@ -47,55 +41,69 @@ const Col = {
       ],
       key: `${key}-label`,
       style: {
-        width: `${labelWidth}%` // Set label width
+        width: `${labelColSpan}%` // 添加 label 的宽度
       }
     };
+    if (layout === "vertical") {
+      labelProps.attrs.colSpan = span * 2 - 1;
+    }
 
     if (bordered) {
       if (type === "label") {
         return createElement("th", labelProps, label);
       }
-
       return createElement(
           "td",
           {
             class: `${prefixCls}-item-content`,
             key: `${key}-content`,
-            attrs: {
-              colspan: span * 2 - 1
-            },
+            attrs:{colSpan: span * 2 - 1},
             style: {
-              width: `${contentWidth}%` // Set content width
+              width: `${contextColSpan}%` // 添加 content 的宽度
             }
           },
           slots.default
       );
     }
-
     if (layout === "vertical") {
-      // ... (existing code)
-    }
-
-    return createElement(
-        "td",
-        {
-          attrs: {
-            colspan: span
-          },
-          class: `${prefixCls}-item`,
-          style: {
-            width: `${columnWidth}%` // Set column width
-          }
-        },
-        [
-          createElement("span", labelProps, label),
+      if (type === "content") {
+        return createElement(
+            "td",
+            { colSpan: span, class: `${prefixCls}-item` },
+            createElement(
+                "span",
+                { class: `${prefixCls}-item-content`, key: `${key}-content`, style: { width: `${contextColSpan}%` } },
+                slots.default
+            )
+        );
+      }
+      return createElement(
+          "td",
+          { colSpan: span, class: `${prefixCls}-item` },
           createElement(
               "span",
-              { class: `${prefixCls}-item-content`, key: `${key}-content` },
-              slots.default
+              {
+                class: [
+                  `${prefixCls}-item-label`,
+                  { [`${prefixCls}-item-colon`]: colon }
+                ],
+                key: `${key}-label`,
+                style: {
+                  width: `${labelColSpan}%` // 添加 label 的宽度
+                }
+              },
+              label
           )
-        ]
-    );
+      );
+    }
+    return createElement("td", { colSpan: span, class: `${prefixCls}-item` }, [
+      createElement("span", labelProps, label),
+      createElement(
+          "span",
+          { class: `${prefixCls}-item-content`, key: `${key}-content`, style: { width: `${contextColSpan}%` } },
+          slots.default
+      )
+    ]);
   }
 };
 

package/src/components/Row.js

@@ -14,13 +14,15 @@ export default {
   functional: true,
   render: function(createElement, context) {
     const { children, index, prefixCls, bordered, layout, colon } = context.props;
+    const totalCols = toArray(children).length;
     const renderCol = (colItem, type, idx) => {
       const colProps = {
         child: colItem,
         bordered: bordered,
         colon: colon,
         type: type,
-        layout: layout
+        layout: layout,
+        totalCols: totalCols,
       }
       return createElement(Col, {props:colProps,key: `${type}-${colItem.key || idx}`});
     };

package/src/styles/css/index.less

@@ -40,6 +40,7 @@
       font-weight: 500;
       font-size: 14px;
       line-height: 1.5;
+      width: 11%;
 
       &::after {
         position: relative;
@@ -67,6 +68,7 @@
       color: var(--text-color,@_text-color);;
       font-size: 14px;
       line-height: 1.5;
+      width: 22%;
     }
 
     &-item {