feat: 颜色样式随机调整

2026-06-03 22:08:17 +08:00
parent c99513a84e
commit 190f9383df
4 changed files with 148 additions and 18 deletions
--- a/src/utils/tagTone.js
+++ b/src/utils/tagTone.js
@@ -0,0 +1,114 @@
+/// https://htmlcolorcodes.com/zh/yanse-biao/tailwind-yanse-biao/
+export const TAG_TONE_COLORS_500 = [
+  "#ef4444", // Red 500
+  "#f97316", // Orange 500
+  "#f59e0b", // Amber 500
+  "#eab308", // Yellow 500
+  "#84cc16", // Lime 500
+  "#22c55e", // Green 500
+  "#10b981", // Emerald 500
+  "#14b8a6", // Teal 500
+  "#06b6d4", // Cyan 500
+  "#0ea5e9", // Sky 500
+  "#3b82f6", // Blue 500
+  "#6366f1", // Indigo 500
+  "#8b5cf6", // Violet 500
+  "#a855f7", // Purple 500
+  "#d946ef", // Fuchsia 500
+  "#ec4899", // Pink 500
+];
+export const TAG_TONE_COLORS_800 = [
+  "#991b1b", // Red 800
+  "#9a3412", // Orange 800
+  "#92400e", // Amber 800
+  "#854d0e", // Yellow 800
+  "#3f6212", // Lime 800
+  "#166534", // Green 800
+  "#065f46", // Emerald 800
+  "#115e59", // Teal 800
+  "#155e75", // Cyan 800
+  "#075985", // Sky 800
+  "#1e40af", // Blue 800
+  "#3730a3", // Indigo 800
+  "#5b21b6", // Violet 800
+  "#6b21a5", // Purple 800
+  "#86198f", // Fuchsia 800
+  "#9d174d", // Pink 800
+];
+
+export const TAG_TONE_COLORS = TAG_TONE_COLORS_500;
+
+const normalizeHex = (hex = "") => {
+  const value = String(hex).trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(value)) {
+    return value
+      .split("")
+      .map((char) => char + char)
+      .join("");
+  }
+  return /^[0-9a-fA-F]{6}$/.test(value) ? value : "";
+};
+
+const hexToRgb = (hex) => {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+
+  return {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16),
+  };
+};
+
+export const hexToRgba = (hex, alpha = 1) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return String(hex || "");
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+};
+
+export const pickRandomTagToneColor = (colors = TAG_TONE_COLORS) => {
+  const colorList = Array.isArray(colors) && colors.length ? colors : TAG_TONE_COLORS;
+  return colorList[Math.floor(Math.random() * colorList.length)];
+};
+
+export const getTagToneTextColor = (
+  color,
+  colors500 = TAG_TONE_COLORS_500,
+  colors800 = TAG_TONE_COLORS_800
+) => {
+  const normalizedColor = normalizeHex(color).toLowerCase();
+  const toneIndex = colors500.findIndex(
+    (item) => normalizeHex(item).toLowerCase() === normalizedColor
+  );
+
+  return toneIndex >= 0 && colors800[toneIndex]
+    ? colors800[toneIndex]
+    : color;
+};
+
+export const buildTagToneStyle = (
+  color,
+  {
+    borderAlpha = 0.2,
+    backgroundAlpha = 0.08,
+    borderWidth = 1,
+    colors500 = TAG_TONE_COLORS_500,
+    colors800 = TAG_TONE_COLORS_800,
+  } = {}
+) => {
+  const toneColor = color || colors500[0] || TAG_TONE_COLORS_500[0];
+  const textColor = getTagToneTextColor(toneColor, colors500, colors800);
+
+  return {
+    border: `${borderWidth}px solid ${hexToRgba(toneColor, borderAlpha)}`,
+    background: hexToRgba(toneColor, backgroundAlpha),
+    color: textColor,
+  };
+};
+
+export const getRandomTagToneStyle = (options = {}) => {
+  return buildTagToneStyle(
+    pickRandomTagToneColor(options.colors),
+    options
+  );
+};