feat: 新增邮件详情模态框展示功能

frontend/src/components/MailList.tsx

@@ -16,6 +16,7 @@ import PasswordIcon from './icons/Password.tsx'; // feat: 导入密码图标
 // feat: 导入新组件
 import { MailDetail } from '../pages/MailDetail.tsx';
 import ArrowUturnLeft from './icons/ArrowUturnLeft.tsx';
+import Expand from './icons/Expand.tsx'; // feat: 导入 Expand 图标
 
 interface MailListProps {
   emails: Email[];
@@ -33,9 +34,10 @@ interface MailListProps {
   // feat: 新增 props，用于接收当前选中的邮件和关闭详情页的回调
   selectedEmail: Email | null;
   onCloseDetail: () => void;
+  onExpand: () => void; // feat: 新增 onExpand 回调
 }
 
-export function MailList({ emails, isLoading, isFetching, onDelete, isDeleting, onRefresh, selectedIds, setSelectedIds, isAddressCreated, onSelectEmail, showViewPasswordButton, onShowPassword, selectedEmail, onCloseDetail }: MailListProps) {
+export function MailList({ emails, isLoading, isFetching, onDelete, isDeleting, onRefresh, selectedIds, setSelectedIds, isAddressCreated, onSelectEmail, showViewPasswordButton, onShowPassword, selectedEmail, onCloseDetail, onExpand }: MailListProps) {
   const { t } = useTranslation();
 
   const handleSelect = (id: string) => {
@@ -154,14 +156,23 @@ export function MailList({ emails, isLoading, isFetching, onDelete, isDeleting,
         <div className="ml-auto flex items-center gap-2">
           {/* feat: 详情页模式下的操作按钮 */}
           {selectedEmail ? (
-            <button
-              onClick={() => onDelete([selectedEmail.id])}
-              disabled={isDeleting}
-              className="p-1 rounded text-red-500 disabled:text-gray-500 hover:text-red-400"
-              title="删除"
-            >
-              <TrashIcon className="w-5 h-5" />
-            </button>
+            <>
+              <button
+                onClick={onExpand}
+                className="p-1 rounded text-cyan-400 hover:text-cyan-300"
+                title="放大"
+              >
+                <Expand className="w-5 h-5" />
+              </button>
+              <button
+                onClick={() => onDelete([selectedEmail.id])}
+                disabled={isDeleting}
+                className="p-1 rounded text-red-500 disabled:text-gray-500 hover:text-red-400"
+                title="删除"
+              >
+                <TrashIcon className="w-5 h-5" />
+              </button>
+            </>
           ) : (
             <>
               {/* 列表页模式下的操作按钮 */}

frontend/src/components/icons/Expand.tsx

@@ -0,0 +1,21 @@
+// feat: 新增 Expand 图标，用于在模态框中打开邮件
+import { SVGProps } from "react";
+
+export default function Expand(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M20.25 20.25v-4.5m0 4.5h-4.5m4.5 0L15 15M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15m11.25-6L15 9"
+      />
+    </svg>
+  );
+}

frontend/src/pages/Home.tsx

@@ -28,6 +28,8 @@ import Info from "../components/icons/Info.tsx";
 
 // refactor: 将导入从 'database' 包更改为本地的类型定义文件
 import type { Email } from '../database_types.ts';
+import { InfoModal } from '../components/InfoModal.tsx';
+import { MailDetail } from './MailDetail.tsx';
 
 export function Home() {
   const config = useConfig();
@@ -41,6 +43,7 @@ export function Home() {
   const [isTurnstileVerified, setIsTurnstileVerified] = useState(false);
   const [selectedEmail, setSelectedEmail] = useState<Email | null>(null); // 新增状态，用于存储当前选中的邮件
   const [selectedDomain, setSelectedDomain] = useState<string>(config.emailDomain[0]); // feat: 新增状态，用于存储当前选中的域名
+  const [showEmailModal, setShowEmailModal] = useState(false); // feat: 新增状态，用于控制邮件详情模态框的显示
 
   // feat: 初始化密码模态框
   const { PasswordModal, setShowPasswordModal } = usePasswordModal();
@@ -230,9 +233,19 @@ export function Home() {
     setSelectedEmail(null);
   };
 
+  // feat: 新增处理函数，用于在模态框中显示邮件
+  const handleExpandEmail = () => {
+    setShowEmailModal(true);
+  };
+
   return (
     <div className="h-full flex flex-col gap-4 md:flex-row justify-center items-start mt-24 mx-6 md:mx-10">
       <PasswordModal onLogin={handleLogin} isLoggingIn={isLoggingIn} />
+      {selectedEmail && (
+        <InfoModal showModal={showEmailModal} setShowModal={setShowEmailModal} title={t('Email Detail')}>
+          <MailDetail email={selectedEmail} onClose={() => setShowEmailModal(false)} />
+        </InfoModal>
+      )}
       <div className="flex flex-col text-white items-start w-full md:w-[350px] mx-auto gap-2">
         {/* 左侧信息面板 */}
         <div className="w-full mb-4 md:max-w-[350px] shrink-0 group group-hover:before:duration-500 group-hover:after:duration-500 after:duration-500 hover:border-cyan-600 hover:before:[box-shadow:_20px_20px_20px_30px_#a21caf] duration-500 before:duration-500 hover:duration-500 hover:after:-right-8 hover:before:right-12 hover:before:-bottom-8 hover:before:blur origin-left hover:decoration-2 relative bg-neutral-800 h-full border text-left p-4 rounded-lg overflow-hidden border-cyan-50/20 before:absolute before:w-12 before:h-12 before:content[''] before:right-1 before:top-1 before:z-10 before:bg-violet-500 before:rounded-full before:blur-lg  after:absolute after:z-10 after:w-20 after:h-20 after:content['']  after:bg-rose-300 after:right-8 after:top-3 after:rounded-full after:blur-lg">
@@ -325,6 +338,7 @@ export function Home() {
           // feat: 传递当前选中的邮件和关闭详情页的回调
           selectedEmail={selectedEmail}
           onCloseDetail={handleCloseDetail}
+          onExpand={handleExpandEmail} // feat: 传递展开邮件的回调
         />
       </div>
     </div>