完善逻辑和样式，包括兼容ie8

components/step/rc-steps/examples/simple.js

@@ -11,10 +11,32 @@ var container = document.getElementById('__react-content');
 //  container.appendChild(eles[i]);
 //}
 
+var steps = [{
+  status: 'finish',
+  title: '已完成',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'
+}, {
+  status: 'progress',
+  title: '进行中',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'
+}, {
+  status: 'wait',
+  title: '待运行',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'
+}, {
+  status: 'wait',
+  title: '待运行',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'
+}].map(function(s, i) {
+    return (<Steps.Step
+        key={i}
+        status={s.status}
+        title={s.title}
+        description={s.description}></Steps.Step>
+    );
+  });
+
 React.render(
   <Steps>
-  <Steps.Step status="finish" title="己完成"></Steps.Step>
-  <Steps.Step status="process" title="正在进行"></Steps.Step>
-  <Steps.Step status="waiting" title="待完成"></Steps.Step>
-  <Steps.Step status="waiting" title="待完成"></Steps.Step>
+    {steps}
 </Steps>, container);

components/step/rc-steps/lib/Step.js

@@ -11,31 +11,35 @@ var Step = React.createClass({
     };
   },
   render: function render() {
+    console.log('step render');
     var props = this.props;
-    var cls = 'border'; // fill / none
     return React.createElement(
-      'li',
-      { className: (props.stepColClass ? props.stepColClass : '') + 'rc-steps-item', style: props.stepColStyles },
+      'div',
+      { className: 'rc-steps-item rc-steps-status-' + this.state.status },
       React.createElement(
-        'span',
-        { className: 'rc-steps-icon ' + cls + ' ' + this.state.status },
+        'div',
+        { className: 'rc-steps-head' },
+        React.createElement('i', { className: 'anticon anticon-check' })
+      ),
+      React.createElement(
+        'div',
+        { className: 'rc-steps-main' },
         React.createElement(
-          'span',
-          { className: 'num' },
-          props.stepIndex
+          'div',
+          { className: 'rc-steps-title' },
+          props.title
         ),
-        React.createElement('i', { icon: props.icon })
+        React.createElement(
+          'div',
+          { className: 'rc-steps-description' },
+          props.description
+        )
       ),
-      React.createElement(
-        'span',
-        { className: 'rc-steps-title' },
-        props.title
-      ),
-      props.description && React.createElement(
-        'span',
-        { className: 'rc-steps-description' },
-        props.description
-      )
+      !props.stepLast ? React.createElement(
+        'div',
+        { className: 'rc-steps-tail', style: { width: props.tailWidth } },
+        React.createElement('i', null)
+      ) : ''
     );
   }
 });

components/step/rc-steps/lib/Steps.js

