虞江增 2 viikkoa sitten
sitoutus
06d26027ff
100 muutettua tiedostoa jossa 24288 lisäystä ja 0 poistoa
  1. 144 0
      API_CONFIG.md
  2. 17 0
      App.vue
  3. 0 0
      README.md
  4. 20 0
      index.html
  5. 22 0
      main.js
  6. 72 0
      manifest.json
  7. 287 0
      pages.json
  8. 206 0
      pages/about/about.vue
  9. 280 0
      pages/audio-novel/audio-novel.vue
  10. 205 0
      pages/book-cover/book-cover.vue
  11. 834 0
      pages/book-detail/book-detail.vue
  12. 480 0
      pages/bookshelf/bookshelf.vue
  13. 282 0
      pages/browsing-history/browsing-history.vue
  14. 333 0
      pages/category/category.vue
  15. 436 0
      pages/edit-profile/edit-profile.vue
  16. 453 0
      pages/feedback/feedback.vue
  17. 348 0
      pages/hot-books/hot-books.vue
  18. 842 0
      pages/index/index.vue
  19. 748 0
      pages/listen-detail/listen-detail.vue
  20. 645 0
      pages/listen/listen.vue
  21. 424 0
      pages/login/login.vue
  22. 309 0
      pages/messages/messages.vue
  23. 464 0
      pages/more-books/more-books.vue
  24. 321 0
      pages/more-listen-books/more-listen-books.vue
  25. 348 0
      pages/new-books/new-books.vue
  26. 235 0
      pages/notes/notes.vue
  27. 377 0
      pages/payment/payment.vue
  28. 566 0
      pages/player/player.vue
  29. 280 0
      pages/portable-listen/portable-listen.vue
  30. 329 0
      pages/profile/profile.vue
  31. 524 0
      pages/ranking/ranking.vue
  32. 1213 0
      pages/reader/reader.vue
  33. 441 0
      pages/reading-rank/reading-rank.vue
  34. 437 0
      pages/register/register.vue
  35. 702 0
      pages/search/search.vue
  36. 366 0
      pages/settings/settings.vue
  37. 153 0
      pages/splash/splash.vue
  38. 117 0
      pages/text-edit/text-edit.vue
  39. 419 0
      pages/vip-books/vip-books.vue
  40. 258 0
      pages/vip-records/vip-records.vue
  41. 317 0
      pages/vip/vip.vue
  42. 346 0
      pages/write-review/write-review.vue
  43. BIN
      static/logo.png
  44. 80 0
      static/tabbar/README.md
  45. 210 0
      static/tabbar/图标快速生成指南.md
  46. 130 0
      static/tabbar/图标说明.md
  47. 13 0
      uni.promisify.adaptor.js
  48. 76 0
      uni.scss
  49. 8 0
      unpackage/dist/cache/.vite/deps/_metadata.json
  50. 3 0
      unpackage/dist/cache/.vite/deps/package.json
  51. 1 0
      unpackage/dist/dev/.sourcemap/mp-weixin/app.js.map
  52. 1 0
      unpackage/dist/dev/.sourcemap/mp-weixin/common/assets.js.map
  53. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/common/vendor.js.map
  54. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/about/about.js.map
  55. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/audio-novel/audio-novel.js.map
  56. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/book-cover/book-cover.js.map
  57. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/book-detail/book-detail.js.map
  58. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/bookshelf/bookshelf.js.map
  59. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/browsing-history/browsing-history.js.map
  60. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/category/category.js.map
  61. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/edit-profile/edit-profile.js.map
  62. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/feedback/feedback.js.map
  63. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/hot-books/hot-books.js.map
  64. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/hot-listen/hot-listen.js.map
  65. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/index.js.map
  66. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/listen-detail/listen-detail.js.map
  67. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/listen/listen.js.map
  68. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/login/login.js.map
  69. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/messages/messages.js.map
  70. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/more-books/more-books.js.map
  71. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/more-listen-books/more-listen-books.js.map
  72. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/new-books/new-books.js.map
  73. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/notes/notes.js.map
  74. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/payment/payment.js.map
  75. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/player/player.js.map
  76. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/portable-listen/portable-listen.js.map
  77. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/profile/profile.js.map
  78. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/ranking/ranking.js.map
  79. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/reader/reader.js.map
  80. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/reading-rank/reading-rank.js.map
  81. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/register/register.js.map
  82. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/search/search.js.map
  83. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/settings/settings.js.map
  84. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/splash/splash.js.map
  85. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/text-edit/text-edit.js.map
  86. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/vip-books/vip-books.js.map
  87. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/vip-records/vip-records.js.map
  88. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/vip/vip.js.map
  89. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/pages/write-review/write-review.js.map
  90. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/utils/api.js.map
  91. 0 0
      unpackage/dist/dev/.sourcemap/mp-weixin/utils/config.js.map
  92. 3 0
      unpackage/dist/dev/mp-weixin/.vscode/settings.json
  93. 60 0
      unpackage/dist/dev/mp-weixin/app.js
  94. 71 0
      unpackage/dist/dev/mp-weixin/app.json
  95. 3 0
      unpackage/dist/dev/mp-weixin/app.wxss
  96. 7875 0
      unpackage/dist/dev/mp-weixin/common/vendor.js
  97. 31 0
      unpackage/dist/dev/mp-weixin/pages/about/about.js
  98. 5 0
      unpackage/dist/dev/mp-weixin/pages/about/about.json
  99. 1 0
      unpackage/dist/dev/mp-weixin/pages/about/about.wxml
  100. 117 0
      unpackage/dist/dev/mp-weixin/pages/about/about.wxss

+ 144 - 0
API_CONFIG.md

@@ -0,0 +1,144 @@
+# 前端与后端API连接配置说明
+
+## 后端API地址配置
+
+### 开发环境
+在 `books/utils/api.js` 文件中,修改 `BASE_URL` 变量:
+
+```javascript
+const BASE_URL = 'http://localhost:8080/api'
+```
+
+### 生产环境
+如果部署到服务器,修改为实际的后端地址:
+
+```javascript
+const BASE_URL = 'http://your-server.com:8080/api'
+```
+
+## 已实现的接口
+
+### 1. 用户登录
+- **接口地址**: `POST /api/user/login`
+- **请求参数**:
+  ```json
+  {
+    "username": "zhangsan",
+    "password": "123456"
+  }
+  ```
+- **响应数据**:
+  ```json
+  {
+    "code": 200,
+    "message": "登录成功",
+    "data": {
+      "user": {
+        "id": 1,
+        "username": "zhangsan",
+        "nickname": "张三",
+        "avatar": "...",
+        "isVip": false
+      },
+      "token": "mock_token_1"
+    }
+  }
+  ```
+
+### 2. 用户注册
+- **接口地址**: `POST /api/user/register`
+- 使用方式: `import { register } from '@/utils/api.js'`
+
+### 3. 书籍相关接口
+- 分页查询: `getBooks(params)`
+- 获取详情: `getBookById(id)`
+- 创建书籍: `createBook(data)`
+- 更新书籍: `updateBook(id, data)`
+- 删除书籍: `deleteBook(id)`
+
+## 测试账号
+
+根据数据库中的数据,可以使用以下账号登录:
+
+1. **用户名**: `zhangsan` **密码**: `123456`
+2. **用户名**: `lisi` **密码**: `123456`
+3. **用户名**: `wangwu` **密码**: `123456`
+
+## 使用说明
+
+### 1. 启动后端服务
+
+```bash
+cd book
+mvn spring-boot:run
+```
+
+后端服务将运行在 `http://localhost:8080`
+
+### 2. 配置前端API地址
+
+编辑 `books/utils/api.js`,确保 `BASE_URL` 指向正确的后端地址。
+
+### 3. 测试登录
+
+1. 打开前端登录页面
+2. 输入用户名和密码(如:zhangsan / 123456)
+3. 点击登录按钮
+4. 如果后端服务正常运行,应该能够成功登录
+
+## 注意事项
+
+1. **跨域问题**: 后端已配置 `@CrossOrigin(origins = "*")`,允许跨域请求
+
+2. **网络请求**: 如果在小程序中使用,需要在 `manifest.json` 中配置网络请求白名单
+
+3. **错误处理**: 前端已实现统一的错误处理,网络错误会显示友好的提示信息
+
+4. **数据存储**: 登录成功后,用户信息会保存到本地存储中,包括:
+   - `userInfo`: 用户详细信息
+   - `isLogin`: 登录状态标识
+
+## 常见问题
+
+### 1. 登录失败:网络请求失败
+- 检查后端服务是否启动
+- 检查 `BASE_URL` 配置是否正确
+- 检查网络连接
+
+### 2. 登录失败:用户名或密码错误
+- 确认数据库中有对应的用户数据
+- 确认密码是否正确(数据库中的密码是MD5加密的)
+
+### 3. 跨域问题
+- 确保后端已配置跨域支持
+- 检查后端是否正常运行在 `http://localhost:8080`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ 17 - 0
App.vue

@@ -0,0 +1,17 @@
+<script>
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style>
+	/*每个页面公共css */
+</style>

+ 0 - 0
README.md


+ 20 - 0
index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

+ 22 - 0
main.js

@@ -0,0 +1,22 @@
+import App from './App'
+
+// #ifndef VUE3
+import Vue from 'vue'
+import './uni.promisify.adaptor'
+Vue.config.productionTip = false
+App.mpType = 'app'
+const app = new Vue({
+  ...App
+})
+app.$mount()
+// #endif
+
+// #ifdef VUE3
+import { createSSRApp } from 'vue'
+export function createApp() {
+  const app = createSSRApp(App)
+  return {
+    app
+  }
+}
+// #endif

+ 72 - 0
manifest.json

@@ -0,0 +1,72 @@
+{
+    "name" : "books",
+    "appid" : "",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "3"
+}

+ 287 - 0
pages.json

@@ -0,0 +1,287 @@
+{
+	"pages": [
+		{
+			"path": "pages/splash/splash",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/register/register",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "云阅读",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/listen/listen",
+			"style": {
+				"navigationBarTitleText": "听书",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/bookshelf/bookshelf",
+			"style": {
+				"navigationBarTitleText": "书架",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/profile/profile",
+			"style": {
+				"navigationBarTitleText": "我的",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/category/category",
+			"style": {
+				"navigationBarTitleText": "分类",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/book-detail/book-detail",
+			"style": {
+				"navigationBarTitleText": "书籍详情",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/ranking/ranking",
+			"style": {
+				"navigationBarTitleText": "排行榜",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/hot-books/hot-books",
+			"style": {
+				"navigationBarTitleText": "热门书籍",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/new-books/new-books",
+			"style": {
+				"navigationBarTitleText": "新书榜",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/vip-books/vip-books",
+			"style": {
+				"navigationBarTitleText": "VIP书籍",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/more-books/more-books",
+			"style": {
+				"navigationBarTitleText": "更多推荐",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/search/search",
+			"style": {
+				"navigationBarTitleText": "搜索",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/listen-detail/listen-detail",
+			"style": {
+				"navigationBarTitleText": "听书详情",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/hot-listen/hot-listen",
+			"style": {
+				"navigationBarTitleText": "热门听书",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/audio-novel/audio-novel",
+			"style": {
+				"navigationBarTitleText": "有声小说",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/portable-listen/portable-listen",
+			"style": {
+				"navigationBarTitleText": "随身听",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/browsing-history/browsing-history",
+			"style": {
+				"navigationBarTitleText": "浏览记录",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/reading-rank/reading-rank",
+			"style": {
+				"navigationBarTitleText": "阅读排行",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/edit-profile/edit-profile",
+			"style": {
+				"navigationBarTitleText": "编辑资料",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/text-edit/text-edit",
+			"style": {
+				"navigationBarTitleText": "编辑文本",
+				"navigationStyle": "default"
+			}
+		},
+		{
+			"path": "pages/book-cover/book-cover",
+			"style": {
+				"navigationBarTitleText": "封面",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/reader/reader",
+			"style": {
+				"navigationBarTitleText": "阅读",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/player/player",
+			"style": {
+				"navigationBarTitleText": "播放",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/more-listen-books/more-listen-books",
+			"style": {
+				"navigationBarTitleText": "更多听书",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/messages/messages",
+			"style": {
+				"navigationBarTitleText": "消息",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/feedback/feedback",
+			"style": {
+				"navigationBarTitleText": "意见反馈",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/vip-records/vip-records",
+			"style": {
+				"navigationBarTitleText": "开通VIP记录",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/notes/notes",
+			"style": {
+				"navigationBarTitleText": "笔记",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/settings/settings",
+			"style": {
+				"navigationBarTitleText": "设置",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/vip/vip",
+			"style": {
+				"navigationBarTitleText": "VIP会员",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/payment/payment",
+			"style": {
+				"navigationBarTitleText": "支付",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/about/about",
+			"style": {
+				"navigationBarTitleText": "关于我们",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/write-review/write-review",
+			"style": {
+				"navigationBarTitleText": "写书评",
+				"navigationStyle": "custom"
+			}
+		}
+],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "云阅读",
+		"navigationBarBackgroundColor": "#FFFFFF",
+		"backgroundColor": "#FFFFFF"
+	},
+	"tabBar": {
+		"color": "#999999",
+		"selectedColor": "#4FC3F7",
+		"borderStyle": "black",
+		"backgroundColor": "#FFFFFF",
+		"list": [
+			{
+				"pagePath": "pages/index/index",
+				"text": "电子书"
+			},
+			{
+				"pagePath": "pages/listen/listen",
+				"text": "听书"
+			},
+			{
+				"pagePath": "pages/bookshelf/bookshelf",
+				"text": "书架"
+			},
+			{
+				"pagePath": "pages/profile/profile",
+				"text": "我的"
+			}
+		]
+	},
+	"uniIdRouter": {}
+}

+ 206 - 0
pages/about/about.vue

@@ -0,0 +1,206 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">关于我们虞</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 应用信息 -->
+			<view class="app-info-section">
+				<view class="app-icon-wrapper">
+					<view class="app-icon">
+						<text class="app-icon-text">📖</text>
+					</view>
+				</view>
+				<text class="app-name">云阅读</text>
+				<text class="app-version">version 1.0.0</text>
+			</view>
+			
+			<!-- 联系信息 -->
+			<view class="contact-section">
+				<text class="contact-item">客服微信: 1574250342</text>
+				<text class="contact-item">在线时间: 8:30am-5:30pm</text>
+			</view>
+			
+			<!-- 法律链接 -->
+			<view class="legal-section">
+				<text class="legal-link" @click="goToUserAgreement">用户协议</text>
+				<text class="legal-separator">|</text>
+				<text class="legal-link" @click="goToPrivacyPolicy">隐私政策</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			goToUserAgreement() {
+				uni.showToast({
+					title: '用户协议',
+					icon: 'none'
+				})
+				// 可以跳转到用户协议页面
+				// uni.navigateTo({
+				// 	url: '/pages/user-agreement/user-agreement'
+				// })
+			},
+			goToPrivacyPolicy() {
+				uni.showToast({
+					title: '隐私政策',
+					icon: 'none'
+				})
+				// 可以跳转到隐私政策页面
+				// uni.navigateTo({
+				// 	url: '/pages/privacy-policy/privacy-policy'
+				// })
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		min-height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		padding-top: 30px;
+		box-sizing: border-box;
+		flex-direction: column;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding-bottom: calc(env(safe-area-inset-bottom));
+		background-color: #FFFFFF;
+		box-sizing: border-box;
+	}
+	
+	.app-info-section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 80rpx 30rpx 60rpx;
+	}
+	
+	.app-icon-wrapper {
+		margin-bottom: 30rpx;
+	}
+	
+	.app-icon {
+		width: 160rpx;
+		height: 160rpx;
+		background-color: #4FC3F7;
+		border-radius: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 4rpx 12rpx rgba(79, 195, 247, 0.3);
+	}
+	
+	.app-icon-text {
+		font-size: 80rpx;
+	}
+	
+	.app-name {
+		font-size: 40rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 15rpx;
+	}
+	
+	.app-version {
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	.contact-section {
+		padding: 40rpx 30rpx;
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+	}
+	
+	.contact-item {
+		font-size: 28rpx;
+		color: #999999;
+		line-height: 1.6;
+	}
+	
+	.legal-section {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 60rpx 30rpx;
+		gap: 20rpx;
+	}
+	
+	.legal-link {
+		font-size: 28rpx;
+		color: #999999;
+		text-decoration: underline;
+	}
+	
+	.legal-separator {
+		font-size: 28rpx;
+		color: #CCCCCC;
+	}
+</style>
+
+

+ 280 - 0
pages/audio-novel/audio-novel.vue

@@ -0,0 +1,280 @@
+<template>
+    <view class="container">
+        <!-- 顶部导航栏 -->
+        <view class="header">
+            <view class="back-btn" @click="goBack">
+                <text class="back-icon">←</text>
+            </view>
+            <text class="header-title">有声小说</text>
+            <view class="search-btn" @click="goToSearch">
+                <text class="search-icon">🔍</text>
+            </view>
+        </view>
+        
+        <!-- 小说列表 -->
+        <scroll-view class="audio-list-container" scroll-y>
+            <view class="loading" v-if="isLoading">
+                <text>加载中...</text>
+            </view>
+            
+            <view class="empty" v-else-if="audioList.length === 0">
+                <text>暂无有声小说</text>
+            </view>
+            
+            <view 
+                class="audio-item" 
+                v-for="(audio, index) in audioList" 
+                :key="audio.id || index"
+                @click="goToAudioDetail(audio)"
+            >
+                <view class="cover-wrapper">
+                    <image 
+                        class="audio-cover" 
+                        :src="audio.cover" 
+                        mode="aspectFill"
+                        :lazy-load="true"
+                        @error="handleImageError(index)"
+                    ></image>
+                    <view class="play-icon-overlay">
+                        <text class="play-icon">▶</text>
+                    </view>
+                </view>
+                <view class="audio-info">
+                    <text class="audio-title">{{ audio.title }}</text>
+                    <text class="audio-desc">{{ audio.desc }}</text>
+                    <text class="audio-author">{{ audio.author }}</text>
+                </view>
+                <button class="play-btn" @click.stop="handlePlay(audio)">
+                    <text class="play-btn-text">播放</text>
+                </button>
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+    import { getRecommendAudiobooks } from '../../utils/api.js'
+    
+    export default {
+        data() {
+            return {
+                audioList: [],
+                isLoading: false
+            }
+        },
+        onLoad() {
+            this.loadAudioList()
+        },
+        methods: {
+            async loadAudioList() {
+                this.isLoading = true
+                try {
+                    const res = await getRecommendAudiobooks(50)
+                    if (res && res.code === 200 && Array.isArray(res.data)) {
+                        this.audioList = res.data.map(item => ({
+                            id: item.id,
+                            title: item.title,
+                            author: item.author || '',
+                            desc: item.brief || item.desc || '',
+                            cover: item.image || item.cover || 'https://picsum.photos/seed/audio-novel/200/300'
+                        }))
+                    } else {
+                        this.audioList = []
+                    }
+                } catch (error) {
+                    console.error('加载有声小说失败:', error)
+                    this.audioList = []
+                    uni.showToast({
+                        title: '加载失败',
+                        icon: 'none'
+                    })
+                } finally {
+                    this.isLoading = false
+                }
+            },
+            goBack() {
+                uni.navigateBack({
+                    delta: 1
+                })
+            },
+            goToSearch() {
+                uni.navigateTo({
+                    url: '/pages/search/search'
+                })
+            },
+            goToAudioDetail(audio) {
+                if (!audio || !audio.id) {
+                    uni.showToast({
+                        title: '听书信息不完整',
+                        icon: 'none'
+                    })
+                    return
+                }
+                uni.navigateTo({
+                    url: `/pages/listen-detail/listen-detail?audiobookId=${audio.id}`
+                })
+            },
+            handlePlay(audio) {
+                if (!audio || !audio.id) {
+                    uni.showToast({
+                        title: '听书信息不完整',
+                        icon: 'none'
+                    })
+                    return
+                }
+                this.goToAudioDetail(audio)
+            },
+            handleImageError(index) {
+                if (this.audioList[index]) {
+                    this.audioList[index].cover = `https://picsum.photos/seed/audio-novel-fallback${index}/200/300`
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .container {
+        width: 100%;
+        height: 100vh;
+        background-color: #FFFFFF;
+        display: flex;
+        flex-direction: column;
+        padding-top: 30px;
+        box-sizing: border-box;
+    }
+    
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20rpx 30rpx;
+        background-color: #FFFFFF;
+        border-bottom: 1rpx solid #F0F0F0;
+    }
+    
+    .back-btn, .search-btn {
+        width: 60rpx;
+        height: 60rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .back-icon {
+        font-size: 40rpx;
+        color: #333333;
+        font-weight: bold;
+    }
+    
+    .header-title {
+        font-size: 34rpx;
+        font-weight: bold;
+        color: #333333;
+    }
+    
+    .search-icon {
+        font-size: 36rpx;
+        color: #333333;
+    }
+    
+    .audio-list-container {
+        flex: 1;
+        width: 100%;
+    }
+    
+    .loading, .empty {
+        text-align: center;
+        padding: 60rpx 0;
+        color: #999999;
+        font-size: 30rpx;
+    }
+    
+    .audio-item {
+        display: flex;
+        align-items: center;
+        padding: 30rpx 30rpx;
+        border-bottom: 1rpx solid #F0F0F0;
+    }
+    
+    .cover-wrapper {
+        position: relative;
+        width: 160rpx;
+        height: 220rpx;
+        margin-right: 30rpx;
+        flex-shrink: 0;
+    }
+    
+    .audio-cover {
+        width: 100%;
+        height: 100%;
+        border-radius: 12rpx;
+        object-fit: cover;
+        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.12);
+        background-color: #F5F5F5;
+    }
+    
+    .play-icon-overlay {
+        position: absolute;
+        bottom: 10rpx;
+        right: 10rpx;
+        width: 48rpx;
+        height: 48rpx;
+        border-radius: 50%;
+        background: rgba(0,0,0,0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .play-icon {
+        color: #FFFFFF;
+        font-size: 26rpx;
+        margin-left: 4rpx;
+    }
+    
+    .audio-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 10rpx;
+    }
+    
+    .audio-title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333333;
+    }
+    
+    .audio-desc {
+        font-size: 26rpx;
+        color: #666666;
+        line-height: 1.6;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+    
+    .audio-author {
+        font-size: 24rpx;
+        color: #999999;
+    }
+    
+    .play-btn {
+        background-color: #4CAF50;
+        color: #FFFFFF;
+        border: none;
+        border-radius: 32rpx;
+        padding: 12rpx 26rpx;
+        font-size: 26rpx;
+    }
+    
+    .play-btn::after {
+        border: none;
+    }
+    
+    .play-btn-text {
+        color: #FFFFFF;
+    }
+</style>

+ 205 - 0
pages/book-cover/book-cover.vue

@@ -0,0 +1,205 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">封面</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<!-- 书籍封面 -->
+		<view class="cover-section">
+			<image class="book-cover-image" :src="bookInfo.image" mode="aspectFit" :lazy-load="true"></image>
+		</view>
+		
+		<!-- 书籍信息 -->
+		<view class="book-info-section">
+			<text class="book-title">{{ bookInfo.title }}</text>
+			<text class="book-author">{{ bookInfo.author }}</text>
+		</view>
+		
+		<!-- 开始阅读按钮 -->
+		<view class="start-reading-section">
+			<button class="start-reading-btn" @click="startReading">
+				<text class="btn-text">左滑开始阅读</text>
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				bookInfo: {
+					id: 1,
+					title: '西游记',
+					author: '(明) 吴承恩',
+					image: 'https://picsum.photos/seed/xiyouji/400/600'
+				}
+			}
+		},
+		onLoad(options) {
+			// 从路由参数获取书籍信息
+			if (options.bookId) {
+				this.bookInfo.id = parseInt(options.bookId)
+			}
+			if (options.title) {
+				this.bookInfo.title = decodeURIComponent(options.title)
+			}
+			if (options.image) {
+				this.bookInfo.image = decodeURIComponent(options.image)
+			}
+			if (options.author) {
+				this.bookInfo.author = decodeURIComponent(options.author)
+			}
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
+			startReading() {
+				// 开始阅读,跳转到阅读页面
+				uni.showToast({
+					title: '开始阅读',
+					icon: 'success'
+				})
+				// 这里可以跳转到阅读页面
+				// uni.navigateTo({
+				// 	url: `/pages/reader/reader?bookId=${this.bookInfo.id}&title=${encodeURIComponent(this.bookInfo.title)}`
+				// })
+				
+				// 或者直接开始阅读第一页
+				setTimeout(() => {
+					uni.navigateTo({
+						url: `/pages/reader/reader?bookId=${this.bookInfo.id}&title=${encodeURIComponent(this.bookInfo.title)}&image=${encodeURIComponent(this.bookInfo.image)}&author=${encodeURIComponent(this.bookInfo.author)}`
+					})
+				}, 500)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		padding: 40rpx 30rpx;
+		padding-top: calc(30px + 40rpx);
+		box-sizing: border-box;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 0;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.cover-section {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		padding: 40rpx 0;
+	}
+	
+	.book-cover-image {
+		width: 500rpx;
+		height: 700rpx;
+		border-radius: 8rpx;
+		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2);
+		background-color: #F5F5F5;
+	}
+	
+	.book-info-section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 60rpx;
+	}
+	
+	.book-title {
+		font-size: 44rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 20rpx;
+		text-align: center;
+	}
+	
+	.book-author {
+		font-size: 28rpx;
+		color: #666666;
+		text-align: center;
+	}
+	
+	.start-reading-section {
+		width: 100%;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	
+	.start-reading-btn {
+		width: 100%;
+		height: 88rpx;
+		background-color: #E0E0E0;
+		color: #333333;
+		font-size: 32rpx;
+		border: none;
+		border-radius: 44rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.start-reading-btn::after {
+		border: none;
+	}
+	
+	.btn-text {
+		color: #333333;
+	}
+</style>
+

+ 834 - 0
pages/book-detail/book-detail.vue

@@ -0,0 +1,834 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">{{ bookInfo.title }}</text>
+			<view class="share-btn" @click="handleShare">
+				<text class="share-icon">↗</text>
+			</view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 书籍头部信息 -->
+			<view class="book-header" v-if="!isLoading">
+				<view class="book-cover-wrapper">
+					<image class="book-cover" :src="bookInfo.image || bookInfo.cover" mode="aspectFill"></image>
+				</view>
+				<view class="book-info">
+					<text class="book-title">{{ bookInfo.title }}</text>
+					<text class="book-brief" v-if="bookInfo.brief || bookInfo.desc">{{ bookInfo.brief || bookInfo.desc }}</text>
+					<text class="book-author" v-if="bookInfo.author">{{ bookInfo.author }}</text>
+					<text class="book-price" v-if="bookInfo.isFree">免费</text>
+					<text class="book-price-paid" v-else-if="bookInfo.price">¥{{ bookInfo.price }}</text>
+				</view>
+			</view>
+			
+			<!-- 加载中 -->
+			<view class="loading-section" v-if="isLoading">
+				<text class="loading-text">加载中...</text>
+			</view>
+			
+			<!-- 简介 -->
+			<view class="section" v-if="bookInfo.introduction || bookInfo.desc || bookInfo.brief">
+				<text class="section-title">简介</text>
+				<text class="section-content">{{ bookInfo.introduction || bookInfo.desc || bookInfo.brief }}</text>
+			</view>
+			
+			<!-- 书评 -->
+			<view class="section">
+				<view class="section-header">
+					<text class="section-title">书评</text>
+					<text class="write-review-btn" @click="handleWriteReview">写书评</text>
+				</view>
+				<view class="review-list">
+					<view class="review-item" v-for="(review, index) in reviews" :key="index">
+						<view class="review-header">
+							<image class="review-avatar" :src="review.avatar" mode="aspectFill"></image>
+							<view class="review-user-info">
+								<text class="review-name">{{ review.name }}</text>
+								<text class="review-tag" v-if="review.isRecommended">推荐</text>
+							</view>
+							<text class="review-date">{{ review.date }}</text>
+							<view class="review-likes" @click="toggleLike(review, index)">
+								<text class="like-icon">{{ review.isLiked ? '❤️' : '🤍' }}</text>
+								<text class="like-count">{{ review.likes }}</text>
+							</view>
+						</view>
+						<text class="review-content">{{ review.content }}</text>
+					</view>
+				</view>
+				<view class="view-all-reviews" @click="viewAllReviews">
+					<text class="view-all-text">查看全部书评</text>
+				</view>
+			</view>
+			
+			<!-- 更多推荐 -->
+			<view class="section">
+				<view class="section-header">
+					<text class="section-title">更多推荐</text>
+					<text class="section-more" @click="viewMoreRecommend">更多 ></text>
+				</view>
+				<view class="recommend-grid">
+					<view class="recommend-item" v-for="(book, index) in recommendBooks" :key="index" @click="goToBookDetail(book)">
+						<image class="recommend-cover" :src="book.image" mode="aspectFill" :lazy-load="true"></image>
+						<text class="recommend-title">{{ book.title }}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		
+		<!-- 底部操作栏 -->
+		<view class="bottom-bar">
+			<button 
+				class="add-to-shelf-btn" 
+				:class="{ 'in-shelf': isInShelf }"
+				@click="handleAddToShelf"
+				:disabled="isLoading"
+			>
+				{{ isInShelf ? '已在书架' : '加入书架' }}
+			</button>
+			<button class="read-btn" @click="handleRead">阅读</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { addToBookshelf, checkInBookshelf, getBookById, getMoreRecommend, recordBrowsingHistory, getComments, toggleCommentLike } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				bookInfo: {
+					id: null,
+					title: '',
+					image: '',
+					cover: '',
+					brief: '',
+					desc: '',
+					author: '',
+					isFree: false,
+					price: 0,
+					introduction: ''
+				},
+				isLoading: false,
+				userInfo: null,
+				isInShelf: false,
+				reviews: [],
+				recommendBooks: []
+			}
+		},
+		onLoad(options) {
+			// 获取用户信息
+			try {
+				const userInfo = uni.getStorageSync('userInfo')
+				if (userInfo && userInfo.id) {
+					this.userInfo = userInfo
+				}
+			} catch (e) {
+				console.error('获取用户信息失败', e)
+			}
+			
+			// 从路由参数获取bookId
+			if (options.bookId) {
+				this.bookInfo.id = parseInt(options.bookId)
+				// 加载书籍详情
+				this.loadBookDetail(this.bookInfo.id)
+			} else if (options.title) {
+				// 兼容旧的参数方式,但优先从数据库加载
+				this.bookInfo.title = decodeURIComponent(options.title)
+				if (options.image) {
+					this.bookInfo.image = decodeURIComponent(options.image)
+				}
+				if (options.author) {
+					this.bookInfo.author = decodeURIComponent(options.author)
+				}
+				// 如果有bookId,从数据库加载
+				if (options.bookId) {
+					this.bookInfo.id = parseInt(options.bookId)
+					this.loadBookDetail(this.bookInfo.id)
+				}
+			}
+		},
+		onShow() {
+			// 页面显示时重新获取用户信息
+			try {
+				const userInfo = uni.getStorageSync('userInfo')
+				if (userInfo && userInfo.id) {
+					this.userInfo = userInfo
+					// 重新检查书架状态
+					if (this.bookInfo.id) {
+						this.checkBookshelfStatus(userInfo.id, this.bookInfo.id)
+						// 重新加载评论(更新点赞状态)
+						this.loadComments(this.bookInfo.id)
+					}
+				}
+			} catch (e) {
+				console.error('获取用户信息失败', e)
+			}
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			handleShare() {
+				uni.showToast({
+					title: '分享功能',
+					icon: 'none'
+				})
+			},
+			async loadBookDetail(bookId) {
+				if (!bookId) {
+					uni.showToast({
+						title: '书籍ID不能为空',
+						icon: 'none'
+					})
+					return
+				}
+				
+				try {
+					this.isLoading = true
+					uni.showLoading({
+						title: '加载中...',
+						mask: false
+					})
+					
+					// 传递userId参数用于VIP权限检查
+					const userId = this.userInfo && this.userInfo.id ? this.userInfo.id : null
+					const res = await getBookById(bookId, userId)
+					
+					if (res && res.code === 200 && res.data) {
+						const book = res.data
+						// 更新书籍信息
+						this.bookInfo = {
+							id: book.id,
+							title: book.title || '',
+							image: book.image || book.cover || '',
+							cover: book.cover || book.image || '',
+							brief: book.brief || '',
+							desc: book.desc || book.brief || '',
+							author: book.author || '',
+							isFree: book.isFree || false,
+							price: book.price || 0,
+							introduction: book.introduction || book.desc || book.brief || ''
+						}
+						
+						// 如果简介为空,使用描述作为简介
+						if (!this.bookInfo.brief && this.bookInfo.desc) {
+							this.bookInfo.brief = this.bookInfo.desc
+						}
+						
+						// 如果详细介绍为空,使用描述或简介作为详细介绍
+						if (!this.bookInfo.introduction) {
+							this.bookInfo.introduction = this.bookInfo.desc || this.bookInfo.brief || ''
+						}
+						
+						// 检查书架状态
+						if (this.userInfo && this.userInfo.id) {
+							this.checkBookshelfStatus(this.userInfo.id, bookId)
+						}
+						
+					// 加载推荐书籍
+					this.loadRecommendBooks()
+					
+					// 记录浏览历史
+					if (this.userInfo && this.userInfo.id) {
+						this.recordBrowsingHistory(this.userInfo.id, bookId)
+					}
+					
+					// 加载评论列表
+					this.loadComments(bookId)
+				} else {
+						uni.showToast({
+							title: res.message || '加载失败',
+							icon: 'none'
+						})
+					}
+				} catch (e) {
+					console.error('加载书籍详情失败:', e)
+					uni.showToast({
+						title: e.message || '加载失败,请重试',
+						icon: 'none'
+					})
+				} finally {
+					this.isLoading = false
+					uni.hideLoading()
+				}
+			},
+			async loadRecommendBooks() {
+				try {
+					const res = await getMoreRecommend(6)
+					if (res && res.code === 200 && res.data && Array.isArray(res.data)) {
+						// 过滤掉当前书籍
+						this.recommendBooks = res.data
+							.filter(book => book.id !== this.bookInfo.id)
+							.slice(0, 6)
+							.map(book => ({
+								id: book.id,
+								title: book.title || '',
+								image: book.image || book.cover || ''
+							}))
+					}
+				} catch (e) {
+					console.error('加载推荐书籍失败:', e)
+					// 不显示错误提示,因为这是非关键功能
+				}
+			},
+			handleWriteReview() {
+				uni.navigateTo({
+					url: `/pages/write-review/write-review?bookId=${this.bookInfo.id}&title=${encodeURIComponent(this.bookInfo.title)}`
+				})
+			},
+			async toggleLike(review, index) {
+				if (!this.userInfo || !this.userInfo.id) {
+					uni.showToast({
+						title: '请先登录',
+						icon: 'none'
+					})
+					return
+				}
+				
+				try {
+					const res = await toggleCommentLike(this.userInfo.id, review.id)
+					
+					if (res && res.code === 200) {
+						// 更新本地状态
+						this.reviews[index].isLiked = res.data
+						if (res.data) {
+							this.reviews[index].likes++
+						} else {
+							this.reviews[index].likes--
+						}
+					} else {
+						uni.showToast({
+							title: res.message || '操作失败',
+							icon: 'none'
+						})
+					}
+				} catch (e) {
+					console.error('点赞失败', e)
+					uni.showToast({
+						title: '操作失败,请重试',
+						icon: 'none'
+					})
+				}
+			},
+			async loadComments(bookId) {
+				if (!bookId) {
+					return
+				}
+				
+				try {
+					const userId = this.userInfo && this.userInfo.id ? this.userInfo.id : null
+					const res = await getComments(bookId, userId)
+					
+					if (res && res.code === 200 && res.data) {
+						this.reviews = res.data.map(item => ({
+							id: item.id,
+							name: item.name || '匿名用户',
+							avatar: item.avatar || 'https://via.placeholder.com/100x100?text=User',
+							isRecommended: item.isRecommended || false,
+							date: item.date || '',
+							likes: item.likes || 0,
+							isLiked: item.isLiked || false,
+							content: item.content || ''
+						}))
+					}
+				} catch (e) {
+					console.error('加载评论失败', e)
+					// 不显示错误提示,因为评论是非关键功能
+				}
+			},
+			async recordBrowsingHistory(userId, bookId) {
+				if (!userId || !bookId) {
+					return
+				}
+				
+				try {
+					await recordBrowsingHistory(userId, bookId)
+				} catch (e) {
+					console.error('记录浏览历史失败', e)
+					// 不显示错误提示,因为这是后台操作
+				}
+			},
+			viewAllReviews() {
+				uni.showToast({
+					title: '查看全部书评',
+					icon: 'none'
+				})
+			},
+			viewMoreRecommend() {
+				uni.showToast({
+					title: '查看更多推荐',
+					icon: 'none'
+				})
+			},
+			goToBookDetail(book) {
+				if (!book || !book.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/book-detail/book-detail?bookId=${book.id}`
+				})
+			},
+			// 检查书架状态
+			checkBookshelfStatus(userId, bookId) {
+				if (!userId || !bookId) {
+					return
+				}
+				
+				checkInBookshelf(userId, bookId)
+					.then((res) => {
+						if (res.code === 200 && res.data !== undefined) {
+							this.isInShelf = res.data
+						}
+					})
+					.catch((err) => {
+						console.error('检查书架状态失败', err)
+					})
+			},
+			handleAddToShelf() {
+				// 检查用户是否登录
+				if (!this.userInfo || !this.userInfo.id) {
+					uni.showModal({
+						title: '提示',
+						content: '请先登录',
+						showCancel: true,
+						cancelText: '取消',
+						confirmText: '去登录',
+						success: (res) => {
+							if (res.confirm) {
+								uni.navigateTo({
+									url: '/pages/login/login'
+								})
+							}
+						}
+					})
+					return
+				}
+				
+				// 检查是否已在书架中
+				if (this.isInShelf) {
+					uni.showToast({
+						title: '已在书架中',
+						icon: 'none'
+					})
+					return
+				}
+				
+				// 检查书籍ID
+				if (!this.bookInfo.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				
+				// 防止重复提交
+				if (this.isLoading) {
+					return
+				}
+				
+				this.isLoading = true
+				uni.showLoading({
+					title: '加入中...',
+					mask: true
+				})
+				
+				// 调用后端接口
+				addToBookshelf(this.userInfo.id, this.bookInfo.id)
+					.then((res) => {
+						uni.hideLoading()
+						this.isLoading = false
+						
+						if (res.code === 200) {
+							this.isInShelf = true
+							uni.showToast({
+								title: '已加入书架',
+								icon: 'success'
+							})
+						} else {
+							uni.showToast({
+								title: res.message || '加入失败',
+								icon: 'none'
+							})
+						}
+					})
+					.catch((err) => {
+						uni.hideLoading()
+						this.isLoading = false
+						
+						console.error('加入书架失败:', err)
+						uni.showToast({
+							title: err.message || '加入失败,请检查网络连接',
+							icon: 'none',
+							duration: 2000
+						})
+					})
+			},
+			handleRead() {
+				// 跳转到书籍封面页
+				uni.navigateTo({
+					url: `/pages/book-cover/book-cover?bookId=${this.bookInfo.id}&title=${encodeURIComponent(this.bookInfo.title)}&image=${encodeURIComponent(this.bookInfo.image)}&author=${encodeURIComponent(this.bookInfo.author)}`
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E0E0E0;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.share-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.share-icon {
+		font-size: 36rpx;
+		color: #333333;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		padding-bottom: 120rpx;
+	}
+	
+	.loading-section {
+		padding: 100rpx 30rpx;
+		text-align: center;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.book-header {
+		display: flex;
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.book-cover-wrapper {
+		margin-right: 30rpx;
+		flex-shrink: 0;
+	}
+	
+	.book-cover {
+		width: 180rpx;
+		height: 250rpx;
+		border-radius: 8rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
+		background-color: #F5F5F5;
+	}
+	
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+	
+	.book-title {
+		font-size: 40rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 20rpx;
+	}
+	
+	.book-brief {
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.6;
+		margin-bottom: 20rpx;
+	}
+	
+	.book-author {
+		font-size: 26rpx;
+		color: #999999;
+		margin-bottom: 20rpx;
+	}
+	
+	.book-price {
+		font-size: 32rpx;
+		color: #FF5722;
+		font-weight: bold;
+		margin-top: 10rpx;
+	}
+	
+	.book-price-paid {
+		font-size: 32rpx;
+		color: #FF5722;
+		font-weight: bold;
+	}
+	
+	.section {
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.section-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+	}
+	
+	.section-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 20rpx;
+		display: block;
+	}
+	
+	.section-content {
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.8;
+		display: block;
+	}
+	
+	.write-review-btn {
+		font-size: 26rpx;
+		color: #999999;
+		padding: 8rpx 20rpx;
+		background-color: #F5F5F5;
+		border-radius: 30rpx;
+	}
+	
+	.review-list {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.review-item {
+		margin-bottom: 40rpx;
+		padding-bottom: 40rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.review-item:last-child {
+		border-bottom: none;
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+	
+	.review-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20rpx;
+		position: relative;
+	}
+	
+	.review-avatar {
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 50%;
+		margin-right: 20rpx;
+		background-color: #F5F5F5;
+	}
+	
+	.review-user-info {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
+	
+	.review-name {
+		font-size: 28rpx;
+		color: #333333;
+		font-weight: bold;
+		margin-right: 15rpx;
+	}
+	
+	.review-tag {
+		font-size: 20rpx;
+		color: #4CAF50;
+		background-color: #E8F5E9;
+		padding: 4rpx 12rpx;
+		border-radius: 4rpx;
+	}
+	
+	.review-date {
+		font-size: 24rpx;
+		color: #999999;
+		margin-right: 20rpx;
+	}
+	
+	.review-likes {
+		display: flex;
+		align-items: center;
+	}
+	
+	.like-icon {
+		font-size: 28rpx;
+		margin-right: 8rpx;
+	}
+	
+	.like-count {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.review-content {
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.8;
+		display: block;
+	}
+	
+	.view-all-reviews {
+		margin-top: 30rpx;
+		padding: 20rpx;
+		background-color: #F5F5F5;
+		border-radius: 8rpx;
+		text-align: center;
+	}
+	
+	.view-all-text {
+		font-size: 28rpx;
+		color: #333333;
+	}
+	
+	.section-more {
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	.recommend-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	
+	.recommend-item {
+		width: 160rpx;
+		margin-bottom: 30rpx;
+	}
+	
+	.recommend-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-bottom: 15rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.recommend-title {
+		font-size: 24rpx;
+		color: #333333;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.bottom-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-top: 1rpx solid #E0E0E0;
+		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	}
+	
+	.add-to-shelf-btn {
+		flex: 1;
+		height: 88rpx;
+		background-color: #FFFFFF;
+		color: #333333;
+		font-size: 32rpx;
+		border: 1rpx solid #E0E0E0;
+		border-radius: 44rpx;
+		margin-right: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.add-to-shelf-btn.in-shelf {
+		background-color: #F5F5F5;
+		color: #999999;
+		border-color: #E0E0E0;
+	}
+	
+	.add-to-shelf-btn[disabled] {
+		opacity: 0.6;
+	}
+	
+	.read-btn {
+		flex: 1;
+		height: 88rpx;
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+		font-size: 32rpx;
+		border: none;
+		border-radius: 44rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>
+
+

+ 480 - 0
pages/bookshelf/bookshelf.vue

@@ -0,0 +1,480 @@
+<template>
+	<view class="container">
+		<!-- 搜索栏 -->
+		<view class="search-bar">
+			<input class="search-input" placeholder="搜索书架" />
+			<text class="search-icon">🔍</text>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+		<!-- 我的书架 -->
+		<view class="section" v-if="userInfo">
+			<view class="section-header">
+				<text class="section-title">我的书架</text>
+				<text class="book-count">共{{ allItems.length }}本</text>
+			</view>
+			
+			<view class="book-grid" v-if="allItems.length > 0">
+				<view class="book-item" v-for="(item, index) in allItems" :key="item.id || index" @click="goToDetail(item)">
+					<image class="book-cover" :src="item.image" mode="aspectFill" :lazy-load="true"></image>
+					<text class="book-name">{{ item.title }}</text>
+					<text class="book-progress" v-if="item.type === 'book'">{{ item.progress }}%</text>
+					<text class="book-progress" v-else-if="item.type === 'audiobook'">{{ item.progressText || '继续收听' }}</text>
+					<view class="type-badge" v-if="item.type === 'audiobook'">
+						<text class="type-badge-text">听书</text>
+					</view>
+				</view>
+			</view>
+			<view class="empty-state" v-else>
+				<text class="empty-text">书架空空如也,快去添加书籍吧~</text>
+			</view>
+		</view>
+		
+		<!-- 最近阅读/收听 -->
+		<view class="section" v-if="userInfo && recentItems.length > 0">
+			<view class="section-header">
+				<text class="section-title">最近阅读</text>
+			</view>
+			<view class="book-list">
+				<view class="book-list-item" v-for="(item, index) in recentItems" :key="item.id || index" @click="goToDetail(item)">
+					<image class="book-cover-small" :src="item.image" mode="aspectFill" :lazy-load="true"></image>
+					<view class="book-info">
+						<view class="book-title-row">
+							<text class="book-title">{{ item.title }}</text>
+							<text class="type-tag" v-if="item.type === 'audiobook'">听书</text>
+						</view>
+						<text class="book-author">{{ item.author }}</text>
+						<text class="book-progress-text" v-if="item.type === 'book'">阅读进度:{{ item.progress }}%</text>
+						<text class="book-progress-text" v-else-if="item.type === 'audiobook'">{{ item.progressText || '继续收听' }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 未登录提示 -->
+		<view class="empty-state" v-if="!userInfo">
+			<text class="empty-text">请先登录查看书架</text>
+			<button class="login-btn" @click="goToLogin">去登录</button>
+		</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getBookshelfList, getAudiobookBookshelfList } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				books: [],
+				audiobooks: [],
+				allItems: [],
+				recentItems: [],
+				userInfo: null,
+				isLoading: false
+			}
+		},
+		onLoad() {
+			// 获取用户信息
+			this.loadUserInfo()
+		},
+		onShow() {
+			// 页面显示时重新加载数据
+			this.loadUserInfo()
+		},
+		methods: {
+			loadUserInfo() {
+				try {
+					const userInfo = uni.getStorageSync('userInfo')
+					const isLogin = uni.getStorageSync('isLogin')
+					
+					if (userInfo && userInfo.id && isLogin) {
+						this.userInfo = userInfo
+						this.loadBookshelfList()
+					} else {
+						// 未登录,清空数据
+						this.books = []
+						this.audiobooks = []
+						this.allItems = []
+						this.recentItems = []
+						this.userInfo = null
+					}
+				} catch (e) {
+					console.error('获取用户信息失败', e)
+					this.books = []
+					this.audiobooks = []
+					this.allItems = []
+					this.recentItems = []
+					this.userInfo = null
+				}
+			},
+			async loadBookshelfList() {
+				if (!this.userInfo || !this.userInfo.id) {
+					return
+				}
+				
+				this.isLoading = true
+				uni.showLoading({
+					title: '加载中...',
+					mask: false
+				})
+				
+				try {
+					// 同时加载书籍书架和听书书架
+					const [bookRes, audiobookRes] = await Promise.all([
+						getBookshelfList(this.userInfo.id).catch(err => {
+							console.error('获取书籍书架失败:', err)
+							return { code: 200, data: [] }
+						}),
+						getAudiobookBookshelfList(this.userInfo.id).catch(err => {
+							console.error('获取听书书架失败:', err)
+							return { code: 200, data: [] }
+						})
+					])
+					
+					uni.hideLoading()
+					this.isLoading = false
+					
+					// 处理书籍数据
+					if (bookRes.code === 200 && bookRes.data) {
+						this.books = bookRes.data.map((item) => {
+							const book = item.book || {}
+							return {
+								id: book.id || item.bookId,
+								title: book.title || '未知书籍',
+								author: book.author || '',
+								image: book.image || book.cover || 'https://picsum.photos/seed/default/200/300',
+								progress: item.readProgress || 0,
+								type: 'book',
+								lastReadTime: item.lastReadTime,
+								addedAt: item.addedAt
+							}
+						})
+					} else {
+						this.books = []
+					}
+					
+					// 处理听书数据
+					if (audiobookRes.code === 200 && audiobookRes.data) {
+						this.audiobooks = audiobookRes.data.map((item) => {
+							const audiobook = item.audiobook || {}
+							return {
+								id: audiobook.id || item.audiobookId,
+								title: audiobook.title || '未知听书',
+								author: audiobook.author || '',
+								narrator: audiobook.narrator || '',
+								image: audiobook.image || audiobook.cover || 'https://picsum.photos/seed/default/200/300',
+								progress: 0,
+								progressText: item.lastListenedChapterId ? '继续收听' : '开始收听',
+								type: 'audiobook',
+								lastListenedChapterId: item.lastListenedChapterId,
+								lastListenedPosition: item.lastListenedPosition,
+								addedAt: item.addedAt,
+								updatedAt: item.updatedAt
+							}
+						})
+					} else {
+						this.audiobooks = []
+					}
+					
+					// 合并所有项目,按添加时间排序(最新的在前)
+					this.allItems = [...this.books, ...this.audiobooks].sort((a, b) => {
+						const timeA = a.addedAt ? new Date(a.addedAt).getTime() : 0
+						const timeB = b.addedAt ? new Date(b.addedAt).getTime() : 0
+						return timeB - timeA
+					})
+					
+					// 最近阅读/收听(按最后阅读/收听时间排序,取前3本)
+					this.recentItems = [...this.books, ...this.audiobooks]
+						.filter((item) => {
+							if (item.type === 'book') {
+								return item.lastReadTime != null
+							} else if (item.type === 'audiobook') {
+								return item.lastListenedChapterId != null || item.updatedAt != null
+							}
+							return false
+						})
+						.sort((a, b) => {
+							let timeA = 0
+							let timeB = 0
+							
+							if (a.type === 'book' && a.lastReadTime) {
+								timeA = new Date(a.lastReadTime).getTime()
+							} else if (a.type === 'audiobook' && a.updatedAt) {
+								timeA = new Date(a.updatedAt).getTime()
+							}
+							
+							if (b.type === 'book' && b.lastReadTime) {
+								timeB = new Date(b.lastReadTime).getTime()
+							} else if (b.type === 'audiobook' && b.updatedAt) {
+								timeB = new Date(b.updatedAt).getTime()
+							}
+							
+							return timeB - timeA
+						})
+						.slice(0, 3)
+					
+				} catch (err) {
+					uni.hideLoading()
+					this.isLoading = false
+					
+					console.error('获取书架列表失败:', err)
+					uni.showToast({
+						title: '加载失败',
+						icon: 'none'
+					})
+					this.books = []
+					this.audiobooks = []
+					this.allItems = []
+					this.recentItems = []
+				}
+			},
+			goToDetail(item) {
+				if (!item || !item.id) {
+					uni.showToast({
+						title: '信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				
+				if (item.type === 'book') {
+					// 跳转到书籍详情页
+					if (!item.id) {
+						uni.showToast({
+							title: '书籍信息不完整',
+							icon: 'none'
+						})
+						return
+					}
+					uni.navigateTo({
+						url: `/pages/book-detail/book-detail?bookId=${item.id}`
+					})
+				} else if (item.type === 'audiobook') {
+					// 跳转到听书详情页
+					if (!item.id) {
+						uni.showToast({
+							title: '听书信息不完整',
+							icon: 'none'
+						})
+						return
+					}
+					uni.navigateTo({
+						url: `/pages/listen-detail/listen-detail?audiobookId=${item.id}`
+					})
+				}
+			},
+			goToLogin() {
+				uni.navigateTo({
+					url: '/pages/login/login'
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 60px;
+		box-sizing: border-box;
+	}
+	
+	.search-bar {
+		position: relative;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.search-input {
+		width: 100%;
+		height: 70rpx;
+		background-color: #F5F5F5;
+		border-radius: 35rpx;
+		padding: 0 80rpx 0 30rpx;
+		font-size: 28rpx;
+		color: #333333;
+	}
+	
+	.search-icon {
+		position: absolute;
+		right: 50rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 32rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		padding-bottom: 20rpx;
+	}
+	
+	.section {
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.section-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+	}
+	
+	.section-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.book-count {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.book-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	
+	.book-item {
+		width: 160rpx;
+		margin-bottom: 30rpx;
+	}
+	
+	.book-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-bottom: 15rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-name {
+		font-size: 24rpx;
+		color: #333333;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin-bottom: 8rpx;
+	}
+	
+	.book-progress {
+		font-size: 22rpx;
+		color: #4FC3F7;
+	}
+	
+	.book-item {
+		position: relative;
+	}
+	
+	.type-badge {
+		position: absolute;
+		top: 8rpx;
+		right: 8rpx;
+		background-color: rgba(79, 195, 247, 0.9);
+		border-radius: 8rpx;
+		padding: 4rpx 12rpx;
+	}
+	
+	.type-badge-text {
+		font-size: 20rpx;
+		color: #FFFFFF;
+	}
+	
+	.book-list {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.book-list-item {
+		display: flex;
+		margin-bottom: 30rpx;
+	}
+	
+	.book-cover-small {
+		width: 120rpx;
+		height: 160rpx;
+		border-radius: 8rpx;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	
+	.book-title-row {
+		display: flex;
+		align-items: center;
+		margin-bottom: 15rpx;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-right: 15rpx;
+		flex: 1;
+	}
+	
+	.type-tag {
+		font-size: 22rpx;
+		color: #4FC3F7;
+		background-color: #E3F2FD;
+		padding: 4rpx 12rpx;
+		border-radius: 8rpx;
+	}
+	
+	.book-author {
+		font-size: 26rpx;
+		color: #666666;
+		margin-bottom: 15rpx;
+	}
+	
+	.book-progress-text {
+		font-size: 24rpx;
+		color: #4FC3F7;
+	}
+	
+	.empty-state {
+		padding: 100rpx 30rpx;
+		text-align: center;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+		display: block;
+		margin-bottom: 40rpx;
+	}
+	
+	.login-btn {
+		width: 200rpx;
+		height: 80rpx;
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		border: none;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 auto;
+	}
+</style>
+
+

+ 282 - 0
pages/browsing-history/browsing-history.vue

@@ -0,0 +1,282 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">浏览记录</text>
+			<view class="clear-btn" @click="handleClear">
+				<text class="clear-text">清空</text>
+			</view>
+		</view>
+		
+		<!-- 浏览记录列表 -->
+		<scroll-view class="scroll-content" scroll-y>
+			<view class="history-list">
+				<view 
+					class="history-item" 
+					v-for="(item, index) in historyList" 
+					:key="index"
+					@click="goToBookDetail(item)"
+				>
+					<image class="book-cover" :src="item.image" mode="aspectFill" :lazy-load="true"></image>
+					<view class="book-info">
+						<text class="book-title">{{ item.title }}</text>
+						<text class="book-time">{{ item.time }}</text>
+					</view>
+				</view>
+			</view>
+			
+			<view class="empty-state" v-if="historyList.length === 0">
+				<text class="empty-text">暂无浏览记录</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getBrowsingHistory, clearBrowsingHistory } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				historyList: [],
+				userInfo: null,
+				isLoading: false
+			}
+		},
+		onLoad() {
+			// 获取用户信息
+			try {
+				const userInfo = uni.getStorageSync('userInfo')
+				if (userInfo && userInfo.id) {
+					this.userInfo = userInfo
+					// 加载浏览记录
+					this.loadBrowsingHistory()
+				} else {
+					uni.showToast({
+						title: '请先登录',
+						icon: 'none'
+					})
+					setTimeout(() => {
+						uni.navigateBack()
+					}, 1500)
+				}
+			} catch (e) {
+				console.error('获取用户信息失败', e)
+			}
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			async loadBrowsingHistory() {
+				if (!this.userInfo || !this.userInfo.id) {
+					return
+				}
+				
+				try {
+					this.isLoading = true
+					const res = await getBrowsingHistory(this.userInfo.id)
+					
+					if (res && res.code === 200 && res.data) {
+						this.historyList = res.data.map(item => ({
+							id: item.bookId,
+							title: item.title || '未知书籍',
+							image: item.image || 'https://via.placeholder.com/200x300?text=No+Image',
+							time: item.time || ''
+						}))
+					} else {
+						this.historyList = []
+					}
+				} catch (e) {
+					console.error('加载浏览记录失败', e)
+					this.historyList = []
+				} finally {
+					this.isLoading = false
+				}
+			},
+			handleClear() {
+				if (!this.userInfo || !this.userInfo.id) {
+					return
+				}
+				
+				uni.showModal({
+					title: '提示',
+					content: '确定要清空所有浏览记录吗?',
+					success: async (res) => {
+						if (res.confirm) {
+							try {
+								uni.showLoading({
+									title: '清空中...',
+									mask: true
+								})
+								
+								const result = await clearBrowsingHistory(this.userInfo.id)
+								uni.hideLoading()
+								
+								if (result && result.code === 200) {
+									this.historyList = []
+									uni.showToast({
+										title: '已清空',
+										icon: 'success'
+									})
+								} else {
+									uni.showToast({
+										title: result.message || '清空失败',
+										icon: 'none'
+									})
+								}
+							} catch (e) {
+								uni.hideLoading()
+								console.error('清空浏览记录失败', e)
+								uni.showToast({
+									title: '清空失败,请重试',
+									icon: 'none'
+								})
+							}
+						}
+					}
+				})
+			},
+			goToBookDetail(item) {
+				if (!item || !item.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/book-detail/book-detail?bookId=${item.id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E0E0E0;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.clear-btn {
+		width: 80rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.clear-text {
+		font-size: 28rpx;
+		color: #666666;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		padding: 20rpx 30rpx;
+	}
+	
+	.history-list {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.history-item {
+		display: flex;
+		align-items: center;
+		padding: 30rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.history-item:last-child {
+		border-bottom: none;
+	}
+	
+	.book-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-right: 30rpx;
+		flex-shrink: 0;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 20rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-time {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.empty-state {
+		padding: 200rpx 0;
+		text-align: center;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>
+
+

+ 333 - 0
pages/category/category.vue

@@ -0,0 +1,333 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">分类</text>
+			<view class="placeholder"></view>
+		</view>
+		
+		<!-- 分隔线 -->
+		<view class="divider"></view>
+		
+		<!-- 分类列表 -->
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 加载中 -->
+			<view class="loading-container" v-if="isLoading">
+				<text class="loading-text">加载中...</text>
+			</view>
+			
+			<!-- 分类列表 -->
+			<view class="category-grid" v-else-if="categoryList.length > 0">
+				<view 
+					class="category-card" 
+					v-for="(category, index) in categoryList" 
+					:key="category.id"
+					@click="goToCategoryBooks(category)"
+					:class="{ 'card-pressed': pressedIndex === index }"
+					@touchstart="handleTouchStart(index)"
+					@touchend="handleTouchEnd"
+				>
+					<image 
+						class="category-cover" 
+						:src="category.cover" 
+						mode="aspectFill"
+						:lazy-load="true"
+						@error="handleImageError(index)"
+					></image>
+					<view class="category-info">
+						<text class="category-title">{{ category.name }}</text>
+						<text class="category-count">{{ category.count }}本书</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-container" v-else>
+				<text class="empty-text">暂无分类数据</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getAllCategories } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				pressedIndex: -1,
+				categoryList: [],
+				isLoading: false
+			}
+		},
+		onLoad() {
+			// 页面加载时获取分类数据
+			this.loadCategories();
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			handleTouchStart(index) {
+				this.pressedIndex = index;
+			},
+			handleTouchEnd() {
+				setTimeout(() => {
+					this.pressedIndex = -1;
+				}, 150);
+			},
+			goToCategoryBooks(category) {
+				// 根据分类名称判断跳转类型
+				const categoryName = category.name;
+				
+				// 特殊分类:跳转到对应的特殊页面
+				if (categoryName === '全部分类') {
+					uni.navigateTo({
+						url: '/pages/more-books/more-books?type=all'
+					});
+				} else if (categoryName === '排行榜') {
+					uni.navigateTo({
+						url: '/pages/more-books/more-books?type=ranking'
+					});
+				} else if (categoryName === '热门书籍') {
+					uni.navigateTo({
+						url: '/pages/more-books/more-books?type=popular'
+					});
+				} else if (categoryName === '新书榜') {
+					uni.navigateTo({
+						url: '/pages/more-books/more-books?type=new'
+					});
+				} else if (categoryName === 'VIP书籍') {
+					uni.navigateTo({
+						url: '/pages/more-books/more-books?type=vip'
+					});
+				} else {
+					// 普通分类:跳转到该分类的书籍列表页面
+					uni.navigateTo({
+						url: `/pages/more-books/more-books?type=category&categoryId=${category.id}&categoryName=${encodeURIComponent(category.name)}`
+					});
+				}
+			},
+			handleImageError(index) {
+				// 图片加载失败时使用备用图片
+				if (this.categoryList[index]) {
+					this.categoryList[index].cover = `https://picsum.photos/seed/fallback${index}/200/300`;
+				}
+			},
+			loadCategories() {
+				console.log('开始加载分类列表...');
+				this.isLoading = true;
+				
+				getAllCategories()
+					.then((res) => {
+						console.log('分类列表API响应:', res);
+						this.isLoading = false;
+						
+						if (res && res.code === 200) {
+							if (res.data && Array.isArray(res.data)) {
+								// 处理数据格式
+								this.categoryList = res.data.map((category) => {
+									return {
+										id: category.id,
+										name: category.name || '未知分类',
+										count: category.bookCount || 0,
+										cover: category.cover || `https://picsum.photos/seed/category${category.id}/200/300`,
+										icon: category.icon,
+										color: category.color
+									};
+								});
+								console.log('分类列表加载成功,共', this.categoryList.length, '个分类');
+							} else {
+								console.warn('分类列表数据为空或格式不正确:', res.data);
+								this.categoryList = [];
+								uni.showToast({
+									title: '暂无分类数据',
+									icon: 'none',
+									duration: 2000
+								});
+							}
+						} else {
+							console.warn('分类列表API返回错误:', res);
+							this.categoryList = [];
+							uni.showToast({
+								title: res.message || '获取分类列表失败',
+								icon: 'none',
+								duration: 2000
+							});
+						}
+					})
+					.catch((err) => {
+						this.isLoading = false;
+						console.error('获取分类列表失败:', err);
+						this.categoryList = [];
+						uni.showToast({
+							title: err.message || '网络请求失败,请检查后端服务',
+							icon: 'none',
+							duration: 3000
+						});
+					});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	/* 顶部导航栏 */
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #000000;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #000000;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	
+	.placeholder {
+		width: 60rpx;
+	}
+	
+	/* 分隔线 */
+	.divider {
+		width: 100%;
+		height: 1rpx;
+		background-color: #E5E5E5;
+	}
+	
+	/* 滚动内容 */
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding: 20rpx 30rpx;
+		box-sizing: border-box;
+	}
+	
+	/* 分类网格 */
+	.category-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	
+	/* 分类卡片 */
+	.category-card {
+		width: calc(50% - 10rpx);
+		height: 200rpx;
+		background-color: #F5F5F5;
+		border-radius: 16rpx;
+		margin-bottom: 20rpx;
+		display: flex;
+		align-items: center;
+		padding: 20rpx;
+		box-sizing: border-box;
+		transition: all 0.15s ease;
+		overflow: hidden;
+		position: relative;
+	}
+	
+	.category-card:active,
+	.category-card.card-pressed {
+		transform: scale(0.98);
+		background-color: #EEEEEE;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+	}
+	
+	/* 分类封面 */
+	.category-cover {
+		width: 100rpx;
+		height: 140rpx;
+		border-radius: 8rpx;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+		background-color: #E0E0E0;
+	}
+	
+	/* 分类信息 */
+	.category-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-width: 0;
+	}
+	
+	.category-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000000;
+		margin-bottom: 12rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.category-count {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	/* 加载中 */
+	.loading-container {
+		width: 100%;
+		height: 400rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	/* 空状态 */
+	.empty-container {
+		width: 100%;
+		height: 400rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>

+ 436 - 0
pages/edit-profile/edit-profile.vue

@@ -0,0 +1,436 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">编辑资料</text>
+			<view class="save-btn" @click="handleSave">
+				<text class="save-text">保存</text>
+			</view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 头像 -->
+			<view class="profile-item" @click="handleAvatarClick">
+				<text class="item-label">头像</text>
+				<view class="item-value">
+					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
+					<text class="arrow">></text>
+				</view>
+			</view>
+			
+			<!-- 昵称 -->
+			<view class="profile-item" @click="handleNicknameClick">
+				<text class="item-label">昵称</text>
+				<view class="item-value">
+					<text class="nickname-text">{{ userInfo.nickname }}</text>
+					<text class="arrow">></text>
+				</view>
+			</view>
+			
+			<!-- 性别 -->
+			<view class="profile-item" @click="handleGenderClick">
+				<text class="item-label">性别</text>
+				<view class="item-value">
+					<text class="gender-text">{{ userInfo.gender || '未设置' }}</text>
+					<text class="arrow">></text>
+				</view>
+			</view>
+			
+			<!-- 生日 -->
+			<view class="profile-item" @click="handleBirthdayClick">
+				<text class="item-label">生日</text>
+				<view class="item-value">
+					<text class="birthday-text">{{ userInfo.birthday || '未设置' }}</text>
+					<text class="arrow">></text>
+				</view>
+			</view>
+			
+			<!-- 个人简介 -->
+			<view class="profile-item" @click="handleBioClick">
+				<text class="item-label">个人简介</text>
+				<view class="item-value">
+					<text class="bio-text">{{ userInfo.bio || '未设置' }}</text>
+					<text class="arrow">></text>
+				</view>
+			</view>
+		</scroll-view>
+		
+		<view class="login-mask" v-if="!isLogin">
+			<button class="login-btn" @click="goToLogin">请先登录</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getUserProfile, updateUserProfile } from '../../utils/api.js'
+	
+	const defaultAvatar = 'https://picsum.photos/seed/avatar/200/200'
+	
+	export default {
+		data() {
+			return {
+				userInfo: {
+					id: null,
+					username: '',
+					nickname: '',
+					avatar: defaultAvatar,
+					gender: '',
+					birthday: '',
+					bio: '',
+					phone: '',
+					email: ''
+				},
+				isLogin: false,
+				isSaving: false
+			}
+		},
+		onLoad() {
+			this.loadUserInfo()
+		},
+		onShow() {
+			// 先读取可能从文本编辑页返回的临时内容
+			const tempBio = uni.getStorageSync('temp_text_bio')
+			if (typeof tempBio === 'string') {
+				// 如果有临时内容,直接设置到 userInfo,不重新加载服务器数据
+				this.userInfo.bio = tempBio
+				uni.removeStorageSync('temp_text_bio')
+				// 同时更新本地存储
+				const storedUser = uni.getStorageSync('userInfo')
+				if (storedUser) {
+					storedUser.bio = tempBio
+					uni.setStorageSync('userInfo', storedUser)
+				}
+				return
+			}
+			// 如果没有临时内容,才从服务器加载
+			this.loadUserInfo(true)
+		},
+		methods: {
+			async loadUserInfo(forceRemote = false) {
+				try {
+					const storedUser = uni.getStorageSync('userInfo') || null
+					const isLogin = uni.getStorageSync('isLogin')
+					if (!storedUser || !storedUser.id || !isLogin) {
+						this.isLogin = false
+						this.userInfo = {
+							...this.userInfo,
+							id: null,
+							username: '',
+							nickname: '',
+							avatar: defaultAvatar,
+							gender: '',
+							birthday: '',
+							bio: '',
+							phone: '',
+							email: ''
+						}
+						return
+					}
+					this.isLogin = true
+					this.userInfo = {
+						...this.userInfo,
+						...storedUser,
+						avatar: storedUser.avatar || defaultAvatar
+					}
+					if (!forceRemote && this.userInfo.nickname) {
+						return
+					}
+					const res = await getUserProfile(storedUser.id)
+					if (res && res.code === 200 && res.data) {
+						this.userInfo = {
+							...this.userInfo,
+							...res.data,
+							avatar: res.data.avatar || defaultAvatar
+						}
+						uni.setStorageSync('userInfo', {
+							...storedUser,
+							...res.data
+						})
+					}
+				} catch (e) {
+					console.error('加载用户资料失败:', e)
+					uni.showToast({
+						title: '加载失败,请重试',
+						icon: 'none'
+					})
+				}
+			},
+			goBack() {
+				uni.navigateBack()
+			},
+			async handleSave() {
+				try {
+					if (!this.isLogin || !this.userInfo.id) {
+						uni.showToast({ title: '请先登录', icon: 'none' })
+						return
+					}
+					if (this.isSaving) return
+					this.isSaving = true
+					uni.showLoading({ title: '保存中...' })
+					const payload = {
+						userId: this.userInfo.id,
+						nickname: this.userInfo.nickname || '',
+						avatar: this.userInfo.avatar === defaultAvatar ? '' : (this.userInfo.avatar || ''),
+						gender: this.userInfo.gender || '',
+						birthday: this.userInfo.birthday || '',
+						bio: this.userInfo.bio || '',
+						phone: this.userInfo.phone || '',
+						email: this.userInfo.email || ''
+					}
+					const res = await updateUserProfile(payload)
+					uni.hideLoading()
+					this.isSaving = false
+					if (res && res.code === 200) {
+						const merged = {
+							...this.userInfo,
+							...res.data,
+							avatar: res.data.avatar || this.userInfo.avatar || defaultAvatar
+						}
+						this.userInfo = merged
+						uni.setStorageSync('userInfo', merged)
+						uni.showToast({ title: '保存成功', icon: 'success' })
+						setTimeout(() => uni.navigateBack(), 800)
+					} else {
+						uni.showToast({ title: (res && res.message) || '保存失败', icon: 'none' })
+					}
+				} catch (e) {
+					uni.hideLoading()
+					this.isSaving = false
+					console.error('保存用户资料失败:', e)
+					uni.showToast({ title: '网络错误,请稍后再试', icon: 'none' })
+				}
+			},
+			handleAvatarClick() {
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['compressed'],
+					sourceType: ['album', 'camera'],
+					success: (res) => {
+						const tempFilePath = res.tempFilePaths[0]
+						// 这里可以上传图片到服务器
+						// 暂时直接使用本地路径
+						this.userInfo.avatar = tempFilePath
+						uni.showToast({
+							title: '头像已更新',
+							icon: 'success'
+						})
+					}
+				})
+			},
+			handleNicknameClick() {
+				uni.showModal({
+					title: '修改昵称',
+					editable: true,
+					placeholderText: '请输入昵称',
+					content: this.userInfo.nickname,
+					success: (res) => {
+						if (res.confirm && res.content) {
+							this.userInfo.nickname = res.content.trim()
+						}
+					}
+				})
+			},
+			handleGenderClick() {
+				if (!this.isLogin) {
+					this.goToLogin()
+					return
+				}
+				uni.showActionSheet({
+					itemList: ['男', '女', '保密'],
+					success: (res) => {
+						const genders = ['男', '女', '保密']
+						this.userInfo.gender = genders[res.tapIndex]
+					}
+				})
+			},
+			handleBirthdayClick() {
+				if (!this.isLogin) {
+					this.goToLogin()
+					return
+				}
+				// 兼容各端:使用可编辑输入框让用户填写 YYYY-MM-DD
+				uni.showModal({
+					title: '设置生日',
+					editable: true,
+					placeholderText: '格式:YYYY-MM-DD',
+					content: this.userInfo.birthday || '',
+					success: (modalRes) => {
+						if (modalRes.confirm) {
+							const value = (modalRes.content || '').trim()
+							// 简单校验 YYYY-MM-DD
+							const ok = /^\d{4}-\d{2}-\d{2}$/.test(value)
+							if (!value || ok) {
+								this.userInfo.birthday = value
+							} else {
+								uni.showToast({ title: '日期格式应为YYYY-MM-DD', icon: 'none' })
+							}
+						}
+					}
+				})
+			},
+			handleBioClick() {
+				if (!this.isLogin) {
+					this.goToLogin()
+					return
+				}
+				// 跳转到文本编辑页面
+				const bioValue = this.userInfo.bio || ''
+				uni.navigateTo({
+					url: `/pages/text-edit/text-edit?key=bio&value=${encodeURIComponent(bioValue)}&placeholder=${encodeURIComponent('请输入个人简介')}&title=${encodeURIComponent('个人简介')}`
+				})
+			},
+			goToLogin() {
+				uni.navigateTo({
+					url: '/pages/login/login'
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+		position: relative;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E0E0E0;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.save-btn {
+		width: 80rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.save-text {
+		font-size: 28rpx;
+		color: #4FC3F7;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+	}
+	
+	.profile-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+		background-color: #FFFFFF;
+	}
+	
+	.item-label {
+		font-size: 30rpx;
+		color: #666666;
+	}
+	
+	.item-value {
+		display: flex;
+		align-items: center;
+		flex: 1;
+		justify-content: flex-end;
+		margin-left: 30rpx;
+	}
+	
+	.avatar {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50%;
+		background-color: #F5F5F5;
+		margin-right: 20rpx;
+	}
+	
+	.nickname-text,
+	.gender-text,
+	.birthday-text,
+	.bio-text {
+		font-size: 30rpx;
+		color: #333333;
+		flex: 1;
+		text-align: right;
+		margin-right: 20rpx;
+	}
+	
+	.bio-text {
+		max-width: 400rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.arrow {
+		font-size: 32rpx;
+		color: #CCCCCC;
+	}
+	
+	.login-mask {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba(255, 255, 255, 0.92);
+	}
+	
+	.login-btn {
+		width: 220rpx;
+		height: 80rpx;
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+		border: none;
+		border-radius: 40rpx;
+		font-size: 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>
+
+

+ 453 - 0
pages/feedback/feedback.vue

@@ -0,0 +1,453 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">意见反馈</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 反馈类型 -->
+			<view class="section">
+				<view class="section-title">
+					<view class="title-indicator"></view>
+					<text class="title-text">反馈类型</text>
+				</view>
+				<view class="type-buttons">
+					<view 
+						class="type-btn" 
+						:class="{ active: feedbackType === 'bug' }"
+						@click="selectType('bug')"
+					>
+						<text class="type-btn-text">产品bug</text>
+					</view>
+					<view 
+						class="type-btn" 
+						:class="{ active: feedbackType === 'suggestion' }"
+						@click="selectType('suggestion')"
+					>
+						<text class="type-btn-text">功能建议</text>
+					</view>
+					<view 
+						class="type-btn" 
+						:class="{ active: feedbackType === 'other' }"
+						@click="selectType('other')"
+					>
+						<text class="type-btn-text">其他</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 详细描述 -->
+			<view class="section">
+				<view class="section-title">
+					<view class="title-indicator"></view>
+					<text class="title-text">详细描述</text>
+				</view>
+				<textarea 
+					class="description-input" 
+					v-model="description" 
+					placeholder="请输入您的问题"
+					:maxlength="500"
+					:auto-height="true"
+				></textarea>
+			</view>
+			
+			<!-- 上传图片 -->
+			<view class="section">
+				<view class="section-title">
+					<view class="title-indicator"></view>
+					<text class="title-text">上传图片</text>
+				</view>
+				<view class="upload-area">
+					<view class="image-list">
+						<view 
+							class="image-item" 
+							v-for="(image, index) in imageList" 
+							:key="index"
+						>
+							<image class="uploaded-image" :src="image" mode="aspectFill"></image>
+							<view class="delete-btn" @click="deleteImage(index)">
+								<text class="delete-icon">×</text>
+							</view>
+						</view>
+						<view 
+							class="upload-btn" 
+							v-if="imageList.length < 3"
+							@click="chooseImage"
+						>
+							<text class="upload-icon">+</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		
+		<!-- 提交按钮 -->
+		<view class="submit-section">
+			<button class="submit-btn" @click="submitFeedback">提交</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { submitFeedback } from '@/utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				feedbackType: 'bug', // bug, suggestion, other
+				description: '',
+				imageList: [],
+				isSubmitting: false
+			}
+		},
+		onLoad() {
+			// 获取用户信息(从本地存储)
+			const userInfo = uni.getStorageSync('userInfo')
+			if (!userInfo || !userInfo.id) {
+				uni.showToast({
+					title: '请先登录',
+					icon: 'none'
+				})
+				setTimeout(() => {
+					uni.navigateTo({
+						url: '/pages/login/login'
+					})
+				}, 1500)
+			}
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			selectType(type) {
+				this.feedbackType = type
+			},
+			chooseImage() {
+				uni.chooseImage({
+					count: 3 - this.imageList.length,
+					sizeType: ['compressed'],
+					sourceType: ['album', 'camera'],
+					success: (res) => {
+						// 将临时文件路径添加到列表
+						// 注意:如果是真实项目,需要先将图片上传到服务器获取URL
+						this.imageList = this.imageList.concat(res.tempFilePaths)
+					},
+					fail: (err) => {
+						console.error('选择图片失败:', err)
+						uni.showToast({
+							title: '选择图片失败',
+							icon: 'none'
+						})
+					}
+				})
+			},
+			deleteImage(index) {
+				this.imageList.splice(index, 1)
+			},
+			async submitFeedback() {
+				// 获取用户信息
+				const userInfo = uni.getStorageSync('userInfo')
+				if (!userInfo || !userInfo.id) {
+					uni.showToast({
+						title: '请先登录',
+						icon: 'none'
+					})
+					setTimeout(() => {
+						uni.navigateTo({
+							url: '/pages/login/login'
+						})
+					}, 1500)
+					return
+				}
+				
+				// 验证描述
+				if (!this.description.trim()) {
+					uni.showToast({
+						title: '请输入详细描述',
+						icon: 'none'
+					})
+					return
+				}
+				
+				// 防止重复提交
+				if (this.isSubmitting) {
+					return
+				}
+				
+				this.isSubmitting = true
+				uni.showLoading({
+					title: '提交中...',
+					mask: true
+				})
+				
+				try {
+					// 准备提交数据
+					const feedbackData = {
+						userId: userInfo.id,
+						type: this.feedbackType,
+						description: this.description.trim(),
+						images: this.imageList // 图片列表,暂时使用临时路径
+						// 注意:在生产环境中,需要先将图片上传到服务器获取URL
+						// images: uploadedImageUrls
+					}
+					
+					// 调用API提交反馈
+					const res = await submitFeedback(feedbackData)
+					
+					uni.hideLoading()
+					this.isSubmitting = false
+					
+					if (res && res.code === 200) {
+						uni.showToast({
+							title: '提交成功',
+							icon: 'success'
+						})
+						
+						// 清空表单
+						this.description = ''
+						this.imageList = []
+						this.feedbackType = 'bug'
+						
+						// 延迟返回上一页
+						setTimeout(() => {
+							uni.navigateBack()
+						}, 1500)
+					} else {
+						uni.showToast({
+							title: res.message || '提交失败,请重试',
+							icon: 'none'
+						})
+					}
+				} catch (error) {
+					uni.hideLoading()
+					this.isSubmitting = false
+					console.error('提交反馈失败:', error)
+					uni.showToast({
+						title: error.message || '网络错误,请稍后再试',
+						icon: 'none'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	
+	.section {
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.section-title {
+		display: flex;
+		align-items: center;
+		margin-bottom: 30rpx;
+	}
+	
+	.title-indicator {
+		width: 6rpx;
+		height: 32rpx;
+		background-color: #81C784;
+		border-radius: 3rpx;
+		margin-right: 15rpx;
+	}
+	
+	.title-text {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.type-buttons {
+		display: flex;
+		gap: 20rpx;
+	}
+	
+	.type-btn {
+		flex: 1;
+		height: 80rpx;
+		background-color: #F5F5F5;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 2rpx solid transparent;
+		transition: all 0.3s;
+	}
+	
+	.type-btn.active {
+		background-color: #E8F5E9;
+		border-color: #81C784;
+	}
+	
+	.type-btn-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.type-btn.active .type-btn-text {
+		color: #4CAF50;
+		font-weight: bold;
+	}
+	
+	.description-input {
+		width: 100%;
+		min-height: 300rpx;
+		background-color: #F5F5F5;
+		border-radius: 16rpx;
+		padding: 30rpx;
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 1.6;
+		box-sizing: border-box;
+	}
+	
+	.description-input::placeholder {
+		color: #CCCCCC;
+	}
+	
+	.upload-area {
+		width: 100%;
+	}
+	
+	.image-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20rpx;
+	}
+	
+	.image-item {
+		position: relative;
+		width: 200rpx;
+		height: 200rpx;
+		border-radius: 12rpx;
+		overflow: hidden;
+	}
+	
+	.uploaded-image {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.delete-btn {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 50rpx;
+		height: 50rpx;
+		background-color: rgba(0, 0, 0, 0.5);
+		border-radius: 0 0 0 50rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.delete-icon {
+		font-size: 40rpx;
+		color: #FFFFFF;
+		line-height: 1;
+	}
+	
+	.upload-btn {
+		width: 200rpx;
+		height: 200rpx;
+		border: 2rpx dashed #CCCCCC;
+		border-radius: 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #FAFAFA;
+	}
+	
+	.upload-icon {
+		font-size: 80rpx;
+		color: #CCCCCC;
+		line-height: 1;
+	}
+	
+	.submit-section {
+		padding: 30rpx;
+		background-color: #FFFFFF;
+		border-top: 1rpx solid #F0F0F0;
+		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+	}
+	
+	.submit-btn {
+		width: 100%;
+		height: 88rpx;
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+		font-size: 32rpx;
+		font-weight: bold;
+		border: none;
+		border-radius: 44rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.submit-btn::after {
+		border: none;
+	}
+</style>
+
+

+ 348 - 0
pages/hot-books/hot-books.vue

@@ -0,0 +1,348 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">热门书籍</text>
+			<view class="search-btn" @click="goToSearch">
+				<text class="search-icon">🔍</text>
+			</view>
+		</view>
+		
+		<!-- 书籍列表 -->
+		<scroll-view class="book-list-container" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
+			<view 
+				class="book-item" 
+				v-for="(book, index) in bookList" 
+				:key="book.id || index"
+				@click="goToBookDetail(book)"
+			>
+				<image 
+					class="book-cover" 
+					:src="book.cover" 
+					mode="aspectFill"
+					:lazy-load="true"
+					@error="handleImageError(index)"
+				></image>
+				<view class="book-info">
+					<text class="book-title">{{ book.title }}</text>
+					<text class="book-desc">{{ book.desc }}</text>
+					<text class="book-author">{{ book.author }}</text>
+				</view>
+			</view>
+			
+			<!-- 加载更多提示 -->
+			<view class="load-more" v-if="hasMore">
+				<text class="load-more-text">加载中...</text>
+			</view>
+			<view class="load-more" v-else-if="bookList.length > 0">
+				<text class="load-more-text">没有更多了</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			// 生成书籍封面图片的函数
+			const getBookImage = (seed) => {
+				return `https://picsum.photos/seed/${seed}/200/300`;
+			};
+			
+			return {
+				hasMore: true,
+				page: 1,
+				bookList: [
+					{
+						id: 1,
+						title: '互联网心理学',
+						author: '雷雳',
+						desc: '当连接万物的互联网遇见无处不在的心理学,我们需要用心理学的方式,重新思考互联网背后的人与社会。',
+						cover: getBookImage('internet-psychology')
+					},
+					{
+						id: 2,
+						title: '孝经 (中华经典诵读)',
+						author: '孔子',
+						desc: '以孔子与其弟子曾参之间问答的形式,将社会上各种阶层的人士,标示出其实践孝亲的法则与途径,阐述了「孝」的意义。',
+						cover: getBookImage('xiaojing')
+					},
+					{
+						id: 3,
+						title: '自省',
+						author: '约翰·班扬',
+						desc: '讲述了敬虔之人和不敬虔之人截然相反的结局。本书就是他的细细品味,文风一如从前,朴实无华却又字字珠玑。',
+						cover: getBookImage('self-reflection')
+					},
+					{
+						id: 4,
+						title: '思维的艺术',
+						author: '延斯·森特根',
+						desc: '一本关于思维方式和哲学思考的经典之作,帮助读者提升逻辑思维和批判性思考能力。',
+						cover: getBookImage('thinking-art')
+					},
+					{
+						id: 5,
+						title: '传习录:全译全注',
+						author: '王阳明',
+						desc: '王阳明心学的核心著作,记录了其与学生之间的对话,阐述了知行合一的哲学思想。',
+						cover: getBookImage('chuanxilu')
+					},
+					{
+						id: 6,
+						title: '社会契约论',
+						author: '让·雅克·卢梭',
+						desc: '探讨了政治权力的合法性和人民主权的基本原则,是现代民主理论的重要基石。',
+						cover: getBookImage('social-contract')
+					},
+					{
+						id: 7,
+						title: '没有烦恼的世界',
+						author: '王觉仁',
+						desc: '通过禅修和正念的实践,帮助读者摆脱内心的烦恼,获得内心的平静与智慧。',
+						cover: getBookImage('no-worries')
+					},
+					{
+						id: 8,
+						title: '透过电影看文化',
+						author: '陈红',
+						desc: '从电影的角度分析不同文化的特点,探讨电影如何反映和影响社会文化的发展。',
+						cover: getBookImage('film-culture')
+					}
+				]
+			}
+		},
+		onLoad() {
+			// 页面加载时加载数据
+			this.loadBookList();
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			goToSearch() {
+				uni.navigateTo({
+					url: '/pages/search/search'
+				});
+			},
+			goToBookDetail(book) {
+				if (!book || !book.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/book-detail/book-detail?bookId=${book.id}`
+				});
+			},
+			handleImageError(index) {
+				// 图片加载失败时使用备用图片
+				if (this.bookList[index]) {
+					this.bookList[index].cover = `https://picsum.photos/seed/fallback${index}/200/300`;
+				}
+			},
+			loadBookList() {
+				// 加载热门书籍列表
+				// 这里可以调用API获取数据
+			},
+			loadMore() {
+				// 滚动到底部加载更多
+				if (this.hasMore) {
+					setTimeout(() => {
+						// 模拟加载更多数据
+						const moreBooks = [
+							{
+								id: 9,
+								title: '车尔尼钢琴流畅练习曲',
+								author: '高新颜',
+								desc: '经典的钢琴练习曲集,适合中级钢琴学习者,帮助提升演奏技巧和流畅度。',
+								cover: `https://picsum.photos/seed/czerny${this.page}/200/300`
+							},
+							{
+								id: 10,
+								title: '古典哲学的趣味',
+								author: '朱利安·巴吉尼',
+								desc: '用通俗易懂的方式介绍古典哲学的核心思想,让哲学变得生动有趣。',
+								cover: `https://picsum.photos/seed/philosophy${this.page}/200/300`
+							},
+							{
+								id: 11,
+								title: '走向大洋',
+								author: '未知',
+								desc: '一部关于海洋探索和人类文明发展的历史著作,展现了人类对未知世界的探索精神。',
+								cover: `https://picsum.photos/seed/ocean${this.page}/200/300`
+							},
+							{
+								id: 12,
+								title: '思维的艺术',
+								author: '延斯·森特根',
+								desc: '一本关于思维方式和哲学思考的经典之作,帮助读者提升逻辑思维和批判性思考能力。',
+								cover: `https://picsum.photos/seed/thinking-art2${this.page}/200/300`
+							}
+						];
+						
+						if (this.page < 3) {
+							const newBooks = moreBooks.map((book, idx) => ({
+								...book,
+								id: book.id + this.page * 10
+							}));
+							this.bookList = [...this.bookList, ...newBooks];
+							this.page++;
+						} else {
+							this.hasMore = false;
+						}
+					}, 500);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	/* 顶部导航栏 */
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E5E5E5;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #000000;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #000000;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	
+	.search-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.search-icon {
+		font-size: 36rpx;
+		color: #000000;
+	}
+	
+	/* 书籍列表容器 */
+	.book-list-container {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		background-color: #FFFFFF;
+	}
+	
+	/* 书籍项 */
+	.book-item {
+		display: flex;
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.book-item:last-child {
+		border-bottom: none;
+	}
+	
+	/* 书籍封面 */
+	.book-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-right: 24rpx;
+		flex-shrink: 0;
+		background-color: #F5F5F5;
+	}
+	
+	/* 书籍信息 */
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000000;
+		margin-bottom: 16rpx;
+		line-height: 1.4;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.book-desc {
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.6;
+		margin-bottom: 20rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.book-author {
+		font-size: 26rpx;
+		color: #999999;
+		margin-top: auto;
+	}
+	
+	/* 加载更多 */
+	.load-more {
+		width: 100%;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 20rpx;
+		margin-bottom: 40rpx;
+	}
+	
+	.load-more-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>

+ 842 - 0
pages/index/index.vue

@@ -0,0 +1,842 @@
+<template>
+	<view class="container">
+		<!-- 搜索栏 -->
+		<view class="search-bar" @click="goToSearch">
+			<input class="search-input" placeholder="水浒传" disabled />
+			<text class="search-icon">🔍</text>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 轮播图 -->
+			<view class="swiper-container">
+				<swiper 
+					class="swiper" 
+					:indicator-dots="true" 
+					:autoplay="true" 
+					:interval="4000" 
+					:duration="600"
+					indicator-color="rgba(255,255,255,0.5)"
+					indicator-active-color="#4FC3F7"
+					:circular="true"
+					:previous-margin="0"
+					:next-margin="0"
+				>
+					<swiper-item v-for="(item, index) in bannerList" :key="index" @click="handleBannerClick(item)">
+						<view class="swiper-item-wrapper">
+							<image class="swiper-image" :src="item.image" mode="aspectFill" :lazy-load="true" @error="handleImageError(index)"></image>
+							<view class="swiper-overlay">
+								<text class="swiper-title">{{ item.title }}</text>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+			</view>
+			
+			<!-- 分类导航 -->
+			<view class="category-nav">
+				<view class="category-item" v-for="(item, index) in categories" :key="index" @click="handleCategoryClick(item, index)">
+					<view class="category-icon" :style="{ backgroundColor: item.color }">
+						<text class="icon-text">{{ item.icon }}</text>
+					</view>
+					<text class="category-text">{{ item.name }}</text>
+				</view>
+			</view>
+			
+			<!-- 今日推荐 -->
+			<view class="section">
+				<view class="section-header">
+					<text class="section-title">今日推荐</text>
+					<text class="section-more" @click.stop="goToMoreBooks('today')">更多></text>
+				</view>
+				<!-- 加载中 -->
+				<view class="loading-state" v-if="isLoading && todayRecommend.length === 0">
+					<text class="loading-text">加载中...</text>
+				</view>
+				<!-- 书籍列表 -->
+				<view class="book-grid" v-else-if="todayRecommend.length > 0">
+					<view class="book-item" v-for="(book, index) in todayRecommend" :key="book.id || index" @click="goToBookDetail(book)">
+						<image class="book-cover" :src="book.image" mode="aspectFill" :lazy-load="true" @error="handleBookImageError(book, 'todayRecommend')"></image>
+						<text class="book-name">{{ book.title }}</text>
+					</view>
+				</view>
+				<!-- 空状态 -->
+				<view class="empty-state" v-else>
+					<text class="empty-text">暂无推荐书籍</text>
+					<text class="empty-hint">请检查后端服务是否启动,数据库是否有数据</text>
+				</view>
+			</view>
+			
+			<!-- 畅销书籍 -->
+			<view class="section">
+				<view class="section-header">
+					<text class="section-title">畅销书籍</text>
+					<text class="section-more" @click.stop="goToMoreBooks('bestseller')">更多></text>
+				</view>
+				<!-- 加载中 -->
+				<view class="loading-state" v-if="isLoading && bestsellers.length === 0">
+					<text class="loading-text">加载中...</text>
+				</view>
+				<!-- 书籍列表 -->
+				<view class="book-list" v-else-if="bestsellers.length > 0">
+					<view class="book-list-item" v-for="(book, index) in bestsellers" :key="book.id || index" @click="goToBookDetail(book)">
+						<image class="book-cover-small" :src="book.image" mode="aspectFill" :lazy-load="true" @error="handleBookImageError(book, 'bestsellers')"></image>
+						<view class="book-info">
+							<text class="book-title">{{ book.title }}</text>
+							<text class="book-desc">{{ book.desc }}</text>
+							<text class="book-author">{{ book.author }}</text>
+						</view>
+					</view>
+				</view>
+				<!-- 空状态 -->
+				<view class="empty-state" v-else>
+					<text class="empty-text">暂无畅销书籍</text>
+					<text class="empty-hint">请检查后端服务是否启动,数据库是否有数据</text>
+				</view>
+			</view>
+			
+			<!-- 精品书单 -->
+			<view class="section">
+				<view class="section-header">
+					<text class="section-title">精品书单</text>
+					<text class="section-more" @click.stop="goToMoreBooks('featured')">更多></text>
+				</view>
+				<view class="loading-state" v-if="featuredLoading">
+					<text class="loading-text">加载中...</text>
+				</view>
+				<scroll-view class="book-list-horizontal" scroll-x v-else-if="featuredList.length > 0">
+					<view class="book-item-horizontal" v-for="(book, index) in featuredList" :key="book.id || index" @click="goToBookDetail(book)">
+						<image class="book-cover-horizontal" :src="book.image" mode="aspectFill" :lazy-load="true" @error="handleBookImageError(book, 'featuredList')"></image>
+						<text class="book-name-horizontal">{{ book.title }}</text>
+					</view>
+				</scroll-view>
+				<view class="empty-state" v-else>
+					<text class="empty-text">暂无精品书单</text>
+					<text class="empty-hint">请检查后端服务或数据库</text>
+				</view>
+			</view>
+			
+			<!-- 更多推荐 -->
+			<view class="section">
+				<view class="section-header">
+					<text class="section-title">更多推荐</text>
+				</view>
+				<view class="loading-state" v-if="moreLoading">
+					<text class="loading-text">加载中...</text>
+				</view>
+				<view class="book-grid-two" v-else-if="moreRecommend.length > 0">
+					<view class="book-item-two" v-for="(book, index) in moreRecommend" :key="book.id || index" @click="goToBookDetail(book)">
+						<image class="book-cover-two" :src="book.image" mode="aspectFill" :lazy-load="true" @error="handleBookImageError(book, 'moreRecommend')"></image>
+						<text class="book-title-two">{{ book.title }}</text>
+						<text class="book-author-two">{{ book.author }}</text>
+					</view>
+				</view>
+				<view class="empty-state" v-else>
+					<text class="empty-text">暂无推荐书籍</text>
+					<text class="empty-hint">请检查后端服务或数据库</text>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getTodayRecommend, getBestsellers, getFeaturedList, getMoreRecommend, getBannersByCode } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			// 生成高质量、高雅、大气的图书相关图片URL的函数
+			const getBookImage = (index) => {
+				// 使用更优雅的图书相关关键词,确保图片高雅大气
+				const elegantKeywords = [
+					'classic+books+library',  // 经典图书图书馆
+					'literature+books+elegant',  // 文学书籍优雅
+					'ancient+books+scholarship',  // 古籍学术
+					'reading+books+premium',  // 阅读书籍高端
+					'bookshelf+library+grand'  // 书架图书馆宏伟
+				];
+				const keyword = elegantKeywords[index % elegantKeywords.length];
+				// 使用 Unsplash 高质量图片,尺寸较大确保清晰度
+				// 使用不同的随机数确保每次获取不同的高雅图片
+				return `https://source.unsplash.com/1080x600/?${keyword}&sig=${Date.now() + index}`;
+			};
+			
+			return {
+				bannerList: [],
+				categories: [
+					{ name: '全部分类', icon: '📄', color: '#81C784' },
+					{ name: '排行榜', icon: '👑', color: '#FFD54F' },
+					{ name: '热门书籍', icon: '🔥', color: '#E57373' },
+					{ name: '新书榜', icon: '📖', color: '#81C784' },
+					{ name: 'VIP书籍', icon: '📚', color: '#4FC3F7' }
+				],
+				todayRecommend: [],
+				bestsellers: [],
+				featuredList: [],
+				moreRecommend: [],
+				isLoading: false,
+				featuredLoading: false,
+				moreLoading: false
+			}
+		},
+		onLoad() {
+			this.loadBanners()
+			this.loadTodayRecommend()
+			this.loadBestsellers()
+			this.loadFeaturedList()
+			this.loadMoreRecommend()
+		},
+		onShow() {
+			// 页面显示时刷新数据
+			this.loadTodayRecommend()
+			this.loadBestsellers()
+			this.loadFeaturedList()
+			this.loadMoreRecommend()
+		},
+		methods: {
+			async loadBanners() {
+				try {
+					const res = await getBannersByCode('home_banner')
+					if (res && res.code === 200 && Array.isArray(res.data)) {
+						this.bannerList = res.data.map(b => ({
+							image: b.image,
+							title: b.title || '',
+							targetType: b.targetType,
+							targetId: b.targetId,
+							link: b.link
+						}))
+					}
+				} catch (e) {
+					console.error('加载轮播失败', e)
+				}
+			},
+			// 加载今日推荐
+			loadTodayRecommend() {
+				console.log('开始加载今日推荐...')
+				this.isLoading = true
+				getTodayRecommend(8)
+					.then((res) => {
+						console.log('今日推荐API响应:', res)
+						this.isLoading = false
+						
+						// 检查响应数据
+						if (res && res.code === 200) {
+							// 检查data是否存在且是数组
+							if (res.data && Array.isArray(res.data) && res.data.length > 0) {
+								// 处理数据格式,确保图片URL正确
+								this.todayRecommend = res.data.map((book) => {
+									return {
+										id: book.id,
+										title: book.title || '未知书名',
+										image: book.image || book.cover || 'https://picsum.photos/seed/default/200/300',
+										author: book.author || ''
+									}
+								})
+								console.log('今日推荐数据加载成功,共', this.todayRecommend.length, '本')
+							} else {
+								console.warn('今日推荐数据为空或格式不正确:', res.data)
+								this.todayRecommend = []
+							}
+						} else {
+							console.warn('今日推荐API返回错误:', res)
+							this.todayRecommend = []
+							// 显示错误提示
+							uni.showToast({
+								title: res.message || '获取推荐失败',
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					})
+					.catch((err) => {
+						this.isLoading = false
+						console.error('获取今日推荐失败:', err)
+						this.todayRecommend = []
+						// 显示错误提示
+						uni.showToast({
+							title: err.message || '网络请求失败,请检查后端服务',
+							icon: 'none',
+							duration: 3000
+						})
+					})
+			},
+			// 加载畅销书籍
+			loadBestsellers() {
+				console.log('开始加载畅销书籍...')
+				this.isLoading = true
+				getBestsellers(10)
+					.then((res) => {
+						console.log('畅销书籍API响应:', res)
+						this.isLoading = false
+						
+						// 检查响应数据
+						if (res && res.code === 200) {
+							// 检查data是否存在且是数组
+							if (res.data && Array.isArray(res.data) && res.data.length > 0) {
+								// 处理数据格式,确保图片URL和描述正确
+								this.bestsellers = res.data.map((book) => {
+									return {
+										id: book.id,
+										title: book.title || '未知书名',
+										desc: book.desc || book.brief || book.introduction || '',
+										author: book.author || '',
+										image: book.image || book.cover || 'https://picsum.photos/seed/default/200/300'
+									}
+								})
+								console.log('畅销书籍数据加载成功,共', this.bestsellers.length, '本')
+							} else {
+								console.warn('畅销书籍数据为空或格式不正确:', res.data)
+								this.bestsellers = []
+							}
+						} else {
+							console.warn('畅销书籍API返回错误:', res)
+							this.bestsellers = []
+							// 显示错误提示
+							uni.showToast({
+								title: res.message || '获取畅销书籍失败',
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					})
+					.catch((err) => {
+						this.isLoading = false
+						console.error('获取畅销书籍失败:', err)
+						this.bestsellers = []
+						// 显示错误提示
+						uni.showToast({
+							title: err.message || '网络请求失败,请检查后端服务',
+							icon: 'none',
+							duration: 3000
+						})
+					})
+			},
+			// 加载精品书单
+			loadFeaturedList() {
+				console.log('开始加载精品书单...')
+				this.featuredLoading = true
+				getFeaturedList(4)
+					.then((res) => {
+						console.log('精品书单API响应:', res)
+						this.featuredLoading = false
+						if (res && res.code === 200) {
+							if (res.data && Array.isArray(res.data) && res.data.length > 0) {
+								this.featuredList = res.data.map((book) => {
+									return {
+										id: book.id,
+										title: book.title || '未知书名',
+										image: book.image || book.cover || 'https://picsum.photos/seed/featured/200/300'
+									}
+								})
+								console.log('精品书单加载成功,共', this.featuredList.length, '本')
+							} else {
+								console.warn('精品书单数据为空或格式不正确:', res.data)
+								this.featuredList = []
+							}
+						} else {
+							console.warn('精品书单API返回错误:', res)
+							this.featuredList = []
+							uni.showToast({
+								title: res.message || '获取精品书单失败',
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					})
+					.catch((err) => {
+						this.featuredLoading = false
+						console.error('获取精品书单失败:', err)
+						this.featuredList = []
+						uni.showToast({
+							title: err.message || '网络请求失败,请检查后端服务',
+							icon: 'none',
+							duration: 3000
+						})
+					})
+			},
+			// 加载更多推荐书籍
+			loadMoreRecommend() {
+				console.log('开始加载更多推荐书籍...')
+				this.moreLoading = true
+				getMoreRecommend(6)
+					.then((res) => {
+						console.log('更多推荐API响应:', res)
+						this.moreLoading = false
+						if (res && res.code === 200) {
+							if (res.data && Array.isArray(res.data) && res.data.length > 0) {
+								this.moreRecommend = res.data.map((book) => {
+									return {
+										id: book.id,
+										title: book.title || '未知书名',
+										author: book.author || '',
+										image: book.image || book.cover || 'https://picsum.photos/seed/more/200/300'
+									}
+								})
+								console.log('更多推荐加载成功,共', this.moreRecommend.length, '本')
+							} else {
+								console.warn('更多推荐数据为空或格式不正确:', res.data)
+								this.moreRecommend = []
+							}
+						} else {
+							console.warn('更多推荐API返回错误:', res)
+							this.moreRecommend = []
+							uni.showToast({
+								title: res.message || '获取更多推荐失败',
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					})
+					.catch((err) => {
+						this.moreLoading = false
+						console.error('获取更多推荐失败:', err)
+						this.moreRecommend = []
+						uni.showToast({
+							title: err.message || '网络请求失败,请检查后端服务',
+							icon: 'none',
+							duration: 3000
+						})
+					})
+			},
+			handleCategoryClick(item, index) {
+				if (index === 0) {
+					uni.navigateTo({
+						url: '/pages/category/category'
+					})
+				} else if (index === 1) {
+					uni.navigateTo({
+						url: '/pages/ranking/ranking'
+					})
+				} else if (index === 2) {
+					uni.navigateTo({
+						url: '/pages/hot-books/hot-books'
+					})
+				} else if (index === 3) {
+					uni.navigateTo({
+						url: '/pages/new-books/new-books'
+					})
+				} else if (index === 4) {
+					uni.navigateTo({
+						url: '/pages/vip-books/vip-books'
+					})
+				}
+			},
+			goToBookDetail(book) {
+				if (!book || !book.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/book-detail/book-detail?bookId=${book.id}`
+				})
+			},
+			goToMoreBooks(type) {
+				uni.navigateTo({
+					url: `/pages/more-books/more-books?type=${type}`
+				})
+			},
+			goToSearch() {
+				uni.navigateTo({
+					url: '/pages/search/search'
+				})
+			},
+			handleBannerClick(item) {
+				if (!item) return
+				console.log('轮播图点击:', item)
+				// 优先检查 targetType 和 targetId
+				if (item.targetType === 'book' && item.targetId) {
+					this.goToBookDetail({ id: item.targetId })
+					return
+				}
+				if (item.targetType === 'audiobook' && item.targetId) {
+					uni.navigateTo({ url: `/pages/listen-detail/listen-detail?audiobookId=${item.targetId}` })
+					return
+				}
+				// 检查是否为外链跳转
+				if (item.targetType === 'url' && item.link) {
+					// H5可直接跳转
+					// #ifdef H5
+					window.location.href = item.link
+					// #endif
+					// 小程序环境提示
+					// #ifdef MP-WEIXIN
+					uni.showModal({
+						title: '提示',
+						content: '此链接需要复制后在浏览器打开',
+						confirmText: '复制链接',
+						success: (res) => {
+							if (res.confirm) {
+								uni.setClipboardData({
+									data: item.link,
+									success: () => {
+										uni.showToast({
+											title: '链接已复制',
+											icon: 'success'
+										})
+									}
+								})
+							}
+						}
+					})
+					// #endif
+					// APP环境使用浏览器打开
+					// #ifdef APP-PLUS
+					plus.runtime.openURL(item.link)
+					// #endif
+					return
+				}
+				// 如果没有设置跳转类型但有链接,也尝试跳转(兼容旧数据)
+				if (item.link && !item.targetType) {
+					// #ifdef H5
+					window.location.href = item.link
+					// #endif
+				}
+			},
+			handleImageError(index) {
+				// 图片加载失败时使用备用图片
+				const fallbackImages = [
+					'https://picsum.photos/seed/library1/1080/600',
+					'https://picsum.photos/seed/library2/1080/600',
+					'https://picsum.photos/seed/library3/1080/600',
+					'https://picsum.photos/seed/library4/1080/600',
+					'https://picsum.photos/seed/library5/1080/600'
+				];
+				if (this.bannerList[index]) {
+					this.bannerList[index].image = fallbackImages[index] || fallbackImages[0];
+				}
+			},
+			handleBookImageError(book, listType) {
+				// 书籍图片加载失败时使用备用图片
+				book.image = 'https://picsum.photos/seed/default/200/300'
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #F5F5F5;
+		display: flex;
+		flex-direction: column;
+		padding-top: 60px;
+		box-sizing: border-box;
+	}
+	
+	.search-bar {
+		position: relative;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.search-input {
+		width: 100%;
+		height: 70rpx;
+		background-color: #F5F5F5;
+		border-radius: 35rpx;
+		padding: 0 80rpx 0 30rpx;
+		font-size: 28rpx;
+		color: #333333;
+	}
+	
+	.search-icon {
+		position: absolute;
+		right: 50rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 32rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+	}
+	
+	.swiper-container {
+		width: 100%;
+		height: 360rpx;
+		margin-bottom: 20rpx;
+		background-color: #F5F5F5;
+		border-radius: 0;
+		overflow: hidden;
+	}
+	
+	.swiper {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.swiper-item-wrapper {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	
+	.swiper-image {
+		width: 100%;
+		height: 100%;
+		display: block;
+		object-fit: cover;
+	}
+	
+	.swiper-overlay {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
+		padding: 60rpx 40rpx 30rpx;
+	}
+	
+	.swiper-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+		text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.5);
+	}
+	
+	.category-nav {
+		display: flex;
+		justify-content: space-around;
+		padding: 40rpx 20rpx;
+		background-color: #FFFFFF;
+		margin-bottom: 20rpx;
+	}
+	
+	.category-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	
+	.category-icon {
+		width: 90rpx;
+		height: 90rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 15rpx;
+	}
+	
+	.icon-text {
+		font-size: 44rpx;
+	}
+	
+	.category-text {
+		font-size: 24rpx;
+		color: #333333;
+	}
+	
+	.section {
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+		margin-bottom: 20rpx;
+	}
+	
+	.section-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+	}
+	
+	.section-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.section-more {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.book-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	
+	.book-item {
+		width: 160rpx;
+		margin-bottom: 30rpx;
+	}
+	
+	.book-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-bottom: 15rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-name {
+		font-size: 24rpx;
+		color: #333333;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-list {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.book-list-item {
+		display: flex;
+		margin-bottom: 30rpx;
+		align-items: center;
+	}
+	
+	.book-cover-small {
+		width: 120rpx;
+		height: 160rpx;
+		border-radius: 8rpx;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 10rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-desc {
+		font-size: 26rpx;
+		color: #666666;
+		line-height: 1.4;
+		margin-bottom: 10rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+	}
+	
+	.book-author {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.book-list-horizontal {
+		white-space: nowrap;
+		width: 100%;
+		height: 280rpx;
+	}
+	
+	.book-item-horizontal {
+		display: inline-block;
+		width: 160rpx;
+		margin-right: 20rpx;
+		vertical-align: top;
+	}
+	
+	.book-cover-horizontal {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-bottom: 15rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-name-horizontal {
+		font-size: 24rpx;
+		color: #333333;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-grid-two {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	
+	.book-item-two {
+		width: calc(50% - 10rpx);
+		margin-bottom: 30rpx;
+	}
+	
+	.book-cover-two {
+		width: 100%;
+		height: 280rpx;
+		border-radius: 8rpx;
+		margin-bottom: 15rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-title-two {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 8rpx;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-author-two {
+		font-size: 24rpx;
+		color: #999999;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.empty-state {
+		padding: 60rpx 0;
+		text-align: center;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+		display: block;
+		margin-bottom: 10rpx;
+	}
+	
+	.empty-hint {
+		font-size: 24rpx;
+		color: #CCCCCC;
+		display: block;
+	}
+	
+	.loading-state {
+		padding: 60rpx 0;
+		text-align: center;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>

+ 748 - 0
pages/listen-detail/listen-detail.vue

@@ -0,0 +1,748 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<view class="share-btn" @click="handleShare">
+				<text class="share-icon">↗</text>
+			</view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 书籍信息 -->
+			<view class="book-info-section" v-if="!isLoading">
+				<image class="book-cover" :src="bookInfo.image || bookInfo.cover" mode="aspectFill"></image>
+				<view class="book-details">
+					<text class="book-title">{{ bookInfo.title }}</text>
+					<text class="book-desc" v-if="bookInfo.desc || bookInfo.brief || bookInfo.introduction">{{ bookInfo.desc || bookInfo.brief || bookInfo.introduction }}</text>
+					<text class="book-author" v-if="bookInfo.author">{{ bookInfo.author }}</text>
+					<text class="book-narrator" v-if="bookInfo.narrator">主播:{{ bookInfo.narrator }}</text>
+					<view class="action-buttons">
+						<button class="play-all-btn" @click="playAll">播放全部</button>
+						<button class="add-to-shelf-btn" :class="{ 'in-bookshelf': isInBookshelf }" @click="addToShelf">
+							{{ isInBookshelf ? '已在书架' : '加入书架' }}
+						</button>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 加载中 -->
+			<view class="loading-section" v-if="isLoading">
+				<text class="loading-text">加载中...</text>
+			</view>
+			
+			<!-- 标签页 -->
+			<view class="tabs">
+				<view 
+					class="tab-item" 
+					:class="{ active: currentTab === 'catalog' }"
+					@click="switchTab('catalog')"
+				>
+					<text class="tab-text">目录</text>
+				</view>
+				<view 
+					class="tab-item" 
+					:class="{ active: currentTab === 'comments' }"
+					@click="switchTab('comments')"
+				>
+					<text class="tab-text">评论</text>
+				</view>
+			</view>
+			
+			<!-- 目录内容 -->
+			<view class="content-section" v-if="currentTab === 'catalog'">
+				<view 
+					class="chapter-item" 
+					v-for="(chapter, index) in chapters" 
+					:key="chapter.id || index"
+					@click="playChapter(chapter, index)"
+				>
+					<text class="chapter-number">{{ index + 1 }}.</text>
+					<view class="chapter-info">
+						<text class="chapter-title">{{ chapter.title }}</text>
+						<view class="chapter-meta">
+							<view class="chapter-status" v-if="chapter.isFree">
+								<text class="status-text">免费</text>
+							</view>
+							<text class="chapter-lock" v-else>🔒</text>
+							<text class="chapter-duration">{{ chapter.duration }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="empty-chapters" v-if="!isLoading && chapters.length === 0">
+					<text class="empty-text">暂无章节</text>
+				</view>
+			</view>
+			
+			<!-- 评论内容 -->
+			<view class="content-section" v-if="currentTab === 'comments'">
+				<view class="comment-list">
+					<view class="comment-item" v-for="(comment, index) in comments" :key="index">
+						<image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
+						<view class="comment-content">
+							<view class="comment-header">
+								<text class="comment-name">{{ comment.name }}</text>
+								<text class="comment-date">{{ comment.date }}</text>
+							</view>
+							<text class="comment-text">{{ comment.content }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="no-comments" v-if="comments.length === 0">
+					<text class="no-comments-text">暂无评论</text>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getAudiobookDetail, recordListeningHistory, addAudiobookToBookshelf, checkAudiobookInBookshelf, removeAudiobookFromBookshelf } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				currentTab: 'catalog',
+				audiobookId: null,
+				bookInfo: {
+					id: null,
+					title: '',
+					desc: '',
+					brief: '',
+					introduction: '',
+					author: '',
+					image: '',
+					cover: '',
+					narrator: ''
+				},
+				chapters: [],
+				comments: [],
+				isLoading: false,
+				userInfo: null,
+				isInBookshelf: false,
+				checkingBookshelf: false
+			}
+		},
+		onLoad(options) {
+			// 从路由参数获取audiobookId
+			if (options.audiobookId) {
+				this.audiobookId = parseInt(options.audiobookId)
+			} else if (options.bookId) {
+				// 兼容旧的bookId参数
+				this.audiobookId = parseInt(options.bookId)
+			}
+			
+			// 加载用户信息
+			this.loadUserInfo()
+			
+			// 加载听书详情(从数据库获取完整数据)
+			if (this.audiobookId) {
+				this.loadAudiobookDetail()
+			} else {
+				uni.showToast({
+					title: '听书ID不能为空',
+					icon: 'none'
+				})
+			}
+		},
+		onShow() {
+			// 页面显示时重新加载用户信息和书架状态
+			this.loadUserInfo()
+			if (this.audiobookId && this.userInfo && this.userInfo.id) {
+				this.checkBookshelfStatus()
+			}
+		},
+		methods: {
+			loadUserInfo() {
+				try {
+					const userInfo = uni.getStorageSync('userInfo')
+					const isLogin = uni.getStorageSync('isLogin')
+					if (userInfo && userInfo.id && isLogin) {
+						this.userInfo = userInfo
+					}
+				} catch (e) {
+					console.error('获取用户信息失败:', e)
+				}
+			},
+			async loadAudiobookDetail() {
+				try {
+					this.isLoading = true
+					const userId = this.userInfo ? this.userInfo.id : null
+					const res = await getAudiobookDetail(this.audiobookId, userId)
+					
+					if (res && res.code === 200 && res.data) {
+						const data = res.data
+						// 更新听书信息
+						if (data.audiobook) {
+							const audiobook = data.audiobook
+							this.bookInfo = {
+								id: audiobook.id,
+								title: audiobook.title || '',
+								desc: audiobook.desc || audiobook.brief || '',
+								brief: audiobook.brief || audiobook.desc || '',
+								introduction: audiobook.introduction || audiobook.desc || audiobook.brief || '',
+								author: audiobook.author || '',
+								image: audiobook.image || audiobook.cover || '',
+								cover: audiobook.cover || audiobook.image || '',
+								narrator: audiobook.narrator || ''
+							}
+							
+							// 如果描述为空,使用简介作为描述
+							if (!this.bookInfo.desc && this.bookInfo.brief) {
+								this.bookInfo.desc = this.bookInfo.brief
+							}
+							
+							// 如果简介为空,使用描述作为简介
+							if (!this.bookInfo.brief && this.bookInfo.desc) {
+								this.bookInfo.brief = this.bookInfo.desc
+							}
+						}
+						
+						// 更新章节列表
+						if (data.chapters && Array.isArray(data.chapters)) {
+							this.chapters = data.chapters.map(ch => ({
+								id: ch.id,
+								title: ch.title,
+								isFree: ch.isFree || false,
+								duration: ch.durationText || ch.duration || '00:00',
+								durationSeconds: ch.duration || 0,
+								audioUrl: ch.audioUrl || ''
+							}))
+						}
+						
+						// 加载完成后检查书架状态
+						if (this.userInfo && this.userInfo.id) {
+							this.checkBookshelfStatus()
+						}
+					}
+				} catch (e) {
+					console.error('加载听书详情失败:', e)
+					uni.showToast({
+						title: '加载失败,请重试',
+						icon: 'none'
+					})
+				} finally {
+					this.isLoading = false
+				}
+			},
+			async checkBookshelfStatus() {
+				if (!this.userInfo || !this.userInfo.id || !this.audiobookId) {
+					this.isInBookshelf = false
+					return
+				}
+				
+				if (this.checkingBookshelf) {
+					return
+				}
+				
+				try {
+					this.checkingBookshelf = true
+					const res = await checkAudiobookInBookshelf(this.userInfo.id, this.audiobookId)
+					if (res && res.code === 200) {
+						this.isInBookshelf = res.data === true
+					}
+				} catch (e) {
+					console.error('检查书架状态失败:', e)
+					this.isInBookshelf = false
+				} finally {
+					this.checkingBookshelf = false
+				}
+			},
+			goBack() {
+				uni.navigateBack()
+			},
+			handleShare() {
+				uni.showToast({
+					title: '分享功能',
+					icon: 'none'
+				})
+			},
+			switchTab(tab) {
+				this.currentTab = tab
+			},
+			playAll() {
+				const firstFreeChapter = this.chapters.find(ch => ch.isFree)
+				if (firstFreeChapter) {
+					const index = this.chapters.indexOf(firstFreeChapter)
+					this.playChapter(firstFreeChapter, index)
+				} else {
+					uni.showModal({
+						title: '提示',
+						content: '该书籍需要VIP会员才能播放',
+						showCancel: true,
+						cancelText: '取消',
+						confirmText: '开通VIP',
+						success: (res) => {
+							if (res.confirm) {
+								uni.navigateTo({
+									url: '/pages/vip/vip'
+								})
+							}
+						}
+					})
+				}
+			},
+			async addToShelf() {
+				// 检查用户是否登录
+				if (!this.userInfo || !this.userInfo.id) {
+					uni.showModal({
+						title: '提示',
+						content: '请先登录',
+						showCancel: true,
+						cancelText: '取消',
+						confirmText: '去登录',
+						success: (res) => {
+							if (res.confirm) {
+								uni.navigateTo({
+									url: '/pages/login/login'
+								})
+							}
+						}
+					})
+					return
+				}
+				
+				// 如果已在书架中,则移除
+				if (this.isInBookshelf) {
+					try {
+						const res = await removeAudiobookFromBookshelf(this.userInfo.id, this.audiobookId)
+						if (res && res.code === 200) {
+							this.isInBookshelf = false
+							uni.showToast({
+								title: '已从书架移除',
+								icon: 'success'
+							})
+						} else {
+							uni.showToast({
+								title: res.msg || '移除失败',
+								icon: 'none'
+							})
+						}
+					} catch (e) {
+						console.error('移除书架失败:', e)
+						uni.showToast({
+							title: '移除失败,请重试',
+							icon: 'none'
+						})
+					}
+					return
+				}
+				
+				// 添加到书架
+				try {
+					const res = await addAudiobookToBookshelf(this.userInfo.id, this.audiobookId)
+					if (res && res.code === 200) {
+						this.isInBookshelf = true
+						uni.showToast({
+							title: '已加入书架',
+							icon: 'success'
+						})
+					} else {
+						uni.showToast({
+							title: res.msg || '加入失败',
+							icon: 'none'
+						})
+					}
+				} catch (e) {
+					console.error('加入书架失败:', e)
+					if (e.message && e.message.includes('已在书架中')) {
+						this.isInBookshelf = true
+						uni.showToast({
+							title: '已在书架中',
+							icon: 'none'
+						})
+					} else {
+						uni.showToast({
+							title: '加入失败,请重试',
+							icon: 'none'
+						})
+					}
+				}
+			},
+			async playChapter(chapter, index) {
+				if (!chapter.isFree) {
+					// 检查用户VIP状态
+					if (!this.userInfo || !this.userInfo.isVip) {
+						uni.showModal({
+							title: '提示',
+							content: '该章节需要VIP会员才能播放',
+							showCancel: true,
+							cancelText: '取消',
+							confirmText: '开通VIP',
+							success: (res) => {
+								if (res.confirm) {
+									uni.navigateTo({
+										url: '/pages/vip/vip'
+									})
+								}
+							}
+						})
+						return
+					}
+				}
+				
+				// 记录听书历史
+				if (this.userInfo && this.userInfo.id) {
+					try {
+						await recordListeningHistory(this.userInfo.id, this.audiobookId, chapter.id)
+					} catch (e) {
+						console.error('记录听书历史失败:', e)
+					}
+				}
+				
+				// 跳转到播放页面
+				uni.navigateTo({
+					url: `/pages/player/player?audiobookId=${this.audiobookId}&title=${encodeURIComponent(this.bookInfo.title)}&image=${encodeURIComponent(this.bookInfo.image)}&author=${encodeURIComponent(this.bookInfo.author)}&chapterId=${chapter.id}&chapterTitle=${encodeURIComponent(chapter.title)}&audioUrl=${encodeURIComponent(chapter.audioUrl || '')}`
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E0E0E0;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.share-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.share-icon {
+		font-size: 36rpx;
+		color: #333333;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+	}
+	
+	.book-info-section {
+		display: flex;
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.book-cover {
+		width: 200rpx;
+		height: 280rpx;
+		border-radius: 8rpx;
+		margin-right: 30rpx;
+		flex-shrink: 0;
+		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
+		background-color: #F5F5F5;
+	}
+	
+	.book-details {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 20rpx;
+		line-height: 1.4;
+	}
+	
+	.book-desc {
+		font-size: 26rpx;
+		color: #666666;
+		line-height: 1.6;
+		margin-bottom: 20rpx;
+	}
+	
+	.book-author {
+		font-size: 24rpx;
+		color: #999999;
+		margin-bottom: 15rpx;
+	}
+	
+	.book-narrator {
+		font-size: 24rpx;
+		color: #999999;
+		margin-bottom: 30rpx;
+	}
+	
+	.loading-section {
+		padding: 100rpx 30rpx;
+		text-align: center;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.empty-chapters {
+		padding: 100rpx 30rpx;
+		text-align: center;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.action-buttons {
+		display: flex;
+		gap: 20rpx;
+	}
+	
+	.play-all-btn {
+		flex: 1;
+		height: 80rpx;
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		border: none;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.play-all-btn::after {
+		border: none;
+	}
+	
+	.add-to-shelf-btn {
+		flex: 1;
+		height: 80rpx;
+		background-color: #FFFFFF;
+		color: #666666;
+		font-size: 30rpx;
+		border: 1rpx solid #E0E0E0;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.add-to-shelf-btn::after {
+		border: none;
+	}
+	
+	.add-to-shelf-btn.in-bookshelf {
+		background-color: #F5F5F5;
+		color: #999999;
+		border-color: #E0E0E0;
+	}
+	
+	.tabs {
+		display: flex;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E0E0E0;
+		padding: 0 30rpx;
+	}
+	
+	.tab-item {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 30rpx 0;
+		position: relative;
+	}
+	
+	.tab-item.active .tab-text {
+		color: #4FC3F7;
+		font-weight: bold;
+	}
+	
+	.tab-item.active::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 60rpx;
+		height: 4rpx;
+		background-color: #4FC3F7;
+		border-radius: 2rpx;
+	}
+	
+	.tab-text {
+		font-size: 32rpx;
+		color: #999999;
+	}
+	
+	.content-section {
+		background-color: #FFFFFF;
+		padding: 0 30rpx;
+	}
+	
+	.chapter-item {
+		display: flex;
+		align-items: center;
+		padding: 30rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.chapter-item:last-child {
+		border-bottom: none;
+	}
+	
+	.chapter-number {
+		font-size: 28rpx;
+		color: #999999;
+		margin-right: 20rpx;
+		width: 40rpx;
+		flex-shrink: 0;
+	}
+	
+	.chapter-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+	
+	.chapter-title {
+		font-size: 30rpx;
+		color: #333333;
+		margin-bottom: 15rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.chapter-meta {
+		display: flex;
+		align-items: center;
+		gap: 15rpx;
+	}
+	
+	.chapter-status {
+		background-color: #4FC3F7;
+		padding: 4rpx 12rpx;
+		border-radius: 12rpx;
+	}
+	
+	.status-text {
+		font-size: 20rpx;
+		color: #FFFFFF;
+	}
+	
+	.chapter-lock {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.chapter-duration {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.comment-list {
+		display: flex;
+		flex-direction: column;
+		padding: 30rpx 0;
+	}
+	
+	.comment-item {
+		display: flex;
+		margin-bottom: 40rpx;
+		padding-bottom: 40rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.comment-item:last-child {
+		border-bottom: none;
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+	
+	.comment-avatar {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 50%;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+		background-color: #F5F5F5;
+	}
+	
+	.comment-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+	
+	.comment-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 15rpx;
+	}
+	
+	.comment-name {
+		font-size: 28rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.comment-date {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.comment-text {
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.6;
+	}
+	
+	.no-comments {
+		padding: 100rpx 0;
+		text-align: center;
+	}
+	
+	.no-comments-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>
+
+

+ 645 - 0
pages/listen/listen.vue

@@ -0,0 +1,645 @@
+<template>
+	<view class="container">
+		<!-- 搜索栏 -->
+		<view class="search-bar">
+			<input class="search-input" v-model="searchKeyword" placeholder="搜索听书:书名/作者/主播" confirm-type="search" @confirm="submitSearch" />
+			<text class="search-icon" @click="submitSearch">🔍</text>
+		</view>
+		
+			<!-- 推荐横幅轮播 -->
+		<view class="banner-section" v-if="bannerBooks && bannerBooks.length > 0">
+			<swiper 
+				class="banner-swiper" 
+				:indicator-dots="bannerBooks.length > 1" 
+				:autoplay="bannerBooks.length > 1" 
+				:interval="3000" 
+				:duration="500"
+				indicator-color="rgba(255,255,255,0.5)"
+				indicator-active-color="#FF1744"
+				:circular="bannerBooks.length > 1"
+			>
+				<swiper-item v-for="(book, index) in bannerBooks" :key="book.id || index">
+					<view class="banner-content" @click="goToListenDetail(book)">
+						<image class="banner-cover" :src="book.image" mode="aspectFill" @error="handleBannerImageError(index)"></image>
+						<view class="banner-info">
+							<text class="banner-title">{{ book.title || '听书推荐' }}</text>
+							<text class="banner-subtitle" v-if="book.subtitle">{{ book.subtitle }}</text>
+							<text class="banner-desc" v-if="book.desc">{{ book.desc }}</text>
+							<text class="banner-tag" v-if="book.tag">{{ book.tag }}</text>
+						</view>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+		
+		<!-- 分类导航 -->
+		<view class="category-nav">
+			<view class="category-item" v-for="(item, index) in categories" :key="index" @click="handleCategoryClick(item, index)">
+				<view class="category-icon" :style="{ backgroundColor: item.color }">
+					<text class="icon-text">{{ item.icon }}</text>
+				</view>
+				<text class="category-text">{{ item.name }}</text>
+			</view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 最近上新 -->
+			<view class="section" v-if="recentBooks.length > 0">
+				<view class="section-header">
+					<text class="section-title">最近上新</text>
+					<text class="section-more" @click.stop="goToMoreBooks('recent')">更多 ></text>
+				</view>
+				<view class="book-grid">
+					<view class="book-item" v-for="(book, index) in recentBooks" :key="book.id || index" @click="goToListenDetail(book)">
+						<view class="book-cover-wrapper">
+							<image class="book-cover" :src="book.image" mode="aspectFill" :lazy-load="true"></image>
+							<view class="play-icon-overlay">
+								<text class="play-icon">▶</text>
+							</view>
+						</view>
+						<text class="book-name">{{ book.title }}</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 猜你喜欢 -->
+			<view class="section" v-if="recommendBooks.length > 0">
+				<view class="section-header">
+					<text class="section-title">猜你喜欢</text>
+					<text class="section-more" @click.stop="goToMoreBooks('guess')">更多 ></text>
+				</view>
+				<view class="book-list">
+					<view class="book-list-item" v-for="(book, index) in recommendBooks" :key="book.id || index" @click="goToListenDetail(book)">
+						<image class="book-cover-small" :src="book.image" mode="aspectFill" :lazy-load="true"></image>
+						<view class="book-info">
+							<text class="book-title">{{ book.title }}</text>
+							<text class="book-desc">{{ book.desc }}</text>
+							<text class="book-author">{{ book.author }}</text>
+							<view class="play-button" @click.stop="playBook(book)">
+								<text class="play-button-icon">▶</text>
+								<text class="play-button-text">播放</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 加载中 -->
+			<view class="loading-section" v-if="isLoading">
+				<text class="loading-text">加载中...</text>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-section" v-if="!isLoading && recentBooks.length === 0 && recommendBooks.length === 0">
+				<text class="empty-text">暂无听书内容</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getRecentAudiobooks, getRecommendAudiobooks, getBannersByCode } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				searchKeyword: '',
+				bannerBooks: [],
+				categories: [
+					{ name: '全部分类', icon: '📄', color: '#81C784' },
+					{ name: '畅听榜', icon: '👑', color: '#FFD54F' },
+					{ name: '热门听书', icon: '🔥', color: '#E57373' },
+					{ name: '随身听', icon: '🎧', color: '#81C784' },
+					{ name: '有声小说', icon: '📚', color: '#4FC3F7' }
+				],
+				recentBooks: [],
+				recommendBooks: [],
+				isLoading: false
+			}
+		},
+		onLoad() {
+			this.loadData()
+		},
+		methods: {
+			submitSearch() {
+				const kw = (this.searchKeyword || '').trim()
+				if (!kw) {
+					uni.showToast({ title: '请输入关键词', icon: 'none' })
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/search/search?mode=audio&keyword=${encodeURIComponent(kw)}`
+				})
+			},
+			async loadData() {
+				try {
+					this.isLoading = true
+					// 从数据库加载轮播图
+					await this.loadBanners()
+					
+					// 加载最近上新
+					const recentRes = await getRecentAudiobooks(8)
+					if (recentRes && recentRes.code === 200 && recentRes.data) {
+						this.recentBooks = recentRes.data.map(item => ({
+							id: item.id,
+							title: item.title,
+							image: item.image || item.cover || 'https://picsum.photos/seed/default/200/300',
+							author: item.author || ''
+						}))
+					}
+					
+					// 加载推荐听书
+					const recommendRes = await getRecommendAudiobooks(10)
+					if (recommendRes && recommendRes.code === 200 && recommendRes.data) {
+						this.recommendBooks = recommendRes.data.map(item => ({
+							id: item.id,
+							title: item.title,
+							desc: item.brief || item.desc || '',
+							author: item.author || '',
+							image: item.image || item.cover || 'https://picsum.photos/seed/default/200/300'
+						}))
+					}
+				} catch (e) {
+					console.error('加载听书数据失败:', e)
+					uni.showToast({
+						title: '加载失败,请重试',
+						icon: 'none'
+					})
+				} finally {
+					this.isLoading = false
+				}
+			},
+			async loadBanners() {
+				try {
+					console.log('开始加载听书轮播图...')
+					const res = await getBannersByCode('audio_banner')
+					console.log('轮播图API响应:', res)
+					
+					if (res && res.code === 200) {
+						if (Array.isArray(res.data) && res.data.length > 0) {
+							this.bannerBooks = res.data.map(b => ({
+								id: b.targetId || b.id,
+								title: b.title || '听书推荐',
+								subtitle: b.narrator ? `主播:${b.narrator}` : '',
+								desc: b.desc || b.brief || '',
+								tag: b.targetType === 'audiobook' ? '听书' : (b.targetType === 'book' ? '书籍' : ''),
+								image: b.image || 'https://picsum.photos/seed/default/200/300',
+								targetType: b.targetType,
+								targetId: b.targetId,
+								link: b.link
+							}))
+							console.log('轮播图数据加载成功,共', this.bannerBooks.length, '条')
+						} else {
+							console.warn('轮播图数据为空')
+							this.bannerBooks = []
+						}
+					} else {
+						console.warn('轮播图API返回错误:', res)
+						this.bannerBooks = []
+					}
+				} catch (e) {
+					console.error('加载轮播图失败:', e)
+					this.bannerBooks = []
+					// 不显示错误提示,避免影响用户体验
+				}
+			},
+			handleCategoryClick(item, index) {
+				if (index === 0) {
+					uni.showToast({
+						title: '全部分类',
+						icon: 'none'
+					})
+				} else if (index === 1) {
+					uni.navigateTo({
+						url: '/pages/ranking/ranking'
+					})
+				} else if (index === 2) {
+					uni.navigateTo({
+						url: '/pages/hot-listen/hot-listen'
+					})
+				} else if (index === 3) {
+					uni.navigateTo({
+						url: '/pages/portable-listen/portable-listen'
+					})
+				} else if (index === 4) {
+					uni.navigateTo({
+						url: '/pages/audio-novel/audio-novel'
+					})
+				}
+			},
+			goToListenDetail(book) {
+				if (!book) {
+					uni.showToast({
+						title: '听书信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				// 如果是从轮播图点击,需要根据targetType和targetId判断跳转
+				if (book.targetType && book.targetId) {
+					if (book.targetType === 'audiobook') {
+						uni.navigateTo({
+							url: `/pages/listen-detail/listen-detail?audiobookId=${book.targetId}`
+						})
+						return
+					} else if (book.targetType === 'book') {
+						uni.navigateTo({
+							url: `/pages/book-detail/book-detail?bookId=${book.targetId}`
+						})
+						return
+					} else if (book.targetType === 'url' && book.link) {
+						// H5可直接跳转,小程序需要特殊处理
+						// #ifdef H5
+						window.location.href = book.link
+						// #endif
+						// #ifdef MP-WEIXIN
+						uni.showToast({
+							title: '暂不支持外部链接',
+							icon: 'none'
+						})
+						// #endif
+						return
+					}
+				}
+				// 普通书籍列表点击,使用book.id
+				if (!book.id) {
+					uni.showToast({
+						title: '听书信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/listen-detail/listen-detail?audiobookId=${book.id}`
+				})
+			},
+			playBook(book) {
+				// 跳转到详情页,然后播放第一章节
+				this.goToListenDetail(book)
+			},
+			goToMoreBooks(type) {
+				uni.navigateTo({
+					url: `/pages/more-listen-books/more-listen-books?type=${type}`
+				})
+			},
+			handleBannerImageError(index) {
+				// 图片加载失败时使用备用图片
+				if (this.bannerBooks[index]) {
+					this.bannerBooks[index].image = 'https://picsum.photos/seed/default/200/300'
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 60px;
+		box-sizing: border-box;
+	}
+	
+	.search-bar {
+		position: relative;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.search-input {
+		width: 100%;
+		height: 70rpx;
+		background-color: #F5F5F5;
+		border-radius: 35rpx;
+		padding: 0 80rpx 0 30rpx;
+		font-size: 28rpx;
+		color: #333333;
+		box-sizing: border-box;
+	}
+	
+	.search-icon {
+		position: absolute;
+		right: 50rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 32rpx;
+	}
+	
+	.banner-section {
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.banner-swiper {
+		width: 100%;
+		height: 280rpx;
+		border-radius: 16rpx;
+		overflow: hidden;
+	}
+	
+	.banner-content {
+		display: flex;
+		background: linear-gradient(135deg, #FFE5F1 0%, #FFF0F5 100%);
+		border-radius: 16rpx;
+		padding: 30rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	
+	.banner-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-right: 30rpx;
+		flex-shrink: 0;
+		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
+		background-color: #F5F5F5;
+		object-fit: cover;
+	}
+	
+	.banner-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-width: 0;
+	}
+	
+	.banner-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 10rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.banner-subtitle {
+		font-size: 28rpx;
+		color: #666666;
+		margin-bottom: 10rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.banner-desc {
+		font-size: 24rpx;
+		color: #999999;
+		margin-bottom: 15rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+	}
+	
+	.banner-tag {
+		font-size: 22rpx;
+		color: #FF1744;
+		border: 1rpx solid #FF1744;
+		border-radius: 8rpx;
+		padding: 4rpx 12rpx;
+		align-self: flex-start;
+	}
+	
+	.category-nav {
+		display: flex;
+		justify-content: space-around;
+		padding: 40rpx 20rpx;
+		background-color: #FFFFFF;
+		margin-top: 20rpx;
+		margin-bottom: 20rpx;
+		border-radius: 16rpx;
+		margin-left: 30rpx;
+		margin-right: 30rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+	}
+	
+	.category-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	
+	.category-icon {
+		width: 90rpx;
+		height: 90rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 15rpx;
+	}
+	
+	.icon-text {
+		font-size: 44rpx;
+	}
+	
+	.category-text {
+		font-size: 24rpx;
+		color: #333333;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		padding-bottom: 20rpx;
+	}
+	
+	.section {
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+		margin-bottom: 20rpx;
+	}
+	
+	.section-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+	}
+	
+	.section-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.section-more {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.book-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	
+	.book-item {
+		width: calc(25% - 15rpx);
+		margin-bottom: 30rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+	
+	.book-cover-wrapper {
+		position: relative;
+		width: 100%;
+		padding-bottom: 140%;
+		height: 0;
+		border-radius: 8rpx;
+		overflow: hidden;
+		margin-bottom: 15rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-cover {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+	
+	.play-icon-overlay {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 48rpx;
+		height: 48rpx;
+		background-color: #4CAF50;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transform: translate(25%, 25%);
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
+	}
+	
+	.play-icon {
+		font-size: 24rpx;
+		color: #FFFFFF;
+		margin-left: 4rpx;
+	}
+	
+	.book-name {
+		font-size: 24rpx;
+		color: #333333;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 100%;
+	}
+	
+	.book-list {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.book-list-item {
+		display: flex;
+		margin-bottom: 30rpx;
+		align-items: center;
+	}
+	
+	.book-cover-small {
+		width: 120rpx;
+		height: 160rpx;
+		border-radius: 8rpx;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 10rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-desc {
+		font-size: 26rpx;
+		color: #666666;
+		line-height: 1.4;
+		margin-bottom: 10rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+		overflow: hidden;
+	}
+	
+	.book-author {
+		font-size: 24rpx;
+		color: #999999;
+		margin-bottom: 15rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.play-button {
+		background-color: #4CAF50;
+		color: #FFFFFF;
+		border-radius: 30rpx;
+		padding: 10rpx 25rpx;
+		font-size: 26rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: fit-content;
+	}
+	
+	.play-button-icon {
+		font-size: 24rpx;
+		margin-right: 10rpx;
+	}
+	
+	.play-button-text {
+		line-height: 1;
+	}
+	
+	.loading-section {
+		padding: 100rpx 30rpx;
+		text-align: center;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.empty-section {
+		padding: 100rpx 30rpx;
+		text-align: center;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>
+

+ 424 - 0
pages/login/login.vue

@@ -0,0 +1,424 @@
+<template>
+	<view class="login-container">
+		<!-- 应用Logo和名称 -->
+		<view class="app-header">
+			<view class="app-logo">
+				<view class="logo-square">
+					<view class="book-icon">
+						<view class="book-left"></view>
+						<view class="book-right"></view>
+						<view class="book-line"></view>
+					</view>
+				</view>
+			</view>
+			<text class="app-title">云阅读</text>
+		</view>
+		
+		<!-- 输入表单 -->
+		<view class="form-container">
+			<view class="input-group">
+				<input 
+					class="input-field" 
+					type="text" 
+					placeholder="请输入用户名"
+					v-model="username"
+					maxlength="20"
+				/>
+				<view class="input-line"></view>
+			</view>
+			
+			<view class="input-group">
+				<input 
+					class="input-field password-input" 
+					:type="showPassword ? 'text' : 'password'"
+					placeholder="请输入密码"
+					v-model="password"
+					maxlength="20"
+				/>
+				<text 
+					class="toggle-password-btn" 
+					@click="togglePassword"
+				>
+					{{ showPassword ? '隐藏' : '显示' }}
+				</text>
+				<view class="input-line"></view>
+			</view>
+			
+			<button 
+				class="login-btn" 
+				@click="handleLogin"
+				:disabled="!canLogin"
+			>
+				{{ isLoading ? '登录中...' : '登录' }}
+			</button>
+			
+			<!-- 注册按钮 -->
+			<view class="register-link" @click="goToRegister">
+				<text class="register-text">还没有账号?立即注册</text>
+			</view>
+		</view>
+		
+		<!-- 第三方登录 -->
+		<view class="third-party-login">
+			<view class="third-party-icon" @click="loginWithWeChat">
+				<view class="wechat-icon">
+					<view class="wechat-bubble1"></view>
+					<view class="wechat-bubble2"></view>
+				</view>
+			</view>
+			<view class="third-party-icon" @click="loginWithQQ">
+				<text class="qq-icon">Q</text>
+			</view>
+			<view class="third-party-icon" @click="loginWithWeibo">
+				<text class="weibo-icon">W</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { login } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				username: '',
+				password: '',
+				showPassword: false,
+				isLoading: false
+			}
+		},
+		onLoad(options) {
+			// 如果从注册页面传递了用户名,自动填充
+			if (options.username) {
+				this.username = decodeURIComponent(options.username)
+				uni.showToast({
+					title: '注册成功,请输入密码登录',
+					icon: 'success',
+					duration: 2000
+				})
+			}
+		},
+		computed: {
+			canLogin() {
+				return this.username.trim().length > 0 && this.password.length > 0 && !this.isLoading
+			}
+		},
+		methods: {
+			togglePassword() {
+				this.showPassword = !this.showPassword
+			},
+			handleLogin() {
+				if (!this.canLogin) {
+					uni.showToast({
+						title: '请填写完整信息',
+						icon: 'none'
+					})
+					return
+				}
+				
+				// 显示加载中
+				this.isLoading = true
+				uni.showLoading({
+					title: '登录中...',
+					mask: true
+				})
+				
+				// 调用后端登录接口
+				login(this.username.trim(), this.password)
+					.then((res) => {
+						uni.hideLoading()
+						this.isLoading = false
+						
+						if (res.code === 200 && res.data) {
+							// 登录成功,保存用户信息
+							try {
+								const userInfo = res.data.user || {}
+								uni.setStorageSync('userInfo', {
+									id: userInfo.id,
+									username: userInfo.username,
+									nickname: userInfo.nickname,
+									avatar: userInfo.avatar,
+									gender: userInfo.gender,
+									birthday: userInfo.birthday,
+									bio: userInfo.bio,
+									phone: userInfo.phone,
+									email: userInfo.email,
+									isVip: userInfo.isVip,
+									token: res.data.token,
+									loginTime: new Date().getTime()
+								})
+								uni.setStorageSync('isLogin', true)
+							} catch (e) {
+								console.error('保存用户信息失败', e)
+							}
+							
+							uni.showToast({
+								title: '登录成功',
+								icon: 'success'
+							})
+							
+							setTimeout(() => {
+								uni.switchTab({
+									url: '/pages/index/index'
+								})
+							}, 1500)
+						} else {
+							uni.showToast({
+								title: res.message || '登录失败',
+								icon: 'none'
+							})
+						}
+					})
+					.catch((err) => {
+						uni.hideLoading()
+						this.isLoading = false
+						
+						console.error('登录失败:', err)
+						uni.showToast({
+							title: err.message || '登录失败,请检查网络连接',
+							icon: 'none',
+							duration: 2000
+						})
+					})
+			},
+			loginWithWeChat() {
+				uni.showToast({
+					title: '微信登录',
+					icon: 'none'
+				})
+			},
+			loginWithQQ() {
+				uni.showToast({
+					title: 'QQ登录',
+					icon: 'none'
+				})
+			},
+			loginWithWeibo() {
+				uni.showToast({
+					title: '微博登录',
+					icon: 'none'
+				})
+			},
+			goToRegister() {
+				uni.navigateTo({
+					url: '/pages/register/register'
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.login-container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+		align-items: center;
+		padding: 0 60rpx;
+		box-sizing: border-box;
+		position: relative;
+	}
+	
+	.app-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-top: 180rpx;
+		margin-bottom: 80rpx;
+		flex-shrink: 0;
+	}
+	
+	.app-logo {
+		margin-bottom: 30rpx;
+	}
+	
+	.logo-square {
+		width: 140rpx;
+		height: 140rpx;
+		background-color: #4FC3F7;
+		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.book-icon {
+		position: relative;
+		width: 90rpx;
+		height: 70rpx;
+	}
+	
+	.book-left,
+	.book-right {
+		position: absolute;
+		width: 45rpx;
+		height: 70rpx;
+		background-color: #FFFFFF;
+		border-radius: 3rpx 0 0 3rpx;
+	}
+	
+	.book-right {
+		right: 0;
+		border-radius: 0 3rpx 3rpx 0;
+	}
+	
+	.book-line {
+		position: absolute;
+		left: 45rpx;
+		top: 8rpx;
+		width: 2rpx;
+		height: 54rpx;
+		background-color: #4FC3F7;
+	}
+	
+	.app-title {
+		font-size: 44rpx;
+		color: #333333;
+		font-weight: 600;
+	}
+	
+	.form-container {
+		width: 100%;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+	
+	.input-group {
+		position: relative;
+		margin-bottom: 50rpx;
+	}
+	
+	.input-field {
+		width: 100%;
+		height: 88rpx;
+		font-size: 30rpx;
+		padding: 0 20rpx;
+		color: #333333;
+	}
+	
+	.password-input {
+		padding-right: 80rpx;
+	}
+	
+	.toggle-password-btn {
+		position: absolute;
+		right: 20rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 26rpx;
+		color: #4FC3F7;
+		z-index: 10;
+		padding: 8rpx 12rpx;
+	}
+	
+	.input-line {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background-color: #E0E0E0;
+	}
+	
+	.login-btn {
+		width: 100%;
+		height: 96rpx;
+		background-color: #E0E0E0;
+		color: #999999;
+		font-size: 34rpx;
+		border-radius: 48rpx;
+		margin-top: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		flex-shrink: 0;
+	}
+	
+	.login-btn:not([disabled]) {
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+	}
+	
+	.login-btn[disabled] {
+		background-color: #E0E0E0;
+		color: #999999;
+	}
+	
+	.register-link {
+		margin-top: 40rpx;
+		text-align: center;
+	}
+	
+	.register-text {
+		font-size: 28rpx;
+		color: #4FC3F7;
+	}
+	
+	.third-party-login {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 70rpx;
+		position: absolute;
+		bottom: 80rpx;
+		left: 0;
+		right: 0;
+		flex-shrink: 0;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	
+	.third-party-icon {
+		width: 88rpx;
+		height: 88rpx;
+		border-radius: 50%;
+		border: 1rpx solid #E0E0E0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #FFFFFF;
+	}
+	
+	.wechat-icon {
+		position: relative;
+		width: 56rpx;
+		height: 56rpx;
+	}
+	
+	.wechat-bubble1,
+	.wechat-bubble2 {
+		position: absolute;
+		border-radius: 50%;
+		background-color: #666666;
+	}
+	
+	.wechat-bubble1 {
+		width: 32rpx;
+		height: 32rpx;
+		left: 0;
+		top: 0;
+	}
+	
+	.wechat-bubble2 {
+		width: 26rpx;
+		height: 26rpx;
+		right: 0;
+		bottom: 0;
+	}
+	
+	.qq-icon,
+	.weibo-icon {
+		font-size: 44rpx;
+		color: #666666;
+		font-weight: bold;
+	}
+</style>
+
+

+ 309 - 0
pages/messages/messages.vue

@@ -0,0 +1,309 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">消息</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<!-- 消息列表 -->
+		<scroll-view class="scroll-content" scroll-y>
+			<view 
+				class="message-item" 
+				v-for="(message, index) in messageList" 
+				:key="index"
+				@click="handleMessageClick(message)"
+			>
+				<image class="message-avatar" :src="message.avatar" mode="aspectFill"></image>
+				<view class="message-content">
+					<view class="message-header">
+						<text class="message-sender">{{ message.sender }}</text>
+						<text class="message-time">{{ message.time }}</text>
+					</view>
+					<view class="message-action">
+						<text class="action-icon">{{ message.actionIcon }}</text>
+						<text class="action-text">{{ message.actionText }}</text>
+					</view>
+					<view class="comment-bubble" v-if="message.comment">
+						<text class="comment-text">{{ message.comment }}</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-state" v-if="messageList.length === 0">
+				<text class="empty-text">暂无消息</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getMessages, markMessageAsRead } from '@/utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				messageList: [],
+				loading: false,
+				page: 1,
+				size: 20,
+				hasMore: true
+			}
+		},
+		onLoad() {
+			this.loadMessages()
+		},
+		onPullDownRefresh() {
+			this.page = 1
+			this.messageList = []
+			this.hasMore = true
+			this.loadMessages().finally(() => {
+				uni.stopPullDownRefresh()
+			})
+		},
+		onReachBottom() {
+			if (this.hasMore && !this.loading) {
+				this.page++
+				this.loadMessages()
+			}
+		},
+		methods: {
+			async loadMessages() {
+				const userInfo = uni.getStorageSync('userInfo')
+				if (!userInfo || !userInfo.id) {
+					uni.showToast({
+						title: '请先登录',
+						icon: 'none'
+					})
+					setTimeout(() => {
+						uni.navigateTo({
+							url: '/pages/login/login'
+						})
+					}, 1500)
+					return
+				}
+				
+				if (this.loading) return
+				this.loading = true
+				
+				try {
+					const res = await getMessages(userInfo.id, null, null, this.page, this.size)
+					
+					if (res && res.code === 200 && res.data) {
+						const newMessages = res.data.list || []
+						
+						if (this.page === 1) {
+							this.messageList = newMessages
+						} else {
+							this.messageList = this.messageList.concat(newMessages)
+						}
+						
+						// 判断是否还有更多数据
+						this.hasMore = newMessages.length >= this.size
+						
+						// 如果没有默认头像,设置默认头像
+						this.messageList.forEach(msg => {
+							if (!msg.avatar) {
+								msg.avatar = 'https://picsum.photos/seed/default/200/200'
+							}
+						})
+					} else {
+						if (this.page === 1) {
+							this.messageList = []
+						}
+						this.hasMore = false
+					}
+				} catch (error) {
+					console.error('加载消息失败:', error)
+					if (this.page === 1) {
+						this.messageList = []
+					}
+					if (this.page > 1) {
+						this.page--
+					}
+				} finally {
+					this.loading = false
+				}
+			},
+			goBack() {
+				uni.navigateBack()
+			},
+			async handleMessageClick(message) {
+				// 标记消息为已读
+				if (message.isRead === 0) {
+					try {
+						await markMessageAsRead(message.id)
+						message.isRead = 1
+					} catch (error) {
+						console.error('标记消息已读失败:', error)
+					}
+				}
+				
+				// 根据消息类型跳转到相关页面
+				if (message.type === 'like' || message.type === 'reply') {
+					// 点赞或回复消息,跳转到书籍详情页(可以从relatedId获取评论,再获取bookId)
+					uni.showToast({
+						title: '查看评论详情',
+						icon: 'none'
+					})
+					// TODO: 可以根据relatedId查询评论,然后跳转到书籍详情页
+				} else if (message.type === 'comment') {
+					// 评论消息,跳转到书籍详情页
+					uni.showToast({
+						title: '查看书籍详情',
+						icon: 'none'
+					})
+					// TODO: 可以根据relatedId跳转到书籍详情页
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	
+	.message-item {
+		display: flex;
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+		background-color: #FFFFFF;
+	}
+	
+	.message-item:last-child {
+		border-bottom: none;
+	}
+	
+	.message-avatar {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 50%;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+		background-color: #F5F5F5;
+	}
+	
+	.message-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+	
+	.message-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 15rpx;
+	}
+	
+	.message-sender {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.message-time {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.message-action {
+		display: flex;
+		align-items: center;
+		margin-bottom: 15rpx;
+	}
+	
+	.action-icon {
+		font-size: 28rpx;
+		margin-right: 10rpx;
+	}
+	
+	.action-text {
+		font-size: 28rpx;
+		color: #666666;
+	}
+	
+	.comment-bubble {
+		background-color: #F5F5F5;
+		border-radius: 12rpx;
+		padding: 20rpx;
+		margin-top: 10rpx;
+	}
+	
+	.comment-text {
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 1.6;
+	}
+	
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 200rpx 0;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>
+
+

+ 464 - 0
pages/more-books/more-books.vue

@@ -0,0 +1,464 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">{{ pageTitle }}</text>
+			<view class="placeholder"></view>
+		</view>
+		
+		<!-- 分隔线 -->
+		<view class="divider"></view>
+		
+		<!-- 书籍列表 -->
+		<scroll-view class="scroll-content" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
+			<!-- 加载中 -->
+			<view class="loading-container" v-if="isLoading && bookList.length === 0">
+				<text class="loading-text">加载中...</text>
+			</view>
+			
+			<!-- 书籍列表 -->
+			<view class="book-list" v-else-if="bookList.length > 0">
+				<view 
+					class="book-item" 
+					v-for="(book, index) in bookList" 
+					:key="book.id || index"
+					@click="goToBookDetail(book)"
+				>
+					<image 
+						class="book-cover" 
+						:src="book.image || book.cover" 
+						mode="aspectFill"
+						:lazy-load="true"
+						@error="handleImageError(index)"
+					></image>
+					<view class="book-info">
+						<text class="book-title">{{ book.title }}</text>
+						<text class="book-author">{{ book.author || '未知作者' }}</text>
+						<text class="book-desc" v-if="book.desc || book.brief">{{ (book.desc || book.brief).substring(0, 50) }}...</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-container" v-else>
+				<text class="empty-text">暂无书籍数据</text>
+			</view>
+			
+			<!-- 加载更多提示 -->
+			<view class="load-more" v-if="hasMore && bookList.length > 0">
+				<text class="load-more-text">加载中...</text>
+			</view>
+			<view class="load-more" v-else-if="!hasMore && bookList.length > 0">
+				<text class="load-more-text">没有更多了</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getBooks, getAllBooks, getRankingBooks, getPopularBooks, getNewBooks, getVipBooks, getTodayRecommend, getBestsellers, getFeaturedList, getMoreRecommend } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				type: '', // 类型:today, bestseller, featured, category等
+				categoryId: null, // 分类ID
+				categoryName: '', // 分类名称
+				pageTitle: '更多书籍',
+				bookList: [],
+				isLoading: false,
+				hasMore: true,
+				page: 1,
+				pageSize: 20
+			}
+		},
+		onLoad(options) {
+			console.log('more-books页面加载,参数:', options);
+			
+			// 获取页面参数
+		if (options && options.type) {
+				this.type = options.type;
+			}
+		if (options && options.categoryId) {
+			this.categoryId = parseInt(options.categoryId);
+			}
+		if (options && options.categoryName) {
+			try {
+				this.categoryName = decodeURIComponent(options.categoryName);
+			} catch(e) {
+				this.categoryName = options.categoryName;
+			}
+			}
+			
+			// 设置页面标题
+			this.setPageTitle();
+			
+			// 加载数据
+			this.loadBooks();
+		},
+	onShow() {
+		// 返回页面后,如首屏无数据则重新拉取,避免白屏
+		if (!this.bookList || this.bookList.length === 0) {
+			this.page = 1
+			this.hasMore = true
+			this.loadBooks()
+		}
+	},
+		methods: {
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			setPageTitle() {
+				if (this.categoryName) {
+					this.pageTitle = this.categoryName;
+				} else {
+					const titleMap = {
+						'today': '今日推荐',
+						'bestseller': '畅销书籍',
+						'featured': '精品书单',
+						'ranking': '排行榜',
+						'popular': '热门书籍',
+						'new': '新书榜',
+						'vip': 'VIP书籍',
+						'category': '分类书籍',
+						'all': '全部分类'
+					};
+					this.pageTitle = titleMap[this.type] || '更多书籍';
+				}
+			},
+			loadBooks() {
+				if (this.isLoading) return;
+				
+				console.log('开始加载书籍,类型:', this.type, '分类ID:', this.categoryId, '页码:', this.page);
+				this.isLoading = true;
+				
+				let promise;
+				
+				if (this.type === 'all') {
+					// 全部分类:显示所有书籍
+					promise = getAllBooks(this.page, this.pageSize);
+				} else if (this.type === 'category' && this.categoryId) {
+					// 分类筛选:显示指定分类的书籍
+					promise = getBooks({
+						page: this.page,
+						size: this.pageSize,
+						categoryId: this.categoryId,
+						status: 1
+					});
+				} else if (this.type === 'today') {
+					// 今日推荐
+					promise = getTodayRecommend(this.pageSize * this.page);
+				} else if (this.type === 'bestseller') {
+					// 畅销书籍
+					promise = getBestsellers(this.pageSize * this.page);
+				} else if (this.type === 'featured') {
+					// 精品书单
+					promise = getFeaturedList(this.pageSize * this.page);
+				} else if (this.type === 'ranking') {
+					// 排行榜
+					promise = getRankingBooks(this.pageSize * this.page);
+				} else if (this.type === 'popular') {
+					// 热门书籍
+					promise = getPopularBooks(this.pageSize * this.page);
+				} else if (this.type === 'new') {
+					// 新书榜
+					promise = getNewBooks(this.pageSize * this.page);
+				} else if (this.type === 'vip') {
+					// VIP书籍
+					promise = getVipBooks(this.page, this.pageSize);
+				} else {
+					// 默认:全部书籍
+					promise = getAllBooks(this.page, this.pageSize);
+				}
+				
+				promise
+					.then((res) => {
+						console.log('书籍列表API响应:', res);
+						this.isLoading = false;
+						
+						if (res && (res.code === 200 || res.success === true)) {
+							let newBooks = [];
+							
+							if (this.type === 'vip' || this.type === 'category' || this.type === 'all' || this.type === '' || !this.type) {
+								// 分页接口,返回的是PageResult
+								const pageData = res && res.data ? res.data : null
+								if (pageData && Array.isArray(pageData.list)) {
+									newBooks = pageData.list;
+									this.hasMore = pageData.list.length >= this.pageSize && (this.page * this.pageSize < (pageData.total || 0));
+								} else if (Array.isArray(pageData)) {
+									newBooks = pageData;
+									this.hasMore = newBooks.length >= this.pageSize;
+								}
+							} else {
+								// 列表接口,返回的是数组
+								if (res && Array.isArray(res.data)) {
+									// 对于非分页接口,需要手动处理分页
+									const start = (this.page - 1) * this.pageSize;
+									const end = start + this.pageSize;
+									newBooks = res.data.slice(start, end);
+									this.hasMore = end < res.data.length;
+								}
+							}
+							
+							if (newBooks.length > 0) {
+								// 处理数据格式
+								const formattedBooks = newBooks.map((book) => {
+									return {
+										id: book.id,
+										title: book.title || '未知书名',
+										author: book.author || '',
+										image: book.image || book.cover || 'https://picsum.photos/seed/book' + book.id + '/200/300',
+										cover: book.cover || book.image,
+										desc: book.desc,
+										brief: book.brief,
+										introduction: book.introduction
+									};
+								});
+								
+								if (this.page === 1) {
+									this.bookList = formattedBooks;
+								} else {
+									this.bookList = [...this.bookList, ...formattedBooks];
+								}
+								
+								console.log('书籍列表加载成功,当前共', this.bookList.length, '本');
+							} else {
+								if (this.page === 1) {
+									this.bookList = [];
+								}
+								this.hasMore = false;
+							}
+						} else {
+							console.warn('书籍列表API返回错误:', res);
+							if (this.page === 1) {
+								this.bookList = [];
+							}
+							uni.showToast({
+								title: (res && (res.message || res.msg)) ? (res.message || res.msg) : '获取书籍列表失败',
+								icon: 'none',
+								duration: 2000
+							});
+						}
+					})
+					.catch((err) => {
+						this.isLoading = false;
+						console.error('获取书籍列表失败:', err);
+						if (this.page === 1) {
+							this.bookList = [];
+						}
+						uni.showToast({
+							title: (err && err.message) ? err.message : '网络请求失败,请检查后端服务',
+							icon: 'none',
+							duration: 3000
+						});
+					});
+			},
+			loadMore() {
+				if (this.hasMore && !this.isLoading) {
+					this.page++;
+					this.loadBooks();
+				}
+			},
+			goToBookDetail(book) {
+				if (!book || !book.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					});
+					return;
+				}
+				uni.navigateTo({
+					url: `/pages/book-detail/book-detail?bookId=${book.id}`
+				});
+			},
+			handleImageError(index) {
+				// 图片加载失败时使用备用图片
+				if (this.bookList[index]) {
+					this.bookList[index].image = 'https://picsum.photos/seed/fallback' + index + '/200/300';
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	/* 顶部导航栏 */
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #000000;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #000000;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	
+	.placeholder {
+		width: 60rpx;
+	}
+	
+	/* 分隔线 */
+	.divider {
+		width: 100%;
+		height: 1rpx;
+		background-color: #E5E5E5;
+	}
+	
+	/* 滚动内容 */
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding: 20rpx 30rpx;
+		box-sizing: border-box;
+	}
+	
+	/* 书籍列表 */
+	.book-list {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	/* 书籍项 */
+	.book-item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 20rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.book-item:last-child {
+		border-bottom: none;
+	}
+	
+	/* 书籍封面 */
+	.book-cover {
+		width: 120rpx;
+		height: 160rpx;
+		border-radius: 8rpx;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+		background-color: #E0E0E0;
+	}
+	
+	/* 书籍信息 */
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000000;
+		margin-bottom: 12rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-author {
+		font-size: 26rpx;
+		color: #999999;
+		margin-bottom: 12rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-desc {
+		font-size: 24rpx;
+		color: #666666;
+		line-height: 1.5;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+	
+	/* 加载中 */
+	.loading-container {
+		width: 100%;
+		height: 400rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	/* 空状态 */
+	.empty-container {
+		width: 100%;
+		height: 400rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	/* 加载更多 */
+	.load-more {
+		width: 100%;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 20rpx;
+		margin-bottom: 40rpx;
+	}
+	
+	.load-more-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>
+

+ 321 - 0
pages/more-listen-books/more-listen-books.vue

@@ -0,0 +1,321 @@
+<template>
+    <view class="container">
+        <!-- 顶部导航栏 -->
+        <view class="header">
+            <view class="back-btn" @click="goBack">
+                <text class="back-icon">←</text>
+            </view>
+            <view class="search-btn" @click="goToSearch">
+                <text class="search-icon">🔍</text>
+            </view>
+        </view>
+        
+        <scroll-view class="scroll-content" scroll-y>
+            <view class="list-title">
+                <text>{{ pageTitle }}</text>
+            </view>
+            
+            <view class="loading" v-if="isLoading">
+                <text>加载中...</text>
+            </view>
+            
+            <view class="empty" v-else-if="bookList.length === 0">
+                <text>暂无听书内容</text>
+            </view>
+            
+            <view 
+                class="book-item" 
+                v-for="(book, index) in bookList" 
+                :key="index"
+                @click="goToListenDetail(book)"
+            >
+                <image class="book-cover" :src="book.image" mode="aspectFill" :lazy-load="true"></image>
+                <view class="book-info">
+                    <text class="book-title">{{ book.title }}</text>
+                    <text class="book-desc">{{ book.desc }}</text>
+                    <text class="book-author">{{ book.author }}</text>
+                    <view class="play-action">
+                        <view class="play-icon-circle">
+                            <text class="play-icon">▶</text>
+                        </view>
+                        <button class="play-button" @click.stop="playBook(book)">
+                            <text class="play-button-text">播放</text>
+                        </button>
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+    import { getRecentAudiobooks, getRecommendAudiobooks, getPopularAudiobooks, getRankingAudiobooks, searchAudiobooks } from '../../utils/api.js'
+    
+    export default {
+        data() {
+            return {
+                pageType: 'recent',
+                pageTitle: '更多听书',
+                bookList: [],
+                isLoading: false,
+                keyword: ''
+            }
+        },
+        onLoad(options) {
+            if (options.type) {
+                this.pageType = options.type
+            }
+            if (options.keyword) {
+                this.keyword = decodeURIComponent(options.keyword)
+            }
+            this.setPageTitle()
+            this.loadData()
+        },
+        methods: {
+            setPageTitle() {
+                const titleMap = {
+                    recent: '最近上新',
+                    guess: '猜你喜欢',
+                    popular: '热门听书',
+                    ranking: '畅听榜',
+                    search: `搜索:${this.keyword || ''}`
+                }
+                this.pageTitle = titleMap[this.pageType] || '更多听书'
+            },
+            async loadData() {
+                this.isLoading = true
+                try {
+                    let res = null
+                    if (this.pageType === 'recent') {
+                        res = await getRecentAudiobooks(50)
+                    } else if (this.pageType === 'guess') {
+                        res = await getRecommendAudiobooks(50)
+                    } else if (this.pageType === 'popular') {
+                        res = await getPopularAudiobooks(50)
+                    } else if (this.pageType === 'ranking') {
+                        res = await getRankingAudiobooks(50)
+                    } else if (this.pageType === 'search') {
+                        const r = await searchAudiobooks({ keyword: this.keyword, page: 1, size: 50 })
+                        // PageResult
+                        if (r && r.code === 200 && r.data) {
+                            res = { code: 200, data: r.data.list || [] }
+                        } else {
+                            res = { code: r.code || 500, data: [] }
+                        }
+                    } else {
+                        res = await getRecommendAudiobooks(50)
+                    }
+                    if (res && res.code === 200 && Array.isArray(res.data)) {
+                        this.bookList = res.data.map(item => ({
+                            id: item.id,
+                            title: item.title,
+                            desc: item.brief || item.desc || '',
+                            author: item.author || '',
+                            image: item.image || item.cover || 'https://picsum.photos/seed/default/200/300'
+                        }))
+                    } else {
+                        this.bookList = []
+                    }
+                } catch (error) {
+                    console.error('加载听书列表失败:', error)
+                    this.bookList = []
+                    uni.showToast({
+                        title: '加载失败',
+                        icon: 'none'
+                    })
+                } finally {
+                    this.isLoading = false
+                }
+            },
+            goBack() {
+                uni.navigateBack()
+            },
+            goToSearch() {
+                uni.navigateTo({
+                    url: '/pages/search/search'
+                })
+            },
+            goToListenDetail(book) {
+                if (!book || !book.id) {
+                    uni.showToast({
+                        title: '听书信息不完整',
+                        icon: 'none'
+                    })
+                    return
+                }
+                uni.navigateTo({
+                    url: `/pages/listen-detail/listen-detail?audiobookId=${book.id}`
+                })
+            },
+            playBook(book) {
+                this.goToListenDetail(book)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .container {
+        width: 100%;
+        height: 100vh;
+        background-color: #FFFFFF;
+        display: flex;
+        flex-direction: column;
+        padding-top: 30px;
+        box-sizing: border-box;
+    }
+    
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20rpx 30rpx;
+        background-color: #FFFFFF;
+        border-bottom: 1rpx solid #F0F0F0;
+    }
+    
+    .back-btn, .search-btn {
+        width: 60rpx;
+        height: 60rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .back-icon {
+        font-size: 40rpx;
+        color: #333333;
+        font-weight: bold;
+    }
+    
+    .search-icon {
+        font-size: 36rpx;
+        color: #333333;
+    }
+    
+    .scroll-content {
+        flex: 1;
+        width: 100%;
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+    
+    .list-title {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #333333;
+        padding: 20rpx 30rpx 10rpx;
+    }
+    
+    .loading, .empty {
+        text-align: center;
+        padding: 60rpx 0;
+        color: #999999;
+        font-size: 30rpx;
+    }
+    
+    .book-item {
+        display: flex;
+        padding: 30rpx;
+        border-bottom: 1rpx solid #F0F0F0;
+        background-color: #FFFFFF;
+    }
+    
+    .book-item:last-child {
+        border-bottom: none;
+    }
+    
+    .book-cover {
+        width: 160rpx;
+        height: 220rpx;
+        border-radius: 8rpx;
+        margin-right: 30rpx;
+        flex-shrink: 0;
+        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+        background-color: #F5F5F5;
+    }
+    
+    .book-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 0;
+        position: relative;
+    }
+    
+    .book-title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333333;
+        margin-bottom: 15rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    .book-desc {
+        font-size: 26rpx;
+        color: #666666;
+        line-height: 1.6;
+        margin-bottom: 15rpx;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+    
+    .book-author {
+        font-size: 24rpx;
+        color: #999999;
+        margin-bottom: 20rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    .play-action {
+        display: flex;
+        align-items: center;
+        gap: 20rpx;
+    }
+    
+    .play-icon-circle {
+        width: 60rpx;
+        height: 60rpx;
+        background-color: #4CAF50;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+    
+    .play-icon {
+        font-size: 28rpx;
+        color: #FFFFFF;
+        margin-left: 4rpx;
+    }
+    
+    .play-button {
+        background-color: #4CAF50;
+        color: #FFFFFF;
+        border-radius: 30rpx;
+        padding: 12rpx 30rpx;
+        font-size: 26rpx;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+    
+    .play-button::after {
+        border: none;
+    }
+    
+    .play-button-text {
+        color: #FFFFFF;
+        line-height: 1;
+    }
+</style>
+

+ 348 - 0
pages/new-books/new-books.vue

@@ -0,0 +1,348 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">新书榜</text>
+			<view class="search-btn" @click="goToSearch">
+				<text class="search-icon">🔍</text>
+			</view>
+		</view>
+		
+		<!-- 书籍列表 -->
+		<scroll-view class="book-list-container" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
+			<view 
+				class="book-item" 
+				v-for="(book, index) in bookList" 
+				:key="book.id || index"
+				@click="goToBookDetail(book)"
+			>
+				<image 
+					class="book-cover" 
+					:src="book.cover" 
+					mode="aspectFill"
+					:lazy-load="true"
+					@error="handleImageError(index)"
+				></image>
+				<view class="book-info">
+					<text class="book-title">{{ book.title }}</text>
+					<text class="book-desc">{{ book.desc }}</text>
+					<text class="book-author">{{ book.author }}</text>
+				</view>
+			</view>
+			
+			<!-- 加载更多提示 -->
+			<view class="load-more" v-if="hasMore">
+				<text class="load-more-text">加载中...</text>
+			</view>
+			<view class="load-more" v-else-if="bookList.length > 0">
+				<text class="load-more-text">没有更多了</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			// 生成书籍封面图片的函数
+			const getBookImage = (seed) => {
+				return `https://picsum.photos/seed/${seed}/200/300`;
+			};
+			
+			return {
+				hasMore: true,
+				page: 1,
+				bookList: [
+					{
+						id: 1,
+						title: '互联网心理学',
+						author: '雷雳',
+						desc: '当连接万物的互联网遇见无处不在的心理学,我们需要用心理学的方式,重新思考互联网背后的人与社会。',
+						cover: getBookImage('new-internet-psychology')
+					},
+					{
+						id: 2,
+						title: '孝经 (中华经典诵读)',
+						author: '孔子',
+						desc: '以孔子与其弟子曾参之间问答的形式,将社会上各种阶层的人士,标示出其实践孝亲的法则与途径,阐述了「孝」的意义。',
+						cover: getBookImage('new-xiaojing')
+					},
+					{
+						id: 3,
+						title: '自省',
+						author: '约翰·班扬',
+						desc: '讲述了敬虔之人和不敬虔之人截然相反的结局。本书就是他的细细品味,文风一如从前,朴实无华却又字字珠玑。',
+						cover: getBookImage('new-self-reflection')
+					},
+					{
+						id: 4,
+						title: '人工智能的未来',
+						author: '未知',
+						desc: '探讨人工智能技术的最新发展和未来趋势,分析AI如何改变我们的生活和工作方式。',
+						cover: getBookImage('new-ai')
+					},
+					{
+						id: 5,
+						title: '数字时代的阅读',
+						author: '未知',
+						desc: '分析数字阅读与传统阅读的差异,探讨如何在数字时代保持深度阅读的能力和习惯。',
+						cover: getBookImage('new-digital-reading')
+					},
+					{
+						id: 6,
+						title: '量子物理入门',
+						author: '未知',
+						desc: '用通俗易懂的语言介绍量子物理的基本概念,帮助读者理解这个神秘而有趣的科学领域。',
+						cover: getBookImage('new-quantum')
+					},
+					{
+						id: 7,
+						title: '全球气候变化',
+						author: '未知',
+						desc: '深入分析全球气候变化的成因、影响和应对措施,呼吁全社会关注环境保护。',
+						cover: getBookImage('new-climate')
+					},
+					{
+						id: 8,
+						title: '现代艺术史',
+						author: '未知',
+						desc: '全面介绍从19世纪末到21世纪初的现代艺术发展历程,包括各种艺术流派和代表作品。',
+						cover: getBookImage('new-art-history')
+					}
+				]
+			}
+		},
+		onLoad() {
+			// 页面加载时加载数据
+			this.loadBookList();
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			goToSearch() {
+				uni.navigateTo({
+					url: '/pages/search/search'
+				});
+			},
+			goToBookDetail(book) {
+				if (!book || !book.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/book-detail/book-detail?bookId=${book.id}`
+				});
+			},
+			handleImageError(index) {
+				// 图片加载失败时使用备用图片
+				if (this.bookList[index]) {
+					this.bookList[index].cover = `https://picsum.photos/seed/fallback${index}/200/300`;
+				}
+			},
+			loadBookList() {
+				// 加载新书列表
+				// 这里可以调用API获取数据
+			},
+			loadMore() {
+				// 滚动到底部加载更多
+				if (this.hasMore) {
+					setTimeout(() => {
+						// 模拟加载更多数据
+						const moreBooks = [
+							{
+								id: 9,
+								title: '区块链技术原理',
+								author: '未知',
+								desc: '详细介绍区块链技术的基本原理、应用场景和发展前景,帮助读者理解这项革命性技术。',
+								cover: `https://picsum.photos/seed/blockchain${this.page}/200/300`
+							},
+							{
+								id: 10,
+								title: '生物多样性保护',
+								author: '未知',
+								desc: '探讨生物多样性保护的重要性和方法,呼吁人类共同保护地球上的生命多样性。',
+								cover: `https://picsum.photos/seed/biodiversity${this.page}/200/300`
+							},
+							{
+								id: 11,
+								title: '太空探索新纪元',
+								author: '未知',
+								desc: '介绍最新的太空探索技术和计划,展望人类探索宇宙的美好未来。',
+								cover: `https://picsum.photos/seed/space${this.page}/200/300`
+							},
+							{
+								id: 12,
+								title: '数字化转型指南',
+								author: '未知',
+								desc: '为企业提供数字化转型的实用指南,帮助企业在数字时代保持竞争力。',
+								cover: `https://picsum.photos/seed/digital-transform${this.page}/200/300`
+							}
+						];
+						
+						if (this.page < 3) {
+							const newBooks = moreBooks.map((book, idx) => ({
+								...book,
+								id: book.id + this.page * 10
+							}));
+							this.bookList = [...this.bookList, ...newBooks];
+							this.page++;
+						} else {
+							this.hasMore = false;
+						}
+					}, 500);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	/* 顶部导航栏 */
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E5E5E5;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #000000;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #000000;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	
+	.search-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.search-icon {
+		font-size: 36rpx;
+		color: #000000;
+	}
+	
+	/* 书籍列表容器 */
+	.book-list-container {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		background-color: #FFFFFF;
+	}
+	
+	/* 书籍项 */
+	.book-item {
+		display: flex;
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.book-item:last-child {
+		border-bottom: none;
+	}
+	
+	/* 书籍封面 */
+	.book-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-right: 24rpx;
+		flex-shrink: 0;
+		background-color: #F5F5F5;
+	}
+	
+	/* 书籍信息 */
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000000;
+		margin-bottom: 16rpx;
+		line-height: 1.4;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.book-desc {
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.6;
+		margin-bottom: 20rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.book-author {
+		font-size: 26rpx;
+		color: #999999;
+		margin-top: auto;
+	}
+	
+	/* 加载更多 */
+	.load-more {
+		width: 100%;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 20rpx;
+		margin-bottom: 40rpx;
+	}
+	
+	.load-more-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>

+ 235 - 0
pages/notes/notes.vue

@@ -0,0 +1,235 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">笔记</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<!-- 笔记列表 -->
+		<scroll-view class="scroll-content" scroll-y>
+			<view 
+				class="note-item" 
+				v-for="(item, index) in noteList" 
+				:key="index"
+				@click="goToBookNotes(item)"
+			>
+				<image class="book-cover" :src="item.cover" mode="aspectFill" :lazy-load="true"></image>
+				<view class="book-info">
+					<text class="book-title">{{ item.title }}</text>
+					<text class="note-count">{{ item.noteCount }}个笔记</text>
+				</view>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-state" v-if="noteList.length === 0">
+				<text class="empty-text">暂无笔记</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			const getRandomImage = (seed) => {
+				return `https://picsum.photos/seed/${seed}/200/300`;
+			};
+			
+			return {
+				noteList: [
+					{
+						id: 1,
+						title: '西游记',
+						cover: getRandomImage('notes1'),
+						noteCount: 3
+					},
+					{
+						id: 2,
+						title: '孝经 (中华经典诵读)',
+						cover: getRandomImage('notes2'),
+						noteCount: 10
+					},
+					{
+						id: 3,
+						title: '西游记',
+						cover: getRandomImage('notes3'),
+						noteCount: 4
+					},
+					{
+						id: 4,
+						title: '孝经 (中华经典诵读)',
+						cover: getRandomImage('notes4'),
+						noteCount: 10
+					},
+					{
+						id: 5,
+						title: '红楼梦',
+						cover: getRandomImage('notes5'),
+						noteCount: 5
+					},
+					{
+						id: 6,
+						title: '三国演义',
+						cover: getRandomImage('notes6'),
+						noteCount: 8
+					}
+				]
+			}
+		},
+		onLoad() {
+			// 可以在这里加载用户的笔记列表
+			this.loadNotes()
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			goToBookNotes(item) {
+				// 跳转到该书籍的笔记详情页
+				uni.navigateTo({
+					url: `/pages/book-notes/book-notes?bookId=${item.id}&title=${encodeURIComponent(item.title)}&cover=${encodeURIComponent(item.cover)}`
+				})
+			},
+			loadNotes() {
+				// 这里可以调用API获取用户的笔记列表
+				// uni.request({
+				// 	url: '/api/notes/list',
+				// 	success: (res) => {
+				// 		this.noteList = res.data
+				// 	}
+				// })
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		min-height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		padding-top: 30px;
+		box-sizing: border-box;
+		flex-direction: column;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding-bottom: calc(env(safe-area-inset-bottom));
+		background-color: #FFFFFF;
+		box-sizing: border-box;
+	}
+	
+	.note-item {
+		display: flex;
+		align-items: center;
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+		background-color: #FFFFFF;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	
+	.note-item:last-child {
+		border-bottom: none;
+	}
+	
+	.book-cover {
+		width: 120rpx;
+		height: 160rpx;
+		border-radius: 8rpx;
+		margin-right: 30rpx;
+		flex-shrink: 0;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
+		background-color: #F5F5F5;
+	}
+	
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 15rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.note-count {
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 200rpx 0;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>
+
+

+ 377 - 0
pages/payment/payment.vue

@@ -0,0 +1,377 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">支付</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 支付金额 -->
+			<view class="amount-section">
+				<text class="amount-label">支付金额</text>
+				<text class="amount-value">¥ {{ paymentAmount.toFixed(2) }}</text>
+			</view>
+			
+			<!-- 支付方式选择 -->
+			<view class="payment-card">
+				<view 
+					class="payment-item" 
+					v-for="(method, index) in paymentMethods" 
+					:key="index"
+					@click="selectPaymentMethod(index)"
+				>
+					<view class="payment-left">
+						<view class="payment-icon" :style="{ backgroundColor: method.iconBg }">
+							<text class="payment-icon-text">{{ method.icon }}</text>
+						</view>
+						<text class="payment-name">{{ method.name }}</text>
+					</view>
+					<view class="payment-radio" :class="{ checked: selectedMethod === index }">
+						<view class="radio-dot" v-if="selectedMethod === index"></view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		
+		<!-- 确认支付按钮 -->
+		<view class="confirm-section">
+			<button class="confirm-btn" @click="confirmPayment">确认支付</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { purchaseVip } from '@/utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				paymentAmount: 30.00,
+				selectedMethod: 0,
+				planName: '',
+				planType: 'month',
+				planId: 0,
+				isProcessing: false,
+				paymentMethods: [
+					{
+						name: '微信支付',
+						icon: '💬',
+						iconBg: '#07C160',
+						type: 'wechat'
+					},
+					{
+						name: '支付宝支付',
+						icon: '💰',
+						iconBg: '#1677FF',
+						type: 'alipay'
+					},
+					{
+						name: '其他支付',
+						icon: '💳',
+						iconBg: '#999999',
+						type: 'other'
+					}
+				]
+			}
+		},
+		onLoad(options) {
+			if (options.price) {
+				this.paymentAmount = parseFloat(options.price)
+			}
+			if (options.planName) {
+				this.planName = decodeURIComponent(options.planName)
+			}
+			if (options.planType) {
+				this.planType = options.planType
+			}
+			if (options.planId) {
+				this.planId = parseInt(options.planId)
+			}
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			selectPaymentMethod(index) {
+				this.selectedMethod = index
+			},
+			async confirmPayment() {
+				// 获取用户信息
+				const userInfo = uni.getStorageSync('userInfo')
+				if (!userInfo || !userInfo.id) {
+					uni.showToast({
+						title: '请先登录',
+						icon: 'none'
+					})
+					setTimeout(() => {
+						uni.navigateTo({
+							url: '/pages/login/login'
+						})
+					}, 1500)
+					return
+				}
+				
+				if (this.isProcessing) {
+					return
+				}
+				
+				const method = this.paymentMethods[this.selectedMethod]
+				
+				uni.showModal({
+					title: '确认支付',
+					content: `使用${method.name}支付 ¥${this.paymentAmount.toFixed(2)}?`,
+					success: async (res) => {
+						if (res.confirm) {
+							await this.processPayment(method, userInfo.id)
+						}
+					}
+				})
+			},
+			async processPayment(method, userId) {
+				this.isProcessing = true
+				uni.showLoading({
+					title: '支付中...',
+					mask: true
+				})
+				
+				try {
+					// 调用购买VIP接口
+					const purchaseData = {
+						userId: userId,
+						vipType: this.planType,
+						vipName: this.planName,
+						price: this.paymentAmount,
+						paymentMethod: method.type
+					}
+					
+					const res = await purchaseVip(purchaseData)
+					
+					uni.hideLoading()
+					this.isProcessing = false
+					
+					if (res && res.code === 200) {
+						uni.showToast({
+							title: '支付成功',
+							icon: 'success'
+						})
+						
+						// 更新本地用户信息中的VIP状态
+						if (userInfo) {
+							userInfo.isVip = true
+							if (res.data && res.data.expireTime) {
+								// 可以更新过期时间(如果返回了)
+							}
+							uni.setStorageSync('userInfo', userInfo)
+						}
+						
+						// 支付成功后跳转
+						setTimeout(() => {
+							uni.navigateBack({
+								delta: 2 // 返回VIP页面再返回上一页
+							})
+						}, 1500)
+					} else {
+						uni.showToast({
+							title: res.message || '支付失败,请重试',
+							icon: 'none'
+						})
+					}
+				} catch (error) {
+					uni.hideLoading()
+					this.isProcessing = false
+					console.error('支付失败:', error)
+					uni.showToast({
+						title: error.message || '支付失败,请重试',
+						icon: 'none'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		min-height: 100vh;
+		background-color: #F5F5F5;
+		display: flex;
+		padding-top: 30px;
+		box-sizing: border-box;
+		flex-direction: column;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding: 40rpx 30rpx;
+		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+		box-sizing: border-box;
+	}
+	
+	.amount-section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 60rpx 0;
+		margin-bottom: 40rpx;
+	}
+	
+	.amount-label {
+		font-size: 28rpx;
+		color: #999999;
+		margin-bottom: 20rpx;
+	}
+	
+	.amount-value {
+		font-size: 64rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.payment-card {
+		background-color: #FFFFFF;
+		border-radius: 16rpx;
+		overflow: hidden;
+	}
+	
+	.payment-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.payment-item:last-child {
+		border-bottom: none;
+	}
+	
+	.payment-left {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+	
+	.payment-icon {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 30rpx;
+	}
+	
+	.payment-icon-text {
+		font-size: 40rpx;
+	}
+	
+	.payment-name {
+		font-size: 30rpx;
+		color: #333333;
+	}
+	
+	.payment-radio {
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		border: 2rpx solid #CCCCCC;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #FFFFFF;
+	}
+	
+	.payment-radio.checked {
+		border-color: #4FC3F7;
+		background-color: #4FC3F7;
+	}
+	
+	.radio-dot {
+		width: 16rpx;
+		height: 16rpx;
+		border-radius: 50%;
+		background-color: #FFFFFF;
+	}
+	
+	.confirm-section {
+		padding: 30rpx;
+		background-color: #FFFFFF;
+		border-top: 1rpx solid #F0F0F0;
+		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+	
+	.confirm-btn {
+		width: 100%;
+		height: 88rpx;
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+		font-size: 32rpx;
+		font-weight: bold;
+		border: none;
+		border-radius: 44rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.confirm-btn::after {
+		border: none;
+	}
+</style>
+
+

+ 566 - 0
pages/player/player.vue

@@ -0,0 +1,566 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">↓</text>
+			</view>
+			<view class="share-btn" @click="handleShare">
+				<text class="share-icon">↗</text>
+			</view>
+		</view>
+		
+		<!-- 书籍信息 -->
+		<view class="book-info-section">
+			<image class="book-cover" :src="bookInfo.image" mode="aspectFill"></image>
+			<text class="book-title">{{ bookInfo.title }}</text>
+			<text class="chapter-title" v-if="chapterInfo.title">{{ chapterInfo.title }}</text>
+			<text class="book-author">{{ bookInfo.author }}</text>
+			<button class="add-to-shelf-btn" @click="handleAddToShelf">加入书架</button>
+		</view>
+		
+		<!-- 播放控制区域 -->
+		<view class="player-section">
+			<!-- 进度条 -->
+			<view class="progress-section">
+				<view class="progress-bar-wrapper" @touchstart="handleProgressTouchStart" @touchmove="handleProgressTouchMove" @touchend="handleProgressTouchEnd">
+					<view class="progress-bar">
+						<view class="progress-filled" :style="{ width: progressPercent + '%' }"></view>
+						<view class="progress-dot" :style="{ left: progressPercent + '%' }" v-if="!isDragging"></view>
+					</view>
+				</view>
+				<view class="time-label">
+					<text class="time-text">{{ currentTime }}/{{ totalTime }}</text>
+				</view>
+			</view>
+			
+			<!-- 控制按钮 -->
+			<view class="controls-section">
+				<view class="control-btn" @click="rewind15s">
+					<text class="control-text">-15s</text>
+				</view>
+				<view class="control-btn prev-btn" @click="playPrevious">
+					<text class="control-icon">⏮</text>
+				</view>
+				<view class="control-btn play-btn" @click="togglePlay">
+					<text class="play-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
+				</view>
+				<view class="control-btn next-btn" @click="playNext">
+					<text class="control-icon">⏭</text>
+				</view>
+				<view class="control-btn" @click="forward15s">
+					<text class="control-text">+15s</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getChapterDetail, playChapter, saveListeningProgress, getListeningProgress, recordListeningHistory } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				audiobookId: null,
+				chapterId: null,
+				bookInfo: {
+					id: null,
+					title: '',
+					author: '',
+					image: ''
+				},
+				chapterInfo: {
+					id: null,
+					title: '',
+					audioUrl: '',
+					duration: 0
+				},
+				isPlaying: false,
+				currentTime: '00:00',
+				currentSeconds: 0,
+				totalTime: '00:00',
+				totalSeconds: 0,
+				progressPercent: 0,
+				audioContext: null,
+				playTimer: null,
+				progressSaveTimer: null,
+				userInfo: null,
+				isDragging: false
+			}
+		},
+		onLoad(options) {
+			// 从路由参数获取信息
+			if (options.audiobookId) {
+				this.audiobookId = parseInt(options.audiobookId)
+			} else if (options.bookId) {
+				this.audiobookId = parseInt(options.bookId)
+			}
+			
+			if (options.title) {
+				this.bookInfo.title = decodeURIComponent(options.title)
+			}
+			if (options.image) {
+				this.bookInfo.image = decodeURIComponent(options.image)
+			}
+			if (options.author) {
+				this.bookInfo.author = decodeURIComponent(options.author)
+			}
+			if (options.chapterId) {
+				this.chapterId = parseInt(options.chapterId)
+			}
+			if (options.audioUrl) {
+				this.chapterInfo.audioUrl = decodeURIComponent(options.audioUrl)
+			}
+			
+			// 加载用户信息
+			this.loadUserInfo()
+			
+			// 初始化播放器
+			if (this.chapterId) {
+				this.initPlayer()
+			}
+		},
+		onUnload() {
+			// 页面卸载时保存进度并停止播放
+			this.saveProgress()
+			if (this.audioContext) {
+				this.audioContext.destroy()
+			}
+			if (this.playTimer) {
+				clearInterval(this.playTimer)
+			}
+			if (this.progressSaveTimer) {
+				clearInterval(this.progressSaveTimer)
+			}
+		},
+		methods: {
+			loadUserInfo() {
+				try {
+					const userInfo = uni.getStorageSync('userInfo')
+					const isLogin = uni.getStorageSync('isLogin')
+					if (userInfo && userInfo.id && isLogin) {
+						this.userInfo = userInfo
+					}
+				} catch (e) {
+					console.error('获取用户信息失败:', e)
+				}
+			},
+			async initPlayer() {
+				try {
+					// 加载章节详情
+					if (this.chapterId) {
+						const res = await getChapterDetail(this.chapterId)
+						if (res && res.code === 200 && res.data) {
+							this.chapterInfo = {
+								id: res.data.id,
+								title: res.data.title || '',
+								audioUrl: res.data.audioUrl || this.chapterInfo.audioUrl,
+								duration: res.data.duration || 0
+							}
+							this.totalSeconds = this.chapterInfo.duration
+							this.totalTime = this.formatTime(this.totalSeconds)
+						}
+					}
+					
+					// 加载播放进度
+					if (this.userInfo && this.userInfo.id && this.chapterId) {
+						const progressRes = await getListeningProgress(this.userInfo.id, this.chapterId)
+						if (progressRes && progressRes.code === 200 && progressRes.data) {
+							const progress = progressRes.data
+							this.currentSeconds = progress.currentPosition || 0
+							this.currentTime = this.formatTime(this.currentSeconds)
+							this.progressPercent = this.totalSeconds > 0 ? (this.currentSeconds / this.totalSeconds) * 100 : 0
+						}
+					}
+					
+					// 创建音频上下文
+					this.audioContext = uni.createInnerAudioContext()
+					this.audioContext.src = this.chapterInfo.audioUrl
+					this.audioContext.startTime = this.currentSeconds
+					
+					// 监听播放事件
+					this.audioContext.onPlay(() => {
+						this.isPlaying = true
+						this.startProgressTimer()
+					})
+					
+					this.audioContext.onPause(() => {
+						this.isPlaying = false
+						this.stopProgressTimer()
+					})
+					
+					this.audioContext.onEnded(() => {
+						this.isPlaying = false
+						this.stopProgressTimer()
+						// 播放结束,自动播放下一章
+						// this.playNext()
+					})
+					
+					this.audioContext.onTimeUpdate(() => {
+						if (!this.isDragging) {
+							this.currentSeconds = Math.floor(this.audioContext.currentTime)
+							this.currentTime = this.formatTime(this.currentSeconds)
+							if (this.totalSeconds > 0) {
+								this.progressPercent = (this.currentSeconds / this.totalSeconds) * 100
+							}
+						}
+					})
+					
+					// 记录播放(增加播放次数)
+					if (this.audiobookId && this.chapterId) {
+						try {
+							await playChapter(this.audiobookId, this.chapterId)
+						} catch (e) {
+							console.error('记录播放失败:', e)
+						}
+					}
+					
+					// 记录听书历史
+					if (this.userInfo && this.userInfo.id && this.audiobookId && this.chapterId) {
+						try {
+							await recordListeningHistory(this.userInfo.id, this.audiobookId, this.chapterId)
+						} catch (e) {
+							console.error('记录听书历史失败:', e)
+						}
+					}
+					
+					// 启动进度保存定时器(每30秒保存一次)
+					this.progressSaveTimer = setInterval(() => {
+						this.saveProgress()
+					}, 30000)
+					
+				} catch (e) {
+					console.error('初始化播放器失败:', e)
+					uni.showToast({
+						title: '加载失败,请重试',
+						icon: 'none'
+					})
+				}
+			},
+			goBack() {
+				this.saveProgress()
+				uni.navigateBack()
+			},
+			handleShare() {
+				uni.showToast({
+					title: '分享',
+					icon: 'none'
+				})
+			},
+			handleAddToShelf() {
+				uni.showToast({
+					title: '已加入书架',
+					icon: 'success'
+				})
+			},
+			togglePlay() {
+				if (!this.audioContext) {
+					uni.showToast({
+						title: '播放器未初始化',
+						icon: 'none'
+					})
+					return
+				}
+				
+				if (this.isPlaying) {
+					this.audioContext.pause()
+				} else {
+					this.audioContext.play()
+				}
+			},
+			startProgressTimer() {
+				// 进度更新已通过audioContext.onTimeUpdate处理
+			},
+			stopProgressTimer() {
+				// 进度更新已通过audioContext.onTimeUpdate处理
+			},
+			playPrevious() {
+				uni.showToast({
+					title: '上一章功能待实现',
+					icon: 'none'
+				})
+			},
+			playNext() {
+				uni.showToast({
+					title: '下一章功能待实现',
+					icon: 'none'
+				})
+			},
+			rewind15s() {
+				if (this.audioContext) {
+					const newTime = Math.max(0, this.currentSeconds - 15)
+					this.audioContext.seek(newTime)
+					this.currentSeconds = newTime
+					this.currentTime = this.formatTime(newTime)
+					if (this.totalSeconds > 0) {
+						this.progressPercent = (newTime / this.totalSeconds) * 100
+					}
+				}
+			},
+			forward15s() {
+				if (this.audioContext) {
+					const newTime = Math.min(this.totalSeconds, this.currentSeconds + 15)
+					this.audioContext.seek(newTime)
+					this.currentSeconds = newTime
+					this.currentTime = this.formatTime(newTime)
+					if (this.totalSeconds > 0) {
+						this.progressPercent = (newTime / this.totalSeconds) * 100
+					}
+				}
+			},
+			handleProgressTouchStart(e) {
+				this.isDragging = true
+			},
+			handleProgressTouchMove(e) {
+				// 拖动进度条的处理
+				// 这里需要获取进度条的宽度和触摸位置
+			},
+			async handleProgressTouchEnd(e) {
+				this.isDragging = false
+				// 结束拖动,跳转到指定位置
+				// 这里需要计算拖动的百分比,然后设置播放位置
+				if (this.audioContext && this.totalSeconds > 0) {
+					// 这里应该根据触摸位置计算新的播放时间
+					// 暂时使用progressPercent
+					const newTime = Math.floor((this.progressPercent / 100) * this.totalSeconds)
+					this.audioContext.seek(newTime)
+					this.currentSeconds = newTime
+					this.currentTime = this.formatTime(newTime)
+					await this.saveProgress()
+				}
+			},
+			async saveProgress() {
+				if (this.userInfo && this.userInfo.id && this.audiobookId && this.chapterId) {
+					try {
+						await saveListeningProgress(
+							this.userInfo.id,
+							this.audiobookId,
+							this.chapterId,
+							this.currentSeconds,
+							this.totalSeconds
+						)
+					} catch (e) {
+						console.error('保存进度失败:', e)
+					}
+				}
+			},
+			formatTime(seconds) {
+				if (!seconds || seconds < 0) {
+					return '00:00'
+				}
+				const hours = Math.floor(seconds / 3600)
+				const mins = Math.floor((seconds % 3600) / 60)
+				const secs = seconds % 60
+				
+				if (hours > 0) {
+					return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+				} else {
+					return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #F5F5F5;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		padding: 40rpx 30rpx 80rpx;
+		padding-top: calc(30px + 40rpx);
+		box-sizing: border-box;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 0;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 36rpx;
+		color: #666666;
+	}
+	
+	.share-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.share-icon {
+		font-size: 36rpx;
+		color: #666666;
+	}
+	
+	.book-info-section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		flex: 1;
+		justify-content: center;
+	}
+	
+	.book-cover {
+		width: 400rpx;
+		height: 560rpx;
+		border-radius: 8rpx;
+		margin-bottom: 40rpx;
+		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.15);
+		background-color: #F5F5F5;
+	}
+	
+	.book-title {
+		font-size: 40rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 20rpx;
+		text-align: center;
+	}
+	
+	.book-author {
+		font-size: 28rpx;
+		color: #999999;
+		margin-bottom: 20rpx;
+		text-align: center;
+	}
+	
+	.chapter-title {
+		font-size: 26rpx;
+		color: #666666;
+		margin-bottom: 20rpx;
+		text-align: center;
+	}
+	
+	.add-to-shelf-btn {
+		width: 300rpx;
+		height: 80rpx;
+		background-color: #F5F5F5;
+		color: #333333;
+		font-size: 28rpx;
+		border: none;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.add-to-shelf-btn::after {
+		border: none;
+	}
+	
+	.player-section {
+		width: 100%;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	
+	.progress-section {
+		margin-bottom: 60rpx;
+		width: 100%;
+	}
+	
+	.progress-bar-wrapper {
+		width: 100%;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		position: relative;
+		margin-bottom: 20rpx;
+	}
+	
+	.time-label {
+		display: flex;
+		justify-content: center;
+	}
+	
+	.time-text {
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+		font-size: 24rpx;
+		padding: 8rpx 20rpx;
+		border-radius: 20rpx;
+	}
+	
+	.progress-bar {
+		width: 100%;
+		height: 4rpx;
+		background-color: #E0E0E0;
+		border-radius: 2rpx;
+		position: relative;
+	}
+	
+	.progress-filled {
+		height: 100%;
+		background-color: #4FC3F7;
+		border-radius: 2rpx;
+		transition: width 0.3s ease;
+	}
+	
+	.progress-dot {
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 24rpx;
+		height: 24rpx;
+		background-color: #4FC3F7;
+		border-radius: 50%;
+		box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
+	}
+	
+	.controls-section {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		padding: 0 40rpx;
+	}
+	
+	.control-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.control-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.control-icon {
+		font-size: 40rpx;
+		color: #333333;
+	}
+	
+	.play-btn {
+		width: 120rpx;
+		height: 120rpx;
+		background-color: #4FC3F7;
+		border-radius: 50%;
+		box-shadow: 0 4rpx 12rpx rgba(79, 195, 247, 0.4);
+	}
+	
+	.play-icon {
+		font-size: 60rpx;
+		color: #FFFFFF;
+		margin-left: 6rpx;
+	}
+</style>
+

+ 280 - 0
pages/portable-listen/portable-listen.vue

@@ -0,0 +1,280 @@
+<template>
+    <view class="container">
+        <!-- 顶部导航栏 -->
+        <view class="header">
+            <view class="back-btn" @click="goBack">
+                <text class="back-icon">←</text>
+            </view>
+            <text class="header-title">随身听</text>
+            <view class="search-btn" @click="goToSearch">
+                <text class="search-icon">🔍</text>
+            </view>
+        </view>
+        
+        <!-- 音频列表 -->
+        <scroll-view class="audio-list-container" scroll-y>
+            <view class="loading" v-if="isLoading">
+                <text>加载中...</text>
+            </view>
+            
+            <view class="empty" v-else-if="audioList.length === 0">
+                <text>暂无随身听内容</text>
+            </view>
+            
+            <view 
+                class="audio-item" 
+                v-for="(audio, index) in audioList" 
+                :key="audio.id || index"
+                @click="goToAudioDetail(audio)"
+            >
+                <view class="cover-wrapper">
+                    <image 
+                        class="audio-cover" 
+                        :src="audio.cover" 
+                        mode="aspectFill"
+                        :lazy-load="true"
+                        @error="handleImageError(index)"
+                    ></image>
+                    <view class="play-icon-overlay">
+                        <text class="play-icon">▶</text>
+                    </view>
+                </view>
+                <view class="audio-info">
+                    <text class="audio-title">{{ audio.title }}</text>
+                    <text class="audio-desc">{{ audio.desc }}</text>
+                    <text class="audio-author">{{ audio.author }}</text>
+                </view>
+                <button class="play-btn" @click.stop="handlePlay(audio)">
+                    <text class="play-btn-text">播放</text>
+                </button>
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+    import { getPopularAudiobooks } from '../../utils/api.js'
+    
+    export default {
+        data() {
+            return {
+                audioList: [],
+                isLoading: false
+            }
+        },
+        onLoad() {
+            this.loadAudioList()
+        },
+        methods: {
+            async loadAudioList() {
+                this.isLoading = true
+                try {
+                    const res = await getPopularAudiobooks(50)
+                    if (res && res.code === 200 && Array.isArray(res.data)) {
+                        this.audioList = res.data.map(item => ({
+                            id: item.id,
+                            title: item.title,
+                            author: item.narrator ? `${item.author || ''} / 主播:${item.narrator}`.trim() : (item.author || ''),
+                            desc: item.brief || item.desc || '',
+                            cover: item.image || item.cover || 'https://picsum.photos/seed/portable-listen/200/300'
+                        }))
+                    } else {
+                        this.audioList = []
+                    }
+                } catch (error) {
+                    console.error('加载随身听失败:', error)
+                    this.audioList = []
+                    uni.showToast({
+                        title: '加载失败',
+                        icon: 'none'
+                    })
+                } finally {
+                    this.isLoading = false
+                }
+            },
+            goBack() {
+                uni.navigateBack({
+                    delta: 1
+                })
+            },
+            goToSearch() {
+                uni.navigateTo({
+                    url: '/pages/search/search'
+                })
+            },
+            goToAudioDetail(audio) {
+                if (!audio || !audio.id) {
+                    uni.showToast({
+                        title: '听书信息不完整',
+                        icon: 'none'
+                    })
+                    return
+                }
+                uni.navigateTo({
+                    url: `/pages/listen-detail/listen-detail?audiobookId=${audio.id}`
+                })
+            },
+            handlePlay(audio) {
+                if (!audio || !audio.id) {
+                    uni.showToast({
+                        title: '听书信息不完整',
+                        icon: 'none'
+                    })
+                    return
+                }
+                this.goToAudioDetail(audio)
+            },
+            handleImageError(index) {
+                if (this.audioList[index]) {
+                    this.audioList[index].cover = `https://picsum.photos/seed/portable-fallback${index}/200/300`
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .container {
+        width: 100%;
+        height: 100vh;
+        background-color: #FFFFFF;
+        display: flex;
+        flex-direction: column;
+        padding-top: 30px;
+        box-sizing: border-box;
+    }
+    
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20rpx 30rpx;
+        background-color: #FFFFFF;
+        border-bottom: 1rpx solid #F0F0F0;
+    }
+    
+    .back-btn, .search-btn {
+        width: 60rpx;
+        height: 60rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .back-icon {
+        font-size: 40rpx;
+        color: #333333;
+        font-weight: bold;
+    }
+    
+    .header-title {
+        font-size: 34rpx;
+        font-weight: bold;
+        color: #333333;
+    }
+    
+    .search-icon {
+        font-size: 36rpx;
+        color: #333333;
+    }
+    
+    .audio-list-container {
+        flex: 1;
+        width: 100%;
+    }
+    
+    .loading, .empty {
+        text-align: center;
+        padding: 60rpx 0;
+        color: #999999;
+        font-size: 30rpx;
+    }
+    
+    .audio-item {
+        display: flex;
+        align-items: center;
+        padding: 30rpx 30rpx;
+        border-bottom: 1rpx solid #F0F0F0;
+    }
+    
+    .cover-wrapper {
+        position: relative;
+        width: 160rpx;
+        height: 220rpx;
+        margin-right: 30rpx;
+        flex-shrink: 0;
+    }
+    
+    .audio-cover {
+        width: 100%;
+        height: 100%;
+        border-radius: 12rpx;
+        object-fit: cover;
+        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.12);
+        background-color: #F5F5F5;
+    }
+    
+    .play-icon-overlay {
+        position: absolute;
+        bottom: 10rpx;
+        right: 10rpx;
+        width: 48rpx;
+        height: 48rpx;
+        border-radius: 50%;
+        background: rgba(0,0,0,0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .play-icon {
+        color: #FFFFFF;
+        font-size: 26rpx;
+        margin-left: 4rpx;
+    }
+    
+    .audio-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 10rpx;
+    }
+    
+    .audio-title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333333;
+    }
+    
+    .audio-desc {
+        font-size: 26rpx;
+        color: #666666;
+        line-height: 1.6;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+    
+    .audio-author {
+        font-size: 24rpx;
+        color: #999999;
+    }
+    
+    .play-btn {
+        background-color: #4CAF50;
+        color: #FFFFFF;
+        border: none;
+        border-radius: 32rpx;
+        padding: 12rpx 26rpx;
+        font-size: 26rpx;
+    }
+    
+    .play-btn::after {
+        border: none;
+    }
+    
+    .play-btn-text {
+        color: #FFFFFF;
+    }
+</style>

+ 329 - 0
pages/profile/profile.vue

@@ -0,0 +1,329 @@
+<template>
+	<view class="container">
+		<!-- 用户资料头部 -->
+		<view class="user-header">
+			<view class="user-info">
+				<image class="avatar" :src="displayAvatar" mode="aspectFill"></image>
+				<view class="user-details">
+					<text class="username">{{ userInfo ? userInfo.nickname || userInfo.username : '未登录' }}</text>
+					<text class="edit-profile" v-if="userInfo" @click="editProfile">编辑个人资料</text>
+					<text class="edit-profile" v-else @click="goToLogin">去登录</text>
+				</view>
+			</view>
+			<view class="settings-btn" @click="goToSettings">
+				<text class="settings-icon">⚙️</text>
+			</view>
+		</view>
+		
+		<!-- VIP会员横幅 -->
+		<view class="vip-banner" @click="goToVip">
+			<text class="vip-text">开通VIP无限畅读好书</text>
+			<button class="vip-btn">去开通</button>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 菜单列表 -->
+			<view class="menu-section" v-if="userInfo">
+				<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
+					<view class="menu-icon-wrapper">
+						<text class="menu-icon">{{ item.icon }}</text>
+					</view>
+					<text class="menu-text">{{ item.name }}</text>
+					<text class="menu-arrow">></text>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getUserProfile } from '../../utils/api.js'
+	
+	const defaultAvatar = 'https://picsum.photos/seed/avatar/200/200'
+	
+	export default {
+		data() {
+			return {
+				userInfo: null,
+				menuItems: [
+					{ 
+						name: '消息', 
+						icon: '💬',
+						action: 'messages'
+					},
+					{ 
+						name: '笔记', 
+						icon: '📝',
+						action: 'notes'
+					},
+					{ 
+						name: '阅读排行', 
+						icon: '🏆',
+						action: 'readingRank'
+					},
+					{ 
+						name: '浏览记录', 
+						icon: '🕐',
+						action: 'browsingHistory'
+					},
+					{ 
+						name: '开通VIP记录', 
+						icon: '💰',
+						action: 'vipRecords'
+					},
+					{ 
+						name: '意见反馈', 
+						icon: '❓',
+						action: 'feedback'
+					}
+				]
+			}
+		},
+		computed: {
+			displayAvatar() {
+				if (this.userInfo && this.userInfo.avatar) {
+					return this.userInfo.avatar
+				}
+				return defaultAvatar
+			}
+		},
+		onLoad() {
+			this.loadUserInfo()
+		},
+		onShow() {
+			this.loadUserInfo()
+		},
+		methods: {
+			loadUserInfo() {
+				try {
+					const storedUser = uni.getStorageSync('userInfo')
+					const isLogin = uni.getStorageSync('isLogin')
+					if (!storedUser || !storedUser.id || !isLogin) {
+						this.userInfo = null
+						return
+					}
+					this.userInfo = storedUser
+					this.fetchRemoteUser(storedUser.id)
+				} catch (e) {
+					console.error('读取用户信息失败', e)
+					this.userInfo = null
+				}
+			},
+			async fetchRemoteUser(userId) {
+				try {
+					const res = await getUserProfile(userId)
+					if (res && res.code === 200 && res.data) {
+						this.userInfo = {
+							...this.userInfo,
+							...res.data
+						}
+						uni.setStorageSync('userInfo', this.userInfo)
+					}
+				} catch (e) {
+					console.error('刷新用户信息失败', e)
+				}
+			},
+			editProfile() {
+				uni.navigateTo({
+					url: '/pages/edit-profile/edit-profile'
+				})
+			},
+			goToLogin() {
+				uni.navigateTo({
+					url: '/pages/login/login'
+				})
+			},
+			goToSettings() {
+				uni.navigateTo({
+					url: '/pages/settings/settings'
+				})
+			},
+			goToVip() {
+				uni.navigateTo({
+					url: '/pages/vip/vip'
+				})
+			},
+			handleMenuClick(item) {
+				switch(item.action) {
+					case 'messages':
+						uni.navigateTo({
+							url: '/pages/messages/messages'
+						})
+						break
+					case 'notes':
+						uni.navigateTo({
+							url: '/pages/notes/notes'
+						})
+						break
+					case 'readingRank':
+						uni.navigateTo({
+							url: '/pages/reading-rank/reading-rank'
+						})
+						break
+					case 'browsingHistory':
+						uni.navigateTo({
+							url: '/pages/browsing-history/browsing-history'
+						})
+						break
+					case 'vipRecords':
+						uni.navigateTo({
+							url: '/pages/vip-records/vip-records'
+						})
+						break
+					case 'feedback':
+						uni.navigateTo({
+							url: '/pages/feedback/feedback'
+						})
+						break
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 80px;
+		box-sizing: border-box;
+	}
+	
+	.user-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.user-info {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+	
+	.avatar {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 50%;
+		margin-right: 30rpx;
+		background-color: #F5F5F5;
+		border: 2rpx solid #E0E0E0;
+	}
+	
+	.user-details {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.username {
+		font-size: 40rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 15rpx;
+	}
+	
+	.edit-profile {
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	.settings-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.settings-icon {
+		font-size: 40rpx;
+		color: #333333;
+	}
+	
+	.vip-banner {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin: 30rpx;
+		padding: 30rpx;
+		background: linear-gradient(135deg, #FFE5CC 0%, #FFF0E0 100%);
+		border-radius: 16rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+	}
+	
+	.vip-text {
+		font-size: 28rpx;
+		color: #666666;
+		flex: 1;
+	}
+	
+	.vip-btn {
+		width: 140rpx;
+		height: 60rpx;
+		background-color: #666666;
+		color: #FFFFFF;
+		font-size: 26rpx;
+		border: none;
+		border-radius: 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+	
+	.vip-btn::after {
+		border: none;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+	}
+	
+	.menu-section {
+		background-color: #FFFFFF;
+		padding: 0 30rpx;
+	}
+	
+	.menu-item {
+		display: flex;
+		align-items: center;
+		padding: 35rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.menu-item:last-child {
+		border-bottom: none;
+	}
+	
+	.menu-icon-wrapper {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 30rpx;
+	}
+	
+	.menu-icon {
+		font-size: 40rpx;
+	}
+	
+	.menu-text {
+		flex: 1;
+		font-size: 32rpx;
+		color: #333333;
+	}
+	
+	.menu-arrow {
+		font-size: 32rpx;
+		color: #CCCCCC;
+	}
+</style>
+

+ 524 - 0
pages/ranking/ranking.vue

@@ -0,0 +1,524 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">排行榜</text>
+			<view class="placeholder"></view>
+		</view>
+		
+		<!-- 横向标签栏 -->
+		<view class="tab-bar">
+			<view 
+				class="tab-item" 
+				v-for="(tab, index) in rankingTabs" 
+				:key="index"
+				:class="{ 'tab-active': activeTab === index }"
+				@click="switchTab(index)"
+			>
+				<text class="tab-text" :class="{ 'tab-text-active': activeTab === index }">{{ tab }}</text>
+			</view>
+		</view>
+		
+		<!-- 主体内容区 -->
+		<view class="main-content">
+			<!-- 左侧分类边栏 -->
+			<scroll-view class="sidebar" scroll-y>
+				<view 
+					class="category-item" 
+					v-for="(category, index) in categories" 
+					:key="index"
+					:class="{ 'category-active': activeCategory === index }"
+					@click="switchCategory(index)"
+				>
+					<view class="category-indicator" v-if="activeCategory === index"></view>
+					<text class="category-text" :class="{ 'category-text-active': activeCategory === index }">{{ category }}</text>
+				</view>
+			</scroll-view>
+			
+			<!-- 右侧书籍列表 -->
+			<scroll-view class="book-list-container" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
+				<view 
+					class="book-item" 
+					v-for="(book, index) in bookList" 
+					:key="book.id || index"
+					@click="goToBookDetail(book)"
+				>
+					<text class="rank-number">{{ index + 1 }}</text>
+					<image 
+						class="book-cover" 
+						:src="book.cover" 
+						mode="aspectFill"
+						:lazy-load="true"
+						@error="handleImageError(index)"
+					></image>
+					<view class="book-info">
+						<text class="book-title">{{ book.title }}</text>
+						<text class="book-author">{{ book.author }}</text>
+					</view>
+					<view class="divider-line"></view>
+				</view>
+				
+				<!-- 加载中提示 -->
+				<view class="load-more" v-if="isLoading">
+					<text class="load-more-text">加载中...</text>
+				</view>
+				<!-- 空状态 -->
+				<view class="load-more" v-else-if="!isLoading && bookList.length === 0">
+					<text class="load-more-text">暂无数据</text>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getAllRankingGroups, getRankingByCode, getAllCategories } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				activeTab: 0, // 当前选中的标签索引
+				activeCategory: 0, // 当前选中的分类索引
+				hasMore: true,
+				page: 1,
+				isLoading: false,
+				rankingTabs: [], // 从数据库获取的排行榜类型
+				rankingGroups: [], // 排行榜组数据(包含id、name、code)
+				categories: [], // 从数据库获取的分类列表
+				categoryList: [], // 分类数据(包含id、name)
+				bookList: [] // 书籍列表(从数据库获取)
+			}
+		},
+		onLoad() {
+			// 页面加载时初始化数据
+			this.initData();
+		},
+		methods: {
+			// 初始化数据:加载排行榜类型和分类
+			async initData() {
+				try {
+					this.isLoading = true;
+					// 并行加载排行榜类型和分类
+					await Promise.all([
+						this.loadRankingGroups(),
+						this.loadCategories()
+					]);
+					// 加载完成后,加载书籍列表
+					await this.loadBookList();
+				} catch (err) {
+					console.error('初始化数据失败:', err);
+					uni.showToast({
+						title: '加载失败,请重试',
+						icon: 'none'
+					});
+				} finally {
+					this.isLoading = false;
+				}
+			},
+			// 加载排行榜类型
+			async loadRankingGroups() {
+				try {
+					const res = await getAllRankingGroups();
+					if (res && res.code === 200 && res.data) {
+						this.rankingGroups = res.data;
+						this.rankingTabs = res.data.map(group => group.name);
+						console.log('排行榜类型加载成功:', this.rankingTabs);
+					} else {
+						console.warn('排行榜类型数据为空,使用默认数据');
+						// 如果数据库没有数据,使用默认值
+						this.rankingTabs = ['畅销榜', '热门榜', '口碑榜', '好评榜', '新书榜'];
+						this.rankingGroups = [
+							{ id: 1, name: '畅销榜', code: 'bestseller' },
+							{ id: 2, name: '热门榜', code: 'popular' },
+							{ id: 3, name: '口碑榜', code: 'reputation' },
+							{ id: 4, name: '好评榜', code: 'good_reviews' },
+							{ id: 5, name: '新书榜', code: 'new_books' }
+						];
+					}
+				} catch (err) {
+					console.error('加载排行榜类型失败:', err);
+					// 使用默认值
+					this.rankingTabs = ['畅销榜', '热门榜', '口碑榜', '好评榜', '新书榜'];
+					this.rankingGroups = [
+						{ id: 1, name: '畅销榜', code: 'bestseller' },
+						{ id: 2, name: '热门榜', code: 'popular' },
+						{ id: 3, name: '口碑榜', code: 'reputation' },
+						{ id: 4, name: '好评榜', code: 'good_reviews' },
+						{ id: 5, name: '新书榜', code: 'new_books' }
+					];
+				}
+			},
+			// 加载分类列表
+			async loadCategories() {
+				try {
+					const res = await getAllCategories();
+					if (res && res.code === 200 && res.data) {
+						this.categoryList = res.data;
+						// 添加"全部分类"选项
+						this.categories = ['全部分类', ...res.data.map(cat => cat.name)];
+						console.log('分类列表加载成功:', this.categories);
+					} else {
+						console.warn('分类数据为空,使用默认数据');
+						// 如果数据库没有数据,使用默认值
+						this.categories = ['全部分类', '文艺', '历史', '人文', '科学', '教育', '生活', '外语', '商业', '养生', '职场', '少儿'];
+						this.categoryList = [
+							{ id: 1, name: '文艺' },
+							{ id: 2, name: '历史' },
+							{ id: 3, name: '人文' },
+							{ id: 4, name: '科学' },
+							{ id: 5, name: '教育' },
+							{ id: 6, name: '生活' },
+							{ id: 7, name: '外语' },
+							{ id: 8, name: '商业' },
+							{ id: 9, name: '养生' },
+							{ id: 10, name: '职场' },
+							{ id: 11, name: '少儿' }
+						];
+					}
+				} catch (err) {
+					console.error('加载分类失败:', err);
+					// 使用默认值
+					this.categories = ['全部分类', '文艺', '历史', '人文', '科学', '教育', '生活', '外语', '商业', '养生', '职场', '少儿'];
+					this.categoryList = [
+						{ id: 1, name: '文艺' },
+						{ id: 2, name: '历史' },
+						{ id: 3, name: '人文' },
+						{ id: 4, name: '科学' },
+						{ id: 5, name: '教育' },
+						{ id: 6, name: '生活' },
+						{ id: 7, name: '外语' },
+						{ id: 8, name: '商业' },
+						{ id: 9, name: '养生' },
+						{ id: 10, name: '职场' },
+						{ id: 11, name: '少儿' }
+					];
+				}
+			},
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			switchTab(index) {
+				if (this.activeTab !== index) {
+					this.activeTab = index;
+					this.page = 1;
+					this.hasMore = true;
+					this.loadBookList();
+				}
+			},
+			switchCategory(index) {
+				if (this.activeCategory !== index) {
+					this.activeCategory = index;
+					this.page = 1;
+					this.hasMore = true;
+					this.loadBookList();
+				}
+			},
+			goToBookDetail(book) {
+				if (!book || !book.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/book-detail/book-detail?bookId=${book.id}`
+				});
+			},
+			handleImageError(index) {
+				// 图片加载失败时使用备用图片
+				if (this.bookList[index]) {
+					this.bookList[index].cover = `https://picsum.photos/seed/fallback${index}/200/300`;
+				}
+			},
+			// 从后端加载书籍列表
+			async loadBookList() {
+				try {
+					this.isLoading = true;
+					
+					// 获取当前选中的排行榜类型
+					if (!this.rankingGroups || this.rankingGroups.length === 0) {
+						console.warn('排行榜类型未加载');
+						this.bookList = [];
+						return;
+					}
+					
+					const currentGroup = this.rankingGroups[this.activeTab];
+					if (!currentGroup || !currentGroup.code) {
+						console.warn('当前排行榜类型无效');
+						this.bookList = [];
+						return;
+					}
+					
+					// 获取当前选中的分类ID
+					let categoryId = null;
+					if (this.activeCategory > 0 && this.categoryList && this.categoryList.length > 0) {
+						// activeCategory为0表示"全部分类",从1开始才是实际分类
+						const categoryIndex = this.activeCategory - 1;
+						if (categoryIndex >= 0 && categoryIndex < this.categoryList.length) {
+							categoryId = this.categoryList[categoryIndex].id;
+						}
+					}
+					
+					// 调用API获取排行榜书籍
+					const res = await getRankingByCode(currentGroup.code, categoryId);
+					
+					if (res && res.code === 200 && res.data) {
+						// 转换数据格式
+						this.bookList = res.data.map((book, index) => ({
+							id: book.id,
+							title: book.title || '未知书名',
+							author: book.author || '未知作者',
+							cover: book.cover || book.image || `https://picsum.photos/seed/book${book.id}/200/300`,
+							rank: index + 1
+						}));
+						console.log('排行榜书籍加载成功,共', this.bookList.length, '本');
+					} else {
+						console.warn('排行榜书籍数据为空');
+						this.bookList = [];
+					}
+				} catch (err) {
+					console.error('加载排行榜书籍失败:', err);
+					this.bookList = [];
+					uni.showToast({
+						title: '加载失败,请重试',
+						icon: 'none'
+					});
+				} finally {
+					this.isLoading = false;
+					this.hasMore = false; // 排行榜数据不分页,一次性加载
+				}
+			},
+			// 加载更多(排行榜数据一次性加载,此方法保留但不使用)
+			loadMore() {
+				// 排行榜数据一次性加载,不需要分页
+				// 此方法保留用于兼容,但不执行任何操作
+				if (this.hasMore) {
+					this.hasMore = false;
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	/* 顶部导航栏 */
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #4DB6AC;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #FFFFFF;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	
+	.placeholder {
+		width: 60rpx;
+	}
+	
+	/* 横向标签栏 */
+	.tab-bar {
+		display: flex;
+		align-items: center;
+		background-color: #66CCC2;
+		padding: 0 20rpx;
+		overflow-x: auto;
+		white-space: nowrap;
+	}
+	
+	.tab-item {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 24rpx 20rpx;
+		min-width: 120rpx;
+	}
+	
+	.tab-text {
+		font-size: 28rpx;
+		color: #FFFFFF;
+		transition: color 0.3s ease;
+	}
+	
+	.tab-text-active {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #2E7D32;
+	}
+	
+	.tab-active {
+		border-bottom: 4rpx solid #2E7D32;
+	}
+	
+	/* 主体内容区 */
+	.main-content {
+		flex: 1;
+		display: flex;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+	}
+	
+	/* 左侧分类边栏 */
+	.sidebar {
+		width: 160rpx;
+		height: 100%;
+		background-color: #FFFFFF;
+		border-right: 1rpx solid #E5E5E5;
+	}
+	
+	.category-item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 30rpx 20rpx;
+		min-height: 80rpx;
+		box-sizing: border-box;
+	}
+	
+	.category-active {
+		background-color: #F5F5F5;
+	}
+	
+	.category-indicator {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 6rpx;
+		background-color: #4DB6AC;
+	}
+	
+	.category-text {
+		font-size: 28rpx;
+		color: #999999;
+		transition: color 0.3s ease;
+	}
+	
+	.category-text-active {
+		color: #4DB6AC;
+		font-weight: bold;
+	}
+	
+	/* 右侧书籍列表 */
+	.book-list-container {
+		flex: 1;
+		height: 100%;
+		background-color: #FFFFFF;
+		padding: 0 30rpx;
+	}
+	
+	.book-item {
+		display: flex;
+		align-items: center;
+		padding: 30rpx 0;
+		position: relative;
+	}
+	
+	.rank-number {
+		font-size: 48rpx;
+		font-weight: bold;
+		color: #CCCCCC;
+		width: 80rpx;
+		text-align: center;
+		flex-shrink: 0;
+	}
+	
+	.book-cover {
+		width: 120rpx;
+		height: 160rpx;
+		border-radius: 8rpx;
+		margin-right: 24rpx;
+		flex-shrink: 0;
+		background-color: #F5F5F5;
+	}
+	
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000000;
+		margin-bottom: 12rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.book-author {
+		font-size: 26rpx;
+		color: #999999;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.divider-line {
+		position: absolute;
+		bottom: 0;
+		left: 80rpx;
+		right: 0;
+		height: 1rpx;
+		background-color: #E5E5E5;
+	}
+	
+	/* 加载更多 */
+	.load-more {
+		width: 100%;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 20rpx;
+		margin-bottom: 40rpx;
+	}
+	
+	.load-more-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>

+ 1213 - 0
pages/reader/reader.vue

@@ -0,0 +1,1213 @@
+<template>
+	<view class="container" :class="{ 'dark-mode': isDarkMode }">
+		<!-- 顶部导航栏 -->
+		<view class="header" v-if="showToolbar">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">{{ bookInfo.title }}</text>
+			<view class="share-btn" @click="handleShare">
+				<text class="share-icon">↗</text>
+			</view>
+		</view>
+		
+		<!-- 阅读内容区域 -->
+		<scroll-view 
+			class="content-area" 
+			scroll-y 
+			@scroll="handleScroll"
+			@tap="handleContentTap"
+		>
+			<!-- 加载中 -->
+			<view class="loading-section" v-if="isLoading && contentLines.length === 0">
+				<text class="loading-text">加载中...</text>
+			</view>
+			
+			<!-- 章节信息 -->
+			<view class="chapter-info" v-if="currentChapter && !isLoading">
+				<text class="chapter-title">{{ currentChapter.title }}</text>
+			</view>
+			
+			<!-- 内容 -->
+			<view class="content-text" :style="{ fontSize: fontSize + 'rpx' }" v-if="!isLoading || contentLines.length > 0">
+				<view 
+					class="text-line-wrapper"
+					v-for="(line, index) in contentLines" 
+					:key="index"
+					@longpress="handleLongPress($event, line, index)"
+					@touchstart="handleTouchStart"
+					@touchend="handleTouchEnd"
+				>
+					<text class="text-line" :selectable="true">{{ line }}</text>
+				</view>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-section" v-if="!isLoading && contentLines.length === 0 && chapterList.length === 0">
+				<text class="empty-text">暂无章节内容</text>
+			</view>
+		</scroll-view>
+		
+		<!-- 文本选择菜单 -->
+		<view class="text-selection-menu" v-if="showSelectionMenu" :style="{ top: selectionMenuTop + 'px', left: selectionMenuLeft + 'px' }">
+			<view class="selection-menu-item" @click="copySelectedText">
+				<text class="selection-menu-text">复制</text>
+			</view>
+			<view class="selection-menu-item" @click="writeNoteFromSelection">
+				<text class="selection-menu-text">写笔记</text>
+			</view>
+		</view>
+		
+		<!-- 选中文本高亮层 -->
+		<view class="selection-overlay" v-if="showSelectionMenu" @tap="hideSelectionMenu"></view>
+		
+		<!-- 悬浮设置面板(随滚动悬浮显示) -->
+		<view class="floating-settings" v-if="showToolbar" :class="{ 'dark-mode': isDarkMode }">
+			<view class="floating-item" @click="showChapterList">
+				<text class="floating-text">目录</text>
+			</view>
+			<view class="floating-divider"></view>
+			<view class="floating-item" @click="showNotes">
+				<text class="floating-text">笔记</text>
+			</view>
+			<view class="floating-divider"></view>
+			<view class="floating-item" @click="toggleTheme">
+				<text class="floating-text">夜间</text>
+			</view>
+			<view class="floating-divider"></view>
+			<view class="floating-item" @click="showFontSize">
+				<text class="floating-text">字号</text>
+			</view>
+		</view>
+		
+		<!-- 目录弹窗 -->
+		<view class="chapter-modal" v-if="showChapterModal" @tap="closeChapterModal">
+			<view class="modal-content" :class="{ 'dark-mode': isDarkMode }" @tap.stop>
+				<view class="modal-header">
+					<text class="modal-title">目录</text>
+					<view class="close-btn" @click="closeChapterModal">
+						<text class="close-icon">×</text>
+					</view>
+				</view>
+				<scroll-view class="chapter-list" scroll-y>
+					<view 
+						class="chapter-item" 
+						v-for="(chapter, index) in chapterList" 
+						:key="index"
+						:class="{ active: currentChapter.id === chapter.id }"
+						@click="selectChapter(chapter)"
+					>
+						<text class="chapter-item-title">{{ chapter.title }}</text>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+		
+		<!-- 笔记弹窗 -->
+		<view class="notes-modal" v-if="showNotesModal" @tap="closeNotesModal">
+			<view class="modal-content" :class="{ 'dark-mode': isDarkMode }" @tap.stop>
+				<view class="modal-header">
+					<text class="modal-title">笔记</text>
+					<view class="close-btn" @click="closeNotesModal">
+						<text class="close-icon">×</text>
+					</view>
+				</view>
+				<view class="notes-content">
+					<view class="add-note-section">
+						<textarea 
+							class="note-input" 
+							v-model="newNote" 
+							placeholder="添加笔记..."
+							maxlength="500"
+						></textarea>
+						<button class="add-note-btn" @click="addNote">添加</button>
+					</view>
+					<scroll-view class="notes-list" scroll-y>
+						<view 
+							class="note-item" 
+							v-for="(note, index) in notes" 
+							:key="index"
+						>
+							<view class="note-header">
+								<text class="note-time">{{ note.time }}</text>
+								<view class="note-delete" @click="deleteNote(index)">
+									<text class="delete-icon">×</text>
+								</view>
+							</view>
+							<text class="note-content">{{ note.content }}</text>
+						</view>
+						<view class="empty-notes" v-if="notes.length === 0">
+							<text class="empty-text">暂无笔记</text>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 字号选择弹窗 -->
+		<view class="fontsize-modal" v-if="showFontSizeModal" @tap="closeFontSizeModal">
+			<view class="modal-content-small" :class="{ 'dark-mode': isDarkMode }" @tap.stop>
+				<view class="fontsize-title">字号</view>
+				<view class="fontsize-options">
+					<view 
+						class="fontsize-item" 
+						v-for="(size, index) in fontSizeOptions" 
+						:key="index"
+						:class="{ active: fontSize === size.value }"
+						@click="selectFontSize(size.value)"
+					>
+						<text class="fontsize-label">{{ size.label }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getBookChapters, getBookChapterDetail, getBookById } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				bookInfo: {
+					id: null,
+					title: '',
+					author: '',
+					image: ''
+				},
+				currentChapter: null,
+				contentLines: [],
+				chapterList: [],
+				isLoading: false,
+				showToolbar: false,
+				showChapterModal: false,
+				showNotesModal: false,
+				showFontSizeModal: false,
+				isDarkMode: false,
+				fontSize: 32,
+				fontSizeOptions: [
+					{ label: '小', value: 28 },
+					{ label: '中', value: 32 },
+					{ label: '大', value: 36 },
+					{ label: '特大', value: 40 }
+				],
+				notes: [],
+				newNote: '',
+				showSelectionMenu: false,
+				selectionMenuTop: 0,
+				selectionMenuLeft: 0,
+				selectedText: '',
+				selectedLine: '',
+				selectedLineIndex: -1
+			}
+		},
+		onLoad(options) {
+			if (options.bookId) {
+				this.bookInfo.id = parseInt(options.bookId)
+			}
+			if (options.title) {
+				this.bookInfo.title = decodeURIComponent(options.title)
+			}
+			if (options.image) {
+				this.bookInfo.image = decodeURIComponent(options.image)
+			}
+			if (options.author) {
+				this.bookInfo.author = decodeURIComponent(options.author)
+			}
+			
+			// 加载书籍信息和章节列表
+			if (this.bookInfo.id) {
+				this.loadBookInfo()
+				this.loadChapterList()
+			}
+			
+			// 加载阅读进度和设置
+			this.loadReadingProgress()
+			this.loadSettings()
+			this.loadNotes()
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			handleShare() {
+				uni.showToast({
+					title: '分享功能',
+					icon: 'none'
+				})
+			},
+			handleContentTap(e) {
+				// 如果点击的不是选择菜单,则切换工具栏
+				if (!this.showSelectionMenu) {
+					this.toggleToolbar()
+				}
+				// 隐藏选择菜单
+				this.hideSelectionMenu()
+			},
+			toggleToolbar() {
+				this.showToolbar = !this.showToolbar
+			},
+			handleScroll(e) {
+				// 滚动时仅隐藏选择菜单,不隐藏悬浮设置面板
+				if (this.showSelectionMenu) {
+					this.hideSelectionMenu()
+				}
+			},
+			// 文本选择功能
+			handleLongPress(e, line, index) {
+				// 长按文本时显示选择菜单
+				if (line && line.trim()) {
+					// 获取触摸位置
+					const touch = e.touches && e.touches[0] || e.changedTouches && e.changedTouches[0]
+					if (touch) {
+						this.selectedText = line
+						this.selectedLine = line
+						this.selectedLineIndex = index
+						
+						// 使用setTimeout确保DOM已更新
+						setTimeout(() => {
+							// 计算菜单位置(在触摸点附近)
+							const query = uni.createSelectorQuery().in(this)
+							query.select('.content-area').boundingClientRect((rect) => {
+								if (rect) {
+									// 计算相对位置
+									const menuWidth = 200 // 菜单宽度(rpx转px约100px)
+									const menuHeight = 100 // 菜单高度(rpx转px约50px)
+									
+									// 确保菜单不超出屏幕
+									let left = touch.clientX - menuWidth / 2
+									if (left < 20) left = 20
+									if (left + menuWidth > rect.width - 20) {
+										left = rect.width - menuWidth - 20
+									}
+									
+									let top = touch.clientY - menuHeight - 20
+									if (top < rect.top + 20) {
+										top = touch.clientY + 20
+									}
+									
+									this.selectionMenuTop = top
+									this.selectionMenuLeft = left
+									this.showSelectionMenu = true
+								}
+							}).exec()
+						}, 50)
+					}
+				}
+			},
+			handleTouchStart(e) {
+				// 触摸开始,可以用于记录位置
+			},
+			handleTouchEnd(e) {
+				// 触摸结束
+			},
+			hideSelectionMenu() {
+				this.showSelectionMenu = false
+				this.selectedText = ''
+				this.selectedLine = ''
+				this.selectedLineIndex = -1
+			},
+			copySelectedText() {
+				if (this.selectedText) {
+					// #ifdef H5
+					// H5平台使用Clipboard API
+					if (navigator.clipboard) {
+						navigator.clipboard.writeText(this.selectedText).then(() => {
+							uni.showToast({
+								title: '已复制到剪贴板',
+								icon: 'success'
+							})
+						}).catch(() => {
+							this.fallbackCopy(this.selectedText)
+						})
+					} else {
+						this.fallbackCopy(this.selectedText)
+					}
+					// #endif
+					
+					// #ifdef APP-PLUS
+					// App平台
+					plus.clipboard.setData(this.selectedText, () => {
+						uni.showToast({
+							title: '已复制到剪贴板',
+							icon: 'success'
+						})
+					})
+					// #endif
+					
+					// #ifdef MP
+					// 小程序平台
+					uni.setClipboardData({
+						data: this.selectedText,
+						success: () => {
+							uni.showToast({
+								title: '已复制到剪贴板',
+								icon: 'success'
+							})
+						}
+					})
+					// #endif
+					
+					this.hideSelectionMenu()
+				}
+			},
+			fallbackCopy(text) {
+				// 备用复制方法(H5)
+				const textarea = document.createElement('textarea')
+				textarea.value = text
+				textarea.style.position = 'fixed'
+				textarea.style.opacity = '0'
+				document.body.appendChild(textarea)
+				textarea.select()
+				try {
+					document.execCommand('copy')
+					uni.showToast({
+						title: '已复制到剪贴板',
+						icon: 'success'
+					})
+				} catch (err) {
+					uni.showToast({
+						title: '复制失败',
+						icon: 'none'
+					})
+				}
+				document.body.removeChild(textarea)
+			},
+			writeNoteFromSelection() {
+				// 使用选中的文本作为笔记内容
+				if (this.selectedText) {
+					this.newNote = `"${this.selectedText}"`
+					this.hideSelectionMenu()
+					this.showNotesModal = true
+				}
+			},
+			// 目录功能
+			showChapterList() {
+				this.showChapterModal = true
+			},
+			closeChapterModal() {
+				this.showChapterModal = false
+			},
+			selectChapter(chapter) {
+				this.currentChapter = chapter
+				this.loadChapterContent(chapter.id)
+				this.closeChapterModal()
+				this.showToolbar = false
+			},
+			async loadBookInfo() {
+				if (!this.bookInfo.id) return
+				
+				try {
+					const res = await getBookById(this.bookInfo.id)
+					if (res && res.code === 200 && res.data) {
+						const book = res.data
+						this.bookInfo.title = book.title || this.bookInfo.title
+						this.bookInfo.author = book.author || this.bookInfo.author
+						this.bookInfo.image = book.image || book.cover || this.bookInfo.image
+					}
+				} catch (e) {
+					console.error('加载书籍信息失败:', e)
+				}
+			},
+			async loadChapterList() {
+				if (!this.bookInfo.id) return
+				
+				try {
+					this.isLoading = true
+					const res = await getBookChapters(this.bookInfo.id)
+					if (res && res.code === 200 && res.data) {
+						this.chapterList = res.data.map(ch => ({
+							id: ch.id,
+							title: ch.title,
+							chapterNumber: ch.chapterNumber
+						}))
+						
+						// 如果有章节列表,默认加载第一章
+						if (this.chapterList.length > 0 && !this.currentChapter) {
+							this.currentChapter = this.chapterList[0]
+							this.loadChapterContent(this.currentChapter.id)
+						}
+					}
+				} catch (e) {
+					console.error('加载章节列表失败:', e)
+					uni.showToast({
+						title: '加载章节列表失败',
+						icon: 'none'
+					})
+				} finally {
+					this.isLoading = false
+				}
+			},
+			async loadChapterContent(chapterId) {
+				if (!chapterId) return
+				
+				try {
+					this.isLoading = true
+					const res = await getBookChapterDetail(chapterId)
+					if (res && res.code === 200 && res.data) {
+						const chapter = res.data
+						// 更新当前章节信息
+						this.currentChapter = {
+							id: chapter.id,
+							title: chapter.title,
+							chapterNumber: chapter.chapterNumber
+						}
+						
+						// 将内容按行分割(兼容 Windows/Mac 换行)
+						if (chapter.content && chapter.content.trim()) {
+							const lines = chapter.content.split(/\r?\n/)
+							this.contentLines = (lines && lines.length > 0 ? lines : [chapter.content])
+						} else {
+							// 内容为空时,使用书籍简介/描述作为兜底
+							const fallback = (this.bookInfo.introduction || this.bookInfo.desc || this.bookInfo.brief || '').trim()
+							this.contentLines = fallback ? fallback.split(/\r?\n/) : ['暂无内容']
+						}
+						
+						// 保存阅读进度
+						this.saveReadingProgress()
+					} else {
+						uni.showToast({
+							title: res && res.message ? res.message : '加载章节内容失败',
+							icon: 'none'
+						})
+					}
+				} catch (e) {
+					console.error('加载章节内容失败:', e)
+					uni.showToast({
+						title: '加载章节内容失败,请重试',
+						icon: 'none'
+					})
+				} finally {
+					this.isLoading = false
+				}
+			},
+			// 笔记功能
+			showNotes() {
+				this.showNotesModal = true
+			},
+			closeNotesModal() {
+				this.showNotesModal = false
+				this.newNote = ''
+			},
+			addNote() {
+				if (!this.newNote.trim()) {
+					uni.showToast({
+						title: '请输入笔记内容',
+						icon: 'none'
+					})
+					return
+				}
+				const note = {
+					content: this.newNote,
+					time: this.getCurrentTime(),
+					chapter: this.currentChapter.title
+				}
+				this.notes.unshift(note)
+				this.newNote = ''
+				this.saveNotes()
+				uni.showToast({
+					title: '笔记已添加',
+					icon: 'success'
+				})
+			},
+			deleteNote(index) {
+				uni.showModal({
+					title: '提示',
+					content: '确定要删除这条笔记吗?',
+					success: (res) => {
+						if (res.confirm) {
+							this.notes.splice(index, 1)
+							this.saveNotes()
+							uni.showToast({
+								title: '已删除',
+								icon: 'success'
+							})
+						}
+					}
+				})
+			},
+			getCurrentTime() {
+				const now = new Date()
+				const month = now.getMonth() + 1
+				const day = now.getDate()
+				const hour = now.getHours()
+				const minute = now.getMinutes()
+				return `${month}-${day} ${hour}:${minute < 10 ? '0' + minute : minute}`
+			},
+			// 夜间模式
+			toggleTheme() {
+				this.isDarkMode = !this.isDarkMode
+				this.saveSettings()
+				uni.showToast({
+					title: this.isDarkMode ? '已切换夜间模式' : '已切换日间模式',
+					icon: 'none',
+					duration: 1500
+				})
+			},
+			// 字号功能
+			showFontSize() {
+				this.showFontSizeModal = true
+			},
+			closeFontSizeModal() {
+				this.showFontSizeModal = false
+			},
+			selectFontSize(size) {
+				this.fontSize = size
+				this.saveSettings()
+				this.closeFontSizeModal()
+				uni.showToast({
+					title: '字号已调整',
+					icon: 'success',
+					duration: 1000
+				})
+			},
+			// 保存和加载设置
+			loadSettings() {
+				try {
+					const settings = uni.getStorageSync(`reading_settings_${this.bookInfo.id}`)
+					if (settings) {
+						if (settings.fontSize) this.fontSize = settings.fontSize
+						if (settings.isDarkMode !== undefined) this.isDarkMode = settings.isDarkMode
+					}
+				} catch (e) {
+					console.error('加载设置失败', e)
+				}
+			},
+			saveSettings() {
+				try {
+					uni.setStorageSync(`reading_settings_${this.bookInfo.id}`, {
+						fontSize: this.fontSize,
+						isDarkMode: this.isDarkMode
+					})
+				} catch (e) {
+					console.error('保存设置失败', e)
+				}
+			},
+			loadNotes() {
+				try {
+					const notes = uni.getStorageSync(`reading_notes_${this.bookInfo.id}`)
+					if (notes && Array.isArray(notes)) {
+						this.notes = notes
+					}
+				} catch (e) {
+					console.error('加载笔记失败', e)
+				}
+			},
+			saveNotes() {
+				try {
+					uni.setStorageSync(`reading_notes_${this.bookInfo.id}`, this.notes)
+				} catch (e) {
+					console.error('保存笔记失败', e)
+				}
+			},
+			loadReadingProgress() {
+				// 从本地存储或服务器加载阅读进度
+				try {
+					const progress = uni.getStorageSync(`reading_progress_${this.bookInfo.id}`)
+					if (progress) {
+						if (progress.chapter) this.currentChapter = progress.chapter
+					}
+				} catch (e) {
+					console.error('加载阅读进度失败', e)
+				}
+			},
+			saveReadingProgress() {
+				// 保存阅读进度
+				try {
+					uni.setStorageSync(`reading_progress_${this.bookInfo.id}`, {
+						chapter: this.currentChapter,
+						bookId: this.bookInfo.id
+					})
+				} catch (e) {
+					console.error('保存阅读进度失败', e)
+				}
+			}
+		},
+		onUnload() {
+			// 页面卸载时保存阅读进度
+			this.saveReadingProgress()
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #F5F2E8;
+		display: flex;
+		flex-direction: column;
+		transition: background-color 0.3s;
+		padding-top: 30px;
+		box-sizing: border-box;
+	}
+	
+	.container.dark-mode {
+		background-color: #1A1A1A;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: rgba(245, 242, 232, 0.92);
+		border-bottom: 1rpx solid rgba(224, 224, 224, 0.6);
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 1600; /* 高于浮动设置面板,悬浮于内容之上 */
+		transition: background-color 0.3s, border-color 0.3s;
+	}
+	
+	.dark-mode .header {
+		background-color: rgba(26, 26, 26, 0.92);
+		border-bottom-color: rgba(51, 51, 51, 0.6);
+	}
+	
+	.back-btn, .share-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon, .share-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.dark-mode .back-icon,
+	.dark-mode .share-icon {
+		color: #FFFFFF;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.dark-mode .header-title {
+		color: #FFFFFF;
+	}
+	
+	.content-area {
+		flex: 1;
+		width: 100%;
+		padding: 40rpx 30rpx;
+		box-sizing: border-box;
+		background-color: #F5F2E8;
+		transition: background-color 0.3s;
+	}
+	
+	.dark-mode .content-area {
+		background-color: #1A1A1A;
+	}
+	
+	.loading-section {
+		padding: 100rpx 30rpx;
+		text-align: center;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.empty-section {
+		padding: 100rpx 30rpx;
+		text-align: center;
+	}
+	
+	.empty-section .empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.chapter-info {
+		margin-bottom: 40rpx;
+		text-align: center;
+	}
+	
+	.chapter-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.dark-mode .chapter-title {
+		color: #FFFFFF;
+	}
+	
+	.content-text {
+		display: flex;
+		flex-direction: column;
+		line-height: 2.2;
+		background-color: transparent;
+	}
+	
+	.text-line-wrapper {
+		margin-bottom: 20rpx;
+		background-color: transparent;
+	}
+	
+	.text-line {
+		color: #333333;
+		text-indent: 2em;
+		line-height: 2.2;
+		display: block;
+		background-color: transparent;
+	}
+	
+	.dark-mode .text-line {
+		color: #E0E0E0;
+	}
+	
+	.bottom-toolbar {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		padding: 30rpx 20rpx;
+		background-color: #F5F2E8;
+		border-top: 1rpx solid #E0E0E0;
+		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+		position: relative;
+		z-index: 100;
+		transition: background-color 0.3s, border-color 0.3s;
+	}
+	
+	.dark-mode .bottom-toolbar {
+		background-color: #1A1A1A;
+		border-top-color: #333333;
+	}
+	
+	.toolbar-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 10rpx 20rpx;
+	}
+	
+	.toolbar-text {
+		font-size: 28rpx;
+		color: #333333;
+	}
+	
+	.dark-mode .toolbar-text {
+		color: #FFFFFF;
+	}
+	
+	/* 悬浮设置面板 */
+	.floating-settings {
+		position: fixed;
+		left: 50%;
+		bottom: calc(30rpx + env(safe-area-inset-bottom));
+		transform: translateX(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 14rpx 20rpx;
+		background: rgba(255, 255, 255, 0.9);
+		backdrop-filter: blur(6px);
+		border-radius: 40rpx;
+		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.15);
+		z-index: 1500;
+	}
+	.floating-settings.dark-mode {
+		background: rgba(42, 42, 42, 0.9);
+	}
+	.floating-item {
+		padding: 10rpx 24rpx;
+	}
+	.floating-text {
+		font-size: 28rpx;
+		color: #333333;
+	}
+	.floating-settings.dark-mode .floating-text {
+		color: #FFFFFF;
+	}
+	.floating-divider {
+		width: 1rpx;
+		height: 28rpx;
+		background-color: rgba(0,0,0,0.08);
+		margin: 0 6rpx;
+	}
+	.floating-settings.dark-mode .floating-divider {
+		background-color: rgba(255,255,255,0.15);
+	}
+	
+	/* 目录弹窗 */
+	.chapter-modal {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1000;
+		display: flex;
+		align-items: flex-end;
+	}
+	
+	.modal-content {
+		width: 100%;
+		height: 70%;
+		background-color: #FFFFFF;
+		border-radius: 30rpx 30rpx 0 0;
+		display: flex;
+		flex-direction: column;
+		padding-bottom: env(safe-area-inset-bottom);
+		transition: background-color 0.3s;
+	}
+	
+	.modal-content.dark-mode {
+		background-color: #2A2A2A;
+	}
+	
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 30rpx;
+		border-bottom: 1rpx solid #E0E0E0;
+		transition: border-color 0.3s;
+	}
+	
+	.modal-content.dark-mode .modal-header,
+	.modal-content-small.dark-mode .modal-header {
+		border-bottom-color: #333333;
+	}
+	
+	.modal-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+		transition: color 0.3s;
+	}
+	
+	.modal-content.dark-mode .modal-title,
+	.modal-content-small.dark-mode .modal-title {
+		color: #FFFFFF;
+	}
+	
+	.close-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.close-icon {
+		font-size: 50rpx;
+		color: #666666;
+		line-height: 1;
+		transition: color 0.3s;
+	}
+	
+	.modal-content.dark-mode .close-icon,
+	.modal-content-small.dark-mode .close-icon {
+		color: #CCCCCC;
+	}
+	
+	.chapter-list {
+		flex: 1;
+		width: 100%;
+		padding: 20rpx 0;
+	}
+	
+	.chapter-item {
+		padding: 25rpx 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+		transition: background-color 0.3s, border-color 0.3s;
+	}
+	
+	.modal-content.dark-mode .chapter-item {
+		border-bottom-color: #333333;
+	}
+	
+	.chapter-item.active {
+		background-color: #F5F5F5;
+	}
+	
+	.modal-content.dark-mode .chapter-item.active {
+		background-color: #333333;
+	}
+	
+	.chapter-item-title {
+		font-size: 30rpx;
+		color: #333333;
+		transition: color 0.3s;
+	}
+	
+	.modal-content.dark-mode .chapter-item-title {
+		color: #FFFFFF;
+	}
+	
+	/* 笔记弹窗 */
+	.notes-modal {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1000;
+		display: flex;
+		align-items: flex-end;
+	}
+	
+	.notes-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 20rpx 30rpx;
+	}
+	
+	.add-note-section {
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 30rpx;
+	}
+	
+	.note-input {
+		width: 100%;
+		min-height: 200rpx;
+		padding: 20rpx;
+		background-color: #F5F5F5;
+		border-radius: 10rpx;
+		font-size: 28rpx;
+		color: #333333;
+		margin-bottom: 20rpx;
+		box-sizing: border-box;
+		transition: background-color 0.3s, color 0.3s;
+	}
+	
+	.modal-content.dark-mode .note-input {
+		background-color: #333333;
+		color: #FFFFFF;
+	}
+	
+	.modal-content.dark-mode .note-input::placeholder {
+		color: #999999;
+	}
+	
+	.add-note-btn {
+		width: 100%;
+		height: 80rpx;
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+		border-radius: 10rpx;
+		font-size: 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+	}
+	
+	.notes-list {
+		flex: 1;
+		width: 100%;
+	}
+	
+	.note-item {
+		padding: 25rpx;
+		background-color: #F5F5F5;
+		border-radius: 10rpx;
+		margin-bottom: 20rpx;
+		transition: background-color 0.3s;
+	}
+	
+	.modal-content.dark-mode .note-item {
+		background-color: #333333;
+	}
+	
+	.note-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 15rpx;
+	}
+	
+	.note-time {
+		font-size: 24rpx;
+		color: #999999;
+		transition: color 0.3s;
+	}
+	
+	.modal-content.dark-mode .note-time {
+		color: #888888;
+	}
+	
+	.note-delete {
+		width: 40rpx;
+		height: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.delete-icon {
+		font-size: 40rpx;
+		color: #FF4444;
+		line-height: 1;
+	}
+	
+	.note-content {
+		font-size: 28rpx;
+		color: #333333;
+		line-height: 1.8;
+		transition: color 0.3s;
+	}
+	
+	.modal-content.dark-mode .note-content {
+		color: #FFFFFF;
+	}
+	
+	.empty-notes {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 100rpx 0;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+		transition: color 0.3s;
+	}
+	
+	.modal-content.dark-mode .empty-text {
+		color: #666666;
+	}
+	
+	/* 字号选择弹窗 */
+	.fontsize-modal {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1000;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.modal-content-small {
+		width: 500rpx;
+		background-color: #FFFFFF;
+		border-radius: 20rpx;
+		padding: 40rpx;
+		box-sizing: border-box;
+		transition: background-color 0.3s;
+	}
+	
+	.modal-content-small.dark-mode {
+		background-color: #2A2A2A;
+	}
+	
+	.fontsize-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+		text-align: center;
+		margin-bottom: 30rpx;
+		transition: color 0.3s;
+	}
+	
+	.modal-content-small.dark-mode .fontsize-title {
+		color: #FFFFFF;
+	}
+	
+	.fontsize-options {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.fontsize-item {
+		padding: 25rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+		text-align: center;
+		transition: background-color 0.3s, border-color 0.3s;
+	}
+	
+	.modal-content-small.dark-mode .fontsize-item {
+		border-bottom-color: #333333;
+	}
+	
+	.fontsize-item:last-child {
+		border-bottom: none;
+	}
+	
+	.fontsize-item.active {
+		background-color: #F5F5F5;
+	}
+	
+	.modal-content-small.dark-mode .fontsize-item.active {
+		background-color: #333333;
+	}
+	
+	.fontsize-label {
+		font-size: 30rpx;
+		color: #333333;
+		transition: color 0.3s;
+	}
+	
+	.modal-content-small.dark-mode .fontsize-label {
+		color: #FFFFFF;
+	}
+	
+	/* 文本选择菜单 */
+	.text-selection-menu {
+		position: fixed;
+		background-color: #333333;
+		border-radius: 8rpx;
+		padding: 0;
+		z-index: 2000;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
+		min-width: 200rpx;
+	}
+	
+	.selection-menu-item {
+		padding: 20rpx 30rpx;
+		border-bottom: 1rpx solid #444444;
+	}
+	
+	.selection-menu-item:last-child {
+		border-bottom: none;
+	}
+	
+	.selection-menu-item:active {
+		background-color: #444444;
+	}
+	
+	.selection-menu-text {
+		font-size: 28rpx;
+		color: #FFFFFF;
+	}
+	
+	/* 选中文本高亮层 */
+	.selection-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1999;
+		background-color: transparent;
+	}
+</style>
+
+

+ 441 - 0
pages/reading-rank/reading-rank.vue

@@ -0,0 +1,441 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="top-header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<view class="tabs-primary">
+				<view 
+					class="tab-item" 
+					:class="{ active: currentBookType === 'ebook' }"
+					@click="switchBookType('ebook')"
+				>
+					<text class="tab-text">电子书</text>
+				</view>
+				<view 
+					class="tab-item" 
+					:class="{ active: currentBookType === 'audiobook' }"
+					@click="switchBookType('audiobook')"
+				>
+					<text class="tab-text">有声书</text>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 第二行标签 -->
+		<view class="tabs-secondary">
+			<view 
+				class="tab-item-secondary" 
+				:class="{ active: currentPeriod === 'today' }"
+				@click="switchPeriod('today')"
+			>
+				<text class="tab-text-secondary">今天</text>
+			</view>
+			<view 
+				class="tab-item-secondary" 
+				:class="{ active: currentPeriod === 'week' }"
+				@click="switchPeriod('week')"
+			>
+				<text class="tab-text-secondary">本周</text>
+			</view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 前三名 -->
+			<view class="top-three-section">
+				<view 
+					class="top-three-item rank-2"
+				>
+					<image class="top-avatar" :src="topThree[0].avatar" mode="aspectFill"></image>
+					<text class="top-name">{{ topThree[0].name }}</text>
+					<text class="top-rank">{{ topThree[0].rank }}</text>
+				</view>
+				<view 
+					class="top-three-item rank-1"
+				>
+					<image class="top-avatar" :src="topThree[1].avatar" mode="aspectFill"></image>
+					<text class="top-name">{{ topThree[1].name }}</text>
+					<text class="top-rank">{{ topThree[1].rank }}</text>
+				</view>
+				<view 
+					class="top-three-item rank-3"
+				>
+					<image class="top-avatar" :src="topThree[2].avatar" mode="aspectFill"></image>
+					<text class="top-name">{{ topThree[2].name }}</text>
+					<text class="top-rank">{{ topThree[2].rank }}</text>
+				</view>
+			</view>
+			
+			<!-- 排名列表4-10 -->
+			<view class="rank-list">
+				<view 
+					class="rank-item" 
+					v-for="(user, index) in rankList" 
+					:key="index"
+				>
+					<text class="rank-number">{{ user.rank }}</text>
+					<image class="rank-avatar" :src="user.avatar" mode="aspectFill"></image>
+					<text class="rank-name">{{ user.name }}</text>
+					<text class="rank-duration">{{ user.duration }}</text>
+				</view>
+			</view>
+			
+			<!-- 用户自己的排名 -->
+			<view class="user-rank-section">
+				<text class="user-rank-label">未上榜</text>
+				<image class="user-rank-avatar" :src="userRank.avatar" mode="aspectFill"></image>
+				<text class="user-rank-name">我</text>
+				<text class="user-rank-duration">{{ userRank.duration }}</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			const getRandomImage = (seed) => {
+				return `https://picsum.photos/seed/${seed}/200/200`;
+			};
+			
+			return {
+				currentBookType: 'ebook', // ebook, audiobook
+				currentPeriod: 'today', // today, week
+				topThree: [
+					{
+						rank: 2,
+						name: '郭德纲',
+						avatar: getRandomImage('rank2')
+					},
+					{
+						rank: 1,
+						name: '郭德纲',
+						avatar: getRandomImage('rank1')
+					},
+					{
+						rank: 3,
+						name: '郭德纲',
+						avatar: getRandomImage('rank3')
+					}
+				],
+				rankList: [
+					{
+						rank: 4,
+						name: '郭德纲',
+						avatar: getRandomImage('rank4'),
+						duration: '8小时'
+					},
+					{
+						rank: 5,
+						name: '郭德纲',
+						avatar: getRandomImage('rank5'),
+						duration: '8小时'
+					},
+					{
+						rank: 6,
+						name: '郭德纲',
+						avatar: getRandomImage('rank6'),
+						duration: '8小时'
+					},
+					{
+						rank: 7,
+						name: '郭德纲',
+						avatar: getRandomImage('rank7'),
+						duration: '8小时'
+					},
+					{
+						rank: 8,
+						name: '郭德纲',
+						avatar: getRandomImage('rank8'),
+						duration: '8小时'
+					},
+					{
+						rank: 9,
+						name: '郭德纲',
+						avatar: getRandomImage('rank9'),
+						duration: '8小时'
+					},
+					{
+						rank: 10,
+						name: '郭德纲',
+						avatar: getRandomImage('rank10'),
+						duration: '8小时'
+					}
+				],
+				userRank: {
+					avatar: getRandomImage('user'),
+					duration: '1小时'
+				}
+			}
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			switchBookType(type) {
+				this.currentBookType = type
+				// 切换类型时可以重新加载数据
+				this.loadRankData()
+			},
+			switchPeriod(period) {
+				this.currentPeriod = period
+				// 切换时间段时可以重新加载数据
+				this.loadRankData()
+			},
+			loadRankData() {
+				// 根据当前选择的类型和时间段加载排行榜数据
+				// 这里可以调用API获取数据
+				uni.showToast({
+					title: `加载${this.currentBookType === 'ebook' ? '电子书' : '有声书'}${this.currentPeriod === 'today' ? '今天' : '本周'}排行榜`,
+					icon: 'none'
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+	}
+	
+	.top-header {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		background-color: #81C784;
+		position: relative;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 20rpx;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #FFFFFF;
+		font-weight: bold;
+	}
+	
+	.tabs-primary {
+		flex: 1;
+		display: flex;
+		background-color: rgba(255, 255, 255, 0.2);
+		border-radius: 30rpx;
+		padding: 4rpx;
+	}
+	
+	.tab-item {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 12rpx 0;
+		border-radius: 26rpx;
+		transition: all 0.3s;
+	}
+	
+	.tab-item.active {
+		background-color: #FFFFFF;
+	}
+	
+	.tab-item.active .tab-text {
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.tab-text {
+		font-size: 28rpx;
+		color: #FFFFFF;
+	}
+	
+	.tabs-secondary {
+		display: flex;
+		background-color: #FFFFFF;
+		padding: 0 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.tab-item-secondary {
+		padding: 20rpx 40rpx;
+		position: relative;
+	}
+	
+	.tab-item-secondary.active .tab-text-secondary {
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.tab-item-secondary.active::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 60rpx;
+		height: 4rpx;
+		background-color: #81C784;
+		border-radius: 2rpx;
+	}
+	
+	.tab-text-secondary {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		background-color: #FFFFFF;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	
+	.top-three-section {
+		display: flex;
+		justify-content: space-around;
+		align-items: flex-end;
+		padding: 60rpx 30rpx 40rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.top-three-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	
+	.top-three-item.rank-1 {
+		order: 2;
+		transform: scale(1.1);
+	}
+	
+	.top-three-item.rank-2 {
+		order: 1;
+	}
+	
+	.top-three-item.rank-3 {
+		order: 3;
+	}
+	
+	.top-avatar {
+		width: 140rpx;
+		height: 140rpx;
+		border-radius: 50%;
+		margin-bottom: 20rpx;
+		background-color: #F5F5F5;
+		border: 4rpx solid #81C784;
+	}
+	
+	.top-three-item.rank-1 .top-avatar {
+		width: 160rpx;
+		height: 160rpx;
+		border-color: #FFD700;
+	}
+	
+	.top-name {
+		font-size: 28rpx;
+		color: #333333;
+		margin-bottom: 10rpx;
+		font-weight: bold;
+	}
+	
+	.top-rank {
+		font-size: 36rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.top-three-item.rank-1 .top-rank {
+		font-size: 48rpx;
+		color: #FFD700;
+	}
+	
+	.rank-list {
+		padding: 0 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.rank-item {
+		display: flex;
+		align-items: center;
+		padding: 25rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.rank-item:last-child {
+		border-bottom: none;
+	}
+	
+	.rank-number {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+		width: 60rpx;
+		text-align: center;
+	}
+	
+	.rank-avatar {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 50%;
+		margin-right: 20rpx;
+		background-color: #F5F5F5;
+	}
+	
+	.rank-name {
+		flex: 1;
+		font-size: 30rpx;
+		color: #333333;
+	}
+	
+	.rank-duration {
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	.user-rank-section {
+		display: flex;
+		align-items: center;
+		padding: 30rpx;
+		background-color: #F5F5F5;
+		margin-top: 20rpx;
+	}
+	
+	.user-rank-label {
+		font-size: 28rpx;
+		color: #666666;
+		width: 120rpx;
+	}
+	
+	.user-rank-avatar {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 50%;
+		margin-right: 20rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.user-rank-name {
+		flex: 1;
+		font-size: 30rpx;
+		color: #333333;
+	}
+	
+	.user-rank-duration {
+		font-size: 26rpx;
+		color: #999999;
+	}
+</style>
+

+ 437 - 0
pages/register/register.vue

@@ -0,0 +1,437 @@
+<template>
+	<view class="register-container">
+		<!-- 应用Logo和名称 -->
+		<view class="app-header">
+			<view class="app-logo">
+				<view class="logo-square">
+					<view class="book-icon">
+						<view class="book-left"></view>
+						<view class="book-right"></view>
+						<view class="book-line"></view>
+					</view>
+				</view>
+			</view>
+			<text class="app-title">云阅读</text>
+			<text class="register-title">用户注册</text>
+		</view>
+		
+		<!-- 注册表单 -->
+		<view class="form-container">
+			<view class="input-group">
+				<input 
+					class="input-field" 
+					type="text" 
+					placeholder="请输入用户名"
+					v-model="formData.username"
+					maxlength="20"
+				/>
+				<view class="input-line"></view>
+			</view>
+			
+			<view class="input-group">
+				<input 
+					class="input-field" 
+					type="text" 
+					placeholder="请输入昵称(可选)"
+					v-model="formData.nickname"
+					maxlength="20"
+				/>
+				<view class="input-line"></view>
+			</view>
+			
+			<view class="input-group">
+				<input 
+					class="input-field password-input" 
+					:type="showPassword ? 'text' : 'password'"
+					placeholder="请输入密码(6-20位)"
+					v-model="formData.password"
+					maxlength="20"
+				/>
+				<text 
+					class="toggle-password-btn" 
+					@click="togglePassword"
+				>
+					{{ showPassword ? '隐藏' : '显示' }}
+				</text>
+				<view class="input-line"></view>
+			</view>
+			
+			<view class="input-group">
+				<input 
+					class="input-field password-input" 
+					:type="showConfirmPassword ? 'text' : 'password'"
+					placeholder="请确认密码"
+					v-model="formData.confirmPassword"
+					maxlength="20"
+				/>
+				<text 
+					class="toggle-password-btn" 
+					@click="toggleConfirmPassword"
+				>
+					{{ showConfirmPassword ? '隐藏' : '显示' }}
+				</text>
+				<view class="input-line"></view>
+			</view>
+			
+			<view class="input-group">
+				<input 
+					class="input-field" 
+					type="number" 
+					placeholder="请输入手机号(可选)"
+					v-model="formData.phone"
+					maxlength="11"
+				/>
+				<view class="input-line"></view>
+			</view>
+			
+			<view class="input-group">
+				<input 
+					class="input-field" 
+					type="text" 
+					placeholder="请输入邮箱(可选)"
+					v-model="formData.email"
+					maxlength="100"
+				/>
+				<view class="input-line"></view>
+			</view>
+			
+			<button 
+				class="register-btn" 
+				@click="handleRegister"
+				:disabled="!canRegister"
+			>
+				{{ isLoading ? '注册中...' : '注册' }}
+			</button>
+			
+			<!-- 返回登录 -->
+			<view class="login-link" @click="goToLogin">
+				<text class="login-text">已有账号?立即登录</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { register } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				formData: {
+					username: '',
+					nickname: '',
+					password: '',
+					confirmPassword: '',
+					phone: '',
+					email: ''
+				},
+				showPassword: false,
+				showConfirmPassword: false,
+				isLoading: false
+			}
+		},
+		computed: {
+			canRegister() {
+				return this.formData.username.trim().length > 0 
+					&& this.formData.password.length >= 6 
+					&& this.formData.password === this.formData.confirmPassword
+					&& !this.isLoading
+			}
+		},
+		methods: {
+			togglePassword() {
+				this.showPassword = !this.showPassword
+			},
+			toggleConfirmPassword() {
+				this.showConfirmPassword = !this.showConfirmPassword
+			},
+			validateForm() {
+				// 验证用户名
+				if (!this.formData.username || this.formData.username.trim().length === 0) {
+					uni.showToast({
+						title: '请输入用户名',
+						icon: 'none'
+					})
+					return false
+				}
+				
+				// 验证密码
+				if (!this.formData.password || this.formData.password.length < 6) {
+					uni.showToast({
+						title: '密码长度不能少于6位',
+						icon: 'none'
+					})
+					return false
+				}
+				
+				if (this.formData.password.length > 20) {
+					uni.showToast({
+						title: '密码长度不能超过20位',
+						icon: 'none'
+					})
+					return false
+				}
+				
+				// 验证确认密码
+				if (this.formData.password !== this.formData.confirmPassword) {
+					uni.showToast({
+						title: '两次输入的密码不一致',
+						icon: 'none'
+					})
+					return false
+				}
+				
+				// 验证手机号(如果填写了)
+				if (this.formData.phone && this.formData.phone.trim().length > 0) {
+					const phoneReg = /^1[3-9]\d{9}$/
+					if (!phoneReg.test(this.formData.phone.trim())) {
+						uni.showToast({
+							title: '请输入正确的手机号',
+							icon: 'none'
+						})
+						return false
+					}
+				}
+				
+				// 验证邮箱(如果填写了)
+				if (this.formData.email && this.formData.email.trim().length > 0) {
+					const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+					if (!emailReg.test(this.formData.email.trim())) {
+						uni.showToast({
+							title: '请输入正确的邮箱地址',
+							icon: 'none'
+						})
+						return false
+					}
+				}
+				
+				return true
+			},
+			handleRegister() {
+				if (!this.validateForm()) {
+					return
+				}
+				
+				// 显示加载中
+				this.isLoading = true
+				uni.showLoading({
+					title: '注册中...',
+					mask: true
+				})
+				
+				// 准备注册数据
+				const registerData = {
+					username: this.formData.username.trim(),
+					password: this.formData.password,
+					nickname: this.formData.nickname.trim() || this.formData.username.trim(),
+					phone: this.formData.phone.trim() || null,
+					email: this.formData.email.trim() || null
+				}
+				
+				// 调用后端注册接口
+				register(registerData)
+					.then((res) => {
+						uni.hideLoading()
+						this.isLoading = false
+						
+						if (res.code === 200 && res.data) {
+							uni.showToast({
+								title: '注册成功',
+								icon: 'success'
+							})
+							
+							// 注册成功后,延迟跳转到登录页面,并传递用户名
+							setTimeout(() => {
+								uni.redirectTo({
+									url: `/pages/login/login?username=${encodeURIComponent(registerData.username)}`
+								})
+							}, 1500)
+						} else {
+							uni.showToast({
+								title: res.message || '注册失败',
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					})
+					.catch((err) => {
+						uni.hideLoading()
+						this.isLoading = false
+						
+						console.error('注册失败:', err)
+						uni.showToast({
+							title: err.message || '注册失败,请检查网络连接',
+							icon: 'none',
+							duration: 2000
+						})
+					})
+			},
+			goToLogin() {
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.register-container {
+		width: 100%;
+		min-height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+		align-items: center;
+		padding: 0 60rpx;
+		box-sizing: border-box;
+		position: relative;
+		padding-bottom: 80rpx;
+	}
+	
+	.app-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-top: 60rpx;
+		margin-bottom: 60rpx;
+		flex-shrink: 0;
+	}
+	
+	.app-logo {
+		margin-bottom: 30rpx;
+	}
+	
+	.logo-square {
+		width: 120rpx;
+		height: 120rpx;
+		background-color: #4FC3F7;
+		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.book-icon {
+		position: relative;
+		width: 80rpx;
+		height: 60rpx;
+	}
+	
+	.book-left,
+	.book-right {
+		position: absolute;
+		width: 40rpx;
+		height: 60rpx;
+		background-color: #FFFFFF;
+		border-radius: 3rpx 0 0 3rpx;
+	}
+	
+	.book-right {
+		right: 0;
+		border-radius: 0 3rpx 3rpx 0;
+	}
+	
+	.book-line {
+		position: absolute;
+		left: 40rpx;
+		top: 8rpx;
+		width: 2rpx;
+		height: 44rpx;
+		background-color: #4FC3F7;
+	}
+	
+	.app-title {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: 600;
+		margin-bottom: 20rpx;
+	}
+	
+	.register-title {
+		font-size: 32rpx;
+		color: #666666;
+		font-weight: normal;
+	}
+	
+	.form-container {
+		width: 100%;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+	
+	.input-group {
+		position: relative;
+		margin-bottom: 40rpx;
+	}
+	
+	.input-field {
+		width: 100%;
+		height: 88rpx;
+		font-size: 30rpx;
+		padding: 0 20rpx;
+		color: #333333;
+	}
+	
+	.password-input {
+		padding-right: 80rpx;
+	}
+	
+	.toggle-password-btn {
+		position: absolute;
+		right: 20rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 26rpx;
+		color: #4FC3F7;
+		z-index: 10;
+		padding: 8rpx 12rpx;
+	}
+	
+	.input-line {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background-color: #E0E0E0;
+	}
+	
+	.register-btn {
+		width: 100%;
+		height: 96rpx;
+		background-color: #E0E0E0;
+		color: #999999;
+		font-size: 34rpx;
+		border-radius: 48rpx;
+		margin-top: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		flex-shrink: 0;
+	}
+	
+	.register-btn:not([disabled]) {
+		background-color: #4FC3F7;
+		color: #FFFFFF;
+	}
+	
+	.register-btn[disabled] {
+		background-color: #E0E0E0;
+		color: #999999;
+	}
+	
+	.login-link {
+		margin-top: 40rpx;
+		text-align: center;
+	}
+	
+	.login-text {
+		font-size: 28rpx;
+		color: #4FC3F7;
+	}
+</style>
+

+ 702 - 0
pages/search/search.vue

@@ -0,0 +1,702 @@
+<template>
+	<view class="container">
+		<!-- 顶部搜索栏 -->
+		<view class="search-header">
+			<view class="search-input-wrapper">
+				<text class="search-icon">🔍</text>
+				<input 
+					class="search-input" 
+					v-model="searchKeyword"
+					placeholder="西游记"
+					:focus="isFocus"
+					@input="handleInput"
+					@confirm="handleSearch"
+					@focus="handleFocus"
+					@blur="handleBlur"
+				/>
+			</view>
+			<text class="cancel-btn" @click="handleCancel">取消</text>
+		</view>
+		
+		<!-- 搜索内容区域 -->
+		<scroll-view class="search-content" scroll-y v-if="!showSearchResults">
+			<!-- 搜索历史 -->
+			<view class="section" v-if="searchHistory.length > 0">
+				<view class="section-header">
+					<text class="section-title">搜索历史</text>
+					<text class="clear-btn" @click="clearHistory">清空</text>
+				</view>
+				<view class="tag-list">
+					<view 
+						class="tag-item" 
+						v-for="(item, index) in searchHistory" 
+						:key="index"
+						@click="searchByHistory(item)"
+					>
+						<text class="tag-text">{{ item }}</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 热门搜索 -->
+			<view class="section">
+				<view class="section-header">
+					<text class="section-title">热门搜索</text>
+				</view>
+				<view class="tag-list">
+					<view 
+						class="tag-item" 
+						v-for="(item, index) in popularSearches" 
+						:key="index"
+						@click="searchByTag(item)"
+					>
+						<text class="tag-text">{{ item }}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		
+		<!-- 搜索结果 -->
+		<scroll-view 
+			class="search-results" 
+			scroll-y 
+			v-if="showSearchResults"
+			@scrolltolower="loadMore"
+			:lower-threshold="100"
+		>
+			<view class="results-header">
+				<text class="results-title">搜索结果</text>
+				<text class="results-count" v-if="searchResults.length > 0">找到 {{ searchResults.length }} 本相关书籍</text>
+			</view>
+			
+			<!-- 加载中 -->
+			<view class="loading-container" v-if="isLoading && searchResults.length === 0">
+				<text class="loading-text">搜索中...</text>
+			</view>
+			
+			<!-- 搜索结果列表 -->
+			<view class="book-list" v-else-if="searchResults.length > 0">
+				<view 
+					class="book-item" 
+					v-for="(book, index) in searchResults" 
+					:key="book.id || index"
+					@click="goToBookDetail(book)"
+				>
+					<image 
+						class="book-cover" 
+						:src="book.cover || book.image" 
+						mode="aspectFill"
+						:lazy-load="true"
+						@error="handleImageError(index)"
+					></image>
+					<view class="book-info">
+						<text class="book-title">{{ book.title }}</text>
+						<text class="book-desc" v-if="book.desc">{{ book.desc }}</text>
+						<text class="book-author" v-if="book.author">{{ book.author }}</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 无结果提示 -->
+			<view class="no-results" v-else-if="!isLoading">
+				<text class="no-results-text">暂无搜索结果</text>
+				<text class="no-results-hint">试试其他关键词吧</text>
+			</view>
+			
+			<!-- 加载更多提示 -->
+			<view class="load-more" v-if="isLoading && searchResults.length > 0">
+				<text class="load-more-text">加载中...</text>
+			</view>
+			<view class="load-more" v-else-if="!hasMore && searchResults.length > 0">
+				<text class="load-more-text">没有更多了</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { searchBooks, getPopularKeywords, searchAudiobooks, recordSearchHistory, getSearchHistory, clearSearchHistory } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				searchKeyword: '',
+				isFocus: false,
+				showSearchResults: false,
+				searchHistory: [],
+				popularSearches: [],
+				searchResults: [],
+				isLoading: false,
+				currentPage: 1,
+				pageSize: 20,
+				hasMore: true,
+				mode: 'book', // 'book' or 'audio'
+				userInfo: null
+			}
+		},
+		onLoad(options) {
+			// 模式:书籍 or 听书
+			if (options.mode === 'audio') {
+				this.mode = 'audio'
+			}
+			
+			// 获取用户信息
+			try {
+				const userInfo = uni.getStorageSync('userInfo')
+				if (userInfo && userInfo.id) {
+					this.userInfo = userInfo
+				}
+			} catch (e) {
+				console.error('获取用户信息失败', e)
+			}
+			
+			// 从数据库加载搜索历史
+			this.loadSearchHistory();
+			
+			// 加载热门搜索
+			this.loadPopularSearches();
+			
+			// 如果有传入的关键词,直接搜索
+			if (options.keyword) {
+				this.searchKeyword = decodeURIComponent(options.keyword);
+				this.performSearch(this.searchKeyword);
+			}
+		},
+		methods: {
+			handleInput(e) {
+				this.searchKeyword = e.detail.value;
+			},
+			handleFocus() {
+				this.isFocus = true;
+			},
+			handleBlur() {
+				this.isFocus = false;
+			},
+			handleSearch() {
+				if (this.searchKeyword.trim()) {
+					this.performSearch(this.searchKeyword.trim());
+				}
+			},
+			handleCancel() {
+				if (this.showSearchResults) {
+					// 如果在搜索结果页面,返回搜索首页
+					this.showSearchResults = false;
+					this.searchKeyword = '';
+					this.searchResults = [];
+				} else {
+					// 否则返回上一页
+					uni.navigateBack({
+						delta: 1
+					});
+				}
+			},
+			searchByHistory(keyword) {
+				this.searchKeyword = keyword;
+				this.performSearch(keyword);
+			},
+			searchByTag(keyword) {
+				this.searchKeyword = keyword;
+				this.performSearch(keyword);
+			},
+			performSearch(keyword) {
+				if (!keyword || !keyword.trim()) {
+					return;
+				}
+				
+				// 保存搜索历史
+				this.saveToHistory(keyword);
+				
+				// 显示搜索结果
+				this.showSearchResults = true;
+				
+				// 重置分页
+				this.currentPage = 1;
+				this.hasMore = true;
+				
+				// 调用搜索API
+				this.searchDispatcher(keyword, 1);
+			},
+			async loadPopularSearches() {
+				try {
+					const res = await getPopularKeywords(10);
+					if (res && res.code === 200 && res.data && Array.isArray(res.data)) {
+						this.popularSearches = res.data;
+					}
+				} catch (e) {
+					console.error('加载热门搜索失败:', e);
+					// 如果加载失败,使用默认值
+					this.popularSearches = ['西游记', '三体', '大侦探', '窗边的小豆豆'];
+				}
+			},
+			async searchDispatcher(keyword, page = 1) {
+				if (this.mode === 'audio') {
+					await this.searchAudio(keyword, page)
+				} else {
+					await this.searchBook(keyword, page)
+				}
+			},
+			async searchBook(keyword, page = 1) {
+				if (!keyword || !keyword.trim()) {
+					this.searchResults = [];
+					return;
+				}
+				
+				try {
+					this.isLoading = true;
+					const res = await searchBooks(keyword.trim(), page, this.pageSize);
+					
+					if (res && res.code === 200 && res.data) {
+						const pageResult = res.data;
+						const books = pageResult.list || pageResult.data || [];
+						
+						// 处理书籍数据
+						const processed = books.map(b => ({
+							id: b.id,
+							title: b.title || '',
+							author: b.author || '未知作者',
+							desc: b.desc || b.brief || b.introduction || '',
+							cover: b.cover || b.image || '',
+							image: b.image || b.cover || ''
+						}))
+						if (page === 1) this.searchResults = processed; else this.searchResults = this.searchResults.concat(processed)
+						const total = pageResult.total || 0;
+						this.hasMore = this.searchResults.length < total;
+						this.currentPage = page;
+					} else {
+						if (page === 1) this.searchResults = []
+						uni.showToast({ title: res.message || '搜索失败', icon: 'none' })
+					}
+				} catch (e) {
+					console.error('搜索书籍失败:', e);
+					if (page === 1) this.searchResults = []
+					uni.showToast({ title: e.message || '搜索失败,请重试', icon: 'none' })
+				} finally {
+					this.isLoading = false;
+				}
+			},
+			async searchAudio(keyword, page = 1) {
+				if (!keyword || !keyword.trim()) {
+					this.searchResults = [];
+					return;
+				}
+				try {
+					this.isLoading = true
+					const res = await searchAudiobooks({ keyword: keyword.trim(), page, size: this.pageSize })
+					if (res && res.code === 200 && res.data) {
+						const pageResult = res.data
+						const list = pageResult.list || []
+						const processed = list.map(a => ({
+							id: a.id,
+							title: a.title || '',
+							author: a.narrator || a.author || '未知主播',
+							desc: a.brief || a.desc || '',
+							cover: a.image || a.cover || '',
+							image: a.image || a.cover || '',
+							isAudio: true
+						}))
+						if (page === 1) this.searchResults = processed; else this.searchResults = this.searchResults.concat(processed)
+						const total = pageResult.total || 0
+						this.hasMore = this.searchResults.length < total
+						this.currentPage = page
+					} else {
+						if (page === 1) this.searchResults = []
+						uni.showToast({ title: res.message || '搜索失败', icon: 'none' })
+					}
+				} catch (e) {
+					console.error('搜索听书失败:', e)
+					if (page === 1) this.searchResults = []
+					uni.showToast({ title: e.message || '搜索失败,请重试', icon: 'none' })
+				} finally {
+					this.isLoading = false
+				}
+			},
+			async saveToHistory(keyword) {
+				if (!this.userInfo || !this.userInfo.id) {
+					// 如果未登录,使用本地存储作为备用
+					const index = this.searchHistory.findIndex(item => 
+						(typeof item === 'string' ? item : item.keyword) === keyword
+					);
+					if (index > -1) {
+						this.searchHistory.splice(index, 1);
+					}
+					this.searchHistory.unshift(keyword);
+					if (this.searchHistory.length > 10) {
+						this.searchHistory = this.searchHistory.slice(0, 10);
+					}
+					try {
+						uni.setStorageSync('searchHistory', this.searchHistory);
+					} catch (e) {
+						console.error('保存搜索历史失败', e);
+					}
+					return;
+				}
+				
+				// 保存到数据库
+				try {
+					await recordSearchHistory(this.userInfo.id, keyword);
+					// 重新加载搜索历史
+					await this.loadSearchHistory();
+				} catch (e) {
+					console.error('保存搜索历史失败', e);
+				}
+			},
+			async loadSearchHistory() {
+				if (!this.userInfo || !this.userInfo.id) {
+					// 如果未登录,从本地存储加载
+					try {
+						const history = uni.getStorageSync('searchHistory');
+						if (history && Array.isArray(history)) {
+							this.searchHistory = history.map(item => 
+								typeof item === 'string' ? item : item.keyword
+							);
+						}
+					} catch (e) {
+						console.error('加载搜索历史失败', e);
+					}
+					return;
+				}
+				
+				// 从数据库加载
+				try {
+					const res = await getSearchHistory(this.userInfo.id, 10);
+					if (res && res.code === 200 && res.data) {
+						this.searchHistory = res.data.map(item => item.keyword);
+					}
+				} catch (e) {
+					console.error('加载搜索历史失败', e);
+					// 如果加载失败,尝试从本地存储加载
+					try {
+						const history = uni.getStorageSync('searchHistory');
+						if (history && Array.isArray(history)) {
+							this.searchHistory = history.map(item => 
+								typeof item === 'string' ? item : item.keyword
+							);
+						}
+					} catch (err) {
+						console.error('从本地存储加载搜索历史失败', err);
+					}
+				}
+			},
+			async clearHistory() {
+				uni.showModal({
+					title: '提示',
+					content: '确定要清空搜索历史吗?',
+					success: async (res) => {
+						if (res.confirm) {
+							if (this.userInfo && this.userInfo.id) {
+								// 清空数据库中的搜索历史
+								try {
+									uni.showLoading({
+										title: '清空中...',
+										mask: true
+									});
+									
+									const result = await clearSearchHistory(this.userInfo.id);
+									uni.hideLoading();
+									
+									if (result && result.code === 200) {
+										this.searchHistory = [];
+										uni.showToast({
+											title: '已清空',
+											icon: 'success'
+										});
+									} else {
+										uni.showToast({
+											title: result.message || '清空失败',
+											icon: 'none'
+										});
+									}
+								} catch (e) {
+									uni.hideLoading();
+									console.error('清空搜索历史失败', e);
+									uni.showToast({
+										title: '清空失败,请重试',
+										icon: 'none'
+									});
+								}
+							} else {
+								// 清空本地存储
+								this.searchHistory = [];
+								try {
+									uni.removeStorageSync('searchHistory');
+									uni.showToast({
+										title: '已清空',
+										icon: 'success'
+									});
+								} catch (e) {
+									console.error('清空搜索历史失败', e);
+								}
+							}
+						}
+					}
+				});
+			},
+			loadMore() {
+				// 加载更多搜索结果
+				if (!this.isLoading && this.hasMore && this.searchKeyword.trim()) {
+					this.searchDispatcher(this.searchKeyword.trim(), this.currentPage + 1);
+				}
+			},
+			goToBookDetail(book) {
+				if (!book || !book.id) {
+					uni.showToast({ title: '信息不完整', icon: 'none' })
+					return
+				}
+				if (this.mode === 'audio' || book.isAudio) {
+					uni.navigateTo({ url: `/pages/listen-detail/listen-detail?audiobookId=${book.id}` })
+				} else {
+					uni.navigateTo({ url: `/pages/book-detail/book-detail?bookId=${book.id}` })
+				}
+			},
+			handleImageError(index) {
+				// 图片加载失败时使用备用图片
+				if (this.searchResults[index]) {
+					this.searchResults[index].cover = 'https://via.placeholder.com/200x300?text=No+Image';
+					this.searchResults[index].image = 'https://via.placeholder.com/200x300?text=No+Image';
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 50px;
+		box-sizing: border-box;
+	}
+	
+	/* 顶部搜索栏 */
+	.search-header {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E5E5E5;
+	}
+	
+	.search-input-wrapper {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		background-color: #F5F5F5;
+		border-radius: 40rpx;
+		padding: 0 24rpx;
+		height: 70rpx;
+		margin-right: 20rpx;
+	}
+	
+	.search-icon {
+		font-size: 32rpx;
+		color: #999999;
+		margin-right: 12rpx;
+	}
+	
+	.search-input {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333333;
+		height: 70rpx;
+		line-height: 70rpx;
+	}
+	
+	.cancel-btn {
+		font-size: 28rpx;
+		color: #666666;
+	}
+	
+	/* 搜索内容区域 */
+	.search-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding: 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	/* 搜索结果区域 */
+	.search-results {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		background-color: #FFFFFF;
+	}
+	
+	/* 区块样式 */
+	.section {
+		margin-bottom: 50rpx;
+	}
+	
+	.section-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 24rpx;
+	}
+	
+	.section-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.clear-btn {
+		font-size: 28rpx;
+		color: #4FC3F7;
+	}
+	
+	/* 标签列表 */
+	.tag-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20rpx;
+	}
+	
+	.tag-item {
+		padding: 16rpx 28rpx;
+		background-color: #F5F5F5;
+		border-radius: 40rpx;
+	}
+	
+	.tag-text {
+		font-size: 28rpx;
+		color: #666666;
+	}
+	
+	/* 搜索结果头部 */
+	.results-header {
+		padding: 30rpx;
+		border-bottom: 1rpx solid #E5E5E5;
+	}
+	
+	.results-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 8rpx;
+		display: block;
+	}
+	
+	.results-count {
+		font-size: 24rpx;
+		color: #999999;
+		display: block;
+	}
+	
+	/* 书籍列表 */
+	.book-list {
+		padding: 0 30rpx;
+	}
+	
+	.book-item {
+		display: flex;
+		padding: 30rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.book-item:last-child {
+		border-bottom: none;
+	}
+	
+	/* 书籍封面 */
+	.book-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-right: 24rpx;
+		flex-shrink: 0;
+		background-color: #F5F5F5;
+	}
+	
+	/* 书籍信息 */
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000000;
+		margin-bottom: 16rpx;
+		line-height: 1.4;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.book-desc {
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.6;
+		margin-bottom: 20rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.book-author {
+		font-size: 26rpx;
+		color: #999999;
+		margin-top: auto;
+	}
+	
+	/* 加载中 */
+	.loading-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 100rpx 30rpx;
+	}
+	
+	.loading-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	/* 加载更多 */
+	.load-more {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 30rpx;
+	}
+	
+	.load-more-text {
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	/* 无结果提示 */
+	.no-results {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 100rpx 30rpx;
+	}
+	
+	.no-results-text {
+		font-size: 32rpx;
+		color: #999999;
+		margin-bottom: 16rpx;
+	}
+	
+	.no-results-hint {
+		font-size: 28rpx;
+		color: #CCCCCC;
+	}
+</style>

+ 366 - 0
pages/settings/settings.vue

@@ -0,0 +1,366 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">设置</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- 开关设置项 -->
+			<view class="settings-section">
+				<view class="setting-item" v-for="(setting, index) in toggleSettings" :key="index">
+					<text class="setting-label">{{ setting.label }}</text>
+					<switch 
+						class="setting-switch" 
+						:checked="setting.value" 
+						@change="handleToggleChange(index, $event)"
+						color="#4FC3F7"
+					/>
+				</view>
+			</view>
+			
+			<!-- 分隔线 -->
+			<view class="divider"></view>
+			
+			<!-- 信息项 -->
+			<view class="info-section">
+				<view class="info-item" @click="handleInfoClick('clearCache')">
+					<text class="info-label">清理缓存</text>
+					<view class="info-right">
+						<text class="info-value">{{ cacheSize }}</text>
+						<text class="info-arrow">></text>
+					</view>
+				</view>
+				<view class="info-item" @click="handleInfoClick('about')">
+					<text class="info-label">关于我们</text>
+					<text class="info-arrow">></text>
+				</view>
+				<view class="info-item" @click="handleInfoClick('contact')">
+					<text class="info-label">联系我们</text>
+					<text class="info-arrow">></text>
+				</view>
+			</view>
+			
+			<!-- 分隔线 -->
+			<view class="divider"></view>
+			
+			<!-- 退出登录按钮 -->
+			<view class="logout-section">
+				<button class="logout-btn" @click="handleLogout">退出登录</button>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				toggleSettings: [
+					{
+						label: '阅读时不自动锁屏',
+						value: false,
+						key: 'noAutoLock'
+					},
+					{
+						label: '阅读时隐藏别人的笔记',
+						value: false,
+						key: 'hideOthersNotes'
+					},
+					{
+						label: '阅读时显示时间和电量',
+						value: true,
+						key: 'showTimeBattery'
+					},
+					{
+						label: '阅读时允许横屏',
+						value: false,
+						key: 'allowLandscape'
+					},
+					{
+						label: '点赞提醒',
+						value: true,
+						key: 'likeReminder'
+					}
+				],
+				cacheSize: '20M'
+			}
+		},
+		onLoad() {
+			// 加载保存的设置
+			this.loadSettings()
+			// 加载缓存大小
+			this.loadCacheSize()
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			handleToggleChange(index, event) {
+				this.toggleSettings[index].value = event.detail.value
+				// 保存设置到本地存储
+				this.saveSettings()
+			},
+			handleInfoClick(type) {
+				switch(type) {
+					case 'clearCache':
+						this.clearCache()
+						break
+					case 'about':
+						this.showAbout()
+						break
+					case 'contact':
+						this.showContact()
+						break
+				}
+			},
+			clearCache() {
+				uni.showModal({
+					title: '提示',
+					content: `确定要清理 ${this.cacheSize} 缓存吗?`,
+					success: (res) => {
+						if (res.confirm) {
+							// 清理缓存
+							uni.clearStorageSync()
+							this.cacheSize = '0M'
+							uni.showToast({
+								title: '缓存已清理',
+								icon: 'success'
+							})
+						}
+					}
+				})
+			},
+			showAbout() {
+				uni.navigateTo({
+					url: '/pages/about/about'
+				})
+			},
+			showContact() {
+				uni.showModal({
+					title: '联系我们',
+					content: '邮箱: support@yunread.com\n电话: 400-123-4567',
+					showCancel: false
+				})
+			},
+			handleLogout() {
+				uni.showModal({
+					title: '提示',
+					content: '确定要退出登录吗?',
+					success: (res) => {
+						if (res.confirm) {
+							// 清除登录信息
+							uni.removeStorageSync('token')
+							uni.removeStorageSync('userInfo')
+							
+							uni.showToast({
+								title: '已退出登录',
+								icon: 'success'
+							})
+							
+							// 跳转到登录页
+							setTimeout(() => {
+								uni.reLaunch({
+									url: '/pages/login/login'
+								})
+							}, 1500)
+						}
+					}
+				})
+			},
+			loadSettings() {
+				// 从本地存储加载设置
+				const savedSettings = uni.getStorageSync('appSettings')
+				if (savedSettings) {
+					this.toggleSettings.forEach((setting, index) => {
+						if (savedSettings[setting.key] !== undefined) {
+							this.toggleSettings[index].value = savedSettings[setting.key]
+						}
+					})
+				}
+			},
+			saveSettings() {
+				// 保存设置到本地存储
+				const settings = {}
+				this.toggleSettings.forEach(setting => {
+					settings[setting.key] = setting.value
+				})
+				uni.setStorageSync('appSettings', settings)
+			},
+			loadCacheSize() {
+				// 计算缓存大小
+				try {
+					const info = uni.getStorageInfoSync()
+					const size = (info.keys.length * 2).toFixed(0) // 简单估算
+					this.cacheSize = size + 'M'
+				} catch (e) {
+					this.cacheSize = '20M'
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		min-height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		padding-top: 30px;
+		box-sizing: border-box;
+		flex-direction: column;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding-bottom: calc(env(safe-area-inset-bottom));
+		background-color: #FFFFFF;
+		box-sizing: border-box;
+	}
+	
+	.settings-section {
+		background-color: #FFFFFF;
+		padding: 0 30rpx;
+	}
+	
+	.setting-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 30rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.setting-item:last-child {
+		border-bottom: none;
+	}
+	
+	.setting-label {
+		font-size: 30rpx;
+		color: #333333;
+		flex: 1;
+	}
+	
+	.setting-switch {
+		transform: scale(0.9);
+	}
+	
+	.divider {
+		height: 20rpx;
+		background-color: #F5F5F5;
+	}
+	
+	.info-section {
+		background-color: #FFFFFF;
+		padding: 0 30rpx;
+	}
+	
+	.info-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 30rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	
+	.info-item:last-child {
+		border-bottom: none;
+	}
+	
+	.info-label {
+		font-size: 30rpx;
+		color: #333333;
+		flex: 1;
+	}
+	
+	.info-right {
+		display: flex;
+		align-items: center;
+		gap: 20rpx;
+	}
+	
+	.info-value {
+		font-size: 28rpx;
+		color: #999999;
+	}
+	
+	.info-arrow {
+		font-size: 32rpx;
+		color: #CCCCCC;
+	}
+	
+	.logout-section {
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.logout-btn {
+		width: 100%;
+		height: 88rpx;
+		background-color: transparent;
+		color: #FF1744;
+		font-size: 32rpx;
+		border: none;
+		border-radius: 44rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.logout-btn::after {
+		border: none;
+	}
+</style>
+

+ 153 - 0
pages/splash/splash.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="splash-container">
+		<!-- 跳过按钮 -->
+		<view class="skip-btn" @click="skipToLogin">
+			<text class="skip-text">{{ countdown > 0 ? countdown + 's后跳过' : '跳过' }}</text>
+		</view>
+		
+		<!-- 应用图标和名称 -->
+		<view class="app-info">
+			<view class="app-icon">
+				<view class="icon-square">
+					<view class="book-icon">
+						<view class="book-left"></view>
+						<view class="book-right"></view>
+						<view class="book-line"></view>
+					</view>
+				</view>
+			</view>
+			<text class="app-name">云阅读</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				countdown: 3,
+				timer: null
+			}
+		},
+		onLoad() {
+			this.startCountdown()
+		},
+		onUnload() {
+			if (this.timer) {
+				clearInterval(this.timer)
+			}
+		},
+		methods: {
+			startCountdown() {
+				this.timer = setInterval(() => {
+					this.countdown--
+					if (this.countdown <= 0) {
+						clearInterval(this.timer)
+						this.skipToLogin()
+					}
+				}, 1000)
+			},
+			skipToLogin() {
+				if (this.timer) {
+					clearInterval(this.timer)
+				}
+				uni.reLaunch({
+					url: '/pages/login/login'
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.splash-container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		box-sizing: border-box;
+		overflow: hidden;
+		padding-top: 30px;
+	}
+	
+	.skip-btn {
+		position: absolute;
+		top: calc(env(safe-area-inset-top) + 40rpx);
+		right: 40rpx;
+		padding: 12rpx 24rpx;
+		border: 2rpx solid #4FC3F7;
+		border-radius: 40rpx;
+		background-color: #E0F7FA;
+		z-index: 10;
+	}
+	
+	.skip-text {
+		font-size: 28rpx;
+		color: #00838F;
+	}
+	
+	.app-info {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		position: absolute;
+		bottom: calc(env(safe-area-inset-bottom) + 160rpx);
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	
+	.app-icon {
+		margin-bottom: 35rpx;
+	}
+	
+	.icon-square {
+		width: 140rpx;
+		height: 140rpx;
+		background-color: #4FC3F7;
+		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.book-icon {
+		position: relative;
+		width: 90rpx;
+		height: 70rpx;
+	}
+	
+	.book-left,
+	.book-right {
+		position: absolute;
+		width: 45rpx;
+		height: 70rpx;
+		background-color: #FFFFFF;
+		border-radius: 3rpx 0 0 3rpx;
+	}
+	
+	.book-right {
+		right: 0;
+		border-radius: 0 3rpx 3rpx 0;
+	}
+	
+	.book-line {
+		position: absolute;
+		left: 45rpx;
+		top: 8rpx;
+		width: 2rpx;
+		height: 54rpx;
+		background-color: #4FC3F7;
+	}
+	
+	.app-name {
+		font-size: 44rpx;
+		color: #000000;
+		font-weight: 600;
+	}
+</style>
+
+

+ 117 - 0
pages/text-edit/text-edit.vue

@@ -0,0 +1,117 @@
+<template>
+	<view class="container">
+		<view class="header" v-if="title">
+			<text class="title">{{ title }}</text>
+		</view>
+		<textarea
+			class="textarea"
+			v-model="text"
+			:placeholder="placeholder"
+			:maxlength="500"
+			show-confirm-bar
+			auto-focus
+		/>
+		<view class="footer">
+			<button class="btn cancel" @click="cancel">取消</button>
+			<button class="btn save" @click="save">保存</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				key: 'bio',
+				text: '',
+				placeholder: '请输入内容',
+				title: ''
+			}
+		},
+		onLoad(options) {
+			this.key = options.key || 'bio'
+			const value = options.value || ''
+			this.text = value ? decodeURIComponent(value) : ''
+			this.placeholder = options.placeholder ? decodeURIComponent(options.placeholder) : '请输入内容'
+			this.title = options.title ? decodeURIComponent(options.title) : '编辑文本'
+		},
+		methods: {
+			cancel() {
+				uni.navigateBack()
+			},
+			save() {
+				// 保存到临时存储,编辑资料页会在 onShow 时读取
+				const trimmedText = this.text.trim()
+				uni.setStorageSync(`temp_text_${this.key}`, trimmedText)
+				uni.showToast({
+					title: '已保存',
+					icon: 'success',
+					duration: 1000
+				})
+				setTimeout(() => {
+					uni.navigateBack()
+				}, 500)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background-color: #FFFFFF;
+	}
+	.header {
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+	}
+	.title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	.textarea {
+		flex: 1;
+		width: 100%;
+		padding: 30rpx;
+		box-sizing: border-box;
+		background: #fff;
+		font-size: 30rpx;
+		color: #333;
+		line-height: 1.6;
+	}
+	.footer {
+		display: flex;
+		justify-content: space-between;
+		gap: 20rpx;
+		padding: 30rpx;
+		border-top: 1rpx solid #F0F0F0;
+		background-color: #FFFFFF;
+	}
+	.btn {
+		flex: 1;
+		height: 88rpx;
+		border-radius: 44rpx;
+		font-size: 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.btn::after {
+		border: none;
+	}
+	.cancel {
+		background: #f5f5f5;
+		color: #666;
+		border: none;
+	}
+	.save {
+		background: #4FC3F7;
+		color: #fff;
+		border: none;
+	}
+</style>
+
+

+ 419 - 0
pages/vip-books/vip-books.vue

@@ -0,0 +1,419 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">VIP书籍</text>
+			<view class="search-btn" @click="goToSearch">
+				<text class="search-icon">🔍</text>
+			</view>
+		</view>
+		
+		<!-- VIP提示横幅 -->
+		<view class="vip-banner" @click="goToVip">
+			<text class="vip-banner-text">开通VIP,畅享海量精品书籍</text>
+			<text class="vip-banner-arrow">→</text>
+		</view>
+		
+		<!-- 书籍列表 -->
+		<scroll-view class="book-list-container" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
+			<view 
+				class="book-item" 
+				v-for="(book, index) in bookList" 
+				:key="book.id || index"
+				@click="goToBookDetail(book)"
+			>
+				<view class="vip-badge" v-if="book.isVip">
+					<text class="vip-badge-text">VIP</text>
+				</view>
+				<image 
+					class="book-cover" 
+					:src="book.cover" 
+					mode="aspectFill"
+					:lazy-load="true"
+					@error="handleImageError(index)"
+				></image>
+				<view class="book-info">
+					<text class="book-title">{{ book.title }}</text>
+					<text class="book-desc">{{ book.desc }}</text>
+					<text class="book-author">{{ book.author }}</text>
+				</view>
+			</view>
+			
+			<!-- 加载更多提示 -->
+			<view class="load-more" v-if="hasMore">
+				<text class="load-more-text">加载中...</text>
+			</view>
+			<view class="load-more" v-else-if="bookList.length > 0">
+				<text class="load-more-text">没有更多了</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			// 生成书籍封面图片的函数
+			const getBookImage = (seed) => {
+				return `https://picsum.photos/seed/${seed}/200/300`;
+			};
+			
+			return {
+				hasMore: true,
+				page: 1,
+				bookList: [
+					{
+						id: 1,
+						title: '互联网心理学',
+						author: '雷雳',
+						desc: '当连接万物的互联网遇见无处不在的心理学,我们需要用心理学的方式,重新思考互联网背后的人与社会。',
+						cover: getBookImage('vip-internet-psychology'),
+						isVip: true
+					},
+					{
+						id: 2,
+						title: '孝经 (中华经典诵读)',
+						author: '孔子',
+						desc: '以孔子与其弟子曾参之间问答的形式,将社会上各种阶层的人士,标示出其实践孝亲的法则与途径,阐述了「孝」的意义。',
+						cover: getBookImage('vip-xiaojing'),
+						isVip: true
+					},
+					{
+						id: 3,
+						title: '自省',
+						author: '约翰·班扬',
+						desc: '讲述了敬虔之人和不敬虔之人截然相反的结局。本书就是他的细细品味,文风一如从前,朴实无华却又字字珠玑。',
+						cover: getBookImage('vip-self-reflection'),
+						isVip: true
+					},
+					{
+						id: 4,
+						title: '思维的艺术',
+						author: '延斯·森特根',
+						desc: '一本关于思维方式和哲学思考的经典之作,帮助读者提升逻辑思维和批判性思考能力。',
+						cover: getBookImage('vip-thinking-art'),
+						isVip: true
+					},
+					{
+						id: 5,
+						title: '传习录:全译全注',
+						author: '王阳明',
+						desc: '王阳明心学的核心著作,记录了其与学生之间的对话,阐述了知行合一的哲学思想。',
+						cover: getBookImage('vip-chuanxilu'),
+						isVip: true
+					},
+					{
+						id: 6,
+						title: '社会契约论',
+						author: '让·雅克·卢梭',
+						desc: '探讨了政治权力的合法性和人民主权的基本原则,是现代民主理论的重要基石。',
+						cover: getBookImage('vip-social-contract'),
+						isVip: true
+					},
+					{
+						id: 7,
+						title: '没有烦恼的世界',
+						author: '王觉仁',
+						desc: '通过禅修和正念的实践,帮助读者摆脱内心的烦恼,获得内心的平静与智慧。',
+						cover: getBookImage('vip-no-worries'),
+						isVip: true
+					},
+					{
+						id: 8,
+						title: '透过电影看文化',
+						author: '陈红',
+						desc: '从电影的角度分析不同文化的特点,探讨电影如何反映和影响社会文化的发展。',
+						cover: getBookImage('vip-film-culture'),
+						isVip: true
+					}
+				]
+			}
+		},
+		onLoad() {
+			// 页面加载时加载数据
+			this.loadBookList();
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			goToSearch() {
+				uni.navigateTo({
+					url: '/pages/search/search'
+				});
+			},
+			goToVip() {
+				uni.navigateTo({
+					url: '/pages/vip/vip'
+				});
+			},
+			goToBookDetail(book) {
+				if (!book || !book.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/pages/book-detail/book-detail?bookId=${book.id}`
+				});
+			},
+			handleImageError(index) {
+				// 图片加载失败时使用备用图片
+				if (this.bookList[index]) {
+					this.bookList[index].cover = `https://picsum.photos/seed/fallback${index}/200/300`;
+				}
+			},
+			loadBookList() {
+				// 加载VIP书籍列表
+				// 这里可以调用API获取数据
+			},
+			loadMore() {
+				// 滚动到底部加载更多
+				if (this.hasMore) {
+					setTimeout(() => {
+						// 模拟加载更多数据
+						const moreBooks = [
+							{
+								id: 9,
+								title: '车尔尼钢琴流畅练习曲',
+								author: '高新颜',
+								desc: '经典的钢琴练习曲集,适合中级钢琴学习者,帮助提升演奏技巧和流畅度。',
+								cover: `https://picsum.photos/seed/vip-czerny${this.page}/200/300`,
+								isVip: true
+							},
+							{
+								id: 10,
+								title: '古典哲学的趣味',
+								author: '朱利安·巴吉尼',
+								desc: '用通俗易懂的方式介绍古典哲学的核心思想,让哲学变得生动有趣。',
+								cover: `https://picsum.photos/seed/vip-philosophy${this.page}/200/300`,
+								isVip: true
+							},
+							{
+								id: 11,
+								title: '走向大洋',
+								author: '未知',
+								desc: '一部关于海洋探索和人类文明发展的历史著作,展现了人类对未知世界的探索精神。',
+								cover: `https://picsum.photos/seed/vip-ocean${this.page}/200/300`,
+								isVip: true
+							},
+							{
+								id: 12,
+								title: '思维的艺术',
+								author: '延斯·森特根',
+								desc: '一本关于思维方式和哲学思考的经典之作,帮助读者提升逻辑思维和批判性思考能力。',
+								cover: `https://picsum.photos/seed/vip-thinking-art2${this.page}/200/300`,
+								isVip: true
+							}
+						];
+						
+						if (this.page < 3) {
+							const newBooks = moreBooks.map((book, idx) => ({
+								...book,
+								id: book.id + this.page * 10
+							}));
+							this.bookList = [...this.bookList, ...newBooks];
+							this.page++;
+						} else {
+							this.hasMore = false;
+						}
+					}, 500);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	/* 顶部导航栏 */
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #E5E5E5;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #000000;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #000000;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	
+	.search-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.search-icon {
+		font-size: 36rpx;
+		color: #000000;
+	}
+	
+	/* VIP横幅 */
+	.vip-banner {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+		margin: 20rpx 30rpx;
+		border-radius: 12rpx;
+	}
+	
+	.vip-banner-text {
+		font-size: 28rpx;
+		color: #FFFFFF;
+		font-weight: bold;
+	}
+	
+	.vip-banner-arrow {
+		font-size: 32rpx;
+		color: #FFFFFF;
+		font-weight: bold;
+	}
+	
+	/* 书籍列表容器 */
+	.book-list-container {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		background-color: #FFFFFF;
+	}
+	
+	/* 书籍项 */
+	.book-item {
+		display: flex;
+		padding: 30rpx;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+	}
+	
+	.book-item:last-child {
+		border-bottom: none;
+	}
+	
+	/* VIP徽章 */
+	.vip-badge {
+		position: absolute;
+		top: 30rpx;
+		left: 30rpx;
+		width: 80rpx;
+		height: 40rpx;
+		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.vip-badge-text {
+		font-size: 20rpx;
+		color: #FFFFFF;
+		font-weight: bold;
+	}
+	
+	/* 书籍封面 */
+	.book-cover {
+		width: 160rpx;
+		height: 220rpx;
+		border-radius: 8rpx;
+		margin-right: 24rpx;
+		flex-shrink: 0;
+		background-color: #F5F5F5;
+	}
+	
+	/* 书籍信息 */
+	.book-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		min-width: 0;
+	}
+	
+	.book-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000000;
+		margin-bottom: 16rpx;
+		line-height: 1.4;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.book-desc {
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.6;
+		margin-bottom: 20rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.book-author {
+		font-size: 26rpx;
+		color: #999999;
+		margin-top: auto;
+	}
+	
+	/* 加载更多 */
+	.load-more {
+		width: 100%;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 20rpx;
+		margin-bottom: 40rpx;
+	}
+	
+	.load-more-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>

+ 258 - 0
pages/vip-records/vip-records.vue

@@ -0,0 +1,258 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">开通VIP记录</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<!-- VIP记录列表 -->
+		<scroll-view class="scroll-content" scroll-y>
+			<view 
+				class="record-item" 
+				v-for="(record, index) in vipRecords" 
+				:key="index"
+			>
+				<view class="record-header">
+					<text class="vip-type">{{ record.type }}</text>
+					<text class="vip-price">¥{{ record.price }}</text>
+				</view>
+				<view class="record-details">
+					<text class="detail-label">开通时间:</text>
+					<text class="detail-value">{{ record.activateTime }}</text>
+				</view>
+				<view class="record-details">
+					<text class="detail-label">有效期至:</text>
+					<text class="detail-value">{{ record.expireTime }}</text>
+				</view>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-state" v-if="vipRecords.length === 0">
+				<text class="empty-text">暂无VIP记录</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { getVipRecords } from '@/utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				vipRecords: [],
+				loading: false,
+				page: 1,
+				size: 20,
+				hasMore: true
+			}
+		},
+		onLoad() {
+			this.loadVipRecords()
+		},
+		onPullDownRefresh() {
+			this.page = 1
+			this.vipRecords = []
+			this.hasMore = true
+			this.loadVipRecords().finally(() => {
+				uni.stopPullDownRefresh()
+			})
+		},
+		onReachBottom() {
+			if (this.hasMore && !this.loading) {
+				this.page++
+				this.loadVipRecords()
+			}
+		},
+		methods: {
+			async loadVipRecords() {
+				const userInfo = uni.getStorageSync('userInfo')
+				if (!userInfo || !userInfo.id) {
+					uni.showToast({
+						title: '请先登录',
+						icon: 'none'
+					})
+					setTimeout(() => {
+						uni.navigateTo({
+							url: '/pages/login/login'
+						})
+					}, 1500)
+					return
+				}
+				
+				if (this.loading) return
+				this.loading = true
+				
+				try {
+					const res = await getVipRecords(userInfo.id, 1, this.page, this.size) // 只查询已支付的记录
+					
+					if (res && res.code === 200 && res.data) {
+						const newRecords = res.data.list || []
+						
+						if (this.page === 1) {
+							this.vipRecords = newRecords
+						} else {
+							this.vipRecords = this.vipRecords.concat(newRecords)
+						}
+						
+						// 判断是否还有更多数据
+						this.hasMore = newRecords.length >= this.size
+					} else {
+						if (this.page === 1) {
+							this.vipRecords = []
+						}
+						this.hasMore = false
+					}
+				} catch (error) {
+					console.error('加载VIP记录失败:', error)
+					if (this.page === 1) {
+						this.vipRecords = []
+					}
+					if (this.page > 1) {
+						this.page--
+					}
+				} finally {
+					this.loading = false
+				}
+			},
+			goBack() {
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		min-height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		padding-top: 30px;
+		box-sizing: border-box;
+		flex-direction: column;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding: 20rpx 30rpx;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		background-color: #FFFFFF;
+		box-sizing: border-box;
+	}
+	
+	.record-item {
+		padding: 30rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	
+	.record-item:last-child {
+		border-bottom: none;
+	}
+	
+	.record-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20rpx;
+	}
+	
+	.vip-type {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #FF1744;
+	}
+	
+	.vip-price {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #FF1744;
+	}
+	
+	.record-details {
+		display: flex;
+		align-items: center;
+		margin-bottom: 10rpx;
+	}
+	
+	.record-details:last-child {
+		margin-bottom: 0;
+	}
+	
+	.detail-label {
+		font-size: 26rpx;
+		color: #999999;
+		margin-right: 10rpx;
+	}
+	
+	.detail-value {
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 200rpx 0;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>
+

+ 317 - 0
pages/vip/vip.vue

@@ -0,0 +1,317 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<view class="back-btn" @click="goBack">
+				<text class="back-icon">←</text>
+			</view>
+			<text class="header-title">VIP会员</text>
+			<view class="header-right"></view>
+		</view>
+		
+		<scroll-view class="scroll-content" scroll-y>
+			<!-- VIP套餐列表 -->
+			<view class="vip-plans">
+				<view 
+					class="plan-item" 
+					v-for="(plan, index) in vipPlans" 
+					:key="index"
+					:class="{ active: selectedPlan === index }"
+					@click="selectPlan(index)"
+				>
+					<view class="plan-header">
+						<text class="plan-name">{{ plan.name }}</text>
+						<text class="plan-price">¥{{ plan.price }}</text>
+					</view>
+					<text class="plan-desc">{{ plan.desc }}</text>
+					<view class="plan-benefits">
+						<text class="benefit-item" v-for="(benefit, i) in plan.benefits" :key="i">✓ {{ benefit }}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		
+		<!-- 底部购买栏 -->
+		<view class="bottom-bar">
+			<view class="price-info">
+				<text class="price-text">{{ selectedPlanInfo.price }}元/月</text>
+			</view>
+			<button class="buy-btn" @click="goToPayment">立即购买</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getVipPlans } from '@/utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				selectedPlan: 0,
+				vipPlans: [],
+				loading: false
+			}
+		},
+		computed: {
+			selectedPlanInfo() {
+				return this.vipPlans[this.selectedPlan] || {}
+			}
+		},
+		onLoad() {
+			this.loadVipPlans()
+		},
+		methods: {
+			async loadVipPlans() {
+				this.loading = true
+				try {
+					const res = await getVipPlans()
+					if (res && res.code === 200 && res.data) {
+						this.vipPlans = res.data
+					} else {
+						// 如果后端返回失败,使用默认数据
+						this.vipPlans = [
+							{
+								type: 'month',
+								name: '月卡VIP',
+								price: 30,
+								desc: '适合短期阅读',
+								benefits: ['无限阅读', '免费听书', '专属客服']
+							},
+							{
+								type: 'quarter',
+								name: '季卡VIP',
+								price: 80,
+								desc: '超值优惠',
+								benefits: ['无限阅读', '免费听书', '专属客服', '优先更新']
+							},
+							{
+								type: 'year',
+								name: '年卡VIP',
+								price: 288,
+								desc: '最超值选择',
+								benefits: ['无限阅读', '免费听书', '专属客服', '优先更新', '专属活动']
+							}
+						]
+					}
+				} catch (error) {
+					console.error('加载VIP套餐失败:', error)
+					// 使用默认数据
+					this.vipPlans = [
+						{
+							type: 'month',
+							name: '月卡VIP',
+							price: 30,
+							desc: '适合短期阅读',
+							benefits: ['无限阅读', '免费听书', '专属客服']
+						},
+						{
+							type: 'quarter',
+							name: '季卡VIP',
+							price: 80,
+							desc: '超值优惠',
+							benefits: ['无限阅读', '免费听书', '专属客服', '优先更新']
+						},
+						{
+							type: 'year',
+							name: '年卡VIP',
+							price: 288,
+							desc: '最超值选择',
+							benefits: ['无限阅读', '免费听书', '专属客服', '优先更新', '专属活动']
+						}
+					]
+				} finally {
+					this.loading = false
+				}
+			},
+			goBack() {
+				uni.navigateBack()
+			},
+			selectPlan(index) {
+				this.selectedPlan = index
+			},
+			goToPayment() {
+				if (!this.selectedPlanInfo || !this.selectedPlanInfo.type) {
+					uni.showToast({
+						title: '请选择VIP套餐',
+						icon: 'none'
+					})
+					return
+				}
+				
+				const plan = this.selectedPlanInfo
+				uni.navigateTo({
+					url: `/pages/payment/payment?planId=${this.selectedPlan}&planType=${plan.type}&planName=${encodeURIComponent(plan.name)}&price=${plan.price}`
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		min-height: 100vh;
+		background-color: #F5F5F5;
+		display: flex;
+		padding-top: 30px;
+		box-sizing: border-box;
+		flex-direction: column;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+	
+	.back-btn {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+	
+	.back-icon {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+	
+	.header-title {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.header-right {
+		width: 60rpx;
+	}
+	
+	.scroll-content {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding: 30rpx;
+		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+		box-sizing: border-box;
+	}
+	
+	.vip-plans {
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+	}
+	
+	.plan-item {
+		background-color: #FFFFFF;
+		border-radius: 16rpx;
+		padding: 30rpx;
+		border: 2rpx solid transparent;
+		transition: all 0.3s;
+	}
+	
+	.plan-item.active {
+		border-color: #FF6B35;
+		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);
+	}
+	
+	.plan-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 15rpx;
+	}
+	
+	.plan-name {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.plan-price {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #FF6B35;
+	}
+	
+	.plan-desc {
+		font-size: 26rpx;
+		color: #999999;
+		margin-bottom: 20rpx;
+	}
+	
+	.plan-benefits {
+		display: flex;
+		flex-direction: column;
+		gap: 10rpx;
+	}
+	
+	.benefit-item {
+		font-size: 26rpx;
+		color: #666666;
+	}
+	
+	.bottom-bar {
+		display: flex;
+		align-items: center;
+		background-color: #FFFFFF;
+		border-top: 1rpx solid #F0F0F0;
+		padding: 20rpx 30rpx;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+	
+	.price-info {
+		flex: 1;
+		background-color: #333333;
+		border-radius: 8rpx;
+		padding: 25rpx 30rpx;
+		margin-right: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.price-text {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+	}
+	
+	.buy-btn {
+		flex: 1;
+		height: 88rpx;
+		background-color: #FF6B35;
+		color: #FFFFFF;
+		font-size: 32rpx;
+		font-weight: bold;
+		border: none;
+		border-radius: 44rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.buy-btn::after {
+		border: none;
+	}
+</style>
+
+

+ 346 - 0
pages/write-review/write-review.vue

@@ -0,0 +1,346 @@
+<template>
+	<view class="container">
+		<!-- 顶部导航栏 -->
+		<view class="header">
+			<text class="header-title">写书评</text>
+		</view>
+		
+		<!-- 评分选择 -->
+		<view class="rating-section">
+			<view 
+				class="rating-btn" 
+				v-for="(rating, index) in ratingOptions" 
+				:key="index"
+				:class="{ active: selectedRating === rating.value }"
+				@click="selectRating(rating.value)"
+			>
+				<text class="rating-text">{{ rating.label }}</text>
+			</view>
+		</view>
+		
+		<!-- 书评输入区域 -->
+		<view class="review-input-section">
+			<textarea 
+				class="review-input" 
+				v-model="reviewContent" 
+				placeholder="写书评..."
+				maxlength="500"
+				:auto-focus="true"
+				@input="handleInput"
+			></textarea>
+			<view class="char-count">
+				<text class="char-count-text">{{ reviewContent.length }}/500</text>
+			</view>
+		</view>
+		
+		<!-- 底部操作栏 -->
+		<view class="action-bar">
+			<view class="cancel-btn" @click="handleCancel">
+				<text class="action-text">取消</text>
+			</view>
+			<view class="publish-btn" :class="{ disabled: !canPublish }" @click="handlePublish">
+				<text class="action-text">发表</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { addComment } from '../../utils/api.js'
+	
+	export default {
+		data() {
+			return {
+				bookInfo: {
+					id: null,
+					title: ''
+				},
+				selectedRating: 'recommend', // recommend, general, bad
+				ratingOptions: [
+					{ label: '推荐', value: 'recommend' },
+					{ label: '一般', value: 'general' },
+					{ label: '不好', value: 'bad' }
+				],
+				reviewContent: '',
+				userInfo: null,
+				isSubmitting: false
+			}
+		},
+		computed: {
+			canPublish() {
+				return this.reviewContent.trim().length > 0 && !this.isSubmitting
+			}
+		},
+		onLoad(options) {
+			// 获取用户信息
+			try {
+				const userInfo = uni.getStorageSync('userInfo')
+				if (userInfo && userInfo.id) {
+					this.userInfo = userInfo
+				}
+			} catch (e) {
+				console.error('获取用户信息失败', e)
+			}
+			
+			if (options.bookId) {
+				this.bookInfo.id = parseInt(options.bookId)
+			}
+			if (options.title) {
+				this.bookInfo.title = decodeURIComponent(options.title)
+			}
+		},
+		methods: {
+			selectRating(value) {
+				this.selectedRating = value
+			},
+			handleInput(e) {
+				this.reviewContent = e.detail.value
+			},
+			handleCancel() {
+				uni.showModal({
+					title: '提示',
+					content: '确定要取消吗?未保存的内容将丢失。',
+					success: (res) => {
+						if (res.confirm) {
+							uni.navigateBack()
+						}
+					}
+				})
+			},
+			async handlePublish() {
+				if (!this.canPublish) {
+					uni.showToast({
+						title: '请输入书评内容',
+						icon: 'none'
+					})
+					return
+				}
+				
+				// 检查用户是否登录
+				if (!this.userInfo || !this.userInfo.id) {
+					uni.showModal({
+						title: '提示',
+						content: '请先登录',
+						showCancel: true,
+						cancelText: '取消',
+						confirmText: '去登录',
+						success: (res) => {
+							if (res.confirm) {
+								uni.navigateTo({
+									url: '/pages/login/login'
+								})
+							}
+						}
+					})
+					return
+				}
+				
+				// 检查书籍ID
+				if (!this.bookInfo.id) {
+					uni.showToast({
+						title: '书籍信息不完整',
+						icon: 'none'
+					})
+					return
+				}
+				
+				try {
+					this.isSubmitting = true
+					uni.showLoading({
+						title: '发表中...',
+						mask: true
+					})
+					
+					const res = await addComment(
+						this.userInfo.id,
+						this.bookInfo.id,
+						this.reviewContent.trim()
+					)
+					
+					uni.hideLoading()
+					this.isSubmitting = false
+					
+					if (res && res.code === 200) {
+						uni.showToast({
+							title: '发表成功',
+							icon: 'success',
+							duration: 2000
+						})
+						
+						setTimeout(() => {
+							uni.navigateBack()
+						}, 2000)
+					} else {
+						uni.showToast({
+							title: res.message || '发表失败',
+							icon: 'none'
+						})
+					}
+				} catch (e) {
+					uni.hideLoading()
+					this.isSubmitting = false
+					console.error('发表评论失败', e)
+					uni.showToast({
+						title: e.message || '发表失败,请重试',
+						icon: 'none'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		width: 100%;
+		height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding-top: 30px;
+		box-sizing: border-box;
+	}
+	
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: #F5F5F5;
+		border-bottom: 1rpx solid #E0E0E0;
+		position: relative;
+	}
+	
+	.header-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+	}
+	
+	.rating-section {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 30rpx;
+		gap: 20rpx;
+		background-color: #F5F5F5;
+		border-bottom: 1rpx solid #E0E0E0;
+	}
+	
+	.rating-btn {
+		flex: 1;
+		height: 70rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #E0E0E0;
+		border-radius: 8rpx;
+		border: 2rpx solid #E0E0E0;
+		transition: all 0.3s;
+	}
+	
+	.rating-btn.active {
+		background-color: #4CAF50;
+		border-color: #4CAF50;
+	}
+	
+	.rating-btn.active .rating-text {
+		color: #FFFFFF;
+	}
+	
+	.rating-text {
+		font-size: 28rpx;
+		color: #666666;
+		font-weight: 500;
+	}
+	
+	.review-input-section {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 30rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.review-input {
+		flex: 1;
+		width: 100%;
+		min-height: 400rpx;
+		padding: 20rpx;
+		background-color: #FFFFFF;
+		border: 1rpx solid #E0E0E0;
+		border-radius: 8rpx;
+		font-size: 30rpx;
+		color: #333333;
+		line-height: 1.8;
+		box-sizing: border-box;
+	}
+	
+	.review-input::placeholder {
+		color: #CCCCCC;
+	}
+	
+	.char-count {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 20rpx;
+	}
+	
+	.char-count-text {
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.action-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		background-color: #F5F5F5;
+		border-top: 1rpx solid #E0E0E0;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	}
+	
+	.cancel-btn,
+	.publish-btn {
+		flex: 1;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8rpx;
+		transition: all 0.3s;
+	}
+	
+	.cancel-btn {
+		margin-right: 20rpx;
+		background-color: #FFFFFF;
+		border: 1rpx solid #E0E0E0;
+	}
+	
+	.publish-btn {
+		background-color: #4FC3F7;
+		border: none;
+	}
+	
+	.publish-btn.disabled {
+		background-color: #CCCCCC;
+		opacity: 0.6;
+	}
+	
+	.action-text {
+		font-size: 32rpx;
+		color: #333333;
+		font-weight: 500;
+	}
+	
+	.publish-btn .action-text {
+		color: #FFFFFF;
+	}
+	
+	.publish-btn.disabled .action-text {
+		color: #FFFFFF;
+	}
+</style>
+

BIN
static/logo.png


+ 80 - 0
static/tabbar/README.md

@@ -0,0 +1,80 @@
+# 底部导航栏图标文件
+
+## 需要的图标文件
+
+请在此目录下放置以下8个PNG图标文件:
+
+### 1. 电子书图标
+- `book.png` - 未选中状态(灰色 #999999)
+- `book-active.png` - 选中状态(蓝色 #4FC3F7)
+
+**图标设计建议**:
+- 📖 打开的书本
+- 📚 书籍堆叠
+- 📄 文档图标
+
+### 2. 听书图标
+- `listen.png` - 未选中状态(灰色 #999999)
+- `listen-active.png` - 选中状态(蓝色 #4FC3F7)
+
+**图标设计建议**:
+- 🎧 耳机图标
+- 🔊 音频波形
+- 🎵 音乐符号
+
+### 3. 书架图标
+- `bookshelf.png` - 未选中状态(灰色 #999999)
+- `bookshelf-active.png` - 选中状态(蓝色 #4FC3F7)
+
+**图标设计建议**:
+- 📚 书架
+- 📖 书堆
+- 📑 文件夹
+
+### 4. 我的图标
+- `profile.png` - 未选中状态(灰色 #999999)
+- `profile-active.png` - 选中状态(蓝色 #4FC3F7)
+
+**图标设计建议**:
+- 👤 用户头像轮廓
+- 👥 个人中心
+- ⚙️ 设置齿轮(可选)
+
+## 图标规格
+
+- **尺寸**: 81x81px(推荐)
+- **格式**: PNG
+- **背景**: 透明
+- **风格**: 线条简洁,现代扁平化风格
+
+## 快速获取图标
+
+### 方法1: 使用 IconFont
+1. 访问 https://www.iconfont.cn/
+2. 搜索对应关键词
+3. 下载PNG格式,81x81尺寸
+4. 使用图片编辑工具调整颜色
+
+### 方法2: 使用 Icons8
+1. 访问 https://icons8.com/
+2. 搜索对应图标
+3. 选择"线条"或"填充"风格
+4. 下载PNG格式
+
+### 方法3: 使用 Figma/Sketch
+1. 使用设计工具绘制图标
+2. 导出为PNG格式
+3. 确保尺寸为81x81px
+
+## 颜色调整
+
+如果下载的图标是其他颜色,可以使用以下工具调整:
+- Photoshop
+- GIMP(免费)
+- 在线工具:https://www.photopea.com/
+
+将颜色调整为:
+- 未选中:#999999
+- 选中:#4FC3F7
+
+

+ 210 - 0
static/tabbar/图标快速生成指南.md

@@ -0,0 +1,210 @@
+# 底部导航栏图标快速生成指南
+
+## 📋 需要的图标文件清单
+
+请在 `static/tabbar/` 目录下放置以下8个PNG图标文件:
+
+| 功能 | 未选中图标 | 选中图标 | 推荐图标样式 |
+|------|-----------|---------|------------|
+| 电子书 | `book.png` | `book-active.png` | 📖 打开的书本 |
+| 听书 | `listen.png` | `listen-active.png` | 🎧 耳机 |
+| 书架 | `bookshelf.png` | `bookshelf-active.png` | 📚 书架 |
+| 我的 | `profile.png` | `profile-active.png` | 👤 用户头像 |
+
+## 🎨 图标设计规范
+
+### 尺寸要求
+- **推荐尺寸**: 81x81px
+- **最小尺寸**: 54x54px
+- **最大尺寸**: 81x81px
+- **格式**: PNG(必须透明背景)
+
+### 颜色规范
+- **未选中状态**: #999999(灰色)
+- **选中状态**: #4FC3F7(主题蓝色)
+
+### 设计风格
+- **风格**: 现代扁平化、线条简洁
+- **线条粗细**: 2-3px
+- **圆角**: 统一使用圆角或直角
+- **视觉平衡**: 所有图标视觉重量保持一致
+
+## 🚀 快速生成方法
+
+### 方法一:使用阿里巴巴IconFont(推荐)
+
+1. **访问网站**: https://www.iconfont.cn/
+
+2. **搜索图标**:
+   - 电子书:搜索 "book" 或 "书籍"
+   - 听书:搜索 "headphone" 或 "耳机"
+   - 书架:搜索 "bookshelf" 或 "书架"
+   - 我的:搜索 "user" 或 "用户"
+
+3. **下载步骤**:
+   - 选择线条风格图标
+   - 点击下载 → 选择PNG格式
+   - 尺寸选择 81x81
+   - 下载后重命名为对应文件名
+
+4. **颜色调整**:
+   - 使用 Photoshop 或在线工具调整颜色
+   - 未选中:改为 #999999
+   - 选中:改为 #4FC3F7
+
+### 方法二:使用 Icons8
+
+1. **访问网站**: https://icons8.com/
+
+2. **搜索图标**:
+   - 电子书:搜索 "book"
+   - 听书:搜索 "headphone"
+   - 书架:搜索 "bookshelf"
+   - 我的:搜索 "user profile"
+
+3. **下载**:
+   - 选择"线条"或"填充"风格
+   - 下载PNG格式,81x81尺寸
+   - 调整颜色
+
+### 方法三:使用 Figma 设计
+
+1. **创建图标**:
+   - 新建 81x81px 画布
+   - 使用线条工具绘制图标
+   - 保持风格统一
+
+2. **导出**:
+   - 选择图标 → 导出 → PNG
+   - 确保背景透明
+
+3. **颜色设置**:
+   - 未选中:填充 #999999
+   - 选中:填充 #4FC3F7
+
+### 方法四:使用在线图标生成器
+
+1. **访问**: https://www.flaticon.com/
+2. 搜索对应关键词
+3. 下载PNG格式
+4. 调整尺寸和颜色
+
+## 🎯 图标设计参考
+
+### 电子书图标 (book)
+```
+推荐样式:
+- 打开的书本(两页展开)
+- 书籍轮廓
+- 文档图标
+
+设计要点:
+- 体现"阅读"概念
+- 线条简洁流畅
+```
+
+### 听书图标 (listen)
+```
+推荐样式:
+- 耳机图标
+- 音频波形
+- 播放按钮+音频
+
+设计要点:
+- 体现"听"的概念
+- 动态感强
+```
+
+### 书架图标 (bookshelf)
+```
+推荐样式:
+- 书架轮廓
+- 书堆叠
+- 文件夹+书籍
+
+设计要点:
+- 体现"收藏"概念
+- 整齐有序
+```
+
+### 我的图标 (profile)
+```
+推荐样式:
+- 圆形头像轮廓
+- 人形轮廓
+- 用户图标
+
+设计要点:
+- 体现"个人"概念
+- 简洁友好
+```
+
+## 🛠️ 颜色调整工具
+
+### 在线工具
+1. **Photopea**: https://www.photopea.com/(免费在线PS)
+2. **Remove.bg**: https://www.remove.bg/(去除背景)
+3. **TinyPNG**: https://tinypng.com/(压缩图片)
+
+### 桌面工具
+- **Photoshop**: 专业图片编辑
+- **GIMP**: 免费开源图片编辑
+- **Figma**: 在线设计工具
+
+### 颜色调整步骤(以Photopea为例)
+1. 打开图标文件
+2. 选择图标图层
+3. 图像 → 调整 → 色相/饱和度
+4. 调整色相和饱和度匹配目标颜色
+5. 或使用"颜色替换"工具
+6. 导出为PNG格式
+
+## ✅ 检查清单
+
+完成图标后,请检查:
+
+- [ ] 所有8个图标文件都已放置在 `static/tabbar/` 目录
+- [ ] 文件名完全匹配(区分大小写)
+- [ ] 图标尺寸为 81x81px
+- [ ] 背景透明
+- [ ] 未选中图标颜色为 #999999
+- [ ] 选中图标颜色为 #4FC3F7
+- [ ] 所有图标风格统一
+- [ ] 图标清晰,无锯齿
+
+## 📱 测试步骤
+
+1. 重新编译小程序
+2. 检查底部导航栏图标显示
+3. 测试点击切换效果
+4. 检查选中和未选中状态的颜色
+5. 在不同设备上测试显示效果
+
+## 💡 设计建议
+
+1. **统一性**: 所有图标使用相同的设计语言
+2. **识别性**: 图标要清晰易懂,用户一眼就能识别
+3. **美观性**: 线条流畅,比例协调
+4. **简洁性**: 避免过于复杂的细节
+5. **一致性**: 选中和未选中状态保持相同的图标形状,只改变颜色
+
+## 🎨 推荐图标库
+
+- **IconFont**: https://www.iconfont.cn/(中文,免费)
+- **Icons8**: https://icons8.com/(多语言,部分免费)
+- **Flaticon**: https://www.flaticon.com/(英文,部分免费)
+- **Feather Icons**: https://feathericons.com/(简洁线条风格)
+- **Material Icons**: https://fonts.google.com/icons(Google设计)
+
+## 📝 注意事项
+
+1. **文件命名**: 必须严格按照配置中的文件名,区分大小写
+2. **文件路径**: 图标必须放在 `static/tabbar/` 目录下
+3. **文件格式**: 必须是PNG格式,不支持SVG
+4. **背景透明**: 图标背景必须是透明的
+5. **尺寸一致**: 所有图标尺寸应该一致
+6. **颜色准确**: 确保颜色值与配置完全一致
+
+完成图标准备后,重新编译小程序即可看到效果!
+
+

+ 130 - 0
static/tabbar/图标说明.md

@@ -0,0 +1,130 @@
+# 底部导航栏图标说明
+
+## 图标要求
+
+底部导航栏需要8个图标文件(每个tab需要2个:未选中和选中状态),请放置在 `static/tabbar/` 目录下。
+
+### 图标规格
+- **格式**: PNG
+- **尺寸**: 81x81px(推荐)或 81x81 的倍数
+- **背景**: 透明背景
+- **颜色**: 
+  - 未选中状态:灰色 (#999999)
+  - 选中状态:蓝色 (#4FC3F7)
+
+### 图标文件列表
+
+#### 1. 电子书 (Book)
+- **未选中**: `book.png` - 书籍图标(灰色)
+- **选中**: `book-active.png` - 书籍图标(蓝色)
+
+**设计建议**: 
+- 使用打开的书本图标
+- 线条简洁,现代风格
+- 未选中时使用灰色,选中时使用主题蓝色
+
+#### 2. 听书 (Listen)
+- **未选中**: `listen.png` - 耳机/音频图标(灰色)
+- **选中**: `listen-active.png` - 耳机/音频图标(蓝色)
+
+**设计建议**:
+- 使用耳机或音频波形图标
+- 体现"听"的概念
+- 线条流畅,符合音频主题
+
+#### 3. 书架 (Bookshelf)
+- **未选中**: `bookshelf.png` - 书架图标(灰色)
+- **选中**: `bookshelf-active.png` - 书架图标(蓝色)
+
+**设计建议**:
+- 使用书架或书堆图标
+- 体现收藏、整理的概念
+- 简洁的线条设计
+
+#### 4. 我的 (Profile)
+- **未选中**: `profile.png` - 用户头像图标(灰色)
+- **选中**: `profile-active.png` - 用户头像图标(蓝色)
+
+**设计建议**:
+- 使用圆形头像轮廓图标
+- 或使用用户/个人图标
+- 简洁的人形轮廓设计
+
+## 图标设计参考
+
+### 风格统一性
+- 所有图标应保持相同的设计风格
+- 线条粗细一致
+- 圆角或尖角风格统一
+- 视觉重量平衡
+
+### 颜色规范
+- **未选中**: #999999 (灰色)
+- **选中**: #4FC3F7 (主题蓝色)
+
+### 图标设计工具推荐
+1. **在线工具**:
+   - IconFont (阿里巴巴图标库)
+   - Flaticon
+   - Icons8
+
+2. **设计软件**:
+   - Figma
+   - Sketch
+   - Adobe Illustrator
+
+## 快速生成图标方法
+
+### 方法一:使用在线图标库
+1. 访问 [IconFont](https://www.iconfont.cn/)
+2. 搜索关键词:
+   - 电子书:搜索 "book"、"书籍"
+   - 听书:搜索 "headphone"、"耳机"、"audio"
+   - 书架:搜索 "bookshelf"、"书架"
+   - 我的:搜索 "user"、"profile"、"用户"
+3. 下载PNG格式,尺寸选择81x81
+4. 使用图片编辑工具调整颜色
+
+### 方法二:使用图标字体
+1. 下载图标字体文件
+2. 转换为PNG格式
+3. 调整颜色和尺寸
+
+### 方法三:使用AI生成
+1. 使用Midjourney、DALL-E等AI工具生成图标
+2. 导出为PNG格式
+3. 调整尺寸和颜色
+
+## 文件结构
+
+```
+books/
+└── static/
+    └── tabbar/
+        ├── book.png
+        ├── book-active.png
+        ├── listen.png
+        ├── listen-active.png
+        ├── bookshelf.png
+        ├── bookshelf-active.png
+        ├── profile.png
+        └── profile-active.png
+```
+
+## 注意事项
+
+1. **文件命名**: 必须严格按照上述文件名命名
+2. **文件路径**: 图标文件必须放在 `static/tabbar/` 目录下
+3. **图标尺寸**: 建议使用81x81px,确保在不同设备上显示清晰
+4. **背景透明**: 图标背景必须是透明的
+5. **颜色一致**: 确保选中和未选中状态的颜色与配置一致
+
+## 测试
+
+配置完成后,请:
+1. 重新编译小程序
+2. 检查底部导航栏图标是否正确显示
+3. 测试选中和未选中状态的切换效果
+4. 在不同设备上测试显示效果
+
+

+ 13 - 0
uni.promisify.adaptor.js

@@ -0,0 +1,13 @@
+uni.addInterceptor({
+  returnValue (res) {
+    if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
+      return res;
+    }
+    return new Promise((resolve, reject) => {
+      res.then((res) => {
+        if (!res) return resolve(res) 
+        return res[0] ? reject(res[0]) : resolve(res[1])
+      });
+    });
+  },
+});

+ 76 - 0
uni.scss

@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:12px;
+$uni-font-size-base:14px;
+$uni-font-size-lg:16px;
+
+/* 图片尺寸 */
+$uni-img-size-sm:20px;
+$uni-img-size-base:26px;
+$uni-img-size-lg:40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:20px;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:26px;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:15px;

+ 8 - 0
unpackage/dist/cache/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "16040817",
+  "configHash": "2b97353a",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "45f695c5",
+  "optimized": {},
+  "chunks": {}
+}

+ 3 - 0
unpackage/dist/cache/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

+ 1 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t/*每个页面公共css */\r\n</style>\n","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n  ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n  const app = createSSRApp(App)\n  return {\n    app\n  }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;;;"}

+ 1 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/common/assets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.js","sources":["static/logo.png"],"sourcesContent":["export default \"__VITE_ASSET__46719607__\""],"names":[],"mappings":";AAAA,MAAe,aAAA;;"}

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/common/vendor.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/about/about.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/audio-novel/audio-novel.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/book-cover/book-cover.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/book-detail/book-detail.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/bookshelf/bookshelf.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/browsing-history/browsing-history.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/category/category.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/edit-profile/edit-profile.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/feedback/feedback.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/hot-books/hot-books.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/hot-listen/hot-listen.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/index.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/listen-detail/listen-detail.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/listen/listen.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/login/login.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/messages/messages.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/more-books/more-books.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/more-listen-books/more-listen-books.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/new-books/new-books.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/notes/notes.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/payment/payment.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/player/player.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/portable-listen/portable-listen.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/profile/profile.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/ranking/ranking.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/reader/reader.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/reading-rank/reading-rank.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/register/register.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/search/search.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/settings/settings.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/splash/splash.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/text-edit/text-edit.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/vip-books/vip-books.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/vip-records/vip-records.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/vip/vip.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/pages/write-review/write-review.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/utils/api.js.map


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
unpackage/dist/dev/.sourcemap/mp-weixin/utils/config.js.map


+ 3 - 0
unpackage/dist/dev/mp-weixin/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

+ 60 - 0
unpackage/dist/dev/mp-weixin/app.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_vendor = require("./common/vendor.js");
+if (!Math) {
+  "./pages/splash/splash.js";
+  "./pages/login/login.js";
+  "./pages/register/register.js";
+  "./pages/index/index.js";
+  "./pages/listen/listen.js";
+  "./pages/bookshelf/bookshelf.js";
+  "./pages/profile/profile.js";
+  "./pages/category/category.js";
+  "./pages/book-detail/book-detail.js";
+  "./pages/ranking/ranking.js";
+  "./pages/hot-books/hot-books.js";
+  "./pages/new-books/new-books.js";
+  "./pages/vip-books/vip-books.js";
+  "./pages/more-books/more-books.js";
+  "./pages/search/search.js";
+  "./pages/listen-detail/listen-detail.js";
+  "./pages/audio-novel/audio-novel.js";
+  "./pages/portable-listen/portable-listen.js";
+  "./pages/browsing-history/browsing-history.js";
+  "./pages/reading-rank/reading-rank.js";
+  "./pages/edit-profile/edit-profile.js";
+  "./pages/text-edit/text-edit.js";
+  "./pages/book-cover/book-cover.js";
+  "./pages/reader/reader.js";
+  "./pages/player/player.js";
+  "./pages/more-listen-books/more-listen-books.js";
+  "./pages/messages/messages.js";
+  "./pages/feedback/feedback.js";
+  "./pages/vip-records/vip-records.js";
+  "./pages/notes/notes.js";
+  "./pages/settings/settings.js";
+  "./pages/vip/vip.js";
+  "./pages/payment/payment.js";
+  "./pages/about/about.js";
+  "./pages/write-review/write-review.js";
+}
+const _sfc_main = {
+  onLaunch: function() {
+    common_vendor.index.__f__("log", "at App.vue:4", "App Launch");
+  },
+  onShow: function() {
+    common_vendor.index.__f__("log", "at App.vue:7", "App Show");
+  },
+  onHide: function() {
+    common_vendor.index.__f__("log", "at App.vue:10", "App Hide");
+  }
+};
+function createApp() {
+  const app = common_vendor.createSSRApp(_sfc_main);
+  return {
+    app
+  };
+}
+createApp().app.mount("#app");
+exports.createApp = createApp;
+//# sourceMappingURL=../.sourcemap/mp-weixin/app.js.map

+ 71 - 0
unpackage/dist/dev/mp-weixin/app.json

@@ -0,0 +1,71 @@
+{
+  "pages": [
+    "pages/splash/splash",
+    "pages/login/login",
+    "pages/register/register",
+    "pages/index/index",
+    "pages/listen/listen",
+    "pages/bookshelf/bookshelf",
+    "pages/profile/profile",
+    "pages/category/category",
+    "pages/book-detail/book-detail",
+    "pages/ranking/ranking",
+    "pages/hot-books/hot-books",
+    "pages/new-books/new-books",
+    "pages/vip-books/vip-books",
+    "pages/more-books/more-books",
+    "pages/search/search",
+    "pages/listen-detail/listen-detail",
+    "pages/hot-listen/hot-listen",
+    "pages/audio-novel/audio-novel",
+    "pages/portable-listen/portable-listen",
+    "pages/browsing-history/browsing-history",
+    "pages/reading-rank/reading-rank",
+    "pages/edit-profile/edit-profile",
+    "pages/text-edit/text-edit",
+    "pages/book-cover/book-cover",
+    "pages/reader/reader",
+    "pages/player/player",
+    "pages/more-listen-books/more-listen-books",
+    "pages/messages/messages",
+    "pages/feedback/feedback",
+    "pages/vip-records/vip-records",
+    "pages/notes/notes",
+    "pages/settings/settings",
+    "pages/vip/vip",
+    "pages/payment/payment",
+    "pages/about/about",
+    "pages/write-review/write-review"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "云阅读",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "backgroundColor": "#FFFFFF"
+  },
+  "tabBar": {
+    "color": "#999999",
+    "selectedColor": "#4FC3F7",
+    "borderStyle": "black",
+    "backgroundColor": "#FFFFFF",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "电子书"
+      },
+      {
+        "pagePath": "pages/listen/listen",
+        "text": "听书"
+      },
+      {
+        "pagePath": "pages/bookshelf/bookshelf",
+        "text": "书架"
+      },
+      {
+        "pagePath": "pages/profile/profile",
+        "text": "我的"
+      }
+    ]
+  },
+  "usingComponents": {}
+}

+ 3 - 0
unpackage/dist/dev/mp-weixin/app.wxss

@@ -0,0 +1,3 @@
+
+	/*每个页面公共css */
+page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}[data-c-h="true"]{display: none !important;}

+ 7875 - 0
unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -0,0 +1,7875 @@
+"use strict";
+/**
+* @vue/shared v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+function makeMap(str, expectsLowerCase) {
+  const set2 = new Set(str.split(","));
+  return expectsLowerCase ? (val) => set2.has(val.toLowerCase()) : (val) => set2.has(val);
+}
+const EMPTY_OBJ = Object.freeze({});
+const EMPTY_ARR = Object.freeze([]);
+const NOOP = () => {
+};
+const NO = () => false;
+const isOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // uppercase letter
+(key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97);
+const isModelListener = (key) => key.startsWith("onUpdate:");
+const extend = Object.assign;
+const remove = (arr, el) => {
+  const i = arr.indexOf(el);
+  if (i > -1) {
+    arr.splice(i, 1);
+  }
+};
+const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+const hasOwn = (val, key) => hasOwnProperty$1.call(val, key);
+const isArray = Array.isArray;
+const isMap = (val) => toTypeString(val) === "[object Map]";
+const isSet = (val) => toTypeString(val) === "[object Set]";
+const isFunction = (val) => typeof val === "function";
+const isString = (val) => typeof val === "string";
+const isSymbol = (val) => typeof val === "symbol";
+const isObject = (val) => val !== null && typeof val === "object";
+const isPromise = (val) => {
+  return (isObject(val) || isFunction(val)) && isFunction(val.then) && isFunction(val.catch);
+};
+const objectToString = Object.prototype.toString;
+const toTypeString = (value) => objectToString.call(value);
+const toRawType = (value) => {
+  return toTypeString(value).slice(8, -1);
+};
+const isPlainObject = (val) => toTypeString(val) === "[object Object]";
+const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
+const isReservedProp = /* @__PURE__ */ makeMap(
+  // the leading comma is intentional so empty string "" is also included
+  ",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"
+);
+const isBuiltInDirective = /* @__PURE__ */ makeMap(
+  "bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"
+);
+const cacheStringFunction = (fn) => {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return (str) => {
+    const hit = cache[str];
+    return hit || (cache[str] = fn(str));
+  };
+};
+const camelizeRE = /-(\w)/g;
+const camelize = cacheStringFunction((str) => {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+});
+const hyphenateRE = /\B([A-Z])/g;
+const hyphenate = cacheStringFunction(
+  (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
+);
+const capitalize = cacheStringFunction((str) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+});
+const toHandlerKey = cacheStringFunction((str) => {
+  const s = str ? `on${capitalize(str)}` : ``;
+  return s;
+});
+const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
+const invokeArrayFns$1 = (fns, arg) => {
+  for (let i = 0; i < fns.length; i++) {
+    fns[i](arg);
+  }
+};
+const def = (obj, key, value) => {
+  Object.defineProperty(obj, key, {
+    configurable: true,
+    enumerable: false,
+    value
+  });
+};
+const looseToNumber = (val) => {
+  const n = parseFloat(val);
+  return isNaN(n) ? val : n;
+};
+const toDisplayString = (val) => {
+  return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
+};
+const replacer = (_key, val) => {
+  if (val && val.__v_isRef) {
+    return replacer(_key, val.value);
+  } else if (isMap(val)) {
+    return {
+      [`Map(${val.size})`]: [...val.entries()].reduce(
+        (entries, [key, val2], i) => {
+          entries[stringifySymbol(key, i) + " =>"] = val2;
+          return entries;
+        },
+        {}
+      )
+    };
+  } else if (isSet(val)) {
+    return {
+      [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
+    };
+  } else if (isSymbol(val)) {
+    return stringifySymbol(val);
+  } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
+    return String(val);
+  }
+  return val;
+};
+const stringifySymbol = (v, i = "") => {
+  var _a;
+  return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
+};
+const LOCALE_ZH_HANS = "zh-Hans";
+const LOCALE_ZH_HANT = "zh-Hant";
+const LOCALE_EN = "en";
+const LOCALE_FR = "fr";
+const LOCALE_ES = "es";
+function include(str, parts) {
+  return !!parts.find((part) => str.indexOf(part) !== -1);
+}
+function startsWith(str, parts) {
+  return parts.find((part) => str.indexOf(part) === 0);
+}
+function normalizeLocale(locale, messages) {
+  if (!locale) {
+    return;
+  }
+  locale = locale.trim().replace(/_/g, "-");
+  if (messages && messages[locale]) {
+    return locale;
+  }
+  locale = locale.toLowerCase();
+  if (locale === "chinese") {
+    return LOCALE_ZH_HANS;
+  }
+  if (locale.indexOf("zh") === 0) {
+    if (locale.indexOf("-hans") > -1) {
+      return LOCALE_ZH_HANS;
+    }
+    if (locale.indexOf("-hant") > -1) {
+      return LOCALE_ZH_HANT;
+    }
+    if (include(locale, ["-tw", "-hk", "-mo", "-cht"])) {
+      return LOCALE_ZH_HANT;
+    }
+    return LOCALE_ZH_HANS;
+  }
+  let locales = [LOCALE_EN, LOCALE_FR, LOCALE_ES];
+  if (messages && Object.keys(messages).length > 0) {
+    locales = Object.keys(messages);
+  }
+  const lang = startsWith(locale, locales);
+  if (lang) {
+    return lang;
+  }
+}
+const SLOT_DEFAULT_NAME = "d";
+const ON_SHOW = "onShow";
+const ON_HIDE = "onHide";
+const ON_LAUNCH = "onLaunch";
+const ON_ERROR = "onError";
+const ON_THEME_CHANGE = "onThemeChange";
+const ON_PAGE_NOT_FOUND = "onPageNotFound";
+const ON_UNHANDLE_REJECTION = "onUnhandledRejection";
+const ON_EXIT = "onExit";
+const ON_LOAD = "onLoad";
+const ON_READY = "onReady";
+const ON_UNLOAD = "onUnload";
+const ON_INIT = "onInit";
+const ON_SAVE_EXIT_STATE = "onSaveExitState";
+const ON_RESIZE = "onResize";
+const ON_BACK_PRESS = "onBackPress";
+const ON_PAGE_SCROLL = "onPageScroll";
+const ON_TAB_ITEM_TAP = "onTabItemTap";
+const ON_REACH_BOTTOM = "onReachBottom";
+const ON_PULL_DOWN_REFRESH = "onPullDownRefresh";
+const ON_SHARE_TIMELINE = "onShareTimeline";
+const ON_SHARE_CHAT = "onShareChat";
+const ON_ADD_TO_FAVORITES = "onAddToFavorites";
+const ON_SHARE_APP_MESSAGE = "onShareAppMessage";
+const ON_NAVIGATION_BAR_BUTTON_TAP = "onNavigationBarButtonTap";
+const ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED = "onNavigationBarSearchInputClicked";
+const ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED = "onNavigationBarSearchInputChanged";
+const ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED = "onNavigationBarSearchInputConfirmed";
+const ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED = "onNavigationBarSearchInputFocusChanged";
+const VIRTUAL_HOST_STYLE = "virtualHostStyle";
+const VIRTUAL_HOST_CLASS = "virtualHostClass";
+const VIRTUAL_HOST_HIDDEN = "virtualHostHidden";
+const VIRTUAL_HOST_ID = "virtualHostId";
+function hasLeadingSlash(str) {
+  return str.indexOf("/") === 0;
+}
+function addLeadingSlash(str) {
+  return hasLeadingSlash(str) ? str : "/" + str;
+}
+const invokeArrayFns = (fns, arg) => {
+  let ret;
+  for (let i = 0; i < fns.length; i++) {
+    ret = fns[i](arg);
+  }
+  return ret;
+};
+function once(fn, ctx = null) {
+  let res;
+  return (...args) => {
+    if (fn) {
+      res = fn.apply(ctx, args);
+      fn = null;
+    }
+    return res;
+  };
+}
+function getValueByDataPath(obj, path) {
+  if (!isString(path)) {
+    return;
+  }
+  path = path.replace(/\[(\d+)\]/g, ".$1");
+  const parts = path.split(".");
+  let key = parts[0];
+  if (!obj) {
+    obj = {};
+  }
+  if (parts.length === 1) {
+    return obj[key];
+  }
+  return getValueByDataPath(obj[key], parts.slice(1).join("."));
+}
+function sortObject(obj) {
+  let sortObj = {};
+  if (isPlainObject(obj)) {
+    Object.keys(obj).sort().forEach((key) => {
+      const _key = key;
+      sortObj[_key] = obj[_key];
+    });
+  }
+  return !Object.keys(sortObj) ? obj : sortObj;
+}
+const customizeRE = /:/g;
+function customizeEvent(str) {
+  return camelize(str.replace(customizeRE, "-"));
+}
+const encode = encodeURIComponent;
+function stringifyQuery(obj, encodeStr = encode) {
+  const res = obj ? Object.keys(obj).map((key) => {
+    let val = obj[key];
+    if (typeof val === void 0 || val === null) {
+      val = "";
+    } else if (isPlainObject(val)) {
+      val = JSON.stringify(val);
+    }
+    return encodeStr(key) + "=" + encodeStr(val);
+  }).filter((x) => x.length > 0).join("&") : null;
+  return res ? `?${res}` : "";
+}
+const PAGE_HOOKS = [
+  ON_INIT,
+  ON_LOAD,
+  ON_SHOW,
+  ON_HIDE,
+  ON_UNLOAD,
+  ON_BACK_PRESS,
+  ON_PAGE_SCROLL,
+  ON_TAB_ITEM_TAP,
+  ON_REACH_BOTTOM,
+  ON_PULL_DOWN_REFRESH,
+  ON_SHARE_TIMELINE,
+  ON_SHARE_APP_MESSAGE,
+  ON_SHARE_CHAT,
+  ON_ADD_TO_FAVORITES,
+  ON_SAVE_EXIT_STATE,
+  ON_NAVIGATION_BAR_BUTTON_TAP,
+  ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED,
+  ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED,
+  ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED,
+  ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED
+];
+function isRootHook(name) {
+  return PAGE_HOOKS.indexOf(name) > -1;
+}
+const UniLifecycleHooks = [
+  ON_SHOW,
+  ON_HIDE,
+  ON_LAUNCH,
+  ON_ERROR,
+  ON_THEME_CHANGE,
+  ON_PAGE_NOT_FOUND,
+  ON_UNHANDLE_REJECTION,
+  ON_EXIT,
+  ON_INIT,
+  ON_LOAD,
+  ON_READY,
+  ON_UNLOAD,
+  ON_RESIZE,
+  ON_BACK_PRESS,
+  ON_PAGE_SCROLL,
+  ON_TAB_ITEM_TAP,
+  ON_REACH_BOTTOM,
+  ON_PULL_DOWN_REFRESH,
+  ON_SHARE_TIMELINE,
+  ON_ADD_TO_FAVORITES,
+  ON_SHARE_APP_MESSAGE,
+  ON_SHARE_CHAT,
+  ON_SAVE_EXIT_STATE,
+  ON_NAVIGATION_BAR_BUTTON_TAP,
+  ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED,
+  ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED,
+  ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED,
+  ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED
+];
+const MINI_PROGRAM_PAGE_RUNTIME_HOOKS = /* @__PURE__ */ (() => {
+  return {
+    onPageScroll: 1,
+    onShareAppMessage: 1 << 1,
+    onShareTimeline: 1 << 2
+  };
+})();
+function isUniLifecycleHook(name, value, checkType = true) {
+  if (checkType && !isFunction(value)) {
+    return false;
+  }
+  if (UniLifecycleHooks.indexOf(name) > -1) {
+    return true;
+  } else if (name.indexOf("on") === 0) {
+    return true;
+  }
+  return false;
+}
+let vueApp;
+const createVueAppHooks = [];
+function onCreateVueApp(hook) {
+  if (vueApp) {
+    return hook(vueApp);
+  }
+  createVueAppHooks.push(hook);
+}
+function invokeCreateVueAppHook(app) {
+  vueApp = app;
+  createVueAppHooks.forEach((hook) => hook(app));
+}
+const invokeCreateErrorHandler = once((app, createErrorHandler2) => {
+  return createErrorHandler2(app);
+});
+const E = function() {
+};
+E.prototype = {
+  _id: 1,
+  on: function(name, callback, ctx) {
+    var e2 = this.e || (this.e = {});
+    (e2[name] || (e2[name] = [])).push({
+      fn: callback,
+      ctx,
+      _id: this._id
+    });
+    return this._id++;
+  },
+  once: function(name, callback, ctx) {
+    var self2 = this;
+    function listener() {
+      self2.off(name, listener);
+      callback.apply(ctx, arguments);
+    }
+    listener._ = callback;
+    return this.on(name, listener, ctx);
+  },
+  emit: function(name) {
+    var data = [].slice.call(arguments, 1);
+    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+    var i = 0;
+    var len = evtArr.length;
+    for (i; i < len; i++) {
+      evtArr[i].fn.apply(evtArr[i].ctx, data);
+    }
+    return this;
+  },
+  off: function(name, event) {
+    var e2 = this.e || (this.e = {});
+    var evts = e2[name];
+    var liveEvents = [];
+    if (evts && event) {
+      for (var i = evts.length - 1; i >= 0; i--) {
+        if (evts[i].fn === event || evts[i].fn._ === event || evts[i]._id === event) {
+          evts.splice(i, 1);
+          break;
+        }
+      }
+      liveEvents = evts;
+    }
+    liveEvents.length ? e2[name] = liveEvents : delete e2[name];
+    return this;
+  }
+};
+var E$1 = E;
+/**
+* @dcloudio/uni-mp-vue v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+function warn$2(msg, ...args) {
+  console.warn(`[Vue warn] ${msg}`, ...args);
+}
+let activeEffectScope;
+class EffectScope {
+  constructor(detached = false) {
+    this.detached = detached;
+    this._active = true;
+    this.effects = [];
+    this.cleanups = [];
+    this.parent = activeEffectScope;
+    if (!detached && activeEffectScope) {
+      this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
+        this
+      ) - 1;
+    }
+  }
+  get active() {
+    return this._active;
+  }
+  run(fn) {
+    if (this._active) {
+      const currentEffectScope = activeEffectScope;
+      try {
+        activeEffectScope = this;
+        return fn();
+      } finally {
+        activeEffectScope = currentEffectScope;
+      }
+    } else {
+      warn$2(`cannot run an inactive effect scope.`);
+    }
+  }
+  /**
+   * This should only be called on non-detached scopes
+   * @internal
+   */
+  on() {
+    activeEffectScope = this;
+  }
+  /**
+   * This should only be called on non-detached scopes
+   * @internal
+   */
+  off() {
+    activeEffectScope = this.parent;
+  }
+  stop(fromParent) {
+    if (this._active) {
+      let i, l;
+      for (i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].stop();
+      }
+      for (i = 0, l = this.cleanups.length; i < l; i++) {
+        this.cleanups[i]();
+      }
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].stop(true);
+        }
+      }
+      if (!this.detached && this.parent && !fromParent) {
+        const last = this.parent.scopes.pop();
+        if (last && last !== this) {
+          this.parent.scopes[this.index] = last;
+          last.index = this.index;
+        }
+      }
+      this.parent = void 0;
+      this._active = false;
+    }
+  }
+}
+function recordEffectScope(effect2, scope = activeEffectScope) {
+  if (scope && scope.active) {
+    scope.effects.push(effect2);
+  }
+}
+function getCurrentScope() {
+  return activeEffectScope;
+}
+let activeEffect;
+class ReactiveEffect {
+  constructor(fn, trigger2, scheduler, scope) {
+    this.fn = fn;
+    this.trigger = trigger2;
+    this.scheduler = scheduler;
+    this.active = true;
+    this.deps = [];
+    this._dirtyLevel = 4;
+    this._trackId = 0;
+    this._runnings = 0;
+    this._shouldSchedule = false;
+    this._depsLength = 0;
+    recordEffectScope(this, scope);
+  }
+  get dirty() {
+    if (this._dirtyLevel === 2 || this._dirtyLevel === 3) {
+      this._dirtyLevel = 1;
+      pauseTracking();
+      for (let i = 0; i < this._depsLength; i++) {
+        const dep = this.deps[i];
+        if (dep.computed) {
+          triggerComputed(dep.computed);
+          if (this._dirtyLevel >= 4) {
+            break;
+          }
+        }
+      }
+      if (this._dirtyLevel === 1) {
+        this._dirtyLevel = 0;
+      }
+      resetTracking();
+    }
+    return this._dirtyLevel >= 4;
+  }
+  set dirty(v) {
+    this._dirtyLevel = v ? 4 : 0;
+  }
+  run() {
+    this._dirtyLevel = 0;
+    if (!this.active) {
+      return this.fn();
+    }
+    let lastShouldTrack = shouldTrack;
+    let lastEffect = activeEffect;
+    try {
+      shouldTrack = true;
+      activeEffect = this;
+      this._runnings++;
+      preCleanupEffect(this);
+      return this.fn();
+    } finally {
+      postCleanupEffect(this);
+      this._runnings--;
+      activeEffect = lastEffect;
+      shouldTrack = lastShouldTrack;
+    }
+  }
+  stop() {
+    var _a;
+    if (this.active) {
+      preCleanupEffect(this);
+      postCleanupEffect(this);
+      (_a = this.onStop) == null ? void 0 : _a.call(this);
+      this.active = false;
+    }
+  }
+}
+function triggerComputed(computed2) {
+  return computed2.value;
+}
+function preCleanupEffect(effect2) {
+  effect2._trackId++;
+  effect2._depsLength = 0;
+}
+function postCleanupEffect(effect2) {
+  if (effect2.deps.length > effect2._depsLength) {
+    for (let i = effect2._depsLength; i < effect2.deps.length; i++) {
+      cleanupDepEffect(effect2.deps[i], effect2);
+    }
+    effect2.deps.length = effect2._depsLength;
+  }
+}
+function cleanupDepEffect(dep, effect2) {
+  const trackId = dep.get(effect2);
+  if (trackId !== void 0 && effect2._trackId !== trackId) {
+    dep.delete(effect2);
+    if (dep.size === 0) {
+      dep.cleanup();
+    }
+  }
+}
+let shouldTrack = true;
+let pauseScheduleStack = 0;
+const trackStack = [];
+function pauseTracking() {
+  trackStack.push(shouldTrack);
+  shouldTrack = false;
+}
+function resetTracking() {
+  const last = trackStack.pop();
+  shouldTrack = last === void 0 ? true : last;
+}
+function pauseScheduling() {
+  pauseScheduleStack++;
+}
+function resetScheduling() {
+  pauseScheduleStack--;
+  while (!pauseScheduleStack && queueEffectSchedulers.length) {
+    queueEffectSchedulers.shift()();
+  }
+}
+function trackEffect(effect2, dep, debuggerEventExtraInfo) {
+  var _a;
+  if (dep.get(effect2) !== effect2._trackId) {
+    dep.set(effect2, effect2._trackId);
+    const oldDep = effect2.deps[effect2._depsLength];
+    if (oldDep !== dep) {
+      if (oldDep) {
+        cleanupDepEffect(oldDep, effect2);
+      }
+      effect2.deps[effect2._depsLength++] = dep;
+    } else {
+      effect2._depsLength++;
+    }
+    {
+      (_a = effect2.onTrack) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+    }
+  }
+}
+const queueEffectSchedulers = [];
+function triggerEffects(dep, dirtyLevel, debuggerEventExtraInfo) {
+  var _a;
+  pauseScheduling();
+  for (const effect2 of dep.keys()) {
+    let tracking;
+    if (effect2._dirtyLevel < dirtyLevel && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
+      effect2._shouldSchedule || (effect2._shouldSchedule = effect2._dirtyLevel === 0);
+      effect2._dirtyLevel = dirtyLevel;
+    }
+    if (effect2._shouldSchedule && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
+      {
+        (_a = effect2.onTrigger) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+      }
+      effect2.trigger();
+      if ((!effect2._runnings || effect2.allowRecurse) && effect2._dirtyLevel !== 2) {
+        effect2._shouldSchedule = false;
+        if (effect2.scheduler) {
+          queueEffectSchedulers.push(effect2.scheduler);
+        }
+      }
+    }
+  }
+  resetScheduling();
+}
+const createDep = (cleanup, computed2) => {
+  const dep = /* @__PURE__ */ new Map();
+  dep.cleanup = cleanup;
+  dep.computed = computed2;
+  return dep;
+};
+const targetMap = /* @__PURE__ */ new WeakMap();
+const ITERATE_KEY = Symbol("iterate");
+const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate");
+function track(target, type, key) {
+  if (shouldTrack && activeEffect) {
+    let depsMap = targetMap.get(target);
+    if (!depsMap) {
+      targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
+    }
+    let dep = depsMap.get(key);
+    if (!dep) {
+      depsMap.set(key, dep = createDep(() => depsMap.delete(key)));
+    }
+    trackEffect(
+      activeEffect,
+      dep,
+      {
+        target,
+        type,
+        key
+      }
+    );
+  }
+}
+function trigger(target, type, key, newValue, oldValue, oldTarget) {
+  const depsMap = targetMap.get(target);
+  if (!depsMap) {
+    return;
+  }
+  let deps = [];
+  if (type === "clear") {
+    deps = [...depsMap.values()];
+  } else if (key === "length" && isArray(target)) {
+    const newLength = Number(newValue);
+    depsMap.forEach((dep, key2) => {
+      if (key2 === "length" || !isSymbol(key2) && key2 >= newLength) {
+        deps.push(dep);
+      }
+    });
+  } else {
+    if (key !== void 0) {
+      deps.push(depsMap.get(key));
+    }
+    switch (type) {
+      case "add":
+        if (!isArray(target)) {
+          deps.push(depsMap.get(ITERATE_KEY));
+          if (isMap(target)) {
+            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
+          }
+        } else if (isIntegerKey(key)) {
+          deps.push(depsMap.get("length"));
+        }
+        break;
+      case "delete":
+        if (!isArray(target)) {
+          deps.push(depsMap.get(ITERATE_KEY));
+          if (isMap(target)) {
+            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
+          }
+        }
+        break;
+      case "set":
+        if (isMap(target)) {
+          deps.push(depsMap.get(ITERATE_KEY));
+        }
+        break;
+    }
+  }
+  pauseScheduling();
+  for (const dep of deps) {
+    if (dep) {
+      triggerEffects(
+        dep,
+        4,
+        {
+          target,
+          type,
+          key,
+          newValue,
+          oldValue,
+          oldTarget
+        }
+      );
+    }
+  }
+  resetScheduling();
+}
+const isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`);
+const builtInSymbols = new Set(
+  /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol)
+);
+const arrayInstrumentations = /* @__PURE__ */ createArrayInstrumentations();
+function createArrayInstrumentations() {
+  const instrumentations = {};
+  ["includes", "indexOf", "lastIndexOf"].forEach((key) => {
+    instrumentations[key] = function(...args) {
+      const arr = toRaw(this);
+      for (let i = 0, l = this.length; i < l; i++) {
+        track(arr, "get", i + "");
+      }
+      const res = arr[key](...args);
+      if (res === -1 || res === false) {
+        return arr[key](...args.map(toRaw));
+      } else {
+        return res;
+      }
+    };
+  });
+  ["push", "pop", "shift", "unshift", "splice"].forEach((key) => {
+    instrumentations[key] = function(...args) {
+      pauseTracking();
+      pauseScheduling();
+      const res = toRaw(this)[key].apply(this, args);
+      resetScheduling();
+      resetTracking();
+      return res;
+    };
+  });
+  return instrumentations;
+}
+function hasOwnProperty(key) {
+  const obj = toRaw(this);
+  track(obj, "has", key);
+  return obj.hasOwnProperty(key);
+}
+class BaseReactiveHandler {
+  constructor(_isReadonly = false, _isShallow = false) {
+    this._isReadonly = _isReadonly;
+    this._isShallow = _isShallow;
+  }
+  get(target, key, receiver) {
+    const isReadonly2 = this._isReadonly, isShallow2 = this._isShallow;
+    if (key === "__v_isReactive") {
+      return !isReadonly2;
+    } else if (key === "__v_isReadonly") {
+      return isReadonly2;
+    } else if (key === "__v_isShallow") {
+      return isShallow2;
+    } else if (key === "__v_raw") {
+      if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
+      // this means the reciever is a user proxy of the reactive proxy
+      Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
+        return target;
+      }
+      return;
+    }
+    const targetIsArray = isArray(target);
+    if (!isReadonly2) {
+      if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
+        return Reflect.get(arrayInstrumentations, key, receiver);
+      }
+      if (key === "hasOwnProperty") {
+        return hasOwnProperty;
+      }
+    }
+    const res = Reflect.get(target, key, receiver);
+    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
+      return res;
+    }
+    if (!isReadonly2) {
+      track(target, "get", key);
+    }
+    if (isShallow2) {
+      return res;
+    }
+    if (isRef(res)) {
+      return targetIsArray && isIntegerKey(key) ? res : res.value;
+    }
+    if (isObject(res)) {
+      return isReadonly2 ? readonly(res) : reactive(res);
+    }
+    return res;
+  }
+}
+class MutableReactiveHandler extends BaseReactiveHandler {
+  constructor(isShallow2 = false) {
+    super(false, isShallow2);
+  }
+  set(target, key, value, receiver) {
+    let oldValue = target[key];
+    if (!this._isShallow) {
+      const isOldValueReadonly = isReadonly(oldValue);
+      if (!isShallow(value) && !isReadonly(value)) {
+        oldValue = toRaw(oldValue);
+        value = toRaw(value);
+      }
+      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
+        if (isOldValueReadonly) {
+          return false;
+        } else {
+          oldValue.value = value;
+          return true;
+        }
+      }
+    }
+    const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
+    const result = Reflect.set(target, key, value, receiver);
+    if (target === toRaw(receiver)) {
+      if (!hadKey) {
+        trigger(target, "add", key, value);
+      } else if (hasChanged(value, oldValue)) {
+        trigger(target, "set", key, value, oldValue);
+      }
+    }
+    return result;
+  }
+  deleteProperty(target, key) {
+    const hadKey = hasOwn(target, key);
+    const oldValue = target[key];
+    const result = Reflect.deleteProperty(target, key);
+    if (result && hadKey) {
+      trigger(target, "delete", key, void 0, oldValue);
+    }
+    return result;
+  }
+  has(target, key) {
+    const result = Reflect.has(target, key);
+    if (!isSymbol(key) || !builtInSymbols.has(key)) {
+      track(target, "has", key);
+    }
+    return result;
+  }
+  ownKeys(target) {
+    track(
+      target,
+      "iterate",
+      isArray(target) ? "length" : ITERATE_KEY
+    );
+    return Reflect.ownKeys(target);
+  }
+}
+class ReadonlyReactiveHandler extends BaseReactiveHandler {
+  constructor(isShallow2 = false) {
+    super(true, isShallow2);
+  }
+  set(target, key) {
+    {
+      warn$2(
+        `Set operation on key "${String(key)}" failed: target is readonly.`,
+        target
+      );
+    }
+    return true;
+  }
+  deleteProperty(target, key) {
+    {
+      warn$2(
+        `Delete operation on key "${String(key)}" failed: target is readonly.`,
+        target
+      );
+    }
+    return true;
+  }
+}
+const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
+const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
+const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
+  true
+);
+const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
+const toShallow = (value) => value;
+const getProto = (v) => Reflect.getPrototypeOf(v);
+function get(target, key, isReadonly2 = false, isShallow2 = false) {
+  target = target["__v_raw"];
+  const rawTarget = toRaw(target);
+  const rawKey = toRaw(key);
+  if (!isReadonly2) {
+    if (hasChanged(key, rawKey)) {
+      track(rawTarget, "get", key);
+    }
+    track(rawTarget, "get", rawKey);
+  }
+  const { has: has2 } = getProto(rawTarget);
+  const wrap = isShallow2 ? toShallow : isReadonly2 ? toReadonly : toReactive;
+  if (has2.call(rawTarget, key)) {
+    return wrap(target.get(key));
+  } else if (has2.call(rawTarget, rawKey)) {
+    return wrap(target.get(rawKey));
+  } else if (target !== rawTarget) {
+    target.get(key);
+  }
+}
+function has$1(key, isReadonly2 = false) {
+  const target = this["__v_raw"];
+  const rawTarget = toRaw(target);
+  const rawKey = toRaw(key);
+  if (!isReadonly2) {
+    if (hasChanged(key, rawKey)) {
+      track(rawTarget, "has", key);
+    }
+    track(rawTarget, "has", rawKey);
+  }
+  return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey);
+}
+function size(target, isReadonly2 = false) {
+  target = target["__v_raw"];
+  !isReadonly2 && track(toRaw(target), "iterate", ITERATE_KEY);
+  return Reflect.get(target, "size", target);
+}
+function add(value) {
+  value = toRaw(value);
+  const target = toRaw(this);
+  const proto = getProto(target);
+  const hadKey = proto.has.call(target, value);
+  if (!hadKey) {
+    target.add(value);
+    trigger(target, "add", value, value);
+  }
+  return this;
+}
+function set$1(key, value) {
+  value = toRaw(value);
+  const target = toRaw(this);
+  const { has: has2, get: get2 } = getProto(target);
+  let hadKey = has2.call(target, key);
+  if (!hadKey) {
+    key = toRaw(key);
+    hadKey = has2.call(target, key);
+  } else {
+    checkIdentityKeys(target, has2, key);
+  }
+  const oldValue = get2.call(target, key);
+  target.set(key, value);
+  if (!hadKey) {
+    trigger(target, "add", key, value);
+  } else if (hasChanged(value, oldValue)) {
+    trigger(target, "set", key, value, oldValue);
+  }
+  return this;
+}
+function deleteEntry(key) {
+  const target = toRaw(this);
+  const { has: has2, get: get2 } = getProto(target);
+  let hadKey = has2.call(target, key);
+  if (!hadKey) {
+    key = toRaw(key);
+    hadKey = has2.call(target, key);
+  } else {
+    checkIdentityKeys(target, has2, key);
+  }
+  const oldValue = get2 ? get2.call(target, key) : void 0;
+  const result = target.delete(key);
+  if (hadKey) {
+    trigger(target, "delete", key, void 0, oldValue);
+  }
+  return result;
+}
+function clear() {
+  const target = toRaw(this);
+  const hadItems = target.size !== 0;
+  const oldTarget = isMap(target) ? new Map(target) : new Set(target);
+  const result = target.clear();
+  if (hadItems) {
+    trigger(target, "clear", void 0, void 0, oldTarget);
+  }
+  return result;
+}
+function createForEach(isReadonly2, isShallow2) {
+  return function forEach(callback, thisArg) {
+    const observed = this;
+    const target = observed["__v_raw"];
+    const rawTarget = toRaw(target);
+    const wrap = isShallow2 ? toShallow : isReadonly2 ? toReadonly : toReactive;
+    !isReadonly2 && track(rawTarget, "iterate", ITERATE_KEY);
+    return target.forEach((value, key) => {
+      return callback.call(thisArg, wrap(value), wrap(key), observed);
+    });
+  };
+}
+function createIterableMethod(method, isReadonly2, isShallow2) {
+  return function(...args) {
+    const target = this["__v_raw"];
+    const rawTarget = toRaw(target);
+    const targetIsMap = isMap(rawTarget);
+    const isPair = method === "entries" || method === Symbol.iterator && targetIsMap;
+    const isKeyOnly = method === "keys" && targetIsMap;
+    const innerIterator = target[method](...args);
+    const wrap = isShallow2 ? toShallow : isReadonly2 ? toReadonly : toReactive;
+    !isReadonly2 && track(
+      rawTarget,
+      "iterate",
+      isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
+    );
+    return {
+      // iterator protocol
+      next() {
+        const { value, done } = innerIterator.next();
+        return done ? { value, done } : {
+          value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
+          done
+        };
+      },
+      // iterable protocol
+      [Symbol.iterator]() {
+        return this;
+      }
+    };
+  };
+}
+function createReadonlyMethod(type) {
+  return function(...args) {
+    {
+      const key = args[0] ? `on key "${args[0]}" ` : ``;
+      warn$2(
+        `${capitalize(type)} operation ${key}failed: target is readonly.`,
+        toRaw(this)
+      );
+    }
+    return type === "delete" ? false : type === "clear" ? void 0 : this;
+  };
+}
+function createInstrumentations() {
+  const mutableInstrumentations2 = {
+    get(key) {
+      return get(this, key);
+    },
+    get size() {
+      return size(this);
+    },
+    has: has$1,
+    add,
+    set: set$1,
+    delete: deleteEntry,
+    clear,
+    forEach: createForEach(false, false)
+  };
+  const shallowInstrumentations2 = {
+    get(key) {
+      return get(this, key, false, true);
+    },
+    get size() {
+      return size(this);
+    },
+    has: has$1,
+    add,
+    set: set$1,
+    delete: deleteEntry,
+    clear,
+    forEach: createForEach(false, true)
+  };
+  const readonlyInstrumentations2 = {
+    get(key) {
+      return get(this, key, true);
+    },
+    get size() {
+      return size(this, true);
+    },
+    has(key) {
+      return has$1.call(this, key, true);
+    },
+    add: createReadonlyMethod("add"),
+    set: createReadonlyMethod("set"),
+    delete: createReadonlyMethod("delete"),
+    clear: createReadonlyMethod("clear"),
+    forEach: createForEach(true, false)
+  };
+  const shallowReadonlyInstrumentations2 = {
+    get(key) {
+      return get(this, key, true, true);
+    },
+    get size() {
+      return size(this, true);
+    },
+    has(key) {
+      return has$1.call(this, key, true);
+    },
+    add: createReadonlyMethod("add"),
+    set: createReadonlyMethod("set"),
+    delete: createReadonlyMethod("delete"),
+    clear: createReadonlyMethod("clear"),
+    forEach: createForEach(true, true)
+  };
+  const iteratorMethods = [
+    "keys",
+    "values",
+    "entries",
+    Symbol.iterator
+  ];
+  iteratorMethods.forEach((method) => {
+    mutableInstrumentations2[method] = createIterableMethod(method, false, false);
+    readonlyInstrumentations2[method] = createIterableMethod(method, true, false);
+    shallowInstrumentations2[method] = createIterableMethod(method, false, true);
+    shallowReadonlyInstrumentations2[method] = createIterableMethod(
+      method,
+      true,
+      true
+    );
+  });
+  return [
+    mutableInstrumentations2,
+    readonlyInstrumentations2,
+    shallowInstrumentations2,
+    shallowReadonlyInstrumentations2
+  ];
+}
+const [
+  mutableInstrumentations,
+  readonlyInstrumentations,
+  shallowInstrumentations,
+  shallowReadonlyInstrumentations
+] = /* @__PURE__ */ createInstrumentations();
+function createInstrumentationGetter(isReadonly2, shallow) {
+  const instrumentations = shallow ? isReadonly2 ? shallowReadonlyInstrumentations : shallowInstrumentations : isReadonly2 ? readonlyInstrumentations : mutableInstrumentations;
+  return (target, key, receiver) => {
+    if (key === "__v_isReactive") {
+      return !isReadonly2;
+    } else if (key === "__v_isReadonly") {
+      return isReadonly2;
+    } else if (key === "__v_raw") {
+      return target;
+    }
+    return Reflect.get(
+      hasOwn(instrumentations, key) && key in target ? instrumentations : target,
+      key,
+      receiver
+    );
+  };
+}
+const mutableCollectionHandlers = {
+  get: /* @__PURE__ */ createInstrumentationGetter(false, false)
+};
+const shallowCollectionHandlers = {
+  get: /* @__PURE__ */ createInstrumentationGetter(false, true)
+};
+const readonlyCollectionHandlers = {
+  get: /* @__PURE__ */ createInstrumentationGetter(true, false)
+};
+const shallowReadonlyCollectionHandlers = {
+  get: /* @__PURE__ */ createInstrumentationGetter(true, true)
+};
+function checkIdentityKeys(target, has2, key) {
+  const rawKey = toRaw(key);
+  if (rawKey !== key && has2.call(target, rawKey)) {
+    const type = toRawType(target);
+    warn$2(
+      `Reactive ${type} contains both the raw and reactive versions of the same object${type === `Map` ? ` as keys` : ``}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`
+    );
+  }
+}
+const reactiveMap = /* @__PURE__ */ new WeakMap();
+const shallowReactiveMap = /* @__PURE__ */ new WeakMap();
+const readonlyMap = /* @__PURE__ */ new WeakMap();
+const shallowReadonlyMap = /* @__PURE__ */ new WeakMap();
+function targetTypeMap(rawType) {
+  switch (rawType) {
+    case "Object":
+    case "Array":
+      return 1;
+    case "Map":
+    case "Set":
+    case "WeakMap":
+    case "WeakSet":
+      return 2;
+    default:
+      return 0;
+  }
+}
+function getTargetType(value) {
+  return value["__v_skip"] || !Object.isExtensible(value) ? 0 : targetTypeMap(toRawType(value));
+}
+function reactive(target) {
+  if (isReadonly(target)) {
+    return target;
+  }
+  return createReactiveObject(
+    target,
+    false,
+    mutableHandlers,
+    mutableCollectionHandlers,
+    reactiveMap
+  );
+}
+function shallowReactive(target) {
+  return createReactiveObject(
+    target,
+    false,
+    shallowReactiveHandlers,
+    shallowCollectionHandlers,
+    shallowReactiveMap
+  );
+}
+function readonly(target) {
+  return createReactiveObject(
+    target,
+    true,
+    readonlyHandlers,
+    readonlyCollectionHandlers,
+    readonlyMap
+  );
+}
+function shallowReadonly(target) {
+  return createReactiveObject(
+    target,
+    true,
+    shallowReadonlyHandlers,
+    shallowReadonlyCollectionHandlers,
+    shallowReadonlyMap
+  );
+}
+function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {
+  if (!isObject(target)) {
+    {
+      warn$2(`value cannot be made reactive: ${String(target)}`);
+    }
+    return target;
+  }
+  if (target["__v_raw"] && !(isReadonly2 && target["__v_isReactive"])) {
+    return target;
+  }
+  const existingProxy = proxyMap.get(target);
+  if (existingProxy) {
+    return existingProxy;
+  }
+  const targetType = getTargetType(target);
+  if (targetType === 0) {
+    return target;
+  }
+  const proxy = new Proxy(
+    target,
+    targetType === 2 ? collectionHandlers : baseHandlers
+  );
+  proxyMap.set(target, proxy);
+  return proxy;
+}
+function isReactive(value) {
+  if (isReadonly(value)) {
+    return isReactive(value["__v_raw"]);
+  }
+  return !!(value && value["__v_isReactive"]);
+}
+function isReadonly(value) {
+  return !!(value && value["__v_isReadonly"]);
+}
+function isShallow(value) {
+  return !!(value && value["__v_isShallow"]);
+}
+function toRaw(observed) {
+  const raw = observed && observed["__v_raw"];
+  return raw ? toRaw(raw) : observed;
+}
+function markRaw(value) {
+  if (Object.isExtensible(value)) {
+    def(value, "__v_skip", true);
+  }
+  return value;
+}
+const toReactive = (value) => isObject(value) ? reactive(value) : value;
+const toReadonly = (value) => isObject(value) ? readonly(value) : value;
+const COMPUTED_SIDE_EFFECT_WARN = `Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided.  Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free`;
+class ComputedRefImpl {
+  constructor(getter, _setter, isReadonly2, isSSR) {
+    this.getter = getter;
+    this._setter = _setter;
+    this.dep = void 0;
+    this.__v_isRef = true;
+    this["__v_isReadonly"] = false;
+    this.effect = new ReactiveEffect(
+      () => getter(this._value),
+      () => triggerRefValue(
+        this,
+        this.effect._dirtyLevel === 2 ? 2 : 3
+      )
+    );
+    this.effect.computed = this;
+    this.effect.active = this._cacheable = !isSSR;
+    this["__v_isReadonly"] = isReadonly2;
+  }
+  get value() {
+    const self = toRaw(this);
+    if ((!self._cacheable || self.effect.dirty) && hasChanged(self._value, self._value = self.effect.run())) {
+      triggerRefValue(self, 4);
+    }
+    trackRefValue(self);
+    if (self.effect._dirtyLevel >= 2) {
+      if (this._warnRecursive) {
+        warn$2(COMPUTED_SIDE_EFFECT_WARN, `
+
+getter: `, this.getter);
+      }
+      triggerRefValue(self, 2);
+    }
+    return self._value;
+  }
+  set value(newValue) {
+    this._setter(newValue);
+  }
+  // #region polyfill _dirty for backward compatibility third party code for Vue <= 3.3.x
+  get _dirty() {
+    return this.effect.dirty;
+  }
+  set _dirty(v) {
+    this.effect.dirty = v;
+  }
+  // #endregion
+}
+function computed$1(getterOrOptions, debugOptions, isSSR = false) {
+  let getter;
+  let setter;
+  const onlyGetter = isFunction(getterOrOptions);
+  if (onlyGetter) {
+    getter = getterOrOptions;
+    setter = () => {
+      warn$2("Write operation failed: computed value is readonly");
+    };
+  } else {
+    getter = getterOrOptions.get;
+    setter = getterOrOptions.set;
+  }
+  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
+  if (debugOptions && !isSSR) {
+    cRef.effect.onTrack = debugOptions.onTrack;
+    cRef.effect.onTrigger = debugOptions.onTrigger;
+  }
+  return cRef;
+}
+function trackRefValue(ref2) {
+  var _a;
+  if (shouldTrack && activeEffect) {
+    ref2 = toRaw(ref2);
+    trackEffect(
+      activeEffect,
+      (_a = ref2.dep) != null ? _a : ref2.dep = createDep(
+        () => ref2.dep = void 0,
+        ref2 instanceof ComputedRefImpl ? ref2 : void 0
+      ),
+      {
+        target: ref2,
+        type: "get",
+        key: "value"
+      }
+    );
+  }
+}
+function triggerRefValue(ref2, dirtyLevel = 4, newVal) {
+  ref2 = toRaw(ref2);
+  const dep = ref2.dep;
+  if (dep) {
+    triggerEffects(
+      dep,
+      dirtyLevel,
+      {
+        target: ref2,
+        type: "set",
+        key: "value",
+        newValue: newVal
+      }
+    );
+  }
+}
+function isRef(r2) {
+  return !!(r2 && r2.__v_isRef === true);
+}
+function ref(value) {
+  return createRef(value, false);
+}
+function createRef(rawValue, shallow) {
+  if (isRef(rawValue)) {
+    return rawValue;
+  }
+  return new RefImpl(rawValue, shallow);
+}
+class RefImpl {
+  constructor(value, __v_isShallow) {
+    this.__v_isShallow = __v_isShallow;
+    this.dep = void 0;
+    this.__v_isRef = true;
+    this._rawValue = __v_isShallow ? value : toRaw(value);
+    this._value = __v_isShallow ? value : toReactive(value);
+  }
+  get value() {
+    trackRefValue(this);
+    return this._value;
+  }
+  set value(newVal) {
+    const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
+    newVal = useDirectValue ? newVal : toRaw(newVal);
+    if (hasChanged(newVal, this._rawValue)) {
+      this._rawValue = newVal;
+      this._value = useDirectValue ? newVal : toReactive(newVal);
+      triggerRefValue(this, 4, newVal);
+    }
+  }
+}
+function unref(ref2) {
+  return isRef(ref2) ? ref2.value : ref2;
+}
+const shallowUnwrapHandlers = {
+  get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
+  set: (target, key, value, receiver) => {
+    const oldValue = target[key];
+    if (isRef(oldValue) && !isRef(value)) {
+      oldValue.value = value;
+      return true;
+    } else {
+      return Reflect.set(target, key, value, receiver);
+    }
+  }
+};
+function proxyRefs(objectWithRefs) {
+  return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);
+}
+const stack = [];
+function pushWarningContext(vnode) {
+  stack.push(vnode);
+}
+function popWarningContext() {
+  stack.pop();
+}
+function warn$1(msg, ...args) {
+  pauseTracking();
+  const instance = stack.length ? stack[stack.length - 1].component : null;
+  const appWarnHandler = instance && instance.appContext.config.warnHandler;
+  const trace = getComponentTrace();
+  if (appWarnHandler) {
+    callWithErrorHandling(
+      appWarnHandler,
+      instance,
+      11,
+      [
+        msg + args.map((a) => {
+          var _a, _b;
+          return (_b = (_a = a.toString) == null ? void 0 : _a.call(a)) != null ? _b : JSON.stringify(a);
+        }).join(""),
+        instance && instance.proxy,
+        trace.map(
+          ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`
+        ).join("\n"),
+        trace
+      ]
+    );
+  } else {
+    const warnArgs = [`[Vue warn]: ${msg}`, ...args];
+    if (trace.length && // avoid spamming console during tests
+    true) {
+      warnArgs.push(`
+`, ...formatTrace(trace));
+    }
+    console.warn(...warnArgs);
+  }
+  resetTracking();
+}
+function getComponentTrace() {
+  let currentVNode = stack[stack.length - 1];
+  if (!currentVNode) {
+    return [];
+  }
+  const normalizedStack = [];
+  while (currentVNode) {
+    const last = normalizedStack[0];
+    if (last && last.vnode === currentVNode) {
+      last.recurseCount++;
+    } else {
+      normalizedStack.push({
+        vnode: currentVNode,
+        recurseCount: 0
+      });
+    }
+    const parentInstance = currentVNode.component && currentVNode.component.parent;
+    currentVNode = parentInstance && parentInstance.vnode;
+  }
+  return normalizedStack;
+}
+function formatTrace(trace) {
+  const logs = [];
+  trace.forEach((entry, i) => {
+    logs.push(...i === 0 ? [] : [`
+`], ...formatTraceEntry(entry));
+  });
+  return logs;
+}
+function formatTraceEntry({ vnode, recurseCount }) {
+  const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;
+  const isRoot = vnode.component ? vnode.component.parent == null : false;
+  const open = ` at <${formatComponentName(
+    vnode.component,
+    vnode.type,
+    isRoot
+  )}`;
+  const close = `>` + postfix;
+  return vnode.props ? [open, ...formatProps(vnode.props), close] : [open + close];
+}
+function formatProps(props) {
+  const res = [];
+  const keys = Object.keys(props);
+  keys.slice(0, 3).forEach((key) => {
+    res.push(...formatProp(key, props[key]));
+  });
+  if (keys.length > 3) {
+    res.push(` ...`);
+  }
+  return res;
+}
+function formatProp(key, value, raw) {
+  if (isString(value)) {
+    value = JSON.stringify(value);
+    return raw ? value : [`${key}=${value}`];
+  } else if (typeof value === "number" || typeof value === "boolean" || value == null) {
+    return raw ? value : [`${key}=${value}`];
+  } else if (isRef(value)) {
+    value = formatProp(key, toRaw(value.value), true);
+    return raw ? value : [`${key}=Ref<`, value, `>`];
+  } else if (isFunction(value)) {
+    return [`${key}=fn${value.name ? `<${value.name}>` : ``}`];
+  } else {
+    value = toRaw(value);
+    return raw ? value : [`${key}=`, value];
+  }
+}
+const ErrorTypeStrings = {
+  ["sp"]: "serverPrefetch hook",
+  ["bc"]: "beforeCreate hook",
+  ["c"]: "created hook",
+  ["bm"]: "beforeMount hook",
+  ["m"]: "mounted hook",
+  ["bu"]: "beforeUpdate hook",
+  ["u"]: "updated",
+  ["bum"]: "beforeUnmount hook",
+  ["um"]: "unmounted hook",
+  ["a"]: "activated hook",
+  ["da"]: "deactivated hook",
+  ["ec"]: "errorCaptured hook",
+  ["rtc"]: "renderTracked hook",
+  ["rtg"]: "renderTriggered hook",
+  [0]: "setup function",
+  [1]: "render function",
+  [2]: "watcher getter",
+  [3]: "watcher callback",
+  [4]: "watcher cleanup function",
+  [5]: "native event handler",
+  [6]: "component event handler",
+  [7]: "vnode hook",
+  [8]: "directive hook",
+  [9]: "transition hook",
+  [10]: "app errorHandler",
+  [11]: "app warnHandler",
+  [12]: "ref function",
+  [13]: "async component loader",
+  [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core ."
+};
+function callWithErrorHandling(fn, instance, type, args) {
+  try {
+    return args ? fn(...args) : fn();
+  } catch (err) {
+    handleError(err, instance, type);
+  }
+}
+function callWithAsyncErrorHandling(fn, instance, type, args) {
+  if (isFunction(fn)) {
+    const res = callWithErrorHandling(fn, instance, type, args);
+    if (res && isPromise(res)) {
+      res.catch((err) => {
+        handleError(err, instance, type);
+      });
+    }
+    return res;
+  }
+  const values = [];
+  for (let i = 0; i < fn.length; i++) {
+    values.push(callWithAsyncErrorHandling(fn[i], instance, type, args));
+  }
+  return values;
+}
+function handleError(err, instance, type, throwInDev = true) {
+  const contextVNode = instance ? instance.vnode : null;
+  if (instance) {
+    let cur = instance.parent;
+    const exposedInstance = instance.proxy;
+    const errorInfo = ErrorTypeStrings[type] || type;
+    while (cur) {
+      const errorCapturedHooks = cur.ec;
+      if (errorCapturedHooks) {
+        for (let i = 0; i < errorCapturedHooks.length; i++) {
+          if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) {
+            return;
+          }
+        }
+      }
+      cur = cur.parent;
+    }
+    const appErrorHandler = instance.appContext.config.errorHandler;
+    if (appErrorHandler) {
+      callWithErrorHandling(
+        appErrorHandler,
+        null,
+        10,
+        [err, exposedInstance, errorInfo]
+      );
+      return;
+    }
+  }
+  logError(err, type, contextVNode, throwInDev);
+}
+function logError(err, type, contextVNode, throwInDev = true) {
+  {
+    const info = ErrorTypeStrings[type] || type;
+    if (contextVNode) {
+      pushWarningContext(contextVNode);
+    }
+    warn$1(`Unhandled error${info ? ` during execution of ${info}` : ``}`);
+    if (contextVNode) {
+      popWarningContext();
+    }
+    if (throwInDev) {
+      console.error(err);
+    } else {
+      console.error(err);
+    }
+  }
+}
+let isFlushing = false;
+let isFlushPending = false;
+const queue$1 = [];
+let flushIndex = 0;
+const pendingPostFlushCbs = [];
+let activePostFlushCbs = null;
+let postFlushIndex = 0;
+const resolvedPromise = /* @__PURE__ */ Promise.resolve();
+let currentFlushPromise = null;
+const RECURSION_LIMIT = 100;
+function nextTick$1(fn) {
+  const p2 = currentFlushPromise || resolvedPromise;
+  return fn ? p2.then(this ? fn.bind(this) : fn) : p2;
+}
+function findInsertionIndex(id) {
+  let start = flushIndex + 1;
+  let end = queue$1.length;
+  while (start < end) {
+    const middle = start + end >>> 1;
+    const middleJob = queue$1[middle];
+    const middleJobId = getId(middleJob);
+    if (middleJobId < id || middleJobId === id && middleJob.pre) {
+      start = middle + 1;
+    } else {
+      end = middle;
+    }
+  }
+  return start;
+}
+function queueJob(job) {
+  if (!queue$1.length || !queue$1.includes(
+    job,
+    isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
+  )) {
+    if (job.id == null) {
+      queue$1.push(job);
+    } else {
+      queue$1.splice(findInsertionIndex(job.id), 0, job);
+    }
+    queueFlush();
+  }
+}
+function queueFlush() {
+  if (!isFlushing && !isFlushPending) {
+    isFlushPending = true;
+    currentFlushPromise = resolvedPromise.then(flushJobs);
+  }
+}
+function hasQueueJob(job) {
+  return queue$1.indexOf(job) > -1;
+}
+function invalidateJob(job) {
+  const i = queue$1.indexOf(job);
+  if (i > flushIndex) {
+    queue$1.splice(i, 1);
+  }
+}
+function queuePostFlushCb(cb) {
+  if (!isArray(cb)) {
+    if (!activePostFlushCbs || !activePostFlushCbs.includes(
+      cb,
+      cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex
+    )) {
+      pendingPostFlushCbs.push(cb);
+    }
+  } else {
+    pendingPostFlushCbs.push(...cb);
+  }
+  queueFlush();
+}
+function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
+  {
+    seen = seen || /* @__PURE__ */ new Map();
+  }
+  for (; i < queue$1.length; i++) {
+    const cb = queue$1[i];
+    if (cb && cb.pre) {
+      if (checkRecursiveUpdates(seen, cb)) {
+        continue;
+      }
+      queue$1.splice(i, 1);
+      i--;
+      cb();
+    }
+  }
+}
+function flushPostFlushCbs(seen) {
+  if (pendingPostFlushCbs.length) {
+    const deduped = [...new Set(pendingPostFlushCbs)].sort(
+      (a, b) => getId(a) - getId(b)
+    );
+    pendingPostFlushCbs.length = 0;
+    if (activePostFlushCbs) {
+      activePostFlushCbs.push(...deduped);
+      return;
+    }
+    activePostFlushCbs = deduped;
+    {
+      seen = seen || /* @__PURE__ */ new Map();
+    }
+    for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
+      if (checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) {
+        continue;
+      }
+      activePostFlushCbs[postFlushIndex]();
+    }
+    activePostFlushCbs = null;
+    postFlushIndex = 0;
+  }
+}
+const getId = (job) => job.id == null ? Infinity : job.id;
+const comparator = (a, b) => {
+  const diff2 = getId(a) - getId(b);
+  if (diff2 === 0) {
+    if (a.pre && !b.pre)
+      return -1;
+    if (b.pre && !a.pre)
+      return 1;
+  }
+  return diff2;
+};
+function flushJobs(seen) {
+  isFlushPending = false;
+  isFlushing = true;
+  {
+    seen = seen || /* @__PURE__ */ new Map();
+  }
+  queue$1.sort(comparator);
+  const check = (job) => checkRecursiveUpdates(seen, job);
+  try {
+    for (flushIndex = 0; flushIndex < queue$1.length; flushIndex++) {
+      const job = queue$1[flushIndex];
+      if (job && job.active !== false) {
+        if (check(job)) {
+          continue;
+        }
+        callWithErrorHandling(job, null, 14);
+      }
+    }
+  } finally {
+    flushIndex = 0;
+    queue$1.length = 0;
+    flushPostFlushCbs(seen);
+    isFlushing = false;
+    currentFlushPromise = null;
+    if (queue$1.length || pendingPostFlushCbs.length) {
+      flushJobs(seen);
+    }
+  }
+}
+function checkRecursiveUpdates(seen, fn) {
+  if (!seen.has(fn)) {
+    seen.set(fn, 1);
+  } else {
+    const count = seen.get(fn);
+    if (count > RECURSION_LIMIT) {
+      const instance = fn.ownerInstance;
+      const componentName = instance && getComponentName(instance.type);
+      handleError(
+        `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
+        null,
+        10
+      );
+      return true;
+    } else {
+      seen.set(fn, count + 1);
+    }
+  }
+}
+let devtools;
+let buffer = [];
+let devtoolsNotInstalled = false;
+function emit$1(event, ...args) {
+  if (devtools) {
+    devtools.emit(event, ...args);
+  } else if (!devtoolsNotInstalled) {
+    buffer.push({ event, args });
+  }
+}
+function setDevtoolsHook(hook, target) {
+  var _a, _b;
+  devtools = hook;
+  if (devtools) {
+    devtools.enabled = true;
+    buffer.forEach(({ event, args }) => devtools.emit(event, ...args));
+    buffer = [];
+  } else if (
+    // handle late devtools injection - only do this if we are in an actual
+    // browser environment to avoid the timer handle stalling test runner exit
+    // (#4815)
+    typeof window !== "undefined" && // some envs mock window but not fully
+    window.HTMLElement && // also exclude jsdom
+    !((_b = (_a = window.navigator) == null ? void 0 : _a.userAgent) == null ? void 0 : _b.includes("jsdom"))
+  ) {
+    const replay = target.__VUE_DEVTOOLS_HOOK_REPLAY__ = target.__VUE_DEVTOOLS_HOOK_REPLAY__ || [];
+    replay.push((newHook) => {
+      setDevtoolsHook(newHook, target);
+    });
+    setTimeout(() => {
+      if (!devtools) {
+        target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;
+        devtoolsNotInstalled = true;
+        buffer = [];
+      }
+    }, 3e3);
+  } else {
+    devtoolsNotInstalled = true;
+    buffer = [];
+  }
+}
+function devtoolsInitApp(app, version2) {
+  emit$1("app:init", app, version2, {
+    Fragment,
+    Text,
+    Comment,
+    Static
+  });
+}
+const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
+  "component:added"
+  /* COMPONENT_ADDED */
+);
+const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook(
+  "component:updated"
+  /* COMPONENT_UPDATED */
+);
+const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
+  "component:removed"
+  /* COMPONENT_REMOVED */
+);
+const devtoolsComponentRemoved = (component) => {
+  if (devtools && typeof devtools.cleanupBuffer === "function" && // remove the component if it wasn't buffered
+  !devtools.cleanupBuffer(component)) {
+    _devtoolsComponentRemoved(component);
+  }
+};
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function createDevtoolsComponentHook(hook) {
+  return (component) => {
+    emit$1(
+      hook,
+      component.appContext.app,
+      component.uid,
+      // fixed by xxxxxx
+      // 为 0 是 App,无 parent 是 Page 指向 App
+      component.uid === 0 ? void 0 : component.parent ? component.parent.uid : 0,
+      component
+    );
+  };
+}
+const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
+  "perf:start"
+  /* PERFORMANCE_START */
+);
+const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
+  "perf:end"
+  /* PERFORMANCE_END */
+);
+function createDevtoolsPerformanceHook(hook) {
+  return (component, type, time) => {
+    emit$1(hook, component.appContext.app, component.uid, component, type, time);
+  };
+}
+function devtoolsComponentEmit(component, event, params) {
+  emit$1(
+    "component:emit",
+    component.appContext.app,
+    component,
+    event,
+    params
+  );
+}
+function emit(instance, event, ...rawArgs) {
+  if (instance.isUnmounted)
+    return;
+  const props = instance.vnode.props || EMPTY_OBJ;
+  {
+    const {
+      emitsOptions,
+      propsOptions: [propsOptions]
+    } = instance;
+    if (emitsOptions) {
+      if (!(event in emitsOptions) && true) {
+        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+          warn$1(
+            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
+          );
+        }
+      } else {
+        const validator = emitsOptions[event];
+        if (isFunction(validator)) {
+          const isValid = validator(...rawArgs);
+          if (!isValid) {
+            warn$1(
+              `Invalid event arguments: event validation failed for event "${event}".`
+            );
+          }
+        }
+      }
+    }
+  }
+  let args = rawArgs;
+  const isModelListener2 = event.startsWith("update:");
+  const modelArg = isModelListener2 && event.slice(7);
+  if (modelArg && modelArg in props) {
+    const modifiersKey = `${modelArg === "modelValue" ? "model" : modelArg}Modifiers`;
+    const { number, trim } = props[modifiersKey] || EMPTY_OBJ;
+    if (trim) {
+      args = rawArgs.map((a) => isString(a) ? a.trim() : a);
+    }
+    if (number) {
+      args = rawArgs.map(looseToNumber);
+    }
+  }
+  {
+    devtoolsComponentEmit(instance, event, args);
+  }
+  {
+    const lowerCaseEvent = event.toLowerCase();
+    if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
+      warn$1(
+        `Event "${lowerCaseEvent}" is emitted in component ${formatComponentName(
+          instance,
+          instance.type
+        )} but the handler is registered for "${event}". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "${hyphenate(
+          event
+        )}" instead of "${event}".`
+      );
+    }
+  }
+  let handlerName;
+  let handler = props[handlerName = toHandlerKey(event)] || // also try camelCase event handler (#2249)
+  props[handlerName = toHandlerKey(camelize(event))];
+  if (!handler && isModelListener2) {
+    handler = props[handlerName = toHandlerKey(hyphenate(event))];
+  }
+  if (handler) {
+    callWithAsyncErrorHandling(
+      handler,
+      instance,
+      6,
+      args
+    );
+  }
+  const onceHandler = props[handlerName + `Once`];
+  if (onceHandler) {
+    if (!instance.emitted) {
+      instance.emitted = {};
+    } else if (instance.emitted[handlerName]) {
+      return;
+    }
+    instance.emitted[handlerName] = true;
+    callWithAsyncErrorHandling(
+      onceHandler,
+      instance,
+      6,
+      args
+    );
+  }
+}
+function normalizeEmitsOptions(comp, appContext, asMixin = false) {
+  const cache = appContext.emitsCache;
+  const cached = cache.get(comp);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const raw = comp.emits;
+  let normalized = {};
+  let hasExtends = false;
+  if (!isFunction(comp)) {
+    const extendEmits = (raw2) => {
+      const normalizedFromExtend = normalizeEmitsOptions(raw2, appContext, true);
+      if (normalizedFromExtend) {
+        hasExtends = true;
+        extend(normalized, normalizedFromExtend);
+      }
+    };
+    if (!asMixin && appContext.mixins.length) {
+      appContext.mixins.forEach(extendEmits);
+    }
+    if (comp.extends) {
+      extendEmits(comp.extends);
+    }
+    if (comp.mixins) {
+      comp.mixins.forEach(extendEmits);
+    }
+  }
+  if (!raw && !hasExtends) {
+    if (isObject(comp)) {
+      cache.set(comp, null);
+    }
+    return null;
+  }
+  if (isArray(raw)) {
+    raw.forEach((key) => normalized[key] = null);
+  } else {
+    extend(normalized, raw);
+  }
+  if (isObject(comp)) {
+    cache.set(comp, normalized);
+  }
+  return normalized;
+}
+function isEmitListener(options, key) {
+  if (!options || !isOn(key)) {
+    return false;
+  }
+  key = key.slice(2).replace(/Once$/, "");
+  return hasOwn(options, key[0].toLowerCase() + key.slice(1)) || hasOwn(options, hyphenate(key)) || hasOwn(options, key);
+}
+let currentRenderingInstance = null;
+function setCurrentRenderingInstance(instance) {
+  const prev = currentRenderingInstance;
+  currentRenderingInstance = instance;
+  instance && instance.type.__scopeId || null;
+  return prev;
+}
+const INITIAL_WATCHER_VALUE = {};
+function watch(source, cb, options) {
+  if (!isFunction(cb)) {
+    warn$1(
+      `\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`
+    );
+  }
+  return doWatch(source, cb, options);
+}
+function doWatch(source, cb, {
+  immediate,
+  deep,
+  flush,
+  once: once2,
+  onTrack,
+  onTrigger
+} = EMPTY_OBJ) {
+  if (cb && once2) {
+    const _cb = cb;
+    cb = (...args) => {
+      _cb(...args);
+      unwatch();
+    };
+  }
+  if (deep !== void 0 && typeof deep === "number") {
+    warn$1(
+      `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
+    );
+  }
+  if (!cb) {
+    if (immediate !== void 0) {
+      warn$1(
+        `watch() "immediate" option is only respected when using the watch(source, callback, options?) signature.`
+      );
+    }
+    if (deep !== void 0) {
+      warn$1(
+        `watch() "deep" option is only respected when using the watch(source, callback, options?) signature.`
+      );
+    }
+    if (once2 !== void 0) {
+      warn$1(
+        `watch() "once" option is only respected when using the watch(source, callback, options?) signature.`
+      );
+    }
+  }
+  const warnInvalidSource = (s2) => {
+    warn$1(
+      `Invalid watch source: `,
+      s2,
+      `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
+    );
+  };
+  const instance = currentInstance;
+  const reactiveGetter = (source2) => deep === true ? source2 : (
+    // for deep: false, only traverse root-level properties
+    traverse(source2, deep === false ? 1 : void 0)
+  );
+  let getter;
+  let forceTrigger = false;
+  let isMultiSource = false;
+  if (isRef(source)) {
+    getter = () => source.value;
+    forceTrigger = isShallow(source);
+  } else if (isReactive(source)) {
+    getter = () => reactiveGetter(source);
+    forceTrigger = true;
+  } else if (isArray(source)) {
+    isMultiSource = true;
+    forceTrigger = source.some((s2) => isReactive(s2) || isShallow(s2));
+    getter = () => source.map((s2) => {
+      if (isRef(s2)) {
+        return s2.value;
+      } else if (isReactive(s2)) {
+        return reactiveGetter(s2);
+      } else if (isFunction(s2)) {
+        return callWithErrorHandling(s2, instance, 2);
+      } else {
+        warnInvalidSource(s2);
+      }
+    });
+  } else if (isFunction(source)) {
+    if (cb) {
+      getter = () => callWithErrorHandling(source, instance, 2);
+    } else {
+      getter = () => {
+        if (cleanup) {
+          cleanup();
+        }
+        return callWithAsyncErrorHandling(
+          source,
+          instance,
+          3,
+          [onCleanup]
+        );
+      };
+    }
+  } else {
+    getter = NOOP;
+    warnInvalidSource(source);
+  }
+  if (cb && deep) {
+    const baseGetter = getter;
+    getter = () => traverse(baseGetter());
+  }
+  let cleanup;
+  let onCleanup = (fn) => {
+    cleanup = effect2.onStop = () => {
+      callWithErrorHandling(fn, instance, 4);
+      cleanup = effect2.onStop = void 0;
+    };
+  };
+  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+  const job = () => {
+    if (!effect2.active || !effect2.dirty) {
+      return;
+    }
+    if (cb) {
+      const newValue = effect2.run();
+      if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue)) || false) {
+        if (cleanup) {
+          cleanup();
+        }
+        callWithAsyncErrorHandling(cb, instance, 3, [
+          newValue,
+          // pass undefined as the old value when it's changed for the first time
+          oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+          onCleanup
+        ]);
+        oldValue = newValue;
+      }
+    } else {
+      effect2.run();
+    }
+  };
+  job.allowRecurse = !!cb;
+  let scheduler;
+  if (flush === "sync") {
+    scheduler = job;
+  } else if (flush === "post") {
+    scheduler = () => queuePostRenderEffect$1(job, instance && instance.suspense);
+  } else {
+    job.pre = true;
+    if (instance)
+      job.id = instance.uid;
+    scheduler = () => queueJob(job);
+  }
+  const effect2 = new ReactiveEffect(getter, NOOP, scheduler);
+  const scope = getCurrentScope();
+  const unwatch = () => {
+    effect2.stop();
+    if (scope) {
+      remove(scope.effects, effect2);
+    }
+  };
+  {
+    effect2.onTrack = onTrack;
+    effect2.onTrigger = onTrigger;
+  }
+  if (cb) {
+    if (immediate) {
+      job();
+    } else {
+      oldValue = effect2.run();
+    }
+  } else if (flush === "post") {
+    queuePostRenderEffect$1(
+      effect2.run.bind(effect2),
+      instance && instance.suspense
+    );
+  } else {
+    effect2.run();
+  }
+  return unwatch;
+}
+function instanceWatch(source, value, options) {
+  const publicThis = this.proxy;
+  const getter = isString(source) ? source.includes(".") ? createPathGetter(publicThis, source) : () => publicThis[source] : source.bind(publicThis, publicThis);
+  let cb;
+  if (isFunction(value)) {
+    cb = value;
+  } else {
+    cb = value.handler;
+    options = value;
+  }
+  const reset = setCurrentInstance(this);
+  const res = doWatch(getter, cb.bind(publicThis), options);
+  reset();
+  return res;
+}
+function createPathGetter(ctx, path) {
+  const segments = path.split(".");
+  return () => {
+    let cur = ctx;
+    for (let i = 0; i < segments.length && cur; i++) {
+      cur = cur[segments[i]];
+    }
+    return cur;
+  };
+}
+function traverse(value, depth, currentDepth = 0, seen) {
+  if (!isObject(value) || value["__v_skip"]) {
+    return value;
+  }
+  if (depth && depth > 0) {
+    if (currentDepth >= depth) {
+      return value;
+    }
+    currentDepth++;
+  }
+  seen = seen || /* @__PURE__ */ new Set();
+  if (seen.has(value)) {
+    return value;
+  }
+  seen.add(value);
+  if (isRef(value)) {
+    traverse(value.value, depth, currentDepth, seen);
+  } else if (isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      traverse(value[i], depth, currentDepth, seen);
+    }
+  } else if (isSet(value) || isMap(value)) {
+    value.forEach((v) => {
+      traverse(v, depth, currentDepth, seen);
+    });
+  } else if (isPlainObject(value)) {
+    for (const key in value) {
+      traverse(value[key], depth, currentDepth, seen);
+    }
+  }
+  return value;
+}
+function validateDirectiveName(name) {
+  if (isBuiltInDirective(name)) {
+    warn$1("Do not use built-in directive ids as custom directive id: " + name);
+  }
+}
+function createAppContext() {
+  return {
+    app: null,
+    config: {
+      isNativeTag: NO,
+      performance: false,
+      globalProperties: {},
+      optionMergeStrategies: {},
+      errorHandler: void 0,
+      warnHandler: void 0,
+      compilerOptions: {}
+    },
+    mixins: [],
+    components: {},
+    directives: {},
+    provides: /* @__PURE__ */ Object.create(null),
+    optionsCache: /* @__PURE__ */ new WeakMap(),
+    propsCache: /* @__PURE__ */ new WeakMap(),
+    emitsCache: /* @__PURE__ */ new WeakMap()
+  };
+}
+let uid$1 = 0;
+function createAppAPI(render, hydrate) {
+  return function createApp2(rootComponent, rootProps = null) {
+    if (!isFunction(rootComponent)) {
+      rootComponent = extend({}, rootComponent);
+    }
+    if (rootProps != null && !isObject(rootProps)) {
+      warn$1(`root props passed to app.mount() must be an object.`);
+      rootProps = null;
+    }
+    const context = createAppContext();
+    const installedPlugins = /* @__PURE__ */ new WeakSet();
+    const app = context.app = {
+      _uid: uid$1++,
+      _component: rootComponent,
+      _props: rootProps,
+      _container: null,
+      _context: context,
+      _instance: null,
+      version,
+      get config() {
+        return context.config;
+      },
+      set config(v) {
+        {
+          warn$1(
+            `app.config cannot be replaced. Modify individual options instead.`
+          );
+        }
+      },
+      use(plugin2, ...options) {
+        if (installedPlugins.has(plugin2)) {
+          warn$1(`Plugin has already been applied to target app.`);
+        } else if (plugin2 && isFunction(plugin2.install)) {
+          installedPlugins.add(plugin2);
+          plugin2.install(app, ...options);
+        } else if (isFunction(plugin2)) {
+          installedPlugins.add(plugin2);
+          plugin2(app, ...options);
+        } else {
+          warn$1(
+            `A plugin must either be a function or an object with an "install" function.`
+          );
+        }
+        return app;
+      },
+      mixin(mixin) {
+        {
+          if (!context.mixins.includes(mixin)) {
+            context.mixins.push(mixin);
+          } else {
+            warn$1(
+              "Mixin has already been applied to target app" + (mixin.name ? `: ${mixin.name}` : "")
+            );
+          }
+        }
+        return app;
+      },
+      component(name, component) {
+        {
+          validateComponentName(name, context.config);
+        }
+        if (!component) {
+          return context.components[name];
+        }
+        if (context.components[name]) {
+          warn$1(`Component "${name}" has already been registered in target app.`);
+        }
+        context.components[name] = component;
+        return app;
+      },
+      directive(name, directive) {
+        {
+          validateDirectiveName(name);
+        }
+        if (!directive) {
+          return context.directives[name];
+        }
+        if (context.directives[name]) {
+          warn$1(`Directive "${name}" has already been registered in target app.`);
+        }
+        context.directives[name] = directive;
+        return app;
+      },
+      // fixed by xxxxxx
+      mount() {
+      },
+      // fixed by xxxxxx
+      unmount() {
+      },
+      provide(key, value) {
+        if (key in context.provides) {
+          warn$1(
+            `App already provides property with key "${String(key)}". It will be overwritten with the new value.`
+          );
+        }
+        context.provides[key] = value;
+        return app;
+      },
+      runWithContext(fn) {
+        const lastApp = currentApp;
+        currentApp = app;
+        try {
+          return fn();
+        } finally {
+          currentApp = lastApp;
+        }
+      }
+    };
+    return app;
+  };
+}
+let currentApp = null;
+function provide(key, value) {
+  if (!currentInstance) {
+    {
+      warn$1(`provide() can only be used inside setup().`);
+    }
+  } else {
+    let provides = currentInstance.provides;
+    const parentProvides = currentInstance.parent && currentInstance.parent.provides;
+    if (parentProvides === provides) {
+      provides = currentInstance.provides = Object.create(parentProvides);
+    }
+    provides[key] = value;
+    if (currentInstance.type.mpType === "app") {
+      currentInstance.appContext.app.provide(key, value);
+    }
+  }
+}
+function inject(key, defaultValue, treatDefaultAsFactory = false) {
+  const instance = currentInstance || currentRenderingInstance;
+  if (instance || currentApp) {
+    const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
+    if (provides && key in provides) {
+      return provides[key];
+    } else if (arguments.length > 1) {
+      return treatDefaultAsFactory && isFunction(defaultValue) ? defaultValue.call(instance && instance.proxy) : defaultValue;
+    } else {
+      warn$1(`injection "${String(key)}" not found.`);
+    }
+  } else {
+    warn$1(`inject() can only be used inside setup() or functional components.`);
+  }
+}
+const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;
+function onActivated(hook, target) {
+  registerKeepAliveHook(hook, "a", target);
+}
+function onDeactivated(hook, target) {
+  registerKeepAliveHook(hook, "da", target);
+}
+function registerKeepAliveHook(hook, type, target = currentInstance) {
+  const wrappedHook = hook.__wdc || (hook.__wdc = () => {
+    let current = target;
+    while (current) {
+      if (current.isDeactivated) {
+        return;
+      }
+      current = current.parent;
+    }
+    return hook();
+  });
+  injectHook(type, wrappedHook, target);
+  if (target) {
+    let current = target.parent;
+    while (current && current.parent) {
+      if (isKeepAlive(current.parent.vnode)) {
+        injectToKeepAliveRoot(wrappedHook, type, target, current);
+      }
+      current = current.parent;
+    }
+  }
+}
+function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {
+  const injected = injectHook(
+    type,
+    hook,
+    keepAliveRoot,
+    true
+    /* prepend */
+  );
+  onUnmounted(() => {
+    remove(keepAliveRoot[type], injected);
+  }, target);
+}
+function injectHook(type, hook, target = currentInstance, prepend = false) {
+  if (target) {
+    if (isRootHook(type)) {
+      target = target.root;
+    }
+    const hooks = target[type] || (target[type] = []);
+    const wrappedHook = hook.__weh || (hook.__weh = (...args) => {
+      if (target.isUnmounted) {
+        return;
+      }
+      pauseTracking();
+      const reset = setCurrentInstance(target);
+      const res = callWithAsyncErrorHandling(hook, target, type, args);
+      reset();
+      resetTracking();
+      return res;
+    });
+    if (prepend) {
+      hooks.unshift(wrappedHook);
+    } else {
+      hooks.push(wrappedHook);
+    }
+    return wrappedHook;
+  } else {
+    const apiName = toHandlerKey(
+      (ErrorTypeStrings[type] || type.replace(/^on/, "")).replace(/ hook$/, "")
+    );
+    warn$1(
+      `${apiName} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().`
+    );
+  }
+}
+const createHook = (lifecycle) => (hook, target = currentInstance) => (
+  // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
+  (!isInSSRComponentSetup || lifecycle === "sp") && injectHook(lifecycle, (...args) => hook(...args), target)
+);
+const onBeforeMount = createHook("bm");
+const onMounted = createHook("m");
+const onBeforeUpdate = createHook("bu");
+const onUpdated = createHook("u");
+const onBeforeUnmount = createHook("bum");
+const onUnmounted = createHook("um");
+const onServerPrefetch = createHook("sp");
+const onRenderTriggered = createHook(
+  "rtg"
+);
+const onRenderTracked = createHook(
+  "rtc"
+);
+function onErrorCaptured(hook, target = currentInstance) {
+  injectHook("ec", hook, target);
+}
+const getPublicInstance = (i) => {
+  if (!i)
+    return null;
+  if (isStatefulComponent(i))
+    return getExposeProxy(i) || i.proxy;
+  return getPublicInstance(i.parent);
+};
+function getComponentInternalInstance(i) {
+  return i;
+}
+const publicPropertiesMap = (
+  // Move PURE marker to new line to workaround compiler discarding it
+  // due to type annotation
+  /* @__PURE__ */ extend(/* @__PURE__ */ Object.create(null), {
+    // fixed by xxxxxx
+    $: getComponentInternalInstance,
+    // fixed by xxxxxx vue-i18n 在 dev 模式,访问了 $el,故模拟一个假的
+    // $el: i => i.vnode.el,
+    $el: (i) => i.__$el || (i.__$el = {}),
+    $data: (i) => i.data,
+    $props: (i) => shallowReadonly(i.props),
+    $attrs: (i) => shallowReadonly(i.attrs),
+    $slots: (i) => shallowReadonly(i.slots),
+    $refs: (i) => shallowReadonly(i.refs),
+    $parent: (i) => getPublicInstance(i.parent),
+    $root: (i) => getPublicInstance(i.root),
+    $emit: (i) => i.emit,
+    $options: (i) => resolveMergedOptions(i),
+    $forceUpdate: (i) => i.f || (i.f = () => {
+      i.effect.dirty = true;
+      queueJob(i.update);
+    }),
+    // $nextTick: i => i.n || (i.n = nextTick.bind(i.proxy!)),// fixed by xxxxxx
+    $watch: (i) => instanceWatch.bind(i)
+  })
+);
+const isReservedPrefix = (key) => key === "_" || key === "$";
+const hasSetupBinding = (state, key) => state !== EMPTY_OBJ && !state.__isScriptSetup && hasOwn(state, key);
+const PublicInstanceProxyHandlers = {
+  get({ _: instance }, key) {
+    const { ctx, setupState, data, props, accessCache, type, appContext } = instance;
+    if (key === "__isVue") {
+      return true;
+    }
+    let normalizedProps;
+    if (key[0] !== "$") {
+      const n2 = accessCache[key];
+      if (n2 !== void 0) {
+        switch (n2) {
+          case 1:
+            return setupState[key];
+          case 2:
+            return data[key];
+          case 4:
+            return ctx[key];
+          case 3:
+            return props[key];
+        }
+      } else if (hasSetupBinding(setupState, key)) {
+        accessCache[key] = 1;
+        return setupState[key];
+      } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
+        accessCache[key] = 2;
+        return data[key];
+      } else if (
+        // only cache other properties when instance has declared (thus stable)
+        // props
+        (normalizedProps = instance.propsOptions[0]) && hasOwn(normalizedProps, key)
+      ) {
+        accessCache[key] = 3;
+        return props[key];
+      } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
+        accessCache[key] = 4;
+        return ctx[key];
+      } else if (shouldCacheAccess) {
+        accessCache[key] = 0;
+      }
+    }
+    const publicGetter = publicPropertiesMap[key];
+    let cssModule, globalProperties;
+    if (publicGetter) {
+      if (key === "$attrs") {
+        track(instance, "get", key);
+      } else if (key === "$slots") {
+        track(instance, "get", key);
+      }
+      return publicGetter(instance);
+    } else if (
+      // css module (injected by vue-loader)
+      (cssModule = type.__cssModules) && (cssModule = cssModule[key])
+    ) {
+      return cssModule;
+    } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
+      accessCache[key] = 4;
+      return ctx[key];
+    } else if (
+      // global properties
+      globalProperties = appContext.config.globalProperties, hasOwn(globalProperties, key)
+    ) {
+      {
+        return globalProperties[key];
+      }
+    } else if (currentRenderingInstance && (!isString(key) || // #1091 avoid internal isRef/isVNode checks on component instance leading
+    // to infinite warning loop
+    key.indexOf("__v") !== 0)) {
+      if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) {
+        warn$1(
+          `Property ${JSON.stringify(
+            key
+          )} must be accessed via $data because it starts with a reserved character ("$" or "_") and is not proxied on the render context.`
+        );
+      } else if (instance === currentRenderingInstance) {
+        warn$1(
+          `Property ${JSON.stringify(key)} was accessed during render but is not defined on instance.`
+        );
+      }
+    }
+  },
+  set({ _: instance }, key, value) {
+    const { data, setupState, ctx } = instance;
+    if (hasSetupBinding(setupState, key)) {
+      setupState[key] = value;
+      return true;
+    } else if (setupState.__isScriptSetup && hasOwn(setupState, key)) {
+      warn$1(`Cannot mutate <script setup> binding "${key}" from Options API.`);
+      return false;
+    } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
+      data[key] = value;
+      return true;
+    } else if (hasOwn(instance.props, key)) {
+      warn$1(`Attempting to mutate prop "${key}". Props are readonly.`);
+      return false;
+    }
+    if (key[0] === "$" && key.slice(1) in instance) {
+      warn$1(
+        `Attempting to mutate public property "${key}". Properties starting with $ are reserved and readonly.`
+      );
+      return false;
+    } else {
+      if (key in instance.appContext.config.globalProperties) {
+        Object.defineProperty(ctx, key, {
+          enumerable: true,
+          configurable: true,
+          value
+        });
+      } else {
+        ctx[key] = value;
+      }
+    }
+    return true;
+  },
+  has({
+    _: { data, setupState, accessCache, ctx, appContext, propsOptions }
+  }, key) {
+    let normalizedProps;
+    return !!accessCache[key] || data !== EMPTY_OBJ && hasOwn(data, key) || hasSetupBinding(setupState, key) || (normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key) || hasOwn(ctx, key) || hasOwn(publicPropertiesMap, key) || hasOwn(appContext.config.globalProperties, key);
+  },
+  defineProperty(target, key, descriptor) {
+    if (descriptor.get != null) {
+      target._.accessCache[key] = 0;
+    } else if (hasOwn(descriptor, "value")) {
+      this.set(target, key, descriptor.value, null);
+    }
+    return Reflect.defineProperty(target, key, descriptor);
+  }
+};
+{
+  PublicInstanceProxyHandlers.ownKeys = (target) => {
+    warn$1(
+      `Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.`
+    );
+    return Reflect.ownKeys(target);
+  };
+}
+function createDevRenderContext(instance) {
+  const target = {};
+  Object.defineProperty(target, `_`, {
+    configurable: true,
+    enumerable: false,
+    get: () => instance
+  });
+  Object.keys(publicPropertiesMap).forEach((key) => {
+    Object.defineProperty(target, key, {
+      configurable: true,
+      enumerable: false,
+      get: () => publicPropertiesMap[key](instance),
+      // intercepted by the proxy so no need for implementation,
+      // but needed to prevent set errors
+      set: NOOP
+    });
+  });
+  return target;
+}
+function exposePropsOnRenderContext(instance) {
+  const {
+    ctx,
+    propsOptions: [propsOptions]
+  } = instance;
+  if (propsOptions) {
+    Object.keys(propsOptions).forEach((key) => {
+      Object.defineProperty(ctx, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => instance.props[key],
+        set: NOOP
+      });
+    });
+  }
+}
+function exposeSetupStateOnRenderContext(instance) {
+  const { ctx, setupState } = instance;
+  Object.keys(toRaw(setupState)).forEach((key) => {
+    if (!setupState.__isScriptSetup) {
+      if (isReservedPrefix(key[0])) {
+        warn$1(
+          `setup() return property ${JSON.stringify(
+            key
+          )} should not start with "$" or "_" which are reserved prefixes for Vue internals.`
+        );
+        return;
+      }
+      Object.defineProperty(ctx, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => setupState[key],
+        set: NOOP
+      });
+    }
+  });
+}
+function normalizePropsOrEmits(props) {
+  return isArray(props) ? props.reduce(
+    (normalized, p2) => (normalized[p2] = null, normalized),
+    {}
+  ) : props;
+}
+function createDuplicateChecker() {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return (type, key) => {
+    if (cache[key]) {
+      warn$1(`${type} property "${key}" is already defined in ${cache[key]}.`);
+    } else {
+      cache[key] = type;
+    }
+  };
+}
+let shouldCacheAccess = true;
+function applyOptions$1(instance) {
+  const options = resolveMergedOptions(instance);
+  const publicThis = instance.proxy;
+  const ctx = instance.ctx;
+  shouldCacheAccess = false;
+  if (options.beforeCreate) {
+    callHook$1(options.beforeCreate, instance, "bc");
+  }
+  const {
+    // state
+    data: dataOptions,
+    computed: computedOptions,
+    methods,
+    watch: watchOptions,
+    provide: provideOptions,
+    inject: injectOptions,
+    // lifecycle
+    created,
+    beforeMount,
+    mounted,
+    beforeUpdate,
+    updated,
+    activated,
+    deactivated,
+    beforeDestroy,
+    beforeUnmount,
+    destroyed,
+    unmounted,
+    render,
+    renderTracked,
+    renderTriggered,
+    errorCaptured,
+    serverPrefetch,
+    // public API
+    expose,
+    inheritAttrs,
+    // assets
+    components,
+    directives,
+    filters
+  } = options;
+  const checkDuplicateProperties = createDuplicateChecker();
+  {
+    const [propsOptions] = instance.propsOptions;
+    if (propsOptions) {
+      for (const key in propsOptions) {
+        checkDuplicateProperties("Props", key);
+      }
+    }
+  }
+  function initInjections() {
+    if (injectOptions) {
+      resolveInjections(injectOptions, ctx, checkDuplicateProperties);
+    }
+  }
+  {
+    initInjections();
+  }
+  if (methods) {
+    for (const key in methods) {
+      const methodHandler = methods[key];
+      if (isFunction(methodHandler)) {
+        {
+          Object.defineProperty(ctx, key, {
+            value: methodHandler.bind(publicThis),
+            configurable: true,
+            enumerable: true,
+            writable: true
+          });
+        }
+        {
+          checkDuplicateProperties("Methods", key);
+        }
+      } else {
+        warn$1(
+          `Method "${key}" has type "${typeof methodHandler}" in the component definition. Did you reference the function correctly?`
+        );
+      }
+    }
+  }
+  if (dataOptions) {
+    if (!isFunction(dataOptions)) {
+      warn$1(
+        `The data option must be a function. Plain object usage is no longer supported.`
+      );
+    }
+    const data = dataOptions.call(publicThis, publicThis);
+    if (isPromise(data)) {
+      warn$1(
+        `data() returned a Promise - note data() cannot be async; If you intend to perform data fetching before component renders, use async setup() + <Suspense>.`
+      );
+    }
+    if (!isObject(data)) {
+      warn$1(`data() should return an object.`);
+    } else {
+      instance.data = reactive(data);
+      {
+        for (const key in data) {
+          checkDuplicateProperties("Data", key);
+          if (!isReservedPrefix(key[0])) {
+            Object.defineProperty(ctx, key, {
+              configurable: true,
+              enumerable: true,
+              get: () => data[key],
+              set: NOOP
+            });
+          }
+        }
+      }
+    }
+  }
+  shouldCacheAccess = true;
+  if (computedOptions) {
+    for (const key in computedOptions) {
+      const opt = computedOptions[key];
+      const get2 = isFunction(opt) ? opt.bind(publicThis, publicThis) : isFunction(opt.get) ? opt.get.bind(publicThis, publicThis) : NOOP;
+      if (get2 === NOOP) {
+        warn$1(`Computed property "${key}" has no getter.`);
+      }
+      const set2 = !isFunction(opt) && isFunction(opt.set) ? opt.set.bind(publicThis) : () => {
+        warn$1(
+          `Write operation failed: computed property "${key}" is readonly.`
+        );
+      };
+      const c2 = computed({
+        get: get2,
+        set: set2
+      });
+      Object.defineProperty(ctx, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => c2.value,
+        set: (v) => c2.value = v
+      });
+      {
+        checkDuplicateProperties("Computed", key);
+      }
+    }
+  }
+  if (watchOptions) {
+    for (const key in watchOptions) {
+      createWatcher(watchOptions[key], ctx, publicThis, key);
+    }
+  }
+  function initProvides() {
+    if (provideOptions) {
+      const provides = isFunction(provideOptions) ? provideOptions.call(publicThis) : provideOptions;
+      Reflect.ownKeys(provides).forEach((key) => {
+        provide(key, provides[key]);
+      });
+    }
+  }
+  {
+    initProvides();
+  }
+  {
+    if (created) {
+      callHook$1(created, instance, "c");
+    }
+  }
+  function registerLifecycleHook(register, hook) {
+    if (isArray(hook)) {
+      hook.forEach((_hook) => register(_hook.bind(publicThis)));
+    } else if (hook) {
+      register(hook.bind(publicThis));
+    }
+  }
+  registerLifecycleHook(onBeforeMount, beforeMount);
+  registerLifecycleHook(onMounted, mounted);
+  registerLifecycleHook(onBeforeUpdate, beforeUpdate);
+  registerLifecycleHook(onUpdated, updated);
+  registerLifecycleHook(onActivated, activated);
+  registerLifecycleHook(onDeactivated, deactivated);
+  registerLifecycleHook(onErrorCaptured, errorCaptured);
+  registerLifecycleHook(onRenderTracked, renderTracked);
+  registerLifecycleHook(onRenderTriggered, renderTriggered);
+  registerLifecycleHook(onBeforeUnmount, beforeUnmount);
+  registerLifecycleHook(onUnmounted, unmounted);
+  registerLifecycleHook(onServerPrefetch, serverPrefetch);
+  if (isArray(expose)) {
+    if (expose.length) {
+      const exposed = instance.exposed || (instance.exposed = {});
+      expose.forEach((key) => {
+        Object.defineProperty(exposed, key, {
+          get: () => publicThis[key],
+          set: (val) => publicThis[key] = val
+        });
+      });
+    } else if (!instance.exposed) {
+      instance.exposed = {};
+    }
+  }
+  if (render && instance.render === NOOP) {
+    instance.render = render;
+  }
+  if (inheritAttrs != null) {
+    instance.inheritAttrs = inheritAttrs;
+  }
+  if (components)
+    instance.components = components;
+  if (directives)
+    instance.directives = directives;
+  if (instance.ctx.$onApplyOptions) {
+    instance.ctx.$onApplyOptions(options, instance, publicThis);
+  }
+}
+function resolveInjections(injectOptions, ctx, checkDuplicateProperties = NOOP) {
+  if (isArray(injectOptions)) {
+    injectOptions = normalizeInject(injectOptions);
+  }
+  for (const key in injectOptions) {
+    const opt = injectOptions[key];
+    let injected;
+    if (isObject(opt)) {
+      if ("default" in opt) {
+        injected = inject(
+          opt.from || key,
+          opt.default,
+          true
+        );
+      } else {
+        injected = inject(opt.from || key);
+      }
+    } else {
+      injected = inject(opt);
+    }
+    if (isRef(injected)) {
+      Object.defineProperty(ctx, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => injected.value,
+        set: (v) => injected.value = v
+      });
+    } else {
+      ctx[key] = injected;
+    }
+    {
+      checkDuplicateProperties("Inject", key);
+    }
+  }
+}
+function callHook$1(hook, instance, type) {
+  callWithAsyncErrorHandling(
+    isArray(hook) ? hook.map((h2) => h2.bind(instance.proxy)) : hook.bind(instance.proxy),
+    instance,
+    type
+  );
+}
+function createWatcher(raw, ctx, publicThis, key) {
+  const getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key];
+  if (isString(raw)) {
+    const handler = ctx[raw];
+    if (isFunction(handler)) {
+      watch(getter, handler);
+    } else {
+      warn$1(`Invalid watch handler specified by key "${raw}"`, handler);
+    }
+  } else if (isFunction(raw)) {
+    watch(getter, raw.bind(publicThis));
+  } else if (isObject(raw)) {
+    if (isArray(raw)) {
+      raw.forEach((r2) => createWatcher(r2, ctx, publicThis, key));
+    } else {
+      const handler = isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];
+      if (isFunction(handler)) {
+        watch(getter, handler, raw);
+      } else {
+        warn$1(`Invalid watch handler specified by key "${raw.handler}"`, handler);
+      }
+    }
+  } else {
+    warn$1(`Invalid watch option: "${key}"`, raw);
+  }
+}
+function resolveMergedOptions(instance) {
+  const base = instance.type;
+  const { mixins, extends: extendsOptions } = base;
+  const {
+    mixins: globalMixins,
+    optionsCache: cache,
+    config: { optionMergeStrategies }
+  } = instance.appContext;
+  const cached = cache.get(base);
+  let resolved;
+  if (cached) {
+    resolved = cached;
+  } else if (!globalMixins.length && !mixins && !extendsOptions) {
+    {
+      resolved = base;
+    }
+  } else {
+    resolved = {};
+    if (globalMixins.length) {
+      globalMixins.forEach(
+        (m2) => mergeOptions(resolved, m2, optionMergeStrategies, true)
+      );
+    }
+    mergeOptions(resolved, base, optionMergeStrategies);
+  }
+  if (isObject(base)) {
+    cache.set(base, resolved);
+  }
+  return resolved;
+}
+function mergeOptions(to, from, strats, asMixin = false) {
+  const { mixins, extends: extendsOptions } = from;
+  if (extendsOptions) {
+    mergeOptions(to, extendsOptions, strats, true);
+  }
+  if (mixins) {
+    mixins.forEach(
+      (m2) => mergeOptions(to, m2, strats, true)
+    );
+  }
+  for (const key in from) {
+    if (asMixin && key === "expose") {
+      warn$1(
+        `"expose" option is ignored when declared in mixins or extends. It should only be declared in the base component itself.`
+      );
+    } else {
+      const strat = internalOptionMergeStrats[key] || strats && strats[key];
+      to[key] = strat ? strat(to[key], from[key]) : from[key];
+    }
+  }
+  return to;
+}
+const internalOptionMergeStrats = {
+  data: mergeDataFn,
+  props: mergeEmitsOrPropsOptions,
+  emits: mergeEmitsOrPropsOptions,
+  // objects
+  methods: mergeObjectOptions,
+  computed: mergeObjectOptions,
+  // lifecycle
+  beforeCreate: mergeAsArray$1,
+  created: mergeAsArray$1,
+  beforeMount: mergeAsArray$1,
+  mounted: mergeAsArray$1,
+  beforeUpdate: mergeAsArray$1,
+  updated: mergeAsArray$1,
+  beforeDestroy: mergeAsArray$1,
+  beforeUnmount: mergeAsArray$1,
+  destroyed: mergeAsArray$1,
+  unmounted: mergeAsArray$1,
+  activated: mergeAsArray$1,
+  deactivated: mergeAsArray$1,
+  errorCaptured: mergeAsArray$1,
+  serverPrefetch: mergeAsArray$1,
+  // assets
+  components: mergeObjectOptions,
+  directives: mergeObjectOptions,
+  // watch
+  watch: mergeWatchOptions,
+  // provide / inject
+  provide: mergeDataFn,
+  inject: mergeInject
+};
+function mergeDataFn(to, from) {
+  if (!from) {
+    return to;
+  }
+  if (!to) {
+    return from;
+  }
+  return function mergedDataFn() {
+    return extend(
+      isFunction(to) ? to.call(this, this) : to,
+      isFunction(from) ? from.call(this, this) : from
+    );
+  };
+}
+function mergeInject(to, from) {
+  return mergeObjectOptions(normalizeInject(to), normalizeInject(from));
+}
+function normalizeInject(raw) {
+  if (isArray(raw)) {
+    const res = {};
+    for (let i = 0; i < raw.length; i++) {
+      res[raw[i]] = raw[i];
+    }
+    return res;
+  }
+  return raw;
+}
+function mergeAsArray$1(to, from) {
+  return to ? [...new Set([].concat(to, from))] : from;
+}
+function mergeObjectOptions(to, from) {
+  return to ? extend(/* @__PURE__ */ Object.create(null), to, from) : from;
+}
+function mergeEmitsOrPropsOptions(to, from) {
+  if (to) {
+    if (isArray(to) && isArray(from)) {
+      return [.../* @__PURE__ */ new Set([...to, ...from])];
+    }
+    return extend(
+      /* @__PURE__ */ Object.create(null),
+      normalizePropsOrEmits(to),
+      normalizePropsOrEmits(from != null ? from : {})
+    );
+  } else {
+    return from;
+  }
+}
+function mergeWatchOptions(to, from) {
+  if (!to)
+    return from;
+  if (!from)
+    return to;
+  const merged = extend(/* @__PURE__ */ Object.create(null), to);
+  for (const key in from) {
+    merged[key] = mergeAsArray$1(to[key], from[key]);
+  }
+  return merged;
+}
+function initProps$1(instance, rawProps, isStateful, isSSR = false) {
+  const props = {};
+  const attrs = {};
+  instance.propsDefaults = /* @__PURE__ */ Object.create(null);
+  setFullProps(instance, rawProps, props, attrs);
+  for (const key in instance.propsOptions[0]) {
+    if (!(key in props)) {
+      props[key] = void 0;
+    }
+  }
+  {
+    validateProps(rawProps || {}, props, instance);
+  }
+  if (isStateful) {
+    instance.props = isSSR ? props : shallowReactive(props);
+  } else {
+    if (!instance.type.props) {
+      instance.props = attrs;
+    } else {
+      instance.props = props;
+    }
+  }
+  instance.attrs = attrs;
+}
+function isInHmrContext(instance) {
+}
+function updateProps(instance, rawProps, rawPrevProps, optimized) {
+  const {
+    props,
+    attrs,
+    vnode: { patchFlag }
+  } = instance;
+  const rawCurrentProps = toRaw(props);
+  const [options] = instance.propsOptions;
+  let hasAttrsChanged = false;
+  if (
+    // always force full diff in dev
+    // - #1942 if hmr is enabled with sfc component
+    // - vite#872 non-sfc component used by sfc component
+    !isInHmrContext() && (optimized || patchFlag > 0) && !(patchFlag & 16)
+  ) {
+    if (patchFlag & 8) {
+      const propsToUpdate = instance.vnode.dynamicProps;
+      for (let i = 0; i < propsToUpdate.length; i++) {
+        let key = propsToUpdate[i];
+        if (isEmitListener(instance.emitsOptions, key)) {
+          continue;
+        }
+        const value = rawProps[key];
+        if (options) {
+          if (hasOwn(attrs, key)) {
+            if (value !== attrs[key]) {
+              attrs[key] = value;
+              hasAttrsChanged = true;
+            }
+          } else {
+            const camelizedKey = camelize(key);
+            props[camelizedKey] = resolvePropValue$1(
+              options,
+              rawCurrentProps,
+              camelizedKey,
+              value,
+              instance,
+              false
+            );
+          }
+        } else {
+          if (value !== attrs[key]) {
+            attrs[key] = value;
+            hasAttrsChanged = true;
+          }
+        }
+      }
+    }
+  } else {
+    if (setFullProps(instance, rawProps, props, attrs)) {
+      hasAttrsChanged = true;
+    }
+    let kebabKey;
+    for (const key in rawCurrentProps) {
+      if (!rawProps || // for camelCase
+      !hasOwn(rawProps, key) && // it's possible the original props was passed in as kebab-case
+      // and converted to camelCase (#955)
+      ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey))) {
+        if (options) {
+          if (rawPrevProps && // for camelCase
+          (rawPrevProps[key] !== void 0 || // for kebab-case
+          rawPrevProps[kebabKey] !== void 0)) {
+            props[key] = resolvePropValue$1(
+              options,
+              rawCurrentProps,
+              key,
+              void 0,
+              instance,
+              true
+            );
+          }
+        } else {
+          delete props[key];
+        }
+      }
+    }
+    if (attrs !== rawCurrentProps) {
+      for (const key in attrs) {
+        if (!rawProps || !hasOwn(rawProps, key) && true) {
+          delete attrs[key];
+          hasAttrsChanged = true;
+        }
+      }
+    }
+  }
+  if (hasAttrsChanged) {
+    trigger(instance, "set", "$attrs");
+  }
+  {
+    validateProps(rawProps || {}, props, instance);
+  }
+}
+function setFullProps(instance, rawProps, props, attrs) {
+  const [options, needCastKeys] = instance.propsOptions;
+  let hasAttrsChanged = false;
+  let rawCastValues;
+  if (rawProps) {
+    for (let key in rawProps) {
+      if (isReservedProp(key)) {
+        continue;
+      }
+      const value = rawProps[key];
+      let camelKey;
+      if (options && hasOwn(options, camelKey = camelize(key))) {
+        if (!needCastKeys || !needCastKeys.includes(camelKey)) {
+          props[camelKey] = value;
+        } else {
+          (rawCastValues || (rawCastValues = {}))[camelKey] = value;
+        }
+      } else if (!isEmitListener(instance.emitsOptions, key)) {
+        if (!(key in attrs) || value !== attrs[key]) {
+          attrs[key] = value;
+          hasAttrsChanged = true;
+        }
+      }
+    }
+  }
+  if (needCastKeys) {
+    const rawCurrentProps = toRaw(props);
+    const castValues = rawCastValues || EMPTY_OBJ;
+    for (let i = 0; i < needCastKeys.length; i++) {
+      const key = needCastKeys[i];
+      props[key] = resolvePropValue$1(
+        options,
+        rawCurrentProps,
+        key,
+        castValues[key],
+        instance,
+        !hasOwn(castValues, key)
+      );
+    }
+  }
+  return hasAttrsChanged;
+}
+function resolvePropValue$1(options, props, key, value, instance, isAbsent) {
+  const opt = options[key];
+  if (opt != null) {
+    const hasDefault = hasOwn(opt, "default");
+    if (hasDefault && value === void 0) {
+      const defaultValue = opt.default;
+      if (opt.type !== Function && !opt.skipFactory && isFunction(defaultValue)) {
+        const { propsDefaults } = instance;
+        if (key in propsDefaults) {
+          value = propsDefaults[key];
+        } else {
+          const reset = setCurrentInstance(instance);
+          value = propsDefaults[key] = defaultValue.call(
+            null,
+            props
+          );
+          reset();
+        }
+      } else {
+        value = defaultValue;
+      }
+    }
+    if (opt[
+      0
+      /* shouldCast */
+    ]) {
+      if (isAbsent && !hasDefault) {
+        value = false;
+      } else if (opt[
+        1
+        /* shouldCastTrue */
+      ] && (value === "" || value === hyphenate(key))) {
+        value = true;
+      }
+    }
+  }
+  return value;
+}
+function normalizePropsOptions(comp, appContext, asMixin = false) {
+  const cache = appContext.propsCache;
+  const cached = cache.get(comp);
+  if (cached) {
+    return cached;
+  }
+  const raw = comp.props;
+  const normalized = {};
+  const needCastKeys = [];
+  let hasExtends = false;
+  if (!isFunction(comp)) {
+    const extendProps = (raw2) => {
+      hasExtends = true;
+      const [props, keys] = normalizePropsOptions(raw2, appContext, true);
+      extend(normalized, props);
+      if (keys)
+        needCastKeys.push(...keys);
+    };
+    if (!asMixin && appContext.mixins.length) {
+      appContext.mixins.forEach(extendProps);
+    }
+    if (comp.extends) {
+      extendProps(comp.extends);
+    }
+    if (comp.mixins) {
+      comp.mixins.forEach(extendProps);
+    }
+  }
+  if (!raw && !hasExtends) {
+    if (isObject(comp)) {
+      cache.set(comp, EMPTY_ARR);
+    }
+    return EMPTY_ARR;
+  }
+  if (isArray(raw)) {
+    for (let i = 0; i < raw.length; i++) {
+      if (!isString(raw[i])) {
+        warn$1(`props must be strings when using array syntax.`, raw[i]);
+      }
+      const normalizedKey = camelize(raw[i]);
+      if (validatePropName(normalizedKey)) {
+        normalized[normalizedKey] = EMPTY_OBJ;
+      }
+    }
+  } else if (raw) {
+    if (!isObject(raw)) {
+      warn$1(`invalid props options`, raw);
+    }
+    for (const key in raw) {
+      const normalizedKey = camelize(key);
+      if (validatePropName(normalizedKey)) {
+        const opt = raw[key];
+        const prop = normalized[normalizedKey] = isArray(opt) || isFunction(opt) ? { type: opt } : extend({}, opt);
+        if (prop) {
+          const booleanIndex = getTypeIndex(Boolean, prop.type);
+          const stringIndex = getTypeIndex(String, prop.type);
+          prop[
+            0
+            /* shouldCast */
+          ] = booleanIndex > -1;
+          prop[
+            1
+            /* shouldCastTrue */
+          ] = stringIndex < 0 || booleanIndex < stringIndex;
+          if (booleanIndex > -1 || hasOwn(prop, "default")) {
+            needCastKeys.push(normalizedKey);
+          }
+        }
+      }
+    }
+  }
+  const res = [normalized, needCastKeys];
+  if (isObject(comp)) {
+    cache.set(comp, res);
+  }
+  return res;
+}
+function validatePropName(key) {
+  if (key[0] !== "$" && !isReservedProp(key)) {
+    return true;
+  } else {
+    warn$1(`Invalid prop name: "${key}" is a reserved property.`);
+  }
+  return false;
+}
+function getType$1(ctor) {
+  if (ctor === null) {
+    return "null";
+  }
+  if (typeof ctor === "function") {
+    return ctor.name || "";
+  } else if (typeof ctor === "object") {
+    const name = ctor.constructor && ctor.constructor.name;
+    return name || "";
+  }
+  return "";
+}
+function isSameType(a, b) {
+  return getType$1(a) === getType$1(b);
+}
+function getTypeIndex(type, expectedTypes) {
+  if (isArray(expectedTypes)) {
+    return expectedTypes.findIndex((t2) => isSameType(t2, type));
+  } else if (isFunction(expectedTypes)) {
+    return isSameType(expectedTypes, type) ? 0 : -1;
+  }
+  return -1;
+}
+function validateProps(rawProps, props, instance) {
+  const resolvedValues = toRaw(props);
+  const options = instance.propsOptions[0];
+  for (const key in options) {
+    let opt = options[key];
+    if (opt == null)
+      continue;
+    validateProp$1(
+      key,
+      resolvedValues[key],
+      opt,
+      shallowReadonly(resolvedValues),
+      !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))
+    );
+  }
+}
+function validateProp$1(name, value, prop, props, isAbsent) {
+  const { type, required, validator, skipCheck } = prop;
+  if (required && isAbsent) {
+    warn$1('Missing required prop: "' + name + '"');
+    return;
+  }
+  if (value == null && !required) {
+    return;
+  }
+  if (type != null && type !== true && !skipCheck) {
+    let isValid = false;
+    const types = isArray(type) ? type : [type];
+    const expectedTypes = [];
+    for (let i = 0; i < types.length && !isValid; i++) {
+      const { valid, expectedType } = assertType$1(value, types[i]);
+      expectedTypes.push(expectedType || "");
+      isValid = valid;
+    }
+    if (!isValid) {
+      warn$1(getInvalidTypeMessage$1(name, value, expectedTypes));
+      return;
+    }
+  }
+  if (validator && !validator(value, props)) {
+    warn$1('Invalid prop: custom validator check failed for prop "' + name + '".');
+  }
+}
+const isSimpleType$1 = /* @__PURE__ */ makeMap(
+  "String,Number,Boolean,Function,Symbol,BigInt"
+);
+function assertType$1(value, type) {
+  let valid;
+  const expectedType = getType$1(type);
+  if (isSimpleType$1(expectedType)) {
+    const t2 = typeof value;
+    valid = t2 === expectedType.toLowerCase();
+    if (!valid && t2 === "object") {
+      valid = value instanceof type;
+    }
+  } else if (expectedType === "Object") {
+    valid = isObject(value);
+  } else if (expectedType === "Array") {
+    valid = isArray(value);
+  } else if (expectedType === "null") {
+    valid = value === null;
+  } else {
+    valid = value instanceof type;
+  }
+  return {
+    valid,
+    expectedType
+  };
+}
+function getInvalidTypeMessage$1(name, value, expectedTypes) {
+  if (expectedTypes.length === 0) {
+    return `Prop type [] for prop "${name}" won't match anything. Did you mean to use type Array instead?`;
+  }
+  let message = `Invalid prop: type check failed for prop "${name}". Expected ${expectedTypes.map(capitalize).join(" | ")}`;
+  const expectedType = expectedTypes[0];
+  const receivedType = toRawType(value);
+  const expectedValue = styleValue$1(value, expectedType);
+  const receivedValue = styleValue$1(value, receivedType);
+  if (expectedTypes.length === 1 && isExplicable$1(expectedType) && !isBoolean$1(expectedType, receivedType)) {
+    message += ` with value ${expectedValue}`;
+  }
+  message += `, got ${receivedType} `;
+  if (isExplicable$1(receivedType)) {
+    message += `with value ${receivedValue}.`;
+  }
+  return message;
+}
+function styleValue$1(value, type) {
+  if (type === "String") {
+    return `"${value}"`;
+  } else if (type === "Number") {
+    return `${Number(value)}`;
+  } else {
+    return `${value}`;
+  }
+}
+function isExplicable$1(type) {
+  const explicitTypes = ["string", "number", "boolean"];
+  return explicitTypes.some((elem) => type.toLowerCase() === elem);
+}
+function isBoolean$1(...args) {
+  return args.some((elem) => elem.toLowerCase() === "boolean");
+}
+let supported;
+let perf;
+function startMeasure(instance, type) {
+  if (instance.appContext.config.performance && isSupported()) {
+    perf.mark(`vue-${type}-${instance.uid}`);
+  }
+  {
+    devtoolsPerfStart(instance, type, isSupported() ? perf.now() : Date.now());
+  }
+}
+function endMeasure(instance, type) {
+  if (instance.appContext.config.performance && isSupported()) {
+    const startTag = `vue-${type}-${instance.uid}`;
+    const endTag = startTag + `:end`;
+    perf.mark(endTag);
+    perf.measure(
+      `<${formatComponentName(instance, instance.type)}> ${type}`,
+      startTag,
+      endTag
+    );
+    perf.clearMarks(startTag);
+    perf.clearMarks(endTag);
+  }
+  {
+    devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now());
+  }
+}
+function isSupported() {
+  if (supported !== void 0) {
+    return supported;
+  }
+  if (typeof window !== "undefined" && window.performance) {
+    supported = true;
+    perf = window.performance;
+  } else {
+    supported = false;
+  }
+  return supported;
+}
+const queuePostRenderEffect$1 = queuePostFlushCb;
+const Fragment = Symbol.for("v-fgt");
+const Text = Symbol.for("v-txt");
+const Comment = Symbol.for("v-cmt");
+const Static = Symbol.for("v-stc");
+function isVNode(value) {
+  return value ? value.__v_isVNode === true : false;
+}
+const emptyAppContext = createAppContext();
+let uid = 0;
+function createComponentInstance(vnode, parent, suspense) {
+  const type = vnode.type;
+  const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;
+  const instance = {
+    uid: uid++,
+    vnode,
+    type,
+    parent,
+    appContext,
+    root: null,
+    // to be immediately set
+    next: null,
+    subTree: null,
+    // will be set synchronously right after creation
+    effect: null,
+    update: null,
+    // will be set synchronously right after creation
+    scope: new EffectScope(
+      true
+      /* detached */
+    ),
+    render: null,
+    proxy: null,
+    exposed: null,
+    exposeProxy: null,
+    withProxy: null,
+    provides: parent ? parent.provides : Object.create(appContext.provides),
+    accessCache: null,
+    renderCache: [],
+    // local resolved assets
+    components: null,
+    directives: null,
+    // resolved props and emits options
+    propsOptions: normalizePropsOptions(type, appContext),
+    emitsOptions: normalizeEmitsOptions(type, appContext),
+    // emit
+    emit: null,
+    // to be set immediately
+    emitted: null,
+    // props default value
+    propsDefaults: EMPTY_OBJ,
+    // inheritAttrs
+    inheritAttrs: type.inheritAttrs,
+    // state
+    ctx: EMPTY_OBJ,
+    data: EMPTY_OBJ,
+    props: EMPTY_OBJ,
+    attrs: EMPTY_OBJ,
+    slots: EMPTY_OBJ,
+    refs: EMPTY_OBJ,
+    setupState: EMPTY_OBJ,
+    setupContext: null,
+    attrsProxy: null,
+    slotsProxy: null,
+    // suspense related
+    suspense,
+    suspenseId: suspense ? suspense.pendingId : 0,
+    asyncDep: null,
+    asyncResolved: false,
+    // lifecycle hooks
+    // not using enums here because it results in computed properties
+    isMounted: false,
+    isUnmounted: false,
+    isDeactivated: false,
+    bc: null,
+    c: null,
+    bm: null,
+    m: null,
+    bu: null,
+    u: null,
+    um: null,
+    bum: null,
+    da: null,
+    a: null,
+    rtg: null,
+    rtc: null,
+    ec: null,
+    sp: null,
+    // fixed by xxxxxx 用于存储uni-app的元素缓存
+    $uniElements: /* @__PURE__ */ new Map(),
+    $templateUniElementRefs: [],
+    $templateUniElementStyles: {},
+    $eS: {},
+    $eA: {}
+  };
+  {
+    instance.ctx = createDevRenderContext(instance);
+  }
+  instance.root = parent ? parent.root : instance;
+  instance.emit = emit.bind(null, instance);
+  if (vnode.ce) {
+    vnode.ce(instance);
+  }
+  return instance;
+}
+let currentInstance = null;
+const getCurrentInstance = () => currentInstance || currentRenderingInstance;
+let internalSetCurrentInstance;
+let setInSSRSetupState;
+{
+  internalSetCurrentInstance = (i) => {
+    currentInstance = i;
+  };
+  setInSSRSetupState = (v) => {
+    isInSSRComponentSetup = v;
+  };
+}
+const setCurrentInstance = (instance) => {
+  const prev = currentInstance;
+  internalSetCurrentInstance(instance);
+  instance.scope.on();
+  return () => {
+    instance.scope.off();
+    internalSetCurrentInstance(prev);
+  };
+};
+const unsetCurrentInstance = () => {
+  currentInstance && currentInstance.scope.off();
+  internalSetCurrentInstance(null);
+};
+const isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");
+function validateComponentName(name, { isNativeTag }) {
+  if (isBuiltInTag(name) || isNativeTag(name)) {
+    warn$1(
+      "Do not use built-in or reserved HTML elements as component id: " + name
+    );
+  }
+}
+function isStatefulComponent(instance) {
+  return instance.vnode.shapeFlag & 4;
+}
+let isInSSRComponentSetup = false;
+function setupComponent(instance, isSSR = false) {
+  isSSR && setInSSRSetupState(isSSR);
+  const {
+    props
+    /*, children*/
+  } = instance.vnode;
+  const isStateful = isStatefulComponent(instance);
+  initProps$1(instance, props, isStateful, isSSR);
+  const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0;
+  isSSR && setInSSRSetupState(false);
+  return setupResult;
+}
+function setupStatefulComponent(instance, isSSR) {
+  const Component2 = instance.type;
+  {
+    if (Component2.name) {
+      validateComponentName(Component2.name, instance.appContext.config);
+    }
+    if (Component2.components) {
+      const names = Object.keys(Component2.components);
+      for (let i = 0; i < names.length; i++) {
+        validateComponentName(names[i], instance.appContext.config);
+      }
+    }
+    if (Component2.directives) {
+      const names = Object.keys(Component2.directives);
+      for (let i = 0; i < names.length; i++) {
+        validateDirectiveName(names[i]);
+      }
+    }
+    if (Component2.compilerOptions && isRuntimeOnly()) {
+      warn$1(
+        `"compilerOptions" is only supported when using a build of Vue that includes the runtime compiler. Since you are using a runtime-only build, the options should be passed via your build tool config instead.`
+      );
+    }
+  }
+  instance.accessCache = /* @__PURE__ */ Object.create(null);
+  instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers));
+  {
+    exposePropsOnRenderContext(instance);
+  }
+  const { setup } = Component2;
+  if (setup) {
+    const setupContext = instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null;
+    const reset = setCurrentInstance(instance);
+    pauseTracking();
+    const setupResult = callWithErrorHandling(
+      setup,
+      instance,
+      0,
+      [
+        shallowReadonly(instance.props),
+        setupContext
+      ]
+    );
+    resetTracking();
+    reset();
+    if (isPromise(setupResult)) {
+      setupResult.then(unsetCurrentInstance, unsetCurrentInstance);
+      {
+        warn$1(
+          `setup() returned a Promise, but the version of Vue you are using does not support it yet.`
+        );
+      }
+    } else {
+      handleSetupResult(instance, setupResult, isSSR);
+    }
+  } else {
+    finishComponentSetup(instance, isSSR);
+  }
+}
+function handleSetupResult(instance, setupResult, isSSR) {
+  if (isFunction(setupResult)) {
+    {
+      instance.render = setupResult;
+    }
+  } else if (isObject(setupResult)) {
+    if (isVNode(setupResult)) {
+      warn$1(
+        `setup() should not return VNodes directly - return a render function instead.`
+      );
+    }
+    {
+      instance.devtoolsRawSetupState = setupResult;
+    }
+    instance.setupState = proxyRefs(setupResult);
+    {
+      exposeSetupStateOnRenderContext(instance);
+    }
+  } else if (setupResult !== void 0) {
+    warn$1(
+      `setup() should return an object. Received: ${setupResult === null ? "null" : typeof setupResult}`
+    );
+  }
+  finishComponentSetup(instance, isSSR);
+}
+let compile;
+const isRuntimeOnly = () => !compile;
+function finishComponentSetup(instance, isSSR, skipOptions) {
+  const Component2 = instance.type;
+  if (!instance.render) {
+    instance.render = Component2.render || NOOP;
+  }
+  {
+    const reset = setCurrentInstance(instance);
+    pauseTracking();
+    try {
+      applyOptions$1(instance);
+    } finally {
+      resetTracking();
+      reset();
+    }
+  }
+  if (!Component2.render && instance.render === NOOP && !isSSR) {
+    if (Component2.template) {
+      warn$1(
+        `Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".`
+      );
+    } else {
+      warn$1(`Component is missing template or render function.`);
+    }
+  }
+}
+function getAttrsProxy(instance) {
+  return instance.attrsProxy || (instance.attrsProxy = new Proxy(
+    instance.attrs,
+    {
+      get(target, key) {
+        track(instance, "get", "$attrs");
+        return target[key];
+      },
+      set() {
+        warn$1(`setupContext.attrs is readonly.`);
+        return false;
+      },
+      deleteProperty() {
+        warn$1(`setupContext.attrs is readonly.`);
+        return false;
+      }
+    }
+  ));
+}
+function getSlotsProxy(instance) {
+  return instance.slotsProxy || (instance.slotsProxy = new Proxy(instance.slots, {
+    get(target, key) {
+      track(instance, "get", "$slots");
+      return target[key];
+    }
+  }));
+}
+function createSetupContext(instance) {
+  const expose = (exposed) => {
+    {
+      if (instance.exposed) {
+        warn$1(`expose() should be called only once per setup().`);
+      }
+      if (exposed != null) {
+        let exposedType = typeof exposed;
+        if (exposedType === "object") {
+          if (isArray(exposed)) {
+            exposedType = "array";
+          } else if (isRef(exposed)) {
+            exposedType = "ref";
+          }
+        }
+        if (exposedType !== "object") {
+          warn$1(
+            `expose() should be passed a plain object, received ${exposedType}.`
+          );
+        }
+      }
+    }
+    instance.exposed = exposed || {};
+  };
+  {
+    return Object.freeze({
+      get attrs() {
+        return getAttrsProxy(instance);
+      },
+      get slots() {
+        return getSlotsProxy(instance);
+      },
+      get emit() {
+        return (event, ...args) => instance.emit(event, ...args);
+      },
+      expose
+    });
+  }
+}
+function getExposeProxy(instance) {
+  if (instance.exposed) {
+    return instance.exposeProxy || (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
+      get(target, key) {
+        if (key in target) {
+          return target[key];
+        }
+        return instance.proxy[key];
+      },
+      has(target, key) {
+        return key in target || key in publicPropertiesMap;
+      }
+    }));
+  }
+}
+const classifyRE = /(?:^|[-_])(\w)/g;
+const classify = (str) => str.replace(classifyRE, (c2) => c2.toUpperCase()).replace(/[-_]/g, "");
+function getComponentName(Component2, includeInferred = true) {
+  return isFunction(Component2) ? Component2.displayName || Component2.name : Component2.name || includeInferred && Component2.__name;
+}
+function formatComponentName(instance, Component2, isRoot = false) {
+  let name = getComponentName(Component2);
+  if (!name && Component2.__file) {
+    const match = Component2.__file.match(/([^/\\]+)\.\w+$/);
+    if (match) {
+      name = match[1];
+    }
+  }
+  if (!name && instance && instance.parent) {
+    const inferFromRegistry = (registry) => {
+      for (const key in registry) {
+        if (registry[key] === Component2) {
+          return key;
+        }
+      }
+    };
+    name = inferFromRegistry(
+      instance.components || instance.parent.type.components
+    ) || inferFromRegistry(instance.appContext.components);
+  }
+  return name ? classify(name) : isRoot ? `App` : `Anonymous`;
+}
+const computed = (getterOrOptions, debugOptions) => {
+  const c2 = computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
+  {
+    const i = getCurrentInstance();
+    if (i && i.appContext.config.warnRecursiveComputed) {
+      c2._warnRecursive = true;
+    }
+  }
+  return c2;
+};
+const version = "3.4.21";
+const warn = warn$1;
+function unwrapper(target) {
+  return unref(target);
+}
+const ARRAYTYPE = "[object Array]";
+const OBJECTTYPE = "[object Object]";
+function diff(current, pre) {
+  const result = {};
+  syncKeys(current, pre);
+  _diff(current, pre, "", result);
+  return result;
+}
+function syncKeys(current, pre) {
+  current = unwrapper(current);
+  if (current === pre)
+    return;
+  const rootCurrentType = toTypeString(current);
+  const rootPreType = toTypeString(pre);
+  if (rootCurrentType == OBJECTTYPE && rootPreType == OBJECTTYPE) {
+    for (let key in pre) {
+      const currentValue = current[key];
+      if (currentValue === void 0) {
+        current[key] = null;
+      } else {
+        syncKeys(currentValue, pre[key]);
+      }
+    }
+  } else if (rootCurrentType == ARRAYTYPE && rootPreType == ARRAYTYPE) {
+    if (current.length >= pre.length) {
+      pre.forEach((item, index2) => {
+        syncKeys(current[index2], item);
+      });
+    }
+  }
+}
+function _diff(current, pre, path, result) {
+  current = unwrapper(current);
+  if (current === pre)
+    return;
+  const rootCurrentType = toTypeString(current);
+  const rootPreType = toTypeString(pre);
+  if (rootCurrentType == OBJECTTYPE) {
+    if (rootPreType != OBJECTTYPE || Object.keys(current).length < Object.keys(pre).length) {
+      setResult(result, path, current);
+    } else {
+      for (let key in current) {
+        const currentValue = unwrapper(current[key]);
+        const preValue = pre[key];
+        const currentType = toTypeString(currentValue);
+        const preType = toTypeString(preValue);
+        if (currentType != ARRAYTYPE && currentType != OBJECTTYPE) {
+          if (currentValue != preValue) {
+            setResult(
+              result,
+              (path == "" ? "" : path + ".") + key,
+              currentValue
+            );
+          }
+        } else if (currentType == ARRAYTYPE) {
+          if (preType != ARRAYTYPE) {
+            setResult(
+              result,
+              (path == "" ? "" : path + ".") + key,
+              currentValue
+            );
+          } else {
+            if (currentValue.length < preValue.length) {
+              setResult(
+                result,
+                (path == "" ? "" : path + ".") + key,
+                currentValue
+              );
+            } else {
+              currentValue.forEach((item, index2) => {
+                _diff(
+                  item,
+                  preValue[index2],
+                  (path == "" ? "" : path + ".") + key + "[" + index2 + "]",
+                  result
+                );
+              });
+            }
+          }
+        } else if (currentType == OBJECTTYPE) {
+          if (preType != OBJECTTYPE || Object.keys(currentValue).length < Object.keys(preValue).length) {
+            setResult(
+              result,
+              (path == "" ? "" : path + ".") + key,
+              currentValue
+            );
+          } else {
+            for (let subKey in currentValue) {
+              _diff(
+                currentValue[subKey],
+                preValue[subKey],
+                (path == "" ? "" : path + ".") + key + "." + subKey,
+                result
+              );
+            }
+          }
+        }
+      }
+    }
+  } else if (rootCurrentType == ARRAYTYPE) {
+    if (rootPreType != ARRAYTYPE) {
+      setResult(result, path, current);
+    } else {
+      if (current.length < pre.length) {
+        setResult(result, path, current);
+      } else {
+        current.forEach((item, index2) => {
+          _diff(item, pre[index2], path + "[" + index2 + "]", result);
+        });
+      }
+    }
+  } else {
+    setResult(result, path, current);
+  }
+}
+function setResult(result, k, v) {
+  result[k] = v;
+}
+function hasComponentEffect(instance) {
+  return queue$1.includes(instance.update);
+}
+function flushCallbacks(instance) {
+  const ctx = instance.ctx;
+  const callbacks = ctx.__next_tick_callbacks;
+  if (callbacks && callbacks.length) {
+    const copies = callbacks.slice(0);
+    callbacks.length = 0;
+    for (let i = 0; i < copies.length; i++) {
+      copies[i]();
+    }
+  }
+}
+function nextTick(instance, fn) {
+  const ctx = instance.ctx;
+  if (!ctx.__next_tick_pending && !hasComponentEffect(instance)) {
+    return nextTick$1(fn && fn.bind(instance.proxy));
+  }
+  let _resolve;
+  if (!ctx.__next_tick_callbacks) {
+    ctx.__next_tick_callbacks = [];
+  }
+  ctx.__next_tick_callbacks.push(() => {
+    if (fn) {
+      callWithErrorHandling(
+        fn.bind(instance.proxy),
+        instance,
+        14
+      );
+    } else if (_resolve) {
+      _resolve(instance.proxy);
+    }
+  });
+  return new Promise((resolve2) => {
+    _resolve = resolve2;
+  });
+}
+function clone(src, seen) {
+  src = unwrapper(src);
+  const type = typeof src;
+  if (type === "object" && src !== null) {
+    let copy = seen.get(src);
+    if (typeof copy !== "undefined") {
+      return copy;
+    }
+    if (isArray(src)) {
+      const len = src.length;
+      copy = new Array(len);
+      seen.set(src, copy);
+      for (let i = 0; i < len; i++) {
+        copy[i] = clone(src[i], seen);
+      }
+    } else {
+      copy = {};
+      seen.set(src, copy);
+      for (const name in src) {
+        if (hasOwn(src, name)) {
+          copy[name] = clone(src[name], seen);
+        }
+      }
+    }
+    return copy;
+  }
+  if (type !== "symbol") {
+    return src;
+  }
+}
+function deepCopy(src) {
+  return clone(src, typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : /* @__PURE__ */ new Map());
+}
+function getMPInstanceData(instance, keys) {
+  const data = instance.data;
+  const ret = /* @__PURE__ */ Object.create(null);
+  keys.forEach((key) => {
+    ret[key] = data[key];
+  });
+  return ret;
+}
+function patch(instance, data, oldData) {
+  if (!data) {
+    return;
+  }
+  data = deepCopy(data);
+  data.$eS = instance.$eS || {};
+  data.$eA = instance.$eA || {};
+  const ctx = instance.ctx;
+  const mpType = ctx.mpType;
+  if (mpType === "page" || mpType === "component") {
+    data.r0 = 1;
+    const mpInstance = ctx.$scope;
+    const keys = Object.keys(data);
+    const diffData = diff(data, oldData || getMPInstanceData(mpInstance, keys));
+    if (Object.keys(diffData).length) {
+      ctx.__next_tick_pending = true;
+      mpInstance.setData(diffData, () => {
+        ctx.__next_tick_pending = false;
+        flushCallbacks(instance);
+      });
+      flushPreFlushCbs();
+    } else {
+      flushCallbacks(instance);
+    }
+  }
+}
+function initAppConfig(appConfig) {
+  appConfig.globalProperties.$nextTick = function $nextTick(fn) {
+    return nextTick(this.$, fn);
+  };
+}
+function onApplyOptions(options, instance, publicThis) {
+  instance.appContext.config.globalProperties.$applyOptions(
+    options,
+    instance,
+    publicThis
+  );
+  const computedOptions = options.computed;
+  if (computedOptions) {
+    const keys = Object.keys(computedOptions);
+    if (keys.length) {
+      const ctx = instance.ctx;
+      if (!ctx.$computedKeys) {
+        ctx.$computedKeys = [];
+      }
+      ctx.$computedKeys.push(...keys);
+    }
+  }
+  delete instance.ctx.$onApplyOptions;
+}
+function setRef$1(instance, isUnmount = false) {
+  const {
+    setupState,
+    $templateRefs,
+    $templateUniElementRefs,
+    ctx: { $scope, $mpPlatform }
+  } = instance;
+  if ($mpPlatform === "mp-alipay") {
+    return;
+  }
+  if (!$scope || !$templateRefs && !$templateUniElementRefs) {
+    return;
+  }
+  if (isUnmount) {
+    $templateRefs && $templateRefs.forEach(
+      (templateRef) => setTemplateRef(templateRef, null, setupState)
+    );
+    $templateUniElementRefs && $templateUniElementRefs.forEach(
+      (templateRef) => setTemplateRef(templateRef, null, setupState)
+    );
+    return;
+  }
+  const check = $mpPlatform === "mp-baidu" || $mpPlatform === "mp-toutiao";
+  const doSetByRefs = (refs) => {
+    if (refs.length === 0) {
+      return [];
+    }
+    const mpComponents = (
+      // 字节小程序 selectAllComponents 可能返回 null
+      // https://github.com/dcloudio/uni-app/issues/3954
+      ($scope.selectAllComponents(".r") || []).concat(
+        $scope.selectAllComponents(".r-i-f") || []
+      )
+    );
+    return refs.filter((templateRef) => {
+      const refValue = findComponentPublicInstance(mpComponents, templateRef.i);
+      if (check && refValue === null) {
+        return true;
+      }
+      setTemplateRef(templateRef, refValue, setupState);
+      return false;
+    });
+  };
+  const doSet = () => {
+    if ($templateRefs) {
+      const refs = doSetByRefs($templateRefs);
+      if (refs.length && instance.proxy && instance.proxy.$scope) {
+        instance.proxy.$scope.setData({ r1: 1 }, () => {
+          doSetByRefs(refs);
+        });
+      }
+    }
+  };
+  if ($templateUniElementRefs && $templateUniElementRefs.length) {
+    nextTick(instance, () => {
+      $templateUniElementRefs.forEach((templateRef) => {
+        if (isArray(templateRef.v)) {
+          templateRef.v.forEach((v) => {
+            setTemplateRef(templateRef, v, setupState);
+          });
+        } else {
+          setTemplateRef(templateRef, templateRef.v, setupState);
+        }
+      });
+    });
+  }
+  if ($scope._$setRef) {
+    $scope._$setRef(doSet);
+  } else {
+    nextTick(instance, doSet);
+  }
+}
+function toSkip(value) {
+  if (isObject(value)) {
+    markRaw(value);
+  }
+  return value;
+}
+function findComponentPublicInstance(mpComponents, id) {
+  const mpInstance = mpComponents.find(
+    (com) => com && (com.properties || com.props).uI === id
+  );
+  if (mpInstance) {
+    const vm = mpInstance.$vm;
+    if (vm) {
+      return getExposeProxy(vm.$) || vm;
+    }
+    return toSkip(mpInstance);
+  }
+  return null;
+}
+function setTemplateRef({ r: r2, f: f2 }, refValue, setupState) {
+  if (isFunction(r2)) {
+    r2(refValue, {});
+  } else {
+    const _isString = isString(r2);
+    const _isRef = isRef(r2);
+    if (_isString || _isRef) {
+      if (f2) {
+        if (!_isRef) {
+          return;
+        }
+        if (!isArray(r2.value)) {
+          r2.value = [];
+        }
+        const existing = r2.value;
+        if (existing.indexOf(refValue) === -1) {
+          existing.push(refValue);
+          if (!refValue) {
+            return;
+          }
+          if (refValue.$) {
+            onBeforeUnmount(() => remove(existing, refValue), refValue.$);
+          }
+        }
+      } else if (_isString) {
+        if (hasOwn(setupState, r2)) {
+          setupState[r2] = refValue;
+        }
+      } else if (isRef(r2)) {
+        r2.value = refValue;
+      } else {
+        warnRef(r2);
+      }
+    } else {
+      warnRef(r2);
+    }
+  }
+}
+function warnRef(ref2) {
+  warn("Invalid template ref type:", ref2, `(${typeof ref2})`);
+}
+const queuePostRenderEffect = queuePostFlushCb;
+function mountComponent(initialVNode, options) {
+  const instance = initialVNode.component = createComponentInstance(initialVNode, options.parentComponent, null);
+  instance.renderer = options.mpType ? options.mpType : "component";
+  {
+    instance.ctx.$onApplyOptions = onApplyOptions;
+    instance.ctx.$children = [];
+  }
+  if (options.mpType === "app") {
+    instance.render = NOOP;
+  }
+  if (options.onBeforeSetup) {
+    options.onBeforeSetup(instance, options);
+  }
+  {
+    pushWarningContext(initialVNode);
+    startMeasure(instance, `mount`);
+  }
+  {
+    startMeasure(instance, `init`);
+  }
+  setupComponent(instance);
+  {
+    endMeasure(instance, `init`);
+  }
+  {
+    if (options.parentComponent && instance.proxy) {
+      options.parentComponent.ctx.$children.push(getExposeProxy(instance) || instance.proxy);
+    }
+  }
+  setupRenderEffect(instance);
+  {
+    popWarningContext();
+    endMeasure(instance, `mount`);
+  }
+  return instance.proxy;
+}
+const getFunctionalFallthrough = (attrs) => {
+  let res;
+  for (const key in attrs) {
+    if (key === "class" || key === "style" || isOn(key)) {
+      (res || (res = {}))[key] = attrs[key];
+    }
+  }
+  return res;
+};
+function renderComponentRoot(instance) {
+  const {
+    type: Component2,
+    vnode,
+    proxy,
+    withProxy,
+    props,
+    propsOptions: [propsOptions],
+    slots,
+    attrs,
+    emit: emit2,
+    render,
+    renderCache,
+    data,
+    setupState,
+    ctx,
+    uid: uid2,
+    appContext: {
+      app: {
+        config: {
+          globalProperties: { pruneComponentPropsCache: pruneComponentPropsCache2 }
+        }
+      }
+    },
+    inheritAttrs
+  } = instance;
+  instance.$uniElementIds = /* @__PURE__ */ new Map();
+  instance.$templateRefs = [];
+  instance.$templateUniElementRefs = [];
+  instance.$templateUniElementStyles = {};
+  instance.$ei = 0;
+  pruneComponentPropsCache2(uid2);
+  instance.__counter = instance.__counter === 0 ? 1 : 0;
+  let result;
+  const prev = setCurrentRenderingInstance(instance);
+  try {
+    if (vnode.shapeFlag & 4) {
+      fallthroughAttrs(inheritAttrs, props, propsOptions, attrs);
+      const proxyToUse = withProxy || proxy;
+      result = render.call(
+        proxyToUse,
+        proxyToUse,
+        renderCache,
+        props,
+        setupState,
+        data,
+        ctx
+      );
+    } else {
+      fallthroughAttrs(
+        inheritAttrs,
+        props,
+        propsOptions,
+        Component2.props ? attrs : getFunctionalFallthrough(attrs)
+      );
+      const render2 = Component2;
+      result = render2.length > 1 ? render2(props, { attrs, slots, emit: emit2 }) : render2(
+        props,
+        null
+        /* we know it doesn't need it */
+      );
+    }
+  } catch (err) {
+    handleError(err, instance, 1);
+    result = false;
+  }
+  setRef$1(instance);
+  setCurrentRenderingInstance(prev);
+  return result;
+}
+function fallthroughAttrs(inheritAttrs, props, propsOptions, fallthroughAttrs2) {
+  if (props && fallthroughAttrs2 && inheritAttrs !== false) {
+    const keys = Object.keys(fallthroughAttrs2).filter(
+      (key) => key !== "class" && key !== "style"
+    );
+    if (!keys.length) {
+      return;
+    }
+    if (propsOptions && keys.some(isModelListener)) {
+      keys.forEach((key) => {
+        if (!isModelListener(key) || !(key.slice(9) in propsOptions)) {
+          props[key] = fallthroughAttrs2[key];
+        }
+      });
+    } else {
+      keys.forEach((key) => props[key] = fallthroughAttrs2[key]);
+    }
+  }
+}
+const updateComponentPreRender = (instance) => {
+  pauseTracking();
+  flushPreFlushCbs();
+  resetTracking();
+};
+function componentUpdateScopedSlotsFn() {
+  const scopedSlotsData = this.$scopedSlotsData;
+  if (!scopedSlotsData || scopedSlotsData.length === 0) {
+    return;
+  }
+  const mpInstance = this.ctx.$scope;
+  const oldData = mpInstance.data;
+  const diffData = /* @__PURE__ */ Object.create(null);
+  scopedSlotsData.forEach(({ path, index: index2, data }) => {
+    const oldScopedSlotData = getValueByDataPath(oldData, path);
+    const diffPath = isString(index2) ? `${path}.${index2}` : `${path}[${index2}]`;
+    if (typeof oldScopedSlotData === "undefined" || typeof oldScopedSlotData[index2] === "undefined") {
+      diffData[diffPath] = data;
+    } else {
+      const diffScopedSlotData = diff(
+        data,
+        oldScopedSlotData[index2]
+      );
+      Object.keys(diffScopedSlotData).forEach((name) => {
+        diffData[diffPath + "." + name] = diffScopedSlotData[name];
+      });
+    }
+  });
+  scopedSlotsData.length = 0;
+  if (Object.keys(diffData).length) {
+    mpInstance.setData(diffData);
+  }
+}
+function toggleRecurse({ effect: effect2, update }, allowed) {
+  effect2.allowRecurse = update.allowRecurse = allowed;
+}
+function setupRenderEffect(instance) {
+  const updateScopedSlots = componentUpdateScopedSlotsFn.bind(
+    instance
+  );
+  instance.$updateScopedSlots = () => nextTick$1(() => queueJob(updateScopedSlots));
+  const componentUpdateFn = () => {
+    if (!instance.isMounted) {
+      onBeforeUnmount(() => {
+        setRef$1(instance, true);
+      }, instance);
+      {
+        startMeasure(instance, `patch`);
+      }
+      patch(instance, renderComponentRoot(instance));
+      {
+        endMeasure(instance, `patch`);
+      }
+      {
+        devtoolsComponentAdded(instance);
+      }
+    } else {
+      const { next, bu, u } = instance;
+      {
+        pushWarningContext(next || instance.vnode);
+      }
+      toggleRecurse(instance, false);
+      updateComponentPreRender();
+      if (bu) {
+        invokeArrayFns$1(bu);
+      }
+      toggleRecurse(instance, true);
+      {
+        startMeasure(instance, `patch`);
+      }
+      patch(instance, renderComponentRoot(instance));
+      {
+        endMeasure(instance, `patch`);
+      }
+      if (u) {
+        queuePostRenderEffect(u);
+      }
+      {
+        devtoolsComponentUpdated(instance);
+      }
+      {
+        popWarningContext();
+      }
+    }
+  };
+  const effect2 = instance.effect = new ReactiveEffect(
+    componentUpdateFn,
+    NOOP,
+    () => queueJob(update),
+    instance.scope
+    // track it in component's effect scope
+  );
+  const update = instance.update = () => {
+    if (effect2.dirty) {
+      effect2.run();
+    }
+  };
+  update.id = instance.uid;
+  toggleRecurse(instance, true);
+  {
+    effect2.onTrack = instance.rtc ? (e2) => invokeArrayFns$1(instance.rtc, e2) : void 0;
+    effect2.onTrigger = instance.rtg ? (e2) => invokeArrayFns$1(instance.rtg, e2) : void 0;
+    update.ownerInstance = instance;
+  }
+  {
+    update();
+  }
+}
+function unmountComponent(instance) {
+  const { bum, scope, update, um } = instance;
+  if (bum) {
+    invokeArrayFns$1(bum);
+  }
+  {
+    const parentInstance = instance.parent;
+    if (parentInstance) {
+      const $children = parentInstance.ctx.$children;
+      const target = getExposeProxy(instance) || instance.proxy;
+      const index2 = $children.indexOf(target);
+      if (index2 > -1) {
+        $children.splice(index2, 1);
+      }
+    }
+  }
+  scope.stop();
+  if (update) {
+    update.active = false;
+  }
+  if (um) {
+    queuePostRenderEffect(um);
+  }
+  queuePostRenderEffect(() => {
+    instance.isUnmounted = true;
+  });
+  {
+    devtoolsComponentRemoved(instance);
+  }
+}
+const oldCreateApp = createAppAPI();
+function getTarget() {
+  if (typeof window !== "undefined") {
+    return window;
+  }
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  if (typeof global !== "undefined") {
+    return global;
+  }
+  if (typeof my !== "undefined") {
+    return my;
+  }
+}
+function createVueApp(rootComponent, rootProps = null) {
+  const target = getTarget();
+  target.__VUE__ = true;
+  {
+    setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target);
+  }
+  const app = oldCreateApp(rootComponent, rootProps);
+  const appContext = app._context;
+  initAppConfig(appContext.config);
+  const createVNode2 = (initialVNode) => {
+    initialVNode.appContext = appContext;
+    initialVNode.shapeFlag = 6;
+    return initialVNode;
+  };
+  const createComponent2 = function createComponent22(initialVNode, options) {
+    return mountComponent(createVNode2(initialVNode), options);
+  };
+  const destroyComponent = function destroyComponent2(component) {
+    return component && unmountComponent(component.$);
+  };
+  app.mount = function mount() {
+    rootComponent.render = NOOP;
+    const instance = mountComponent(
+      createVNode2({ type: rootComponent }),
+      {
+        mpType: "app",
+        mpInstance: null,
+        parentComponent: null,
+        slots: [],
+        props: null
+      }
+    );
+    app._instance = instance.$;
+    {
+      devtoolsInitApp(app, version);
+    }
+    instance.$app = app;
+    instance.$createComponent = createComponent2;
+    instance.$destroyComponent = destroyComponent;
+    appContext.$appInstance = instance;
+    return instance;
+  };
+  app.unmount = function unmount() {
+    warn(`Cannot unmount an app.`);
+  };
+  return app;
+}
+function injectLifecycleHook(name, hook, publicThis, instance) {
+  if (isFunction(hook)) {
+    injectHook(name, hook.bind(publicThis), instance);
+  }
+}
+function initHooks$1(options, instance, publicThis) {
+  const mpType = options.mpType || publicThis.$mpType;
+  if (!mpType || mpType === "component" || // instance.renderer 标识页面是否作为组件渲染
+  mpType === "page" && instance.renderer === "component") {
+    return;
+  }
+  Object.keys(options).forEach((name) => {
+    if (isUniLifecycleHook(name, options[name], false)) {
+      const hooks = options[name];
+      if (isArray(hooks)) {
+        hooks.forEach((hook) => injectLifecycleHook(name, hook, publicThis, instance));
+      } else {
+        injectLifecycleHook(name, hooks, publicThis, instance);
+      }
+    }
+  });
+}
+function applyOptions$2(options, instance, publicThis) {
+  initHooks$1(options, instance, publicThis);
+}
+function set(target, key, val) {
+  return target[key] = val;
+}
+function $callMethod(method, ...args) {
+  const fn = this[method];
+  if (fn) {
+    return fn(...args);
+  }
+  console.error(`method ${method} not found`);
+  return null;
+}
+function createErrorHandler(app) {
+  const userErrorHandler = app.config.errorHandler;
+  return function errorHandler(err, instance, info) {
+    if (userErrorHandler) {
+      userErrorHandler(err, instance, info);
+    }
+    const appInstance = app._instance;
+    if (!appInstance || !appInstance.proxy) {
+      throw err;
+    }
+    if (appInstance[ON_ERROR]) {
+      {
+        appInstance.proxy.$callHook(ON_ERROR, err);
+      }
+    } else {
+      logError(err, info, instance ? instance.$.vnode : null, false);
+    }
+  };
+}
+function mergeAsArray(to, from) {
+  return to ? [...new Set([].concat(to, from))] : from;
+}
+function initOptionMergeStrategies(optionMergeStrategies) {
+  UniLifecycleHooks.forEach((name) => {
+    optionMergeStrategies[name] = mergeAsArray;
+  });
+}
+let realAtob;
+const b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+const b64re = /^(?:[A-Za-z\d+/]{4})*?(?:[A-Za-z\d+/]{2}(?:==)?|[A-Za-z\d+/]{3}=?)?$/;
+if (typeof atob !== "function") {
+  realAtob = function(str) {
+    str = String(str).replace(/[\t\n\f\r ]+/g, "");
+    if (!b64re.test(str)) {
+      throw new Error("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
+    }
+    str += "==".slice(2 - (str.length & 3));
+    var bitmap;
+    var result = "";
+    var r1;
+    var r2;
+    var i = 0;
+    for (; i < str.length; ) {
+      bitmap = b64.indexOf(str.charAt(i++)) << 18 | b64.indexOf(str.charAt(i++)) << 12 | (r1 = b64.indexOf(str.charAt(i++))) << 6 | (r2 = b64.indexOf(str.charAt(i++)));
+      result += r1 === 64 ? String.fromCharCode(bitmap >> 16 & 255) : r2 === 64 ? String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255) : String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255, bitmap & 255);
+    }
+    return result;
+  };
+} else {
+  realAtob = atob;
+}
+function b64DecodeUnicode(str) {
+  return decodeURIComponent(realAtob(str).split("").map(function(c2) {
+    return "%" + ("00" + c2.charCodeAt(0).toString(16)).slice(-2);
+  }).join(""));
+}
+function getCurrentUserInfo() {
+  const token = index.getStorageSync("uni_id_token") || "";
+  const tokenArr = token.split(".");
+  if (!token || tokenArr.length !== 3) {
+    return {
+      uid: null,
+      role: [],
+      permission: [],
+      tokenExpired: 0
+    };
+  }
+  let userInfo;
+  try {
+    userInfo = JSON.parse(b64DecodeUnicode(tokenArr[1]));
+  } catch (error) {
+    throw new Error("获取当前用户信息出错,详细错误信息为:" + error.message);
+  }
+  userInfo.tokenExpired = userInfo.exp * 1e3;
+  delete userInfo.exp;
+  delete userInfo.iat;
+  return userInfo;
+}
+function uniIdMixin(globalProperties) {
+  globalProperties.uniIDHasRole = function(roleId) {
+    const { role } = getCurrentUserInfo();
+    return role.indexOf(roleId) > -1;
+  };
+  globalProperties.uniIDHasPermission = function(permissionId) {
+    const { permission } = getCurrentUserInfo();
+    return this.uniIDHasRole("admin") || permission.indexOf(permissionId) > -1;
+  };
+  globalProperties.uniIDTokenValid = function() {
+    const { tokenExpired } = getCurrentUserInfo();
+    return tokenExpired > Date.now();
+  };
+}
+function initApp(app) {
+  const appConfig = app.config;
+  appConfig.errorHandler = invokeCreateErrorHandler(app, createErrorHandler);
+  initOptionMergeStrategies(appConfig.optionMergeStrategies);
+  const globalProperties = appConfig.globalProperties;
+  {
+    uniIdMixin(globalProperties);
+  }
+  {
+    globalProperties.$set = set;
+    globalProperties.$applyOptions = applyOptions$2;
+    globalProperties.$callMethod = $callMethod;
+  }
+  {
+    index.invokeCreateVueAppHook(app);
+  }
+}
+const propsCaches = /* @__PURE__ */ Object.create(null);
+function pruneComponentPropsCache(uid2) {
+  delete propsCaches[uid2];
+}
+function findComponentPropsData(up) {
+  if (!up) {
+    return;
+  }
+  const [uid2, propsId] = up.split(",");
+  if (!propsCaches[uid2]) {
+    return;
+  }
+  return propsCaches[uid2][parseInt(propsId)];
+}
+var plugin = {
+  install(app) {
+    initApp(app);
+    app.config.globalProperties.pruneComponentPropsCache = pruneComponentPropsCache;
+    const oldMount = app.mount;
+    app.mount = function mount(rootContainer) {
+      const instance = oldMount.call(app, rootContainer);
+      const createApp2 = getCreateApp();
+      if (createApp2) {
+        createApp2(instance);
+      } else {
+        if (typeof createMiniProgramApp !== "undefined") {
+          createMiniProgramApp(instance);
+        }
+      }
+      return instance;
+    };
+  }
+};
+function getCreateApp() {
+  const method = "createApp";
+  if (typeof global !== "undefined" && typeof global[method] !== "undefined") {
+    return global[method];
+  } else if (typeof my !== "undefined") {
+    return my[method];
+  }
+}
+function vOn(value, key) {
+  const instance = getCurrentInstance();
+  const ctx = instance.ctx;
+  const extraKey = typeof key !== "undefined" && (ctx.$mpPlatform === "mp-weixin" || ctx.$mpPlatform === "mp-qq" || ctx.$mpPlatform === "mp-xhs") && (isString(key) || typeof key === "number") ? "_" + key : "";
+  const name = "e" + instance.$ei++ + extraKey;
+  const mpInstance = ctx.$scope;
+  if (!value) {
+    delete mpInstance[name];
+    return name;
+  }
+  const existingInvoker = mpInstance[name];
+  if (existingInvoker) {
+    existingInvoker.value = value;
+  } else {
+    mpInstance[name] = createInvoker(value, instance);
+  }
+  return name;
+}
+function createInvoker(initialValue, instance) {
+  const invoker = (e2) => {
+    patchMPEvent(e2);
+    let args = [e2];
+    if (instance && instance.ctx.$getTriggerEventDetail) {
+      if (typeof e2.detail === "number") {
+        e2.detail = instance.ctx.$getTriggerEventDetail(e2.detail);
+      }
+    }
+    if (e2.detail && e2.detail.__args__) {
+      args = e2.detail.__args__;
+    }
+    const eventValue = invoker.value;
+    const invoke = () => callWithAsyncErrorHandling(patchStopImmediatePropagation(e2, eventValue), instance, 5, args);
+    const eventTarget = e2.target;
+    const eventSync = eventTarget ? eventTarget.dataset ? String(eventTarget.dataset.eventsync) === "true" : false : false;
+    if (bubbles.includes(e2.type) && !eventSync) {
+      setTimeout(invoke);
+    } else {
+      const res = invoke();
+      if (e2.type === "input" && (isArray(res) || isPromise(res))) {
+        return;
+      }
+      return res;
+    }
+  };
+  invoker.value = initialValue;
+  return invoker;
+}
+const bubbles = [
+  // touch事件暂不做延迟,否则在 Android 上会影响性能,比如一些拖拽跟手手势等
+  // 'touchstart',
+  // 'touchmove',
+  // 'touchcancel',
+  // 'touchend',
+  "tap",
+  "longpress",
+  "longtap",
+  "transitionend",
+  "animationstart",
+  "animationiteration",
+  "animationend",
+  "touchforcechange"
+];
+function patchMPEvent(event, instance) {
+  if (event.type && event.target) {
+    event.preventDefault = NOOP;
+    event.stopPropagation = NOOP;
+    event.stopImmediatePropagation = NOOP;
+    if (!hasOwn(event, "detail")) {
+      event.detail = {};
+    }
+    if (hasOwn(event, "markerId")) {
+      event.detail = typeof event.detail === "object" ? event.detail : {};
+      event.detail.markerId = event.markerId;
+    }
+    if (isPlainObject(event.detail) && hasOwn(event.detail, "checked") && !hasOwn(event.detail, "value")) {
+      event.detail.value = event.detail.checked;
+    }
+    if (isPlainObject(event.detail)) {
+      event.target = extend({}, event.target, event.detail);
+    }
+  }
+}
+function patchStopImmediatePropagation(e2, value) {
+  if (isArray(value)) {
+    const originalStop = e2.stopImmediatePropagation;
+    e2.stopImmediatePropagation = () => {
+      originalStop && originalStop.call(e2);
+      e2._stopped = true;
+    };
+    return value.map((fn) => (e3) => !e3._stopped && fn(e3));
+  } else {
+    return value;
+  }
+}
+function vFor(source, renderItem) {
+  let ret;
+  if (isArray(source) || isString(source)) {
+    ret = new Array(source.length);
+    for (let i = 0, l = source.length; i < l; i++) {
+      ret[i] = renderItem(source[i], i, i);
+    }
+  } else if (typeof source === "number") {
+    if (!Number.isInteger(source)) {
+      warn(`The v-for range expect an integer value but got ${source}.`);
+      return [];
+    }
+    ret = new Array(source);
+    for (let i = 0; i < source; i++) {
+      ret[i] = renderItem(i + 1, i, i);
+    }
+  } else if (isObject(source)) {
+    if (source[Symbol.iterator]) {
+      ret = Array.from(source, (item, i) => renderItem(item, i, i));
+    } else {
+      const keys = Object.keys(source);
+      ret = new Array(keys.length);
+      for (let i = 0, l = keys.length; i < l; i++) {
+        const key = keys[i];
+        ret[i] = renderItem(source[key], key, i);
+      }
+    }
+  } else {
+    ret = [];
+  }
+  return ret;
+}
+const o = (value, key) => vOn(value, key);
+const f = (source, renderItem) => vFor(source, renderItem);
+const e = (target, ...sources) => extend(target, ...sources);
+const t = (val) => toDisplayString(val);
+function createApp$1(rootComponent, rootProps = null) {
+  rootComponent && (rootComponent.mpType = "app");
+  return createVueApp(rootComponent, rootProps).use(plugin);
+}
+const createSSRApp = createApp$1;
+function getLocaleLanguage$1() {
+  var _a;
+  let localeLanguage = "";
+  {
+    const appBaseInfo = ((_a = wx.getAppBaseInfo) === null || _a === void 0 ? void 0 : _a.call(wx)) || wx.getSystemInfoSync();
+    const language = appBaseInfo && appBaseInfo.language ? appBaseInfo.language : LOCALE_EN;
+    localeLanguage = normalizeLocale(language) || LOCALE_EN;
+  }
+  return localeLanguage;
+}
+function validateProtocolFail(name, msg) {
+  console.warn(`${name}: ${msg}`);
+}
+function validateProtocol(name, data, protocol, onFail) {
+  if (!onFail) {
+    onFail = validateProtocolFail;
+  }
+  for (const key in protocol) {
+    const errMsg = validateProp(key, data[key], protocol[key], !hasOwn(data, key));
+    if (isString(errMsg)) {
+      onFail(name, errMsg);
+    }
+  }
+}
+function validateProtocols(name, args, protocol, onFail) {
+  if (!protocol) {
+    return;
+  }
+  if (!isArray(protocol)) {
+    return validateProtocol(name, args[0] || /* @__PURE__ */ Object.create(null), protocol, onFail);
+  }
+  const len = protocol.length;
+  const argsLen = args.length;
+  for (let i = 0; i < len; i++) {
+    const opts = protocol[i];
+    const data = /* @__PURE__ */ Object.create(null);
+    if (argsLen > i) {
+      data[opts.name] = args[i];
+    }
+    validateProtocol(name, data, { [opts.name]: opts }, onFail);
+  }
+}
+function validateProp(name, value, prop, isAbsent) {
+  if (!isPlainObject(prop)) {
+    prop = { type: prop };
+  }
+  const { type, required, validator } = prop;
+  if (required && isAbsent) {
+    return 'Missing required args: "' + name + '"';
+  }
+  if (value == null && !required) {
+    return;
+  }
+  if (type != null) {
+    let isValid = false;
+    const types = isArray(type) ? type : [type];
+    const expectedTypes = [];
+    for (let i = 0; i < types.length && !isValid; i++) {
+      const { valid, expectedType } = assertType(value, types[i]);
+      expectedTypes.push(expectedType || "");
+      isValid = valid;
+    }
+    if (!isValid) {
+      return getInvalidTypeMessage(name, value, expectedTypes);
+    }
+  }
+  if (validator) {
+    return validator(value);
+  }
+}
+const isSimpleType = /* @__PURE__ */ makeMap("String,Number,Boolean,Function,Symbol");
+function assertType(value, type) {
+  let valid;
+  const expectedType = getType(type);
+  if (isSimpleType(expectedType)) {
+    const t2 = typeof value;
+    valid = t2 === expectedType.toLowerCase();
+    if (!valid && t2 === "object") {
+      valid = value instanceof type;
+    }
+  } else if (expectedType === "Object") {
+    valid = isObject(value);
+  } else if (expectedType === "Array") {
+    valid = isArray(value);
+  } else {
+    {
+      valid = value instanceof type;
+    }
+  }
+  return {
+    valid,
+    expectedType
+  };
+}
+function getInvalidTypeMessage(name, value, expectedTypes) {
+  let message = `Invalid args: type check failed for args "${name}". Expected ${expectedTypes.map(capitalize).join(", ")}`;
+  const expectedType = expectedTypes[0];
+  const receivedType = toRawType(value);
+  const expectedValue = styleValue(value, expectedType);
+  const receivedValue = styleValue(value, receivedType);
+  if (expectedTypes.length === 1 && isExplicable(expectedType) && !isBoolean(expectedType, receivedType)) {
+    message += ` with value ${expectedValue}`;
+  }
+  message += `, got ${receivedType} `;
+  if (isExplicable(receivedType)) {
+    message += `with value ${receivedValue}.`;
+  }
+  return message;
+}
+function getType(ctor) {
+  const match = ctor && ctor.toString().match(/^\s*function (\w+)/);
+  return match ? match[1] : "";
+}
+function styleValue(value, type) {
+  if (type === "String") {
+    return `"${value}"`;
+  } else if (type === "Number") {
+    return `${Number(value)}`;
+  } else {
+    return `${value}`;
+  }
+}
+function isExplicable(type) {
+  const explicitTypes = ["string", "number", "boolean"];
+  return explicitTypes.some((elem) => type.toLowerCase() === elem);
+}
+function isBoolean(...args) {
+  return args.some((elem) => elem.toLowerCase() === "boolean");
+}
+function tryCatch(fn) {
+  return function() {
+    try {
+      return fn.apply(fn, arguments);
+    } catch (e2) {
+      console.error(e2);
+    }
+  };
+}
+let invokeCallbackId = 1;
+const invokeCallbacks = {};
+function addInvokeCallback(id, name, callback, keepAlive = false) {
+  invokeCallbacks[id] = {
+    name,
+    keepAlive,
+    callback
+  };
+  return id;
+}
+function invokeCallback(id, res, extras) {
+  if (typeof id === "number") {
+    const opts = invokeCallbacks[id];
+    if (opts) {
+      if (!opts.keepAlive) {
+        delete invokeCallbacks[id];
+      }
+      return opts.callback(res, extras);
+    }
+  }
+  return res;
+}
+const API_SUCCESS = "success";
+const API_FAIL = "fail";
+const API_COMPLETE = "complete";
+function getApiCallbacks(args) {
+  const apiCallbacks = {};
+  for (const name in args) {
+    const fn = args[name];
+    if (isFunction(fn)) {
+      apiCallbacks[name] = tryCatch(fn);
+      delete args[name];
+    }
+  }
+  return apiCallbacks;
+}
+function normalizeErrMsg(errMsg, name) {
+  if (!errMsg || errMsg.indexOf(":fail") === -1) {
+    return name + ":ok";
+  }
+  return name + errMsg.substring(errMsg.indexOf(":fail"));
+}
+function createAsyncApiCallback(name, args = {}, { beforeAll, beforeSuccess } = {}) {
+  if (!isPlainObject(args)) {
+    args = {};
+  }
+  const { success, fail, complete } = getApiCallbacks(args);
+  const hasSuccess = isFunction(success);
+  const hasFail = isFunction(fail);
+  const hasComplete = isFunction(complete);
+  const callbackId = invokeCallbackId++;
+  addInvokeCallback(callbackId, name, (res) => {
+    res = res || {};
+    res.errMsg = normalizeErrMsg(res.errMsg, name);
+    isFunction(beforeAll) && beforeAll(res);
+    if (res.errMsg === name + ":ok") {
+      isFunction(beforeSuccess) && beforeSuccess(res, args);
+      hasSuccess && success(res);
+    } else {
+      hasFail && fail(res);
+    }
+    hasComplete && complete(res);
+  });
+  return callbackId;
+}
+const HOOK_SUCCESS = "success";
+const HOOK_FAIL = "fail";
+const HOOK_COMPLETE = "complete";
+const globalInterceptors = {};
+const scopedInterceptors = {};
+function wrapperHook(hook, params) {
+  return function(data) {
+    return hook(data, params) || data;
+  };
+}
+function queue(hooks, data, params) {
+  let promise = false;
+  for (let i = 0; i < hooks.length; i++) {
+    const hook = hooks[i];
+    if (promise) {
+      promise = Promise.resolve(wrapperHook(hook, params));
+    } else {
+      const res = hook(data, params);
+      if (isPromise(res)) {
+        promise = Promise.resolve(res);
+      }
+      if (res === false) {
+        return {
+          then() {
+          },
+          catch() {
+          }
+        };
+      }
+    }
+  }
+  return promise || {
+    then(callback) {
+      return callback(data);
+    },
+    catch() {
+    }
+  };
+}
+function wrapperOptions(interceptors2, options = {}) {
+  [HOOK_SUCCESS, HOOK_FAIL, HOOK_COMPLETE].forEach((name) => {
+    const hooks = interceptors2[name];
+    if (!isArray(hooks)) {
+      return;
+    }
+    const oldCallback = options[name];
+    options[name] = function callbackInterceptor(res) {
+      queue(hooks, res, options).then((res2) => {
+        return isFunction(oldCallback) && oldCallback(res2) || res2;
+      });
+    };
+  });
+  return options;
+}
+function wrapperReturnValue(method, returnValue) {
+  const returnValueHooks = [];
+  if (isArray(globalInterceptors.returnValue)) {
+    returnValueHooks.push(...globalInterceptors.returnValue);
+  }
+  const interceptor = scopedInterceptors[method];
+  if (interceptor && isArray(interceptor.returnValue)) {
+    returnValueHooks.push(...interceptor.returnValue);
+  }
+  returnValueHooks.forEach((hook) => {
+    returnValue = hook(returnValue) || returnValue;
+  });
+  return returnValue;
+}
+function getApiInterceptorHooks(method) {
+  const interceptor = /* @__PURE__ */ Object.create(null);
+  Object.keys(globalInterceptors).forEach((hook) => {
+    if (hook !== "returnValue") {
+      interceptor[hook] = globalInterceptors[hook].slice();
+    }
+  });
+  const scopedInterceptor = scopedInterceptors[method];
+  if (scopedInterceptor) {
+    Object.keys(scopedInterceptor).forEach((hook) => {
+      if (hook !== "returnValue") {
+        interceptor[hook] = (interceptor[hook] || []).concat(scopedInterceptor[hook]);
+      }
+    });
+  }
+  return interceptor;
+}
+function invokeApi(method, api, options, params) {
+  const interceptor = getApiInterceptorHooks(method);
+  if (interceptor && Object.keys(interceptor).length) {
+    if (isArray(interceptor.invoke)) {
+      const res = queue(interceptor.invoke, options);
+      return res.then((options2) => {
+        return api(wrapperOptions(getApiInterceptorHooks(method), options2), ...params);
+      });
+    } else {
+      return api(wrapperOptions(interceptor, options), ...params);
+    }
+  }
+  return api(options, ...params);
+}
+function hasCallback(args) {
+  if (isPlainObject(args) && [API_SUCCESS, API_FAIL, API_COMPLETE].find((cb) => isFunction(args[cb]))) {
+    return true;
+  }
+  return false;
+}
+function handlePromise(promise) {
+  return promise;
+}
+function promisify$1(name, fn) {
+  return (args = {}, ...rest) => {
+    if (hasCallback(args)) {
+      return wrapperReturnValue(name, invokeApi(name, fn, extend({}, args), rest));
+    }
+    return wrapperReturnValue(name, handlePromise(new Promise((resolve, reject) => {
+      invokeApi(name, fn, extend({}, args, { success: resolve, fail: reject }), rest);
+    })));
+  };
+}
+function formatApiArgs(args, options) {
+  args[0];
+  {
+    return;
+  }
+}
+function invokeSuccess(id, name, res) {
+  const result = {
+    errMsg: name + ":ok"
+  };
+  return invokeCallback(id, extend(res || {}, result));
+}
+function invokeFail(id, name, errMsg, errRes = {}) {
+  const errMsgPrefix = name + ":fail";
+  let apiErrMsg = "";
+  if (!errMsg) {
+    apiErrMsg = errMsgPrefix;
+  } else if (errMsg.indexOf(errMsgPrefix) === 0) {
+    apiErrMsg = errMsg;
+  } else {
+    apiErrMsg = errMsgPrefix + " " + errMsg;
+  }
+  {
+    delete errRes.errCode;
+  }
+  let res = extend({ errMsg: apiErrMsg }, errRes);
+  return invokeCallback(id, res);
+}
+function beforeInvokeApi(name, args, protocol, options) {
+  {
+    validateProtocols(name, args, protocol);
+  }
+  const errMsg = formatApiArgs(args);
+  if (errMsg) {
+    return errMsg;
+  }
+}
+function parseErrMsg(errMsg) {
+  if (!errMsg || isString(errMsg)) {
+    return errMsg;
+  }
+  if (errMsg.stack) {
+    if (typeof globalThis === "undefined" || !globalThis.harmonyChannel) {
+      console.error(errMsg.message + "\n" + errMsg.stack);
+    }
+    return errMsg.message;
+  }
+  return errMsg;
+}
+function wrapperTaskApi(name, fn, protocol, options) {
+  return (args) => {
+    const id = createAsyncApiCallback(name, args, options);
+    const errMsg = beforeInvokeApi(name, [args], protocol);
+    if (errMsg) {
+      return invokeFail(id, name, errMsg);
+    }
+    return fn(args, {
+      resolve: (res) => invokeSuccess(id, name, res),
+      reject: (errMsg2, errRes) => invokeFail(id, name, parseErrMsg(errMsg2), errRes)
+    });
+  };
+}
+function wrapperSyncApi(name, fn, protocol, options) {
+  return (...args) => {
+    const errMsg = beforeInvokeApi(name, args, protocol);
+    if (errMsg) {
+      throw new Error(errMsg);
+    }
+    return fn.apply(null, args);
+  };
+}
+function wrapperAsyncApi(name, fn, protocol, options) {
+  return wrapperTaskApi(name, fn, protocol, options);
+}
+function defineSyncApi(name, fn, protocol, options) {
+  return wrapperSyncApi(name, fn, protocol);
+}
+function defineAsyncApi(name, fn, protocol, options) {
+  return promisify$1(name, wrapperAsyncApi(name, fn, protocol, options));
+}
+const API_UPX2PX = "upx2px";
+const Upx2pxProtocol = [
+  {
+    name: "upx",
+    type: [Number, String],
+    required: true
+  }
+];
+const EPS = 1e-4;
+const BASE_DEVICE_WIDTH = 750;
+let isIOS = false;
+let deviceWidth = 0;
+let deviceDPR = 0;
+function checkDeviceWidth() {
+  var _a, _b;
+  let windowWidth, pixelRatio, platform;
+  {
+    const windowInfo = ((_a = wx.getWindowInfo) === null || _a === void 0 ? void 0 : _a.call(wx)) || wx.getSystemInfoSync();
+    const deviceInfo = ((_b = wx.getDeviceInfo) === null || _b === void 0 ? void 0 : _b.call(wx)) || wx.getSystemInfoSync();
+    windowWidth = windowInfo.windowWidth;
+    pixelRatio = windowInfo.pixelRatio;
+    platform = deviceInfo.platform;
+  }
+  deviceWidth = windowWidth;
+  deviceDPR = pixelRatio;
+  isIOS = platform === "ios";
+}
+const upx2px = defineSyncApi(API_UPX2PX, (number, newDeviceWidth) => {
+  if (deviceWidth === 0) {
+    checkDeviceWidth();
+  }
+  number = Number(number);
+  if (number === 0) {
+    return 0;
+  }
+  let width = newDeviceWidth || deviceWidth;
+  let result = number / BASE_DEVICE_WIDTH * width;
+  if (result < 0) {
+    result = -result;
+  }
+  result = Math.floor(result + EPS);
+  if (result === 0) {
+    if (deviceDPR === 1 || !isIOS) {
+      result = 1;
+    } else {
+      result = 0.5;
+    }
+  }
+  return number < 0 ? -result : result;
+}, Upx2pxProtocol);
+function __f__(type, filename, ...args) {
+  if (filename) {
+    args.push(filename);
+  }
+  console[type].apply(console, args);
+}
+const API_ADD_INTERCEPTOR = "addInterceptor";
+const API_REMOVE_INTERCEPTOR = "removeInterceptor";
+const AddInterceptorProtocol = [
+  {
+    name: "method",
+    type: [String, Object],
+    required: true
+  }
+];
+const RemoveInterceptorProtocol = AddInterceptorProtocol;
+function mergeInterceptorHook(interceptors2, interceptor) {
+  Object.keys(interceptor).forEach((hook) => {
+    if (isFunction(interceptor[hook])) {
+      interceptors2[hook] = mergeHook(interceptors2[hook], interceptor[hook]);
+    }
+  });
+}
+function removeInterceptorHook(interceptors2, interceptor) {
+  if (!interceptors2 || !interceptor) {
+    return;
+  }
+  Object.keys(interceptor).forEach((name) => {
+    const hooks = interceptors2[name];
+    const hook = interceptor[name];
+    if (isArray(hooks) && isFunction(hook)) {
+      remove(hooks, hook);
+    }
+  });
+}
+function mergeHook(parentVal, childVal) {
+  const res = childVal ? parentVal ? parentVal.concat(childVal) : isArray(childVal) ? childVal : [childVal] : parentVal;
+  return res ? dedupeHooks(res) : res;
+}
+function dedupeHooks(hooks) {
+  const res = [];
+  for (let i = 0; i < hooks.length; i++) {
+    if (res.indexOf(hooks[i]) === -1) {
+      res.push(hooks[i]);
+    }
+  }
+  return res;
+}
+const addInterceptor = defineSyncApi(API_ADD_INTERCEPTOR, (method, interceptor) => {
+  if (isString(method) && isPlainObject(interceptor)) {
+    mergeInterceptorHook(scopedInterceptors[method] || (scopedInterceptors[method] = {}), interceptor);
+  } else if (isPlainObject(method)) {
+    mergeInterceptorHook(globalInterceptors, method);
+  }
+}, AddInterceptorProtocol);
+const removeInterceptor = defineSyncApi(API_REMOVE_INTERCEPTOR, (method, interceptor) => {
+  if (isString(method)) {
+    if (isPlainObject(interceptor)) {
+      removeInterceptorHook(scopedInterceptors[method], interceptor);
+    } else {
+      delete scopedInterceptors[method];
+    }
+  } else if (isPlainObject(method)) {
+    removeInterceptorHook(globalInterceptors, method);
+  }
+}, RemoveInterceptorProtocol);
+const interceptors = {};
+const API_ON = "$on";
+const OnProtocol = [
+  {
+    name: "event",
+    type: String,
+    required: true
+  },
+  {
+    name: "callback",
+    type: Function,
+    required: true
+  }
+];
+const API_ONCE = "$once";
+const OnceProtocol = OnProtocol;
+const API_OFF = "$off";
+const OffProtocol = [
+  {
+    name: "event",
+    type: [String, Array]
+  },
+  {
+    name: "callback",
+    type: [Function, Number]
+  }
+];
+const API_EMIT = "$emit";
+const EmitProtocol = [
+  {
+    name: "event",
+    type: String,
+    required: true
+  }
+];
+class EventBus {
+  constructor() {
+    this.$emitter = new E$1();
+  }
+  on(name, callback) {
+    return this.$emitter.on(name, callback);
+  }
+  once(name, callback) {
+    return this.$emitter.once(name, callback);
+  }
+  off(name, callback) {
+    if (!name) {
+      this.$emitter.e = {};
+      return;
+    }
+    this.$emitter.off(name, callback);
+  }
+  emit(name, ...args) {
+    this.$emitter.emit(name, ...args);
+  }
+}
+const eventBus = new EventBus();
+const $on = defineSyncApi(API_ON, (name, callback) => {
+  eventBus.on(name, callback);
+  return () => eventBus.off(name, callback);
+}, OnProtocol);
+const $once = defineSyncApi(API_ONCE, (name, callback) => {
+  eventBus.once(name, callback);
+  return () => eventBus.off(name, callback);
+}, OnceProtocol);
+const $off = defineSyncApi(API_OFF, (name, callback) => {
+  if (!isArray(name))
+    name = name ? [name] : [];
+  name.forEach((n) => {
+    eventBus.off(n, callback);
+  });
+}, OffProtocol);
+const $emit = defineSyncApi(API_EMIT, (name, ...args) => {
+  eventBus.emit(name, ...args);
+}, EmitProtocol);
+let cid;
+let cidErrMsg;
+let enabled;
+function normalizePushMessage(message) {
+  try {
+    return JSON.parse(message);
+  } catch (e2) {
+  }
+  return message;
+}
+function invokePushCallback(args) {
+  if (args.type === "enabled") {
+    enabled = true;
+  } else if (args.type === "clientId") {
+    cid = args.cid;
+    cidErrMsg = args.errMsg;
+    invokeGetPushCidCallbacks(cid, args.errMsg);
+  } else if (args.type === "pushMsg") {
+    const message = {
+      type: "receive",
+      data: normalizePushMessage(args.message)
+    };
+    for (let i = 0; i < onPushMessageCallbacks.length; i++) {
+      const callback = onPushMessageCallbacks[i];
+      callback(message);
+      if (message.stopped) {
+        break;
+      }
+    }
+  } else if (args.type === "click") {
+    onPushMessageCallbacks.forEach((callback) => {
+      callback({
+        type: "click",
+        data: normalizePushMessage(args.message)
+      });
+    });
+  }
+}
+const getPushCidCallbacks = [];
+function invokeGetPushCidCallbacks(cid2, errMsg) {
+  getPushCidCallbacks.forEach((callback) => {
+    callback(cid2, errMsg);
+  });
+  getPushCidCallbacks.length = 0;
+}
+const API_GET_PUSH_CLIENT_ID = "getPushClientId";
+const getPushClientId = defineAsyncApi(API_GET_PUSH_CLIENT_ID, (_, { resolve, reject }) => {
+  Promise.resolve().then(() => {
+    if (typeof enabled === "undefined") {
+      enabled = false;
+      cid = "";
+      cidErrMsg = "uniPush is not enabled";
+    }
+    getPushCidCallbacks.push((cid2, errMsg) => {
+      if (cid2) {
+        resolve({ cid: cid2 });
+      } else {
+        reject(errMsg);
+      }
+    });
+    if (typeof cid !== "undefined") {
+      invokeGetPushCidCallbacks(cid, cidErrMsg);
+    }
+  });
+});
+const onPushMessageCallbacks = [];
+const onPushMessage = (fn) => {
+  if (onPushMessageCallbacks.indexOf(fn) === -1) {
+    onPushMessageCallbacks.push(fn);
+  }
+};
+const offPushMessage = (fn) => {
+  if (!fn) {
+    onPushMessageCallbacks.length = 0;
+  } else {
+    const index2 = onPushMessageCallbacks.indexOf(fn);
+    if (index2 > -1) {
+      onPushMessageCallbacks.splice(index2, 1);
+    }
+  }
+};
+const SYNC_API_RE = /^\$|__f__|getLocale|setLocale|sendNativeEvent|restoreGlobal|requireGlobal|getCurrentSubNVue|getMenuButtonBoundingClientRect|^report|interceptors|Interceptor$|getSubNVueById|requireNativePlugin|upx2px|rpx2px|hideKeyboard|canIUse|^create|Sync$|Manager$|base64ToArrayBuffer|arrayBufferToBase64|getDeviceInfo|getAppBaseInfo|getWindowInfo|getSystemSetting|getAppAuthorizeSetting/;
+const CONTEXT_API_RE = /^create|Manager$/;
+const CONTEXT_API_RE_EXC = ["createBLEConnection"];
+const TASK_APIS = ["request", "downloadFile", "uploadFile", "connectSocket"];
+const ASYNC_API = ["createBLEConnection"];
+const CALLBACK_API_RE = /^on|^off/;
+function isContextApi(name) {
+  return CONTEXT_API_RE.test(name) && CONTEXT_API_RE_EXC.indexOf(name) === -1;
+}
+function isSyncApi(name) {
+  return SYNC_API_RE.test(name) && ASYNC_API.indexOf(name) === -1;
+}
+function isCallbackApi(name) {
+  return CALLBACK_API_RE.test(name) && name !== "onPush";
+}
+function isTaskApi(name) {
+  return TASK_APIS.indexOf(name) !== -1;
+}
+function shouldPromise(name) {
+  if (isContextApi(name) || isSyncApi(name) || isCallbackApi(name)) {
+    return false;
+  }
+  return true;
+}
+if (!Promise.prototype.finally) {
+  Promise.prototype.finally = function(onfinally) {
+    const promise = this.constructor;
+    return this.then((value) => promise.resolve(onfinally && onfinally()).then(() => value), (reason) => promise.resolve(onfinally && onfinally()).then(() => {
+      throw reason;
+    }));
+  };
+}
+function promisify(name, api) {
+  if (!shouldPromise(name)) {
+    return api;
+  }
+  if (!isFunction(api)) {
+    return api;
+  }
+  return function promiseApi(options = {}, ...rest) {
+    if (isFunction(options.success) || isFunction(options.fail) || isFunction(options.complete)) {
+      return wrapperReturnValue(name, invokeApi(name, api, extend({}, options), rest));
+    }
+    return wrapperReturnValue(name, handlePromise(new Promise((resolve, reject) => {
+      invokeApi(name, api, extend({}, options, {
+        success: resolve,
+        fail: reject
+      }), rest);
+    })));
+  };
+}
+const CALLBACKS = ["success", "fail", "cancel", "complete"];
+function initWrapper(protocols2) {
+  function processCallback(methodName, method, returnValue) {
+    return function(res) {
+      return method(processReturnValue(methodName, res, returnValue));
+    };
+  }
+  function processArgs(methodName, fromArgs, argsOption = {}, returnValue = {}, keepFromArgs = false) {
+    if (isPlainObject(fromArgs)) {
+      const toArgs = keepFromArgs === true ? fromArgs : {};
+      if (isFunction(argsOption)) {
+        argsOption = argsOption(fromArgs, toArgs) || {};
+      }
+      for (const key in fromArgs) {
+        if (hasOwn(argsOption, key)) {
+          let keyOption = argsOption[key];
+          if (isFunction(keyOption)) {
+            keyOption = keyOption(fromArgs[key], fromArgs, toArgs);
+          }
+          if (!keyOption) {
+            console.warn(`微信小程序 ${methodName} 暂不支持 ${key}`);
+          } else if (isString(keyOption)) {
+            toArgs[keyOption] = fromArgs[key];
+          } else if (isPlainObject(keyOption)) {
+            toArgs[keyOption.name ? keyOption.name : key] = keyOption.value;
+          }
+        } else if (CALLBACKS.indexOf(key) !== -1) {
+          const callback = fromArgs[key];
+          if (isFunction(callback)) {
+            toArgs[key] = processCallback(methodName, callback, returnValue);
+          }
+        } else {
+          if (!keepFromArgs && !hasOwn(toArgs, key)) {
+            toArgs[key] = fromArgs[key];
+          }
+        }
+      }
+      return toArgs;
+    } else if (isFunction(fromArgs)) {
+      if (isFunction(argsOption)) {
+        argsOption(fromArgs, {});
+      }
+      fromArgs = processCallback(methodName, fromArgs, returnValue);
+    }
+    return fromArgs;
+  }
+  function processReturnValue(methodName, res, returnValue, keepReturnValue = false) {
+    if (isFunction(protocols2.returnValue)) {
+      res = protocols2.returnValue(methodName, res);
+    }
+    const realKeepReturnValue = keepReturnValue || false;
+    return processArgs(methodName, res, returnValue, {}, realKeepReturnValue);
+  }
+  return function wrapper(methodName, method) {
+    const hasProtocol = hasOwn(protocols2, methodName);
+    if (!hasProtocol && typeof wx[methodName] !== "function") {
+      return method;
+    }
+    const needWrapper = hasProtocol || isFunction(protocols2.returnValue) || isContextApi(methodName) || isTaskApi(methodName);
+    const hasMethod = hasProtocol || isFunction(method);
+    if (!hasProtocol && !method) {
+      return function() {
+        console.error(`微信小程序 暂不支持${methodName}`);
+      };
+    }
+    if (!needWrapper || !hasMethod) {
+      return method;
+    }
+    const protocol = protocols2[methodName];
+    return function(arg1, arg2) {
+      let options = protocol || {};
+      if (isFunction(protocol)) {
+        options = protocol(arg1);
+      }
+      arg1 = processArgs(methodName, arg1, options.args, options.returnValue);
+      const args = [arg1];
+      if (typeof arg2 !== "undefined") {
+        args.push(arg2);
+      }
+      const returnValue = wx[options.name || methodName].apply(wx, args);
+      if (isContextApi(methodName) || isTaskApi(methodName)) {
+        if (returnValue && !returnValue.__v_skip) {
+          returnValue.__v_skip = true;
+        }
+      }
+      if (isSyncApi(methodName)) {
+        return processReturnValue(methodName, returnValue, options.returnValue, isContextApi(methodName));
+      }
+      return returnValue;
+    };
+  };
+}
+const getLocale = () => {
+  const app = isFunction(getApp) && getApp({ allowDefault: true });
+  if (app && app.$vm) {
+    return app.$vm.$locale;
+  }
+  return getLocaleLanguage$1();
+};
+const setLocale = (locale) => {
+  const app = isFunction(getApp) && getApp();
+  if (!app) {
+    return false;
+  }
+  const oldLocale = app.$vm.$locale;
+  if (oldLocale !== locale) {
+    app.$vm.$locale = locale;
+    onLocaleChangeCallbacks.forEach((fn) => fn({ locale }));
+    return true;
+  }
+  return false;
+};
+const onLocaleChangeCallbacks = [];
+const onLocaleChange = (fn) => {
+  if (onLocaleChangeCallbacks.indexOf(fn) === -1) {
+    onLocaleChangeCallbacks.push(fn);
+  }
+};
+if (typeof global !== "undefined") {
+  global.getLocale = getLocale;
+}
+const UUID_KEY = "__DC_STAT_UUID";
+let deviceId;
+function useDeviceId(global2 = wx) {
+  return function addDeviceId(_, toRes) {
+    deviceId = deviceId || global2.getStorageSync(UUID_KEY);
+    if (!deviceId) {
+      deviceId = Date.now() + "" + Math.floor(Math.random() * 1e7);
+      wx.setStorage({
+        key: UUID_KEY,
+        data: deviceId
+      });
+    }
+    toRes.deviceId = deviceId;
+  };
+}
+function addSafeAreaInsets(fromRes, toRes) {
+  if (fromRes.safeArea) {
+    const safeArea = fromRes.safeArea;
+    toRes.safeAreaInsets = {
+      top: safeArea.top,
+      left: safeArea.left,
+      right: fromRes.windowWidth - safeArea.right,
+      bottom: fromRes.screenHeight - safeArea.bottom
+    };
+  }
+}
+function getOSInfo(system, platform) {
+  let osName = "";
+  let osVersion = "";
+  if (platform && false) {
+    osName = platform;
+    osVersion = system;
+  } else {
+    osName = system.split(" ")[0] || platform;
+    osVersion = system.split(" ")[1] || "";
+  }
+  osName = osName.toLowerCase();
+  switch (osName) {
+    case "harmony":
+    case "ohos":
+    case "openharmony":
+      osName = "harmonyos";
+      break;
+    case "iphone os":
+      osName = "ios";
+      break;
+    case "mac":
+    case "darwin":
+      osName = "macos";
+      break;
+    case "windows_nt":
+      osName = "windows";
+      break;
+  }
+  return {
+    osName,
+    osVersion
+  };
+}
+function populateParameters(fromRes, toRes) {
+  const { brand = "", model = "", system = "", language = "", theme, version: version2, platform, fontSizeSetting, SDKVersion, pixelRatio, deviceOrientation } = fromRes;
+  const { osName, osVersion } = getOSInfo(system, platform);
+  let hostVersion = version2;
+  let deviceType = getGetDeviceType(fromRes, model);
+  let deviceBrand = getDeviceBrand(brand);
+  let _hostName = getHostName(fromRes);
+  let _deviceOrientation = deviceOrientation;
+  let _devicePixelRatio = pixelRatio;
+  let _SDKVersion = SDKVersion;
+  const hostLanguage = (language || "").replace(/_/g, "-");
+  const parameters = {
+    appId: "",
+    appName: "books",
+    appVersion: "1.0.0",
+    appVersionCode: "100",
+    appLanguage: getAppLanguage(hostLanguage),
+    uniCompileVersion: "4.76",
+    uniCompilerVersion: "4.76",
+    uniRuntimeVersion: "4.76",
+    uniPlatform: "mp-weixin",
+    deviceBrand,
+    deviceModel: model,
+    deviceType,
+    devicePixelRatio: _devicePixelRatio,
+    deviceOrientation: _deviceOrientation,
+    osName,
+    osVersion,
+    hostTheme: theme,
+    hostVersion,
+    hostLanguage,
+    hostName: _hostName,
+    hostSDKVersion: _SDKVersion,
+    hostFontSizeSetting: fontSizeSetting,
+    windowTop: 0,
+    windowBottom: 0,
+    // TODO
+    osLanguage: void 0,
+    osTheme: void 0,
+    ua: void 0,
+    hostPackageName: void 0,
+    browserName: void 0,
+    browserVersion: void 0,
+    isUniAppX: false
+  };
+  extend(toRes, parameters);
+}
+function getGetDeviceType(fromRes, model) {
+  let deviceType = fromRes.deviceType || "phone";
+  {
+    const deviceTypeMaps = {
+      ipad: "pad",
+      windows: "pc",
+      mac: "pc"
+    };
+    const deviceTypeMapsKeys = Object.keys(deviceTypeMaps);
+    const _model = model.toLowerCase();
+    for (let index2 = 0; index2 < deviceTypeMapsKeys.length; index2++) {
+      const _m = deviceTypeMapsKeys[index2];
+      if (_model.indexOf(_m) !== -1) {
+        deviceType = deviceTypeMaps[_m];
+        break;
+      }
+    }
+  }
+  return deviceType;
+}
+function getDeviceBrand(brand) {
+  let deviceBrand = brand;
+  if (deviceBrand) {
+    deviceBrand = deviceBrand.toLowerCase();
+  }
+  return deviceBrand;
+}
+function getAppLanguage(defaultLanguage) {
+  return getLocale ? getLocale() : defaultLanguage;
+}
+function getHostName(fromRes) {
+  const _platform = "WeChat";
+  let _hostName = fromRes.hostName || _platform;
+  {
+    if (fromRes.environment) {
+      _hostName = fromRes.environment;
+    } else if (fromRes.host && fromRes.host.env) {
+      _hostName = fromRes.host.env;
+    }
+  }
+  return _hostName;
+}
+const getSystemInfo = {
+  returnValue: (fromRes, toRes) => {
+    addSafeAreaInsets(fromRes, toRes);
+    useDeviceId()(fromRes, toRes);
+    populateParameters(fromRes, toRes);
+  }
+};
+const getSystemInfoSync = getSystemInfo;
+const redirectTo = {};
+const previewImage = {
+  args(fromArgs, toArgs) {
+    let currentIndex = parseInt(fromArgs.current);
+    if (isNaN(currentIndex)) {
+      return;
+    }
+    const urls = fromArgs.urls;
+    if (!isArray(urls)) {
+      return;
+    }
+    const len = urls.length;
+    if (!len) {
+      return;
+    }
+    if (currentIndex < 0) {
+      currentIndex = 0;
+    } else if (currentIndex >= len) {
+      currentIndex = len - 1;
+    }
+    if (currentIndex > 0) {
+      toArgs.current = urls[currentIndex];
+      toArgs.urls = urls.filter((item, index2) => index2 < currentIndex ? item !== urls[currentIndex] : true);
+    } else {
+      toArgs.current = urls[0];
+    }
+    return {
+      indicator: false,
+      loop: false
+    };
+  }
+};
+const showActionSheet = {
+  args(fromArgs, toArgs) {
+    toArgs.alertText = fromArgs.title;
+  }
+};
+const getDeviceInfo = {
+  returnValue: (fromRes, toRes) => {
+    const { brand, model, system = "", platform = "" } = fromRes;
+    let deviceType = getGetDeviceType(fromRes, model);
+    let deviceBrand = getDeviceBrand(brand);
+    useDeviceId()(fromRes, toRes);
+    const { osName, osVersion } = getOSInfo(system, platform);
+    toRes = sortObject(extend(toRes, {
+      deviceType,
+      deviceBrand,
+      deviceModel: model,
+      osName,
+      osVersion
+    }));
+  }
+};
+const getAppBaseInfo = {
+  returnValue: (fromRes, toRes) => {
+    const { version: version2, language, SDKVersion, theme } = fromRes;
+    let _hostName = getHostName(fromRes);
+    let hostLanguage = (language || "").replace(/_/g, "-");
+    const parameters = {
+      hostVersion: version2,
+      hostLanguage,
+      hostName: _hostName,
+      hostSDKVersion: SDKVersion,
+      hostTheme: theme,
+      appId: "",
+      appName: "books",
+      appVersion: "1.0.0",
+      appVersionCode: "100",
+      appLanguage: getAppLanguage(hostLanguage),
+      isUniAppX: false,
+      uniPlatform: "mp-weixin",
+      uniCompileVersion: "4.76",
+      uniCompilerVersion: "4.76",
+      uniRuntimeVersion: "4.76"
+    };
+    extend(toRes, parameters);
+  }
+};
+const getWindowInfo = {
+  returnValue: (fromRes, toRes) => {
+    addSafeAreaInsets(fromRes, toRes);
+    toRes = sortObject(extend(toRes, {
+      windowTop: 0,
+      windowBottom: 0
+    }));
+  }
+};
+const getAppAuthorizeSetting = {
+  returnValue: function(fromRes, toRes) {
+    const { locationReducedAccuracy } = fromRes;
+    toRes.locationAccuracy = "unsupported";
+    if (locationReducedAccuracy === true) {
+      toRes.locationAccuracy = "reduced";
+    } else if (locationReducedAccuracy === false) {
+      toRes.locationAccuracy = "full";
+    }
+  }
+};
+const onError = {
+  args(fromArgs) {
+    const app = getApp({ allowDefault: true }) || {};
+    if (!app.$vm) {
+      if (!wx.$onErrorHandlers) {
+        wx.$onErrorHandlers = [];
+      }
+      wx.$onErrorHandlers.push(fromArgs);
+    } else {
+      injectHook(ON_ERROR, fromArgs, app.$vm.$);
+    }
+  }
+};
+const offError = {
+  args(fromArgs) {
+    const app = getApp({ allowDefault: true }) || {};
+    if (!app.$vm) {
+      if (!wx.$onErrorHandlers) {
+        return;
+      }
+      const index2 = wx.$onErrorHandlers.findIndex((fn) => fn === fromArgs);
+      if (index2 !== -1) {
+        wx.$onErrorHandlers.splice(index2, 1);
+      }
+    } else if (fromArgs.__weh) {
+      const onErrors = app.$vm.$[ON_ERROR];
+      if (onErrors) {
+        const index2 = onErrors.indexOf(fromArgs.__weh);
+        if (index2 > -1) {
+          onErrors.splice(index2, 1);
+        }
+      }
+    }
+  }
+};
+const onSocketOpen = {
+  args() {
+    if (wx.__uni_console__) {
+      if (wx.__uni_console_warned__) {
+        return;
+      }
+      wx.__uni_console_warned__ = true;
+      console.warn(`开发模式下小程序日志回显会使用 socket 连接,为了避免冲突,建议使用 SocketTask 的方式去管理 WebSocket 或手动关闭日志回显功能。[详情](https://uniapp.dcloud.net.cn/tutorial/run/mp-log.html)`);
+    }
+  }
+};
+const onSocketMessage = onSocketOpen;
+const baseApis = {
+  $on,
+  $off,
+  $once,
+  $emit,
+  upx2px,
+  rpx2px: upx2px,
+  interceptors,
+  addInterceptor,
+  removeInterceptor,
+  onCreateVueApp,
+  invokeCreateVueAppHook,
+  getLocale,
+  setLocale,
+  onLocaleChange,
+  getPushClientId,
+  onPushMessage,
+  offPushMessage,
+  invokePushCallback,
+  __f__
+};
+function initUni(api, protocols2, platform = wx) {
+  const wrapper = initWrapper(protocols2);
+  const UniProxyHandlers = {
+    get(target, key) {
+      if (hasOwn(target, key)) {
+        return target[key];
+      }
+      if (hasOwn(api, key)) {
+        return promisify(key, api[key]);
+      }
+      if (hasOwn(baseApis, key)) {
+        return promisify(key, baseApis[key]);
+      }
+      return promisify(key, wrapper(key, platform[key]));
+    }
+  };
+  return new Proxy({}, UniProxyHandlers);
+}
+function initGetProvider(providers) {
+  return function getProvider2({ service, success, fail, complete }) {
+    let res;
+    if (providers[service]) {
+      res = {
+        errMsg: "getProvider:ok",
+        service,
+        provider: providers[service]
+      };
+      isFunction(success) && success(res);
+    } else {
+      res = {
+        errMsg: "getProvider:fail:服务[" + service + "]不存在"
+      };
+      isFunction(fail) && fail(res);
+    }
+    isFunction(complete) && complete(res);
+  };
+}
+const objectKeys = [
+  "qy",
+  "env",
+  "error",
+  "version",
+  "lanDebug",
+  "cloud",
+  "serviceMarket",
+  "router",
+  "worklet",
+  "__webpack_require_UNI_MP_PLUGIN__"
+];
+const singlePageDisableKey = ["lanDebug", "router", "worklet"];
+const launchOption = wx.getLaunchOptionsSync ? wx.getLaunchOptionsSync() : null;
+function isWxKey(key) {
+  if (launchOption && launchOption.scene === 1154 && singlePageDisableKey.includes(key)) {
+    return false;
+  }
+  return objectKeys.indexOf(key) > -1 || typeof wx[key] === "function";
+}
+function initWx() {
+  const newWx = {};
+  for (const key in wx) {
+    if (isWxKey(key)) {
+      newWx[key] = wx[key];
+    }
+  }
+  if (typeof globalThis !== "undefined" && typeof requireMiniProgram === "undefined") {
+    globalThis.wx = newWx;
+  }
+  return newWx;
+}
+const mocks$1 = ["__route__", "__wxExparserNodeId__", "__wxWebviewId__"];
+const getProvider = initGetProvider({
+  oauth: ["weixin"],
+  share: ["weixin"],
+  payment: ["wxpay"],
+  push: ["weixin"]
+});
+function initComponentMocks(component) {
+  const res = /* @__PURE__ */ Object.create(null);
+  mocks$1.forEach((name) => {
+    res[name] = component[name];
+  });
+  return res;
+}
+function createSelectorQuery() {
+  const query = wx$2.createSelectorQuery();
+  const oldIn = query.in;
+  query.in = function newIn(component) {
+    if (component.$scope) {
+      return oldIn.call(this, component.$scope);
+    }
+    return oldIn.call(this, initComponentMocks(component));
+  };
+  return query;
+}
+const wx$2 = initWx();
+if (!wx$2.canIUse("getAppBaseInfo")) {
+  wx$2.getAppBaseInfo = wx$2.getSystemInfoSync;
+}
+if (!wx$2.canIUse("getWindowInfo")) {
+  wx$2.getWindowInfo = wx$2.getSystemInfoSync;
+}
+if (!wx$2.canIUse("getDeviceInfo")) {
+  wx$2.getDeviceInfo = wx$2.getSystemInfoSync;
+}
+let baseInfo = wx$2.getAppBaseInfo && wx$2.getAppBaseInfo();
+if (!baseInfo) {
+  baseInfo = wx$2.getSystemInfoSync();
+}
+const host = baseInfo ? baseInfo.host : null;
+const shareVideoMessage = host && host.env === "SAAASDK" ? wx$2.miniapp.shareVideoMessage : wx$2.shareVideoMessage;
+var shims = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  createSelectorQuery,
+  getProvider,
+  shareVideoMessage
+});
+const compressImage = {
+  args(fromArgs, toArgs) {
+    if (fromArgs.compressedHeight && !toArgs.compressHeight) {
+      toArgs.compressHeight = fromArgs.compressedHeight;
+    }
+    if (fromArgs.compressedWidth && !toArgs.compressWidth) {
+      toArgs.compressWidth = fromArgs.compressedWidth;
+    }
+  }
+};
+var protocols = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  compressImage,
+  getAppAuthorizeSetting,
+  getAppBaseInfo,
+  getDeviceInfo,
+  getSystemInfo,
+  getSystemInfoSync,
+  getWindowInfo,
+  offError,
+  onError,
+  onSocketMessage,
+  onSocketOpen,
+  previewImage,
+  redirectTo,
+  showActionSheet
+});
+const wx$1 = initWx();
+var index = initUni(shims, protocols, wx$1);
+function initRuntimeSocket(hosts, port, id) {
+  if (hosts == "" || port == "" || id == "")
+    return Promise.resolve(null);
+  return hosts.split(",").reduce((promise, host2) => {
+    return promise.then((socket) => {
+      if (socket != null)
+        return Promise.resolve(socket);
+      return tryConnectSocket(host2, port, id);
+    });
+  }, Promise.resolve(null));
+}
+const SOCKET_TIMEOUT = 500;
+function tryConnectSocket(host2, port, id) {
+  return new Promise((resolve, reject) => {
+    const socket = index.connectSocket({
+      url: `ws://${host2}:${port}/${id}`,
+      multiple: true,
+      // 支付宝小程序 是否开启多实例
+      fail() {
+        resolve(null);
+      }
+    });
+    const timer = setTimeout(() => {
+      socket.close({
+        code: 1006,
+        reason: "connect timeout"
+      });
+      resolve(null);
+    }, SOCKET_TIMEOUT);
+    socket.onOpen((e2) => {
+      clearTimeout(timer);
+      resolve(socket);
+    });
+    socket.onClose((e2) => {
+      clearTimeout(timer);
+      resolve(null);
+    });
+    socket.onError((e2) => {
+      clearTimeout(timer);
+      resolve(null);
+    });
+  });
+}
+const CONSOLE_TYPES = ["log", "warn", "error", "info", "debug"];
+const originalConsole = /* @__PURE__ */ CONSOLE_TYPES.reduce((methods, type) => {
+  methods[type] = console[type].bind(console);
+  return methods;
+}, {});
+let sendError = null;
+const errorQueue = /* @__PURE__ */ new Set();
+const errorExtra = {};
+function sendErrorMessages(errors) {
+  if (sendError == null) {
+    errors.forEach((error) => {
+      errorQueue.add(error);
+    });
+    return;
+  }
+  const data = errors.map((err) => {
+    if (typeof err === "string") {
+      return err;
+    }
+    const isPromiseRejection = err && "promise" in err && "reason" in err;
+    const prefix = isPromiseRejection ? "UnhandledPromiseRejection: " : "";
+    if (isPromiseRejection) {
+      err = err.reason;
+    }
+    if (err instanceof Error && err.stack) {
+      if (err.message && !err.stack.includes(err.message)) {
+        return `${prefix}${err.message}
+${err.stack}`;
+      }
+      return `${prefix}${err.stack}`;
+    }
+    if (typeof err === "object" && err !== null) {
+      try {
+        return prefix + JSON.stringify(err);
+      } catch (err2) {
+        return prefix + String(err2);
+      }
+    }
+    return prefix + String(err);
+  }).filter(Boolean);
+  if (data.length > 0) {
+    sendError(JSON.stringify(Object.assign({
+      type: "error",
+      data
+    }, errorExtra)));
+  }
+}
+function setSendError(value, extra = {}) {
+  sendError = value;
+  Object.assign(errorExtra, extra);
+  if (value != null && errorQueue.size > 0) {
+    const errors = Array.from(errorQueue);
+    errorQueue.clear();
+    sendErrorMessages(errors);
+  }
+}
+function initOnError() {
+  function onError2(error) {
+    try {
+      if (typeof PromiseRejectionEvent !== "undefined" && error instanceof PromiseRejectionEvent && error.reason instanceof Error && error.reason.message && error.reason.message.includes(`Cannot create property 'errMsg' on string 'taskId`)) {
+        return;
+      }
+      if (true) {
+        originalConsole.error(error);
+      }
+      sendErrorMessages([error]);
+    } catch (err) {
+      originalConsole.error(err);
+    }
+  }
+  if (typeof index.onError === "function") {
+    index.onError(onError2);
+  }
+  if (typeof index.onUnhandledRejection === "function") {
+    index.onUnhandledRejection(onError2);
+  }
+  return function offError2() {
+    if (typeof index.offError === "function") {
+      index.offError(onError2);
+    }
+    if (typeof index.offUnhandledRejection === "function") {
+      index.offUnhandledRejection(onError2);
+    }
+  };
+}
+function formatMessage(type, args) {
+  try {
+    return {
+      type,
+      args: formatArgs(args)
+    };
+  } catch (e2) {
+  }
+  return {
+    type,
+    args: []
+  };
+}
+function formatArgs(args) {
+  return args.map((arg) => formatArg(arg));
+}
+function formatArg(arg, depth = 0) {
+  if (depth >= 7) {
+    return {
+      type: "object",
+      value: "[Maximum depth reached]"
+    };
+  }
+  const type = typeof arg;
+  switch (type) {
+    case "string":
+      return formatString(arg);
+    case "number":
+      return formatNumber(arg);
+    case "boolean":
+      return formatBoolean(arg);
+    case "object":
+      try {
+        return formatObject(arg, depth);
+      } catch (e2) {
+        return {
+          type: "object",
+          value: {
+            properties: []
+          }
+        };
+      }
+    case "undefined":
+      return formatUndefined();
+    case "function":
+      return formatFunction(arg);
+    case "symbol": {
+      return formatSymbol(arg);
+    }
+    case "bigint":
+      return formatBigInt(arg);
+  }
+}
+function formatFunction(value) {
+  return {
+    type: "function",
+    value: `function ${value.name}() {}`
+  };
+}
+function formatUndefined() {
+  return {
+    type: "undefined"
+  };
+}
+function formatBoolean(value) {
+  return {
+    type: "boolean",
+    value: String(value)
+  };
+}
+function formatNumber(value) {
+  return {
+    type: "number",
+    value: String(value)
+  };
+}
+function formatBigInt(value) {
+  return {
+    type: "bigint",
+    value: String(value)
+  };
+}
+function formatString(value) {
+  return {
+    type: "string",
+    value
+  };
+}
+function formatSymbol(value) {
+  return {
+    type: "symbol",
+    value: value.description
+  };
+}
+function formatObject(value, depth) {
+  if (value === null) {
+    return {
+      type: "null"
+    };
+  }
+  {
+    if (isComponentPublicInstance(value)) {
+      return formatComponentPublicInstance(value, depth);
+    }
+    if (isComponentInternalInstance(value)) {
+      return formatComponentInternalInstance(value, depth);
+    }
+    if (isUniElement(value)) {
+      return formatUniElement(value, depth);
+    }
+    if (isCSSStyleDeclaration(value)) {
+      return formatCSSStyleDeclaration(value, depth);
+    }
+  }
+  if (Array.isArray(value)) {
+    return {
+      type: "object",
+      subType: "array",
+      value: {
+        properties: value.map((v, i) => formatArrayElement(v, i, depth + 1))
+      }
+    };
+  }
+  if (value instanceof Set) {
+    return {
+      type: "object",
+      subType: "set",
+      className: "Set",
+      description: `Set(${value.size})`,
+      value: {
+        entries: Array.from(value).map((v) => formatSetEntry(v, depth + 1))
+      }
+    };
+  }
+  if (value instanceof Map) {
+    return {
+      type: "object",
+      subType: "map",
+      className: "Map",
+      description: `Map(${value.size})`,
+      value: {
+        entries: Array.from(value.entries()).map((v) => formatMapEntry(v, depth + 1))
+      }
+    };
+  }
+  if (value instanceof Promise) {
+    return {
+      type: "object",
+      subType: "promise",
+      value: {
+        properties: []
+      }
+    };
+  }
+  if (value instanceof RegExp) {
+    return {
+      type: "object",
+      subType: "regexp",
+      value: String(value),
+      className: "Regexp"
+    };
+  }
+  if (value instanceof Date) {
+    return {
+      type: "object",
+      subType: "date",
+      value: String(value),
+      className: "Date"
+    };
+  }
+  if (value instanceof Error) {
+    return {
+      type: "object",
+      subType: "error",
+      value: value.message || String(value),
+      className: value.name || "Error"
+    };
+  }
+  let className = void 0;
+  {
+    const constructor = value.constructor;
+    if (constructor) {
+      if (constructor.get$UTSMetadata$) {
+        className = constructor.get$UTSMetadata$().name;
+      }
+    }
+  }
+  let entries = Object.entries(value);
+  if (isHarmonyBuilderParams(value)) {
+    entries = entries.filter(([key]) => key !== "modifier" && key !== "nodeContent");
+  }
+  return {
+    type: "object",
+    className,
+    value: {
+      properties: entries.map((entry) => formatObjectProperty(entry[0], entry[1], depth + 1))
+    }
+  };
+}
+function isHarmonyBuilderParams(value) {
+  return value.modifier && value.modifier._attribute && value.nodeContent;
+}
+function isComponentPublicInstance(value) {
+  return value.$ && isComponentInternalInstance(value.$);
+}
+function isComponentInternalInstance(value) {
+  return value.type && value.uid != null && value.appContext;
+}
+function formatComponentPublicInstance(value, depth) {
+  return {
+    type: "object",
+    className: "ComponentPublicInstance",
+    value: {
+      properties: Object.entries(value.$.type).map(([name, value2]) => formatObjectProperty(name, value2, depth + 1))
+    }
+  };
+}
+function formatComponentInternalInstance(value, depth) {
+  return {
+    type: "object",
+    className: "ComponentInternalInstance",
+    value: {
+      properties: Object.entries(value.type).map(([name, value2]) => formatObjectProperty(name, value2, depth + 1))
+    }
+  };
+}
+function isUniElement(value) {
+  return value.style && value.tagName != null && value.nodeName != null;
+}
+function formatUniElement(value, depth) {
+  return {
+    type: "object",
+    // 非 x 没有 UniElement 的概念
+    // className: 'UniElement',
+    value: {
+      properties: Object.entries(value).filter(([name]) => [
+        "id",
+        "tagName",
+        "nodeName",
+        "dataset",
+        "offsetTop",
+        "offsetLeft",
+        "style"
+      ].includes(name)).map(([name, value2]) => formatObjectProperty(name, value2, depth + 1))
+    }
+  };
+}
+function isCSSStyleDeclaration(value) {
+  return typeof value.getPropertyValue === "function" && typeof value.setProperty === "function" && value.$styles;
+}
+function formatCSSStyleDeclaration(style, depth) {
+  return {
+    type: "object",
+    value: {
+      properties: Object.entries(style.$styles).map(([name, value]) => formatObjectProperty(name, value, depth + 1))
+    }
+  };
+}
+function formatObjectProperty(name, value, depth) {
+  const result = formatArg(value, depth);
+  result.name = name;
+  return result;
+}
+function formatArrayElement(value, index2, depth) {
+  const result = formatArg(value, depth);
+  result.name = `${index2}`;
+  return result;
+}
+function formatSetEntry(value, depth) {
+  return {
+    value: formatArg(value, depth)
+  };
+}
+function formatMapEntry(value, depth) {
+  return {
+    key: formatArg(value[0], depth),
+    value: formatArg(value[1], depth)
+  };
+}
+let sendConsole = null;
+const messageQueue = [];
+const messageExtra = {};
+const EXCEPTION_BEGIN_MARK = "---BEGIN:EXCEPTION---";
+const EXCEPTION_END_MARK = "---END:EXCEPTION---";
+function sendConsoleMessages(messages) {
+  if (sendConsole == null) {
+    messageQueue.push(...messages);
+    return;
+  }
+  sendConsole(JSON.stringify(Object.assign({
+    type: "console",
+    data: messages
+  }, messageExtra)));
+}
+function setSendConsole(value, extra = {}) {
+  sendConsole = value;
+  Object.assign(messageExtra, extra);
+  if (value != null && messageQueue.length > 0) {
+    const messages = messageQueue.slice();
+    messageQueue.length = 0;
+    sendConsoleMessages(messages);
+  }
+}
+const atFileRegex = /^\s*at\s+[\w/./-]+:\d+$/;
+function rewriteConsole() {
+  function wrapConsole(type) {
+    return function(...args) {
+      {
+        const originalArgs = [...args];
+        if (originalArgs.length) {
+          const maybeAtFile = originalArgs[originalArgs.length - 1];
+          if (typeof maybeAtFile === "string" && atFileRegex.test(maybeAtFile)) {
+            originalArgs.pop();
+          }
+        }
+        originalConsole[type](...originalArgs);
+      }
+      if (type === "error" && args.length === 1) {
+        const arg = args[0];
+        if (typeof arg === "string" && arg.startsWith(EXCEPTION_BEGIN_MARK)) {
+          const startIndex = EXCEPTION_BEGIN_MARK.length;
+          const endIndex = arg.length - EXCEPTION_END_MARK.length;
+          sendErrorMessages([arg.slice(startIndex, endIndex)]);
+          return;
+        } else if (arg instanceof Error) {
+          sendErrorMessages([arg]);
+          return;
+        }
+      }
+      sendConsoleMessages([formatMessage(type, args)]);
+    };
+  }
+  if (isConsoleWritable()) {
+    CONSOLE_TYPES.forEach((type) => {
+      console[type] = wrapConsole(type);
+    });
+    return function restoreConsole() {
+      CONSOLE_TYPES.forEach((type) => {
+        console[type] = originalConsole[type];
+      });
+    };
+  } else {
+    {
+      if (typeof index !== "undefined" && index.__f__) {
+        const oldLog = index.__f__;
+        if (oldLog) {
+          index.__f__ = function(...args) {
+            const [type, filename, ...rest] = args;
+            oldLog(type, "", ...rest);
+            sendConsoleMessages([formatMessage(type, [...rest, filename])]);
+          };
+          return function restoreConsole() {
+            index.__f__ = oldLog;
+          };
+        }
+      }
+    }
+  }
+  return function restoreConsole() {
+  };
+}
+function isConsoleWritable() {
+  const value = console.log;
+  const sym = Symbol();
+  try {
+    console.log = sym;
+  } catch (ex) {
+    return false;
+  }
+  const isWritable = console.log === sym;
+  console.log = value;
+  return isWritable;
+}
+function initRuntimeSocketService() {
+  const hosts = "192.168.179.1,192.168.198.1,172.20.10.3,127.0.0.1";
+  const port = "8090";
+  const id = "mp-weixin_Gec5P7";
+  const lazy = typeof swan !== "undefined";
+  let restoreError = lazy ? () => {
+  } : initOnError();
+  let restoreConsole = lazy ? () => {
+  } : rewriteConsole();
+  return Promise.resolve().then(() => {
+    if (lazy) {
+      restoreError = initOnError();
+      restoreConsole = rewriteConsole();
+    }
+    return initRuntimeSocket(hosts, port, id).then((socket) => {
+      if (!socket) {
+        restoreError();
+        restoreConsole();
+        originalConsole.error(wrapError("开发模式下日志通道建立 socket 连接失败。"));
+        {
+          originalConsole.error(wrapError("小程序平台,请勾选不校验合法域名配置。"));
+        }
+        originalConsole.error(wrapError("如果是运行到真机,请确认手机与电脑处于同一网络。"));
+        return false;
+      }
+      {
+        initMiniProgramGlobalFlag();
+      }
+      socket.onClose(() => {
+        {
+          originalConsole.error(wrapError("开发模式下日志通道 socket 连接关闭,请在 HBuilderX 中重新运行。"));
+        }
+        restoreError();
+        restoreConsole();
+      });
+      setSendConsole((data) => {
+        socket.send({
+          data
+        });
+      });
+      setSendError((data) => {
+        socket.send({
+          data
+        });
+      });
+      return true;
+    });
+  });
+}
+const ERROR_CHAR = "‌";
+function wrapError(error) {
+  return `${ERROR_CHAR}${error}${ERROR_CHAR}`;
+}
+function initMiniProgramGlobalFlag() {
+  if (typeof wx$1 !== "undefined") {
+    wx$1.__uni_console__ = true;
+  } else if (typeof my !== "undefined") {
+    my.__uni_console__ = true;
+  } else if (typeof tt !== "undefined") {
+    tt.__uni_console__ = true;
+  } else if (typeof swan !== "undefined") {
+    swan.__uni_console__ = true;
+  } else if (typeof qq !== "undefined") {
+    qq.__uni_console__ = true;
+  } else if (typeof ks !== "undefined") {
+    ks.__uni_console__ = true;
+  } else if (typeof jd !== "undefined") {
+    jd.__uni_console__ = true;
+  } else if (typeof xhs !== "undefined") {
+    xhs.__uni_console__ = true;
+  } else if (typeof has !== "undefined") {
+    has.__uni_console__ = true;
+  } else if (typeof qa !== "undefined") {
+    qa.__uni_console__ = true;
+  }
+}
+initRuntimeSocketService();
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function initVueIds(vueIds, mpInstance) {
+  if (!vueIds) {
+    return;
+  }
+  const ids = vueIds.split(",");
+  const len = ids.length;
+  if (len === 1) {
+    mpInstance._$vueId = ids[0];
+  } else if (len === 2) {
+    mpInstance._$vueId = ids[0];
+    mpInstance._$vuePid = ids[1];
+  }
+}
+const EXTRAS = ["externalClasses"];
+function initExtraOptions(miniProgramComponentOptions, vueOptions) {
+  EXTRAS.forEach((name) => {
+    if (hasOwn(vueOptions, name)) {
+      miniProgramComponentOptions[name] = vueOptions[name];
+    }
+  });
+}
+const WORKLET_RE = /_(.*)_worklet_factory_/;
+function initWorkletMethods(mpMethods, vueMethods) {
+  if (vueMethods) {
+    Object.keys(vueMethods).forEach((name) => {
+      const matches = name.match(WORKLET_RE);
+      if (matches) {
+        const workletName = matches[1];
+        mpMethods[name] = vueMethods[name];
+        mpMethods[workletName] = vueMethods[workletName];
+      }
+    });
+  }
+}
+function initWxsCallMethods(methods, wxsCallMethods) {
+  if (!isArray(wxsCallMethods)) {
+    return;
+  }
+  wxsCallMethods.forEach((callMethod) => {
+    methods[callMethod] = function(args) {
+      return this.$vm[callMethod](args);
+    };
+  });
+}
+function selectAllComponents(mpInstance, selector, $refs) {
+  const components = mpInstance.selectAllComponents(selector);
+  components.forEach((component) => {
+    const ref2 = component.properties.uR;
+    $refs[ref2] = component.$vm || component;
+  });
+}
+function initRefs(instance, mpInstance) {
+  Object.defineProperty(instance, "refs", {
+    get() {
+      const $refs = {};
+      selectAllComponents(mpInstance, ".r", $refs);
+      const forComponents = mpInstance.selectAllComponents(".r-i-f");
+      forComponents.forEach((component) => {
+        const ref2 = component.properties.uR;
+        if (!ref2) {
+          return;
+        }
+        if (!$refs[ref2]) {
+          $refs[ref2] = [];
+        }
+        $refs[ref2].push(component.$vm || component);
+      });
+      return $refs;
+    }
+  });
+}
+function findVmByVueId(instance, vuePid) {
+  const $children = instance.$children;
+  for (let i = $children.length - 1; i >= 0; i--) {
+    const childVm = $children[i];
+    if (childVm.$scope._$vueId === vuePid) {
+      return childVm;
+    }
+  }
+  let parentVm;
+  for (let i = $children.length - 1; i >= 0; i--) {
+    parentVm = findVmByVueId($children[i], vuePid);
+    if (parentVm) {
+      return parentVm;
+    }
+  }
+}
+function getLocaleLanguage() {
+  var _a;
+  let localeLanguage = "";
+  {
+    const appBaseInfo = ((_a = wx.getAppBaseInfo) === null || _a === void 0 ? void 0 : _a.call(wx)) || wx.getSystemInfoSync();
+    const language = appBaseInfo && appBaseInfo.language ? appBaseInfo.language : LOCALE_EN;
+    localeLanguage = normalizeLocale(language) || LOCALE_EN;
+  }
+  return localeLanguage;
+}
+const MP_METHODS = [
+  "createSelectorQuery",
+  "createIntersectionObserver",
+  "selectAllComponents",
+  "selectComponent"
+];
+function createEmitFn(oldEmit, ctx) {
+  return function emit2(event, ...args) {
+    const scope = ctx.$scope;
+    if (scope && event) {
+      const detail = { __args__: args };
+      {
+        scope.triggerEvent(event, detail);
+      }
+    }
+    return oldEmit.apply(this, [event, ...args]);
+  };
+}
+function initBaseInstance(instance, options) {
+  const ctx = instance.ctx;
+  ctx.mpType = options.mpType;
+  ctx.$mpType = options.mpType;
+  ctx.$mpPlatform = "mp-weixin";
+  ctx.$scope = options.mpInstance;
+  {
+    Object.defineProperties(ctx, {
+      // only id
+      [VIRTUAL_HOST_ID]: {
+        get() {
+          const id = this.$scope.data[VIRTUAL_HOST_ID];
+          return id === void 0 ? "" : id;
+        }
+      }
+    });
+  }
+  ctx.$mp = {};
+  {
+    ctx._self = {};
+  }
+  instance.slots = {};
+  if (isArray(options.slots) && options.slots.length) {
+    options.slots.forEach((name) => {
+      instance.slots[name] = true;
+    });
+    if (instance.slots[SLOT_DEFAULT_NAME]) {
+      instance.slots.default = true;
+    }
+  }
+  ctx.getOpenerEventChannel = function() {
+    {
+      return options.mpInstance.getOpenerEventChannel();
+    }
+  };
+  ctx.$hasHook = hasHook;
+  ctx.$callHook = callHook;
+  instance.emit = createEmitFn(instance.emit, ctx);
+}
+function initComponentInstance(instance, options) {
+  initBaseInstance(instance, options);
+  const ctx = instance.ctx;
+  MP_METHODS.forEach((method) => {
+    ctx[method] = function(...args) {
+      const mpInstance = ctx.$scope;
+      if (mpInstance && mpInstance[method]) {
+        return mpInstance[method].apply(mpInstance, args);
+      }
+    };
+  });
+}
+function initMocks(instance, mpInstance, mocks2) {
+  const ctx = instance.ctx;
+  mocks2.forEach((mock) => {
+    if (hasOwn(mpInstance, mock)) {
+      instance[mock] = ctx[mock] = mpInstance[mock];
+    }
+  });
+}
+function hasHook(name) {
+  const hooks = this.$[name];
+  if (hooks && hooks.length) {
+    return true;
+  }
+  return false;
+}
+function callHook(name, args) {
+  if (name === "mounted") {
+    callHook.call(this, "bm");
+    this.$.isMounted = true;
+    name = "m";
+  }
+  const hooks = this.$[name];
+  return hooks && invokeArrayFns(hooks, args);
+}
+const PAGE_INIT_HOOKS = [
+  ON_LOAD,
+  ON_SHOW,
+  ON_HIDE,
+  ON_UNLOAD,
+  ON_RESIZE,
+  ON_TAB_ITEM_TAP,
+  ON_REACH_BOTTOM,
+  ON_PULL_DOWN_REFRESH,
+  ON_ADD_TO_FAVORITES
+  // 'onReady', // lifetimes.ready
+  // 'onPageScroll', // 影响性能,开发者手动注册
+  // 'onShareTimeline', // 右上角菜单,开发者手动注册
+  // 'onShareAppMessage' // 右上角菜单,开发者手动注册
+];
+function findHooks(vueOptions, hooks = /* @__PURE__ */ new Set()) {
+  if (vueOptions) {
+    Object.keys(vueOptions).forEach((name) => {
+      if (isUniLifecycleHook(name, vueOptions[name])) {
+        hooks.add(name);
+      }
+    });
+    {
+      const { extends: extendsOptions, mixins } = vueOptions;
+      if (mixins) {
+        mixins.forEach((mixin) => findHooks(mixin, hooks));
+      }
+      if (extendsOptions) {
+        findHooks(extendsOptions, hooks);
+      }
+    }
+  }
+  return hooks;
+}
+function initHook(mpOptions, hook, excludes) {
+  if (excludes.indexOf(hook) === -1 && !hasOwn(mpOptions, hook)) {
+    mpOptions[hook] = function(args) {
+      return this.$vm && this.$vm.$callHook(hook, args);
+    };
+  }
+}
+const EXCLUDE_HOOKS = [ON_READY];
+function initHooks(mpOptions, hooks, excludes = EXCLUDE_HOOKS) {
+  hooks.forEach((hook) => initHook(mpOptions, hook, excludes));
+}
+function initUnknownHooks(mpOptions, vueOptions, excludes = EXCLUDE_HOOKS) {
+  findHooks(vueOptions).forEach((hook) => initHook(mpOptions, hook, excludes));
+}
+function initRuntimeHooks(mpOptions, runtimeHooks) {
+  if (!runtimeHooks) {
+    return;
+  }
+  const hooks = Object.keys(MINI_PROGRAM_PAGE_RUNTIME_HOOKS);
+  hooks.forEach((hook) => {
+    if (runtimeHooks & MINI_PROGRAM_PAGE_RUNTIME_HOOKS[hook]) {
+      initHook(mpOptions, hook, []);
+    }
+  });
+}
+const findMixinRuntimeHooks = /* @__PURE__ */ once(() => {
+  const runtimeHooks = [];
+  const app = isFunction(getApp) && getApp({ allowDefault: true });
+  if (app && app.$vm && app.$vm.$) {
+    const mixins = app.$vm.$.appContext.mixins;
+    if (isArray(mixins)) {
+      const hooks = Object.keys(MINI_PROGRAM_PAGE_RUNTIME_HOOKS);
+      mixins.forEach((mixin) => {
+        hooks.forEach((hook) => {
+          if (hasOwn(mixin, hook) && !runtimeHooks.includes(hook)) {
+            runtimeHooks.push(hook);
+          }
+        });
+      });
+    }
+  }
+  return runtimeHooks;
+});
+function initMixinRuntimeHooks(mpOptions) {
+  initHooks(mpOptions, findMixinRuntimeHooks());
+}
+const HOOKS = [
+  ON_SHOW,
+  ON_HIDE,
+  ON_ERROR,
+  ON_THEME_CHANGE,
+  ON_PAGE_NOT_FOUND,
+  ON_UNHANDLE_REJECTION
+];
+function parseApp(instance, parseAppOptions) {
+  const internalInstance = instance.$;
+  const appOptions = {
+    globalData: instance.$options && instance.$options.globalData || {},
+    $vm: instance,
+    // mp-alipay 组件 data 初始化比 onLaunch 早,提前挂载
+    onLaunch(options) {
+      this.$vm = instance;
+      const ctx = internalInstance.ctx;
+      if (this.$vm && ctx.$scope && ctx.$callHook) {
+        return;
+      }
+      initBaseInstance(internalInstance, {
+        mpType: "app",
+        mpInstance: this,
+        slots: []
+      });
+      ctx.globalData = this.globalData;
+      instance.$callHook(ON_LAUNCH, options);
+    }
+  };
+  const onErrorHandlers = wx.$onErrorHandlers;
+  if (onErrorHandlers) {
+    onErrorHandlers.forEach((fn) => {
+      injectHook(ON_ERROR, fn, internalInstance);
+    });
+    onErrorHandlers.length = 0;
+  }
+  initLocale(instance);
+  const vueOptions = instance.$.type;
+  initHooks(appOptions, HOOKS);
+  initUnknownHooks(appOptions, vueOptions);
+  {
+    const methods = vueOptions.methods;
+    methods && extend(appOptions, methods);
+  }
+  return appOptions;
+}
+function initCreateApp(parseAppOptions) {
+  return function createApp2(vm) {
+    return App(parseApp(vm));
+  };
+}
+function initCreateSubpackageApp(parseAppOptions) {
+  return function createApp2(vm) {
+    const appOptions = parseApp(vm);
+    const app = isFunction(getApp) && getApp({
+      allowDefault: true
+    });
+    if (!app)
+      return;
+    vm.$.ctx.$scope = app;
+    const globalData = app.globalData;
+    if (globalData) {
+      Object.keys(appOptions.globalData).forEach((name) => {
+        if (!hasOwn(globalData, name)) {
+          globalData[name] = appOptions.globalData[name];
+        }
+      });
+    }
+    Object.keys(appOptions).forEach((name) => {
+      if (!hasOwn(app, name)) {
+        app[name] = appOptions[name];
+      }
+    });
+    initAppLifecycle(appOptions, vm);
+  };
+}
+function initAppLifecycle(appOptions, vm) {
+  if (isFunction(appOptions.onLaunch)) {
+    const args = wx.getLaunchOptionsSync && wx.getLaunchOptionsSync();
+    appOptions.onLaunch(args);
+  }
+  if (isFunction(appOptions.onShow) && wx.onAppShow) {
+    wx.onAppShow((args) => {
+      vm.$callHook("onShow", args);
+    });
+  }
+  if (isFunction(appOptions.onHide) && wx.onAppHide) {
+    wx.onAppHide((args) => {
+      vm.$callHook("onHide", args);
+    });
+  }
+}
+function initLocale(appVm) {
+  const locale = ref(getLocaleLanguage());
+  Object.defineProperty(appVm, "$locale", {
+    get() {
+      return locale.value;
+    },
+    set(v) {
+      locale.value = v;
+    }
+  });
+}
+const builtInProps = [
+  // 百度小程序,快手小程序自定义组件不支持绑定动态事件,动态dataset,故通过props传递事件信息
+  // event-opts
+  "eO",
+  // 组件 ref
+  "uR",
+  // 组件 ref-in-for
+  "uRIF",
+  // 组件 id
+  "uI",
+  // 组件类型 m: 小程序组件
+  "uT",
+  // 组件 props
+  "uP",
+  // 小程序不能直接定义 $slots 的 props,所以通过 vueSlots 转换到 $slots
+  "uS"
+];
+function initDefaultProps(options, isBehavior = false) {
+  const properties = {};
+  if (!isBehavior) {
+    let observerSlots = function(newVal) {
+      const $slots = /* @__PURE__ */ Object.create(null);
+      newVal && newVal.forEach((slotName) => {
+        $slots[slotName] = true;
+      });
+      this.setData({
+        $slots
+      });
+    };
+    builtInProps.forEach((name) => {
+      properties[name] = {
+        type: null,
+        value: ""
+      };
+    });
+    properties.uS = {
+      type: null,
+      value: []
+    };
+    {
+      properties.uS.observer = observerSlots;
+    }
+  }
+  if (options.behaviors) {
+    if (options.behaviors.includes("wx://form-field")) {
+      if (!options.properties || !options.properties.name) {
+        properties.name = {
+          type: null,
+          value: ""
+        };
+      }
+      if (!options.properties || !options.properties.value) {
+        properties.value = {
+          type: null,
+          value: ""
+        };
+      }
+    }
+  }
+  return properties;
+}
+function initVirtualHostProps(options) {
+  const properties = {};
+  {
+    if (options && options.virtualHost) {
+      properties[VIRTUAL_HOST_STYLE] = {
+        type: null,
+        value: ""
+      };
+      properties[VIRTUAL_HOST_CLASS] = {
+        type: null,
+        value: ""
+      };
+      properties[VIRTUAL_HOST_HIDDEN] = {
+        type: null,
+        value: ""
+      };
+      properties[VIRTUAL_HOST_ID] = {
+        type: null,
+        value: ""
+      };
+    }
+  }
+  return properties;
+}
+function initProps(mpComponentOptions) {
+  if (!mpComponentOptions.properties) {
+    mpComponentOptions.properties = {};
+  }
+  extend(mpComponentOptions.properties, initDefaultProps(mpComponentOptions), initVirtualHostProps(mpComponentOptions.options));
+}
+const PROP_TYPES = [String, Number, Boolean, Object, Array, null];
+function parsePropType(type, defaultValue) {
+  if (isArray(type) && type.length === 1) {
+    return type[0];
+  }
+  return type;
+}
+function normalizePropType(type, defaultValue) {
+  const res = parsePropType(type);
+  return PROP_TYPES.indexOf(res) !== -1 ? res : null;
+}
+function initPageProps({ properties }, rawProps) {
+  if (isArray(rawProps)) {
+    rawProps.forEach((key) => {
+      properties[key] = {
+        type: String,
+        value: ""
+      };
+    });
+  } else if (isPlainObject(rawProps)) {
+    Object.keys(rawProps).forEach((key) => {
+      const opts = rawProps[key];
+      if (isPlainObject(opts)) {
+        let value = opts.default;
+        if (isFunction(value)) {
+          value = value();
+        }
+        const type = opts.type;
+        opts.type = normalizePropType(type);
+        properties[key] = {
+          type: opts.type,
+          value
+        };
+      } else {
+        properties[key] = {
+          type: normalizePropType(opts)
+        };
+      }
+    });
+  }
+}
+function findPropsData(properties, isPage2) {
+  return (isPage2 ? findPagePropsData(properties) : findComponentPropsData(resolvePropValue(properties.uP))) || {};
+}
+function findPagePropsData(properties) {
+  const propsData = {};
+  if (isPlainObject(properties)) {
+    Object.keys(properties).forEach((name) => {
+      if (builtInProps.indexOf(name) === -1) {
+        propsData[name] = resolvePropValue(properties[name]);
+      }
+    });
+  }
+  return propsData;
+}
+function initFormField(vm) {
+  const vueOptions = vm.$options;
+  if (isArray(vueOptions.behaviors) && vueOptions.behaviors.includes("uni://form-field")) {
+    vm.$watch("modelValue", () => {
+      vm.$scope && vm.$scope.setData({
+        name: vm.name,
+        value: vm.modelValue
+      });
+    }, {
+      immediate: true
+    });
+  }
+}
+function resolvePropValue(prop) {
+  return prop;
+}
+function initData(_) {
+  return {};
+}
+function initPropsObserver(componentOptions) {
+  const observe = function observe2() {
+    const up = this.properties.uP;
+    if (!up) {
+      return;
+    }
+    if (this.$vm) {
+      updateComponentProps(resolvePropValue(up), this.$vm.$);
+    } else if (resolvePropValue(this.properties.uT) === "m") {
+      updateMiniProgramComponentProperties(resolvePropValue(up), this);
+    }
+  };
+  {
+    if (!componentOptions.observers) {
+      componentOptions.observers = {};
+    }
+    componentOptions.observers.uP = observe;
+  }
+}
+function updateMiniProgramComponentProperties(up, mpInstance) {
+  const prevProps = mpInstance.properties;
+  const nextProps = findComponentPropsData(up) || {};
+  if (hasPropsChanged(prevProps, nextProps, false)) {
+    mpInstance.setData(nextProps);
+  }
+}
+function updateComponentProps(up, instance) {
+  const prevProps = toRaw(instance.props);
+  const nextProps = findComponentPropsData(up) || {};
+  if (hasPropsChanged(prevProps, nextProps)) {
+    updateProps(instance, nextProps, prevProps, false);
+    if (hasQueueJob(instance.update)) {
+      invalidateJob(instance.update);
+    }
+    {
+      instance.update();
+    }
+  }
+}
+function hasPropsChanged(prevProps, nextProps, checkLen = true) {
+  const nextKeys = Object.keys(nextProps);
+  if (checkLen && nextKeys.length !== Object.keys(prevProps).length) {
+    return true;
+  }
+  for (let i = 0; i < nextKeys.length; i++) {
+    const key = nextKeys[i];
+    if (nextProps[key] !== prevProps[key]) {
+      return true;
+    }
+  }
+  return false;
+}
+function initBehaviors(vueOptions) {
+  const vueBehaviors = vueOptions.behaviors;
+  let vueProps = vueOptions.props;
+  if (!vueProps) {
+    vueOptions.props = vueProps = [];
+  }
+  const behaviors = [];
+  if (isArray(vueBehaviors)) {
+    vueBehaviors.forEach((behavior) => {
+      behaviors.push(behavior.replace("uni://", "wx://"));
+      if (behavior === "uni://form-field") {
+        if (isArray(vueProps)) {
+          vueProps.push("name");
+          vueProps.push("modelValue");
+        } else {
+          vueProps.name = {
+            type: String,
+            default: ""
+          };
+          vueProps.modelValue = {
+            type: [String, Number, Boolean, Array, Object, Date],
+            default: ""
+          };
+        }
+      }
+    });
+  }
+  return behaviors;
+}
+function applyOptions(componentOptions, vueOptions) {
+  componentOptions.data = initData();
+  componentOptions.behaviors = initBehaviors(vueOptions);
+}
+function parseComponent(vueOptions, { parse, mocks: mocks2, isPage: isPage2, isPageInProject, initRelation: initRelation2, handleLink: handleLink2, initLifetimes: initLifetimes2 }) {
+  vueOptions = vueOptions.default || vueOptions;
+  const options = {
+    multipleSlots: true,
+    // styleIsolation: 'apply-shared',
+    addGlobalClass: true,
+    pureDataPattern: /^uP$/
+  };
+  if (isArray(vueOptions.mixins)) {
+    vueOptions.mixins.forEach((item) => {
+      if (isObject(item.options)) {
+        extend(options, item.options);
+      }
+    });
+  }
+  if (vueOptions.options) {
+    extend(options, vueOptions.options);
+  }
+  const mpComponentOptions = {
+    options,
+    lifetimes: initLifetimes2({ mocks: mocks2, isPage: isPage2, initRelation: initRelation2, vueOptions }),
+    pageLifetimes: {
+      show() {
+        this.$vm && this.$vm.$callHook("onPageShow");
+      },
+      hide() {
+        this.$vm && this.$vm.$callHook("onPageHide");
+      },
+      resize(size2) {
+        this.$vm && this.$vm.$callHook("onPageResize", size2);
+      }
+    },
+    methods: {
+      __l: handleLink2
+    }
+  };
+  {
+    applyOptions(mpComponentOptions, vueOptions);
+  }
+  initProps(mpComponentOptions);
+  initPropsObserver(mpComponentOptions);
+  initExtraOptions(mpComponentOptions, vueOptions);
+  initWxsCallMethods(mpComponentOptions.methods, vueOptions.wxsCallMethods);
+  {
+    initWorkletMethods(mpComponentOptions.methods, vueOptions.methods);
+  }
+  if (parse) {
+    parse(mpComponentOptions, { handleLink: handleLink2 });
+  }
+  return mpComponentOptions;
+}
+function initCreateComponent(parseOptions2) {
+  return function createComponent2(vueComponentOptions) {
+    return Component(parseComponent(vueComponentOptions, parseOptions2));
+  };
+}
+let $createComponentFn;
+let $destroyComponentFn;
+function getAppVm() {
+  return getApp().$vm;
+}
+function $createComponent(initialVNode, options) {
+  if (!$createComponentFn) {
+    $createComponentFn = getAppVm().$createComponent;
+  }
+  const proxy = $createComponentFn(initialVNode, options);
+  return getExposeProxy(proxy.$) || proxy;
+}
+function $destroyComponent(instance) {
+  if (!$destroyComponentFn) {
+    $destroyComponentFn = getAppVm().$destroyComponent;
+  }
+  return $destroyComponentFn(instance);
+}
+function parsePage(vueOptions, parseOptions2) {
+  const { parse, mocks: mocks2, isPage: isPage2, initRelation: initRelation2, handleLink: handleLink2, initLifetimes: initLifetimes2 } = parseOptions2;
+  const miniProgramPageOptions = parseComponent(vueOptions, {
+    mocks: mocks2,
+    isPage: isPage2,
+    isPageInProject: true,
+    initRelation: initRelation2,
+    handleLink: handleLink2,
+    initLifetimes: initLifetimes2
+  });
+  initPageProps(miniProgramPageOptions, (vueOptions.default || vueOptions).props);
+  const methods = miniProgramPageOptions.methods;
+  methods.onLoad = function(query) {
+    {
+      this.options = query;
+    }
+    this.$page = {
+      fullPath: addLeadingSlash(this.route + stringifyQuery(query))
+    };
+    return this.$vm && this.$vm.$callHook(ON_LOAD, query);
+  };
+  initHooks(methods, PAGE_INIT_HOOKS);
+  {
+    initUnknownHooks(methods, vueOptions);
+  }
+  initRuntimeHooks(methods, vueOptions.__runtimeHooks);
+  initMixinRuntimeHooks(methods);
+  parse && parse(miniProgramPageOptions, { handleLink: handleLink2 });
+  return miniProgramPageOptions;
+}
+function initCreatePage(parseOptions2) {
+  return function createPage2(vuePageOptions) {
+    return Component(parsePage(vuePageOptions, parseOptions2));
+  };
+}
+function initCreatePluginApp(parseAppOptions) {
+  return function createApp2(vm) {
+    initAppLifecycle(parseApp(vm), vm);
+  };
+}
+const MPPage = Page;
+const MPComponent = Component;
+function initTriggerEvent(mpInstance) {
+  const oldTriggerEvent = mpInstance.triggerEvent;
+  const newTriggerEvent = function(event, ...args) {
+    return oldTriggerEvent.apply(mpInstance, [
+      customizeEvent(event),
+      ...args
+    ]);
+  };
+  try {
+    mpInstance.triggerEvent = newTriggerEvent;
+  } catch (error) {
+    mpInstance._triggerEvent = newTriggerEvent;
+  }
+}
+function initMiniProgramHook(name, options, isComponent) {
+  const oldHook = options[name];
+  if (!oldHook) {
+    options[name] = function() {
+      initTriggerEvent(this);
+    };
+  } else {
+    options[name] = function(...args) {
+      initTriggerEvent(this);
+      return oldHook.apply(this, args);
+    };
+  }
+}
+Page = function(options) {
+  initMiniProgramHook(ON_LOAD, options);
+  return MPPage(options);
+};
+Component = function(options) {
+  initMiniProgramHook("created", options);
+  const isVueComponent = options.properties && options.properties.uP;
+  if (!isVueComponent) {
+    initProps(options);
+    initPropsObserver(options);
+  }
+  return MPComponent(options);
+};
+function initLifetimes({ mocks: mocks2, isPage: isPage2, initRelation: initRelation2, vueOptions }) {
+  return {
+    attached() {
+      let properties = this.properties;
+      initVueIds(properties.uI, this);
+      const relationOptions = {
+        vuePid: this._$vuePid
+      };
+      initRelation2(this, relationOptions);
+      const mpInstance = this;
+      const isMiniProgramPage = isPage2(mpInstance);
+      let propsData = properties;
+      this.$vm = $createComponent({
+        type: vueOptions,
+        props: findPropsData(propsData, isMiniProgramPage)
+      }, {
+        mpType: isMiniProgramPage ? "page" : "component",
+        mpInstance,
+        slots: properties.uS || {},
+        // vueSlots
+        parentComponent: relationOptions.parent && relationOptions.parent.$,
+        onBeforeSetup(instance, options) {
+          initRefs(instance, mpInstance);
+          initMocks(instance, mpInstance, mocks2);
+          initComponentInstance(instance, options);
+        }
+      });
+      if (!isMiniProgramPage) {
+        initFormField(this.$vm);
+      }
+    },
+    ready() {
+      if (this.$vm) {
+        {
+          this.$vm.$callHook("mounted");
+          this.$vm.$callHook(ON_READY);
+        }
+      }
+    },
+    detached() {
+      if (this.$vm) {
+        pruneComponentPropsCache(this.$vm.$.uid);
+        $destroyComponent(this.$vm);
+      }
+    }
+  };
+}
+const mocks = ["__route__", "__wxExparserNodeId__", "__wxWebviewId__"];
+function isPage(mpInstance) {
+  return !!mpInstance.route;
+}
+function initRelation(mpInstance, detail) {
+  mpInstance.triggerEvent("__l", detail);
+}
+function handleLink(event) {
+  const detail = event.detail || event.value;
+  const vuePid = detail.vuePid;
+  let parentVm;
+  if (vuePid) {
+    parentVm = findVmByVueId(this.$vm, vuePid);
+  }
+  if (!parentVm) {
+    parentVm = this.$vm;
+  }
+  detail.parent = parentVm;
+}
+var parseOptions = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  handleLink,
+  initLifetimes,
+  initRelation,
+  isPage,
+  mocks
+});
+const createApp = initCreateApp();
+const createPage = initCreatePage(parseOptions);
+const createComponent = initCreateComponent(parseOptions);
+const createPluginApp = initCreatePluginApp();
+const createSubpackageApp = initCreateSubpackageApp();
+{
+  wx.createApp = global.createApp = createApp;
+  wx.createPage = createPage;
+  wx.createComponent = createComponent;
+  wx.createPluginApp = global.createPluginApp = createPluginApp;
+  wx.createSubpackageApp = global.createSubpackageApp = createSubpackageApp;
+}
+exports._export_sfc = _export_sfc;
+exports.createSSRApp = createSSRApp;
+exports.e = e;
+exports.f = f;
+exports.index = index;
+exports.o = o;
+exports.t = t;
+//# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map

+ 31 - 0
unpackage/dist/dev/mp-weixin/pages/about/about.js

@@ -0,0 +1,31 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const _sfc_main = {
+  methods: {
+    goBack() {
+      common_vendor.index.navigateBack();
+    },
+    goToUserAgreement() {
+      common_vendor.index.showToast({
+        title: "用户协议",
+        icon: "none"
+      });
+    },
+    goToPrivacyPolicy() {
+      common_vendor.index.showToast({
+        title: "隐私政策",
+        icon: "none"
+      });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: common_vendor.o((...args) => $options.goBack && $options.goBack(...args)),
+    b: common_vendor.o((...args) => $options.goToUserAgreement && $options.goToUserAgreement(...args)),
+    c: common_vendor.o((...args) => $options.goToPrivacyPolicy && $options.goToPrivacyPolicy(...args))
+  };
+}
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-13a78ac6"]]);
+wx.createPage(MiniProgramPage);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/about/about.js.map

+ 5 - 0
unpackage/dist/dev/mp-weixin/pages/about/about.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "关于我们",
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

+ 1 - 0
unpackage/dist/dev/mp-weixin/pages/about/about.wxml

@@ -0,0 +1 @@
+<view class="container data-v-13a78ac6"><view class="header data-v-13a78ac6"><view class="back-btn data-v-13a78ac6" bindtap="{{a}}"><text class="back-icon data-v-13a78ac6">←</text></view><text class="header-title data-v-13a78ac6">关于我们虞</text><view class="header-right data-v-13a78ac6"></view></view><scroll-view class="scroll-content data-v-13a78ac6" scroll-y><view class="app-info-section data-v-13a78ac6"><view class="app-icon-wrapper data-v-13a78ac6"><view class="app-icon data-v-13a78ac6"><text class="app-icon-text data-v-13a78ac6">📖</text></view></view><text class="app-name data-v-13a78ac6">云阅读</text><text class="app-version data-v-13a78ac6">version 1.0.0</text></view><view class="contact-section data-v-13a78ac6"><text class="contact-item data-v-13a78ac6">客服微信: 1574250342</text><text class="contact-item data-v-13a78ac6">在线时间: 8:30am-5:30pm</text></view><view class="legal-section data-v-13a78ac6"><text class="legal-link data-v-13a78ac6" bindtap="{{b}}">用户协议</text><text class="legal-separator data-v-13a78ac6">|</text><text class="legal-link data-v-13a78ac6" bindtap="{{c}}">隐私政策</text></view></scroll-view></view>

+ 117 - 0
unpackage/dist/dev/mp-weixin/pages/about/about.wxss

@@ -0,0 +1,117 @@
+
+.container.data-v-13a78ac6 {
+		width: 100%;
+		height: 100vh;
+		min-height: 100vh;
+		background-color: #FFFFFF;
+		display: flex;
+		padding-top: 30px;
+		box-sizing: border-box;
+		flex-direction: column;
+		box-sizing: border-box;
+		overflow: hidden;
+}
+.header.data-v-13a78ac6 {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		padding-top: calc(20rpx + env(safe-area-inset-top));
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #F0F0F0;
+		position: relative;
+		flex-shrink: 0;
+		box-sizing: border-box;
+}
+.back-btn.data-v-13a78ac6 {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+}
+.back-icon.data-v-13a78ac6 {
+		font-size: 40rpx;
+		color: #333333;
+		font-weight: bold;
+}
+.header-title.data-v-13a78ac6 {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+}
+.header-right.data-v-13a78ac6 {
+		width: 60rpx;
+}
+.scroll-content.data-v-13a78ac6 {
+		flex: 1;
+		width: 100%;
+		height: 0;
+		overflow: hidden;
+		padding-bottom: calc(env(safe-area-inset-bottom));
+		background-color: #FFFFFF;
+		box-sizing: border-box;
+}
+.app-info-section.data-v-13a78ac6 {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 80rpx 30rpx 60rpx;
+}
+.app-icon-wrapper.data-v-13a78ac6 {
+		margin-bottom: 30rpx;
+}
+.app-icon.data-v-13a78ac6 {
+		width: 160rpx;
+		height: 160rpx;
+		background-color: #4FC3F7;
+		border-radius: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 4rpx 12rpx rgba(79, 195, 247, 0.3);
+}
+.app-icon-text.data-v-13a78ac6 {
+		font-size: 80rpx;
+}
+.app-name.data-v-13a78ac6 {
+		font-size: 40rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 15rpx;
+}
+.app-version.data-v-13a78ac6 {
+		font-size: 26rpx;
+		color: #999999;
+}
+.contact-section.data-v-13a78ac6 {
+		padding: 40rpx 30rpx;
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+}
+.contact-item.data-v-13a78ac6 {
+		font-size: 28rpx;
+		color: #999999;
+		line-height: 1.6;
+}
+.legal-section.data-v-13a78ac6 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 60rpx 30rpx;
+		gap: 20rpx;
+}
+.legal-link.data-v-13a78ac6 {
+		font-size: 28rpx;
+		color: #999999;
+		text-decoration: underline;
+}
+.legal-separator.data-v-13a78ac6 {
+		font-size: 28rpx;
+		color: #CCCCCC;
+}

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä