feat: 渲染工程文件

package.json

@@ -44,6 +44,8 @@
   "dependencies": {
     "allotment": "^1.20.2",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^2.6.0"
+    "electron-log": "^5.2.4",
+    "tailwind-merge": "^2.6.0",
+    "zustand": "^5.0.3"
   }
 }

src/far/main/index.ts

@@ -35,10 +35,10 @@ if (os.release().startsWith("6.1")) app.disableHardwareAcceleration();
 // Set application name for Windows 10+ notifications
 if (process.platform === "win32") app.setAppUserModelId(app.getName());
 
-if (!app.requestSingleInstanceLock()) {
-  app.quit();
-  process.exit(0);
-}
+// if (!app.requestSingleInstanceLock()) {
+//   app.quit();
+//   process.exit(0);
+// }
 
 let win: BrowserWindow | null = null;
 const preload = path.join(__dirname, "../preload/index.mjs");

src/far/main/listeners.ts

@@ -1,15 +1,36 @@
 import { dialog, ipcMain } from "electron";
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+import { isEmptyDir } from "./utils";
 
 /**
  * 打开文件
  */
 ipcMain.handle("open-file", () => {
   const root = dialog.showOpenDialogSync({
+    // 用户目录
+    defaultPath: os.homedir(),
     // 只能选择文件夹
     properties: ["openDirectory"],
   });
   if (root && Array.isArray(root) && root.length > 0) {
-    return root[0];
+    // 查看当前根目录的文件
+    const filesWithType = fs.readdirSync(root[0], { withFileTypes: true });
+    // 判断每一个子文件是否是文件夹，如果是文件夹，则判断是否是空文件夹
+    const files: FileInfo[] = [];
+    filesWithType.forEach((file) => {
+      const isDir = file.isDirectory();
+      files.push({
+        name: file.name,
+        parentPath: root[0],
+        path: path.join(root[0], file.name),
+        isDir: isDir,
+        isEmpty: isDir ? isEmptyDir(path.join(root[0], file.name)) : false,
+      });
+    });
+
+    return files;
   }
-  return "";
+  return [];
 });

src/far/main/utils/index.ts

@@ -0,0 +1,9 @@
+import fs from "node:fs";
+/**
+ * 判断一个文件夹是否为空
+ * @param dir 文件夹路径
+ * @returns 是否为空
+ */
+export function isEmptyDir(dir: string) {
+  return fs.readdirSync(dir).length === 0;
+}

src/renderer/src/App.tsx

@@ -1,4 +1,4 @@
-import { Tabbar, MainEmpty } from "@common";
+import { Tabbar, MainEmpty, Slider } from "@common";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
 import "./assets/iconfont.js";
@@ -8,9 +8,9 @@ export default function App() {
     <div className="bg-primary h-screen flex flex-col">
       <Tabbar />
       <div className="flex-1">
-        <Allotment>
+        <Allotment defaultSizes={[160, 220]}>
           <Allotment.Pane minSize={160}>
-            <div>Slider</div>
+            <Slider />
           </Allotment.Pane>
           <Allotment.Pane minSize={220}>
             <MainEmpty />

src/renderer/src/common/components/index.ts

@@ -1,3 +1,4 @@
 export { default as IconFont } from "./icon-font";
 export { default as Tabbar } from "./tabbar";
 export { default as MainEmpty } from "./main-empty";
+export { default as Slider } from "./slider";

src/renderer/src/common/components/main-empty/index.tsx

@@ -1,14 +1,22 @@
 import { openFile } from "@/ipc";
+import { useProjectFiles } from "@/store";
 
 export default function MainEmpty() {
+  const { setFiles } = useProjectFiles();
+
+  const handleOpenFile = async () => {
+    const files = await openFile();
+    console.log(files);
+    setFiles(files);
+  };
   return (
     <div className="h-full all_flex">
       <div className="">
         {/* open btn */}
         <div
           role="button"
           className="all_flex select-none w-170px bg-blue-500 p-4 rounded-md text-white text-xl hover:bg-blue-500/80 hover:text-white/80 transition-all duration-300"
-          onClick={openFile}
+          onClick={handleOpenFile}
         >
           Open a folder
         </div>

src/renderer/src/common/components/slider/index.tsx

@@ -0,0 +1,23 @@
+import { useProjectFiles } from "@/store";
+import IconFont from "../icon-font";
+
+export default function Slider() {
+  const files = useProjectFiles((state) => state.files);
+  return (
+    <div className="p-4 h-full overflow-y-auto">
+      {files.map((file) => {
+        return (
+          <div key={file.name} className="flex items-center gap-2">
+            <IconFont
+              name={file.isDir ? "dir" : "file"}
+              className="text-white"
+            />
+            <span className="flex-1 text-white whitespace-nowrap overflow-hidden">
+              {file.name}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/renderer/src/ipc/index.ts

@@ -2,7 +2,7 @@
  * 打开工程文件夹
  * @returns 文件夹路径
  */
-export async function openFile(): Promise<string> {
+export async function openFile(): Promise<FileInfo[]> {
   const root = await window.ipcRenderer.invoke("open-file");
   return root;
 }

src/renderer/src/store/index.tsx

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface UseProjectFilesState {
+  files: FileInfo[];
+}
+interface UseProjectFilesActions {
+  setFiles: (files: FileInfo[]) => void;
+}
+
+export const useProjectFiles = create<
+  UseProjectFilesState & UseProjectFilesActions
+>()((set, get) => ({
+  files: [],
+  setFiles: (files: FileInfo[]) => set({ files }),
+}));

src/renderer/typings/electron.d.ts

@@ -1,5 +1,5 @@
 interface InvokeChannelMap {
-  "open-file": [[], string];
+  "open-file": [[], fs.Dirent[]];
 }
 
 interface IpcRenderer extends Omit<IpcRenderer, "invoke" | "send"> {