tcsenpai/pensieve
1
0
Fork 0
mirror of https://github.com/tcsenpai/pensieve.git synced 2025-06-06 03:05:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(logo): extract method for generate color matrix

Browse Source
This commit is contained in:
arkohut 2024-10-14 15:58:49 +08:00
parent 8c27354d86
commit 57388edc22
2 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
web/src/lib/components/Logo.svelte
View File

@ -4,18 +4,12 @@
return x - Math.floor(x);
}
export let size = 32; // 默认大小为 32
export let class_ = ''; // 添加一个 class prop，使用 class_ 避免与 JavaScript 关键字冲突
export let withBorder = true; // 新增参数，默认为 true
export let size = 32;
export let class_ = '';
export let withBorder = true;
function generateMemosLogo(size: number, withBorder: boolean): string {
const colors = ['#f0f8ff', '#d0e8ff', '#a1d2ff', '#64b5f6', '#1565c0', '#0d47a1']; // Adjusted colors
const cellSize = 1; // Set to 1 to make scaling easier
const rectSize = 0.85; // Slightly smaller than cellSize to create gaps
let svgContent = '';
let seed = 42;
// Define the 'M' shape
function prepareMatrixFromRandomColors(withBorder: boolean): string[][] {
const colors = ['#d0e8ff', '#a1d2ff', '#64b5f6', '#1565c0', '#0d47a1'];
const mShape = withBorder
? [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@ -47,39 +41,52 @@
];
const gridSize = withBorder ? 13 : 11;
let seed = 42;
const matrix: string[][] = [];
// Create the SVG header
svgContent += `<svg width="${size}" height="${size}" viewBox="0 0 ${gridSize} ${gridSize}" xmlns="http://www.w3.org/2000/svg" opacity="1">
`;
// Generate grid of cells with rounded corners
for (let row = 0; row < gridSize; row++) {
const rowColors: string[] = [];
for (let col = 0; col < gridSize; col++) {
let colorIndex;
// Define the pattern for the 'M' shape
if (mShape[row][col] === 1) {
colorIndex = Math.floor(seededRandom(seed++) * 2) + 4;
colorIndex = Math.floor(seededRandom(seed++) * 2) + 3;
} else {
colorIndex = Math.floor(seededRandom(seed++) * 3);
}
rowColors.push(colors[colorIndex]);
}
matrix.push(rowColors);
}
return matrix;
}
function generateSvg(matrix: string[][], size: number): string {
const gridSize = matrix.length;
const cellSize = 1;
const rectSize = 0.85;
let svgContent = `<svg width="${size}" height="${size}" viewBox="0 0 ${gridSize} ${gridSize}" xmlns="http://www.w3.org/2000/svg" opacity="1">
`;
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
svgContent += ` <rect x="${col * cellSize + 0.075}" y="${
row * cellSize + 0.075
}" width="${rectSize}" height="${rectSize}" rx="0.15" ry="0.15" fill="${
colors[colorIndex]
}" />
}" width="${rectSize}" height="${rectSize}" rx="0.15" ry="0.15" fill="${matrix[row][col]}" />
`;
}
}
// Close the SVG tag
svgContent += `</svg>`;
// Instead of writing to file, return the SVG content
return svgContent;
}
function generateMemosLogo(size: number, withBorder: boolean): string {
const matrix = prepareMatrixFromRandomColors(withBorder);
return generateSvg(matrix, size);
}
$: logoSvg = generateMemosLogo(size, withBorder);
</script>

2
web/src/routes/+page.svelte
View File

@ -254,7 +254,7 @@
class:flex-col={!isScrolled}
class:flex-row={isScrolled}
>
<Logo size={isScrolled ? 48 : 128} withBorder={!isScrolled} class_="transition-transform duration-300 ease-in-out mr-4" />
<Logo size={isScrolled ? 32 : 128} withBorder={!isScrolled} class_="transition-transform duration-300 ease-in-out mr-4" />
<Input
type="text"
class={inputClasses}