feat: Modify markdown editor style

yuanyxh · Aug 14, 2024 · 66256ef · 66256ef
1 parent a909a72
commit 66256ef
Show file tree

Hide file tree

Showing 15 changed files with 362 additions and 219 deletions.
diff --git a/src/assets/iconfont/md-editor/iconfont.css b/src/assets/iconfont/md-editor/iconfont.css
@@ -0,0 +1,96 @@
+@font-face {
+  font-family: 'iconfont'; /* Project id 4145942 */
+  /* Color fonts */
+  src:
+    url('iconfont.woff2?t=1689582142318') format('woff2'),
+    url('iconfont.woff?t=1689582142318') format('woff'),
+    url('iconfont.ttf?t=1689582142318') format('truetype');
+}
+
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dian:before {
+  content: '\e640';
+}
+
+.icon-xuanzeyixuan:before {
+  content: '\e63c';
+}
+
+.icon-danger:before {
+  content: '\e614';
+}
+
+.icon-Success:before {
+  content: '\e605';
+}
+
+.icon-warning:before {
+  content: '\e600';
+}
+
+.icon-info:before {
+  content: '\e601';
+}
+
+.icon-dingwei:before {
+  content: '\e650';
+}
+
+.icon-wenjian:before {
+  content: '\e652';
+}
+
+.icon-shuju:before {
+  content: '\e653';
+}
+
+.icon-biaoqian:before {
+  content: '\e64a';
+}
+
+.icon-biaoqing:before {
+  content: '\e64b';
+}
+
+.icon-jinggao:before {
+  content: '\e64c';
+}
+
+.icon-dianzan:before {
+  content: '\e64d';
+}
+
+.icon-xiangqing:before {
+  content: '\e64e';
+}
+
+.icon-tishi:before {
+  content: '\e64f';
+}
+
+.icon-bangzhu:before {
+  content: '\e651';
+}
+
+.icon-wenjianjia:before {
+  content: '\e652';
+}
+
+.icon-touxiang:before {
+  content: '\e626';
+}
+
+.icon-jiedian:before {
+  content: '\e649';
+}
+
+.icon-cengji:before {
+  content: '\e67f';
+}
diff --git a/src/assets/iconfont/md-editor/iconfont.ttf b/src/assets/iconfont/md-editor/iconfont.ttf
diff --git a/src/assets/iconfont/md-editor/iconfont.woff b/src/assets/iconfont/md-editor/iconfont.woff
diff --git a/src/assets/iconfont/md-editor/iconfont.woff2 b/src/assets/iconfont/md-editor/iconfont.woff2
diff --git a/src/components/Dialog/Dialog.module.less b/src/components/Dialog/Dialog.module.less
@@ -31,7 +31,7 @@
     left: 0;
     display: flex;
     width: 100%;
