From 127d8c56dbff1091469f508629621787ed7a6e06 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 26 Jul 2021 21:43:49 +0800
Subject: [PATCH 1/8] fix(tooltip): mini adjust

---
 src/components/Tooltip/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 38fb06205..ec1e3f46b 100755
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -148,10 +148,9 @@ const Tooltip: FC<TProps> = ({
     },
     onShow: (instance) => {
       // see https://github.com/atomiks/tippyjs/issues/260#issuecomment-462031748
-      hideAll()
+      hideAll({ exclude: instance })
       setInstance(instance)
       setActive(true)
-      // tippy.hideAll({ exclude: instance })
       onShow?.()
     },
   }

From 0665ef8e64c32e5e1761d61d40cef99a82f21742 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 27 Jul 2021 23:14:56 +0800
Subject: [PATCH 2/8] feat(collection-folder): basic UI done

---
 src/components/Buttons/MenuButton/index.tsx   |   4 +-
 src/components/Folder/Content.js              |  24 --
 src/components/Folder/Content.tsx             |  30 +++
 src/components/Folder/DetailInfo.tsx          |  22 ++
 src/components/Folder/Footer.js               |  25 --
 src/components/Folder/Footer.tsx              |  67 +++++
 src/components/Folder/index.js                |  85 -------
 src/components/Folder/index.tsx               |  58 +++++
 src/components/Folder/styles/content.ts       |  51 +++-
 src/components/Folder/styles/detail_info.ts   |  18 ++
 src/components/Folder/styles/footer.ts        |  57 +++--
 src/components/Folder/styles/index.ts         |  34 +--
 src/components/Folder/styles/metric.ts        |   4 +-
 src/components/Modal/styles/index.ts          |   5 +-
 .../ArticleDigest/DesktopView/index.tsx       |   3 +
 src/containers/tool/AbuseReport/Footer.tsx    |   2 +-
 .../tool/AbuseReport/ReportContent/Main.tsx   |   4 +-
 .../tool/AbuseReport/styles/header.ts         |   4 +-
 .../AbuseReport/styles/report_content/main.ts |   4 +-
 .../RightSticker/DefaultSticker.tsx           |   4 +-
 src/containers/tool/ArticleSticker/logic.ts   |   9 +-
 .../CollectionFolder/CategoryCardList.tsx     |  48 ++++
 .../tool/CollectionFolder/Creator.tsx         | 101 ++++++++
 .../tool/CollectionFolder/Setter.tsx          |  66 +++++
 .../tool/CollectionFolder/Updater.tsx         | 112 +++++++++
 .../tool/CollectionFolder/index.tsx           | 100 ++++++++
 src/containers/tool/CollectionFolder/logic.ts | 238 ++++++++++++++++++
 .../tool/CollectionFolder/schema.ts           |  80 ++++++
 src/containers/tool/CollectionFolder/store.ts | 193 ++++++++++++++
 .../tool/CollectionFolder/styles/box_view.ts  |  10 +
 .../styles/category_card_list.ts              |  11 +
 .../tool/CollectionFolder/styles/editor.ts    |  39 +++
 .../tool/CollectionFolder/styles/index.ts     |  38 +++
 .../tool/CollectionFolder/styles/metric.ts    |   2 +
 .../tool/CollectionFolder/styles/setter.ts    |  55 ++++
 .../tool/CollectionFolder/tests/index.test.js |  10 +
 .../tool/CollectionFolder/tests/store.test.js |  10 +
 src/containers/tool/FavoritesCats/store.js    |   2 +-
 .../unit/ArticleViewerHeader/index.js         |   2 -
 src/spec/article.ts                           |  17 ++
 src/spec/index.ts                             |   2 +
 src/stores/RootStore/index.ts                 |   2 +
 src/stores/index.ts                           |   1 +
 43 files changed, 1443 insertions(+), 210 deletions(-)
 delete mode 100644 src/components/Folder/Content.js
 create mode 100644 src/components/Folder/Content.tsx
 create mode 100644 src/components/Folder/DetailInfo.tsx
 delete mode 100644 src/components/Folder/Footer.js
 create mode 100644 src/components/Folder/Footer.tsx
 delete mode 100755 src/components/Folder/index.js
 create mode 100755 src/components/Folder/index.tsx
 create mode 100644 src/components/Folder/styles/detail_info.ts
 create mode 100755 src/containers/tool/CollectionFolder/CategoryCardList.tsx
 create mode 100755 src/containers/tool/CollectionFolder/Creator.tsx
 create mode 100755 src/containers/tool/CollectionFolder/Setter.tsx
 create mode 100755 src/containers/tool/CollectionFolder/Updater.tsx
 create mode 100755 src/containers/tool/CollectionFolder/index.tsx
 create mode 100755 src/containers/tool/CollectionFolder/logic.ts
 create mode 100755 src/containers/tool/CollectionFolder/schema.ts
 create mode 100755 src/containers/tool/CollectionFolder/store.ts
 create mode 100755 src/containers/tool/CollectionFolder/styles/box_view.ts
 create mode 100755 src/containers/tool/CollectionFolder/styles/category_card_list.ts
 create mode 100755 src/containers/tool/CollectionFolder/styles/editor.ts
 create mode 100755 src/containers/tool/CollectionFolder/styles/index.ts
 create mode 100644 src/containers/tool/CollectionFolder/styles/metric.ts
 create mode 100755 src/containers/tool/CollectionFolder/styles/setter.ts
 create mode 100755 src/containers/tool/CollectionFolder/tests/index.test.js
 create mode 100755 src/containers/tool/CollectionFolder/tests/store.test.js

diff --git a/src/components/Buttons/MenuButton/index.tsx b/src/components/Buttons/MenuButton/index.tsx
index 6b217bfe6..1ded3e72b 100644
--- a/src/components/Buttons/MenuButton/index.tsx
+++ b/src/components/Buttons/MenuButton/index.tsx
@@ -22,10 +22,10 @@ export type TOption = {
 type TProps = {
   children: ReactNode
   options: TOption[]
-  extraOptions: TOption[]
+  extraOptions?: TOption[]
   placement?: TTooltipPlacement
   panelMinWidth?: string
-  onClick: (key?: string) => void
+  onClick?: (key?: string) => void
 }
 
 const MenuButton: FC<TProps> = ({
diff --git a/src/components/Folder/Content.js b/src/components/Folder/Content.js
deleted file mode 100644
index 3e748842b..000000000
--- a/src/components/Folder/Content.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-
-import { Wrapper, TextWrapper, Cover } from './styles/content'
-
-const Content = ({ contentType, cover, desc }) => {
-  switch (contentType) {
-    case 'text': {
-      return (
-        <TextWrapper>
-          {desc}, djifek d djifek idfk d fjdekj idfkjei dfkejife dfjei
-        </TextWrapper>
-      )
-    }
-
-    default:
-      return (
-        <Wrapper>
-          <Cover src={cover} />
-        </Wrapper>
-      )
-  }
-}
-
-export default React.memo(Content)
diff --git a/src/components/Folder/Content.tsx b/src/components/Folder/Content.tsx
new file mode 100644
index 000000000..3e42ff1eb
--- /dev/null
+++ b/src/components/Folder/Content.tsx
@@ -0,0 +1,30 @@
+import { FC, memo } from 'react'
+import TimeAgo from 'timeago-react'
+
+import { ICON } from '@/config'
+
+import { Wrapper, Info, Total, Unit, Text, LockIcon } from './styles/content'
+
+type TProps = {
+  total?: number
+  updatedAt?: string
+  lock?: boolean
+}
+
+const Content: FC<TProps> = ({ total, updatedAt, lock }) => {
+  return (
+    <Wrapper>
+      {lock && <LockIcon src={`${ICON}/shape/lock.svg`} />}
+      <Info>
+        <Total>
+          {total} <Unit>项</Unit>
+        </Total>
+        <Text>
+          <TimeAgo datetime={updatedAt} locale="zh_CN" />
+        </Text>
+      </Info>
+    </Wrapper>
+  )
+}
+
+export default memo(Content)
diff --git a/src/components/Folder/DetailInfo.tsx b/src/components/Folder/DetailInfo.tsx
new file mode 100644
index 000000000..8016db1a0
--- /dev/null
+++ b/src/components/Folder/DetailInfo.tsx
@@ -0,0 +1,22 @@
+import { FC, memo } from 'react'
+import { Wrapper, Title, Desc } from './styles/detail_info'
+
+const DetailInfo: FC = () => {
+  return (
+    <Wrapper>
+      <Title>名称</Title>
+      <Desc>新收藏夹</Desc>
+
+      <Title>内容数</Title>
+      <Desc>12 项</Desc>
+
+      <Title>最后更新时间</Title>
+      <Desc>3 天前</Desc>
+
+      <Title>是否公开</Title>
+      <Desc>公开</Desc>
+    </Wrapper>
+  )
+}
+
+export default memo(DetailInfo)
diff --git a/src/components/Folder/Footer.js b/src/components/Folder/Footer.js
deleted file mode 100644
index 5f33483a2..000000000
--- a/src/components/Folder/Footer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import TimeAgo from 'timeago-react'
-
-import { ICON_CMD } from '@/config'
-
-import { Wrapper, Title, Intro, Total, Update, LockIcon } from './styles/footer'
-
-const Footer = ({ title, total, updatedAt, lock, onClick }) => {
-  return (
-    <Wrapper onClick={onClick}>
-      <Title>
-        {title}
-        {lock && <LockIcon src={`${ICON_CMD}/lock.svg`} />}
-      </Title>
-      <Intro>
-        <Total>共 {total} 项</Total>
-        <Update>
-          <TimeAgo datetime={updatedAt} locale="zh_CN" />
-        </Update>
-      </Intro>
-    </Wrapper>
-  )
-}
-
-export default React.memo(Footer)
diff --git a/src/components/Folder/Footer.tsx b/src/components/Folder/Footer.tsx
new file mode 100644
index 000000000..3a39daedf
--- /dev/null
+++ b/src/components/Folder/Footer.tsx
@@ -0,0 +1,67 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+import { IconButton, MenuButton } from '@/components/Buttons'
+import Tooltip from '@/components/Tooltip'
+
+import DetailInfo from './DetailInfo'
+// import { LavaLampLoading } from '@/components/Loading'
+import {
+  Wrapper,
+  Title,
+  Name,
+  FolderInfoPopWrapper,
+  MenuWrapper,
+  HintWrapper,
+  AddHint,
+} from './styles/footer'
+
+const menuOptions = [
+  {
+    key: 'edit',
+    icon: `${ICON}/edit/publish-pen.svg`,
+    title: '编辑',
+  },
+  {
+    key: 'lock',
+    icon: `${ICON}/shape/lock.svg`,
+    title: '加锁',
+  },
+]
+
+type TProps = {
+  title: string
+  onClick: () => void
+}
+
+const Footer: FC<TProps> = ({ title, onClick }) => {
+  return (
+    <Wrapper onClick={onClick}>
+      <Title>
+        <Tooltip
+          delay={600}
+          content={
+            <FolderInfoPopWrapper>
+              <DetailInfo />
+            </FolderInfoPopWrapper>
+          }
+          noPadding
+        >
+          <Name>{title}</Name>
+        </Tooltip>
+        <MenuButton options={menuOptions}>
+          <MenuWrapper>
+            <IconButton path="shape/more-l.svg" mRight={0} />
+          </MenuWrapper>
+        </MenuButton>
+      </Title>
+      <HintWrapper>
+        {/* <LavaLampLoading size="small" /> */}
+        {/* <Hint>已收入</Hint> */}
+        {/* <AddHint>已收入</AddHint> */}
+      </HintWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(Footer)
diff --git a/src/components/Folder/index.js b/src/components/Folder/index.js
deleted file mode 100755
index ec5a7fda1..000000000
--- a/src/components/Folder/index.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- *
- * Folder
- * see orignal example at: https://codepen.io/mydearxym2/pen/YzyLYqL
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { ICON_CMD } from '@/config'
-import { SIZE } from '@/constant'
-import { buildLog } from '@/utils'
-
-import Content from './Content'
-import Footer from './Footer'
-
-import { Wrapper, TabShape, EditIconWrapper, EditIcon } from './styles'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:Folder:index')
-
-const Folder = ({
-  size,
-  title,
-  desc,
-  cover,
-  total,
-  updatedAt,
-  lock,
-  editable,
-  contentType,
-  onEdit,
-  onSelect,
-}) => {
-  return (
-    <Wrapper testid="folder" size={size}>
-      {editable && (
-        <EditIconWrapper onClick={onEdit}>
-          <EditIcon src={`${ICON_CMD}/edit.svg`} />
-        </EditIconWrapper>
-      )}
-      <TabShape />
-      <Content contentType={contentType} cover={cover} desc={desc} />
-      <Footer
-        title={title}
-        total={total}
-        updatedAt={updatedAt}
-        lock={lock}
-        onClick={onSelect}
-      />
-    </Wrapper>
-  )
-}
-
-Folder.propTypes = {
-  title: T.string,
-  desc: T.string,
-  cover: T.string,
-  total: T.number,
-  updatedAt: T.string,
-  lock: T.bool,
-  editable: T.bool,
-  onEdit: T.func,
-  onSelect: T.func,
-  contentType: T.oneOf(['text', 'cover']),
-  size: T.oneOf([SIZE.SMALL, SIZE.MEDIUM]),
-}
-
-Folder.defaultProps = {
-  title: '计算机名人堂',
-  desc: 'desc',
-  cover:
-    'https://cps-oss.oss-cn-shanghai.aliyuncs.com/navi/arch/wqsqpsngny.jpeg',
-  total: 5,
-  updatedAt: '2019-05-03T14:32:09Z',
-  lock: false,
-  editable: false,
-  onEdit: log,
-  onSelect: log,
-  contentType: 'text',
-  size: SIZE.MEDIUM,
-}
-
-export default React.memo(Folder)
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
new file mode 100755
index 000000000..c9553141a
--- /dev/null
+++ b/src/components/Folder/index.tsx
@@ -0,0 +1,58 @@
+/*
+ *
+ * Folder
+ * see orignal example at: https://codepen.io/mydearxym2/pen/YzyLYqL
+ *
+ */
+
+import { FC, memo } from 'react'
+import { TSIZE_SM } from '@/spec'
+
+import { ICON_CMD } from '@/config'
+import { SIZE } from '@/constant'
+import { buildLog } from '@/utils'
+
+import Content from './Content'
+import Footer from './Footer'
+
+import { Wrapper, TabShape } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Folder:index')
+
+type TProps = {
+  title?: string
+  total?: number
+  updatedAt?: string
+  lock?: boolean
+  editable?: boolean
+  onEdit?: () => void
+  onSelect?: () => void
+  size?: TSIZE_SM
+}
+
+const Folder: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  title = '新收藏夹',
+  total = 12,
+  updatedAt = '',
+  lock = false,
+  editable = false,
+  onEdit = log,
+  onSelect = log,
+}) => {
+  return (
+    <Wrapper testid="folder" size={size}>
+      {/* {editable && (
+        <EditIconWrapper onClick={onEdit}>
+          <EditIcon src={`${ICON_CMD}/edit.svg`} />
+        </EditIconWrapper>
+      )} */}
+      <TabShape />
+      <Content total={total} lock={lock} updatedAt={updatedAt} />
+      <Footer title={title} onClick={onSelect} />
+    </Wrapper>
+  )
+}
+
+export default memo(Folder)
diff --git a/src/components/Folder/styles/content.ts b/src/components/Folder/styles/content.ts
index e85f72532..f05fc34cf 100644
--- a/src/components/Folder/styles/content.ts
+++ b/src/components/Folder/styles/content.ts
@@ -1,23 +1,50 @@
 import styled from 'styled-components'
 
 import Img from '@/Img'
-import { theme } from '@/utils'
+import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
+  ${css.flex('align-end', 'justify-end')};
+  position: relative;
   width: 100%;
-  height: calc(100% - 40px);
-  margin-bottom: 5px;
+  height: 100%;
+  background-color: #025061;
+  border-radius: 5px;
+  border-top-left-radius: 0;
+  padding-right: 8px;
+  padding-bottom: 6px;
+
+  border: 1px solid;
+  border-color: transparent;
+  box-shadow: -3px -7px 5px -5px rgb(0 0 0 / 8%);
+
   flex-grow: 1;
+  color: ${theme('thread.articleDigest')};
+
+  &:hover {
+    border-color: #117eaf;
+    cursor: pointer;
+  }
 `
-export const TextWrapper = styled(Wrapper)`
-  padding-top: 3px;
+export const Info = styled.div``
+export const Text = styled.div`
   color: ${theme('thread.articleDigest')};
-  border-bottom: 1px solid;
-  border-bottom-color: #1b556b;
+  font-size: 10px;
+  text-align: right;
 `
-export const Cover = styled(Img)`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 4px;
+export const Unit = styled(Text)`
+  display: inline-block;
+`
+export const Total = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 12px;
+  text-align: right;
+`
+export const LockIcon = styled(Img)`
+  position: absolute;
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(11)};
+
+  left: 8px;
+  bottom: 9px;
 `
diff --git a/src/components/Folder/styles/detail_info.ts b/src/components/Folder/styles/detail_info.ts
new file mode 100644
index 000000000..e564170ee
--- /dev/null
+++ b/src/components/Folder/styles/detail_info.ts
@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flexColumn('align-start')};
+  padding: 10px;
+`
+export const Title = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 10px;
+  margin-bottom: 2px;
+`
+export const Desc = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 12px;
+  margin-bottom: 6px;
+`
diff --git a/src/components/Folder/styles/footer.ts b/src/components/Folder/styles/footer.ts
index 46b857e81..3821a533f 100644
--- a/src/components/Folder/styles/footer.ts
+++ b/src/components/Folder/styles/footer.ts
@@ -1,29 +1,54 @@
 import styled from 'styled-components'
 
-import Img from '@/Img'
 import { css, theme } from '@/utils'
+import { Wrapper as FolderWrapper } from './index'
 
 export const Wrapper = styled.div`
-  ${css.flexColumn()};
-  cursor: pointer;
+  position: relative;
+  ${css.flexColumn('align-center')};
+  text-align: center;
+  margin-top: 4px;
 `
 export const Title = styled.div`
-  ${css.flex('align-center', 'justify-between')};
+  ${css.flex('align-center')};
+  text-align: center;
+  margin-top: 5px;
+`
+export const Name = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 3px;
+  ${css.cutRest('68px')};
 `
-export const Intro = styled.div`
-  ${css.flex('justify-between', 'align-center')};
-  color: ${theme('thread.articleDigest')};
-  font-size: 12px;
+export const FolderInfoPopWrapper = styled.div`
+  width: 100px;
+  height: 160px;
+  overflow-x: hidden;
+  overflow-y: scroll;
 `
-export const Total = styled.div``
-export const Update = styled.div``
+export const MenuWrapper = styled.div`
+  position: absolute;
+  right: -10px;
+  top: -8px;
+  opacity: 0;
+  /* visibility: hidden; */
 
-export const LockIcon = styled(Img)`
-  fill: ${theme('thread.articleDigest')};
-  ${css.size(12)};
-  margin-top: -1px;
+  ${Title}:hover & {
+    opacity: 1;
+  }
+`
+export const HintWrapper = styled.div`
+  ${css.flexColumn('align-center')};
+  height: 14px;
+  width: 100%;
+`
+export const Hint = styled.div`
+  color: ${theme('button.primary')};
+  font-size: 12px;
+  cursor: pointer;
+`
+export const AddHint = styled(Hint)`
+  display: none;
+  ${FolderWrapper}:hover & {
+    display: block;
+  }
 `
diff --git a/src/components/Folder/styles/index.ts b/src/components/Folder/styles/index.ts
index 55156ebe8..bd0bd7af1 100755
--- a/src/components/Folder/styles/index.ts
+++ b/src/components/Folder/styles/index.ts
@@ -1,8 +1,7 @@
 import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
-import Img from '@/Img'
-import { css, theme } from '@/utils'
+import { css } from '@/utils'
 
 import { getWidth, getHeight } from './metric'
 
@@ -11,56 +10,31 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 }))<TTestable & { size: string }>`
   position: relative;
   ${css.flexColumn()};
-  background-color: #004351;
   width: ${({ size }) => getWidth(size)};
   height: ${({ size }) => getHeight(size)};
 
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
-  padding: 10px;
-  padding-top: 8px;
 `
 export const TabShape = styled.div`
   position: absolute;
+  background-color: #054956;
   height: 10px;
   left: 0;
   bottom: 100%;
   display: block;
   width: 40%;
   border-top-left-radius: 8px;
-  background-color: inherit;
   &:after {
     content: '';
     position: absolute;
     display: block;
     top: 0;
     left: calc(100% - 10px);
-    border-bottom: 10px solid #004351;
+    border-bottom: 10px solid;
+    border-bottom-color: #054956;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
   }
 `
-export const EditIconWrapper = styled.div`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  ${css.flex('justify-center')};
-  z-index: 1;
-  ${css.size(30)};
-  background: #004351;
-  opacity: 0;
-
-  ${Wrapper}:hover & {
-    opacity: 1;
-    cursor: pointer;
-  }
-
-  transition: all 0.25s;
-`
-export const EditIcon = styled(Img)`
-  fill: ${theme('thread.articleTitle')};
-  ${css.size(18)};
-  display: block;
-  z-index: 2;
-`
diff --git a/src/components/Folder/styles/metric.ts b/src/components/Folder/styles/metric.ts
index b529ec778..e652d3967 100644
--- a/src/components/Folder/styles/metric.ts
+++ b/src/components/Folder/styles/metric.ts
@@ -6,7 +6,7 @@ export const getWidth = (type: string): string => {
       return '240px'
 
     default:
-      return '190px'
+      return '75px'
   }
 }
 
