From d3d8e82b0b2dc3bd85c4152ebb095b72af8b4d09 Mon Sep 17 00:00:00 2001
From: wangqing <smalljop@foxmail.com>
Date: Wed, 26 May 2021 18:45:58 +0800
Subject: [PATCH] fix

---
 src/assets/styles/btn.scss                    |   2 +-
 src/assets/styles/form/home.scss              |   2 +-
 src/assets/styles/form/index.scss             |   2 +-
 src/assets/styles/form/mixin.scss             |   2 +-
 src/assets/styles/index.scss                  |   7 +-
 .../{ => resources}/element-variables.scss    |   2 +-
 .../styles/{ => resources}/variables.scss     |   0
 src/router/modules/root.js                    |  33 +-
 src/views/home/NewIndex.vue                   | 297 ++++++++++++------
 src/views/home/index.vue                      |   8 -
 src/views/project/MyProject.vue               |   6 +-
 src/views/project/RecycleBin.vue              |   8 +-
 .../project/{create.vue => template.vue}      |  17 -
 13 files changed, 241 insertions(+), 145 deletions(-)
 rename src/assets/styles/{ => resources}/element-variables.scss (90%)
 rename src/assets/styles/{ => resources}/variables.scss (100%)
 rename src/views/project/{create.vue => template.vue} (93%)

