uview-ultra 4.5.46

package/components/up-novel-reader/reader-core.uts

@@ -0,0 +1,175 @@
+export const DEFAULT_READER_SETTINGS: UTSJSONObject = {
+    theme: 'day',
+    fontSize: 18,
+    lineHeight: 1.8,
+    paragraphSpacing: 16,
+    contentWidth: '92%',
+    fontFamily: 'system',
+    fontWeight: 400,
+    animation: true
+}
+
+function numberValue(value: any | null, fallback: number = 0): number {
+    if (value == null) return fallback
+    const parsed = parseFloat(value.toString())
+    return isNaN(parsed) ? fallback : parsed
+}
+
+function clamp(value: any | null, min: number, max: number, fallback: number): number {
+    return Math.min(max, Math.max(min, numberValue(value, fallback)))
+}
+
+function settingValue(source: UTSJSONObject | null, key: String): any {
+    return source == null ? null : source[key]
+}
+
+function normalizeContentWidth(value: any | null): any {
+    if (typeof value == 'number') {
+        return clamp(value, 40, 100, 92)
+    }
+    if (value != null && value.toString().trim().length > 0) {
+        return value.toString().trim()
+    }
+    return DEFAULT_READER_SETTINGS['contentWidth']!
+}
+
+export function mergeReaderSettings(sources: Array<UTSJSONObject | null>): UTSJSONObject {
+    const result: UTSJSONObject = UTSJSONObject.assign({}, DEFAULT_READER_SETTINGS)
+    const keys = [
+        'theme',
+        'fontSize',
+        'lineHeight',
+        'paragraphSpacing',
+        'contentWidth',
+        'fontFamily',
+        'fontWeight',
+        'animation'
+    ]
+    sources.forEach((source: UTSJSONObject | null) => {
+        if (source == null) return
+        keys.forEach((key: String) => {
+            if (source[key] != null) result[key] = source[key]
+        })
+    })
+    result['fontSize'] = clamp(result['fontSize'], 12, 48, 18)
+    result['lineHeight'] = clamp(result['lineHeight'], 1, 3, 1.8)
+    result['paragraphSpacing'] = clamp(result['paragraphSpacing'], 0, 80, 16)
+    result['contentWidth'] = normalizeContentWidth(result['contentWidth'])
+    result['fontWeight'] = numberValue(result['fontWeight'], 400) >= 600 ? 600 : 400
+    result['animation'] = result['animation'] != false
+    return result
+}
+
+export function normalizeMode(mode: String): String {
+    return mode == 'page' ? 'page' : 'scroll'
+}
+
+export function toggleControls(state: UTSJSONObject): UTSJSONObject {
+    const result: UTSJSONObject = UTSJSONObject.assign({}, state)
+    result['controlsVisible'] = result['controlsVisible'] != true
+    return result
+}
+
+export function setMode(state: UTSJSONObject, mode: String): UTSJSONObject {
+    const result: UTSJSONObject = UTSJSONObject.assign({}, state)
+    result['mode'] = normalizeMode(mode)
+    return result
+}
+
+export function setSettings(state: UTSJSONObject, settings: UTSJSONObject | null): UTSJSONObject {
+    const result: UTSJSONObject = UTSJSONObject.assign({}, state)
+    result['settings'] = mergeReaderSettings([
+        state['settings'] as UTSJSONObject,
+        settings
+    ])
+    return result
+}
+
+export function setProgress(state: UTSJSONObject, progress: UTSJSONObject | null): UTSJSONObject {
+    const stateProgress = state['progress'] == null ? ({} as UTSJSONObject) : state['progress'] as UTSJSONObject
+    const nextProgress: UTSJSONObject = UTSJSONObject.assign(
+        {},
+        stateProgress
+    )
+    if (progress != null) {
+        const src = progress
+        UTSJSONObject.keys(src).forEach((key: String) => {
+            nextProgress[key] = src[key]
+        })
+    }
+    nextProgress['pageIndex'] = Math.max(0, numberValue(nextProgress['pageIndex']))
+    nextProgress['charOffset'] = Math.max(0, numberValue(nextProgress['charOffset']))
+    nextProgress['scrollTop'] = Math.max(0, numberValue(nextProgress['scrollTop']))
+    const result: UTSJSONObject = UTSJSONObject.assign({}, state)
+    result['progress'] = nextProgress
+    return result
+}
+
+export function toggleBookmark(
+    bookmarks: Array<UTSJSONObject>,
+    bookmark: UTSJSONObject | null
+): Array<UTSJSONObject> {
+    const list = bookmarks.toMutableArray()
+    if (bookmark == null || bookmark['id'] == null) return list
+    const bookmarkId = bookmark['id']
+    const existingIndex = list.findIndex((item: UTSJSONObject) => item['id'] == bookmarkId)
+    if (existingIndex == -1) {
+        list.push(bookmark)
+    } else {
+        list.removeAt(existingIndex)
+    }
+    return list
+}
+
+export function createBookmark(fields: UTSJSONObject): UTSJSONObject {
+    const chapterId = fields['chapterId']
+    const normalizedChapterId = chapterId == null ? '' : chapterId.toString()
+    const charOffset = Math.max(0, numberValue(fields['charOffset']))
+    return {
+        id: `${normalizedChapterId}:${charOffset}`,
+        chapterId,
+        chapterIndex: numberValue(fields['chapterIndex']),
+        charOffset,
+        pageIndex: Math.max(0, numberValue(fields['pageIndex'])),
+        scrollTop: Math.max(0, numberValue(fields['scrollTop'])),
+        excerpt: fields['excerpt'] == null ? '' : fields['excerpt'],
+        createdAt: numberValue(fields['createdAt'], Date.now())
+    } as UTSJSONObject
+}
+
+export function startReading(state: UTSJSONObject, timestamp: number = Date.now()): UTSJSONObject {
+    const result: UTSJSONObject = UTSJSONObject.assign({}, state)
+    result['active'] = true
+    result['lastActiveAt'] = timestamp
+    return result
+}
+
+export function consumeReadingTime(state: UTSJSONObject, timestamp: number = Date.now()): UTSJSONObject {
+    if (state['active'] != true || numberValue(state['lastActiveAt']) <= 0) return state
+    const elapsed = Math.max(0, timestamp - numberValue(state['lastActiveAt']))
+    const result: UTSJSONObject = UTSJSONObject.assign({}, state)
+    result['readingTime'] = Math.max(0, numberValue(state['readingTime'])) + elapsed
+    result['lastActiveAt'] = timestamp
+    return result
+}
+
+export function pauseReading(state: UTSJSONObject, timestamp: number = Date.now()): UTSJSONObject {
+    const result = consumeReadingTime(state, timestamp)
+    result['active'] = false
+    return result
+}
+
+export default {
+    DEFAULT_READER_SETTINGS,
+    mergeReaderSettings,
+    normalizeMode,
+    toggleControls,
+    setMode,
+    setSettings,
+    setProgress,
+    toggleBookmark,
+    createBookmark,
+    startReading,
+    pauseReading,
+    consumeReadingTime
+}

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

