feat(i18n): 附件删除按钮国际化

- 调整 prompt-input 附件删除按钮样式,默认隐藏,hover 时显示
This commit is contained in:
肖应宇 2026-03-23 17:17:18 +08:00
parent da2023b42b
commit d2d3b73f53
5 changed files with 13 additions and 6 deletions

View File

@ -8,6 +8,7 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { useI18n } from "@/core/i18n/hooks";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { FileUIPart, UIMessage } from "ai"; import type { FileUIPart, UIMessage } from "ai";
import { import {
@ -333,6 +334,7 @@ export function MessageAttachment({
onRemove, onRemove,
...props ...props
}: MessageAttachmentProps) { }: MessageAttachmentProps) {
const { t } = useI18n();
const filename = data.filename || ""; const filename = data.filename || "";
const mediaType = const mediaType =
data.mediaType?.startsWith("image/") && data.url ? "image" : "file"; data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
@ -358,7 +360,7 @@ export function MessageAttachment({
/> />
{onRemove && ( {onRemove && (
<Button <Button
aria-label="Remove attachment" aria-label={t.common.removeAttachment}
className="bg-background/80 hover:bg-background absolute top-2 right-2 size-6 rounded-full p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 [&>svg]:size-3" className="bg-background/80 hover:bg-background absolute top-2 right-2 size-6 rounded-full p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 [&>svg]:size-3"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -368,7 +370,7 @@ export function MessageAttachment({
variant="ghost" variant="ghost"
> >
<XIcon /> <XIcon />
<span className="sr-only">Remove</span> <span className="sr-only">{t.common.removeAttachment}</span>
</Button> </Button>
)} )}
</> </>
@ -386,7 +388,7 @@ export function MessageAttachment({
</Tooltip> </Tooltip>
{onRemove && ( {onRemove && (
<Button <Button
aria-label="Remove attachment" aria-label={t.common.removeAttachment}
className="hover:bg-accent size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100 [&>svg]:size-3" className="hover:bg-accent size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100 [&>svg]:size-3"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -396,6 +398,7 @@ export function MessageAttachment({
variant="ghost" variant="ghost"
> >
<XIcon /> <XIcon />
<span className="sr-only">{t.common.removeAttachment}</span>
<span className="sr-only">Remove</span> <span className="sr-only">Remove</span>
</Button> </Button>
)} )}

View File

@ -290,6 +290,7 @@ export function PromptInputAttachment({
...props ...props
}: PromptInputAttachmentProps) { }: PromptInputAttachmentProps) {
const attachments = usePromptInputAttachments(); const attachments = usePromptInputAttachments();
const { t } = useI18n();
const filename = data.filename || ""; const filename = data.filename || "";
@ -348,7 +349,7 @@ export function PromptInputAttachment({
</svg> </svg>
{/* 删除按钮 - 右上角 */} {/* 删除按钮 - 右上角 */}
<button <button
aria-label="Remove attachment" aria-label={t.common.removeAttachment}
className="absolute top-1.5 right-1.5 z-10 flex size-4 cursor-pointer items-center justify-center rounded-sm transition-colors hover:bg-white/20" className="absolute top-1.5 right-1.5 z-10 flex size-4 cursor-pointer items-center justify-center rounded-sm transition-colors hover:bg-white/20"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -389,8 +390,8 @@ export function PromptInputAttachment({
</div> </div>
{/* 关闭按钮 - 右上角 */} {/* 关闭按钮 - 右上角 */}
<button <button
aria-label="Remove attachment" aria-label={t.common.removeAttachment}
className="absolute top-1 right-1 z-10 flex size-5 cursor-pointer items-center justify-center rounded bg-white/90 transition-colors hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800" className="absolute top-1 right-1 z-10 flex size-5 cursor-pointer items-center justify-center rounded bg-white/90 opacity-0 transition-opacity hover:bg-white group-hover:opacity-100 dark:bg-gray-800/90 dark:hover:bg-gray-800"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
attachments.remove(data.id); attachments.remove(data.id);

View File

@ -48,6 +48,7 @@ export const enUS: Translations = {
save: "Save", save: "Save",
install: "Install", install: "Install",
create: "Create", create: "Create",
removeAttachment: "Remove attachment",
}, },
// Welcome // Welcome

View File

@ -37,6 +37,7 @@ export interface Translations {
save: string; save: string;
install: string; install: string;
create: string; create: string;
removeAttachment: string;
}; };
// Welcome // Welcome

View File

@ -48,6 +48,7 @@ export const zhCN: Translations = {
save: "保存", save: "保存",
install: "安装", install: "安装",
create: "创建", create: "创建",
removeAttachment: "移除附件",
}, },
// Welcome // Welcome