diff --git a/module/api/config.php b/module/api/config.php
index c023e190d6..ca85343f71 100644
--- a/module/api/config.php
+++ b/module/api/config.php
@@ -24,6 +24,7 @@ $config->api->editor->createlib     = array('id' => 'desc', 'tools' => 'simpleTo
 $config->api->editor->editlib       = array('id' => 'desc', 'tools' => 'simpleTools');
 $config->api->editor->create        = array('id' => 'desc', 'tools' => 'simpleTools');
 $config->api->editor->edit          = array('id' => 'desc', 'tools' => 'simpleTools');
+$config->api->editor->view          = array('id' => 'comment,lastComment', 'tools' => 'simple');
 $config->api->editor->createRelease = array('id' => 'desc', 'tools' => 'simpleTools');
 $config->api->editor->createstruct  = array('id' => 'desc', 'tools' => 'simpleTools');
 $config->api->editor->editstruct    = array('id' => 'desc', 'tools' => 'simpleTools');
diff --git a/module/api/control.php b/module/api/control.php
index 94a621c832..52a70894c4 100755
--- a/module/api/control.php
+++ b/module/api/control.php
@@ -195,7 +195,11 @@ class api extends control
         $this->view->libID          = $libID;
         $this->view->apiID          = $apiID;
         $this->view->crumbs         = $crumbs;
+        $this->view->moduleID       = $moduleID;
+        $this->view->objectType     = $type;
+        $this->view->objectID       = $this->objectID;
         $this->view->users          = $this->user->getPairs('noclosed,noletter');
+        $this->view->libTree        = $this->doc->getLibTree($libID, $libs, 'api', $moduleID);
         $this->view->moduleTree     = $this->doc->getApiModuleTree($libID, $apiID, $release, $moduleID);
         $this->view->objectDropdown = $this->generateLibsDropMenu($libs[$libID], $release);
         $this->display();
diff --git a/module/api/css/common.css b/module/api/css/common.css
index d72371dec4..64b62e6825 100644
--- a/module/api/css/common.css
+++ b/module/api/css/common.css
@@ -163,3 +163,23 @@ form .table-data, #content .table-data {border: 1px solid #e2e2e3;}
 .info .version, .info .crumbs {float: left;}
 .info .crumbs {font-size: 13px; margin-top: 5px; font-weight: normal;}
 .info .crumbs img {margin-right: 3px;}
+
+.lib {width: unset; margin-bottom: unset;}
+.flex {display: flex;}
+.flex-none {flex: none;}
+.flex-auto {flex: auto;}
+.flex-full > .panel {box-shadow: none;}
+.float-r {float: right;}
+.h-full {height: 100%;}
+.w-full {width: 100%;}
+.overflow-x-auto {overflow-x: auto;}
+.overflow-auto {overflow: auto;}
+.overflow-visible {overflow: visible;}
+.overflow-hidden {overflow: hidden;}
+.img-lib {width: 14px; height: 14px; margin-bottom: 2px; flex: 0 0 14px;}
+#mainContent {padding-top: 0; padding-bottom: 0;}
+#mainContent #createDropdown {display: inline-block;}
+#mainContent #createDropdown ul {position: absolute;}
+#pageNav .dropdown-menu {max-height: inherit;}
+#mainContent > .panel {margin-bottom: 0; height: calc(100vh - 125px); overflow-y: auto;}
+#mainContent > .main-col {padding-left: 0;}
diff --git a/module/api/css/index.css b/module/api/css/index.css
index d1a2d2eb31..9c0cc48254 100644
--- a/module/api/css/index.css
+++ b/module/api/css/index.css
@@ -1,24 +1,4 @@
-.lib {width: unset; margin-bottom: unset;}
-.flex {display: flex;}
-.flex-none {flex: none;}
-.flex-auto {flex: auto;}
-.flex-full > .panel {box-shadow: none;}
-.float-r {float: right;}
-.h-full {height: 100%;}
-.w-full {width: 100%;}
-.overflow-x-auto {overflow-x: auto;}
-.overflow-auto {overflow: auto;}
-.overflow-visible {overflow: visible;}
-.overflow-hidden {overflow: hidden;}
-.img-lib {width: 14px; height: 14px; margin-bottom: 2px; flex: 0 0 14px;}
 .cell {padding: 0;}
-#mainContent {padding-top: 0; padding-bottom: 0;}
-#mainContent #createDropdown {display: inline-block;}
-#mainContent #createDropdown ul {position: absolute;}
-#pageNav .dropdown-menu {max-height: inherit;}
-#mainContent > .panel {margin-bottom: 0; height: calc(100vh - 125px); overflow-y: auto;}
-#mainContent > .main-col {padding-left: 0;}
-
 .no-content {width: 100px; height: 100px; margin: 0 auto;}
 .notice {text-align: center; padding-left: 15px; padding-top: 20px;}
 .no-content-button {text-align: center; padding-top: 20px;}
diff --git a/module/api/css/view.css b/module/api/css/view.css
new file mode 100644
index 0000000000..003484f6cc
--- /dev/null
+++ b/module/api/css/view.css
@@ -0,0 +1,11 @@
+.flex-content #content {flex: auto; overflow-y: auto; height: calc(100vh - 125px);}
+.flex-content #history {flex: 0 0 302px; position: relative; overflow: auto;}
+.flex-content #history > #closeBtn {position: absolute; right: 10px; top: 10px;}
+
+#content .detail-content.article-content::-webkit-scrollbar,
+#outlineMenu::-webkit-scrollbar,
+#history::-webkit-scrollbar {height: 0px; width: 0px; background: transparent;}
+#content .detail-content.article-content::-moz-scrollbar,
+#outlineMenu::-moz-scrollbar,
+#hostory::-moz-scrollbar {height: 0px; width: 0px; background: transparent;}
+.main-col iframe {min-height: unset;}
diff --git a/module/api/js/view.js b/module/api/js/view.js
index f32c457b49..b446307d5d 100644
--- a/module/api/js/view.js
+++ b/module/api/js/view.js
@@ -104,7 +104,7 @@ $(function()
     $('.menu-actions > a').blur(function() {$(this).css('background', 'none');})
 
     /* Update doc content silently on switch doc version, story #40503 */
-    $(document).on('click', '.api-version-menu a, #mainActions .container a', function(event)
+    $('body').on('click', '.api-version-menu a, #mainActions .container a', function(event)
     {
         var $tmpDiv = $('<div>');
         $tmpDiv.load($(this).data('url') + ' #mainContent', function()
@@ -117,5 +117,43 @@ $(function()
             $('#outline li.has-list').addClass('open in');
             $('#outline li.has-list>i+ul').prev('i').remove();
         });
+    }).on('click', '.comment-edit-form .btn-hide-form', function()
+    {
+        $('.comment-edit-form #submit').attr('disabled', false);
+    }).on('click', '#docVersionMenu.diff > .drop-body > li', function(e)
+    {
+        e.stopPropagation();
+    }).on('click', '#docVersionMenu #changeBtn', function(e)
+    {
+        $('#docVersionMenu').addClass('diff');
+        e.stopPropagation();
+    }).on('click', '#hisTrigger', function()
+    {
+        var $history = $('#history');
+        var $icon = $(this);
+        if($history.hasClass('hidden'))
+        {
+            $history.removeClass('hidden');
+            $icon.addClass('text-primary');
+        }
+        else
+        {
+            $history.addClass('hidden');
+            $icon.removeClass('text-primary');
+        }
+    }).on('click', '#closeBtn', function()
+    {
+        $('#history').addClass('hidden');
+        $('#hisTrigger').removeClass('text-primary');
     });
+
+    $('#history').append('<a id="closeBtn" href="###" class="btn btn-link"><i class="icon icon-close"></i></a>');
+
+    $('#history').find('.btn.pull-right').removeClass('pull-right');
+
+    $('.comment-edit-form').ajaxForm({
+        success: function(data) {
+            location.reload();
+        }
+    })
 });
diff --git a/module/api/view/content.html.php b/module/api/view/content.html.php
index 3c2742337c..d7330c62ce 100644
--- a/module/api/view/content.html.php
+++ b/module/api/view/content.html.php
@@ -1,5 +1,5 @@
 <div class="main-col" data-min-width="500">
-  <div id="mainContent" class="main-row in">
+  <div id="mainContent" class="main-row in flex-content">
     <div class="main-col col-8">
       <div class="cell" id="content">
         <div class="no-padding">
@@ -20,7 +20,6 @@
                   </ul>
                 </div>
               </div>
-              <div class="crumbs"><?php echo implode(' > ', $crumbs);?></div>
             </div>
             <div class="actions">
               <?php echo html::a("javascript:fullScreen()", '<span class="icon-fullscreen"></span>', '', "title='{$lang->fullscreen}' class='btn btn-link fullscreen-btn'");?>
@@ -31,6 +30,7 @@
                   if(common::hasPriv('api', 'delete')) echo html::a($this->createLink('api', 'delete', "apiID=$api->id"), '<i class="icon-trash"></i>', '', "title='{$lang->api->delete}' class='btn btn-link' target='hiddenwin'");
               }
               ?>
