diff --git a/src/api/modules/auth/client.ts b/src/api/modules/auth/client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..844c9a9e582962cc51e45c86d0811a059baaad59
--- /dev/null
+++ b/src/api/modules/auth/client.ts
@@ -0,0 +1,24 @@
+import axios from "axios";
+import { ExampleClient } from "@/types/modules/auth";
+
+const contentPath = '/auth/client'
+
+export function create(client: ExampleClient) {
+  return axios.post<boolean>(`${contentPath}`, client)
+}
+
+export function update(client: ExampleClient) {
+  return axios.put<boolean>(`${contentPath}`, client)
+}
+
+export function deleteById(id: string) {
+  return axios.delete<boolean>(`${contentPath}/${id}`)
+}
+
+export function findById(id: string) {
+  return axios.get<ExampleClient>(`${contentPath}/${id}`)
+}
+
+export function findList() {
+  return axios.get<ExampleClient[]>(`${contentPath}/list`)
+}
diff --git a/src/api/modules/auth/oauth.ts b/src/api/modules/auth/oauth.ts
index 8579d067511583e4f375b5d3bccd4d0d2d561c71..dce964e4e4a4974f0e57e801e89b98a7423c419c 100644
--- a/src/api/modules/auth/oauth.ts
+++ b/src/api/modules/auth/oauth.ts
@@ -3,7 +3,6 @@ import qs from "query-string";
 import { grantTypes, client } from '@/config/website.json'
 import type { LoginData, OAuth2AccessToken, UserToken } from '@/types/modules/auth'
 import { Pageable, Pagination } from '@/types/global'
-import { ExampleClient } from "@/types/modules/auth";
 
 const contentPath = '/auth/oauth'
 
@@ -40,23 +39,3 @@ export function tokenWithPagination(pageable: Pageable) {
     }
   })
 }
-
-export function createClient(client: ExampleClient) {
-  return axios.post<boolean>(`${contentPath}/client`, client)
-}
-
-export function updateClient(client: ExampleClient) {
-  return axios.put<boolean>(`${contentPath}/client`, client)
-}
-
-export function deleteClientById(id: string) {
-  return axios.delete<boolean>(`${contentPath}/client/${id}`)
-}
-
-export function findClientById(id: string) {
-  return axios.get<ExampleClient>(`${contentPath}/client/${id}`)
-}
-
-export function findClientList() {
-  return axios.get<ExampleClient[]>(`${contentPath}/client/list`)
-}
diff --git a/src/api/modules/system/dict.ts b/src/api/modules/system/dict.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2775dc648fc5c8568578ca8c1d9c6236dde71902
--- /dev/null
+++ b/src/api/modules/system/dict.ts
@@ -0,0 +1,38 @@
+import axios from "axios";
+import { Pageable, Pagination } from '@/types/global'
+import { DictDto, DictItemVo, DictQry, DictVo } from '@/types/modules/system'
+
+const contentPath = '/system/dict'
+
+export function create(dictDto: DictDto) {
+  return axios.post<boolean>(`${contentPath}`, dictDto)
+}
+
+export function addItem(id: number, dictItemDto: DictItemVo) {
+  return axios.post(`${contentPath}/${id}/item`, dictItemDto)
+}
+
+export function update(dictDto: DictDto) {
+  return axios.put<boolean>(`${contentPath}`, dictDto)
+}
+
+export function deleteById(id: number) {
+  return axios.delete<boolean>(`${contentPath}/${id}`)
+}
+
+export function findById(id: number) {
+  return axios.get<DictVo>(`${contentPath}/${id}`)
+}
+
+export function listWithPagination(pageable: Pageable, qry: DictQry) {
+  return axios.get<Pagination<DictVo>>(`${contentPath}/pagination`, {
+    params: {
+      ...pageable,
+      ...qry
+    }
+  })
+}
+
+export function findAllItemByDictId(id: number) {
+  return axios.get<DictItemVo[]>(`${contentPath}/${id}/item`)
+}
diff --git a/src/types/modules/system.ts b/src/types/modules/system.ts
index 7ed6dee76aa483c098dc7afc4f3fa8625328a262..0e7ebdbddff6f2b27b3149bf88e29846e17f73ba 100644
--- a/src/types/modules/system.ts
+++ b/src/types/modules/system.ts
@@ -145,3 +145,35 @@ export interface DeptVo {
   createTime?: number
   updateTime?: number
 }
