feat: init fileTree (#59)

xun082 · Jul 15, 2024 · 2e5386b · 2e5386b
1 parent b77f291
commit 2e5386b
Show file tree

Hide file tree

Showing 9 changed files with 2,992 additions and 7,218 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@giscus/react": "^3.0.0",
     "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/edit/(main)/(router)/file/page.tsx b/src/app/edit/(main)/(router)/file/page.tsx
@@ -1,47 +1,68 @@
 'use client';
 
 import React from 'react';
-// import Image from 'next/image';
-// import { editor } from 'monaco-editor';
 
-import { FileItem } from '@/components/file/fileItem';
+import FileTree from '@/components/file/fileTree';
 
-// import {
-//   useEditorStore,
-//   useMonacoStore,
-//   useModelsStore,
-//   useActiveModelStore,
-//   useActiveEditorStore,
-//   useSplitStore,
-// } from '@/store/editorStore';
-// import { addNewModel } from '@/components/editor/utils';
-
-const MockFileList = [
+const data = [
   {
-    filename: '1.py',
-    language: 'python',
-    value: `print('我是python文件,我可以拖动)`,
+    id: '1',
+    filename: 'components',
+    children: [
+      {
+        id: '2',
+        filename: 'extension',
+        children: [
+          {
+            id: '3',
+            filename: 'tree-view.tsx',
+            value: '我42424是page8',
+          },
+          {
+            id: '4',
+            filename: 'tree-view-api.tsx',
+            value: '11111我是page8',
+          },
+        ],
+      },
+      {
+        id: '5',
+        filename: 'dashboard-tree.tsx',
+        value: '我4242是page8',
+      },
+    ],
   },
   {
-    filename: 'drag.js',
-    language: 'javascript',
-    value: `console.log("我是js,我可以拖动")`,
+    id: '6',
+    filename: 'pages',
+    children: [
+      {
+        id: '7',
+        filename: 'page.tsx',
+        value: '我是page31318',
+      },
+      {
+        id: '8',
+        filename: 'page-guide.tsx',
+        value: '我是page8',
+      },
+    ],
   },
   {
-    filename: 'drag.ts',
-    language: 'typescript',
-    value: `console.log("我是ts,我可以拖动")`,
+    id: '18',
+    filename: 'env.ts',
+    value: '我是page118',
   },
 ];
-
 const PortsPage: React.FC = () => {
   return (
-    <div className="p-4 h-full w-full flex flex-col bg-[#202327]">
-      <span className=" text-[11px]">资源管理器</span>
-      <div className=" flex flex-col w-full">
-        {MockFileList.map((file, index) => (
+    <div className="h-full w-full flex flex-col bg-[#202327]">
+      <span className=" text-[11px] px-4 pt-2">资源管理器</span>
+      <div className=" px-0 flex flex-col w-full justify-start">
+        {/* {MockFileList.map((file, index) => (
           <FileItem key={index} file={file}></FileItem>
-        ))}
+        ))} */}
+        <FileTree data={data}></FileTree>
       </div>
     </div>
   );

diff --git a/src/components/edit/tabItem/index.tsx b/src/components/edit/tabItem/index.tsx
@@ -47,8 +47,10 @@ const Tab: React.FC<TabProps> = ({
     : undefined;
 
   useEffect(() => {
+    console.log(active, tabRef.current);
+
     if (active && tabRef.current) {
-      tabRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      tabRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
   }, [active]);
 
@@ -86,20 +88,17 @@ const Tab: React.FC<TabProps> = ({
       ref={setNodeRef}
       {...listeners}
       className={cn(
-        'group relative flex items-center gap-2 cursor-pointer transition-all duration-100 h-full pl-6 pr-7 bg-[#26292e]/1 hover:bg-[#15181e]/50 border-[white]/20 border-[1px]',
+        'group relative flex items-center w-max gap-2 cursor-pointer transition-all duration-100 h-full pl-6 pr-7 bg-[#26292e]/1 hover:bg-[#15181e]/50 border-[white]/20 border-[1px]',
         active
           ? 'bg-[#15181e] border-l border-r border-white/35 border-t-blue-500 border-t-[1.5px] border-b-0'
           : '',
       )}
       onMouseUp={(e) => handleTabClick(e)}
     >
       <Image className="absolute w-4 h-4 left-1" src={jsIcon} alt="" />
-      {filename}
-      <span
-        ref={tabRef}
-        onMouseUp={handleTabClose}
-        className="hidden group-hover:block absolute right-3"
-      >
+
+      <p ref={tabRef}>{filename}</p>
+      <span onMouseUp={handleTabClose} className="hidden group-hover:block absolute right-3">
         x
       </span>
     </div>

diff --git a/src/components/edit/tabbar/index.tsx b/src/components/edit/tabbar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { HiOutlineEllipsisHorizontal } from 'react-icons/hi2';
 import { VscSplitHorizontal } from 'react-icons/vsc';
 import { editor } from 'monaco-editor';
@@ -38,7 +38,6 @@ export const TabBar: React.FC<TabBarProps> = ({ editorId }) => {
   const editor = getEditor(editorId);
   const activeModelId = activeMap[editorId]?.modelId ?? 0;
 
-  const activeTabRef = useRef<HTMLDivElement>(null);
   const keepedEditorCount = splitState.filter((item) => item).length;
 
   function handleDragEnd(event: any) {
@@ -55,14 +54,6 @@ export const TabBar: React.FC<TabBarProps> = ({ editorId }) => {
     }
   }
 
-  useEffect(() => {
-    if (activeTabRef.current) {
-      activeTabRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-      });
-    }
-  }, [activeModelId]);
   useEffect(() => {
     setMockModelsForSort(
       models.map((item) => {

diff --git a/src/components/editor/index.tsx b/src/components/editor/index.tsx
@@ -19,33 +19,7 @@ interface CodeEditorProps {
   editorId: number;
 }
 
-const modelsInfo = [
-  {
-    filename: '1.py',
-    language: 'python',
-    value: `1111print("Hello World!")`,
-  },
-  {
-    filename: '2.js',
-    language: 'javascript',
-    value: `2222console.log("Hello World!")`,
-  },
-  {
-    filename: '333.ts',
-    language: 'typescript',
-    value: `3333console.log("Hello World!")`,
-  },
-  {
-    filename: 'ma5in.ts',
-    language: 'typescript',
-    value: `5555console.log("Hello World!")`,
-  },
-  {
-    filename: 'ma6in.ts',
-    language: 'typescript',
-    value: `6666console.log("Hello World!")`,
-  },
-];
+const modelsInfo: any[] = [];
 
 export default function CodeEditor({ editorId }: CodeEditorProps) {
   const { getEditor, setEditor } = useEditorStore();
@@ -119,7 +93,7 @@ export default function CodeEditor({ editorId }: CodeEditorProps) {
 
   return (
     (thisEditor === null || currentModel?.model) && (
-      <div ref={setNodeRef} className=" w-full h-full flex flex-col" style={style}>
+      <div ref={setNodeRef} className=" w-full h-full flex flex-col border-[1px]" style={style}>
         <div className=" h-[3.5vh] w-full bg-[#202327]/80">
           <TabBar editorId={editorId} />
         </div>