fix ui

src/assets/style/main.scss

@@ -265,7 +265,7 @@ img {
 }
 
 .wrapper {
-  width: 1200px;
+  width: 1300px;
   margin: 0 auto;
 }
 

src/config/website.js

@@ -2,7 +2,7 @@
  * 全局配置文件
  */
 export default {
-  title: '梧桐树云平台',
+  title: '梧桐树云服务',
   tenant: '000000',
   clientId: 'project_web', // 客户端id
   clientSecret: 'project_web_key', // 客户端密钥

src/layout/index.vue

@@ -1,21 +1,23 @@
 <template>
   <div class="full-screen flex flex-justify-start">
-    <el-aside width="200px">
-      <left />
-    </el-aside>
     <el-container>
       <el-header class="header">
         <top />
       </el-header>
-      <el-main class="wt-main orange-bg" @scroll="scroll">
-        <div>
-          <router-view v-slot="{ Component, route }">
-            <keep-alive :include="keepAlive.list">
-              <component :is="Component" :key="route.fullPath" />
-            </keep-alive>
-          </router-view>
-        </div>
-      </el-main>
+      <div class="flex" style="padding: 20px 20px; background-color: #f6f7f8">
+        <el-aside style="width: 200px">
+          <left />
+        </el-aside>
+        <el-main class="wt-main" @scroll="scroll">
+          <div class="wrapper">
+            <router-view v-slot="{ Component, route }">
+              <keep-alive :include="keepAlive.list">
+                <component :is="Component" :key="route.fullPath" />
+              </keep-alive>
+            </router-view>
+          </div>
+        </el-main>
+      </div>
     </el-container>
   </div>
 </template>
@@ -62,7 +64,9 @@ export default {
 }
 
 .wt-main {
-  background-color: #e4e4e4;
+  width: 1200px;
+  height: calc(100vh - 60px);
+  background-color: #f6f7f8;
   padding: 0;
 }
 </style>

src/layout/left.vue

@@ -1,43 +1,46 @@
 <template>
-  <div class="box-shadow-blue full-height" style="background-color: #f4f3ee">
-    <div class="padding mt-20">
-      <div class="flex flex-center mt-10" style="margin-bottom: 60px">
-        <img src="@/assets/svg/logo.svg" />
-      </div>
-    </div>
-    <div>
-      <div
-        class="flex flex-center flex-col bold font-16 item-bg padding-bottom full-width"
-      >
-        <div
-          v-for="(item, index) in data"
-          :key="item.id"
-          class="full-width flex flex-col flex-center pointer"
-        >
+  <div class="full-height" style="background-color: #f6f7f8">
+    <div class="full-height">
+      <div class="padding-left padding-top">
+        <el-skeleton :rows="5" animated v-if="data.length === 0" />
+        <div v-else v-for="(item, index) in data" :key="item.id">
           <div
-            class="full-width flex flex-center padding"
-            style="z-index: 2"
-            :class="active === index ? 'item-s' : 'item'"
-            @click="navClick(item, index)"
+            v-if="!item.hasChildren"
+            class="item flex flex-center flex-justify-start"
+            @click="navClick(index, 1, 0)"
+            :style="item.checked ? 'color:#409eff' : ''"
           >
-            <img :src="item.source" />
-            <span class="flex-child-average">{{ item.name }}</span>
+            <img :src="item.source" style="width: 25px" class="mr-5" />
+            {{ item.name }}
           </div>
-          <div
-            v-if="item.children && item.children.length > 0 && active === index"
-            class="flex flex-col flex-center item-sub padding"
-          >
-            <div
-              v-for="(sub, subIndex) in item.children"
-              :key="sub.id"
-              class="padding full-width flex flex-center"
-              :class="subIndex === subActive ? 'item-sub-active' : ''"
-              @click="subClick(sub, subIndex)"
+          <el-collapse v-else v-model="activeCollapse">
+            <el-collapse-item
+              :title="item.name"
+              :name="item.name"
+              :key="item.name"
             >
-              <div class="mr-10 main-color">·</div>
-              <span>{{ sub.name }}</span>
-            </div>
-          </div>
+              <template #title>
+                <div class="flex flex-center flex-justify-start">
+                  <img :src="item.source" style="width: 25px" class="mr-5" />
+                  {{ item.name }}
+                </div>
+              </template>
+              <div
+                class="full-height"
+                @click="navClick(index, 2, subIndex)"
+                v-for="(sub, subIndex) in item.children"
+                :key="sub.name"
+              >
+                <div
+                  class="item flex flex-center flex-justify-start"
+                  style="margin-left: 20px"
+                  :style="sub.checked ? 'color:#ECAB56' : ''"
+                >
+                  {{ sub.name }}
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
         </div>
       </div>
     </div>
@@ -51,7 +54,8 @@ export default {
       active: 0,
       subActive: 0,
       data: [],
-      currentPage: ''
+      currentPage: '',
+      activeCollapse: ''
     }
   },
   watch: {
@@ -72,102 +76,124 @@ export default {
       const item = localStorage.getItem('index')
       if (item) {
         const menu = JSON.parse(item)
+        console.log(menu)
         this.active = menu.active
         this.subActive = menu.subActive
       }
-      const dataType = localStorage.getItem('data-type')
-      console.log(dataType)
-      if (
-        dataType === null ||
-        dataType === undefined ||
-        dataType.length === 0
-      ) {
-        this.navClick(this.data[0], 0)
+      this.navClick(
+        this.active,
+        this.data[this.active].hasChildren ? 2 : 1,
+        this.subActive
+      )
+      console.log(this.data[this.active].hasChildren)
+      if (this.data[this.active].hasChildren === true) {
+        this.activeCollapse = this.data[this.active].name
+        this.data[this.active].children[this.subActive].checked = true
+        console.log(
+          this.activeCollapse,
+          this.data[this.active].children[this.subActive].checked
+        )
+      } else {
+        this.activeCollapse = this.data[this.active].name
+        this.data[this.active].checked = true
       }
     },
     menus() {
       this.$api.common.getMenus().then(res => {
         if (res.code === 200) {
-          this.data = res.data
+          this.data = res.data.map(sub => {
+            sub.hasChildren = Object.hasOwn(sub, 'children')
+            sub.checked = false
+            return sub
+          })
           this.init()
         }
       })
     },
-    navClick(item, index) {
-      this.active = index
-      if (item.children && item.children.length > 0) {
-        this.subActive = 0
-        this.$router.push(item.children[0].path)
+    navClick(index, type, subIndex) {
+      this.data.forEach(item => {
+        item.checked = false
+        if (item.hasChildren) {
+          item.children.forEach(ele => {
+            ele.checked = false
+          })
+        }
+      })
+      if (type === 2) {
+        this.data[index].children[subIndex].checked = true
+      } else {
+        this.data[index].checked = true
+      }
+      if (this.data[index].path.startsWith('http')) {
+        window.open(this.data[index].path, '_blank')
+      } else if (type === 2) {
+        this.$router.push(this.data[index].children[subIndex].path)
         localStorage.setItem(
           'data-type',
-          item.children[0].remark ? item.children[0].remark : 'project'
+          this.data[index].children[subIndex].remark
+            ? this.data[index].children[subIndex].remark
+            : 'project'
         )
         this.$bus.emit(
           'navChange',
-          item.children[0].remark ? item.children[0].remark : 'project'
+          this.data[index].children[subIndex].remark
+            ? this.data[index].children[subIndex].remark
+            : 'project'
         )
       } else {
-        this.$router.push(item.path)
-        localStorage.setItem('data-type', item.remark ? item.remark : 'project')
-        this.$bus.emit('navChange', item.remark ? item.remark : 'project')
+        this.$router.push(this.data[index].path)
+        localStorage.setItem(
+          'data-type',
+          this.data[index].remark ? this.data[index].remark : 'project'
+        )
+        this.$bus.emit(
+          'navChange',
+          this.data[index].remark ? this.data[index].remark : 'project'
+        )
       }
-      const menu = { active: this.active, subActive: this.subActive }
-      localStorage.setItem('index', JSON.stringify(menu))
-    },
-    subClick(item, index) {
-      this.subActive = index
-      localStorage.setItem('data-type', item.remark ? item.remark : 'project')
-      this.$router.push(item.path)
-      const menu = { active: this.active, subActive: this.subActive }
+      const menu = { active: index, subActive: subIndex }
       localStorage.setItem('index', JSON.stringify(menu))
-      this.$bus.emit('navChange', item.remark ? item.remark : 'project')
+      this.$emit('closeMenu')
     }
   }
 }
 </script>
 
 <style scoped>
-.box-shadow-blue {
-  position: fixed;
-  width: 200px;
-  left: 0;
-  z-index: 2;
-  background-color: white;
-  box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.1);
+.item {
+  font-weight: 500;
+  font-size: 15px;
+  padding: 15px 10px;
+  z-index: 999;
 }
 
-.item-bg {
-  border-top: 1px solid #d1d1d1;
-  border-bottom: 1px solid #d1d1d1;
+.item:hover {
+  background-color: #efefef;
 }
 
-.item-s {
-  width: 160px;
-  border-radius: 14px;
-  margin-top: 30px;
-  color: white;
-  background-color: #ab7630;
-  box-shadow: 2px 2px 10px 2px rgba(242, 162, 58, 0.49);
+:deep(.el-collapse) {
+  --el-collapse-content-bg-color: transparent !important;
+  --el-collapse-header-bg-color: transparent !important;
+  --el-collapse-content-font-size: 15px !important;
+  --el-collapse-header-font-size: 15px !important;
+  --el-collapse-border-color: transparent !important;
+  border-top: none;
+  border-bottom: none;
+  margin: 0;
+  width: 100%;
 }
 
-.item {
-  width: 150px;
-  border-radius: 14px;
-  margin-top: 30px;
-  color: #707070;
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
 }
 
-.item-sub {
-  width: 160px;
-  border-bottom-left-radius: 14px;
-  border-bottom-right-radius: 14px;
-  margin-top: -10px;
-  padding-top: 20px;
-  color: #939393;
-  background-color: #e4e4e4;
+:deep(.el-collapse-item__header):hover {
+  background-color: #efefef;
 }
 
-.item-sub-active {
-  background-color: #d3d3d3;
+:deep(.el-collapse-item__content) {
+  padding-bottom: 0 !important;
+  line-height: 1 !important;
+  padding-left: 10px;
 }
 </style>

src/layout/top.vue

@@ -1,40 +1,33 @@
 <template>
   <div>
     <el-row
-        class="flex flex-align-center flex-justify-between top"
-        :class="dataType === 'project'
-          ? 'bread'
-          : 'bread-g'
-      "
+      class="flex flex-align-center flex-justify-between top"
+      :class="dataType === 'project' ? 'bread' : 'bread-g'"
     >
       <el-col :span="12">
         <div class="flex flex-justify-start flex-align-center padding">
-          <el-icon class="ml-5" size="18px">
-            <Fold/>
-          </el-icon>
-          <el-breadcrumb class="ml-5" separator="/">
-            <el-breadcrumb-item v-for="item in nav.menus" :key="item.id">
-              <a :href="item.fullPath">{{ item.name }}</a>
-            </el-breadcrumb-item>
-          </el-breadcrumb>
+          <div class="flex flex-center">
+            <img src="@/assets/svg/logo.svg" />
+          </div>
         </div>
       </el-col>
       <el-col :span="12">
         <div class="flex-child-average flex-justify-end flex padding-right">
           <div
-              class="padding flex flex-align-center pointer" :class="dataType === 'project' ? 'black' : 'white'"
-              @click="show = true"
+            class="padding flex flex-align-center pointer"
+            :class="dataType === 'project' ? 'black' : 'white'"
+            @click="show = true"
           >
             <el-icon class="mr-5">
-              <Search/>
+              <Search />
             </el-icon>
             <span>搜索</span>
           </div>
           <div class="padding flex flex-align-center pointer">
             <el-avatar
-                class="mr-10"
-                :size="30"
-                :src="
+              class="mr-10"
+              :size="30"
+              :src="
                 user.info.avatarUrl && user.info.avatarUrl.length > 0
                   ? user.info.avatarUrl
                   : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
@@ -44,7 +37,7 @@
               <span class="flex flex-center">
                 {{ user.info.userName }} / {{ user.info.deptName }}
                 <el-icon class="el-icon--right">
-                  <arrow-down/>
+                  <arrow-down />
                 </el-icon>
               </span>
               <template #dropdown>
@@ -58,24 +51,25 @@
         </div>
       </el-col>
     </el-row>
-    <search :show="show" @close="show = false"/>
+    <search :show="show" @close="show = false" />
   </div>
 </template>
 
 <script>
 import navStore from '../store/nav.js'
-import {useStore} from '../store/user.js'
+import { useStore } from '../store/user.js'
 import permissionStore from '@/store/permission.js'
 import search from './search/index.vue'
+import config from '../config/website.js'
 
 export default {
   name: 'top',
-  components: {search},
+  components: { search },
   setup() {
     const nav = navStore()
     const user = useStore()
     const permission = permissionStore()
-    return {nav, user, permission}
+    return { nav, user, permission }
   },
   data() {
     return {
@@ -112,11 +106,13 @@ export default {
       total: '',
       isAll: 1,
       filterTypeName: '全部',
-      resultCount: 0
+      resultCount: 0,
+      title: ''
     }
   },
   created() {
     const tmp = localStorage.getItem('data-type')
+    this.title = config.title
     if (tmp) {
       this.dataType = tmp
     }
@@ -126,6 +122,7 @@ export default {
     })
   },
   methods: {
+    config,
     dropDown(res) {
       if (res === 'info') {
         this.$router.push('/user')
@@ -202,7 +199,7 @@ export default {
     },
     getTotal() {
       this.resultCount = 0
-      this.$api.project.total({keyword: this.params.keyword}).then(res => {
+      this.$api.project.total({ keyword: this.params.keyword }).then(res => {
         if (res.code === 200) {
           this.type[0].count = res.data.projectTotal
           this.type[1].count = res.data.fileTotal
@@ -260,11 +257,12 @@ export default {
   height: 60px;
   z-index: 1;
   top: 0;
-  left: 200px;
+  left: 0;
   right: 0;
+  padding: 0 40px;
   position: fixed;
   border-bottom: whitesmoke solid 1px;
-  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
 }
 
 .avatar {
@@ -301,7 +299,7 @@ export default {
 }
 
 .bread-g {
-  background: #3978F1;
+  background: #3978f1;
 
   :deep(.el-breadcrumb__inner a) {
     color: white;