@@ -0,0 +1,136 @@
+<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">
+				<up-icon name="close" size="20" :color="textColor"></up-icon>
+			</view>
+		</view>
+		<scroll-view direction="vertical" class="up-novel-reader__settings-scroll">
+			<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['name']"
+						class="up-novel-reader__theme-option"
+						:class="draft['theme'] == theme['name'] ? 'is-active' : ''"
+						:style="{ backgroundColor: theme['background'], color: theme['text'] }"
+						@tap="selectTheme(theme['name'])"
+					>
+						<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">{{ fontSizeText }}</text>
+				</view>
+				<up-slider :model-value="fontSize" :min="12" :max="30" :step="1" active-color="#2979ff" @update:model-value="updateFontSize"></up-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">{{ lineHeightText }}</text>
+				</view>
+				<up-slider :model-value="lineHeightSlider" :min="10" :max="30" :step="1" active-color="#2979ff" @update:model-value="updateLineHeight"></up-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">{{ paragraphSpacingText }}</text>
+				</view>
+				<up-slider :model-value="paragraphSpacing" :min="0" :max="40" :step="2" active-color="#2979ff" @update:model-value="updateParagraphSpacing"></up-slider>
+			</view>
+			<view class="up-novel-reader__settings-section">
+				<view class="up-novel-reader__settings-row">
+					<text class="up-novel-reader__settings-label">粗体正文</text>
+					<up-switch :model-value="fontWeight >= 600" :active-value="true" :inactive-value="false" @change="updateFontWeight"></up-switch>
+				</view>
+				<view class="up-novel-reader__settings-row">
+					<text class="up-novel-reader__settings-label">翻页动画</text>
+					<up-switch :model-value="animation" @change="updateAnimation"></up-switch>
+				</view>
+			</view>
+			<slot></slot>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { computed, ref, watch } from 'vue'
+
+defineOptions({ styleIsolation: 'app-and-page', name: 'up-novel-reader-settings' })
+
+const props = defineProps({
+	settings: { type: UTSJSONObject, default: () => ({}) },
+	themeTokens: { type: UTSJSONObject, default: () => ({}) }
+})
+const emit = defineEmits(['update-settings', 'close'])
+const draft = ref<UTSJSONObject>({} as UTSJSONObject)
+const themes = ref<Array<UTSJSONObject>>([
+	{ name: 'day', label: '日间', background: '#f7f8fa', text: '#303133' },
+	{ name: 'paper', label: '羊皮纸', background: '#f3ead7', text: '#51483d' },
+	{ name: 'green', label: '护眼绿', background: '#e7f1e4', text: '#3f5140' },
+	{ name: 'night', label: '夜间', background: '#202124', text: '#d6d7da' },
+	{ name: 'dark', label: '深色', background: '#111214', text: '#e5e7eb' }
+])
+
+const numberValue = (key: string, fallback: number): number => {
+	const value = draft.value[key]
+	if (value == null) return fallback
+	const number = parseFloat(value.toString())
+	return isNaN(number) ? fallback : number
+}
+const fontSize = computed((): number => numberValue('fontSize', 18))
+const lineHeight = computed((): number => numberValue('lineHeight', 1.8))
+const lineHeightSlider = computed((): number => lineHeight.value * 10)
+const paragraphSpacing = computed((): number => numberValue('paragraphSpacing', 0))
+const fontWeight = computed((): number => numberValue('fontWeight', 400))
+const animation = computed((): boolean => draft.value['animation'] !== false)
+const fontSizeText = computed((): string => fontSize.value.toString())
+const lineHeightText = computed((): string => lineHeight.value.toFixed(1))
+const paragraphSpacingText = computed((): string => paragraphSpacing.value.toString())
+const theme = computed((): UTSJSONObject => props.themeTokens == null ? ({} as UTSJSONObject) : props.themeTokens as UTSJSONObject)
+const textColor = computed((): string => (theme.value['text'] == null ? '#303133' : theme.value['text']).toString())
+const settingsStyle = computed((): UTSJSONObject => {
+	return {
+		backgroundColor: (theme.value['background'] == null ? '#f7f8fa' : theme.value['background']).toString(),
+		color: textColor.value
+	} as UTSJSONObject
+})
+
+const update = (patch: UTSJSONObject): void => {
+	draft.value = UTSJSONObject.assign({} as UTSJSONObject, draft.value, patch)
+	emit('update-settings', UTSJSONObject.assign({} as UTSJSONObject, draft.value))
+}
+// 抽出方法：模板事件里直接写对象字面量(update({...}))会触发 uts 编译错误(error18 _uM)，
+// 故用具名方法包装
+const selectTheme = (name: any | null): void => update({ theme: name } as UTSJSONObject)
+const updateFontSize = (value: number): void => update({ fontSize: value } as UTSJSONObject)
+const updateLineHeight = (value: number): void => update({ lineHeight: value / 10 } as UTSJSONObject)
+const updateParagraphSpacing = (value: number): void => update({ paragraphSpacing: value } as UTSJSONObject)
+const updateFontWeight = (value: any): void => update({ fontWeight: value == true || value.toString() == 'true' ? 600 : 400 } as UTSJSONObject)
+const updateAnimation = (value: any): void => update({ animation: value == true || value.toString() == 'true' } as UTSJSONObject)
+const close = (): void => emit('close')
+
+watch((): string => JSON.stringify(props.settings), () => {
+	draft.value = UTSJSONObject.assign({} as UTSJSONObject, props.settings == null ? ({} as UTSJSONObject) : props.settings as UTSJSONObject)
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+.up-novel-reader__settings { width: 100%; max-height: 560px; }
+.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: 496px; padding: 0 20px 24px; box-sizing: border-box; }
+.up-novel-reader__settings-section { padding: 14px 0; }
+.up-novel-reader__settings-label { font-size: 14px; }
+.up-novel-reader__settings-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 34px; }
+.up-novel-reader__settings-value { color: var(--up-novel-reader-muted, #909399); font-size: 13px; }
+.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); }
+</style>

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

