From 80b159d3c0d11a6479b4b5f93d6efe456ce6b6d9 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Tue, 27 Aug 2024 18:04:04 +0800
Subject: [PATCH] init

---
 package.json                                  |   1 +
 src/api/me.js                                 |  34 +++
 src/api/role.js                               |  16 ++
 src/api/user.js                               |  41 ++--
 src/assets/face.jpg                           | Bin 0 -> 25275 bytes
 src/components/ThemePicker/index.vue          | 176 ++++++++++++++++
 src/icons/svg/folder.svg                      |   1 +
 src/icons/svg/logout.svg                      |   1 +
 src/layout/CardContainer.vue                  |  36 ++++
 src/layout/components/Navbar/Icon.vue         |   1 +
 src/layout/components/Navbar/Item.vue         |  10 +-
 src/layout/components/Navbar/index.vue        | 123 +++++++----
 src/main.js                                   |  18 +-
 src/permission.js                             |   1 -
 src/settings.js                               |   2 +-
 src/store/getters.js                          |   1 +
 src/store/modules/permission.js               |   2 +-
 src/store/modules/user.js                     |   9 +-
 src/styles/element-ui.scss                    |   4 +
 src/styles/{navbar.css => navbar.scss}        |  10 +-
 src/styles/variables.scss                     |   5 +-
 src/views/login/index.vue                     |   2 +-
 src/views/system/components/AddMenu.vue       | 137 ++++++++++++
 src/views/system/components/AddRole.vue       |  75 +++++++
 src/views/system/components/AddUser.vue       |  99 +++++++++
 .../system/components/BindPermissions.vue     |  98 +++++++++
 src/views/system/components/BindRoles.vue     | 134 ++++++++++++
 src/views/system/menu.vue                     | 190 +++++++++++++++--
 src/views/system/role.vue                     | 107 ++++++----
 src/views/system/user.vue                     | 199 +++++++++++++++++-
 30 files changed, 1393 insertions(+), 140 deletions(-)
 create mode 100644 src/api/me.js
 create mode 100644 src/assets/face.jpg
 create mode 100644 src/components/ThemePicker/index.vue
 create mode 100644 src/icons/svg/folder.svg
 create mode 100644 src/icons/svg/logout.svg
 create mode 100644 src/layout/CardContainer.vue
 rename src/styles/{navbar.css => navbar.scss} (99%)
 create mode 100644 src/views/system/components/AddMenu.vue
 create mode 100644 src/views/system/components/AddRole.vue
 create mode 100644 src/views/system/components/AddUser.vue
 create mode 100644 src/views/system/components/BindPermissions.vue
 create mode 100644 src/views/system/components/BindRoles.vue

diff --git a/package.json b/package.json
index 6efba07..13f0bc8 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.18.1",
     "bpmn-js": "^7.3.1",
     "bpmn-js-properties-panel": "^0.37.2",
diff --git a/src/api/me.js b/src/api/me.js
new file mode 100644
index 0000000..aca6a59
--- /dev/null
+++ b/src/api/me.js
@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+export function login(data) {
+  return request({
+    url: '/api/auth/login',
+    method: 'post',
+    data,
+    isLoading: false
+  })
+}
+
+export function getInfo(token) {
+  return request({
+    url: '/api/auth/me',
+    method: 'post',
+    params: { token },
+    isLoading: false
+  })
+}
+
+export function logout() {
+  return request({
+    url: '/api/auth/logout',
+    method: 'post'
+  })
+}
+
+export function permissions () {
+  return request({
+    url: "/api/auth/permissions",
+    method: "post",
+    isLoading: false,
+  })
+}
diff --git a/src/api/role.js b/src/api/role.js
index 65c8381..60924ba 100644
--- a/src/api/role.js
+++ b/src/api/role.js
@@ -23,3 +23,19 @@ export function destroy (data) {
     data
   })
 }
