feat(#35): fixed toolbar

ly525
1 parent 27863bc3
Showing 3 changed files with 107 additions and 27 deletions
front-end/h5/package.json
front-end/h5/src/components/core/editor/index.js
front-end/h5/yarn.lock
@@ -11,7 +11,7 @@
     "deploy": "rm -rf dist && npm run build && ./deploy.sh"
   },
   "dependencies": {
-    "ant-design-vue": "^1.3.10",
+    "ant-design-vue": "^1.3.14",
     "core-js": "^2.6.5",
     "element-ui": "^2.9.1",
     "font-awesome": "4.7.0",
@@ -29,6 +29,53 @@ const sidebarMenus = [
     antIcon: 'appstore'
   }
 ]
+
+const fixedTools = [
+  {
+    'tooltip': '撤消', // TODO 支持快捷键
+    'text': '撤消',
+    'icon': 'mail-reply',
+    'action': () => undoRedoHistory.undo()
+  },
+  {
+    'tooltip': '恢复',
+    'text': '恢复',
+    'icon': 'mail-forward',
+    'action': () => undoRedoHistory.redo()
+  },
+  {
+    'tooltip': '刷新预览',
+    'text': '刷新预览',
+    'icon': 'eye',
+    'action': function () { this.previewVisible = true }
+  },
+  {
+    'tooltip': '复制当前页',
+    'text': '复制当前页',
+    'icon': 'copy',
+    'action': function () { this.pageManager({ type: 'copy' }) }
+  },
+  {
+    'tooltip': '导入PSD',
+    'text': 'Ps',
+    'icon': '',
+    'action': '',
+    'disabled': true
+  },
+  {
+    'tooltip': '放大画布',
+    'text': '放大画布',
+    'icon': 'plus',
+    'action': function () { this.scaleRate += 0.25 }
+  },
+  {
+    'tooltip': '缩小画布',
+    'text': '缩小画布',
+    'icon': 'minus',
+    'action': function () { this.scaleRate -= 0.25 }
+  }
+]
+
 export default {
   name: 'Editor',
   components: {},
@@ -36,7 +83,8 @@ export default {
     activeMenuKey: 'pluginList',
     isPreviewMode: false,
     activeTabKey: '属性',
-    previewVisible: false
+    previewVisible: false,
+    scaleRate: 1
   }),
   computed: {
     ...mapState('editor', {
@@ -145,16 +193,17 @@ export default {
             <a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}>
               <div style="text-align: center;">
                 <a-radio-group
+                  size="small"
                   value={this.isPreviewMode}
                   onInput={value => {
                     this.isPreviewMode = value
                   }}
                 >
-                  <a-radio-button label={false} value={false}>Edit</a-radio-button>
-                  <a-radio-button label={true} value={true}>Preview</a-radio-button>
+                  <a-radio-button label={false} value={false}>编辑模式</a-radio-button>
+                  <a-radio-button label={true} value={true}>预览模式</a-radio-button>
                 </a-radio-group>
               </div>
-              <div class='canvas-wrapper'>
+              <div class='canvas-wrapper' style={{ transform: `scale(${this.scaleRate})` }}>
                 {/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */}
                 { this.isPreviewMode
                   ? <RenderPreviewCanvas elements={this.elements}/>
@@ -165,6 +214,23 @@ export default {
               </div>
             </a-layout-content>
           </a-layout>
+          <a-layout-sider width="40" theme='light' style={{ background: '#fff', border: '1px solid #eee' }}>
+            {/* <div>
+              <a-button shape="circle" icon="search" type="link" />
+            </div> */}
+            <a-button-group style={{ display: 'flex', flexDirection: 'column' }}>
+              {
+                fixedTools.map(tool => (
+                  <a-tooltip effect="dark" placement="left" title={tool.tooltip}>
+                    <a-button block class="transparent-bg" type="link" size="small" style={{ height: '40px', color: '#000' }} onClick={() => tool.action && tool.action.call(this) } disabled={!!tool.disabled}>
+                      { tool.icon ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true'/> : tool.text }
+                    </a-button>
+                  </a-tooltip>
+                ))
+              }
+              <div style={{ fontSize: '12px', textAlign: 'center' }}>{this.scaleRate * 100}%</div>
+            </a-button-group>
+          </a-layout-sider>
           <a-layout-sider width="340" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
             <a-tabs
               style="height: 100%;"
@@ -190,6 +256,7 @@ export default {
               <a-tab-pane label="脚本" key='脚本' tab='脚本'><RenderScriptEditor/></a-tab-pane>
             </a-tabs>
           </a-layout-sider>
+
         </a-layout>
         {
           this.previewVisible && <PreviewDialog work={this.work} visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} />
@@ -2,18 +2,25 @@
 # yarn lockfile v1
  
  
-"@ant-design/icons-vue@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-1.0.1.tgz#343579219c04190831c9ca3826aec7361bb8b4d4"
-  integrity sha1-NDV5IZwEGQgxyco4Jq7HNhu4tNQ=
+"@ant-design/colors@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-3.1.0.tgz#b7e2cc61a4e86d3d109494034acfb1222dacaa3c"
+  integrity sha1-t+LMYaTobT0QlJQDSs+xIi2sqjw=
+  dependencies:
+    tinycolor2 "^1.4.1"
+
+"@ant-design/icons-vue@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-2.0.0.tgz#0357f5010a404e9f34a87a4b41b2a08df691dbce"
+  integrity sha1-A1f1AQpATp80qHpLQbKgjfaR284=
   dependencies:
-    ant-design-palettes "^1.1.3"
+    "@ant-design/colors" "^3.1.0"
     babel-runtime "^6.26.0"
  
-"@ant-design/icons@^1.1.15":
-  version "1.2.1"
-  resolved "https://registry.npm.taobao.org/@ant-design/icons/download/@ant-design/icons-1.2.1.tgz#8e19301b1433ec67d6bbd0e892782e2ade561ff9"
-  integrity sha1-jhkwGxQz7GfWu9DoknguKt5WH/k=
+"@ant-design/icons@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npm.taobao.org/@ant-design/icons/download/@ant-design/icons-2.1.1.tgz#7b9c08dffd4f5d41db667d9dbe5e0107d0bd9a4a"
+  integrity sha1-e5wI3/1PXUHbZn2dvl4BB9C9mko=
  
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35":
   version "7.0.0"
@@ -1404,20 +1411,13 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
  
-ant-design-palettes@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npm.taobao.org/ant-design-palettes/download/ant-design-palettes-1.1.3.tgz#84119b1a4d86363adc52a38d587e65336a0a27dd"
-  integrity sha1-hBGbGk2GNjrcUqONWH5lM2oKJ90=
-  dependencies:
-    tinycolor2 "^1.4.1"
-
-ant-design-vue@^1.3.10:
-  version "1.3.10"
-  resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.10.tgz#82813f90888f77dd0e56c8a71e14efa0f8d8e3da"
-  integrity sha1-goE/kIiPd90OVsinHhTvoPjY49o=
+ant-design-vue@^1.3.14:
+  version "1.3.14"
+  resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.14.tgz#4bef079ec7a74e79a20c5c4fab7b0ab7fb3568fc"
+  integrity sha1-S+8HnsenTnmiDFxPq3sKt/s1aPw=
   dependencies:
-    "@ant-design/icons" "^1.1.15"
-    "@ant-design/icons-vue" "^1.0.1"
+    "@ant-design/icons" "^2.1.1"
+    "@ant-design/icons-vue" "^2.0.0"
     add-dom-event-listener "^1.0.2"
     array-tree-filter "^2.1.0"
     async-validator "^1.8.2"
@@ -1436,6 +1436,7 @@ ant-design-vue@^1.3.10:
     lodash "^4.17.5"
     moment "^2.21.0"
     mutationobserver-shim "^0.3.2"
+    node-emoji "^1.10.0"
     omit.js "^1.0.0"
     raf "^3.4.0"
     resize-observer-polyfill "^1.5.1"
@@ -6804,6 +6805,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
  
+lodash.toarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/lodash.toarray/download/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
+  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
+
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -7321,6 +7327,13 @@ node-cache@^4.1.1:
     clone "2.x"
     lodash "4.x"
  
+node-emoji@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.npm.taobao.org/node-emoji/download/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
+  integrity sha1-iIar0l2ce7YYAqZYUj0fjSqJsto=
+  dependencies:
+    lodash.toarray "^4.4.0"
+
 node-eta@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npm.taobao.org/node-eta/download/node-eta-0.1.1.tgz#4066109b39371c761c72b7ebda9a9ea0a5de121f"