mirror of https://github.com/halo-dev/halo
feat: add support for automatic label color calculation for post tags (halo-dev/console#721)
#### What type of PR is this? /kind feature /milestone 2.0.0-rc.2 #### What this PR does / why we need it: 添加自动计算文章标签文字颜色的支持。在之前的版本中,因为引入 colorjs.io 导致在构建之后无法显示标签,目前 colorjs.io 已经修复此问题,此 PR 回归之前的支持。 - https://github.com/LeaVerou/color.js/releases/tag/v0.4.2 - https://github.com/LeaVerou/color.js/pull/239 #### Special notes for your reviewer: 测试方式: 1. 创建若干文章标签,设置不同的背景色,观察文字颜色是否会自动与背景颜色形成反差。 2. 使用 `pnpm build` 构建生产版本,在 Halo 的配置文件中配置 `halo.console.location` 到 Console 的 `dist` 目录。 3. 检查 Console 文章列表中的标签是否显示正常。 #### Does this PR introduce a user-facing change? ```release-note Console 端添加自动计算文章标签文字颜色的支持。 ```pull/3445/head
parent
00aa964fb3
commit
bf1ef171d0
|
@ -3,6 +3,7 @@ import { VTag } from "@halo-dev/components";
|
|||
import type { Tag } from "@halo-dev/api-client";
|
||||
import { computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import Color from "colorjs.io";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
@ -19,8 +20,9 @@ const labelColor = computed(() => {
|
|||
if (!color) {
|
||||
return "inherit";
|
||||
}
|
||||
// TODO computed label color
|
||||
return "#333";
|
||||
const onWhite = Math.abs(Color.contrast(color, "white", "APCA"));
|
||||
const onBlack = Math.abs(Color.contrast(color, "black", "APCA"));
|
||||
return onWhite > onBlack ? "white" : "#333";
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
@ -40,7 +42,6 @@ const handleRouteToDetail = () => {
|
|||
:styles="{
|
||||
background: tag.spec.color,
|
||||
color: labelColor,
|
||||
borderColor: tag.spec.color,
|
||||
}"
|
||||
@click="handleRouteToDetail"
|
||||
>
|
||||
|
|
|
@ -43,7 +43,7 @@ const initialFormState: Tag = {
|
|||
spec: {
|
||||
displayName: "",
|
||||
slug: "",
|
||||
color: "#b16cBe",
|
||||
color: "#ffffff",
|
||||
cover: "",
|
||||
},
|
||||
apiVersion: "content.halo.run/v1alpha1",
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
"spec": {
|
||||
"displayName": "Halo",
|
||||
"slug": "halo",
|
||||
"color": "#ad95b2",
|
||||
"color": "#ffffff",
|
||||
"cover": ""
|
||||
},
|
||||
"apiVersion": "content.halo.run/v1alpha1",
|
||||
|
|
Loading…
Reference in New Issue