feat: add FooterToolBar

src/components/FooterToolbar/FooterToolBar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div :class="prefixCls">
+    <div style="float: left">
+      <slot name="extra">{{ extra }}</slot>
+    </div>
+    <div style="float: right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'FooterToolBar',
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-footer-toolbar'
+      },
+      extra: {
+        type: [String, Object],
+        default: ''
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/FooterToolbar/index.js

@@ -0,0 +1,4 @@
+import FooterToolBar from './FooterToolBar'
+import './index.less'
+
+export default FooterToolBar

src/components/FooterToolbar/index.less

@@ -0,0 +1,23 @@
+@import "../index";
+
+@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";
+
+.@{footer-toolbar-prefix-cls} {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  height: 56px;
+  line-height: 56px;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+  background: #fff;
+  border-top: 1px solid #e8e8e8;
+  padding: 0 24px;
+  z-index: 9;
+
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}

src/components/FooterToolbar/index.md

@@ -0,0 +1,48 @@
+# FooterToolbar底部工具栏
+
+固定在底部的工具栏。
+
+
+
+## 何时使用
+
+固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。
+
+
+
+引用方式：
+
+```javascript
+import FooterToolBar from '@/components/FooterToolbar'
+
+export default {
+    components: {
+        FooterToolBar
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<footer-tool-bar>
+    <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+</footer-tool-bar>
+```
+或
+```html
+<footer-tool-bar extra="扩展信息提示">
+    <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+</footer-tool-bar>
+```
+
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+children (slot) | 工具栏内容，向右对齐 | - | -
+extra | 额外信息，向左对齐 | String, Object | -
+

src/components/tools/FooterToolBar.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="toolbar">
-    <div style="float: left">
-      <slot name="extra"></slot>
-    </div>
-    <div style="float: right">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'FooterToolBar'
-  }
-</script>
-
-<style lang="scss" scoped>
-  .toolbar {
-    position: fixed;
-    width: 100%;
-    bottom: 0;
-    right: 0;
-    height: 56px;
-    line-height: 56px;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
-    background: #fff;
-    border-top: 1px solid #e8e8e8;
-    padding: 0 24px;
-    z-index: 9;
-  }
-</style>

src/utils/mixin.js

@@ -17,6 +17,14 @@ const mixin = {
       autoHideHeader: state => state.app.autoHideHeader,
       sidebarOpened: state => state.app.sidebar.opened
     })
+  },
+  methods: {
+    isTopmenu () {
+      return this.layoutMode === 'topmenu'
+    },
+    isSideMenu () {
+      return !this.isTopmenu()
+    }
   }
 }
 

src/views/form/advancedForm/AdvancedForm.vue

@@ -55,7 +55,7 @@
     </a-card>
 
     <!-- fixed footer toolbar -->
-    <footer-tool-bar>
+    <footer-tool-bar :style="{ width: isSideMenu()  && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
       <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
     </footer-tool-bar>
   </div>
@@ -64,10 +64,12 @@
 <script>
   import RepositoryForm from './RepositoryForm'
   import TaskForm from './TaskForm'
-  import FooterToolBar from '@/components/tools/FooterToolBar'
+  import FooterToolBar from '@/components/FooterToolbar'
+  import { mixin, mixinDevice } from '@/utils/mixin'
 
   export default {
     name: 'AdvancedForm',
+    mixins: [mixin, mixinDevice],
     components: {
       FooterToolBar,
       RepositoryForm,

vue.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const webpack = require('webpack')
 
 function resolve (dir) {
   return path.join(__dirname, dir)
@@ -21,7 +22,10 @@ module.exports = {
   },
   */
   configureWebpack: {
-
+    plugins: [
+      // Ignore all locale files of moment.js
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    ]
   },
 
   chainWebpack: (config) => {

yarn.lock

@@ -1695,6 +1695,14 @@ babel-plugin-dynamic-import-node@^2.2.0:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-import@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz#78ac908e6b225206babb734e19eae5f78d6d1035"
+  integrity sha512-de9dWdU1YjmWRPYurlHRKD2hTd24z0bIQ0/JgyXqLMXML+TsvEkVhtqzOsNtu9MmCuvwBiTTTjZBbZXA1Xu7TQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+
 babel-plugin-transform-runtime@^6.23.0:
   version "6.23.0"
   resolved "http://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"