--首页状态颜色自定义

src/i18n/locales/en-US.ts

@@ -1303,6 +1303,7 @@ export default {
         dictData:'Dictionary Data',
         reload:'Refresh Cache',
         mark:'Dictionary Description',
+        colorSelect:'Color Picker',
       },
       dictData: {
         dictType: "Dictionary name",

src/i18n/locales/zh-CN.ts

@@ -1303,6 +1303,7 @@ export default {
         dictData:'字典数据',
         reload:'刷新缓存',
         mark:'字典说明',
+        colorSelect:'取色器',
       },
       dictData: {
         dictType: "字典名称",

src/views/system/dict/data.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router';
+import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { Form, message, Modal } from 'ant-design-vue/lib';
@@ -32,6 +33,18 @@ const dictId = route.params && (route.params.dictId as string);
 
 const zh = currentLocale.value === 'zh_CN';
 
+let color = ref<string>(getLocalColor());
+/**改变主题色 */
+function fnColorChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  if (target.nodeName === 'INPUT') {
+    changePrimaryColor(target.value ?? '#1890ff');
+  } else {
+    changePrimaryColor();
+  }
+  color.value = getLocalColor();
+}
+
 /**标签类型数据固定项 */
 const tagTypeOptions = ref([
   { value: '', label: zh ? '普通文本' : 'Plain text' },
@@ -289,7 +302,8 @@ function fnModalVisibleByVive(row: Record<string, string>) {
  * 对话框弹出显示为 新增或者修改
  * @param dictCode 数据编号id, 不传为新增
  */
-function fnModalVisibleByEdit(dictCode?: string | number) {
+function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
+  console.log(record);
   if (!dictCode) {
     modalStateFrom.resetFields();
     modalState.from.dictType = queryParams.dictType;
@@ -686,7 +700,7 @@ onMounted(() => {
                 <template #title>{{ t('common.editText') }}</template>
                 <a-button
                   type="link"
-                  @click.prevent="fnModalVisibleByEdit(record.dictCode)"
+                  @click.prevent="fnModalVisibleByEdit(record.dictCode, record)"
                   v-perms:has="['system:dict:edit']"
                 >
                   <template #icon><FormOutlined /></template>
@@ -903,8 +917,27 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
+        <!-- 首页状态取色器 -->
         <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
+          <a-col
+            :lg="12"
+            :md="12"
+            :xs="24"
+            v-if="modalState.from.dictType === 'index_status'"
+          >
+            <a-form-item
+              :label="t('views.system.dict.colorSelect')"
+              name="tagClass"
+            >
+              <a-input
+                v-model:value="modalState.from.tagClass"
+                type="color"
+                allow-clear
+                :placeholder="t('common.ipnutPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24" v-else>
             <a-form-item
               :label="t('views.system.dictData.tagType')"
               name="tagType"
@@ -931,16 +964,21 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item
+        <!-- 非首页状态取色器 -->
-          :label="t('views.system.dictData.tagClass')"
+        <a-row :gutter="16" v-if="modalState.from.dictType !== 'index_status'">
-          name="tagClass"
+          <a-col :lg="12" :md="12" :xs="24">
-        >
+            <a-form-item
-          <a-input
+              :label="t('views.system.dictData.tagClass')"
-            v-model:value="modalState.from.tagClass"
+              name="tagClass"
-            allow-clear
+            >
-            :placeholder="t('common.ipnutPlease')"
+              <a-input
-          ></a-input>
+                v-model:value="modalState.from.tagClass"
-        </a-form-item>
+                allow-clear
+                :placeholder="t('common.ipnutPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
         <a-form-item :label="t('views.system.dictData.remark')" name="remark">
           <a-textarea
             v-model:value="modalState.from.remark"