diff --git a/package.json b/package.json
index 0c2bf522e..001fe2b23 100644
--- a/package.json
+++ b/package.json
@@ -160,7 +160,7 @@
     "jest": "26.2.2",
     "npm-run-all": "^4.1.1",
     "plop": "2.7.4",
-    "prettier": "2.2.1",
+    "prettier": "2.3.2",
     "pretty-quick": "^1.10.0",
     "react-test-renderer": "16.10.0",
     "shelljs": "0.8.4",
diff --git a/src/components/ArchivedSign/DetailPanel.tsx b/src/components/ArchivedSign/DetailPanel.tsx
index f980d5f3d..5e69311ce 100644
--- a/src/components/ArchivedSign/DetailPanel.tsx
+++ b/src/components/ArchivedSign/DetailPanel.tsx
@@ -11,7 +11,7 @@ const DetailPanel: FC<TProps> = ({ date }) => {
   return (
     <Wrapper>
       <Title>本帖已于 {date} 存档</Title>
-      <Text>存档后无法编辑，删除及评论。</Text>
+      <Text>存档后无法编辑，删除及讨论。</Text>
 
       <LinksWrapper>
         <Button size="tiny" ghost noBorder>
diff --git a/src/components/ArticleItemPrefixLabel/index.tsx b/src/components/ArticleItemPrefixLabel/index.tsx
deleted file mode 100755
index 0c366ee87..000000000
--- a/src/components/ArticleItemPrefixLabel/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- *
- * ArticleItemPrefixLabel
- *
- */
-
-import { FC, memo } from 'react'
-
-import { buildLog } from '@/utils/logger'
-import { PinIcon } from './styles'
-import ReadLabel from './ReadLabel'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:ArticleItemPrefixLabel:index')
-
-export type TProps = {
-  topOffset?: string
-  entry: {
-    viewerHasViewed?: boolean
-    pin?: boolean
-  }
-}
-const ArticleItemPrefixLabel: FC<TProps> = ({ entry, topOffset = '22px' }) => {
-  if (entry.pin) return <PinIcon top={topOffset} />
-
-  return <ReadLabel entry={entry} topOffset={topOffset} />
-}
-
-export default memo(ArticleItemPrefixLabel)
diff --git a/src/components/ArticlePinLabel/index.tsx b/src/components/ArticlePinLabel/index.tsx
new file mode 100755
index 000000000..682b4e179
--- /dev/null
+++ b/src/components/ArticlePinLabel/index.tsx
@@ -0,0 +1,28 @@
+/*
+ *
+ * ArticlePinLabel
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils/logger'
+import { PinIcon } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticlePinLabel:index')
+
+export type TProps = {
+  top?: number
+  left?: number
+  entry: {
+    isPinned?: boolean
+  }
+}
+const ArticlePinLabel: FC<TProps> = ({ entry, top = 24, left = -30 }) => {
+  if (entry.isPinned) return <PinIcon top={top} left={left} />
+
+  return null
+}
+
+export default memo(ArticlePinLabel)
diff --git a/src/components/ArticlePinLabel/styles/index.ts b/src/components/ArticlePinLabel/styles/index.ts
new file mode 100755
index 000000000..5e9d8dc78
--- /dev/null
+++ b/src/components/ArticlePinLabel/styles/index.ts
@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+import PinSVG from '@/icons/Pin'
+import { pixelAdd } from '@/utils/dom'
+
+type TPos = { top: number; left: number }
+
+export const PinIcon = styled(PinSVG)<TPos>`
+  fill: ${theme('thread.articleDigest')};
+  position: absolute;
+  ${css.size(18)};
+  top: ${({ top }) => pixelAdd(`${top}px`, -4)};
+  left: ${({ left }) => `${left}px`};
+  opacity: 0.8;
+  transform: rotate(-30deg);
+`
+
+export const holder = 1
diff --git a/src/components/ArticleItemPrefixLabel/tests/index.test.ts b/src/components/ArticlePinLabel/tests/index.test.ts
similarity index 61%
rename from src/components/ArticleItemPrefixLabel/tests/index.test.ts
rename to src/components/ArticlePinLabel/tests/index.test.ts
index 389dd013a..6793c7077 100755
--- a/src/components/ArticleItemPrefixLabel/tests/index.test.ts
+++ b/src/components/ArticlePinLabel/tests/index.test.ts
@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import ArticleItemPrefixLabel from '../index'
+// import ArticlePinLabel from '../index'
 
-describe('TODO <ArticleItemPrefixLabel />', () => {
+describe('TODO <ArticlePinLabel />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })
diff --git a/src/components/ArticleItemPrefixLabel/ReadLabel.tsx b/src/components/ArticleReadLabel/ReadLabel.tsx
similarity index 76%
rename from src/components/ArticleItemPrefixLabel/ReadLabel.tsx
rename to src/components/ArticleReadLabel/ReadLabel.tsx
index 3c4d7e36d..a8ecec253 100755
--- a/src/components/ArticleItemPrefixLabel/ReadLabel.tsx
+++ b/src/components/ArticleReadLabel/ReadLabel.tsx
@@ -4,7 +4,7 @@ import { useAccount } from '@/hooks'
 import { ReadedLabel } from './styles'
 import type { TProps } from './index'
 
-const ReadLabel: FC<TProps> = ({ entry, topOffset = '20px' }) => {
+const ReadLabel: FC<TProps> = ({ entry, top, left }) => {
   const { c11n } = useAccount()
   const { isLogin, markViewed } = c11n
 
@@ -12,7 +12,7 @@ const ReadLabel: FC<TProps> = ({ entry, topOffset = '20px' }) => {
 
   if (!isLogin) return null
   if (markViewed && viewerHasViewed) {
-    return <ReadedLabel topOffset={topOffset} />
+    return <ReadedLabel top={top} left={left} />
   }
 
   return null
diff --git a/src/components/ArticleReadLabel/index.tsx b/src/components/ArticleReadLabel/index.tsx
new file mode 100755
index 000000000..bea662d5d
--- /dev/null
+++ b/src/components/ArticleReadLabel/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * ArticleReadLabel
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils/logger'
+import { useAccount } from '@/hooks'
+
+import { ReadedLabel } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticleReadLabel:index')
+
+export type TProps = {
+  top?: number
+  left?: number
+  entry: {
+    viewerHasViewed?: boolean
+    pin?: boolean
+  }
+}
+const ArticleReadLabel: FC<TProps> = ({ entry, top = 24, left = -30 }) => {
+  const { c11n } = useAccount()
+  const { isLogin, markViewed } = c11n
+
+  const { viewerHasViewed } = entry
+
+  if (entry.pin) return null
+  // return <ReadedLabel top={top} left={left} />
+  if (!isLogin) return null
+  if (markViewed && viewerHasViewed) {
+    return <ReadedLabel top={top} left={left} />
+  }
+
+  return null
+}
+
+export default memo(ArticleReadLabel)
diff --git a/src/components/ArticleItemPrefixLabel/styles/index.ts b/src/components/ArticleReadLabel/styles/index.ts
similarity index 56%
rename from src/components/ArticleItemPrefixLabel/styles/index.ts
rename to src/components/ArticleReadLabel/styles/index.ts
index 116548b74..c64659766 100755
--- a/src/components/ArticleItemPrefixLabel/styles/index.ts
+++ b/src/components/ArticleReadLabel/styles/index.ts
@@ -5,32 +5,26 @@ import css from '@/utils/css'
 import PinSVG from '@/icons/Pin'
 import { pixelAdd } from '@/utils/dom'
 
-export const ReadedLabel = styled.div<{ topOffset: string }>`
+type TPos = { top: number; left: number }
+
+export const ReadedLabel = styled.div<TPos>`
   background: ${theme('thread.articleDigest')};
-  width: 8px;
-  height: 3px;
-  border-radius: 3px;
+  ${css.circle(8)};
   position: absolute;
-  top: ${({ topOffset }) => topOffset};
-  left: -30px;
+  top: ${({ top }) => `${top}px`};
+  left: ${({ left }) => `${left}px`};
   opacity: 0.5;
   ${css.media.mobile`
     left: -12px;
     font-size: 0.8rem;
   `};
 `
-export const PinIcon = styled(PinSVG)<{ top: string }>`
+export const PinIcon = styled(PinSVG)<TPos>`
   fill: ${theme('thread.articleDigest')};
   position: absolute;
   ${css.size(18)};
-  top: ${({ top }) => pixelAdd(top, -4)};
-  left: -35px;
+  top: ${({ top }) => pixelAdd(`${top}px`, -4)};
+  left: ${({ left }) => `${left}px`};
   opacity: 0.8;
   transform: rotate(-30deg);
-
-  ${css.media.mobile`
-    ${css.size(16)};
-    top: 35px;
-    left: -20px;
-  `};
 `
diff --git a/src/components/ArticleReadLabel/tests/index.test.ts b/src/components/ArticleReadLabel/tests/index.test.ts
new file mode 100755
index 000000000..cd4405a42
--- /dev/null
+++ b/src/components/ArticleReadLabel/tests/index.test.ts
@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import ArticleReadLabel from '../index'
+
+describe('TODO <ArticleReadLabel />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})
diff --git a/src/components/ArticlesFilter/DesktopView.tsx b/src/components/ArticlesFilter/DesktopView.tsx
index efce37d11..ddcd095f5 100644
--- a/src/components/ArticlesFilter/DesktopView.tsx
+++ b/src/components/ArticlesFilter/DesktopView.tsx
@@ -5,7 +5,6 @@
  */
 
 import { FC, memo } from 'react'
-import dynamic from 'next/dynamic'
 
 import type { TArticleFilter, TResState } from '@/spec'
 
@@ -13,6 +12,8 @@ import { TYPE, THREAD } from '@/constant'
 import { buildLog } from '@/utils/logger'
 // import { useViewing } from '@/hooks'
 
+import { LavaLampLoading } from '@/components/dynamic'
+
 import FilterButton from './FilterButton'
 import SelectedFilters from './SelectedFilters'
 import FilterResult from './FilterResult'
@@ -22,15 +23,6 @@ import { Wrapper, MainFilterWrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:ArticlesFilter:index')
 
-const LavaLampLoading = dynamic(
-  () => import('@/components/Loading/LavaLampLoading'),
-  {
-    /* eslint-disable react/display-name */
-    loading: () => <div />,
-    ssr: false,
-  },
-)
-
 type TProps = {
   activeFilter: TArticleFilter
   onSelect: (filter: TArticleFilter) => void
diff --git a/src/components/ArticlesFilter/FilterPanel/RepoSortFilter.tsx b/src/components/ArticlesFilter/FilterPanel/RepoSortFilter.tsx
index 2200616e4..b5611b625 100755
--- a/src/components/ArticlesFilter/FilterPanel/RepoSortFilter.tsx
+++ b/src/components/ArticlesFilter/FilterPanel/RepoSortFilter.tsx
@@ -64,7 +64,7 @@ const RepoSortFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
         active={activeFilter.sort === FILTER.MOST_COMMENTS}
         onClick={() => onSelect({ sort: FILTER.MOST_COMMENTS })}
       >
-        最多评论
+        最多讨论
       </SelectItem>
     </LeftAlignWrapper>
   </ColumnWrapper>
diff --git a/src/components/ArticlesFilter/FilterPanel/SortFilter.tsx b/src/components/ArticlesFilter/FilterPanel/SortFilter.tsx
index b7dfc6b19..e9e6963d5 100755
--- a/src/components/ArticlesFilter/FilterPanel/SortFilter.tsx
+++ b/src/components/ArticlesFilter/FilterPanel/SortFilter.tsx
@@ -48,7 +48,7 @@ const SortFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
       active={activeFilter.sort === FILTER.MOST_COMMENTS}
       onClick={() => onSelect({ sort: FILTER.MOST_COMMENTS })}
     >
-      最多评论
+      最多讨论
     </SelectItem>
   </ColumnWrapper>
 )
diff --git a/src/components/ArticlesFilter/SelectedFilters.tsx b/src/components/ArticlesFilter/SelectedFilters.tsx
index 2cc4a8a22..d879a2812 100755
--- a/src/components/ArticlesFilter/SelectedFilters.tsx
+++ b/src/components/ArticlesFilter/SelectedFilters.tsx
@@ -15,7 +15,7 @@ const filterDict = {
   MOST_FAVORITES: '最多收藏',
   MOST_STARS: '最多点赞',
   MOST_VIEWS: '最多浏览',
-  MOST_COMMENTS: '最多评论',
+  MOST_COMMENTS: '最多讨论',
   MOST_WORDS: '字数最多',
   LEAST_WORDS: '字数最少',
   // repo
diff --git a/src/components/ArticleBody/FoldBox.tsx b/src/components/ArtimentBody/FoldBox.tsx
similarity index 79%
rename from src/components/ArticleBody/FoldBox.tsx
rename to src/components/ArtimentBody/FoldBox.tsx
index 200519321..5a81d39f4 100644
--- a/src/components/ArticleBody/FoldBox.tsx
+++ b/src/components/ArtimentBody/FoldBox.tsx
@@ -5,21 +5,22 @@ import { Wrapper, Hint, FoldHint, ArrowIcon } from './styles/fold_box'
 
 type TProps = {
   fold: boolean
+  mode: 'article' | 'comment'
   onFold: () => void
   onExpand: () => void
 }
 
-const FoldBox: FC<TProps> = ({ fold, onFold, onExpand }) => {
+const FoldBox: FC<TProps> = ({ fold, onFold, onExpand, mode }) => {
   return (
     <Wrapper fold={fold} onClick={() => (fold ? onExpand() : onFold())}>
       {!fold && (
-        <FoldHint>
+        <FoldHint mode={mode}>
           折叠
           <ArrowIcon src={`${ICON}/shape/arrow-simple.svg`} reverse />
         </FoldHint>
       )}
       {fold && (
-        <Hint>
+        <Hint mode={mode}>
           展开全部
           <ArrowIcon src={`${ICON}/shape/arrow-simple.svg`} />
         </Hint>
diff --git a/src/components/ArticleBody/index.tsx b/src/components/ArtimentBody/index.tsx
similarity index 87%
rename from src/components/ArticleBody/index.tsx
rename to src/components/ArtimentBody/index.tsx
index daf8da938..0a1aa97b0 100755
--- a/src/components/ArticleBody/index.tsx
+++ b/src/components/ArtimentBody/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 /*
- * ArticleBody
+ * ArtimentBody
  */
 import { FC, memo, useRef, useState, useEffect } from 'react'
 
@@ -13,19 +13,21 @@ import { Br } from '@/components/Common'
 import { Wrapper, Body, HTML } from './styles'
 
 /* eslint-disable-next-line */
-const log = buildLog('c:ArticleBody:index')
+const log = buildLog('c:ArtimentBody:index')
 
 type TProps = {
   testid?: string
   document: TDocument
   // 超过多行就默认折叠
   initLineClampNum?: number
+  mode?: 'article' | 'comment'
 }
 
-const ArticleBody: FC<TProps> = ({
+const ArtimentBody: FC<TProps> = ({
   testid = 'article-body',
   document,
   initLineClampNum = 5,
+  mode = 'article',
 }) => {
   const bodyRef = useRef(null)
   const [fold, setFold] = useState(false)
@@ -61,6 +63,7 @@ const ArticleBody: FC<TProps> = ({
       {needFold ? (
         <FoldBox
           fold={fold}
+          mode={mode}
           onFold={() => {
             setLineClampNum(initLineClampNum)
             setFold(true)
@@ -71,10 +74,10 @@ const ArticleBody: FC<TProps> = ({
           }}
         />
       ) : (
-        <Br bottom={50} />
+        <Br bottom={mode === 'article' ? 50 : 15} />
       )}
     </Wrapper>
   )
 }
 
-export default memo(ArticleBody)
+export default memo(ArtimentBody)
diff --git a/src/components/ArticleBody/styles/fold_box.ts b/src/components/ArtimentBody/styles/fold_box.ts
similarity index 86%
rename from src/components/ArticleBody/styles/fold_box.ts
rename to src/components/ArtimentBody/styles/fold_box.ts
index 0b2adec32..d81c90901 100755
--- a/src/components/ArticleBody/styles/fold_box.ts
+++ b/src/components/ArtimentBody/styles/fold_box.ts
@@ -20,10 +20,10 @@ export const Wrapper = styled.div<{ fold: boolean }>`
 
   transition: all 0.2s;
 `
-export const Hint = styled.div`
+export const Hint = styled.div<{ mode: 'article' | 'comment' }>`
   ${css.flex('align-center')};
   color: #139c9e;
-  font-size: 15px;
+  font-size: ${({ mode }) => (mode === 'article' ? '15px' : '13px')};
   opacity: 0.8;
 
   ${Wrapper}:hover & {
diff --git a/src/components/ArticleBody/styles/index.ts b/src/components/ArtimentBody/styles/index.ts
similarity index 97%
rename from src/components/ArticleBody/styles/index.ts
rename to src/components/ArtimentBody/styles/index.ts
index 51b191999..052e70af5 100755
--- a/src/components/ArticleBody/styles/index.ts
+++ b/src/components/ArtimentBody/styles/index.ts
@@ -21,4 +21,5 @@ export const Body = styled.div<{ lineClampNum: number }>`
 `
 export const HTML = styled.div`
   color: ${theme('thread.articleTitle')};
+  opacity: 0.9;
 `
diff --git a/src/components/ArticleBody/tests/index.test.ts b/src/components/ArtimentBody/tests/index.test.ts
similarity index 66%
rename from src/components/ArticleBody/tests/index.test.ts
rename to src/components/ArtimentBody/tests/index.test.ts
index dd1b0538f..526d09e05 100755
--- a/src/components/ArticleBody/tests/index.test.ts
+++ b/src/components/ArtimentBody/tests/index.test.ts
@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import ArticleBody from '../index'
+// import ArtimentBody from '../index'
 
-describe('TODO <ArticleBody />', () => {
+describe('TODO <ArtimentBody />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })
diff --git a/src/components/AvatarsRow/MoreItem.tsx b/src/components/AvatarsRow/MoreItem.tsx
index e41fd5533..38dccdfa3 100644
--- a/src/components/AvatarsRow/MoreItem.tsx
+++ b/src/components/AvatarsRow/MoreItem.tsx
@@ -36,7 +36,7 @@ const MoreItem: FC<TProps> = ({
           ) : (
             <StateInfoWrapper>
               <TotalCommentStateHint>
-                评论: <Focus>{total}</Focus>
+                讨论: <Focus>{total}</Focus>
               </TotalCommentStateHint>
               <Br top={5} />
               <TotalCommentStateHint>
diff --git a/src/components/BlogItem/DesktopView/ActiveBadge.tsx b/src/components/BlogItem/DesktopView/ActiveBadge.tsx
deleted file mode 100644
index abf84607b..000000000
--- a/src/components/BlogItem/DesktopView/ActiveBadge.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { FC } from 'react'
-
-import type { TArticle } from '@/spec'
-import IconButton from '@/components/Buttons/IconButton'
-
-import { Wrapper, Hint } from '../styles/desktop_view/active_badge'
-
-type TProps = {
-  item: TArticle
-}
-
-const ActiveBadge: FC<TProps> = ({ item }) => {
-  const isArchived = item.commentsCount === 24
-  const path = isArchived ? 'article/archived.svg' : 'shape/activity.svg'
-
-  return (
-    <Wrapper hasComments={item.commentsCount > 0}>
-      <IconButton
-        path={path}
-        size={14}
-        hint={<Hint>最后回复: 2020-03-11 14:33</Hint>}
-        mRight={6}
-        hintPlacement="bottom"
-        hintDelay={0}
-      />
-      <div>4天前</div>
-    </Wrapper>
-  )
-}
-
-export default ActiveBadge
diff --git a/src/components/BlogItem/DesktopView/Body.tsx b/src/components/BlogItem/DesktopView/Body.tsx
index af3fd66b5..2a0d1609b 100644
--- a/src/components/BlogItem/DesktopView/Body.tsx
+++ b/src/components/BlogItem/DesktopView/Body.tsx
@@ -12,8 +12,6 @@ import CommunityCard from '@/components/Cards/CommunityCard'
 import UserCard from '@/components/Cards/UserCard'
 import Tooltip from '@/components/Tooltip'
 
-import ActiveBadge from './ActiveBadge'
-
 import {
   Wrapper,
   Dot,
@@ -64,10 +62,13 @@ const Body: FC<TProps> = ({ item }) => {
             <ViewsIcon src={`${ICON}/article/viewed.svg`} />
             {item.views}
           </ItemWrapper>
+          <Dot radius={3} space={10} />
+          <ItemWrapper>
+            <ViewsIcon src={`${ICON}/article/comment.svg`} />
+            {item.commentsCount}
+          </ItemWrapper>
         </LeftPart>
         <SpaceGrow />
-
-        <ActiveBadge item={item} />
       </Extra>
 
       <DigestSentence
diff --git a/src/components/BlogItem/DesktopView/Header.tsx b/src/components/BlogItem/DesktopView/Header.tsx
index 30396b091..106f7f233 100644
--- a/src/components/BlogItem/DesktopView/Header.tsx
+++ b/src/components/BlogItem/DesktopView/Header.tsx
@@ -16,7 +16,6 @@ import {
   Brief,
   Title,
   TagListWrapper,
-  Participants,
 } from '../styles/desktop_view/header'
 
 type TProps = {
@@ -40,12 +39,6 @@ const Header: FC<TProps> = ({ item }) => {
           <InlineTags items={item.articleTags} />
         </TagListWrapper>
       </Brief>
-      <Participants>
-        <AvatarsRow
-          users={item.commentsParticipants}
-          total={item.commentsCount}
-        />
-      </Participants>
     </Wrapper>
   )
 }
diff --git a/src/components/BlogItem/DesktopView/index.tsx b/src/components/BlogItem/DesktopView/index.tsx
index c0931fd8c..62a5b73e9 100644
--- a/src/components/BlogItem/DesktopView/index.tsx
+++ b/src/components/BlogItem/DesktopView/index.tsx
@@ -4,8 +4,9 @@ import { UPVOTE_LAYOUT } from '@/constant'
 import type { TBlog, TUser, TAccount } from '@/spec'
 
 import Upvote from '@/components/Upvote'
-import AuthorIntro from './AuthorIntro'
+import { ArticleReadLabel, ArticlePinLabel } from '@/components/dynamic'
 
+import AuthorIntro from './AuthorIntro'
 import Header from './Header'
 import Body from './Body'
 
@@ -22,6 +23,8 @@ type TProps = {
 const DigestView: FC<TProps> = ({ entry }) => {
   return (
     <Wrapper>
+      <ArticleReadLabel entry={entry} left={-29} top={18} />
+      <ArticlePinLabel entry={entry} />
       <Upvote type={UPVOTE_LAYOUT.BLOG_LIST} count={entry.upvotesCount} />
       <Main>
         <Header item={entry} />
diff --git a/src/components/BlogItem/index.tsx b/src/components/BlogItem/index.tsx
index 8346ff122..21538c8b1 100755
--- a/src/components/BlogItem/index.tsx
+++ b/src/components/BlogItem/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import { FC, memo } from 'react'
-import dynamic from 'next/dynamic'
 
 import type { TBlog, TID, TUser, TAccount, TC11N } from '@/spec'
 import { buildLog } from '@/utils/logger'
@@ -19,13 +18,6 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:BlogItem:index')
 
-export const ArticleItemPrefixLabel = dynamic(
-  () => import('@/components/ArticleItemPrefixLabel'),
-  {
-    ssr: false,
-  },
-)
-
 type TProps = {
   activeId?: TID | null
   entry: TBlog
@@ -45,8 +37,6 @@ const BlogItem: FC<TProps> = ({
 
   return (
     <Wrapper entry={entry} c11n={c11n}>
-      <ArticleItemPrefixLabel entry={entry} />
-
       {!isMobile ? (
         <DesktopView
           entry={entry}
diff --git a/src/components/BlogItem/styles/desktop_view/header.ts b/src/components/BlogItem/styles/desktop_view/header.ts
index 9b098b87c..2f1dc3e44 100644
--- a/src/components/BlogItem/styles/desktop_view/header.ts
+++ b/src/components/BlogItem/styles/desktop_view/header.ts
@@ -41,7 +41,3 @@ export const LinkIcon = styled(Img)`
   ${css.size(12)};
 `
 export const TagListWrapper = styled.div``
-
-export const Participants = styled.div`
-  margin-top: 2px;
-`
diff --git a/src/components/Buttons/FollowButton/FollowedBtn.tsx b/src/components/Buttons/FollowButton/FollowedBtn.tsx
index 5c2ccfec5..5264c3d8c 100644
--- a/src/components/Buttons/FollowButton/FollowedBtn.tsx
+++ b/src/components/Buttons/FollowButton/FollowedBtn.tsx
@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
 
 import { TSIZE_TSM } from '@/spec'
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 
 import { BtnWrapper, FollowedButton } from '../styles/follow_button'
 
diff --git a/src/components/Buttons/FollowButton/FollowingBtn.tsx b/src/components/Buttons/FollowButton/FollowingBtn.tsx
index 6f8e332d4..847ed31ec 100644
--- a/src/components/Buttons/FollowButton/FollowingBtn.tsx
+++ b/src/components/Buttons/FollowButton/FollowingBtn.tsx
@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
 import { TSIZE_TSM } from '@/spec'
 import { ICON } from '@/config'
 
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 import Tooltip from '@/components/Tooltip'
 
 import {
diff --git a/src/components/Buttons/NotifyButton/index.js b/src/components/Buttons/NotifyButton/index.tsx
similarity index 83%
rename from src/components/Buttons/NotifyButton/index.js
rename to src/components/Buttons/NotifyButton/index.tsx
index 6df126342..5ee3ed94f 100644
--- a/src/components/Buttons/NotifyButton/index.js
+++ b/src/components/Buttons/NotifyButton/index.tsx
@@ -4,8 +4,7 @@
  *
  */
 
-import React from 'react'
-import T from 'prop-types'
+import { FC, memo } from 'react'
 
 import { ICON } from '@/config'
 import { buildLog } from '@/utils/logger'
@@ -25,7 +24,14 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:NotifyButton:index')
 
-const NotifyButton = ({ testid, subscribed }) => {
+type TProps = {
+  testid?: string
+  subscribed?: boolean
+}
+const NotifyButton: FC<TProps> = ({
+  testid = 'notify-button',
+  subscribed = false,
+}) => {
   return (
     <Wrapper testid={testid}>
       {subscribed ? (
@@ -67,14 +73,4 @@ const NotifyButton = ({ testid, subscribed }) => {
   )
 }
 
-NotifyButton.propTypes = {
-  testid: T.string,
-  subscribed: T.bool,
-}
-
-NotifyButton.defaultProps = {
-  testid: 'notify-button',
-  subscribed: false,
-}
-
-export default React.memo(NotifyButton)
+export default memo(NotifyButton)
diff --git a/src/components/Buttons/styles/notify_button/index.ts b/src/components/Buttons/styles/notify_button/index.ts
index dcfd78b94..5f8e9e7d7 100644
--- a/src/components/Buttons/styles/notify_button/index.ts
+++ b/src/components/Buttons/styles/notify_button/index.ts
@@ -28,7 +28,7 @@ export const NotifyOffIcon = styled(NotifyIcon)`
     fill: ${theme('thread.articleTitle')};
   }
 `
-export const Title = styled.div<{ active: boolean }>`
+export const Title = styled.div<{ active?: boolean }>`
   color: ${({ active }) =>
     active ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   font-size: 13px;
diff --git a/src/components/DigestSentence/styles/index.ts b/src/components/DigestSentence/styles/index.ts
index 174f1c48d..3efc98689 100755
--- a/src/components/DigestSentence/styles/index.ts
+++ b/src/components/DigestSentence/styles/index.ts
@@ -35,7 +35,8 @@ export const Text = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
-  line-height: 1.75;
+  line-height: 1.65;
+  letter-spacing: 0.5px;
 `
 
 export const HintWrapper = styled.div`
diff --git a/src/components/DigestSentence/styles/metric.ts b/src/components/DigestSentence/styles/metric.ts
index faf270814..a041adbe8 100644
--- a/src/components/DigestSentence/styles/metric.ts
+++ b/src/components/DigestSentence/styles/metric.ts
@@ -8,7 +8,7 @@ export const getFontSize = (size: TSIZE_SM): string => {
     }
 
     default:
-      return '13.5px'
+      return '13px'
   }
 }
 
diff --git a/src/components/EmotionSelector/Panel.tsx b/src/components/EmotionSelector/Panel.tsx
index 73e512ed9..0d655e3d1 100644
--- a/src/components/EmotionSelector/Panel.tsx
+++ b/src/components/EmotionSelector/Panel.tsx
@@ -1,14 +1,14 @@
 import { FC, memo } from 'react'
+import { values } from 'ramda'
 
+import { EMOTION } from '@/constant'
 import { ICON } from '@/config'
 import { Wrapper, EIcon } from './styles/panel'
 
-const emotions = ['downvote', 'heart', 'confused', 'beer', 'popcorn', 'pill']
-
 const EmojiPanel: FC = () => {
   return (
     <Wrapper>
-      {emotions.map((item) => (
+      {values(EMOTION).map((item) => (
         <EIcon
           key={item}
           src={`${ICON}/emotion/${item}.png`}
diff --git a/src/components/EmotionSelector/SelectedEmotions.tsx b/src/components/EmotionSelector/SelectedEmotions.tsx
index 7007a82c0..2cccea3ac 100644
--- a/src/components/EmotionSelector/SelectedEmotions.tsx
+++ b/src/components/EmotionSelector/SelectedEmotions.tsx
@@ -6,17 +6,10 @@ import { FC, memo, Fragment } from 'react'
 import { buildLog } from '@/utils/logger'
 import { keys } from 'ramda'
 
-import { ICON } from '@/config'
-import Tooltip from '@/components/Tooltip'
-import AnimatedCount from '@/components/AnimatedCount'
+import type { TEmotion, TSimpleUser } from '@/spec'
+import { titleCase } from '@/utils/helper'
 
-import {
-  Wrapper,
-  EIcon,
-  PopHint,
-  PopUsers,
-  Count,
-} from './styles/selected_emotions'
+import UsersPanel from './UsersPanel'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:SelectedEmotions:index')
@@ -26,31 +19,8 @@ const getEmotionName = (item): string => {
   return eCountKey.split('Count')[0]
 }
 
-const Emotion: FC<{ name: string; count: number }> = ({ name, count }) => {
-  const emotionIcon = (
-    <EIcon src={`${ICON}/emotion/${name}.png`} name={name} noLazy />
-  )
-  return (
-    <Tooltip
-      content={
-        <PopHint>
-          <PopUsers>xxx, yyy, zzz 等 7 人</PopUsers> {emotionIcon}
-        </PopHint>
-      }
-      noPadding
-    >
-      <Wrapper>
-        {emotionIcon}
-        <Count>
-          <AnimatedCount count={count} size="tiny" active={false} />
-        </Count>
-      </Wrapper>
-    </Tooltip>
-  )
-}
-
 type TProps = {
-  emotions: Record<string, number | string[] | boolean>[]
+  emotions: TEmotion[]
 }
 
 const SelectedEmotions: FC<TProps> = ({ emotions }) => {
@@ -59,8 +29,11 @@ const SelectedEmotions: FC<TProps> = ({ emotions }) => {
       {emotions.map((item) => {
         const eName = getEmotionName(item) as string
         const count = item[`${eName}Count`] as number
+        const users = item[`latest${titleCase(eName)}Users`] as TSimpleUser[]
 
-        return <Emotion key={eName} name={eName} count={count} />
+        return (
+          <UsersPanel key={eName} name={eName} count={count} users={users} />
+        )
       })}
     </Fragment>
   )
diff --git a/src/components/EmotionSelector/UsersPanel.tsx b/src/components/EmotionSelector/UsersPanel.tsx
new file mode 100644
index 000000000..24ec3e9e2
--- /dev/null
+++ b/src/components/EmotionSelector/UsersPanel.tsx
@@ -0,0 +1,68 @@
+/*
+ * EmojiSelector
+ */
+
+import { FC, memo } from 'react'
+import { buildLog } from '@/utils/logger'
+
+import type { TSimpleUser } from '@/spec'
+import { ICON } from '@/config'
+
+import Tooltip from '@/components/Tooltip'
+import AnimatedCount from '@/components/AnimatedCount'
+
+import {
+  Wrapper,
+  EIcon,
+  PopHint,
+  PopUsers,
+  Count,
+  Units,
+  Username,
+} from './styles/users_panel'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:UsersPanel:index')
+
+type TProps = {
+  name: string
+  count: number
+  users: TSimpleUser[]
+}
+
+const UsersPanel: FC<TProps> = ({ name, count, users }) => {
+  const showUnit = users.length > count
+
+  const emotionIcon = (
+    <EIcon src={`${ICON}/emotion/${name}.png`} name={name} noLazy />
+  )
+
+  return (
+    <Tooltip
+      content={
+        <PopHint>
+          <PopUsers>
+            {users.slice(0, 5).map((u, index) => (
+              <Username key={u.login}>
+                {u.nickname}
+                {users.length - 1 !== index ? ',' : ''}
+              </Username>
+            ))}
+            {showUnit && <Units>等 {count} 人</Units>}
+          </PopUsers>{' '}
+          {emotionIcon}
+        </PopHint>
+      }
+      noPadding
+    >
+      <Wrapper>
+        {emotionIcon}
+        <Count>
+          <AnimatedCount count={count} size="tiny" active={false} />
+        </Count>
+      </Wrapper>
+    </Tooltip>
+  )
+}
+
+export default memo(UsersPanel)
diff --git a/src/components/EmotionSelector/index.tsx b/src/components/EmotionSelector/index.tsx
index 5a3bd2c05..223b9c6df 100755
--- a/src/components/EmotionSelector/index.tsx
+++ b/src/components/EmotionSelector/index.tsx
@@ -3,8 +3,12 @@
  */
 
 import { FC, memo } from 'react'
-import { buildLog } from '@/utils/logger'
+import { values, reject, includes } from 'ramda'
 
+import type { TEmotion } from '@/spec'
+import { buildLog } from '@/utils/logger'
+import { titleCase } from '@/utils/helper'
+import { EMOTION } from '@/constant'
 import IconButton from '@/components/Buttons/IconButton'
 import Tooltip from '@/components/Tooltip'
 
@@ -15,35 +19,33 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:EmotionSelector:index')
 
-const tmpEmotions = [
-  {
-    downvoteCount: 5,
-  },
-  {
-    heartCount: 10,
-  },
-  {
-    confusedCount: 7,
-  },
-  {
-    beerCount: 3,
-  },
-  {
-    popcornCount: 12,
-  },
-  {
-    pillCount: 20,
-  },
-]
+const emotionsCoverter = (selectedEmotions: TEmotion): TEmotion[] => {
+  const converted = []
+  values(EMOTION).forEach((emotion) =>
+    converted.push({
+      [`${emotion}Count`]: selectedEmotions[`${emotion}Count`],
+      [`latest${titleCase(emotion)}Users`]:
+        selectedEmotions[`latest${titleCase(emotion)}Users`],
+      [`viewerHas${titleCase(emotion)}ed`]:
+        selectedEmotions[`viewerHas${titleCase(emotion)}ed`],
+    }),
+  )
+
+  return reject((e) => includes(0, values(e)), converted)
+}
 
 type TProps = {
   testid?: string
+  emotions: TEmotion
 }
 
-const EmotionSelector: FC<TProps> = ({ testid = 'emotion-selector' }) => {
+const EmotionSelector: FC<TProps> = ({
+  testid = 'emotion-selector',
+  emotions,
+}) => {
   return (
     <Wrapper testid={testid}>
-      <SelectedEmotions emotions={tmpEmotions} />
+      <SelectedEmotions emotions={emotionsCoverter(emotions)} />
       <Tooltip content={<Panel />} trigger="click">
         <IconButton path="emotion/emotion.svg" mRight={0} mTop={1} />
       </Tooltip>
diff --git a/src/components/EmotionSelector/styles/selected_emotions.ts b/src/components/EmotionSelector/styles/users_panel.ts
similarity index 81%
rename from src/components/EmotionSelector/styles/selected_emotions.ts
rename to src/components/EmotionSelector/styles/users_panel.ts
index 568957ce3..a927dd8dd 100644
--- a/src/components/EmotionSelector/styles/selected_emotions.ts
+++ b/src/components/EmotionSelector/styles/users_panel.ts
@@ -33,13 +33,23 @@ export const Count = styled.div`
     color: #00a59b;
   }
 `
+export const PopHint = styled.div`
+  ${css.flex('align-center')};
+  padding: 3px 5px;
+  padding-left: 10px;
+`
 export const PopUsers = styled.div`
+  ${css.flex('align-center')};
+  font-size: 13px;
+`
+export const Username = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 13px;
   margin-right: 5px;
 `
-export const PopHint = styled.div`
-  ${css.flex('align-center')};
-  padding: 3px 5px;
-  padding-left: 10px;
+export const Units = styled.div`
+  color: ${theme('thread.articleDigest')};
+  margin-left: 3px;
+  margin-right: 3px;
+  font-size: 13px;
 `
diff --git a/src/components/Folder/Footer.tsx b/src/components/Folder/Footer.tsx
index 2304747f2..9c85a8495 100644
--- a/src/components/Folder/Footer.tsx
+++ b/src/components/Folder/Footer.tsx
@@ -6,7 +6,7 @@ import MenuButton from '@/components/Buttons/MenuButton'
 import Tooltip from '@/components/Tooltip'
 
 import DetailInfo from './DetailInfo'
-// import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+// import { LavaLampLoading } from '@/components/dynamic'
 import {
   Wrapper,
   Title,
diff --git a/src/components/JobItem/index.tsx b/src/components/JobItem/index.tsx
index 330be1e7a..53fea5bff 100755
--- a/src/components/JobItem/index.tsx
+++ b/src/components/JobItem/index.tsx
@@ -10,6 +10,7 @@ import type { TJob, TC11N } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
 import ArticleCard from '@/components/ArticleCard'
+import { ArticleReadLabel, ArticlePinLabel } from '@/components/dynamic'
 
 import { Wrapper } from './styles'
 
@@ -24,6 +25,8 @@ type TProps = {
 const JobItem: FC<TProps> = ({ entry, c11n }) => {
   return (
     <Wrapper entry={entry} c11n={c11n}>
+      <ArticleReadLabel entry={entry} top={-3} left={-3} />
+      <ArticlePinLabel entry={entry} />
       <ArticleCard data={entry} />
     </Wrapper>
   )
diff --git a/src/components/Pagi/RealPagi.tsx b/src/components/Pagi/RealPagi.tsx
index 7f38cd4b1..32ce701c3 100644
--- a/src/components/Pagi/RealPagi.tsx
+++ b/src/components/Pagi/RealPagi.tsx
@@ -52,8 +52,8 @@ const Pagi: FC<TProps> = ({
 
   margin = {},
   showBottomMsg = false,
-  emptyMsg = '还没有评论',
-  noMoreMsg = '没有更多评论了',
+  emptyMsg = '还没有讨论',
+  noMoreMsg = '没有更多讨论了',
 }) => {
   const theMargin = merge(defaultMargin, margin)
 
diff --git a/src/components/PostItem/DesktopView/ActiveBadge.tsx b/src/components/PostItem/DesktopView/ActiveBadge.tsx
index abf84607b..1c9020e30 100644
--- a/src/components/PostItem/DesktopView/ActiveBadge.tsx
+++ b/src/components/PostItem/DesktopView/ActiveBadge.tsx
@@ -1,9 +1,11 @@
-import { FC } from 'react'
+import { FC, memo } from 'react'
+import TimeAgo from 'timeago-react'
 
 import type { TArticle } from '@/spec'
 import IconButton from '@/components/Buttons/IconButton'
+import ReadableDate from '@/components/ReadableDate'
 
-import { Wrapper, Hint } from '../styles/desktop_view/active_badge'
+import { Wrapper, Hint, TimeStr } from '../styles/desktop_view/active_badge'
 
 type TProps = {
   item: TArticle
@@ -18,14 +20,21 @@ const ActiveBadge: FC<TProps> = ({ item }) => {
       <IconButton
         path={path}
         size={14}
-        hint={<Hint>最后回复: 2020-03-11 14:33</Hint>}
+        hint={
+          <Hint>
+            <div>最后回复时间: </div>
+            <TimeStr>
+              <ReadableDate date={item.activeAt} fmt="absolute" />
+            </TimeStr>
+          </Hint>
+        }
         mRight={6}
         hintPlacement="bottom"
         hintDelay={0}
       />
-      <div>4天前</div>
+      <TimeAgo datetime={item.activeAt} locale="zh_CN" />
     </Wrapper>
   )
 }
 
-export default ActiveBadge
+export default memo(ActiveBadge)
diff --git a/src/components/PostItem/DesktopView/Body.tsx b/src/components/PostItem/DesktopView/Body.tsx
index 11e4bd342..9d36be621 100644
--- a/src/components/PostItem/DesktopView/Body.tsx
+++ b/src/components/PostItem/DesktopView/Body.tsx
@@ -71,7 +71,7 @@ const Body: FC<TProps> = ({ item }) => {
       </Extra>
 
       <DigestSentence
-        top={5}
+        top={3}
         right={140}
         onPreview={() => send(EVENT.PREVIEW_ARTICLE, { article: item })}
       >
diff --git a/src/components/PostItem/DesktopView/index.tsx b/src/components/PostItem/DesktopView/index.tsx
index bbfe93cf2..d400d2dc8 100644
--- a/src/components/PostItem/DesktopView/index.tsx
+++ b/src/components/PostItem/DesktopView/index.tsx
@@ -5,15 +5,12 @@ import { UPVOTE_LAYOUT } from '@/constant'
 
 import TheAvatar from '@/components/TheAvatar'
 import Upvote from '@/components/Upvote'
+import { ArticleReadLabel, ArticlePinLabel } from '@/components/dynamic'
 
 import Header from './Header'
 import Body from './Body'
 
-import {
-  AvatarWrapper,
-  UpvoteWrapper,
-  Main,
-} from '../styles/desktop_view/index'
+import { AvatarWrapper, UpvoteWrapper, Main } from '../styles/desktop_view'
 
 type TProps = {
   active?: TPost | null
@@ -26,6 +23,8 @@ type TProps = {
 const DigestView: FC<TProps> = ({ entry }) => {
   return (
     <Fragment>
+      <ArticleReadLabel entry={entry} />
+      <ArticlePinLabel entry={entry} />
       <AvatarWrapper>
         <TheAvatar user={entry.author} />
         <UpvoteWrapper>
diff --git a/src/components/PostItem/index.tsx b/src/components/PostItem/index.tsx
index 3557bf75a..17acf0ae9 100755
--- a/src/components/PostItem/index.tsx
+++ b/src/components/PostItem/index.tsx
@@ -7,11 +7,10 @@
 import { FC, memo } from 'react'
 import dynamic from 'next/dynamic'
 
-import type { TPost, TID, TUser, TAccount, TC11N } from '@/spec'
+import type { TPost, TUser, TAccount, TC11N } from '@/spec'
 import { buildLog } from '@/utils/logger'
 import usePlatform from '@/hooks/usePlatform'
 
-// import ArticleItemPrefixLabel from '@/components/ArticleItemPrefixLabel'
 import DesktopView from './DesktopView'
 import MobileView from './MobileView'
 // import ListView from './ListView'
@@ -21,13 +20,6 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:PostItem:index')
 
-export const ArticleItemPrefixLabel = dynamic(
-  () => import('@/components/ArticleItemPrefixLabel'),
-  {
-    ssr: false,
-  },
-)
-
 type TProps = {
   entry: TPost
   c11n: TC11N
@@ -46,7 +38,6 @@ const PostItem: FC<TProps> = ({
 
   return (
     <Wrapper entry={entry} c11n={c11n}>
-      <ArticleItemPrefixLabel entry={entry} />
       {!isMobile ? (
         <DesktopView
           entry={entry}
diff --git a/src/components/PostItem/styles/desktop_view/active_badge.ts b/src/components/PostItem/styles/desktop_view/active_badge.ts
index dd32fe78f..f4423c683 100644
--- a/src/components/PostItem/styles/desktop_view/active_badge.ts
+++ b/src/components/PostItem/styles/desktop_view/active_badge.ts
@@ -2,7 +2,6 @@ import styled from 'styled-components'
 
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
-import { Main } from './index'
 
 export const Wrapper = styled.div<{ hasComments: boolean }>`
   ${css.flex('align-center')};
@@ -10,16 +9,17 @@ export const Wrapper = styled.div<{ hasComments: boolean }>`
   position: absolute;
   top: 6px;
   right: 0;
-  color: ${theme('thread.articleTitle')};
+  color: ${theme('thread.articleDigest')};
   margin-right: 1px;
   margin-top: 8px;
-
-  ${Main}:hover & {
-    color: ${theme('thread.articleTitle')};
-  }
-  transition: opacity 0.2s;
 `
 export const Hint = styled.div`
+  ${css.flexColumn('align-start')};
+  color: ${theme('thread.articleDigest')};
+  width: 180px;
+  padding-left: 5px;
+  font-size: 13px;
+`
+export const TimeStr = styled.div`
   color: ${theme('thread.articleTitle')};
-  width: 200px;
 `
diff --git a/src/components/PostItem/styles/desktop_view/header.ts b/src/components/PostItem/styles/desktop_view/header.ts
index 561742a7d..e0a0e76d3 100644
--- a/src/components/PostItem/styles/desktop_view/header.ts
+++ b/src/components/PostItem/styles/desktop_view/header.ts
@@ -18,13 +18,13 @@ export const Title = styled.a`
   color: ${theme('thread.articleTitle')};
   text-decoration: none;
   @media (max-width: 1450px) {
-    max-width: 500px;
+    ${css.cutRest('500px')};
   }
   @media (max-width: 1250px) {
-    max-width: 450px;
+    ${css.cutRest('450px')};
   }
   @media (max-width: 1100px) {
-    max-width: 350px;
+    ${css.cutRest('350px')};
   }
 
   &:hover {
diff --git a/src/components/PostItem/styles/desktop_view/index.ts b/src/components/PostItem/styles/desktop_view/index.ts
index f060ca78a..987fd0d80 100644
--- a/src/components/PostItem/styles/desktop_view/index.ts
+++ b/src/components/PostItem/styles/desktop_view/index.ts
@@ -13,7 +13,7 @@ export const AvatarWrapper = styled.div`
 `
 export const UpvoteWrapper = styled.div`
   margin-top: 10px;
-  margin-left: 3px;
+  margin-left: 5px;
 `
 export const Avatar = styled(Img)`
   ${css.circle(36)};
diff --git a/src/components/RadarItem/index.tsx b/src/components/RadarItem/index.tsx
index 9cde8b179..91ced77cc 100755
--- a/src/components/RadarItem/index.tsx
+++ b/src/components/RadarItem/index.tsx
@@ -11,6 +11,7 @@ import { THREAD } from '@/constant'
 import { buildLog } from '@/utils/logger'
 
 import ArticleCard from '@/components/ArticleCard'
+import { ArticleReadLabel, ArticlePinLabel } from '@/components/dynamic'
 
 import { Wrapper } from './styles'
 
@@ -25,6 +26,8 @@ type TProps = {
 const RadarItem: FC<TProps> = ({ entry, c11n }) => {
   return (
     <Wrapper entry={entry} c11n={c11n}>
+      <ArticleReadLabel entry={entry} top={-3} left={-3} />
+      <ArticlePinLabel entry={entry} />
       <ArticleCard data={entry} thread={THREAD.RADAR} />
     </Wrapper>
   )
diff --git a/src/containers/digest/ArticleDigest/DesktopView/PostLayout/PublishDate.tsx b/src/components/ReadableDate/AbsoluteFmt.tsx
similarity index 56%
rename from src/containers/digest/ArticleDigest/DesktopView/PostLayout/PublishDate.tsx
rename to src/components/ReadableDate/AbsoluteFmt.tsx
index 8f86f90b7..bf62f7a3c 100644
--- a/src/containers/digest/ArticleDigest/DesktopView/PostLayout/PublishDate.tsx
+++ b/src/components/ReadableDate/AbsoluteFmt.tsx
@@ -1,28 +1,32 @@
 import { FC, memo } from 'react'
 
 import { Space } from '@/components/Common'
-import { Wrapper } from '../../styles/desktop_view/post_layout/publish_date'
+import { Wrapper } from './styles/absolute_fmt'
 
 const calcRange = (hours) => {
   if (hours >= 0 && hours <= 6) return '凌晨'
 
-  return hours >= 12 ? '下午' : '上午'
+  return hours > 12 ? '下午' : '上午'
 }
 
 type TProps = {
-  insertedAt: string
+  datetime: string
+  className: string
 }
 
-const PublishDate: FC<TProps> = ({ insertedAt }) => {
-  const DateObj = new Date(insertedAt)
+const AbsoluteFmt: FC<TProps> = ({ datetime, className }) => {
+  const DateObj = new Date(datetime)
   const [month, date, year] = DateObj.toLocaleDateString().split('/')
 
   const hours = DateObj.getHours()
   const range = calcRange(hours)
-  const hour = hours >= 12 ? hours - 12 : hours
+  const hour = hours > 12 ? hours - 12 : hours
 
   return (
-    <Wrapper>
+    <Wrapper className={className}>
+      {year}
+      <Space right={1} />
+      年，
       {month}
       <Space right={3} />月
       <Space right={3} />
@@ -32,11 +36,9 @@ const PublishDate: FC<TProps> = ({ insertedAt }) => {
       {range}
       <Space right={2} />
       {hour}
-      <Space right={3} />
-      点，{year}
-      <Space right={1} />年
+      <Space right={3} />点
     </Wrapper>
   )
 }
 
-export default memo(PublishDate)
+export default memo(AbsoluteFmt)
diff --git a/src/components/ReadableDate/index.tsx b/src/components/ReadableDate/index.tsx
new file mode 100755
index 000000000..1feffc09c
--- /dev/null
+++ b/src/components/ReadableDate/index.tsx
@@ -0,0 +1,37 @@
+/*
+ *
+ * ReadableDate
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils/logger'
+
+import AbsoluteFmt from './AbsoluteFmt'
+import { Wrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ReadableDate:index')
+
+type TProps = {
+  testid?: string
+  date: string
+  fmt?: 'relative' | 'absolute'
+  className?: string
+}
+
+const ReadableDate: FC<TProps> = ({
+  testid = 'readable-date',
+  fmt = 'relative',
+  className = 'readable-date',
+  date,
+}) => {
+  return (
+    <Wrapper testid={testid} className={className}>
+      <AbsoluteFmt datetime={date} className={className} />
+    </Wrapper>
+  )
+}
+
+export default memo(ReadableDate)
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/publish_date.ts b/src/components/ReadableDate/styles/absolute_fmt.tsx
similarity index 70%
rename from src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/publish_date.ts
rename to src/components/ReadableDate/styles/absolute_fmt.tsx
index 888856291..97399f8d4 100644
--- a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/publish_date.ts
+++ b/src/components/ReadableDate/styles/absolute_fmt.tsx
@@ -1,12 +1,10 @@
 import styled from 'styled-components'
 
-import { theme } from '@/utils/themes'
+// import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
-  color: ${theme('thread.articleDigest')};
-  font-size: 14px;
 
   ${css.media.mobile`
     font-size: 12px;
diff --git a/src/components/ReadableDate/styles/index.ts b/src/components/ReadableDate/styles/index.ts
new file mode 100755
index 000000000..74680fc67
--- /dev/null
+++ b/src/components/ReadableDate/styles/index.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+// import Img from '@/Img'
+// import { theme } from '@/utils/themes'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>``
+
+export const Title = styled.div``
diff --git a/src/components/ReadableDate/tests/index.test.ts b/src/components/ReadableDate/tests/index.test.ts
new file mode 100755
index 000000000..d8517ed24
--- /dev/null
+++ b/src/components/ReadableDate/tests/index.test.ts
@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import ReadableDate from '../index'
+
+describe('TODO <ReadableDate />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})
diff --git a/src/components/RepoItem/index.js b/src/components/RepoItem/index.js
index b4c33ad1e..c5247bfe3 100755
--- a/src/components/RepoItem/index.js
+++ b/src/components/RepoItem/index.js
@@ -9,9 +9,7 @@ import T from 'prop-types'
 
 import { cutRest } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
-import { C11N } from '@/constant'
 
-import ArticleItemPrefixLabel from '@/components/ArticleItemPrefixLabel'
 import Header from './Header'
 import Footer from './Footer'
 
@@ -23,7 +21,6 @@ const log = buildLog('c:RepoItem:index')
 
 const RepoItem = ({ entry, active, onPreview, accountInfo }) => (
   <Wrapper opacity={getOpacity(entry, active, accountInfo)}>
-    <ArticleItemPrefixLabel entry={entry} topOffset="22px" />
     <Header entry={entry} onPreview={() => onPreview(entry)} />
     <BodyDigest>{cutRest(entry.desc, 180)}</BodyDigest>
     <Footer
diff --git a/src/components/Switcher/styles/tabs/tab_item.ts b/src/components/Switcher/styles/tabs/tab_item.ts
index 0c86dd1c4..dc582eac7 100644
--- a/src/components/Switcher/styles/tabs/tab_item.ts
+++ b/src/components/Switcher/styles/tabs/tab_item.ts
@@ -71,6 +71,8 @@ export const Label = styled.span<TLabel>`
     active ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   margin-bottom: ${({ bottomSpace }) => `${bottomSpace}px`};
 
+  opacity: ${({ active }) => (active ? 1 : 0.9)};
+
   &:hover {
     color: ${theme('thread.articleTitle')};
     svg {
diff --git a/src/components/TheAvatar/styles/post_item_avatar.ts b/src/components/TheAvatar/styles/post_item_avatar.ts
index bf32a3834..64bb9e71e 100644
--- a/src/components/TheAvatar/styles/post_item_avatar.ts
+++ b/src/components/TheAvatar/styles/post_item_avatar.ts
@@ -10,13 +10,13 @@ export const Wrapper = styled.div`
   cursor: pointer;
   ${css.circle(32)};
   position: relative;
-  margin-top: 6px;
+  margin-top: 4px;
 `
 export const InnerShadow = styled.div`
   position: absolute;
-  ${css.circle(32)};
-  height: 32.5px;
-  top: -2px;
+  ${css.circle(30)};
+  height: 31px;
+  top: 0px;
   left: 0px;
   box-shadow: ${theme('avatar.shadow')};
   z-index: 2;
diff --git a/src/components/UserList/Setter/Header.tsx b/src/components/UserList/Setter/Header.tsx
index 4653122a1..cd51772a6 100644
--- a/src/components/UserList/Setter/Header.tsx
+++ b/src/components/UserList/Setter/Header.tsx
@@ -5,7 +5,7 @@ import { ICON } from '@/config'
 import { Wrapper, BackWrapper, PlusIcon } from '../styles/setter/header'
 import Button from '@/components/Buttons/Button'
 import ArrowButton from '@/components/Buttons/ArrowButton'
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 
 import type { TView } from '../spec'
 
diff --git a/src/components/dynamic.tsx b/src/components/dynamic.tsx
new file mode 100644
index 000000000..8068a07ca
--- /dev/null
+++ b/src/components/dynamic.tsx
@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic'
+
+export const ArticleReadLabel = dynamic(() => import('./ArticleReadLabel'), {
+  ssr: false,
+})
+
+export const ArticlePinLabel = dynamic(() => import('./ArticlePinLabel'), {
+  ssr: false,
+})
+
+export const LavaLampLoading = dynamic(
+  () => import('./Loading/LavaLampLoading'),
+  {
+    ssr: false,
+  },
+)
diff --git a/src/containers/content/ArticleContent/DesktopView/index.tsx b/src/containers/content/ArticleContent/DesktopView/index.tsx
index d073a96c6..cd54ef0e7 100644
--- a/src/containers/content/ArticleContent/DesktopView/index.tsx
+++ b/src/containers/content/ArticleContent/DesktopView/index.tsx
@@ -12,12 +12,12 @@ import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
 import ArticleSticker from '@/containers/tool/ArticleSticker'
-import ArticleBody from '@/components/ArticleBody'
+import ArtimentBody from '@/components/ArtimentBody'
 // import ArticleFooter from '@/containers/unit/ArticleFooter'
 
 import ViewportTracker from '@/components/ViewportTracker'
 import Maybe from '@/components/Maybe'
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 
 import type { TStore } from '../store'
 
@@ -74,7 +74,7 @@ const ArticleContentContainer: FC<TProps> = ({
           />
           <MainWrapper metric={metric}>
             <ArticleWrapper ref={ref}>
-              <ArticleBody document={viewingArticle.document} />
+              <ArtimentBody document={viewingArticle.document} />
               <ArticleFooter />
             </ArticleWrapper>
 
diff --git a/src/containers/content/ArticleContent/MobileView/index.tsx b/src/containers/content/ArticleContent/MobileView/index.tsx
index b8866d92c..ed77b94bf 100644
--- a/src/containers/content/ArticleContent/MobileView/index.tsx
+++ b/src/containers/content/ArticleContent/MobileView/index.tsx
@@ -13,7 +13,7 @@ import { pluggedIn } from '@/utils/mobx'
 // import Comments from '@/containers/unit/Comments'
 // import ArticleFooter from '@/containers/unit/ArticleFooter'
 
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 import Maybe from '@/components/Maybe'
 // import MarkDownRender from '@/components/MarkDownRender'
 import ViewportTracker from '@/components/ViewportTracker'
diff --git a/src/containers/content/CommunityContent/HolyGrailLayout.tsx b/src/containers/content/CommunityContent/HolyGrailLayout.tsx
index 954a57303..fbb3df0b4 100644
--- a/src/containers/content/CommunityContent/HolyGrailLayout.tsx
+++ b/src/containers/content/CommunityContent/HolyGrailLayout.tsx
@@ -14,7 +14,7 @@ import { send } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 
 import TabBar from '@/components/TabBar'
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 
 import ThreadContent from './ThreadContent'
 import SubscribedList from './SubscribedList'
diff --git a/src/containers/content/HaveADrinkContent/Header/Reaction.tsx b/src/containers/content/HaveADrinkContent/Header/Reaction.tsx
index 1765d35fb..de9a92c5a 100755
--- a/src/containers/content/HaveADrinkContent/Header/Reaction.tsx
+++ b/src/containers/content/HaveADrinkContent/Header/Reaction.tsx
@@ -17,7 +17,7 @@ const log = buildLog('C:HaveADrinkContent')
 const Reaction: FC = () => {
   return (
     <Wrapper>
-      <div>评论 | 喜欢</div>
+      <div>讨论 | 喜欢</div>
     </Wrapper>
   )
 }
diff --git a/src/containers/content/UserContent/index.tsx b/src/containers/content/UserContent/index.tsx
index 0e4fb5e67..6c297fb0d 100755
--- a/src/containers/content/UserContent/index.tsx
+++ b/src/containers/content/UserContent/index.tsx
@@ -49,7 +49,7 @@ const BaseTaberThreads = [
     raw: 'publish',
   },
   {
-    title: '评论',
+    title: '讨论',
     raw: 'comments',
   },
   {
diff --git a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx
index d6cea34c7..f92891604 100644
--- a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx
+++ b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx
@@ -1,6 +1,6 @@
 import { FC, memo, Fragment } from 'react'
 
-import type { TArticle, TMetric } from '@/spec'
+import type { TArticle, TMetric, TThread } from '@/spec'
 import { METRIC } from '@/constant'
 
 import Upvote from '@/components/Upvote'
@@ -50,14 +50,17 @@ const FixedHeader: FC<TProps> = ({
   metric = METRIC.ARTICLE,
   testid = 'article-fixed-header',
 }) => {
+  const { upvotesCount, meta } = article
+  const thread = meta.thread.toLowerCase() as TThread
+
   return (
     <Wrapper show={show} testid={testid}>
       <InnerWrapper metric={metric}>
         <ContentWrapper metric={metric}>
           <TitleContent article={article} metric={metric} />
         </ContentWrapper>
-        <StickerWrapper metric={metric}>
-          <Upvote />
+        <StickerWrapper metric={metric} thread={thread}>
+          <Upvote count={upvotesCount} avatarList={meta.latestUpvotedUsers} />
         </StickerWrapper>
       </InnerWrapper>
     </Wrapper>
diff --git a/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx
index 4f913acc1..dd10a7b84 100644
--- a/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx
+++ b/src/containers/digest/ArticleDigest/DesktopView/PostLayout/index.tsx
@@ -13,13 +13,14 @@ import ArticleBaseStats from '@/components/ArticleBaseStats'
 import DotDivider from '@/components/DotDivider'
 import ArchivedSign from '@/components/ArchivedSign'
 import ArticleMenu from '@/components/ArticleMenu'
+import ReadableDate from '@/components/ReadableDate'
 
 import OriginalCommunity from './OriginalCommunity'
-import PublishDate from './PublishDate'
 
 import {
   Main,
   Header,
+  PublishDateInfo,
   Title,
   AuthorName,
   BottomInfo,
@@ -39,7 +40,9 @@ const PostLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article }) => {
     <Fragment>
       <Main metric={metric}>
         <Header>
-          <PublishDate insertedAt={article.insertedAt} />
+          <PublishDateInfo>
+            <ReadableDate date={article.insertedAt} fmt="absolute" />
+          </PublishDateInfo>
           {article.isArchived && (
             <Fragment>
               <DotDivider space={8} />
diff --git a/src/containers/digest/ArticleDigest/MobileView/index.tsx b/src/containers/digest/ArticleDigest/MobileView/index.tsx
index 4dabaa33f..58e50fbae 100644
--- a/src/containers/digest/ArticleDigest/MobileView/index.tsx
+++ b/src/containers/digest/ArticleDigest/MobileView/index.tsx
@@ -14,14 +14,14 @@ import { pluggedIn } from '@/utils/mobx'
 
 import ArticleBaseStats from '@/components/ArticleBaseStats'
 import ViewportTracker from '@/components/ViewportTracker'
-
-import PublishDate from '../DesktopView/PostLayout/PublishDate'
+import ReadableDate from '@/components/ReadableDate'
 
 import type { TStore } from '../store'
 import {
   Wrapper,
   InnerWrapper,
   BannerContent,
+  PublishDateInfo,
   Title,
   Brief,
 } from '../styles/mobile_view/index'
@@ -38,18 +38,20 @@ const ArticleDigestContainer: FC<TProps> = ({ articleDigest: store }) => {
   const { direction: scrollDirection } = useScroll()
   useInit(store, scrollDirection as TScrollDirection)
 
-  const { viewingArticle } = store
+  const { viewingArticle: article } = store
 
-  if (isNil(viewingArticle.id)) return null
+  if (isNil(article.id)) return null
 
   return (
     <Wrapper>
       <InnerWrapper>
         <BannerContent>
           <Brief>
-            <PublishDate insertedAt={viewingArticle.insertedAt} />
-            <Title>{viewingArticle.title}</Title>
-            <ArticleBaseStats article={viewingArticle} />
+            <PublishDateInfo>
+              <ReadableDate date={article.insertedAt} fmt="absolute" />
+            </PublishDateInfo>
+            <Title>{article.title}</Title>
+            <ArticleBaseStats article={article} />
           </Brief>
         </BannerContent>
       </InnerWrapper>
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts
index d58efc3f1..9e2afd07c 100644
--- a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts
+++ b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts
@@ -1,11 +1,11 @@
 import styled from 'styled-components'
 
-import type { TTestable, TMetric, TActive } from '@/spec'
+import type { TTestable, TMetric, TActive, TThread } from '@/spec'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 import Img from '@/Img'
 
-import { getFixStickerOffset } from './metric'
+import { getFixStickerOffset, getFixStickerAlign } from './metric'
 
 type TWrapper = TTestable & TActive
 export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({
@@ -14,7 +14,6 @@ export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({
   ${css.flex('justify-center')};
   top: ${({ show }) => (show ? 0 : '-48px;')};
   opacity: ${({ show }) => (show ? 1 : 0)};
-
   z-index: ${({ show }) => (show ? css.zIndex.articleFixedHeader : -1)};
 
   position: fixed;
@@ -41,9 +40,11 @@ export const ContentWrapper = styled.div<{ metric: TMetric }>`
   height: 100%;
   ${({ metric }) => css.fitContentWidth(metric)};
 `
-export const StickerWrapper = styled.div<{ metric: TMetric }>`
+type TStickerWrapper = { metric: TMetric; thread: TThread }
+export const StickerWrapper = styled.div<TStickerWrapper>`
   ${({ metric }) => css.fitStickerWidth(metric)};
-  ${css.flex('justify-end')};
+  ${({ thread }) => css.flex(getFixStickerAlign(thread))};
+
   margin-left: ${({ metric }) => getFixStickerOffset(metric)};
 `
 export const Cover = styled(Img)`
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts
index 070e6c504..e122021a6 100644
--- a/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts
+++ b/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts
@@ -1,5 +1,5 @@
-import type { TMetric } from '@/spec'
-import { METRIC } from '@/constant'
+import type { TMetric, TThread, TFlexRule } from '@/spec'
+import { METRIC, THREAD } from '@/constant'
 
 export const getDigestHeight = (metric: TMetric): string => {
   switch (metric) {
@@ -29,4 +29,14 @@ export const getFixStickerOffset = (metric: TMetric): string => {
   }
 }
 
-export const holder = 1
+export const getFixStickerAlign = (thread: TThread): TFlexRule => {
+  switch (thread) {
+    case THREAD.WORKS: {
+      return 'justify-end'
+    }
+
+    default: {
+      return 'justify-center'
+    }
+  }
+}
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts
index 64a23b8f6..aac64da06 100644
--- a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts
+++ b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout/index.ts
@@ -13,6 +13,10 @@ export const Header = styled.div`
   ${css.flex('align-center')};
   margin-bottom: 8px;
 `
+export const PublishDateInfo = styled.div`
+  font-size: 14px;
+  color: ${theme('thread.articleDigest')};
+`
 export const CommunityInfo = styled.div`
   ${css.flex('align-start', 'justify-center')};
   margin-top: 5px;
diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts
index a0d6d2dbe..4195019aa 100644
--- a/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts
+++ b/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts
@@ -22,6 +22,10 @@ export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
   margin-bottom: 10px;
 `
+export const PublishDateInfo = styled.div`
+  font-size: 12px;
+  color: ${theme('thread.articleDigest')};
+`
 export const BannerContent = styled.div`
   ${css.flex()};
   height: 100%;
diff --git a/src/containers/editor/ArticleEditor/Settings/index.js b/src/containers/editor/ArticleEditor/Settings/index.js
index a76f5812c..1b1d4808e 100755
--- a/src/containers/editor/ArticleEditor/Settings/index.js
+++ b/src/containers/editor/ArticleEditor/Settings/index.js
@@ -49,7 +49,7 @@ const Settings = () => {
             // onChange={(checked) => updateWorks('isOSS', checked)}
             // size="small"
           >
-            允许评论
+            允许讨论
           </Checker>
         </CheckItem>
         <CheckItem>
@@ -58,7 +58,7 @@ const Settings = () => {
             // onChange={(checked) => updateWorks('isOSS', checked)}
             // size="small"
           >
-            有新评论使用邮件通知我
+            有新讨论使用邮件通知我
           </Checker>
         </CheckItem>
         <CheckItem>
diff --git a/src/containers/layout/GlobalLayout/dynamic.tsx b/src/containers/layout/GlobalLayout/dynamic.tsx
index 4a0c00f7f..09bb883d1 100644
--- a/src/containers/layout/GlobalLayout/dynamic.tsx
+++ b/src/containers/layout/GlobalLayout/dynamic.tsx
@@ -1,7 +1,6 @@
 import dynamic from 'next/dynamic'
 
 import { ScrollHolder } from './styles'
-import { TProps as TErrorPage } from '@/components/ErrorPage'
 
 export const Sidebar = dynamic(() => import('@/containers/unit/Sidebar'), {
   ssr: false,
diff --git a/src/containers/layout/ThemePalette/dynamic.ts b/src/containers/layout/ThemePalette/dynamic.tsx
similarity index 100%
rename from src/containers/layout/ThemePalette/dynamic.ts
rename to src/containers/layout/ThemePalette/dynamic.tsx
diff --git a/src/containers/thread/ArticlesThread/index.tsx b/src/containers/thread/ArticlesThread/index.tsx
index 05bcd0dd6..5be3ef3ff 100755
--- a/src/containers/thread/ArticlesThread/index.tsx
+++ b/src/containers/thread/ArticlesThread/index.tsx
@@ -1,5 +1,3 @@
-//
-
 /*
  *
  * ArticlesThread
diff --git a/src/containers/thread/CperMapThread/MapLoading.tsx b/src/containers/thread/CperMapThread/MapLoading.tsx
index 59f4f207b..7b5e53b44 100755
--- a/src/containers/thread/CperMapThread/MapLoading.tsx
+++ b/src/containers/thread/CperMapThread/MapLoading.tsx
@@ -1,6 +1,6 @@
 import { FC, memo } from 'react'
 
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 import { Wrapper, LoadingIcon, Desc } from './styles/map_loading'
 
 const MapLoading: FC = () => (
diff --git a/src/containers/thread/ThreadSidebar/ClassicLayout/index.tsx b/src/containers/thread/ThreadSidebar/ClassicLayout/index.tsx
index 841a269c3..9f8172996 100644
--- a/src/containers/thread/ThreadSidebar/ClassicLayout/index.tsx
+++ b/src/containers/thread/ThreadSidebar/ClassicLayout/index.tsx
@@ -12,7 +12,7 @@ import dynamic from 'next/dynamic'
 import type { TThread } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 // import DynamicPart from './DynamicPart'
 
 import type { TBaseProps } from '../index'
diff --git a/src/containers/thread/ThreadSidebar/HolyGrailLayout/index.tsx b/src/containers/thread/ThreadSidebar/HolyGrailLayout/index.tsx
index 8c2a44820..15d2b1da9 100644
--- a/src/containers/thread/ThreadSidebar/HolyGrailLayout/index.tsx
+++ b/src/containers/thread/ThreadSidebar/HolyGrailLayout/index.tsx
@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic'
 import type { TCommunity } from '@/spec'
 
 import CommunityBrief from './CommunityBrief'
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 
 import { Wrapper, Divider } from '../styles/holy_grail_layout'
 
diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
index 380540078..6710410d2 100644
--- a/src/containers/tool/AbuseReport/Header.tsx
+++ b/src/containers/tool/AbuseReport/Header.tsx
@@ -12,7 +12,7 @@ const getCustomTitle = (type: string): string => {
       return '用户'
     }
     case REPORT_TYPE.COMMENT: {
-      return '评论'
+      return '讨论'
     }
     case REPORT_TYPE.COMMUNITY: {
       return '社区'
diff --git a/src/containers/tool/AbuseReport/defaults/comment.ts b/src/containers/tool/AbuseReport/defaults/comment.ts
index 73fac2ee8..6b605d91c 100644
--- a/src/containers/tool/AbuseReport/defaults/comment.ts
+++ b/src/containers/tool/AbuseReport/defaults/comment.ts
@@ -38,7 +38,7 @@ const items = [
     raw: REPORT.OTHERS,
     checked: false,
     detail:
-      '其他你认为不适合发表在评论区的内容。如果你有合适的标签能代表此类内容，请在提交时一并附上。',
+      '其他你认为不适合发表在讨论区的内容。如果你有合适的标签能代表此类内容，请在提交时一并附上。',
   },
 ]
 
diff --git a/src/containers/tool/ArticleSticker/CommentSticker.tsx b/src/containers/tool/ArticleSticker/CommentSticker.tsx
index 1deee4ac1..fbaa4db00 100644
--- a/src/containers/tool/ArticleSticker/CommentSticker.tsx
+++ b/src/containers/tool/ArticleSticker/CommentSticker.tsx
@@ -4,52 +4,55 @@
  *
  */
 
-import { FC, memo } from 'react'
-import T from 'prop-types'
+import { FC, memo, useEffect } from 'react'
 
+import type { TArticle, TPagedUsers } from '@/spec'
 import { ICON } from '@/config'
 import { buildLog } from '@/utils/logger'
 
 import NotifyButton from '@/components/Buttons/NotifyButton'
 import Tooltip from '@/components/Tooltip'
 import ImgFallback from '@/components/ImgFallback'
+import UserCard from '@/components/Cards/UserCard'
 
 import {
   Wrapper,
   Title,
   JoinCount,
   UsersWrapper,
-  PopInfo,
   Avatar,
   MoreUserWrapper,
   MoreIcon,
   Divider,
 } from './styles/comment_sticker'
+import { loadPagedCommentsParticipants } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:CommentSticker:index')
 
 type TProps = {
   show: boolean
-  data?: any // TODO
+  participants: TPagedUsers
 }
 
-const CommentSticker: FC<TProps> = ({
-  show,
-  data: { pagedCommentsParticipators: users },
-}) => {
+const CommentSticker: FC<TProps> = ({ show, participants }) => {
+  useEffect(() => {
+    if (show) loadPagedCommentsParticipants()
+  }, [show])
+
   return (
     <Wrapper show={show}>
       <Title>
-        共<JoinCount>{users.totalCount}</JoinCount>人参与
+        共<JoinCount>{participants.totalCount}</JoinCount>
+        人参与讨论
       </Title>
-      {users.totalCount !== 0 && (
+      {participants.totalCount !== 0 && (
         <UsersWrapper>
-          {users.entries.slice(0, 10).map((user) => (
+          {participants.entries.map((user) => (
             <Tooltip
-              key={user.id}
+              key={user.login}
               placement="bottom"
-              content={<PopInfo>{user.nickname}</PopInfo>}
+              content={<UserCard item={user} />}
             >
               <Avatar
                 src={user.avatar}
@@ -60,9 +63,12 @@ const CommentSticker: FC<TProps> = ({
               />
             </Tooltip>
           ))}
-          <MoreUserWrapper>
-            <MoreIcon src={`${ICON}/shape/more.svg`} />
-          </MoreUserWrapper>
+
+          {participants.pageNumber > 1 && (
+            <MoreUserWrapper>
+              <MoreIcon src={`${ICON}/shape/more.svg`} />
+            </MoreUserWrapper>
+          )}
         </UsersWrapper>
       )}
       <Divider />
@@ -71,41 +77,4 @@ const CommentSticker: FC<TProps> = ({
   )
 }
 
-CommentSticker.propTypes = {
-  show: T.bool.isRequired,
-  data: T.shape({
-    communities: T.arrayOf(
-      T.shape({
-        id: T.string,
-        title: T.string,
-        logo: T.string,
-        raw: T.string,
-      }),
-    ),
-    pagedCommentsParticipators: T.shape({
-      entries: T.array,
-      totalCount: T.number,
-    }),
-    tags: T.arrayOf(
-      T.shape({
-        id: T.string,
-        title: T.string,
-        color: T.string,
-        raw: T.string,
-      }),
-    ),
-  }),
-}
-
-CommentSticker.defaultProps = {
-  data: {
-    communities: [],
-    tags: [],
-    pagedCommentsParticipators: {
-      entries: [],
-      totalCount: 0,
-    },
-  },
-}
-
 export default memo(CommentSticker)
diff --git a/src/containers/tool/ArticleSticker/index.tsx b/src/containers/tool/ArticleSticker/index.tsx
index 1d23a84d0..7a32660d8 100755
--- a/src/containers/tool/ArticleSticker/index.tsx
+++ b/src/containers/tool/ArticleSticker/index.tsx
@@ -48,6 +48,7 @@ const ArticleStickerContainer: FC<TProps> = ({
   metric = METRIC.ARTICLE,
 }) => {
   useInit(store)
+  const { pagedCommentsParticipantsData } = store
 
   const {
     showLeftSticker,
@@ -75,7 +76,10 @@ const ArticleStickerContainer: FC<TProps> = ({
                 article={viewingArticle}
                 thread={activeThread}
               />
-              <CommentSticker show={showCommentSticker} data={viewingArticle} />
+              <CommentSticker
+                show={showCommentSticker}
+                participants={pagedCommentsParticipantsData}
+              />
             </MainWrapper>
             <GoTopWrapper show={!isArticleDigestInViewport}>
               <GotoTop />
diff --git a/src/containers/tool/ArticleSticker/logic.ts b/src/containers/tool/ArticleSticker/logic.ts
index 7658f073d..7826bd8c6 100755
--- a/src/containers/tool/ArticleSticker/logic.ts
+++ b/src/containers/tool/ArticleSticker/logic.ts
@@ -4,9 +4,15 @@ import { useEffect } from 'react'
 import { EVENT } from '@/constant'
 import { send } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
-// import S from './service'
+import asyncSuit from '@/utils/async'
+
+import S from './schema'
 import type { TStore } from './store'
 
+const { SR71, $solver, asyncRes } = asyncSuit
+const sr71$ = new SR71()
+
+let sub$ = null
 let store: TStore | undefined
 
 /* eslint-disable-next-line */
@@ -25,6 +31,28 @@ export const collectArticle = (): void => {
   })
 }
 
+export const loadPagedCommentsParticipants = (): void => {
+  const { viewingArticle: article } = store
+
+  const args = {
+    id: article.id,
+    thread: article.meta.thread,
+    filter: { page: 1, size: 20 },
+  }
+  console.log('query args: ', args)
+  sr71$.query(S.pagedCommentsParticipants, args)
+}
+
+const DataSolver = [
+  {
+    match: asyncRes('pagedCommentsParticipants'),
+    action: ({ pagedCommentsParticipants }) => {
+      store.mark({ pagedCommentsParticipants })
+    },
+  },
+]
+const ErrSolver = []
+
 // ###############################
 // init & uninit handlers
 // ###############################
@@ -32,7 +60,13 @@ export const collectArticle = (): void => {
 export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
+    sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
     log('useInit: ', store)
     // return () => store.reset()
+    return () => {
+      sr71$.stop()
+      sub$.unsubscribe()
+      sub$ = null
+    }
   }, [_store])
 }
diff --git a/src/containers/tool/ArticleSticker/schema.ts b/src/containers/tool/ArticleSticker/schema.ts
new file mode 100644
index 000000000..9316e0bae
--- /dev/null
+++ b/src/containers/tool/ArticleSticker/schema.ts
@@ -0,0 +1,20 @@
+import { gql } from '@urql/core'
+import { F } from '@/schemas'
+
+const pagedCommentsParticipants = gql`
+query($id: ID!, $thread: Thread, $filter: PagedFilter!) {
+  pagedCommentsParticipants(id: $id, thread: $thread, filter: $filter) {
+    entries {
+      ${F.author}
+    }
+    ${F.pagedCounts}
+    
+  }
+}
+`
+
+const schema = {
+  pagedCommentsParticipants,
+}
+
+export default schema
diff --git a/src/containers/tool/ArticleSticker/store.ts b/src/containers/tool/ArticleSticker/store.ts
index 281063d7a..b100ccd61 100755
--- a/src/containers/tool/ArticleSticker/store.ts
+++ b/src/containers/tool/ArticleSticker/store.ts
@@ -6,18 +6,26 @@
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 // import {} from 'ramda'
 
-import type { TRootStore, TArticle, TScrollDirection, TThread } from '@/spec'
-import { markStates } from '@/utils/mobx'
+import type {
+  TRootStore,
+  TArticle,
+  TScrollDirection,
+  TThread,
+  TPagedUsers,
+} from '@/spec'
+import { markStates, toJS } from '@/utils/mobx'
+import { PagedUsers, emptyPagi } from '@/model'
 
 const ArticleSticker = T.model('ArticleSticker', {
   isTocMenuOpened: T.optional(T.boolean, false),
+  pagedCommentsParticipants: T.optional(PagedUsers, emptyPagi),
   // is TOC is opend, then lock the lefsidebar
   isLeftStickerLocked: T.optional(T.boolean, false),
 })
   .views((self) => ({
     get viewingArticle(): TArticle {
       const root = getParent(self) as TRootStore
-      return root.viewingArticle
+      return root.viewing.viewingArticle
     },
     get activeThread(): TThread {
       const root = getParent(self) as TRootStore
@@ -59,6 +67,10 @@ const ArticleSticker = T.model('ArticleSticker', {
       const { isArticleInViewport } = self as TStore
       return !isArticleInViewport
     },
+
+    get pagedCommentsParticipantsData(): TPagedUsers {
+      return toJS(self.pagedCommentsParticipants)
+    },
   }))
   .actions((self) => ({
     mark(sobj: Record<string, unknown>): void {
diff --git a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts
index 611911e1d..65f1fc073 100644
--- a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts
+++ b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts
@@ -7,7 +7,7 @@ import Img from '@/Img'
 
 export const Wrapper = styled.div<TActive>`
   min-height: 100px;
-  margin-left: 35%;
+  margin-left: 42px;
   margin-top: 50px;
   padding-bottom: 0;
   width: 65%;
@@ -19,6 +19,7 @@ export const Title = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 13px;
   margin-bottom: 15px;
+  margin-left: 3px;
 `
 export const JoinCount = styled.span`
   color: ${theme('comment.number')};
@@ -36,10 +37,6 @@ export const Avatar = styled(Img)`
   margin-bottom: 10px;
   opacity: 0.8;
 `
-export const PopInfo = styled.div`
-  padding: 5px 10px;
-  color: ${theme('thread.articleTitle')};
-`
 export const MoreUserWrapper = styled.div`
   ${css.circle(20)};
   ${css.flex('align-both')};
diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts
index 30510e863..3d601bf3d 100755
--- a/src/containers/tool/ArticleSticker/styles/index.ts
+++ b/src/containers/tool/ArticleSticker/styles/index.ts
@@ -77,6 +77,6 @@ export const GoTopWrapper = styled.div<TActive>`
   ${css.flex('align-both')};
   opacity: ${({ show }) => (show ? 1 : 0)};
   position: absolute;
-  bottom: -100px;
+  bottom: -120px;
   width: 100%;
 `
diff --git a/src/containers/tool/CollectionFolder/Setter.tsx b/src/containers/tool/CollectionFolder/Setter.tsx
index e0fe4d827..19fa39910 100755
--- a/src/containers/tool/CollectionFolder/Setter.tsx
+++ b/src/containers/tool/CollectionFolder/Setter.tsx
@@ -34,7 +34,7 @@ const Setter: FC<TProps> = ({ show, selectedId }) => {
   return (
     <Wrapper show={show}>
       <Header>
-        添加<Artiment>某篇文章或评论</Artiment>到收藏夹
+        添加<Artiment>某篇文章或讨论</Artiment>到收藏夹
       </Header>
       <ListWrapper>
         <FolderWrapper>
diff --git a/src/containers/tool/CommunityTagSetter/CommunitySetter/Body.tsx b/src/containers/tool/CommunityTagSetter/CommunitySetter/Body.tsx
index fffdbc021..01d0501c5 100644
--- a/src/containers/tool/CommunityTagSetter/CommunitySetter/Body.tsx
+++ b/src/containers/tool/CommunityTagSetter/CommunitySetter/Body.tsx
@@ -3,7 +3,7 @@ import { isEmpty } from 'ramda'
 
 import CustomScroller from '@/components/CustomScroller'
 import NoticeBar from '@/components/NoticeBar'
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 
 import type { TCommunitiesList } from '../spec'
 import SearchBox from './SearchBox'
diff --git a/src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx b/src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx
index 931428a2a..5d2535319 100644
--- a/src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx
+++ b/src/containers/tool/CommunityTagSetter/CommunitySetter/Header.tsx
@@ -8,7 +8,7 @@ import { COMMUNITY_ACTION } from '../constant'
 import { Wrapper, Title, Actions } from '../styles/community_setter/header'
 // import { changeTagView } from '../logic'
 
-// import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+// import { LavaLampLoading } from '@/components/dynamic'
 
 type TProps = {
   view: TCommunityView
diff --git a/src/containers/tool/CommunityTagSetter/TagSetter/Header.tsx b/src/containers/tool/CommunityTagSetter/TagSetter/Header.tsx
index 5b12691c7..0a5289b65 100644
--- a/src/containers/tool/CommunityTagSetter/TagSetter/Header.tsx
+++ b/src/containers/tool/CommunityTagSetter/TagSetter/Header.tsx
@@ -9,7 +9,7 @@ import { Wrapper, Title, Actions } from '../styles/tag_setter/header'
 import { changeTagView } from '../logic'
 
 // import DotDivider from '@/components/DotDivider'
-// import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+// import { LavaLampLoading } from '@/components/dynamic'
 
 type TProps = {
   view: TTagView
diff --git a/src/containers/tool/Drawer/Header/index.tsx b/src/containers/tool/Drawer/Header/index.tsx
index b7a3d0c3d..a16bab5b3 100644
--- a/src/containers/tool/Drawer/Header/index.tsx
+++ b/src/containers/tool/Drawer/Header/index.tsx
@@ -8,7 +8,7 @@ import CloseLine from './CloseLine'
 import { TopWrapper, BottomWrapper, TextWrapper } from '../styles/header'
 import { onSwipedYHandler, onSwipingYHandler } from '../logic'
 
-/* <TextWrapper>评论共 167 条</TextWrapper> */
+/* <TextWrapper>讨论共 167 条</TextWrapper> */
 
 type TProps = {
   headerText?: string
diff --git a/src/containers/tool/Drawer/dynamics.tsx b/src/containers/tool/Drawer/dynamics.tsx
index c776d8137..ba94cdb0d 100755
--- a/src/containers/tool/Drawer/dynamics.tsx
+++ b/src/containers/tool/Drawer/dynamics.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import dynamic from 'next/dynamic'
 
-import LavaLampLoading from '@/components/Loading/LavaLampLoading'
+import { LavaLampLoading } from '@/components/dynamic'
 import EditorLoading from '@/components/Loading/EditorLoading'
 
 const CommonLoading = () => <LavaLampLoading top={200} left={420} />
diff --git a/src/containers/unit/Comments/Comment/Actions.tsx b/src/containers/unit/Comments/Comment/Actions.tsx
index 1d1c814a9..fb3e54594 100755
--- a/src/containers/unit/Comments/Comment/Actions.tsx
+++ b/src/containers/unit/Comments/Comment/Actions.tsx
@@ -3,6 +3,7 @@ import { FC, memo, useCallback } from 'react'
 import type { TAccount, TComment } from '@/spec'
 import { ICON } from '@/config'
 
+import { useAccount } from '@/hooks'
 import IconButton from '@/components/Buttons/IconButton'
 import MenuButton from '@/components/Buttons/MenuButton'
 import { SpaceGrow } from '@/components/Common'
@@ -12,7 +13,6 @@ import { openUpdateEditor, openReplyEditor, onDelete } from '../logic'
 
 type TProps = {
   data: TComment
-  accountInfo: TAccount
 }
 
 const menuOptions = [
@@ -33,10 +33,13 @@ const menuOptions = [
   },
 ]
 
-const Actions: FC<TProps> = ({ data, accountInfo }) => {
+const Actions: FC<TProps> = ({ data }) => {
+  const { user } = useAccount()
+  const accountId = user.id
+
   let extraOptions = []
 
-  if (String(data.author.id) === accountInfo.id) {
+  if (String(data.author.id) === accountId) {
     extraOptions = [
       {
         key: 'edit',
diff --git a/src/containers/unit/Comments/Comment/DeleteMask.tsx b/src/containers/unit/Comments/Comment/DeleteMask.tsx
index 50aeda5ef..d1500464e 100755
--- a/src/containers/unit/Comments/Comment/DeleteMask.tsx
+++ b/src/containers/unit/Comments/Comment/DeleteMask.tsx
@@ -17,7 +17,7 @@ type TProps = {
 const DeleteMask: FC<TProps> = ({ show }) => {
   return (
     <DeleteOverlay show={show}>
-      <DeleteHintText>删除后该该评论将不可恢复</DeleteHintText>
+      <DeleteHintText>删除后该该讨论将不可恢复</DeleteHintText>
       <DeleteBtnGroup>
         <Button size="small" type="red" ghost onClick={cancelDelete}>
           取消
diff --git a/src/containers/unit/Comments/Comment/DesktopView/DefaultLayout.tsx b/src/containers/unit/Comments/Comment/DesktopView/DefaultLayout.tsx
index d0ff542b6..203ea4823 100644
--- a/src/containers/unit/Comments/Comment/DesktopView/DefaultLayout.tsx
+++ b/src/containers/unit/Comments/Comment/DesktopView/DefaultLayout.tsx
@@ -1,13 +1,13 @@
 import { FC, memo } from 'react'
 import { isEmpty } from 'ramda'
 
-import type { TAccount, TComment } from '@/spec'
+import type { TComment } from '@/spec'
 import { Global } from '@/utils/helper'
 import { ICON } from '@/config'
 
-import MarkDownRender from '@/components/MarkDownRender'
 import Tooltip from '@/components/Tooltip'
 import Upvote from '@/components/Upvote'
+import ArtimentBody from '@/components/ArtimentBody'
 
 import Header from '../Header'
 import ReplyBar from '../ReplyBar'
@@ -39,35 +39,28 @@ const getSelection = () => {
 
 type TProps = {
   data: TComment
-  accountInfo: TAccount
   tobeDeleteId: string
   isReply?: boolean
 }
 
-const DefaultLayout: FC<TProps> = ({
-  data,
-  tobeDeleteId,
-  accountInfo,
-  isReply = false,
-}) => {
-  const pined = data.id === '360' || data.id === '377'
-  const isAuthorUpvoted =
-    data.id === '377' || data.id === '355' || data.id === '359'
-  const isSolution = data.id === '358' || data.id === '355'
+const DefaultLayout: FC<TProps> = ({ data, tobeDeleteId, isReply = false }) => {
+  const { isPinned, meta } = data
+  const { isArticleAuthorUpvoted } = meta
+  const isSolution = false
 
   return (
-    <Wrapper pined={pined}>
-      {pined && (
+    <Wrapper isPinned={isPinned}>
+      {isPinned && (
         <PinState>
           <PinIcon />
-          <PinText>置顶评论</PinText>
+          <PinText>置顶讨论</PinText>
         </PinState>
       )}
       <DeleteMask show={data.id === tobeDeleteId} />
       <CommentWrapper tobeDelete={data.id === tobeDeleteId}>
         <SidebarWrapper>
-          <Upvote type="comment" />
-          {isAuthorUpvoted && (
+          <Upvote type="comment" count={data.upvotesCount} />
+          {isArticleAuthorUpvoted && (
             <Tooltip
               content={<BadgePopContent>作者顶过</BadgePopContent>}
               placement="bottom"
@@ -83,7 +76,7 @@ const DefaultLayout: FC<TProps> = ({
               noPadding
             >
               <SolutionIcon
-                isAuthorUpvoted={isAuthorUpvoted}
+                isAuthorUpvoted={isArticleAuthorUpvoted}
                 src={`${ICON}/shape/solution-check.svg`}
               />
             </Tooltip>
@@ -95,9 +88,12 @@ const DefaultLayout: FC<TProps> = ({
           <Header data={data} />
           <CommentContent>
             {data.replyTo && <ReplyBar data={data.replyTo} />}
-            <MarkDownRender body={data.body} />
+            <ArtimentBody
+              document={{ bodyHtml: data.bodyHtml }}
+              mode="comment"
+            />
           </CommentContent>
-          <Footer data={data} accountInfo={accountInfo} />
+          <Footer data={data} />
         </CommentBodyInfo>
       </CommentWrapper>
     </Wrapper>
diff --git a/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx b/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx
index 01701cea7..655949a41 100644
--- a/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx
+++ b/src/containers/unit/Comments/Comment/DesktopView/FoldLayout.tsx
@@ -13,6 +13,7 @@ import {
   Wrapper,
   Avatar,
   CommentBody,
+  RepliesHint,
   SolutionIcon,
   CreateDate,
 } from '../../styles/comment/desktop_view/fold_layout'
@@ -23,28 +24,33 @@ type TProps = {
 }
 
 const FoldLayout: FC<TProps> = ({ data }) => {
-  const isAuthorUpvoted =
-    data.id === '377' || data.id === '355' || data.id === '359'
-  const isSolution = data.id === '358' || data.id === '355'
+  const isSolution = false //
 
   return (
-    <Wrapper>
+    <Wrapper onClick={() => expandComment(data.id)}>
       <IconButton
         path="shape/expand-all.svg"
-        hint="展开评论"
+        hint="展开讨论"
         mLeft={-1}
         mRight={12}
-        onClick={() => expandComment(data.id)}
       />
       <Avatar
         src={data.author.avatar}
         fallback={<ImgFallback user={data.author} size={16} right={10} />}
       />
-      <CommentBody>{cutRest(data.body, 30)}</CommentBody>
+      <CommentBody
+        dangerouslySetInnerHTML={{
+          __html: data.bodyHtml,
+        }}
+      />
+      {data.repliesCount > 0 && (
+        <RepliesHint>[ {data.repliesCount} 条回复 ]</RepliesHint>
+      )}
+
       <SpaceGrow />
       {isSolution && (
         <SolutionIcon
-          isAuthorUpvoted={isAuthorUpvoted}
+          isAuthorUpvoted={data.meta.isArticleAuthorUpvoted}
           src={`${ICON}/shape/solution-check.svg`}
         />
       )}
diff --git a/src/containers/unit/Comments/Comment/DesktopView/index.tsx b/src/containers/unit/Comments/Comment/DesktopView/index.tsx
index a89a4eea0..4ed7458d0 100644
--- a/src/containers/unit/Comments/Comment/DesktopView/index.tsx
+++ b/src/containers/unit/Comments/Comment/DesktopView/index.tsx
@@ -1,5 +1,5 @@
 import { FC, memo, Fragment } from 'react'
-import { contains } from 'ramda'
+import { includes } from 'ramda'
 import { TID } from '@/spec'
 
 import type { TAccount, TComment } from '@/spec'
@@ -17,7 +17,7 @@ type TProps = {
 
 const Comment: FC<TProps> = (props) => {
   const { foldedIds, data } = props
-  const isFolded = contains(data.id, foldedIds)
+  const isFolded = includes(data.id, foldedIds)
 
   return (
     <Fragment>
diff --git a/src/containers/unit/Comments/Comment/Footer.tsx b/src/containers/unit/Comments/Comment/Footer.tsx
index 71b9f6b2f..61a1b7a24 100755
--- a/src/containers/unit/Comments/Comment/Footer.tsx
+++ b/src/containers/unit/Comments/Comment/Footer.tsx
@@ -12,14 +12,13 @@ import { Wrapper } from '../styles/comment/footer'
 
 type TProps = {
   data: TComment
-  accountInfo: TAccount
 }
 
-const Footer: FC<TProps> = ({ data, accountInfo }) => (
+const Footer: FC<TProps> = ({ data }) => (
   <Wrapper>
-    <EmotionSelector />
+    <EmotionSelector emotions={data.emotions} />
     <DotDivider radius={3} space={10} />
-    <Actions data={data} accountInfo={accountInfo} />
+    <Actions data={data} />
     <SpaceGrow />
   </Wrapper>
 )
diff --git a/src/containers/unit/Comments/Comment/Header.tsx b/src/containers/unit/Comments/Comment/Header.tsx
index b1d8b7dd7..a07967327 100755
--- a/src/containers/unit/Comments/Comment/Header.tsx
+++ b/src/containers/unit/Comments/Comment/Header.tsx
@@ -25,26 +25,36 @@ type TProps = {
 }
 
 const CommentHeader: FC<TProps> = ({ data }) => {
+  const { author } = data
+  const avatarSize = author.bio ? 26 : 24
+
   return (
     <Wrapper>
       <Avatar
         src={data.author.avatar}
-        fallback={<ImgFallback user={data.author} size={22} right={10} />}
+        avatarSize={avatarSize}
+        fallback={
+          <ImgFallback user={data.author} size={avatarSize} right={10} />
+        }
       />
       <HeaderBaseInfo>
         <BaseInfo>
           <UserBase>
-            <Nickname>{data.author.nickname}</Nickname>
-            <AuthorTag>作者</AuthorTag>
+            <Nickname>{author.nickname}</Nickname>
+            {data.isArticleAuthor && <AuthorTag>作者</AuthorTag>}
             <CreateDate>
               <DotDivider space={8} />
               <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
             </CreateDate>
           </UserBase>
-          <FloorNum>#{data.floor}</FloorNum>
+          <FloorNum>
+            #<Space right={2} />
+            {data.floor}
+          </FloorNum>
           <Space right={10} />
         </BaseInfo>
-        <ShortIntro>1 号员工 / CEO at coderplanets</ShortIntro>
+
+        {author.bio && <ShortIntro>{author.bio}</ShortIntro>}
       </HeaderBaseInfo>
     </Wrapper>
   )
diff --git a/src/containers/unit/Comments/Comment/MobileView/index.tsx b/src/containers/unit/Comments/Comment/MobileView/index.tsx
index fb7a8ba8d..f30bda728 100644
--- a/src/containers/unit/Comments/Comment/MobileView/index.tsx
+++ b/src/containers/unit/Comments/Comment/MobileView/index.tsx
@@ -37,7 +37,7 @@ const MobileView = ({ data, tobeDeleteId, accountInfo }) => {
             )}
             <MarkDownRender body={data.body} />
           </CommentContent>
-          <Footer data={data} accountInfo={accountInfo} />
+          <Footer data={data} />
         </CommentBodyInfo>
       </CommentWrapper>
       <Upvote />
diff --git a/src/containers/unit/Comments/Comment/ReplyBar.tsx b/src/containers/unit/Comments/Comment/ReplyBar.tsx
index 87cdc2976..3aa86e38a 100755
--- a/src/containers/unit/Comments/Comment/ReplyBar.tsx
+++ b/src/containers/unit/Comments/Comment/ReplyBar.tsx
@@ -4,9 +4,11 @@ import type { TComment } from '@/spec'
 import { ICON } from '@/config'
 import { cutRest } from '@/utils/helper'
 
+import { SpaceGrow } from '@/components/Common'
 import {
   Wrapper,
   ReplyIcon,
+  Avatar,
   ReplyToBody,
   ReplyToFloor,
 } from '../styles/comment/reply_bar'
@@ -19,7 +21,14 @@ const CommentReplyBar: FC<TProps> = ({ data }) => {
   return (
     <Wrapper>
       <ReplyIcon src={`${ICON}/article/reply.svg`} />
-      {cutRest(data.author.nickname, 6)}:<ReplyToBody>{data.body}</ReplyToBody>
+      <Avatar src={data.author.avatar} />
+      {cutRest(data.author.nickname, 20)}:
+      <ReplyToBody
+        dangerouslySetInnerHTML={{
+          __html: data.bodyHtml,
+        }}
+      />
+      <SpaceGrow />
       <ReplyToFloor>#{data.floor}</ReplyToFloor>
     </Wrapper>
   )
diff --git a/src/containers/unit/Comments/EditorHeader.tsx b/src/containers/unit/Comments/EditorHeader.tsx
index 71f2cb8f0..7b659558a 100755
--- a/src/containers/unit/Comments/EditorHeader.tsx
+++ b/src/containers/unit/Comments/EditorHeader.tsx
@@ -70,7 +70,7 @@ const EditorHeader: FC<TProps> = ({
   return (
     <Wrapper>
       <UserAvatar src={accountInfo.avatar || `${ICON}/edit/publish-pen.svg`} />
-      <LeaveResponseText onClick={openInputBox}>发表看法</LeaveResponseText>
+      <LeaveResponseText onClick={openInputBox}>参与讨论</LeaveResponseText>
     </Wrapper>
   )
 }
diff --git a/src/containers/unit/Comments/List/DateDivider.tsx b/src/containers/unit/Comments/List/DateDivider.tsx
index 9a05e2c8b..ceab00d4b 100644
--- a/src/containers/unit/Comments/List/DateDivider.tsx
+++ b/src/containers/unit/Comments/List/DateDivider.tsx
@@ -3,13 +3,17 @@ import { FC, memo } from 'react'
 import { Wrapper, SlashSign, DateText } from '../styles/list/date_divider'
 
 type TProps = {
-  text: string
+  text: string | null
 }
 
-const DateDivider: FC<TProps> = ({ text }) => (
-  <Wrapper>
-    <SlashSign>&#47;&#47;</SlashSign> <DateText>{text}</DateText>
-  </Wrapper>
-)
+const DateDivider: FC<TProps> = ({ text }) => {
+  if (!text) return null
+
+  return (
+    <Wrapper>
+      <SlashSign>&#47;&#47;</SlashSign> <DateText>{text}</DateText>
+    </Wrapper>
+  )
+}
 
 export default memo(DateDivider)
diff --git a/src/containers/unit/Comments/List/Header.tsx b/src/containers/unit/Comments/List/Header.tsx
index 970c17868..116a70cc3 100644
--- a/src/containers/unit/Comments/List/Header.tsx
+++ b/src/containers/unit/Comments/List/Header.tsx
@@ -5,6 +5,7 @@ import { SVG } from '@/constant'
 
 import IconButton from '@/components/Buttons/IconButton'
 import { IconSwitcher } from '@/components/Switcher'
+import { LavaLampLoading } from '@/components/dynamic'
 
 import {
   Wrapper,
@@ -14,9 +15,15 @@ import {
   ActionsWrapper,
 } from '../styles/list/header'
 
+import { MODE } from '../constant'
+import type { TMode } from '../spec'
+import { foldAllComments, expandAllComments, onModeChange } from '../logic'
+
 type TProps = {
   totalCount: number
-  filterType: string
+  mode: TMode
+  isAllFolded: boolean
+  loading: boolean
 }
 
 const actionIconConfig = {
@@ -26,33 +33,30 @@ const actionIconConfig = {
 
 const switchItems = [
   {
-    key: 'reply',
+    key: MODE.REPLIES,
     iconSrc: `${ICON}/article/comment-reply-mode.svg`,
     desc: '回复模式',
   },
   {
-    key: 'time',
+    key: MODE.TIMELINE,
     iconSrc: `${ICON}/article/comment-timeline-mode.svg`,
     desc: '时间线模式',
   },
 ]
 
-const Header: FC<TProps> = ({ totalCount, filterType }) => {
-  const isAllFolded = false
-
+const Header: FC<TProps> = ({ totalCount, mode, isAllFolded, loading }) => {
   return (
     <Wrapper>
       <TotalCountWrapper>
-        {totalCount > 0 && (
-          <TotalTitle id="lists-info">
-            共 <TotalNum>{totalCount}</TotalNum> 条评论:
-          </TotalTitle>
-        )}
+        <TotalTitle id="lists-info">
+          共 <TotalNum>{totalCount}</TotalNum> 条讨论:
+        </TotalTitle>
       </TotalCountWrapper>
       <ActionsWrapper>
+        {loading && <LavaLampLoading right={15} />}
         <IconButton
           icon={SVG.LOCK}
-          hint="关闭评论"
+          hint="关闭讨论"
           mTop={-1}
           {...actionIconConfig}
         />
@@ -69,6 +73,7 @@ const Header: FC<TProps> = ({ totalCount, filterType }) => {
             hint="展开全部"
             active
             {...actionIconConfig}
+            onClick={expandAllComments}
           />
         ) : (
           <IconButton
@@ -76,12 +81,13 @@ const Header: FC<TProps> = ({ totalCount, filterType }) => {
             size={13}
             hint="折叠全部"
             {...actionIconConfig}
+            onClick={foldAllComments}
           />
         )}
         <IconSwitcher
           items={switchItems}
-          activeKey="reply"
-          onChange={console.log}
+          activeKey={mode}
+          onChange={({ key }) => onModeChange(key as TMode)}
         />
       </ActionsWrapper>
     </Wrapper>
diff --git a/src/containers/unit/Comments/List/List.tsx b/src/containers/unit/Comments/List/List.tsx
index f97ff2b38..938ab9d5e 100644
--- a/src/containers/unit/Comments/List/List.tsx
+++ b/src/containers/unit/Comments/List/List.tsx
@@ -1,51 +1,58 @@
 import { FC, Fragment, memo } from 'react'
+import { includes } from 'ramda'
 
-import type { TAccount, TComment, TID } from '@/spec'
+import type { TComment, TID } from '@/spec'
 import Comment from '../Comment'
 
 import RepliesList from './RepliesList'
 import DateDivider from './DateDivider'
 
+import { MODE } from '../constant'
+import { passedDate } from '../helper'
+import type { TMode } from '../spec'
 import { Wrapper, IndentLine } from '../styles/list/list'
 import { foldComment } from '../logic'
 
+// const compareDate = () => {
+// }
+
 type TProps = {
+  mode: TMode
   entries: TComment[]
   tobeDeleteId: string
-  accountInfo: TAccount
   foldedIds: TID[]
 }
 
-const List: FC<TProps> = ({
-  entries,
-  tobeDeleteId,
-  accountInfo,
-  foldedIds,
-}) => {
+const List: FC<TProps> = ({ mode, entries, tobeDeleteId, foldedIds }) => {
   return (
     <Fragment>
-      {entries.map((c) => (
-        <Wrapper key={c.id}>
+      {entries.map((comment, index) => (
+        <Wrapper key={comment.id}>
           <Comment
-            data={c}
+            data={comment}
             tobeDeleteId={tobeDeleteId}
-            accountInfo={accountInfo}
-            hasReplies={c.id === '108'}
+            hasReplies={comment.repliesCount > 0}
             foldedIds={foldedIds}
           />
-          {/* <DateDivider text={c.id} /> */}
-          {c.id === '354' && <DateDivider text="一个月后" />}
-          {c.id === '108' && (
-            <RepliesList
-              entries={entries}
-              accountInfo={accountInfo}
-              tobeDeleteId={tobeDeleteId}
-              foldedIds={foldedIds}
+          {mode === MODE.TIMELINE && (
+            <DateDivider
+              text={passedDate(entries[index], entries[index + 1])}
             />
           )}
+          {mode === MODE.REPLIES &&
+            comment.replies?.length > 0 &&
+            !includes(comment.id, foldedIds) && (
+              <RepliesList
+                entries={comment.replies}
+                repliesCount={comment.repliesCount}
+                tobeDeleteId={tobeDeleteId}
+                foldedIds={foldedIds}
+              />
+            )}
           <IndentLine
-            hasReplies={c.id === '108'}
-            onClick={() => foldComment(c.id)}
+            hasReplies={comment.repliesCount > 0}
+            onClick={() => foldComment(comment.id)}
+            isFold={includes(comment.id, foldedIds)}
           />
         </Wrapper>
       ))}
diff --git a/src/containers/unit/Comments/List/RepliesList.tsx b/src/containers/unit/Comments/List/RepliesList.tsx
index 7b889fc09..51d243a17 100644
--- a/src/containers/unit/Comments/List/RepliesList.tsx
+++ b/src/containers/unit/Comments/List/RepliesList.tsx
@@ -1,6 +1,6 @@
 import { FC, memo } from 'react'
 
-import type { TAccount, TComment, TID } from '@/spec'
+import type { TComment, TID } from '@/spec'
 
 import TogglerButton from './TogglerButton'
 import Comment from '../Comment'
@@ -9,31 +9,34 @@ import { RepliesWrapper, RepliesCommentsWrapper } from '../styles/list/list'
 
 type TProps = {
   entries: TComment[]
+  repliesCount: number
   tobeDeleteId: string
-  accountInfo: TAccount
   foldedIds: TID[]
 }
 
 const RepliesList: FC<TProps> = ({
   entries,
+  repliesCount,
   tobeDeleteId,
-  accountInfo,
   foldedIds,
 }) => {
   return (
     <RepliesWrapper>
-      {entries.slice(7, 9).map((c) => (
-        <RepliesCommentsWrapper key={c.id}>
+      {entries.map((comment) => (
+        <RepliesCommentsWrapper key={comment.id}>
           <Comment
-            data={c}
+            data={comment}
             tobeDeleteId={tobeDeleteId}
-            accountInfo={accountInfo}
             foldedIds={foldedIds}
             isReply
           />
         </RepliesCommentsWrapper>
       ))}
-      <TogglerButton text="展开 236 条回复" />
+      {repliesCount > entries.length && (
+        <TogglerButton
+          text={`显示更多回复 ( ${repliesCount - entries.length - 1} )`}
+        />
+      )}
     </RepliesWrapper>
   )
 }
diff --git a/src/containers/unit/Comments/List/index.tsx b/src/containers/unit/Comments/List/index.tsx
index 40993d7d4..9a4777f53 100644
--- a/src/containers/unit/Comments/List/index.tsx
+++ b/src/containers/unit/Comments/List/index.tsx
@@ -1,63 +1,71 @@
 import { FC, Fragment, memo } from 'react'
 
-import type { TID, TPagedComments, TUser } from '@/spec'
+import type { TID, TPagedComments } from '@/spec'
 import Pagi from '@/components/Pagi'
 import { CommentLoading } from '@/components/Loading'
+import { Br } from '@/components/Common'
 
 import Header from './Header'
 import List from './List'
 
+import type { TMode } from '../spec'
 import { pageChange } from '../logic'
 
 import { ListsWrapper, CommentBlock } from '../styles/list'
 
 type TProps = {
-  accountInfo: TUser
+  totalCommentsCount: number
   pagedComments: TPagedComments
   foldedIds: TID[]
+  isAllFolded: boolean
+  mode: TMode
   restProps: {
     loading: boolean
     loadingFresh: boolean
     tobeDeleteId: string
-    filterType: string
   }
 }
 
 const CommentsList: FC<TProps> = ({
-  accountInfo,
+  totalCommentsCount,
   pagedComments: { entries, totalCount, pageSize, pageNumber },
   foldedIds,
-  restProps: { loading, loadingFresh, tobeDeleteId, filterType },
+  isAllFolded,
+  mode,
+  restProps: { loading, loadingFresh, tobeDeleteId },
 }) => (
   <Fragment>
-    <Header totalCount={totalCount} filterType={filterType} />
+    <Header
+      totalCount={totalCommentsCount}
+      isAllFolded={isAllFolded}
+      mode={mode}
+      loading={loading}
+    />
     {loadingFresh && (
       <CommentBlock>
         <CommentLoading />
       </CommentBlock>
     )}
     <ListsWrapper>
-      {loading ? (
-        <CommentBlock>
+      <List
+        mode={mode}
+        entries={entries}
+        foldedIds={foldedIds}
+        tobeDeleteId={tobeDeleteId}
+      />
+      {/* <CommentBlock>
           <CommentLoading />
-        </CommentBlock>
-      ) : (
-        <List
-          entries={entries}
-          foldedIds={foldedIds}
-          accountInfo={accountInfo}
-          tobeDeleteId={tobeDeleteId}
-        />
-      )}
+        </CommentBlock> */}
     </ListsWrapper>
+    <Br bottom={50} />
     <Pagi
       pageNumber={pageNumber}
       pageSize={pageSize}
       totalCount={totalCount}
       onChange={pageChange}
       showBottomMsg
-      noMoreMsg="没有更多的评论了"
-      emptyMsg="目前还没有评论"
+      noMoreMsg="没有更多的讨论了"
+      emptyMsg="目前还没有讨论"
     />
   </Fragment>
 )
diff --git a/src/containers/unit/Comments/ReplyToBar.tsx b/src/containers/unit/Comments/ReplyToBar.tsx
index 2e29b0d96..970911643 100755
--- a/src/containers/unit/Comments/ReplyToBar.tsx
+++ b/src/containers/unit/Comments/ReplyToBar.tsx
@@ -16,7 +16,7 @@ const ReplyToBar: FC<TProps> = ({ comment }) => {
     <ReplyBar>
       回复&nbsp;
       {cutRest(comment.author.nickname, 10)}:
-      <ReplyToBody>{comment.body}</ReplyToBody>
+      <ReplyToBody>{comment.bodyHtml}</ReplyToBody>
       <ReplyToFloor>#{comment.floor}</ReplyToFloor>
     </ReplyBar>
   )
diff --git a/src/containers/unit/Comments/constant.ts b/src/containers/unit/Comments/constant.ts
new file mode 100644
index 000000000..af7826c4e
--- /dev/null
+++ b/src/containers/unit/Comments/constant.ts
@@ -0,0 +1,8 @@
+import type { TMode } from './spec'
+
+export const MODE = {
+  TIMELINE: 'TIMELINE' as TMode,
+  REPLIES: 'REPLIES' as TMode,
+}
+
+export const holder = 1
diff --git a/src/containers/unit/Comments/helper.ts b/src/containers/unit/Comments/helper.ts
new file mode 100644
index 000000000..dc5734cef
--- /dev/null
+++ b/src/containers/unit/Comments/helper.ts
@@ -0,0 +1,76 @@
+import type { TComment } from '@/spec'
+
+// see: https://stackoverflow.com/a/66446126/4050784
+const DateDiff = {
+  inDays: (d1, d2): number => {
+    const t2 = d2.getTime()
+    const t1 = d1.getTime()
+
+    // @ts-ignore
+    return parseInt((t2 - t1) / (24 * 3600 * 1000), 10)
+  },
+
+  inWeeks: (d1, d2): number => {
+    const t2 = d2.getTime()
+    const t1 = d1.getTime()
+
+    // @ts-ignore
+    return parseInt((t2 - t1) / (24 * 3600 * 1000 * 7), 10)
+  },
+
+  inMonths: (d1, d2): number => {
+    const d1Y = d1.getFullYear()
+    const d2Y = d2.getFullYear()
+    const d1M = d1.getMonth()
+    const d2M = d2.getMonth()
+
+    return d2M + 12 * d2Y - (d1M + 12 * d1Y)
+  },
+
+  inYears: (d1, d2): number => {
+    return d2.getFullYear() - d1.getFullYear()
+  },
+}
+
+export const passedDate = (
+  curComment: TComment | undefined,
+  nextComment: TComment | undefined,
+): string | null => {
+  if (!curComment || !nextComment) return null
+
+  const { insertedAt: curInsertedAt } = curComment
+  const { insertedAt: nextInsertedAt } = nextComment
+
+  const diffInDays = DateDiff.inDays(
+    new Date(curInsertedAt),
+    new Date(nextInsertedAt),
+  )
+
+  if (diffInDays >= 5 && diffInDays < 14) {
+    return `${diffInDays} 天后`
+  }
+
+  if (diffInDays >= 14 && diffInDays < 30) {
+    const diffInWeeks = DateDiff.inWeeks(
+      new Date(curInsertedAt),
+      new Date(nextInsertedAt),
+    )
+    return `${diffInWeeks} 周后`
+  }
+
+  if (diffInDays >= 30 && diffInDays < 365) {
+    const diffInMonths = DateDiff.inMonths(
+      new Date(curInsertedAt),
+      new Date(nextInsertedAt),
+    )
+    return `${diffInMonths} 月后`
+  }
+
+  const diffInYears = DateDiff.inYears(
+    new Date(curInsertedAt),
+    new Date(nextInsertedAt),
+  )
+  return `${diffInYears} 年后`
+}
+
+export const holder = 1
diff --git a/src/containers/unit/Comments/index.tsx b/src/containers/unit/Comments/index.tsx
index ef01ff80e..2fdd476f3 100755
--- a/src/containers/unit/Comments/index.tsx
+++ b/src/containers/unit/Comments/index.tsx
@@ -15,8 +15,8 @@ import NoticeBar from '@/components/NoticeBar'
 
 import CommentEditor from './CommentEditor'
 import List from './List'
-import CommentReplyEditor from './CommentReplyEditor'
-import LockedMessage from './LockedMessage'
+// import CommentReplyEditor from './CommentReplyEditor'
+// import LockedMessage from './LockedMessage'
 
 import type { TStore } from './store'
 import { Wrapper } from './styles'
@@ -41,6 +41,8 @@ const CommentsContainer: FC<TProps> = ({
   useInit(store, ssr, locked)
 
   const {
+    mode,
+    viewingArticle,
     pagedCommentsData,
     referUsersData,
     accountInfo,
@@ -50,12 +52,13 @@ const CommentsContainer: FC<TProps> = ({
     mentionListData,
     isEdit,
     foldedIds,
+    isAllFolded,
   } = store
 
   return (
     <Wrapper id={ANCHOR.COMMENTS_ID}>
       <Modal show={showReplyBox} onClose={onReplyEditorClose}>
-        {showReplyBox && (
+        {/* {showReplyBox && (
           <CommentReplyEditor
             isEdit={isEdit}
             show={showReplyEditor}
@@ -65,33 +68,31 @@ const CommentsContainer: FC<TProps> = ({
             mentionList={mentionListData}
             showReplyPreview={showReplyPreview}
           />
-        )}
+        )} */}
       </Modal>
 
-      {locked ? (
-        <LockedMessage />
-      ) : (
-        <CommentEditor
-          onCreate={createComment(onCreate)}
-          accountInfo={accountInfo}
-          referUsers={referUsersData}
-          mentionList={mentionListData}
-          restProps={{ ...store }}
-        />
-      )}
+      <CommentEditor
+        onCreate={createComment(onCreate)}
+        accountInfo={accountInfo}
+        referUsers={referUsersData}
+        mentionList={mentionListData}
+        restProps={{ ...store }}
+      />
 
       <br />
       <NoticeBar
         type="lock"
-        content="关闭了评论: 已解决"
+        content="关闭了讨论: 已解决"
         timestamp={new Date().toLocaleDateString()}
-        user={{ nickname: 'mydearxym' }}
-        isArticleAuthor
+        user={{ nickname: 'Bot' }}
+        isArticleAuthor={false}
       />
 
       <List
-        accountInfo={accountInfo}
+        totalCommentsCount={viewingArticle.commentsCount}
+        mode={mode}
         foldedIds={foldedIds}
+        isAllFolded={isAllFolded}
         pagedComments={pagedCommentsData}
         restProps={{ ...store }}
       />
diff --git a/src/containers/unit/Comments/logic.ts b/src/containers/unit/Comments/logic.ts
index be4c7f103..dcb08768c 100755
--- a/src/containers/unit/Comments/logic.ts
+++ b/src/containers/unit/Comments/logic.ts
@@ -11,6 +11,7 @@ import { send, countWords, extractMentions, errRescue } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 import { scrollIntoEle } from '@/utils/dom'
 
+import type { TMode } from './spec'
 import type { TStore } from './store'
 import S from './schema'
 
@@ -30,18 +31,18 @@ const defaultArgs = {
   filter: { page: 1, size: PAGE_SIZE.D, sort: TYPE.ASC_INSERTED },
 }
 
-export const loadComents = (args): void => {
-  // log('loadComents passed in: ', args)
-  if (store.loading || store.loadingFresh) return
-  args = mergeDeepRight(defaultArgs, args)
-  args.id = store.viewingArticle.id
-  args.userHasLogin = store.isLogin
-  args.thread = store.activeThread
+// variables = %{id: post.id, thread: "POST", filter: %{page: 1, size: page_size}}
+export const loadComments = (): void => {
+  const { viewingArticle: article, mode } = store
 
-  markLoading(args.fresh)
-  store.mark({ filterType: args.filter.sort })
-
-  log('pagedComments args: ', args)
+  const args = {
+    id: article.id,
+    thread: article.meta.thread,
+    mode,
+    filter: { page: 1, size: 20 },
+  }
+  console.log('query args: ', args)
+  store.mark({ loading: true })
   sr71$.query(S.pagedComments, args)
 }
 
@@ -192,9 +193,9 @@ export const closeReplyBox = (): void => {
   })
 }
 
-export const onFilterChange = (filterType): void => {
-  store.mark({ filterType })
-  loadComents({ filter: { page: 1, sort: filterType } })
+export const onModeChange = (mode: TMode): void => {
+  store.mark({ mode })
+  loadComments()
 }
 
 /**
@@ -253,7 +254,6 @@ export const cancelDelete = (): void => store.mark({ tobeDeleteId: null })
 
 export const pageChange = (page = 1): void => {
   scrollIntoEle('lists-info')
-  loadComents({ filter: { page, sort: store.filterType } })
 }
 
 const cancelLoading = () =>
@@ -274,20 +274,20 @@ const saveDraftIfNeed = (content): void => {
 const clearDraft = (): void => BStore.remove('recentDraft')
 
 export const foldComment = (id: TID): void => {
-  const { foldedCommentIds } = store
-  store.mark({ foldedCommentIds: [id, ...foldedCommentIds] })
+  store.mark({ foldedCommentIds: [id, ...store.foldedCommentIds] })
 }
 
-export const foldAllComments = (): void => {
-  // TODO:
-  // store.mark({ foldedCommentIds: [] })
+export const expandComment = (id: TID): void => {
+  store.mark({ foldedCommentIds: reject(equals(id), store.foldedCommentIds) })
 }
 
-export const expandComment = (id: TID): void => {
-  const { foldedCommentIds } = store
-  store.mark({ foldedCommentIds: reject(equals(id), foldedCommentIds) })
+// 只在 timeline 模式可用
+export const foldAllComments = (): void => {
+  const { pagedCommentsData } = store
+  store.mark({ foldedCommentIds: pagedCommentsData.entries.map((c) => c.id) })
 }
 
+// 只在 timeline 模式可用
 export const expandAllComments = (): void => {
   store.mark({ foldedCommentIds: [] })
 }
@@ -300,7 +300,8 @@ const DataSolver = [
     match: asyncRes('pagedComments'),
     action: ({ pagedComments }) => {
       cancelLoading()
-      store.mark({ pagedComments })
+      console.log('## pagedComments: ', pagedComments)
+      store.mark({ pagedComments, loading: false })
     },
   },
   {
@@ -315,10 +316,10 @@ const DataSolver = [
       })
       stopDraftTimmer()
       clearDraft()
-      loadComents({
-        filter: { page: 1, sort: TYPE.DESC_INSERTED },
-        fresh: true,
-      })
+      // loadComents({
+      //   filter: { page: 1, sort: TYPE.DESC_INSERTED },
+      //   fresh: true,
+      // })
     },
   },
   {
@@ -332,7 +333,7 @@ const DataSolver = [
       scrollIntoEle('lists-info')
       stopDraftTimmer()
       clearDraft()
-      loadComents({ filter: { page: 1 }, fresh: true })
+      // loadComents({ filter: { page: 1 }, fresh: true })
     },
   },
   {
@@ -373,7 +374,7 @@ const DataSolver = [
       log('deleteComment', deleteComment)
       store.mark({ tobeDeleteId: null })
       scrollIntoEle('lists-info')
-      loadComents({ filter: { page: 1 }, fresh: true })
+      // loadComents({ filter: { page: 1 }, fresh: true })
     },
   },
   {
@@ -429,7 +430,8 @@ export const useInit = (
     store = _store
     if (!sub$) {
       sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
-      if (!ssr) loadComents({ filter: { sort: TYPE.DESC_INSERTED } })
+      loadComments()
+      // if (!ssr) loadComents({ filter: { sort: TYPE.DESC_INSERTED } })
     }
 
     return () => {
diff --git a/src/containers/unit/Comments/schema.ts b/src/containers/unit/Comments/schema.ts
index d16750fc1..da33a6ac8 100755
--- a/src/containers/unit/Comments/schema.ts
+++ b/src/containers/unit/Comments/schema.ts
@@ -1,33 +1,19 @@
 import { gql } from '@urql/core'
 import { F } from '@/schemas'
 
+// viewerHasLiked @include(if: $userHasLogin)
+// viewerHasDisliked @include(if: $userHasLogin)
+
 const pagedComments = gql`
   query pagedComments(
     $id: ID!
+    $thread: Thread,
+    $mode: CommentsMode,
     $filter: CommentsFilter!
-    $thread: CmsThread
-    $userHasLogin: Boolean!
   ) {
-    pagedComments(id: $id, filter: $filter, thread: $thread) {
+    pagedComments(id: $id, thread: $thread, mode: $mode, filter: $filter) {
       entries {
         ${F.comment}
-        viewerHasLiked @include(if: $userHasLogin)
-        viewerHasDisliked @include(if: $userHasLogin)
-        replyTo {
-          id
-          body
-          floor
-          author {
-            ${F.author}
-          }
-        }
-        replies(filter: { first: 5 }) {
-          id
-          author {
-            ${F.author}
-          }
-        }
-        repliesCount
       }
       ${F.pagedCounts}
     }
diff --git a/src/containers/unit/Comments/spec.ts b/src/containers/unit/Comments/spec.ts
new file mode 100644
index 000000000..54f2098d3
--- /dev/null
+++ b/src/containers/unit/Comments/spec.ts
@@ -0,0 +1 @@
+export type TMode = 'REPLIES' | 'TIMELINE'
diff --git a/src/containers/unit/Comments/store.ts b/src/containers/unit/Comments/store.ts
index db59d9a86..e13b4f1a8 100755
--- a/src/containers/unit/Comments/store.ts
+++ b/src/containers/unit/Comments/store.ts
@@ -26,15 +26,19 @@ import type {
   TThread,
   TRoute,
   TID,
+  TPagedComments,
 } from '@/spec'
 import { TYPE } from '@/constant'
 import { markStates, toJS } from '@/utils/mobx'
 import { changeset } from '@/utils/validator'
 import { Comment, PagedComments, emptyPagi, Mention } from '@/model'
 
+import { MODE } from './constant'
+
 const mentionMapper = (m) => ({ id: m.id, avatar: m.avatar, name: m.nickname })
 
 const CommentsStore = T.model('CommentsStore', {
+  mode: T.optional(T.enumeration([MODE.REPLIES, MODE.TIMELINE]), MODE.REPLIES),
   // toggle main comment box
   showInputBox: T.optional(T.boolean, false),
   // toggle editor inside the comment box
@@ -51,16 +55,6 @@ const CommentsStore = T.model('CommentsStore', {
   tobeDeleteId: T.maybeNull(T.string),
   // words count for current comment (include reply comment)
   countCurrent: T.optional(T.number, 0),
-  // cur filter type of comment list
-  filterType: T.optional(
-    T.enumeration('filterType', [
-      TYPE.DESC_INSERTED,
-      TYPE.ASC_INSERTED,
-      TYPE.MOST_LIKES,
-      TYPE.MOST_DISLIKES,
-    ]),
-    TYPE.ASC_INSERTED,
-  ),
   // content input of current comment editor
   editContent: T.optional(T.string, ''),
   // content input of current reply comment editor
@@ -135,7 +129,7 @@ const CommentsStore = T.model('CommentsStore', {
     get mentionListData() {
       return toJS(self.mentionList)
     },
-    get pagedCommentsData() {
+    get pagedCommentsData(): TPagedComments {
       return toJS(self.pagedComments)
     },
     get accountInfo(): TAccount {
@@ -165,6 +159,11 @@ const CommentsStore = T.model('CommentsStore', {
     get editCommentData() {
       return toJS(self.editComment)
     },
+    get isAllFolded(): boolean {
+      const slf = self as TStore
+      const { foldedIds, pagedCommentsData } = slf
+      return foldedIds.length === pagedCommentsData.totalCount
+    },
   }))
   .actions((self) => ({
     authWarning(options): void {
@@ -182,7 +181,7 @@ const CommentsStore = T.model('CommentsStore', {
         case 'create': {
           const result = changeset({ editContent: self.editContent })
             // @ts-ignore
-            .exist({ editContent: '评论内容' }, changesetErr)
+            .exist({ editContent: '讨论内容' }, changesetErr)
             .done()
 
           return result.passed
diff --git a/src/containers/unit/Comments/styles/comment/base.ts b/src/containers/unit/Comments/styles/comment/base.ts
index bc41749d0..7f929ebb3 100755
--- a/src/containers/unit/Comments/styles/comment/base.ts
+++ b/src/containers/unit/Comments/styles/comment/base.ts
@@ -20,7 +20,7 @@ export const ReplyToBodyBase = styled.span`
   flex-grow: 1;
   font-style: italic;
 
-  ${css.cutRest('350px')};
+  ${css.cutRest('400px')};
 
   ${css.media.mobile`
     ${css.cutRest('125px')};
diff --git a/src/containers/unit/Comments/styles/comment/desktop_view/fold_layout.ts b/src/containers/unit/Comments/styles/comment/desktop_view/fold_layout.ts
index 74f994358..6816e0431 100644
--- a/src/containers/unit/Comments/styles/comment/desktop_view/fold_layout.ts
+++ b/src/containers/unit/Comments/styles/comment/desktop_view/fold_layout.ts
@@ -16,6 +16,7 @@ export const Wrapper = styled.div`
   padding-top: 20px;
   position: relative;
   background: transparent;
+  cursor: pointer;
 `
 export const Avatar = styled(Img)`
   ${css.circle(16)};
@@ -24,8 +25,15 @@ export const Avatar = styled(Img)`
 `
 export const CommentBody = styled.div`
   color: ${theme('thread.articleDigest')};
+  ${css.cutRest('320px')};
   font-size: 14px;
 `
+export const RepliesHint = styled.div`
+  color: #139c9e;
+  font-size: 12px;
+  margin-left: 10px;
+  margin-top: 2px;
+`
 export const CreateDate = styled(HeaderCreateDate)`
   margin-right: 4px;
 `
diff --git a/src/containers/unit/Comments/styles/comment/desktop_view/index.ts b/src/containers/unit/Comments/styles/comment/desktop_view/index.ts
index 040bf702a..47dbba42d 100644
--- a/src/containers/unit/Comments/styles/comment/desktop_view/index.ts
+++ b/src/containers/unit/Comments/styles/comment/desktop_view/index.ts
@@ -7,7 +7,7 @@ import css from '@/utils/css'
 import PinSVG from '@/icons/Pin'
 
 type TWrapper = {
-  pined: boolean
+  isPinned: boolean
 }
 
 export const Wrapper = styled.div<TWrapper>`
@@ -15,7 +15,7 @@ export const Wrapper = styled.div<TWrapper>`
   ${css.flex()};
   margin-left: 2px;
   margin-right: 5px;
-  padding-top: ${({ pined }) => (pined ? '24px' : '20px')};
+  padding-top: ${({ isPinned }) => (isPinned ? '24px' : '20px')};
   position: relative;
   background: transparent;
 `
diff --git a/src/containers/unit/Comments/styles/comment/header.ts b/src/containers/unit/Comments/styles/comment/header.ts
index fe7a8109f..b06d23df9 100755
--- a/src/containers/unit/Comments/styles/comment/header.ts
+++ b/src/containers/unit/Comments/styles/comment/header.ts
@@ -10,8 +10,8 @@ export const Wrapper = styled.div`
   ${css.flex('align-center')};
   margin-bottom: 15px;
 `
-export const Avatar = styled(Img)`
-  ${css.circle(24)};
+export const Avatar = styled(Img)<{ avatarSize: number }>`
+  ${({ avatarSize }) => css.circle(avatarSize)};
   opacity: ${theme('avatar.opacity')};
   margin-right: 13px;
 `
@@ -42,6 +42,7 @@ export const AuthorTag = styled.div`
 `
 export const ShortIntro = styled.div`
   color: ${theme('comment.floor')};
+  ${css.cutRest('280px')};
   font-size: 13px;
   opacity: 0.8;
   margin-top: 1px;
diff --git a/src/containers/unit/Comments/styles/comment/reply_bar.ts b/src/containers/unit/Comments/styles/comment/reply_bar.ts
index d2c9871e5..b11cfb39d 100755
--- a/src/containers/unit/Comments/styles/comment/reply_bar.ts
+++ b/src/containers/unit/Comments/styles/comment/reply_bar.ts
@@ -14,6 +14,11 @@ export const Wrapper = styled(ReplyBarBase)`
     padding: 5px 3px;
   `};
 `
+export const Avatar = styled(Img)`
+  ${css.circle(14)};
+  margin-left: 5px;
+  margin-right: 5px;
+`
 export const ReplyIcon = styled(Img)`
   fill: ${theme('comment.username')};
   ${css.size(15)};
diff --git a/src/containers/unit/Comments/styles/list/date_divider.ts b/src/containers/unit/Comments/styles/list/date_divider.ts
index e6d32088c..56346958c 100644
--- a/src/containers/unit/Comments/styles/list/date_divider.ts
+++ b/src/containers/unit/Comments/styles/list/date_divider.ts
@@ -6,8 +6,8 @@ import css from '@/utils/css'
 export const Wrapper = styled.div`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
-  padding-top: 12px;
-  padding-bottom: 10px;
+  padding-top: 15px;
+  margin-left: 30px;
 `
 export const SlashSign = styled.div`
   font-size: 10px;
diff --git a/src/containers/unit/Comments/styles/list/header.ts b/src/containers/unit/Comments/styles/list/header.ts
index 683792e41..536340602 100644
--- a/src/containers/unit/Comments/styles/list/header.ts
+++ b/src/containers/unit/Comments/styles/list/header.ts
@@ -31,7 +31,6 @@ export const TotalTitle = styled.div`
 `
 export const TotalNum = styled.span`
   color: ${theme('comment.number')};
-  font-size: 17px;
   margin-left: 2px;
   margin-right: 2px;
 `
diff --git a/src/containers/unit/Comments/styles/list/list.ts b/src/containers/unit/Comments/styles/list/list.ts
index 81fb7cae1..763733f40 100644
--- a/src/containers/unit/Comments/styles/list/list.ts
+++ b/src/containers/unit/Comments/styles/list/list.ts
@@ -6,11 +6,17 @@ export const Wrapper = styled.div`
   position: relative;
   /* border: 1px solid tomato; */
 `
-export const IndentLine = styled.div<{ hasReplies: boolean }>`
+type TIndentLine = {
+  isFold: boolean
+  hasReplies: boolean
+}
+
+export const IndentLine = styled.div<TIndentLine>`
   position: absolute;
-  top: 78px;
+  top: ${({ isFold }) => (isFold ? '62px' : '78px')};
   left: 2px;
-  height: calc(100% - 78px);
+  height: ${({ isFold }) =>
+    isFold ? 'calc(100% - 62px)' : 'calc(100% - 78px)'};
   width: 25px;
   border-left: 1px dashed;
   border-left-color: ${theme('comment.indentLine')};
diff --git a/src/containers/unit/Footer/DesktopView/ArticleLayout.tsx b/src/containers/unit/Footer/DesktopView/ArticleLayout.tsx
index 5dcd260de..1355111ab 100755
--- a/src/containers/unit/Footer/DesktopView/ArticleLayout.tsx
+++ b/src/containers/unit/Footer/DesktopView/ArticleLayout.tsx
@@ -16,20 +16,16 @@ import {
 } from '../styles/desktop_view/article_layout'
 
 type TProps = {
-  viewingArticle: TArticle
+  article: TArticle
   metric: TMetric
   layout: TC11NLayout
 }
 
-const BriefView: FC<TProps> = ({ metric, viewingArticle, layout }) => {
+const BriefView: FC<TProps> = ({ metric, article, layout }) => {
   return (
     <Wrapper metric={metric} layout={layout}>
       <InnerWrapper>
-        <TopInfo
-          metric={METRIC.ARTICLE}
-          title={viewingArticle.title}
-          noBottomBorder
-        />
+        <TopInfo metric={METRIC.ARTICLE} article={article} noBottomBorder />
         <MainInfos>
           <BaseInfo>
             <Item href="/home/post/1" rel="noopener noreferrer" target="_blank">
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/Article.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/Article.tsx
index 7da0eeb05..e5b61ac75 100644
--- a/src/containers/unit/Footer/DesktopView/TopInfo/Article.tsx
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/Article.tsx
@@ -1,4 +1,5 @@
 import { FC, memo } from 'react'
+import Link from 'next/link'
 
 import { ICON } from '@/config'
 import type { TProps as TTopInfoProps } from './index'
@@ -12,16 +13,20 @@ import {
   Logo,
 } from '../../styles/desktop_view/top_info/article'
 
-type TProps = Pick<TTopInfoProps, 'title' | 'noBottomBorder'>
+type TProps = Pick<TTopInfoProps, 'article' | 'noBottomBorder'>
+
+const Article: FC<TProps> = ({ article, noBottomBorder = false }) => {
+  const { originalCommunity, title } = article
 
-const Article: FC<TProps> = ({ title = 'article', noBottomBorder = false }) => {
   return (
     <Wrapper noBottomBorder={noBottomBorder}>
       <InfoBar>
         <Logo />
       </InfoBar>
       <ArrowDividerIcon src={`${ICON}/shape/arrow-simple.svg`} />
-      <CommunityTitle>javascript</CommunityTitle>
+      <Link href={`/${originalCommunity.raw}`} passHref>
+        <CommunityTitle as="a">{originalCommunity.title}</CommunityTitle>
+      </Link>
       <ArrowDividerIcon src={`${ICON}/shape/arrow-simple.svg`} />
       <ArticleTitle>{title}</ArticleTitle>
     </Wrapper>
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx
index 2f5d4e242..bcd449510 100644
--- a/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/WorksArticle.tsx
@@ -12,9 +12,9 @@ import {
   Logo,
 } from '../../styles/desktop_view/top_info/article'
 
-type TProps = Pick<TTopInfoProps, 'title' | 'noBottomBorder'>
+type TProps = Pick<TTopInfoProps, 'noBottomBorder'>
 
-const Article: FC<TProps> = ({ title = 'article', noBottomBorder = false }) => {
+const Article: FC<TProps> = ({ noBottomBorder = false }) => {
   return (
     <Wrapper noBottomBorder={noBottomBorder}>
       <InfoBar>
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
index 31a6cdf92..413babfd9 100644
--- a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
@@ -1,16 +1,17 @@
 import { FC, memo } from 'react'
 
-import type { TMetric } from '@/spec'
+import type { TMetric, TArticle } from '@/spec'
 import { METRIC } from '@/constant'
 
 import HomeCommunity from './HomeCommunity'
-import Community from './Community'
+// import Community from './Community'
 import Article from './Article'
 import WorksArticle from './WorksArticle'
 import CoolGuide from './CoolGuide'
 
 export type TProps = {
   metric?: TMetric
+  article?: TArticle
   title?: string
   noBottomBorder?: boolean
 }
diff --git a/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx b/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx
index ce9a6508d..36dd3905b 100755
--- a/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx
+++ b/src/containers/unit/Footer/DesktopView/WorksArticleLayout.tsx
@@ -25,7 +25,7 @@ const WorksArticleLayout: FC<TProps> = ({ viewingArticle }) => {
       <InnerWrapper>
         <TopInfo
           metric={METRIC.WORKS_ARTICLE}
-          title={viewingArticle.title}
+          article={viewingArticle}
           noBottomBorder
         />
         <MainInfos>
diff --git a/src/containers/unit/Footer/DesktopView/index.tsx b/src/containers/unit/Footer/DesktopView/index.tsx
index 351c4cd82..017c20b2e 100644
--- a/src/containers/unit/Footer/DesktopView/index.tsx
+++ b/src/containers/unit/Footer/DesktopView/index.tsx
@@ -63,7 +63,7 @@ const FooterContainer: FC<TProps> = ({
         <ArticleLayout
           layout={c11n.bannerLayout}
           metric={metric}
-          viewingArticle={viewingArticle}
+          article={viewingArticle}
         />
       )}
     </Wrapper>
diff --git a/src/containers/unit/Footer/styles/desktop_view/top_info/article.ts b/src/containers/unit/Footer/styles/desktop_view/top_info/article.ts
index 71c9c1a6c..ac624a5fa 100644
--- a/src/containers/unit/Footer/styles/desktop_view/top_info/article.ts
+++ b/src/containers/unit/Footer/styles/desktop_view/top_info/article.ts
@@ -20,12 +20,19 @@ export const Logo = styled(DefaultLogo)`
 `
 export const ArticleTitle = styled(DefaultSiteTitle)`
   color: ${theme('footer.title')};
+  ${css.cutRest('300px')};
   font-size: 15px;
   font-weight: normal;
   margin-top: -2px;
 `
 export const CommunityTitle = styled(ArticleTitle)`
   margin-right: 6px;
+  text-decoration: none;
+  &:hover {
+    color: ${theme('footer.title')};
+    cursor: pointer;
+    text-decoration: underline;
+  }
 `
 export const ArrowDividerIcon = styled(Img)`
   fill: ${theme('footer.text')};
diff --git a/src/containers/unit/Footer/styles/index.ts b/src/containers/unit/Footer/styles/index.ts
index 8f0de6432..f6bba47fd 100755
--- a/src/containers/unit/Footer/styles/index.ts
+++ b/src/containers/unit/Footer/styles/index.ts
@@ -11,7 +11,9 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 }))<TWrapper>`
   ${css.flex('justify-center')};
   justify-content: ${({ metric }) =>
-    includes(metric, [METRIC.WORKS_ARTICLE]) ? 'start' : 'center'};
+    includes(metric, [METRIC.ARTICLE, METRIC.WORKS_ARTICLE])
+      ? 'start'
+      : 'center'};
   margin-top: ${({ layout }) => (layout === C11N.HOLY_GRAIL ? '50px' : '80px')};
   ${({ metric }) => css.fitPageWidth(metric)};
 `
diff --git a/src/containers/unit/ModeLine/BottomBar/menus.js b/src/containers/unit/ModeLine/BottomBar/menus.js
index 37c9bbb0d..fb7c472ad 100644
--- a/src/containers/unit/ModeLine/BottomBar/menus.js
+++ b/src/containers/unit/ModeLine/BottomBar/menus.js
@@ -31,7 +31,7 @@ const articlePageMenus = [
     icon: `${ICON}/article/heart.svg`,
   },
   {
-    title: '评论',
+    title: '讨论',
     raw: TYPE.MM_TYPE.SEARCH,
     icon: `${ICON}/article/comment-modeline.svg`,
   },
@@ -50,12 +50,8 @@ const articlePageMenus = [
 export const getArticlePageMenus = (article) => {
   if (!article) return articlePageMenus
 
-  const {
-    upvotesCount,
-    commentsCount,
-    viewerHasUpvoted,
-    viewerHasCollected,
-  } = article
+  const { upvotesCount, commentsCount, viewerHasUpvoted, viewerHasCollected } =
+    article
 
   const articlePageMenusData = [...articlePageMenus]
 
diff --git a/src/containers/unit/ModeLineMenu/FilterMenu/SortColumn/Options.js b/src/containers/unit/ModeLineMenu/FilterMenu/SortColumn/Options.js
index 8929b0bbc..7577125bd 100644
--- a/src/containers/unit/ModeLineMenu/FilterMenu/SortColumn/Options.js
+++ b/src/containers/unit/ModeLineMenu/FilterMenu/SortColumn/Options.js
@@ -25,7 +25,7 @@ const Options = () => {
         <UnSelectDot />
       </Title>
       <Title>
-        <span>最多评论</span>
+        <span>最多讨论</span>
         <UnSelectDot />
       </Title>
       <Title>
diff --git a/src/containers/user/UserProfile/Activities/BriefInfo.js b/src/containers/user/UserProfile/Activities/BriefInfo.js
index 699e6996b..583f60ac1 100644
--- a/src/containers/user/UserProfile/Activities/BriefInfo.js
+++ b/src/containers/user/UserProfile/Activities/BriefInfo.js
@@ -17,7 +17,7 @@ const BriefInfo = ({ first }) => {
         <Divider>/</Divider>
         <MonthNum>5月</MonthNum>
       </DateInfo>
-      <Desc>评论了帖子</Desc>
+      <Desc>讨论了帖子</Desc>
     </Wrapper>
   )
 }
diff --git a/src/containers/user/UserPublishedComments/CommentsToContent.js b/src/containers/user/UserPublishedComments/CommentsToContent.js
index 15b7a0c00..22c38821f 100755
--- a/src/containers/user/UserPublishedComments/CommentsToContent.js
+++ b/src/containers/user/UserPublishedComments/CommentsToContent.js
@@ -43,7 +43,7 @@ const CommentsToContent = ({ data, thread, curView }) => {
                     <AvatarInfo>
                       <Nickname>{comment.author.nickname}</Nickname>
                       <When>
-                        评论于:
+                        讨论于:
                         <TimeAgo datetime={comment.updatedAt} locale="zh_CN" />
                       </When>
                     </AvatarInfo>
@@ -70,7 +70,7 @@ const CommentsToContent = ({ data, thread, curView }) => {
     case TYPE.RESULT_EMPTY:
       return (
         <>
-          <EmptyLabel text={`未找到评论的${Trans(thread)}信息`} size="large" />
+          <EmptyLabel text={`未找到讨论的${Trans(thread)}信息`} size="large" />
         </>
       )
 
diff --git a/src/containers/user/UserPublishedComments/logic.js b/src/containers/user/UserPublishedComments/logic.js
index 82d4faa0e..6be8ad440 100755
--- a/src/containers/user/UserPublishedComments/logic.js
+++ b/src/containers/user/UserPublishedComments/logic.js
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { toUpper } from 'ramda'
 
-import { TYPE, EVENT, ERR, THREAD } from '@/constant'
+import { TYPE, EVENT, ERR } from '@/constant'
 import {
   asyncSuit,
   buildLog,
@@ -34,40 +34,12 @@ const getQueryArgs = (page) => {
 export const loadPostComments = (page = 1) =>
   sr71$.query(S.publishedPostComments, getQueryArgs(page))
 
-export const loadJobComments = (page = 1) =>
-  sr71$.query(S.publishedJobComments, getQueryArgs(page))
-
-export const loadRepoComments = (page = 1) =>
-  sr71$.query(S.publishedRepoComments, getQueryArgs(page))
-
 export const threadOnChange = (curThread) => {
-  // TODO: markRoute
-  store.mark({ curThread })
-  // reload()
-  switch (store.curThread) {
-    case THREAD.JOB:
-      return loadJobComments()
-
-    case THREAD.REPO:
-      return loadRepoComments()
-
-    default:
-      return loadPostComments()
-  }
+  /** todo */
 }
 
 export const onPageChange = (page = 1) => {
   scrollToHeader()
-  switch (store.curThread) {
-    case THREAD.JOB:
-      return loadJobComments(page)
-
-    case THREAD.REPO:
-      return loadRepoComments(page)
-
-    default:
-      return loadPostComments(page)
-  }
 }
 
 export const onPreview = (data) => {
@@ -84,25 +56,7 @@ export const onPreview = (data) => {
 // Data & Error handlers
 // ###############################
 
-const DataSolver = [
-  {
-    match: asyncRes('publishedPostComments'),
-    action: ({ publishedPostComments }) =>
-      store.markPagedData(publishedPostComments),
-  },
-  {
-    match: asyncRes('publishedJobComments'),
-    action: ({ publishedJobComments }) =>
-      store.markPagedData(publishedJobComments),
-  },
-  {
-    match: asyncRes('publishedRepoComments'),
-    action: ({ publishedRepoComments }) => {
-      log('get publishedRepoComments: ', publishedRepoComments)
-      store.markPagedData(publishedRepoComments)
-    },
-  },
-]
+const DataSolver = [{}]
 
 const ErrSolver = [
   {
diff --git a/src/containers/user/UserPublishedComments/schema.ts b/src/containers/user/UserPublishedComments/schema.ts
index 309561822..171aad7d6 100755
--- a/src/containers/user/UserPublishedComments/schema.ts
+++ b/src/containers/user/UserPublishedComments/schema.ts
@@ -6,39 +6,6 @@ const publishedPostComments = gql`
     publishedPostComments(userId: $userId, filter: $filter) {
       entries {
         ${F.comment}
-        post {
-          ${F.commentParent}
-        }
-      }
-      ${F.pagedCounts}
-    }
-  }
-`
-
-const publishedJobComments = gql`
-  query($userId: ID!, $filter: PagedFilter!) {
-    publishedJobComments(userId: $userId, filter: $filter) {
-      entries {
-        ${F.comment}
-        job {
-          ${F.commentParent}
-          company
-        }
-      }
-      ${F.pagedCounts}
-    }
-  }
-`
-
-const publishedRepoComments = gql`
-  query($userId: ID!, $filter: PagedFilter!) {
-    publishedRepoComments(userId: $userId, filter: $filter) {
-      entries {
-        ${F.comment}
-        repo {
-          ${F.commentParent}
-          ownerName
-        }
       }
       ${F.pagedCounts}
     }
@@ -47,8 +14,6 @@ const publishedRepoComments = gql`
 
 const schema = {
   publishedPostComments,
-  publishedJobComments,
-  publishedRepoComments,
 }
 
 export default schema
diff --git a/src/containers/user/UserPublishedComments/store.js b/src/containers/user/UserPublishedComments/store.js
index f56055b3d..9a2da2ddd 100755
--- a/src/containers/user/UserPublishedComments/store.js
+++ b/src/containers/user/UserPublishedComments/store.js
@@ -7,12 +7,6 @@ import { types as T, getParent } from 'mobx-state-tree'
 
 import { TYPE, THREAD } from '@/constant'
 import { markStates, toJS } from '@/utils/mobx'
-import {
-  PagedPostComments,
-  PagedJobComments,
-  PagedRepoComments,
-  emptyPagi,
-} from '@/model'
 
 const UserPublishedComments = T.model('UserPublishedComments', {
   curThread: T.optional(
@@ -29,10 +23,6 @@ const UserPublishedComments = T.model('UserPublishedComments', {
     ]),
     TYPE.LOADING,
   ),
-
-  pagedPostComments: T.optional(PagedPostComments, emptyPagi),
-  pagedJobComments: T.optional(PagedJobComments, emptyPagi),
-  pagedRepoComments: T.optional(PagedRepoComments, emptyPagi),
 })
   .views((self) => ({
     get root() {
@@ -42,34 +32,12 @@ const UserPublishedComments = T.model('UserPublishedComments', {
       return toJS(self.root.viewing.user)
     },
     get pagedCommentsData() {
-      switch (self.curThread) {
-        case THREAD.JOB: {
-          return toJS(self.pagedJobComments)
-        }
-        case THREAD.REPO: {
-          return toJS(self.pagedRepoComments)
-        }
-        default: {
-          return toJS(self.pagedPostComments)
-        }
-      }
+      return {}
     },
   }))
   .actions((self) => ({
     markPagedData(pagedData) {
-      const curView =
-        pagedData.entries.length === 0 ? TYPE.RESULT_EMPTY : TYPE.RESULT
-
-      switch (self.curThread) {
-        case THREAD.JOB:
-          return self.mark({ curView, pagedJobComments: pagedData })
-
-        case THREAD.REPO:
-          return self.mark({ curView, pagedRepoComments: pagedData })
-
-        default:
-          return self.mark({ curView, pagedPostComments: pagedData })
-      }
+      return {}
     },
     mark(sobj) {
       markStates(sobj, self)
diff --git a/src/containers/viewer/ArticleViewer/BlogViewer/FixedHeader.tsx b/src/containers/viewer/ArticleViewer/BlogViewer/FixedHeader.tsx
index 85c436f8b..4c10d41f2 100644
--- a/src/containers/viewer/ArticleViewer/BlogViewer/FixedHeader.tsx
+++ b/src/containers/viewer/ArticleViewer/BlogViewer/FixedHeader.tsx
@@ -10,10 +10,12 @@ type TProps = {
 }
 
 const FixedHeader: FC<TProps> = ({ article, visible }) => {
+  const { upvotesCount, meta } = article
+
   return (
     <Wrapper visible={visible}>
       <ArticleTitle>{article.title}</ArticleTitle>
-      <Upvote />
+      <Upvote count={upvotesCount} avatarList={meta.latestUpvotedUsers} />
     </Wrapper>
   )
 }
diff --git a/src/containers/viewer/ArticleViewer/BlogViewer/index.tsx b/src/containers/viewer/ArticleViewer/BlogViewer/index.tsx
index e85ab252b..9fe1feaef 100644
--- a/src/containers/viewer/ArticleViewer/BlogViewer/index.tsx
+++ b/src/containers/viewer/ArticleViewer/BlogViewer/index.tsx
@@ -9,7 +9,7 @@ import { buildLog } from '@/utils/logger'
 
 import ViewportTracker from '@/components/ViewportTracker'
 import { ArticleContentLoading } from '@/components/Loading'
-import ArticeBody from '@/components/ArticleBody'
+import ArticeBody from '@/components/ArtimentBody'
 import ArticleFooter from '@/containers/unit/ArticleFooter'
 
 import FixedHeader from './FixedHeader'
diff --git a/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx b/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx
index 0a62effe8..777f884fc 100644
--- a/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx
+++ b/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx
@@ -10,10 +10,12 @@ type TProps = {
 }
 
 const FixedHeader: FC<TProps> = ({ article, visible }) => {
+  const { upvotesCount, meta } = article
+
   return (
     <Wrapper visible={visible}>
       <ArticleTitle>{article.title}</ArticleTitle>
-      <Upvote />
+      <Upvote count={upvotesCount} avatarList={meta.latestUpvotedUsers} />
     </Wrapper>
   )
 }
diff --git a/src/containers/viewer/ArticleViewer/PostViewer/index.tsx b/src/containers/viewer/ArticleViewer/PostViewer/index.tsx
index eb92a3e20..d91bd384c 100644
--- a/src/containers/viewer/ArticleViewer/PostViewer/index.tsx
+++ b/src/containers/viewer/ArticleViewer/PostViewer/index.tsx
@@ -9,7 +9,7 @@ import { buildLog } from '@/utils/logger'
 
 import ViewportTracker from '@/components/ViewportTracker'
 import { ArticleContentLoading } from '@/components/Loading'
-import ArticeBody from '@/components/ArticleBody'
+import ArticeBody from '@/components/ArtimentBody'
 import ArticleFooter from '@/containers/unit/ArticleFooter'
 
 import FixedHeader from './FixedHeader'
diff --git a/src/containers/viewer/ArticleViewer/WorksViewer/FixedHeader.tsx b/src/containers/viewer/ArticleViewer/WorksViewer/FixedHeader.tsx
index 9790e42c5..56cf3a6da 100644
--- a/src/containers/viewer/ArticleViewer/WorksViewer/FixedHeader.tsx
+++ b/src/containers/viewer/ArticleViewer/WorksViewer/FixedHeader.tsx
@@ -16,6 +16,8 @@ type TProps = {
 }
 
 const FixedHeader: FC<TProps> = ({ article, visible }) => {
+  const { upvotesCount, meta } = article
+
   return (
     <Wrapper visible={visible}>
       <ArticleWrapper>
@@ -23,7 +25,7 @@ const FixedHeader: FC<TProps> = ({ article, visible }) => {
         <Title>CoderPlanets</Title>
         <Desc>可能是最性感的开发者社区，web first, pure</Desc>
       </ArticleWrapper>
-      <Upvote />
+      <Upvote count={upvotesCount} avatarList={meta.latestUpvotedUsers} />
     </Wrapper>
   )
 }
diff --git a/src/containers/viewer/ArticleViewer/WorksViewer/index.tsx b/src/containers/viewer/ArticleViewer/WorksViewer/index.tsx
index 25ecd8eb1..e4320d620 100644
--- a/src/containers/viewer/ArticleViewer/WorksViewer/index.tsx
+++ b/src/containers/viewer/ArticleViewer/WorksViewer/index.tsx
@@ -8,7 +8,7 @@ import type { TPost } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
 import ViewportTracker from '@/components/ViewportTracker'
-import ArticeBody from '@/components/ArticleBody'
+import ArticeBody from '@/components/ArtimentBody'
 import { ArticleContentLoading } from '@/components/Loading'
 
 import FixedHeader from './FixedHeader'
diff --git a/src/containers/viewer/ArticleViewer/index.tsx b/src/containers/viewer/ArticleViewer/index.tsx
index 0110f3eb6..4f381297f 100755
--- a/src/containers/viewer/ArticleViewer/index.tsx
+++ b/src/containers/viewer/ArticleViewer/index.tsx
@@ -11,7 +11,6 @@ import { pluggedIn } from '@/utils/mobx'
 
 import Comments from '@/containers/unit/Comments'
 
-// TODO: remove
 // TODO: remove
 // import ArticleViewerHeader from '@/containers/unit/ArticleViewerHeader'
 
@@ -39,9 +38,9 @@ const ArticleViewerContainer: FC<TProps> = ({
   return (
     <Wrapper testid={testid}>
       <Viewer article={viewingArticle} loading={loading} />
-      {/* <CommentsWrapper>
+      <CommentsWrapper>
         <Comments onCreate={console.log} />
-      </CommentsWrapper> */}
+      </CommentsWrapper>
     </Wrapper>
   )
 }
diff --git a/src/schemas/fragments/base.ts b/src/schemas/fragments/base.ts
index fa518d2ea..0eb949235 100755
--- a/src/schemas/fragments/base.ts
+++ b/src/schemas/fragments/base.ts
@@ -1,3 +1,8 @@
+import { values, flatten } from 'ramda'
+
+import { EMOTION } from '@/constant'
+import { titleCase } from '@/utils/helper'
+
 export const community = `
   id
   title
@@ -15,10 +20,10 @@ export const tag = `
   group
 `
 export const author = `
-  id
   login
   nickname
   avatar
+  bio
 `
 export const article = `
   id
@@ -32,7 +37,7 @@ export const article = `
   views
   commentsCount
   upvotesCount
-  commentsParticipantsCount
+ 
   author {
     ${author}
   }
@@ -61,6 +66,10 @@ export const articleDetail = `
     bodyHtml
   }
 
+  commentsParticipants {
+    ${author}
+  }
+
   collectsCount
   archivedAt
   isArchived
@@ -171,22 +180,53 @@ export const userContributes = `
   totalCount
 `
 
+const emotionQuery = flatten(
+  values(EMOTION).map((emotion) => {
+    return [
+      `${emotion}Count`,
+      `viewerHas${titleCase(emotion)}ed`,
+      `latest${titleCase(emotion)}Users { login nickname }`,
+    ]
+  }),
+).join(' ')
+
 // comment
-export const comment = `
+
+const commentFields = `
   id
-  body
-  floor
+  bodyHtml
   author {
-    id
-    nickname
-    avatar
-    login
+    ${author}
   }
-  likesCount
-  dislikesCount
+  meta {
+    isArticleAuthorUpvoted
+    isReplyToOthers
+  }
+
+  emotions {
+    ${emotionQuery}
+  }
+
+  isPinned
+  floor
+  upvotesCount
+  isArticleAuthor
+  viewerHasUpvoted
+  repliesCount
   insertedAt
   updatedAt
 `
+export const comment = `
+  ${commentFields}
+
+  replyTo {
+    ${commentFields}
+  }
+
+  replies {
+    ${commentFields}
+  }
+`
 export const commentParent = `
   id
   title
diff --git a/src/spec/account.ts b/src/spec/account.ts
index 415c213c7..34f6fdd5e 100644
--- a/src/spec/account.ts
+++ b/src/spec/account.ts
@@ -16,19 +16,29 @@ type TSocial = {
   huaban?: string
 }
 
-export type TUser = {
-  id?: string
+export type TSimpleUser = {
   login?: string
   nickname?: string
   name?: string
   bio?: string
   avatar?: string
+}
+
+export type TUser = TSimpleUser & {
+  id?: string
   // TODO: figure it out
   extraId?: string
   editableCommunities?: TPagedCommunities
   social?: TSocial
 }
 
+export type TPagedUsers = {
+  entries: TUser[]
+  totalCount?: number
+  pageNumber?: number
+  pageSize?: number
+}
+
 export type TC11N = {
   isLogin?: boolean
   theme?: string
diff --git a/src/spec/article.ts b/src/spec/article.ts
index a626a2fe4..b4df4b0be 100644
--- a/src/spec/article.ts
+++ b/src/spec/article.ts
@@ -1,6 +1,7 @@
 import type { TCommunity, TTag } from './index'
 import type { TUser, TAccount } from './account'
 import type { TID } from './utils'
+import type { TEmotion } from './emotion'
 
 export type TCopyright = 'cc' | 'approve' | 'forbid'
 
@@ -32,7 +33,8 @@ type TBaseArticle = {
   author?: TAccount
   upvotesCount?: number
   originalCommunity?: TCommunity
-  commentsParticipants?: TUser
+  commentsParticipants?: TUser[]
+  commentsParticipantsCount?: number
   insertedAt?: string
   updatedAt?: string
   viewerHasViewed?: boolean
@@ -43,6 +45,7 @@ type TBaseArticle = {
   linkAddr?: string
   isArchived?: boolean
   archivedAt?: string
+  activeAt?: string
 }
 
 export type TPost = TBaseArticle & {
@@ -100,16 +103,23 @@ export type TPagedMeetups = {
 
 export type TComment = {
   id: string
-  body: string
+  isPinned?: boolean
   floor?: number
+  bodyHtml?: string
   insertedAt?: string
   updatedAt?: string
   author?: TUser
   repliesCount?: number
   replies?: TComment[]
   replyTo?: TComment
-  likesCount?: number
-  viewerHasLiked?: boolean
+  upvotesCount?: number
+  viewerHasUpvoted?: boolean
+  isArticleAuthor?: boolean
+  emotions?: TEmotion
+  meta?: {
+    isArticleAuthorUpvoted?: boolean
+    isReplyToOthers?: boolean
+  }
 }
 
 export type TPagedComments = {
diff --git a/src/spec/emotion.ts b/src/spec/emotion.ts
new file mode 100644
index 000000000..474c1e0d2
--- /dev/null
+++ b/src/spec/emotion.ts
@@ -0,0 +1,27 @@
+import type { TSimpleUser } from './account'
+// see https://stackoverflow.com/a/67301712/4050784
+// TODO: move tu utils
+type TTitleCase<T extends string, D extends string = ' '> = string extends T
+  ? never
+  : T extends `${infer F}${D}${infer R}`
+  ? `${Capitalize<F>}${D}${TTitleCase<R, D>}`
+  : Capitalize<T>
+
+export type TEmotionType =
+  | 'downvote'
+  | 'beer'
+  | 'heart'
+  | 'confused'
+  | 'popcorn'
+  | 'pill'
+
+export type TEmotionCountKey = `${TEmotionType}Count`
+export type TEmotionViewerHasKey = `viewerHas${TTitleCase<TEmotionType>}ed`
+
+export type TEmotion = {
+  [key: string]: number | boolean | string | TSimpleUser[]
+  // [key in TEmotionCountKey]: number
+  // [key in TEmotionViewerHasKey]: boolean
+  // [key in TEmotionType]: number
+  // [key in TEmotionViewerHasKey]: boolean
+}
diff --git a/src/spec/index.ts b/src/spec/index.ts
index a3d0cc7cf..56e2d825e 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -16,7 +16,14 @@ export type {
 } from './size'
 export type { TButton, TFiltersMenuItems } from './comp'
 export type { TTheme, TThemeMap, TThemeName } from './theme'
-export type { TAccount, TUser, TMembership, TC11N } from './account'
+export type {
+  TAccount,
+  TUser,
+  TPagedUsers,
+  TSimpleUser,
+  TMembership,
+  TC11N,
+} from './account'
 export type { TC11NLayout } from './c11n'
 export type {
   TCommunity,
@@ -48,6 +55,7 @@ export type {
   TResState,
   TPaymentUsage,
   TPaymentMethod,
+  TFlexRule,
 } from './utils'
 
 export type { TGQLError } from './graphql'
@@ -86,6 +94,8 @@ export type {
 
 export type { TAccountStore, TViewingStore } from './store'
 
+export type { TEmotion } from './emotion'
+
 export type TRoute = {
   communityPath?: string
   threadPath?: string
diff --git a/src/spec/utils.ts b/src/spec/utils.ts
index f6fe5aba3..5ed7880ea 100644
--- a/src/spec/utils.ts
+++ b/src/spec/utils.ts
@@ -96,3 +96,17 @@ export type TResState = 'LOADING' | 'DONE' | 'EMPTY'
 
 export type TPaymentUsage = 'SENIOR' | 'GirlsCodeTooPlan' | 'DONATE' | 'SPONSOR'
 export type TPaymentMethod = 'ALIPAY' | 'WECHAT'
+
+export type TFlexRule =
+  | 'align-both'
+  | 'align-center'
+  | 'align-start'
+  | 'align-end'
+  | 'align-baseline'
+  | 'justify-center'
+  | 'justify-start'
+  | 'justify-end'
+  | 'justify-between'
+  | 'justify-around'
+  | 'justify-evenly'
+  | ''
diff --git a/src/stores/Model/Comment.ts b/src/stores/Model/Comment.ts
index 156f6dc02..02a63ecc5 100755
--- a/src/stores/Model/Comment.ts
+++ b/src/stores/Model/Comment.ts
@@ -1,104 +1,74 @@
 import { types as T } from 'mobx-state-tree'
+import { values, reduce, merge } from 'ramda'
 
-import { User } from './User'
-import { Community } from './Community'
+import { EMOTION } from '@/constant'
+import { titleCase } from '@/utils/helper'
 
-import { pagiFields } from './helper/common'
+import { User, SimpleUser } from './User'
 
-const CommentBrief = T.model('CommentBrief', {
-  id: T.maybeNull(T.string),
-  body: T.maybeNull(T.string),
-  floor: T.maybeNull(T.number),
-  author: T.optional(User, {}),
-})
+import { pagiFields, timestampFields } from './helper/common'
 
-const CommentBase = {
-  id: T.maybeNull(T.string),
-  body: T.maybeNull(T.string),
-  author: T.optional(User, {}),
-  floor: T.number,
-  replyTo: T.maybeNull(CommentBrief),
-  replies: T.optional(T.array(CommentBrief), []),
-  repliesCount: T.optional(T.number, 0),
-  likesCount: T.optional(T.number, 0),
-  dislikesCount: T.optional(T.number, 0),
-  viewerHasLiked: T.maybeNull(T.boolean),
-  viewerHasDisliked: T.maybeNull(T.boolean),
-  insertedAt: T.optional(T.string, ''),
-  updatedAt: T.optional(T.string, ''),
+const commentEmotionFields = () => {
+  return reduce(
+    merge,
+    {},
+    values(EMOTION).map((emotion) => {
+      return {
+        [`${emotion}Count`]: T.maybeNull(T.number),
+        [`latest${titleCase(emotion)}Users`]: T.optional(
+          T.array(SimpleUser),
+          [],
+        ),
+        [`viewerHas${titleCase(emotion)}ed`]: T.optional(T.boolean, false),
+      }
+    }),
+  )
 }
 
-export const Comment = T.model('Comment', {
-  ...CommentBase,
-})
+const CommentEmotion = T.model('CommentEmotion', commentEmotionFields())
 
-export const PagedComments = T.model('PagedComments', {
-  entries: T.optional(T.array(Comment), []),
-  ...pagiFields(),
+const CommentMeta = T.model('CommentMeta', {
+  isArticleAuthorUpvoted: T.optional(T.boolean, false),
+  isReplyToOthers: T.optional(T.boolean, false),
 })
 
-// paged post comemnts
-const PostBrief = T.model('PostBrief', {
-  id: T.maybeNull(T.string),
-  title: T.maybeNull(T.string),
-  body: T.maybeNull(T.string),
-  digest: T.maybeNull(T.string),
-  // author: T.optional(User, {}),
-  author: T.maybeNull(User),
-  commentsCount: T.maybeNull(T.number),
-  communities: T.optional(T.array(Community), []),
-  originalCommunity: T.optional(Community, {}),
-})
+const commentBaseFields = () => {
+  return {
+    id: T.maybeNull(T.string),
+    bodyHtml: T.maybeNull(T.string),
+    author: T.optional(SimpleUser, {}),
+    isPinned: T.optional(T.boolean, false),
+    floor: T.number,
+    upvotesCount: T.optional(T.number, 0),
+    isArticleAuthor: T.optional(T.boolean, false),
+    thread: T.optional(T.string, ''),
+    emotions: T.optional(CommentEmotion, {}),
+    meta: T.optional(CommentMeta, {}),
+    repliesCount: T.optional(T.number, 0),
 
-const PostComment = T.model('PostComment', {
-  ...CommentBase,
-  post: T.optional(PostBrief, {}),
-})
-export const PagedPostComments = T.model('PagedPostComment', {
-  entries: T.optional(T.array(PostComment), []),
-  ...pagiFields(),
-})
+    viewerHasUpvoted: T.maybeNull(T.boolean),
 
-// paged jobs comemnts
-const JobBrief = T.model('JobBrief', {
-  id: T.maybeNull(T.string),
-  title: T.maybeNull(T.string),
-  body: T.maybeNull(T.string),
-  company: T.maybeNull(T.string),
-  // author: T.optional(User, {}),
-  author: T.maybeNull(User),
-  commentsCount: T.maybeNull(T.number),
-  communities: T.optional(T.array(Community), []),
-  originalCommunity: T.optional(Community, {}),
-})
+    ...timestampFields(),
+  }
+}
 
-const JobComment = T.model('JobComment', {
-  ...CommentBase,
-  job: T.optional(JobBrief, {}),
+export const CommentReply = T.model('CommentReply', {
+  ...commentBaseFields(),
 })
 
-export const PagedJobComments = T.model('PagedJobComment', {
-  entries: T.optional(T.array(JobComment), []),
-  ...pagiFields(),
-})
+export const Comment = T.model('Comment', {
+  ...commentBaseFields(),
+  replies: T.maybeNull(T.array(CommentReply)),
+  replyTo: T.maybeNull(CommentReply),
+  // field(:article, :common_article)
 
-// paged repos comemnts
-const RepoBrief = T.model('RepoBrief', {
-  id: T.maybeNull(T.string),
-  title: T.maybeNull(T.string),
-  ownerName: T.maybeNull(T.string),
-  ownerUrl: T.maybeNull(T.string),
-  repoUrl: T.maybeNull(T.string),
-  commentsCount: T.maybeNull(T.number),
-  communities: T.optional(T.array(Community), []),
-  originalCommunity: T.optional(Community, {}),
+  isDeleted: T.optional(T.boolean, false),
+  isForQuestion: T.optional(T.boolean, false),
+  isArchived: T.optional(T.boolean, false),
+  archivedAt: T.optional(T.boolean, false),
 })
 
-const RepoComment = T.model('RepoComment', {
-  ...CommentBase,
-  repo: T.optional(RepoBrief, {}),
-})
-export const PagedRepoComments = T.model('PagedRepoComment', {
-  entries: T.optional(T.array(RepoComment), []),
+export const PagedComments = T.model('PagedComments', {
+  entries: T.optional(T.array(Comment), []),
   ...pagiFields(),
 })
diff --git a/src/stores/Model/helper/article.ts b/src/stores/Model/helper/article.ts
index dfd102ea0..3da6a2dc3 100644
--- a/src/stores/Model/helper/article.ts
+++ b/src/stores/Model/helper/article.ts
@@ -64,6 +64,7 @@ export const articleFields = () => {
 
     insertedAt: T.optional(T.string, ''),
     updatedAt: T.optional(T.string, ''),
+    activeAt: T.optional(T.string, ''),
   }
 }
 
diff --git a/src/stores/Model/index.ts b/src/stores/Model/index.ts
index 818b8a08b..40ce50a59 100755
--- a/src/stores/Model/index.ts
+++ b/src/stores/Model/index.ts
@@ -2,13 +2,7 @@ import { types as T } from 'mobx-state-tree'
 
 export { Community, PagedCommunities } from './Community'
 export { default as Article } from './Article'
-export {
-  Comment,
-  PagedComments,
-  PagedPostComments,
-  PagedJobComments,
-  PagedRepoComments,
-} from './Comment'
+export { Comment, PagedComments } from './Comment'
 export { Post, PagedPosts } from './Post'
 export { Blog, PagedBlogs } from './Blog'
 export { Radar, PagedRadars } from './Radar'
diff --git a/utils/constant/emotion.ts b/utils/constant/emotion.ts
new file mode 100644
index 000000000..0a22a3043
--- /dev/null
+++ b/utils/constant/emotion.ts
@@ -0,0 +1,12 @@
+// import type { TMetric } from '@/spec'
+
+const EMOTION = {
+  DOWNVOTE: 'downvote',
+  BEER: 'beer',
+  HEART: 'heart',
+  CONFUSED: 'confused',
+  POPCORN: 'popcorn',
+  PILL: 'pill',
+}
+
+export default EMOTION
diff --git a/utils/constant/index.ts b/utils/constant/index.ts
index c812a5303..d62cb8cf6 100755
--- a/utils/constant/index.ts
+++ b/utils/constant/index.ts
@@ -21,6 +21,7 @@ export { default as ANCHOR } from './anchor'
 export { default as METRIC } from './metric'
 export { default as SIZE } from './size'
 export { default as URL_QUERY } from './url_query'
+export { default as EMOTION } from './emotion'
 
 export { PAYMENT_USAGE, PAYMENT_METHOD } from './payment'
 export { REPORT, REPORT_TYPE } from './report'
diff --git a/utils/css/flex.ts b/utils/css/flex.ts
index 6ebe330d7..3bc35cf67 100644
--- a/utils/css/flex.ts
+++ b/utils/css/flex.ts
@@ -1,18 +1,6 @@
-type FlexRule =
-  | 'align-both'
-  | 'align-center'
-  | 'align-start'
-  | 'align-end'
-  | 'align-baseline'
-  | 'justify-center'
-  | 'justify-start'
-  | 'justify-end'
-  | 'justify-between'
-  | 'justify-around'
-  | 'justify-evenly'
-  | ''
+import type { TFlexRule } from '@/spec'
 
-const flexExpand = (rule: FlexRule): string => {
+const flexExpand = (rule: TFlexRule): string => {
   switch (rule) {
     case 'align-both':
       return 'align-items: center;justify-content: center;'
@@ -56,31 +44,31 @@ const flexExpand = (rule: FlexRule): string => {
  * flex opts sort order:
  * [flex-direction][align-items][flex-grow]
  */
-const flexOpts = (rule1: FlexRule, rule2: FlexRule): string => {
+const flexOpts = (rule1: TFlexRule, rule2: TFlexRule): string => {
   return `${flexExpand(rule1)}${flexExpand(rule2)}`
 }
 
-export const flex = (rule1: FlexRule = '', rule2: FlexRule = ''): string => `
+export const flex = (rule1: TFlexRule = '', rule2: TFlexRule = ''): string => `
   display: flex;
   ${flexOpts(rule1, rule2)};
 `
 export const flexGrow = (
-  rule1: FlexRule = '',
-  rule2: FlexRule = '',
+  rule1: TFlexRule = '',
+  rule2: TFlexRule = '',
 ): string => `
   ${flex(rule1, rule2)};
   flex-grow: 1;
 `
 export const flexColumn = (
-  rule1: FlexRule = '',
-  rule2: FlexRule = '',
+  rule1: TFlexRule = '',
+  rule2: TFlexRule = '',
 ): string => `
   ${flex(rule1, rule2)};
   flex-direction: column;
 `
 export const flexColumnGrow = (
-  rule1: FlexRule = '',
-  rule2: FlexRule = '',
+  rule1: TFlexRule = '',
+  rule2: TFlexRule = '',
 ): string => `
   ${flexColumn(rule1, rule2)};
   flex-grow: 1;
diff --git a/yarn.lock b/yarn.lock
index 932d61a95..b8f4003c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1031,18 +1031,18 @@
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
-  resolved "https://registry.nlark.com/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.5.tgz?cache=0&sync_timestamp=1622792738877&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.scandir%2Fdownload%2F%40nodelib%2Ffs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  resolved "https://registry.nlark.com/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
   dependencies:
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
 "@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
-  resolved "https://registry.nlark.com/@nodelib/fs.stat/download/@nodelib/fs.stat-2.0.5.tgz?cache=0&sync_timestamp=1622792616417&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.stat%2Fdownload%2F%40nodelib%2Ffs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  resolved "https://registry.nlark.com/@nodelib/fs.stat/download/@nodelib/fs.stat-2.0.5.tgz?cache=0&sync_timestamp=1622792655362&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.stat%2Fdownload%2F%40nodelib%2Ffs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
 
 "@nodelib/fs.walk@^1.2.3":
   version "1.2.8"
-  resolved "https://registry.nlark.com/@nodelib/fs.walk/download/@nodelib/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  resolved "https://registry.nlark.com/@nodelib/fs.walk/download/@nodelib/fs.walk-1.2.8.tgz?cache=0&sync_timestamp=1625769815389&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.walk%2Fdownload%2F%40nodelib%2Ffs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   dependencies:
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
@@ -1291,8 +1291,8 @@
   resolved "https://registry.nlark.com/@types/js-cookie/download/@types/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f"
 
 "@types/json-schema@^7.0.7":
-  version "7.0.8"
-  resolved "https://registry.nlark.com/@types/json-schema/download/@types/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
+  version "7.0.9"
+  resolved "https://registry.nlark.com/@types/json-schema/download/@types/json-schema-7.0.9.tgz?cache=0&sync_timestamp=1629708116786&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
 
 "@types/jss@^9.5.6":
   version "9.5.8"
@@ -1412,29 +1412,38 @@
     "@types/node" "*"
 
 "@typescript-eslint/eslint-plugin@^4.17.0":
-  version "4.28.4"
-  resolved "https://registry.nlark.com/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.28.4.tgz#e73c8cabbf3f08dee0e1bda65ed4e622ae8f8921"
+  version "4.31.0"
+  resolved "https://registry.nlark.com/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.31.0.tgz#9c3fa6f44bad789a962426ad951b54695bd3af6b"
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.28.4"
-    "@typescript-eslint/scope-manager" "4.28.4"
+    "@typescript-eslint/experimental-utils" "4.31.0"
+    "@typescript-eslint/scope-manager" "4.31.0"
     debug "^4.3.1"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.1.0"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.28.4":
-  version "4.28.4"
-  resolved "https://registry.nlark.com/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.28.4.tgz#9c70c35ebed087a5c70fb0ecd90979547b7fec96"
+"@typescript-eslint/experimental-utils@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.nlark.com/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.31.0.tgz#0ef1d5d86c334f983a00f310e43c1ce4c14e054d"
   dependencies:
     "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.28.4"
-    "@typescript-eslint/types" "4.28.4"
-    "@typescript-eslint/typescript-estree" "4.28.4"
+    "@typescript-eslint/scope-manager" "4.31.0"
+    "@typescript-eslint/types" "4.31.0"
+    "@typescript-eslint/typescript-estree" "4.31.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/parser@^4.17.0", "@typescript-eslint/parser@^4.20.0":
+"@typescript-eslint/parser@^4.17.0":
+  version "4.31.0"
+  resolved "https://registry.nlark.com/@typescript-eslint/parser/download/@typescript-eslint/parser-4.31.0.tgz#87b7cd16b24b9170c77595d8b1363f8047121e05"
+  dependencies:
+    "@typescript-eslint/scope-manager" "4.31.0"
+    "@typescript-eslint/types" "4.31.0"
+    "@typescript-eslint/typescript-estree" "4.31.0"
+    debug "^4.3.1"
+
+"@typescript-eslint/parser@^4.20.0":
   version "4.28.4"
   resolved "https://registry.nlark.com/@typescript-eslint/parser/download/@typescript-eslint/parser-4.28.4.tgz?cache=0&sync_timestamp=1626715253308&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40typescript-eslint%2Fparser%2Fdownload%2F%40typescript-eslint%2Fparser-4.28.4.tgz#bc462dc2779afeefdcf49082516afdc3e7b96fab"
   dependencies:
@@ -1450,10 +1459,21 @@
     "@typescript-eslint/types" "4.28.4"
     "@typescript-eslint/visitor-keys" "4.28.4"
 
+"@typescript-eslint/scope-manager@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.nlark.com/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.31.0.tgz#9be33aed4e9901db753803ba233b70d79a87fc3e"
+  dependencies:
+    "@typescript-eslint/types" "4.31.0"
+    "@typescript-eslint/visitor-keys" "4.31.0"
+
 "@typescript-eslint/types@4.28.4":
   version "4.28.4"
   resolved "https://registry.nlark.com/@typescript-eslint/types/download/@typescript-eslint/types-4.28.4.tgz#41acbd79b5816b7c0dd7530a43d97d020d3aeb42"
 
+"@typescript-eslint/types@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.nlark.com/@typescript-eslint/types/download/@typescript-eslint/types-4.31.0.tgz#9a7c86fcc1620189567dc4e46cad7efa07ee8dce"
+
 "@typescript-eslint/typescript-estree@4.28.4":
   version "4.28.4"
   resolved "https://registry.nlark.com/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.28.4.tgz#252e6863278dc0727244be9e371eb35241c46d00"
@@ -1466,13 +1486,32 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.nlark.com/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.31.0.tgz#4da4cb6274a7ef3b21d53f9e7147cc76f278a078"
+  dependencies:
+    "@typescript-eslint/types" "4.31.0"
+    "@typescript-eslint/visitor-keys" "4.31.0"
+    debug "^4.3.1"
+    globby "^11.0.3"
+    is-glob "^4.0.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/visitor-keys@4.28.4":
   version "4.28.4"
-  resolved "https://registry.nlark.com/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.28.4.tgz?cache=0&sync_timestamp=1626715268700&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40typescript-eslint%2Fvisitor-keys%2Fdownload%2F%40typescript-eslint%2Fvisitor-keys-4.28.4.tgz#92dacfefccd6751cbb0a964f06683bfd72d0c4d3"
+  resolved "https://registry.nlark.com/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.28.4.tgz#92dacfefccd6751cbb0a964f06683bfd72d0c4d3"
   dependencies:
     "@typescript-eslint/types" "4.28.4"
     eslint-visitor-keys "^2.0.0"
 
+"@typescript-eslint/visitor-keys@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.nlark.com/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.31.0.tgz#4e87b7761cb4e0e627dc2047021aa693fc76ea2b"
+  dependencies:
+    "@typescript-eslint/types" "4.31.0"
+    eslint-visitor-keys "^2.0.0"
+
 "@urql/core@^2.1.4":
   version "2.1.5"
   resolved "https://registry.nlark.com/@urql/core/download/@urql/core-2.1.5.tgz#8fbc0846d6020cee89dadbee07ffb0a618ab29d8"
@@ -1887,7 +1926,7 @@ array-union@^1.0.1, array-union@^1.0.2:
 
 array-union@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npm.taobao.org/array-union/download/array-union-2.1.0.tgz?cache=0&sync_timestamp=1614624262896&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Farray-union%2Fdownload%2Farray-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  resolved "https://registry.npm.taobao.org/array-union/download/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
 
 array-uniq@^1.0.1:
   version "1.0.3"
@@ -4600,7 +4639,7 @@ eslint-scope@^4.0.3:
 
 eslint-scope@^5.1.1:
   version "5.1.1"
-  resolved "https://registry.nlark.com/eslint-scope/download/eslint-scope-5.1.1.tgz?cache=0&sync_timestamp=1627061754690&other_urls=https%3A%2F%2Fregistry.nlark.com%2Feslint-scope%2Fdownload%2Feslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  resolved "https://registry.nlark.com/eslint-scope/download/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
@@ -4613,7 +4652,7 @@ eslint-utils@^2.1.0:
 
 eslint-utils@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.nlark.com/eslint-utils/download/eslint-utils-3.0.0.tgz?cache=0&sync_timestamp=1620975524854&other_urls=https%3A%2F%2Fregistry.nlark.com%2Feslint-utils%2Fdownload%2Feslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
+  resolved "https://registry.nlark.com/eslint-utils/download/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
   dependencies:
     eslint-visitor-keys "^2.0.0"
 
@@ -4623,7 +4662,7 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3
 
 eslint-visitor-keys@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.nlark.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz?cache=0&sync_timestamp=1624559054225&other_urls=https%3A%2F%2Fregistry.nlark.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  resolved "https://registry.nlark.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
 
 eslint@^7.32.0:
   version "7.32.0"
@@ -4696,11 +4735,11 @@ esrecurse@^4.1.0, esrecurse@^4.3.0:
 
 estraverse@^4.1.1:
   version "4.3.0"
-  resolved "https://registry.nlark.com/estraverse/download/estraverse-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Festraverse%2Fdownload%2Festraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  resolved "https://registry.nlark.com/estraverse/download/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
 
 estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.2.0"
-  resolved "https://registry.nlark.com/estraverse/download/estraverse-5.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Festraverse%2Fdownload%2Festraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  resolved "https://registry.nlark.com/estraverse/download/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
 
 esutils@^2.0.2:
   version "2.0.3"
@@ -4994,8 +5033,8 @@ fastest-stable-stringify@^2.0.2:
   resolved "https://registry.npm.taobao.org/fastest-stable-stringify/download/fastest-stable-stringify-2.0.2.tgz#3757a6774f6ec8de40c4e86ec28ea02417214c76"
 
 fastq@^1.6.0:
-  version "1.11.1"
-  resolved "https://registry.nlark.com/fastq/download/fastq-1.11.1.tgz?cache=0&sync_timestamp=1625392906410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffastq%2Fdownload%2Ffastq-1.11.1.tgz#5d8175aae17db61947f8b162cfc7f63264d22807"
+  version "1.12.0"
+  resolved "https://registry.nlark.com/fastq/download/fastq-1.12.0.tgz#ed7b6ab5d62393fb2cc591c853652a5c318bf794"
   dependencies:
     reusify "^1.0.4"
 
@@ -5078,7 +5117,7 @@ fill-range@^4.0.0:
 
 fill-range@^7.0.1:
   version "7.0.1"
-  resolved "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  resolved "https://registry.nlark.com/fill-range/download/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
   dependencies:
     to-regex-range "^5.0.1"
 
@@ -5391,7 +5430,7 @@ function.prototype.name@^1.1.2, function.prototype.name@^1.1.3:
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npm.taobao.org/functional-red-black-tree/download/functional-red-black-tree-1.0.1.tgz?cache=0&sync_timestamp=1577806294691&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffunctional-red-black-tree%2Fdownload%2Ffunctional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  resolved "https://registry.nlark.com/functional-red-black-tree/download/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
 functions-have-names@^1.2.2:
   version "1.2.2"
@@ -6361,7 +6400,7 @@ is-extglob@^1.0.0:
 
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.npm.taobao.org/is-extglob/download/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  resolved "https://registry.nlark.com/is-extglob/download/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
 
 is-finite@^1.0.0:
   version "1.1.0"
@@ -6457,7 +6496,7 @@ is-number@^4.0.0:
 
 is-number@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  resolved "https://registry.nlark.com/is-number/download/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
 
 is-obj@^1.0.0, is-obj@^1.0.1:
   version "1.0.1"
@@ -7564,7 +7603,7 @@ lru-cache@^5.1.1:
 
 lru-cache@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  resolved "https://registry.nlark.com/lru-cache/download/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
   dependencies:
     yallist "^4.0.0"
 
@@ -8008,7 +8047,7 @@ ms@2.1.1:
 
 ms@2.1.2:
   version "2.1.2"
-  resolved "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1607433899126&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  resolved "https://registry.nlark.com/ms/download/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
 
 ms@^2.1.1:
   version "2.1.3"
@@ -8851,7 +8890,7 @@ path-type@^3.0.0:
 
 path-type@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.nlark.com/path-type/download/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  resolved "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
 
 pause-stream@0.0.11:
   version "0.0.11"
@@ -9010,9 +9049,9 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npm.taobao.org/preserve/download/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@2.2.1:
-  version "2.2.1"
-  resolved "https://registry.nlark.com/prettier/download/prettier-2.2.1.tgz?cache=0&sync_timestamp=1624696193562&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fprettier%2Fdownload%2Fprettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+prettier@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.nlark.com/prettier/download/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
 
 prettier@^1.18.2:
   version "1.19.1"
@@ -9211,7 +9250,7 @@ querystring@^0.2.0:
 
 queue-microtask@^1.2.2:
   version "1.2.3"
-  resolved "https://registry.npm.taobao.org/queue-microtask/download/queue-microtask-1.2.3.tgz?cache=0&sync_timestamp=1616391471040&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqueue-microtask%2Fdownload%2Fqueue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  resolved "https://registry.nlark.com/queue-microtask/download/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
 
 queue@6.0.2:
   version "6.0.2"
@@ -9707,7 +9746,7 @@ regexp.prototype.flags@^1.3.1:
 
 regexpp@^3.1.0:
   version "3.2.0"
-  resolved "https://registry.nlark.com/regexpp/download/regexpp-3.2.0.tgz?cache=0&sync_timestamp=1623668872577&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregexpp%2Fdownload%2Fregexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  resolved "https://registry.nlark.com/regexpp/download/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
 
 remarkable-emoji@^0.1.3:
   version "0.1.3"
@@ -9876,7 +9915,7 @@ ret@~0.1.10:
 
 reusify@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npm.taobao.org/reusify/download/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  resolved "https://registry.nlark.com/reusify/download/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
 
 right-pad@^1.0.1:
   version "1.0.1"
@@ -9928,7 +9967,7 @@ run-node@^1.0.0:
 
 run-parallel@^1.1.9:
   version "1.2.0"
-  resolved "https://registry.nlark.com/run-parallel/download/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  resolved "https://registry.npm.taobao.org/run-parallel/download/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
   dependencies:
     queue-microtask "^1.2.2"
 
@@ -11097,7 +11136,7 @@ tslib@^2.0.0, tslib@^2.1.0, tslib@^2.2.0:
 
 tsutils@^3.21.0:
   version "3.21.0"
-  resolved "https://registry.npm.taobao.org/tsutils/download/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  resolved "https://registry.nlark.com/tsutils/download/tsutils-3.21.0.tgz?cache=0&sync_timestamp=1621262373716&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftsutils%2Fdownload%2Ftsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
   dependencies:
     tslib "^1.8.1"
 
@@ -11850,7 +11889,7 @@ yallist@^3.0.2:
 
 yallist@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.nlark.com/yallist/download/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  resolved "https://registry.nlark.com/yallist/download/yallist-4.0.0.tgz?cache=0&sync_timestamp=1622604530774&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fyallist%2Fdownload%2Fyallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
 
 yaml@^1.10.0, yaml@^1.7.2:
   version "1.10.2"