pagetype列表页Select字段类型自动增加badge背景

apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue

@@ -149,6 +149,14 @@
                       <span v-if="row[f.key] === 1 || row[f.key] === true" class="boolean-true">✓</span>
                       <span v-else class="boolean-false">○</span>
                     </template>
+                    <template v-else-if="isSelectField(f.key) && row[f.key]">
+                      <span 
+                        class="select-badge" 
+                        :style="{ backgroundColor: getSelectBadgeColor(f.key, row[f.key]) }"
+                      >
+                        {{ formatDisplayValue(row[f.key], f.key) }}
+                      </span>
+                    </template>
                     <template v-else>{{ formatDisplayValue(row[f.key], f.key) }}</template>
                   </span>
                 </div>
@@ -235,6 +243,14 @@
                   <span v-if="row[col.key] === 1 || row[col.key] === true" class="boolean-true">✓</span>
                   <span v-else class="boolean-false">○</span>
                 </template>
+                <template v-else-if="isSelectField(col.key) && row[col.key]">
+                  <span 
+                    class="select-badge" 
+                    :style="{ backgroundColor: getSelectBadgeColor(col.key, row[col.key]) }"
+                  >
+                    {{ formatDisplayValue(row[col.key], col.key) }}
+                  </span>
+                </template>
                 <template v-else>{{ formatDisplayValue(row[col.key], col.key) }}</template>
               </div>
               <div class="col-actions">
@@ -988,6 +1004,68 @@ function isBooleanField(fieldName: string) {
   return false
 }
 
+// 检查是否为Select类型字段
+function isSelectField(fieldName: string) {
+  const fieldMeta = metaFields.value.find(f => f.fieldname === fieldName)
+  return fieldMeta?.fieldtype === 'Select'
+}
+
+// Select字段颜色配置映射
+// 格式：{ fieldName: { value: color } } 或 { 'global': { value: color } } 用于所有Select字段
+// 颜色可以是：预定义颜色名（如 'blue', 'green', 'red'）或十六进制颜色值（如 '#3b82f6'）
+const selectFieldColors = ref<Record<string, Record<string, string>>>({
+  // 全局默认颜色映射（适用于所有Select字段，可被字段特定配置覆盖）
+  'global': {
+    // 可以根据需要添加默认颜色
+  }
+})
+
+// 获取Select字段值的背景色
+function getSelectBadgeColor(fieldName: string, value: any): string {
+  if (!value || value === '') return ''
+  
+  const valueStr = String(value)
+  
+  // 1. 先检查字段特定的颜色配置
+  if (selectFieldColors.value[fieldName] && selectFieldColors.value[fieldName][valueStr]) {
+    return selectFieldColors.value[fieldName][valueStr]
+  }
+  
+  // 2. 检查全局颜色配置
+  if (selectFieldColors.value['global'] && selectFieldColors.value['global'][valueStr]) {
+    return selectFieldColors.value['global'][valueStr]
+  }
+  
+  // 3. 使用基于值的哈希生成默认颜色（保证同一值始终显示相同颜色）
+  return getDefaultColorForValue(valueStr)
+}
+
+// 根据值生成默认颜色（使用哈希算法确保一致性）
+function getDefaultColorForValue(value: string): string {
+  // 预定义的颜色列表
+  const colors = [
+    '#3b82f6', // blue
+    '#10b981', // green
+    '#f59e0b', // amber
+    '#ef4444', // red
+    '#8b5cf6', // violet
+    '#ec4899', // pink
+    '#06b6d4', // cyan
+    '#84cc16', // lime
+    '#f97316', // orange
+    '#6366f1', // indigo
+  ]
+  
+  // 简单的哈希函数
+  let hash = 0
+  for (let i = 0; i < value.length; i++) {
+    hash = ((hash << 5) - hash) + value.charCodeAt(i)
+    hash = hash & hash // 转换为32位整数
+  }
+  
+  return colors[Math.abs(hash) % colors.length]
+}
+
 function formatDisplayValue(value: any, fieldName: string) {
   let result: any = value
   
@@ -1198,6 +1276,23 @@ function formatDisplayValue(value: any, fieldName: string) {
   min-width: 0;
 }
 
+/* Select字段Badge样式 */
+.select-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: white;
+  white-space: nowrap;
+  line-height: 1.4;
+  transition: opacity 0.2s ease;
+}
+
+.select-badge:hover {
+  opacity: 0.9;
+}
+
 .card-actions { 
   display: flex; 
   align-items: center;