From 4b0dd962dd76f4cdc7952f93daaec6667abaa11d Mon Sep 17 00:00:00 2001
From: JOYCEQL <1449239013@qq.com>
Date: Fri, 15 Nov 2024 13:14:55 +0800
Subject: [PATCH] feat: header font && subheader font

---
 .../src/components/editor/SidePanel.tsx       | 107 +++++++++++++++++-
 .../src/components/preview/BaseInfo.tsx       |   6 +-
 .../components/preview/EducationSection.tsx   |   2 +-
 .../components/preview/ExperienceSection.tsx  |   2 +-
 .../src/components/preview/PreviewPanel.tsx   |   5 +-
 .../src/components/preview/ProjectItem.tsx    |   2 +-
 apps/fronted/src/store/useResumeStore.ts      |  12 +-
 apps/fronted/src/types/resume.ts              |   2 +
 8 files changed, 124 insertions(+), 14 deletions(-)

diff --git a/apps/fronted/src/components/editor/SidePanel.tsx b/apps/fronted/src/components/editor/SidePanel.tsx
index 0347bbf..b9db7a3 100644
--- a/apps/fronted/src/components/editor/SidePanel.tsx
+++ b/apps/fronted/src/components/editor/SidePanel.tsx
@@ -336,7 +336,6 @@ export function SidePanel() {
               </div>
             </div>
 
-            {/* 基础字号选择 */}
             <div className="space-y-2">
               <Label
                 className={cn(
@@ -390,6 +389,112 @@ export function SidePanel() {
                 </SelectContent>
               </Select>
             </div>
+            <div className="space-y-2">
+              <Label
+                className={cn(
+                  theme === "dark" ? "text-neutral-300" : "text-gray-600"
+                )}
+              >
+                模块标题字号
+              </Label>
+              <Select
+                value={globalSettings?.headerSize?.toString()}
+                onValueChange={(value) =>
+                  updateGlobalSettings?.({ headerSize: parseInt(value) })
+                }
+              >
+                <motion.div
+                  whileHover={{ scale: 1.01 }}
+                  whileTap={{ scale: 0.99 }}
+                >
+                  <SelectTrigger
+                    className={cn(
+                      "border transition-colors",
+                      theme === "dark"
+                        ? "border-neutral-800 bg-neutral-900 text-neutral-200"
+                        : "border-gray-200 bg-white text-gray-700"
+                    )}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                </motion.div>
+                <SelectContent
+                  className={cn(
+                    theme === "dark"
+                      ? "bg-neutral-900 border-neutral-800 text-[#fff] hover:text-white"
+                      : "bg-white border-gray-200"
+                  )}
+                >
+                  {[12, 13, 14, 15, 16, 18, 20, 24].map((size) => (
+                    <SelectItem
+                      key={size}
+                      value={size.toString()}
+                      className={cn(
+                        "cursor-pointer",
+                        theme === "dark"
+                          ? "focus:bg-neutral-800 hover:bg-neutral-800"
+                          : "focus:bg-gray-100 hover:bg-gray-100"
+                      )}
+                    >
+                      {size}px
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label
+                className={cn(
+                  theme === "dark" ? "text-neutral-300" : "text-gray-600"
+                )}
+              >
+                模块二级标题字号
+              </Label>
+              <Select
+                value={globalSettings?.subheaderSize?.toString()}
+                onValueChange={(value) =>
+                  updateGlobalSettings?.({ subheaderSize: parseInt(value) })
+                }
+              >
+                <motion.div
+                  whileHover={{ scale: 1.01 }}
+                  whileTap={{ scale: 0.99 }}
+                >
+                  <SelectTrigger
+                    className={cn(
+                      "border transition-colors",
+                      theme === "dark"
+                        ? "border-neutral-800 bg-neutral-900 text-neutral-200"
+                        : "border-gray-200 bg-white text-gray-700"
+                    )}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                </motion.div>
+                <SelectContent
+                  className={cn(
+                    theme === "dark"
+                      ? "bg-neutral-900 border-neutral-800 text-[#fff] hover:text-white"
+                      : "bg-white border-gray-200"
+                  )}
+                >
+                  {[12, 13, 14, 15, 16, 18, 20, 24].map((size) => (
+                    <SelectItem
+                      key={size}
+                      value={size.toString()}
+                      className={cn(
+                        "cursor-pointer",
+                        theme === "dark"
+                          ? "focus:bg-neutral-800 hover:bg-neutral-800"
+                          : "focus:bg-gray-100 hover:bg-gray-100"
+                      )}
+                    >
+                      {size}px
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
           </div>
         </SettingCard>
 
diff --git a/apps/fronted/src/components/preview/BaseInfo.tsx b/apps/fronted/src/components/preview/BaseInfo.tsx
index 9e58c68..d263e60 100644
--- a/apps/fronted/src/components/preview/BaseInfo.tsx
+++ b/apps/fronted/src/components/preview/BaseInfo.tsx
@@ -3,12 +3,12 @@ import { BasicInfo, GlobalSettings } from "@/types/resume";
 import { motion } from "framer-motion";
 import React from "react";
 
-interface ResumeHeaderProps {
+interface BaaseInfoProps {
   basic: BasicInfo;
-  globalSettings: GlobalSettings;
+  globalSettings: GlobalSettings | undefined;
 }
 
-export function ResumeHeader({ basic, globalSettings }: ResumeHeaderProps) {
+export function BaseInfo({ basic, globalSettings }: BaaseInfoProps) {
   return (
     <div className="text-center space-y-4">
       <motion.h1
diff --git a/apps/fronted/src/components/preview/EducationSection.tsx b/apps/fronted/src/components/preview/EducationSection.tsx
index e9f1543..24bb95f 100644
--- a/apps/fronted/src/components/preview/EducationSection.tsx
+++ b/apps/fronted/src/components/preview/EducationSection.tsx
@@ -4,7 +4,7 @@ import { SectionTitle } from "./SectionTitle";
 
 interface EducationSectionProps {
   education: Education[];
-  globalSettings: GlobalSettings;
+  globalSettings: GlobalSettings | undefined;
   themeColor: string;
 }
 
diff --git a/apps/fronted/src/components/preview/ExperienceSection.tsx b/apps/fronted/src/components/preview/ExperienceSection.tsx
index f632458..474fd4c 100644
--- a/apps/fronted/src/components/preview/ExperienceSection.tsx
+++ b/apps/fronted/src/components/preview/ExperienceSection.tsx
@@ -4,7 +4,7 @@ import { SectionTitle } from "./SectionTitle";
 
 interface ExperienceSectionProps {
   experience: Experience[];
-  globalSettings: GlobalSettings;
+  globalSettings: GlobalSettings | undefined;
   themeColor: string;
 }
 
diff --git a/apps/fronted/src/components/preview/PreviewPanel.tsx b/apps/fronted/src/components/preview/PreviewPanel.tsx
index 239ef42..b8f0ac9 100644
--- a/apps/fronted/src/components/preview/PreviewPanel.tsx
+++ b/apps/fronted/src/components/preview/PreviewPanel.tsx
@@ -6,7 +6,7 @@ import { useResumeStore } from "@/store/useResumeStore";
 import { cn } from "@/lib/utils";
 import { throttle } from "lodash";
 import { THEME_COLORS } from "@/types/resume";
-import { ResumeHeader } from "./BaseInfo";
+import { BaseInfo } from "./BaseInfo";
 import { SectionTitle } from "./SectionTitle";
 import { ProjectItem } from "./ProjectItem";
 import { ExperienceSection } from "./ExperienceSection";
@@ -68,6 +68,7 @@ export function PreviewPanel() {
     draggingProjectId,
     colorTheme
   } = useResumeStore();
+  console.log(globalSettings, "globalSettingsglobalSettings");
 
   const previewRef = React.useRef<HTMLDivElement>(null);
   const resumeContentRef = React.useRef<HTMLDivElement>(null);
@@ -276,7 +277,7 @@ export function PreviewPanel() {
           >
             <motion.div layout className="space-y-8" ref={resumeContentRef}>
               {/* Header */}
-              <ResumeHeader basic={basic} globalSettings={globalSettings} />
+              <BaseInfo basic={basic} globalSettings={globalSettings} />
 
               {/* Sections */}
               {menuSections
diff --git a/apps/fronted/src/components/preview/ProjectItem.tsx b/apps/fronted/src/components/preview/ProjectItem.tsx
index 7482782..a654e33 100644
--- a/apps/fronted/src/components/preview/ProjectItem.tsx
+++ b/apps/fronted/src/components/preview/ProjectItem.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 interface ProjectItemProps {
   project: Project;
   draggingProjectId: string | null;
-  globalSettings: GlobalSettings;
+  globalSettings: GlobalSettings | undefined;
 }
 
 export function ProjectItem({
diff --git a/apps/fronted/src/store/useResumeStore.ts b/apps/fronted/src/store/useResumeStore.ts
index 0def9ab..3be2c08 100644
--- a/apps/fronted/src/store/useResumeStore.ts
+++ b/apps/fronted/src/store/useResumeStore.ts
@@ -43,8 +43,8 @@ interface ResumeStore {
   setActiveSection: (sectionId: string) => void;
   toggleTheme: () => void;
   // 全局设置
-  globalSettings?: GlobalSettings;
-  updateGlobalSettings?: (settings: Partial<GlobalSettings>) => void;
+  globalSettings: GlobalSettings;
+  updateGlobalSettings: (settings: Partial<GlobalSettings>) => void;
   // 项目经历
   projects: Project[];
   updateProjects: (project: Project) => void;
@@ -100,8 +100,7 @@ const initialState = {
   ],
   theme: "light" as const,
 
-  // 主题色
-  colorTheme: "#2563eb", // 默认使用经典蓝主题
+  colorTheme: "#2563eb",
 
   activeSection: "basic",
 
@@ -134,10 +133,13 @@ const initialState = {
     }
   ],
   globalSettings: {
+    baseFontSize: 14,
     pagePadding: 20,
     paragraphSpacing: 20,
     lineHeight: 1,
-    sectionSpacing: 20
+    sectionSpacing: 20,
+    headerSize: 18,
+    subheaderSize: 16
   }
 };
 
diff --git a/apps/fronted/src/types/resume.ts b/apps/fronted/src/types/resume.ts
index 85b3f1c..dd13b88 100644
--- a/apps/fronted/src/types/resume.ts
+++ b/apps/fronted/src/types/resume.ts
@@ -59,6 +59,8 @@ export type GlobalSettings = {
   paragraphSpacing?: number | undefined;
   lineHeight?: number | undefined;
   sectionSpacing?: number | undefined;
+  headerSize?: number | undefined;
+  subHeaderSize?: number | undefined;
 };
 
 export interface ResumeTheme {