@@ -16,6 +16,6 @@ export const getHeight = (type: string): string => {
       return '180px'
 
     default:
-      return '140px'
+      return '100px'
   }
 }
diff --git a/src/components/Modal/styles/index.ts b/src/components/Modal/styles/index.ts
index 4022ced59..511f19b87 100755
--- a/src/components/Modal/styles/index.ts
+++ b/src/components/Modal/styles/index.ts
@@ -29,9 +29,10 @@ export const Wrapper = styled.div<TWrapper>`
   margin: 0 auto;
   top: ${({ offsetTop }) => offsetTop};
   width: ${({ width }) => width};
+  height: auto;
   border-radius: 8px;
   min-height: 320px;
-  max-height: 81vh;
+  max-height: 65vh;
   box-shadow: -5px 6px 37px -8px rgba(0, 0, 0, 0.42);
   /* border: 1px solid; */
   border-top: 3px solid;
@@ -44,7 +45,7 @@ export const Wrapper = styled.div<TWrapper>`
 `
 export const ChildrenWrapper = styled.div`
   min-height: 320px;
-  max-height: 80vh;
+  /* height: 100%; */
   height: auto;
   overflow-y: scroll;
 `
diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx
index 7e6756d3e..25433916b 100644
--- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx
+++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx
@@ -11,6 +11,8 @@ import { METRIC } from '@/constant'
 import { useScroll } from '@/hooks'
 import { pluggedIn, buildLog } from '@/utils'
 
+import CollectionFolder from '@/containers/tool/CollectionFolder'
+
 import FixedHeader from './FixedHeader'
 import Layout from './Layout'
 
@@ -45,6 +47,7 @@ const ArticleDigestContainer: FC<TProps> = ({
 
   return (
     <Wrapper testid={testid} metric={metric}>
+      <CollectionFolder />
       <FixedHeader
         show={!inViewport}
         article={viewingArticle}
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
index 722b4acef..8464c49b3 100644
--- a/src/containers/tool/AbuseReport/Footer.tsx
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -17,7 +17,7 @@ const Footer: FC<TProps> = ({ view }) => {
       {/* <Note>举报后社区志愿者会在第一时间【处理】。</Note> */}
       <YesOrNoButtons
         cancelText="上一步"
-        confirmText="举报"
+        confirmText="提交"
         onCancel={goBack}
       />
     </Wrapper>
diff --git a/src/containers/tool/AbuseReport/ReportContent/Main.tsx b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
index 101a8e7b1..f99dc9191 100644
--- a/src/containers/tool/AbuseReport/ReportContent/Main.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
@@ -11,7 +11,7 @@ import {
   Option,
   SelectWrapper,
   Title,
-  Panel,
+  FooterPanel,
 } from '../styles/report_content/main'
 import { selectItem } from '../logic'
 
@@ -35,7 +35,7 @@ const Main: FC<TProps> = ({ items, activeItem }) => {
             </Option>
           ))}
       </OptionsWrapper>
-      <Panel>感谢你用实际行动为社区净化作出贡献。</Panel>
+      <FooterPanel>感谢你用实际行动为社区净化作出贡献。</FooterPanel>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/styles/header.ts b/src/containers/tool/AbuseReport/styles/header.ts
index 8dc175a00..18ed0779a 100644
--- a/src/containers/tool/AbuseReport/styles/header.ts
+++ b/src/containers/tool/AbuseReport/styles/header.ts
@@ -7,10 +7,10 @@ export const Wrapper = styled.div<{ showShadow: boolean }>`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
   background: ${theme('modal.bg')};
-  padding: 20px 38px;
+  /* padding: 20px 38px; */
+  padding: ${({ showShadow }) => (showShadow ? '12px 38px' : '20px 38px')};
   filter: ${({ showShadow }) =>
     showShadow ? theme('modal.subPanelShadow') : ''};
-  /* filter: ${theme('modal.subPanelShadow')}; */
   z-index: 1;
 `
 export const ReportIcon = styled(Img)`
diff --git a/src/containers/tool/AbuseReport/styles/report_content/main.ts b/src/containers/tool/AbuseReport/styles/report_content/main.ts
index ffb0b0726..d9f04a63e 100644
--- a/src/containers/tool/AbuseReport/styles/report_content/main.ts
+++ b/src/containers/tool/AbuseReport/styles/report_content/main.ts
@@ -13,13 +13,13 @@ export const OptionsWrapper = styled.div`
   background: ${theme('modal.bg')};
   filter: ${theme('modal.subPanelShadow')};
 `
-export const Panel = styled.div`
+export const FooterPanel = styled.div`
   ${css.flex('align-center')};
   padding-left: 35px;
   width: 100%;
   background: ${theme('modal.subPanel')};
   /* background: ${theme('modal.panelBg')}; */
