feat：开始最大化

.env

@@ -0,0 +1 @@
+NODE_ENV=development

craco.config.js

@@ -1,7 +1,4 @@
 const CracoLessPlugin = require('craco-less');
-function resolve(dir) {
-  return path.join(__dirname, dir);
-}
 const path = require('path');
 module.exports = {
   plugins: [
@@ -18,11 +15,17 @@ module.exports = {
     },
   ],
   webpack: {
+    entry: {
+      main: ['whatwg-fetch', './src/index.js'],
+    },
     configure: (webpackConfig, { env, paths }) => {
       // 修改output.publicPath为'./'
       // webpackConfig.output.publicPath = './';
-      webpackConfig.output.path = path.join(__dirname,"/build");
-      webpackConfig.output.publicPath = "./";
+      // webpackConfig.output.path = path.join(__dirname,"/build");
+      // webpackConfig.output.publicPath = "./";
+
+      webpackConfig.output.path = path.join(__dirname,);
+      webpackConfig.output.publicPath = "";
       // webpackConfig.output.module
       //     .rule("icons")
       //     .test(/\.svg$/)
@@ -40,7 +43,12 @@ module.exports = {
       // 将@/*映射为src目录
       '@': path.resolve(__dirname, 'src/'),
     },
-  }
-
-
+    // 确保入口文件正确
+    // entry: {
+    //   main: ['whatwg-fetch', './src/index.js'],
+    // },
+  },
+  devServer: {
+    port: 3008, // 设置端口
+  },
 };

elsrc/sync/tencent/UploadUtils.js

@@ -20,6 +20,10 @@ class UploadUtils {
         UploadUtils.staticStore = store;
     }
     getActiveFile() {
+        let persist = this.store.get("persist:tableBarItem");
+        if (persist === undefined){
+            return undefined
+        }
         let tableBarItem = JSON.parse(this.store.get("persist:tableBarItem"));
         if (!tableBarItem) {
             return;

main.js

@@ -1,4 +1,4 @@
-const {app, Menu, BrowserWindow,ipcMain,dialog} = require('electron')
+const {app, Menu, BrowserWindow,ipcMain,dialog,shell } = require('electron')
 const path = require('path')
 const {menuRebuild} = require('./elsrc/TopMenu.js')
 const UploadUtils = require("./elsrc/sync/tencent/UploadUtils")
@@ -15,21 +15,24 @@ const createWindow = () => {
             nodeIntegration: true,
             // 启用后nodeIntegration会无效
             contextIsolation: false,
+            // 添加预加载脚本
+            // __dirname   字符串指向当前正在执行脚本的路径
+            // path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。
             preload: path.join(__dirname, 'preload.js')
         }
     })
+    console.log("isDev", isDev)
     if (isDev){
         // 加载 index.html
-        win.loadURL('http://localhost:3000')
+        win.loadURL('http://localhost:3008')
         // 打开开发工具
         win.webContents.openDevTools()
     }else {
         // 加载 index.html
         win.loadFile('./index.html')
     }
-
+    win.maximize()
     // let okPush =false
