diff --git a/package.json b/package.json index aa3fd30..003337c 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@types/react": "^18.0.33", "@types/react-dom": "^18.0.11", "antd": "^5.16.4", + "colord": "^2.9.3", "compressorjs": "^1.2.1", "cross-env": "^7.0.3", "gh-pages": "^6.1.1", diff --git a/src/.umi/core/route.tsx b/src/.umi/core/route.tsx index 89e3f37..053ba0d 100644 --- a/src/.umi/core/route.tsx +++ b/src/.umi/core/route.tsx @@ -19,7 +19,7 @@ if (process.env.NODE_ENV === 'development') { import React from 'react'; export async function getRoutes() { - const routes = {"imageCompress/singleImageCompress":{"path":"imageCompress/singleImageCompress","id":"imageCompress/singleImageCompress","parentId":"@@/global-layout"},"imageCompress/batchImageCompress":{"path":"imageCompress/batchImageCompress","id":"imageCompress/batchImageCompress","parentId":"@@/global-layout"},"imageCompress/index":{"path":"imageCompress","id":"imageCompress/index","parentId":"@@/global-layout"},"imgFormatConversion":{"path":"imgFormatConversion","id":"imgFormatConversion","parentId":"@@/global-layout"},"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"jsonDiff":{"path":"jsonDiff","id":"jsonDiff","parentId":"@@/global-layout"},"imgScan":{"path":"imgScan","id":"imgScan","parentId":"@@/global-layout"},"chrono":{"path":"chrono","id":"chrono","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const; + const routes = {"imageCompress/singleImageCompress":{"path":"imageCompress/singleImageCompress","id":"imageCompress/singleImageCompress","parentId":"@@/global-layout"},"imageCompress/batchImageCompress":{"path":"imageCompress/batchImageCompress","id":"imageCompress/batchImageCompress","parentId":"@@/global-layout"},"imageCompress/index":{"path":"imageCompress","id":"imageCompress/index","parentId":"@@/global-layout"},"imgFormatConversion":{"path":"imgFormatConversion","id":"imgFormatConversion","parentId":"@@/global-layout"},"colorConversion":{"path":"colorConversion","id":"colorConversion","parentId":"@@/global-layout"},"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"jsonDiff":{"path":"jsonDiff","id":"jsonDiff","parentId":"@@/global-layout"},"imgScan":{"path":"imgScan","id":"imgScan","parentId":"@@/global-layout"},"chrono":{"path":"chrono","id":"chrono","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const; return { routes, routeComponents: { @@ -27,6 +27,7 @@ export async function getRoutes() { 'imageCompress/batchImageCompress': React.lazy(() => import(/* webpackChunkName: "src__pages__imageCompress__batchImageCompress" */'../../../src/pages/imageCompress/batchImageCompress.tsx')), 'imageCompress/index': React.lazy(() => import(/* webpackChunkName: "src__pages__imageCompress__index" */'../../../src/pages/imageCompress/index.tsx')), 'imgFormatConversion': React.lazy(() => import(/* webpackChunkName: "src__pages__imgFormatConversion" */'../../../src/pages/imgFormatConversion.tsx')), +'colorConversion': React.lazy(() => import(/* webpackChunkName: "src__pages__colorConversion" */'../../../src/pages/colorConversion.tsx')), 'jsonFormatting': React.lazy(() => import(/* webpackChunkName: "src__pages__jsonFormatting" */'../../../src/pages/jsonFormatting.tsx')), 'imageSlicing': React.lazy(() => import(/* webpackChunkName: "src__pages__imageSlicing" */'../../../src/pages/imageSlicing.tsx')), 'jsonDiff': React.lazy(() => import(/* webpackChunkName: "src__pages__jsonDiff" */'../../../src/pages/jsonDiff.tsx')), diff --git a/src/assets/img/color.svg b/src/assets/img/color.svg new file mode 100644 index 0000000..f605533 --- /dev/null +++ b/src/assets/img/color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layouts/menu.tsx b/src/layouts/menu.tsx index 47cbe79..67a4594 100644 --- a/src/layouts/menu.tsx +++ b/src/layouts/menu.tsx @@ -6,6 +6,7 @@ import JsonDiffSvg from "@/assets/img/jsonDiff.svg"; import imgScanSvg from "@/assets/img/imgScan.svg"; import imgFormatConversion from "@/assets/img/imgFormatConversion.svg"; import timeSvg from "@/assets/img/time.svg"; +import colorSvg from "@/assets/img/color.svg"; export const NAV_MAP = [ { @@ -55,4 +56,10 @@ export const NAV_MAP = [ icon: , des:'用于监控事物的持续时间' }, + { + itemKey: "/colorConversion", + text: "颜色转换器", + icon: , + des:'在不同格式之间转换颜色' + }, ]; \ No newline at end of file diff --git a/src/pages/colorConversion.tsx b/src/pages/colorConversion.tsx new file mode 100644 index 0000000..60a3012 --- /dev/null +++ b/src/pages/colorConversion.tsx @@ -0,0 +1,115 @@ +import { Button, Card, ColorPicker, Form, Input } from "antd"; +import { useState, useEffect, useMemo } from "react"; +import { colord,extend } from "colord"; +import type { Colord } from 'colord'; +import namesPlugin from "colord/plugins/names"; +import hwbPlugin from "colord/plugins/hwb"; +import lchPlugin from "colord/plugins/lch"; +import cmykPlugin from "colord/plugins/cmyk"; +import type { ColorPickerProps, GetProp } from 'antd'; + +type Color = GetProp; + +extend([namesPlugin,hwbPlugin,lchPlugin,cmykPlugin]); + + +export default function ColorConversion() { + const [form] = Form.useForm(); + const [color, setColor] = useState("#1677ff"); + + const parseColor = (color: any) => { + const colorVal: Colord = colord(color); + const colorValues = { + colorName: colorVal.toName({ closest: true }), + colorHex: colorVal.toHex(), + colorRgb: colorVal.toRgbString(), + colorHsl: colorVal.toHslString(), + colorHwb: colorVal.toHwbString(), + colorLch: colorVal.toLchString(), + colorCmyk: colorVal.toCmykString() + }; + return colorValues; + } + + const handleColorChange = (newColor: any) => { + setColor(newColor) + const colorVal:Colord = colord(newColor.toHexString()); + form.setFieldsValue({ + ...parseColor(colorVal) + }) + }; + + const handleInputChange = (e: any) => { + const { value } = e.target; + try { + const colorVal:Colord = colord(value) + if (colorVal.isValid()){ + setColor(colorVal.toHex()); + form.setFieldsValue({ + ...parseColor(colorVal) + }) + } + } catch { + + } + + }; + + const bgColor = useMemo( + () => (typeof color === 'string' ? color : color!.toHexString()), + [color], + ); + + const btnStyle: React.CSSProperties = { + backgroundColor: bgColor, + width: '100%' + }; + + useEffect(() => { + form.setFieldsValue({ + ...parseColor(color) + }) + },[]) + + return ( +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ ); +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 2cdaa34..84686ac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2626,6 +2626,11 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +colord@^2.9.3: + version "2.9.3" + resolved "https://registry.npmmirror.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" + integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw== + commander@^11.0.0, commander@^11.1.0: version "11.1.0" resolved "https://registry.npmmirror.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906"