diff --git a/module/doc/view/side.html.php b/module/doc/view/side.html.php
index 17ac0cbdf7..10bd3629df 100644
--- a/module/doc/view/side.html.php
+++ b/module/doc/view/side.html.php
@@ -16,141 +16,124 @@ $sideWidth = common::checkNotCN() ? '270' : '238';
 ?>
 <div class="side-col" style="width:<?php echo $sideWidth;?>px" data-min-width="<?php echo $sideWidth;?>">
   <div class="cell" id="<?php echo $type;?>">
-    <div id='title'>
-      <li class='menu-title'><?php echo $this->lang->doc->menuTitle;?></li>
-      <?php
-      $canEditLib    = common::hasPriv('doc', 'editLib');
-      $canManageBook = common::hasPriv('doc', 'manageBook');
-      $canManageMenu = common::hasPriv('tree', 'browse');
-      $canEditLib    = common::hasPriv('doc', 'editLib');
-      $canDeleteLib  = common::hasPriv('doc', 'deleteLib');
-      if($type != 'book' and ($canManageMenu or $canEditLib or $canDeleteLib))
-      {
-          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($canManageMenu)
-          {
-              echo '<li>' . html::a($this->createLink('tree', 'browse', "rootID=$libID&view=doc", '', true), '<i class="icon-cog-outline"></i> ' . $this->lang->doc->manageType, '', "class='iframe'") . '</li>';
-              echo "<li class='divider'></li>";
-          }
-          if($canEditLib) echo '<li>' . html::a($this->createLink('doc', 'editLib', "rootID=$libID"), '<i class="icon-edit"></i> ' . $lang->doc->editLib, '', "class='iframe'") . '</li>';
-          if($canDeleteLib) echo '<li>' . html::a($this->createLink('doc', 'deleteLib', "rootID=$libID"), '<i class="icon-trash"></i> ' . $lang->doc->deleteLib, 'hiddenwin') . '</li>';
-          echo '</ul></div>';
-      }
-
-      if($type == 'book' and ($canEditLib or $canManageBook))
-      {
-          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($canEditLib) echo '<li>' . html::a($this->createLink('doc', 'editLib', "rootID=$libID"), '<i class="icon-edit"></i> ' . $lang->doc->editBook, '', "class='iframe'") . '</li>';
-          if($canManageBook) echo '<li>' . html::a($this->createLink('doc', 'manageBook', "bookID=$libID"), '<i class="icon-cog-outline"></i> ' . $lang->doc->manageBook) . '</li>';
-          echo '</ul></div>';
-      }
-      ?>
-    </div>
-    <?php if(!$moduleTree):?>
-    <hr class="space">
-    <div class="text-center text-muted tips">
-      <?php echo $type == 'book' ? $lang->doc->noChapter : $lang->doc->noModule;?>
-    </div>
-    <hr class="space">
-    <?php endif;?>
-    <?php if($type == 'book'):?>
-    <?php include './bookside.html.php';?>
-    <?php else:?>
-    <?php echo $moduleTree;?>
-    <?php endif;?>
+    <div class="file-tree" data-type="<?php echo $type?>"></div>
   </div>
+
   <style>
