ai-space/magic-resume
3
0
Fork 0
mirror of https://github.com/JOYCEQL/magic-resume.git synced 2026-06-01 23:38:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: standardize BaseInfo component layouts

Browse Source
This commit is contained in:
JOYCEQL
2026-05-05 10:48:15 +08:00
parent 0c00fb0a6b
commit 2395638a9c
7 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/templates/classic/sections/BaseInfo.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
const layoutStyles = {
left: { container: "flex items-center justify-between gap-6", leftContent: "flex items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-left min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex justify-end items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex flex-row-reverse justify-start items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
center: { container: "flex flex-col items-center gap-3", leftContent: "flex flex-col items-center gap-4", fields: "w-full flex justify-center items-center flex-wrap gap-3", nameTitle: "text-center min-w-0" },
};
src/components/templates/creative/sections/BaseInfo.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
const layoutStyles = {
left: { container: "flex items-center justify-between gap-6", leftContent: "flex items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-left min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex justify-end items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex flex-row-reverse justify-start items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
center: { container: "flex flex-col items-center gap-3", leftContent: "flex flex-col items-center gap-4", fields: "w-full flex justify-center items-center flex-wrap gap-3", nameTitle: "text-center min-w-0" },
};
src/components/templates/elegant/sections/BaseInfo.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
const layoutStyles = {
left: { container: "flex items-center justify-between gap-6", leftContent: "flex items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-left min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex justify-end items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex flex-row-reverse justify-start items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
center: { container: "flex flex-col items-center gap-3", leftContent: "flex flex-col items-center gap-4", fields: "w-full flex justify-center items-center flex-wrap gap-3", nameTitle: "text-center min-w-0" },
};
src/components/templates/left-right/sections/BaseInfo.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
const layoutStyles = {
left: { container: "flex items-center justify-between gap-6", leftContent: "flex items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-left min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex justify-end items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex flex-row-reverse justify-start items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
center: { container: "flex flex-col items-center gap-3", leftContent: "flex flex-col items-center gap-4", fields: "w-full flex justify-center items-center flex-wrap gap-3", nameTitle: "text-center min-w-0" },
};
src/components/templates/minimalist/sections/BaseInfo.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
const layoutStyles = {
left: { container: "flex items-center justify-between gap-6", leftContent: "flex items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-left min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex justify-end items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex flex-row-reverse justify-start items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
center: { container: "flex flex-col items-center gap-3", leftContent: "flex flex-col items-center gap-4", fields: "w-full flex justify-center items-center flex-wrap gap-3", nameTitle: "text-center min-w-0" },
};
src/components/templates/modern/sections/BaseInfo.tsx
+13 -4
View File
@@ -21,6 +21,7 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
const t = useTranslations("workbench");
const locale = useLocale();
const useIconMode = globalSettings?.useIconMode ?? false;
const layout = basic?.layout || "left";
const getIcon = (iconName: string | undefined) => {
const IconComponent = Icons[iconName as keyof typeof Icons] as React.ElementType;
@@ -59,12 +60,20 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
</motion.div>
);
const layoutStyles = {
left: { container: "flex flex-col gap-3", header: "flex items-center gap-4", nameTitle: "text-left min-w-0", fields: "w-full flex flex-col gap-2" },
right: { container: "flex flex-col gap-3", header: "flex flex-row-reverse items-center gap-4", nameTitle: "text-right min-w-0", fields: "w-full flex flex-col gap-2" },
center: { container: "flex flex-col items-center gap-3", header: "flex flex-col items-center gap-4", nameTitle: "text-center min-w-0", fields: "w-full flex flex-col gap-2" },
};
const styles = layoutStyles[layout as keyof typeof layoutStyles] || layoutStyles.left;
return (
<SectionWrapper sectionId="basic">
<div className="flex flex-col items-center gap-3">
<div className="flex flex-col items-center gap-4">
<div className={styles.container}>
<div className={styles.header}>
{PhotoComponent}
<div className="flex flex-col text-center min-w-0" style={{ color: "#fff" }}>
<div className={`flex flex-col ${styles.nameTitle}`} style={{ color: "#fff" }}>
{nameField.visible !== false && basic[nameField.key] && (
<motion.h1 layout="position" className="font-bold whitespace-pre-wrap break-words" style={{ fontSize: "30px", color: "#fff" }}>{basic[nameField.key] as string}</motion.h1>
)}
@@ -73,7 +82,7 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
)}
</div>
</div>
<motion.div layout="position" className="w-full flex flex-col gap-2"
<motion.div layout="position" className={styles.fields}
style={{ fontSize: `${globalSettings?.baseFontSize || 14}px`, color: "#fff" }}>
{allFields.map((item) => {
const customFieldHref = item.custom && "href" in item && typeof item.href === "string" ? item.href : null;
src/components/templates/timeline/sections/BaseInfo.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const BaseInfo = ({ basic = {} as BasicInfo, globalSettings, template }: BaseInf
const layoutStyles = {
left: { container: "flex items-center justify-between gap-6", leftContent: "flex items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-left min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex justify-end items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
right: { container: "flex items-center justify-between gap-6 flex-row-reverse", leftContent: "flex flex-row-reverse justify-start items-center gap-6 flex-1 min-w-0", fields: "grid grid-cols-2 gap-x-8 gap-y-2 justify-start shrink-0", nameTitle: "text-right min-w-0" },
center: { container: "flex flex-col items-center gap-3", leftContent: "flex flex-col items-center gap-4", fields: "w-full flex justify-center items-center flex-wrap gap-3", nameTitle: "text-center min-w-0" },
};