mirror of
https://github.com/JOYCEQL/magic-resume.git
synced 2026-07-03 14:07:11 +02:00
feat: header font && subheader font
This commit is contained in:
JOYCEQL
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -4,7 +4,7 @@ import { SectionTitle } from "./SectionTitle";
|
||||
|
||||
interface EducationSectionProps {
|
||||
education: Education[];
|
||||
globalSettings: GlobalSettings;
|
||||
globalSettings: GlobalSettings | undefined;
|
||||
themeColor: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import { SectionTitle } from "./SectionTitle";
|
||||
|
||||
interface ExperienceSectionProps {
|
||||
experience: Experience[];
|
||||
globalSettings: GlobalSettings;
|
||||
globalSettings: GlobalSettings | undefined;
|
||||
themeColor: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
|
||||
interface ProjectItemProps {
|
||||
project: Project;
|
||||
draggingProjectId: string | null;
|
||||
globalSettings: GlobalSettings;
|
||||
globalSettings: GlobalSettings | undefined;
|
||||
}
|
||||
|
||||
export function ProjectItem({
|
||||
|
||||
@@ -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
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user