diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts
index 1a20d1d11..fa0e8473e 100644
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -12,15 +12,6 @@ const systemRouter = {
     rank: 11
   },
   children: [
-    // {
-    //   path: "/system/dict/index",
-    //   name: "dict",
-    //   meta: {
-    //     title: "menus.hsDict",
-    //     i18n: true,
-    //     keepAlive: true
-    //   }
-    // },
     {
       path: "/system/user/index",
       name: "user",
@@ -34,7 +25,7 @@ const systemRouter = {
       path: "/system/role/index",
       name: "role",
       meta: {
-        icon: "peoples",
+        icon: "role",
         title: "menus.hsRole",
         i18n: true
       }
@@ -43,10 +34,20 @@ const systemRouter = {
       path: "/system/dept/index",
       name: "dept",
       meta: {
-        icon: "office-building",
+        icon: "dept",
         title: "menus.hsDept",
         i18n: true
       }
+    },
+    {
+      path: "/system/dict/index",
+      name: "dict",
+      meta: {
+        icon: "dict",
+        title: "menus.hsDict",
+        i18n: true,
+        keepAlive: true
+      }
     }
   ]
 };
diff --git a/mock/list.ts b/mock/list.ts
index 385899d34..e968d1113 100644
--- a/mock/list.ts
+++ b/mock/list.ts
@@ -448,8 +448,7 @@ export default [
                 "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
             }
           ]
-        },
-        msg: ""
+        }
       };
     }
   }
diff --git a/mock/system.ts b/mock/system.ts
index 184f4a6a6..a0ef492e2 100644
--- a/mock/system.ts
+++ b/mock/system.ts
@@ -62,8 +62,7 @@ export default [
             }
           ],
           total: 3
-        },
-        msg: ""
+        }
       };
     }
   },
