feat: 共性能力标签改用 hash 映射颜色,不依赖关键词
新增 tagHashColor(tag) — djb2 hash → 6色调色板,任何标签 都能自动分到固定颜色。原 tagColorClass 保留给服务中心使用。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
386c12cec0
commit
fc0012aa4f
@ -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; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
|
|||||||
@ -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]}`;
|
||||||
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
// 测量前先保守展示,避免先渲染整行标签再被裁成「组…」
|
// 测量前先保守展示,避免先渲染整行标签再被裁成「组…」
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user