refine oauth model selection and provider inputs

This commit is contained in:
lpf
2026-03-11 19:48:10 +08:00
parent b3c0f58998
commit 5d74dba0b8
8 changed files with 381 additions and 215 deletions

View File

@@ -2,7 +2,7 @@ import React from 'react';
import { AnimatePresence, motion } from 'motion/react';
import { useTranslation } from 'react-i18next';
import { Button } from './Button';
import { TextField } from './FormControls';
import { TextField, TextareaField } from './FormControls';
type DialogOptions = {
title?: string;
@@ -13,6 +13,9 @@ type DialogOptions = {
initialValue?: string;
inputLabel?: string;
inputPlaceholder?: string;
monospace?: boolean;
multiline?: boolean;
wide?: boolean;
};
export const GlobalDialog: React.FC<{
@@ -36,28 +39,40 @@ export const GlobalDialog: React.FC<{
{open && (
<motion.div className="ui-overlay-strong fixed inset-0 z-[130] backdrop-blur-sm flex items-center justify-center p-4"
initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
<motion.div className="brand-card w-full max-w-md border border-zinc-700 shadow-2xl"
<motion.div className={`brand-card w-full border border-zinc-700 shadow-2xl ${options.wide ? 'max-w-2xl' : 'max-w-md'}`}
initial={{ scale: 0.95, y: 8 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.95, y: 8 }}>
<div className="px-5 py-4 border-b border-zinc-800 relative z-[1]">
<h3 className="text-sm font-semibold text-zinc-100">{options.title || (kind === 'confirm' ? t('dialogPleaseConfirm') : kind === 'prompt' ? t('dialogInputTitle') : t('dialogNotice'))}</h3>
</div>
<div className="px-5 py-4 space-y-3 relative z-[1]">
<div className="text-sm text-zinc-300 whitespace-pre-wrap">{options.message}</div>
<div className="text-sm text-zinc-300 whitespace-pre-wrap break-all">{options.message}</div>
{kind === 'prompt' && (
<div className="space-y-2">
{options.inputLabel && <label className="text-xs text-zinc-400">{options.inputLabel}</label>}
<TextField
autoFocus
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
onConfirm(value);
}
}}
placeholder={options.inputPlaceholder || t('dialogInputPlaceholder')}
className="w-full text-zinc-100"
/>
{options.multiline ? (
<TextareaField
autoFocus
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder={options.inputPlaceholder || t('dialogInputPlaceholder')}
monospace={options.monospace}
className="min-h-[96px] w-full text-zinc-100"
/>
) : (
<TextField
autoFocus
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
onConfirm(value);
}
}}
placeholder={options.inputPlaceholder || t('dialogInputPlaceholder')}
monospace={options.monospace}
className="w-full text-zinc-100"
/>
)}
</div>
)}
</div>