refactor: format the code

.stylelintrc.js

@@ -0,0 +1,110 @@
+module.exports = {
+  processors: [],
+  plugins: ['stylelint-order'],
+  extends: ['stylelint-config-standard', 'stylelint-config-css-modules'],
+  rules: {
+    'selector-class-pattern': [
+      // 命名规范 -
+      '(.)+$',
+      {
+        message: 'Expected class selector to be kebab-case',
+      },
+    ],
+    'string-quotes': 'single', // 单引号
+    'at-rule-empty-line-before': null,
+    'at-rule-no-unknown': null,
+    'at-rule-name-case': 'lower', // 指定@规则名的大小写
+    'length-zero-no-unit': true, // 禁止零长度的单位（可自动修复）
+    'shorthand-property-no-redundant-values': true, // 简写属性
+    'number-leading-zero': 'never', // 小数不带0
+    'declaration-block-no-duplicate-properties': true, // 禁止声明快重复属性
+    'no-descending-specificity': true, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器。
+    'selector-max-id': 3, // 限制一个选择器中 ID 选择器的数量
+    'max-nesting-depth': 5,
+    'indentation': [
+      2,
+      {
+        // 指定缩进  warning 提醒
+        severity: 'warning',
+      },
+    ],
+    'order/properties-order': [
+      // 规则顺序
+      'position',
+      'top',
+      'right',
+      'bottom',
+      'left',
+      'z-index',
+      'display',
+      'float',
+      'width',
+      'height',
+      'max-width',
+      'max-height',
+      'min-width',
+      'min-height',
+      'padding',
+      'padding-top',
+      'padding-right',
+      'padding-bottom',
+      'padding-left',
+      'margin',
+      'margin-top',
+      'margin-right',
+      'margin-bottom',
+      'margin-left',
+      'margin-collapse',
+      'margin-top-collapse',
+      'margin-right-collapse',
+      'margin-bottom-collapse',
+      'margin-left-collapse',
+      'overflow',
+      'overflow-x',
+      'overflow-y',
+      'clip',
+      'clear',
+      'font',
+      'font-family',
+      'font-size',
+      'font-smoothing',
+      'osx-font-smoothing',
+      'font-style',
+      'font-weight',
+      'line-height',
+      'letter-spacing',
+      'word-spacing',
+      'color',
+      'text-align',
+      'text-decoration',
+      'text-indent',
+      'text-overflow',
+      'text-rendering',
+      'text-size-adjust',
+      'text-shadow',
+      'text-transform',
+      'word-break',
+      'word-wrap',
+      'white-space',
+      'vertical-align',
+      'list-style',
+      'list-style-type',
+      'list-style-position',
+      'list-style-image',
+      'pointer-events',
+      'cursor',
+      'background',
+      'background-color',
+      'border',
+      'border-radius',
+      'content',
+      'outline',
+      'outline-offset',
+      'opacity',
+      'filter',
+      'visibility',
+      'size',
+      'transform',
+    ],
+  },
+};

package.json

@@ -20,7 +20,9 @@
     "pm2": "pnpm run pm2:server && pnpm run pm2:client",
     "pm2:server": "pnpm run --dir packages/server pm2",
     "pm2:client": "pnpm run --dir packages/client pm2",
-    "format": "prettier --write --parser typescript \"packages/**/*.ts?(x)\""
+    "format": "concurrently \"pnpm:format:*\"",
+    "format:ts": "prettier --write --parser typescript \"packages/**/*.ts?(x)\"",
+    "format:css": "stylelint --fix --formatter verbose --allow-empty-input \"packages/**/*.{css,scss,sass}\""
   },
   "dependencies": {
     "concurrently": "^7.0.0",
@@ -44,6 +46,13 @@
     "eslint-plugin-react": "^7.29.3",
     "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "^2.3.2",
+    "stylelint": "^14.6.1",
+    "stylelint-config-css-modules": "^4.1.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-order": "^5.0.0",
+    "stylelint-prettier": "^2.0.0",
     "typescript": "^4.5.5"
   }
 }

packages/client/src/components/banner/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Banner as SemiBanner } from '@douyinfe/semi-ui';
 import { BannerProps } from '@douyinfe/semi-ui/banner';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 
 interface IProps extends BannerProps {
   duration?: number;
@@ -26,5 +26,5 @@ export const Banner: React.FC<IProps> = ({ type, description, duration }) => {
 
   if (!visible) return null;
 
-  return <SemiBanner type="success" description="以为您恢复上一次离线时编辑数据。 " />;
+  return <SemiBanner type={type} description={description} />;
 };

packages/client/src/components/data-render/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Empty, Spin, Typography } from '@douyinfe/semi-ui';
+import { Spin, Typography } from '@douyinfe/semi-ui';
 
 type RenderProps = React.ReactNode | (() => React.ReactNode);
 

