chore: update cartoon template

Author: byodian

package.json

@@ -91,7 +91,8 @@
     "lint-staged": "^15.2.10",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vercel": "39.1.1"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx}": [

pnpm-lock.yaml

@@ -219,7 +219,7 @@ export function ExportImageDialog({
             </div>
             <div className="mt-4 sm:mt-auto ml-auto">
               <Button onClick={exportImages} disabled={previewImages.length === 0 || isExporting}>
-                {isExporting ? (
+                {previewImages.length === 0 || isExporting ? (
                   <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                 ) : (
                   <Download className="w-4 h-4 mr-2" />

public/images/cartoon-star-inner.svg

@@ -1,4 +1,5 @@
 import {
+  cartoonBlue,
   cartoonGreen,
   cartoonPurple,
   cartoonTemplate,
@@ -15,8 +16,8 @@ import type { ArticleModuleTemplate, ThemeColorItem } from '@/types'
 
 export const DEFAULT_TEMPLATES = [
   { label: '简约科技风格', value: 'wechat-post-1', disabled: false, template: techTemplate },
-  { label: '黑白苹果风格', value: 'apple-style', disabled: false, template: simpleTemplate },
-  { label: '卡通风格', value: 'cartoon-style', disabled: false, template: cartoonTemplate },
+  { label: '简约黑白风格', value: 'apple-style', disabled: false, template: simpleTemplate },
+  { label: '简约卡通风格', value: 'cartoon-style', disabled: false, template: cartoonTemplate },
   { label: '更多模版尽情期待', value: 'post-more', disabled: true, template: null },
 ] as const
 
@@ -42,6 +43,7 @@ export const DEFAULT_THEME_COLOR_MAP: Record<string, ThemeColorItem[]> = {
     { value: '#b38aef', label: 'purple', theme: cartoonPurple },
     { value: '#cdea9c', label: 'green', theme: cartoonGreen },
     { value: '#ffe97f', label: 'yellow', theme: cartoonYellow },
+    { value: '#516cf5', label: 'blue', theme: cartoonBlue },
   ],
   'default': [
     { value: '#4383ec', label: 'tech_blue', theme: techBlue },

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

@@ -1,22 +1,24 @@
 import type { ThemeConfig } from '@/types'
 
-export const cartoonPurple: ThemeConfig = createCartoonThemeColor('#e3dceb', '#ffe36c', '#c0a1f1')
-export const cartoonGreen: ThemeConfig = createCartoonThemeColor('#cdea9c', '#ffe36c', '#99c64c')
-export const cartoonYellow: ThemeConfig = createCartoonThemeColor('#ffe97f', '#ffbf74', '#ff773d')
+export const cartoonPurple: ThemeConfig = createCartoonThemeColor('#e3dceb', '#000', '#ffe36c', '#c0a1f1', 'purple')
+export const cartoonGreen: ThemeConfig = createCartoonThemeColor('#cdea9c', '#000', '#ffe36c', '#99c64c', 'green')
+export const cartoonYellow: ThemeConfig = createCartoonThemeColor('#ffe97f', '#000', '#ffbf74', '#ff773d', 'yellow')
+export const cartoonBlue: ThemeConfig = createCartoonThemeColor('#516CF5', '#fff', '#FFCF4D', '#000', 'blue')
 
-function createCartoonThemeColor(containerBgColor: string, titleBgPrimaryColor: string, titleBgSecondaryColor: string) {
+function createCartoonThemeColor(containerBgColor: string, containerColor: string, titleBgPrimaryColor: string, titleBgSecondaryColor: string, starIconColor: string) {
   return {
     hero: {
       container: {
         background: containerBgColor,
-        foreground: '#333',
+        backgroundImageLeft: `url(/images/cartoon-star-left-${starIconColor}.svg)`,
+        backgroundImageRight: `url(/images/cartoon-star-right-${starIconColor}.svg)`,
+        foreground: containerColor,
       },
       title: {
         foreground: '#fff',
         background: 'transparent',
       },
       content: {
-        foreground: '#000',
         background: 'transparent',
       },
     },