32 | {children}
34 |
35 |
36 |
20 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/(public)/[locale]/layout.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { Metadata } from "next";
3 | import { notFound } from "next/navigation";
4 | import { NextIntlClientProvider } from "next-intl";
5 | import {
6 | getMessages,
7 | getTranslations,
8 | setRequestLocale
9 | } from "next-intl/server";
10 | import Document from "@/components/Document";
11 | import { locales } from "@/i18n/config";
12 | import { Providers } from "@/app/providers";
13 |
14 | type Props = {
15 | children: ReactNode;
16 | params: { locale: string };
17 | };
18 |
19 | export function generateStaticParams() {
20 | return locales.map((locale) => ({ locale }));
21 | }
22 |
23 | export async function generateMetadata({
24 | params: { locale }
25 | }: Props): Promise
21 |
28 |
29 |
34 |
35 | 30 | {t("changelog")} 31 |
32 | 33 |
43 |
47 |
44 |
46 |
12 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/api/grammar/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { AIModelType } from "@/store/useAIConfigStore";
3 | import { AI_MODEL_CONFIGS } from "@/config/ai";
4 |
5 | export async function POST(req: NextRequest) {
6 | try {
7 | const body = await req.json();
8 | const { apiKey, model, content, modelType } = body;
9 |
10 | const modelConfig = AI_MODEL_CONFIGS[modelType as AIModelType];
11 | if (!modelConfig) {
12 | throw new Error("Invalid model type");
13 | }
14 |
15 | const response = await fetch(modelConfig.url, {
16 | method: "POST",
17 | headers: modelConfig.headers(apiKey),
18 |
19 | body: JSON.stringify({
20 | model: modelConfig.requiresModelId ? model : modelConfig.defaultModel,
21 | response_format: {
22 | type: "json_object"
23 | },
24 | messages: [
25 | {
26 | role: "system",
27 | content: `你是一个专业的中文简历错别字检查助手。请完整检查以下文本，不要遗漏，以下是要求：
28 | 1.所有考虑中文语境下的语法组词错误，包括拼写错误，语境用词错误，专业术语错误。
29 | 2.验证是否有遗漏文字未检查
30 | 3.对每个发现的问题，请按JSON格式返回
31 |
32 | 以下是示例格式：
33 | {
34 | "errors": [
35 | {
36 | "text": "错误的文本",
37 | "message": "详细的错误说明",
38 | "type": "spelling"或"grammar",
39 | "suggestions": ["建议修改1", "建议修改2"]
40 | }
41 | ]
42 | }
43 |
44 | 请确保返回的格式可以正常解析`
45 | },
46 | {
47 | role: "user",
48 | content: content
49 | }
50 | ]
51 | })
52 | });
53 |
54 | const data = await response.json();
55 | return NextResponse.json(data);
56 | } catch (error) {
57 | console.error("Error in grammar check:", error);
58 | return NextResponse.json(
59 | { error: "Failed to check grammar" },
60 | { status: 500 }
61 | );
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/app/api/polish/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from "next/server";
2 | import { AIModelType } from "@/store/useAIConfigStore";
3 | import { AI_MODEL_CONFIGS } from "@/config/ai";
4 |
5 | export async function POST(req: Request) {
6 | try {
7 | const body = await req.json();
8 | const { apiKey, model, content, modelType, apiEndpoint } = body;
9 |
10 | const modelConfig = AI_MODEL_CONFIGS[modelType as AIModelType];
11 | if (!modelConfig) {
12 | throw new Error("Invalid model type");
13 | }
14 |
15 | const response = await fetch(modelConfig.url(apiEndpoint), {
16 | method: "POST",
17 | headers: modelConfig.headers(apiKey),
18 | body: JSON.stringify({
19 | model: modelConfig.requiresModelId ? model : modelConfig.defaultModel,
20 | messages: [
21 | {
22 | role: "system",
23 | content: `你是一个专业的简历优化助手。请帮助优化以下文本，使其更加专业和有吸引力。
24 |
25 | 优化原则：
26 | 1. 使用更专业的词汇和表达方式
27 | 2. 突出关键成就和技能
28 | 3. 保持简洁清晰
29 | 4. 使用主动语气
30 | 5. 保持原有信息的完整性
31 | 6. 保留我输入的格式
32 |
33 | 请直接返回优化后的文本，不要包含任何解释或其他内容。`,
34 | },
35 | {
36 | role: "user",
37 | content,
38 | },
39 | ],
40 | stream: true,
41 | }),
42 | });
43 |
44 | const encoder = new TextEncoder();
45 | const stream = new ReadableStream({
46 | async start(controller) {
47 | if (!response.body) {
48 | controller.close();
49 | return;
50 | }
51 |
52 | const reader = response.body.getReader();
53 | const decoder = new TextDecoder();
54 |
55 | try {
56 | while (true) {
57 | const { done, value } = await reader.read();
58 | if (done) {
59 | controller.close();
60 | break;
61 | }
62 |
63 | const chunk = decoder.decode(value);
64 | const lines = chunk
65 | .split("\n")
66 | .filter((line) => line.trim() !== "");
67 |
68 | for (const line of lines) {
69 | if (line.includes("[DONE]")) continue;
70 | if (!line.startsWith("data:")) continue;
71 |
72 | try {
73 | const data = JSON.parse(line.slice(5));
74 | const content = data.choices[0]?.delta?.content;
75 | if (content) {
76 | controller.enqueue(encoder.encode(content));
77 | }
78 | } catch (e) {
79 | console.error("Error parsing JSON:", e);
80 | }
81 | }
82 | }
83 | } catch (error) {
84 | console.error("Stream reading error:", error);
85 | controller.error(error);
86 | }
87 | },
88 | });
89 |
90 | return new Response(stream, {
91 | headers: {
92 | "Content-Type": "text/event-stream",
93 | "Cache-Control": "no-cache",
94 | Connection: "keep-alive",
95 | },
96 | });
97 | } catch (error) {
98 | console.error("Polish error:", error);
99 | return NextResponse.json(
100 | { error: "Failed to polish content" },
101 | { status: 500 }
102 | );
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/app/api/proxy/image/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 |
3 | // resolve image proxy
4 | export async function GET(request: NextRequest) {
5 | try {
6 | const { searchParams } = new URL(request.url);
7 | const imageUrl = searchParams.get("url");
8 |
9 | if (!imageUrl) {
10 | console.error("缺少图片URL参数");
11 | return NextResponse.json({ error: "缺少图片URL参数" }, { status: 400 });
12 | }
13 |
14 | let parsedUrl;
15 | try {
16 | parsedUrl = new URL(imageUrl);
17 | } catch (e) {
18 | console.error(`图片URL格式不正确: ${imageUrl}`);
19 | return NextResponse.json({ error: "图片URL格式不正确" }, { status: 400 });
20 | }
21 |
22 | if (parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:") {
23 | console.error(`不支持的URL协议: ${parsedUrl.protocol}`);
24 | return NextResponse.json(
25 | { error: "只支持HTTP和HTTPS协议" },
26 | { status: 400 }
27 | );
28 | }
29 |
30 | let response;
31 | try {
32 | response = await fetch(imageUrl, {
33 | headers: {
34 | // 模拟浏览器请求
35 | "User-Agent":
36 | "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
37 | Accept:
38 | "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",
39 | "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8",
40 | Referer: parsedUrl.origin,
41 | },
42 | });
43 | } catch (error: any) {
44 | console.error(`获取图片失败: ${error.message || "未知错误"}`);
45 | return NextResponse.json(
46 | { error: `获取图片失败: ${error.message || "未知错误"}` },
47 | { status: 500 }
48 | );
49 | }
50 |
51 | // 检查响应状态
52 | if (!response.ok) {
53 | console.error(
54 | `图片服务器返回错误: ${response.status} ${response.statusText}`
55 | );
56 | return NextResponse.json(
57 | { error: `获取图片失败: ${response.status} ${response.statusText}` },
58 | { status: response.status }
59 | );
60 | }
61 |
62 | let imageBuffer;
63 | try {
64 | imageBuffer = await response.arrayBuffer();
65 | console.log(`成功获取图片，大小: ${imageBuffer.byteLength} 字节`);
66 | } catch (error: any) {
67 | console.error(`读取图片内容失败: ${error.message || "未知错误"}`);
68 | return NextResponse.json(
69 | { error: `读取图片内容失败: ${error.message || "未知错误"}` },
70 | { status: 500 }
71 | );
72 | }
73 |
74 | if (imageBuffer.byteLength === 0) {
75 | console.error("图片内容为空");
76 | return NextResponse.json({ error: "图片内容为空" }, { status: 400 });
77 | }
78 |
79 | const contentType = response.headers.get("content-type") || "image/jpeg";
80 |
81 | return new NextResponse(imageBuffer, {
82 | headers: {
83 | "Content-Type": contentType,
84 | "Cache-Control":
85 | "no-store, no-cache, must-revalidate, proxy-revalidate",
86 | Pragma: "no-cache",
87 | Expires: "0",
88 | "Surrogate-Control": "no-store",
89 | "Access-Control-Allow-Origin": "*",
90 | "Access-Control-Allow-Methods": "GET, OPTIONS",
91 | "Access-Control-Allow-Headers": "Content-Type",
92 | },
93 | });
94 | } catch (error: any) {
95 | console.error("图片代理未处理的错误:", error);
96 | return NextResponse.json(
97 | { error: `处理图片请求时出错: ${error.message || "未知错误"}` },
98 | { status: 500 }
99 | );
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/app/app/dashboard/layout.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { Metadata } from "next";
3 | import { NextIntlClientProvider } from "next-intl";
4 | import { getLocale, getMessages, getTranslations } from "next-intl/server";
5 | import Document from "@/components/Document";
6 | import { Providers } from "@/app/providers";
7 | import Client from "./client";
8 | type Props = {
9 | children: ReactNode;
10 | params: {
11 | locale: string;
12 | };
13 | };
14 | export async function generateMetadata({
15 | params: { locale },
16 | }: Props): Promise
14 |
16 |
75 | {layouts.map((layout) => (
76 |
91 | ))}
92 |
93 | );
94 | };
95 |
96 | export default AlignSelector;
97 |
--------------------------------------------------------------------------------
/src/components/editor/custom/CustomPanel.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 | import { Button } from "@/components/ui/button";
3 | import { cn } from "@/lib/utils";
4 | import { Reorder } from "framer-motion";
5 | import { PlusCircle } from "lucide-react";
6 | import CustomItem from "./CustomItem";
7 | import { useResumeStore } from "@/store/useResumeStore";
8 | import { CustomItem as CustomItemType } from "@/types/resume";
9 |
10 | const CustomPanel = memo(({ sectionId }: { sectionId: string }) => {
11 | const { addCustomItem, updateCustomData, activeResume } = useResumeStore();
12 | const { customData } = activeResume || {};
13 | const items = customData?.[sectionId] || [];
14 | const handleCreateItem = () => {
15 | addCustomItem(sectionId);
16 | };
17 |
18 | return (
19 |
25 | {
29 | updateCustomData(sectionId, newOrder);
30 | }}
31 | className="space-y-3"
32 | >
33 | {items.map((item: CustomItemType) => (
34 |
42 |
43 | );
44 | });
45 |
46 | CustomPanel.displayName = "CustomPanel";
47 |
48 | export default CustomPanel;
49 |
--------------------------------------------------------------------------------
/src/components/editor/education/EducationPanel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { cn } from "@/lib/utils";
3 | import { useResumeStore } from "@/store/useResumeStore";
4 | import { Reorder } from "framer-motion";
5 | import { PlusCircle } from "lucide-react";
6 | import { useTranslations } from "next-intl";
7 | import { Button } from "@/components/ui/button";
8 | import EducationItem from "./EducationItem";
9 | import { Education } from "@/types/resume";
10 | import { generateUUID } from "@/utils/uuid";
11 |
12 | const EducationPanel = () => {
13 | const t = useTranslations('workbench.educationPanel');
14 | const { activeResume, updateEducation, updateEducationBatch } =
15 | useResumeStore();
16 | const { education = [] } = activeResume || {};
17 | const handleCreateProject = () => {
18 | const newEducation: Education = {
19 | id: generateUUID(),
20 | school: t('defaultProject.school'),
21 | major: t('defaultProject.major'),
22 | degree: t('defaultProject.degree'),
23 | startDate: "2015-09-01",
24 | endDate: "2019-06-30",
25 | description: "",
26 | visible: true,
27 | };
28 | updateEducation(newEducation);
29 | };
30 |
31 | return (
32 |
39 | {
43 | updateEducationBatch(newOrder);
44 | }}
45 | className="space-y-3"
46 | >
47 | {(education || []).map((education) => (
48 |
59 |
60 | );
61 | };
62 |
63 | export default EducationPanel;
64 |
--------------------------------------------------------------------------------
/src/components/editor/experience/ExperiencePanel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { cn } from "@/lib/utils";
3 | import { Reorder } from "framer-motion";
4 | import { PlusCircle } from "lucide-react";
5 | import { Button } from "@/components/ui/button";
6 | import { useTranslations } from "next-intl";
7 | import ExperienceItem from "./ExperienceItem";
8 | import { Experience } from "@/types/resume";
9 | import { useResumeStore } from "@/store/useResumeStore";
10 | import { generateUUID } from "@/utils/uuid";
11 |
12 | const ExperiencePanel = () => {
13 | const t = useTranslations("workbench.experiencePanel");
14 | const { activeResume, updateExperience, updateExperienceBatch } =
15 | useResumeStore();
16 | const { experience = [] } = activeResume || {};
17 | const handleCreateProject = () => {
18 | const newProject: Experience = {
19 | id: generateUUID(),
20 | company: t("defaultProject.company"),
21 | position: t("defaultProject.position"),
22 | date: t("defaultProject.date"),
23 | details: t("defaultProject.details"),
24 | visible: true,
25 | };
26 | updateExperience(newProject);
27 | };
28 |
29 | return (
30 |
36 | {
40 | updateExperienceBatch(newOrder);
41 | }}
42 | className="space-y-3"
43 | >
44 | {experience.map((item) => (
45 |
53 |
54 | );
55 | };
56 |
57 | export default ExperiencePanel;
58 |
--------------------------------------------------------------------------------
/src/components/editor/layout/LayoutSetting.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Reorder } from "framer-motion";
3 | import { MenuSection } from "@/types/resume";
4 | import LayoutItem from "./LayoutItem";
5 |
6 | interface LayoutPanelProps {
7 | menuSections: MenuSection[];
8 | activeSection: string;
9 | setActiveSection: (id: string) => void;
10 | toggleSectionVisibility: (id: string) => void;
11 | updateMenuSections: (sections: MenuSection[]) => void;
12 | reorderSections: (sections: MenuSection[]) => void;
13 | }
14 |
15 | const LayoutSetting = ({
16 | menuSections,
17 | activeSection,
18 | setActiveSection,
19 | toggleSectionVisibility,
20 | updateMenuSections,
21 | reorderSections,
22 | }: LayoutPanelProps) => {
23 | const basicSection = menuSections.find((item) => item.id === "basic");
24 | const draggableSections = menuSections.filter((item) => item.id !== "basic");
25 |
26 | return (
27 |
28 | {basicSection && (
29 | {
44 | const updatedSections = [
45 | ...menuSections.filter((item) => item.id === "basic"),
46 | ...newOrder,
47 | ];
48 | reorderSections(updatedSections);
49 | }}
50 | className="space-y-2"
51 | >
52 | {draggableSections.map((item) => (
53 |
64 |
65 | );
66 | };
67 |
68 | export default LayoutSetting;
69 |
--------------------------------------------------------------------------------
/src/components/editor/project/ProjectPanel.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { useResumeStore } from "@/store/useResumeStore";
3 | import { Reorder } from "framer-motion";
4 | import { PlusCircle } from "lucide-react";
5 | import { useTranslations } from "next-intl";
6 | import { Button } from "@/components/ui/button";
7 | import ProjectItem from "./ProjectItem";
8 | import { Project } from "@/types/resume";
9 | import { generateUUID } from "@/utils/uuid";
10 |
11 | const ProjectPanel = () => {
12 | const t = useTranslations("workbench.projectPanel");
13 | const { activeResume, updateProjects, updateProjectsBatch } =
14 | useResumeStore();
15 | const { projects = [] } = activeResume || {};
16 | const handleCreateProject = () => {
17 | const newProject: Project = {
18 | id: generateUUID(),
19 | name: t("defaultProject.name"),
20 | role: t("defaultProject.role"),
21 | date: t("defaultProject.date"),
22 | description: t("defaultProject.description"),
23 | visible: true,
24 | };
25 | updateProjects(newProject);
26 | };
27 |
28 | return (
29 |
35 | {
39 | updateProjectsBatch(newOrder);
40 | }}
41 | className="space-y-3"
42 | >
43 | {projects.map((project) => (
44 |
52 |
53 | );
54 | };
55 |
56 | export default ProjectPanel;
57 |
--------------------------------------------------------------------------------
/src/components/editor/skills/SkillPanel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useResumeStore } from "@/store/useResumeStore";
3 | import { cn } from "@/lib/utils";
4 | import Field from "../Field";
5 |
6 | const SkillPanel = () => {
7 | const { activeResume, updateSkillContent } = useResumeStore();
8 | const { skillContent } = activeResume || {};
9 | const handleChange = (value: string) => {
10 | updateSkillContent(value);
11 | };
12 |
13 | return (
14 |
22 |
29 | );
30 | };
31 |
32 | export default SkillPanel;
33 |
--------------------------------------------------------------------------------
/src/components/home/CTASection.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { Button } from "@/components/ui/button";
3 | import { ArrowRight } from "lucide-react";
4 | import { useTranslations } from "next-intl";
5 | import ScrollBackground from "./client/ScrollBackground";
6 | import AnimatedFeature from "./client/AnimatedFeature";
7 | import GoDashboard from "./GoDashboard";
8 |
9 | export default function CTASection() {
10 | const t = useTranslations("home");
11 |
12 | return (
13 |
16 |
17 |
30 |
31 |
18 |
23 |
27 |
28 |
29 | {t("cta.title")}
19 |20 | {t("cta.description")} 21 |
22 |
17 |
37 |
18 |
22 | {faqItems.map(
23 | (item: { question: string; answer: string }, index: number) => (
24 |
25 |
26 | {item.question}
27 |
28 |
29 | {item.answer}
30 |
31 |
32 | )
33 | )}
34 |
35 |
36 | 19 | {t("title")} 20 |
21 |
17 |
77 |
18 |
19 |
58 |
59 |
60 |
75 |
76 |
20 |
21 |
57 |
22 |
56 |
23 |
26 | 27 | {t("hero.title")} 28 |
29 |30 | {t("hero.subtitle")} 31 |
32 |
33 |
34 |
42 |
43 |
44 |
45 |
53 |
54 |
55 |
61 |
62 |
74 |
63 |
73 |
28 |
77 |
29 |
76 | (window.location.href = `/${locale}/`)}
32 | >
33 |
36 |
37 |
38 |
40 |
45 |
56 |
62 |
63 |
64 |
65 |
75 |
41 |
44 |
23 |
24 | {t("news.content")}
25 |
26 | {/*
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/home/client/AnimatedFeature.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { motion } from "framer-motion";
3 |
4 | interface AnimatedFeatureProps {
5 | children: React.ReactNode;
6 | delay?: number;
7 | }
8 |
9 | export default function AnimatedFeature({ children, delay = 0 }: AnimatedFeatureProps) {
10 | return (
11 |
42 |
84 |
85 |
9 |
10 |
11 |
12 |
13 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/home/client/ScrollHeader.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState, useEffect } from "react";
3 | import { useScroll } from "framer-motion";
4 |
5 | interface ScrollHeaderProps {
6 | children: React.ReactNode;
7 | }
8 |
9 | export default function ScrollHeader({ children }: ScrollHeaderProps) {
10 | const { scrollY } = useScroll();
11 | const [isScrolled, setIsScrolled] = useState(false);
12 |
13 | useEffect(() => {
14 | const unsubscribe = scrollY.on("change", (latest) => {
15 | setIsScrolled(latest > 0);
16 | });
17 |
18 | return () => {
19 | unsubscribe();
20 | };
21 | }, [scrollY]);
22 |
23 | return (
24 |
46 |
48 | );
49 | }
50 |
51 | // Split children into three groups
52 | const topChildren = childrenArray.slice(0, templateSheetIndex);
53 | const middleChild = childrenArray[templateSheetIndex];
54 | const bottomChildren = childrenArray.slice(templateSheetIndex + 1);
55 |
56 | return (
57 | {children}
47 |
64 | {/* Top group */}
65 | {topChildren.length > 0 && (
66 |
87 | );
88 | }
89 |
90 | interface DockIconProps extends PropsWithChildren {
91 | className?: string;
92 | onClick?: () => void;
93 | }
94 |
95 | export function DockIcon({ children, className, onClick }: DockIconProps) {
96 | return (
97 | {topChildren}
67 | )}
68 |
69 | {/* Decorative line */}
70 | {topChildren.length > 0 && (
71 |
72 | )}
73 |
74 | {/* Middle (TemplateSheet) */}
75 | {middleChild}
76 |
77 | {/* Decorative line */}
78 | {bottomChildren.length > 0 && (
79 |
80 | )}
81 |
82 | {/* Bottom group */}
83 | {bottomChildren.length > 0 && (
84 | {bottomChildren}
85 | )}
86 |
60 |
69 |
70 | {centerSubtitle && (
71 | 66 | {item.title} 67 |
68 |
65 | {edu.school}
66 |
67 |
68 | {globalSettings?.centerSubtitle && (
69 |
38 | {experience.company}
39 |
40 | {centerSubtitle && (
41 | {experience.date}
46 |
94 |
95 | {visibleExperiences?.map((experience) => (
96 |
103 |
104 | 60 | {renderTitle} 61 |
62 | ); 63 | 64 | case "left-right": 65 | return ( 66 |
67 |
74 |
85 | );
86 |
87 | case "classic":
88 | return (
89 | 82 | {renderTitle} 83 |
84 |97 | {renderTitle} 98 |
99 | ); 100 | 101 | default: 102 | return ( 103 |110 | {renderTitle} 111 |
112 | ); 113 | } 114 | }; 115 | 116 | return renderTemplateTitle(); 117 | }; 118 | 119 | export default SectionTitle; 120 | -------------------------------------------------------------------------------- /src/components/preview/SkillPanel.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion } from "framer-motion"; 3 | import SectionTitle from "./SectionTitle"; 4 | import { GlobalSettings } from "@/types/resume"; 5 | import { useResumeStore } from "@/store/useResumeStore"; 6 | 7 | interface SkillSectionProps { 8 | skill?: string; 9 | globalSettings?: GlobalSettings; 10 | showTitle?: boolean; 11 | } 12 | 13 | const SkillSection = ({ skill, globalSettings, showTitle = true }: SkillSectionProps) => { 14 | const { setActiveSection } = useResumeStore(); 15 | 16 | return ( 17 |
40 | setShowConfig(false)}
90 | photo={basic.photo}
91 | config={basic.photoConfig}
92 | onPhotoChange={handlePhotoChange}
93 | onConfigChange={handleConfigChange}
94 | />
95 |
96 | );
97 | };
98 |
99 | export default PhotoSelector;
100 |
--------------------------------------------------------------------------------
/src/components/shared/ScrollToTop.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useState, useEffect, useRef } from "react";
3 | import { ArrowUp } from "lucide-react";
4 | import { Button } from "@/components/ui/button";
5 |
6 | const ScrollToTop = () => {
7 | const [isVisible, setIsVisible] = useState(false);
8 | const sentinelRef = useRef(null);
9 |
10 | useEffect(() => {
11 | // 创建观察器实例
12 | const observer = new IntersectionObserver(
13 | ([entry]) => {
14 | // 当哨兵元素可见时隐藏按钮，不可见时显示按钮
15 | setIsVisible(!entry.isIntersecting);
16 | },
17 | {
18 | // 将观察点设置在页面30%的位置（即滚动70%时触发）
19 | rootMargin: "60% 0px -40% 0px",
20 | threshold: 0,
21 | }
22 | );
23 |
24 | // 开始观察哨兵元素
25 | if (sentinelRef.current) {
26 | observer.observe(sentinelRef.current);
27 | }
28 |
29 | // 清理观察器
30 | return () => {
31 | if (sentinelRef.current) {
32 | observer.unobserve(sentinelRef.current);
33 | }
34 | };
35 | }, []);
36 |
37 | const scrollToTop = () => {
38 | window.scrollTo({
39 | top: 0,
40 | behavior: "smooth",
41 | });
42 | };
43 |
44 | return (
45 | <>
46 | {/* 哨兵元素放在页面顶部 */}
47 |
52 |
53 | {/* 回到顶部按钮 */}
54 |
41 |
76 |
77 |
42 |
45 |
46 |
54 |
74 |
75 |
78 | {basic.photo && (
79 | 
84 | )}
85 |
86 |
87 |
58 |
72 |
73 |
74 | );
75 | };
76 |
77 | export default ScrollToTop;
78 |
--------------------------------------------------------------------------------
/src/components/shared/TemplateSheet.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Layout, PanelsLeftBottom } from "lucide-react";
3 | import { motion } from "framer-motion";
4 | import { useTranslations } from "next-intl";
5 | import {
6 | Sheet,
7 | SheetContent,
8 | SheetDescription,
9 | SheetHeader,
10 | SheetTitle,
11 | SheetTrigger
12 | } from "@/components/ui/sheet-no-overlay";
13 | import { cn } from "@/lib/utils";
14 | import { DEFAULT_TEMPLATES } from "@/config";
15 | import { useResumeStore } from "@/store/useResumeStore";
16 | import classic from "@/assets/images/template-cover/classic.png";
17 | import modern from "@/assets/images/template-cover/modern.png";
18 | import leftRight from "@/assets/images/template-cover/left-right.png";
19 | import timeline from "@/assets/images/template-cover/timeline.png";
20 |
21 | const templateImages: { [key: string]: any } = {
22 | classic,
23 | modern,
24 | "left-right": leftRight,
25 | timeline
26 | };
27 |
28 | const TemplateSheet = () => {
29 | const t = useTranslations("templates");
30 | const { activeResume, setTemplate } = useResumeStore();
31 | const currentTemplate =
32 | DEFAULT_TEMPLATES.find((t) => t.id === activeResume?.templateId) ||
33 | DEFAULT_TEMPLATES[0];
34 |
35 | return (
36 |
49 | {DEFAULT_TEMPLATES.map((t) => (
50 |
74 | ))}
75 |
76 |
96 | {sortedSections.map((section) => (
97 |
100 | );
101 | };
102 |
103 | export default ClassicTemplate;
104 |
--------------------------------------------------------------------------------
/src/components/templates/LeftRightTemplate.tsx:
--------------------------------------------------------------------------------
1 | import BaseInfo from "../preview/BaseInfo";
2 | import ExperienceSection from "../preview/ExperienceSection";
3 | import EducationSection from "../preview/EducationSection";
4 | import SkillSection from "../preview/SkillPanel";
5 | import ProjectSection from "../preview/ProjectSection";
6 | import CustomSection from "../preview/CustomSection";
7 | import { ResumeData } from "@/types/resume";
8 | import { ResumeTemplate } from "@/types/template";
9 | import GithubContribution from "../shared/GithubContribution";
10 |
11 | interface LeftRightTemplateProps {
12 | data: ResumeData;
13 | template: ResumeTemplate;
14 | }
15 |
16 | const LeftRightTemplate: React.FC{renderSection(section.id)}
98 | ))}
99 |
98 | {sortedSections.map((section) => (
99 |
102 | );
103 | };
104 |
105 | export default LeftRightTemplate;
106 |
--------------------------------------------------------------------------------
/src/components/templates/ModernTemplate.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import BaseInfo from "../preview/BaseInfo";
3 | import ExperienceSection from "../preview/ExperienceSection";
4 | import EducationSection from "../preview/EducationSection";
5 | import SkillSection from "../preview/SkillPanel";
6 | import ProjectSection from "../preview/ProjectSection";
7 | import CustomSection from "../preview/CustomSection";
8 | import { ResumeData } from "@/types/resume";
9 | import { ResumeTemplate } from "@/types/template";
10 |
11 | interface ModernTemplateProps {
12 | data: ResumeData;
13 | template: ResumeTemplate;
14 | }
15 |
16 | const ModernTemplate: React.FC{renderSection(section.id)}
100 | ))}
101 |
85 |
108 | );
109 | };
110 |
111 | export default ModernTemplate;
112 |
--------------------------------------------------------------------------------
/src/components/templates/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ClassicTemplate from "./ClassicTemplate";
3 | import ModernTemplate from "./ModernTemplate";
4 | import LeftRightTemplate from "./LeftRightTemplate";
5 | import TimelineTemplate from "./TimelineTemplate";
6 | import { ResumeData } from "@/types/resume";
7 | import { ResumeTemplate } from "@/types/template";
8 |
9 | interface TemplateProps {
10 | data: ResumeData;
11 | template: ResumeTemplate;
12 | }
13 |
14 | const ResumeTemplateComponent: React.FC
93 | {basicSection && renderSection(basicSection.id)}
94 |
95 |
96 |
103 | {otherSections.map((section) => (
104 |
107 | {renderSection(section.id)}
105 | ))}
106 | {children}
53 |
39 |
41 | )}
42 |