Perfect item display style

完善项目展示样式

web_src/src/components/item/show/show_regular_item/Index.vue

@@ -1,92 +1,42 @@
 <template>
   <div class="hello">
     <Header> </Header>
+      <div id="header"></div>
 
-      <el-container>
-
-        <el-aside class="el-aside" id="left-side">
-            <LeftMenu :get_page_content="get_page_content" :keyword="keyword" :item_info="item_info" :search_item="search_item" v-if="item_info" ></LeftMenu>
-        </el-aside>
-        
-        <el-container class="right-side" id="right-side">
- 
-
-          <el-header >
-            <div class="header-left">
-                 <i class="el-icon-menu header-left-btn" id="header-left-btn" @click="switch_menu"></i>
-            </div> 
-
-            <div class="header-right">
-              <!-- 登录的事情下 -->
-               <router-link v-if="item_info.is_login" to="/item/index" >{{$t('goback')}} </router-link>
-                &nbsp;&nbsp;&nbsp;&nbsp;
-              <el-dropdown @command="dropdown_callback" v-if="item_info.is_login">
-                <span class="el-dropdown-link">
-                  {{$t('item')}}<i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item :command="share_item">{{$t('share')}}</el-dropdown-item>
-                  <router-link :to="'/item/export/'+item_info.item_id" v-if="item_info.ItemPermn"><el-dropdown-item>{{$t('export')}}</el-dropdown-item></router-link>
-                  <router-link :to="'/item/setting/'+item_info.item_id"  v-if="item_info.ItemCreator"><el-dropdown-item>{{$t('item_setting')}}</el-dropdown-item></router-link>
-                </el-dropdown-menu>
-              </el-dropdown>
-
-              <!-- 非登录的情况下 -->
-
-              <div v-if="!item_info.is_login">
-                  <router-link to="/user/login">{{$t('login_or_register')}}</router-link>
-                  &nbsp;&nbsp;&nbsp;&nbsp;
-                  <a href="https://www.showdoc.cc/help" target="_blank">{{$t('about_showdoc')}}</a>
-              </div>
-
-            </div> 
-
-
-          </el-header>
-          
-          <el-main class="page_content_main" id="page_content_main">
-             <div class="doc-title-box"  v-if="page_id">
-                <span id="doc-title-span" class="dn"></span>
-                <h2 id="doc-title">{{page_title}}</h2>
-                <el-badge :value="attachment_count" class="item"  id="attachment" v-if="attachment_count"   @click.native="ShowAttachment" >
-                  <i class="el-icon-upload"></i> 
-                </el-badge>
-            </div>
-              <Editormd v-bind:content="content" type="html" :keyword="keyword"  v-if="page_id" ></Editormd>
-
-          </el-main>
-
-          
-        </el-container>
-
-        <div class="page-bar" v-show="show_page_bar && item_info.ItemPermn && item_info.is_archived < 1 " >
-          <PageBar v-if="page_id" :page_id="page_id" :item_id='item_info.item_id' :item_info='item_info'  :page_info="page_info"></PageBar>
+
+
+      <div class="container doc-container" id="doc-container">
+
+
+        <div id="left-side">
+            <LeftMenu  ref="leftMenu" :get_page_content="get_page_content" :keyword="keyword" :item_info="item_info" :search_item="search_item" v-if="item_info" ></LeftMenu>
         </div>
-        
-      </el-container>
+
+
+        <div id="right-side" >
+
+           <div class="doc-title-box" id="doc-title-box">
+              <span id="doc-title-span" class="dn"></span>
+              <h2 id="doc-title">{{page_title}}</h2>
+          </div>
+          <div id="doc-body" >
+
+          <div id="page_md_content" class="page_content_main"><Editormd v-bind:content="content" v-if="page_id" type="html" :keyword="keyword"></Editormd></div>
+          </div>
+
+            <OpBar v-if="show_page_bar"  :page_id="page_id" :item_id='item_info.item_id' :item_info='item_info'  :page_info="page_info"  > </OpBar>
+
+        </div>
+
+
+      </div>
 
       <BackToTop  > </BackToTop>
       <Toc  v-if="page_id" > </Toc>
 
-  <el-dialog
-    title="分享项目"
-    :visible.sync="dialogVisible"
-    width="600px"
-    :modal="false"
-    class="text-center"
-    >
-    
-    <p>项目地址：<code >{{share_item_link}}</code></p>
-    <p><a href="javascript:;" class="home-phone-butt" v-clipboard:copyhttplist="copyText" v-clipboard:success="onCopy">{{$t('copy_link')}}</a></p>
-        <p style="border-bottom: 1px solid #eee;"><img id="" style="width:114px;height:114px;" :src="qr_item_link"> </p>
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="dialogVisible = false">{{$t('confirm')}}</el-button>
-    </span>
-  </el-dialog>
-
-    <!-- 附件列表 -->
-    <AttachmentList callback="" :item_id="page_info.item_id" :manage="false" :page_id="page_info.page_id" ref="AttachmentList"></AttachmentList>
 
+        <!-- 附件列表 -->
+        <AttachmentList callback="" :item_id="page_info.item_id" :manage="false" :page_id="page_info.page_id" ref="AttachmentList"></AttachmentList>
 
 
     <Footer> </Footer>
@@ -99,12 +49,11 @@
 <script>
   import Editormd from '@/components/common/Editormd'
   import BackToTop from '@/components/common/BackToTop'
-  import Toc from '@/components/common/Toc'
+  import Toc from '@/components/item/show/show_regular_item/Toc'
   import LeftMenu from '@/components/item/show/show_regular_item/LeftMenu'