packages/client/src/components/document-creator/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
-import { useQuery } from 'hooks/useQuery';
+import { useQuery } from 'hooks/use-query';
 import { DocumentCreator as DocumenCreatorForm } from 'components/document/create';
 
 interface IProps {

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

@@ -5,7 +5,7 @@ import { DocumentLinkCopyer } from 'components/document/link';
 import { DocumentDeletor } from 'components/document/delete';
 import { DocumentCreator } from 'components/document/create';
 import { DocumentStar } from 'components/document/star';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 
 interface IProps {
   wikiId: string;

packages/client/src/components/document/card/index.module.scss

@@ -2,23 +2,22 @@
   width: 100%;
 
   > a {
-    margin: 8px 0;
     display: flex;
-    flex-direction: column;
     width: 100%;
     max-height: 260px;
     padding: 12px 16px 16px;
-    border-radius: 5px;
+    margin: 8px 0;
-    border: 1px solid var(--semi-color-border);
     cursor: pointer;
+    border: 1px solid var(--semi-color-border);
+    border-radius: 5px;
+    flex-direction: column;
 
     > header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-
-      color: var(--semi-color-primary);
       margin-bottom: 12px;
+      color: var(--semi-color-primary);
 
       .rightWrap {
         opacity: 0;

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

@@ -18,7 +18,7 @@ import {
 import { IconUserAdd, IconDelete } from '@douyinfe/semi-icons';
 import { useUser } from 'data/user';
 import { EventEmitter } from 'helpers/event-emitter';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { useCollaborationDocument } from 'data/document';
 import { DataRender } from 'components/data-render';
 import { DocumentLinkCopyer } from 'components/document/link';

packages/client/src/components/document/comments/comments/Item/index.module.scss

@@ -1,6 +1,6 @@
 .wrap {
   display: flex;
-  padding: 9px 0px 9px 0;
+  padding: 9px 0;
 
   + .wrap {
     margin-top: 16px;
@@ -17,20 +17,9 @@
     }
 
     > footer {
-      //   height: 0;
-      //   transition: all ease-in-out 0.3s;
-
       span {
         cursor: pointer;
       }
     }
   }
-
-  //   &:hover {
-  //     .rightWrap {
-  //       > footer {
-  //         height: 40px;
-  //       }
-  //     }
-  //   }
 }

packages/client/src/components/document/comments/index.module.scss

@@ -10,8 +10,8 @@
 }
 
 .editorOuterWrap {
-  padding-top: 24px;
   display: flex;
+  padding-top: 24px;
 
   .rightWrap {
     flex: 1;

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { Avatar, Button, Space, Typography, Banner, Pagination } from '@douyinfe/semi-ui';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { DEFAULT_EXTENSION, Document, History, CommentMenuBar } from 'components/tiptap';
 import { DataRender } from 'components/data-render';
 import { useUser } from 'data/user';

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

@@ -3,7 +3,7 @@ import cls from 'classnames';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { BackTop } from '@douyinfe/semi-ui';
 import { ILoginUser, IAuthority } from '@think/domains';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import {
   MenuBar,
   DEFAULT_EXTENSION,

packages/client/src/components/document/editor/index.module.scss

@@ -1,14 +1,14 @@
 .wrap {
-  height: 100%;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 
   > header {
     position: relative;
     z-index: 110;
-    background-color: var(--semi-color-nav-bg);
     height: 60px;
+    background-color: var(--semi-color-nav-bg);
     user-select: none;
 
     > div {
@@ -18,27 +18,27 @@
 
   > main {
     height: calc(100% - 60px);
-    flex: 1;
     overflow: hidden;
     background-color: var(--semi-color-nav-bg);
+    flex: 1;
   }
 }
 
 .editorWrap {
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
   overflow: hidden;
 
   > header {
     position: relative;
     z-index: 110;
+    display: flex;
     height: 50px;
     padding: 0 24px;
-    display: flex;
-    align-items: center;
     overflow: hidden;
     background-color: var(--semi-color-nav-bg);
+    align-items: center;
     border-bottom: 1px solid var(--semi-color-border);
     user-select: none;
 

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

@@ -4,7 +4,7 @@ import { Nav, Skeleton, Typography, Space, Button, Tooltip, Spin, Popover } from
 import { IconChevronLeft, IconArticle } from '@douyinfe/semi-icons';
 import { useUser } from 'data/user';
 import { useDocumentDetail } from 'data/document';
-import { useWindowSize } from 'hooks/useWindowSize';
+import { useWindowSize } from 'hooks/use-window-size';
 import { Seo } from 'components/seo';
 import { Theme } from 'components/theme';
 import { DataRender } from 'components/data-render';
@@ -12,7 +12,7 @@ import { DocumentShare } from 'components/document/share';
 import { DocumentStar } from 'components/document/star';
 import { DocumentCollaboration } from 'components/document/collaboration';
 import { DocumentStyle } from 'components/document/style';
-import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useDocumentStyle } from 'hooks/use-document-style';
 import { EventEmitter } from 'helpers/event-emitter';
 import { Editor } from './editor';
 import styles from './index.module.scss';

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

@@ -2,7 +2,7 @@ import React, { useMemo, useEffect, useRef } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { Layout } from '@douyinfe/semi-ui';
 import { IDocument, ILoginUser } from '@think/domains';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import {
   DEFAULT_EXTENSION,
   DocumentWithTitle,
@@ -28,7 +28,6 @@ interface IProps {
 export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
   if (!user) return null;
 
-  const $ref = useRef();
   const provider = useMemo(() => {
     return getProvider({
       targetId: documentId,
@@ -70,18 +69,16 @@ export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
       error={null}
       normalContent={() => {
         return (
-          <>
+          <Content className={styles.editorWrap}>
-            <Content className={styles.editorWrap}>
+            <div id="js-reader-container">
-              <div id="js-reader-container">
+              <ImageViewer containerSelector="#js-reader-container" />
-                <ImageViewer containerSelector="#js-reader-container" />
+              <EditorContent editor={editor} />
-                <EditorContent editor={editor} />
+            </div>
-              </div>
+            <CreateUser
-              <CreateUser
+              document={document}
-                document={document}
+              container={() => window.document.querySelector('#js-reader-container .ProseMirror .title')}
-                container={() => window.document.querySelector('#js-reader-container .ProseMirror .title')}
+            />
-              />
+          </Content>
-            </Content>
-          </>
         );
       }}
     />

packages/client/src/components/document/reader/index.module.scss

@@ -1,6 +1,6 @@
 .wrap {
-  margin-top: -16px;
   height: 100%;
+  margin-top: -16px;
 
   .headerWrap {
     position: sticky;

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

@@ -10,8 +10,8 @@ import { DocumentStar } from 'components/document/star';
 import { DocumentCollaboration } from 'components/document/collaboration';
 import { DocumentStyle } from 'components/document/style';
 import { CommentEditor } from 'components/document/comments';
-import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useDocumentStyle } from 'hooks/use-document-style';
-import { useWindowSize } from 'hooks/useWindowSize';
+import { useWindowSize } from 'hooks/use-window-size';
 import { useUser } from 'data/user';
 import { useDocumentDetail } from 'data/document';
 import { DocumentSkeleton } from 'components/tiptap';

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
-import { Layout } from '@douyinfe/semi-ui';
 import { IDocument } from '@think/domains';
 import { DEFAULT_EXTENSION, DocumentWithTitle } from 'components/tiptap';
 import { safeJSONParse } from 'helpers/json';
@@ -15,13 +14,6 @@ export const DocumentContent: React.FC<IProps> = ({ document, createUserContaine
   const c = safeJSONParse(document.content);
   let json = c.default || c;
 
-  // if (json && json.content) {
-  //   json = {
-  //     type: 'doc',
-  //     content: json.content.slice(1),
-  //   };
-  // }
-
   const editor = useEditor({
     editable: false,
     extensions: [...DEFAULT_EXTENSION, DocumentWithTitle],

packages/client/src/components/document/reader/public/index.module.scss

@@ -1,7 +1,7 @@
 .wrap {
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
   background-color: var(--semi-color-nav-bg);
 
   .headerWrap {
@@ -9,8 +9,8 @@
   }
 
   .contentWrap {
-    padding: 24px 24px 48px;
     flex: 1;
+    padding: 24px 24px 48px;
     overflow: auto;
 
     .editorWrap {

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

@@ -9,15 +9,15 @@ import { DocumentStyle } from 'components/document/style';
 import { User } from 'components/user';
 import { Theme } from 'components/theme';
 import { ImageViewer } from 'components/image-viewer';
-import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useDocumentStyle } from 'hooks/use-document-style';
-import { useWindowSize } from 'hooks/useWindowSize';
+import { useWindowSize } from 'hooks/use-window-size';
 import { usePublicDocument } from 'data/document';
 import { DocumentSkeleton } from 'components/tiptap';
 import { DocumentContent } from './content';
 import styles from './index.module.scss';
 
 const { Header, Content } = Layout;
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 interface IProps {
   documentId: string;

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

@@ -5,7 +5,7 @@ import { isPublicDocument } from '@think/domains';
 import { getDocumentShareURL } from 'helpers/url';
 import { ShareIllustration } from 'illustrations/share';
 import { DataRender } from 'components/data-render';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { useDocumentDetail } from 'data/document';
 
 interface IProps {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Typography, Tooltip, Button } from '@douyinfe/semi-ui';
+import { Tooltip, Button } from '@douyinfe/semi-ui';
 import { IconStar } from '@douyinfe/semi-icons';
 import { useDocumentStar } from 'data/document';
 
@@ -8,8 +8,6 @@ interface IProps {
   render?: (arg: { star: boolean; text: string; toggleStar: () => Promise<void> }) => React.ReactNode;
 }
 
-const { Text } = Typography;
-
 export const DocumentStar: React.FC<IProps> = ({ documentId, render }) => {
   const { data, toggleStar } = useDocumentStar(documentId);
   const text = data ? '取消收藏' : '收藏文档';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RadioGroup, Radio, Typography, Slider } from '@douyinfe/semi-ui';
-import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useDocumentStyle } from 'hooks/use-document-style';
 import styles from './index.module.scss';
 
 const { Text } = Typography;

packages/client/src/components/grid-select/grid-select.tsx

@@ -52,13 +52,6 @@ export const GridSelect = ({
 
   const onClick = useCallback(
     ({ x, y, isCellDisabled }) => {
-      //   if (isCellDisabled) {
-      //     return null;
-      //   }
-      //   if (activeCell.x === x && activeCell.y === y) {
-      //     return null;
-      //   }
-      //   setActiveCell({ x, y });
       onSelect({
         rows: y + 1,
         cols: x + 1,
@@ -67,7 +60,6 @@ export const GridSelect = ({
     [onSelect]
   );
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const onHover = useCallback(
     debounce(({ x, y, isCellDisabled }) => {
       if (isCellDisabled) {

packages/client/src/components/icons/IconCodeBlock.tsx

@@ -6,7 +6,7 @@ export const IconCodeBlock: React.FC<{ style?: React.CSSProperties }> = ({ style
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="currentColor" fill-rule="evenodd">
+          <g fill="currentColor" fillRule="evenodd">
             <path
               d="M64 40c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L64 60H54a6 6 0 0 0-5.996 5.775L48 66v42.5a10 10 0 0 1-1.667 5.529l-.21.303L36.31 128l9.813 13.668a10 10 0 0 1 1.87 5.463l.007.369V190a6 6 0 0 0 5.775 5.996L54 196h10c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L64 216H54c-14.216 0-25.767-11.409-25.997-25.57L28 190v-39.281l-12.123-16.887a10 10 0 0 1-.179-11.407l.179-.257L28 105.28V66c0-14.216 11.409-25.767 25.57-25.997L54 40h10ZM192 40c-5.523 0-10 4.477-10 10 0 5.43 4.327 9.848 9.72 9.996L192 60h10a6 6 0 0 1 5.996 5.775L208 66v42.5a10 10 0 0 0 1.667 5.529l.21.303L219.69 128l-9.813 13.668a10 10 0 0 0-1.87 5.463l-.007.369V190a6 6 0 0 1-5.775 5.996L202 196h-10c-5.523 0-10 4.477-10 10 0 5.43 4.327 9.848 9.72 9.996l.28.004h10c14.216 0 25.767-11.409 25.997-25.57L228 190v-39.281l12.123-16.887a10 10 0 0 0 .179-11.407l-.179-.257L228 105.28V66c0-14.216-11.409-25.767-25.57-25.997L202 40h-10Z"
               fillRule="nonzero"

packages/client/src/components/icons/IconHorizontalRule.tsx

@@ -6,7 +6,7 @@ export const IconHorizontalRule: React.FC<{ style?: React.CSSProperties }> = ({
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="none" fill-rule="evenodd">
+          <g fill="none" fillRule="evenodd">
             <rect fill="currentColor" x="17" y="116" width="223" height="24" rx="12"></rect>
           </g>
         </svg>

packages/client/src/components/icons/IconList.tsx

@@ -6,8 +6,8 @@ export const IconList: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="currentColor" fill-rule="evenodd">
+          <g fill="currentColor" fillRule="evenodd">
-            <g fill-rule="nonzero">
+            <g fillRule="nonzero">
               <path d="M215 118c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 138H96c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L96 118h119ZM215 35c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 55H96c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L96 35h119ZM215 201c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 221H96c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L96 201h119Z"></path>
             </g>
             <circle cx="44" cy="45" r="16"></circle>

packages/client/src/components/icons/IconMind.tsx

@@ -6,7 +6,7 @@ export const IconMind: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="currentColor" fill-rule="nonzero">
+          <g fill="currentColor" fillRule="nonzero">
             <path d="M214 35h-46c-14.36 0-26 11.64-26 26v10c0 14.36 11.64 26 26 26h46c14.36 0 26-11.64 26-26V61c0-14.36-11.64-26-26-26Zm-46 20h46a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-46a6 6 0 0 1-6-6V61a6 6 0 0 1 6-6ZM214 159h-46c-14.36 0-26 11.64-26 26v10c0 14.36 11.64 26 26 26h46c14.36 0 26-11.64 26-26v-10c0-14.36-11.64-26-26-26Zm-46 20h46a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-46a6 6 0 0 1-6-6v-10a6 6 0 0 1 6-6Z"></path>
             <path d="M73.55 147.305c7.858 20.517 27.486 34.415 49.774 34.69L124 182h26.207v16H124c-28.957 0-54.586-17.747-65.078-44.17l-.313-.803 14.942-5.722ZM158 58v16h-34c-22.645 0-42.63 14.068-50.511 34.857l-.235.632-15.03-5.484c9.897-27.128 35.606-45.632 64.888-46L124 58h34Z"></path>
             <path d="M88 97H42c-14.36 0-26 11.64-26 26v10c0 14.36 11.64 26 26 26h46c14.36 0 26-11.64 26-26v-10c0-14.36-11.64-26-26-26Zm-46 20h46a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6H42a6 6 0 0 1-6-6v-10a6 6 0 0 1 6-6Z"></path>

packages/client/src/components/icons/IconOrderedList.tsx

@@ -6,7 +6,7 @@ export const IconOrderedList: React.FC<{ style?: React.CSSProperties }> = ({ sty
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="currentColor" fill-rule="nonzero">
+          <g fill="currentColor" fillRule="nonzero">
             <path d="M215 118c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 138H101c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L101 118h114ZM215 35c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 55H101c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L101 35h114ZM215 201c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 221H101c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L101 201h114ZM65.988 190.061l-.739.79-1.88 2.061-4.394 4.885-6.435 7.205h13.852a9 9 0 0 1 8.996 8.736l.004.265a9 9 0 0 1-8.735 8.996l-.265.004H32.5c-7.762 0-11.883-9.167-6.732-14.973l15.666-17.621 6.446-7.197 3.323-3.665 1.424-1.54.623-.653.408-.407.042-.039c1.203-1.106 1.855-2.536 1.855-4.05 0-3.128-2.87-5.855-6.637-5.855-3.681 0-6.508 2.607-6.632 5.647l-.004.208a9 9 0 1 1-18 0c0-13.281 11.13-23.855 24.636-23.855 13.507 0 24.637 10.574 24.637 23.855 0 6.497-2.703 12.572-7.355 17.003l-.212.2ZM43.206 25.413c5.694-5.302 14.934-1.363 15.13 6.337l.003.25v73a9 9 0 0 1-17.996.265L40.34 105V52.583c-3.556 2.568-8.513 2.208-11.653-.96l-.198-.207a9 9 0 0 1 .247-12.522l.206-.198 14.265-13.283Z"></path>
           </g>
         </svg>

packages/client/src/components/icons/IconQuote.tsx

@@ -6,12 +6,12 @@ export const IconQuote: React.FC<{ style?: React.CSSProperties }> = ({ style = {
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="none" fill-rule="evenodd">
+          <g fill="none" fillRule="evenodd">
             <g fill="currentColor">
               <path d="M36 143h44c6.627 0 12 5.373 12 12v44c0 6.627-5.373 12-12 12H36c-6.627 0-12-5.373-12-12v-44c0-6.627 5.373-12 12-12Z"></path>
               <path
                 d="M84.144 53.257c5.502-.485 10.355 3.582 10.84 9.084.476 5.408-3.447 10.19-8.806 10.81l-.279.029c-23.384 2.06-41.533 21.544-41.894 45.105L44 119v41.723c0 5.523-4.477 10-10 10-5.43 0-9.848-4.326-9.996-9.72l-.004-.28V119c0-34.269 26.22-62.755 60.144-65.743Z"
-                fill-rule="nonzero"
+                fillRule="nonzero"
               ></path>
               <path d="M43.272 120.769 38.56 142.58a9.567 9.567 0 0 0 13.93 10.42l11.401-6.216a2.015 2.015 0 0 0-.964-3.784h-2.933c-8.837 0-16-7.164-16-16v-6.155a.365.365 0 0 0-.722-.077Z"></path>
             </g>
@@ -19,7 +19,7 @@ export const IconQuote: React.FC<{ style?: React.CSSProperties }> = ({ style = {
               <path d="M176 143h44c6.627 0 12 5.373 12 12v44c0 6.627-5.373 12-12 12h-44c-6.627 0-12-5.373-12-12v-44c0-6.627 5.373-12 12-12Z"></path>
               <path
                 d="M224.144 53.257c5.502-.485 10.355 3.582 10.84 9.084.476 5.408-3.447 10.19-8.806 10.81l-.279.029c-23.384 2.06-41.533 21.544-41.894 45.105L184 119v41.723c0 5.523-4.477 10-10 10-5.43 0-9.848-4.326-9.996-9.72l-.004-.28V119c0-34.269 26.22-62.755 60.144-65.743Z"
-                fill-rule="nonzero"
+                fillRule="nonzero"
               ></path>
               <path d="m183.272 120.769-4.712 21.812a9.567 9.567 0 0 0 13.93 10.42l11.401-6.216a2.015 2.015 0 0 0-.964-3.784h-2.933c-8.837 0-16-7.164-16-16v-6.155a.365.365 0 0 0-.722-.077Z"></path>
             </g>

packages/client/src/components/icons/IconSearchReplace.tsx

@@ -6,8 +6,8 @@ export const IconSearchReplace: React.FC<{ style?: React.CSSProperties }> = ({ s
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="currentColor" fill-rule="evenodd">
+          <g fill="currentColor" fillRule="evenodd">
-            <g fill-rule="nonzero">
+            <g fillRule="nonzero">
               <path d="M191.527 15c18.302 0 33.173 14.688 33.469 32.919l.004.554v65.424c0 5.523-4.477 10-10 10-5.43 0-9.848-4.327-9.996-9.72l-.004-.28V48.473c0-7.338-5.865-13.305-13.163-13.47l-.31-.003H64.473c-7.338 0-13.305 5.865-13.47 13.163l-.003.31v159.054c0 7.338 5.865 13.305 13.163 13.47l.31.003H99c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L99 241H64.473c-18.302 0-33.173-14.688-33.469-32.919l-.004-.554V48.473C31 30.17 45.688 15.3 63.919 15.004l.554-.004h127.054Z"></path>
               <path d="M147.385 150.885c-17.964 17.964-17.964 47.09 0 65.054s47.09 17.964 65.054 0c17.964-17.965 17.964-47.09 0-65.054-17.965-17.964-47.09-17.964-65.054 0Zm14.142 14.142c10.154-10.154 26.616-10.154 36.77 0 10.153 10.154 10.153 26.616 0 36.77-10.154 10.153-26.616 10.153-36.77 0-10.154-10.154-10.154-26.616 0-36.77Z"></path>
               <path d="M234.545 241.752c-3.839 3.84-10.023 3.904-13.941.196l-.2-.196-21.921-21.92c-3.905-3.905-3.905-10.237 0-14.142 3.839-3.84 10.023-3.904 13.941-.195l.2.195 21.921 21.92c3.905 3.905 3.905 10.237 0 14.142Z"></path>

packages/client/src/components/icons/IconStatus.tsx

@@ -6,10 +6,10 @@ export const IconStatus: React.FC<{ style?: React.CSSProperties }> = ({ style =
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g transform="rotate(-45 100.071 47.645)" fill="currentColor" fill-rule="evenodd">
+          <g transform="rotate(-45 100.071 47.645)" fill="currentColor" fillRule="evenodd">
             <path
               d="m44.625 4.22-47 46.951A26 26 0 0 0-10 69.566V190c0 14.36 11.64 26 26 26h94c14.36 0 26-11.64 26-26V69.566a26 26 0 0 0-7.625-18.395l-47-46.95c-10.151-10.14-26.599-10.14-36.75 0ZM67.24 18.37l47 46.95a6 6 0 0 1 1.76 4.246V190a6 6 0 0 1-6 6H16a6 6 0 0 1-6-6V69.566a6 6 0 0 1 1.76-4.245l47-46.95a6 6 0 0 1 8.48 0Z"
-              fill-rule="nonzero"
+              fillRule="nonzero"
             ></path>
             <circle cx="63.172" cy="67.586" r="14"></circle>
           </g>

packages/client/src/components/icons/IconSub.tsx

@@ -6,7 +6,7 @@ export const IconSub: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g stroke="currentColor" fill="none" fill-rule="evenodd">
+          <g stroke="currentColor" fill="none" fillRule="evenodd">
             <path stroke-width="20" stroke-linecap="round" d="m40 50 114 168M154 50 40 218"></path>
             <path
               d="M231.92 225.48c2.72 0 4.08-1.48 4.08-4.44 0-2.88-1.36-4.32-4.08-4.32H198.8c6.48-5.52 12.28-11.24 17.4-17.16 2.16-2.48 4.28-5.16 6.36-8.04 2.08-2.88 3.94-5.82 5.58-8.82 1.64-3 2.96-6.04 3.96-9.12 1-3.08 1.5-6.14 1.5-9.18 0-3.36-.48-6.42-1.44-9.18s-2.38-5.12-4.26-7.08-4.2-3.48-6.96-4.56c-2.76-1.08-5.9-1.62-9.42-1.62-7.92 0-13.8 2.26-17.64 6.78-3.84 4.52-5.76 10.66-5.76 18.42 0 2.24.32 3.74.96 4.5.64.76 1.96 1.14 3.96 1.14 1.76 0 2.98-.44 3.66-1.32.68-.88 1.02-2.32 1.02-4.32 0-4.8 1.04-8.74 3.12-11.82s5.4-4.62 9.96-4.62c4 0 7.16 1.32 9.48 3.96 2.32 2.64 3.48 6.12 3.48 10.44 0 3.2-.64 6.42-1.92 9.66-1.28 3.24-2.94 6.4-4.98 9.48a84.099 84.099 0 0 1-6.84 8.94c-2.52 2.88-5.04 5.6-7.56 8.16-2.52 2.56-4.92 4.94-7.2 7.14-2.28 2.2-4.18 4.1-5.7 5.7-.64 1.04-.96 2.04-.96 3-.56 1.04-.86 2.06-.9 3.06-.04 1 .1 1.88.42 2.64.32.76.8 1.38 1.44 1.86.64.48 1.36.72 2.16.72h40.2Z"

packages/client/src/components/icons/IconSup.tsx

@@ -6,7 +6,7 @@ export const IconSup: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g stroke="currentColor" fill="none" fill-rule="evenodd">
+          <g stroke="currentColor" fill="none" fillRule="evenodd">
             <path stroke-width="20" stroke-linecap="round" d="m40 50 114 168M154 50 40 218"></path>
             <path
               d="M231.92 103.48c2.72 0 4.08-1.48 4.08-4.44 0-2.88-1.36-4.32-4.08-4.32H198.8c6.48-5.52 12.28-11.24 17.4-17.16 2.16-2.48 4.28-5.16 6.36-8.04 2.08-2.88 3.94-5.82 5.58-8.82 1.64-3 2.96-6.04 3.96-9.12 1-3.08 1.5-6.14 1.5-9.18 0-3.36-.48-6.42-1.44-9.18s-2.38-5.12-4.26-7.08-4.2-3.48-6.96-4.56c-2.76-1.08-5.9-1.62-9.42-1.62-7.92 0-13.8 2.26-17.64 6.78-3.84 4.52-5.76 10.66-5.76 18.42 0 2.24.32 3.74.96 4.5.64.76 1.96 1.14 3.96 1.14 1.76 0 2.98-.44 3.66-1.32.68-.88 1.02-2.32 1.02-4.32 0-4.8 1.04-8.74 3.12-11.82s5.4-4.62 9.96-4.62c4 0 7.16 1.32 9.48 3.96 2.32 2.64 3.48 6.12 3.48 10.44 0 3.2-.64 6.42-1.92 9.66-1.28 3.24-2.94 6.4-4.98 9.48a84.099 84.099 0 0 1-6.84 8.94c-2.52 2.88-5.04 5.6-7.56 8.16-2.52 2.56-4.92 4.94-7.2 7.14-2.28 2.2-4.18 4.1-5.7 5.7-.64 1.04-.96 2.04-.96 3-.56 1.04-.86 2.06-.9 3.06-.04 1 .1 1.88.42 2.64.32.76.8 1.38 1.44 1.86.64.48 1.36.72 2.16.72h40.2Z"

packages/client/src/components/icons/IconTable.tsx

@@ -6,7 +6,7 @@ export const IconTable: React.FC<{ style?: React.CSSProperties }> = ({ style = {
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="currentColor" fill-rule="evenodd">
+          <g fill="currentColor" fillRule="evenodd">
             <path
               d="M208 40c17.673 0 32 14.327 32 32v112c0 17.673-14.327 32-32 32H48c-17.673 0-32-14.327-32-32V72c0-17.673 14.327-32 32-32h160Zm0 20H48c-6.525 0-11.834 5.209-11.996 11.695L36 72v112c0 6.525 5.209 11.834 11.695 11.996L48 196h160c6.525 0 11.834-5.209 11.996-11.695L220 184V72c0-6.525-5.209-11.834-11.695-11.996L208 60Z"
               fillRule="nonzero"

packages/client/src/components/icons/IconTask.tsx

@@ -6,16 +6,16 @@ export const IconTask: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
       style={style}
       svg={
         <svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
-          <g fill="none" fill-rule="evenodd">
+          <g fill="none" fillRule="evenodd">
             <path
               d="M169.002 89.757c3.945-3.865 10.276-3.8 14.141.145 3.795 3.873 3.801 10.047.067 13.928l-.212.213-63.285 62a10 10 0 0 1-13.776.209l-.219-.208-32.715-32.041c-3.946-3.865-4.012-10.196-.147-14.142 3.794-3.873 9.966-4.007 13.924-.354l.217.207 25.717 25.187 56.288-55.144Z"
               fill="currentColor"
-              fill-rule="nonzero"
+              fillRule="nonzero"
             ></path>
             <path
               d="M201 23c17.673 0 32 14.327 32 32v146c0 17.673-14.327 32-32 32H55c-17.673 0-32-14.327-32-32V55c0-17.673 14.327-32 32-32h146Zm0 20H55c-6.525 0-11.834 5.209-11.996 11.695L43 55v146c0 6.525 5.209 11.834 11.695 11.996L55 213h146c6.525 0 11.834-5.209 11.996-11.695L213 201V55c0-6.525-5.209-11.834-11.695-11.996L201 43Z"
               fill="currentColor"
-              fill-rule="nonzero"
+              fillRule="nonzero"
             ></path>
           </g>
         </svg>

packages/client/src/components/locale-time/index.tsx

@@ -35,7 +35,7 @@ const getTimeago = (date: number | string | Date) => {
 };
 
 export const LocaleTime: React.FC<Props> = ({ date, timeago, format = 'yyyy-MM-dd HH:mm:ss' }) => {
-  const [_, setMinutesMounted] = useState(0); // eslint-disable-line no-unused-vars
+  const [, setMinutesMounted] = useState(0);
   const callback = useRef<() => void>();
 
   useEffect(() => {

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

@@ -9,9 +9,9 @@
   }
 
   > span {
+    margin-left: 4px;
     font-size: 1.2rem;
     font-weight: 500;
-    margin-left: 4px;
   }
 }
 

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

@@ -11,25 +11,25 @@
   border-radius: var(--semi-border-radius-small);
 
   &:hover {
-    background-color: var(--semi-color-fill-0);
     color: var(--semi-color-text-0);
+    background-color: var(--semi-color-fill-0);
   }
 
   .item {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
     width: 100%;
     height: 32px;
     padding: 4px 16px;
 
     .leftWrap {
       display: flex;
-      align-items: center;
-      white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
       color: var(--semi-color-primary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      align-items: center;
 
       > span {
         word-break: break-all;
@@ -51,5 +51,4 @@
 .paginationWrap {
   display: flex;
   justify-content: center;
-  // padding: 16px 0 0;
 }

packages/client/src/components/message/index.tsx

@@ -6,7 +6,7 @@ import { useAllMessages, useReadMessages, useUnreadMessages } from 'data/message
 import { EmptyBoxIllustration } from 'illustrations/empty-box';
 import { DataRender } from 'components/data-render';
 import { Empty } from 'components/empty';
-import { Placeholder } from './Placeholder';
+import { Placeholder } from './placeholder';
 import styles from './index.module.scss';
 
 const { Text } = Typography;

packages/client/src/components/resizeable/style.module.scss

@@ -1,38 +1,38 @@
 .resizable {
-  box-sizing: border-box;
   position: relative;
   display: inline-block;
   width: 100px;
   height: 100px;
   max-width: 100%;
+  box-sizing: border-box;
 
   .resizer {
-    box-sizing: border-box;
     position: absolute;
     z-index: 9999;
     width: 10px;
     height: 10px;
-    border-radius: 50%;
     background: white;
     border: 3px solid #4286f4;
+    border-radius: 50%;
     opacity: 0;
+    box-sizing: border-box;
   }
 
   .resizer.topLeft {
-    left: -5px;
     top: -5px;
+    left: -5px;
     cursor: nwse-resize;
   }
 
   .resizer.topRight {
-    right: -5px;
     top: -5px;
+    right: -5px;
     cursor: nesw-resize;
   }
 
   .resizer.bottomLeft {
-    left: -5px;
     bottom: -5px;
+    left: -5px;
     cursor: nesw-resize;
   }
 

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

@@ -1,29 +1,26 @@
-.itemsWrap {
-}
-
 .itemWrap {
   margin-top: 8px;
   border-radius: var(--semi-border-radius-small);
 
   &:hover {
-    background-color: var(--semi-color-fill-0);
     color: var(--semi-color-text-0);
+    background-color: var(--semi-color-fill-0);
   }
 
   .item {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
     width: 100%;
     padding: 4px 8px;
 
     .leftWrap {
       display: flex;
-      align-items: center;
-      white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
       color: var(--semi-color-primary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      align-items: center;
 
       > span {
         word-break: break-all;

packages/client/src/components/search/index.tsx

@@ -6,8 +6,8 @@ import { IconSearch as SemiIconSearch } from '@douyinfe/semi-icons';
 import { IconSearch } from 'components/icons';
 import { IDocument } from '@think/domains';
 import { useRecentDocuments } from 'data/document';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
-import { useAsyncLoading } from 'hooks/useAsyncLoading';
+import { useAsyncLoading } from 'hooks/use-async-loading';
 import { searchDocument } from 'services/document';
 import { Empty } from 'components/empty';
 import { DataRender } from 'components/data-render';

packages/client/src/components/template/card/index.module.scss

@@ -1,67 +1,64 @@
 .cardWrap {
   position: relative;
-  transform: translateZ(0);
-  margin: 8px 0;
   display: flex;
-  flex-direction: column;
   width: 100%;
   height: 161px;
   padding: 12px 16px 16px;
-  border-radius: var(--border-radius);
+  margin: 8px 0;
-  border: 1px solid var(--semi-color-border);
-  cursor: pointer;
   overflow: hidden;
+  cursor: pointer;
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--border-radius);
+  transform: translateZ(0);
+  flex-direction: column;
 
   header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    color: var(--semi-color-primary);
     margin-bottom: 12px;
+    color: var(--semi-color-primary);
 
     .rightWrap {
       opacity: 0;
     }
   }
 
+  .actions {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    width: 100%;
+    padding: 8px;
+    background-color: var(--semi-color-fill-2);
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+    opacity: 0;
+    justify-content: space-around;
+    transition: all ease-in-out .2s;
+
+    button {
+      width: 40%;
+    }
+  }
+
   &:hover {
     box-shadow: var(--semi-color-shadow);
 
     header .rightWrap {
       opacity: 1;
     }
-  }
 
-  footer {
-    margin-top: 12px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .actions {
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    z-index: 10;
-    transition: all ease-in-out 0.2s;
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    padding: 8px;
-    border-radius: 0 0 var(--border-radius) var(--border-radius);
-    background-color: var(--semi-color-fill-2);
-    opacity: 0;
-
-    button {
-      width: 40%;
-    }
-  }
-
-  &:hover {
     .actions {
       opacity: 1;
     }
   }
+
+  footer {
+    margin-top: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

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

@@ -6,9 +6,9 @@ import { Button, Space, Typography, Tooltip, Avatar, Skeleton, Modal } from '@do
 import { IconEdit, IconUser, IconPlus } from '@douyinfe/semi-icons';
 import { IconDocument } from 'components/icons/IconDocument';
 import { TemplateReader } from 'components/template/reader';
+import { useToggle } from 'hooks/use-toggle';
 import { useUser } from 'data/user';
 import styles from './index.module.scss';
-import { useToggle } from 'hooks/useToggle';
 
 const { Text } = Typography;
 

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

@@ -28,8 +28,8 @@ import {
 import { DataRender } from 'components/data-render';
 import { User } from 'components/user';
 import { DocumentStyle } from 'components/document/style';
-import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useDocumentStyle } from 'hooks/use-document-style';
-import { useWindowSize } from 'hooks/useWindowSize';
+import { useWindowSize } from 'hooks/use-window-size';
 import { safeJSONParse } from 'helpers/json';
 import styles from './index.module.scss';
 

packages/client/src/components/template/editor/index.module.scss

@@ -1,14 +1,14 @@
 .wrap {
-  height: 100%;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 
   > header {
     position: relative;
     z-index: 110;
-    background-color: var(--semi-color-nav-bg);
     height: 60px;
+    background-color: var(--semi-color-nav-bg);
     user-select: none;
 
     > div {
@@ -18,30 +18,37 @@
 
   > main {
     height: calc(100% - 60px);
-    flex: 1;
     overflow: hidden;
     background-color: var(--semi-color-nav-bg);
+    flex: 1;
   }
 }
 
 .editorWrap {
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
   overflow: hidden;
 
   > header {
     position: relative;
     z-index: 110;
+    display: flex;
     height: 50px;
     padding: 0 24px;
-    display: flex;
-    align-items: center;
     overflow: hidden;
     background-color: var(--semi-color-nav-bg);
+    align-items: center;
     border-bottom: 1px solid var(--semi-color-border);
     user-select: none;
 
+    > div {
+      display: inline-flex;
+      align-items: center;
+      height: 100%;
+      overflow: auto;
+    }
+
     &.isStandardWidth {
       > div {
         margin: 0 auto;
@@ -53,14 +60,6 @@
         margin: 0;
       }
     }
-
-    > div {
-      display: inline-flex;
-      align-items: center;
-      // width: 100%;
-      height: 100%;
-      overflow: auto;
-    }
   }
 
   > main {

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

@@ -6,7 +6,7 @@ import { IUser, ITemplate } from '@think/domains';
 import { DEFAULT_EXTENSION, DocumentWithTitle } from 'components/tiptap';
 import { DataRender } from 'components/data-render';
 import { ImageViewer } from 'components/image-viewer';
-import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useDocumentStyle } from 'hooks/use-document-style';
 import { safeJSONParse } from 'helpers/json';
 import styles from './index.module.scss';
 

packages/client/src/components/template/reader/index.module.scss

@@ -1,7 +1,6 @@
 .wrap {
   display: flex;
   flex-direction: column;
-
   height: 100%;
 
   .contentWrap {

packages/client/src/components/theme/index.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Button, Tooltip } from '@douyinfe/semi-ui';
 import { IconSun, IconMoon } from '@douyinfe/semi-icons';
-import { useTheme } from 'hooks/useTheme';
+import { useTheme } from 'hooks/use-theme';
 
 export const Theme = () => {
   const { theme, toggle } = useTheme();

packages/client/src/components/tiptap/menus/colorPicker/style.module.scss

@@ -6,28 +6,28 @@
 
   .colorItem {
     display: flex;
-    align-items: center;
-    justify-content: center;
     width: 32px;
     height: 32px;
     cursor: pointer;
-    border-radius: 4px;
     border: 1px solid transparent;
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
 
     &:nth-of-type(n + 8) {
       margin-top: 4px;
     }
 
     &:hover {
-      border-color: rgb(193, 199, 208);
+      border-color: rgb(193 199 208);
     }
 
     > span {
       display: block;
       width: 28px;
       height: 28px;
-      border-radius: 2px;
       border: 1px solid var(--semi-color-border);
+      border-radius: 2px;
     }
   }
 }

packages/client/src/components/tiptap/menus/emoji/index.module.scss

@@ -5,22 +5,20 @@
 
 .listWrap {
   display: flex;
-  flex-wrap: wrap;
-
-  list-style: none;
-
   width: 320px;
   padding: 0;
   margin: 0;
+  list-style: none;
+  flex-wrap: wrap;
 
   > li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 32px;
     height: 32px;
-    font-size: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     padding: 4px;
+    font-size: 24px;
     cursor: pointer;
   }
 }

packages/client/src/components/tiptap/wrappers/attachment/index.tsx

@@ -12,7 +12,7 @@ import {
   IconClose,
 } from '@douyinfe/semi-icons';
 import { Tooltip } from 'components/tooltip';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { download } from '../../services/download';
 import { uploadFile } from 'services/file';
 import {

packages/client/src/components/tiptap/wrappers/banner/index.module.scss

@@ -1,10 +1,10 @@
 .wrap {
   line-height: 0;
-  border-radius: var(--border-radius);
   border: 1px solid var(--semi-color-border);
+  border-radius: var(--border-radius);
 
   p {
-    margin-top: 0.25em;
+    margin-top: .25em;
   }
 
   p:first-child {
@@ -12,8 +12,8 @@
   }
 
   ul {
-    margin: 0;
     padding-left: 1em;
+    margin: 0;
   }
 
   .handlerWrap {

packages/client/src/components/tiptap/wrappers/codeBlock/index.module.scss

@@ -5,8 +5,8 @@
     display: flex;
     justify-content: space-between;
     padding: 6px 8px;
-    background-color: var(--semi-color-fill-0);
     border-bottom: 1px solid var(--semi-color-border);
+    background-color: var(--semi-color-fill-0);
 
     .selectorWrap {
       margin-right: 8px;

packages/client/src/components/tiptap/wrappers/documentChildren/index.module.scss

@@ -1,38 +1,38 @@
 .wrap {
-  margin-top: 0.75em;
   padding: 12px;
+  margin-top: .75em;
   border: 1px solid var(--semi-color-border);
   border-radius: var(--border-radius);
 
-  &.isEditable {
-    .itemWrap {
-      pointer-events: none;
-
-      &:hover {
-        color: var(--semi-color-text-1);
-        border-color: var(--semi-color-border);
-      }
-    }
-  }
-
   .itemWrap {
     display: flex;
-    align-items: center;
-    margin-top: 12px;
     padding: 6px;
-    text-decoration: none;
+    margin-top: 12px;
     color: var(--semi-color-text-1);
-    border-radius: var(--border-radius);
+    text-decoration: none;
-    border: 1px solid var(--semi-color-border);
     cursor: pointer;
+    border: 1px solid var(--semi-color-border);
+    border-radius: var(--border-radius);
+    align-items: center;
 
     &:hover {
-      color: var(--semi-color-link);
       border-color: var(--semi-color-link);
+      color: var(--semi-color-link);
     }
 
     span {
       margin-left: 8px;
     }
   }
+
+  &.isEditable {
+    .itemWrap {
+      pointer-events: none;
+
+      &:hover {
+        border-color: var(--semi-color-border);
+        color: var(--semi-color-text-1);
+      }
+    }
+  }
 }

packages/client/src/components/tiptap/wrappers/documentReference/index.module.scss

@@ -1,32 +1,19 @@
 .wrap {
-  margin-top: 0.75em;
+  margin-top: .75em;
   border-radius: var(--border-radius);
 
-  &.isEditable {
-    padding: 12px;
-
-    .itemWrap {
-      pointer-events: none;
-      margin-top: 12px;
-    }
-
-    .empty {
-      margin-top: 12px;
-    }
-  }
-
   .itemWrap {
     display: flex;
-    align-items: center;
     padding: 8px;
+    color: var(--semi-color-text-1);
+    text-decoration: none;
     border: 1px solid var(--semi-color-border);
     border-radius: var(--border-radius);
-    text-decoration: none;
+    align-items: center;
-    color: var(--semi-color-text-1);
 
     &:hover {
-      color: var(--semi-color-link);
       border-color: var(--semi-color-link);
+      color: var(--semi-color-link);
     }
 
     span {
@@ -36,12 +23,25 @@
 
   .empty {
     display: flex;
-    align-items: center;
     padding: 8px;
+    color: var(--semi-color-text-1);
+    text-decoration: none;
+    cursor: not-allowed;
     border: 1px solid var(--semi-color-border);
     border-radius: var(--border-radius);
-    text-decoration: none;
+    align-items: center;
-    color: var(--semi-color-text-1);
+  }
-    cursor: not-allowed;
+
+  &.isEditable {
+    padding: 12px;
+
+    .itemWrap {
+      margin-top: 12px;
+      pointer-events: none;
+    }
+
+    .empty {
+      margin-top: 12px;
+    }
   }
 }

packages/client/src/components/tiptap/wrappers/emojiList/index.module.scss

@@ -1,38 +1,38 @@
 .items {
-  border-radius: var(--border-radius);
-  background-color: var(--semi-color-bg-0);
-  box-shadow: rgb(9 30 66 / 31%) 0px 0px 1px, rgb(9 30 66 / 25%) 0px 4px 8px -2px;
   width: 200px;
   max-height: 380px;
   overflow-x: hidden;
   overflow-y: auto;
+  background-color: var(--semi-color-bg-0);
+  border-radius: var(--border-radius);
+  box-shadow: rgb(9 30 66 / 31%) 0 0 1px, rgb(9 30 66 / 25%) 0 4px 8px -2px;
 }
 
 .item {
-  align-items: center;
-  border-radius: 0px;
-  box-sizing: border-box;
-  cursor: pointer;
   display: flex;
-  flex: 0 0 auto;
-  background-color: rgb(255, 255, 255);
-  color: rgb(9, 30, 66);
-  fill: rgb(255, 255, 255);
-  text-decoration: none;
-  padding: 12px 12px 11px;
   width: 100%;
+  padding: 12px 12px 11px;
+  color: rgb(9 30 66);
+  text-decoration: none;
+  cursor: pointer;
+  background-color: rgb(255 255 255);
   border: 0;
+  border-radius: 0;
   outline: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  box-sizing: border-box;
+  fill: rgb(255 255 255);
 
   &:hover {
     background-color: #f4f5f7;
   }
 
   &.is-selected {
-    background-color: rgb(222, 235, 255);
+    color: rgb(0 82 204);
-    color: rgb(0, 82, 204);
-    fill: rgb(222, 235, 255);
     text-decoration: none;
+    background-color: rgb(222 235 255);
+    fill: rgb(222 235 255);
   }
 
   img {

packages/client/src/components/tiptap/wrappers/iframe/index.module.scss

@@ -1,15 +1,13 @@
 .wrap {
-  max-width: 100%;
-  height: 100%;
-  line-height: 0;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--semi-color-border);
-  background-color: var(--semi-color-fill-0);
-  overflow: visible;
-
   display: flex;
-  flex-direction: column;
+  height: 100%;
+  max-width: 100%;
   overflow: hidden;
+  line-height: 0;
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--border-radius);
+  flex-direction: column;
 
   .handlerWrap {
     display: flex;
@@ -17,11 +15,11 @@
   }
 
   .innerWrap {
-    flex: 1;
     position: relative;
     width: 100%;
-    border-radius: var(--border-radius);
     overflow: hidden;
+    border-radius: var(--border-radius);
+    flex: 1;
   }
 
   :global {

packages/client/src/components/tiptap/wrappers/image/index.module.scss

@@ -1,11 +1,11 @@
 .wrap {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   padding: 8px 16px;
+  cursor: pointer;
   border: 1px solid var(--semi-color-border);
   border-radius: var(--border-radius);
-  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
 
   &:hover {
     border: 1px solid var(--semi-color-link);

packages/client/src/components/tiptap/wrappers/image/index.tsx

@@ -3,7 +3,7 @@ import { Resizeable } from 'components/resizeable';
 import { useEffect, useRef } from 'react';
 import cls from 'classnames';
 import { Typography, Spin } from '@douyinfe/semi-ui';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { uploadFile } from 'services/file';
 import { extractFileExtension, extractFilename } from '../../services/file';
 import styles from './index.module.scss';

packages/client/src/components/tiptap/wrappers/menuList/index.module.scss

@@ -1,38 +1,38 @@
 .items {
-  border-radius: var(--border-radius);
-  background-color: var(--semi-color-bg-0);
-  box-shadow: rgb(9 30 66 / 31%) 0px 0px 1px, rgb(9 30 66 / 25%) 0px 4px 8px -2px;
   width: 200px;
   max-height: 380px;
   overflow-x: hidden;
   overflow-y: auto;
+  background-color: var(--semi-color-bg-0);
+  border-radius: var(--border-radius);
+  box-shadow: rgb(9 30 66 / 31%) 0 0 1px, rgb(9 30 66 / 25%) 0 4px 8px -2px;
 }
 
 .item {
-  align-items: center;
-  border-radius: 0px;
-  box-sizing: border-box;
-  cursor: pointer;
   display: flex;
-  flex: 0 0 auto;
-  background-color: rgb(255, 255, 255);
-  color: rgb(9, 30, 66);
-  fill: rgb(255, 255, 255);
-  text-decoration: none;
-  padding: 12px 12px 11px;
   width: 100%;
+  padding: 12px 12px 11px;
+  color: rgb(9 30 66);
+  text-decoration: none;
+  cursor: pointer;
+  background-color: rgb(255 255 255);
   border: 0;
+  border-radius: 0;
   outline: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  box-sizing: border-box;
+  fill: rgb(255 255 255);
 
   &:hover {
     background-color: #f4f5f7;
   }
 
   &.is-selected {
-    background-color: rgb(222, 235, 255);
+    color: rgb(0 82 204);
-    color: rgb(0, 82, 204);
-    fill: rgb(222, 235, 255);
     text-decoration: none;
+    background-color: rgb(222 235 255);
+    fill: rgb(222 235 255);
   }
 
   img {

packages/client/src/components/tiptap/wrappers/mind/index.module.scss

@@ -1,35 +1,75 @@
 .wrap {
   position: relative;
   max-width: 100%;
-  line-height: 0;
   overflow: visible;
+  line-height: 0;
   outline: none;
 
+  :global {
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    jmnodes {
+      /* stylelint-disable-next-line selector-type-no-unknown */
+      jmnode {
+        color: var(--semi-color-text-1);
+        background-color: var(--semi-color-fill-2);
+        outline: 2px solid transparent;
+        box-shadow: none;
+
+        &:first-of-type {
+          color: #fff;
+          background-color: var(--semi-color-link);
+        }
+
+        &.selected {
+          outline: 2px solid var(--semi-color-link);
+        }
+
+        input {
+          width: 100px !important;
+          height: 100%;
+          background-color: #fff;
+          border: 0;
+          outline: none;
+        }
+      }
+
+      /* stylelint-disable-next-line selector-type-no-unknown */
+      jmexpander {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 12px;
+        height: 12px;
+        border-color: var(--semi-color-border);
+      }
+    }
+  }
+
   .jsmindWrap {
     position: absolute;
+    bottom: 0;
     left: 50%;
-    bottom: 0px;
     z-index: 200;
     max-width: 100%;
-    transform: translate(-50%, 0);
-    opacity: 0;
     padding-bottom: 10px;
+    opacity: 0;
+    transform: translate(-50%, 0);
 
     .jsmindInnerWrap {
       padding: 6px;
+      background-color: var(--semi-color-bg-2);
+      border: 1px solid var(--semi-color-border);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
-      border: 1px solid var(--semi-color-border);
-      background-color: var(--semi-color-bg-2);
     }
   }
 
   .renderWrap {
     position: relative;
     min-height: 50px;
-    border-radius: var(--border-radius);
-    border: 1px solid var(--semi-color-border);
     overflow: hidden;
+    border: 1px solid var(--semi-color-border);
+    border-radius: var(--border-radius);
     outline: none;
 
     > input {
@@ -48,11 +88,11 @@
       bottom: 20px;
       z-index: 1000;
       padding: 4px 8px;
-      border-radius: var(--border-radius);
-      box-shadow: var(--box-shadow);
-      border: 1px solid var(--semi-color-border);
       background-color: var(--semi-color-bg-2);
+      border: 1px solid var(--semi-color-border);
+      border-radius: var(--border-radius);
       opacity: 0;
+      box-shadow: var(--box-shadow);
     }
   }
 
@@ -74,41 +114,4 @@
     padding: 10px;
     border-top: 1px solid var(--semi-color-border);
   }
-
-  :global {
-    jmnodes {
-      jmnode {
-        outline: 2px solid transparent;
-        color: var(--semi-color-text-1);
-        background-color: var(--semi-color-fill-2);
-        box-shadow: none;
-
-        &:first-of-type {
-          color: #fff;
-          background-color: var(--semi-color-link);
-        }
-
-        &.selected {
-          outline: 2px solid var(--semi-color-link);
-        }
-
-        input {
-          width: 100px !important;
-          height: 100%;
-          border: 0;
-          outline: none;
-          background-color: #fff;
-        }
-      }
-
-      jmexpander {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 12px;
-        height: 12px;
-        border-color: var(--semi-color-border);
-      }
-    }
-  }
 }

packages/client/src/components/tiptap/wrappers/status/index.module.scss

@@ -1,6 +1,6 @@
 .wrap {
   display: inline-block;
-  vertical-align: middle;
   font-size: 0;
+  vertical-align: middle;
   cursor: pointer;
 }

packages/client/src/components/tiptap/wrappers/taskItem/index.module.scss

@@ -1,5 +1,5 @@
 .wrap {
-  margin: 8px 0;
   display: inline-flex;
   justify-content: center;
+  margin: 8px 0;
 }

packages/client/src/components/tooltip/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import { Tooltip as SemiTooltip } from '@douyinfe/semi-ui';
 import { Position } from '@douyinfe/semi-ui/tooltip';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
-
-let id = 0;
 
 interface IProps {
   content: React.ReactNode;

packages/client/src/components/upload/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Upload as SemiUpload, Button, Toast } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
-import { useAsyncLoading } from 'hooks/useAsyncLoading';
+import { useAsyncLoading } from 'hooks/use-async-loading';
 import { uploadFile } from 'services/file';
 
 interface IProps {

packages/client/src/components/user/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Dropdown, Typography, Avatar, Button } from '@douyinfe/semi-ui';
 import { IconSpin } from '@douyinfe/semi-icons';
 import { useUser } from 'data/user';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { UserSetting } from './setting';
 
 const { Text } = Typography;

packages/client/src/components/wiki-creator/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { WikiCreator as WikiCreatorForm } from 'components/wiki/create';
 
 export const WikiCreator: React.FC = ({ children }) => {

packages/client/src/components/wiki-or-document-creator/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Dropdown, Button } from '@douyinfe/semi-ui';
 import { IconChevronDown } from '@douyinfe/semi-icons';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
-import { useQuery } from 'hooks/useQuery';
+import { useQuery } from 'hooks/use-query';
 import { WikiCreator } from 'components/wiki/create';
 import { DocumentCreator } from 'components/document/create';
 

packages/client/src/components/wiki/card/index.module.scss

@@ -2,23 +2,22 @@
   width: 100%;
 
   > a {
-    margin: 8px 0;
     display: flex;
-    flex-direction: column;
     width: 100%;
     max-height: 260px;
     padding: 12px 16px 16px;
-    border-radius: 5px;
+    margin: 8px 0;
-    border: 1px solid var(--semi-color-border);
     cursor: pointer;
+    border: 1px solid var(--semi-color-border);
+    border-radius: 5px;
+    flex-direction: column;
 
     > header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-
-      color: var(--semi-color-primary);
       margin-bottom: 12px;
+      color: var(--semi-color-primary);
 
       .rightWrap {
         opacity: 0;

packages/client/src/components/wiki/pin-card/index.module.scss

@@ -2,23 +2,22 @@
   width: 100%;
 
   > a {
-    margin: 8px 0;
     display: flex;
-    flex-direction: column;
     width: 100%;
     max-height: 260px;
     padding: 12px 16px 16px;
-    border-radius: 5px;
+    margin: 8px 0;
-    border: 1px solid var(--semi-color-border);
     cursor: pointer;
+    border: 1px solid var(--semi-color-border);
+    border-radius: 5px;
+    flex-direction: column;
 
     > header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-
-      color: var(--semi-color-primary);
       margin-bottom: 12px;
+      color: var(--semi-color-primary);
 
       .rightWrap {
         opacity: 0;

packages/client/src/components/wiki/setting/base/index.module.scss

@@ -8,14 +8,14 @@
     img {
       width: 104px;
       height: 96px;
-      border-radius: 4px;
       margin-bottom: 16px;
+      border-radius: 4px;
     }
   }
 
   .right {
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: column;
     justify-content: space-between;
     overflow: auto;
@@ -59,8 +59,8 @@
 
     .placeholderWrapper {
       width: 100%;
-      overflow: auto;
       margin: 16px 0;
+      overflow: auto;
 
       .coverPlaceholder {
         flex-shrink: 0;

packages/client/src/components/wiki/setting/documents/index.module.scss

@@ -1,6 +1,7 @@
+/* stylelint-disable */
 .statusWrap {
-  margin-top: 16px;
   padding: 10px 12px;
+  margin-top: 16px;
   border: 1px solid var(--semi-color-border);
   border-radius: 4px;
 
@@ -9,30 +10,13 @@
   }
 }
 
-.selectedItem {
-  :global {
-    .semi-icon-close {
-      visibility: hidden;
-      color: var(--semi-color-tertiary);
-    }
-  }
-
-  &:hover {
-    :global {
-      .semi-icon-close {
-        visibility: visible;
-      }
-    }
-  }
-}
-
 .selectedItem,
 .sourceItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   box-sizing: border-box;
   height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   padding: 10px 12px;
 
   &:hover {
@@ -40,8 +24,8 @@
   }
 
   .info {
-    margin-left: 8px;
     flex-grow: 1;
+    margin-left: 8px;
   }
 
   .name {
@@ -56,6 +40,23 @@
   }
 }
 
+.selectedItem {
+  :global {
+    .semi-icon-close {
+      color: var(--semi-color-tertiary);
+      visibility: hidden;
+    }
+  }
+
+  &:hover {
+    :global {
+      .semi-icon-close {
+        visibility: visible;
+      }
+    }
+  }
+}
+
 .transferWrap {
   width: 100%;
   overflow: auto;

packages/client/src/components/wiki/setting/users/index.tsx

@@ -5,7 +5,7 @@ import { useWikiUsers } from 'data/wiki';
 import { DataRender } from 'components/data-render';
 import { LocaleTime } from 'components/locale-time';
 import { getWikiUserRoleText } from '@think/domains';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { Placeholder } from './placeholder';
 import { AddUser } from './add';
 import { EditUser } from './edit';

packages/client/src/components/wiki/tocs/index.module.scss

@@ -10,76 +10,11 @@
   }
 }
 
-.navItemWrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--semi-color-text-0);
-
-  &.hoverable {
-    &:hover {
-      background-color: var(--semi-color-fill-0);
-      color: var(--semi-color-text-0);
-    }
-  }
-
-  &.isActive {
-    background-color: var(--semi-color-primary-light-default);
-    color: var(--semi-color-primary);
-  }
-
-  .navItem {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 12px 16px;
-    font-size: 14px;
-    border-radius: var(--semi-border-radius-small);
-    cursor: pointer;
-
-    > span {
-      display: flex;
-      align-items: center;
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 24px;
-      min-height: 24px;
-      margin: 0 6px 0 0;
-
-      :global {
-        .semi-icon-default {
-          font-size: 24px;
-        }
-      }
-    }
-
-    .title {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      color: var(--semi-color-text-0);
-    }
-  }
-
-  .rightWrap {
-    padding-right: 4px;
-  }
-}
-
-.docListTitle {
-  margin: 12px 0.5rem;
-}
-
 .treeInnerWrap {
   :global {
     .semi-tree-option-list-block .semi-tree-option-selected {
-      background-color: var(--semi-color-primary-light-default);
       color: var(--semi-color-primary);
+      background-color: var(--semi-color-primary-light-default);
     }
   }
 
@@ -103,3 +38,68 @@
     }
   }
 }
+
+.navItemWrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--semi-color-text-0);
+
+  &.hoverable {
+    &:hover {
+      color: var(--semi-color-text-0);
+      background-color: var(--semi-color-fill-0);
+    }
+  }
+
+  &.isActive {
+    color: var(--semi-color-primary);
+    background-color: var(--semi-color-primary-light-default);
+  }
+
+  .navItem {
+    display: flex;
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: var(--semi-border-radius-small);
+    align-items: center;
+
+    > span {
+      display: flex;
+      align-items: center;
+    }
+
+    .icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 24px;
+      min-height: 24px;
+      margin: 0 6px 0 0;
+
+      :global {
+        .semi-icon-default {
+          font-size: 24px;
+        }
+      }
+    }
+
+    .title {
+      overflow: hidden;
+      color: var(--semi-color-text-0);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+  }
+
+  .rightWrap {
+    padding-right: 4px;
+  }
+}
+
+.docListTitle {
+  margin: 12px .5rem;
+}

packages/client/src/components/wiki/tocs/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Avatar, Button, Typography, Skeleton } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 import { useWikiDetail, useWikiTocs } from 'data/wiki';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { Seo } from 'components/seo';
 import { findParents } from 'components/wiki/tocs/utils';
 import { IconDocument, IconSetting, IconOverview } from 'components/icons';

packages/client/src/components/wiki/tocs/manager/index.module.scss

@@ -3,9 +3,9 @@
 
   .tocsWrap {
     height: 420px;
+    overflow: auto;
     border: 1px solid var(--semi-color-border);
     border-radius: var(--border-radius);
-    overflow: auto;
   }
 
   .btnWrap {

packages/client/src/components/wiki/tocs/tree.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { Tree as SemiTree, Button, Typography } from '@douyinfe/semi-ui';
 import { IconMore, IconPlus } from '@douyinfe/semi-icons';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { DocumentActions } from 'components/document/actions';
 import { DocumentCreator as DocumenCreatorForm } from 'components/document/create';
 import { EventEmitter } from 'helpers/event-emitter';

packages/client/src/data/document.ts

@@ -1,7 +1,7 @@
 import type { IUser, IDocument } from '@think/domains';
 import useSWR from 'swr';
 import { useState, useCallback, useEffect } from 'react';
-import { useAsyncLoading } from 'hooks/useAsyncLoading';
+import { useAsyncLoading } from 'hooks/use-async-loading';
 import { HttpClient } from 'services/HttpClient';
 import { getPublicDocumentDetail } from 'services/document';
 

packages/client/src/hooks/use-dragable-width.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import useSWR from 'swr';
-import { useWindowSize } from 'hooks/useWindowSize';
+import { useWindowSize } from 'hooks/use-window-size';
 import { setStorage, getStorage } from 'helpers/storage';
 
 const key = 'dragable-menu-width';

packages/client/src/hooks/useIsomorphicLayoutEffect.tsx

@@ -1,5 +0,0 @@
-import { useEffect, useLayoutEffect } from 'react';
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-export default useIsomorphicLayoutEffect;

packages/client/src/layouts/double-column/index.module.scss

@@ -1,13 +1,12 @@
 .wrap {
   display: flex;
   flex-direction: column;
-
   height: 100%;
   background-color: var(--semi-color-nav-bg);
 
   .contentWrap {
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-wrap: nowrap;
     overflow: hidden;
 
@@ -32,11 +31,11 @@
 
       .collapseBtn {
         position: absolute;
-        z-index: 100;
         top: 1rem;
         right: 0;
-        transform: translate(50%);
+        z-index: 100;
         opacity: 0;
+        transform: translate(50%);
 
         &.isCollapsed {
           opacity: 1;

packages/client/src/layouts/double-column/index.tsx

@@ -3,7 +3,7 @@ import cls from 'classnames';
 import { Layout as SemiLayout, Button } from '@douyinfe/semi-ui';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 import SplitPane from 'react-split-pane';
-import { useDragableWidth, MIN_WIDTH, MAX_WIDTH } from 'hooks/useDragableWidth';
+import { useDragableWidth, MIN_WIDTH, MAX_WIDTH } from 'hooks/use-dragable-width';
 import { RouterHeader } from '../router-header';
 import styles from './index.module.scss';
 

packages/client/src/layouts/public-double-column/index.module.scss

@@ -23,11 +23,11 @@
 
     .collapseBtn {
       position: absolute;
-      z-index: 100;
       top: 1rem;
       right: 0;
-      transform: translate(50%);
+      z-index: 100;
       opacity: 0;
+      transform: translate(50%);
 
       &.isCollapsed {
         opacity: 1;

packages/client/src/layouts/public-double-column/index.tsx

@@ -3,7 +3,7 @@ import cls from 'classnames';
 import { Layout as SemiLayout, Button } from '@douyinfe/semi-ui';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 import SplitPane from 'react-split-pane';
-import { useDragableWidth, MIN_WIDTH, MAX_WIDTH } from 'hooks/useDragableWidth';
+import { useDragableWidth, MIN_WIDTH, MAX_WIDTH } from 'hooks/use-dragable-width';
 import styles from './index.module.scss';
 
 const { Sider, Content } = SemiLayout;

packages/client/src/layouts/router-header/Recent.tsx

@@ -8,7 +8,7 @@ import { DataRender } from 'components/data-render';
 import { LocaleTime } from 'components/locale-time';
 import { DocumentStar } from 'components/document/star';
 import { IconDocumentFill } from 'components/icons/IconDocumentFill';
-import { Placeholder } from './Placeholder';
+import { Placeholder } from './placeholder';
 import styles from './index.module.scss';
 
 const { Text } = Typography;

packages/client/src/layouts/router-header/Wiki.tsx

@@ -7,7 +7,7 @@ import { useStaredWikis, useWikiDetail } from 'data/wiki';
 import { Empty } from 'components/empty';
 import { DataRender } from 'components/data-render';
 import { WikiStar } from 'components/wiki/star';
-import { Placeholder } from './Placeholder';
+import { Placeholder } from './placeholder';
 import styles from './index.module.scss';
 
 const { Text } = Typography;

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

@@ -11,22 +11,22 @@
   border-radius: var(--semi-border-radius-small);
 
   &:hover {
-    background-color: var(--semi-color-fill-0);
     color: var(--semi-color-text-0);
+    background-color: var(--semi-color-fill-0);
   }
 
   .item {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
     width: 100%;
     padding: 8px 16px;
 
     .leftWrap {
       display: flex;
       align-items: center;
-      color: var(--semi-color-primary);
       padding-left: 8px;
+      color: var(--semi-color-primary);
 
       svg {
         fill: var(--semi-color-primary);

packages/client/src/layouts/router-header/index.tsx

@@ -8,12 +8,75 @@ import { LogoImage, LogoText } from 'components/logo';
 import { Theme } from 'components/theme';
 import { Message } from 'components/message';
 import { Search } from 'components/search';
-import { useWindowSize } from 'hooks/useWindowSize';
+import { useWindowSize } from 'hooks/use-window-size';
-import { Recent } from './Recent';
+import { Recent } from './recent';
-import { Wiki } from './Wiki';
+import { Wiki } from './wiki';
 
 const { Header: SemiHeader } = SemiLayout;
 
+const menus = [
+  {
+    itemKey: '/',
+    text: (
+      <Link href="/">
+        <a>主页</a>
+      </Link>
+    ),
+    onClick: () => {
+      Router.push({
+        pathname: `/`,
+      });
+    },
+  },
+  {
+    itemKey: '/recent',
+    text: <Recent />,
+  },
+  {
+    itemKey: '/wiki',
+    text: <Wiki />,
+  },
+  {
+    itemKey: '/star',
+    text: (
+      <Link href="/star">
+        <a>收藏</a>
+      </Link>
+    ),
+    onClick: () => {
+      Router.push({
+        pathname: `/star`,
+      });
+    },
+  },
+  {
+    itemKey: '/template',
+    text: (
+      <Link href="/template">
+        <a>模板</a>
+      </Link>
+    ),
+    onClick: () => {
+      Router.push({
+        pathname: `/template`,
+      });
+    },
+  },
+  {
+    itemKey: '/find',
+    text: (
+      <Link href="/find">
+        <a>发现</a>
+      </Link>
+    ),
+    onClick: () => {
+      Router.push({
+        pathname: `/find`,
+      });
+    },
+  },
+];
+
 export const RouterHeader: React.FC = () => {
   const { pathname } = useRouter();
   const windowSize = useWindowSize();
@@ -30,68 +93,7 @@ export const RouterHeader: React.FC = () => {
           </Space>
         }
         selectedKeys={[pathname || '/']}
-        items={[
+        items={menus}
-          {
-            itemKey: '/',
-            text: (
-              <Link href="/">
-                <a>主页</a>
-              </Link>
-            ),
-            onClick: () => {
-              Router.push({
-                pathname: `/`,
-              });
-            },
-          },
-          {
-            itemKey: '/recent',
-            text: <Recent />,
-          },
-          {
-            itemKey: '/wiki',
-            text: <Wiki />,
-          },
-          {
-            itemKey: '/star',
-            text: (
-              <Link href="/star">
-                <a>收藏</a>
-              </Link>
-            ),
-            onClick: () => {
-              Router.push({
-                pathname: `/star`,
-              });
-            },
-          },
-          {
-            itemKey: '/template',
-            text: (
-              <Link href="/template">
-                <a>模板</a>
-              </Link>
-            ),
-            onClick: () => {
-              Router.push({
-                pathname: `/template`,
-              });
-            },
-          },
-          {
-            itemKey: '/find',
-            text: (
-              <Link href="/find">
-                <a>发现</a>
-              </Link>
-            ),
-            onClick: () => {
-              Router.push({
-                pathname: `/find`,
-              });
-            },
-          },
-        ]}
         footer={
           <Space>
             <WikiOrDocumentCreator />

packages/client/src/pages/index.module.scss

@@ -1,9 +1,9 @@
 .wikiItemWrap {
-  cursor: pointer;
-  border: 1px solid var(--semi-color-border) !important;
-  background-color: var(--semi-color-bg-2);
   padding: 12px 16px !important;
   margin: 8px 2px;
+  cursor: pointer;
+  background-color: var(--semi-color-bg-2);
+  border: 1px solid var(--semi-color-border) !important;
 }
 
 .titleWrap {

packages/client/src/pages/index.tsx

@@ -3,7 +3,7 @@ import type { IDocument } from '@think/domains';
 import Link from 'next/link';
 import React from 'react';
 import { Typography, Button, Table, Spin, List } from '@douyinfe/semi-ui';
-import { useToggle } from 'hooks/useToggle';
+import { useToggle } from 'hooks/use-toggle';
 import { Seo } from 'components/seo';
 import { DataRender } from 'components/data-render';
 import { SingleColumnLayout } from 'layouts/single-column';