120 lines
4.2 KiB
Plaintext
120 lines
4.2 KiB
Plaintext
<view class="reader" style="background: {{themes[currentTheme].bg}}; color: {{themes[currentTheme].color}}">
|
||
<!-- 顶部工具栏 -->
|
||
<view class="toolbar {{showToolbar ? '' : 'hidden'}}">
|
||
<view class="back" bindtap="goBack">
|
||
<text class="back-icon">←</text>
|
||
</view>
|
||
<view class="title">{{bookTitle}}</view>
|
||
<view class="menu" bindtap="toggleMenu">
|
||
<text class="menu-icon">≡</text>
|
||
</view>
|
||
<view class="reading-time" wx:if="{{isReading}}">
|
||
已阅读 {{Math.floor(readingDuration / 60)}}分{{readingDuration % 60}}秒
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 阅读区域 -->
|
||
<view class="content"
|
||
bindtap="hideTextMenu"
|
||
bindtouchstart="touchStart"
|
||
bindtouchend="touchEnd">
|
||
<view class="chapter-title">第{{currentChapter}}章</view>
|
||
<view class="page-content" style="font-size: {{fontSize}}rpx;">
|
||
<text user-select="true"
|
||
selection-start="{{selectionStart}}"
|
||
selection-end="{{selectionEnd}}"
|
||
bindlongpress="showTextMenu"
|
||
catch:tap="toggleToolbar">{{pages[currentPage]}}</text>
|
||
</view>
|
||
<view class="page-number">{{currentPage + 1}}/{{pages.length}}</view>
|
||
</view>
|
||
|
||
<!-- 底部工具栏 -->
|
||
<view class="bottom-toolbar {{showToolbar ? '' : 'hidden'}}">
|
||
<view class="toolbar-top">
|
||
<view class="prev" bindtap="prevPage">上一页</view>
|
||
<view class="progress">{{currentChapter}}/{{totalChapters}}</view>
|
||
<view class="settings" bindtap="toggleSettings">设置</view>
|
||
<view class="next" bindtap="nextPage">下一页</view>
|
||
</view>
|
||
<view class="toolbar-bottom">
|
||
<view class="current-time">{{currentTime}}</view>
|
||
<view class="reading-progress">已读{{readingProgress}}%</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 目录菜单 -->
|
||
<view class="menu-panel {{showMenu ? 'show' : ''}}">
|
||
<view class="menu-header">
|
||
<text>目录</text>
|
||
<text class="close" bindtap="toggleMenu">×</text>
|
||
</view>
|
||
<scroll-view class="chapter-list" scroll-y>
|
||
<view class="chapter-item {{currentChapter === index + 1 ? 'active' : ''}}"
|
||
wx:for="{{chapters}}"
|
||
wx:key="index"
|
||
bindtap="jumpToChapter"
|
||
data-chapter="{{index + 1}}">
|
||
第{{index + 1}}章
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 设置面板 -->
|
||
<view class="settings-panel {{showSettings ? 'show' : ''}}">
|
||
<view class="settings-header">
|
||
<text>设置</text>
|
||
<text class="close" bindtap="toggleSettings">×</text>
|
||
</view>
|
||
<view class="settings-content">
|
||
<!-- 字体大小设置 -->
|
||
<view class="setting-item">
|
||
<text>字体大小</text>
|
||
<view class="font-size-control">
|
||
<view class="size-btn" bindtap="decreaseFontSize">A-</view>
|
||
<text class="current-size">{{fontSize}}px</text>
|
||
<view class="size-btn" bindtap="increaseFontSize">A+</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主题设置 -->
|
||
<view class="setting-item">
|
||
<text>主题</text>
|
||
<view class="theme-list">
|
||
<view class="theme-item {{currentTheme === theme.id ? 'active' : ''}}"
|
||
wx:for="{{themes}}"
|
||
wx:key="id"
|
||
wx:for-item="theme"
|
||
bindtap="switchTheme"
|
||
data-theme="{{theme.id}}"
|
||
style="background: {{theme.bg}};">
|
||
<text style="color: {{theme.color}}">{{theme.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 亮度调节 -->
|
||
<view class="setting-item">
|
||
<text>屏幕亮度</text>
|
||
<slider class="brightness-slider"
|
||
min="0"
|
||
max="100"
|
||
value="{{brightness}}"
|
||
bind:change="adjustBrightness"
|
||
block-size="20"
|
||
activeColor="#1989fa"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 遮罩层 -->
|
||
<view class="mask {{showSettings || showMenu ? 'show' : ''}}"
|
||
bindtap="closeAllPanels"></view>
|
||
|
||
<!-- 文本选择菜单 -->
|
||
<view class="text-menu {{showTextMenu ? 'show' : ''}}"
|
||
style="top: {{textMenuTop}}px; left: {{textMenuLeft}}px">
|
||
<view class="menu-item" bindtap="addNote">添加笔记</view>
|
||
<view class="menu-item" bindtap="addBookmark">添加书签</view>
|
||
</view>
|
||
</view> |