Skip to content

Commit

Permalink
good-update
Browse files Browse the repository at this point in the history 
支持了color list 颜色模式的统一表达式
  • Loading branch information
@ioahc
ioahc committed Nov 14, 2024
1 parent 38e40b7 commit 9aa417b
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 25 deletions.
121 changes: 99 additions & 22 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function App() {
const [colors, setColors] = useState<ColorData[]>([]);
const [selectedColorIndex, setSelectedColorIndex] = useState<number | null>(null);
const [isPopoverVisible, setIsPopoverVisible] = useState(false);
const [colorMode, setColorMode] = useState<'none' | 'hsl' | 'rgb' | 'hex'>('none');

const defaultColors: ColorData[] = [
{ name: 'Red', value: 'hsl(0, 100%, 50%)' },
Expand Down Expand Up @@ -64,14 +65,15 @@ function App() {
const displayColors = colors.length > 0 ? colors : defaultColors;

const handleColorChange = (index: number, newColor: string) => {
const convertedColor = colorMode !== 'none' ? convertColor(newColor, colorMode) : newColor;

if (colors.length === 0) {
// 如果是在默认颜色上操作，先将默认颜色复制到 colors 中
setColors([...defaultColors]);
setTimeout(() => {
const updatedColors = [...defaultColors];
updatedColors[index] = {
...updatedColors[index],
value: newColor
value: convertedColor
};
setColors(updatedColors);
}, 0);
Expand All @@ -81,7 +83,7 @@ function App() {
const updatedColors = [...colors];
updatedColors[index] = {
...updatedColors[index],
value: newColor
value: convertedColor
};
setColors(updatedColors);

Expand All @@ -90,9 +92,9 @@ function App() {
if (lines[index]) {
const formatMatch = lines[index].match(/title=(.*?);color=/);
if (formatMatch) {
lines[index] = `title=${formatMatch[1]};color=${newColor}`;
lines[index] = `title=${formatMatch[1]};color=${convertedColor}`;
} else {
lines[index] = newColor;
lines[index] = convertedColor;
}
setColorList(lines.join('\n'));
}
Expand Down Expand Up @@ -124,6 +126,47 @@ function App() {
};
}, [isPopoverVisible]);

const convertColor = (color: string, targetMode: 'hsl' | 'rgb' | 'hex'): string => {
// 创建临时元素来标准化颜色
const temp = document.createElement('div');
temp.style.color = color;
document.body.appendChild(temp);
const computedColor = window.getComputedStyle(temp).color;
document.body.removeChild(temp);

// 解析 RGB 值
const [r, g, b] = computedColor.match(/\d+/g)!.map(Number);

switch (targetMode) {
case 'rgb':
return `rgb(${r}, ${g}, ${b})`;
case 'hex':
return `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;
case 'hsl':
// RGB 转 HSL
const r1 = r / 255;
const g1 = g / 255;
const b1 = b / 255;
const max = Math.max(r1, g1, b1);
const min = Math.min(r1, g1, b1);
let h = 0, s = 0, l = (max + min) / 2;

if (max !== min) {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r1: h = (g1 - b1) / d + (g1 < b1 ? 6 : 0); break;
case g1: h = (b1 - r1) / d + 2; break;
case b1: h = (r1 - g1) / d + 4; break;
}
h *= 60;
}
return `hsl(${Math.round(h)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
default:
return color;
}
};

return (
<div className="flex flex-col h-screen bg-gray-50">
<header className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-purple-600 to-blue-600 text-white px-6 py-4 shadow-lg">
Expand Down Expand Up @@ -159,24 +202,58 @@ function App() {

<div className="space-y-4">
<div>
<div className="flex items-center gap-2 mb-2">
<label className="block text-sm font-medium text-gray-700">
Color List
</label>
<div className="relative">
<InfoIcon
className="w-4 h-4 text-gray-400 hover:text-gray-600 cursor-pointer transition-colors"
onClick={(e) => {
e.stopPropagation();
setIsPopoverVisible(!isPopoverVisible);
<div className="flex items-center gap-4 mb-2">
<div className="flex items-center gap-2">
<label className="block text-sm font-medium text-gray-700">
Color List
</label>
<div className="relative">
<InfoIcon
className="w-4 h-4 text-gray-400 hover:text-gray-600 cursor-pointer transition-colors"
onClick={(e) => {
e.stopPropagation();
setIsPopoverVisible(!isPopoverVisible);
}}
/>
{isPopoverVisible && (
<div className="absolute left-full top-0 ml-2 w-64 p-2 text-xs bg-gray-800 text-white rounded-md shadow-lg whitespace-pre-line">
{placeholderText}
<div className="absolute -left-1 top-2 w-2 h-2 bg-gray-800 rotate-45" />
</div>
)}
</div>
</div>

<div className="flex items-center gap-2">
<label className="block text-sm font-medium text-gray-700">
颜色模式
</label>
<select
className="block w-24 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
value={colorMode}
onChange={(e) => {
const newMode = e.target.value as 'none' | 'hsl' | 'rgb' | 'hex';
setColorMode(newMode);
if (newMode !== 'none' && colors.length > 0) {
const updatedColors = colors.map(color => ({
...color,
value: convertColor(color.value, newMode)
}));
setColors(updatedColors);
setColorList(updatedColors.map(color => {
if (color.name === color.value) {
return color.value;
}
return `title=${color.name};color=${color.value}`;
}).join('\n'));
}
}}
/>
{isPopoverVisible && (
<div className="absolute left-full top-0 ml-2 w-64 p-2 text-xs bg-gray-800 text-white rounded-md shadow-lg whitespace-pre-line">
{placeholderText}
<div className="absolute -left-1 top-2 w-2 h-2 bg-gray-800 rotate-45" />
</div>
)}
>
<option value="none">未选择</option>
<option value="hsl">HSL</option>
<option value="rgb">RGB</option>
<option value="hex">HEX</option>
</select>
</div>
</div>
<textarea
Expand Down
5 changes: 2 additions & 3 deletions src/components/ColorCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,10 @@ export const ColorCard: React.FC<ColorCardProps> = ({
onColorChange(e.target.value);
setTimeout(() => {
onBlur?.();
// 重置颜色选择器位置
if (colorInputRef.current) {
colorInputRef.current.style.position = 'absolute';
colorInputRef.current.style.left = '-9999px'; // 移出视图
colorInputRef.current.style.top = '-9999px'; // 移出视图
colorInputRef.current.style.left = '-9999px';
colorInputRef.current.style.top = '-9999px';
}
}, 0);
};
Expand Down

0 comments on commit 9aa417b

Please sign in to comment.