feat:过多Tags显示省略号，目录100h,@作为项目路径

craco.config.js

@@ -1,5 +1,7 @@
 const CracoLessPlugin = require('craco-less');
-const HtmlWebpackPlugin=require('html-webpack-plugin')
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
 const path = require('path');
 module.exports = {
   plugins: [
@@ -21,8 +23,23 @@ module.exports = {
       // webpackConfig.output.publicPath = './';
       webpackConfig.output.path = path.join(__dirname,);
       webpackConfig.output.publicPath = "";
+      // webpackConfig.output.module
+      //     .rule("icons")
+      //     .test(/\.svg$/)
+      //     .include.add(resolve("src/icons"))
+      //     .end()
+      //     .use("svg-sprite-loader")
+      //     .loader("svg-sprite-loader")
+      //     .options({
+      //       symbolId: "icon-[name]",
+      //     })
+      //     .end()
       return webpackConfig;
     },
+    alias: {
+      // 将@/*映射为src目录
+      '@': path.resolve(__dirname, 'src/'),
+    },
   }
 
 

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions":{
+    "baseUrl":"./",
+    "paths":{
+      "@/*":[
+        "src/*"
+      ]
+    }
+  }
+}

src/App.js

@@ -33,8 +33,8 @@ function App() {
   return (
     <>
       {/* 注册路由 */}
-      {element}
-      {/*<Note/>*/}
+      {/*{element}*/}
+      <Note/>
     </>
   )
 

src/pages/Note/Hlexical/index.jsx

@@ -1,42 +1,39 @@
-import FirstTheme from "./themes/FirstTheme";
+import FirstTheme from "@/pages/Note/Hlexical/themes/FirstTheme";
 import {LexicalComposer} from "@lexical/react/LexicalComposer";
 import {RichTextPlugin} from "@lexical/react/LexicalRichTextPlugin";
 import {ContentEditable} from "@lexical/react/LexicalContentEditable";
 import {HistoryPlugin} from "@lexical/react/LexicalHistoryPlugin";
 import {AutoFocusPlugin} from "@lexical/react/LexicalAutoFocusPlugin";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
-import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import ToolbarPlugin from "@/pages/Note/Hlexical/plugins/ToolbarPlugin";
 import {MarkdownShortcutPlugin} from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import {
     TRANSFORMERS, $convertFromMarkdownString,
 } from "@lexical/markdown";
-import "./index.less"
-import {importFile} from "../../../utils/File"
+import "@/pages/Note/Hlexical/index.less"
+import {importFile} from "@/utils/File"
 
-import {isEmpty} from "../../../utils/ObjectUtils";
+import {isEmpty} from "@/utils/ObjectUtils";
 import {ListPlugin} from "@lexical/react/LexicalListPlugin";
 import {LinkPlugin} from "@lexical/react/LexicalLinkPlugin";
-import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
-import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
-import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
-import ImportFilePlugin from "./plugins/ImportFilePlugin";
-
-import SaveFilePlugin from "./plugins/SaveFilePlugin";
+import AutoLinkPlugin from "@/pages/Note/Hlexical/plugins/AutoLinkPlugin";
+import ListMaxIndentLevelPlugin from "@/pages/Note/Hlexical/plugins/ListMaxIndentLevelPlugin";
+import CodeHighlightPlugin from "@/pages/Note/Hlexical/plugins/CodeHighlightPlugin";
+import ImportFilePlugin from "@/pages/Note/Hlexical/plugins/ImportFilePlugin";
+import SaveFilePlugin from "@/pages/Note/Hlexical/plugins/SaveFilePlugin";
 import {TabIndentationPlugin} from "@lexical/react/LexicalTabIndentationPlugin";
-import UsefulNodes from "./nodes/UsefulNodes";
-import ImagesPlugin from "./plugins/ImagesPlugin";
-
-
+import UsefulNodes from "@/pages/Note/Hlexical/nodes/UsefulNodes";
+import ImagesPlugin from "@/pages/Note/Hlexical/plugins/ImagesPlugin";
 import {HorizontalRulePlugin} from "@lexical/react/LexicalHorizontalRulePlugin"
-import InlineImagePlugin from "./plugins/InlineImagePlugin";
+import InlineImagePlugin from "@/pages/Note/Hlexical/plugins/InlineImagePlugin";
 import {TablePlugin} from "@lexical/react/LexicalTablePlugin";
-import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
-import ExcalidrawPlugin from "./plugins/ExcalidrawPlugin";
-import TableOfContentsPlugin from "./plugins/TableOfContentsPlugin";
-import ContextMenuPlugin from "./plugins/ContextMenuPlugin"
+import TableCellActionMenuPlugin from '@/pages/Note/Hlexical/plugins/TableActionMenuPlugin';
+import ExcalidrawPlugin from "@/pages/Note/Hlexical/plugins/ExcalidrawPlugin";
+import TableOfContentsPlugin from "@/pages/Note/Hlexical/plugins/TableOfContentsPlugin";
+import ContextMenuPlugin from "@/pages/Note/Hlexical/plugins/ContextMenuPlugin"
 import {Spin} from "antd";
 import {useState} from "react";
-import DragDropPaste from "./plugins/DragDropPastePlugin";
+import DragDropPaste from "@/pages/Note/Hlexical/plugins/DragDropPastePlugin";
 function Placeholder() {
     return <div className="editor-placeholder">记录一些灵感吧</div>;
 }

src/pages/Note/Hlexical/plugins/TableOfContentsPlugin/index.less

@@ -54,7 +54,7 @@
   flex-direction: row;
   justify-content: flex-start;
   z-index: 1;
-  height: 300px;
+  height: 100vh;
 }
 
 .first-heading {
@@ -70,7 +70,7 @@
   padding: 0;
   overflow: scroll;
   width: 200px;
-  height: 220px;
+  height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
   -ms-overflow-style: none; /* IE and Edge */
@@ -85,7 +85,7 @@
 .headings::before {
   content: ' ';
   position: absolute;
-  height: 220px;
+  height: 100vh;
   width: 4px;
   right: 240px;
   margin-top: 5px;

src/pages/Note/index.jsx

@@ -2,12 +2,12 @@ import React, {useRef, useState} from 'react';
 import {
     UserOutlined,
 } from '@ant-design/icons';
-import {Layout, Avatar, Tabs, Button} from 'antd';
-import Hlexical from './Hlexical';
-import ItemTree from "../../components/ItemTree";
-import './index.less'
+import {Layout, Avatar, Tabs} from 'antd';
+import Hlexical from '@/pages/Note/Hlexical';
+import ItemTree from "@/components/ItemTree";
+import '@/pages/Note/index.less'
 import {useSelector, useDispatch} from "react-redux";
-import {addTableBarItem, removeTableBarItem, setActiveKey,editLeftTableOfContents} from "../../redux/tableBarItem_reducer"
+import {addTableBarItem, removeTableBarItem, setActiveKey,editLeftTableOfContents} from "@/redux/tableBarItem_reducer"
 
 const {Sider} = Layout;
 const Note = () => {

src/pages/Note/index.less

@@ -28,3 +28,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-operations-hidden {
+  display: none !important;
+}