uview-plus 3.8.55 → 3.8.106

package/components/u-novel-reader/reader-content.vue

@@ -0,0 +1,226 @@
+<template>
+    <view
+        class="up-novel-reader__content"
+        :style="{ color: themeTokens.text, backgroundColor: themeTokens.background }"
+        @tap="handleTap"
+    >
+        <view v-if="loading" class="up-novel-reader__state">
+            <slot name="loading">
+                <text class="up-novel-reader__state-text">章节加载中</text>
+            </slot>
+        </view>
+        <view v-else-if="error" class="up-novel-reader__state">
+            <slot name="error" :error="error" :retry="retry">
+                <text class="up-novel-reader__state-text">{{ error.message || '章节加载失败' }}</text>
+                <view class="up-novel-reader__state-action" @tap.stop="retry">重试</view>
+            </slot>
+        </view>
+        <view v-else-if="!hasContent" class="up-novel-reader__state">
+            <slot name="empty">
+                <text class="up-novel-reader__state-text">暂无正文</text>
+            </slot>
+        </view>
+        <scroll-view
+            v-else-if="mode === 'scroll'"
+            class="up-novel-reader__scroll"
+            scroll-y
+            :scroll-top="scrollTop"
+            @scroll="handleScroll"
+        >
+            <view class="up-novel-reader__article" :style="articleStyle">
+                <view
+                    v-for="paragraph in paragraphs"
+                    :key="paragraph.index"
+                    class="up-novel-reader__paragraph"
+                    :style="paragraphStyle"
+                >
+                    <text>{{ paragraph.text }}</text>
+                </view>
+            </view>
+        </scroll-view>
+        <swiper
+            v-else
+            class="up-novel-reader__swiper"
+            :current="pageIndex"
+            :duration="pageAnimation ? 300 : 0"
+            :disable-touch="false"
+            @change="handlePageChange"
+        >
+            <swiper-item
+                v-for="page in pages"
+                :key="page.index"
+                class="up-novel-reader__page"
+            >
+                <view class="up-novel-reader__article" :style="articleStyle">
+                    <text class="up-novel-reader__page-text">{{ page.text }}</text>
+                </view>
+            </swiper-item>
+        </swiper>
+    </view>
+</template>
+
+<script>
+    import { addUnit } from '../../libs/function/index'
+
+    export default {
+        name: 'NovelReaderContent',
+        props: {
+            mode: {
+                type: String,
+                default: 'scroll'
+            },
+            paragraphs: {
+                type: Array,
+                default: () => []
+            },
+            pages: {
+                type: Array,
+                default: () => []
+            },
+            pageIndex: {
+                type: Number,
+                default: 0
+            },
+            scrollTop: {
+                type: Number,
+                default: 0
+            },
+            settings: {
+                type: Object,
+                default: () => ({})
+            },
+            themeTokens: {
+                type: Object,
+                default: () => ({})
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            error: {
+                type: Object,
+                default: null
+            },
+            pageAnimation: {
+                type: Boolean,
+                default: true
+            }
+        },
+        emits: ['content-scroll', 'page-change', 'tap-zone', 'retry'],
+        computed: {
+            hasContent() {
+                return this.paragraphs.length > 0 || this.pages.length > 0
+            },
+            articleStyle() {
+                const style = {
+                    width: this.settings.contentWidth || '92%',
+                    color: this.themeTokens.text,
+                    fontSize: addUnit(this.settings.fontSize || 18, 'px'),
+                    lineHeight: this.getLineHeight(this.settings.lineHeight),
+                    fontWeight: this.settings.fontWeight || 400
+                }
+                if (this.settings.fontFamily && this.settings.fontFamily !== 'system') {
+                    style.fontFamily = this.settings.fontFamily
+                }
+                return style
+            },
+            paragraphStyle() {
+                return {
+                    marginBottom: addUnit(this.settings.paragraphSpacing || 0, 'px')
+                }
+            }
+        },
+        methods: {
+            getLineHeight(value) {
+                const lineHeight = Number(value)
+                if (!Number.isFinite(lineHeight)) return '1.8'
+                return lineHeight <= 4 ? String(lineHeight) : addUnit(lineHeight, 'px')
+            },
+            handleScroll(event) {
+                this.$emit('content-scroll', event)
+            },
+            handlePageChange(event) {
+                this.$emit('page-change', {
+                    pageIndex: Number(event && event.detail && event.detail.current) || 0
+                })
+            },
+            handleTap(event) {
+                const detail = event && event.detail ? event.detail : {}
+                const x = Number(detail.x)
+                const width = Number(detail.width) || 0
+                const resolvedWidth = width || (typeof uni !== 'undefined' && uni.getWindowInfo
+                    ? uni.getWindowInfo().windowWidth
+                    : 375)
+                const zone = x < resolvedWidth / 3
+                    ? 'left'
+                    : x > resolvedWidth * 2 / 3
+                        ? 'right'
+                        : 'center'
+                this.$emit('tap-zone', zone)
+            },
+            retry() {
+                this.$emit('retry')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .up-novel-reader__content {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .up-novel-reader__scroll,
+    .up-novel-reader__swiper {
+        width: 100%;
+        height: 100%;
+    }
+
+    .up-novel-reader__article {
+        box-sizing: border-box;
+        min-height: 100%;
+        margin: 0 auto;
+        padding: 32px 0;
+    }
+
+    .up-novel-reader__paragraph {
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+
+    .up-novel-reader__page {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: center;
+        overflow: hidden;
+    }
+
+    .up-novel-reader__page-text {
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+
+    .up-novel-reader__state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        gap: 16px;
+    }
+
+    .up-novel-reader__state-text {
+        color: var(--up-novel-reader-muted, #909399);
+        font-size: 14px;
+    }
+
+    .up-novel-reader__state-action {
+        padding: 8px 18px;
+        color: var(--up-primary, #2979ff);
+        font-size: 14px;
+    }
+</style>

package/components/u-novel-reader/reader-core.js

@@ -0,0 +1,151 @@
+export const DEFAULT_READER_SETTINGS = {
+    theme: 'day',
+    fontSize: 18,
+    lineHeight: 1.8,
+    paragraphSpacing: 16,
+    contentWidth: '92%',
+    fontFamily: 'system',
+    fontWeight: 400,
+    animation: true
+}
+
+const SETTING_KEYS = Object.keys(DEFAULT_READER_SETTINGS)
+const ALLOWED_MODES = ['scroll', 'page']
+
+function clamp(value, min, max, fallback) {
+    const numericValue = Number(value)
+    if (!Number.isFinite(numericValue)) return fallback
+    return Math.min(max, Math.max(min, numericValue))
+}
+
+function normalizeContentWidth(value) {
+    if (typeof value === 'number') {
+        return clamp(value, 40, 100, 92)
+    }
+    if (typeof value === 'string' && value.trim()) {
+        return value.trim()
+    }
+    return DEFAULT_READER_SETTINGS.contentWidth
+}
+
+export function mergeReaderSettings(...sources) {
+    const result = { ...DEFAULT_READER_SETTINGS }
+    sources.filter(Boolean).forEach((source) => {
+        SETTING_KEYS.forEach((key) => {
+            if (source[key] !== undefined) {
+                result[key] = source[key]
+            }
+        })
+    })
+    result.fontSize = clamp(result.fontSize, 12, 48, DEFAULT_READER_SETTINGS.fontSize)
+    result.lineHeight = clamp(result.lineHeight, 1, 3, DEFAULT_READER_SETTINGS.lineHeight)
+    result.paragraphSpacing = clamp(result.paragraphSpacing, 0, 80, DEFAULT_READER_SETTINGS.paragraphSpacing)
+    result.contentWidth = normalizeContentWidth(result.contentWidth)
+    result.fontWeight = result.fontWeight >= 600 ? 600 : 400
+    result.animation = result.animation !== false
+    return result
+}
+
+export function normalizeMode(mode) {
+    return ALLOWED_MODES.includes(mode) ? mode : 'scroll'
+}
+
+export function toggleControls(state) {
+    return {
+        ...state,
+        controlsVisible: !state.controlsVisible
+    }
+}
+
+export function setMode(state, mode) {
+    const normalizedMode = normalizeMode(mode)
+    return {
+        ...state,
+        mode: normalizedMode
+    }
+}
+
+export function setSettings(state, settings) {
+    return {
+        ...state,
+        settings: mergeReaderSettings(state.settings, settings)
+    }
+}
+
+export function setProgress(state, progress) {
+    return {
+        ...state,
+        progress: {
+            ...state.progress,
+            ...progress,
+            pageIndex: Math.max(0, Number(progress && progress.pageIndex) || 0),
+            charOffset: Math.max(0, Number(progress && progress.charOffset) || 0),
+            scrollTop: Math.max(0, Number(progress && progress.scrollTop) || 0)
+        }
+    }
+}
+
+export function toggleBookmark(bookmarks, bookmark) {
+    const list = Array.isArray(bookmarks) ? bookmarks : []
+    const bookmarkId = bookmark && bookmark.id
+    if (!bookmarkId) return list.slice()
+    const existingIndex = list.findIndex((item) => item && item.id === bookmarkId)
+    if (existingIndex === -1) return [...list, bookmark]
+    return list.filter((_, index) => index !== existingIndex)
+}
+
+export function createBookmark({ chapterId, chapterIndex, charOffset, pageIndex, scrollTop, excerpt, createdAt } = {}) {
+    const normalizedChapterId = chapterId == null ? '' : String(chapterId)
+    const normalizedOffset = Math.max(0, Number(charOffset) || 0)
+    return {
+        id: `${normalizedChapterId}:${normalizedOffset}`,
+        chapterId,
+        chapterIndex: Number(chapterIndex) || 0,
+        charOffset: normalizedOffset,
+        pageIndex: Math.max(0, Number(pageIndex) || 0),
+        scrollTop: Math.max(0, Number(scrollTop) || 0),
+        excerpt: excerpt || '',
+        createdAt: Number(createdAt) || Date.now()
+    }
+}
+
+export function startReading(state, timestamp = Date.now()) {
+    return {
+        ...state,
+        active: true,
+        lastActiveAt: timestamp
+    }
+}
+
+export function pauseReading(state, timestamp = Date.now()) {
+    const nextState = consumeReadingTime(state, timestamp)
+    return {
+        ...nextState,
+        active: false
+    }
+}
+
+export function consumeReadingTime(state, timestamp = Date.now()) {
+    if (!state.active || !state.lastActiveAt) return state
+    const elapsed = Math.max(0, timestamp - state.lastActiveAt)
+    return {
+        ...state,
+        readingTime: Math.max(0, Number(state.readingTime) || 0) + elapsed,
+        lastActiveAt: timestamp
+    }
+}
+
+export default {
+    DEFAULT_READER_SETTINGS,
+    mergeReaderSettings,
+    normalizeMode,
+    toggleControls,
+    setMode,
+    setSettings,
+    setProgress,
+    toggleBookmark,
+    createBookmark,
+    startReading,
+    pauseReading,
+    consumeReadingTime
+}

package/components/u-novel-reader/reader-settings.vue

@@ -0,0 +1,325 @@
+<template>
+    <view class="up-novel-reader__settings" :style="settingsStyle">
+            <view class="up-novel-reader__settings-header">
+                <text class="up-novel-reader__settings-title">阅读设置</text>
+                <view
+                    class="up-novel-reader__settings-close"
+                    @tap="close"
+                >
+                    <u-icon name="close" size="18" :color="textColor"></u-icon>
+                </view>
+            </view>
+            <slot v-if="$slots.default"></slot>
+            <scroll-view v-else class="up-novel-reader__settings-scroll" scroll-y>
+                <view class="up-novel-reader__settings-section">
+                    <text class="up-novel-reader__settings-label">主题</text>
+                    <view class="up-novel-reader__theme-list">
+                        <view
+                            v-for="theme in themes"
+                            :key="theme.value"
+                            class="up-novel-reader__theme-option"
+                            :class="{ 'is-active': draftSettings.theme === theme.value }"
+                            :style="themeOptionStyle(theme)"
+                            @tap="setTheme(theme.value)"
+                        >
+                            <text>{{ theme.label }}</text>
+                        </view>
+                    </view>
+                </view>
+                <view class="up-novel-reader__settings-section">
+                    <view class="up-novel-reader__settings-row">
+                        <text class="up-novel-reader__settings-label">字号</text>
+                        <text class="up-novel-reader__settings-value">{{ draftSettings.fontSize }}px</text>
+                    </view>
+                    <u-slider
+                        v-model="draftSettings.fontSize"
+                        min="12"
+                        max="32"
+                        step="1"
+                        active-color="#2979ff"
+                        @change="emitSettings"
+                    ></u-slider>
+                </view>
+                <view class="up-novel-reader__settings-section">
+                    <view class="up-novel-reader__settings-row">
+                        <text class="up-novel-reader__settings-label">行高</text>
+                        <text class="up-novel-reader__settings-value">{{ Number(draftSettings.lineHeight).toFixed(1) }}</text>
+                    </view>
+                    <u-slider
+                        v-model="draftSettings.lineHeight"
+                        min="1.2"
+                        max="2.6"
+                        step="0.1"
+                        active-color="#2979ff"
+                        @change="emitSettings"
+                    ></u-slider>
+                </view>
+                <view class="up-novel-reader__settings-section">
+                    <view class="up-novel-reader__settings-row">
+                        <text class="up-novel-reader__settings-label">段距</text>
+                        <text class="up-novel-reader__settings-value">{{ draftSettings.paragraphSpacing }}px</text>
+                    </view>
+                    <u-slider
+                        v-model="draftSettings.paragraphSpacing"
+                        min="0"
+                        max="36"
+                        step="2"
+                        active-color="#2979ff"
+                        @change="emitSettings"
+                    ></u-slider>
+                </view>
+                <view class="up-novel-reader__settings-section">
+                    <view class="up-novel-reader__settings-row">
+                        <text class="up-novel-reader__settings-label">正文宽度</text>
+                        <text class="up-novel-reader__settings-value">{{ contentWidthPercent }}%</text>
+                    </view>
+                    <u-slider
+                        v-model="contentWidthValue"
+                        min="60"
+                        max="100"
+                        step="2"
+                        active-color="#2979ff"
+                        @change="emitContentWidth"
+                    ></u-slider>
+                </view>
+                <view class="up-novel-reader__settings-section up-novel-reader__settings-options">
+                    <view class="up-novel-reader__settings-option" @tap="toggleWeight">
+                        <view>
+                            <text class="up-novel-reader__settings-label">粗体正文</text>
+                            <text class="up-novel-reader__settings-hint">增强低亮度主题下的可读性</text>
+                        </view>
+                        <u-icon
+                            :name="draftSettings.fontWeight >= 600 ? 'checkmark-circle-fill' : 'circle'"
+                            size="22"
+                            :color="draftSettings.fontWeight >= 600 ? '#2979ff' : mutedColor"
+                        ></u-icon>
+                    </view>
+                    <view class="up-novel-reader__settings-option" @tap="toggleAnimation">
+                        <view>
+                            <text class="up-novel-reader__settings-label">翻页动画</text>
+                            <text class="up-novel-reader__settings-hint">关闭后立即切换页面</text>
+                        </view>
+                        <u-icon
+                            :name="draftSettings.animation ? 'checkmark-circle-fill' : 'circle'"
+                            size="22"
+                            :color="draftSettings.animation ? '#2979ff' : mutedColor"
+                        ></u-icon>
+                    </view>
+                </view>
+                <view class="up-novel-reader__settings-footer">
+                    <view class="up-novel-reader__settings-done" @tap="close">完成</view>
+                </view>
+            </scroll-view>
+    </view>
+</template>
+
+<script>
+    import { mergeReaderSettings } from './reader-core'
+
+    export default {
+        name: 'NovelReaderSettings',
+        props: {
+            settings: {
+                type: Object,
+                default: () => ({})
+            },
+            themeTokens: {
+                type: Object,
+                default: () => ({})
+            },
+        },
+        emits: ['update-settings', 'close'],
+        data() {
+            return {
+                draftSettings: mergeReaderSettings(this.settings),
+                themes: [
+                    { value: 'day', label: '日间', background: '#f7f8fa', text: '#303133' },
+                    { value: 'paper', label: '护眼', background: '#f3ead7', text: '#51483d' },
+                    { value: 'green', label: '豆沙', background: '#e7f1e4', text: '#3f5140' },
+                    { value: 'night', label: '夜间', background: '#202124', text: '#d6d7da' },
+                    { value: 'dark', label: '深色', background: '#111214', text: '#e5e7eb' }
+                ]
+            }
+        },
+        computed: {
+            settingsStyle() {
+                return {
+                    color: this.textColor,
+                    backgroundColor: this.themeTokens.background || '#ffffff'
+                }
+            },
+            textColor() {
+                return this.themeTokens.text || '#303133'
+            },
+            mutedColor() {
+                return this.themeTokens.muted || '#909399'
+            },
+            contentWidthValue: {
+                get() {
+                    const value = Number.parseFloat(this.draftSettings.contentWidth)
+                    return Number.isFinite(value) ? value : 92
+                },
+                set(value) {
+                    this.draftSettings.contentWidth = `${value}%`
+                }
+            },
+            contentWidthPercent() {
+                return Math.round(this.contentWidthValue)
+            }
+        },
+        watch: {
+            settings: {
+                handler(value) {
+                    this.draftSettings = mergeReaderSettings(value)
+                },
+                deep: true
+            },
+        },
+        methods: {
+            themeOptionStyle(theme) {
+                return {
+                    backgroundColor: theme.background,
+                    color: theme.text
+                }
+            },
+            setTheme(theme) {
+                this.draftSettings.theme = theme
+                this.emitSettings()
+            },
+            toggleWeight() {
+                this.draftSettings.fontWeight = this.draftSettings.fontWeight >= 600 ? 400 : 600
+                this.emitSettings()
+            },
+            toggleAnimation() {
+                this.draftSettings.animation = !this.draftSettings.animation
+                this.emitSettings()
+            },
+            emitContentWidth() {
+                this.emitSettings()
+            },
+            emitSettings() {
+                this.draftSettings = mergeReaderSettings(this.draftSettings)
+                this.$emit('update-settings', { ...this.draftSettings })
+            },
+            close() {
+                this.$emit('close')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .up-novel-reader__settings {
+        width: 100%;
+        max-height: 78vh;
+        overflow: hidden;
+    }
+
+    .up-novel-reader__settings-header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 18px 20px 12px;
+    }
+
+    .up-novel-reader__settings-title {
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    .up-novel-reader__settings-close {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+    }
+
+    .up-novel-reader__settings-scroll {
+        max-height: calc(78vh - 64px);
+        padding: 0 20px 24px;
+        box-sizing: border-box;
+    }
+
+    .up-novel-reader__settings-section {
+        padding: 14px 0;
+    }
+
+    .up-novel-reader__settings-row,
+    .up-novel-reader__settings-option {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+    }
+
+    .up-novel-reader__settings-row {
+        min-height: 34px;
+    }
+
+    .up-novel-reader__settings-label {
+        font-size: 14px;
+    }
+
+    .up-novel-reader__settings-value {
+        color: var(--up-novel-reader-muted, #909399);
+        font-size: 13px;
+    }
+
+    .up-novel-reader__settings-hint {
+        color: var(--up-novel-reader-muted, #909399);
+        font-size: 12px;
+    }
+
+    .up-novel-reader__theme-list {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        margin-top: 10px;
+    }
+
+    .up-novel-reader__theme-option {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        height: 42px;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        font-size: 12px;
+    }
+
+    .up-novel-reader__theme-option.is-active {
+        border-color: var(--up-novel-reader-active, #2979ff);
+        box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.18);
+    }
+
+    .up-novel-reader__settings-option {
+        padding: 10px 0;
+    }
+
+    .up-novel-reader__settings-hint {
+        display: block;
+        margin-top: 3px;
+    }
+
+    .up-novel-reader__settings-footer {
+        padding: 10px 0 18px;
+    }
+
+    .up-novel-reader__settings-done {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        height: 42px;
+        border-radius: 8px;
+        color: #ffffff;
+        background-color: var(--up-novel-reader-active, #2979ff);
+        font-size: 14px;
+    }
+</style>