@@ -76,6 +75,7 @@ export default [
         data: [
           {
             name: "杭州总公司",
+            type: 1, // 1 公司 2 分公司 3 部门
             parentId: 0,
             sort: 0,
             leaderUserId: 1,
@@ -88,6 +88,7 @@ export default [
           },
           {
             name: "郑州分公司",
+            type: 2,
             parentId: 100,
             sort: 1,
             leaderUserId: 104,
@@ -100,6 +101,7 @@ export default [
           },
           {
             name: "研发部门",
+            type: 3,
             parentId: 101,
             sort: 1,
             leaderUserId: 104,
@@ -112,6 +114,7 @@ export default [
           },
           {
             name: "市场部门",
+            type: 3,
             parentId: 102,
             sort: 1,
             leaderUserId: null,
@@ -124,6 +127,7 @@ export default [
           },
           {
             name: "深圳分公司",
+            type: 2,
             parentId: 100,
             sort: 2,
             leaderUserId: null,
@@ -136,6 +140,7 @@ export default [
           },
           {
             name: "市场部门",
+            type: 3,
             parentId: 101,
             sort: 2,
             leaderUserId: null,
@@ -148,6 +153,7 @@ export default [
           },
           {
             name: "财务部门",
+            type: 3,
             parentId: 102,
             sort: 2,
             leaderUserId: null,
@@ -160,6 +166,7 @@ export default [
           },
           {
             name: "测试部门",
+            type: 3,
             parentId: 101,
             sort: 3,
             leaderUserId: null,
@@ -172,6 +179,7 @@ export default [
           },
           {
             name: "财务部门",
+            type: 3,
             parentId: 101,
             sort: 4,
             leaderUserId: 103,
@@ -184,6 +192,7 @@ export default [
           },
           {
             name: "运维部门",
+            type: 3,
             parentId: 101,
             sort: 5,
             leaderUserId: null,
@@ -194,8 +203,85 @@ export default [
             createTime: 1609837427000,
             remark: "备注、备注、备注、备注、备注、备注、备注"
           }
-        ],
-        msg: ""
+        ]
+      };
+    }
+  },
+  {
+    url: "/user",
+    method: "post",
+    response: () => {
+      return {
+        code: 0,
+        data: {
+          list: [
+            {
+              username: "admin",
+              nickname: "admin",
+              remark: "管理员",
+              deptId: 103,
+              postIds: [1],
+              mobile: "15888888888",
+              sex: 0,
+              id: 1,
+              status: 0,
+              createTime: 1609837427000,
+              dept: {
+                id: 103,
+                name: "研发部门"
+              }
+            },
+            {
+              username: "pure",
+              nickname: "pure",
+              remark: "不要吓我",
+              deptId: 104,
+              postIds: [1],
+              mobile: "15888888888",
+              sex: 0,
+              id: 100,
+              status: 1,
+              createTime: 1609981637000,
+              dept: {
+                id: 104,
+                name: "市场部门"
+              }
+            },
+            {
+              username: "小姐姐",
+              nickname: "girl",
+              remark: null,
+              deptId: 106,
+              postIds: null,
+              mobile: "15888888888",
+              sex: 1,
+              id: 103,
+              status: 1,
+              createTime: 1610553035000,
+              dept: {
+                id: 106,
+                name: "财务部门"
+              }
+            },
+            {
+              username: "小哥哥",
+              nickname: "boy",
+              remark: null,
+              deptId: 107,
+              postIds: [],
+              mobile: "15888888888",
+              sex: 0,
+              id: 104,
+              status: 0,
+              createTime: 1611166433000,
+              dept: {
+                id: 107,
+                name: "运维部门"
+              }
+            }
+          ],
+          total: 4
+        }
       };
     }
   }
diff --git a/package.json b/package.json
index 74ab68fcd..15a1cd6ac 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
   "devDependencies": {
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
+    "@iconify-icons/carbon": "^1.2.4",
     "@iconify-icons/ep": "^1.2.4",
     "@iconify-icons/fa": "^1.2.2",
     "@iconify-icons/fa-solid": "^1.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7486653b4..1f306e879 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,7 @@ specifiers:
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
   "@ctrl/tinycolor": ^3.4.0
+  "@iconify-icons/carbon": ^1.2.4
   "@iconify-icons/ep": ^1.2.4
   "@iconify-icons/fa": ^1.2.2
   "@iconify-icons/fa-solid": ^1.2.2
@@ -151,6 +152,7 @@ dependencies:
 devDependencies:
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
+  "@iconify-icons/carbon": 1.2.4
   "@iconify-icons/ep": 1.2.4
   "@iconify-icons/fa": 1.2.2
   "@iconify-icons/fa-solid": 1.2.2
@@ -963,6 +965,15 @@ packages:
       }
     dev: true
 
+  /@iconify-icons/carbon/1.2.4:
+    resolution:
+      {
+        integrity: sha512-RhLB8EwYz32oSSQZjafhWbyAqOoPIcj59VQmsrY/+8MR083c8XwOjepIwKVzZNMjWSL966ykqZxNrXwEjk7jrg==
+      }
+    dependencies:
+      "@iconify/types": 1.1.0
+    dev: true
+
   /@iconify-icons/ep/1.2.4:
     resolution:
       {
diff --git a/src/api/system.ts b/src/api/system.ts
index 76d6ce49f..4dcd15f46 100644
--- a/src/api/system.ts
+++ b/src/api/system.ts
@@ -6,6 +6,11 @@ interface ResponseType extends Promise<any> {
   msg?: string;
 }
 
+// 获取用户管理列表
+export const getUserList = (data?: object): ResponseType => {
+  return http.request("post", "/user", { data });
+};
+
 // 获取角色管理列表
 export const getRoleList = (data?: object): ResponseType => {
   return http.request("post", "/role", { data });
diff --git a/src/components/ReCard/src/index.vue b/src/components/ReCard/src/index.vue
index de4ea6b0f..ed39ff7a7 100644
--- a/src/components/ReCard/src/index.vue
+++ b/src/components/ReCard/src/index.vue
@@ -64,7 +64,7 @@ const cardLogoClass = computed(() => [
             :disabled="!product.isSetup"
             max-height="2"
           >
-            <IconifyIconOffline icon="more-2-fill" class="icon-more" />
+            <IconifyIconOffline icon="more-vertical" class="icon-more" />
             <template #dropdown>
               <el-dropdown-menu :disabled="!product.isSetup">
                 <el-dropdown-item @click="handleClickManage(product)"
diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts
index c09e6ddb2..d7b252483 100644
--- a/src/components/ReIcon/src/iconifyIconOffline.ts
+++ b/src/components/ReIcon/src/iconifyIconOffline.ts
@@ -80,6 +80,11 @@ import AddFill from "@iconify-icons/ri/add-circle-line";
 import ListCheck from "@iconify-icons/ri/list-check";
 import More2Fill from "@iconify-icons/ri/more-2-fill";
 import Database from "@iconify-icons/ri/database-2-line";
+import Dict from "@iconify-icons/ri/git-repository-line";
+import Card from "@iconify-icons/ri/bank-card-line";
+import Reset from "@iconify-icons/ri/restart-line";
+import Dept from "@iconify-icons/ri/git-branch-line";
+import Password from "@iconify-icons/ri/lock-password-line";
 addIcon("arrow-right-s-line", ArrowRightSLine);
 addIcon("arrow-left-s-line", ArrowLeftSLine);
 addIcon("logout-circle-r-line", LogoutCircleRLine);
@@ -94,8 +99,13 @@ addIcon("arrow-down-line", ArrowDownLine);
 addIcon("bookmark-2-line", Bookmark2Line);
 addIcon("add", AddFill);
 addIcon("list-check", ListCheck);
-addIcon("more-2-fill", More2Fill);
+addIcon("more-vertical", More2Fill);
 addIcon("database", Database);
+addIcon("dict", Dict);
+addIcon("card", Card);
+addIcon("reset", Reset);
+addIcon("dept", Dept);
+addIcon("password", Password);
 
 // Font Awesome 4
 import FaUser from "@iconify-icons/fa/user";
@@ -114,9 +124,9 @@ addIcon("export", Export);
 addIcon("density", ArrowsShrinkV);
 
 // fluent
-import Peoples from "@iconify-icons/fluent/people-swap-28-filled";
+import Role from "@iconify-icons/fluent/people-swap-28-filled";
 import FlUser from "@iconify-icons/fluent/person-12-filled";
-addIcon("peoples", Peoples);
+addIcon("role", Role);
 addIcon("flUser", FlUser);
 
 // Material Design Icons
@@ -125,6 +135,10 @@ import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
 addIcon("expand", Expand);
 addIcon("unExpand", UnExpand);
 
+// carbon
+import LocationCompany from "@iconify-icons/carbon/location-company";
+addIcon("location-company", LocationCompany);
+
 // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
   name: "IconifyIcon",
diff --git a/src/components/ReTable/src/bar.tsx b/src/components/ReTable/src/bar.tsx
index 417cb9c12..9a6c6cf1f 100644
--- a/src/components/ReTable/src/bar.tsx
+++ b/src/components/ReTable/src/bar.tsx
@@ -47,7 +47,7 @@ export default defineComponent({
   name: "epTableProBar",
   props,
   emits: ["refresh"],
-  setup(props, { emit, slots }) {
+  setup(props, { emit, slots, attrs }) {
     const buttonRef = ref();
     const checkList = ref([]);
     const currentWidth = ref(0);
@@ -125,6 +125,7 @@ export default defineComponent({
       <>
         <div
           v-resize
+          {...attrs}
           class="w-99/100 mt-6 p-2 bg-white"
           v-loading={props.loading}
           element-loading-svg={loadingSvg}
diff --git a/src/router/modules/list.ts b/src/router/modules/list.ts
index 1dd3fc57b..60e92b113 100644
--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
@@ -17,6 +17,7 @@ const ableRouter = {
       name: "listCard",
       component: () => import("/@/views/list/card/index.vue"),
       meta: {
+        icon: "card",
         title: $t("menus.listCard"),
         i18n: true,
         showParent: true
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 0133cf944..00425f3e9 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -64,10 +64,10 @@ onMounted(() => {
       class="bg-white w-99/100 pl-8 pt-4"
     >
       <el-form-item label="部门名称：" prop="user">
-        <el-input v-model="form.user" placeholder="请输入" clearable />
+        <el-input v-model="form.user" placeholder="请输入部门名称" clearable />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
-        <el-select v-model="form.status" placeholder="请选择" clearable>
+        <el-select v-model="form.status" placeholder="请选择状态" clearable>
           <el-option label="开启" value="1" />
           <el-option label="关闭" value="0" />
         </el-select>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 55c1bb07b..54b36e33f 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -117,13 +117,13 @@ onMounted(() => {
       class="bg-white w-99/100 pl-8 pt-4"
     >
       <el-form-item label="角色名称：" prop="name">
-        <el-input v-model="form.name" placeholder="请输入" clearable />
+        <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
       </el-form-item>
       <el-form-item label="角色标识：" prop="code">
-        <el-input v-model="form.code" placeholder="请输入" clearable />
+        <el-input v-model="form.code" placeholder="请输入角色标识" clearable />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
-        <el-select v-model="form.status" placeholder="请选择" clearable>
+        <el-select v-model="form.status" placeholder="请选择状态" clearable>
           <el-option label="已开启" value="1" />
           <el-option label="已关闭" value="0" />
         </el-select>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index feaad75a8..37091c94d 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -5,218 +5,330 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { reactive } from "vue";
-import { $t } from "/@/plugins/i18n";
-import { VxeGridProps } from "vxe-table";
+import dayjs from "dayjs";
+import tree from "./tree.vue";
+import { getUserList } from "/@/api/system";
+import { FormInstance } from "element-plus";
+import { ElMessageBox } from "element-plus";
+import { reactive, ref, onMounted } from "vue";
+import { EpTableProBar } from "/@/components/ReTable";
+import { Switch, message } from "@pureadmin/components";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
-const gridOptions = reactive({
-  border: true,
-  resizable: true,
-  keepSource: true,
-  height: 578,
-  printConfig: {},
-  importConfig: {},
-  exportConfig: {},
-  pagerConfig: {
-    perfect: true,
-    pageSize: 15
-  },
-  editConfig: {
-    trigger: "click",
-    mode: "row",
-    showStatus: true
-  },
-  toolbarConfig: {
-    buttons: [
-      {
-        code: "insert_actived",
-        name: $t("buttons.hsadd"),
-        status: "perfect",
-        icon: "fa fa-plus"
-      },
-      {
-        code: "mark_cancel",
-        name: $t("buttons.hsmark"),
-        status: "perfect",
-        icon: "fa fa-trash-o"
-      },
-      {
-        code: "save",
-        name: $t("buttons.hssave"),
-        status: "perfect",
-        icon: "fa fa-save"
-      }
-    ],
-    perfect: true,
-    refresh: {
-      icon: "fa fa-refresh",
-      iconLoading: "fa fa-spinner fa-spin"
-    },
-    import: {
-      icon: "fa fa-upload"
-    },
-    export: {
-      icon: "fa fa-download"
-    },
-    print: {
-      icon: "fa fa-print"
-    },
-    zoom: {
-      iconIn: "fa fa-arrows-alt",
-      iconOut: "fa fa-expand"
-    },
-    custom: {
-      icon: "fa fa-cog"
-    }
-  },
-  proxyConfig: {
-    props: {
-      result: "result",
-      total: "page.total"
-    },
-    ajax: {
-      // 接收 Promise
-      query: ({ page }) => {
-        return new Promise(resolve => {
-          setTimeout(() => {
-            const list = [
-              {
-                id: 10001,
-                name: "Test1",
-                nickname: "T1",
-                role: "Develop",
-                sex: "Man",
-                age: 28,
-                address: "Shenzhen"
-              },
-              {
-                id: 10002,
-                name: "Test2",
-                nickname: "T2",
-                role: "Test",
-                sex: "Women",
-                age: 22,
-                address: "Guangzhou"
-              },
-              {
-                id: 10003,
-                name: "Test3",
-                nickname: "T3",
-                role: "PM",
-                sex: "Man",
-                age: 32,
-                address: "Shanghai"
-              },
-              {
-                id: 10004,
-                name: "Test4",
-                nickname: "T4",
-                role: "Designer",
-                sex: "Women ",
-                age: 23,
-                address: "Shenzhen"
-              },
-              {
-                id: 10005,
-                name: "Test5",
-                nickname: "T5",
-                role: "Develop",
-                sex: "Women ",
-                age: 30,
-                address: "Shanghai"
-              },
-              {
-                id: 10006,
-                name: "Test6",
-                nickname: "T6",
-                role: "Designer",
-                sex: "Women ",
-                age: 21,
-                address: "Shenzhen"
-              },
-              {
-                id: 10007,
-                name: "Test7",
-                nickname: "T7",
-                role: "Test",
-                sex: "Man ",
-                age: 29,
-                address: "vxe-table 从入门到放弃"
-              },
-              {
-                id: 10008,
-                name: "Test8",
-                nickname: "T8",
-                role: "Develop",
-                sex: "Man ",
-                age: 35,
-                address: "Shenzhen"
-              },
-              {
-                id: 10009,
-                name: "Test9",
-                nickname: "T9",
-                role: "Develop",
-                sex: "Man ",
-                age: 35,
-                address: "Shenzhen"
-              },
-              {
-                id: 100010,
-                name: "Test10",
-                nickname: "T10",
-                role: "Develop",
-                sex: "Man ",
-                age: 35,
-                address: "Guangzhou"
-              }
-            ];
-            resolve({
-              page: {
-                total: list.length
-              },
-              result: list.slice(
-                (page.currentPage - 1) * page.pageSize,
-                page.currentPage * page.pageSize
-              )
-            });
-          }, 100);
-        });
-      },
-      // body 对象： { removeRecords }
-      delete: () => {
-        return new Promise(resolve => {
-          setTimeout(() => {
-            resolve({});
-          }, 100);
-        });
-      },
-      // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
-      save: () => {
-        return new Promise(resolve => {
-          setTimeout(() => {
-            resolve({});
-          }, 100);
-        });
-      }
-    }
-  },
-  columns: [
-    { type: "checkbox", width: 50 },
-    { type: "seq", width: 60 },
-    { field: "name", title: "Name", editRender: { name: "input" } },
-    { field: "nickname", title: "Nickname", editRender: { name: "input" } },
-    { field: "role", title: "Role", editRender: { name: "input" } },
+const form = reactive({
+  username: "",
+  mobile: "",
+  status: ""
+});
+let dataList = ref([]);
+let pageSize = ref(10);
+let totalPage = ref(0);
+let loading = ref(true);
+let switchLoadMap = ref({});
+
+const formRef = ref<FormInstance>();
+
+function handleUpdate(row) {
+  console.log(row);
+}
+
+function handleDelete(row) {
+  console.log(row);
+}
+
+function handleCurrentChange(val: number) {
+  console.log(`current page: ${val}`);
+}
+
+function handleSizeChange(val: number) {
+  console.log(`${val} items per page`);
+}
+
+function handleSelectionChange(val) {
+  console.log("handleSelectionChange", val);
+}
+
+function onChange(checked, { $index, row }) {
+  ElMessageBox.confirm(
+    `确认要<strong>${
+      row.status === 0 ? "停用" : "启用"
+    }</strong><strong style='color:var(--el-color-primary)'>${
+      row.username
+    }</strong>用户吗?`,
+    "系统提示",
     {
-      field: "address",
-      title: "Address",
-      showOverflow: true,
-      editRender: { name: "input" }
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+      dangerouslyUseHTMLString: true,
+      draggable: true
     }
-  ]
-} as VxeGridProps);
+  )
+    .then(() => {
+      switchLoadMap.value[$index] = Object.assign(
+        {},
+        switchLoadMap.value[$index],
+        {
+          loading: true
+        }
+      );
+      setTimeout(() => {
+        switchLoadMap.value[$index] = Object.assign(
+          {},
+          switchLoadMap.value[$index],
+          {
+            loading: false
+          }
+        );
+        message.success("已成功修改用户状态");
+      }, 300);
+    })
+    .catch(() => {
+      row.status === 0 ? (row.status = 1) : (row.status = 0);
+    });
+}
+
+async function onSearch() {
+  loading.value = true;
+  let { data } = await getUserList();
+  dataList.value = data.list;
+  totalPage.value = data.total;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  onSearch();
+};
+
+onMounted(() => {
+  onSearch();
+});
 </script>
 
 <template>
-  <vxe-grid v-bind="gridOptions" />
+  <div class="main flex">
+    <tree />
+    <div class="flex-1 ml-4">
+      <el-form
+        ref="formRef"
+        :inline="true"
+        :model="form"
+        class="bg-white w-99/100 pl-8 pt-4"
+      >
+        <el-form-item label="用户名称：" prop="username">
+          <el-input
+            v-model="form.username"
+            placeholder="请输入用户名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="手机号码：" prop="mobile">
+          <el-input
+            v-model="form.mobile"
+            placeholder="请输入手机号码"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="状态：" prop="status">
+          <el-select v-model="form.status" placeholder="请选择" clearable>
+            <el-option label="已开启" value="1" />
+            <el-option label="已关闭" value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            :icon="useRenderIcon('search')"
+            :loading="loading"
+            @click="onSearch"
+          >
+            搜索
+          </el-button>
+          <el-button
+            :icon="useRenderIcon('refresh')"
+            @click="resetForm(formRef)"
+          >
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <EpTableProBar
+        title="用户管理"
+        :loading="loading"
+        :dataList="dataList"
+        @refresh="onSearch"
+      >
+        <template #buttons>
+          <el-button type="primary" :icon="useRenderIcon('add')">
+            新增用户
+          </el-button>
+        </template>
+        <template v-slot="{ size, checkList }">
+          <el-table
+            border
+            table-layout="auto"
+            :size="size"
+            :data="dataList"
+            :header-cell-style="{ background: '#fafafa', color: '#606266' }"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              v-if="checkList.includes('勾选列')"
+              type="selection"
+              align="center"
+              width="55"
+            />
+            <el-table-column
+              v-if="checkList.includes('序号列')"
+              type="index"
+              label="序号"
+              align="center"
+              width="70"
+            />
+            <el-table-column label="用户编号" align="center" prop="id" />
+            <el-table-column label="用户名称" align="center" prop="username" />
+            <el-table-column label="用户昵称" align="center" prop="nickname" />
+            <el-table-column label="性别" align="center" prop="sex">
+              <template #default="scope">
+                <el-tag
+                  :size="size"
+                  :type="scope.row.sex === 1 ? 'danger' : ''"
+                  effect="plain"
+                >
+                  {{ scope.row.sex === 1 ? "女" : "男" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="部门"
+              align="center"
+              prop="dept"
+              :formatter="
+                ({ dept }) => {
+                  return dept.name;
+                }
+              "
+            />
+            <el-table-column label="手机号码" align="center" prop="mobile" />
+            <el-table-column
+              label="状态"
+              align="center"
+              width="130"
+              prop="status"
+            >
+              <template #default="scope">
+                <Switch
+                  :size="size === 'small' ? 'small' : 'default'"
+                  :loading="switchLoadMap[scope.$index]?.loading"
+                  v-model:checked="scope.row.status"
+                  :checkedValue="1"
+                  :unCheckedValue="0"
+                  checked-children="已开启"
+                  un-checked-children="已关闭"
+                  @change="checked => onChange(checked, scope)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="创建时间"
+              align="center"
+              width="180"
+              prop="createTime"
+              :formatter="
+                ({ createTime }) => {
+                  return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
+                }
+              "
+            />
+            <el-table-column
+              fixed="right"
+              label="操作"
+              width="180"
+              align="center"
+            >
+              <template #default="scope">
+                <el-button
+                  class="reset-margin"
+                  type="text"
+                  :size="size"
+                  @click="handleUpdate(scope.row)"
+                  :icon="useRenderIcon('edits')"
+                >
+                  修改
+                </el-button>
+                <el-popconfirm title="是否确认删除?">
+                  <template #reference>
+                    <el-button
+                      class="reset-margin"
+                      type="text"
+                      :size="size"
+                      :icon="useRenderIcon('delete')"
+                      @click="handleDelete(scope.row)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+                <el-dropdown>
+                  <el-button
+                    class="ml-3"
+                    type="text"
+                    :size="size"
+                    @click="handleUpdate(scope.row)"
+                    :icon="useRenderIcon('more')"
+                  />
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item>
+                        <el-button
+                          class="reset-margin !h-20px !text-gray-500"
+                          type="text"
+                          :size="size"
+                          :icon="useRenderIcon('password')"
+                        >
+                          重置密码
+                        </el-button>
+                      </el-dropdown-item>
+                      <el-dropdown-item>
+                        <el-button
+                          class="reset-margin !h-20px !text-gray-500"
+                          type="text"
+                          :size="size"
+                          :icon="useRenderIcon('role')"
+                        >
+                          分配角色
+                        </el-button>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            class="flex justify-end mt-4"
+            :small="size === 'small' ? true : false"
+            v-model:page-size="pageSize"
+            :page-sizes="[10, 20, 30, 50]"
+            :background="true"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalPage"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </template>
+      </EpTableProBar>
+    </div>
+  </div>
 </template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+</style>
diff --git a/src/views/system/user/tree.vue b/src/views/system/user/tree.vue
new file mode 100644
index 000000000..bb77cdc64
--- /dev/null
+++ b/src/views/system/user/tree.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { ElTree } from "element-plus";
+import { handleTree } from "/@/utils/tree";
+import { getDeptList } from "/@/api/system";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { ref, watch, onMounted, getCurrentInstance } from "vue";
+
+interface Tree {
+  id: number;
+  name: string;
+  highlight?: boolean;
+  children?: Tree[];
+}
+const defaultProps = {
+  children: "children",
+  label: "name"
+};
+
+const treeData = ref([]);
+const searchValue = ref("");
+const { proxy } = getCurrentInstance();
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+let highlightMap = ref({});
+
+const filterNode = (value: string, data: Tree) => {
+  if (!value) return true;
+  return data.name.includes(value);
+};
+
+function nodeClick(value) {
+  const nodeId = value.$treeNodeId;
+  highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
+    ? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
+        highlight: false
+      })
+    : Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
+        highlight: true
+      });
+  Object.values(highlightMap.value).forEach((v: Tree) => {
+    if (v.id !== nodeId) {
+      v.highlight = false;
+    }
+  });
+}
+
+function toggleRowExpansionAll(status) {
+  // @ts-expect-error
+  let nodes = proxy.$refs["treeRef"].store._getAllNodes();
+  for (var i = 0; i < nodes.length; i++) {
+    nodes[i].expanded = status;
+  }
+}
+
+// 重置状态（选中状态、搜索框值、树初始化）
+function onReset() {
+  highlightMap.value = {};
+  searchValue.value = "";
+  toggleRowExpansionAll(true);
+}
+
+watch(searchValue, val => {
+  treeRef.value!.filter(val);
+});
+
+onMounted(async () => {
+  let { data } = await getDeptList();
+  treeData.value = handleTree(data);
+});
+</script>
+
+<template>
+  <div class="max-w-260px h-full min-h-780px bg-white">
+    <div class="flex items-center h-34px">
+      <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
+        部门列表
+      </p>
+      <el-input
+        style="flex: 2"
+        size="small"
+        v-model="searchValue"
+        placeholder="请输入部门名称"
+        clearable
+      >
+        <template #suffix>
+          <el-icon class="el-input__icon">
+            <IconifyIconOffline
+              v-show="searchValue.length === 0"
+              icon="search"
+            />
+          </el-icon>
+        </template>
+      </el-input>
+      <el-dropdown>
+        <IconifyIconOffline
+          class="w-28px cursor-pointer"
+          width="18px"
+          icon="more-vertical"
+        />
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>
+              <el-button
+                class="reset-margin !h-20px !text-gray-500"
+                type="text"
+                :icon="useRenderIcon('expand')"
+                @click="toggleRowExpansionAll(true)"
+              >
+                展开全部
+              </el-button>
+            </el-dropdown-item>
+            <el-dropdown-item>
+              <el-button
+                class="reset-margin !h-20px !text-gray-500"
+                type="text"
+                :icon="useRenderIcon('unExpand')"
+                @click="toggleRowExpansionAll(false)"
+              >
+                折叠全部
+              </el-button>
+            </el-dropdown-item>
+            <el-dropdown-item>
+              <el-button
+                class="reset-margin !h-20px !text-gray-500"
+                type="text"
+                :icon="useRenderIcon('reset')"
+                @click="onReset"
+              >
+                重置状态
+              </el-button>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <el-divider />
+    <el-tree
+      ref="treeRef"
+      :data="treeData"
+      node-key="id"
+      size="small"
+      :props="defaultProps"
+      default-expand-all
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      @node-click="nodeClick"
+    >
+      <template #default="{ node, data }">
+        <span
+          :class="[
+            'pl-1',
+            'pr-1',
+            'rounded',
+            'flex',
+            'items-center',
+            'select-none',
+            searchValue.trim().length > 0 &&
+              node.label.includes(searchValue) &&
+              'text-red-500'
+          ]"
+          :style="{
+            background: highlightMap[node.id]?.highlight
+              ? 'var(--el-color-primary-light-7)'
+              : 'transparent'
+          }"
+        >
+          <IconifyIconOffline
+            :icon="
+              data.type === 1
+                ? 'office-building'
+                : data.type === 2
+                ? 'location-company'
+                : 'dept'
+            "
+          />
+          {{ node.label }}
+        </span>
+      </template>
+    </el-tree>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider) {
+  margin: 0;
+}
+</style>