feat: resize

Author: byodian

src/app/page.tsx

@@ -25,7 +25,18 @@ import { useThemeStore } from '@/store/use-theme-store'
 
 export default function Home() {
   const [contents, setContents] = useState<ContentWithId[]>([])
-  const { templateName, setTemplateName, theme, setTheme, templateMap, themeMap } = useThemeStore()
+  const {
+    templateName,
+    setTemplateName,
+    theme,
+    setTheme,
+    templateMap,
+    themeMap,
+    size,
+    setSize,
+    sizeName,
+    setSizeName,
+  } = useThemeStore()
   const [cssVariables, setCssVariables] = useState({})
   const [tabValue, setTabValue] = useState('workspace')
   const { toast } = useToast()
@@ -169,6 +180,9 @@ export default function Home() {
           theme={theme}
           setTheme={setTheme}
           setTableValue={setTabValue}
+          sizeName={sizeName}
+          setSize={setSize}
+          setSizeName={setSizeName}
         />
         <main className="h-[calc(100%-58px)]">
           <Tabs
@@ -183,10 +197,8 @@ export default function Home() {
               <TabsTrigger value="preview">预览</TabsTrigger>
             </TabsList>
             <TabsContent value="preview" forceMount className="data-[state=inactive]:hidden sm:!block flex-grow sm:flex-grow-0 flex-shrink sm:flex-shrink-0 overflow-y-auto mt-0">
-              <div
-                className={
-                  cn('one scroll-smooth h-full mx-auto w-[375px]')
-                }>
+              {/* 根据实际像素比，缩小3倍，保证正常预览。导出图片时放大三倍，可还原实际像素比 */}
+              <div style={{ width: `${size.width / 3}px` }} className={cn('one scroll-smooth h-full mx-auto w-[375px]')}>
                 <Preview ref={previewRef} contents={contents} className="w-full flex flex-col m-auto" />
               </div>
             </TabsContent>

src/components/header/header.tsx

@@ -18,9 +18,11 @@ import {
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Logo } from '@/components/logo'
-import type { Content, ContentWithId, PreviewRef } from '@/types'
+import type { Content, ContentWithId, PreviewRef, Size } from '@/types'
 import type { ExportContent, ExportJSON } from '@/components/header/types'
 import {
+  CACHE_KEY_SIZE,
+  CACHE_KEY_SIZE_NAME,
   CACHE_KEY_TEMPLATE, CACHE_KEY_THEME,
   addAllContents,
   cn,
@@ -49,6 +51,8 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import {
+  DEFAULT_SIZE_MAP,
+  DEFAULT_SIZE_NAMES,
   DEFAULT_TEMPLATE,
   DEFAULT_TEMPLATES,
   DEFAULT_THEME,
@@ -58,10 +62,14 @@ import { usePlatform } from '@/hooks/use-platform'
 
 interface HeaderProps {
   contents: Content[];
-  setContents: (contents: ContentWithId[]) => void;
   previewRef: React.RefObject<PreviewRef>;
   templateName: string;
   theme: string;
+  size?: Size;
+  sizeName: string;
+  setSize: (size: Size) => void;
+  setSizeName: (sizeName: string) => void;
+  setContents: (contents: ContentWithId[]) => void;
   setTemplateName: (template: string) => void;
   setTheme: (color: string) => void
   setTableValue?: (tab: string) => void
@@ -76,7 +84,7 @@ export function Header(props: HeaderProps) {
   const [isExporting, setIsExporting] = useState(true)
   const [scale, setScale] = useState('3')
   const platform = usePlatform()
-  const { contents, setContents, previewRef, templateName, theme, setTemplateName, setTheme, setTableValue } = props
+  const { contents, setContents, previewRef, templateName, theme, setTemplateName, setTheme, setTableValue, sizeName, setSizeName, setSize } = props
   const { toast } = useToast()
   const fileRef = useRef<HTMLInputElement>(null)
 
@@ -390,7 +398,7 @@ export function Header(props: HeaderProps) {
                     </SelectGroup>
                   </SelectContent >
                 </Select >
-              </div >
+              </div>
               <div className="px-1.5 py-2 text-sm">
                 <div className="mb-2">模版色</div>
                 <div>
@@ -412,6 +420,29 @@ export function Header(props: HeaderProps) {
             </MenubarContent >
           </MenubarMenu >
         </Menubar >
+        <Select defaultValue="default" value={sizeName} onValueChange={(value: string) => {
+          const size = DEFAULT_SIZE_MAP[value]
+          setSizeName(value)
+          setSize(size)
+          localStorage.setItem(CACHE_KEY_SIZE, JSON.stringify(size))
+          localStorage.setItem(CACHE_KEY_SIZE_NAME, sizeName)
+        }}>
+          <SelectTrigger className="h-8 w-[146px]">
+            <SelectValue className="text-muted-foreground" placeholder="调整尺寸" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {
+                DEFAULT_SIZE_NAMES.map(size => (
+                  <SelectItem key={size.value} value={size.value} disabled={size.disabled}>
+                    {size.label}
+                    {/* <p className="text-xs">{size.description}</p> */}
+                  </SelectItem>
+                ))
+              }
+            </SelectGroup>
+          </SelectContent >
+        </Select >
         <div className="flex flex-wrap gap-2 ml-auto">
           <Button size="sm" asChild variant="ghost" className="py-2 px-2 hidden md:flex gap-2">
             <a href="https://github.com/byodian/oneimg" target="_blank" rel="noreferrer">

src/components/preview/card.tsx

@@ -6,6 +6,7 @@ import { baseTemplate } from './styles'
 import type { ContentWithId, ImageFile } from '@/types'
 import { base64ToBlob, cn, createStyleClassMap, stripEmptyParagraphs } from '@/lib'
 import { CustomThemeContext } from '@/contexts/custom-theme-context'
+import { useThemeStore } from '@/store/use-theme-store'
 
 interface PreviewItemProps {
   content: ContentWithId,
@@ -32,12 +33,14 @@ const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children,
   const heroTemplate = templateClassNameMap.hero
   const mainTemplate = templateClassNameMap.main
   const subTemplate = templateClassNameMap.sub
+  const { size } = useThemeStore()
+  const height = typeof size.height === 'number' ? `${size.height / 3}px` : size.height
 
   return (
     <div
       id={`${content.id}`}
-      className={cn(
-        templateClassNameMap.common.container,
+      style={{ height: content.parentId ? 'auto' : height }}
+      className={cn(templateClassNameMap.common.container,
         content.parentId
           ? `${subTemplate.container}`
           : content.type === 'theme_content'

src/components/preview/styles/base-template.ts

@@ -87,7 +87,7 @@ export const baseTemplate: ArticleModuleTemplate = {
       padding: 0,
       letterSpacing: 0,
       lineHeight: '1.5',
-      overflow: 'visible',
+      overflow: 'hidden',
       overflowWrap: 'break-word',
       tabSize: 4,
       textAlign: 'left',
@@ -121,7 +121,7 @@ export const baseTemplate: ArticleModuleTemplate = {
       padding: 0,
       letterSpacing: 0,
       lineHeight: '1.5',
-      overflow: 'visible',
+      overflow: 'hidden',
       overflowWrap: 'break-word',
       tabSize: 4,
       textAlign: 'left',

src/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:block',
       className,
     )}
     {...props}

src/lib/constants.ts

@@ -1,2 +1,4 @@
 export const CACHE_KEY_TEMPLATE = 'currentTemplate'
 export const CACHE_KEY_THEME = 'currentTheme'
+export const CACHE_KEY_SIZE = 'currentSize'
+export const CACHE_KEY_SIZE_NAME = 'currentSizeName'

src/store/use-theme-store.ts

@@ -1,12 +1,16 @@
 import { create } from 'zustand'
-import type { ArticleModuleTemplate, ThemeColorItem } from '@/types'
-import { DEFAULT_TEMPLATE, DEFAULT_TEMPLATE_MAP, DEFAULT_THEME, DEFAULT_THEME_COLOR_MAP } from '@/theme'
+import type { ArticleModuleTemplate, Size, ThemeColorItem } from '@/types'
+import { DEFAULT_SIZE_MAP, DEFAULT_SIZE_NAME, DEFAULT_TEMPLATE, DEFAULT_TEMPLATE_MAP, DEFAULT_THEME, DEFAULT_THEME_COLOR_MAP } from '@/theme'
 
 interface TemplateStore {
   templateMap: Record<string, ArticleModuleTemplate>;
   templateName: string;
   theme: string;
   themeMap: Record<string, ThemeColorItem[]>;
+  sizeName: string;
+  size: Size,
+  setSize: (size: Size) => void;
+  setSizeName: (sizeName: string) => void;
   setTemplateName: (templateName: string) => void;
   setTheme: (theme: string) => void;
   setTemplateMap: (templateMap: Record<string, ArticleModuleTemplate>) => void;
@@ -17,6 +21,10 @@ export const useThemeStore = create<TemplateStore>(set => ({
   theme: DEFAULT_THEME.label,
   templateMap: DEFAULT_TEMPLATE_MAP,
   themeMap: DEFAULT_THEME_COLOR_MAP,
+  sizeName: DEFAULT_SIZE_NAME,
+  size: DEFAULT_SIZE_MAP.default,
+  setSize: size => set({ size }),
+  setSizeName: sizeName => set({ sizeName }),
   setTemplateName: templateName => set({ templateName }),
   setTemplateMap: templateMap => set({ templateMap }),
   setTheme: theme => set({ theme }),

src/theme/index.ts

@@ -12,7 +12,7 @@ import {
   techTemplate,
   techVibrantOrange,
 } from './templates'
-import type { ArticleModuleTemplate, ThemeColorItem } from '@/types'
+import type { ArticleModuleTemplate, Size, ThemeColorItem } from '@/types'
 
 export const DEFAULT_TEMPLATES = [
   { label: '简约科技风格', value: 'wechat-post-1', disabled: false, template: techTemplate },
@@ -57,3 +57,19 @@ export const DEFAULT_THEME = {
   label: 'snow_white',
   value: '#ddd',
 }
+
+export const DEFAULT_SIZE_NAME = 'default'
+export const DEFAULT_SIZE_NAMES = [
+  { label: 'Instagramt 帖子', value: 'instagram_post', disabled: false, description: '1080 × 1350 px' },
+  { label: 'Twitter 帖子', value: 'twitter_post', disabled: false, description: '1600 × 900 px' },
+  { label: '小红书帖子', value: 'redbook_post', disabled: false, description: '1242 × 1660 px' },
+  { label: '微信长图', value: 'default', disabled: false, description: '' },
+  { label: '更多尺寸尽情期待', value: 'size-more', disabled: true, description: '' },
+] as const
+
+export const DEFAULT_SIZE_MAP: Record<string, Size> = {
+  redbook_post: { width: 1242, height: 1660 },
+  instagram_post: { width: 1080, height: 1350 },
+  twitter_post: { width: 1600, height: 900 },
+  default: { width: 1125, height: 'auto' },
+}

src/theme/templates/tech-template/tech-template.ts

@@ -26,7 +26,7 @@ export const techTemplate: ArticleModuleTemplate = {
     title: {
       position: 'relative',
       zIndex: 1,
-      marginTop: '45px',
+      // marginTop: '45px',
       marginBottom: '5px',
       fontWeight: 'bold',
       fontSize: '30px',

src/types/template.ts

@@ -55,3 +55,8 @@ export type ThemeColorItem = {
   label: string;
   theme?: ThemeConfig;
 }
+
+export type Size = {
+  width: number;
+  height: number | 'auto';
+}