feature: 新增书架页组件与项目页新架构（书架视图、侧边栏折叠记忆、URL 视图参数切换）
This commit is contained in:
xiamuceer-j
@@ -0,0 +1,590 @@
|
||||
import { Card, Button, Spin, Space, Tag, Typography, Alert, Tooltip, theme } from 'antd';
|
||||
import { BookOutlined, RocketOutlined, BulbOutlined, UploadOutlined, DownloadOutlined, LoadingOutlined, CalendarOutlined, DeleteOutlined, CheckCircleOutlined, EditOutlined, PauseCircleOutlined } from '@ant-design/icons';
|
||||
import type { ReactNode } from 'react';
|
||||
import type { Project } from '../types';
|
||||
import { bookshelfCardStyles, bookshelfCardHoverHandlers } from '../components/CardStyles';
|
||||
import { useThemeMode } from '../theme/useThemeMode';
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
|
||||
interface BookshelfPageProps {
|
||||
isMobile: boolean;
|
||||
loading: boolean;
|
||||
projects: Project[];
|
||||
showApiTip: boolean;
|
||||
setShowApiTip: (show: boolean) => void;
|
||||
exportableProjectsCount: number;
|
||||
onOpenImportModal: () => void;
|
||||
onOpenExportModal: () => void;
|
||||
onGoSettings: () => void;
|
||||
onStartWizard: () => void;
|
||||
onOpenInspiration: () => void;
|
||||
onEnterProject: (project: Project) => void;
|
||||
onDeleteProject: (projectId: string) => void;
|
||||
formatWordCount: (count: number) => string;
|
||||
getProgress: (current: number, target: number) => number;
|
||||
getProgressColor: (progress: number) => string;
|
||||
getDisplayStatus: (status: string, progress: number) => string;
|
||||
getStatusTag: (status: string) => ReactNode;
|
||||
formatDate: (dateString: string) => string;
|
||||
}
|
||||
|
||||
export default function BookshelfPage({
|
||||
isMobile,
|
||||
loading,
|
||||
projects,
|
||||
showApiTip,
|
||||
setShowApiTip,
|
||||
exportableProjectsCount,
|
||||
onOpenImportModal,
|
||||
onOpenExportModal,
|
||||
onGoSettings,
|
||||
onStartWizard,
|
||||
onOpenInspiration,
|
||||
onEnterProject,
|
||||
onDeleteProject,
|
||||
formatWordCount,
|
||||
getProgress,
|
||||
getProgressColor,
|
||||
getDisplayStatus,
|
||||
formatDate,
|
||||
}: BookshelfPageProps) {
|
||||
const { token } = theme.useToken();
|
||||
const { resolvedMode } = useThemeMode();
|
||||
const isDark = resolvedMode === 'dark';
|
||||
const alphaColor = (color: string, alpha: number) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
|
||||
const mobileBookHeight = 460;
|
||||
const desktopBookHeight = 430;
|
||||
const mobileSpineWidth = 32;
|
||||
|
||||
const serialBookPalettes = [
|
||||
{
|
||||
spine: `linear-gradient(180deg, color-mix(in srgb, ${token.colorSuccess} ${isDark ? 58 : 42}%, ${token.colorBgContainer} ${isDark ? 42 : 58}%) 0%, color-mix(in srgb, ${token.colorSuccess} ${isDark ? 74 : 56}%, ${token.colorText} ${isDark ? 26 : 44}%) 100%)`,
|
||||
spineBorder: `color-mix(in srgb, ${token.colorSuccess} ${isDark ? 66 : 52}%, ${token.colorBorder} ${isDark ? 34 : 48}%)`,
|
||||
ribbon: `color-mix(in srgb, ${token.colorSuccess} ${isDark ? 70 : 82}%, ${token.colorPrimary} ${isDark ? 30 : 18}%)`,
|
||||
},
|
||||
{
|
||||
spine: `linear-gradient(180deg, color-mix(in srgb, ${token.colorWarning} ${isDark ? 64 : 52}%, ${token.colorBgContainer} ${isDark ? 36 : 48}%) 0%, color-mix(in srgb, ${token.colorWarning} ${isDark ? 80 : 66}%, ${token.colorText} ${isDark ? 20 : 34}%) 100%)`,
|
||||
spineBorder: `color-mix(in srgb, ${token.colorWarning} ${isDark ? 70 : 56}%, ${token.colorBorder} ${isDark ? 30 : 44}%)`,
|
||||
ribbon: `color-mix(in srgb, ${token.colorWarning} ${isDark ? 72 : 82}%, ${token.colorPrimary} ${isDark ? 28 : 18}%)`,
|
||||
},
|
||||
{
|
||||
spine: `linear-gradient(180deg, color-mix(in srgb, ${token.colorInfo} ${isDark ? 46 : 30}%, ${token.colorText} ${isDark ? 54 : 70}%) 0%, color-mix(in srgb, ${token.colorText} ${isDark ? 66 : 52}%, ${token.colorBgContainer} ${isDark ? 34 : 48}%) 100%)`,
|
||||
spineBorder: `color-mix(in srgb, ${token.colorText} ${isDark ? 74 : 64}%, ${token.colorBorder} ${isDark ? 26 : 36}%)`,
|
||||
ribbon: `color-mix(in srgb, ${token.colorInfo} ${isDark ? 68 : 76}%, ${token.colorPrimary} ${isDark ? 32 : 24}%)`,
|
||||
},
|
||||
{
|
||||
spine: `linear-gradient(180deg, color-mix(in srgb, ${token.colorPrimary} ${isDark ? 62 : 50}%, ${token.colorBgContainer} ${isDark ? 38 : 50}%) 0%, color-mix(in srgb, ${token.colorPrimary} ${isDark ? 78 : 62}%, ${token.colorText} ${isDark ? 22 : 38}%) 100%)`,
|
||||
spineBorder: `color-mix(in srgb, ${token.colorPrimary} ${isDark ? 70 : 58}%, ${token.colorBorder} ${isDark ? 30 : 42}%)`,
|
||||
ribbon: `color-mix(in srgb, ${token.colorPrimary} ${isDark ? 74 : 86}%, ${token.colorInfo} ${isDark ? 26 : 14}%)`,
|
||||
},
|
||||
];
|
||||
|
||||
const completedBookPalette = {
|
||||
spine: `linear-gradient(180deg, color-mix(in srgb, ${token.colorPrimary} ${isDark ? 68 : 52}%, ${token.colorSuccess} ${isDark ? 32 : 48}%) 0%, color-mix(in srgb, ${token.colorPrimary} ${isDark ? 82 : 66}%, ${token.colorText} ${isDark ? 18 : 34}%) 100%)`,
|
||||
spineBorder: `color-mix(in srgb, ${token.colorPrimary} ${isDark ? 76 : 62}%, ${token.colorBorder} ${isDark ? 24 : 38}%)`,
|
||||
ribbon: `color-mix(in srgb, ${token.colorPrimary} ${isDark ? 62 : 48}%, ${token.colorError} ${isDark ? 38 : 52}%)`,
|
||||
};
|
||||
|
||||
const getRibbonStatusIcon = (displayStatus: string, isWizardIncomplete: boolean, isCompleted: boolean) => {
|
||||
const commonStyle = { color: token.colorWhite, fontSize: isMobile ? 12 : 14 };
|
||||
|
||||
if (isWizardIncomplete) {
|
||||
return <LoadingOutlined spin style={commonStyle} />;
|
||||
}
|
||||
if (isCompleted) {
|
||||
return <CheckCircleOutlined style={commonStyle} />;
|
||||
}
|
||||
if (displayStatus.includes('暂停') || displayStatus.includes('搁置')) {
|
||||
return <PauseCircleOutlined style={commonStyle} />;
|
||||
}
|
||||
if (displayStatus.includes('筹备') || displayStatus.includes('准备') || displayStatus.includes('大纲')) {
|
||||
return <BulbOutlined style={commonStyle} />;
|
||||
}
|
||||
|
||||
return <EditOutlined style={commonStyle} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
variant="borderless"
|
||||
style={{
|
||||
marginBottom: isMobile ? 12 : 16,
|
||||
borderRadius: isMobile ? 14 : 18,
|
||||
background: `linear-gradient(135deg, ${token.colorPrimary} 0%, ${token.colorPrimaryHover} 100%)`,
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
border: 'none',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
styles={{ body: { padding: isMobile ? '14px 14px' : '16px 18px' } }}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: -44, right: -44, width: 150, height: 150, borderRadius: '50%', background: token.colorWhite, opacity: 0.1, pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', bottom: -36, left: '26%', width: 100, height: 100, borderRadius: '50%', background: token.colorWhite, opacity: 0.06, pointerEvents: 'none' }} />
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
alignItems: isMobile ? 'stretch' : 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: isMobile ? 12 : 16,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: isMobile ? 18 : 22,
|
||||
fontWeight: 700,
|
||||
color: token.colorWhite,
|
||||
lineHeight: 1.3,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
textShadow: `0 2px 4px ${alphaColor(token.colorText, 0.2)}`,
|
||||
}}
|
||||
>
|
||||
<BookOutlined style={{ opacity: 0.92 }} />
|
||||
我的书架
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 4,
|
||||
fontSize: isMobile ? 12 : 13,
|
||||
color: alphaColor(token.colorWhite, 0.9),
|
||||
}}
|
||||
>
|
||||
点击书本即可进入项目，统一查看进度、字数与状态。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Space size={8} wrap>
|
||||
<Button
|
||||
icon={<UploadOutlined />}
|
||||
onClick={onOpenImportModal}
|
||||
style={{ borderRadius: 10 }}
|
||||
>
|
||||
导入项目
|
||||
</Button>
|
||||
<Button
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={onOpenExportModal}
|
||||
disabled={exportableProjectsCount === 0}
|
||||
style={{ borderRadius: 10 }}
|
||||
>
|
||||
导出项目
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{showApiTip && projects.length === 0 && (
|
||||
<Alert
|
||||
message="欢迎使用 MuMuAINovel"
|
||||
description={
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
alignItems: isMobile ? 'flex-start' : 'center',
|
||||
gap: isMobile ? 12 : 16,
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<span style={{ fontSize: isMobile ? 12 : 14 }}>
|
||||
在开始创作之前，请先配置您的AI接口（支持 OpenAI / Anthropic）。
|
||||
</span>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={onGoSettings}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
去配置
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
closable
|
||||
onClose={() => setShowApiTip(false)}
|
||||
style={{
|
||||
marginBottom: isMobile ? 16 : 24,
|
||||
borderRadius: 12
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Spin spinning={loading}>
|
||||
<div style={{
|
||||
...bookshelfCardStyles.container,
|
||||
borderRadius: isMobile ? 12 : 16,
|
||||
border: `1px solid ${isDark ? alphaColor(token.colorBorder, 0.42) : alphaColor(token.colorText, 0.06)}`,
|
||||
backgroundColor: isDark ? alphaColor(token.colorBgContainer, 0.42) : alphaColor(token.colorBgContainer, 0.72),
|
||||
backgroundImage: `radial-gradient(${alphaColor(token.colorText, isDark ? 0.16 : 0.08)} 1px, transparent 0)`,
|
||||
backgroundSize: '18px 18px',
|
||||
boxShadow: `inset 0 1px 0 ${alphaColor(token.colorWhite, isDark ? 0.08 : 0.45)}`,
|
||||
padding: isMobile ? '12px' : '18px',
|
||||
...(isMobile && {
|
||||
gridTemplateColumns: '1fr',
|
||||
gap: '14px',
|
||||
})
|
||||
}}>
|
||||
<div style={{ position: 'relative', width: '100%', minWidth: 0, minHeight: isMobile ? mobileBookHeight : desktopBookHeight }}>
|
||||
<Card
|
||||
hoverable
|
||||
style={{ ...bookshelfCardStyles.newProjectCard, minHeight: isMobile ? mobileBookHeight : desktopBookHeight }}
|
||||
styles={{ body: { padding: 0, flex: 1, display: 'flex', flexDirection: 'column' } }}
|
||||
{...bookshelfCardHoverHandlers}
|
||||
data-type="new-project"
|
||||
data-card-style="bookshelf-book"
|
||||
data-book-kind="new"
|
||||
>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background: `linear-gradient(180deg, ${alphaColor(isDark ? token.colorBgContainer : token.colorWhite, isDark ? 0.14 : 0.42)} 0%, transparent 22%, transparent 78%, ${alphaColor(token.colorWarning, isDark ? 0.1 : 0.05)} 100%)`,
|
||||
pointerEvents: 'none'
|
||||
}} />
|
||||
<div style={{
|
||||
width: '100%',
|
||||
minHeight: isMobile ? mobileBookHeight : desktopBookHeight,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: isMobile ? 18 : 22,
|
||||
padding: isMobile ? '24px 18px 64px' : '34px 28px 72px',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
}}>
|
||||
<div style={{
|
||||
width: isMobile ? 56 : 68,
|
||||
height: isMobile ? 56 : 68,
|
||||
borderRadius: '50%',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: `linear-gradient(180deg, ${alphaColor(token.colorPrimary, isDark ? 0.18 : 0.12)} 0%, ${alphaColor(token.colorPrimary, isDark ? 0.28 : 0.2)} 100%)`,
|
||||
color: token.colorPrimary,
|
||||
boxShadow: `inset 0 1px 0 ${alphaColor(token.colorWhite, isDark ? 0.18 : 0.75)}`,
|
||||
}}>
|
||||
<BookOutlined style={{ fontSize: isMobile ? 24 : 28 }} />
|
||||
</div>
|
||||
|
||||
<div style={{ width: '100%', maxWidth: 240, display: 'flex', flexDirection: 'column', gap: isMobile ? 10 : 14 }}>
|
||||
<Button
|
||||
type="primary"
|
||||
size={isMobile ? 'middle' : 'large'}
|
||||
icon={<RocketOutlined />}
|
||||
onClick={onStartWizard}
|
||||
style={{
|
||||
height: isMobile ? 42 : 52,
|
||||
fontSize: isMobile ? 14 : 16,
|
||||
borderRadius: 10,
|
||||
boxShadow: `0 10px 18px ${alphaColor(token.colorPrimary, isDark ? 0.14 : 0.22)}`,
|
||||
}}
|
||||
block
|
||||
>
|
||||
快速开始
|
||||
</Button>
|
||||
<Button
|
||||
size={isMobile ? 'middle' : 'large'}
|
||||
icon={<BulbOutlined />}
|
||||
onClick={onOpenInspiration}
|
||||
style={{
|
||||
height: isMobile ? 42 : 52,
|
||||
fontSize: isMobile ? '14px' : '16px',
|
||||
borderRadius: 10,
|
||||
borderColor: alphaColor(token.colorWarning, isDark ? 0.34 : 0.5),
|
||||
color: `color-mix(in srgb, ${token.colorWarning} ${isDark ? 78 : 72}%, ${token.colorText} ${isDark ? 22 : 28}%)`,
|
||||
background: `linear-gradient(180deg, ${alphaColor(token.colorWarning, isDark ? 0.12 : 0.12)} 0%, ${alphaColor(token.colorWarning, isDark ? 0.2 : 0.2)} 100%)`,
|
||||
}}
|
||||
block
|
||||
>
|
||||
灵感模式
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: isMobile ? 24 : 28,
|
||||
left: 24,
|
||||
right: 24,
|
||||
textAlign: 'center',
|
||||
fontSize: isMobile ? 11 : 12,
|
||||
color: token.colorTextTertiary,
|
||||
letterSpacing: 0.5,
|
||||
}}>
|
||||
开始一个新的创作旅程
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{Array.isArray(projects) && projects.map((project, index) => {
|
||||
const progress = getProgress(project.current_words || 0, project.target_words || 0);
|
||||
const progressColor = getProgressColor(progress);
|
||||
const isWizardIncomplete = project.wizard_status === 'incomplete';
|
||||
const displayStatus = getDisplayStatus(project.status, progress);
|
||||
const isCompleted = progress >= 100 || displayStatus.includes('完结');
|
||||
const palette = isCompleted ? completedBookPalette : serialBookPalettes[index % serialBookPalettes.length];
|
||||
const tags = project.genre ? project.genre.split(/[,、，]/).map((t: string) => t.trim()).filter((t: string) => t) : [];
|
||||
|
||||
const ribbonStatusIcon = getRibbonStatusIcon(displayStatus, isWizardIncomplete, isCompleted);
|
||||
|
||||
return (
|
||||
<div key={project.id} style={{ position: 'relative', width: '100%', minWidth: 0, minHeight: isMobile ? mobileBookHeight : desktopBookHeight }}>
|
||||
<Card
|
||||
hoverable
|
||||
style={{ ...bookshelfCardStyles.projectCard, minHeight: isMobile ? mobileBookHeight : desktopBookHeight }}
|
||||
styles={{ body: { padding: 0, flex: 1, display: 'flex', flexDirection: 'column' } }}
|
||||
{...bookshelfCardHoverHandlers}
|
||||
onClick={() => onEnterProject(project)}
|
||||
data-card-style="bookshelf-book"
|
||||
data-book-kind="project"
|
||||
>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: isMobile ? mobileSpineWidth : 22,
|
||||
borderRadius: '3px 0 0 3px',
|
||||
background: palette.spine,
|
||||
borderRight: `1px solid ${palette.spineBorder}`,
|
||||
boxShadow: `inset -3px 0 6px ${alphaColor(token.colorText, isDark ? 0.42 : 0.25)}, inset 2px 0 4px ${alphaColor(token.colorWhite, isDark ? 0.08 : 0.14)}`,
|
||||
zIndex: 0,
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: isMobile ? 16 : 24,
|
||||
width: isMobile ? 24 : 30,
|
||||
height: isMobile ? 42 : 52,
|
||||
clipPath: 'polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%)',
|
||||
background: palette.ribbon,
|
||||
boxShadow: `0 8px 16px ${alphaColor(token.colorText, isDark ? 0.26 : 0.14)}`,
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
paddingTop: isMobile ? 8 : 10,
|
||||
zIndex: 3,
|
||||
pointerEvents: 'none',
|
||||
}}>
|
||||
{ribbonStatusIcon}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minHeight: isMobile ? mobileBookHeight : desktopBookHeight,
|
||||
padding: isMobile ? '18px 16px 14px 38px' : '26px 24px 18px 42px',
|
||||
}}>
|
||||
<div style={{ marginBottom: isMobile ? 10 : 12, paddingRight: isMobile ? 18 : 30 }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: 8,
|
||||
marginBottom: isMobile ? 8 : 10,
|
||||
minHeight: isMobile ? 50 : 58,
|
||||
}}>
|
||||
<BookOutlined style={{
|
||||
fontSize: isMobile ? 14 : 16,
|
||||
color: alphaColor(token.colorText, 0.4),
|
||||
marginTop: 2,
|
||||
flexShrink: 0,
|
||||
}} />
|
||||
<Tooltip title={project.title}>
|
||||
<div style={{
|
||||
fontSize: isMobile ? 18 : 22,
|
||||
fontWeight: 700,
|
||||
color: token.colorText,
|
||||
lineHeight: 1.3,
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
wordBreak: 'break-word',
|
||||
fontFamily: 'Georgia, "Times New Roman", "Noto Serif SC", serif',
|
||||
}}>
|
||||
{project.title}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 6,
|
||||
minHeight: isMobile ? 20 : 22,
|
||||
alignItems: 'flex-start',
|
||||
}}>
|
||||
{tags.length > 0 ? tags.slice(0, 3).map((tag: string, idx: number) => (
|
||||
<Tag key={idx} style={{
|
||||
margin: 0,
|
||||
padding: isMobile ? '0 7px' : '0 8px',
|
||||
borderRadius: 4,
|
||||
border: `1px solid ${alphaColor(token.colorSuccess, 0.18)}`,
|
||||
background: alphaColor(token.colorSuccess, 0.08),
|
||||
color: token.colorSuccess,
|
||||
fontSize: isMobile ? 10 : 11,
|
||||
lineHeight: isMobile ? '18px' : '20px',
|
||||
fontWeight: 500,
|
||||
}}>
|
||||
{tag}
|
||||
</Tag>
|
||||
)) : (
|
||||
<Tag style={{
|
||||
margin: 0,
|
||||
padding: isMobile ? '0 7px' : '0 8px',
|
||||
borderRadius: 4,
|
||||
border: `1px solid ${alphaColor(token.colorSuccess, 0.18)}`,
|
||||
background: alphaColor(token.colorSuccess, 0.08),
|
||||
color: token.colorSuccess,
|
||||
fontSize: isMobile ? 10 : 11,
|
||||
lineHeight: isMobile ? '18px' : '20px',
|
||||
fontWeight: 500,
|
||||
}}>
|
||||
未分类
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Paragraph
|
||||
ellipsis={{ rows: isMobile ? 3 : 3 }}
|
||||
style={{
|
||||
fontSize: isMobile ? 12 : 13,
|
||||
color: token.colorTextSecondary,
|
||||
marginBottom: isMobile ? 12 : 16,
|
||||
lineHeight: 1.7,
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
{project.description || '暂无描述...'}
|
||||
</Paragraph>
|
||||
|
||||
<div style={{ marginBottom: isMobile ? 14 : 18 }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 6,
|
||||
fontSize: isMobile ? 11 : 12,
|
||||
}}>
|
||||
<span style={{ color: token.colorTextTertiary }}>完成进度</span>
|
||||
<span style={{ color: progressColor, fontWeight: 700 }}>{progress}%</span>
|
||||
</div>
|
||||
<div style={{
|
||||
height: 6,
|
||||
width: '100%',
|
||||
borderRadius: 999,
|
||||
overflow: 'hidden',
|
||||
background: alphaColor(token.colorText, 0.06),
|
||||
}}>
|
||||
<div style={{
|
||||
width: `${progress}%`,
|
||||
height: '100%',
|
||||
borderRadius: 999,
|
||||
background: progressColor,
|
||||
transition: 'width 0.3s ease',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
marginBottom: isMobile ? 12 : 16,
|
||||
padding: isMobile ? '12px 10px' : '14px 12px',
|
||||
background: `linear-gradient(180deg, ${alphaColor(token.colorBgContainer, 0.94)} 0%, ${alphaColor(token.colorFillSecondary, 0.78)} 100%)`,
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${alphaColor(token.colorText, 0.06)}`,
|
||||
boxShadow: `inset 0 1px 2px ${alphaColor(token.colorText, 0.08)}`,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'stretch', textAlign: 'center' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{
|
||||
fontSize: isMobile ? 22 : 26,
|
||||
fontWeight: 700,
|
||||
color: token.colorText,
|
||||
lineHeight: 1.1,
|
||||
fontFamily: 'Georgia, "Times New Roman", serif',
|
||||
}}>
|
||||
{formatWordCount(project.current_words || 0)}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: isMobile ? 10 : 11,
|
||||
color: token.colorTextTertiary,
|
||||
marginTop: 4,
|
||||
}}>
|
||||
已写字数
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: 1,
|
||||
margin: '0 12px',
|
||||
background: alphaColor(token.colorText, 0.1),
|
||||
}} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{
|
||||
fontSize: isMobile ? 22 : 26,
|
||||
fontWeight: 700,
|
||||
color: progress >= 100 ? token.colorSuccess : progressColor,
|
||||
lineHeight: 1.1,
|
||||
fontFamily: 'Georgia, "Times New Roman", serif',
|
||||
}}>
|
||||
{formatWordCount(project.target_words || 0)}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: isMobile ? 10 : 11,
|
||||
color: token.colorTextTertiary,
|
||||
marginTop: 4,
|
||||
}}>
|
||||
目标字数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingTop: isMobile ? 10 : 12,
|
||||
borderTop: `1px solid ${alphaColor(token.colorText, 0.06)}`,
|
||||
color: token.colorTextTertiary,
|
||||
marginTop: 'auto',
|
||||
}}>
|
||||
<Space size={4} style={{ fontSize: isMobile ? 11 : 12, color: token.colorTextTertiary }}>
|
||||
<CalendarOutlined style={{ fontSize: isMobile ? 10 : 12 }} />
|
||||
{formatDate(project.updated_at)}
|
||||
</Space>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined style={{ fontSize: isMobile ? 12 : 14 }} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDeleteProject(project.id);
|
||||
}}
|
||||
style={{
|
||||
padding: isMobile ? '2px 4px' : '4px 8px',
|
||||
borderRadius: 8,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+444
-742
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,28 @@
|
||||
const SIDEBAR_COLLAPSED_STORAGE_KEY = 'mumu_sidebar_collapsed';
|
||||
|
||||
export const getStoredSidebarCollapsed = (): boolean => {
|
||||
if (typeof window === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
return localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === '1';
|
||||
} catch (error) {
|
||||
console.warn('读取侧边栏状态失败:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const setStoredSidebarCollapsed = (collapsed: boolean): void => {
|
||||
if (typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, collapsed ? '1' : '0');
|
||||
} catch (error) {
|
||||
console.warn('保存侧边栏状态失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
export const getSidebarCollapsedStorageKey = (): string => SIDEBAR_COLLAPSED_STORAGE_KEY;
|
||||
Reference in New Issue
Block a user