diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
deleted file mode 100644
index 52b9073..0000000
--- a/src/views/system/user/role.assignment.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- 角色分配弹窗 -->
-<script lang="ts" setup name="roleAssigmentDialog">
-import { ElMessage } from 'element-plus'
-import type { userType } from './user_interface'
-import { getShowItem, toTreeList } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/system/role'
-import { roleAssign } from '@/api/system/user'
-const props = defineProps({
-  titleText: {
-    type: String,
-    default: '分配角色',
-  },
-})
-const emits = defineEmits(['resetData'])
-const dialogFormVisible = ref<boolean>(false)
-const loading = ref<boolean>(false) // 加载动态效果
-const roleTreeList = ref([])// 角色树列表数据
-const defaultProps = ref({
-  label: 'name',
-  children: 'children',
-})
-const userId = ref('')// 用户id
-const userName = ref('') // 用户名称
-const ids = ref([]) // 选中项id
-const defaultExpanded = ref<string[]>([]) // 默认展开的项
-const defaultChecked = ref<string[]>([]) // 默认选中的树
-const defaultExpandAll = ref<boolean>(true)// 是否展开树
-const handleCheckChange = () => {
-
-}
-const treeRef = ref()
-// 获取角色列表
-const fetchRoleTree = () => {
-  getRoleTreeListByUser(userId.value).then((response) => {
-    if (response.data) {
-      roleTreeList.value = toTreeList(response.data)
-      // 获取展开项和选中项
-      const expArr: string[] = []
-      const cheArr: string[] = []
-      response.data.forEach((element: any) => {
-        if (element.open && element.checked) {
-          expArr.push(element.id)
-          cheArr.push(element.id)
-        }
-        else if (element.open) {
-          expArr.push(element.id)
-        }
-        else if (element.checked) {
-          cheArr.push(element.id)
-        }
-      })
-      defaultExpanded.value = expArr
-      defaultChecked.value = cheArr
-      treeRef.value?.setCheckedNodes(defaultChecked.value)
-      loading.value = false
-    }
-  })
-}
-// 弹窗初始化
-const initDialog = (row: userType) => {
-  loading.value = true
-  userId.value = row.id
-  userName.value = row.name
-  dialogFormVisible.value = true
-  fetchRoleTree()
-}
-
-defineExpose({ initDialog })
-const saveData = () => {
-  ids.value = treeRef.value.getCheckedKeys()
-  roleAssign(userId.value, ids.value).then((response) => {
-    if (response.code === 200) {
-      ElMessage.success('角色分配成功')
-      dialogFormVisible.value = false
-      emits('resetData')
-    }
-  })
-}
-const cancel = () => {
-  dialogFormVisible.value = false
-  userId.value = ''
-  userName.value = ''
-  defaultExpanded.value = []
-  defaultChecked.value = []
-  treeRef.value?.setCheckedNodes([])
-  emits('resetData')
-}
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
-    <el-scrollbar>
-      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
-        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
-        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
-        @check-change="handleCheckChange" />
-    </el-scrollbar>
-    <div class="dialog-footer footer">
-      <el-button type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
deleted file mode 100644
index 52b9073..0000000
--- a/src/views/system/user/role.assignment.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- 角色分配弹窗 -->
-<script lang="ts" setup name="roleAssigmentDialog">
-import { ElMessage } from 'element-plus'
-import type { userType } from './user_interface'
-import { getShowItem, toTreeList } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/system/role'
-import { roleAssign } from '@/api/system/user'
-const props = defineProps({
-  titleText: {
-    type: String,
-    default: '分配角色',
-  },
-})
-const emits = defineEmits(['resetData'])
-const dialogFormVisible = ref<boolean>(false)
-const loading = ref<boolean>(false) // 加载动态效果
-const roleTreeList = ref([])// 角色树列表数据
-const defaultProps = ref({
-  label: 'name',
-  children: 'children',
-})
-const userId = ref('')// 用户id
-const userName = ref('') // 用户名称
-const ids = ref([]) // 选中项id
-const defaultExpanded = ref<string[]>([]) // 默认展开的项
-const defaultChecked = ref<string[]>([]) // 默认选中的树
-const defaultExpandAll = ref<boolean>(true)// 是否展开树
-const handleCheckChange = () => {
-
-}
-const treeRef = ref()
-// 获取角色列表
-const fetchRoleTree = () => {
-  getRoleTreeListByUser(userId.value).then((response) => {
-    if (response.data) {
-      roleTreeList.value = toTreeList(response.data)
-      // 获取展开项和选中项
-      const expArr: string[] = []
-      const cheArr: string[] = []
-      response.data.forEach((element: any) => {
-        if (element.open && element.checked) {
-          expArr.push(element.id)
-          cheArr.push(element.id)
-        }
-        else if (element.open) {
-          expArr.push(element.id)
-        }
-        else if (element.checked) {
-          cheArr.push(element.id)
-        }
-      })
-      defaultExpanded.value = expArr
-      defaultChecked.value = cheArr
-      treeRef.value?.setCheckedNodes(defaultChecked.value)
-      loading.value = false
-    }
-  })
-}
-// 弹窗初始化
-const initDialog = (row: userType) => {
-  loading.value = true
-  userId.value = row.id
-  userName.value = row.name
-  dialogFormVisible.value = true
-  fetchRoleTree()
-}
-
-defineExpose({ initDialog })
-const saveData = () => {
-  ids.value = treeRef.value.getCheckedKeys()
-  roleAssign(userId.value, ids.value).then((response) => {
-    if (response.code === 200) {
-      ElMessage.success('角色分配成功')
-      dialogFormVisible.value = false
-      emits('resetData')
-    }
-  })
-}
-const cancel = () => {
-  dialogFormVisible.value = false
-  userId.value = ''
-  userName.value = ''
-  defaultExpanded.value = []
-  defaultChecked.value = []
-  treeRef.value?.setCheckedNodes([])
-  emits('resetData')
-}
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
-    <el-scrollbar>
-      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
-        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
-        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
-        @check-change="handleCheckChange" />
-    </el-scrollbar>
-    <div class="dialog-footer footer">
-      <el-button type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/roleAssignment.vue b/src/views/system/user/roleAssignment.vue
new file mode 100644
index 0000000..4b09678
--- /dev/null
+++ b/src/views/system/user/roleAssignment.vue
@@ -0,0 +1,116 @@
+<!-- 角色分配弹窗 -->
+<script lang="ts" setup name="roleAssigmentDialog">
+import { ElMessage } from 'element-plus'
+import type { userType } from './user-interface'
+import { getShowItem, toTreeList } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  },
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children',
+})
+const userId = ref('')// 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+const treeRef = ref()
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      // 获取展开项和选中项
+      const expArr: string[] = []
+      const cheArr: string[] = []
+      response.data.forEach((element: any) => {
+        if (element.open && element.checked) {
+          expArr.push(element.id)
+          cheArr.push(element.id)
+        }
+        else if (element.open) {
+          expArr.push(element.id)
+        }
+        else if (element.checked) {
+          cheArr.push(element.id)
+        }
+      })
+      defaultExpanded.value = expArr
+      defaultChecked.value = cheArr
+      treeRef.value?.setCheckedNodes(defaultChecked.value)
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then((response) => {
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  userId.value = ''
+  userName.value = ''
+  defaultExpanded.value = []
+  defaultChecked.value = []
+  treeRef.value?.setCheckedNodes([])
+  emits('resetData')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange"
+      />
+    </el-scrollbar>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
deleted file mode 100644
index 52b9073..0000000
--- a/src/views/system/user/role.assignment.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- 角色分配弹窗 -->
-<script lang="ts" setup name="roleAssigmentDialog">
-import { ElMessage } from 'element-plus'
-import type { userType } from './user_interface'
-import { getShowItem, toTreeList } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/system/role'
-import { roleAssign } from '@/api/system/user'
-const props = defineProps({
-  titleText: {
-    type: String,
-    default: '分配角色',
-  },
-})
-const emits = defineEmits(['resetData'])
-const dialogFormVisible = ref<boolean>(false)
-const loading = ref<boolean>(false) // 加载动态效果
-const roleTreeList = ref([])// 角色树列表数据
-const defaultProps = ref({
-  label: 'name',
-  children: 'children',
-})
-const userId = ref('')// 用户id
-const userName = ref('') // 用户名称
-const ids = ref([]) // 选中项id
-const defaultExpanded = ref<string[]>([]) // 默认展开的项
-const defaultChecked = ref<string[]>([]) // 默认选中的树
-const defaultExpandAll = ref<boolean>(true)// 是否展开树
-const handleCheckChange = () => {
-
-}
-const treeRef = ref()
-// 获取角色列表
-const fetchRoleTree = () => {
-  getRoleTreeListByUser(userId.value).then((response) => {
-    if (response.data) {
-      roleTreeList.value = toTreeList(response.data)
-      // 获取展开项和选中项
-      const expArr: string[] = []
-      const cheArr: string[] = []
-      response.data.forEach((element: any) => {
-        if (element.open && element.checked) {
-          expArr.push(element.id)
-          cheArr.push(element.id)
-        }
-        else if (element.open) {
-          expArr.push(element.id)
-        }
-        else if (element.checked) {
-          cheArr.push(element.id)
-        }
-      })
-      defaultExpanded.value = expArr
-      defaultChecked.value = cheArr
-      treeRef.value?.setCheckedNodes(defaultChecked.value)
-      loading.value = false
-    }
-  })
-}
-// 弹窗初始化
-const initDialog = (row: userType) => {
-  loading.value = true
-  userId.value = row.id
-  userName.value = row.name
-  dialogFormVisible.value = true
-  fetchRoleTree()
-}
-
-defineExpose({ initDialog })
-const saveData = () => {
-  ids.value = treeRef.value.getCheckedKeys()
-  roleAssign(userId.value, ids.value).then((response) => {
-    if (response.code === 200) {
-      ElMessage.success('角色分配成功')
-      dialogFormVisible.value = false
-      emits('resetData')
-    }
-  })
-}
-const cancel = () => {
-  dialogFormVisible.value = false
-  userId.value = ''
-  userName.value = ''
-  defaultExpanded.value = []
-  defaultChecked.value = []
-  treeRef.value?.setCheckedNodes([])
-  emits('resetData')
-}
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
-    <el-scrollbar>
-      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
-        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
-        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
-        @check-change="handleCheckChange" />
-    </el-scrollbar>
-    <div class="dialog-footer footer">
-      <el-button type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/roleAssignment.vue b/src/views/system/user/roleAssignment.vue
new file mode 100644
index 0000000..4b09678
--- /dev/null
+++ b/src/views/system/user/roleAssignment.vue
@@ -0,0 +1,116 @@
+<!-- 角色分配弹窗 -->
+<script lang="ts" setup name="roleAssigmentDialog">
+import { ElMessage } from 'element-plus'
+import type { userType } from './user-interface'
+import { getShowItem, toTreeList } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  },
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children',
+})
+const userId = ref('')// 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+const treeRef = ref()
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      // 获取展开项和选中项
+      const expArr: string[] = []
+      const cheArr: string[] = []
+      response.data.forEach((element: any) => {
+        if (element.open && element.checked) {
+          expArr.push(element.id)
+          cheArr.push(element.id)
+        }
+        else if (element.open) {
+          expArr.push(element.id)
+        }
+        else if (element.checked) {
+          cheArr.push(element.id)
+        }
+      })
+      defaultExpanded.value = expArr
+      defaultChecked.value = cheArr
+      treeRef.value?.setCheckedNodes(defaultChecked.value)
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then((response) => {
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  userId.value = ''
+  userName.value = ''
+  defaultExpanded.value = []
+  defaultChecked.value = []
+  treeRef.value?.setCheckedNodes([])
+  emits('resetData')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange"
+      />
+    </el-scrollbar>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/selecTree.vue b/src/views/system/user/selecTree.vue
new file mode 100644
index 0000000..efbac4a
--- /dev/null
+++ b/src/views/system/user/selecTree.vue
@@ -0,0 +1,182 @@
+<!-- 树状选择器 -->
+<script lang="ts">
+import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import type { PropType } from 'vue'
+import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+const TreeProps: PropsIter = {
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true,
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px',
+    },
+    // 空占位字符
+    placeholder: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: '',
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const blur = ref<HTMLElement | null>()
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label || data.name
+      select.value = data.id
+      emit('update:modelValue', select.value);
+      //  关闭下拉框
+      (treeSelect.value as any).handleClose()
+      nextTick(() => {
+        (treeSelect.value as any).handleClose()
+      })
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select
+      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected"
+    >
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2
+          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
+          :filter-method="treeFilter" @node-click="nodeClick"
+        />
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
deleted file mode 100644
index 52b9073..0000000
--- a/src/views/system/user/role.assignment.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- 角色分配弹窗 -->
-<script lang="ts" setup name="roleAssigmentDialog">
-import { ElMessage } from 'element-plus'
-import type { userType } from './user_interface'
-import { getShowItem, toTreeList } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/system/role'
-import { roleAssign } from '@/api/system/user'
-const props = defineProps({
-  titleText: {
-    type: String,
-    default: '分配角色',
-  },
-})
-const emits = defineEmits(['resetData'])
-const dialogFormVisible = ref<boolean>(false)
-const loading = ref<boolean>(false) // 加载动态效果
-const roleTreeList = ref([])// 角色树列表数据
-const defaultProps = ref({
-  label: 'name',
-  children: 'children',
-})
-const userId = ref('')// 用户id
-const userName = ref('') // 用户名称
-const ids = ref([]) // 选中项id
-const defaultExpanded = ref<string[]>([]) // 默认展开的项
-const defaultChecked = ref<string[]>([]) // 默认选中的树
-const defaultExpandAll = ref<boolean>(true)// 是否展开树
-const handleCheckChange = () => {
-
-}
-const treeRef = ref()
-// 获取角色列表
-const fetchRoleTree = () => {
-  getRoleTreeListByUser(userId.value).then((response) => {
-    if (response.data) {
-      roleTreeList.value = toTreeList(response.data)
-      // 获取展开项和选中项
-      const expArr: string[] = []
-      const cheArr: string[] = []
-      response.data.forEach((element: any) => {
-        if (element.open && element.checked) {
-          expArr.push(element.id)
-          cheArr.push(element.id)
-        }
-        else if (element.open) {
-          expArr.push(element.id)
-        }
-        else if (element.checked) {
-          cheArr.push(element.id)
-        }
-      })
-      defaultExpanded.value = expArr
-      defaultChecked.value = cheArr
-      treeRef.value?.setCheckedNodes(defaultChecked.value)
-      loading.value = false
-    }
-  })
-}
-// 弹窗初始化
-const initDialog = (row: userType) => {
-  loading.value = true
-  userId.value = row.id
-  userName.value = row.name
-  dialogFormVisible.value = true
-  fetchRoleTree()
-}
-
-defineExpose({ initDialog })
-const saveData = () => {
-  ids.value = treeRef.value.getCheckedKeys()
-  roleAssign(userId.value, ids.value).then((response) => {
-    if (response.code === 200) {
-      ElMessage.success('角色分配成功')
-      dialogFormVisible.value = false
-      emits('resetData')
-    }
-  })
-}
-const cancel = () => {
-  dialogFormVisible.value = false
-  userId.value = ''
-  userName.value = ''
-  defaultExpanded.value = []
-  defaultChecked.value = []
-  treeRef.value?.setCheckedNodes([])
-  emits('resetData')
-}
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
-    <el-scrollbar>
-      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
-        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
-        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
-        @check-change="handleCheckChange" />
-    </el-scrollbar>
-    <div class="dialog-footer footer">
-      <el-button type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/roleAssignment.vue b/src/views/system/user/roleAssignment.vue
new file mode 100644
index 0000000..4b09678
--- /dev/null
+++ b/src/views/system/user/roleAssignment.vue
@@ -0,0 +1,116 @@
+<!-- 角色分配弹窗 -->
+<script lang="ts" setup name="roleAssigmentDialog">
+import { ElMessage } from 'element-plus'
+import type { userType } from './user-interface'
+import { getShowItem, toTreeList } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  },
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children',
+})
+const userId = ref('')// 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+const treeRef = ref()
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      // 获取展开项和选中项
+      const expArr: string[] = []
+      const cheArr: string[] = []
+      response.data.forEach((element: any) => {
+        if (element.open && element.checked) {
+          expArr.push(element.id)
+          cheArr.push(element.id)
+        }
+        else if (element.open) {
+          expArr.push(element.id)
+        }
+        else if (element.checked) {
+          cheArr.push(element.id)
+        }
+      })
+      defaultExpanded.value = expArr
+      defaultChecked.value = cheArr
+      treeRef.value?.setCheckedNodes(defaultChecked.value)
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then((response) => {
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  userId.value = ''
+  userName.value = ''
+  defaultExpanded.value = []
+  defaultChecked.value = []
+  treeRef.value?.setCheckedNodes([])
+  emits('resetData')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange"
+      />
+    </el-scrollbar>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/selecTree.vue b/src/views/system/user/selecTree.vue
new file mode 100644
index 0000000..efbac4a
--- /dev/null
+++ b/src/views/system/user/selecTree.vue
@@ -0,0 +1,182 @@
+<!-- 树状选择器 -->
+<script lang="ts">
+import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import type { PropType } from 'vue'
+import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+const TreeProps: PropsIter = {
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true,
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px',
+    },
+    // 空占位字符
+    placeholder: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: '',
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const blur = ref<HTMLElement | null>()
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label || data.name
+      select.value = data.id
+      emit('update:modelValue', select.value);
+      //  关闭下拉框
+      (treeSelect.value as any).handleClose()
+      nextTick(() => {
+        (treeSelect.value as any).handleClose()
+      })
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select
+      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected"
+    >
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2
+          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
+          :filter-method="treeFilter" @node-click="nodeClick"
+        />
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+
diff --git a/src/views/system/user/select.tree.vue b/src/views/system/user/select.tree.vue
deleted file mode 100644
index efbac4a..0000000
--- a/src/views/system/user/select.tree.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<!-- 树状选择器 -->
-<script lang="ts">
-import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
-import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
-import type { PropType } from 'vue'
-import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
-interface PropsIter {
-  value: string
-  label: string
-  children: string
-  disabled?: boolean
-}
-const TreeProps: PropsIter = {
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-interface TreeIter {
-  id: string
-  label: string
-  children?: TreeIter[]
-}
-export default defineComponent({
-  props: {
-    // 组件绑定的options
-    options: {
-      type: Array as PropType<TreeIter[]>,
-      required: true,
-    },
-    // 配置选项
-    keyProps: Object as PropType<PropsIter>,
-    // 双向绑定值
-    modelValue: [String, Number],
-    // 组件样式宽
-    width: {
-      type: String,
-      default: '240px',
-    },
-    // 空占位字符
-    placeholder: String,
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    // 解决 props道具变异
-    const { modelValue } = toRefs(props)
-    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
-      value: modelValue.value,
-      currentNodeKey: '',
-      currentNodeLabel: '',
-    })
-    const treeSelect = ref<HTMLElement | null>(null)
-    const blur = ref<HTMLElement | null>()
-    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
-      select.currentNodeKey = data.id
-      select.currentNodeLabel = data.label || data.name
-      select.value = data.id
-      emit('update:modelValue', select.value);
-      //  关闭下拉框
-      (treeSelect.value as any).handleClose()
-      nextTick(() => {
-        (treeSelect.value as any).handleClose()
-      })
-    }
-    // 筛选方法
-    const treeV2: any = ref<HTMLElement | null>(null)
-    const selectFilter = (query: string) => {
-      treeV2.value.filter(query)
-    }
-    // ztree-v2 筛选方法
-    const treeFilter = (query: string, node: TreeNode) => {
-      return node.label?.indexOf(query) !== -1
-    }
-    // 直接清空选择数据
-    const clearSelected = () => {
-      select.currentNodeKey = ''
-      select.currentNodeLabel = ''
-      select.value = ''
-      emit('update:modelValue', undefined)
-    }
-    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
-    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
-    const setCurrent = () => {
-      select.currentNodeKey = select.value
-      treeV2.value.setCurrentKey(select.value)
-      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
-      select.currentNodeLabel = data?.label || data?.name
-    }
-    // 监听外部清空数据源 清空组件数据
-    watch(modelValue, (v) => {
-      if (v === undefined && select.currentNodeKey !== '') {
-        clearSelected()
-      }
-      // 动态赋值
-      if (v) {
-        select.value = v
-        setCurrent()
-      }
-    })
-    // 回显数据
-    onMounted(async () => {
-      await nextTick()
-      if (select.value) {
-        setCurrent()
-      }
-    })
-    return {
-      treeSelect,
-      treeV2,
-      TreeProps,
-      ...toRefs(select),
-      nodeClick,
-      selectFilter,
-      treeFilter,
-      clearSelected,
-    }
-  },
-})
-</script>
-
-<template>
-  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
-    <el-select
-      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
-      :filter-method="selectFilter" @clear="clearSelected"
-    >
-      <el-option :value="currentNodeKey" :label="currentNodeLabel">
-        <el-tree-v2
-          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
-          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
-          :filter-method="treeFilter" @node-click="nodeClick"
-        />
-      </el-option>
-    </el-select>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.tree_box {
-  width: 214px;
-}
-
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-
-ul li :deep(.el-tree .el-tree-node__content) {
-  height: auto;
-  padding: 0 20px;
-}
-
-.el-tree-node__label {
-  font-weight: normal;
-}
-
-.el-tree :deep(.is-current .el-tree-node__label) {
-  color: #409eff;
-  font-weight: 700;
-}
-
-.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
-  color: #606266;
-  font-weight: normal;
-}
-
-.selectInput {
-  padding: 0 5px;
-  box-sizing: border-box;
-}
-
-.el-select {
-  width: 100% !important;
-}
-</style>
-

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
deleted file mode 100644
index 52b9073..0000000
--- a/src/views/system/user/role.assignment.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- 角色分配弹窗 -->
-<script lang="ts" setup name="roleAssigmentDialog">
-import { ElMessage } from 'element-plus'
-import type { userType } from './user_interface'
-import { getShowItem, toTreeList } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/system/role'
-import { roleAssign } from '@/api/system/user'
-const props = defineProps({
-  titleText: {
-    type: String,
-    default: '分配角色',
-  },
-})
-const emits = defineEmits(['resetData'])
-const dialogFormVisible = ref<boolean>(false)
-const loading = ref<boolean>(false) // 加载动态效果
-const roleTreeList = ref([])// 角色树列表数据
-const defaultProps = ref({
-  label: 'name',
-  children: 'children',
-})
-const userId = ref('')// 用户id
-const userName = ref('') // 用户名称
-const ids = ref([]) // 选中项id
-const defaultExpanded = ref<string[]>([]) // 默认展开的项
-const defaultChecked = ref<string[]>([]) // 默认选中的树
-const defaultExpandAll = ref<boolean>(true)// 是否展开树
-const handleCheckChange = () => {
-
-}
-const treeRef = ref()
-// 获取角色列表
-const fetchRoleTree = () => {
-  getRoleTreeListByUser(userId.value).then((response) => {
-    if (response.data) {
-      roleTreeList.value = toTreeList(response.data)
-      // 获取展开项和选中项
-      const expArr: string[] = []
-      const cheArr: string[] = []
-      response.data.forEach((element: any) => {
-        if (element.open && element.checked) {
-          expArr.push(element.id)
-          cheArr.push(element.id)
-        }
-        else if (element.open) {
-          expArr.push(element.id)
-        }
-        else if (element.checked) {
-          cheArr.push(element.id)
-        }
-      })
-      defaultExpanded.value = expArr
-      defaultChecked.value = cheArr
-      treeRef.value?.setCheckedNodes(defaultChecked.value)
-      loading.value = false
-    }
-  })
-}
-// 弹窗初始化
-const initDialog = (row: userType) => {
-  loading.value = true
-  userId.value = row.id
-  userName.value = row.name
-  dialogFormVisible.value = true
-  fetchRoleTree()
-}
-
-defineExpose({ initDialog })
-const saveData = () => {
-  ids.value = treeRef.value.getCheckedKeys()
-  roleAssign(userId.value, ids.value).then((response) => {
-    if (response.code === 200) {
-      ElMessage.success('角色分配成功')
-      dialogFormVisible.value = false
-      emits('resetData')
-    }
-  })
-}
-const cancel = () => {
-  dialogFormVisible.value = false
-  userId.value = ''
-  userName.value = ''
-  defaultExpanded.value = []
-  defaultChecked.value = []
-  treeRef.value?.setCheckedNodes([])
-  emits('resetData')
-}
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
-    <el-scrollbar>
-      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
-        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
-        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
-        @check-change="handleCheckChange" />
-    </el-scrollbar>
-    <div class="dialog-footer footer">
-      <el-button type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/roleAssignment.vue b/src/views/system/user/roleAssignment.vue
new file mode 100644
index 0000000..4b09678
--- /dev/null
+++ b/src/views/system/user/roleAssignment.vue
@@ -0,0 +1,116 @@
+<!-- 角色分配弹窗 -->
+<script lang="ts" setup name="roleAssigmentDialog">
+import { ElMessage } from 'element-plus'
+import type { userType } from './user-interface'
+import { getShowItem, toTreeList } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  },
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children',
+})
+const userId = ref('')// 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+const treeRef = ref()
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      // 获取展开项和选中项
+      const expArr: string[] = []
+      const cheArr: string[] = []
+      response.data.forEach((element: any) => {
+        if (element.open && element.checked) {
+          expArr.push(element.id)
+          cheArr.push(element.id)
+        }
+        else if (element.open) {
+          expArr.push(element.id)
+        }
+        else if (element.checked) {
+          cheArr.push(element.id)
+        }
+      })
+      defaultExpanded.value = expArr
+      defaultChecked.value = cheArr
+      treeRef.value?.setCheckedNodes(defaultChecked.value)
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then((response) => {
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  userId.value = ''
+  userName.value = ''
+  defaultExpanded.value = []
+  defaultChecked.value = []
+  treeRef.value?.setCheckedNodes([])
+  emits('resetData')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange"
+      />
+    </el-scrollbar>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/selecTree.vue b/src/views/system/user/selecTree.vue
new file mode 100644
index 0000000..efbac4a
--- /dev/null
+++ b/src/views/system/user/selecTree.vue
@@ -0,0 +1,182 @@
+<!-- 树状选择器 -->
+<script lang="ts">
+import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import type { PropType } from 'vue'
+import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+const TreeProps: PropsIter = {
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true,
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px',
+    },
+    // 空占位字符
+    placeholder: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: '',
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const blur = ref<HTMLElement | null>()
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label || data.name
+      select.value = data.id
+      emit('update:modelValue', select.value);
+      //  关闭下拉框
+      (treeSelect.value as any).handleClose()
+      nextTick(() => {
+        (treeSelect.value as any).handleClose()
+      })
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select
+      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected"
+    >
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2
+          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
+          :filter-method="treeFilter" @node-click="nodeClick"
+        />
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+
diff --git a/src/views/system/user/select.tree.vue b/src/views/system/user/select.tree.vue
deleted file mode 100644
index efbac4a..0000000
--- a/src/views/system/user/select.tree.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<!-- 树状选择器 -->
-<script lang="ts">
-import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
-import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
-import type { PropType } from 'vue'
-import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
-interface PropsIter {
-  value: string
-  label: string
-  children: string
-  disabled?: boolean
-}
-const TreeProps: PropsIter = {
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-interface TreeIter {
-  id: string
-  label: string
-  children?: TreeIter[]
-}
-export default defineComponent({
-  props: {
-    // 组件绑定的options
-    options: {
-      type: Array as PropType<TreeIter[]>,
-      required: true,
-    },
-    // 配置选项
-    keyProps: Object as PropType<PropsIter>,
-    // 双向绑定值
-    modelValue: [String, Number],
-    // 组件样式宽
-    width: {
-      type: String,
-      default: '240px',
-    },
-    // 空占位字符
-    placeholder: String,
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    // 解决 props道具变异
-    const { modelValue } = toRefs(props)
-    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
-      value: modelValue.value,
-      currentNodeKey: '',
-      currentNodeLabel: '',
-    })
-    const treeSelect = ref<HTMLElement | null>(null)
-    const blur = ref<HTMLElement | null>()
-    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
-      select.currentNodeKey = data.id
-      select.currentNodeLabel = data.label || data.name
-      select.value = data.id
-      emit('update:modelValue', select.value);
-      //  关闭下拉框
-      (treeSelect.value as any).handleClose()
-      nextTick(() => {
-        (treeSelect.value as any).handleClose()
-      })
-    }
-    // 筛选方法
-    const treeV2: any = ref<HTMLElement | null>(null)
-    const selectFilter = (query: string) => {
-      treeV2.value.filter(query)
-    }
-    // ztree-v2 筛选方法
-    const treeFilter = (query: string, node: TreeNode) => {
-      return node.label?.indexOf(query) !== -1
-    }
-    // 直接清空选择数据
-    const clearSelected = () => {
-      select.currentNodeKey = ''
-      select.currentNodeLabel = ''
-      select.value = ''
-      emit('update:modelValue', undefined)
-    }
-    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
-    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
-    const setCurrent = () => {
-      select.currentNodeKey = select.value
-      treeV2.value.setCurrentKey(select.value)
-      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
-      select.currentNodeLabel = data?.label || data?.name
-    }
-    // 监听外部清空数据源 清空组件数据
-    watch(modelValue, (v) => {
-      if (v === undefined && select.currentNodeKey !== '') {
-        clearSelected()
-      }
-      // 动态赋值
-      if (v) {
-        select.value = v
-        setCurrent()
-      }
-    })
-    // 回显数据
-    onMounted(async () => {
-      await nextTick()
-      if (select.value) {
-        setCurrent()
-      }
-    })
-    return {
-      treeSelect,
-      treeV2,
-      TreeProps,
-      ...toRefs(select),
-      nodeClick,
-      selectFilter,
-      treeFilter,
-      clearSelected,
-    }
-  },
-})
-</script>
-
-<template>
-  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
-    <el-select
-      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
-      :filter-method="selectFilter" @clear="clearSelected"
-    >
-      <el-option :value="currentNodeKey" :label="currentNodeLabel">
-        <el-tree-v2
-          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
-          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
-          :filter-method="treeFilter" @node-click="nodeClick"
-        />
-      </el-option>
-    </el-select>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.tree_box {
-  width: 214px;
-}
-
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-
-ul li :deep(.el-tree .el-tree-node__content) {
-  height: auto;
-  padding: 0 20px;
-}
-
-.el-tree-node__label {
-  font-weight: normal;
-}
-
-.el-tree :deep(.is-current .el-tree-node__label) {
-  color: #409eff;
-  font-weight: 700;
-}
-
-.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
-  color: #606266;
-  font-weight: normal;
-}
-
-.selectInput {
-  padding: 0 5px;
-  box-sizing: border-box;
-}
-
-.el-select {
-  width: 100% !important;
-}
-</style>
-
diff --git a/src/views/system/user/user-interface.ts b/src/views/system/user/user-interface.ts
new file mode 100644
index 0000000..e27a855
--- /dev/null
+++ b/src/views/system/user/user-interface.ts
@@ -0,0 +1,66 @@
+export interface IlistQueryType {
+  keywords: string
+  beginTime: string
+  endTime: string
+  offset: number
+  limit: number
+  sort: string
+  deptId: string
+  deptType: string
+}
+// 树形结构
+export interface TreeStructure {
+  checked: boolean
+  children: TreeStructure[]
+  code: string
+  id: string
+  name: string
+  open: boolean
+  pCodes: string
+  pid: string
+  value: string
+
+}
+// 新增或添加
+export interface addInfo {
+  id: string // 编号
+  account: string // 账号
+  name: string // 姓名
+  email: string // 邮箱，
+  phone: string // 手机号，
+  deptId: string // 组织机构编号
+  roleid: string // 角色
+  password?: string // 密码
+  rePassword?: string // 重复密码
+  birthday?: string
+  sex?: string // 性别
+  roleName?: string
+}
+// 用户列表返回值类型
+export interface userType {
+  account: string
+  attr1: string
+  avatar: string
+  birthday: string
+  createtime: string
+  deptId: string
+  deptName: string
+  email: string
+  id: string
+  name: string
+  phone: string
+  roleId: string
+  roleName: string
+  sex: string
+  sexName: string
+  status: string
+  statusName: string
+  syncId: string
+  syncName: string
+  version: string
+
+}
+export interface changePageType {
+  page?: number
+  size?: number
+}

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
deleted file mode 100644
index 52b9073..0000000
--- a/src/views/system/user/role.assignment.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- 角色分配弹窗 -->
-<script lang="ts" setup name="roleAssigmentDialog">
-import { ElMessage } from 'element-plus'
-import type { userType } from './user_interface'
-import { getShowItem, toTreeList } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/system/role'
-import { roleAssign } from '@/api/system/user'
-const props = defineProps({
-  titleText: {
-    type: String,
-    default: '分配角色',
-  },
-})
-const emits = defineEmits(['resetData'])
-const dialogFormVisible = ref<boolean>(false)
-const loading = ref<boolean>(false) // 加载动态效果
-const roleTreeList = ref([])// 角色树列表数据
-const defaultProps = ref({
-  label: 'name',
-  children: 'children',
-})
-const userId = ref('')// 用户id
-const userName = ref('') // 用户名称
-const ids = ref([]) // 选中项id
-const defaultExpanded = ref<string[]>([]) // 默认展开的项
-const defaultChecked = ref<string[]>([]) // 默认选中的树
-const defaultExpandAll = ref<boolean>(true)// 是否展开树
-const handleCheckChange = () => {
-
-}
-const treeRef = ref()
-// 获取角色列表
-const fetchRoleTree = () => {
-  getRoleTreeListByUser(userId.value).then((response) => {
-    if (response.data) {
-      roleTreeList.value = toTreeList(response.data)
-      // 获取展开项和选中项
-      const expArr: string[] = []
-      const cheArr: string[] = []
-      response.data.forEach((element: any) => {
-        if (element.open && element.checked) {
-          expArr.push(element.id)
-          cheArr.push(element.id)
-        }
-        else if (element.open) {
-          expArr.push(element.id)
-        }
-        else if (element.checked) {
-          cheArr.push(element.id)
-        }
-      })
-      defaultExpanded.value = expArr
-      defaultChecked.value = cheArr
-      treeRef.value?.setCheckedNodes(defaultChecked.value)
-      loading.value = false
-    }
-  })
-}
-// 弹窗初始化
-const initDialog = (row: userType) => {
-  loading.value = true
-  userId.value = row.id
-  userName.value = row.name
-  dialogFormVisible.value = true
-  fetchRoleTree()
-}
-
-defineExpose({ initDialog })
-const saveData = () => {
-  ids.value = treeRef.value.getCheckedKeys()
-  roleAssign(userId.value, ids.value).then((response) => {
-    if (response.code === 200) {
-      ElMessage.success('角色分配成功')
-      dialogFormVisible.value = false
-      emits('resetData')
-    }
-  })
-}
-const cancel = () => {
-  dialogFormVisible.value = false
-  userId.value = ''
-  userName.value = ''
-  defaultExpanded.value = []
-  defaultChecked.value = []
-  treeRef.value?.setCheckedNodes([])
-  emits('resetData')
-}
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
-    <el-scrollbar>
-      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
-        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
-        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
-        @check-change="handleCheckChange" />
-    </el-scrollbar>
-    <div class="dialog-footer footer">
-      <el-button type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/roleAssignment.vue b/src/views/system/user/roleAssignment.vue
new file mode 100644
index 0000000..4b09678
--- /dev/null
+++ b/src/views/system/user/roleAssignment.vue
@@ -0,0 +1,116 @@
+<!-- 角色分配弹窗 -->
+<script lang="ts" setup name="roleAssigmentDialog">
+import { ElMessage } from 'element-plus'
+import type { userType } from './user-interface'
+import { getShowItem, toTreeList } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  },
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children',
+})
+const userId = ref('')// 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+const treeRef = ref()
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      // 获取展开项和选中项
+      const expArr: string[] = []
+      const cheArr: string[] = []
+      response.data.forEach((element: any) => {
+        if (element.open && element.checked) {
+          expArr.push(element.id)
+          cheArr.push(element.id)
+        }
+        else if (element.open) {
+          expArr.push(element.id)
+        }
+        else if (element.checked) {
+          cheArr.push(element.id)
+        }
+      })
+      defaultExpanded.value = expArr
+      defaultChecked.value = cheArr
+      treeRef.value?.setCheckedNodes(defaultChecked.value)
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then((response) => {
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  userId.value = ''
+  userName.value = ''
+  defaultExpanded.value = []
+  defaultChecked.value = []
+  treeRef.value?.setCheckedNodes([])
+  emits('resetData')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange"
+      />
+    </el-scrollbar>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/selecTree.vue b/src/views/system/user/selecTree.vue
new file mode 100644
index 0000000..efbac4a
--- /dev/null
+++ b/src/views/system/user/selecTree.vue
@@ -0,0 +1,182 @@
+<!-- 树状选择器 -->
+<script lang="ts">
+import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import type { PropType } from 'vue'
+import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+const TreeProps: PropsIter = {
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true,
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px',
+    },
+    // 空占位字符
+    placeholder: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: '',
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const blur = ref<HTMLElement | null>()
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label || data.name
+      select.value = data.id
+      emit('update:modelValue', select.value);
+      //  关闭下拉框
+      (treeSelect.value as any).handleClose()
+      nextTick(() => {
+        (treeSelect.value as any).handleClose()
+      })
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select
+      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected"
+    >
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2
+          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
+          :filter-method="treeFilter" @node-click="nodeClick"
+        />
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+
diff --git a/src/views/system/user/select.tree.vue b/src/views/system/user/select.tree.vue
deleted file mode 100644
index efbac4a..0000000
--- a/src/views/system/user/select.tree.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<!-- 树状选择器 -->
-<script lang="ts">
-import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
-import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
-import type { PropType } from 'vue'
-import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
-interface PropsIter {
-  value: string
-  label: string
-  children: string
-  disabled?: boolean
-}
-const TreeProps: PropsIter = {
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-interface TreeIter {
-  id: string
-  label: string
-  children?: TreeIter[]
-}
-export default defineComponent({
-  props: {
-    // 组件绑定的options
-    options: {
-      type: Array as PropType<TreeIter[]>,
-      required: true,
-    },
-    // 配置选项
-    keyProps: Object as PropType<PropsIter>,
-    // 双向绑定值
-    modelValue: [String, Number],
-    // 组件样式宽
-    width: {
-      type: String,
-      default: '240px',
-    },
-    // 空占位字符
-    placeholder: String,
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    // 解决 props道具变异
-    const { modelValue } = toRefs(props)
-    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
-      value: modelValue.value,
-      currentNodeKey: '',
-      currentNodeLabel: '',
-    })
-    const treeSelect = ref<HTMLElement | null>(null)
-    const blur = ref<HTMLElement | null>()
-    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
-      select.currentNodeKey = data.id
-      select.currentNodeLabel = data.label || data.name
-      select.value = data.id
-      emit('update:modelValue', select.value);
-      //  关闭下拉框
-      (treeSelect.value as any).handleClose()
-      nextTick(() => {
-        (treeSelect.value as any).handleClose()
-      })
-    }
-    // 筛选方法
-    const treeV2: any = ref<HTMLElement | null>(null)
-    const selectFilter = (query: string) => {
-      treeV2.value.filter(query)
-    }
-    // ztree-v2 筛选方法
-    const treeFilter = (query: string, node: TreeNode) => {
-      return node.label?.indexOf(query) !== -1
-    }
-    // 直接清空选择数据
-    const clearSelected = () => {
-      select.currentNodeKey = ''
-      select.currentNodeLabel = ''
-      select.value = ''
-      emit('update:modelValue', undefined)
-    }
-    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
-    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
-    const setCurrent = () => {
-      select.currentNodeKey = select.value
-      treeV2.value.setCurrentKey(select.value)
-      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
-      select.currentNodeLabel = data?.label || data?.name
-    }
-    // 监听外部清空数据源 清空组件数据
-    watch(modelValue, (v) => {
-      if (v === undefined && select.currentNodeKey !== '') {
-        clearSelected()
-      }
-      // 动态赋值
-      if (v) {
-        select.value = v
-        setCurrent()
-      }
-    })
-    // 回显数据
-    onMounted(async () => {
-      await nextTick()
-      if (select.value) {
-        setCurrent()
-      }
-    })
-    return {
-      treeSelect,
-      treeV2,
-      TreeProps,
-      ...toRefs(select),
-      nodeClick,
-      selectFilter,
-      treeFilter,
-      clearSelected,
-    }
-  },
-})
-</script>
-
-<template>
-  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
-    <el-select
-      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
-      :filter-method="selectFilter" @clear="clearSelected"
-    >
-      <el-option :value="currentNodeKey" :label="currentNodeLabel">
-        <el-tree-v2
-          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
-          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
-          :filter-method="treeFilter" @node-click="nodeClick"
-        />
-      </el-option>
-    </el-select>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.tree_box {
-  width: 214px;
-}
-
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-
-ul li :deep(.el-tree .el-tree-node__content) {
-  height: auto;
-  padding: 0 20px;
-}
-
-.el-tree-node__label {
-  font-weight: normal;
-}
-
-.el-tree :deep(.is-current .el-tree-node__label) {
-  color: #409eff;
-  font-weight: 700;
-}
-
-.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
-  color: #606266;
-  font-weight: normal;
-}
-
-.selectInput {
-  padding: 0 5px;
-  box-sizing: border-box;
-}
-
-.el-select {
-  width: 100% !important;
-}
-</style>
-
diff --git a/src/views/system/user/user-interface.ts b/src/views/system/user/user-interface.ts
new file mode 100644
index 0000000..e27a855
--- /dev/null
+++ b/src/views/system/user/user-interface.ts
@@ -0,0 +1,66 @@
+export interface IlistQueryType {
+  keywords: string
+  beginTime: string
+  endTime: string
+  offset: number
+  limit: number
+  sort: string
+  deptId: string
+  deptType: string
+}
+// 树形结构
+export interface TreeStructure {
+  checked: boolean
+  children: TreeStructure[]
+  code: string
+  id: string
+  name: string
+  open: boolean
+  pCodes: string
+  pid: string
+  value: string
+
+}
+// 新增或添加
+export interface addInfo {
+  id: string // 编号
+  account: string // 账号
+  name: string // 姓名
+  email: string // 邮箱，
+  phone: string // 手机号，
+  deptId: string // 组织机构编号
+  roleid: string // 角色
+  password?: string // 密码
+  rePassword?: string // 重复密码
+  birthday?: string
+  sex?: string // 性别
+  roleName?: string
+}
+// 用户列表返回值类型
+export interface userType {
+  account: string
+  attr1: string
+  avatar: string
+  birthday: string
+  createtime: string
+  deptId: string
+  deptName: string
+  email: string
+  id: string
+  name: string
+  phone: string
+  roleId: string
+  roleName: string
+  sex: string
+  sexName: string
+  status: string
+  statusName: string
+  syncId: string
+  syncName: string
+  version: string
+
+}
+export interface changePageType {
+  page?: number
+  size?: number
+}
diff --git a/src/views/system/user/user.add.vue b/src/views/system/user/user.add.vue
deleted file mode 100644
index 2505000..0000000
--- a/src/views/system/user/user.add.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-<!-- 添加修改用户弹窗 -->
-<script lang="ts" setup name="SystemUserAddDialog">
-import type { FormInstance } from 'element-plus'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { addInfo } from './user_interface'
-import comTreeSelect from './select.tree.vue'
-import { toTreeList } from '@/utils/structure'
-import { addUser, updateUser } from '@/api/system/user'
-import { getRoleTreeList } from '@/api/system/role'
-import { getDeptTreeList } from '@/api/system/dept'
-import { getDictByCode } from '@/api/system/dict'
-import { RSAencrypt } from '@/utils/security'
-const emits = defineEmits(['resetData'])
-const ruleFormRef = ref<FormInstance>()
-const dialogFormVisible = ref<boolean>(false)// 对话框是否显示
-const dialogStatus = ref<string>('')// 对话框类型：create,update
-const userForm = reactive<addInfo>({
-  id: '', // 编号
-  account: '', // 账号
-  name: '', // 姓名
-  email: '', // 邮箱，/
-  phone: '', // 手机号，
-  deptId: '', // 组织机构编号
-  roleid: '', // 角色
-  password: '', // 密码
-  rePassword: '', // 重复密码
-  birthday: '',
-  sex: '', // 性别
-})// 表单
-const deptProps = reactive({
-  parent: 'pid', value: 'id', label: 'name', children: 'children',
-})
-const roleProps = reactive({
-  parent: 'pid', value: 'id', label: 'name', children: 'children',
-})
-const roleTreeList = ref([])// 角色树列表数据
-const deptTreeList = ref([])
-const sexList = ref<{ id: string; value: string; name: string }[]>()// 性别选项
-const textMap = reactive<{ update: string; create: string }>({
-  update: '编辑用户',
-  create: '新增用户',
-})// 表头显示标题
-const validatePass = (rule: any, value: any, callback: any) => {
-  if (value === '') {
-    callback(new Error('密码不能为空'))
-  }
-  else {
-    if (userForm.rePassword !== '') {
-      ruleFormRef.value?.validateField('rePassword')
-    }
-    callback()
-  }
-}
-const validatePass2 = (rule: any, value: any, callback: any) => {
-  if (value === '') {
-    callback(new Error('重复密码不能为空'))
-  }
-  else if (value !== userForm.password) {
-    callback(new Error('两次输入密码不一致!'))
-  }
-  else {
-    callback()
-  }
-}
-const rules = reactive({
-  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
-  name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
-  password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
-  rePassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '组织机构必选', trigger: ['blur', 'change'] }],
-  roleid: [{ required: true, message: '角色必选', trigger: ['blur', 'change'] }],
-  email: [{ required: false, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
-  phone: [{ required: false, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }],
-})// 前端校验规则
-const roleName = ref<string>()// 角色名，展示用
-const btnLoading = ref<boolean>(false)// 保存按钮的加载中状态
-
-// 加载角色树形下拉菜单
-const fetchRoleTree = () => {
-  getRoleTreeList().then((res) => {
-    if (res.data.list) { // 将列表转树结构
-      roleTreeList.value = toTreeList(res.data.list, '0', true)
-    }
-  })
-}
-// 加载组织机构树形下拉
-const fetchDeptTree = () => {
-  getDeptTreeList().then((res) => {
-    if (res.data) { // 将列表转树结构
-      deptTreeList.value = toTreeList(res.data, '0', true)
-    }
-  })
-}
-// 重置表单
-const resetForm1 = () => {
-  userForm.account = ''
-  userForm.id = ''
-  userForm.name = ''
-  userForm.email = ''
-  userForm.phone = ''
-  userForm.deptId = ''
-  userForm.sex = ''
-  userForm.birthday = ''
-  userForm.roleid = ''
-  userForm.password = ''
-  userForm.rePassword = ''
-}
-// 新增数据
-const createData = () => {
-  ruleFormRef.value?.validate(async (valid) => {
-    const userForm1 = JSON.parse(JSON.stringify(userForm))
-    userForm1.password = await RSAencrypt(userForm1.password)
-    userForm1.rePassword = await RSAencrypt(userForm1.rePassword)
-    if (valid) {
-      btnLoading.value = true
-      addUser(userForm1).then((response) => {
-        ElMessageBox.confirm('新增成功，是否继续新增?', '提示', {
-          confirmButtonText: '是',
-          cancelButtonText: '否',
-          type: 'info',
-        }).then(() => {
-          btnLoading.value = false
-          resetForm1()
-          nextTick(() => {
-            ruleFormRef.value?.clearValidate()
-          })
-        }).catch(() => {
-          dialogFormVisible.value = false
-          emits('resetData')
-        })
-      }).catch(() => { // 异常情况，loading置为false
-        btnLoading.value = false
-      })
-    }
-  })
-}
-// 修改数据
-const updateData = () => {
-  ruleFormRef.value?.validate((valid) => {
-    if (valid) {
-      btnLoading.value = true
-      updateUser(userForm).then((response) => {
-        ElMessage.success('修改成功')
-        dialogFormVisible.value = false
-        emits('resetData')
-      }).catch(() => { // 异常情况，loading置为false
-        btnLoading.value = false
-      })
-    }
-  })
-}
-
-// 保存数据
-const saveData = () => {
-  if (dialogStatus.value === 'update') {
-    updateData()
-  }
-  else if (dialogStatus.value === 'create') {
-    createData()
-  }
-}
-
-const cancel = () => {
-  dialogFormVisible.value = false
-  // resetForm1()
-  ruleFormRef.value?.resetFields()
-  emits('resetData')
-}
-// 初始化对话框
-const initDialog = (dialogStatusflag: string, row: addInfo = {
-  id: '', // 编号
-  account: '', // 账号
-  name: '', // 姓名
-  email: '', // 邮箱，
-  phone: '', // 手机号，
-  deptId: '', // 组织机构编号
-  roleid: '', // 角色
-  password: '', // 密码
-  rePassword: '', // 重复密码
-  birthday: '',
-  sex: '', // 性别
-}) => {
-  getDictByCode('sex').then((response) => {
-    sexList.value = response.data
-  })
-  fetchRoleTree()
-  fetchDeptTree()
-  dialogStatus.value = dialogStatusflag
-  dialogFormVisible.value = true
-  btnLoading.value = false
-  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
-    userForm.account = row.account
-    userForm.id = row.id
-    userForm.name = row.name
-    userForm.email = row.email
-    userForm.phone = row.phone
-    userForm.deptId = row.deptId
-    userForm.sex = row.sex
-    userForm.birthday = row.birthday
-    userForm.roleid = row.roleid
-    roleName.value = row.roleName
-    resetForm1()
-    nextTick(() => {
-      ruleFormRef.value?.clearValidate()
-    })
-  }
-  else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
-    userForm.account = row.account
-    userForm.id = row.id
-    userForm.name = row.name
-    userForm.email = row.email
-    userForm.phone = row.phone
-    userForm.deptId = row.deptId
-    userForm.sex = row.sex
-    userForm.birthday = row.birthday
-    userForm.roleid = row.roleid
-    roleName.value = row.roleName
-    delete userForm.password
-    delete userForm.rePassword
-  }
-}
-const title = computed(() => {
-  const props = Object.keys(textMap)
-  const keyValues = props.map((el: string) => {
-    return [el, el]
-  })
-  const keys: object = Object.fromEntries(keyValues)
-  return textMap[dialogStatus as keyof typeof keys]
-})
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" width="700" :title="title" append-to-body>
-    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="账号" prop="account">
-            <el-input
-              v-model.trim="userForm.account" :disabled="dialogStatus === 'update'" type="text"
-              placeholder="必填"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="姓名" prop="name">
-            <el-input v-model.trim="userForm.name" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="性别" prop="sex">
-            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '240px' }">
-              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="出生日期" prop="birthday">
-            <el-date-picker
-              v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期"
-              style="width: 100%;"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="dialogStatus === 'create'" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="密码" prop="password">
-            <el-input v-model.trim="userForm.password" type="password" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="重复密码" prop="rePassword">
-            <el-input v-model.trim="userForm.rePassword" type="password" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item v-if="dialogStatus === 'create'" label="角色" prop="roleid">
-            <com-tree-select
-              v-model="userForm.roleid" :options="roleTreeList" placeholder="选择角色"
-              :tree-props="roleProps"
-            />
-          </el-form-item>
-          <el-form-item v-else label="角色">
-            <el-input v-model="roleName" :disabled="dialogStatus === 'update'" type="text" placeholder="无" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="组织机构" prop="deptId">
-            <!-- <dept-select v-model="userForm.deptId" :dept-show="true" :default-expanded-keys="[userForm.roleid]"
-              placeholder="请选择组织机构" /> -->
-            <com-tree-select
-              v-model="userForm.deptId" :options="deptTreeList" placeholder="选择组织机构"
-              :tree-props="deptProps"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="邮箱" prop="email">
-            <el-input v-model.trim="userForm.email" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="电话" prop="phone">
-            <el-input v-model.trim="userForm.phone" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <div class="dialog-footer footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
deleted file mode 100644
index 52b9073..0000000
--- a/src/views/system/user/role.assignment.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- 角色分配弹窗 -->
-<script lang="ts" setup name="roleAssigmentDialog">
-import { ElMessage } from 'element-plus'
-import type { userType } from './user_interface'
-import { getShowItem, toTreeList } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/system/role'
-import { roleAssign } from '@/api/system/user'
-const props = defineProps({
-  titleText: {
-    type: String,
-    default: '分配角色',
-  },
-})
-const emits = defineEmits(['resetData'])
-const dialogFormVisible = ref<boolean>(false)
-const loading = ref<boolean>(false) // 加载动态效果
-const roleTreeList = ref([])// 角色树列表数据
-const defaultProps = ref({
-  label: 'name',
-  children: 'children',
-})
-const userId = ref('')// 用户id
-const userName = ref('') // 用户名称
-const ids = ref([]) // 选中项id
-const defaultExpanded = ref<string[]>([]) // 默认展开的项
-const defaultChecked = ref<string[]>([]) // 默认选中的树
-const defaultExpandAll = ref<boolean>(true)// 是否展开树
-const handleCheckChange = () => {
-
-}
-const treeRef = ref()
-// 获取角色列表
-const fetchRoleTree = () => {
-  getRoleTreeListByUser(userId.value).then((response) => {
-    if (response.data) {
-      roleTreeList.value = toTreeList(response.data)
-      // 获取展开项和选中项
-      const expArr: string[] = []
-      const cheArr: string[] = []
-      response.data.forEach((element: any) => {
-        if (element.open && element.checked) {
-          expArr.push(element.id)
-          cheArr.push(element.id)
-        }
-        else if (element.open) {
-          expArr.push(element.id)
-        }
-        else if (element.checked) {
-          cheArr.push(element.id)
-        }
-      })
-      defaultExpanded.value = expArr
-      defaultChecked.value = cheArr
-      treeRef.value?.setCheckedNodes(defaultChecked.value)
-      loading.value = false
-    }
-  })
-}
-// 弹窗初始化
-const initDialog = (row: userType) => {
-  loading.value = true
-  userId.value = row.id
-  userName.value = row.name
-  dialogFormVisible.value = true
-  fetchRoleTree()
-}
-
-defineExpose({ initDialog })
-const saveData = () => {
-  ids.value = treeRef.value.getCheckedKeys()
-  roleAssign(userId.value, ids.value).then((response) => {
-    if (response.code === 200) {
-      ElMessage.success('角色分配成功')
-      dialogFormVisible.value = false
-      emits('resetData')
-    }
-  })
-}
-const cancel = () => {
-  dialogFormVisible.value = false
-  userId.value = ''
-  userName.value = ''
-  defaultExpanded.value = []
-  defaultChecked.value = []
-  treeRef.value?.setCheckedNodes([])
-  emits('resetData')
-}
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
-    <el-scrollbar>
-      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
-        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
-        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
-        @check-change="handleCheckChange" />
-    </el-scrollbar>
-    <div class="dialog-footer footer">
-      <el-button type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/roleAssignment.vue b/src/views/system/user/roleAssignment.vue
new file mode 100644
index 0000000..4b09678
--- /dev/null
+++ b/src/views/system/user/roleAssignment.vue
@@ -0,0 +1,116 @@
+<!-- 角色分配弹窗 -->
+<script lang="ts" setup name="roleAssigmentDialog">
+import { ElMessage } from 'element-plus'
+import type { userType } from './user-interface'
+import { getShowItem, toTreeList } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  },
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children',
+})
+const userId = ref('')// 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+const treeRef = ref()
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      // 获取展开项和选中项
+      const expArr: string[] = []
+      const cheArr: string[] = []
+      response.data.forEach((element: any) => {
+        if (element.open && element.checked) {
+          expArr.push(element.id)
+          cheArr.push(element.id)
+        }
+        else if (element.open) {
+          expArr.push(element.id)
+        }
+        else if (element.checked) {
+          cheArr.push(element.id)
+        }
+      })
+      defaultExpanded.value = expArr
+      defaultChecked.value = cheArr
+      treeRef.value?.setCheckedNodes(defaultChecked.value)
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then((response) => {
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  userId.value = ''
+  userName.value = ''
+  defaultExpanded.value = []
+  defaultChecked.value = []
+  treeRef.value?.setCheckedNodes([])
+  emits('resetData')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange"
+      />
+    </el-scrollbar>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/selecTree.vue b/src/views/system/user/selecTree.vue
new file mode 100644
index 0000000..efbac4a
--- /dev/null
+++ b/src/views/system/user/selecTree.vue
@@ -0,0 +1,182 @@
+<!-- 树状选择器 -->
+<script lang="ts">
+import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import type { PropType } from 'vue'
+import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+const TreeProps: PropsIter = {
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true,
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px',
+    },
+    // 空占位字符
+    placeholder: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: '',
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const blur = ref<HTMLElement | null>()
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label || data.name
+      select.value = data.id
+      emit('update:modelValue', select.value);
+      //  关闭下拉框
+      (treeSelect.value as any).handleClose()
+      nextTick(() => {
+        (treeSelect.value as any).handleClose()
+      })
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select
+      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected"
+    >
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2
+          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
+          :filter-method="treeFilter" @node-click="nodeClick"
+        />
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+
diff --git a/src/views/system/user/select.tree.vue b/src/views/system/user/select.tree.vue
deleted file mode 100644
index efbac4a..0000000
--- a/src/views/system/user/select.tree.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<!-- 树状选择器 -->
-<script lang="ts">
-import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
-import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
-import type { PropType } from 'vue'
-import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
-interface PropsIter {
-  value: string
-  label: string
-  children: string
-  disabled?: boolean
-}
-const TreeProps: PropsIter = {
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-interface TreeIter {
-  id: string
-  label: string
-  children?: TreeIter[]
-}
-export default defineComponent({
-  props: {
-    // 组件绑定的options
-    options: {
-      type: Array as PropType<TreeIter[]>,
-      required: true,
-    },
-    // 配置选项
-    keyProps: Object as PropType<PropsIter>,
-    // 双向绑定值
-    modelValue: [String, Number],
-    // 组件样式宽
-    width: {
-      type: String,
-      default: '240px',
-    },
-    // 空占位字符
-    placeholder: String,
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    // 解决 props道具变异
-    const { modelValue } = toRefs(props)
-    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
-      value: modelValue.value,
-      currentNodeKey: '',
-      currentNodeLabel: '',
-    })
-    const treeSelect = ref<HTMLElement | null>(null)
-    const blur = ref<HTMLElement | null>()
-    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
-      select.currentNodeKey = data.id
-      select.currentNodeLabel = data.label || data.name
-      select.value = data.id
-      emit('update:modelValue', select.value);
-      //  关闭下拉框
-      (treeSelect.value as any).handleClose()
-      nextTick(() => {
-        (treeSelect.value as any).handleClose()
-      })
-    }
-    // 筛选方法
-    const treeV2: any = ref<HTMLElement | null>(null)
-    const selectFilter = (query: string) => {
-      treeV2.value.filter(query)
-    }
-    // ztree-v2 筛选方法
-    const treeFilter = (query: string, node: TreeNode) => {
-      return node.label?.indexOf(query) !== -1
-    }
-    // 直接清空选择数据
-    const clearSelected = () => {
-      select.currentNodeKey = ''
-      select.currentNodeLabel = ''
-      select.value = ''
-      emit('update:modelValue', undefined)
-    }
-    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
-    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
-    const setCurrent = () => {
-      select.currentNodeKey = select.value
-      treeV2.value.setCurrentKey(select.value)
-      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
-      select.currentNodeLabel = data?.label || data?.name
-    }
-    // 监听外部清空数据源 清空组件数据
-    watch(modelValue, (v) => {
-      if (v === undefined && select.currentNodeKey !== '') {
-        clearSelected()
-      }
-      // 动态赋值
-      if (v) {
-        select.value = v
-        setCurrent()
-      }
-    })
-    // 回显数据
-    onMounted(async () => {
-      await nextTick()
-      if (select.value) {
-        setCurrent()
-      }
-    })
-    return {
-      treeSelect,
-      treeV2,
-      TreeProps,
-      ...toRefs(select),
-      nodeClick,
-      selectFilter,
-      treeFilter,
-      clearSelected,
-    }
-  },
-})
-</script>
-
-<template>
-  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
-    <el-select
-      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
-      :filter-method="selectFilter" @clear="clearSelected"
-    >
-      <el-option :value="currentNodeKey" :label="currentNodeLabel">
-        <el-tree-v2
-          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
-          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
-          :filter-method="treeFilter" @node-click="nodeClick"
-        />
-      </el-option>
-    </el-select>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.tree_box {
-  width: 214px;
-}
-
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-
-ul li :deep(.el-tree .el-tree-node__content) {
-  height: auto;
-  padding: 0 20px;
-}
-
-.el-tree-node__label {
-  font-weight: normal;
-}
-
-.el-tree :deep(.is-current .el-tree-node__label) {
-  color: #409eff;
-  font-weight: 700;
-}
-
-.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
-  color: #606266;
-  font-weight: normal;
-}
-
-.selectInput {
-  padding: 0 5px;
-  box-sizing: border-box;
-}
-
-.el-select {
-  width: 100% !important;
-}
-</style>
-
diff --git a/src/views/system/user/user-interface.ts b/src/views/system/user/user-interface.ts
new file mode 100644
index 0000000..e27a855
--- /dev/null
+++ b/src/views/system/user/user-interface.ts
@@ -0,0 +1,66 @@
+export interface IlistQueryType {
+  keywords: string
+  beginTime: string
+  endTime: string
+  offset: number
+  limit: number
+  sort: string
+  deptId: string
+  deptType: string
+}
+// 树形结构
+export interface TreeStructure {
+  checked: boolean
+  children: TreeStructure[]
+  code: string
+  id: string
+  name: string
+  open: boolean
+  pCodes: string
+  pid: string
+  value: string
+
+}
+// 新增或添加
+export interface addInfo {
+  id: string // 编号
+  account: string // 账号
+  name: string // 姓名
+  email: string // 邮箱，
+  phone: string // 手机号，
+  deptId: string // 组织机构编号
+  roleid: string // 角色
+  password?: string // 密码
+  rePassword?: string // 重复密码
+  birthday?: string
+  sex?: string // 性别
+  roleName?: string
+}
+// 用户列表返回值类型
+export interface userType {
+  account: string
+  attr1: string
+  avatar: string
+  birthday: string
+  createtime: string
+  deptId: string
+  deptName: string
+  email: string
+  id: string
+  name: string
+  phone: string
+  roleId: string
+  roleName: string
+  sex: string
+  sexName: string
+  status: string
+  statusName: string
+  syncId: string
+  syncName: string
+  version: string
+
+}
+export interface changePageType {
+  page?: number
+  size?: number
+}
diff --git a/src/views/system/user/user.add.vue b/src/views/system/user/user.add.vue
deleted file mode 100644
index 2505000..0000000
--- a/src/views/system/user/user.add.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-<!-- 添加修改用户弹窗 -->
-<script lang="ts" setup name="SystemUserAddDialog">
-import type { FormInstance } from 'element-plus'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { addInfo } from './user_interface'
-import comTreeSelect from './select.tree.vue'
-import { toTreeList } from '@/utils/structure'
-import { addUser, updateUser } from '@/api/system/user'
-import { getRoleTreeList } from '@/api/system/role'
-import { getDeptTreeList } from '@/api/system/dept'
-import { getDictByCode } from '@/api/system/dict'
-import { RSAencrypt } from '@/utils/security'
-const emits = defineEmits(['resetData'])
-const ruleFormRef = ref<FormInstance>()
-const dialogFormVisible = ref<boolean>(false)// 对话框是否显示
-const dialogStatus = ref<string>('')// 对话框类型：create,update
-const userForm = reactive<addInfo>({
-  id: '', // 编号
-  account: '', // 账号
-  name: '', // 姓名
-  email: '', // 邮箱，/
-  phone: '', // 手机号，
-  deptId: '', // 组织机构编号
-  roleid: '', // 角色
-  password: '', // 密码
-  rePassword: '', // 重复密码
-  birthday: '',
-  sex: '', // 性别
-})// 表单
-const deptProps = reactive({
-  parent: 'pid', value: 'id', label: 'name', children: 'children',
-})
-const roleProps = reactive({
-  parent: 'pid', value: 'id', label: 'name', children: 'children',
-})
-const roleTreeList = ref([])// 角色树列表数据
-const deptTreeList = ref([])
-const sexList = ref<{ id: string; value: string; name: string }[]>()// 性别选项
-const textMap = reactive<{ update: string; create: string }>({
-  update: '编辑用户',
-  create: '新增用户',
-})// 表头显示标题
-const validatePass = (rule: any, value: any, callback: any) => {
-  if (value === '') {
-    callback(new Error('密码不能为空'))
-  }
-  else {
-    if (userForm.rePassword !== '') {
-      ruleFormRef.value?.validateField('rePassword')
-    }
-    callback()
-  }
-}
-const validatePass2 = (rule: any, value: any, callback: any) => {
-  if (value === '') {
-    callback(new Error('重复密码不能为空'))
-  }
-  else if (value !== userForm.password) {
-    callback(new Error('两次输入密码不一致!'))
-  }
-  else {
-    callback()
-  }
-}
-const rules = reactive({
-  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
-  name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
-  password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
-  rePassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '组织机构必选', trigger: ['blur', 'change'] }],
-  roleid: [{ required: true, message: '角色必选', trigger: ['blur', 'change'] }],
-  email: [{ required: false, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
-  phone: [{ required: false, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }],
-})// 前端校验规则
-const roleName = ref<string>()// 角色名，展示用
-const btnLoading = ref<boolean>(false)// 保存按钮的加载中状态
-
-// 加载角色树形下拉菜单
-const fetchRoleTree = () => {
-  getRoleTreeList().then((res) => {
-    if (res.data.list) { // 将列表转树结构
-      roleTreeList.value = toTreeList(res.data.list, '0', true)
-    }
-  })
-}
-// 加载组织机构树形下拉
-const fetchDeptTree = () => {
-  getDeptTreeList().then((res) => {
-    if (res.data) { // 将列表转树结构
-      deptTreeList.value = toTreeList(res.data, '0', true)
-    }
-  })
-}
-// 重置表单
-const resetForm1 = () => {
-  userForm.account = ''
-  userForm.id = ''
-  userForm.name = ''
-  userForm.email = ''
-  userForm.phone = ''
-  userForm.deptId = ''
-  userForm.sex = ''
-  userForm.birthday = ''
-  userForm.roleid = ''
-  userForm.password = ''
-  userForm.rePassword = ''
-}
-// 新增数据
-const createData = () => {
-  ruleFormRef.value?.validate(async (valid) => {
-    const userForm1 = JSON.parse(JSON.stringify(userForm))
-    userForm1.password = await RSAencrypt(userForm1.password)
-    userForm1.rePassword = await RSAencrypt(userForm1.rePassword)
-    if (valid) {
-      btnLoading.value = true
-      addUser(userForm1).then((response) => {
-        ElMessageBox.confirm('新增成功，是否继续新增?', '提示', {
-          confirmButtonText: '是',
-          cancelButtonText: '否',
-          type: 'info',
-        }).then(() => {
-          btnLoading.value = false
-          resetForm1()
-          nextTick(() => {
-            ruleFormRef.value?.clearValidate()
-          })
-        }).catch(() => {
-          dialogFormVisible.value = false
-          emits('resetData')
-        })
-      }).catch(() => { // 异常情况，loading置为false
-        btnLoading.value = false
-      })
-    }
-  })
-}
-// 修改数据
-const updateData = () => {
-  ruleFormRef.value?.validate((valid) => {
-    if (valid) {
-      btnLoading.value = true
-      updateUser(userForm).then((response) => {
-        ElMessage.success('修改成功')
-        dialogFormVisible.value = false
-        emits('resetData')
-      }).catch(() => { // 异常情况，loading置为false
-        btnLoading.value = false
-      })
-    }
-  })
-}
-
-// 保存数据
-const saveData = () => {
-  if (dialogStatus.value === 'update') {
-    updateData()
-  }
-  else if (dialogStatus.value === 'create') {
-    createData()
-  }
-}
-
-const cancel = () => {
-  dialogFormVisible.value = false
-  // resetForm1()
-  ruleFormRef.value?.resetFields()
-  emits('resetData')
-}
-// 初始化对话框
-const initDialog = (dialogStatusflag: string, row: addInfo = {
-  id: '', // 编号
-  account: '', // 账号
-  name: '', // 姓名
-  email: '', // 邮箱，
-  phone: '', // 手机号，
-  deptId: '', // 组织机构编号
-  roleid: '', // 角色
-  password: '', // 密码
-  rePassword: '', // 重复密码
-  birthday: '',
-  sex: '', // 性别
-}) => {
-  getDictByCode('sex').then((response) => {
-    sexList.value = response.data
-  })
-  fetchRoleTree()
-  fetchDeptTree()
-  dialogStatus.value = dialogStatusflag
-  dialogFormVisible.value = true
-  btnLoading.value = false
-  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
-    userForm.account = row.account
-    userForm.id = row.id
-    userForm.name = row.name
-    userForm.email = row.email
-    userForm.phone = row.phone
-    userForm.deptId = row.deptId
-    userForm.sex = row.sex
-    userForm.birthday = row.birthday
-    userForm.roleid = row.roleid
-    roleName.value = row.roleName
-    resetForm1()
-    nextTick(() => {
-      ruleFormRef.value?.clearValidate()
-    })
-  }
-  else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
-    userForm.account = row.account
-    userForm.id = row.id
-    userForm.name = row.name
-    userForm.email = row.email
-    userForm.phone = row.phone
-    userForm.deptId = row.deptId
-    userForm.sex = row.sex
-    userForm.birthday = row.birthday
-    userForm.roleid = row.roleid
-    roleName.value = row.roleName
-    delete userForm.password
-    delete userForm.rePassword
-  }
-}
-const title = computed(() => {
-  const props = Object.keys(textMap)
-  const keyValues = props.map((el: string) => {
-    return [el, el]
-  })
-  const keys: object = Object.fromEntries(keyValues)
-  return textMap[dialogStatus as keyof typeof keys]
-})
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" width="700" :title="title" append-to-body>
-    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="账号" prop="account">
-            <el-input
-              v-model.trim="userForm.account" :disabled="dialogStatus === 'update'" type="text"
-              placeholder="必填"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="姓名" prop="name">
-            <el-input v-model.trim="userForm.name" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="性别" prop="sex">
-            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '240px' }">
-              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="出生日期" prop="birthday">
-            <el-date-picker
-              v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期"
-              style="width: 100%;"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="dialogStatus === 'create'" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="密码" prop="password">
-            <el-input v-model.trim="userForm.password" type="password" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="重复密码" prop="rePassword">
-            <el-input v-model.trim="userForm.rePassword" type="password" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item v-if="dialogStatus === 'create'" label="角色" prop="roleid">
-            <com-tree-select
-              v-model="userForm.roleid" :options="roleTreeList" placeholder="选择角色"
-              :tree-props="roleProps"
-            />
-          </el-form-item>
-          <el-form-item v-else label="角色">
-            <el-input v-model="roleName" :disabled="dialogStatus === 'update'" type="text" placeholder="无" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="组织机构" prop="deptId">
-            <!-- <dept-select v-model="userForm.deptId" :dept-show="true" :default-expanded-keys="[userForm.roleid]"
-              placeholder="请选择组织机构" /> -->
-            <com-tree-select
-              v-model="userForm.deptId" :options="deptTreeList" placeholder="选择组织机构"
-              :tree-props="deptProps"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="邮箱" prop="email">
-            <el-input v-model.trim="userForm.email" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="电话" prop="phone">
-            <el-input v-model.trim="userForm.phone" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <div class="dialog-footer footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/userAdd.vue b/src/views/system/user/userAdd.vue
new file mode 100644
index 0000000..6d35832
--- /dev/null
+++ b/src/views/system/user/userAdd.vue
@@ -0,0 +1,332 @@
+<!-- 添加修改用户弹窗 -->
+<script lang="ts" setup name="SystemUserAddDialog">
+import type { FormInstance } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { addInfo } from './user-interface'
+import comTreeSelect from './selecTree.vue'
+import { toTreeList } from '@/utils/structure'
+import { addUser, updateUser } from '@/api/system/user'
+import { getRoleTreeList } from '@/api/system/role'
+import { getDeptTreeList } from '@/api/system/dept'
+import { getDictByCode } from '@/api/system/dict'
+import { RSAencrypt } from '@/utils/security'
+const emits = defineEmits(['resetData'])
+const ruleFormRef = ref<FormInstance>()
+const dialogFormVisible = ref<boolean>(false)// 对话框是否显示
+const dialogStatus = ref<string>('')// 对话框类型：create,update
+const userForm = reactive<addInfo>({
+  id: '', // 编号
+  account: '', // 账号
+  name: '', // 姓名
+  email: '', // 邮箱，/
+  phone: '', // 手机号，
+  deptId: '', // 组织机构编号
+  roleid: '', // 角色
+  password: '', // 密码
+  rePassword: '', // 重复密码
+  birthday: '',
+  sex: '', // 性别
+})// 表单
+const deptProps = reactive({
+  parent: 'pid', value: 'id', label: 'name', children: 'children',
+})
+const roleProps = reactive({
+  parent: 'pid', value: 'id', label: 'name', children: 'children',
+})
+const roleTreeList = ref([])// 角色树列表数据
+const deptTreeList = ref([])
+const sexList = ref<{ id: string; value: string; name: string }[]>()// 性别选项
+const textMap = reactive<{ update: string; create: string }>({
+  update: '编辑用户',
+  create: '新增用户',
+})// 表头显示标题
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('密码不能为空'))
+  }
+  else {
+    if (userForm.rePassword !== '') {
+      ruleFormRef.value?.validateField('rePassword')
+    }
+    callback()
+  }
+}
+const validatePass2 = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('重复密码不能为空'))
+  }
+  else if (value !== userForm.password) {
+    callback(new Error('两次输入密码不一致!'))
+  }
+  else {
+    callback()
+  }
+}
+const rules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+  name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
+  password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
+  rePassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '组织机构必选', trigger: ['blur', 'change'] }],
+  roleid: [{ required: true, message: '角色必选', trigger: ['blur', 'change'] }],
+  email: [{ required: false, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
+  phone: [{ required: false, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }],
+})// 前端校验规则
+const roleName = ref<string>()// 角色名，展示用
+const btnLoading = ref<boolean>(false)// 保存按钮的加载中状态
+
+// 加载角色树形下拉菜单
+const fetchRoleTree = () => {
+  getRoleTreeList().then((res) => {
+    if (res.data.list) { // 将列表转树结构
+      roleTreeList.value = toTreeList(res.data.list, '0', true)
+    }
+  })
+}
+// 加载组织机构树形下拉
+const fetchDeptTree = () => {
+  getDeptTreeList().then((res) => {
+    if (res.data) { // 将列表转树结构
+      deptTreeList.value = toTreeList(res.data, '0', true)
+    }
+  })
+}
+// 重置表单
+const resetForm1 = () => {
+  userForm.account = ''
+  userForm.id = ''
+  userForm.name = ''
+  userForm.email = ''
+  userForm.phone = ''
+  userForm.deptId = ''
+  userForm.sex = ''
+  userForm.birthday = ''
+  userForm.roleid = ''
+  userForm.password = ''
+  userForm.rePassword = ''
+}
+// 新增数据
+const createData = () => {
+  ruleFormRef.value?.validate(async (valid) => {
+    const userForm1 = JSON.parse(JSON.stringify(userForm))
+    userForm1.password = await RSAencrypt(userForm1.password)
+    userForm1.rePassword = await RSAencrypt(userForm1.rePassword)
+    if (valid) {
+      btnLoading.value = true
+      addUser(userForm1).then((response) => {
+        ElMessageBox.confirm('新增成功，是否继续新增?', '提示', {
+          confirmButtonText: '是',
+          cancelButtonText: '否',
+          type: 'info',
+        }).then(() => {
+          btnLoading.value = false
+          resetForm1()
+          nextTick(() => {
+            ruleFormRef.value?.clearValidate()
+          })
+        }).catch(() => {
+          dialogFormVisible.value = false
+          emits('resetData')
+        })
+      }).catch(() => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+// 修改数据
+const updateData = () => {
+  ruleFormRef.value?.validate((valid) => {
+    if (valid) {
+      btnLoading.value = true
+      updateUser(userForm).then((response) => {
+        ElMessage.success('修改成功')
+        dialogFormVisible.value = false
+        emits('resetData')
+      }).catch(() => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'update') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+
+const cancel = () => {
+  dialogFormVisible.value = false
+  // resetForm1()
+  ruleFormRef.value?.resetFields()
+  emits('resetData')
+}
+// 初始化对话框
+const initDialog = (dialogStatusflag: string, row: addInfo = {
+  id: '', // 编号
+  account: '', // 账号
+  name: '', // 姓名
+  email: '', // 邮箱，
+  phone: '', // 手机号，
+  deptId: '', // 组织机构编号
+  roleid: '', // 角色
+  password: '', // 密码
+  rePassword: '', // 重复密码
+  birthday: '',
+  sex: '', // 性别
+}) => {
+  getDictByCode('sex').then((response) => {
+    sexList.value = response.data
+  })
+  fetchRoleTree()
+  fetchDeptTree()
+  dialogStatus.value = dialogStatusflag
+  dialogFormVisible.value = true
+  btnLoading.value = false
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    userForm.account = row.account
+    userForm.id = row.id
+    userForm.name = row.name
+    userForm.email = row.email
+    userForm.phone = row.phone
+    userForm.deptId = row.deptId
+    userForm.sex = row.sex
+    userForm.birthday = row.birthday
+    userForm.roleid = row.roleid
+    roleName.value = row.roleName
+    resetForm1()
+    nextTick(() => {
+      ruleFormRef.value?.clearValidate()
+    })
+  }
+  else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
+    userForm.account = row.account
+    userForm.id = row.id
+    userForm.name = row.name
+    userForm.email = row.email
+    userForm.phone = row.phone
+    userForm.deptId = row.deptId
+    userForm.sex = row.sex
+    userForm.birthday = row.birthday
+    userForm.roleid = row.roleid
+    roleName.value = row.roleName
+    delete userForm.password
+    delete userForm.rePassword
+  }
+}
+const title = computed(() => {
+  const props = Object.keys(textMap)
+  const keyValues = props.map((el: string) => {
+    return [el, el]
+  })
+  const keys: object = Object.fromEntries(keyValues)
+  return textMap[dialogStatus as keyof typeof keys]
+})
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" width="700" :title="title" append-to-body>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input
+              v-model.trim="userForm.account" :disabled="dialogStatus === 'update'" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model.trim="userForm.name" type="text" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="sex">
+            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '240px' }">
+              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生日期" prop="birthday">
+            <el-date-picker
+              v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期"
+              style="width: 100%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row v-show="dialogStatus === 'create'" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input v-model.trim="userForm.password" type="password" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重复密码" prop="rePassword">
+            <el-input v-model.trim="userForm.rePassword" type="password" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item v-if="dialogStatus === 'create'" label="角色" prop="roleid">
+            <com-tree-select
+              v-model="userForm.roleid" :options="roleTreeList" placeholder="选择角色"
+              :tree-props="roleProps"
+            />
+          </el-form-item>
+          <el-form-item v-else label="角色">
+            <el-input v-model="roleName" :disabled="dialogStatus === 'update'" type="text" placeholder="无" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="组织机构" prop="deptId">
+            <!-- <dept-select v-model="userForm.deptId" :dept-show="true" :default-expanded-keys="[userForm.roleid]"
+              placeholder="请选择组织机构" /> -->
+            <com-tree-select
+              v-model="userForm.deptId" :options="deptTreeList" placeholder="选择组织机构"
+              :tree-props="deptProps"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model.trim="userForm.email" type="text" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电话" prop="phone">
+            <el-input v-model.trim="userForm.phone" type="text" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button :loading="btnLoading" type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js
index 1de9011..26c2d38 100644
--- a/plop-templates/page/prompt.js
+++ b/plop-templates/page/prompt.js
@@ -42,7 +42,7 @@
     const actions = [
       {
         type: 'add',
-        path: `${data.path}/{{dotCase name}}.vue`,
+        path: `${data.path}/{{camelCase name}}.vue`,
         templateFile: 'plop-templates/page/index.hbs',
         data: {
           componentName: `${relativePath} ${data.name}`,
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 79a85dc..3b53223 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -3,6 +3,10 @@
     "primary": (
       "base": #4384ff
     )
+  ),
+  $table:(
+    "header-bg-color":#f2f6ff,
+    "header-text-color":#444c59
   )
 );
 @use "element-plus/theme-chalk/src/index.scss" as *;
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index a7b0974..4565a0f 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -58,10 +58,10 @@
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
+  left: var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width);
   right: 0;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  // transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
 [data-mode="mobile"] {
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 94d28ef..1271d43 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -17,7 +17,7 @@
       {
         path: 'list',
         name: 'AreaList',
-        component: () => import('@/views/system/area/list.area.vue'),
+        component: () => import('@/views/system/area/listArea.vue'),
         meta: {
           title: '区域管理',
           auth: '/sys/area',
@@ -113,7 +113,7 @@
       {
         path: 'list',
         name: 'UserList',
-        component: () => import('@/views/system/user/list.user.vue'),
+        component: () => import('@/views/system/user/listUser.vue'),
         meta: {
           title: '用户管理',
           auth: '/sys/mgr',
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index c41731e..7de3b8b 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -1,4 +1,4 @@
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 
 const useDictStore = defineStore(
   'dict',
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 43e73d7..190617e 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AreaSelectTree">
 import { defineExpose, reactive, ref } from 'vue'
-import type { IlistQuerySelectTree } from './area_interface'
+import type { IlistQuerySelectTree } from './area-interface'
 import { getAreaTree } from '@/api/system/area'
 
 const emits = defineEmits(['selectDone'])
diff --git a/src/views/system/area/area_interface.ts b/src/views/system/area/area_interface.ts
deleted file mode 100644
index 627a360..0000000
--- a/src/views/system/area/area_interface.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
-
-export interface IareaForm {
-  id: string // 编号
-  pid: string // 父级编号
-  pName: string // 父级名称
-  areaName: string // 区域名
-  simpleName: string // 别名，
-  level: string
-  num: number // 排序
-}
-
-export interface IlistQuerySelectTree {
-  pid: string
-}
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
index b300494..9b893de 100644
--- a/src/views/system/area/editArea.vue
+++ b/src/views/system/area/editArea.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup name="EditArea">
 import type { Ref } from 'vue'
-import { computed, defineExpose, nextTick, reactive, ref } from 'vue'
+import { defineExpose, nextTick, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AreaSelectTree from './areaSelectTree.vue'
-import type { IareaForm } from './area_interface'
-import { toTreeList } from '@/utils/structure'
+import type { IareaForm } from './area-interface'
 import { addArea, getAreaType, updateArea } from '@/api/system/area'
 const emits = defineEmits(['watchChild'])
 const dataFormRef = ref()
@@ -226,7 +225,7 @@
       </div>
     </template>
 
-    <AreaSelectTree ref="areaSelect" @selectDone="changeParent" />
+    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/area/list.area.vue b/src/views/system/area/list.area.vue
deleted file mode 100644
index 16a8cc8..0000000
--- a/src/views/system/area/list.area.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts" setup name="ListArea">
-import { computed, onActivated, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQuery } from './area_interface'
-import EditArea from './editArea.vue'
-import { delArea, getAreaListPage } from '@/api/system/area'
-const { proxy } = getCurrentInstance() as any
-const editarea = ref()
-const listQuery: IlistQuery = reactive({
-  keywords: '',
-  offset: 1,
-  limit: 20,
-  sort: '',
-  order: '',
-}) // 筛选条件
-const columns: any = [
-  {
-    text: '区域名称',
-    value: 'areaName',
-    align: 'center',
-  },
-  {
-    text: '区域编码',
-    value: 'id',
-    align: 'center',
-  },
-  {
-    text: '区域等级',
-    value: 'levelName',
-    align: 'center',
-  },
-  {
-    text: '所属区域',
-    value: 'pName',
-    align: 'center',
-  },
-  {
-    text: '区域排序',
-    value: 'num',
-    width: 80,
-    align: 'center',
-  },
-]// 显示列
-const list = ref([]) // 列表数据
-const total = ref(0)// 数据总数
-const listLoading = ref(true)// 加载动画
-const fullscreenLoading = ref(false) // 全屏加载动画
-const dialogFormVisible = ref(false) // 是否显示编辑框
-
-// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
-const showOperate = computed(() => {
-  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
-})
-
-// 获取区域数据
-const fetchData = (isNowPage: boolean) => {
-  listLoading.value = true
-  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
-    listQuery.offset = 1
-  }
-  getAreaListPage(listQuery).then((response) => {
-    if (response.code === 200) {
-      list.value = response.data.rows
-      total.value = parseInt(response.data.total)
-      listLoading.value = false
-    }
-  })
-}
-
-fetchData(true)// 获取数据
-
-onActivated(() => {
-  fetchData(true)// 获取数据
-})
-
-// 打开详情对话框
-const detail = (row: any) => {
-  // detailwell.initDialog(true, row)
-}
-
-// 新增区域
-const add = () => {
-  dialogFormVisible.value = true
-  editarea.value.initDialog('create')
-}
-
-// 编辑区域信息
-const edit = (row: any) => {
-  dialogFormVisible.value = true
-  // editShow = true
-  editarea.value.initDialog('update', row)
-}
-// 删除区域
-const del = (row: any) => {
-  ElMessageBox.confirm(
-    '确定要删除区域吗？',
-    '确认操作',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delArea(row.id).then((response) => {
-      if (response.code === 200) {
-        ElMessage({
-          message: '删除成功',
-          type: 'success',
-        })
-        fetchData(true)
-      }
-    })
-  })
-}
-
-// 查询数据
-const search = () => {
-  fetchData(false)
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: any) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData(true)
-}
-</script>
-
-<template>
-  <app-container>
-    <!-- 筛选条件 -->
-    <search-area @search="search">
-      <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
-      </search-item>
-    </search-area>
-    <!-- 查询结果Table显示 -->
-    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
-      <template #btns>
-        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
-          新增
-        </el-button>
-      </template>
-      <template #columns>
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-          <template #default="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
-          <template #default="scope">
-            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
-              修改
-            </el-button>
-            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
-    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..7b4c159
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup name="ListArea">
+import { computed, onActivated, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { IlistQuery } from './area-interface'
+import EditArea from './editArea.vue'
+import { delArea, getAreaListPage } from '@/api/system/area'
+const { proxy } = getCurrentInstance() as any
+const editarea = ref()
+const listQuery: IlistQuery = reactive({
+  keywords: '',
+  offset: 1,
+  limit: 20,
+  sort: '',
+  order: '',
+}) // 筛选条件
+const columns: any = [
+  {
+    text: '区域名称',
+    value: 'areaName',
+    align: 'center',
+  },
+  {
+    text: '区域编码',
+    value: 'id',
+    align: 'center',
+  },
+  {
+    text: '区域等级',
+    value: 'levelName',
+    align: 'center',
+  },
+  {
+    text: '所属区域',
+    value: 'pName',
+    align: 'center',
+  },
+  {
+    text: '区域排序',
+    value: 'num',
+    width: 80,
+    align: 'center',
+  },
+]// 显示列
+const list = ref([]) // 列表数据
+const total = ref(0)// 数据总数
+const listLoading = ref(true)// 加载动画
+const fullscreenLoading = ref(false) // 全屏加载动画
+const dialogFormVisible = ref(false) // 是否显示编辑框
+
+// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+const showOperate = computed(() => {
+  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/delete')
+})
+
+// 获取区域数据
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+    listQuery.offset = 1
+  }
+  getAreaListPage(listQuery).then((response) => {
+    if (response.code === 200) {
+      list.value = response.data.rows
+      total.value = parseInt(response.data.total)
+      listLoading.value = false
+    }
+  })
+}
+
+fetchData(true)// 获取数据
+
+onActivated(() => {
+  fetchData(true)// 获取数据
+})
+
+// 打开详情对话框
+const detail = (row: any) => {
+  // detailwell.initDialog(true, row)
+}
+
+// 新增区域
+const add = () => {
+  dialogFormVisible.value = true
+  editarea.value.initDialog('create')
+}
+
+// 编辑区域信息
+const edit = (row: any) => {
+  dialogFormVisible.value = true
+  // editShow = true
+  editarea.value.initDialog('update', row)
+}
+// 删除区域
+const del = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除区域吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delArea(row.id).then((response) => {
+      if (response.code === 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        fetchData(true)
+      }
+    })
+  })
+}
+
+// 查询数据
+const search = () => {
+  fetchData(false)
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: any) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData(true)
+}
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
+      <template #btns>
+        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          新增
+        </el-button>
+      </template>
+      <template #columns>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index 07382e9..1dc8d94 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -111,8 +111,6 @@
           展开/折叠
         </el-button>
       </template>
-    </table-container>
-    <div>
       <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
         <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
         <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
@@ -126,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </table-container>
     <system-edit-dept ref="editDialog" @close-refresh="search" />
   </app-container>
 </template>
diff --git a/src/views/system/log/list.log.vue b/src/views/system/log/list.log.vue
index 8c035ca..5accccb 100644
--- a/src/views/system/log/list.log.vue
+++ b/src/views/system/log/list.log.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delLog,
   getBizLogDetail,
diff --git a/src/views/system/log/listErrorLog.vue b/src/views/system/log/listErrorLog.vue
index ce05c27..4b7c501 100644
--- a/src/views/system/log/listErrorLog.vue
+++ b/src/views/system/log/listErrorLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import {
   delErrorLog,
   getErrorLogDetail,
diff --git a/src/views/system/log/log-interface.ts b/src/views/system/log/log-interface.ts
new file mode 100644
index 0000000..09be72c
--- /dev/null
+++ b/src/views/system/log/log-interface.ts
@@ -0,0 +1,10 @@
+export interface IlistQuery {
+  keywords: string
+  beginTime: string
+  endTime: string
+  logType?: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
diff --git a/src/views/system/log/log_interface.ts b/src/views/system/log/log_interface.ts
deleted file mode 100644
index 09be72c..0000000
--- a/src/views/system/log/log_interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface IlistQuery {
-  keywords: string
-  beginTime: string
-  endTime: string
-  logType?: string
-  offset: number
-  limit: number
-  sort: string
-  order: string
-}
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 904f51c..429e18c 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import type { IlistQuery } from './log_interface'
+import type { IlistQuery } from './log-interface'
 import { delLoginLog, getLoginLogList } from '@/api/system/log'
 
 const { proxy } = getCurrentInstance() as any
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
deleted file mode 100644
index b4b8abb..0000000
--- a/src/views/system/user/list.user.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts" setup name="SystemDictListDict">
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
-import type { IlistQueryType, TreeStructure, changePageType, userType } from './user_interface'
-import AddUser from './user.add.vue'
-import RoleAssignment from './role.assignment.vue'
-import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
-import { toTreeList } from '@/utils/structure'
-import { RSAencrypt } from '@/utils/security'
-// 逻辑代码
-interface Tree {
-  name: string
-  children?: Tree[]
-  id: string
-}
-const select = ref()
-const { proxy } = getCurrentInstance() as any
-const tagNames = { 已冻结: 'danger', 启用: 'success' }
-const btnNames = { 已冻结: '解冻', 启用: '冻结' }
-const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = ref([
-  { text: '账号', value: 'account', align: 'center' },
-  { text: '所在组织机构', value: 'deptName', align: 'center' },
-  { text: '真实姓名', value: 'name', align: 'center' },
-  { text: '角色', value: 'roleName', align: 'center' },
-  { text: '手机号', value: 'phone', align: 'center' },
-  { text: '注册时间', value: 'createtime', align: 'center' },
-])
-
-const list = ref([])
-const total = ref(0)
-const loadingTable = ref<boolean>(false)
-const loadingTree = ref<boolean>(false)
-const resetPwdFlag = ref<string>('111111')
-const logTypeList = ref(null)
-const listLoading = ref(true)
-const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
-// 查询参数
-const listQuery: IlistQueryType = reactive({
-  keywords: '',
-  beginTime: '',
-  endTime: '',
-  deptId: '',
-  offset: 1,
-  limit: 20,
-  sort: 'id',
-  deptType: '',
-})
-const treeData = ref<TreeStructure[]>([])
-// 获取列表数据
-const fetchData = (flag: string) => {
-  loadingTable.value = true
-  select.value = ''
-  getUserList(listQuery).then((res) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loadingTable.value = false
-  }).catch(() => {
-    loadingTable.value = false
-  })
-}
-// 点击树形结构
-const handleNodeClick = (data: Tree) => {
-  listQuery.deptId = data.id as string
-  fetchData('click')
-}
-
-// 获取组织列表树数据
-const fetchTreeData = () => {
-  loadingTree.value = true
-  getDeptTreeList(listQuery).then((res) => {
-    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
-    loadingTree.value = false
-  }).catch(() => {
-    loadingTree.value = false
-  })
-}
-// 查询数据
-const search = () => {
-  fetchData('search')
-}
-const addUserRef = ref()
-// 新增用户
-const add = () => {
-  addUserRef.value.initDialog('create')
-}
-// 编辑用户
-const edit = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    addUserRef.value.initDialog('update', user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 重置密码
-const resetPwd = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
-      '确认重置密码',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(async () => {
-      const params = {
-        id: String(user.id),
-        newPwd: await RSAencrypt(resetPwdFlag.value),
-      }
-      resetPwdApi(params).then(() => {
-        ElMessage.success('操作成功')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 删除用户
-const deleteUser = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    ElMessageBox.confirm(
-      `确定要删除${user.name}吗？`,
-      'Warning',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    ).then(() => {
-      delUser({ id: user.id }).then(() => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }).catch(() => { })
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 冻结/解冻用户
-const frozenUser = (row: userType) => {
-  ElMessageBox.confirm(
-    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
-    'Warning',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    if ((btnNames as any)[row.statusName] === '冻结') {
-      // 发送请求
-      freezeUserApi({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-    else {
-      unfreezeUser({ id: row.id }).then((res) => {
-        ElMessage.success('操作成功')
-        fetchData('')
-      })
-    }
-  }).catch(() => { })
-}
-const roleAssignmentRef = ref() // 角色分配弹窗
-// 角色分配
-const assignmentRole = () => {
-  if (select.value) {
-    const user: userType = list.value[select.value - 1]
-    roleAssignmentRef.value.initDialog(user)
-  }
-  else {
-    ElMessage.error('必须选中一项')
-  }
-}
-// 改变每页条数
-const handleSizeChange = (val: number) => {
-  listQuery.limit = val
-  fetchData('')
-}
-// 改变当前页数
-const handleCurrentChange = (val: number) => {
-  listQuery.offset = val
-  fetchData('')
-}
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-const changePage = (val: changePageType) => {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData('')
-}
-// 重置页面
-const resetData = () => {
-  fetchData('')
-}
-// 挂载
-onMounted(() => {
-  // 获取树形结构数据
-  fetchTreeData()
-  // 获取列表数据
-  fetchData('click')
-})
-</script>
-
-<template>
-  <!-- 布局 -->
-  <app-container>
-    <div class="container">
-      <!-- 左侧组织机构 -->
-      <div class="left-container">
-        <div class="dept-div">
-          <el-card class="box-card" shadow="always">
-            <template #header>
-              <div class="clearfix">
-                <span>组织机构</span>
-              </div>
-            </template>
-            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick" />
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧表格 -->
-      <div ref="tableContainer" class="table">
-        <!-- 筛选条件 -->
-        <search-area @search="search">
-          <search-item>
-            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间" />
-          </search-item>
-          <search-item>
-            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间" />
-          </search-item>
-        </search-area>
-        <!-- 操作 -->
-        <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
-            新增
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
-            修改
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
-            删除
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
-            重置密码
-          </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
-            @click="assignmentRole">
-            角色分配
-          </el-button>
-        </div>
-        <!-- 表头标题 -->
-        <!-- <div class="table-title">
-          <div class="title">
-            <el-icon :size="24">
-              <Menu />
-            </el-icon>
-            <span class="text">数据列表</span>
-          </div>
-        </div> -->
-        <!-- 查询结果Table显示 -->
-        <normal-table :data="list" :total="total" :columns="columns as any" :query="listQuery"
-          :list-loading="loadingTable" @change="changePage">
-          <template #preColumns>
-            <el-table-column label="选择" width="55" align="center">
-              <template #default="scope">
-                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-              </template>
-            </el-table-column>
-            <el-table-column label="#" width="55" align="center">
-              <template #default="scope">
-                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-              </template>
-            </el-table-column>
-          </template>
-          <template #columns>
-            <el-table-column label="状态" align="center" width="80">
-              <template #default="scope">
-                <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                  {{ scope.row.statusName }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                  {{ (btnNames as any)[scope.row.statusName] }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </normal-table>
-      </div>
-    </div>
-    <!-- 角色分配 -->
-    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
-    <!-- 添加或修改用户 -->
-    <AddUser ref="addUserRef" @reset-data="resetData" />
-  </app-container>
-</template>
-
-<style lang="scss" scoped>
-// 样式
-.container {
-  width: 100%;
-  display: flex;
-
-  .left-container {
-    width: 22%;
-  }
-
-  :deep(.el-radio__label) {
-    display: none;
-  }
-
-  .table-title {
-    background-color: #409eff;
-
-    .title {
-      padding: 5px 10px;
-      // background-color: ;
-      font-size: 15px;
-      line-height: 46px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .table {
-    width: 78%;
-
-    .pagination {
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.dept-div {
-  padding-right: 12px;
-
-  :deep(.el-card) {
-    height: 100vh;
-    background-color: #fff;
-  }
-
-  .box-card {
-    width: 100%;
-
-    .user-dept-scroll {
-      width: 100%;
-      height: calc(100vh - 265px);
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
new file mode 100644
index 0000000..8f86f10
--- /dev/null
+++ b/src/views/system/user/listUser.vue
@@ -0,0 +1,393 @@
+<script lang="ts" setup name="SystemDictListDict">
+import { ElButton, ElCard, ElDatePicker, ElInput, ElMessage, ElMessageBox, ElRadio, ElTableColumn, ElTag, ElTree } from 'element-plus'
+import { Delete, EditPen, Key, MagicStick, Plus } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
+import type { IlistQueryType, TreeStructure, changePageType, userType } from './user-interface'
+import AddUser from './userAdd.vue'
+import RoleAssignment from './roleAssignment.vue'
+import { getDeptTreeList } from '@/api/system/dept'
+import { delUser, freezeUserApi, getUserList, resetPwdApi, unfreezeUser } from '@/api/system/user'
+import { toTreeList } from '@/utils/structure'
+import { RSAencrypt } from '@/utils/security'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+// 逻辑代码
+interface Tree {
+  name: string
+  children?: Tree[]
+  id: string
+}
+const select = ref()
+const { proxy } = getCurrentInstance() as any
+const tagNames = { 已冻结: 'danger', 启用: 'success' }
+const btnNames = { 已冻结: '解冻', 启用: '冻结' }
+const btnStatus = { 已冻结: '', 启用: 'primary' }
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+]
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref<boolean>(false)
+const loadingTree = ref<boolean>(false)
+const resetPwdFlag = ref<string>('111111')
+const logTypeList = ref(null)
+const listLoading = ref(true)
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+}
+// 查询参数
+const listQuery: IlistQueryType = reactive({
+  keywords: '',
+  beginTime: '',
+  endTime: '',
+  deptId: '',
+  offset: 1,
+  limit: 20,
+  sort: 'id',
+  deptType: '',
+})
+const treeData = ref<TreeStructure[]>([])
+// 获取列表数据
+const fetchData = (flag: string) => {
+  loadingTable.value = true
+  select.value = ''
+  getUserList(listQuery).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 点击树形结构
+const handleNodeClick = (data: Tree) => {
+  listQuery.deptId = data.id as string
+  fetchData('click')
+}
+
+// 获取组织列表树数据
+const fetchTreeData = () => {
+  loadingTree.value = true
+  getDeptTreeList(listQuery).then((res) => {
+    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
+    loadingTree.value = false
+  }).catch(() => {
+    loadingTree.value = false
+  })
+}
+// 查询数据
+const search = () => {
+  fetchData('search')
+}
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value),
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 删除用户
+const deleteUser = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要删除${user.name}吗？`,
+      'Warning',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(() => {
+      delUser({ id: user.id }).then(() => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }).catch(() => { })
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 冻结/解冻用户
+const frozenUser = (row: userType) => {
+  ElMessageBox.confirm(
+    `确定要${(btnNames as any)[row.statusName]}${row.name}吗？`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    if ((btnNames as any)[row.statusName] === '冻结') {
+      // 发送请求
+      freezeUserApi({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+    else {
+      unfreezeUser({ id: row.id }).then((res) => {
+        ElMessage.success('操作成功')
+        fetchData('')
+      })
+    }
+  }).catch(() => { })
+}
+const roleAssignmentRef = ref() // 角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  }
+  else {
+    ElMessage.error('必须选中一项')
+  }
+}
+// 改变每页条数
+const handleSizeChange = (val: number) => {
+  listQuery.limit = val
+  fetchData('')
+}
+// 改变当前页数
+const handleCurrentChange = (val: number) => {
+  listQuery.offset = val
+  fetchData('')
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
+// 挂载
+onMounted(() => {
+  // 获取树形结构数据
+  fetchTreeData()
+  // 获取列表数据
+  fetchData('click')
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container>
+    <div class="container">
+      <!-- 左侧组织机构 -->
+      <div class="left-container">
+        <div class="dept-div">
+          <el-card class="box-card" shadow="always">
+            <template #header>
+              <div class="clearfix">
+                <span>组织机构</span>
+              </div>
+            </template>
+            <el-tree
+              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick"
+            />
+          </el-card>
+        </div>
+      </div>
+      <!-- 右侧表格 -->
+      <div ref="tableContainer" class="table">
+        <!-- 筛选条件 -->
+        <search-area @search="search">
+          <search-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />
+          </search-item>
+          <search-item>
+            <el-date-picker
+              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间"
+            />
+          </search-item>
+        </search-area>
+        <!-- 表头标题 -->
+        <table-container>
+          <template #btns-left>
+            <!-- 操作 -->
+            <div style="margin-bottom: 10px;">
+              <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
+                新增
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
+                删除
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
+                重置密码
+              </el-button>
+              <el-button
+                v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+                @click="assignmentRole"
+              >
+                角色分配
+              </el-button>
+            </div>
+          </template>
+          <!-- 查询结果Table显示 -->
+          <normal-table
+            :data="list" :total="total" :columns="columns" :query="listQuery"
+            :list-loading="loadingTable" @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="选择" width="55" align="center">
+                <template #default="scope">
+                  <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+                </template>
+              </el-table-column>
+              <el-table-column label="#" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+            <template #columns>
+              <el-table-column label="状态" align="center" width="80">
+                <template #default="scope">
+                  <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                    {{ scope.row.statusName }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80">
+                <template #default="scope">
+                  <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                    {{ (btnNames as any)[scope.row.statusName] }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+    <!-- 角色分配 -->
+    <role-assignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <add-user ref="addUserRef" @reset-data="resetData" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  width: 100%;
+  display: flex;
+
+  .left-container {
+    width: 22%;
+  }
+
+  :deep(.el-radio__label) {
+    display: none;
+  }
+
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .table {
+    width: 78%;
+
+    .pagination {
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+.dept-div {
+  padding-right: 12px;
+
+  :deep(.el-card) {
+    height: 100vh;
+    background-color: #fff;
+  }
+
+  .box-card {
+    width: 100%;
+
+    .user-dept-scroll {
+      width: 100%;
+      height: calc(100vh - 265px);
+    }
+  }
+}
+</style>
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
deleted file mode 100644
index 52b9073..0000000
--- a/src/views/system/user/role.assignment.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- 角色分配弹窗 -->
-<script lang="ts" setup name="roleAssigmentDialog">
-import { ElMessage } from 'element-plus'
-import type { userType } from './user_interface'
-import { getShowItem, toTreeList } from '@/utils/structure'
-import { getRoleTreeListByUser } from '@/api/system/role'
-import { roleAssign } from '@/api/system/user'
-const props = defineProps({
-  titleText: {
-    type: String,
-    default: '分配角色',
-  },
-})
-const emits = defineEmits(['resetData'])
-const dialogFormVisible = ref<boolean>(false)
-const loading = ref<boolean>(false) // 加载动态效果
-const roleTreeList = ref([])// 角色树列表数据
-const defaultProps = ref({
-  label: 'name',
-  children: 'children',
-})
-const userId = ref('')// 用户id
-const userName = ref('') // 用户名称
-const ids = ref([]) // 选中项id
-const defaultExpanded = ref<string[]>([]) // 默认展开的项
-const defaultChecked = ref<string[]>([]) // 默认选中的树
-const defaultExpandAll = ref<boolean>(true)// 是否展开树
-const handleCheckChange = () => {
-
-}
-const treeRef = ref()
-// 获取角色列表
-const fetchRoleTree = () => {
-  getRoleTreeListByUser(userId.value).then((response) => {
-    if (response.data) {
-      roleTreeList.value = toTreeList(response.data)
-      // 获取展开项和选中项
-      const expArr: string[] = []
-      const cheArr: string[] = []
-      response.data.forEach((element: any) => {
-        if (element.open && element.checked) {
-          expArr.push(element.id)
-          cheArr.push(element.id)
-        }
-        else if (element.open) {
-          expArr.push(element.id)
-        }
-        else if (element.checked) {
-          cheArr.push(element.id)
-        }
-      })
-      defaultExpanded.value = expArr
-      defaultChecked.value = cheArr
-      treeRef.value?.setCheckedNodes(defaultChecked.value)
-      loading.value = false
-    }
-  })
-}
-// 弹窗初始化
-const initDialog = (row: userType) => {
-  loading.value = true
-  userId.value = row.id
-  userName.value = row.name
-  dialogFormVisible.value = true
-  fetchRoleTree()
-}
-
-defineExpose({ initDialog })
-const saveData = () => {
-  ids.value = treeRef.value.getCheckedKeys()
-  roleAssign(userId.value, ids.value).then((response) => {
-    if (response.code === 200) {
-      ElMessage.success('角色分配成功')
-      dialogFormVisible.value = false
-      emits('resetData')
-    }
-  })
-}
-const cancel = () => {
-  dialogFormVisible.value = false
-  userId.value = ''
-  userName.value = ''
-  defaultExpanded.value = []
-  defaultChecked.value = []
-  treeRef.value?.setCheckedNodes([])
-  emits('resetData')
-}
-</script>
-
-<template>
-  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
-    <el-scrollbar>
-      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
-        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
-        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
-        @check-change="handleCheckChange" />
-    </el-scrollbar>
-    <div class="dialog-footer footer">
-      <el-button type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/roleAssignment.vue b/src/views/system/user/roleAssignment.vue
new file mode 100644
index 0000000..4b09678
--- /dev/null
+++ b/src/views/system/user/roleAssignment.vue
@@ -0,0 +1,116 @@
+<!-- 角色分配弹窗 -->
+<script lang="ts" setup name="roleAssigmentDialog">
+import { ElMessage } from 'element-plus'
+import type { userType } from './user-interface'
+import { getShowItem, toTreeList } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  },
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children',
+})
+const userId = ref('')// 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+const treeRef = ref()
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      // 获取展开项和选中项
+      const expArr: string[] = []
+      const cheArr: string[] = []
+      response.data.forEach((element: any) => {
+        if (element.open && element.checked) {
+          expArr.push(element.id)
+          cheArr.push(element.id)
+        }
+        else if (element.open) {
+          expArr.push(element.id)
+        }
+        else if (element.checked) {
+          cheArr.push(element.id)
+        }
+      })
+      defaultExpanded.value = expArr
+      defaultChecked.value = cheArr
+      treeRef.value?.setCheckedNodes(defaultChecked.value)
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then((response) => {
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  userId.value = ''
+  userName.value = ''
+  defaultExpanded.value = []
+  defaultChecked.value = []
+  treeRef.value?.setCheckedNodes([])
+  emits('resetData')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange"
+      />
+    </el-scrollbar>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/selecTree.vue b/src/views/system/user/selecTree.vue
new file mode 100644
index 0000000..efbac4a
--- /dev/null
+++ b/src/views/system/user/selecTree.vue
@@ -0,0 +1,182 @@
+<!-- 树状选择器 -->
+<script lang="ts">
+import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import type { PropType } from 'vue'
+import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+const TreeProps: PropsIter = {
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true,
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px',
+    },
+    // 空占位字符
+    placeholder: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: '',
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const blur = ref<HTMLElement | null>()
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label || data.name
+      select.value = data.id
+      emit('update:modelValue', select.value);
+      //  关闭下拉框
+      (treeSelect.value as any).handleClose()
+      nextTick(() => {
+        (treeSelect.value as any).handleClose()
+      })
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select
+      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected"
+    >
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2
+          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
+          :filter-method="treeFilter" @node-click="nodeClick"
+        />
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+
diff --git a/src/views/system/user/select.tree.vue b/src/views/system/user/select.tree.vue
deleted file mode 100644
index efbac4a..0000000
--- a/src/views/system/user/select.tree.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<!-- 树状选择器 -->
-<script lang="ts">
-import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
-import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
-import type { PropType } from 'vue'
-import { defineComponent, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
-interface PropsIter {
-  value: string
-  label: string
-  children: string
-  disabled?: boolean
-}
-const TreeProps: PropsIter = {
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-interface TreeIter {
-  id: string
-  label: string
-  children?: TreeIter[]
-}
-export default defineComponent({
-  props: {
-    // 组件绑定的options
-    options: {
-      type: Array as PropType<TreeIter[]>,
-      required: true,
-    },
-    // 配置选项
-    keyProps: Object as PropType<PropsIter>,
-    // 双向绑定值
-    modelValue: [String, Number],
-    // 组件样式宽
-    width: {
-      type: String,
-      default: '240px',
-    },
-    // 空占位字符
-    placeholder: String,
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    // 解决 props道具变异
-    const { modelValue } = toRefs(props)
-    const select: { value: string | number | undefined; currentNodeLabel: string | number | undefined; currentNodeKey: string | number | undefined } = reactive({
-      value: modelValue.value,
-      currentNodeKey: '',
-      currentNodeLabel: '',
-    })
-    const treeSelect = ref<HTMLElement | null>(null)
-    const blur = ref<HTMLElement | null>()
-    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
-      select.currentNodeKey = data.id
-      select.currentNodeLabel = data.label || data.name
-      select.value = data.id
-      emit('update:modelValue', select.value);
-      //  关闭下拉框
-      (treeSelect.value as any).handleClose()
-      nextTick(() => {
-        (treeSelect.value as any).handleClose()
-      })
-    }
-    // 筛选方法
-    const treeV2: any = ref<HTMLElement | null>(null)
-    const selectFilter = (query: string) => {
-      treeV2.value.filter(query)
-    }
-    // ztree-v2 筛选方法
-    const treeFilter = (query: string, node: TreeNode) => {
-      return node.label?.indexOf(query) !== -1
-    }
-    // 直接清空选择数据
-    const clearSelected = () => {
-      select.currentNodeKey = ''
-      select.currentNodeLabel = ''
-      select.value = ''
-      emit('update:modelValue', undefined)
-    }
-    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
-    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
-    const setCurrent = () => {
-      select.currentNodeKey = select.value
-      treeV2.value.setCurrentKey(select.value)
-      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
-      select.currentNodeLabel = data?.label || data?.name
-    }
-    // 监听外部清空数据源 清空组件数据
-    watch(modelValue, (v) => {
-      if (v === undefined && select.currentNodeKey !== '') {
-        clearSelected()
-      }
-      // 动态赋值
-      if (v) {
-        select.value = v
-        setCurrent()
-      }
-    })
-    // 回显数据
-    onMounted(async () => {
-      await nextTick()
-      if (select.value) {
-        setCurrent()
-      }
-    })
-    return {
-      treeSelect,
-      treeV2,
-      TreeProps,
-      ...toRefs(select),
-      nodeClick,
-      selectFilter,
-      treeFilter,
-      clearSelected,
-    }
-  },
-})
-</script>
-
-<template>
-  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
-    <el-select
-      ref="treeSelect" v-model="value" clearable filterable :placeholder="placeholder || '请选择'"
-      :filter-method="selectFilter" @clear="clearSelected"
-    >
-      <el-option :value="currentNodeKey" :label="currentNodeLabel">
-        <el-tree-v2
-          id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
-          :current-node-key="currentNodeKey" default-expand-all :expand-on-click-node="false"
-          :filter-method="treeFilter" @node-click="nodeClick"
-        />
-      </el-option>
-    </el-select>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.tree_box {
-  width: 214px;
-}
-
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-
-ul li :deep(.el-tree .el-tree-node__content) {
-  height: auto;
-  padding: 0 20px;
-}
-
-.el-tree-node__label {
-  font-weight: normal;
-}
-
-.el-tree :deep(.is-current .el-tree-node__label) {
-  color: #409eff;
-  font-weight: 700;
-}
-
-.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
-  color: #606266;
-  font-weight: normal;
-}
-
-.selectInput {
-  padding: 0 5px;
-  box-sizing: border-box;
-}
-
-.el-select {
-  width: 100% !important;
-}
-</style>
-
diff --git a/src/views/system/user/user-interface.ts b/src/views/system/user/user-interface.ts
new file mode 100644
index 0000000..e27a855
--- /dev/null
+++ b/src/views/system/user/user-interface.ts
@@ -0,0 +1,66 @@
+export interface IlistQueryType {
+  keywords: string
+  beginTime: string
+  endTime: string
+  offset: number
+  limit: number
+  sort: string
+  deptId: string
+  deptType: string
+}
+// 树形结构
+export interface TreeStructure {
+  checked: boolean
+  children: TreeStructure[]
+  code: string
+  id: string
+  name: string
+  open: boolean
+  pCodes: string
+  pid: string
+  value: string
+
+}
+// 新增或添加
+export interface addInfo {
+  id: string // 编号
+  account: string // 账号
+  name: string // 姓名
+  email: string // 邮箱，
+  phone: string // 手机号，
+  deptId: string // 组织机构编号
+  roleid: string // 角色
+  password?: string // 密码
+  rePassword?: string // 重复密码
+  birthday?: string
+  sex?: string // 性别
+  roleName?: string
+}
+// 用户列表返回值类型
+export interface userType {
+  account: string
+  attr1: string
+  avatar: string
+  birthday: string
+  createtime: string
+  deptId: string
+  deptName: string
+  email: string
+  id: string
+  name: string
+  phone: string
+  roleId: string
+  roleName: string
+  sex: string
+  sexName: string
+  status: string
+  statusName: string
+  syncId: string
+  syncName: string
+  version: string
+
+}
+export interface changePageType {
+  page?: number
+  size?: number
+}
diff --git a/src/views/system/user/user.add.vue b/src/views/system/user/user.add.vue
deleted file mode 100644
index 2505000..0000000
--- a/src/views/system/user/user.add.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-<!-- 添加修改用户弹窗 -->
-<script lang="ts" setup name="SystemUserAddDialog">
-import type { FormInstance } from 'element-plus'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { addInfo } from './user_interface'
-import comTreeSelect from './select.tree.vue'
-import { toTreeList } from '@/utils/structure'
-import { addUser, updateUser } from '@/api/system/user'
-import { getRoleTreeList } from '@/api/system/role'
-import { getDeptTreeList } from '@/api/system/dept'
-import { getDictByCode } from '@/api/system/dict'
-import { RSAencrypt } from '@/utils/security'
-const emits = defineEmits(['resetData'])
-const ruleFormRef = ref<FormInstance>()
-const dialogFormVisible = ref<boolean>(false)// 对话框是否显示
-const dialogStatus = ref<string>('')// 对话框类型：create,update
-const userForm = reactive<addInfo>({
-  id: '', // 编号
-  account: '', // 账号
-  name: '', // 姓名
-  email: '', // 邮箱，/
-  phone: '', // 手机号，
-  deptId: '', // 组织机构编号
-  roleid: '', // 角色
-  password: '', // 密码
-  rePassword: '', // 重复密码
-  birthday: '',
-  sex: '', // 性别
-})// 表单
-const deptProps = reactive({
-  parent: 'pid', value: 'id', label: 'name', children: 'children',
-})
-const roleProps = reactive({
-  parent: 'pid', value: 'id', label: 'name', children: 'children',
-})
-const roleTreeList = ref([])// 角色树列表数据
-const deptTreeList = ref([])
-const sexList = ref<{ id: string; value: string; name: string }[]>()// 性别选项
-const textMap = reactive<{ update: string; create: string }>({
-  update: '编辑用户',
-  create: '新增用户',
-})// 表头显示标题
-const validatePass = (rule: any, value: any, callback: any) => {
-  if (value === '') {
-    callback(new Error('密码不能为空'))
-  }
-  else {
-    if (userForm.rePassword !== '') {
-      ruleFormRef.value?.validateField('rePassword')
-    }
-    callback()
-  }
-}
-const validatePass2 = (rule: any, value: any, callback: any) => {
-  if (value === '') {
-    callback(new Error('重复密码不能为空'))
-  }
-  else if (value !== userForm.password) {
-    callback(new Error('两次输入密码不一致!'))
-  }
-  else {
-    callback()
-  }
-}
-const rules = reactive({
-  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
-  name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
-  password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
-  rePassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '组织机构必选', trigger: ['blur', 'change'] }],
-  roleid: [{ required: true, message: '角色必选', trigger: ['blur', 'change'] }],
-  email: [{ required: false, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
-  phone: [{ required: false, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }],
-})// 前端校验规则
-const roleName = ref<string>()// 角色名，展示用
-const btnLoading = ref<boolean>(false)// 保存按钮的加载中状态
-
-// 加载角色树形下拉菜单
-const fetchRoleTree = () => {
-  getRoleTreeList().then((res) => {
-    if (res.data.list) { // 将列表转树结构
-      roleTreeList.value = toTreeList(res.data.list, '0', true)
-    }
-  })
-}
-// 加载组织机构树形下拉
-const fetchDeptTree = () => {
-  getDeptTreeList().then((res) => {
-    if (res.data) { // 将列表转树结构
-      deptTreeList.value = toTreeList(res.data, '0', true)
-    }
-  })
-}
-// 重置表单
-const resetForm1 = () => {
-  userForm.account = ''
-  userForm.id = ''
-  userForm.name = ''
-  userForm.email = ''
-  userForm.phone = ''
-  userForm.deptId = ''
-  userForm.sex = ''
-  userForm.birthday = ''
-  userForm.roleid = ''
-  userForm.password = ''
-  userForm.rePassword = ''
-}
-// 新增数据
-const createData = () => {
-  ruleFormRef.value?.validate(async (valid) => {
-    const userForm1 = JSON.parse(JSON.stringify(userForm))
-    userForm1.password = await RSAencrypt(userForm1.password)
-    userForm1.rePassword = await RSAencrypt(userForm1.rePassword)
-    if (valid) {
-      btnLoading.value = true
-      addUser(userForm1).then((response) => {
-        ElMessageBox.confirm('新增成功，是否继续新增?', '提示', {
-          confirmButtonText: '是',
-          cancelButtonText: '否',
-          type: 'info',
-        }).then(() => {
-          btnLoading.value = false
-          resetForm1()
-          nextTick(() => {
-            ruleFormRef.value?.clearValidate()
-          })
-        }).catch(() => {
-          dialogFormVisible.value = false
-          emits('resetData')
-        })
-      }).catch(() => { // 异常情况，loading置为false
-        btnLoading.value = false
-      })
-    }
-  })
-}
-// 修改数据
-const updateData = () => {
-  ruleFormRef.value?.validate((valid) => {
-    if (valid) {
-      btnLoading.value = true
-      updateUser(userForm).then((response) => {
-        ElMessage.success('修改成功')
-        dialogFormVisible.value = false
-        emits('resetData')
-      }).catch(() => { // 异常情况，loading置为false
-        btnLoading.value = false
-      })
-    }
-  })
-}
-
-// 保存数据
-const saveData = () => {
-  if (dialogStatus.value === 'update') {
-    updateData()
-  }
-  else if (dialogStatus.value === 'create') {
-    createData()
-  }
-}
-
-const cancel = () => {
-  dialogFormVisible.value = false
-  // resetForm1()
-  ruleFormRef.value?.resetFields()
-  emits('resetData')
-}
-// 初始化对话框
-const initDialog = (dialogStatusflag: string, row: addInfo = {
-  id: '', // 编号
-  account: '', // 账号
-  name: '', // 姓名
-  email: '', // 邮箱，
-  phone: '', // 手机号，
-  deptId: '', // 组织机构编号
-  roleid: '', // 角色
-  password: '', // 密码
-  rePassword: '', // 重复密码
-  birthday: '',
-  sex: '', // 性别
-}) => {
-  getDictByCode('sex').then((response) => {
-    sexList.value = response.data
-  })
-  fetchRoleTree()
-  fetchDeptTree()
-  dialogStatus.value = dialogStatusflag
-  dialogFormVisible.value = true
-  btnLoading.value = false
-  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
-    userForm.account = row.account
-    userForm.id = row.id
-    userForm.name = row.name
-    userForm.email = row.email
-    userForm.phone = row.phone
-    userForm.deptId = row.deptId
-    userForm.sex = row.sex
-    userForm.birthday = row.birthday
-    userForm.roleid = row.roleid
-    roleName.value = row.roleName
-    resetForm1()
-    nextTick(() => {
-      ruleFormRef.value?.clearValidate()
-    })
-  }
-  else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
-    userForm.account = row.account
-    userForm.id = row.id
-    userForm.name = row.name
-    userForm.email = row.email
-    userForm.phone = row.phone
-    userForm.deptId = row.deptId
-    userForm.sex = row.sex
-    userForm.birthday = row.birthday
-    userForm.roleid = row.roleid
-    roleName.value = row.roleName
-    delete userForm.password
-    delete userForm.rePassword
-  }
-}
-const title = computed(() => {
-  const props = Object.keys(textMap)
-  const keyValues = props.map((el: string) => {
-    return [el, el]
-  })
-  const keys: object = Object.fromEntries(keyValues)
-  return textMap[dialogStatus as keyof typeof keys]
-})
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" width="700" :title="title" append-to-body>
-    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="账号" prop="account">
-            <el-input
-              v-model.trim="userForm.account" :disabled="dialogStatus === 'update'" type="text"
-              placeholder="必填"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="姓名" prop="name">
-            <el-input v-model.trim="userForm.name" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="性别" prop="sex">
-            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '240px' }">
-              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="出生日期" prop="birthday">
-            <el-date-picker
-              v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期"
-              style="width: 100%;"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-show="dialogStatus === 'create'" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="密码" prop="password">
-            <el-input v-model.trim="userForm.password" type="password" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="重复密码" prop="rePassword">
-            <el-input v-model.trim="userForm.rePassword" type="password" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item v-if="dialogStatus === 'create'" label="角色" prop="roleid">
-            <com-tree-select
-              v-model="userForm.roleid" :options="roleTreeList" placeholder="选择角色"
-              :tree-props="roleProps"
-            />
-          </el-form-item>
-          <el-form-item v-else label="角色">
-            <el-input v-model="roleName" :disabled="dialogStatus === 'update'" type="text" placeholder="无" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="组织机构" prop="deptId">
-            <!-- <dept-select v-model="userForm.deptId" :dept-show="true" :default-expanded-keys="[userForm.roleid]"
-              placeholder="请选择组织机构" /> -->
-            <com-tree-select
-              v-model="userForm.deptId" :options="deptTreeList" placeholder="选择组织机构"
-              :tree-props="deptProps"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="邮箱" prop="email">
-            <el-input v-model.trim="userForm.email" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="电话" prop="phone">
-            <el-input v-model.trim="userForm.phone" type="text" placeholder="必填" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <div class="dialog-footer footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">
-        保存
-      </el-button>
-      <el-button @click="cancel">
-        取消
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/src/views/system/user/userAdd.vue b/src/views/system/user/userAdd.vue
new file mode 100644
index 0000000..6d35832
--- /dev/null
+++ b/src/views/system/user/userAdd.vue
@@ -0,0 +1,332 @@
+<!-- 添加修改用户弹窗 -->
+<script lang="ts" setup name="SystemUserAddDialog">
+import type { FormInstance } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { addInfo } from './user-interface'
+import comTreeSelect from './selecTree.vue'
+import { toTreeList } from '@/utils/structure'
+import { addUser, updateUser } from '@/api/system/user'
+import { getRoleTreeList } from '@/api/system/role'
+import { getDeptTreeList } from '@/api/system/dept'
+import { getDictByCode } from '@/api/system/dict'
+import { RSAencrypt } from '@/utils/security'
+const emits = defineEmits(['resetData'])
+const ruleFormRef = ref<FormInstance>()
+const dialogFormVisible = ref<boolean>(false)// 对话框是否显示
+const dialogStatus = ref<string>('')// 对话框类型：create,update
+const userForm = reactive<addInfo>({
+  id: '', // 编号
+  account: '', // 账号
+  name: '', // 姓名
+  email: '', // 邮箱，/
+  phone: '', // 手机号，
+  deptId: '', // 组织机构编号
+  roleid: '', // 角色
+  password: '', // 密码
+  rePassword: '', // 重复密码
+  birthday: '',
+  sex: '', // 性别
+})// 表单
+const deptProps = reactive({
+  parent: 'pid', value: 'id', label: 'name', children: 'children',
+})
+const roleProps = reactive({
+  parent: 'pid', value: 'id', label: 'name', children: 'children',
+})
+const roleTreeList = ref([])// 角色树列表数据
+const deptTreeList = ref([])
+const sexList = ref<{ id: string; value: string; name: string }[]>()// 性别选项
+const textMap = reactive<{ update: string; create: string }>({
+  update: '编辑用户',
+  create: '新增用户',
+})// 表头显示标题
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('密码不能为空'))
+  }
+  else {
+    if (userForm.rePassword !== '') {
+      ruleFormRef.value?.validateField('rePassword')
+    }
+    callback()
+  }
+}
+const validatePass2 = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('重复密码不能为空'))
+  }
+  else if (value !== userForm.password) {
+    callback(new Error('两次输入密码不一致!'))
+  }
+  else {
+    callback()
+  }
+}
+const rules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+  name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
+  password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
+  rePassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '组织机构必选', trigger: ['blur', 'change'] }],
+  roleid: [{ required: true, message: '角色必选', trigger: ['blur', 'change'] }],
+  email: [{ required: false, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
+  phone: [{ required: false, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }],
+})// 前端校验规则
+const roleName = ref<string>()// 角色名，展示用
+const btnLoading = ref<boolean>(false)// 保存按钮的加载中状态
+
+// 加载角色树形下拉菜单
+const fetchRoleTree = () => {
+  getRoleTreeList().then((res) => {
+    if (res.data.list) { // 将列表转树结构
+      roleTreeList.value = toTreeList(res.data.list, '0', true)
+    }
+  })
+}
+// 加载组织机构树形下拉
+const fetchDeptTree = () => {
+  getDeptTreeList().then((res) => {
+    if (res.data) { // 将列表转树结构
+      deptTreeList.value = toTreeList(res.data, '0', true)
+    }
+  })
+}
+// 重置表单
+const resetForm1 = () => {
+  userForm.account = ''
+  userForm.id = ''
+  userForm.name = ''
+  userForm.email = ''
+  userForm.phone = ''
+  userForm.deptId = ''
+  userForm.sex = ''
+  userForm.birthday = ''
+  userForm.roleid = ''
+  userForm.password = ''
+  userForm.rePassword = ''
+}
+// 新增数据
+const createData = () => {
+  ruleFormRef.value?.validate(async (valid) => {
+    const userForm1 = JSON.parse(JSON.stringify(userForm))
+    userForm1.password = await RSAencrypt(userForm1.password)
+    userForm1.rePassword = await RSAencrypt(userForm1.rePassword)
+    if (valid) {
+      btnLoading.value = true
+      addUser(userForm1).then((response) => {
+        ElMessageBox.confirm('新增成功，是否继续新增?', '提示', {
+          confirmButtonText: '是',
+          cancelButtonText: '否',
+          type: 'info',
+        }).then(() => {
+          btnLoading.value = false
+          resetForm1()
+          nextTick(() => {
+            ruleFormRef.value?.clearValidate()
+          })
+        }).catch(() => {
+          dialogFormVisible.value = false
+          emits('resetData')
+        })
+      }).catch(() => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+// 修改数据
+const updateData = () => {
+  ruleFormRef.value?.validate((valid) => {
+    if (valid) {
+      btnLoading.value = true
+      updateUser(userForm).then((response) => {
+        ElMessage.success('修改成功')
+        dialogFormVisible.value = false
+        emits('resetData')
+      }).catch(() => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'update') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+
+const cancel = () => {
+  dialogFormVisible.value = false
+  // resetForm1()
+  ruleFormRef.value?.resetFields()
+  emits('resetData')
+}
+// 初始化对话框
+const initDialog = (dialogStatusflag: string, row: addInfo = {
+  id: '', // 编号
+  account: '', // 账号
+  name: '', // 姓名
+  email: '', // 邮箱，
+  phone: '', // 手机号，
+  deptId: '', // 组织机构编号
+  roleid: '', // 角色
+  password: '', // 密码
+  rePassword: '', // 重复密码
+  birthday: '',
+  sex: '', // 性别
+}) => {
+  getDictByCode('sex').then((response) => {
+    sexList.value = response.data
+  })
+  fetchRoleTree()
+  fetchDeptTree()
+  dialogStatus.value = dialogStatusflag
+  dialogFormVisible.value = true
+  btnLoading.value = false
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    userForm.account = row.account
+    userForm.id = row.id
+    userForm.name = row.name
+    userForm.email = row.email
+    userForm.phone = row.phone
+    userForm.deptId = row.deptId
+    userForm.sex = row.sex
+    userForm.birthday = row.birthday
+    userForm.roleid = row.roleid
+    roleName.value = row.roleName
+    resetForm1()
+    nextTick(() => {
+      ruleFormRef.value?.clearValidate()
+    })
+  }
+  else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
+    userForm.account = row.account
+    userForm.id = row.id
+    userForm.name = row.name
+    userForm.email = row.email
+    userForm.phone = row.phone
+    userForm.deptId = row.deptId
+    userForm.sex = row.sex
+    userForm.birthday = row.birthday
+    userForm.roleid = row.roleid
+    roleName.value = row.roleName
+    delete userForm.password
+    delete userForm.rePassword
+  }
+}
+const title = computed(() => {
+  const props = Object.keys(textMap)
+  const keyValues = props.map((el: string) => {
+    return [el, el]
+  })
+  const keys: object = Object.fromEntries(keyValues)
+  return textMap[dialogStatus as keyof typeof keys]
+})
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" width="700" :title="title" append-to-body>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="账号" prop="account">
+            <el-input
+              v-model.trim="userForm.account" :disabled="dialogStatus === 'update'" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model.trim="userForm.name" type="text" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="性别" prop="sex">
+            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '240px' }">
+              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生日期" prop="birthday">
+            <el-date-picker
+              v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期"
+              style="width: 100%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row v-show="dialogStatus === 'create'" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input v-model.trim="userForm.password" type="password" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重复密码" prop="rePassword">
+            <el-input v-model.trim="userForm.rePassword" type="password" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item v-if="dialogStatus === 'create'" label="角色" prop="roleid">
+            <com-tree-select
+              v-model="userForm.roleid" :options="roleTreeList" placeholder="选择角色"
+              :tree-props="roleProps"
+            />
+          </el-form-item>
+          <el-form-item v-else label="角色">
+            <el-input v-model="roleName" :disabled="dialogStatus === 'update'" type="text" placeholder="无" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="组织机构" prop="deptId">
+            <!-- <dept-select v-model="userForm.deptId" :dept-show="true" :default-expanded-keys="[userForm.roleid]"
+              placeholder="请选择组织机构" /> -->
+            <com-tree-select
+              v-model="userForm.deptId" :options="deptTreeList" placeholder="选择组织机构"
+              :tree-props="deptProps"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model.trim="userForm.email" type="text" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电话" prop="phone">
+            <el-input v-model.trim="userForm.phone" type="text" placeholder="必填" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button :loading="btnLoading" type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/user_interface.ts b/src/views/system/user/user_interface.ts
deleted file mode 100644
index e27a855..0000000
--- a/src/views/system/user/user_interface.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-export interface IlistQueryType {
-  keywords: string
-  beginTime: string
-  endTime: string
-  offset: number
-  limit: number
-  sort: string
-  deptId: string
-  deptType: string
-}
-// 树形结构
-export interface TreeStructure {
-  checked: boolean
-  children: TreeStructure[]
-  code: string
-  id: string
-  name: string
-  open: boolean
-  pCodes: string
-  pid: string
-  value: string
-
-}
-// 新增或添加
-export interface addInfo {
-  id: string // 编号
-  account: string // 账号
-  name: string // 姓名
-  email: string // 邮箱，
-  phone: string // 手机号，
-  deptId: string // 组织机构编号
-  roleid: string // 角色
-  password?: string // 密码
-  rePassword?: string // 重复密码
-  birthday?: string
-  sex?: string // 性别
-  roleName?: string
-}
-// 用户列表返回值类型
-export interface userType {
-  account: string
-  attr1: string
-  avatar: string
-  birthday: string
-  createtime: string
-  deptId: string
-  deptName: string
-  email: string
-  id: string
-  name: string
-  phone: string
-  roleId: string
-  roleName: string
-  sex: string
-  sexName: string
-  status: string
-  statusName: string
-  syncId: string
-  syncName: string
-  version: string
-
-}
-export interface changePageType {
-  page?: number
-  size?: number
-}