优化GloablHeader、新增表单模块、新增PageHeader、根据router自动生成breadcrumb功能

src/components/form/BasicForm.vue

@@ -0,0 +1,117 @@
+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-form>
+      <a-form-item
+        label="标题"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+      >
+        <a-input placeholder="给目标起个名字" />
+      </a-form-item>
+      <a-form-item
+        label="起止日期"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+      >
+        <a-range-picker style="width: 100%" />
+      </a-form-item>
+      <a-form-item
+        label="目标描述"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+      >
+        <a-textarea rows="4" placeholder="请输入你阶段性工作目标"/>
+      </a-form-item>
+      <a-form-item
+        label="衡量标准"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+      >
+        <a-textarea rows="4" placeholder="请输入衡量标准"/>
+      </a-form-item>
+      <a-form-item
+        label="客户"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        :required="false"
+      >
+        <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"/>
+      </a-form-item>
+      <a-form-item
+        label="邀评人"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        :required="false"
+      >
+        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人"/>
+      </a-form-item>
+      <a-form-item
+        label="权重"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        :required="false"
+      >
+        <a-input-number :min="0" :max="100"/>
+        <span>%</span>
+      </a-form-item>
+      <a-form-item
+        label="目标公开"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        :required="false"
+        help="客户、邀评人默认被分享"
+      >
+        <a-radio-group v-model="value">
+          <a-radio :value="1">公开</a-radio>
+          <a-radio :value="2">部分公开</a-radio>
+          <a-radio :value="3">不公开</a-radio>
+        </a-radio-group>
+        <a-form-item>
+          <a-select mode="multiple" v-if="value === 2">
+            <a-select-option value="4">同事一</a-select-option>
+            <a-select-option value="5">同事二</a-select-option>
+            <a-select-option value="6">同事三</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form-item>
+      <a-form-item :wrapperCol="{span: 10, offset: 7}">
+        <a-button type="primary">提交</a-button>
+        <a-button style="margin-left: 8px">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<script>
+import ACard from 'vue-antd-ui/es/card/Card'
+import AForm from 'vue-antd-ui/es/form/Form'
+import AFormItem from 'vue-antd-ui/es/form/FormItem'
+import AInput from 'vue-antd-ui/es/input/Input'
+import ADatePicker from 'vue-antd-ui/es/date-picker'
+import ATextarea from 'vue-antd-ui/es/input/TextArea'
+import AInputNumber from 'vue-antd-ui/es/input-number/index'
+import ARadioGroup from 'vue-antd-ui/es/radio/Group'
+import ARadio from 'vue-antd-ui/es/radio/Radio'
+import ASelect from 'vue-antd-ui/es/select/index'
+import AButton from "vue-antd-ui/es/button/button";
+
+const ARangePicker = ADatePicker.RangePicker
+const ASelectOption = ASelect.Option
+export default {
+  name: 'BasicForm',
+  components: {
+    AButton,
+    ASelectOption, ASelect, ARadio, ARadioGroup, AInputNumber, ATextarea, ARangePicker, AInput, AFormItem, AForm, ACard},
+  data () {
+    return {
+      title: '基础表单',
+      desc: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+      value: 1
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/form/Form.vue

@@ -0,0 +1,42 @@
+<template>
+  <div style="margin: -24px -24px 0px">
+    <page-header :breadcrumb="breadcrumb" :title="title">
+      <div slot="content">{{desc}}</div>
+    </page-header>
+    <div style="margin: 24px 24px 0px">
+      <router-view  ref="page"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageHeader from '../page/PageHeader'
+export default {
+  name: 'Form',
+  components: {PageHeader},
+  data () {
+    return {
+      title: '',
+      breadcrumb: [],
+      desc: ''
+    }
+  },
+  mounted () {
+    this.getPageHeaderInfo()
+  },
+  beforeUpdate () {
+    this.getPageHeaderInfo()
+  },
+  methods: {
+    getPageHeaderInfo () {
+      this.title = this.$route.name
+      this.breadcrumb = this.$route.matched
+      this.desc = this.$refs.page.desc
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>