From a30b61f12c65b62715846d1b5d6616fa8342d49c Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 1 Dec 2021 10:34:10 +0800
Subject: [PATCH 1/4] chore(report): adjust hide logic & text

---
 src/containers/tool/AbuseReport/Header.tsx          |  6 ++++--
 .../tool/AbuseReport/ReportContent/Main.tsx         |  2 +-
 src/containers/tool/AbuseReport/defaults/article.ts |  2 +-
 src/containers/tool/AbuseReport/index.tsx           |  9 +++++++--
 src/containers/tool/AbuseReport/logic.ts            |  3 ++-
 src/containers/tool/AbuseReport/store.ts            | 13 +++++++++++--
 src/containers/tool/AbuseReport/styles/header.ts    |  1 +
 src/containers/unit/ArticleFooter/Actions/index.tsx |  2 +-
 8 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
index 6710410d2..cd8eb8e21 100644
--- a/src/containers/tool/AbuseReport/Header.tsx
+++ b/src/containers/tool/AbuseReport/Header.tsx
@@ -1,5 +1,6 @@
 import { FC, memo } from 'react'
 
+import type { TArticle } from '@/spec'
 import { REPORT_TYPE } from '@/constant'
 import { ICON } from '@/config'
 
@@ -27,9 +28,10 @@ type TProps = {
   type: string
   view: 'main' | 'detail'
   activeItem: TREPORT_ITEM
+  article: TArticle
 }
 
-const Header: FC<TProps> = ({ type, view, activeItem }) => {
+const Header: FC<TProps> = ({ type, view, activeItem, article }) => {
   return (
     <Wrapper showShadow={view === 'detail'}>
       <ReportIcon src={`${ICON}/article/report-solid.svg`} />
@@ -38,7 +40,7 @@ const Header: FC<TProps> = ({ type, view, activeItem }) => {
       ) : (
         <Text>举报{getCustomTitle(type)}</Text>
       )}
-      <ContentTitle>这是一首简单的小情歌</ContentTitle>
+      <ContentTitle>{article.title}</ContentTitle>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/ReportContent/Main.tsx b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
index 6a85cca5d..a1bb2b432 100644
--- a/src/containers/tool/AbuseReport/ReportContent/Main.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
@@ -35,7 +35,7 @@ const Main: FC<TProps> = ({ items, activeItem }) => {
             </Option>
           ))}
       </OptionsWrapper>
