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
Ryan Wang 2022-11-28 14:36:16 +08:00 committed by GitHub
parent 00aa964fb3
commit bf1ef171d0
3 changed files with 6 additions and 5 deletions

View File

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

View File

@ -43,7 +43,7 @@ const initialFormState: Tag = {
spec: {
displayName: "",
slug: "",
color: "#b16cBe",
color: "#ffffff",
cover: "",
},
apiVersion: "content.halo.run/v1alpha1",

View File

@ -2,7 +2,7 @@
"spec": {
"displayName": "Halo",
"slug": "halo",
"color": "#ad95b2",
"color": "#ffffff",
"cover": ""
},
"apiVersion": "content.halo.run/v1alpha1",