feat(ui): add permanent option directly in TTL dropdown

Author: GALIAIS

frontend/src/features/user/components/mailbox-create-form.tsx

@@ -5,13 +5,12 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { OptionCombobox } from "@/components/ui/option-combobox";
 import { WorkspaceField } from "@/components/layout/workspace-ui";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
 import { MailPlus } from "lucide-react";
 import { mailboxLocalPartSchema } from "@/lib/schemas";
 import type { DomainOption } from "../api";
 
 const ttlOptions = [
+  { label: "永久", value: "permanent", keywords: ["permanent", "forever", "永久", "不过期"] },
   { label: "24 小时", value: "24", keywords: ["1 day", "24"] },
   { label: "72 小时", value: "72", keywords: ["3 days", "72"] },
   { label: "168 小时", value: "168", keywords: ["7 days", "168"] },
@@ -111,13 +110,19 @@ export function MailboxCreateForm({
           <WorkspaceField label="有效期">
             <OptionCombobox
               ariaLabel="邮箱有效期"
-              disabled={permanent}
               emptyLabel="没有匹配的有效期"
-              onValueChange={(value) => onTtlHoursChange(Number(value))}
+              onValueChange={(value) => {
+                if (value === "permanent") {
+                  onPermanentChange(true);
+                } else {
+                  onPermanentChange(false);
+                  onTtlHoursChange(Number(value));
+                }
+              }}
               options={ttlOptions}
-              placeholder={permanent ? "永久" : "选择有效期"}
+              placeholder="选择有效期"
               searchPlaceholder="搜索有效期"
-              value={permanent ? "" : String(ttlHours)}
+              value={permanent ? "permanent" : String(ttlHours)}
             />
           </WorkspaceField>
 
@@ -145,27 +150,14 @@ export function MailboxCreateForm({
           </div>
         </div>
 
-        <div className="flex items-center gap-4">
-          <div className="flex-1">
-            <WorkspaceField label="邮箱前缀">
-              <Input
-                onChange={(event) => handleLocalPartChange(event.target.value)}
-                placeholder="留空则自动生成"
-                value={localPart}
-              />
-              {localPartError ? <p className="text-xs text-destructive">{localPartError}</p> : null}
-            </WorkspaceField>
-          </div>
-
-          <div className="flex items-center gap-2 pt-5">
-            <Switch
-              checked={permanent}
-              id="permanent-switch"
-              onCheckedChange={onPermanentChange}
-            />
-            <Label htmlFor="permanent-switch" className="text-sm whitespace-nowrap">永久邮箱</Label>
-          </div>
-        </div>
+        <WorkspaceField label="邮箱前缀">
+          <Input
+            onChange={(event) => handleLocalPartChange(event.target.value)}
+            placeholder="留空则自动生成"
+            value={localPart}
+          />
+          {localPartError ? <p className="text-xs text-destructive">{localPartError}</p> : null}
+        </WorkspaceField>
 
         {feedback ? <div className="text-xs text-muted-foreground">{feedback}</div> : null}
       </CardContent>