-
+
@@ -476,7 +484,7 @@ class ColorPage extends Component {
/>
-
+
@@ -495,7 +503,7 @@ class ColorPage extends Component {
/>
-
+
@@ -514,7 +522,7 @@ class ColorPage extends Component {
/>
-
+
@@ -533,7 +541,7 @@ class ColorPage extends Component {
/>
-
+
@@ -552,7 +560,7 @@ class ColorPage extends Component {
/>
-
+
@@ -564,7 +572,7 @@ class ColorPage extends Component {
+ = MAX_COLOR_HUB_SLOTS ? `已满 ${MAX_COLOR_HUB_SLOTS} 个，将替换最早的颜色` : "新建随机颜色"}
+ >
{
- (group as string[][]).forEach(colors => {
+ (group as unknown as GradientPreset[]).forEach(colors => {
allGradients!.push({
colors,
tags: colors.map(c => classifyColor(c)),
@@ -71,18 +73,8 @@ function getGradients(): GradientItem[] {
return allGradients;
}
-/** 计算渐变线的起止坐标(用于 Canvas 渲染) */
-function calculateGradientLine(width: number, height: number, angle: number) {
- const rad = angle * Math.PI / 180 + Math.PI / 2;
- const len = Math.sqrt(width / 2 * width / 2 + height / 2 * height / 2);
- const tx = Math.cos(rad) * len + width / 2;
- const ty = Math.sin(rad) * len + height / 2;
- return { tx, ty, bx: width / 2, by: height / 2 };
-}
-
-/** 默认渐变角度和尺寸 */
+/** 默认渐变角度 */
const DEFAULT_ANGLE = 135;
-const DEFAULT_SIZE = 500;
/** 方向编辑器 - 可视化调整渐变角度的圆形控件 */
interface DirectionEditorProps {
@@ -160,6 +152,8 @@ class DirectionEditor extends PureComponent {
/** 渐变色详情弹窗 - 角度/尺寸调整、CSS代码复制、导出图片 */
interface GradientDialogProps {
gradientData: string[] | null;
+ /** 浏览器模式下的操作反馈(平台模式靠窗口隐藏反馈, 不需要) */
+ showMessage: (msg: string) => void;
}
interface GradientDialogState {
@@ -202,14 +196,15 @@ class GradientDialog extends Component
handleCssCodeCopy = () => {
const cssCode = `linear-gradient(${this.state.angle}deg,${this.props.gradientData!.join(",").toLowerCase()})`;
copyText(cssCode);
- hideMainWindow();
+ if (isPlatform) hideMainWindow();
+ else this.props.showMessage(`已复制 ${cssCode}`);
};
handleImageExport = () => {
const { angle, imageWidth, imageHeight } = this.state;
const w = parseInt(imageWidth);
const h = parseInt(imageHeight);
- if (w < 1 || h < 1) return;
+ if (!Number.isFinite(w) || !Number.isFinite(h) || w < 1 || h < 1) return;
const canvas = document.createElement("canvas");
canvas.width = w;
@@ -237,9 +232,10 @@ class GradientDialog extends Component
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, w, h);
- copyImage(canvas.toDataURL());
+ copyImage(canvas.toDataURL(), `gradient-${w}x${h}.png`);
canvas.remove();
- hideMainWindow();
+ if (isPlatform) hideMainWindow();
+ else this.props.showMessage(`已下载图片 ${w}×${h}`);
};
componentDidUpdate(prev: GradientDialogProps) {
@@ -333,10 +329,15 @@ interface GradientsPageState {
gradientData: string[] | null;
}
-class GradientsPage extends Component<{ onColorClick: (e: any) => void }, GradientsPageState> {
+interface GradientsPageProps {
+ onColorClick: (e: any) => void;
+ showMessage: (msg: string) => void;
+}
+
+class GradientsPage extends Component {
private gradientContentRef: HTMLDivElement | null = null;
- constructor(props: { onColorClick: (e: any) => void }) {
+ constructor(props: GradientsPageProps) {
super(props);
this.state = {
gradients: getGradients(),
@@ -387,7 +388,7 @@ class GradientsPage extends Component<{ onColorClick: (e: any) => void }, Gradie
);
}
diff --git a/plugins/color-helper/pages/ImagePalettePage.tsx b/plugins/color-helper/pages/ImagePalettePage.tsx
index 4f69b4548..59f397746 100644
--- a/plugins/color-helper/pages/ImagePalettePage.tsx
+++ b/plugins/color-helper/pages/ImagePalettePage.tsx
@@ -9,8 +9,6 @@ import Dialog from '@mui/material/Dialog';
import IconButton from '@mui/material/IconButton';
import TextField from '@mui/material/TextField';
import CircularProgress from '@mui/material/CircularProgress';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
import CloseIcon from '@mui/icons-material/Close';
import RefreshIcon from '@mui/icons-material/Refresh';
import ClearIcon from '@mui/icons-material/Clear';
@@ -18,9 +16,9 @@ import FolderOpenIcon from '@mui/icons-material/FolderOpen';
import CropIcon from '@mui/icons-material/Crop';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import chroma from 'chroma-js';
+import { isDarkColor } from '../utils/color';
import { quantize } from '../utils/quantize';
-import { isDarkColor, textColorFor, dimColor } from '../utils/color';
-import { screenCapture, copyText, hideMainWindow, aiChat, isAIAvailable } from '../utils/platform';
+import { screenCapture, aiChat, isAIAvailable } from '../utils/platform';
// 导入模板封面图
import cover01 from '../assets/color-card-01.jpg';
@@ -89,7 +87,6 @@ function getColor(img: HTMLImageElement, quality: number = 10): number[] | null
* @param quality 采样间隔，默认10
*/
function getPalette(img: HTMLImageElement, colorCount?: number, quality?: number): number[][] | null {
- // 参数校验 -
let count = colorCount;
let q = quality;
if (count !== undefined && Number.isInteger(count)) {
@@ -106,19 +103,18 @@ function getPalette(img: HTMLImageElement, colorCount?: number, quality?: number
const imageData = getImageData(img);
const pixels = filterPixels(imageData.data, imageData.width * imageData.height, q);
const cmap = quantize(pixels, count);
- return cmap && cmap !== false ? cmap.palette() : null;
+ return cmap ? cmap.palette() : null;
}
/**
* 从图片中提取主色和配色
- * 主色: getColor 提取5色中的第一个
- * 配色: getPalette 提取10色，排除主色后的列表
+ * 主色: 取样粗一些(quality 10)取 5 色的首个, 作为整图的代表色
+ * 配色: 取样细一些取 10 色, 排除主色后的列表
*/
-// 原始: const o = new Uu; s = a4(o.getColor(n.target)); c = o.getPalette(n.target).map(u => a4(u))
function extractColorsFromImage(img: HTMLImageElement): { mainColor: string; paletteColors: string[] } | null {
try {
- const mainRgb = getColor(img, 10); // getColor(target, 10) → getPalette(target, 5, 10)[0]
- const paletteRgbs = getPalette(img); // getPalette(target) → colorCount=10, quality=10
+ const mainRgb = getColor(img, 10);
+ const paletteRgbs = getPalette(img);
if (!mainRgb) return null;
@@ -133,6 +129,9 @@ function extractColorsFromImage(img: HTMLImageElement): { mainColor: string; pal
}
}
+/** AI 名称缓存，避免重复调用 */
+const nameCache = new Map();
+
/**
* AI 色卡名称生成 Hook
* 调用 AI 根据颜色值生成文艺名称，支持缓存和自动生成
@@ -140,13 +139,16 @@ function extractColorsFromImage(img: HTMLImageElement): { mainColor: string; pal
* @param style 命名风格，默认"文艺优雅"
* @param nameLength 名称字数，默认4
* @param autoGenerate 是否在挂载时自动生成
+ *
+ * status 表示名字是否已经有定论: idle 是"还没开始", loading 中,
+ * done / error 都算"有定论了" —— 调用方要等它落定再开始画图,
+ * 否则会先画一版占位名。
*/
-/** AI 名称缓存，避免重复调用 */
-const nameCache = new Map();
+type NameStatus = 'idle' | 'loading' | 'done' | 'error';
function useGenerateName(color: string, style: string = '文艺优雅', nameLength: number = 4, autoGenerate: boolean = false) {
const [name, setName] = useState('');
- const [loading, setLoading] = useState(false);
+ const [status, setStatus] = useState('idle');
const [error, setError] = useState('');
const cacheKey = useMemo(() => color + style + nameLength, [color, style, nameLength]);
@@ -161,129 +163,83 @@ function useGenerateName(color: string, style: string = '文艺优雅', nameLeng
};
}, [cacheKey]);
- const generateName = useCallback((targetCacheKey: string, excludeName?: string) => {
+ const generateName = useCallback((excludeName?: string) => {
const ai = isAIAvailable();
if (!ai) {
setError('当前版本不支持 AI 功能');
- return null;
+ setStatus('error');
+ return;
}
const systemPrompt = `
-# Role
-你是一个颜色命名大师
-## Skills
-- 读取用户输入的颜色值
-- 给读取的颜色起一个好听的名字，名字风格${style}
-## Actions
-- 根据用户输入的颜色起一个名字
-- 你直接输出名字，不再额外输出其他内容
-- 名字必须是${nameLength}个汉字组成
-${excludeName ? `- 名字不能是${excludeName}` : ''}
-## Input
-输入：{颜色值}
-## 输出
-{名字}
+# 角色
+你是颜色命名大师，给颜色起好听的名字。
+
+# 任务
+给用户给出的颜色起一个名字，要求：
+- 名字恰好 ${nameLength} 个汉字
+- 风格${style}
+${excludeName ? `- 不能是${excludeName}\n` : ''}
+# 输出格式
+只输出名字本身，不要引号、标点、解释或代码块标记。
+
+# 示例
+暮色青岚
`;
- setLoading(true);
+ // 记下发起时的 key, 回调里对比它判断这次结果是否已经过期
+ const target = cacheKey;
+ setStatus('loading');
setName('');
setError('');
- const promise = aiChat([
+ aiChat([
{ role: 'system', content: systemPrompt },
- { role: 'user', content: `输入: ${color}` },
- ]);
-
- promise.then(result => {
- if (!isMounted.current || targetCacheKey !== latestCacheKey.current) return;
- setLoading(false);
- setName(result.content);
- nameCache.set(targetCacheKey, result.content);
+ { role: 'user', content: `颜色: ${color}` },
+ ]).then(result => {
+ if (!isMounted.current || target !== latestCacheKey.current) return;
+ // ai() 返回的 content 是可选字段, 缺失时按空串处理
+ const next = result.content ?? '';
+ setName(next);
+ setStatus('done');
+ // 只在非"重新生成"时写缓存, 否则换过的名字会污染下次打开弹窗的命中结果
+ if (!excludeName) nameCache.set(target, next);
}).catch(() => {
- if (!isMounted.current || targetCacheKey !== latestCacheKey.current) return;
- setLoading(false);
+ if (!isMounted.current || target !== latestCacheKey.current) return;
setError('AI 调用异常');
+ setStatus('error');
});
-
- return promise;
- }, [style, nameLength, color]);
+ }, [style, nameLength, color, cacheKey]);
// 自动生成
useEffect(() => {
if (!autoGenerate || !color) return;
- const key = color + style + nameLength;
- if (nameCache.has(key)) {
- setName(nameCache.get(key)!);
+ const cached = nameCache.get(cacheKey);
+ if (cached !== undefined) {
+ setName(cached);
+ setStatus('done');
return;
}
- generateName(key);
- }, [color, style, nameLength, generateName, autoGenerate]);
+ generateName();
+ }, [cacheKey, color, autoGenerate, generateName]);
- return [name, { loading, error, generateName, cacheKey }] as const;
+ return { name, status, error, generateName };
}
-/** 画面场景选项(用于 AI 色卡描述) */
-const SCENE_OPTIONS = ["明星影视", "游戏动漫", "生活家居", "文旅出行", "时尚美妆", "体育赛事", "科技数码", "汽车交通", "艺术设计"];
-
-/** 画面场景选择器 - 下拉菜单选择场景标签 */
-interface SceneSelectorProps {
- data: string[];
- value: string | null;
- disabled?: boolean;
- onChange: (value: string | null) => void;
-}
-
-function SceneSelector({ data, value, disabled, onChange }: SceneSelectorProps) {
- const [anchorEl, setAnchorEl] = useState(null);
-
- if (value) {
- return (
-
- {value}
- { if (!disabled) onChange(null); }} />
-
- );
- }
-
- return (
- <>
- { if (!disabled) setAnchorEl(e.currentTarget); }}>
-
-
-
- );
-}
-
-/** 色卡模板定义: id/尺寸/封面图/名称字数 */
+/** 色卡模板定义: id/尺寸/封面图 */
interface TemplateDef {
id: string;
sizes: number | [number, number];
cover: string;
- nameLength: number;
}
const TEMPLATES: TemplateDef[] = [
- { id: '01', sizes: 1200, cover: cover01, nameLength: 4 },
- { id: '02', sizes: 1200, cover: cover02, nameLength: 4 },
- { id: '03', sizes: [1200 * 3 / 4, 1200], cover: cover03, nameLength: 4 },
- { id: '04', sizes: [1800 * 9 / 16, 1800], cover: cover04, nameLength: 4 },
+ { id: '01', sizes: 1200, cover: cover01 },
+ { id: '02', sizes: 1200, cover: cover02 },
+ { id: '03', sizes: [1200 * 3 / 4, 1200], cover: cover03 },
+ { id: '04', sizes: [1800 * 9 / 16, 1800], cover: cover04 },
];
/** 获取模板的画布尺寸 [宽, 高] */
@@ -297,8 +253,11 @@ function getTemplateSize(template: TemplateDef): [number, number] {
/**
* 色卡 Canvas 渲染
- * 根据模板类型在 Canvas 上绘制色卡: 背景色/图片 + 名称 + 配色色块
- * 支持4种模板: 01(渐变遮罩)/02(模糊大背景)/03(cover填充)/04(底部横条)
+ * 四个模板分别对应一种版式: 01 右下横向色块 / 02 底部全宽等分 / 03 左上竖排圆形 / 04 白底内缩留白, 上 3/4 图片 + 下方居左名称与色块
+ * 背景图一律 cover: 01-03 铺满整张卡片, 04 只铺内容区上 3/4
+ * 主色铺底兜住没有背景图的情况, 04 用白底
+ *
+ * withText=false 时只画背景与色块(供 UI 里的占位预览用), 不画任何文字
*/
function renderColorCard(
canvas: HTMLCanvasElement,
@@ -308,195 +267,297 @@ function renderColorCard(
paletteColors: string[];
name: string;
templateId: string;
+ withText?: boolean;
}
) {
- const { bgImage, primaryColor, paletteColors, name, templateId } = options;
+ const { bgImage, primaryColor, paletteColors, name, templateId, withText = true } = options;
const template = TEMPLATES.find(t => t.id === templateId) || TEMPLATES[0];
const [w, h] = getTemplateSize(template);
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d')!;
- const dark = isDarkColor(primaryColor);
- const textCol = dark ? '#fff' : '#000';
- const dimCol = dimColor(primaryColor, 0.3);
- const semiCol = dimColor(primaryColor, 0.6);
- // 通用渲染：背景色填充
- ctx.fillStyle = primaryColor;
+ // 所有尺寸按卡片宽度的百分比取(q = 1cqw), 换画布比例时元素占比不变
+ const q = (v: number) => (w * v) / 100;
+
+ /** 把背景图 cover 画进指定矩形, 超出部分裁掉 */
+ const drawCover = (x: number, y: number, boxW: number, boxH: number) => {
+ if (!bgImage) return;
+ const scale = Math.max(boxW / bgImage.width, boxH / bgImage.height);
+ const dw = bgImage.width * scale;
+ const dh = bgImage.height * scale;
+ ctx.save();
+ ctx.beginPath();
+ ctx.rect(x, y, boxW, boxH);
+ ctx.clip();
+ ctx.drawImage(bgImage, x + (boxW - dw) / 2, y + (boxH - dh) / 2, dw, dh);
+ ctx.restore();
+ };
+
+ // 通用渲染：背景色填充, 04 是白底
+ ctx.fillStyle = templateId === '04' ? '#fff' : primaryColor;
ctx.fillRect(0, 0, w, h);
// 背景图（如果有）
if (bgImage) {
- const coverFit = (cw: number, ch: number) => {
- const scale = Math.max(cw / bgImage.width, ch / bgImage.height) * 1.8;
- const dw = bgImage.width * scale;
- const dh = bgImage.height * scale;
- return { dx: (cw - dw) / 2, dy: 0, dw, dh };
- };
-
if (templateId === '01') {
- // 01: 图片居中上半部分，下半渐变遮罩
- const scale = Math.min(w / bgImage.width, h / bgImage.height);
+ // 01: 图片整幅 cover 铺满
+ const scale = Math.max(w / bgImage.width, h / bgImage.height);
const dw = bgImage.width * scale;
const dh = bgImage.height * scale;
- ctx.drawImage(bgImage, (w - dw) / 2, 0, dw, dh);
+ ctx.drawImage(bgImage, (w - dw) / 2, (h - dh) / 2, dw, dh);
- // 下半渐变遮罩
- const grad = ctx.createLinearGradient(0, h * 0.5, 0, h * 0.65);
+ // 底部 1/4 纯色阻挡, 上缘一小段渐变过渡
+ const bandTop = (h * 3) / 4;
+ const grad = ctx.createLinearGradient(0, bandTop, 0, bandTop + h * 0.08);
grad.addColorStop(0, chroma(primaryColor).alpha(0.01).hex());
grad.addColorStop(0.1, chroma(primaryColor).alpha(0.5).hex());
grad.addColorStop(0.25, primaryColor);
grad.addColorStop(1, primaryColor);
ctx.fillStyle = grad;
- ctx.fillRect(0, h * 0.5, w, h * 0.5);
+ ctx.fillRect(0, bandTop, w, h - bandTop);
} else if (templateId === '02') {
- // 002: 图片模糊大背景 + 居中裁剪
- const { dx, dy, dw, dh } = coverFit(w, h);
- ctx.globalAlpha = 0.3;
- ctx.filter = 'blur(40px)';
- ctx.drawImage(bgImage, dx, dy, dw, dh);
- ctx.filter = 'none';
- ctx.globalAlpha = 1;
-
- // 居中裁剪图
- const scale2 = Math.min(w * 0.95 / bgImage.width, h * 0.95 / bgImage.height);
- const dw2 = bgImage.width * scale2;
- const dh2 = bgImage.height * scale2;
- ctx.drawImage(bgImage, (w - dw2) / 2, (h - dh2) / 2, dw2, dh2);
- } else if (templateId === '03') {
- // 003: 图片 cover 填充
+ // 02: 图片整幅 cover 铺满
const scale = Math.max(w / bgImage.width, h / bgImage.height);
const dw = bgImage.width * scale;
const dh = bgImage.height * scale;
ctx.drawImage(bgImage, (w - dw) / 2, (h - dh) / 2, dw, dh);
- } else if (templateId === '04') {
- // 004: 图片 cover 填充
+ } else if (templateId === '03') {
+ // 图片 cover 填充
const scale = Math.max(w / bgImage.width, h / bgImage.height);
const dw = bgImage.width * scale;
const dh = bgImage.height * scale;
ctx.drawImage(bgImage, (w - dw) / 2, (h - dh) / 2, dw, dh);
+ } else if (templateId === '04') {
+ // 04: 内容整体内缩留白, 图片铺满内容区上方 3/4
+ const inset = q(6);
+ const contentW = w - inset * 2;
+ const contentH = h - inset * 2;
+ drawCover(inset, inset, contentW, contentH * 0.75);
}
}
- // 文字和配色色块
+ // 配色色块。四个模板版式不同, 文字统一走 label(),
+ // 占位预览(withText=false)时只出色块
+ const label = (value: string, x: number, y: number) => {
+ if (withText) ctx.fillText(value, x, y);
+ };
+ /** 该模板要显示的色: 主色在前, 再补配色; 配色为空时只显示主色 */
+ const pick = (n: number) => [primaryColor, ...paletteColors].slice(0, n);
+
+ /** 色块内色值的颜色: 深色块用白字, 浅色块用深字 */
+ const hexOn = (color: string) => (isDarkColor(color) ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.75)');
+
+ // 字号一律由它要放的槽位反推, 保证"字号变大 + 槽位固定"时文字还能缩回去
+ // 文本框按 'M' 量, 比按平均字宽估更保守
+ let measureCtx: CanvasRenderingContext2D | null = null;
+ const textW = (text: string, font: string): number => {
+ if (!measureCtx) measureCtx = document.createElement('canvas').getContext('2d')!;
+ measureCtx.font = font;
+ return measureCtx.measureText(text).width;
+ };
+ /** 在 [min,max] 内找能塞进 maxW 的最大字号; 连 min 都放不下时返回 0, 由调用方跳过不写 */
+ const fitFont = (text: string, weight: string, maxW: number, min: number, max: number): number => {
+ if (maxW <= 0) return 0;
+ const fontAt = (size: number) => weight ? `${weight} ${size}px sans-serif` : `${size}px sans-serif`;
+ if (textW(text, fontAt(max)) <= maxW) return max;
+ let lo = 0;
+ let hi = max;
+ for (let i = 0; i < 12; i++) {
+ const mid = (lo + hi) / 2;
+ if (textW(text, fontAt(mid)) <= maxW) lo = mid;
+ else hi = mid;
+ }
+ return lo >= min ? lo : 0;
+ };
+
+ const shadowOn = () => {
+ ctx.shadowColor = 'rgba(0,0,0,0.5)';
+ ctx.shadowBlur = q(1);
+ };
+ const shadowOff = () => { ctx.shadowBlur = 0; };
+
if (templateId === '01') {
- // 01 模板：下半部分文字 + 配色
- const baseY = h * 2.1 / 3;
- ctx.fillStyle = semiCol;
- ctx.font = `bold ${w / 9}px serif`;
- ctx.textAlign = 'left';
- ctx.fillText(name || '配色方案', w / 20, baseY);
-
- // 主色圆 + 色值
- const circleR = w / 50;
- const circleY = baseY + h / 6;
- ctx.beginPath();
- ctx.arc(w / 20 + circleR, circleY, circleR, 0, Math.PI * 2);
- ctx.fillStyle = semiCol;
- ctx.fill();
- ctx.fillStyle = semiCol;
- ctx.font = `bold ${w / 30}px sans-serif`;
- ctx.textAlign = 'left';
- ctx.fillText(primaryColor, w / 20 + circleR * 2 + w / 30, circleY + w / 80);
-
- // 配色色块
- const colors = paletteColors.slice(0, 4);
- const blockSize = w / 7;
- const startX = w / 2;
+ // 01 右下角矩形色块组, 整组对齐右下角
+ // 名称在左侧、顶部与色块组齐平
+ const colors = pick(5);
+ const gap = q(1);
+ const blockH = q(16);
+ const margin = q(4);
+ const widths = colors.map((_, i) => (i === 0 ? q(12) : q(9)));
+ const totalW = widths.reduce((a, b) => a + b, 0) + gap * (colors.length - 1);
+ const groupX = w - margin - totalW;
+ const groupY = h - margin - blockH;
+
+ let x = groupX;
colors.forEach((color, i) => {
- const y = circleY + w / 60 + i * (blockSize + w / 60);
ctx.fillStyle = color;
- ctx.beginPath();
- ctx.roundRect(startX, y, blockSize, blockSize, 8);
- ctx.fill();
- ctx.fillStyle = textColorFor(color);
- ctx.font = `${w / 38}px sans-serif`;
- ctx.textAlign = 'center';
- ctx.fillText(color, startX + blockSize / 2, y + blockSize / 2 + w / 76);
+ ctx.fillRect(x, groupY, widths[i], blockH);
+ // 主色块不写色号, 只让配色块带自己的值
+ if (i > 0) {
+ const text = color.toUpperCase();
+ const size = fitFont(text, '', widths[i] - q(1.2), q(0.5), q(2.5));
+ if (size > 0) {
+ ctx.fillStyle = hexOn(color);
+ ctx.font = `${size}px sans-serif`;
+ ctx.textAlign = 'center';
+ label(text, x + widths[i] / 2, groupY + blockH / 2 + size / 3);
+ }
+ }
+ x += widths[i] + gap;
});
- // 签名
- // ctx.fillStyle = dimCol;
- // ctx.font = `${w / 32}px sans-serif`;
- // ctx.textAlign = 'left';
- // ctx.fillText('色卡', w / 20, baseY + h / 6 + w / 20);
+ if (withText) {
+ const nameText = name || '配色方案';
+ const nameMax = groupX - margin - q(2);
+ const nameSize = fitFont(nameText, 'bold', nameMax, q(1.6), q(3.2));
+ if (nameSize > 0) {
+ shadowOn();
+ ctx.textAlign = 'left';
+ ctx.fillStyle = '#fff';
+ ctx.font = `bold ${nameSize}px sans-serif`;
+ ctx.fillText(nameText, margin, groupY + nameSize * 0.8);
+
+ // 主色号跟在名称下面
+ const hexSize = fitFont(primaryColor.toUpperCase(), '', nameMax, q(0.8), nameSize * 0.5);
+ if (hexSize > 0) {
+ ctx.fillStyle = 'rgba(255,255,255,0.75)';
+ ctx.font = `${hexSize}px sans-serif`;
+ ctx.fillText(primaryColor.toUpperCase(), margin, groupY + nameSize * 0.8 + hexSize * 1.6);
+ }
+ shadowOff();
+ }
+ }
} else if (templateId === '02') {
- // 002 模板：底部配色横排
- const allColors = [primaryColor, ...paletteColors.slice(0, 5)];
- const blockSize = w / 6;
- const startX = w / 20;
- const startY = h - h / 4;
-
- allColors.forEach((color, i) => {
- const x = startX + i * (blockSize + w / 60);
+ // 02 底部全宽等分矩形: 色值内嵌居中, 名称左上角
+ const colors = pick(6);
+ const blockH = q(10);
+ const blockW = w / colors.length;
+ const blockY = h - blockH;
+
+ colors.forEach((color, i) => {
+ const text = color.toUpperCase();
+ const x = i * blockW;
+ const size = fitFont(text, '', blockW - q(1.2), q(0.5), q(2.5));
ctx.fillStyle = color;
- ctx.beginPath();
- ctx.roundRect(x, startY, blockSize, blockSize, 8);
- ctx.fill();
- ctx.fillStyle = textColorFor(color);
- ctx.font = `${w / 38}px sans-serif`;
- ctx.textAlign = 'center';
- ctx.fillText(color, x + blockSize / 2, startY + blockSize / 2 + w / 76);
+ ctx.fillRect(x, blockY, blockW, blockH);
+ if (size > 0) {
+ ctx.fillStyle = '#fff';
+ ctx.shadowColor = 'rgba(0,0,0,0.3)';
+ ctx.shadowBlur = q(0.2);
+ ctx.font = `${size}px sans-serif`;
+ ctx.textAlign = 'center';
+ label(text, x + blockW / 2, blockY + blockH / 2 + size / 3);
+ shadowOff();
+ }
});
- // 签名
- ctx.fillStyle = dimColor(primaryColor, 0.6);
- ctx.font = `${w / 35}px sans-serif`;
- ctx.textAlign = 'left';
- ctx.fillText(name || '配色方案', startX, startY + blockSize + w / 20);
+ if (withText) {
+ const nameText = name || '配色方案';
+ const nameSize = fitFont(nameText, 'bold', w - q(8), q(1.4), q(2.5));
+ shadowOn();
+ ctx.fillStyle = '#fff';
+ if (nameSize > 0) {
+ ctx.font = `bold ${nameSize}px sans-serif`;
+ ctx.textAlign = 'left';
+ ctx.fillText(nameText, q(4), q(4) + nameSize);
+ }
+ shadowOff();
+ }
} else if (templateId === '03') {
- // 003 模板：左上圆环 + 右下标题
- const circleR = w / 12;
- const allColors = [primaryColor, ...paletteColors.slice(0, 2)];
- allColors.forEach((color, i) => {
- const y = w / 18 + i * (circleR * 2 + w / 20);
+ // 03 左上竖排圆形: 色值内嵌圆中, 名称在左下角
+ // 圆组的顶部距离与名称的底部距离取同一个值, 上下对称
+ const colors = pick(3);
+ const gap = q(3);
+ const d = q(9.6);
+ const step = d + gap;
+ const margin = q(6);
+ const cx = q(4) + d / 2;
+ const hexSize = q(2);
+
+ colors.forEach((color, i) => {
+ const cy = margin + d / 2 + i * step;
ctx.beginPath();
- ctx.arc(w / 20 + circleR, y + circleR, circleR, 0, Math.PI * 2);
+ ctx.arc(cx, cy, d / 2, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
- ctx.strokeStyle = textCol;
- ctx.lineWidth = w / 250;
- ctx.stroke();
- ctx.fillStyle = textColorFor(color);
- ctx.font = `${w / 38}px sans-serif`;
- ctx.textAlign = 'center';
- ctx.fillText(color, w / 20 + circleR, y + circleR + w / 76);
+ // 圆内一行, 宽度按圆心处的弦长收一点余量
+ const text = color.toUpperCase();
+ const size = fitFont(text, '', d * 0.8, q(0.6), hexSize);
+ if (size > 0) {
+ ctx.fillStyle = hexOn(color);
+ ctx.font = `${size}px sans-serif`;
+ ctx.textAlign = 'center';
+ label(text, cx, cy + size / 3);
+ }
});
- // 标题
- ctx.fillStyle = textCol;
- ctx.font = `bold ${w / 10}px serif`;
- ctx.textAlign = 'left';
- ctx.fillText(name || '配色方案', w / 20, h - h / 4.8);
-
- // ctx.fillStyle = dimColor(primaryColor, 0.5);
- // ctx.font = `${w / 32}px sans-serif`;
- // ctx.fillText('色卡', w / 20, h - h / 4.8 + w / 7.5);
+ if (withText) {
+ const nameText = name || '配色方案';
+ const nameSize = fitFont(nameText, 'bold', w - q(8), q(1.8), q(3));
+ if (nameSize > 0) {
+ shadowOn();
+ ctx.fillStyle = '#fff';
+ ctx.font = `bold ${nameSize}px sans-serif`;
+ ctx.textAlign = 'left';
+ ctx.fillText(nameText, q(4), h - margin);
+ shadowOff();
+ }
+ }
} else if (templateId === '04') {
- // 004 模板：底部横条配色
- const barH = h * 0.18;
- const barY = h - barH - h * 0.05;
- const barX = w * 0.1;
- const barW = w * 0.8;
- const allColors = [primaryColor, ...paletteColors.slice(0, 5)];
- const colW = barW / allColors.length;
-
- allColors.forEach((color, i) => {
- ctx.fillStyle = color;
+ // 04 白底卡片: 内容整体内缩留出白边, 上 3/4 图片, 下方名称居左、色块横排
+ const inset = q(6);
+ const contentW = w - inset * 2;
+ const contentH = h - inset * 2;
+ const imageH = contentH * 0.75;
+ const bottom = inset + contentH;
+ const colors = pick(5);
+ const gap = q(1.5);
+ const d = q(12);
+ const step = d + gap;
+ const hexSize = q(2.2);
+ const gapLabel = q(1);
+
+ const zoneLeft = inset;
+ const zoneRight = inset + contentW;
+
+ const nameText = name || '配色方案';
+ const nameSize = fitFont(nameText, 'bold', zoneRight - zoneLeft, q(2), q(3.6));
+
+ // 名称行 + 色块行整体在图片下缘与内容区下缘之间居中
+ const gapV = q(3);
+ const blockH = nameSize + gapV + d + gapLabel + hexSize;
+ const top = inset + imageH + Math.max(q(2), (bottom - inset - imageH - blockH) / 2);
+
+ if (withText && nameSize > 0) {
+ ctx.fillStyle = '#212121';
+ ctx.font = `bold ${nameSize}px sans-serif`;
+ ctx.textAlign = 'left';
+ ctx.fillText(nameText, zoneLeft, top + nameSize);
+ }
+
+ const cy = top + nameSize + gapV + d / 2;
+ const totalW = colors.length * step - gap;
+ const startX = (zoneRight - zoneLeft > totalW
+ ? zoneLeft + (zoneRight - zoneLeft - totalW) / 2
+ : zoneLeft) + d / 2;
+
+ colors.forEach((color, i) => {
+ const cx = startX + i * step;
ctx.beginPath();
- ctx.roundRect(barX + i * colW + 2, barY, colW - 4, barH, 8);
+ ctx.arc(cx, cy, d / 2, 0, Math.PI * 2);
+ ctx.fillStyle = color;
ctx.fill();
- ctx.fillStyle = textColorFor(color);
- ctx.font = `${w / 30}px sans-serif`;
- ctx.textAlign = 'center';
- ctx.fillText(color, barX + i * colW + colW / 2, barY + barH / 2 + w / 60);
+ const text = color.toUpperCase();
+ const maxW = Math.min(step * 1.6, (zoneRight - cx) * 2);
+ const size = fitFont(text, '', maxW, q(0.6), hexSize);
+ if (size > 0) {
+ ctx.fillStyle = '#666';
+ ctx.font = `${size}px sans-serif`;
+ ctx.textAlign = 'center';
+ label(text, cx, cy + d / 2 + gapLabel + size * 0.8);
+ }
});
-
- // 标题
- ctx.fillStyle = textCol;
- ctx.font = `bold ${w / 8}px serif`;
- ctx.textAlign = 'left';
- ctx.fillText(name || '配色方案', w / 20, barY - h * 0.05);
}
}
@@ -507,27 +568,27 @@ interface ColorCardDialogProps {
bgImage: string;
primaryColor: string;
paletteColors: string[];
- showMessage: (msg: string) => void;
}
-function ColorCardDialog({ open, onClose, bgImage, primaryColor, paletteColors, showMessage }: ColorCardDialogProps) {
+function ColorCardDialog({ open, onClose, bgImage, primaryColor, paletteColors }: ColorCardDialogProps) {
const [previewUrl, setPreviewUrl] = useState('');
- const [generating, setGenerating] = useState(false);
const [description, setDescription] = useState('');
- const [descriptionDraft, setDescriptionDraft] = useState('');
- const [scene, setScene] = useState(null);
const [templateId, setTemplateId] = useState('01');
- const [rerender, setRerender] = useState(false);
const canvasRef = useRef(null);
const bgImgRef = useRef(null);
+ const drawSeq = useRef(0);
// AI 名称生成
- const [aiName, { loading: aiLoading, error: aiError, generateName }] = useGenerateName(
+ const { name: aiName, status: nameStatus, error: nameError, generateName } = useGenerateName(
primaryColor, '文艺优雅', 4, open
);
- // 色卡名称: AI 生成的名称优先，用户可手动修改
- const cardName = description || aiName || '配色方案';
+ // 色卡名称: 用户输入的描述优先, 其次 AI 名称, 都还没有时留空
+ const cardName = description || aiName;
+
+ // 名字没落定之前不画图 —— 否则会先用占位名画一版,
+ // 用户在这期间导出拿到的是占位名色卡
+ const nameSettled = nameStatus === 'done' || nameStatus === 'error';
// 预加载背景图
useEffect(() => {
@@ -539,69 +600,64 @@ function ColorCardDialog({ open, onClose, bgImage, primaryColor, paletteColors,
}
}, [bgImage]);
- // 生成色卡预览
- const generatePreview = useCallback(() => {
- setGenerating(true);
- setTimeout(() => {
- const canvas = canvasRef.current;
- if (!canvas) { setGenerating(false); return; }
-
- renderColorCard(canvas, {
- bgImage: bgImgRef.current,
- primaryColor,
- paletteColors,
- name: cardName,
- templateId,
- });
-
- setPreviewUrl(canvas.toDataURL('image/png'));
- setGenerating(false);
- }, 500);
+ // 画一版到 canvas 并刷新预览。withText=false 先只出色块占位,
+ // 等 AI 名称落定后再画带名称的完整版
+ const drawCard = useCallback((withText: boolean) => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ renderColorCard(canvas, {
+ bgImage: bgImgRef.current,
+ primaryColor,
+ paletteColors,
+ name: withText ? cardName : '',
+ templateId,
+ withText,
+ });
+ setPreviewUrl(canvas.toDataURL('image/png'));
}, [primaryColor, paletteColors, cardName, templateId]);
- // 打开时自动生成
+ // 重绘的唯一入口: 打开 / 模板 / 描述 / 名称是否落定 变化都会走到这里。
+ // 不在这里 setPreviewUrl(''), 否则每敲一个字都会闪一次 loading。
useEffect(() => {
- if (open) {
- generatePreview();
- } else {
+ if (!open) {
setPreviewUrl('');
- setTemplateId('01');
- setDescription('');
- setDescriptionDraft('');
- setScene(null);
+ return;
}
- }, [open]);
- // 模板/AI名称变化时重新生成
- useEffect(() => {
- if (open) {
- generatePreview();
- }
- }, [templateId, aiName]);
+ const seq = ++drawSeq.current;
+ const timer = setTimeout(() => {
+ if (seq !== drawSeq.current) return;
+ drawCard(nameSettled);
+ }, 300);
- // 用户手动修改描述时重新生成
- useEffect(() => {
- if (open && description !== undefined) {
- generatePreview();
- }
- }, [description]);
+ return () => { clearTimeout(timer); };
+ }, [open, nameSettled, drawCard]);
- // 切换模板
- const handleTemplateChange = (id: string) => {
- if (id !== templateId) {
- setTemplateId(id);
- setRerender(true);
- }
- };
+ // 关闭时复位
+ useEffect(() => {
+ if (open) return;
+ setPreviewUrl('');
+ setDescription('');
+ setTemplateId('01');
+ }, [open]);
- // 导出色卡
+ // 导出色卡: 按当前参数重画一版带名称的, 不复用可能还是占位版的预览
const handleExport = () => {
const canvas = canvasRef.current;
- if (!canvas) return;
+ if (!canvas || !nameSettled) return;
+ renderColorCard(canvas, {
+ bgImage: bgImgRef.current,
+ primaryColor,
+ paletteColors,
+ name: cardName || '配色方案',
+ templateId,
+ });
const dataUrl = canvas.toDataURL('image/png');
if (window.services?.saveColorCard) {
- const buffer = Uint8Array.from(atob(dataUrl.split(',')[1]), c => c.charCodeAt(0));
- window.services.saveColorCard(Array.from(buffer));
+ const binary = atob(dataUrl.split(',')[1]);
+ const buffer = new Uint8Array(binary.length);
+ for (let i = 0; i < binary.length; i++) buffer[i] = binary.charCodeAt(i);
+ window.services.saveColorCard(buffer.buffer);
} else {
const a = document.createElement('a');
a.href = dataUrl;
@@ -610,14 +666,12 @@ function ColorCardDialog({ open, onClose, bgImage, primaryColor, paletteColors,
}
};
- // 预览图尺寸计算
- const previewSize = useMemo((): [string, string] => {
+ // 预览尺寸交给 flex 算: 预览区是 flex 列, 由它自己的高宽反推出"能占多少",
+ // 不用 vw 换算 —— 换不换算得出准确值, 也就不用担心描述框/右侧面板把它挤小
+ const previewRatio = useMemo((): number => {
const template = TEMPLATES.find(t => t.id === templateId) || TEMPLATES[0];
const [tw, th] = getTemplateSize(template);
- if (tw === th) return ['50vw', '50vw'];
- const ratio = tw / th;
- if (ratio > 1) return ['50vw', `${50 / ratio}vw`];
- return [`${50 * ratio}vw`, '50vw'];
+ return tw / th;
}, [templateId]);
return (
@@ -634,59 +688,50 @@ function ColorCardDialog({ open, onClose, bgImage, primaryColor, paletteColors,
{/* 中间区域：色卡预览 + 描述输入 */}
-
- {/* 色卡预览图 */}
-
- {previewUrl && !generating ? (
+
+ {/* 色卡预览: 撑满剩余空间, 宽高出多少就缩多少, 不用 vw 硬算 */}
+
+ {previewUrl ? (
) : (
-
+
AI 正在起名 }
)}
- {/* 描述输入 + 画面选择 + 重新生成 */}
-
+ {/* 描述输入 + 重新生成 */}
+
setDescriptionDraft(e.target.value)}
- onBlur={() => { if (descriptionDraft !== description) setDescription(descriptionDraft); }}
+ placeholder={aiName || '描述画面主体，可调整色卡名称'}
+ value={description}
+ onChange={(e) => setDescription(e.target.value)}
variant="standard"
fullWidth
sx={{ '& .MuiInput-root': { fontSize: 14, paddingRight: 0 } }}
InputProps={{
- endAdornment: descriptionDraft ? (
- { setDescription(''); setDescriptionDraft(''); }} sx={{ p: 0.3 }}>
+ endAdornment: description ? (
+ setDescription('')} sx={{ p: 0.3 }}>
) : null,
}}
/>
- {nameError}
+ ) : }
{
- // 重新调用 AI 生成名称（排除当前名称）
- const key = primaryColor + '文艺优雅' + 4;
- generateName(key, aiName || undefined);
- generatePreview();
- }}
+ disabled={nameStatus === 'loading'}
+ onClick={() => { generateName(aiName || undefined); }}
>
@@ -709,7 +754,7 @@ function ColorCardDialog({ open, onClose, bgImage, primaryColor, paletteColors,
boxSizing="border-box"
overflow="hidden"
position="relative"
- onClick={() => handleTemplateChange(t.id)}
+ onClick={() => setTemplateId(t.id)}
sx={{ cursor: 'pointer' }}
>
@@ -724,7 +769,7 @@ function ColorCardDialog({ open, onClose, bgImage, primaryColor, paletteColors,
diff --git a/plugins/color-helper/pages/TraditionalColorsPage.tsx b/plugins/color-helper/pages/TraditionalColorsPage.tsx
index bbfb3ea6f..13164a0d1 100644
--- a/plugins/color-helper/pages/TraditionalColorsPage.tsx
+++ b/plugins/color-helper/pages/TraditionalColorsPage.tsx
@@ -5,24 +5,25 @@ import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
-import Typography from '@mui/material/Typography';
import CheckIcon from '@mui/icons-material/Check';
import chroma from 'chroma-js';
+import { isDarkColor } from '../utils/color';
import chinaColors from '../data/traditional-china.json';
import japanColors from '../data/traditional-japan.json';
+import type { ChinaColorCategory, JapanColorItem as JapanColorItemData } from '../types';
/**
* TraditionalColorsPage - 传统色页面
- *
- * 展示中国传统色/日本传统色色板，支持搜索和收藏
- * 点击色块可复制颜色值，长按可收藏/取消收藏
+ *
+ * 展示中国传统色/日本传统色色板，支持搜索和按色系筛选
+ * 点击色块可复制颜色值
*/
-// 颜色属性分类(tag + dark)
-function getColorAttr(color: string): { tag: string; dark: boolean } {
+// 颜色属性分类(tag + dark) —— 导出以供回归测试
+export function getColorAttr(color: string): { tag: string; dark: boolean } {
const c = chroma(color);
let [h, s, l] = c.hsl();
- const dark = c.get('lab.l') < 70;
+ const dark = isDarkColor(color);
h = isNaN(h) ? 0 : h;
let tag: string;
if (l < 0.2) tag = "black";
@@ -39,7 +40,7 @@ function getColorAttr(color: string): { tag: string; dark: boolean } {
return { tag, dark };
}
-// AD数组
+// 色系筛选条: 每个色系一枚代表色, id 与 getColorAttr 的 tag 对应
const filterColors = [
{ id: "red", color: "#D7003A" },
{ id: "orange", color: "#EE7800" },
@@ -53,12 +54,11 @@ const filterColors = [
{ id: "black", color: "#333333" },
];
-// 预处理颜色数据
-// 中国传统色数据: nc = JSON.parse(...) - 按节气分组
+// 中国传统色: 按节气分组
interface ChinaColorItem {
name: string;
color: string;
- attr?: { tag: string; dark: boolean };
+ attr: { tag: string; dark: boolean };
}
interface ChinaColorGroup {
@@ -66,27 +66,26 @@ interface ChinaColorGroup {
colors: ChinaColorItem[];
}
-// 日本传统色数据: tc = JSON.parse(...) - 扁平列表
+// 日本传统色: 扁平列表
interface JapanColorItem {
name: string;
jname: string;
color: string;
- attr?: { tag: string; dark: boolean };
+ attr: { tag: string; dark: boolean };
}
-const ncData: ChinaColorGroup[] = (chinaColors as any[]).map((group: any) => ({
+const ncData: ChinaColorGroup[] = (chinaColors as unknown as ChinaColorCategory[]).map((group) => ({
title: group.title,
- colors: group.colors.map((c: any) => ({
- name: c.name,
- color: c.color,
- })),
+ colors: group.colors.map((c) => {
+ const color = c.color;
+ return { name: c.name, color, attr: getColorAttr(color) };
+ }),
}));
-const tcData: JapanColorItem[] = (japanColors as any[]).map((c: any) => ({
- name: c.name,
- jname: c.jname || c.romaji || "",
- color: c.color,
-}));
+const tcData: JapanColorItem[] = (japanColors as unknown as JapanColorItemData[]).map((c) => {
+ const color = c.color;
+ return { name: c.name, jname: c.jname || "", color, attr: getColorAttr(color) };
+});
// 中国传统色
interface ChinaColorsProps {
@@ -102,14 +101,7 @@ interface ChinaColorsState {
class ChinaColors extends Component {
constructor(props: ChinaColorsProps) {
super(props);
- // 初始化attr=> { o.colors.forEach(s => { s.attr = o8(s.color) }) })"
- if (!ncData[0]?.colors[0]?.attr) {
- ncData.forEach(group => {
- group.colors.forEach(c => {
- c.attr = getColorAttr(c.color);
- });
- });
- }
+ // attr 已在模块级 ncData 构建时一次性算好(见 getColorAttr)
this.state = { colors: ncData };
}
@@ -127,7 +119,7 @@ class ChinaColors extends Component {
filterByFilterColor = () => {
const result: ChinaColorGroup[] = [];
ncData.forEach(group => {
- const filtered = group.colors.filter(c => c.attr!.tag === this.props.filterColor);
+ const filtered = group.colors.filter(c => c.attr.tag === this.props.filterColor);
if (filtered.length > 0) {
result.push({ title: group.title, colors: filtered });
}
@@ -163,7 +155,7 @@ class ChinaColors extends Component {
{
constructor(props: JapanColorsProps) {
super(props);
- // 初始化attr=> { o.attr = o8(o.color) })"
- if (!tcData[0]?.attr) {
- tcData.forEach(c => {
- c.attr = getColorAttr(c.color);
- });
- }
+ // attr 已在模块级 tcData 构建时一次性算好(见 getColorAttr)
this.state = { colors: tcData };
}
@@ -206,7 +193,7 @@ class JapanColors extends Component {
};
filterByFilterColor = () => {
- const result = tcData.filter(c => c.attr!.tag === this.props.filterColor);
+ const result = tcData.filter(c => c.attr.tag === this.props.filterColor);
this.setState({ colors: result });
};
@@ -234,7 +221,7 @@ class JapanColors extends Component {
{colors.map((color, index) => {
- const isDark = chroma(color.hex).get('lab.l') < 70;
+ const isDark = isDarkColor(color.hex);
return (
{
);
})}
-
{gradient.colors.map((color, j) => (
@@ -402,7 +403,7 @@ class GradientsPage extends Component<{ onColorClick: (e: any) => void }, Gradie
))}
- {c.name}
{c.color}
@@ -191,12 +183,7 @@ interface JapanColorsState {
class JapanColors extends Component{c.name}
{c.jname}
diff --git a/plugins/color-helper/pages/UIPalettesPage.tsx b/plugins/color-helper/pages/UIPalettesPage.tsx
index 243b03274..2f1571613 100644
--- a/plugins/color-helper/pages/UIPalettesPage.tsx
+++ b/plugins/color-helper/pages/UIPalettesPage.tsx
@@ -1,4 +1,4 @@
-import React, { Component, PureComponent } from 'react';
+import { Component, PureComponent } from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { db } from '../utils/platform';
@@ -7,6 +7,9 @@ import fluentData from '../data/ui-fluent.json';
import openColorData from '../data/ui-open-color.json';
import antDesignData from '../data/ui-ant-design.json';
import materialDesignData from '../data/ui-material-design.json';
+import type {
+ FlatUIColorCategory, MaterialColorCategory, UIColorCategory,
+} from '../types';
/**
* UIPalettesPage - UI色卡页面
@@ -15,12 +18,11 @@ import materialDesignData from '../data/ui-material-design.json';
* 点击色块可复制颜色值
*/
-// FlatUI子组件
-class FlatUIColors extends PureComponent<{ onColorClick: (e: any) => void }> {
+class FlatUIColors extends PureComponent<{ onColorClick: (e: any) => void; data: FlatUIColorCategory[] }> {
render() {
return (
- {flatUIData.map((group, gi) => (
+ {this.props.data.map((group, gi) => (
{group.title}
@@ -45,12 +47,11 @@ class FlatUIColors extends PureComponent<{ onColorClick: (e: any) => void }> {
}
}
-// Fluent子组件
-class FluentColors extends PureComponent<{ onColorClick: (e: any) => void }> {
+class FluentColors extends PureComponent<{ onColorClick: (e: any) => void; data: UIColorCategory[] }> {
render() {
return (
- {fluentData.map((group, gi) => (
+ {this.props.data.map((group, gi) => (
{group.title}
@@ -72,8 +73,7 @@ class FluentColors extends PureComponent<{ onColorClick: (e: any) => void }> {
}
}
-// OpenColor子组件
-class OpenColors extends PureComponent<{ onColorClick: (e: any) => void }> {
+class OpenColors extends PureComponent<{ onColorClick: (e: any) => void; data: UIColorCategory[] }> {
render() {
return (
@@ -84,7 +84,7 @@ class OpenColors extends PureComponent<{ onColorClick: (e: any) => void }> {
- {openColorData.map((group, gi) => (
+ {this.props.data.map((group, gi) => (
@@ -107,8 +108,7 @@ class OpenColors extends PureComponent<{ onColorClick: (e: any) => void }> {
}
}
-// AntDesign子组件
-class AntDesignColors extends PureComponent<{ onColorClick: (e: any) => void }> {
+class AntDesignColors extends PureComponent<{ onColorClick: (e: any) => void; data: UIColorCategory[] }> {
render() {
return (
{group.title}
@@ -94,6 +94,7 @@ class OpenColors extends PureComponent<{ onColorClick: (e: any) => void }> {
style={{ backgroundColor: color }}
onClick={this.props.onColorClick}
>
+ {/* 色阶按浅→深排列: 前 5 档是浅色档配深字, 其余深色档配白字 */}
{color.substr(1)}
@@ -119,7 +119,7 @@ class AntDesignColors extends PureComponent<{ onColorClick: (e: any) => void }>
- {antDesignData.map((group, gi) => (
+ {this.props.data.map((group, gi) => (
@@ -142,8 +143,7 @@ class AntDesignColors extends PureComponent<{ onColorClick: (e: any) => void }>
}
}
-// MaterialDesign子组件
-class MaterialDesignColors extends PureComponent<{ onColorClick: (e: any) => void }> {
+class MaterialDesignColors extends PureComponent<{ onColorClick: (e: any) => void; data: MaterialColorCategory[] }> {
render() {
return (
{group.title}
@@ -129,6 +129,7 @@ class AntDesignColors extends PureComponent<{ onColorClick: (e: any) => void }>
style={{ backgroundColor: color }}
onClick={this.props.onColorClick}
>
+ {/* 色阶按浅→深排列: 前 5 档是浅色档配深字, 其余深色档配白字 */}
{color.substr(1)}
@@ -151,7 +151,7 @@ class MaterialDesignColors extends PureComponent<{ onColorClick: (e: any) => voi
{["50","100","200","300","400","500","600","700","800","900"].map(n => (
-
{n}
+ {n}
))}
{["A100","A200","A300","A400"].map(n => (
{n}
@@ -159,7 +159,7 @@ class MaterialDesignColors extends PureComponent<{ onColorClick: (e: any) => voi
- {materialDesignData.map((group, gi) => (
+ {this.props.data.map((group, gi) => (
@@ -184,7 +185,6 @@ class MaterialDesignColors extends PureComponent<{ onColorClick: (e: any) => voi
}
}
-// 主组件
interface UIPalettesState {
ui: string;
}
@@ -208,16 +208,22 @@ class UIPalettesPage extends Component<{ onColorClick: (e: any) => void }, UIPal
}
getTabContent() {
+ const flatData = flatUIData as unknown as FlatUIColorCategory[];
+ const fluentDataT = fluentData as unknown as UIColorCategory[];
+ const openColorDataT = openColorData as unknown as UIColorCategory[];
+ const antDesignDataT = antDesignData as unknown as UIColorCategory[];
+ const materialDesignDataT = materialDesignData as unknown as MaterialColorCategory[];
switch (this.state.ui) {
- case "flat": return (name: string): T {
+ return JSON.parse(readFileSync(resolve(__dirname, `../data/${name}.json`), 'utf-8')) as T;
+}
+
+const HEX6 = /^#[0-9a-fA-F]{6}$/;
+
+type GradientData = string[][];
+interface UIItem { title: string; colors: Array }
+interface ChinaGroup { title: string; colors: Array<{ name: string; color: string }> }
+interface JapanItem { name: string; jname: string; color: string }
+
+const GRADIENTS = ['gradients-eT', 'gradients-nT', 'gradients-tT'] as const;
+const UIS = ['ui-ant-design', 'ui-flat-ui', 'ui-fluent', 'ui-material-design', 'ui-open-color'] as const;
+const ALL = [...GRADIENTS, ...UIS, 'traditional-china', 'traditional-japan'];
+
+describe('全部 JSON 都能解析且顶层是数组', () => {
+ it.each(ALL)('%s', (name) => {
+ expect(Array.isArray(load(name))).toBe(true);
+ });
+});
+
+describe('记录数基线(数据变更时应被提醒)', () => {
+ it.each([
+ ['gradients-eT', 10],
+ ['gradients-nT', 382],
+ ['gradients-tT', 60],
+ ['traditional-china', 24],
+ ['traditional-japan', 465],
+ ['ui-ant-design', 13],
+ ['ui-flat-ui', 14],
+ ['ui-fluent', 4],
+ ['ui-material-design', 19],
+ ['ui-open-color', 13],
+ ])('%s = %i 条', (name, count) => {
+ expect(load(name as string)).toHaveLength(count as number);
+ });
+
+ it('traditional-china 共 24 组 / 384 色', () => {
+ const groups = load('traditional-china');
+ expect(groups).toHaveLength(24);
+ expect(groups.reduce((s, g) => s + g.colors.length, 0)).toBe(384);
+ // 每组 16 色(24 节气 × 16 = 384)
+ expect(new Set(groups.map((g) => g.colors.length))).toEqual(new Set([16]));
+ });
+});
+
+describe('渐变数据', () => {
+ it.each(GRADIENTS)('%s 每个渐变 >= 2 个停靠点', (name) => {
+ for (const g of load(name)) {
+ expect(g.length).toBeGreaterThanOrEqual(2);
+ }
+ });
+
+ it.each(GRADIENTS)('%s 非空色值均为 3 或 6 位 hex', (name) => {
+ // 3 位 hex 只允许一处(见下一条断言把例外钉死)
+ for (const g of load(name)) {
+ for (const c of g) {
+ expect(c).toMatch(/^#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?$/);
+ }
+ }
+ });
+
+ it('gradients-nT[27] 是唯一一处 3 位 hex("#FFF") —— 预期如此, 但记录在案', () => {
+ // 全项目其余色值都是 6 位, 只有这一条是 "#FFF"。
+ // chroma 能正常解析, 所以不影响渲染; 但若将来做数据清洗应把它规范化为 "#FFFFFF"。
+ // 这条断言的作用是把该例外钉住: 多出任何一处 3 位 hex 都会让这条测试变红。
+ const threeDigit: Array<{ index: number; value: string }> = [];
+ for (const name of GRADIENTS) {
+ load(name).forEach((g, i) => {
+ for (const c of g) if (/^#[0-9a-fA-F]{3}$/.test(c)) threeDigit.push({ index: i, value: c });
+ });
+ }
+ expect(threeDigit).toEqual([{ index: 27, value: '#FFF' }]);
+ });
+
+ it('gradients-nT 有 5 组重复渐变 —— 预期如此(内容决策, 不视为缺陷)', () => {
+ const seen = new Set();
+ let dup = 0;
+ for (const g of load('gradients-nT')) {
+ const key = g.join('|');
+ if (seen.has(key)) dup++;
+ seen.add(key);
+ }
+ expect(dup).toBe(5);
+ expect(seen.size).toBe(377);
+ });
+});
+
+describe('UI 色卡数据', () => {
+ it.each(UIS)('%s 的所有非空色值均为 6 位 hex', (name) => {
+ for (const group of load(name)) {
+ for (const entry of group.colors) {
+ const arr = Array.isArray(entry) ? entry : [entry];
+ for (const c of arr) {
+ if (c === '') continue; // 见下: material 的空串是预期如此
+ expect(c).toMatch(HEX6);
+ }
+ }
+ }
+ });
+
+ it('ui-material-design 固定 14 槽, 其中 12 个是空串 —— 预期如此', () => {
+ // Brown / Grey / Blue Grey 的 A100–A400 Material 官方无此强调色
+ const data = load('ui-material-design');
+ expect(data).toHaveLength(19);
+ expect(new Set(data.map((g) => g.colors.length))).toEqual(new Set([14]));
+ const empties = data.flatMap((g) => g.colors).filter((c) => c === '').length;
+ expect(empties).toBe(12);
+ });
+
+ it('ui-flat-ui 每槽是一组色阶(长度为 2 的数组), 不是单个色值', () => {
+ for (const group of load('ui-flat-ui')) {
+ expect(Array.isArray(group.colors[0])).toBe(true);
+ expect((group.colors[0] as string[]).length).toBe(2);
+ }
+ });
+
+ it('每个 UI 色卡都有 title', () => {
+ for (const name of UIS) {
+ for (const group of load(name)) {
+ expect(typeof group.title).toBe('string');
+ expect(group.title.length).toBeGreaterThan(0);
+ }
+ }
+ });
+});
+
+describe('传统色数据', () => {
+ it('465 条日本色都有 jname', () => {
+ const japan = load('traditional-japan');
+ expect(japan).toHaveLength(465);
+ expect(japan.filter((c) => !c.jname)).toHaveLength(0);
+ });
+
+ it('中国色无重名', () => {
+ const names = load('traditional-china').flatMap((g) => g.colors.map((c) => c.name));
+ expect(names).toHaveLength(384);
+ expect(new Set(names).size).toBe(384);
+ });
+
+ it('中国色无重色', () => {
+ const colors = load('traditional-china').flatMap((g) => g.colors.map((c) => c.color.toUpperCase()));
+ const dup = colors.length - new Set(colors).size;
+ expect(dup).toBe(0);
+ });
+
+ it.each(['traditional-china', 'traditional-japan'] as const)('%s 的色值均为 6 位 hex', (name) => {
+ const raw = load(name);
+ const colors = Array.isArray(raw) && typeof raw[0] === 'object' && 'colors' in (raw[0] as object)
+ ? (raw as ChinaGroup[]).flatMap((g) => g.colors.map((c) => c.color))
+ : (raw as JapanItem[]).map((c) => c.color);
+ expect(colors.length).toBeGreaterThan(0);
+ for (const c of colors) expect(c).toMatch(HEX6);
+ });
+
+ it('传统色名称不含占位符', () => {
+ const PLACEHOLDER = /^(?:test|测试|unnamed|n\/a|null|undefined|无|-|未知|placeholder)$/i;
+ const china = load('traditional-china').flatMap((g) => g.colors.map((c) => c.name));
+ const japan = load('traditional-japan').map((c) => c.name);
+ for (const n of [...china, ...japan]) {
+ expect(n).not.toMatch(PLACEHOLDER);
+ expect(n.trim().length).toBeGreaterThan(0);
+ }
+ });
+});
\ No newline at end of file
diff --git a/plugins/color-helper/tests/gradient-geometry.test.ts b/plugins/color-helper/tests/gradient-geometry.test.ts
new file mode 100644
index 000000000..4fe9db0fb
--- /dev/null
+++ b/plugins/color-helper/tests/gradient-geometry.test.ts
@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { calculateGradientLine } from '../utils/gradient';
+
+/** 渐变线长度 = 起点到终点的距离 */
+function lineLength(w: number, h: number, angle: number): number {
+ const { tx, ty, bx, by } = calculateGradientLine(w, h, angle);
+ return Math.hypot(bx - tx, by - ty);
+}
+
+function round(v: number): number {
+ // +0 归一化: Math.sin(Math.PI) 会产出 -0, deepEqual 下 -0 !== 0
+ const r = Math.round(v * 100) / 100;
+ return r === 0 ? 0 : r;
+}
+
+/** 浮点端点比较: 逐项 toBeCloseTo, 避开 -0 与 1e-14 级误差 */
+function expectPoint(
+ actual: { tx: number; ty: number; bx: number; by: number },
+ start: number[],
+ end: number[],
+) {
+ expect(actual.tx).toBeCloseTo(start[0]!, 2);
+ expect(actual.ty).toBeCloseTo(start[1]!, 2);
+ expect(actual.bx).toBeCloseTo(end[0]!, 2);
+ expect(actual.by).toBeCloseTo(end[1]!, 2);
+}
+
+describe('calculateGradientLine 基线值', () => {
+ it.each([
+ [500, 500, 135, [0, 0], [500, 500], 707.11],
+ [500, 500, 0, [250, 500], [250, 0], 500],
+ [500, 500, 90, [0, 250], [500, 250], 500],
+ [500, 500, 180, [250, 0], [250, 500], 500],
+ [1000, 500, 135, [125, -125], [875, 625], 1060.66],
+ [1200, 900, 45, [75, 975], [1125, -75], 1484.92],
+ ])('%ix%i @ %i° → 起点 %o 终点 %o L=%f', (w, h, angle, start, end, len) => {
+ const line = calculateGradientLine(w as number, h as number, angle as number);
+ expectPoint(line, start as number[], end as number[]);
+ expect(round(lineLength(w as number, h as number, angle as number))).toBe(len);
+ });
+});
+
+describe('回归护栏: 不要退回半对角线', () => {
+ it('500×500 @135° 的端点不是半对角线那个错误值 (0,0)→(250,250)', () => {
+ // 半对角线错误实现的特征值: 长度 353.55(= 对角线的一半)
+ expect(round(lineLength(500, 500, 135))).not.toBe(353.55);
+ expect(lineLength(500, 500, 135)).not.toBeCloseTo(500 * Math.SQRT2 / 2, 2);
+ });
+
+ it('135° 的对角线长度应为 √2·w(而非半对角线)', () => {
+ expect(round(lineLength(500, 500, 135))).toBe(round(Math.SQRT2 * 500));
+ });
+});
+
+describe('calculateGradientLine 几何不变量', () => {
+ const sizes: Array<[number, number]> = [[500, 500], [1000, 500], [1200, 900], [1, 1], [333, 777]];
+
+ it('中点恒为画布中心', () => {
+ for (const [w, h] of sizes) {
+ for (const angle of [0, 45, 90, 135, 180, 225, 270, 315, 360]) {
+ const line = calculateGradientLine(w, h, angle);
+ expect((line.tx + line.bx) / 2).toBeCloseTo(w / 2, 6);
+ expect((line.ty + line.by) / 2).toBeCloseTo(h / 2, 6);
+ }
+ }
+ });
+
+ it('长度公式 = |w·sin a| + |h·cos a|', () => {
+ for (const [w, h] of sizes) {
+ for (const angle of [0, 30, 45, 90, 135, 180, 270, 315]) {
+ const rad = (angle * Math.PI) / 180;
+ const expected = Math.abs(w * Math.sin(rad)) + Math.abs(h * Math.cos(rad));
+ expect(lineLength(w, h, angle)).toBeCloseTo(expected, 6);
+ }
+ }
+ });
+
+ it('0°/90°/180°/270° 落在画布边界的中点上', () => {
+ expectPoint(calculateGradientLine(400, 200, 0), [200, 200], [200, 0]);
+ expectPoint(calculateGradientLine(400, 200, 90), [0, 100], [400, 100]);
+ expectPoint(calculateGradientLine(400, 200, 180), [200, 0], [200, 200]);
+ expectPoint(calculateGradientLine(400, 200, 270), [400, 100], [0, 100]);
+ });
+});
diff --git a/plugins/color-helper/tests/platform.test.ts b/plugins/color-helper/tests/platform.test.ts
new file mode 100644
index 000000000..38b92b0b2
--- /dev/null
+++ b/plugins/color-helper/tests/platform.test.ts
@@ -0,0 +1,324 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { db, dbStorage, copyText } from '../utils/platform';
+
+/**
+ * utils/platform.ts 的浏览器降级路径
+ *
+ * 注意: 本文件在 happy-dom 下运行 —— 模块顶层就读了 window.platform,
+ * node 环境会直接抛 "window is not defined"(见 vitest.config.ts 的 environment)。
+ * 测试只需保证 window.platform 不存在, 即走降级分支。
+ */
+
+const PREFIX = 'color_helper_';
+
+beforeEach(() => {
+ localStorage.clear();
+ delete (window as any).platform;
+});
+
+afterEach(() => {
+ vi.restoreAllMocks();
+ document.body.innerHTML = '';
+});
+
+describe('dbStorage 降级(localStorage)', () => {
+ it('setItem / getItem 往返, 存的是 JSON', () => {
+ dbStorage.setItem('setting', true);
+ expect(localStorage.getItem(`${PREFIX}setting`)).toBe('true');
+ expect(dbStorage.getItem('setting')).toBe(true);
+ });
+
+ it('未设置的 key 返回 null', () => {
+ expect(dbStorage.getItem('nope')).toBeNull();
+ });
+
+ it('removeItem 移除键', () => {
+ dbStorage.setItem('k', 1);
+ dbStorage.removeItem('k');
+ expect(dbStorage.getItem('k')).toBeNull();
+ });
+
+ it('**损坏的 JSON 返回 null 而不是抛错**', () => {
+ localStorage.setItem(`${PREFIX}broken`, '{ not json');
+ expect(() => dbStorage.getItem('broken')).not.toThrow();
+ expect(dbStorage.getItem('broken')).toBeNull();
+ });
+});
+
+describe('db 降级(localStorage)', () => {
+ it('put 写入并按 _rev 递增', () => {
+ const r1 = db.put({ _id: 'c1', color: '#fff' });
+ expect(r1).toMatchObject({ ok: true, id: 'c1', rev: '1' });
+
+ const r2 = db.put({ _id: 'c1', color: '#000' });
+ expect(r2.rev).toBe('2');
+ expect(db.get('c1')).toMatchObject({ _id: 'c1', color: '#000', _rev: '2' });
+ });
+
+ it('get 对损坏 JSON 返回 null 而不是抛错', () => {
+ localStorage.setItem(`${PREFIX}db_c2`, '}}}');
+ expect(() => db.get('c2')).not.toThrow();
+ expect(db.get('c2')).toBeNull();
+ });
+
+ it('remove 删除文档', () => {
+ db.put({ _id: 'c3' });
+ expect(db.remove({ _id: 'c3' })).toEqual({ ok: true });
+ expect(db.get('c3')).toBeNull();
+ });
+
+ it('allDocs 返回全部文档', () => {
+ db.put({ _id: 'collect_1', color: '#111' });
+ db.put({ _id: 'collect_2', color: '#222' });
+ db.put({ _id: 'other_1', color: '#333' });
+ const all = db.allDocs();
+ expect(all.map((d) => d._id).sort()).toEqual(['collect_1', 'collect_2', 'other_1']);
+ });
+
+ it('allDocs(key) 按 _id 前缀过滤', () => {
+ db.put({ _id: 'collect_1' });
+ db.put({ _id: 'collect_2' });
+ db.put({ _id: 'other_1' });
+ expect(db.allDocs('collect').map((d) => d._id).sort()).toEqual(['collect_1', 'collect_2']);
+ });
+
+ it('**单个文档损坏只跳过该条, 其余照常返回**', () => {
+ db.put({ _id: 'collect_1', color: '#111' });
+ db.put({ _id: 'collect_2', color: '#222' });
+ // 插一条坏数据, 模拟一个文档写坏
+ localStorage.setItem(`${PREFIX}db_collect_bad`, '{ oops');
+
+ const docs = db.allDocs('collect');
+ expect(docs.map((d) => d._id).sort()).toEqual(['collect_1', 'collect_2']);
+ // 关键: 不是返回 []
+ expect(docs.length).toBe(2);
+ });
+
+ it('全部文档都损坏时返回空数组(不是抛错)', () => {
+ localStorage.setItem(`${PREFIX}db_a`, '{');
+ localStorage.setItem(`${PREFIX}db_b`, '}');
+ expect(() => db.allDocs()).not.toThrow();
+ expect(db.allDocs()).toEqual([]);
+ });
+
+ it('忽略前缀不匹配的 localStorage 键', () => {
+ localStorage.setItem('unrelated_key', JSON.stringify({ _id: 'x' }));
+ localStorage.setItem(`${PREFIX}other`, 'plain string');
+ expect(db.allDocs()).toEqual([]);
+ });
+});
+
+describe('db 走平台分支时的返回形状', () => {
+ /**
+ * 官方 db.put 返回 DbReturn { id, rev?, ok?, error?, name?, message? }
+ * (ztools.api.d.ts), 注意 ok 是**可选**、error 是**布尔**。
+ * 而降级分支返回的是 { ok: boolean, id, rev?, error?: string } ——
+ * 两个分支必须归一化成同一形状, 否则调用方的 `result.ok` / `result.error` 判据会分裂。
+ */
+ async function withPlatformDb(pdb: any) {
+ (window as any).platform = { db: pdb };
+ vi.resetModules();
+ return (await import('../utils/platform')).db;
+ }
+
+ afterEach(() => {
+ vi.resetModules();
+ });
+
+ it('put 归一化 DbReturn: ok/rev 透传, 无 error 时 error 为 undefined', async () => {
+ const put = vi.fn(() => ({ id: 'c1', rev: '3-abc', ok: true }));
+ const db = await withPlatformDb({ put });
+
+ const r = db.put({ _id: 'c1', color: '#fff' });
+
+ expect(put).toHaveBeenCalledWith({ _id: 'c1', color: '#fff' });
+ expect(r).toEqual({ ok: true, id: 'c1', rev: '3-abc', error: undefined });
+ // 调用方 CollectColorsPage 靠 result.rev 回写 _rev, 这个字段必须留着
+ expect(r.rev).toBe('3-abc');
+ });
+
+ it('put 遇到 error:true 时补出可读的 error 文案(优先 message)', async () => {
+ const db = await withPlatformDb({
+ put: () => ({ id: 'c1', error: true, name: 'conflict', message: 'Document update conflict' }),
+ });
+ const r = db.put({ _id: 'c1' });
+
+ expect(r.ok).toBe(false);
+ expect(r.error).toBe('Document update conflict');
+ expect(r.rev).toBeUndefined();
+ });
+
+ it('put 的 error 没有 message/name 时也要给出非空文案', async () => {
+ const db = await withPlatformDb({ put: () => ({ id: 'c1', error: true }) });
+ const r = db.put({ _id: 'c1' });
+
+ expect(r.ok).toBe(false);
+ expect(typeof r.error).toBe('string');
+ expect(r.error).toBeTruthy();
+ });
+
+ it('remove 走平台分支并归一化', async () => {
+ const remove = vi.fn(() => ({ id: 'c1', ok: true }));
+ const db = await withPlatformDb({ remove });
+
+ expect(db.remove({ _id: 'c1' })).toEqual({ ok: true, error: undefined });
+ expect(remove).toHaveBeenCalledWith({ _id: 'c1' });
+ });
+
+ it('**两个分支的返回形状一致** —— 调用方不需要区分自己跑在哪边', async () => {
+ // 平台分支
+ const dbPlatform = await withPlatformDb({ put: () => ({ id: 'x', rev: '1', ok: true }) });
+ const fromPlatform = dbPlatform.put({ _id: 'x' });
+
+ // 降级分支
+ delete (window as any).platform;
+ vi.resetModules();
+ const dbLocal = (await import('../utils/platform')).db;
+ const fromLocal = dbLocal.put({ _id: 'x' });
+
+ expect(Object.keys(fromPlatform).sort()).toEqual(Object.keys(fromLocal).sort());
+ expect(typeof fromPlatform.ok).toBe(typeof fromLocal.ok);
+ expect(typeof fromPlatform.id).toBe(typeof fromLocal.id);
+ });
+});
+
+describe('aiChat 不能凭空塞模型 ID', () => {
+ /**
+ * 宿主的 resolveModel 只在 model 留空时才走兜底「首个已开启供应商的首个模型」;
+ * 传一个它解析不出的 ID 会直接返回 null, 调用点报「未找到 AI 模型配置」,
+ * 用户自己配好的模型也用不了 —— 所以这里不能有任何硬编码的默认模型。
+ */
+ async function withPlatformAi(ai: any) {
+ (window as any).platform = { ai };
+ vi.resetModules();
+ return await import('../utils/platform');
+ }
+
+ /** 取自录一次 ai() 收到的 option */
+ const lastOption = (ai: any) => ai.mock.calls[0][0] as { model?: string; messages: unknown[] };
+
+ afterEach(() => {
+ vi.resetModules();
+ });
+
+ it('**不传 model 时 option.model 必须是 undefined**, 不能有硬编码默认值', async () => {
+ const ai = vi.fn(async () => ({ role: 'assistant', content: 'ok' }));
+ const p = await withPlatformAi(ai);
+
+ await p.aiChat([{ role: 'user', content: 'hi' }]);
+
+ expect(ai).toHaveBeenCalledTimes(1);
+ const option = lastOption(ai);
+ expect(option.model).toBeUndefined();
+ expect(Object.keys(option).sort()).toEqual(['messages', 'model']);
+ });
+
+ it('不传 model 时 option 里没有硬编码的供应商模型 ID', async () => {
+ const ai = vi.fn(async () => ({ role: 'assistant', content: 'ok' }));
+ const p = await withPlatformAi(ai);
+
+ await p.aiChat([{ role: 'user', content: 'hi' }]);
+
+ expect(JSON.stringify(lastOption(ai))).not.toMatch(/doubao|gpt-|qwen/i);
+ });
+
+ it('显式传入 model 时原样透传', async () => {
+ const ai = vi.fn(async () => ({ role: 'assistant', content: 'ok' }));
+ const p = await withPlatformAi(ai);
+
+ await p.aiChat([{ role: 'user', content: 'hi' }], 'some-provider:model-x');
+
+ expect(lastOption(ai).model).toBe('some-provider:model-x');
+ });
+
+ it('isAIAvailable 直接看 platform.ai, 不依赖其他字段', async () => {
+ expect((await withPlatformAi(undefined)).isAIAvailable()).toBe(false);
+ expect((await withPlatformAi(vi.fn())).isAIAvailable()).toBe(true);
+ });
+});
+
+describe('copyText 的降级与回退', () => {
+ it('平台存在时直接走平台 API, 不碰 navigator.clipboard', async () => {
+ // platform 是模块顶层读的(const platform = window.platform),
+ // 所以必须重置模块注册表后重新 import 才能让桩生效
+ const platformCopy = vi.fn();
+ (window as any).platform = { copyText: platformCopy };
+ const clipboardSpy = vi.fn(() => Promise.resolve());
+ vi.stubGlobal('navigator', { clipboard: { writeText: clipboardSpy } });
+
+ vi.resetModules();
+ const fresh = await import('../utils/platform');
+ fresh.copyText('#abcdef');
+
+ expect(platformCopy).toHaveBeenCalledWith('#abcdef');
+ expect(clipboardSpy).not.toHaveBeenCalled();
+ vi.unstubAllGlobals();
+ vi.resetModules();
+ });
+
+ it('clipboard.writeText 成功时不走 execCommand', async () => {
+ const writeText = vi.fn(() => Promise.resolve());
+ vi.stubGlobal('navigator', { clipboard: { writeText } });
+ const execSpy = vi.fn(() => true);
+ document.execCommand = execSpy;
+
+ copyText('#123456');
+ await Promise.resolve();
+
+ expect(writeText).toHaveBeenCalledWith('#123456');
+ expect(execSpy).not.toHaveBeenCalled();
+ vi.unstubAllGlobals();
+ });
+
+ it('clipboard 被拒(Promise reject)时回退到 execCommand', async () => {
+ // try/catch 必须能接住 Promise 的异步 reject:
+ // 同步 try/catch 接不住的话, 权限被拒时会静默丢弃, 走不到回退分支。
+ const writeText = vi.fn(() => Promise.reject(new Error('NotAllowedError')));
+ vi.stubGlobal('navigator', { clipboard: { writeText } });
+ const execSpy = vi.fn(() => true);
+ document.execCommand = execSpy;
+
+ copyText('#aabbcc');
+ // 等 writeText 的 reject 被 catch 处理
+ await new Promise((r) => setTimeout(r, 0));
+
+ expect(writeText).toHaveBeenCalledWith('#aabbcc');
+ expect(execSpy).toHaveBeenCalledWith('copy');
+ vi.unstubAllGlobals();
+ });
+
+ it('navigator.clipboard 不存在(非安全上下文)时直接走 execCommand', () => {
+ vi.stubGlobal('navigator', {});
+ const execSpy = vi.fn(() => true);
+ document.execCommand = execSpy;
+
+ copyText('#000000');
+
+ expect(execSpy).toHaveBeenCalledWith('copy');
+ vi.unstubAllGlobals();
+ });
+
+ it('回退实现不留残留 textarea 在 DOM 里', () => {
+ vi.stubGlobal('navigator', {});
+ document.execCommand = vi.fn(() => true);
+
+ copyText('#eeeeee');
+
+ expect(document.querySelectorAll('textarea')).toHaveLength(0);
+ vi.unstubAllGlobals();
+ });
+
+ it('回退实现把文本写进了 textarea', () => {
+ vi.stubGlobal('navigator', {});
+ let captured = '';
+ document.execCommand = vi.fn(() => {
+ captured = (document.querySelector('textarea') as HTMLTextAreaElement)?.value ?? '';
+ return true;
+ });
+
+ copyText('#fedcba');
+
+ expect(captured).toBe('#fedcba');
+ vi.unstubAllGlobals();
+ });
+});
diff --git a/plugins/color-helper/tests/plugin-json.test.ts b/plugins/color-helper/tests/plugin-json.test.ts
new file mode 100644
index 000000000..c907e9586
--- /dev/null
+++ b/plugins/color-helper/tests/plugin-json.test.ts
@@ -0,0 +1,204 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+/**
+ * public/plugin.json 的颜色匹配正则 —— 最需要上锁的地方
+ *
+ * 两条硬约束:
+ * 1. 裸 hex 分支必须要求"同时含数字和 a-f 字母", 只用 `^[a-f0-9]{6}$` 会把
+ * decade / facade / accede / beaded 这类英文单词和 123456 / 000000 / ffffff
+ * 一起误判成颜色。故加两个 lookahead。
+ * 2. 大小写不敏感必须写在 pattern 本身([a-fA-F0-9] / [rR][gG][bB] ...),
+ * 不能靠结尾的 /i —— 宿主在主输入框边打边搜时会丢光 flags,
+ * 依赖 flag 的话 `#FFF` / `FF0000` 在主输入框里根本不匹配。
+ */
+
+interface PluginCmd { type?: string; match?: string; minLength?: number; maxLength?: number; label?: string }
+interface PluginFeature { code: string; explain?: string; cmds: Array }
+
+const plugin = JSON.parse(
+ readFileSync(resolve(__dirname, '../public/plugin.json'), 'utf-8'),
+) as { features: PluginFeature[] };
+
+/** 取某个功能里 type=regex 的那条命令; 该功能没有 regex 命令时返回 undefined */
+function regexCmd(featureCode: string): PluginCmd | undefined {
+ const feature = plugin.features.find((f) => f.code === featureCode);
+ if (!feature) throw new Error(`plugin.json 里找不到 feature: ${featureCode}`);
+ return feature.cmds.find((c): c is PluginCmd => typeof c === 'object' && c.type === 'regex');
+}
+
+/** 该功能必须有 regex 命令, 取不到就抛 —— 给"颜色"这条必填路径用 */
+function requiredRegexCmd(featureCode: string): PluginCmd {
+ const cmd = regexCmd(featureCode);
+ if (!cmd) throw new Error(`feature ${featureCode} 里没有 regex 命令`);
+ return cmd;
+}
+
+/** JSON 里存的是 "/^...$/i" 字符串, 剥掉首尾定界符还原成 RegExp */
+function toRegExp(match: string): RegExp {
+ const m = match.match(/^\/(.*)\/([a-z]*)$/s);
+ if (!m) throw new Error(`match 不是 /.../flags 形式: ${match}`);
+ return new RegExp(m[1]!, m[2]!);
+}
+
+/**
+ * 模拟宿主"边打边搜"分支: parseMatchPattern 的 preserveFlags 为 false, flags 被整个丢掉。
+ */
+function toRegExpWithoutFlags(match: string): RegExp {
+ const m = match.match(/^\/(.*)\/([a-z]*)$/s);
+ if (!m) throw new Error(`match 不是 /.../flags 形式: ${match}`);
+ return new RegExp(m[1]!);
+}
+
+const colorRe = toRegExp(requiredRegexCmd('color').match!);
+/** flags 被丢掉后的版本 —— 主输入框实际用到的就是它 */
+const colorReNoFlags = toRegExpWithoutFlags(requiredRegexCmd('color').match!);
+
+/** 全部应当匹配的用例, 供两组正则共用 */
+const SHOULD_MATCH = [
+ '#fff',
+ '#FFF',
+ '#ffffff',
+ '#FFFFFF',
+ '#11223344',
+ '#11223344'.toUpperCase(),
+ 'ff0000',
+ 'FF0000',
+ 'a1b2c3',
+ 'A1B2C3',
+ '255, 0, 0',
+ '255 0 0',
+ 'rgb(1,2,3)',
+ 'RGB(1,2,3)',
+ 'rgb(1, 2, 3)',
+ 'rgba(1,2,3,0.5)',
+ 'RGBA(1,2,3,0.5)',
+ 'hsl(120, 50%, 50%)',
+ 'HSL(120, 50%, 50%)',
+ 'hsla(120, 50%, 50%, 0.5)',
+ 'hsv(120, 50%, 50%)',
+ 'hsi(120, 50%, 50%)',
+ 'hsl(120deg, 50%, 50%)',
+ '#fff;',
+];
+
+const SHOULD_REJECT = [
+ // 裸 hex 分支最典型的假阳性: 英文单词与纯数字串
+ 'decade',
+ 'facade',
+ 'accede',
+ 'beaded',
+ '123456',
+ '000000',
+ 'ffffff',
+ 'DECADE',
+ 'FACADE',
+ // 其它非法输入
+ '#gggggg',
+ '#GGGGGG',
+ '',
+ 'rgb(1,2,3',
+ 'rgb(1,2,3)extra',
+ 'rgb(255, 0, 0,)',
+ 'hsl(120, 50%, 50%%',
+ 'rgb(999,0,0)',
+ '1,2',
+ '1,2,3,4',
+ '999,999,999',
+ '#ffff',
+ 'the cafe',
+ 'the CAFE',
+ 'red',
+ '##fff',
+ '#ff',
+];
+
+describe('颜色正则的硬约束', () => {
+ it('**不使用 maxLength** —— 这不是 RegexCmd 的字段, 写了也不生效', () => {
+ // 官方 RegexCmd 只有 { type, minLength, match, label },
+ // maxLength 只存在于 OverCmd / FilesCmd。
+ expect(requiredRegexCmd('color').maxLength).toBeUndefined();
+ });
+
+ it('**不以 /i 收尾** —— 大小写不敏感必须写在 pattern 里', () => {
+ // 一旦有人把 /i 加回来当"保险", 这条会红, 提醒他 pattern 已经自足了
+ const m = requiredRegexCmd('color').match!;
+ expect(m.match(/^\/(.*)\/([a-z]*)$/s)![2]).toBe('');
+ });
+
+ it('**pattern 里不含裸的小写关键字** —— rgb/hsl/deg 等都必须写成 [rR][gG][bB]', () => {
+ const body = requiredRegexCmd('color').match!.replace(/^\/|\/$/g, '');
+ // 先摘掉括号字符类里的内容, 再看剩下的部分有没有裸露的 rgb/hsl/deg
+ const outsideClasses = body.replace(/\[[^\]]*\]/g, '□');
+ expect(outsideClasses).not.toMatch(/rgb|hsl|hsv|hsi|deg/);
+ });
+
+ it('**AI 配色不挂颜色正则** —— 与「颜色」撞同一个入口只会多出一条冗余候选', () => {
+ // 粘一个色值时彩色候选由「颜色」一条负责; AI 配色是重交互页面, 不该出现在
+ // 这种即时匹配里, 入口只留 "AI 配色" 文本命令。
+ expect(regexCmd('ai')).toBeUndefined();
+ expect(plugin.features.find((f) => f.code === 'ai')!.cmds).toEqual(['AI 配色']);
+ });
+});
+
+describe.each([
+ ['color(带 flags)', colorRe],
+ ['**color(flags 被宿主丢掉, 即边打边搜)**', colorReNoFlags],
+])('%s 功能正则', (_name, re) => {
+ it.each(SHOULD_MATCH)('应当匹配: %s', (input) => {
+ expect(re.test(input)).toBe(true);
+ });
+
+ it.each(SHOULD_REJECT)('应当拒绝: %s', (input) => {
+ expect(re.test(input)).toBe(false);
+ });
+});
+
+describe('边打边搜与粘贴/快捷键两条路径结果必须一致', () => {
+ // 边打边搜(preserveFlags: false 丢光 flags)与粘贴/快捷键两条路径, 判定必须一致
+ it.each([...SHOULD_MATCH, ...SHOULD_REJECT])(
+ 'preserveFlags 两分支对 %s 的判定相同',
+ (input) => {
+ expect(colorReNoFlags.test(input)).toBe(colorRe.test(input));
+ },
+ );
+
+ it('丢 flag 时这几个样本必须仍然匹配', () => {
+ for (const s of ['#FFF', '#FFFFFF', 'FF0000', 'A1B2C3', 'RGB(1,2,3)', 'HSL(120, 50%, 50%)']) {
+ expect(colorReNoFlags.test(s)).toBe(true);
+ }
+ });
+});
+
+describe('正则标志', () => {
+ it('无 g/y 标志, lastIndex 不会导致交替调用结果漂移', () => {
+ expect(colorRe.global).toBe(false);
+ expect(colorRe.sticky).toBe(false);
+ expect(colorReNoFlags.global).toBe(false);
+ expect(colorReNoFlags.sticky).toBe(false);
+ });
+});
+
+describe('侧边栏顺序与 plugin.json 对齐', () => {
+ /**
+ * 同一个功能在插件里只该有一个排名 —— App.tsx 的 navItems 与 plugin.json 的
+ * features 各排一套的话, 改了一处忘了另一处就开始打架, 而且没人看得出来。
+ * pickercolor 是纯动作(执行后落在颜色页), 不在侧边栏里, 故排除。
+ */
+ it('navItems 的 key 序列是 features 剔除 pickercolor 后的子序列', async () => {
+ const { navItems } = await import('../App');
+ const menuCodes = plugin.features
+ .map((f) => f.code)
+ .filter((code) => code !== 'pickercolor');
+
+ expect(navItems.map((item) => item.key)).toEqual(menuCodes);
+ });
+
+ it('**侧边栏每项在 plugin.json 里都有同名页签** —— 否则点进去的 code 宿主不认', async () => {
+ const { navItems } = await import('../App');
+ const codes = new Set(plugin.features.map((f) => f.code));
+
+ navItems.forEach((item) => expect(codes.has(item.key)).toBe(true));
+ });
+});
diff --git a/plugins/color-helper/tests/quantize.test.ts b/plugins/color-helper/tests/quantize.test.ts
new file mode 100644
index 000000000..7e201ae65
--- /dev/null
+++ b/plugins/color-helper/tests/quantize.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest';
+import { quantize } from '../utils/quantize';
+
+/** 生成参考像素集: r∈[0,256,4) × g∈[0,256,8) × b∈[0,256,16) = 32768 个 */
+function referencePixels(): number[][] {
+ const px: number[][] = [];
+ for (let r = 0; r < 256; r += 4)
+ for (let g = 0; g < 256; g += 8)
+ for (let b = 0; b < 256; b += 16) px.push([r, g, b]);
+ return px;
+}
+
+describe('quantize 参数校验', () => {
+ it('空像素集返回 null', () => {
+ expect(quantize([], 10)).toBeNull();
+ });
+
+ it('maxColors < 2 返回 null(但 1 是合法整数, 不抛错)', () => {
+ expect(quantize([[1, 2, 3]], 1)).toBeNull();
+ });
+
+ it('maxColors 非整数抛 Error', () => {
+ expect(() => quantize([[1, 2, 3]], 2.5)).toThrow();
+ });
+
+ it('maxColors 超出 1..256 抛 Error', () => {
+ expect(() => quantize([[1, 2, 3]], 0)).toThrow();
+ expect(() => quantize([[1, 2, 3]], 257)).toThrow();
+ });
+});
+
+describe('quantize 两个分支', () => {
+ it('去重后 <= maxColors 走 SimpleCMap: map() 原样返回像素', () => {
+ const cmap = quantize([[1, 2, 3], [4, 5, 6], [7, 8, 9]], 10)!;
+ expect(cmap.map([1, 2, 3])).toEqual([1, 2, 3]);
+ });
+
+ it('SimpleCMap 的 palette 就是去重后的原像素', () => {
+ const cmap = quantize([[1, 2, 3], [1, 2, 3], [4, 5, 6]], 10)!;
+ expect(cmap.palette()).toEqual([[1, 2, 3], [4, 5, 6]]);
+ });
+
+ it('去重后 > maxColors 走 CMap 分支, 返回 maxColors 个代表色', () => {
+ const cmap = quantize(referencePixels(), 10)!;
+ expect(cmap.palette()).toHaveLength(10);
+ });
+});
+
+describe('回归重点: palette() / map() 的返回形状', () => {
+ it('palette() 每项是长度 3 的数组, 元素在 0..255', () => {
+ const palette = quantize(referencePixels(), 10)!.palette();
+ expect(palette.length).toBeGreaterThan(0);
+ for (const c of palette) {
+ expect(Array.isArray(c)).toBe(true);
+ expect(c).toHaveLength(3);
+ for (const ch of c) {
+ expect(Number.isInteger(ch)).toBe(true);
+ expect(ch).toBeGreaterThanOrEqual(0);
+ expect(ch).toBeLessThanOrEqual(255);
+ }
+ }
+ });
+
+ it('map() 返回 number[] 而不是 number', () => {
+ const mapped = quantize(referencePixels(), 10)!.map([12, 34, 56]);
+ expect(Array.isArray(mapped)).toBe(true);
+ expect(mapped).toHaveLength(3);
+ });
+});
+
+describe('回归基线: 固定输入产出固定结果', () => {
+ it('32768 像素量化为 10 色', () => {
+ const cmap = quantize(referencePixels(), 10)!;
+ expect(cmap.palette()).toHaveLength(10);
+ });
+
+ it('重复调用结果稳定(优先队列无随机性)', () => {
+ const a = quantize(referencePixels(), 10)!.palette();
+ const b = quantize(referencePixels(), 10)!.palette();
+ expect(a).toEqual(b);
+ });
+});
diff --git a/plugins/color-helper/tests/traditional-color.test.ts b/plugins/color-helper/tests/traditional-color.test.ts
new file mode 100644
index 000000000..9c75a84f8
--- /dev/null
+++ b/plugins/color-helper/tests/traditional-color.test.ts
@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import { getColorAttr } from '../pages/TraditionalColorsPage';
+import { classifyColor } from '../pages/GradientsPage';
+import { isDarkColor } from '../utils/color';
+
+/**
+ * 传统色的 tag/dark 判定
+ * tag 分段: l<0.2 black / l>0.85 white / s<0.2 gray / 其余按色相分段
+ */
+
+describe('getColorAttr: tag 分类', () => {
+ it('明度两端', () => {
+ expect(getColorAttr('#000000').tag).toBe('black');
+ expect(getColorAttr('#ffffff').tag).toBe('white');
+ });
+
+ it('低饱和走 gray', () => {
+ expect(getColorAttr('#808080').tag).toBe('gray');
+ expect(getColorAttr('#C4C4C4').tag).toBe('gray');
+ });
+
+ it('色相分段', () => {
+ expect(getColorAttr('#E91E63').tag).toBe('red');
+ expect(getColorAttr('#336699').tag).toBe('blue');
+ expect(getColorAttr('#2E8B57').tag).toBe('green');
+ expect(getColorAttr('#FFD700').tag).toBe('yellow');
+ });
+});
+
+describe('getColorAttr: dark 与统一判据一致', () => {
+ it('等于 isDarkColor(与全局统一判据一致)', () => {
+ const samples = [
+ '#000000', '#ffffff', '#808080', '#E91E63', '#336699', '#C4C4C4',
+ '#FFF799', '#B6A014', '#D5EBE1', '#80A492', '#FFF', '#123456',
+ ];
+ for (const c of samples) {
+ expect(getColorAttr(c).dark).toBe(isDarkColor(c));
+ }
+ });
+});
+
+describe('getColorAttr: 边界值', () => {
+ it('灰阶下落为 0 而不是 NaN 分支', () => {
+ // 纯灰的 chroma.hsl()[0] 是 NaN, 实现里回落为 0 -> 落在 red 段
+ // (只因 s < 0.2 更早命中, 实际 tag 是 gray)
+ expect(getColorAttr('#808080').tag).toBe('gray');
+ expect(getColorAttr('#ffffff').tag).toBe('white');
+ expect(getColorAttr('#000000').tag).toBe('black');
+ });
+
+ it('l 恰好 0.2 / s 恰好 0.2 的邻域不发散', () => {
+ // hsl(120, 50%, 20%) -> l 正好 0.2, 不满足 l<0.2, 落到色相分段
+ expect(getColorAttr('#1a4d1a').tag).not.toBe('black');
+ // hsl(120, 50%, 19%) -> l < 0.2
+ expect(getColorAttr('#184618').tag).toBe('black');
+ });
+
+ it('色相恰好落在分段边界上时归入后一段', () => {
+ // h=70 不满足 <70, 归 green
+ expect(getColorAttr('hsl(70, 100%, 50%)').tag).toBe('green');
+ // h=69.9 归 yellow
+ expect(getColorAttr('hsl(69.9, 100%, 50%)').tag).toBe('yellow');
+ });
+});
+
+describe('classifyColor(渐变页) 与 getColorAttr(传统色页) 同源', () => {
+ // 两个文件各有一份色相分段表, 词表必须一致 —— 否则同一颜色在
+ // 渐变页筛选项与传统色页筛选项会归到不同类
+ it('tag 词表一致', () => {
+ const hues = [0, 20, 30, 60, 100, 170, 200, 300, 340, 359];
+ for (const h of hues) {
+ const color = `hsl(${h}, 80%, 45%)`;
+ expect(classifyColor(color)).toBe(getColorAttr(color).tag);
+ }
+ });
+
+ it('通用取样下两者结果相同', () => {
+ for (let r = 0; r < 256; r += 51) {
+ for (let g = 0; g < 256; g += 51) {
+ for (let b = 0; b < 256; b += 51) {
+ const hex = `#${[r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('')}`;
+ expect(classifyColor(hex)).toBe(getColorAttr(hex).tag);
+ }
+ }
+ }
+ });
+});
diff --git a/plugins/color-helper/tsconfig.json b/plugins/color-helper/tsconfig.json
index 3934b8f6d..efc3bc2bd 100644
--- a/plugins/color-helper/tsconfig.json
+++ b/plugins/color-helper/tsconfig.json
@@ -16,6 +16,6 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
- "include": ["src"],
+ "include": ["App.tsx", "main.tsx", "vite-env.d.ts", "pages", "utils", "types", "data", "tests"],
"references": [{ "path": "./tsconfig.node.json" }]
}
diff --git a/plugins/color-helper/tsconfig.node.json b/plugins/color-helper/tsconfig.node.json
index 42872c59f..7bfd9ca99 100644
--- a/plugins/color-helper/tsconfig.node.json
+++ b/plugins/color-helper/tsconfig.node.json
@@ -1,10 +1,13 @@
{
"compilerOptions": {
"composite": true,
+ "emitDeclarationOnly": true,
+ "outDir": "./node_modules/.tmp/tsconfig.node",
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
- "include": ["vite.config.ts"]
+ "include": ["vite.config.ts", "vitest.config.ts"]
}
diff --git a/plugins/color-helper/types/index.ts b/plugins/color-helper/types/index.ts
index 33188d500..5db381282 100644
--- a/plugins/color-helper/types/index.ts
+++ b/plugins/color-helper/types/index.ts
@@ -1,93 +1,140 @@
-// 颜色格式类型
-export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
+// 颜色数据模型
+//
+// 与 data/*.json 的实际形状一一对应(已逐一核对, 见各注释)。
+// 注意: tsconfig 开启了 resolveJsonModule, JSON 推断为字面量类型,
+// 因此结构不符不会在编译期报错 —— 必须靠这里的接口约束住,
+// 各页面通过 `as unknown as Xxx[]` 显式声明形状后再消费。
-// 颜色对象接口
-export interface ColorObject {
- hex: string;
- rgb: { r: number; g: number; b: number };
- hsl: { h: number; s: number; l: number };
- hsv: { h: number; s: number; v: number };
-}
+/** 渐变色预设 —— data/gradients-*.json 的实际形状: 颜色数组的数组(无 name/angle/category) */
+export type GradientPreset = string[];
-// 收藏的颜色项
-export interface CollectedColor {
- id: string;
- name: string;
- color: string;
- createdAt: number;
+/** Material Design 色板 —— data/ui-material-design.json: 14 槽(10 主色 + A100~A400, 部分色系无强调色时为空串) */
+export interface MaterialColorCategory {
+ title: string;
+ colors: string[];
}
-// 渐变色配置
-export interface GradientConfig {
+/** 通用 UI 色板 —— data/ui-ant-design.json / ui-open-color.json / ui-fluent.json */
+export interface UIColorCategory {
+ title: string;
colors: string[];
- angle: number;
- type: 'linear' | 'radial';
+ /** 仅 ant-design 提供, 作者标注(如"平稳、中态"), 界面暂未展示 */
+ description?: string;
}
-// 渐变预设
-export interface GradientPreset {
- name: string;
- colors: string[];
- angle?: number;
- category: string;
+/** Flat UI 色板 —— data/ui-flat-ui.json: 每槽为一组色阶(6 个字符串), 不是单个色值 */
+export interface FlatUIColorCategory {
+ title: string;
+ colors: string[][];
}
-// UI色卡分类
-export interface UIColorCategory {
- name: string;
- colors: string[];
+/** 中国传统色分组 —— data/traditional-china.json: { title, colors: [{name,color}] } */
+export interface ChinaColorCategory {
+ title: string;
+ colors: Array<{ name: string; color: string }>;
}
-// 传统色分类
-export interface TraditionalColorCategory {
+/** 日本传统色条目 —— data/traditional-japan.json: 扁平列表, 额外带日语假名 */
+export interface JapanColorItem {
name: string;
- title: string;
- colors: Array<{
- name: string;
- color: string;
- pinyin?: string;
- }>;
+ color: string;
+ jname: string;
}
+/** 官方 getPath 允许的路径名 */
+export type PlatformPathName =
+ | 'home' | 'appData' | 'userData' | 'cache' | 'temp' | 'exe' | 'module'
+ | 'desktop' | 'documents' | 'downloads' | 'music' | 'pictures' | 'videos'
+ | 'logs' | 'pepperFlashSystemPlugin';
+
// 平台 API 类型声明
+//
+// 手写声明, 权威依据是官方 ztools.api.d.ts (@ztools-center/ztools-api-types)。
+// 只声明本项目实际用到的成员, 未用到的部分请直接对照官方 d.ts。
+//
+// 改动前请先核对官方 d.ts 与宿主实现, 不要凭印象改签名。
declare global {
+ /** 官方 DbDoc: 文档必须带 _id, _rev 由平台维护 */
+ interface PlatformDbDoc { _id: string; _rev?: string; [k: string]: any }
+
+ /** 官方 DbReturn —— db.put / db.remove 的同步返回 */
+ interface PlatformDbReturn {
+ id: string;
+ rev?: string;
+ ok?: boolean;
+ error?: boolean;
+ name?: string;
+ message?: string;
+ }
+
+ /** onPluginEnter 回调的 action */
+ interface PlatformEnterAction {
+ code: string;
+ type: string;
+ payload: any;
+ option?: any;
+ }
+
interface Window {
platform?: {
- onPluginEnter: (callback: (action: { code: string; type: string; payload: any }) => void) => void;
- onPluginOut: (callback: () => void) => void;
+ onPluginEnter: (callback: (action: PlatformEnterAction) => void) => void;
+ /** 回调参数是 processExit(进程是否退出) */
+ onPluginOut: (callback: (processExit: boolean) => void) => void;
dbStorage: {
getItem: (key: string) => any;
setItem: (key: string, value: any) => void;
removeItem: (key: string) => void;
};
- copyText: (text: string) => void;
- copyImage: (base64: string) => void;
- showNotification: (title: string, body: string) => void;
- setSubInput: (callback: (data: { text: string }) => void, placeholder: string, isFocus: boolean) => void;
- removeSubInput: () => void;
- hideMainWindow: () => void;
- outPlugin: () => void;
+ copyText: (text: string) => boolean;
+ /** img 可以是 base64 dataURL、Uint8Array 或图片路径 */
+ copyImage: (img: string | Uint8Array) => boolean;
+ /** 第一参是通知正文, featureName 用于标识来源功能 */
+ showNotification: (body: string, featureName?: string) => void;
+ setSubInput: (
+ onChange: (input: { text: string }) => void,
+ placeholder?: string,
+ isFocus?: boolean,
+ ) => boolean;
+ removeSubInput: () => boolean;
+ hideMainWindow: (isRestorePreWindow?: boolean) => boolean;
+ showMainWindow: () => boolean;
+ outPlugin: (isKill?: boolean) => boolean;
+ /** 宿主侧为异步弹窗, 返回值可能为 undefined, 调用方需容错 */
showSaveDialog: (options: {
- title: string;
- defaultPath: string;
- buttonLabel: string;
- filters: Array<{ extensions: string[]; name: string }>;
+ title?: string;
+ defaultPath?: string;
+ buttonLabel?: string;
+ filters?: Array<{ extensions: string[]; name: string }>;
+ properties?: string[];
}) => string | undefined;
+ /** 宿主侧为异步弹窗, 返回值可能为 undefined, 调用方需容错 */
showOpenDialog: (options: {
title?: string;
+ defaultPath?: string;
+ buttonLabel?: string;
filters?: Array<{ name: string; extensions: string[] }>;
properties?: string[];
}) => string[] | undefined;
- shellShowItemInFolder: (path: string) => void;
- getPath: (name: string) => string;
- pickColor: () => string;
- screenColorPick: (callback: (result: { hex: string }) => void) => void;
- screenCapture: (callback: (data: string) => void) => void;
+ shellShowItemInFolder: (fullPath: string) => void;
+ getPath: (name: PlatformPathName) => string;
+ screenColorPick: (callback: (color: { hex: string; rgb: string }) => void) => void;
+ /** imgBase64 是 data URL; bounds 仅 Windows / Linux 有值, macOS 为 undefined */
+ screenCapture: (
+ callback: (imgBase64: string, bounds?: { x: number; y: number; width: number; height: number }) => void,
+ ) => void;
db: {
- put: (doc: any) => any;
- get: (id: string) => any;
- remove: (id: string) => any;
+ put: (doc: PlatformDbDoc) => PlatformDbReturn;
+ get: (id: string) => PlatformDbDoc | null;
+ remove: (doc: string | PlatformDbDoc) => PlatformDbReturn;
+ allDocs: (key?: string) => PlatformDbDoc[];
};
+ /** model 留空时由宿主选用用户已配置的默认模型 */
+ ai: (option: {
+ model?: string;
+ messages: Array<{ role: 'system' | 'user' | 'assistant'; content?: string }>;
+ }) => Promise<{ role: string; content?: string; reasoning_content?: string; abort?: () => void }>;
+ /** 列出用户已配置的模型, 其 id / value 可回传给 ai() 的 model */
+ allAiModels: () => Promise>;
};
services?: {
saveColorCard: (buffer: ArrayBuffer) => Promise;
diff --git a/plugins/color-helper/utils/collect.ts b/plugins/color-helper/utils/collect.ts
new file mode 100644
index 000000000..cc296cb3e
--- /dev/null
+++ b/plugins/color-helper/utils/collect.ts
@@ -0,0 +1,66 @@
+import chroma from 'chroma-js';
+import { db, dbStorage } from './platform';
+import { isDarkColor } from './color';
+
+/**
+ * 收藏颜色的文档形状与写入
+ *
+ * 收藏页按 `color/` 前缀从 db 里捞文档、按 collectsort 里的顺序排,
+ * 换入口收藏必须写出完全一致的形状, 否则收藏页认不出来 ——
+ * 所以 _id 生成与字段拼装集中在这里, 供两个入口共用。
+ */
+
+/** 收藏页排序索引的 dbStorage key, 存收藏文档 _id 的数组 */
+export const COLLECT_SORT_KEY = "collectsort";
+
+export interface CollectColor {
+ _id: string;
+ _rev?: string;
+ name: string;
+ color: string;
+ dark?: boolean;
+}
+
+/** 文档 id: 色值小写、不带 "#"。同一个颜色只可能有一条文档 */
+export function collectDocId(hex: string): string {
+ return "color/" + hex.replace(/^#/, "").toLowerCase();
+}
+
+/** 归一化成 "#RRGGBB" / "#RRGGBBAA"(大写, chroma 3 对半透明色返回 8 位), 非法色值返回 null */
+export function normalizeHex(color: string): string | null {
+ if (typeof color !== "string") return null;
+ const text = color.trim();
+ if (!text || !chroma.valid(text)) return null;
+ const hex = chroma(text).hex().toUpperCase();
+ return /^#[0-9A-F]{6}([0-9A-F]{2})?$/.test(hex) ? hex : null;
+}
+
+/**
+ * 收藏一个颜色, 返回是否**新**收藏成功
+ *
+ * 色值非法、已经收藏过、db 写入失败都返回 false —— 调用方只关心"这次有没有新增"。
+ *
+ * collectsort 一并同步: 收藏页用 indexOf 排序, 索引里没有的 id 会被排到最后,
+ * 不追加的话新收藏的颜色看上去就是"收藏了但不见了"。
+ */
+export function saveCollectedColor(color: string): boolean {
+ const hex = normalizeHex(color);
+ if (!hex) return false;
+
+ const _id = collectDocId(hex);
+ if (db.get(_id)) return false;
+
+ const result = db.put({ _id, name: "", color: hex, dark: isDarkColor(hex) });
+ if (!result?.ok) return false;
+
+ const saved = dbStorage.getItem(COLLECT_SORT_KEY);
+ const order: string[] = Array.isArray(saved)
+ ? saved.filter((id: unknown): id is string => typeof id === "string")
+ : [];
+ // db 里已有、索引里没有的文档一并补上, 否则它们永远排在末尾
+ db.allDocs("color/").forEach((doc: any) => {
+ if (typeof doc?._id === "string" && !order.includes(doc._id)) order.push(doc._id);
+ });
+ dbStorage.setItem(COLLECT_SORT_KEY, order);
+ return true;
+}
diff --git a/plugins/color-helper/utils/color.ts b/plugins/color-helper/utils/color.ts
index db735ffd4..53d252a91 100644
--- a/plugins/color-helper/utils/color.ts
+++ b/plugins/color-helper/utils/color.ts
@@ -1,192 +1,49 @@
import chroma from 'chroma-js';
-import type { ColorObject } from '../types';
/**
- * 解析颜色输入,转换为标准颜色对象
+ * 颜色对比工具
+ *
+ * 只保留被使用的深浅判定与文字配色函数, 其余能力分别在:
+ *
+ * - 图片取色 -> pages/ImagePalettePage.tsx + utils/quantize.ts (Median Cut)
+ * - 色卡保存 -> pages/ImagePalettePage.tsx handleExport + public/preload.cjs
+ * - HSL/格式转换 -> pages/ColorPage.tsx
+ * - 渐变 CSS -> pages/GradientsPage.tsx
*/
-export function parseColor(input: string): ColorObject | null {
- try {
- const color = chroma(input);
- // chroma.js 不验证无效颜色时会抛出异常或返回特殊值
- return {
- hex: color.hex(),
- rgb: {
- r: Math.round(color.rgb()[0]),
- g: Math.round(color.rgb()[1]),
- b: Math.round(color.rgb()[2])
- },
- hsl: {
- h: Math.round(color.hsl()[0]),
- s: Math.round(color.hsl()[1] * 100),
- l: Math.round(color.hsl()[2] * 100)
- },
- hsv: {
- h: Math.round(color.hsv()[0]),
- s: Math.round(color.hsv()[1] * 100),
- v: Math.round(color.hsv()[2] * 100)
- }
- };
- } catch {
- return null;
- }
+/** WCAG 2.x 相对亮度 */
+function relativeLuminance(color: string): number {
+ return chroma(color).luminance();
}
-/**
- * HEX转RGB
- */
-export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
- const color = parseColor(hex);
- return color ? color.rgb : null;
-}
-
-/**
- * RGB转HEX
- */
-export function rgbToHex(r: number, g: number, b: number): string {
- return chroma(r, g, b).hex();
-}
-
-/**
- * HSL转HEX
- */
-export function hslToHex(h: number, s: number, l: number): string {
- try {
- return chroma.hsl(h, s / 100, l / 100).hex();
- } catch {
- return chroma.hsl(h % 360, Math.min(100, Math.max(0, s)) / 100, Math.min(100, Math.max(0, l)) / 100).hex();
- }
-}
-
-/**
- * 生成颜色的浅色变体
- */
-export function lightenColor(color: string, amount: number = 0.2): string {
- return chroma(color).brighten(amount * 10).hex();
-}
-
-/**
- * 生成颜色的深色变体
- */
-export function darkenColor(color: string, amount: number = 0.2): string {
- return chroma(color).darken(amount * 10).hex();
-}
-
-/**
- * 生成互补色
- */
-export function getComplementaryColor(color: string): string {
- const h = chroma(color).hsl()[0];
- return chroma.hsl((h + 180) % 360, chroma(color).hsl()[1], chroma(color).hsl()[2]).hex();
-}
-
-/**
- * 生成 triadic 配色(三色)
- */
-export function getTriadicColors(color: string): string[] {
- const base = chroma(color);
- const hsl = base.hsl();
- return [
- base.hex(),
- chroma.hsl((hsl[0] + 120) % 360, hsl[1], hsl[2]).hex(),
- chroma.hsl((hsl[0] + 240) % 360, hsl[1], hsl[2]).hex()
- ];
+/** WCAG 对比度公式 */
+function contrastRatio(l1: number, l2: number): number {
+ const hi = Math.max(l1, l2);
+ const lo = Math.min(l1, l2);
+ return (hi + 0.05) / (lo + 0.05);
}
/**
- * 生成 analogous 配色(类似色)
+ * 判断颜色是否为深色 —— 即"该底色上应当使用白字"
+ *
+ * 采用 WCAG 对比度做判定(比较白/黑哪个对比度更高), 等价于亮度阈值
+ * luminance < 0.1791。
+ * 判定依据: 相对亮度 0 与 1 对黑/白的对比度相等 => L = sqrt(0.05*1.05)-0.05
*/
-export function getAnalogousColors(color: string, count: number = 5): string[] {
- const base = chroma(color);
- const hsl = base.hsl();
- const colors: string[] = [base.hex()];
-
- for (let i = 1; i < count; i++) {
- colors.push(chroma.hsl((hsl[0] + i * 30) % 360, hsl[1], hsl[2]).hex());
- }
-
- return colors;
-}
-
-/**
- * 生成单色系
- */
-export function getMonochromaticColors(color: string, count: number = 5): string[] {
- return chroma.scale([color, '#fff']).mode('lch').colors(count);
-}
-
-/**
- * 从图片中提取主色调(简化版,实际需要Canvas处理)
- */
-export async function extractColorsFromImage(imageSrc: string, count: number = 5): Promise {
- return new Promise((resolve) => {
- const img = new Image();
- img.crossOrigin = 'Anonymous';
- img.onload = () => {
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
-
- if (!ctx) {
- resolve(['#000000']);
- return;
- }
-
- canvas.width = img.width;
- canvas.height = img.height;
- ctx.drawImage(img, 0, 0);
-
- const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- const data = imageData.data;
- const colorMap: Record = {};
-
- for (let i = 0; i < data.length; i += 4 * 10) {
- const r = data[i];
- const g = data[i + 1];
- const b = data[i + 2];
- const a = data[i + 3];
-
- if (a < 128) continue;
-
- const hex = chroma(r, g, b).hex();
- colorMap[hex] = (colorMap[hex] || 0) + 1;
- }
-
- const sortedColors = Object.entries(colorMap)
- .sort((a, b) => b[1] - a[1])
- .slice(0, count)
- .map(([color]) => color);
-
- resolve(sortedColors.length > 0 ? sortedColors : ['#000000']);
- };
- img.src = imageSrc;
- });
-}
-
-/**
- * 计算两个颜色的相似度(0-1)
- */
-export function getColorSimilarity(color1: string, color2: string): number {
- const c1 = chroma(color1);
- const c2 = chroma(color2);
- return 1 - chroma.deltaE(c1, c2) / 100;
+export function isDarkColor(hex: string): boolean {
+ const l = relativeLuminance(hex);
+ return contrastRatio(l, 1) >= contrastRatio(l, 0);
}
/**
- * 判断颜色是否适合白色文字
+ * 判断颜色是否为浅色(与 isDarkColor 严格互补)
*/
export function isLightColor(color: string): boolean {
- return chroma(color).luminance() > 0.5;
+ return !isDarkColor(color);
}
/**
- * 判断颜色是否为深色(Lab 亮度 < 80)
- */
-export function isDarkColor(hex: string): boolean {
- return chroma(hex).get('lab.l') < 80;
-}
-
-/**
- * 根据背景色深浅返回合适的文字颜色(黑/白)
+ * 根据背景色返回对比度更高的文字颜色(黑/白)
*/
export function textColorFor(hex: string): string {
return isDarkColor(hex) ? '#fff' : '#000';
@@ -202,109 +59,8 @@ export function dimColor(hex: string, alpha: number): string {
}
/**
- * 获取对比色(用于文字)
+ * 获取对比色(用于文字) —— 与 textColorFor 同一判据
*/
export function getContrastColor(color: string): string {
- return isLightColor(color) ? '#000000' : '#FFFFFF';
-}
-
-/**
- * 格式化CSS渐变字符串
- */
-export function formatGradient(colors: string[], angle: number = 90, type: 'linear' | 'radial' = 'linear'): string {
- if (type === 'radial') {
- return `radial-gradient(circle, ${colors.join(', ')})`;
- }
- return `linear-gradient(${angle}deg, ${colors.join(', ')})`;
-}
-
-/**
- * 从base64生成色卡图片
- */
-export function generateColorCardImage(colors: string[], width: number = 540, height: number = 270): Promise {
- return new Promise((resolve) => {
- const canvas = document.createElement('canvas');
- canvas.width = width;
- canvas.height = height;
- const ctx = canvas.getContext('2d');
- if (!ctx) { resolve(''); return; }
-
- const segmentWidth = width / colors.length;
- colors.forEach((color, index) => {
- ctx.fillStyle = color;
- ctx.fillRect(index * segmentWidth, 0, segmentWidth, height);
- });
-
- resolve(canvas.toDataURL('image/png'));
- });
-}
-
-/**
- * 保存色卡图片 - 使用平台 API或浏览器下载
- */
-export async function saveColorCard(colors: string[]): Promise {
- const base64 = await generateColorCardImage(colors);
-
- if (window.services?.saveColorCard) {
- const buffer = base64ToArrayBuffer(base64);
- await window.services.saveColorCard(buffer);
- } else {
- // 浏览器降级: 使用下载方式
- const a = document.createElement('a');
- a.href = base64;
- a.download = 'color-card.png';
- a.click();
- }
-}
-
-/**
- * base64转ArrayBuffer
- */
-function base64ToArrayBuffer(base64: string): ArrayBuffer {
- const binaryString = atob(base64.split(',')[1]);
- const bytes = new Uint8Array(binaryString.length);
- for (let i = 0; i < binaryString.length; i++) {
- bytes[i] = binaryString.charCodeAt(i);
- }
- return bytes.buffer;
-}
-
-/**
- * 复制图片到剪贴板
- */
-export async function copyImageToClipboard(base64: string): Promise {
- try {
- const response = await fetch(base64);
- const blob = await response.blob();
- await navigator.clipboard.write([
- new ClipboardItem({ [blob.type]: blob })
- ]);
- } catch {
- // 降级处理
- console.warn('Failed to copy image to clipboard');
- }
-}
-
-/**
- * 读取剪贴板中的图片
- */
-export async function readClipboardImage(): Promise {
- try {
- const items = await navigator.clipboard.read();
- for (const item of items) {
- for (const type of item.types) {
- if (type.startsWith('image/')) {
- const blob = await item.getType(type);
- return new Promise((resolve) => {
- const reader = new FileReader();
- reader.onload = () => resolve(reader.result as string);
- reader.readAsDataURL(blob);
- });
- }
- }
- }
- return null;
- } catch {
- return null;
- }
+ return isDarkColor(color) ? '#FFFFFF' : '#000000';
}
diff --git a/plugins/color-helper/utils/gradient.ts b/plugins/color-helper/utils/gradient.ts
new file mode 100644
index 000000000..dbd4cce3c
--- /dev/null
+++ b/plugins/color-helper/utils/gradient.ts
@@ -0,0 +1,27 @@
+/**
+ * 渐变几何计算
+ *
+ * 纯数学、零依赖的独立模块, 供 pages/GradientsPage.tsx 使用;
+ * 回归风险最高, 配了 tests/gradient-geometry.test.ts 专门锁住。
+ */
+
+/**
+ * 计算渐变线的起止坐标(用于 Canvas 渲染)
+ * 必须与 CSS linear-gradient(angle) 的渐变线一致:
+ * - 方向向量 d = (sin a, -cos a) (CSS 中 0deg 指向上, y 轴向下)
+ * - 渐变线长度 L = |w·sin a| + |h·cos a| (不是对角线)
+ * - 以画布中心为中点, 向两侧各延伸 L/2
+ * 否则 Canvas 会在端点外钳制色值, 导出图上出现大片纯色区
+ */
+export function calculateGradientLine(width: number, height: number, angle: number) {
+ const rad = angle * Math.PI / 180;
+ const dirX = Math.sin(rad);
+ const dirY = -Math.cos(rad);
+ const half = (Math.abs(width * dirX) + Math.abs(height * dirY)) / 2;
+ return {
+ tx: width / 2 - dirX * half,
+ ty: height / 2 - dirY * half,
+ bx: width / 2 + dirX * half,
+ by: height / 2 + dirY * half,
+ };
+}
diff --git a/plugins/color-helper/utils/platform.ts b/plugins/color-helper/utils/platform.ts
index 68a1062d7..c3630101f 100644
--- a/plugins/color-helper/utils/platform.ts
+++ b/plugins/color-helper/utils/platform.ts
@@ -5,16 +5,13 @@
* - 解耦业务代码与平台 API
*/
-// 平台实例
const platform = window.platform;
-// localStorage key 前缀
const STORAGE_PREFIX = 'color_helper_';
-// 环境检测
export const isPlatform = !!platform;
-// dbStorage 适配
+// dbStorage 适配
export const dbStorage = {
getItem(key: string): any {
if (platform?.dbStorage) {
@@ -63,9 +60,16 @@ export const db = {
}
},
- put(doc: any): { ok: boolean; id: string; rev?: string; error?: string } {
+ put(doc: any): { ok: boolean; id: string; rev?: string; error?: unknown } {
if (platform?.db) {
- return platform.db.put(doc);
+ // 平台分支返回 DbReturn(ok 可选、error 是布尔), 归一化成与降级分支一致的形状
+ const r = platform.db.put(doc);
+ return {
+ ok: r.ok !== false && !r.error,
+ id: r.id,
+ rev: r.rev,
+ error: r.error ? (r.message ?? r.name ?? 'db.put failed') : undefined,
+ };
}
try {
const id = doc._id;
@@ -73,19 +77,23 @@ export const db = {
const rev = existing?._rev ? String(parseInt(existing._rev || '0') + 1) : '1';
const toSave = { ...doc, _rev: rev };
localStorage.setItem(`${STORAGE_PREFIX}db_${id}`, JSON.stringify(toSave));
- return { ok: true, id, rev };
+ return { ok: true, id, rev, error: undefined };
} catch (e: any) {
return { ok: false, id: doc._id, error: e.message };
}
},
- remove(doc: any): { ok: boolean; error?: string } {
+ remove(doc: any): { ok: boolean; error?: unknown } {
if (platform?.db) {
- return platform.db.remove(doc);
+ const r = platform.db.remove(doc);
+ return {
+ ok: r.ok !== false && !r.error,
+ error: r.error ? (r.message ?? r.name ?? 'db.remove failed') : undefined,
+ };
}
try {
localStorage.removeItem(`${STORAGE_PREFIX}db_${doc._id}`);
- return { ok: true };
+ return { ok: true, error: undefined };
} catch (e: any) {
return { ok: false, error: e.message };
}
@@ -93,63 +101,91 @@ export const db = {
allDocs(key?: string): any[] {
if (platform?.db) {
- return platform.db.allDocs(key);
+ try {
+ return platform.db.allDocs(key) ?? [];
+ } catch {
+ return [];
+ }
}
+ const results: any[] = [];
try {
- const results: any[] = [];
const prefix = `${STORAGE_PREFIX}db_`;
for (let i = 0; i < localStorage.length; i++) {
const k = localStorage.key(i);
- if (k && k.startsWith(prefix)) {
- const v = localStorage.getItem(k);
- if (v) {
- const doc = JSON.parse(v);
- if (!key || doc._id.startsWith(key)) {
- results.push(doc);
- }
+ if (!k || !k.startsWith(prefix)) continue;
+ const v = localStorage.getItem(k);
+ if (!v) continue;
+ // 单个 doc 损坏只跳过该条, 不能让整批收藏都消失
+ try {
+ const doc = JSON.parse(v);
+ if (doc && (!key || (typeof doc._id === 'string' && doc._id.startsWith(key)))) {
+ results.push(doc);
}
- }
+ } catch { /* skip corrupt doc */ }
}
- return results;
} catch {
- return [];
+ return results;
}
+ return results;
},
};
// 剪贴板
+
+/** execCommand 回退: 非安全上下文(非 https / file)或 clipboard API 被拒时使用 */
+function copyTextFallback(text: string): void {
+ const ta = document.createElement('textarea');
+ ta.value = text;
+ ta.style.position = 'fixed';
+ ta.style.left = '-9999px';
+ document.body.appendChild(ta);
+ ta.select();
+ document.execCommand('copy');
+ document.body.removeChild(ta);
+}
+
export function copyText(text: string): void {
if (platform?.copyText) {
platform.copyText(text);
return;
}
+ // navigator.clipboard.writeText() 返回 Promise: API 不存在时同步抛、
+ // 权限被拒时异步 reject —— 同步 try/catch 只接得住前者,
+ // 两处都要落到 copyTextFallback 才算覆盖完整。
+ const clipboard = navigator.clipboard;
+ if (!clipboard?.writeText) {
+ copyTextFallback(text);
+ return;
+ }
try {
- navigator.clipboard.writeText(text);
+ clipboard.writeText(text).catch(() => copyTextFallback(text));
} catch {
- // fallback: textarea copy
- const ta = document.createElement('textarea');
- ta.value = text;
- ta.style.position = 'fixed';
- ta.style.left = '-9999px';
- document.body.appendChild(ta);
- ta.select();
- document.execCommand('copy');
- document.body.removeChild(ta);
+ copyTextFallback(text);
}
}
-export function copyImage(dataUrl: string): void {
+/** 复制图片到剪贴板(仅平台支持); 浏览器无对等 API, 降级为下载
+ * 浏览器不静默丢弃, 否则按钮点击后毫无反应 */
+export function copyImage(dataUrl: string, filename = 'image.png'): void {
if (platform?.copyImage) {
platform.copyImage(dataUrl);
return;
}
- console.warn('[fallback] copyImage not supported in browser');
+ const a = document.createElement('a');
+ a.href = dataUrl;
+ a.download = filename;
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
}
// 屏幕截图
-export function screenCapture(callback: (imagePath: string) => void): void {
- if ((platform as any)?.screenCapture) {
- (platform as any).screenCapture(callback);
+// 回调第二参 bounds 仅 Windows / Linux 有值(macOS 为 undefined)
+export function screenCapture(
+ callback: (imgBase64: string, bounds?: { x: number; y: number; width: number; height: number }) => void,
+): void {
+ if (platform?.screenCapture) {
+ platform.screenCapture(callback);
return;
}
console.warn('[fallback] screenCapture not supported in browser');
@@ -205,22 +241,31 @@ export function onPluginOut(callback: () => void): void {
}
}
-// AI API
-// 调用方式: platform.ai({model:"doubao-1.5-pro-32k", messages:[...]})
-// 返回 Promise<{content: string}>
+// AI API
+// 调用方式: platform.ai({ messages: [...] }), 一般不要传 model
+// 返回 Promise<{ role, content?: string, reasoning_content?: string }>
export function isAIAvailable(): boolean {
- return !!(platform as any)?.ai && typeof (platform as any).ai === 'function';
+ return !!platform?.ai && typeof platform.ai === 'function';
}
-export async function aiChat(messages: { role: string; content: string }[], model: string = 'doubao-1.5-pro-32k'): Promise<{ content: string }> {
+/**
+ * @param model 留空时宿主会选用用户已配置的默认模型(本地供应商优先)。
+ * 传了宿主解析不出来的 ID 会直接报「未找到 AI 模型配置」, 所以一般不要传。
+ * 确需指定时, 用 `allAiModels()` 取列表并回传其中的 id / value。
+ */
+export async function aiChat(
+ messages: Array<{ role: 'system' | 'user' | 'assistant'; content: string }>,
+ model?: string,
+): Promise<{ role?: string; content?: string }> {
if (!isAIAvailable()) {
throw new Error('当前版本不支持 AI 功能');
}
- return (platform as any).ai({ model, messages });
+ return platform!.ai({ model, messages });
}
// 文件对话框
+// 宿主侧弹窗是异步的, 返回值可能是 undefined, 调用方必须容错。
export function showOpenDialog(options: any): string[] | undefined {
if (platform?.showOpenDialog) {
return platform.showOpenDialog(options);
diff --git a/plugins/color-helper/utils/quantize.ts b/plugins/color-helper/utils/quantize.ts
index d197dcecf..fa8623f2f 100644
--- a/plugins/color-helper/utils/quantize.ts
+++ b/plugins/color-helper/utils/quantize.ts
@@ -14,11 +14,6 @@ function naturalOrder(a: number, b: number): number {
return a < b ? -1 : a > b ? 1 : 0;
}
-/** 数组求和 */
-function sumArray(array: number[]): number {
- return array.reduce((a, b) => a + b, 0);
-}
-
/**
* 优先队列 - 存储 VBox 对象，按比较器排序
* 延迟排序: dirty 标记确保只在需要时才排序
@@ -37,7 +32,7 @@ class PQueue {
peek(index?: number): VBox {
if (this.dirty) this.sort();
if (index === undefined) index = this.sorted.length - 1;
- return this.sorted[index];
+ return this.sorted[index]!;
}
pop(): VBox | undefined {
@@ -111,7 +106,7 @@ class VBox {
this._count = c;
this._count_set = true;
}
- return this._count;
+ return this._count!;
}
copy(): VBox {
@@ -168,7 +163,7 @@ class SimpleCMap {
palette(): number[][] {
return this.colors;
}
- map(pixel: number[]): number {
+ map(pixel: number[]): number[] {
return pixel;
}
}
@@ -198,7 +193,7 @@ class CMap {
}
/** 将像素映射到最近的代表色 */
- map(pixel: number[]): number {
+ map(pixel: number[]): number[] {
for (let i = 0; i < this.vboxes.size(); i++) {
if (this.vboxes.peek(i).vbox.contains(pixel)) {
return this.vboxes.peek(i).color;
@@ -208,7 +203,7 @@ class CMap {
}
/** 欧氏距离找最近代表色 */
- private nearest(pixel: number[]): number {
+ private nearest(pixel: number[]): number[] {
let minDist: number | undefined;
let best: number[] = pixel;
for (let i = 0; i < this.vboxes.size(); i++) {
@@ -242,7 +237,7 @@ class CMapPQueue {
peek(index?: number): { vbox: VBox; color: number[] } {
if (this.dirty) this.sort();
if (index === undefined) index = this.sorted.length - 1;
- return this.sorted[index];
+ return this.sorted[index]!;
}
pop(): { vbox: VBox; color: number[] } | undefined {
@@ -366,12 +361,12 @@ function medianCutApply(histo: HistoMap, vbox: VBox): VBox[] | null {
* 4. 按 count*volume 排序后第二轮切分: 目标 maxColors
* 5. 生成 CMap 颜色映射表
*/
-export function quantize(pixels: number[][], maxColors: number): CMap | SimpleCMap | null | false {
+export function quantize(pixels: number[][], maxColors: number): CMap | SimpleCMap | null {
if (!Number.isInteger(maxColors) || maxColors < 1 || maxColors > 256) {
throw new Error('Invalid maximum color count. It must be an integer between 1 and 256.');
}
- if (!pixels.length || maxColors < 2 || maxColors > 256) return false;
+ if (!pixels.length || maxColors < 2) return null;
// 去重
const uniquePixels: number[][] = [];
@@ -413,11 +408,11 @@ export function quantize(pixels: number[][], maxColors: number): CMap | SimpleCM
/** 迭代切分: 从优先队列中取出 VBox 进行中位切分，直到达到目标数量 */
function iterate(pq: PQueue, target: number): void {
- let A = pq.size(); // A = E.size()
+ let A = pq.size();
let I = 0;
while (I < 1000) {
- if (A >= target || I++ > 1000) return; // if(A>=w||I++>1e3)return
+ if (A >= target || I++ > 1000) return;
const P = pq.pop();
if (!P) return;
@@ -426,24 +421,24 @@ export function quantize(pixels: number[][], maxColors: number): CMap | SimpleCM
const B = medianCutApply(histo, P);
const N = B ? B[0] : null;
const j = B && B.length >= 2 ? B[1] : null;
- if (!N) return; // if(!N)return
+ if (!N) return;
pq.push(N);
if (j) {
pq.push(j);
- A++; // j&&(E.push(j),A++)
+ A++;
}
} else {
pq.push(P);
- I++; // I++ (only when count==0)
+ // 只有空盒(不可再切分)才推进计数: 有进展的切分不受 1000 次上限影响
+ I++;
}
}
}
- // 第一次切分: S(b, .75 * u) - u 是 maxColors，不是像素数！
+ // 第一轮切分目标 0.75 * maxColors(是颜色数, 不是像素数)
iterate(pq, 0.75 * maxColors);
- // 排序后放入新队列
- // 先把 pq 中的 vbox 全部取出排序
+ // 第二轮按 count × volume 排序: 大且满的盒子优先继续切分
const allVboxes: VBox[] = [];
while (pq.size() > 0) {
allVboxes.push(pq.pop()!);
diff --git a/plugins/color-helper/utils/storage.ts b/plugins/color-helper/utils/storage.ts
deleted file mode 100644
index d47a28aac..000000000
--- a/plugins/color-helper/utils/storage.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { CollectedColor } from '../types';
-import { dbStorage } from './platform';
-
-const STORAGE_KEY = 'color-collected';
-
-/**
- * 获取收藏的颜色列表
- */
-export function getCollectedColors(): CollectedColor[] {
- try {
- return dbStorage.getItem(STORAGE_KEY) || [];
- } catch {
- return [];
- }
-}
-
-/**
- * 保存收藏的颜色列表
- */
-export function saveCollectedColors(colors: CollectedColor[]): void {
- try {
- dbStorage.setItem(STORAGE_KEY, colors);
- } catch (error) {
- console.error('Failed to save collected colors:', error);
- }
-}
-
-/**
- * 添加收藏颜色
- */
-export function addColoredColor(color: string, name?: string): CollectedColor {
- const colors = getCollectedColors();
- const newColor: CollectedColor = {
- id: Date.now().toString(),
- name: name || color,
- color,
- createdAt: Date.now()
- };
-
- colors.unshift(newColor);
- saveCollectedColors(colors);
-
- return newColor;
-}
-
-/**
- * 删除收藏颜色
- */
-export function removeCollectedColor(id: string): void {
- const colors = getCollectedColors();
- const filtered = colors.filter(c => c.id !== id);
- saveCollectedColors(filtered);
-}
-
-/**
- * 更新收藏颜色名称
- */
-export function updateColoredColorName(id: string, name: string): void {
- const colors = getCollectedColors();
- const updated = colors.map(c =>
- c.id === id ? { ...c, name } : c
- );
- saveCollectedColors(updated);
-}
diff --git a/plugins/color-helper/vite-env.d.ts b/plugins/color-helper/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/plugins/color-helper/vite-env.d.ts
@@ -0,0 +1 @@
+///
{group.title}
@@ -170,7 +170,8 @@ class MaterialDesignColors extends PureComponent<{ onColorClick: (e: any) => voi
style={{ backgroundColor: color }}
onClick={this.props.onColorClick}
>
- {color.substr(1)}
+ {/* 色阶按浅→深排列: 前 5 档是浅色档配深字, 其余深色档配白字 */}
+ {color.substr(1)}
) : }