KERNEL-13521 refactor: segment使用grid布局，使其默认使用最长项宽度等分

demo/js/case/demo.segment.js

@@ -5,20 +5,20 @@ Demo.Func = BI.inherit(BI.Widget, {
 
     render: function () {
         BI.createWidget({
-            type: "bi.vertical",
+            type: "bi.horizontal",
             element: this,
             vgap: 20,
             hgap: 30,
             items: [{
                 type: "bi.segment",
                 items: [{
-                    text: "1",
+                    text: "较长的选项1",
                     value: 1
                 }, {
-                    text: "2",
+                    text: "选项2",
                     value: 2
                 }, {
-                    text: "3",
+                    text: "选项3",
                     value: 3
                 }]
             }]

src/case/segment/segment.js

@@ -23,13 +23,12 @@ BI.Segment = BI.inherit(BI.Widget, {
             items: BI.createItems(o.items, {
                 type: "bi.segment_button",
                 height: BI.toPix(o.height, 2),
-                whiteSpace: o.whiteSpace
+                whiteSpace: o.whiteSpace,
             }),
-            layout: [
-                {
-                    type: "bi.center"
-                }
-            ]
+            layouts: o.layouts || [{
+                type: "bi.table",
+                columnSize: BI.makeArrayByArray(o.items, "fill"),
+            }],
         });
         this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);

src/less/base/segment/segment.less

@@ -7,7 +7,7 @@
     border-top: 1px solid @color-bi-split-segment;
     border-bottom: 1px solid @color-bi-split-segment;
   }
-  & > .first-element{
+  & > .first-element, & > .first-row{
     border-left: 1px solid @color-bi-split-segment;
     .border-corner-radius(2px,0px,0px,2px)
   }