diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue index 7dc78e4..f870226 100644 --- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue +++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue @@ -149,6 +149,14 @@ + @@ -235,6 +243,14 @@ +
@@ -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>>({ + // 全局默认颜色映射(适用于所有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;