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 type { Tag } from "@halo-dev/api-client";
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
import Color from "colorjs.io";
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
@ -19,8 +20,9 @@ const labelColor = computed(() => {
|
||||||
if (!color) {
|
if (!color) {
|
||||||
return "inherit";
|
return "inherit";
|
||||||
}
|
}
|
||||||
// TODO computed label color
|
const onWhite = Math.abs(Color.contrast(color, "white", "APCA"));
|
||||||
return "#333";
|
const onBlack = Math.abs(Color.contrast(color, "black", "APCA"));
|
||||||
|
return onWhite > onBlack ? "white" : "#333";
|
||||||
});
|
});
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -40,7 +42,6 @@ const handleRouteToDetail = () => {
|
||||||
:styles="{
|
:styles="{
|
||||||
background: tag.spec.color,
|
background: tag.spec.color,
|
||||||
color: labelColor,
|
color: labelColor,
|
||||||
borderColor: tag.spec.color,
|
|
||||||
}"
|
}"
|
||||||
@click="handleRouteToDetail"
|
@click="handleRouteToDetail"
|
||||||
>
|
>
|
||||||
|
|
|
@ -43,7 +43,7 @@ const initialFormState: Tag = {
|
||||||
spec: {
|
spec: {
|
||||||
displayName: "",
|
displayName: "",
|
||||||
slug: "",
|
slug: "",
|
||||||
color: "#b16cBe",
|
color: "#ffffff",
|
||||||
cover: "",
|
cover: "",
|
||||||
},
|
},
|
||||||
apiVersion: "content.halo.run/v1alpha1",
|
apiVersion: "content.halo.run/v1alpha1",
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
"spec": {
|
"spec": {
|
||||||
"displayName": "Halo",
|
"displayName": "Halo",
|
||||||
"slug": "halo",
|
"slug": "halo",
|
||||||
"color": "#ad95b2",
|
"color": "#ffffff",
|
||||||
"cover": ""
|
"cover": ""
|
||||||
},
|
},
|
||||||
"apiVersion": "content.halo.run/v1alpha1",
|
"apiVersion": "content.halo.run/v1alpha1",
|
||||||
|
|
Loading…
Reference in New Issue