From 962d147fadf2c29bcffe1d818ccd9c20b9737e1a Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 1 Nov 2025 17:34:49 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96pagetype=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5badge=E9=85=8D=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/pagetype/GenericListPage.vue     | 129 ++++++++++++------
 1 file changed, 90 insertions(+), 39 deletions(-)

diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
index f870226..e555215 100644
--- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
+++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
@@ -144,21 +144,27 @@
                 <div class="title">{{ row[primaryLabel] || row.name }}</div>
                 <div class="desc">{{ row.name }}</div>
                 <div class="meta">
-                  <span v-for="f in cardBadges" :key="f.key" class="badge">
-                    <template v-if="isBooleanField(f.key) && (row[f.key] === 1 || row[f.key] === 0 || typeof row[f.key] === 'boolean')">
-                      <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>
+                  <template v-for="f in cardBadges" :key="f.key">
+                    <!-- Select字段使用独立的span，不包裹在.badge中 -->
+                    <span 
+                      v-if="isSelectField(f.key) && row[f.key]"
+                      class="select-badge" 
+                      :style="{ 
+                        backgroundColor: getSelectBadgeColor(f.key, row[f.key]),
+                        color: getSelectBadgeTextColor(f.key, row[f.key])
+                      }"
+                    >
+                      {{ formatDisplayValue(row[f.key], f.key) }}
+                    </span>
+                    <!-- 其他字段使用.badge包裹 -->
+                    <span v-else class="badge">
+                      <template v-if="isBooleanField(f.key) && (row[f.key] === 1 || row[f.key] === 0 || typeof row[f.key] === 'boolean')">
+                        <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>{{ formatDisplayValue(row[f.key], f.key) }}</template>
+                    </span>
+                  </template>
                 </div>
               </div>
             </div>
@@ -246,7 +252,10 @@
                 <template v-else-if="isSelectField(col.key) && row[col.key]">
                   <span 
                     class="select-badge" 
-                    :style="{ backgroundColor: getSelectBadgeColor(col.key, row[col.key]) }"
+                    :style="{ 
+                      backgroundColor: getSelectBadgeColor(col.key, row[col.key]),
+                      color: getSelectBadgeTextColor(col.key, row[col.key])
+                    }"
                   >
                     {{ formatDisplayValue(row[col.key], col.key) }}
                   </span>
@@ -1010,16 +1019,22 @@ function isSelectField(fieldName: string) {
   return fieldMeta?.fieldtype === 'Select'
 }
 
-// Select字段颜色配置映射
+// Select字段颜色配置映射（柔和、低饱和度）
 // 格式：{ fieldName: { value: color } } 或 { 'global': { value: color } } 用于所有Select字段
-// 颜色可以是：预定义颜色名（如 'blue', 'green', 'red'）或十六进制颜色值（如 '#3b82f6'）
+// 推荐使用柔和颜色，如：'#e0f2fe'（浅蓝）、'#dcfce7'（浅绿）等
 const selectFieldColors = ref<Record<string, Record<string, string>>>({
   // 全局默认颜色映射（适用于所有Select字段，可被字段特定配置覆盖）
   'global': {
-    // 可以根据需要添加默认颜色
+    // 可以根据需要添加默认颜色（使用柔和色调）
   }
 })
 
+// Select字段文字颜色配置映射（与背景色配对）
+// 格式与 selectFieldColors 相同，但存储的是文字颜色
+const selectFieldTextColors = ref<Record<string, Record<string, string>>>({
+  'global': {}
+})
+
 // 获取Select字段值的背景色
 function getSelectBadgeColor(fieldName: string, value: any): string {
   if (!value || value === '') return ''
@@ -1041,20 +1056,21 @@ function getSelectBadgeColor(fieldName: string, value: any): string {
 }
 
 // 根据值生成默认颜色（使用哈希算法确保一致性）
+// 使用柔和、低饱和度的现代色彩方案，适合长时间观看
 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
-  ]
+  { bg: '#e6f8f0', text: '#0d684b' }, // 主品牌青绿
+  { bg: '#dcfce7', text: '#166534' }, // 绿
+  { bg: '#e0f2fe', text: '#0369a1' }, // 蓝
+  { bg: '#fef9c3', text: '#713f12' }, // 柔黄
+  { bg: '#fee2e2', text: '#991b1b' }, // 红
+  { bg: '#fdf2f8', text: '#9d174d' }, // 粉
+  { bg: '#f5f3ff', text: '#6d28d9' }, // 紫
+  { bg: '#fff7ed', text: '#9a3412' }, // 橙
+  { bg: '#f0fdfa', text: '#115e59' }, // 深青绿（呼应主色）
+  { bg: '#f1f5f9', text: '#0f172a' }, // 中性灰
+];
   
   // 简单的哈希函数
   let hash = 0
@@ -1063,7 +1079,40 @@ function getDefaultColorForValue(value: string): string {
     hash = hash & hash // 转换为32位整数
   }
   
-  return colors[Math.abs(hash) % colors.length]
+  const colorConfig = colors[Math.abs(hash) % colors.length]
+  // 存储文字颜色到数据中，用于动态设置
+  return colorConfig.bg
+}
+
+// 获取Select字段值的文字颜色（与背景色配对）
+function getSelectBadgeTextColor(fieldName: string, value: any): string {
+  if (!value || value === '') return '#374151'
+  
+  const valueStr = String(value)
+  
+  // 1. 先检查字段特定的文字颜色配置
+  if (selectFieldTextColors.value[fieldName] && selectFieldTextColors.value[fieldName][valueStr]) {
+    return selectFieldTextColors.value[fieldName][valueStr]
+  }
+  
+  // 2. 检查全局文字颜色配置
+  if (selectFieldTextColors.value['global'] && selectFieldTextColors.value['global'][valueStr]) {
+    return selectFieldTextColors.value['global'][valueStr]
+  }
+  
+  // 3. 使用默认文字颜色（基于哈希，与背景色配对）
+  const textColors = [
+    '#0369a1', '#166534', '#92400e', '#991b1b', '#6b21a8',
+    '#9f1239', '#0e7490', '#15803d', '#9a3412', '#4338ca'
+  ]
+  
+  let hash = 0
+  for (let i = 0; i < valueStr.length; i++) {
+    hash = ((hash << 5) - hash) + valueStr.charCodeAt(i)
+    hash = hash & hash
+  }
+  
+  return textColors[Math.abs(hash) % textColors.length]
 }
 
 function formatDisplayValue(value: any, fieldName: string) {
@@ -1276,21 +1325,23 @@ function formatDisplayValue(value: any, fieldName: string) {
   min-width: 0;
 }
 
-/* Select字段Badge样式 */
+/* Select字段Badge样式 - 柔和现代风格 */
 .select-badge {
   display: inline-block;
-  padding: 4px 10px;
-  border-radius: 12px;
+  padding: 4px 12px;
+  border-radius: 16px;
   font-size: 12px;
   font-weight: 500;
-  color: white;
   white-space: nowrap;
-  line-height: 1.4;
-  transition: opacity 0.2s ease;
+  line-height: 1.5;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  backdrop-filter: blur(4px);
 }
 
 .select-badge:hover {
-  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .card-actions {