Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 zxyszx
|
ce98978ebd |
@@ -0,0 +1,7 @@
|
||||
- 修复手机端删除自定义文件夹时菜单先消失、确认框无法显示的问题，文件夹菜单现在与移动侧栏保持在同一交互层中。
|
||||
- 删除文件夹前会稳定显示确认信息，提交后显示处理中状态，避免重复操作；文件夹内邮件仍会安全移回收件箱。
|
||||
- 修复手机侧栏中新建文件夹弹窗被侧栏遮挡或立即关闭的问题，侧栏退出后再打开创建界面。
|
||||
- 重做手机端“新建规则 / 编辑规则”布局：标题、表单与底部操作区改为纵向结构，内容区域可独立滚动。
|
||||
- 优化规则条件与动作的窄屏排列，字段和运算符并排、输入框独占一行，添加与删除按钮保持易点击且不会挤出屏幕。
|
||||
- 规则底部创建和取消按钮固定可见并适配手机安全区域，多条件、多动作时仍可顺畅滚动和提交。
|
||||
- 优化通用确认弹窗的手机宽度和按钮触控尺寸，减少误触并避免贴边显示。
|
||||
@@ -26,12 +26,12 @@ export function ConfirmDialog({
|
||||
}: ConfirmDialogProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogContent className="w-[calc(100vw-2rem)] max-w-lg rounded-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
</DialogHeader>
|
||||
{description && <div className="text-sm text-muted-foreground">{description}</div>}
|
||||
<DialogFooter>
|
||||
<DialogFooter className="gap-2 [&>button]:min-h-11 sm:[&>button]:min-h-9">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>
|
||||
{cancelText}
|
||||
</Button>
|
||||
|
||||
+38
-30
@@ -961,6 +961,14 @@ export function MailPage() {
|
||||
function closeSidebarContextMenu() {
|
||||
setSidebarContextMenu(null)
|
||||
}
|
||||
function runAfterClosingMobileSidebar(action: () => void) {
|
||||
if (!isMobile) {
|
||||
action()
|
||||
return
|
||||
}
|
||||
if (mobileSidebarOpen) setMobileSidebarOpen(false)
|
||||
window.setTimeout(action, 250)
|
||||
}
|
||||
function activateSidebarItem(item: MailMenuItem) {
|
||||
if (item.type === "starred") openStarred()
|
||||
else if (item.type === "scheduled") openScheduled()
|
||||
@@ -1432,7 +1440,7 @@ export function MailPage() {
|
||||
<div className="flex items-center justify-between px-2 py-1">
|
||||
<SidebarGroupLabel className="m-0 h-auto gap-1 p-0 text-xs font-semibold text-muted-foreground"><ChevronDown className="h-3 w-3" />文件夹</SidebarGroupLabel>
|
||||
{canManageFolders && (
|
||||
<Button type="button" variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground hover:bg-transparent hover:text-foreground" aria-label="新建文件夹" title="新建文件夹" onClick={() => setFolderDialogOpen(true)}>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground hover:bg-transparent hover:text-foreground" aria-label="新建文件夹" title="新建文件夹" onClick={() => runAfterClosingMobileSidebar(() => setFolderDialogOpen(true))}>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
@@ -1553,6 +1561,34 @@ export function MailPage() {
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>}
|
||||
</SidebarContent>
|
||||
<SidebarContextMenu
|
||||
state={sidebarContextMenu}
|
||||
canCreate={canManageFolders}
|
||||
canReorder={canOrganizeCurrentMailbox}
|
||||
canDelete={canManageFolders}
|
||||
pending={reorderFolders.isPending || deleteFolder.isPending}
|
||||
onClose={closeSidebarContextMenu}
|
||||
onOpen={(item) => {
|
||||
closeSidebarContextMenu()
|
||||
activateSidebarItem(item)
|
||||
}}
|
||||
onRefresh={() => {
|
||||
closeSidebarContextMenu()
|
||||
void refreshMailData()
|
||||
}}
|
||||
onCreateFolder={() => {
|
||||
closeSidebarContextMenu()
|
||||
runAfterClosingMobileSidebar(() => setFolderDialogOpen(true))
|
||||
}}
|
||||
onMove={(item, action) => {
|
||||
closeSidebarContextMenu()
|
||||
moveSidebarFolder(item, action)
|
||||
}}
|
||||
onDelete={(item) => {
|
||||
closeSidebarContextMenu()
|
||||
runAfterClosingMobileSidebar(() => confirmDeleteFolder(item))
|
||||
}}
|
||||
/>
|
||||
</Sidebar>
|
||||
)
|
||||
|
||||
@@ -1871,34 +1907,6 @@ export function MailPage() {
|
||||
active ? removeLabel.mutate({ id: message.id, labelId: label.id }) : addLabel.mutate({ id: message.id, label })
|
||||
}}
|
||||
/>
|
||||
<SidebarContextMenu
|
||||
state={sidebarContextMenu}
|
||||
canCreate={canManageFolders}
|
||||
canReorder={canOrganizeCurrentMailbox}
|
||||
canDelete={canManageFolders}
|
||||
pending={reorderFolders.isPending || deleteFolder.isPending}
|
||||
onClose={closeSidebarContextMenu}
|
||||
onOpen={(item) => {
|
||||
closeSidebarContextMenu()
|
||||
activateSidebarItem(item)
|
||||
}}
|
||||
onRefresh={() => {
|
||||
closeSidebarContextMenu()
|
||||
void refreshMailData()
|
||||
}}
|
||||
onCreateFolder={() => {
|
||||
closeSidebarContextMenu()
|
||||
setFolderDialogOpen(true)
|
||||
}}
|
||||
onMove={(item, action) => {
|
||||
closeSidebarContextMenu()
|
||||
moveSidebarFolder(item, action)
|
||||
}}
|
||||
onDelete={(item) => {
|
||||
closeSidebarContextMenu()
|
||||
confirmDeleteFolder(item)
|
||||
}}
|
||||
/>
|
||||
<CreateFolderDialog
|
||||
open={folderDialogOpen}
|
||||
pending={createFolder.isPending}
|
||||
@@ -1911,7 +1919,7 @@ export function MailPage() {
|
||||
description={pendingConfirm?.description}
|
||||
confirmText={pendingConfirm?.confirmText || "确认"}
|
||||
destructive
|
||||
pending={del.isPending || bulkPending}
|
||||
pending={del.isPending || bulkPending || deleteFolder.isPending}
|
||||
onOpenChange={(open) => { if (!open) setPendingConfirm(null) }}
|
||||
onConfirm={() => pendingConfirm?.onConfirm()}
|
||||
/>
|
||||
|
||||
@@ -2336,13 +2336,13 @@ function RuleDialog({ open, onOpenChange, mailboxes, labels, verifiedEmails, pen
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="flex h-svh w-screen max-w-none gap-0 overflow-hidden p-0 sm:h-auto sm:max-h-[92vh] sm:w-[min(94vw,56rem)]">
|
||||
<DialogHeader className="border-b px-4 py-4 text-left sm:px-8 sm:py-6">
|
||||
<DialogContent className="!flex h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden border-0 p-0 sm:h-auto sm:max-h-[92vh] sm:w-[min(94vw,56rem)] sm:border">
|
||||
<DialogHeader className="shrink-0 border-b px-4 py-4 pr-16 text-left sm:px-8 sm:py-6 sm:pr-16">
|
||||
<DialogTitle className="text-xl sm:text-2xl">{initialRule ? "编辑规则" : "新建规则"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form className="flex min-h-0 flex-1 flex-col" onSubmit={submit}>
|
||||
<div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-4 py-5 sm:space-y-7 sm:px-8 sm:py-7">
|
||||
<Field label="名称"><Input value={name} onChange={(event) => setName(event.target.value)} placeholder="我的规则" /></Field>
|
||||
<div className="min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-4 py-5 sm:space-y-7 sm:px-8 sm:py-7">
|
||||
<Field label="名称"><Input className="h-11 sm:h-9" value={name} onChange={(event) => setName(event.target.value)} placeholder="我的规则" /></Field>
|
||||
<Field label="适用邮箱"><MailboxSelect value={mailboxId} mailboxes={mailboxes} onChange={setMailboxId} /></Field>
|
||||
|
||||
<div className="space-y-4">
|
||||
@@ -2355,18 +2355,20 @@ function RuleDialog({ open, onOpenChange, mailboxes, labels, verifiedEmails, pen
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{conditions.map((condition, index) => (
|
||||
<div key={index} className="grid gap-3 md:grid-cols-[180px_128px_minmax(0,1fr)_auto_auto]">
|
||||
<div key={index} className="grid grid-cols-2 gap-2 rounded-md border p-3 md:grid-cols-[180px_128px_minmax(0,1fr)_auto_auto] md:gap-3 md:border-0 md:p-0">
|
||||
<Select value={condition.field || "from"} onValueChange={(value) => updateCondition(index, { field: value as RuleConditionField })}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectTrigger className="h-11 md:h-9"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{conditionFields.map((value) => <SelectItem key={value} value={value}>{conditionFieldLabels[value]}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
<Select value={condition.operator || defaultConditionOperator(condition.field)} onValueChange={(value) => updateCondition(index, { operator: value as RuleConditionOperator })}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectTrigger className="h-11 md:h-9"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{conditionOperatorsForField(condition.field).map((value) => <SelectItem key={value} value={value}>{conditionOperatorLabels[value]}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
<Input type={condition.field === "date" ? "date" : "text"} value={condition.value || ""} onChange={(event) => updateCondition(index, { value: event.target.value })} placeholder={conditionPlaceholder(condition.field)} />
|
||||
<Button type="button" variant="ghost" size="icon" className="text-muted-foreground" aria-label={`删除第 ${index + 1} 个条件`} title="删除条件" onClick={() => removeCondition(index)} disabled={conditions.length === 1}><X className="h-4 w-4" /></Button>
|
||||
<Button type="button" variant="ghost" size="icon" aria-label="添加条件" title="添加条件" onClick={addCondition}><Plus className="h-4 w-4" /></Button>
|
||||
<Input className="col-span-2 h-11 md:col-span-1 md:h-9" type={condition.field === "date" ? "date" : "text"} value={condition.value || ""} onChange={(event) => updateCondition(index, { value: event.target.value })} placeholder={conditionPlaceholder(condition.field)} />
|
||||
<div className="col-span-2 flex justify-end gap-2 md:contents">
|
||||
<Button type="button" variant="ghost" size="icon" className="size-11 text-muted-foreground md:size-9" aria-label={`删除第 ${index + 1} 个条件`} title="删除条件" onClick={() => removeCondition(index)} disabled={conditions.length === 1}><X className="h-4 w-4" /></Button>
|
||||
<Button type="button" variant="outline" size="icon" className="size-11 md:size-9" aria-label="添加条件" title="添加条件" onClick={addCondition}><Plus className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -2376,14 +2378,16 @@ function RuleDialog({ open, onOpenChange, mailboxes, labels, verifiedEmails, pen
|
||||
<div className="text-sm">执行以下动作</div>
|
||||
<div className="space-y-3">
|
||||
{actions.map((action, index) => (
|
||||
<div key={index} className={cn("grid gap-3", action.type === "forward" ? "md:grid-cols-[180px_minmax(0,1fr)_auto]" : "md:grid-cols-[180px_minmax(0,1fr)_auto_auto]")}>
|
||||
<div key={index} className="grid gap-2 rounded-md border p-3 md:grid-cols-[180px_minmax(0,1fr)_auto_auto] md:gap-3 md:border-0 md:p-0">
|
||||
<Select value={action.type} onValueChange={(value) => updateAction(index, { type: value as MailRuleAction["type"], value: "", labelId: "" })}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectTrigger className="h-11 md:h-9"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{(Object.keys(ruleActionLabels) as MailRuleAction["type"][]).map((value) => <SelectItem key={value} value={value}>{ruleActionLabels[value]}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
<RuleActionValue action={action} labels={availableLabels} verifiedEmails={verifiedEmails} onChange={(patch) => updateAction(index, patch)} />
|
||||
<Button type="button" variant="ghost" size="icon" className="text-muted-foreground" aria-label={`删除第 ${index + 1} 个操作`} title="删除操作" onClick={() => removeAction(index)} disabled={actions.length === 1}><X className="h-4 w-4" /></Button>
|
||||
{action.type !== "forward" && <Button type="button" variant="ghost" size="icon" aria-label="添加操作" title="添加操作" onClick={addAction}><Plus className="h-4 w-4" /></Button>}
|
||||
<div className="min-w-0"><RuleActionValue action={action} labels={availableLabels} verifiedEmails={verifiedEmails} onChange={(patch) => updateAction(index, patch)} /></div>
|
||||
<div className="flex justify-end gap-2 md:contents">
|
||||
<Button type="button" variant="ghost" size="icon" className="size-11 text-muted-foreground md:size-9" aria-label={`删除第 ${index + 1} 个操作`} title="删除操作" onClick={() => removeAction(index)} disabled={actions.length === 1}><X className="h-4 w-4" /></Button>
|
||||
<Button type="button" variant="outline" size="icon" className="size-11 md:size-9" aria-label="添加操作" title="添加操作" onClick={addAction}><Plus className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -2394,13 +2398,13 @@ function RuleDialog({ open, onOpenChange, mailboxes, labels, verifiedEmails, pen
|
||||
<div className="space-y-4">
|
||||
<RuleCheckbox checked={enabled} onCheckedChange={setEnabled} label="立即启用" />
|
||||
<RuleCheckbox checked={applyToExisting} onCheckedChange={setApplyToExisting} label="应用于现有邮件" />
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<RuleCheckbox checked={stopProcessing} onCheckedChange={setStopProcessing} label="终止规则：命中此规则后不再应用其他规则" />
|
||||
<Info className="h-4 w-4 text-muted-foreground" />
|
||||
<Info className="mt-1 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter className="gap-2 border-t px-4 py-4 sm:px-8 sm:py-5 [&>button]:w-full sm:[&>button]:w-auto">
|
||||
<DialogFooter className="shrink-0 gap-2 border-t px-4 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-4 sm:px-8 sm:py-5 [&>button]:min-h-11 [&>button]:w-full sm:[&>button]:min-h-9 sm:[&>button]:w-auto">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
|
||||
<Button disabled={!canCreate}>{pending ? "保存中..." : initialRule ? "保存修改" : "创建"}</Button>
|
||||
</DialogFooter>
|
||||
@@ -2458,7 +2462,7 @@ function verifiedRuleForwardTargets(value: string, verifiedEmails: string[]) {
|
||||
|
||||
function RuleCheckbox({ checked, onCheckedChange, label }: { checked: boolean; onCheckedChange: (checked: boolean) => void; label: string }) {
|
||||
const id = React.useId()
|
||||
return <div className="flex items-center gap-3"><Checkbox id={id} checked={checked} onCheckedChange={(value) => onCheckedChange(value === true)} /><Label htmlFor={id} className="text-base font-medium">{label}</Label></div>
|
||||
return <div className="flex min-w-0 items-start gap-3"><Checkbox id={id} className="mt-0.5" checked={checked} onCheckedChange={(value) => onCheckedChange(value === true)} /><Label htmlFor={id} className="text-sm font-medium leading-5 sm:text-base sm:leading-6">{label}</Label></div>
|
||||
}
|
||||
|
||||
function RuleListItem({ item, index, count, mailboxLabel, pending, onEdit, onToggle, onMove, onApply, onDelete }: { item: MailRule; index: number; count: number; mailboxLabel: string; pending: boolean; onEdit: () => void; onToggle: () => void; onMove: (direction: "up" | "down") => void; onApply: () => void; onDelete: (id: string) => void }) {
|
||||
|
||||
Reference in New Issue
Block a user