diff --git a/smart-admin-web-javascript/src/constants/support/dict-const.js b/smart-admin-web-javascript/src/constants/support/dict-const.js
index 97892c8c..a3afe6e7 100644
--- a/smart-admin-web-javascript/src/constants/support/dict-const.js
+++ b/smart-admin-web-javascript/src/constants/support/dict-const.js
@@ -37,8 +37,8 @@ export const DICT_DATA_STYLE_ENUM = {
     desc: '信息',
     color: 'colorInfo',
   },
-  WARN: {
-    value: 'warn',
+  WARNING: {
+    value: 'warning',
     desc: '警告',
     color: 'colorWarning',
   },
diff --git a/smart-admin-web-javascript/src/views/support/dict/components/dict-data-modal.vue b/smart-admin-web-javascript/src/views/support/dict/components/dict-data-modal.vue
index 12fd8d76..bba19005 100644
--- a/smart-admin-web-javascript/src/views/support/dict/components/dict-data-modal.vue
+++ b/smart-admin-web-javascript/src/views/support/dict/components/dict-data-modal.vue
@@ -66,6 +66,10 @@
       bordered
     >
       <template #bodyCell="{ record, column }">
+        <template v-if="column.dataIndex === 'dataLabel'">
+          <span v-if="record.color" :style="{ color: token[record.color] }">{{ record.dataLabel }}</span>
+          <span v-else> {{ record.dataLabel }} </span>
+        </template>
         <template v-if="column.dataIndex === 'disabledFlag'">
           <a-switch
             @change="(checked) => handleChangeDisabled(checked, record)"
@@ -89,11 +93,14 @@
   import DictDataFormModal from './dict-data-form-modal.vue';
   import { dictApi } from '/@/api/support/dict-api';
   import { SmartLoading } from '/@/components/framework/smart-loading';
-  import { Modal } from 'ant-design-vue';
-  import { message } from 'ant-design-vue';
+  import { message, Modal, theme } from 'ant-design-vue';
   import { smartSentry } from '/@/lib/smart-sentry';
   import BooleanSelect from '/@/components/framework/boolean-select/index.vue';
   import _ from 'lodash';
+  import { DICT_DATA_STYLE_ENUM } from '/@/constants/support/dict-const';
+
+  const { useToken } = theme;
+  const { token } = useToken();
 
   // 是否展示抽屉
   const visible = ref(false);
@@ -168,7 +175,7 @@
       let keywordsFilterFlag = true;
       if (keywords.value) {
         keywordsFilterFlag =
-          (item.dataValue &&_.includes(item.dataValue.toLowerCase(), keywords.value.toLowerCase())) ||
+          (item.dataValue && _.includes(item.dataValue.toLowerCase(), keywords.value.toLowerCase())) ||
           (item.dataLabel && _.includes(item.dataLabel.toLowerCase(), keywords.value.toLowerCase())) ||
           (item.remark && _.includes(item.remark.toLowerCase(), keywords.value.toLowerCase()));
       }
@@ -187,7 +194,12 @@
     try {
       tableLoading.value = true;
       let responseData = await dictApi.queryDictData(dictId.value);
-      responseData.data.map((e) => (e.enabled = !e.disabledFlag));
+      responseData.data.map((e) => {
+        e.enabled = !e.disabledFlag;
+        if (e.dataStyle) {
+          e.color = DICT_DATA_STYLE_ENUM[e.dataStyle.toUpperCase()].color;
+        }
+      });
       dictDataList.value = responseData.data;
       search();
     } catch (e) {
diff --git a/smart-admin-web-typescript/src/constants/support/dict-const.ts b/smart-admin-web-typescript/src/constants/support/dict-const.ts
index 97892c8c..a3afe6e7 100644
--- a/smart-admin-web-typescript/src/constants/support/dict-const.ts
+++ b/smart-admin-web-typescript/src/constants/support/dict-const.ts
@@ -37,8 +37,8 @@ export const DICT_DATA_STYLE_ENUM = {
     desc: '信息',
     color: 'colorInfo',
   },
-  WARN: {
-    value: 'warn',
+  WARNING: {
+    value: 'warning',
     desc: '警告',
     color: 'colorWarning',
   },
diff --git a/smart-admin-web-typescript/src/views/support/dict/components/dict-data-modal.vue b/smart-admin-web-typescript/src/views/support/dict/components/dict-data-modal.vue
index 91e9b956..18226de8 100644
--- a/smart-admin-web-typescript/src/views/support/dict/components/dict-data-modal.vue
+++ b/smart-admin-web-typescript/src/views/support/dict/components/dict-data-modal.vue
@@ -66,6 +66,10 @@
       bordered
     >
       <template #bodyCell="{ record, column }">
+        <template v-if="column.dataIndex === 'dataLabel'">
+          <span v-if="record.color" :style="{ color: token[record.color] }">{{ record.dataLabel }}</span>
+          <span v-else> {{ record.dataLabel }} </span>
+        </template>
         <template v-if="column.dataIndex === 'disabledFlag'">
           <a-switch
             @change="(checked) => handleChangeDisabled(checked, record)"
@@ -89,11 +93,14 @@
   import DictDataFormModal from './dict-data-form-modal.vue';
   import { dictApi } from '/@/api/support/dict-api';
   import { SmartLoading } from '/@/components/framework/smart-loading';
-  import { Modal } from 'ant-design-vue';
-  import { message } from 'ant-design-vue';
+  import { message, Modal, theme } from 'ant-design-vue';
   import { smartSentry } from '/@/lib/smart-sentry';
   import BooleanSelect from '/@/components/framework/boolean-select/index.vue';
   import _ from 'lodash';
+  import { DICT_DATA_STYLE_ENUM } from '/@/constants/support/dict-const';
+
+  const { useToken } = theme;
+  const { token } = useToken();
 
   // 是否展示抽屉
   const visible = ref(false);
@@ -168,7 +175,7 @@
       let keywordsFilterFlag = true;
       if (keywords.value) {
         keywordsFilterFlag =
-          (item.dataValue &&_.includes(item.dataValue.toLowerCase(), keywords.value.toLowerCase())) ||
+          (item.dataValue && _.includes(item.dataValue.toLowerCase(), keywords.value.toLowerCase())) ||
           (item.dataLabel && _.includes(item.dataLabel.toLowerCase(), keywords.value.toLowerCase())) ||
           (item.remark && _.includes(item.remark.toLowerCase(), keywords.value.toLowerCase()));
       }
@@ -187,7 +194,12 @@
     try {
       tableLoading.value = true;
       let responseData = await dictApi.queryDictData(dictId.value);
-      responseData.data.map((e) => (e.enabled = !e.disabledFlag));
+      responseData.data.map((e) => {
+        e.enabled = !e.disabledFlag;
+        if (e.dataStyle) {
+          e.color = DICT_DATA_STYLE_ENUM[e.dataStyle.toUpperCase()].color;
+        }
+      });
       dictDataList.value = responseData.data;
       search();
     } catch (e) {