tj

RuoYi-App/App.vue

@@ -49,6 +49,14 @@ export default {
     }
   },
   mounted() {
+	    console.log('UniApp SDK版本:', uni.getSystemInfoSync().SDKVersion);
+	    console.log('平台:', uni.getSystemInfoSync().platform);
+	    console.log('UniApp API可用性检查:');
+	    console.log('navigateTo:', typeof uni.navigateTo);
+	    console.log('redirectTo:', typeof uni.redirectTo);
+	    console.log('switchTab:', typeof uni.switchTab);
+		  // 检查页面路径是否正确
+		  this.checkPagePaths();
     this.isMounted = true;
     
     // 详细的环境检查
@@ -94,10 +102,20 @@ export default {
     }
   },
   methods: {
+	    checkPagePaths() {
+	      // 获取所有已注册的页面路径
+	      const pages = getCurrentPages();
+	      console.log('当前页面栈:', pages);
+	      
+	      // 检查reader页面是否存在
+	      const readerPageExists = pages.some(page => 
+	        page.route.includes('novel/reader')
+	      );
+	      console.log('Reader页面是否存在:', readerPageExists);
+	    },
     // 环境检查方法
     checkEnvironment() {
       console.log('开始环境检查...');
-      
       // 检查uni对象
       if (typeof uni === 'undefined') {
         console.error('uni对象未定义，uni-app环境可能未正确初始化');

RuoYi-App/package.json

@@ -3,6 +3,7 @@
     "vue": "^2.6.14",
     "@vue/composition-api": "^1.7.2",
     "uview-ui": "^1.8.4",
-    "uni-app": "^2.0.0"
+    "uni-app": "^2.0.0",
+	"@dcloudio/uni-mp-vue": "^2.0.0"
   }
 }

RuoYi-App/pages/index/index.vue

@@ -286,9 +286,19 @@ export default {
   },
 
   onUnload() {
-    // 保存阅读进度
-    uni.setStorageSync('readingProgress', this.currentChapter)
-    console.log('首页已加载')
+  // 保存阅读进度
+  uni.setStorage({
+    key: `readingProgress_${this.novelId}`,
+    data: {
+      chapterId: this.chapterId,
+      progress: this.progress,
+      lastReadTime: new Date().getTime()
+    }
+  });
+  
+  // 更新已读章节数
+  const readChapters = uni.getStorageSync('readChapters') || 0;
+  uni.setStorageSync('readChapters', readChapters + 1);
   },
   unlockChapter() {
     if (this.currentChapter > this.maxFreeChapters) {

RuoYi-App/pages/novel/list.vue

@@ -165,12 +165,84 @@ export default {
         this.loading = false;
       }
     },
+	
 // 在 list.vue 的 methods 中修改 openNovel 方法
+// 在 list.vue 的 methods 中添加
+simpleNavigate(url) {
+  try {
+    // 方法1: 直接使用最基础的导航方式
+    if (typeof uni !== 'undefined' && uni.navigateTo) {
+      // 创建一个新的URL对象，确保格式正确
+      const cleanUrl = url.split('?')[0];
+      const params = new URLSearchParams(url.split('?')[1] || '');
+      
+      uni.navigateTo({
+        url: `${cleanUrl}?${params.toString()}`,
+        fail: (err) => {
+          console.error('基础navigateTo失败:', err);
+          // 方法2: 使用页面重定向
+          this.simpleRedirect(url);
+        }
+      });
+    } else {
+      this.simpleRedirect(url);
+    }
+  } catch (error) {
+    console.error('simpleNavigate异常:', error);
+    this.simpleRedirect(url);
+  }
+},
+
+simpleRedirect(url) {
+  try {
+    if (typeof uni !== 'undefined' && uni.redirectTo) {
+      uni.redirectTo({
+        url: url,
+        fail: (err) => {
+          console.error('redirectTo失败:', err);
+          // 方法3: 使用Vue Router
+          this.useVueRouterFallback(url);
+        }
+      });
+    } else {
+      this.useVueRouterFallback(url);
+    }
+  } catch (error) {
+    console.error('simpleRedirect异常:', error);
+    this.useVueRouterFallback(url);
+  }
+},
+
+useVueRouterFallback(url) {
+  try {
+    // 解析URL路径和参数
+    const [path, queryString] = url.split('?');
+    const params = new URLSearchParams(queryString || '');
+    const query = {};
+    
+    for (const [key, value] of params.entries()) {
+      query[key] = value;
+    }
+    
+    // 使用Vue Router
+    if (this.$router && typeof this.$router.push === 'function') {
+      this.$router.push({ path, query });
+    } else {
+      // 最终方案: 使用原生跳转
+      window.location.href = url;
+    }
+  } catch (error) {
+    console.error('useVueRouterFallback异常:', error);
+    // 最终降级方案
+    window.location.href = url;
+  }
+},
+// 在 list.vue 中修改 openNovel 方法
 openNovel(novel) {
   try {
     console.log('准备打开小说:', novel);
     
-    // 检查novel对象是否存在
+    // 确保 novel 对象存在且有有效 ID
     if (!novel || typeof novel !== 'object') {
       console.error('novel对象无效:', novel);
       uni.showToast({
@@ -180,7 +252,7 @@ openNovel(novel) {
       return;
     }
     
-    // 获取小说ID
+    // 获取小说ID - 使用若依框架的标准方式
     const novelId = novel.id || novel.novelId || novel.bookId;
     if (!novelId) {
       console.error('无法获取小说ID:', novel);
@@ -191,33 +263,13 @@ openNovel(novel) {
       return;
     }
     
-    // 确保ID是数字
-    const id = Number(novelId);
-    if (isNaN(id)) {
-      console.error('小说ID不是有效数字:', novelId);
-      uni.showToast({
-        title: '小说ID格式错误',
-        icon: 'none'
-      });
-      return;
-    }
-    
-    console.log('跳转到阅读页面，小说ID:', id);
-    
-    // 直接使用uni.navigateTo进行跳转
-    uni.navigateTo({
-      url: `/pages/novel/reader?novelId=${id}`,
-      success: (res) => {
-        console.log('跳转成功', res);
-      },
-      fail: (err) => {
-        console.error('跳转失败', err);
-        uni.showToast({
-          title: '跳转失败，请重试',
-          icon: 'none'
-        });
-      }
+    console.log('跳转到阅读页面，小说ID:', novelId, '章节ID:', 1);
+    // 使用若依框架的标准导航方式
+    this.$router.push({
+      path: '/pages/novel/reader',
+      query: { novelId: novelId ,chapterId : 1}
     });
+    
   } catch (error) {
     console.error('openNovel方法执行异常:', error);
     uni.showToast({
@@ -227,6 +279,85 @@ openNovel(novel) {
   }
 },
 
+// 添加安全导航方法
+safeNavigateTo(url) {
+  try {
+    // 方法1: 直接使用 uni.navigateTo
+    if (typeof uni.navigateTo === 'function') {
+      uni.navigateTo({
+        url: url,
+        success: (res) => {
+          console.log('navigateTo跳转成功', res);
+        },
+        fail: (err) => {
+          console.error('navigateTo跳转失败', err);
+          // 方法2: 使用重定向作为备选
+          this.fallbackRedirect(url);
+        }
+      });
+    } else {
+      // 方法3: 使用备用导航
+      this.fallbackRedirect(url);
+    }
+  } catch (error) {
+    console.error('safeNavigateTo方法异常:', error);
+    this.fallbackRedirect(url);
+  }
+},
+
+// 备用重定向方法
+fallbackRedirect(url) {
+  try {
+    if (typeof uni.redirectTo === 'function') {
+      uni.redirectTo({
+        url: url,
+        success: (res) => {
+          console.log('redirectTo跳转成功', res);
+        },
+        fail: (err) => {
+          console.error('redirectTo也失败', err);
+          // 方法4: 使用Vue Router
+          this.useVueRouter(url);
+        }
+      });
+    } else {
+      this.useVueRouter(url);
+    }
+  } catch (error) {
+    console.error('fallbackRedirect方法异常:', error);
+    this.useVueRouter(url);
+  }
+},
+
+// 使用Vue Router进行导航
+useVueRouter(url) {
+  try {
+    // 解析URL
+    const path = url.split('?')[0];
+    const queryString = url.split('?')[1] || '';
+    const params = new URLSearchParams(queryString);
+    const query = {};
+    
+    for (const [key, value] of params.entries()) {
+      query[key] = value;
+    }
+    
+    if (this.$router && typeof this.$router.push === 'function') {
+      this.$router.push({
+        path: path,
+        query: query
+      });
+    } else {
+      // 最终降级方案
+      window.location.href = url;
+    }
+  } catch (error) {
+    console.error('useVueRouter方法异常:', error);
+    // 最终降级方案
+    window.location.href = url;
+  }
+},
+
 // 备用导航方法
 fallbackNavigate(novelId) {
   try {

RuoYi-App/pages/novel/reader.vue

@@ -1,127 +1,67 @@
 <template>
-  <view class="reader-container" :style="readerStyles">
-    <!-- 顶部导航 -->
-    <view class="reader-header">
-      <uni-icons type="arrowleft" size="28" color="#fff" @click="goBack"></uni-icons>
-      <text class="novel-title">{{ novelTitle }}</text>
-      <view class="header-actions">
-        <uni-icons type="more" size="28" color="#fff" @click="showMoreActions"></uni-icons>
+  <view class="reader-container">
+    <!-- 顶部导航栏 -->
+    <view class="reader-header" v-if="showHeader">
+      <view class="header-left">
+        <text class="iconfont icon-back" @click="goBack"></text>
+        <text class="novel-title">{{novelTitle}}</text>
+      </view>
+      <view class="header-right">
+        <text class="iconfont icon-menu" @click="showMenu"></text>
       </view>
     </view>
-    
-    <!-- 阅读区域 -->
-    <scroll-view scroll-y class="reader-content" :scroll-top="scrollTop" @scroll="onScroll">
-      <view class="chapter-title">{{ chapterDetail.title }}</view>
-      <view class="content-text">{{ formattedContent }}</view>
+
+    <!-- 阅读内容区域 -->
+    <scroll-view 
+      class="reader-content" 
+      scroll-y 
+      :scroll-top="scrollTop"
+      @scroll="onScroll"
+      @touchstart="onTouchStart"
+      @touchend="onTouchEnd"
+    >
+      <view class="chapter-title">{{chapterTitle}}</view>
+      <view class="content-text">
+        <text>{{decodedContent}}</text>
+      </view>
+      
+      <!-- 加载状态 -->
+      <view v-if="loading" class="loading-container">
+        <text>加载中...</text>
+      </view>
       
-      <!-- 章节结束提示 -->
-      <view v-if="isChapterEnd" class="chapter-end">
-        <text>本章结束</text>
-        <button v-if="!isLastChapter" class="next-chapter-btn" @click="nextChapter">下一章</button>
-        <text v-else>已是最新章节</text>
+      <!-- 错误状态 -->
+      <view v-if="error" class="error-container">
+        <text>{{error}}</text>
+        <button @click="loadChapterContent">重试</button>
       </view>
     </scroll-view>
-    
-    <!-- 底部操作栏 -->
-    <view class="reader-footer">
-      <view class="progress">
-        <text>{{ currentChapterIndex + 1 }}/{{ chapters.length }}</text>
-        <text>{{ readingProgress }}%</text>
+
+    <!-- 底部控制栏 -->
+    <view class="reader-footer" v-if="showFooter">
+      <view class="progress-text">
+        第{{currentChapter}}章 {{progress}}%
       </view>
-      <view class="actions">
-        <button class="action-btn" @click="prevChapter" :disabled="isFirstChapter">
-          <uni-icons type="arrow-up" size="24" color="#2a5caa"></uni-icons>
-          <text>上一章</text>
-        </button>
-        <button class="action-btn" @click="toggleMenu">
-          <uni-icons type="list" size="24" color="#2a5caa"></uni-icons>
-          <text>目录</text>
-        </button>
-        <button class="action-btn" @click="toggleSettings">
-          <uni-icons type="gear" size="24" color="#2a5caa"></uni-icons>
-          <text>设置</text>
-        </button>
-        <button class="action-btn" @click="nextChapter" :disabled="isLastChapter">
-          <uni-icons type="arrow-down" size="24" color="#2a5caa"></uni-icons>
-          <text>下一章</text>
-        </button>
+      <view class="control-buttons">
+        <text class="iconfont icon-catalog" @click="showCatalog"></text>
+        <text class="iconfont icon-font" @click="showFontSettings"></text>
+        <text class="iconfont icon-night" @click="toggleNightMode"></text>
+        <text class="iconfont icon-download" @click="downloadChapter"></text>
       </view>
     </view>
-    
-    <!-- 目录抽屉 -->
-    <uni-drawer ref="drawer" mode="right" :width="300">
-      <view class="drawer-content">
-        <text class="drawer-title">目录</text>
-        <view class="chapter-stats">
-          <text>共{{ chapters.length }}章</text>
-          <text>已读{{ readChaptersCount }}章</text>
-        </view>
-        <scroll-view scroll-y class="chapter-list">
-          <view 
-            v-for="(chapter, index) in chapters" 
-            :key="chapter.id" 
-            class="chapter-item"
-            :class="{ 
-              active: chapter.id === chapterDetail.id,
-              read: isChapterRead(chapter.id),
-              locked: isChapterLocked(index)
-            }"
-            @click="selectChapter(chapter, index)"
-          >
-            <text>{{ index + 1 }}. {{ chapter.title }}</text>
-            <uni-icons v-if="isChapterLocked(index)" type="locked" size="16" color="#999"></uni-icons>
-          </view>
-        </scroll-view>
-      </view>
-    </uni-drawer>
-    
+
+    <!-- 广告位 -->
+    <ad v-if="showAd" unit-id="您的广告单元ID" class="reader-ad"></ad>
+
     <!-- 设置面板 -->
-    <uni-popup ref="settingsPopup" type="bottom">
-      <view class="settings-panel">
-        <text class="panel-title">阅读设置</text>
-        <view class="setting-item">
-          <text>字体大小</text>
-          <view class="font-size-controls">
-            <button class="size-btn" @click="decreaseFontSize">A-</button>
-            <text class="size-value">{{ fontSize }}px</text>
-            <button class="size-btn" @click="increaseFontSize">A+</button>
-          </view>
-        </view>
-        <view class="setting-item">
-          <text>背景颜色</text>
-          <view class="color-options">
-            <view 
-              v-for="color in backgroundColors" 
-              :key="color.value"
-              class="color-option"
-              :class="{ active: readerStyles.backgroundColor === color.value }"
-              :style="{ backgroundColor: color.value }"
-              @click="changeBackgroundColor(color.value)"
-            >
-              <uni-icons v-if="readerStyles.backgroundColor === color.value" type="checkmark" size="16" color="#fff"></uni-icons>
-            </view>
-          </view>
-        </view>
-        <view class="setting-item">
-          <text>亮度调节</text>
-          <slider value="50" min="0" max="100" @change="adjustBrightness" />
-        </view>
-        <button class="close-btn" @click="$refs.settingsPopup.close()">关闭设置</button>
-      </view>
-    </uni-popup>
-    
-    <!-- 登录提示弹窗 -->
-    <uni-popup ref="loginPopup" type="dialog">
-      <uni-popup-dialog
-        type="info"
-        title="登录提示"
-        content="您已阅读完免费章节，登录后可继续阅读"
-        :duration="2000"
-        :before-close="true"
-        @close="closeLoginDialog"
-        @confirm="goToLogin"
-      ></uni-popup-dialog>
-    </uni-popup>
+    <view class="settings-panel" v-if="showSettings">
+      <!-- 字体大小、背景颜色等设置 -->
+    </view>
+
+    <!-- 目录面板 -->
+    <view class="catalog-panel" v-if="showCatalogPanel">
+      <!-- 章节列表 -->
+    </view>
   </view>
 </template>
 
@@ -129,446 +69,268 @@
 export default {
   data() {
     return {
-      novelId: null,
-      chapterId: null,
-      novelTitle: '',
-      chapterDetail: {},
-      chapterContent: '',
-      chapters: [],
-      currentChapterIndex: 0,
-      // 阅读统计
-      readChapters: [],
-      readingProgress: 0,
+      novelId: '',
+      chapterId: '',
+      novelTitle: '加载中...',
+      chapterTitle: '加载中...',
+      content: '', // Base64编码的内容
+      decodedContent: '正在加载内容...', // 解码后的内容
+      currentChapter: 1,
+      totalChapters: 0,
+      progress: 0,
       scrollTop: 0,
-      isChapterEnd: false,
-      // 阅读设置
-      fontSize: 32,
-      backgroundColors: [
-        { name: '护眼模式', value: '#f8f2e0' },
-        { name: '白色', value: '#ffffff' },
-        { name: '夜间', value: '#2c2c2c' },
-        { name: '淡蓝', value: '#e8f4f8' }
-      ],
-      readerStyles: {
-        fontSize: '32rpx',
-        lineHeight: '1.8',
-        backgroundColor: '#f8f2e0',
-        color: '#333'
-      }
+      showHeader: false,
+      showFooter: false,
+      showSettings: false,
+      showCatalogPanel: false,
+      showAd: false, // 默认不显示广告
+      nightMode: false,
+      touchStartX: 0,
+      touchStartY: 0,
+      lastScrollPosition: 0,
+      loading: false,
+      error: null
     }
   },
-  computed: {
-    // 计算属性
-    isFirstChapter() {
-      return this.currentChapterIndex === 0
-    },
-    isLastChapter() {
-      return this.currentChapterIndex === this.chapters.length - 1
-    },
-    readChaptersCount() {
-      return this.readChapters.length
-    },
-    // 检查是否达到免费章节限制
-    reachedFreeLimit() {
-      const isLoggedIn = this.$store.getters.token
-      return !isLoggedIn && this.readChaptersCount >= 5 // 默认5章免费
-    },
-    // 格式化内容
-    formattedContent() {
-      if (!this.chapterContent) return ''
-      
-      // 处理HTML标签和特殊字符
-      return this.chapterContent
-        .replace(/<br\s*\/?>/gi, '\n')
-        .replace(/&nbsp;/g, ' ')
-        .replace(/<p>/g, '\n\n')
-        .replace(/<\/p>/g, '')
-        .replace(/<[^>]+>/g, '')
-        .replace(/\n{3,}/g, '\n\n')
-        .trim()
-    }
-  },
-  async onLoad(options) {
-    console.log('阅读器页面参数:', options)
+  onLoad(options) {
+    console.log('阅读器页面加载，参数:', options);
     
-    // 确保参数正确解析
-    this.novelId = options.novelId;
-    this.chapterId = options.chapterId || null
+    // 确保参数正确获取
+    this.novelId = options.novelId || '';
+    this.chapterId = options.chapterId || '1';
     
     if (!this.novelId) {
-      uni.showToast({
-        title: '小说ID参数缺失',
-        icon: 'none'
-      })
-      setTimeout(() => {
-        uni.navigateBack()
-      }, 1500)
-      return
+      this.error = '小说ID参数缺失';
+      return;
     }
     
-    // 加载阅读进度
-    this.loadReadingProgress()
+    this.loadChapterContent();
+  },
+  methods: {
+    // 添加onScroll方法
+    onScroll(e) {
+      this.lastScrollPosition = e.detail.scrollTop;
+      // 计算阅读进度
+      this.calculateProgress();
+    },
+    
+    onTouchStart(e) {
+      this.touchStartX = e.touches[0].clientX;
+      this.touchStartY = e.touches[0].clientY;
+    },
     
-    try {
-      await this.loadNovelData()
+    onTouchEnd(e) {
+      const endX = e.changedTouches[0].clientX;
+      const endY = e.changedTouches[0].clientY;
+      const diffX = endX - this.touchStartX;
+      const diffY = endY - this.touchStartY;
       
-      // 如果有指定章节ID，加载该章节，否则加载第一章
-      if (this.chapterId) {
-        await this.loadChapter(this.chapterId)
-      } else {
-        // 尝试从阅读记录中恢复
-        const lastReadChapter = this.getLastReadChapter()
-        if (lastReadChapter) {
-          await this.loadChapter(lastReadChapter.id)
+      // 横向滑动大于纵向滑动，且滑动距离大于50px
+      if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+        if (diffX > 0) {
+          this.prevChapter(); // 右滑，上一章
         } else {
-          await this.loadFirstChapter()
+          this.nextChapter(); // 左滑，下一章
         }
       }
-    } catch (error) {
-      console.error('页面初始化失败:', error)
-      uni.showToast({
-        title: '页面初始化失败',
-        icon: 'none'
-      })
-    }
-  },
-  methods: {
-    // 加载小说数据
-    async loadNovelData() {
+    },
+    
+    // Base64解码
+    decodeBase64(content) {
+      if (typeof content !== 'string') {
+        console.error('Base64解码失败：内容不是字符串');
+        return '内容格式错误';
+      }
+      
       try {
-        uni.showLoading({ title: '加载中...' })
-        
-        // 加载小说基本信息
-        const novelRes = await this.$http.get(`/novel/detail/${this.novelId}`)
+        // 处理可能的URL安全Base64编码
+        let base64 = content.replace(/-/g, '+').replace(/_/g, '/');
         
-        // 使用统一的响应解析方法
-        const novelData = this.parseResponse(novelRes)
-        console.log('小说详情响应:', novelData)
-        
-        if (novelData.code === 200 && novelData.data) {
-          this.novelTitle = novelData.data.title
-          uni.setNavigationBarTitle({ title: this.novelTitle })
-        }
-        
-        // 加载章节列表
-        const chapterRes = await this.$http.get(`/chapter/list/${this.novelId}`)
-        
-        // 使用统一的响应解析方法
-        const chapterData = this.parseResponse(chapterRes)
-        console.log('章节列表响应:', chapterData)
-        
-        if (chapterData.code === 200) {
-          // 处理不同的响应格式
-          if (Array.isArray(chapterData.rows)) {
-            this.chapters = chapterData.rows
-          } else if (Array.isArray(chapterData.data)) {
-            this.chapters = chapterData.data
-          }
-          
-          // 初始化当前章节索引
-          if (this.chapterId) {
-            this.currentChapterIndex = this.chapters.findIndex(ch => ch.id === this.chapterId)
+        // 添加必要的填充字符
+        const pad = base64.length % 4;
+        if (pad) {
+          if (pad === 1) {
+            throw new Error('InvalidLengthError: Input base64url string is the wrong length to determine padding');
           }
+          base64 += new Array(5-pad).join('=');
         }
+        
+        // 解码
+        const decoded = uni.base64ToArrayBuffer(base64);
+        const textDecoder = new TextDecoder('utf-8');
+        return textDecoder.decode(decoded);
       } catch (error) {
-        console.error('加载小说数据失败:', error)
-        uni.showToast({
-          title: '加载失败',
-          icon: 'none'
-        })
-      } finally {
-        uni.hideLoading()
+        console.error('Base64解码失败:', error);
+        return '内容解码失败，请稍后再试。';
       }
     },
     
-    // 加载章节内容
-    async loadChapter(chapterId) {
-      // 检查章节是否锁定
-      const chapterIndex = this.chapters.findIndex(ch => ch.id === chapterId)
-      if (this.isChapterLocked(chapterIndex)) {
-        this.showLoginPrompt()
-        return
-      }
+    async loadChapterContent() {
+      this.loading = true;
+      this.error = null;
       
       try {
-        uni.showLoading({ title: '加载中...' })
-        
-        const res = await this.$http.get(`/chapter/content/${chapterId}`)
+        console.log('开始请求章节内容，章节ID:', this.chapterId);
+        const res = await this.$http.get(`/novel/chapter/${this.chapterId}`);
+        console.log('章节内容响应:', res);
         
-        // 使用统一的响应解析方法
-        const responseData = this.parseResponse(res)
-        console.log('章节内容响应:', responseData)
-        
-        if (responseData.code === 200 && responseData.data) {
-          this.chapterDetail = responseData.data
-          this.chapterContent = responseData.data.content
-          this.chapterId = chapterId
-          this.currentChapterIndex = chapterIndex
-          
-          // 标记为已读
-          this.markChapterAsRead(chapterId)
+        if (res.code === 200) {
+          this.novelTitle = res.data.novelTitle || '未知小说';
+          this.chapterTitle = res.data.chapterTitle || '未知章节';
+          this.content = res.data.content || '';
+          this.decodedContent = this.decodeBase64(this.content);
           
-          // 计算阅读进度
-          this.calculateReadingProgress()
+          // 设置章节信息
+          this.currentChapter = res.data.chapterIndex || 1;
+          this.totalChapters = res.data.totalChapters || 0;
+        } else {
+          console.error('API返回错误状态码:', res.code);
+          this.error = '加载失败，请重试';
         }
       } catch (error) {
-        console.error('加载章节内容失败:', error)
-        uni.showToast({
-          title: '加载失败',
-          icon: 'none'
-        })
+        console.error('加载章节内容失败:', error);
+        this.error = '加载失败，请检查网络连接';
       } finally {
-        uni.hideLoading()
+        this.loading = false;
       }
     },
     
-    // 字体大小控制
-    increaseFontSize() {
-      if (this.fontSize < 40) {
-        this.fontSize += 2
-        this.readerStyles.fontSize = `${this.fontSize}rpx`
-        this.saveReadingProgress()
+    calculateProgress() {
+      // 根据滚动位置计算阅读进度
+      // 这里需要获取内容区域的实际高度，由于uni-app中获取节点高度较为复杂，暂时用模拟数据
+      // 实际项目中应该通过uni.createSelectorQuery()获取
+      this.progress = Math.min(100, Math.round((this.lastScrollPosition / 1000) * 100));
+    },
+    
+    goBack() {
+      uni.navigateBack();
+    },
+    
+    prevChapter() {
+      if (this.currentChapter > 1) {
+        this.chapterId = parseInt(this.chapterId) - 1;
+        this.loadChapterContent();
+      } else {
+        uni.showToast({ title: '已经是第一章了', icon: 'none' });
       }
     },
     
-    decreaseFontSize() {
-      if (this.fontSize > 24) {
-        this.fontSize -= 2
-        this.readerStyles.fontSize = `${this.fontSize}rpx`
-        this.saveReadingProgress()
+    nextChapter() {
+      if (this.currentChapter < this.totalChapters) {
+        this.chapterId = parseInt(this.chapterId) + 1;
+        this.loadChapterContent();
+      } else {
+        uni.showToast({ title: '已经是最后一章了', icon: 'none' });
       }
     },
     
-    // 亮度调节
-    adjustBrightness(e) {
-      // 在实际应用中，这里可以调用设备API调节屏幕亮度
-      console.log('调整亮度:', e.detail.value)
+    showMenu() {
+      // 显示/隐藏顶部和底部栏
+      this.showHeader = !this.showHeader;
+      this.showFooter = !this.showFooter;
+    },
+    
+    showCatalog() {
+      this.showCatalogPanel = true;
+    },
+    
+    showFontSettings() {
+      this.showSettings = true;
     },
     
-    // 其他方法保持不变...
+    toggleNightMode() {
+      this.nightMode = !this.nightMode;
+      // 切换夜间模式样式
+    },
+    
+    setAdStrategy() {
+      // 设置广告显示策略，如每阅读三章显示一次广告
+      const readChapters = uni.getStorageSync('readChapters') || 0;
+      this.showAd = readChapters > 0 && readChapters % 3 === 0;
+    },
+    
+    downloadChapter() {
+      // 下载本章内容供离线阅读
+    }
   }
 }
 </script>
 
-<style scoped>
+<style>
 .reader-container {
   position: relative;
   height: 100vh;
-  padding: 20rpx;
-  box-sizing: border-box;
-  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f0e1; /* 羊皮纸色背景 */
 }
 
 .reader-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+  height: 44px;
+  padding: 0 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx 30rpx;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.8);
   color: white;
-  z-index: 100;
-}
-
-.novel-title {
-  font-size: 32rpx;
-  max-width: 60%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .reader-content {
-  height: calc(100vh - 200rpx);
-  padding-top: 80rpx;
-  padding-bottom: 120rpx;
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  line-height: 1.8;
+  font-size: 18px;
+  color: #333;
 }
 
 .chapter-title {
-  font-size: 40rpx;
-  font-weight: bold;
   text-align: center;
-  margin-bottom: 40rpx;
-  color: #2a5caa;
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .content-text {
-  font-size: 32rpx;
+  text-indent: 2em;
   line-height: 1.8;
-  white-space: pre-line;
-}
-
-.chapter-end {
-  text-align: center;
-  margin-top: 40rpx;
-  padding: 20rpx;
-  border-top: 1rpx solid #eee;
-}
-
-.next-chapter-btn {
-  background-color: #2a5caa;
-  color: white;
-  margin-top: 20rpx;
-  border-radius: 10rpx;
 }
 
 .reader-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(255, 255, 255, 0.95);
-  padding: 20rpx;
-  border-top: 1rpx solid #eee;
-  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
-}
-
-.progress {
-  display: flex;
-  justify-content: space-between;
-  font-size: 28rpx;
-  color: #666;
-  margin-bottom: 20rpx;
-}
-
-.actions {
-  display: flex;
-  justify-content: space-between;
-}
-
-.action-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: none;
-  border: none;
-  font-size: 24rpx;
-  padding: 10rpx;
-  color: #2a5caa;
-}
-
-.action-btn:disabled {
-  opacity: 0.5;
-}
-
-.drawer-content {
-  padding: 30rpx;
-}
-
-.drawer-title {
-  font-size: 36rpx;
-  font-weight: bold;
-  display: block;
-  margin-bottom: 20rpx;
-  border-bottom: 1rpx solid #eee;
-  padding-bottom: 20rpx;
-}
-
-.chapter-stats {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20rpx;
-  font-size: 24rpx;
-  color: #666;
-}
-
-.chapter-list {
-  height: calc(100vh - 200rpx);
-}
-
-.chapter-item {
+  height: 50px;
+  padding: 0 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx 10rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-  font-size: 28rpx;
-}
-
-.chapter-item.active {
-  color: #2a5caa;
-  font-weight: bold;
-}
-
-.chapter-item.read {
-  color: #666;
-}
-
-.chapter-item.locked {
-  color: #999;
-}
-
-.settings-panel {
-  padding: 30rpx;
-  background: white;
-  border-radius: 20rpx 20rpx 0 0;
-}
-
-.panel-title {
-  font-size: 36rpx;
-  font-weight: bold;
-  display: block;
-  margin-bottom: 30rpx;
-  text-align: center;
-}
-
-.setting-item {
-  margin-bottom: 30rpx;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
 }
 
-.setting-item text {
-  display: block;
-  margin-bottom: 15rpx;
-  font-size: 28rpx;
-  font-weight: bold;
+.reader-ad {
+  height: 90px;
+  margin-bottom: 10px;
 }
 
-.font-size-controls {
+.loading-container, .error-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-}
-
-.size-btn {
-  width: 80rpx;
-  height: 60rpx;
-  background: #f0f0f0;
-  border: none;
-  border-radius: 10rpx;
-  font-size: 28rpx;
-}
-
-.size-value {
-  font-size: 28rpx;
-  font-weight: bold;
+  justify-content: center;
+  padding: 50px 0;
 }
 
-.color-options {
-  display: flex;
-  justify-content: space-between;
+.error-container button {
+  margin-top: 20px;
 }
 
-.color-option {
-  width: 60rpx;
-  height: 60rpx;
-  border-radius: 50%;
-  border: 2rpx solid #eee;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.color-option.active {
-  border-color: #2a5caa;
+/* 夜间模式样式 */
+.night-mode {
+  background-color: #1a1a1a;
+  color: #888;
 }
 
-.close-btn {
-  margin-top: 30rpx;
-  background: #2a5caa;
-  color: white;
-  border-radius: 10rpx;
+.night-mode .reader-content {
+  background-color: #1a1a1a;
+  color: #888;
 }
 </style>

RuoYi-App/router/index.js

@@ -16,9 +16,9 @@ const routes = [
     meta: { title: '小说列表' }
   },
   {
-    path: '/pages/novel/detail',
+    path: '/pages/novel/reader',
     name: 'NovelDetail',
-    component: () => import('@/pages/novel/detail'),
+    component: () => import('@/pages/novel/reader.vue'),
     meta: { title: '小说详情' }
   },
   {