-  import PageBar from '@/components/item/show/show_regular_item/PageBar'
+  import OpBar from '@/components/item/show/show_regular_item/OpBar'
   import AttachmentList from '@/components/page/edit/AttachmentList'
 
-
   export default {
     props:{
       item_info:'',
@@ -128,7 +77,7 @@
   components:{
     Editormd,
     LeftMenu,
-    PageBar,
+    OpBar,
     BackToTop,
     Toc,
     AttachmentList
@@ -169,49 +118,20 @@
             
           });
     },
-    dropdown_callback(data){
-      if (data) {
-        data();
-      };
-    },
-    share_item(){
-      this.share_item_link =  this.getRootPath()+"#/"+this.item_info.item_id  ;
-      this.qr_item_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_item_link);
-      this.dialogVisible = true;
-      this.copyText = this.item_info.item_name+"  -- ShowDoc \r\n"+ this.share_item_link;
-    },
     //根据屏幕宽度进行响应(应对移动设备的访问)
     AdaptToMobile(){
-      this.hide_menu();
+      let childRef = this.$refs.leftMenu ;//获取子组件
+      childRef.hide_menu();
       this.show_page_bar = false;
-
+      var doc_container = document.getElementById('doc-container') ;
+      doc_container.style.width = '95%';
+      doc_container.style.padding = '5px';
+      var header = document.getElementById('header') ;
+      header.style.height = '10px';
+      var docTitle = document.getElementById('doc-title-box') ;
+      docTitle.style.marginTop = '30px';
     },
-    show_menu(){
-        var element = document.getElementById('left-side') ;
-        element.style.display = 'block' ;
-        var element = document.getElementById('right-side') ;
-        element.style.marginLeft = '300px'; 
-        var element = document.getElementById('page_content_main') ;
-        element.style.width = '800px' ; 
-    },
-    hide_menu(){
-        var element = document.getElementById('left-side') ;
-        element.style.display = 'none';
-        var element = document.getElementById('right-side') ;
-        element.style.marginLeft = '0px'; 
-        var element = document.getElementById('page_content_main') ;
-        element.style.width = '95%' ; 
-    },
-    switch_menu(){
-      var element = document.getElementById('left-side') ;
-      if (element.style.display == 'none') {
-        this.show_menu();
-      }else{
-        this.hide_menu();
 
-      }
-
-    },
     onCopy(){
       this.$message(this.$t("copy_success"));
     },
@@ -219,7 +139,6 @@
         let childRef = this.$refs.AttachmentList ;//获取子组件
         childRef.show() ; 
     },
-    
   },
   mounted () {
     //根据屏幕宽度进行响应(应对移动设备的访问)
@@ -228,6 +147,7 @@
         this.AdaptToMobile();
       });
     }
+    this.set_bg_grey();
   }
 };
 </script>
@@ -235,31 +155,6 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 
-  .header-right{
-    color: #333;
-    line-height: 40px;
-    text-align: right; 
-    font-size: 12px;
-    /*border: 1px solid #eee;*/
-  }
-  .header-right .el-dropdown-link{
-    margin-right: 20px;
-  }
-  .el-aside {
-    color: #333;
-    position:fixed;
-    height: calc(100% - 20px);
-    background-color: rgb(250, 250, 250);
-    border-right: solid 1px #e6e6e6;
-  }
-  .page-bar{
-    color: #333;
-    position:fixed;
-    top: 100px;
-    right: 10px;
-    width: 100px;
-  }
-
   .page_content_main{
     width:800px;
     margin: 0 auto ;
@@ -267,34 +162,11 @@
     overflow: visible;
   }
 
-  .right-side{
-    margin-left:300px;
-  }
-
-  .doc-title-box{
-      height: auto;
-      margin: 30px 30px 10px 30px;
-      width: auto;
-      border-bottom: 1px solid #ebebeb;
-      padding-bottom: 10px;
-  }
   .editormd-html-preview{
     width: 95%;
     font-size: 16px;
   }
 
-  .header-left{
-    float: left;
-    
-  }
-
-  .header-left-btn{
-    font-size: 20px;
-    margin-top: 5px;
-    margin-left: -15px;
-    cursor: pointer;
-    position: fixed;
-  }
   #attachment{
     float: right;
     font-size: 25px;
@@ -303,5 +175,75 @@
     cursor:pointer;
     color: #abd1f1;
   }
-  
+
+  #page_md_content{
+      padding: 10px 10px 90px 10px;
+      overflow: hidden;
+      font-size: 11pt;
+      line-height: 1.7;
+      color: #333;
+  }
+
+  .doc-container {
+      position: static;
+      -webkit-box-shadow: 0px 1px 6px #ccc;
+      -moz-box-shadow: 0px 1px 6px #ccc;
+      -ms-box-shadow: 0px 1px 6px #ccc;
+      -o-box-shadow: 0px 1px 6px #ccc;
+      box-shadow: 0px 1px 6px #ccc;
+      background-color: #fff;
+      border-bottom: 1px solid #d9d9d9;
+      margin-bottom: 20px;
+      width: 800px;
+      min-height: 750px;
+      margin-left: auto;
+      margin-right: auto;
+      padding: 20px;
+  }
+
+  #header{
+    height: 80px;
+  }
+
+  #doc-body{
+    width: 95%;
+    margin: 0 auto;
+    background-color: #fff;
+  }
+
+  .doc-title-box{
+      height: auto;
+      width: auto;
+      border-bottom: 1px solid #ebebeb;
+      padding-bottom: 10px;
+      width: 90%;
+      margin: 10px auto;
+  }
+
+
+  pre ol{
+    list-style: none;
+  }
+
+  .markdown-body pre {
+    background-color: #f7f7f9;
+    border: 1px solid #e1e1e8;
+  }
+  .hljs{
+    background-color: #f7f7f9;
+  }
+  .tool-bar{
+    margin-top: -38px;
+  }
+  .editormd-html-preview, .editormd-preview-container{
+    padding: 0px;
+    font-size: 14px;
+  }
+
+
+
+
+
+
+
 </style>

