From ec4b6688c2a68d49960ccdd72b74b5209233d15f Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Sat, 24 May 2025 15:59:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=AB=A0=E8=8A=82=E9=98=85=E8=AF=BB=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增用户中心的礼物盒、任务中心和消息页面
- 优化章节阅读界面布局和交互
- 添加页面切换动画和未读消息功能
---
 src/App.vue                   |   6 +-
 src/layout/index.vue          |  25 +-
 src/layout/layout/Header.vue  |  49 +++-
 src/router/index.js           |  18 ++
 src/store/index.js            |  28 +-
 src/views/book/chapter.vue    | 625 +++++++++++++++++++++---------------------
 src/views/book/index.vue      |   4 +-
 src/views/user/GiftBox.vue    | 365 ++++++++++++++++++++++++
 src/views/user/Messages.vue   | 493 +++++++++++++++++++++++++++++++++
 src/views/user/TaskCenter.vue | 414 ++++++++++++++++++++++++++++
 10 files changed, 1712 insertions(+), 315 deletions(-)
 create mode 100644 src/views/user/GiftBox.vue
 create mode 100644 src/views/user/Messages.vue
 create mode 100644 src/views/user/TaskCenter.vue

diff --git a/src/App.vue b/src/App.vue
index b07feae..b9d0143 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app">
+    <div id="app" :style="{ backgroundColor: route.path.includes('chapter') ? '#e9e4d8' : '#f5f5f5' }">
         <AuthProvider>
             <AuthorApplicationProvider>
                 <router-view />
@@ -54,6 +54,10 @@ export default {
                 routerEvents.triggerLogin = null;
             }
         });
+
+        return {
+            route
+        }
     }
 };
 </script>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 55110e1..54e72d2 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -6,7 +6,9 @@
         <!-- 主内容区 -->
         <main class="layout-main">
             <router-view v-slot="{ Component }">
-                <component :is="Component" />
+                <transition name="fade">
+                    <component :is="Component" />
+                </transition>
             </router-view>
         </main>
 
