From 2e01e2eaeabcb019cd9ac9944ee193f0f30bfb5c Mon Sep 17 00:00:00 2001
From: yuguangzhou <yuguangzhou@yiwise.com>
Date: Wed, 17 Jul 2024 00:23:10 +0800
Subject: [PATCH] feat: add zustand

---
 apps/fronted/package.json                     |  3 +-
 .../src/app/workbench/compoents/BasicInfo.tsx |  4 ++-
 .../app/workbench/compoents/Editor/index.tsx  |  2 +-
 .../app/workbench/compoents/Preview/index.tsx |  5 ++-
 apps/fronted/src/store/useBaseInfoStore.ts    |  7 +++++
 pnpm-lock.yaml                                | 31 +++++++++++++++++++
 6 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 apps/fronted/src/store/useBaseInfoStore.ts

diff --git a/apps/fronted/package.json b/apps/fronted/package.json
index 0f351d2..f72d2a4 100644
--- a/apps/fronted/package.json
+++ b/apps/fronted/package.json
@@ -31,7 +31,8 @@
     "react-dom": "^18",
     "react-resizable-panels": "^2.0.20",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/apps/fronted/src/app/workbench/compoents/BasicInfo.tsx b/apps/fronted/src/app/workbench/compoents/BasicInfo.tsx
index 61950d9..3da200b 100644
--- a/apps/fronted/src/app/workbench/compoents/BasicInfo.tsx
+++ b/apps/fronted/src/app/workbench/compoents/BasicInfo.tsx
@@ -10,17 +10,19 @@ import {
 import { Button } from "@/components/ui/button";
 import { CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
+import useBaseInfoStore from "@/store/useBaseInfoStore";
 
 const BasicInfo = () => {
   const [date, setDate] = useState<Date>();
   const [isDateOpen, setIsDateOpen] = useState<boolean>(false);
+  const { name } = useBaseInfoStore();
   return (
     <div className="flex items-center flex-wrap gap-[16px]">
       <div className="flex items-center flex-[48%] ">
         <Label htmlFor="name" className="w-[80px]">
           姓名
         </Label>
-        <Input id="name" className="w-[200px] flex-1" />
+        <Input id="name" value={name} className="w-[200px] flex-1" />
       </div>
       <div className="flex items-center flex-[48%]">
         <Label htmlFor="phone" className="w-[80px]">
diff --git a/apps/fronted/src/app/workbench/compoents/Editor/index.tsx b/apps/fronted/src/app/workbench/compoents/Editor/index.tsx
index a20e0e0..0387da9 100644
--- a/apps/fronted/src/app/workbench/compoents/Editor/index.tsx
+++ b/apps/fronted/src/app/workbench/compoents/Editor/index.tsx
@@ -14,6 +14,7 @@ import {
   GraduationCap,
   BookOpen
 } from "lucide-react";
+import useBaseInfoStore from "@/store/useBaseInfoStore";
 const Editor = () => {
   const [activeTab, setActiveTab] = useState("basic");
   const basicRef = useRef(null);
@@ -22,7 +23,6 @@ const Editor = () => {
   const educationRef = useRef(null);
   const certRef = useRef(null);
   const empolymentRef = useRef(null);
-
   const tabList = [
     {
       value: "basic",
diff --git a/apps/fronted/src/app/workbench/compoents/Preview/index.tsx b/apps/fronted/src/app/workbench/compoents/Preview/index.tsx
index 82dcc90..2029f03 100644
--- a/apps/fronted/src/app/workbench/compoents/Preview/index.tsx
+++ b/apps/fronted/src/app/workbench/compoents/Preview/index.tsx
@@ -1,8 +1,7 @@
 const Preview = () => {
   return (
-    <div className="flex-1 p-[12px]">
-      {/* 简历编辑表单 */}
-      预览区域
+    <div className="flex-1  p-[12px] h-[100vh] ">
+      <div className="p-[12px] h-[100%] rounded-[6px] bg-[#fff]">预览区域</div>
     </div>
   );
 };
diff --git a/apps/fronted/src/store/useBaseInfoStore.ts b/apps/fronted/src/store/useBaseInfoStore.ts
new file mode 100644
index 0000000..1391d7e
--- /dev/null
+++ b/apps/fronted/src/store/useBaseInfoStore.ts
@@ -0,0 +1,7 @@
+import { create } from "zustand";
+
+const useBaseInfoStore = create((set) => ({
+  name: "001"
+}));
+
+export default useBaseInfoStore;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7d4e135..359d990 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,6 +161,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.3)
+      zustand:
+        specifier: ^4.5.4
+        version: 4.5.4(@types/react@18.3.2)(react@18.3.1)
     devDependencies:
       '@types/node':
         specifier: ^20
@@ -7770,6 +7773,14 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /use-sync-external-store@1.2.0(react@18.3.1):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.3.1
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -8060,3 +8071,23 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+  /zustand@4.5.4(@types/react@18.3.2)(react@18.3.1):
+    resolution: {integrity: sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@types/react': 18.3.2
+      react: 18.3.1
+      use-sync-external-store: 1.2.0(react@18.3.1)
+    dev: false