style: 将Tooltip组件替换为原生title属性，统一提示样式
This commit is contained in:
xiamuceer
@@ -1,5 +1,4 @@
|
||||
import React, { useMemo, useEffect, useRef } from 'react';
|
||||
import { Tooltip } from 'antd';
|
||||
|
||||
// 标注数据类型
|
||||
export interface MemoryAnnotation {
|
||||
@@ -219,113 +218,54 @@ const AnnotatedText: React.FC<AnnotatedTextProps> = ({
|
||||
const icon = TYPE_ICONS[annotation.type];
|
||||
const isActive = activeAnnotationId === annotation.id;
|
||||
|
||||
// 🔧 工具提示内容：如果有多个标注，显示所有标注信息
|
||||
const tooltipContent = (
|
||||
<div style={{ maxWidth: 350 }}>
|
||||
{annotations && annotations.length > 1 ? (
|
||||
// 多个标注
|
||||
<div>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: 8, borderBottom: '1px solid rgba(255,255,255,0.3)', paddingBottom: 4 }}>
|
||||
📍 此处有 {annotations.length} 个标注
|
||||
</div>
|
||||
{annotations.map((ann, idx) => (
|
||||
<div key={ann.id} style={{
|
||||
marginBottom: idx < annotations.length - 1 ? 8 : 0,
|
||||
paddingBottom: idx < annotations.length - 1 ? 8 : 0,
|
||||
borderBottom: idx < annotations.length - 1 ? '1px solid rgba(255,255,255,0.1)' : 'none'
|
||||
}}>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: 4, fontSize: 13 }}>
|
||||
{TYPE_ICONS[ann.type]} {ann.title}
|
||||
</div>
|
||||
<div style={{ fontSize: 11, opacity: 0.9 }}>
|
||||
{ann.content.slice(0, 80)}
|
||||
{ann.content.length > 80 ? '...' : ''}
|
||||
</div>
|
||||
<div style={{ marginTop: 4, fontSize: 10, opacity: 0.7 }}>
|
||||
重要性: {(ann.importance * 10).toFixed(1)}/10
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
// 单个标注
|
||||
<div>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: 4 }}>
|
||||
{icon} {annotation.title}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, opacity: 0.9 }}>
|
||||
{annotation.content.slice(0, 100)}
|
||||
{annotation.content.length > 100 ? '...' : ''}
|
||||
</div>
|
||||
<div style={{ marginTop: 8, fontSize: 11, opacity: 0.7 }}>
|
||||
重要性: {(annotation.importance * 10).toFixed(1)}/10
|
||||
</div>
|
||||
{annotation.tags && annotation.tags.length > 0 && (
|
||||
<div style={{ marginTop: 4, fontSize: 11 }}>
|
||||
{annotation.tags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
padding: '2px 6px',
|
||||
borderRadius: 3,
|
||||
marginRight: 4,
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
// 简化工具提示内容，不再使用复杂的React元素，改为纯文本或移除Tooltip
|
||||
const tooltipText = annotations && annotations.length > 1
|
||||
? `此处有 ${annotations.length} 个标注`
|
||||
: `${annotation.title}: ${annotation.content.slice(0, 100)}${annotation.content.length > 100 ? '...' : ''}`;
|
||||
|
||||
return (
|
||||
<Tooltip key={index} title={tooltipContent} placement="top">
|
||||
<span
|
||||
key={index}
|
||||
title={tooltipText}
|
||||
ref={(el) => {
|
||||
if (annotation) {
|
||||
annotationRefs.current[annotation.id] = el;
|
||||
}
|
||||
}}
|
||||
data-annotation-id={annotation?.id}
|
||||
className={`annotated-text ${isActive ? 'active' : ''}`}
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderBottom: `2px solid ${color}`,
|
||||
cursor: 'pointer',
|
||||
backgroundColor: isActive ? `${color}22` : 'transparent',
|
||||
transition: 'all 0.2s',
|
||||
padding: '2px 0',
|
||||
}}
|
||||
onClick={() => onAnnotationClick?.(annotation)}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = `${color}33`;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = isActive
|
||||
? `${color}22`
|
||||
: 'transparent';
|
||||
}}
|
||||
>
|
||||
{segment.content}
|
||||
<span
|
||||
ref={(el) => {
|
||||
if (annotation) {
|
||||
annotationRefs.current[annotation.id] = el;
|
||||
}
|
||||
}}
|
||||
data-annotation-id={annotation?.id}
|
||||
className={`annotated-text ${isActive ? 'active' : ''}`}
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderBottom: `2px solid ${color}`,
|
||||
cursor: 'pointer',
|
||||
backgroundColor: isActive ? `${color}22` : 'transparent',
|
||||
transition: 'all 0.2s',
|
||||
padding: '2px 0',
|
||||
}}
|
||||
onClick={() => onAnnotationClick?.(annotation)}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = `${color}33`;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = isActive
|
||||
? `${color}22`
|
||||
: 'transparent';
|
||||
position: 'absolute',
|
||||
top: -20,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
fontSize: 14,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{segment.content}
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: -20,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
fontSize: 14,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
{icon}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Typography, Space, Divider, Badge, Tooltip, Button } from 'antd';
|
||||
import { Typography, Space, Divider, Badge, Button } from 'antd';
|
||||
import { GithubOutlined, CopyrightOutlined, HeartFilled, ClockCircleOutlined, GiftOutlined } from '@ant-design/icons';
|
||||
import { VERSION_INFO, getVersionString } from '../config/version';
|
||||
import { checkLatestVersion } from '../services/versionService';
|
||||
@@ -70,22 +70,21 @@ export default function AppFooter() {
|
||||
flexWrap: 'wrap'
|
||||
}}>
|
||||
<Badge dot={hasUpdate} offset={[-8, 2]}>
|
||||
<Tooltip title={hasUpdate ? `发现新版本 v${latestVersion}，点击查看` : '当前版本'}>
|
||||
<Text
|
||||
onClick={handleVersionClick}
|
||||
style={{
|
||||
fontSize: 11,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
color: 'var(--color-primary)',
|
||||
cursor: hasUpdate ? 'pointer' : 'default',
|
||||
}}
|
||||
>
|
||||
<strong style={{ color: 'var(--color-text-primary)' }}>{VERSION_INFO.projectName}</strong>
|
||||
<span>{getVersionString()}</span>
|
||||
</Text>
|
||||
</Tooltip>
|
||||
<Text
|
||||
onClick={handleVersionClick}
|
||||
style={{
|
||||
fontSize: 11,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
color: 'var(--color-primary)',
|
||||
cursor: hasUpdate ? 'pointer' : 'default',
|
||||
}}
|
||||
title={hasUpdate ? `发现新版本 v${latestVersion}，点击查看` : '当前版本'}
|
||||
>
|
||||
<strong style={{ color: 'var(--color-text-primary)' }}>{VERSION_INFO.projectName}</strong>
|
||||
<span>{getVersionString()}</span>
|
||||
</Text>
|
||||
</Badge>
|
||||
<Divider type="vertical" style={{ margin: '0 4px', borderColor: 'var(--color-border)' }} />
|
||||
<Button
|
||||
@@ -144,34 +143,33 @@ export default function AppFooter() {
|
||||
>
|
||||
{/* 版本信息 */}
|
||||
<Badge dot={hasUpdate} offset={[-8, 2]}>
|
||||
<Tooltip title={hasUpdate ? `发现新版本 v${latestVersion}，点击查看` : '当前版本'}>
|
||||
<Text
|
||||
onClick={handleVersionClick}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
color: 'var(--color-text-secondary)',
|
||||
textShadow: 'none',
|
||||
cursor: hasUpdate ? 'pointer' : 'default',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (hasUpdate) {
|
||||
e.currentTarget.style.transform = 'scale(1.05)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (hasUpdate) {
|
||||
e.currentTarget.style.transform = 'scale(1)';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<strong style={{ color: 'var(--color-text-primary)' }}>{VERSION_INFO.projectName}</strong>
|
||||
<span>{getVersionString()}</span>
|
||||
</Text>
|
||||
</Tooltip>
|
||||
<Text
|
||||
onClick={handleVersionClick}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
color: 'var(--color-text-secondary)',
|
||||
textShadow: 'none',
|
||||
cursor: hasUpdate ? 'pointer' : 'default',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (hasUpdate) {
|
||||
e.currentTarget.style.transform = 'scale(1.05)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (hasUpdate) {
|
||||
e.currentTarget.style.transform = 'scale(1)';
|
||||
}
|
||||
}}
|
||||
title={hasUpdate ? `发现新版本 v${latestVersion}，点击查看` : '当前版本'}
|
||||
>
|
||||
<strong style={{ color: 'var(--color-text-primary)' }}>{VERSION_INFO.projectName}</strong>
|
||||
<span>{getVersionString()}</span>
|
||||
</Text>
|
||||
</Badge>
|
||||
|
||||
{/* GitHub 链接 */}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Modal, Timeline, Tag, Avatar, Empty, Spin, Button, Space, Tooltip } from 'antd';
|
||||
import { Modal, Timeline, Tag, Avatar, Empty, Spin, Button, Space } from 'antd';
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
BugOutlined,
|
||||
@@ -130,15 +130,14 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
|
||||
<Space>
|
||||
<GithubOutlined />
|
||||
<span>更新日志</span>
|
||||
<Tooltip title="刷新">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleRefresh}
|
||||
loading={loading}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleRefresh}
|
||||
loading={loading}
|
||||
title="刷新"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
open={visible}
|
||||
|
||||
@@ -0,0 +1,465 @@
|
||||
/**
|
||||
* 章节阅读器组件
|
||||
* 提供沉浸式阅读体验，支持主题切换、字体调节、翻页导航等功能
|
||||
*/
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Modal, Button, Slider, Radio, Space, Typography, Spin, message } from 'antd';
|
||||
import {
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
SettingOutlined,
|
||||
FontSizeOutlined,
|
||||
BgColorsOutlined,
|
||||
CloseOutlined,
|
||||
ColumnHeightOutlined
|
||||
} from '@ant-design/icons';
|
||||
import type { Chapter } from '../types';
|
||||
|
||||
// 阅读器设置接口
|
||||
interface ReaderSettings {
|
||||
fontSize: number; // 字体大小
|
||||
theme: 'light' | 'sepia' | 'dark'; // 主题模式
|
||||
lineHeight: number; // 行高
|
||||
}
|
||||
|
||||
// 组件属性接口
|
||||
interface ChapterReaderProps {
|
||||
visible: boolean; // 是否显示
|
||||
chapter: Chapter; // 当前章节
|
||||
onClose: () => void; // 关闭回调
|
||||
onChapterChange: (chapterId: string) => void; // 章节切换回调
|
||||
}
|
||||
|
||||
// 导航信息接口
|
||||
interface NavigationInfo {
|
||||
previous: { id: string; chapter_number: number; title: string } | null;
|
||||
next: { id: string; chapter_number: number; title: string } | null;
|
||||
current: { id: string; chapter_number: number; title: string };
|
||||
}
|
||||
|
||||
// 主题样式配置
|
||||
const themeStyles = {
|
||||
light: {
|
||||
bg: '#ffffff',
|
||||
text: '#333333',
|
||||
headerBg: '#fafafa',
|
||||
border: '#e8e8e8'
|
||||
},
|
||||
sepia: {
|
||||
bg: '#f5e6c8',
|
||||
text: '#5b4636',
|
||||
headerBg: '#e8d9b8',
|
||||
border: '#d4c5a5'
|
||||
},
|
||||
dark: {
|
||||
bg: '#1a1a1a',
|
||||
text: '#cccccc',
|
||||
headerBg: '#252525',
|
||||
border: '#333333'
|
||||
}
|
||||
};
|
||||
|
||||
// 本地存储key
|
||||
const SETTINGS_STORAGE_KEY = 'chapter-reader-settings';
|
||||
|
||||
// 从本地存储加载设置
|
||||
const loadSettings = (): ReaderSettings => {
|
||||
try {
|
||||
const saved = localStorage.getItem(SETTINGS_STORAGE_KEY);
|
||||
if (saved) {
|
||||
return JSON.parse(saved);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('加载阅读器设置失败:', e);
|
||||
}
|
||||
return {
|
||||
fontSize: 18,
|
||||
theme: 'light',
|
||||
lineHeight: 1.8
|
||||
};
|
||||
};
|
||||
|
||||
// 保存设置到本地存储
|
||||
const saveSettings = (settings: ReaderSettings) => {
|
||||
try {
|
||||
localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
|
||||
} catch (e) {
|
||||
console.warn('保存阅读器设置失败:', e);
|
||||
}
|
||||
};
|
||||
|
||||
export default function ChapterReader({
|
||||
visible,
|
||||
chapter,
|
||||
onClose,
|
||||
onChapterChange
|
||||
}: ChapterReaderProps) {
|
||||
// 阅读器设置
|
||||
const [settings, setSettings] = useState<ReaderSettings>(loadSettings);
|
||||
|
||||
// 导航信息
|
||||
const [navigation, setNavigation] = useState<NavigationInfo | null>(null);
|
||||
|
||||
// 加载状态
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 设置面板显示状态
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
|
||||
// 移动端检测
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
|
||||
|
||||
// 响应式检测
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
// 获取章节导航信息
|
||||
useEffect(() => {
|
||||
if (visible && chapter?.id) {
|
||||
setLoading(true);
|
||||
fetch(`/api/chapters/${chapter.id}/navigation`)
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error('获取导航失败');
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
setNavigation(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('获取导航信息失败:', err);
|
||||
message.error('获取章节导航信息失败');
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [visible, chapter?.id]);
|
||||
|
||||
// 保存设置变更
|
||||
useEffect(() => {
|
||||
saveSettings(settings);
|
||||
}, [settings]);
|
||||
|
||||
// 上一章
|
||||
const handlePrevious = useCallback(() => {
|
||||
if (navigation?.previous) {
|
||||
setLoading(true);
|
||||
onChapterChange(navigation.previous.id);
|
||||
}
|
||||
}, [navigation?.previous, onChapterChange]);
|
||||
|
||||
// 下一章
|
||||
const handleNext = useCallback(() => {
|
||||
if (navigation?.next) {
|
||||
setLoading(true);
|
||||
onChapterChange(navigation.next.id);
|
||||
}
|
||||
}, [navigation?.next, onChapterChange]);
|
||||
|
||||
// 键盘快捷键
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!visible) return;
|
||||
|
||||
// 忽略输入框中的按键
|
||||
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowLeft':
|
||||
handlePrevious();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
handleNext();
|
||||
break;
|
||||
case 'Escape':
|
||||
onClose();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [visible, handlePrevious, handleNext, onClose]);
|
||||
|
||||
// 章节变化后自动回到顶部
|
||||
useEffect(() => {
|
||||
if (chapter?.id) {
|
||||
setLoading(false);
|
||||
// 找到滚动容器并滚动到顶部
|
||||
const scrollContainer = document.querySelector('.reader-scroll-container');
|
||||
if (scrollContainer) {
|
||||
scrollContainer.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
}, [chapter?.id]);
|
||||
|
||||
// 当前主题样式
|
||||
const currentTheme = themeStyles[settings.theme];
|
||||
|
||||
// 更新设置的便捷函数
|
||||
const updateSettings = (key: keyof ReaderSettings, value: number | string) => {
|
||||
setSettings(prev => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={visible}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
width="100%"
|
||||
style={{
|
||||
maxWidth: '100vw',
|
||||
top: 0,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
height: '100vh',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
styles={{
|
||||
content: {
|
||||
height: '100vh',
|
||||
borderRadius: 0,
|
||||
boxShadow: 'none',
|
||||
padding: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden'
|
||||
},
|
||||
body: {
|
||||
flex: 1,
|
||||
padding: 0,
|
||||
background: currentTheme.bg,
|
||||
overflow: 'hidden',
|
||||
height: '100%',
|
||||
scrollbarWidth: 'thin',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}
|
||||
}}
|
||||
closable={false}
|
||||
maskClosable={false}
|
||||
>
|
||||
{/* 顶部工具栏 */}
|
||||
<div style={{
|
||||
flex: 'none',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: isMobile ? '10px 12px' : '12px 20px',
|
||||
borderBottom: `1px solid ${currentTheme.border}`,
|
||||
background: currentTheme.headerBg,
|
||||
zIndex: 10
|
||||
}}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<CloseOutlined />}
|
||||
onClick={onClose}
|
||||
style={{ color: currentTheme.text }}
|
||||
>
|
||||
{!isMobile && '关闭'}
|
||||
</Button>
|
||||
|
||||
<Typography.Title
|
||||
level={5}
|
||||
style={{
|
||||
margin: 0,
|
||||
color: currentTheme.text,
|
||||
maxWidth: isMobile ? '60%' : '70%',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: isMobile ? 14 : 16
|
||||
}}
|
||||
>
|
||||
第{chapter.chapter_number}章：{chapter.title}
|
||||
</Typography.Title>
|
||||
|
||||
<Button
|
||||
type={showSettings ? 'primary' : 'text'}
|
||||
icon={<SettingOutlined />}
|
||||
onClick={() => setShowSettings(!showSettings)}
|
||||
style={{ color: showSettings ? undefined : currentTheme.text }}
|
||||
title="阅读设置"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 设置面板 */}
|
||||
{showSettings && (
|
||||
<div style={{
|
||||
padding: isMobile ? '12px 16px' : '16px 24px',
|
||||
borderBottom: `1px solid ${currentTheme.border}`,
|
||||
background: currentTheme.headerBg
|
||||
}}>
|
||||
<Space
|
||||
direction={isMobile ? 'vertical' : 'horizontal'}
|
||||
size="large"
|
||||
style={{ width: '100%' }}
|
||||
wrap
|
||||
>
|
||||
{/* 字体大小 */}
|
||||
<div style={{ minWidth: isMobile ? '100%' : 200 }}>
|
||||
<Space style={{ marginBottom: 8, color: currentTheme.text }}>
|
||||
<FontSizeOutlined />
|
||||
<span>字体大小: {settings.fontSize}px</span>
|
||||
</Space>
|
||||
<Slider
|
||||
min={14}
|
||||
max={28}
|
||||
value={settings.fontSize}
|
||||
onChange={v => updateSettings('fontSize', v)}
|
||||
style={{ margin: '8px 0' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 行高 */}
|
||||
<div style={{ minWidth: isMobile ? '100%' : 200 }}>
|
||||
<Space style={{ marginBottom: 8, color: currentTheme.text }}>
|
||||
<ColumnHeightOutlined />
|
||||
<span>行高: {settings.lineHeight}</span>
|
||||
</Space>
|
||||
<Slider
|
||||
min={1.4}
|
||||
max={2.5}
|
||||
step={0.1}
|
||||
value={settings.lineHeight}
|
||||
onChange={v => updateSettings('lineHeight', v)}
|
||||
style={{ margin: '8px 0' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 主题 */}
|
||||
<div>
|
||||
<Space style={{ marginBottom: 8, color: currentTheme.text }}>
|
||||
<BgColorsOutlined />
|
||||
<span>主题</span>
|
||||
</Space>
|
||||
<div>
|
||||
<Radio.Group
|
||||
value={settings.theme}
|
||||
onChange={e => updateSettings('theme', e.target.value)}
|
||||
buttonStyle="solid"
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
>
|
||||
<Radio.Button value="light">日间</Radio.Button>
|
||||
<Radio.Button value="sepia">护眼</Radio.Button>
|
||||
<Radio.Button value="dark">夜间</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 章节内容区域 */}
|
||||
<div
|
||||
className="reader-scroll-container"
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
position: 'relative',
|
||||
scrollBehavior: 'smooth'
|
||||
}}
|
||||
>
|
||||
<Spin spinning={loading} tip="加载中...">
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 1000,
|
||||
margin: '0 auto',
|
||||
padding: isMobile ? '24px 16px 40px' : '40px 60px 40px',
|
||||
minHeight: '100%',
|
||||
fontSize: settings.fontSize,
|
||||
lineHeight: settings.lineHeight,
|
||||
color: currentTheme.text,
|
||||
whiteSpace: 'pre-wrap',
|
||||
textAlign: 'justify',
|
||||
wordBreak: 'break-word',
|
||||
overflowWrap: 'break-word'
|
||||
}}
|
||||
>
|
||||
{chapter.content ? (
|
||||
// 按段落渲染内容，优化阅读体验
|
||||
chapter.content.split('\n').map((paragraph, index) => (
|
||||
paragraph.trim() ? (
|
||||
<p
|
||||
key={index}
|
||||
style={{
|
||||
textIndent: '2em',
|
||||
margin: 0,
|
||||
marginBottom: '0.8em'
|
||||
}}
|
||||
>
|
||||
{paragraph}
|
||||
</p>
|
||||
) : (
|
||||
<br key={index} />
|
||||
)
|
||||
))
|
||||
) : (
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: '60px 20px',
|
||||
color: currentTheme.text,
|
||||
opacity: 0.6
|
||||
}}>
|
||||
暂无内容
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
|
||||
{/* 底部导航栏 */}
|
||||
<div style={{
|
||||
flex: 'none',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: isMobile ? '12px 16px' : '16px 24px',
|
||||
borderTop: `1px solid ${currentTheme.border}`,
|
||||
background: currentTheme.headerBg,
|
||||
zIndex: 100
|
||||
}}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<LeftOutlined />}
|
||||
disabled={!navigation?.previous || loading}
|
||||
onClick={handlePrevious}
|
||||
size={isMobile ? 'middle' : 'large'}
|
||||
>
|
||||
{!isMobile && '上一章'}
|
||||
</Button>
|
||||
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
color: currentTheme.text,
|
||||
fontSize: isMobile ? 12 : 14
|
||||
}}>
|
||||
<div>{chapter.word_count || 0} 字</div>
|
||||
{navigation && (
|
||||
<div style={{ fontSize: isMobile ? 10 : 12, opacity: 0.7 }}>
|
||||
{navigation.previous ? `← ${navigation.previous.title}` : '已是第一章'}
|
||||
{' | '}
|
||||
{navigation.next ? `${navigation.next.title} →` : '已是最后一章'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
disabled={!navigation?.next || loading}
|
||||
onClick={handleNext}
|
||||
size={isMobile ? 'middle' : 'large'}
|
||||
>
|
||||
{!isMobile && '下一章'}
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user