web_src/src/components/item/show/show_regular_item/LeftMenu.vue

@@ -1,70 +1,60 @@
 <template>
   <div class="hello">
+    <i class="el-icon-menu header-left-btn" v-if="show_menu_btn" id="header-left-btn" @click="show_menu"></i>
+    <el-aside class="el-aside" id="left-side-menu" width="240px">
+      <el-menu  @select="select_menu"
+        background-color="#fafafa"
+        text-color=""
+        active-text-color="#008cff" 
+        :default-active="item_info.default_page_id"
+        :default-openeds='openeds'
+      >
 
+            <el-input 
+              @keyup.enter.native="input_keyword"
+              :placeholder="$t('input_keyword')"
+              class="search-box"
+              v-model="keyword">
+             
+            </el-input>
 
-    <el-menu  @select="select_menu"
-      background-color="#fafafa"
-      text-color=""
-      active-text-color="#008cff" 
-      :default-active="item_info.default_page_id"
-      :default-openeds='openeds'
-    >
-
-          <el-input 
-            @keyup.enter.native="input_keyword"
-            :placeholder="$t('input_keyword')"
-            class="search-box"
-            v-model="keyword">
-           
-          </el-input>
-
-          <div class="new-bar" v-if="item_info.ItemPermn && item_info.is_archived < 1 ">
-            <el-tooltip class="item" effect="dark" :content="$t('new_page')" placement="left">
-                  <i class="el-icon-plus" @click="new_page"></i>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" :content="$t('new_catalog')" placement="right">
-                 <!--  <i class="el-icon-message" @click="mamage_catalog"></i> -->
-                  <img src="static/images/folder.png" @click="mamage_catalog" class="icon-folder">
-            </el-tooltip>      
-          </div>
-
-      <!-- 一级页面 -->
-        <el-menu-item  v-if="menu.pages.length " v-for="(page ,index) in menu.pages" :index="page.page_id" :key="page.page_id" >
-          <i class="el-icon-document"></i>
-          {{page.page_title}}
-        </el-menu-item>
-
-        <!-- 目录开始 -->
-      <el-submenu  v-if="menu.catalogs.length" v-for="(catalog2 ,catalog_index) in menu.catalogs" :index="catalog2.cat_id" :key="catalog2.cat_id">
-        <!-- 二级目录名 -->
-        <template slot="title"> <img src="static/images/folder.png"  class="icon-folder menu-icon-folder ">{{catalog2.cat_name}}</template>
-
-        <!-- 二级目录的页面 -->
-        <el-menu-item  v-if="catalog2.pages" v-for="(page2 ,page2_index) in catalog2.pages" :key="page2.page_id" :index="page2.page_id">
-            <i class="el-icon-document"></i>{{page2.page_title}}
-        </el-menu-item>
-
-        <!-- 二级目录下的三级目录 -->
-        <el-submenu  v-if="catalog2.catalogs.length" v-for="(catalog3 ,catalog_index3) in catalog2.catalogs" :index="catalog3.cat_id" :key="catalog3.cat_id">
-          <template slot="title"><img src="static/images/folder.png">{{catalog3.cat_name}}</template>
-          <!-- 三级目录的页面 -->
-          <el-menu-item  v-if="catalog3.pages" v-for="(page3 ,page3_index) in catalog3.pages"  :index="page3.page_id" :key="page3.page_id"><i class="el-icon-document"></i>{{page3.page_title}}</el-menu-item>
-
-            <!-- 三级目录下的四级目录 -->
-            <el-submenu  v-if="catalog3.catalogs.length" v-for="(catalog4 ,catalog_index4) in catalog3.catalogs" :index="catalog4.cat_id" :key="catalog4.cat_id">
-              <template slot="title"><img src="static/images/folder.png">{{catalog4.cat_name}}</template>
-              <!-- 四级目录的页面 -->
-              <el-menu-item  v-if="catalog4.pages" v-for="(page4 ,page4_index) in catalog4.pages" :index="page4.page_id"  :key="page4.page_id"><i class="el-icon-document"></i>{{page4.page_title}}</el-menu-item>
-            </el-submenu>
 
-        </el-submenu>
+        <!-- 一级页面 -->
+          <el-menu-item  v-if="menu.pages.length " v-for="(page ,index) in menu.pages" :index="page.page_id" :key="page.page_id" >
+            <i class="el-icon-document"></i>
+             <span :title="page.page_title">{{page.page_title}}</span> 
+          </el-menu-item>
+
+          <!-- 目录开始 -->
+        <el-submenu  v-if="menu.catalogs.length" v-for="(catalog2 ,catalog_index) in menu.catalogs" :index="catalog2.cat_id" :key="catalog2.cat_id">
+          <!-- 二级目录名 -->
+          <template slot="title"> <img src="/static/images/folder.png"  class="icon-folder menu-icon-folder ">{{catalog2.cat_name}}</template>
 
