feat: 页面菜单开发

src/components/Headers/index.vue

@@ -0,0 +1,22 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-10 16:28:07
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-10 16:28:56
+ * @Description:
+-->
+<template>
+  <div>
+    123
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Headers'
+}
+</script>
+
+<style lang="less">
+
+</style>

src/components/Icon/index.js

@@ -0,0 +1,17 @@
+/*
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-08 15:26:50
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-08 15:32:10
+ * @Description: Icon component
+ */
+import { createIconFont } from 'wisdom-ui/lib/icon'
+
+const IconFonts = createIconFont({
+  name: 'Icon',
+  fontClass: 'hui-icon',
+  className: 'hui-kai-fa',
+  scriptUrl: ['//at.alicdn.com/t/font_1864491_f2kcaixrs5t.js']
+})
+
+export default IconFonts

src/layouts/DefaultLayout/DefaultHeader/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-06 17:52:07
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-08 11:15:04
+ * @LastEditTime: 2021-05-10 16:19:50
  * @Description:
 -->
 <template>
@@ -21,5 +21,10 @@ export default {
 <style lang="less">
   .layout-header {
     width: 100%;
+    background-color: #fff;
+    border-bottom: 1px solid #dcdee2;
+    color: #333;
+    line-height: 60px;
+    text-align: right;
   }
 </style>

src/layouts/DefaultLayout/DefaultSide/Logo.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-07 15:47:20
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-07 16:56:14
+ * @LastEditTime: 2021-05-10 16:19:33
  * @Description:
 -->
 <template>
@@ -66,11 +66,12 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 60px;
-  line-height: 50px;
-  background: #2b2f3a;
+  height: 59px;
+  line-height: 59px;
+  background: #fff;
   text-align: center;
   overflow: hidden;
+  border-bottom: 1px solid #dcdee2;
 
   & .sidebar-logo-link {
     height: 100%;
@@ -86,7 +87,7 @@ export default {
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      color: #000;
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;

src/layouts/DefaultLayout/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-06 17:24:30
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-08 09:03:08
+ * @LastEditTime: 2021-05-10 16:15:51
  * @Description:
 -->
 <template>
@@ -46,11 +46,6 @@ export default {
     width: 100%;
     height: 100%;
   }
-  .el-header {
-    background-color: #B3C0D1;
-    color: #333;
-    line-height: 60px;
-  }
   .el-aside {
     color: #333;
   }

src/main.js

@@ -2,12 +2,14 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-07 11:34:26
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-07 17:46:37
+ * @LastEditTime: 2021-05-08 15:29:03
  * @Description:  入口
  */
 import Vue from 'vue'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import WisdomUI from 'wisdom-ui'
+import 'wisdom-ui/lib/theme/index.css'
 
 import App from './App.vue'
 import router from '@/router'
@@ -22,6 +24,7 @@ Vue.config.productionTip = false
 Vue.prototype.$axios = axios
 
 Vue.use(ElementUI, { size: 'small' })
+Vue.use(WisdomUI)
 
 new Vue({
   router,

src/router/index.js

@@ -3,6 +3,18 @@ import VueRouter from 'vue-router'
 
 import DefaultLayout from '@/layouts/DefaultLayout/index.vue'
 
+import page from './modules/page'
+import form from './modules/form'
+import template from './modules/template'
+import list from './modules/list'
+
+// 全局处理路由导航重复
+const originalPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
+
 Vue.use(VueRouter)
 
 export const routes = [
@@ -23,84 +35,10 @@ export const routes = [
       }
     ]
   },
-  {
-    path: '/template',
-    component: DefaultLayout,
-    redirect: '/list',
-    meta: {
-      title: '模板管理'
-    },
-    children: [
-      {
-        path: 'list',
-        name: 'templateList',
-        meta: {
-          title: '模板列表'
-        },
-        component: () => import('@/views/Template/List/index.vue')
-      }
-    ]
-  },
-  {
-    path: '/form',
-    component: DefaultLayout,
-    redirect: '/design',
-    meta: {
-      title: '表单管理'
-    },
-    children: [
-      {
-        path: 'design',
-        name: 'formDesign',
-        meta: {
-          title: '表单设计'
-        },
-        component: () => import('@/views/Form/FormDesign/Home.vue')
-      },
-      {
-        path: 'model',
-        name: 'formModel',
-        meta: {
-          title: '表单模型'
-        },
-        component: () => import('@/views/Form/FormModel/index.vue')
-      },
-      {
-        path: '/parser',
-        name: 'parser',
-        meta: {
-          title: '表单解析'
-        },
-        component: () => import(/* webpackChunkName: "parser-example" */'@/components/parser/example/Index.vue')
-      }
-    ]
-  },
-  {
-    path: '/list',
-    component: DefaultLayout,
-    redirect: '/design',
-    meta: {
-      title: '列表管理'
-    },
-    children: [
-      {
-        path: 'design',
-        name: 'listDesign',
-        meta: {
-          title: '列表设计'
-        },
-        component: () => import('@/views/List/ListDesign/index.vue')
-      },
-      {
-        path: 'model',
-        name: 'listModel',
-        meta: {
-          title: '列表模型'
-        },
-        component: () => import('@/views/List/ListModel/index.vue')
-      }
-    ]
-  },
+  ...page,
+  ...template,
+  ...form,
+  ...list,
   {
     path: '/tinymce',
     name: 'tinymce',

src/router/modules/form.js

@@ -0,0 +1,47 @@
+/*
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-10 16:31:41
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-10 16:38:49
+ * @Description:
+ */
+import DefaultLayout from '@/layouts/DefaultLayout/index.vue'
+
+const form = [
+  {
+    path: '/form',
+    component: DefaultLayout,
+    redirect: '/design',
+    meta: {
+      title: '表单管理'
+    },
+    children: [
+      {
+        path: 'design',
+        name: 'formDesign',
+        meta: {
+          title: '表单设计'
+        },
+        component: () => import('@/views/Form/FormDesign/Home.vue')
+      },
+      {
+        path: 'model',
+        name: 'formModel',
+        meta: {
+          title: '表单模型'
+        },
+        component: () => import('@/views/Form/FormModel/index.vue')
+      },
+      {
+        path: '/parser',
+        name: 'parser',
+        meta: {
+          title: '表单解析'
+        },
+        component: () => import(/* webpackChunkName: "parser-example" */'@/components/parser/example/Index.vue')
+      }
+    ]
+  }
+]
+
+export default form

src/router/modules/list.js

@@ -0,0 +1,39 @@
+/*
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-10 16:30:59
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-10 16:38:07
+ * @Description:
+ */
+import DefaultLayout from '@/layouts/DefaultLayout/index.vue'
+
+const list = [
+  {
+    path: '/list',
+    component: DefaultLayout,
+    redirect: '/design',
+    meta: {
+      title: '列表管理'
+    },
+    children: [
+      {
+        path: 'design',
+        name: 'listDesign',
+        meta: {
+          title: '列表设计'
+        },
+        component: () => import('@/views/List/ListDesign/index.vue')
+      },
+      {
+        path: 'model',
+        name: 'listModel',
+        meta: {
+          title: '列表模型'
+        },
+        component: () => import('@/views/List/ListModel/index.vue')
+      }
+    ]
+  }
+]
+
+export default list

src/router/modules/page.js

@@ -0,0 +1,36 @@
+/*
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-10 16:51:21
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-10 17:29:09
+ * @Description:
+ */
+import DefaultLayout from '@/layouts/DefaultLayout/index.vue'
+
+const page = [
+  {
+    path: '/page',
+    component: DefaultLayout,
+    redirect: '/list',
+    meta: {
+      title: '页面管理'
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'pageList',
+        meta: {
+          title: '页面列表'
+        },
+        component: () => import('@/views/Page/List/index.vue')
+      },
+      {
+        path: 'edit/:type',
+        name: 'pageEdit',
+        component: () => import('@/views/Page/Edit/index.vue')
+      }
+    ]
+  }
+]
+
+export default page

src/router/modules/template.js

@@ -0,0 +1,31 @@
+/*
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-10 16:30:19
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-10 16:37:37
+ * @Description:
+ */
+import DefaultLayout from '@/layouts/DefaultLayout/index.vue'
+
+const template = [
+  {
+    path: '/template',
+    component: DefaultLayout,
+    redirect: '/list',
+    meta: {
+      title: '模板管理'
+    },
+    children: [
+      {
+        path: 'list',
+        name: 'templateList',
+        meta: {
+          title: '模板列表'
+        },
+        component: () => import('@/views/Template/List/index.vue')
+      }
+    ]
+  }
+]
+
+export default template

src/views/Page/Edit/index.vue

@@ -0,0 +1,16 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-10 17:25:15
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-10 17:25:34
+ * @Description:
+-->
+<template>
+  <div>页面编辑</div>
+</template>
+
+<script>
+export default {
+  name: 'PageEdit'
+}
+</script>

src/views/Page/List/index.vue

@@ -0,0 +1,16 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-05-10 17:23:22
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-05-10 17:23:45
+ * @Description:
+-->
+<template>
+  <div>页面列表</div>
+</template>
+
+<script>
+export default {
+  name: 'PageList'
+}
+</script>

src/views/dashboard/index.vue

@@ -2,17 +2,73 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-07 12:09:58
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-07 12:10:29
+ * @LastEditTime: 2021-05-10 17:33:16
  * @Description:
 -->
 <template>
-  <div>
-    dashboard
+  <div class="dashboard">
+    <div class="entry">
+      <div class="entry-row">
+        <div
+          class="entry-item"
+          @click="handleCreate('page')"
+        >
+          <span>新建页面</span>
+        </div>
+        <div :span="12" class="entry-item">
+          新建模板
+        </div>
+      </div>
+      <div class="entry-row">
+        <div :span="12" class="entry-item">
+          新建表单
+        </div>
+        <div :span="12" class="entry-item">
+          新建列表
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'DashBoard'
+  name: 'DashBoard',
+  data() {
+    return {}
+  },
+  methods: {
+    handleCreate(type) {
+      this.$router.push({
+        name: `${type}Edit`,
+        params: { type: 'create' }
+      })
+    }
+  }
 }
 </script>
+
+<style lang="less">
+  @base: #1890ff;
+  .entry {
+    margin: 20px auto;
+    width: 90%;
+    max-width: 900px;
+    .entry-row {
+      display: flex;
+      justify-content: center;
+      .entry-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 10px;
+        border-radius: 4px;
+        height: 200px;
+        width: 400px;
+        cursor: pointer;
+        font-size: 20px;
+        background: spin(lighten(@base, 25%), 8);
+      }
+    }
+  }
+</style>