-  height: 50px;
+  height: 56px;
   color: ${theme('thread.articleDigest')};
   font-size: 13px;
 `
diff --git a/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
index a35fcc122..a1f2984f8 100644
--- a/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
+++ b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
@@ -7,6 +7,7 @@ import { IconButton } from '@/components/Buttons'
 import Upvote from '@/components/Upvote'
 
 import { Wrapper } from '../styles/right_sticker/default_sticker'
+import { collectArticle } from '../logic'
 
 type TProps = {
   show: boolean
@@ -19,6 +20,7 @@ const ArticleSticker: FC<TProps> = ({ show, article }) => {
       <Upvote count={article.starredCount} type="article" />
       <IconButton
         path="article/collect-bookmark.svg"
+        onClick={collectArticle}
         size={23}
         mLeft={2}
         mTop={18}
@@ -26,7 +28,7 @@ const ArticleSticker: FC<TProps> = ({ show, article }) => {
       />
       <IconButton
         path="article/share-solid.svg"
-        onClick={() => shareTo()}
+        onClick={shareTo}
         size={20}
         mLeft={4}
         mTop={12}
diff --git a/src/containers/tool/ArticleSticker/logic.ts b/src/containers/tool/ArticleSticker/logic.ts
index 779b97bda..810d71edf 100755
--- a/src/containers/tool/ArticleSticker/logic.ts
+++ b/src/containers/tool/ArticleSticker/logic.ts
@@ -1,7 +1,8 @@
 import { useEffect } from 'react'
 // import { } from 'ramda'
 
-import { buildLog } from '@/utils'
+import { EVENT } from '@/constant'
+import { buildLog, send } from '@/utils'
 // import S from './service'
 import type { TStore } from './store'
 
@@ -17,6 +18,12 @@ export const toggleTocMenu = (): void => {
   store.mark({ isTocMenuOpened, isLeftStickerLocked })
 }
 
+export const collectArticle = (): void => {
+  send(EVENT.SET_FAVORITE_CONTENT, {
+    data: { thread: store.activeThread },
+  })
+}
+
 // ###############################
 // init & uninit handlers
 // ###############################
diff --git a/src/containers/tool/CollectionFolder/CategoryCardList.tsx b/src/containers/tool/CollectionFolder/CategoryCardList.tsx
new file mode 100755
index 000000000..a211ad755
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/CategoryCardList.tsx
@@ -0,0 +1,48 @@
+import { FC, memo } from 'react'
+
+import type { TCollectionFolder, TPagedCollectionFolder } from '@/spec'
+import { cutRest } from '@/utils'
+
+import Folder from '@/components/Folder'
+import Pagi from '@/components/Pagi'
+
+import { Wrapper, CardListWrapper } from './styles/category_card_list'
+import { loadCategories, switchToUpdater } from './logic'
+
+type TProps = {
+  onSelect: (collection: TCollectionFolder) => void
+  data: TPagedCollectionFolder
+}
+
+const CategoryCardList: FC<TProps> = ({
+  data: { entries, pageNumber, pageSize, totalCount },
+  onSelect,
+}) => {
+  return (
+    <Wrapper>
+      <CardListWrapper>
+        {entries.map((cat) => (
+          <Folder
+            key={cat.id}
+            title={cutRest(cat.title, 10)}
+            total={cat.totalCount}
+            updatedAt={cat.updatedAt}
+            onEdit={() => switchToUpdater(cat)}
+            onSelect={() => onSelect(cat)}
+            editable
+          />
+        ))}
+      </CardListWrapper>
+
+      <Pagi
+        margin={{ left: '-20px' }}
+        pageNumber={pageNumber}
+        pageSize={pageSize}
+        totalCount={totalCount}
+        onChange={loadCategories}
+      />
+    </Wrapper>
+  )
+}
+
+export default memo(CategoryCardList)
diff --git a/src/containers/tool/CollectionFolder/Creator.tsx b/src/containers/tool/CollectionFolder/Creator.tsx
new file mode 100755
index 000000000..4d1185fcd
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/Creator.tsx
@@ -0,0 +1,101 @@
+import { FC, memo } from 'react'
+
+import type { TCollectionFolder } from '@/spec'
+import { ICON_CMD } from '@/config'
+import { buildLog } from '@/utils'
+
+import { Radio } from '@/components/Switcher'
+import Input from '@/components/Input'
+import { Button } from '@/components/Buttons'
+
+import { Space } from '@/components/Common'
+import SectionLabel from '@/components/SectionLabel'
+
+import {
+  Wrapper,
+  EditWrapper,
+  FormItemWrapper,
+  FormLabel,
+  FormInput,
+  RadiosWrapper,
+  Footer,
+} from './styles/editor'
+
+import {
+  categoryOnChange,
+  privateOnChange,
+  onCategoryCreate,
+  onModalClose,
+} from './logic'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:FavoritesCats:Creator')
+
+type TProps = {
+  data: TCollectionFolder
+  show: boolean
+  hasLockAuth: boolean
+}
+
+const Creator: FC<TProps> = ({ data, show, hasLockAuth }) => (
+  <Wrapper show={show} className="normal-form">
+    <SectionLabel title="创建收藏夹" iconSrc={`${ICON_CMD}/edit.svg`} />
+    <EditWrapper>
+      <FormItemWrapper>
+        <FormLabel>标题</FormLabel>
+        <FormInput>
+          <Input
+            placeholder="收藏夹标题 #必填#"
+            value={data.title}
+            onChange={categoryOnChange('title')}
+          />
+        </FormInput>
+      </FormItemWrapper>
+      <FormItemWrapper>
+        <FormLabel>描述</FormLabel>
+        <FormInput>
+          <Input
+            value={data.desc}
+            onChange={categoryOnChange('desc')}
+            placeholder="收藏什么的？"
+            behavior="textarea"
+          />
+        </FormInput>
+      </FormItemWrapper>
+
+      {hasLockAuth && (
+        <FormItemWrapper>
+          <FormLabel>隐私</FormLabel>
+          <RadiosWrapper>
+            <Radio
+              items={[
+                {
+                  value: '公开',
+                  key: false,
+                },
+                {
+                  value: '不公开',
+                  key: true,
+                  dimOnActive: true,
+                },
+              ]}
+              activeKey={data.private}
+              onChange={privateOnChange}
+            />
+          </RadiosWrapper>
+        </FormItemWrapper>
+      )}
+    </EditWrapper>
+    <Footer>
+      <Button type="primary" ghost onClick={onModalClose}>
+        取消
+      </Button>
+      <Space right={10} />
+      <Button type="primary" onClick={onCategoryCreate}>
+        保存
+      </Button>
+    </Footer>
+  </Wrapper>
+)
+
+export default memo(Creator)
diff --git a/src/containers/tool/CollectionFolder/Setter.tsx b/src/containers/tool/CollectionFolder/Setter.tsx
new file mode 100755
index 000000000..e6807ba20
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/Setter.tsx
@@ -0,0 +1,66 @@
+import { FC, memo } from 'react'
+import { TID } from '@/spec'
+
+import { Button } from '@/components/Buttons'
+import { Space } from '@/components/Common'
+import Folder from '@/components/Folder'
+
+import {
+  Wrapper,
+  Header,
+  Artiment,
+  ListWrapper,
+  FolderWrapper,
+  Footer,
+} from './styles/setter'
+
+import { setContent, unSetContent, onSetterCreateCat } from './logic'
+
+type TProps = {
+  show: boolean
+  selectedId: TID
+}
+
+const Setter: FC<TProps> = ({ show, selectedId }) => (
+  <Wrapper show={show}>
+    <Header>
+      添加<Artiment>某篇文章或评论</Artiment>到收藏夹
+    </Header>
+    <ListWrapper>
+      <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 />
+      </FolderWrapper>
+      <FolderWrapper>
+        <Folder lock />
+      </FolderWrapper>
+    </ListWrapper>
+    <Footer>
+      选择要收入的收藏夹，或者
+      <Space right={10} />
+      <Button type="primary" onClick={onSetterCreateCat} size="small" ghost>
+        创建新收藏夹
+      </Button>
+    </Footer>
+  </Wrapper>
+)
+
+export default memo(Setter)
diff --git a/src/containers/tool/CollectionFolder/Updater.tsx b/src/containers/tool/CollectionFolder/Updater.tsx
new file mode 100755
index 000000000..83af6c235
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/Updater.tsx
@@ -0,0 +1,112 @@
+import { FC, memo } from 'react'
+
+import type { TCollectionFolder } from '@/spec'
+import { ICON_CMD } from '@/config'
+import { buildLog } from '@/utils'
+
+import { Radio } from '@/components/Switcher'
+import Input from '@/components/Input'
+import { Button } from '@/components/Buttons'
+
+import Tooltip from '@/components/Tooltip'
+import { Space } from '@/components/Common'
+import SectionLabel from '@/components/SectionLabel'
+
+import {
+  Wrapper,
+  EditWrapper,
+  FormItemWrapper,
+  FormLabel,
+  FormInput,
+  RadiosWrapper,
+  Footer,
+} from './styles/editor'
+
+import {
+  categoryOnChange,
+  privateOnChange,
+  onCategoryUpdate,
+  onCategoryDelete,
+} from './logic'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:Favorites:Updater')
+
+type TProps = {
+  data: TCollectionFolder
+  show: boolean
+  hasLockAuth: boolean
+}
+const Updater: FC<TProps> = ({ data, show, hasLockAuth }) => (
+  <Wrapper show={show} className="normal-form">
+    <SectionLabel
+      title={`编辑收藏夹 - ${data.title}`}
+      iconSrc={`${ICON_CMD}/edit.svg`}
+    />
+    <EditWrapper>
+      <FormItemWrapper>
+        <FormLabel>标题</FormLabel>
+        <FormInput>
+          <Input
+            placeholder="收藏夹标题"
+            value={data.title}
+            onChange={categoryOnChange('title')}
+          />
+        </FormInput>
+      </FormItemWrapper>
+      <FormItemWrapper>
+        <FormLabel>描述</FormLabel>
+        <FormInput>
+          <Input
+            value={data.desc}
+            onChange={categoryOnChange('desc')}
+            placeholder="收藏什么的？"
+            behavior="textarea"
+          />
+        </FormInput>
+      </FormItemWrapper>
+
+      {hasLockAuth && (
+        <FormItemWrapper>
+          <FormLabel>隐私</FormLabel>
+          <RadiosWrapper>
+            <Radio
+              items={[
+                {
+                  value: '公开',
+                  key: false,
+                },
+                {
+                  value: '不公开',
+                  key: true,
+                  dimOnActive: true,
+                },
+              ]}
+              activeKey={data.private}
+              onChange={privateOnChange}
+            />
+          </RadiosWrapper>
+        </FormItemWrapper>
+      )}
+    </EditWrapper>
+    <Footer>
+      <Tooltip
+        content="删除收藏夹及包含的内容，是否继续?"
+        trigger="click"
+        hideOnClick={false}
+        // behavior="confirm"
+        // onConfirm={onCategoryDelete}
+      >
+        <Button type="red" ghost>
+          删除
+        </Button>
+      </Tooltip>
+      <Space right={10} />
+      <Button type="primary" onClick={onCategoryUpdate}>
+        保存
+      </Button>
+    </Footer>
+  </Wrapper>
+)
+
+export default memo(Updater)
diff --git a/src/containers/tool/CollectionFolder/index.tsx b/src/containers/tool/CollectionFolder/index.tsx
new file mode 100755
index 000000000..cdd938445
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/index.tsx
@@ -0,0 +1,100 @@
+//
+
+/*
+ *
+ * CollectionFolder
+ *
+ */
+
+import { FC, Fragment } from 'react'
+
+import { pluggedIn, buildLog } from '@/utils'
+import { ICON_CMD } from '@/config'
+
+import type { TStore } from './store'
+
+import Modal from '@/components/Modal'
+import SectionLabel from '@/components/SectionLabel'
+
+import Creator from './Creator'
+import Updater from './Updater'
+import Setter from './Setter'
+
+import { Wrapper, AdderWrapper, AdderText, AdderIcon } from './styles'
+import { useInit, onModalClose, changeViewTo } from './logic'
+
+/* eslint-disable-next-line */
+const log = buildLog('C:CollectionFolder')
+
+type TProps = {
+  collectionFolder?: TStore
+  testid?: string
+  onSelect?: () => void
+}
+
+const CollectionFolderContainer: FC<TProps> = ({
+  collectionFolder: store,
+  testid = 'collection-folder',
+  onSelect = log,
+}) => {
+  useInit(store)
+
+  const {
+    viewingData,
+    displayMode,
+    isCreatorView,
+    isUpdaterView,
+    isSetterView,
+    showModal,
+    editCategoryData,
+    pagedCategoriesData,
+    isSelfViewing,
+    hasLockAuth,
+  } = store
+
+  const { entries } = pagedCategoriesData
+
+  return (
+    <Fragment>
+      {displayMode === 'list' && (
+        <SectionLabel
+          title="收藏夹"
+          iconSrc={`${ICON_CMD}/folder.svg`}
+          addonNode={
+            <>
+              {isSelfViewing && (
+                <AdderWrapper onClick={changeViewTo('creator')}>
+                  <AdderIcon src={`${ICON_CMD}/add_circle.svg`} />
+                  <AdderText>创建</AdderText>
+                </AdderWrapper>
+              )}
+            </>
+          }
+        />
+      )}
+      <Modal width="500px" show={showModal} showCloseBtn onClose={onModalClose}>
+        <Wrapper>
+          <Setter
+            // entries={entries}
+            show={isSetterView}
+            // selectedId={viewingData.favoritedCategoryId}
+            selectedId="1"
+            // hasLockAuth={hasLockAuth}
+          />
+          <Creator
+            data={editCategoryData}
+            show={isCreatorView}
+            hasLockAuth={hasLockAuth}
+          />
+          <Updater
+            data={editCategoryData}
+            show={isUpdaterView}
+            hasLockAuth={hasLockAuth}
+          />
+        </Wrapper>
+      </Modal>
+    </Fragment>
+  )
+}
+
+export default pluggedIn(CollectionFolderContainer) as FC<TProps>
diff --git a/src/containers/tool/CollectionFolder/logic.ts b/src/containers/tool/CollectionFolder/logic.ts
new file mode 100755
index 000000000..3acdffed4
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/logic.ts
@@ -0,0 +1,238 @@
+import { useEffect } from 'react'
+import { curry, toUpper } from 'ramda'
+
+import { PAGE_SIZE } from '@/config'
+import { EVENT, ERR } from '@/constant'
+import { asyncSuit, buildLog, send, errRescue, updateEditing } from '@/utils'
+
+import type { TStore } from './store'
+import S from './schema'
+
+/* eslint-disable-next-line */
+const log = buildLog('L:FavoritesCats')
+
+const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
+const sr71$ = new SR71({
+  /* @ts-ignore */
+  receive: [EVENT.SET_FAVORITE_CONTENT],
+})
+
+let sub$ = null
+let store = null
+
+// export const categoryOnChange = (part, e) => updateEditing(store, part, e)
+export const categoryOnChange = curry(
+  (part, e) => updateEditing(store, part, e),
+  // store.updateEditing({ [part]: e.target.value })
+)
+
+export const privateOnChange = (item) => {
+  const { editCategoryData } = store
+
+  const editCategory = {
+    ...editCategoryData,
+    private: item.key,
+  }
+
+  store.mark({ editCategory })
+}
+
+export const onCategoryCreate = () => {
+  if (!store.validator('publish')) return false
+
+  sr71$.mutate(S.createFavoriteCategory, store.editCategoryData)
+}
+
+export const onCategoryUpdate = () => {
+  if (!store.validator('publish')) return false
+  sr71$.mutate(S.updateFavoriteCategory, store.editCategoryData)
+}
+
+export const onCategoryDelete = () => {
+  const { id } = store.editCategoryData
+  sr71$.mutate(S.deleteFavoriteCategory, { id })
+}
+
+export const loadCategories = (page = 1) => {
+  const userId = store.viewingUser.id
+
+  markLoading(true)
+  sr71$.query(S.favoriteCategories, {
+    userId,
+    filter: { page, size: PAGE_SIZE.M },
+  })
+}
+
+export const switchToUpdater = (editCategory) => {
+  store.mark({ editCategory })
+  store.changeViewTo('updater')
+}
+
+/* eslint-disable-next-line */
+export const changeViewTo = curry((view, e) => store.changeViewTo(view))
+
+export const onSetterCreateCat = () => {
+  store.mark({ createfromSetter: true })
+  store.changeViewTo('creator')
+}
+
+export const onModalClose = () => {
+  if (store.createfromSetter) {
+    store.mark({ createfromSetter: false })
+    return store.changeViewTo('setter')
+  }
+
+  store.mark({ showModal: false })
+  store.cleanEditData()
+}
+
+export const setContent = (categoryId) => {
+  if (store.doing) return false
+
+  const { id } = store.viewingData
+  const { thread } = store
+
+  const args = {
+    id,
+    thread: toUpper(thread),
+    categoryId,
+  }
+  store.mark({ doing: true })
+  sr71$.mutate(S.setFavorites, args)
+}
+
+export const unSetContent = (categoryId) => {
+  if (store.doing) return false
+
+  const { id } = store.viewingData
+  const { thread } = store
+
+  const args = {
+    id,
+    thread: toUpper(thread),
+    categoryId,
+  }
+  store.mark({ doing: true })
+  sr71$.mutate(S.unsetFavorites, args)
+}
+
+const markLoading = (maybe = true) =>
+  store.mark({ loading: maybe, doing: false })
+
+// ###############################
+// Data & Error handlers
+// ###############################
+
+const DataSolver = [
+  {
+    match: asyncRes('favoriteCategories'),
+    action: ({ favoriteCategories: pagedCategories }) => {
+      // const curView = pagedUsers.totalCount === 0 ? TYPE.RESULT_EMPTY : TYPE.RESULT
+      markLoading(false)
+      store.mark({ pagedCategories })
+      // store.closeDrawer()
+    },
+  },
+  {
+    match: asyncRes('createFavoriteCategory'),
+    action: () => {
+      // createfromSetter
+      loadCategories()
+      if (store.createfromSetter) {
+        store.mark({ createfromSetter: false })
+        return store.changeViewTo('setter')
+      }
+      return onModalClose()
+    },
+  },
+  {
+    match: asyncRes('updateFavoriteCategory'),
+    action: () => {
+      onModalClose()
+      loadCategories()
+    },
+  },
+  {
+    match: asyncRes('deleteFavoriteCategory'),
+    action: () => {
+      onModalClose()
+      loadCategories()
+    },
+  },
+  {
+    match: asyncRes('setFavorites'),
+    action: () => {
+      loadCategories()
+      /* store.updateCategory(cat) */
+      const { id } = store.viewingData
+      const { thread } = store
+      send(EVENT.REFRESH_REACTIONS, { data: { id, thread } })
+      store.mark({ doing: false })
+    },
+  },
+  {
+    match: asyncRes('unsetFavorites'),
+    action: () => {
+      loadCategories()
+      /* store.updateCategory(cat) */
+      const { id } = store.viewingData
+      const { thread } = store
+      send(EVENT.REFRESH_REACTIONS, { data: { id, thread } })
+      store.mark({ doing: false })
+    },
+  },
+  {
+    match: asyncRes(EVENT.SET_FAVORITE_CONTENT),
+    action: (e) => {
+      const { thread } = e[EVENT.SET_FAVORITE_CONTENT].data
+      store.changeViewTo('setter')
+      store.mark({ thread, createfromSetter: true })
+    },
+  },
+]
+
+const ErrSolver = [
+  {
+    match: asyncErr(ERR.GRAPHQL),
+    action: ({ details }) => {
+      store.changesetErr({ title: '已经存在了', msg: details[0].detail })
+      markLoading(false)
+    },
+  },
+  {
+    match: asyncErr(ERR.TIMEOUT),
+    action: ({ details }) => {
+      markLoading(false)
+      errRescue({ type: ERR.TIMEOUT, details, path: 'FavoritesCats' })
+    },
+  },
+  {
+    match: asyncErr(ERR.NETWORK),
+    action: () => {
+      markLoading(false)
+      errRescue({ type: ERR.NETWORK, path: 'FavoritesCats' })
+    },
+  },
+]
+
+const load = (): void => {
+  return loadCategories()
+}
+
+// ###############################
+// init & uninit
+// ###############################
+export const useInit = (_store: TStore): void => {
+  useEffect(() => {
+    store = _store
+    // log('effect init')
+    sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+    load()
+
+    return () => {
+      // log('effect uninit')
+      sr71$.stop()
+      sub$.unsubscribe()
+    }
+  }, [_store])
+}
diff --git a/src/containers/tool/CollectionFolder/schema.ts b/src/containers/tool/CollectionFolder/schema.ts
new file mode 100755
index 000000000..d90dec241
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/schema.ts
@@ -0,0 +1,80 @@
+import gql from 'graphql-tag'
+
+const favoriteCategories = gql`
+  query($userId: ID, $filter: CommonPagedFilter!) {
+    favoriteCategories(userId: $userId, filter: $filter) {
+      entries {
+        id
+        title
+        desc
+        totalCount
+        private
+        updatedAt
+      }
+      totalPages
+      totalCount
+      pageSize
+      pageNumber
+    }
+  }
+`
+
+const createFavoriteCategory = gql`
+  mutation($title: String!, $desc: String, $private: Boolean) {
+    createFavoriteCategory(title: $title, desc: $desc, private: $private) {
+      id
+      title
+    }
+  }
+`
+const updateFavoriteCategory = gql`
+  mutation($id: ID!, $title: String, $desc: String, $private: Boolean) {
+    updateFavoriteCategory(
+      id: $id
+      title: $title
+      desc: $desc
+      private: $private
+    ) {
+      id
+      title
+      desc
+      private
+    }
+  }
+`
+const deleteFavoriteCategory = gql`
+  mutation($id: ID!) {
+    deleteFavoriteCategory(id: $id) {
+      done
+    }
+  }
+`
+
+const setFavorites = gql`
+  mutation($id: ID!, $thread: CmsThread, $categoryId: ID!) {
+    setFavorites(id: $id, thread: $thread, categoryId: $categoryId) {
+      id
+      totalCount
+    }
+  }
+`
+
+const unsetFavorites = gql`
+  mutation($id: ID!, $thread: CmsThread, $categoryId: ID!) {
+    unsetFavorites(id: $id, thread: $thread, categoryId: $categoryId) {
+      id
+      totalCount
+    }
+  }
+`
+
+const schema = {
+  favoriteCategories,
+  createFavoriteCategory,
+  updateFavoriteCategory,
+  deleteFavoriteCategory,
+  setFavorites,
+  unsetFavorites,
+}
+
+export default schema
diff --git a/src/containers/tool/CollectionFolder/store.ts b/src/containers/tool/CollectionFolder/store.ts
new file mode 100755
index 000000000..9c50b1eba
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/store.ts
@@ -0,0 +1,193 @@
+/*
+ * CollectionFolder store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+import { merge } from 'ramda'
+
+import type { TUser, TRootStore, TViewing } from '@/spec'
+import { THREAD } from '@/constant'
+import { markStates, buildLog, stripMobx, changeset } from '@/utils'
+
+import {
+  FavoriteCategory,
+  PagedFavoriteCategories,
+  emptyPagiData,
+} from '@/model'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:CollectionFolder')
+
+const emptyCat = {
+  id: '',
+  title: '',
+  desc: '',
+  private: false,
+}
+
+const CollectionFolder = T.model('CollectionFolder', {
+  displayMode: T.optional(
+    T.enumeration('displayMode', ['list', 'hide']),
+    'hide',
+  ),
+  pagedCategories: T.optional(PagedFavoriteCategories, emptyPagiData),
+  editCategory: T.optional(FavoriteCategory, emptyCat),
+  /* curView: T.optional(T.enumeration('curView', ['box', 'list']), 'box'), */
+  showModal: T.optional(T.boolean, false),
+  showUpdater: T.optional(T.boolean, false),
+  showCreator: T.optional(T.boolean, false),
+  showSetter: T.optional(T.boolean, false),
+  // open creator from setter, so we can go back to setter based on this state
+  createfromSetter: T.optional(T.boolean, false),
+  thread: T.optional(
+    T.enumeration([THREAD.POST, THREAD.JOB, THREAD.REPO]),
+    THREAD.POST,
+  ),
+  loading: T.optional(T.boolean, false),
+  doing: T.optional(T.boolean, false),
+})
+  .views((self) => ({
+    get isLogin(): boolean {
+      const root = getParent(self) as TRootStore
+
+      return root.account.isLogin
+    },
+    get viewingUser(): TUser {
+      const root = getParent(self) as TRootStore
+      return stripMobx(root.viewing.user)
+    },
+    get isSelfViewing(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.viewing.isSelfViewing
+    },
+    // NOTE: can't not use root's viewingData because the
+    // activeThread is not right on user's page
+    // and it's passible set/unset favrites on user's page
+    get viewingData(): TViewing {
+      const root = getParent(self) as TRootStore
+      switch (self.thread) {
+        case THREAD.JOB:
+          return stripMobx(root.viewing.job)
+
+        case THREAD.REPO:
+          return stripMobx(root.viewing.repo)
+
+        default:
+          return stripMobx(root.viewing.post)
+      }
+    },
+
+    get editCategoryData() {
+      return stripMobx(self.editCategory)
+    },
+    get pagedCategoriesData() {
+      return stripMobx(self.pagedCategories)
+    },
+    get isCreatorView(): boolean {
+      const { showModal, showUpdater, showCreator, showSetter } = self
+      return showModal && showCreator && !showUpdater && !showSetter
+    },
+    get isUpdaterView(): boolean {
+      const { showModal, showUpdater, showCreator, showSetter } = self
+      return showModal && showUpdater && !showCreator && !showSetter
+    },
+    get isSetterView(): boolean {
+      const { showModal, showUpdater, showCreator, showSetter } = self
+      return showModal && showSetter && !showCreator && !showUpdater
+    },
+    get hasLockAuth(): boolean {
+      const slf = self as TStore
+      return slf.isMemberOf('seniorMember') || slf.isMemberOf('sponsorMember')
+    },
+  }))
+  .actions((self) => ({
+    authWarning(options): void {
+      const root = getParent(self) as TRootStore
+      root.authWarning(options)
+    },
+    isMemberOf(type): boolean {
+      const root = getParent(self) as TRootStore
+      return root.isMemberOf(type)
+    },
+    changesetErr(options): void {
+      const root = getParent(self) as TRootStore
+      root.changesetErr(merge({ position: 'topCenter' }, options))
+    },
+    updateEditing(sobj): void {
+      const slf = self as TStore
+      const editCategory = merge(slf.editCategoryData, { ...sobj })
+      slf.mark({ editCategory })
+    },
+    validator(type): boolean {
+      const slf = self as TStore
+      switch (type) {
+        case 'publish': {
+          const opt = { msg: '不能为空 (请填写 #必填# 字段)' }
+          const result = changeset(slf.editCategoryData)
+            /* @ts-ignore */
+            .exist({ title: '收藏夹名称' }, slf.changesetErr, opt)
+            .done()
+
+          return result.passed
+        }
+        default: {
+          return false
+        }
+      }
+    },
+    /*
+    updateCategory(cat) {
+      const { id } = cat
+      const pagedCategoriesData = R.clone(self.pagedCategoriesData)
+      const { entries } = pagedCategoriesData
+      const index = R.findIndex(R.propEq('id', id), entries)
+
+      if (index >= 0) {
+        entries[index] = R.merge(entries[index], { ...cat })
+        self.pagedCategories = R.merge(pagedCategoriesData, { entries })
+      }
+    },
+    */
+    changeViewTo(view = 'creator'): void {
+      // if (!self.isLogin) return self.authWarning()
+      const slf = self as TStore
+
+      switch (view) {
+        case 'setter':
+          return slf.mark({
+            showModal: true,
+            showSetter: true,
+            showUpdater: false,
+            showCreator: false,
+          })
+
+        case 'updater':
+          return slf.mark({
+            showModal: true,
+            showUpdater: true,
+            showCreator: false,
+            showSetter: false,
+          })
+
+        default:
+          return slf.mark({
+            showModal: true,
+            showCreator: true,
+            showUpdater: false,
+            showSetter: false,
+          })
+      }
+    },
+    cleanEditData(): void {
+      const slf = self as TStore
+      /* @ts-ignore */
+      slf.editCategory = emptyCat
+    },
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof CollectionFolder>
+export default CollectionFolder
diff --git a/src/containers/tool/CollectionFolder/styles/box_view.ts b/src/containers/tool/CollectionFolder/styles/box_view.ts
new file mode 100755
index 000000000..7a318b739
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/box_view.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+// import Img from '@/Img'
+import { css } from '@/utils'
+
+export const Wrapper = styled.div``
+export const MsgWrapper = styled.div`
+  ${css.flex('justify-center')};
+  width: 90%;
+`
diff --git a/src/containers/tool/CollectionFolder/styles/category_card_list.ts b/src/containers/tool/CollectionFolder/styles/category_card_list.ts
new file mode 100755
index 000000000..2e1cd0b1a
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/category_card_list.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+import { css } from '@/utils'
+
+export const Wrapper = styled.div`
+  margin-top: 30px;
+`
+export const CardListWrapper = styled.div`
+  ${css.flex()};
+  flex-wrap: wrap;
+`
diff --git a/src/containers/tool/CollectionFolder/styles/editor.ts b/src/containers/tool/CollectionFolder/styles/editor.ts
new file mode 100755
index 000000000..9d4d5c4b1
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/editor.ts
@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+import type { TActive } from '@/spec'
+import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div<TActive>`
+  display: ${({ show }) => (show ? 'flex' : 'none')};
+  flex-direction: column;
+  padding: 15px 25px;
+`
+export const EditWrapper = styled.div`
+  width: 100%;
+  margin-left: 3px;
+  padding-right: 5px;
+  margin-top: 20px;
+`
+export const FormItemWrapper = styled.div`
+  ${css.flex()};
+  margin-bottom: 20px;
+`
+export const FormLabel = styled.div`
+  font-size: 0.9rem;
+  color: ${theme('form.label')};
+  margin-right: 15px;
+  margin-top: 5px;
+  width: auto;
+  text-align: right;
+`
+export const FormInput = styled.div`
+  flex-grow: 1;
+`
+export const RadiosWrapper = styled.div`
+  margin-top: 6px;
+`
+export const Footer = styled.div`
+  ${css.flex('align-end', 'justify-center')};
+  margin-top: 30px;
+  margin-bottom: 10px;
+`
diff --git a/src/containers/tool/CollectionFolder/styles/index.ts b/src/containers/tool/CollectionFolder/styles/index.ts
new file mode 100755
index 000000000..e6e050448
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/index.ts
@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+
+import Img from '@/Img'
+import { theme, animate, css } from '@/utils'
+import { MODAL_MIN_HEIGHT } from './metric'
+
+export const Wrapper = styled.div`
+  width: 100%;
+  min-height: ${MODAL_MIN_HEIGHT};
+`
+export const AdderWrapper = styled.div`
+  ${css.flex('justify-end')};
+  width: 80px;
+  text-align: right;
+  &:active {
+    animation: ${animate.pulse} 0.4s linear;
+  }
+`
+export const AdderText = styled.div`
+  font-size: 0.9rem;
+  color: ${theme('tabs.header')};
+  margin-top: -2px;
+  &:hover {
+    cursor: pointer;
+    font-weight: bold;
+  }
+  transition: color 0.3s linear;
+`
+export const AdderIcon = styled(Img)`
+  fill: ${theme('tabs.header')};
+  width: 17px;
+  height: 17px;
+  margin-right: 3px;
+  &:hover {
+    cursor: pointer;
+    fill: ${theme('tabs.headerActive')};
+  }
+`
diff --git a/src/containers/tool/CollectionFolder/styles/metric.ts b/src/containers/tool/CollectionFolder/styles/metric.ts
new file mode 100644
index 000000000..9b1007e2d
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/metric.ts
@@ -0,0 +1,2 @@
+export const MODAL_MIN_HEIGHT = '55vh'
+export const holder = 1
diff --git a/src/containers/tool/CollectionFolder/styles/setter.ts b/src/containers/tool/CollectionFolder/styles/setter.ts
new file mode 100755
index 000000000..c81d331a6
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/styles/setter.ts
@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+
+import type { TActive } from '@/spec'
+import Img from '@/Img'
+import { theme, css } from '@/utils'
+
+import { MODAL_MIN_HEIGHT } from './metric'
+
+export const Wrapper = styled.div<TActive>`
+  display: ${({ show }) => (show ? 'flex' : 'none')};
+  flex-direction: column;
+
+  height: 100%;
+  min-height: ${MODAL_MIN_HEIGHT};
+`
+export const Header = styled.div`
+  ${css.flex('align-end')};
+  color: ${theme('thread.articleDigest')};
+  background: ${theme('modal.bg')};
+  padding: 20px;
+  padding-top: 15px;
+  padding-bottom: 10px;
+  font-size: 14px;
+  height: 50px;
+  width: 100%;
+  z-index: 1;
+`
+export const Artiment = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
+`
+export const ListWrapper = styled.div`
+  ${css.flex()};
+  flex-wrap: wrap;
+  flex-grow: 1;
+  padding-top: 35px;
+  padding-right: 15px;
+  padding-left: 0;
+  padding-bottom: 0;
+  background: ${theme('modal.bg')};
+  filter: ${theme('modal.subPanelShadow')};
+`
+export const FolderWrapper = styled.div`
+  margin-left: 20px;
+  margin-bottom: 30px;
+`
+export const Footer = styled.div`
+  ${css.flex('justify-start')};
+  font-size: 14px;
+  color: ${theme('thread.articleDigest')};
+  background: ${theme('modal.subPanel')};
+  padding: 15px 20px;
+`
diff --git a/src/containers/tool/CollectionFolder/tests/index.test.js b/src/containers/tool/CollectionFolder/tests/index.test.js
new file mode 100755
index 000000000..56e76d2ec
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/tests/index.test.js
@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import CollectionFolder from '../index'
+
+describe('TODO <CollectionFolder />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})
diff --git a/src/containers/tool/CollectionFolder/tests/store.test.js b/src/containers/tool/CollectionFolder/tests/store.test.js
new file mode 100755
index 000000000..66d9dec72
--- /dev/null
+++ b/src/containers/tool/CollectionFolder/tests/store.test.js
@@ -0,0 +1,10 @@
+/*
+ * CollectionFolder store test
+ *
+ */
+
+// import CollectionFolder from '../index'
+
+it('TODO: store test CollectionFolder', () => {
+  expect(1 + 1).toBe(2)
+})
diff --git a/src/containers/tool/FavoritesCats/store.js b/src/containers/tool/FavoritesCats/store.js
index c7d6539e2..95570d446 100755
--- a/src/containers/tool/FavoritesCats/store.js
+++ b/src/containers/tool/FavoritesCats/store.js
@@ -139,7 +139,7 @@ const FavoritesCats = T.model('FavoritesCats', {
     },
     */
     changeViewTo(view = 'creator') {
-      if (!self.isLogin) return self.authWarning()
+      // if (!self.isLogin) return self.authWarning()
 
       switch (view) {
         case 'setter':
diff --git a/src/containers/unit/ArticleViewerHeader/index.js b/src/containers/unit/ArticleViewerHeader/index.js
index 9e3135cb7..c4e9c0147 100755
--- a/src/containers/unit/ArticleViewerHeader/index.js
+++ b/src/containers/unit/ArticleViewerHeader/index.js
@@ -10,7 +10,6 @@ import { values } from 'ramda'
 import { THREAD } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
-import FavoritesCats from '@/containers/tool/FavoritesCats'
 import Maybe from '@/components/Maybe'
 
 import UserInfo from './UserInfo'
@@ -42,7 +41,6 @@ const ArticleViewerHeaderContainer = ({
 
   return (
     <Wrapper>
-      <FavoritesCats />
       <Maybe test={author && !company}>
         <UserInfo author={author} insertedAt={data.insertedAt} />
       </Maybe>
diff --git a/src/spec/article.ts b/src/spec/article.ts
index bde9e64e0..43bd53d4a 100644
--- a/src/spec/article.ts
+++ b/src/spec/article.ts
@@ -74,3 +74,20 @@ export type TArticleFilter = {
 }
 
 export type TUpvoteLayout = 'default' | 'comment' | 'article' | 'works-article'
+
+export type TCollectionFolder = {
+  id: TID
+  title: string
+  desc?: string
+  totalCount: number
+  private: boolean
+  updatedAt: string
+}
+
+export type TPagedCollectionFolder = {
+  entries: TCollectionFolder[]
+  totalCount: number
+  pageNumber: number
+  pageSize: number
+  totalPages: number
+}
diff --git a/src/spec/index.ts b/src/spec/index.ts
index 656c48338..25e858d9f 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -48,6 +48,8 @@ export type {
 export type { TGQLError } from './graphql'
 
 export type {
+  TCollectionFolder,
+  TPagedCollectionFolder,
   TArticle,
   TPost,
   TBlog,
diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts
index a561b8f77..11c14d4ee 100755
--- a/src/stores/RootStore/index.ts
+++ b/src/stores/RootStore/index.ts
@@ -88,6 +88,7 @@ import {
   CoolGuideContentStore,
 
   // GEN: IMPORT SUBSTORE
+  CollectionFolderStore,
   ShareStore,
   ArticleContentStore,
   ArticleViewerStore,
@@ -202,6 +203,7 @@ const rootStore = T.model({
   coolGuideContent: T.optional(CoolGuideContentStore, {}),
 
   // GEN: PLUG SUBSTORE TO ROOTSTORE
+  collectionFolder: T.optional(CollectionFolderStore, {}),
   share: T.optional(ShareStore, {}),
   articleContent: T.optional(ArticleContentStore, {}),
   articleViewer: T.optional(ArticleViewerStore, {}),
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 2f4587efc..a83ff0e89 100755
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -94,6 +94,7 @@ export { default as CommunityEditorStore } from '@/containers/editor/CommunityEd
 export { default as WorksEditorStore } from '@/containers/editor/WorksEditor/store'
 
 // GEN: EXPORT CONTAINERS STORE HERE
+export { default as CollectionFolderStore } from '@/containers/tool/CollectionFolder/store'
 export { default as ShareStore } from '@/containers/tool/Share/store'
 export { default as ArticleContentStore } from '@/containers/content/ArticleContent/store'
 export { default as ArticleViewerStore } from '@/containers/viewer/ArticleViewer/store'

From 18f55f9ea28b7e86ad2893e37163d6ade53c7922 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 27 Jul 2021 23:59:45 +0800
Subject: [PATCH 3/8] feat(collection-folder): remove old FavoritesCats

---
 .../digest/ArticleDigest/MobileView/index.tsx |   3 -
 .../tool/CollectionFolder/Creator.tsx         |   2 +-
 src/containers/tool/CollectionFolder/logic.ts |   6 +-
 src/containers/tool/FavoritesCats/BoxView.js  |  23 --
 .../tool/FavoritesCats/CategoryCardList.js    |  42 ----
 src/containers/tool/FavoritesCats/Creator.js  |  95 -------
 src/containers/tool/FavoritesCats/Setter.js   |  72 ------
 src/containers/tool/FavoritesCats/Updater.js  | 107 --------
 src/containers/tool/FavoritesCats/index.js    | 104 --------
 src/containers/tool/FavoritesCats/logic.js    | 237 ------------------
 src/containers/tool/FavoritesCats/schema.ts   |  80 ------
 src/containers/tool/FavoritesCats/store.js    | 178 -------------
 .../tool/FavoritesCats/styles/box_view.ts     |  10 -
 .../styles/category_card_list.ts              |  11 -
 .../tool/FavoritesCats/styles/editor.ts       |  39 ---
 .../tool/FavoritesCats/styles/index.ts        |  33 ---
 .../tool/FavoritesCats/styles/setter.ts       |  52 ----
 .../tool/FavoritesCats/tests/index.test.ts    |  10 -
 .../tool/FavoritesCats/tests/store.test.ts    |  10 -
 src/containers/user/UserFavorited/index.js    |   3 +-
 src/containers/viewer/RepoViewer/index.js     |   2 -
 src/stores/RootStore/index.ts                 |   2 -
 src/stores/index.ts                           |   1 -
 23 files changed, 5 insertions(+), 1117 deletions(-)
 delete mode 100755 src/containers/tool/FavoritesCats/BoxView.js
 delete mode 100755 src/containers/tool/FavoritesCats/CategoryCardList.js
 delete mode 100755 src/containers/tool/FavoritesCats/Creator.js
 delete mode 100755 src/containers/tool/FavoritesCats/Setter.js
 delete mode 100755 src/containers/tool/FavoritesCats/Updater.js
 delete mode 100755 src/containers/tool/FavoritesCats/index.js
 delete mode 100755 src/containers/tool/FavoritesCats/logic.js
 delete mode 100755 src/containers/tool/FavoritesCats/schema.ts
 delete mode 100755 src/containers/tool/FavoritesCats/store.js
 delete mode 100755 src/containers/tool/FavoritesCats/styles/box_view.ts
 delete mode 100755 src/containers/tool/FavoritesCats/styles/category_card_list.ts
 delete mode 100755 src/containers/tool/FavoritesCats/styles/editor.ts
 delete mode 100755 src/containers/tool/FavoritesCats/styles/index.ts
 delete mode 100755 src/containers/tool/FavoritesCats/styles/setter.ts
 delete mode 100755 src/containers/tool/FavoritesCats/tests/index.test.ts
 delete mode 100755 src/containers/tool/FavoritesCats/tests/store.test.ts

diff --git a/src/containers/digest/ArticleDigest/MobileView/index.tsx b/src/containers/digest/ArticleDigest/MobileView/index.tsx
index e81f57c66..110f75c85 100644
--- a/src/containers/digest/ArticleDigest/MobileView/index.tsx
+++ b/src/containers/digest/ArticleDigest/MobileView/index.tsx
@@ -12,8 +12,6 @@ import type { TScrollDirection } from '@/spec'
 import { useScroll } from '@/hooks'
 import { pluggedIn, buildLog } from '@/utils'
 
-import FavoritesCats from '@/containers/tool/FavoritesCats'
-
 import ArticleBaseStats from '@/components/ArticleBaseStats'
 import PublishDate from '../DesktopView/PostLayout/PublishDate'
 
@@ -44,7 +42,6 @@ const ArticleDigestContainer: FC<TProps> = ({ articleDigest: store }) => {
 
   return (
     <Wrapper>
-      <FavoritesCats />
       <InnerWrapper>
         <BannerContent>
           <Brief>
diff --git a/src/containers/tool/CollectionFolder/Creator.tsx b/src/containers/tool/CollectionFolder/Creator.tsx
index 4d1185fcd..7e0c2046c 100755
--- a/src/containers/tool/CollectionFolder/Creator.tsx
+++ b/src/containers/tool/CollectionFolder/Creator.tsx
@@ -29,7 +29,7 @@ import {
 } from './logic'
 
 /* eslint-disable-next-line */
-const log = buildLog('C:FavoritesCats:Creator')
+const log = buildLog('C:CollectionFolder:Creator')
 
 type TProps = {
   data: TCollectionFolder
diff --git a/src/containers/tool/CollectionFolder/logic.ts b/src/containers/tool/CollectionFolder/logic.ts
index 3acdffed4..fab84f1d8 100755
--- a/src/containers/tool/CollectionFolder/logic.ts
+++ b/src/containers/tool/CollectionFolder/logic.ts
@@ -9,7 +9,7 @@ import type { TStore } from './store'
 import S from './schema'
 
 /* eslint-disable-next-line */
-const log = buildLog('L:FavoritesCats')
+const log = buildLog('L:CollectionFolder')
 
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
@@ -203,14 +203,14 @@ const ErrSolver = [
     match: asyncErr(ERR.TIMEOUT),
     action: ({ details }) => {
       markLoading(false)
-      errRescue({ type: ERR.TIMEOUT, details, path: 'FavoritesCats' })
+      errRescue({ type: ERR.TIMEOUT, details, path: 'CollectionFolder' })
     },
   },
   {
     match: asyncErr(ERR.NETWORK),
     action: () => {
       markLoading(false)
-      errRescue({ type: ERR.NETWORK, path: 'FavoritesCats' })
+      errRescue({ type: ERR.NETWORK, path: 'CollectionFolder' })
     },
   },
 ]
diff --git a/src/containers/tool/FavoritesCats/BoxView.js b/src/containers/tool/FavoritesCats/BoxView.js
deleted file mode 100755
index 2d03fc28a..000000000
--- a/src/containers/tool/FavoritesCats/BoxView.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-
-import EmptyLabel from '@/components/EmptyLabel'
-import CategoryCardList from './CategoryCardList'
-import { Wrapper, MsgWrapper } from './styles/box_view'
-
-const BoxView = ({ data, onSelect }) => {
-  const { totalCount } = data
-
-  return (
-    <Wrapper>
-      {totalCount === 0 ? (
-        <MsgWrapper>
-          <EmptyLabel text="你还没有任何收藏夹" size="large" />
-        </MsgWrapper>
-      ) : (
-        <CategoryCardList data={data} onSelect={onSelect} />
-      )}
-    </Wrapper>
-  )
-}
-
-export default React.memo(BoxView)
diff --git a/src/containers/tool/FavoritesCats/CategoryCardList.js b/src/containers/tool/FavoritesCats/CategoryCardList.js
deleted file mode 100755
index 0ebfc9dfa..000000000
--- a/src/containers/tool/FavoritesCats/CategoryCardList.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-
-import { cutRest } from '@/utils'
-
-import Folder from '@/components/Folder'
-import Pagi from '@/components/Pagi'
-
-import { Wrapper, CardListWrapper } from './styles/category_card_list'
-
-import { loadCategories, switchToUpdater } from './logic'
-
-const CategoryCardList = ({
-  data: { entries, pageNumber, pageSize, totalCount },
-  onSelect,
-}) => (
-  <Wrapper>
-    <CardListWrapper>
-      {entries.map((cat) => (
-        <Folder
-          key={cat.id}
-          title={cutRest(cat.title, 10)}
-          desc={cutRest(cat.desc, 20)}
-          total={cat.totalCount}
-          updatedAt={cat.updatedAt}
-          onEdit={() => switchToUpdater(cat)}
-          onSelect={() => onSelect(cat)}
-          editable
-        />
-      ))}
-    </CardListWrapper>
-
-    <Pagi
-      margin={{ left: '-20px' }}
-      pageNumber={pageNumber}
-      pageSize={pageSize}
-      totalCount={totalCount}
-      onChange={loadCategories}
-    />
-  </Wrapper>
-)
-
-export default React.memo(CategoryCardList)
diff --git a/src/containers/tool/FavoritesCats/Creator.js b/src/containers/tool/FavoritesCats/Creator.js
deleted file mode 100755
index d3d0315db..000000000
--- a/src/containers/tool/FavoritesCats/Creator.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-import { buildLog } from '@/utils'
-
-import { Radio } from '@/components/Switcher'
-import Input from '@/components/Input'
-import { Button } from '@/components/Buttons'
-
-import { Space } from '@/components/Common'
-import SectionLabel from '@/components/SectionLabel'
-
-import {
-  Wrapper,
-  EditWrapper,
-  FormItemWrapper,
-  FormLabel,
-  FormInput,
-  RadiosWrapper,
-  Footer,
-} from './styles/editor'
-
-import {
-  categoryOnChange,
-  privateOnChange,
-  onCategoryCreate,
-  onModalClose,
-} from './logic'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:FavoritesCats:Creator')
-
-const Creator = ({ data, show, hasLockAuth }) => (
-  <Wrapper show={show} className="normal-form">
-    <SectionLabel title="创建收藏夹" iconSrc={`${ICON_CMD}/edit.svg`} />
-    <EditWrapper>
-      <FormItemWrapper>
-        <FormLabel>标题</FormLabel>
-        <FormInput>
-          <Input
-            size="default"
-            placeholder="收藏夹标题 #必填#"
-            value={data.title}
-            onChange={categoryOnChange('title')}
-          />
-        </FormInput>
-      </FormItemWrapper>
-      <FormItemWrapper>
-        <FormLabel>描述</FormLabel>
-        <FormInput>
-          <Input
-            value={data.desc}
-            onChange={categoryOnChange('desc')}
-            placeholder="收藏什么的？"
-            behavior="textarea"
-          />
-        </FormInput>
-      </FormItemWrapper>
-
-      {hasLockAuth && (
-        <FormItemWrapper>
-          <FormLabel>隐私</FormLabel>
-          <RadiosWrapper>
-            <Radio
-              items={[
-                {
-                  value: '公开',
-                  key: false,
-                },
-                {
-                  value: '不公开',
-                  key: true,
-                  dimOnActive: true,
-                },
-              ]}
-              activeKey={data.private}
-              onChange={privateOnChange}
-            />
-          </RadiosWrapper>
-        </FormItemWrapper>
-      )}
-    </EditWrapper>
-    <Footer>
-      <Button type="primary" ghost onClick={onModalClose}>
-        取消
-      </Button>
-      <Space right={10} />
-      <Button type="primary" onClick={onCategoryCreate}>
-        保存
-      </Button>
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(Creator)
diff --git a/src/containers/tool/FavoritesCats/Setter.js b/src/containers/tool/FavoritesCats/Setter.js
deleted file mode 100755
index 38838c82b..000000000
--- a/src/containers/tool/FavoritesCats/Setter.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-import { Button } from '@/components/Buttons'
-import SectionLabel from '@/components/SectionLabel'
-
-import {
-  Wrapper,
-  CatWrapper,
-  ListWrapper,
-  CatContent,
-  CatMain,
-  SetBtn,
-  CatHeader,
-  CatTitle,
-  CatDec,
-  CatCounter,
-  CatDivider,
-  Footer,
-} from './styles/setter'
-
-import { setContent, unSetContent, onSetterCreateCat } from './logic'
-
-const Setter = ({ show, entries, selectedId }) => (
-  <Wrapper show={show}>
-    <SectionLabel
-      title="添加收藏"
-      desc="选择你要添加的收藏夹"
-      iconSrc={`${ICON_CMD}/folder.svg`}
-    />
-    <ListWrapper>
-      {entries.map((cat) => (
-        <div key={cat.id}>
-          <CatWrapper>
-            <CatContent>
-              <CatMain>
-                <CatHeader>
-                  <CatTitle>{cat.title}</CatTitle>
-                </CatHeader>
-                <CatDec>{cat.desc}</CatDec>
-                <CatCounter>共 {cat.totalCount} 条内容</CatCounter>
-              </CatMain>
-              <SetBtn>
-                {selectedId === cat.id ? (
-                  <Button type="red" ghost onClick={() => unSetContent(cat.id)}>
-                    移除
-                  </Button>
-                ) : (
-                  <Button
-                    type="primary"
-                    ghost
-                    onClick={() => setContent(cat.id)}
-                  >
-                    加入
-                  </Button>
-                )}
-              </SetBtn>
-            </CatContent>
-          </CatWrapper>
-          <CatDivider />
-        </div>
-      ))}
-    </ListWrapper>
-    <Footer>
-      <Button type="primary" onClick={onSetterCreateCat}>
-        创建新收藏夹
-      </Button>
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(Setter)
diff --git a/src/containers/tool/FavoritesCats/Updater.js b/src/containers/tool/FavoritesCats/Updater.js
deleted file mode 100755
index 3f643e71a..000000000
--- a/src/containers/tool/FavoritesCats/Updater.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react'
-
-import { ICON_CMD } from '@/config'
-import { buildLog } from '@/utils'
-
-import { Radio } from '@/components/Switcher'
-import Input from '@/components/Input'
-import { Button } from '@/components/Buttons'
-
-import Tooltip from '@/components/Tooltip'
-import { Space } from '@/components/Common'
-import SectionLabel from '@/components/SectionLabel'
-
-import {
-  Wrapper,
-  EditWrapper,
-  FormItemWrapper,
-  FormLabel,
-  FormInput,
-  RadiosWrapper,
-  Footer,
-} from './styles/editor'
-
-import {
-  categoryOnChange,
-  privateOnChange,
-  onCategoryUpdate,
-  onCategoryDelete,
-} from './logic'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:Favorites:Updater')
-
-const Updater = ({ data, show, hasLockAuth }) => (
-  <Wrapper show={show} className="normal-form">
-    <SectionLabel
-      title={`编辑收藏夹 - ${data.title}`}
-      iconSrc={`${ICON_CMD}/edit.svg`}
-    />
-    <EditWrapper>
-      <FormItemWrapper>
-        <FormLabel>标题</FormLabel>
-        <FormInput>
-          <Input
-            size="default"
-            placeholder="收藏夹标题"
-            value={data.title}
-            onChange={categoryOnChange('title')}
-          />
-        </FormInput>
-      </FormItemWrapper>
-      <FormItemWrapper>
-        <FormLabel>描述</FormLabel>
-        <FormInput>
-          <Input
-            value={data.desc}
-            onChange={categoryOnChange('desc')}
-            placeholder="收藏什么的？"
-            behavior="textarea"
-          />
-        </FormInput>
-      </FormItemWrapper>
-
-      {hasLockAuth && (
-        <FormItemWrapper>
-          <FormLabel>隐私</FormLabel>
-          <RadiosWrapper>
-            <Radio
-              items={[
-                {
-                  value: '公开',
-                  key: false,
-                },
-                {
-                  value: '不公开',
-                  key: true,
-                  dimOnActive: true,
-                },
-              ]}
-              activeKey={data.private}
-              onChange={privateOnChange}
-            />
-          </RadiosWrapper>
-        </FormItemWrapper>
-      )}
-    </EditWrapper>
-    <Footer>
-      <Tooltip
-        content="删除收藏夹及包含的内容，是否继续?"
-        trigger="click"
-        hideOnClick={false}
-        behavior="confirm"
-        onConfirm={onCategoryDelete}
-      >
-        <Button type="red" ghost>
-          删除
-        </Button>
-      </Tooltip>
-      <Space right={10} />
-      <Button type="primary" onClick={onCategoryUpdate}>
-        保存
-      </Button>
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(Updater)
diff --git a/src/containers/tool/FavoritesCats/index.js b/src/containers/tool/FavoritesCats/index.js
deleted file mode 100755
index 1f8bb82c1..000000000
--- a/src/containers/tool/FavoritesCats/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- *
- * FavoritesCats
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { ICON_CMD } from '@/config'
-import { pluggedIn, buildLog } from '@/utils'
-
-import Modal from '@/components/Modal'
-import SectionLabel from '@/components/SectionLabel'
-
-import { AdderWrapper, AdderText, AdderIcon } from './styles'
-
-import BoxView from './BoxView'
-import Creator from './Creator'
-import Updater from './Updater'
-import Setter from './Setter'
-
-import { useInit, onModalClose, changeViewTo } from './logic'
-
-/* eslint-disable-next-line */
-const log = buildLog('C:FavoritesCats')
-
-const FavoritesCatsContainer = ({
-  favoritesCats: store,
-  onSelect,
-  displayMode: displayModeProp,
-}) => {
-  useInit(store, displayModeProp)
-
-  const {
-    viewingData,
-    displayMode,
-    isCreatorView,
-    isUpdaterView,
-    isSetterView,
-    showModal,
-    editCategoryData,
-    pagedCategoriesData,
-    isSelfViewing,
-    hasLockAuth,
-  } = store
-
-  const { entries } = pagedCategoriesData
-
-  return (
-    <React.Fragment>
-      {displayMode === 'list' && (
-        <SectionLabel
-          title="收藏夹"
-          iconSrc={`${ICON_CMD}/folder.svg`}
-          addonNode={
-            <>
-              {isSelfViewing && (
-                <AdderWrapper onClick={changeViewTo('creator')}>
-                  <AdderIcon src={`${ICON_CMD}/add_circle.svg`} />
-                  <AdderText>创建</AdderText>
-                </AdderWrapper>
-              )}
-            </>
-          }
-        />
-      )}
-      <Modal width="420px" show={showModal} showCloseBtn onClose={onModalClose}>
-        <Setter
-          entries={entries}
-          show={isSetterView}
-          selectedId={viewingData.favoritedCategoryId}
-          hasLockAuth={hasLockAuth}
-        />
-        <Creator
-          data={editCategoryData}
-          show={isCreatorView}
-          hasLockAuth={hasLockAuth}
-        />
-        <Updater
-          data={editCategoryData}
-          show={isUpdaterView}
-          hasLockAuth={hasLockAuth}
-        />
-      </Modal>
-      {displayMode === 'list' && (
-        <BoxView data={pagedCategoriesData} onSelect={onSelect} />
-      )}
-    </React.Fragment>
-  )
-}
-
-FavoritesCatsContainer.propTypes = {
-  onSelect: T.func,
-  favoritesCats: T.any.isRequired,
-  displayMode: T.oneOf(['list', 'hide']),
-}
-
-FavoritesCatsContainer.defaultProps = {
-  onSelect: log,
-  displayMode: 'hide',
-}
-
-export default pluggedIn(FavoritesCatsContainer)
diff --git a/src/containers/tool/FavoritesCats/logic.js b/src/containers/tool/FavoritesCats/logic.js
deleted file mode 100755
index 3ad62175a..000000000
--- a/src/containers/tool/FavoritesCats/logic.js
+++ /dev/null
@@ -1,237 +0,0 @@
-import { useEffect } from 'react'
-import { curry, toUpper } from 'ramda'
-
-import { PAGE_SIZE } from '@/config'
-import { EVENT, ERR } from '@/constant'
-import { asyncSuit, buildLog, send, errRescue, updateEditing } from '@/utils'
-
-import S from './schema'
-
-/* eslint-disable-next-line */
-const log = buildLog('L:FavoritesCats')
-
-const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
-const sr71$ = new SR71({
-  receive: [EVENT.SET_FAVORITE_CONTENT],
-})
-
-let sub$ = null
-let store = null
-
-// export const categoryOnChange = (part, e) => updateEditing(store, part, e)
-export const categoryOnChange = curry(
-  (part, e) => updateEditing(store, part, e),
-  // store.updateEditing({ [part]: e.target.value })
-)
-
-export const privateOnChange = (item) => {
-  const { editCategoryData } = store
-
-  const editCategory = {
-    ...editCategoryData,
-    private: item.key,
-  }
-
-  store.mark({ editCategory })
-}
-
-export const onCategoryCreate = () => {
-  if (!store.validator('publish')) return false
-
-  sr71$.mutate(S.createFavoriteCategory, store.editCategoryData)
-}
-
-export const onCategoryUpdate = () => {
-  if (!store.validator('publish')) return false
-  sr71$.mutate(S.updateFavoriteCategory, store.editCategoryData)
-}
-
-export const onCategoryDelete = () => {
-  const { id } = store.editCategoryData
-  sr71$.mutate(S.deleteFavoriteCategory, { id })
-}
-
-export const loadCategories = (page = 1) => {
-  const userId = store.viewingUser.id
-
-  markLoading(true)
-  sr71$.query(S.favoriteCategories, {
-    userId,
-    filter: { page, size: PAGE_SIZE.M },
-  })
-}
-
-export const switchToUpdater = (editCategory) => {
-  store.mark({ editCategory })
-  store.changeViewTo('updater')
-}
-
-/* eslint-disable-next-line */
-export const changeViewTo = curry((view, e) => store.changeViewTo(view))
-
-export const onSetterCreateCat = () => {
-  store.mark({ createfromSetter: true })
-  store.changeViewTo('creator')
-}
-
-export const onModalClose = () => {
-  if (store.createfromSetter) {
-    store.mark({ createfromSetter: false })
-    return store.changeViewTo('setter')
-  }
-
-  store.mark({ showModal: false })
-  store.cleanEditData()
-}
-
-export const setContent = (categoryId) => {
-  if (store.doing) return false
-
-  const { id } = store.viewingData
-  const { thread } = store
-
-  const args = {
-    id,
-    thread: toUpper(thread),
-    categoryId,
-  }
-  store.mark({ doing: true })
-  sr71$.mutate(S.setFavorites, args)
-}
-
-export const unSetContent = (categoryId) => {
-  if (store.doing) return false
-
-  const { id } = store.viewingData
-  const { thread } = store
-
-  const args = {
-    id,
-    thread: toUpper(thread),
-    categoryId,
-  }
-  store.mark({ doing: true })
-  sr71$.mutate(S.unsetFavorites, args)
-}
-
-const markLoading = (maybe = true) =>
-  store.mark({ loading: maybe, doing: false })
-
-// ###############################
-// Data & Error handlers
-// ###############################
-
-const DataSolver = [
-  {
-    match: asyncRes('favoriteCategories'),
-    action: ({ favoriteCategories: pagedCategories }) => {
-      // const curView = pagedUsers.totalCount === 0 ? TYPE.RESULT_EMPTY : TYPE.RESULT
-      markLoading(false)
-      store.mark({ pagedCategories })
-      // store.closeDrawer()
-    },
-  },
-  {
-    match: asyncRes('createFavoriteCategory'),
-    action: () => {
-      // createfromSetter
-      loadCategories()
-      if (store.createfromSetter) {
-        store.mark({ createfromSetter: false })
-        return store.changeViewTo('setter')
-      }
-      return onModalClose()
-    },
-  },
-  {
-    match: asyncRes('updateFavoriteCategory'),
-    action: () => {
-      onModalClose()
-      loadCategories()
-    },
-  },
-  {
-    match: asyncRes('deleteFavoriteCategory'),
-    action: () => {
-      onModalClose()
-      loadCategories()
-    },
-  },
-  {
-    match: asyncRes('setFavorites'),
-    action: () => {
-      loadCategories()
-      /* store.updateCategory(cat) */
-      const { id } = store.viewingData
-      const { thread } = store
-      send(EVENT.REFRESH_REACTIONS, { data: { id, thread } })
-      store.mark({ doing: false })
-    },
-  },
-  {
-    match: asyncRes('unsetFavorites'),
-    action: () => {
-      loadCategories()
-      /* store.updateCategory(cat) */
-      const { id } = store.viewingData
-      const { thread } = store
-      send(EVENT.REFRESH_REACTIONS, { data: { id, thread } })
-      store.mark({ doing: false })
-    },
-  },
-  {
-    match: asyncRes(EVENT.SET_FAVORITE_CONTENT),
-    action: (e) => {
-      const { thread } = e[EVENT.SET_FAVORITE_CONTENT].data
-      store.changeViewTo('setter')
-      store.mark({ thread, createfromSetter: true })
-    },
-  },
-]
-
-const ErrSolver = [
-  {
-    match: asyncErr(ERR.GRAPHQL),
-    action: ({ details }) => {
-      store.changesetErr({ title: '已经存在了', msg: details[0].detail })
-      markLoading(false)
-    },
-  },
-  {
-    match: asyncErr(ERR.TIMEOUT),
-    action: ({ details }) => {
-      markLoading(false)
-      errRescue({ type: ERR.TIMEOUT, details, path: 'FavoritesCats' })
-    },
-  },
-  {
-    match: asyncErr(ERR.NETWORK),
-    action: () => {
-      markLoading(false)
-      errRescue({ type: ERR.NETWORK, path: 'FavoritesCats' })
-    },
-  },
-]
-
-const initStates = (displayMode) => {
-  store.mark({ displayMode })
-  return loadCategories()
-}
-
-// ###############################
-// init & uninit
-// ###############################
-export const useInit = (_store, displayMode) => {
-  useEffect(() => {
-    store = _store
-    // log('effect init')
-    sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
-    initStates(displayMode)
-
-    return () => {
-      // log('effect uninit')
-      sr71$.stop()
-      sub$.unsubscribe()
-    }
-  }, [_store, displayMode])
-}
diff --git a/src/containers/tool/FavoritesCats/schema.ts b/src/containers/tool/FavoritesCats/schema.ts
deleted file mode 100755
index d90dec241..000000000
--- a/src/containers/tool/FavoritesCats/schema.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import gql from 'graphql-tag'
-
-const favoriteCategories = gql`
-  query($userId: ID, $filter: CommonPagedFilter!) {
-    favoriteCategories(userId: $userId, filter: $filter) {
-      entries {
-        id
-        title
-        desc
-        totalCount
-        private
-        updatedAt
-      }
-      totalPages
-      totalCount
-      pageSize
-      pageNumber
-    }
-  }
-`
-
-const createFavoriteCategory = gql`
-  mutation($title: String!, $desc: String, $private: Boolean) {
-    createFavoriteCategory(title: $title, desc: $desc, private: $private) {
-      id
-      title
-    }
-  }
-`
-const updateFavoriteCategory = gql`
-  mutation($id: ID!, $title: String, $desc: String, $private: Boolean) {
-    updateFavoriteCategory(
-      id: $id
-      title: $title
-      desc: $desc
-      private: $private
-    ) {
-      id
-      title
-      desc
-      private
-    }
-  }
-`
-const deleteFavoriteCategory = gql`
-  mutation($id: ID!) {
-    deleteFavoriteCategory(id: $id) {
-      done
-    }
-  }
-`
-
-const setFavorites = gql`
-  mutation($id: ID!, $thread: CmsThread, $categoryId: ID!) {
-    setFavorites(id: $id, thread: $thread, categoryId: $categoryId) {
-      id
-      totalCount
-    }
-  }
-`
-
-const unsetFavorites = gql`
-  mutation($id: ID!, $thread: CmsThread, $categoryId: ID!) {
-    unsetFavorites(id: $id, thread: $thread, categoryId: $categoryId) {
-      id
-      totalCount
-    }
-  }
-`
-
-const schema = {
-  favoriteCategories,
-  createFavoriteCategory,
-  updateFavoriteCategory,
-  deleteFavoriteCategory,
-  setFavorites,
-  unsetFavorites,
-}
-
-export default schema
diff --git a/src/containers/tool/FavoritesCats/store.js b/src/containers/tool/FavoritesCats/store.js
deleted file mode 100755
index 95570d446..000000000
--- a/src/containers/tool/FavoritesCats/store.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/*
- * FavoritesCats store
- *
- */
-
-import { types as T, getParent } from 'mobx-state-tree'
-import { merge } from 'ramda'
-
-import { THREAD } from '@/constant'
-import { markStates, buildLog, stripMobx, changeset } from '@/utils'
-
-import {
-  FavoriteCategory,
-  PagedFavoriteCategories,
-  emptyPagiData,
-} from '@/model'
-
-/* eslint-disable-next-line */
-const log = buildLog('S:FavoritesCats')
-
-const emptyCat = {
-  id: '',
-  title: '',
-  desc: '',
-  private: false,
-}
-
-const FavoritesCats = T.model('FavoritesCats', {
-  displayMode: T.optional(
-    T.enumeration('displayMode', ['list', 'hide']),
-    'hide',
-  ),
-  pagedCategories: T.optional(PagedFavoriteCategories, emptyPagiData),
-  editCategory: T.optional(FavoriteCategory, emptyCat),
-  /* curView: T.optional(T.enumeration('curView', ['box', 'list']), 'box'), */
-  showModal: T.optional(T.boolean, false),
-  showUpdater: T.optional(T.boolean, false),
-  showCreator: T.optional(T.boolean, false),
-  showSetter: T.optional(T.boolean, false),
-  // open creator from setter, so we can go back to setter based on this state
-  createfromSetter: T.optional(T.boolean, false),
-  thread: T.maybeNull(
-    T.enumeration([THREAD.POST, THREAD.JOB, THREAD.REPO], THREAD.POST),
-  ),
-  loading: T.optional(T.boolean, false),
-  doing: T.optional(T.boolean, false),
-})
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get isLogin() {
-      return self.root.account.isLogin
-    },
-    get viewingUser() {
-      return stripMobx(self.root.viewing.user)
-    },
-    get isSelfViewing() {
-      return self.root.viewing.isSelfViewing
-    },
-    // NOTE: can't not use root's viewingData because the
-    // activeThread is not right on user's page
-    // and it's passible set/unset favrites on user's page
-    get viewingData() {
-      switch (self.thread) {
-        case THREAD.JOB:
-          return stripMobx(self.root.viewing.job)
-
-        case THREAD.REPO:
-          return stripMobx(self.root.viewing.repo)
-
-        default:
-          return stripMobx(self.root.viewing.post)
-      }
-    },
-
-    get editCategoryData() {
-      return stripMobx(self.editCategory)
-    },
-    get pagedCategoriesData() {
-      return stripMobx(self.pagedCategories)
-    },
-    get isCreatorView() {
-      const { showModal, showUpdater, showCreator, showSetter } = self
-      return showModal && showCreator && !showUpdater && !showSetter
-    },
-    get isUpdaterView() {
-      const { showModal, showUpdater, showCreator, showSetter } = self
-      return showModal && showUpdater && !showCreator && !showSetter
-    },
-    get isSetterView() {
-      const { showModal, showUpdater, showCreator, showSetter } = self
-      return showModal && showSetter && !showCreator && !showUpdater
-    },
-    get hasLockAuth() {
-      return self.isMemberOf('seniorMember') || self.isMemberOf('sponsorMember')
-    },
-  }))
-  .actions((self) => ({
-    authWarning(options) {
-      self.root.authWarning(options)
-    },
-    isMemberOf(type) {
-      return self.root.isMemberOf(type)
-    },
-    changesetErr(options) {
-      self.root.changesetErr(merge({ position: 'topCenter' }, options))
-    },
-    updateEditing(sobj) {
-      const editCategory = merge(self.editCategoryData, { ...sobj })
-      self.mark({ editCategory })
-    },
-    validator(type) {
-      switch (type) {
-        case 'publish': {
-          const opt = { msg: '不能为空 (请填写 #必填# 字段)' }
-          const result = changeset(self.editCategoryData)
-            .exist({ title: '收藏夹名称' }, self.changesetErr, opt)
-            .done()
-
-          return result.passed
-        }
-        default: {
-          return false
-        }
-      }
-    },
-    /*
-    updateCategory(cat) {
-      const { id } = cat
-      const pagedCategoriesData = R.clone(self.pagedCategoriesData)
-      const { entries } = pagedCategoriesData
-      const index = R.findIndex(R.propEq('id', id), entries)
-
-      if (index >= 0) {
-        entries[index] = R.merge(entries[index], { ...cat })
-        self.pagedCategories = R.merge(pagedCategoriesData, { entries })
-      }
-    },
-    */
-    changeViewTo(view = 'creator') {
-      // if (!self.isLogin) return self.authWarning()
-
-      switch (view) {
-        case 'setter':
-          return self.mark({
-            showModal: true,
-            showSetter: true,
-            showUpdater: false,
-            showCreator: false,
-          })
-
-        case 'updater':
-          return self.mark({
-            showModal: true,
-            showUpdater: true,
-            showCreator: false,
-            showSetter: false,
-          })
-
-        default:
-          return self.mark({
-            showModal: true,
-            showCreator: true,
-            showUpdater: false,
-            showSetter: false,
-          })
-      }
-    },
-    cleanEditData() {
-      self.editCategory = emptyCat
-    },
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-  }))
-
-export default FavoritesCats
diff --git a/src/containers/tool/FavoritesCats/styles/box_view.ts b/src/containers/tool/FavoritesCats/styles/box_view.ts
deleted file mode 100755
index 7a318b739..000000000
--- a/src/containers/tool/FavoritesCats/styles/box_view.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from 'styled-components'
-
-// import Img from '@/Img'
-import { css } from '@/utils'
-
-export const Wrapper = styled.div``
-export const MsgWrapper = styled.div`
-  ${css.flex('justify-center')};
-  width: 90%;
-`
diff --git a/src/containers/tool/FavoritesCats/styles/category_card_list.ts b/src/containers/tool/FavoritesCats/styles/category_card_list.ts
deleted file mode 100755
index 2e1cd0b1a..000000000
--- a/src/containers/tool/FavoritesCats/styles/category_card_list.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from 'styled-components'
-
-import { css } from '@/utils'
-
-export const Wrapper = styled.div`
-  margin-top: 30px;
-`
-export const CardListWrapper = styled.div`
-  ${css.flex()};
-  flex-wrap: wrap;
-`
diff --git a/src/containers/tool/FavoritesCats/styles/editor.ts b/src/containers/tool/FavoritesCats/styles/editor.ts
deleted file mode 100755
index 9d4d5c4b1..000000000
--- a/src/containers/tool/FavoritesCats/styles/editor.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from 'styled-components'
-
-import type { TActive } from '@/spec'
-import { theme, css } from '@/utils'
-
-export const Wrapper = styled.div<TActive>`
-  display: ${({ show }) => (show ? 'flex' : 'none')};
-  flex-direction: column;
-  padding: 15px 25px;
-`
-export const EditWrapper = styled.div`
-  width: 100%;
-  margin-left: 3px;
-  padding-right: 5px;
-  margin-top: 20px;
-`
-export const FormItemWrapper = styled.div`
-  ${css.flex()};
-  margin-bottom: 20px;
-`
-export const FormLabel = styled.div`
-  font-size: 0.9rem;
-  color: ${theme('form.label')};
-  margin-right: 15px;
-  margin-top: 5px;
-  width: auto;
-  text-align: right;
-`
-export const FormInput = styled.div`
-  flex-grow: 1;
-`
-export const RadiosWrapper = styled.div`
-  margin-top: 6px;
-`
-export const Footer = styled.div`
-  ${css.flex('align-end', 'justify-center')};
-  margin-top: 30px;
-  margin-bottom: 10px;
-`
diff --git a/src/containers/tool/FavoritesCats/styles/index.ts b/src/containers/tool/FavoritesCats/styles/index.ts
deleted file mode 100755
index 8232680e6..000000000
--- a/src/containers/tool/FavoritesCats/styles/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components'
-
-import Img from '@/Img'
-import { theme, animate, css } from '@/utils'
-
-export const AdderWrapper = styled.div`
-  ${css.flex('justify-end')};
-  width: 80px;
-  text-align: right;
-  &:active {
-    animation: ${animate.pulse} 0.4s linear;
-  }
-`
-export const AdderText = styled.div`
-  font-size: 0.9rem;
-  color: ${theme('tabs.header')};
-  margin-top: -2px;
-  &:hover {
-    cursor: pointer;
-    font-weight: bold;
-  }
-  transition: color 0.3s linear;
-`
-export const AdderIcon = styled(Img)`
-  fill: ${theme('tabs.header')};
-  width: 17px;
-  height: 17px;
-  margin-right: 3px;
-  &:hover {
-    cursor: pointer;
-    fill: ${theme('tabs.headerActive')};
-  }
-`
diff --git a/src/containers/tool/FavoritesCats/styles/setter.ts b/src/containers/tool/FavoritesCats/styles/setter.ts
deleted file mode 100755
index 8735168c4..000000000
--- a/src/containers/tool/FavoritesCats/styles/setter.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import styled from 'styled-components'
-
-import type { TActive } from '@/spec'
-import { theme, css } from '@/utils'
-
-export const Wrapper = styled.div<TActive>`
-  display: ${({ show }) => (show ? 'flex' : 'none')};
-  flex-direction: column;
-  padding: 15px 25px;
-`
-export const ListWrapper = styled.div``
-export const Footer = styled.div`
-  ${css.flex('justify-center')};
-  margin-top: 20px;
-  margin-bottom: 10px;
-`
-export const CatWrapper = styled.div`
-  ${css.flexColumn()};
-  padding: 10px 5px;
-  &:hover {
-    background: #113744;
-  }
-`
-export const CatContent = styled.div`
-  ${css.flex('align-center')};
-`
-export const CatMain = styled.div`
-  ${css.flexColumnGrow()};
-`
-export const SetBtn = styled.div``
-
-export const CatHeader = styled.div`
-  ${css.flex()};
-`
-export const CatTitle = styled.div`
-  color: ${theme('banner.desc')};
-  font-weight: bold;
-  font-size: 1rem;
-`
-export const CatDec = styled.div`
-  color: ${theme('banner.desc')};
-`
-export const CatCounter = styled.div`
-  font-size: 0.9rem;
-  color: ${theme('banner.desc')};
-`
-export const CatDivider = styled.div`
-  border-bottom: 1px solid;
-  border-color: ${theme('banner.desc')};
-  width: 100%;
-  opacity: 0.4;
-`
diff --git a/src/containers/tool/FavoritesCats/tests/index.test.ts b/src/containers/tool/FavoritesCats/tests/index.test.ts
deleted file mode 100755
index 457499b7d..000000000
--- a/src/containers/tool/FavoritesCats/tests/index.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// import React from 'react'
-// import { shallow } from 'enzyme'
-
-// import FavoritesCats from '../index'
-
-describe('TODO <FavoritesCats />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true)
-  })
-})
diff --git a/src/containers/tool/FavoritesCats/tests/store.test.ts b/src/containers/tool/FavoritesCats/tests/store.test.ts
deleted file mode 100755
index 5318523b4..000000000
--- a/src/containers/tool/FavoritesCats/tests/store.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * FavoritesCats store test
- *
- */
-
-// import FavoritesCats from '../index'
-
-it('TODO: store test FavoritesCats', () => {
-  expect(1 + 1).toBe(2)
-})
diff --git a/src/containers/user/UserFavorited/index.js b/src/containers/user/UserFavorited/index.js
index c041a61da..ff2912e27 100755
--- a/src/containers/user/UserFavorited/index.js
+++ b/src/containers/user/UserFavorited/index.js
@@ -8,7 +8,6 @@ import React from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 
-import FavoritesCats from '@/containers/tool/FavoritesCats'
 import PagedArticles from '@/components/PagedArticles'
 import Breadcrumbs from './Breadcrumbs'
 
@@ -41,7 +40,7 @@ const UserFavoritedContainer = ({ userFavorited: store }) => {
   return (
     <div>
       {parentView === 'CATEGORY_LIST' ? (
-        <FavoritesCats onSelect={onCatSelect} displayMode="list" />
+        <div>TODO</div>
       ) : (
         <>
           <Breadcrumbs
diff --git a/src/containers/viewer/RepoViewer/index.js b/src/containers/viewer/RepoViewer/index.js
index c29dcba7a..006482778 100755
--- a/src/containers/viewer/RepoViewer/index.js
+++ b/src/containers/viewer/RepoViewer/index.js
@@ -11,7 +11,6 @@ import { pluggedIn, buildLog } from '@/utils'
 
 import ArticleViewerHeader from '@/containers/unit/ArticleViewerHeader'
 import ArticleBodyHeader from '@/containers/unit/ArticleBodyHeader'
-import FavoritesCats from '@/containers/tool/FavoritesCats'
 import Comments from '@/containers/unit/Comments'
 import GithubRepoPage from '@/components/GithubRepoPage'
 
@@ -28,7 +27,6 @@ const RepoViewerContainer = ({ repoViewer: store, attachment }) => {
 
   return (
     <React.Fragment>
-      <FavoritesCats />
       <GithubRepoPage
         repo={viewingData}
         viewerHeader={
diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts
index 11c14d4ee..34df920d1 100755
--- a/src/stores/RootStore/index.ts
+++ b/src/stores/RootStore/index.ts
@@ -81,7 +81,6 @@ import {
   UserBillingStore,
   UserFavoritedStore,
   UserStaredStore,
-  FavoritesCatsStore,
   //
   MeetupsContentStore,
   HaveADrinkContentStore,
@@ -195,7 +194,6 @@ const rootStore = T.model({
   userSettings: T.optional(UserSettingsStore, {}),
   userStared: T.optional(UserStaredStore, {}),
   userFavorited: T.optional(UserFavoritedStore, {}),
-  favoritesCats: T.optional(FavoritesCatsStore, {}),
 
   // have a drink
   meetupsContent: T.optional(MeetupsContentStore, {}),
diff --git a/src/stores/index.ts b/src/stores/index.ts
index a83ff0e89..99ac541f7 100755
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -32,7 +32,6 @@ export { default as CashierStore } from '@/containers/tool/Cashier/store'
 
 export { default as ArticleAuthorCardStore } from '@/containers/unit/ArticleAuthorCard/store'
 //
-export { default as FavoritesCatsStore } from '@/containers/tool/FavoritesCats/store'
 
 // pages banners store
 export { default as CommunityDigestStore } from '@/containers/digest/CommunityDigest/store'

From abab204fdc7d291d403cf762a59e18f62f0e3ff9 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 28 Jul 2021 11:20:12 +0800
Subject: [PATCH 4/8] fix(tooltip): hide logic, edge case

---
 src/components/Buttons/styles/button.ts       | 18 +++++-----------
 .../Buttons/styles/metircs/button.ts          |  2 +-
 src/components/Tooltip/ConfirmFooter.tsx      | 21 ++++++++++++-------
 src/components/Tooltip/index.tsx              | 17 +++++++++------
 .../Tooltip/styles/confirm_footer.ts          | 19 +++++++++++++----
 5 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/src/components/Buttons/styles/button.ts b/src/components/Buttons/styles/button.ts
index 6916a42ba..8dc1867a6 100644
--- a/src/components/Buttons/styles/button.ts
+++ b/src/components/Buttons/styles/button.ts
@@ -26,11 +26,12 @@ export const Wrapper = styled.button<TButton>`
   border: 1px solid transparent;
   white-space: nowrap;
   padding: ${({ size }) => getPadding(size)};
-  font-size: 14px;
+  font-size: ${({ size }) => getFontSize(size)};
+  /* font-size: 14px; */
   border-radius: 4px;
   height: ${({ size }) => getHeight(size)};
   user-select: none;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
   position: relative;
 
   color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
@@ -89,7 +90,7 @@ export const LoadingMask = styled.div<{ width: string }>`
   left: 0;
   background: ${({ width }) => (width === '100%' ? 'transparent' : '#2c6b94')};
   z-index: 1;
-  transition: width 0.3s;
+  transition: width 0.1s;
 `
 export const RedWrapper = styled(Wrapper)`
   color: ${({ ghost }) => (ghost ? theme('baseColor.red') : 'white')};
@@ -98,25 +99,16 @@ export const RedWrapper = styled(Wrapper)`
   border-color: ${theme('baseColor.red')};
 
   &:hover {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
   &:focus {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
   &:active {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
-  transition: all 0.25s;
+  transition: all 0.1s;
 `
diff --git a/src/components/Buttons/styles/metircs/button.ts b/src/components/Buttons/styles/metircs/button.ts
index d90f0cb70..ec89af09c 100644
--- a/src/components/Buttons/styles/metircs/button.ts
+++ b/src/components/Buttons/styles/metircs/button.ts
@@ -63,7 +63,7 @@ export const getHeight = (size: string): string => {
 export const getPadding = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
-      return '1px 5px'
+      return '0 4px'
     }
 
     case SIZE.SMALL: {
diff --git a/src/components/Tooltip/ConfirmFooter.tsx b/src/components/Tooltip/ConfirmFooter.tsx
index 81b13773c..68296adcb 100644
--- a/src/components/Tooltip/ConfirmFooter.tsx
+++ b/src/components/Tooltip/ConfirmFooter.tsx
@@ -5,27 +5,32 @@ import { Space } from '@/components/Common'
 
 import { FOOTER_BEHAVIOR } from './constant'
 
-import { Wrapper, ButtonsWrapper, CancelButton } from './styles/confirm_footer'
+import {
+  Wrapper,
+  ButtonsWrapper,
+  RedButton,
+  CancelButton,
+} from './styles/confirm_footer'
 
 type TProps = {
-  footerBehavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
+  behavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
 
   onConfirm?: () => void
   onCancel?: () => void
 }
 
-const ConfirmFooter: FC<TProps> = ({ onConfirm, onCancel, footerBehavior }) => {
+const ConfirmFooter: FC<TProps> = ({ onConfirm, onCancel, behavior }) => {
   let content = null
 
-  switch (footerBehavior) {
+  switch (behavior) {
     case FOOTER_BEHAVIOR.DELETE_CONFIRM: {
       content = (
         <ButtonsWrapper>
-          <Button size="small" type="red" onClick={() => onConfirm?.()}>
-            确认删除
-          </Button>
-          <Space right={10} />
           <CancelButton onClick={onCancel}>取消</CancelButton>
+          <Space right={10} />
+          <Button size="tiny" type="red" onClick={() => onConfirm?.()}>
+            确定
+          </Button>
         </ButtonsWrapper>
       )
       break
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index ec1e3f46b..969e064d2 100755
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -37,7 +37,7 @@ type TProps = {
   hideOnClick?: boolean
   noPadding?: boolean
   showArrow?: boolean
-  footerBehavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
+  behavior?: 'default' | 'confirm' | 'delete-confirm' | 'add'
   // currently only for AvatarsRow, it will collapse the height
   // for same reason, figure out later
   contentHeight?: string
@@ -70,7 +70,7 @@ const Tooltip: FC<TProps> = ({
   hideOnClick = true,
   showArrow = false,
   forceZIndex = false,
-  footerBehavior = 'default',
+  behavior = 'default',
   trigger = 'mouseenter focus',
   onConfirm,
   contentHeight,
@@ -95,16 +95,21 @@ const Tooltip: FC<TProps> = ({
   const contentRef = useRef()
 
   const PopoverContent = (
-    <div ref={contentRef}>
+    <div
+      ref={contentRef}
+      onClick={() => {
+        if (hideOnClick) instance?.hide()
+      }}
+    >
       {content}
-      {active && footerBehavior !== FOOTER_BEHAVIOR.DEFAULT && (
+      {active && behavior !== FOOTER_BEHAVIOR.DEFAULT && (
         <ConfirmFooter
           onConfirm={() => {
             onConfirm?.()
             instance?.hide()
           }}
           onCancel={() => instance?.hide()}
-          footerBehavior={footerBehavior}
+          behavior={behavior}
         />
       )}
     </div>
@@ -114,8 +119,8 @@ const Tooltip: FC<TProps> = ({
 
   useOutsideClick(ref, (e) => {
     if (!instance) return false
-    const isClickInsidePopover = isDescendant(contentRef?.current, e.target)
 
+    const isClickInsidePopover = isDescendant(contentRef?.current, e.target)
     if (hideOnClick || (!hideOnClick && !isClickInsidePopover)) {
       // if (instance) {
       // NOTE:  this is a hack, svg will swallow events like click
diff --git a/src/components/Tooltip/styles/confirm_footer.ts b/src/components/Tooltip/styles/confirm_footer.ts
index 72fc4e373..f9273d85f 100644
--- a/src/components/Tooltip/styles/confirm_footer.ts
+++ b/src/components/Tooltip/styles/confirm_footer.ts
@@ -5,19 +5,30 @@ import { css, theme } from '@/utils'
 export const Wrapper = styled.div`
   ${css.flex('align-both')};
   margin-top: 10px;
-  margin-bottom: 10px;
   border-top: 1px solid;
   border-top-color: ${theme('popover.borderColor')};
 `
 export const ButtonsWrapper = styled.div`
+  padding-top: 8px;
   ${css.flex('align-both')};
-  padding-top: 15px;
+`
+export const RedButton = styled.div`
+  color: ${theme('baseColor.red')};
+  font-size: 13px;
+  filter: saturate(0.8);
+
+  &:hover {
+    cursor: pointer;
+    filter: saturate(1);
+  }
 `
 export const CancelButton = styled.div`
-  color: ${theme('button.primary')};
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  opacity: 0.8;
 
   &:hover {
-    color: ${theme('button.hoverBg')};
+    opacity: 1;
     cursor: pointer;
   }
 `

From c9ce7c07553ad4efb4178a77cb96ae5921ca7cb4 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 28 Jul 2021 16:32:42 +0800
Subject: [PATCH 5/8] feat(collection-folder): creator redesign

---
 src/components/Checker/styles/index.ts        |   4 +-
 src/components/Input/styles/index.ts          |   2 +-
 .../tool/CollectionFolder/Creator.tsx         | 131 ++++++++++--------
 .../tool/CollectionFolder/Setter.tsx          |   4 +-
 .../tool/CollectionFolder/Updater.tsx         |  33 ++---
 src/containers/tool/CollectionFolder/logic.ts |  31 +++--
 .../tool/CollectionFolder/styles/editor.ts    |  63 ++++++---
 .../tool/CollectionFolder/styles/setter.ts    |   1 -
 8 files changed, 155 insertions(+), 114 deletions(-)

diff --git a/src/components/Checker/styles/index.ts b/src/components/Checker/styles/index.ts
index 46b3719f5..bee319b66 100755
--- a/src/components/Checker/styles/index.ts
+++ b/src/components/Checker/styles/index.ts
@@ -35,8 +35,8 @@ export const Icon = styled(Img)<TItem>`
   cursor: pointer;
 `
 export const ChildWrapper = styled.div<TItem>`
-  color: ${theme('thread.articleDigest')};
-  opacity: ${({ checked }) => (checked ? 1 : 0.9)};
+  color: ${({ checked }) =>
+    checked ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   font-size: ${({ size }) => getFontSize(size)};
   margin-left: 6px;
   cursor: pointer;
diff --git a/src/components/Input/styles/index.ts b/src/components/Input/styles/index.ts
index aca079664..9c0ffa8b9 100755
--- a/src/components/Input/styles/index.ts
+++ b/src/components/Input/styles/index.ts
@@ -62,7 +62,7 @@ export const baseInput = `
 export const InputWrapper = styled.input<IInput>`
   ${baseInput};
   padding: 4px 11px;
-  height: 36px;
+  height: 34px;
   font-size: 14px;
   line-height: 1.5;
   text-align: left;
diff --git a/src/containers/tool/CollectionFolder/Creator.tsx b/src/containers/tool/CollectionFolder/Creator.tsx
index 7e0c2046c..70b611648 100755
--- a/src/containers/tool/CollectionFolder/Creator.tsx
+++ b/src/containers/tool/CollectionFolder/Creator.tsx
@@ -1,23 +1,27 @@
 import { FC, memo } from 'react'
 
+import { ICON } from '@/config'
 import type { TCollectionFolder } from '@/spec'
-import { ICON_CMD } from '@/config'
 import { buildLog } from '@/utils'
 
-import { Radio } from '@/components/Switcher'
 import Input from '@/components/Input'
 import { Button } from '@/components/Buttons'
-
-import { Space } from '@/components/Common'
-import SectionLabel from '@/components/SectionLabel'
+import { Br, Space, SpaceGrow } from '@/components/Common'
+import Folder from '@/components/Folder'
+import IconText from '@/components/IconText'
+import Checker from '@/components/Checker'
 
 import {
   Wrapper,
+  Header,
+  InnerWrapper,
+  SidebarWrapper,
+  TipsText,
+  NoteText,
   EditWrapper,
   FormItemWrapper,
   FormLabel,
   FormInput,
-  RadiosWrapper,
   Footer,
 } from './styles/editor'
 
@@ -39,62 +43,71 @@ type TProps = {
 
 const Creator: FC<TProps> = ({ data, show, hasLockAuth }) => (
   <Wrapper show={show} className="normal-form">
-    <SectionLabel title="创建收藏夹" iconSrc={`${ICON_CMD}/edit.svg`} />
-    <EditWrapper>
-      <FormItemWrapper>
-        <FormLabel>标题</FormLabel>
-        <FormInput>
-          <Input
-            placeholder="收藏夹标题 #必填#"
-            value={data.title}
-            onChange={categoryOnChange('title')}
-          />
-        </FormInput>
-      </FormItemWrapper>
-      <FormItemWrapper>
-        <FormLabel>描述</FormLabel>
-        <FormInput>
-          <Input
-            value={data.desc}
-            onChange={categoryOnChange('desc')}
-            placeholder="收藏什么的？"
-            behavior="textarea"
-          />
-        </FormInput>
-      </FormItemWrapper>
-
-      {hasLockAuth && (
+    <Header>创建新收藏夹</Header>
+    <InnerWrapper>
+      <SidebarWrapper>
+        <Folder lock />
+        <Br bottom={30} />
+        <IconText iconSrc={`${ICON}/route/light.svg`}>Tips</IconText>
+        <TipsText>
+          你可以将不同板块的内容归类到不同的收藏夹中，方便往后查找。
+        </TipsText>
+      </SidebarWrapper>
+      <EditWrapper>
         <FormItemWrapper>
-          <FormLabel>隐私</FormLabel>
-          <RadiosWrapper>
-            <Radio
-              items={[
-                {
-                  value: '公开',
-                  key: false,
-                },
-                {
-                  value: '不公开',
-                  key: true,
-                  dimOnActive: true,
-                },
-              ]}
-              activeKey={data.private}
-              onChange={privateOnChange}
+          <FormLabel>收藏夹标题</FormLabel>
+          <FormInput>
+            <Input
+              placeholder="//必填项"
+              value={data.title}
+              onChange={categoryOnChange('title')}
             />
-          </RadiosWrapper>
+          </FormInput>
+        </FormItemWrapper>
+        <FormItemWrapper>
+          <FormLabel>描述信息</FormLabel>
+          <FormInput>
+            <Input
+              value={data.desc}
+              onChange={categoryOnChange('desc')}
+              placeholder="//可选项"
+              behavior="textarea"
+            />
+          </FormInput>
+        </FormItemWrapper>
+        <FormItemWrapper>
+          <Checker
+            checked={false}
+            // onChange={privateOnChange}
+            // onChange={(checked) => updateWorks('isOSS', checked)}
+            size="small"
+          >
+            上锁
+          </Checker>
+          {/* <NoteText>
+            完全公开，允许互联网上的任何人查看该收藏夹里的内容。
+          </NoteText> */}
+          <NoteText>不公开，收藏夹里的内容仅自己可见。</NoteText>
         </FormItemWrapper>
-      )}
-    </EditWrapper>
-    <Footer>
-      <Button type="primary" ghost onClick={onModalClose}>
-        取消
-      </Button>
-      <Space right={10} />
-      <Button type="primary" onClick={onCategoryCreate}>
-        保存
-      </Button>
-    </Footer>
+        <SpaceGrow />
+        <Footer>
+          <Button
+            type="primary"
+            onClick={onModalClose}
+            size="small"
+            noBorder
+            ghost
+          >
+            取消
+          </Button>
+          <Space right={10} />
+          <Button type="primary" onClick={onCategoryCreate} size="small">
+            保存
+          </Button>
+          <Space right={50} />
+        </Footer>
+      </EditWrapper>
+    </InnerWrapper>
   </Wrapper>
 )
 
diff --git a/src/containers/tool/CollectionFolder/Setter.tsx b/src/containers/tool/CollectionFolder/Setter.tsx
index e6807ba20..6494c43b7 100755
--- a/src/containers/tool/CollectionFolder/Setter.tsx
+++ b/src/containers/tool/CollectionFolder/Setter.tsx
@@ -14,7 +14,7 @@ import {
   Footer,
 } from './styles/setter'
 
-import { setContent, unSetContent, onSetterCreateCat } from './logic'
+import { setContent, unSetContent, switchToCreator } from './logic'
 
 type TProps = {
   show: boolean
@@ -56,7 +56,7 @@ const Setter: FC<TProps> = ({ show, selectedId }) => (
     <Footer>
       选择要收入的收藏夹，或者
       <Space right={10} />
-      <Button type="primary" onClick={onSetterCreateCat} size="small" ghost>
+      <Button type="primary" onClick={switchToCreator} size="small" ghost>
         创建新收藏夹
       </Button>
     </Footer>
diff --git a/src/containers/tool/CollectionFolder/Updater.tsx b/src/containers/tool/CollectionFolder/Updater.tsx
index 83af6c235..86b9b2bcf 100755
--- a/src/containers/tool/CollectionFolder/Updater.tsx
+++ b/src/containers/tool/CollectionFolder/Updater.tsx
@@ -18,7 +18,6 @@ import {
   FormItemWrapper,
   FormLabel,
   FormInput,
-  RadiosWrapper,
   Footer,
 } from './styles/editor'
 
@@ -69,23 +68,21 @@ const Updater: FC<TProps> = ({ data, show, hasLockAuth }) => (
       {hasLockAuth && (
         <FormItemWrapper>
           <FormLabel>隐私</FormLabel>
-          <RadiosWrapper>
-            <Radio
-              items={[
-                {
-                  value: '公开',
-                  key: false,
-                },
-                {
-                  value: '不公开',
-                  key: true,
-                  dimOnActive: true,
-                },
-              ]}
-              activeKey={data.private}
-              onChange={privateOnChange}
-            />
-          </RadiosWrapper>
+          <Radio
+            items={[
+              {
+                value: '公开',
+                key: false,
+              },
+              {
+                value: '不公开',
+                key: true,
+                dimOnActive: true,
+              },
+            ]}
+            activeKey={data.private}
+            onChange={privateOnChange}
+          />
         </FormItemWrapper>
       )}
     </EditWrapper>
diff --git a/src/containers/tool/CollectionFolder/logic.ts b/src/containers/tool/CollectionFolder/logic.ts
index fab84f1d8..bd480fd7b 100755
--- a/src/containers/tool/CollectionFolder/logic.ts
+++ b/src/containers/tool/CollectionFolder/logic.ts
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { curry, toUpper } from 'ramda'
 
+import type { TID } from '@/spec'
 import { PAGE_SIZE } from '@/config'
 import { EVENT, ERR } from '@/constant'
 import { asyncSuit, buildLog, send, errRescue, updateEditing } from '@/utils'
@@ -18,7 +19,7 @@ const sr71$ = new SR71({
 })
 
 let sub$ = null
-let store = null
+let store: TStore | undefined
 
 // export const categoryOnChange = (part, e) => updateEditing(store, part, e)
 export const categoryOnChange = curry(
@@ -26,7 +27,7 @@ export const categoryOnChange = curry(
   // store.updateEditing({ [part]: e.target.value })
 )
 
-export const privateOnChange = (item) => {
+export const privateOnChange = (item): void => {
   const { editCategoryData } = store
 
   const editCategory = {
@@ -37,23 +38,23 @@ export const privateOnChange = (item) => {
   store.mark({ editCategory })
 }
 
-export const onCategoryCreate = () => {
-  if (!store.validator('publish')) return false
+export const onCategoryCreate = (): void => {
+  if (!store.validator('publish')) return
 
   sr71$.mutate(S.createFavoriteCategory, store.editCategoryData)
 }
 
-export const onCategoryUpdate = () => {
-  if (!store.validator('publish')) return false
+export const onCategoryUpdate = (): void => {
+  if (!store.validator('publish')) return
   sr71$.mutate(S.updateFavoriteCategory, store.editCategoryData)
 }
 
-export const onCategoryDelete = () => {
+export const onCategoryDelete = (): void => {
   const { id } = store.editCategoryData
   sr71$.mutate(S.deleteFavoriteCategory, { id })
 }
 
-export const loadCategories = (page = 1) => {
+export const loadCategories = (page = 1): void => {
   const userId = store.viewingUser.id
 
   markLoading(true)
@@ -63,7 +64,7 @@ export const loadCategories = (page = 1) => {
   })
 }
 
-export const switchToUpdater = (editCategory) => {
+export const switchToUpdater = (editCategory): void => {
   store.mark({ editCategory })
   store.changeViewTo('updater')
 }
@@ -71,12 +72,12 @@ export const switchToUpdater = (editCategory) => {
 /* eslint-disable-next-line */
 export const changeViewTo = curry((view, e) => store.changeViewTo(view))
 
-export const onSetterCreateCat = () => {
+export const switchToCreator = (): void => {
   store.mark({ createfromSetter: true })
   store.changeViewTo('creator')
 }
 
-export const onModalClose = () => {
+export const onModalClose = (): void => {
   if (store.createfromSetter) {
     store.mark({ createfromSetter: false })
     return store.changeViewTo('setter')
@@ -86,8 +87,8 @@ export const onModalClose = () => {
   store.cleanEditData()
 }
 
-export const setContent = (categoryId) => {
-  if (store.doing) return false
+export const setContent = (categoryId: TID): void => {
+  if (store.doing) return
 
   const { id } = store.viewingData
   const { thread } = store
@@ -101,8 +102,8 @@ export const setContent = (categoryId) => {
   sr71$.mutate(S.setFavorites, args)
 }
 
-export const unSetContent = (categoryId) => {
-  if (store.doing) return false
+export const unSetContent = (categoryId: TID): void => {
+  if (store.doing) return
 
   const { id } = store.viewingData
   const { thread } = store
diff --git a/src/containers/tool/CollectionFolder/styles/editor.ts b/src/containers/tool/CollectionFolder/styles/editor.ts
index 9d4d5c4b1..2235065fd 100755
--- a/src/containers/tool/CollectionFolder/styles/editor.ts
+++ b/src/containers/tool/CollectionFolder/styles/editor.ts
@@ -3,37 +3,68 @@ import styled from 'styled-components'
 import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
+import { MODAL_MIN_HEIGHT } from './metric'
+
 export const Wrapper = styled.div<TActive>`
   display: ${({ show }) => (show ? 'flex' : 'none')};
   flex-direction: column;
-  padding: 15px 25px;
+  height: 100%;
+  min-height: ${MODAL_MIN_HEIGHT};
+`
+export const Header = styled.div`
+  ${css.flex('align-center')};
+  color: ${theme('thread.articleTitle')};
+  background: ${theme('modal.bg')};
+  filter: ${theme('modal.subPanelShadow')};
+  height: 50px;
+  padding-left: 25px;
+`
+export const InnerWrapper = styled.div`
+  ${css.flex('align-start')};
+  background: ${theme('modal.subPanel')};
+  padding: 25px;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+`
+export const SidebarWrapper = styled.div`
+  color: ${theme('thread.articleTitle')};
+  width: 250px;
+  padding-left: 12px;
+  padding-top: 12px;
+  margin-right: 10px;
+`
+export const NoteText = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  margin-right: 25px;
+  margin-top: 10px;
+  opacity: 0.6;
+`
+export const TipsText = styled(NoteText)`
+  margin-right: 25px;
 `
 export const EditWrapper = styled.div`
   width: 100%;
-  margin-left: 3px;
-  padding-right: 5px;
-  margin-top: 20px;
+  height: 100%;
+  border-left: 1px solid;
+  border-left-color: #043b49;
+  padding-left: 32px;
 `
 export const FormItemWrapper = styled.div`
-  ${css.flex()};
+  ${css.flexColumn()};
   margin-bottom: 20px;
 `
 export const FormLabel = styled.div`
-  font-size: 0.9rem;
-  color: ${theme('form.label')};
-  margin-right: 15px;
-  margin-top: 5px;
-  width: auto;
-  text-align: right;
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+  margin-bottom: 10px;
+  margin-left: 3px;
 `
 export const FormInput = styled.div`
   flex-grow: 1;
 `
-export const RadiosWrapper = styled.div`
-  margin-top: 6px;
-`
 export const Footer = styled.div`
-  ${css.flex('align-end', 'justify-center')};
   margin-top: 30px;
-  margin-bottom: 10px;
+  ${css.flex('align-center', 'justify-center')};
 `
diff --git a/src/containers/tool/CollectionFolder/styles/setter.ts b/src/containers/tool/CollectionFolder/styles/setter.ts
index c81d331a6..0b0bfe389 100755
--- a/src/containers/tool/CollectionFolder/styles/setter.ts
+++ b/src/containers/tool/CollectionFolder/styles/setter.ts
@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
-import Img from '@/Img'
 import { theme, css } from '@/utils'
 
 import { MODAL_MIN_HEIGHT } from './metric'

From e8e7ba101b402a9d8949dd4f07bc2e1279b593a3 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 28 Jul 2021 18:10:47 +0800
Subject: [PATCH 6/8] feat(collection-folder): wip

---
 src/components/Buttons/styles/button.ts       |   6 +-
 src/components/Folder/Footer.tsx              |   5 +-
 src/components/Folder/index.tsx               |   4 +-
 src/components/Tooltip/index.tsx              |  18 +-
 src/components/Tooltip/styles/index.ts        |   5 +-
 .../CollectionFolder/CategoryCardList.tsx     |  48 ------
 .../tool/CollectionFolder/Creator.tsx         |  23 +--
 .../tool/CollectionFolder/Setter.tsx          |  95 ++++++-----
 .../tool/CollectionFolder/Updater.tsx         | 155 +++++++++---------
 .../tool/CollectionFolder/index.tsx           |  14 +-
 src/containers/tool/CollectionFolder/logic.ts |  25 +--
 src/containers/tool/CollectionFolder/store.ts |   8 +-
 .../styles/category_card_list.ts              |  11 --
 13 files changed, 186 insertions(+), 231 deletions(-)
 delete mode 100755 src/containers/tool/CollectionFolder/CategoryCardList.tsx
 delete mode 100755 src/containers/tool/CollectionFolder/styles/category_card_list.ts

diff --git a/src/components/Buttons/styles/button.ts b/src/components/Buttons/styles/button.ts
index 8dc1867a6..a512b6b5d 100644
--- a/src/components/Buttons/styles/button.ts
+++ b/src/components/Buttons/styles/button.ts
@@ -40,7 +40,7 @@ export const Wrapper = styled.button<TButton>`
   border-color: ${({ noBorder, disabled }) =>
     getBorderColor(noBorder, disabled)};
 
-  opacity: ${({ noBorder }) => (noBorder ? '0.7' : 1)};
+  opacity: ${({ noBorder }) => (noBorder ? '0.8' : 1)};
 
   &:hover {
     color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
@@ -96,7 +96,9 @@ export const RedWrapper = styled(Wrapper)`
   color: ${({ ghost }) => (ghost ? theme('baseColor.red') : 'white')};
   background-color: ${({ ghost }) =>
     !ghost ? theme('baseColor.red') : 'transparent'};
-  border-color: ${theme('baseColor.red')};
+
+  border-color: ${({ noBorder }) =>
+    noBorder ? 'transparent' : theme('baseColor.red')};
 
   &:hover {
     background-color: ${({ ghost }) =>
diff --git a/src/components/Folder/Footer.tsx b/src/components/Folder/Footer.tsx
index 3a39daedf..4b1c5a69a 100644
--- a/src/components/Folder/Footer.tsx
+++ b/src/components/Folder/Footer.tsx
@@ -32,9 +32,10 @@ const menuOptions = [
 type TProps = {
   title: string
   onClick: () => void
+  onMenuClick?: (key: string) => void
 }
 
-const Footer: FC<TProps> = ({ title, onClick }) => {
+const Footer: FC<TProps> = ({ title, onClick, onMenuClick }) => {
   return (
     <Wrapper onClick={onClick}>
       <Title>
@@ -49,7 +50,7 @@ const Footer: FC<TProps> = ({ title, onClick }) => {
         >
           <Name>{title}</Name>
         </Tooltip>
-        <MenuButton options={menuOptions}>
+        <MenuButton options={menuOptions} onClick={onMenuClick}>
           <MenuWrapper>
             <IconButton path="shape/more-l.svg" mRight={0} />
           </MenuWrapper>
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
index c9553141a..fb6ff0dcc 100755
--- a/src/components/Folder/index.tsx
+++ b/src/components/Folder/index.tsx
@@ -28,6 +28,7 @@ type TProps = {
   editable?: boolean
   onEdit?: () => void
   onSelect?: () => void
+  onMenuClick?: (key: string) => void
   size?: TSIZE_SM
 }
 
@@ -40,6 +41,7 @@ const Folder: FC<TProps> = ({
   editable = false,
   onEdit = log,
   onSelect = log,
+  onMenuClick = log,
 }) => {
   return (
     <Wrapper testid="folder" size={size}>
@@ -50,7 +52,7 @@ const Folder: FC<TProps> = ({
       )} */}
       <TabShape />
       <Content total={total} lock={lock} updatedAt={updatedAt} />
-      <Footer title={title} onClick={onSelect} />
+      <Footer title={title} onClick={onSelect} onMenuClick={onMenuClick} />
     </Wrapper>
   )
 }
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 969e064d2..6437cd25f 100755
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -8,7 +8,7 @@ import { FC, ReactNode, useState, useRef, memo } from 'react'
 import { hideAll } from 'tippy.js'
 
 import type { TTooltipPlacement } from '@/spec'
-import { css, buildLog, isDescendant } from '@/utils'
+import { css, buildLog, isDescendant, isString } from '@/utils'
 import { useOutsideClick } from '@/hooks'
 
 import ConfirmFooter from './ConfirmFooter'
@@ -17,6 +17,7 @@ import { FOOTER_BEHAVIOR } from './constant'
 import {
   StyledTippy,
   NoPaddingStyledTippy,
+  ChildrenWrapper,
   ContentWrapper,
   TopArrow,
   BottomArrow,
@@ -46,7 +47,7 @@ type TProps = {
    * z-index is a magic number for IconSwitcher's mask situation,
    * DO NOT USE unless you know what you are doing
    *  在类似 IconSwitcher 的场景下（有一个基于 positon: absolute 的滑动遮罩）的场景下，需要将外层
-   * 的 ContentWrapper z-index 置为 1, 否则滑动遮罩会在最外面。
+   * 的 ChildrenWrapper z-index 置为 1, 否则滑动遮罩会在最外面。
    *
    * 理论上 zIndex 一直设置为 1，也没问题，但是会导致某些使用了 Tooltip 的地方有严重的粘滞感，比如 “CopyRight” 那里。
    * 暂时没有精力看 Tippy 的具体实现，小心使用。
@@ -79,24 +80,25 @@ const Tooltip: FC<TProps> = ({
   const [active, setActive] = useState(false)
 
   const ContentComp = showArrow ? (
-    <ContentWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
+    <ChildrenWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
       {active && placement === 'bottom' && <TopArrow />}
       {active && placement === 'top' && <BottomArrow />}
       {active && placement === 'right' && <LeftArrow />}
 
       <div>{children}</div>
-    </ContentWrapper>
+    </ChildrenWrapper>
   ) : (
-    <ContentWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
+    <ChildrenWrapper contentHeight={contentHeight} forceZIndex={forceZIndex}>
       <div>{children}</div>
-    </ContentWrapper>
+    </ChildrenWrapper>
   )
 
   const contentRef = useRef()
 
   const PopoverContent = (
-    <div
+    <ContentWrapper
       ref={contentRef}
+      hasMaxWidth={isString(content)}
       onClick={() => {
         if (hideOnClick) instance?.hide()
       }}
@@ -112,7 +114,7 @@ const Tooltip: FC<TProps> = ({
           behavior={behavior}
         />
       )}
-    </div>
+    </ContentWrapper>
   )
 
   const ref = useRef()
diff --git a/src/components/Tooltip/styles/index.ts b/src/components/Tooltip/styles/index.ts
index d86008f30..482815e9d 100755
--- a/src/components/Tooltip/styles/index.ts
+++ b/src/components/Tooltip/styles/index.ts
@@ -27,11 +27,14 @@ export const NoPaddingStyledTippy = styled(StyledTippy)`
   }
 `
 type TContentWrapper = { contentHeight: string; forceZIndex: boolean }
-export const ContentWrapper = styled.div<TContentWrapper>`
+export const ChildrenWrapper = styled.div<TContentWrapper>`
   position: relative;
   height: ${({ contentHeight }) => contentHeight};
   z-index: ${({ forceZIndex }) => (forceZIndex ? 1 : 0)};
 `
+export const ContentWrapper = styled.div<{ hasMaxWidth: boolean }>`
+  max-width: ${({ hasMaxWidth }) => (hasMaxWidth ? '180px' : 'auto')};
+`
 const Arrow = styled.div`
   position: absolute;
   ${css.circle(4)};
diff --git a/src/containers/tool/CollectionFolder/CategoryCardList.tsx b/src/containers/tool/CollectionFolder/CategoryCardList.tsx
deleted file mode 100755
index a211ad755..000000000
--- a/src/containers/tool/CollectionFolder/CategoryCardList.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { FC, memo } from 'react'
-
-import type { TCollectionFolder, TPagedCollectionFolder } from '@/spec'
-import { cutRest } from '@/utils'
-
-import Folder from '@/components/Folder'
-import Pagi from '@/components/Pagi'
-
-import { Wrapper, CardListWrapper } from './styles/category_card_list'
-import { loadCategories, switchToUpdater } from './logic'
-
-type TProps = {
-  onSelect: (collection: TCollectionFolder) => void
-  data: TPagedCollectionFolder
-}
-
-const CategoryCardList: FC<TProps> = ({
-  data: { entries, pageNumber, pageSize, totalCount },
-  onSelect,
-}) => {
-  return (
-    <Wrapper>
-      <CardListWrapper>
-        {entries.map((cat) => (
-          <Folder
-            key={cat.id}
-            title={cutRest(cat.title, 10)}
-            total={cat.totalCount}
-            updatedAt={cat.updatedAt}
-            onEdit={() => switchToUpdater(cat)}
-            onSelect={() => onSelect(cat)}
-            editable
-          />
-        ))}
-      </CardListWrapper>
-
-      <Pagi
-        margin={{ left: '-20px' }}
-        pageNumber={pageNumber}
-        pageSize={pageSize}
-        totalCount={totalCount}
-        onChange={loadCategories}
-      />
-    </Wrapper>
-  )
-}
-
-export default memo(CategoryCardList)
diff --git a/src/containers/tool/CollectionFolder/Creator.tsx b/src/containers/tool/CollectionFolder/Creator.tsx
index 70b611648..b65bbeec3 100755
--- a/src/containers/tool/CollectionFolder/Creator.tsx
+++ b/src/containers/tool/CollectionFolder/Creator.tsx
@@ -5,7 +5,7 @@ import type { TCollectionFolder } from '@/spec'
 import { buildLog } from '@/utils'
 
 import Input from '@/components/Input'
-import { Button } from '@/components/Buttons'
+import { ArrowButton, Button } from '@/components/Buttons'
 import { Br, Space, SpaceGrow } from '@/components/Common'
 import Folder from '@/components/Folder'
 import IconText from '@/components/IconText'
@@ -29,7 +29,7 @@ import {
   categoryOnChange,
   privateOnChange,
   onCategoryCreate,
-  onModalClose,
+  switchToSetter,
 } from './logic'
 
 /* eslint-disable-next-line */
@@ -38,10 +38,9 @@ const log = buildLog('C:CollectionFolder:Creator')
 type TProps = {
   data: TCollectionFolder
   show: boolean
-  hasLockAuth: boolean
 }
 
-const Creator: FC<TProps> = ({ data, show, hasLockAuth }) => (
+const Creator: FC<TProps> = ({ data, show }) => (
   <Wrapper show={show} className="normal-form">
     <Header>创建新收藏夹</Header>
     <InnerWrapper>
@@ -91,18 +90,12 @@ const Creator: FC<TProps> = ({ data, show, hasLockAuth }) => (
         </FormItemWrapper>
         <SpaceGrow />
         <Footer>
-          <Button
-            type="primary"
-            onClick={onModalClose}
-            size="small"
-            noBorder
-            ghost
-          >
-            取消
-          </Button>
-          <Space right={10} />
+          <ArrowButton size="tiny" direction="left" onClick={switchToSetter}>
+            上一步
+          </ArrowButton>
+          <Space right={18} />
           <Button type="primary" onClick={onCategoryCreate} size="small">
-            保存
+            创建
           </Button>
           <Space right={50} />
         </Footer>
diff --git a/src/containers/tool/CollectionFolder/Setter.tsx b/src/containers/tool/CollectionFolder/Setter.tsx
index 6494c43b7..c0870ad76 100755
--- a/src/containers/tool/CollectionFolder/Setter.tsx
+++ b/src/containers/tool/CollectionFolder/Setter.tsx
@@ -1,4 +1,4 @@
-import { FC, memo } from 'react'
+import { FC, memo, useCallback } from 'react'
 import { TID } from '@/spec'
 
 import { Button } from '@/components/Buttons'
@@ -14,53 +14,64 @@ import {
   Footer,
 } from './styles/setter'
 
-import { setContent, unSetContent, switchToCreator } from './logic'
+import {
+  setContent,
+  unSetContent,
+  switchToCreator,
+  switchToUpdater,
+} from './logic'
 
 type TProps = {
   show: boolean
   selectedId: TID
 }
 
-const Setter: FC<TProps> = ({ show, selectedId }) => (
-  <Wrapper show={show}>
-    <Header>
-      添加<Artiment>某篇文章或评论</Artiment>到收藏夹
-    </Header>
-    <ListWrapper>
-      <FolderWrapper>
-        <Folder lock />
-      </FolderWrapper>
+const Setter: FC<TProps> = ({ show, selectedId }) => {
+  const handleMenu = useCallback((key) => {
+    if (key === 'edit') switchToUpdater()
+  }, [])
+
+  return (
+    <Wrapper show={show}>
+      <Header>
+        添加<Artiment>某篇文章或评论</Artiment>到收藏夹
+      </Header>
+      <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 />
-      </FolderWrapper>
-    </ListWrapper>
-    <Footer>
-      选择要收入的收藏夹，或者
-      <Space right={10} />
-      <Button type="primary" onClick={switchToCreator} size="small" ghost>
-        创建新收藏夹
-      </Button>
-    </Footer>
-  </Wrapper>
-)
+        <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 />
+        </FolderWrapper>
+      </ListWrapper>
+      <Footer>
+        选择要收入的收藏夹，或者
+        <Space right={10} />
+        <Button type="primary" onClick={switchToCreator} size="small" ghost>
+          创建新收藏夹
+        </Button>
+      </Footer>
+    </Wrapper>
+  )
+}
 
 export default memo(Setter)
diff --git a/src/containers/tool/CollectionFolder/Updater.tsx b/src/containers/tool/CollectionFolder/Updater.tsx
index 86b9b2bcf..ff04507be 100755
--- a/src/containers/tool/CollectionFolder/Updater.tsx
+++ b/src/containers/tool/CollectionFolder/Updater.tsx
@@ -1,19 +1,24 @@
 import { FC, memo } from 'react'
 
+import { ICON } from '@/config'
 import type { TCollectionFolder } from '@/spec'
-import { ICON_CMD } from '@/config'
 import { buildLog } from '@/utils'
 
-import { Radio } from '@/components/Switcher'
 import Input from '@/components/Input'
-import { Button } from '@/components/Buttons'
-
+import { ArrowButton, Button } from '@/components/Buttons'
+import { Br, Space, SpaceGrow } from '@/components/Common'
+import Folder from '@/components/Folder'
+import IconText from '@/components/IconText'
+import Checker from '@/components/Checker'
 import Tooltip from '@/components/Tooltip'
-import { Space } from '@/components/Common'
-import SectionLabel from '@/components/SectionLabel'
 
 import {
   Wrapper,
+  Header,
+  InnerWrapper,
+  SidebarWrapper,
+  TipsText,
+  NoteText,
   EditWrapper,
   FormItemWrapper,
   FormLabel,
@@ -24,85 +29,89 @@ import {
 import {
   categoryOnChange,
   privateOnChange,
-  onCategoryUpdate,
-  onCategoryDelete,
+  onCategoryCreate,
+  switchToSetter,
 } from './logic'
 
 /* eslint-disable-next-line */
-const log = buildLog('C:Favorites:Updater')
+const log = buildLog('C:CollectionFolder:Updater')
 
 type TProps = {
   data: TCollectionFolder
   show: boolean
-  hasLockAuth: boolean
 }
-const Updater: FC<TProps> = ({ data, show, hasLockAuth }) => (
+
+const Updater: FC<TProps> = ({ data, show }) => (
   <Wrapper show={show} className="normal-form">
-    <SectionLabel
-      title={`编辑收藏夹 - ${data.title}`}
-      iconSrc={`${ICON_CMD}/edit.svg`}
-    />
-    <EditWrapper>
-      <FormItemWrapper>
-        <FormLabel>标题</FormLabel>
-        <FormInput>
-          <Input
-            placeholder="收藏夹标题"
-            value={data.title}
-            onChange={categoryOnChange('title')}
-          />
-        </FormInput>
-      </FormItemWrapper>
-      <FormItemWrapper>
-        <FormLabel>描述</FormLabel>
-        <FormInput>
-          <Input
-            value={data.desc}
-            onChange={categoryOnChange('desc')}
-            placeholder="收藏什么的？"
-            behavior="textarea"
-          />
-        </FormInput>
-      </FormItemWrapper>
+    <Header>编辑收藏夹</Header>
+    <InnerWrapper>
+      <SidebarWrapper>
+        <Folder lock />
+        <Br bottom={30} />
+        <IconText iconSrc={`${ICON}/route/light.svg`}>说明</IconText>
+        <TipsText>编辑仅会影响收藏夹封面，已收藏内容不受影响。</TipsText>
+        <SpaceGrow />
+        <Br bottom={42} />
 
-      {hasLockAuth && (
+        <Tooltip
+          trigger="click"
+          content="删除后收藏夹内的内容将全部丢失，确定继续？"
+          behavior="delete-confirm"
+        >
+          <Button type="red" size="small" ghost>
+            删除收藏夹
+          </Button>
+        </Tooltip>
+      </SidebarWrapper>
+      <EditWrapper>
+        <FormItemWrapper>
+          <FormLabel>收藏夹标题</FormLabel>
+          <FormInput>
+            <Input
+              placeholder="//必填项"
+              value={data.title}
+              onChange={categoryOnChange('title')}
+            />
+          </FormInput>
+        </FormItemWrapper>
+        <FormItemWrapper>
+          <FormLabel>描述信息</FormLabel>
+          <FormInput>
+            <Input
+              value={data.desc}
+              onChange={categoryOnChange('desc')}
+              placeholder="//可选项"
+              behavior="textarea"
+            />
+          </FormInput>
+        </FormItemWrapper>
         <FormItemWrapper>
-          <FormLabel>隐私</FormLabel>
-          <Radio
-            items={[
-              {
-                value: '公开',
-                key: false,
-              },
-              {
-                value: '不公开',
-                key: true,
-                dimOnActive: true,
-              },
-            ]}
-            activeKey={data.private}
-            onChange={privateOnChange}
-          />
+          <Checker
+            checked={false}
+            // onChange={privateOnChange}
+            // onChange={(checked) => updateWorks('isOSS', checked)}
+            size="small"
+          >
+            上锁
+          </Checker>
+          {/* <NoteText>
+            完全公开，允许互联网上的任何人查看该收藏夹里的内容。
+          </NoteText> */}
+          <NoteText>不公开，收藏夹里的内容仅自己可见。</NoteText>
         </FormItemWrapper>
-      )}
-    </EditWrapper>
-    <Footer>
-      <Tooltip
-        content="删除收藏夹及包含的内容，是否继续?"
-        trigger="click"
-        hideOnClick={false}
-        // behavior="confirm"
-        // onConfirm={onCategoryDelete}
-      >
-        <Button type="red" ghost>
-          删除
-        </Button>
-      </Tooltip>
-      <Space right={10} />
-      <Button type="primary" onClick={onCategoryUpdate}>
-        保存
-      </Button>
-    </Footer>
+        <SpaceGrow />
+        <Footer>
+          <ArrowButton size="tiny" direction="left" onClick={switchToSetter}>
+            上一步
+          </ArrowButton>
+          <Space right={18} />
+          <Button type="primary" onClick={onCategoryCreate} size="small">
+            更新
+          </Button>
+          <Space right={50} />
+        </Footer>
+      </EditWrapper>
+    </InnerWrapper>
   </Wrapper>
 )
 
diff --git a/src/containers/tool/CollectionFolder/index.tsx b/src/containers/tool/CollectionFolder/index.tsx
index cdd938445..5673da1bd 100755
--- a/src/containers/tool/CollectionFolder/index.tsx
+++ b/src/containers/tool/CollectionFolder/index.tsx
@@ -49,7 +49,6 @@ const CollectionFolderContainer: FC<TProps> = ({
     editCategoryData,
     pagedCategoriesData,
     isSelfViewing,
-    hasLockAuth,
   } = store
 
   const { entries } = pagedCategoriesData
@@ -79,18 +78,9 @@ const CollectionFolderContainer: FC<TProps> = ({
             show={isSetterView}
             // selectedId={viewingData.favoritedCategoryId}
             selectedId="1"
-            // hasLockAuth={hasLockAuth}
-          />
-          <Creator
-            data={editCategoryData}
-            show={isCreatorView}
-            hasLockAuth={hasLockAuth}
-          />
-          <Updater
-            data={editCategoryData}
-            show={isUpdaterView}
-            hasLockAuth={hasLockAuth}
           />
+          <Creator data={editCategoryData} show={isCreatorView} />
+          <Updater data={editCategoryData} show={isUpdaterView} />
         </Wrapper>
       </Modal>
     </Fragment>
diff --git a/src/containers/tool/CollectionFolder/logic.ts b/src/containers/tool/CollectionFolder/logic.ts
index bd480fd7b..0d9e00153 100755
--- a/src/containers/tool/CollectionFolder/logic.ts
+++ b/src/containers/tool/CollectionFolder/logic.ts
@@ -64,8 +64,9 @@ export const loadCategories = (page = 1): void => {
   })
 }
 
-export const switchToUpdater = (editCategory): void => {
-  store.mark({ editCategory })
+// export const switchToUpdater = (editCategory): void => {
+export const switchToUpdater = (): void => {
+  // store.mark({ editCategory })
   store.changeViewTo('updater')
 }
 
@@ -73,14 +74,18 @@ export const switchToUpdater = (editCategory): void => {
 export const changeViewTo = curry((view, e) => store.changeViewTo(view))
 
 export const switchToCreator = (): void => {
-  store.mark({ createfromSetter: true })
+  store.mark({ actionFromSetter: true })
   store.changeViewTo('creator')
 }
 
+export const switchToSetter = (): void => {
+  store.changeViewTo('setter')
+}
+
 export const onModalClose = (): void => {
-  if (store.createfromSetter) {
-    store.mark({ createfromSetter: false })
-    return store.changeViewTo('setter')
+  if (store.actionFromSetter) {
+    store.mark({ actionFromSetter: false })
+    return switchToSetter()
   }
 
   store.mark({ showModal: false })
@@ -137,10 +142,10 @@ const DataSolver = [
   {
     match: asyncRes('createFavoriteCategory'),
     action: () => {
-      // createfromSetter
+      // actionFromSetter
       loadCategories()
-      if (store.createfromSetter) {
-        store.mark({ createfromSetter: false })
+      if (store.actionFromSetter) {
+        store.mark({ actionFromSetter: false })
         return store.changeViewTo('setter')
       }
       return onModalClose()
@@ -187,7 +192,7 @@ const DataSolver = [
     action: (e) => {
       const { thread } = e[EVENT.SET_FAVORITE_CONTENT].data
       store.changeViewTo('setter')
-      store.mark({ thread, createfromSetter: true })
+      store.mark({ thread, actionFromSetter: true })
     },
   },
 ]
diff --git a/src/containers/tool/CollectionFolder/store.ts b/src/containers/tool/CollectionFolder/store.ts
index 9c50b1eba..ed24409ce 100755
--- a/src/containers/tool/CollectionFolder/store.ts
+++ b/src/containers/tool/CollectionFolder/store.ts
@@ -38,8 +38,8 @@ const CollectionFolder = T.model('CollectionFolder', {
   showUpdater: T.optional(T.boolean, false),
   showCreator: T.optional(T.boolean, false),
   showSetter: T.optional(T.boolean, false),
-  // open creator from setter, so we can go back to setter based on this state
-  createfromSetter: T.optional(T.boolean, false),
+  // 创建或编辑的操作是否由 Setter 哪里发起，涉及文案，以及上一步、取消等逻辑
+  actionFromSetter: T.optional(T.boolean, false),
   thread: T.optional(
     T.enumeration([THREAD.POST, THREAD.JOB, THREAD.REPO]),
     THREAD.POST,
@@ -96,10 +96,6 @@ const CollectionFolder = T.model('CollectionFolder', {
       const { showModal, showUpdater, showCreator, showSetter } = self
       return showModal && showSetter && !showCreator && !showUpdater
     },
-    get hasLockAuth(): boolean {
-      const slf = self as TStore
-      return slf.isMemberOf('seniorMember') || slf.isMemberOf('sponsorMember')
-    },
   }))
   .actions((self) => ({
     authWarning(options): void {
diff --git a/src/containers/tool/CollectionFolder/styles/category_card_list.ts b/src/containers/tool/CollectionFolder/styles/category_card_list.ts
deleted file mode 100755
index 2e1cd0b1a..000000000
--- a/src/containers/tool/CollectionFolder/styles/category_card_list.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from 'styled-components'
-
-import { css } from '@/utils'
-
-export const Wrapper = styled.div`
-  margin-top: 30px;
-`
-export const CardListWrapper = styled.div`
-  ${css.flex()};
-  flex-wrap: wrap;
-`

From 3fa945bb2f178604a1f4a3e5a6f9a71cc76a077e Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 28 Jul 2021 21:29:21 +0800
Subject: [PATCH 7/8] style(arrow-button): adjust metric

---
 src/components/Buttons/ArrowButton.tsx        | 32 ++-------
 src/components/Buttons/styles/arrow_button.ts | 44 +++++++-----
 .../Buttons/styles/metircs/arrow_button.ts    | 71 ++++++++++++++-----
 3 files changed, 83 insertions(+), 64 deletions(-)

diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
index e7034793b..606417562 100755
--- a/src/components/Buttons/ArrowButton.tsx
+++ b/src/components/Buttons/ArrowButton.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import { FC, ReactNode, useRef, useState, useEffect, memo } from 'react'
+import { FC, ReactNode, memo } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON } from '@/config'
@@ -40,32 +40,12 @@ const ArrowButton: FC<TProps> = ({
       ? `${ICON}/shape/arrow.svg`
       : `${ICON}/shape/arrow-simple.svg`
 
-  const leftTextRef = useRef(null)
-  const rightTextRef = useRef(null)
-
-  const [leftChildWidth, setLeftTextWidth] = useState(50)
-  const [rightChildWidth, setRightTextWidth] = useState(50)
-
-  useEffect(() => {
-    if (leftTextRef) {
-      setLeftTextWidth(leftTextRef.current?.clientWidth)
-    }
-  }, [leftTextRef])
-
-  useEffect(() => {
-    if (rightTextRef) {
-      setRightTextWidth(rightTextRef.current?.clientWidth)
-    }
-  }, [rightTextRef])
-
-  const textWidth = direction === 'left' ? leftChildWidth : rightChildWidth
-
   return (
     <Wrapper
       onClick={() => !disabled && onClick()}
       dimWhenIdle={dimWhenIdle}
+      direction={direction}
       size={size}
-      width={textWidth}
       disabled={disabled}
     >
       {direction === 'left' ? (
@@ -76,15 +56,11 @@ const ArrowButton: FC<TProps> = ({
             src={iconSrc}
             disabled={disabled}
           />
-          <Text ref={leftTextRef} size={size}>
-            {children}
-          </Text>
+          <Text size={size}>{children}</Text>
         </>
       ) : (
         <>
-          <Text ref={rightTextRef} size={size}>
-            {children}
-          </Text>
+          <Text size={size}>{children}</Text>
           <RightIcon
             arrowStyle={arrowStyle}
             size={size}
diff --git a/src/components/Buttons/styles/arrow_button.ts b/src/components/Buttons/styles/arrow_button.ts
index 063ffd070..1d0d98e6c 100755
--- a/src/components/Buttons/styles/arrow_button.ts
+++ b/src/components/Buttons/styles/arrow_button.ts
@@ -4,30 +4,36 @@ import Img from '@/Img'
 import { css } from '@/utils'
 
 import {
-  getWidth,
   getIconSize,
   getFontSize,
   getMargin,
   getSimpleMargin,
+  //
+  getArrowTopOffset,
+  getArrowMaxWidth,
+  getArrowInitWidth,
 } from './metircs/arrow_button'
 
 type TWrapper = {
   disabled: boolean
   dimWhenIdle: boolean
+  direction: 'left' | 'right'
   size: string
-  width: number
 }
 export const Wrapper = styled.div<TWrapper>`
+  position: relative;
   ${css.flex('align-center')};
   opacity: ${({ dimWhenIdle, disabled }) =>
     dimWhenIdle || disabled ? '0.65' : 1};
-  min-width: ${({ size, width }) => getWidth(size, width)};
+  justify-content: ${({ direction }) =>
+    direction === 'left' ? 'flex-end' : 'flex-start'};
+  margin-left: ${({ size }) => getArrowMaxWidth(size)};
 
   &:hover {
     cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
     opacity: ${({ disabled }) => (disabled ? 0.65 : 1)};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Text = styled.div<{ size: string }>`
   font-size: ${({ size }) => getFontSize(size)};
@@ -42,33 +48,37 @@ export const Icon = styled(Img)<{ size: string }>`
 `
 type TIcon = { size: string; arrowStyle: string; disabled: boolean }
 export const LeftIcon = styled(Icon)<TIcon>`
+  position: absolute;
+  top: ${({ size }) => getArrowTopOffset(size)};
+  left: ${({ size }) => `-${getArrowInitWidth(size)}`};
+
+  opacity: 0.6;
   margin-right: ${({ size, arrowStyle }) =>
     arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};
 
   ${Wrapper}:hover & {
-    margin-left: ${({ arrowStyle, disabled }) => {
+    opacity: 1;
+    left: ${({ size, disabled }) => {
       if (disabled) return 0
-      return arrowStyle === 'default' ? '-4px' : '-2px'
+      return `-${getArrowMaxWidth(size)}`
     }};
-    /* margin-left: ${({ size, arrowStyle, disabled }) => {
-      return arrowStyle === 'default'
-        ? `-${getMargin(size, !disabled)}`
-        : `-${getSimpleMargin(size, !disabled)}`
-    }}; */
-    fill: #327ca1;
   }
 `
 export const RightIcon = styled(Icon)<TIcon>`
+  position: absolute;
+  top: ${({ size }) => getArrowTopOffset(size)};
+  right: ${({ size }) => `-${getArrowInitWidth(size)}`};
+
+  opacity: 0.6;
   margin-left: ${({ size, arrowStyle }) =>
     arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};
 
   ${Wrapper}:hover & {
-    margin-left: ${({ size, arrowStyle, disabled }) => {
-      return arrowStyle === 'default'
-        ? getMargin(size, !disabled)
-        : getSimpleMargin(size, !disabled)
+    opacity: 1;
+    right: ${({ size, disabled }) => {
+      if (disabled) return 0
+      return `-${getArrowMaxWidth(size)}`
     }};
-    fill: #327ca1;
   }
 
   transform: rotate(180deg);
diff --git a/src/components/Buttons/styles/metircs/arrow_button.ts b/src/components/Buttons/styles/metircs/arrow_button.ts
index 1134a6196..6e8a7ad4d 100644
--- a/src/components/Buttons/styles/metircs/arrow_button.ts
+++ b/src/components/Buttons/styles/metircs/arrow_button.ts
@@ -17,25 +17,6 @@ const MEDIUM_MARGIN_HOVER = 10
 const LARGE_MARGIN = 6
 const LARGE_MARGIN_HOVER = 10
 
-// arrow button should have width
-// otherwise the arrow will jump
-export const getWidth = (size: string, width = 30): string => {
-  switch (size) {
-    case SIZE.TINY: {
-      return `${width + TINY_SIZE + TINY_MARGIN_HOVER}px`
-    }
-    case SIZE.SMALL: {
-      return `${width + SMALL_SIZE + SMALL_MARGIN_HOVER}px`
-    }
-    case SIZE.MEDIUM: {
-      return `${width + MEDIUM_SIZE + MEDIUM_MARGIN_HOVER}px`
-    }
-    default: {
-      return `${width + LARGE_SIZE + LARGE_MARGIN_HOVER}px`
-    }
-  }
-}
-
 export const getIconSize = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
@@ -103,3 +84,55 @@ export const getSimpleMargin = (size: string, hover = false): string => {
     }
   }
 }
+
+//
+export const getArrowTopOffset = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '3px;'
+    }
+    case SIZE.SMALL: {
+      return '4px;'
+    }
+    case SIZE.MEDIUM: {
+      return '5px;'
+    }
+    default: {
+      return '6px;'
+    }
+  }
+}
+
+export const getArrowMaxWidth = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '18px;'
+    }
+    case SIZE.SMALL: {
+      return '20px;'
+    }
+    case SIZE.MEDIUM: {
+      return '25px;'
+    }
+    default: {
+      return '28px;'
+    }
+  }
+}
+
+export const getArrowInitWidth = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '15px;'
+    }
+    case SIZE.SMALL: {
+      return '17px;'
+    }
+    case SIZE.MEDIUM: {
+      return '20px;'
+    }
+    default: {
+      return '23px;'
+    }
+  }
+}

From 3c87907b602cd212d3c1bd0730b1fa2e1c6b7627 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Wed, 28 Jul 2021 21:44:05 +0800
Subject: [PATCH 8/8] feat(folder): add inactive concept

---
 src/components/Folder/Content.tsx             |  5 ++-
 src/components/Folder/Footer.tsx              | 40 +++++++++++--------
 src/components/Folder/index.tsx               | 23 +++++++----
 src/components/Folder/styles/content.ts       |  6 +--
 .../tool/CollectionFolder/Creator.tsx         |  2 +-
 .../tool/CollectionFolder/Updater.tsx         |  2 +-
 6 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/components/Folder/Content.tsx b/src/components/Folder/Content.tsx
index 3e42ff1eb..a8fbb0b95 100644
--- a/src/components/Folder/Content.tsx
+++ b/src/components/Folder/Content.tsx
@@ -9,11 +9,12 @@ type TProps = {
   total?: number
   updatedAt?: string
   lock?: boolean
+  inactive: boolean
 }
 
-const Content: FC<TProps> = ({ total, updatedAt, lock }) => {
+const Content: FC<TProps> = ({ total, updatedAt, lock, inactive }) => {
   return (
-    <Wrapper>
+    <Wrapper inactive={inactive}>
       {lock && <LockIcon src={`${ICON}/shape/lock.svg`} />}
       <Info>
         <Total>
diff --git a/src/components/Folder/Footer.tsx b/src/components/Folder/Footer.tsx
index 4b1c5a69a..55c368af0 100644
--- a/src/components/Folder/Footer.tsx
+++ b/src/components/Folder/Footer.tsx
@@ -31,30 +31,38 @@ const menuOptions = [
 
 type TProps = {
   title: string
+  inactive: boolean
   onClick: () => void
   onMenuClick?: (key: string) => void
 }
 
-const Footer: FC<TProps> = ({ title, onClick, onMenuClick }) => {
+const Footer: FC<TProps> = ({ title, onClick, onMenuClick, inactive }) => {
   return (
     <Wrapper onClick={onClick}>
       <Title>
-        <Tooltip
-          delay={600}
-          content={
-            <FolderInfoPopWrapper>
-              <DetailInfo />
-            </FolderInfoPopWrapper>
-          }
-          noPadding
-        >
+        {!inactive ? (
+          <Tooltip
+            delay={600}
+            content={
+              <FolderInfoPopWrapper>
+                <DetailInfo />
+              </FolderInfoPopWrapper>
+            }
+            noPadding
+          >
+            <Name>{title}</Name>
+          </Tooltip>
+        ) : (
           <Name>{title}</Name>
-        </Tooltip>
-        <MenuButton options={menuOptions} onClick={onMenuClick}>
-          <MenuWrapper>
-            <IconButton path="shape/more-l.svg" mRight={0} />
-          </MenuWrapper>
-        </MenuButton>
+        )}
+
+        {!inactive && (
+          <MenuButton options={menuOptions} onClick={onMenuClick}>
+            <MenuWrapper>
+              <IconButton path="shape/more-l.svg" mRight={0} />
+            </MenuWrapper>
+          </MenuButton>
+        )}
       </Title>
       <HintWrapper>
         {/* <LavaLampLoading size="small" /> */}
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
index fb6ff0dcc..68e502552 100755
--- a/src/components/Folder/index.tsx
+++ b/src/components/Folder/index.tsx
@@ -26,10 +26,11 @@ type TProps = {
   updatedAt?: string
   lock?: boolean
   editable?: boolean
+  size?: TSIZE_SM
+  inactive?: boolean
   onEdit?: () => void
   onSelect?: () => void
   onMenuClick?: (key: string) => void
-  size?: TSIZE_SM
 }
 
 const Folder: FC<TProps> = ({
@@ -38,6 +39,7 @@ const Folder: FC<TProps> = ({
   total = 12,
   updatedAt = '',
   lock = false,
+  inactive = false,
   editable = false,
   onEdit = log,
   onSelect = log,
@@ -45,14 +47,19 @@ const Folder: FC<TProps> = ({
 }) => {
   return (
     <Wrapper testid="folder" size={size}>
-      {/* {editable && (
-        <EditIconWrapper onClick={onEdit}>
-          <EditIcon src={`${ICON_CMD}/edit.svg`} />
-        </EditIconWrapper>
-      )} */}
       <TabShape />
-      <Content total={total} lock={lock} updatedAt={updatedAt} />
-      <Footer title={title} onClick={onSelect} onMenuClick={onMenuClick} />
+      <Content
+        total={total}
+        lock={lock}
+        updatedAt={updatedAt}
+        inactive={inactive}
+      />
+      <Footer
+        title={title}
+        onClick={onSelect}
+        onMenuClick={onMenuClick}
+        inactive={inactive}
+      />
     </Wrapper>
   )
 }
diff --git a/src/components/Folder/styles/content.ts b/src/components/Folder/styles/content.ts
index f05fc34cf..931f0aa66 100644
--- a/src/components/Folder/styles/content.ts
+++ b/src/components/Folder/styles/content.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ inactive: boolean }>`
   ${css.flex('align-end', 'justify-end')};
   position: relative;
   width: 100%;
@@ -22,8 +22,8 @@ export const Wrapper = styled.div`
   color: ${theme('thread.articleDigest')};
 
   &:hover {
-    border-color: #117eaf;
-    cursor: pointer;
+    border-color: ${({ inactive }) => (inactive ? 'transparent' : '#117eaf')};
+    cursor: ${({ inactive }) => (inactive ? 'normal' : 'pointer')};
   }
 `
 export const Info = styled.div``
diff --git a/src/containers/tool/CollectionFolder/Creator.tsx b/src/containers/tool/CollectionFolder/Creator.tsx
index b65bbeec3..d429b41a1 100755
--- a/src/containers/tool/CollectionFolder/Creator.tsx
+++ b/src/containers/tool/CollectionFolder/Creator.tsx
@@ -45,7 +45,7 @@ const Creator: FC<TProps> = ({ data, show }) => (
     <Header>创建新收藏夹</Header>
     <InnerWrapper>
       <SidebarWrapper>
-        <Folder lock />
+        <Folder inactive lock />
         <Br bottom={30} />
         <IconText iconSrc={`${ICON}/route/light.svg`}>Tips</IconText>
         <TipsText>
diff --git a/src/containers/tool/CollectionFolder/Updater.tsx b/src/containers/tool/CollectionFolder/Updater.tsx
index ff04507be..55457bb27 100755
--- a/src/containers/tool/CollectionFolder/Updater.tsx
+++ b/src/containers/tool/CollectionFolder/Updater.tsx
@@ -46,7 +46,7 @@ const Updater: FC<TProps> = ({ data, show }) => (
     <Header>编辑收藏夹</Header>
     <InnerWrapper>
       <SidebarWrapper>
-        <Folder lock />
+        <Folder inactive lock />
         <Br bottom={30} />
         <IconText iconSrc={`${ICON}/route/light.svg`}>说明</IconText>
         <TipsText>编辑仅会影响收藏夹封面，已收藏内容不受影响。</TipsText>