update header: add document link

ly525
1 parent 67d57f79
Showing 4 changed files with 55 additions and 9 deletions
front-end/h5/src/components/common/header/links.js
front-end/h5/src/components/common/header/logo.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/views/work-manager/index.vue
+/**
+ * #!zh: 导航条上的通用外链：文档、交流群、GitHub
+ * #!en: common external links on headers: Document、Discussion、GitHub
+ */
+
+export default {
+  render () {
+    return (
+      <a-menu
+        theme="dark"
+        mode="horizontal"
+        defaultSelectedKeys={['2']}
+        style={{ lineHeight: '64px', display: 'inline-block', float: 'right' }}
+      >
+        <a-menu-item key="document">
+          <a href="http://docs.luban-h5.surge.sh/" target="_blank" rel="noopener" style={{ color: 'white' }}><a-icon type="read" />文档</a>
+        </a-menu-item>
+        <a-menu-item key="dingtalk" >
+          <a-popover title="👨🏻‍💻👩🏻‍💻欢迎加入鲁班-H5交流群">
+            <template slot="content">
+              <p>For users in other languages, <br />please keep using Github issue tracker. 🤟 </p>
+              <p>扫描二维码加入 钉钉 讨论组</p>
+              <img src="https://user-images.githubusercontent.com/12668546/61447488-a379f700-a983-11e9-9956-139352a2585d.png" width="200" />
+              <p>因为微信群二维码会过期，<br />请前往<a href="https://github.com/ly525/luban-h5/issues/57" target="_blank" rel="noopener">微信群和QQ群</a> 查看</p>
+            </template>
+            <span style={{ color: 'white', lineHeight: '64px', height: '64px', display: 'inline-block' }}><a-icon type="qrcode" />交流群</span>
+          </a-popover>
+        </a-menu-item>
+        <a-menu-item key="github">
+          <a href="https://github.com/ly525/luban-h5" target="_blank" rel="noopener" style={{ color: 'white' }}><a-icon type="github" />Github</a>
+        </a-menu-item>
+      </a-menu>
+    )
+  }
+}
+export default {
+  render () {
+    return <div class="logo"><router-link to={{ path: '/' }}>鲁班 H5</router-link></div>
+  }
+}
@@ -12,6 +12,9 @@ import RenderActoionEditor from &#39;./edit-panel/action&#39;
 import RenderShortcutsPanel from './shortcuts-panel/index'
 import PreviewDialog from './modals/preview.vue'
+import LogoOfHeader from '@/components/common/header/logo.js'
+import ExternalLinksOfHeader from '@/components/common/header/links.js'
+
 const sidebarMenus = [
   {
     label: '组件列表',
@@ -78,7 +81,10 @@ const fixedTools = [
 export default {
   name: 'Editor',
-  components: {},
+  components: {
+    LogoOfHeader,
+    ExternalLinksOfHeader
+  },
   data: () => ({
     activeMenuKey: 'pluginList',
     isPreviewMode: false,
@@ -149,7 +155,7 @@ export default {
     return (
       <a-layout id="luban-editor-layout" style={{ height: '100vh' }}>
         <a-layout-header class="header">
-          <div class="logo">鲁班 H5</div>
+          <LogoOfHeader />
           {/* TODO we can show the plugins shortcuts here */}
           <a-menu
             theme="dark"
@@ -157,16 +163,11 @@ export default {
             defaultSelectedKeys={['2']}
             style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
           >
-            <a-menu-item key="4" class="transparent-bg">
-              <a-button-group>
-                <a-button class="transparent-bg" style={{ color: 'white' }} type="dashed" size="small" onClick={() => undoRedoHistory.undo()}><i class={['shortcut-icon', 'fa', `fa-mail-reply`]} aria-hidden='true'/> 撤销</a-button>
-                <a-button class="transparent-bg" style={{ color: 'white' }} type="dashed" size="small" onClick={() => undoRedoHistory.redo()}><i class={['shortcut-icon', 'fa', `fa-mail-forward`]} aria-hidden='true'/> 重做</a-button>
-              </a-button-group>
-            </a-menu-item>
             <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.previewVisible = true }}>预览</a-button></a-menu-item>
             <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork()} loading={this.saveWork_loading}>保存</a-button></a-menu-item>
             <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item>
           </a-menu>
+          <ExternalLinksOfHeader />
         </a-layout-header>
         <a-layout>
           <a-layout-sider width="160" style="background: #fff" collapsed>
@@ -2,6 +2,8 @@
 // import PreView from '@/pages/preview';
 // import Sidebar from './components/sidebar.vue'
 import '@/components/core/styles/index.scss'
+import LogoOfHeader from '@/components/common/header/logo.js'
+import ExternalLinksOfHeader from '@/components/common/header/links.js'
 const sidebarMenus = [
   {
@@ -52,6 +54,8 @@ export default {
   components: {
     // PreView,
     // Sidebar
+    LogoOfHeader,
+    ExternalLinksOfHeader
   },
   methods: {
     renderSidebar (menus) {
@@ -83,7 +87,7 @@ export default {
     return (
       <a-layout id="luban-work-manager-layout" style={{ height: '100vh' }}>
         <a-layout-header class="header">
-          <div class="logo">鲁班 H5</div>
+          <LogoOfHeader />
           {/* TODO we can show the plugins shortcuts here */}
           <a-dropdown style={{ float: 'right', background: 'transparent', margin: '16px 28px 16px 0' }}>
             <a-menu slot="overlay" onClick={() => {}}>
@@ -96,6 +100,7 @@ export default {
             </a-menu>
             <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
           </a-dropdown>
+          <ExternalLinksOfHeader />
         </a-layout-header>
         <a-layout>
           <a-layout-sider width="160" style="background: #fff">