+          <!-- 二级目录的页面 -->
+          <el-menu-item  v-if="catalog2.pages" v-for="(page2 ,page2_index) in catalog2.pages" :key="page2.page_id" :index="page2.page_id">
+              <i class="el-icon-document"></i><span :title="page2.page_title">{{page2.page_title}}</span> 
+          </el-menu-item>
 
+          <!-- 二级目录下的三级目录 -->
+          <el-submenu  v-if="catalog2.catalogs.length" v-for="(catalog3 ,catalog_index3) in catalog2.catalogs" :index="catalog3.cat_id" :key="catalog3.cat_id">
+            <template slot="title"><img src="static/images/folder.png">{{catalog3.cat_name}}</template>
+            <!-- 三级目录的页面 -->
+            <el-menu-item  v-if="catalog3.pages" v-for="(page3 ,page3_index) in catalog3.pages"  :index="page3.page_id" :key="page3.page_id"><i class="el-icon-document"></i><span :title="page3.page_title">{{page3.page_title}}</span> </el-menu-item>
 
+              <!-- 三级目录下的四级目录 -->
+              <el-submenu  v-if="catalog3.catalogs.length" v-for="(catalog4 ,catalog_index4) in catalog3.catalogs" :index="catalog4.cat_id" :key="catalog4.cat_id">
+                <template slot="title"><img src="static/images/folder.png">{{catalog4.cat_name}}</template>
+                <!-- 四级目录的页面 -->
+                <el-menu-item  v-if="catalog4.pages" v-for="(page4 ,page4_index) in catalog4.pages"  :index="page4.page_id" :key="page4.page_id"><i class="el-icon-document"></i><span :title="page4.page_title">{{page4.page_title}}</span></el-menu-item>
+              </el-submenu>
 
-      </el-submenu>
+          </el-submenu>
+
+          
+        </el-submenu>
 
-    </el-menu>
+      </el-menu>
+    </el-aside>
   </div>
 </template>
 
@@ -81,7 +71,8 @@
     data() {
       return {
         openeds:[],
-        menu:''
+        menu:'',
+        show_menu_btn:false
       }
     },
   components:{
@@ -116,6 +107,29 @@
 
     input_keyword(){
       this.search_item(this.keyword);
+    },
+    show_menu(){
+        this.show_menu_btn = false;
+        var element = document.getElementById('left-side-menu') ;
+        element.style.display = 'block' ;
+        element.style.marginLeft = '0px'; 
+        element.style.marginTop = '0px'; 
+        element.style.position = 'static'; 
+        var element = document.getElementById('right-side') ;
+        element.style.display = 'none'; 
+    },
+    hide_menu(){
+        this.show_menu_btn = true;
+        var element = document.getElementById('left-side-menu') ;
+        element.style.display = 'none';
+        var element = document.getElementById('right-side') ;
+        element.style.marginLeft = '0px';
+        element.style.display = 'block'; 
+        var element = document.getElementById('page_md_content') ;
+        element.style.width = '95%' ; 
+    },
+    AdaptToMobile(){
+
     }
 
   },
@@ -136,6 +150,15 @@
         that.openeds = [ item_info.default_cat_id2, item_info.default_page_id];
       };
     }
+
+    //根据屏幕宽度进行响应(应对移动设备的访问)
+    if( this.isMobile() ||  window.screen.width< 1000){
+      this.$nextTick(() => {
+        this.AdaptToMobile();
+      });
+    }
+
+
   }
 };
 </script>
@@ -148,32 +171,25 @@
     line-height: 60px;
   }
   
-  .el-aside {
+  #left-side-menu {
     color: #333;
-    position:fixed;
-    height: calc(100% - 20px);
+    position: fixed;
+    width: 240px;
+    margin-left: -266px;
+    margin-top: -20px;
+    height: calc(100% - 90px);
+    overflow-x:hidden;
 
   }
 .el-input-group__append button.el-button{
     background-color: #ffffffa3;
 
   }
-.new-bar{
-  margin-left: 190px;
-  font-size: 20px;
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-.new-bar i{
-  cursor:pointer ;
-}
 
-.new-bar i:first-child{
-  margin-right: 15px;
-}
 .el-menu{
   border-right:none;
 }
+
 .icon-folder{
   width: 18px;
   height: 15px;
@@ -196,6 +212,7 @@
 .el-menu-item {
   line-height: 40px;
   height: 40px;
+  font-size: 12px;
 }
 .el-menu-item [class^=el-icon-] {
   font-size: 17px;
@@ -209,7 +226,35 @@
   margin-bottom: 4px;
 }
 .search-box {
-    padding: 20px 20px 0px 20px;
+    padding: 0px 20px 0px 20px;
     box-sizing: border-box;
+
+}
+
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar
+{
+    width: 1px;
+    height: 1px;
+    background-color: #fafafa;
+}
+
+.header-left-btn{
+  font-size: 20px;
+  margin-top: 5px;
+  cursor: pointer;
+  position: fixed;
 }
+
+
+
+</style>
+<style type="text/css">
+  #left-side-menu .el-input__inner{
+      background-color: #fafafa !important;
+  }
+
+  #left-side-menu .el-submenu__title{
+    font-size: 12px;
+  }
 </style>

