From 79aa8a6539111e0f49e862481019c4c9e325c81e Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 10 May 2022 18:26:59 +0800
Subject: [PATCH 1/7] refactor(comments): re-org file structure

---
 .../unit/Comments/HeadBar/Actions.tsx         |  83 ++++++++++++
 .../unit/Comments/HeadBar/index.tsx           |  63 +++++++++
 src/containers/unit/Comments/List/Header.tsx  | 126 ------------------
 src/containers/unit/Comments/List/index.tsx   |  15 +--
 src/containers/unit/Comments/index.tsx        |  16 ++-
 .../{list/header.ts => head_bar/index.ts}     |   8 +-
 src/widgets/AnimatedCount/styles/metric.ts    |   2 +-
 src/widgets/Common/index.ts                   |   2 +-
 8 files changed, 169 insertions(+), 146 deletions(-)
 create mode 100644 src/containers/unit/Comments/HeadBar/Actions.tsx
 create mode 100644 src/containers/unit/Comments/HeadBar/index.tsx
 delete mode 100644 src/containers/unit/Comments/List/Header.tsx
 rename src/containers/unit/Comments/styles/{list/header.ts => head_bar/index.ts} (94%)

diff --git a/src/containers/unit/Comments/HeadBar/Actions.tsx b/src/containers/unit/Comments/HeadBar/Actions.tsx
new file mode 100644
index 000000000..5de68d558
--- /dev/null
+++ b/src/containers/unit/Comments/HeadBar/Actions.tsx
@@ -0,0 +1,83 @@
+import { FC, memo, Fragment } from 'react'
+
+import { ICON } from '@/config'
+import { SVG } from '@/constant'
+
+import IconButton from '@/widgets/Buttons/IconButton'
+import { IconSwitcher } from '@/widgets/Switcher'
+
+import { MODE, API_MODE } from '../constant'
+import type { TMode } from '../spec'
+import type { TProps as TBase } from './index'
+import { foldAllComments, expandAllComments, onModeChange } from '../logic'
+
+type TProps = Pick<TBase, 'mode' | 'apiMode' | 'isAllFolded'>
+
+const actionIconConfig = {
+  right: 11,
+  hintDelay: 200,
+}
+
+const switchItems = [
+  {
+    key: MODE.REPLIES,
+    iconSrc: `${ICON}/article/comment-reply-mode.svg`,
+    desc: '回复模式',
+  },
+  {
+    key: MODE.TIMELINE,
+    iconSrc: `${ICON}/article/comment-timeline-mode.svg`,
+    desc: '时间线模式',
+  },
+]
+
+const Actions: FC<TProps> = ({ mode, isAllFolded, apiMode }) => {
+  return (
+    <Fragment>
+      {/* {apiMode === API_MODE.ARTICLE && (
+          <IconButton
+            icon={SVG.LOCK}
+            hint="关闭讨论"
+            {...actionIconConfig}
+            top={-1}
+          />
+        )} */}
+
+      {/* {apiMode === API_MODE.ARTICLE && (
+          <IconButton
+            path="article/notify-on.svg"
+            hint="订阅讨论"
+            {...actionIconConfig}
+          />
+        )} */}
+
+      {isAllFolded ? (
+        <IconButton
+          {...actionIconConfig}
+          icon={SVG.EXPAND}
+          size={13}
+          hint="展开全部"
+          active
+          onClick={expandAllComments}
+        />
+      ) : (
+        <IconButton
+          icon={SVG.FOLD}
+          {...actionIconConfig}
+          size={13}
+          hint="折叠全部"
+          onClick={foldAllComments}
+        />
+      )}
+      {apiMode === API_MODE.ARTICLE && (
+        <IconSwitcher
+          items={switchItems}
+          activeKey={mode}
+          onChange={({ key }) => onModeChange(key as TMode)}
+        />
+      )}
+    </Fragment>
+  )
+}
+
+export default memo(Actions)
diff --git a/src/containers/unit/Comments/HeadBar/index.tsx b/src/containers/unit/Comments/HeadBar/index.tsx
new file mode 100644
index 000000000..a1ce145a4
--- /dev/null
+++ b/src/containers/unit/Comments/HeadBar/index.tsx
@@ -0,0 +1,63 @@
+import { FC, memo } from 'react'
+
+import type { TCommentsState } from '@/spec'
+
+import { LineDivider } from '@/widgets/Common'
+import Button from '@/widgets/Buttons/Button'
+import { LavaLampLoading } from '@/widgets/Loading'
+
+import Actions from './Actions'
+
+import {
+  Wrapper,
+  TotalTitle,
+  TotalCountWrapper,
+  TotalNum,
+  ActionsWrapper,
+  EditIcon,
+} from '../styles/head_bar'
+
+import type { TMode, TAPIMode } from '../spec'
+
+export type TProps = {
+  mode: TMode
+  apiMode: TAPIMode
+  isAllFolded: boolean
+  loading: boolean
+  basicState: TCommentsState
+}
+
+const Header: FC<TProps> = ({
+  basicState,
+  mode,
+  isAllFolded,
+  loading,
+  apiMode,
+}) => {
+  return (
+    <Wrapper>
+      <TotalCountWrapper>
+        <TotalTitle>
+          共
+          <TotalNum highlight={basicState.isViewerJoined}>
+            {basicState.totalCount}
+          </TotalNum>
+          条讨论
+        </TotalTitle>
+      </TotalCountWrapper>
+      <ActionsWrapper>
+        {loading && <LavaLampLoading right={15} />}
+
+        <Button size="small" space={10}>
+          <EditIcon />
+          讨论
+        </Button>
+        <LineDivider left={18} />
+
+        <Actions mode={mode} isAllFolded={isAllFolded} apiMode={apiMode} />
+      </ActionsWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(Header)
diff --git a/src/containers/unit/Comments/List/Header.tsx b/src/containers/unit/Comments/List/Header.tsx
deleted file mode 100644
index f23151dc1..000000000
--- a/src/containers/unit/Comments/List/Header.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { FC, memo } from 'react'
-
-import type { TCommentsState } from '@/spec'
-import { ICON } from '@/config'
-import { SVG } from '@/constant'
-
-import { LineDivider } from '@/widgets/Common'
-import Button from '@/widgets/Buttons/Button'
-import IconButton from '@/widgets/Buttons/IconButton'
-import { IconSwitcher } from '@/widgets/Switcher'
-import { LavaLampLoading } from '@/widgets/Loading'
-
-import {
-  Wrapper,
-  TotalTitle,
-  TotalCountWrapper,
-  TotalNum,
-  ActionsWrapper,
-  EditIcon,
-} from '../styles/list/header'
-
-import { MODE, API_MODE } from '../constant'
-import type { TMode, TAPIMode } from '../spec'
-import { foldAllComments, expandAllComments, onModeChange } from '../logic'
-
-type TProps = {
-  mode: TMode
-  apiMode: TAPIMode
-  isAllFolded: boolean
-  loading: boolean
-  basicState: TCommentsState
-}
-
-const actionIconConfig = {
-  right: 11,
-  hintDelay: 200,
-}
-
-const switchItems = [
-  {
-    key: MODE.REPLIES,
-    iconSrc: `${ICON}/article/comment-reply-mode.svg`,
-    desc: '回复模式',
-  },
-  {
-    key: MODE.TIMELINE,
-    iconSrc: `${ICON}/article/comment-timeline-mode.svg`,
-    desc: '时间线模式',
-  },
-]
-
-const Header: FC<TProps> = ({
-  basicState,
-  mode,
-  isAllFolded,
-  loading,
-  apiMode,
-}) => {
-  return (
-    <Wrapper>
-      <TotalCountWrapper>
-        <TotalTitle>
-          共
-          <TotalNum highlight={basicState.isViewerJoined}>
-            {basicState.totalCount}
-          </TotalNum>
-          条讨论
-        </TotalTitle>
-      </TotalCountWrapper>
-      <ActionsWrapper>
-        {loading && <LavaLampLoading right={15} />}
-
-        <Button size="small" space={10}>
-          <EditIcon />
-          讨论
-        </Button>
-        <LineDivider left={18} />
-
-        {/* {apiMode === API_MODE.ARTICLE && (
-          <IconButton
-            icon={SVG.LOCK}
-            hint="关闭讨论"
-            {...actionIconConfig}
-            top={-1}
-          />
-        )} */}
-
-        {/* {apiMode === API_MODE.ARTICLE && (
-          <IconButton
-            path="article/notify-on.svg"
-            hint="订阅讨论"
-            {...actionIconConfig}
-          />
-        )} */}
-
-        {isAllFolded ? (
-          <IconButton
-            {...actionIconConfig}
-            icon={SVG.EXPAND}
-            size={13}
-            hint="展开全部"
-            active
-            onClick={expandAllComments}
-          />
-        ) : (
-          <IconButton
-            icon={SVG.FOLD}
-            {...actionIconConfig}
-            size={13}
-            hint="折叠全部"
-            onClick={foldAllComments}
-          />
-        )}
-        {apiMode === API_MODE.ARTICLE && (
-          <IconSwitcher
-            items={switchItems}
-            activeKey={mode}
-            onChange={({ key }) => onModeChange(key as TMode)}
-          />
-        )}
-      </ActionsWrapper>
-    </Wrapper>
-  )
-}
-
-export default memo(Header)
diff --git a/src/containers/unit/Comments/List/index.tsx b/src/containers/unit/Comments/List/index.tsx
index e74ff61ce..1146949ea 100644
--- a/src/containers/unit/Comments/List/index.tsx
+++ b/src/containers/unit/Comments/List/index.tsx
@@ -4,7 +4,6 @@ import type { TPagedComments, TCommentsState } from '@/spec'
 import Pagi from '@/widgets/Pagi'
 import { Br } from '@/widgets/Common'
 
-import Header from './Header'
 import List from './List'
 
 import type { TMode, TFoldState, TRepliesState, TAPIMode } from '../spec'
@@ -18,7 +17,7 @@ type TProps = {
   mode: TMode
   apiMode: TAPIMode
   repliesState: TRepliesState
-  basicState: TCommentsState
+  // basicState: TCommentsState
   loading: boolean
 }
 
@@ -28,23 +27,13 @@ const CommentsList: FC<TProps> = ({
   mode,
   apiMode,
   repliesState,
-  basicState,
   loading,
 }) => {
   const { entries, totalCount, pageSize, pageNumber } = pagedComments
-  const { foldedIds, isAllFolded } = foldState
+  const { foldedIds } = foldState
 
   return (
     <Fragment>
-      {totalCount > 0 && (
-        <Header
-          apiMode={apiMode}
-          isAllFolded={isAllFolded}
-          basicState={basicState}
-          mode={mode}
-          loading={loading}
-        />
-      )}
       <ListsWrapper>
         <List
           mode={mode}
diff --git a/src/containers/unit/Comments/index.tsx b/src/containers/unit/Comments/index.tsx
index 06e53c86e..7c12a3985 100755
--- a/src/containers/unit/Comments/index.tsx
+++ b/src/containers/unit/Comments/index.tsx
@@ -22,6 +22,8 @@ import { API_MODE } from './constant'
 import { Wrapper } from './styles'
 import { useInit } from './logic'
 
+import HeadBar from './HeadBar'
+
 /* eslint-disable-next-line */
 const log = buildLog('C:Comments')
 
@@ -48,6 +50,9 @@ const CommentsContainer: FC<TProps> = ({
     basicState,
   } = store
 
+  const { isAllFolded } = foldState
+  const { totalCount } = pagedCommentsData
+
   return (
     <Wrapper id={ANCHOR.COMMENTS_ID}>
       {apiMode === API_MODE.ARTICLE && <Editor editState={editState} />}
@@ -61,8 +66,17 @@ const CommentsContainer: FC<TProps> = ({
         isArticleAuthor={false}
       /> */}
 
+      {totalCount > 0 && (
+        <HeadBar
+          apiMode={apiMode}
+          isAllFolded={isAllFolded}
+          basicState={basicState}
+          mode={mode}
+          loading={loading}
+        />
+      )}
+
       <List
-        basicState={basicState}
         mode={mode}
         apiMode={apiMode}
         foldState={foldState}
diff --git a/src/containers/unit/Comments/styles/list/header.ts b/src/containers/unit/Comments/styles/head_bar/index.ts
similarity index 94%
rename from src/containers/unit/Comments/styles/list/header.ts
rename to src/containers/unit/Comments/styles/head_bar/index.ts
index 757427268..4a1193595 100644
--- a/src/containers/unit/Comments/styles/list/header.ts
+++ b/src/containers/unit/Comments/styles/head_bar/index.ts
@@ -21,7 +21,7 @@ export const TotalCountWrapper = styled.div`
 `
 export const TotalTitle = styled.div`
   color: ${theme('thread.articleDigest')};
-  font-size: 14px;
+  font-size: 13px;
   margin-left: 1px;
 
   ${css.media.mobile`
@@ -34,9 +34,9 @@ export const TotalNum = styled.span<{ highlight: boolean }>`
   color: ${({ highlight }) =>
     highlight ? theme('comment.number') : theme('thread.articleTitle')};
   font-weight: bold;
-  font-size: 17px;
-  margin-left: 6px;
-  margin-right: 6px;
+  font-size: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
 `
 export const CommentBlock = styled.div`
   ${css.flex()};
diff --git a/src/widgets/AnimatedCount/styles/metric.ts b/src/widgets/AnimatedCount/styles/metric.ts
index d4a8f695e..dac4f9402 100644
--- a/src/widgets/AnimatedCount/styles/metric.ts
+++ b/src/widgets/AnimatedCount/styles/metric.ts
@@ -6,7 +6,7 @@ import { theme } from '@/utils/css'
 export const getFontSize = (size: TSIZE): string => {
   switch (size) {
     case SIZE.TINY: {
-      return '13px'
+      return '14px'
     }
     case SIZE.MEDIUM: {
       return '18px'
diff --git a/src/widgets/Common/index.ts b/src/widgets/Common/index.ts
index bc2c90514..9d78eba91 100755
--- a/src/widgets/Common/index.ts
+++ b/src/widgets/Common/index.ts
@@ -25,7 +25,7 @@ export const Divider = styled.div<TSpace>`
 type TLineDivider = TSpace & { height?: number }
 export const LineDivider = styled.div<TLineDivider>`
   background: ${theme('thread.articleDigest')};
-  opacity: 0.85;
+  opacity: 0.7;
   width: 1px;
   height: ${({ height }) => `${height || 12}px`};
 

From fa0207cc27659e05f38a3e6e166968983356f08c Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 10 May 2022 21:41:00 +0800
Subject: [PATCH 2/7] refactor(comments): switch bar mode ux

---
 .../editor/RichEditor/styles/index.ts         |  4 +-
 .../editor/RichEditor/styles/metric.ts        |  2 +-
 .../editor/RichEditor/styles/overwrite.ts     |  2 +-
 .../unit/Comments/Editor/PublishEditor.tsx    | 32 ++++------
 src/containers/unit/Comments/Editor/index.tsx | 12 ----
 .../unit/Comments/HeadBar/PublishBar.tsx      | 46 ++++++++++++++
 .../HeadBar/{ => StateBar}/Actions.tsx        | 18 +++---
 .../unit/Comments/HeadBar/StateBar/index.tsx  | 60 ++++++++++++++++++
 .../unit/Comments/HeadBar/index.tsx           | 63 +++++++++----------
 src/containers/unit/Comments/index.tsx        |  1 +
 .../Comments/styles/editor/publish_editor.ts  | 28 ++-------
 .../unit/Comments/styles/head_bar/index.ts    | 45 +------------
 .../Comments/styles/head_bar/publish_bar.ts   | 29 +++++++++
 .../styles/head_bar/state_bar/actions.ts      |  8 +++
 .../styles/head_bar/state_bar/index.ts        | 49 +++++++++++++++
 src/widgets/Switcher/styles/icon_selector.ts  | 12 ++--
 16 files changed, 258 insertions(+), 153 deletions(-)
 create mode 100644 src/containers/unit/Comments/HeadBar/PublishBar.tsx
 rename src/containers/unit/Comments/HeadBar/{ => StateBar}/Actions.tsx (86%)
 create mode 100644 src/containers/unit/Comments/HeadBar/StateBar/index.tsx
 create mode 100644 src/containers/unit/Comments/styles/head_bar/publish_bar.ts
 create mode 100644 src/containers/unit/Comments/styles/head_bar/state_bar/actions.ts
 create mode 100644 src/containers/unit/Comments/styles/head_bar/state_bar/index.ts

diff --git a/src/containers/editor/RichEditor/styles/index.ts b/src/containers/editor/RichEditor/styles/index.ts
index dbfbd9c80..c1100d488 100755
--- a/src/containers/editor/RichEditor/styles/index.ts
+++ b/src/containers/editor/RichEditor/styles/index.ts
@@ -19,8 +19,8 @@ export const EditorWrapper = styled(EditWrapperBase).attrs(() => ({
 }))`
   color: ${theme('thread.articleTitle')};
   min-height: ${({ type }) => getMinHeight(type)};
-  border-top: 1px solid;
-  border-top-color: #1a3a40;
+  border-bottom: 3px solid;
+  border-bottom-color: ${theme('border')};
   // media therdhold is 651
   width: 100%;
   padding-top: 10px;
diff --git a/src/containers/editor/RichEditor/styles/metric.ts b/src/containers/editor/RichEditor/styles/metric.ts
index 066275a63..1ebb8424a 100644
--- a/src/containers/editor/RichEditor/styles/metric.ts
+++ b/src/containers/editor/RichEditor/styles/metric.ts
@@ -1,7 +1,7 @@
 export const getWidth = (type) => {
   switch (type) {
     case 'comment': {
-      return '600px'
+      return '620px'
     }
     default: {
       return '680px'
diff --git a/src/containers/editor/RichEditor/styles/overwrite.ts b/src/containers/editor/RichEditor/styles/overwrite.ts
index 03727dc36..ac93f65ec 100644
--- a/src/containers/editor/RichEditor/styles/overwrite.ts
+++ b/src/containers/editor/RichEditor/styles/overwrite.ts
@@ -16,7 +16,7 @@ const RichEditorStyle = createGlobalStyle`
   }
 
   .ce-paragraph[data-placeholder]:empty::before {
-    color: #4d666c !important;
+    color: #a2a2a2 !important;
   }
 
   .codex-editor svg {
diff --git a/src/containers/unit/Comments/Editor/PublishEditor.tsx b/src/containers/unit/Comments/Editor/PublishEditor.tsx
index 387f4b5fc..c33d495bc 100644
--- a/src/containers/unit/Comments/Editor/PublishEditor.tsx
+++ b/src/containers/unit/Comments/Editor/PublishEditor.tsx
@@ -1,45 +1,35 @@
 import { FC, memo } from 'react'
 
-import type { TAccount, TSubmitState } from '@/spec'
+import type { TSubmitState } from '@/spec'
 
-import Header from './Header'
+// import Header from './Header'
 import BodyEditor from './BodyEditor'
-import Footer from './Footer'
 
-import { Wrapper, ExpandWrapper } from '../styles/editor/publish_editor'
-import { commentOnChange, createComment, closeEditor } from '../logic'
+import { Wrapper } from '../styles/editor/publish_editor'
+// import { commentOnChange, createComment, closeEditor } from '../logic'
+import { commentOnChange } from '../logic'
 
 type TProps = {
-  accountInfo: TAccount
   body: string
   submitState: TSubmitState
-  showEditor: boolean
 }
 
-const PublishEditor: FC<TProps> = ({
-  accountInfo,
-  submitState,
-  showEditor,
-  body,
-}) => {
-  if (!showEditor) {
-    return <Wrapper />
-  }
+const PublishEditor: FC<TProps> = ({ submitState, body }) => {
   return (
-    <ExpandWrapper>
-      <Header accountInfo={accountInfo} showEditor={showEditor} />
+    <Wrapper>
+      {/* <Header accountInfo={accountInfo} showEditor={showEditor} /> */}
       <BodyEditor
         body={body}
         onChange={(v) => commentOnChange(v, 'commentBody')}
       />
 
-      <Footer
+      {/* <Footer
         submitState={submitState}
         body={body}
         onPublish={createComment}
         onCancel={closeEditor}
-      />
-    </ExpandWrapper>
+      /> */}
+    </Wrapper>
   )
 }
 
diff --git a/src/containers/unit/Comments/Editor/index.tsx b/src/containers/unit/Comments/Editor/index.tsx
index d8f2f656c..ee3e49fe0 100644
--- a/src/containers/unit/Comments/Editor/index.tsx
+++ b/src/containers/unit/Comments/Editor/index.tsx
@@ -4,7 +4,6 @@ import Modal from '@/widgets/Modal'
 
 import ReplyEditor from './ReplyEditor'
 import UpdateEditor from './UpdateEditor'
-import PublishEditor from './PublishEditor'
 
 import type { TEditState } from '../spec'
 import { closeUpdateEditor, onReplyEditorClose } from '../logic'
@@ -15,10 +14,6 @@ type TProps = {
 
 const CommentEditor: FC<TProps> = ({ editState }) => {
   const {
-    // publish
-    commentBody,
-    showEditor,
-    accountInfo,
     // update
     showUpdateEditor,
     updateId,
@@ -61,13 +56,6 @@ const CommentEditor: FC<TProps> = ({ editState }) => {
           />
         )}
       </Modal>
-
-      <PublishEditor
-        body={commentBody}
-        showEditor={showEditor}
-        accountInfo={accountInfo}
-        submitState={submitState}
-      />
     </Fragment>
   )
 }
diff --git a/src/containers/unit/Comments/HeadBar/PublishBar.tsx b/src/containers/unit/Comments/HeadBar/PublishBar.tsx
new file mode 100644
index 000000000..deaff71d7
--- /dev/null
+++ b/src/containers/unit/Comments/HeadBar/PublishBar.tsx
@@ -0,0 +1,46 @@
+import { FC, memo } from 'react'
+
+import { mockUsers } from '@/utils/mock'
+import Button from '@/widgets/Buttons/Button'
+
+import {
+  Wrapper,
+  AccountWrapper,
+  Avatar,
+  UserName,
+  ActionsWrapper,
+  EditIcon,
+} from '../styles/head_bar/publish_bar'
+
+type TProps = {
+  closeEditor: () => void
+}
+
+const PublishBar: FC<TProps> = ({ closeEditor }) => {
+  return (
+    <Wrapper>
+      <AccountWrapper>
+        <Avatar src={mockUsers(3)[0].avatar} />
+        <UserName>mydearxym</UserName>
+      </AccountWrapper>
+      <ActionsWrapper>
+        <Button
+          size="small"
+          space={20}
+          ghost
+          noBorder
+          onClick={() => closeEditor()}
+        >
+          取消
+        </Button>
+
+        <Button size="small" space={10}>
+          <EditIcon />
+          发布
+        </Button>
+      </ActionsWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(PublishBar)
diff --git a/src/containers/unit/Comments/HeadBar/Actions.tsx b/src/containers/unit/Comments/HeadBar/StateBar/Actions.tsx
similarity index 86%
rename from src/containers/unit/Comments/HeadBar/Actions.tsx
rename to src/containers/unit/Comments/HeadBar/StateBar/Actions.tsx
index 5de68d558..3bbe60523 100644
--- a/src/containers/unit/Comments/HeadBar/Actions.tsx
+++ b/src/containers/unit/Comments/HeadBar/StateBar/Actions.tsx
@@ -1,4 +1,4 @@
-import { FC, memo, Fragment } from 'react'
+import { FC, memo } from 'react'
 
 import { ICON } from '@/config'
 import { SVG } from '@/constant'
@@ -6,10 +6,13 @@ import { SVG } from '@/constant'
 import IconButton from '@/widgets/Buttons/IconButton'
 import { IconSwitcher } from '@/widgets/Switcher'
 
-import { MODE, API_MODE } from '../constant'
-import type { TMode } from '../spec'
-import type { TProps as TBase } from './index'
-import { foldAllComments, expandAllComments, onModeChange } from '../logic'
+import { MODE, API_MODE } from '../../constant'
+
+import type { TMode } from '../../spec'
+import type { TProps as TBase } from '../index'
+
+import { Wrapper } from '../../styles/head_bar/state_bar/actions'
+import { foldAllComments, expandAllComments, onModeChange } from '../../logic'
 
 type TProps = Pick<TBase, 'mode' | 'apiMode' | 'isAllFolded'>
 
@@ -33,7 +36,7 @@ const switchItems = [
 
 const Actions: FC<TProps> = ({ mode, isAllFolded, apiMode }) => {
   return (
-    <Fragment>
+    <Wrapper>
       {/* {apiMode === API_MODE.ARTICLE && (
           <IconButton
             icon={SVG.LOCK}
@@ -69,6 +72,7 @@ const Actions: FC<TProps> = ({ mode, isAllFolded, apiMode }) => {
           onClick={foldAllComments}
         />
       )}
+
       {apiMode === API_MODE.ARTICLE && (
         <IconSwitcher
           items={switchItems}
@@ -76,7 +80,7 @@ const Actions: FC<TProps> = ({ mode, isAllFolded, apiMode }) => {
           onChange={({ key }) => onModeChange(key as TMode)}
         />
       )}
-    </Fragment>
+    </Wrapper>
   )
 }
 
diff --git a/src/containers/unit/Comments/HeadBar/StateBar/index.tsx b/src/containers/unit/Comments/HeadBar/StateBar/index.tsx
new file mode 100644
index 000000000..c1bc68045
--- /dev/null
+++ b/src/containers/unit/Comments/HeadBar/StateBar/index.tsx
@@ -0,0 +1,60 @@
+import { FC, memo } from 'react'
+
+import type { TCommentsState } from '@/spec'
+
+import { LineDivider } from '@/widgets/Common'
+import Button from '@/widgets/Buttons/Button'
+import { LavaLampLoading } from '@/widgets/Loading'
+
+import Actions from './Actions'
+import type { TProps as TBase } from '../index'
+
+import {
+  Wrapper,
+  TotalTitle,
+  TotalCountWrapper,
+  TotalNum,
+  ActionsWrapper,
+  EditIcon,
+} from '../../styles/head_bar/state_bar'
+
+type TProps = Pick<
+  TBase,
+  'mode' | 'apiMode' | 'isAllFolded' | 'loading' | 'basicState'
+> & { callEditor?: () => void }
+
+const StateBar: FC<TProps> = ({
+  basicState,
+  mode,
+  isAllFolded,
+  loading,
+  apiMode,
+  callEditor = console.log,
+}) => {
+  return (
+    <Wrapper>
+      <TotalCountWrapper>
+        <TotalTitle>
+          共
+          <TotalNum highlight={basicState.isViewerJoined}>
+            {basicState.totalCount}
+          </TotalNum>
+          条讨论
+        </TotalTitle>
+      </TotalCountWrapper>
+      <ActionsWrapper>
+        {loading && <LavaLampLoading right={15} />}
+
+        <Button size="small" space={10} onClick={() => callEditor()}>
+          <EditIcon />
+          讨论
+        </Button>
+        <LineDivider left={18} />
+
+        <Actions mode={mode} isAllFolded={isAllFolded} apiMode={apiMode} />
+      </ActionsWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(StateBar)
diff --git a/src/containers/unit/Comments/HeadBar/index.tsx b/src/containers/unit/Comments/HeadBar/index.tsx
index a1ce145a4..2d840b9d1 100644
--- a/src/containers/unit/Comments/HeadBar/index.tsx
+++ b/src/containers/unit/Comments/HeadBar/index.tsx
@@ -1,23 +1,14 @@
-import { FC, memo } from 'react'
+import { FC, memo, useState, Fragment } from 'react'
 
 import type { TCommentsState } from '@/spec'
 
-import { LineDivider } from '@/widgets/Common'
-import Button from '@/widgets/Buttons/Button'
-import { LavaLampLoading } from '@/widgets/Loading'
+import StateBar from './StateBar'
+import PublishBar from './PublishBar'
+import PublishEditor from '../Editor/PublishEditor'
 
-import Actions from './Actions'
+import { Wrapper } from '../styles/head_bar'
 
-import {
-  Wrapper,
-  TotalTitle,
-  TotalCountWrapper,
-  TotalNum,
-  ActionsWrapper,
-  EditIcon,
-} from '../styles/head_bar'
-
-import type { TMode, TAPIMode } from '../spec'
+import type { TMode, TAPIMode, TEditState } from '../spec'
 
 export type TProps = {
   mode: TMode
@@ -25,6 +16,7 @@ export type TProps = {
   isAllFolded: boolean
   loading: boolean
   basicState: TCommentsState
+  editState: TEditState
 }
 
 const Header: FC<TProps> = ({
@@ -33,29 +25,30 @@ const Header: FC<TProps> = ({
   isAllFolded,
   loading,
   apiMode,
+  editState,
 }) => {
+  const { commentBody, submitState } = editState
+  const [barMode, setBarMode] = useState('normal')
+
   return (
     <Wrapper>
-      <TotalCountWrapper>
-        <TotalTitle>
-          共
-          <TotalNum highlight={basicState.isViewerJoined}>
-            {basicState.totalCount}
-          </TotalNum>
-          条讨论
-        </TotalTitle>
-      </TotalCountWrapper>
-      <ActionsWrapper>
-        {loading && <LavaLampLoading right={15} />}
-
-        <Button size="small" space={10}>
-          <EditIcon />
-          讨论
-        </Button>
-        <LineDivider left={18} />
-
-        <Actions mode={mode} isAllFolded={isAllFolded} apiMode={apiMode} />
-      </ActionsWrapper>
+      {barMode === 'normal' && (
+        <StateBar
+          apiMode={apiMode}
+          isAllFolded={isAllFolded}
+          basicState={basicState}
+          mode={mode}
+          loading={loading}
+          callEditor={() => setBarMode('publish')}
+        />
+      )}
+
+      {barMode === 'publish' && (
+        <Fragment>
+          <PublishBar closeEditor={() => setBarMode('normal')} />
+          <PublishEditor body={commentBody} submitState={submitState} />
+        </Fragment>
+      )}
     </Wrapper>
   )
 }
diff --git a/src/containers/unit/Comments/index.tsx b/src/containers/unit/Comments/index.tsx
index 7c12a3985..0966d2672 100755
--- a/src/containers/unit/Comments/index.tsx
+++ b/src/containers/unit/Comments/index.tsx
@@ -73,6 +73,7 @@ const CommentsContainer: FC<TProps> = ({
           basicState={basicState}
           mode={mode}
           loading={loading}
+          editState={editState}
         />
       )}
 
diff --git a/src/containers/unit/Comments/styles/editor/publish_editor.ts b/src/containers/unit/Comments/styles/editor/publish_editor.ts
index 4c1af4fa2..6e9430f87 100644
--- a/src/containers/unit/Comments/styles/editor/publish_editor.ts
+++ b/src/containers/unit/Comments/styles/editor/publish_editor.ts
@@ -1,33 +1,15 @@
 import styled from 'styled-components'
 
 // import Img from '@/Img'
-import css, { theme } from '@/utils/css'
+import css from '@/utils/css'
 
 export const Wrapper = styled.div`
-  ${css.flexColumn()};
-  height: auto;
-  border-radius: 10px;
-  /* border: 1px solid; */
-  border-color: transparent;
-  padding-left: 15px;
-  background: #f7f7f7;
-
-  &:hover {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
-    cursor: pointer;
-    border-color: ${theme('thread.articleDigest')};
-  }
-
-  transition: all 0.2s;
-`
-
-export const ExpandWrapper = styled.div`
   ${css.flexColumn()};
   padding: 10px 0;
   background: transparent;
-  min-height: 300px;
+  min-height: 150px;
   height: auto;
-  border-bottom: 3px solid;
-  border-color: ${theme('border')};
-  transition: all 0.2s;
+  margin-top: -10px;
 `
+
+export const holder = 1
diff --git a/src/containers/unit/Comments/styles/head_bar/index.ts b/src/containers/unit/Comments/styles/head_bar/index.ts
index 4a1193595..cfa02c16d 100644
--- a/src/containers/unit/Comments/styles/head_bar/index.ts
+++ b/src/containers/unit/Comments/styles/head_bar/index.ts
@@ -1,11 +1,8 @@
 import styled from 'styled-components'
 
-import css, { theme } from '@/utils/css'
-
-import EditPenSVG from '@/icons/EditPen'
+import css from '@/utils/css'
 
 export const Wrapper = styled.div`
-  ${css.flex('align-center')};
   margin-bottom: 5px;
 
   ${css.media.mobile`
@@ -16,43 +13,5 @@ export const Wrapper = styled.div`
     overflow: hidden;
   `};
 `
-export const TotalCountWrapper = styled.div`
-  flex-grow: 1;
-`
-export const TotalTitle = styled.div`
-  color: ${theme('thread.articleDigest')};
-  font-size: 13px;
-  margin-left: 1px;
 
-  ${css.media.mobile`
-    font-size: 13px;
-    margin-left: 0;
-    padding-left: 5px;
-  `};
-`
-export const TotalNum = styled.span<{ highlight: boolean }>`
-  color: ${({ highlight }) =>
-    highlight ? theme('comment.number') : theme('thread.articleTitle')};
-  font-weight: bold;
-  font-size: 15px;
-  margin-left: 5px;
-  margin-right: 5px;
-`
-export const CommentBlock = styled.div`
-  ${css.flex()};
-  margin-bottom: 16px;
-  padding: 15px;
-  padding-left: 20px;
-  position: relative;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
-  border-radius: 3px;
-  background: ${theme('drawer.articleBg')};
-`
-export const ActionsWrapper = styled.div`
-  ${css.flex('align-center')};
-`
-export const EditIcon = styled(EditPenSVG)`
-  ${css.size(12)};
-  fill: white;
-  margin-right: 5px;
-`
+export const holder = 1
diff --git a/src/containers/unit/Comments/styles/head_bar/publish_bar.ts b/src/containers/unit/Comments/styles/head_bar/publish_bar.ts
new file mode 100644
index 000000000..5872ef573
--- /dev/null
+++ b/src/containers/unit/Comments/styles/head_bar/publish_bar.ts
@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+import css, { theme } from '@/utils/css'
+import EditPenSVG from '@/icons/EditPen'
+import Img from '@/Img'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center', 'justify-between')};
+  margin-top: 15px;
+`
+export const AccountWrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const Avatar = styled(Img)`
+  ${css.circle(22)};
+`
+export const UserName = styled.div`
+  color: ${theme('thread.articleDIgest')};
+  font-size: 14px;
+  margin-left: 12px;
+`
+export const ActionsWrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const EditIcon = styled(EditPenSVG)`
+  ${css.size(12)};
+  fill: white;
+  margin-right: 5px;
+`
diff --git a/src/containers/unit/Comments/styles/head_bar/state_bar/actions.ts b/src/containers/unit/Comments/styles/head_bar/state_bar/actions.ts
new file mode 100644
index 000000000..3040b9393
--- /dev/null
+++ b/src/containers/unit/Comments/styles/head_bar/state_bar/actions.ts
@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+import css from '@/utils/css'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const holder = 1
diff --git a/src/containers/unit/Comments/styles/head_bar/state_bar/index.ts b/src/containers/unit/Comments/styles/head_bar/state_bar/index.ts
new file mode 100644
index 000000000..d37819918
--- /dev/null
+++ b/src/containers/unit/Comments/styles/head_bar/state_bar/index.ts
@@ -0,0 +1,49 @@
+import styled from 'styled-components'
+
+import css, { theme } from '@/utils/css'
+
+import EditPenSVG from '@/icons/EditPen'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const TotalCountWrapper = styled.div`
+  flex-grow: 1;
+`
+export const TotalTitle = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  margin-left: 1px;
+
+  ${css.media.mobile`
+    font-size: 13px;
+    margin-left: 0;
+    padding-left: 5px;
+  `};
+`
+export const TotalNum = styled.span<{ highlight: boolean }>`
+  color: ${({ highlight }) =>
+    highlight ? theme('comment.number') : theme('thread.articleTitle')};
+  font-weight: bold;
+  font-size: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
+`
+export const CommentBlock = styled.div`
+  ${css.flex()};
+  margin-bottom: 16px;
+  padding: 15px;
+  padding-left: 20px;
+  position: relative;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  border-radius: 3px;
+  background: ${theme('drawer.articleBg')};
+`
+export const ActionsWrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const EditIcon = styled(EditPenSVG)`
+  ${css.size(12)};
+  fill: white;
+  margin-right: 5px;
+`
diff --git a/src/widgets/Switcher/styles/icon_selector.ts b/src/widgets/Switcher/styles/icon_selector.ts
index a52b9e54f..8bf570266 100644
--- a/src/widgets/Switcher/styles/icon_selector.ts
+++ b/src/widgets/Switcher/styles/icon_selector.ts
@@ -39,9 +39,8 @@ export const Tabs = styled.div`
   transition: all 0.2s;
 `
 export const Label = styled.label`
+  ${css.size(26)};
   ${css.flex('align-both')};
-  width: ${width};
-  height: ${height};
   font-size: 15px;
   transition: color 0.15s ease-in;
 
@@ -57,21 +56,18 @@ export const DescText = styled.div`
 `
 export const Icon = styled(Img)<{ checked: boolean }>`
   fill: ${theme('thread.extraInfo')};
-  width: ${({ checked }) => (checked ? '14px' : '12px')};
-  height: ${({ checked }) => (checked ? '14px' : '12px')};
-  display: block;
+  ${({ checked }) => (checked ? css.size(14) : css.size(12))};
   transition: all 0.2s;
 
   &:hover {
-    fill: #66b5e8;
+    fill: ${theme('thread.extraInfo')};
   }
 `
 export const Slider = styled.span<{ index: number }>`
   ${css.flex()};
   position: absolute;
-  width: ${width};
-  height: ${height};
   background-color: #fff; // to-theme
+  ${css.size(26)};
   z-index: 0;
   border-radius: 6px;
 

From 44b4e90bd1b5701a577c73e1c4361f6ed175d188 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 10 May 2022 21:54:40 +0800
Subject: [PATCH 3/7] fix(icon-switcher): edge-case when no active

---
 src/widgets/Common/index.ts                  | 2 +-
 src/widgets/Switcher/IconSwitcher.tsx        | 5 ++---
 src/widgets/Switcher/styles/icon_selector.ts | 9 +++------
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/widgets/Common/index.ts b/src/widgets/Common/index.ts
index 9d78eba91..4f8204bae 100755
--- a/src/widgets/Common/index.ts
+++ b/src/widgets/Common/index.ts
@@ -25,7 +25,7 @@ export const Divider = styled.div<TSpace>`
 type TLineDivider = TSpace & { height?: number }
 export const LineDivider = styled.div<TLineDivider>`
   background: ${theme('thread.articleDigest')};
-  opacity: 0.7;
+  opacity: 0.6;
   width: 1px;
   height: ${({ height }) => `${height || 12}px`};
 
diff --git a/src/widgets/Switcher/IconSwitcher.tsx b/src/widgets/Switcher/IconSwitcher.tsx
index b4ab7609a..25c71b3a1 100644
--- a/src/widgets/Switcher/IconSwitcher.tsx
+++ b/src/widgets/Switcher/IconSwitcher.tsx
@@ -13,7 +13,6 @@ import Tooltip from '@/widgets/Tooltip'
 
 import {
   Wrapper,
-  AccessZone,
   Tabs,
   DescText,
   Icon,
@@ -70,7 +69,7 @@ const IconSwitcher: FC<TProps> = ({ items, activeKey, onChange }) => {
 
   return (
     <Wrapper testid="selectors">
-      <AccessZone />
+      {/* <AccessZone /> */}
       <Tabs>
         {items.map((item) => (
           <Tooltip
@@ -84,7 +83,7 @@ const IconSwitcher: FC<TProps> = ({ items, activeKey, onChange }) => {
             <TabLabel item={item} activeKey={activeKey} onChange={onChange} />
           </Tooltip>
         ))}
-        <Slider index={slideIndex} />
+        {slideIndex !== -1 && <Slider index={slideIndex} />}
       </Tabs>
     </Wrapper>
   )
diff --git a/src/widgets/Switcher/styles/icon_selector.ts b/src/widgets/Switcher/styles/icon_selector.ts
index 8bf570266..4e8c3fcfe 100644
--- a/src/widgets/Switcher/styles/icon_selector.ts
+++ b/src/widgets/Switcher/styles/icon_selector.ts
@@ -4,9 +4,6 @@ import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import css, { theme } from '@/utils/css'
 
-const width = '28px'
-const height = '25px'
-
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
@@ -39,7 +36,7 @@ export const Tabs = styled.div`
   transition: all 0.2s;
 `
 export const Label = styled.label`
-  ${css.size(26)};
+  ${css.size(25)};
   ${css.flex('align-both')};
   font-size: 15px;
   transition: color 0.15s ease-in;
@@ -67,9 +64,9 @@ export const Slider = styled.span<{ index: number }>`
   ${css.flex()};
   position: absolute;
   background-color: #fff; // to-theme
-  ${css.size(26)};
+  ${css.size(25)};
   z-index: 0;
-  border-radius: 6px;
+  border-radius: 4px;
 
   ${Wrapper}:hover & {
     background-color: #fff; // to-theme

From d0892835e683b79787b644e30435955ee3f352c3 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 10 May 2022 22:18:23 +0800
Subject: [PATCH 4/7] chore(layout): adjust global page/content, custom-bg

---
 src/containers/layout/GlobalLayout/CustomBg.tsx | 3 ++-
 src/containers/tool/Drawer/styles/index.ts      | 8 ++++----
 utils/css/metric.ts                             | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/containers/layout/GlobalLayout/CustomBg.tsx b/src/containers/layout/GlobalLayout/CustomBg.tsx
index 0da8952d3..2b8e033b2 100644
--- a/src/containers/layout/GlobalLayout/CustomBg.tsx
+++ b/src/containers/layout/GlobalLayout/CustomBg.tsx
@@ -7,7 +7,7 @@ type TBackgroundEffect =
   | {
       bgImage: string
       bgColor?: string
-      bgSize?: 'contain' | 'cover'
+      bgSize?: 'contain' | 'cover' | 'auto'
     }
   | string
 
@@ -53,6 +53,7 @@ const ComstomBg: FC = () => {
     },
     tg: {
       bgImage: '/bg/tg-green.jpg',
+      bgSize: 'auto',
     },
     tg2: {
       bgImage: '/bg/tg-earth.jpg',
diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts
index 5972b2cef..d511f424d 100755
--- a/src/containers/tool/Drawer/styles/index.ts
+++ b/src/containers/tool/Drawer/styles/index.ts
@@ -79,9 +79,9 @@ export const DrawerWrapper = styled.div.attrs(
   opacity: ${({ visible, fromContentEdge }) =>
     !visible && !fromContentEdge ? 0 : 1};
 
-  max-width: ${({ visible, fromContentEdge }) =>
-    !visible && !fromContentEdge ? '60%' : '985px'};
-  /* max-width: 985px; */
+  /* max-width: ${({ visible, fromContentEdge }) =>
+    !visible && !fromContentEdge ? '60%' : '985px'}; */
+  max-width: 985px;
 
   ${({ fromContentEdge }) =>
     fromContentEdge
@@ -90,7 +90,7 @@ export const DrawerWrapper = styled.div.attrs(
 
   will-change: transform, max-width, opacity;
   // 在宽屏时滑出来时，是从内容页而不是实际的 window 页滑出, 加 delay 可以在视觉上抵消从外部滑入的跳动感
-  transition-delay: 0s, 0s, 0.1s;
+  transition-delay: 0s, 0s, 0.06s;
 
   ${css.media.mobile`
     right: 0;
diff --git a/utils/css/metric.ts b/utils/css/metric.ts
index 62b0a9005..828dc5407 100644
--- a/utils/css/metric.ts
+++ b/utils/css/metric.ts
@@ -16,8 +16,8 @@ export const mediaBreakPoints = {
 // CONTENT: 内容宽度
 export const WIDTH = {
   COMMUNITY: {
-    PAGE: '1380px',
-    CONTENT: '1080px',
+    PAGE: '1320px',
+    CONTENT: '1024px',
     CONTENT_OFFSET: '34px',
     LAPTOP_M_PADDING: '0',
   },

From 61ebced6fc1d9cbd73335a9f33c37b16b0f8aa5b Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 10 May 2022 22:32:43 +0800
Subject: [PATCH 5/7] style(tooltip): adjust animation style

---
 src/containers/layout/ThemePalette/GlobalStyle.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/containers/layout/ThemePalette/GlobalStyle.ts b/src/containers/layout/ThemePalette/GlobalStyle.ts
index 7f59bb771..6674bc949 100755
--- a/src/containers/layout/ThemePalette/GlobalStyle.ts
+++ b/src/containers/layout/ThemePalette/GlobalStyle.ts
@@ -187,16 +187,16 @@ const GlobalStyle = createGlobalStyle`
     transition: all 0.2s ease-in-out !important;
   }
   .tippy-box[data-placement^=top][data-state='visible'] {
-    transform: translateY(-5px);
+    transform: translateY(-4px);
   }
   .tippy-box[data-placement^=bottom][data-state='visible'] {
-    transform: translateY(5px);
+    transform: translateY(4px);
   }
   .tippy-box[data-placement^=left][data-state='visible'] {
-    transform: translateX(-5px);
+    transform: translateX(-4px);
   }
   .tippy-box[data-placement^=right][data-state='visible'] {
-    transform: translateX(5px);
+    transform: translateX(4px);
   }
   /* .tippy-box[data-state='hidden'] {
     opacity: 0;

From 9a8ad6f9a5a16f1ce163de17f5817e9de5123d79 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 10 May 2022 23:14:40 +0800
Subject: [PATCH 6/7] fix(tippy): blink after rich-editor load

---
 src/containers/editor/RichEditor/styles/overwrite.ts | 4 ++--
 src/containers/layout/ThemePalette/GlobalStyle.ts    | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/containers/editor/RichEditor/styles/overwrite.ts b/src/containers/editor/RichEditor/styles/overwrite.ts
index ac93f65ec..98c01a2eb 100644
--- a/src/containers/editor/RichEditor/styles/overwrite.ts
+++ b/src/containers/editor/RichEditor/styles/overwrite.ts
@@ -124,7 +124,7 @@ const RichEditorStyle = createGlobalStyle`
     }
   }
   .ce-inline-toolbar {
-    background: #03343F;
+    background: white;
     border: none;
   }
   .ce-settings {
@@ -331,7 +331,7 @@ const RichEditorStyle = createGlobalStyle`
     display: none;
   }
   .tippy-tooltip.light-theme, .tippy-box[data-theme~=light]{
-    background: ${theme('popover.bg')} !important;
+    /* background: ${theme('popover.bg')} !important; */
     border: 1px solid;
     border-color: ${theme('popover.borderColor')} !important; 
     box-shadow: ${theme('popover.boxShadow')} !important;
diff --git a/src/containers/layout/ThemePalette/GlobalStyle.ts b/src/containers/layout/ThemePalette/GlobalStyle.ts
index 6674bc949..108257a5e 100755
--- a/src/containers/layout/ThemePalette/GlobalStyle.ts
+++ b/src/containers/layout/ThemePalette/GlobalStyle.ts
@@ -181,10 +181,13 @@ const GlobalStyle = createGlobalStyle`
     `};
   }
 
+  .tippy-box {
+    background: ${theme('popover.bg')} !important;
+  }
   /** customize tooltip animation globally */
   .tippy-box[data-state='visible'] {
     background: ${theme('popover.bg')} !important;
-    transition: all 0.2s ease-in-out !important;
+    transition: all .25s ease-in-out !important;
   }
   .tippy-box[data-placement^=top][data-state='visible'] {
     transform: translateY(-4px);

From f4442ea2ef83f1439142096c9171ac61f74c55eb Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 10 May 2022 23:16:04 +0800
Subject: [PATCH 7/7] fix(tippy): blink after rich-editor load

---
 src/containers/layout/ThemePalette/GlobalStyle.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/containers/layout/ThemePalette/GlobalStyle.ts b/src/containers/layout/ThemePalette/GlobalStyle.ts
index 108257a5e..97d9a184b 100755
--- a/src/containers/layout/ThemePalette/GlobalStyle.ts
+++ b/src/containers/layout/ThemePalette/GlobalStyle.ts
@@ -190,16 +190,16 @@ const GlobalStyle = createGlobalStyle`
     transition: all .25s ease-in-out !important;
   }
   .tippy-box[data-placement^=top][data-state='visible'] {
-    transform: translateY(-4px);
+    transform: translateY(-5px);
   }
   .tippy-box[data-placement^=bottom][data-state='visible'] {
-    transform: translateY(4px);
+    transform: translateY(5px);
   }
   .tippy-box[data-placement^=left][data-state='visible'] {
-    transform: translateX(-4px);
+    transform: translateX(-5px);
   }
   .tippy-box[data-placement^=right][data-state='visible'] {
-    transform: translateX(4px);
+    transform: translateX(5px);
   }
   /* .tippy-box[data-state='hidden'] {
     opacity: 0;