feat: add resizable

apps/fronted/package.json

@@ -29,6 +29,7 @@
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
+    "react-resizable-panels": "^2.0.20",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },

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

@@ -49,7 +49,7 @@ const Editor = () => {
     }
   ];
   return (
-    <div className="flex flex-1 p-[12px]">
+    <div className="flex flex-1 p-[12px] h-[100vh]">
       <div className="w-[72px] shrink-0 mr-[10px]	bg-[#ecedee]">
         {tabList.map((item, index) => {
           return (
@@ -63,7 +63,10 @@ const Editor = () => {
           );
         })}
       </div>
-      <div className="bg-[#fff] p-[12px] rounded-[6px] overflow-auto">
+      <div
+        className="bg-[#fff] p-[12px] rounded-[6px] overflow-auto "
+        style={{ scrollbarWidth: "none" }}
+      >
         <div className="text-[24px] mb-[10px]">前端-xx-x年</div>
 
         <div className="mt-[12px]">

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

@@ -1,5 +1,11 @@
+import Tiptap from "@/components/Tiptap";
+
 const Project = () => {
-  return <div></div>;
+  return (
+    <div>
+      <Tiptap></Tiptap>
+    </div>
+  );
 };
 
 export default Project;

apps/fronted/src/app/workbench/page.tsx

@@ -1,12 +1,27 @@
 "use client";
 import Editor from "./compoents/Editor";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+} from "@/components/ui/resizable";
 import Preview from "./compoents/Preview";
 import styles from "./index.module.scss";
 const WorkBench = () => {
   return (
     <div className={styles.container}>
-      <Editor></Editor>
+      <ResizablePanelGroup
-      <Preview></Preview>
+        direction="horizontal"
+        className="h-[100vh] rounded-lg border"
+      >
+        <ResizablePanel>
+          <Editor></Editor>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel>
+          <Preview></Preview>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </div>
   );
 };

apps/fronted/src/components/ui/resizable.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

pnpm-lock.yaml

@@ -152,6 +152,9 @@ importers:
       react-dom:
         specifier: ^18
         version: 18.3.1(react@18.3.1)
+      react-resizable-panels:
+        specifier: ^2.0.20
+        version: 2.0.20(react-dom@18.3.1)(react@18.3.1)
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.3.0
@@ -6665,6 +6668,16 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.3.2)(react@18.3.1)
     dev: false
 
+  /react-resizable-panels@2.0.20(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-aMbK3VF8U+VBICG+rwhE0Rr/eFZaRzmNq3akBRL1TrayIpLXz7Rbok0//kYeWj6SQRsjcQ3f4eRplJicM+oL6w==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /react-style-singleton@2.2.1(@types/react@18.3.2)(react@18.3.1):
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}