refactor: unify modal overlay system with shadcn/ui Dialog

Fix inconsistent modal overlays by migrating all custom implementations
to the unified shadcn/ui Dialog component with proper z-index layering.

Changes:
- Update Dialog component to support three z-index levels:
  - base (z-40): First-level dialogs
  - nested (z-50): Nested dialogs
  - alert (z-[60]): Alert/confirmation dialogs (using Tailwind arbitrary value)
- Refactor all custom modal implementations to use Dialog:
  - EndpointSpeedTest: API endpoint speed testing panel
  - ClaudeConfigEditor: Claude common config editor
  - CodexQuickWizardModal: Codex quick setup wizard
  - CodexCommonConfigModal: Codex common config editor
  - SettingsDialog: Restart confirmation prompt
- Remove custom backdrop implementations and manual z-index
- Leverage Radix UI Portal for automatic DOM order management
- Ensure consistent overlay behavior and keyboard interactions

This eliminates the "background residue" issue where overlays from
different layers would conflict, providing a unified and professional
user experience across all modal interactions.

src/components/providers/forms/ClaudeConfigEditor.tsx

@@ -1,8 +1,15 @@
 import React, { useEffect, useState } from "react";
 import JsonEditor from "@/components/JsonEditor";
-import { X, Save } from "lucide-react";
-import { isLinux } from "@/lib/platform";
+import { Save } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 
 interface ClaudeConfigEditorProps {
   value: string;
@@ -60,20 +67,6 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
     }
   }, [commonConfigError, isCommonConfigModalOpen]);
 
-  // 支持按下 ESC 关闭弹窗
-  useEffect(() => {
-    if (!isCommonConfigModalOpen) return;
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        closeModal();
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [isCommonConfigModalOpen]);
-
   const closeModal = () => {
     setIsCommonConfigModalOpen(false);
   };
@@ -128,76 +121,41 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
       <p className="text-xs text-gray-500 dark:text-gray-400">
         {t("claudeConfig.fullSettingsHint")}
       </p>
-      {isCommonConfigModalOpen && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center"
-          onMouseDown={(e) => {
-            if (e.target === e.currentTarget) closeModal();
-          }}
-        >
-          {/* Backdrop - 统一背景样式 */}
-          <div
-            className={`absolute inset-0 bg-black/50 dark:bg-black/70${
-              isLinux() ? "" : " backdrop-blur-sm"
-            }`}
-          />
 
-          {/* Modal - 统一窗口样式 */}
-          <div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
-            {/* Header - 统一标题栏样式 */}
-            <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
-              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-                {t("claudeConfig.editCommonConfigTitle")}
-              </h2>
-              <button
-                type="button"
-                onClick={closeModal}
-                className="p-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
-                aria-label={t("common.close")}
-              >
-                <X size={18} />
-              </button>
-            </div>
+      <Dialog open={isCommonConfigModalOpen} onOpenChange={(open) => !open && closeModal()}>
+        <DialogContent zIndex="nested" className="max-w-2xl max-h-[90vh] flex flex-col p-0">
+          <DialogHeader className="px-6 pt-6 pb-0">
+            <DialogTitle>{t("claudeConfig.editCommonConfigTitle")}</DialogTitle>
+          </DialogHeader>
 
-            {/* Content - 统一内容区域样式 */}
-            <div className="flex-1 overflow-auto p-6 space-y-4">
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                {t("claudeConfig.commonConfigHint")}
+          <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {t("claudeConfig.commonConfigHint")}
+            </p>
+            <JsonEditor
+              value={commonConfigSnippet}
+              onChange={onCommonConfigSnippetChange}
+              darkMode={isDarkMode}
+              rows={12}
+            />
+            {commonConfigError && (
+              <p className="text-sm text-red-500 dark:text-red-400">
+                {commonConfigError}
               </p>
-              <JsonEditor
-                value={commonConfigSnippet}
-                onChange={onCommonConfigSnippetChange}
-                darkMode={isDarkMode}
-                rows={12}
-              />
-              {commonConfigError && (
-                <p className="text-sm text-red-500 dark:text-red-400">
-                  {commonConfigError}
-                </p>
-              )}
-            </div>
-
-            {/* Footer - 统一底部按钮样式 */}
-            <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
-              <button
-                type="button"
-                onClick={closeModal}
-                className="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors"
-              >
-                {t("common.cancel")}
-              </button>
-              <button
-                type="button"
-                onClick={closeModal}
-                className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2"
-              >
-                <Save className="w-4 h-4" />
-                {t("common.save")}
-              </button>
-            </div>
+            )}
           </div>
-        </div>
-      )}
+
+          <DialogFooter className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 m-0">
+            <Button type="button" variant="outline" onClick={closeModal}>
+              {t("common.cancel")}
+            </Button>
+            <Button type="button" onClick={closeModal} className="gap-2">
+              <Save className="w-4 h-4" />
+              {t("common.save")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };

