reactor: v2

src/components/chart/ChartCard.vue → src/components/Charts/ChartCard.vue

@@ -1,120 +1,120 @@
-<template>
-  <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
-    <div class="chart-card-header">
-      <div class="meta">
-        <span class="chart-card-title">
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </span>
-        <span class="chart-card-action">
-          <slot name="action"></slot>
-        </span>
-      </div>
-      <div class="total">
-        <slot name="total">
-          <span>{{ typeof total === 'function' && total() || total }}</span>
-        </slot>
-      </div>
-    </div>
-    <div class="chart-card-content">
-      <div class="content-fix">
-        <slot></slot>
-      </div>
-    </div>
-    <div class="chart-card-footer">
-      <div class="field">
-        <slot name="footer"></slot>
-      </div>
-    </div>
-  </a-card>
-</template>
-
-<script>
-export default {
-  name: 'ChartCard',
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    total: {
-      type: [Function, Number, String],
-      required: false,
-      default: null
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .chart-card-header {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-
-    .meta {
-      position: relative;
-      overflow: hidden;
-      width: 100%;
-      color: rgba(0, 0, 0, .45);
-      font-size: 14px;
-      line-height: 22px;
-    }
-  }
-
-  .chart-card-action {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
-  .chart-card-footer {
-    border-top: 1px solid #e8e8e8;
-    padding-top: 9px;
-    margin-top: 8px;
-
-    > * {
-      position: relative;
-    }
-
-    .field {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin: 0;
-    }
-  }
-
-  .chart-card-content {
-    margin-bottom: 12px;
-    position: relative;
-    height: 46px;
-    width: 100%;
-
-    .content-fix {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-    }
-  }
-
-  .total {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-    color: #000;
-    margin-top: 4px;
-    margin-bottom: 0;
-    font-size: 30px;
-    line-height: 38px;
-    height: 38px;
-  }
-</style>
+<template>
+  <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
+    <div class="chart-card-header">
+      <div class="meta">
+        <span class="chart-card-title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </span>
+        <span class="chart-card-action">
+          <slot name="action"></slot>
+        </span>
+      </div>
+      <div class="total">
+        <slot name="total">
+          <span>{{ typeof total === 'function' && total() || total }}</span>
+        </slot>
+      </div>
+    </div>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="chart-card-footer">
+      <div class="field">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'ChartCard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    total: {
+      type: [Function, Number, String],
+      required: false,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-card-header {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    .meta {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      color: rgba(0, 0, 0, .45);
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+
+  .chart-card-action {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .chart-card-footer {
+    border-top: 1px solid #e8e8e8;
+    padding-top: 9px;
+    margin-top: 8px;
+
+    > * {
+      position: relative;
+    }
+
+    .field {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+  }
+
+  .chart-card-content {
+    margin-bottom: 12px;
+    position: relative;
+    height: 46px;
+    width: 100%;
+
+    .content-fix {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  }
+
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    color: #000;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 38px;
+  }
+</style>

src/components/chart/MiniArea.vue → src/components/Charts/MiniArea.vue

@@ -1,56 +1,56 @@
-<template>
-  <div class="antv-chart-mini">
-    <div class="chart-wrapper" :style="{ height: 46 }">
-      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
-        <v-tooltip />
-        <v-smooth-area position="x*y" />
-      </v-chart>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-const data = []
-const beginDay = new Date().getTime()
-
-for (let i = 0; i < 10; i++) {
-  data.push({
-    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
-    y: Math.round(Math.random() * 10)
-  })
-}
-
-const tooltip = [
-  'x*y',
-  (x, y) => ({
-    name: x,
-    value: y
-  })
-]
-const scale = [{
-  dataKey: 'x',
-  min: 2
-}, {
-  dataKey: 'y',
-  title: '时间',
-  min: 1,
-  max: 22
-}]
-
-export default {
-  name: 'MiniArea',
-  data () {
-    return {
-      data,
-      tooltip,
-      scale,
-      height: 100
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  @import "chart";
+<template>
+  <div class="antv-chart-mini">
+    <div class="chart-wrapper" :style="{ height: 46 }">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
+        <v-tooltip />
+        <v-smooth-area position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+const data = []
+const beginDay = new Date().getTime()
+
+for (let i = 0; i < 10; i++) {
+  data.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: Math.round(Math.random() * 10)
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniArea',
+  data () {
+    return {
+      data,
+      tooltip,
+      scale,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "chart";
 </style>

src/components/chart/MiniBar.vue → src/components/Charts/MiniBar.vue

@@ -1,57 +1,57 @@
-<template>
-  <div class="antv-chart-mini">
-    <div class="chart-wrapper" :style="{ height: 46 }">
-      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
-        <v-tooltip />
-        <v-bar position="x*y" />
-      </v-chart>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-const data = []
-const beginDay = new Date().getTime()
-
-for (let i = 0; i < 10; i++) {
-  data.push({
-    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
-    y: Math.round(Math.random() * 10)
-  })
-}
-
-const tooltip = [
-  'x*y',
-  (x, y) => ({
-    name: x,
-    value: y
-  })
-]
-
-const scale = [{
-  dataKey: 'x',
-  min: 2
-}, {
-  dataKey: 'y',
-  title: '时间',
-  min: 1,
-  max: 30
-}]
-
-export default {
-  name: 'MiniBar',
-  data () {
-    return {
-      data,
-      tooltip,
-      scale,
-      height: 100
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  @import "chart";
+<template>
+  <div class="antv-chart-mini">
+    <div class="chart-wrapper" :style="{ height: 46 }">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-bar position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+const data = []
+const beginDay = new Date().getTime()
+
+for (let i = 0; i < 10; i++) {
+  data.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: Math.round(Math.random() * 10)
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 30
+}]
+
+export default {
+  name: 'MiniBar',
+  data () {
+    return {
+      data,
+      tooltip,
+      scale,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "chart";
 </style>

src/components/chart/MiniProgress.vue → src/components/Charts/MiniProgress.vue

@@ -1,75 +1,75 @@
-<template>
-  <div class="chart-mini-progress">
-    <div class="target" :style="{ left: target + '%'}">
-      <span :style="{ backgroundColor: color }" />
-      <span :style="{ backgroundColor: color }"/>
-    </div>
-    <div class="progress-wrapper">
-      <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MiniProgress',
-  props: {
-    target: {
-      type: Number,
-      default: 0
-    },
-    height: {
-      type: String,
-      default: '10px'
-    },
-    color: {
-      type: String,
-      default: '#13C2C2'
-    },
-    percentage: {
-      type: Number,
-      default: 0
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .chart-mini-progress {
-    padding: 5px 0;
-    position: relative;
-    width: 100%;
-
-    .target {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-
-      span {
-        border-radius: 100px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 4px;
-        width: 2px;
-
-        &:last-child {
-          top: auto;
-          bottom: 0;
-        }
-      }
-    }
-    .progress-wrapper {
-      background-color: #f5f5f5;
-      position: relative;
-
-      .progress {
-        transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
-        border-radius: 1px 0 0 1px;
-        background-color: #1890ff;
-        width: 0;
-        height: 100%;
-      }
-    }
-  }
+<template>
+  <div class="chart-mini-progress">
+    <div class="target" :style="{ left: target + '%'}">
+      <span :style="{ backgroundColor: color }" />
+      <span :style="{ backgroundColor: color }"/>
+    </div>
+    <div class="progress-wrapper">
+      <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniProgress',
+  props: {
+    target: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: String,
+      default: '10px'
+    },
+    color: {
+      type: String,
+      default: '#13C2C2'
+    },
+    percentage: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-mini-progress {
+    padding: 5px 0;
+    position: relative;
+    width: 100%;
+
+    .target {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+
+      span {
+        border-radius: 100px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 4px;
+        width: 2px;
+
+        &:last-child {
+          top: auto;
+          bottom: 0;
+        }
+      }
+    }
+    .progress-wrapper {
+      background-color: #f5f5f5;
+      position: relative;
+
+      .progress {
+        transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
+        border-radius: 1px 0 0 1px;
+        background-color: #1890ff;
+        width: 0;
+        height: 100%;
+      }
+    }
+  }
 </style>

src/components/chart/RankList.vue → src/components/Charts/RankList.vue

@@ -1,77 +1,77 @@
-<template>
-  <div class="rank">
-    <h4 class="title">{{ title }}</h4>
-    <ul class="list">
-      <li :key="index" v-for="(item, index) in list">
-        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
-        <span>{{ item.name }}</span>
-        <span>{{ item.total }}</span>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RankList',
-  // ['title', 'list']
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    list: {
-      type: Array,
-      default: null
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-  .rank {
-    padding: 0 32px 32px 72px;
-
-    .list {
-      margin: 25px 0 0;
-      padding: 0;
-      list-style: none;
-
-      li {
-        margin-top: 16px;
-
-        span {
-          color: rgba(0, 0, 0, .65);
-          font-size: 14px;
-          line-height: 22px;
-
-          &:first-child {
-            background-color: #f5f5f5;
-            border-radius: 20px;
-            display: inline-block;
-            font-size: 12px;
-            font-weight: 600;
-            margin-right: 24px;
-            height: 20px;
-            line-height: 20px;
-            width: 20px;
-            text-align: center;
-          }
-          &.active {
-            background-color: #314659;
-            color: #fff;
-          }
-          &:last-child {
-            float: right;
-          }
-        }
-      }
-    }
-  }
-
-  .mobile .rank {
-    padding: 0 32px 32px 32px;
-  }
-
+<template>
+  <div class="rank">
+    <h4 class="title">{{ title }}</h4>
+    <ul class="list">
+      <li :key="index" v-for="(item, index) in list">
+        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
+        <span>{{ item.name }}</span>
+        <span>{{ item.total }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankList',
+  // ['title', 'list']
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    list: {
+      type: Array,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .rank {
+    padding: 0 32px 32px 72px;
+
+    .list {
+      margin: 25px 0 0;
+      padding: 0;
+      list-style: none;
+
+      li {
+        margin-top: 16px;
+
+        span {
+          color: rgba(0, 0, 0, .65);
+          font-size: 14px;
+          line-height: 22px;
+
+          &:first-child {
+            background-color: #f5f5f5;
+            border-radius: 20px;
+            display: inline-block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-right: 24px;
+            height: 20px;
+            line-height: 20px;
+            width: 20px;
+            text-align: center;
+          }
+          &.active {
+            background-color: #314659;
+            color: #fff;
+          }
+          &:last-child {
+            float: right;
+          }
+        }
+      }
+    }
+  }
+
+  .mobile .rank {
+    padding: 0 32px 32px 32px;
+  }
+
 </style>

src/components/chart/TransferBar.vue → src/components/Charts/TransferBar.vue

@@ -1,64 +1,64 @@
-<template>
-  <div :style="{ padding: '0 0 32px 32px' }">
-    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
-    <v-chart
-      height="254"
-      :data="data"
-      :scale="scale"
-      :forceFit="true"
-      :padding="['auto', 'auto', '40', '50']">
-      <v-tooltip />
-      <v-axis />
-      <v-bar position="x*y"/>
-    </v-chart>
-  </div>
-</template>
-
-<script>
-const tooltip = [
-  'x*y',
-  (x, y) => ({
-    name: x,
-    value: y
-  })
-]
-const scale = [{
-  dataKey: 'x',
-  title: '日期(天)',
-  alias: '日期(天)',
-  min: 2
-}, {
-  dataKey: 'y',
-  title: '流量(Gb)',
-  alias: '流量(Gb)',
-  min: 1
-}]
-
-export default {
-  name: 'Bar',
-  props: {
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      data: [],
-      scale,
-      tooltip
-    }
-  },
-  created () {
-    this.getMonthBar()
-  },
-  methods: {
-    getMonthBar () {
-      this.$http.get('/analysis/month-bar')
-        .then(res => {
-          this.data = res.result
-        })
-    }
-  }
-}
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart
+      height="254"
+      :data="data"
+      :scale="scale"
+      :forceFit="true"
+      :padding="['auto', 'auto', '40', '50']">
+      <v-tooltip />
+      <v-axis />
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+const scale = [{
+  dataKey: 'x',
+  title: '日期(天)',
+  alias: '日期(天)',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '流量(Gb)',
+  alias: '流量(Gb)',
+  min: 1
+}]
+
+export default {
+  name: 'Bar',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      data: [],
+      scale,
+      tooltip
+    }
+  },
+  created () {
+    this.getMonthBar()
+  },
+  methods: {
+    getMonthBar () {
+      this.$http.get('/analysis/month-bar')
+        .then(res => {
+          this.data = res.result
+        })
+    }
+  }
+}
 </script>

src/components/chart/Trend.vue → src/components/Charts/Trend.vue

@@ -1,82 +1,82 @@
-<template>
-  <div class="chart-trend">
-    {{ term }}
-    <span>{{ rate }}%</span>
-    <span :class="['trend-icon', trend]"><a-icon :type="'caret-' + trend"/></span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Trend',
-  props: {
-    term: {
-      type: String,
-      default: '',
-      required: true
-    },
-    percentage: {
-      type: Number,
-      default: null
-    },
-    type: {
-      type: Boolean,
-      default: null
-    },
-    target: {
-      type: Number,
-      default: 0
-    },
-    value: {
-      type: Number,
-      default: 0
-    },
-    fixed: {
-      type: Number,
-      default: 2
-    }
-  },
-  data () {
-    return {
-      trend: this.type && 'up' || 'down',
-      rate: this.percentage
-    }
-  },
-  created () {
-    const type = this.type === null ? this.value >= this.target : this.type
-    this.trend = type ? 'up' : 'down'
-    this.rate = (this.percentage === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percentage).toFixed(this.fixed)
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .chart-trend {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 22px;
-
-    .trend-icon {
-      font-size: 12px;
-
-      &.up, &.down {
-        margin-left: 4px;
-        position: relative;
-        top: 1px;
-
-        i {
-          font-size: 12px;
-          transform: scale(.83);
-        }
-      }
-
-      &.up {
-        color: #f5222d;
-      }
-      &.down {
-        color: #52c41a;
-        top: -1px;
-      }
-    }
-  }
+<template>
+  <div class="chart-trend">
+    {{ term }}
+    <span>{{ rate }}%</span>
+    <span :class="['trend-icon', trend]"><a-icon :type="'caret-' + trend"/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Trend',
+  props: {
+    term: {
+      type: String,
+      default: '',
+      required: true
+    },
+    percentage: {
+      type: Number,
+      default: null
+    },
+    type: {
+      type: Boolean,
+      default: null
+    },
+    target: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    fixed: {
+      type: Number,
+      default: 2
+    }
+  },
+  data () {
+    return {
+      trend: this.type && 'up' || 'down',
+      rate: this.percentage
+    }
+  },
+  created () {
+    const type = this.type === null ? this.value >= this.target : this.type
+    this.trend = type ? 'up' : 'down'
+    this.rate = (this.percentage === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percentage).toFixed(this.fixed)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-trend {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 22px;
+
+    .trend-icon {
+      font-size: 12px;
+
+      &.up, &.down {
+        margin-left: 4px;
+        position: relative;
+        top: 1px;
+
+        i {
+          font-size: 12px;
+          transform: scale(.83);
+        }
+      }
+
+      &.up {
+        color: #f5222d;
+      }
+      &.down {
+        color: #52c41a;
+        top: -1px;
+      }
+    }
+  }
 </style>

src/components/DescriptionList/DescriptionList.vue

@@ -0,0 +1,153 @@
+<template>
+  <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
+    <div v-if="title" class="title">{{ title }}</div>
+    <a-row>
+      <slot></slot>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import { Col } from 'ant-design-vue/es/grid/'
+
+const Item = {
+  name: 'DetailListItem',
+  props: {
+    term: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  inject: {
+    col: {
+      type: Number
+    }
+  },
+  render () {
+    return (
+      <Col {...{ props: responsive[this.col] }}>
+        <div class="term">{this.$props.term}</div>
+        <div class="content">{this.$slots.default}</div>
+      </Col>
+    )
+  }
+}
+
+const responsive = {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 }
+}
+
+export default {
+  name: 'DetailList',
+  Item: Item,
+  components: {
+    Col
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: false
+    },
+    col: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'large'
+    },
+    layout: {
+      type: String,
+      required: false,
+      default: 'horizontal'
+    }
+  },
+  provide () {
+    return {
+      col: this.col > 4 ? 4 : this.col
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .description-list {
+
+    .title {
+      color: rgba(0,0,0,.85);
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+
+    /deep/ .term {
+      color: rgba(0,0,0,.85);
+      display: table-cell;
+      line-height: 20px;
+      margin-right: 8px;
+      padding-bottom: 16px;
+      white-space: nowrap;
+
+      &:not(:empty):after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -.5px;
+      }
+    }
+
+    /deep/ .content {
+      color: rgba(0,0,0,.65);
+      display: table-cell;
+      min-height: 22px;
+      line-height: 22px;
+      padding-bottom: 16px;
+      width: 100%;
+      &:empty {
+        content: ' ';
+        height: 38px;
+        padding-bottom: 16px;
+      }
+    }
+
+    &.small {
+
+      .title {
+        font-size: 14px;
+        color: rgba(0, 0, 0, .65);
+        font-weight: normal;
+        margin-bottom: 12px;
+      }
+      /deep/ .term, .content {
+        padding-bottom: 8px;
+      }
+    }
+
+    &.large {
+      /deep/ .term, .content {
+        padding-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+      }
+    }
+
+    &.vertical {
+      .term {
+        padding-bottom: 8px;
+      }
+      /deep/ .term, .content {
+        display: block;
+      }
+    }
+  }
+</style>

src/components/DescriptionList/index.js

@@ -0,0 +1,2 @@
+import DescriptionList from './DescriptionList'
+export default DescriptionList

src/components/GlobalFooter/GlobalFooter.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="footer">
+    <div class="links">
+      <a
+        href="https://pro.ant.design/"
+        target="_blank"
+      >Pro 首页</a>
+      <a
+        href="https://github.com/sendya/ant-design-pro-vue"
+        target="_blank"
+      >
+        <a-icon type="github" />
+      </a>
+      <a href="https://ant.design/">Ant Design</a>
+      <a href="https://vue.ant.design/">Vue Antd</a>
+    </div>
+    <div class="copyright">
+      Copyright
+      <a-icon type="copyright" /> 2018 <span>白鹭学园技术组出品</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GlobalFooter',
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.footer {
+  padding: 0 16px;
+  margin: 48px 0 24px;
+  text-align: center;
+
+  .links {
+    margin-bottom: 8px;
+
+    a {
+      color: rgba(0, 0, 0, 0.45);
+
+      &:hover {
+        color: rgba(0, 0, 0, 0.65);
+      }
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
+    }
+  }
+  .copyright {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 14px;
+  }
+}
+</style>

src/components/GlobalFooter/index.js

@@ -0,0 +1,2 @@
+import GlobalFooter from './GlobalFooter'
+export default GlobalFooter

src/components/page/GlobalHeader.vue → src/components/GlobalHeader/GlobalHeader.vue

@@ -1,128 +1,96 @@
-<template>
-  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
-  <a-layout-header
-    v-if="!headerBarFixed"
-    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
-    :style="{ padding: '0' }"
-  >
-    <div
-      v-if="mode === 'sidemenu'"
-      class="header"
-    >
-      <a-icon
-        v-if="device==='mobile'"
-        class="trigger"
-        :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-        @click="toggle"
-      ></a-icon>
-      <a-icon
-        v-else
-        class="trigger"
-        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
-        @click="toggle"
-      />
-
-      <user-menu></user-menu>
-    </div>
-    <div
-      v-else
-      :class="['top-nav-header-index', theme]"
-    >
-      <div class="header-index-wide">
-        <div class="header-index-left">
-          <logo
-            class="top-nav-header"
-            :show-title="device !== 'mobile'"
-          />
-          <s-menu
-            v-if="device !== 'mobile'"
-            mode="horizontal"
-            :menu="menus"
-            :theme="theme"
-          ></s-menu>
-          <a-icon
-            v-else
-            class="trigger"
-            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-            @click="toggle"
-          ></a-icon>
-        </div>
-        <user-menu class="header-index-right"></user-menu>
-      </div>
-    </div>
-
-  </a-layout-header>
-</template>
-
-<script>
-import UserMenu from '../tools/UserMenu'
-import SMenu from '../menu/'
-import Logo from '../tools/Logo'
-
-import { mixin } from '@/utils/mixin'
-import { handleScrollHeader } from '@/utils/util'
-
-export default {
-  name: 'GlobalHeader',
-  components: {
-    UserMenu,
-    SMenu,
-    Logo
-  },
-  mixins: [mixin],
-  props: {
-    mode: {
-      type: String,
-      // sidemenu, topmenu
-      default: 'sidemenu'
-    },
-    menus: {
-      type: Array,
-      required: true
-    },
-    theme: {
-      type: String,
-      required: false,
-      default: 'dark'
-    },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    device: {
-      type: String,
-      required: false,
-      default: 'desktop'
-    }
-  },
-  data () {
-    return {
-      headerBarFixed: false
-    }
-  },
-  mounted () {
-    const _this = this
-    handleScrollHeader(direction => {
-      _this.handleScroll(direction)
-    })
-  },
-  methods: {
-    handleScroll (direction) {
-      if (this.autoHideHeader) {
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-        if (direction === 'up') {
-          this.headerBarFixed = false
-        } else {
-          scrollTop > 100 && (this.headerBarFixed = true)
-        }
-      } else {
-        this.headerBarFixed = false
-      }
-    },
-    toggle () {
-      this.$emit('toggle')
-    }
-  }
-}
-</script>
+<template>
+  <a-layout-header
+    v-if="!headerBarFixed"
+    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
+    :style="{ padding: '0' }"
+  >
+    <div v-if="mode === 'sidemenu'" class="header">
+      <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
+      <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
+      <user-menu></user-menu>
+    </div>
+    <div v-else :class="['top-nav-header-index', theme]">
+      <div class="header-index-wide">
+        <div class="header-index-left">
+          <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
+          <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
+          <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
+        </div>
+        <user-menu class="header-index-right"></user-menu>
+      </div>
+    </div>
+  </a-layout-header>
+</template>
+
+<script>
+import UserMenu from '../tools/UserMenu'
+import SMenu from '../Menu/'
+import Logo from '../tools/Logo'
+
+import { mixin } from '@/utils/mixin'
+import { handleScrollHeader } from '@/utils/util'
+
+export default {
+  name: 'GlobalHeader',
+  components: {
+    UserMenu,
+    SMenu,
+    Logo
+  },
+  mixins: [mixin],
+  props: {
+    mode: {
+      type: String,
+      // sidemenu, topmenu
+      default: 'sidemenu'
+    },
+    menus: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    device: {
+      type: String,
+      required: false,
+      default: 'desktop'
+    }
+  },
+  data () {
+    return {
+      headerBarFixed: false
+    }
+  },
+  mounted () {
+    const _this = this
+    handleScrollHeader(direction => {
+      _this.handleScroll(direction)
+    })
+  },
+  methods: {
+    handleScroll (direction) {
+      if (this.autoHideHeader) {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+        if (direction === 'up') {
+          this.headerBarFixed = false
+        } else {
+          scrollTop > 100 && (this.headerBarFixed = true)
+        }
+      } else {
+        this.headerBarFixed = false
+      }
+    },
+    toggle () {
+      this.$emit('toggle')
+    }
+  }
+}
+</script>

src/components/GlobalHeader/index.js

@@ -0,0 +1,2 @@
+import GlobalHeader from './GlobalHeader'
+export default GlobalHeader

src/components/menu/SideMenu.vue → src/components/Menu/SideMenu.vue

@@ -18,14 +18,13 @@
 </template>
 
 <script>
-import ALayoutSider from 'ant-design-vue/es/layout/Sider'
-import Logo from '../tools/Logo'
+import Logo from '@/components/tools/Logo'
 import SMenu from './index'
-import { mixin, mixinDevice } from '@/utils/mixin.js'
+import { mixin, mixinDevice } from '@/utils/mixin'
 
 export default {
   name: 'SideMenu',
-  components: { ALayoutSider, Logo, SMenu },
+  components: { Logo, SMenu },
   mixins: [mixin, mixinDevice],
   props: {
     mode: {

src/components/tools/HeaderNotice.vue → src/components/NoticeIcon/NoticeIcon.vue

@@ -1,88 +1,89 @@
-<template>
-  <a-popover
-    v-model="visible"
-    trigger="click"
-    placement="bottomRight"
-    :autoAdjustOverflow="true"
-    :arrowPointAtCenter="true"
-    overlayClassName="header-notice-wrapper"
-    :overlayStyle="{ width: '300px', top: '50px' }">
-    <template slot="content">
-      <a-spin :spinning="loadding">
-        <a-tabs>
-          <a-tab-pane tab="通知" key="1">
-            <a-list>
-              <a-list-item>
-                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane tab="消息" key="2">
-            123
-          </a-tab-pane>
-          <a-tab-pane tab="待办" key="3">
-            123
-          </a-tab-pane>
-        </a-tabs>
-      </a-spin>
-    </template>
-    <span @click="fetchNotice" class="header-notice">
-      <a-badge count="12">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
-      </a-badge>
-    </span>
-  </a-popover>
-</template>
-
-<script>
-export default {
-  name: 'HeaderNotice',
-  data () {
-    return {
-      loadding: false,
-      visible: false
-    }
-  },
-  methods: {
-    fetchNotice () {
-      if (!this.visible) {
-        this.loadding = true
-        setTimeout(() => {
-          this.loadding = false
-        }, 2000)
-      } else {
-        this.loadding = false
-      }
-      this.visible = !this.visible
-    }
-  }
-}
-</script>
-
-<style lang="css">
-  .header-notice-wrapper {
-    top: 50px !important;
-  }
-</style>
-<style lang="less" scoped>
-  .header-notice{
-    display: inline-block;
-    transition: all 0.3s;
-
-    span {
-      vertical-align: initial;
-    }
-  }
-</style>
+<template>
+  <a-popover
+    v-model="visible"
+    trigger="click"
+    placement="bottomRight"
+    overlayClassName="header-notice-wrapper"
+    :autoAdjustOverflow="true"
+    :arrowPointAtCenter="true"
+    :overlayStyle="{ width: '300px', top: '50px' }"
+  >
+    <template slot="content">
+      <a-spin :spinning="loadding">
+        <a-tabs>
+          <a-tab-pane tab="通知" key="1">
+            <a-list>
+              <a-list-item>
+                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane tab="消息" key="2">
+            123
+          </a-tab-pane>
+          <a-tab-pane tab="待办" key="3">
+            123
+          </a-tab-pane>
+        </a-tabs>
+      </a-spin>
+    </template>
+    <span @click="fetchNotice" class="header-notice">
+      <a-badge count="12">
+        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
+      </a-badge>
+    </span>
+  </a-popover>
+</template>
+
+<script>
+export default {
+  name: 'HeaderNotice',
+  data () {
+    return {
+      loadding: false,
+      visible: false
+    }
+  },
+  methods: {
+    fetchNotice () {
+      if (!this.visible) {
+        this.loadding = true
+        setTimeout(() => {
+          this.loadding = false
+        }, 2000)
+      } else {
+        this.loadding = false
+      }
+      this.visible = !this.visible
+    }
+  }
+}
+</script>
+
+<style lang="css">
+  .header-notice-wrapper {
+    top: 50px !important;
+  }
+</style>
+<style lang="less" scoped>
+  .header-notice{
+    display: inline-block;
+    transition: all 0.3s;
+
+    span {
+      vertical-align: initial;
+    }
+  }
+</style>

src/components/NoticeIcon/index.js

@@ -0,0 +1,2 @@
+import NoticeIcon from './NoticeIcon'
+export default NoticeIcon

src/components/page/PageHeader.vue → src/components/PageHeader/PageHeader.vue

@@ -1,16 +1,7 @@
 <template>
   <div class="page-header">
     <div class="page-header-index-wide">
-      <a-breadcrumb class="breadcrumb">
-        <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-          <router-link
-            v-if="item.name != name && index != 1"
-            :to="{ path: item.path === '' ? '/' : item.path }"
-          >{{ item.meta.title }}</router-link>
-          <span v-else>{{ item.meta.title }}</span>
-        </a-breadcrumb-item>
-      </a-breadcrumb>
-
+      <s-breadcrumb />
       <div class="detail">
         <div class="main" v-if="!$route.meta.hiddenHeaderContent">
           <div class="row">
@@ -22,7 +13,7 @@
           </div>
           <div class="row">
             <div v-if="avatar" class="avatar">
-              <a-avatar :src="avatar"/>
+              <a-avatar :src="avatar" />
             </div>
             <div v-if="this.$slots.content" class="headerContent">
               <slot name="content"></slot>
@@ -50,13 +41,8 @@ export default {
   },
   props: {
     title: {
-      type: String,
-      default: '',
-      required: false
-    },
-    breadcrumb: {
-      type: Array,
-      default: null,
+      type: [String, Boolean],
+      default: true,
       required: false
     },
     logo: {
@@ -71,36 +57,12 @@ export default {
     }
   },
   data () {
-    return {
-      name: '',
-      breadList: []
-    }
-  },
-  created () {
-    this.getBreadcrumb()
-  },
-  methods: {
-    getBreadcrumb () {
-      this.breadList = []
-      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
-
-      this.name = this.$route.name
-      this.$route.matched.forEach((item) => {
-        // item.name !== 'index' && this.breadList.push(item)
-        this.breadList.push(item)
-      })
-    }
-  },
-  watch: {
-    $route () {
-      this.getBreadcrumb()
-    }
+    return {}
   }
 }
 </script>
 
 <style lang="less" scoped>
-
 .page-header {
   background: #fff;
   padding: 16px 32px 0;
@@ -146,10 +108,9 @@ export default {
         font-size: 20px;
         line-height: 28px;
         font-weight: 500;
-        color: rgba(0,0,0,.85);
+        color: rgba(0, 0, 0, 0.85);
         margin-bottom: 16px;
         flex: auto;
-
       }
       .logo {
         width: 28px;
@@ -157,9 +118,10 @@ export default {
         border-radius: 4px;
         margin-right: 16px;
       }
-      .content, .headerContent {
+      .content,
+      .headerContent {
         flex: auto;
-        color: rgba(0,0,0,.45);
+        color: rgba(0, 0, 0, 0.45);
         line-height: 22px;
 
         .link {
@@ -192,9 +154,7 @@ export default {
 }
 
 .mobile .page-header {
-
   .main {
-
     .row {
       flex-wrap: wrap;
 
@@ -203,7 +163,8 @@ export default {
         margin: 0 2% 8px 0;
       }
 
-      .content, .headerContent {
+      .content,
+      .headerContent {
         flex: 0 1 70%;
 
         .link {

src/components/PageHeader/index.js

@@ -0,0 +1,2 @@
+import PageHeader from './PageHeader'
+export default PageHeader

src/components/setting/SettingDrawer.vue → src/components/SettingDrawer/SettingDrawer.vue

@@ -168,10 +168,10 @@
 </template>
 
 <script>
-import DetailList from '@/components/tools/DetailList'
-import SettingItem from '@/components/setting/SettingItem'
+import { DetailList } from '@/components'
+import SettingItem from './SettingItem'
 import config from '@/config/defaultSettings'
-import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
+import { updateTheme, updateColorWeak, colorList } from './settingConfig'
 import { mixin, mixinDevice } from '@/utils/mixin'
 
 export default {

src/components/setting/SettingItem.vue → src/components/SettingDrawer/SettingItem.vue

@@ -1,38 +1,38 @@
-<template>
-  <div class="setting-drawer-index-item">
-    <h3 class="setting-drawer-index-title">{{ title }}</h3>
-    <slot></slot>
-    <a-divider v-if="divider"/>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SettingItem',
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    divider: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-  .setting-drawer-index-item {
-    margin-bottom: 24px;
-
-    .setting-drawer-index-title {
-      font-size: 14px;
-      color: rgba(0, 0, 0, .85);
-      line-height: 22px;
-      margin-bottom: 12px;
-    }
-
-  }
+<template>
+  <div class="setting-drawer-index-item">
+    <h3 class="setting-drawer-index-title">{{ title }}</h3>
+    <slot></slot>
+    <a-divider v-if="divider"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingItem',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    divider: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .setting-drawer-index-item {
+    margin-bottom: 24px;
+
+    .setting-drawer-index-title {
+      font-size: 14px;
+      color: rgba(0, 0, 0, .85);
+      line-height: 22px;
+      margin-bottom: 12px;
+    }
+
+  }
 </style>

src/components/SettingDrawer/index.js

@@ -0,0 +1,2 @@
+import SettingDrawer from './SettingDrawer'
+export default SettingDrawer

src/components/global.less

@@ -13,10 +13,9 @@ body {
   height: auto;
   overflow-x: hidden;
 
-  &.mobile,&.tablet {
-
+  &.mobile,
+  &.tablet {
     .ant-layout-content {
-
       .content {
         margin: 24px 0 0;
       }
@@ -47,9 +46,9 @@ body {
   &.mobile {
     .sidemenu {
       .ant-header-fixedHeader {
-
-        &.ant-header-side-opened, &.ant-header-side-closed  {
-          width: 100%
+        &.ant-header-side-opened,
+        &.ant-header-side-closed {
+          width: 100%;
         }
       }
     }
@@ -64,7 +63,7 @@ body {
     line-height: 64px;
     padding: 0 24px;
     cursor: pointer;
-    transition: color .3s;
+    transition: color 0.3s;
     &:hover {
       background: rgba(0, 0, 0, 0.025);
     }
@@ -77,7 +76,7 @@ body {
       right: 0;
       z-index: 9;
       width: 100%;
-      transition: width .2s;
+      transition: width 0.2s;
 
       &.ant-header-side-opened {
         width: 100%;
@@ -98,7 +97,6 @@ body {
         max-width: unset;
       }
     }
-
   }
 
   .sidemenu {
@@ -108,14 +106,14 @@ body {
       right: 0;
       z-index: 9;
       width: 100%;
-      transition: width .2s;
+      transition: width 0.2s;
 
       &.ant-header-side-opened {
-        width: calc(100% - 256px)
+        width: calc(100% - 256px);
       }
 
       &.ant-header-side-closed {
-        width: calc(100% - 80px)
+        width: calc(100% - 80px);
       }
     }
   }
@@ -124,12 +122,12 @@ body {
     height: 64px;
     padding: 0 12px 0 0;
     background: #fff;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
     position: relative;
   }
 
-  .header, .top-nav-header-index {
-
+  .header,
+  .top-nav-header-index {
     .user-wrapper {
       float: right;
       height: 100%;
@@ -138,7 +136,7 @@ body {
         cursor: pointer;
         padding: 0 12px;
         display: inline-block;
-        transition: all .3s;
+        transition: all 0.3s;
         height: 100%;
         color: rgba(0, 0, 0, 0.65);
 
@@ -149,7 +147,7 @@ body {
         .avatar {
           margin: 20px 8px 20px 0;
           color: #1890ff;
-          background: hsla(0, 0%, 100%, .85);
+          background: hsla(0, 0%, 100%, 0.85);
           vertical-align: middle;
         }
 
@@ -162,7 +160,6 @@ body {
 
     &.dark {
       .user-wrapper {
-
         .action {
           color: rgba(255, 255, 255, 0.85);
           a {
@@ -177,13 +174,11 @@ body {
     }
   }
 
-  &.mobile,&.tablet {
+  &.mobile,
+  &.tablet {
     .top-nav-header-index {
-
       .header-index-wide {
-
         .header-index-left {
-
           .trigger {
             color: rgba(255, 255, 255, 0.85);
             padding: 0 12px;
@@ -201,9 +196,7 @@ body {
       }
 
       &.light {
-
         .header-index-wide {
-
           .header-index-left {
             .trigger {
               color: rgba(0, 0, 0, 0.65);
@@ -218,13 +211,11 @@ body {
   &.tablet {
     // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
     .top-nav-header-index {
-
       .header-index-wide {
-
         .header-index-left {
           .logo > a {
             overflow: hidden;
-            text-overflow:ellipsis;
+            text-overflow: ellipsis;
             white-space: nowrap;
           }
         }
@@ -234,13 +225,12 @@ body {
         }
       }
     }
-
   }
 
   .top-nav-header-index {
-    box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
     position: relative;
-    transition: background .3s,width .2s;
+    transition: background 0.3s, width 0.2s;
 
     .header-index-wide {
       max-width: 1200px;
@@ -267,10 +257,11 @@ body {
           height: 64px;
           position: relative;
           line-height: 64px;
-          transition: all .3s;
+          transition: all 0.3s;
           overflow: hidden;
 
-          img, svg {
+          img,
+          svg {
             display: inline-block;
             vertical-align: middle;
             height: 32px;
@@ -318,6 +309,10 @@ body {
     padding: 0 12px 0 0;
   }
 
+  // footer
+  .ant-layout-footer {
+    padding: 0;
+  }
 }
 
 .topmenu {
@@ -346,21 +341,21 @@ body {
   }
 
   .ant-drawer-body {
-    padding: 0
+    padding: 0;
   }
 }
 
 // 菜单样式
 .sider {
-  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
   position: relative;
   z-index: 10;
   height: auto;
 
-  .ant-layout-sider-children  {
+  .ant-layout-sider-children {
     padding-top: 64px;
     overflow-y: hidden;
-    &:hover{
+    &:hover {
       overflow-y: auto;
     }
   }
@@ -378,18 +373,21 @@ body {
     height: 64px;
     line-height: 64px;
     padding-left: 24px;
-    -webkit-transition: all .3s;
-    transition: all .3s;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
     background: #002140;
     overflow: hidden;
     z-index: 9;
 
-    img, svg, h1 {
+    img,
+    svg,
+    h1 {
       display: inline-block;
       vertical-align: middle;
     }
 
-    img, svg {
+    img,
+    svg {
       height: 32px;
       width: 32px;
     }
@@ -398,7 +396,7 @@ body {
       color: #fff;
       font-size: 20px;
       margin: 0 0 0 12px;
-      font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       font-weight: 600;
       vertical-align: middle;
     }
@@ -421,7 +419,6 @@ body {
       border-right-color: transparent;
     }
   }
-
 }
 
 // 外置的样式控制
@@ -439,12 +436,10 @@ body {
 
   .ant-dropdown-menu-item > .anticon:first-child,
   .ant-dropdown-menu-item > a > .anticon:first-child,
-  .ant-dropdown-menu-submenu-title > .anticon:first-child
-  .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+  .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
     min-width: 12px;
     margin-right: 8px;
   }
-
 }
 
 // 数据列表 样式
@@ -453,9 +448,7 @@ body {
 }
 
 .table-page-search-wrapper {
-
   .ant-form-inline {
-
     .ant-form-item {
       display: flex;
       margin-bottom: 24px;
@@ -467,7 +460,7 @@ body {
         vertical-align: middle;
       }
 
-      >.ant-form-item-label {
+      > .ant-form-item-label {
         line-height: 32px;
         padding-right: 8px;
         width: auto;
@@ -484,11 +477,9 @@ body {
     margin-bottom: 24px;
     white-space: nowrap;
   }
-
 }
 
 .content {
-
   .table-operator {
     margin-bottom: 18px;
 
@@ -496,4 +487,4 @@ body {
       margin-right: 8px;
     }
   }
-}
+}

src/components/index.js

@@ -1,13 +1,13 @@
 // chart
-import Bar from '@/components/chart/Bar'
-import ChartCard from '@/components/chart/ChartCard'
-import Liquid from '@/components/chart/Liquid'
-import MiniArea from '@/components/chart/MiniArea'
-import MiniBar from '@/components/chart/MiniBar'
-import MiniProgress from '@/components/chart/MiniProgress'
-import Radar from '@/components/chart/Radar'
-import RankList from '@/components/chart/RankList'
-import TransferBar from '@/components/chart/TransferBar'
+import Bar from '@/components/Charts/Bar'
+import ChartCard from '@/components/Charts/ChartCard'
+import Liquid from '@/components/Charts/Liquid'
+import MiniArea from '@/components/Charts/MiniArea'
+import MiniBar from '@/components/Charts/MiniBar'
+import MiniProgress from '@/components/Charts/MiniProgress'
+import Radar from '@/components/Charts/Radar'
+import RankList from '@/components/Charts/RankList'
+import TransferBar from '@/components/Charts/TransferBar'
 
 // pro components
 import AvatarList from '@/components/AvatarList'
@@ -15,10 +15,10 @@ import CountDown from '@/components/CountDown'
 import Ellipsis from '@/components/Ellipsis'
 import FooterToolbar from '@/components/FooterToolbar'
 import NumberInfo from '@/components/NumberInfo'
-import DetailList from '@/components/tools/DetailList'
+import DescriptionList from '@/components/DescriptionList'
 import Tree from '@/components/Tree/Tree'
 import Trend from '@/components/Trend'
-import STable from '@/components/table'
+import STable from '@/components/Table'
 import MultiTab from '@/components/MultiTab'
 import Result from '@/components/Result'
 import IconSelector from '@/components/IconSelector'
@@ -39,7 +39,9 @@ export {
   Ellipsis,
   FooterToolbar,
   NumberInfo,
-  DetailList,
+  DescriptionList,
+  // 兼容写法，请勿继续使用
+  DescriptionList as DetailList,
   Tree,
   STable,
   MultiTab,

src/components/layouts/BasicLayout.vue

@@ -1,53 +0,0 @@
-<template>
-  <global-layout>
-    <multi-tab v-if="$store.getters.multiTab"></multi-tab>
-    <transition name="page-transition">
-      <route-view />
-    </transition>
-  </global-layout>
-</template>
-
-<script>
-import RouteView from '@/components/layouts/RouteView'
-import MultiTab from '@/components/MultiTab'
-import GlobalLayout from '@/components/page/GlobalLayout'
-
-export default {
-  name: 'BasicLayout',
-  components: {
-    RouteView,
-    MultiTab,
-    GlobalLayout
-  },
-  data () {
-    return {}
-  }
-}
-</script>
-
-<style lang="less">
-  @import url('../global.less');
-
-  /*
- * The following styles are auto-applied to elements with
- * transition="page-transition" when their visibility is toggled
- * by Vue.js.
- *
- * You can easily play with the page transition by editing
- * these styles.
- */
-
-  .page-transition-enter {
-    opacity: 0;
-  }
-
-  .page-transition-leave-active {
-    opacity: 0;
-  }
-
-  .page-transition-enter .page-transition-container,
-  .page-transition-leave-active .page-transition-container {
-    -webkit-transform: scale(1.1);
-    transform: scale(1.1);
-  }
-</style>

src/components/layouts/PageView.vue

@@ -1,85 +0,0 @@
-<template>
-  <page-layout :desc="description" :title="getTitle" :link-list="linkList" :search="search" :tabs="tabs">
-    <div slot="extra" class="extra-img">
-      <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
-    </div>
-    <!-- keep-alive  -->
-    <route-view ref="content"></route-view>
-  </page-layout>
-</template>
-
-<script>
-import PageLayout from '../page/PageLayout'
-import RouteView from './RouteView'
-
-export default {
-  name: 'PageContent',
-  components: {
-    RouteView,
-    PageLayout
-  },
-  data () {
-    return {
-      title: '',
-      description: '',
-      linkList: [],
-      extraImage: '',
-      search: false,
-      tabs: {}
-    }
-  },
-  mounted () {
-    this.getPageHeaderInfo()
-  },
-  updated () {
-    this.getPageHeaderInfo()
-  },
-  computed: {
-
-    getTitle () {
-      return this.$route.meta.title
-    }
-
-  },
-  methods: {
-    getPageHeaderInfo () {
-      // eslint-disable-next-line
-        this.title = this.$route.meta.title
-      // 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
-      const content = this.$refs.content && this.$refs.content.$children[0]
-
-      if (content) {
-        this.description = content.description
-        this.linkList = content.linkList
-        this.extraImage = content.extraImage
-        this.search = content.search === true
-        this.tabs = content.tabs
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .extra-img {
-    margin-top: -60px;
-    text-align: center;
-    width: 195px;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  .mobile {
-    .extra-img{
-      margin-top: 0;
-      text-align: center;
-      width: 96px;
-
-      img{
-        width: 100%;
-      }
-    }
-  }
-</style>

src/components/layouts/index.js

@@ -1,7 +0,0 @@
-import UserLayout from '@/components/layouts/UserLayout'
-import BlankLayout from '@/components/layouts/BlankLayout'
-import BasicLayout from '@/components/layouts/BasicLayout'
-import RouteView from '@/components/layouts/RouteView'
-import PageView from '@/components/layouts/PageView'
-
-export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView }

src/components/page/GlobalFooter.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="footer">
-    <div class="links">
-      <a href="https://pro.ant.design/" target="_blank">Pro 首页</a>
-      <a href="https://github.com/ant-design/ant-design-pro" target="_blank">
-        <a-icon type="github"/>
-      </a>
-      <a href="https://ant.design/">Ant Design</a>
-      <a href="https://vue.ant.design/">Vue Antd</a>
-    </div>
-    <div class="copyright">
-      Copyright
-      <a-icon type="copyright"/>
-      2018 <span>白鹭学园技术组出品</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LayoutFooter',
-  data () {
-    return {
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .footer {
-    padding: 0 16px;
-    margin: 48px 0 24px;
-    text-align: center;
-
-    .links {
-      margin-bottom: 8px;
-
-      a {
-        color: rgba(0, 0, 0, .45);
-
-        &:hover {
-          color: rgba(0, 0, 0, .65);
-        }
-
-        &:not(:last-child) {
-          margin-right: 40px;
-        }
-      }
-    }
-    .copyright {
-      color: rgba(0, 0, 0, .45);
-      font-size: 14px;
-    }
-  }
-</style>

src/components/page/PageLayout.vue

@@ -1,124 +0,0 @@
-<template>
-  <div :style="!$route.meta.pageHeader ? 'margin: -24px -24px 0px;' : null">
-    <!-- pageHeader , route meta hideHeader:true on hide -->
-    <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
-      <slot slot="action" name="action"></slot>
-      <slot slot="content" name="headerContent"></slot>
-      <div slot="content" v-if="!this.$slots.headerContent && desc">
-        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
-        <div class="link">
-          <template v-for="(link, index) in linkList">
-            <a :key="index" :href="link.href">
-              <a-icon :type="link.icon"/>
-              <span>{{ link.title }}</span>
-            </a>
-          </template>
-        </div>
-      </div>
-      <slot slot="extra" name="extra"></slot>
-      <div slot="pageMenu">
-        <div class="page-menu-search" v-if="search">
-          <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
-        </div>
-        <div class="page-menu-tabs" v-if="tabs && tabs.items">
-          <!-- @change="callback" :activeKey="activeKey" -->
-          <a-tabs :tabBarStyle="{margin: 0}" @change="tabs.callback" :activeKey="tabs.active()">
-            <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
-          </a-tabs>
-        </div>
-      </div>
-    </page-header>
-    <div class="content">
-      <div :class="['page-header-index-wide']">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import PageHeader from './PageHeader'
-
-export default {
-  name: 'LayoutContent',
-  components: {
-    PageHeader
-  },
-  // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
-  props: {
-    desc: {
-      type: String,
-      default: null
-    },
-    logo: {
-      type: String,
-      default: null
-    },
-    title: {
-      type: String,
-      default: null
-    },
-    avatar: {
-      type: String,
-      default: null
-    },
-    linkList: {
-      type: Array,
-      default: null
-    },
-    extraImage: {
-      type: String,
-      default: null
-    },
-    search: {
-      type: Boolean,
-      default: false
-    },
-    tabs: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .content {
-    margin: 24px 24px 0;
-
-    .link {
-      margin-top: 16px;
-
-      &:not(:empty) {
-        margin-bottom: 16px;
-      }
-      a {
-        margin-right: 32px;
-        height: 24px;
-        line-height: 24px;
-        display: inline-block;
-
-        i {
-          font-size: 24px;
-          margin-right: 8px;
-          vertical-align: middle;
-        }
-        span {
-          height: 24px;
-          line-height: 24px;
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-  .page-menu-search {
-    text-align: center;
-    margin-bottom: 16px;
-  }
-  .page-menu-tabs {
-    margin-top: 48px;
-  }
-</style>

src/components/page/SHeaderNotice.vue

@@ -1,58 +0,0 @@
-<template>
-  <a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px' }">
-    <template slot="content">
-      <a-spin :spinning="loadding">
-        <a-tabs>
-          <a-tab-pane v-for="(tab, k) in tabs" :tab="tab.title" :key="k">
-
-          </a-tab-pane>
-        </a-tabs>
-      </a-spin>
-    </template>
-    <span @click="fetchNotice" class="header-notice">
-      <a-badge count="12">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
-      </a-badge>
-    </span>
-  </a-popover>
-</template>
-
-<script>
-export default {
-  name: 'HeaderNotice',
-  props: {
-    tabs: {
-      type: Array,
-      default: null,
-      required: true
-    }
-  },
-  data () {
-    return {
-      loadding: false
-    }
-  },
-  methods: {
-    fetchNotice () {
-      if (this.loadding) {
-        this.loadding = false
-        return
-      }
-      this.loadding = true
-      setTimeout(() => {
-        this.loadding = false
-      }, 2000)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .header-notice{
-    display: inline-block;
-    transition: all 0.3s;
-    span {
-      vertical-align: initial;
-    }
-  }
-</style>

src/components/tools/Breadcrumb.vue

@@ -1,9 +1,10 @@
 <template>
   <a-breadcrumb class="breadcrumb">
-    <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-      <router-link v-if="item.name != name" :to="{ path: item.path }">
-        {{ item.meta.title }}
-      </router-link>
+    <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
+      <router-link
+        v-if="item.name != name && index != 1"
+        :to="{ path: item.path === '' ? '/' : item.path }"
+      >{{ item.meta.title }}</router-link>
       <span v-else>{{ item.meta.title }}</span>
     </a-breadcrumb-item>
   </a-breadcrumb>
@@ -22,14 +23,12 @@ export default {
   },
   methods: {
     getBreadcrumb () {
-      console.log('this.$route.matched', this.$route.matched)
-
       this.breadList = []
-      this.breadList.push({ name: 'index', path: '/dashboard/', meta: { title: '首页' } })
+      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
 
       this.name = this.$route.name
-      this.$route.matched.forEach((item) => {
-        // item.meta.name === 'dashboard' ? item.path = '/dashboard' : this.$route.path === item.path
+      this.$route.matched.forEach(item => {
+        // item.name !== 'index' && this.breadList.push(item)
         this.breadList.push(item)
       })
     }
@@ -43,5 +42,4 @@ export default {
 </script>
 
 <style scoped>
-
 </style>

src/components/tools/DetailList.vue

@@ -1,153 +1,5 @@
-<template>
-  <div :class="['detail-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
-    <div v-if="title" class="title">{{ title }}</div>
-    <a-row>
-      <slot></slot>
-    </a-row>
-  </div>
-</template>
-
 <script>
-import { Col } from 'ant-design-vue/es/grid/'
-
-const Item = {
-  name: 'DetailListItem',
-  props: {
-    term: {
-      type: String,
-      default: '',
-      required: false
-    }
-  },
-  inject: {
-    col: {
-      type: Number
-    }
-  },
-  render () {
-    return (
-      <Col {...{ props: responsive[this.col] }}>
-        <div class="term">{this.$props.term}</div>
-        <div class="content">{this.$slots.default}</div>
-      </Col>
-    )
-  }
-}
-
-const responsive = {
-  1: { xs: 24 },
-  2: { xs: 24, sm: 12 },
-  3: { xs: 24, sm: 12, md: 8 },
-  4: { xs: 24, sm: 12, md: 6 }
-}
-
-export default {
-  name: 'DetailList',
-  Item: Item,
-  components: {
-    Col
-  },
-  props: {
-    title: {
-      type: String,
-      default: '',
-      required: false
-    },
-    col: {
-      type: Number,
-      required: false,
-      default: 3
-    },
-    size: {
-      type: String,
-      required: false,
-      default: 'large'
-    },
-    layout: {
-      type: String,
-      required: false,
-      default: 'horizontal'
-    }
-  },
-  provide () {
-    return {
-      col: this.col > 4 ? 4 : this.col
-    }
-  }
-}
+/* WARNING: 兼容老引入，请勿继续使用 */
+import DescriptionList from '@/components/DescriptionList'
+export default DescriptionList
 </script>
-
-<style lang="less" scoped>
-
-  .detail-list {
-
-    .title {
-      color: rgba(0,0,0,.85);
-      font-size: 14px;
-      font-weight: 500;
-      margin-bottom: 16px;
-    }
-
-    /deep/ .term {
-      color: rgba(0,0,0,.85);
-      display: table-cell;
-      line-height: 20px;
-      margin-right: 8px;
-      padding-bottom: 16px;
-      white-space: nowrap;
-
-      &:not(:empty):after {
-        content: ":";
-        margin: 0 8px 0 2px;
-        position: relative;
-        top: -.5px;
-      }
-    }
-
-    /deep/ .content {
-      color: rgba(0,0,0,.65);
-      display: table-cell;
-      min-height: 22px;
-      line-height: 22px;
-      padding-bottom: 16px;
-      width: 100%;
-      &:empty {
-        content: ' ';
-        height: 38px;
-        padding-bottom: 16px;
-      }
-    }
-
-    &.small {
-
-      .title {
-        font-size: 14px;
-        color: rgba(0, 0, 0, .65);
-        font-weight: normal;
-        margin-bottom: 12px;
-      }
-      /deep/ .term, .content {
-        padding-bottom: 8px;
-      }
-    }
-
-    &.large {
-      /deep/ .term, .content {
-        padding-bottom: 16px;
-      }
-
-      .title {
-        font-size: 16px;
-      }
-    }
-
-    &.vertical {
-      .term {
-        padding-bottom: 8px;
-      }
-      /deep/ .term, .content {
-        display: block;
-      }
-    }
-  }
-</style>

src/components/tools/UserMenu.vue

@@ -5,7 +5,7 @@
         <a-icon type="question-circle-o"></a-icon>
       </span>
     </a>
-    <header-notice class="action"/>
+    <notice-icon class="action"/>
     <a-dropdown>
       <span class="action ant-dropdown-link user-dropdown-menu">
         <a-avatar class="avatar" size="small" :src="avatar()"/>
@@ -41,13 +41,13 @@
 </template>
 
 <script>
-import HeaderNotice from './HeaderNotice'
+import NoticeIcon from '@/components/NoticeIcon'
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'UserMenu',
   components: {
-    HeaderNotice
+    NoticeIcon
   },
   methods: {
     ...mapActions(['Logout']),

src/components/page/GlobalLayout.vue → src/layouts/BasicLayout.vue

@@ -1,50 +1,33 @@
 <template>
-  <a-layout class="layout" :class="[device]">
-
-    <template v-if="isSideMenu()">
+  <a-layout :class="['layout', device]">
+    <!-- SideMenu -->
+    <template>
       <a-drawer
         v-if="isMobile()"
-        :wrapClassName="'drawer-sider ' + navTheme"
+        placement="left"
+        :wrapClassName="`drawer-sider ${navTheme}`"
         :closable="false"
         :visible="collapsed"
-        placement="left"
-        @close="() => this.collapsed = false"
+        @close="drawerClose"
       >
         <side-menu
+          mode="inline"
           :menus="menus"
           :theme="navTheme"
           :collapsed="false"
           :collapsible="true"
-          mode="inline"
-          @menuSelect="menuSelect"></side-menu>
+          @menuSelect="menuSelect"
+        ></side-menu>
       </a-drawer>
 
       <side-menu
-        v-else
+        v-else-if="isSideMenu()"
         mode="inline"
         :menus="menus"
         :theme="navTheme"
         :collapsed="collapsed"
-        :collapsible="true"></side-menu>
-    </template>
-    <!-- 下次优化这些代码 -->
-    <template v-else>
-      <a-drawer
-        v-if="isMobile()"
-        :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
-        @close="() => this.collapsed = false"
-        :closable="false"
-        :visible="collapsed"
-      >
-        <side-menu
-          :menus="menus"
-          :theme="navTheme"
-          :collapsed="false"
-          :collapsible="true"
-          mode="inline"
-          @menuSelect="menuSelect"></side-menu>
-      </a-drawer>
+        :collapsible="true"
+      ></side-menu>
     </template>
 
     <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
@@ -59,46 +42,59 @@
       />
 
       <!-- layout content -->
-      <a-layout-content :style="{ margin: $store.getters.multiTab ? '24px 24px 0' : '24px 24px 0', height: '100%', paddingTop: fixedHeader ? '64px' : '0' }">
-        <slot></slot>
+      <a-layout-content :style="{ height: '100%', margin: multiTab ? '24px 24px 0' : '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
+        <multi-tab v-if="multiTab"></multi-tab>
+        <transition name="page-transition">
+          <route-view />
+        </transition>
       </a-layout-content>
 
       <!-- layout footer -->
-      <a-layout-footer style="padding: 0">
+      <a-layout-footer>
         <global-footer />
       </a-layout-footer>
-      <setting-drawer></setting-drawer>
+
+      <!-- Setting Drawer (show in development mode) -->
+      <setting-drawer v-if="!production"></setting-drawer>
     </a-layout>
   </a-layout>
+
 </template>
 
 <script>
-import SideMenu from '@/components/menu/SideMenu'
-import GlobalHeader from '@/components/page/GlobalHeader'
-import GlobalFooter from '@/components/page/GlobalFooter'
-import SettingDrawer from '@/components/setting/SettingDrawer'
 import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapState, mapActions } from 'vuex'
-import { mixin, mixinDevice } from '@/utils/mixin.js'
+import { mixin, mixinDevice } from '@/utils/mixin'
+import config from '@/config/defaultSettings'
+
+import RouteView from './RouteView'
+import MultiTab from '@/components/MultiTab'
+import SideMenu from '@/components/Menu/SideMenu'
+import GlobalHeader from '@/components/GlobalHeader'
+import GlobalFooter from '@/components/GlobalFooter'
+import SettingDrawer from '@/components/SettingDrawer'
 
 export default {
-  name: 'GlobalLayout',
+  name: 'BasicLayout',
+  mixins: [mixin, mixinDevice],
   components: {
+    RouteView,
+    MultiTab,
     SideMenu,
     GlobalHeader,
     GlobalFooter,
     SettingDrawer
   },
-  mixins: [mixin, mixinDevice],
   data () {
     return {
+      production: config.production,
       collapsed: false,
       menus: []
     }
   },
   computed: {
     ...mapState({
-      // 主路由
+      // 动态主路由
       mainMenu: state => state.permission.addRouters
     }),
     contentPaddingLeft () {
@@ -117,7 +113,7 @@ export default {
     }
   },
   created () {
-    this.menus = this.mainMenu.find((item) => item.path === '/').children
+    this.menus = this.mainMenu.find(item => item.path === '/').children
     this.collapsed = !this.sidebarOpened
   },
   mounted () {
@@ -143,7 +139,7 @@ export default {
       if (this.sidebarOpened) {
         left = this.isDesktop() ? '256px' : '80px'
       } else {
-        left = this.isMobile() && '0' || (this.fixSidebar && '80px' || '0')
+        left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
       }
       return left
     },
@@ -151,7 +147,37 @@ export default {
       if (!this.isDesktop()) {
         this.collapsed = false
       }
+    },
+    drawerClose () {
+      this.collapsed = false
     }
   }
 }
 </script>
+
+<style lang="less">
+@import url('../components/global.less');
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="page-transition" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the page transition by editing
+ * these styles.
+ */
+
+.page-transition-enter {
+  opacity: 0;
+}
+
+.page-transition-leave-active {
+  opacity: 0;
+}
+
+.page-transition-enter .page-transition-container,
+.page-transition-leave-active .page-transition-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>

src/layouts/PageView.vue

@@ -0,0 +1,174 @@
+<template>
+  <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
+    <!-- pageHeader , route meta :true on hide -->
+    <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
+      <slot slot="action" name="action"></slot>
+      <slot slot="content" name="headerContent"></slot>
+      <div slot="content" v-if="!this.$slots.headerContent && description">
+        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
+        <div class="link">
+          <template v-for="(link, index) in linkList">
+            <a :key="index" :href="link.href">
+              <a-icon :type="link.icon" />
+              <span>{{ link.title }}</span>
+            </a>
+          </template>
+        </div>
+      </div>
+      <slot slot="extra" name="extra">
+        <div class="extra-img">
+          <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
+        </div>
+      </slot>
+      <div slot="pageMenu">
+        <div class="page-menu-search" v-if="search">
+          <a-input-search
+            style="width: 80%; max-width: 522px;"
+            placeholder="请输入..."
+            size="large"
+            enterButton="搜索"
+          />
+        </div>
+        <div class="page-menu-tabs" v-if="tabs && tabs.items">
+          <!-- @change="callback" :activeKey="activeKey" -->
+          <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
+            <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
+          </a-tabs>
+        </div>
+      </div>
+    </page-header>
+    <div class="content">
+      <div class="page-header-index-wide">
+        <slot>
+          <!-- keep-alive  -->
+          <route-view ref="content"></route-view>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@/components/PageHeader'
+import RouteView from './RouteView'
+
+export default {
+  name: 'PageView',
+  components: {
+    RouteView,
+    PageHeader
+  },
+  props: {
+    avatar: {
+      type: String,
+      default: null
+    },
+    title: {
+      type: [String, Boolean],
+      default: true
+    },
+    logo: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      pageTitle: null,
+      description: null,
+      linkList: [],
+      extraImage: '',
+      search: false,
+      tabs: {}
+    }
+  },
+  mounted () {
+    this.getPageHeaderInfo()
+  },
+  updated () {
+    this.getPageHeaderInfo()
+  },
+  computed: {
+
+    getPageTitle () {
+      return this.$route.meta.title
+    }
+
+  },
+  methods: {
+    getPageHeaderInfo () {
+      // eslint-disable-next-line
+      this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
+
+      // 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
+      const content = this.$refs.content && this.$refs.content.$children[0]
+
+      if (content) {
+        this.description = content.description
+        this.linkList = content.linkList
+        this.extraImage = content.extraImage
+        this.search = content.search === true
+        this.tabs = content.tabs
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .content {
+    margin: 24px 24px 0;
+    .link {
+      margin-top: 16px;
+      &:not(:empty) {
+        margin-bottom: 16px;
+      }
+      a {
+        margin-right: 32px;
+        height: 24px;
+        line-height: 24px;
+        display: inline-block;
+        i {
+          font-size: 24px;
+          margin-right: 8px;
+          vertical-align: middle;
+        }
+        span {
+          height: 24px;
+          line-height: 24px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .page-menu-search {
+    text-align: center;
+    margin-bottom: 16px;
+  }
+  .page-menu-tabs {
+    margin-top: 48px;
+  }
+
+  .extra-img {
+    margin-top: -60px;
+    text-align: center;
+    width: 195px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .mobile {
+    .extra-img{
+      margin-top: 0;
+      text-align: center;
+      width: 96px;
+
+      img{
+        width: 100%;
+      }
+    }
+  }
+</style>

src/components/layouts/RouteView.vue → src/layouts/RouteView.vue

@@ -1,26 +1,26 @@
-<script>
-export default {
-  name: 'RouteView',
-  data () {
-    return {}
-  },
-  render () {
-    const { $route: { meta }, $store: { getters } } = this
-    const inKeep = (
-      <keep-alive>
-        <router-view />
-      </keep-alive>
-    )
-    const notKeep = (
-      <router-view />
-    )
-    // 这里增加了 multiTab 的判断，当开启了 multiTab 时
-    // 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
-    // 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
-    if (meta.keepAlive === false) {
-      return notKeep
-    }
-    return getters.multiTab || meta.keepAlive ? inKeep : notKeep
-  }
-}
-</script>
+<script>
+export default {
+  name: 'RouteView',
+  data () {
+    return {}
+  },
+  render () {
+    const { $route: { meta }, $store: { getters } } = this
+    const inKeep = (
+      <keep-alive>
+        <router-view />
+      </keep-alive>
+    )
+    const notKeep = (
+      <router-view />
+    )
+    // 这里增加了 multiTab 的判断，当开启了 multiTab 时
+    // 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
+    // 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
+    if (meta.keepAlive === false) {
+      return notKeep
+    }
+    return getters.multiTab || meta.keepAlive ? inKeep : notKeep
+  }
+}
+</script>

src/components/layouts/UserLayout.vue → src/layouts/UserLayout.vue

@@ -1,150 +1,150 @@
-<template>
-  <div id="userLayout" :class="['user-layout-wrapper', device]">
-    <div class="container">
-      <div class="top">
-        <div class="header">
-          <a href="/">
-            <img src="~@/assets/logo.svg" class="logo" alt="logo">
-            <span class="title">Ant Design</span>
-          </a>
-        </div>
-        <div class="desc">
-          Ant Design 是西湖区最具影响力的 Web 设计规范
-        </div>
-      </div>
-
-      <route-view></route-view>
-
-      <div class="footer">
-        <div class="links">
-          <a href="_self">帮助</a>
-          <a href="_self">隐私</a>
-          <a href="_self">条款</a>
-        </div>
-        <div class="copyright">
-          Copyright &copy; 2018 白鹭学园技术组出品
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import RouteView from '@/components/layouts/RouteView'
-import { mixinDevice } from '@/utils/mixin.js'
-
-export default {
-  name: 'UserLayout',
-  components: { RouteView },
-  mixins: [mixinDevice],
-  data () {
-    return {}
-  },
-  mounted () {
-    document.body.classList.add('userLayout')
-  },
-  beforeDestroy () {
-    document.body.classList.remove('userLayout')
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  #userLayout.user-layout-wrapper {
-    height: 100%;
-
-    &.mobile {
-      .container {
-        .main {
-          max-width: 368px;
-          width: 98%;
-        }
-      }
-    }
-
-    .container {
-      width: 100%;
-      min-height: 100%;
-      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
-      background-size: 100%;
-      padding: 110px 0 144px;
-      position: relative;
-
-      a {
-        text-decoration: none;
-      }
-
-      .top {
-        text-align: center;
-
-        .header {
-          height: 44px;
-          line-height: 44px;
-
-          .badge {
-            position: absolute;
-            display: inline-block;
-            line-height: 1;
-            vertical-align: middle;
-            margin-left: -12px;
-            margin-top: -10px;
-            opacity: 0.8;
-          }
-
-          .logo {
-            height: 44px;
-            vertical-align: top;
-            margin-right: 16px;
-            border-style: none;
-          }
-
-          .title {
-            font-size: 33px;
-            color: rgba(0, 0, 0, .85);
-            font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-            font-weight: 600;
-            position: relative;
-            top: 2px;
-          }
-        }
-        .desc {
-          font-size: 14px;
-          color: rgba(0, 0, 0, 0.45);
-          margin-top: 12px;
-          margin-bottom: 40px;
-        }
-      }
-
-      .main {
-        min-width: 260px;
-        width: 368px;
-        margin: 0 auto;
-      }
-
-      .footer {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-        padding: 0 16px;
-        margin: 48px 0 24px;
-        text-align: center;
-
-        .links {
-          margin-bottom: 8px;
-          font-size: 14px;
-          a {
-            color: rgba(0, 0, 0, 0.45);
-            transition: all 0.3s;
-            &:not(:last-child) {
-              margin-right: 40px;
-            }
-          }
-        }
-        .copyright {
-          color: rgba(0, 0, 0, 0.45);
-          font-size: 14px;
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <div id="userLayout" :class="['user-layout-wrapper', device]">
+    <div class="container">
+      <div class="top">
+        <div class="header">
+          <a href="/">
+            <img src="~@/assets/logo.svg" class="logo" alt="logo">
+            <span class="title">Ant Design</span>
+          </a>
+        </div>
+        <div class="desc">
+          Ant Design 是西湖区最具影响力的 Web 设计规范
+        </div>
+      </div>
+
+      <route-view></route-view>
+
+      <div class="footer">
+        <div class="links">
+          <a href="_self">帮助</a>
+          <a href="_self">隐私</a>
+          <a href="_self">条款</a>
+        </div>
+        <div class="copyright">
+          Copyright &copy; 2018 白鹭学园技术组出品
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import RouteView from '@/components/layouts/RouteView'
+import { mixinDevice } from '@/utils/mixin.js'
+
+export default {
+  name: 'UserLayout',
+  components: { RouteView },
+  mixins: [mixinDevice],
+  data () {
+    return {}
+  },
+  mounted () {
+    document.body.classList.add('userLayout')
+  },
+  beforeDestroy () {
+    document.body.classList.remove('userLayout')
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  #userLayout.user-layout-wrapper {
+    height: 100%;
+
+    &.mobile {
+      .container {
+        .main {
+          max-width: 368px;
+          width: 98%;
+        }
+      }
+    }
+
+    .container {
+      width: 100%;
+      min-height: 100%;
+      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+      background-size: 100%;
+      padding: 110px 0 144px;
+      position: relative;
+
+      a {
+        text-decoration: none;
+      }
+
+      .top {
+        text-align: center;
+
+        .header {
+          height: 44px;
+          line-height: 44px;
+
+          .badge {
+            position: absolute;
+            display: inline-block;
+            line-height: 1;
+            vertical-align: middle;
+            margin-left: -12px;
+            margin-top: -10px;
+            opacity: 0.8;
+          }
+
+          .logo {
+            height: 44px;
+            vertical-align: top;
+            margin-right: 16px;
+            border-style: none;
+          }
+
+          .title {
+            font-size: 33px;
+            color: rgba(0, 0, 0, .85);
+            font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+            font-weight: 600;
+            position: relative;
+            top: 2px;
+          }
+        }
+        .desc {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.45);
+          margin-top: 12px;
+          margin-bottom: 40px;
+        }
+      }
+
+      .main {
+        min-width: 260px;
+        width: 368px;
+        margin: 0 auto;
+      }
+
+      .footer {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        padding: 0 16px;
+        margin: 48px 0 24px;
+        text-align: center;
+
+        .links {
+          margin-bottom: 8px;
+          font-size: 14px;
+          a {
+            color: rgba(0, 0, 0, 0.45);
+            transition: all 0.3s;
+            &:not(:last-child) {
+              margin-right: 40px;
+            }
+          }
+        }
+        .copyright {
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 14px;
+        }
+      }
+    }
+  }
+</style>

src/layouts/index.js

@@ -0,0 +1,7 @@
+import UserLayout from './UserLayout'
+import BlankLayout from './BlankLayout'
+import BasicLayout from './BasicLayout'
+import RouteView from './RouteView'
+import PageView from './PageView'
+
+export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView }