Merge pull request #2 from LHRUN/feature/style

feat: change style

README.md

@@ -9,10 +9,11 @@
 
 Link: [https://songlh.top/md-editor/](https://songlh.top/md-editor/)
 
-<div align="left">
+![](https://s1.ax1x.com/2023/02/14/pST4lJP.png)
+<!-- <div align="left">
    <img src="https://s1.ax1x.com/2023/02/07/pS2MWff.png"  height=340>
    <img src="https://s1.ax1x.com/2023/02/07/pS2MRtP.png" height=340>
-</div>
+</div> -->
 
 ## Document
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "md-editor",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/fileTitleModal/index.tsx

@@ -25,6 +25,10 @@ const FileTitleModal: React.FC<IProps> = ({
       onOk={() => onOk(title)}
       onCancel={() => setIsModalOpen(false)}
       closable={false}
+      okButtonProps={{
+        style: { backgroundColor: '#000', borderColor: '#000' }
+      }}
+      bodyStyle={{ borderRadius: '16px' }}
     >
       <Input value={title} onChange={(e) => setTitle(e.target.value)} />
     </Modal>

src/components/multiFile/index.module.less

@@ -22,6 +22,11 @@
     display: inline-flex;
   }
 }
+
+.titleText {
+  word-break: break-all;
+}
+
 .titleLine {
   padding: 2px 3px;
   cursor: pointer;
@@ -42,3 +47,25 @@
     margin-right: 0px;
   }
 }
+
+:global {
+  .ant-drawer-content, .ant-drawer-wrapper-body, .ant-drawer-content-wrapper {
+    clip-path: path('M 39 -49 L 648 -53 L 646 1310 M 654 1291 L 182 1281 L 13 1272 C 137 845 -26 708 41 445 C 118 166 -26 218 59 -29');
+  }
+}
+
+
+.drawerContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: 80px;
+  position: relative;
+
+  .drawerImg {
+    transform: translateY(24px);
+    margin-top: -20px;
+    width: 253px;
+  }
+}

src/components/multiFile/index.tsx

@@ -11,6 +11,7 @@ import { useFile } from '@/context/file'
 import { ACTION_TYPE } from '@/context/file/reducer'
 import UploadIcon from '../icons/upload'
 import DownloadIcon from '../icons/download'
+import iconText from '@/assets/imgs/iconText.png'
 
 const MultiFile: React.FC = () => {
   const { file, dispatch } = useFile()
@@ -74,7 +75,7 @@ const MultiFile: React.FC = () => {
         }}
         className={styles.titleContainer}
       >
-        <span>{fileData.title}</span>
+        <span className={styles.titleText}>{fileData.title}</span>
         <span
           onClick={() => {
             setEditTitleData(fileData)
@@ -200,25 +201,33 @@ const MultiFile: React.FC = () => {
         <MultiFileIcon />
       </div>
       <Drawer
-        title="Multi File"
         placement="right"
         extra={drawerExtra}
         onClose={() => setDrawerOpen(false)}
         open={drawerOpen}
+        width={400}
+        closeIcon={''}
       >
-        <Tree
-          defaultExpandedKeys={[file.curKey]}
-          titleRender={(node) => {
-            if (!isEditor) {
-              return node.title
-            }
-            return titleRender(node)
-          }}
-          selectedKeys={[file.curKey]}
-          showLine
-          onSelect={onSelect}
-          treeData={treeData}
-        />
+        <div className={styles.drawerContainer}>
+          <Tree
+            defaultExpandedKeys={[file.curKey]}
+            titleRender={(node) => {
+              if (!isEditor) {
+                return <div className={styles.titleText}>{node.title}</div>
+              }
+              return titleRender(node)
+            }}
+            selectedKeys={[file.curKey]}
+            showLine
+            rootStyle={{
+              overflowY: 'auto',
+              flex: '1'
+            }}
+            onSelect={onSelect}
+            treeData={treeData}
+          />
+          <img className={styles.drawerImg} src={iconText} alt="" />
+        </div>
       </Drawer>
       <FileTitleModal
         isModalOpen={isTitleModalOpen}

src/views/editor/index.module.less

@@ -59,6 +59,9 @@
     outline: none;
     font-size: 15px;
     overflow: auto;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 30%;
   }
   .write {
     background-color: #fff;

src/views/editor/index.tsx

@@ -9,7 +9,7 @@ import Toolbar from '@/components/toolbar'
 import styles from './index.module.less'
 import { useFile } from '@/context/file'
 import { ACTION_TYPE } from '@/context/file/reducer'
-
+import editorbg from '@/assets/imgs/editorbg.png'
 const { Header, Content } = Layout
 
 const Editor: React.FC = () => {
@@ -75,6 +75,7 @@ const Editor: React.FC = () => {
             onInput={(e) => {
               changeMdContent((e.target as HTMLInputElement).value)
             }}
+            style={{ backgroundImage: `url(${editorbg})` }}
             onScroll={(e) => scrollHandle(e.target as HTMLInputElement)}
           ></textarea>
           <div