fix: fix style

packages/client/src/components/document/card/index.tsx

@@ -49,7 +49,14 @@ export const DocumentCard: React.FC<{ document: IDocument }> = ({ document }) =>
             </div>
           </header>
           <main>
-            <div style={{ marginBottom: 12 }}>
+            <div
+              style={{
+                marginBottom: 12,
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+              }}
+            >
               <Text strong>{document.title}</Text>
             </div>
             <div>

packages/client/src/components/document/editor/index.tsx

@@ -14,6 +14,7 @@ import {
 import { IconChevronLeft, IconArticle } from '@douyinfe/semi-icons';
 import { useUser } from 'data/user';
 import { useDocumentDetail } from 'data/document';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { Seo } from 'components/seo';
 import { Theme } from 'components/theme';
 import { DataRender } from 'components/data-render';
@@ -34,7 +35,7 @@ interface IProps {
 
 export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
   if (!documentId) return null;
-
+  const { width: windowWith } = useWindowSize();
   const { width, fontSize } = useDocumentStyle();
   const editorWrapClassNames = useMemo(() => {
     return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@@ -70,7 +71,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
           />
         }
         normalContent={() => (
-          <Text ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
+          <Text ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWith / 4) }}>
             {document.title}
           </Text>
         )}

packages/client/src/components/document/reader/index.tsx

@@ -21,6 +21,7 @@ import { DocumentCollaboration } from 'components/document/collaboration';
 import { DocumentStyle } from 'components/document/style';
 import { CommentEditor } from 'components/document/comments';
 import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { useUser } from 'data/user';
 import { useDocumentDetail } from 'data/document';
 import { DocumentSkeleton } from 'components/tiptap';
@@ -37,6 +38,7 @@ interface IProps {
 
 export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
   if (!documentId) return null;
+  const { width: windowWidth } = useWindowSize();
   const { width, fontSize } = useDocumentStyle();
   const editorWrapClassNames = useMemo(() => {
     return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@@ -73,7 +75,11 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                 />
               }
               normalContent={() => (
-                <Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
+                <Text
+                  strong
+                  ellipsis={{ showTooltip: true }}
+                  style={{ width: ~~(windowWidth / 4) }}
+                >
                   {document.title}
                 </Text>
               )}

packages/client/src/components/document/reader/public/index.tsx

@@ -20,6 +20,7 @@ import { DocumentStyle } from 'components/document/style';
 import { User } from 'components/user';
 import { Theme } from 'components/theme';
 import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { usePublicDocument } from 'data/document';
 import { DocumentSkeleton } from 'components/tiptap';
 import { DocumentContent } from '../content';
@@ -38,7 +39,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
   if (!documentId) return null;
 
   const { data, loading, error, query } = usePublicDocument(documentId);
-
+  const { width: windowWidth } = useWindowSize();
   const { width, fontSize } = useDocumentStyle();
   const editorWrapClassNames = useMemo(() => {
     return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@@ -105,7 +106,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
               />
             }
             normalContent={() => (
-              <Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
+              <Text strong ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWidth / 4) }}>
                 {data.title}
               </Text>
             )}

packages/client/src/components/logo/index.module.scss

@@ -14,3 +14,9 @@
     margin-left: 4px;
   }
 }
+
+@media (max-width: 830px) {
+  .wrap {
+    display: none !important;
+  }
+}

packages/client/src/components/template/card/index.tsx

@@ -72,7 +72,14 @@ export const TemplateCard: React.FC<IProps> = ({
           </div>
         </header>
         <main>
-          <div style={{ marginBottom: 12 }}>
+          <div
+            style={{
+              marginBottom: 12,
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+            }}
+          >
             <Text strong>{template.title}</Text>
           </div>
           <div>

packages/client/src/components/template/editor/editor.tsx

@@ -30,6 +30,7 @@ import { DataRender } from 'components/data-render';
 import { User } from 'components/user';
 import { DocumentStyle } from 'components/document/style';
 import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { safeJSONParse } from 'helpers/json';
 import styles from './index.module.scss';
 
@@ -53,7 +54,7 @@ export const Editor: React.FC<IProps> = ({
   deleteTemplate,
 }) => {
   if (!user) return null;
-
+  const { width: windowWidth } = useWindowSize();
   const provider = useMemo(() => {
     return getProvider({
       targetId: data.id,
@@ -116,7 +117,11 @@ export const Editor: React.FC<IProps> = ({
                       style={{ marginRight: 16 }}
                     />
                   </Tooltip>
-                  <Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
+                  <Text
+                    strong
+                    ellipsis={{ showTooltip: true }}
+                    style={{ width: ~~(windowWidth / 4) }}
+                  >
                     {data.title}
                   </Text>
                 </>

packages/client/src/components/tiptap/extensions/title.tsx

@@ -17,18 +17,18 @@ const Title = Node.create({
   parseHTML() {
     return [
       {
-        tag: 'h1[class=title]',
+        tag: 'div[class=title]',
       },
     ];
   },
 
   renderHTML({ HTMLAttributes }) {
-    return ['h1', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
 });
 
 const TitledDocument = Document.extend({
-  content: 'title block+',
+  content: 'title block*',
 });
 
 export { Document, Title, TitledDocument };

packages/client/src/layouts/router-header/index.module.scss

@@ -20,12 +20,13 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: 4px 16px;
+    padding: 8px 16px;
 
     .leftWrap {
       display: flex;
       align-items: center;
       color: var(--semi-color-primary);
+      padding-left: 8px;
 
       svg {
         fill: var(--semi-color-primary);

packages/client/src/styles/prosemirror.scss

@@ -103,32 +103,32 @@
 
   h1 {
     font-size: 1.87em;
-    margin: 26px 0 14px 0;
+    margin: 26px 0 12px 0;
   }
 
   h2 {
     font-size: 1.6em;
-    margin: 21px 0 14px 0;
+    margin: 21px 0 12px 0;
   }
 
   h3 {
     font-size: 1.3em;
-    margin: 16px 0 14px 0;
+    margin: 16px 0 12px 0;
   }
 
   h4 {
     font-size: 1.1em;
-    margin: 14px 0 14px 0;
+    margin: 14px 0 12px 0;
   }
 
   h5 {
     font-size: 1em;
-    margin: 5px 0 14px 0;
+    margin: 5px 0 12px 0;
   }
 
   h6 {
     font-size: 1em;
-    margin: 0 0 14px 0;
+    margin: 0 0 12px 0;
   }
 
   h1:first-child,