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

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
+1
View File
@@ -5,6 +5,7 @@
+ [新增] 文档站支持英文默认与简体中文切换,正文、导航、搜索及 LLM 文档接口按语言独立展示。
+ [新增] 前端搭建中英文国际化框架,支持从右上角一键持久化切换全局导航、首页、配置中心、Ant Design 和日期组件语言。
+ [修复] 统一 Ant Design 下拉菜单与选择器在浅色、深色主题下的弹层及交互状态颜色。
+ [修复] Agent 顶栏在英文模式或可用宽度不足时自适应隐藏标签文字,避免内容被裁切。
+ [新增] Agent 支持查看、创建、编辑、删除、启停和显式调用本地 Codex Skill,并同步多标签页变更。
+ [新增] Agent 支持从当前对话或当前画布生成可编辑的 Skill 草稿,并在用户确认后保存。
+ [调整] Agent 面板连接状态、内容标签和新对话统一排版,窄面板仅隐藏文字并保留图标与数量。
@@ -11,6 +11,7 @@ The current release needs manual verification in these areas:
- Global Dropdown, Menu, Select, Cascader, and TreeSelect popup backgrounds, hover states, and selected states in both light and dark themes.
- Canvas node resize stability, prompt scrolling, generated-prompt restoration, image editing, drag-and-drop references, and generation configuration.
- Canvas Agent startup, MCP status, model and permission controls, approvals, version reporting, diagnostics, streaming responses, history consistency, multi-tab isolation, and local Skill management.
- Agent header tabs in English and Chinese at different panel widths; labels should collapse to icons and counts before either edge is clipped.
- Agent message layout, Markdown, code blocks, attachments, token statistics, progress timelines, command groups, and scroll-follow behavior.
- Prompt Center layout, source synchronization, search, asset insertion, and prompt detail dialogs.
- Settings import/export, Volcengine Ark protocol handling, and WebDAV-related configuration.
@@ -16,7 +16,7 @@ description: 当前版本已实现但仍需人工验证的变更项
- Agent 首次发送响应:在空白新对话中输入内容并按回车后,输入框应立即清空、用户消息应立即出现在对话中,再显示「正在思考」;线程创建或发送失败时,原输入和附件应恢复;任务运行期间输入的新草稿不应在请求成功后被清空。
- Agent 动态工具信息:执行内置生图、查看图片、命令、文件修改或其他动态工具时,卡片标题应显示具体工具名称;执行失败时正文应显示真实错误原因,刷新并恢复历史对话后仍应保持一致,不再统一显示「工具操作已完成」。
- Agent 画布生图:重启 Canvas Agent 后,其自动生成的工作区 `AGENTS.md` 应同步为最新版指令(用户自行编写的其他 `AGENTS.md` 不应被覆盖);输入“生成一张图片”时应调用 `canvas_generate_image`,通过当前画布节点创建并运行生成流程;只有明确输入“使用 Codex 内置生图/ImageGen 技能生成”时才允许调用内置能力,Codex App Server 返回的 `imageGeneration` 结果应显示在对话中并作为保持原比例的图片节点添加到当前画布;Agent 不应在没有生成结果时提前声称“已生成”。
- Agent 顶部栏:在对话、历史和日志之间新增「技能」标签并显示已加载数量;连接状态应位于左侧 Agent 标题旁,并与右侧新对话使用相同规格的文字按钮,只有内容标签显示选中线;标签图标始终显示,窄面板仅隐藏文字并保留小号数量,宽面板显示图标和文字,拖动宽度时不应换行、横向滚动或错位。
- Agent 顶部栏:在对话、历史和日志之间新增「技能」标签并显示已加载数量;连接状态应位于左侧 Agent 标题旁,并与右侧新对话使用相同规格的文字按钮,只有内容标签显示选中线;标签图标始终显示,中英文模式下都应按标签区域的实际可用宽度隐藏文字并保留小号数量,空间足够时显示图标和文字,拖动宽度时不应裁切、换行、横向滚动或错位。
- Agent 输入框窄屏布局:底部上传、Skill、确认模式、权限模式、模型和思考程度控件在窄面板下应只显示图标,宽面板下恢复文字;所有纯图标操作悬停时应使用统一样式显示名称或当前状态,任意宽度都不出现横向溢出。
- Agent 本地 Skill 管理:连接 Canvas Agent 后进入「技能」,应能读取当前 Codex 工作空间发现的项目、个人、系统和管理员 Skill,并支持搜索、按范围筛选、刷新及启停;未能加载的 Skill 应通过可点击、可滚动的详情查看原因;画布在站点工作空间 `.agents/skills` 下创建的 Skill 应可新建、编辑和删除,其他来源只读且不得被画布改写;编辑期间文件被其他窗口修改时应拒绝覆盖,清空显示名称、短说明和默认提示词后旧值应被删除,同时保留图标、品牌色等未由当前界面管理的元数据;多个标签页同时连接时,任一页面的 Skill 变更应自动同步,断开或切换 Agent 时旧请求不得重新写回列表或弹出编辑器。
- Agent Skill 草稿生成:创建 Skill 时应提供「空白创建」「从当前对话生成草稿」「从当前画布生成草稿」三种入口;空对话不得发起生成,取消时不得写入文件,确认后才写入站点工作空间 `.agents/skills`Agent 运行中应禁用生成,多标签页下对话和画布来源必须分别严格绑定发起请求的 `threadId` 和 `clientId`,生成期间外部 MCP 仍应操作最近聚焦页面;草稿运行时创建、启停、删除和更新 Skill 应被统一拒绝,点击停止应真实中断临时草稿 turn;草稿不得泄露本地路径、密钥、媒体数据、真实节点 ID 或任务进度等临时状态,普通中文斜杠文本与 `/imagine` 等命令必须保持完整,生成草稿使用的临时 turn 不得出现在 Agent 对话、历史或日志中。
@@ -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>
@@ -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} />