+
+export interface DictDto {
+  id: number
+  name: string
+  code: string
+}
+
+export interface DictVo {
+  id: number
+  name: string
+  code: string
+  createTime: string
+  updateTime: string
+}
+
+export interface DictQry {
+  name: string
+  code: string
+}
+
+export interface DictItemVo {
+  id: number
+  dictId: number
+  name: string
+  value: string
+}
+export interface DictItemDto {
+  id: number
+  dictId: number
+  name: string
+  value: string
+}
diff --git a/src/views/system/client/components/client-drawer.vue b/src/views/system/client/components/client-drawer.vue
index 54d4bc385da1a1df7670ab0eaf21874cf588bfd3..54afc0a6f0240832b8b39387df682e733e8d1e63 100644
--- a/src/views/system/client/components/client-drawer.vue
+++ b/src/views/system/client/components/client-drawer.vue
@@ -82,8 +82,8 @@ import useLoading from "@/hooks/loading";
 import { Operation } from "@/types/global";
 import { ExampleClient } from "@/types/modules/auth";
 import { ValidatedError } from "@arco-design/web-vue/es/form/interface";
-import { createClient, findClientById, updateClient } from "@/api/modules/auth/oauth";
 import { Message } from "@arco-design/web-vue";
+import { create, findById, update } from "@/api/modules/auth/client";
 
 const defaultFormData = () => ({
   clientId: undefined,
@@ -110,7 +110,7 @@ const createHandle = async () => {
 }
 
 const updateHandle = async (id: string) => {
-  const { data } = await findClientById(id)
+  const { data } = await findById(id)
   formData.value  = {
     ...data
   }
@@ -119,7 +119,7 @@ const updateHandle = async (id: string) => {
 }
 
 const previewHandle = async (id: string) => {
-  formData.value = (await findClientById(id)).data
+  formData.value = (await findById(id)).data
   openModel('预览客户端信息', true, false, Operation.PREVIEW)
 }
 
@@ -138,13 +138,13 @@ const handleOk = async () => {
       clientDrawerForm.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
         if (!errors) {
           if (dataModel.type === Operation.CREATE) {
-            await createClient(formData.value)
+            await create(formData.value)
             Message.success({
               content: "添加成功",
               duration: 2000
             });
           } else if (dataModel.type === Operation.UPDATE) {
-            await updateClient(formData.value)
+            await update(formData.value)
             Message.success({
               content: "修改成功",
               duration: 2000
diff --git a/src/views/system/client/index.vue b/src/views/system/client/index.vue
index fcced1fd7a9339293dd8ccab6169b73d96a0df1c..093df46b2b87f7f12d3c44fe050847cadc065dec 100644
--- a/src/views/system/client/index.vue
+++ b/src/views/system/client/index.vue
@@ -43,7 +43,7 @@ import { onMounted, ref } from "vue";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import ClientDrawer from "@/views/system/client/components/client-drawer.vue";
 import useLoading from "@/hooks/loading";
-import { deleteClientById, findClientList } from "@/api/modules/auth/oauth";
+import { deleteById, findList } from "@/api/modules/auth/client";
 import { ExampleClient } from "@/types/modules/auth";
 
 const tableColumns = [{
@@ -118,14 +118,14 @@ const { loading, setLoading } = useLoading();
 
 const refresh = async () => {
   setLoading(true)
-  tbData.value = (await findClientList()).data
+  tbData.value = (await findList()).data
   setLoading(false)
 }
 
 const onDelete = async (clientId: string) => {
   try {
     setLoading(true)
-    await deleteClientById(clientId)
+    await deleteById(clientId)
     setLoading(false)
   } finally {
     await refresh()
diff --git a/src/views/system/dict/components/dict-drawer.vue b/src/views/system/dict/components/dict-drawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..736721a2cdb58997cfa498d1272ad15f776c3f53
--- /dev/null
+++ b/src/views/system/dict/components/dict-drawer.vue
@@ -0,0 +1,129 @@
+<template>
+  <a-drawer
+    :width="340"
+    :mask-closable="false"
+    :visible="dataModel.visible"
+    unmount-on-close
+    :ok-loading="loading"
+    @ok="handleOk"
+    @cancel="handleCancel">
+    <template #title>
+      {{ dataModel.title }}
+    </template>
+    <div>
+      <a-form
+        ref="dictDrawerForm"
+        layout="vertical"
+        :model="formData"
+        :disabled="dataModel.disabled"
+        :style="{width:'100%'}">
+        <a-form-item
+          field="name"
+          label="字典名"
+          :rules="[{required: true, message:'请输入字典名'}]">
+          <a-input v-model="formData.name" placeholder="请输入角色名..." allow-clear />
+        </a-form-item>
+        <a-form-item
+          field="code"
+          label="字典键"
+          :rules="[{required: true, message:'请输入字典键'}]">
+          <a-input v-model="formData.code" placeholder="请输入字典键..." allow-clear />
+        </a-form-item>
+      </a-form>
+    </div>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import useDataModel from '@/hooks/data-model'
+import useLoading from '@/hooks/loading'
+import { Operation } from '@/types/global'
+import { ref } from 'vue'
+import { DictDto } from '@/types/modules/system'
+import { create, findById, update } from '@/api/modules/system/dict'
+import { ValidatedError } from '@arco-design/web-vue/es/form/interface'
+import { Message } from '@arco-design/web-vue'
+
+const defaultFormData = () => ({
+  id: -1,
+  name: "",
+  code: "",
+});
+
+const dictDrawerForm = ref<any>(null)
+const formData = ref<DictDto>(defaultFormData());
+const { dataModel, openModel, closeModel } = useDataModel();
+const { loading, setLoading } = useLoading();
+const emit = defineEmits(["refresh"]);
+
+const handleCancel = () => {
+  closeModel();
+  formData.value = defaultFormData()
+  setLoading(false);
+};
+
+const createHandle = async () => {
+  openModel("添加字典信息", false, true, Operation.CREATE);
+}
+
+const updateHandle = async (id: number) => {
+  formData.value = {
+    ...(await findById(id)).data
+  }
+  openModel("编辑字典信息", false, true, Operation.UPDATE);
+}
+
+const previewHandle = async (id: number) => {
+  formData.value = {
+    ...(await findById(id)).data
+  }
+  openModel("预览字典信息", true, false, Operation.PREVIEW);
+}
+
+const handleOk = async () => {
+  if (dataModel.submit) {
+    setLoading(true);
+    if (dictDrawerForm.value) {
+      dictDrawerForm.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+        if (!errors) {
+          if (dataModel.type === Operation.CREATE) {
+            await create(formData.value);
+            Message.success({
+              content: "添加成功",
+              duration: 2000
+            });
+          } else if (dataModel.type === Operation.UPDATE) {
+            await update(formData.value);
+            Message.success({
+              content: "修改成功",
+              duration: 2000
+            });
+          }
+
+          setLoading(false);
+          handleCancel();
+          emit("refresh");
+        } else {
+          setTimeout(() => {
+            setLoading(false);
+          }, 1000);
+        }
+      });
+    }
+  } else {
+    handleCancel();
+  }
+};
+
+defineExpose({ createHandle, updateHandle, previewHandle });
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DictDrawer'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/dict/components/dict-item-drawer.vue b/src/views/system/dict/components/dict-item-drawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53a548c9313ce178ba1f6f29d8a7ee394d9c5014
--- /dev/null
+++ b/src/views/system/dict/components/dict-item-drawer.vue
@@ -0,0 +1,117 @@
+<template>
+  <a-drawer
+    :width="500"
+    :mask-closable="false"
+    :visible="dataModel.visible"
+    unmount-on-close
+    ok-text="保存"
+    :ok-loading="loading"
+    @ok="handleOk"
+    @cancel="handleCancel">
+    <template #title>
+      {{ dataModel.title }}
+    </template>
+    <div>
+      <a-button type="primary" @click="addItem">
+        <template #icon>
+          <icon-plus />
+        </template>
+        添加项
+      </a-button>
+      <a-table :columns="tbColumns" :data="tbData" style="margin-top: 20px"/>
+    </div>
+  </a-drawer>
+</template>
+
+<script setup lang="tsx">
+import useDataModel from '@/hooks/data-model'
+import useLoading from '@/hooks/loading'
+import { Operation } from '@/types/global'
+import { ref } from 'vue'
+import { DictItemVo } from '@/types/modules/system'
+import { addItem as addDictItem, findAllItemByDictId } from '@/api/modules/system/dict'
+import { Message } from '@arco-design/web-vue'
+
+const tbData = ref<DictItemVo[]>()
+const tbColumns = [
+  {
+    title: '字典名',
+    render: ({ rowIndex }: { record: any }) => {
+      return <>
+        <a-input v-model={tbData.value[rowIndex].name} />
+      </>
+    }
+  }, {
+    title: '字典值',
+    render: ({ rowIndex }: { record: any }) => {
+      return <>
+        <a-input v-model={tbData.value[rowIndex].value} />
+      </>
+    }
+  }, {
+    title: '操作',
+    render: ({ record, rowIndex }: { record: any }) => {
+      return <>
+        <a-popconfirm content={`确定删除 '${record.value || ''}' 吗?`} type="warning" onOk={() => removeItem(rowIndex)}>
+          <a-button type="text" size="small" status="danger">
+            删除
+          </a-button>
+        </a-popconfirm>
+      </>
+    }
+  }
+]
+
+
+const dictId = ref<number>(-1)
+const { dataModel, openModel, closeModel } = useDataModel();
+const { loading, setLoading } = useLoading();
+
+const handleCancel = () => {
+  closeModel();
+  setLoading(false);
+};
+
+
+const openHandle = async (code: string, id: number) => {
+  dictId.value = id
+  tbData.value = (await findAllItemByDictId(id)).data
+  openModel(`${code}字典项`, false, true, Operation.UPDATE);
+}
+
+const addItem = () => {
+  if (tbData.value?.length === 0 || (tbData.value[tbData.value?.length - 1].value && tbData.value[tbData.value?.length - 1].name)) {
+    tbData.value?.push({})
+  }
+}
+
+const removeItem = (index: number) => {
+  tbData.value?.splice(index, 1)
+}
+
+
+const handleOk = async () => {
+  try {
+    setLoading(true)
+    await addDictItem(dictId.value, tbData.value)
+    Message.success({
+      content: "保存成功",
+      duration: 2000
+    });
+  } finally {
+    setLoading(false)
+  }
+};
+
+defineExpose({ openHandle });
+</script>
+
+<script lang="tsx">
+export default {
+  name: 'DictItemDrawer'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..34c7285e346c22fa96658ee13746d683f01a5619
--- /dev/null
+++ b/src/views/system/dict/index.vue
@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <Breadcrumb :items="['系统管理', '字典管理']" />
+    <a-card class="general-card" title="字典管理">
+      <template #extra>
+        <a-space direction="horizontal" :size="18">
+          <a-button type="primary" :loading="loading" @click="refresh()">
+            <template #icon>
+              <icon-search />
+            </template>
+            搜索
+          </a-button>
+          <a-button>
+            <template #icon>
+              <icon-refresh />
+            </template>
+            重置
+          </a-button>
+        </a-space>
+      </template>
+      <a-form
+        ref="dictSearchModel"
+        :model="searchModel"
+        :label-col-props="{ span: 6 }"
+        :wrapper-col-props="{ span: 18 }"
+        label-align="left"
+      >
+        <a-row :gutter="16">
+          <a-col :xs="24" :sm="20" :md="12" :lg="8">
+            <a-form-item field="name" label="字典名">
+              <a-input
+                v-model="searchModel.name"
+                allow-clear
+                placeholder="字典名"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :sm="20" :md="12" :lg="8">
+            <a-form-item field="code" label="字典编码">
+              <a-input
+                v-model="searchModel.code"
+                allow-clear
+                placeholder="字典编码"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <!--分割线-->
+      <a-divider direction="horizontal" />
+      <a-row style="margin-bottom: 16px">
+        <a-col :span="16">
+          <a-space>
+            <a-button type="primary" @click="onCreate">
+              <template #icon>
+                <icon-plus />
+              </template>
+              添加
+            </a-button>
+          </a-space>
+        </a-col>
+        <a-col :span="8" style="text-align: right">
+          <a-button>
+            <template #icon>
+              <icon-download />
+            </template>
+            下载
+          </a-button>
+        </a-col>
+      </a-row>
+
+      <a-table
+        :columns="tableColumns"
+        :data="tbData"
+        :loading="loading"
+        row-key="id"
+        :pagination="pagination"
+        @page-change="onPageChange"
+        @page-size-change="onPageSizeChange"/>
+    </a-card>
+
+    <dict-drawer ref="dictDrawer" @refresh="refresh"/>
+    <dict-item-drawer ref="dictItemDrawer"/>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { onMounted, ref } from 'vue'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import DictDrawer from '@/views/system/dict/components/dict-drawer.vue'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import DictItemDrawer from '@/views/system/dict/components/dict-item-drawer.vue'
+import { PaginationProps } from '@arco-design/web-vue'
+import useLoading from '@/hooks/loading'
+import usePaging from '@/hooks/paging'
+import { listWithPagination, deleteById } from '@/api/modules/system/dict'
+import { DictQry, DictVo } from '@/types/modules/system'
+import dayjs from 'dayjs'
+
+const tableColumns = [{
+  title: '序号',
+  dataIndex: 'id'
+}, {
+  title: "字典名",
+  dataIndex: "name",
+}, {
+  title: '字典编码',
+  dataIndex: 'code'
+}, {
+  title: '创建时间',
+  render: ({ record }: { record: any }) => {
+    return dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
+  }
+}, {
+  title: '修改时间',
+  render: ({ record }: { record: any }) => {
+    return dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss')
+  }
+}, {
+  title: "操作",
+  width: 330,
+  align: "right",
+  fixed: "right",
+  render: ({ record }: { record: any }) => {
+    return <>
+      <a-button
+        type="text"
+        size="small"
+        v-slots={{
+          icon: () => <icon-drag-dot />,
+          default: () => '字典项'
+        }}
+        onClick={() => onOpenDictItem(record.code, record.id)}
+      >
+        字典项
+      </a-button>
+      <a-button type="text" size="small" onClick={() => onPreview(record.id)}>
+        预览
+      </a-button>
+      <a-button type="text" size="small" onClick={() => onUpdate(record.id)}>
+        编辑
+      </a-button>
+      <a-popconfirm content={`确定删除 '${record.name}' 吗?`} type="warning" onOk={() => onDelete(record.id)}>
+        <a-button type="text" size="small" status="danger">
+          删除
+        </a-button>
+      </a-popconfirm>
+    </>
+  }
+}]
+const searchModel = ref<DictQry>({});
+const tbData = ref<DictVo[]>([])
+const dictDrawer = ref<any>(null)
+const dictItemDrawer = ref<any>(null)
+const { pageable, setPageable, prevPage } = usePaging();
+const { loading, setLoading } = useLoading();
+const pagination = ref<PaginationProps>({
+  defaultCurrent: 1,
+  defaultPageSize: 10
+});
+
+const onDelete = async (id: number) => {
+  try {
+    await deleteById(id);
+    if (tbData.value.length <= 1) {
+      prevPage();
+    }
+  } finally {
+    await refresh();
+  }
+};
+
+const onCreate = () => {
+  dictDrawer.value.createHandle()
+}
+
+const onOpenDictItem = async (code: string, id: number) => {
+  setLoading(true)
+  await dictItemDrawer.value.openHandle(code, id)
+  setLoading(false)
+}
+const onUpdate = async (id: number) => {
+  setLoading(true)
+  await dictDrawer.value.updateHandle(id)
+  setLoading(false)
+}
+
+const onPreview = async (id: number) => {
+  setLoading(true)
+  await dictDrawer.value.previewHandle(id)
+  setLoading(false)
+}
+
+const refresh = async () => {
+  setLoading(true);
+  const { data } = await listWithPagination(pageable.value, searchModel.value);
+  pagination.value = {
+    current: data.current,
+    pageSize: data.size,
+    total: data.total,
+    showTotal: true,
+    showPageSize: true
+  };
+  tbData.value = data.records;
+  setLoading(false);
+};
+
+const onPageChange = (page: number) => {
+  setPageable(page - 1, pageable.value.size);
+  refresh();
+};
+
+const onPageSizeChange = (pageSize: number) => {
+  setPageable(pageable.value.page, pageSize);
+  refresh();
+};
+
+
+onMounted(() => {
+  refresh()
+})
+</script>
+
+<script lang="tsx">
+export default {
+  name: 'Dict'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/role/components/role-drawer.vue b/src/views/system/role/components/role-drawer.vue
index 908b9281be1c7d2d70f50237fb42b37d98af555a..90e6646db1f09fc7b198dc516101d81c46852e75 100644
--- a/src/views/system/role/components/role-drawer.vue
+++ b/src/views/system/role/components/role-drawer.vue
@@ -47,9 +47,7 @@ import { Operation } from "@/types/global";
 const defaultFormData = () => ({
   id: -1,
   name: "",
-  code: "",
-  parentId: 0,
-  order: 1
+  code: ""
 });
 
 const formData = ref<RoleDto>(defaultFormData());