web_src/src/components/item/show/show_regular_item/OpBar.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="hello">
+        <div class="op-bar">
+
+             <span v-if="!item_info.is_login">
+                <el-tooltip class="item" effect="dark" v-if="lang =='zh-cn'" :content="$t('about_showdoc')" placement="left">
+                <a href="https://www.showdoc.cc/help" target="_blank"><i class="el-icon-tickets" ></i></a>
+                </el-tooltip>
+
+                <el-tooltip class="item" effect="dark" :content="$t('index_login_or_register')" placement="top">
+                      <router-link to="/user/login"><i class="el-icon-arrow-right" ></i></router-link>
+                </el-tooltip>
+
+
+
+             </span>
+
+             <span v-if="item_info.is_login">
+                <el-tooltip class="item" effect="dark" :content="$t('goback')" placement="left">
+                      <router-link to="/item/index"><i class="el-icon-back" ></i></router-link>
+                </el-tooltip>
+
+                <el-tooltip class="item" effect="dark" :content="$t('share')" placement="top">
+                      <i class="el-icon-share" @click="share_page"></i>
+                </el-tooltip>
+
+             </span>
+
+            <span v-if="item_info.ItemPermn">
+              <el-tooltip class="item" effect="dark" :content="$t('new_page')" placement="top">
+                    <i class="el-icon-plus" @click="new_page"></i>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" :content="$t('new_catalog')" placement="left">
+                    <img src="/static/images/folder.png" @click="mamage_catalog" class="icon-folder">
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" :content="$t('edit_page')" placement="top">
+                    <i class="el-icon-edit" @click="edit_page"></i>
+              </el-tooltip> 
+
+
+              <el-tooltip v-show="!showMore" class="item" effect="dark" :content="$t('more')" placement="top">
+                    <i class="el-icon-caret-top" @click="showMoreAction"></i>
+              </el-tooltip>
+              <el-tooltip v-show="showMore" class="item" effect="dark" :content="$t('more')" placement="top">
+                    <i class="el-icon-caret-bottom" @click="hideMoreAction"></i>
+              </el-tooltip>
+
+              <span v-show="showMore">
+                  <el-tooltip class="item" effect="dark" :content="$t('copy')" placement="left"> 
+                    <router-link :to="'/page/edit/'+item_id+'/0?copy_page_id='+page_id"><i class="el-icon-document" ></i></router-link>
+                  </el-tooltip>
+                  <el-tooltip class="item" effect="dark" :content="$t('history_version')" placement="top">
+                        <i class="el-icon-goods" @click="ShowHistoryVersion"></i>
+                  </el-tooltip>
+                  <el-tooltip class="item" effect="dark" :content="$t('detail')" placement="top">
+                        <i class="el-icon-info" @click="show_page_info"></i>
+                  </el-tooltip>
+                  <el-tooltip class="item" effect="dark" :content="$t('export')" placement="left">
+                      <router-link :to="'/item/export/'+item_info.item_id" v-if="item_info.ItemPermn"><i class="el-icon-download"></i></router-link>
+                  </el-tooltip>
+                  <el-tooltip class="item" effect="dark" :content="$t('delete_interface')" placement="top">
+                        <i class="el-icon-delete" @click="delete_page"></i>
+                  </el-tooltip>
+
+                  <span v-if="item_info.ItemCreator">
+
+                      <el-tooltip class="item" effect="dark" :content="$t('item_setting')" placement="top">
+                        <router-link :to="'/item/setting/'+item_info.item_id"  v-if="item_info.ItemCreator"><i class="el-icon-setting"></i></router-link>
+                      </el-tooltip>
+                    </span>
+              </span>
+
+
+
+            </span>
+
+
+
+
+        </div>
+
+
+  <el-dialog
+    :title="$t('share_page')"
+    :visible.sync="dialogVisible"
+    width="600px"
+    :modal="false"
+    >
+    
+    <p>{{$t('item_page_address')}} : <code >{{share_page_link}}</code>
+    </p>
+      <p v-if="false" style="border-bottom: 1px solid #eee;"><img  id="qr-page-link" style="width:114px;height:114px;" :src="qr_page_link"> </p>
+      
+      <div v-show="item_info.ItemPermn">
+        <el-checkbox v-model="isCreateSiglePage" @change="CreateSiglePage">{{$t('create_sigle_page')}}</el-checkbox>
+
+        <p v-if="isCreateSiglePage">{{$t('single_page_address')}} : <code >{{share_single_link}}</code> <p>
+
+        <p>
+          {{$t('create_sigle_page_tips')}}
+        </p>
+      </div>
+
+
+
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="dialogVisible = false">{{$t('confirm')}}</el-button>
+    </span>
+  </el-dialog>
+
+    <!-- 历史版本 -->
+    <HistoryVersion :page_id="page_id" :is_show_recover_btn="false" :is_modal="false" callback="insertValue" ref="HistoryVersion"></HistoryVersion>
+
+  </div>
+</template>
+
+
+<style scoped>
+
+  .op-bar{
+    color: #333;
+    position: fixed;
+    top: 110px;
+    margin-left: 840px;
+    max-width: 250px;
+
+  }
+  .op-bar i{
+    cursor:pointer ;
+    font-size: 16px;
+    margin-right: 55px;
+    margin-bottom: 30px;
+  }
+
+
+  .icon-folder{
+    width: 15px;
+    height: 12px;
+    cursor: pointer;
+    margin-right: 55px;
+  }
+
+  a{
+    color: #333;
+  }
+
+</style>
+
+<script>
+  import HistoryVersion from '@/components/page/edit/HistoryVersion'
+  export default {
+  props:{
+    item_id:'',
+    item_domain:'',
+    page_id:'',
+    item_info:'',
+    page_info:{}
+  },
+    data() {
+      return {
+        menu: [],
+        dialogVisible:false,
+        qr_page_link:"#",
+        qr_single_link:"#",
+        share_page_link:"",
+        share_single_link:"",
+        copyText1:'',
+        copyText2:'',
+        isCreateSiglePage:false,
+        showMore:false,
+        lang:""
+      }
+    },
+  components:{
+    HistoryVersion
+  },
+  methods:{
+    edit_page(){
+      var page_id = this.page_id > 0 ? this.page_id : 0 ;
+      var url = '/page/edit/'+this.item_id+'/'+page_id;
+      this.$router.push({path:url}) ;
+    },
+    share_page(){
+      var page_id = this.page_id > 0 ? this.page_id : 0 ;
+      let path = this.item_domain ? this.item_domain : this.item_id ;
+      this.share_page_link = this.getRootPath()+"/"+path+'?page_id='+page_id ;
+      //this.share_single_link= this.getRootPath()+"/page/"+page_id ;
+      this.qr_page_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_page_link);
+      //this.qr_single_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_single_link);
+      this.dialogVisible = true;
+      this.copyText1 = this.item_info.item_name+' - '+this.page_info.page_title+"\r\n"+ this.share_page_link;
+      this.copyText2 = this.page_info.page_title+"\r\n"+ this.share_single_link;
+    },
+    dropdown_callback(data){
+      if (data) {
+        data();
+      };
+    },
+    show_page_info(){
+      var html ="本页面由 "+this.page_info.author_username+' 于 '+this.page_info.addtime+' 更新';
+      this.$alert(html);
+    },
+
+    //展示历史版本
+    ShowHistoryVersion(){
+        let childRef = this.$refs.HistoryVersion ;//获取子组件
+        childRef.show() ; 
+    },
+
+    delete_page(){
+      var page_id = this.page_id > 0 ? this.page_id : 0 ;
+      var that = this ;
+      var url = DocConfig.server+'/api/page/delete';
+
+      this.$confirm(that.$t('comfirm_delete'), ' ', {
+        confirmButtonText: that.$t('confirm'),
+        cancelButtonText: that.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        var params = new URLSearchParams();
+        params.append('page_id',  page_id);
+        that.axios.post(url, params)
+        .then(function (response) {
+          if (response.data.error_code === 0 ) {
+            window.location.reload() 
+          }else{
+            that.$alert(response.data.error_message);
+          }
+        }); 
+      });
+    },
+    onCopy(){
+      this.$message(this.$t("copy_success"));
+    },
+    CreateSiglePage(){
+        var page_id = this.page_id > 0 ? this.page_id : 0 ;
+        var that = this ;
+        var url = DocConfig.server+'/api/page/createSinglePage';
+        var params = new URLSearchParams();
+        params.append('page_id',  page_id);
+        params.append('isCreateSiglePage',  this.isCreateSiglePage);
+
+        that.axios.post(url, params)
+        .then(function (response) {
+          if (response.data.error_code === 0 ) {
+            var unique_key = response.data.data.unique_key ;
+            if (unique_key) {
+              that.share_single_link = that.getRootPath()+"/p/"+unique_key ;
+            }else{
+              that.share_single_link = '';
+            }
+            
+
+          }else{
+            that.$alert(response.data.error_message);
+          }
+        });
+
+    },
+    new_page(){
+      var url = '/page/edit/'+this.item_info.item_id+'/0';
+      this.$router.push({path:url});
+    },
+
+    mamage_catalog(){
+      var url = '/catalog/'+this.item_info.item_id;
+      this.$router.push({path:url});
+    },
+    showMoreAction(){
+      this.showMore = true ;
+      var element = document.getElementById('page_md_content').getElementsByClassName('open-list');
+      element[0].style.top = '320px';
+    },
+    hideMoreAction(){
+      this.showMore = false ;
+      var element = document.getElementById('page_md_content').getElementsByClassName('open-list');
+      element[0].style.top = '220px';
+    },
+
+  },
+  mounted () {
+    var that = this ;
+    this.lang = DocConfig.lang ;
+    if (this.page_info.unique_key) {
+      this.isCreateSiglePage = true ;
+      this.share_single_link = this.getRootPath()+"/p/"+this.page_info.unique_key ;
+    };
+    document.onkeydown=function(e){  //对整个页面文档监听 其键盘快捷键
+      var keyNum=window.event ? e.keyCode :e.which;  //获取被按下的键值 
+      if (keyNum == 69 && e.ctrlKey) {  //Ctrl +e 为编辑
+        that.edit_page();
+        e.preventDefault();
+      };
+
+      if (keyNum == 46 && e.ctrlKey) {  //Ctrl +del 为删除
+        that.delete_page();
+        e.preventDefault();
+      };
+
+    }
+
+  }
+};
+</script>