-      <FooterPanel>感谢你用实际行动为社区净化作出贡献。</FooterPanel>
+      <FooterPanel>感谢你为社区净化作出贡献，我们将尽快处理。</FooterPanel>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/defaults/article.ts b/src/containers/tool/AbuseReport/defaults/article.ts
index 521156f3a..0fe24d46f 100644
--- a/src/containers/tool/AbuseReport/defaults/article.ts
+++ b/src/containers/tool/AbuseReport/defaults/article.ts
@@ -28,7 +28,7 @@ const items = [
       '包括但不限于盗版话题讨论，未授权转载，人身攻击，无根据造谣等内容。',
   },
   {
-    title: '坏问题',
+    title: '劣质问题',
     raw: REPORT.ARTICLE.BAD_QUESTION,
     checked: false,
     detail:
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 49f830edf..1797bf6f7 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -33,12 +33,17 @@ const AbuseReportContainer: FC<TProps> = ({
   testid = 'abuse-report',
 }) => {
   useInit(store)
-  const { show, type, view, itemsData, activeItem } = store
+  const { show, type, view, itemsData, activeItem, viewingArticle } = store
 
   return (
     <Modal width="500px" show={show} showCloseBtn onClose={() => close()}>
       <Wrapper testid={testid}>
-        <Header type={type} view={view} activeItem={activeItem} />
+        <Header
+          type={type}
+          view={view}
+          activeItem={activeItem}
+          article={viewingArticle}
+        />
         <ReportContent view={view} items={itemsData} activeItem={activeItem} />
         <Footer view={view} />
       </Wrapper>
diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
index 17c26ac91..90d2c6eef 100755
--- a/src/containers/tool/AbuseReport/logic.ts
+++ b/src/containers/tool/AbuseReport/logic.ts
@@ -37,7 +37,7 @@ export const selectItem = (checkedItemRaw: string): void => {
   store.mark({ checkedItemRaw, view: 'detail' })
 }
 
-export const close = (): void => store.mark({ show: false, view: 'main' })
+export const close = (): void => store.reset()
 
 const DataResolver = [
   {
@@ -79,6 +79,7 @@ export const useInit = (_store: TStore): void => {
     log('useInit: ', store)
     return () => {
       if (!sub$) return
+
       sr71$.stop()
       sub$.unsubscribe()
       sub$ = null
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
index 7696cc476..6a87c179c 100755
--- a/src/containers/tool/AbuseReport/store.ts
+++ b/src/containers/tool/AbuseReport/store.ts
@@ -7,7 +7,7 @@ import { find, propEq } from 'ramda'
 
 import { REPORT_TYPE } from '@/constant'
 
-import type { TCommunity, TRootStore } from '@/spec'
+import type { TCommunity, TArticle, TRootStore } from '@/spec'
 import { markStates, toJS } from '@/utils/mobx'
 import { buildLog } from '@/utils/logger'
 
@@ -47,7 +47,10 @@ const AbuseReport = T.model('AbuseReport', {
     get itemsData(): TREPORT_ITEM[] {
       return toJS(self.items || [])
     },
-
+    get viewingArticle(): TArticle {
+      const root = getParent(self) as TRootStore
+      return root.viewingArticle
+    },
     get activeItem(): TREPORT_ITEM {
       const { itemsData, checkedItemRaw } = self as TStore
       const findItem = find(
@@ -59,6 +62,12 @@ const AbuseReport = T.model('AbuseReport', {
     },
   }))
   .actions((self) => ({
+    reset(): void {
+      self.show = false
+      self.view = 'main'
+      self.checkedItemRaw = null
+      self.items = null
+    },
     mark(sobj: Record<string, unknown>): void {
       markStates(sobj, self)
     },
diff --git a/src/containers/tool/AbuseReport/styles/header.ts b/src/containers/tool/AbuseReport/styles/header.ts
index 8a5671666..367f4f3bf 100644
--- a/src/containers/tool/AbuseReport/styles/header.ts
+++ b/src/containers/tool/AbuseReport/styles/header.ts
@@ -26,6 +26,7 @@ export const Text = styled.div`
 `
 export const ContentTitle = styled.div`
   color: ${theme('thread.articleDigest')};
+  ${css.cutRest('300px')};
   font-size: 15px;
   margin-left: 3px;
   margin-right: 3px;
diff --git a/src/containers/unit/ArticleFooter/Actions/index.tsx b/src/containers/unit/ArticleFooter/Actions/index.tsx
index 208cba7d8..b7b334307 100644
--- a/src/containers/unit/ArticleFooter/Actions/index.tsx
+++ b/src/containers/unit/ArticleFooter/Actions/index.tsx
@@ -39,7 +39,7 @@ const Actions: FC<TProps> = ({
         <Text active={showOperationList}>日志</Text>
       </Item> */}
       {/* <DotDivider space={8} /> */}
-      <Item onClick={() => report('USER')}>
+      <Item onClick={() => report('ARTICLE')}>
         <Text>举报</Text>
       </Item>
     </Wrapper>

From 9a88976a34cc48bb9a22b4141ae3d1c0d63fc462 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 1 Dec 2021 10:50:56 +0800
Subject: [PATCH 2/4] chore(share): fix demo values

---
 config/config.json                               | 2 +-
 src/containers/tool/Drawer/AddOn/ShareButton.tsx | 8 +++++---
 src/containers/tool/Share/IFrameBoard.tsx        | 2 +-
 src/containers/tool/Share/styles/link_board.ts   | 4 +++-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/config/config.json b/config/config.json
index cb23ed22d..6cf9a7bb9 100755
--- a/config/config.json
+++ b/config/config.json
@@ -50,7 +50,7 @@
   "DEFAULT_USER_AVATAR": "https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/cmd/alien_user3.svg",
   "GRAPHQL_ENDPOINT": "http://localhost:4001/graphiql",
   "SITE_URL": "https://coderplanets.com",
-  "SITE_URL_SHORT": "https://cper.co",
+  "SITE_URL_SHORT": "https://coderplanets.com",
   "GITHUB": "https://github.com/coderplanets",
   "GITHUB_WEB_ADDR": "https://github.com/coderplanets/coderplanets_web",
   "GITHUB_SERVER_ADDR": "https://github.com/coderplanets/coderplanets_server",
diff --git a/src/containers/tool/Drawer/AddOn/ShareButton.tsx b/src/containers/tool/Drawer/AddOn/ShareButton.tsx
index 321632947..10bf4d369 100644
--- a/src/containers/tool/Drawer/AddOn/ShareButton.tsx
+++ b/src/containers/tool/Drawer/AddOn/ShareButton.tsx
@@ -1,15 +1,17 @@
 import { FC, memo } from 'react'
 
+import { shareTo } from '@/utils/helper'
 import IconButton from '@/widgets/Buttons/IconButton'
 
 const ShareButton: FC = () => {
   return (
     <IconButton
+      onClick={shareTo}
       path="article/share.svg"
-      size={19}
-      mTop={7}
+      size={18}
+      mTop={8}
       mLeft={-1}
-      hint="分享本文"
+      hint="分享内容"
       hintPlacement="bottom"
       dimWhenIdle
     />
diff --git a/src/containers/tool/Share/IFrameBoard.tsx b/src/containers/tool/Share/IFrameBoard.tsx
index 6297e94cb..08a78790d 100644
--- a/src/containers/tool/Share/IFrameBoard.tsx
+++ b/src/containers/tool/Share/IFrameBoard.tsx
@@ -12,7 +12,7 @@ import {
 
 const IFrameBoard: FC = () => {
   const code =
-    '<iframe width="560" height="315" src="https://www.youtube.com/embed/5KnkUBBVqis" title="YouTube video player" frameborder="0"></iframe>'
+    '<iframe width="560" height="315" src="https://coderplanets.com/embed/example" title="example" frameborder="0"></iframe>'
   return (
     <Wrapper>
       <Header>
diff --git a/src/containers/tool/Share/styles/link_board.ts b/src/containers/tool/Share/styles/link_board.ts
index 178abe73a..7b649f370 100644
--- a/src/containers/tool/Share/styles/link_board.ts
+++ b/src/containers/tool/Share/styles/link_board.ts
@@ -32,4 +32,6 @@ export const BoxWrapper = styled.div`
   margin-top: 8px;
   margin-left: -8px;
 `
-export const Inputer = styled(Input)``
+export const Inputer = styled(Input)`
+  width: 380px;
+`

From a9bdb55f70d75371f54ee4f4259cf8d344dacfec Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 1 Dec 2021 11:06:44 +0800
Subject: [PATCH 3/4] chore(collection): setup for demo

---
 .../tool/CollectionFolder/Setter.tsx          | 38 +++++++------------
 .../tool/CollectionFolder/index.tsx           |  1 +
 .../tool/CollectionFolder/styles/metric.ts    |  2 +-
 .../tool/CollectionFolder/styles/setter.ts    |  1 +
 4 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/containers/tool/CollectionFolder/Setter.tsx b/src/containers/tool/CollectionFolder/Setter.tsx
index f5b46aced..86c15d754 100755
--- a/src/containers/tool/CollectionFolder/Setter.tsx
+++ b/src/containers/tool/CollectionFolder/Setter.tsx
@@ -1,6 +1,7 @@
 import { FC, memo, useCallback } from 'react'
-import { TID } from '@/spec'
+import { TID, TArticle } from '@/spec'
 
+import NoticeBar from '@/widgets/NoticeBar'
 import Button from '@/widgets/Buttons/Button'
 import { Space } from '@/widgets/Common'
 import Folder from '@/widgets/Folder'
@@ -15,8 +16,8 @@ import {
 } from './styles/setter'
 
 import {
-  setContent,
-  unSetContent,
+  // setContent,
+  // unSetContent,
   switchToCreator,
   switchToUpdater,
 } from './logic'
@@ -24,9 +25,10 @@ import {
 type TProps = {
   show: boolean
   selectedId: TID
+  article: TArticle
 }
 
-const Setter: FC<TProps> = ({ show, selectedId }) => {
+const Setter: FC<TProps> = ({ show, selectedId, article }) => {
   const handleMenu = useCallback((key) => {
     if (key === 'edit') switchToUpdater()
   }, [])
@@ -34,33 +36,21 @@ const Setter: FC<TProps> = ({ show, selectedId }) => {
   return (
     <Wrapper show={show}>
       <Header>
-        添加<Artiment>某篇文章或讨论</Artiment>到收藏夹
+        添加<Artiment>{article.title}</Artiment>到收藏夹
       </Header>
+      <NoticeBar
+        type="notice"
+        content="抱歉，收藏功能前端部分尚未完成，暂不可用。如果你对 UI/UX 或功能有建议，欢迎移步 /feedback 参与讨论。"
+        bottom={20}
+        top={20}
+      />
       <ListWrapper>
         <FolderWrapper>
           <Folder onMenuClick={handleMenu} lock />
         </FolderWrapper>
 
         <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
+          <Folder />
         </FolderWrapper>
       </ListWrapper>
       <Footer>
diff --git a/src/containers/tool/CollectionFolder/index.tsx b/src/containers/tool/CollectionFolder/index.tsx
index 68822846a..816f38768 100755
--- a/src/containers/tool/CollectionFolder/index.tsx
+++ b/src/containers/tool/CollectionFolder/index.tsx
@@ -77,6 +77,7 @@ const CollectionFolderContainer: FC<TProps> = ({
           <Setter
             // entries={entries}
             show={isSetterView}
+            article={viewingArticle}
             selectedId="1"
           />
           <Creator data={editCategoryData} show={isCreatorView} />
diff --git a/src/containers/tool/CollectionFolder/styles/metric.ts b/src/containers/tool/CollectionFolder/styles/metric.ts
index 9b1007e2d..49f65d4a0 100644
--- a/src/containers/tool/CollectionFolder/styles/metric.ts
+++ b/src/containers/tool/CollectionFolder/styles/metric.ts
@@ -1,2 +1,2 @@
-export const MODAL_MIN_HEIGHT = '55vh'
+export const MODAL_MIN_HEIGHT = '48vh'
 export const holder = 1
diff --git a/src/containers/tool/CollectionFolder/styles/setter.ts b/src/containers/tool/CollectionFolder/styles/setter.ts
index 624c9a74b..30629d424 100755
--- a/src/containers/tool/CollectionFolder/styles/setter.ts
+++ b/src/containers/tool/CollectionFolder/styles/setter.ts
@@ -27,6 +27,7 @@ export const Header = styled.div`
 `
 export const Artiment = styled.div`
   color: ${theme('thread.articleTitle')};
+  ${css.cutRest('200px')};
   font-size: 15px;
   margin-left: 5px;
   margin-right: 5px;

From da947cc385c27741301c2243c17255bef317d0e8 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 1 Dec 2021 11:27:45 +0800
Subject: [PATCH 4/4] chore(collection): setup for demo

---
 .../tool/ArticleSticker/RightSticker/DefaultSticker.tsx  | 6 +++---
 src/containers/tool/ArticleSticker/logic.ts              | 9 +--------
 .../viewer/ArticleViewer/BlogViewer/ArticleInfo.tsx      | 6 +++---
 .../viewer/ArticleViewer/PostViewer/ArticleInfo.tsx      | 6 +++---
 src/containers/viewer/ArticleViewer/index.tsx            | 9 +++++++++
 .../ArticleViewer/styles/blog_viewer/article_info.ts     | 4 ++--
 .../ArticleViewer/styles/post_viewer/article_info.ts     | 4 ++--
 utils/helper.ts                                          | 6 ++++++
 8 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
index d422321fc..03496fe1a 100644
--- a/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
+++ b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
@@ -1,13 +1,13 @@
 import { FC, memo } from 'react'
 
 import type { TArticle } from '@/spec'
-import { shareTo } from '@/utils/helper'
+import { shareTo, addCollection } from '@/utils/helper'
 
 import IconButton from '@/widgets/Buttons/IconButton'
 import Upvote from '@/widgets/Upvote'
 
 import { Wrapper } from '../styles/right_sticker/default_sticker'
-import { collectArticle, handleUpvote } from '../logic'
+import { handleUpvote } from '../logic'
 
 type TProps = {
   show: boolean
@@ -25,7 +25,7 @@ const ArticleSticker: FC<TProps> = ({ show, article }) => {
       />
       <IconButton
         path="article/collect-bookmark.svg"
-        onClick={collectArticle}
+        onClick={() => addCollection()}
         size={23}
         mLeft={2}
         mTop={18}
diff --git a/src/containers/tool/ArticleSticker/logic.ts b/src/containers/tool/ArticleSticker/logic.ts
index 60df645b9..350be7264 100755
--- a/src/containers/tool/ArticleSticker/logic.ts
+++ b/src/containers/tool/ArticleSticker/logic.ts
@@ -1,8 +1,7 @@
 import { useEffect } from 'react'
 // import { } from 'ramda'
 
-import { EVENT } from '@/constant'
-import { send, authWarn } from '@/utils/helper'
+import { authWarn } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 import asyncSuit from '@/utils/async'
 import { matchArticleUpvotes } from '@/utils/macros'
@@ -26,12 +25,6 @@ export const toggleTocMenu = (): void => {
   store.mark({ isTocMenuOpened, isLeftStickerLocked })
 }
 
-export const collectArticle = (): void => {
-  send(EVENT.SET_FAVORITE_CONTENT, {
-    data: { thread: store.activeThread },
-  })
-}
-
 export const handleUpvote = (viewerHasUpvoted: boolean): void => {
   if (!store.isLogin) return authWarn({ hideToast: true })
 
diff --git a/src/containers/viewer/ArticleViewer/BlogViewer/ArticleInfo.tsx b/src/containers/viewer/ArticleViewer/BlogViewer/ArticleInfo.tsx
index fb594de43..c07e0d0bc 100644
--- a/src/containers/viewer/ArticleViewer/BlogViewer/ArticleInfo.tsx
+++ b/src/containers/viewer/ArticleViewer/BlogViewer/ArticleInfo.tsx
@@ -2,8 +2,8 @@ import { memo, FC } from 'react'
 
 import type { TArticle } from '@/spec'
 import { BLOG_TAB, BLOG_TAB_ITEMS } from '@/constant'
-import { ICON } from '@/config'
 
+import { addCollection } from '@/utils/helper'
 import DotDivider from '@/widgets/DotDivider'
 import Upvote from '@/widgets/Upvote'
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
@@ -37,8 +37,8 @@ const ArticleInfo: FC<TProps> = ({ article, tab }) => {
         <BaseWrapper>
           <ArticleBaseStats article={article} container="drawer" />
           <DotDivider space={10} />
-          <CollectWrapper>
-            <CollectIcon src={`${ICON}/article/collect-bookmark.svg`} />
+          <CollectWrapper onClick={() => addCollection()}>
+            <CollectIcon />
             <CollectText>收藏</CollectText>
           </CollectWrapper>
         </BaseWrapper>
diff --git a/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx b/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx
index 8d5eb9bd4..93d91b96f 100644
--- a/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx
+++ b/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx
@@ -1,8 +1,8 @@
 import { memo, FC } from 'react'
 
 import type { TArticle } from '@/spec'
-import { ICON } from '@/config'
 
+import { addCollection } from '@/utils/helper'
 import DotDivider from '@/widgets/DotDivider'
 import Upvote from '@/widgets/Upvote'
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
@@ -29,8 +29,8 @@ const ArticleInfo: FC<TProps> = ({ article }) => {
       <BaseWrapper>
         <ArticleBaseStats article={article} container="drawer" />
         <DotDivider space={10} />
-        <CollectWrapper>
-          <CollectIcon src={`${ICON}/article/collect-bookmark.svg`} />
+        <CollectWrapper onClick={() => addCollection()}>
+          <CollectIcon />
           <CollectText>收藏</CollectText>
         </CollectWrapper>
       </BaseWrapper>
diff --git a/src/containers/viewer/ArticleViewer/index.tsx b/src/containers/viewer/ArticleViewer/index.tsx
index 4ee52fd7c..f7da9af60 100755
--- a/src/containers/viewer/ArticleViewer/index.tsx
+++ b/src/containers/viewer/ArticleViewer/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import { FC } from 'react'
+import dynamic from 'next/dynamic'
 
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
@@ -20,6 +21,13 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticleViewer')
 
+const CollectionFolder = dynamic(
+  () => import('@/containers/tool/CollectionFolder'),
+  {
+    ssr: false,
+  },
+)
+
 type TProps = {
   articleViewer?: TStore
   testid?: string
@@ -34,6 +42,7 @@ const ArticleViewerContainer: FC<TProps> = ({
 
   return (
     <Wrapper testid={testid}>
+      <CollectionFolder />
       <Viewer
         article={viewingArticle}
         loading={loading}
diff --git a/src/containers/viewer/ArticleViewer/styles/blog_viewer/article_info.ts b/src/containers/viewer/ArticleViewer/styles/blog_viewer/article_info.ts
index 6221c14a4..b3b0fc7bf 100644
--- a/src/containers/viewer/ArticleViewer/styles/blog_viewer/article_info.ts
+++ b/src/containers/viewer/ArticleViewer/styles/blog_viewer/article_info.ts
@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 
-import Img from '@/Img'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
+import CollectionSVG from '@/icons/CollectionBookmark'
 
 export const Wrapper = styled.div`
   border-bottom: 1px solid;
@@ -23,7 +23,7 @@ export const CollectWrapper = styled.div`
   ${css.flex('align-center')};
   cursor: pointer;
 `
-export const CollectIcon = styled(Img)`
+export const CollectIcon = styled(CollectionSVG)`
   ${css.size(16)};
   fill: ${theme('thread.articleDigest')};
 
diff --git a/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts b/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts
index 6ce1395fb..1a69b3d43 100644
--- a/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts
+++ b/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts
@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 
-import Img from '@/Img'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
+import CollectionSVG from '@/icons/CollectionBookmark'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center', 'justify-between')};
@@ -15,7 +15,7 @@ export const CollectWrapper = styled.div`
   ${css.flex('align-center')};
   cursor: pointer;
 `
-export const CollectIcon = styled(Img)`
+export const CollectIcon = styled(CollectionSVG)`
   ${css.size(16)};
   fill: ${theme('thread.articleDigest')};
 
diff --git a/utils/helper.ts b/utils/helper.ts
index 8f1fe167c..da102e9bd 100755
--- a/utils/helper.ts
+++ b/utils/helper.ts
@@ -180,6 +180,12 @@ export const checkout = (amount: number, usage: TPaymentUsage): void =>
  */
 export const shareTo = (): void => send(EVENT.SHARE, {})
 
+export const addCollection = (): void => {
+  send(EVENT.SET_FAVORITE_CONTENT, {
+    data: { thread: THREAD.POST },
+  })
+}
+
 /**
  * report content
  */