uview-ultra 4.5.46

package/components/up-novel-reader/reader-content.uvue

@@ -0,0 +1,167 @@
+<template>
+	<view
+		class="up-novel-reader__content"
+		:style="contentStyle"
+		@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 != null" class="up-novel-reader__state">
+			<slot name="error" :error="error" :retry="retry">
+				<text class="up-novel-reader__state-text">{{ errorMessage }}</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"
+			direction="vertical"
+			: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 setup lang="uts">
+import { computed } from 'vue'
+
+defineOptions({
+	styleIsolation: 'app-and-page',
+	name: 'up-novel-reader-content'
+})
+
+const props = defineProps({
+	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: UTSJSONObject, default: () => ({}) },
+	themeTokens: { type: UTSJSONObject, default: () => ({}) },
+	loading: { type: Boolean, default: false },
+	error: { type: UTSJSONObject, default: null },
+	pageAnimation: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['content-scroll', 'page-change', 'tap-zone', 'retry'])
+
+const paragraphs = computed((): Array<UTSJSONObject> => props.paragraphs as Array<UTSJSONObject>)
+const pages = computed((): Array<UTSJSONObject> => props.pages as Array<UTSJSONObject>)
+const settings = computed((): UTSJSONObject => props.settings == null ? ({} as UTSJSONObject) : props.settings as UTSJSONObject)
+const themeTokens = computed((): UTSJSONObject => props.themeTokens == null ? ({} as UTSJSONObject) : props.themeTokens as UTSJSONObject)
+const hasContent = computed((): boolean => paragraphs.value.length > 0 || pages.value.length > 0)
+
+const valueString = (value: any | null, fallback: string): string => {
+	if (value == null) return fallback
+	return value.toString()
+}
+
+const addUnit = (value: any | null, unit: string): string => {
+	const text = valueString(value, '0')
+	if (text.endsWith('%') || text.endsWith('px') || text.endsWith('rpx') || text.endsWith('vh')) return text
+	return text + unit
+}
+
+const getLineHeight = (value: any | null): string => {
+	const number = value == null ? 1.8 : parseFloat(value.toString())
+	if (isNaN(number)) return '1.8'
+	return number <= 4 ? number.toString() : addUnit(number, 'px')
+}
+
+const contentStyle = computed((): UTSJSONObject => {
+	return {
+		color: valueString(themeTokens.value['text'], '#303133'),
+		backgroundColor: valueString(themeTokens.value['background'], '#f7f8fa')
+	} as UTSJSONObject
+})
+
+const articleStyle = computed((): UTSJSONObject => {
+	const style = {
+		width: valueString(settings.value['contentWidth'], '92%'),
+		color: valueString(themeTokens.value['text'], '#303133'),
+		fontSize: addUnit(settings.value['fontSize'], 'px'),
+		lineHeight: getLineHeight(settings.value['lineHeight']),
+		fontWeight: settings.value['fontWeight'] == null ? 400 : settings.value['fontWeight']
+	} as UTSJSONObject
+	const family = settings.value['fontFamily']
+	if (family != null && family.toString() != 'system') style['fontFamily'] = family
+	return style
+})
+
+const paragraphStyle = computed((): UTSJSONObject => {
+	return { marginBottom: addUnit(settings.value['paragraphSpacing'], 'px') } as UTSJSONObject
+})
+
+const errorMessage = computed((): string => {
+	return valueString((props.error as UTSJSONObject)['message'], '章节加载失败')
+})
+
+const handleScroll = (event: UniScrollEvent): void => {
+	emit('content-scroll', event)
+}
+
+const handlePageChange = (event: UniSwiperChangeEvent): void => {
+	const current = event.detail.current
+	emit('page-change', { pageIndex: current == null ? 0 : current } as UTSJSONObject)
+}
+
+const handleTap = (event: UniPointerEvent): void => {
+	const x = event.x
+	const width = uni.getWindowInfo().windowWidth
+	const zone = x < width / 3 ? 'left' : x > width * 2 / 3 ? 'right' : 'center'
+	emit('tap-zone', zone)
+}
+
+const retry = (): void => {
+	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; 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/up-novel-reader/reader-content.vue

@@ -0,0 +1,227 @@
+<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.js'
+
+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;
+    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/up-novel-reader/reader-core.js

@@ -0,0 +1,158 @@
+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) {
+    return {
+        ...state,
+        mode: normalizeMode(mode)
+    }
+}
+
+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
+}