src/components/providers/forms/CodexCommonConfigModal.tsx

@@ -1,7 +1,14 @@
-import React, { useEffect } from "react";
-import { X, Save } from "lucide-react";
+import React from "react";
+import { Save } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { isLinux } from "@/lib/platform";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 
 interface CodexCommonConfigModalProps {
   isOpen: boolean;
@@ -24,56 +31,14 @@ export const CodexCommonConfigModal: React.FC<CodexCommonConfigModalProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  // Support ESC key to close modal
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [isOpen, onClose]);
-
-  if (!isOpen) return null;
-
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      {/* Backdrop */}
-      <div
-        className={`absolute inset-0 bg-black/50 dark:bg-black/70${
-          isLinux() ? "" : " backdrop-blur-sm"
-        }`}
-      />
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent zIndex="nested" className="max-w-2xl max-h-[90vh] flex flex-col p-0">
+        <DialogHeader className="px-6 pt-6 pb-0">
+          <DialogTitle>{t("codexConfig.editCommonConfigTitle")}</DialogTitle>
+        </DialogHeader>
 
-      {/* Modal */}
-      <div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-            {t("codexConfig.editCommonConfigTitle")}
-          </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
-            aria-label={t("common.close")}
-          >
-            <X size={18} />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-auto p-6 space-y-4">
+        <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
           <p className="text-sm text-gray-500 dark:text-gray-400">
             {t("codexConfig.commonConfigHint")}
           </p>
@@ -102,25 +67,16 @@ export const CodexCommonConfigModal: React.FC<CodexCommonConfigModalProps> = ({
           )}
         </div>
 
-        {/* Footer */}
-        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors"
-          >
+        <DialogFooter className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 m-0">
+          <Button type="button" variant="outline" onClick={onClose}>
             {t("common.cancel")}
-          </button>
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2"
-          >
+          </Button>
+          <Button type="button" onClick={onClose} className="gap-2">
             <Save className="w-4 h-4" />
             {t("common.save")}
-          </button>
-        </div>
-      </div>
-    </div>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };

src/components/providers/forms/CodexQuickWizardModal.tsx

@@ -1,11 +1,19 @@
 import React, { useState, useRef } from "react";
-import { X, Save } from "lucide-react";
+import { Save } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { isLinux } from "@/lib/platform";
 import {
   generateThirdPartyAuth,
   generateThirdPartyConfig,
 } from "@/config/codexProviderPresets";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 interface CodexQuickWizardModalProps {
   isOpen: boolean;
@@ -101,225 +109,187 @@ export const CodexQuickWizardModal: React.FC<CodexQuickWizardModalProps> = ({
     }
   };
 
-  if (!isOpen) return null;
-
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) {
-          handleClose();
-        }
-      }}
-    >
-      <div
-        className={`absolute inset-0 bg-black/50 dark:bg-black/70${
-          isLinux() ? "" : " backdrop-blur-sm"
-        }`}
-      />
+    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent zIndex="nested" className="max-w-2xl max-h-[90vh] flex flex-col p-0">
+        <DialogHeader className="px-6 pt-6 pb-0">
+          <DialogTitle>{t("codexConfig.quickWizard")}</DialogTitle>
+        </DialogHeader>
 
-      <div className="relative mx-4 flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white shadow-lg dark:bg-gray-900">
-        <div className="flex h-full min-h-0 flex-col" role="form">
-          {/* Header */}
-          <div className="flex items-center justify-between border-b border-gray-200 p-6 dark:border-gray-800">
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-              {t("codexConfig.quickWizard")}
-            </h2>
-            <button
-              type="button"
-              onClick={handleClose}
-              className="rounded-md p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-              aria-label={t("common.close")}
-            >
-              <X size={18} />
-            </button>
+        <div className="flex-1 min-h-0 space-y-4 overflow-auto px-6 py-4">
+          <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              {t("codexConfig.wizardHint")}
+            </p>
           </div>
 
