样式优化等

data/magic-api/api/后台/菜单管理/搜索菜单数据.ms

@@ -1,30 +0,0 @@
-{
-  "properties" : { },
-  "id" : "0adb88c728814db88b901701faa56161",
-  "script" : null,
-  "groupId" : "67b2ce258e24491194b74992958c74aa",
-  "name" : "搜索菜单数据",
-  "createTime" : null,
-  "updateTime" : 1641828392961,
-  "lock" : "0",
-  "method" : "GET",
-  "path" : "/search",
-  "parameters" : [ ],
-  "option" : "[]",
-  "requestBody" : "",
-  "headers" : [ ],
-  "paths" : [ ],
-  "responseBody" : null,
-  "description" : null,
-  "requestBodyDefinition" : null,
-  "responseBodyDefinition" : null,
-  "optionMap" : { }
-}
-================================
-var toTree = (list,pid) => select t.*,toTree(list,t.id) children from list t where t.pid = pid
-var list = toTree(db.select('select id,name as label,pid,url from sys_menu where is_del = 0 and is_show = 1 order by sort'),'0')
-
-return {
-    list: list,
-    total: list.getLength()
-}

magic-boot-ui/package.json

@@ -17,7 +17,7 @@
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^0.24.0",
     "drag-tree-table": "2.2.0",
-    "element-ui": "2.13.0",
+    "element-ui": "2.15.7",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "jquery": "^1.7.2",

magic-boot-ui/src/components/Psyduck/pd-table.vue

@@ -27,6 +27,8 @@
         </template>
       </pd-table-column>
 
+      <el-empty :description="emptyText" slot="empty" />
+
     </el-table>
     <pagination v-show="total > 0 && page" :total="total || 0" :page.sync="listCurrent" :limit.sync="limit" @pagination="handlerPagination" />
   </div>
