From 565df5636b48568b0d7b76ccb62e3e54b9f36e78 Mon Sep 17 00:00:00 2001 From: yuguangzhou Date: Mon, 5 Aug 2024 23:53:21 +0800 Subject: [PATCH] feat: add baseInfo --- apps/fronted/package.json | 1 + .../src/app/workbench/compoents/BasicInfo.tsx | 63 ++++++++++++++++--- .../app/workbench/compoents/Editor/index.tsx | 4 +- .../app/workbench/compoents/Preview/index.tsx | 30 ++++++++- .../src/app/workbench/index.module.scss | 1 + apps/fronted/src/store/useBaseInfoStore.ts | 32 +++++++++- pnpm-lock.yaml | 7 +++ 7 files changed, 126 insertions(+), 12 deletions(-) diff --git a/apps/fronted/package.json b/apps/fronted/package.json index f72d2a4..f8e8fe5 100644 --- a/apps/fronted/package.json +++ b/apps/fronted/package.json @@ -24,6 +24,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "date-fns": "^3.6.0", + "dayjs": "^1.11.12", "lucide-react": "^0.379.0", "next": "14.2.3", "react": "^18", diff --git a/apps/fronted/src/app/workbench/compoents/BasicInfo.tsx b/apps/fronted/src/app/workbench/compoents/BasicInfo.tsx index 3da200b..5f2b243 100644 --- a/apps/fronted/src/app/workbench/compoents/BasicInfo.tsx +++ b/apps/fronted/src/app/workbench/compoents/BasicInfo.tsx @@ -15,32 +15,77 @@ import useBaseInfoStore from "@/store/useBaseInfoStore"; const BasicInfo = () => { const [date, setDate] = useState(); const [isDateOpen, setIsDateOpen] = useState(false); - const { name } = useBaseInfoStore(); + const { + name, + setName, + phone, + setPhone, + wechat, + setWechat, + email, + setEmail, + birthday, + setBirthday, + jobName, + setJobName + } = useBaseInfoStore(); return (
- + setName(e.target.value)} + className="w-[200px] flex-1" + />
- + setPhone(e.target.value)} + className="w-[200px] flex-1" + />
- + setWechat(e.target.value)} + className="w-[200px] flex-1" + />
- + setEmail(e.target.value)} + className="w-[200px] flex-1" + /> +
+
+ + setJobName(e.target.value)} + className="w-[200px] flex-1" + />
@@ -65,10 +112,10 @@ const BasicInfo = () => { > { setIsDateOpen(false); - setDate(val); + setBirthday(val); }} initialFocus /> diff --git a/apps/fronted/src/app/workbench/compoents/Editor/index.tsx b/apps/fronted/src/app/workbench/compoents/Editor/index.tsx index 0387da9..8a54541 100644 --- a/apps/fronted/src/app/workbench/compoents/Editor/index.tsx +++ b/apps/fronted/src/app/workbench/compoents/Editor/index.tsx @@ -23,6 +23,8 @@ const Editor = () => { const educationRef = useRef(null); const certRef = useRef(null); const empolymentRef = useRef(null); + const { resumeTitle } = useBaseInfoStore(); + const tabList = [ { value: "basic", @@ -87,7 +89,7 @@ const Editor = () => { className="bg-[#fff] p-[12px] rounded-[6px] overflow-auto " style={{ scrollbarWidth: "none" }} > -
前端-xx-x年
+
{resumeTitle}
diff --git a/apps/fronted/src/app/workbench/compoents/Preview/index.tsx b/apps/fronted/src/app/workbench/compoents/Preview/index.tsx index 2029f03..3be86f9 100644 --- a/apps/fronted/src/app/workbench/compoents/Preview/index.tsx +++ b/apps/fronted/src/app/workbench/compoents/Preview/index.tsx @@ -1,7 +1,35 @@ +import useBaseInfoStore from "@/store/useBaseInfoStore"; +import dayjs from "dayjs"; const Preview = () => { + const { name, phone, wechat, email, birthday, jobName } = useBaseInfoStore(); return (
-
预览区域
+
+
+
+
{name}
+
{jobName}
+
+
+
+
手机号码:
+ {phone} +
+
+
微信:
+ {wechat} +
+
+
邮箱:
+ {email} +
+
+
出生日期:
+ {dayjs(birthday).format("YYYY-MM-DD")} +
+
+
+
); }; diff --git a/apps/fronted/src/app/workbench/index.module.scss b/apps/fronted/src/app/workbench/index.module.scss index f410774..1baa04a 100644 --- a/apps/fronted/src/app/workbench/index.module.scss +++ b/apps/fronted/src/app/workbench/index.module.scss @@ -2,4 +2,5 @@ display: flex; height: 100vh; background: #ecedee; + min-width: 1200px; } diff --git a/apps/fronted/src/store/useBaseInfoStore.ts b/apps/fronted/src/store/useBaseInfoStore.ts index 1391d7e..76b38ea 100644 --- a/apps/fronted/src/store/useBaseInfoStore.ts +++ b/apps/fronted/src/store/useBaseInfoStore.ts @@ -1,7 +1,35 @@ import { create } from "zustand"; -const useBaseInfoStore = create((set) => ({ - name: "001" +interface BaseInfoState { + resumeTitle: string; + name: string; + setName: (name: string) => void; + phone: string; + setPhone: (phone: string) => void; + wechat: string; + setWechat: (wechat: string) => void; + email: string; + setEmail: (email: string) => void; + birthday: Date; + setBirthday: (birthday: Date) => void; + jobName: string; + setJobName: (jobName: string) => void; +} + +const useBaseInfoStore = create((set) => ({ + resumeTitle: "前端", + name: "牛马人", + setName: (name: string) => set({ name }), + phone: "1234567", + setPhone: (phone: string) => set({ phone }), + wechat: "niuma", + setWechat: (wechat: string) => set({ wechat }), + email: "mofang@gmail.com", + setEmail: (email: string) => set({ email }), + birthday: new Date(2024, 5, 20), + setBirthday: (birthday: Date) => set({ birthday }), + jobName: "前端工程师/5年经验", + setJobName: (jobName: string) => set({ jobName }) })); export default useBaseInfoStore; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 359d990..6221c6f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,6 +137,9 @@ importers: date-fns: specifier: ^3.6.0 version: 3.6.0 + dayjs: + specifier: ^1.11.12 + version: 1.11.12 lucide-react: specifier: ^0.379.0 version: 0.379.0(react@18.3.1) @@ -3546,6 +3549,10 @@ packages: resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} dev: false + /dayjs@1.11.12: + resolution: {integrity: sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==} + dev: false + /debug@2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: