v1.2.1版本，优化调整了很多，整改验收阶段新加字段

components/AreaFormPopup.vue

@@ -22,26 +22,26 @@
 					<view>区域颜色</view>
 					<view class="text-red">*</view>
 				</view>
-				<view class="flex align-center">
-					<input 
-						class="color-input flex-sub" 
-						v-model="formData.color" 
-						placeholder="#FF5733"
-					/>
+				<view class="flex align-center margin-bottom-sm">
 					<view class="color-preview" :style="{ backgroundColor: formData.color }"></view>
+					<text class="margin-left-sm text-gray">{{ selectedColorLabel }}</text>
 				</view>
 				
-				<!-- 预设颜色 -->
-				<view class="margin-top margin-bottom-sm text-gray">预设颜色</view>
+				<view class="margin-bottom-sm text-gray">请选择颜色</view>
 				<view class="color-grid">
 					<view 
-						v-for="(color, index) in presetColors" 
-						:key="color + index" 
-						class="color-item" 
-						:class="{ 'color-item-active': formData.color === color }"
-						:style="{ backgroundColor: color }"
-						@click="selectColor(color)"
-					></view>
+						v-for="item in presetColors" 
+						:key="item.value" 
+						class="color-option"
+						@click="selectColor(item.value)"
+					>
+						<view 
+							class="color-item" 
+							:class="{ 'color-item-active': formData.color === item.value }"
+							:style="{ backgroundColor: item.value }"
+						></view>
+						<text class="color-label">{{ item.name }}</text>
+					</view>
 				</view>
 			</view>
 			<view class="popup-footer">
@@ -53,7 +53,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch } from 'vue';
+import { reactive, watch, computed } from 'vue';
 
 const props = defineProps({
 	visible: {
@@ -79,21 +79,36 @@ const emit = defineEmits(['update:visible', 'submit', 'close']);
 // 表单数据
 const formData = reactive({
 	name: '',
-	color: '#FF5733'
+	color: '#D92121'
 });
 
-// 预设颜色
+// 可选颜色（固定四种）
 const presetColors = [
-	'#2563eb', '#ef4444', '#10b981', '#f59e0b', '#6366f1', '#ec4899', '#06b6d4',
-	'#84cc16', '#f97316', '#4f46e5', '#dc2626', '#f59e0b', '#d97706', '#8b5cf6',
-	'#db2777'
+	{ name: '红色', value: '#D92121' },
+	{ name: '橙色', value: '#FF8822' },
+	{ name: '黄色', value: '#FFCC00' },
+	{ name: '蓝色', value: '#165DFF' }
 ];
 
+const presetColorValues = presetColors.map((item) => item.value);
+
+const selectedColorLabel = computed(() => {
+	const found = presetColors.find((item) => item.value === formData.color);
+	return found ? `${found.name} ${found.value}` : formData.color;
+});
+
+const normalizeColor = (color) => {
+	if (!color) return presetColors[0].value;
+	const upper = String(color).toUpperCase();
+	const matched = presetColorValues.find((v) => v.toUpperCase() === upper);
+	return matched || presetColors[0].value;
+};
+
 // 监听 editData 变化，填充表单
 watch(() => props.editData, (newVal) => {
 	if (newVal && Object.keys(newVal).length > 0) {
 		formData.name = newVal.name || '';
-		formData.color = newVal.color || '#FF5733';
+		formData.color = normalizeColor(newVal.color);
 	}
 }, { immediate: true, deep: true });
 
@@ -112,7 +127,7 @@ const selectColor = (color) => {
 // 重置表单
 const resetForm = () => {
 	formData.name = '';
-	formData.color = '#FF5733';
+	formData.color = '#D92121';
 };
 
 // 关闭弹窗
@@ -128,8 +143,8 @@ const handleSubmit = () => {
 		uni.showToast({ title: '请输入区域名称', icon: 'none' });
 		return;
 	}
-	if (!formData.color) {
-		uni.showToast({ title: '请选择区域颜色', icon: 'none' });
+	if (!presetColorValues.includes(formData.color)) {
+		uni.showToast({ title: '请从预设颜色中选择', icon: 'none' });
 		return;
 	}
 	
@@ -222,42 +237,46 @@ const handleSubmit = () => {
 	box-sizing: border-box;
 }
 
-// 颜色输入框
-.color-input {
-	height: 70rpx;
-	padding: 0 20rpx;
-	border: 2rpx solid #dadbde;
-	border-radius: 8rpx;
-	font-size: 28rpx;
-	box-sizing: border-box;
-}
-
 // 颜色预览
 .color-preview {
 	width: 70rpx;
 	height: 70rpx;
 	border-radius: 8rpx;
-	margin-left: 20rpx;
 	flex-shrink: 0;
 	border: 2rpx solid #e5e5e5;
 }
 
-// 预设颜色网格
+// 预设颜色
 .color-grid {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 16rpx;
+	justify-content: space-between;
+	gap: 24rpx 0;
+}
+
+.color-option {
+	width: 25%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 .color-item {
-	width: 70rpx;
-	height: 70rpx;
+	width: 80rpx;
+	height: 80rpx;
 	border-radius: 12rpx;
 	border: 4rpx solid transparent;
 	box-sizing: border-box;
 }
 
+.color-label {
+	margin-top: 12rpx;
+	font-size: 24rpx;
+	color: #666;
+}
+
 .color-item-active {
 	border-color: #333;
+	box-shadow: 0 0 0 4rpx rgba(0, 0, 0, 0.08);
 }
 </style>