@@ -0,0 +1,215 @@
+<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">
+                <up-icon name="close" size="20" :color="themeTokens.text"></up-icon>
+            </view>
+        </view>
+        <scroll-view scroll-y class="up-novel-reader__settings-scroll">
+            <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.name"
+                        class="up-novel-reader__theme-option"
+                        :class="{ 'is-active': draft.theme === theme.name }"
+                        :style="{ backgroundColor: theme.background, color: theme.text }"
+                        @tap="update({ theme: theme.name })"
+                    >
+                        <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">{{ draft.fontSize }}</text>
+                </view>
+                <up-slider
+                    :model-value="Number(draft.fontSize)"
+                    :min="12"
+                    :max="30"
+                    :step="1"
+                    active-color="#2979ff"
+                    @update:model-value="update({ fontSize: $event })"
+                ></up-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(draft.lineHeight).toFixed(1) }}</text>
+                </view>
+                <up-slider
+                    :model-value="Number(draft.lineHeight) * 10"
+                    :min="10"
+                    :max="30"
+                    :step="1"
+                    active-color="#2979ff"
+                    @update:model-value="update({ lineHeight: Number($event) / 10 })"
+                ></up-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">{{ draft.paragraphSpacing }}</text>
+                </view>
+                <up-slider
+                    :model-value="Number(draft.paragraphSpacing)"
+                    :min="0"
+                    :max="40"
+                    :step="2"
+                    active-color="#2979ff"
+                    @update:model-value="update({ paragraphSpacing: $event })"
+                ></up-slider>
+            </view>
+            <view class="up-novel-reader__settings-section">
+                <view class="up-novel-reader__settings-row">
+                    <text class="up-novel-reader__settings-label">粗体正文</text>
+                    <up-switch
+                        :model-value="Number(draft.fontWeight) >= 600"
+                        @change="update({ fontWeight: $event ? 600 : 400 })"
+                    ></up-switch>
+                </view>
+                <view class="up-novel-reader__settings-row">
+                    <text class="up-novel-reader__settings-label">翻页动画</text>
+                    <up-switch
+                        :model-value="draft.animation !== false"
+                        @change="update({ animation: $event })"
+                    ></up-switch>
+                </view>
+            </view>
+            <slot></slot>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'NovelReaderSettings',
+    props: {
+        settings: {
+            type: Object,
+            default: () => ({})
+        },
+        themeTokens: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    emits: ['update-settings', 'close'],
+    data() {
+        return {
+            draft: { ...this.settings },
+            themes: [
+                { name: 'day', label: '日间', background: '#f7f8fa', text: '#303133' },
+                { name: 'paper', label: '羊皮纸', background: '#f3ead7', text: '#51483d' },
+                { name: 'green', label: '护眼绿', background: '#e7f1e4', text: '#3f5140' },
+                { name: 'night', label: '夜间', background: '#202124', text: '#d6d7da' },
+                { name: 'dark', label: '深色', background: '#111214', text: '#e5e7eb' }
+            ]
+        }
+    },
+    computed: {
+        settingsStyle() {
+            return {
+                backgroundColor: this.themeTokens.background || '#f7f8fa',
+                color: this.themeTokens.text || '#303133'
+            }
+        }
+    },
+    watch: {
+        settings: {
+            handler(value) {
+                this.draft = { ...value }
+            },
+            deep: true
+        }
+    },
+    methods: {
+        update(patch) {
+            this.draft = { ...this.draft, ...patch }
+            this.$emit('update-settings', { ...this.draft })
+        },
+        close() {
+            this.$emit('close')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.up-novel-reader__settings {
+    width: 100%;
+    max-height: 78vh;
+}
+
+.up-novel-reader__settings-header {
+    display: flex;
+    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;
+    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-label {
+    font-size: 14px;
+}
+
+.up-novel-reader__settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 34px;
+}
+
+.up-novel-reader__settings-value {
+    color: var(--up-novel-reader-muted, #909399);
+    font-size: 13px;
+}
+
+.up-novel-reader__theme-list {
+    display: flex;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.up-novel-reader__theme-option {
+    display: flex;
+    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);
+}
+</style>

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

@@ -0,0 +1,127 @@
+<template>
+	<view
+		class="up-novel-reader__toolbar"
+		:class="'up-novel-reader__toolbar--' + position"
+		: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" @tap.stop="handleBack">
+					<up-icon :name="backIcon" size="21" :color="textColor"></up-icon>
+				</view>
+				<text class="up-novel-reader__toolbar-title" :style="{ color: textColor }">{{ titleText }}</text>
+			</view>
+			<view class="up-novel-reader__toolbar-group">
+				<slot name="top"></slot>
+				<view class="up-novel-reader__toolbar-button" @tap.stop="handleToggleCatalog">
+					<up-icon name="list" size="20" :color="textColor"></up-icon>
+				</view>
+				<view class="up-novel-reader__toolbar-button" @tap.stop="handleToggleBookmark">
+					<up-icon name="bookmark" size="20" :color="isBookmarked ? activeColor : textColor" :bold="isBookmarked"></up-icon>
+				</view>
+				<slot name="toolbar-extra"></slot>
+				<view class="up-novel-reader__toolbar-button" @tap.stop="handleToggleControls">
+					<up-icon name="close" size="19" :color="textColor"></up-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" :style="{ color: textColor }">{{ 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="previousDisabled ? 'is-disabled' : ''" @tap.stop="handlePrevious">
+					<up-icon name="arrow-left" size="18" :color="previousDisabled ? disabledColor : textColor"></up-icon>
+				</view>
+				<view class="up-novel-reader__toolbar-button" :class="nextDisabled ? 'is-disabled' : ''" @tap.stop="handleNext">
+					<up-icon name="arrow-right" size="18" :color="nextDisabled ? disabledColor : textColor"></up-icon>
+				</view>
+				<view class="up-novel-reader__toolbar-button" @tap.stop="handleToggleSettings">
+					<up-icon name="setting" size="20" :color="textColor"></up-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { computed } from 'vue'
+
+defineOptions({ styleIsolation: 'app-and-page', name: 'up-novel-reader-toolbar' })
+
+const props = defineProps({
+	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: UTSJSONObject, 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: UTSJSONObject, default: () => ({}) }
+})
+
+const emit = defineEmits(['back', 'toggle-catalog', 'toggle-settings', 'toggle-bookmark', 'previous', 'next', 'toggle-controls'])
+const theme = computed((): UTSJSONObject => props.themeTokens == null ? ({} as UTSJSONObject) : props.themeTokens as UTSJSONObject)
+const progress = computed((): UTSJSONObject => props.progress == null ? ({} as UTSJSONObject) : props.progress as UTSJSONObject)
+const textColor = computed((): string => (theme.value['text'] == null ? '#303133' : theme.value['text']).toString())
+const activeColor = computed((): string => (theme.value['active'] == null ? '#2979ff' : theme.value['active']).toString())
+const disabledColor = computed((): string => (theme.value['disabled'] == null ? '#c8c9cc' : theme.value['disabled']).toString())
+const titleText = computed((): string => props.title.length > 0 ? props.title : '小说阅读')
+const pageIndex = computed((): number => {
+	const value = progress.value['pageIndex']
+	if (value == null) return 0
+	const number = parseFloat(value.toString())
+	return isNaN(number) ? 0 : number
+})
+const progressPercent = computed((): number => {
+	const chapterProgress = progress.value['chapterProgress']
+	if (chapterProgress != null) return Math.min(100, Math.max(0, parseFloat(chapterProgress.toString()) * 100))
+	if (props.pageCount > 0) return Math.min(100, Math.max(0, (pageIndex.value + 1) / props.pageCount * 100))
+	return 0
+})
+const progressLabel = computed((): string => {
+	const current = props.currentChapterIndex >= 0 ? props.currentChapterIndex + 1 : 0
+	const chapterText = props.chapterCount > 0 ? current.toString() + '/' + props.chapterCount.toString() : '阅读进度'
+	return chapterText + ' · ' + Math.round(progressPercent.value).toString() + '%'
+})
+const previousDisabled = computed((): boolean => !props.hasPrevious)
+const nextDisabled = computed((): boolean => !props.hasNext)
+const toolbarStyle = computed((): UTSJSONObject => {
+	return {
+		backgroundColor: (theme.value['toolbar'] == null ? '#ffffff' : theme.value['toolbar']).toString(),
+		borderColor: (theme.value['border'] == null ? 'rgba(48, 49, 51, 0.12)' : theme.value['border']).toString()
+	} as UTSJSONObject
+})
+
+const handleBack = (): void => emit('back')
+const handleToggleCatalog = (): void => emit('toggle-catalog')
+const handleToggleSettings = (): void => emit('toggle-settings')
+const handleToggleBookmark = (): void => emit('toggle-bookmark')
+const handlePrevious = (): void => { if (!previousDisabled.value) emit('previous') }
+const handleNext = (): void => { if (!nextDisabled.value) emit('next') }
+const handleToggleControls = (): void => 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; 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.is-disabled { opacity: 0.5; }
+.up-novel-reader__progress { flex: 1; min-width: 0; }
+.up-novel-reader__progress-label { margin-bottom: 5px; 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>