style:优化生成封面按钮样式,适配明暗模式

This commit is contained in:
xiamuceer
2026-03-18 11:08:41 +08:00
parent 34352cb0db
commit 6f4f6a3914
+12 -4
View File
@@ -58,6 +58,15 @@ export default function BookshelfPage({
const { resolvedMode } = useThemeMode(); const { resolvedMode } = useThemeMode();
const isDark = resolvedMode === 'dark'; const isDark = resolvedMode === 'dark';
const alphaColor = (color: string, alpha: number) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`; const alphaColor = (color: string, alpha: number) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
const coverButtonStyle = {
color: isDark ? token.colorWhite : token.colorPrimaryText,
background: isDark
? 'rgba(255,255,255,0.14)'
: `linear-gradient(135deg, ${alphaColor(token.colorWhite, 0.92)} 0%, ${alphaColor(token.colorBgContainer, 0.84)} 100%)`,
borderColor: isDark ? 'rgba(255,255,255,0.22)' : alphaColor(token.colorPrimary, 0.35),
boxShadow: isDark ? 'none' : `0 6px 16px ${alphaColor(token.colorPrimary, 0.18)}`,
backdropFilter: 'blur(8px)',
};
const [flippedProjectIds, setFlippedProjectIds] = useState<Record<string, boolean>>({}); const [flippedProjectIds, setFlippedProjectIds] = useState<Record<string, boolean>>({});
const [coverGeneratingIds, setCoverGeneratingIds] = useState<Record<string, boolean>>({}); const [coverGeneratingIds, setCoverGeneratingIds] = useState<Record<string, boolean>>({});
const mobileBookHeight = 520; const mobileBookHeight = 520;
@@ -689,6 +698,7 @@ export default function BookshelfPage({
icon={<ReloadOutlined />} icon={<ReloadOutlined />}
loading={coverActionLoading} loading={coverActionLoading}
onClick={(e) => void handleGenerateCoverClick(e, project, true)} onClick={(e) => void handleGenerateCoverClick(e, project, true)}
style={coverButtonStyle}
> >
{coverActionLoading ? '重新生成中...' : '重新生成'} {coverActionLoading ? '重新生成中...' : '重新生成'}
</Button> </Button>
@@ -702,6 +712,7 @@ export default function BookshelfPage({
icon={<PictureOutlined />} icon={<PictureOutlined />}
loading={coverActionLoading} loading={coverActionLoading}
onClick={(e) => void handleGenerateCoverClick(e, project, true)} onClick={(e) => void handleGenerateCoverClick(e, project, true)}
style={coverButtonStyle}
> >
{coverActionLoading ? '生成中...' : '生成封面'} {coverActionLoading ? '生成中...' : '生成封面'}
</Button> </Button>
@@ -894,10 +905,7 @@ export default function BookshelfPage({
loading={coverActionLoading} loading={coverActionLoading}
onClick={(e) => void handleGenerateCoverClick(e, project, true)} onClick={(e) => void handleGenerateCoverClick(e, project, true)}
style={{ style={{
color: token.colorWhite, ...coverButtonStyle,
background: 'rgba(255,255,255,0.14)',
borderColor: 'rgba(255,255,255,0.22)',
backdropFilter: 'blur(8px)',
minWidth: isMobile ? 112 : 124, minWidth: isMobile ? 112 : 124,
}} }}
> >