chore: 等待键盘事件的监听

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "vite",
-    "build": "tsc && vite build && electron-builder"
+    "build": "tsc && vite build --emptyOutDir && electron-builder"
   },
   "repository": {
     "type": "git",

src/far/main/listeners.ts

@@ -36,7 +36,7 @@ function getFileInfo(rootName = ""): FileInfo["files"] {
 ipcMain.handle("open-file", () => {
   const root = dialog.showOpenDialogSync({
     // 用户目录
-    defaultPath: os.homedir(),
+    defaultPath: path.join(os.homedir(), "Dev/far-editor"),
     // 只能选择文件夹
     properties: ["openDirectory"],
   });
@@ -74,7 +74,6 @@ ipcMain.handle("open-file", () => {
  * 展开或折叠文件夹
  */
 ipcMain.handle("expand-or-collapse-file", (_, rootName: string) => {
-  console.log("rootName", rootName);
   return getFileInfo(rootName);
 });
 

src/renderer/src/App.tsx

@@ -1,15 +1,15 @@
-import { Tabbar, MainEmpty, Slider } from "@common";
+import { Tabbar, MainEmpty } from "@common";
 import { useProject } from "./store";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
 import "./assets/iconfont.js";
-import Editor from "./editor/index";
+import Editor from "./layout/editor/index";
+import Slider from "./layout/slider";
 
 export default function App() {
   const isEmptyProject =
     useProject((state) => state.projectInfo.files).length === 0;
 
-  console.log({ isEmptyProject });
   return (
     <div className="bg-primary h-screen flex flex-col">
       <Tabbar />

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

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

src/renderer/src/common/hooks/index.ts

@@ -1 +1 @@
-export default {};
+export { default as useKeyboardEnter } from "./useKeyboardEnter";

src/renderer/src/common/hooks/useKeyboardEnter.ts

@@ -0,0 +1,14 @@
+import { useRef } from "react";
+
+export default function useKeyboardEnter(callback: () => void) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleKeyboardEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    console.log(e.key);
+    if (e.key === "Enter") {
+      callback?.();
+    }
+  };
+
+  return handleKeyboardEnter;
+}

src/renderer/src/layout/editor/index.tsx

@@ -0,0 +1,52 @@
+import { useFileContent } from "@/store/useFileContent.store";
+import MonacoEditor from "@monaco-editor/react";
+export default function Editor() {
+  const fileContent = useFileContent((state) => state.fileContent);
+  const selectedFileInfo = useFileContent((state) => state.selectedFileInfo);
+  const handleEditorMount = (editor: any, monaco: any) => {
+    console.log("Editor mounted", editor, monaco);
+  };
+  // 检查类型
+  const isTypescript =
+    selectedFileInfo.name.endsWith(".ts") ||
+    selectedFileInfo.name.endsWith(".tsx");
+  const isJs =
+    selectedFileInfo.name.endsWith(".js") ||
+    selectedFileInfo.name.endsWith(".jsx");
+  const isCss =
+    selectedFileInfo.name.endsWith(".css") ||
+    selectedFileInfo.name.endsWith(".scss") ||
+    selectedFileInfo.name.endsWith(".less");
+  const isHtml =
+    selectedFileInfo.name.endsWith(".html") ||
+    selectedFileInfo.name.endsWith(".razor") ||
+    selectedFileInfo.name.endsWith(".handlebars");
+  const isJson = selectedFileInfo.name.endsWith(".json");
+
+  const language = isTypescript
+    ? "typescript"
+    : isJs
+    ? "javascript"
+    : isCss
+    ? "css"
+    : isHtml
+    ? "html"
+    : isJson
+    ? "json"
+    : "text";
+
+  return (
+    <div className="h-full w-full">
+      {selectedFileInfo.id ? (
+        <MonacoEditor
+          height="100%"
+          width="100%"
+          language={language}
+          theme="vs-dark"
+          value={fileContent}
+          onMount={handleEditorMount}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { Fragment, useRef, useState, createContext, useContext } from "react";
 import { useProject } from "@/store";
-import IconFont from "../icon-font";
+import { IconFont, useKeyboardEnter } from "@common";
 import { cn } from "@/common/utils";
 import { expandOrCollapseFile, readFile } from "@/ipc";
 import { useFileContent } from "@/store/useFileContent.store";
@@ -12,7 +12,7 @@ const SliderContext = createContext<{
 }>({
   selectedId: "",
   handleSelectedId: () => {},
-  sliderWidth: 0,
+  sliderWidth: 0, // TODO: 多余，之后删除
 });
 export default function Slider() {
   const projectInfo = useProject((state) => state.projectInfo);
@@ -78,8 +78,10 @@ interface FileItemProps {
   defaultFiles?: FileInfo[];
 }
 function FileItem(props: FileItemProps) {
-  const { selectedId, handleSelectedId, sliderWidth } =
-    useContext(SliderContext);
+  const handleKeyboardEnter = useKeyboardEnter(() => {
+    console.log("enter");
+  });
+  const { selectedId, handleSelectedId } = useContext(SliderContext);
 
   const [isOpen, setIsOpen] = useState(props.isActive);
   const [childFiles, setChildFiles] = useState<FileInfo[]>(
@@ -100,7 +102,11 @@ function FileItem(props: FileItemProps) {
     // 文件项
     <>
       <div
-        className={"group flex items-center gap-1.5 px-4"}
+        onKeyDown={handleKeyboardEnter}
+        className={cn("flex items-center gap-1.5 px-4", {
+          "hover:bg-bg_hover": !isSelected,
+          "bg-bg_active": isSelected,
+        })}
         onClick={handleSingleClick}
       >
         <div className="flex items-center gap-1.5 w-full z-10">
@@ -130,13 +136,13 @@ function FileItem(props: FileItemProps) {
           </span>
         </div>
 
-        <div
+        {/* <div
           className={cn("h-18px bg-transparent absolute left-0", {
             "group-hover:bg-bg_hover": !isSelected,
             "bg-bg_active": isSelected,
           })}
           style={{ width: sliderWidth }}
-        ></div>
+        ></div> */}
       </div>
 
       <div className="pl-4">

src/renderer/src/main.tsx

@@ -10,6 +10,18 @@ import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 import "./index.css";
 
+monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+  target: monaco.languages.typescript.ScriptTarget.ES2020,
+  module: monaco.languages.typescript.ModuleKind.CommonJS,
+  allowJs: true,
+  jsx: monaco.languages.typescript.JsxEmit.React,
+  moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+  noEmit: true,
+});
+// monaco.languages.typescript.typescriptDefaults.addExtraLib(
+//   require("typescript/lib/tsconfig.json"),
+//   "tsconfig.json"
+// );
 window.MonacoEnvironment = {
   getWorker: function (_, label) {
     if (label === "json") {

vite.config.ts

@@ -7,7 +7,7 @@ import pkg from "./package.json";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
-  rmSync("out/far", { recursive: true, force: true });
+  rmSync("out", { recursive: true, force: true });
 
   const isServe = command === "serve";
   const isBuild = command === "build";
@@ -33,7 +33,6 @@ export default defineConfig(({ command }) => {
           entry: path.join(__dirname, "src/far/main/index.ts"),
           onstart(args) {
             if (process.env.VSCODE_DEBUG) {
-              console.log(33);
               console.log(
                 /* For `.vscode/.debug.script.mjs` */ "[startup] Electron App"
               );