feat: move all common messages to i18n (ru\en)
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import { downloadBlob, encode } from '$lib/core/io';
|
||||
import type { PixelImage } from '$lib/core/types';
|
||||
import type { OutputFormat } from '$lib/registry';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
image: PixelImage | null;
|
||||
@@ -38,8 +39,8 @@
|
||||
fullWidth
|
||||
disabled={!image || !format}
|
||||
{busy}
|
||||
busyText="Готовим файл…"
|
||||
busyText={t('download.busy')}
|
||||
onclick={download}
|
||||
>
|
||||
Скачать .{format?.ext ?? 'png'}
|
||||
{t('download.file', { ext: format?.ext ?? 'png' })}
|
||||
</Button>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import { isSupportedImage, unsupportedImageMessage } from '$lib/core/io';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
onFile: (file: File) => void;
|
||||
@@ -12,7 +13,7 @@
|
||||
let {
|
||||
onFile,
|
||||
onError,
|
||||
label = 'Отпустите файл, чтобы заменить изображение',
|
||||
label = t('dropZone.overlayDefault'),
|
||||
children
|
||||
}: Props = $props();
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { ACCEPTED_IMAGE_TYPES, isSupportedImage, unsupportedImageMessage } from '$lib/core/io';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
onFile: (file: File) => void;
|
||||
@@ -7,8 +8,7 @@
|
||||
label?: string;
|
||||
}
|
||||
|
||||
let { onFile, onError, label = 'Перетащите изображение сюда или нажмите, чтобы выбрать файл' }: Props =
|
||||
$props();
|
||||
let { onFile, onError, label = t('dropZone.pickDefault') }: Props = $props();
|
||||
|
||||
let input = $state<HTMLInputElement | undefined>();
|
||||
let depth = $state(0);
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<script lang="ts">
|
||||
import type { ImageInfo } from '$lib/core/analyze';
|
||||
import { LOCALE_TAGS } from '$lib/i18n/dict';
|
||||
import { getLocale } from '$lib/i18n/locale.svelte';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
info: ImageInfo | null;
|
||||
@@ -11,16 +14,16 @@
|
||||
{#if info}
|
||||
<dl>
|
||||
<div class="panel">
|
||||
<dt>Размеры</dt>
|
||||
<dt>{t('infoPanel.dimensions')}</dt>
|
||||
<dd>{info.width} × {info.height} px</dd>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<dt>Альфа-канал</dt>
|
||||
<dd>{info.hasAlpha ? 'есть — есть полупрозрачные пиксели' : 'нет'}</dd>
|
||||
<dt>{t('infoPanel.alpha')}</dt>
|
||||
<dd>{info.hasAlpha ? t('infoPanel.alphaYes') : t('infoPanel.alphaNo')}</dd>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<dt>Уникальных цветов (RGBA)</dt>
|
||||
<dd>{info.colorCount.toLocaleString('ru-RU')}</dd>
|
||||
<dt>{t('infoPanel.colorCount')}</dt>
|
||||
<dd>{info.colorCount.toLocaleString(LOCALE_TAGS[getLocale()])}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{/if}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
import SliderField from './ui/SliderField.svelte';
|
||||
import TextField from './ui/TextField.svelte';
|
||||
import type { ParamDef } from '$lib/registry';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
params: ParamDef[];
|
||||
@@ -27,7 +28,7 @@
|
||||
|
||||
<div class="params-grid">
|
||||
{#if hasMask}
|
||||
<CheckboxField id="show-mask" label="Показать маску" bind:checked={showMask} />
|
||||
<CheckboxField id="show-mask" label={t('ui.showMask')} bind:checked={showMask} />
|
||||
{/if}
|
||||
{#each params as param (param.id)}
|
||||
<div class="field">
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
import ChainToolBlock from './chain/ChainToolBlock.svelte';
|
||||
import { createAutoRunner } from '$lib/tools/auto-run';
|
||||
import { executeStep } from '$lib/tools/executor';
|
||||
import { t } from '$lib/i18n/t';
|
||||
import ParamsCard from './tool/ParamsCard.svelte';
|
||||
import ResultCard from './tool/ResultCard.svelte';
|
||||
import SourceCard from './tool/SourceCard.svelte';
|
||||
@@ -175,8 +176,10 @@
|
||||
try {
|
||||
current = await executeStep(stepTool, current, sanitizeParams(stepTool, step.values));
|
||||
} catch (e) {
|
||||
const message = e instanceof Error ? e.message : String(e);
|
||||
throw new Error(`Шаг ${i + 1} (${stepTool.title}): ${message}`);
|
||||
const rawMsg = e instanceof Error ? e.message : String(e);
|
||||
throw new Error(
|
||||
t('toolPage.stepError', { n: i + 1, title: stepTool.title, msg: t(rawMsg) })
|
||||
);
|
||||
}
|
||||
if (!runner.isCurrent(token)) return;
|
||||
collected.push(current);
|
||||
@@ -213,7 +216,8 @@
|
||||
|
||||
function showError(e: unknown) {
|
||||
status = source ? 'loaded' : 'idle';
|
||||
errorText = e instanceof Error ? e.message : String(e);
|
||||
const raw = e instanceof Error ? e.message : String(e);
|
||||
errorText = t(raw);
|
||||
}
|
||||
|
||||
function reset() {
|
||||
@@ -261,7 +265,7 @@
|
||||
<div class="panel tool-block">
|
||||
<div class="tool-stage" class:single={isSourceless}>
|
||||
{#if !isSourceless}
|
||||
<span class="edge-legend source-legend" aria-hidden="true">Исходник</span>
|
||||
<span class="edge-legend source-legend" aria-hidden="true">{t('toolPage.legendSource')}</span>
|
||||
<div class="cell">
|
||||
{#if isTextSource && !source}
|
||||
<TextInputCard onSubmit={handleTextSubmit} />
|
||||
@@ -278,7 +282,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
<span class="edge-legend result-legend" aria-hidden="true">
|
||||
{isInfo ? 'Сводка' : 'Результат'}
|
||||
{isInfo ? t('toolPage.legendSummary') : t('toolPage.legendResult')}
|
||||
</span>
|
||||
<div class="cell">
|
||||
<ResultCard
|
||||
@@ -300,7 +304,7 @@
|
||||
|
||||
{#if (source || isSourceless) && !isInfo && (tool.params.length > 0 || hasMask)}
|
||||
<div class="params-sep">
|
||||
<span class="edge-legend" aria-hidden="true">Параметры</span>
|
||||
<span class="edge-legend" aria-hidden="true">{t('toolPage.legendParams')}</span>
|
||||
</div>
|
||||
<ParamsCard
|
||||
params={tool.params}
|
||||
@@ -318,11 +322,11 @@
|
||||
{#if step.toolId === ''}
|
||||
<div class="panel empty-slot">
|
||||
<header>
|
||||
<h3 class="heading-section">Шаг {index + 1}</h3>
|
||||
<h3 class="heading-section">{t('toolPage.stepHeading', { n: index + 1 })}</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="remove-step"
|
||||
aria-label="Убрать шаг"
|
||||
aria-label={t('toolPage.removeStepAria')}
|
||||
onclick={() => removeChainStep(index)}
|
||||
>
|
||||
✕
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { outputOf, sanitizeParams, type ToolEntry } from '$lib/registry';
|
||||
import type { PixelImage } from '$lib/core/types';
|
||||
import { t } from '$lib/i18n/t';
|
||||
import DownloadButton from '../DownloadButton.svelte';
|
||||
import Button from '../ui/Button.svelte';
|
||||
import EmptyState from '../ui/EmptyState.svelte';
|
||||
@@ -47,12 +48,12 @@
|
||||
{#if StepIcon}
|
||||
<span class="step-icon" aria-hidden="true"><StepIcon size={14} strokeWidth={2} /></span>
|
||||
{/if}
|
||||
Шаг {index + 1}: {tool.title}
|
||||
{t('chain.stepLabel', { n: index + 1, title: tool.title })}
|
||||
<button
|
||||
type="button"
|
||||
class="remove"
|
||||
aria-label="Убрать шаг"
|
||||
title="Убрать шаг"
|
||||
aria-label={t('chain.removeStepAria')}
|
||||
title={t('chain.removeStepAria')}
|
||||
onclick={onRemove}
|
||||
>
|
||||
✕
|
||||
@@ -60,22 +61,22 @@
|
||||
</span>
|
||||
|
||||
<div class="cell">
|
||||
<span class="edge-legend cell-legend" aria-hidden="true">Вход</span>
|
||||
<span class="edge-legend cell-legend" aria-hidden="true">{t('chain.inputLegend')}</span>
|
||||
<div class="cell-media">
|
||||
<Preview image={input} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span class="edge-legend cell-legend" aria-hidden="true">Результат</span>
|
||||
<span class="edge-legend cell-legend" aria-hidden="true">{t('chain.resultLegend')}</span>
|
||||
{#if busy && !result}
|
||||
<div class="cell-media">
|
||||
<EmptyState title="Обработка…" hint="Выполняется шаг цепочки" />
|
||||
<EmptyState title={t('chain.busyTitle')} hint={t('chain.busyHint')} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="cell-media">
|
||||
<Preview image={result} />
|
||||
{#if busy}
|
||||
<span class="recalc" aria-live="polite">Пересчёт…</span>
|
||||
<span class="recalc" aria-live="polite">{t('resultCard.recalc')}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="actions-row">
|
||||
@@ -87,7 +88,7 @@
|
||||
{onError}
|
||||
/>
|
||||
<Button variant="secondary" fullWidth onclick={isLast ? onAddStep : onRemoveChain}>
|
||||
{isLast ? '⛓ Следующий инструмент' : '✂ Оборвать цепочку'}
|
||||
{isLast ? t('resultCard.nextTool') : t('resultCard.breakChain')}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -96,7 +97,7 @@
|
||||
|
||||
{#if tool.params.length > 0}
|
||||
<div class="params-sep">
|
||||
<span class="edge-legend" aria-hidden="true">Параметры</span>
|
||||
<span class="edge-legend" aria-hidden="true">{t('chain.paramsLegend')}</span>
|
||||
</div>
|
||||
<ParamsCard params={tool.params} bind:values />
|
||||
{/if}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { isChainable, TOOLS } from '$lib/registry';
|
||||
import { t } from '$lib/i18n/t';
|
||||
import ToolCard from './ToolCard.svelte';
|
||||
|
||||
interface Props {
|
||||
@@ -106,14 +107,14 @@
|
||||
activeIndex = 0;
|
||||
}}
|
||||
onkeydown={onKeydown}
|
||||
placeholder="Найдите инструмент…"
|
||||
aria-label="Поиск инструмента"
|
||||
placeholder={t('search.placeholder')}
|
||||
aria-label={t('search.aria')}
|
||||
role="combobox"
|
||||
aria-expanded={listOpen}
|
||||
aria-controls="tool-search-list"
|
||||
/>
|
||||
{#if listOpen && query.trim().length > 0 && matches.length === 0}
|
||||
<p class="none text-muted">Ничего не найдено — попробуйте другое слово.</p>
|
||||
<p class="none text-muted">{t('search.nothingFound')}</p>
|
||||
{:else if listOpen && matches.length > 0}
|
||||
<div id="tool-search-list" class="cards" role="listbox">
|
||||
{#each matches as match, index (match.id)}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import ParamForm from '../ParamForm.svelte';
|
||||
import type { ParamDef } from '$lib/registry';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
params: ParamDef[];
|
||||
@@ -32,9 +33,7 @@
|
||||
bind:showMask
|
||||
/>
|
||||
{:else}
|
||||
<p class="hint text-caption text-muted">
|
||||
У этого инструмента нет параметров — результат уже готов.
|
||||
</p>
|
||||
<p class="hint text-caption text-muted">{t('paramsCard.noParams')}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
import type { ImageInfo } from '$lib/core/analyze';
|
||||
import type { PixelImage } from '$lib/core/types';
|
||||
import { outputOf, type ToolEntry } from '$lib/registry';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
type Status = 'idle' | 'loaded' | 'processing' | 'error';
|
||||
|
||||
@@ -45,16 +46,13 @@
|
||||
<div class="container">
|
||||
{#if !sourceLoaded}
|
||||
<div class="media">
|
||||
<EmptyState
|
||||
title="Результат появится здесь"
|
||||
hint="Сначала загрузите исходное изображение слева"
|
||||
/>
|
||||
<EmptyState title={t('resultCard.emptyTitle')} hint={t('resultCard.emptyHint')} />
|
||||
</div>
|
||||
{:else if !isInfo && status === 'processing' && !result}
|
||||
<div class="media">
|
||||
<EmptyState
|
||||
title="Обработка…"
|
||||
hint="Изображение обрабатывается, это займёт немного времени"
|
||||
title={t('resultCard.processingTitle')}
|
||||
hint={t('resultCard.processingHint')}
|
||||
/>
|
||||
</div>
|
||||
{:else if isInfo}
|
||||
@@ -73,7 +71,7 @@
|
||||
<div class="media">
|
||||
<Preview image={displayImage} />
|
||||
{#if status === 'processing'}
|
||||
<span class="recalc" aria-live="polite">Пересчёт…</span>
|
||||
<span class="recalc" aria-live="polite">{t('resultCard.recalc')}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="actions-row">
|
||||
@@ -86,7 +84,7 @@
|
||||
/>
|
||||
{#if onChainToggle}
|
||||
<Button variant="secondary" fullWidth onclick={onChainToggle}>
|
||||
{hasChain ? '✂ Оборвать цепочку' : '⛓ Следующий инструмент'}
|
||||
{hasChain ? t('resultCard.breakChain') : t('resultCard.nextTool')}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { PixelImage } from '$lib/core/types';
|
||||
import { t } from '$lib/i18n/t';
|
||||
import DropOverlay from '../DropOverlay.svelte';
|
||||
import DropZone from '../DropZone.svelte';
|
||||
import Preview from '../Preview.svelte';
|
||||
@@ -25,7 +26,7 @@
|
||||
<div class="media">
|
||||
<Preview image={source} pipetteActive={pipetteActive} onPickColor={onPickColor} />
|
||||
</div>
|
||||
<Button variant="secondary" onclick={onReset}>Заменить изображение</Button>
|
||||
<Button variant="secondary" onclick={onReset}>{t('sourceCard.replaceImage')}</Button>
|
||||
</DropOverlay>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Button from '../ui/Button.svelte';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
onSubmit: (text: string) => void;
|
||||
@@ -16,16 +17,16 @@
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h2 class="heading-section">Текст</h2>
|
||||
<h2 class="heading-section">{t('textInput.heading')}</h2>
|
||||
<textarea
|
||||
class="input"
|
||||
rows="8"
|
||||
bind:value={text}
|
||||
placeholder="Вставьте данные сюда"
|
||||
aria-label="Текстовые данные"
|
||||
placeholder={t('textInput.placeholder')}
|
||||
aria-label={t('textInput.aria')}
|
||||
></textarea>
|
||||
<Button variant="secondary" onclick={submit} disabled={text.trim().length === 0}>
|
||||
Декодировать
|
||||
{t('textInput.decode')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { downloadBlob } from '$lib/core/io';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
@@ -22,12 +23,12 @@
|
||||
</script>
|
||||
|
||||
<div class="panel text-result">
|
||||
<textarea class="output" rows="10" readonly value={text} aria-label="Текстовый результат"></textarea>
|
||||
<textarea class="output" rows="10" readonly value={text} aria-label={t('textResult.outputAria')}></textarea>
|
||||
<div class="actions">
|
||||
<button type="button" class="secondary" onclick={copy}>
|
||||
{copied ? 'Скопировано' : 'Копировать'}
|
||||
{copied ? t('textResult.copied') : t('textResult.copy')}
|
||||
</button>
|
||||
<button type="button" class="primary" onclick={download}>Скачать .txt</button>
|
||||
<button type="button" class="primary" onclick={download}>{t('textResult.downloadTxt')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Field from './Field.svelte';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
@@ -21,9 +22,9 @@
|
||||
<button
|
||||
type="button"
|
||||
class="pipette"
|
||||
aria-label="Пипетка"
|
||||
aria-label={t('ui.pipette')}
|
||||
aria-pressed={pipetteActive}
|
||||
title="Пипетка"
|
||||
title={t('ui.pipette')}
|
||||
onclick={onPipetteToggle}
|
||||
>
|
||||
◎
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Field from './Field.svelte';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
@@ -42,13 +43,13 @@
|
||||
|
||||
<Field {id} {label} {hint}>
|
||||
<div class="row">
|
||||
<button type="button" class="step" aria-label="Уменьшить" onclick={decrement}>−</button>
|
||||
<button type="button" class="step" aria-label={t('ui.decrease')} onclick={decrement}>−</button>
|
||||
<input id={id} type="range" min={min} max={max} step={step} bind:value />
|
||||
<button type="button" class="step" aria-label="Увеличить" onclick={increment}>+</button>
|
||||
<button type="button" class="step" aria-label={t('ui.increase')} onclick={increment}>+</button>
|
||||
<button
|
||||
type="button"
|
||||
class="step"
|
||||
aria-label="Сбросить"
|
||||
aria-label={t('ui.reset')}
|
||||
disabled={resetDisabled}
|
||||
onclick={reset}
|
||||
>
|
||||
|
||||
@@ -31,7 +31,7 @@ describe('executeStep: прямой путь (среда без Worker)', () =>
|
||||
|
||||
it('инструмент без run даёт понятную ошибку', async () => {
|
||||
await expect(executeStep({ id: 'stub' }, makeImage(1, 1, [[0, 0, 0, 255]]), {})).rejects.toThrow(
|
||||
'не обрабатывает изображения'
|
||||
'errors.noImageRun'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -11,7 +11,7 @@ export async function executeStep(
|
||||
params: Record<string, unknown>
|
||||
): Promise<PixelImage> {
|
||||
if (!tool.run) {
|
||||
throw new Error('Этот инструмент не обрабатывает изображения');
|
||||
throw new Error('errors.noImageRun');
|
||||
}
|
||||
if (typeof Worker === 'undefined') {
|
||||
return await runDirect(tool, img, params);
|
||||
@@ -35,7 +35,7 @@ async function runDirect(
|
||||
params: Record<string, unknown>
|
||||
): Promise<PixelImage> {
|
||||
if (!tool.run) {
|
||||
throw new Error('Этот инструмент не обрабатывает изображения');
|
||||
throw new Error('errors.noImageRun');
|
||||
}
|
||||
return await tool.run(img, params);
|
||||
}
|
||||
@@ -74,13 +74,13 @@ function ensureWorker(): Worker | null {
|
||||
data: new Uint8ClampedArray(payload.data)
|
||||
});
|
||||
} else {
|
||||
entry.reject(new Error(payload.error ?? 'Ошибка исполнения в воркере'));
|
||||
entry.reject(new Error(payload.error ?? 'errors.workerFailed'));
|
||||
}
|
||||
};
|
||||
candidate.onerror = () => {
|
||||
worker = null;
|
||||
for (const entry of pending.values()) {
|
||||
entry.reject(new Error('Воркер недоступен'));
|
||||
entry.reject(new Error('errors.workerUnavailable'));
|
||||
}
|
||||
pending.clear();
|
||||
};
|
||||
|
||||
@@ -17,7 +17,7 @@ async function handle(request: WorkerRequest): Promise<void> {
|
||||
try {
|
||||
const tool = getTool(request.toolId);
|
||||
if (!tool?.run) {
|
||||
throw new Error('Этот инструмент не обрабатывает изображения');
|
||||
throw new Error('errors.noImageRun');
|
||||
}
|
||||
const image: PixelImage = {
|
||||
width: request.image.width,
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { getTool } from '$lib/registry';
|
||||
import { t } from '$lib/i18n/t';
|
||||
import ToolPage from '$lib/components/ToolPage.svelte';
|
||||
import ToolSearch from '$lib/components/search/ToolSearch.svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
@@ -42,20 +43,20 @@
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
{selected ? `${selected.title} — easy-png-tools` : 'easy-png-tools — PNG-утилиты прямо в браузере'}
|
||||
{selected ? `${selected.title} — easy-png-tools` : t('home.defaultTitle')}
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if !selected}
|
||||
<section class="hero">
|
||||
<h1>Что делаем с изображением?</h1>
|
||||
<p class="lead text-muted">Найдите инструмент — все операции выполняются локально в браузере.</p>
|
||||
<h1>{t('home.heroTitle')}</h1>
|
||||
<p class="lead text-muted">{t('home.heroLead')}</p>
|
||||
<ToolSearch onSelect={(id) => openTool(id)} />
|
||||
{#if lastToolId !== null && getTool(lastToolId)}
|
||||
{@const restoreId = lastToolId}
|
||||
<div class="restore-row">
|
||||
<Button variant="secondary" fullWidth onclick={() => openTool(restoreId, true)}>
|
||||
↩ Вернуть последний: {getTool(restoreId)?.title}
|
||||
{t('home.restoreLast', { title: getTool(restoreId)?.title ?? '' })}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -63,7 +64,7 @@
|
||||
{:else}
|
||||
<section class="workbench">
|
||||
<button type="button" class="back text-caption text-muted" onclick={closeTool}>
|
||||
← Сменить инструмент
|
||||
{t('home.changeTool')}
|
||||
</button>
|
||||
{#key selectedId}
|
||||
<ToolPage tool={selected} restoreChain={restoreOnOpen} />
|
||||
|
||||
@@ -1,27 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { CATEGORIES } from '$lib/categories';
|
||||
import { t } from '$lib/i18n/t';
|
||||
import ToolCard from '$lib/components/search/ToolCard.svelte';
|
||||
import { TOOLS } from '$lib/registry';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Все инструменты — easy-png-tools</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Полный каталог PNG-утилит: конвертация, прозрачность, цвет, геометрия, анализ и генерация изображений."
|
||||
/>
|
||||
<title>{t('catalog.pageTitle')}</title>
|
||||
<meta name="description" content={t('catalog.metaDescription')} />
|
||||
</svelte:head>
|
||||
|
||||
<h1>Каталог инструментов</h1>
|
||||
<p class="lead text-muted">
|
||||
{TOOLS.length} утилит для работы с PNG. Все операции выполняются локально в браузере.
|
||||
</p>
|
||||
<h1>{t('catalog.heading')}</h1>
|
||||
<p class="lead text-muted">{t('catalog.lead', { count: TOOLS.length })}</p>
|
||||
|
||||
{#each CATEGORIES as category (category.id)}
|
||||
{@const categoryTools = TOOLS.filter((tool) => tool.category === category.id)}
|
||||
{#if categoryTools.length > 0}
|
||||
<section id={category.id} class="category" aria-labelledby="{category.id}-heading">
|
||||
<h2 id="{category.id}-heading" class="heading-section">{category.label}</h2>
|
||||
<h2 id="{category.id}-heading" class="heading-section">{t(`categories.${category.id}`)}</h2>
|
||||
<div class="grid">
|
||||
{#each categoryTools as tool (tool.id)}
|
||||
<div class="panel">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import ToolPage from '$lib/components/ToolPage.svelte';
|
||||
import { getTool } from '$lib/registry';
|
||||
import { t } from '$lib/i18n/t';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
@@ -8,7 +9,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{tool?.title ?? 'Инструмент'} — easy-png-tools</title>
|
||||
<title>{tool?.title ?? t('toolPage.fallbackTitle')} — easy-png-tools</title>
|
||||
{#if tool}
|
||||
<meta name="description" content={tool.description} />
|
||||
{/if}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { getTool, TOOLS } from '$lib/registry';
|
||||
import { t } from '$lib/i18n/t';
|
||||
import type { EntryGenerator, PageLoad } from './$types';
|
||||
|
||||
export const entries: EntryGenerator = () => TOOLS.map((tool) => ({ id: tool.id }));
|
||||
@@ -7,7 +8,7 @@ export const entries: EntryGenerator = () => TOOLS.map((tool) => ({ id: tool.id
|
||||
export const load: PageLoad = ({ params }) => {
|
||||
const tool = getTool(params.id);
|
||||
if (!tool) {
|
||||
error(404, 'Инструмент не найден');
|
||||
error(404, t('errors.notFound'));
|
||||
}
|
||||
return { id: tool.id };
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user