首页优化

web/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gin-vue-admin",
-  "version": "0.1.0",
+  "version": "2.3.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2381,6 +2381,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npm.taobao.org/anymatch/download/anymatch-3.1.2.tgz?cache=0&sync_timestamp=1617747806715&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fanymatch%2Fdownload%2Fanymatch-3.1.2.tgz",
       "integrity": "sha1-wFV8CWrzLxBhmPT04qODU343hxY=",
+      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2800,7 +2801,8 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.2.0.tgz",
-      "integrity": "sha1-dfUC7q+f/eQvyYgpZFvk6na9ni0="
+      "integrity": "sha1-dfUC7q+f/eQvyYgpZFvk6na9ni0=",
+      "dev": true
     },
     "bindings": {
       "version": "1.5.0",
@@ -3256,6 +3258,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.nlark.com/chokidar/download/chokidar-3.5.2.tgz",
       "integrity": "sha1-26OXb8rbAW9m/TZQIdkWANAcHnU=",
+      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -3271,6 +3274,7 @@
           "version": "3.0.2",
           "resolved": "https://registry.npm.taobao.org/braces/download/braces-3.0.2.tgz",
           "integrity": "sha1-NFThpGLujVmeI23zNs2epPiv4Qc=",
+          "dev": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -3279,6 +3283,7 @@
           "version": "7.0.1",
           "resolved": "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz",
           "integrity": "sha1-GRmmp8df44ssfHflGYU12prN2kA=",
+          "dev": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -3286,12 +3291,14 @@
         "is-number": {
           "version": "7.0.0",
           "resolved": "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz",
-          "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss="
+          "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=",
+          "dev": true
         },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npm.taobao.org/to-regex-range/download/to-regex-range-5.0.1.tgz",
           "integrity": "sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=",
+          "dev": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -4773,6 +4780,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "requires": {
+        "zrender": "4.3.2"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -5806,6 +5821,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz?cache=0&sync_timestamp=1612536546156&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.3.2.tgz",
       "integrity": "sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=",
+      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -5892,6 +5908,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.nlark.com/glob-parent/download/glob-parent-5.1.2.tgz?cache=0&sync_timestamp=1626760200164&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-5.1.2.tgz",
       "integrity": "sha1-hpgyxYA0/mikCTwX3BXoNA2EAcQ=",
+      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -6766,6 +6783,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/is-binary-path/download/is-binary-path-2.1.0.tgz",
       "integrity": "sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=",
+      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -6892,7 +6910,8 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/is-extglob/download/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -6904,6 +6923,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npm.taobao.org/is-glob/download/is-glob-4.0.1.tgz",
       "integrity": "sha1-dWfb6fL14kZ7x3q4PEopSCQHpdw=",
+      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -7922,7 +7942,8 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/normalize-path/download/normalize-path-3.0.0.tgz",
-      "integrity": "sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU="
+      "integrity": "sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU=",
+      "dev": true
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -8472,7 +8493,8 @@
     "picomatch": {
       "version": "2.3.0",
       "resolved": "https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz",
-      "integrity": "sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI="
+      "integrity": "sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=",
+      "dev": true
     },
     "pify": {
       "version": "4.0.1",
@@ -9468,6 +9490,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.nlark.com/readdirp/download/readdirp-3.6.0.tgz",
       "integrity": "sha1-dKNwvYVxFuJFspzJc0DNQxoCpsc=",
+      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -9866,6 +9889,7 @@
       "version": "1.38.1",
       "resolved": "https://registry.nlark.com/sass/download/sass-1.38.1.tgz?cache=0&sync_timestamp=1629764768435&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsass%2Fdownload%2Fsass-1.38.1.tgz",
       "integrity": "sha1-VN+xf7FohGtYUDJLgvxi3Gj1G60=",
+      "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
       }
@@ -12539,6 +12563,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
     }
   }
 }

web/src/components/dashbordCharts/echartsLine.vue