+              <a id="hisTrigger" href="###" class="btn btn-link" title=<?php echo $lang->history?>><span class="icon icon-clock"></span></a>
             </div>
           </div>
         </div>
@@ -146,53 +146,12 @@
           <?php endif;?>
         </div>
       </div>
-      <!-- 历史记录 -->
-      <div class='cell'>
-        <?php
-        $canBeChanged = common::canBeChanged('api', $api);
-        if($canBeChanged) $actionFormLink = $this->createLink('action', 'comment', "objectType=api&objectID=$api->id");?>
-        <?php include '../../common/view/action.html.php';?>
-      </div>
     </div>
-    <div class="side-col col-2" id="sidebar">
-      <div class="sidebar-toggle">
-        <i class="icon icon-angle-right"></i>
-      </div>
-      <div class="cell">
-        <details class="detail" open>
-          <summary class="detail-title"><?php echo $lang->api->basicInfo;?></summary>
-          <div class="detail-content">
-            <table class="table table-data">
-              <tbody>
-              <tr>
-                <th class='c-lib'><?php echo $lang->api->lib;?></th>
-                <td><?php echo $api->libName;?></td>
-              </tr>
-              <tr>
-                <th><?php echo $lang->doc->module;?></th>
-                <td><?php echo $api->moduleName ? $api->moduleName : '/';?></td>
-              </tr>
-              <tr>
-                <th><?php echo $lang->doc->addedDate;?></th>
-                <td><?php echo $api->addedDate;?></td>
-              </tr>
-              <tr>
-                <th><?php echo $lang->api->owner;?></th>
-                <td><?php echo zget($users, $api->owner, '');?></td>
-              </tr>
-              <tr>
-                <th><?php echo $lang->doc->editedBy;?></th>
-                <td><?php echo zget($users, $api->editedBy, '');?></td>
-              </tr>
-              <tr>
-                <th><?php echo $lang->doc->editedDate;?></th>
-                <td><?php echo $api->editedDate;?></td>
-              </tr>
-              </tbody>
-            </table>
-          </div>
-        </details>
-      </div>
+    <div id="history" class='panel hidden' style="margin-left: 2px;">
+      <?php
+      $canBeChanged = common::canBeChanged('api', $api);
+      if($canBeChanged) $actionFormLink = $this->createLink('action', 'comment', "objectType=api&objectID=$api->id");?>
+      <?php include '../../common/view/action.html.php';?>
     </div>
   </div>
 </div>
