fix: 修复了 MailDetail 页面中图标导入语法错误的问题 chore: 统一了图标组件的导出方式为默认导出

frontend/src/components/MailList.tsx

@@ -5,7 +5,7 @@ import { zhCN } from 'date-fns/locale';
 import type { Email } from 'database';
 
 // 图标导入
-import { MailIcon } from './icons/MailIcon.tsx';
+import MailIcon from './icons/MailIcon.tsx'; // 修复：将命名导入 { MailIcon } 改为默认导入 MailIcon
 import RefreshIcon from './icons/RefreshIcon.tsx';
 import Loader from './icons/Loader.tsx';
 import { TrashIcon } from './icons/TrashIcon.tsx';
@@ -134,3 +134,4 @@ export function MailList({ emails, isLoading, onDelete, isDeleting, onRefresh, s
     </div>
   );
 }
+

frontend/src/components/icons/ArrowUturnLeft.tsx

@@ -1,20 +1,20 @@
-import { SVGProps } from "react";
-
-export default function ArrowUturnLeft(props: SVGProps<SVGSVGElement>) {
+// 修复：将命名导出 'export function' 改为默认导出 'export default function'
+// 这确保了组件导出方式的一致性，解决了Vite构建过程中的解析错误。
+export default function ArrowUturnLeft() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
       fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-6 h-6"
     >
-      <path d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"
+      />
     </svg>
   );
 }

frontend/src/components/icons/UserCircleIcon.tsx

@@ -1,20 +1,20 @@
-import { SVGProps } from "react";
-
-export default function UserCircleIcon(props: SVGProps<SVGSVGElement>) {
+// 修复：将命名导出 'export function' 改为默认导出 'export default function'
+// 这确保了组件导出方式的一致性，解决了Vite构建过程中的解析错误。
+export default function UserCircleIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
       fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
       {...props}
     >
-      <path d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      />
     </svg>
   );
 }

frontend/src/pages/MailDetail.tsx

@@ -5,8 +5,9 @@ import { useTranslation } from "react-i18next";
 import { format } from "date-fns/format";
 
 // 导入图标
-import { ArrowUturnLeft } from '../components/icons/ArrowUturnLeft.tsx';
-import { UserCircleIcon } from '../components/icons/UserCircleIcon.tsx';
+// 修复：将命名导入更改为默认导入，以匹配图标组件的导出方式
+import ArrowUturnLeft from '../components/icons/ArrowUturnLeft.tsx';
+import UserCircleIcon from '../components/icons/UserCircleIcon.tsx';
 
 export function MailDetail() {
   const { t } = useTranslation();
@@ -100,3 +101,4 @@ export function MailDetail() {
     </div>
   );
 }
+