diff --git a/module/product/control.php b/module/product/control.php
index e4f7aef9f6..b6a3d38c6b 100644
--- a/module/product/control.php
+++ b/module/product/control.php
@@ -455,7 +455,7 @@ class product extends control
         $this->view->position[] = $this->lang->product->roadmap;
         $this->view->product    = $product;
         $this->view->roadmaps   = $this->product->getRoadmap($productID, $branch);
-        $this->view->branches   = $product->type == 'normal' ? array() : $this->loadModel('branch')->getPairs($productID);
+        $this->view->branches   = $product->type == 'normal' ? array(0 => '') : $this->loadModel('branch')->getPairs($productID);
 
         $this->display();
     }
diff --git a/module/product/css/roadmap.css b/module/product/css/roadmap.css
index 3120ec05e4..4c24bc8b3a 100644
--- a/module/product/css/roadmap.css
+++ b/module/product/css/roadmap.css
@@ -1,6 +1,8 @@
-.roadmap {width:180px; margin:10px auto 10px auto; padding:15px 10px; font-weight:bold}
-.roadmap a{color:#ccc;}
-.roadmap p{margin:2px}
-.release {background:#006400; color:#ccc}
-.plan {background:#ffcc00;}
-.plan a{color:#006400}
+.branch-nav {margin: -10px 0 25px;}
+.release-paths {position: relative;}
+.release-path {margin-left: 160px; position: relative; overflow: visible;}
+.release-head {position: absolute; left: -150px; bottom: 105px; width: 120px; border: 2px solid #EEEEEE; border-radius: 4px; font-size: 20px; padding: 5px 10px; text-align: center;}
+.release-head .subtitle {font-size: 12px; color: #7B8599;}
+.release-line {margin: 0; padding-bottom: 40px;}
+.release-line > li > a:before {border-color: #00da88;}
+.release-link-line {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+YAAADiCAMAAAD0xy2eAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABOUExURUdwTOXl5eXl5ebm5ufn5+rq6u7u7unp6eXl5f///+Xl5eXl5efn5+Xl5eXl5eXl5ebm5uXl5eXl5ebm5ubm5ubm5uXl5ebm5uXl5eXl5Uh6G7kAAAAZdFJOUwDuuVQtFQwg1gXH+Dpzoq1CmIV7aEuOX+MTWsN0AAAGrUlEQVQYGe3ACbaYOHRF0SuQkETfw5v/RPNdLpMZZKWez5buVQBcu8zmJACO1WOwcAqAZ7kx66MAeNa+ZncnAI51t1kvAK7F/hEAAAAAAACA/xP93gmAZ6tZOKsAODb2ZuUSAM/aYtZEAXCsTsFs7gTAse4eigD4lqMAAAAAAMD/D09/CYBrvVl/CYBjdXrN+lUAHOumYNavAuBYNwWzTQA866ZwCYBvnQAAAAD8V7RHEgDParHhzgLg2NqYDXMUAMfiPJg1qwA4lu/BbBMAz7rjvQTAtyoAAOBG1wmAb1O4swB4NptZcwmAY3EbzN4pCYBfaSpmwywAnl2NNQLgW44CAABuZAHwLQ1lSgLg2BjMhuUSAL9q25jZu2cB8CsfxcweAfBsnYcsAL51AgAAboxL2wmAZ5vZMF9VANxKZ29mYRsFwK98FDN7swA4Fvc3VAHwLQsAALgxlSMKgGeNmZU9CoBb9dqCmb33KABu1XV7zSwJgGfjPQsAALixHlEAXJvN3u3qBMCtdXvNbGjOLABuxaO3H1EAHEvPUgQAANwYlycLgGe7mZX76gTAq3wuwcyGZsoC4FUd997MLgHwLLVbJwB/j7UTANeyDf2+dgLgVuwHMxv6fa0C4FR37b39WATAse66+0kA/h45CYBvjZX5yQLg1xLsR1imsQqATzVOy2s/kgA4lp+tEYC/R9rOsRMAx1r7UebjygLgU57mMtgvswC4VeNzN++hT0oC4FDVZ7ehLPe55ioAPu3BfhseAXCqi+2xNa9d+rTnFTsB8KLqH7Xq09iPoTTzngXApXNrSrBfRn1i7ATAlS5e5570KWbD2y/b8XQC4NJSgv2W9RljrgLgR5fH9tznqk8ws1D6ZTs6AXCp6d/B/lH1Oc52jakKgBcpj+156FPtt1B6AXCp27elKcHMgj5d6Zdtn55rzALgRcpRn2x/vPrUMaYqAP9hVZ8a1/Y87rnpG32y/Qhv38y7ALiU+xIG+6Xok5r5Ps52jbkTABe6PF5Pq89ofxR9upg7AXAiXc+0b0tT3kaf0cyGtzTLdgqAS2N5B/tHo09ctn162jGmKgAedDmu7Xnp09ofjT5dTFUAnEjtedzz0pd30+cxs/D2zXy3AuBSW4L9tumzzvdxtmvMnQC40OXxes5Vn8n+2PTpkgC4EZ9p35amvMOuz2QWSr/M9zQKgEtTsH/t+qzH2a4xVQFwoaY4Xs+0r/rs9lsopwC4tO7b0pcwmJ367KVftn16rjEJgBddTvrM9sejT46pCoATKY7tedxz06/6zGYWSr9sexQAl+4S7LdLn3Z6rpirAHiR4tieR9ansX+E0o8C4NJzz015BzMb9bmX7TjbMXcC4EaXx06fYv8aogC4NLbnvi19CZb06Usz38dzjVkA/Kj6X8H+SPpUAfAjxfWZ9rnp36pPCKWZ7+m5ogC4VAf7o+rTCYAjKa7PdM9Nr0+1UJr5ntoxC4BLebB/BQFwKsX1me6lb/RJ89HGKgB+jfZLae5zFACX0nk3xX5pBMCvGttjnvRJWQB8myw0e5sFwK0p2C+h2aMAOJXbvQlm1gqAZ/k6sgD8PfpmXzsB8KuzX8rWZgFwKrV3P9iPIgB+1fFoQi8AziV9qgA4d4bljALg2GY/3vnJAuBVfubXfryrAPgVzyVYFgDfogD8Per8JAHwbDWzfh+rAHiVpmYws7CcWQC8qtddzOwWAM/yuawCAABu9HPbCYBj2cyG5swC4FacevtR9lEA3ErPEswWAfCsrncrAADgxraPAuBZN5i921oFwK31fs0szG0nAG7FvZhZLwCe5ak/BAAA3FizAPj2WjmyAPjVzcHMyhEFwK16zcHMyiQAftVrCzYLgGt1jQIAAG7MRxYAz7KZ9VMWALfqNQcz66ckAG7VdhnM7BYAx2q7DKcA+NZ1AgAAXtSyjQLg2WVm7x4FwK94v2ZWpiwAfo1bMLNJAByr1zyMAuBbJwAA4EYsUxYAzw4za55OANyq1zKYDctVBcCt7mnMLIwC4Fg+ytAJgG9ZAADAjWuPAuBaY9afSQD8GrdgNixXFQC3atuYWbirAPiVpmJFAHyLqwAAgBtjEgDX6jssVxUAv9IymIU7CoBfaSpm1p9JAPwat2A2C4BntW1WAQAAAPiPyGVKAuDZYTYslwD4VdvGzN49C4Bf6Shm1kQBcGydhyEJgGvdJQAA4EZOAuDbMiyrAHi2mNl7ZAHwKx2vmTVXFQC/1mUw6wXAszSVQwCcqwIAAG4cSQBcW4ckAK7lU/8D/a9fSZZlwxkAAAAASUVORK5CYII=); height: 218px; position: absolute; left: 10px; right: 100px; top: 97px; background-size: 100% 100%; background-repeat: no-repeat;}
diff --git a/module/product/js/roadmap.js b/module/product/js/roadmap.js
new file mode 100644
index 0000000000..b4e39f4d3e
--- /dev/null
+++ b/module/product/js/roadmap.js
@@ -0,0 +1,32 @@
+$(function()
+{
+    // 修复连接曲线位置
+    var fixReleasePathLine = function()
+    {
+        $('.release-paths.active').each(function()
+        {
+            var $lines = $(this).find('.release-line');
+            var linesCount = $lines.length;
+            if (linesCount < 2) return;
+            $lines.each(function(idx)
+            {
+                if (idx >= (linesCount - 1)) return;
+                var $prev = $(this);
+                var $next = $lines.eq(idx + 1);
+                var $line = $prev.next('.release-link-line');
+                if(!$line.length)
+                {
+                    $line = $('<div class="release-link-line" />').insertAfter($prev);
+                }
+                $line.css(
+                {
+                    top: $prev.position().top + 97,
+                    right: $next.find('li:last-child').width() - 4
+                });
+            });
+        });
+    };
+
+    fixReleasePathLine();
+    $(window).on('resize shown.zui.tab', fixReleasePathLine);
+});
diff --git a/module/product/model.php b/module/product/model.php
index 55f372d7da..dcdced5931 100644
--- a/module/product/model.php
+++ b/module/product/model.php
@@ -590,17 +590,16 @@ class productModel extends model
         $plans    = $this->loadModel('productplan')->getList($productID, $branch);
         $releases = $this->loadModel('release')->getList($productID, $branch);
         $roadmap  = array();
-        if(is_array($releases)) $releases = array_reverse($releases);
-        if(is_array($plans))    $plans    = array_reverse($plans);
         foreach($releases as $release)
         {
             $year = substr($release->date, 0, 4);
             $roadmap[$year][$release->branch][] = $release;
         }
+
         foreach($plans as $plan)
         {
             if($plan->end != '0000-00-00' and strtotime($plan->end) - time() <= 0) continue;
-            $year = substr($plan->end, 0, 4);
+            $year = $plan->end == '2030-01-01' ? $this->lang->productplan->future : substr($plan->end, 0, 4);
             $roadmap[$year][$plan->branch][] = $plan;
         }
 
diff --git a/module/product/view/roadmap.html.php b/module/product/view/roadmap.html.php
index 49036b4ab3..cfaa0f39de 100644
--- a/module/product/view/roadmap.html.php
+++ b/module/product/view/roadmap.html.php
@@ -11,48 +11,59 @@
  */
 ?>
 <?php include '../../common/view/header.html.php';?>
-<div>
-  <div id='titlebar'><div class='heading'><i class='icon-code-fork'></i> <?php echo $lang->product->roadmap;?></div></div>
-  <div id='roadmapBox' style='overflow-x:auto'>
-    <table class='table table-grid active-disabled'>
-      <?php 
-      $years = array_keys($roadmaps);
-      echo '<tr class="text-center">';
-      foreach($years as $year)
-      {
-          $colspans = count($roadmaps[$year]);
-          $year = $year == '0000' ? $lang->future : $year . $lang->year;
-          echo "<th" . (empty($branches) ? '' : " colspan='$colspans'") . " style='border-right:1px solid #ddd'><h4>$year</h4></th>";
-      }
-      echo '</tr>';
-      echo '<tr class="text-center text-top">';
-      foreach($years as $year)
-      {
-          foreach($roadmaps[$year] as $branch => $roadmapData)
-          {
-              echo "<td>";
-              if(!empty($branches)) echo "<div class='roadmap branch'>{$branches[$branch]}</div>";
-              foreach($roadmapData as $key => $roadmap)
-              {
-                  if(isset($roadmap->build))
-                  {
-                      echo "<div class='roadmap release'>";
-                      echo "<h5>" . html::a($this->createLink('release', 'view', "releaseID=$roadmap->id"), $roadmap->name, '_blank') . '</h5>' . $roadmap->date;
-                  }
-                  else
-                  {
-                      echo "<div class='roadmap plan'>";
-                      echo "<h5>" . html::a($this->createLink('productplan', 'view', "planID=$roadmap->id"), $roadmap->title, '_blank') . '</h5>' . $roadmap->begin . ' ~ ' . $roadmap->end;
-                  }
-                  echo "</div>";
-                  if(isset($roadmaps[$year][$branch][$key + 1])) echo "<h5>{$lang->downArrow}</h5>";
-              }
-              echo '</td>';
-          }
-      }
-      echo '</tr>';
-      ?>
-    </table>
+<div class='main-content' id='mainContent'>
+  <h2><?php echo $lang->product->iteration;?> <span class="label label-badge label-light"><?php echo sprintf($lang->product->iterationInfo, count($roadmaps, 1) - count($roadmaps));?></span></h2>
+  <?php if($product->type != 'normal'):?>
+  <div class="text-center branch-nav">
+    <ul class="nav nav-secondary inline-block">
+      <li class="nav-heading"><?php echo zget($lang->product->branchName, $product->type);?></li>
+      <?php foreach($branches as $branchKey => $branchName):?>
+      <li <?php if($branchKey == 0) echo "class='active'";?>><a data-target="#tabContent<?php echo $branchKey;?>" data-toggle="tab"><?php echo $branchName;?></a></li>
+      <?php endforeach;?>
+    </ul>
+  </div>
+  <?php endif;?>
+  <div class="tab-content">
+    <?php foreach($branches as $branchKey => $branchName):?>
+    <div class="tab-pane fade release-paths <?php if($branchKey == 0) echo 'active in';?>" id="tabContent<?php echo $branchKey;?>">
+      <?php foreach($roadmaps as $year => $yearRoadmaps):?>
+      <?php if(!isset($yearRoadmaps[$branchKey])) continue;?>
+      <div class="release-path">
+        <div class="release-head">
+          <div class="title text-primary"><?php echo $year . (is_numeric($year) ? $lang->year : '');?></div>
+          <div class="subtitle"><?php echo sprintf($lang->product->iterationInfo, count($yearRoadmaps, 1) - count($yearRoadmaps));?></div>
+        </div>
+        <?php $roadmapData = zget($yearRoadmaps, $branchKey, array());?>
+        <?php $i = 0;?>
+        <?php foreach($roadmapData as $roadmap):?>
+        <?php $totalData = count($roadmapData);?>
+        <?php $rows      = ceil($totalData / 8);?>
+        <?php $maxPerRow = ceil($totalData / $rows);?>
+        <?php if($i == 0 || $i % $maxPerRow == 0):?>
+        <ul class="release-line">
+        <?php endif;?>
+          <?php $i++;?>
+          <li <?php if(isset($roadmap->build) && date('Y-m-d') < $roadmap->date) echo "class='active'";?>>
+            <?php $viewLink = isset($roadmap->build) ? $this->createLink('release', 'view', "releaseID=$roadmap->id") : $this->createLink('productplan', 'view', "planID=$roadmap->id");?>
+            <a href="<?php echo $viewLink;?>">
+              <?php if(!empty($roadmap->marker)):?>
+              <i class="icon icon-flag text-primary"></i>
+              <?php endif;?>
+              <div class="block">
+                <span class="title"><?php echo isset($roadmap->build) ? $roadmap->name : $roadmap->title;?></span>
+                <span class="date"><?php echo isset($roadmap->build) ? $roadmap->date : ($roadmap->end == '2030-01-01' ? $lang->productplan->future : $roadmap->begin . '~' . $roadmap->end);?></span>
+                <span class="info"><?php echo $roadmap->desc;?></span>
+              </div>
+            </a>
+          </li>
+        <?php if($i % $maxPerRow == 0):?>
+        </ul>
+        <?php endif;?>
+        <?php endforeach;?>
+      </div>
+      <?php endforeach;?>
+    </div>
+    <?php endforeach;?>
   </div>
 </div>
 <?php include '../../common/view/footer.html.php';?>