Mini_Program/pages/reader/reader.vue

<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>