web_src/src/components/item/show/show_regular_item/PageBar.vue

@@ -1,202 +0,0 @@
-<template>
-  <div class="hello">
-      <ul class="page-bar">
-        <li>
-            <el-tooltip class="item" effect="dark" :content="$t('edit_page')" placement="right">
-                  <el-button type="text" icon="el-icon-edit" @click="edit_page"></el-button>
-            </el-tooltip>
-        </li>
-        <li>
-            <el-tooltip class="item" effect="dark" :content="$t('share_page')" placement="right">
-                  <el-button type="text" icon="el-icon-share" @click="share_page"></el-button>
-            </el-tooltip>
-
-          </li>
-        <li>
-          <el-dropdown @command="dropdown_callback">
-            <span class="el-dropdown-link">
-              <i class="el-icon-arrow-down el-icon--down"></i>
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <router-link :to="'/page/edit/'+item_id+'/0?copy_page_id='+page_id"><el-dropdown-item>{{$t('copy')}}</el-dropdown-item></router-link>
-              <el-dropdown-item :command="show_page_info">{{$t('detail')}}</el-dropdown-item>
-              <el-dropdown-item :command="ShowHistoryVersion">{{$t('history_version')}}</el-dropdown-item>
-              <el-dropdown-item :command="delete_page">{{$t('delete')}}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </li>
-      </ul>
-
-  <el-dialog
-    :title="$t('share_page')"
-    :visible.sync="dialogVisible"
-    width="600px"
-    :modal="false"
-    >
-    
-    <p>{{$t('item_page_address')}} : <code >{{share_page_link}}</code>
-    </p>
-      <p v-if="false" style="border-bottom: 1px solid #eee;"><img  id="qr-page-link" style="width:114px;height:114px;" :src="qr_page_link"> </p>
-      
-      <div v-show="item_info.ItemPermn">
-        <el-checkbox v-model="isCreateSiglePage" @change="CreateSiglePage">{{$t('create_sigle_page')}}</el-checkbox>
-
-        <p v-if="isCreateSiglePage">{{$t('single_page_address')}} : <code >{{share_single_link}}</code> <p>
-
-        <p>
-          {{$t('create_sigle_page_tips')}}
-        </p>
-      </div>
-
-
-
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="dialogVisible = false">{{$t('confirm')}}</el-button>
-    </span>
-  </el-dialog>
-
-    <!-- 历史版本 -->
-    <HistoryVersion :page_id="page_id" :is_show_recover_btn="false" :is_modal="false" callback="insertValue" ref="HistoryVersion"></HistoryVersion>
-
-  </div>
-</template>
-
-
-<style scoped>
-  .page-bar{
-   
-  }
-
-</style>
-
-<script>
-  import HistoryVersion from '@/components/page/edit/HistoryVersion'
-  export default {
-  props:{
-    item_id:'',
-    page_id:'',
-    page_info:{},
-    item_info:'',
-  },
-    data() {
-      return {
-        menu: [],
-        dialogVisible:false,
-        qr_page_link:"#",
-        qr_single_link:"#",
-        share_page_link:"",
-        share_single_link:"",
-        copyText1:'',
-        copyText2:'',
-        isCreateSiglePage:false
-      }
-    },
-  components:{
-    HistoryVersion
-  },
-  methods:{
-    edit_page(){
-      var page_id = this.page_id > 0 ? this.page_id : 0 ;
-      var url = '/page/edit/'+this.item_id+'/'+page_id;
-      this.$router.push({path:url}) ;
-    },
-    share_page(){
-      var page_id = this.page_id > 0 ? this.page_id : 0 ;
-      this.share_page_link = this.getRootPath()+"#/"+this.item_id +'?page_id='+page_id ;
-      //this.share_single_link= this.getRootPath()+"#/page/"+page_id ;
-      this.qr_page_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_page_link);
-      //this.qr_single_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_single_link);
-      this.dialogVisible = true;
-      this.copyText1 = this.item_info.item_name+' - '+this.page_info.page_title+"\r\n"+ this.share_page_link;
-      this.copyText2 = this.page_info.page_title+"\r\n"+ this.share_single_link;
-    },
-    dropdown_callback(data){
-      if (data) {
-        data();
-      };
-    },
-    show_page_info(){
-      var html ="本页面由 "+this.page_info.author_username+' 于 '+this.page_info.addtime+' 更新';
-      this.$alert(html);
-    },
-    
-    //展示历史版本
-    ShowHistoryVersion(){
-        let childRef = this.$refs.HistoryVersion ;//获取子组件
-        childRef.show() ; 
-    },
-
-    delete_page(){
-      var page_id = this.page_id > 0 ? this.page_id : 0 ;
-      var that = this ;
-      var url = DocConfig.server+'/api/page/delete';
-
-      this.$confirm(that.$t('comfirm_delete'), ' ', {
-        confirmButtonText: that.$t('confirm'),
-        cancelButtonText: that.$t('cancel'),
-        type: 'warning'
-      }).then(() => {
-        var params = new URLSearchParams();
-        params.append('page_id',  page_id);
-        that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            window.location.reload() 
-          }else{
-            that.$alert(response.data.error_message);
-          }
-        }); 
-      });
-    },
-    onCopy(){
-      this.$message(this.$t("copy_success"));
-    },
-    CreateSiglePage(){
-        var page_id = this.page_id > 0 ? this.page_id : 0 ;
-        var that = this ;
-        var url = DocConfig.server+'/api/page/createSinglePage';
-        var params = new URLSearchParams();
-        params.append('page_id',  page_id);
-        params.append('isCreateSiglePage',  this.isCreateSiglePage);
-
-        that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            var unique_key = response.data.data.unique_key ;
-            if (unique_key) {
-              that.share_single_link = that.getRootPath()+"#/p/"+unique_key ;
-            }else{
-              that.share_single_link = '';
-            }
-            
-
-          }else{
-            that.$alert(response.data.error_message);
-          }
-        });
-
-    }
-
-  },
-  mounted () {
-    var that = this ;
-    if (this.page_info.unique_key) {
-      this.isCreateSiglePage = true ;
-      this.share_single_link = this.getRootPath()+"#/p/"+this.page_info.unique_key ;
-    };
-    document.onkeydown=function(e){  //对整个页面文档监听 其键盘快捷键
-      var keyNum=window.event ? e.keyCode :e.which;  //获取被按下的键值 
-      if (keyNum == 69 && e.ctrlKey) {  //Ctrl +e 为编辑
-        that.edit_page();
-        e.preventDefault();
-      };
-
-      if (keyNum == 46 && e.ctrlKey) {  //Ctrl +del 为删除
-        that.delete_page();
-        e.preventDefault();
-      };
-
-    }
-  }
-};
-</script>

