wx44wx/AI-VideoAssistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Dialog component to accept contentClassName prop for customizable styling. Update ToolLibraryPage to utilize new prop for improved modal layout. Refactor text in ToolLibrary for clarity.

Browse Source
This commit is contained in:
Xin Wang
2026-02-27 15:12:01 +08:00
parent 487634c494
commit 0f1165af64
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/UI.tsx
View File

@@ -209,15 +209,16 @@ interface DialogProps {
title: string; title: string;
children: React.ReactNode; children: React.ReactNode;
footer?: React.ReactNode; footer?: React.ReactNode;
contentClassName?: string;
} }
export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer }) => { export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer, contentClassName }) => {
if (!isOpen) return null; if (!isOpen) return null;
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity animate-in fade-in" onClick={onClose} /> <div className="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity animate-in fade-in" onClick={onClose} />
<div className="relative z-50 w-full max-w-lg rounded-xl border border-white/10 bg-card p-6 shadow-2xl animate-in zoom-in-95 duration-200"> <div className={`relative z-50 w-full max-w-lg rounded-xl border border-white/10 bg-card p-6 shadow-2xl animate-in zoom-in-95 duration-200 ${contentClassName || ''}`}>
<div className="flex flex-col space-y-1.5 text-center sm:text-left mb-4"> <div className="flex flex-col space-y-1.5 text-center sm:text-left mb-4">
<h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2> <h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
</div> </div>

3
web/pages/ToolLibrary.tsx
View File

@@ -486,6 +486,7 @@ export const ToolLibraryPage: React.FC = () => {
isOpen={isToolModalOpen} isOpen={isToolModalOpen}
onClose={() => setIsToolModalOpen(false)} onClose={() => setIsToolModalOpen(false)}
title={editingTool ? '编辑自定义工具' : '添加自定义工具'} title={editingTool ? '编辑自定义工具' : '添加自定义工具'}
contentClassName="max-w-4xl"
footer={ footer={
<> <>
<Button variant="ghost" onClick={() => setIsToolModalOpen(false)}>取消</Button> <Button variant="ghost" onClick={() => setIsToolModalOpen(false)}>取消</Button>
@@ -560,7 +561,7 @@ export const ToolLibraryPage: React.FC = () => {
</div> </div>
{toolParameters.length === 0 ? ( {toolParameters.length === 0 ? (
<div className="rounded-md border border-white/10 bg-black/20 p-3 text-xs text-muted-foreground"> <div className="rounded-md border border-white/10 bg-black/20 p-3 text-xs text-muted-foreground">
当前无参数。可以按 ElevenLabs 风格逐个添加参数，无需直接编辑 JSON Schema。 当前无参数。可以逐个添加参数，无需直接编辑 JSON Schema。
</div> </div>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-3">