@@ -5,40 +5,71 @@ var React = require('react');
 var Steps = React.createClass({
   displayName: 'Steps',
 
+  _previousStepsWidth: 0,
+  _totalItemsWidth: 0,
+  getInitialState: function getInitialState() {
+    return {
+      tailWidth: 0
+    };
+  },
+  componentDidMount: function componentDidMount() {
+    var $dom = React.findDOMNode(this);
+    var tw = 0;
+    var len = $dom.children.length - 1;
+    var i;
+    for (i = 0; i <= len; i++) {
+      tw += $dom.children[i].offsetWidth;
+    }
+
+    this._totalItemsWidth = tw;
+    this._previousStepsWidth = React.findDOMNode(this).offsetWidth;
+    this._update();
+    if (window.attachEvent) {
+      window.attachEvent('onresize', this._resize);
+    } else {
+      window.addEventListener('resize', this._resize);
+    }
+  },
+  componentWillUnmount: function componentWillUnmount() {
+    if (window.attachEvent) {
+      window.detachEvent('onresize', this._resize);
+    } else {
+      window.removeEventListener('resize', this._resize);
+    }
+  },
+  _resize: function _resize() {
+    var w = React.findDOMNode(this).offsetWidth;
+    if (this._previousStepsWidth === w) {
+      return;
+    }
+    this._previousStepsWidth = w;
+    this._update();
+  },
+  _update: function _update() {
+    var len = this.props.children.length - 1;
+    var dw = Math.floor((this._previousStepsWidth - this._totalItemsWidth) / len);
+    if (dw <= 0) {
+      return;
+    }
+    this.setState({
+      tailWidth: dw
+    });
+  },
   render: function render() {
     var props = this.props;
     var children = props.children;
     var len = children.length - 1;
-    var isCol = [1, 2, 3, 4, 6, 8, 12].indexOf(len) >= 0;
-
-    function _make(ele, idx) {
-      var np = {};
-      if (!ele.props.stepNumber) {
-        np.stepNumber = '' + (idx + 1);
-      }
-      if (isCol && idx !== len) {
-        np.stepColClass = 'col-' + (24 / len).toFixed(0) + ' ';
-      } else if (idx !== len) {
-        np.stepColStyles = {
-          width: (100 / len).toFixed(4) + '%'
-        };
-      }
-      return React.cloneElement(ele, np);
-    }
-
     return React.createElement(
       'div',
       { className: 'rc-steps row-flex' },
-      React.createElement(
-        'div',
-        { className: 'rc-steps-start' },
-        React.Children.map(props.children.slice(0, len), _make)
-      ),
-      React.createElement(
-        'div',
-        { className: 'rc-steps-end' },
-        _make(props.children[len], len)
-      )
+      React.Children.map(children, function (ele, idx) {
+        var np = {
+          stepNumber: (idx + 1).toString(),
+          stepLast: idx === len,
+          tailWidth: this.state.tailWidth
+        };
+        return React.cloneElement(ele, np);
+      }, this)
     );
   }
 });

components/step/rc-steps/src/Step.jsx

@@ -7,19 +7,23 @@ var Step = React.createClass({
     };
   },
   render() {
+    console.log('step render');
     var props = this.props;
-    var cls = 'border'; // fill / none
-    return (<li className={(props.stepColClass ? props.stepColClass : '') + 'rc-steps-item'} style={props.stepColStyles}>
-      <span className={'rc-steps-icon ' + cls + ' ' + this.state.status}>
-        <span className='num'>{props.stepIndex}</span>
-        <i icon={props.icon}></i>
-      </span>
-      <span className='rc-steps-title'>{props.title}</span>
-      {
-        props.description &&
-          <span className='rc-steps-description'>{props.description}</span>
-      }
-    </li>);
+    return (<div className={'rc-steps-item rc-steps-status-' + this.state.status }>
+
+      <div className='rc-steps-head'>
+        <i className='anticon anticon-check'></i>
+      </div>
+      <div className='rc-steps-main'>
+        <div className='rc-steps-title'>{props.title}</div>
+        <div className='rc-steps-description'>
+          {props.description}
+        </div>
+      </div>
+      {!props.stepLast ? <div className='rc-steps-tail' style={{width: props.tailWidth}}>
+        <i></i>
+      </div> : ''}
+    </div>);
   }
 });
 

components/step/rc-steps/src/Steps.jsx

