refactor(system/dict): 优化字典项颜色选择功能

src/views/system/dict/DictItemAddModal.vue

@@ -11,11 +11,17 @@
   >
     <GiForm ref="formRef" v-model="form" :columns="columns">
       <template #color>
-        <a-input v-model="form.color" placeholder="请选择或输入标签颜色" allow-clear>
+        <a-select
-          <template #suffix>
+          v-model="form.color"
-            <a-color-picker v-model="form.color" />
+          placeholder="请选择颜色"
-          </template>
+          allow-clear
-        </a-input>
+        >
+          <a-option value="primary"><a-tag color="arcoblue">主要（极致蓝）</a-tag></a-option>
+          <a-option value="success"><a-tag color="green">成功（仙野绿）</a-tag></a-option>
+          <a-option value="warning"><a-tag color="orangered">警告（活力橙）</a-tag></a-option>
+          <a-option value="error"><a-tag color="red">错误（浪漫红）</a-tag></a-option>
+          <a-option value="default"><a-tag color="gray">默认（中性灰）</a-tag></a-option>
+        </a-select>
       </template>
     </GiForm>
   </a-modal>
@@ -42,7 +48,6 @@ const title = computed(() => (isUpdate.value ? '修改字典项' : '新增字典
 const formRef = ref<InstanceType<typeof GiForm>>()
 
 const [form, resetForm] = useResetReactive({
-  color: 'blue',
   sort: 999,
   status: 1,
 })
@@ -69,7 +74,7 @@ const columns: ColumnItem[] = reactive([
     },
   },
   {
-    label: '标签颜色',
+    label: '颜色',
     field: 'color',
     type: 'input',
     span: 24,

src/views/system/dict/index.vue

@@ -36,7 +36,11 @@
                 </a-button>
               </template>
               <template #label="{ record }">
-                <a-tag :color="record.color">{{ record.label }}</a-tag>
+                ·                <a-tag v-if="record.color === 'primary'" color="arcoblue">{{ record.label }}</a-tag>
+                <a-tag v-else-if="record.color === 'success'" color="green">{{ record.label }}</a-tag>
+                <a-tag v-else-if="record.color === 'warning'" color="orangered">{{ record.label }}</a-tag>
+                <a-tag v-else-if="record.color === 'error'" color="red">{{ record.label }}</a-tag>
+                <a-tag v-else-if="record.color === 'default'" color="gray">{{ record.label }}</a-tag>
               </template>
               <template #status="{ record }">
                 <GiCellStatus :status="record.status" />