@@ -51,4 +53,25 @@ export default defineComponent({
     margin: 0 auto;
     width: 100%;
 }
+
+
+// 页面切换动画
+.slide-fade-enter-active {
+    transition: all 0.15s ease-out;
+}
+
+.slide-fade-leave-active {
+    transition: all 0.1s ease-in;
+}
+
+.slide-fade-enter-from {
+    transform: translateX(10px);
+    opacity: 0;
+}
+
+.slide-fade-leave-to {
+    transform: translateX(-10px);
+    opacity: 0;
+}
+
 </style>
diff --git a/src/layout/layout/Header.vue b/src/layout/layout/Header.vue
index c9b7b82..5b7fe60 100644
--- a/src/layout/layout/Header.vue
+++ b/src/layout/layout/Header.vue
@@ -41,8 +41,8 @@
             </div>
             
             <div class="user-info">
-                <div class="notification">
-                    <el-badge :value="3" class="notification-badge">
+                <div class="notification" @click="goToMessages">
+                    <el-badge :value="unreadMessageCount" class="notification-badge">
                         <el-icon><Bell /></el-icon>
                     </el-badge>
                 </div>
@@ -69,12 +69,12 @@
                                 </div>
                             </div>
                             
-                            <el-dropdown-item class="menu-item">
+                            <el-dropdown-item class="menu-item" @click="goToGiftBox">
                                 <el-icon><GiftBox /></el-icon>
                                 <span>礼物盒</span>
                             </el-dropdown-item>
                             
-                            <el-dropdown-item class="menu-item">
+                            <el-dropdown-item class="menu-item" @click="goToTaskCenter">
                                 <el-icon><List /></el-icon>
                                 <span>任务中心</span>
                             </el-dropdown-item>
@@ -151,6 +151,7 @@ export default {
         const userName = computed(() => store.user?.name || '神鹿日光');
         const userAvatar = computed(() => store.user?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');
         const beanCount = computed(() => store.user?.beanCount || '9999');
+        const unreadMessageCount = computed(() => store.unreadMessageCount || 0);
         
         // 获取当前活动的菜单项
         const activeMenu = computed(() => {
@@ -215,6 +216,30 @@ export default {
             authorApplicationContext.openApplicationModal();
         };
         
+        // 前往礼物盒
+        const goToGiftBox = () => {
+            // 检查是否登录，如果未登录则打开登录弹窗
+            if (!isLoggedIn.value) {
+                authContext.openLogin(() => {
+                    router.push('/gift-box');
+                });
+                return;
+            }
+            router.push('/gift-box');
+        };
+        
+        // 前往任务中心
+        const goToTaskCenter = () => {
+            // 检查是否登录，如果未登录则打开登录弹窗
+            if (!isLoggedIn.value) {
+                authContext.openLogin(() => {
+                    router.push('/task-center');
+                });
+                return;
+            }
+            router.push('/task-center');
+        };
+        
         // 前往作家专区
         const goToAuthorCenter = () => {
             // 检查是否登录
@@ -247,6 +272,18 @@ export default {
             }
         };
 
+        // 前往消息页面
+        const goToMessages = () => {
+            // 检查是否登录，如果未登录则打开登录弹窗
+            if (!isLoggedIn.value) {
+                authContext.openLogin(() => {
+                    router.push('/messages');
+                });
+                return;
+            }
+            router.push('/messages');
+        };
+
         return {
             isLoggedIn,
             userName,
@@ -258,11 +295,15 @@ export default {
             goToLogin,
             goToUserCenter,
             goToBookshelf,
+            goToGiftBox,
+            goToTaskCenter,
             goToSettings,
             logout,
             applyForAuthor,
             goToAuthorCenter,
             router,
+            goToMessages,
+            unreadMessageCount,
         };
     }
 };
diff --git a/src/router/index.js b/src/router/index.js
index 5abb8d6..128ddb3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,6 +49,24 @@ const routes = [
                 component: () => import('../views/home/Bookshelf.vue'),
                 meta: { requiresAuth: true }
             },
+            {
+                path: 'task-center',
+                name: 'TaskCenter',
+                component: () => import('../views/user/TaskCenter.vue'),
+                meta: { requiresAuth: true }
+            },
+            {
+                path: 'gift-box',
+                name: 'GiftBox',
+                component: () => import('../views/user/GiftBox.vue'),
+                meta: { requiresAuth: true }
+            },
+            {
+                path: 'messages',
+                name: 'Messages',
+                component: () => import('../views/user/Messages.vue'),
+                meta: { requiresAuth: true }
+            },
             {
                 path: 'author',
                 name: 'authorCenter',
diff --git a/src/store/index.js b/src/store/index.js
index f4bfca7..7b8198c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,12 +6,14 @@ export const useMainStore = defineStore('main', {
         isLoggedIn: false,
         isAuthor: false,
         token: null,
-        bookshelf: []
+        bookshelf: [],
+        unreadMessages: 3  // 添加未读消息数量
     }),
 
     getters: {
         isAuthenticated: (state) => state.isLoggedIn && state.user !== null,
-        bookshelfCount: (state) => state.bookshelf.length
+        bookshelfCount: (state) => state.bookshelf.length,
+        unreadMessageCount: (state) => state.unreadMessages  // 添加获取未读消息数量的getter
     },
 
     actions: {
@@ -27,7 +29,8 @@ export const useMainStore = defineStore('main', {
                     name: '用户' + loginData.phone.substring(loginData.phone.length - 4),
                     phone: loginData.phone,
                     avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-                    isAuthor: false
+                    isAuthor: false,
+                    beanCount: 9999
                 };
                 
                 this.user = userData;
@@ -174,6 +177,25 @@ export const useMainStore = defineStore('main', {
                 // 更新本地存储
                 localStorage.setItem('bookshelf', JSON.stringify(this.bookshelf));
             }
+        },
+        
+        // 更新用户豆豆余额
+        updateUserBeans(newBeanCount) {
+            if (this.user) {
+                this.user.beanCount = newBeanCount;
+                // 更新本地存储
+                localStorage.setItem('user', JSON.stringify(this.user));
+            }
+        },
+        
+        // 清空未读消息数量
+        clearUnreadMessages() {
+            this.unreadMessages = 0;
+        },
+        
+        // 设置未读消息数量
+        setUnreadMessages(count) {
+            this.unreadMessages = count;
         }
     }
 }); 
\ No newline at end of file
diff --git a/src/views/book/chapter.vue b/src/views/book/chapter.vue
index 4561973..e360bff 100644
--- a/src/views/book/chapter.vue
+++ b/src/views/book/chapter.vue
@@ -1,226 +1,254 @@
 <template>
-  <div class="chapter-container">
-    <div class="chapter-header">
-      <div class="header-content">
-        <div class="back" @click="goBack">
-          <el-icon><ArrowLeft /></el-icon>
-          <span>返回目录</span>
+    <div class="chapter-container">
+
+
+        <div class="chapter-content">
+            <div class="chapter-title-container">
+                <el-icon size="20px">
+                    <ArrowLeft />
+                </el-icon>
+                <h1 class="chapter-title">{{ chapter.title }}</h1>
+            </div>
+
+            <div class="chapter-text">
+                <p v-for="(paragraph, index) in chapter.content" :key="index" class="paragraph">
+                    {{ paragraph }}
+                </p>
+            </div>
         </div>
-        <div class="title">{{ chapter.title }}</div>
-        <div class="book-title">《{{ bookTitle }}》</div>
-      </div>
-    </div>
-    
-    <div class="chapter-content">
-      <h1 class="chapter-title">{{ chapter.title }}</h1>
-      
-      <div class="content-navigation">
-        <el-button v-if="prevChapterId" @click="goToChapter(prevChapterId)" plain>上一章</el-button>
-        <el-button @click="goToBookDetail">目录</el-button>
-        <el-button v-if="nextChapterId" @click="goToChapter(nextChapterId)" type="primary">下一章</el-button>
-      </div>
-      
-      <div class="chapter-text">
-        <p v-for="(paragraph, index) in chapter.content" :key="index" class="paragraph">
-          {{ paragraph }}
-        </p>
-      </div>
-      
-      <div class="content-navigation bottom">
-        <el-button v-if="prevChapterId" @click="goToChapter(prevChapterId)" plain>上一章</el-button>
-        <el-button @click="goToBookDetail">目录</el-button>
-        <el-button v-if="nextChapterId" @click="goToChapter(nextChapterId)" type="primary">下一章</el-button>
-      </div>
-    </div>
-    
-    <div class="reading-settings">
-      <div class="settings-buttons">
-        <el-button @click="toggleFontSize(2)" circle plain>
-          <el-icon><ZoomIn /></el-icon>
-        </el-button>
-        <el-button @click="toggleFontSize(-2)" circle plain>
-          <el-icon><ZoomOut /></el-icon>
-        </el-button>
-        <el-button @click="toggleTheme" circle plain>
-          <el-icon><MoonNight /></el-icon>
-        </el-button>
-      </div>
+
+        <div class="chapter-menu">
+            <div class="chapter-menu-item">
+                <el-icon size="20px">
+                    <ArrowUp />
+                </el-icon>
+                <span>上一章</span>
+            </div>
+            <div class="chapter-menu-item">
+                <el-icon size="20px">
+                    <ArrowDown />
+                </el-icon>
+                <span>下一章</span>
+            </div>
+            <div class="chapter-menu-item">
+                <el-icon size="20px">
+                    <Reading />
+                </el-icon>
+                <span>加书架</span>
+            </div>
+            <div class="chapter-menu-item">
+                <el-icon size="20px">
+                    <ArrowRight />
+                </el-icon>
+                <span>目录</span>
+            </div>
+            <div class="chapter-menu-item"
+            @click="toggleTheme">
+                <el-icon size="20px">
+                    <MoonNight />
+                </el-icon>
+                <span>夜间</span>
+            </div>
+        </div>
+
+        <!-- <div class="reading-settings">
+            <div class="settings-buttons">
+                <el-button @click="toggleFontSize(2)" circle plain>
+                    <el-icon>
+                        <ZoomIn />
+                    </el-icon>
+                </el-button>
+                <el-button @click="toggleFontSize(-2)" circle plain>
+                    <el-icon>
+                        <ZoomOut />
+                    </el-icon>
+                </el-button>
+                <el-button @click="toggleTheme" circle plain>
+                    <el-icon>
+                        <MoonNight />
+                    </el-icon>
+                </el-button>
+            </div>
+        </div> -->
     </div>
-  </div>
 </template>
 
 <script>
 import { ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { ArrowLeft, ZoomIn, ZoomOut, MoonNight } from '@element-plus/icons-vue';
+import { ArrowLeft, ZoomIn, ZoomOut, MoonNight, ArrowUp, ArrowDown, Reading } from '@element-plus/icons-vue';
 
 export default {
-  name: 'ChapterDetail',
-  components: {
-    ArrowLeft,
-    ZoomIn,
-    ZoomOut,
-    MoonNight
-  },
-  setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const bookId = route.params.id;
-    const chapterId = route.params.chapterId;
-    
-    const bookTitle = ref('重生之财源滚滚');
-    const fontSize = ref(18);
-    const isDarkMode = ref(false);
-    
-    // 模拟章节数据
-    const chapter = ref({
-      id: chapterId,
-      title: '第' + chapterId + '章 ' + (chapterId === '1' ? '重回2004' : '精彩内容'),
-      content: [
-        '贺季宁站在天台上，俯瞰着城市的点点灯光，感到一阵恍惚。',
-        '他曾经有多么意气风发，现在就有多么落魄。',
-        '三年前，他是A市土豪公司的金牌经理，工资高，福利好，女友漂亮，车位靓，最重要的是老板信任他。',
-        '但是贺季宁的对手们不服，老板娘不喜欢他，不怀好意的对手们联合一起，终于把他拉下台了。',
-        '他失去工作，更可悲的是，他连公司配他的贷款的房子都搭进去了，欠了几百万的债，女友也离他而去。',
-        '这三年，他一直试图东山再起，却处处碰壁，如今债主们逼得紧，他已经走投无路。',
-        '"如果老天再给我一次机会，我一定要好好做人，赚很多钱，让那帮人看着我过得好，他们就会比我难受！"',
-        '贺季宁苦笑着喃喃自语，闭上了眼睛。',
-        '他感觉自己似乎在坠落，又似乎在飘浮，时间不知过了多久...',
-        '当他再次睁开眼睛，发现自己躺在一张熟悉又陌生的床上。',
-        '这是他十几年前住过的出租屋！',
-        '贺季宁一个鲤鱼打挺坐了起来，环顾四周，破旧的家具，泛黄的墙壁，一切都像是回到了过去。',
-        '他猛地抓起床头的手机——诺基亚！',
-        '日期显示：2004年3月15日。',
-        '"我...重生了？"贺季宁不敢相信自己的眼睛，他竟然回到了2004年，回到了一切开始之前！',
-        '一切都可以重来！所有的错误都可以避免！他知道未来的风口，知道哪些投资会成功，知道哪些陷阱要避开。',
-        '贺季宁握紧了拳头，眼中闪烁着坚定的光芒。',
-        '"这一次，我一定要扭转命运！"'
-      ]
-    });
-    
-    // 前一章和后一章ID
-    const prevChapterId = computed(() => {
-      const current = parseInt(chapterId);
-      return current > 1 ? (current - 1).toString() : null;
-    });
-    
-    const nextChapterId = computed(() => {
-      const current = parseInt(chapterId);
-      return current < 50 ? (current + 1).toString() : null;
-    });
-    
-    // 返回书籍详情页
-    const goToBookDetail = () => {
-      router.push(`/book/${bookId}`);
-    };
-    
-    // 返回上一页
-    const goBack = () => {
-      router.back();
-    };
-    
-    // 跳转到其他章节
-    const goToChapter = (targetChapterId) => {
-      router.push(`/book/${bookId}/chapter/${targetChapterId}`);
-    };
-    
-    // 调整字体大小
-    const toggleFontSize = (change) => {
-      const newSize = fontSize.value + change;
-      if (newSize >= 14 && newSize <= 24) {
-        fontSize.value = newSize;
-        document.documentElement.style.setProperty('--reading-font-size', `${fontSize.value}px`);
-      }
-    };
-    
-    // 切换暗黑模式
-    const toggleTheme = () => {
-      isDarkMode.value = !isDarkMode.value;
-      if (isDarkMode.value) {
-        document.documentElement.classList.add('dark-theme');
-      } else {
-        document.documentElement.classList.remove('dark-theme');
-      }
-    };
-    
-    onMounted(() => {
-      // 设置初始字体大小
-      document.documentElement.style.setProperty('--reading-font-size', `${fontSize.value}px`);
-      
-      // 滚动到顶部
-      window.scrollTo(0, 0);
-      
-      // 实际应用中这里应该从API获取章节内容
-      console.log(`加载章节内容，书籍ID: ${bookId}，章节ID: ${chapterId}`);
-    });
-    
-    return {
-      bookTitle,
-      chapter,
-      prevChapterId,
-      nextChapterId,
-      goToBookDetail,
-      goBack,
-      goToChapter,
-      toggleFontSize,
-      toggleTheme
-    };
-  }
+    name: 'ChapterDetail',
+    components: {
+        ArrowLeft,
+        ZoomIn,
+        ZoomOut,
+        MoonNight,
+        ArrowUp,
+        ArrowDown,
+        Reading
+    },
+    setup() {
+        const route = useRoute();
+        const router = useRouter();
+        const bookId = route.params.id;
+        const chapterId = route.params.chapterId;
+
+        const bookTitle = ref('重生之财源滚滚');
+        const fontSize = ref(18);
+        const isDarkMode = ref(false);
+
+        // 模拟章节数据
+        const chapter = ref({
+            id: chapterId,
+            title: '第' + chapterId + '章 ' + (chapterId === '1' ? '重回2004' : '精彩内容'),
+            content: [
+                '贺季宁站在天台上，俯瞰着城市的点点灯光，感到一阵恍惚。',
+                '他曾经有多么意气风发，现在就有多么落魄。',
+                '三年前，他是A市土豪公司的金牌经理，工资高，福利好，女友漂亮，车位靓，最重要的是老板信任他。三年前，他是A市土豪公司的金牌经理，工资高，福利好，女友漂亮，车位靓，最重要的是老板信任他。',
+                '但是贺季宁的对手们不服，老板娘不喜欢他，不怀好意的对手们联合一起，终于把他拉下台了。',
+                '他失去工作，更可悲的是，他连公司配他的贷款的房子都搭进去了，欠了几百万的债，女友也离他而去。',
+                '这三年，他一直试图东山再起，却处处碰壁，如今债主们逼得紧，他已经走投无路。',
+                '"如果老天再给我一次机会，我一定要好好做人，赚很多钱，让那帮人看着我过得好，他们就会比我难受！"',
+                '贺季宁苦笑着喃喃自语，闭上了眼睛。',
+                '他感觉自己似乎在坠落，又似乎在飘浮，时间不知过了多久...',
+                '当他再次睁开眼睛，发现自己躺在一张熟悉又陌生的床上。',
+                '这是他十几年前住过的出租屋！',
+                '贺季宁一个鲤鱼打挺坐了起来，环顾四周，破旧的家具，泛黄的墙壁，一切都像是回到了过去。',
+                '他猛地抓起床头的手机——诺基亚！',
+                '日期显示：2004年3月15日。',
+                '"我...重生了？"贺季宁不敢相信自己的眼睛，他竟然回到了2004年，回到了一切开始之前！',
+                '一切都可以重来！所有的错误都可以避免！他知道未来的风口，知道哪些投资会成功，知道哪些陷阱要避开。',
+                '贺季宁握紧了拳头，眼中闪烁着坚定的光芒。',
+                '"这一次，我一定要扭转命运！"'
+            ]
+        });
+
+        // 前一章和后一章ID
+        const prevChapterId = computed(() => {
+            const current = parseInt(chapterId);
+            return current > 1 ? (current - 1).toString() : null;
+        });
+
+        const nextChapterId = computed(() => {
+            const current = parseInt(chapterId);
+            return current < 50 ? (current + 1).toString() : null;
+        });
+
+        // 返回书籍详情页
+        const goToBookDetail = () => {
+            router.push(`/book/${bookId}`);
+        };
+
+        // 返回上一页
+        const goBack = () => {
+            router.back();
+        };
+
+        // 跳转到其他章节
+        const goToChapter = (targetChapterId) => {
+            router.push(`/book/${bookId}/chapter/${targetChapterId}`);
+        };
+
+        // 调整字体大小
+        const toggleFontSize = (change) => {
+            const newSize = fontSize.value + change;
+            if (newSize >= 14 && newSize <= 24) {
+                fontSize.value = newSize;
+                document.documentElement.style.setProperty('--reading-font-size', `${fontSize.value}px`);
+            }
+        };
+
+        // 切换暗黑模式
+        const toggleTheme = () => {
+            isDarkMode.value = !isDarkMode.value;
+            if (isDarkMode.value) {
+                document.documentElement.classList.add('dark-theme');
+            } else {
+                document.documentElement.classList.remove('dark-theme');
+            }
+        };
+
+        onMounted(() => {
+            // 设置初始字体大小
+            document.documentElement.style.setProperty('--reading-font-size', `${fontSize.value}px`);
+
+            // 滚动到顶部
+            window.scrollTo(0, 0);
+
+            // 实际应用中这里应该从API获取章节内容
+            console.log(`加载章节内容，书籍ID: ${bookId}，章节ID: ${chapterId}`);
+        });
+
+        return {
+            bookTitle,
+            chapter,
+            prevChapterId,
+            nextChapterId,
+            goToBookDetail,
+            goBack,
+            goToChapter,
+            toggleFontSize,
+            toggleTheme
+        };
+    }
 };
 </script>
 
+
 <style lang="scss">
 // 全局暗黑模式样式
 :root {
-  --reading-font-size: 18px;
-  --reading-background: #f8f8f8;
-  --reading-text-color: #333;
-  --reading-border-color: #eee;
+    --reading-font-size: 18px;
+    --reading-background: #f8f8f8;
+    --reading-text-color: #333;
+    --reading-border-color: #eee;
 }
 
 .dark-theme {
-  --reading-background: #252525;
-  --reading-text-color: #ccc;
-  --reading-border-color: #333;
-  
-  .chapter-container {
-    background-color: var(--reading-background) !important;
-    
-    .chapter-header {
-      background-color: #202020 !important;
-      color: #ddd !important;
-      border-bottom-color: #333 !important;
-    }
-    
-    .chapter-content {
-      background-color: var(--reading-background) !important;
-      color: var(--reading-text-color) !important;
-      
-      .chapter-title {
-        color: #eee !important;
-      }
-      
-      .paragraph {
-        color: var(--reading-text-color) !important;
-      }
-    }
-    
-    .el-button {
-      background-color: #333 !important;
-      border-color: #555 !important;
-      color: #ddd !important;
-      
-      &.is-plain {
-        background: transparent !important;
-      }
-      
-      &.el-button--primary {
-        background-color: var(--el-color-primary) !important;
-        border-color: var(--el-color-primary) !important;
-        color: #fff !important;
-      }
+    --reading-background: #252525;
+    --reading-text-color: #ccc;
+    --reading-border-color: #333;
+
+    .chapter-container {
+        background-color: var(--reading-background) !important;
+
+        .chapter-header {
+            background-color: #202020 !important;
+            color: #ddd !important;
+            border-bottom-color: #333 !important;
+        }
+
+        .chapter-content {
+            background-color: var(--reading-background) !important;
+            color: var(--reading-text-color) !important;
+
+            .chapter-title {
+                color: #eee !important;
+            }
+
+            .paragraph {
+                color: var(--reading-text-color) !important;
+            }
+        }
+
+        .el-button {
+            background-color: #333 !important;
+            border-color: #555 !important;
+            color: #ddd !important;
+
+            &.is-plain {
+                background: transparent !important;
+            }
+
+            &.el-button--primary {
+                background-color: var(--el-color-primary) !important;
+                border-color: var(--el-color-primary) !important;
+                color: #fff !important;
+            }
+        }
     }
-  }
 }
 </style>
 
@@ -228,125 +256,112 @@ export default {
 @use '@/assets/styles/variables.scss' as vars;
 
 .chapter-container {
-  min-height: 100vh;
-  background-color: var(--reading-background);
-  display: flex;
-  flex-direction: column;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-.chapter-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background-color: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid var(--reading-border-color);
-  
-  .header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    max-width: 1000px;
+
+.chapter-content {
+    flex: 1;
+    max-width: 1100px;
     margin: 0 auto;
-    padding: 15px 20px;
-    
-    .back {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      color: vars.$primary-color;
-      
-      .el-icon {
-        margin-right: 5px;
-      }
-    }
-    
-    .title {
-      font-weight: bold;
-      font-size: 16px;
-      max-width: 300px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    padding: 30px 20px 50px;
+    background-color: #F3EFE6;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+
+    .chapter-title-container {
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #e9e4d8;
+        cursor: pointer;
+
+        .chapter-title {
+            display: flex;
+            align-items: center;
+            text-align: left;
+            font-size: 24px;
+            color: #333;
+            margin-left: 10px;
+        }
+
     }
-    
-    .book-title {
-      font-size: 14px;
-      color: #666;
+
+
+    .chapter-text {
+        line-height: 1.8;
+
+        .paragraph {
+            margin-bottom: 20px;
+            font-size: var(--reading-font-size);
+            color: var(--reading-text-color);
+            text-indent: 2em;
+        }
     }
-  }
 }
 
-.chapter-content {
-  flex: 1;
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 30px 20px 50px;
-  background-color: #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-  
-  .chapter-title {
-    text-align: center;
-    font-size: 24px;
-    margin-bottom: 30px;
-    color: #333;
-  }
-  
-  .content-navigation {
+.chapter-menu {
+    position: fixed;
+    bottom: 20%;
+    left: 50%;
+    transform: translateX(550px);
     display: flex;
-    justify-content: center;
-    gap: 15px;
-    margin-bottom: 30px;
-    
-    &.bottom {
-      margin-top: 50px;
-      margin-bottom: 0;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+    padding: 0 20px;
+    gap: 10px;
+
+    .chapter-menu-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        border-radius: 10px;
+        background-color: #F3EFE6;
+        cursor: pointer;
+        height: 80px;
+        width: 80px;
+        font-size: 14px;
+        gap: 5px;
     }
-  }
-  
-  .chapter-text {
-    line-height: 1.8;
     
-    .paragraph {
-      margin-bottom: 20px;
-      font-size: var(--reading-font-size);
-      color: var(--reading-text-color);
-      text-indent: 2em;
-    }
-  }
 }
 
+
 .reading-settings {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  z-index: 10;
-  
-  .settings-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    
-    .el-button {
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 10;
+
+    .settings-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        .el-button {
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
     }
-  }
 }
 
 // 响应式调整
 @media screen and (max-width: vars.$md) {
-  .chapter-content {
-    padding: 20px 15px 40px;
-  }
-  
-  .chapter-header {
-    .header-content {
-      padding: 12px 15px;
-      
-      .title {
-        max-width: 200px;
-      }
+    .chapter-content {
+        padding: 20px 15px 40px;
+    }
+
+    .chapter-header {
+        .header-content {
+            padding: 12px 15px;
+
+            .title {
+                max-width: 200px;
+            }
+        }
     }
-  }
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/book/index.vue b/src/views/book/index.vue
index d9fbb10..26cd08c 100644
--- a/src/views/book/index.vue
+++ b/src/views/book/index.vue
@@ -48,7 +48,9 @@
                             >{{ isInShelf ? '已加入书架' : '加入书架' }}</el-button>
                         </div>
                         <div class="action-btn-group">
-                            <el-button class="read-btn" style="background:#0A2463;color:#fff;border:none;">点击阅读</el-button>
+                            <el-button class="read-btn" 
+                            @click="goToChapter(1)"
+                            style="background:#0A2463;color:#fff;border:none;">点击阅读</el-button>
                         </div>
                     </div>
                 </div>
diff --git a/src/views/user/GiftBox.vue b/src/views/user/GiftBox.vue
new file mode 100644
index 0000000..f3529c4
--- /dev/null
+++ b/src/views/user/GiftBox.vue
@@ -0,0 +1,365 @@
+<template>
+    <div class="gift-box">
+        <!-- 页面标题 -->
+        <div class="header">
+            <h1 class="title">
+                <el-icon class="title-icon"><Star /></el-icon>
+                我的礼物盒
+            </h1>
+        </div>
+
+        <!-- 礼物网格 -->
+        <div class="gifts-grid">
+            <div 
+                v-for="gift in gifts" 
+                :key="gift.id"
+                class="gift-card"
+                :class="{ 'special': gift.isSpecial }"
+            >
+                <!-- 特价标签 -->
+                <div v-if="gift.isSpecial" class="special-tag">特</div>
+                
+                <!-- 礼物图标 -->
+                <div class="gift-icon">
+                    <span class="emoji">{{ gift.emoji }}</span>
+                </div>
+                
+                <!-- 礼物名称 -->
+                <div class="gift-name">{{ gift.name }}</div>
+                
+                <!-- 价格 -->
+                <div class="gift-price">{{ gift.price }} 豆豆</div>
+                
+                <!-- 购买按钮 -->
+                <el-button 
+                    type="primary" 
+                    size="small"
+                    @click="buyGift(gift)"
+                    :disabled="gift.price > userBeans"
+                >
+                    购买
+                </el-button>
+            </div>
+        </div>
+
+        <!-- 加载更多 -->
+        <div class="load-more">
+            <div class="divider">
+                <el-icon class="divider-icon"><MoreFilled /></el-icon>
+            </div>
+            <p class="no-more-text">没有更多啦～</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useMainStore } from '@/store';
+import { MoreFilled, Star } from '@element-plus/icons-vue';
+
+export default {
+    name: 'GiftBox',
+    components: {
+        MoreFilled,
+        Star
+    },
+    setup() {
+        const store = useMainStore();
+        
+        // 用户豆豆余额
+        const userBeans = computed(() => store.user?.beanCount || 9999);
+
+        // 礼物列表数据
+        const gifts = reactive([
+            // 第一行
+            { id: 1, name: '小星星', price: 5, emoji: '💖', isSpecial: true },
+            { id: 2, name: '爱你哦', price: 10, emoji: '💋', isSpecial: true },
+            { id: 3, name: '加油鸭', price: 15, emoji: '🍊', isSpecial: true },
+            { id: 4, name: '蓝色烟火', price: 20, emoji: '🎆', isSpecial: true },
+            { id: 5, name: '西瓜', price: 10, emoji: '🍉', isSpecial: true },
+            { id: 6, name: '冰棍', price: 8, emoji: '🍭', isSpecial: true },
+            
+            // 第二行
+            { id: 7, name: '沙滩椅', price: 15, emoji: '🏖️', isSpecial: true },
+            { id: 8, name: '菠萝汽水', price: 30, emoji: '🍍', isSpecial: true },
+            { id: 9, name: '椰子水', price: 40, emoji: '🥥' },
+            { id: 10, name: '汽水', price: 20, emoji: '🥤' },
+            { id: 11, name: '咖啡', price: 60, emoji: '☕', isSpecial: true },
+            { id: 12, name: '早餐套餐', price: 88, emoji: '🍳', isSpecial: true },
+            
+            // 第三行
+            { id: 13, name: '花花', price: 188, emoji: '💜', isSpecial: true },
+            { id: 14, name: '玫瑰', price: 199, emoji: '🌹', isSpecial: true },
+            { id: 15, name: '玫瑰花', price: 399, emoji: '🌹', isSpecial: true },
+            { id: 16, name: '玫瑰礼盒', price: 599, emoji: '🎁' },
+            { id: 17, name: '礼花', price: 589, emoji: '🎊' },
+            { id: 18, name: '灿烂辉煌', price: 699, emoji: '🎇', isSpecial: true },
+            
+            // 第四行
+            { id: 19, name: '紫色星空', price: 766, emoji: '🌌', isSpecial: true },
+            { id: 20, name: '跑车', price: 799, emoji: '🏎️' },
+            { id: 21, name: '直升机', price: 899, emoji: '🚁' },
+            { id: 22, name: '游艇', price: 966, emoji: '🛥️' },
+            { id: 23, name: '黄金直升机', price: 999, emoji: '🚁' }
+        ]);
+
+        // 购买礼物
+        const buyGift = async (gift) => {
+            if (gift.price > userBeans.value) {
+                ElMessage.error('豆豆余额不足，请先充值！');
+                return;
+            }
+
+            try {
+                await ElMessageBox.confirm(
+                    `确定要购买 ${gift.name} 吗？将花费 ${gift.price} 豆豆`,
+                    '确认购买',
+                    {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                    }
+                );
+
+                // 模拟购买API调用
+                await new Promise(resolve => setTimeout(resolve, 500));
+                
+                // 扣除豆豆
+                if (store.updateUserBeans) {
+                    store.updateUserBeans(userBeans.value - gift.price);
+                }
+                
+                ElMessage.success(`成功购买 ${gift.name}！`);
+                
+            } catch {
+                // 用户取消购买
+            }
+        };
+
+        onMounted(() => {
+            console.log('礼物盒页面已加载');
+        });
+
+        return {
+            gifts,
+            userBeans,
+            buyGift
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.gift-box {
+    padding: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    .header {
+        margin-bottom: 32px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid #ebeef5;
+
+        .title {
+            display: flex;
+            align-items: center;
+            font-size: 24px;
+            font-weight: 600;
+            color: #0A2463;
+            margin: 0;
+
+            .title-icon {
+                margin-right: 8px;
+                font-size: 28px;
+            }
+        }
+    }
+
+    .gifts-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 20px;
+        margin-bottom: 40px;
+
+        .gift-card {
+            background: #fff;
+            border: 1px solid #e4e7ed;
+            border-radius: 12px;
+            padding: 20px;
+            text-align: center;
+            transition: all 0.3s ease;
+            position: relative;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+            &:hover {
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                transform: translateY(-2px);
+            }
+
+            &.special {
+                background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
+                border-color: #ffa726;
+            }
+
+            .special-tag {
+                position: absolute;
+                top: -1px;
+                right: -1px;
+                background: #ff6b35;
+                color: white;
+                font-size: 12px;
+                font-weight: bold;
+                width: 24px;
+                height: 24px;
+                border-radius: 50% 0 12px 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                line-height: 1;
+            }
+
+            .gift-icon {
+                font-size: 48px;
+                margin-bottom: 12px;
+                height: 60px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .emoji {
+                    font-size: 48px;
+                    line-height: 1;
+                }
+            }
+
+            .gift-name {
+                font-size: 16px;
+                font-weight: 600;
+                color: #303133;
+                margin-bottom: 8px;
+            }
+
+            .gift-price {
+                font-size: 14px;
+                color: #ffa726;
+                font-weight: 600;
+                margin-bottom: 12px;
+            }
+
+            .el-button {
+                width: 100%;
+                background-color: #0A2463;
+                border-color: #0A2463;
+
+                &:hover {
+                    background-color: #083354;
+                    border-color: #083354;
+                }
+
+                &:disabled {
+                    background-color: #c0c4cc;
+                    border-color: #c0c4cc;
+                    color: #a8abb2;
+                }
+            }
+        }
+    }
+
+    .load-more {
+        text-align: center;
+        padding: 20px 0;
+
+        .divider {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 12px;
+
+            &::before,
+            &::after {
+                content: '';
+                flex: 1;
+                height: 1px;
+                background: linear-gradient(to right, transparent, #ddd, transparent);
+                margin: 0 20px;
+            }
+
+            .divider-icon {
+                color: #ffa726;
+                font-size: 20px;
+                transform: rotate(90deg);
+            }
+        }
+
+        .no-more-text {
+            color: #999;
+            font-size: 14px;
+            margin: 0;
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .gift-box {
+        padding: 16px;
+
+        .gifts-grid {
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 16px;
+
+            .gift-card {
+                padding: 16px;
+
+                .gift-icon {
+                    font-size: 36px;
+                    height: 50px;
+
+                    .emoji {
+                        font-size: 36px;
+                    }
+                }
+
+                .gift-name {
+                    font-size: 14px;
+                }
+
+                .gift-price {
+                    font-size: 13px;
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 480px) {
+    .gift-box {
+        .gifts-grid {
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 12px;
+
+            .gift-card {
+                padding: 12px;
+
+                .gift-icon {
+                    font-size: 32px;
+                    height: 40px;
+
+                    .emoji {
+                        font-size: 32px;
+                    }
+                }
+
+                .gift-name {
+                    font-size: 13px;
+                }
+
+                .gift-price {
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/user/Messages.vue b/src/views/user/Messages.vue
new file mode 100644
index 0000000..ad80280
--- /dev/null
+++ b/src/views/user/Messages.vue
@@ -0,0 +1,493 @@
+<template>
+    <div class="messages">
+        <!-- 页面标题和一键清空 -->
+        <div class="header">
+            <h1 class="title">
+                <el-icon class="title-icon"><Message /></el-icon>
+                我的消息
+            </h1>
+            <el-button 
+                type="primary" 
+                size="small"
+                @click="clearAllMessages"
+                :disabled="messages.length === 0"
+            >
+                一键清空
+            </el-button>
+        </div>
+
+        <!-- 消息列表 -->
+        <div class="messages-list">
+            <div 
+                v-for="message in messages" 
+                :key="message.id"
+                class="message-item"
+            >
+                <!-- 用户信息 -->
+                <div class="user-info">
+                    <el-avatar :size="40" :src="message.avatar" />
+                    <div class="user-details">
+                        <div class="user-name">{{ message.username }}</div>
+                        <div class="source-info">
+                            来自《{{ message.bookTitle }}》
+                            <span class="time">{{ message.time }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 评论内容 -->
+                <div class="comment-content">
+                    {{ message.content }}
+                </div>
+
+                <!-- 回复按钮 -->
+                <div class="action-buttons">
+                    <el-button 
+                        type="text" 
+                        size="small"
+                        @click="toggleReply(message.id)"
+                        class="reply-btn"
+                    >
+                        回复
+                    </el-button>
+                </div>
+
+                <!-- 回复框 -->
+                <div v-if="message.showReply" class="reply-section">
+                    <el-input
+                        v-model="message.replyContent"
+                        type="textarea"
+                        :rows="3"
+                        placeholder="请输入回复内容..."
+                        class="reply-input"
+                    />
+                    <div class="reply-actions">
+                        <el-button 
+                            size="small" 
+                            @click="cancelReply(message.id)"
+                        >
+                            取消
+                        </el-button>
+                        <el-button 
+                            type="primary" 
+                            size="small"
+                            @click="submitReply(message.id)"
+                            :disabled="!message.replyContent?.trim()"
+                        >
+                            发送
+                        </el-button>
+                    </div>
+                </div>
+
+                <!-- 已有回复 -->
+                <div v-if="message.reply" class="existing-reply">
+                    {{ message.reply }}
+                </div>
+            </div>
+
+            <!-- 空状态 -->
+            <div v-if="messages.length === 0" class="empty-state">
+                <el-icon class="empty-icon"><Message /></el-icon>
+                <p>暂无消息</p>
+            </div>
+        </div>
+
+        <!-- 分页器 -->
+        <div v-if="total > pageSize" class="pagination">
+            <el-pagination
+                v-model:current-page="currentPage"
+                :page-size="pageSize"
+                :total="total"
+                layout="prev, pager, next"
+                @current-change="handlePageChange"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, reactive, onMounted, computed } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useMainStore } from '@/store';
+import { Message } from '@element-plus/icons-vue';
+
+export default {
+    name: 'Messages',
+    components: {
+        Message
+    },
+    setup() {
+        const store = useMainStore();
+        const currentPage = ref(1);
+        const pageSize = ref(10);
+        const total = ref(0);
+
+        // 消息列表数据
+        const messages = reactive([
+            {
+                id: 1,
+                username: '吴宽宽',
+                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+                bookTitle: '重生之财源滚滚',
+                time: '2025.03.18',
+                content: '故事十八期人啊',
+                showReply: false,
+                replyContent: '',
+                reply: null
+            },
+            {
+                id: 2,
+                username: '孙娜茹',
+                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+                bookTitle: '大宋好厨夫',
+                time: '2025.03.18',
+                content: '可爱回现我等肴丽厨好像这禅。瞧的选善高大声',
+                showReply: false,
+                replyContent: '',
+                reply: '这样好像不正常'
+            },
+            {
+                id: 3,
+                username: '李世海',
+                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+                bookTitle: '大宋好厨夫',
+                time: '2025.03.18',
+                content: '一获乘蕾又舞一段',
+                showReply: false,
+                replyContent: '',
+                reply: '这样好像不正常'
+            },
+            {
+                id: 4,
+                username: '钱萌萌',
+                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+                bookTitle: '重生之财源滚滚',
+                time: '2025.03.18',
+                content: '就是开快乐开（表情）',
+                showReply: false,
+                replyContent: '',
+                reply: null
+            },
+            {
+                id: 5,
+                username: 'ty_zhen',
+                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+                bookTitle: '大宋好厨夫',
+                time: '2025.03.18',
+                content: '说得主角越来越明白不对劲。他知道受罗',
+                showReply: false,
+                replyContent: '',
+                reply: '这样好像不正常'
+            },
+            {
+                id: 6,
+                username: 'mengmeng',
+                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+                bookTitle: '大宋好厨夫',
+                time: '2025.03.18',
+                content: '虽然回忆的一次故事，看过的分别还是。看在提供的难过，因为明代来实受应的沧桑感蒙受兴了',
+                showReply: false,
+                replyContent: '',
+                reply: '这样好像不正常'
+            }
+        ]);
+
+        total.value = messages.length;
+
+        // 显示回复框
+        const toggleReply = (messageId) => {
+            const message = messages.find(m => m.id === messageId);
+            if (message) {
+                // 关闭其他回复框
+                messages.forEach(m => {
+                    if (m.id !== messageId) {
+                        m.showReply = false;
+                        m.replyContent = '';
+                    }
+                });
+                message.showReply = !message.showReply;
+                if (!message.showReply) {
+                    message.replyContent = '';
+                }
+            }
+        };
+
+        // 取消回复
+        const cancelReply = (messageId) => {
+            const message = messages.find(m => m.id === messageId);
+            if (message) {
+                message.showReply = false;
+                message.replyContent = '';
+            }
+        };
+
+        // 提交回复
+        const submitReply = async (messageId) => {
+            const message = messages.find(m => m.id === messageId);
+            if (message && message.replyContent?.trim()) {
+                try {
+                    // 模拟API调用
+                    await new Promise(resolve => setTimeout(resolve, 500));
+                    
+                    message.reply = message.replyContent.trim();
+                    message.showReply = false;
+                    message.replyContent = '';
+                    
+                    ElMessage.success('回复成功！');
+                } catch (error) {
+                    ElMessage.error('回复失败，请重试');
+                }
+            }
+        };
+
+        // 一键清空
+        const clearAllMessages = async () => {
+            try {
+                await ElMessageBox.confirm(
+                    '确定要清空所有消息吗？此操作不可恢复',
+                    '确认清空',
+                    {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                    }
+                );
+
+                messages.splice(0);
+                total.value = 0;
+                currentPage.value = 1;
+                
+                ElMessage.success('消息已全部清空');
+            } catch {
+                // 用户取消
+            }
+        };
+
+        // 页码变化
+        const handlePageChange = (page) => {
+            currentPage.value = page;
+            // 这里可以加载对应页面的数据
+        };
+
+        onMounted(() => {
+            console.log('消息页面已加载');
+            // 清空未读消息数量
+            store.clearUnreadMessages();
+        });
+
+        return {
+            messages,
+            currentPage,
+            pageSize,
+            total,
+            toggleReply,
+            cancelReply,
+            submitReply,
+            clearAllMessages,
+            handlePageChange
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.messages {
+    padding: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 32px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid #ebeef5;
+
+        .title {
+            display: flex;
+            align-items: center;
+            font-size: 24px;
+            font-weight: 600;
+            color: #0A2463;
+            margin: 0;
+
+            .title-icon {
+                margin-right: 8px;
+                font-size: 28px;
+            }
+        }
+
+        .el-button {
+            background-color: #0A2463;
+            border-color: #0A2463;
+
+            &:hover {
+                background-color: #083354;
+                border-color: #083354;
+            }
+        }
+    }
+
+    .messages-list {
+        .message-item {
+            background: #fff;
+            border: 1px solid #ebeef5;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 16px;
+            transition: box-shadow 0.3s ease;
+
+            &:hover {
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            .user-info {
+                display: flex;
+                align-items: center;
+                margin-bottom: 12px;
+
+                .user-details {
+                    margin-left: 12px;
+
+                    .user-name {
+                        font-size: 16px;
+                        font-weight: 600;
+                        color: #303133;
+                        margin-bottom: 4px;
+                    }
+
+                    .source-info {
+                        font-size: 14px;
+                        color: #909399;
+
+                        .time {
+                            margin-left: 8px;
+                        }
+                    }
+                }
+            }
+
+            .comment-content {
+                color: #606266;
+                line-height: 1.6;
+                margin-bottom: 16px;
+                font-size: 15px;
+            }
+
+            .action-buttons {
+                text-align: right;
+
+                .reply-btn {
+                    color: #0A2463;
+                    font-size: 14px;
+
+                    &:hover {
+                        color: #083354;
+                    }
+                }
+            }
+
+            .reply-section {
+                margin-top: 16px;
+                padding-top: 16px;
+                border-top: 1px solid #f0f0f0;
+
+                .reply-input {
+                    margin-bottom: 12px;
+                }
+
+                .reply-actions {
+                    text-align: right;
+
+                    .el-button + .el-button {
+                        margin-left: 8px;
+                    }
+
+                    .el-button--primary {
+                        background-color: #0A2463;
+                        border-color: #0A2463;
+
+                        &:hover {
+                            background-color: #083354;
+                            border-color: #083354;
+                        }
+                    }
+                }
+            }
+
+            .existing-reply {
+                margin-top: 16px;
+                padding: 12px;
+                background: #f8f9fa;
+                border-left: 4px solid #0A2463;
+                color: #606266;
+                font-size: 14px;
+                border-radius: 0 4px 4px 0;
+            }
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #909399;
+
+            .empty-icon {
+                font-size: 64px;
+                margin-bottom: 16px;
+                color: #dcdfe6;
+            }
+
+            p {
+                font-size: 16px;
+                margin: 0;
+            }
+        }
+    }
+
+    .pagination {
+        display: flex;
+        justify-content: center;
+        margin-top: 32px;
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .messages {
+        padding: 16px;
+
+        .header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 12px;
+
+            .title {
+                font-size: 20px;
+            }
+        }
+
+        .messages-list {
+            .message-item {
+                padding: 16px;
+
+                .user-info {
+                    .user-details {
+                        .user-name {
+                            font-size: 15px;
+                        }
+
+                        .source-info {
+                            font-size: 13px;
+                        }
+                    }
+                }
+
+                .comment-content {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/user/TaskCenter.vue b/src/views/user/TaskCenter.vue
new file mode 100644
index 0000000..caf8807
--- /dev/null
+++ b/src/views/user/TaskCenter.vue
@@ -0,0 +1,414 @@
+<template>
+    <div class="task-center">
+        <!-- 页面标题和剩余推荐票 -->
+        <div class="header">
+            <h1 class="title">
+                <el-icon class="title-icon"><List /></el-icon>
+                任务中心
+            </h1>
+            <div class="remaining-tickets">
+                剩余刷新：
+                <span class="count">{{ remainingTickets }}</span> 
+                张 推荐票
+            </div>
+        </div>
+
+        <!-- 每日签到 -->
+        <div class="section">
+            <h2 class="section-title">每日签到</h2>
+            <div class="sign-in-cards">
+                <div 
+                    v-for="day in signInDays" 
+                    :key="day.day"
+                    class="sign-card"
+                    :class="{ 'completed': day.completed, 'current': day.current }"
+                >
+                    <div class="card-header">
+                        <span class="day">第{{ day.day }}天</span>
+                        <el-icon v-if="day.completed" class="check-icon"><Check /></el-icon>
+                    </div>
+                    <div class="reward">
+                        <img src="@/assets/images/推荐票.png" alt="推荐票" class="reward-icon">
+                        <span>推荐票 +{{ day.reward }}</span>
+                    </div>
+                    <el-button 
+                        :type="day.completed ? 'success' : 'primary'" 
+                        size="small"
+                        :disabled="day.completed || !day.current"
+                        @click="signIn(day)"
+                    >
+                        {{ day.completed ? '已签到' : '签到' }}
+                    </el-button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 更多任务 -->
+        <div class="section">
+            <h2 class="section-title">更多任务</h2>
+            <div class="task-cards">
+                <div 
+                    v-for="task in moreTasks" 
+                    :key="task.id"
+                    class="task-card"
+                >
+                    <div class="task-info">
+                        <h3 class="task-name">{{ task.name }}</h3>
+                        <div class="task-reward">
+                            <img 
+                                v-if="task.rewardType === 'ticket'" 
+                                src="@/assets/images/推荐票.png" 
+                                alt="推荐票" 
+                                class="reward-icon"
+                            >
+                            <span>{{ task.rewardText }}</span>
+                        </div>
+                    </div>
+                    <el-button 
+                        type="warning" 
+                        size="small"
+                        :disabled="task.completed"
+                        @click="completeTask(task)"
+                    >
+                        {{ task.completed ? '已完成' : '去领取' }}
+                    </el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { List, Check } from '@element-plus/icons-vue';
+
+export default {
+    name: 'TaskCenter',
+    components: {
+        List,
+        Check
+    },
+    setup() {
+        const remainingTickets = ref(9);
+
+        // 每日签到数据
+        const signInDays = reactive([
+            { day: 1, reward: 1, completed: true, current: false },
+            { day: 2, reward: 1, completed: false, current: true },
+            { day: 3, reward: 1, completed: false, current: false },
+            { day: 4, reward: 1, completed: false, current: false },
+            { day: 5, reward: 1, completed: false, current: false },
+            { day: 6, reward: 1, completed: false, current: false },
+            { day: 7, reward: 1, completed: false, current: false }
+        ]);
+
+        // 更多任务数据
+        const moreTasks = reactive([
+            {
+                id: 1,
+                name: '观看视频广告',
+                rewardType: 'ticket',
+                rewardText: '推荐票 +1',
+                completed: false
+            },
+            {
+                id: 2,
+                name: '每日首阅三个章节',
+                rewardType: 'ticket',
+                rewardText: '推荐票 +1',
+                completed: false
+            },
+            {
+                id: 3,
+                name: '每日首条评论',
+                rewardType: 'ticket',
+                rewardText: '推荐票 +1',
+                completed: false
+            },
+            {
+                id: 4,
+                name: '充值金额购买',
+                rewardType: 'bean',
+                rewardText: '66豆豆 +1',
+                completed: false
+            }
+        ]);
+
+        // 签到方法
+        const signIn = (day) => {
+            if (day.completed || !day.current) return;
+            
+            day.completed = true;
+            remainingTickets.value += day.reward;
+            
+            // 设置下一天为当前可签到
+            const nextDayIndex = signInDays.findIndex(d => d.day === day.day + 1);
+            if (nextDayIndex !== -1) {
+                signInDays[nextDayIndex].current = true;
+            }
+            day.current = false;
+            
+            ElMessage.success(`签到成功！获得推荐票 +${day.reward}`);
+        };
+
+        // 完成任务方法
+        const completeTask = (task) => {
+            if (task.completed) return;
+            
+            task.completed = true;
+            
+            if (task.rewardType === 'ticket') {
+                remainingTickets.value += 1;
+                ElMessage.success(`任务完成！获得${task.rewardText}`);
+            } else {
+                ElMessage.success(`任务完成！获得${task.rewardText}`);
+            }
+        };
+
+        onMounted(() => {
+            // 页面加载时可以请求任务状态数据
+            console.log('任务中心页面已加载');
+        });
+
+        return {
+            remainingTickets,
+            signInDays,
+            moreTasks,
+            signIn,
+            completeTask
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.task-center {
+    padding: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 32px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid #ebeef5;
+
+        .title {
+            display: flex;
+            align-items: center;
+            font-size: 24px;
+            font-weight: 600;
+            color: #0A2463;
+            margin: 0;
+
+            .title-icon {
+                margin-right: 8px;
+                font-size: 28px;
+            }
+        }
+
+        .remaining-tickets {
+            font-size: 14px;
+            color: #666;
+
+            .count {
+                color: #0A2463;
+                font-weight: 600;
+                font-size: 16px;
+            }
+        }
+    }
+
+    .section {
+        margin-bottom: 40px;
+
+        .section-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #303133;
+            margin-bottom: 16px;
+        }
+    }
+
+    .sign-in-cards {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 16px;
+        max-width: 900px;
+
+        .sign-card {
+            background: #f8f9fa;
+            border: 1px solid #e4e7ed;
+            border-radius: 8px;
+            padding: 16px;
+            text-align: center;
+            transition: all 0.3s ease;
+            position: relative;
+
+            &.completed {
+                background: #e8f5e8;
+                border-color: #67c23a;
+                
+                .check-icon {
+                    position: absolute;
+                    top: 8px;
+                    right: 8px;
+                    width: 20px;
+                    height: 20px;
+                    background: #67c23a;
+                    border-radius: 50%;
+                    color: white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 12px;
+                }
+            }
+
+            &.current {
+                background: #fff7e6;
+                border-color: #ffa726;
+                box-shadow: 0 2px 8px rgba(255, 167, 38, 0.2);
+            }
+
+            .card-header {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-bottom: 12px;
+                position: relative;
+
+                .day {
+                    font-size: 14px;
+                    font-weight: 600;
+                    color: #303133;
+                }
+            }
+
+            .reward {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 12px;
+                font-size: 12px;
+                color: #666;
+
+                .reward-icon {
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 4px;
+                }
+            }
+
+            .el-button {
+                width: 100%;
+                
+                &.el-button--success {
+                    background-color: #67c23a;
+                    border-color: #67c23a;
+                }
+                
+                &.el-button--primary {
+                    background-color: #0A2463;
+                    border-color: #0A2463;
+                }
+            }
+        }
+    }
+
+    .task-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 16px;
+
+        .task-card {
+            background: #faf8f0;
+            border: 1px solid #f0e6cc;
+            border-radius: 8px;
+            padding: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: all 0.3s ease;
+
+            &:hover {
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            .task-info {
+                flex: 1;
+
+                .task-name {
+                    font-size: 16px;
+                    font-weight: 600;
+                    color: #303133;
+                    margin: 0 0 8px 0;
+                }
+
+                .task-reward {
+                    display: flex;
+                    align-items: center;
+                    font-size: 14px;
+                    color: #666;
+
+                    .reward-icon {
+                        width: 16px;
+                        height: 16px;
+                        margin-right: 4px;
+                    }
+                }
+            }
+
+            .el-button {
+                margin-left: 16px;
+                min-width: 80px;
+            }
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .task-center {
+        padding: 16px;
+
+        .header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 12px;
+
+            .title {
+                font-size: 20px;
+            }
+        }
+
+        .sign-in-cards {
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 12px;
+
+            .sign-card {
+                padding: 12px;
+            }
+        }
+
+        .task-cards {
+            grid-template-columns: 1fr;
+
+            .task-card {
+                flex-direction: column;
+                align-items: flex-start;
+                text-align: left;
+
+                .el-button {
+                    margin-left: 0;
+                    margin-top: 12px;
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+</style> 
\ No newline at end of file