diff --git a/package-lock.json b/package-lock.json
index 143de90..d8d3dea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,9 @@
         "echo-frontend": "file:",
         "quill": "^2.0.3",
         "react": "^19.1.0",
+        "react-confirm-alert": "^3.0.6",
         "react-dom": "^19.1.0",
+        "react-hot-toast": "^2.5.2",
         "react-router-dom": "^7.6.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4",
@@ -6696,6 +6698,12 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "license": "MIT"
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -9056,6 +9064,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmmirror.com/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
@@ -14268,6 +14285,16 @@
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
       "license": "MIT"
     },
+    "node_modules/react-confirm-alert": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/react-confirm-alert/-/react-confirm-alert-3.0.6.tgz",
+      "integrity": "sha512-rplP6Ed9ZSNd0KFV5BUzk4EPQ77BxsrayllBXGFuA8xPXc7sbBjgU5KUrNpl7aWFmP7mXRlVXfuy1IT5DbffYw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=10.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmmirror.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -14391,6 +14418,23 @@
       "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ==",
       "license": "MIT"
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmmirror.com/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
+      "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 31811a8..f53aa78 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,9 @@
     "echo-frontend": "file:",
     "quill": "^2.0.3",
     "react": "^19.1.0",
+    "react-confirm-alert": "^3.0.6",
     "react-dom": "^19.1.0",
+    "react-hot-toast": "^2.5.2",
     "react-router-dom": "^7.6.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",
diff --git a/src/App.js b/src/App.js
index af1f022..11219d3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Toaster } from 'react-hot-toast';
 import { Route, useLocation } from 'wouter';
 import { UserProvider, useUser } from './context/UserContext';
 
@@ -27,6 +28,7 @@
 import NewUserGuide from './pages/NewUserGuide/NewUserGuide';
 import UserRecharge from './pages/UserCenter/UserRecharge';
 import GroupDetail from './pages/InterestGroup/GroupDetail';
