feat: workbench

apps/fronted/src/app/workbench/compoents/BasicInfo.tsx

@@ -13,42 +13,60 @@ import { format } from "date-fns";
 
 const BasicInfo = () => {
   const [date, setDate] = useState<Date>();
+  const [isDateOpen, setIsDateOpen] = useState<boolean>(false);
   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]" />
+        <Input id="name" className="w-[200px] flex-1" />
       </div>
       <div className="flex items-center flex-[48%]">
         <Label htmlFor="phone" className="w-[80px]">
           手机号码
         </Label>
-        <Input id="phone" className="w-[200px]" />
+        <Input id="phone" className="w-[200px] flex-1" />
       </div>
       <div className="flex items-center flex-[48%]">
         <Label htmlFor="wechat" className="w-[80px]">
           微信
         </Label>
-        <Input id="wechat" className="w-[200px]" />
+        <Input id="wechat" className="w-[200px] flex-1" />
+      </div>
+      <div className="flex items-center flex-[48%]">
+        <Label htmlFor="email" className="w-[80px]">
+          电子邮件
+        </Label>
+        <Input id="email" className="w-[200px] flex-1" />
       </div>
       <div className="flex items-center flex-[48%]">
         <Label htmlFor="wechat" className="w-[80px]">
           出生日期
         </Label>
-        <Popover>
+        <Popover open={isDateOpen}>
           <PopoverTrigger asChild>
-            <Button variant={"outline"}>
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              {date ? format(date, "PPP") : <span>Pick a date</span>}
-            </Button>
+            <div className="relative flex-1 w-[200px]">
+              <CalendarIcon className="left-[10px] top-[12px] absolute   h-4 w-4" />
+              <Input
+                className="flex-1  pl-[36px] "
+                value={date ? format(date, "PPP") : "Pick a date"}
+                onClick={() => setIsDateOpen(true)}
+              ></Input>
+            </div>
           </PopoverTrigger>
-          <PopoverContent className="w-auto p-0">
+          <PopoverContent
+            className="w-auto p-0"
+            onFocusOutside={() => setIsDateOpen(false)}
+            onPointerDownOutside={() => setIsDateOpen(false)}
+          >
             <Calendar
               mode="single"
               selected={date}
-              onSelect={setDate}
+              onSelect={(val) => {
+                setIsDateOpen(false);
+                setDate(val);
+              }}
               initialFocus
             />
           </PopoverContent>

apps/fronted/src/app/workbench/compoents/Editor/index.tsx

@@ -6,40 +6,73 @@ import Project from "../Project";
 import Empolyment from "../Empolyment";
 import Education from "../Education";
 import Cert from "../Cert";
-
+import { UserRound, PencilRuler, FileJson, Network } from "lucide-react";
 const Editor = () => {
   const [activeTab, setActiveTab] = useState("basic");
+  const tabList = [
+    {
+      value: "basic",
+      label: "基本信息",
+      icon: <UserRound size={16} />
+    },
+    {
+      value: "skills",
+      label: "专业技能",
+      icon: <PencilRuler size={16} />
+    },
+    {
+      value: "project",
+      label: "项目经历",
+      icon: <FileJson size={16} />
+    },
+    {
+      value: "empolyment",
+      label: "工作经历",
+      icon: <Network size={16} />
+    },
+    {
+      value: "education",
+      label: "教育经历",
+      icon: <UserRound size={16} />
+    },
+    {
+      value: "cert",
+      label: "技能证书",
+      icon: <UserRound size={16} />
+    }
+  ];
   return (
-    <div className="flex-1 bg-[#fff] p-[12px]">
-      {/* 简历编辑表单 */}
-      <div className="text-[24px] mb-[10px]">前端-xx-x年</div>
-      <Tabs
-        value={activeTab}
-        onValueChange={setActiveTab}
-        className="w-[400px]"
-      >
-        <TabsList>
-          <TabsTrigger value="basic">基本信息</TabsTrigger>
-          <TabsTrigger value="skills">专业技能</TabsTrigger>
-          <TabsTrigger value="project">项目经历</TabsTrigger>
-          <TabsTrigger value="empolyment">工作经历</TabsTrigger>
-          <TabsTrigger value="education">教育经历</TabsTrigger>
-          <TabsTrigger value="cert">技能证书</TabsTrigger>
-        </TabsList>
-      </Tabs>
-      <div className="mt-[12px]">
-        <div className="text-[20px] mb-[12px]">基本信息</div>
-        <BasicInfo></BasicInfo>
-        <div className="text-[20px] mb-[12px]">专业技能</div>
-        <Skills></Skills>
-        <div className="text-[20px] mb-[12px]">项目经历</div>
-        <Project></Project>
-        <div className="text-[20px] mb-[12px]">工作经历</div>
-        <Empolyment></Empolyment>
-        <div className="text-[20px] mb-[12px]">教育经历</div>
-        <Education></Education>
-        <div className="text-[20px]">技能证书</div>
-        <Cert></Cert>
+    <div className="flex flex-1 p-[12px]">
+      <div className="w-[72px] shrink-0 mr-[10px]	bg-[#ecedee]">
+        {tabList.map((item, index) => {
+          return (
+            <div
+              key={index}
+              className="flex flex-col items-center text-[12px] p-[12px] cursor-pointer hover:bg-[#e3e3e5] hover:rounded-[4px]"
+            >
+              <div>{item.icon}</div>
+              <div>{item.label}</div>
+            </div>
+          );
+        })}
+      </div>
+      <div className="bg-[#fff] p-[12px] rounded-[6px]">
+        <div className="text-[24px] mb-[10px]">前端-xx-x年</div>
+
+        <div className="mt-[12px]">
+          <div className="text-[20px] mb-[12px]">基本信息</div>
+          <BasicInfo></BasicInfo>
+          <div className="text-[20px] mb-[12px]">专业技能</div>
+          <Skills></Skills>
+          <div className="text-[20px] mb-[12px]">项目经历</div>
+          <Project></Project>
+          <div className="text-[20px] mb-[12px]">工作经历</div>
+          <Empolyment></Empolyment>
+          <div className="text-[20px] mb-[12px]">教育经历</div>
+          <Education></Education>
+          <div className="text-[20px]">技能证书</div>
+          <Cert></Cert>
+        </div>
       </div>
     </div>
   );

apps/fronted/src/app/workbench/index.module.scss

@@ -1,5 +1,5 @@
 .container {
   display: flex;
   height: 100vh;
-  background: #fafafa;
+  background: #ecedee;
 }