From 0d7586bf80814ec1effcb5ef2807d897aa974a56 Mon Sep 17 00:00:00 2001 From: JOYCEQL <1449239013@qq.com> Date: Sun, 8 Dec 2024 19:14:20 +0800 Subject: [PATCH] fix: react component control problem --- .../src/components/editor/EditPanel.tsx | 4 +- apps/fronted/src/components/editor/Field.tsx | 10 +-- .../components/editor/basic/BasicPanel.tsx | 62 +++++++++++-------- .../shared/rich-editor/RichEditor.tsx | 2 +- apps/fronted/src/store/useResumeStore.ts | 15 ++++- apps/fronted/src/types/resume.ts | 16 ++--- 6 files changed, 68 insertions(+), 41 deletions(-) diff --git a/apps/fronted/src/components/editor/EditPanel.tsx b/apps/fronted/src/components/editor/EditPanel.tsx index d77013e..b2d8a9a 100644 --- a/apps/fronted/src/components/editor/EditPanel.tsx +++ b/apps/fronted/src/components/editor/EditPanel.tsx @@ -19,7 +19,9 @@ import { export function EditPanel() { const { activeResume, updateMenuSections } = useResumeStore(); - const { activeSection, menuSections = [] } = activeResume || {}; + if (!activeResume) return; + const { activeSection = "", menuSections = [] } = activeResume || {}; + const renderFields = () => { switch (activeSection) { case "basic": diff --git a/apps/fronted/src/components/editor/Field.tsx b/apps/fronted/src/components/editor/Field.tsx index 2b400d5..eee56c6 100644 --- a/apps/fronted/src/components/editor/Field.tsx +++ b/apps/fronted/src/components/editor/Field.tsx @@ -6,7 +6,7 @@ import { motion } from "framer-motion"; import { Popover, PopoverContent, - PopoverTrigger + PopoverTrigger, } from "@/components/ui/popover"; import { Calendar } from "@/components/ui/calendar"; import { Input } from "@/components/ui/input"; @@ -30,7 +30,7 @@ const Field: React.FC = ({ type = "text", placeholder, required, - className + className, }) => { const renderLabel = () => ( = ({ {required && *} onChange(e.target.value)} placeholder={placeholder} className={inputStyles} @@ -114,7 +114,7 @@ const Field: React.FC = ({ {renderLabel()}
@@ -136,7 +136,7 @@ const Field: React.FC = ({ onChange(e.target.value)} placeholder={placeholder} className={inputStyles} diff --git a/apps/fronted/src/components/editor/basic/BasicPanel.tsx b/apps/fronted/src/components/editor/basic/BasicPanel.tsx index a106b10..87e3f35 100644 --- a/apps/fronted/src/components/editor/basic/BasicPanel.tsx +++ b/apps/fronted/src/components/editor/basic/BasicPanel.tsx @@ -62,30 +62,42 @@ const CustomField: React.FC = ({ onChange={(value) => onUpdate({ ...field, icon: value })} />
- onUpdate({ ...field, label: value })} - placeholder="字段名称" - className={cn( - "bg-neutral-50 dark:bg-neutral-900", - "border-neutral-200 dark:border-neutral-700", - "focus:border-blue-500 dark:focus:border-blue-400", - "placeholder-neutral-400 dark:placeholder-neutral-500" - )} - /> - onUpdate({ ...field, value })} - placeholder="字段内容" - className={cn( - "bg-neutral-50 dark:bg-neutral-900", - "border-neutral-200 dark:border-neutral-700", - "focus:border-blue-500 dark:focus:border-blue-400", - "placeholder-neutral-400 dark:placeholder-neutral-500" - )} - /> +
+ + onUpdate({ + ...field, + label: value, + }) + } + placeholder="标签" + className={cn( + "bg-neutral-50 dark:bg-neutral-900", + "border-neutral-200 dark:border-neutral-700", + "focus:border-blue-500 dark:focus:border-blue-400", + "placeholder-neutral-400 dark:placeholder-neutral-500" + )} + /> +
+
+ + onUpdate({ + ...field, + value: value, + }) + } + placeholder="值" + className={cn( + "bg-neutral-50 dark:bg-neutral-900", + "border-neutral-200 dark:border-neutral-700", + "focus:border-blue-500 dark:focus:border-blue-400", + "placeholder-neutral-400 dark:placeholder-neutral-500" + )} + /> +
{field.visible ? ( {
updateBasicInfo({ ...basic, diff --git a/apps/fronted/src/components/shared/rich-editor/RichEditor.tsx b/apps/fronted/src/components/shared/rich-editor/RichEditor.tsx index 5163ed9..aa20f88 100644 --- a/apps/fronted/src/components/shared/rich-editor/RichEditor.tsx +++ b/apps/fronted/src/components/shared/rich-editor/RichEditor.tsx @@ -357,7 +357,7 @@ const HeadingSelect = ({ editor }) => { ); }; -const RichTextEditor = ({ content, onChange }: RichTextEditorProps) => { +const RichTextEditor = ({ content = "", onChange }: RichTextEditorProps) => { const editor = useEditor({ extensions: [ StarterKit.configure({ diff --git a/apps/fronted/src/store/useResumeStore.ts b/apps/fronted/src/store/useResumeStore.ts index 9faebb3..52a02fa 100644 --- a/apps/fronted/src/store/useResumeStore.ts +++ b/apps/fronted/src/store/useResumeStore.ts @@ -10,6 +10,7 @@ import { Project, CustomItem, ResumeData, + MenuSection, } from "../types/resume"; interface ResumeStore { @@ -400,9 +401,19 @@ export const useResumeStore = create()( }, reorderSections: (newOrder) => { - const { activeResumeId } = get(); + const { activeResumeId, resumes } = get(); if (activeResumeId) { - get().updateResume(activeResumeId, { menuSections: newOrder }); + const currentResume = resumes[activeResumeId]; + const basicInfoSection = currentResume.menuSections.find( + (section) => section.id === "basic" + ); + const reorderedSections = [ + basicInfoSection, + ...newOrder.filter((section) => section.id !== "basic"), + ]; + get().updateResume(activeResumeId, { + menuSections: reorderedSections as MenuSection[], + }); } }, diff --git a/apps/fronted/src/types/resume.ts b/apps/fronted/src/types/resume.ts index 7a86ed8..f2edd85 100644 --- a/apps/fronted/src/types/resume.ts +++ b/apps/fronted/src/types/resume.ts @@ -163,6 +163,14 @@ export const THEME_COLORS = [ "#dc2626", ]; +export interface MenuSection { + id: string; + title: string; + icon: string; + enabled: boolean; + order: number; +} + export interface ResumeData { id: string; title: string; @@ -178,13 +186,7 @@ export interface ResumeData { activeSection: string; colorTheme: string; draggingProjectId: string | null; - menuSections: { - id: string; - title: string; - icon: string; - enabled: boolean; - order: number; - }[]; + menuSections: MenuSection[]; globalSettings: GlobalSettings; }