diff --git a/module/api/view/index.html.php b/module/api/view/index.html.php
index 233b24e1dc..b05dfa4227 100644
--- a/module/api/view/index.html.php
+++ b/module/api/view/index.html.php
@@ -48,7 +48,7 @@
   <div class="sidebar-toggle flex-center"><i class="icon icon-angle-left"></i></div>
   <div class="main-col flex-full overflow-visible flex-auto overflow-visible" data-min-width="500">
     <div class="cell<?php if($browseType == 'bySearch') echo ' show';?>" style="min-width: 400px" id="queryBox" data-module='api'></div>
-  <?php include 'apilist.html.php';?>
+    <?php include 'apilist.html.php';?>
   </div>
 <?php endif;?>
 </div>
diff --git a/module/api/view/view.html.php b/module/api/view/view.html.php
index bba2365fc8..06b6fa30ad 100644
--- a/module/api/view/view.html.php
+++ b/module/api/view/view.html.php
@@ -11,48 +11,35 @@
  */
 ?>
 <?php include '../../common/view/header.html.php';?>
+<?php include '../../common/view/kindeditor.html.php';?>
 <?php js::set('confirmDelete', $lang->api->confirmDelete);?>
-<div class="cell<?php if($browseType == 'bySearch') echo ' show';?>" id="queryBox" data-module=<?php echo 'api';?>></div>
-<div class="fade main-row split-row" id="mainRow">
-  <?php if($libID):?>
-  <?php $sideWidth = common::checkNotCN() ? '270' : '238';?>
-  <div class="side-col" style="width:<?php echo $sideWidth;?>px" data-min-width="<?php echo $sideWidth;?>">
-    <div class="cell" style="min-height: 286px; overflow: visible;">
-      <div id='title'>
-        <li class='menu-title'>
-          <div class="title"><?php echo $this->lang->api->module;?></div>
-        </li>
-        <?php
-        $canTreeBrowse   = common::hasPriv('tree', 'browse');
-        $canViewReleases = common::hasPriv('api', 'releases');
-        $canEditLib      = common::hasPriv('api', 'editLib');
-        $canDeleteLib    = common::hasPriv('api', 'deleteLib');
-        $haveMoreButton  = ($canTreeBrowse or $canViewReleases or $canEditLib or $canDeleteLib);
-
-        if(!$isRelease and $haveMoreButton)
-        {
-            echo "<div class='menu-actions'>";
-            echo html::a('javascript:;', "<i class='icon icon-ellipsis-v'></i>", '', "data-toggle='dropdown' class='btn btn-link'");
-            echo "<ul class='dropdown-menu pull-right'>";
-            if($canTreeBrowse) echo '<li>' . html::a($this->createLink('tree', 'browse', "rootID=$libID&view=api", '', true), '<i class="icon-cog-outline"></i> ' . $this->lang->api->manageType, '', "class='iframe' data-width='1200px'") . '</li>';
-            if($canViewReleases) echo '<li>' . html::a($this->createLink('api', 'releases', "libID=$libID", '', true), '<i class="icon-version"></i> ' . $this->lang->api->managePublish, '', "class='iframe'") . '</li>';
-            echo "<li class='divider'></li>";
-            if($canEditLib) echo '<li>' . html::a($this->createLink('api', 'editLib', "rootID=$libID"), '<i class="icon-edit"></i> ' . $lang->api->editLib, '', "class='iframe'") . '</li>';
-            if($canDeleteLib) echo '<li>' . html::a($this->createLink('api', 'deleteLib', "rootID=$libID"), '<i class="icon-trash"></i> ' . $lang->api->deleteLib, 'hiddenwin') . '</li>';
-            echo '</ul></div>';
-        }
-        ?>
-      </div>
-      <?php if(!$moduleTree):?>
-      <hr class="space">
-      <?php if(!$isRelease):?>
-      <div class="text-center text-muted tips"><?php echo $lang->api->noModule;?></div>
-      <?php endif;?>
-      <?php endif;?>
-      <?php echo $moduleTree;?>
-    </div>
+<?php js::set('treeData', $libTree);?>
+<style>.panel-body{min-height: 180px}</style>
+<div id="mainMenu" class="clearfix">
+  <div id="leftBar" class="btn-toolbar pull-left">
+    <?php echo $objectDropdown;?>
+    <?php $gobackLink = $this->session->docList ? $this->session->apiList : inlink('index', "libID=$libID&moduleID=$moduleID");?>
+    <?php echo html::a($gobackLink, "<i class='icon-back'></i> " . $lang->goback, '', "class='btn btn-link'");?>
+  </div>
+  <div class="btn-toolbar pull-right">
+  <?php
+    if($libTree and common::hasPriv('api', 'struct'))        echo html::a($this->createLink('api', 'struct',        "libID=$libID"), "<i class='icon-treemap muted'> </i>" . $lang->api->struct, '', "class='btn btn-link'");
+    if($libTree and common::hasPriv('api', 'releases'))      echo html::a($this->createLink('api', 'releases',      "libID=$libID", 'html', true), "<i class='icon-version muted'> </i>" . $lang->api->releases, '', "class='btn btn-link iframe' data-width='800px'");
+    if($libTree and common::hasPriv('api', 'createRelease')) echo html::a($this->createLink('api', 'createRelease', "libID=$libID"), "<i class='icon-publish muted'> </i>" . $lang->api->createRelease, '', "class='btn btn-link iframe' data-width='800px'");
+    if($libTree and common::hasPriv('api', 'export') and $config->edition != 'open') echo html::a($this->createLink('api', 'export', "libID=$libID&version=$version&release=$release&moduleID=$moduleID", 'html', true), "<i class='icon-export muted'> </i>" . $lang->export, '', "class='btn btn-link export' data-width='480px' id='export'");
+    if(common::hasPriv('api', 'createLib')) echo html::a($this->createLink('api', 'createLib',     "type=" . ($objectType ? $objectType : 'nolink') . "&objectID=$objectID"), '<i class="icon icon-plus"></i> ' . $lang->api->createLib, '', 'class="btn btn-secondary iframe" data-width="800px"');
+    if($libTree and common::hasPriv('api', 'create')) echo html::a($this->createLink('api', 'create',        "libID=$libID&moduleID=$moduleID"), '<i class="icon icon-plus"></i> ' . $lang->api->createApi, '', 'class="btn btn-primary"');
+  ?>
+  </div>
+</div>
+<div id='mainContent' class="fade flex">
+  <div id='sideBar' class="panel side side-col col overflow-auto" data-min-width="150">
+    <?php include '../../doc/view/lefttree.html.php';?>
+  </div>
+  <div class="sidebar-toggle flex-center"><i class="icon icon-angle-left"></i></div>
+  <div class="main-col flex-full overflow-visible flex-auto overflow-visible" data-min-width="500">
+    <div class="cell<?php if($browseType == 'bySearch') echo ' show';?>" style="min-width: 400px" id="queryBox" data-module='api'></div>
+    <?php include 'apilist.html.php';?>
   </div>
