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 @@
{{ row[primaryLabel] || row.name }}
{{ row.name }}
-
-
- ✓
- ○
-
-
-
- {{ formatDisplayValue(row[f.key], f.key) }}
-
-
- {{ formatDisplayValue(row[f.key], f.key) }}
-
+
+
+
+ {{ formatDisplayValue(row[f.key], f.key) }}
+
+
+
+
+ ✓
+ ○
+
+ {{ formatDisplayValue(row[f.key], f.key) }}
+
+
@@ -246,7 +252,10 @@
{{ formatDisplayValue(row[col.key], col.key) }}
@@ -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>>({
// 全局默认颜色映射(适用于所有Select字段,可被字段特定配置覆盖)
'global': {
- // 可以根据需要添加默认颜色
+ // 可以根据需要添加默认颜色(使用柔和色调)
}
})
+// Select字段文字颜色配置映射(与背景色配对)
+// 格式与 selectFieldColors 相同,但存储的是文字颜色
+const selectFieldTextColors = ref>>({
+ '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 {