jingrowlocal/jingrow-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化pagetype列表页badge配色

Browse Source
This commit is contained in:
jingrow 2025-11-01 17:34:49 +08:00
parent a2e4a0e074
commit 962d147fad
1 changed files with 90 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
View File

@ -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 {