admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-08-06 09:24:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(i18n): adjust agent header tab behavior for better text visibility in English mode and narrow widths

Browse Source
This commit is contained in:
HouYunFei
2026-08-05 16:09:32 +08:00
parent e48f5df9ca
commit f954f1ee23
5 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/agent/agent-panel-tabs.tsx
+2 -2
View File
@@ -10,12 +10,12 @@ export function AgentPanelTabs<T extends string>({ value, items, theme, leading,
<div className="@container border-b px-2" style={{ borderColor: theme.node.stroke }}>
<div className="flex h-12 items-center gap-1">
{leading ? <div className="flex shrink-0 items-center">{leading}</div> : null}
<nav className="flex min-w-0 flex-1 items-center justify-center gap-0.5 overflow-hidden text-sm @min-[560px]:gap-3" role="tablist" aria-label={t("agent.panel.content")}>
<nav className="@container flex min-w-0 flex-1 items-center justify-center gap-0.5 overflow-hidden text-sm @min-[560px]:gap-3" role="tablist" aria-label={t("agent.panel.content")}>
{items.map((item) => (
<Tooltip key={item.value} title={`${item.label}${item.count ? ` ${item.count}` : ""}`} placement="bottom">
<button type="button" role="tab" aria-label={`${item.label}${item.count ? ` ${item.count}` : ""}`} aria-selected={value === item.value} className={`inline-flex h-12 min-w-8 shrink-0 items-center justify-center gap-1.5 border-b-2 px-1.5 transition @min-[560px]:px-0.5 ${value === item.value ? "font-medium" : "font-normal"}`} style={{ borderColor: value === item.value ? theme.node.text : "transparent", color: value === item.value ? theme.node.text : theme.node.muted }} onClick={() => onChange(item.value)}>
{item.icon ? <span className="agent-panel-tab-icon">{item.icon}</span> : null}
<span className={item.icon ? "hidden @min-[560px]:inline" : undefined}>{item.label}</span>
<span className={item.icon ? "hidden @min-[400px]:inline" : undefined}>{item.label}</span>
{item.count ? <span className="text-[10px] font-normal leading-none tabular-nums opacity-60">{item.count > 99 ? "99+" : item.count}</span> : null}
</button>
</Tooltip>
web/src/components/layout/user-status-actions.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
import type { CSSProperties } from "react";
import { Tooltip } from "antd";
import { BookOpen, Keyboard, Puzzle, Settings2 } from "lucide-react";
import { useTranslation } from "react-i18next";
@@ -49,9 +50,11 @@ export function UserStatusActions({ showConfig = true, variant = "default", onOp
<Settings2 className="size-4" />
</button>
) : null}
<button type="button" className={`${naturalIconClass} text-[11px] font-semibold tracking-tight`} style={iconStyle} onClick={() => void changeAppLocale(nextLocale)} aria-label={languageLabel} title={languageLabel}>
{locale === "zh-CN" ? "中" : "EN"}
</button>
<Tooltip title={languageLabel} mouseEnterDelay={0.2}>
<button type="button" className={`${naturalIconClass} text-[11px] font-semibold tracking-tight`} style={iconStyle} onClick={() => void changeAppLocale(nextLocale)} aria-label={languageLabel}>
{locale === "zh-CN" ? "中" : "EN"}
</button>
</Tooltip>
<AnimatedThemeToggler theme={theme} onThemeChange={setTheme} className={naturalIconClass} style={iconStyle} aria-label={t(theme === "dark" ? "topNav.lightTheme" : "topNav.darkTheme")} title={t(theme === "dark" ? "topNav.lightTheme" : "topNav.darkTheme")} />
<VersionReleaseModal style={versionStyle} />
<GitHubLink className={cn("bg-transparent hover:bg-transparent dark:hover:bg-transparent", gitHubClassName)} style={gitHubStyle} />