@@ -88,6 +90,10 @@ export default {
       default: () => {
         return []
       }
+    },
+    emptyText: {
+      type: String,
+      default: '暂无数据'
     }
   },
   data() {

magic-boot-ui/src/components/Psyduck/pd-tree.vue

@@ -5,7 +5,7 @@
       <el-button v-if="checked" type="primary" size="mini" icon="el-icon-check" plain @click="() => { treeAllChecked = !treeAllChecked; checkedAll(searchData, treeAllChecked) }">全选/全不选</el-button>
     </div>
     <div style="margin: 5px 0px;" v-if="search">
-      <el-input v-model="searchValue" @input="searchTree" style="width: 90%" />
+      <el-input v-model="searchValue" placeholder="输入关键字进行过滤" @input="searchTree" :style="{ width: searchWidth }" />
     </div>
     <el-tree
       v-if="refreshTree"
@@ -58,6 +58,10 @@ export default {
     search: {
       type: Boolean,
       default: false
+    },
+    searchWidth: {
+      type: String,
+      default: '230px'
     }
   },
   watch: {

magic-boot-ui/src/icons/svg/fullscreen.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>

magic-boot-ui/src/icons/svg/search.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>

magic-boot-ui/src/layout/components/AppMain.vue

@@ -24,7 +24,8 @@ export default {
   min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
-  overflow: hidden;
+  overflow: auto;
+  background: #F0F2F5;
 }
 
 .fixed-header+.app-main {
@@ -35,6 +36,7 @@ export default {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
+    height: calc(100vh - 84px);
   }
 
   .fixed-header+.app-main {

magic-boot-ui/src/layout/components/Navbar.vue

@@ -17,6 +17,7 @@
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img src="@/assets/psyduck.png" class="user-avatar">
+          <span style="font-size: 14px">{{ $store.getters.username }}({{ $store.getters.name }})</span>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -128,12 +129,12 @@ export default {
       margin-right: 30px;
 
       .avatar-wrapper {
-        margin-top: 5px;
         position: relative;
 
         .user-avatar {
           cursor: pointer;
           border-radius: 10px;
+          vertical-align: middle;
         }
 
         .el-icon-caret-bottom {

magic-boot-ui/src/layout/components/Sidebar/index.vue

@@ -7,18 +7,6 @@
       </span>
     </div>
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-form v-if="!isCollapse">
-      <el-form-item>
-        <treeselect
-          style="width: 90%;margin: 0px 5%"
-          :options="menuTree"
-          placeholder="输入菜单名称搜索查找"
-          :disable-branch-nodes="true"
-          :show-count="true"
-          @select="selectMenu"
-        />
-      </el-form-item>
-    </el-form>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -37,11 +25,8 @@
 </template>
 
 <style scoped>
-  .el-form-item--small.el-form-item{
-    margin-bottom: 0px;
-  }
   .el-scrollbar >>> .el-scrollbar__wrap{
-    height: calc(100% - 60px - 36px)
+    height: calc(100% - 60px)
   }
   .logo-title {
     color:white;
@@ -50,7 +35,7 @@
     line-height: 60px;
     text-align: center;
     font-weight: 300;
-    /*box-shadow: 0px -1px 5px 0px #000;*/
+    box-shadow: 0px -1px 5px 0px #000;
     z-index: 1;
     position: relative;
   }
@@ -61,12 +46,10 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
-import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import treeTable from "@/scripts/treeTable";
 
 export default {
-  components: { SidebarItem, Logo, Treeselect },
+  components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
       'permission_routes',
@@ -95,19 +78,6 @@ export default {
     return {
       menuTree: []
     }
-  },
-  mounted() {
-    this.$get('menu/search').then(res => {
-      this.menuTree = res.data.list
-      this.$treeTable.deleteEmptyChildren(this.menuTree)
-    })
-  },
-  methods: {
-    selectMenu(node) {
-      if(node.url){
-        this.$router.push({ path: node.url })
-      }
-    }
   }
 }
 </script>

magic-boot-ui/src/styles/common.css

@@ -11,3 +11,6 @@ body {
 .toolbar-container{
   margin-bottom: 10px
 }
+.clear{
+  clear: both;
+}

magic-boot-ui/src/styles/index.scss

@@ -62,6 +62,9 @@ div:focus {
 // main-container global css
 .app-container {
   padding: 20px;
+  margin: 10px;
+  background: #fff;
+  border-radius: 5px;
 }
 
 .filter-container {

magic-boot-ui/src/views/system/role/role-assign-permissions.vue

@@ -1,5 +1,5 @@
 <template>
-  <pd-tree ref="tree" :el="{ 'show-checkbox': true }" url="menu/tree" :select-values.sync="menus" />
+  <pd-tree ref="tree" :el="{ 'show-checkbox': true }" url="menu/tree" :search="true" search-width="230px" :select-values.sync="menus" />
 </template>
 
 <script>

magic-boot-ui/src/views/system/role/role-list.vue

@@ -66,7 +66,7 @@
       </template>
     </pd-dialog>
 
-    <pd-dialog ref="assignPermissionsDialog" @confirm-click="$refs.assignPermissions.save()">
+    <pd-dialog ref="assignPermissionsDialog" width="40%" @confirm-click="$refs.assignPermissions.save()">
       <template #content>
         <role-assign-permissions ref="assignPermissions" :key="Math.random()" :id="temp.id" @close="() => { $refs.assignPermissionsDialog.hide(); temp.id = '' }" />
       </template>

magic-boot-ui/src/views/system/user/user-form.vue

@@ -1,5 +1,11 @@
+<style>
+.el-input-number .el-input__inner{
+  text-align: left;
+}
+</style>
+
 <template>
-  <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
+  <el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="120px">
     <el-form-item label="登录名称" prop="username">
       <el-input v-model="temp.username" />
     </el-form-item>

magic-boot-ui/src/views/system/user/user-list.vue

@@ -12,7 +12,7 @@
 <template>
   <div class="app-container">
     <div class="left">
-      <pd-tree url="office/tree" :el="{ 'expand-on-click-node': false,'show-checkbox': true }" :search="true" :checked="false" @check-change="checkChange" />
+      <pd-tree url="office/tree" :el="{ 'expand-on-click-node': false,'show-checkbox': true }" :expand="false" :search="true" search-width="100%" :checked="false" @check-change="checkChange" />
     </div>
     <div class="right">
       <div class="filter-container">
@@ -44,13 +44,15 @@
 
       <pd-table ref="table" v-bind="tableOptions" @selection-change="selectionChange" />
 
-      <pd-dialog ref="userFormDialog" @confirm-click="$refs.userForm.save()">
+      <pd-dialog ref="userFormDialog" @confirm-click="$refs.userForm.save()" width="40%">
         <template #content>
           <user-form ref="userForm" :dialog-status="dialogStatus" @reload-table="reloadTable" />
         </template>
       </pd-dialog>
     </div>
 
+    <div class="clear"></div>
+
   </div>
 </template>