diff --git a/src/api/menu.ts b/src/api/menu.ts
index 6a950d92d5abc65a15c00483d1e76793c2367f84..c612318c5fe8fb4c634c1a657c41c415b5edb371 100644
--- a/src/api/menu.ts
+++ b/src/api/menu.ts
@@ -2,24 +2,11 @@ import { Menu } from '../types/menu'
 import request, { QuickResponseData } from '../utils/request'
 
 const Api = {
-  permissionMenuList: '/api/menu/getPermission',
   list: '/api/menu/getList',
   add: '/api/menu/add',
   update: '/api/menu/update',
   delete: '/api/menu/delete',
 }
-
-export const getPermissionMenuList = (
-  userId: string
-): Promise<QuickResponseData<Array<Menu>>> => {
-  return request<QuickResponseData<Array<Menu>>>({
-    url: Api.permissionMenuList,
-    method: 'GET',
-    params: {
-      id: userId,
-    },
-  })
-}
 export const getMenuList = (): Promise<QuickResponseData<Array<Menu>>> => {
   return request<QuickResponseData<Array<Menu>>>({
     url: Api.list,
diff --git a/src/api/role.ts b/src/api/role.ts
index 64b7e7aa94650887512feda4e15c1da472997f99..0c70ab8abb7d466136fce2df711ceae057ab97b9 100644
--- a/src/api/role.ts
+++ b/src/api/role.ts
@@ -1,12 +1,29 @@
+import { Menu } from '@/types/menu'
 import { Role } from '../types/role'
 import request, { QuickResponseData } from '../utils/request'
 
 const Api = {
+  menuList: '/api/role/getMenuPermission',
+  userList: '/api/role/getUserPermission',
   list: '/api/role/getList',
   add: '/api/role/add',
   update: '/api/role/update',
   delete: '/api/role/delete',
+  assignPermission: '/api/role/assignPermission',
+  assignUser: '/api/role/assignUser',
 }
+export const getMenuPermission = (
+  roleId: string
+): Promise<QuickResponseData<Array<Menu>>> => {
+  return request<QuickResponseData<Array<Menu>>>({
+    url: Api.menuList,
+    method: 'GET',
+    params: {
+      id: roleId,
+    },
+  })
+}
+
 export const getRoleList = (): Promise<QuickResponseData<Array<Role>>> => {
   return request<QuickResponseData<Array<Role>>>({
     url: Api.list,
@@ -37,3 +54,17 @@ export const deleteRole = (id: string) => {
     },
   })
 }
+export const assignPermission = (data: any) => {
+  return request({
+    url: Api.assignPermission,
+    method: 'POST',
+    data,
+  })
+}
+export const assignUser = (data: any) => {
+  return request({
+    url: Api.assignUser,
+    method: 'POST',
+    data,
+  })
+}
diff --git a/src/api/user.ts b/src/api/user.ts
index 96692d974af4d1e1a6f4bdbbce05ee8e06f9f703..9b6fab333fe7367483d8fb325b0cf8783ab0484b 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,3 +1,4 @@
+import { Menu } from '@/types/menu'
 import { ChangePassword, User } from '../types/user'
 import request, { QuickResponseData } from '../utils/request'
 
@@ -15,12 +16,14 @@ const Api = {
   enabled: '/api/user/enabled',
   disable: '/api/user/disable',
 }
-export const getPermission = (userId: string) => {
+export const getPermission = (
+  userId: string
+): Promise<QuickResponseData<Array<Menu>>> => {
   return request({
     url: Api.permission,
     method: 'GET',
-    data: {
-      userId,
+    params: {
+      id: userId,
     },
   })
 }
diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 6dc6f2ac7efdff5c8ba016df9632512e1272f4c2..92cd07a5854cc116ed465fb08e8222a6c302ef8f 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -411,107 +411,120 @@ onActivated(() => {
 })
 </script>
 <template>
-  <el-row :gutter="40">
-    <el-col :span="leftTree ? treeSpan : 0">
-      <el-tree
-        v-if="leftTree"
-        ref="treeRef"
-        :data="treeData"
-        :props="defaultTreeProps"
-        node-key="id"
-        :highlight-current="true"
-        @node-click="handleTreeNodeClick"
-      >
-      </el-tree>
-    </el-col>
-    <el-col :span="leftTree ? 24 - treeSpan : 24">
-      <quick-search
-        v-if="searchFormModel"
-        :model="searchFormModel"
-        :items="searchFormItems"
-        @on-search="handleSearchSubmit"
-        @on-clear="handleSearchClear"
-      >
-      </quick-search>
-      <quick-toolbar
-        :table-toolbar="tableToolbar"
-        :add-button-name="toolbar?.addButtonName"
-        :batch-delete-button-name="toolbar?.batchDeleteButtonName"
-        :import-button-name="toolbar?.importButtonName"
-        :export-button-name="toolbar?.exportButtonName"
-        :print-button-name="toolbar?.printButtonName"
-        :refresh-button-name="toolbar?.refreshButtonName"
-        :hidden-add-button="toolbar?.hiddenAddButton"
-        :hidden-batch-delete-button="toolbar?.hiddenBatchDeleteButton"
-        :hidden-import-button="toolbar?.hiddenImportButton"
-        :hidden-export-button="toolbar?.hiddenExportButton"
-        :hidden-print-button="toolbar?.hiddenPrintButton"
-        :hidden-refres-hbutton="toolbar?.hiddenRefreshButton"
-        @on-add="handleAdd"
-        @on-batch-delete="handleBatchDelete"
-        @on-import="handleImport"
-        @on-export="handleExport"
-        @on-print="handlePrint"
-        @on-refresh="handleRefresh"
-        @on-custom-toolbar-click="handleCustomToolbarClick"
-      ></quick-toolbar>
-      <quick-table
-        :data="tableData"
-        :columns="tableColumns"
-        :table-actionbar="tableActionbar"
-        :edit-button-name="actionbar?.editButtonName"
-        :delete-button-name="actionbar?.deleteButtonName"
-        :detail-button-name="actionbar?.detailButtonName"
-        :hidden-edit-button="actionbar?.hiddenEditButton"
-        :hidden-delete-button="actionbar?.hiddenDeleteButton"
-        :hidden-detail-button="actionbar?.hiddenDetailButton"
-        @on-row-edit="handleEdit"
-        @on-row-delete="handleDelete"
-        @on-row-detail="handleDetail"
-        @on-selection-change="handleSelectionChange"
-        @on-done="handleDone"
-      >
-      </quick-table>
-      <el-pagination
-        v-if="page"
-        v-model:currentPage="page.current"
-        v-model:page-size="page.size"
-        :page-sizes="page.sizes"
-        :small="false"
-        :disabled="false"
-        :background="false"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="page.total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-      <el-dialog
-        v-model="dialogFormVisible"
-        :title="title"
-        width="35%"
-        @close="handleCancel()"
-      >
-        <quick-form
-          ref="quickFormRef"
-          :model="formModel"
-          :form-items="formItems"
-          :form-type="dialogFormType"
-          :hidden-action="true"
-          @submit="handleSubmit"
+  <div class="quick-crud">
+    <el-row :gutter="40">
+      <el-col :span="leftTree ? treeSpan : 0">
+        <el-card shadow="never">
+          <el-tree
+            v-if="leftTree"
+            ref="treeRef"
+            :data="treeData"
+            :props="defaultTreeProps"
+            node-key="id"
+            :highlight-current="true"
+            @node-click="handleTreeNodeClick"
+          >
+          </el-tree>
+        </el-card>
+      </el-col>
+      <el-col :span="leftTree ? 24 - treeSpan : 24">
+        <quick-search
+          v-if="searchFormModel"
+          :model="searchFormModel"
+          :items="searchFormItems"
+          @on-search="handleSearchSubmit"
+          @on-clear="handleSearchClear"
         >
-        </quick-form>
-        <template #footer>
-          <span class="dialog-footer">
-            <template v-if="dialogFormType === 'detail'">
-              <el-button type="primary" @click="handleCancel()">关闭</el-button>
-            </template>
-            <template v-else>
-              <el-button @click="handleCancel()">取消</el-button>
-              <el-button type="primary" @click="handleOk()">确定</el-button>
-            </template>
-          </span>
-        </template>
-      </el-dialog>
-    </el-col>
-  </el-row>
+        </quick-search>
+        <quick-toolbar
+          :table-toolbar="tableToolbar"
+          :add-button-name="toolbar?.addButtonName"
+          :batch-delete-button-name="toolbar?.batchDeleteButtonName"
+          :import-button-name="toolbar?.importButtonName"
+          :export-button-name="toolbar?.exportButtonName"
+          :print-button-name="toolbar?.printButtonName"
+          :refresh-button-name="toolbar?.refreshButtonName"
+          :hidden-add-button="toolbar?.hiddenAddButton"
+          :hidden-batch-delete-button="toolbar?.hiddenBatchDeleteButton"
+          :hidden-import-button="toolbar?.hiddenImportButton"
+          :hidden-export-button="toolbar?.hiddenExportButton"
+          :hidden-print-button="toolbar?.hiddenPrintButton"
+          :hidden-refres-hbutton="toolbar?.hiddenRefreshButton"
+          @on-add="handleAdd"
+          @on-batch-delete="handleBatchDelete"
+          @on-import="handleImport"
+          @on-export="handleExport"
+          @on-print="handlePrint"
+          @on-refresh="handleRefresh"
+          @on-custom-toolbar-click="handleCustomToolbarClick"
+        ></quick-toolbar>
+        <quick-table
+          :data="tableData"
+          :columns="tableColumns"
+          :table-actionbar="tableActionbar"
+          :edit-button-name="actionbar?.editButtonName"
+          :delete-button-name="actionbar?.deleteButtonName"
+          :detail-button-name="actionbar?.detailButtonName"
+          :hidden-edit-button="actionbar?.hiddenEditButton"
+          :hidden-delete-button="actionbar?.hiddenDeleteButton"
+          :hidden-detail-button="actionbar?.hiddenDetailButton"
+          @on-row-edit="handleEdit"
+          @on-row-delete="handleDelete"
+          @on-row-detail="handleDetail"
+          @on-selection-change="handleSelectionChange"
+          @on-done="handleDone"
+        >
+        </quick-table>
+        <el-pagination
+          v-if="page"
+          v-model:currentPage="page.current"
+          v-model:page-size="page.size"
+          :page-sizes="page.sizes"
+          :small="false"
+          :disabled="false"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+        <el-dialog
+          v-model="dialogFormVisible"
+          :title="title"
+          width="35%"
+          @close="handleCancel()"
+        >
+          <quick-form
+            ref="quickFormRef"
+            :model="formModel"
+            :form-items="formItems"
+            :form-type="dialogFormType"
+            :hidden-action="true"
+            @submit="handleSubmit"
+          >
+          </quick-form>
+          <template #footer>
+            <span class="dialog-footer">
+              <template v-if="dialogFormType === 'detail'">
+                <el-button type="primary" @click="handleCancel()"
+                  >关闭</el-button
+                >
+              </template>
+              <template v-else>
+                <el-button @click="handleCancel()">取消</el-button>
+                <el-button type="primary" @click="handleOk()">确定</el-button>
+              </template>
+            </span>
+          </template>
+        </el-dialog>
+      </el-col>
+    </el-row>
+  </div>
 </template>
+<style lang="scss" scoped>
+.quick-crud {
+  .el-card {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/components/QuickForm/index.vue b/src/components/QuickForm/index.vue
index 45e41f741cc42b2d38cba8a8274675cc096693d4..29f9373eaf1054f502355d68d02c37616e858e0e 100644
--- a/src/components/QuickForm/index.vue
+++ b/src/components/QuickForm/index.vue
@@ -171,6 +171,9 @@ defineExpose({ handleSubmit })
             "
           />
         </template>
+        <template v-else-if="item.type === 'switch'">
+          <el-switch v-model="model[item.vModel]" />
+        </template>
         <template v-else>
           <el-input
             v-model="model[item.vModel]"
diff --git a/src/components/QuickToolbar/index.vue b/src/components/QuickToolbar/index.vue
index b924ee4600237897797093ef86a03b804879ab40..4df432ee5b0d32d4f7b65e6dd4478e32d204e865 100644
--- a/src/components/QuickToolbar/index.vue
+++ b/src/components/QuickToolbar/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineProps, defineEmits, toRefs, Ref } from 'vue'
-import { ToolBar } from '../../types/table'
+import { Toolbar } from '../../types/table'
 
 /**
  * props
@@ -89,12 +89,12 @@ const {
   hiddenExportButton: Ref<boolean>
   hiddenPrintButton: Ref<boolean>
   hiddenRefreshButton: Ref<boolean>
-  tableToolbar: Ref<boolean | ToolBar>
+  tableToolbar: Ref<boolean | Toolbar>
 }
 /**
  * 类型转换
  */
-const toolbar = tableToolbar.value as ToolBar
+const toolbar = tableToolbar.value as Toolbar
 /**
  * emits
  */
diff --git a/src/layout/components/AiniMenu/index.vue b/src/layout/components/AiniMenu/index.vue
index e6fb2c49d5930a6f977365413e3dfb72b95ed742..4dafee5e8814c5545a77d4fc6044112c06014721 100644
--- a/src/layout/components/AiniMenu/index.vue
+++ b/src/layout/components/AiniMenu/index.vue
@@ -1,56 +1,57 @@
 <script lang="ts" setup>
-import {
-  HomeFilled,
-  // Document,
-  Menu as IconMenu,
-  // Location,
-  Setting,
-} from '@element-plus/icons-vue'
-import { computed, reactive, watch, ref } from 'vue'
-import { router } from '@/router'
+import { HomeFilled, Setting } from '@element-plus/icons-vue'
+import { computed, watch, ref } from 'vue'
 import { useAppStore } from '@/store/modules/app'
+import { useUserStore } from '@/store/modules/user'
 import { useMenuStore } from '@/store/modules/menu'
 import { useTabStore } from '@/store/modules/tab'
-import { MenuBar } from '@/types/menu'
-
-import AiniMenuItem from '../AiniMenuItem/index.vue'
-import { Tab } from '../../../types/tab'
+import { Menubar } from '@/types/menu'
+import { Tab } from '@/types/tab'
+import AiniMenuItem from '@/layout/components/AiniMenuItem/index.vue'
 
 const appStore = useAppStore()
+const userStore = useUserStore()
 const menuStore = useMenuStore()
 const tabStore = useTabStore()
-const defaultActive = ref('home')
-const menuNewList = reactive<Array<MenuBar>>([])
+
 const isCollapse = computed(() => appStore.getCollapse)
+
+const defaultActive = ref('home')
 const activeMenuId = computed(() => menuStore.getAciveMenuId)
-const menuList = computed(() => menuStore.getMenuList)
+const menuList = computed(() => userStore.getMenuList)
 const handleOpen = (key: string, keyPath: string[]) => {
   console.log(key, keyPath)
 }
 const handleClose = (key: string, keyPath: string[]) => {
   console.log(key, keyPath)
 }
-
-const menuClick = (menu: MenuBar) => {
+const menuClick = (menu: Menubar) => {
   const { id, menuName, path } = menu
   const tab: Tab = {
     id,
     name: menuName,
     path,
   }
-  // menuStore.setActiveMenu(menu)
   tabStore.setActiveTab(tab)
 }
 const homeMenuClick = () => {
-  const menu: MenuBar = {
+  const menu: Menubar = {
     id: 'home',
+    menuId: 'home',
     menuName: '首页',
+    menuType: '0',
+    icon: '',
+    sort: 0,
+    pid: '0',
+    link: 0,
+    enabled: 0,
+    status: 0,
     path: '/home',
+    children: [],
   }
   menuClick(menu)
 }
 watch(activeMenuId, (val: string) => {
-  debugger
   defaultActive.value = val
 })
 </script>
diff --git a/src/layout/components/AiniMenuItem/index.vue b/src/layout/components/AiniMenuItem/index.vue
index 61e3845740809c6d448a52bfb070e52416130938..97673da96627d358753e062f4a0f38721ed1ae7f 100644
--- a/src/layout/components/AiniMenuItem/index.vue
+++ b/src/layout/components/AiniMenuItem/index.vue
@@ -1,19 +1,13 @@
 <script lang="ts" setup>
-import {
-  HomeFilled,
-  // Document,
-  Menu as IconMenu,
-  // Location,
-  Setting,
-} from '@element-plus/icons-vue'
-import { Ref, computed, defineProps, toRefs } from 'vue'
-import { router } from '@/router'
-import { useAppStore } from '@/store/modules/app'
-import { useMenuStore } from '@/store/modules/menu'
+import { Ref, defineProps, toRefs } from 'vue'
 import { useTabStore } from '@/store/modules/tab'
 import { Menubar } from '@/types/menu'
 import { Tab } from '@/types/tab'
 
+const tabStore = useTabStore()
+/**
+ * props
+ */
 const props = defineProps({
   menu: {
     type: Object,
@@ -28,24 +22,14 @@ const props = defineProps({
     },
   },
 })
-
+/**
+ * props toRefs
+ */
 const { menu, parent } = toRefs(props) as {
   menu: Ref<Menubar>
   parent: Ref<Menubar>
 }
-
-const appStore = useAppStore()
-const menuStore = useMenuStore()
-const tabStore = useTabStore()
-const isCollapse = computed(() => appStore.getCollapse)
-const tabList = computed(() => tabStore.getMenuList)
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const menuClick = (item: any) => {
+const menuClick = () => {
   const { id, menuName, path } = menu.value
   const routerPath = `${parent.value.path}/${path}`
   const tab: Tab = {
@@ -54,7 +38,6 @@ const menuClick = (item: any) => {
     path: routerPath,
   }
   tabStore.addTab(tab)
-  // menuStore.setActiveMenu(menu.value)
 }
 </script>
 <template>
diff --git a/src/layout/components/AiniSidebar/index.vue b/src/layout/components/AiniSidebar/index.vue
index 1352b13e2567e45b14688969f0ffb5b67df3c474..6e1d9caf32589f295fd1815b44a6c2d4296b67ac 100644
--- a/src/layout/components/AiniSidebar/index.vue
+++ b/src/layout/components/AiniSidebar/index.vue
@@ -1,23 +1,10 @@
 <script lang="ts" setup>
-import {
-  HomeFilled,
-  // Document,
-  Menu as IconMenu,
-  // Location,
-  Setting,
-} from '@element-plus/icons-vue'
 import { computed } from 'vue'
 import { useAppStore } from '../../../store/modules/app'
-import AiniMenu from '../AiniMenu/index.vue'
+import AiniMenu from '@/layout/components/AiniMenu/index.vue'
 
 const appStore = useAppStore()
 const isCollapse = computed(() => appStore.getCollapse)
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
 </script>
 
 <template>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 2c6d48d3058075368c6051870ac9dd5ad1f46228..29c3a6c130f1b93045bff662e74423af0c6cb472 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,41 +1,35 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { computed, watch, ref } from 'vue'
-// import AiniBottom from './components/AiniBottom/index.vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
-import AiniTop from './components/AiniTop/index.vue'
-import AiniSidebar from './components/AiniSidebar/index.vue'
 import { useAppStore } from '../store/modules/app'
 import { useMenuStore } from '../store/modules/menu'
 import { useTabStore } from '../store/modules/tab'
-import { Tab } from '../types/tab'
+import { Tab } from '@/types/tab'
+import AiniTop from './components/AiniTop/index.vue'
+import AiniSidebar from './components/AiniSidebar/index.vue'
 
 const route = useRoute()
 const router = useRouter()
 const appStore = useAppStore()
 const menuStore = useMenuStore()
-const tabStore = useTabStore()
-const isCollapse = computed(() => appStore.getCollapse)
-const activeTab = computed(() => tabStore.getActiveTab)
-const menuList = computed(() => menuStore.getMenuList)
-const tabList = computed(() => tabStore.getTabList)
 
+/**
+ * 国际化
+ */
 const { t } = useI18n()
 console.log('i18n', t('title'))
-const editableTabsValue = ref('home')
-router.push('/home')
-const editableTabs = ref([])
-watch(activeTab, (val) => {
-  if (val) {
-    const { id, path } = val
-    editableTabsValue.value = id
-    router.push(path)
-  }
-})
-watch(tabList, (val) => {
-  editableTabs.value = val
-})
 
+const isCollapse = computed(() => appStore.getCollapse)
+router.push('/home')
+/**
+ * 选项卡
+ */
+const tabStore = useTabStore()
+const editableTabsValue = ref('home')
+const editableTabs = ref<Array<Tab>>([])
+const activeTab = computed(() => tabStore.getActiveTab)
+const tabList = computed(() => tabStore.getTabList)
 const handleTabsEdit = (targetName: string, action: 'remove' | 'add'): void => {
   if (action === 'remove') {
     tabStore.deleteTab(targetName)
@@ -48,6 +42,20 @@ const handleClick = (activeName: string) => {
     menuStore.setActiveMenuId(activeName)
   }
 }
+watch(activeTab, (val) => {
+  if (val) {
+    const { id, path } = val
+    if (id) {
+      editableTabsValue.value = id
+    }
+    if (path) {
+      router.push(path)
+    }
+  }
+})
+watch(tabList, (val) => {
+  editableTabs.value = val
+})
 </script>
 
 <template>
@@ -62,7 +70,7 @@ const handleClick = (activeName: string) => {
             <aini-top></aini-top>
           </el-card>
         </el-header>
-        <el-main>
+        <el-main class="content">
           <el-card shadow="always" :body-style="{ padding: 10 }">
             <el-tabs
               v-model="editableTabsValue"
@@ -78,7 +86,6 @@ const handleClick = (activeName: string) => {
                 :label="item.name"
                 :name="item.id"
               >
-                <!-- <router-view></router-view> -->
                 <router-view :key="route.fullPath" />
               </el-tab-pane>
             </el-tabs>
@@ -90,24 +97,16 @@ const handleClick = (activeName: string) => {
       </el-container>
     </el-container>
   </div>
-
-  <!-- <div class="aini-layout">
-    <aini-sidebar></aini-sidebar>
-    <aini-top></aini-top>
-    <div class="aini-layout-content">
-      <el-main>
-        <router-view></router-view>
-      </el-main>
-    </div>
-    <aini-bottom></aini-bottom>
-  </div> -->
 </template>
 
 <style lang="scss" scoped>
 .aini-layout {
   background: #f0f2f5;
   height: 100%;
-  .aini-layout-content {
+  .content {
+    .el-card {
+      height: 100%;
+    }
   }
 }
 </style>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index d64949ff63578f607fc4b5c4fab096a8d98461d0..8fb8e03e52807d8c13403f98f0c867a08f0f9499 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,19 +1,17 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
-import { router } from '../../router'
-import { FormItem } from '../../types/form'
+import { router } from '@/router'
+import { FormItem } from '@/types/form'
 import { LoginParams } from '@/types/login'
-import { useLoginStore } from '../../store/modules/login'
-import { useUserStore } from '../../store/modules/user'
-import { useMenuStore } from '../../store/modules/menu'
+import { useLoginStore } from '@/store/modules/login'
+import { useUserStore } from '@/store/modules/user'
 
-import QuickForm from '../../components/QuickForm/index.vue'
+import QuickForm from '@/components/QuickForm/index.vue'
 /**
  * 属性
  */
 const loginStore = useLoginStore()
 const userStore = useUserStore()
-const menuStore = useMenuStore()
 const form = reactive<LoginParams>({
   tenant: '',
   userName: '',
@@ -51,7 +49,7 @@ const handleLogin = async (): Promise<void> => {
   const user = await userStore.getUserInfo(userName)
   if (user) {
     const { id } = user
-    await menuStore.getMenuListByUserId(id.toString())
+    userStore.getPermission(id.toString())
     router.push('/')
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index b6e0223aa86263bc06bcab4413f10bb7bd11544e..7e785b9f8d7547d091df2fd435289ca4603905cb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -73,5 +73,16 @@ export const router = createRouter({
         },
       ],
     },
+    {
+      path: '/permission',
+      component: layout,
+      redirect: 'rolePermission',
+      children: [
+        {
+          path: 'rolePermission',
+          component: () => import('../views/rolePermission/index.vue'),
+        },
+      ],
+    },
   ],
 })
diff --git a/src/store/modules/menu.ts b/src/store/modules/menu.ts
index aef2163611f761588c9920b9705244b3e6bcf332..939ff2bf1d6f5dbc855b3020222534766ffe809c 100644
--- a/src/store/modules/menu.ts
+++ b/src/store/modules/menu.ts
@@ -1,47 +1,32 @@
 import { defineStore } from 'pinia'
 import { menuFormat } from '@/utils/index'
 import { QuickResponseData } from '@/utils/request'
-import { Menu, MenuBar } from '@/types/menu'
+import { Menu, Menubar, MenuTree } from '@/types/menu'
 import { getPermissionMenuList } from '../../api/menu'
 
 interface MenuState {
   activeMenuId: string
-  menuList: Array<MenuBar>
-  permissionMenuList: Array<Menu>
+  permissionMenuTreeList: Array<MenuTree>
 }
 export const useMenuStore = defineStore('menuStore', {
   state: (): MenuState => {
     return {
       activeMenuId: 'home',
-      menuList: [],
-      permissionMenuList: [],
+      permissionMenuTreeList: [],
     }
   },
   getters: {
     getAciveMenuId(): string {
       return this.activeMenuId
     },
-    getMenuList(): Array<MenuBar> {
-      return this.menuList
+    getPermissionMenuTreeList(): Array<MenuTree> {
+      return this.permissionMenuTreeList
     },
   },
   actions: {
     setActiveMenuId(activeMenuId: string) {
       this.activeMenuId = activeMenuId
     },
-    getMenuListByUserId(
-      userId: string
-    ): Promise<QuickResponseData<Array<Menu>>> {
-      return new Promise((resolve) => {
-        getPermissionMenuList(userId).then((res) => {
-          const { data: permissionMenuList } = res
-          this.permissionMenuList = permissionMenuList
-          const menuList = menuFormat(permissionMenuList)
-          this.menuList = menuList
-          resolve(res)
-        })
-      })
-    },
   },
   persist: {
     enabled: true,
diff --git a/src/store/modules/tab.ts b/src/store/modules/tab.ts
index d86a7f3157bee8e7854572fa030ce19b2f88c5ee..56c1aa3af54d0f1a01359d9b37e578aa49ae41c3 100644
--- a/src/store/modules/tab.ts
+++ b/src/store/modules/tab.ts
@@ -43,7 +43,6 @@ export const useTabStore = defineStore('tabStore', {
     },
     deleteTab(id: string) {
       if (id !== 'home') {
-        debugger
         const index = this.tabList.findIndex((x) => x.id === id)
         const activeTab = this.tabList[index + 1] || this.tabList[index - 1]
         this.setActiveTab(activeTab)
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 8b0d5eda65248343e97aff70e72ffc240b19eb4b..70bd681d13602f1becc348d6dfac3ab6b4930073 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,17 +1,20 @@
 import { defineStore } from 'pinia'
-import { getUserInfo, getUserPageList } from '@/api/user'
+import { menuFormat } from '@/utils/index'
 import { User } from '@/types/user'
 import { QuickResponseData } from '@/utils/request'
+import { Menu, Menubar } from '@/types/menu'
+import { getUserInfo, getUserPageList, getPermission } from '@/api/user'
 
 interface UserState {
-  userList: Array<User>
   user: User
+  permissionMenuList: Array<Menu>
+  menuList: Array<Menubar>
 }
 export const useUserStore = defineStore('userStore', {
   state: (): UserState => {
     return {
-      userList: [],
       user: {
+        id: '',
         userId: '',
         userName: '',
         fullName: '',
@@ -21,10 +24,31 @@ export const useUserStore = defineStore('userStore', {
         address: '',
         createTime: '',
       },
+      permissionMenuList: [],
+      menuList: [],
     }
   },
-  getters: {},
+  getters: {
+    getMenuList(): Array<Menubar> {
+      return this.menuList
+    },
+    getPermissionMenuList(): Array<Menu> {
+      return this.permissionMenuList
+    },
+  },
   actions: {
+    getPermission(id: string): Promise<QuickResponseData<Array<Menu>>> {
+      return new Promise((resolve) => {
+        const userId = id
+        getPermission(userId).then((res) => {
+          const { data: userPermissionMenuList } = res
+          this.permissionMenuList = userPermissionMenuList
+          const userMenuList = menuFormat(userPermissionMenuList)
+          this.menuList = userMenuList
+          resolve(res)
+        })
+      })
+    },
     getUserPageList(parmas: object): Promise<QuickResponseData<Array<User>>> {
       return new Promise((resolve) => {
         getUserPageList(parmas).then((res) => {
diff --git a/src/types/menu.ts b/src/types/menu.ts
index 4c8cb1a7aae7f0dae013eae724c672ff3d48c0a1..56ab84df3c9aba5ea64b34046f54e489a7a147ae 100644
--- a/src/types/menu.ts
+++ b/src/types/menu.ts
@@ -14,6 +14,6 @@ export interface Menu {
 export interface MenuTree extends Menu {
   children: MenuTree[]
 }
-export interface MenuBar extends Menu {
-  children: MenuBar[]
+export interface Menubar extends Menu {
+  children: Menubar[]
 }
diff --git a/src/types/tab.ts b/src/types/tab.ts
index 6f446e8cbd5bf7fb2884c4ced99bd7935c2a1021..f83008aaaa5799e887ca2c95bc64b908d879158f 100644
--- a/src/types/tab.ts
+++ b/src/types/tab.ts
@@ -1,5 +1,5 @@
 export interface Tab {
-  id: string
-  name: string
-  path: string
+  id?: string
+  name?: string
+  path?: string
 }
diff --git a/src/types/table.ts b/src/types/table.ts
index 83b37100e5886707fe397ce618e9563f5d8d06ba..df4c70d8451f1c0530bf8f49a316f41930d2a2aa 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -19,14 +19,14 @@ export interface Btns {
 }
 export interface Actionbar {
   width: number
-  editButtonName: string
-  deleteButtonName: string
-  detailButtonName: string
-  hiddenEditButton: boolean
-  hiddenDeleteButton: boolean
-  hiddenDetailButton: boolean
-  btns: Array<Btns>
+  editButtonName?: string
+  deleteButtonName?: string
+  detailButtonName?: string
+  hiddenEditButton?: boolean
+  hiddenDeleteButton?: boolean
+  hiddenDetailButton?: boolean
+  btns?: Array<Btns>
 }
-export interface ToolBar {
+export interface Toolbar {
   btns: Array<Btns>
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 40d135615bd606da02e8d1fcf1c8e71393396372..1677cbef97cd5e70dac221fb9a5aa014a407a2fc 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -71,6 +71,32 @@ export const tableTreeFormat = (data: any) => {
   return forderArr
 }
 
+export const menuTreeFormat = (data: any) => {
+  const forderArr = []
+  const menuArr = []
+  const btnArr = []
+  data.forEach((element) => {
+    if (element.menuType === 0) {
+      forderArr.push(element)
+    }
+    if (element.menuType === 1) {
+      menuArr.push(element)
+    }
+    if (element.menuType === 2) {
+      btnArr.push(element)
+    }
+  })
+  menuArr.forEach((element, index) => {
+    const children = btnArr.filter((x) => x.pid === element.id)
+    menuArr[index].children = children
+  })
+  forderArr.forEach((element, index) => {
+    const children = menuArr.filter((x) => x.pid === element.id)
+    forderArr[index].children = children
+  })
+  return forderArr
+}
+
 export const menuFormat = (data: any) => {
   const forderArr = []
   const menuArr = []
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index 4eeaefd05f69b6a09da0106ccbca06052101a2d5..27d252c626bf1228a441f999efb7cc9902d10344 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -19,39 +19,136 @@ const dialogTitle = reactive({
 })
 const formModel = reactive<Menu>({
   id: '',
-  dicTypeId: '',
-  name: '',
+  menuId: '',
+  menuName: '',
+  path: '',
+  menuType: '',
+  icon: '',
+  sort: 0,
+  pid: '',
+  link: 0,
+  enabled: 0,
+  status: 0,
 })
 const formItems = reactive<Array<FormItem>>([
   {
-    label: '分类编号',
+    label: '菜单编号',
     labelWidth: '80px',
-    vModel: 'dicTypeId',
-    placeholder: '分类编号',
+    vModel: 'menuId',
+    placeholder: '菜单编号',
     editReadonly: true,
-    prop: 'dicTypeId',
+    prop: 'menuId',
     rules: [
       {
         required: true,
-        message: '分类编号不能为空',
+        message: '菜单编号不能为空',
         trigger: 'blur',
       },
     ],
   },
   {
-    label: '分类名称',
+    label: '菜单名称',
     labelWidth: '80px',
-    vModel: 'name',
-    placeholder: '分类名称',
-    prop: 'name',
+    vModel: 'menuName',
+    placeholder: '菜单名称',
+    prop: 'menuName',
     rules: [
       {
         required: true,
-        message: '分类名称不能为空',
+        message: '菜单名称不能为空',
         trigger: 'blur',
       },
     ],
   },
+  {
+    label: '路由',
+    labelWidth: '80px',
+    vModel: 'path',
+    placeholder: '路由',
+  },
+  {
+    label: '菜单类型',
+    labelWidth: '80px',
+    vModel: 'menuType',
+    placeholder: '菜单类型',
+    prop: 'menuType',
+    type: 'select',
+    options: [
+      {
+        label: '目录',
+        value: '0',
+      },
+      {
+        label: '菜单',
+        value: '1',
+      },
+      {
+        label: '按钮',
+        value: '2',
+      },
+    ],
+    rules: [
+      {
+        required: true,
+        message: '菜单类型不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '菜单图标',
+    labelWidth: '80px',
+    vModel: 'icon',
+    placeholder: '菜单图标',
+    prop: 'icon',
+  },
+  {
+    label: '排序',
+    labelWidth: '80px',
+    vModel: 'sort',
+    placeholder: '排序',
+    editReadonly: true,
+    prop: 'sort',
+  },
+  // {
+  //   label: '父级菜单',
+  //   labelWidth: '80px',
+  //   vModel: 'pid',
+  //   placeholder: '父级菜单',
+  //   prop: 'pid',
+  //   type: 'select',
+  //   options: [],
+  // },
+  {
+    label: '父级菜单',
+    labelWidth: '80px',
+    vModel: 'pid',
+    placeholder: '父级菜单',
+  },
+  {
+    label: '外链',
+    labelWidth: '80px',
+    vModel: 'link',
+    placeholder: '外链',
+    prop: 'link',
+    type: 'switch',
+  },
+  {
+    label: '是否启用',
+    labelWidth: '80px',
+    vModel: 'enabled',
+    placeholder: '是否启用',
+    prop: 'enabled',
+    type: 'switch',
+  },
+  {
+    label: '是否显示',
+    labelWidth: '80px',
+    vModel: 'status',
+    placeholder: '是否显示',
+    prop: 'status',
+    type: 'switch',
+  },
 ])
 const handleFormSubmit = (form: Menu, done: any) => {
   console.log('handleFormSubmit', form)
diff --git a/src/views/role/index.vue b/src/views/role/index.vue
index 8fa746d7a384c9ea071d0a0ed12a97463f756054..a269961432ea1e62c8dc867fccf9b973cdb75b88 100644
--- a/src/views/role/index.vue
+++ b/src/views/role/index.vue
@@ -120,7 +120,7 @@ const tableActionbar = reactive<Actionbar>({
 /**
  * 加载数据
  */
-const load = (parmas: object) => {
+const load = () => {
   getRoleList().then((res) => {
     const { data: roleList } = res
     dataList.length = 0
diff --git a/src/views/rolePermission/index.vue b/src/views/rolePermission/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f7ba4548c7af85b6869f2989720ffa846e0ac54
--- /dev/null
+++ b/src/views/rolePermission/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { ElTree, ElMessage, ElMessageBox } from 'element-plus'
+import { TreeKey } from 'element-plus/es/components/tree/src/tree.type'
+import { menuTreeFormat, treeFormat } from '@/utils'
+import { MenuTree } from '@/types/menu'
+import { Toolbar } from '@/types/table'
+import { Tree } from '@/types/tree'
+import { getRoleList, getMenuPermission, assignPermission } from '@/api/role'
+import { getMenuList } from '@/api/menu'
+import QuickToolbar from '@/components/QuickToolbar/index.vue'
+
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+/**
+ * 菜单tree
+ */
+const menuProps = reactive({
+  id: 'menuId',
+  label: 'menuName',
+  children: 'children',
+})
+const menuTreeData = reactive<Array<MenuTree>>([])
+const menuTreeList = reactive<Array<MenuTree>>([])
+const menuLoad = () => {
+  getMenuList().then((res) => {
+    const { data: menuList } = res
+    const menuTree = menuTreeFormat(menuList)
+    menuTreeList.length = 0
+    menuTreeList.push(...menuTree)
+  })
+}
+/**
+ * 角色tree
+ */
+const roleProps = reactive({
+  id: 'id',
+  label: 'label',
+  children: 'children',
+})
+const roleTreeData = reactive<Array<Tree>>([])
+const roleTreeLoad = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    const roleTree = treeFormat(roleList, {
+      id: 'id',
+      label: 'roleName',
+      children: 'children',
+    })
+    roleTreeData.length = 0
+    roleTreeData.push(...roleTree)
+  })
+}
+const roleId = ref('')
+const handleNodeClick = (data: any) => {
+  roleId.value = data.id
+  getMenuPermission(roleId.value).then((res) => {
+    const { data: menuList } = res
+    const value = menuList.map((x) => x.id)
+    menuTreeData.length = 0
+    menuTreeData.push(...menuTreeList)
+    nextTick(() => {
+      if (treeRef.value) {
+        treeRef.value.setCheckedKeys(value, false)
+      }
+    })
+  })
+}
+/**
+ * 工具栏
+ */
+const handleGrant = () => {
+  if (!roleId.value) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择一个角色',
+    })
+    return
+  }
+  ElMessageBox.confirm(`你真的要给${roleId.value}角色分配权限吗？`, {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    type: 'warning',
+  })
+    .then(() => {
+      if (!treeRef.value) {
+        return
+      }
+      // const checkMenuIdArr: TreeKey[] = treeRef.value.getCheckedKeys(false)
+      // const parentMenuIdArr: TreeKey[] = treeRef.value.getHalfCheckedKeys()
+      // const menuIdArr = [...parentMenuIdArr, ...checkMenuIdArr]
+      const menuIdArr = treeRef.value.getCheckedKeys(false)
+      const menuIds = menuIdArr.join(',')
+      assignPermission({
+        roleId: roleId.value,
+        menuIds,
+      }).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '分配权限成功',
+        })
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '您已取消分配权限',
+      })
+    })
+}
+const tableToolbar = reactive<Toolbar>({
+  btns: [
+    {
+      name: '分配权限',
+      position: 'left',
+      type: 'primary',
+      size: 'small',
+      click() {
+        handleGrant()
+      },
+    },
+  ],
+})
+onMounted(() => {
+  roleTreeLoad()
+  menuLoad()
+})
+</script>
+
+<template>
+  <div clas="content">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card shadow="never">
+          <el-tree
+            :data="roleTreeData"
+            :props="roleProps"
+            @node-click="handleNodeClick"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never">
+          <quick-toolbar
+            :table-toolbar="tableToolbar"
+            :hidden-add-button="true"
+            :hidden-batch-delete-button="true"
+            :hidden-import-button="true"
+            :hidden-export-button="true"
+            :hidden-print-button="true"
+            :hidden-refresh-button="true"
+          ></quick-toolbar>
+          <!-- :default-checked-keys="" -->
+          <el-tree
+            ref="treeRef"
+            :data="menuTreeData"
+            :props="menuProps"
+            show-checkbox
+            node-key="id"
+            highlight-current
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<style lang="scss" scoped>
+.content {
+  .el-card {
+    height: 575px;
+  }
+}
+</style>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index efa8bac8417651c9021e8f64b6bc88ec0c811bba..3a8e47b846b2ab9400599793b6b486f1e0870c62 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -8,6 +8,7 @@ import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
 import { useUserStore } from '@/store/modules/user'
 import {
+  getUserPageList,
   addUser,
   updateUser,
   deleteUser,
@@ -396,9 +397,8 @@ const page = reactive<Page>({
  * 加载数据
  */
 const load = (parmas: object) => {
-  userStore.getUserPageList(parmas).then((res: any) => {
-    const { page: pagination } = res
-    const { userList } = userStore.$state
+  getUserPageList(parmas).then((res: any) => {
+    const { data: userList, page: pagination } = res
     if (userList) {
       dataList.length = 0
       dataList.push(...userList)
diff --git a/tsconfig.json b/tsconfig.json
index e086b5fc066c1b32903979053707d5e52271f340..01461d501a4be1efd931c7d1f306cc9cd6685d50 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,11 @@
     "lib": ["esnext", "dom"],
     "skipLibCheck": true,
     "types": ["element-plus/global"],
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]