Skip to content

kimi res #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vergissin wants to merge 1 commit into
base: master
Choose a base branch
from
+7,389 −17
Open

kimi res #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
335 changes: 335 additions & 0 deletions .history/src/app/test/page_20260316165237.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,335 @@
'use client';

import { useState, useEffect } from 'react';
import {
hexToHsl,
hslToHex,
generateColorHarmonies,
generateRecommendedPair,
getColorWheelPosition,
getHslFromPosition
} from '@/lib/colorUtils';
import { generateGradientColors } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { CheckCircle, XCircle, AlertCircle } from 'lucide-react';

interface TestResult {
name: string;
passed: boolean;
message: string;
}

export default function TestPage() {
const [results, setResults] = useState<TestResult[]>([]);
const [isRunning, setIsRunning] = useState(false);

const runTests = () => {
setIsRunning(true);
const testResults: TestResult[] = [];

// 测试 1: HEX 转 HSL
try {
const redHsl = hexToHsl('#FF0000');
const passed = redHsl.h === 0 && redHsl.s === 100 && redHsl.l === 50;
testResults.push({
name: 'HEX 转 HSL',
passed,
message: passed
? '#FF0000 正确转换为 HSL(0, 100%, 50%)'
: `转换结果: HSL(${redHsl.h}, ${redHsl.s}%, ${redHsl.l}%)`
});
} catch (error) {
testResults.push({ name: 'HEX 转 HSL', passed: false, message: '测试执行出错' });
}

// 测试 2: HSL 转 HEX
try {
const redHex = hslToHex({ h: 0, s: 100, l: 50 });
const passed = redHex === '#FF0000';
testResults.push({
name: 'HSL 转 HEX',
passed,
message: passed
? 'HSL(0, 100%, 50%) 正确转换为 #FF0000'
: `转换结果: ${redHex}`
});
} catch (error) {
testResults.push({ name: 'HSL 转 HEX', passed: false, message: '测试执行出错' });
}

// 测试 3: 双向转换
try {
const originalHex = '#5135FF';
const hsl = hexToHsl(originalHex);
const convertedHex = hslToHex(hsl);
const passed = convertedHex === originalHex;
testResults.push({
name: 'HEX ↔ HSL 双向转换',
passed,
message: passed
? `${originalHex} 双向转换成功`
: `转换结果: ${convertedHex}`
});
} catch (error) {
testResults.push({ name: 'HEX ↔ HSL 双向转换', passed: false, message: '测试执行出错' });
}

// 测试 4: 色彩和谐生成
try {
const harmonies = generateColorHarmonies({ h: 240, s: 100, l: 50 });
const passed = harmonies.length === 6;
const names = harmonies.map(h => h.name).join(', ');
testResults.push({
name: '色彩和谐生成',
passed,
message: passed
? `成功生成 6 种和谐配色: ${names}`
: `生成了 ${harmonies.length} 种配色`
});
} catch (error) {
testResults.push({ name: '色彩和谐生成', passed: false, message: '测试执行出错' });
}

// 测试 5: 互补色计算
try {
const harmonies = generateColorHarmonies({ h: 0, s: 100, l: 50 });
const complementary = harmonies.find(h => h.name === '互补色');
const passed = complementary?.colors.includes('#00FFFF') ?? false;
testResults.push({
name: '互补色计算',
passed,
message: passed
? '红色的互补色正确计算为青色 (#00FFFF)'
: `互补色结果: ${complementary?.colors.join(', ')}`
});
} catch (error) {
testResults.push({ name: '互补色计算', passed: false, message: '测试执行出错' });
}

// 测试 6: 三分色计算
try {
const harmonies = generateColorHarmonies({ h: 0, s: 100, l: 50 });
const triadic = harmonies.find(h => h.name === '三分色');
const hasRed = triadic?.colors.includes('#FF0000');
const hasGreen = triadic?.colors.includes('#00FF00');
const hasBlue = triadic?.colors.includes('#0000FF');
const passed = hasRed && hasGreen && hasBlue;
testResults.push({
name: '三分色计算',
passed,
message: passed
? '正确生成红、绿、蓝三分色'
: `三分色结果: ${triadic?.colors.join(', ')}`
});
} catch (error) {
testResults.push({ name: '三分色计算', passed: false, message: '测试执行出错' });
}

// 测试 7: 推荐配色
try {
const recommendation = generateRecommendedPair('#FF0000');
const passed = recommendation.secondary === '#00FFFF';
testResults.push({
name: '推荐配色算法',
passed,
message: passed
? '红色正确推荐互补色青色'
: `推荐结果: ${recommendation.secondary}`
});
} catch (error) {
testResults.push({ name: '推荐配色算法', passed: false, message: '测试执行出错' });
}

// 测试 8: 色轮位置计算
try {
const pos = getColorWheelPosition(0, 100, 100);
const passed = pos.x === 100 && pos.y < 1;
testResults.push({
name: '色轮位置计算',
passed,
message: passed
? '色相0°正确位于色轮顶部'
: `位置: (${pos.x}, ${pos.y})`
});
} catch (error) {
testResults.push({ name: '色轮位置计算', passed: false, message: '测试执行出错' });
}

// 测试 9: 位置转HSL
try {
const result = getHslFromPosition(100, 0, 100);
const passed = result.h === 0 && result.s === 100;
testResults.push({
name: '位置转HSL',
passed,
message: passed
? '色轮顶部正确转换为 HSL(0°, 100%)'
: `结果: HSL(${result.h}°, ${result.s}%)`
});
} catch (error) {
testResults.push({ name: '位置转HSL', passed: false, message: '测试执行出错' });
}

// 测试 10: 渐变色彩生成
try {
const gradientColors = generateGradientColors('#FF0000', '#0000FF');
const passed = gradientColors.length === 4 &&
gradientColors[0] === '#FF0000' &&
gradientColors[3] === '#0000FF';
testResults.push({
name: '渐变色彩生成',
passed,
message: passed
? '正确生成4色渐变数组 (红 -> 蓝)'
: `生成了 ${gradientColors.length} 个颜色: ${gradientColors.join(', ')}`
});
} catch (error) {
testResults.push({ name: '渐变色彩生成', passed: false, message: '测试执行出错' });
}

setResults(testResults);
setIsRunning(false);
};

useEffect(() => {
runTests();
}, []);

const passedCount = results.filter(r => r.passed).length;
const totalCount = results.length;

return (
<div className="min-h-screen bg-background py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto space-y-8">

{/* Header */}
<div className="text-center space-y-4">
<h1 className="text-3xl sm:text-4xl font-bold text-foreground">
色彩模块测试
</h1>
<p className="text-muted-foreground">
验证色彩工具函数和色彩和谐算法的正确性
</p>
</div>

{/* Summary Card */}
<Card className="p-6">
<div className="flex items-center justify-between">
<div>
<h2 className="text-lg font-semibold">测试结果摘要</h2>
<p className="text-sm text-muted-foreground mt-1">
通过: {passedCount} / {totalCount}
</p>
</div>
<div className="flex items-center gap-4">
<div className="text-right">
<div className="text-3xl font-bold text-primary">
{totalCount > 0 ? Math.round((passedCount / totalCount) * 100) : 0}%
</div>
<div className="text-xs text-muted-foreground">通过率</div>
</div>
<Button
onClick={runTests}
disabled={isRunning}
className="ml-4"
>
{isRunning ? '测试中...' : '重新测试'}
</Button>
</div>
</div>

{/* Progress Bar */}
<div className="mt-4 h-2 bg-muted rounded-full overflow-hidden">
<div
className="h-full bg-primary transition-all duration-500"
style={{ width: `${totalCount > 0 ? (passedCount / totalCount) * 100 : 0}%` }}
/>
</div>
</Card>

{/* Test Results */}
<div className="space-y-3">
<h3 className="text-lg font-semibold px-1">详细结果</h3>
{results.map((result, index) => (
<Card
key={index}
className={`p-4 transition-all ${
result.passed ? 'border-green-500/30' : 'border-red-500/30'
}`}
>
<div className="flex items-start gap-3">
<div className="mt-0.5">
{result.passed ? (
<CheckCircle className="w-5 h-5 text-green-500" />
) : (
<XCircle className="w-5 h-5 text-red-500" />
)}
</div>
<div className="flex-1">
<div className="flex items-center gap-2">
<span className="font-medium">{result.name}</span>
<span className={`text-xs px-2 py-0.5 rounded-full ${
result.passed
? 'bg-green-500/10 text-green-600'
: 'bg-red-500/10 text-red-600'
}`}>
{result.passed ? '通过' : '失败'}
</span>
</div>
<p className="text-sm text-muted-foreground mt-1">
{result.message}
</p>
</div>
</div>
</Card>
))}

{results.length === 0 && (
<Card className="p-8 text-center">
<AlertCircle className="w-8 h-8 text-muted-foreground mx-auto mb-2" />
<p className="text-muted-foreground">点击"重新测试"开始测试</p>
</Card>
)}
</div>

{/* Color Harmony Preview */}
{results.length > 0 && (
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4">色彩和谐预览</h3>
<div className="space-y-4">
{(() => {
const harmonies = generateColorHarmonies({ h: 200, s: 80, l: 50 });
return harmonies.map((harmony) => (
<div key={harmony.name} className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">{harmony.name}</span>
<span className="text-xs text-muted-foreground">
{harmony.colors.length} 色
</span>
</div>
<div className="flex gap-2">
{harmony.colors.map((color, idx) => (
<div
key={idx}
className="flex-1 h-12 rounded-lg shadow-sm border"
style={{ backgroundColor: color }}
title={color}
/>
))}
</div>
</div>
));
})()}
</div>
</Card>
)}

{/* Footer */}
<footer className="text-center text-sm text-muted-foreground pt-4">
<p>测试基于色彩和谐理论和 HSL 色彩空间</p>
</footer>
</div>
</div>
);
}
Loading