-  <?php endif;?>
-  <?php include 'apilist.html.php';?>
 </div>
 <?php include '../../common/view/footer.html.php';?>
diff --git a/module/doc/view/view.html.php b/module/doc/view/view.html.php
index 7350a2c415..9b1d0e516d 100644
--- a/module/doc/view/view.html.php
+++ b/module/doc/view/view.html.php
@@ -23,9 +23,9 @@
 <?php endif;?>
 <div id="mainMenu" class="clearfix">
   <div id="leftBar" class="btn-toolbar pull-left">
-  <?php echo $objectDropdown;?>
-  <?php $gobackLink = $this->session->docList ? $this->session->docList : inlink('teamSpace', "objectID=0&libID=$libID");?>
-  <?php echo html::a($gobackLink, "<i class='icon-back'></i> " . $lang->goback, '', "class='btn btn-link'");?>
+    <?php echo $objectDropdown;?>
+    <?php $gobackLink = $this->session->docList ? $this->session->docList : inlink('teamSpace', "objectID=0&libID=$libID");?>
+    <?php echo html::a($gobackLink, "<i class='icon-back'></i> " . $lang->goback, '', "class='btn btn-link'");?>
   </div>
   <?php if(empty($object->deleted)):?>
   <div class="btn-toolbar pull-right">