-          {/* Content */}
-          <div className="flex-1 min-h-0 space-y-4 overflow-auto p-6">
-            <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
-              <p className="text-sm text-blue-800 dark:text-blue-200">
-                {t("codexConfig.wizardHint")}
+          <div className="space-y-4">
+            {/* API Key */}
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                {t("codexConfig.apiKeyLabel")}
+              </label>
+              <Input
+                type="text"
+                value={templateApiKey}
+                ref={apiKeyInputRef}
+                onChange={(e) => setTemplateApiKey(e.target.value)}
+                onKeyDown={handleInputKeyDown}
+                pattern=".*\S.*"
+                title={t("common.enterValidValue")}
+                placeholder={t("codexConfig.apiKeyPlaceholder")}
+                required
+                className="font-mono"
+              />
+            </div>
+
+            {/* Display Name */}
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                {t("codexConfig.supplierNameLabel")}
+              </label>
+              <Input
+                type="text"
+                value={templateDisplayName}
+                ref={displayNameInputRef}
+                onChange={(e) => setTemplateDisplayName(e.target.value)}
+                onKeyDown={handleInputKeyDown}
+                placeholder={t("codexConfig.supplierNamePlaceholder")}
+                required
+                pattern=".*\S.*"
+                title={t("common.enterValidValue")}
+              />
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {t("codexConfig.supplierNameHint")}
               </p>
             </div>
 