@@ -1,119 +1,143 @@
 <template>
-    <div class="dashbord-line" style="height: 400px;width: 100%;"></div>
+  <div class="dashbord-line-box">
+    <div class="dashbord-line-title">Gva 仓库commit 记录</div>
+    <div
+      ref="echart"
+      class="dashbord-line"
+    />
+  </div>
 </template>
 <script>
-import echarts from "echarts";
-require("echarts/theme/macarons");
+import echarts from 'echarts'
+require('echarts/theme/macarons')
 
-
-var dataAxis = [];
-for (var i = 1 ; i < 21 ; i++){
-    dataAxis.push(`${i}号`)
+var dataAxis = []
+for (var i = 1; i < 21; i++) {
+  dataAxis.push(`${i}号`)
 }
-var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
-var yMax = 500;
-var dataShadow = [];
+var data = [
+  220,
+  182,
+  191,
+  234,
+  290,
+  330,
+  310,
+  123,
+  442,
+  321,
+  90,
+  149,
+  210,
+  122,
+  133,
+  334,
+  198,
+  123,
+  125,
+  220,
+]
+var yMax = 500
+var dataShadow = []
 
+// eslint-disable-next-line no-redeclare
 for (var i = 0; i < data.length; i++) {
-    dataShadow.push(yMax);
+  dataShadow.push(yMax)
 }
 
 export default {
-    name: "line",
-    data() {
-        return {
-            chart: null,
-        };
-    },
-    mounted() {
-        this.$nextTick(() => {
-            this.initChart();
-        });
-    },
-    beforeDestroy() {
-        if (!this.chart) {
-            return;
-        }
-        this.chart.dispose();
-        this.chart = null;
+  name: 'Line',
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.echart, 'macarons')
+      this.setOptions()
     },
-    methods: {
-        initChart() {
-            this.chart = echarts.init(this.$el, "macarons");
-            this.setOptions();
+    setOptions() {
+      this.chart.setOption({
+        xAxis: {
+          data: dataAxis,
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          z: 10,
         },
-        setOptions() {
-            this.chart.setOption({
-                title: {
-                    text: 'GVA 图标示例',
-                },
-                xAxis: {
-                    data: dataAxis,
-                    axisTick: {
-                        show: false
-                    },
-                    axisLine: {
-                        show: false
-                    },
-                    z: 10
-                },
-                yAxis: {
-                    axisLine: {
-                        show: false
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: '#999'
-                        }
-                    }
-                },
-                dataZoom: [
-                    {
-                        type: 'inside'
-                    }
-                ],
-                series: [
-                    {
-                        type: 'bar',
-                        itemStyle: {
-                            borderRadius: [5, 5, 0, 0],
-                            color: new echarts.graphic.LinearGradient(
-                                0, 0, 0, 1,
-                                [
-                                    { offset: 0, color: '#83bff6' },
-                                    { offset: 0.5, color: '#188df0' },
-                                    { offset: 1, color: '#188df0' }
-                                ]
-                            ),
-
-                        },
-                        emphasis: {
-                            itemStyle: {
-                                color: new echarts.graphic.LinearGradient(
-                                    0, 0, 0, 1,
-                                    [
-                                        { offset: 0, color: '#2378f7' },
-                                        { offset: 0.7, color: '#2378f7' },
-                                        { offset: 1, color: '#83bff6' }
-                                    ]
-                                )
-                            }
-                        },
-                        data: data
-                    }
-                ]
-            });
+        yAxis: {
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#999',
+            },
+          },
         },
+        dataZoom: [
+          {
+            type: 'inside',
+          },
+        ],
+        series: [
+          {
+            type: 'bar',
+            itemStyle: {
+              borderRadius: [5, 5, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' },
+              ]),
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7' },
+                  { offset: 0.7, color: '#2378f7' },
+                  { offset: 1, color: '#83bff6' },
+                ]),
+              },
+            },
+            data: data,
+          },
+        ],
+      })
     },