-    let devToolPush = false
     win.webContents.on('before-input-event', (event, input) => {
         console.log("input.type.toLowerCase()", input)
         if (input.control && input.key.toLowerCase() === 's' && input.type.toLowerCase() === "keydown" && input.isAutoRepeat === false) {
@@ -40,7 +43,7 @@ const createWindow = () => {
             event.preventDefault()
         }
         // console.log('Pressed ',input.key)
-        if (input.key.toUpperCase() === 'F5' && input.type.toLowerCase() === "keydown" && input.isAutoRepeat === false) {
+        if (input.key.toUpperCase() === 'F5' && input.isAutoRepeat === false) {
             win.reload()
         }
         if (input.key.toUpperCase() === 'F12' && input.type.toLowerCase() === "keydown" && input.isAutoRepeat === false) {
@@ -90,6 +93,12 @@ app.whenReady().then(() => {
         console.log("electronStoreDelete")
         return store.delete(args)
     })
+    ipcMain.handle("showOpenDialog",(listen,args)=>{
+        console.log("showOpenDialog:"+args)
+        // return dialog.showOpenDialog({defaultPath:args.filePath,
+        //     properties: ['openFile']} )
+        return shell.openPath(args)
+    })
     console.log("配置文件地址",app.getPath('userData')+"/config.json")
     console.log("操作系统:"+process.platform)
 })

package.json

@@ -1,14 +1,14 @@
 {
-  "name": "my-electron-app",
+  "name": "assistant-note",
   "version": "1.0.0",
-  "description": "Hello World!",
+  "description": "note",
   "main": "main.js",
   "author": "hua",
   "license": "MIT",
-  "dependencies": {
+  "devDependencies": {
     "@ant-design/icons": "^5.3.7",
     "@ant-design/pro-components": "^2.3.57",
-    "@craco/craco": "^6.0.0",
+    "@craco/craco": "^6.4.5",
     "@electron-forge/cli": "^6.0.4",
     "@electron-forge/maker-deb": "^6.0.4",
     "@electron-forge/maker-rpm": "^6.0.4",
@@ -54,10 +54,10 @@
     "yjs": ">=13.5.42"
   },
   "scripts": {
-    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\"",
+    "dev": "concurrently \"wait-on --log http://127.0.0.1:3008 && electron .\" \"cross-env BROWSER=none npm start\"",
     "start": "craco start --verbose",
     "build": "craco build",
-    "startel": "electron .",
+    "startel": "set NODE_ENV=development&&electron .",
     "package": "electron-forge package",
     "make": "electron-forge make"
   },

preload.js

@@ -1,3 +1,4 @@
+// 通过预加载脚本从渲染器访问Node.js
 // 预加载脚本 在上下文隔离渲染器进程中导入 Node.js 和 Electron 模块的概念
 // 所有的 Node.js API接口 都可以在 preload 进程中被调用.
 // 它拥有与Chrome扩展一样的沙盒。

public/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <!-- %PUBLIC_URL% public 文件夹 -->
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="favicon.ico" />
   <!-- 移动端网页适配 -->
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <!-- 配置浏览器页签+地址颜色,仅适用于android -->
@@ -15,11 +15,7 @@
   <!-- 应用加壳 -->
   <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
   <title>Note</title>
-  <!--[if IE]>
-<script src="js/html5.js"></script>
-  <![endif]-->
-  <script src="index.jsx"></script>
-
+<!--  <script src="index.jsx"></script>-->
 </head>
 
 <body>

src/App.js

@@ -1,4 +1,4 @@
-import React, {useId} from 'react';
+import React, {Fragment, useId} from 'react';
 import routes from './routes'
 import {Outlet, useNavigate, useRoutes} from 'react-router-dom'
 import useIpcRenderer from '../src/utils/useIpcRenderer'
@@ -31,11 +31,11 @@ function App() {
   useIpcRenderer({'openDirectory':addNewDir})
   // useIpcRenderer({'pushHotkeys':pushHotkeysAction})
   return (
-    <>
+    <Fragment>
       {/* 注册路由 */}
       {/*{element}*/}
       <Note/>
-    </>
+    </Fragment>
   )
 
 }

src/components/ItemTree/index.jsx

@@ -166,6 +166,7 @@ const ItemTree = (prop) => {
     const [defaultValueState, setDefaultValueState] = useState(flushTree(prop.filePath));
     generateList(defaultValueState);
     const [state, setState] = useState();
+    const [inFrame, setInFrame] = useState(true);
     useEffect(() => {
         setDefaultValueState(flushTree(prop.filePath))
     }, [prop]);
@@ -294,7 +295,18 @@ const ItemTree = (prop) => {
         });
     }
     const getNodeTreeRightClickMenu = () => {
-        console.log("state", state, isEmpty(state))
+        useEffect(() => {
+            const handleKeyDown = (event) => {
+                if (!inFrame) {
+                    event.preventDefault(); // 阻止默认行为
+                    setState("");
+                }
+            };
+            document.addEventListener('click', handleKeyDown);
+            return () => {
+                document.removeEventListener('click', handleKeyDown);
+            };
+        });
         if (isEmpty(state)) {
             return
         }
@@ -321,6 +333,7 @@ const ItemTree = (prop) => {
             menuItem.push(getMenuItem('6',<DirDeleteFile filePath={key} />))
         }
         menuItem.push(getMenuItem('7',<OpenInDir filePath={key} />))
+
         return <Fragment>
             {createPortal(
                 <Menu style={tmpStyle}  onClick={e =>
@@ -328,7 +341,18 @@ const ItemTree = (prop) => {
                                 console.log('onClick',e)
                             }
                         }
-                      onMouseLeave={e => {setState("");}}
+                      // 鼠标离开
+                      onMouseLeave={e => {
+                          console.log('onMouseLeave',e)
+                          // setState("");
+                          setInFrame(false)
+                      }}
+                      // 鼠标进入
+                      onMouseEnter={e => {
+                          console.log('onMouseEnter',e)
+                          // setState("");
+                          setInFrame(true)
+                      }}
                       items={menuItem}>
                 </Menu>,
                 document.body

src/components/ItemTree/index.less

@@ -1,6 +1,6 @@
 @import '~antd/dist/reset.css';
 .ant-tree{
-  overflow: auto scroll;
+  overflow: auto;
   height: 95.7%;
 }
 .ant-tree-node-content-wrapper {

src/index.js

@@ -8,7 +8,7 @@ import { BrowserRouter } from 'react-router-dom';
 import {PersistGate} from "redux-persist/integration/react";
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  // <React.StrictMode>
+  <React.StrictMode>
     <Provider store={store}>
         <PersistGate loading={null} persistor={persistor}>
           <BrowserRouter>
@@ -16,5 +16,5 @@ root.render(
           </BrowserRouter>
         </PersistGate>
     </Provider>
-  // </React.StrictMode>
+  </React.StrictMode>
 );

src/pages/Note/Hlexical/index.jsx

@@ -11,6 +11,7 @@ import {
     TRANSFORMERS, $convertFromMarkdownString,
 } from "@lexical/markdown";
 import "@/pages/Note/Hlexical/index.less"
+import "@/pages/Note/Hlexical/theme.less"
 import {importFile} from "@/utils/File"
 
 import {isEmpty} from "@/utils/ObjectUtils";
@@ -36,6 +37,7 @@ import { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';
 import {useState} from "react";
 import DragDropPaste from "@/pages/Note/Hlexical/plugins/DragDropPastePlugin";
 import TreeViewPlugin from "@/pages/Note/Hlexical/plugins/TreeViewPlugin";
+
 function Placeholder() {
     return <div className="editor-placeholder">记录一些灵感吧</div>;
 }
@@ -57,25 +59,29 @@ export default function Hlexical(props) {
                 setSpinningState(false)
                 return
             }
-            editorConfig={...editorConfig,editorState: () => $convertFromMarkdownString(value.toString(), TRANSFORMERS)}
+            editorConfig = {
+                ...editorConfig,
+                editorState: () => $convertFromMarkdownString(value.toString(), TRANSFORMERS)
+            }
             setSpinningState(false)
         }).catch(error =>
             console.error(error)
         )
     }
     return (
-
+        // <Spin size="large" fullscreen="ture" spinning={spinningState}>
             <LexicalComposer initialConfig={editorConfig}>
                 <div className="editor-container">
                     {/* 富文本插件 */}
                     <ToolbarPlugin/>
                     <div className="editor-inner">
-                    <Spin size="large" fullscreen="ture" spinning={spinningState}>
+
                         <RichTextPlugin
                             contentEditable={<ContentEditable className="editor-input"/>}
                             placeholder={<Placeholder/>}
                             ErrorBoundary={LexicalErrorBoundary}
-                    />    </Spin>
+                        />
+
                         <HistoryPlugin/>
                         {/*黑窗口动态记录当前操作*/}
                         {/*<TreeViewPlugin/>*/}
@@ -121,15 +127,13 @@ export default function Hlexical(props) {
                             style={{
                                 right: 94,
                             }}
-                        icon={<CustomerServiceOutlined />}
-                    >
+                            icon={<CustomerServiceOutlined/>}>
                             <FloatButton/>
                             <FloatButton icon={<CommentOutlined/>}/>
                         </FloatButton.Group>
                     </div>
                 </div>
-
             </LexicalComposer>
-
+        // </Spin>
     );
 }

src/pages/Note/Hlexical/index.less

@@ -55,16 +55,11 @@ h1 {
   border-top-right-radius: 10px;
   height: 100%;
 }
-
-.toolbar {
-  height: 4.9%;
-  margin-bottom: 0.1%
-}
-
 .editor-inner {
   background: #fff;
   position: relative;
-  height: 95%;
+  margin:20px;
+  height: 90%;
   overflow: hidden auto;
 }
 
@@ -93,38 +88,6 @@ h1 {
   pointer-events: none;
 }
 
-.editor-text-bold {
-  font-weight: bold;
-}
-
-.editor-text-italic {
-  font-style: italic;
-}
-
-.editor-text-underline {
-  text-decoration: underline;
-}
-
-.editor-text-strikethrough {
-  text-decoration: line-through;
-}
-
-.editor-text-underlineStrikethrough {
-  text-decoration: underline line-through;
-}
-
-.editor-text-code {
-  background-color: rgb(240, 242, 245);
-  padding: 1px 0.25rem;
-  font-family: Menlo, Consolas, Monaco, monospace;
-  font-size: 94%;
-}
-
-.editor-link {
-  color: rgb(33, 111, 219);
-  text-decoration: none;
-}
-
 .tree-view-output {
   display: block;
   background: #222;
@@ -141,177 +104,6 @@ h1 {
   line-height: 14px;
 }
 
-.editor-code {
-  background-color: rgb(240, 242, 245);
-  font-family: Menlo, Consolas, Monaco, monospace;
-  display: block;
-  padding: 8px 8px 8px 52px;
-  line-height: 1.53;
-  font-size: 13px;
-  margin: 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  tab-size: 2;
-  white-space: pre;
-  overflow: auto;
-  position: relative;
-}
-
-.editor-code:before {
-  content: attr(data-gutter);
-  position: absolute;
-  background-color: #eee;
-  left: 0;
-  top: 0;
-  border-right: 1px solid #ccc;
-  padding: 8px;
-  color: #777;
-  white-space: pre-wrap;
-  text-align: right;
-  min-width: 25px;
-}
-
-.editor-code:after {
-  content: attr(data-highlight-language);
-  top: 0;
-  right: 3px;
-  padding: 3px;
-  font-size: 10px;
-  text-transform: uppercase;
-  position: absolute;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.editor-tokenComment {
-  color: slategray;
-}
-
-.editor-tokenPunctuation {
-  color: #999;
-}
-
-.editor-tokenProperty {
-  color: #905;
-}
-
-.editor-tokenSelector {
-  color: #690;
-}
-
-.editor-tokenOperator {
-  color: #9a6e3a;
-}
-
-.editor-tokenAttr {
-  color: #07a;
-}
-
-.editor-tokenVariable {
-  color: #e90;
-}
-
-.editor-tokenFunction {
-  color: #dd4a68;
-}
-
-.editor-paragraph {
-  margin: 0;
-  margin-bottom: 8px;
-  position: relative;
-}
-
-.editor-paragraph:last-child {
-  margin-bottom: 0;
-}
-
-.editor-heading-h1 {
-  font-size: 50px;
-  color: rgb(5, 5, 5);
-  font-weight: 400;
-  margin: 0;
-  margin-bottom: 25px;
-  padding: 0;
-}
-
-.editor-heading-h2 {
-  font-size: 45px;
-  //color: rgb(101, 103, 107);
-  //font-weight: 400;
-  color: rgb(5, 5, 5);
-  font-weight: 400;
-  margin: 0;
-  margin-top: 25px;
-  padding: 0;
-  //text-transform: uppercase;
-}
-.editor-heading-h3 {
-  font-size: 40px;
-  color: rgb(5, 5, 5);
-  font-weight: 400;
-  margin: 0;
-  margin-top: 20px;
-  padding: 0;
-  //text-transform: uppercase;
-}
-.editor-heading-h4 {
-  font-size: 35px;
-  color: rgb(5, 5, 5);
-  font-weight: 400;
-  margin: 0;
-  margin-top: 20px;
-  padding: 0;
-  //text-transform: uppercase;
-}
-.editor-heading-h5 {
-  font-size: 30px;
-  color: rgb(5, 5, 5);
-  font-weight: 400;
-  margin: 0;
-  margin-top: 15px;
-  padding: 0;
-  //text-transform: uppercase;
-}
-.editor-heading-h6 {
-  font-size: 25px;
-  color: rgb(5, 5, 5);
-  font-weight: 400;
-  margin: 0;
-  margin-top: 15px;
-  padding: 0;
-  //text-transform: uppercase;
-}
-
-.editor-quote {
-  margin: 0;
-  margin-left: 20px;
-  font-size: 15px;
-  color: rgb(101, 103, 107);
-  border-left-color: rgb(206, 208, 212);
-  border-left-width: 4px;
-  border-left-style: solid;
-  padding-left: 16px;
-}
-
-.editor-list-ol {
-  padding: 0;
-  margin: 0;
-  margin-left: 16px;
-}
-
-.editor-list-ul {
-  padding: 0;
-  margin: 0;
-  margin-left: 16px;
-}
-
-.editor-listitem {
-  margin: 8px 32px 8px 32px;
-}
-
-.editor-nested-listitem {
-  list-style-type: none;
-}
-
 pre::-webkit-scrollbar {
   background: transparent;
   width: 10px;
@@ -389,6 +181,9 @@ pre::-webkit-scrollbar-thumb {
 }
 
 .toolbar {
+  margin-left: 20px;
+  margin-right: 20px;
+  height: 46px;
   display: flex;
   margin-bottom: 1px;
   background: #fff;
@@ -814,143 +609,6 @@ i.justify-align {
   background-image: url(images/icons/justify.svg);
 }
 
-.editor-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow-y: scroll;
-  overflow-x: scroll;
-  table-layout: fixed;
-  width: max-content;
-  margin: 30px 0;
-}
-
-.editor-tableSelection *::selection {
-  background-color: transparent;
-}
-
-.editor-tableSelected {
-  outline: 2px solid rgb(60, 132, 244);
-}
-
-.editor-tableCell {
-  border: 1px solid #bbb;
-  width: 75px;
-  min-width: 75px;
-  vertical-align: top;
-  text-align: start;
-  padding: 6px 8px;
-  position: relative;
-  outline: none;
-}
-
-.editor-tableCellSortedIndicator {
-  display: block;
-  opacity: 0.5;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  background-color: #999;
-}
-
-.editor-tableCellResizer {
-  position: absolute;
-  right: -4px;
-  height: 100%;
-  width: 8px;
-  cursor: ew-resize;
-  z-index: 10;
-  top: 0;
-}
-
-.editor-tableCellHeader {
-  background-color: #f2f3f5;
-  text-align: start;
-}
-
-.editor-tableCellSelected {
-  background-color: #c9dbf0;
-}
-
-.editor-tableCellPrimarySelected {
-  border: 2px solid rgb(60, 132, 244);
-  display: block;
-  height: calc(100% - 2px);
-  position: absolute;
-  width: calc(100% - 2px);
-  left: -1px;
-  top: -1px;
-  z-index: 2;
-}
-
-.editor-tableCellEditing {
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-  border-radius: 3px;
-}
-
-.editor-tableAddColumns {
-  position: absolute;
-  top: 0;
-  width: 20px;
-  background-color: #eee;
-  height: 100%;
-  right: -25px;
-  animation: table-controls 0.2s ease;
-  border: 0;
-  cursor: pointer;
-}
-
-.editor-tableAddColumns:after {
-  background-image: url(images/icons/plus.svg);
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  display: block;
-  content: ' ';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.4;
-}
-
-.editor-tableAddColumns:hover {
-  background-color: #c9dbf0;
-}
-
-.editor-tableAddRows {
-  position: absolute;
-  bottom: -25px;
-  width: calc(100% - 25px);
-  background-color: #eee;
-  height: 20px;
-  left: 0;
-  animation: table-controls 0.2s ease;
-  border: 0;
-  cursor: pointer;
-}
-
-.editor-tableAddRows:after {
-  background-image: url(images/icons/plus.svg);
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  display: block;
-  content: ' ';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.4;
-}
-
-.editor-tableAddRows:hover {
-  background-color: #c9dbf0;
-}
-
 @keyframes table-controls {
   0% {
     opacity: 0;
@@ -960,37 +618,4 @@ i.justify-align {
   }
 }
 
-.editor-tableCellResizeRuler {
-  display: block;
-  position: absolute;
-  width: 1px;
-  background-color: rgb(60, 132, 244);
-  height: 100%;
-  top: 0;
-}
-
-.editor-tableCellActionButtonContainer {
-  display: block;
-  right: 5px;
-  top: 6px;
-  position: absolute;
-  z-index: 4;
-  width: 20px;
-  height: 20px;
-}
-
-.editor-tableCellActionButton {
-  background-color: #eee;
-  display: block;
-  border: 0;
-  border-radius: 20px;
-  width: 20px;
-  height: 20px;
-  color: #222;
-  cursor: pointer;
-}
-
-.editor-tableCellActionButton:hover {
-  background-color: #ddd;
-}
 

src/pages/Note/Hlexical/plugins/SaveFilePlugin.js

@@ -1,17 +1,18 @@
 import {useLexicalComposerContext} from "@lexical/react/LexicalComposerContext";
-import {Fragment, useEffect, useState} from "react";
+import {useEffect, useState} from "react";
 import {importFile, overWriteFile, saveFileWithName} from "../../../../utils/File";
 import {isEmpty} from "../../../../utils/ObjectUtils";
-import {CLEAR_HISTORY_COMMAND} from "lexical";
-import {TRANSFORMERS, $convertFromMarkdownString, $convertToMarkdownString,} from "@lexical/markdown";
+import {TRANSFORMERS, $convertToMarkdownString,} from "@lexical/markdown";
 import {getFileExtByPath, getFileFullNameByPath, getFileNameByPath} from "../../../../utils/PathOperate";
 import {updatedSavedFile} from "../../../../redux/tableBarItem_reducer";
 import {useDispatch, useSelector} from "react-redux";
 import md5 from "md5"
 import {message} from "antd";
+
 const {ipcRenderer} = window.require('electron')
 import "./ToobarPlugin.less"
 import {newFileAdd, updateFileMd5} from "../../../../redux/dirMessage_reducer";
+
 const SaveFilePlugin = (props) => {
     let activeKey = useSelector(state => state.tableBarItem.activeKey);
     const dispatch = useDispatch();
@@ -43,7 +44,7 @@ const SaveFilePlugin=(props)=> {
             console.log("文件不同", filePath, activeKey)
             return;
         }
-    console.log("触发保存filePath:", filePath)
+        console.log("触发保存filePath:", editorState,filePath)
         if (isEmpty(editorState)) {
             return
         }
@@ -71,8 +72,10 @@ const SaveFilePlugin=(props)=> {
                     // 修改当前文件名
                     dispatch(updatedSavedFile({filePath: filePath}))
                     // 文件目录更新
-          dispatch(newFileAdd({fileName:getFileFullNameByPath(filePath),dirFlag:false,children:[],filePath: filePath,
-          fileId:filePath,fileMd5:md5(resultSave)}))
+                    dispatch(newFileAdd({
+                        fileName: getFileFullNameByPath(filePath), dirFlag: false, children: [], filePath: filePath,
+                        fileId: filePath, fileMd5: md5(resultSave)
+                    }))
                 }
             })
             return

src/pages/Note/Hlexical/theme.less

@@ -0,0 +1,371 @@
+.editor-text-bold {
+  font-weight: bold;
+}
+
+.editor-text-italic {
+  font-style: italic;
+}
+
+.editor-text-underline {
+  text-decoration: underline;
+}
+
+.editor-text-strikethrough {
+  text-decoration: line-through;
+}
+
+.editor-text-underlineStrikethrough {
+  text-decoration: underline line-through;
+}
+
+.editor-text-code {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
+
+.editor-link {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+}
+
+.editor-code {
+  background-color: rgb(240, 242, 245);
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  tab-size: 2;
+  white-space: pre;
+  overflow: auto;
+  position: relative;
+}
+
+.editor-code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: #eee;
+  left: 0;
+  top: 0;
+  border-right: 1px solid #ccc;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+
+.editor-code:after {
+  content: attr(data-highlight-language);
+  top: 0;
+  right: 3px;
+  padding: 3px;
+  font-size: 10px;
+  text-transform: uppercase;
+  position: absolute;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.editor-tokenComment {
+  color: slategray;
+}
+
+.editor-tokenPunctuation {
+  color: #999;
+}
+
+.editor-tokenProperty {
+  color: #905;
+}
+
+.editor-tokenSelector {
+  color: #690;
+}
+
+.editor-tokenOperator {
+  color: #9a6e3a;
+}
+
+.editor-tokenAttr {
+  color: #07a;
+}
+
+.editor-tokenVariable {
+  color: #e90;
+}
+
+.editor-tokenFunction {
+  color: #dd4a68;
+}
+
+.editor-paragraph {
+  margin: 0;
+  margin-bottom: 8px;
+  position: relative;
+}
+
+.editor-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.editor-heading-h1 {
+  //font-size: 50px;
+  //color: rgb(5, 5, 5);
+  //font-weight: 400;
+  //margin: 0;
+  //margin-bottom: 25px;
+  //padding: 0;
+}
+
+.editor-heading-h2 {
+  //font-size: 45px;
+  //color: rgb(101, 103, 107);
+  //font-weight: 400;
+  //color: rgb(5, 5, 5);
+  //font-weight: 400;
+  //margin: 0;
+  //margin-top: 25px;
+  //padding: 0;
+  //text-transform: uppercase;
+}
+.editor-heading-h3 {
+  //font-size: 40px;
+  //color: rgb(5, 5, 5);
+  //font-weight: 400;
+  //margin: 0;
+  //margin-top: 20px;
+  //padding: 0;
+  //text-transform: uppercase;
+}
+.editor-heading-h4 {
+  //font-size: 35px;
+  //color: rgb(5, 5, 5);
+  //font-weight: 400;
+  //margin: 0;
+  //margin-top: 20px;
+  //padding: 0;
+  //text-transform: uppercase;
+}
+.editor-heading-h5 {
+  //font-size: 30px;
+  //color: rgb(5, 5, 5);
+  //font-weight: 400;
+  //margin: 0;
+  //margin-top: 15px;
+  //padding: 0;
+  //text-transform: uppercase;
+}
+.editor-heading-h6 {
+  //font-size: 25px;
+  //color: rgb(5, 5, 5);
+  //font-weight: 400;
+  //margin: 0;
+  //margin-top: 15px;
+  //padding: 0;
+  //text-transform: uppercase;
+}
+
+.editor-quote {
+  margin: 0;
+  margin-left: 20px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
+}
+
+.editor-list-ol {
+  padding: 0;
+  margin: 0;
+  margin-left: 16px;
+}
+
+.editor-list-ul {
+  padding: 0;
+  margin: 0;
+  margin-left: 16px;
+}
+
+.editor-listitem {
+  margin: 8px 32px 8px 32px;
+}
+
+.editor-nested-listitem {
+  list-style-type: none;
+}
+.editor-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-y: scroll;
+  overflow-x: scroll;
+  table-layout: fixed;
+  width: max-content;
+  margin: 30px 0;
+}
+
+.editor-tableSelection *::selection {
+  background-color: transparent;
+}
+
+.editor-tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+
+.editor-tableCell {
+  border: 1px solid #bbb;
+  width: 75px;
+  min-width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  outline: none;
+}
+
+.editor-tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #999;
+}
+
+.editor-tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+
+.editor-tableCellHeader {
+  background-color: #f2f3f5;
+  text-align: start;
+}
+
+.editor-tableCellSelected {
+  background-color: #c9dbf0;
+}
+
+.editor-tableCellPrimarySelected {
+  border: 2px solid rgb(60, 132, 244);
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+
+.editor-tableCellEditing {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+}
+
+.editor-tableAddColumns {
+  position: absolute;
+  top: 0;
+  width: 20px;
+  background-color: #eee;
+  height: 100%;
+  right: -25px;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+
+.editor-tableAddColumns:after {
+  background-image: url(images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+
+.editor-tableAddColumns:hover {
+  background-color: #c9dbf0;
+}
+
+.editor-tableAddRows {
+  position: absolute;
+  bottom: -25px;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  height: 20px;
+  left: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+
+.editor-tableAddRows:after {
+  background-image: url(images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+
+.editor-tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+.editor-tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+
+.editor-tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+
+.editor-tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+
+.editor-tableCellActionButton:hover {
+  background-color: #ddd;
+}

src/pages/Note/index.jsx

@@ -20,9 +20,9 @@ const Note = () => {
     const newTabIndex = useRef(0);
 
     const activeKey=useSelector(state => state.tableBarItem.activeKey);
-    const items = useSelector(state => state.tableBarItem.data)
+    const itemList = useSelector(state => state.tableBarItem.data)
     let filePath = useSelector(state => state.dirMessage.dirTree);
-
+    console.log("itemList",itemList)
     const itemTreeTab=[
         {
             key: '1',
@@ -84,30 +84,39 @@ const Note = () => {
 
     return (
         <Layout>
-            <Sider margin='5' collapsedWidth={0} collapsed="true">
-                <div>
-                    <Avatar size={60} src='http://localhost/20231114150555.jpg' icon={<UserOutlined/>}/>
-                </div>
-                <div>
-                    <p style={{color: colorBgContainer, 'fontSize': 60}}>上善若水</p>
-                </div>
-            </Sider>
+            {/*<Sider margin='5' collapsedWidth={0} collapsed="true">*/}
+            {/*    <div>*/}
+            {/*        <Avatar size={60} src='http://localhost/20231114150555.jpg' icon={<UserOutlined/>}/>*/}
+            {/*    </div>*/}
+            {/*    <div>*/}
+            {/*        <p style={{color: colorBgContainer, 'fontSize': 60}}>上善若水</p>*/}
+            {/*    </div>*/}
+            {/*</Sider>*/}
             <Sider trigger={null} collapsedWidth={0} width="300px" collapsible collapsed={collapsed}
-            //       style={{overflow:"auto"}}
+                  style={{overflow:"hidden"}}
             >
-                <Tabs id="itemTreeTabs" defaultActiveKey={useSelector(state => state.tableBarItem.leftTableOfContents)} items={itemTreeTab}
+                {/* 文件 标题 */}
+                <Tabs id="itemTreeTabs"
+                      defaultActiveKey={useSelector(state => state.tableBarItem.leftTableOfContents)}
+                      items={itemTreeTab}
                       onChange={onChangeLeftTableOfContents}
-                    style ={{background:"#fff"}}
+                      style ={{background:"#fff",width:'100%'}}
                 />
             </Sider>
+
                     <Layout>
                         <Tabs
+                            id="layout-note"
                             type="editable-card"
                             onChange={onChange}
                             activeKey={activeKey}
                             onEdit={onEdit}
-                    items={items.map(item=>{
-                        return {label:item.label,children: <div className="HlexicalName"><Hlexical  filePath={item.children}/></div>,key:item.key}
+                            items={itemList.map(item=>{
+                                return {
+                                    label:item.label,
+                                    children: <div className="HlexicalName"><Hlexical  filePath={item.children}/></div>,
+                                    key:item.key
+                                }
                             })}
                         />
                     </Layout>

src/pages/Note/index.less

@@ -1,3 +1,6 @@
+.ant-layout .ant-layout-has-sider .css-dev-only-do-not-override-1okl62o{
+  overflow: hidden;
+}
 .HlexicalName {
   // 顶上有标题设置100h后下面会多处一部分
   height: 100%;
@@ -10,11 +13,15 @@
   margin: 0;
   height: 100%;
 }
+#layout-note .ant-tabs-nav{
+  //width: calc(100% - 300px);
+  margin: 0px 20px;
+}
 #itemTreeTabs .ant-tabs-nav {
-  height: 6%;
+  height: 60px;
 }
 #itemTreeTabs .ant-tabs-content-holder{
-  height: 94%;
+  height: calc (100%-60px);
 }
 #itemTreeTabs .ant-tabs-tab{
   margin: 0;
@@ -28,12 +35,12 @@
 #itemTreeTabs .ant-tabs-tab-btn{
   width: 100%;
 }
-.ant-tabs-nav .ant-tabs-nav-add,
-/* 显示新增标签按钮 */
-.ant-tabs-nav-operations {
-  display: inline-block;
-}
+//.ant-tabs-nav .ant-tabs-nav-add,
+///* 显示新增标签按钮 */
+//.ant-tabs-nav-operations {
+//  display: inline-block;
+//}
 /* 隐藏触发隐藏操作按钮的样式 */
-.ant-tabs-nav-operations-hidden {
-  display: none !important;
-}
+//.ant-tabs-nav-operations-hidden {
+//  display: none !important;
+//}

src/setupProxy.js

@@ -1,15 +1,15 @@
-// const {createProxyMiddleware} = require('http-proxy-middleware')
-// module.exports=function(app){
-//     app.use(
-//         createProxyMiddleware('/ticai',{
-//             target:'http://localhost:8090/',
-//             changeOrigin:false,
-//             pathRewrite:{'^/ticai':''}
-//         }),
-//         createProxyMiddleware('/oauth',{
-//             target:'http://localhost:1112',
-//             changeOrigin:true,
-//             pathRewrite:{'^/oauth':''}
-//         })
-//     )
-// }
+const {createProxyMiddleware} = require('http-proxy-middleware')
+module.exports=function(app){
+    app.use(
+        createProxyMiddleware('/ticai',{
+            target:'http://localhost:8090/',
+            changeOrigin:false,
+            pathRewrite:{'^/ticai':''}
+        }),
+        createProxyMiddleware('/oauth',{
+            target:'http://localhost:1112',
+            changeOrigin:true,
+            pathRewrite:{'^/oauth':''}
+        })
+    )
+}

src/utils/File/index.jsx

@@ -54,5 +54,7 @@ export async function saveFileWithName(){
 }
 
 export async function openInDir(filePath){
-    return dialog.showOpenDialog({defaultPath:"filePath",properties: ['openDirectory']} )
+    // return dialog.showOpenDialog({defaultPath:filePath,properties: ['openDirectory']} )
+    console.log("pathOp.dirname(filePath.filePath)"+pathOp.dirname(filePath.filePath))
+    return ipcRenderer.invoke("showOpenDialog",pathOp.dirname(filePath.filePath))
 }