Skip to content

Commit 2ae42ea

Browse files
byodianbyodian
committed
feat: add cartoon template
1 parent a394b4a commit 2ae42ea

19 files changed

+314
-34
lines changed

‎public/images/cartoon-direction-icon.svg

+3
Loading

‎public/images/cartoon-star-left.svg

+3
Loading

‎public/images/cartoon-star-yellow.svg

+3
Loading

‎src/app/layout.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Metadata, Viewport } from 'next'
2-
import { Noto_Sans_SC } from 'next/font/google'
2+
import { Noto_Sans_SC, ZCOOL_KuaiLe } from 'next/font/google'
33
import '@/app/globals.css'
44
import { headers } from 'next/headers'
55
import { NextAppDirEmotionCacheProvider } from 'tss-react/next/appDir'
@@ -11,6 +11,12 @@ const notoSansSc = Noto_Sans_SC({
1111
variable: '--font-noto-sans-sc',
1212
})
1313

14+
const zCoolKuaiLe = ZCOOL_KuaiLe({
15+
subsets: ['latin'],
16+
variable: '--font-zcool-kuailve',
17+
weight: '400',
18+
})
19+
1420
export const viewport: Viewport = {
1521
width: 'device-width',
1622
initialScale: 1,
@@ -66,7 +72,7 @@ export default function RootLayout({
6672
}>) {
6773
return (
6874
<html lang="en" className="h-full break-words overflow-hidden" data-platform={getPlatform()}>
69-
<body className={cn('h-full overflow-hidden antialiased', notoSansSc.variable)}>
75+
<body className={cn('h-full overflow-hidden antialiased', notoSansSc.variable, zCoolKuaiLe.variable)}>
7076
<NextAppDirEmotionCacheProvider options={{ key: 'tss' }}>
7177
{children}
7278
<Toaster />

‎src/components/header/export-dialog.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ export function ExportImageDialog({
6565
scale: Number(scale),
6666
} as ExportOption
6767

68+
setPreviewImages([])
69+
6870
const generateImages = async () => {
6971
if (previewRef.current) {
7072
const images: ExportImage[] = []
@@ -189,7 +191,7 @@ export function ExportImageDialog({
189191
<Button
190192
variant="ghost"
191193
data-scale="1"
192-
disabled={isExporting}
194+
disabled={previewImages.length === 0 || isExporting}
193195
className={cn('h-6 px-2.5 py-0.5 hover:bg-transparent hover:text-primary', scale === '1' && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground')}
194196
onClick={onScaleChange}
195197
>
@@ -198,7 +200,7 @@ export function ExportImageDialog({
198200
<Button
199201
variant="ghost"
200202
data-scale="2"
201-
disabled={isExporting}
203+
disabled={previewImages.length === 0 || isExporting}
202204
className={cn('h-6 px-2.5 py-0.5 hover:bg-transparent hover:text-primary', scale === '2' && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground')}
203205
onClick={onScaleChange}
204206
>
@@ -207,7 +209,7 @@ export function ExportImageDialog({
207209
<Button
208210
variant="ghost"
209211
data-scale="3"
210-
disabled={isExporting}
212+
disabled={previewImages.length === 0 || isExporting}
211213
className={cn('h-6 px-2.5 py-0.5 hover:bg-transparent hover:text-primary', scale === '3' && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground')}
212214
onClick={onScaleChange}
213215
>
@@ -216,7 +218,7 @@ export function ExportImageDialog({
216218
</div>
217219
</div>
218220
<div className="mt-4 sm:mt-auto ml-auto">
219-
<Button onClick={exportImages} disabled={isExporting}>
221+
<Button onClick={exportImages} disabled={previewImages.length === 0 || isExporting}>
220222
{isExporting ? (
221223
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
222224
) : (

‎src/components/preview/card.tsx

+10-16
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import DOMPurify from 'dompurify'
22
import parse from 'html-react-parser'
33
import { forwardRef, useContext, useMemo } from 'react'
44
import { ImageList } from './image-list'
5-
import { baseTemplate, themeColorStyles } from './styles'
5+
import { baseTemplate } from './styles'
66
import type { ContentWithId, ImageFile } from '@/types'
77
import { base64ToBlob, cn, createStyleClassMap, stripEmptyParagraphs } from '@/lib'
88
import { CustomThemeContext } from '@/contexts/custom-theme-context'
@@ -27,28 +27,22 @@ const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children,
2727
}, [uploadFiles]) || []
2828

2929
const templateClassNameMap = createStyleClassMap(theme.template, 'template', baseTemplate)
30-
const themeClassNameMap = createStyleClassMap(themeColorStyles, 'theme')
3130

3231
// template
3332
const heroTemplate = templateClassNameMap.hero
3433
const mainTemplate = templateClassNameMap.main
3534
const subTemplate = templateClassNameMap.sub
3635

37-
// theme color
38-
const heroTheme = themeClassNameMap.hero
39-
const mainTheme = themeClassNameMap.main
40-
const subTheme = themeClassNameMap.sub
41-
4236
return (
4337
<div
4438
id={`${content.id}`}
4539
className={cn(
4640
templateClassNameMap.common.container,
4741
content.parentId
48-
? `${subTemplate.container} ${subTheme.container}`
42+
? `${subTemplate.container}`
4943
: content.type === 'theme_content'
50-
? `${heroTemplate.container} ${heroTheme.container}`
51-
: `${mainTemplate.container} ${mainTheme.container}`,
44+
? `${heroTemplate.container}`
45+
: `${mainTemplate.container}`,
5246
)}
5347
ref={ref}
5448
>
@@ -57,10 +51,10 @@ const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children,
5751
<div
5852
className={
5953
cn(content.parentId
60-
? `${subTemplate.title} ${subTheme.title}`
54+
? `${subTemplate.title}`
6155
: content.type === 'theme_content'
62-
? `${heroTemplate.title} ${heroTheme.title}`
63-
: `${mainTemplate.title} ${mainTheme.title}`,
56+
? `${heroTemplate.title}`
57+
: `${mainTemplate.title}`,
6458
)
6559
}
6660
data-index={index}
@@ -75,10 +69,10 @@ const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children,
7569
className={
7670
cn(templateClassNameMap.common.content,
7771
content.parentId
78-
? `${subTemplate.content} ${subTheme.content}`
72+
? `${subTemplate.content}`
7973
: content.type === 'theme_content'
80-
? `${heroTemplate.content} ${heroTheme.content}`
81-
: `${mainTemplate.content} ${mainTheme.content}`,
74+
? `${heroTemplate.content}`
75+
: `${mainTemplate.content}`,
8276
)
8377
}
8478
>

‎src/components/preview/styles/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from './base-template'
2-
export * from './theme-color-style'

‎src/theme/index.ts

+10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import {
2+
cartoonGreen,
3+
cartoonPurple,
4+
cartoonTemplate,
5+
cartoonYellow,
26
simpleSnowBlack,
37
simpleSnowWhite,
48
simpleTemplate,
@@ -12,6 +16,7 @@ import type { ArticleModuleTemplate, ThemeColorItem } from '@/types'
1216
export const DEFAULT_TEMPLATES = [
1317
{ label: '简约科技风格', value: 'wechat-post-1', disabled: false, template: techTemplate },
1418
{ label: '黑白苹果风格', value: 'apple-style', disabled: false, template: simpleTemplate },
19+
{ label: '卡通风格', value: 'cartoon-style', disabled: false, template: cartoonTemplate },
1520
{ label: '更多模版尽情期待', value: 'post-more', disabled: true, template: null },
1621
] as const
1722

@@ -33,6 +38,11 @@ export const DEFAULT_THEME_COLOR_MAP: Record<string, ThemeColorItem[]> = {
3338
{ value: '#ddd', label: 'snow_white', theme: simpleSnowWhite },
3439
{ value: '#000', label: 'midnight_black', theme: simpleSnowBlack },
3540
],
41+
'cartoon-style': [
42+
{ value: '#b38aef', label: 'purple', theme: cartoonPurple },
43+
{ value: '#cdea9c', label: 'green', theme: cartoonGreen },
44+
{ value: '#ffe97f', label: 'yellow', theme: cartoonYellow },
45+
],
3646
'default': [
3747
{ value: '#4383ec', label: 'tech_blue', theme: techBlue },
3848
{ value: '#ff611d', label: 'vibrant_orange', theme: techBlue },

‎src/theme/templates/cartoon-template/cartoon-color-variables.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import type { ThemeConfig } from '@/types'
2+
3+
export const cartoonPurple: ThemeConfig = createCartoonThemeColor('#e3dceb', '#ffe36c', '#c0a1f1')
4+
export const cartoonGreen: ThemeConfig = createCartoonThemeColor('#cdea9c', '#ffe36c', '#99c64c')
5+
export const cartoonYellow: ThemeConfig = createCartoonThemeColor('#ffe97f', '#ffbf74', '#ff773d')
6+
7+
function createCartoonThemeColor(containerBgColor: string, titleBgPrimaryColor: string, titleBgSecondaryColor: string) {
8+
return {
9+
hero: {
10+
container: {
11+
background: containerBgColor,
12+
foreground: '#333',
13+
},
14+
title: {
15+
foreground: '#fff',
16+
background: 'transparent',
17+
},
18+
content: {
19+
foreground: '#000',
20+
background: 'transparent',
21+
},
22+
},
23+
main: {
24+
container: {
25+
foreground: '#000',
26+
background: containerBgColor,
27+
},
28+
title: {
29+
backgroundPrimary: titleBgPrimaryColor,
30+
backgroundSecondary: titleBgSecondaryColor,
31+
},
32+
content: {
33+
background: '#fff',
34+
},
35+
},
36+
sub: {
37+
container: {
38+
},
39+
title: {
40+
background: titleBgPrimaryColor,
41+
},
42+
content: {
43+
},
44+
},
45+
}
46+
}

0 commit comments

Comments
 (0)