diff --git a/package.json b/package.json index 1769424d..5deffa3e 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@mdi/font": "7.2.96", "@tauri-apps/api": "^1.4.0", "clipboard": "^2.0.11", + "color-convert": "^2.0.1", "echarts": "^5.4.3", "html2canvas": "^1.4.1", "js-md5": "^0.7.3", @@ -61,10 +62,12 @@ "vue-echarts": "^6.6.1", "vue-json-viewer": "^3.0.4", "vue-router": "^4.2.4", - "vuetify": "^3.3.15" + "vuetify": "^3.3.15", + "wcag-color": "^1.1.1" }, "devDependencies": { "@tauri-apps/cli": "^1.4.0", + "@types/color-convert": "^2.0.0", "@types/js-md5": "^0.7.0", "@types/node": "^20.5.7", "@typescript-eslint/eslint-plugin": "^6.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8ea86a9e..0d1b370c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ dependencies: clipboard: specifier: ^2.0.11 version: 2.0.11 + color-convert: + specifier: ^2.0.1 + version: 2.0.1 echarts: specifier: ^5.4.3 version: 5.4.3 @@ -50,11 +53,17 @@ dependencies: vuetify: specifier: ^3.3.15 version: 3.3.15(typescript@5.2.2)(vite-plugin-vuetify@1.0.2)(vue@3.3.4) + wcag-color: + specifier: ^1.1.1 + version: 1.1.1 devDependencies: '@tauri-apps/cli': specifier: ^1.4.0 version: 1.4.0 + '@types/color-convert': + specifier: ^2.0.0 + version: 2.0.0 '@types/js-md5': specifier: ^0.7.0 version: 0.7.0 @@ -651,6 +660,16 @@ packages: '@tauri-apps/cli-win32-x64-msvc': 1.4.0 dev: true + /@types/color-convert@2.0.0: + resolution: {integrity: sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==} + dependencies: + '@types/color-name': 1.1.1 + dev: true + + /@types/color-name@1.1.1: + resolution: {integrity: sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==} + dev: true + /@types/cookie@0.4.1: resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==} dev: true @@ -1318,7 +1337,6 @@ packages: engines: {node: '>=7.0.0'} dependencies: color-name: 1.1.4 - dev: true /color-name@1.1.3: resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==} @@ -1326,7 +1344,6 @@ packages: /color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} - dev: true /colord@2.9.3: resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} @@ -4873,6 +4890,10 @@ packages: vite-plugin-vuetify: 1.0.2(vite@4.4.9)(vue@3.3.4)(vuetify@3.3.15) vue: 3.3.4 + /wcag-color@1.1.1: + resolution: {integrity: sha512-KRez+YYOx7AGoQ6+Izu3YjNsISYAC+F/g0hJ+eNaaA8taeLbEkptkgA46SM9ioXxz/2KTjJpQqAhOwAQVwaTEQ==} + dev: false + /which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} dependencies: diff --git a/src/plugins/Mys/utils/parsePost.ts b/src/plugins/Mys/utils/parsePost.ts index d1161cc5..e275ef5d 100644 --- a/src/plugins/Mys/utils/parsePost.ts +++ b/src/plugins/Mys/utils/parsePost.ts @@ -5,23 +5,9 @@ * @since Beta v0.3.0 */ -/** - * @description 16进制颜色转 RGB - * @since Alpha v0.1.3 - * @param {string} hex 16进制颜色 - * @returns {{ r: number; g: number; b: number }} RGB颜色 - */ -function hexToRgb(hex: string): { r: number; g: number; b: number } { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - if (result === null) { - throw new Error("无法解析颜色"); - } - return { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16), - }; -} +// third party +import { score } from "wcag-color"; +import * as colorConvert from "color-convert"; /** * @description 给定两个16进制颜色值,确认两者是否相近 @@ -31,21 +17,13 @@ function hexToRgb(hex: string): { r: number; g: number; b: number } { * @returns {boolean} 是否相近 */ function isColorSimilar(colorBg: string, colorFg: string): boolean { - const colorBgRGB = hexToRgb(colorBg); - const colorFgRGB = hexToRgb(colorFg); - const colorBgL = 0.2126 * colorBgRGB.r + 0.7152 * colorBgRGB.g + 0.0722 * colorBgRGB.b; - const colorFgL = 0.2126 * colorFgRGB.r + 0.7152 * colorFgRGB.g + 0.0722 * colorFgRGB.b; - const colorBgLum = colorBgL / 255; - const colorFgLum = colorFgL / 255; - const colorBgLumFinal = - colorBgLum <= 0.03928 ? colorBgLum / 12.92 : Math.pow((colorBgLum + 0.055) / 1.055, 2.4); - const colorFgLumFinal = - colorFgLum <= 0.03928 ? colorFgLum / 12.92 : Math.pow((colorFgLum + 0.055) / 1.055, 2.4); - const contrast = - (Math.max(colorBgLumFinal, colorFgLumFinal) + 0.05) / - (Math.min(colorBgLumFinal, colorFgLumFinal) + 0.05); - // console.log(colorBg, colorFg, contrast); - return contrast > 1.5 && contrast < 4; + let hexBg, hexFg; + if (colorBg.startsWith("#")) hexBg = colorBg; + else hexBg = colorConvert.keyword.hex(colorBg); + if (colorFg.startsWith("#")) hexFg = colorFg; + else hexFg = colorConvert.keyword.hex(colorFg); + const contrast = score(hexFg, hexBg); + return contrast === "Fail"; } /**