diff --git a/src/pages/sys/dict/Dict.vue b/src/pages/sys/dict/Dict.vue
new file mode 100644
index 0000000..5d4bf22
--- /dev/null
+++ b/src/pages/sys/dict/Dict.vue
@@ -0,0 +1,36 @@
+<template>
+  <Page class="dict-page">
+    <DictCategory @search-dict="searchDict"/>
+    <ElDivider direction="vertical"/>
+    <DictItem ref="dictItem"/>
+  </Page>
+</template>
+<script lang="ts" setup>
+import Page from '@/components/page/Page.vue'
+import DictCategory from '@/pages/sys/dict/DictCategory.vue'
+import DictItem from '@/pages/sys/dict/DictItem.vue'
+
+const dictItemIns = useTemplateRef<InstanceType<typeof DictItem>>('dictItem')
+
+function searchDict(data: DictTypes.SearchDictResult) {
+  dictItemIns.value?.reload(data)
+}
+
+</script>
+<style lang="stylus" scoped>
+.dict-page {
+  display flex
+  justify-content space-between
+  flex-direction: row;
+  gap: 50px;
+
+  & > div:not(:nth-child(2)) {
+    width 50%
+    box-sizing border-box
+  }
+
+  & > div:nth-child(2) {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/pages/sys/dict/DictForm.vue b/src/pages/sys/dict/DictForm.vue
new file mode 100644
index 0000000..00b5557
--- /dev/null
+++ b/src/pages/sys/dict/DictForm.vue
@@ -0,0 +1,91 @@
+<template>
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close
+    width="25vw">
+    <ElForm :model="dictFormData"
+      class="sys_dict-form"
+      label-width="auto">
+      <ElFormItem label="字典标识">
+        <ElInput
+          v-model="dictFormData.dictKey"
+          :disabled="status === 'view'"
+          placeholder="字典标识"/>
+      </ElFormItem>
+      <ElFormItem label="字典名称">
+        <ElInput
+          v-model="dictFormData.dictName"
+          :disabled="status === 'view'"
+          placeholder="字典名称"/>
+      </ElFormItem>
+      <ElFormItem label="备注">
+        <ElInput
+          v-model="dictFormData.memo"
+          :disabled="status === 'view'"
+          placeholder="备注"/>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
+      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+    </template>
+  </ElDialog>
+</template>
+<script lang="ts" setup>
+import DictApi from '@/pages/sys/dict/dict-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import { ElMessage } from 'element-plus'
+
+const emits = defineEmits([ 'editSucc' ])
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
+const dictFormData = reactive<DictTypes.SearchDictResult>({})
+
+function submitHandler() {
+  if (status.value === 'view') return
+  submiting.value = true
+  if (dictFormData.id != null) {
+    DictApi.modify(dictFormData)
+      .then(() => {
+        ElMessage.success('修改成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  } else {
+    DictApi.add(dictFormData)
+      .then(() => {
+        ElMessage.success('添加成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  }
+}
+
+defineExpose({
+  open(data: DictTypes.SearchDictResult = {}) {
+    showDialog.value = true
+    if (!Strings.isBlank(data.id)) {
+      status.value = 'modify'
+      DictApi.detail(data.id!)
+        .then(res => {
+          Object.assign(dictFormData, res.data)
+        })
+    } else {
+      status.value = 'add'
+      Object.assign(dictFormData, {})
+    }
+  },
+})
+</script>
+<style lang="stylus" scoped>
+.sys_dict-form {
+  padding 20px
+}
+</style>
diff --git a/src/pages/sys/dict/DictItem.vue b/src/pages/sys/dict/DictItem.vue
new file mode 100644
index 0000000..24b74be
--- /dev/null
+++ b/src/pages/sys/dict/DictItem.vue
@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <div class="tool-bar">
+      <ElForm inline @submit.prevent="paging">
+        <ElFormItem>
+          <ElInput
+            v-model="searchForm.dictKey"
+            placeholder="请选择左侧的字典"
+            readonly/>
+        </ElFormItem>
+        <ElFormItem>
+          <ElInput
+            v-model="searchForm.txt"
+            clearable
+            placeholder="请输入要搜索的文字"
+            @clear="reset"/>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton :disabled="Strings.isBlank(currentDict.dictKey)" :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
+          <ElButton :disabled="Strings.isBlank(currentDict.dictKey)" :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+    <ElTable v-loading="searching" :data="tableData"
+      cell-class-name="table-cell"
+      class="table-list"
+      empty-text="暂无数据"
+      header-row-class-name="table-header"
+      row-key="id">
+      <!-- <ElTableColumn label="字典 Id" prop="dictId"/> -->
+
+      <ElTableColumn label="字典标识" prop="dictKey"/>
+
+      <ElTableColumn label="值" prop="val"/>
+
+      <ElTableColumn label="显示文本" prop="txt"/>
+
+      <ElTableColumn label="排序" prop="sort"/>
+
+      <ElTableColumn label="备注" prop="memo"/>
+
+      <ElTableColumn label="操作" width="180">
+        <template #default="scope">
+          <div class="action-btn">
+            <el-popconfirm
+              cancel-button-text="否"
+              cancel-button-type="primary"
+              confirm-button-text="是"
+              confirm-button-type="danger"
+              placement="top"
+              title="是否删除当前数据?"
+              width="180"
+              @confirm="delHandler(scope)">
+              <template #reference>
+                <ElButton :loading="deling" text type="danger">删除</ElButton>
+              </template>
+            </el-popconfirm>
+            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
+          </div>
+        </template>
+      </ElTableColumn>
+    </ElTable>
+    <DictItemForm ref="dictItemForm" @edit-succ="paging"/>
+  </div>
+</template>
+<script lang="ts" setup>
+import DictApi from '@/pages/sys/dict/dict-api.ts'
+import DictItemApi from '@/pages/sys/dict/dict-item-api.ts'
+import { elIcons } from '@/common/element/element.ts'
+import DictItemForm from '@/pages/sys/dict/DictItemForm.vue'
+import Strings from '@/common/utils/strings.ts'
+
+const tableData = ref<DictItemTypes.SearchDictItemResult[]>([])
+const searchForm = reactive<DictItemTypes.SearchDictItemParam>({
+  current: 1,
+  size: 20,
+})
+const searching = ref(false)
+const deling = ref(false)
+const currentDict = reactive<DictTypes.SearchDictResult>({})
+const dictItemFormIns = useTemplateRef<InstanceType<typeof DictItemForm>>('dictItemForm')
+
+function showDialog(data?: DictItemTypes.SearchDictItemResult) {
+  dictItemFormIns.value?.open(data)
+}
+
+function delHandler({row}: { row: DictItemTypes.SearchDictItemResult }) {
+  deling.value = true
+  DictItemApi.del([ row.id! ])
+    .then(() => {
+      ElMessage.success('删除成功')
+      paging()
+    })
+    .finally(() => {
+      deling.value = false
+    })
+}
+
+function modifyHandler({row}: { row: DictItemTypes.SearchDictItemResult }) {
+  showDialog(row)
+}
+
+function addHandler() {
+  if (Strings.isBlank(searchForm.dictKey)) {
+    ElMessage.error('请选择左侧的字典')
+    return
+  }
+  showDialog({dictId: currentDict.id, dictKey: currentDict.dictKey})
+}
+
+function reset() {
+  searchForm.txt = ''
+  paging()
+}
+
+function paging() {
+  if (Strings.isBlank(searchForm.dictKey)) {
+    ElMessage.error('请选择左侧的字典')
+    return
+  }
+  searching.value = true
+  DictApi.obtainDictData(searchForm)
+    .then(res => {
+      tableData.value = res.data ?? []
+    })
+    .finally(() => {
+      searching.value = false
+    })
+}
+
+defineExpose({
+  reload(data: DictTypes.SearchDictResult) {
+    searchForm.dictKey = data.dictKey
+    Object.assign(currentDict, data)
+    paging()
+  },
+})
+</script>
+<style lang="stylus" scoped>
+.table-list {
+  flex 1;
+  width 100%
+
+  :deep(.table-header) {
+    color #454C59
+
+    th {
+      background-color #EDF1F7
+      font-weight 500
+      position relative
+
+      & > div {
+        display flex
+        gap 5px
+        align-items center
+      }
+
+      &:not(:first-child) > div::before {
+        position: absolute;
+        top: 50%;
+        left: 1px;
+        width: 1px;
+        background-color: #D3D7DE;
+        transform: translateY(-50%);
+        content: "";
+        height 50%
+      }
+    }
+  }
+
+  :deep(.table-cell) {
+    color #2F3540
+  }
+
+  .action-btn {
+    width 100%
+    display flex
+    flex-wrap wrap
+
+    & > button {
+      margin 0
+    }
+  }
+}
+
+.tool-bar {
+  display flex
+  justify-content space-between
+  margin 0 0 20px 0
+}
+</style>
diff --git a/src/pages/sys/dict/DictItemForm.vue b/src/pages/sys/dict/DictItemForm.vue
new file mode 100644
index 0000000..dbd95f5
--- /dev/null
+++ b/src/pages/sys/dict/DictItemForm.vue
@@ -0,0 +1,103 @@
+<template>
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close
+    width="25vw">
+    <ElForm :model="dictItemFormData"
+      class="sys_dict_item-form"
+      label-width="auto">
+      <ElFormItem label="值">
+        <ElInput
+          v-model="dictItemFormData.val"
+          :disabled="status === 'view'"
+          placeholder="值"/>
+      </ElFormItem>
+      <ElFormItem label="文本">
+        <ElInput
+          v-model="dictItemFormData.txt"
+          :disabled="status === 'view'"
+          placeholder="文本"/>
+      </ElFormItem>
+      <ElFormItem label="排序">
+        <ElInputNumber
+          v-model="dictItemFormData.sort"
+          :disabled="status === 'view'"
+          :min="1"
+          placeholder="排序"
+          style="width: 100%"/>
+      </ElFormItem>
+      <ElFormItem label="备注">
+        <ElInput
+          v-model="dictItemFormData.memo"
+          :disabled="status === 'view'"
+          placeholder="备注"/>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
+      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+    </template>
+  </ElDialog>
+</template>
+<script lang="ts" setup>
+import DictItemApi from '@/pages/sys/dict/dict-item-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import { ElMessage } from 'element-plus'
+
+const emits = defineEmits([ 'editSucc' ])
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
+const dictItemFormData = reactive<DictItemTypes.SearchDictItemResult>({})
+
+function submitHandler() {
+  if (status.value === 'view') return
+  submiting.value = true
+  if (dictItemFormData.id != null) {
+    DictItemApi.modify(dictItemFormData)
+      .then(() => {
+        ElMessage.success('修改成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  } else {
+    if (Strings.isBlank(dictItemFormData.dictId) || Strings.isBlank(dictItemFormData.dictKey)) {
+      ElMessage.error('未指定字典')
+      return
+    }
+    DictItemApi.add(dictItemFormData)
+      .then(() => {
+        ElMessage.success('添加成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  }
+}
+
+defineExpose({
+  open(data: DictItemTypes.SearchDictItemResult = {}) {
+    showDialog.value = true
+    if (!Strings.isBlank(data.id)) {
+      status.value = 'modify'
+      DictItemApi.detail(data.id!)
+        .then(res => {
+          Object.assign(dictItemFormData, res.data)
+        })
+    } else {
+      status.value = 'add'
+      Object.assign(dictItemFormData, data)
+    }
+  },
+})
+</script>
+<style lang="stylus" scoped>
+.sys_dict_item-form {
+  padding 20px
+}
+</style>
diff --git a/src/pages/sys/dict/dict-api.ts b/src/pages/sys/dict/dict-api.ts
new file mode 100644
index 0000000..b035071
--- /dev/null
+++ b/src/pages/sys/dict/dict-api.ts
@@ -0,0 +1,25 @@
+import {
+  get,
+  post,
+} from '@/common/utils/http-util.ts'
+
+export default {
+  paging(data: DictTypes.SearchDictParam) {
+    return get<G.PageResult<DictTypes.SearchDictResult>>('/dict/paging', data)
+  },
+  detail(id: string) {
+    return get<DictTypes.SearchDictResult>('/dict/detail', {id})
+  },
+  obtainDictData(data: DictItemTypes.SearchDictItemParam) {
+    return get<DictItemTypes.SearchDictItemResult[]>('/dict/dict_data', data)
+  },
+  add(data: DictTypes.AddDictParam) {
+    return post('/dict/add', data)
+  },
+  modify(data: DictTypes.ModifyDictParam) {
+    return post('/dict/modify', data)
+  },
+  del(ids: string[]) {
+    return post('/dict/del', ids)
+  },
+}
diff --git a/src/pages/sys/dict/dict-item-api.ts b/src/pages/sys/dict/dict-item-api.ts
new file mode 100644
index 0000000..6825254
--- /dev/null
+++ b/src/pages/sys/dict/dict-item-api.ts
@@ -0,0 +1,22 @@
+import {
+  get,
+  post,
+} from '@/common/utils/http-util.ts'
+
+export default {
+  paging(data: DictItemTypes.SearchDictItemParam) {
+    return get<G.PageResult<DictItemTypes.SearchDictItemResult>>('/dict_item/paging', data)
+  },
+  detail(id: string) {
+    return get<DictItemTypes.SearchDictItemResult>('/dict_item/detail', {id})
+  },
+  add(data: DictItemTypes.AddDictItemParam) {
+    return post('/dict_item/add', data)
+  },
+  modify(data: DictItemTypes.ModifyDictItemParam) {
+    return post('/dict_item/modify', data)
+  },
+  del(ids: string[]) {
+    return post('/dict_item/del', ids)
+  },
+}
diff --git a/src/pages/sys/dict/dict.d.ts b/src/pages/sys/dict/dict.d.ts
new file mode 100644
index 0000000..cd1a905
--- /dev/null
+++ b/src/pages/sys/dict/dict.d.ts
@@ -0,0 +1,117 @@
+export {}
+declare global {
+  namespace DictTypes {
+    interface SearchDictParam extends G.PageParam {
+      // Id
+      id?: string
+      // 字典标识
+      dictKey?: string
+      // 字典名称
+      dictName?: string
+      // 备注
+      memo?: string
+    }
+
+    interface SearchDictResult {
+      // Id
+      id?: string
+      // 字典标识
+      dictKey?: string
+      // 字典名称
+      dictName?: string
+      // 备注
+      memo?: string
+    }
+
+    interface AddDictParam {
+      // Id
+      id?: string
+      // 字典标识
+      dictKey?: string
+      // 字典名称
+      dictName?: string
+      // 备注
+      memo?: string
+    }
+
+    interface ModifyDictParam {
+      // Id
+      id?: string
+      // 字典标识
+      dictKey?: string
+      // 字典名称
+      dictName?: string
+      // 备注
+      memo?: string
+    }
+  }
+  namespace DictItemTypes {
+    interface SearchDictItemParam extends G.PageParam {
+      // Id
+      id?: string
+      // 字典 Id
+      dictId?: string
+      // 字典标识
+      dictKey?: string
+      // 值
+      val?: string
+      // 显示文本
+      txt?: string
+      // 排序
+      sort?: number
+      // 备注
+      memo?: string
+    }
+
+    interface SearchDictItemResult {
+      // Id
+      id?: string
+      // 字典 Id
+      dictId?: string
+      // 字典标识
+      dictKey?: string
+      // 值
+      val?: string
+      // 显示文本
+      txt?: string
+      // 排序
+      sort?: number
+      // 备注
+      memo?: string
+    }
+
+    interface AddDictItemParam {
+      // Id
+      id?: string
+      // 字典 Id
+      dictId?: string
+      // 字典标识
+      dictKey?: string
+      // 值
+      val?: string
+      // 显示文本
+      txt?: string
+      // 排序
+      sort?: number
+      // 备注
+      memo?: string
+    }
+
+    interface ModifyDictItemParam {
+      // Id
+      id?: string
+      // 字典 Id
+      dictId?: string
+      // 字典标识
+      dictKey?: string
+      // 值
+      val?: string
+      // 显示文本
+      txt?: string
+      // 排序
+      sort?: number
+      // 备注
+      memo?: string
+    }
+  }
+}
diff --git a/src/pages/sys/dict/page.ts b/src/pages/sys/dict/page.ts
new file mode 100644
index 0000000..a3d9da4
--- /dev/null
+++ b/src/pages/sys/dict/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/sys/dict/Dict.vue'),
+} as RouterTypes.RouteConfig
diff --git a/src/pages/sys/role/Role.vue b/src/pages/sys/role/Role.vue
new file mode 100644
index 0000000..84e0df9
--- /dev/null
+++ b/src/pages/sys/role/Role.vue
@@ -0,0 +1,194 @@
+<template>
+  <Page>
+    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
+      <ElFormItem label="角色代码">
+        <ElInput
+          v-model="searchForm.roleCode"
+          placeholder="角色代码"/>
+      </ElFormItem>
+      <ElFormItem label="角色名称">
+        <ElInput
+          v-model="searchForm.roleName"
+          placeholder="角色名称"/>
+      </ElFormItem>
+      <ElFormItem label="备注">
+        <ElInput
+          v-model="searchForm.memo"
+          placeholder="备注"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
+        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
+      </ElFormItem>
+    </ElForm>
+    <div class="tool-bar">
+      <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
+      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
+    </div>
+    <ElTable v-loading="searching" :data="tableData"
+      cell-class-name="table-cell"
+      class="table-list"
+      empty-text="暂无数据"
+      header-row-class-name="table-header"
+      row-key="id">
+      <ElTableColumn label="角色代码" prop="roleCode"/>
+
+      <ElTableColumn label="角色名称" prop="roleName"/>
+
+      <ElTableColumn label="备注" prop="memo"/>
+
+      <ElTableColumn label="操作" width="180">
+        <template #default="scope">
+          <div class="action-btn">
+            <el-popconfirm
+              v-if="scope.row.id != '1'"
+              cancel-button-text="否"
+              cancel-button-type="primary"
+              confirm-button-text="是"
+              confirm-button-type="danger"
+              placement="top"
+              title="是否删除当前数据?"
+              width="180"
+              @confirm="delHandler(scope)">
+              <template #reference>
+                <ElButton :loading="deling" text type="danger">删除</ElButton>
+              </template>
+            </el-popconfirm>
+            <ElButton text type="primary" @click="bindResHandler(scope)">资源</ElButton>
+            <ElButton v-if="scope.row.id != '1'" text type="primary" @cl--ick="modifyHandler(scope)">修改</ElButton>
+          </div>
+        </template>
+      </ElTableColumn>
+    </ElTable>
+    <RoleForm ref="roleForm" @edit-succ="paging"/>
+    <BindRes ref="bindRes"/>
+  </Page>
+</template>
+<script lang="ts" setup>
+import RoleApi from '@/pages/sys/role/role-api.ts'
+import Page from '@/components/page/Page.vue'
+import { elIcons } from '@/common/element/element.ts'
+import RoleForm from '@/pages/sys/role/RoleForm.vue'
+import { ElMessage } from 'element-plus'
+import BindRes from '@/pages/sys/role/BindRes.vue'
+
+const tableData = ref<RoleTypes.SearchRoleResult[]>([])
+const searchForm = reactive<RoleTypes.SearchRoleParam>({
+  current: 1,
+  size: 20,
+})
+const searching = ref(false)
+const deling = ref(false)
+const showSearchForm = ref(true)
+const roleFormIns = useTemplateRef<InstanceType<typeof RoleForm>>('roleForm')
+const bindResIns = useTemplateRef<InstanceType<typeof BindRes>>('bindRes')
+
+function showDialog(data?: RoleTypes.SearchRoleResult) {
+  roleFormIns.value?.open(data)
+}
+
+function delHandler({row}: { row: RoleTypes.SearchRoleResult }) {
+  if (row.id == '1') {
+    ElMessage.error('不能操作管理员')
+    return
+  }
+  deling.value = true
+  RoleApi.del([ row.id! ])
+    .then(() => {
+      ElMessage.success('删除成功')
+      paging()
+    })
+    .finally(() => {
+      deling.value = false
+    })
+}
+
+function bindResHandler({row}: { row: RoleTypes.SearchRoleResult }) {
+  bindResIns.value?.open(row.id!)
+}
+
+function modifyHandler({row}: { row: RoleTypes.SearchRoleResult }) {
+  if (row.id == '1') {
+    ElMessage.error('不能操作管理员')
+    return
+  }
+  showDialog(row)
+}
+
+function addHandler() {
+  showDialog()
+}
+
+function reset() {
+  Object.assign(searchForm, {})
+  paging()
+}
+
+function paging() {
+  searching.value = true
+  RoleApi.paging(searchForm)
+    .then(res => {
+      tableData.value = res.data?.records ?? []
+    })
+    .finally(() => {
+      searching.value = false
+    })
+}
+
+onMounted(() => {
+  paging()
+})
+</script>
+<style lang="stylus" scoped>
+.table-list {
+  flex 1;
+  width 100%
+
+  :deep(.table-header) {
+    color #454C59
+
+    th {
+      background-color #EDF1F7
+      font-weight 500
+      position relative
+
+      & > div {
+        display flex
+        gap 5px
+        align-items center
+      }
+
+      &:not(:first-child) > div::before {
+        position: absolute;
+        top: 50%;
+        left: 1px;
+        width: 1px;
+        background-color: #D3D7DE;
+        transform: translateY(-50%);
+        content: "";
+        height 50%
+      }
+    }
+  }
+
+  :deep(.table-cell) {
+    color #2F3540
+  }
+
+  .action-btn {
+    width 100%
+    display flex
+    flex-wrap wrap
+
+    & > button {
+      margin 0
+    }
+  }
+}
+
+.tool-bar {
+  display flex
+  justify-content space-between
+  margin 0 0 20px 0
+}
+</style>
diff --git a/src/pages/sys/role/RoleForm.vue b/src/pages/sys/role/RoleForm.vue
new file mode 100644
index 0000000..befea82
--- /dev/null
+++ b/src/pages/sys/role/RoleForm.vue
@@ -0,0 +1,91 @@
+<template>
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close
+    width="25vw">
+    <ElForm :model="roleFormData"
+      class="sys_role-form"
+      label-width="auto">
+      <ElFormItem label="角色代码">
+        <ElInput
+          v-model="roleFormData.roleCode"
+          :disabled="status === 'view'"
+          placeholder="角色代码"/>
+      </ElFormItem>
+      <ElFormItem label="角色名称">
+        <ElInput
+          v-model="roleFormData.roleName"
+          :disabled="status === 'view'"
+          placeholder="角色名称"/>
+      </ElFormItem>
+      <ElFormItem label="备注">
+        <ElInput
+          v-model="roleFormData.memo"
+          :disabled="status === 'view'"
+          placeholder="备注"/>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
+      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+    </template>
+  </ElDialog>
+</template>
+<script lang="ts" setup>
+import RoleApi from '@/pages/sys/role/role-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import { ElMessage } from 'element-plus'
+
+const emits = defineEmits([ 'editSucc' ])
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
+const roleFormData = reactive<RoleTypes.SearchRoleResult>({})
+
+function submitHandler() {
+  if (status.value === 'view') return
+  submiting.value = true
+  if (roleFormData.id != null) {
+    RoleApi.modify(roleFormData)
+      .then(() => {
+        ElMessage.success('修改成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  } else {
+    RoleApi.add(roleFormData)
+      .then(() => {
+        ElMessage.success('添加成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  }
+}
+
+defineExpose({
+  open(data: RoleTypes.SearchRoleResult = {}) {
+    showDialog.value = true
+    if (!Strings.isBlank(data.id)) {
+      status.value = 'modify'
+      RoleApi.detail(data.id!)
+        .then(res => {
+          Object.assign(roleFormData, res.data)
+        })
+    } else {
+      status.value = 'add'
+      Object.assign(roleFormData, {})
+    }
+  },
+})
+</script>
+<style lang="stylus" scoped>
+.sys_role-form {
+  padding 20px
+}
+</style>
diff --git a/src/pages/sys/role/page.ts b/src/pages/sys/role/page.ts
new file mode 100644
index 0000000..0b61a3e
--- /dev/null
+++ b/src/pages/sys/role/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/sys/role/Role.vue'),
+} as RouterTypes.RouteConfig