-            <div className="space-y-4">
-              {/* API Key */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {t("codexConfig.apiKeyLabel")}
-                </label>
-                <input
-                  type="text"
-                  value={templateApiKey}
-                  ref={apiKeyInputRef}
-                  onChange={(e) => setTemplateApiKey(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  pattern=".*\S.*"
-                  title={t("common.enterValidValue")}
-                  placeholder={t("codexConfig.apiKeyPlaceholder")}
-                  required
-                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                />
-              </div>
-
-              {/* Display Name */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {t("codexConfig.supplierNameLabel")}
-                </label>
-                <input
-                  type="text"
-                  value={templateDisplayName}
-                  ref={displayNameInputRef}
-                  onChange={(e) => setTemplateDisplayName(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  placeholder={t("codexConfig.supplierNamePlaceholder")}
-                  required
-                  pattern=".*\S.*"
-                  title={t("common.enterValidValue")}
-                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                />
-                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  {t("codexConfig.supplierNameHint")}
-                </p>
-              </div>
-
-              {/* Provider Name */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {t("codexConfig.supplierCodeLabel")}
-                </label>
-                <input
-                  type="text"
-                  value={templateProviderName}
-                  onChange={(e) => setTemplateProviderName(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  placeholder={t("codexConfig.supplierCodePlaceholder")}
-                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                />
-                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  {t("codexConfig.supplierCodeHint")}
-                </p>
-              </div>
-
-              {/* Base URL */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {t("codexConfig.apiUrlLabel")}
-                </label>
-                <input
-                  type="url"
-                  value={templateBaseUrl}
-                  ref={baseUrlInputRef}
-                  onChange={(e) => setTemplateBaseUrl(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  placeholder={t("codexConfig.apiUrlPlaceholder")}
-                  required
-                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                />
-              </div>
-
-              {/* Website URL */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {t("codexConfig.websiteLabel")}
-                </label>
-                <input
-                  type="url"
-                  value={templateWebsiteUrl}
-                  onChange={(e) => setTemplateWebsiteUrl(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  placeholder={t("codexConfig.websitePlaceholder")}
-                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                />
-                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  {t("codexConfig.websiteHint")}
-                </p>
-              </div>
-
-              {/* Model Name */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {t("codexConfig.modelNameLabel")}
-                </label>
-                <input
-                  type="text"
-                  value={templateModelName}
-                  ref={modelNameInputRef}
-                  onChange={(e) => setTemplateModelName(e.target.value)}
-                  onKeyDown={handleInputKeyDown}
-                  pattern=".*\S.*"
-                  title={t("common.enterValidValue")}
-                  placeholder={t("codexConfig.modelNamePlaceholder")}
-                  required
-                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
-                />
-              </div>
+            {/* Provider Name */}
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                {t("codexConfig.supplierCodeLabel")}
+              </label>
+              <Input
+                type="text"
+                value={templateProviderName}
+                onChange={(e) => setTemplateProviderName(e.target.value)}
+                onKeyDown={handleInputKeyDown}
+                placeholder={t("codexConfig.supplierCodePlaceholder")}
+              />
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {t("codexConfig.supplierCodeHint")}
+              </p>
             </div>
 
-            {/* Preview */}
-            {(templateApiKey || templateProviderName || templateBaseUrl) && (
-              <div className="space-y-2 border-t border-gray-200 pt-4 dark:border-gray-700">
-                <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {t("codexConfig.configPreview")}
-                </h3>
-                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-                  <div>
-                    <label className="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">
-                      auth.json
-                    </label>
-                    <pre className="overflow-x-auto rounded-lg bg-gray-50 p-3 text-xs font-mono text-gray-700 dark:bg-gray-800 dark:text-gray-300">
-                      {JSON.stringify(
-                        generateThirdPartyAuth(templateApiKey),
-                        null,
-                        2,
-                      )}
-                    </pre>
-                  </div>
-                  <div>
-                    <label className="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">
-                      config.toml
-                    </label>
-                    <pre className="whitespace-pre-wrap rounded-lg bg-gray-50 p-3 text-xs font-mono text-gray-700 dark:bg-gray-800 dark:text-gray-300">
-                      {templateProviderName && templateBaseUrl
-                        ? generateThirdPartyConfig(
-                            templateProviderName,
-                            templateBaseUrl,
-                            templateModelName,
-                          )
-                        : ""}
-                    </pre>
-                  </div>
-                </div>
-              </div>
-            )}
+            {/* Base URL */}
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                {t("codexConfig.apiUrlLabel")}
+              </label>
+              <Input
+                type="url"
+                value={templateBaseUrl}
+                ref={baseUrlInputRef}
+                onChange={(e) => setTemplateBaseUrl(e.target.value)}
+                onKeyDown={handleInputKeyDown}
+                placeholder={t("codexConfig.apiUrlPlaceholder")}
+                required
+                className="font-mono"
+              />
+            </div>
+
+            {/* Website URL */}
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                {t("codexConfig.websiteLabel")}
+              </label>
+              <Input
+                type="url"
+                value={templateWebsiteUrl}
+                onChange={(e) => setTemplateWebsiteUrl(e.target.value)}
+                onKeyDown={handleInputKeyDown}
+                placeholder={t("codexConfig.websitePlaceholder")}
+              />
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {t("codexConfig.websiteHint")}
+              </p>
+            </div>
+
+            {/* Model Name */}
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                {t("codexConfig.modelNameLabel")}
+              </label>
+              <Input
+                type="text"
+                value={templateModelName}
+                ref={modelNameInputRef}
+                onChange={(e) => setTemplateModelName(e.target.value)}
+                onKeyDown={handleInputKeyDown}
+                pattern=".*\S.*"
+                title={t("common.enterValidValue")}
+                placeholder={t("codexConfig.modelNamePlaceholder")}
+                required
+              />
+            </div>
           </div>
 
-          {/* Footer */}
-          <div className="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-100 p-6 dark:border-gray-800 dark:bg-gray-800">
-            <button
-              type="button"
-              onClick={handleClose}
-              className="rounded-lg px-4 py-2 text-sm font-medium text-gray-500 transition-colors hover:bg-white hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100"
-            >
-              {t("common.cancel")}
-            </button>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                applyTemplate();
-              }}
-              className="flex items-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
-            >
-              <Save className="h-4 w-4" />
-              {t("codexConfig.applyConfig")}
-            </button>
-          </div>
+          {/* Preview */}
+          {(templateApiKey || templateProviderName || templateBaseUrl) && (
+            <div className="space-y-2 border-t border-gray-200 pt-4 dark:border-gray-700">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                {t("codexConfig.configPreview")}
+              </h3>
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">
+                    auth.json
+                  </label>
+                  <pre className="overflow-x-auto rounded-lg bg-gray-50 p-3 text-xs font-mono text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                    {JSON.stringify(
+                      generateThirdPartyAuth(templateApiKey),
+                      null,
+                      2,
+                    )}
+                  </pre>
+                </div>
+                <div>
+                  <label className="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">
+                    config.toml
+                  </label>
+                  <pre className="whitespace-pre-wrap rounded-lg bg-gray-50 p-3 text-xs font-mono text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                    {templateProviderName && templateBaseUrl
+                      ? generateThirdPartyConfig(
+                          templateProviderName,
+                          templateBaseUrl,
+                          templateModelName,
+                        )
+                      : ""}
+                  </pre>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
-      </div>
-    </div>
+
+        <DialogFooter className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 m-0">
+          <Button type="button" variant="outline" onClick={handleClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            type="button"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              applyTemplate();
+            }}
+            className="gap-2"
+          >
+            <Save className="h-4 w-4" />
+            {t("codexConfig.applyConfig")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };

src/components/providers/forms/EndpointSpeedTest.tsx

@@ -1,11 +1,17 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Zap, Loader2, Plus, X, AlertCircle, Save } from "lucide-react";
-import { isLinux } from "@/lib/platform";
 import type { AppType } from "@/lib/api";
 import { vscodeApi } from "@/lib/api/vscode";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
 
 
 // 临时类型定义，待后端 API 实现后替换
@@ -422,53 +428,12 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
     [normalizedSelected, onChange, appType, entries, providerId],
   );
 
-  // 支持按下 ESC 关闭弹窗
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [onClose]);
-
-  if (!visible) {
-    return null;
-  }
-
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      {/* Backdrop */}
-      <div
-        className={`absolute inset-0 bg-black/50 dark:bg-black/70${
-          isLinux() ? "" : " backdrop-blur-sm"
-        }`}
-      />
-
-      {/* Modal */}
-      <div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg w-full max-w-2xl mx-4 max-h-[80vh] overflow-hidden flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
-          <h3 className="text-base font-medium text-gray-900 dark:text-gray-100">
-            {t("endpointTest.title")}
-          </h3>
-          <Button
-            type="button"
-            onClick={onClose}
-            variant="ghost"
-            size="icon"
-            aria-label={t("common.close")}
-          >
-            <X size={16} />
-          </Button>
-        </div>
+    <Dialog open={visible} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent zIndex="nested" className="max-w-2xl max-h-[80vh] flex flex-col p-0">
+        <DialogHeader className="px-6 pt-6 pb-0">
+          <DialogTitle>{t("endpointTest.title")}</DialogTitle>
+        </DialogHeader>
 
         {/* Content */}
         <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
@@ -635,15 +600,14 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
           )}
         </div>
 
-        {/* Footer */}
-        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
+        <DialogFooter className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 m-0">
           <Button type="button" onClick={onClose} className="gap-2">
             <Save className="w-4 h-4" />
             {t("common.save")}
           </Button>
-        </div>
-      </div>
-    </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
 

src/components/settings/SettingsDialog.tsx

@@ -275,31 +275,26 @@ export function SettingsDialog({
         </DialogFooter>
       </DialogContent>
 
-      {showRestartPrompt ? (
-        <div className="fixed inset-0 z-[60] flex items-center justify-center">
-          <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
-          <div className="relative z-10 w-full max-w-md space-y-4 rounded-lg border border-border bg-background p-6 shadow-xl">
-            <div className="space-y-1">
-              <h2 className="text-lg font-semibold">
-                {t("settings.restartRequired")}
-              </h2>
-              <p className="text-sm text-muted-foreground">
-                {t("settings.restartRequiredMessage", {
-                  defaultValue: "配置目录已变更，需要重启应用生效。",
-                })}
-              </p>
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={handleRestartLater}>
-                {t("settings.restartLater")}
-              </Button>
-              <Button onClick={handleRestartNow}>
-                {t("settings.restartNow")}
-              </Button>
-            </div>
-          </div>
-        </div>
-      ) : null}
+      <Dialog open={showRestartPrompt} onOpenChange={(open) => !open && handleRestartLater()}>
+        <DialogContent zIndex="alert" className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t("settings.restartRequired")}</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-muted-foreground">
+            {t("settings.restartRequiredMessage", {
+              defaultValue: "配置目录已变更，需要重启应用生效。",
+            })}
+          </p>
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={handleRestartLater}>
+              {t("settings.restartLater")}
+            </Button>
+            <Button onClick={handleRestartNow}>
+              {t("settings.restartNow")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Dialog>
   );
 }

src/components/ui/dialog.tsx

@@ -13,41 +13,63 @@ const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    zIndex?: "base" | "nested" | "alert";
+  }
+>(({ className, zIndex = "base", ...props }, ref) => {
+  const zIndexMap = {
+    base: "z-40",
+    nested: "z-50",
+    alert: "z-[60]",
+  };
+
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        "fixed inset-0 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        zIndexMap[zIndex],
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4" />
-        <span className="sr-only">关闭</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    zIndex?: "base" | "nested" | "alert";
+  }
+>(({ className, children, zIndex = "base", ...props }, ref) => {
+  const zIndexMap = {
+    base: "z-40",
+    nested: "z-50",
+    alert: "z-[60]",
+  };
+
+  return (
+    <DialogPortal>
+      <DialogOverlay zIndex={zIndex} />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-1/2 top-1/2 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          zIndexMap[zIndex],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+          <X className="h-4 w-4" />
+          <span className="sr-only">关闭</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({