fix(UI): Logs Display

[cyfung1031]

Before

After

[Copilot]

Pull request overview

该 PR 主要优化选项页「日志（Logger）」的展示信息与排版：将时间范围与日志统计信息拆分并重新格式化，同时补充/调整相关多语言文案键值以匹配新的 UI 结构。

Changes:

• 调整 Logger 页头部摘要的展示结构与样式（时间范围 + 统计信息分段显示）
• 新增通用的句子分隔符 i18n key，并为多语言补充 to 等新文案
• 更新部分语言下 now 的翻译以匹配新的展示语义

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/pages/options/routes/Logger.tsx	重构日志摘要行的 UI（时间范围样式化、统计信息用分隔符拼接、List 上边距调整）
src/locales/en-US/translation.json	新增 sentence-separator、新增 to
src/locales/de-DE/translation.json	新增 sentence-separator、新增 to
src/locales/ru-RU/translation.json	新增 sentence-separator、新增 to
src/locales/vi-VN/translation.json	新增 sentence-separator、新增 to
src/locales/zh-CN/translation.json	新增 sentence-separator、新增 to、调整 now
src/locales/zh-TW/translation.json	新增 sentence-separator、新增 to、调整 now
src/locales/ja-JP/translation.json	新增 sentence-separator、新增 to、调整 now
src/locales/ach-UG/translation.json	新增 to

[CodFrm]

Code review

Found 2 issues:

1. New <Typography.Text> blocks in the time-range header use inline style={{}} props (background/color/padding/borderRadius/marginTop) instead of UnoCSS classes (CLAUDE.md says "Use TailwindCSS (UnoCSS) for styling, avoid inline style={{}} — use tw- prefixed utility classes"). Same pattern was previously flagged in PR #1304. Suggest className="tw-bg-[var(--color-fill-2)] tw-text-[var(--color-text-1)] tw-px-2 tw-py-1 tw-rounded" etc.

scriptcat/src/pages/options/routes/Logger.tsx

Lines 336 to 367 in d94851f

	<Typography.Text
	style={{
	background: "var(--color-fill-2)",
	color: "var(--color-text-1)",
	padding: "4px 8px",
	borderRadius: "4px",
	}}
	>
	{formatUnixTime(startTime)}
	{t("to")}
	{isNow ? `${formatUnixTime(endTime)} (${t("now")})` : formatUnixTime(endTime)}
	</Typography.Text>
	<Typography.Text
	style={{
	color: "var(--color-text-4)",
	}}
	>
	{" -- "}
	</Typography.Text>
	<Typography.Text
	style={{
	color: "var(--color-text-1)",
	}}
	>
	{[
	t("total_logs", { length: logs.length }),
	init === 4 ? t("filtered_logs", { length: queryLogs.length }) : t("enter_filter_conditions"),
	].join(t("sentence-separator"))}
	</Typography.Text>
	<List
	style={{
	marginTop: "4px",

2. The " -- " divider between the time-range block and the stats block is a hardcoded literal, while the same PR introduces locale-aware "sentence-separator" and "to" keys for surrounding text. This is inconsistent with the PR's own i18n approach, will not adapt to locale-specific dash conventions (the "to" key already varies between " — ", " ～ ", " 至 "), and triggers the project's react/jsx-no-literals rule. Either add a localizable separator key or render the divider via CSS (margin/border) on the adjacent elements.

scriptcat/src/pages/options/routes/Logger.tsx

Lines 348 to 355 in d94851f

	<Typography.Text
	style={{
	color: "var(--color-text-4)",
	}}
	>
	{" -- "}
	</Typography.Text>
	<Typography.Text

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}