feat: 布局调整

package.json

@@ -49,7 +49,7 @@
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
-    "src/*.{js,vue}": [
+    "*.{js,vue}": [
       "vue-cli-service lint",
       "git add"
     ]

pageconfig.js

@@ -29,7 +29,7 @@ const config = {
           clickEvent: ''
         }
       ]
-    },
+    }
   },
   queryForm: {
     fields: [
@@ -113,41 +113,3 @@ const config = {
     }
   }
 }
-{
-  "id": "id5",
-  "component": "TabBar",
-  "attributes": {
-    "activecolor": "#E94A46",
-    "color": "#a6a6a6",
-    "selected": "index",
-    "tabs": [
-      {
-        "icon": "https://asset.ibanquan.com/image/606291637ce87300241c4546/s.png",
-        "name": "index",
-        "title": "首页",
-        "activeIcon": "https://asset.ibanquan.com/image/606291627ce87300151c3dc5/s.png"
-      },
-      {
-        "icon": "https://asset.ibanquan.com/image/6062915ed465a50015e45488/s.png",
-        "name": "products",
-        "title": "商品",
-        "activeIcon": "https://asset.ibanquan.com/image/6062915ed465a50015e45485/s.png"
-      },
-      {
-        "icon": "https://asset.ibanquan.com/image/60629160d465a50024e4513c/s.png",
-        "name": "cart",
-        "title": "购物车",
-        "activeIcon": "https://asset.ibanquan.com/image/6062915f7ce87300241c4539/s.png"
-      },
-      {
-        "icon": "https://asset.ibanquan.com/image/60629162d465a50024e4513f/s.png",
-        "name": "account",
-        "title": "个人中心",
-        "activeIcon": "https://asset.ibanquan.com/image/606291617ce87300241c4543/s.png"
-      }
-    ]
-  },
-  "extra": {
-    "xIndex": 2
-  }
-}

src/layouts/DefaultLayout/DefaultSide/Logo.vue → src/layouts/DefaultLayout/DefaultHeader/Logo.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-07 15:47:20
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-10 16:19:33
+ * @LastEditTime: 2021-08-19 17:25:52
  * @Description:
 -->
 <template>
@@ -28,10 +28,11 @@
         class="sidebar-logo-link"
         to="/"
       >
-        <img
+        <!-- <img
           src="/favicon.ico"
           class="sidebar-logo"
-        >
+        > -->
+        <i class="el-icon-orange sidebar-logo" />
         <h1 class="sidebar-title">
           {{ title }}
         </h1>
@@ -65,13 +66,11 @@ export default {
 
 .sidebar-logo-container {
   position: relative;
-  width: 100%;
   height: 59px;
   line-height: 59px;
   background: #fff;
   text-align: center;
   overflow: hidden;
-  border-bottom: 1px solid #dcdee2;
 
   & .sidebar-logo-link {
     height: 100%;
@@ -80,14 +79,16 @@ export default {
     & .sidebar-logo {
       width: 32px;
       height: 32px;
+      font-size: 32px;
       vertical-align: middle;
       margin-right: 12px;
+      color: #1890ff;
     }
 
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #000;
+      color: #1890ff;
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;

src/layouts/DefaultLayout/DefaultHeader/index.vue

@@ -2,29 +2,48 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-06 17:52:07
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-10 16:19:50
+ * @LastEditTime: 2021-08-19 16:42:20
  * @Description:
 -->
 <template>
   <el-header class="layout-header">
-    <span>绘管家</span>
+    <logo
+      title="绘开发"
+    />
+    <span>
+      <span class="name">wjc</span><el-avatar icon="el-icon-user-solid" />
+    </span>
   </el-header>
 </template>
 
 <script>
+import Logo from './Logo'
 
 export default {
-  name: 'DeafultHeader'
+  name: 'DeafultHeader',
+  components: {
+    Logo
+  }
 }
 </script>
 
 <style lang="less">
   .layout-header {
+    display: flex;
+    justify-content: space-between;
     width: 100%;
     background-color: #fff;
-    border-bottom: 1px solid #dcdee2;
+    // border-bottom: 1px solid #dcdee2;
+    box-shadow: 0 2px 4px rgba(0,0,0, .1);
     color: #333;
     line-height: 60px;
     text-align: right;
+    z-index: 101;
+    .name {
+      margin-right: 8px;
+    }
+    span {
+      vertical-align: middle;
+    }
   }
 </style>

src/layouts/DefaultLayout/DefaultSide/SideItem.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-07 16:07:56
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-07-09 14:39:57
+ * @LastEditTime: 2021-08-19 17:24:32
  * @Description:
 -->
 <template>
@@ -65,7 +65,10 @@ export default {
     SideItemLink
   },
   props: {
-    isCollapse: Boolean,
+    isCollapse: {
+      type: Boolean,
+      default: true
+    },
     basePath: String,
     isFirstLevel: {
       type: Boolean,

src/layouts/DefaultLayout/DefaultSide/index.vue

@@ -2,21 +2,17 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-06 17:57:16
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-07-09 14:37:28
+ * @LastEditTime: 2021-08-19 18:14:04
  * @Description:
 -->
 <template>
   <el-aside
     class="layout-aside"
-    :width="isCollapse ? '64px' : '210px'"
+    :width="isCollapse ? '65px' : '210px'"
   >
-    <logo
-      title="绘开发"
-      :collapse="isCollapse"
-    />
-    <span @click="handleCollapse">
+    <!-- <span @click="handleCollapse">
       <i :class="`${isCollapse ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'}`" />
-    </span>
+    </span> -->
     <el-scrollbar>
       <el-menu
         :collapse="isCollapse"
@@ -36,18 +32,16 @@
 <script>
 import { routes } from '@/router'
 
-import Logo from './Logo'
 import SideItem from './SideItem'
 
 export default {
   name: 'DeafultSide',
   components: {
-    Logo,
     SideItem
   },
   data() {
     return {
-      isCollapse: false
+      isCollapse: true
     }
   },
   computed: {
@@ -65,10 +59,9 @@ export default {
 
 <style lang="less">
  .layout-aside.el-aside {
-   width: 210px;
-   background-color: rgb(238, 241, 246);
+   width: 21px;
    .el-scrollbar {
-     height: calc(100% - 60px);
+     height: 100%;
      .el-scrollbar__view {
        height: 100%;
       .el-menu {

src/layouts/DefaultLayout/index.vue

@@ -2,18 +2,20 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-06 17:24:30
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-07-09 16:50:53
+ * @LastEditTime: 2021-08-19 16:58:01
  * @Description:
 -->
 <template>
   <el-container class="default-layout">
-    <default-side />
     <el-container class="is-vertical">
       <default-header />
       <el-main class="layout-main">
-        <keep-alive>
-          <router-view :key="$route.fullPath" />
-        </keep-alive>
+        <default-side />
+        <div style="width: 100%">
+          <keep-alive>
+            <router-view :key="$route.fullPath" />
+          </keep-alive>
+        </div>
       </el-main>
     </el-container>
   </el-container>
@@ -52,6 +54,8 @@ export default {
   }
   .layout-main {
     width: 100%;
+    display: flex;
+    justify-self: space-between;
     height: calc(100% - 60px);
     padding: 0;
     background: #fff;

src/views/dashboard/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-05-07 12:09:58
  * @LastEditors: WangJiaCheng
- * @LastEditTime: 2021-05-10 17:33:16
+ * @LastEditTime: 2021-08-20 10:38:59
  * @Description:
 -->
 <template>
@@ -11,20 +11,16 @@
       <div class="entry-row">
         <div
           class="entry-item"
-          @click="handleCreate('page')"
         >
-          <span>新建页面</span>
+          <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 :span="12" class="entry-item" @click="handleCreate('page')">
+          代码生成
         </div>
       </div>
     </div>
@@ -49,7 +45,6 @@ export default {
 </script>
 
 <style lang="less">
-  @base: #1890ff;
   .entry {
     margin: 20px auto;
     width: 90%;
@@ -61,13 +56,14 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
+        border: 1px solid #f0f0f0;
         margin: 10px;
         border-radius: 4px;
         height: 200px;
         width: 400px;
         cursor: pointer;
         font-size: 20px;
-        background: spin(lighten(@base, 25%), 8);
+        // background: spin(lighten(@base, 25%), 8);
       }
     }
   }

src/views/editor/index.vue

@@ -0,0 +1,7 @@
+<!--
+ * @Author: WangJiaCheng
+ * @Date: 2021-08-20 09:10:36
+ * @LastEditors: WangJiaCheng
+ * @LastEditTime: 2021-08-20 09:10:37
+ * @Description: 编辑器
+-->