web_src/src/components/item/show/show_regular_item/Toc.vue

@@ -0,0 +1,176 @@
+
+<template>
+  <div> 
+
+  </div>
+</template>
+<script>
+export default {
+
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    var that = this ; 
+    //循环检测jq有没有加载成功
+    var check_jQuery_is_load = setInterval(function() {
+        try{
+            if ($ != undefined) {
+                clearInterval(check_jQuery_is_load);
+                that.toc_main_script();
+            }
+        } catch(e) {}
+    },200);
+
+  },
+  methods: {
+  toc_main_script() {
+
+        //监听点击事件并滑动到相应位置
+        $(document).on('click', '.markdown-toc-list a[href]', function(event) {
+            event.preventDefault();
+            var name = $(this).attr('href').substring(1);
+            var top_at_window = $('[name="'+name+'"]').offset().top;
+            $("html, body").animate({scrollTop: top_at_window}, 300)
+        });
+        //监听展开事件
+        $(document).on('click', '.markdown-toc', function(event) {
+            if (!$(event.target).is("a")) {
+                $('.markdown-toc').toggleClass('open-list');
+            }
+        });
+        //监听鼠标滚动事件给与颜色加亮
+        $(window).scroll(function(event) {
+            var activeName = "";
+            $('.markdown-toc-list a[href]').each(function(index, el) {
+                var name = $(el).attr('href').substring(1);
+                if ($('[name="'+name+'"]').offset().top - $(window).scrollTop() < 1) {
+                    activeName = name;
+                } else {
+                    return false;
+                }
+            });
+            $('.markdown-toc-list a').removeClass('current');
+            $('.markdown-toc-list a[href="#'+activeName+'"]').addClass('current');
+        });
+
+        //不是移动设备并且不是其他小屏设备，则自动展开目录
+        if( !this.isMobile() &&  window.screen.width > 1000){
+            this.$nextTick(() => {
+                setTimeout(function(){
+                    $(".markdown-toc").click();
+                },200);
+            });
+        }
+
+
+
+    },
+  },
+  destroyed () {
+    //把那些监听了的事件去掉
+    $(document).off('click', '.markdown-toc-list a[href]');
+    $(document).off('click', '.markdown-toc');
+    $(".markdown-toc").remove();
+
+  }
+}
+</script>
+<!-- 注意，这里是全局css -->
+<style >
+.page_content_main .markdown-toc {
+    position: fixed;
+    top: 220px;
+    margin-left: 800px;
+    min-width: 32px;
+    min-height: 32px;
+    cursor: pointer;
+    z-index: 1;
+}
+.page_content_main .markdown-toc:before {
+    display: none; /*先隐藏*/
+    content:"\e63f";
+    font-family: element-icons !important;
+    color: #909399;
+    position: absolute;
+    top: 0;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    background: #fafafa;
+    border: 1px solid #DCDFE6;
+    border-radius: 5px;
+    cursor: pointer;
+    box-shadow: 0 5px 5px #F2F6FC;
+    transition: .25s;
+}
+.page_content_main .markdown-toc.open-list:before {
+    border: 1px solid #DCDFE6;
+    color: #909399;
+    border-radius: 50%;
+}
+.page_content_main .markdown-toc > .markdown-toc-list {
+    position: relative;
+    z-index: 999;
+    margin: 0;
+    margin-top: 20px;
+    list-style: none;
+    min-width: 150px;
+    max-width: 200px;
+    padding: 5px 0;
+    background: #fafafa;
+    border: 1px solid #DCDFE6;
+    border-radius: 5px;
+    box-shadow: 0 5px 5px #F2F6FC;
+    max-height: 320px;
+    overflow-y: auto;
+    transform: scale(0);
+    margin-right: -230px;
+    margin-bottom: -270px;
+    opacity: 0;
+    visibility: hidden;
+    transform-origin: top left;
+    transition: .25s ease 0s, margin-right 0s ease .25s, margin-bottom 0s ease .25s;
+}
+.page_content_main .markdown-toc.open-list .markdown-toc-list {
+    margin-right: 0px;
+    margin-bottom: 0px;
+    transform: scale(1) translateY(-44px);
+    opacity: 1;
+    visibility: visible;
+    transition: .5s cubic-bezier(0.4,1.7,0.6,1), margin-right 0s, margin-bottom 0s;
+}
+.page_content_main .markdown-toc li {
+    list-style: none !important;
+}
+.page_content_main .markdown-toc li a {
+    display: block;
+    padding: 3px 15px;
+    font-size: 12px;
+    color: #606266;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow:hidden;
+    transition: .15s;
+}
+.page_content_main .markdown-toc li a.current {
+    background: #ecf5ff;
+    color: #40a9ff;
+    box-shadow: 2px 0px #40a9ff inset;
+}
+.page_content_main .markdown-toc li a:hover {
+    background: #d9ecff;
+    text-decoration: none;
+    color: #40a9ff;
+    transition: 0s;
+}
+.page_content_main .markdown-toc li ul {
+    padding: 0;
+}
+.page_content_main .markdown-toc li li a {
+    padding-left: 30px;
+}
+</style>