uview-plus 3.8.86 → 3.8.108

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>

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

@@ -0,0 +1,313 @@
+<template>
+    <view
+        class="up-novel-reader__toolbar"
+        :class="[
+            `up-novel-reader__toolbar--${position}`,
+            { 'is-dark': isDark }
+        ]"
+        :style="toolbarStyle"
+        @tap.stop="handleToggleControls"
+    >
+        <view v-if="position === 'top'" class="up-novel-reader__toolbar-row">
+            <view class="up-novel-reader__toolbar-group">
+                <view
+                    v-if="showBack"
+                    class="up-novel-reader__toolbar-button"
+                    hover-class="up-novel-reader__toolbar-button--hover"
+                    @tap.stop="handleBack"
+                >
+                    <u-icon :name="backIcon" size="21" :color="textColor"></u-icon>
+                </view>
+                <text class="up-novel-reader__toolbar-title">{{ title || '小说阅读' }}</text>
+            </view>
+            <view class="up-novel-reader__toolbar-group">
+                <slot name="top"></slot>
+                <view
+                    class="up-novel-reader__toolbar-button"
+                    hover-class="up-novel-reader__toolbar-button--hover"
+                    @tap.stop="handleToggleCatalog"
+                >
+                    <u-icon name="list" size="20" :color="textColor"></u-icon>
+                </view>
+                <view
+                    class="up-novel-reader__toolbar-button"
+                    hover-class="up-novel-reader__toolbar-button--hover"
+                    @tap.stop="handleToggleBookmark"
+                >
+                    <u-icon
+                        name="bookmark"
+                        size="20"
+                        :color="isBookmarked ? activeColor : textColor"
+                        :bold="isBookmarked"
+                    ></u-icon>
+                </view>
+                <slot name="toolbar-extra"></slot>
+                <view
+                    class="up-novel-reader__toolbar-button"
+                    hover-class="up-novel-reader__toolbar-button--hover"
+                    @tap.stop="handleToggleControls"
+                >
+                    <u-icon name="close" size="19" :color="textColor"></u-icon>
+                </view>
+            </view>
+        </view>
+        <view v-else class="up-novel-reader__toolbar-row up-novel-reader__toolbar-row--bottom">
+            <view class="up-novel-reader__progress">
+                <text class="up-novel-reader__progress-label">{{ progressLabel }}</text>
+                <view class="up-novel-reader__progress-track">
+                    <view class="up-novel-reader__progress-value" :style="{ width: `${progressPercent}%` }"></view>
+                </view>
+            </view>
+            <view class="up-novel-reader__toolbar-group">
+                <slot name="bottom"></slot>
+                <view
+                    class="up-novel-reader__toolbar-button"
+                    :class="{ 'is-disabled': previousDisabled }"
+                    hover-class="up-novel-reader__toolbar-button--hover"
+                    @tap.stop="handlePrevious"
+                >
+                    <u-icon name="arrow-left" size="18" :color="previousDisabled ? disabledColor : textColor"></u-icon>
+                </view>
+                <view
+                    class="up-novel-reader__toolbar-button"
+                    :class="{ 'is-disabled': nextDisabled }"
+                    hover-class="up-novel-reader__toolbar-button--hover"
+                    @tap.stop="handleNext"
+                >
+                    <u-icon name="arrow-right" size="18" :color="nextDisabled ? disabledColor : textColor"></u-icon>
+                </view>
+                <view
+                    class="up-novel-reader__toolbar-button"
+                    hover-class="up-novel-reader__toolbar-button--hover"
+                    @tap.stop="handleToggleSettings"
+                >
+                    <u-icon name="setting" size="20" :color="textColor"></u-icon>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'NovelReaderToolbar',
+        props: {
+            position: {
+                type: String,
+                default: 'top'
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            showBack: {
+                type: Boolean,
+                default: true
+            },
+            backIcon: {
+                type: String,
+                default: 'arrow-left'
+            },
+            isBookmarked: {
+                type: Boolean,
+                default: false
+            },
+            progress: {
+                type: Object,
+                default: () => ({})
+            },
+            pageCount: {
+                type: Number,
+                default: 0
+            },
+            currentChapterIndex: {
+                type: Number,
+                default: -1
+            },
+            chapterCount: {
+                type: Number,
+                default: 0
+            },
+            hasPrevious: {
+                type: Boolean,
+                default: false
+            },
+            hasNext: {
+                type: Boolean,
+                default: false
+            },
+            themeTokens: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [
+            'back',
+            'toggle-catalog',
+            'toggle-settings',
+            'toggle-bookmark',
+            'previous',
+            'next',
+            'toggle-controls'
+        ],
+        computed: {
+            isDark() {
+                return ['night', 'dark'].includes(this.themeTokens.theme)
+            },
+            textColor() {
+                return this.themeTokens.text || '#303133'
+            },
+            activeColor() {
+                return this.themeTokens.active || '#2979ff'
+            },
+            disabledColor() {
+                return this.themeTokens.disabled || '#c8c9cc'
+            },
+            toolbarStyle() {
+                return {
+                    backgroundColor: this.themeTokens.toolbar || '#ffffff',
+                    borderColor: this.themeTokens.border || 'rgba(48, 49, 51, 0.12)'
+                }
+            },
+            progressPercent() {
+                if (this.progress.chapterProgress != null) {
+                    return Math.min(100, Math.max(0, Number(this.progress.chapterProgress) * 100 || 0))
+                }
+                if (this.pageCount > 0) {
+                    return Math.min(100, Math.max(0, ((this.progress.pageIndex || 0) + 1) / this.pageCount * 100))
+                }
+                return 0
+            },
+            progressLabel() {
+                const current = this.currentChapterIndex >= 0 ? this.currentChapterIndex + 1 : 0
+                const chapterText = this.chapterCount ? `${current}/${this.chapterCount}` : '阅读进度'
+                const percentText = `${Math.round(this.progressPercent)}%`
+                return `${chapterText} · ${percentText}`
+            },
+            previousDisabled() {
+                return !this.hasPrevious
+            },
+            nextDisabled() {
+                return !this.hasNext
+            }
+        },
+        methods: {
+            handleBack() {
+                this.$emit('back')
+            },
+            handleToggleCatalog() {
+                this.$emit('toggle-catalog')
+            },
+            handleToggleSettings() {
+                this.$emit('toggle-settings')
+            },
+            handleToggleBookmark() {
+                this.$emit('toggle-bookmark')
+            },
+            handlePrevious() {
+                if (!this.previousDisabled) this.$emit('previous')
+            },
+            handleNext() {
+                if (!this.nextDisabled) this.$emit('next')
+            },
+            handleToggleControls() {
+                this.$emit('toggle-controls')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .up-novel-reader__toolbar {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 10px 14px;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+    }
+
+    .up-novel-reader__toolbar--bottom {
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-bottom: 0;
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+
+    .up-novel-reader__toolbar-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 36px;
+    }
+
+    .up-novel-reader__toolbar-row--bottom {
+        gap: 12px;
+    }
+
+    .up-novel-reader__toolbar-group {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-width: 0;
+        gap: 6px;
+    }
+
+    .up-novel-reader__toolbar-title {
+        max-width: 200px;
+        overflow: hidden;
+        color: inherit;
+        font-size: 16px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .up-novel-reader__toolbar-button {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
+    }
+
+    .up-novel-reader__toolbar-button--hover {
+        opacity: 0.55;
+        background-color: rgba(127, 127, 127, 0.12);
+    }
+
+    .up-novel-reader__toolbar-button.is-disabled {
+        opacity: 0.5;
+    }
+
+    .up-novel-reader__progress {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .up-novel-reader__progress-label {
+        display: block;
+        margin-bottom: 5px;
+        color: inherit;
+        font-size: 11px;
+        line-height: 16px;
+        opacity: 0.78;
+    }
+
+    .up-novel-reader__progress-track {
+        width: 100%;
+        height: 3px;
+        overflow: hidden;
+        border-radius: 3px;
+        background-color: rgba(127, 127, 127, 0.22);
+    }
+
+    .up-novel-reader__progress-value {
+        height: 100%;
+        border-radius: 3px;
+        background-color: var(--up-novel-reader-active, #2979ff);
+    }
+</style>

package/components/u-novel-reader/theme-vars.scss

@@ -0,0 +1,49 @@
+.up-novel-reader.theme-day {
+    --up-novel-reader-background: #f7f8fa;
+    --up-novel-reader-text: #303133;
+    --up-novel-reader-muted: #909399;
+    --up-novel-reader-toolbar: #ffffff;
+    --up-novel-reader-border: rgba(48, 49, 51, 0.12);
+    --up-novel-reader-active: #2979ff;
+    --up-novel-reader-disabled: #c8c9cc;
+}
+
+.up-novel-reader.theme-paper {
+    --up-novel-reader-background: #f3ead7;
+    --up-novel-reader-text: #51483d;
+    --up-novel-reader-muted: #8f806d;
+    --up-novel-reader-toolbar: #f7efdf;
+    --up-novel-reader-border: rgba(81, 72, 61, 0.16);
+    --up-novel-reader-active: #9b7653;
+    --up-novel-reader-disabled: #c7b9a3;
+}
+
+.up-novel-reader.theme-green {
+    --up-novel-reader-background: #e7f1e4;
+    --up-novel-reader-text: #3f5140;
+    --up-novel-reader-muted: #708371;
+    --up-novel-reader-toolbar: #eef6eb;
+    --up-novel-reader-border: rgba(63, 81, 64, 0.16);
+    --up-novel-reader-active: #4d8b55;
+    --up-novel-reader-disabled: #b6c7b4;
+}
+
+.up-novel-reader.theme-night {
+    --up-novel-reader-background: #202124;
+    --up-novel-reader-text: #d6d7da;
+    --up-novel-reader-muted: #9ca0a8;
+    --up-novel-reader-toolbar: #292b30;
+    --up-novel-reader-border: rgba(214, 215, 218, 0.16);
+    --up-novel-reader-active: #7da7ff;
+    --up-novel-reader-disabled: #62656d;
+}
+
+.up-novel-reader.theme-dark {
+    --up-novel-reader-background: #111214;
+    --up-novel-reader-text: #e5e7eb;
+    --up-novel-reader-muted: #9ca3af;
+    --up-novel-reader-toolbar: #1b1d21;
+    --up-novel-reader-border: rgba(229, 231, 235, 0.16);
+    --up-novel-reader-active: #8ab4ff;
+    --up-novel-reader-disabled: #5f6368;
+}