From bf1ef171d0c539d8f9ce4d9958596c8a89d8a773 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 28 Nov 2022 14:36:16 +0800
Subject: [PATCH] feat: add support for automatic label color calculation for
 post tags (halo-dev/console#721)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 端添加自动计算文章标签文字颜色的支持。
```
---
 src/modules/contents/posts/tags/components/PostTag.vue     | 7 ++++---
 .../contents/posts/tags/components/TagEditingModal.vue     | 2 +-
 src/views/system/setup-data/tag.json                       | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/modules/contents/posts/tags/components/PostTag.vue b/src/modules/contents/posts/tags/components/PostTag.vue
index ba76104ff..d9848338d 100644
--- a/src/modules/contents/posts/tags/components/PostTag.vue
+++ b/src/modules/contents/posts/tags/components/PostTag.vue
@@ -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"
   >
diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue
index 412b7282d..7389ee983 100644
--- a/src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -43,7 +43,7 @@ const initialFormState: Tag = {
   spec: {
     displayName: "",
     slug: "",
-    color: "#b16cBe",
+    color: "#ffffff",
     cover: "",
   },
   apiVersion: "content.halo.run/v1alpha1",
diff --git a/src/views/system/setup-data/tag.json b/src/views/system/setup-data/tag.json
index b8294bafb..c82a11561 100644
--- a/src/views/system/setup-data/tag.json
+++ b/src/views/system/setup-data/tag.json
@@ -2,7 +2,7 @@
   "spec": {
     "displayName": "Halo",
     "slug": "halo",
-    "color": "#ad95b2",
+    "color": "#ffffff",
     "cover": ""
   },
   "apiVersion": "content.halo.run/v1alpha1",