+import PlaylistDetailPage from './pages/SeedList/Recommend/PlaylistDetailPage';
 
 function RedirectToAuth() {
   if (typeof window !== 'undefined') {
@@ -55,6 +57,7 @@
 function App() {
   return (
     <UserProvider>
+      <Toaster />
       <GroupProvider>
         <>
           {/* 公开路由 */}
@@ -78,6 +81,10 @@
           <Route path="/information/:userId" component={({ userId }) => <PrivateRoute component={() => <UserInfo userId={userId} />} />} />
           <Route path="/new-user-guide" component={() => <PrivateRoute component={NewUserGuide} />} />
           <Route path="/group/:groupId" component={({ groupId }) => <PrivateRoute component={() => <GroupDetail groupId={groupId} />} />} />
+          <Route path="/playlist/:id" component={({ id }) => (
+            <PrivateRoute component={() => <PlaylistDetailPage id={id} />} />
+          )} />
+
 
           {/* 用户中心路由 */}
           <Route path="/user/profile" component={() => (
diff --git a/src/api/file.js b/src/api/file.js
new file mode 100644
index 0000000..fdfe571
--- /dev/null
+++ b/src/api/file.js
@@ -0,0 +1,8 @@
+import axios from "axios";
+
+
+export const uploadFile = async (file) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    return axios.post('/file', formData, { headers: { 'Content-Type': 'multipart/form-data' } });
+}
\ No newline at end of file
diff --git a/src/components/AuthButton.jsx b/src/components/AuthButton.jsx
new file mode 100644
index 0000000..b5cc431
--- /dev/null
+++ b/src/components/AuthButton.jsx
@@ -0,0 +1,22 @@
+import {useContext} from "react";
+import { UserContext } from "../context/UserContext";
+import toast from "react-hot-toast";
+const AuthButton = ({children, roles,onClick, ...rest }) => {
+    const {user} = useContext(UserContext);
+    const {levelRole} = user;
+    let clickFunc = onClick
+    if(!roles || roles.length === 0 || roles.includes(levelRole)){
+      clickFunc = onClick;
+    }else{
+        clickFunc = () => {
+            toast.error("权限不足");
+        }
+    }
+   
+    return (
+        <button onClick={clickFunc} {...rest}>
+            {children}
+        </button>
+    )
+}
+export default AuthButton;
\ No newline at end of file
diff --git a/src/components/Header.css b/src/components/Header.css
index 017ba1d..66fe1a0 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -3,9 +3,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px; /* 增加左右间距，避免元素靠得太近 */
-  background-color: #5F4437; /* 深棕色背景 */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
+  padding: 10px 20px;
+  background-color: #6b4f3b; /* 深棕色背景 */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 /* Logo 和网站名称 */
@@ -20,9 +20,9 @@
 }
 
 .site-name {
-  font-size:32px;
+  font-size: 32px;
   font-weight: bold;
-  color: #FBF2E3; /* 更加柔和的字体颜色 */
+  color: #fbf2e3; /* 柔和淡米色字体 */
 }
 
 /* 用户头像和消息中心 */
@@ -33,69 +33,68 @@
 
 .user-avatar {
   height: 50px;
-  width: 50px; /* 确保头像是圆形 */
-  border-radius: 50%; /* 圆形 */
+  width: 50px;
+  border-radius: 50%;
   margin-right: 10px;
 }
 
 .message-center {
   font-size: 24px;
-  color: #FBF2E3; /* 统一字体颜色 */
+  color: #fbf2e3;
   cursor: pointer;
-  transition: color 0.3s ease; /* 平滑过渡 */
+  transition: color 0.3s ease;
 }
 
 .message-center:hover {
-  color: #D8C0A1; /* 当鼠标悬停时字体颜色变亮 */
+  color: #eecfc1; /* 清透粉 hover */
 }
 
 /* 导航栏样式 */
 .nav {
   display: flex;
   justify-content: center;
-  background-color: #dab8c2;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加阴影 */
-  transition: background 0.3s ease; 
+  background-color: #fffaf7; /* 粉米底 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  border-bottom: 2px solid #e2cfc3;
 }
 
 /* 每个导航项 */
 .nav-item {
   padding: 14px 12px;
   text-decoration: none;
-  color: #FBF2E3;
+  color: #6b4f3b; /* 主文字棕色 */
   font-size: 18px;
   font-weight: 500;
   text-align: center;
-  border-radius: 8px; /* 圆角效果 */
-  transition: background-color 0.3s, color 0.3s, transform 0.3s ease; /* 平滑过渡 */
-  position: relative; /* 为阴影和动画提供定位 */
+  border-radius: 8px;
+  transition: background-color 0.3s, color 0.3s, transform 0.3s ease;
+  position: relative;
 }
 
-/* 鼠标悬停时 */
 .nav-item:hover {
-  background-color: #5F4437; /* 背景色变深 */
-  color: #FBF2E3; /* 字体颜色与背景形成对比 */
-  transform: scale(1.05); /* 微微放大，增加互动感 */
+  background-color: #f3ded7; /* 柔粉 hover 背景 */
+  color: #4b3325;
+  transform: scale(1.05);
 }
 
 /* 选中状态 */
 .nav-item.active {
-  background-color: #5F4437; /* 活动状态时的背景色 */
-  color: #FBF2E3; /* 活动状态时的字体颜色 */
+  background-color: #eecfc1;
+  color: #3c271b;
   font-weight: bold;
-  border-radius: 16px; /* 更圆的圆角效果 */
-  padding: 4px 12px; /* 减小上下和左右的padding，框变小 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 增加阴影，带来浮动感 */
-  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s ease; /* 平滑过渡 */
-  transform: scale(1.1); /* 选中项微微放大 */
-  line-height: 40px; /* 调整line-height，使文字更居中 */
+  border-radius: 16px;
+  padding: 4px 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+  transform: scale(1.1);
+  line-height: 40px;
 }
+
 /* 新手指南按钮 */
 .guide-button {
   display: flex;
   align-items: center;
-  background-color: #a67c6a; /* 柔棕底色 */
-  color: #fff;
+  background-color: #eecfc1; /* 清透粉底色 */
+  color: #4e342e; /* 深棕文字 */
   border: none;
   border-radius: 20px;
   padding: 6px 12px;
@@ -106,12 +105,10 @@
 }
 
 .guide-button:hover {
-  background-color: #8d6e63; /* 深一点 hover */
+  background-color: #f3ded7; /* 更柔和 hover */
   transform: scale(1.05);
 }
 
 .guide-button span {
   user-select: none;
 }
-
-
diff --git a/src/pages/FriendMoments/FriendMoments.css b/src/pages/FriendMoments/FriendMoments.css
index cca399f..edab68f 100644
--- a/src/pages/FriendMoments/FriendMoments.css
+++ b/src/pages/FriendMoments/FriendMoments.css
@@ -9,7 +9,7 @@
 
 .friend-moments-container {
   margin: 0 auto;
-  background: #333;
+  background: #f8f3ef;
   padding-bottom: 40px;
 }
 
diff --git a/src/pages/InterestGroup/InterestGroup.css b/src/pages/InterestGroup/InterestGroup.css
index e44eea1..b2cf86f 100644
--- a/src/pages/InterestGroup/InterestGroup.css
+++ b/src/pages/InterestGroup/InterestGroup.css
@@ -1,6 +1,6 @@
 /* 设置整个兴趣小组页面的背景色和布局 */
 .interest-group-container {
-  background: #333;
+  background: #f8f3ef;
   width: 100%;
   height: 2000px;
 }
diff --git a/src/pages/PublishSeed/PublishSeed.css b/src/pages/PublishSeed/PublishSeed.css
index 7525fb7..ff7fcad 100644
--- a/src/pages/PublishSeed/PublishSeed.css
+++ b/src/pages/PublishSeed/PublishSeed.css
@@ -1,12 +1,12 @@
-.publish-seed-container {
-  background: #333;
+.ps-container {
+  background: #f8f3ef;
   color: #333;
   min-height: 100vh;
   padding: 20px 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-.pub-card {
+.ps-card {
   background-color: #e9ded2;
   border-radius: 16px;
   max-width: 800px;
@@ -16,20 +16,20 @@
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
-form > div {
+.ps-form > div {
   margin-bottom: 20px;
 }
 
-label {
+.ps-label {
   display: block;
   font-weight: bold;
   margin-bottom: 8px;
   color: #5F4437;
 }
 
-input[type="text"],
-textarea,
-select {
+.ps-input-text,
+.ps-textarea,
+.ps-select {
   width: 100%;
   padding: 10px 12px;
   border-radius: 6px;
@@ -40,20 +40,20 @@
   transition: border-color 0.3s;
 }
 
-input[type="text"]:focus,
-textarea:focus,
-select:focus {
+.ps-input-text:focus,
+.ps-textarea:focus,
+.ps-select:focus {
   outline: none;
   border-color: #c49c6b;
 }
 
-textarea {
+.ps-textarea {
   resize: vertical;
   min-height: 80px;
 }
 
-.seed-file-label,
-.cover-upload button {
+.ps-seed-file-label,
+.ps-cover-upload-button {
   display: inline-block;
   padding: 8px 16px;
   border: 1px solid #e0c4a1;
@@ -66,17 +66,17 @@
   transition: all 0.2s ease;
 }
 
-.seed-file-label:hover,
-.cover-upload button:hover {
+.ps-seed-file-label:hover,
+.ps-cover-upload-button:hover {
   background-color: #f1e0d0;
 }
 
-.seed-file input,
-.cover-upload input {
+.ps-seed-file-input,
+.ps-cover-upload-input {
   display: none;
 }
 
-.message {
+.ps-message {
   background-color: #fff3cd;
   color: #856404;
   padding: 12px;
@@ -85,11 +85,11 @@
   border: 1px solid #ffeeba;
 }
 
-.upload-button {
+.ps-upload-button {
   text-align: center;
 }
 
-.upload-button button {
+.ps-upload-button button {
   background-color: #5F4437;
   color: #fff;
   padding: 12px 32px;
@@ -100,16 +100,16 @@
   transition: background-color 0.2s ease;
 }
 
-.upload-button button:hover {
+.ps-upload-button button:hover {
   background-color: #472f23;
 }
 
-.upload-button button:disabled {
+.ps-upload-button button:disabled {
   background-color: #9c8c84;
   cursor: not-allowed;
 }
 
-img {
+.ps-img-preview {
   border-radius: 8px;
   border: 1px solid #ccc;
   max-width: 100%;
diff --git a/src/pages/PublishSeed/PublishSeed.jsx b/src/pages/PublishSeed/PublishSeed.jsx
index a3ac4ad..27717ca 100644
--- a/src/pages/PublishSeed/PublishSeed.jsx
+++ b/src/pages/PublishSeed/PublishSeed.jsx
@@ -4,6 +4,7 @@
 import Header from '../../components/Header';
 import './PublishSeed.css';
 import { useUser } from '../../context/UserContext';
+import { uploadFile } from '../../api/file';
 
 const PublishSeed = () => {
   const [title, setTitle] = useState('');
@@ -86,7 +87,6 @@
     formData.append('category', category);
     formData.append('tags', tags.join(',')); // 逗号分隔字符串
     formData.append('uploader', user.userId);
-
     if (imageFile) {
       formData.append('coverImage', imageFile);
     }
@@ -113,20 +113,22 @@
   };
 
   return (
-    <div className="publish-seed-container">
+    <div className="ps-container">
       <Header />
-      <div className="pub-card">
-        {message && <div className="message">{message}</div>}
+      <div className="ps-card">
+        {message && <div className="ps-message">{message}</div>}
         <form
+          className="ps-form"
           onSubmit={(e) => {
             console.log('[DEBUG] form onSubmit 触发');
             handleSubmit(e);
           }}
           encType="multipart/form-data"
         >
-          <div className="title-tag">
-            <label>标题</label>
+          <div>
+            <label className="ps-label">标题</label>
             <input
+              className="ps-input-text"
               type="text"
               value={title}
               onChange={(e) => {
@@ -137,9 +139,10 @@
             />
           </div>
 
-          <div className="discription">
-            <label>描述</label>
+          <div>
+            <label className="ps-label">描述</label>
             <textarea
+              className="ps-textarea"
               value={description}
               onChange={(e) => {
                 console.log('[DEBUG] 描述输入变化:', e.target.value);
@@ -149,9 +152,10 @@
             />
           </div>
 
-          <div className="title-tag">
-            <label>标签 (逗号分隔)</label>
+          <div>
+            <label className="ps-label">标签 (逗号分隔)</label>
             <input
+              className="ps-input-text"
               type="text"
               value={tags.join(', ')}
               onChange={handleTagsChange}
@@ -160,9 +164,10 @@
             />
           </div>
 
-          <div className="pub-categoty">
-            <label>分类</label>
+          <div>
+            <label className="ps-label">分类</label>
             <select
+              className="ps-select"
               value={category}
               onChange={(e) => {
                 console.log('[DEBUG] 分类选择变化:', e.target.value);
@@ -184,10 +189,10 @@
             </select>
           </div>
 
-          <div className="seed-file">
-            <label>种子文件</label>
+          <div>
+            <label className="ps-label">种子文件</label>
             <div
-              className="seed-file-label"
+              className="ps-seed-file-label"
               onClick={handleFileButtonClick}
               style={{ cursor: 'pointer' }}
             >
@@ -198,15 +203,19 @@
               accept=".torrent"
               ref={fileInputRef}
               onChange={handleFileChange}
-              style={{ display: 'none' }}
+              className="ps-seed-file-input"
             />
-            {fileName && <div style={{ marginTop: '5px' }}>{fileName}</div>}
+            {fileName && <div style={{ marginTop: '5px', color: '#5F4437' }}>{fileName}</div>}
           </div>
 
-          <div className="form-group">
-            <label>封面图</label>
-            <div className="cover-upload">
-              <button type="button" onClick={handleImageButtonClick}>
+          <div>
+            <label className="ps-label">封面图</label>
+            <div>
+              <button
+                type="button"
+                onClick={handleImageButtonClick}
+                className="ps-cover-upload-button"
+              >
                 上传图片
               </button>
               <input
@@ -214,7 +223,7 @@
                 accept="image/*"
                 ref={imageInputRef}
                 onChange={handleImageChange}
-                style={{ display: 'none' }}
+                className="ps-cover-upload-input"
               />
             </div>
             {previewUrl && (
@@ -222,13 +231,13 @@
                 <img
                   src={previewUrl}
                   alt="封面预览"
-                  style={{ maxWidth: '100%', maxHeight: '200px' }}
+                  className="ps-img-preview"
                 />
               </div>
             )}
           </div>
 
-          <div className="upload-button">
+          <div className="ps-upload-button">
             <button
               type="submit"
               disabled={isLoading}
diff --git a/src/pages/SeedList/Recommend/CreatePlaylistModal.css b/src/pages/SeedList/Recommend/CreatePlaylistModal.css
new file mode 100644
index 0000000..022e190
--- /dev/null
+++ b/src/pages/SeedList/Recommend/CreatePlaylistModal.css
@@ -0,0 +1,153 @@
+/* CreatePlaylistModal.css */
+
+.create-playlist-modal.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 16px;
+}
+
+.create-playlist-modal .modal {
+  background: #fff;
+  border-radius: 14px;
+  width: 420px;
+  max-width: 100%;
+  padding: 32px 40px;
+  box-shadow:
+    0 10px 15px rgba(0, 0, 0, 0.1),
+    0 4px 6px rgba(0, 0, 0, 0.05);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.create-playlist-modal .modal:hover {
+  transform: translateY(-6px);
+}
+
+.create-playlist-modal .modal h3 {
+  margin: 0 0 28px 0;
+  font-weight: 700;
+  font-size: 1.9rem;
+  color: #222;
+  text-align: center;
+  letter-spacing: 0.02em;
+}
+
+/* Label纵向排列 */
+.create-playlist-modal .modal label {
+  display: flex !important;
+  flex-direction: column !important;
+  margin-bottom: 20px;
+  font-weight: 600;
+  color: #444;
+  font-size: 1.05rem;
+  user-select: none;
+  cursor: default; /* 加上避免label内容被选中时光标变形 */
+}
+
+.create-playlist-modal .modal input[type="text"],
+.create-playlist-modal .modal input[type="number"],
+.create-playlist-modal .modal textarea {
+  margin-top: 8px;
+  padding: 12px 16px;
+  border: 1.6px solid #bbb;
+  border-radius: 8px;
+  font-size: 1rem;
+  color: #333;
+  box-sizing: border-box;
+  resize: vertical;
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+  font-family: inherit;
+}
+
+.create-playlist-modal .modal input[type="text"]:focus,
+.create-playlist-modal .modal input[type="number"]:focus,
+.create-playlist-modal .modal textarea:focus {
+  outline: none;
+  border-color: #4a69bd;
+  box-shadow: 0 0 10px rgba(74, 105, 189, 0.5);
+}
+
+.create-playlist-modal .modal textarea {
+  min-height: 90px;
+  line-height: 1.5;
+  font-family: inherit;
+}
+
+.create-playlist-modal .modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 32px;
+}
+
+.create-playlist-modal .modal-actions button {
+  padding: 12px 26px;
+  font-size: 1.15rem;
+  font-weight: 700;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 0.35s ease,
+    box-shadow 0.35s ease,
+    transform 0.2s ease;
+  font-family: inherit;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.create-playlist-modal .modal-actions button:first-child {
+  background: linear-gradient(135deg, #4a69bd 0%, #3f51b5 100%);
+  color: #fff;
+  box-shadow: 0 6px 12px rgba(63, 81, 181, 0.5);
+}
+
+.create-playlist-modal .modal-actions button:first-child:hover {
+  background: linear-gradient(135deg, #3f51b5 0%, #2c3e9f 100%);
+  box-shadow: 0 8px 18px rgba(44, 62, 159, 0.75);
+  transform: translateY(-2px);
+}
+
+.create-playlist-modal .modal-actions button:first-child:disabled {
+  background: #a0a5b8;
+  box-shadow: none;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.create-playlist-modal .modal-actions button:last-child {
+  background-color: #f3f4f6;
+  color: #555;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  transition: background-color 0.25s ease;
+}
+
+.create-playlist-modal .modal-actions button:last-child:hover {
+  background-color: #d9dade;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+}
+.torrent-selector {
+  border: 1px solid #ccc;
+  padding: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 8px;
+}
+.torrent-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.torrent-list li {
+  margin: 4px 0;
+}
+.selected-torrents {
+  margin-top: 6px;
+  font-size: 0.9em;
+  color: #555;
+}
diff --git a/src/pages/SeedList/Recommend/CreatePlaylistModal.jsx b/src/pages/SeedList/Recommend/CreatePlaylistModal.jsx
new file mode 100644
index 0000000..60a5b76
--- /dev/null
+++ b/src/pages/SeedList/Recommend/CreatePlaylistModal.jsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import toast from 'react-hot-toast';
+import TorrentSelector from './TorrentSelector'; // 引入种子选择组件
+import './CreatePlaylistModal.css';
+import { uploadFile } from '../../../api/file';
+
+const CreatePlaylistModal = ({ onClose, onSuccess }) => {
+  const [newPlaylist, setNewPlaylist] = useState({
+    title: '',
+    price: '',
+    description: '',
+    torrentList: [], // 选中的种子ID数组
+  });
+
+  const [coverFile, setCoverFile] = useState(null); // 新增封面文件状态
+  const [previewUrl, setPreviewUrl] = useState(''); // 封面预览URL
+
+  const handleSelect = (id, checked) => {
+    setNewPlaylist(prev => {
+      let newList = [...prev.torrentList];
+      if (checked) {
+        if (!newList.includes(id)) newList.push(id);
+      } else {
+        newList = newList.filter(i => i !== id);
+      }
+      return { ...prev, torrentList: newList };
+    });
+  };
+
+  const handleCoverChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setCoverFile(file);
+      setPreviewUrl(URL.createObjectURL(file)); // 生成预览图
+    } else {
+      setCoverFile(null);
+      setPreviewUrl('');
+    }
+  };
+
+  const handleCreate = async () => {
+    const { title, price, description, torrentList } = newPlaylist;
+
+    if (!title.trim()) {
+      toast.error('标题不能为空');
+      return;
+    }
+    if (!price || isNaN(Number(price)) || Number(price) < 0) {
+      toast.error('请输入合法的价格');
+      return;
+    }
+    if (torrentList.length === 0) {
+      toast.error('请至少选择一个种子');
+      return;
+    }
+
+    const toastId = toast.loading('正在创建...');
+    const playlistData = { title, price, description, torrentList }; // 构建片单数据
+    
+    try {
+
+      if (coverFile) {
+        const { data } = await uploadFile(coverFile);
+        if (data.code === 0) {
+          playlistData['coverUrl'] = data.data;
+        } else {
+          toast.error('封面上传失败: ' + data.msg, { id: toastId});
+          return;
+        }
+      }
+
+      const res = await axios.post('/playlist', playlistData, {
+      });
+
+      if (res.data.code === 0) {
+        toast.success('片单创建成功', { id: toastId });
+        onSuccess(res.data.data);
+        onClose();
+      } else {
+        toast.error(`创建失败：${res.data.msg}`, { id: toastId });
+      }
+    } catch (err) {
+      console.error('创建片单失败', err);
+      toast.error('创建失败，请稍后重试', { id: toastId });
+    }
+  };
+
+  return (
+    <div className="modal-overlay create-playlist-modal">
+      <div className="modal">
+        <h3>创建新片单</h3>
+
+        <label>
+          标题：
+          <input
+            type="text"
+            value={newPlaylist.title}
+            onChange={(e) => setNewPlaylist({ ...newPlaylist, title: e.target.value })}
+          />
+        </label>
+
+        <label>
+          封面图：
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleCoverChange}
+          />
+          {previewUrl && (
+            <div style={{ marginTop: '10px' }}>
+              <img src={previewUrl} alt="封面预览" style={{ maxWidth: '100%', maxHeight: '150px' }} />
+            </div>
+          )}
+        </label>
+
+        <label>
+          价格（元）：
+          <input
+            type="number"
+            step="0.01"
+            min="0"
+            value={newPlaylist.price}
+            onChange={(e) => setNewPlaylist({ ...newPlaylist, price: e.target.value })}
+          />
+        </label>
+
+        <label>
+          片单描述：
+          <textarea
+            value={newPlaylist.description}
+            onChange={(e) => setNewPlaylist({ ...newPlaylist, description: e.target.value })}
+          />
+        </label>
+
+        <label>
+          关联种子选择：
+          <TorrentSelector
+            selectedIds={newPlaylist.torrentList}
+            onSelect={handleSelect}
+          />
+        </label>
+
+        <div className="modal-actions">
+          <button onClick={handleCreate}>提交</button>
+          <button onClick={onClose}>取消</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreatePlaylistModal;
diff --git a/src/pages/SeedList/Recommend/PlaylistDetailPage.css b/src/pages/SeedList/Recommend/PlaylistDetailPage.css
new file mode 100644
index 0000000..78e7068
--- /dev/null
+++ b/src/pages/SeedList/Recommend/PlaylistDetailPage.css
@@ -0,0 +1,83 @@
+.playlist-detail {
+  background-color: #fffaf7; /* 和上一页主背景色保持一致 */
+  border-radius: 12px; /* 统一圆角 */
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 统一阴影 */
+  color: #6b4f3b; /* 主文字颜色，棕色系 */
+}
+
+.playlist-detail h1 {
+  font-size: 2rem;
+  margin-bottom: 16px;
+  color: #4e342e; /* 深棕色标题 */
+  font-weight: 700;
+}
+
+.cover-image {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  border-radius: 12px; /* 与容器圆角匹配 */
+  margin-bottom: 20px;
+  box-shadow: 0 4px 12px rgb(107 79 59 / 0.2); /* 柔和阴影 */
+}
+
+.playlist-detail p {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 20px;
+  color: #6b4f3b;
+}
+
+.playlist-detail h3 {
+  font-size: 1.4rem;
+  margin-bottom: 12px;
+  color: #4e342e;
+  font-weight: 600;
+}
+
+.playlist-detail ul {
+  padding-left: 20px;
+  list-style: disc;
+  color: #6b4f3b;
+}
+
+.playlist-detail li {
+  padding: 6px 0;
+  border-bottom: 1px solid #e2cfc3;
+  font-weight: 500;
+  color: #5d4037;
+}
+
+.playlist-detail li:last-child {
+  border-bottom: none;
+}
+
+/* 错误提示 */
+.error {
+  max-width: 600px;
+  margin: 40px auto;
+  padding: 20px;
+  background: #f8d7da; /* 柔和粉棕 */
+  color: #a94442;
+  border: 1px solid #a94442;
+  border-radius: 12px;
+  text-align: center;
+  font-weight: 600;
+}
+
+/* 重试按钮 */
+.retry-button {
+  margin-top: 12px;
+  padding: 8px 16px;
+  background-color: #6b4f3b;
+  border: none;
+  border-radius: 8px;
+  color: #fffaf7;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.25s ease;
+}
+
+.retry-button:hover {
+  background-color: #4b3325;
+}
diff --git a/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx b/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx
new file mode 100644
index 0000000..07558d6
--- /dev/null
+++ b/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import { useRoute } from 'wouter'; // ✅ 修改这里
+import axios from 'axios';
+import Header from '../../../components/Header';
+import './PlaylistDetailPage.css';
+import { useUser } from '../../../context/UserContext';
+import toast from 'react-hot-toast';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
+
+const PlaylistDetailPage = () => {
+  const [match, params] = useRoute('/playlist/:id'); // ✅ 使用 useRoute
+  const id = params?.id;
+  const { user } = useUser();
+  const userId = user?.userId;
+
+  const [detail, setDetail] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const fetchDetail = async () => {
+    if (!id) {
+      setError('无效的片单ID');
+      setLoading(false);
+      return;
+    }
+    if (!userId) {
+      setError('请先登录');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+      const res = await axios.get(`/playlist/${id}`, {
+        params: { userId }
+      });
+      if (res.data.code === 0) {
+        setDetail(res.data.data);
+      } else {
+        setError(res.data.msg || '加载失败');
+      }
+    } catch (err) {
+      console.error(err);
+      setError('请求失败，请检查网络');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (id && userId) fetchDetail(); // ✅ 防止空 ID 反复触发
+  }, [id, userId]);
+
+  if (loading) return <div>加载中...</div>;
+
+  if (error) {
+    return (
+      <div className="error">
+        {error}
+        <button onClick={fetchDetail} className="retry-button">重试</button>
+      </div>
+    );
+  }
+
+return (
+  <div className="playlist-detail">
+    <Header />
+    <h1>{detail.title}</h1>
+    <img
+      src={detail.coverUrl || '/default-cover.jpg'}
+      alt={detail.title}
+      onError={e => { e.target.src = '/default-cover.jpg'; }}
+      className="cover-image"
+    />
+    <p>{detail.description}</p>
+
+    <h3>包含的种子：</h3>
+    {detail.torrentList && detail.torrentList.length > 0 ? (
+      <ul>
+        {detail.torrentList.map(seed => (
+          <li key={seed.id}>{seed.title}</li>
+        ))}
+      </ul>
+    ) : (
+      <p>暂无种子数据</p>
+    )}
+  </div>
+);
+};
+export default PlaylistDetailPage;
diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
index cf46b86..f1e34da 100644
--- a/src/pages/SeedList/Recommend/Recommend.css
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -1,90 +1,153 @@
-/* .recommend-wrapper {
-  padding: 20px;
-  background-color: #fff;
+/* 推荐页整体容器 */
+.recommendation-page {
+  padding: 24px 32px;
+  background-color: #f8f3ef; /* 米棕底色 */
+  min-height: 100vh;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #4e342e; /* 深米棕文字 */
 }
 
-.recommend-section-title {
-  font-size: 20px;
-  font-weight: bold;
-  margin-bottom: 15px;
+/* 各个版块标题 */
+.recommendation-page h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-bottom: 18px;
+  border-left: 6px solid #eecfc1; /* 粉米色强调条 */
+  padding-left: 12px;
+  color: #4e342e; /* 标题米棕色 */
+  user-select: none;
 }
 
+/* 付费片单 - 横向滚动行 */
 .recommend-paid-row {
   display: flex;
   gap: 20px;
-  flex-wrap: nowrap;
   overflow-x: auto;
+  padding-bottom: 12px;
+  width: 100%;
+  scroll-behavior: smooth;
 }
 
+.recommend-paid-row::-webkit-scrollbar {
+  height: 8px;
+}
+.recommend-paid-row::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+
+/* 付费片单卡片 */
 .paid-card {
-  width: 200px;
-  flex-shrink: 0;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: #f9f9f9;
-  text-align: center;
+  width: 450px; /* 固定宽度 */
+  flex-shrink: 0; /* 不允许缩小 */
+  border-radius: 10px;
+  /* overflow: hidden; */
+    overflow: visible;
+  background: #fffaf7; /* 粉米背景 */
+  box-shadow: 0 10px 20px rgba(78, 52, 46, 0.1); /* 柔和阴影 */
+  cursor: pointer;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.paid-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 14px 28px rgba(78, 52, 46, 0.2);
 }
 
 .paid-cover {
   width: 100%;
-  height: 120px;
+  height: 130px;
   object-fit: cover;
+  border-bottom: 1px solid #e2cfc3; /* 米棕分割线 */
+  border-radius: 10px 10px 0 0;
 }
 
 .paid-title {
-  font-size: 16px;
-  padding: 10px;
-} */
-
-
-.recommendation-page {
-  padding: 20px;
-  background-color: #f8f9fa;
-}
-
-.recommendation-page h2 {
-  font-size: 1.5rem;
-  margin-bottom: 10px;
-  color: #333;
-}
-
-.seed-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-bottom: 32px;
-}
-
-.seed-card {
-  width: 160px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+  font-size: 1.1rem;
+  font-weight: 600;
+  padding: 12px 10px;
+  color: #6b4f3b; /* 深米棕文字 */
+  white-space: nowrap;
   overflow: hidden;
-  transition: transform 0.2s ease;
-  cursor: pointer;
+  text-overflow: ellipsis;
 }
 
+/* 热门资源 - 一行横向滚动 */
+.seed-list.popular-row {
+  display: flex;
+  overflow-x: auto;
+  white-space: nowrap;
+  gap: 16px;
+  padding-bottom: 12px;
+  scrollbar-width: none;
+}
+.seed-list.popular-row::-webkit-scrollbar {
+  display: none;
+}
+
+/* 热门资源卡片 */
+.seed-card {
+  width: 150px;
+  flex-shrink: 0;
+  background: #fffaf7; /* 粉米背景 */
+  border-radius: 12px;
+  box-shadow: 0 8px 16px rgba(78, 52, 46, 0.08);
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+  user-select: none;
+}
 .seed-card:hover {
-  transform: translateY(-4px);
+  transform: translateY(-6px);
+  box-shadow: 0 12px 24px rgba(78, 52, 46, 0.15);
 }
 
 .seed-card img {
   width: 100%;
-  height: 220px;
+  height: 210px;
   object-fit: cover;
+  border-radius: 12px 12px 0 0;
+  border-bottom: 1px solid #e2cfc3;
 }
 
 .seed-card .title {
-  padding: 8px;
-  font-size: 0.95rem;
+  padding: 10px 8px;
+  font-size: 1rem;
+  color: #6b4f3b; /* 深米棕文字 */
   text-align: center;
-  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+/* 猜你喜欢 - 多行换行排列 */
+.seed-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  margin-bottom: 32px;
+  user-select: none;
+}
+
+/* 登录提醒 */
 .login-reminder {
-  font-size: 1rem;
-  color: #888;
-  padding: 10px;
+  font-size: 1.1rem;
+  color: #a1887f; /* 柔和棕色 */
+  padding: 14px 0;
+  text-align: center;
+  font-style: italic;
+  user-select: none;
+}
+
+/* 统一h2的上下间距 */
+.recommendation-page h2 {
+  margin-top: 36px;
+  margin-bottom: 18px;
+}
+
+
+/* 给滚动区域内种子卡片添加最小宽度避免缩得太小 */
+.seed-list.popular-row .seed-card,
+.recommend-paid-row .paid-card {
+  min-width: 150px;
 }
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
index 8270145..f58c73d 100644
--- a/src/pages/SeedList/Recommend/Recommend.jsx
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -2,48 +2,205 @@
 import axios from 'axios';
 import './Recommend.css';
 import { useUser } from '../../../context/UserContext';
+import { useLocation } from 'wouter';
+import toast from 'react-hot-toast';
+import CreatePlaylistModal from './CreatePlaylistModal';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
 
 const Recommend = () => {
   const { user } = useUser();
+  const [paidLists, setPaidLists] = useState([]);
   const [popularSeeds, setPopularSeeds] = useState([]);
-  const [recommendedSeeds, setRecommendedSeeds] = useState([]);
+  const [recommendedSeeds, setRecommendedSeeds] = useState({
+    movie: [],
+    tv: [],
+    anime: []
+  });
+
+  const [showModal, setShowModal] = useState(false);
+  const [, navigate] = useLocation();
 
   useEffect(() => {
-    // 获取热门资源
+    axios
+      .get('/playlist/page', { params: { page: 1, size: 8 } })
+      .then((res) => {
+        if (res.data.code === 0) {
+          setPaidLists(res.data.data);
+        } else {
+          toast.error(`获取片单失败：${res.data.msg}`);
+        }
+      })
+      .catch((err) => {
+        console.error('请求片单失败', err);
+        toast.error('请求片单失败，请稍后重试');
+      });
+
     axios
       .get('/echo/recommendation/popular', { params: { limit: 16 } })
       .then((res) => setPopularSeeds(res.data))
-      .catch((err) => console.error('获取热门资源失败', err));
+      .catch((err) => {
+        console.error('获取热门资源失败', err);
+        toast.error('获取热门资源失败');
+      });
   }, []);
 
   useEffect(() => {
-    // 获取个性化推荐
-    if (user && user.userId) {
+    if (user?.userId) {
       axios
         .get(`/echo/recommendation/seeds/${user.userId}`)
-        .then((res) => setRecommendedSeeds(res.data))
-        .catch((err) => console.error('获取个性化推荐失败', err));
+        .then((res) => {
+          const categorized = { movie: [], tv: [], anime: [] };
+          res.data.forEach((seed) => {
+            if (seed.category === 'movie') categorized.movie.push(seed);
+            else if (seed.category === 'tv') categorized.tv.push(seed);
+            else if (seed.category === 'anime') categorized.anime.push(seed);
+          });
+          setRecommendedSeeds(categorized);
+        })
+        .catch((err) => {
+          console.error('获取个性化推荐失败', err);
+          toast.error('获取个性化推荐失败');
+        });
     }
   }, [user]);
 
-  const renderSeedCard = (seed) => (
-    <div className="seed-card" key={seed.id}>
-      <img src={seed.coverUrl || '/default-cover.jpg'} alt={seed.title} />
-      <div className="title">{seed.title}</div>
-    </div>
+  const handleDelete = (id) => {
+    confirmAlert({
+      title: '确认删除',
+      message: '确定删除此片单吗？',
+      buttons: [
+        {
+          label: '确定',
+          onClick: async () => {
+            const toastId = toast.loading('正在删除...');
+            try {
+              await axios.delete('/playlist', {
+                params: { ids: id },
+                paramsSerializer: (params) =>
+                  `ids=${Array.isArray(params.ids) ? params.ids.join(',') : params.ids}`
+              });
+              setPaidLists(paidLists.filter((list) => list.id !== id));
+              toast.success('删除成功', { id: toastId });
+            } catch (error) {
+              console.error('删除失败', error);
+              toast.error('删除失败，请稍后重试', { id: toastId });
+            }
+          }
+        },
+        { label: '取消' }
+      ]
+    });
+  };
+
+  const handlePurchase = (id) => {
+    confirmAlert({
+      title: '确认购买',
+      message: '确定支付该片单？',
+      buttons: [
+        {
+          label: '确定',
+          onClick: async () => {
+            const toastId = toast.loading('购买中...');
+            try {
+              const res = await axios.post(`/playlist/${id}/pay`);
+              if (res.data.code === 0) {
+                toast.success('购买成功', { id: toastId });
+                navigate(`/playlist/${id}`);
+              } else {
+                toast.error(`购买失败：${res.data.msg}`, { id: toastId });
+              }
+            } catch (err) {
+              console.error('支付失败', err);
+              toast.error('购买失败，请稍后重试', { id: toastId });
+            }
+          }
+        },
+        { label: '取消' }
+      ]
+    });
+  };
+
+const renderSeedCard = (seed) => (
+  <div
+    className="seed-card"
+    key={seed.id}
+    onClick={() => navigate(`/seed/${seed.id}`)}
+    style={{ cursor: 'pointer' }}
+  >
+    <img src={seed.imageUrl || '/default-cover.jpg'} alt={seed.title} />
+    <div className="title">{seed.title}</div>
+  </div>
+);
+
+
+  const renderSection = (title, seeds) => (
+    <>
+      <h2>{title}</h2>
+      <div className="seed-list">{seeds.map(renderSeedCard)}</div>
+    </>
   );
 
   return (
     <div className="recommendation-page">
-      <h2>🎬 正在热映</h2>
-      <div className="seed-list">{popularSeeds.map(renderSeedCard)}</div>
+      <h2>💰 付费片单</h2>
+      {user && user.role === 'admin' && (
+        <button className="create-button" onClick={() => setShowModal(true)}>
+          ➕ 创建片单
+        </button>
+      )}
 
-      <h2>🎯 个性化推荐</h2>
+      <div className="recommend-paid-row">
+        {paidLists.map((list) => (
+          <div className="paid-card" key={list.id}>
+            <img
+              className="paid-cover"
+              src={list.coverUrl || '/default-cover.jpg'}
+              alt={list.title}
+            />
+            <div className="paid-title">{list.title}</div>
+
+            {user && user.role === 'admin' ? (
+              <div className="admin-actions">
+                <button onClick={() => handleDelete(list.id)}>删除</button>
+              </div>
+            ) : list.isPaid ? (
+              <button onClick={() => navigate(`/playlist/${list.id}`)}>详情</button>
+            ) : (
+              <button onClick={() => handlePurchase(list.id)}>购买</button>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <h2>🎬 正在热映</h2>
+      <div className="seed-list popular-row">
+        {popularSeeds.slice(0, 8).map(renderSeedCard)}
+      </div>
+
+      <h2>🎯 猜你喜欢</h2>
       {user ? (
-        <div className="seed-list">{recommendedSeeds.map(renderSeedCard)}</div>
+        <>
+          {recommendedSeeds.movie.length > 0 &&
+            renderSection('🎞️ 电影推荐', recommendedSeeds.movie)}
+          {recommendedSeeds.tv.length > 0 &&
+            renderSection('📺 电视剧推荐', recommendedSeeds.tv)}
+          {recommendedSeeds.anime.length > 0 &&
+            renderSection('🎌 动漫推荐', recommendedSeeds.anime)}
+        </>
       ) : (
         <div className="login-reminder">请登录以获取个性化推荐</div>
       )}
+
+      {showModal && (
+        <CreatePlaylistModal
+          onClose={() => setShowModal(false)}
+          onSuccess={(newPlaylist) => {
+            setPaidLists([newPlaylist, ...paidLists]);
+            setShowModal(false);
+          }}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/pages/SeedList/Recommend/TorrentSelector.css b/src/pages/SeedList/Recommend/TorrentSelector.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/SeedList/Recommend/TorrentSelector.css
diff --git a/src/pages/SeedList/Recommend/TorrentSelector.jsx b/src/pages/SeedList/Recommend/TorrentSelector.jsx
new file mode 100644
index 0000000..abe2806
--- /dev/null
+++ b/src/pages/SeedList/Recommend/TorrentSelector.jsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import toast from 'react-hot-toast';
+
+const TorrentSelector = ({ selectedIds, onSelect }) => {
+  const [query, setQuery] = useState('');
+  const [torrents, setTorrents] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (query.trim()) {
+        fetchTorrents(query.trim());
+      } else {
+        setTorrents([]);
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  const fetchTorrents = async (keyword) => {
+    setLoading(true);
+    try {
+      const res = await axios.get('/seeds/list', {
+        params: {
+          title: keyword,  // 与 SeedList 统一参数名
+          page: 1,
+          size: 20,
+          orderKey: 'upload_time',
+          orderDesc: true,
+        }
+      });
+      if (res.data.code === 0) {
+        // 如果接口返回 data.list 格式
+        setTorrents(res.data.data.list || res.data.data || []);
+      } else {
+        setTorrents([]);
+      }
+    } catch (error) {
+      console.error('请求失败', error);
+      setTorrents([]);
+    }
+    setLoading(false);
+  };
+
+  const toggleSelect = (id, checked) => {
+    onSelect(id, checked);
+  };
+
+  return (
+    <div className="torrent-selector">
+      <input
+        placeholder="搜索种子名称"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      {loading && <div>加载中...</div>}
+      <ul>
+        {torrents.map(t => (
+          <li key={t.id}>
+            <label>
+              <input
+                type="checkbox"
+                value={t.id}
+                checked={selectedIds.includes(t.id)}
+                onChange={(e) => toggleSelect(t.id, e.target.checked)}
+              />
+              {t.title || t.name}
+            </label>
+          </li>
+        ))}
+      </ul>
+      {selectedIds.length > 0 && (
+        <div className="selected-torrents">
+          <b>已选种子：</b>
+          {selectedIds.join(', ')}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TorrentSelector;
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.css b/src/pages/SeedList/SeedDetail/SeedDetail.css
index 9e1a10e..d5a5148 100644
--- a/src/pages/SeedList/SeedDetail/SeedDetail.css
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.css
@@ -1,5 +1,5 @@
 .seed-detail-page {
-  background: #333;
+  background: #f8f3ef;
   min-height: 100vh;
   padding-bottom: 40px;
   font-family: 'Helvetica Neue', sans-serif;
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
index cf5502c..cdbf651 100644
--- a/src/pages/SeedList/SeedList.css
+++ b/src/pages/SeedList/SeedList.css
@@ -1,99 +1,109 @@
 .seed-list-container {
-  background: #333;
+  background: #f8f3ef; /* 柔和米棕背景 */
 }
 
 /* 搜索、排序控件 */
 .controls {
+  background-color: #fffaf7; /* 粉米白 */
+  padding: 10px 20px;
   display: flex;
   justify-content: center;
   gap: 16px;
-  padding: 10px 20px;
-  background-color: #5F4437;
+  border-radius: 12px;
+  border: 1px solid #e2cfc3; /* 浅棕边框 */
 }
 
 .search-input {
   padding: 6px 10px;
-  border-radius: 6px;
-  border: none;
+  border-radius: 8px;
+  border: 1px solid #e2cfc3;
   width: 200px;
+  font-size: 1rem;
+  color: #6b4f3b;
+  background-color: #fffaf7;
 }
 
 .sort-select {
   padding: 6px;
-  border-radius: 6px;
-  border: none;
+  border-radius: 8px;
+  border: 1px solid #e2cfc3;
+  background-color: #fffaf7;
+  color: #6b4f3b;
+  cursor: pointer;
 }
 
 /* 标签过滤 */
 .tag-filters {
-  background-color: #5F4437;
+  background-color: #fffaf7;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
   padding: 10px;
+  border-radius: 12px;
+  border: 1px solid #e2cfc3;
 }
 
 .tag-button {
-  background-color: #b38867;
-  color: white;
+  background-color: #eecfc1;
+  color: #6b4f3b;
   border: none;
   border-radius: 20px;
   padding: 6px 12px;
   cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.3s ease;
+}
+
+.tag-button:hover {
+  background-color: #f3ded7;
+  color: #4b3325;
 }
 
 .active-tag {
-  background-color: #d17c4f;
+  background-color: #6b4f3b;
+  color: #fffaf7;
 }
 
 .clear-filter-btn {
   background: transparent;
   border: none;
-  color: #888;
+  color: #6b4f3b;
   font-size: 1rem;
   cursor: pointer;
   margin-left: 4px;
+  transition: color 0.3s ease;
 }
 
 .clear-filter-btn:hover {
-  color: red;
+  color: #4b3325;
 }
 
-/* 去除 Link 组件默认的下划线和文字颜色变化 */
-.seed-item-link {
-  text-decoration: none;
-  color: inherit;
-  display: block;
-}
-
-/* 卡片展示 */
 .seed-list-content {
   padding: 20px;
-  background-color: #5F4437;
+  background-color: #fffaf7;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }
 
 .seed-list-card {
-  background-color: #e9ded2;
-  color: #333;
+  background-color: #fffaf7;
+  color: #6b4f3b;
   border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 4px rgba(107, 79, 59, 0.15);
   overflow: hidden;
 }
 
 .seed-list-header {
+  background-color: #eecfc1;
+  font-weight: bold;
+  color: #4e342e;
+  padding: 12px 16px;
   display: grid;
   grid-template-columns: 180px 2fr 1fr 1fr 1fr 1fr;
   align-items: center;
   justify-items: center;
-  padding: 12px 16px;
-  background-color: #BA929A;
-  font-weight: bold;
-}
-
-.seed-list-body {
-  display: flex;
-  flex-direction: column;
+  border-radius: 8px 8px 0 0;
 }
 
 .seed-item {
@@ -102,33 +112,31 @@
   align-items: center;
   justify-items: center;
   padding: 12px 16px;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid #e2cfc3;
+  color: #6b4f3b;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+}
+
+.seed-item:hover {
+  background-color: #f3ded7;
 }
 
 .seed-item-cover {
   width: 100px;
-  height: 140px;
+  height: auto;
   object-fit: cover;
   border-radius: 6px;
-  flex-shrink: 0;
+  margin-right: 12px;
+  box-shadow: 0 3px 6px rgb(107 79 59 / 0.2);
 }
 
 .seed-item-title {
   width: 100%;
   text-align: center;
-}
-
-.seed-title-row {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.seed-title {
+  font-weight: 600;
   font-size: 1.1rem;
-  margin: 0;
-  font-weight: bold;
+  color: #4e342e;
 }
 
 .seed-tags {
@@ -141,81 +149,64 @@
   word-break: break-word;
 }
 
-.seed-item-actions {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  justify-content: center;
-}
-
-.seed-header-cover {
-  width: 180px;
-  flex-shrink: 0;
-  text-align: center;
-}
-
-.seed-header-title,
-.seed-header-size,
-.seed-header-upload-time,
-.seed-header-downloads,
-.seed-header-actions {
-  text-align: center;
-}
-
 .seed-info {
   display: flex;
   justify-content: space-between;
   font-size: 0.9rem;
-  color: #666;
+  color: #5d4037;
   margin-bottom: 8px;
 }
 
 .tag-label {
-  background-color: #eee;
+  background-color: #fffaf7;
   border-radius: 4px;
   padding: 2px 6px;
   font-size: 12px;
-}
-
-.btn-primary,
-.btn-secondary,
-.btn-outline {
-  padding: 6px 12px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  text-align: center;
-  white-space: nowrap;
-  transition: background-color 0.2s ease;
+  color: #6b4f3b;
+  font-weight: 500;
 }
 
 .btn-primary {
-  background-color: #007bff;
-  color: white;
+  background-color: #6b4f3b;
+  color: #fffaf7;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  font-weight: 600;
 }
 
 .btn-primary:hover {
-  background-color: #0056b3;
+  background-color: #4b3325;
 }
 
 .btn-secondary {
-  background-color: #28a745;
-  color: white;
+  background-color: #eecfc1;
+  color: #6b4f3b;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  font-weight: 600;
 }
 
 .btn-secondary:hover {
-  background-color: #218838;
+  background-color: #f3ded7;
 }
 
 .btn-outline {
   background-color: transparent;
-  border: 1px solid #ccc;
-  color: #333;
+  border: 1px solid #6b4f3b;
+  color: #6b4f3b;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
 }
 
 .btn-outline:hover {
-  background-color: #f8f9fa;
+  background-color: #fffaf7;
+  color: #4b3325;
 }
 
 .seed-cover {
@@ -224,11 +215,5 @@
   object-fit: cover;
   border-radius: 8px;
   margin-bottom: 12px;
-}
-.seed-item-cover {
-    width: 100px;
-    height: auto;
-    object-fit: cover;
-    border-radius: 4px;
-    margin-right: 12px;
-}
+  box-shadow: 0 4px 12px rgb(107 79 59 / 0.2);
+}
\ No newline at end of file
diff --git a/src/pages/SeedList/SeedList.jsx b/src/pages/SeedList/SeedList.jsx
index a74d008..263038b 100644
--- a/src/pages/SeedList/SeedList.jsx
+++ b/src/pages/SeedList/SeedList.jsx
@@ -1,11 +1,14 @@
-// export default SeedList;
 import React, { useState, useEffect } from 'react';
 import { Link } from 'wouter';
 import axios from 'axios';
 import Recommend from './Recommend/Recommend';
-import Header from '../../components/Header';  // 引入 Header 组件
+import Header from '../../components/Header';
 import './SeedList.css';
 import { useUser } from '../../context/UserContext';
+import toast from 'react-hot-toast';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
+import AuthButton from '../../components/AuthButton';
 
 const SeedList = () => {
     const [seeds, setSeeds] = useState([]);
@@ -15,13 +18,13 @@
     const [activeTab, setActiveTab] = useState('种子列表');
     const [filters, setFilters] = useState({});
     const [selectedFilters, setSelectedFilters] = useState({});
-    const [tagMode, setTagMode] = useState('any'); // 与接口对应，any / all
+    const [tagMode, setTagMode] = useState('any');
     const [errorMsg, setErrorMsg] = useState('');
     const { user } = useUser();
 
     const TAGS = ['猜你喜欢', '电影', '电视剧', '动漫', '音乐', '游戏', '综艺', '软件', '体育', '学习', '纪录片', '其他'];
 
-const CATEGORY_MAP = {
+    const CATEGORY_MAP = {
         '电影': 'movie',
         '电视剧': 'tv',
         '动漫': 'anime',
@@ -33,10 +36,9 @@
         '学习': 'study',
         '纪录片': 'documentary',
         '其他': 'other',
-        '猜你喜欢': '',        
-        '种子列表': '',        
-};
-
+        '猜你喜欢': '',
+        '种子列表': '',
+    };
 
     const buildQueryParams = () => {
         const category = CATEGORY_MAP[activeTab] || '';
@@ -61,26 +63,22 @@
 
         if (tags.length > 0) {
             params.tags = tags;
-            params.tagMode = tagMode; // any 或 all
+            params.tagMode = tagMode;
         }
 
         return params;
     };
 
     const fetchSeeds = async () => {
-        if (activeTab === '猜你喜欢') return; 
+        if (activeTab === '猜你喜欢') return;
         setLoading(true);
         setErrorMsg('');
         try {
             const params = buildQueryParams();
             const response = await axios.get('/seeds/list', { params });
-
             const data = response.data;
 
-            if (data.code !== 0) {
-                throw new Error(data.msg || '获取失败');
-            }
-
+            if (data.code !== 0) throw new Error(data.msg || '获取失败');
             setSeeds(data.data || []);
         } catch (error) {
             console.error('获取种子列表失败:', error);
@@ -120,16 +118,9 @@
     }, [activeTab, sortOption, selectedFilters, tagMode, searchTerm]);
 
     const handleDownload = async (seedId) => {
-        if (!user || !user.userId) {
-            alert('请先登录再下载种子文件');
-            return;
-        }
-
         try {
             const response = await axios.get(`/seeds/${seedId}/download`, {
-                params: {
-                    passkey: user.userId,
-                },
+                params: { passkey: user.userId },
                 responseType: 'blob'
             });
 
@@ -142,22 +133,16 @@
             URL.revokeObjectURL(downloadUrl);
         } catch (error) {
             console.error('下载失败:', error);
-            alert('下载失败，请稍后再试。');
+            toast.error('下载失败，请稍后再试。');
         }
     };
 
     const handleFilterChange = (key, value) => {
-        setSelectedFilters(prev => ({
-            ...prev,
-            [key]: value
-        }));
+        setSelectedFilters(prev => ({ ...prev, [key]: value }));
     };
 
     const clearFilter = (key) => {
-        setSelectedFilters(prev => ({
-            ...prev,
-            [key]: '不限'
-        }));
+        setSelectedFilters(prev => ({ ...prev, [key]: '不限' }));
     };
 
     return (
@@ -172,19 +157,11 @@
                     onChange={(e) => setSearchTerm(e.target.value)}
                     className="search-input"
                 />
-                <select
-                    value={sortOption}
-                    onChange={(e) => setSortOption(e.target.value)}
-                    className="sort-select"
-                >
+                <select value={sortOption} onChange={(e) => setSortOption(e.target.value)} className="sort-select">
                     <option value="最新">最新</option>
                     <option value="最热">最热</option>
                 </select>
-                <select
-                    value={tagMode}
-                    onChange={(e) => setTagMode(e.target.value)}
-                    className="tag-mode-select"
-                >
+                <select value={tagMode} onChange={(e) => setTagMode(e.target.value)} className="tag-mode-select">
                     <option value="any">包含任意标签</option>
                     <option value="all">包含所有标签</option>
                 </select>
@@ -192,7 +169,8 @@
 
             <div className="tag-filters">
                 {TAGS.map(tag => (
-                    <button
+                    <AuthButton
+                        roles={["test"]}
                         key={tag}
                         className={`tag-button ${activeTab === tag ? 'active-tag' : ''}`}
                         onClick={() => {
@@ -202,7 +180,7 @@
                         }}
                     >
                         {tag}
-                    </button>
+                    </AuthButton>
                 ))}
             </div>
 
@@ -211,21 +189,13 @@
                     {Object.entries(filters).map(([key, options]) => (
                         <div className="filter-group" key={key}>
                             <label>{key}:</label>
-                            <select
-                                value={selectedFilters[key]}
-                                onChange={(e) => handleFilterChange(key, e.target.value)}
-                            >
+                            <select value={selectedFilters[key]} onChange={(e) => handleFilterChange(key, e.target.value)}>
                                 {options.map(opt => (
                                     <option key={opt} value={opt}>{opt}</option>
                                 ))}
                             </select>
                             {selectedFilters[key] !== '不限' && (
-                                <button
-                                    className="clear-filter-btn"
-                                    onClick={() => clearFilter(key)}
-                                >
-                                    ✕
-                                </button>
+                                <button className="clear-filter-btn" onClick={() => clearFilter(key)}>✕</button>
                             )}
                         </div>
                     ))}
@@ -270,16 +240,11 @@
                                 }
 
                                 return (
-                                   <Link to={`/seed/${seed.id}`} key={index} className="seed-item-link">
+                                    <Link to={`/seed/${seed.id}`} key={index} className="seed-item-link">
                                         <div className="seed-item">
                                             {seed.imageUrl && (
-                                                <img
-                                                    src={seed.imageUrl}
-                                                    alt={seed.title}
-                                                    className="seed-item-cover"
-                                                />
+                                                <img src={seed.imageUrl} alt={seed.title} className="seed-item-cover" />
                                             )}
-
                                             <div className="seed-item-title">
                                                 <div className="seed-title-row">
                                                     <h3 className="seed-title">{seed.title}</h3>
@@ -293,16 +258,30 @@
                                             <div className="seed-item-size">{seed.size || '未知'}</div>
                                             <div className="seed-item-upload-time">{seed.upload_time?.split('T')[0] || '未知'}</div>
                                             <div className="seed-item-downloads">{seed.downloads ?? 0} 次下载</div>
-                                            <div
-                                                className="seed-item-actions"
-                                                onClick={e => e.stopPropagation()}
-                                            >
+                                            <div className="seed-item-actions" onClick={e => e.stopPropagation()}>
                                                 <button
                                                     className="btn-primary"
                                                     onClick={e => {
                                                         e.preventDefault();
                                                         e.stopPropagation();
-                                                        handleDownload(seed.id);
+                                                        if (!user || !user.userId) {
+                                                            toast.error('请先登录再下载种子文件');
+                                                            return;
+                                                        }
+                                                        confirmAlert({
+                                                            title: '确认下载',
+                                                            message: `是否下载种子「${seed.title}」？`,
+                                                            buttons: [
+                                                                {
+                                                                    label: '确认',
+                                                                    onClick: () => handleDownload(seed.id)
+                                                                },
+                                                                {
+                                                                    label: '取消',
+                                                                    onClick: () => { }
+                                                                }
+                                                            ]
+                                                        });
                                                     }}
                                                 >
                                                     下载
@@ -314,7 +293,7 @@
                                                         e.stopPropagation();
 
                                                         if (!user || !user.userId) {
-                                                            alert('请先登录再收藏');
+                                                            toast.error('请先登录再收藏');
                                                             return;
                                                         }
 
@@ -324,13 +303,13 @@
                                                             });
 
                                                             if (res.data.code === 0) {
-                                                                alert('操作成功');
+                                                                toast.success('操作成功');
                                                             } else {
-                                                                alert(res.data.msg || '操作失败');
+                                                                toast.error(res.data.msg || '操作失败');
                                                             }
                                                         } catch (err) {
                                                             console.error('收藏失败:', err);
-                                                            alert('收藏失败，请稍后再试。');
+                                                            toast.error('收藏失败，请稍后再试。');
                                                         }
                                                     }}
                                                 >
diff --git a/src/pages/UserCenter/UserNav.css b/src/pages/UserCenter/UserNav.css
index 6a1b405..baf3cb9 100644
--- a/src/pages/UserCenter/UserNav.css
+++ b/src/pages/UserCenter/UserNav.css
@@ -35,11 +35,11 @@
 
 /* 鼠标悬浮时的背景颜色 */
 .user-nav-item:hover {
-  background-color: #5a1414;
+  background-color: #fffaf7;
 }
 
 /* 激活项的样式 */
 .user-nav-item.active {
-  background-color: #BA929A;
+  background-color: #eecfc1;
   color: white;
 }    
\ No newline at end of file
diff --git a/src/pages/UserCenter/UserProfile.css b/src/pages/UserCenter/UserProfile.css
index edc04e1..18f793d 100644
--- a/src/pages/UserCenter/UserProfile.css
+++ b/src/pages/UserCenter/UserProfile.css
@@ -4,7 +4,7 @@
   font-family: Arial, sans-serif;
   display: flex;
   gap: 10%;
-  background: #333;
+  background: #f8f3ef;
 }
 
 .right-content {
@@ -47,7 +47,7 @@
 }  
 
 .common-card {
-  background-color: #e9ded2;
+  background-color: #fffaf7;
   border-radius: 16px;
   margin: 0 auto;
   margin-top: 40px;
@@ -72,7 +72,7 @@
   position: absolute;
   bottom: 0;
   right: 0;
-  background: #3498db;
+  background: #4b3325;
   color: white;
   padding: 4px 8px;
   font-size: 12px;
@@ -135,7 +135,7 @@
   position: absolute;
   bottom: 0;
   right: 0;
-  background: #3498db;
+  background: #4b3325;
   color: white;
   padding: 4px 8px;
   font-size: 12px;
@@ -201,7 +201,7 @@
   padding: 6px 12px;
   border: none;
   border-radius: 6px;
-  background-color: #4a90e2;
+  background-color: #4b3325;
   color: white;
   cursor: pointer;
 }
@@ -245,14 +245,14 @@
 
 .profile-actions button {
   padding: 8px 16px;
-  background-color: #4677f5;
+  background-color: #4b3325;
   color: white;
   border: none;
   border-radius: 6px;
   cursor: pointer;
 }
 
-.modal {
+.user-modal {
   position: fixed;
   top: 0;
   left: 0;
@@ -265,21 +265,21 @@
   z-index: 99;
 }
 
-.modal-content {
+.user-modal-content {
   background-color: white;
   padding: 20px;
   border-radius: 8px;
   width: 300px;
 }
 
-.modal-content input {
+.user-modal-content input {
   display: block;
   width: 100%;
   margin: 10px 0;
   padding: 8px;
 }
 
-.modal-buttons {
+.user-modal-buttons {
   display: flex;
   justify-content: space-between;
 }
diff --git a/src/pages/UserCenter/UserProfile.jsx b/src/pages/UserCenter/UserProfile.jsx
index cf52d99..bcfbf0b 100644
--- a/src/pages/UserCenter/UserProfile.jsx
+++ b/src/pages/UserCenter/UserProfile.jsx
@@ -1,266 +1,3 @@
-// import React, { useEffect, useState } from 'react';
-// import axios from 'axios';
-// import './UserProfile.css';
-// import { useUser } from '../../context/UserContext';
-// import { useLocation } from 'wouter';
-
-// const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;
-
-// const UserProfile = () => {
-//   const { user, loading, logout } = useUser();
-//   const [userProfile, setUserProfile] = useState(null);
-//   const [experienceInfo, setExperienceInfo] = useState(null);
-//   const [error, setError] = useState(null);
-
-//   // 修改密码状态
-//   const [showPwdModal, setShowPwdModal] = useState(false);
-//   const [oldPassword, setOldPassword] = useState('');
-//   const [newPassword, setNewPassword] = useState('');
-//   const [confirmPassword, setConfirmPassword] = useState('');
-
-//   // 退出登录
-//   const [, setLocation] = useLocation();
-
-//   useEffect(() => {
-//     if (loading) return;
-//     if (!user || !user.userId) {
-//       setError('未登录或用户信息缺失');
-//       setUserProfile(null);
-//       return;
-//     }
-
-//     const fetchUserProfile = async () => {
-//       try {
-//         setError(null);
-//         const { data: raw } = await axios.get(`/echo/user/${user.userId}/getProfile`);
-//         if (!raw) {
-//           setError('用户数据为空');
-//           setUserProfile(null);
-//           return;
-//         }
-
-//         const profile = {
-//           avatarUrl: raw.avatarUrl
-//             ? `${process.env.REACT_APP_AVATAR_BASE_URL}${raw.avatarUrl}`
-//             : DEFAULT_AVATAR_URL,
-//           nickname: raw.username || '未知用户',
-//           email: raw.email || '未填写',
-//           gender: raw.gender || '保密',
-//           bio: raw.description || '无',
-//           interests: raw.hobbies ? raw.hobbies.split(',') : [],
-//           level: raw.level || '未知',
-//           experience: raw.experience ?? 0,
-//           uploadAmount: raw.uploadCount ?? 0,
-//           downloadAmount: raw.downloadCount ?? 0,
-//           shareRate: raw.shareRate ?? 0,
-//           joinedDate: raw.registrationTime,
-//         };
-
-//         setUserProfile(profile);
-//       } catch (err) {
-//         setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
-//         setUserProfile(null);
-//       }
-//     };
-
-//     const fetchExperienceInfo = async () => {
-//       try {
-//         const { data } = await axios.get('/echo/level/getExperience', {
-//           params: { user_id: user.userId },
-//         });
-//         setExperienceInfo(data);
-//       } catch (err) {
-//         console.error('经验信息获取失败:', err);
-//       }
-//     };
-
-//     fetchUserProfile();
-//     fetchExperienceInfo();
-//   }, [user, loading]);
-
-//   const handleAvatarUpload = async (e) => {
-//     const file = e.target.files[0];
-//     if (!file) return;
-
-//     const formData = new FormData();
-//     formData.append('file', file);
-
-//     try {
-//       const { data } = await axios.post(
-//         `/echo/user/${user.userId}/uploadAvatar`,
-//         formData,
-//         { headers: { 'Content-Type': 'multipart/form-data' } }
-//       );
-
-//       if (data?.avatarUrl) {
-//         setUserProfile((prev) => ({
-//           ...prev,
-//           avatarUrl: `${process.env.REACT_APP_AVATAR_BASE_URL}${data.avatarUrl}`,
-//         }));
-//         alert('头像上传成功');
-//       } else {
-//         alert('头像上传成功，但未返回新头像地址');
-//       }
-//     } catch (err) {
-//       console.error('上传失败:', err);
-//       alert('头像上传失败，请重试');
-//     }
-//   };
-
-//   const handleLogout = () => {
-//     logout();
-//     setLocation('/auth'); // 退出后跳转登录页
-//     // window.location.reload(); // 或跳转登录页
-//   };
-
-//   const handleChangePassword = async () => {
-//     if (!oldPassword || !newPassword || !confirmPassword) {
-//       alert('请填写所有字段');
-//       return;
-//     }
-//     if (newPassword !== confirmPassword) {
-//       alert('两次输入的新密码不一致');
-//       return;
-//     }
-
-//     try {
-//       // await axios.post('/echo/user/password', {
-//       //   user_id: user.userId,
-//       //   oldPassword,
-//       //   newPassword,
-//       // });
-//       await axios.post('/echo/user/password', {
-//         user_id: user.userId,
-//         old_password: oldPassword,
-//         new_password: newPassword,
-//         confirm_password: confirmPassword,
-//       });
-//       alert('密码修改成功，请重新登录');
-//       logout();
-//       window.location.reload();
-//     } catch (err) {
-//       alert(err.response?.data?.message || '密码修改失败，请检查原密码是否正确');
-//     }
-//   };
-
-//   if (loading) return <p>正在加载用户信息...</p>;
-//   if (error) return <p className="error">{error}</p>;
-//   if (!userProfile) return null;
-
-//   const {
-//     avatarUrl,
-//     nickname,
-//     email,
-//     gender,
-//     bio,
-//     interests,
-//     level,
-//     experience,
-//     uploadAmount,
-//     downloadAmount,
-//     shareRate,
-//     joinedDate,
-//   } = userProfile;
-
-//   const progressPercent = experienceInfo
-//     ? Math.min(
-//         100,
-//         ((experienceInfo.current_experience || 0) /
-//           (experienceInfo.next_level_experience || 1)) *
-//           100
-//       ).toFixed(2)
-//     : 0;
-
-//   const expToNextLevel = experienceInfo
-//     ? (experienceInfo.next_level_experience - experienceInfo.current_experience)
-//     : null;
-
-//   return (
-//     <div className="common-card">
-//       <div className="right-content">
-//         <div className="profile-header">
-//           <div className="avatar-wrapper">
-//             <img src={avatarUrl} alt={nickname} className="avatar" />
-//             <label htmlFor="avatar-upload" className="avatar-upload-label">
-//               上传头像
-//             </label>
-//             <input
-//               type="file"
-//               id="avatar-upload"
-//               accept="image/*"
-//               style={{ display: 'none' }}
-//               onChange={handleAvatarUpload}
-//             />
-//           </div>
-//           <h1>{nickname}</h1>
-//         </div>
-
-//         <div className="profile-details">
-//           <p><strong>邮箱：</strong>{email}</p>
-//           <p><strong>性别：</strong>{gender}</p>
-//           <p><strong>个人简介：</strong>{bio}</p>
-//           <p><strong>兴趣：</strong>{interests.length > 0 ? interests.join(', ') : '无'}</p>
-//           <p><strong>等级：</strong>{level}</p>
-//           <p><strong>经验：</strong>{experience}</p>
-//           <p><strong>上传量：</strong>{uploadAmount}</p>
-//           <p><strong>下载量：</strong>{downloadAmount}</p>
-//           <p><strong>分享率：</strong>{(shareRate * 100).toFixed(2)}%</p>
-//           <p><strong>加入时间：</strong>{new Date(joinedDate).toLocaleDateString()}</p>
-
-//           {experienceInfo && (
-//             <>
-//               <p><strong>距离下一等级还需：</strong>{expToNextLevel} 经验值</p>
-//               <div className="exp-bar-wrapper">
-//                 <div className="exp-bar" style={{ width: `${progressPercent}%` }} />
-//               </div>
-//               <p className="exp-progress-text">{progressPercent}%</p>
-//             </>
-//           )}
-
-//           {/* 修改密码与退出登录按钮 */}
-//           <div className="profile-actions">
-//             <button onClick={() => setShowPwdModal(true)}>修改密码</button>
-//             <button onClick={handleLogout}>退出登录</button>
-//           </div>
-
-//           {/* 修改密码弹窗 */}
-//           {showPwdModal && (
-//             <div className="modal">
-//               <div className="modal-content">
-//                 <h3>修改密码</h3>
-//                 <input
-//                   type="password"
-//                   placeholder="原密码"
-//                   value={oldPassword}
-//                   onChange={(e) => setOldPassword(e.target.value)}
-//                 />
-//                 <input
-//                   type="password"
-//                   placeholder="新密码"
-//                   value={newPassword}
-//                   onChange={(e) => setNewPassword(e.target.value)}
-//                 />
-//                 <input
-//                   type="password"
-//                   placeholder="确认新密码"
-//                   value={confirmPassword}
-//                   onChange={(e) => setConfirmPassword(e.target.value)}
-//                 />
-//                 <div className="modal-buttons">
-//                   <button onClick={handleChangePassword}>确认修改</button>
-//                   <button onClick={() => setShowPwdModal(false)}>取消</button>
-//                 </div>
-//               </div>
-//             </div>
-//           )}
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default UserProfile;
-
 import React from 'react';
 import UserProfileBase from './UserProfileBase';
 import UserLevelExperience from './UserLevelExperience';
diff --git a/src/pages/UserCenter/UserProfileBase.jsx b/src/pages/UserCenter/UserProfileBase.jsx
index 7a1f726..791baca 100644
--- a/src/pages/UserCenter/UserProfileBase.jsx
+++ b/src/pages/UserCenter/UserProfileBase.jsx
@@ -2,6 +2,9 @@
 import axios from 'axios';
 import { useUser } from '../../context/UserContext';
 import { useLocation } from 'wouter';
+import toast from 'react-hot-toast';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
 
 const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;
 
@@ -10,13 +13,11 @@
   const [userProfile, setUserProfile] = useState(null);
   const [error, setError] = useState(null);
 
-  // 修改密码状态
   const [showPwdModal, setShowPwdModal] = useState(false);
   const [oldPassword, setOldPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
 
-  // 退出登录
   const [, setLocation] = useLocation();
 
   useEffect(() => {
@@ -55,7 +56,6 @@
         };
 
         setUserProfile(profile);
-        // 加载经验信息
         if (onLoadExperienceInfo) onLoadExperienceInfo(user.userId);
       } catch (err) {
         setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
@@ -85,28 +85,44 @@
           ...prev,
           avatarUrl: `${process.env.REACT_APP_AVATAR_BASE_URL}${data.avatarUrl}`,
         }));
-        alert('头像上传成功');
+        toast.success('头像上传成功');
       } else {
-        alert('头像上传成功，但未返回新头像地址');
+        toast.success('头像上传成功，但未返回新头像地址');
       }
     } catch (err) {
       console.error('上传失败:', err);
-      alert('头像上传失败，请重试');
+      toast.error('头像上传失败，请重试');
     }
   };
 
   const handleLogout = () => {
     logout();
-    setLocation('/auth'); // 退出后跳转登录页
+    setLocation('/auth');
+  };
+
+  const confirmPasswordChange = () => {
+    confirmAlert({
+      title: '确认修改密码',
+      message: '确定要修改密码吗？修改成功后将自动登出。',
+      buttons: [
+        {
+          label: '确认',
+          onClick: handleChangePassword,
+        },
+        {
+          label: '取消',
+        },
+      ],
+    });
   };
 
   const handleChangePassword = async () => {
     if (!oldPassword || !newPassword || !confirmPassword) {
-      alert('请填写所有字段');
+      toast.error('请填写所有字段');
       return;
     }
     if (newPassword !== confirmPassword) {
-      alert('两次输入的新密码不一致');
+      toast.error('两次输入的新密码不一致');
       return;
     }
 
@@ -117,11 +133,14 @@
         new_password: newPassword,
         confirm_password: confirmPassword,
       });
-      alert('密码修改成功，请重新登录');
+
+      toast.success('密码修改成功，请重新登录');
       logout();
-      window.location.reload();
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
     } catch (err) {
-      alert(err.response?.data?.message || '密码修改失败，请检查原密码是否正确');
+      toast.error(err.response?.data?.message || '密码修改失败，请检查原密码是否正确');
     }
   };
 
@@ -169,23 +188,19 @@
           <p><strong>性别：</strong>{gender}</p>
           <p><strong>个人简介：</strong>{bio}</p>
           <p><strong>兴趣：</strong>{interests.length > 0 ? interests.join(', ') : '无'}</p>
-          {/* <p><strong>等级：</strong>{level}</p>
-          <p><strong>经验：</strong>{experience}</p> */}
           <p><strong>上传量：</strong>{uploadAmount}</p>
           <p><strong>下载量：</strong>{downloadAmount}</p>
           <p><strong>分享率：</strong>{(shareRate * 100).toFixed(2)}%</p>
           <p><strong>加入时间：</strong>{new Date(joinedDate).toLocaleDateString()}</p>
 
-          {/* 修改密码与退出登录按钮 */}
           <div className="profile-actions">
             <button onClick={() => setShowPwdModal(true)}>修改密码</button>
             <button onClick={handleLogout}>退出登录</button>
           </div>
 
-          {/* 修改密码弹窗 */}
           {showPwdModal && (
-            <div className="modal">
-              <div className="modal-content">
+            <div className="user-modal">
+              <div className="user-modal-content">
                 <h3>修改密码</h3>
                 <input
                   type="password"
@@ -205,8 +220,8 @@
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                 />
-                <div className="modal-buttons">
-                  <button onClick={handleChangePassword}>确认修改</button>
+                <div className="user-modal-buttons">
+                  <button onClick={confirmPasswordChange}>确认修改</button>
                   <button onClick={() => setShowPwdModal(false)}>取消</button>
                 </div>
               </div>
@@ -218,4 +233,4 @@
   );
 };
 
-export default UserProfileBase;  
\ No newline at end of file
+export default UserProfileBase;
diff --git a/src/pages/UserCenter/UserRecharge.jsx b/src/pages/UserCenter/UserRecharge.jsx
index 7a2f9b3..b1dff24 100644
--- a/src/pages/UserCenter/UserRecharge.jsx
+++ b/src/pages/UserCenter/UserRecharge.jsx
@@ -1,42 +1,183 @@
 
-// export default Recharge;
+// // export default Recharge;
+// import React, { useState } from 'react';
+// import axios from 'axios';
+// import { useUser } from '../../context/UserContext';
+// import toast from 'react-hot-toast';
+// import { confirmAlert } from 'react-confirm-alert';
+// import 'react-confirm-alert/src/react-confirm-alert.css';
+
+// const UserRecharge = () => {
+//   const [amount, setAmount] = useState('');
+//   const [loading, setLoading] = useState(false);
+//   const [message, setMessage] = useState('');
+//   const [showPayDialog, setShowPayDialog] = useState(false);
+//   const [payProcessing, setPayProcessing] = useState(false);
+
+//   const { user } = useUser();
+//   const userId = user?.userId;
+
+//   // 点击提交充值，打开模拟支付弹窗
+//   const handleSubmit = () => {
+//     if (!userId) {
+//       setMessage('未登录，无法充值');
+//       return;
+//     }
+//     if (!amount || isNaN(amount) || Number(amount) <= 0) {
+//       setMessage('请输入有效的充值金额');
+//       return;
+//     }
+//     setMessage('');
+//     setShowPayDialog(true);
+//   };
+
+//   // 模拟支付弹窗点击“确认支付”
+//   const handlePayConfirm = async () => {
+//     setPayProcessing(true);
+//     setMessage('');
+
+//     // 模拟支付等待 2 秒
+//     setTimeout(async () => {
+//       try {
+//         // 支付成功后调用后端充值接口
+//         const response = await axios.post('/echo/user/recharge', null, {
+//           params: {
+//             userId,
+//             amount: Number(amount),
+//           },
+//         });
+
+//         setMessage(response.data.message || '充值成功！');
+//         setAmount('');
+//       } catch (error) {
+//         setMessage(error.response?.data?.message || '充值失败，请重试');
+//       } finally {
+//         setPayProcessing(false);
+//         setShowPayDialog(false);
+//       }
+//     }, 2000);
+//   };
+
+//   // 取消支付弹窗
+//   const handlePayCancel = () => {
+//     setShowPayDialog(false);
+//     setMessage('支付已取消');
+//   };
+
+//   return (
+//     <div className="recharge-page" style={{ maxWidth: 400, margin: 'auto', padding: 20 }}>
+//       <h2>充值服务</h2>
+//       <div style={{ marginBottom: 12 }}>
+//         <label>
+//           充值金额：
+//           <input
+//             type="number"
+//             min="1"
+//             value={amount}
+//             onChange={(e) => setAmount(e.target.value)}
+//             disabled={loading || payProcessing}
+//             style={{ marginLeft: 8, width: 120 }}
+//           />
+//         </label>
+//       </div>
+//       <button onClick={handleSubmit} disabled={loading || payProcessing}>
+//         {loading || payProcessing ? '处理中...' : '提交充值'}
+//       </button>
+
+//       {message && <p style={{ marginTop: 12 }}>{message}</p>}
+
+//       {/* 模拟支付弹窗 */}
+//       {showPayDialog && (
+//         <div
+//           style={{
+//             position: 'fixed',
+//             top: 0, left: 0, right: 0, bottom: 0,
+//             backgroundColor: 'rgba(0,0,0,0.5)',
+//             display: 'flex',
+//             justifyContent: 'center',
+//             alignItems: 'center',
+//             zIndex: 1000,
+//           }}
+//         >
+//           <div
+//             style={{
+//               backgroundColor: '#fff',
+//               padding: 20,
+//               borderRadius: 8,
+//               width: 300,
+//               textAlign: 'center',
+//               boxShadow: '0 0 10px rgba(0,0,0,0.25)',
+//             }}
+//           >
+//             <h3>模拟支付</h3>
+//             <p>支付金额：{amount} 元</p>
+
+//             {payProcessing ? (
+//               <p>支付处理中，请稍候...</p>
+//             ) : (
+//               <>
+//                 <button onClick={handlePayConfirm} style={{ marginRight: 10 }}>
+//                   确认支付
+//                 </button>
+//                 <button onClick={handlePayCancel}>取消</button>
+//               </>
+//             )}
+//           </div>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default UserRecharge;
 import React, { useState } from 'react';
 import axios from 'axios';
 import { useUser } from '../../context/UserContext';
+import toast from 'react-hot-toast';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
 
 const UserRecharge = () => {
   const [amount, setAmount] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState('');
-  const [showPayDialog, setShowPayDialog] = useState(false);
   const [payProcessing, setPayProcessing] = useState(false);
 
   const { user } = useUser();
   const userId = user?.userId;
 
-  // 点击提交充值，打开模拟支付弹窗
+  // 点击提交充值
   const handleSubmit = () => {
     if (!userId) {
-      setMessage('未登录，无法充值');
+      toast.error('未登录，无法充值');
       return;
     }
     if (!amount || isNaN(amount) || Number(amount) <= 0) {
-      setMessage('请输入有效的充值金额');
+      toast.error('请输入有效的充值金额');
       return;
     }
-    setMessage('');
-    setShowPayDialog(true);
+
+    confirmAlert({
+      title: '确认支付',
+      message: `确认充值 ${amount} 元吗？`,
+      buttons: [
+        {
+          label: '确认支付',
+          onClick: () => handlePayConfirm(),
+        },
+        {
+          label: '取消',
+          onClick: () => toast('已取消充值'),
+        },
+      ],
+    });
   };
 
-  // 模拟支付弹窗点击“确认支付”
   const handlePayConfirm = async () => {
     setPayProcessing(true);
-    setMessage('');
 
-    // 模拟支付等待 2 秒
+    toast.loading('正在处理支付...', { id: 'recharge' });
+
     setTimeout(async () => {
       try {
-        // 支付成功后调用后端充值接口
         const response = await axios.post('/echo/user/recharge', null, {
           params: {
             userId,
@@ -44,23 +185,16 @@
           },
         });
 
-        setMessage(response.data.message || '充值成功！');
+        toast.success(response.data.message || '充值成功！', { id: 'recharge' });
         setAmount('');
       } catch (error) {
-        setMessage(error.response?.data?.message || '充值失败，请重试');
+        toast.error(error.response?.data?.message || '充值失败，请重试', { id: 'recharge' });
       } finally {
         setPayProcessing(false);
-        setShowPayDialog(false);
       }
     }, 2000);
   };
 
-  // 取消支付弹窗
-  const handlePayCancel = () => {
-    setShowPayDialog(false);
-    setMessage('支付已取消');
-  };
-
   return (
     <div className="recharge-page" style={{ maxWidth: 400, margin: 'auto', padding: 20 }}>
       <h2>充值服务</h2>
@@ -72,56 +206,14 @@
             min="1"
             value={amount}
             onChange={(e) => setAmount(e.target.value)}
-            disabled={loading || payProcessing}
+            disabled={payProcessing}
             style={{ marginLeft: 8, width: 120 }}
           />
         </label>
       </div>
-      <button onClick={handleSubmit} disabled={loading || payProcessing}>
-        {loading || payProcessing ? '处理中...' : '提交充值'}
+      <button onClick={handleSubmit} disabled={payProcessing}>
+        {payProcessing ? '处理中...' : '提交充值'}
       </button>
-
-      {message && <p style={{ marginTop: 12 }}>{message}</p>}
-
-      {/* 模拟支付弹窗 */}
-      {showPayDialog && (
-        <div
-          style={{
-            position: 'fixed',
-            top: 0, left: 0, right: 0, bottom: 0,
-            backgroundColor: 'rgba(0,0,0,0.5)',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            zIndex: 1000,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: '#fff',
-              padding: 20,
-              borderRadius: 8,
-              width: 300,
-              textAlign: 'center',
-              boxShadow: '0 0 10px rgba(0,0,0,0.25)',
-            }}
-          >
-            <h3>模拟支付</h3>
-            <p>支付金额：{amount} 元</p>
-
-            {payProcessing ? (
-              <p>支付处理中，请稍候...</p>
-            ) : (
-              <>
-                <button onClick={handlePayConfirm} style={{ marginRight: 10 }}>
-                  确认支付
-                </button>
-                <button onClick={handlePayCancel}>取消</button>
-              </>
-            )}
-          </div>
-        </div>
-      )}
     </div>
   );
 };