在线阅读 Redis支持服务无密码

package.json

@@ -21,6 +21,7 @@
 		"@great-dream/dvadmin3-celery-web": "^3.1.3",
 		"@iconify/vue": "^4.1.2",
 		"@meetjs/vant4-kit": "^1.0.1",
+		"@popperjs/core": "^2.11.8",
 		"@types/lodash": "^4.17.7",
 		"@vitejs/plugin-vue-jsx": "^4.0.1",
 		"@wangeditor/editor": "^5.1.23",
@@ -34,8 +35,9 @@
 		"echarts": "^5.5.1",
 		"echarts-gl": "^2.0.9",
 		"echarts-wordcloud": "^2.1.0",
-		"element-plus": "^2.8.0",
+		"element-plus": "^2.4.0",
 		"element-tree-line": "^0.2.1",
+		"epubjs": "^0.3.93",
 		"font-awesome": "^4.7.0",
 		"js-cookie": "^3.0.5",
 		"js-table2excel": "^1.1.2",

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

public/version-build

@@ -1 +1 @@
-3.2.0.1761062994644
+3.2.0.1761149071641

src/api/book/reader.ts

@@ -1,12 +1,14 @@
 import { request } from '/@/utils/service';
 
 /**
- * 获取图书文件信息
+ * 获取图书文件
+ * 设置responseType为blob以正确处理文件流
  */
 export function getBookFile(bookId: string | number) {
 	return request({
 		url: `/api/CrudBookModelViewSet/${bookId}/file/`,
 		method: 'get',
+		responseType: 'blob' // 关键修改：设置响应类型为blob以处理文件流
 	});
 }
 
@@ -30,8 +32,11 @@ export function saveReadingProgress(data: {
  */
 export function getReadingProgress(bookId: string | number) {
 	return request({
-		url: `/api/reading-progress/${bookId}/`,
+		url: `/api/reading-progress/by_book/`,
 		method: 'get',
+		params: {
+			book_id: bookId
+		}
 	});
 }
 

src/router/backEnd.ts

@@ -5,7 +5,7 @@ import { useUserInfo } from '/@/stores/userInfo';
 import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
 import { Session } from '/@/utils/storage';
 import { NextLoading } from '/@/utils/loading';
-import { dynamicRoutes, notFoundAndNoPower } from '/@/router/route';
+import { dynamicRoutes, notFoundAndNoPower, staticChildrenRoutes } from '/@/router/route';
 import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
 import { useRoutesList } from '/@/stores/routesList';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
@@ -53,7 +53,9 @@ export async function initBackEndControlRoutes() {
 	// if (res.data.length <= 0) return Promise.resolve(true);
 	// 处理路由（component），替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
 	const {frameIn,frameOut} = handleMenu(res.data)
-	dynamicRoutes[0].children = await backEndComponent(frameIn);
+	const backEndRoutes = await backEndComponent(frameIn);
+	// 合并静态子路由和后端路由
+	dynamicRoutes[0].children = [...staticChildrenRoutes, ...backEndRoutes];
 	// 添加动态路由
 	await setAddRoute();
 	// 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
@@ -64,7 +66,8 @@ export async function setRouters(){
 	const {frameInRoutes,frameOutRoutes} = await useFrontendMenuStore().getRouter()
 	const frameInRouter = toRaw(frameInRoutes)
 	const frameOutRouter = toRaw(frameOutRoutes)
-	dynamicRoutes[0].children = frameInRouter
+	// 合并静态子路由和后端路由
+	dynamicRoutes[0].children = [...staticChildrenRoutes, ...frameInRouter]
 	dynamicRoutes.forEach((item:any)=>{
 		router.addRoute(item)
 	})

src/router/route.ts

@@ -48,6 +48,27 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 	}
 ];
 
+/**
+ * 定义静态子路由（需要合并到动态路由中）
+ * 这些路由不会被后端路由覆盖
+ */
+export const staticChildrenRoutes: Array<RouteRecordRaw> = [
+	{
+		path: '/book/reader',
+		name: 'bookReader',
+		component: () => import('/@/views/book/reader/index.vue'),
+		meta: {
+			title: '在线阅读',
+			isLink: '',
+			isHide: true,
+			isKeepAlive: false,
+			isAffix: false,
+			isIframe: false,
+			icon: 'iconfont icon-book',
+		},
+	}
+];
+
 /**
  * 定义404、401界面
  * @link 参考：https://next.router.vuejs.org/zh/guide/essentials/history-mode.html#netlify

src/views/book/reader/index.vue

@@ -11,7 +11,7 @@
 
 		<div class="reader-main">
 			<!-- 目录侧边栏 -->
-			<el-drawer v-model="tocVisible" title="目录" direction="ltr" size="300px">
+			<el-drawer v-model="tocVisible" title="目录" direction="ltr" size="300px" :z-index="100">
 				<div class="toc-container">
 					<el-tree
 						:data="tocData"
@@ -375,8 +375,10 @@ onUnmounted(() => {
 .book-reader-container {
 	display: flex;
 	flex-direction: column;
-	height: 100vh;
+	height: calc(100vh - 50px);
 	background-color: #f5f5f5;
+	position: relative;
+	z-index: 1;
 }
 
 .reader-header {

src/views/crud_book/CrudBookModelViewSet/crud.tsx

@@ -4,9 +4,12 @@ import * as api from './api';
 // import { request } from '/@/utils/service';
 import { auth } from "/@/utils/authFunction";
 import { AllUploadSuccessValidator } from "./validators";
+import { useRouter } from 'vue-router';
 
 //此处为crudOptions配置
 export default function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsRet {
+	const router = useRouter();
+	
 	const pageRequest = async (query: any) => {
 		return await api.GetList(query);
 	};
@@ -58,7 +61,7 @@ export default function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrud
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
-				width: 200,
+				width: 280,
 				buttons: {
 					view: {
 						type: 'text',
@@ -80,6 +83,22 @@ export default function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrud
 						order: 4,
 						show: auth('CrudBookModelViewSet:Delete')
 					},
+					read: {
+						text: '在线阅读',
+						type: 'text',
+						order: 5,
+						show: true,
+						click: ({ row }: any) => {
+							// 使用路由跳转到阅读器页面
+							router.push({
+								path: '/book/reader',
+								query: {
+									id: row.id,
+									title: row.title
+								}
+							});
+						}
+					},
 				},
 			},
 			columns: {

vite.config.ts

@@ -27,7 +27,12 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 		resolve: { alias },
 		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
 		optimizeDeps: {
-			include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en', 'element-plus/es/locale/lang/zh-tw'],
+			include: [
+				'element-plus/es/locale/lang/zh-cn', 
+				'element-plus/es/locale/lang/en', 
+				'element-plus/es/locale/lang/zh-tw',
+				'@popperjs/core'
+			],
 		},
 		server: {
 			host: '0.0.0.0',