diff --git a/src/assets/styles/btn.scss b/src/assets/styles/btn.scss
index 5bfbf5d..046afcc 100644
--- a/src/assets/styles/btn.scss
+++ b/src/assets/styles/btn.scss
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import 'resources/variables';
 @mixin colorBtn($color) {
     background: $color;
     &:hover {
diff --git a/src/assets/styles/form/home.scss b/src/assets/styles/form/home.scss
index c1a46c4..fb5511d 100644
--- a/src/assets/styles/form/home.scss
+++ b/src/assets/styles/form/home.scss
@@ -1,4 +1,4 @@
-@import '../element-variables.scss';
+@import '../resources/element-variables';
 $selectedColor: rgba(24, 144, 255, 0.05);
 $lighterBlue: #1890ff;
 .form-edit-container {
diff --git a/src/assets/styles/form/index.scss b/src/assets/styles/form/index.scss
index 5e04dc4..c4d2244 100644
--- a/src/assets/styles/form/index.scss
+++ b/src/assets/styles/form/index.scss
@@ -1,4 +1,4 @@
-@import '../element-variables.scss';
+@import '../resources/element-variables';
 $editorTabsborderColor: #121315;
 body,
 html {
diff --git a/src/assets/styles/form/mixin.scss b/src/assets/styles/form/mixin.scss
index 01e78b5..8f65522 100644
--- a/src/assets/styles/form/mixin.scss
+++ b/src/assets/styles/form/mixin.scss
@@ -1,4 +1,4 @@
-@import '../element-variables.scss';
+@import '../resources/element-variables';
 @mixin action-bar {
     .action-bar {
         height: 33px;
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 749fa8d..af5d1d4 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1,8 +1,9 @@
-@import './variables.scss';
+@import './resources/variables';
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
 @import './btn.scss';
+@import "./resources/element-variables";
 body {
     height: 100%;
     margin: 0;
@@ -102,6 +103,10 @@ div:focus {
 .width-full {
     width: 100% !important;
 }
+.width80 {
+    width: 80% !important;
+    margin: 0 auto;
+}
 .text-overflow {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/assets/styles/element-variables.scss b/src/assets/styles/resources/element-variables.scss
similarity index 90%
rename from src/assets/styles/element-variables.scss
rename to src/assets/styles/resources/element-variables.scss
index e594cfa..e114288 100644
--- a/src/assets/styles/element-variables.scss
+++ b/src/assets/styles/resources/element-variables.scss
@@ -21,7 +21,7 @@ $--table-border: 1px solid #dfe6ec;
 
 /* icon font path, required */
 $--font-path: "~element-ui/lib/theme-chalk/fonts";
-@import "~element-ui/packages/theme-chalk/src/index";
+@import "../../../../node_modules/element-ui/packages/theme-chalk/src/index";
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/resources/variables.scss
similarity index 100%
rename from src/assets/styles/variables.scss
rename to src/assets/styles/resources/variables.scss
diff --git a/src/router/modules/root.js b/src/router/modules/root.js
index 80ad859..44c4e7c 100644
--- a/src/router/modules/root.js
+++ b/src/router/modules/root.js
@@ -51,11 +51,6 @@ export default [
             }
         ]
     },
-    // {
-    //     path: '/home1',
-    //     meta: {requireLogin: false},
-    //     component: () => import(/* webpackChunkName: 'root' */ '@/views/home/NewIndex')
-    // },
     {
         path: '/home',
         meta: {requireLogin: true},
@@ -64,7 +59,22 @@ export default [
             {
                 path: '/',
                 meta: {requireLogin: true},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/home/HomeView')
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/project/MyProject')
+            },
+            {
+                path: 'my',
+                meta: {requireLogin: true},
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/project/MyProject')
+            },
+            {
+                path: 'recycle',
+                meta: {requireLogin: true},
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/project/RecycleBin')
+            },
+            {
+                path: 'template',
+                meta: {requireLogin: true},
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/project/template.vue')
             },
             {
                 path: 'member',
@@ -80,18 +90,14 @@ export default [
             {
                 path: 'create',
                 meta: {requireLogin: true},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/project/create.vue')
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/project/template.vue')
             },
             {
                 path: 'my',
                 meta: {requireLogin: true},
                 component: () => import(/* webpackChunkName: 'root' */ '@/views/project/MyProject.vue')
             },
-            {
-                path: 'recycle',
-                meta: {requireLogin: true},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/project/RecycleBin.vue')
-            },
+
             {
                 path: 'template/preview',
                 meta: {requireLogin: true},
@@ -103,7 +109,8 @@ export default [
             //     component: () => import(/* webpackChunkName: 'root' */ '@/views/form/index1.vue')
             // }
         ]
-    }, {
+    },
+    {
         path: '/project/preview',
         meta: {requireLogin: false},
         component: () => import(/* webpackChunkName: 'root' */ '@/views/form/PreView.vue')
diff --git a/src/views/home/NewIndex.vue b/src/views/home/NewIndex.vue
index 23ae18f..2b0f9a8 100644
--- a/src/views/home/NewIndex.vue
+++ b/src/views/home/NewIndex.vue
@@ -1,64 +1,140 @@
 <template>
     <div class="home-container">
-        <div>
-            <div class="banner-container">
-                <el-carousel height="60px">
-                    <el-carousel-item v-for="item in 4" :key="item">
-                        <img style="height: 60px;" src="https://static.wenjuan.pub/1620698916041_333.jpg">
-                    </el-carousel-item>
-                </el-carousel>
-            </div>
-        </div>
-        <div class="flex-row">
-            <div class="left-container">
-                <div class="userinfo-view">
-                    <span class="hi-tips">HI.</span>
-                    <span class="name text-overflow">15080929435</span>
-                    <el-avatar class="avatar" size="small"
-                               src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/avatar.jpg"
-                    />
+        <el-container>
+            <el-header class="header-container" height="38">
+                <div>
+                    <img src="@/assets/images/indexLogo.png" class="header-logo-img"
+                         @click="$router.push({path:'/'})"
+                    >
                 </div>
-                <div class="menu-view">
-                    <div class="menu-item">
-                        <font-icon class="fas fa-laptop" />
-                        <span>工作台</span>
-                    </div>
-                    <div class="menu-item">
-                        <font-icon class="fas fa-clipboard" />
-                        <span>模板中心</span>
-                    </div>
-                    <div class="menu-item">
-                        <font-icon class="fas fa-user" />
-                        <span>个人中心</span>
-                    </div>
-                    <div class="menu-item">
-                        <font-icon class="fas fa-cog" />
-                        <span>系统设置</span>
-                    </div>
+                <div class="right-header">
+                    <el-popover
+                        placement="bottom-end"
+                        width="200"
+                        trigger="click"
+                    >
+                        <div class="user-person-menu">
+                            <div>
+                                <p v-if="getUserInfo" class="nick-name">{{ getUserInfo.name }}</p>
+                            </div>
+                            <div class="person-menu-divider" />
+                            <div>
+                                <p class="person-menu-item" @click="$router.push({path: '/home/member'})">
+                                    <font-icon class="fab fa-get-pocket" />
+                                    我的账户
+                                </p>
+                                <p class="person-menu-item">
+                                    <font-icon class="fas fa-envelope" />
+                                    站内信
+                                </p>
+                                <p class="person-menu-item">
+                                    <font-icon class="fas fa-user-circle" />
+                                    联系人
+                                </p>
+                                <div class="person-menu-divider" />
+                                <p class="person-menu-item" @click="logoutHandle">
+                                    <font-icon class="fas fa-sign-out" />
+                                    退出登录
+                                </p>
+                            </div>
+                        </div>
+                        <div slot="reference">
+                            <img v-if="getUserInfo" :src="getUserInfo.avatar" class="user-avatar">
+                        </div>
+                    </el-popover>
                 </div>
-            </div>
-            <div class="right-container">
-                <el-button type="primary" @click="createBlankTemplate">新建项目</el-button>
-                <el-button>新建项目</el-button>
-                <my-project />
-            </div>
-        </div>
-        <div class="about-container">
-            <font-icon class="fas fa-user" />
-            <span class="desc-text">关于填鸭</span>
-        </div>
+            </el-header>
+            <!--            <div class="banner-container">-->
+            <!--                <el-carousel height="60px">-->
+            <!--                    <el-carousel-item v-for="item in 4" :key="item">-->
+            <!--                        <img style="height: 60px;" src="https://static.wenjuan.pub/1620698916041_333.jpg">-->
+            <!--                    </el-carousel-item>-->
+            <!--                </el-carousel>-->
+            <!--            </div>-->
+            <el-container>
+                <el-aside width="280px">
+                    <el-card>
+                        <el-button class="width80" type="primary" @click="createBlankTemplate">新建项目</el-button>
+                        <div class="menu-view">
+                            <div v-for="menu in menuList" :key="menu.route"
+                                 :class="defaultActiveMenu==menu.route?'menu-item-active menu-item':'menu-item'"
+                                 @click="menuClickHandle(menu)"
+                            >
+                                <font-icon :class="menu.icon" />
+                                <span>{{ menu.name }}</span>
+                            </div>
+                        </div>
+                        <div class="text-center">
+                            <h5>加入社群</h5>
+                            <el-image
+                                style="width: 200px; height: 200px;"
+                                src="https://oss.smileyi.top/static/wx-qrcode.png"
+                                fit="fill"
+                            />
+                        </div>
+                    </el-card>
+                </el-aside>
+                <el-container>
+                    <el-main>
+                        <router-view />
+                    </el-main>
+                    <el-footer>
+                        <div class="about-container">
+                            <font-icon class="fas fa-user" />
+                            <span class="desc-text">关于填鸭</span>
+                        </div>
+                    </el-footer>
+                </el-container>
+            </el-container>
+        </el-container>
     </div>
 </template>
 
 <script>
-import MyProject from '@/views/project/MyProject'
 import {formConf} from '@/components/generator/config'
+import store from '@/store'
+import router from '@/router'
 
 export default {
     name: 'NewIndex',
-    components: {
-        MyProject
-    }, methods: {
+    components: {},
+    data() {
+        return {
+            defaultActiveMenu: '',
+            menuList: [
+                {
+                    route: '/home/my',
+                    name: '工作台',
+                    icon: 'fas fa-laptop'
+                },
+                {
+                    route: '/home/template',
+                    name: '模板中心',
+                    icon: 'fas fa-clipboard'
+                }, {
+                    route: '/home/recycle',
+                    name: '回收站',
+                    icon: 'fas fa-user'
+                }
+            ]
+        }
+    },
+    computed: {
+        getStore() {
+            return store
+        },
+        getUserInfo() {
+            let user = JSON.parse(this.getStore.getters['user/userInfo'])
+            return user
+        }
+    },
+    created() {
+        this.defaultActiveMenu = this.$route.path
+    },
+    methods: {
+        menuClickHandle(menu) {
+            this.$router.replace({path: menu.route})
+        },
         createBlankTemplate() {
             this.$api.post('/user/project/create', {
                 'describe': formConf.description,
@@ -67,6 +143,24 @@ export default {
                 console.log(res)
                 this.$router.push({path: '/project/form', query: {key: res.data}})
             })
+        },
+        logoutHandle() {
+            this.$confirm('您确定要退出登录吗？', '退出确认', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$store.dispatch('user/logout').then(() => {
+                    router.push({
+                        path: '/login',
+                        query: {
+                            redirect: router.currentRoute.fullPath
+                        }
+                    })
+                })
+            }).catch(() => {
+
+            })
         }
     }
 }
@@ -80,35 +174,23 @@ export default {
     width: 100%;
     flex-direction: column;
 }
-.banner-container {
-    height: 98px;
-}
-.left-container {
-    min-width: 280px;
-    height: 501px;
-    line-height: 20px;
-    border-radius: 2px;
-    margin: 0 89px;
-    text-align: center;
-    //border: 1px solid rgba(255, 255, 255, 100);
-    //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    padding-left: 20px;
-}
-.userinfo-view {
+.header-container {
     display: flex;
-    align-items: center;
-    height: 42px;
-    line-height: 42px;
-    background-color: rgba(255, 255, 255, 100);
-    .hi-tips {
-        font-size: 21px;
-        margin-left: 30px;
-    }
-    .name {
-        width: 100px;
+    justify-content: space-between;
+    background-color: #fff;
+    line-height: 38px;
+    height: 38px;
+    min-width: 1024px;
+    .header-logo-img {
+        width: 120px;
+        height: 35px;
+        float: left;
     }
-    .avatar {
-        margin-left: 10px;
+    .user-avatar {
+        width: 35px;
+        height: 35px;
+        border-radius: 100px;
+        cursor: pointer;
     }
 }
 .menu-view {
@@ -116,13 +198,25 @@ export default {
     height: 501px;
     background-color: rgba(255, 255, 255, 100);
     padding: 20px;
+    .menu-item-active {
+        color: $menuActiveText;
+    }
     .menu-item {
-        color: rgba(16, 16, 16, 100);
-        font-size: 20px;
+        color: #333;
+        font-size: 16px;
         text-align: left;
-        line-height: 40px;
+        line-height: 25px;
+        &:hover {
+            cursor: pointer;
+            color: $menuActiveText;
+        }
+        & .fas:hover {
+            color: $menuActiveText;
+        }
         .fas {
-            color: #1c7bf9;
+            display: inline-block;
+            width: 20px;
+            height: 20px;
             margin: 5px;
         }
         span {
@@ -130,24 +224,45 @@ export default {
         }
     }
 }
-.project-container {
-    display: flex;
-    flex-direction: row;
-    .project-item {
-        display: flex;
+.banner-container {
+    height: 60px;
+}
+.el-aside {
+    padding: 0;
+    margin: 0;
+    .el-card {
+        height: 100%;
+    }
+}
+.user-person-menu {
+    .nick-name {
+        height: 16px;
+        color: rgba(70, 70, 70, 86);
+        font-size: 14px;
+        line-height: 16px;
+        text-align: left;
+    }
+    .person-menu-item {
+        color: rgba(70, 70, 70, 86);
+        font-size: 14px;
+        text-align: left;
+        &:hover {
+            cursor: pointer;
+            color: $menuActiveText;
+        }
+    }
+    .person-menu-divider {
+        background-color: rgba(210, 210, 210, 78);
+        border: 1px solid rgba(210, 210, 210, 78);
     }
 }
 .about-container {
-    position: fixed;
-    width: 100%;
-    bottom: 20px;
-    display: flex;
-    justify-content: center;
-    margin-top: 40px;
+    text-align: center;
     .fa-user {
         font-size: 19px;
         color: rgba(172, 172, 172, 100);
         margin: 1px;
     }
 }
+
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 6969cb0..c8d63a0 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -53,14 +53,6 @@
                                         <font-icon class="fab fa-get-pocket" />
                                         我的账户
                                     </p>
-                                    <p class="person-menu-item">
-                                        <font-icon class="fas fa-envelope" />
-                                        站内信
-                                    </p>
-                                    <p class="person-menu-item">
-                                        <font-icon class="fas fa-user-circle" />
-                                        联系人
-                                    </p>
                                     <div class="person-menu-divider" />
                                     <p class="person-menu-item" @click="logoutHandle">
                                         <font-icon class="fas fa-sign-out" />
diff --git a/src/views/project/MyProject.vue b/src/views/project/MyProject.vue
index 169210b..09b308b 100644
--- a/src/views/project/MyProject.vue
+++ b/src/views/project/MyProject.vue
@@ -83,7 +83,7 @@
                         </el-col>
                     </el-row>
                     <img class="project-grid-view-preimg"
-                         src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/pic%20(1).png"
+                         src="https://oss.smileyi.top/static/pic%20(1).png"
                     >
                     <p class="project-grid-view-time">创建时间：{{ p.createTime | formatDate }}</p>
                     <div class="gird-operating-btns">
@@ -237,7 +237,6 @@
     </div>
 </template>
 <script>
-import DataEmpty from '@/components/DataEmpty'
 import dayjs from 'dayjs'
 
 let projectStatusList = [
@@ -248,7 +247,6 @@ let projectStatusList = [
 
 export default {
     name: 'MyProject',
-    components: {DataEmpty},
     filters: {
         formatDate(time) {
             return  dayjs(time).format('YYYY/MM/DD')
@@ -377,9 +375,9 @@ export default {
     border-radius: 4px;
     background-color: rgba(255, 255, 255, 100);
     text-align: center;
-    box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.12);
     margin: 10px;
     position: relative;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
     .project-title {
         color: rgba(16, 16, 16, 100);
         font-size: 14px;
diff --git a/src/views/project/RecycleBin.vue b/src/views/project/RecycleBin.vue
index 1d0feed..96e9bdc 100644
--- a/src/views/project/RecycleBin.vue
+++ b/src/views/project/RecycleBin.vue
@@ -1,12 +1,7 @@
 <template>
     <div class="rc-bin-container">
-        <div class="back-view">
-            <el-button size="mini" round @click="$router.back(-1)">
-                <i class="el-icon-arrow-left" />
-                返回
-            </el-button>
-        </div>
         <el-table
+            v-if="projectList&&projectList.length>0"
             :data="projectList"
             stripe
             border
@@ -68,6 +63,7 @@
                 @current-change="queryRecycleProjectPage"
             />
         </div>
+        <data-empty />
     </div>
 </template>
 <script>
diff --git a/src/views/project/create.vue b/src/views/project/template.vue
similarity index 93%
rename from src/views/project/create.vue
rename to src/views/project/template.vue
index 5b3b251..d55a77e 100644
--- a/src/views/project/create.vue
+++ b/src/views/project/template.vue
@@ -1,11 +1,5 @@
 <template>
     <div class="create-wrapper">
-        <div class="back-view">
-            <el-button size="mini" round @click="$router.back(-1)">
-                <i class="el-icon-arrow-left" />
-                返回
-            </el-button>
-        </div>
         <el-row>
             <el-row type="flex" justify="center">
                 <el-col :span="20">
@@ -13,7 +7,6 @@
                         <el-form-item label="">
                             <el-input
                                 v-model="queryParams.name"
-                                class="search-template-input"
                                 @keyup.enter="queryTemplatePage"
                             />
                         </el-form-item>
@@ -235,14 +228,4 @@ export default {
     text-align: center;
     border: 1px solid rgba(187, 187, 187, 100);
 }
-.search-template-btn {
-    width: 132px;
-    height: 50px;
-    border-radius: 10px;
-    background-color: rgba(25, 73, 157, 100);
-    color: rgba(255, 255, 255, 100);
-    font-size: 18px;
-    text-align: center;
-    border: 1px solid rgba(187, 187, 187, 100);
-}
 </style>