+
+export function getPermissions (params) {
+  return request({
+    url: "/api/backend/role/get-permissions",
+    method: "get",
+    params
+  })
+}
+
+export function setPermissions (data) {
+  return request({
+    url: "/api/backend/role/set-permissions",
+    method: "post",
+    data
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
index aca6a59..44fff87 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,34 +1,41 @@
-import request from '@/utils/request'
+import request from '@/utils/request';
 
-export function login(data) {
+export function index (params) {
   return request({
-    url: '/api/auth/login',
-    method: 'post',
-    data,
-    isLoading: false
+    url: "/api/backend/user",
+    method: "get",
+    params
   })
 }
 
-export function getInfo(token) {
+export function save (data) {
   return request({
-    url: '/api/auth/me',
-    method: 'post',
-    params: { token },
-    isLoading: false
+    url: "/api/backend/user/save",
+    method: "post",
+    data
+  })
+}
+
+export function destroy (data) {
+  return request({
+    url: "/api/backend/user/delete",
+    method: "post",
+    data
   })
 }
 
-export function logout() {
+export function getRoles (params) {
   return request({
-    url: '/api/auth/logout',
-    method: 'post'
+    url: "/api/backend/user/get-roles",
+    method: "get",
+    params
   })
 }
 
-export function permissions () {
+export function setRoles (data) {
   return request({
-    url: "/api/auth/permissions",
+    url: "/api/backend/user/set-roles",
     method: "post",
-    isLoading: false,
+    data
   })
 }
diff --git a/src/assets/face.jpg b/src/assets/face.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8e5cd07f41f0252110cb2977ba7396f274b93b7f
GIT binary patch
literal 25275
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
DxNyCy

literal 0
HcmV?d00001

diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
new file mode 100644
index 0000000..9b6b924
--- /dev/null
+++ b/src/components/ThemePicker/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <el-color-picker
+    v-model="theme"
+    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
+  />
+</template>
+
+<script>
+import Cookies from "js-cookie"
+const version = require('element-ui/package.json').version // element-ui version from node_modules
+const ORIGINAL_THEME = '#409EFF' // default color
+let index = 0;
+export default {
+  data() {
+    return {
+      chalk: '', // content of theme-chalk css
+      theme: ''
+    }
+  },
+  created() {
+    this.theme = Cookies.get("defaultTheme")
+    document.body.style.setProperty('--theme-color', Cookies.get("defaultTheme"));
+  },
+  computed: {
+
+  },
+  watch: {
+    async theme(val) {
+      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
+      if (typeof val !== 'string') return
+      const themeCluster = this.getThemeCluster(val.replace('#', ''))
+      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
+      console.log(themeCluster, originalCluster)
+      let $message
+      if (index !== 0) {
+        $message = this.$message({
+          message: '切换主题中',
+          customClass: 'theme-message',
+          type: 'success',
+          duration: 0,
+          iconClass: 'el-icon-loading'
+        })
+      }
+
+      const getHandler = (variable, id) => {
+        return () => {
+          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
+          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
+
+          let styleTag = document.getElementById(id)
+          if (!styleTag) {
+            styleTag = document.createElement('style')
+            styleTag.setAttribute('id', id)
+            document.head.appendChild(styleTag)
+          }
+          styleTag.innerText = newStyle
+        }
+      }
+
+      if (!this.chalk) {
+        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
+        await this.getCSSString(url, 'chalk')
+      }
+
+      const chalkHandler = getHandler('chalk', 'chalk-style')
+
+      chalkHandler()
+
+      const styles = [].slice.call(document.querySelectorAll('style'))
+        .filter(style => {
+          const text = style.innerText
+          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
+        })
+      styles.forEach(style => {
+        const { innerText } = style
+        if (typeof innerText !== 'string') return
+        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
+      })
+
+      this.$emit('change', val)
+      Cookies.set("defaultTheme", val)
+      document.body.style.setProperty('--theme-color', val);
+      index++;
+      $message?.close()
+    }
+  },
+
+  methods: {
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
+      })
+      return newStyle
+    },
+
+    getCSSString(url, variable) {
+      return new Promise(resolve => {
+        const xhr = new XMLHttpRequest()
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
+            resolve()
+          }
+        }
+        xhr.open('GET', url)
+        xhr.send()
+      })
+    },
+
+    getThemeCluster(theme) {
+      const tintColor = (color, tint) => {
+        let red = parseInt(color.slice(0, 2), 16)
+        let green = parseInt(color.slice(2, 4), 16)
+        let blue = parseInt(color.slice(4, 6), 16)
+
+        if (tint === 0) { // when primary color is in its rgb space
+          return [red, green, blue].join(',')
+        } else {
+          red += Math.round(tint * (255 - red))
+          green += Math.round(tint * (255 - green))
+          blue += Math.round(tint * (255 - blue))
+
+          red = red.toString(16)
+          green = green.toString(16)
+          blue = blue.toString(16)
+
+          return `#${red}${green}${blue}`
+        }
+      }
+
+      const shadeColor = (color, shade) => {
+        let red = parseInt(color.slice(0, 2), 16)
+        let green = parseInt(color.slice(2, 4), 16)
+        let blue = parseInt(color.slice(4, 6), 16)
+
+        red = Math.round((1 - shade) * red)
+        green = Math.round((1 - shade) * green)
+        blue = Math.round((1 - shade) * blue)
+
+        red = red.toString(16)
+        green = green.toString(16)
+        blue = blue.toString(16)
+
+        return `#${red}${green}${blue}`
+      }
+
+      const clusters = [theme]
+      for (let i = 0; i <= 9; i++) {
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
+      }
+      clusters.push(shadeColor(theme, 0.1))
+      return clusters
+    }
+  }
+}
+</script>
+
+<style>
+.theme-message,
+.theme-picker-dropdown {
+  z-index: 99999 !important;
+}
+
+.theme-picker .el-color-picker__trigger {
+  height: 26px !important;
+  width: 26px !important;
+  padding: 2px;
+}
+
+.theme-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
+</style>
diff --git a/src/icons/svg/folder.svg b/src/icons/svg/folder.svg
new file mode 100644
index 0000000..2d2cbca
--- /dev/null
+++ b/src/icons/svg/folder.svg
@@ -0,0 +1 @@
+<svg t="1724726461364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11356" width="200" height="200"><path d="M783.990234 312.512716c-117.296439 0-235.009563 0.208342-352.09766 0.208342v-56.668973-0.208341h-127.921872v56.877314c-21.459207 0-42.501729-0.208342-63.960936-0.208342-5.000203 0-16.042319 2.916785-16.042319 9.375382v260.635605l32.29298-155.214649c5.000203-23.750966 22.084232-43.335097 47.710275-43.335097H800.032553v-62.085859c0-1.875076-1.250051-3.750153-3.333469-5.416887-2.916785-2.500102-7.500305-3.958494-12.70885-3.958495z" fill="#FBC02D" p-id="11357"></path><path d="M192.09115 737.321668V338.138759c0-12.083825 6.041913-22.709257 15.625635-30.417904 8.542014-6.666938 20.000814-11.042116 32.501323-11.042116h32.084639v-24.584334c0-8.750356 3.541811-16.875687 9.375381-22.709257 5.833571-5.833571 13.75056-9.583723 22.709258-9.583724h127.921871c8.750356 0 16.875687 3.750153 22.709258 9.583724 5.833571 5.833571 9.375381 13.958901 9.375381 22.709257v24.584334h320.013022c12.500509 0 23.959308 4.166836 32.501322 11.042116 9.583723 7.500305 15.625636 18.334079 15.625636 30.417904V400.016277H800.032553v-61.877518c0-1.875076-1.250051-3.750153-3.333469-5.416887-3.125127-2.500102-7.500305-3.958494-12.70885-3.958495H463.977213v0.208342h-32.084639v-56.668972-0.208342h-127.921872v56.877314h-32.084639v-0.208342h-32.084639c-5.208545 0-9.583723 1.458393-12.70885 3.958495-2.083418 1.666734-3.333469 3.541811-3.333469 5.416887v399.182909H192.09115z" fill="#F9A825" p-id="11358"></path><path d="M579.606918 525.438047h195.841302V176.04883H519.396134v288.345066z" fill="#BDBDBD" p-id="11359"></path><path d="M690.028077 491.26999h-53.960529l53.960529 53.960529z" fill="#BDBDBD" p-id="11360"></path><path d="M552.939166 552.105799h206.466734V192.09115H489.394914v296.88708z" fill="#E0E0E0" p-id="11361"></path><path d="M714.404069 398.974568h-171.048626v18.125737h171.048626zM714.404069 327.096643h-171.048626v17.917396h171.048626zM714.404069 255.010376h-171.048626v17.917396h171.048626zM545.855544 491.26999h-54.168871l54.168871 53.960529z" fill="#BDBDBD" p-id="11362"></path><path d="M303.970702 383.973957H847.95117c3.333469 0 6.87528 0.416684 10.41709 1.041709 9.583723 2.083418 18.750763 6.87528 25.626043 13.333876 7.500305 7.291963 12.500509 17.084028 12.500509 27.917803 0 2.29176-0.208342 4.791862-0.833367 7.291963l-63.960936 306.679146c-2.500102 11.667141-7.916989 22.709257-16.250662 30.834588-8.125331 7.708647-18.750763 12.70885-31.459613 12.70885H240.009766c-3.333469 0-6.87528-0.416684-10.417091-1.041709-9.583723-2.083418-18.750763-6.87528-25.626042-13.333876-7.708647-7.500305-12.500509-17.084028-12.500509-27.917802 0-2.29176 0.208342-4.791862 0.833367-7.291964L256.260427 427.517396c2.500102-11.667141 7.916989-22.709257 16.250662-30.834588 8.333672-7.916989 18.750763-12.70885 31.459613-12.708851z" fill="#F9A825" p-id="11363"></path></svg>
diff --git a/src/icons/svg/logout.svg b/src/icons/svg/logout.svg
new file mode 100644
index 0000000..cd9668a
--- /dev/null
+++ b/src/icons/svg/logout.svg
@@ -0,0 +1 @@
+<svg t="1724745509265" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5088" width="200" height="200"><path d="M256 640a42.666667 42.666667 0 0 1-30.293333-12.373333l-85.333334-85.333334a42.666667 42.666667 0 0 1 0-60.586666l85.333334-85.333334a42.666667 42.666667 0 0 1 60.586666 60.586667L230.826667 512l55.466666 55.04a42.666667 42.666667 0 0 1 0 60.586667A42.666667 42.666667 0 0 1 256 640z" p-id="5089"></path><path d="M640 554.666667H170.666667a42.666667 42.666667 0 0 1 0-85.333334h469.333333a42.666667 42.666667 0 0 1 0 85.333334z" p-id="5090"></path><path d="M853.333333 938.666667h-7.68l-469.333333-85.333334A42.666667 42.666667 0 0 1 341.333333 810.666667v-170.666667a42.666667 42.666667 0 0 1 85.333334 0v135.253333l384 69.546667V179.2l-384 69.546667V384a42.666667 42.666667 0 0 1-85.333334 0V213.333333a42.666667 42.666667 0 0 1 34.986667-42.666666l469.333333-85.333334a42.666667 42.666667 0 0 1 34.986667 8.96A42.666667 42.666667 0 0 1 896 128v768a42.666667 42.666667 0 0 1-15.36 32.853333A42.666667 42.666667 0 0 1 853.333333 938.666667z" p-id="5091"></path></svg>
diff --git a/src/layout/CardContainer.vue b/src/layout/CardContainer.vue
new file mode 100644
index 0000000..ac18770
--- /dev/null
+++ b/src/layout/CardContainer.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <el-card shadow="always">
+      <template #header>
+        <slot name="header">
+          <div>
+            <Icon :icon="$route.meta.icon"></Icon>
+            <span style="font-weight: 600;letter-spacing: 1px;">{{ $route.meta.title }}</span>
+          </div>
+        </slot>
+      </template>
+
+      <template #default>
+        <slot></slot>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import Icon from "@/layout/components/Navbar/Icon.vue"
+
+export default {
+  components: {
+    Icon
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/layout/components/Navbar/Icon.vue b/src/layout/components/Navbar/Icon.vue
index 78e7e08..a52d1c9 100644
--- a/src/layout/components/Navbar/Icon.vue
+++ b/src/layout/components/Navbar/Icon.vue
@@ -32,5 +32,6 @@ export default {
 <style scoped lang="scss">
 .sub-el-icon {
   margin-right: 4px;
+  color: currentColor;
 }
 </style>
diff --git a/src/layout/components/Navbar/Item.vue b/src/layout/components/Navbar/Item.vue
index d1d1410..8c0c3a4 100644
--- a/src/layout/components/Navbar/Item.vue
+++ b/src/layout/components/Navbar/Item.vue
@@ -3,19 +3,21 @@
     <template
       v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="onlyOneChild.key || onlyOneChild.path">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
           <icon :icon="onlyOneChild.meta.icon"></icon>{{ onlyOneChild.meta.title }}
         </el-menu-item>
       </app-link>
     </template>
 
     <template v-else>
-      <el-submenu ref="subMenu" :index="item.key || item.path" popper-append-to-body>
+      <el-submenu ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
         <template slot="title">
           <icon :icon="item.meta.icon"></icon>{{ item.meta.title }}
         </template>
-        <navbar-item v-for="child in item.children" :key="child.path" :item="child"
-                      :base-path="resolvePath(child.path)" class="nest-menu" />
+        <navbar-item v-for="child in item.children"
+                     :key="child.path" :item="child"
+                     :base-path="resolvePath(child.path)"
+                     class="nest-menu" />
       </el-submenu>
     </template>
   </div>
diff --git a/src/layout/components/Navbar/index.vue b/src/layout/components/Navbar/index.vue
index 4f90c3c..014f219 100644
--- a/src/layout/components/Navbar/index.vue
+++ b/src/layout/components/Navbar/index.vue
@@ -15,12 +15,23 @@
         <div class="navbar-nav flex-row order-md-last">
 
           <div class="d-none d-md-flex">
-            <a class="nav-link px-0 hide-theme-dark" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable dark mode" data-bs-original-title="Enable dark mode">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path></svg>
-            </a>
-            <a class="nav-link px-0 hide-theme-light" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable light mode" data-bs-original-title="Enable light mode">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path></svg>
-            </a>
+            <template v-if="isFullscreen">
+              <a class="nav-link px-0 fullscreen" @click="fullscreen">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
+                  <path stroke-width="2" d="M 4 8 l 4 0 l 0 -4 M 16 4 l 0 4 l 4 0 M 20 16 l -4 0 l 0 4 M 8 20 l 0 -4 l -4 0"></path>
+                </svg>
+              </a>
+            </template>
+            <template v-else>
+              <a class="nav-link px-0 fullscreen" @click="fullscreen">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
+                  <path stroke-width="2" d="M 4 8 l 0 -4 l 4 0 M 16 4 l 4 0 l 0 4 M 20 16 l 0 4 l -4 0 M 8 20 l -4 0 l 0 -4"></path>
+                </svg>
+              </a>
+            </template>
+            <div class="nav-item d-md-flex">
+              <theme-picker class="nav-link"></theme-picker>
+            </div>
             <div class="nav-item d-none d-md-flex me-3">
               <a class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg>
@@ -29,13 +40,30 @@
             </div>
           </div>
           <div class="nav-item">
-            <a class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
-              <span class="avatar avatar-sm" style=""></span>
-              <div class="d-none d-xl-block ps-2">
-                <div>{{ name }}</div>
-                <!--                <div class="mt-1 small text-secondary">UI Designer</div>-->
-              </div>
-            </a>
+            <el-dropdown>
+              <a class="nav-link d-flex lh-1 text-reset p-0" aria-label="Open user menu">
+                <img class="avatar avatar-sm" style="" src="@/assets/face.jpg" alt="" >
+                <div class="d-none d-xl-block ps-2">
+                  <div>{{ name }}</div>
+                  <div class="mt-1 small text-secondary">{{ (department && department.name) ? department.name : '暂无部门' }}</div>
+                </div>
+              </a>
+
+              <el-dropdown-menu slot="dropdown" size="mini">
+                <el-dropdown-item>
+                  <SvgIcon icon-class="user"></SvgIcon>
+                  <span style="padding-left: 8px;">用户信息</span>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <SvgIcon icon-class="password"></SvgIcon>
+                  <span style="padding-left: 8px;">修改密码</span>
+                </el-dropdown-item>
+                <el-dropdown-item divided>
+                  <SvgIcon icon-class="logout"></SvgIcon>
+                  <span style="padding-left: 8px;">退出</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
         </div>
       </div>
@@ -43,28 +71,15 @@
 
     <header class="navbar-expand-md">
       <div class="collapse navbar-collapse" id="navbar-menu">
-        <el-menu class="container-xl"
+        <el-menu style="width: 100%;padding: 0 10px;"
                  :text-color="variables.menuText"
                  :background-color="variables.menuBg"
                  :active-text-color="variables.menuActiveText"
                  :default-active="activeMenu"
-                 mode="horizontal" @select="menuSelect">
+                 mode="horizontal">
           <Item v-for="(item, index) in permission_routes" :key="item.key" :item="item" :base-path="item.path"></Item>
         </el-menu>
       </div>
-<!--      <div class="collapse navbar-collapse" id="navbar-menu">-->
-<!--        <div class="navbar">-->
-<!--          <div class="container-xl">-->
-<!--            <div class="row flex-fill align-items-center">-->
-<!--              <div class="col">-->
-<!--                <ul class="navbar-nav">-->
-<!--                  <Item v-for="(item, index) in permission_routes" :key="item.key" :item="item"></Item>-->
-<!--                </ul>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
     </header>
   </div>
 </template>
@@ -73,13 +88,17 @@
 import variables from "@/styles/variables.scss"
 import { mapGetters } from 'vuex'
 import Item from "./Item.vue"
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import ThemePicker from '@/components/ThemePicker/index.vue'
 export default {
   components: {
-    Item
+    ThemePicker,
+    Item,
+    SvgIcon
   },
   data () {
     return {
-      activeMenu: ""
+      isFullscreen: false,
     }
   },
   computed: {
@@ -91,21 +110,33 @@ export default {
       'avatar',
       'name',
       'permission_routes',
+      'department'
     ]),
-    // activeMenu() {
-    //   const route = this.$route
-    //   const { meta, path, matched } = route
-    //   // if set path, the sidebar will highlight the path you set
-    //   if (meta.activeMenu) {
-    //     return meta.activeMenu
-    //   }
-    //   console.log(matched[matched.length-1].parent.path)
-    //   return matched[matched.length-1].parent.path
-    // },
+    activeMenu() {
+      const route = this.$route
+      const {
+        meta,
+        path
+      } = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
   },
   methods: {
-    menuSelect (index,path) {
-      this.activeMenu = path[0]
+    handleFullscreen () {
+      this.isFullscreen = document.fullscreenElement !== null
+    },
+    fullscreen () {
+      if (!document.fullscreenElement) {
+        // 请求全屏
+        document.documentElement.requestFullscreen()
+      } else {
+        // 退出全屏
+        document.exitFullscreen()
+      }
     },
     async logout() {
       await this.$store.dispatch('user/logout')
@@ -113,10 +144,16 @@ export default {
     }
   },
   created() {
+  },
+  mounted() {
+    document.addEventListener('fullscreenchange', this.handleFullscreen)
+  },
+  beforeDestroy() {
+    document.removeEventListener('fullscreenchange', this.handleFullscreen)
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import url('~@/styles/navbar.css');
+@import url('~@/styles/navbar.scss');
 </style>
diff --git a/src/main.js b/src/main.js
index 9fb3520..d9a7131 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,16 +29,28 @@ if (process.env.NODE_ENV === "production") {
 }
 
 // set ElementUI lang to EN
-Vue.use(ElementUI, { locale });
+//Vue.use(ElementUI, { locale });
 // 如果想要中文版 element-ui，按如下方式声明
-// Vue.use(ElementUI)
-import { VXETable, VxeIcon, VxeTable, VxeColumn, VxeColgroup, VxeTableEditModule } from "vxe-table";
+ Vue.use(ElementUI)
+
+//vxetable
+import { VxeIcon, VxeTable, VxeColumn, VxeColgroup, VxeTableEditModule, VxeTableValidatorModule, VxeModal, VxeToolbar } from "vxe-table";
 import "vxe-table/styles/index.scss"
 Vue.use(VxeTableEditModule);
+Vue.use(VxeTableValidatorModule);
 Vue.use(VxeIcon);
 Vue.use(VxeTable);
 Vue.use(VxeColumn);
 Vue.use(VxeColgroup);
+Vue.use(VxeModal);
+Vue.use(VxeToolbar);
+//treeselect
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import Treeselect from "@riophae/vue-treeselect"
+Vue.component("Treeselect",Treeselect);
+
+import CardContainer from "@/layout/CardContainer.vue"
+Vue.component("CardContainer",CardContainer)
 //wujie
 import Wujie from "wujie-vue2";
 Vue.use(Wujie);
diff --git a/src/permission.js b/src/permission.js
index fdb579d..41d8294 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -12,7 +12,6 @@ const whiteList = ['/login'] // no redirect whitelist
 
 let isFirstEnter = true; //第一次进入获取用户信息
 router.beforeEach(async(to, from, next) => {
-  console.log(from.path,to.path)
   // start progress bar
   NProgress.start()
 
diff --git a/src/settings.js b/src/settings.js
index 9cbbf15..f7909c9 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,7 +1,7 @@
 module.exports = {
 
   title: 'Vue Admin Template',
-  copyright: '版权所有',
+  copyright: '常州环境监测中心',
 
   /**
    * @type {boolean} true | false
diff --git a/src/store/getters.js b/src/store/getters.js
index 2d79d65..2297fe2 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -4,6 +4,7 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
+  department: state => state.user.department,
   admins: state => state.data.admins,
   departments: state => state.data.departments,
   permission_routes: state => state.permission.routes,
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index ea49a1b..27b3a1c 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,5 +1,5 @@
 import { asyncRoutes, constantRoutes } from '@/router'
-import { permissions } from "@/api/user"
+import { permissions } from "@/api/me"
 import path from "path"
 import Layout from "@/layout"
 
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 160b63f..94f1871 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/user'
+import { login, logout, getInfo } from '@/api/me'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
@@ -8,6 +8,7 @@ const getDefaultState = () => {
     name: '',
     avatar: '',
     adminId: '',
+    department: {},
     role: [],
   }
 }
@@ -32,6 +33,9 @@ const mutations = {
   },
   SET_ADMIN_ID: (state, id) => {
     state.adminId = id
+  },
+  SET_DEPARTMENT: (state, department) => {
+    state.department = department
   }
 }
 
@@ -57,8 +61,9 @@ const actions = {
     return new Promise((resolve, reject) => {
       getInfo(state.token).then(response => {
 
-        const { name, avatar, id, role } = response
+        const { name, avatar, id, role, department } = response
 
+        commit('SET_DEPARTMENT',department)
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
         commit('SET_ADMIN_ID', id)
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0062411..bf5f6ec 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -47,3 +47,7 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+
+.el-submenu.is-active .el-submenu__title {
+  border-bottom: 2px solid;
+}
diff --git a/src/styles/navbar.css b/src/styles/navbar.scss
similarity index 99%
rename from src/styles/navbar.css
rename to src/styles/navbar.scss
index 45fce6c..357b9ef 100644
--- a/src/styles/navbar.css
+++ b/src/styles/navbar.scss
@@ -383,6 +383,11 @@ a {
   text-decoration: none
 }
 
+a:hover {
+  --tblr-link-color-rgb: var(--tblr-link-hover-color-rgb);
+  text-decoration: underline
+}
+
 a:not([href]):not([class]),a:not([href]):not([class]):hover {
   color: inherit;
   text-decoration: none
@@ -24695,7 +24700,7 @@ textarea[cols] {
   animation: animated-dots 1.2s steps(4,jump-none) infinite
 }
 
-.modal-content .btn-close {
+.modal-content>.btn-close,.modal-header>.btn-close {
   position: absolute;
   top: 0;
   right: 0;
@@ -25222,7 +25227,8 @@ textarea[cols] {
 
 .ribbon-start {
   right: auto;
-  left: calc(-1 * var(--tblr-ribbon-margin))
+  left: calc(-1 * var(--tblr-ribbon-margin));
+  border-radius: 0 var(--tblr-ribbon-border-radius) var(--tblr-ribbon-border-radius) var(--tblr-ribbon-border-radius)
 }
 
 .ribbon-start:before {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 782453c..e97ecaf 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,6 +1,9 @@
 // sidebar
+:root {
+  --theme-color: #5898f2;
+}
 $menuText:#333;
-$menuActiveText:#409EFF;
+$menuActiveText: var(--theme-color);
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
 $menuBg:#fff;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 2919cbb..07176f3 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -64,7 +64,7 @@
 import {
   validUsername
 } from '@/utils/validate'
-import { login, getInfo } from "@/api/user";
+import { login, getInfo } from "@/api/me";
 const defaultSettings = require('../../../src/settings.js')
 export default {
   name: 'Login',
diff --git a/src/views/system/components/AddMenu.vue b/src/views/system/components/AddMenu.vue
new file mode 100644
index 0000000..c88b05f
--- /dev/null
+++ b/src/views/system/components/AddMenu.vue
@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <vxe-modal :value="isShow"
+               show-footer
+               title="权限菜单"
+               show-confirm-button
+               :width="600"
+               :height="600"
+               esc-closable
+               @input="e => $emit('update:isShow',e)">
+      <el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
+        <el-form-item label="父级菜单" prop="pid" required>
+          <Treeselect v-model="form.pid"
+                      :options="formatList"
+                      noChildrenText="无子菜单"
+                      :normalizer="node => ({
+                        id: node.id,
+                        label: node.name,
+                        children: node.children,
+                        isDefaultExpanded: true
+                      })"></Treeselect>
+        </el-form-item>
+        <el-form-item label="名称" prop="name" required>
+          <el-input v-model="form.name" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="图标" prop="icon">
+          <el-input v-model="form.icon" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="路由路径" prop="path" required>
+          <el-input v-model="form.path" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="api前缀" prop="api_profix" required>
+          <el-input v-model="form.api_profix" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="是否可见" prop="visible">
+          <el-switch v-model="form.visible" :active-value="1" :inactive-value="0" active-text="显示" inactive-text="隐藏"></el-switch>
+        </el-form-item>
+        <el-form-item label="排序" prop="sortnumber">
+          <el-input-number controls-position="right" :precision="0" v-model="form.sortnumber"></el-input-number>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script>
+import { save } from "@/api/menu"
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        name: "",
+        pid: 0,
+        icon: "",
+        visible: 1,
+        path: "",
+        api_profix: "",
+        sortnumber: 0
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入名称" }
+        ],
+        path: [
+          { required: true, message: "请输入路由路径" },
+          {
+            validator: (rule, value, callback) => {
+              if (/^\/.|^#+/.test(value)) {
+                callback()
+              } else {
+                callback(new Error("请以'/'开头或为'#'"))
+              }
+            }
+          }
+        ],
+        api_profix: [
+          { required: true, message: "请输入api前缀" }
+        ]
+      }
+    }
+  },
+  methods: {
+    setPid (pid) {
+      this.form.pid = pid;
+    },
+
+    submit () {
+      this.$refs["elForm"].validate(async valid => {
+        if (valid) {
+          this.loading = true
+          try {
+            await save(this.form)
+            this.$message.success("新增成功")
+            this.$emit('refresh')
+            this.$emit('update:isShow',false)
+            this.loading = false
+            this.$refs["elForm"].resetFields()
+          } catch (err) {
+            this.loading = false
+          }
+        }
+      })
+    }
+  },
+  computed: {
+    formatList () {
+      return [
+        {
+          name: "#根目录",
+          id: 0
+        },
+        ...this.list
+      ]
+    }
+  },
+
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/system/components/AddRole.vue b/src/views/system/components/AddRole.vue
new file mode 100644
index 0000000..91571bb
--- /dev/null
+++ b/src/views/system/components/AddRole.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <vxe-modal :value="isShow"
+               show-footer
+               title="角色"
+               show-confirm-button
+               :width="600"
+               :height="400"
+               esc-closable
+               @input="e => $emit('update:isShow',e)">
+      <el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
+        <el-form-item label="角色" prop="name" required>
+          <el-input v-model="form.name" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="sortnumber">
+          <el-input-number controls-position="right" :precision="0" v-model="form.sortnumber"></el-input-number>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script>
+import { save } from "@/api/role"
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        name: "",
+        sortnumber: 0
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入角色" }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit () {
+      this.$refs["elForm"].validate(async valid => {
+        if (valid) {
+          this.loading = true
+          try {
+            await save(this.form)
+            this.$message.success("新增成功")
+            this.$emit('refresh')
+            this.$emit('update:isShow',false)
+            this.loading = false
+            this.$refs["elForm"].resetFields()
+          } catch (err) {
+            this.loading = false
+          }
+        }
+      })
+    }
+  },
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/system/components/AddUser.vue b/src/views/system/components/AddUser.vue
new file mode 100644
index 0000000..9f96edb
--- /dev/null
+++ b/src/views/system/components/AddUser.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <vxe-modal :value="isShow"
+               show-footer
+               title="角色"
+               show-confirm-button
+               :width="600"
+               :height="600"
+               esc-closable
+               @input="e => $emit('update:isShow',e)">
+      <el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
+        <el-form-item label="姓名" prop="name" required>
+          <el-input v-model="form.name" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="用户名" prop="username" required>
+          <el-input v-model="form.username" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password" required>
+          <el-input v-model="form.password" type="password" show-password clearable></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="sortnumber">
+          <el-input-number controls-position="right" :precision="0" v-model="form.sortnumber"></el-input-number>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script>
+import { save } from "@/api/user"
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        name: "",
+        username: "",
+        password: "",
+        sortnumber: 0
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入姓名" }
+        ],
+        username: [
+          { required: true, message: "请输入用户名" }
+        ],
+        password: [
+          { required: true, message: "请输入密码" },
+          {
+            validator: (rule, value, callback) => {
+              const reg = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}');
+              if (reg.test(value)) {
+                callback()
+              } else {
+                callback(new Error("您的密码复杂度太低（密码中必须包含字母、数字、特殊字符）！"))
+              }
+            }
+          }
+        ],
+      }
+    }
+  },
+  methods: {
+    submit () {
+      this.$refs["elForm"].validate(async valid => {
+        if (valid) {
+          this.loading = true
+          try {
+            await save(this.form)
+            this.$message.success("新增成功")
+            this.$emit('refresh')
+            this.$emit('update:isShow',false)
+            this.loading = false
+            this.$refs["elForm"].resetFields()
+          } catch (err) {
+            this.loading = false
+          }
+        }
+      })
+    }
+  },
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/system/components/BindPermissions.vue b/src/views/system/components/BindPermissions.vue
new file mode 100644
index 0000000..29a7fb3
--- /dev/null
+++ b/src/views/system/components/BindPermissions.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <vxe-modal :value="isShow"
+               show-footer
+               title="绑定权限"
+               show-confirm-button
+               :width="600"
+               :height="600"
+               esc-closable
+               @input="e => $emit('update:isShow',e)">
+      <template>
+        <Treeselect v-model="form.permission_id"
+                    :options="tableData"
+                    flat
+                    always-open
+                    multiple
+                    clearable
+                    noChildrenText="无子菜单"
+                    :normalizer="node => ({
+                        id: node.id,
+                        label: node.name,
+                        children: node.children,
+                        isDefaultExpanded: true
+                      })"></Treeselect>
+      </template>
+
+      <template #footer>
+        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script>
+import { setPermissions, getPermissions } from "@/api/role"
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+
+      tableData: [],
+      total: 0,
+      form: {
+        id: "",
+        permission_id: []
+      }
+    }
+  },
+  methods: {
+    /**
+     * @param {array[string]} keys
+     * @param {array[all]} values
+     * @returns {void}
+     */
+    setForm (keys = [],values = []) {
+      keys.forEach((key, index) => {
+        this.form[key] = values[index]
+      })
+    },
+
+    async getRoles () {
+      const res = await getPermissions()
+      this.tableData = res;
+    },
+
+    async submit () {
+      this.loading = true;
+      try {
+        await setPermissions(this.form)
+        this.$emit("update:isShow",false)
+        this.$emit("refresh")
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    }
+  },
+  computed: {},
+  created() {
+    this.getRoles()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.total {
+  color: #666;
+  text-align: right;
+  line-height: 3;
+}
+</style>
diff --git a/src/views/system/components/BindRoles.vue b/src/views/system/components/BindRoles.vue
new file mode 100644
index 0000000..a628edf
--- /dev/null
+++ b/src/views/system/components/BindRoles.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <vxe-modal :value="isShow"
+               show-footer
+               title="绑定角色"
+               show-confirm-button
+               :width="600"
+               :height="600"
+               esc-closable
+               @input="e => $emit('update:isShow',e)">
+      <template>
+        <vxe-table
+          stripe
+          style="margin-top: 10px;"
+          ref="table"
+          keep-source
+          show-overflow
+          :column-config="{ resizable: true }"
+          :checkbox-config="{ trigger: 'row', highlight: true }"
+          :data="tableData">
+          <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
+          <vxe-column type="seq" width="58" align="center"></vxe-column>
+          <vxe-column field="name" width="160" title="角色"></vxe-column>
+          <vxe-column field="permissions" title="权限菜单" min-width="200" show-overflow="tooltip">
+            <template #default="{ row }">
+              <div>
+                <el-tag v-for="item in row.permissions" :key="item.id">{{ item.name }}</el-tag>
+              </div>
+            </template>
+          </vxe-column>
+          <vxe-column field="sortnumber" width="80" title="排序" align="center"></vxe-column>
+        </vxe-table>
+        <p class="total" type="primary">共 {{ total }} 条数据</p>
+      </template>
+
+      <template #footer>
+        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script>
+import { setRoles, getRoles } from "@/api/user"
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+
+      tableData: [],
+      total: 0,
+      form: {
+        id: "",
+        role_id: []
+      }
+    }
+  },
+  methods: {
+    /**
+     * @param {array[string]} keys
+     * @param {array[all]} values
+     * @returns {void}
+     */
+    setForm (keys = [],values = []) {
+      keys.forEach((key, index) => {
+        this.form[key] = values[index]
+      })
+    },
+
+    setSelectRow () {
+      this.$nextTick(() => {
+        if (this.$refs['table']) {
+          this.$refs['table'].clearCheckboxRow()
+          this.$refs['table'].setCheckboxRow(
+            this.tableData.filter(row => this.form.role_id.findIndex(j => j === row.id) !== -1),
+            true
+          )
+        }
+      })
+    },
+
+    async getRoles () {
+      const res = await getRoles()
+      this.tableData = res;
+      this.total = res.length;
+    },
+
+    async submit () {
+      if (this.$refs['table']) {
+        this.loading = true;
+        const selectRecords = this.$refs['table'].getCheckboxRecords()
+        try {
+          setRoles({
+            id: this.form.id,
+            role_id: selectRecords.map(row => row.id)
+          })
+          //接口中角色信息有延迟
+          setTimeout(() => {
+            this.loading = false;
+            this.$emit("update:isShow",false)
+            this.$emit("refresh")
+          },500)
+        } catch (err) {
+          this.loading = false;
+        }
+      }
+    }
+  },
+  computed: {},
+  watch: {
+    "form.role_id": function(val, oldVal) {
+      this.setSelectRow()
+    }
+  },
+  created() {
+    this.getRoles()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.total {
+  color: #666;
+  text-align: right;
+  line-height: 3;
+}
+</style>
diff --git a/src/views/system/menu.vue b/src/views/system/menu.vue
index 192af7c..51114bf 100644
--- a/src/views/system/menu.vue
+++ b/src/views/system/menu.vue
@@ -1,33 +1,191 @@
 <template>
   <div>
-    <vxe-table
-      :align="allAlign"
-      :data="tableData">
-      <vxe-column type="seq" width="60"></vxe-column>
-      <vxe-column field="name" title="Name"></vxe-column>
-      <vxe-column field="sex" title="Sex"></vxe-column>
-      <vxe-column field="age" title="Age"></vxe-column>
-    </vxe-table>
+    <CardContainer>
+      <vxe-toolbar>
+        <template #buttons>
+          <el-button icon="el-icon-plus" type="primary" size="small" @click="isShowAdd = true">新增</el-button>
+          <el-button icon="el-icon-search" type="primary" plain size="small" @click="getList">搜索</el-button>
+        </template>
+      </vxe-toolbar>
+      <vxe-table
+        style="margin-top: 10px;"
+        ref="table"
+        :loading="loading"
+        keep-source
+        :row-config="{ useKey: 'id', isHover: true }"
+        :column-config="{ resizable: true }"
+        :edit-rules="validRules"
+        :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true }"
+        :tree-config="{ rowField: 'id', parentField: 'pid' }"
+        :data="tableData">
+        <vxe-column type="seq" width="58" align="center"></vxe-column>
+        <vxe-column field="name" tree-node width="160" title="菜单" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
+        <vxe-column field="path" title="路由地址" min-width="140" :edit-render="{ name: 'input', attrs: { type: 'text'} }">
+          <template #default="{ row }">
+            <template v-if="/#/g.test(row.path)">
+              <SvgIcon icon-class="folder" class-name="icon-folder"></SvgIcon>
+            </template>
+            <template v-else>
+              <span>{{ row.path }}</span>
+            </template>
+          </template>
+        </vxe-column>
+        <vxe-column field="api_profix" min-width="140" title="api前缀" :edit-render="{ name: 'input', attrs: { type: 'text'} }">
+          <template #default="{ row }">
+            <template v-if="/#/g.test(row.path)">
+              <SvgIcon icon-class="folder" class-name="icon-folder"></SvgIcon>
+            </template>
+            <template v-else>
+              <span>{{ row.path }}</span>
+            </template>
+          </template>
+        </vxe-column>
+        <vxe-column field="visible" width="100" align="center" title="是否显示" :edit-render="{ name: 'select', options: [{ value: 1, label: '显示' },{ value: 0, label: '隐藏' }] }"></vxe-column>
+        <vxe-column field="icon" width="160" align="center" title="图标" :edit-render="{ name: 'input', attrs: { type: 'text'} }">
+          <template #default="{ row }">
+            <Icon :icon="row.icon"></Icon>
+          </template>
+        </vxe-column>
+        <vxe-column field="sortnumber" width="80" title="排序" align="center" :edit-render="{ name: 'input', attrs: { type: 'number' } }"></vxe-column>
+        <vxe-column field="operate" title="操作" min-width="240">
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button size="small" type="primary" @click="saveRowEvent(row)">保存</el-button>
+              <el-button size="small" type="primary" plain @click="cancelRowEvent(row)">取消</el-button>
+            </template>
+            <template v-else>
+              <el-button size="small" type="success" @click="$refs['AddMenu'].setPid(row.id),isShowAdd = true">子菜单</el-button>
+              <el-button size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
+              <el-button size="small" type="danger" @click="destroyRowEvent(row)">删除</el-button>
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </CardContainer>
+
+    <add-menu :is-show.sync="isShowAdd" :list="tableData" ref="AddMenu" @refresh="getList"></add-menu>
   </div>
 </template>
 
 <script>
+import addMenu from "./components/AddMenu.vue"
+import Icon from "@/layout/components/Navbar/Icon.vue"
+import SvgIcon from "@/components/SvgIcon"
+import { index, save, destroy } from "@/api/menu"
+import { deepCopy } from '@/utils'
 export default {
+  components: {
+    SvgIcon,
+    Icon,
+    addMenu
+  },
   data() {
     return {
+      isShowAdd: false,
+
+      loading: false,
       allAlign: null,
-      tableData: [
-        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
-        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
-        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
-        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
-      ]
+      tableData: [],
+      validRules: {
+
+      },
+      form: {
+        id: "",
+        pid: "",
+        name: "",
+        url: "",
+        path: "",
+        api_profix: "",
+        icon: "",
+        visible: 1,
+        sortnumber: 0
+      },
+    }
+  },
+  methods: {
+    editRowEvent (row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].setEditRow(row)
+      }
+    },
+    cancelRowEvent (row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs['table'].revertData(row)
+        })
+      }
+    },
+
+    async getList () {
+      this.loading = true;
+      try {
+        const res = await index()
+        this.tableData = res;
+        this.loading = false;
+      } catch (err) {
+        console.error(err)
+        this.loading = false;
+      }
+    },
+
+    async saveRowEvent (row) {
+      try {
+        await this.$confirm("确认保存？","提示",{
+          confirmButtonText: "确认",
+          cancelButtonText: "取消"
+        })
+        let form = deepCopy(this.form)
+        for (let key in form) {
+          form[key] = row[key]
+        }
+        this.loading = true;
+        await save(form)
+        await this.getList();
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
+    async destroyRowEvent (row) {
+      try {
+        await this.$confirm("确认删除？","提示",{
+          confirmButtonText: "确认",
+          cancelButtonText: "取消"
+        })
+        this.loading = true;
+        if (row.id) {
+          await destroy({
+            id: row.id
+          })
+          await this.getList();
+        } else {
+          this.tableData.splice(this.tableData.findIndex(i => i._X_ROW_KEY === row._X_ROW_KEY),1)
+        }
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
+  },
+  computed: {
+    isActiveStatus () {
+      return function (row) {
+        if (this.$refs['table']) {
+          return  this.$refs['table'].isEditByRow(row)
+        }
+      }
     }
   },
-  methods: {},
-  computed: {}
+  created() {
+    this.getList()
+  }
 }
 </script>
 
 <style scoped lang="scss">
+.icon-folder {
+  width: 2em;
+  height: 2em;
+}
 </style>
diff --git a/src/views/system/role.vue b/src/views/system/role.vue
index c09b414..779f2d2 100644
--- a/src/views/system/role.vue
+++ b/src/views/system/role.vue
@@ -1,53 +1,72 @@
 <template>
   <div>
-    <div>
-      <el-button icon="el-icon-plus" type="primary" size="small" @click="add">新增</el-button>
-    </div>
-    <vxe-table
-      stripe
-      style="margin-top: 10px;"
-      ref="table"
-      :loading="loading"
-      keep-source
-      show-overflow
-      :edit-rules="validRules"
-      :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true }"
-      :align="allAlign"
-      :data="tableData">
-      <vxe-column type="seq" width="58" align="center"></vxe-column>
-      <vxe-column field="name" width="160" title="角色" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
-      <vxe-column field="sex" title="权限菜单" show-overflow="tooltip">
-        <template #default="{ row }">
-          <div>
-            <el-tag v-for="item in row.permissions" :key="item.id">{{ item.name }}</el-tag>
-          </div>
+    <card-container>
+      <vxe-toolbar>
+        <template #buttons>
+          <el-button icon="el-icon-plus" type="primary" size="small" @click="isShowAdd = true">新增</el-button>
+          <el-button icon="el-icon-search" type="primary" plain size="small" @click="getList">搜索</el-button>
         </template>
-      </vxe-column>
-      <vxe-column field="sortnumber" width="80" title="排序" align="center" :edit-render="{ name: 'input', attrs: { type: 'number' } }"></vxe-column>
-      <vxe-column field="operate" title="操作">
-        <template #default="{ row }">
-          <template v-if="isActiveStatus(row)">
-            <el-button size="small" type="primary" @click="saveRowEvent(row)">保存</el-button>
-            <el-button size="small" type="primary" plain @click="cancelRowEvent(row)">取消</el-button>
+      </vxe-toolbar>
+      <vxe-table
+        stripe
+        style="margin-top: 10px;"
+        ref="table"
+        :loading="loading"
+        keep-source
+        show-overflow
+        :column-config="{ resizable: true }"
+        :edit-rules="validRules"
+        :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, isHover: true }"
+        :align="allAlign"
+        :data="tableData">
+        <vxe-column type="seq" width="58" align="center"></vxe-column>
+        <vxe-column field="name" width="160" title="角色" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
+        <vxe-column field="permissions" title="权限菜单" show-overflow="tooltip">
+          <template #default="{ row }">
+            <div>
+              <el-tag v-for="item in row.permissions" :key="item.id">{{ item.name }}</el-tag>
+            </div>
           </template>
-          <template v-else>
-            <el-button size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
+        </vxe-column>
+        <vxe-column field="sortnumber" width="80" title="排序" align="center" :edit-render="{ name: 'input', attrs: { type: 'number' } }"></vxe-column>
+        <vxe-column field="operate" title="操作" min-width="220">
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button size="small" type="primary" @click="saveRowEvent(row)">保存</el-button>
+              <el-button size="small" type="primary" plain @click="cancelRowEvent(row)">取消</el-button>
+            </template>
+            <template v-else>
+              <el-button size="small" type="success" @click="bind(row)">授权</el-button>
+              <el-button size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
+              <el-button size="small" type="danger" @click="destroyRowEvent(row)">删除</el-button>
+            </template>
           </template>
-          <el-button size="small" type="danger" @click="destroyRowEvent(row)">删除</el-button>
-        </template>
-      </vxe-column>
-    </vxe-table>
+        </vxe-column>
+      </vxe-table>
+
+      <p class="total" type="primary">共 {{ total }} 条数据</p>
+    </card-container>
 
-    <p class="total" type="primary">共 {{ total }} 条数据</p>
+    <add-role ref="AddRole" :is-show.sync="isShowAdd" @refresh="getList"></add-role>
+    <bind-permissions ref="BindPermissions" :is-show.sync="isShowBind" @refresh="getList"></bind-permissions>
   </div>
 </template>
 
 <script>
+import BindPermissions from './components/BindPermissions.vue'
+import AddRole from "./components/AddRole.vue"
 import { deepCopy } from "@/utils"
 import { index, save, destroy } from "@/api/role"
 export default {
+  components: {
+    AddRole,
+    BindPermissions,
+  },
   data() {
     return {
+      isShowBind: false,
+      isShowAdd: false,
+
       loading: false,
       total: 0,
       allAlign: null,
@@ -63,6 +82,11 @@ export default {
     }
   },
   methods: {
+    bind (row) {
+      this.isShowBind = true;
+      this.$refs['BindPermissions'].setForm(['id','permission_id'],[row.id,row.permissions?.map(i => i.id)||[]])
+    },
+
     editRowEvent (row) {
       if (this.$refs['table']) {
         this.$refs['table'].setEditRow(row)
@@ -83,7 +107,6 @@ export default {
         const res = await index()
         this.tableData = res.rows;
         this.total = res.total;
-        console.log(res)
         this.loading = false;
       } catch (err) {
         console.error(err)
@@ -91,15 +114,6 @@ export default {
       }
     },
 
-    add () {
-      this.tableData.unshift(deepCopy(this.form))
-      if (this.$refs['table']) {
-        this.$nextTick(() => {
-          this.$refs['table'].setEditRow(this.$refs['table'].tableData[0])
-        })
-      }
-    },
-
     async saveRowEvent (row) {
       try {
         await this.$confirm("确认保存？","提示",{
@@ -110,6 +124,9 @@ export default {
         for (let key in form) {
           form[key] = row[key]
         }
+        if (!form.password) {
+          delete form.password
+        }
         this.loading = true;
         await save(form)
         await this.getList();
diff --git a/src/views/system/user.vue b/src/views/system/user.vue
index 1f9066c..5af81d2 100644
--- a/src/views/system/user.vue
+++ b/src/views/system/user.vue
@@ -1,17 +1,210 @@
 <template>
   <div>
+    <card-container>
+      <vxe-toolbar>
+        <template #buttons>
+          <el-button icon="el-icon-plus" type="primary" size="small" @click="isShowAdd = true">新增</el-button>
+          <el-button icon="el-icon-search" type="primary" plain size="small" @click="getList">搜索</el-button>
+        </template>
+      </vxe-toolbar>
+      <vxe-table
+        stripe
+        style="margin-top: 10px;"
+        ref="table"
+        :loading="loading"
+        keep-source
+        show-overflow
+        :column-config="{ resizable: true }"
+        :edit-rules="validRules"
+        :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, isHover: true }"
+        :align="allAlign"
+        :data="tableData">
+        <vxe-column type="seq" width="58" align="center"></vxe-column>
+        <vxe-column field="name" width="140" title="姓名" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
+        <vxe-column field="username" width="160" title="用户名" :edit-render="{ name: 'input', attrs: { type: 'text'} }"></vxe-column>
+        <vxe-column field="password" width="160" title="密码" :edit-render="{ name: 'input', attrs: { type: 'password'} }">
+          <template #default="{ row }">
+            <span>***</span>
+          </template>
+        </vxe-column>
+        <vxe-column field="roles" title="角色" min-width="200" show-overflow="tooltip">
+          <template #default="{ row }">
+            <div>
+              <el-tag v-for="item in row.roles" :key="item.id">{{ item.name }}</el-tag>
+            </div>
+          </template>
+        </vxe-column>
+        <vxe-column field="sortnumber" width="80" title="排序" align="center" :edit-render="{ name: 'input', attrs: { type: 'number' } }"></vxe-column>
+        <vxe-column field="operate" title="操作" min-width="240">
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button size="small" type="primary" @click="saveRowEvent(row)">保存</el-button>
+              <el-button size="small" type="primary" plain @click="cancelRowEvent(row)">取消</el-button>
+            </template>
+            <template v-else>
+              <el-button size="small" type="success" @click="bind(row)">绑定角色</el-button>
+              <el-button size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
+              <el-button size="small" type="danger" @click="destroyRowEvent(row)">删除</el-button>
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+      <el-pagination
+        style="margin-top: 10px;"
+        @size-change="e => {
+          select.rows = e;
+          select.page = 1;
+          getList();
+        }"
+        @current-change="e => {
+          select.page = e;
+          getList();
+        }"
+        :current-page="select.page"
+        :page-sizes="[20, 30, 40, 50]"
+        :page-size="select.rows"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </card-container>
+
+    <AddUser :is-show.sync="isShowAdd" @refresh="getList"></AddUser>
+    <BindRoles ref="BindRoles" :is-show.sync="isShowBind" @refresh="getList"></BindRoles>
   </div>
 </template>
 
 <script>
+import BindRoles from './components/BindRoles.vue'
+import AddUser from "./components/AddUser.vue"
+import { deepCopy } from "@/utils"
+import { index, save, destroy } from "@/api/user"
 export default {
+  components: {
+    AddUser,
+    BindRoles
+  },
   data() {
-    return {}
+    return {
+      isShowBind: false,
+      isShowAdd: false,
+
+      select: {
+        page: 1,
+        rows: 20,
+        keyword: ""
+      },
+      loading: false,
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      validRules: {
+
+      },
+      form: {
+        id: "",
+        name: "",
+        username: "",
+        password: "",
+        sortnumber: 0
+      }
+    }
+  },
+  methods: {
+    bind (row) {
+      this.isShowBind = true
+      this.$refs['BindRoles'].setForm(['id', 'role_id'],[row.id,row.roles?.map(i => i.id)||[]])
+    },
+
+    editRowEvent (row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].setEditRow(row)
+      }
+    },
+    cancelRowEvent (row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs['table'].revertData(row)
+        })
+      }
+    },
+
+    async getList () {
+      this.loading = true;
+      try {
+        const res = await index(this.select)
+        this.tableData = res.data;
+        this.total = res.total;
+        console.log(res)
+        this.loading = false;
+      } catch (err) {
+        console.error(err)
+        this.loading = false;
+      }
+    },
+
+    async saveRowEvent (row) {
+      try {
+        await this.$confirm("确认保存？","提示",{
+          confirmButtonText: "确认",
+          cancelButtonText: "取消"
+        })
+        let form = deepCopy(this.form)
+        for (let key in form) {
+          form[key] = row[key]
+        }
+        this.loading = true;
+        await save(form)
+        await this.getList();
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
+    async destroyRowEvent (row) {
+      try {
+        await this.$confirm("确认删除？","提示",{
+          confirmButtonText: "确认",
+          cancelButtonText: "取消"
+        })
+        this.loading = true;
+        if (row.id) {
+          await destroy({
+            id: row.id
+          })
+          await this.getList();
+        } else {
+          this.tableData.splice(this.tableData.findIndex(i => i._X_ROW_KEY === row._X_ROW_KEY),1)
+        }
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
   },
-  methods: {},
-  computed: {}
+  computed: {
+    isActiveStatus () {
+      return function (row) {
+        if (this.$refs['table']) {
+          return  this.$refs['table'].isEditByRow(row)
+        }
+      }
+    }
+  },
+  created() {
+    this.getList()
+  }
 }
 </script>
 
 <style scoped lang="scss">
+.total {
+  color: #666;
+  text-align: right;
+  line-height: 3;
+}
+::v-deep .el-tag + .el-tag {
+  margin-left: 4px;
+}
 </style>