feat: basic layout

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

@@ -0,0 +1,5 @@
+const BasicInfo = () => {
+  return <div></div>;
+};
+
+export default BasicInfo;

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

@@ -0,0 +1,5 @@
+const Cert = () => {
+  return <div></div>;
+};
+
+export default Cert;

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

@@ -1,11 +1,23 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useState } from "react";
+import BasicInfo from "../BasicInfo";
+import Skills from "../Skills";
+import Project from "../Project";
+import Empolyment from "../Empolyment";
+import Education from "../Education";
+import Cert from "../Cert";
 
 const Editor = () => {
+  const [activeTab, setActiveTab] = useState("basic");
   return (
     <div className="flex-1 bg-[#fff] p-[12px]">
       {/* 简历编辑表单 */}
       <div className="text-[24px] mb-[10px]">前端-xx-x年</div>
-      <Tabs defaultValue="basic" className="w-[400px]">
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="w-[400px]"
+      >
         <TabsList>
           <TabsTrigger value="basic">基本信息</TabsTrigger>
           <TabsTrigger value="skills">专业技能</TabsTrigger>
@@ -14,11 +26,21 @@ const Editor = () => {
           <TabsTrigger value="education">教育经历</TabsTrigger>
           <TabsTrigger value="cert">技能证书</TabsTrigger>
         </TabsList>
-        <TabsContent value="basic">
-          Make changes to your account here.
-        </TabsContent>
-        <TabsContent value="skills">Change your password here.</TabsContent>
       </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>
     </div>
   );
 };

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

@@ -0,0 +1,5 @@
+const Education = () => {
+  return <div></div>;
+};
+
+export default Education;

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

@@ -0,0 +1,5 @@
+const Empolyment = () => {
+  return <div></div>;
+};
+
+export default Empolyment;

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

@@ -1,6 +1,6 @@
 const Preview = () => {
   return (
-    <div className="flex-1 bg-[green]">
+    <div className="flex-1 p-[12px]">
       {/* 简历编辑表单 */}
       预览区域
     </div>

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

@@ -0,0 +1,5 @@
+const Project = () => {
+  return <div></div>;
+};
+
+export default Project;

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

@@ -0,0 +1,5 @@
+const Skills = () => {
+  return <div></div>;
+};
+
+export default Skills;

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

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