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,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useI18n } from "@/core/i18n/hooks";
import { cn } from "@/lib/utils";
import type { FileUIPart, UIMessage } from "ai";
import {
@ -333,6 +334,7 @@ export function MessageAttachment({
onRemove,
...props
}: MessageAttachmentProps) {
const { t } = useI18n();
const filename = data.filename || "";
const mediaType =
data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
@ -358,7 +360,7 @@ export function MessageAttachment({
/>
{onRemove && (
<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"
onClick={(e) => {
e.stopPropagation();
@ -368,7 +370,7 @@ export function MessageAttachment({
variant="ghost"
>
<XIcon />
<span className="sr-only">Remove</span>
<span className="sr-only">{t.common.removeAttachment}</span>
</Button>
)}
</>
@ -386,7 +388,7 @@ export function MessageAttachment({
</Tooltip>
{onRemove && (
<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"
onClick={(e) => {
e.stopPropagation();
@ -396,6 +398,7 @@ export function MessageAttachment({
variant="ghost"
>
<XIcon />
<span className="sr-only">{t.common.removeAttachment}</span>
<span className="sr-only">Remove</span>
</Button>
)}

View File

@ -290,6 +290,7 @@ export function PromptInputAttachment({
...props
}: PromptInputAttachmentProps) {
const attachments = usePromptInputAttachments();
const { t } = useI18n();
const filename = data.filename || "";
@ -348,7 +349,7 @@ export function PromptInputAttachment({
</svg>
{/* 删除按钮 - 右上角 */}
<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"
onClick={(e) => {
e.stopPropagation();
@ -389,8 +390,8 @@ export function PromptInputAttachment({
</div>
{/* 关闭按钮 - 右上角 */}
<button
aria-label="Remove attachment"
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"
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 opacity-0 transition-opacity hover:bg-white group-hover:opacity-100 dark:bg-gray-800/90 dark:hover:bg-gray-800"
onClick={(e) => {
e.stopPropagation();
attachments.remove(data.id);

View File

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

View File

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

View File

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