diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index eec9e57..e7af1f5 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -23,4 +23,5 @@ rand = "0.8.5"
 chrono = "0.4"
 regex = "1.11.1"
 bcrypt = "0.16"
-hex = "0.4.3"
\ No newline at end of file
+hex = "0.4.3"
+rocket_cors = "0.6.0"
diff --git a/backend/src/main.rs b/backend/src/main.rs
index 47b0edc..516a6a6 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -5,10 +5,13 @@ mod storage;
 
 use crate::common::config;
 use common::error::{CustomErrorInto, CustomResult};
+use rocket::http::Method;
 use rocket::Shutdown;
+use rocket_cors::{AllowedHeaders, AllowedOrigins, Cors, CorsOptions};
 use std::sync::Arc;
 use storage::sql;
 use tokio::sync::Mutex;
+
 pub struct AppState {
     db: Arc<Mutex<Option<sql::Database>>>,
     shutdown: Arc<Mutex<Option<Shutdown>>>,
@@ -61,6 +64,25 @@ impl AppState {
     }
 }
 
+fn cors() -> Cors {
+    CorsOptions {
+        allowed_origins: AllowedOrigins::all(),
+        allowed_methods: vec![Method::Get, Method::Post, Method::Options]
+            .into_iter()
+            .map(From::from)
+            .collect(),
+        allowed_headers: AllowedHeaders::all(),
+        allow_credentials: true,
+        expose_headers: Default::default(),
+        max_age: None,
+        send_wildcard: false,
+        fairing_route_base: "/".to_string(),
+        fairing_route_rank: 0,
+    }
+    .to_cors()
+    .expect("CORS配置错误")
+}
+
 #[rocket::main]
 async fn main() -> CustomResult<()> {
     let config = config::Config::read().unwrap_or_else(|e| {
@@ -75,7 +97,8 @@ async fn main() -> CustomResult<()> {
 
     let mut rocket_builder = rocket::build()
         .configure(rocket_config)
-        .manage(state.clone());
+        .manage(state.clone())
+        .attach(cors());
 
     if !config.init.sql {
         rocket_builder = rocket_builder.mount("/", rocket::routes![api::setup::setup_sql]);
diff --git a/backend/src/storage/sql/builder.rs b/backend/src/storage/sql/builder.rs
index 69f5439..2350131 100644
--- a/backend/src/storage/sql/builder.rs
+++ b/backend/src/storage/sql/builder.rs
@@ -254,7 +254,7 @@ pub enum Operator {
     Lte,
     Like,
     In,
-    IsNull
+    IsNull,
 }
 
 impl Operator {
@@ -268,7 +268,7 @@ impl Operator {
             Operator::Lte => "<=",
             Operator::Like => "LIKE",
             Operator::In => "IN",
-            Operator::IsNull => "IS NULL"
+            Operator::IsNull => "IS NULL",
         }
     }
 }
@@ -295,7 +295,7 @@ pub enum WhereClause {
     And(Vec<WhereClause>),
     Or(Vec<WhereClause>),
     Condition(Condition),
-    Not(Condition)
+    Not(Condition),
 }
 
 #[derive(Debug, Clone)]
diff --git a/backend/src/storage/sql/schema.rs b/backend/src/storage/sql/schema.rs
index b057867..c5832bf 100644
--- a/backend/src/storage/sql/schema.rs
+++ b/backend/src/storage/sql/schema.rs
@@ -541,7 +541,9 @@ pub fn generate_schema(db_type: DatabaseType, db_prefix: SafeValue) -> CustomRes
         .add_field(Field::new(
             "status",
             FieldType::VarChar(20),
-            FieldConstraint::new().not_null().check(content_state_check.clone()),
+            FieldConstraint::new()
+                .not_null()
+                .check(content_state_check.clone()),
             ValidationLevel::Strict,
         )?);
 
@@ -587,7 +589,9 @@ pub fn generate_schema(db_type: DatabaseType, db_prefix: SafeValue) -> CustomRes
         .add_field(Field::new(
             "status",
             FieldType::VarChar(20),
-            FieldConstraint::new().not_null().check(content_state_check.clone()),
+            FieldConstraint::new()
+                .not_null()
+                .check(content_state_check.clone()),
             ValidationLevel::Strict,
         )?)
         .add_field(Field::new(
@@ -728,7 +732,9 @@ pub fn generate_schema(db_type: DatabaseType, db_prefix: SafeValue) -> CustomRes
         .add_field(Field::new(
             "target_type",
             FieldType::VarChar(20),
-            FieldConstraint::new().not_null().check(target_type_check.clone()),
+            FieldConstraint::new()
+                .not_null()
+                .check(target_type_check.clone()),
             ValidationLevel::Strict,
         )?)
         .add_field(Field::new(
@@ -782,7 +788,9 @@ pub fn generate_schema(db_type: DatabaseType, db_prefix: SafeValue) -> CustomRes
         .add_field(Field::new(
             "target_type",
             FieldType::VarChar(20),
-            FieldConstraint::new().not_null().check(target_type_check.clone()),
+            FieldConstraint::new()
+                .not_null()
+                .check(target_type_check.clone()),
             ValidationLevel::Strict,
         )?)
         .add_field(Field::new(
@@ -843,10 +851,7 @@ pub fn generate_schema(db_type: DatabaseType, db_prefix: SafeValue) -> CustomRes
                     WhereClause::Condition(Condition::new(
                         "type".to_string(),
                         Operator::Eq,
-                        Some(SafeValue::Text(
-                            "'tag'".to_string(),
-                            ValidationLevel::Raw,
-                        )),
+                        Some(SafeValue::Text("'tag'".to_string(), ValidationLevel::Raw)),
                     )?),
                     WhereClause::Condition(Condition::new(
                         "type".to_string(),
diff --git a/frontend/app/dashboard/categories.tsx b/frontend/app/dashboard/categories.tsx
index c0d3e10..27497a3 100644
--- a/frontend/app/dashboard/categories.tsx
+++ b/frontend/app/dashboard/categories.tsx
@@ -1,16 +1,16 @@
 import { Template } from "interface/template";
-import { 
-  Container, 
-  Heading, 
-  Text, 
-  Box, 
-  Flex, 
+import {
+  Container,
+  Heading,
+  Text,
+  Box,
+  Flex,
   Table,
   Button,
   TextField,
   ScrollArea,
   Dialog,
-  IconButton
+  IconButton,
 } from "@radix-ui/themes";
 import {
   PlusIcon,
@@ -28,39 +28,41 @@ const mockCategories: (Category & { id: number; count: number })[] = [
     id: 1,
     name: "前端开发",
     parentId: undefined,
-    count: 15
+    count: 15,
   },
   {
     id: 2,
     name: "React",
     parentId: "1",
-    count: 8
+    count: 8,
   },
   {
     id: 3,
     name: "Vue",
     parentId: "1",
-    count: 5
+    count: 5,
   },
   {
     id: 4,
     name: "后端开发",
     parentId: undefined,
-    count: 12
+    count: 12,
   },
   {
     id: 5,
     name: "Node.js",
     parentId: "4",
-    count: 6
-  }
+    count: 6,
+  },
 ];
 
 export default new Template({}, ({ http, args }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const [newCategoryName, setNewCategoryName] = useState("");
-  const [selectedParentId, setSelectedParentId] = useState<string | undefined>();
+  const [selectedParentId, setSelectedParentId] = useState<
+    string | undefined
+  >();
 
   return (
     <Box>
@@ -74,7 +76,7 @@ export default new Template({}, ({ http, args }) => {
             共 {mockCategories.length} 个分类
           </Text>
         </Box>
-        <Button 
+        <Button
           className="bg-[--accent-9]"
           onClick={() => setIsAddDialogOpen(true)}
         >
@@ -85,10 +87,12 @@ export default new Template({}, ({ http, args }) => {
 
       {/* 搜索栏 */}
       <Box className="w-full sm:w-64 mb-6">
-        <TextField.Root 
+        <TextField.Root
           placeholder="搜索分类..."
           value={searchTerm}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setSearchTerm(e.target.value)
+          }
         >
           <TextField.Slot>
             <MagnifyingGlassIcon height="16" width="16" />
@@ -125,10 +129,11 @@ export default new Template({}, ({ http, args }) => {
                   </Table.Cell>
                   <Table.Cell>
                     <Text>
-                      {category.parentId 
-                        ? mockCategories.find(c => c.id.toString() === category.parentId)?.name 
-                        : '-'
-                      }
+                      {category.parentId
+                        ? mockCategories.find(
+                            (c) => c.id.toString() === category.parentId,
+                          )?.name
+                        : "-"}
                     </Text>
                   </Table.Cell>
                   <Table.Cell>
@@ -164,7 +169,9 @@ export default new Template({}, ({ http, args }) => {
               <TextField.Root
                 placeholder="输入分类名称"
                 value={newCategoryName}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewCategoryName(e.target.value)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewCategoryName(e.target.value)
+                }
               />
             </Box>
 
@@ -179,13 +186,12 @@ export default new Template({}, ({ http, args }) => {
               >
                 <option value="">无</option>
                 {mockCategories
-                  .filter(c => !c.parentId)
-                  .map(category => (
+                  .filter((c) => !c.parentId)
+                  .map((category) => (
                     <option key={category.id} value={category.id}>
                       {category.name}
                     </option>
-                  ))
-                }
+                  ))}
               </select>
             </Box>
           </Flex>
@@ -197,13 +203,11 @@ export default new Template({}, ({ http, args }) => {
               </Button>
             </Dialog.Close>
             <Dialog.Close>
-              <Button className="bg-[--accent-9]">
-                创建
-              </Button>
+              <Button className="bg-[--accent-9]">创建</Button>
             </Dialog.Close>
           </Flex>
         </Dialog.Content>
       </Dialog.Root>
     </Box>
   );
-}); 
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/comments.tsx b/frontend/app/dashboard/comments.tsx
index 287d2c5..9eaac47 100644
--- a/frontend/app/dashboard/comments.tsx
+++ b/frontend/app/dashboard/comments.tsx
@@ -1,10 +1,10 @@
 import { Template } from "interface/template";
-import { 
-  Container, 
-  Heading, 
-  Text, 
-  Box, 
-  Flex, 
+import {
+  Container,
+  Heading,
+  Text,
+  Box,
+  Flex,
   Table,
   Button,
   TextField,
@@ -12,7 +12,7 @@ import {
   ScrollArea,
   DataList,
   Avatar,
-  Badge
+  Badge,
 } from "@radix-ui/themes";
 import {
   MagnifyingGlassIcon,
@@ -32,7 +32,7 @@ const mockComments = [
     postTitle: "构建现代化的前端开发工作流",
     createdAt: new Date("2024-03-15"),
     status: "pending", // pending, approved, rejected
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=1"
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=1",
   },
   {
     id: 2,
@@ -41,7 +41,7 @@ const mockComments = [
     postTitle: "React 18 新特性详解",
     createdAt: new Date("2024-03-14"),
     status: "approved",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=2"
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=2",
   },
   // 可以添加更多模拟数据
 ];
@@ -51,24 +51,24 @@ export default new Template({}, ({ http, args }) => {
   const [selectedStatus, setSelectedStatus] = useState<string>("all");
 
   const getStatusStyle = (status: string) => {
-    switch(status) {
-      case 'approved':
-        return 'bg-[--green-3] text-[--green-11]';
-      case 'rejected':
-        return 'bg-[--red-3] text-[--red-11]';
+    switch (status) {
+      case "approved":
+        return "bg-[--green-3] text-[--green-11]";
+      case "rejected":
+        return "bg-[--red-3] text-[--red-11]";
       default:
-        return 'bg-[--yellow-3] text-[--yellow-11]';
+        return "bg-[--yellow-3] text-[--yellow-11]";
     }
   };
 
   const getStatusText = (status: string) => {
-    switch(status) {
-      case 'approved':
-        return '已通过';
-      case 'rejected':
-        return '已拒绝';
+    switch (status) {
+      case "approved":
+        return "已通过";
+      case "rejected":
+        return "已拒绝";
       default:
-        return '待审核';
+        return "待审核";
     }
   };
 
@@ -87,15 +87,14 @@ export default new Template({}, ({ http, args }) => {
       </Flex>
 
       {/* 搜索和筛选栏 */}
-      <Flex 
-        gap="4" 
-        className="mb-6 flex-col sm:flex-row"
-      >
+      <Flex gap="4" className="mb-6 flex-col sm:flex-row">
         <Box className="w-full sm:w-64">
-          <TextField.Root 
+          <TextField.Root
             placeholder="搜索评论..."
             value={searchTerm}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setSearchTerm(e.target.value)
+            }
           >
             <TextField.Slot>
               <MagnifyingGlassIcon height="16" width="16" />
@@ -106,20 +105,20 @@ export default new Template({}, ({ http, args }) => {
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>
             <Button variant="surface">
-              状态: {selectedStatus === 'all' ? '全部' : selectedStatus}
+              状态: {selectedStatus === "all" ? "全部" : selectedStatus}
             </Button>
           </DropdownMenu.Trigger>
           <DropdownMenu.Content>
-            <DropdownMenu.Item onClick={() => setSelectedStatus('all')}>
+            <DropdownMenu.Item onClick={() => setSelectedStatus("all")}>
               全部
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => setSelectedStatus('pending')}>
+            <DropdownMenu.Item onClick={() => setSelectedStatus("pending")}>
               待审核
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => setSelectedStatus('approved')}>
+            <DropdownMenu.Item onClick={() => setSelectedStatus("approved")}>
               已通过
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => setSelectedStatus('rejected')}>
+            <DropdownMenu.Item onClick={() => setSelectedStatus("rejected")}>
               已拒绝
             </DropdownMenu.Item>
           </DropdownMenu.Content>
@@ -158,20 +157,22 @@ export default new Template({}, ({ http, args }) => {
                       </Flex>
                     </Table.Cell>
                     <Table.Cell>
-                      <Text className="line-clamp-2">
-                        {comment.content}
-                      </Text>
+                      <Text className="line-clamp-2">{comment.content}</Text>
                     </Table.Cell>
                     <Table.Cell>
-                      <Text className="line-clamp-1">
-                        {comment.postTitle}
-                      </Text>
+                      <Text className="line-clamp-1">{comment.postTitle}</Text>
                     </Table.Cell>
                     <Table.Cell>
                       <Flex gap="2">
-                        {comment.status === 'approved' && <Badge color="green">已通过</Badge>}
-                        {comment.status === 'pending' && <Badge color="orange">待审核</Badge>}
-                        {comment.status === 'rejected' && <Badge color="red">已拒绝</Badge>}
+                        {comment.status === "approved" && (
+                          <Badge color="green">已通过</Badge>
+                        )}
+                        {comment.status === "pending" && (
+                          <Badge color="orange">待审核</Badge>
+                        )}
+                        {comment.status === "rejected" && (
+                          <Badge color="red">已拒绝</Badge>
+                        )}
                       </Flex>
                     </Table.Cell>
                     <Table.Cell>
@@ -179,25 +180,21 @@ export default new Template({}, ({ http, args }) => {
                     </Table.Cell>
                     <Table.Cell>
                       <Flex gap="2">
-                        <Button 
-                          variant="ghost" 
+                        <Button
+                          variant="ghost"
                           size="1"
                           className="text-[--green-11] hover:text-[--green-12]"
                         >
                           <CheckIcon className="w-4 h-4" />
                         </Button>
-                        <Button 
-                          variant="ghost" 
+                        <Button
+                          variant="ghost"
                           size="1"
                           className="text-[--red-11] hover:text-[--red-12]"
                         >
                           <Cross2Icon className="w-4 h-4" />
                         </Button>
-                        <Button 
-                          variant="ghost" 
-                          size="1"
-                          color="red"
-                        >
+                        <Button variant="ghost" size="1" color="red">
                           <TrashIcon className="w-4 h-4" />
                         </Button>
                       </Flex>
@@ -211,7 +208,10 @@ export default new Template({}, ({ http, args }) => {
           {/* 移动端列表视图 */}
           <div className="block sm:hidden">
             {mockComments.map((comment) => (
-              <DataList.Root key={comment.id} className="p-4 border-b border-[--gray-6] last:border-b-0">
+              <DataList.Root
+                key={comment.id}
+                className="p-4 border-b border-[--gray-6] last:border-b-0"
+              >
                 <DataList.Item>
                   <DataList.Label minWidth="88px">评论者</DataList.Label>
                   <DataList.Value>
@@ -245,9 +245,15 @@ export default new Template({}, ({ http, args }) => {
                   <DataList.Label minWidth="88px">状态</DataList.Label>
                   <DataList.Value>
                     <Flex gap="2">
-                      {comment.status === 'approved' && <Badge color="green">已通过</Badge>}
-                      {comment.status === 'pending' && <Badge color="orange">待审核</Badge>}
-                      {comment.status === 'rejected' && <Badge color="red">已拒绝</Badge>}
+                      {comment.status === "approved" && (
+                        <Badge color="green">已通过</Badge>
+                      )}
+                      {comment.status === "pending" && (
+                        <Badge color="orange">待审核</Badge>
+                      )}
+                      {comment.status === "rejected" && (
+                        <Badge color="red">已拒绝</Badge>
+                      )}
                     </Flex>
                   </DataList.Value>
                 </DataList.Item>
@@ -263,25 +269,21 @@ export default new Template({}, ({ http, args }) => {
                   <DataList.Label minWidth="88px">操作</DataList.Label>
                   <DataList.Value>
                     <Flex gap="2">
-                      <Button 
-                        variant="ghost" 
+                      <Button
+                        variant="ghost"
                         size="1"
                         className="text-[--green-11] hover:text-[--green-12]"
                       >
                         <CheckIcon className="w-4 h-4" />
                       </Button>
-                      <Button 
-                        variant="ghost" 
+                      <Button
+                        variant="ghost"
                         size="1"
                         className="text-[--red-11] hover:text-[--red-12]"
                       >
                         <Cross2Icon className="w-4 h-4" />
                       </Button>
-                      <Button 
-                        variant="ghost" 
-                        size="1"
-                        color="red"
-                      >
+                      <Button variant="ghost" size="1" color="red">
                         <TrashIcon className="w-4 h-4" />
                       </Button>
                     </Flex>
@@ -294,4 +296,4 @@ export default new Template({}, ({ http, args }) => {
       </Box>
     </Box>
   );
-}); 
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/files.tsx b/frontend/app/dashboard/files.tsx
index b9a0ee3..30477e6 100644
--- a/frontend/app/dashboard/files.tsx
+++ b/frontend/app/dashboard/files.tsx
@@ -1,17 +1,17 @@
 import { Template } from "interface/template";
-import { 
-  Container, 
-  Heading, 
-  Text, 
-  Box, 
-  Flex, 
+import {
+  Container,
+  Heading,
+  Text,
+  Box,
+  Flex,
   Table,
   Button,
   TextField,
   DropdownMenu,
   ScrollArea,
   Dialog,
-  DataList
+  DataList,
 } from "@radix-ui/themes";
 import {
   PlusIcon,
@@ -22,7 +22,7 @@ import {
   DotsHorizontalIcon,
   FileTextIcon,
   ImageIcon,
-  VideoIcon
+  VideoIcon,
 } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { Resource } from "interface/fields";
@@ -38,7 +38,7 @@ const mockFiles: Resource[] = [
     fileType: "application/pdf",
     category: "documents",
     description: "前端开发规范文档",
-    createdAt: new Date("2024-03-15")
+    createdAt: new Date("2024-03-15"),
   },
   {
     id: 2,
@@ -49,19 +49,19 @@ const mockFiles: Resource[] = [
     fileType: "image/png",
     category: "images",
     description: "项目整体架构示意图",
-    createdAt: new Date("2024-03-14")
+    createdAt: new Date("2024-03-14"),
   },
   {
     id: 3,
-    authorId: "1", 
+    authorId: "1",
     name: "API文档.md",
     sizeBytes: 1024 * 256, // 256KB
     storagePath: "/files/api-doc.md",
     fileType: "text/markdown",
     category: "documents",
     description: "API接口文档",
-    createdAt: new Date("2024-03-13")
-  }
+    createdAt: new Date("2024-03-13"),
+  },
 ];
 
 export default new Template({}, ({ http, args }) => {
@@ -71,18 +71,19 @@ export default new Template({}, ({ http, args }) => {
 
   // 格式化文件大小
   const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes';
+    if (bytes === 0) return "0 Bytes";
     const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const sizes = ["Bytes", "KB", "MB", "GB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   };
 
   // 获取文件图标
   const getFileIcon = (fileType: string) => {
-    if (fileType.startsWith('image/')) return <ImageIcon className="w-4 h-4" />;
-    if (fileType.startsWith('video/')) return <VideoIcon className="w-4 h-4" />;
-    if (fileType.startsWith('text/')) return <FileTextIcon className="w-4 h-4" />;
+    if (fileType.startsWith("image/")) return <ImageIcon className="w-4 h-4" />;
+    if (fileType.startsWith("video/")) return <VideoIcon className="w-4 h-4" />;
+    if (fileType.startsWith("text/"))
+      return <FileTextIcon className="w-4 h-4" />;
     return <FileIcon className="w-4 h-4" />;
   };
 
@@ -94,11 +95,9 @@ export default new Template({}, ({ http, args }) => {
           <Heading size="6" className="text-[--gray-12] mb-2">
             文件管理
           </Heading>
-          <Text className="text-[--gray-11]">
-            共 {mockFiles.length} 个文件
-          </Text>
+          <Text className="text-[--gray-11]">共 {mockFiles.length} 个文件</Text>
         </Box>
-        <Button 
+        <Button
           className="bg-[--accent-9]"
           onClick={() => setIsUploadDialogOpen(true)}
         >
@@ -108,15 +107,14 @@ export default new Template({}, ({ http, args }) => {
       </Flex>
 
       {/* 搜索和筛选栏 */}
-      <Flex 
-        gap="4" 
-        className="mb-6 flex-col sm:flex-row"
-      >
+      <Flex gap="4" className="mb-6 flex-col sm:flex-row">
         <Box className="w-full sm:w-64">
-          <TextField.Root 
+          <TextField.Root
             placeholder="搜索文件..."
             value={searchTerm}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setSearchTerm(e.target.value)
+            }
           >
             <TextField.Slot>
               <MagnifyingGlassIcon height="16" width="16" />
@@ -127,20 +125,20 @@ export default new Template({}, ({ http, args }) => {
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>
             <Button variant="surface">
-              类型: {selectedType === 'all' ? '全部' : selectedType}
+              类型: {selectedType === "all" ? "全部" : selectedType}
             </Button>
           </DropdownMenu.Trigger>
           <DropdownMenu.Content>
-            <DropdownMenu.Item onClick={() => setSelectedType('all')}>
+            <DropdownMenu.Item onClick={() => setSelectedType("all")}>
               全部
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => setSelectedType('documents')}>
+            <DropdownMenu.Item onClick={() => setSelectedType("documents")}>
               文档
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => setSelectedType('images')}>
+            <DropdownMenu.Item onClick={() => setSelectedType("images")}>
               图片
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => setSelectedType('others')}>
+            <DropdownMenu.Item onClick={() => setSelectedType("others")}>
               其他
             </DropdownMenu.Item>
           </DropdownMenu.Content>
@@ -172,12 +170,10 @@ export default new Template({}, ({ http, args }) => {
                         <Text className="font-medium">{file.name}</Text>
                       </Flex>
                     </Table.Cell>
-                    <Table.Cell>
-                      {formatFileSize(file.sizeBytes)}
-                    </Table.Cell>
+                    <Table.Cell>{formatFileSize(file.sizeBytes)}</Table.Cell>
                     <Table.Cell>
                       <Text className="text-[--gray-11]">
-                        {file.fileType.split('/')[1].toUpperCase()}
+                        {file.fileType.split("/")[1].toUpperCase()}
                       </Text>
                     </Table.Cell>
                     <Table.Cell>
@@ -202,7 +198,10 @@ export default new Template({}, ({ http, args }) => {
           {/* 移动端列表视图 */}
           <div className="block sm:hidden">
             {mockFiles.map((file) => (
-              <DataList.Root key={file.id} className="p-4 border-b border-[--gray-6] last:border-b-0">
+              <DataList.Root
+                key={file.id}
+                className="p-4 border-b border-[--gray-6] last:border-b-0"
+              >
                 <DataList.Item>
                   <DataList.Label minWidth="88px">文件名</DataList.Label>
                   <DataList.Value>
@@ -223,7 +222,7 @@ export default new Template({}, ({ http, args }) => {
                 <DataList.Item>
                   <DataList.Label minWidth="88px">类型</DataList.Label>
                   <DataList.Value>
-                    {file.fileType.split('/')[1].toUpperCase()}
+                    {file.fileType.split("/")[1].toUpperCase()}
                   </DataList.Value>
                 </DataList.Item>
 
@@ -254,7 +253,10 @@ export default new Template({}, ({ http, args }) => {
       </Box>
 
       {/* 上传对话框 */}
-      <Dialog.Root open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen}>
+      <Dialog.Root
+        open={isUploadDialogOpen}
+        onOpenChange={setIsUploadDialogOpen}
+      >
         <Dialog.Content style={{ maxWidth: 450 }}>
           <Dialog.Title>上传文件</Dialog.Title>
           <Dialog.Description size="2" mb="4">
@@ -272,10 +274,7 @@ export default new Template({}, ({ http, args }) => {
                 console.log(e.target.files);
               }}
             />
-            <label 
-              htmlFor="file-upload"
-              className="cursor-pointer"
-            >
+            <label htmlFor="file-upload" className="cursor-pointer">
               <FileIcon className="w-12 h-12 mx-auto mb-4 text-[--gray-9]" />
               <Text className="text-[--gray-11] mb-2">
                 拖拽文件到此处或点击上传
@@ -293,13 +292,11 @@ export default new Template({}, ({ http, args }) => {
               </Button>
             </Dialog.Close>
             <Dialog.Close>
-              <Button className="bg-[--accent-9]">
-                开始上传
-              </Button>
+              <Button className="bg-[--accent-9]">开始上传</Button>
             </Dialog.Close>
           </Flex>
         </Dialog.Content>
       </Dialog.Root>
     </Box>
   );
-}); 
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/index.tsx b/frontend/app/dashboard/index.tsx
index 4447dd1..2a25a63 100644
--- a/frontend/app/dashboard/index.tsx
+++ b/frontend/app/dashboard/index.tsx
@@ -100,13 +100,13 @@ export default new Template({}, ({ http, args }) => {
                   {stat.trend}
                 </Text>
               </Box>
-              <Box 
+              <Box
                 className="w-10 h-10 rounded-full flex items-center justify-center"
-                style={{ backgroundColor: `color-mix(in srgb, ${stat.color} 15%, transparent)` }}
+                style={{
+                  backgroundColor: `color-mix(in srgb, ${stat.color} 15%, transparent)`,
+                }}
               >
-                <Box style={{ color: stat.color }}>
-                  {stat.icon}
-                </Box>
+                <Box style={{ color: stat.color }}>{stat.icon}</Box>
               </Box>
             </Flex>
           </Card>
@@ -120,7 +120,7 @@ export default new Template({}, ({ http, args }) => {
         </Heading>
         <Box className="space-y-4">
           {recentPosts.map((post, index) => (
-            <Box 
+            <Box
               key={index}
               className="p-3 rounded-lg border border-[--gray-6] hover:border-[--accent-9] transition-colors cursor-pointer"
             >
@@ -150,14 +150,15 @@ export default new Template({}, ({ http, args }) => {
                     </Flex>
                   </Flex>
                 </Box>
-                <Box 
+                <Box
                   className={`px-2 py-1 rounded-full text-xs
-                    ${post.status === 'published' 
-                      ? 'bg-[--green-3] text-[--green-11]' 
-                      : 'bg-[--gray-3] text-[--gray-11]'
+                    ${
+                      post.status === "published"
+                        ? "bg-[--green-3] text-[--green-11]"
+                        : "bg-[--gray-3] text-[--gray-11]"
                     }`}
                 >
-                  {post.status === 'published' ? '已发布' : '草稿'}
+                  {post.status === "published" ? "已发布" : "草稿"}
                 </Box>
               </Flex>
             </Box>
@@ -166,4 +167,4 @@ export default new Template({}, ({ http, args }) => {
       </Card>
     </Box>
   );
-}); 
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/layout.tsx b/frontend/app/dashboard/layout.tsx
index ff4474b..d5db84b 100644
--- a/frontend/app/dashboard/layout.tsx
+++ b/frontend/app/dashboard/layout.tsx
@@ -159,7 +159,7 @@ export default new Layout(({ children }) => {
           {/* 主内容区域 */}
           <Box className="flex-1 flex flex-col lg:ml-0 w-full relative">
             {/* 顶部导航栏 */}
-            <Box 
+            <Box
               className={`
                 h-16 border-b border-[--gray-6] bg-[--gray-1] 
                 sticky top-0 z-20 w-full
@@ -191,7 +191,7 @@ export default new Layout(({ children }) => {
                       <HamburgerMenuIcon className="w-5 h-5" />
                     </Button>
                   )}
-                  
+
                   <Button
                     variant="ghost"
                     size="3"
@@ -209,12 +209,12 @@ export default new Layout(({ children }) => {
                   </Box>
 
                   {/* 返回主页按钮 */}
-                  <Button 
+                  <Button
                     variant="ghost"
                     size="3"
                     className="gap-2 text-base"
                     onClick={() => {
-                      window.location.href = '/';
+                      window.location.href = "/";
                     }}
                   >
                     <HomeIcon className="w-5 h-5" />
@@ -222,13 +222,13 @@ export default new Layout(({ children }) => {
                   </Button>
 
                   {/* 退出登录按钮 */}
-                  <Button 
+                  <Button
                     variant="ghost"
                     size="3"
                     className="gap-2 text-base"
                     onClick={() => {
                       // 这里添加退出登录的逻辑
-                      console.log('退出登录');
+                      console.log("退出登录");
                     }}
                   >
                     <ExitIcon className="w-5 h-5" />
@@ -239,14 +239,11 @@ export default new Layout(({ children }) => {
             </Box>
 
             {/* 页面内容区域 */}
-            <Box 
-              id="main-content" 
+            <Box
+              id="main-content"
               className="flex-1 overflow-y-auto bg-[--gray-2]"
             >
-              <Container 
-                size="4" 
-                className="py-6 px-4"
-              >
+              <Container size="4" className="py-6 px-4">
                 {children}
               </Container>
             </Box>
diff --git a/frontend/app/dashboard/login.tsx b/frontend/app/dashboard/login.tsx
index fdbc423..dd2f428 100644
--- a/frontend/app/dashboard/login.tsx
+++ b/frontend/app/dashboard/login.tsx
@@ -4,9 +4,9 @@ import { Container, Heading, Text, Box, Flex, Button } from "@radix-ui/themes";
 import { PersonIcon, LockClosedIcon } from "@radix-ui/react-icons";
 import { useEffect, useRef, useState, useMemo } from "react";
 import { gsap } from "gsap";
-import { AnimatedBackground } from 'hooks/Background';
-import { useThemeMode, ThemeModeToggle } from 'hooks/ThemeMode';
-import { useNotification } from 'hooks/Notification';
+import { AnimatedBackground } from "hooks/Background";
+import { useThemeMode, ThemeModeToggle } from "hooks/ThemeMode";
+import { useNotification } from "hooks/Notification";
 
 export default new Template({}, ({ http, args }) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -59,16 +59,16 @@ export default new Template({}, ({ http, args }) => {
 
     try {
       // 这里添加登录逻辑
-      await new Promise(resolve => setTimeout(resolve, 1500)); // 模拟API请求
-      
+      await new Promise((resolve) => setTimeout(resolve, 1500)); // 模拟API请求
+
       // 登录成功的通知
-      notification.success('登录成功', '欢迎回来！');
-      
+      notification.success("登录成功", "欢迎回来！");
+
       // 登录成功后的处理
       console.log("Login successful");
     } catch (error) {
       // 登录失败的通知
-      notification.error('登录失败', '用户名或密码错误');
+      notification.error("登录失败", "用户名或密码错误");
       console.error("Login failed:", error);
     } finally {
       setIsLoading(false);
@@ -76,29 +76,35 @@ export default new Template({}, ({ http, args }) => {
   };
 
   const handleBackgroundError = () => {
-    console.log('Background failed to load, switching to fallback');
+    console.log("Background failed to load, switching to fallback");
     setHasBackgroundError(true);
   };
 
   // 使用 useMemo 包裹背景组件
-  const backgroundComponent = useMemo(() => (
-    !hasBackgroundError && <AnimatedBackground onError={handleBackgroundError} />
-  ), [hasBackgroundError]);
+  const backgroundComponent = useMemo(
+    () =>
+      !hasBackgroundError && (
+        <AnimatedBackground onError={handleBackgroundError} />
+      ),
+    [hasBackgroundError],
+  );
 
   return (
     <div className="relative min-h-screen">
       {backgroundComponent}
-      
-      <Box 
+
+      <Box
         className="fixed top-4 right-4 z-20 w-10 h-10 flex items-center justify-center [&_button]:w-10 [&_button]:h-10 [&_svg]:w-6 [&_svg]:h-6"
-        style={{
-          '--button-color': 'var(--gray-12)',
-          '--button-hover-color': 'var(--accent-9)'
-        } as React.CSSProperties}
+        style={
+          {
+            "--button-color": "var(--gray-12)",
+            "--button-hover-color": "var(--accent-9)",
+          } as React.CSSProperties
+        }
       >
         <ThemeModeToggle />
       </Box>
-      
+
       <Container
         ref={containerRef}
         className={`relative z-10 h-screen w-full flex items-center justify-center transition-all duration-300 ${
@@ -106,11 +112,14 @@ export default new Template({}, ({ http, args }) => {
         }`}
       >
         <Box className="w-full max-w-md mx-auto px-4">
-          <Box 
+          <Box
             className="login-box backdrop-blur-sm rounded-lg shadow-lg p-8 border transition-colors duration-300"
             style={{
-              backgroundColor: mode === 'dark' ? 'var(--gray-2-alpha-80)' : 'var(--white-alpha-80)',
-              borderColor: 'var(--gray-6)'
+              backgroundColor:
+                mode === "dark"
+                  ? "var(--gray-2-alpha-80)"
+                  : "var(--white-alpha-80)",
+              borderColor: "var(--gray-6)",
             }}
           >
             {/* Logo */}
@@ -118,7 +127,6 @@ export default new Template({}, ({ http, args }) => {
               <Heading size="6" className="text-center mb-2">
                 后台
               </Heading>
-
             </Flex>
 
             {/* 登录表单 */}
@@ -151,11 +159,13 @@ export default new Template({}, ({ http, args }) => {
                 {/* 登录按钮 */}
                 <Button
                   className="login-button w-full h-10 transition-colors duration-300 hover:bg-[--hover-bg]"
-                  style={{
-                    backgroundColor: 'var(--accent-9)',
-                    color: 'white',
-                    '--hover-bg': 'var(--accent-10)'
-                  } as React.CSSProperties}
+                  style={
+                    {
+                      backgroundColor: "var(--accent-9)",
+                      color: "white",
+                      "--hover-bg": "var(--accent-10)",
+                    } as React.CSSProperties
+                  }
                   size="3"
                   type="submit"
                   disabled={isLoading}
@@ -165,13 +175,15 @@ export default new Template({}, ({ http, args }) => {
 
                 {/* 其他选项 */}
                 <Flex justify="center" className="form-element">
-                  <Text 
-                    size="2" 
+                  <Text
+                    size="2"
                     className="cursor-pointer transition-colors duration-300 hover:text-[--hover-color]"
-                    style={{
-                      color: 'var(--gray-11)',
-                      '--hover-color': 'var(--accent-9)'
-                    } as React.CSSProperties}
+                    style={
+                      {
+                        color: "var(--gray-11)",
+                        "--hover-color": "var(--accent-9)",
+                      } as React.CSSProperties
+                    }
                   >
                     忘记密码？
                   </Text>
@@ -183,4 +195,4 @@ export default new Template({}, ({ http, args }) => {
       </Container>
     </div>
   );
-}); 
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/plugins.tsx b/frontend/app/dashboard/plugins.tsx
index f5f9464..0cfeacb 100644
--- a/frontend/app/dashboard/plugins.tsx
+++ b/frontend/app/dashboard/plugins.tsx
@@ -1,10 +1,10 @@
 import { Template } from "interface/template";
-import { 
-  Container, 
-  Heading, 
-  Text, 
-  Box, 
-  Flex, 
+import {
+  Container,
+  Heading,
+  Text,
+  Box,
+  Flex,
   Card,
   Button,
   TextField,
@@ -13,7 +13,7 @@ import {
   Dialog,
   Tabs,
   Switch,
-  IconButton
+  IconButton,
 } from "@radix-ui/themes";
 import {
   PlusIcon,
@@ -25,13 +25,17 @@ import {
   CheckIcon,
   UpdateIcon,
   TrashIcon,
-  ExclamationTriangleIcon
+  ExclamationTriangleIcon,
 } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { PluginConfig } from "interface/plugin";
 
 // 模拟插件数据
-const mockPlugins: (PluginConfig & { id: number; preview?: string; installed?: boolean })[] = [
+const mockPlugins: (PluginConfig & {
+  id: number;
+  preview?: string;
+  installed?: boolean;
+})[] = [
   {
     id: 1,
     name: "comment-system",
@@ -41,7 +45,8 @@ const mockPlugins: (PluginConfig & { id: number; preview?: string; installed?: b
     author: "Admin",
     enabled: true,
     icon: "https://api.iconify.design/material-symbols:comment.svg",
-    preview: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=500&auto=format",
+    preview:
+      "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=500&auto=format",
     managePath: "/dashboard/plugins/comment-system",
     installed: true,
     configuration: {
@@ -51,11 +56,11 @@ const mockPlugins: (PluginConfig & { id: number; preview?: string; installed?: b
         data: {
           provider: "gitalk",
           clientId: "",
-          clientSecret: ""
-        }
-      }
+          clientSecret: "",
+        },
+      },
     },
-    routes: new Set()
+    routes: new Set(),
   },
   {
     id: 2,
@@ -66,7 +71,8 @@ const mockPlugins: (PluginConfig & { id: number; preview?: string; installed?: b
     author: "ThirdParty",
     enabled: false,
     icon: "https://api.iconify.design/material-symbols:image.svg",
-    preview: "https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=500&auto=format",
+    preview:
+      "https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=500&auto=format",
     installed: true,
     configuration: {
       system: {
@@ -75,12 +81,12 @@ const mockPlugins: (PluginConfig & { id: number; preview?: string; installed?: b
         data: {
           quality: 80,
           maxWidth: 1920,
-          watermark: false
-        }
-      }
+          watermark: false,
+        },
+      },
     },
-    routes: new Set()
-  }
+    routes: new Set(),
+  },
 ];
 
 // 模拟市场插件数据
@@ -104,9 +110,10 @@ const marketPlugins: MarketPlugin[] = [
     version: "1.0.0",
     description: "自动优化上传的图片，支持压缩、裁剪、水印等功能",
     author: "ThirdParty",
-    preview: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=500&auto=format",
+    preview:
+      "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=500&auto=format",
     downloads: 1200,
-    rating: 4.5
+    rating: 4.5,
   },
   {
     id: 5,
@@ -115,22 +122,25 @@ const marketPlugins: MarketPlugin[] = [
     version: "2.0.0",
     description: "增强的Markdown编辑器，支持更多扩展语法和实时预览",
     author: "ThirdParty",
-    preview: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&auto=format",
+    preview:
+      "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&auto=format",
     downloads: 3500,
-    rating: 4.8
-  }
+    rating: 4.8,
+  },
 ];
 
 export default new Template({}, ({ http, args }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const [selectedPlugin, setSelectedPlugin] = useState<typeof mockPlugins[0] | null>(null);
+  const [selectedPlugin, setSelectedPlugin] = useState<
+    (typeof mockPlugins)[0] | null
+  >(null);
 
   // 处理插件启用/禁用
   const handleTogglePlugin = (pluginId: number) => {
     // 这里添加启用/禁用插件的逻辑
-    console.log('Toggle plugin:', pluginId);
+    console.log("Toggle plugin:", pluginId);
   };
 
   return (
@@ -145,7 +155,7 @@ export default new Template({}, ({ http, args }) => {
             共 {mockPlugins.length} 个插件
           </Text>
         </Box>
-        <Button 
+        <Button
           className="bg-[--accent-9]"
           onClick={() => setIsAddDialogOpen(true)}
         >
@@ -156,10 +166,12 @@ export default new Template({}, ({ http, args }) => {
 
       {/* 搜索栏 */}
       <Box className="w-full sm:w-64 mb-6">
-        <TextField.Root 
+        <TextField.Root
           placeholder="搜索插件..."
           value={searchTerm}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setSearchTerm(e.target.value)
+          }
         >
           <TextField.Slot>
             <MagnifyingGlassIcon height="16" width="16" />
@@ -170,12 +182,15 @@ export default new Template({}, ({ http, args }) => {
       {/* 插件列表 */}
       <Box className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {mockPlugins.map((plugin) => (
-          <Card key={plugin.id} className="p-4 border border-[--gray-6] hover-card">
+          <Card
+            key={plugin.id}
+            className="p-4 border border-[--gray-6] hover-card"
+          >
             {/* 插件预览图 */}
             {plugin.preview && (
               <Box className="aspect-video mb-4 rounded-lg overflow-hidden bg-[--gray-3]">
-                <img 
-                  src={plugin.preview} 
+                <img
+                  src={plugin.preview}
                   alt={plugin.displayName}
                   className="w-full h-full object-cover"
                 />
@@ -186,7 +201,7 @@ export default new Template({}, ({ http, args }) => {
             <Flex direction="column" gap="2">
               <Flex justify="between" align="center">
                 <Heading size="3">{plugin.displayName}</Heading>
-                <Switch 
+                <Switch
                   checked={plugin.enabled}
                   onCheckedChange={() => handleTogglePlugin(plugin.id)}
                 />
@@ -203,11 +218,11 @@ export default new Template({}, ({ http, args }) => {
               {/* 操作按钮 */}
               <Flex gap="2" mt="2">
                 {plugin.managePath && plugin.enabled && (
-                  <Button 
-                    variant="soft" 
+                  <Button
+                    variant="soft"
                     className="flex-1"
                     onClick={() => {
-                      if(plugin.managePath) {
+                      if (plugin.managePath) {
                         window.location.href = plugin.managePath;
                       }
                     }}
@@ -216,11 +231,7 @@ export default new Template({}, ({ http, args }) => {
                     配置
                   </Button>
                 )}
-                <Button 
-                  variant="soft"
-                  color="red" 
-                  className="flex-1"
-                >
+                <Button variant="soft" color="red" className="flex-1">
                   <TrashIcon className="w-4 h-4" />
                   卸载
                 </Button>
@@ -249,10 +260,7 @@ export default new Template({}, ({ http, args }) => {
                   console.log(e.target.files);
                 }}
               />
-              <label 
-                htmlFor="plugin-upload"
-                className="cursor-pointer"
-              >
+              <label htmlFor="plugin-upload" className="cursor-pointer">
                 <CodeIcon className="w-12 h-12 mx-auto mb-4 text-[--gray-9]" />
                 <Text className="text-[--gray-11] mb-2">
                   点击上传插件包或拖拽到此处
@@ -271,13 +279,11 @@ export default new Template({}, ({ http, args }) => {
               </Button>
             </Dialog.Close>
             <Dialog.Close>
-              <Button className="bg-[--accent-9]">
-                开始安装
-              </Button>
+              <Button className="bg-[--accent-9]">开始安装</Button>
             </Dialog.Close>
           </Flex>
         </Dialog.Content>
       </Dialog.Root>
     </Box>
   );
-});
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/posts.tsx b/frontend/app/dashboard/posts.tsx
index fca2fba..f8e1e6c 100644
--- a/frontend/app/dashboard/posts.tsx
+++ b/frontend/app/dashboard/posts.tsx
@@ -1,17 +1,17 @@
 import { Template } from "interface/template";
-import { 
-  Container, 
-  Heading, 
-  Text, 
-  Box, 
-  Flex, 
+import {
+  Container,
+  Heading,
+  Text,
+  Box,
+  Flex,
   Table,
   Button,
   TextField,
   DropdownMenu,
   ScrollArea,
   DataList,
-  Badge
+  Badge,
 } from "@radix-ui/themes";
 import {
   PlusIcon,
@@ -40,7 +40,7 @@ const mockPosts: PostDisplay[] = [
     metaKeywords: "",
     metaDescription: "",
     categories: [{ name: "前端开发" }],
-    tags: [{ name: "工程化" }, { name: "效率提升" }]
+    tags: [{ name: "工程化" }, { name: "效率提升" }],
   },
   // ... 可以添加更多模拟数据
 ];
@@ -63,15 +63,17 @@ export default new Template({}, ({ http, args }) => {
       </Flex>
 
       {/* 搜索和筛选栏 */}
-      <Flex 
-        gap="4" 
-        className="mb-6 flex-col sm:flex-row"  // 移动端垂直布局，桌面端水平布局
+      <Flex
+        gap="4"
+        className="mb-6 flex-col sm:flex-row" // 移动端垂直布局，桌面端水平布局
       >
         <Box className="w-full sm:w-64">
-          <TextField.Root 
+          <TextField.Root
             placeholder="搜索文章..."
             value={searchTerm}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setSearchTerm(e.target.value)
+            }
           >
             <TextField.Slot side="right">
               <MagnifyingGlassIcon height="16" width="16" />
@@ -82,17 +84,17 @@ export default new Template({}, ({ http, args }) => {
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>
             <Button variant="surface">
-              状态: {selectedStatus === 'all' ? '全部' : selectedStatus}
+              状态: {selectedStatus === "all" ? "全部" : selectedStatus}
             </Button>
           </DropdownMenu.Trigger>
           <DropdownMenu.Content>
-            <DropdownMenu.Item onClick={() => setSelectedStatus('all')}>
+            <DropdownMenu.Item onClick={() => setSelectedStatus("all")}>
               全部
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => setSelectedStatus('published')}>
+            <DropdownMenu.Item onClick={() => setSelectedStatus("published")}>
               已发布
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => setSelectedStatus('draft')}>
+            <DropdownMenu.Item onClick={() => setSelectedStatus("draft")}>
               草稿
             </DropdownMenu.Item>
           </DropdownMenu.Content>
@@ -117,7 +119,10 @@ export default new Template({}, ({ http, args }) => {
               </Table.Header>
               <Table.Body>
                 {mockPosts.map((post) => (
-                  <Table.Row key={post.id} className="hover:bg-[--gray-3] block sm:table-row mb-4 sm:mb-0">
+                  <Table.Row
+                    key={post.id}
+                    className="hover:bg-[--gray-3] block sm:table-row mb-4 sm:mb-0"
+                  >
                     <Table.Cell className="font-medium block sm:table-cell py-2 sm:py-3 before:content-['标题：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
                       {post.title}
                     </Table.Cell>
@@ -127,7 +132,7 @@ export default new Template({}, ({ http, args }) => {
                     <Table.Cell className="block sm:table-cell py-2 sm:py-3 before:content-['分类：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
                       <Flex gap="2" className="inline-flex">
                         {post.categories?.map((category) => (
-                          <Text 
+                          <Text
                             key={category.name}
                             size="1"
                             className="px-2 py-0.5 bg-[--gray-4] rounded"
@@ -139,7 +144,7 @@ export default new Template({}, ({ http, args }) => {
                     </Table.Cell>
                     <Table.Cell className="block sm:table-cell py-2 sm:py-3 before:content-['状态：'] before:inline-block before:w-20 before:font-normal sm:before:content-none">
                       <Flex gap="2">
-                        {post.status === 'published' ? (
+                        {post.status === "published" ? (
                           <Badge color="green">已发布</Badge>
                         ) : (
                           <Badge color="orange">草稿</Badge>
@@ -171,7 +176,10 @@ export default new Template({}, ({ http, args }) => {
           {/* 移动端列表视图 */}
           <div className="block sm:hidden">
             {mockPosts.map((post) => (
-              <DataList.Root key={post.id} className="p-4 border-b border-[--gray-6] last:border-b-0">
+              <DataList.Root
+                key={post.id}
+                className="p-4 border-b border-[--gray-6] last:border-b-0"
+              >
                 <DataList.Item>
                   <DataList.Label minWidth="88px">标题</DataList.Label>
                   <DataList.Value>
@@ -189,7 +197,7 @@ export default new Template({}, ({ http, args }) => {
                   <DataList.Value>
                     <Flex gap="2">
                       {post.categories?.map((category) => (
-                        <Text 
+                        <Text
                           key={category.name}
                           size="1"
                           className="px-2 py-0.5 bg-[--gray-4] rounded"
@@ -205,7 +213,7 @@ export default new Template({}, ({ http, args }) => {
                   <DataList.Label minWidth="88px">状态</DataList.Label>
                   <DataList.Value>
                     <Flex gap="2">
-                      {post.status === 'published' ? (
+                      {post.status === "published" ? (
                         <Badge color="green">已发布</Badge>
                       ) : (
                         <Badge color="orange">草稿</Badge>
@@ -244,4 +252,4 @@ export default new Template({}, ({ http, args }) => {
       </Box>
     </Box>
   );
-}); 
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/settings.tsx b/frontend/app/dashboard/settings.tsx
index 378f110..c977124 100644
--- a/frontend/app/dashboard/settings.tsx
+++ b/frontend/app/dashboard/settings.tsx
@@ -1,23 +1,23 @@
 import { Template } from "interface/template";
-import { 
-  Container, 
-  Heading, 
-  Text, 
-  Box, 
-  Flex, 
+import {
+  Container,
+  Heading,
+  Text,
+  Box,
+  Flex,
   Card,
   Button,
   TextField,
   Switch,
   Tabs,
-  TextArea
+  TextArea,
 } from "@radix-ui/themes";
 import {
   GearIcon,
   PersonIcon,
   LockClosedIcon,
   BellIcon,
-  GlobeIcon
+  GlobeIcon,
 } from "@radix-ui/react-icons";
 import { useState } from "react";
 
@@ -62,7 +62,9 @@ export default new Template({}, ({ http, args }) => {
                 </Text>
                 <TextField.Root
                   value={siteName}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSiteName(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setSiteName(e.target.value)
+                  }
                 />
               </Box>
 
@@ -72,7 +74,9 @@ export default new Template({}, ({ http, args }) => {
                 </Text>
                 <TextArea
                   value={siteDescription}
-                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setSiteDescription(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setSiteDescription(e.target.value)
+                  }
                   className="min-h-[100px]"
                 />
               </Box>
@@ -81,9 +85,7 @@ export default new Template({}, ({ http, args }) => {
                 <Text as="label" size="2" weight="bold" className="block mb-2">
                   站点语言
                 </Text>
-                <select 
-                  className="w-full h-9 px-3 rounded-md bg-[--gray-1] border border-[--gray-6] text-[--gray-12]"
-                >
+                <select className="w-full h-9 px-3 rounded-md bg-[--gray-1] border border-[--gray-6] text-[--gray-12]">
                   <option value="zh-CN">简体中文</option>
                   <option value="en-US">English</option>
                 </select>
@@ -93,9 +95,7 @@ export default new Template({}, ({ http, args }) => {
                 <Text as="label" size="2" weight="bold" className="block mb-2">
                   时区设置
                 </Text>
-                <select 
-                  className="w-full h-9 px-3 rounded-md bg-[--gray-1] border border-[--gray-6] text-[--gray-12]"
-                >
+                <select className="w-full h-9 px-3 rounded-md bg-[--gray-1] border border-[--gray-6] text-[--gray-12]">
                   <option value="UTC+8">UTC+8 北京时间</option>
                   <option value="UTC+0">UTC+0 格林威治时间</option>
                 </select>
@@ -156,18 +156,9 @@ export default new Template({}, ({ http, args }) => {
                   修改密码
                 </Text>
                 <Flex direction="column" gap="2">
-                  <TextField.Root 
-                    type="password" 
-                    placeholder="当前密码" 
-                  />
-                  <TextField.Root 
-                    type="password" 
-                    placeholder="新密码" 
-                  />
-                  <TextField.Root 
-                    type="password" 
-                    placeholder="确认新密码" 
-                  />
+                  <TextField.Root type="password" placeholder="当前密码" />
+                  <TextField.Root type="password" placeholder="新密码" />
+                  <TextField.Root type="password" placeholder="确认新密码" />
                 </Flex>
               </Box>
 
@@ -196,7 +187,7 @@ export default new Template({}, ({ http, args }) => {
                       接收新评论和系统通知的邮件提醒
                     </Text>
                   </Box>
-                  <Switch 
+                  <Switch
                     checked={emailNotifications}
                     onCheckedChange={setEmailNotifications}
                   />
@@ -221,10 +212,8 @@ export default new Template({}, ({ http, args }) => {
 
       {/* 保存按钮 */}
       <Flex justify="end" className="mt-6">
-        <Button className="bg-[--accent-9]">
-          保存更改
-        </Button>
+        <Button className="bg-[--accent-9]">保存更改</Button>
       </Flex>
     </Box>
   );
-}); 
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/themes.tsx b/frontend/app/dashboard/themes.tsx
index b805418..43534d4 100644
--- a/frontend/app/dashboard/themes.tsx
+++ b/frontend/app/dashboard/themes.tsx
@@ -1,10 +1,10 @@
 import { Template } from "interface/template";
-import { 
-  Container, 
-  Heading, 
-  Text, 
-  Box, 
-  Flex, 
+import {
+  Container,
+  Heading,
+  Text,
+  Box,
+  Flex,
   Card,
   Button,
   TextField,
@@ -25,7 +25,11 @@ import { useState } from "react";
 import type { ThemeConfig } from "interface/theme";
 
 // 模拟主题数据
-const mockThemes: (ThemeConfig & { id: number; preview: string; active: boolean })[] = [
+const mockThemes: (ThemeConfig & {
+  id: number;
+  preview: string;
+  active: boolean;
+})[] = [
   {
     id: 1,
     name: "echoes",
@@ -33,7 +37,8 @@ const mockThemes: (ThemeConfig & { id: number; preview: string; active: boolean
     version: "1.0.0",
     description: "默认主题",
     author: "Admin",
-    preview: "https://images.unsplash.com/photo-1481487196290-c152efe083f5?w=500&auto=format",
+    preview:
+      "https://images.unsplash.com/photo-1481487196290-c152efe083f5?w=500&auto=format",
     templates: new Map(),
     configuration: {
       theme: {
@@ -42,44 +47,47 @@ const mockThemes: (ThemeConfig & { id: number; preview: string; active: boolean
         data: {
           colors: {
             mode: "light",
-            layout: "default"
-          }
-        }
-      }
+            layout: "default",
+          },
+        },
+      },
     },
     routes: new Map(),
-    active: true
+    active: true,
   },
   {
     id: 2,
     name: "minimal",
     displayName: "Minimal",
-    version: "1.0.0", 
+    version: "1.0.0",
     description: "简约风格主题",
     author: "Admin",
-    preview: "https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=500&auto=format",
+    preview:
+      "https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=500&auto=format",
     templates: new Map(),
     configuration: {
-        theme: {
-            title: "主题配置",
-            description: "Echoes主题配置项",
-            data: {
-              colors: {
-                mode: "light",
-                layout: "default"
-              }
-            }
-          }
+      theme: {
+        title: "主题配置",
+        description: "Echoes主题配置项",
+        data: {
+          colors: {
+            mode: "light",
+            layout: "default",
+          },
+        },
+      },
     },
     routes: new Map(),
-    active: false
-  }
+    active: false,
+  },
 ];
 
 export default new Template({}, ({ http, args }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
-  const [selectedTheme, setSelectedTheme] = useState<typeof mockThemes[0] | null>(null);
+  const [selectedTheme, setSelectedTheme] = useState<
+    (typeof mockThemes)[0] | null
+  >(null);
 
   return (
     <Box>
@@ -93,7 +101,7 @@ export default new Template({}, ({ http, args }) => {
             共 {mockThemes.length} 个主题
           </Text>
         </Box>
-        <Button 
+        <Button
           className="bg-[--accent-9]"
           onClick={() => setIsAddDialogOpen(true)}
         >
@@ -114,11 +122,14 @@ export default new Template({}, ({ http, args }) => {
       {/* 主题列表 */}
       <Box className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {mockThemes.map((theme) => (
-          <Card key={theme.id} className="p-4 border border-[--gray-6] hover-card">
+          <Card
+            key={theme.id}
+            className="p-4 border border-[--gray-6] hover-card"
+          >
             {/* 预览图 */}
             <Box className="aspect-video mb-4 rounded-lg overflow-hidden bg-[--gray-3]">
-              <img 
-                src={theme.preview} 
+              <img
+                src={theme.preview}
                 alt={theme.displayName}
                 className="w-full h-full object-cover"
               />
@@ -129,7 +140,10 @@ export default new Template({}, ({ http, args }) => {
               <Flex justify="between" align="center">
                 <Heading size="3">{theme.displayName}</Heading>
                 {theme.active && (
-                  <Text size="1" className="px-2 py-1 bg-[--accent-3] text-[--accent-9] rounded">
+                  <Text
+                    size="1"
+                    className="px-2 py-1 bg-[--accent-3] text-[--accent-9] rounded"
+                  >
                     当前使用
                   </Text>
                 )}
@@ -146,29 +160,29 @@ export default new Template({}, ({ http, args }) => {
               {/* 操作按钮 */}
               <Flex gap="2" mt="2">
                 {theme.active ? (
-                  <Button 
-                    variant="soft" 
+                  <Button
+                    variant="soft"
                     className="flex-1"
-                    onClick={() => window.location.href = `/dashboard/themes/${theme.name}/settings`}
+                    onClick={() =>
+                      (window.location.href = `/dashboard/themes/${theme.name}/settings`)
+                    }
                   >
                     <GearIcon className="w-4 h-4" />
                     配置
                   </Button>
                 ) : (
                   <>
-                    <Button 
-                      className="flex-1 bg-[--accent-9]"
-                    >
+                    <Button className="flex-1 bg-[--accent-9]">
                       <CheckIcon className="w-4 h-4" />
                       启用
                     </Button>
-                    <Button 
-                      variant="soft" 
-                      color="red" 
+                    <Button
+                      variant="soft"
+                      color="red"
                       className="flex-1"
                       onClick={() => {
                         // 这里添加卸载主题的处理逻辑
-                        console.log('卸载主题:', theme.name);
+                        console.log("卸载主题:", theme.name);
                       }}
                     >
                       <Cross2Icon className="w-4 h-4" />
@@ -201,10 +215,7 @@ export default new Template({}, ({ http, args }) => {
                   console.log(e.target.files);
                 }}
               />
-              <label 
-                htmlFor="theme-upload"
-                className="cursor-pointer"
-              >
+              <label htmlFor="theme-upload" className="cursor-pointer">
                 <CodeIcon className="w-12 h-12 mx-auto mb-4 text-[--gray-9]" />
                 <Text className="text-[--gray-11] mb-2">
                   点击上传主题包或拖拽到此处
@@ -227,4 +238,4 @@ export default new Template({}, ({ http, args }) => {
       </Dialog.Root>
     </Box>
   );
-}); 
\ No newline at end of file
+});
diff --git a/frontend/app/dashboard/users.tsx b/frontend/app/dashboard/users.tsx
index 5a44941..9bf4ea8 100644
--- a/frontend/app/dashboard/users.tsx
+++ b/frontend/app/dashboard/users.tsx
@@ -1,10 +1,10 @@
 import { Template } from "interface/template";
-import { 
-  Container, 
-  Heading, 
-  Text, 
-  Box, 
-  Flex, 
+import {
+  Container,
+  Heading,
+  Text,
+  Box,
+  Flex,
   Table,
   Button,
   TextField,
@@ -12,7 +12,7 @@ import {
   Dialog,
   Avatar,
   DropdownMenu,
-  Badge
+  Badge,
 } from "@radix-ui/themes";
 import {
   PlusIcon,
@@ -22,7 +22,7 @@ import {
   PersonIcon,
   DotsHorizontalIcon,
   LockClosedIcon,
-  ExclamationTriangleIcon
+  ExclamationTriangleIcon,
 } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { User } from "interface/fields";
@@ -55,36 +55,38 @@ const mockUsers: (User & { id: number })[] = [
     id: 3,
     username: "user",
     email: "user@example.com",
-    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=3", 
+    avatarUrl: "https://api.dicebear.com/7.x/avataaars/svg?seed=3",
     role: "user",
     createdAt: new Date("2024-03-01"),
     updatedAt: new Date("2024-03-13"),
     lastLoginAt: new Date("2024-03-13"),
     passwordHash: "",
-  }
+  },
 ];
 
 export default new Template({}, ({ http, args }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<typeof mockUsers[0] | null>(null);
+  const [selectedUser, setSelectedUser] = useState<
+    (typeof mockUsers)[0] | null
+  >(null);
   const [newUserData, setNewUserData] = useState({
     username: "",
     email: "",
     password: "",
-    role: "user"
+    role: "user",
   });
 
   // 获取角色标签样式
   const getRoleBadgeColor = (role: string) => {
-    switch(role) {
-      case 'admin':
-        return 'red';
-      case 'editor':
-        return 'blue';
+    switch (role) {
+      case "admin":
+        return "red";
+      case "editor":
+        return "blue";
       default:
-        return 'gray';
+        return "gray";
     }
   };
 
@@ -96,11 +98,9 @@ export default new Template({}, ({ http, args }) => {
           <Heading size="6" className="text-[--gray-12] mb-2">
             用户管理
           </Heading>
-          <Text className="text-[--gray-11]">
-            共 {mockUsers.length} 个用户
-          </Text>
+          <Text className="text-[--gray-11]">共 {mockUsers.length} 个用户</Text>
         </Box>
-        <Button 
+        <Button
           className="bg-[--accent-9]"
           onClick={() => setIsAddDialogOpen(true)}
         >
@@ -111,10 +111,12 @@ export default new Template({}, ({ http, args }) => {
 
       {/* 搜索栏 */}
       <Box className="w-full sm:w-64 mb-6">
-        <TextField.Root 
+        <TextField.Root
           placeholder="搜索用户..."
           value={searchTerm}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setSearchTerm(e.target.value)
+          }
         >
           <TextField.Slot>
             <MagnifyingGlassIcon height="16" width="16" />
@@ -157,16 +159,14 @@ export default new Template({}, ({ http, args }) => {
                       {user.role}
                     </Badge>
                   </Table.Cell>
-                  <Table.Cell>
-                    {user.createdAt.toLocaleDateString()}
-                  </Table.Cell>
+                  <Table.Cell>{user.createdAt.toLocaleDateString()}</Table.Cell>
                   <Table.Cell>
                     {user.lastLoginAt?.toLocaleDateString()}
                   </Table.Cell>
                   <Table.Cell>
                     <Flex gap="2">
-                      <Button 
-                        variant="ghost" 
+                      <Button
+                        variant="ghost"
                         size="1"
                         onClick={() => {
                           setSelectedUser(user);
@@ -203,8 +203,8 @@ export default new Template({}, ({ http, args }) => {
               <TextField.Root
                 placeholder="输入用户名"
                 value={newUserData.username}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
-                  setNewUserData({...newUserData, username: e.target.value})
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewUserData({ ...newUserData, username: e.target.value })
                 }
               />
             </Box>
@@ -216,8 +216,8 @@ export default new Template({}, ({ http, args }) => {
               <TextField.Root
                 placeholder="输入邮箱"
                 value={newUserData.email}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
-                  setNewUserData({...newUserData, email: e.target.value})
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewUserData({ ...newUserData, email: e.target.value })
                 }
               />
             </Box>
@@ -230,8 +230,8 @@ export default new Template({}, ({ http, args }) => {
                 type="password"
                 placeholder="输入密码"
                 value={newUserData.password}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
-                  setNewUserData({...newUserData, password: e.target.value})
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewUserData({ ...newUserData, password: e.target.value })
                 }
               />
             </Box>
@@ -243,7 +243,9 @@ export default new Template({}, ({ http, args }) => {
               <select
                 className="w-full h-9 px-3 rounded-md bg-[--gray-1] border border-[--gray-6] text-[--gray-12]"
                 value={newUserData.role}
-                onChange={(e) => setNewUserData({...newUserData, role: e.target.value})}
+                onChange={(e) =>
+                  setNewUserData({ ...newUserData, role: e.target.value })
+                }
               >
                 <option value="user">普通用户</option>
                 <option value="editor">编辑</option>
@@ -259,9 +261,7 @@ export default new Template({}, ({ http, args }) => {
               </Button>
             </Dialog.Close>
             <Dialog.Close>
-              <Button className="bg-[--accent-9]">
-                创建
-              </Button>
+              <Button className="bg-[--accent-9]">创建</Button>
             </Dialog.Close>
           </Flex>
         </Dialog.Content>
@@ -279,25 +279,36 @@ export default new Template({}, ({ http, args }) => {
 
               <Flex direction="column" gap="4">
                 <Box>
-                  <Text as="label" size="2" weight="bold" className="block mb-2">
+                  <Text
+                    as="label"
+                    size="2"
+                    weight="bold"
+                    className="block mb-2"
+                  >
                     用户名
                   </Text>
-                  <TextField.Root
-                    defaultValue={selectedUser.username}
-                  />
+                  <TextField.Root defaultValue={selectedUser.username} />
                 </Box>
 
                 <Box>
-                  <Text as="label" size="2" weight="bold" className="block mb-2">
+                  <Text
+                    as="label"
+                    size="2"
+                    weight="bold"
+                    className="block mb-2"
+                  >
                     邮箱
                   </Text>
-                  <TextField.Root
-                    defaultValue={selectedUser.email}
-                  />
+                  <TextField.Root defaultValue={selectedUser.email} />
                 </Box>
 
                 <Box>
-                  <Text as="label" size="2" weight="bold" className="block mb-2">
+                  <Text
+                    as="label"
+                    size="2"
+                    weight="bold"
+                    className="block mb-2"
+                  >
                     角色
                   </Text>
                   <select
@@ -311,13 +322,15 @@ export default new Template({}, ({ http, args }) => {
                 </Box>
 
                 <Box>
-                  <Text as="label" size="2" weight="bold" className="block mb-2">
+                  <Text
+                    as="label"
+                    size="2"
+                    weight="bold"
+                    className="block mb-2"
+                  >
                     重置密码
                   </Text>
-                  <TextField.Root
-                    type="password"
-                    placeholder="留空则不修改"
-                  />
+                  <TextField.Root type="password" placeholder="留空则不修改" />
                 </Box>
               </Flex>
 
@@ -328,9 +341,7 @@ export default new Template({}, ({ http, args }) => {
                   </Button>
                 </Dialog.Close>
                 <Dialog.Close>
-                  <Button className="bg-[--accent-9]">
-                    保存
-                  </Button>
+                  <Button className="bg-[--accent-9]">保存</Button>
                 </Dialog.Close>
               </Flex>
             </>
diff --git a/frontend/app/entry.client.tsx b/frontend/app/entry.client.tsx
index 84ae194..ca8c625 100644
--- a/frontend/app/entry.client.tsx
+++ b/frontend/app/entry.client.tsx
@@ -9,8 +9,5 @@ import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {
-  hydrateRoot(
-    document,
-    <RemixBrowser />,
-  );
+  hydrateRoot(document, <RemixBrowser />);
 });
diff --git a/frontend/app/init.tsx b/frontend/app/init.tsx
index 24ff01f..eb9ab1f 100644
--- a/frontend/app/init.tsx
+++ b/frontend/app/init.tsx
@@ -490,16 +490,16 @@ export default function SetupPage() {
   useEffect(() => {
     // 标记客户端渲染完成
     setIsClient(true);
-    
+
     // 获取初始化状态
     const initStatus = Number(import.meta.env.VITE_INIT_STATUS ?? 0);
-    
+
     // 如果已完成初始化，直接刷新页面
     if (initStatus >= 3) {
       window.location.reload();
       return;
     }
-    
+
     // 否则设置当前步骤
     setCurrentStep(initStatus + 1);
   }, []);
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
deleted file mode 100644
index 1796bc1..0000000
--- a/frontend/app/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-import React from "react";
-import GrowingTree from "../hooks/tide";
-
-export default function Page() {
-  return (
-    <div style={{ position: "relative", minHeight: "100vh" }}>
-      <GrowingTree />
-    </div>
-  );
-}
diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
index 2a2419e..31f8aec 100644
--- a/frontend/app/root.tsx
+++ b/frontend/app/root.tsx
@@ -13,36 +13,13 @@ import "~/index.css";
 
 export function Layout() {
   return (
-    <html
-      lang="en"
-      className="h-full"
-      suppressHydrationWarning={true}
-    >
+    <html lang="en" className="h-full" suppressHydrationWarning={true}>
       <head>
         <meta charSet="utf-8" />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1"
-        />
-        <meta
-          name="generator"
-          content="echoes"
-        />
-        <meta
-          httpEquiv="Cache-Control"
-          content="no-cache, no-store, must-revalidate"
-        />
-        <meta
-          httpEquiv="Pragma"
-          content="no-cache"
-        />
-        <meta
-          httpEquiv="Expires"
-          content="0"
-        />
+        <meta httpEquiv="Expires" content="0" />
 
         <title>Echoes</title>
-        <ThemeScript/>
+        <ThemeScript />
         <Meta />
         <Links />
       </head>
@@ -51,11 +28,7 @@ export function Layout() {
         suppressHydrationWarning={true}
         data-cz-shortcut-listen="false"
       >
-        <Theme
-          grayColor="slate"
-          radius="medium"
-          scaling="100%"
-        >
+        <Theme grayColor="slate" radius="medium" scaling="100%">
           <NotificationProvider>
             <Outlet />
           </NotificationProvider>
@@ -70,4 +43,3 @@ export function Layout() {
 export default function App() {
   return <Layout />;
 }
-
diff --git a/frontend/app/routes.tsx b/frontend/app/routes.tsx
index 2fbd81d..cce248a 100644
--- a/frontend/app/routes.tsx
+++ b/frontend/app/routes.tsx
@@ -66,7 +66,7 @@ const Routes = memo(() => {
       if (!subPath) {
         return renderDashboardContent(dashboard);
       }
-      
+
       // 根据子路径返回对应的管理页面
       switch (subPath) {
         case "posts":
diff --git a/frontend/core/http.ts b/frontend/core/http.ts
index 8406a4a..a909eda 100644
--- a/frontend/core/http.ts
+++ b/frontend/core/http.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_CONFIG } from "~/env";
 export interface ErrorResponse {
   title: string;
   message: string;
@@ -73,18 +74,17 @@ export class HttpClient {
   private async request<T>(
     endpoint: string,
     options: RequestInit = {},
-    prefix = "api",
+    url: string,
   ): Promise<T> {
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), this.timeout);
 
     try {
       const config = await this.setHeaders(options);
-      const url = endpoint.startsWith(`/__/${prefix}`)
-        ? endpoint
-        : `/__/${prefix}${endpoint.startsWith("/") ? endpoint : `/${endpoint}`}`;
+      const baseUrl = url.startsWith("http") ? url : `http://${url}`;
+      const newUrl = new URL(endpoint, baseUrl);
 
-      const response = await fetch(url, {
+      const response = await fetch(newUrl, {
         ...config,
         signal: controller.signal,
         credentials: "include",
@@ -116,11 +116,16 @@ export class HttpClient {
   }
 
   public async api<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
-    return this.request<T>(endpoint, options, "api");
+    const url =
+      import.meta.env.VITE_API_BASE_URL ?? DEFAULT_CONFIG.VITE_API_BASE_URL;
+    return this.request<T>(endpoint, options, url);
   }
 
   public async dev<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
-    return this.request<T>(endpoint, options, "express");
+    const address = import.meta.env.VITE_ADDRESS ?? DEFAULT_CONFIG.VITE_ADDRESS;
+    const port =
+      Number(import.meta.env.VITE_PORT ?? DEFAULT_CONFIG.VITE_PORT) + 1;
+    return this.request<T>(endpoint, options, `${address}:${port}`);
   }
 
   public async get<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
diff --git a/frontend/hooks/Background.tsx b/frontend/hooks/Background.tsx
index 22363ef..8b8645c 100644
--- a/frontend/hooks/Background.tsx
+++ b/frontend/hooks/Background.tsx
@@ -1,119 +1,121 @@
-import { useEffect, useRef, memo } from 'react';
-import { useThemeMode } from 'hooks/ThemeMode';
+import { useEffect, useRef, memo } from "react";
+import { useThemeMode } from "hooks/ThemeMode";
 
 interface AnimatedBackgroundProps {
   onError?: () => void;
 }
 
-export const AnimatedBackground = memo(({ onError }: AnimatedBackgroundProps) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const { mode } = useThemeMode();
+export const AnimatedBackground = memo(
+  ({ onError }: AnimatedBackgroundProps) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const { mode } = useThemeMode();
 
-  useEffect(() => {
-    
-    const canvas = canvasRef.current;
-    if (!canvas) {
-      onError?.();
-      return;
-    }
-
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-
-    try {
-      const ctx = canvas.getContext('2d', { 
-        alpha: true,
-        desynchronized: true
-      });
-      
-      if (!ctx) {
-        console.error('无法获取 canvas context');
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) {
         onError?.();
         return;
       }
 
-      const context = ctx;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
 
-      const getRandomHSLColor = () => {
-        const hue = Math.random() * 360;
-        const saturation = 90 + Math.random() * 10;
-        const lightness = mode === 'dark' 
-          ? 50 + Math.random() * 15  // 暗色模式：50-65%
-          : 60 + Math.random() * 15; // 亮色模式：60-75%
-        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-      };
+      try {
+        const ctx = canvas.getContext("2d", {
+          alpha: true,
+          desynchronized: true,
+        });
 
-      const ballColor = getRandomHSLColor();
-      let ballRadius = 100;
-      let x = canvas.width / 2;
-      let y = canvas.height - 200;
-      let dx = 0.2;
-      let dy = -0.2;
+        if (!ctx) {
+          console.error("无法获取 canvas context");
+          onError?.();
+          return;
+        }
 
-      function drawBall() {
-        context.beginPath();
-        context.arc(x, y, ballRadius, 0, Math.PI * 2);
-        context.fillStyle = ballColor;
-        context.fill();
-        context.closePath();
+        const context = ctx;
+
+        const getRandomHSLColor = () => {
+          const hue = Math.random() * 360;
+          const saturation = 90 + Math.random() * 10;
+          const lightness =
+            mode === "dark"
+              ? 50 + Math.random() * 15 // 暗色模式：50-65%
+              : 60 + Math.random() * 15; // 亮色模式：60-75%
+          return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+        };
+
+        const ballColor = getRandomHSLColor();
+        let ballRadius = 100;
+        let x = canvas.width / 2;
+        let y = canvas.height - 200;
+        let dx = 0.2;
+        let dy = -0.2;
+
+        function drawBall() {
+          context.beginPath();
+          context.arc(x, y, ballRadius, 0, Math.PI * 2);
+          context.fillStyle = ballColor;
+          context.fill();
+          context.closePath();
+        }
+
+        const fps = 30;
+        const interval = 1000 / fps;
+        let then = Date.now();
+
+        const draw = () => {
+          const now = Date.now();
+          const delta = now - then;
+
+          if (delta > interval) {
+            then = now - (delta % interval);
+
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            drawBall();
+
+            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+              dx = -dx;
+            }
+            if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
+              dy = -dy;
+            }
+
+            x += dx;
+            y += dy;
+          }
+
+          animationFrameId = requestAnimationFrame(draw);
+        };
+
+        let animationFrameId: number;
+        draw();
+
+        return () => {
+          if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId);
+          }
+        };
+      } catch (error) {
+        console.error("Canvas 初始化失败:", error);
+        onError?.();
+        return;
       }
+    }, [mode, onError]);
 
-      const fps = 30;
-      const interval = 1000 / fps;
-      let then = Date.now();
-
-      const draw = () => {
-        const now = Date.now();
-        const delta = now - then;
-
-        if (delta > interval) {
-          then = now - (delta % interval);
-
-          context.clearRect(0, 0, canvas.width, canvas.height);
-          drawBall();
-          
-          if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
-            dx = -dx;
-          }
-          if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
-            dy = -dy;
-          }
-
-          x += dx;
-          y += dy;
-        }
-
-        animationFrameId = requestAnimationFrame(draw);
-      };
-
-      let animationFrameId: number;
-      draw();
-
-      return () => {
-        if (animationFrameId) {
-          cancelAnimationFrame(animationFrameId);
-        }
-      };
-    } catch (error) {
-      console.error('Canvas 初始化失败:', error);
-      onError?.();
-      return;
-    }
-  }, [mode, onError]);
-
-  return (
-    <div className="fixed inset-0 -z-10 overflow-hidden">
-      <canvas
-        ref={canvasRef}
-        className="w-full h-full opacity-70"
-        style={{ 
-          filter: 'blur(100px)',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          willChange: 'transform'
-        }}
-      />
-    </div>
-  );
-}); 
\ No newline at end of file
+    return (
+      <div className="fixed inset-0 -z-10 overflow-hidden">
+        <canvas
+          ref={canvasRef}
+          className="w-full h-full opacity-70"
+          style={{
+            filter: "blur(100px)",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            willChange: "transform",
+          }}
+        />
+      </div>
+    );
+  },
+);
diff --git a/frontend/hooks/ParticleImage.tsx b/frontend/hooks/ParticleImage.tsx
index c085518..18d68ef 100644
--- a/frontend/hooks/ParticleImage.tsx
+++ b/frontend/hooks/ParticleImage.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
-import * as THREE from 'three';
-import { gsap } from 'gsap';
-import throttle from 'lodash/throttle';
+import { useEffect, useRef, useState, useCallback } from "react";
+import * as THREE from "three";
+import { gsap } from "gsap";
+import throttle from "lodash/throttle";
 
 interface Particle {
   x: number;
@@ -22,7 +22,7 @@ const createErrorParticles = (width: number, height: number) => {
   const particles: Particle[] = [];
   const positionArray: number[] = [];
   const colorArray: number[] = [];
-  
+
   const errorColor = new THREE.Color(0.8, 0, 0);
   const size = Math.min(width, height);
   const scaleFactor = size * 0.35;
@@ -33,10 +33,10 @@ const createErrorParticles = (width: number, height: number) => {
     // 左上到右下的线
     { start: [-1, 1], end: [1, -1] },
     // 右上到左下的线
-    { start: [1, 1], end: [-1, -1] }
+    { start: [1, 1], end: [-1, -1] },
   ];
 
-  lines.forEach(line => {
+  lines.forEach((line) => {
     for (let i = 0; i < particlesPerLine; i++) {
       const t = i / (particlesPerLine - 1);
       const x = line.start[0] + (line.end[0] - line.start[0]) * t;
@@ -57,7 +57,7 @@ const createErrorParticles = (width: number, height: number) => {
         originalX: scaledX,
         originalY: scaledY,
         originalColor: errorColor,
-        delay: 0
+        delay: 0,
       });
 
       // 修改初始位置生成方式
@@ -66,16 +66,20 @@ const createErrorParticles = (width: number, height: number) => {
       positionArray.push(
         Math.cos(angle) * distance,
         Math.sin(angle) * distance,
-        0
+        0,
       );
 
       // 初始颜色设置为最终颜色的一半亮度
-      colorArray.push(errorColor.r * 0.5, errorColor.g * 0.5, errorColor.b * 0.5);
+      colorArray.push(
+        errorColor.r * 0.5,
+        errorColor.g * 0.5,
+        errorColor.b * 0.5,
+      );
     }
   });
 
   const particleSize = Math.max(1.2, (size / 200) * 1.2);
-  
+
   return { particles, positionArray, colorArray, particleSize };
 };
 
@@ -84,7 +88,7 @@ const createSmileParticles = (width: number, height: number) => {
   const particles: Particle[] = [];
   const positionArray: number[] = [];
   const colorArray: number[] = [];
-  
+
   const size = Math.min(width, height);
   const scale = size / 200;
   const radius = size * 0.4;
@@ -96,14 +100,14 @@ const createSmileParticles = (width: number, height: number) => {
 
   // 计算脸部轮廓的点
   const outlinePoints = Math.floor(60 * scale);
-  const offsetX = radius * 0.05;  // 添加水平偏移
-  const offsetY = radius * 0.05;  // 添加垂直偏移
+  const offsetX = radius * 0.05; // 添加水平偏移
+  const offsetY = radius * 0.05; // 添加垂直偏移
 
   for (let i = 0; i < outlinePoints; i++) {
     const angle = (i / outlinePoints) * Math.PI * 2;
     allPoints.push({
       x: Math.cos(angle) * radius + offsetX,
-      y: Math.sin(angle) * radius + offsetY
+      y: Math.sin(angle) * radius + offsetY,
     });
   }
 
@@ -113,28 +117,28 @@ const createSmileParticles = (width: number, height: number) => {
   const eyeSize = radius * 0.1; // 稍微减小眼睛尺寸
   const eyePoints = Math.floor(20 * scale);
 
-  [-1, 1].forEach(side => {
+  [-1, 1].forEach((side) => {
     // 使用同心圆的方式生成眼睛
     const eyeCenterX = side * eyeOffset + offsetX;
     const rings = 3; // 同心圆的数量
-    
+
     for (let ring = 0; ring < rings; ring++) {
       const ringRadius = eyeSize * (1 - ring / rings); // 从外到内递减半径
       const pointsInRing = Math.floor(eyePoints / rings);
-      
+
       for (let i = 0; i < pointsInRing; i++) {
         const angle = (i / pointsInRing) * Math.PI * 2;
         allPoints.push({
           x: eyeCenterX + Math.cos(angle) * ringRadius,
-          y: eyeY + Math.sin(angle) * ringRadius
+          y: eyeY + Math.sin(angle) * ringRadius,
         });
       }
     }
-    
+
     // 添加中心点
     allPoints.push({
       x: eyeCenterX,
-      y: eyeY
+      y: eyeY,
     });
   });
 
@@ -151,7 +155,7 @@ const createSmileParticles = (width: number, height: number) => {
   }
 
   // 为所有点创建粒子
-  allPoints.forEach(point => {
+  allPoints.forEach((point) => {
     particles.push({
       x: point.x,
       y: point.y,
@@ -159,7 +163,7 @@ const createSmileParticles = (width: number, height: number) => {
       originalX: point.x,
       originalY: point.y,
       originalColor: particleColor,
-      delay: 0
+      delay: 0,
     });
 
     // 生成初始位置（从外围圆形区域开始）
@@ -168,14 +172,14 @@ const createSmileParticles = (width: number, height: number) => {
     positionArray.push(
       Math.cos(initAngle) * distance,
       Math.sin(initAngle) * distance,
-      0
+      0,
     );
-    
+
     // 初始颜色设置为最终颜色的一半亮度
     colorArray.push(
       particleColor.r * 0.5,
       particleColor.g * 0.5,
-      particleColor.b * 0.5
+      particleColor.b * 0.5,
     );
   });
 
@@ -188,9 +192,7 @@ const easeOutCubic = (t: number) => {
 };
 
 const customEase = (t: number) => {
-  return t < 0.5
-    ? 4 * t * t * t
-    : 1 - Math.pow(-2 * t + 2, 3) / 2;
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 };
 
 // 在文件开头添加新的 LoaderStatus 接口
@@ -210,7 +212,8 @@ interface ParticleImageProps {
 
 // 修改 BG_CONFIG，添加尺寸配置
 const BG_CONFIG = {
-  className: 'bg-gradient-to-br from-[rgb(248,250,252)] via-[rgb(241,245,249)] to-[rgb(236,241,247)] dark:from-[rgb(10,37,77)] dark:via-[rgb(8,27,57)] dark:to-[rgb(2,8,23)]'
+  className:
+    "bg-gradient-to-br from-[rgb(248,250,252)] via-[rgb(241,245,249)] to-[rgb(236,241,247)] dark:from-[rgb(10,37,77)] dark:via-[rgb(8,27,57)] dark:to-[rgb(2,8,23)]",
 };
 
 // 修改采样率和粒子大小计算函数
@@ -218,15 +221,15 @@ const getOptimalImageParams = (width: number, height: number) => {
   const totalPixels = width * height;
   const pixelRatio = window.devicePixelRatio || 1;
   const isMobile = window.innerWidth <= 768;
-  
+
   // 移动端使用更大的采样间隔来减少数量
-  let samplingGap = isMobile 
-    ? Math.ceil(Math.max(width, height) / 60)  // 移动端降低采样密度
+  let samplingGap = isMobile
+    ? Math.ceil(Math.max(width, height) / 60) // 移动端降低采样密度
     : Math.ceil(Math.max(width, height) / 120); // 桌面端保持较高采密度
-    
+
   // 限制最小采样间隔，避免粒子过多
   samplingGap = Math.max(samplingGap, isMobile ? 4 : 2);
-  
+
   // 计算粒子大小
   const size = Math.min(width, height);
   const scale = size / 200;
@@ -234,14 +237,14 @@ const getOptimalImageParams = (width: number, height: number) => {
   const particleSize = isMobile
     ? Math.max(2, scale * 2.2)
     : Math.max(1.5, scale * (1.8 / pixelRatio));
-  
-  return { 
-    samplingGap, 
+
+  return {
+    samplingGap,
     particleSize,
     // 移动端使用较短的动画时间减少性能开销
     animationDuration: isMobile ? 0.6 : 0.8,
     // 移动端减少延迟时间，使动画更快完成
-    delayMultiplier: isMobile ? 0.3 : 0.6
+    delayMultiplier: isMobile ? 0.3 : 0.6,
   };
 };
 
@@ -251,7 +254,7 @@ const cleanupResources = (scene: THREE.Scene) => {
     if (object instanceof THREE.Points) {
       const geometry = object.geometry;
       const material = object.material as THREE.PointsMaterial;
-      
+
       // 清空几何体缓冲区
       if (geometry.attributes.position) {
         geometry.attributes.position.array = new Float32Array(0);
@@ -259,23 +262,23 @@ const cleanupResources = (scene: THREE.Scene) => {
       if (geometry.attributes.color) {
         geometry.attributes.color.array = new Float32Array(0);
       }
-      
+
       geometry.dispose();
       material.dispose();
-      
+
       // 移除所有属性
-      geometry.deleteAttribute('position');
-      geometry.deleteAttribute('color');
+      geometry.deleteAttribute("position");
+      geometry.deleteAttribute("color");
     }
   });
   scene.clear();
 };
 
-export const ParticleImage = ({ 
-  src, 
+export const ParticleImage = ({
+  src,
   status,
   onLoad,
-  onAnimationComplete 
+  onAnimationComplete,
 }: ParticleImageProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const sceneRef = useRef<THREE.Scene>();
@@ -289,96 +292,107 @@ export const ParticleImage = ({
   const isMountedRef = useRef(true);
 
   // 修改动画控制函数
-  const startAnimation = useCallback((
-    positionAttribute: THREE.BufferAttribute,
-    particles: Particle[],
-    width: number,
-    height: number
-  ) => {
-    if (isAnimatingRef.current) return;
-    isAnimatingRef.current = true;
+  const startAnimation = useCallback(
+    (
+      positionAttribute: THREE.BufferAttribute,
+      particles: Particle[],
+      width: number,
+      height: number,
+    ) => {
+      if (isAnimatingRef.current) return;
+      isAnimatingRef.current = true;
 
-    const { animationDuration, delayMultiplier } = getOptimalImageParams(width, height);
-    const animations: gsap.core.Tween[] = [];
-    
-    // 获取当前场景中的 Points 对象
-    const points = sceneRef.current?.children[0] as THREE.Points;
-    if (!points) return;
-    
-    const material = points.material as THREE.PointsMaterial;
-
-    // 添加材质透明度动画
-    const materialTween = gsap.to(material, {
-      opacity: 1,
-      duration: 0.3,
-      ease: "power2.out"
-    });
-    animations.push(materialTween);
-
-    particles.forEach((particle, i) => {
-      const i3 = i * 3;
-      const distanceToCenter = Math.sqrt(
-        Math.pow(particle.originalX, 2) + 
-        Math.pow(particle.originalY, 2)
+      const { animationDuration, delayMultiplier } = getOptimalImageParams(
+        width,
+        height,
       );
-      const maxDistance = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
-      const normalizedDistance = distanceToCenter / maxDistance;
-      
-      const tween = gsap.to(positionAttribute.array, {
-        duration: animationDuration,
-        delay: normalizedDistance * delayMultiplier,
-        [i3]: particle.originalX,
-        [i3 + 1]: particle.originalY,
-        [i3 + 2]: 0,
-        ease: "power2.inOut",
-        onUpdate: () => {
-          positionAttribute.needsUpdate = true;
-        }
-      });
-      animations.push(tween);
-    });
+      const animations: gsap.core.Tween[] = [];
 
-    if (animationTimeoutRef.current) {
-      clearTimeout(animationTimeoutRef.current);
-    }
+      // 获取当前场景中的 Points 对象
+      const points = sceneRef.current?.children[0] as THREE.Points;
+      if (!points) return;
 
-    const maxDelay = Math.max(...animations.map(tween => tween.delay() || 0));
-    
-    // 在动画即将结束时开始淡出粒子
-    const fadeOutDelay = (maxDelay + animationDuration) * 1000 - 200;
-    
-    setTimeout(() => {
-      gsap.to(material, {
-        opacity: 0,
+      const material = points.material as THREE.PointsMaterial;
+
+      // 添加材质透明度动画
+      const materialTween = gsap.to(material, {
+        opacity: 1,
         duration: 0.3,
-        ease: "power2.in"
+        ease: "power2.out",
       });
-    }, fadeOutDelay);
+      animations.push(materialTween);
 
-    // 确保在粒子完全消失后才触发完成回调
-    animationTimeoutRef.current = setTimeout(() => {
-      requestAnimationFrame(() => {
-        isAnimatingRef.current = false;
-        if (onAnimationComplete) {
-          onAnimationComplete();
-        }
+      particles.forEach((particle, i) => {
+        const i3 = i * 3;
+        const distanceToCenter = Math.sqrt(
+          Math.pow(particle.originalX, 2) + Math.pow(particle.originalY, 2),
+        );
+        const maxDistance = Math.sqrt(
+          Math.pow(width / 2, 2) + Math.pow(height / 2, 2),
+        );
+        const normalizedDistance = distanceToCenter / maxDistance;
+
+        const tween = gsap.to(positionAttribute.array, {
+          duration: animationDuration,
+          delay: normalizedDistance * delayMultiplier,
+          [i3]: particle.originalX,
+          [i3 + 1]: particle.originalY,
+          [i3 + 2]: 0,
+          ease: "power2.inOut",
+          onUpdate: () => {
+            positionAttribute.needsUpdate = true;
+          },
+        });
+        animations.push(tween);
       });
-    }, fadeOutDelay + 300);
-  }, [onAnimationComplete]);
+
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+
+      const maxDelay = Math.max(
+        ...animations.map((tween) => tween.delay() || 0),
+      );
+
+      // 在动画即将结束时开始淡出粒子
+      const fadeOutDelay = (maxDelay + animationDuration) * 1000 - 200;
+
+      setTimeout(() => {
+        gsap.to(material, {
+          opacity: 0,
+          duration: 0.3,
+          ease: "power2.in",
+        });
+      }, fadeOutDelay);
+
+      // 确保在粒子完全消失后才触发完成回调
+      animationTimeoutRef.current = setTimeout(() => {
+        requestAnimationFrame(() => {
+          isAnimatingRef.current = false;
+          if (onAnimationComplete) {
+            onAnimationComplete();
+          }
+        });
+      }, fadeOutDelay + 300);
+    },
+    [onAnimationComplete],
+  );
 
   // 修改清理函数
   const cleanup = useCallback(() => {
     if (!isMountedRef.current) return;
 
     // 检查是否应该跳过清理
-    if (sceneRef.current?.userData.isSmileComplete || 
-        sceneRef.current?.userData.isErrorComplete) {
+    if (
+      sceneRef.current?.userData.isSmileComplete ||
+      sceneRef.current?.userData.isErrorComplete
+    ) {
       return;
     }
 
     // 清理动画状态
     isAnimatingRef.current = false;
-    
+
     // 清理超时
     if (animationTimeoutRef.current) {
       clearTimeout(animationTimeoutRef.current);
@@ -391,50 +405,61 @@ export const ParticleImage = ({
     }
 
     // 清理 GSAP 动画
-    gsap.killTweensOf('*');
+    gsap.killTweensOf("*");
 
     // 清理场景资源
     if (sceneRef.current) {
       // 检查是否应该跳过清理
-      if (!sceneRef.current.userData.isSmileComplete && 
-          !sceneRef.current.userData.isErrorComplete) {
+      if (
+        !sceneRef.current.userData.isSmileComplete &&
+        !sceneRef.current.userData.isErrorComplete
+      ) {
         cleanupResources(sceneRef.current);
       }
     }
 
     // 修改渲染器清理逻辑
-    if (rendererRef.current && !sceneRef.current?.userData.isSmileComplete && 
-        !sceneRef.current?.userData.isErrorComplete) {
+    if (
+      rendererRef.current &&
+      !sceneRef.current?.userData.isSmileComplete &&
+      !sceneRef.current?.userData.isErrorComplete
+    ) {
       const renderer = rendererRef.current;
-      
+
       // 确保在移除 DOM 元素前停止渲染
       renderer.setAnimationLoop(null);
-      
+
       // 清理渲染器上下文
       renderer.dispose();
       renderer.forceContextLoss();
-      
+
       // 安全地移除 DOM 元素
       const domElement = renderer.domElement;
       if (containerRef.current?.contains(domElement)) {
         requestAnimationFrame(() => {
-          if (isMountedRef.current && containerRef.current?.contains(domElement)) {
+          if (
+            isMountedRef.current &&
+            containerRef.current?.contains(domElement)
+          ) {
             try {
               containerRef.current.removeChild(domElement);
             } catch (e) {
-              console.warn('清理渲染器DOM元素失败:', e);
+              console.warn("清理渲染器DOM元素失败:", e);
             }
           }
         });
       }
-      
+
       // 清空引用
       rendererRef.current = undefined;
     }
 
     // 清理相机引用
-    if (cameraRef.current && !sceneRef.current?.userData.isSmileComplete && 
-        !sceneRef.current?.userData.isErrorComplete) {
+    if (
+      cameraRef.current &&
+      !sceneRef.current?.userData.isSmileComplete &&
+      !sceneRef.current?.userData.isErrorComplete
+    ) {
       cameraRef.current = undefined;
     }
   }, []);
@@ -447,76 +472,95 @@ export const ParticleImage = ({
   }, [cleanup]);
 
   // 修改 updateParticles 函数
-  const updateParticles = useCallback((width: number, height: number, instanceId: string) => {
-    if (!sceneRef.current || isAnimatingRef.current || !isMountedRef.current) return;
+  const updateParticles = useCallback(
+    (width: number, height: number, instanceId: string) => {
+      if (!sceneRef.current || isAnimatingRef.current || !isMountedRef.current)
+        return;
 
-    // 只有当src不为空时才执行cleanup
-    if(src !== '') {
-      cleanup();
-    }
-    
-    if (!isMountedRef.current) return;
+      // 只有当src不为空时才执行cleanup
+      if (src !== "") {
+        cleanup();
+      }
 
-    const { particles, positionArray, colorArray, particleSize } = createSmileParticles(width, height);
-    
-    const geometry = new THREE.BufferGeometry();
-    const material = new THREE.PointsMaterial({
-      size: particleSize,
-      vertexColors: true,
-      transparent: true,
-      opacity: 1,
-      sizeAttenuation: true,
-      blending: THREE.AdditiveBlending,
-      depthWrite: false,
-      depthTest: false
-    });
+      if (!isMountedRef.current) return;
 
-    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
-    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
+      const { particles, positionArray, colorArray, particleSize } =
+        createSmileParticles(width, height);
 
-    const points = new THREE.Points(geometry, material);
-    sceneRef.current.add(points);
-
-    const positionAttribute = geometry.attributes.position as THREE.BufferAttribute;
-    
-    // 记录完成的动画数量
-    let completedAnimations = 0;
-    const totalAnimations = particles.length;
-
-    particles.forEach((particle, i) => {
-      const i3 = i * 3;
-      const distanceToCenter = Math.sqrt(
-        Math.pow(particle.originalX, 2) + 
-        Math.pow(particle.originalY, 2)
-      );
-      const maxDistance = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
-      const normalizedDistance = distanceToCenter / maxDistance;
-      
-      gsap.to(positionAttribute.array, {
-        duration: 0.8,
-        delay: normalizedDistance * 0.6,
-        [i3]: particle.originalX,
-        [i3 + 1]: particle.originalY,
-        [i3 + 2]: 0,
-        ease: "sine.inOut",
-        onUpdate: () => {
-          positionAttribute.needsUpdate = true;
-        },
-        onComplete: () => {
-          completedAnimations++;
-          if (completedAnimations === totalAnimations && sceneRef.current) {
-            sceneRef.current.userData.isSmileComplete = true;
-            loadingQueue.remove('', instanceId);
-          }
-        }
+      const geometry = new THREE.BufferGeometry();
+      const material = new THREE.PointsMaterial({
+        size: particleSize,
+        vertexColors: true,
+        transparent: true,
+        opacity: 1,
+        sizeAttenuation: true,
+        blending: THREE.AdditiveBlending,
+        depthWrite: false,
+        depthTest: false,
       });
-    });
-  }, [cleanup, src]);
+
+      geometry.setAttribute(
+        "position",
+        new THREE.Float32BufferAttribute(positionArray, 3),
+      );
+      geometry.setAttribute(
+        "color",
+        new THREE.Float32BufferAttribute(colorArray, 3),
+      );
+
+      const points = new THREE.Points(geometry, material);
+      sceneRef.current.add(points);
+
+      const positionAttribute = geometry.attributes
+        .position as THREE.BufferAttribute;
+
+      // 记录完成的动画数量
+      let completedAnimations = 0;
+      const totalAnimations = particles.length;
+
+      particles.forEach((particle, i) => {
+        const i3 = i * 3;
+        const distanceToCenter = Math.sqrt(
+          Math.pow(particle.originalX, 2) + Math.pow(particle.originalY, 2),
+        );
+        const maxDistance = Math.sqrt(
+          Math.pow(width / 2, 2) + Math.pow(height / 2, 2),
+        );
+        const normalizedDistance = distanceToCenter / maxDistance;
+
+        gsap.to(positionAttribute.array, {
+          duration: 0.8,
+          delay: normalizedDistance * 0.6,
+          [i3]: particle.originalX,
+          [i3 + 1]: particle.originalY,
+          [i3 + 2]: 0,
+          ease: "sine.inOut",
+          onUpdate: () => {
+            positionAttribute.needsUpdate = true;
+          },
+          onComplete: () => {
+            completedAnimations++;
+            if (completedAnimations === totalAnimations && sceneRef.current) {
+              sceneRef.current.userData.isSmileComplete = true;
+              loadingQueue.remove("", instanceId);
+            }
+          },
+        });
+      });
+    },
+    [cleanup, src],
+  );
 
   // 将 handleResize 移到 ParticleImage 组件内部
   const handleResize = useCallback(() => {
-    if (!containerRef.current || !cameraRef.current || !rendererRef.current || 
-        !sceneRef.current || !isMountedRef.current) return;
+    if (
+      !containerRef.current ||
+      !cameraRef.current ||
+      !rendererRef.current ||
+      !sceneRef.current ||
+      !isMountedRef.current
+    )
+      return;
 
     const width = containerRef.current.offsetWidth;
     const height = containerRef.current.offsetHeight;
@@ -537,19 +581,19 @@ export const ParticleImage = ({
     const previousSize = sceneRef.current.userData.previousSize || currentSize;
     const sizeChange = Math.abs(currentSize - previousSize) / previousSize;
 
-    if (sizeChange > 0.2 && src === '') {
+    if (sizeChange > 0.2 && src === "") {
       if (sceneRef.current) {
         cleanupResources(sceneRef.current);
       }
       sceneRef.current.userData.previousSize = currentSize;
-      updateParticles(width, height, ''); // 传入空字符串作为 instanceId
+      updateParticles(width, height, ""); // 传入空字符串作为 instanceId
     }
   }, [src, updateParticles]);
 
   // 主要的 useEffect
   useEffect(() => {
     isMountedRef.current = true;
-    
+
     if (!containerRef.current) return;
 
     const width = containerRef.current.offsetWidth;
@@ -557,56 +601,56 @@ export const ParticleImage = ({
 
     const scene = new THREE.Scene();
     sceneRef.current = scene;
-    
+
     const camera = new THREE.OrthographicCamera(
       width / -2,
       width / 2,
       height / 2,
       height / -2,
       1,
-      1000
+      1000,
     );
     camera.position.z = 500;
     camera.lookAt(new THREE.Vector3(0, 0, 0));
     cameraRef.current = camera;
 
-    const renderer = new THREE.WebGLRenderer({ 
+    const renderer = new THREE.WebGLRenderer({
       alpha: true,
       antialias: window.innerWidth > 768,
-      powerPreference: 'low-power',
+      powerPreference: "low-power",
       failIfMajorPerformanceCaveat: false,
-      canvas: document.createElement('canvas')
+      canvas: document.createElement("canvas"),
     });
 
     // 在初始化渲染后立即添加错误检查
     if (!renderer.capabilities.isWebGL2) {
-      console.warn('WebGL2 not supported, falling back...');
+      console.warn("WebGL2 not supported, falling back...");
       renderer.dispose();
       renderer.forceContextLoss();
       return;
     }
 
-    renderer.setPixelRatio(Math.min(
-      window.devicePixelRatio,
-      window.innerWidth <= 768 ? 2 : 3
-    ));
+    renderer.setPixelRatio(
+      Math.min(window.devicePixelRatio, window.innerWidth <= 768 ? 2 : 3),
+    );
     renderer.setSize(width, height);
     rendererRef.current = renderer;
-    
+
     // 修改渲染器添加到DOM的部分
     if (containerRef.current && isMountedRef.current && renderer.domElement) {
       try {
         containerRef.current.appendChild(renderer.domElement);
       } catch (e) {
-        console.warn('Failed to append renderer:', e);
+        console.warn("Failed to append renderer:", e);
         return;
       }
     }
 
     // 检查是否应该显示笑脸
-    if (src === '') {
-      const { particles, positionArray, colorArray, particleSize } = createSmileParticles(width, height);
-      
+    if (src === "") {
+      const { particles, positionArray, colorArray, particleSize } =
+        createSmileParticles(width, height);
+
       const material = new THREE.PointsMaterial({
         size: particleSize,
         vertexColors: true,
@@ -615,29 +659,37 @@ export const ParticleImage = ({
         sizeAttenuation: true,
         blending: THREE.AdditiveBlending,
         depthWrite: false,
-        depthTest: false
+        depthTest: false,
       });
-      
+
       const geometry = new THREE.BufferGeometry();
-      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
-      geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
+      geometry.setAttribute(
+        "position",
+        new THREE.Float32BufferAttribute(positionArray, 3),
+      );
+      geometry.setAttribute(
+        "color",
+        new THREE.Float32BufferAttribute(colorArray, 3),
+      );
 
       const points = new THREE.Points(geometry, material);
       scene.add(points);
 
       // 添加这一行来获取position属性
-      const positionAttribute = geometry.attributes.position as THREE.BufferAttribute;
+      const positionAttribute = geometry.attributes
+        .position as THREE.BufferAttribute;
 
       // 修改动画效果,添加完成回调
       particles.forEach((particle, i) => {
         const i3 = i * 3;
         const distanceToCenter = Math.sqrt(
-          Math.pow(particle.originalX, 2) + 
-          Math.pow(particle.originalY, 2)
+          Math.pow(particle.originalX, 2) + Math.pow(particle.originalY, 2),
+        );
+        const maxDistance = Math.sqrt(
+          Math.pow(width / 2, 2) + Math.pow(height / 2, 2),
         );
-        const maxDistance = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
         const normalizedDistance = distanceToCenter / maxDistance;
-        
+
         gsap.to(positionAttribute.array, {
           duration: 0.8,
           delay: normalizedDistance * 0.6,
@@ -650,10 +702,10 @@ export const ParticleImage = ({
           },
           onComplete: () => {
             // 动画完成后设置标记,防止被清理
-            if(scene) {
+            if (scene) {
               scene.userData.isSmileComplete = true;
             }
-          }
+          },
         });
       });
 
@@ -669,19 +721,19 @@ export const ParticleImage = ({
       // 设置 resize 监听
       const throttledResize = throttle(handleResize, 200, {
         leading: true,
-        trailing: true
+        trailing: true,
       });
 
       const resizeObserver = new ResizeObserver(throttledResize);
       resizeObserver.observe(containerRef.current);
-      window.addEventListener('resize', throttledResize);
+      window.addEventListener("resize", throttledResize);
 
       return () => {
         throttledResize.cancel();
         if (containerRef.current) {
           resizeObserver.unobserve(containerRef.current);
         }
-        window.removeEventListener('resize', throttledResize);
+        window.removeEventListener("resize", throttledResize);
         if (animationFrameRef.current) {
           cancelAnimationFrame(animationFrameRef.current);
         }
@@ -689,16 +741,17 @@ export const ParticleImage = ({
           containerRef.current.removeChild(rendererRef.current.domElement);
           rendererRef.current.dispose();
         }
-        gsap.killTweensOf('*');
+        gsap.killTweensOf("*");
       };
     }
 
     // 建错误函数
     const showErrorAnimation = () => {
       if (!scene) return;
-      
-      const { particles, positionArray, colorArray, particleSize } = createErrorParticles(width, height);
-      
+
+      const { particles, positionArray, colorArray, particleSize } =
+        createErrorParticles(width, height);
+
       const material = new THREE.PointsMaterial({
         size: particleSize,
         vertexColors: true,
@@ -707,19 +760,25 @@ export const ParticleImage = ({
         sizeAttenuation: true,
         blending: THREE.AdditiveBlending,
         depthWrite: false,
-        depthTest: false
+        depthTest: false,
       });
 
       const geometry = new THREE.BufferGeometry();
-      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
-      geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
+      geometry.setAttribute(
+        "position",
+        new THREE.Float32BufferAttribute(positionArray, 3),
+      );
+      geometry.setAttribute(
+        "color",
+        new THREE.Float32BufferAttribute(colorArray, 3),
+      );
 
       const points = new THREE.Points(geometry, material);
       scene.clear();
       scene.add(points);
 
       const positionAttribute = geometry.attributes.position;
-      
+
       particles.forEach((particle, i) => {
         const i3 = i * 3;
         gsap.to(positionAttribute.array, {
@@ -734,42 +793,42 @@ export const ParticleImage = ({
           },
           onComplete: () => {
             // 添加标记表示错误动画已完成
-            if(scene) {
+            if (scene) {
               scene.userData.isErrorComplete = true;
             }
-          }
+          },
         });
       });
     };
 
     // 加载
     const img = new Image();
-    img.crossOrigin = 'anonymous';
-    
+    img.crossOrigin = "anonymous";
+
     const timeoutId = setTimeout(() => {
       showErrorAnimation();
     }, 5000); // 5秒超时
 
     img.onload = () => {
       clearTimeout(timeoutId);
-      
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      
+
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
       if (ctx) {
         // 增加一个小的边距以确保盖
         const padding = 2; // 添加2像素的距
         canvas.width = width + padding * 2;
         canvas.height = height + padding * 2;
-        
+
         const targetAspect = width / height;
         const imgAspect = img.width / img.height;
-        
+
         let sourceWidth = img.width;
         let sourceHeight = img.height;
         let sourceX = 0;
         let sourceY = 0;
-        
+
         if (imgAspect > targetAspect) {
           sourceWidth = img.height * targetAspect;
           sourceX = (img.width - sourceWidth) / 2;
@@ -781,13 +840,19 @@ export const ParticleImage = ({
         // 绘制时考虑padding
         ctx.drawImage(
           img,
-          sourceX, sourceY, sourceWidth, sourceHeight,
-          padding, padding, width, height
+          sourceX,
+          sourceY,
+          sourceWidth,
+          sourceHeight,
+          padding,
+          padding,
+          width,
+          height,
         );
 
         // 采样时也要考虑padding
         const imageData = ctx.getImageData(padding, padding, width, height);
-        
+
         const particles: Particle[] = [];
         const positionArray = [];
         const colorArray = [];
@@ -804,15 +869,16 @@ export const ParticleImage = ({
 
             if (a > 0.3) {
               const distanceToCenter = Math.sqrt(
-                Math.pow(x - width/2, 2) + 
-                Math.pow(y - height/2, 2)
+                Math.pow(x - width / 2, 2) + Math.pow(y - height / 2, 2),
+              );
+              const maxDistance = Math.sqrt(
+                Math.pow(width / 2, 2) + Math.pow(height / 2, 2),
               );
-              const maxDistance = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
               const normalizedDistance = distanceToCenter / maxDistance;
-              
+
               const px = x - width / 2;
               const py = height / 2 - y;
-              
+
               particles.push({
                 x: px,
                 y: py,
@@ -820,7 +886,7 @@ export const ParticleImage = ({
                 originalX: px,
                 originalY: py,
                 originalColor: new THREE.Color(r, g, b),
-                delay: normalizedDistance * 0.3
+                delay: normalizedDistance * 0.3,
               });
 
               // 机初始位置（根据距离调范围）
@@ -828,7 +894,7 @@ export const ParticleImage = ({
               positionArray.push(
                 (Math.random() - 0.5) * width * spread,
                 (Math.random() - 0.5) * height * spread,
-                (Math.random() - 0.5) * 50 * spread
+                (Math.random() - 0.5) * 50 * spread,
               );
 
               colorArray.push(r, g, b);
@@ -848,13 +914,18 @@ export const ParticleImage = ({
           sizeAttenuation: true,
           blending: THREE.AdditiveBlending,
           depthWrite: false,
-          depthTest: false
+          depthTest: false,
         });
 
-
         scene.clear();
-        geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
-        geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
+        geometry.setAttribute(
+          "position",
+          new THREE.Float32BufferAttribute(positionArray, 3),
+        );
+        geometry.setAttribute(
+          "color",
+          new THREE.Float32BufferAttribute(colorArray, 3),
+        );
 
         const points = new THREE.Points(geometry, material);
         scene.add(points);
@@ -876,7 +947,7 @@ export const ParticleImage = ({
 
         particles.forEach((particle, i) => {
           const i3 = i * 3;
-          
+
           // 位置动画
           gsap.to(positionAttribute.array, {
             duration: 1.2 + Math.random() * 0.3,
@@ -888,7 +959,7 @@ export const ParticleImage = ({
             onUpdate: () => {
               positionAttribute.needsUpdate = true;
             },
-            onComplete: checkComplete
+            onComplete: checkComplete,
           });
 
           // 色动画
@@ -902,39 +973,43 @@ export const ParticleImage = ({
             onUpdate: () => {
               colorAttribute.needsUpdate = true;
             },
-            onComplete: checkComplete
+            onComplete: checkComplete,
           });
         });
 
         // 修改动画序列部分
         const timeline = gsap.timeline({
-          defaults: { ease: "power2.inOut" }
+          defaults: { ease: "power2.inOut" },
         });
 
-        const imgElement = document.querySelector(`img[src="${src}"]`) as HTMLImageElement;
+        const imgElement = document.querySelector(
+          `img[src="${src}"]`,
+        ) as HTMLImageElement;
         if (imgElement) {
           // 设置初始状态
           gsap.set(imgElement, { opacity: 0 });
-          
+
           timeline
             .to(imgElement, {
               opacity: 1,
               duration: 0.8,
-              delay: 1.6
+              delay: 1.6,
             })
-            .to(material, {
-              opacity: 0,
-              duration: 0.8
-            }, "-=0.6"); // 前开始消失
+            .to(
+              material,
+              {
+                opacity: 0,
+                duration: 0.8,
+              },
+              "-=0.6",
+            ); // 前开始消失
         }
 
         return { particles, positionArray, colorArray, particleSize };
       }
     };
 
-    
-
-    img.src = src || '';
+    img.src = src || "";
 
     // 画循环
     const animate = () => {
@@ -950,7 +1025,7 @@ export const ParticleImage = ({
     resizeObserver.observe(containerRef.current);
 
     // 添加窗口 resize 监听
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
 
     return () => {
       clearTimeout(timeoutId);
@@ -962,40 +1037,43 @@ export const ParticleImage = ({
         renderer.dispose();
       }
       // 清有 GSAP 画
-      gsap.killTweensOf('*');
-      
+      gsap.killTweensOf("*");
+
       // 移除 resize 监听
       if (containerRef.current) {
         resizeObserver.unobserve(containerRef.current);
       }
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
   }, [cleanup, src, handleResize, onLoad, onAnimationComplete]);
 
   return <div ref={containerRef} className="w-full h-full" />;
-}; 
+};
 
 let instanceCounter = 0;
 
 // 添加性能检测函数
 const detectDevicePerformance = () => {
   // 检查是否在浏览器环境
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return 1; // 服务器端返回默认值
   }
 
   try {
     // 检查是否支持 hardwareConcurrency
     const cores = navigator?.hardwareConcurrency || 2;
-    
+
     // 检查设备内 (如果支持)
     const memory = (navigator as any)?.deviceMemory || 4;
-    
+
     // 检查是否为移动设备
-    const isMobile = typeof navigator !== 'undefined' 
-      ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
-      : false;
-    
+    const isMobile =
+      typeof navigator !== "undefined"
+        ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+            navigator.userAgent,
+          )
+        : false;
+
     // 基于性能指标计算并发数
     let concurrent = 1; // 默认值
 
@@ -1011,84 +1089,84 @@ const detectDevicePerformance = () => {
 
     return concurrent;
   } catch (error) {
-    console.warn('性能检测失败，使用默认值:', error);
+    console.warn("性能检测失败，使用默认值:", error);
     return 1; // 出错时返回最保守的值
   }
 };
 
 // 修改队列管理
 const loadingQueue = {
-  items: new Map<string, {
-    isProcessing: boolean;
-    instanceId: string;
-    isLongConnection: boolean;
-    lastActiveTime?: number;
-    lastProcessState?: boolean;
-    lastLogTime?: number;  // 添加这个字段来控制日志输出频率
-  }>(),
+  items: new Map<
+    string,
+    {
+      isProcessing: boolean;
+      instanceId: string;
+      isLongConnection: boolean;
+      lastActiveTime?: number;
+      lastProcessState?: boolean;
+      lastLogTime?: number; // 添加这个字段来控制日志输出频率
+    }
+  >(),
   pendingQueue: new Set<string>(), // 备选队列，存储已加载完成的长连接
   maxConcurrent: 1,
   currentProcessing: 0,
-  
+
   get availableSlots() {
     // 只计算普通请求的槽位，排除错误和长连接
-    const normalProcessing = Array.from(this.items.values())
-      .filter(item => 
-        item.isProcessing && 
-        !item.isLongConnection
-      ).length;
+    const normalProcessing = Array.from(this.items.values()).filter(
+      (item) => item.isProcessing && !item.isLongConnection,
+    ).length;
     return this.maxConcurrent - normalProcessing;
   },
-  
+
   add(url: string, instanceId: string, isLongConnection = false) {
     const key = `${instanceId}:${url}`;
     if (!this.items.has(key)) {
-      
       this.items.set(key, {
         isProcessing: false,
         instanceId,
         isLongConnection,
-        lastActiveTime: Date.now()
+        lastActiveTime: Date.now(),
       });
-      
+
       // 连接��再直接进入备选队列，而是等待加载完成后再加入
       this.processQueue();
       return true;
     }
     return false;
   },
-  
+
   processQueue() {
     if (this.availableSlots > 0) {
       let nextKey: string | undefined;
-      
+
       // 修改这部分逻辑，不再区分长连接和普通请求
-      const nextItem = Array.from(this.items.entries())
-        .find(([_, item]) => !item.isProcessing);
-        
+      const nextItem = Array.from(this.items.entries()).find(
+        ([_, item]) => !item.isProcessing,
+      );
+
       if (nextItem) {
         nextKey = nextItem[0];
       }
-      
+
       if (nextKey) {
         this.startProcessing(nextKey);
       }
     }
   },
-  
+
   startProcessing(key: string) {
     const item = this.items.get(key);
     if (item && !item.isProcessing) {
-
       item.isProcessing = true;
-      
+
       // 只有普通请求且不是错误状态时才增加处理数量
-      if (!item.isLongConnection && !key.includes('error')) {
+      if (!item.isLongConnection && !key.includes("error")) {
         this.currentProcessing++;
       }
     }
   },
-  
+
   // 添加新方法：将长连接添加到备选队列
   addToPending(url: string, instanceId: string) {
     const key = `${instanceId}:${url}`;
@@ -1097,23 +1175,26 @@ const loadingQueue = {
       this.pendingQueue.add(key);
     }
   },
-  
+
   remove(url: string, instanceId: string) {
     const key = `${instanceId}:${url}`;
     const item = this.items.get(key);
-    
-    
+
     // 只有普通请求且正在处理时才减少处理数量
-    if (item?.isProcessing && !item.isLongConnection && !key.includes('error')) {
+    if (
+      item?.isProcessing &&
+      !item.isLongConnection &&
+      !key.includes("error")
+    ) {
       this.currentProcessing--;
     }
-    
+
     // 确保从队列中移除
     this.items.delete(key);
     this.pendingQueue.delete(key);
-    
+
     // 如果是错误状态，立即处理下一个请求
-    if (key.includes('error')) {
+    if (key.includes("error")) {
       this.processQueue();
     } else {
       // 使用 requestAnimationFrame 来确保状态更新后再处理队列
@@ -1126,9 +1207,9 @@ const loadingQueue = {
   canProcess(url: string, instanceId: string): boolean {
     const key = `${instanceId}:${url}`;
     const item = this.items.get(key);
-    
+
     // 错误状态的处理保持不变
-    if (key.includes('error')) {
+    if (key.includes("error")) {
       if (!item?.lastLogTime) {
         if (item) {
           item.lastLogTime = Date.now();
@@ -1136,34 +1217,36 @@ const loadingQueue = {
       }
       return true;
     }
-    
+
     // 移除长连接的特殊处理，统一处理所有请求
     const canProcess = item?.isProcessing || false;
-    
-    if (item && 
-        (item.lastProcessState !== canProcess || 
-         !item.lastLogTime || 
-         Date.now() - item.lastLogTime > 1000)) {
+
+    if (
+      item &&
+      (item.lastProcessState !== canProcess ||
+        !item.lastLogTime ||
+        Date.now() - item.lastLogTime > 1000)
+    ) {
       item.lastProcessState = canProcess;
       item.lastLogTime = Date.now();
     }
     return canProcess;
-  }
+  },
 };
 
 // 在组件挂载时更新 maxConcurrent
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
   loadingQueue.maxConcurrent = detectDevicePerformance();
 }
 
-export const ImageLoader = ({ 
-  src, 
+export const ImageLoader = ({
+  src,
   alt,
-  className 
-}: { 
-  src?: string; 
-  alt: string; 
-  className: string; 
+  className,
+}: {
+  src?: string;
+  alt: string;
+  className: string;
 }) => {
   // 为每个实例创唯一ID
   const instanceId = useRef(`img-${++instanceCounter}`);
@@ -1171,7 +1254,7 @@ export const ImageLoader = ({
   const [status, setStatus] = useState<LoaderStatus>({
     isLoading: true,
     hasError: false,
-    timeoutError: false
+    timeoutError: false,
   });
   const [showImage, setShowImage] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout>();
@@ -1183,51 +1266,51 @@ export const ImageLoader = ({
   // 把 useEffect 移到这里
   useEffect(() => {
     if (!src) return;
-    
+
     setShowImage(false);
     setAnimationComplete(false);
     setCanShowParticles(false);
-    
+
     loadingQueue.add(src, instanceId.current);
-    
+
     const checkQueue = () => {
       if (loadingQueue.canProcess(src, instanceId.current)) {
         const now = Date.now();
         const timeSinceLastAnimation = now - lastAnimationTime;
-        
+
         if (particleLoadQueue.size === 0) {
           particleLoadQueue.add(src);
           setCanShowParticles(true);
           lastAnimationTime = now;
           return;
         }
-        
+
         const delay = Math.max(
           MIN_DELAY,
-          Math.min(ANIMATION_THRESHOLD, timeSinceLastAnimation)
+          Math.min(ANIMATION_THRESHOLD, timeSinceLastAnimation),
         );
-        
+
         const timer = setTimeout(() => {
           const key = `${instanceId.current}:${src}`;
           if (!loadingQueue.items.has(key)) return;
-          
+
           particleLoadQueue.add(src);
           setCanShowParticles(true);
           lastAnimationTime = Date.now();
         }, delay);
-        
+
         return () => {
           clearTimeout(timer);
           particleLoadQueue.delete(src);
         };
       }
-      
+
       const timer = setTimeout(checkQueue, 100);
       return () => clearTimeout(timer);
     };
-    
+
     const cleanup = checkQueue();
-    
+
     return () => {
       cleanup?.();
       loadingQueue.remove(src, instanceId.current);
@@ -1237,129 +1320,136 @@ export const ImageLoader = ({
   // 处理图片加载
   const preloadImage = useCallback(() => {
     if (!src || loadingRef.current) return;
-    
+
     loadingRef.current = true;
 
     // 清理之前的资源
     if (imageRef.current) {
-        imageRef.current.src = '';
-        imageRef.current = null;
+      imageRef.current.src = "";
+      imageRef.current = null;
     }
 
     if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+      clearTimeout(timeoutRef.current);
     }
 
     setStatus({
-        isLoading: true,
-        hasError: false,
-        timeoutError: false
+      isLoading: true,
+      hasError: false,
+      timeoutError: false,
     });
     setShowImage(false);
 
     const img = new Image();
-    img.crossOrigin = 'anonymous';
+    img.crossOrigin = "anonymous";
 
     timeoutRef.current = setTimeout(() => {
-        loadingRef.current = false;
-        setStatus({
-            isLoading: false,
-            hasError: true,
-            timeoutError: true
-        });
-        
-        // 超时时触发错误动画
-        setCanShowParticles(true);
-        if (src) {
-            loadingQueue.remove(src, instanceId.current);
-            particleLoadQueue.delete(src);
-        }
+      loadingRef.current = false;
+      setStatus({
+        isLoading: false,
+        hasError: true,
+        timeoutError: true,
+      });
+
+      // 超时时触发错误动画
+      setCanShowParticles(true);
+      if (src) {
+        loadingQueue.remove(src, instanceId.current);
+        particleLoadQueue.delete(src);
+      }
     }, 5000);
 
     img.onload = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
 
-        // 在图片加载成功后，立即创建缓存一个适应容器大小的图片
-        if (containerRef.current) {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            
-            if (ctx) {
-                const containerWidth = containerRef.current.offsetWidth;
-                const containerHeight = containerRef.current.offsetHeight;
-                
-                canvas.width = containerWidth;
-                canvas.height = containerHeight;
-                
-                // 保持比例绘制图片
-                const targetAspect = containerWidth / containerHeight;
-                const imgAspect = img.width / img.height;
-                
-                let sourceWidth = img.width;
-                let sourceHeight = img.height;
-                let sourceX = 0;
-                let sourceY = 0;
-                
-                if (imgAspect > targetAspect) {
-                    sourceWidth = img.height * targetAspect;
-                    sourceX = (img.width - sourceWidth) / 2;
-                } else {
-                    sourceHeight = img.width / targetAspect;
-                    sourceY = (img.height - sourceHeight) / 2;
-                }
-                
-                ctx.drawImage(
-                    img,
-                    sourceX, sourceY, sourceWidth, sourceHeight,
-                    0, 0, containerWidth, containerHeight
-                );
-                
-                // 创建新的图片对象，使用调整后的canvas数据
-                const adjustedImage = new Image();
-                adjustedImage.src = canvas.toDataURL();
-                imageRef.current = adjustedImage;
-            }
-        } else {
-            imageRef.current = img;
-        }
+      // 在图片加载成功后，立即创建缓存一个适应容器大小的图片
+      if (containerRef.current) {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
 
-        // 如果是长连接，加载成功后添加到备选队列
-        if (src && src === src) { // 相同URL判断
-            loadingQueue.addToPending(src, instanceId.current);
-        }
+        if (ctx) {
+          const containerWidth = containerRef.current.offsetWidth;
+          const containerHeight = containerRef.current.offsetHeight;
 
-        loadingRef.current = false;
-        setStatus({
-            isLoading: false,
-            hasError: false,
-            timeoutError: false
-        });
+          canvas.width = containerWidth;
+          canvas.height = containerHeight;
+
+          // 保持比例绘制图片
+          const targetAspect = containerWidth / containerHeight;
+          const imgAspect = img.width / img.height;
+
+          let sourceWidth = img.width;
+          let sourceHeight = img.height;
+          let sourceX = 0;
+          let sourceY = 0;
+
+          if (imgAspect > targetAspect) {
+            sourceWidth = img.height * targetAspect;
+            sourceX = (img.width - sourceWidth) / 2;
+          } else {
+            sourceHeight = img.width / targetAspect;
+            sourceY = (img.height - sourceHeight) / 2;
+          }
+
+          ctx.drawImage(
+            img,
+            sourceX,
+            sourceY,
+            sourceWidth,
+            sourceHeight,
+            0,
+            0,
+            containerWidth,
+            containerHeight,
+          );
+
+          // 创建新的图片对象，使用调整后的canvas数据
+          const adjustedImage = new Image();
+          adjustedImage.src = canvas.toDataURL();
+          imageRef.current = adjustedImage;
+        }
+      } else {
+        imageRef.current = img;
+      }
+
+      // 如果是长连接，加载成功后添加到备选队列
+      if (src && src === src) {
+        // 相同URL判断
+        loadingQueue.addToPending(src, instanceId.current);
+      }
+
+      loadingRef.current = false;
+      setStatus({
+        isLoading: false,
+        hasError: false,
+        timeoutError: false,
+      });
     };
 
     img.onerror = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        loadingRef.current = false;
-        setStatus({
-            isLoading: false,
-            hasError: true,
-            timeoutError: false
-        });
-        
-        // 错误时立即触发错误动画
-        setCanShowParticles(true);
-        
-        if (src) {
-            loadingQueue.remove(src, instanceId.current);
-            particleLoadQueue.delete(src);
-        }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      loadingRef.current = false;
+      setStatus({
+        isLoading: false,
+        hasError: true,
+        timeoutError: false,
+      });
+
+      // 错误时立即触发错误动画
+      setCanShowParticles(true);
+
+      if (src) {
+        loadingQueue.remove(src, instanceId.current);
+        particleLoadQueue.delete(src);
+      }
     };
 
     if (src) {
-        img.src = src;
+      img.src = src;
     }
   }, [src]);
 
@@ -1376,7 +1466,7 @@ export const ImageLoader = ({
 
   // 添加一个���的状来控制粒子动画
   const [canShowParticles, setCanShowParticles] = useState(false);
-  
+
   // 添加加载动画组件
   const LoadingSpinner = () => (
     <div className="absolute inset-0 flex items-center justify-center">
@@ -1386,12 +1476,14 @@ export const ImageLoader = ({
 
   return (
     <div className="relative w-full h-full overflow-hidden">
-      <div className={`absolute inset-0 ${BG_CONFIG.className} rounded-lg overflow-hidden`}>
+      <div
+        className={`absolute inset-0 ${BG_CONFIG.className} rounded-lg overflow-hidden`}
+      >
         {src && (status.isLoading || !canShowParticles) && <LoadingSpinner />}
-        
+
         {(!src || (src && !animationComplete && canShowParticles)) && (
-          <ParticleImage 
-            src={src} 
+          <ParticleImage
+            src={src}
             status={status}
             onLoad={() => {
               if (imageRef.current) {
@@ -1401,16 +1493,18 @@ export const ImageLoader = ({
             onAnimationComplete={() => {
               if (imageRef.current && src) {
                 setShowImage(true);
-                
+
                 requestAnimationFrame(() => {
                   setAnimationComplete(true);
                   particleLoadQueue.delete(src);
                   loadingQueue.remove(src, instanceId.current);
-                  
+
                   setTimeout(() => {
-                    const img = document.querySelector(`img[src="${imageRef.current?.src}"]`) as HTMLImageElement;
+                    const img = document.querySelector(
+                      `img[src="${imageRef.current?.src}"]`,
+                    ) as HTMLImageElement;
                     if (img) {
-                      img.style.opacity = '1';
+                      img.style.opacity = "1";
                     }
                   }, 50);
                 });
@@ -1422,23 +1516,23 @@ export const ImageLoader = ({
       {/* 保持现图片渲染部分 */}
       {!status.hasError && !status.timeoutError && imageRef.current && (
         <div className="absolute inset-0 rounded-lg overflow-hidden">
-          <img 
+          <img
             src={imageRef.current.src}
             alt={alt}
             className={`w-full h-full object-cover ${className}`}
-            style={{ 
+            style={{
               opacity: 0,
-              visibility: showImage ? 'visible' : 'hidden',
-              objectFit: 'cover',
-              objectPosition: 'center',
-              willChange: 'opacity, transform',
-              transition: 'opacity 0.5s ease-in-out',
-              transform: 'scale(1.015)',
-              transformOrigin: 'center bottom',
+              visibility: showImage ? "visible" : "hidden",
+              objectFit: "cover",
+              objectPosition: "center",
+              willChange: "opacity, transform",
+              transition: "opacity 0.5s ease-in-out",
+              transform: "scale(1.015)",
+              transformOrigin: "center bottom",
             }}
           />
         </div>
       )}
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/hooks/echoes.tsx b/frontend/hooks/echoes.tsx
index 59e6d7c..940af92 100644
--- a/frontend/hooks/echoes.tsx
+++ b/frontend/hooks/echoes.tsx
@@ -7,18 +7,18 @@ export const Echoes: React.FC = () => {
   useEffect(() => {
     // 优化动画性能
     if (svgRef.current) {
-      svgRef.current.style.willChange = 'transform';
-      
+      svgRef.current.style.willChange = "transform";
+
       // 使用 requestAnimationFrame 来优化动画
-      const paths = svgRef.current.querySelectorAll('path');
-      paths.forEach(path => {
-        path.style.willChange = 'transform';
+      const paths = svgRef.current.querySelectorAll("path");
+      paths.forEach((path) => {
+        path.style.willChange = "transform";
       });
     }
 
     return () => {
       if (svgRef.current) {
-        svgRef.current.style.willChange = 'auto';
+        svgRef.current.style.willChange = "auto";
       }
     };
   }, []);
@@ -31,8 +31,8 @@ export const Echoes: React.FC = () => {
       viewBox="50.4 44.600006 234.1 86"
       xmlns="http://www.w3.org/2000/svg"
       style={{
-        transform: 'translateZ(0)', // 启用硬件加速
-        backfaceVisibility: 'hidden'
+        transform: "translateZ(0)", // 启用硬件加速
+        backfaceVisibility: "hidden",
       }}
     >
       <path
diff --git a/frontend/hooks/themeMode.tsx b/frontend/hooks/themeMode.tsx
index 5de2242..75af5ab 100644
--- a/frontend/hooks/themeMode.tsx
+++ b/frontend/hooks/themeMode.tsx
@@ -37,7 +37,7 @@ export const ThemeScript = () => {
 // 客户端专用的 hook
 const useClientOnly = (callback: () => void, deps: any[] = []) => {
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       callback();
     }
   }, deps);
@@ -46,15 +46,15 @@ const useClientOnly = (callback: () => void, deps: any[] = []) => {
 export const ThemeModeToggle: React.FC = () => {
   const [mounted, setMounted] = useState(false);
   const [theme, setTheme] = useState<string>(() => {
-    if (typeof document !== 'undefined') {
-      return document.documentElement.dataset.theme || 'light';
+    if (typeof document !== "undefined") {
+      return document.documentElement.dataset.theme || "light";
     }
-    return 'light';
+    return "light";
   });
 
   useClientOnly(() => {
-    const currentTheme = document.documentElement.dataset.theme || 'light';
-    document.documentElement.classList.remove('light', 'dark');
+    const currentTheme = document.documentElement.dataset.theme || "light";
+    document.documentElement.classList.remove("light", "dark");
     document.documentElement.classList.add(currentTheme);
     setTheme(currentTheme);
     setMounted(true);
@@ -63,28 +63,29 @@ export const ThemeModeToggle: React.FC = () => {
   useEffect(() => {
     if (!mounted) return;
 
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
     const handleSystemThemeChange = (e: MediaQueryListEvent) => {
       if (!localStorage.getItem(THEME_KEY)) {
-        const newTheme = e.matches ? 'dark' : 'light';
+        const newTheme = e.matches ? "dark" : "light";
         updateTheme(newTheme);
       }
     };
-    
-    mediaQuery.addEventListener('change', handleSystemThemeChange);
-    return () => mediaQuery.removeEventListener('change', handleSystemThemeChange);
+
+    mediaQuery.addEventListener("change", handleSystemThemeChange);
+    return () =>
+      mediaQuery.removeEventListener("change", handleSystemThemeChange);
   }, [mounted]);
 
   const updateTheme = (newTheme: string) => {
     document.documentElement.dataset.theme = newTheme;
-    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.remove("light", "dark");
     document.documentElement.classList.add(newTheme);
     setTheme(newTheme);
   };
 
   const toggleTheme = () => {
-    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    const newTheme = theme === "dark" ? "light" : "dark";
     updateTheme(newTheme);
     localStorage.setItem(THEME_KEY, newTheme);
   };
@@ -108,7 +109,7 @@ export const ThemeModeToggle: React.FC = () => {
       className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
       aria-label="Toggle theme"
     >
-      {theme === 'dark' ? (
+      {theme === "dark" ? (
         <SunIcon className="w-full h-full" />
       ) : (
         <MoonIcon className="w-full h-full" />
@@ -123,7 +124,9 @@ export const useThemeMode = () => {
 
   useClientOnly(() => {
     const handleThemeChange = () => {
-      const currentTheme = document.documentElement.dataset.theme as "light" | "dark";
+      const currentTheme = document.documentElement.dataset.theme as
+        | "light"
+        | "dark";
       setMode(currentTheme || "light");
     };
 
@@ -132,7 +135,7 @@ export const useThemeMode = () => {
 
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
-        if (mutation.attributeName === 'data-theme') {
+        if (mutation.attributeName === "data-theme") {
           handleThemeChange();
         }
       });
@@ -140,7 +143,7 @@ export const useThemeMode = () => {
 
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ['data-theme']
+      attributeFilter: ["data-theme"],
     });
 
     return () => observer.disconnect();
diff --git a/frontend/interface/fields.ts b/frontend/interface/fields.ts
index bb2db3e..581ee97 100644
--- a/frontend/interface/fields.ts
+++ b/frontend/interface/fields.ts
@@ -52,7 +52,7 @@ export interface Setting {
 
 export interface Metadata {
   id: number;
-  targetType: 'post' | 'page';
+  targetType: "post" | "page";
   targetId: number;
   metaKey: string;
   metaValue?: string;
@@ -60,7 +60,7 @@ export interface Metadata {
 
 export interface CustomField {
   id: number;
-  targetType: 'post' | 'page';
+  targetType: "post" | "page";
   targetId: number;
   fieldKey: string;
   fieldValue?: string;
@@ -70,7 +70,7 @@ export interface CustomField {
 export interface Taxonomy {
   name: string;
   slug: string;
-  type: 'tag' | 'category';
+  type: "tag" | "category";
   parentId?: string;
 }
 
@@ -92,4 +92,4 @@ export interface PostDisplay extends Post {
 export interface PageDisplay extends Page {
   metadata?: Metadata[];
   customFields?: CustomField[];
-}
\ No newline at end of file
+}
diff --git a/frontend/interface/layout.ts b/frontend/interface/layout.ts
index 21570dc..de6062d 100644
--- a/frontend/interface/layout.ts
+++ b/frontend/interface/layout.ts
@@ -1,17 +1,19 @@
 import { HttpClient } from "core/http";
 import { CapabilityService } from "core/capability";
 import { Serializable } from "interface/serializableType";
-import { createElement, memo } from 'react';
+import { createElement, memo } from "react";
 
 export class Layout {
   private http: HttpClient;
   private capability: CapabilityService;
-  private readonly MemoizedElement: React.MemoExoticComponent<(props: {
-    children: React.ReactNode;
-    args?: Serializable;
-    onTouchStart?: (e: TouchEvent) => void;
-    onTouchEnd?: (e: TouchEvent) => void;
-  }) => React.ReactNode>;
+  private readonly MemoizedElement: React.MemoExoticComponent<
+    (props: {
+      children: React.ReactNode;
+      args?: Serializable;
+      onTouchStart?: (e: TouchEvent) => void;
+      onTouchEnd?: (e: TouchEvent) => void;
+    }) => React.ReactNode
+  >;
 
   constructor(
     public element: (props: {
@@ -30,8 +32,8 @@ export class Layout {
     this.MemoizedElement = memo(element);
   }
 
-  render(props: { 
-    children: React.ReactNode; 
+  render(props: {
+    children: React.ReactNode;
     args?: Serializable;
     onTouchStart?: (e: TouchEvent) => void;
     onTouchEnd?: (e: TouchEvent) => void;
@@ -39,7 +41,7 @@ export class Layout {
     return createElement(this.MemoizedElement, {
       ...props,
       onTouchStart: props.onTouchStart,
-      onTouchEnd: props.onTouchEnd
+      onTouchEnd: props.onTouchEnd,
     });
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index e305de1..255f540 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,10 +5,10 @@
   "type": "module",
   "scripts": {
     "build": "remix vite:build",
-    "dev": "concurrently \"node --trace-warnings ./node_modules/vite/bin/vite.js\" \"cross-env VITE_ADDRESS=localhost VITE_PORT=22100 tsx --trace-warnings server/express.ts\"",
+    "dev": "tsx start.ts",
     "format": "prettier --write \"./**/*.{ts,tsx,js,jsx}\"",
     "lint": "eslint \"./**/*.{ts,tsx,js,jsx}\" --fix",
-    "start": "remix-serve ./build/server/index.js",
+    "start": "cross-env NODE_ENV=production tsx start.ts",
     "typecheck": "tsc"
   },
   "dependencies": {
diff --git a/frontend/start.ts b/frontend/start.ts
index 58b6771..d202071 100644
--- a/frontend/start.ts
+++ b/frontend/start.ts
@@ -1,54 +1,113 @@
 import { spawn } from "child_process";
 import path from "path";
 import { EventEmitter } from "events";
+import { DEFAULT_CONFIG } from "~/env";
 
-// 设置全局最大监听器数量
-// EventEmitter.defaultMaxListeners = 20;
-
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const isDev = process.env.NODE_ENV !== "production";
 
 const startServers = async () => {
-  // 先启动内部服务器
-  const internalServer = spawn("tsx", ["backend/internalServer.ts"], {
-    stdio: "inherit",
-    shell: true,
-    env: {
-      ...process.env,
-      NODE_ENV: process.env.NODE_ENV || "development",
+  // 启动 Express 服务器（无论是开发还是生产环境都需要）
+  const expressServer = spawn(
+    "tsx",
+    ["--trace-warnings", "server/express.ts"],
+    {
+      stdio: "inherit",
+      shell: true,
+      env: {
+        ...process.env,
+        PORT: DEFAULT_CONFIG.VITE_PORT + 1,
+        IS_API_SERVER: "true",
+      },
     },
+  );
+
+  expressServer.on("error", (err) => {
+    console.error("Express 服务器启动错误:", err);
   });
 
-  internalServer.on("error", (err) => {
-    console.error("内部服务器启动错误:", err);
-  });
+  if (isDev) {
+    // 开发环境启动
+    console.log("正在以开发模式启动服务器...");
 
-  // 等待内部服务器启动
-  // console.log("等待内部服务器启动...");
-  // await delay(2000);
+    // 启动 Vite
+    const viteProcess = spawn(
+      "node",
+      ["--trace-warnings", "./node_modules/vite/bin/vite.js"],
+      {
+        stdio: "inherit",
+        shell: true,
+        env: {
+          ...process.env,
+          NODE_ENV: "development",
+          VITE_PORT: DEFAULT_CONFIG.VITE_PORT,
+        },
+        cwd: process.cwd(),
+      },
+    );
 
-  // 然后启动 Vite
-  const viteProcess = spawn("npm", ["run", "dev"], {
-    stdio: "inherit",
-    shell: true,
-    env: {
-      ...process.env,
-      NODE_ENV: process.env.NODE_ENV || "development",
-    },
-  });
+    viteProcess.on("error", (err) => {
+      console.error("Vite 进程启动错误:", err);
+    });
 
-  viteProcess.on("error", (err) => {
-    console.error("Vite 进程启动错误:", err);
-  });
+    const cleanup = () => {
+      console.log("正在关闭服务器...");
+      viteProcess.kill();
+      expressServer.kill();
+      process.exit();
+    };
 
-  const cleanup = () => {
-    console.log("正在关闭服务器...");
-    viteProcess.kill();
-    internalServer.kill();
-    process.exit();
-  };
+    process.on("SIGINT", cleanup);
+    process.on("SIGTERM", cleanup);
+  } else {
+    // 生产环境启动
+    console.log("正在以生产模式启动服务器...");
 
-  process.on("SIGINT", cleanup);
-  process.on("SIGTERM", cleanup);
+    // 先执行构建
+    const buildProcess = spawn("npm", ["run", "build"], {
+      stdio: "inherit",
+      shell: true,
+    });
+
+    buildProcess.on("error", (err) => {
+      console.error("构建错误:", err);
+      process.exit(1);
+    });
+
+    buildProcess.on("close", (code) => {
+      if (code !== 0) {
+        console.error("构建失败");
+        process.exit(1);
+      }
+
+      console.log("构建完成，正在启动生产服务器...");
+
+      // 使用 remix-serve 启动生产服务器
+      const prodServer = spawn("remix-serve", ["./build/server/index.js"], {
+        stdio: "inherit",
+        shell: true,
+        env: {
+          ...process.env,
+          NODE_ENV: "production",
+          PORT: DEFAULT_CONFIG.VITE_PORT,
+        },
+        cwd: process.cwd(),
+      });
+
+      prodServer.on("error", (err) => {
+        console.error("生产服务器启动错误:", err);
+      });
+
+      const cleanup = () => {
+        console.log("正在关闭生产服务器...");
+        prodServer.kill();
+        expressServer.kill();
+        process.exit();
+      };
+
+      process.on("SIGINT", cleanup);
+      process.on("SIGTERM", cleanup);
+    });
+  }
 };
 
 startServers().catch((err) => {
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 4af7f84..57d7a01 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-import typography from '@tailwindcss/typography';
+import typography from "@tailwindcss/typography";
 
 export default {
   content: [
@@ -9,7 +9,7 @@ export default {
     "./hooks/**/*.{js,jsx,ts,tsx}",
     "./themes/**/*.{js,jsx,ts,tsx}",
   ],
-  darkMode: 'class',
+  darkMode: "class",
   important: true,
   theme: {
     extend: {
@@ -30,7 +30,5 @@ export default {
       },
     },
   },
-  plugins: [
-    typography,
-  ],
+  plugins: [typography],
 } satisfies Config;
diff --git a/frontend/themes/echoes/about.tsx b/frontend/themes/echoes/about.tsx
index 7f94cd2..05b8ce3 100644
--- a/frontend/themes/echoes/about.tsx
+++ b/frontend/themes/echoes/about.tsx
@@ -93,7 +93,7 @@ export default new Template({}, ({ http, args }) => {
         <Flex direction="column" align="center" className="text-center mb-16">
           <Box className="w-40 h-40 mb-8 relative">
             <div className="absolute inset-0 bg-gradient-to-br from-[rgb(10,37,77)] via-[rgb(8,27,57)] to-[rgb(2,8,23)] rounded-full overflow-hidden">
-              <ImageLoader 
+              <ImageLoader
                 src="/images/avatar-placeholder.png"
                 alt="avatar"
                 className="w-full h-full"
diff --git a/frontend/themes/echoes/layout.tsx b/frontend/themes/echoes/layout.tsx
index 7623381..d4eef97 100644
--- a/frontend/themes/echoes/layout.tsx
+++ b/frontend/themes/echoes/layout.tsx
@@ -1,7 +1,14 @@
 import { Layout } from "interface/layout";
 import { ThemeModeToggle } from "hooks/ThemeMode";
 import { Echoes } from "hooks/Echoes";
-import { Container, Flex, Box, Link, TextField, Button } from "@radix-ui/themes";
+import {
+  Container,
+  Flex,
+  Box,
+  Link,
+  TextField,
+  Button,
+} from "@radix-ui/themes";
 import {
   MagnifyingGlassIcon,
   HamburgerMenuIcon,
@@ -14,12 +21,12 @@ import { useState, useEffect, useCallback } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import throttle from "lodash/throttle";
 import "./styles/layouts.css";
-import parse from 'html-react-parser';
+import parse from "html-react-parser";
 
 // 直接导出 Layout 实例
 export default new Layout(({ children, args }) => {
   const [moreState, setMoreState] = useState(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       return window.innerWidth >= 1024 ? false : false;
     }
     return false;
@@ -28,9 +35,9 @@ export default new Layout(({ children, args }) => {
   const [scrollProgress, setScrollProgress] = useState(0);
 
   const handleScroll = useCallback(() => {
-    const container = document.querySelector('#main-content');
+    const container = document.querySelector("#main-content");
     if (!container) return;
-    
+
     const scrollTop = container.scrollTop;
     const scrollHeight = container.scrollHeight;
     const clientHeight = container.clientHeight;
@@ -39,11 +46,11 @@ export default new Layout(({ children, args }) => {
   }, []);
 
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return;
 
-    const container = document.querySelector('#main-content');
+    const container = document.querySelector("#main-content");
     if (container) {
-      container.addEventListener('scroll', handleScroll);
+      container.addEventListener("scroll", handleScroll);
     }
 
     const throttledResize = throttle(() => {
@@ -58,22 +65,25 @@ export default new Layout(({ children, args }) => {
 
     return () => {
       if (container) {
-        container.removeEventListener('scroll', handleScroll);
+        container.removeEventListener("scroll", handleScroll);
       }
       window.removeEventListener("resize", throttledResize);
       throttledResize.cancel();
     };
   }, [handleScroll]);
 
-  const navString = typeof args === 'object' && args && 'nav' in args ? args.nav as string : '';
+  const navString =
+    typeof args === "object" && args && "nav" in args
+      ? (args.nav as string)
+      : "";
 
   // 添加回到顶部的处理函数
   const scrollToTop = () => {
-    const container = document.querySelector('#main-content');
+    const container = document.querySelector("#main-content");
     if (container) {
       container.scrollTo({
         top: 0,
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }
   };
@@ -82,11 +92,9 @@ export default new Layout(({ children, args }) => {
   const mobileMenu = (
     <Box className="flex lg:hidden gap-2 items-center">
       {/* 添加移动端进度指示器 */}
-      <Box 
+      <Box
         className={`w-10 h-10 flex items-center justify-center ${
-          scrollProgress > 0 
-            ? 'block' 
-            : 'hidden'
+          scrollProgress > 0 ? "block" : "hidden"
         }`}
       >
         <Button
@@ -94,19 +102,16 @@ export default new Layout(({ children, args }) => {
           className="w-10 h-10 p-0 text-[--gray-12] hover:text-[--accent-9] transition-colors flex items-center justify-center [&_text]:text-[--gray-12] [&_text:hover]:text-[--accent-9]"
           onClick={scrollToTop}
         >
-          <svg 
-            className="w-6 h-6"
-            viewBox="0 0 100 100"
-          >
+          <svg className="w-6 h-6" viewBox="0 0 100 100">
             <text
               x="50"
               y="55"
               className="progress-indicator font-bold transition-colors"
               dominantBaseline="middle"
               textAnchor="middle"
-              style={{ 
-                fontSize: '56px',
-                fill: 'currentColor'
+              style={{
+                fontSize: "56px",
+                fill: "currentColor",
               }}
             >
               {Math.round(scrollProgress)}
@@ -115,7 +120,7 @@ export default new Layout(({ children, args }) => {
         </Button>
       </Box>
 
-      <Button 
+      <Button
         className="w-10 h-10 p-0 hover:text-[--accent-9] transition-colors flex items-center justify-center group bg-transparent border-0"
         onClick={() => setMoreState(!moreState)}
       >
@@ -128,7 +133,7 @@ export default new Layout(({ children, args }) => {
 
       {/* 移动端菜单内容 */}
       {moreState && (
-        <div 
+        <div
           className="absolute top-full right-4 w-[180px] mt-2 rounded-md bg-[--gray-1] border border-[--gray-a5] shadow-lg
             animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 
             duration-200 z-[90]"
@@ -149,10 +154,7 @@ export default new Layout(({ children, args }) => {
                 placeholder="搜索..."
                 className="w-full [&_input]:pl-3 hover:border-[--accent-9] border transition-colors group"
               >
-                <TextField.Slot
-                  side="right"
-                  className="p-2"
-                >
+                <TextField.Slot side="right" className="p-2">
                   <MagnifyingGlassIcon className="h-4 w-4 text-[--gray-11] transition-colors group-hover:text-[--accent-9]" />
                 </TextField.Slot>
               </TextField.Root>
@@ -163,8 +165,8 @@ export default new Layout(({ children, args }) => {
               <Flex gap="3" align="center">
                 {/* 用户信息/登录按钮 - 调整为 70% 宽度 */}
                 <Box className="w-[70%]">
-                  <Button 
-                    variant="ghost" 
+                  <Button
+                    variant="ghost"
                     className="w-full justify-start gap-2 text-[--gray-12] hover:text-[--accent-9] hover:bg-[--gray-a3] transition-colors"
                   >
                     {loginState ? (
@@ -200,10 +202,7 @@ export default new Layout(({ children, args }) => {
       radius="large"
       panelBackground="solid"
     >
-      <Box
-        className="h-screen flex flex-col overflow-hidden"
-        id="nav"
-      >
+      <Box className="h-screen flex flex-col overflow-hidden" id="nav">
         {/* 导航栏 */}
         <Box
           asChild
@@ -211,17 +210,10 @@ export default new Layout(({ children, args }) => {
         >
           <nav>
             <Container size="4">
-              <Flex
-                justify="between"
-                align="center"
-                className="h-20 px-4"
-              >
+              <Flex justify="between" align="center" className="h-20 px-4">
                 {/* Logo 区域 */}
                 <Flex align="center">
-                  <Link
-                    href="/"
-                    className="hover-text flex items-center"
-                  >
+                  <Link href="/" className="hover-text flex items-center">
                     <Box className="w-20 h-20 [&_path]:transition-all [&_path]:duration-200 group-hover:[&_path]:stroke-[--accent-9]">
                       <Echoes />
                     </Box>
@@ -256,8 +248,8 @@ export default new Layout(({ children, args }) => {
                       <Box className="flex items-center">
                         <DropdownMenuPrimitive.Root>
                           <DropdownMenuPrimitive.Trigger asChild>
-                            <Button 
-                              variant="ghost" 
+                            <Button
+                              variant="ghost"
                               className="w-10 h-10 p-0 text-[--gray-12] hover:text-[--accent-9] transition-colors flex items-center justify-center"
                             >
                               {loginState ? (
@@ -304,11 +296,9 @@ export default new Layout(({ children, args }) => {
                         </Box>
 
                         {/* 读进度指示器 */}
-                        <Box 
+                        <Box
                           className={`w-10 h-10 flex items-center justify-center ${
-                            scrollProgress > 0 
-                              ? 'block' 
-                              : 'hidden'
+                            scrollProgress > 0 ? "block" : "hidden"
                           }`}
                         >
                           <Button
@@ -316,19 +306,16 @@ export default new Layout(({ children, args }) => {
                             className="w-10 h-10 p-0 text-[--gray-12] hover:text-[--accent-9] transition-colors flex items-center justify-center [&_text]:text-[--gray-12] [&_text:hover]:text-[--accent-9]"
                             onClick={scrollToTop}
                           >
-                            <svg 
-                              className="w-6 h-6"
-                              viewBox="0 0 100 100"
-                            >
+                            <svg className="w-6 h-6" viewBox="0 0 100 100">
                               <text
                                 x="50"
                                 y="55"
                                 className="progress-indicator font-bold transition-colors"
                                 dominantBaseline="middle"
                                 textAnchor="middle"
-                                style={{ 
-                                  fontSize: '56px',
-                                  fill: 'currentColor'
+                                style={{
+                                  fontSize: "56px",
+                                  fill: "currentColor",
                                 }}
                               >
                                 {Math.round(scrollProgress)}
@@ -349,14 +336,8 @@ export default new Layout(({ children, args }) => {
         </Box>
 
         {/* 主要内容区域 */}
-        <Box 
-          id="main-content" 
-          className="flex-1 w-full overflow-auto"
-        >
-          <Container
-            size="4"
-            className="py-8"
-          >
+        <Box id="main-content" className="flex-1 w-full overflow-auto">
+          <Container size="4" className="py-8">
             <main>{children}</main>
           </Container>
         </Box>
@@ -364,4 +345,3 @@ export default new Layout(({ children, args }) => {
     </Theme>
   );
 });
-
diff --git a/frontend/themes/echoes/post.tsx b/frontend/themes/echoes/post.tsx
index b664cb1..9c33ab0 100644
--- a/frontend/themes/echoes/post.tsx
+++ b/frontend/themes/echoes/post.tsx
@@ -1,4 +1,10 @@
-import React, { useMemo, useState, useCallback, useRef, useEffect } from "react";
+import React, {
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from "react";
 import { Template } from "interface/template";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -13,16 +19,16 @@ import {
   ScrollArea,
 } from "@radix-ui/themes";
 import { CalendarIcon, CodeIcon } from "@radix-ui/react-icons";
-import type {  PostDisplay } from "interface/fields";
+import type { PostDisplay } from "interface/fields";
 import type { MetaFunction } from "@remix-run/node";
 import { getColorScheme } from "themes/echoes/utils/colorScheme";
-import MarkdownIt from 'markdown-it';
-import { ComponentPropsWithoutRef } from 'react';
-import remarkGfm from 'remark-gfm';
+import MarkdownIt from "markdown-it";
+import { ComponentPropsWithoutRef } from "react";
+import remarkGfm from "remark-gfm";
 import { toast } from "hooks/Notification";
-import rehypeRaw from 'rehype-raw';
-import remarkEmoji from 'remark-emoji';
-import ReactDOMServer from 'react-dom/server';
+import rehypeRaw from "rehype-raw";
+import remarkEmoji from "remark-emoji";
+import ReactDOMServer from "react-dom/server";
 
 // 示例文章数据
 const mockPost: PostDisplay = {
@@ -373,45 +379,51 @@ function greet(user: User): string {
 `,
   authorName: "Markdown 专家",
   publishedAt: new Date("2024-03-15"),
-  coverImage: "https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=1200&h=600",
+  coverImage:
+    "https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=1200&h=600",
   status: "published",
   isEditor: true,
   createdAt: new Date("2024-03-15"),
   updatedAt: new Date("2024-03-15"),
   taxonomies: {
-    categories: [{ 
-      name: "教程",
-      slug: "tutorial",
-      type: "category"
-    }],
+    categories: [
+      {
+        name: "教程",
+        slug: "tutorial",
+        type: "category",
+      },
+    ],
     tags: [
       { name: "Markdown", slug: "markdown", type: "tag" },
       { name: "排版", slug: "typography", type: "tag" },
-      { name: "写作", slug: "writing", type: "tag" }
-    ]
+      { name: "写作", slug: "writing", type: "tag" },
+    ],
   },
   metadata: [
-    { 
+    {
       id: 1,
       targetType: "post",
       targetId: 1,
       metaKey: "description",
-      metaValue: "从基础语法到高级排版，全面了解 Markdown 的各种用法和技巧。"
+      metaValue: "从基础语法到高级排版，全面了解 Markdown 的各种用法和技巧。",
     },
     {
       id: 2,
       targetType: "post",
       targetId: 1,
       metaKey: "keywords",
-      metaValue: "Markdown,基础语法,高级排版,布局设计"
-    }
-  ]
+      metaValue: "Markdown,基础语法,高级排版,布局设计",
+    },
+  ],
 };
 
 // 添 meta 函数
 export const meta: MetaFunction = () => {
-  const description = mockPost.metadata?.find(m => m.metaKey === "description")?.metaValue || "";
-  const keywords = mockPost.metadata?.find(m => m.metaKey === "keywords")?.metaValue || "";
+  const description =
+    mockPost.metadata?.find((m) => m.metaKey === "description")?.metaValue ||
+    "";
+  const keywords =
+    mockPost.metadata?.find((m) => m.metaKey === "keywords")?.metaValue || "";
 
   return [
     { title: mockPost.title },
@@ -430,7 +442,6 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-
 // 添加复制能的接口
 interface CopyButtonProps {
   code: string;
@@ -449,7 +460,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({ code }) => {
         setCopied(false);
       }, 3000);
     } catch (err) {
-      console.error('复制失败:', err);
+      console.error("复制失败:", err);
       toast.error("复制失败", "请检查浏览器权限设置");
     }
   };
@@ -479,17 +490,17 @@ interface TocItem {
 // 修改 generateSequentialId 函数的实现
 const generateSequentialId = (() => {
   const idMap = new Map<string, number>();
-  
+
   return (postId: string, reset = false) => {
     if (reset) {
       idMap.delete(postId);
-      return '';
+      return "";
     }
-    
+
     if (!idMap.has(postId)) {
       idMap.set(postId, 0);
     }
-    
+
     const counter = idMap.get(postId)!;
     const id = `heading-${counter}`;
     idMap.set(postId, counter + 1);
@@ -498,15 +509,15 @@ const generateSequentialId = (() => {
 })();
 
 export default new Template({}, ({ http, args }) => {
-
-  
   const [toc, setToc] = useState<string[]>([]);
   const [tocItems, setTocItems] = useState<TocItem[]>([]);
   const [activeId, setActiveId] = useState<string>("");
   const contentRef = useRef<HTMLDivElement>(null);
   const [showToc, setShowToc] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
-  const [headingIdsArrays, setHeadingIdsArrays] = useState<{[key: string]: string[]}>({});
+  const [headingIdsArrays, setHeadingIdsArrays] = useState<{
+    [key: string]: string[];
+  }>({});
   const headingIds = useRef<string[]>([]); // 保持原有的 ref
   const containerRef = useRef<HTMLDivElement>(null);
   const isClickScrolling = useRef(false);
@@ -516,56 +527,56 @@ export default new Template({}, ({ http, args }) => {
   }, []);
 
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return;
 
     const md = new MarkdownIt();
     const tocArray: TocItem[] = [];
-    
+
     // 重计数器,传入文章ID
     generateSequentialId(mockPost.id.toString(), true);
-    
+
     let isInCodeBlock = false;
-    
+
     md.renderer.rules.fence = (tokens, idx, options, env, self) => {
       isInCodeBlock = true;
       const result = self.renderToken(tokens, idx, options);
       isInCodeBlock = false;
       return result;
     };
-    
+
     md.renderer.rules.heading_open = (tokens, idx) => {
       const token = tokens[idx];
       const level = parseInt(token.tag.slice(1));
-      
+
       if (level <= 3 && !isInCodeBlock) {
         const content = tokens[idx + 1].content;
         const id = generateSequentialId(mockPost.id.toString());
-        
-        token.attrSet('id', id);
+
+        token.attrSet("id", id);
         tocArray.push({
           id,
           text: content,
-          level
+          level,
         });
       }
       return md.renderer.renderToken(tokens, idx, md.options);
     };
 
     md.render(mockPost.content);
-    
+
     // 只在 ID 数组发生变化时更新
-    const newIds = tocArray.map(item => item.id);
+    const newIds = tocArray.map((item) => item.id);
     if (JSON.stringify(headingIds.current) !== JSON.stringify(newIds)) {
       headingIds.current = [...newIds];
-      setHeadingIdsArrays(prev => ({
+      setHeadingIdsArrays((prev) => ({
         ...prev,
-        [mockPost.id]: [...newIds]
+        [mockPost.id]: [...newIds],
       }));
     }
-    
+
     setToc(newIds);
     setTocItems(tocArray);
-    
+
     if (tocArray.length > 0 && !activeId) {
       setActiveId(tocArray[0].id);
     }
@@ -579,62 +590,94 @@ export default new Template({}, ({ http, args }) => {
 
   const components = useMemo(() => {
     return {
-      h1: ({ children, ...props }: ComponentPropsWithoutRef<'h1'>) => {
+      h1: ({ children, ...props }: ComponentPropsWithoutRef<"h1">) => {
         const headingId = headingIds.current.shift();
         return (
-          <h1 id={headingId} className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mt-6 sm:mt-8 mb-3 sm:mb-4" {...props}>
+          <h1
+            id={headingId}
+            className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mt-6 sm:mt-8 mb-3 sm:mb-4"
+            {...props}
+          >
             {children}
           </h1>
         );
       },
-      h2: ({ children, ...props }: ComponentPropsWithoutRef<'h2'>) => {
+      h2: ({ children, ...props }: ComponentPropsWithoutRef<"h2">) => {
         const headingId = headingIds.current.shift();
         return (
-          <h2 id={headingId} className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold mt-5 sm:mt-6 mb-2 sm:mb-3" {...props}>
+          <h2
+            id={headingId}
+            className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold mt-5 sm:mt-6 mb-2 sm:mb-3"
+            {...props}
+          >
             {children}
           </h2>
         );
       },
-      h3: ({ children, ...props }: ComponentPropsWithoutRef<'h3'>) => {
+      h3: ({ children, ...props }: ComponentPropsWithoutRef<"h3">) => {
         const headingId = headingIds.current.shift();
         return (
-          <h3 id={headingId} className="text-base sm:text-lg md:text-xl lg:text-2xl font-medium mt-4 mb-2" {...props}>
+          <h3
+            id={headingId}
+            className="text-base sm:text-lg md:text-xl lg:text-2xl font-medium mt-4 mb-2"
+            {...props}
+          >
             {children}
           </h3>
         );
       },
-      p: ({ node, ...props }: ComponentPropsWithoutRef<'p'> & { node?: any }) => (
-        <p 
-          className="text-sm sm:text-base md:text-lg leading-relaxed mb-3 sm:mb-4 text-[--gray-11]" 
+      p: ({
+        node,
+        ...props
+      }: ComponentPropsWithoutRef<"p"> & { node?: any }) => (
+        <p
+          className="text-sm sm:text-base md:text-lg leading-relaxed mb-3 sm:mb-4 text-[--gray-11]"
           {...props}
         />
       ),
-      ul: ({ children, ...props }: ComponentPropsWithoutRef<'ul'>) => (
-        <ul className="list-disc pl-4 sm:pl-6 mb-3 sm:mb-4 space-y-1.5 sm:space-y-2 text-[--gray-11]" {...props}>
+      ul: ({ children, ...props }: ComponentPropsWithoutRef<"ul">) => (
+        <ul
+          className="list-disc pl-4 sm:pl-6 mb-3 sm:mb-4 space-y-1.5 sm:space-y-2 text-[--gray-11]"
+          {...props}
+        >
           {children}
         </ul>
       ),
-      ol: ({ children, ...props }: ComponentPropsWithoutRef<'ol'>) => (
-        <ol className="list-decimal pl-4 sm:pl-6 mb-3 sm:mb-4 space-y-1.5 sm:space-y-2 text-[--gray-11]" {...props}>
+      ol: ({ children, ...props }: ComponentPropsWithoutRef<"ol">) => (
+        <ol
+          className="list-decimal pl-4 sm:pl-6 mb-3 sm:mb-4 space-y-1.5 sm:space-y-2 text-[--gray-11]"
+          {...props}
+        >
           {children}
         </ol>
       ),
-      li: ({ children, ...props }: ComponentPropsWithoutRef<'li'>) => (
-        <li className="text-sm sm:text-base md:text-lg leading-relaxed" {...props}>
+      li: ({ children, ...props }: ComponentPropsWithoutRef<"li">) => (
+        <li
+          className="text-sm sm:text-base md:text-lg leading-relaxed"
+          {...props}
+        >
           {children}
         </li>
       ),
-      blockquote: ({ children, ...props }: ComponentPropsWithoutRef<'blockquote'>) => (
-        <blockquote className="border-l-4 border-[--gray-6] pl-4 sm:pl-6 py-2 my-3 sm:my-4 text-[--gray-11] italic" {...props}>
+      blockquote: ({
+        children,
+        ...props
+      }: ComponentPropsWithoutRef<"blockquote">) => (
+        <blockquote
+          className="border-l-4 border-[--gray-6] pl-4 sm:pl-6 py-2 my-3 sm:my-4 text-[--gray-11] italic"
+          {...props}
+        >
           {children}
         </blockquote>
       ),
-      pre: ({ children, ...props }: ComponentPropsWithoutRef<'pre'>) => {
+      pre: ({ children, ...props }: ComponentPropsWithoutRef<"pre">) => {
         const childArray = React.Children.toArray(children);
-        
+
         // 检查是否包含代码块
         const codeElement = childArray.find(
-          child => React.isValidElement(child) && child.props.className?.includes('language-')
+          (child) =>
+            React.isValidElement(child) &&
+            child.props.className?.includes("language-"),
         );
 
         // 如果是代码块，让 code 组件处理
@@ -643,76 +686,88 @@ export default new Template({}, ({ http, args }) => {
         }
 
         // 获取内容
-        let content = '';
-        if (typeof children === 'string') {
+        let content = "";
+        if (typeof children === "string") {
           content = children;
         } else if (Array.isArray(children)) {
-          content = children.map(child => {
-            if (typeof child === 'string') return child;
-            if (React.isValidElement(child)) {
-              // 使用 renderToString 而不是 renderToStaticMarkup
-              return ReactDOMServer.renderToString(child as React.ReactElement)
-                // 移除 React 添加的 data 属性
-                .replace(/\s+data-reactroot=""/g, '')
-                // 移除已经存在的 HTML 实体编码
-                .replace(/&quot;/g, '"')
-                .replace(/&amp;/g, '&')
-                .replace(/&lt;/g, '<')
-                .replace(/&gt;/g, '>')
-                .replace(/&#39;/g, "'");
-            }
-            return '';
-          }).join('');
+          content = children
+            .map((child) => {
+              if (typeof child === "string") return child;
+              if (React.isValidElement(child)) {
+                // 使用 renderToString 而不是 renderToStaticMarkup
+                return (
+                  ReactDOMServer.renderToString(child as React.ReactElement)
+                    // 移除 React 添加的 data 属性
+                    .replace(/\s+data-reactroot=""/g, "")
+                    // 移除已经存在的 HTML 实体编码
+                    .replace(/&quot;/g, '"')
+                    .replace(/&amp;/g, "&")
+                    .replace(/&lt;/g, "<")
+                    .replace(/&gt;/g, ">")
+                    .replace(/&#39;/g, "'")
+                );
+              }
+              return "";
+            })
+            .join("");
         } else if (React.isValidElement(children)) {
-          content = ReactDOMServer.renderToString(children as React.ReactElement)
-            .replace(/\s+data-reactroot=""/g, '')
+          content = ReactDOMServer.renderToString(
+            children as React.ReactElement,
+          )
+            .replace(/\s+data-reactroot=""/g, "")
             .replace(/&quot;/g, '"')
-            .replace(/&amp;/g, '&')
-            .replace(/&lt;/g, '<')
-            .replace(/&gt;/g, '>')
+            .replace(/&amp;/g, "&")
+            .replace(/&lt;/g, "<")
+            .replace(/&gt;/g, ">")
             .replace(/&#39;/g, "'");
         }
 
         // 普通预格式化文本
         return (
-          <pre 
+          <pre
             className="my-4 p-4 rounded-lg overflow-x-auto whitespace-pre-wrap
                        bg-[--gray-3] border border-[--gray-6] text-[--gray-12]
                        text-sm leading-relaxed font-mono"
             {...props}
           >
-            {content
-             }
+            {content}
           </pre>
         );
       },
-      code: ({ inline, className, children, ...props }: ComponentPropsWithoutRef<'code'> & { 
-        inline?: boolean,
-        className?: string 
+      code: ({
+        inline,
+        className,
+        children,
+        ...props
+      }: ComponentPropsWithoutRef<"code"> & {
+        inline?: boolean;
+        className?: string;
       }) => {
-        const match = /language-(\w+)/.exec(className || '');
-        const code = String(children).replace(/\n$/, '');
-      
+        const match = /language-(\w+)/.exec(className || "");
+        const code = String(children).replace(/\n$/, "");
+
         // 如果是内联代码
         if (!className || inline) {
           return (
-            <code 
-              className="px-2 py-1 rounded-md bg-[--gray-4] text-[--accent-11] font-medium text-[0.85em]" 
+            <code
+              className="px-2 py-1 rounded-md bg-[--gray-4] text-[--accent-11] font-medium text-[0.85em]"
               {...props}
             >
               {children}
             </code>
           );
         }
-      
-        const language = match ? match[1] : '';
-        
+
+        const language = match ? match[1] : "";
+
         // 特殊处理表格语法
-        const isTable = code.includes('|') && code.includes('\n') && code.includes('---');
-        
+        const isTable =
+          code.includes("|") && code.includes("\n") && code.includes("---");
+
         return (
           <div className="my-4 sm:my-6">
-            <div className="flex justify-between items-center h-9 sm:h-10 px-4 sm:px-6 
+            <div
+              className="flex justify-between items-center h-9 sm:h-10 px-4 sm:px-6 
               border-t border-x border-[--gray-6] 
               bg-[--gray-3] dark:bg-[--gray-3]
               rounded-t-lg"
@@ -722,7 +777,7 @@ export default new Template({}, ({ http, args }) => {
               </div>
               <CopyButton code={code} />
             </div>
-            
+
             <div className="border border-[--gray-6] rounded-b-lg bg-white dark:bg-[--gray-1]">
               <div className="overflow-x-auto">
                 <div className="p-4 sm:p-6">
@@ -731,8 +786,8 @@ export default new Template({}, ({ http, args }) => {
                     <pre
                       className="m-0 p-0 bg-transparent font-mono text-[0.9rem] leading-relaxed overflow-x-auto"
                       style={{
-                        color: 'inherit',
-                        whiteSpace: 'pre'
+                        color: "inherit",
+                        whiteSpace: "pre",
                       }}
                     >
                       {code}
@@ -743,15 +798,15 @@ export default new Template({}, ({ http, args }) => {
                       language={language || "text"}
                       style={{
                         ...oneLight,
-                        'punctuation': {
-                          color: 'var(--gray-12)'
+                        punctuation: {
+                          color: "var(--gray-12)",
                         },
-                        'operator': {
-                          color: 'var(--gray-12)'
+                        operator: {
+                          color: "var(--gray-12)",
+                        },
+                        symbol: {
+                          color: "var(--gray-12)",
                         },
-                        'symbol': {
-                          color: 'var(--gray-12)'
-                        }
                       }}
                       customStyle={{
                         margin: 0,
@@ -763,8 +818,8 @@ export default new Template({}, ({ http, args }) => {
                       codeTagProps={{
                         className: "dark:text-[--gray-12]",
                         style: {
-                          color: "inherit"
-                        }
+                          color: "inherit",
+                        },
                       }}
                     >
                       {code}
@@ -777,7 +832,7 @@ export default new Template({}, ({ http, args }) => {
         );
       },
       // 修改表格相关组件的响应式设计
-      table: ({ children, ...props }: ComponentPropsWithoutRef<'table'>) => (
+      table: ({ children, ...props }: ComponentPropsWithoutRef<"table">) => (
         <div className="w-full my-4 sm:my-6 -mx-4 sm:mx-0 overflow-hidden">
           <div className="scroll-container overflow-x-auto">
             <div className="min-w-[640px] sm:min-w-0">
@@ -790,17 +845,21 @@ export default new Template({}, ({ http, args }) => {
           </div>
         </div>
       ),
-      
-      th: ({ children, style, ...props }: ComponentPropsWithoutRef<'th'> & { style?: React.CSSProperties }) => {
+
+      th: ({
+        children,
+        style,
+        ...props
+      }: ComponentPropsWithoutRef<"th"> & { style?: React.CSSProperties }) => {
         // 获取对齐方式
         const getAlignment = () => {
-          if (style?.textAlign === 'center') return 'text-center';
-          if (style?.textAlign === 'right') return 'text-right';
-          return 'text-left';
+          if (style?.textAlign === "center") return "text-center";
+          if (style?.textAlign === "right") return "text-right";
+          return "text-left";
         };
 
         return (
-          <th 
+          <th
             className={`px-4 sm:px-4 md:px-6 py-2 sm:py-3 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider
                       text-[--gray-12] break-words hyphens-auto
                       bg-[--gray-3] dark:bg-[--gray-3]
@@ -813,17 +872,21 @@ export default new Template({}, ({ http, args }) => {
           </th>
         );
       },
-      
-      td: ({ children, style, ...props }: ComponentPropsWithoutRef<'td'> & { style?: React.CSSProperties }) => {
+
+      td: ({
+        children,
+        style,
+        ...props
+      }: ComponentPropsWithoutRef<"td"> & { style?: React.CSSProperties }) => {
         // 获取父级 th 的对齐方式
         const getAlignment = () => {
-          if (style?.textAlign === 'center') return 'text-center';
-          if (style?.textAlign === 'right') return 'text-right';
-          return 'text-left';
+          if (style?.textAlign === "center") return "text-center";
+          if (style?.textAlign === "right") return "text-right";
+          return "text-left";
         };
 
         return (
-          <td 
+          <td
             className={`px-4 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 text-xs sm:text-sm text-[--gray-11] break-words hyphens-auto
                       [&:first-child]:font-medium [&:first-child]:text-[--gray-12]
                       align-top ${getAlignment()}`}
@@ -834,19 +897,25 @@ export default new Template({}, ({ http, args }) => {
         );
       },
       // 修改 details 组件
-      details: ({ node, ...props }: ComponentPropsWithoutRef<'details'> & { node?: any }) => (
-        <details 
+      details: ({
+        node,
+        ...props
+      }: ComponentPropsWithoutRef<"details"> & { node?: any }) => (
+        <details
           className="my-4 rounded-lg border border-[--gray-6] bg-[--gray-2] overflow-hidden
                      marker:text-[--gray-11] [&[open]]:bg-[--gray-1]
                      [&>*:not(summary)]:px-10 [&>*:not(summary)]:py-3
-                     " 
+                     "
           {...props}
         />
       ),
-      
+
       // 修改 summary 组件
-      summary: ({ node, ...props }: ComponentPropsWithoutRef<'summary'> & { node?: any }) => (
-        <summary 
+      summary: ({
+        node,
+        ...props
+      }: ComponentPropsWithoutRef<"summary"> & { node?: any }) => (
+        <summary
           className="px-4 py-3 cursor-pointer hover:bg-[--gray-3] transition-colors
                      text-[--gray-12] font-medium select-none
                      marker:text-[--gray-11]
@@ -859,7 +928,7 @@ export default new Template({}, ({ http, args }) => {
 
   // 修改滚动监听逻辑
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return;
 
     let scrollTimeout: NodeJS.Timeout;
 
@@ -873,14 +942,16 @@ export default new Template({}, ({ http, args }) => {
 
         // 添加防抖，等待滚动结束后再更新高亮
         scrollTimeout = setTimeout(() => {
-          const visibleEntries = entries.filter(entry => entry.isIntersecting);
-          
+          const visibleEntries = entries.filter(
+            (entry) => entry.isIntersecting,
+          );
+
           if (visibleEntries.length > 0) {
             const visibleHeadings = visibleEntries
-              .map(entry => ({
+              .map((entry) => ({
                 id: entry.target.id,
                 top: entry.boundingClientRect.top,
-                y: entry.intersectionRatio
+                y: entry.intersectionRatio,
               }))
               .sort((a, b) => {
                 if (Math.abs(a.y - b.y) < 0.1) {
@@ -890,8 +961,8 @@ export default new Template({}, ({ http, args }) => {
               });
 
             const mostVisible = visibleHeadings[0];
-            
-            setActiveId(currentActiveId => {
+
+            setActiveId((currentActiveId) => {
               if (mostVisible.id !== currentActiveId) {
                 return mostVisible.id;
               }
@@ -902,9 +973,9 @@ export default new Template({}, ({ http, args }) => {
       },
       {
         root: document.querySelector("#main-content"),
-        rootMargin: '-10% 0px -70% 0px',
-        threshold: [0, 0.25, 0.5, 0.75, 1]
-      }
+        rootMargin: "-10% 0px -70% 0px",
+        threshold: [0, 0.25, 0.5, 0.75, 1],
+      },
     );
 
     if (isMounted) {
@@ -932,7 +1003,7 @@ export default new Template({}, ({ http, args }) => {
   // 修改点击处理函数
   const handleTocClick = useCallback((e: React.MouseEvent, itemId: string) => {
     e.preventDefault();
-    
+
     const element = document.getElementById(itemId);
     const container = document.querySelector("#main-content");
     const contentBox = document.querySelector(".prose");
@@ -940,15 +1011,15 @@ export default new Template({}, ({ http, args }) => {
     if (element && container && contentBox) {
       // 设置点击滚动标志
       isClickScrolling.current = true;
-      
+
       // 立即更新高亮，不等待滚动
       setActiveId(itemId);
-      
+
       // 计算滚动位置
       const elementRect = element.getBoundingClientRect();
       const contentBoxRect = contentBox.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
-      
+
       const relativeTop = elementRect.top - contentBoxRect.top;
       const contentOffset = contentBoxRect.top - containerRect.top;
       const scrollDistance = container.scrollTop + relativeTop + contentOffset;
@@ -958,7 +1029,7 @@ export default new Template({}, ({ http, args }) => {
         top: scrollDistance,
         behavior: "smooth",
       });
-      
+
       // 延迟重置 isClickScrolling 标志
       // 增加延迟时间，确保滚动完全结束
       const resetTimeout = setTimeout(() => {
@@ -982,15 +1053,15 @@ export default new Template({}, ({ http, args }) => {
       )}
 
       {isMounted && showToc && (
-        <div 
+        <div
           className="lg:hidden fixed top-[var(--header-height)] inset-x-0 bottom-0 z-50 bg-black/50 transition-opacity duration-300"
           onClick={() => setShowToc(false)}
         >
-          <div 
+          <div
             className="absolute right-0 top-0 bottom-0 w-72 bg-white dark:bg-[--gray-1] shadow-xl
               transform transition-transform duration-300 ease-out
               translate-x-0 animate-in slide-in-from-right"
-            onClick={e => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
           >
             <ScrollArea
               type="hover"
@@ -1001,29 +1072,37 @@ export default new Template({}, ({ http, args }) => {
                 {tocItems.map((item, index) => {
                   if (item.level > 3) return null;
                   const isActive = activeId === item.id;
-                  
+
                   return (
                     <a
                       key={`${item.id}-${index}`}
                       href={`#${item.id}`}
-                      ref={node => {
+                      ref={(node) => {
                         // 当目录打开且是当前高亮项时，将其滚动到居中位置
                         if (node && isActive && showToc) {
                           requestAnimationFrame(() => {
                             // 直接查找最近的滚动容器
-                            const scrollContainer = node.closest('.rt-ScrollAreaViewport');
+                            const scrollContainer = node.closest(
+                              ".rt-ScrollAreaViewport",
+                            );
                             if (scrollContainer) {
-                              const containerHeight = scrollContainer.clientHeight;
+                              const containerHeight =
+                                scrollContainer.clientHeight;
                               const elementTop = node.offsetTop;
                               const elementHeight = node.clientHeight;
-                              
+
                               // 确保计算的滚动位置是正数
-                              const scrollTop = Math.max(0, elementTop - (containerHeight / 2) + (elementHeight / 2));
-                              
+                              const scrollTop = Math.max(
+                                0,
+                                elementTop -
+                                  containerHeight / 2 +
+                                  elementHeight / 2,
+                              );
+
                               // 使用 scrollContainer 而不是 container
                               scrollContainer.scrollTo({
                                 top: scrollTop,
-                                behavior: 'smooth'
+                                behavior: "smooth",
                               });
                             }
                           });
@@ -1040,8 +1119,8 @@ export default new Template({}, ({ http, args }) => {
                         ${
                           item.level === 1
                             ? "text-sm font-medium"
-                            : item.level === 2 
-                              ? "text-[0.8125rem]" 
+                            : item.level === 2
+                              ? "text-[0.8125rem]"
                               : `text-xs ${isActive ? "text-[--accent-11]" : "text-[--gray-10]"}`
                         }
                       `}
@@ -1050,7 +1129,7 @@ export default new Template({}, ({ http, args }) => {
                         const element = document.getElementById(item.id);
                         if (element) {
                           const yOffset = -80;
-                          element.scrollIntoView({ behavior: 'smooth' });
+                          element.scrollIntoView({ behavior: "smooth" });
                           window.scrollBy(0, yOffset);
                           setActiveId(item.id);
                           setShowToc(false);
@@ -1077,7 +1156,8 @@ export default new Template({}, ({ http, args }) => {
     }
 
     return (
-      <Box className="prose dark:prose-invert max-w-none 
+      <Box
+        className="prose dark:prose-invert max-w-none 
         [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:!m-0 [&_pre]:!border-0
         [&_.prism-code]:!bg-transparent [&_.prism-code]:!shadow-none
         [&_pre_.prism-code]:!bg-transparent [&_pre_.prism-code]:!shadow-none
@@ -1086,9 +1166,10 @@ export default new Template({}, ({ http, args }) => {
         [&_:not(pre)>code]:![&::before]:hidden [&_:not(pre)>code]:![&::after]:hidden
         [&_:not(pre)>code]:[&::before]:content-none [&_:not(pre)>code]:[&::after]:content-none
         [&_:not(pre)>code]:!bg-[--gray-4] [&_:not(pre)>code]:!text-[--accent-11]
-      ">
+      "
+      >
         <div ref={contentRef}>
-          <ReactMarkdown 
+          <ReactMarkdown
             components={components}
             remarkPlugins={[remarkGfm, remarkEmoji]}
             rehypePlugins={[rehypeRaw]}
@@ -1102,16 +1183,16 @@ export default new Template({}, ({ http, args }) => {
   }, [mockPost.content, components, mockPost.id, headingIdsArrays]); // 添加必要的依赖
 
   return (
-    <Container 
+    <Container
       ref={containerRef}
-      size={{initial: "2", sm: "3", md: "4"}}
+      size={{ initial: "2", sm: "3", md: "4" }}
       className="px-4 sm:px-6 md:px-8"
     >
       {isMounted && mobileMenu}
-      
-      <Flex 
-        className="relative flex-col lg:flex-row" 
-        gap={{initial: "4", lg: "8"}}
+
+      <Flex
+        className="relative flex-col lg:flex-row"
+        gap={{ initial: "4", lg: "8" }}
       >
         {/* 文章体 - 调整宽度计算 */}
         <Box className="w-full lg:w-[calc(100%-12rem)] xl:w-[calc(100%-13rem)]">
@@ -1119,21 +1200,18 @@ export default new Template({}, ({ http, args }) => {
             {/* 头部 */}
             <Box className="mb-4 sm:mb-8">
               <Heading
-                size={{initial: "6", sm: "7", md: "8"}}
+                size={{ initial: "6", sm: "7", md: "8" }}
                 className="mb-4 sm:mb-6 leading-tight text-[--gray-12] font-bold tracking-tight"
               >
                 {mockPost.title}
               </Heading>
 
               <Flex
-                gap={{initial: "3", sm: "4", md: "6"}}
+                gap={{ initial: "3", sm: "4", md: "6" }}
                 className="items-center text-[--gray-11] flex-wrap"
               >
                 {/* 作者名字 */}
-                <Text
-                  size="2"
-                  weight="medium"
-                >
+                <Text size="2" weight="medium">
                   {mockPost.authorName}
                 </Text>
 
@@ -1141,10 +1219,7 @@ export default new Template({}, ({ http, args }) => {
                 <Box className="w-px h-4 bg-[--gray-6]" />
 
                 {/* 发布日期 */}
-                <Flex
-                  align="center"
-                  gap="2"
-                >
+                <Flex align="center" gap="2">
                   <CalendarIcon className="w-3.5 h-3.5" />
                   <Text size="2">
                     {mockPost.publishedAt?.toLocaleDateString("zh-CN", {
@@ -1258,9 +1333,9 @@ export default new Template({}, ({ http, args }) => {
                         }
                         ${item.level === 2 ? "ml-3" : item.level === 3 ? "ml-6" : ""}
                         ${
-                          item.level === 2 
-                            ? "text-[0.75rem]" 
-                            : item.level === 3 
+                          item.level === 2
+                            ? "text-[0.75rem]"
+                            : item.level === 3
                               ? `text-[0.7rem] ${activeId === item.id ? "text-[--accent-11]" : "text-[--gray-10]"}`
                               : ""
                         }
diff --git a/frontend/themes/echoes/posts.tsx b/frontend/themes/echoes/posts.tsx
index 0d4cba8..4141664 100644
--- a/frontend/themes/echoes/posts.tsx
+++ b/frontend/themes/echoes/posts.tsx
@@ -1,11 +1,19 @@
 import { Template } from "interface/template";
-import { Container, Heading, Text, Flex, Card, Button, ScrollArea } from "@radix-ui/themes";
+import {
+  Container,
+  Heading,
+  Text,
+  Flex,
+  Card,
+  Button,
+  ScrollArea,
+} from "@radix-ui/themes";
 import {
   CalendarIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
 } from "@radix-ui/react-icons";
-import {  PostDisplay } from "interface/fields";
+import { PostDisplay } from "interface/fields";
 import { useMemo } from "react";
 
 import { ImageLoader } from "hooks/ParticleImage";
@@ -25,19 +33,18 @@ const mockArticles: PostDisplay[] = [
     createdAt: new Date("2024-03-15"),
     updatedAt: new Date("2024-03-15"),
     taxonomies: {
-      categories: [
-        { name: "前端开发", slug: "frontend", type: "category" }
-      ],
+      categories: [{ name: "前端开发", slug: "frontend", type: "category" }],
       tags: [
         { name: "工程化", slug: "engineering", type: "tag" },
-        { name: "效率提升", slug: "efficiency", type: "tag" }
-      ]
-    }
+        { name: "效率提升", slug: "efficiency", type: "tag" },
+      ],
+    },
   },
   {
     id: 2,
     title: "React 18 新特性详解",
-    content: "React 18 带来了许多令人兴奋的新特性，包括并发渲染、自动批处理更新...",
+    content:
+      "React 18 带来了许多令人兴奋的新特性，包括并发渲染、自动批处理更新...",
     authorName: "李四",
     publishedAt: new Date("2024-03-14"),
     coverImage: "",
@@ -46,19 +53,18 @@ const mockArticles: PostDisplay[] = [
     createdAt: new Date("2024-03-14"),
     updatedAt: new Date("2024-03-14"),
     taxonomies: {
-      categories: [
-        { name: "前端开发", slug: "frontend", type: "category" }
-      ],
+      categories: [{ name: "前端开发", slug: "frontend", type: "category" }],
       tags: [
         { name: "React", slug: "react", type: "tag" },
-        { name: "JavaScript", slug: "javascript", type: "tag" }
-      ]
-    }
+        { name: "JavaScript", slug: "javascript", type: "tag" },
+      ],
+    },
   },
   {
     id: 3,
     title: "JavaScript 性能优化技巧",
-    content: "在这篇文章中，我们将探讨一些提高 JavaScript 性能的技巧和最佳实践...",
+    content:
+      "在这篇文章中，我们将探讨一些提高 JavaScript 性能的技巧和最佳实践...",
     authorName: "王五",
     publishedAt: new Date("2024-03-13"),
     coverImage: "ssssxx",
@@ -68,13 +74,17 @@ const mockArticles: PostDisplay[] = [
     updatedAt: new Date("2024-03-13"),
     taxonomies: {
       categories: [
-        { name: "性能优化", slug: "performance-optimization", type: "category" }
+        {
+          name: "性能优化",
+          slug: "performance-optimization",
+          type: "category",
+        },
       ],
       tags: [
         { name: "JavaScript", slug: "javascript", type: "tag" },
-        { name: "性能", slug: "performance", type: "tag" }
-      ]
-    }
+        { name: "性能", slug: "performance", type: "tag" },
+      ],
+    },
   },
   {
     id: 4,
@@ -82,28 +92,31 @@ const mockArticles: PostDisplay[] = [
     content: "移动端开发中的各种适配问题及解决方案...",
     authorName: "田六",
     publishedAt: new Date("2024-03-13"),
-    coverImage: "https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2?w=500&auto=format",
+    coverImage:
+      "https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2?w=500&auto=format",
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-13"),
     updatedAt: new Date("2024-03-13"),
     taxonomies: {
       categories: [
-        { name: "移动开发", slug: "mobile-development", type: "category" }
+        { name: "移动开发", slug: "mobile-development", type: "category" },
       ],
       tags: [
         { name: "移动端", slug: "mobile", type: "tag" },
-        { name: "响应式", slug: "responsive", type: "tag" }
-      ]
-    }
+        { name: "响应式", slug: "responsive", type: "tag" },
+      ],
+    },
   },
   {
     id: 5,
     title: "全栈开发：从前端到云原生的完整指南",
-    content: "本文将深入探讨现代全栈开发的各个方面，包括前端框架选择、后端架构设计、数据库优化、微服务部署以及云原生实践...",
+    content:
+      "本文将深入探讨现代全栈开发的各个方面，包括前端框架选择、后端架构设计、数据库优化、微服务部署以及云原生实践...",
     authorName: "赵七",
     publishedAt: new Date("2024-03-12"),
-    coverImage: "https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2?w=500&auto=format",
+    coverImage:
+      "https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2?w=500&auto=format",
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-12"),
@@ -114,7 +127,7 @@ const mockArticles: PostDisplay[] = [
         { name: "云原生", slug: "cloud-native", type: "category" },
         { name: "微服务", slug: "microservices", type: "category" },
         { name: "DevOps", slug: "devops", type: "category" },
-        { name: "系统架构", slug: "system-architecture", type: "category" }
+        { name: "系统架构", slug: "system-architecture", type: "category" },
       ],
       tags: [
         { name: "React", slug: "react", type: "tag" },
@@ -124,17 +137,19 @@ const mockArticles: PostDisplay[] = [
         { name: "MongoDB", slug: "mongodb", type: "tag" },
         { name: "微服务", slug: "microservices", type: "tag" },
         { name: "CI/CD", slug: "ci-cd", type: "tag" },
-        { name: "云计算", slug: "cloud-computing", type: "tag" }
-      ]
-    }
+        { name: "云计算", slug: "cloud-computing", type: "tag" },
+      ],
+    },
   },
   {
     id: 6,
     title: "深入浅出 TypeScript 高级特性",
-    content: "探索 TypeScript 的高级类型系统、装饰器、类型编程等特性，以及在大型项目中的最佳实践...",
+    content:
+      "探索 TypeScript 的高级类型系统、装饰器、类型编程等特性，以及在大型项目中的最佳实践...",
     authorName: "孙八",
     publishedAt: new Date("2024-03-11"),
-    coverImage: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=500&auto=format",
+    coverImage:
+      "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=500&auto=format",
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-11"),
@@ -142,47 +157,55 @@ const mockArticles: PostDisplay[] = [
     taxonomies: {
       categories: [
         { name: "TypeScript", slug: "typescript", type: "category" },
-        { name: "编程语言", slug: "programming-languages", type: "category" }
+        { name: "编程语言", slug: "programming-languages", type: "category" },
       ],
       tags: [
         { name: "类型系统", slug: "type-system", type: "tag" },
         { name: "泛型编程", slug: "generic-programming", type: "tag" },
         { name: "装饰器", slug: "decorators", type: "tag" },
-        { name: "类型推导", slug: "type-inference", type: "tag" }
-      ]
-    }
+        { name: "类型推导", slug: "type-inference", type: "tag" },
+      ],
+    },
   },
   {
     id: 7,
     title: "Web 性能优化：从理论到实践",
-    content: "全面解析 Web 性能优化策略，包括资源加载优化、渲染性能优化、网络优化等多个...",
+    content:
+      "全面解析 Web 性能优化策略，包括资源加载优化、渲染性能优化、网络优化等多个...",
     authorName: "周九",
     publishedAt: new Date("2024-03-10"),
-    coverImage: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=500&auto=format",
+    coverImage:
+      "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=500&auto=format",
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-10"),
     updatedAt: new Date("2024-03-10"),
     taxonomies: {
       categories: [
-        { name: "性能优化", slug: "performance-optimization", type: "category" },
-        { name: "前端开发", slug: "frontend-development", type: "category" }
+        {
+          name: "性能优化",
+          slug: "performance-optimization",
+          type: "category",
+        },
+        { name: "前端开发", slug: "frontend-development", type: "category" },
       ],
       tags: [
         { name: "性能监控", slug: "performance-monitoring", type: "tag" },
         { name: "懒加载", slug: "lazy-loading", type: "tag" },
         { name: "缓存策略", slug: "caching-strategies", type: "tag" },
-        { name: "代码分割", slug: "code-splitting", type: "tag" }
-      ]
-    }
+        { name: "代码分割", slug: "code-splitting", type: "tag" },
+      ],
+    },
   },
   {
     id: 8,
     title: "微前端架构实践指南",
-    content: "详细介绍微前端的架构设计、实现方案、应用集成以及实际项目中的经验总结...",
+    content:
+      "详细介绍微前端的架构设计、实现方案、应用集成以及实际项目中的经验总结...",
     authorName: "吴十",
     publishedAt: new Date("2024-03-09"),
-    coverImage: "https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=500&auto=format",
+    coverImage:
+      "https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=500&auto=format",
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-09"),
@@ -190,23 +213,25 @@ const mockArticles: PostDisplay[] = [
     taxonomies: {
       categories: [
         { name: "架构设计", slug: "architecture-design", type: "category" },
-        { name: "微前端", slug: "micro-frontends", type: "category" }
+        { name: "微前端", slug: "micro-frontends", type: "category" },
       ],
       tags: [
         { name: "qiankun", slug: "qiankun", type: "tag" },
         { name: "single-spa", slug: "single-spa", type: "tag" },
         { name: "模块联邦", slug: "module-federation", type: "tag" },
-        { name: "应用通信", slug: "application-communication", type: "tag" }
-      ]
-    }
+        { name: "应用通信", slug: "application-communication", type: "tag" },
+      ],
+    },
   },
   {
     id: 9,
     title: "AI 驱动的前端开发：从概念到实践",
-    content: "探索如何将人工智能技术融入前端开发流程，包括智能代码补全、自动化测试、UI 生成、性能优化建议等实践应用...",
+    content:
+      "探索如何将人工智能技术融入前端开发流程，包括智能代码补全、自动化测试、UI 生成、性能优化建议等实践应用...",
     authorName: "陈十一",
     publishedAt: new Date("2024-03-08"),
-    coverImage: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=500&auto=format",
+    coverImage:
+      "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=500&auto=format",
     status: "published",
     isEditor: false,
     createdAt: new Date("2024-03-08"),
@@ -214,23 +239,23 @@ const mockArticles: PostDisplay[] = [
     taxonomies: {
       categories: [
         { name: "人工智能", slug: "artificial-intelligence", type: "category" },
-        { name: "前端开发", slug: "frontend-development", type: "category" }
+        { name: "前端开发", slug: "frontend-development", type: "category" },
       ],
       tags: [
         { name: "AI开发", slug: "ai-development", type: "tag" },
         { name: "智能化", slug: "intelligence", type: "tag" },
         { name: "自动化", slug: "automation", type: "tag" },
-        { name: "开发效率", slug: "development-efficiency", type: "tag" }
-      ]
-    }
-  }
+        { name: "开发效率", slug: "development-efficiency", type: "tag" },
+      ],
+    },
+  },
 ];
 
 export default new Template({}, ({ http, args }) => {
   const articleData = useMemo(() => mockArticles, []);
   const totalPages = 25; // 假设有25页
   const currentPage = 1; // 当前页码
-  
+
   // 修改生成分页数组的函数，不再需要省略号
   const getPageNumbers = (total: number) => {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -239,19 +264,20 @@ export default new Template({}, ({ http, args }) => {
   // 修改分页部分的渲染
   const renderPageNumbers = () => {
     const pages = getPageNumbers(totalPages);
-    
-    return pages.map(page => (
-      <div 
+
+    return pages.map((page) => (
+      <div
         key={page}
         className={`min-w-[32px] h-8 rounded-md transition-all duration-300 cursor-pointer
           flex items-center justify-center group/item whitespace-nowrap
-          ${page === currentPage 
-            ? 'bg-[--accent-9] text-[--text-primary]' 
-            : 'text-[--text-secondary] hover:text-[--text-primary] hover:bg-[--accent-3]'
+          ${
+            page === currentPage
+              ? "bg-[--accent-9] text-[--text-primary]"
+              : "text-[--text-secondary] hover:text-[--text-primary] hover:bg-[--accent-3]"
           }`}
       >
-        <Text 
-          size="1" 
+        <Text
+          size="1"
           weight={page === currentPage ? "medium" : "regular"}
           className="group-hover/item:scale-110 transition-transform"
         >
@@ -290,8 +316,10 @@ export default new Template({}, ({ http, args }) => {
                     {article.title}
                   </Heading>
 
-                  <Text className="text-[--text-secondary] text-xs 
-                    line-clamp-2 leading-relaxed">
+                  <Text
+                    className="text-[--text-secondary] text-xs 
+                    line-clamp-2 leading-relaxed"
+                  >
                     {article.content}
                   </Text>
                 </div>
@@ -299,9 +327,9 @@ export default new Template({}, ({ http, args }) => {
 
               <div className="flex flex-col gap-2">
                 <div className="flex items-center gap-3">
-                  <ScrollArea 
-                    type="hover" 
-                    scrollbars="horizontal" 
+                  <ScrollArea
+                    type="hover"
+                    scrollbars="horizontal"
                     className="scroll-container flex-1"
                   >
                     <Flex gap="2" className="flex-nowrap">
@@ -322,7 +350,11 @@ export default new Template({}, ({ http, args }) => {
                     </Flex>
                   </ScrollArea>
 
-                  <Flex gap="2" align="center" className="text-[--text-tertiary] flex-shrink-0">
+                  <Flex
+                    gap="2"
+                    align="center"
+                    className="text-[--text-tertiary] flex-shrink-0"
+                  >
                     <CalendarIcon className="w-4 h-4" />
                     <Text size="2">
                       {article.publishedAt?.toLocaleDateString("zh-CN", {
@@ -348,11 +380,11 @@ export default new Template({}, ({ http, args }) => {
                         ${getColorScheme(tag.name).bg} ${getColorScheme(tag.name).text}
                         border ${getColorScheme(tag.name).border} ${getColorScheme(tag.name).hover}`}
                     >
-                      <span 
+                      <span
                         className={`inline-block w-1 h-1 rounded-full ${getColorScheme(tag.name).dot}`}
-                        style={{ 
+                        style={{
                           flexShrink: 0,
-                          opacity: 0.8
+                          opacity: 0.8,
                         }}
                       />
                       {tag.name}
@@ -366,13 +398,13 @@ export default new Template({}, ({ http, args }) => {
       </div>
 
       <div className="px-4 md:px-0">
-        <Flex 
-          align="center" 
-          justify="between" 
+        <Flex
+          align="center"
+          justify="between"
           className="max-w-[800px] mx-auto"
         >
-          <Button 
-            variant="ghost" 
+          <Button
+            variant="ghost"
             className="group/nav h-8 md:px-3 text-sm hidden md:flex"
             disabled={true}
           >
@@ -380,18 +412,22 @@ export default new Template({}, ({ http, args }) => {
             <span className="hidden md:inline">上一页</span>
           </Button>
 
-          <Button 
-            variant="ghost" 
+          <Button
+            variant="ghost"
             className="group/nav w-8 h-8 md:hidden"
             disabled={true}
           >
             <ChevronLeftIcon className="w-4 h-4 text-[--text-tertiary]" />
           </Button>
 
-          <Flex align="center" gap="2" className="flex-1 md:flex-none justify-center">
-            <ScrollArea 
-              type="hover" 
-              scrollbars="horizontal" 
+          <Flex
+            align="center"
+            gap="2"
+            className="flex-1 md:flex-none justify-center"
+          >
+            <ScrollArea
+              type="hover"
+              scrollbars="horizontal"
               className="w-[240px] md:w-[400px]"
             >
               <Flex gap="1" className="px-2">
@@ -399,23 +435,23 @@ export default new Template({}, ({ http, args }) => {
               </Flex>
             </ScrollArea>
 
-            <Text size="1" className="text-[--text-tertiary] whitespace-nowrap hidden md:block">
+            <Text
+              size="1"
+              className="text-[--text-tertiary] whitespace-nowrap hidden md:block"
+            >
               共 {totalPages} 页
             </Text>
           </Flex>
 
-          <Button 
-            variant="ghost" 
+          <Button
+            variant="ghost"
             className="group/nav h-8 md:px-3 text-sm hidden md:flex"
           >
             <span className="hidden md:inline">下一页</span>
             <ChevronRightIcon className="w-4 h-4 md:ml-1 text-[--text-tertiary] group-hover/nav:translate-x-0.5 transition-transform" />
           </Button>
 
-          <Button 
-            variant="ghost" 
-            className="group/nav w-8 h-8 md:hidden"
-          >
+          <Button variant="ghost" className="group/nav w-8 h-8 md:hidden">
             <ChevronRightIcon className="w-4 h-4 text-[--text-tertiary]" />
           </Button>
         </Flex>
diff --git a/frontend/themes/echoes/utils/colorScheme.ts b/frontend/themes/echoes/utils/colorScheme.ts
index 21f1bc0..0e01efd 100644
--- a/frontend/themes/echoes/utils/colorScheme.ts
+++ b/frontend/themes/echoes/utils/colorScheme.ts
@@ -3,7 +3,7 @@ export function hashString(str: string): number {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     const char = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + char;
+    hash = (hash << 5) - hash + char;
     hash = hash & hash;
   }
   return Math.abs(hash);
@@ -11,26 +11,76 @@ export function hashString(str: string): number {
 
 export function getColorScheme(name: string) {
   const colorSchemes = [
-    { name: 'amber', bg: 'bg-[--amber-a3]', text: 'text-[--amber-11]', border: 'border-[--amber-a6]' },
-    { name: 'blue', bg: 'bg-[--blue-a3]', text: 'text-[--blue-11]', border: 'border-[--blue-a6]' },
-    { name: 'crimson', bg: 'bg-[--crimson-a3]', text: 'text-[--crimson-11]', border: 'border-[--crimson-a6]' },
-    { name: 'cyan', bg: 'bg-[--cyan-a3]', text: 'text-[--cyan-11]', border: 'border-[--cyan-a6]' },
-    { name: 'grass', bg: 'bg-[--grass-a3]', text: 'text-[--grass-11]', border: 'border-[--grass-a6]' },
-    { name: 'mint', bg: 'bg-[--mint-a3]', text: 'text-[--mint-11]', border: 'border-[--mint-a6]' },
-    { name: 'orange', bg: 'bg-[--orange-a3]', text: 'text-[--orange-11]', border: 'border-[--orange-a6]' },
-    { name: 'pink', bg: 'bg-[--pink-a3]', text: 'text-[--pink-11]', border: 'border-[--pink-a6]' },
-    { name: 'plum', bg: 'bg-[--plum-a3]', text: 'text-[--plum-11]', border: 'border-[--plum-a6]' },
-    { name: 'violet', bg: 'bg-[--violet-a3]', text: 'text-[--violet-11]', border: 'border-[--violet-a6]' }
+    {
+      name: "amber",
+      bg: "bg-[--amber-a3]",
+      text: "text-[--amber-11]",
+      border: "border-[--amber-a6]",
+    },
+    {
+      name: "blue",
+      bg: "bg-[--blue-a3]",
+      text: "text-[--blue-11]",
+      border: "border-[--blue-a6]",
+    },
+    {
+      name: "crimson",
+      bg: "bg-[--crimson-a3]",
+      text: "text-[--crimson-11]",
+      border: "border-[--crimson-a6]",
+    },
+    {
+      name: "cyan",
+      bg: "bg-[--cyan-a3]",
+      text: "text-[--cyan-11]",
+      border: "border-[--cyan-a6]",
+    },
+    {
+      name: "grass",
+      bg: "bg-[--grass-a3]",
+      text: "text-[--grass-11]",
+      border: "border-[--grass-a6]",
+    },
+    {
+      name: "mint",
+      bg: "bg-[--mint-a3]",
+      text: "text-[--mint-11]",
+      border: "border-[--mint-a6]",
+    },
+    {
+      name: "orange",
+      bg: "bg-[--orange-a3]",
+      text: "text-[--orange-11]",
+      border: "border-[--orange-a6]",
+    },
+    {
+      name: "pink",
+      bg: "bg-[--pink-a3]",
+      text: "text-[--pink-11]",
+      border: "border-[--pink-a6]",
+    },
+    {
+      name: "plum",
+      bg: "bg-[--plum-a3]",
+      text: "text-[--plum-11]",
+      border: "border-[--plum-a6]",
+    },
+    {
+      name: "violet",
+      bg: "bg-[--violet-a3]",
+      text: "text-[--violet-11]",
+      border: "border-[--violet-a6]",
+    },
   ];
-  
+
   const index = hashString(name) % colorSchemes.length;
   const scheme = colorSchemes[index];
-  
+
   return {
     bg: scheme.bg,
     text: scheme.text,
     border: scheme.border,
-    hover: `hover:${scheme.bg.replace('3', '4')}`,
-    dot: `bg-current`
+    hover: `hover:${scheme.bg.replace("3", "4")}`,
+    dot: `bg-current`,
   };
-} 
\ No newline at end of file
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index cfdb433..8cf89d7 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -30,89 +30,84 @@ const createDefineConfig = (config: EnvConfig) => {
   );
 };
 
-export default defineConfig(async ({ mode }: ConfigEnv): Promise<UserConfig> => {
-  // 确保每次都读取最新的环境变量
-  const currentConfig = await getLatestEnv();
-  const env = loadEnv(mode, process.cwd(), "VITE_");
+export default defineConfig(
+  async ({ mode }: ConfigEnv): Promise<UserConfig> => {
+    // 确保每次都读取最新的环境变量
+    const currentConfig = await getLatestEnv();
+    const env = loadEnv(mode, process.cwd(), "VITE_");
 
-  return {
-    plugins: [
-      remix({
-        future: {
-          v3_fetcherPersist: true,
-          v3_relativeSplatPath: true,
-          v3_throwAbortReason: true,
-          v3_singleFetch: true,
-          v3_lazyRouteDiscovery: true,
-        },
-        routes: async (defineRoutes) => {
-          // 每次路由配置时重新读取环境变量
-          const latestConfig = await getLatestEnv();
+    return {
+      plugins: [
+        remix({
+          future: {
+            v3_fetcherPersist: true,
+            v3_relativeSplatPath: true,
+            v3_throwAbortReason: true,
+            v3_singleFetch: true,
+            v3_lazyRouteDiscovery: true,
+          },
+          routes: async (defineRoutes) => {
+            // 每次路由配置时重新读取环境变量
+            const latestConfig = await getLatestEnv();
 
-          return defineRoutes((route) => {
-            if (Number(latestConfig.VITE_INIT_STATUS) < 3) {
-              route("/", "init.tsx", { id: "index-route" });
-              route("*", "init.tsx", { id: "catch-all-route" });
-            } else {
-              route("/", "routes.tsx", { id: "index-route" });
-              route("*", "routes.tsx", { id: "catch-all-route" });
-            }
-          });
-        },
-      }),
-      tsconfigPaths(),
-    ],
-    define: createDefineConfig(currentConfig),
-    server: {
-      host: currentConfig.VITE_ADDRESS,
-      port: Number(env.VITE_SYSTEM_PORT ?? currentConfig.VITE_PORT),
-      strictPort: true,
-      hmr: true,
-      watch: {
-        usePolling: true,
-      },
-      proxy: {
-        "/__/api": {
-          target: currentConfig.VITE_API_BASE_URL,
-          changeOrigin: true,
-          rewrite: (path: string) => path.replace(/^\/__\/api/, ""),
-        },
-        "/__/express": {
-          target: `http://${currentConfig.VITE_ADDRESS}:${Number(currentConfig.VITE_PORT) + 1}`,
-          changeOrigin: true,
-          rewrite: (path: string) => path.replace(/^\/__\/express/, ""),
+            return defineRoutes((route) => {
+              if (Number(latestConfig.VITE_INIT_STATUS) < 3) {
+                route("/", "init.tsx", { id: "index-route" });
+                route("*", "init.tsx", { id: "catch-all-route" });
+              } else {
+                route("/", "routes.tsx", { id: "index-route" });
+                route("*", "routes.tsx", { id: "catch-all-route" });
+              }
+            });
+          },
+        }),
+        tsconfigPaths(),
+      ],
+      define: createDefineConfig(currentConfig),
+      server: {
+        host: currentConfig.VITE_ADDRESS,
+        port: Number(env.VITE_SYSTEM_PORT ?? currentConfig.VITE_PORT),
+        strictPort: true,
+        hmr: true,
+        watch: {
+          usePolling: true,
         },
       },
-    },
-    publicDir: resolve(__dirname, "public"),
-    envPrefix: "VITE_",
-    build: {
-      rollupOptions: {
-        output: {
-          manualChunks(id) {
-            // 根据模块路径进行代码分割
-            if (id.includes('node_modules')) {
-              return 'vendor';
-            }
-          }
-        }
+      publicDir: resolve(__dirname, "public"),
+      envPrefix: "VITE_",
+      build: {
+        rollupOptions: {
+          output: {
+            manualChunks(id) {
+              // 根据模块路径进行代码分割
+              if (id.includes("node_modules")) {
+                return "vendor";
+              }
+            },
+          },
+        },
+        chunkSizeWarningLimit: 1500,
+        minify: "terser",
+        terserOptions: {
+          compress: {
+            drop_console: true,
+            drop_debugger: true,
+          },
+        },
+        cssMinify: true,
+        cssCodeSplit: true,
+        sourcemap: mode !== "production",
+        assetsInlineLimit: 4096,
+        reportCompressedSize: false,
       },
-      chunkSizeWarningLimit: 1500,
-      minify: 'terser',
-      terserOptions: {
-        compress: {
-          drop_console: true,
-          drop_debugger: true
-        }
+      ssr: {
+        noExternal: [
+          "three",
+          "@react-three/fiber",
+          "@react-three/drei",
+          "gsap",
+        ],
       },
-      cssMinify: true,
-      cssCodeSplit: true,
-      sourcemap: mode !== 'production',
-      assetsInlineLimit: 4096,
-      reportCompressedSize: false,
-    },
-    ssr: {
-      noExternal: ['three', '@react-three/fiber', '@react-three/drei', 'gsap']
-    }
-  };
-});
+    };
+  },
+);