-};
+  },
+}
 </script>
 <style lang="scss" scoped>
-.dashbord-line {
-    margin: 20px 0;
-    padding: 20px;
+.dashbord-line-box {
+  padding: 20px;
+  .dashbord-line {
     background-color: #fff;
+    height: 360px;
+    width: calc(100% - 40px);
+  }
+  .dashbord-line-title {
+    color: rgb(56, 137, 206);
+    font-size: 18px;
+  }
 }
-</style>
+</style>

web/src/components/dashbordTable/dashbordTable.vue

@@ -1,56 +1,53 @@
 <template>
-    <div class="commit-table">
-        <div class="commit-table-title">Gva 仓库commit 记录</div>
-        <el-table :data="dataTimeline" style="width: 100%" v-loading="loading">
-        <el-table-column prop="from" show-overflow-tooltip label="日期" width="180"></el-table-column>
-        <el-table-column prop="title" show-overflow-tooltip label="推送者" width="120"></el-table-column>
-        <el-table-column prop="message" show-overflow-tooltip label="commit 信息"></el-table-column>
+  <div class="commit-table">
+    <div class="commit-table-title">Gva 仓库commit 记录</div>
+    <el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
+      <el-table-column prop="from" show-overflow-tooltip label="日期" width="180" />
+      <el-table-column prop="title" show-overflow-tooltip label="推送者" width="120" />
+      <el-table-column prop="message" show-overflow-tooltip label="commit 信息" />
     </el-table>
-    </div>
+  </div>
 </template>
 
 <script>
 import { Commits } from '@/api/github'
 export default {
-    data() {
-        return {
-            loading: true,
-            dataTimeline: [],
-        }
-    },
-    created() {
-        this.loadCommits()
-    },
-    methods: {
-        loadCommits() {
-            Commits(0).then(({ data }) => {
-                this.loading = false
-                data.forEach((element , index) => {
-                    if (element.commit.message && index < 6) {
-                        this.dataTimeline.push({
-                            from: new Date(element.commit.author.date),
-                            title: element.commit.author.name,
-                            showDayAndMonth: true,
-                            message: element.commit.message,
-                        })
-                    }
-                })
-            })
-        },
+  data() {
+    return {
+      loading: true,
+      dataTimeline: [],
     }
+  },
+  created() {
+    this.loadCommits()
+  },
+  methods: {
+    loadCommits() {
+      Commits(0).then(({ data }) => {
+        this.loading = false
+        data.forEach((element, index) => {
+          if (element.commit.message && index < 6) {
+            this.dataTimeline.push({
+              from: new Date(element.commit.author.date),
+              title: element.commit.author.name,
+              showDayAndMonth: true,
+              message: element.commit.message,
+            })
+          }
+        })
+      })
+    },
+  }
 }
 </script>
 <style lang="scss" scoped>
 .commit-table{
-    margin: 20px 0;
     padding: 20px;
     background-color: #fff;
     height: 400px;
     &-title{
         color: rgb(56,137,206);
         font-size: 18px;
-        margin: 20px 0;
-
     }
 }
-</style>
+</style>

web/src/view/dashboard/index.vue

@@ -1,152 +1,151 @@
 <template>
-    <div class="page">
-        <div class="mycard dashbord1">
-            <div class="dashbord1-left">
-                <div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
-                <div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
-                <div class="dashbord1-left-rows">
-                    <el-row :gutter="20">
-                        <el-col :span="8" :xs="24" :sm="8">
-                            <div class="flex-center">
-                                <i class="el-icon-sort icon"></i>今日流量 (1231231)
-                            </div>
-                        </el-col>
-                        <el-col :span="8" :xs="24" :sm="8">
-                            <div class="flex-center">
-                                <i class="el-icon-s-custom icon"></i>总用户数 (24001)
-                            </div>
-                        </el-col>
-                        <el-col :span="8" :xs="24" :sm="8">
-                            <div class="flex-center">
-                                <i class="el-icon-s-comment icon"></i>好评率 (99%)
-                            </div>
-                        </el-col>
-                    </el-row>
-                </div>
-            </div>
-            <img src="@/assets/dashbord.png" class="dashbord1-right" alt />
+  <div class="page">
+    <div class="mycard dashbord1">
+      <div class="dashbord1-left">
+        <div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
+        <div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
+        <div class="dashbord1-left-rows">
+          <el-row :gutter="20">
+            <el-col :span="8" :xs="24" :sm="8">
+              <div class="flex-center">
+                <i class="el-icon-sort icon" />今日流量 (1231231)
+              </div>
+            </el-col>
+            <el-col :span="8" :xs="24" :sm="8">
+              <div class="flex-center">
+                <i class="el-icon-s-custom icon" />总用户数 (24001)
+              </div>
+            </el-col>
+            <el-col :span="8" :xs="24" :sm="8">
+              <div class="flex-center">
+                <i class="el-icon-s-comment icon" />好评率 (99%)
+              </div>
+            </el-col>
+          </el-row>
         </div>
-        <div class="mycard dashbord2">
-            <div>
-                <div class="dashbord2-item">
-                    使用教学：
-                    <a
-                        style="color:#409EFF"
-                        target="view_window"
-                        href="https://www.bilibili.com/video/BV1Rg411u7xH/"
-                    >https://www.bilibili.com/video/BV1Rg411u7xH</a>
-                </div>
-                <div class="dashbord2-item">
-                    插件仓库：
-                    <a
-                        style="color:#409EFF"
-                        target="view_window"
-                        href="https://github.com/flipped-aurora/gva-plugins"
-                    >https://github.com/flipped-aurora/gva-plugins</a>
-                </div>
-            </div>
+      </div>
+      <img src="@/assets/dashbord.png" class="dashbord1-right" alt>
+    </div>
+    <div class="mycard dashbord2">
+      <div>
+        <div class="dashbord2-item">
+          使用教学：
+          <a
+            style="color:#409EFF"
+            target="view_window"
+            href="https://www.bilibili.com/video/BV1Rg411u7xH/"
+          >https://www.bilibili.com/video/BV1Rg411u7xH</a>
         </div>
+        <div class="dashbord2-item">
+          插件仓库：
+          <a
+            style="color:#409EFF"
+            target="view_window"
+            href="https://github.com/flipped-aurora/gva-plugins"
+          >https://github.com/flipped-aurora/gva-plugins</a>
+        </div>
+      </div>
+    </div>
 
-            <el-card class="mycard quick-entrance">
-                <template #header>
-                    <div class="card-header">
-                        <span>快捷入口</span>
-                    </div>
-                </template>
-                 <el-row :gutter="20">
-                <el-col
-                    v-for="(card, key) in toolCards"
-                    :key="key"
-                    :span="4"
-                    :xs="8"
-                    @click="toTarget(card.name)"
-                    class="quick-entrance-items"
-                >
-                    <div class="quick-entrance-item">
-                        <div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
-                            <i :class="card.icon" :style="{ color: card.color }" />
-                        </div>
-                        <p>{{ card.label }}</p>
-                    </div>
-                </el-col>
-            </el-row>
-            </el-card>
-            <!-- <div class="quick-entrance-title"></div> -->
-        
-
-        <div class="mycard">
-            <el-row :gutter="0">
-                <el-col :xs="24" :sm="16">
-                    <echarts-line></echarts-line>
-                </el-col>
-                <el-col :xs="24" :sm="8">
-                    <dashbord-table></dashbord-table>
-                </el-col>
-            </el-row>
+    <el-card class="mycard quick-entrance">
+      <template #header>
+        <div class="card-header">
+          <span>快捷入口</span>
         </div>
+      </template>
+      <el-row :gutter="20">
+        <el-col
+          v-for="(card, key) in toolCards"
+          :key="key"
+          :span="4"
+          :xs="8"
+          class="quick-entrance-items"
+          @click="toTarget(card.name)"
+        >
+          <div class="quick-entrance-item">
+            <div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
+              <i :class="card.icon" :style="{ color: card.color }" />
+            </div>
+            <p>{{ card.label }}</p>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+    <!-- <div class="quick-entrance-title"></div> -->
+
+    <div class="mycard">
+      <el-row :gutter="0">
+        <el-col :xs="24" :sm="16">
+          <echarts-line />
+        </el-col>
+        <el-col :xs="24" :sm="8">
+          <dashbord-table />
+        </el-col>
+      </el-row>
     </div>
+  </div>
 </template>
 <script>
 import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
 import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
 export default {
-    components: {
-        echartsLine,
-        dashbordTable
-    },
-    data() {
-        return {
-            toolCards: [
-                {
-                    label: '用户管理',
-                    icon: 'el-icon el-icon-monitor',
-                    name: 'user',
-                    color: '#ff9c6e',
-                    bg: 'rgba(255, 156, 110,.3)'
-                },
-                {
-                    label: '角色管理',
-                    icon: 'el-icon el-icon-setting',
-                    name: 'authority',
-                    color: '#69c0ff',
-                    bg: 'rgba(105, 192, 255,.3)'
-                },
-                {
-                    label: '菜单管理',
-                    icon: 'el-icon el-icon-menu',
-                    name: 'menu',
-                    color: '#b37feb',
-                    bg: 'rgba(179, 127, 235,.3)'
-                },
-                {
-                    label: '代码生成器',
-                    icon: ' el-icon-cpu',
-                    name: 'autoCode',
-                    color: '#ffd666',
-                    bg: 'rgba(255, 214, 102,.3)'
-                },
-                {
-                    label: '表单生成器',
-                    icon: 'el-icon-document-checked',
-                    name: 'formCreate',
-                    color: '#ff85c0',
-                    bg: 'rgba(255, 133, 192,.3)'
-                },
-                {
-                    label: '关于我们',
-                    icon: ' el-icon-user',
-                    name: 'about',
-                    color: '#5cdbd3',
-                    bg: 'rgba(92, 219, 211,.3)'
-                }
-            ]
-        }
-    },
-    methods: {
-        toTarget(name) {
-            this.$router.push({ name })
+  components: {
+    echartsLine,
+    dashbordTable
+  },
+  data() {
+    return {
+      toolCards: [
+        {
+          label: '用户管理',
+          icon: 'el-icon el-icon-monitor',
+          name: 'user',
+          color: '#ff9c6e',
+          bg: 'rgba(255, 156, 110,.3)'
+        },
+        {
+          label: '角色管理',
+          icon: 'el-icon el-icon-setting',
+          name: 'authority',
+          color: '#69c0ff',
+          bg: 'rgba(105, 192, 255,.3)'
+        },
+        {
+          label: '菜单管理',
+          icon: 'el-icon el-icon-menu',
+          name: 'menu',
+          color: '#b37feb',
+          bg: 'rgba(179, 127, 235,.3)'
+        },
+        {
+          label: '代码生成器',
+          icon: ' el-icon-cpu',
+          name: 'autoCode',
+          color: '#ffd666',
+          bg: 'rgba(255, 214, 102,.3)'
+        },
+        {
+          label: '表单生成器',
+          icon: 'el-icon-document-checked',
+          name: 'formCreate',
+          color: '#ff85c0',
+          bg: 'rgba(255, 133, 192,.3)'
+        },
+        {
+          label: '关于我们',
+          icon: ' el-icon-user',
+          name: 'about',
+          color: '#5cdbd3',
+          bg: 'rgba(92, 219, 211,.3)'
         }
+      ]
+    }
+  },
+  methods: {
+    toTarget(name) {
+      this.$router.push({ name })
     }
+  }
 }
 </script>
 
@@ -277,4 +276,4 @@ export default {
         }
     }
 }
-</style>
+</style>