From f04b68e7f7a78f7c17886cf96027cede25572d70 Mon Sep 17 00:00:00 2001
From: JOYCEQL <1449239013@qq.com>
Date: Thu, 5 Dec 2024 20:07:59 +0800
Subject: [PATCH] fix: baseInfo fields preview

---
 .../components/editor/basic/BasicPanel.tsx    | 18 +------------
 .../src/components/preview/BaseInfo.tsx       | 25 ++++++++-----------
 apps/fronted/src/config/index.ts              | 18 +++++++++++++
 apps/fronted/src/store/useResumeStore.ts      |  2 ++
 4 files changed, 32 insertions(+), 31 deletions(-)
 create mode 100644 apps/fronted/src/config/index.ts

diff --git a/apps/fronted/src/components/editor/basic/BasicPanel.tsx b/apps/fronted/src/components/editor/basic/BasicPanel.tsx
index 2d2e827..e7dbc64 100644
--- a/apps/fronted/src/components/editor/basic/BasicPanel.tsx
+++ b/apps/fronted/src/components/editor/basic/BasicPanel.tsx
@@ -9,23 +9,7 @@ import PhotoUpload from "@/components/shared/PhotoSelector";
 import Field from "../Field";
 import { useResumeStore } from "@/store/useResumeStore";
 import { BasicFieldType, CustomFieldType } from "@/types/resume";
-
-const DEFAULT_FIELD_ORDER: BasicFieldType[] = [
-  { id: "1", key: "name", label: "姓名", type: "text", visible: true },
-
-  { id: "2", key: "title", label: "职位", type: "text", visible: true },
-  {
-    id: "3",
-    key: "employementStatus",
-    label: "求职状态",
-    type: "text",
-    visible: true
-  },
-  { id: "4", key: "birthDate", label: "出生日期", type: "date", visible: true },
-  { id: "5", key: "email", label: "电子邮箱", type: "text", visible: true },
-  { id: "6", key: "phone", label: "电话", type: "text", visible: true },
-  { id: "7", key: "location", label: "所在地", type: "text", visible: true }
-];
+import { DEFAULT_FIELD_ORDER } from "@/config";
 
 interface CustomFieldProps {
   field: CustomFieldType;
diff --git a/apps/fronted/src/components/preview/BaseInfo.tsx b/apps/fronted/src/components/preview/BaseInfo.tsx
index 8a45efa..6953d8a 100644
--- a/apps/fronted/src/components/preview/BaseInfo.tsx
+++ b/apps/fronted/src/components/preview/BaseInfo.tsx
@@ -1,13 +1,12 @@
-import { cn } from "@/lib/utils";
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import * as Icons from "lucide-react";
 import {
   BasicInfo,
   getBorderRadiusValue,
-  GlobalSettings,
-  BasicFieldType
+  GlobalSettings
 } from "@/types/resume";
-import { motion } from "framer-motion";
-import React from "react";
-import * as Icons from "lucide-react";
 
 interface BaseInfoProps {
   basic: BasicInfo;
@@ -24,7 +23,7 @@ export function BaseInfo({ basic, globalSettings }: BaseInfoProps) {
     return IconComponent ? <IconComponent className="w-4 h-4" /> : null;
   };
 
-  const getOrderedFields = () => {
+  const getOrderedFields = React.useMemo(() => {
     if (!basic.fieldOrder) {
       return [
         {
@@ -55,12 +54,10 @@ export function BaseInfo({ basic, globalSettings }: BaseInfoProps) {
         visible: field.visible
       }))
       .filter((item) => Boolean(item.value));
-  };
-
-  const orderedFields = getOrderedFields();
+  }, [basic]);
 
   const allFields = [
-    ...orderedFields,
+    ...getOrderedFields,
     ...(basic.customFields
       ?.filter((field) => field.visible !== false)
       .map((field) => ({
@@ -160,7 +157,7 @@ export function BaseInfo({ basic, globalSettings }: BaseInfoProps) {
         }}
       >
         {allFields.map((item, index) => (
-          <div key={item.key} className="flex items-center">
+          <motion.div key={item.key} className="flex items-center">
             {useIconMode ? (
               <span className="flex items-center gap-1">
                 {getIcon(item.icon)}
@@ -169,10 +166,10 @@ export function BaseInfo({ basic, globalSettings }: BaseInfoProps) {
             ) : (
               <span className="flex items-center gap-1">
                 <span className="text-gray-500">{item.label}:</span>
-                <span>{item.value}</span>
+                <span suppressHydrationWarning>{item.value}</span>
               </span>
             )}
-          </div>
+          </motion.div>
         ))}
       </motion.div>
     </div>
diff --git a/apps/fronted/src/config/index.ts b/apps/fronted/src/config/index.ts
new file mode 100644
index 0000000..76ce933
--- /dev/null
+++ b/apps/fronted/src/config/index.ts
@@ -0,0 +1,18 @@
+import { BasicFieldType } from "@/types/resume";
+
+export const DEFAULT_FIELD_ORDER: BasicFieldType[] = [
+  { id: "1", key: "name", label: "姓名", type: "text", visible: true },
+
+  { id: "2", key: "title", label: "职位", type: "text", visible: true },
+  {
+    id: "3",
+    key: "employementStatus",
+    label: "求职状态",
+    type: "text",
+    visible: true
+  },
+  { id: "4", key: "birthDate", label: "出生日期", type: "date", visible: true },
+  { id: "5", key: "email", label: "电子邮箱", type: "text", visible: true },
+  { id: "6", key: "phone", label: "电话", type: "text", visible: true },
+  { id: "7", key: "location", label: "所在地", type: "text", visible: true }
+];
diff --git a/apps/fronted/src/store/useResumeStore.ts b/apps/fronted/src/store/useResumeStore.ts
index 61d019d..b1e4298 100644
--- a/apps/fronted/src/store/useResumeStore.ts
+++ b/apps/fronted/src/store/useResumeStore.ts
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
+import { DEFAULT_FIELD_ORDER } from "@/config";
 import {
   BasicInfo,
   Education,
@@ -87,6 +88,7 @@ const initialState = {
     phone: "13800138000",
     location: "北京市朝阳区",
     birthDate: "1995-01",
+    fieldOrder: DEFAULT_FIELD_ORDER,
     icons: {
       email: "Mail",
       phone: "Phone",