feat: 字典配置前端代码.

2023-10-20 17:07:53 +08:00
parent e0a6057515
commit 437614f026
33 changed files with 1175 additions and 237 deletions
--- a/orion-ops-framework/orion-ops-framework-common/src/main/java/com/orion/ops/framework/common/constant/ValidConst.java
+++ b/orion-ops-framework/orion-ops-framework-common/src/main/java/com/orion/ops/framework/common/constant/ValidConst.java
@@ -0,0 +1,20 @@
+package com.orion.ops.framework.common.constant;
+
+/**
+ * 验证常量
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023/10/20 11:45
+ */
+public interface ValidConst {
+
+    String CHAR_NUMBER_2_32_PATTERN = "^[a-zA-Z0-9]{2,32}$";
+
+    String CHAR_NUMBER_2_32_MESSAGE = "只能为 2-32 位的数字或字母";
+
+    String CHAR_NUMBER_4_32_PATTERN = "^[a-zA-Z0-9]{4,32}$";
+
+    String CHAR_NUMBER_4_32_MESSAGE = "只能为 4-32 位的数字或字母";
+
+}
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
@@ -112,6 +112,13 @@
  import fieldConfig from '../types/card.fields';
  import { delete${vue.featureEntity}, get${vue.featureEntity}Page, ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
  import { Message, Modal } from '@arco-design/web-vue';
+  import {} from '../types/const';
+  #if($vue.enums.isEmpty())
+  import {} from '../types/enum.types';
+  #else
+  import { #foreach($entry in ${vue.enums.entrySet()})${entry.value.className}#if($foreach.hasNext), #end#end } from '../types/enum.types';
+  #end
+  import { toOptions, getEnumValue } from '@/utils/enum';

  const { loading, setLoading } = useLoading();
  const cardColLayout = useColLayout();
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/DictKeyController.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/DictKeyController.java
@@ -1,11 +1,13 @@
 package com.orion.ops.module.infra.controller;

+import com.orion.lang.define.wrapper.DataGrid;
 import com.orion.ops.framework.biz.operator.log.core.annotation.OperatorLog;
 import com.orion.ops.framework.log.core.annotation.IgnoreLog;
 import com.orion.ops.framework.log.core.enums.IgnoreLogMode;
 import com.orion.ops.framework.web.core.annotation.RestWrapper;
 import com.orion.ops.module.infra.define.operator.DictKeyOperatorType;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyCreateRequest;
+import com.orion.ops.module.infra.entity.request.dict.DictKeyQueryRequest;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyUpdateRequest;
 import com.orion.ops.module.infra.entity.vo.DictKeyVO;
 import com.orion.ops.module.infra.service.DictKeyService;
@@ -62,6 +64,14 @@ public class DictKeyController {
        return dictKeyService.getDictKeyList();
    }

+    @IgnoreLog(IgnoreLogMode.RET)
+    @PostMapping("/query")
+    @Operation(summary = "分页查询全部字典配置项")
+    @PreAuthorize("@ss.hasPermission('infra:dict-key:query')")
+    public DataGrid<DictKeyVO> getDictKeyPage(@Validated @RequestBody DictKeyQueryRequest request) {
+        return dictKeyService.getDictKeyPage(request);
+    }
+
    @OperatorLog(DictKeyOperatorType.DELETE)
    @DeleteMapping("/delete")
    @Operation(summary = "删除字典配置项")
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictKeyCreateRequest.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictKeyCreateRequest.java
@@ -1,5 +1,6 @@
 package com.orion.ops.module.infra.entity.request.dict;

+import com.orion.ops.framework.common.constant.ValidConst;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
@@ -27,7 +28,7 @@ public class DictKeyCreateRequest implements Serializable {

    @NotBlank
    @Size(max = 32)
-    @Pattern(regexp = "^[a-zA-Z0-9]{4,32}$")
+    @Pattern(regexp = ValidConst.CHAR_NUMBER_2_32_PATTERN, message = ValidConst.CHAR_NUMBER_2_32_MESSAGE)
    @Schema(description = "配置项")
    private String keyName;

@@ -36,11 +37,9 @@ public class DictKeyCreateRequest implements Serializable {
    @Schema(description = "配置值定义")
    private String valueType;

-    @NotBlank
    @Schema(description = "额外配置定义")
    private String extraSchema;

-    @NotBlank
    @Size(max = 64)
    @Schema(description = "配置描述")
    private String description;
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictKeyQueryRequest.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictKeyQueryRequest.java
@@ -0,0 +1,38 @@
+package com.orion.ops.module.infra.entity.request.dict;
+
+import com.orion.ops.framework.common.entity.PageRequest;
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.*;
+
+import javax.validation.constraints.Size;
+
+/**
+ * 字典配置项 查询请求对象
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023-10-19 10:25
+ */
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+@EqualsAndHashCode(callSuper = true)
+@Schema(name = "DictKeyQueryRequest", description = "字典配置项 查询请求对象")
+public class DictKeyQueryRequest extends PageRequest {
+
+    @Schema(description = "搜索")
+    private String searchValue;
+
+    @Schema(description = "id")
+    private Long id;
+
+    @Size(max = 32)
+    @Schema(description = "配置项")
+    private String keyName;
+
+    @Size(max = 64)
+    @Schema(description = "配置描述")
+    private String description;
+
+}
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictKeyUpdateRequest.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictKeyUpdateRequest.java
@@ -1,5 +1,6 @@
 package com.orion.ops.module.infra.entity.request.dict;

+import com.orion.ops.framework.common.constant.ValidConst;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
@@ -32,7 +33,7 @@ public class DictKeyUpdateRequest implements Serializable {

    @NotBlank
    @Size(max = 32)
-    @Pattern(regexp = "^[a-zA-Z0-9]{4,32}$")
+    @Pattern(regexp = ValidConst.CHAR_NUMBER_2_32_PATTERN, message = ValidConst.CHAR_NUMBER_2_32_MESSAGE)
    @Schema(description = "配置项")
    private String keyName;

@@ -41,11 +42,9 @@ public class DictKeyUpdateRequest implements Serializable {
    @Schema(description = "配置值定义")
    private String valueType;

-    @NotBlank
    @Schema(description = "额外配置定义")
    private String extraSchema;

-    @NotBlank
    @Size(max = 64)
    @Schema(description = "配置描述")
    private String description;
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictValueCreateRequest.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictValueCreateRequest.java
@@ -1,5 +1,6 @@
 package com.orion.ops.module.infra.entity.request.dict;

+import com.orion.ops.framework.common.constant.ValidConst;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
@@ -32,7 +33,7 @@ public class DictValueCreateRequest implements Serializable {

    @NotBlank
    @Size(max = 32)
-    @Pattern(regexp = "^[a-zA-Z0-9]{4,32}$")
+    @Pattern(regexp = ValidConst.CHAR_NUMBER_2_32_PATTERN, message = ValidConst.CHAR_NUMBER_2_32_MESSAGE)
    @Schema(description = "配置名称")
    private String name;

--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictValueUpdateRequest.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/dict/DictValueUpdateRequest.java
@@ -1,5 +1,6 @@
 package com.orion.ops.module.infra.entity.request.dict;

+import com.orion.ops.framework.common.constant.ValidConst;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
@@ -36,7 +37,7 @@ public class DictValueUpdateRequest implements Serializable {

    @NotBlank
    @Size(max = 32)
-    @Pattern(regexp = "^[a-zA-Z0-9]{4,32}$")
+    @Pattern(regexp = ValidConst.CHAR_NUMBER_2_32_PATTERN, message = ValidConst.CHAR_NUMBER_2_32_MESSAGE)
    @Schema(description = "配置名称")
    private String name;

--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/user/SystemUserCreateRequest.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/user/SystemUserCreateRequest.java
@@ -1,5 +1,6 @@
 package com.orion.ops.module.infra.entity.request.user;

+import com.orion.ops.framework.common.constant.ValidConst;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
@@ -27,7 +28,7 @@ public class SystemUserCreateRequest implements Serializable {

    @NotBlank
    @Size(max = 32)
-    @Pattern(regexp = "^[a-zA-Z0-9]{4,32}$")
+    @Pattern(regexp = ValidConst.CHAR_NUMBER_4_32_PATTERN, message = ValidConst.CHAR_NUMBER_4_32_MESSAGE)
    @Schema(description = "用户名")
    private String username;

--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/DictKeyService.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/DictKeyService.java
@@ -1,6 +1,8 @@
 package com.orion.ops.module.infra.service;

+import com.orion.lang.define.wrapper.DataGrid;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyCreateRequest;
+import com.orion.ops.module.infra.entity.request.dict.DictKeyQueryRequest;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyUpdateRequest;
 import com.orion.ops.module.infra.entity.vo.DictKeyVO;

@@ -39,6 +41,14 @@ public interface DictKeyService {
     */
    List<DictKeyVO> getDictKeyList();

+    /**
+     * 分页 查询字典配置项
+     *
+     * @param request request
+     * @return rows
+     */
+    DataGrid<DictKeyVO> getDictKeyPage(DictKeyQueryRequest request);
+
    /**
     * 查询字典配置项 schema
     *
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DictKeyServiceImpl.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DictKeyServiceImpl.java
@@ -3,7 +3,9 @@ package com.orion.ops.module.infra.service.impl;
 import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONObject;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.orion.lang.define.wrapper.DataGrid;
 import com.orion.lang.utils.Objects1;
+import com.orion.lang.utils.Strings;
 import com.orion.lang.utils.collect.Maps;
 import com.orion.ops.framework.biz.operator.log.core.uitls.OperatorLogs;
 import com.orion.ops.framework.common.constant.Const;
@@ -17,6 +19,7 @@ import com.orion.ops.module.infra.define.cache.DictCacheKeyDefine;
 import com.orion.ops.module.infra.entity.domain.DictKeyDO;
 import com.orion.ops.module.infra.entity.dto.DictKeyCacheDTO;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyCreateRequest;
+import com.orion.ops.module.infra.entity.request.dict.DictKeyQueryRequest;
 import com.orion.ops.module.infra.entity.request.dict.DictKeyUpdateRequest;
 import com.orion.ops.module.infra.entity.vo.DictKeyVO;
 import com.orion.ops.module.infra.enums.DictValueTypeEnum;
@@ -118,6 +121,16 @@ public class DictKeyServiceImpl implements DictKeyService {
                .collect(Collectors.toList());
    }

+    @Override
+    public DataGrid<DictKeyVO> getDictKeyPage(DictKeyQueryRequest request) {
+        // 条件
+        LambdaQueryWrapper<DictKeyDO> wrapper = this.buildQueryWrapper(request);
+        // 查询
+        return dictKeyDAO.of(wrapper)
+                .page(request)
+                .dataGrid(DictKeyConvert.MAPPER::to);
+    }
+
    @Override
    public Map<String, String> getDictSchema(String key) {
        // 查询缓存
@@ -210,4 +223,22 @@ public class DictKeyServiceImpl implements DictKeyService {
        Valid.isFalse(present, ErrorMessage.DATA_PRESENT);
    }

+    /**
+     * 构建查询 wrapper
+     *
+     * @param request request
+     * @return wrapper
+     */
+    private LambdaQueryWrapper<DictKeyDO> buildQueryWrapper(DictKeyQueryRequest request) {
+        String searchValue = request.getSearchValue();
+        return dictKeyDAO.wrapper()
+                .eq(DictKeyDO::getId, request.getId())
+                .like(DictKeyDO::getKeyName, request.getKeyName())
+                .like(DictKeyDO::getDescription, request.getDescription())
+                .and(Strings.isNotEmpty(searchValue), c -> c
+                        .like(DictKeyDO::getKeyName, searchValue).or()
+                        .like(DictKeyDO::getDescription, searchValue)
+                );
+    }
+
 }
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DictValueServiceImpl.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DictValueServiceImpl.java
@@ -182,6 +182,7 @@ public class DictValueServiceImpl implements DictValueService {
        Map<String, Map<String, Object>> result = Maps.newLinkedMap();
        for (DictValueVO value : values) {
            Map<String, Object> item = Maps.newMap();
+            item.put(Const.NAME, value.getName());
            item.put(Const.LABEL, value.getLabel());
            item.put(Const.VALUE, DictValueTypeEnum.of(schema.get(Const.VALUE)).parse(value.getValue()));
            // 额外值
@@ -213,7 +214,7 @@ public class DictValueServiceImpl implements DictValueService {
        DictValueDO updateRecord = new DictValueDO();
        updateRecord.setKeyName(newKey);
        LambdaQueryWrapper<DictValueDO> wrapper = dictValueDAO.lambda()
-                .eq(DictValueDO::getKeyId, beforeKey);
+                .eq(DictValueDO::getKeyId, keyId);
        int effect = dictValueDAO.update(updateRecord, wrapper);
        // 删除缓存
        String beforeCacheKey = DictCacheKeyDefine.DICT_VALUE.format(beforeKey);
--- a/orion-ops-ui/src/api/system/dict-key.ts
+++ b/orion-ops-ui/src/api/system/dict-key.ts
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import qs from 'query-string';
+import { DataGrid, Pagination } from '@/types/global';
 import { TableData } from '@arco-design/web-vue/es/table/interface';

 /**
@@ -19,6 +20,16 @@ export interface DictKeyUpdateRequest extends DictKeyCreateRequest {
  id?: number;
 }

+/**
+ * 字典配置项查询请求
+ */
+export interface DictKeyQueryRequest extends Pagination {
+  searchValue?: string;
+  id?: number;
+  keyName?: string;
+  description?: string;
+}
+
 /**
 * 字典配置项查询响应
 */
@@ -51,6 +62,13 @@ export function getDictKeyList() {
  return axios.post<Array<DictKeyQueryResponse>>('/infra/dict-key/list');
 }

+/**
+ * 分页查询字典配置项
+ */
+export function getDictKeyPage(request: DictKeyQueryRequest) {
+  return axios.post<DataGrid<DictKeyQueryResponse>>('/infra/dict-key/query', request);
+}
+
 /**
 * 删除字典配置项
 */
--- a/orion-ops-ui/src/router/routes/modules/system.ts
+++ b/orion-ops-ui/src/router/routes/modules/system.ts
@@ -12,9 +12,14 @@ const SYSTEM: AppRouteRecordRaw = {
      component: () => import('@/views/system/menu/index.vue'),
    },
    {
-      name: 'systemDict',
-      path: '/system/dict',
-      component: () => import('@/views/system/dict/index.vue'),
+      name: 'systemDictKey',
+      path: '/system/dict-key',
+      component: () => import('@/views/system/dict-key/index.vue'),
+    },
+    {
+      name: 'systemDictValue',
+      path: '/system/dict-value',
+      component: () => import('@/views/system/dict-value/index.vue'),
    },
  ],
 };
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
@@ -0,0 +1,263 @@
+<template>
+  <a-modal v-model:visible="visible"
+           body-class="modal-form"
+           title-align="start"
+           :title="title"
+           :top="80"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :ok-button-props="{ disabled: loading }"
+           :cancel-button-props="{ disabled: loading }"
+           :on-before-ok="handlerOk"
+           @close="handleClose">
+    <a-spin :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '460px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }"
+              :rules="formRules">
+        <!-- 配置项 -->
+        <a-form-item field="keyName" label="配置项">
+          <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
+        </a-form-item>
+        <!-- 配置值类型 -->
+        <a-form-item field="valueType" label="配置值类型">
+          <a-select v-model="formModel.valueType"
+                    :options="toOptions(ValueTypeEnum)"
+                    placeholder="请选择配置值类型" />
+        </a-form-item>
+        <!-- 配置描述 -->
+        <a-form-item field="description" label="配置描述">
+          <a-input v-model="formModel.description" placeholder="请输入配置描述" allow-clear />
+        </a-form-item>
+        <a-divider orientation="center" style="margin: 6px 0 26px 0;">额外参数定义</a-divider>
+        <!-- 额外参数 -->
+        <a-form-item v-for="(schema, index) in extraSchemaArr"
+                     :key="index"
+                     :field="`extra${index + 1}`"
+                     :label="`额外参数 ${index + 1}`">
+          <a-input-group>
+            <!-- 参数类型 -->
+            <a-select v-model="schema.type"
+                      :options="toOptions(ValueTypeEnum)"
+                      placeholder="类型"
+                      :style="{ width: '110px' }" />
+            <!-- 参数值 -->
+            <a-input v-model="schema.name"
+                     placeholder="参数名称"
+                     :style="{ width: '196px' }" />
+          </a-input-group>
+          <!-- 操作按钮 -->
+          <div class="extra-action">
+            <!-- 删除 -->
+            <span class="click-icon-wrapper minus-icon-wrapper"
+                  title="移除参数"
+                  @click="removeExtraParam(index)">
+              <icon-minus />
+            </span>
+          </div>
+        </a-form-item>
+        <!-- 参数操作 -->
+        <a-space class="param-addition">
+          <!-- 快捷定义 -->
+          <a-tag v-for="definedExtraKey in definedExtraKeys"
+                 color="arcoblue"
+                 :title="`添加参数 ${definedExtraKey}`"
+                 @click="addExtraParam(definedExtraKey)"
+                 checkable
+                 checked>
+            {{ definedExtraKey }}
+          </a-tag>
+          <!-- 添加参数 -->
+          <a-button title="添加参数"
+                    style="width: 180px;"
+                    @click="addExtraParam(undefined)"
+                    long>
+            <icon-plus />
+          </a-button>
+        </a-space>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'system-dict-key-form-modal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { createDictKey, updateDictKey, DictKeyUpdateRequest } from '@/api/system/dict-key';
+  import { Message } from '@arco-design/web-vue';
+  import { definedExtraKeys, innerKeys, ExtraParamType } from '../types/const';
+  import { ValueTypeEnum } from '../types/enum.types';
+  import { toOptions } from '@/utils/enum';
+  import { FieldData } from '@arco-design/web-vue/es/form/interface';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const title = ref<string>();
+  const isAddHandle = ref<boolean>(true);
+
+  const defaultForm = (): DictKeyUpdateRequest => {
+    return {
+      id: undefined,
+      keyName: undefined,
+      valueType: undefined,
+      extraSchema: undefined,
+      description: undefined,
+    };
+  };
+
+  const formRef = ref<any>();
+  const formModel = ref<DictKeyUpdateRequest>({});
+  const extraSchemaArr = ref<Array<ExtraParamType>>([]);
+
+  const emits = defineEmits(['added', 'updated']);
+
+  // 打开新增
+  const openAdd = () => {
+    title.value = '添加字典配置项';
+    isAddHandle.value = true;
+    renderForm({ ...defaultForm() });
+    setVisible(true);
+  };
+
+  // 打开修改
+  const openUpdate = (record: any) => {
+    title.value = '修改字典配置项';
+    isAddHandle.value = false;
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    formModel.value = Object.assign({}, record);
+    if (record.extraSchema) {
+      extraSchemaArr.value = JSON.parse(record.extraSchema);
+    } else {
+      extraSchemaArr.value = [];
+    }
+  };
+
+  defineExpose({ openAdd, openUpdate });
+
+  // 添加额外参数
+  const addExtraParam = (name: string | undefined) => {
+    if (name && extraSchemaArr.value.findIndex(v => v.name === name) != -1) {
+      return;
+    }
+    extraSchemaArr.value.push({
+      name: name,
+      type: ValueTypeEnum.STRING.value
+    });
+  };
+
+  // 移除额外参数
+  const removeExtraParam = (index: number) => {
+    extraSchemaArr.value.splice(index, 1);
+  };
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      // 验证额外参数
+      if (extraSchemaArr.value) {
+        for (let i = 0; i < extraSchemaArr.value.length; i++) {
+          const extraSchema = extraSchemaArr.value[i];
+          // 为空
+          if (!extraSchema.name) {
+            formRef.value.setFields({
+              [`extra${i + 1}`]: {
+                status: 'error',
+                message: '参数不能为空'
+              }
+            });
+            return false;
+          }
+          // 不合法
+          if (!new RegExp(/^[a-zA-Z0-9]{2,32}$/).test(extraSchema.name as string)) {
+            formRef.value.setFields({
+              [`extra${i + 1}`]: {
+                status: 'error',
+                message: '配置项需要为 2-32 位的数字以及字母'
+              }
+            });
+            return false;
+          }
+          // 不能为内置参数
+          if (innerKeys.includes(extraSchema.name)) {
+            formRef.value.setFields({
+              [`extra${i + 1}`]: {
+                status: 'error',
+                message: '参数不能为 name label value'
+              }
+            });
+            return false;
+          }
+        }
+      }
+      // 保存
+      if (isAddHandle.value) {
+        // 新增
+        await createDictKey({ ...formModel.value, extraSchema: JSON.stringify(extraSchemaArr.value) });
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateDictKey({ ...formModel.value, extraSchema: JSON.stringify(extraSchemaArr.value) });
+        Message.success('修改成功');
+        emits('updated');
+      }
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+  .minus-icon-wrapper {
+    margin-left: 8px;
+    font-size: 18px;
+    padding: 6px;
+  }
+
+  .param-addition {
+    justify-content: flex-end;
+    cursor: pointer;
+    user-select: none;
+  }
+</style>
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
@@ -0,0 +1,190 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <a-query-header :model="formModel"
+                    label-align="left"
+                    @submit="fetchTableData"
+                    @reset="fetchTableData">
+      <!-- 配置项 -->
+      <a-form-item field="keyName" label="配置项" label-col-flex="50px">
+        <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
+      </a-form-item>
+      <!-- 配置描述 -->
+      <a-form-item field="description" label="配置描述" label-col-flex="50px">
+        <a-input v-model="formModel.description" placeholder="请输入配置描述" allow-clear />
+      </a-form-item>
+    </a-query-header>
+  </a-card>
+  <!-- 表格 -->
+  <a-card class="general-card table-card">
+    <template #title>
+      <!-- 左侧操作 -->
+      <div class="table-left-bar-handle">
+        <!-- 标题 -->
+        <div class="table-title">
+          字典配置项
+        </div>
+      </div>
+      <!-- 右侧操作 -->
+      <div class="table-right-bar-handle">
+        <a-space>
+          <!-- 新增 -->
+          <a-button type="primary"
+                    v-permission="['infra:dict-key:create']"
+                    @click="emits('openAdd')">
+            新增
+            <template #icon>
+              <icon-plus />
+            </template>
+          </a-button>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             class="table-wrapper-8"
+             ref="tableRef"
+             label-align="left"
+             :loading="loading"
+             :columns="columns"
+             :data="tableRenderData"
+             :pagination="pagination"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(1, size)"
+             :bordered="false">
+      <!-- 配置值类型 -->
+      <template #valueType="{ record }">
+        <a-tag :color="getEnumValue(record.valueType, ValueTypeEnum,'color')" class="pointer">
+          {{ getEnumValue(record.valueType, ValueTypeEnum) }}
+        </a-tag>
+      </template>
+      <!-- 额外参数 -->
+      <template #extraSchema="{ record }">
+        <template v-if="record.extraSchema">
+          <a-space>
+            <template v-for="item in JSON.parse(record.extraSchema)" :key="item.name">
+              <a-tag :color="getEnumValue(item.type, ValueTypeEnum,'color')">{{ item.name }}</a-tag>
+            </template>
+          </a-space>
+        </template>
+        <template v-else>
+          -
+        </template>
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 修改 -->
+          <a-button type="text"
+                    size="mini"
+                    v-permission="['infra:dict-key:update']"
+                    @click="emits('openUpdate', record)">
+            修改
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['infra:dict-key:delete']"
+                      type="text"
+                      size="mini"
+                      status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'system-dict-key-table'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { batchDeleteDictKey, deleteDictKey, getDictKeyPage, DictKeyQueryRequest, DictKeyQueryResponse } from '@/api/system/dict-key';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { usePagination } from '@/types/table';
+  import {} from '../types/const';
+  import { ValueTypeEnum } from '../types/enum.types';
+  import { toOptions, getEnumValue } from '@/utils/enum';
+  import { MenuStatusEnum } from '@/views/system/menu/types/enum.types';
+
+  const tableRenderData = ref<DictKeyQueryResponse[]>([]);
+  const { loading, setLoading } = useLoading();
+  const emits = defineEmits(['openAdd', 'openUpdate']);
+
+  const pagination = usePagination();
+
+  const formModel = reactive<DictKeyQueryRequest>({
+    id: undefined,
+    keyName: undefined,
+    valueType: undefined,
+    extraSchema: undefined,
+    description: undefined,
+  });
+
+  // 删除当前行
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteDictKey(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      await fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchTableData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchTableData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 加载数据
+  const doFetchTableData = async (request: DictKeyQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getDictKeyPage(request);
+      tableRenderData.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+  fetchTableData();
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/orion-ops-ui/src/views/system/dict-key/index.vue
+++ b/orion-ops-ui/src/views/system/dict-key/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="layout-container">
+    <!-- 列表-表格 -->
+    <dict-key-table ref="table"
+                  @openAdd="() => modal.openAdd()"
+                  @openUpdate="(e) => modal.openUpdate(e)" />
+    <!-- 添加修改模态框 -->
+    <dict-key-form-modal ref="modal"
+                   @added="modalAddCallback"
+                   @updated="modalUpdateCallback" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'systemDictKey'
+  };
+</script>
+
+<script lang="ts" setup>
+  import DictKeyTable from './components/dict-key-table.vue';
+  import DictKeyFormModal from './components/dict-key-form-modal.vue';
+
+  import { ref } from 'vue';
+
+  const table = ref();
+  const modal = ref();
+
+  // 添加回调
+  const modalAddCallback = () => {
+    table.value.addedCallback();
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    table.value.updatedCallback();
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/orion-ops-ui/src/views/system/dict-key/types/const.ts
+++ b/orion-ops-ui/src/views/system/dict-key/types/const.ts
@@ -0,0 +1,17 @@
+/**
+ * 快捷定义字段
+ */
+export const definedExtraKeys = ['status', 'type', 'color'];
+
+/**
+ * 内置字段
+ */
+export const innerKeys = ['name', 'value', 'label'];
+
+/**
+ * 额外参数类型
+ */
+export interface ExtraParamType {
+  name?: string;
+  type?: string;
+}
--- a/orion-ops-ui/src/views/system/dict-key/types/enum.types.ts
+++ b/orion-ops-ui/src/views/system/dict-key/types/enum.types.ts
@@ -5,22 +5,27 @@ export const ValueTypeEnum = {
  STRING: {
    label: '字符串',
    value: 'STRING',
+    color: 'blue',
  },
  INTEGER: {
    label: '整数',
    value: 'INTEGER',
+    color: 'arcoblue',
  },
  DECIMAL: {
    label: '小数',
    value: 'DECIMAL',
+    color: 'purple',
  },
  BOOLEAN: {
    label: '布尔值',
    value: 'BOOLEAN',
+    color: 'pinkpurple',
  },
  COLOR: {
    label: '颜色',
    value: 'COLOR',
+    color: 'magenta',
  },
-}
+};

--- a/orion-ops-ui/src/views/system/dict/types/dict-key.form.rules.ts
+++ b/orion-ops-ui/src/views/system/dict/types/dict-key.form.rules.ts
@@ -4,27 +4,19 @@ export const keyName = [{
  required: true,
  message: '请输入配置项'
 }, {
-  maxLength: 32,
-  message: '配置项长度不能大于32位'
+  match: /^[a-zA-Z0-9]{2,32}$/,
+  message: '配置项需要为 2-32 位的数字以及字母'
 }] as FieldRule[];

 export const valueType = [{
  required: true,
-  message: '请输入配置值定义'
+  message: '请输入配置值类型'
 }, {
  maxLength: 12,
-  message: '配置值定义长度不能大于12位'
-}] as FieldRule[];
-
-export const extraSchema = [{
-  required: true,
-  message: '请输入额外配置定义'
+  message: '配置值类型长度不能大于12位'
 }] as FieldRule[];

 export const description = [{
-  required: true,
-  message: '请输入配置描述'
-}, {
  maxLength: 64,
  message: '配置描述长度不能大于64位'
 }] as FieldRule[];
@@ -32,6 +24,5 @@ export const description = [{
 export default {
  keyName,
  valueType,
-  extraSchema,
  description,
 } as Record<string, FieldRule | FieldRule[]>;
--- a/orion-ops-ui/src/views/system/dict-key/types/table.columns.ts
+++ b/orion-ops-ui/src/views/system/dict-key/types/table.columns.ts
@@ -0,0 +1,45 @@
+import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 70,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '配置项',
+    dataIndex: 'keyName',
+    slotName: 'keyName',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '配置值类型',
+    dataIndex: 'valueType',
+    slotName: 'valueType',
+    align: 'left',
+    width: 150
+  }, {
+    title: '配置描述',
+    dataIndex: 'description',
+    slotName: 'description',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '额外配置类型',
+    dataIndex: 'extraSchema',
+    slotName: 'extraSchema',
+    align: 'left',
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 130,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-card-list.vue
+++ b/orion-ops-ui/src/views/system/dict-value/components/dict-value-card-list.vue
@@ -0,0 +1,223 @@
+<template>
+  <card-list v-model:searchValue="formModel.searchValue"
+             search-input-placeholder="输入xxx"
+             create-card-position="head"
+             :loading="loading"
+             :fieldConfig="fieldConfig"
+             :list="list"
+             :pagination="pagination"
+             :card-layout-cols="cardColLayout"
+             :filter-count="filterCount"
+             :add-permission="['infra:dict-value:create']"
+             @add="emits('openAdd')"
+             @reset="reset"
+             @search="fetchCardData"
+             @page-change="fetchCardData">
+    <!-- 标题 -->
+    <template #title="{ record }">
+      {{ record.id }}
+    </template>
+    <!-- 拓展操作 -->
+    <template #extra="{ record }">
+      <a-space>
+        <!-- 更多操作 -->
+        <a-dropdown trigger="hover">
+          <icon-more class="card-extra-icon" />
+          <template #content>
+            <!-- 修改 -->
+            <a-doption v-permission="['infra:dict-value:update']"
+                       @click="emits('openUpdate', record)">
+              <icon-edit />
+              修改
+            </a-doption>
+            <!-- 删除 -->
+            <a-doption v-permission="['infra:dict-value:delete']"
+                       class="span-red"
+                       @click="deleteRow(record.id)">
+              <icon-delete />
+              删除
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </a-space>
+    </template>
+    <!-- 右键菜单 -->
+    <template #contextMenu="{ record }">
+      <!-- 修改 -->
+      <a-doption v-permission="['infra:dict-value:update']"
+                 @click="emits('openUpdate', record)">
+        <icon-edit />
+        修改
+      </a-doption>
+      <!-- 删除 -->
+      <a-doption v-permission="['infra:dict-value:delete']"
+                 class="span-red"
+                 @click="deleteRow(record.id)">
+        <icon-delete />
+        删除
+      </a-doption>
+    </template>
+    <!-- 过滤条件 -->
+    <template #filterContent>
+      <a-form :model="formModel"
+              class="modal-form"
+              size="small"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '320px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }">
+        <!-- id -->
+        <a-form-item field="id" label="id">
+          <a-input-number v-model="formModel.id"
+                          placeholder="请输入id"
+                          allow-clear
+                          hide-button />
+        </a-form-item>
+        <!-- 配置项id -->
+        <a-form-item field="keyId" label="配置项id">
+          <a-input-number v-model="formModel.keyId"
+                          placeholder="请输入配置项id"
+                          allow-clear
+                          hide-button />
+        </a-form-item>
+        <!-- 配置项 -->
+        <a-form-item field="keyName" label="配置项">
+          <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
+        </a-form-item>
+        <!-- 配置名称 -->
+        <a-form-item field="name" label="配置名称">
+          <a-input v-model="formModel.name" placeholder="请输入配置名称" allow-clear />
+        </a-form-item>
+        <!-- 配置值 -->
+        <a-form-item field="value" label="配置值">
+          <a-input v-model="formModel.value" placeholder="请输入配置值" allow-clear />
+        </a-form-item>
+        <!-- 配置描述 -->
+        <a-form-item field="label" label="配置描述">
+          <a-input v-model="formModel.label" placeholder="请输入配置描述" allow-clear />
+        </a-form-item>
+        <!-- 额外参数 -->
+        <a-form-item field="extra" label="额外参数">
+          <a-input v-model="formModel.extra" placeholder="请输入额外参数" allow-clear />
+        </a-form-item>
+        <!-- 排序 -->
+        <a-form-item field="sort" label="排序">
+          <a-input-number v-model="formModel.sort"
+                          placeholder="请输入排序"
+                          allow-clear
+                          hide-button />
+        </a-form-item>
+      </a-form>
+    </template>
+  </card-list>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'system-dict-value-card-list'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { usePagination, useColLayout } from '@/types/card';
+  import { computed, reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { objectTruthKeyCount, resetObject } from '@/utils';
+  import fieldConfig from '../types/card.fields';
+  import { deleteDictValue, getDictValuePage, DictValueQueryRequest, DictValueQueryResponse } from '@/api/system/dict-value';
+  import { Message, Modal } from '@arco-design/web-vue';
+
+  const { loading, setLoading } = useLoading();
+  const cardColLayout = useColLayout();
+  const pagination = usePagination();
+  const list = ref<DictValueQueryResponse[]>([]);
+  const emits = defineEmits(['openAdd', 'openUpdate']);
+
+  const formRef = ref();
+  const formModel = reactive<DictValueQueryRequest>({
+    searchValue: undefined,
+    id: undefined,
+    keyId: undefined,
+    keyName: undefined,
+    name: undefined,
+    value: undefined,
+    label: undefined,
+    extra: undefined,
+    sort: undefined,
+  });
+
+  // 条件数量
+  const filterCount = computed(() => {
+    return objectTruthKeyCount(formModel, ['searchValue']);
+  });
+
+  // 删除当前行
+  const deleteRow = (id: number) => {
+    Modal.confirm({
+      title: '删除前确认!',
+      titleAlign: 'start',
+      content: '确定要删除这条记录吗?',
+      okText: '删除',
+      onOk: async () => {
+        try {
+          setLoading(true);
+          // 调用删除接口
+          await deleteDictValue(id);
+          Message.success('删除成功');
+          // 重新加载数据
+          await fetchCardData();
+        } catch (e) {
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchCardData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchCardData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 重置条件
+  const reset = () => {
+    resetObject(formModel);
+    fetchCardData();
+  };
+
+  // 加载数据
+  const doFetchCardData = async (request: DictValueQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getDictValuePage(request);
+      list.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchCardData({ page, limit, ...form });
+  };
+  fetchCardData();
+
+</script>
+
+<style scoped lang="less">
+
+</style>
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-drawer.vue
+++ b/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-drawer.vue
@@ -1,51 +1,61 @@
 <template>
-  <a-modal v-model:visible="visible"
-           body-class="modal-form"
-           title-align="start"
-           :title="title"
-           :top="80"
-           :align-center="false"
-           :draggable="true"
-           :mask-closable="false"
-           :unmount-on-close="true"
-           :ok-button-props="{ disabled: loading }"
-           :cancel-button-props="{ disabled: loading }"
-           :on-before-ok="handlerOk"
-           @close="handleClose">
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            :width="430"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :ok-button-props="{ disabled: loading }"
+            :cancel-button-props="{ disabled: loading }"
+            :on-before-ok="handlerOk"
+            @cancel="handleClose">
    <a-spin :loading="loading">
      <a-form :model="formModel"
              ref="formRef"
              label-align="right"
-              :style="{ width: '460px' }"
+              :style="{ width: '380px' }"
              :label-col-props="{ span: 6 }"
              :wrapper-col-props="{ span: 18 }"
              :rules="formRules">
+        <!-- 配置项id -->
+        <a-form-item field="keyId" label="配置项id">
+          <a-input-number v-model="formModel.keyId"
+                          placeholder="请输入配置项id"
+                          hide-button />
+        </a-form-item>
        <!-- 配置项 -->
        <a-form-item field="keyName" label="配置项">
-          <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
+          <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear/>
        </a-form-item>
-        <!-- 配置值定义 -->
-        <a-form-item field="valueType" label="配置值定义">
-          <a-select v-model="formModel.valueType"
-                    :options="toOptions(ValueTypeEnum)"
-                    placeholder="请选择配置值定义" />
+        <!-- 配置名称 -->
+        <a-form-item field="name" label="配置名称">
+          <a-input v-model="formModel.name" placeholder="请输入配置名称" allow-clear/>
        </a-form-item>
-        <!-- 额外配置定义 -->
-        <a-form-item field="extraSchema" label="额外配置定义">
-          <a-input v-model="formModel.extraSchema" placeholder="请输入额外配置定义" allow-clear />
+        <!-- 配置值 -->
+        <a-form-item field="value" label="配置值">
+          <a-input v-model="formModel.value" placeholder="请输入配置值" allow-clear/>
        </a-form-item>
        <!-- 配置描述 -->
-        <a-form-item field="description" label="配置描述">
-          <a-input v-model="formModel.description" placeholder="请输入配置描述" allow-clear />
+        <a-form-item field="label" label="配置描述">
+          <a-input v-model="formModel.label" placeholder="请输入配置描述" allow-clear/>
+        </a-form-item>
+        <!-- 额外参数 -->
+        <a-form-item field="extra" label="额外参数">
+          <a-input v-model="formModel.extra" placeholder="请输入额外参数" allow-clear/>
+        </a-form-item>
+        <!-- 排序 -->
+        <a-form-item field="sort" label="排序">
+          <a-input-number v-model="formModel.sort"
+                          placeholder="请输入排序"
+                          hide-button />
        </a-form-item>
      </a-form>
    </a-spin>
-  </a-modal>
+  </a-drawer>
 </template>

 <script lang="ts">
  export default {
-    name: 'system-dict-key-form-modal'
+    name: 'system-dict-value-form-drawer'
  };
 </script>

@@ -53,11 +63,11 @@
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
-  import formRules from '../types/dict-key.form.rules';
-  import { createDictKey, updateDictKey, DictKeyUpdateRequest } from '@/api/system/dict-key';
+  import formRules from '../types/form.rules';
+  import { createDictValue, updateDictValue, DictValueUpdateRequest } from '@/api/system/dict-value';
  import { Message } from '@arco-design/web-vue';
  import {} from '../types/const';
-  import { ValueTypeEnum } from '../types/enum.types';
+  import {} from '../types/enum.types';
  import { toOptions } from '@/utils/enum';

  const { visible, setVisible } = useVisible();
@@ -66,24 +76,27 @@
  const title = ref<string>();
  const isAddHandle = ref<boolean>(true);

-  const defaultForm = (): DictKeyUpdateRequest => {
+  const defaultForm = (): DictValueUpdateRequest => {
    return {
      id: undefined,
+      keyId: undefined,
      keyName: undefined,
-      valueType: undefined,
-      extraSchema: undefined,
-      description: undefined,
+      name: undefined,
+      value: undefined,
+      label: undefined,
+      extra: undefined,
+      sort: undefined,
    };
  };

  const formRef = ref<any>();
-  const formModel = ref<DictKeyUpdateRequest>({});
+  const formModel = ref<DictValueUpdateRequest>({});

  const emits = defineEmits(['added', 'updated']);

  // 打开新增
  const openAdd = () => {
-    title.value = '添加字典配置项';
+    title.value = '添加字典配置值';
    isAddHandle.value = true;
    renderForm({ ...defaultForm() });
    setVisible(true);
@@ -91,7 +104,7 @@

  // 打开修改
  const openUpdate = (record: any) => {
-    title.value = '修改字典配置项';
+    title.value = '修改字典配置值';
    isAddHandle.value = false;
    renderForm({ ...defaultForm(), ...record });
    setVisible(true);
@@ -115,12 +128,12 @@
      }
      if (isAddHandle.value) {
        // 新增
-        await createDictKey(formModel.value);
+        await createDictValue(formModel.value);
        Message.success('创建成功');
        emits('added');
      } else {
        // 修改
-        await updateDictKey(formModel.value);
+        await updateDictValue(formModel.value);
        Message.success('修改成功');
        emits('updated');
      }
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
+++ b/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
@@ -67,7 +67,7 @@
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
-  import formRules from '../types/dict-value.form.rules';
+  import formRules from '../types/form.rules';
  import { createDictValue, updateDictValue, DictValueUpdateRequest } from '@/api/system/dict-value';
  import { Message } from '@arco-design/web-vue';
  import {} from '../types/const';
@@ -100,7 +100,7 @@

  // 打开新增
  const openAdd = () => {
-    title.value = '添加字典值';
+    title.value = '添加字典配置值';
    isAddHandle.value = true;
    renderForm({ ...defaultForm() });
    setVisible(true);
@@ -108,7 +108,7 @@

  // 打开修改
  const openUpdate = (record: any) => {
-    title.value = '修改字典值';
+    title.value = '修改字典配置值';
    isAddHandle.value = false;
    renderForm({ ...defaultForm(), ...record });
    setVisible(true);
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
+++ b/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
@@ -5,7 +5,21 @@
                    label-align="left"
                    @submit="fetchTableData"
                    @reset="fetchTableData">
-      <!-- 配置项 fixme 修改为下拉框 -->
+      <!-- id -->
+      <a-form-item field="id" label="id" label-col-flex="50px">
+        <a-input-number v-model="formModel.id"
+                        placeholder="请输入id"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
+      <!-- 配置项id -->
+      <a-form-item field="keyId" label="配置项id" label-col-flex="50px">
+        <a-input-number v-model="formModel.keyId"
+                        placeholder="请输入配置项id"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
+      <!-- 配置项 -->
      <a-form-item field="keyName" label="配置项" label-col-flex="50px">
        <a-input v-model="formModel.keyName" placeholder="请输入配置项" allow-clear />
      </a-form-item>
@@ -21,6 +35,17 @@
      <a-form-item field="label" label="配置描述" label-col-flex="50px">
        <a-input v-model="formModel.label" placeholder="请输入配置描述" allow-clear />
      </a-form-item>
+      <!-- 额外参数 -->
+      <a-form-item field="extra" label="额外参数" label-col-flex="50px">
+        <a-input v-model="formModel.extra" placeholder="请输入额外参数" allow-clear />
+      </a-form-item>
+      <!-- 排序 -->
+      <a-form-item field="sort" label="排序" label-col-flex="50px">
+        <a-input-number v-model="formModel.sort"
+                        placeholder="请输入排序"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
    </a-query-header>
  </a-card>
  <!-- 表格 -->
@@ -30,19 +55,8 @@
      <div class="table-left-bar-handle">
        <!-- 标题 -->
        <div class="table-title">
-          数据字典
+          字典配置值列表
        </div>
-        <!-- 操作 -->
-        <a-space>
-          <a-button type="primary"
-                    v-permission="['infra:dict-key:create']"
-                    @click="emits('openAddKey')">
-            新增配置项
-            <template #icon>
-              <icon-book />
-            </template>
-          </a-button>
-        </a-space>
      </div>
      <!-- 右侧操作 -->
      <div class="table-right-bar-handle">
@@ -50,8 +64,8 @@
          <!-- 新增 -->
          <a-button type="primary"
                    v-permission="['infra:dict-value:create']"
-                    @click="emits('openAddValue')">
-            新增字典值
+                    @click="emits('openAdd')">
+            新增
            <template #icon>
              <icon-plus />
            </template>
@@ -95,16 +109,9 @@
          <a-button type="text"
                    size="mini"
                    v-permission="['infra:dict-value:update']"
-                    @click="emits('openUpdateValue', record)">
+                    @click="emits('openUpdate', record)">
            修改
          </a-button>
-          <!-- 历史 -->
-          <a-button type="text"
-                    size="mini"
-                    v-permission="['infra:dict-value:update']"
-                    @click="emits('openValueHistory', record)">
-            历史
-          </a-button>
          <!-- 删除 -->
          <a-popconfirm content="确认删除这条记录吗?"
                        position="left"
@@ -134,7 +141,7 @@
  import { batchDeleteDictValue, deleteDictValue, getDictValuePage, DictValueQueryRequest, DictValueQueryResponse } from '@/api/system/dict-value';
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
-  import columns from '../types/dict-value.table.columns';
+  import columns from '../types/table.columns';
  import { usePagination, useRowSelection } from '@/types/table';
  import {} from '../types/const';
  import {} from '../types/enum.types';
@@ -142,7 +149,7 @@

  const tableRenderData = ref<DictValueQueryResponse[]>([]);
  const { loading, setLoading } = useLoading();
-  const emits = defineEmits(['openAddKey', 'openAddValue', 'openUpdateValue', 'openValueHistory']);
+  const emits = defineEmits(['openAdd', 'openUpdate']);

  const pagination = usePagination();
  const selectedKeys = ref<number[]>([]);
--- a/orion-ops-ui/src/views/system/dict-value/index.vue
+++ b/orion-ops-ui/src/views/system/dict-value/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="layout-container">
+    <!-- 列表-表格 -->
+    <dict-value-table ref="table"
+                  @openAdd="() => modal.openAdd()"
+                  @openUpdate="(e) => modal.openUpdate(e)" />
+    <!-- 添加修改模态框 -->
+    <dict-value-form-modal ref="modal"
+                   @added="modalAddCallback"
+                   @updated="modalUpdateCallback" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'systemDictValue'
+  };
+</script>
+
+<script lang="ts" setup>
+  import DictValueTable from './components/dict-value-table.vue';
+  import DictValueFormModal from './components/dict-value-form-modal.vue';
+
+  import { ref } from 'vue';
+
+  const table = ref();
+  const modal = ref();
+
+  // 添加回调
+  const modalAddCallback = () => {
+    table.value.addedCallback();
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    table.value.updatedCallback();
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/orion-ops-ui/src/views/system/dict-value/types/card.fields.ts
+++ b/orion-ops-ui/src/views/system/dict-value/types/card.fields.ts
@@ -0,0 +1,71 @@
+import { CardField, CardFieldConfig } from '@/types/card';
+import { dateFormat } from '@/utils';
+
+const fieldConfig = {
+  rowGap: '12px',
+  labelSpan: 8,
+  fields: [
+    {
+      label: 'id',
+      dataIndex: 'id',
+      slotName: 'id',
+    }, {
+      label: '配置项id',
+      dataIndex: 'keyId',
+      slotName: 'keyId',
+    }, {
+      label: '配置项',
+      dataIndex: 'keyName',
+      slotName: 'keyName',
+      ellipsis: true,
+    }, {
+      label: '配置名称',
+      dataIndex: 'name',
+      slotName: 'name',
+      ellipsis: true,
+    }, {
+      label: '配置值',
+      dataIndex: 'value',
+      slotName: 'value',
+      ellipsis: true,
+    }, {
+      label: '配置描述',
+      dataIndex: 'label',
+      slotName: 'label',
+      ellipsis: true,
+    }, {
+      label: '额外参数',
+      dataIndex: 'extra',
+      slotName: 'extra',
+      ellipsis: true,
+    }, {
+      label: '排序',
+      dataIndex: 'sort',
+      slotName: 'sort',
+    }, {
+      label: '创建时间',
+      dataIndex: 'createTime',
+      slotName: 'createTime',
+      render: ({ record }) => {
+        return dateFormat(new Date(record.createTime));
+      },
+    }, {
+      label: '修改时间',
+      dataIndex: 'updateTime',
+      slotName: 'updateTime',
+      render: ({ record }) => {
+        return dateFormat(new Date(record.updateTime));
+      },
+    }, {
+      label: '创建人',
+      dataIndex: 'creator',
+      slotName: 'creator',
+    }, {
+      label: '修改人',
+      dataIndex: 'updater',
+      slotName: 'updater',
+    }
+  ] as CardField[]
+} as CardFieldConfig;
+
+export default fieldConfig;
--- a/orion-ops-ui/src/views/system/dict-value/types/const.ts
+++ b/orion-ops-ui/src/views/system/dict-value/types/const.ts
--- a/orion-ops-ui/src/views/system/dict-value/types/enum.types.ts
+++ b/orion-ops-ui/src/views/system/dict-value/types/enum.types.ts
--- a/orion-ops-ui/src/views/system/dict/types/dict-value.form.rules.ts
+++ b/orion-ops-ui/src/views/system/dict/types/dict-value.form.rules.ts
@@ -11,9 +11,6 @@ export const keyName = [{
 }, {
  maxLength: 32,
  message: '配置项长度不能大于32位'
-}, {
-  match: /^[a-zA-Z0-9]{4,32}$/,
-  message: '配置项需要为 4-32 位的数字以及字母'
 }] as FieldRule[];

 export const name = [{
@@ -22,9 +19,6 @@ export const name = [{
 }, {
  maxLength: 32,
  message: '配置名称长度不能大于32位'
-}, {
-  match: /^[a-zA-Z0-9]{4,32}$/,
-  message: '配置名称需要为 4-32 位的数字以及字母'
 }] as FieldRule[];

 export const value = [{
--- a/orion-ops-ui/src/views/system/dict/types/dict-key.table.columns.ts
+++ b/orion-ops-ui/src/views/system/dict/types/dict-key.table.columns.ts
@@ -9,34 +9,51 @@ const columns = [
    width: 70,
    align: 'left',
    fixed: 'left',
+  }, {
+    title: '配置项id',
+    dataIndex: 'keyId',
+    slotName: 'keyId',
+    align: 'left',
  }, {
    title: '配置项',
    dataIndex: 'keyName',
    slotName: 'keyName',
-    align: 'center',
+    align: 'left',
    ellipsis: true,
    tooltip: true,
  }, {
-    title: '配置值定义',
-    dataIndex: 'valueType',
-    slotName: 'valueType',
-    align: 'center',
+    title: '配置名称',
+    dataIndex: 'name',
+    slotName: 'name',
+    align: 'left',
    ellipsis: true,
    tooltip: true,
  }, {
-    title: '额外配置定义',
-    dataIndex: 'extraSchema',
-    slotName: 'extraSchema',
-    align: 'center',
+    title: '配置值',
+    dataIndex: 'value',
+    slotName: 'value',
+    align: 'left',
    ellipsis: true,
    tooltip: true,
  }, {
    title: '配置描述',
-    dataIndex: 'description',
-    slotName: 'description',
-    align: 'center',
+    dataIndex: 'label',
+    slotName: 'label',
+    align: 'left',
    ellipsis: true,
    tooltip: true,
+  }, {
+    title: '额外参数',
+    dataIndex: 'extra',
+    slotName: 'extra',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '排序',
+    dataIndex: 'sort',
+    slotName: 'sort',
+    align: 'left',
  }, {
    title: '创建时间',
    dataIndex: 'createTime',
--- a/orion-ops-ui/src/views/system/dict/index.vue
+++ b/orion-ops-ui/src/views/system/dict/index.vue
@@ -1,61 +0,0 @@
-<template>
-  <div class="layout-container">
-    <!-- 列表-表格 -->
-    <dict-value-table ref="table"
-                      @openAddKey="() => keyModal.openAdd()"
-                      @openValueHistory="() => keyModal.openAdd()"
-                      @openAddValue="() => valueModal.openAdd()"
-                      @openUpdateValue="(e) => valueModal.openUpdate(e)" />
-    <!-- 添加修改 配置项模态框 -->
-    <dict-key-form-modal ref="keyModal"
-                         @added="keyModalAddCallback"
-                         @updated="keyModalUpdateCallback" />
-    <!-- 添加修改 配置值模态框 -->
-    <dict-value-form-modal ref="valueModal"
-                           @added="valueModalAddCallback"
-                           @updated="valueModalUpdateCallback" />
-  </div>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'systemDict'
-  };
-</script>
-
-<script lang="ts" setup>
-  import DictValueTable from './components/dict-value-table.vue';
-  import DictValueFormModal from './components/dict-value-form-modal.vue';
-  import DictKeyFormModal from './components/dict-key-form-modal.vue';
-
-  import { ref } from 'vue';
-
-  const table = ref();
-  const keyModal = ref();
-  const valueModal = ref();
-
-  // 配置项添加回调
-  const keyModalAddCallback = () => {
-    table.value.addedCallback();
-  };
-
-  // 配置项修改回调
-  const keyModalUpdateCallback = () => {
-    table.value.updatedCallback();
-  };
-
-  // 配置值添加回调
-  const valueModalAddCallback = () => {
-    table.value.addedCallback();
-  };
-
-  // 配置值修改回调
-  const valueModalUpdateCallback = () => {
-    table.value.updatedCallback();
-  };
-
-</script>
-
-<style lang="less" scoped>
-
-</style>
--- a/orion-ops-ui/src/views/system/dict/types/dict-value.table.columns.ts
+++ b/orion-ops-ui/src/views/system/dict/types/dict-value.table.columns.ts
@@ -1,64 +0,0 @@
-import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-import { dateFormat } from '@/utils';
-
-const columns = [
-  {
-    title: 'id',
-    dataIndex: 'id',
-    slotName: 'id',
-    width: 70,
-    align: 'left',
-    fixed: 'left',
-  }, {
-    title: '配置项',
-    dataIndex: 'keyName',
-    slotName: 'keyName',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '配置名称',
-    dataIndex: 'name',
-    slotName: 'name',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '配置描述',
-    dataIndex: 'label',
-    slotName: 'label',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '配置值',
-    dataIndex: 'value',
-    slotName: 'value',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '额外参数',
-    dataIndex: 'extra',
-    slotName: 'extra',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '排序',
-    dataIndex: 'sort',
-    slotName: 'sort',
-    width: 70,
-  }, {
-    title: '修改时间',
-    dataIndex: 'updateTime',
-    slotName: 'updateTime',
-    width: 180,
-    render: ({ record }) => {
-      return dateFormat(new Date(record.updateTime));
-    },
-  }, {
-    title: '操作',
-    slotName: 'handle',
-    width: 160,
-    align: 'center',
-    fixed: 'right',
-  },
-] as TableColumnData[];
-
-export default columns;