diff --git a/.gitignore b/.gitignore
index a547bf36d8d11a4f89c59c144f24795749086dd1..4587401d84ec04ebadd7f015aa823c60e08f636c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,7 +13,7 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
+# .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000000000000000000000000000000000000..d6c413a8cce6a453536eb843f080c839657ec2b4
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // 使用 IntelliSense 了解相关属性。
+  // 悬停以查看现有属性的描述。
+  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..05d2234985740046624bcc3887d611fc4439d55d
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,28 @@
+//团队格式化规范 airbnb-base + eslint + prettier + volar
+{
+  "editor.formatOnSave": true,
+  "eslint.validate": ["javascript", "html", "vue"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //true：普通函数名后面加空格
+  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false //true：匿名函数后面加空格
+}
diff --git a/package.json b/package.json
index 5f55ede297d15c263c535f74865fd279f9f5eda9..de335bfc3379caf6140c8f239288daec726d2a5d 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,9 @@
     "@element-plus/icons": "^0.0.11",
     "@element-plus/icons-vue": "^2.0.6",
     "axios": "^0.27.2",
+    "echarts": "5.3.2",
     "element-plus": "^2.1.11",
+    "js-md5": "^0.7.3",
     "pinia": "^2.0.13",
     "pinia-plugin-persist": "^1.0.0",
     "quick-vue3-ui": "1.0.5",
@@ -27,6 +29,7 @@
     "vue-router": "4"
   },
   "devDependencies": {
+    "@types/js-md5": "^0.4.3",
     "@types/node": "^17.0.30",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 68587b74d2a554491feb0626f776a949c59b25a1..72ba0baeded511c70531b0921c67d94a4bbb7a66 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,11 +3,13 @@ lockfileVersion: 5.3
 specifiers:
   '@element-plus/icons': ^0.0.11
   '@element-plus/icons-vue': ^2.0.6
+  '@types/js-md5': ^0.4.3
   '@types/node': ^17.0.30
   '@typescript-eslint/eslint-plugin': ^5.22.0
   '@typescript-eslint/parser': ^5.22.0
   '@vitejs/plugin-vue': ^2.3.1
   axios: ^0.27.2
+  echarts: 5.3.2
   element-plus: ^2.1.11
   eslint: ^8.14.0
   eslint-config-airbnb-base: ^15.0.0
@@ -16,6 +18,7 @@ specifiers:
   eslint-plugin-prettier: ^4.0.0
   eslint-plugin-vue: ^8.7.1
   husky: ^7.0.4
+  js-md5: ^0.7.3
   pinia: ^2.0.13
   pinia-plugin-persist: ^1.0.0
   prettier: 2.6.2
@@ -35,7 +38,9 @@ dependencies:
   '@element-plus/icons': 0.0.11
   '@element-plus/icons-vue': 2.0.6_vue@3.2.36
   axios: registry.npmmirror.com/axios/0.27.2
+  echarts: 5.3.2
   element-plus: registry.npmmirror.com/element-plus/2.2.2_vue@3.2.36
+  js-md5: 0.7.3
   pinia: registry.npmmirror.com/pinia/2.0.14_typescript@4.7.2+vue@3.2.36
   pinia-plugin-persist: registry.npmmirror.com/pinia-plugin-persist/1.0.0_pinia@2.0.14+vue@3.2.36
   quick-vue3-ui: 1.0.5
@@ -44,6 +49,7 @@ dependencies:
   vue-router: registry.npmmirror.com/vue-router/4.0.15_vue@3.2.36
 
 devDependencies:
+  '@types/js-md5': 0.4.3
   '@types/node': registry.npmmirror.com/@types/node/17.0.35
   '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.26.0_3e687f93547efbf7d61b629ca4d69a5c
   '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.26.0_eslint@8.16.0+typescript@4.7.2
@@ -162,6 +168,10 @@ packages:
     resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
     dev: false
 
+  /@types/js-md5/0.4.3:
+    resolution: {integrity: sha512-BIga/WEqTi35ccnGysOuO4RmwVnpajv9oDB/sDQSY2b7/Ac7RyYR30bv7otZwByMvOJV9Vqq6/O1DFAnOzE4Pg==}
+    dev: true
+
   /@vue/compiler-core/3.2.36:
     resolution: {integrity: sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==}
     dependencies:
@@ -404,6 +414,13 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /echarts/5.3.2:
+    resolution: {integrity: sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.3.1
+    dev: false
+
   /ejs/3.1.8:
     resolution: {integrity: sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==}
     engines: {node: '>=0.10.0'}
@@ -716,6 +733,10 @@ packages:
       minimatch: 3.1.2
     dev: true
 
+  /js-md5/0.7.3:
+    resolution: {integrity: sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==}
+    dev: false
+
   /jsonfile/6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -903,6 +924,10 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
+  /tslib/2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
@@ -981,6 +1006,12 @@ packages:
     resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
     dev: true
 
+  /zrender/5.3.1:
+    resolution: {integrity: sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
+
   registry.npmmirror.com/@algolia/autocomplete-core/1.6.3:
     resolution: {integrity: sha512-dqQqRt01fX3YuVFrkceHsoCnzX0bLhrrg8itJI1NM68KjrPYQPYsE+kY8EZTCM4y8VDnhqJErR73xe/ZsV+qAA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@algolia/autocomplete-core/-/autocomplete-core-1.6.3.tgz}
     name: '@algolia/autocomplete-core'
diff --git a/src/api/dictionary.ts b/src/api/dictionary.ts
new file mode 100644
index 0000000000000000000000000000000000000000..efdd2d3dbbc8279cc9be96bf9ebcc2514237a1c1
--- /dev/null
+++ b/src/api/dictionary.ts
@@ -0,0 +1,43 @@
+import { Dictionary } from '../types/dictionary'
+import request, { QuickResponseData } from '../utils/request'
+
+const Api = {
+  list: '/api/dictionary/getList',
+  add: '/api/dictionary/add',
+  update: '/api/dictionary/update',
+  remove: '/api/dictionary/remove',
+}
+export const getDictionaryList = (
+  dicTypeId: string
+): Promise<QuickResponseData<Array<Dictionary>>> => {
+  return request<QuickResponseData<Array<Dictionary>>>({
+    url: Api.list,
+    method: 'GET',
+    params: {
+      dicTypeId,
+    },
+  })
+}
+export const addDictionary = (data: Dictionary) => {
+  return request({
+    url: Api.add,
+    method: 'POST',
+    data,
+  })
+}
+export const updateDictionary = (data: Dictionary) => {
+  return request({
+    url: Api.update,
+    method: 'POST',
+    data,
+  })
+}
+export const removeDictionary = (id: string) => {
+  return request({
+    url: Api.remove,
+    method: 'POST',
+    params: {
+      id,
+    },
+  })
+}
diff --git a/src/api/dictionaryType.ts b/src/api/dictionaryType.ts
new file mode 100644
index 0000000000000000000000000000000000000000..388e1baaa69a242f9ba433423f979237b52b0c30
--- /dev/null
+++ b/src/api/dictionaryType.ts
@@ -0,0 +1,41 @@
+import { DictionaryType } from '../types/dictionaryType'
+import request, { QuickResponseData } from '../utils/request'
+
+const Api = {
+  list: '/api/dictionaryType/getList',
+  add: '/api/dictionaryType/add',
+  update: '/api/dictionaryType/update',
+  remove: '/api/dictionaryType/remove',
+}
+export const getDictionaryTypeList = (): Promise<
+  QuickResponseData<Array<DictionaryType>>
+> => {
+  return request<QuickResponseData<Array<DictionaryType>>>({
+    url: Api.list,
+    method: 'GET',
+  })
+}
+
+export const addDictionaryType = (data: DictionaryType) => {
+  return request({
+    url: Api.add,
+    method: 'POST',
+    data,
+  })
+}
+export const updateDictionaryType = (data: DictionaryType) => {
+  return request({
+    url: Api.update,
+    method: 'POST',
+    data,
+  })
+}
+export const removeDictionaryType = (id: string) => {
+  return request({
+    url: Api.remove,
+    method: 'POST',
+    params: {
+      id,
+    },
+  })
+}
diff --git a/src/api/login.ts b/src/api/login.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc7803376ddacaf38d421f637a8ee0497082590d
--- /dev/null
+++ b/src/api/login.ts
@@ -0,0 +1,39 @@
+import { Login, User } from '../types/user'
+import request, { QuickResponseData } from '../utils/request'
+
+const Api = {
+  login: '/api/login',
+  loginOut: '/api/loginOut',
+  getUserInfo: '/api/getUserInfo',
+  changePassword: '/api/changePassword',
+}
+export const userLogin = (data: Login): Promise<QuickResponseData<User>> => {
+  return request<QuickResponseData<User>>({
+    url: Api.login,
+    method: 'POST',
+    data,
+  })
+}
+export const userLoginOut = (data: Login) => {
+  return request({
+    url: Api.loginOut,
+    method: 'POST',
+    data,
+  })
+}
+export const getUserInfo = (userName: string) => {
+  return request({
+    url: Api.getUserInfo,
+    method: 'GET',
+    params: {
+      userName,
+    },
+  })
+}
+export const changePassword = (data: Login) => {
+  return request({
+    url: Api.changePassword,
+    method: 'POST',
+    data,
+  })
+}
diff --git a/src/api/user.ts b/src/api/user.ts
index 545c22952a98243a98eac108d5eea10e7dcb3e66..842193f6ba83be8faa8bf397fb15126b6c02d98a 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,17 +1,19 @@
 import { User } from '../types/user'
-import request from '../utils/request'
+import request, { QuickResponseData } from '../utils/request'
 
 const Api = {
   pageList: '/api/user/getPageList',
   list: '/api/user/getList',
+  info: '/api/user/getInfo',
   add: '/api/user/add',
   update: '/api/user/update',
   remove: '/api/user/remove',
 }
-export const getUserPageList = (params: object) => {
-  return request({
+export const getUserPageList = (
+  params: object
+): Promise<QuickResponseData<Array<User>>> => {
+  return request<QuickResponseData<Array<User>>>({
     url: Api.pageList,
-    // url:'https://console-mock.apipost.cn/app/mock/project/1cee3669-4ecb-431e-a7b7-67c5298e06ab/api/user/getUserList',
     method: 'GET',
     params,
   })
@@ -19,10 +21,20 @@ export const getUserPageList = (params: object) => {
 export const getUserList = () => {
   return request({
     url: Api.list,
-    // url:'https://console-mock.apipost.cn/app/mock/project/1cee3669-4ecb-431e-a7b7-67c5298e06ab/api/user/getUserList',
     method: 'GET',
   })
 }
+export const getUserInfo = (
+  userName: string
+): Promise<QuickResponseData<User>> => {
+  return request<QuickResponseData<User>>({
+    url: Api.info,
+    method: 'GET',
+    params: {
+      userName,
+    },
+  })
+}
 export const addUser = (data: User) => {
   return request({
     url: Api.add,
@@ -42,7 +54,7 @@ export const deleteUser = (userId: string) => {
     url: Api.remove,
     method: 'POST',
     params: {
-      user_id: userId,
+      userId,
     },
   })
 }
diff --git a/src/assets/audios/order.mp3 b/src/assets/audios/order.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..f67c4e9569c9471f4412fd246e1d42c35f3b42f6
Binary files /dev/null and b/src/assets/audios/order.mp3 differ
diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 92f16b309a55cd868d233ae77766c05a2d3534a0..99296b9ebe5378a2a3c0e1d33a06706fe26bd163 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -7,14 +7,16 @@ import {
   toRefs,
   Ref,
   computed,
+  onActivated,
+  nextTick,
 } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElTree, FormInstance } from 'element-plus'
 import { User } from '../../types/user'
 import { Column } from '../../types/table'
-import { Page } from '../../types/page'
-import { FormItem, FormTitle } from '../../types/form'
+import { FormItem } from '../../types/form'
 import QuickTable from '../QuickTable/index.vue'
 import QuickForm from '../QuickForm/index.vue'
+import { Tree } from '../../types/tree'
 
 const props = defineProps({
   tableData: {
@@ -65,6 +67,46 @@ const props = defineProps({
       return {}
     },
   },
+  showSearch: {
+    type: Boolean,
+    default: false,
+  },
+  showPage: {
+    type: Boolean,
+    default: false,
+  },
+  showTree: {
+    type: Boolean,
+    default: false,
+  },
+  treeData: {
+    type: Array,
+    default: () => {
+      return []
+    },
+  },
+  defaultTreeProps: {
+    type: Object,
+    default: () => {
+      return {
+        id: 'id',
+        label: 'label',
+        children: 'children',
+      }
+    },
+  },
+  treeSpan: {
+    type: Number,
+    default: 4,
+  },
+  autoFefresh: {
+    type: Boolean,
+    default: false,
+  },
+  interval: {
+    type: Number,
+    default: 1000 * 30,
+  },
 })
 
 const {
@@ -76,6 +118,14 @@ const {
   formItems,
   formTitle,
   page,
+  showSearch,
+  showPage,
+  showTree,
+  treeData,
+  defaultTreeProps,
+  treeSpan,
+  // autoReFefresh,
+  // autoRefreshTime,
 } = toRefs(props) as {
   tableData: Ref<any>
   tableColumns: Ref<Column[]>
@@ -83,30 +133,65 @@ const {
   searchFormItems: Ref<FormItem[]>
   formModel: Ref<any>
   formItems: Ref<FormItem[]>
-  formTitle: Ref<FormTitle>
-  page: Ref<Page>
+  formTitle: Ref<any>
+  page: Ref<any>
+  showSearch: Ref<boolean>
+  showPage: Ref<boolean>
+  showTree: Ref<boolean>
+  treeData: Ref<any>
+  defaultTreeProps: Ref<any>
+  treeSpan: Ref<number>
+  // autoReFefresh: Ref<boolean>
+  // autoRefreshTime: Ref<number>
 }
 
 const emit = defineEmits([
+  'onTreeClick',
   'onLoad',
+  'onTreeLoad',
   'onAdd',
   'onEdit',
   'onDelete',
   'onSearchFormSubmit',
-  'onSearchFormReset',
+  'onSearchFormClear',
   'onFormSubmit',
   'onFormCancel',
   'onSizeChange',
   'onCurrentChange',
 ])
+const quickFormRef = ref<InstanceType<typeof QuickForm>>()
+const selectTree = ref<Tree>({})
+const treeRef = ref<InstanceType<typeof ElTree>>()
 const selectDataList = ref<Array<User>>([])
 const dialogFormVisible = ref(false)
 const dialogFormType = ref('')
+const autoReFefresh = ref(true)
+const timeCount = ref()
+const autoRefreshTime = ref(1000 * 60)
+/**
+ * 函数
+ */
 const load = () => {
   const { current, size } = page.value
   const params = { ...searchFormModel.value, current, size }
   emit('onLoad', params)
 }
+const handleTreeNodeClick = (data: Tree) => {
+  selectTree.value = data
+  emit('onTreeClick', data, () => {
+    load()
+  })
+}
+const treeLoad = () => {
+  emit('onTreeLoad', (id: string) => {
+    nextTick(() => {
+      treeRef.value?.setCurrentKey(id)
+      const node = treeRef.value?.getCurrentNode() as Tree
+      handleTreeNodeClick(node)
+    })
+    load()
+  })
+}
 const handleSelectionChange = (val: User[]) => {
   selectDataList.value = val
 }
@@ -114,15 +199,30 @@ const handleSearch = () => {
   emit('onSearchFormSubmit', searchFormModel.value)
   load()
 }
-const handleReset = () => {
-  emit('onSearchFormReset', searchFormModel.value)
+const handleClear = () => {
+  emit('onSearchFormClear', searchFormModel.value)
 }
 const handleAdd = () => {
   dialogFormType.value = 'add'
+  if (showTree.value && !selectTree.value.id) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择节点',
+    })
+    return
+  }
   dialogFormVisible.value = true
+  emit('onAdd')
 }
 const handleEdit = () => {
   dialogFormType.value = 'edit'
+  if (showTree.value && !selectTree.value.id) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择节点',
+    })
+    return
+  }
   if (selectDataList.value.length !== 1) {
     ElMessage({
       type: 'warning',
@@ -152,7 +252,12 @@ const handleCancel = () => {
   emit('onFormCancel', formModel.value)
 }
 const handleOk = () => {
-  emit('onFormSubmit', formModel.value, () => {
+  if (quickFormRef.value) {
+    quickFormRef.value.handleSubmit()
+  }
+}
+const handleSubmit = (formRef: FormInstance | undefined) => {
+  emit('onFormSubmit', formRef, formModel.value, () => {
     dialogFormVisible.value = false
     load()
   })
@@ -180,68 +285,104 @@ const dialogTitle = computed(() => {
   return '标题'
 })
 onMounted(() => {
-  load()
+  // TODO:onMounted会执行两次，待解决
+  console.log('onMounted-crud')
+  if (showTree.value) {
+    treeLoad()
+  } else {
+    load()
+  }
+  if (autoReFefresh.value) {
+    timeCount.value = setInterval(() => {
+      load()
+    }, autoRefreshTime.value)
+  }
+})
+onActivated(() => {
+  clearInterval(timeCount.value)
 })
 </script>
 <template>
-  <quick-form
-    :inline="true"
-    :model="searchFormModel"
-    class="demo-form-inline"
-    :form-items="searchFormItems"
-    form-type="search"
-  >
-    <template #action>
-      <el-form-item>
-        <el-button type="primary" @click="handleSearch">查询</el-button>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleReset">重置</el-button>
-      </el-form-item>
-    </template>
-  </quick-form>
-  <el-button-group class="ml-4 action">
-    <el-button type="primary" @click="handleAdd">新增</el-button>
-    <el-button type="primary" @click="handleEdit">编辑</el-button>
-    <el-button type="primary" @click="handleDelete">删除</el-button>
-  </el-button-group>
-  <quick-table
-    :data="tableData"
-    :columns="tableColumns"
-    @selection-change="handleSelectionChange"
-  >
-  </quick-table>
-  <el-pagination
-    v-model:currentPage="page.current"
-    v-model:page-size="page.size"
-    :page-sizes="page.sizes"
-    :small="false"
-    :disabled="false"
-    :background="false"
-    layout="total, sizes, prev, pager, next, jumper"
-    :total="page.total"
-    @size-change="handleSizeChange"
-    @current-change="handleCurrentChange"
-  />
-  <el-dialog
-    v-model="dialogFormVisible"
-    :title="dialogTitle"
-    width="35%"
-    @close="handleCancel()"
-  >
-    <quick-form
-      :model="formModel"
-      :form-items="formItems"
-      :form-type="dialogFormType"
-    >
-    </quick-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="handleCancel()">取消</el-button>
-        <el-button type="primary" @click="handleOk()">确定</el-button>
-      </span>
-    </template>
-  </el-dialog>
+  <el-row :gutter="40">
+    <el-col :span="showTree ? treeSpan : 0">
+      <el-tree
+        v-if="showTree"
+        ref="treeRef"
+        :data="treeData"
+        :props="defaultTreeProps"
+        node-key="id"
+        :highlight-current="true"
+        @node-click="handleTreeNodeClick"
+      >
+      </el-tree>
+    </el-col>
+    <el-col :span="showTree ? 24 - treeSpan : 24">
+      <quick-form
+        v-if="showSearch"
+        :inline="true"
+        :model="searchFormModel"
+        class="demo-form-inline"
+        :form-items="searchFormItems"
+        form-type="search"
+        :action-slot="true"
+      >
+        <template #action>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleClear">清空</el-button>
+          </el-form-item>
+        </template>
+      </quick-form>
+      <el-button-group class="ml-4 action">
+        <el-button type="primary" @click="handleAdd">新增</el-button>
+        <el-button type="primary" @click="handleEdit">编辑</el-button>
+        <el-button type="primary" @click="handleDelete">删除</el-button>
+      </el-button-group>
+      <quick-table
+        :data="tableData"
+        :columns="tableColumns"
+        @selection-change="handleSelectionChange"
+      >
+      </quick-table>
+      <el-pagination
+        v-if="showPage"
+        v-model:currentPage="page.current"
+        v-model:page-size="page.size"
+        :page-sizes="page.sizes"
+        :small="false"
+        :disabled="false"
+        :background="false"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="page.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+      <el-dialog
+        v-model="dialogFormVisible"
+        :title="dialogTitle"
+        width="35%"
+        @close="handleCancel()"
+      >
+        <quick-form
+          ref="quickFormRef"
+          :model="formModel"
+          :form-items="formItems"
+          :form-type="dialogFormType"
+          @submit="handleSubmit"
+          @clear="handleClear"
+        >
+        </quick-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="handleCancel()">取消</el-button>
+            <el-button type="primary" @click="handleOk()">确定</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </el-col>
+  </el-row>
 </template>
 <style lang="scss" scoped>
 @import './index.scss';
diff --git a/src/components/QuickForm/index.scss b/src/components/QuickForm/index.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a0c8268b50f7ed88bc5c8790b95132159f2a9a1b 100644
--- a/src/components/QuickForm/index.scss
+++ b/src/components/QuickForm/index.scss
@@ -0,0 +1,20 @@
+.avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+  }
+  
+  .avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+  }
+  
+  .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    text-align: center;
+  }
\ No newline at end of file
diff --git a/src/components/QuickForm/index.vue b/src/components/QuickForm/index.vue
index 09264fa30a196557921112cef50cbbf6f95b05c6..af877b776b474f511d8ae7e8e070ec78ec58c175 100644
--- a/src/components/QuickForm/index.vue
+++ b/src/components/QuickForm/index.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
-import { defineProps, toRefs, Ref } from 'vue'
+import { defineProps, toRefs, Ref, defineEmits, ref, defineExpose } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import { FormInstance } from 'element-plus'
 import { FormItem } from '../../types/form'
 
+const formRef = ref<FormInstance>()
 const props = defineProps({
   model: {
     type: Object,
@@ -23,36 +26,64 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  actionSlot: {
+    type: Boolean,
+    default: false,
+  },
+  showAction: {
+    type: Boolean,
+    default: false,
+  },
 })
 const {
   model,
   inline = false,
   formItems,
   formType,
+  actionSlot = false,
+  showAction = false,
 } = toRefs(props) as {
   model: Ref<any>
   inline: Ref<boolean>
   formItems: Ref<FormItem[]>
   formType: Ref<string>
+  actionSlot: Ref<boolean>
+  showAction: Ref<boolean>
 }
+const emit = defineEmits(['submit', 'clear'])
+const handleSubmit = () => {
+  emit('submit', formRef.value)
+}
+const handleClear = () => {
+  emit('clear')
+}
+defineExpose({ handleSubmit })
 </script>
 <template>
-  <el-form :model="model" :inline="inline">
+  <el-form ref="formRef" :model="model" :inline="inline" size="default">
     <template v-for="(item, index) in formItems" :key="index">
       <el-form-item
         v-if="
           formType === 'search' ||
           (formType === 'add' && !item.addHidden) ||
           (formType === 'edit' && !item.editHidden) ||
-          (formType === 'detail' && !item.detailHidden)
+          (formType === 'detail' && !item.detailHidden) ||
+          !formType
         "
         :label="item.label"
         :label-width="item.labelWidth"
+        :prop="item.prop"
+        :rules="item.rules"
       >
         <template v-if="item.type === 'select'">
           <el-select
             v-model="model[item.vModel]"
             :placeholder="item.placeholder"
+            :disabled="
+              (formType === 'add' && item.addDisabled) ||
+              (formType === 'edit' && item.editDisabled) ||
+              (formType === 'detail' && item.detailDisabled)
+            "
           >
             <el-option
               v-for="(option, optionsIndex) in item.options"
@@ -62,17 +93,74 @@ const {
             />
           </el-select>
         </template>
+        <template v-else-if="item.type === 'cascader'">
+          <el-cascader
+            v-model="model[item.vModel]"
+            :options="item.treeOptions"
+            :props="{
+              expandTrigger: 'hover',
+            }"
+            @change="item.change"
+          />
+        </template>
         <template v-else-if="item.type === 'textarea'">
           <el-input
             v-model="model[item.vModel]"
             :autosize="{ minRows: 5, maxRows: 10 }"
             type="textarea"
+            :autocomplete="item.autocomplete"
+            :placeholder="item.placeholder"
+            :readonly="
+              (formType === 'add' && item.addReadonly) ||
+              (formType === 'edit' && item.editReadonly) ||
+              (formType === 'detail' && item.detailReadonly)
+            "
+          />
+        </template>
+        <template v-else-if="item.type === 'password'">
+          <el-input
+            v-model="model[item.vModel]"
+            :autocomplete="item.autocomplete"
+            :placeholder="item.placeholder"
+            type="password"
+            show-password
+            :readonly="
+              (formType === 'add' && item.addReadonly) ||
+              (formType === 'edit' && item.editReadonly) ||
+              (formType === 'detail' && item.detailReadonly)
+            "
+          />
+        </template>
+        <template v-else-if="item.type === 'avatar'">
+          <el-upload
+            class="avatar-uploader"
+            :action="item.actionUrl"
+            :show-file-list="false"
+            :on-success="item.success"
+            :before-upload="item.beforeUpload"
+          >
+            <img v-if="item.imgUrl" :src="item.imgUrl" class="avatar" />
+            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+        </template>
+        <template v-else-if="item.type === 'number'">
+          <el-input
+            v-model="model[item.vModel]"
+            type="number"
+            :autocomplete="item.autocomplete"
+            :placeholder="item.placeholder"
+            :readonly="
+              (formType === 'add' && item.addReadonly) ||
+              (formType === 'edit' && item.editReadonly) ||
+              (formType === 'detail' && item.detailReadonly)
+            "
           />
         </template>
         <template v-else>
           <el-input
             v-model="model[item.vModel]"
             :autocomplete="item.autocomplete"
+            :placeholder="item.placeholder"
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
@@ -82,6 +170,19 @@ const {
         </template>
       </el-form-item>
     </template>
-    <slot name="action"></slot>
+    <template v-if="showAction">
+      <template v-if="actionSlot">
+        <slot name="action" :form-ref="formRef">
+          {{ formRef }}
+        </slot>
+      </template>
+      <template v-else>
+        <el-button type="primary" @click="handleSubmit">提交</el-button>
+        <el-button @click="handleClear">清空</el-button>
+      </template>
+    </template>
   </el-form>
 </template>
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/components/QuickTable/index.vue b/src/components/QuickTable/index.vue
index f9fa869e502f32ad2781ed341b393fc72fd9042f..4b2ba7dd2c6eb07b7e5dd81ef3bc38767c656d54 100644
--- a/src/components/QuickTable/index.vue
+++ b/src/components/QuickTable/index.vue
@@ -33,7 +33,7 @@ const handleSelectionChange = (val: any) => {
   <el-table
     :data="data"
     style="width: 100%"
-    :height="500"
+    :height="575"
     stripe
     border
     @selection-change="handleSelectionChange"
diff --git a/src/env.d.ts b/src/env.d.ts
index aafef9509dd5c4364df3b0e29457a63e0c87011b..89446655831f039c6a633fca3622f2bd227673a2 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -6,3 +6,7 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+// declare module 'echarts' {
+//   const echarts: any
+//   export default echarts
+// }
diff --git a/src/layout/components/AiniSidebar/index.vue b/src/layout/components/AiniSidebar/index.vue
index 1fd1f8efae0a0190d63c61ad8fb25237a456aa11..8c8f006b46073b0327b15a09252370c7dad27a9b 100644
--- a/src/layout/components/AiniSidebar/index.vue
+++ b/src/layout/components/AiniSidebar/index.vue
@@ -31,31 +31,20 @@ const handleClose = (key: string, keyPath: string[]) => {
       default-active="2"
       :collapse="isCollapse"
       text-color="#fff"
+      :router="true"
       @open="handleOpen"
       @close="handleClose"
     >
-      <el-sub-menu index="1">
+      <el-sub-menu index="/system">
         <template #title>
-          <el-icon><location /></el-icon>
+          <el-icon><Setting /></el-icon>
           <span>系统管理</span>
         </template>
-        <el-sub-menu index="1-4">
-          <template #title>用户管理</template>
-          <el-menu-item index="1-4-1">用户列表</el-menu-item>
-        </el-sub-menu>
+        <el-menu-item index="/system/user">用户管理</el-menu-item>
+        <!-- <el-menu-item index="/role">角色管理</el-menu-item> -->
+        <el-menu-item index="/system/dictionaryType">字典分类</el-menu-item>
+        <el-menu-item index="/system/dictionary">字典管理</el-menu-item>
       </el-sub-menu>
-      <el-menu-item index="2">
-        <el-icon><icon-menu /></el-icon>
-        <span>角色管理</span>
-      </el-menu-item>
-      <el-menu-item index="3" disabled>
-        <el-icon><document /></el-icon>
-        <span>权限管理</span>
-      </el-menu-item>
-      <el-menu-item index="4">
-        <el-icon><setting /></el-icon>
-        <span>菜单管理</span>
-      </el-menu-item>
     </el-menu>
   </div>
 </template>
diff --git a/src/layout/components/AiniTop/index.vue b/src/layout/components/AiniTop/index.vue
index ce1d45084c7c16b8301b69d560be9b442915aaf3..090219927864cf4ec218c5eb68b01ee8eade02c8 100644
--- a/src/layout/components/AiniTop/index.vue
+++ b/src/layout/components/AiniTop/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ElMessageBox } from 'element-plus'
 import {
   // Document,
   // Location,
@@ -12,14 +13,46 @@ import {
   Phone,
 } from '@element-plus/icons-vue'
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 // import AiniLanguage from '@/components/AiniLanguage/index.vue'
 import { useAppStore } from '../../../store/modules/app'
 
+const router = useRouter()
 const appStore = useAppStore()
 const isCollapse = computed(() => appStore.getCollapse)
 const collapse = () => {
   appStore.setCollapse(!isCollapse.value)
 }
+const loginOut = () => {
+  ElMessageBox.confirm('你真的要退出系统吗?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    router.push('/login')
+  })
+}
+const personalInfo = () => {
+  router.push('/personalInfo')
+}
+const changePassword = () => {
+  router.push('/changePassword')
+}
+const handleCommand = (cmd: string) => {
+  switch (cmd) {
+    case 'loginOut':
+      loginOut()
+      break
+    case 'personalInfo':
+      personalInfo()
+      break
+    case 'changePassword':
+      changePassword()
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <template>
@@ -50,15 +83,21 @@ const collapse = () => {
         <el-icon><Phone /></el-icon>
       </span>
       <span class="test">
-        <el-dropdown>
+        <el-dropdown @command="handleCommand">
           <span class="el-dropdown-link">
             <el-avatar :size="30"> user </el-avatar>
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item :icon="Setting">个人资料</el-dropdown-item>
-              <el-dropdown-item :icon="Setting">修改密码 </el-dropdown-item>
-              <el-dropdown-item :icon="Setting">退出</el-dropdown-item>
+              <el-dropdown-item :icon="Setting" command="personalInfo">
+                个人资料
+              </el-dropdown-item>
+              <el-dropdown-item :icon="Setting" command="changePassword">
+                修改密码
+              </el-dropdown-item>
+              <el-dropdown-item :icon="Setting" command="loginOut">
+                退出
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 2061f7d1a848c4ee2b9082b83182858612026893..4cf132c28abb18768a0def036723eb58449b3bd3 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 // import AiniBottom from './components/AiniBottom/index.vue'
+import { useRoute, useRouter } from 'vue-router'
 import AiniTop from './components/AiniTop/index.vue'
 import AiniSidebar from './components/AiniSidebar/index.vue'
 import { useAppStore } from '../store/modules/app'
 
+const route = useRoute()
+const router = useRouter()
 const appStore = useAppStore()
 const isCollapse = computed(() => appStore.getCollapse)
 
 const { t } = useI18n()
 console.log('i18n', t('title'))
 
-const tabIndex = 2
-const editableTabsValue = ref('2')
+const tabIndex = 1
+const editableTabsValue = ref('1')
 const editableTabs = ref([
   {
     title: '首页',
@@ -54,6 +57,15 @@ const handleTabsEdit = (targetName: string, action: 'remove' | 'add'): void => {
     editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
   }
 }
+const handleClick = (activeName: string) => {
+  editableTabsValue.value = activeName
+  if (editableTabsValue.value === '1') {
+    router.push('/home')
+  }
+  if (editableTabsValue.value === '2') {
+    router.push('/system/user')
+  }
+}
 </script>
 
 <template>
@@ -69,13 +81,14 @@ const handleTabsEdit = (targetName: string, action: 'remove' | 'add'): void => {
           </el-card>
         </el-header>
         <el-main>
-          <el-card shadow="always" style="height: 100%">
+          <el-card shadow="always" :body-style="{ padding: 10 }">
             <el-tabs
               v-model="editableTabsValue"
               type="card"
               editable
               class="demo-tabs"
               @edit="handleTabsEdit"
+              @tab-change="handleClick"
             >
               <el-tab-pane
                 v-for="item in editableTabs"
@@ -83,7 +96,8 @@ const handleTabsEdit = (targetName: string, action: 'remove' | 'add'): void => {
                 :label="item.title"
                 :name="item.name"
               >
-                <router-view></router-view>
+                <!-- <router-view></router-view> -->
+                <router-view :key="route.fullPath" />
               </el-tab-pane>
             </el-tabs>
           </el-card>
@@ -127,8 +141,8 @@ const handleTabsEdit = (targetName: string, action: 'remove' | 'add'): void => {
 }
 .el-main {
   /* height: calc(100vh - 60px - 100px); */
-  padding: 10px;
-  overflow: hidden;
+  padding: 20px;
+  /* overflow: hidden; */
 }
 .el-container {
   height: 100%;
diff --git a/src/main.ts b/src/main.ts
index 8e32dd45e33a8c1b94b3c1767e18c96e5e2bbc5d..4a36dc96ae85672b3346c9b19b41739002898023 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,10 +5,10 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import en from 'element-plus/es/locale/lang/en'
 // import QuickUI from 'quick-vue3-ui'
 import 'quick-vue3-ui/dist/style.css'
+import * as echarts from 'echarts'
 import App from './App.vue'
 import { router } from './router'
 import { pinia } from './store'
-
 import i18n from './i18n'
 
 import { useAppStore } from './store/modules/app'
@@ -26,5 +26,5 @@ app.use(router)
 app.use(pinia)
 app.use(i18n)
 // app.use(QuickUI)
-
+app.config.globalProperties.$echarts = echarts
 app.mount('#app')
diff --git a/src/pages/404/index.scss b/src/pages/404/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/404/index.ts b/src/pages/404/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/404/index.vue b/src/pages/404/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d888b4b8af6f2261ea2a72ce6018d157054d8e7d
--- /dev/null
+++ b/src/pages/404/index.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  console.log('onMounted-404')
+})
+</script>
+<template>
+  <div>404页面</div>
+</template>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/pages/login/idnex.ts b/src/pages/login/idnex.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5948b1ab46b7a65941e49ff290dc594c48acbdf
--- /dev/null
+++ b/src/pages/login/idnex.ts
@@ -0,0 +1,46 @@
+import { reactive } from 'vue'
+import { router } from '../../router'
+import { FormItem } from '../../types/form'
+import { Login } from '../../types/user'
+import { useLoginStore } from '../../store/modules/login'
+/**
+ * 属性
+ */
+const loginStore = useLoginStore()
+export const form = reactive<Login>({
+  tenant: '',
+  userName: '',
+  userPassword: '',
+})
+export const formItems = reactive<Array<FormItem>>([
+  {
+    label: '租户',
+    labelWidth: '80px',
+    vModel: 'tenant',
+    type: 'text',
+    placeholder: '租户',
+  },
+  {
+    label: '用户名',
+    labelWidth: '80px',
+    vModel: 'userName',
+    type: 'text',
+    placeholder: '用户名',
+  },
+  {
+    label: '密码',
+    labelWidth: '80px',
+    vModel: 'userPassword',
+    type: 'password',
+    placeholder: '密码',
+  },
+])
+/**
+ * 函数
+ */
+export const handleLogin = (): void => {
+  loginStore.login(form).then(() => {
+    console.log('登录成功')
+    router.push('/')
+  })
+}
diff --git a/src/pages/login/index.scss b/src/pages/login/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..01378f95746f7aa797a4c1831d8c1926a26d1aad
--- /dev/null
+++ b/src/pages/login/index.scss
@@ -0,0 +1,3 @@
+.login{
+    
+}
\ No newline at end of file
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 36fe85fcfef82def52e93da8682bf7444a7f774d..5c8d80b146bc39b93a0b8a36768bdaa88a629658 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,7 +1,18 @@
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+import QuickForm from '../../components/QuickForm/index.vue'
+import { form, formItems, handleLogin } from './idnex'
+</script>
 
 <template>
-  <div>登录</div>
+  <div class="login">
+    <quick-form :model="form" :form-items="formItems" :action-slot="true">
+      <template #action>
+        <el-button type="primary" @click="handleLogin">登录</el-button>
+      </template>
+    </quick-form>
+  </div>
 </template>
 
-<style></style>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6a1aa964bca4b00b95fc5e0d76138e7bade6fe2c..1a09d18c7e20927098ca398b86ebf15060e380ec 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,19 +4,55 @@ import layout from '../layout/index.vue'
 export const router = createRouter({
   history: createWebHashHistory(),
   routes: [
+    {
+      path: '/:catchAll(.*)',
+      name: '404',
+      component: () => import('@/pages/404/index.vue'),
+    },
+    {
+      path: '/login',
+      component: () => import('../pages/login/index.vue'),
+    },
+    {
+      path: '/personalInfo',
+      component: () => import('../views/personalInfo/index.vue'),
+    },
+    {
+      path: '/changePassword',
+      component: () => import('../views/changePassword/index.vue'),
+    },
     {
       path: '/',
       component: layout,
-      redirect: '/user',
+      redirect: '/home',
       children: [
         {
           path: '/home',
           component: () => import('../views/home/index.vue'),
         },
+      ],
+    },
+    {
+      path: '/system',
+      component: layout,
+      redirect: 'user',
+      children: [
         {
-          path: '/user',
+          path: 'user',
           component: () => import('../views/user/index.vue'),
         },
+        // {
+        //   path: 'role',
+        //   component: () => import('../views/role/index.vue'),
+        // },
+        {
+          path: 'dictionaryType',
+          component: () => import('../views/dictionaryType/index.vue'),
+        },
+        {
+          path: 'dictionary',
+          component: () => import('../views/dictionary/index.vue'),
+        },
       ],
     },
   ],
diff --git a/src/store/modules/login.ts b/src/store/modules/login.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34634a9a9abda3771b618b9a853c0c218abb26cd
--- /dev/null
+++ b/src/store/modules/login.ts
@@ -0,0 +1,68 @@
+import { defineStore } from 'pinia'
+import { userLogin } from '../../api/login'
+import { Login, User } from '../../types/user'
+import { quickMd5 } from '../../utils'
+import { useUserStore } from './user'
+
+const userStore = useUserStore()
+
+interface UserState {
+  token: string
+  tenant: string
+  userName: string
+}
+export const useLoginStore = defineStore('loginStore', {
+  state: (): UserState => {
+    return {
+      token: '',
+      tenant: '',
+      userName: '',
+    }
+  },
+  getters: {
+    getToken(): string | undefined {
+      return this.token
+    },
+  },
+  actions: {
+    login(form: Login): Promise<User> {
+      const { tenant, userName, userPassword } = form
+      return new Promise((resolve, reject) => {
+        userLogin({
+          tenant,
+          userName,
+          userPassword: quickMd5(userPassword),
+        })
+          .then((res) => {
+            const { data: user } = res
+            const { token } = user
+            if (token) {
+              this.token = token
+            }
+            this.tenant = tenant
+            this.userName = userName
+            userStore.getUserInfo(userName)
+            resolve(user)
+          })
+          .catch((err) => {
+            reject(err)
+          })
+      })
+    },
+  },
+  persist: {
+    enabled: true, // 默认会以模块id为key，存储当前模块所有的状态；路由跳转会刷新掉store，尽量放在路由刷新后存储。
+    // strategies: [
+    //   {
+    //     key: 'token', // 默认userStore
+    //     // storage: sessionStorage, // sessionStorage|localStorage//默认sessionStorage
+    //     // paths: ['token'],
+    //   },
+    //   {
+    //     key: 'userInfo',
+    //     storage: localStorage,
+    //     paths: ['tenant', 'userName'],
+    //   },
+    // ],
+  },
+})
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index bcc5b8fd27d0f3df54d6f295983184cd8d0d46e6..3bb390d0890be30410e9203eca5d93cc66b5e451 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,41 +1,50 @@
 import { defineStore } from 'pinia'
+import { getUserInfo, getUserPageList } from '../../api/user'
+import { User } from '../../types/user'
+import { QuickResponseData } from '../../utils/request'
 
 interface UserState {
-  token: string
-  age: number
+  userList: Array<User>
+  user: User
 }
-
 export const useUserStore = defineStore('userStore', {
   state: (): UserState => {
     return {
-      token: '',
-      age: 0,
+      userList: [],
+      user: {
+        userId: '',
+        userName: '',
+        fullName: '',
+        phone: '',
+        avatar: '',
+        email: '',
+        address: '',
+        createTime: '',
+      },
     }
   },
-  getters: {
-    getToken(): string {
-      return this.token
-    },
-    getAge(): number {
-      return this.age
-    },
-  },
+  getters: {},
   actions: {
-    setToken(token: string) {
-      this.token = token
+    getUserPageList(parmas: object): Promise<QuickResponseData<Array<User>>> {
+      return new Promise((resolve) => {
+        getUserPageList(parmas).then((res) => {
+          const { data: userList } = res
+          this.userList = userList
+          resolve(res)
+        })
+      })
     },
-    setAge(age: number) {
-      this.age = age
+    getUserInfo(userName: string): Promise<User> {
+      return new Promise((resolve) => {
+        getUserInfo(userName).then((res) => {
+          const { data: user } = res
+          this.user = user
+          resolve(user)
+        })
+      })
     },
   },
   persist: {
-    enabled: true, // 默认会以模块id为key，存储当前模块所有的状态；路由跳转会刷新掉store，尽量放在路由刷新后存储。
-    // strategies: [
-    //   {
-    //     key: 'user', // 默认userStore
-    //     // storage: sessionStorage, // sessionStorage|localStorage//默认sessionStorage
-    //     paths: ['token', 'age'],
-    //   },
-    // ],
+    enabled: true,
   },
 })
diff --git a/src/types/dictionary.ts b/src/types/dictionary.ts
new file mode 100644
index 0000000000000000000000000000000000000000..78f4d16a30052b79716b2c6edf82d3ad8a6ba833
--- /dev/null
+++ b/src/types/dictionary.ts
@@ -0,0 +1,6 @@
+export interface Dictionary {
+  id: string
+  dicTypeId: string
+  dicId: string
+  name: string
+}
diff --git a/src/types/dictionaryType.ts b/src/types/dictionaryType.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e38d90455c3bc3975fbbf60bc877b9a493e8fb2
--- /dev/null
+++ b/src/types/dictionaryType.ts
@@ -0,0 +1,5 @@
+export interface DictionaryType {
+  id: string
+  dicTypeId: string
+  name: string
+}
diff --git a/src/types/form.ts b/src/types/form.ts
index 7c42beced36e6177db80e7a295b4494302e101f0..ca9ec75742b0c396a55a2421c5d7b5f5d7c0a6df 100644
--- a/src/types/form.ts
+++ b/src/types/form.ts
@@ -1,13 +1,11 @@
+import { Options } from '../types/options'
+import { Tree } from '../types/tree'
+
 export interface FormTitle {
   add: string
   edit: string
   detail: string
 }
-export interface Options {
-  label: string
-  value: string
-}
-
 export interface FormItem {
   label?: string
   value?: string
@@ -17,10 +15,23 @@ export interface FormItem {
   type?: string
   autocomplete?: string
   options?: Options[]
+  treeOptions?: Tree[]
   addHidden?: boolean
   editHidden?: boolean
   detailHidden?: boolean
   addReadonly?: boolean
   editReadonly?: boolean
   detailReadonly?: boolean
+  addDisabled?: boolean
+  editDisabled?: boolean
+  detailDisabled?: boolean
+  actionUrl?: string
+  imgUrl?: string
+  prop?: string
+  rules?: any
+  maxLength?: string
+  format?: () => any
+  change?: (value: string) => void
+  success?: () => void
+  beforeUpload?: () => void
 }
diff --git a/src/types/options.ts b/src/types/options.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca2afc365c068d6c4b62704ca81a98d85c7fdbf0
--- /dev/null
+++ b/src/types/options.ts
@@ -0,0 +1,9 @@
+export interface Options {
+  label: string
+  value: string
+}
+export interface TreeOptions {
+  id: string
+  label: string
+  children?: string
+}
diff --git a/src/types/tree.ts b/src/types/tree.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0335a65f991c7c9ab0d9b41079d67bd12c33a2a4
--- /dev/null
+++ b/src/types/tree.ts
@@ -0,0 +1,5 @@
+export interface Tree {
+  id: string
+  label: string
+  children: Tree[]
+}
diff --git a/src/types/user.ts b/src/types/user.ts
index 011af55835c7355bc956d4ebb4175e0569c7786f..554478c5dc884b958351fc2baeeb696715f2bf20 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,8 +1,26 @@
 export interface User {
-  user_id: string
-  user_name: string
+  id: string
+  userId: string
+  userName: string
   password: string
-  email: string
-  address: string
-  create_time: string
+  createTime: string
+  avatar?: string
+  fullName?: string
+  phone?: string
+  email?: string
+  address?: string
+  remark?: string
+}
+export interface SearchUser {
+  userName: string
+}
+export interface Login {
+  tenant: string
+  userName: string
+  userPassword: string
+}
+export interface ChangePassword {
+  oldPassword: string
+  newPassword: string
+  confirmPassword: string
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d04a0ddc239d998c8c0e84b77cffe51750147cfb
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,65 @@
+import md5 from 'js-md5'
+import { Options, TreeOptions } from '../types/options'
+import { Tree } from '../types/tree'
+
+export const quickMd5 = (str: string) => {
+  return md5(str)
+}
+export const dicFormat = (data: any, options: Options) => {
+  const arr: Options[] = []
+  const defaultOptions = {
+    label: 'label',
+    value: 'value',
+  }
+  const label = options && options.label ? options.label : defaultOptions.label
+  const value = options && options.value ? options.value : defaultOptions.value
+  data.forEach((element: any) => {
+    arr.push({
+      label: element[label],
+      value: element[value],
+    })
+  })
+  return arr
+}
+export const treeFormat = (data: any, options: TreeOptions) => {
+  const arr: Tree[] = []
+  const defaultOptions = {
+    id: 'id',
+    label: 'label',
+    children: 'children',
+  }
+  const label = options && options.label ? options.label : defaultOptions.label
+  const id = options && options.id ? options.id : defaultOptions.id
+  const children =
+    options && options.children ? options.children : defaultOptions.children
+  data.forEach((element: Tree) => {
+    const obj: Tree = {
+      label: element[label],
+      id: element[id],
+      children: [],
+    }
+    if (element[children] && element[children].length > 0) {
+      obj.children = treeFormat(element[children], options)
+    }
+    arr.push(obj)
+  })
+  return arr
+}
+
+// json的key下划线转驼峰
+export const toTuofeng = (str: string) => {
+  return str.replace(/"(\w)+":/g, (all) => {
+    if (all.indexOf('_') === -1) {
+      return all
+    }
+    let str1 = ''
+    all.split('_').forEach((element, index) => {
+      if (index <= 0) {
+        str1 += element
+      } else {
+        str1 += element.slice(0, 1).toUpperCase() + element.slice(1)
+      }
+    })
+    return str1
+  })
+}
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 657329eba550a1f400555bafa285ff2186731142..20f2990870fbb8a65fa9786b8e8f0d8b02fde9a6 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,7 +1,16 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import { toTuofeng } from './index'
+import { Page } from '../types/page'
+
+export interface QuickResponseData<T = any> {
+  status: number
+  msg: string
+  data: T
+  page: Page
+}
 
 const baseURL = import.meta.env.VITE_APP_BASE_URL
-const request: AxiosInstance = axios.create({
+const quickRequest: AxiosInstance = axios.create({
   baseURL,
   timeout: 1000 * 15,
   headers: {
@@ -10,8 +19,8 @@ const request: AxiosInstance = axios.create({
 })
 
 // 请求拦截器
-request.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
+quickRequest.interceptors.request.use(
+  (config) => {
     console.log('request', config)
     //   const token = ''
     //   config.headers.token = `Bearer ${token}`
@@ -24,15 +33,17 @@ request.interceptors.request.use(
 )
 
 // 响应拦截器
-request.interceptors.response.use(
-  (res: AxiosResponse) => {
+quickRequest.interceptors.response.use(
+  (res) => {
     console.log('response', res)
     const { data } = res
-    const { status, data: payload, page: pagination, msg } = data
+    const { status, data: payload, page, msg } = data as QuickResponseData<any>
     if (status === 0) {
+      const jsonStr = toTuofeng(JSON.stringify(payload))
+      const result = JSON.parse(jsonStr)
       return Promise.resolve({
-        payload,
-        pagination,
+        data: result,
+        page,
       })
     }
     return Promise.reject(msg)
@@ -43,4 +54,8 @@ request.interceptors.response.use(
   }
 )
 
+const request = <T>(config: AxiosRequestConfig): Promise<T> => {
+  return quickRequest.request<any, T>(config)
+}
+
 export default request
diff --git a/src/views/changePassword/idnex.ts b/src/views/changePassword/idnex.ts
new file mode 100644
index 0000000000000000000000000000000000000000..427aebd22f86a2267f3f1301863a8a4cfd84793a
--- /dev/null
+++ b/src/views/changePassword/idnex.ts
@@ -0,0 +1,39 @@
+import { reactive } from 'vue'
+import { FormItem } from '../../types/form'
+import { ChangePassword } from '../../types/user'
+/**
+ * 属性
+ */
+export const form = reactive<ChangePassword>({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+export const formItems = reactive<Array<FormItem>>([
+  {
+    label: '原密码',
+    labelWidth: '80px',
+    vModel: 'oldPassword',
+    type: 'password',
+    placeholder: '原密码',
+  },
+  {
+    label: '新密码',
+    labelWidth: '80px',
+    vModel: 'newPassword',
+    type: 'password',
+    placeholder: '新密码',
+  },
+  {
+    label: '确认密码',
+    labelWidth: '80px',
+    vModel: 'confirmPassword',
+    type: 'password',
+    placeholder: '确认密码',
+  },
+])
+/**
+ * 函数
+ */
+export const handleSubmit = () => {}
+export const handleClear = () => {}
diff --git a/src/views/changePassword/index.scss b/src/views/changePassword/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8a8a2f5628211d70db692d33a75d0e8e9c754ee1
--- /dev/null
+++ b/src/views/changePassword/index.scss
@@ -0,0 +1,3 @@
+.change-password{
+    width: 50%;
+}
\ No newline at end of file
diff --git a/src/views/changePassword/index.vue b/src/views/changePassword/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90e383dc69fad6edfeb62c67bd1ab7d24809155f
--- /dev/null
+++ b/src/views/changePassword/index.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import QuickForm from '../../components/QuickForm/index.vue'
+import { form, formItems, handleSubmit, handleClear } from './idnex'
+
+onMounted(() => {
+  console.log('onMounted-login')
+})
+</script>
+
+<template>
+  <div class="change-password">
+    <quick-form
+      :model="form"
+      :form-items="formItems"
+      @submit="handleSubmit"
+      @clear="handleClear"
+    >
+    </quick-form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/dictionary/index.scss b/src/views/dictionary/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5ed1aa9c874ff08a3936444f0b1eb4fc1ed012e8
--- /dev/null
+++ b/src/views/dictionary/index.scss
@@ -0,0 +1,12 @@
+.action {
+    margin-bottom: 10px;
+  }
+  .demo-pagination-block + .demo-pagination-block {
+    margin-top: 10px;
+  }
+  .demo-pagination-block .demonstration {
+    margin-bottom: 16px;
+  }
+  .el-pagination {
+    margin-top: 10px;
+  }
\ No newline at end of file
diff --git a/src/views/dictionary/index.ts b/src/views/dictionary/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cecc4016439142faf3c5cff231d04ed4dba9518c
--- /dev/null
+++ b/src/views/dictionary/index.ts
@@ -0,0 +1,177 @@
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Column } from '../../types/table'
+import { FormItem, FormTitle } from '../../types/form'
+import { Dictionary } from '../../types/dictionary'
+import {
+  addDictionary,
+  updateDictionary,
+  removeDictionary,
+  getDictionaryList,
+} from '../../api/dictionary'
+import { dicFormat, treeFormat } from '../../utils'
+import { Tree } from '../../types/tree'
+import { getDictionaryTypeList } from '../../api/dictionaryType'
+import { Options } from '../../types/options'
+/**
+ * 属性
+ */
+export const currentTreeData = ref<Tree>({
+  id: '',
+  label: '',
+  children: [],
+})
+const dicTypeList = reactive<Array<Options>>([])
+export const treeDataList = reactive<Array<Tree>>([])
+export const dataList = reactive<Array<Dictionary>>([])
+export const form = reactive<Dictionary>({
+  id: '',
+  dicTypeId: '',
+  dicId: '',
+  name: '',
+})
+export const formTitle = reactive<FormTitle>({
+  add: '创建字典',
+  edit: '修改字典',
+  detail: '字典详情',
+})
+export const formItems = reactive<Array<FormItem>>([
+  // TODO:待字典类型完善后使用级联
+  // {
+  //   label: '字典类型',
+  //   labelWidth: '80px',
+  //   vModel: 'dicTypeId',
+  //   placeholder: '字典类型',
+  //   type: 'cascader',
+  //   treeOptions: treeDataList,
+  //   change: (val: string) => {
+  //     console.log('change', val)
+  //   },
+  // },
+  {
+    label: '字典类型',
+    labelWidth: '80px',
+    vModel: 'dicTypeId',
+    placeholder: '字典类型',
+    type: 'select',
+    options: dicTypeList,
+    change: (val: string) => {
+      console.log('change', val)
+    },
+  },
+  {
+    label: '字典编号',
+    labelWidth: '80px',
+    vModel: 'dicId',
+    placeholder: '字典编号',
+    editReadonly: true,
+  },
+  {
+    label: '字典名称',
+    labelWidth: '80px',
+    vModel: 'name',
+    placeholder: '字典名称',
+  },
+])
+export const columns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '字典编号',
+    prop: 'dicId',
+    width: '200',
+  },
+  {
+    label: '字典名称',
+    prop: 'name',
+  },
+])
+/**
+ * 函数
+ */
+export const load = () => {
+  const { id } = currentTreeData.value
+  getDictionaryList(id).then((res) => {
+    const { data: dictionaryList } = res
+    dataList.length = 0
+    dataList.push(...dictionaryList)
+  })
+}
+export const treeLoad = (done: any) => {
+  getDictionaryTypeList().then((res) => {
+    const { data: dictionaryTypeList } = res
+    const data = treeFormat(dictionaryTypeList, {
+      id: 'dicTypeId',
+      label: 'name',
+      children: 'children',
+    })
+    treeDataList.length = 0
+    treeDataList.push(...data)
+
+    const data1 = dicFormat(dictionaryTypeList, {
+      value: 'dicTypeId',
+      label: 'name',
+    })
+    dicTypeList.length = 0
+    dicTypeList.push(...data1)
+
+    currentTreeData.value.id = treeDataList[0].id
+    done(currentTreeData.value.id)
+  })
+}
+export const handleAdd = () => {
+  form.dicTypeId = ''
+  form.id = ''
+  form.dicTypeId = currentTreeData.value.id
+  form.name = ''
+}
+export const handleEdit = (item: Dictionary) => {
+  form.dicTypeId = item.dicTypeId
+  form.id = item.id
+  form.dicId = item.dicId
+  form.name = item.name
+}
+
+export const handleDelete = (item: Dictionary, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.name}】的字典吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    removeDictionary(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典删除成功',
+      })
+      done()
+    })
+  })
+}
+export const handleCancel = () => {
+  console.log('handleCancel')
+}
+export const handleOk = (item: Dictionary, done: any) => {
+  if (item.id) {
+    updateDictionary(item).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典修改成功',
+      })
+      done()
+    })
+  } else {
+    addDictionary(item).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典创建成功',
+      })
+      done()
+    })
+  }
+}
+export const handleTreeClick = (data: Tree, done: any) => {
+  currentTreeData.value = data
+  done()
+}
diff --git a/src/views/dictionary/index.vue b/src/views/dictionary/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b22dcf71754f6f1e1547852f4826fb1297deab80
--- /dev/null
+++ b/src/views/dictionary/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import QuickCrud from '../../components/QuickCrud/index.vue'
+import {
+  treeDataList,
+  dataList,
+  columns,
+  formItems,
+  formTitle,
+  form,
+  treeLoad,
+  load,
+  handleAdd,
+  handleEdit,
+  handleDelete,
+  handleOk,
+  handleCancel,
+  handleTreeClick,
+} from './index'
+</script>
+<template>
+  <quick-crud
+    :tree-span="5"
+    :show-tree="true"
+    :tree-data="treeDataList"
+    :table-data="dataList"
+    :table-columns="columns"
+    :form-model="form"
+    :form-items="formItems"
+    :form-title="formTitle"
+    @on-tree-load="treeLoad"
+    @on-tree-click="handleTreeClick"
+    @on-load="load"
+    @on-add="handleAdd"
+    @on-edit="handleEdit"
+    @on-delete="handleDelete"
+    @on-form-submit="handleOk"
+    @on-form-cancel="handleCancel"
+  ></quick-crud>
+</template>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/dictionaryType/index.scss b/src/views/dictionaryType/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5ed1aa9c874ff08a3936444f0b1eb4fc1ed012e8
--- /dev/null
+++ b/src/views/dictionaryType/index.scss
@@ -0,0 +1,12 @@
+.action {
+    margin-bottom: 10px;
+  }
+  .demo-pagination-block + .demo-pagination-block {
+    margin-top: 10px;
+  }
+  .demo-pagination-block .demonstration {
+    margin-bottom: 16px;
+  }
+  .el-pagination {
+    margin-top: 10px;
+  }
\ No newline at end of file
diff --git a/src/views/dictionaryType/index.ts b/src/views/dictionaryType/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ebf9ee58f779bd84bbeb511b5a6c4b575abded13
--- /dev/null
+++ b/src/views/dictionaryType/index.ts
@@ -0,0 +1,113 @@
+import { reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Column } from '../../types/table'
+import { FormItem, FormTitle } from '../../types/form'
+import { DictionaryType } from '../../types/dictionaryType'
+import {
+  addDictionaryType,
+  updateDictionaryType,
+  removeDictionaryType,
+  getDictionaryTypeList,
+} from '../../api/dictionaryType'
+/**
+ * 属性
+ */
+export const dataList: DictionaryType[] = reactive([])
+export const form: DictionaryType = reactive({
+  id: '',
+  dicTypeId: '',
+  name: '',
+})
+export const formTitle: FormTitle = reactive({
+  add: '创建字典分类',
+  edit: '修改字典分类',
+  detail: '字典分类详情',
+})
+export const formItems: FormItem[] = reactive([
+  {
+    label: '分类编号',
+    labelWidth: '80px',
+    vModel: 'dicTypeId',
+    placeholder: '分类编号',
+    editReadonly: true,
+  },
+  {
+    label: '分类名称',
+    labelWidth: '80px',
+    vModel: 'name',
+    placeholder: '分类名称',
+  },
+])
+export const columns: Column[] = reactive([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '分类编号',
+    prop: 'dicTypeId',
+    width: '200',
+  },
+  {
+    label: '字典分类',
+    prop: 'name',
+  },
+])
+/**
+ * 函数
+ */
+export const load = () => {
+  getDictionaryTypeList().then((res) => {
+    const { data: dictionaryTypeList } = res
+    dataList.length = 0
+    dataList.push(...dictionaryTypeList)
+  })
+}
+export const handleAdd = () => {
+  form.dicTypeId = ''
+  form.id = ''
+  form.name = ''
+}
+export const handleEdit = (item: DictionaryType) => {
+  form.dicTypeId = item.dicTypeId
+  form.id = item.id
+  form.name = item.name
+}
+
+export const handleDelete = (item: DictionaryType, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.name}】的字典分类吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    removeDictionaryType(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典分类删除成功',
+      })
+      done()
+    })
+  })
+}
+export const handleCancel = () => {
+  console.log('handleCancel')
+}
+export const handleOk = (item: DictionaryType, done: any) => {
+  if (item.id) {
+    updateDictionaryType(item).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典分类修改成功',
+      })
+      done()
+    })
+  } else {
+    addDictionaryType(item).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典分类创建成功',
+      })
+      done()
+    })
+  }
+}
diff --git a/src/views/dictionaryType/index.vue b/src/views/dictionaryType/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa2859671119875e0970061812e2a8b3a48afee5
--- /dev/null
+++ b/src/views/dictionaryType/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import QuickCrud from '../../components/QuickCrud/index.vue'
+import {
+  dataList,
+  columns,
+  formItems,
+  formTitle,
+  form,
+  load,
+  handleAdd,
+  handleEdit,
+  handleDelete,
+  handleOk,
+  handleCancel,
+} from './index'
+</script>
+<template>
+  <quick-crud
+    :table-data="dataList"
+    :table-columns="columns"
+    :form-model="form"
+    :form-items="formItems"
+    :form-title="formTitle"
+    @on-load="load"
+    @on-add="handleAdd"
+    @on-edit="handleEdit"
+    @on-delete="handleDelete"
+    @on-form-submit="handleOk"
+    @on-form-cancel="handleCancel"
+  ></quick-crud>
+</template>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 672fb167393a52a8bd59586812ffbee7de784cf1..b4e4cdab78050c602735770296173801e7ef9fc5 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,5 @@
-<script setup lang="ts"></script>
-
+<script lang="ts" setup></script>
 <template>
-  <div>首页</div>
+  <div>qucik首页</div>
 </template>
-
 <style lang="scss" scoped></style>
diff --git a/src/views/personalInfo/idnex.ts b/src/views/personalInfo/idnex.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8bac737afcfa99612d8a02ddd4a56343639ffd59
--- /dev/null
+++ b/src/views/personalInfo/idnex.ts
@@ -0,0 +1,89 @@
+import { reactive, ref } from 'vue'
+import { ElMessage, UploadProps } from 'element-plus'
+import { FormItem } from '../../types/form'
+import { User } from '../../types/user'
+import { useUserStore } from '../../store/modules/user'
+/**
+ * 上传
+ */
+const imageUrl = ref('')
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+  response,
+  uploadFile
+) => {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+}
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg') {
+    ElMessage.error('Avatar picture must be JPG format!')
+    return false
+  }
+  if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('Avatar picture size can not exceed 2MB!')
+    return false
+  }
+  return true
+}
+/**
+ * 属性
+ */
+export const userStore = useUserStore()
+export const form = reactive<User>({
+  userId: '',
+  avatar: '',
+  fullName: '',
+  userName: '',
+  phone: '',
+  email: '',
+  address: '',
+})
+export const formItems = reactive<Array<FormItem>>([
+  {
+    label: '头像',
+    labelWidth: '80px',
+    vModel: 'avatar',
+    placeholder: '头像',
+    type: 'avatar',
+    actionUrl: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
+    imgUrl: '',
+    success: handleAvatarSuccess,
+    beforeUpload: beforeAvatarUpload,
+  },
+  {
+    label: '姓名',
+    labelWidth: '80px',
+    vModel: 'fullName',
+    placeholder: '姓名',
+  },
+  {
+    label: '用户名',
+    labelWidth: '80px',
+    vModel: 'userName',
+    placeholder: '用户名',
+  },
+  {
+    label: '手机号',
+    labelWidth: '80px',
+    vModel: 'phone',
+    type: 'phone',
+    placeholder: '手机号',
+  },
+  {
+    label: '邮箱',
+    labelWidth: '80px',
+    vModel: 'email',
+    type: 'email',
+    placeholder: '邮箱',
+  },
+  {
+    label: '地址',
+    labelWidth: '80px',
+    vModel: 'address',
+    placeholder: '地址',
+  },
+])
+/**
+ * 函数
+ */
+export const handleSubmit = () => {}
+export const handleClear = () => {}
diff --git a/src/views/personalInfo/index.scss b/src/views/personalInfo/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bcbb6671731d620fd81b5e4326e1c6fae99a35a4
--- /dev/null
+++ b/src/views/personalInfo/index.scss
@@ -0,0 +1,3 @@
+.personalInfo{
+    width: 50%;
+}
\ No newline at end of file
diff --git a/src/views/personalInfo/index.vue b/src/views/personalInfo/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc9edb492faab9681e9693352347027b08e0bc16
--- /dev/null
+++ b/src/views/personalInfo/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import QuickForm from '../../components/QuickForm/index.vue'
+import { userStore, form, formItems, handleSubmit, handleClear } from './idnex'
+
+onMounted(() => {
+  const { user } = userStore.$state
+  form.avatar = user.avatar
+  form.fullName = user.fullName
+  form.userName = user.userName
+  form.phone = user.phone
+  form.email = user.email
+  form.address = user.address
+})
+</script>
+
+<template>
+  <div class="personalInfo">
+    <quick-form
+      :model="form"
+      :form-items="formItems"
+      @submit="handleSubmit"
+      @clear="handleClear"
+    >
+    </quick-form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/views/user/index.ts b/src/views/user/index.ts
index 7bfad20c6294e7ac484f3f9d2ace5a1b31781d02..32b5c07fa8f99a1f7d549e75a084fce10138bebd 100644
--- a/src/views/user/index.ts
+++ b/src/views/user/index.ts
@@ -1,149 +1,225 @@
-import { reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
 import { Column } from '../../types/table'
 import { FormItem, FormTitle } from '../../types/form'
 import { Page } from '../../types/page'
-import { User } from '../../types/user'
-import {
-  getUserPageList,
-  getUserList,
-  addUser,
-  updateUser,
-  deleteUser,
-} from '../../api/user'
+import { SearchUser, User } from '../../types/user'
+import { useUserStore } from '../../store/modules/user'
+import { addUser, updateUser, deleteUser } from '../../api/user'
+/**
+ * 表单验证
+ */
+const validateUserName = (rule: any, value: string, callback: any) => {
+  const reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
+  if (!reg.test(value)) {
+    callback(new Error('非法用户名'))
+  }
+}
+const validateFullName = (rule: any, value: string, callback: any) => {
+  const reg = /^[\u4e00-\u9fa5]{2,4}$/
+  if (!reg.test(value)) {
+    callback(new Error('非法姓名'))
+  }
+}
+const validatePhone = (rule: any, value: string, callback: any) => {
+  const reg =
+    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+  if (!reg.test(value)) {
+    callback(new Error('非法手机号'))
+  }
+}
+const validateEmail = (rule: any, value: string, callback: any) => {
+  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
+  if (!reg.test(value)) {
+    callback(new Error('非法邮箱'))
+  }
+}
+
 /**
  * 属性
  */
-export const dataList: User[] = reactive([])
-export const searchForm = reactive({})
-export const form: User = reactive({
-  user_id: '',
-  user_name: '',
+const userStore = useUserStore()
+export const dataList = reactive<Array<User>>([])
+export const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+export const form = reactive<User>({
+  id: '',
+  userId: '',
+  userName: '',
   password: '',
-  email: '',
-  address: '',
-  create_time: '',
+  createTime: '',
 })
-export const page: Page = reactive({
+export const page = reactive<Page>({
   current: 1,
   size: 10,
   total: 0,
   sizes: [10, 20, 30, 40],
 })
-export const formTitle: FormTitle = reactive({
+export const formTitle = reactive<FormTitle>({
   add: '创建用户',
   edit: '修改用户',
   detail: '用户详情',
 })
-export const searchFormItems: FormItem[] = reactive([
+export const searchFormItems = reactive<Array<FormItem>>([
   {
     label: '用户名',
-    vModel: 'user_name',
+    vModel: 'userName',
+    placeholder: '用户名',
   },
 ])
-export const formItems: FormItem[] = reactive([
+export const formItems = reactive<Array<FormItem>>([
   {
     label: '用户编号',
     labelWidth: '80px',
-    vModel: 'user_id',
-    addHidden: true,
+    vModel: 'userId',
     editReadonly: true,
+    placeholder: '用户编号',
+    prop: 'userId',
+    rules: [
+      {
+        required: true,
+        message: '用户编号不能为空',
+        trigger: 'blur',
+      },
+    ],
   },
   {
     label: '用户名',
     labelWidth: '80px',
-    vModel: 'user_name',
-    autocomplete: 'off',
+    vModel: 'userName',
+    placeholder: '用户名',
+    prop: 'userName',
+    rules: [
+      {
+        required: true,
+        message: '用户名不能为空',
+        trigger: 'blur',
+        // validate: validateUserName,
+      },
+    ],
+  },
+  {
+    label: '姓名',
+    labelWidth: '80px',
+    vModel: 'fullName',
+    placeholder: '姓名',
+    // rules: [{ validator: validateFullName, trigger: 'blur' }],
+  },
+  {
+    label: '手机号',
+    labelWidth: '80px',
+    vModel: 'phone',
+    placeholder: '手机号',
+    // rules: [{ validator: validatePhone, trigger: 'blur' }],
   },
   {
     label: '邮箱',
     labelWidth: '80px',
     vModel: 'email',
+    placeholder: '邮箱',
+    // rules: [{ validator: validateEmail, trigger: 'blur' }],
   },
   {
     label: '地址',
     labelWidth: '80px',
     vModel: 'address',
+    placeholder: '地址',
+  },
+  {
+    label: '备注',
+    labelWidth: '80px',
+    vModel: 'remark',
+    placeholder: '备注',
+    type: 'textarea',
   },
 ])
-export const columns: Column[] = reactive([
+export const columns = reactive<Array<Column>>([
   {
     width: '100',
     type: 'selection',
     align: 'center',
   },
   {
-    label: '编号',
-    prop: 'user_id',
+    label: '用户编号',
+    prop: 'userId',
     width: '100',
-    format: (row: User) => {
-      return `bh_${row.user_id}`
-    },
   },
   {
     label: '用户名',
-    prop: 'user_name',
+    prop: 'userName',
     width: '100',
   },
+  {
+    label: '姓名',
+    prop: 'fullName',
+    width: '100',
+  },
+  {
+    label: '手机号',
+    prop: 'phone',
+    width: '180',
+  },
   {
     label: '邮箱',
     prop: 'email',
-    width: '300',
+    width: '200',
   },
   {
     label: '创建时间',
-    prop: 'create_time',
-    width: '300',
+    prop: 'createTime',
+    width: '200',
   },
   {
     label: '地址',
     prop: 'address',
+    width: '200',
+  },
+  {
+    label: '备注',
+    prop: 'remark',
   },
 ])
 /**
  * 函数
  */
 export const load = (parmas: object) => {
-  getUserPageList(parmas).then((res) => {
-    const { payload, pagination } = res
-    page.total = pagination.total
-    dataList.length = 0
-    dataList.push(...payload)
+  userStore.getUserPageList(parmas).then((res) => {
+    const { page: pagination } = res
+    const { userList } = userStore.$state
+    if (userList) {
+      dataList.length = 0
+      dataList.push(...userList)
+    }
+    if (pagination) {
+      page.total = pagination.total
+    }
   })
-  // getUserList().then((res: any) => {
-  //   const { payload } = res
-  //   dataList.length = 0
-  //   dataList.push(...payload)
-  // })
 }
 export const handleSearch = () => {
   console.log('handleSearch!')
 }
-export const handleReset = () => {
-  console.log('handleReset!')
+export const handleClear = () => {
+  console.log('handleClear!')
 }
 export const handleAdd = () => {
-  form.user_id = ''
-  form.user_name = ''
-  form.email = ''
-  form.create_time = ''
-  form.address = ''
+  Object.keys(form).forEach((key) => {
+    form[key] = ''
+  })
 }
 export const handleEdit = (item: User) => {
-  form.user_id = item.user_id
-  form.user_name = item.user_name
-  form.email = item.email
-  form.create_time = item.create_time
-  form.address = item.address
+  Object.keys(item).forEach((key) => {
+    form[key] = item[key]
+  })
 }
 
 export const handleDelete = (item: User, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.user_name}】的用户吗？`, '警告', {
+  ElMessageBox.confirm(`你真的删除【${item.userName}】的用户吗？`, '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
   }).then(() => {
-    deleteUser(item.user_id).then(() => {
+    deleteUser(item.id).then(() => {
       ElMessage({
         type: 'success',
         message: '用户删除成功',
@@ -155,24 +231,32 @@ export const handleDelete = (item: User, done: any) => {
 export const handleCancel = () => {
   console.log('handleCancel')
 }
-export const handleOk = (item: User, done: any) => {
-  if (item.user_id) {
-    updateUser(item).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '用户修改成功',
+export const handleOk = (formRef: FormInstance, item: User, done: any) => {
+  if (!formRef) return
+  formRef.validate((valid) => {
+    if (!valid) {
+      console.log('error submit!')
+      return false
+    }
+    console.log('submit!')
+    if (item.id) {
+      updateUser(item).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '用户修改成功',
+        })
+        done()
       })
-      done()
-    })
-  } else {
-    addUser(item).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '用户创建成功',
+    } else {
+      addUser(item).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '用户创建成功',
+        })
+        done()
       })
-      done()
-    })
-  }
+    }
+  })
 }
 export const handleSizeChange = (val: number) => {
   console.log(`${val} items per page`)
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 5f6d68f1c4d3056b6b036d756ad9f3874e3f7b89..e9d2148fdfd776a51d25725763d6d91ea070793a 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -14,7 +14,7 @@ import {
   handleEdit,
   handleDelete,
   handleSearch,
-  handleReset,
+  handleClear,
   handleOk,
   handleCancel,
   handleSizeChange,
@@ -30,13 +30,15 @@ import {
     :search-form-model="searchForm"
     :search-form-items="searchFormItems"
     :form-title="formTitle"
+    :show-search="true"
+    :show-page="true"
     :page="page"
     @on-load="load"
     @on-add="handleAdd"
     @on-edit="handleEdit"
     @on-delete="handleDelete"
     @on-search-form-submit="handleSearch"
-    @on-search-form-reset="handleReset"
+    @on-search-form-clear="handleClear"
     @on-form-submit="handleOk"
     @on-form-cancel="handleCancel"
     @on-size-change="handleSizeChange"