uview-plus 3.8.86 → 3.8.106

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

@@ -0,0 +1,234 @@
+<template>
+    <view class="up-novel-reader__catalog" :style="catalogStyle">
+            <view class="up-novel-reader__catalog-header">
+                <text class="up-novel-reader__catalog-title">目录</text>
+                <text class="up-novel-reader__catalog-count">{{ chapters.length }} 章</text>
+            </view>
+            <slot v-if="$slots.default"></slot>
+            <scroll-view v-else class="up-novel-reader__catalog-scroll" scroll-y>
+                <view
+                    v-for="chapter in chapters"
+                    :key="chapter.id || chapter.index"
+                    class="up-novel-reader__catalog-item"
+                    :class="{
+                        'is-current': isCurrent(chapter),
+                        'is-locked': chapter.isLocked
+                    }"
+                    :aria-disabled="chapter.isLocked ? 'true' : 'false'"
+                    @tap="selectChapter(chapter)"
+                >
+                    <view class="up-novel-reader__catalog-index">
+                        <u-icon
+                            v-if="chapter.isLocked"
+                            name="lock"
+                            size="14"
+                            :color="mutedColor"
+                        ></u-icon>
+                        <text v-else>{{ displayIndex(chapter) }}</text>
+                    </view>
+                    <text class="up-novel-reader__catalog-item-title">{{ chapter.title || `第${displayIndex(chapter)}章` }}</text>
+                    <u-icon
+                        v-if="isCurrent(chapter)"
+                        name="checkmark"
+                        size="16"
+                        :color="activeColor"
+                    ></u-icon>
+                </view>
+                <view v-if="!chapters.length" class="up-novel-reader__catalog-empty">暂无目录</view>
+                <view v-if="bookmarks.length" class="up-novel-reader__bookmark-section">
+                    <view class="up-novel-reader__bookmark-heading">
+                        <u-icon name="bookmark" size="15" :color="activeColor"></u-icon>
+                        <text>书签</text>
+                    </view>
+                    <view
+                        v-for="bookmark in bookmarks"
+                        :key="bookmark.id"
+                        class="up-novel-reader__bookmark-item"
+                        @tap="selectBookmark(bookmark)"
+                    >
+                        <text class="up-novel-reader__bookmark-excerpt">{{ bookmark.excerpt || '书签位置' }}</text>
+                        <text class="up-novel-reader__bookmark-progress">{{ bookmark.chapterIndex + 1 }} 章</text>
+                    </view>
+                </view>
+            </scroll-view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'NovelReaderCatalog',
+        props: {
+            chapters: {
+                type: Array,
+                default: () => []
+            },
+            currentChapter: {
+                type: Object,
+                default: null
+            },
+            bookmarks: {
+                type: Array,
+                default: () => []
+            },
+            progress: {
+                type: Object,
+                default: () => ({})
+            },
+            themeTokens: {
+                type: Object,
+                default: () => ({})
+            },
+        },
+        emits: ['chapter-select', 'bookmark-select'],
+        computed: {
+            catalogStyle() {
+                return {
+                    color: this.themeTokens.text || '#303133',
+                    backgroundColor: this.themeTokens.background || '#ffffff'
+                }
+            },
+            activeColor() {
+                return this.themeTokens.active || '#2979ff'
+            },
+            mutedColor() {
+                return this.themeTokens.muted || '#909399'
+            }
+        },
+        methods: {
+            displayIndex(chapter) {
+                const index = Number(chapter && chapter.index)
+                return Number.isFinite(index) ? index + 1 : ''
+            },
+            isCurrent(chapter) {
+                return Boolean(
+                    chapter &&
+                    this.currentChapter &&
+                    chapter.id === this.currentChapter.id
+                )
+            },
+            selectChapter(chapter) {
+                if (!chapter || chapter.isLocked) return
+                this.$emit('chapter-select', chapter)
+            },
+            selectBookmark(bookmark) {
+                if (!bookmark) return
+                this.$emit('bookmark-select', bookmark)
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .up-novel-reader__catalog {
+        display: flex;
+        flex-direction: column;
+        width: 82vw;
+        max-width: 360px;
+        height: 100%;
+        box-sizing: border-box;
+    }
+
+    .up-novel-reader__catalog-header {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: space-between;
+        padding: 20px 18px 14px;
+        border-bottom: 1px solid var(--up-novel-reader-border, rgba(48, 49, 51, 0.12));
+    }
+
+    .up-novel-reader__catalog-title {
+        font-size: 20px;
+        font-weight: 600;
+    }
+
+    .up-novel-reader__catalog-count {
+        color: var(--up-novel-reader-muted, #909399);
+        font-size: 12px;
+    }
+
+    .up-novel-reader__catalog-scroll {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .up-novel-reader__catalog-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-height: 48px;
+        padding: 0 18px;
+        gap: 10px;
+    }
+
+    .up-novel-reader__catalog-item.is-current {
+        color: var(--up-novel-reader-active, #2979ff);
+        background-color: rgba(41, 121, 255, 0.08);
+    }
+
+    .up-novel-reader__catalog-item.is-locked {
+        opacity: 0.45;
+    }
+
+    .up-novel-reader__catalog-index {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        color: var(--up-novel-reader-muted, #909399);
+        font-size: 12px;
+    }
+
+    .up-novel-reader__catalog-item-title {
+        flex: 1;
+        overflow: hidden;
+        font-size: 14px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .up-novel-reader__catalog-empty {
+        padding: 36px 18px;
+        color: var(--up-novel-reader-muted, #909399);
+        text-align: center;
+        font-size: 14px;
+    }
+
+    .up-novel-reader__bookmark-section {
+        margin-top: 10px;
+        padding: 16px 18px 24px;
+        border-top: 1px solid var(--up-novel-reader-border, rgba(48, 49, 51, 0.12));
+    }
+
+    .up-novel-reader__bookmark-heading {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 10px;
+        gap: 6px;
+        color: var(--up-novel-reader-muted, #909399);
+        font-size: 13px;
+    }
+
+    .up-novel-reader__bookmark-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 8px 0;
+        gap: 12px;
+    }
+
+    .up-novel-reader__bookmark-excerpt {
+        flex: 1;
+        overflow: hidden;
+        font-size: 13px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .up-novel-reader__bookmark-progress {
+        color: var(--up-novel-reader-muted, #909399);
+        font-size: 11px;
+    }
+</style>

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