feat: 共性能力标签改用 hash 映射颜色,不依赖关键词

新增 tagHashColor(tag) — djb2 hash → 6色调色板,任何标签
都能自动分到固定颜色。原 tagColorClass 保留给服务中心使用。

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
liulujian 2026-07-04 23:32:15 +08:00
parent 386c12cec0
commit fc0012aa4f
3 changed files with 35 additions and 4 deletions

View File

@ -142,11 +142,19 @@
@market-tag-bg-orange: #FFF3E0; @market-tag-bg-orange: #FFF3E0;
@market-tag-bg-purple: #F3E5F5; @market-tag-bg-purple: #F3E5F5;
@market-tag-color-teal: #00695C;
@market-tag-color-pink: #AD1457;
@market-tag-bg-teal: #E0F2F1;
@market-tag-bg-pink: #FCE4EC;
.market-tag-colors() { .market-tag-colors() {
&.tag--blue { color: @market-tag-color-blue; background: @market-tag-bg-blue; } &.tag--blue { color: @market-tag-color-blue; background: @market-tag-bg-blue; }
&.tag--green { color: @market-tag-color-green; background: @market-tag-bg-green; } &.tag--green { color: @market-tag-color-green; background: @market-tag-bg-green; }
&.tag--orange { color: @market-tag-color-orange; background: @market-tag-bg-orange; } &.tag--orange { color: @market-tag-color-orange; background: @market-tag-bg-orange; }
&.tag--purple { color: @market-tag-color-purple; background: @market-tag-bg-purple; } &.tag--purple { color: @market-tag-color-purple; background: @market-tag-bg-purple; }
&.tag--teal { color: @market-tag-color-teal; background: @market-tag-bg-teal; }
&.tag--pink { color: @market-tag-color-pink; background: @market-tag-bg-pink; }
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------

View File

@ -68,3 +68,26 @@ export function tagColorClass(tag) {
} }
return ''; return '';
} }
/** 6色调色板用于 hash 映射) */
const HASH_COLORS = ['blue', 'green', 'orange', 'purple', 'teal', 'pink'];
/** djb2 字符串哈希 */
function hashStr(str) {
let h = 5381;
for (let i = 0; i < str.length; i++) {
h = ((h << 5) + h + str.charCodeAt(i)) | 0;
}
return Math.abs(h);
}
/**
* 根据标签内容 hash 到固定颜色无关键词依赖任何标签都能分到颜色
* 同一标签始终返回同一颜色
* @param {string} tag
* @returns {string} CSS class name 'tag--blue'
*/
export function tagHashColor(tag) {
if (!tag) return '';
return `tag--${HASH_COLORS[hashStr(tag) % HASH_COLORS.length]}`;
}

View File

@ -15,7 +15,7 @@
<span <span
v-for="(tag, ti) in visibleTags" v-for="(tag, ti) in visibleTags"
:key="`visible-${ti}-${tag}`" :key="`visible-${ti}-${tag}`"
:class="['gxnlpt-tag', tagColorClass(tag)]" :class="['gxnlpt-tag', tagHashColor(tag)]"
:title="tag" :title="tag"
>{{ tag }}</span> >{{ tag }}</span>
<span <span
@ -31,7 +31,7 @@
v-for="(tag, ti) in tags" v-for="(tag, ti) in tags"
:key="`measure-${ti}-${tag}`" :key="`measure-${ti}-${tag}`"
ref="measureTag" ref="measureTag"
:class="['gxnlpt-tag', tagColorClass(tag)]" :class="['gxnlpt-tag', tagHashColor(tag)]"
>{{ tag }}</span> >{{ tag }}</span>
<span ref="measureEllipsis" class="gxnlpt-tag gxnlpt-tag-ellipsis">...</span> <span ref="measureEllipsis" class="gxnlpt-tag gxnlpt-tag-ellipsis">...</span>
</div> </div>
@ -39,7 +39,7 @@
</template> </template>
<script> <script>
import { tagColorClass } from '@/pages/index/utils/card-category'; import { tagHashColor } from '@/pages/index/utils/card-category';
import { import {
calcTagOverflowLayout, calcTagOverflowLayout,
formatHiddenTagsTooltip, formatHiddenTagsTooltip,
@ -103,7 +103,7 @@ export default {
} }
}, },
methods: { methods: {
tagColorClass, tagHashColor,
resetAndMeasure() { resetAndMeasure() {
const n = this.normalizedTags.length; const n = this.normalizedTags.length;
// //