导航页面列表

config/dev.env.js

 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  BASE_API: '"https://api-dev"'
+  QA_API: '"http://172.30.220.22:3003"'
 }

config/prod.env.js

 module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG: '"prod"',
-  BASE_API: '"https://api-prod"'
+  QA_API: '"http://172.30.220.22:3003"'
 }

src/api/indexurl.js

+import request from '@/utils/request'
+
+export function getIndexUrl() {
+  return request({
+    url: '/indexurl/get_index_url',
+    method: 'get'
+  })
+}

src/lang/zh.js

 export default {
   route: {
+    indexList: '导航页面列表',
+    runEnv: '运行中环境',
+
     dashboard: '首页',
     introduction: '简述',
     documentation: '文档',

src/router/index.js

@@ -77,6 +77,19 @@ export const constantRouterMap = [
       }
     ]
   },
+  {
+    path: '',
+    component: Layout,
+    redirect: 'indexList',
+    children: [
+      {
+        path: 'indexList',
+        component: () => import('@/views/index/index'),
+        name: 'indexList',
+        meta: { title: 'indexList', icon: 'dashboard', noCache: true, affix: true }
+      }
+    ]
+  },
   {
     path: '/documentation',
     component: Layout,

src/utils/request.js

@@ -5,7 +5,7 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.BASE_API, // api 的 base_url
+  baseURL: process.env.QA_API,
   timeout: 5000 // request timeout
 })
 

src/views/index/index.vue

+<template>
+  <div class="mixin-components-container" >
+    <el-row v-for="item in indexList" :value="item.name" :key="item.name" style="margin-bottom:5px;">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>{{ item.name }}</span>
+        </div>
+        <div style="margin-bottom:30px;">
+          <el-col v-for="data in item.data" :key="data.remark" :span="5" class="text-center" style="margin-bottom:10px;">
+            <Button :class="`pan-btn ${item.color}-btn`" style="padding:10px;" @click="openNewWindow(data.url)">{{ data.remark }}</Button>
+          </el-col>
+        </div>
+      </el-card>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import { getIndexUrl } from '@/api/indexurl'
+
+export default {
+  data() {
+    return {
+      indexList: [],
+      color: ['blue', 'light-blue', 'pink', 'green', 'tiffany', 'yellow']
+    }
+  },
+  created() {
+    getIndexUrl().then(res => {
+      this.indexList = res.data.data
+      for (const i in this.indexList) {
+        this.indexList[i].color = this.color[i]
+      }
+    }).catch(err => {
+      console.log(err)
+    })
+  },
+  methods: {
+    openNewWindow(l) {
+      l = l.indexOf('http') ? 'http://' + l : l
+      window.open(l)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mixin-components-container {
+  background-color: #f0f2f5;
+  padding: 30px;
+  min-height: calc(100vh - 84px);
+}
+.component-item{
+  min-height: 100px;
+}
+</style>