-    height: 30px;
+    height: 40px;
   }
 
   .header .bar {

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -198,7 +198,7 @@ const Dialog = forwardRef<IDialogExpose, Readonly<IDialogProps>>(function Dialog
 
     return (
       <>
-        <div aria-hidden style={{ width: '100%', height: 30 }}></div>
+        <div aria-hidden style={{ width: '100%', height: 40 }}></div>
         <header className={styles.header}>
           <div
             className={styles.bar}

diff --git a/src/filehandle/components/FileSideMenu.tsx b/src/filehandle/components/FileSideMenu.tsx
@@ -260,12 +260,18 @@ function Menu({
                 }
               >
                 {item.type === FileType.DIRECTORY ? (
-                  <Icon
-                    className={classNames(styles.directoryIcon, {
-                      [styles.expand]: expands.includes(item.id)
-                    })}
-                    icon="material-symbols:keyboard-arrow-right"
-                  />
+                  <>
+                    <Icon
+                      className={classNames(styles.directoryIcon, {
+                        [styles.expand]: expands.includes(item.id)
+                      })}
+                      icon="material-symbols:keyboard-arrow-right"
+                    />
+                    <Icon
+                      className={classNames(styles.directoryIcon)}
+                      icon="material-symbols-light:folder"
+                    />
+                  </>
                 ) : null}
 
                 <span>{item.name}</span>

diff --git a/src/filehandle/components/styles/FileSideMenu.module.less b/src/filehandle/components/styles/FileSideMenu.module.less
@@ -32,11 +32,11 @@
     user-select: none;
 
     span {
-      margin-left: 8px;
+      margin-left: 18px;
     }
 
     .directoryIcon + span {
-      margin-left: 0;
+      margin-left: 3px;
     }
 
     > .list {
@@ -63,6 +63,7 @@
   }
 
   .list .item .row {
+    padding-block: 2px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

diff --git a/src/filehandle/md_editor/component/MDContent.tsx b/src/filehandle/md_editor/component/MDContent.tsx
@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'react';
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 
 import { addGlobalListener, confirm, error } from '@/utils';
@@ -11,7 +12,7 @@ import type { IMDEditorExpose } from './MDEditor';
 import MDEditor from './MDEditor';
 import styles from './styles/MDContent.module.less';
 
-interface IMDContentProps {
+interface IMDContentProps extends HTMLAttributes<HTMLDivElement> {
   handle: DH | FH;
   update(): void;
 }
@@ -22,7 +23,7 @@ export interface IMDContentExpose {
 
 export const MDContent = forwardRef<IMDContentExpose, IMDContentProps>(
   function MDContent(props, ref) {
-    const { handle, update } = props;
+    const { handle, update, ...rest } = props;
 
     const [changed, setChanged] = useState(false);
     const [currentHandle, setCurrentHandle] = useState<FH | null>(null);
@@ -127,7 +128,7 @@ export const MDContent = forwardRef<IMDContentExpose, IMDContentProps>(
     };
 
     return (
-      <div className={styles.content}>
+      <div className={styles.content} {...rest}>
         {isDirectoryHandle(handle) ? (
           <FileSideMenu
             handle={handle}
@@ -140,13 +141,20 @@ export const MDContent = forwardRef<IMDContentExpose, IMDContentProps>(
         ) : null}
 
         <div className={styles.mdEditor}>
-          <MDEditor
-            ref={editorRef}
-            currentHandle={currentHandle}
-            changed={changed}
-            onChanged={handleSetChanged}
-            onSave={handleSave}
-          />
+          <div className={styles.editStatus}>
+            {currentHandle?.name}
+            {changed ? <span className={styles.changed}> - 已编辑</span> : null}
+          </div>
+
+          <div className={styles.editorWrapper}>
+            <MDEditor
+              ref={editorRef}
+              currentHandle={currentHandle}
+              changed={changed}
+              onChanged={handleSetChanged}
+              onSave={handleSave}
+            />
+          </div>
         </div>
       </div>
     );

diff --git a/src/filehandle/md_editor/component/MDHandle.tsx b/src/filehandle/md_editor/component/MDHandle.tsx
@@ -177,7 +177,12 @@ const MDHandle: React.FC<IMDHandle> = (props) => {
       onMinimize={handleMinimize}
       onClose={onClose}
     >
-      <MDContent ref={mdContentRef} handle={handle} update={update} />
+      <MDContent
+        style={{ borderTop: '1px solid var(--border-color-primary)' }}
+        ref={mdContentRef}
+        handle={handle}
+        update={update}
+      />
     </Dialog>
   );
 };

diff --git a/src/filehandle/md_editor/component/styles/MDContent.module.less b/src/filehandle/md_editor/component/styles/MDContent.module.less
@@ -7,8 +7,35 @@
 }
 
 .mdEditor {
+  position: relative;
+  padding: 0 50px 30px;
   flex: 1;
   height: 100%;
-  padding: 30px;
   overflow-y: auto;
+  background-color: rgb(199, 229, 252);
+}
+
+.editStatus {
+  position: sticky;
+  top: 0;
+  height: 45px;
+  background-color: rgb(199, 229, 252);
+  text-align: center;
+  line-height: 45px;
+  font-weight: 700;
+  z-index: var(--z-normal);
+}
+
+.changed {
+  color: var(--color-info);
+}
+
+.editorWrapper {
+  margin: 4px auto;
+  max-width: 1140px;
+  padding: 30px;
+  background-color: #fff;
+  min-height: 100%;
+  border-radius: var(--border-radius-base);
+  box-shadow: 0 0 1px 4px #495060;
 }
diff --git a/src/filehandle/md_editor/component/styles/MDEditor.module.less b/src/filehandle/md_editor/component/styles/MDEditor.module.less
@@ -1,3 +1,5 @@
+@import url('@/assets/iconfont/md-editor/iconfont.css');
+
 .editorContainer {
   :global(.milkdown) {
     height: 100%;
@@ -47,17 +49,21 @@
   h5,
   h6 {
     margin-bottom: 1em;
+    width: max-content;
     font-weight: 600;
   }
 
   h1 {
+    width: 100%;
     font-size: 38px;
     line-height: 1.21;
+    text-align: center;
   }
 
   h2 {
     font-size: 30px;
     line-height: 1.266;
+    border-bottom: 3px solid #fe5f58;
   }
 
   h3 {
@@ -102,6 +108,25 @@
     }
   }
 
+  h1::before {
+    margin-right: 3px;
+    font-family: 'iconfont';
+    content: '\e626';
+    vertical-align: middle;
+  }
+
+  h2::before {
+    margin-right: 3px;
+    content: '#';
+    color: #fe5f58;
+  }
+
+  h3::before {
+    margin-right: 8px;
+    font-family: 'iconfont';
+    content: '\e67f';
+  }
+
   strong {
     font-weight: 600;
   }
@@ -188,7 +213,7 @@
   }
 
   ul {
-    list-style: initial;
+    list-style: none;
   }
 
   // li[data-checked='false']::before {
@@ -199,6 +224,26 @@
   //   content: 'done';
   // }
 
+  li {
+    position: relative;
+  }
+
+  li::before {
+    position: absolute;
+    top: 8px;
+    left: -20px;
+    display: inline-block;
+    content: '';
+    width: 8px;
+    height: 8px;
+    text-align: center;
+    vertical-align: middle;
+    color: #000;
+    background-color: #fff;
+    border: 2px solid #fe5f58;
+    border-radius: 50%;
+  }
+
   pre {
     position: relative;
     z-index: var(--z-ignore);
@@ -238,9 +283,12 @@
   }
 
   img {
+    margin: 0 auto;
     display: block;
-    max-width: 598px;
-    text-align: center;
+    max-width: 720px;
+    height: auto;
+    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.18);
+    object-fit: cover;
   }
 
   a {