-  .sortable-sorting .module-name > a {cursor: move;}
-  .sortable-sorting li >.tree-group {opacity: .5;}
-  .sortable-sorting .drop-here .tree-group {background-color: #fff3e0;}
-  .sortable-sorting .drop-here .tree-group > * {opacity: .1;}
-  .sortable-sorting .drag-shadow .tree-group {opacity: 1!important;}
-  .sortable-sorting .drag-shadow .tree-actions {visibility: hidden;}
-  .is-sorting > li > .tree-group {opacity: 1; border-radius: 4px;}
-  .is-sorting > li ul {display: none!important;}
-  li.drag-shadow ul {display: none!important;}
+  .float-r {float: right;}
+  /* css for tree */
+  .file-tree {overflow-x: auto;}
+  .file-tree  a {height: 30px;}
+  .flex-center {display: flex; align-items: center; justify-content: space-between;}
+  .h-full {height: 100%;}
+  .w-full {width: 100%;}
+  .tree li>.list-toggle {top: 4px;}
   </style>
+
   <script>
   $(function()
   {
-      /* Make modules tree sortable */
-      $('#modules').sortable(
+      var treeData = [
+          {title: '产品主库', isCatalogue: false, children:[
+              {title: '一级目录', children: [
+                  {title: '二级目录', children: [
+                      {title: '三级目录', children: [
+                        {title: '四级目录'}
+                      ]}
+                  ]},
+              ]},
+          ]},
+          {title: '产品自定义库',isCatalogue: false, children:[
+              {title: '一级目录'},
+          ]},
+      ];
+
+      $('.file-tree').tree(
       {
-          trigger: '.module-name>a.sort-module, .tree-actions>.sortModule>.icon-move, .module-name>a.sortDoc, .tree-actions>.sortDoc>.icon-move',
-          dropToClass: 'sort-to',
-          stopPropagation: true,
-          nested: true,
-          selector: 'li',
-          dragCssClass: 'drop-here',
-          canMoveHere: function($ele, $target)
+          data: treeData,
+          itemCreator: function($li, item)
           {
-              var maxTop = $('.side-col > .cell > ul').height() - $ele.height();
-              if(parseFloat($('.drag-shadow').css('top')) < 0) $('.drag-shadow').css('top', '0');
-              if(parseFloat($('.drag-shadow').css('left')) != 0) $('.drag-shadow').css('left', '0');
-              if(parseFloat($('.drag-shadow').css('top')) > maxTop) $('.drag-shadow').css('top', maxTop + 'px');
-              return true;
-          },
-          targetSelector: function($ele, $root)
+              var $item = '<a href=# ' +
+                          'data-has-children="' + (item.children ? !!item.children.length : false) + '"'  +
+                          'title="' + item.title +
+                          '">' +
+                          '<div class="text h-full w-full flex-center">' + item.title +
+                              '<i class="icon icon-drop icon-ellipsis-v float-r hidden"' +
+                              'data-isCatalogue="' + (item.isCatalogue === false ? false : true) + '"' +
+                              '></i>' +
+                          '</div>' +
+                          '</a>';
+              $li.append($item);
+              if (item.active) $li.addClass('active open in');
+          }
+      });
+      $('li.has-list > ul').addClass("menu-active-primary menu-hover-primary");
+
+      $('.file-tree').on('mousemove', 'a', function(e)
+      {
+          $(this).find('.icon').removeClass('hidden');
+      }).on('mouseout', 'a', function(e)
+      {
+          $(this).find('.icon').addClass('hidden');
+      })
+
+      function renderDropdown(option)
+      {
+          var $liList = (option.id == 'dropDownLibrary') ?
+                         ('<li data-method="addCatalogue"><a><i class="icon icon-controls"></i>添加目录</a></li>' +
+                         '<li data-method="editLib"><a><i class="icon icon-edit"></i>编辑库</a></li>' +
+                         '<li data-method="deleteLib"><a><i class="icon icon-trash"></i>删除库</a></li>')
+                         :
+                         ('<li data-method="addCatalogue"><a><i class="icon icon-controls"></i>添加同级目录</a></li>' +
+                         '<li data-method="editLib"><a><i class="icon icon-edit"></i>添加子目录</a></li>' +
+                         '<li data-method="editLib"><a><i class="icon icon-edit"></i>编辑目录</a></li>' +
+                         '<li data-method="deleteLib"><a><i class="icon icon-trash"></i>删除目录</a></li>')
+
+          debugger;
+          var dropdown = '<ul class="dropdown-menu dropdown-in-tree" ' +
+                         'id="dropDownLibrary" style="display: unset; ' +
+                         'left:' + option.left + 'px; ' +
+                         'top:' + option.top + 'px;' +
+                          '">' + $liList +
+                         '</ul>';
+          return dropdown;
+      };
+
+      function refreshDropdown(option)
+      {
+          $('#' + option.id).css({
+          'display': 'unset',
+          'left': option.left,
+          'top': option.top
+          });
+      };
+
+      $('.file-tree').on('click', '.icon-drop', function(e)
+      {
+          var isCatalogue = $(this).attr('data-isCatalogue') === 'false' ? false : true;
+          var dropDownID  = isCatalogue ? 'dropDownLibrary' : 'dropDownCatalogue';
+          var option = {
+              left: e.pageX,
+              top: e.pageY,
+              id: dropDownID
+          };
+          if (!$('#' + dropDownID).length)
           {
-              var $ul = $ele.closest('ul');
-              setTimeout(function()
-              {
-                  if($('#modules').hasClass('sortable-sorting')) $ul.addClass('is-sorting');
-              }, 100);
-
-              if($ele.hasClass('sortDoc'))
-              {
-                  return $ul.children('li.sortDoc');
-              }
-              else
-              {
-                  return $ul.children('li.catalog');
-              }
-          },
-          always: function()
+              var dropDown = renderDropdown(option);
+              $("body").append(dropDown);
+          }
+          else
           {
-              $('#modules,#modules .is-sorting').removeClass('is-sorting');
-          },
-          finish: function(e)
+              refreshDropdown(option)
+          }
+          e.stopPropagation();
+      });
+
+      $('body').on('click', function(e)
+      {
+          if(!$.contains(e.target, $('.dropdown-in-tree')))
           {
-              if(!e.changed) return;
-
-              var orders       = {};
-              var link         = '';
-              var elementClass = e.list.context.className;
-              if(elementClass.indexOf('sortDoc') >= 0)
-              {
-                  $('#modules').find('li.sortDoc').each(function()
-                  {
-                      var $li = $(this);
-
-                      var item = $li.data();
-                      orders['orders[' + item.id + ']'] = $li.attr('data-order') || item.order;
-                  });
-
-                  link = createLink('doc', 'updateOrder');
-              }
-              else
-              {
-                  $('#modules').find('li.can-sort').each(function()
-                  {
-                      var $li = $(this);
-
-                      var item = $li.data();
-                      '<?php echo $type;?>' == 'book' ? orders['sort[' + item.id + ']'] = $li.attr('data-order') || item.order : orders['orders[' + item.id + ']'] = $li.attr('data-order') || item.order;
-                  });
-
-                  link = '<?php echo $type?>' == 'book' ? createLink('doc', 'sortBookOrder') : createLink('tree', 'updateOrder');
-              }
-
-              $.post(link, orders, function(data){}).error(function()
-              {
-                  bootbox.alert(lang.timeout);
-              });
+              $('.dropdown-in-tree').css('display', 'none');
           }
       });
   });