@@ -4,35 +4,70 @@ var React = require('react');
 
 
 var Steps = React.createClass({
+  _previousStepsWidth: 0,
+  _totalItemsWidth: 0,
+  getInitialState() {
+    return {
+      tailWidth: 0
+    };
+  },
+  componentDidMount() {
+    var $dom = React.findDOMNode(this);
+    var tw = 0;
+    var len = $dom.children.length - 1;
+    var i;
+    for (i = 0; i <= len; i++) {
+      tw += $dom.children[i].offsetWidth;
+    }
+
+    this._totalItemsWidth = tw;
+    this._previousStepsWidth = React.findDOMNode(this).offsetWidth;
+    this._update();
+    if (window.attachEvent) {
+      window.attachEvent('onresize', this._resize);
+    } else {
+      window.addEventListener('resize', this._resize);
+    }
+  },
+  componentWillUnmount() {
+    if (window.attachEvent) {
+      window.detachEvent('onresize', this._resize);
+    } else {
+      window.removeEventListener('resize', this._resize);
+    }
+  },
+  _resize() {
+    var w = React.findDOMNode(this).offsetWidth;
+    if (this._previousStepsWidth === w) {
+      return;
+    }
+    this._previousStepsWidth = w;
+    this._update();
+  },
+  _update() {
+    var len = this.props.children.length - 1;
+    var dw = Math.floor((this._previousStepsWidth - this._totalItemsWidth) / len);
+    if (dw <= 0) {
+      return;
+    }
+    this.setState({
+      tailWidth: dw
+    });
+  },
   render() {
     var props = this.props;
     var children = props.children;
     var len = children.length - 1;
-    var isCol = [1, 2, 3, 4, 6, 8, 12].indexOf(len) >= 0;
-
-    function _make(ele, idx) {
-      var np = {};
-      if (!ele.props.stepNumber) {
-        np.stepNumber = '' + (idx + 1);
-      }
-      if (isCol && idx !== len) {
-        np.stepColClass = 'col-' + (24 / len).toFixed(0) + ' ';
-      } else if (idx !== len) {
-        np.stepColStyles = {
-          width: (100 / len).toFixed(4) + '%'
-        };
-      }
-      return React.cloneElement(ele, np);
-    }
-
     return (
-      <div className='rc-steps row-flex' >
-        <div className='rc-steps-start'>
-          {React.Children.map(props.children.slice(0, len), _make)}
-        </div>
-        <div className='rc-steps-end'>
-          {_make(props.children[len], len)}
-        </div>
+      <div className='rc-steps row-flex'>
+        {React.Children.map(children, function(ele, idx) {
+          var np = {
+            stepNumber: (idx + 1).toString(),
+            stepLast: idx === len,
+            tailWidth: this.state.tailWidth
+          };
+          return React.cloneElement(ele, np);
+        }, this)}
       </div>
     );
   }

components/step/test/index.html

@@ -4,14 +4,105 @@
   <meta charset="UTF-8">
   <title>Test</title>
   <link rel="stylesheet" href="/ant-design/dist/antd.css"/>
-  <script type="text/javascript" src="/ant-design/node_modules/react/dist/react.js"></script>
+  <script src="https://a.test.alipay.net/es5-shim/4.0.5/es5-shim.js"></script>
+  <script src="./es5-sham.js"></script>
+  <script type="text/javascript">
+    // Console-polyfill. MIT license.
+    // https://github.com/paulmillr/console-polyfill
+    // Make it safe to do console.log() always.
+    (function(global) {
+      'use strict';
+      global.console = global.console || {};
+      var con = global.console;
+      var prop, method;
+      var empty = {};
+      var dummy = function() {};
+      var properties = 'memory'.split(',');
+      var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
+      'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
+      'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
+      while (prop = properties.pop()) if (!con[prop]) con[prop] = empty;
+      while (method = methods.pop()) if (!con[method]) con[method] = dummy;
+    })(typeof window === 'undefined' ? this : window);
+    // Using `this` for web workers while maintaining compatibility with browser
+    // targeted script loaders such as Browserify or Webpack where the only way to
+    // get to the global object is via `window`.
+  </script>
+  <script src="https://a.alipayobjects.com/react/0.13.2/react.js"></script>
 
-  <link rel="stylesheet/less" type="text/css" href="/ant-design/style/components/steps.less" />
-  <script type="text/javascript" src="/ant-design/node_modules/less/dist/less.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="/ant-design/style/components/steps.css" />
 
 </head>
 <body>
-<div id="__react-content"></div>
+
+<div row>
+  <div col="24" style="padding: 10px;">
+    <div id="__react-content"></div>
+  </div>
+</div>
+
+<!--<div row>-->
+  <!--<div col="24" style="padding: 10px;">-->
+
+    <!--<div class="rc-steps">-->
+      <!--<div class="rc-steps-item">-->
+        <!--<div class="rc-steps-head">-->
+          <!--<i class="anticon anticon-check"></i>-->
+        <!--</div>-->
+        <!--<div class="rc-steps-main">-->
+          <!--<div class="rc-steps-title">己完成</div>-->
+          <!--<div class="rc-steps-description">-->
+            <!--这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="rc-steps-tail">-->
+          <!--<i></i>-->
+        <!--</div>-->
+      <!--</div>-->
+      <!--<div class="rc-steps-item">-->
+        <!--<div class="rc-steps-head">-->
+          <!--<i class="anticon anticon-check"></i>-->
+        <!--</div>-->
+        <!--<div class="rc-steps-main">-->
+          <!--<div class="rc-steps-title">己完成</div>-->
+          <!--<div class="rc-steps-description">-->
+            <!--这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="rc-steps-tail">-->
+          <!--<i></i>-->
+        <!--</div>-->
+      <!--</div>-->
+      <!--<div class="rc-steps-item">-->
+        <!--<div class="rc-steps-head">-->
+          <!--<i class="anticon anticon-check"></i>-->
+        <!--</div>-->
+        <!--<div class="rc-steps-main">-->
+          <!--<div class="rc-steps-title">己完成</div>-->
+          <!--<div class="rc-steps-description">-->
+            <!--这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="rc-steps-tail">-->
+          <!--<i></i>-->
+        <!--</div>-->
+      <!--</div>-->
+      <!--<div class="rc-steps-item">-->
+        <!--<div class="rc-steps-head">-->
+          <!--<i class="anticon anticon-check"></i>-->
+        <!--</div>-->
+        <!--<div class="rc-steps-main">-->
+          <!--<div class="rc-steps-title">己完成</div>-->
+          <!--<div class="rc-steps-description">-->
+            <!--这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶-->
+          <!--</div>-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
+
+  <!--</div>-->
+<!--</div>-->
+
 <script type="text/javascript" src="../rc-steps/build/examples/common.js"></script>
 <script type="text/javascript" src="../rc-steps/build/examples/simple.js"></script>
 </body>

style/components/steps.less

@@ -1,25 +1,88 @@
-.col {
-  position: relative;
-  display: block;
-  float: left;
-  flex: 0 0 auto;
-}
+@active-color: #3fc7fa;
+@wait-color: #e9e9e9;
 
 .rc-steps {
-  .rc-steps-start {
-    flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-  }
-  .rc-steps-end {
+  font-size: 0;
 
-  }
   .rc-steps-item {
     position: relative;
     display: inline-block;
-    float: left;
-  }
-  .rc-steps-item:last-child {
+
+    &.rc-steps-status-wait {
+      .rc-steps-head {
+        color: @wait-color;
+        border-color: @wait-color;
+      }
+    }
+    &.rc-steps-status-process {
+      .rc-steps-head {
+        color: #fff;
+        border-color: @active-color;
+        background: @active-color;
+      }
+    }
+    &.rc-steps-status-finish {
+      .rc-steps-head {
+        color: #fff;
+        border-color: @active-color;
+        background: #fff;
+        > i {
+          color: @active-color;
+        }
+      }
+    }
 
   }
+
+  .rc-steps-head, .rc-steps-main, .rc-steps-tail {
+    display: inline-block;
+    vertical-align: top;
+  }
+  .rc-steps-head {
+    border:2px solid @wait-color;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    border-radius: 24px;
+    font-size: 15px;
+    margin-right: 12px;
+    > i {
+      font-weight: bold;
+      color: #3fc7fa;
+      vertical-align: middle;
+      position: relative;
+      top: -2px;
+    }
+  }
+  .rc-steps-main {
+    max-width: 75px;
+    margin-top: 4px;
+
+  }
+  .rc-steps-title {
+    font-size: 14px;
+    margin-bottom: 4px;
+    color: #666;
+    font-weight: bold;
+  }
+  .rc-steps-description {
+    font-size: 12px;
+    color: #999;
+  }
+  .rc-steps-tail {
+    width: 0;
+    position: relative;
+    top: 10px;
+    padding:0 10px;
+    > i {
+      display: inline-block;
+      background: #e9e9e9;
+      height: 2px;
+      border-radius: 1px;
+      width: 100%;
+    }
+  }
+
+
 }