diff --git a/src/components/AlertBar/index.tsx b/src/components/AlertBar/index.tsx
index 28760bbe8..6d1a07bc2 100755
--- a/src/components/AlertBar/index.tsx
+++ b/src/components/AlertBar/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { buildLog } from '@/utils'
 
@@ -17,7 +17,7 @@ type TProps = {
   children: React.ReactNode
 }
 
-const AlertBar: React.FC<TProps> = ({ children }) => {
+const AlertBar: FC<TProps> = ({ children }) => {
   return <Wrapper testid="alertBar">{children}</Wrapper>
 }
 
diff --git a/src/components/AvatarsRow/MoreItem.tsx b/src/components/AvatarsRow/MoreItem.tsx
index afd6bde50..c654b4949 100644
--- a/src/components/AvatarsRow/MoreItem.tsx
+++ b/src/components/AvatarsRow/MoreItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { prettyNum } from '@/utils'
 import { Br } from '@/components/Common'
@@ -21,7 +21,7 @@ type TProps = Pick<
   'size' | 'total' | 'showTotalNumber' | 'onTotalSelect'
 >
 
-const MoreItem: React.FC<TProps> = ({
+const MoreItem: FC<TProps> = ({
   size,
   total,
   onTotalSelect,
diff --git a/src/components/AvatarsRow/RealAvatar.tsx b/src/components/AvatarsRow/RealAvatar.tsx
index b4886fc3a..4f7ad2f5c 100644
--- a/src/components/AvatarsRow/RealAvatar.tsx
+++ b/src/components/AvatarsRow/RealAvatar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TUser } from '@/spec'
 import Tooltip from '@/components/Tooltip'
@@ -20,7 +20,7 @@ type TProps = {
   onUserSelect: (user: TUser) => void
 }
 
-const RealAvatar: React.FC<TProps> = ({ user, size, onUserSelect }) => {
+const RealAvatar: FC<TProps> = ({ user, size, onUserSelect }) => {
   return (
     <Tooltip
       content={<UserPopContent>{user.nickname}</UserPopContent>}
diff --git a/src/components/AvatarsRow/index.tsx b/src/components/AvatarsRow/index.tsx
index ab2c2e1e3..816d65fc1 100755
--- a/src/components/AvatarsRow/index.tsx
+++ b/src/components/AvatarsRow/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import { compose, not, isNil, filter, reverse as reverseFn, slice } from 'ramda'
 import { trackWindowScroll } from 'react-lazy-load-image-component'
 
@@ -52,7 +52,7 @@ export type TProps = {
   onTotalSelect: () => void
 }
 
-const AvatarsRow: React.FC<TProps> = ({
+const AvatarsRow: FC<TProps> = ({
   size = SIZE.SMALL,
   total,
   users = [],
diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
index 6c237cf6b..b81e71fe3 100755
--- a/src/components/Buttons/ArrowButton.tsx
+++ b/src/components/Buttons/ArrowButton.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useRef, useState, useEffect } from 'react'
+import React, { FC, useRef, useState, useEffect } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON } from '@/config'
@@ -26,7 +26,7 @@ type TProps = {
   arrowStyle?: 'default' | 'simple'
 }
 
-const ArrowButton: React.FC<TProps> = ({
+const ArrowButton: FC<TProps> = ({
   children = '下一步',
   onClick = log,
   size = SIZE.SMALL,
diff --git a/src/components/Buttons/ArrowLink.tsx b/src/components/Buttons/ArrowLink.tsx
index a6d90d9da..a82efbe9d 100644
--- a/src/components/Buttons/ArrowLink.tsx
+++ b/src/components/Buttons/ArrowLink.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON_CMD } from '@/config'
@@ -26,7 +26,7 @@ type TProps = {
   hoverColor?: string
 }
 
-const ArrowLink: React.FC<TProps> = ({
+const ArrowLink: FC<TProps> = ({
   className = '',
   children = '下一步',
   size = SIZE.SMALL,
diff --git a/src/components/Buttons/Button.tsx b/src/components/Buttons/Button.tsx
index 853d87ba9..81c430d44 100644
--- a/src/components/Buttons/Button.tsx
+++ b/src/components/Buttons/Button.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 
 import type { TSIZE_TSM } from '@/spec'
 import { SIZE } from '@/constant'
@@ -33,7 +33,7 @@ type TProps = {
   disabled?: boolean
 }
 
-const Button: React.FC<TProps> = ({
+const Button: FC<TProps> = ({
   children = 'button',
   ghost = false,
   type = 'primary',
diff --git a/src/components/Buttons/OrButton/HorizontalButton.tsx b/src/components/Buttons/OrButton/HorizontalButton.tsx
index 8ae548401..45be29b87 100644
--- a/src/components/Buttons/OrButton/HorizontalButton.tsx
+++ b/src/components/Buttons/OrButton/HorizontalButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TProps as TButtonProps } from './index'
 import { SIZE } from '@/constant'
@@ -12,7 +12,7 @@ import {
 
 type TProps = Omit<TButtonProps, 'direction'>
 
-const HorizontalButton: React.FC<TProps> = ({
+const HorizontalButton: FC<TProps> = ({
   onClick,
   size = SIZE.SMALL,
   activeKey,
diff --git a/src/components/Buttons/OrButton/VerticalButton.tsx b/src/components/Buttons/OrButton/VerticalButton.tsx
index 5fd802a2d..dc2f1ad9f 100644
--- a/src/components/Buttons/OrButton/VerticalButton.tsx
+++ b/src/components/Buttons/OrButton/VerticalButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TProps as TButtonProps } from './index'
 import { SIZE } from '@/constant'
@@ -12,7 +12,7 @@ import {
 
 type TProps = Omit<TButtonProps, 'direction'>
 
-const VerticalButton: React.FC<TProps> = ({
+const VerticalButton: FC<TProps> = ({
   onClick,
   size = SIZE.SMALL,
   activeKey,
diff --git a/src/components/Buttons/OrButton/index.tsx b/src/components/Buttons/OrButton/index.tsx
index 02e7c0a25..7c71f76d4 100644
--- a/src/components/Buttons/OrButton/index.tsx
+++ b/src/components/Buttons/OrButton/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TSIZE_SM } from '@/spec'
 
@@ -16,7 +16,7 @@ export type TProps = {
   }[]
 }
 
-const OrButton: React.FC<TProps> = ({ direction = 'row', ...restProps }) => {
+const OrButton: FC<TProps> = ({ direction = 'row', ...restProps }) => {
   return direction === 'row' ? (
     <HorizontalButton {...restProps} />
   ) : (
diff --git a/src/components/Buttons/YesOrNoButtons.tsx b/src/components/Buttons/YesOrNoButtons.tsx
index 20239f1bc..31202510d 100644
--- a/src/components/Buttons/YesOrNoButtons.tsx
+++ b/src/components/Buttons/YesOrNoButtons.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { Space } from '@/components/Common'
 import Button from './Button'
@@ -13,7 +13,7 @@ type TProps = {
   onConfirm?: () => void
 }
 
-const YesOrNoButton: React.FC<TProps> = ({
+const YesOrNoButton: FC<TProps> = ({
   align = 'center',
   cancelText = '取消',
   confirmText = '确定',
diff --git a/src/components/Cards/CommunityCard.tsx b/src/components/Cards/CommunityCard.tsx
index 1bebcf957..a0e93a698 100644
--- a/src/components/Cards/CommunityCard.tsx
+++ b/src/components/Cards/CommunityCard.tsx
@@ -2,7 +2,7 @@
  * cards for job MasonryCards view
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TCommunity } from '@/spec'
 import { cutRest } from '@/utils'
@@ -21,7 +21,7 @@ type TProps = {
   item: TCommunity
 }
 
-const CommunityCard: React.FC<TProps> = ({
+const CommunityCard: FC<TProps> = ({
   item: { id, logo, title, raw, desc, subscribersCount },
 }) => {
   return (
diff --git a/src/components/Cards/JobCard.tsx b/src/components/Cards/JobCard.tsx
index d4624aeae..92f35a4fa 100644
--- a/src/components/Cards/JobCard.tsx
+++ b/src/components/Cards/JobCard.tsx
@@ -2,7 +2,7 @@
  * cards for job MasonryCards view
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import TimeAgo from 'timeago-react'
 
 import { ICON } from '@/config'
@@ -54,7 +54,7 @@ type TProps = {
   }
 }
 
-const JobCard: React.FC<TProps> = ({
+const JobCard: FC<TProps> = ({
   item: { title, body, author, insertedAt, commentsCount, images },
 }) => {
   const fakeCommunity = {
diff --git a/src/components/Cards/WorksCard.tsx b/src/components/Cards/WorksCard.tsx
index 93d6505e2..f338111c0 100644
--- a/src/components/Cards/WorksCard.tsx
+++ b/src/components/Cards/WorksCard.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON, ICON_CMD } from '@/config'
 import { buildLog, cutRest } from '@/utils'
@@ -58,7 +58,7 @@ type TProps = {
   }
 }
 
-const WorksCard: React.FC<TProps> = ({
+const WorksCard: FC<TProps> = ({
   testid = 'works-card',
   item,
   withBg = false,
diff --git a/src/components/Checker/index.tsx b/src/components/Checker/index.tsx
index b3c5350a6..a86e8e6ca 100755
--- a/src/components/Checker/index.tsx
+++ b/src/components/Checker/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TSIZE_SM } from '@/spec'
 import { ICON } from '@/config'
@@ -24,7 +24,7 @@ type TProps = {
   onChange?: (checked: boolean) => void
 }
 
-const Checker: React.FC<TProps> = ({
+const Checker: FC<TProps> = ({
   checked = false,
   onChange = log,
   hiddenMode = false,
diff --git a/src/components/CommunityFaceLogo/index.tsx b/src/components/CommunityFaceLogo/index.tsx
index c3ea8191a..2cb4278d9 100755
--- a/src/components/CommunityFaceLogo/index.tsx
+++ b/src/components/CommunityFaceLogo/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import { isEmpty } from 'ramda'
 
 import { HCN } from '@/constant'
@@ -24,7 +24,7 @@ type TProps = {
   className?: string
 }
 
-const CommunityFaceLogo: React.FC<TProps> = ({
+const CommunityFaceLogo: FC<TProps> = ({
   noFill = false,
   src = '',
   raw = HCN,
diff --git a/src/components/CustomScroller/HorizontalScroller.tsx b/src/components/CustomScroller/HorizontalScroller.tsx
index 2c57cc713..91343a997 100755
--- a/src/components/CustomScroller/HorizontalScroller.tsx
+++ b/src/components/CustomScroller/HorizontalScroller.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useState, useRef, useCallback } from 'react'
+import React, { FC, useState, useRef, useCallback } from 'react'
 import { useTheme } from 'styled-components'
 import { Waypoint } from 'react-waypoint'
 import type { TThemeMap } from '@/spec'
@@ -38,7 +38,7 @@ type TProps = Omit<
 >
 
 // horizontal version
-const HorizontalScroller: React.FC<TProps> = ({
+const HorizontalScroller: FC<TProps> = ({
   height = '100%',
   width = '100%',
   innerHeight = '100%',
diff --git a/src/components/CustomScroller/VerticalScroller.tsx b/src/components/CustomScroller/VerticalScroller.tsx
index a350327d4..c6b305351 100755
--- a/src/components/CustomScroller/VerticalScroller.tsx
+++ b/src/components/CustomScroller/VerticalScroller.tsx
@@ -4,11 +4,10 @@
  *
  */
 
-import React, { useState, useRef, useCallback } from 'react'
+import React, { FC, useState, useRef, useCallback } from 'react'
 import { useTheme } from 'styled-components'
 import { Waypoint } from 'react-waypoint'
-import type { TSIZE_SML, TThemeMap } from '@/spec'
-import type { TScrollDirection } from './spec'
+import type { TThemeMap } from '@/spec'
 
 import { buildLog, debounce } from '@/utils'
 import { SIZE } from '@/constant'
@@ -30,7 +29,7 @@ const log = buildLog('c:CustomScroller:index')
 type TProps = Omit<TScrollProps, 'direction' | 'innerHeight'>
 
 // vertical version
-const VerticalScroller: React.FC<TProps> = ({
+const VerticalScroller: FC<TProps> = ({
   height = '100%',
   width = '100%',
   showShadow = true,
diff --git a/src/components/CustomScroller/index.tsx b/src/components/CustomScroller/index.tsx
index 0afb67c3b..bc4c6f4cb 100755
--- a/src/components/CustomScroller/index.tsx
+++ b/src/components/CustomScroller/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TSIZE_SML } from '@/spec'
 import type { TDirection, TScrollDirection } from './spec'
@@ -28,7 +28,7 @@ export type TProps = {
   onScrollDirectionChange?: (dir: TScrollDirection) => void
 }
 
-const CustomScroller: React.FC<TProps> = ({
+const CustomScroller: FC<TProps> = ({
   children,
   direction = 'vertical',
   ...restProps
diff --git a/src/components/DigestSentence/index.tsx b/src/components/DigestSentence/index.tsx
index 08e71196a..13775c712 100755
--- a/src/components/DigestSentence/index.tsx
+++ b/src/components/DigestSentence/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import { buildLog } from '@/utils'
@@ -34,7 +34,7 @@ type TProps = {
   right?: number
 }
 
-const DigestSentence: React.FC<TProps> = ({
+const DigestSentence: FC<TProps> = ({
   testid = 'digest-sentence',
   children = '可能是最性感的开发者社区，来为你心爱的作品建立...',
   onPreview = log,
diff --git a/src/components/DotDivider/index.tsx b/src/components/DotDivider/index.tsx
index d3d42bac3..07b78fc1a 100755
--- a/src/components/DotDivider/index.tsx
+++ b/src/components/DotDivider/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { buildLog } from '@/utils'
 import { Wrapper } from './styles'
@@ -17,7 +17,7 @@ export type TProps = {
   radius?: number
   space?: number
 }
-const DotDivider: React.FC<TProps> = ({
+const DotDivider: FC<TProps> = ({
   radius = 3,
   space = 3,
   className = 'dot-divider-class',
diff --git a/src/components/ErrorPage/index.tsx b/src/components/ErrorPage/index.tsx
index 15c1a9eaa..d5fb62bbf 100755
--- a/src/components/ErrorPage/index.tsx
+++ b/src/components/ErrorPage/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 
@@ -40,7 +40,7 @@ export type TProps = {
   metric?: string
 }
 
-const ErrorPage: React.FC<TProps> = ({
+const ErrorPage: FC<TProps> = ({
   testid = 'error-page',
   errorCode,
   metric = METRIC.COMMUNITY,
diff --git a/src/components/FiltersMenu/Header.tsx b/src/components/FiltersMenu/Header.tsx
index 21c382969..2da11a3f2 100644
--- a/src/components/FiltersMenu/Header.tsx
+++ b/src/components/FiltersMenu/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import Tooltip from '@/components/Tooltip'
@@ -18,7 +18,7 @@ type TProps = {
   onReset: () => void
 }
 
-const Header: React.FC<TProps> = ({ title, showReset, onReset }) => {
+const Header: FC<TProps> = ({ title, showReset, onReset }) => {
   return (
     <Wrapper>
       <Title active={showReset}>{title}</Title>
diff --git a/src/components/FiltersMenu/index.tsx b/src/components/FiltersMenu/index.tsx
index 6200ad59c..11e8e3dd4 100755
--- a/src/components/FiltersMenu/index.tsx
+++ b/src/components/FiltersMenu/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useState, useCallback } from 'react'
+import React, { FC, useState, useCallback } from 'react'
 import { merge, equals } from 'ramda'
 
 import type { TFiltersMenuItems } from '@/spec'
@@ -42,7 +42,7 @@ type TProps = {
   withDivider?: boolean
 }
 
-const FiltersMenu: React.FC<TProps> = ({
+const FiltersMenu: FC<TProps> = ({
   title = '',
   items,
   activeid = null,
diff --git a/src/components/IconText/index.tsx b/src/components/IconText/index.tsx
index 3951e9321..02ab3427f 100755
--- a/src/components/IconText/index.tsx
+++ b/src/components/IconText/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -23,7 +23,7 @@ type TProps = {
   margin?: string
 }
 
-const IconText: React.FC<TProps> = ({
+const IconText: FC<TProps> = ({
   iconSrc,
   round = false,
   children,
diff --git a/src/components/ImgFallback/Avatar.tsx b/src/components/ImgFallback/Avatar.tsx
index 6a0f7c2a4..7fcadecda 100644
--- a/src/components/ImgFallback/Avatar.tsx
+++ b/src/components/ImgFallback/Avatar.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { buildLog } from '@/utils'
 
@@ -14,7 +14,7 @@ import { Wrapper, Name } from './styles/avatar'
 /* eslint-disable-next-line */
 const log = buildLog('c:ImgFallback:Avatar')
 
-const Avatar: React.FC<TProps> = ({
+const Avatar: FC<TProps> = ({
   testid = 'avatar-fallback',
   className = '',
   size = 15,
diff --git a/src/components/ImgFallback/Work.tsx b/src/components/ImgFallback/Work.tsx
index 129eb06b1..ef348e691 100644
--- a/src/components/ImgFallback/Work.tsx
+++ b/src/components/ImgFallback/Work.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { getRandomInt } from '@/utils'
 import { Wrapper, Row, Dice } from './styles/work'
@@ -131,7 +131,7 @@ type TProps = {
   testid?: string
 }
 
-const Work: React.FC<TProps> = ({ testid = 'image-fallbak-work' }) => {
+const Work: FC<TProps> = ({ testid = 'image-fallbak-work' }) => {
   return <Wrapper testid={testid}>{rollTheDice()}</Wrapper>
 }
 
diff --git a/src/components/ImgFallback/index.tsx b/src/components/ImgFallback/index.tsx
index 96a8cf021..9b3061b02 100755
--- a/src/components/ImgFallback/index.tsx
+++ b/src/components/ImgFallback/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TUser } from '@/spec'
 import { buildLog } from '@/utils'
@@ -31,7 +31,7 @@ type TProps = {
   type?: 'avatar' | 'work'
 } & TAvatarProps
 
-const ImgFallback: React.FC<TProps> = ({ type = 'avatar', ...restProps }) => {
+const ImgFallback: FC<TProps> = ({ type = 'avatar', ...restProps }) => {
   switch (type) {
     case 'work': {
       return <Work />
diff --git a/src/components/Input/Textarea.tsx b/src/components/Input/Textarea.tsx
index 751fc0594..fdc3ee9ee 100644
--- a/src/components/Input/Textarea.tsx
+++ b/src/components/Input/Textarea.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useCallback } from 'react'
+import React, { FC, useCallback } from 'react'
 import { pickBy } from 'ramda'
 
 import { buildLog } from '@/utils'
@@ -21,7 +21,7 @@ type TProps = {
   onChange?: (e) => void | null
 }
 
-const Textarea: React.FC<TProps> = ({
+const Textarea: FC<TProps> = ({
   onChange = null,
   testid = 'textarea',
   ...restProps
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index eeb4c32af..063ae7840 100755
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useCallback } from 'react'
+import React, { FC, useCallback } from 'react'
 import { pickBy } from 'ramda'
 
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -36,7 +36,7 @@ type TProps = {
   onChange?: (e) => void | null
 }
 
-const Input: React.FC<TProps> = ({
+const Input: FC<TProps> = ({
   behavior = 'default',
   onChange = null,
   prefixIcon = null,
diff --git a/src/components/MasonryCards/index.tsx b/src/components/MasonryCards/index.tsx
index 9b9ff29d5..f358a4a06 100755
--- a/src/components/MasonryCards/index.tsx
+++ b/src/components/MasonryCards/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import Masonry from 'react-masonry-css'
 
 import { buildLog } from '@/utils'
@@ -20,7 +20,7 @@ type TProps = {
   children: React.ReactNode
 }
 
-const MasonryCards: React.FC<TProps> = ({
+const MasonryCards: FC<TProps> = ({
   testid = 'masonry-cards',
   column = 2,
   children,
diff --git a/src/components/NaviCatalog/Dashboard.tsx b/src/components/NaviCatalog/Dashboard.tsx
index 496242243..12c9b163e 100644
--- a/src/components/NaviCatalog/Dashboard.tsx
+++ b/src/components/NaviCatalog/Dashboard.tsx
@@ -4,8 +4,7 @@
  *
  */
 
-import React from 'react'
-import T from 'prop-types'
+import React, { FC } from 'react'
 import { last } from 'ramda'
 
 import { ICON } from '@/config'
@@ -56,7 +55,7 @@ type TProps = {
  * 显示成成层叠结构的样式，有子目录的可以回上一层，没有子目录的则作为只读显示，
  * 类似抽屉的样子
  */
-const Dashboard: React.FC<TProps> = ({ viewPath, goCatalog }) => {
+const Dashboard: FC<TProps> = ({ viewPath, goCatalog }) => {
   const [headLevels, lastLevel] = getLevels(viewPath)
   /* 判断是不是第二层 */
   const is2ecLevel = viewPath.length === 1
@@ -91,11 +90,4 @@ const Dashboard: React.FC<TProps> = ({ viewPath, goCatalog }) => {
   )
 }
 
-Dashboard.propTypes = {
-  viewPath: T.any.isRequired, // TODO
-  goCatalog: T.func.isRequired,
-}
-
-Dashboard.defaultProps = {}
-
 export default React.memo(Dashboard)
diff --git a/src/components/NaviCatalog/Header.tsx b/src/components/NaviCatalog/Header.tsx
index f4688174d..9139fb1c7 100644
--- a/src/components/NaviCatalog/Header.tsx
+++ b/src/components/NaviCatalog/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import { nilOrEmpty } from '@/utils'
@@ -29,7 +29,7 @@ type TProps = {
   onLocate: () => void
 }
 
-const Header: React.FC<TProps> = ({
+const Header: FC<TProps> = ({
   testid = 'navi-catalog-header',
   title,
   activeCatalogId,
diff --git a/src/components/NaviCatalog/List/index.tsx b/src/components/NaviCatalog/List/index.tsx
index faed42f8d..433cf1d01 100644
--- a/src/components/NaviCatalog/List/index.tsx
+++ b/src/components/NaviCatalog/List/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import { map, prop, includes } from 'ramda'
 
 import { buildLog } from '@/utils'
@@ -56,7 +56,7 @@ type TProps = {
   onShowMore: () => void
 }
 
-const List: React.FC<TProps> = ({
+const List: FC<TProps> = ({
   menuMode,
   catalogItems,
   onItemSelect,
diff --git a/src/components/NaviCatalog/PinNumber.tsx b/src/components/NaviCatalog/PinNumber.tsx
index 777610165..28372b36f 100644
--- a/src/components/NaviCatalog/PinNumber.tsx
+++ b/src/components/NaviCatalog/PinNumber.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import T from 'prop-types'
+import React, { FC } from 'react'
 
 import { ICON_CMD } from '@/config'
 import Tooltip from '@/components/Tooltip'
@@ -13,7 +12,7 @@ type TProps = {
   pinNumberHoverType: 'pin' | 'unpin'
 }
 
-const PinNumber: React.FC<TProps> = ({ num, pinNumberHoverType }) => {
+const PinNumber: FC<TProps> = ({ num, pinNumberHoverType }) => {
   return (
     <Wrapper>
       <Num>{num}</Num>
diff --git a/src/components/NaviCatalog/index.tsx b/src/components/NaviCatalog/index.tsx
index 3c486cc48..f1fa51fe3 100755
--- a/src/components/NaviCatalog/index.tsx
+++ b/src/components/NaviCatalog/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { FC, useState, useCallback, useEffect } from 'react'
 import { find, findIndex, propEq, last } from 'ramda'
 
 import { URL_QUERY } from '@/constant'
@@ -43,7 +43,7 @@ type TProps = {
   onShowMore?: () => void
 }
 
-const NaviCatalog: React.FC<TProps> = ({
+const NaviCatalog: FC<TProps> = ({
   testid = 'navi-menu',
   title = '',
   items,
diff --git a/src/components/Navigator/MainEntries/DesktopView.tsx b/src/components/Navigator/MainEntries/DesktopView.tsx
index a4bc8fa18..8a8f15ecf 100644
--- a/src/components/Navigator/MainEntries/DesktopView.tsx
+++ b/src/components/Navigator/MainEntries/DesktopView.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import T from 'prop-types'
+import React, { FC } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
@@ -17,7 +16,7 @@ type TProps = {
   type: string
 }
 
-const DesktopView: React.FC<TProps> = ({ type }) => {
+const DesktopView: FC<TProps> = ({ type }) => {
   const router = useRouter()
   const mainPath = getRouteMainPath(router.asPath)
 
diff --git a/src/components/NoticeBar/Icon.tsx b/src/components/NoticeBar/Icon.tsx
index fc0cfe5c9..19f5e7eb3 100644
--- a/src/components/NoticeBar/Icon.tsx
+++ b/src/components/NoticeBar/Icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import { LockIcon, NoticeIcon } from './styles/icon'
@@ -7,7 +7,7 @@ type TProps = {
   type?: 'lock' | 'notice' | 'bot'
 }
 
-const Icon: React.FC<TProps> = ({ type = 'notice' }) => {
+const Icon: FC<TProps> = ({ type = 'notice' }) => {
   switch (type) {
     case 'lock': {
       return <LockIcon src={`${ICON}/shape/lock.svg`} />
diff --git a/src/components/NoticeBar/index.tsx b/src/components/NoticeBar/index.tsx
index b0a4c2428..78008e65f 100755
--- a/src/components/NoticeBar/index.tsx
+++ b/src/components/NoticeBar/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import TimeAgo from 'timeago-react'
 
@@ -29,7 +29,7 @@ type TProps = {
   timestamp?: string | null
 }
 
-const NoticeBar: React.FC<TProps> = ({
+const NoticeBar: FC<TProps> = ({
   testid = 'notice-bar',
   type = 'notice',
   user = null,
diff --git a/src/components/PagedContents/CommunityRecommends.tsx b/src/components/PagedContents/CommunityRecommends.tsx
index cb83c1e6a..1213475f1 100755
--- a/src/components/PagedContents/CommunityRecommends.tsx
+++ b/src/components/PagedContents/CommunityRecommends.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TCommunity } from '@/spec'
 
@@ -57,7 +57,7 @@ type TProps = {
   items?: TCommunity[]
 }
 
-const CommunityRecommends: React.FC<TProps> = ({ items = tmpItems }) => {
+const CommunityRecommends: FC<TProps> = ({ items = tmpItems }) => {
   return (
     <Wrapper>
       <Title>热门社区</Title>
diff --git a/src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx b/src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx
index bfef74401..60581e994 100644
--- a/src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx
+++ b/src/components/PostItem/DigestView/DesktopView/ActiveBadge.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TPost } from '@/spec'
 import { ICON } from '@/config'
@@ -9,7 +9,7 @@ type TProps = {
   item: TPost
 }
 
-const ActiveBadge: React.FC<TProps> = ({ item }) => {
+const ActiveBadge: FC<TProps> = ({ item }) => {
   return (
     <Wrapper hasComments={item.commentsCount > 0}>
       <ItemInner title="最后回复: 2020-03-11 14:33">
diff --git a/src/components/PostItem/DigestView/DesktopView/Body.tsx b/src/components/PostItem/DigestView/DesktopView/Body.tsx
index 8499c48f6..04ef78a10 100644
--- a/src/components/PostItem/DigestView/DesktopView/Body.tsx
+++ b/src/components/PostItem/DigestView/DesktopView/Body.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import TimeAgo from 'timeago-react'
 
 import type { TPost } from '@/spec'
@@ -26,7 +26,7 @@ type TProps = {
   onPreview?: (obj: TPost) => void
 }
 
-const Body: React.FC<TProps> = ({ item, onPreview }) => {
+const Body: FC<TProps> = ({ item, onPreview }) => {
   return (
     <Wrapper>
       <Extra>
diff --git a/src/components/PostItem/DigestView/DesktopView/Header.tsx b/src/components/PostItem/DigestView/DesktopView/Header.tsx
index d50407a29..155c71f4b 100644
--- a/src/components/PostItem/DigestView/DesktopView/Header.tsx
+++ b/src/components/PostItem/DigestView/DesktopView/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import Link from 'next/link'
 
 import type { TPost, TUser } from '@/spec'
@@ -23,7 +23,7 @@ type TProps = {
   onUserSelect?: (obj: TUser) => void
 }
 
-const Header: React.FC<TProps> = ({ item, onUserSelect }) => {
+const Header: FC<TProps> = ({ item, onUserSelect }) => {
   return (
     <Wrapper>
       <Brief>
diff --git a/src/components/PostItem/DigestView/DesktopView/index.tsx b/src/components/PostItem/DigestView/DesktopView/index.tsx
index f088c29fd..1ba01be8a 100644
--- a/src/components/PostItem/DigestView/DesktopView/index.tsx
+++ b/src/components/PostItem/DigestView/DesktopView/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TPost, TUser, TAccount } from '@/spec'
 import { ICON_BASE } from '@/config'
@@ -20,7 +20,7 @@ type TProps = {
   onAuthorSelect?: (obj: TAccount) => void
 }
 
-const DigestView: React.FC<TProps> = ({
+const DigestView: FC<TProps> = ({
   entry,
   cover,
   onPreview,
diff --git a/src/components/PostItem/DigestView/MobileView/Body.tsx b/src/components/PostItem/DigestView/MobileView/Body.tsx
index d20665e60..e8855c0fb 100644
--- a/src/components/PostItem/DigestView/MobileView/Body.tsx
+++ b/src/components/PostItem/DigestView/MobileView/Body.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TPost } from '@/spec'
 import { ICON_CMD } from '@/config'
@@ -16,7 +16,7 @@ type TProps = {
   onPreview?: (obj: TPost) => void
 }
 
-const Body: React.FC<TProps> = ({ item, onPreview }) => {
+const Body: FC<TProps> = ({ item, onPreview }) => {
   return (
     <Wrapper onClick={() => onPreview(item)}>
       <Title>{item.title}</Title>
diff --git a/src/components/PostItem/DigestView/MobileView/Footer.tsx b/src/components/PostItem/DigestView/MobileView/Footer.tsx
index 29bd501f2..13b3b0234 100644
--- a/src/components/PostItem/DigestView/MobileView/Footer.tsx
+++ b/src/components/PostItem/DigestView/MobileView/Footer.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TPost } from '@/spec'
 import { cutRest } from '@/utils'
@@ -19,7 +19,7 @@ type TProps = {
   item: TPost
 }
 
-const Footer: React.FC<TProps> = ({ item }) => {
+const Footer: FC<TProps> = ({ item }) => {
   return (
     <Wrapper>
       <Extra>
diff --git a/src/components/PostItem/DigestView/MobileView/Header.tsx b/src/components/PostItem/DigestView/MobileView/Header.tsx
index b02bcb56f..d894c7939 100644
--- a/src/components/PostItem/DigestView/MobileView/Header.tsx
+++ b/src/components/PostItem/DigestView/MobileView/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import TimeAgo from 'timeago-react'
 
 import type { TPost, TAccount } from '@/spec'
@@ -23,7 +23,7 @@ type TProps = {
   onAuthorSelect?: (obj: TAccount) => void
 }
 
-const Header: React.FC<TProps> = ({ cover, item, onAuthorSelect }) => {
+const Header: FC<TProps> = ({ cover, item, onAuthorSelect }) => {
   return (
     <Wrapper>
       <AuthorInfo>
diff --git a/src/components/PostItem/DigestView/MobileView/index.tsx b/src/components/PostItem/DigestView/MobileView/index.tsx
index 5a8886818..15428147a 100644
--- a/src/components/PostItem/DigestView/MobileView/index.tsx
+++ b/src/components/PostItem/DigestView/MobileView/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TPost, TAccount } from '@/spec'
 
@@ -17,7 +17,7 @@ type TProps = {
   onAuthorSelect?: (obj: TAccount) => void
 }
 
-const MobileView: React.FC<TProps> = ({
+const MobileView: FC<TProps> = ({
   entry,
   cover,
   onPreview,
diff --git a/src/components/PostItem/ListView.tsx b/src/components/PostItem/ListView.tsx
index 339e9a276..56a8a0597 100755
--- a/src/components/PostItem/ListView.tsx
+++ b/src/components/PostItem/ListView.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import TimeAgo from 'timeago-react'
 
 import type { TPost } from '@/spec'
@@ -27,7 +27,7 @@ type TProps = {
   onPreview?: (obj: TPost) => void
 }
 
-const ListView: React.FC<TProps> = ({ entry, onPreview }) => (
+const ListView: FC<TProps> = ({ entry, onPreview }) => (
   <React.Fragment>
     <SmallAvatar src={entry.author.avatar} />
     <Main>
diff --git a/src/components/PostItem/index.tsx b/src/components/PostItem/index.tsx
index 9cd00a856..7917b56be 100755
--- a/src/components/PostItem/index.tsx
+++ b/src/components/PostItem/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TPost, TUser, TAccount } from '@/spec'
 import { HCN, C11N } from '@/constant'
@@ -32,7 +32,7 @@ type TProps = {
   onAuthorSelect?: (obj: TAccount) => void
 }
 
-const PostItem: React.FC<TProps> = ({
+const PostItem: FC<TProps> = ({
   entry,
   onPreview = log,
   onUserSelect = log,
diff --git a/src/components/PromotionList/Spotlight.tsx b/src/components/PromotionList/Spotlight.tsx
index 72e4cf763..398d3fac5 100755
--- a/src/components/PromotionList/Spotlight.tsx
+++ b/src/components/PromotionList/Spotlight.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TItem } from './spec'
 import {
@@ -14,7 +14,7 @@ type TProps = {
   item: TItem
 }
 
-const Spotlight: React.FC<TProps> = ({ item }) => (
+const Spotlight: FC<TProps> = ({ item }) => (
   <Wrapper>
     <ItemWrapper>
       <Header>
diff --git a/src/components/PromotionList/WaitList.tsx b/src/components/PromotionList/WaitList.tsx
index 2c28df092..71f27cee6 100644
--- a/src/components/PromotionList/WaitList.tsx
+++ b/src/components/PromotionList/WaitList.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TItem } from './spec'
 import { Wrapper, Item } from './styles/wait_list'
@@ -9,7 +9,7 @@ type TProps = {
   setActiveId: (id: string) => void
 }
 
-const WaitList: React.FC<TProps> = ({ items, activeId, setActiveId }) => {
+const WaitList: FC<TProps> = ({ items, activeId, setActiveId }) => {
   return (
     <Wrapper>
       {items.map((item) => (
diff --git a/src/components/PromotionList/index.tsx b/src/components/PromotionList/index.tsx
index f76a76a50..dff433feb 100755
--- a/src/components/PromotionList/index.tsx
+++ b/src/components/PromotionList/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useState, useRef } from 'react'
+import React, { FC, useState, useRef } from 'react'
 import { findIndex } from 'ramda'
 
 import { ICON } from '@/config'
@@ -30,7 +30,7 @@ type TProps = {
   intervalSec?: number
 }
 
-const PromotionList: React.FC<TProps> = ({
+const PromotionList: FC<TProps> = ({
   show = true,
   onAbout = log,
   items = fakeItems,
diff --git a/src/components/Switcher/IconSwitcher.tsx b/src/components/Switcher/IconSwitcher.tsx
index 99f52853e..ba1afa630 100644
--- a/src/components/Switcher/IconSwitcher.tsx
+++ b/src/components/Switcher/IconSwitcher.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import { findIndex, propEq } from 'ramda'
 
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -76,7 +76,7 @@ type TProps = {
   onChange: (item: TItem) => void
 }
 
-const IconSwitcher: React.FC<TProps> = ({ items, activeKey, onChange }) => {
+const IconSwitcher: FC<TProps> = ({ items, activeKey, onChange }) => {
   const slideIndex = findIndex(propEq('key', activeKey), items)
 
   return (
diff --git a/src/components/Tooltip/ConfirmFooter.tsx b/src/components/Tooltip/ConfirmFooter.tsx
index 10f543cdb..5d11221da 100644
--- a/src/components/Tooltip/ConfirmFooter.tsx
+++ b/src/components/Tooltip/ConfirmFooter.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import Button from '@/components/Buttons/Button'
 import { Space } from '@/components/Common'
@@ -14,11 +14,7 @@ type TProps = {
   onCancel?: () => void
 }
 
-const ConfirmFooter: React.FC<TProps> = ({
-  onConfirm,
-  onCancel,
-  footerBehavior,
-}) => {
+const ConfirmFooter: FC<TProps> = ({ onConfirm, onCancel, footerBehavior }) => {
   let content = null
 
   switch (footerBehavior) {
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 1ef247533..752648d5c 100755
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useState, useRef } from 'react'
+import React, { FC, useState, useRef } from 'react'
 
 import type { TTooltipPlacement, TTooltipAnimation } from '@/spec'
 import { css, buildLog, isDescendant } from '@/utils'
@@ -47,7 +47,7 @@ type TProps = {
   onConfirm?: () => void
 }
 
-const Tooltip: React.FC<TProps> = ({
+const Tooltip: FC<TProps> = ({
   children,
   animation = 'scale',
   noPadding = false,
diff --git a/src/containers/content/CoolGuideContent/Content.tsx b/src/containers/content/CoolGuideContent/Content.tsx
index 8f8613f8c..c277ee4ab 100755
--- a/src/containers/content/CoolGuideContent/Content.tsx
+++ b/src/containers/content/CoolGuideContent/Content.tsx
@@ -4,10 +4,9 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { GUIDE } from '@/constant'
-
 import Pagi from '@/components/Pagi'
 
 import {
@@ -25,7 +24,7 @@ type TProps = {
   displayType: string
 }
 
-const Content: React.FC<TProps> = ({ displayType }) => {
+const Content: FC<TProps> = ({ displayType }) => {
   let DisplayContent
 
   switch (displayType) {
diff --git a/src/containers/content/CoolGuideContent/FilterBar.tsx b/src/containers/content/CoolGuideContent/FilterBar.tsx
index 715d7e27d..af7b05a9f 100644
--- a/src/containers/content/CoolGuideContent/FilterBar.tsx
+++ b/src/containers/content/CoolGuideContent/FilterBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON_CMD } from '@/config'
 import { mockNaviCatalogMenu } from '@/utils'
@@ -24,7 +24,7 @@ type TProps = {
   menuOnSelect: (id: string, type: string) => void
 }
 
-const FilterBar: React.FC<TProps> = ({ topFilter, menuOnSelect }) => {
+const FilterBar: FC<TProps> = ({ topFilter, menuOnSelect }) => {
   return (
     <Wrapper testid="filter-bar">
       <TopFilter>
diff --git a/src/containers/content/CoolGuideContent/Footer/index.tsx b/src/containers/content/CoolGuideContent/Footer/index.tsx
index 4ab1c2b54..535300855 100755
--- a/src/containers/content/CoolGuideContent/Footer/index.tsx
+++ b/src/containers/content/CoolGuideContent/Footer/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ArrowButton } from '@/components/Buttons'
 
@@ -24,7 +24,7 @@ type TProps = {
   mode?: string
 }
 
-const Footer: React.FC<TProps> = ({ mode }) => {
+const Footer: FC<TProps> = ({ mode }) => {
   return (
     <Wrapper center={mode === 'cover'}>
       <AboutBlock>
diff --git a/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx b/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx
index 8f949fd90..e958ead4d 100644
--- a/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx
+++ b/src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx
@@ -1,5 +1,4 @@
-import React, { useRef } from 'react'
-import T from 'prop-types'
+import React, { FC, useRef } from 'react'
 
 import {
   Wrapper,
@@ -20,7 +19,7 @@ type TProps = {
   onBlur?: () => void
 }
 
-const InputBox: React.FC<TProps> = ({
+const InputBox: FC<TProps> = ({
   showMask = false,
   value = '',
   placeholder = '',
diff --git a/src/containers/content/CoolGuideContent/SearchCover/index.tsx b/src/containers/content/CoolGuideContent/SearchCover/index.tsx
index 4b96b930a..9fd7020f3 100644
--- a/src/containers/content/CoolGuideContent/SearchCover/index.tsx
+++ b/src/containers/content/CoolGuideContent/SearchCover/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { Br } from '@/components/Common'
 
@@ -11,7 +11,7 @@ type TProps = {
   testid?: string
 }
 
-const SearchCover: React.FC<TProps> = ({ testid = 'search-cover' }) => {
+const SearchCover: FC<TProps> = ({ testid = 'search-cover' }) => {
   return (
     <Wrapper testid={testid}>
       <Header>
diff --git a/src/containers/content/CoolGuideContent/index.tsx b/src/containers/content/CoolGuideContent/index.tsx
index 590313a05..c27d78fbd 100755
--- a/src/containers/content/CoolGuideContent/index.tsx
+++ b/src/containers/content/CoolGuideContent/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 
@@ -24,7 +24,7 @@ type TProps = {
   testid?: string
 }
 
-const CoolGuideContentContainer: React.FC<TProps> = ({
+const CoolGuideContentContainer: FC<TProps> = ({
   coolGuideContent: store,
   metric,
   testid = 'cool-guide-content',
@@ -45,4 +45,4 @@ const CoolGuideContentContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(CoolGuideContentContainer) as React.FC<TProps>
+export default pluggedIn(CoolGuideContentContainer) as FC<TProps>
diff --git a/src/containers/content/HaveADrinkContent/Body/Setting.tsx b/src/containers/content/HaveADrinkContent/Body/Setting.tsx
index 075a67cc3..9a9560c78 100755
--- a/src/containers/content/HaveADrinkContent/Body/Setting.tsx
+++ b/src/containers/content/HaveADrinkContent/Body/Setting.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TSettingOption } from '../spec'
 
@@ -17,9 +17,7 @@ type TProps = {
   settingOptions: TSettingOption
 }
 
-const Setting: React.FC<TProps> = ({
-  settingOptions: { animateType, fontSize },
-}) => {
+const Setting: FC<TProps> = ({ settingOptions: { animateType, fontSize } }) => {
   return (
     <Wrapper>
       <Block>
diff --git a/src/containers/content/HaveADrinkContent/Footer/index.tsx b/src/containers/content/HaveADrinkContent/Footer/index.tsx
index fb9b3f20a..d1c9cd860 100755
--- a/src/containers/content/HaveADrinkContent/Footer/index.tsx
+++ b/src/containers/content/HaveADrinkContent/Footer/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { buildLog } from '@/utils'
 
@@ -41,7 +41,7 @@ type TProps = {
   view: TView
 }
 
-const Footer: React.FC<TProps> = ({ view }) => {
+const Footer: FC<TProps> = ({ view }) => {
   return (
     <Wrapper>
       <View view={view} />
diff --git a/src/containers/content/HaveADrinkContent/Header/RunningTimer.tsx b/src/containers/content/HaveADrinkContent/Header/RunningTimer.tsx
index 4c255e6f9..eff9347ad 100755
--- a/src/containers/content/HaveADrinkContent/Header/RunningTimer.tsx
+++ b/src/containers/content/HaveADrinkContent/Header/RunningTimer.tsx
@@ -4,12 +4,11 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { buildLog } from '@/utils'
 
 import type { TInterval } from '../spec'
-
 import { ANIMATE_TIMER_CLASS } from '../constant'
 import {
   Wrapper,
@@ -26,7 +25,7 @@ type TProps = {
   interval?: TInterval
 }
 
-const RunningTimer: React.FC<TProps> = ({ interval = '3s' }) => {
+const RunningTimer: FC<TProps> = ({ interval = '3s' }) => {
   return (
     <Wrapper>
       <TopHandlerBar className={ANIMATE_TIMER_CLASS} />
diff --git a/src/containers/content/HaveADrinkContent/Header/Timer.tsx b/src/containers/content/HaveADrinkContent/Header/Timer.tsx
index 61b39fd00..ee0a578d4 100755
--- a/src/containers/content/HaveADrinkContent/Header/Timer.tsx
+++ b/src/containers/content/HaveADrinkContent/Header/Timer.tsx
@@ -4,8 +4,7 @@
  *
  */
 
-import React from 'react'
-import T from 'prop-types'
+import React, { FC } from 'react'
 
 import { ICON_CMD } from '@/config'
 import { buildLog } from '@/utils'
@@ -65,7 +64,7 @@ type TProps = {
   timerInterval?: TInterval
 }
 
-const Timer: React.FC<TProps> = ({ timer, timerInterval = '3s' }) => {
+const Timer: FC<TProps> = ({ timer, timerInterval = '3s' }) => {
   return (
     <Wrapper>
       <ExpandIcon
diff --git a/src/containers/content/HaveADrinkContent/index.tsx b/src/containers/content/HaveADrinkContent/index.tsx
index d8ba0049b..e317405f2 100755
--- a/src/containers/content/HaveADrinkContent/index.tsx
+++ b/src/containers/content/HaveADrinkContent/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import dynamic from 'next/dynamic'
 
 import { pluggedIn, buildLog, scrollToTop, lockPage, unlockPage } from '@/utils'
@@ -36,7 +36,7 @@ type TProps = {
   metric: string
 }
 
-const HaveADrinkContentContainer: React.FC<TProps> = ({
+const HaveADrinkContentContainer: FC<TProps> = ({
   haveADrinkContent: store,
   metric,
 }) => {
@@ -71,4 +71,4 @@ const HaveADrinkContentContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(HaveADrinkContentContainer) as React.FC<TProps>
+export default pluggedIn(HaveADrinkContentContainer) as FC<TProps>
diff --git a/src/containers/content/HelpCenterContent/Cover.tsx b/src/containers/content/HelpCenterContent/Cover.tsx
index 7530a9151..1a76d5692 100644
--- a/src/containers/content/HelpCenterContent/Cover.tsx
+++ b/src/containers/content/HelpCenterContent/Cover.tsx
@@ -1,7 +1,6 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import LinksCard from '@/components/LinksCard'
-
 import type { TCommunity } from '@/spec'
 import type { THelpArticle, TVisibles } from './spec'
 
@@ -16,7 +15,7 @@ type TProps = {
   visibles: TVisibles
 }
 
-const Cover: React.FC<TProps> = ({ items, community, visibles }) => {
+const Cover: FC<TProps> = ({ items, community, visibles }) => {
   return (
     <Wrapper>
       <ContentWrapper>
diff --git a/src/containers/content/HelpCenterContent/Detail.tsx b/src/containers/content/HelpCenterContent/Detail.tsx
index 1f9f06c74..2a4226116 100644
--- a/src/containers/content/HelpCenterContent/Detail.tsx
+++ b/src/containers/content/HelpCenterContent/Detail.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import CollapseMenu from '@/components/CollapseMenu'
 
@@ -17,7 +17,7 @@ type TProps = {
   visibles: TVisibles
 }
 
-const Detail: React.FC<TProps> = ({ community, visibles }) => {
+const Detail: FC<TProps> = ({ community, visibles }) => {
   return (
     <Wrapper>
       <ContentWrapper>
diff --git a/src/containers/content/HelpCenterContent/Digest.tsx b/src/containers/content/HelpCenterContent/Digest.tsx
index a19fe033a..b984c2aaa 100644
--- a/src/containers/content/HelpCenterContent/Digest.tsx
+++ b/src/containers/content/HelpCenterContent/Digest.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 // import { METRIC } from '@/constant'
 
@@ -20,7 +20,7 @@ type TProps = {
   metric: string
 }
 
-const Digest: React.FC<TProps> = ({ metric, community }) => {
+const Digest: FC<TProps> = ({ metric, community }) => {
   return (
     <Wrapper metric={metric}>
       <InnerWrapper metric={metric}>
diff --git a/src/containers/content/HelpCenterContent/Footer/HelpInfo.tsx b/src/containers/content/HelpCenterContent/Footer/HelpInfo.tsx
index 664719b5f..a3d2c4b93 100644
--- a/src/containers/content/HelpCenterContent/Footer/HelpInfo.tsx
+++ b/src/containers/content/HelpCenterContent/Footer/HelpInfo.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TCommunity } from '@/spec'
 
@@ -14,7 +14,7 @@ type TProps = {
   community: TCommunity
 }
 
-const HelpInfo: React.FC<TProps> = ({ community }) => {
+const HelpInfo: FC<TProps> = ({ community }) => {
   return (
     <Wrapper>
       <Title>当前问答都解决不了我的问题?</Title>
diff --git a/src/containers/content/HelpCenterContent/Footer/Reaction.tsx b/src/containers/content/HelpCenterContent/Footer/Reaction.tsx
index e42fce9b9..e90b0111d 100644
--- a/src/containers/content/HelpCenterContent/Footer/Reaction.tsx
+++ b/src/containers/content/HelpCenterContent/Footer/Reaction.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
-
-import type { TVisibles } from '../spec'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
+import type { TVisibles } from '../spec'
 
 import {
   Wrapper,
@@ -27,7 +26,7 @@ type TProps = {
   visibles: TVisibles
 }
 
-const Reaction: React.FC<TProps> = ({ visibles }) => {
+const Reaction: FC<TProps> = ({ visibles }) => {
   const { uselessClicked } = visibles
   return (
     <Wrapper>
diff --git a/src/containers/content/HelpCenterContent/Footer/index.tsx b/src/containers/content/HelpCenterContent/Footer/index.tsx
index 711880807..c73b7e8e9 100644
--- a/src/containers/content/HelpCenterContent/Footer/index.tsx
+++ b/src/containers/content/HelpCenterContent/Footer/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TCommunity } from '@/spec'
 import type { TVisibles } from '../spec'
@@ -13,7 +13,7 @@ type TProps = {
   visibles: TVisibles
 }
 
-const Footer: React.FC<TProps> = ({ community, visibles }) => {
+const Footer: FC<TProps> = ({ community, visibles }) => {
   const { showHelpInfo, showReaction } = visibles
   return (
     <Wrapper>
diff --git a/src/containers/content/HelpCenterContent/index.tsx b/src/containers/content/HelpCenterContent/index.tsx
index 5a6df72f6..9cb9a606b 100755
--- a/src/containers/content/HelpCenterContent/index.tsx
+++ b/src/containers/content/HelpCenterContent/index.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { METRIC } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
@@ -50,7 +50,7 @@ type TProps = {
   metric?: string
 }
 
-const HelpCenterContentContainer: React.FC<TProps> = ({
+const HelpCenterContentContainer: FC<TProps> = ({
   helpCenterContent: store,
   testid = 'help-center-content',
   metric = METRIC.HELP_CENTER,
@@ -72,4 +72,4 @@ const HelpCenterContentContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(HelpCenterContentContainer) as React.FC<TProps>
+export default pluggedIn(HelpCenterContentContainer) as FC<TProps>
diff --git a/src/containers/content/MeetupsContent/ActivityCard.tsx b/src/containers/content/MeetupsContent/ActivityCard.tsx
index 429b47218..0642c72e2 100755
--- a/src/containers/content/MeetupsContent/ActivityCard.tsx
+++ b/src/containers/content/MeetupsContent/ActivityCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON_CMD } from '@/config'
 import { cutRest } from '@/utils'
@@ -31,7 +31,7 @@ type TProps = {
   }
 }
 
-const ActivityCard: React.FC<TProps> = ({ item }) => {
+const ActivityCard: FC<TProps> = ({ item }) => {
   return (
     <Wrapper finished={item.finished}>
       <DatetimeWrapper>
diff --git a/src/containers/content/MeetupsContent/Card/Date.tsx b/src/containers/content/MeetupsContent/Card/Date.tsx
index 024553220..de3fac908 100644
--- a/src/containers/content/MeetupsContent/Card/Date.tsx
+++ b/src/containers/content/MeetupsContent/Card/Date.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TProps as TParentProps } from './index'
 import { Wrapper, Divider, WeekName, DateNum } from '../styles/card/date'
 
 type TProps = Omit<TParentProps, 'item'>
 
-const Date: React.FC<TProps> = ({ type }) => {
+const Date: FC<TProps> = ({ type }) => {
   return (
     <Wrapper type={type}>
       <WeekName>周五</WeekName>
diff --git a/src/containers/content/MeetupsContent/Card/TextCard.tsx b/src/containers/content/MeetupsContent/Card/TextCard.tsx
index 86feaa0d8..f3f9dcf7a 100644
--- a/src/containers/content/MeetupsContent/Card/TextCard.tsx
+++ b/src/containers/content/MeetupsContent/Card/TextCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { GALLERY } from '@/constant'
 import { ICON_CMD } from '@/config'
@@ -22,7 +22,7 @@ import {
 
 type TProps = Omit<TParentProps, 'type'>
 
-const TextCard: React.FC<TProps> = ({ item }) => {
+const TextCard: FC<TProps> = ({ item }) => {
   return (
     <Wrapper>
       <Date type={GALLERY.TEXT_ONLY} />
diff --git a/src/containers/content/MeetupsContent/Card/TextWithImgCard.tsx b/src/containers/content/MeetupsContent/Card/TextWithImgCard.tsx
index ca21e9db8..04298ae43 100644
--- a/src/containers/content/MeetupsContent/Card/TextWithImgCard.tsx
+++ b/src/containers/content/MeetupsContent/Card/TextWithImgCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { GALLERY } from '@/constant'
 import { ICON_CMD, ASSETS_ENDPOINT } from '@/config'
@@ -24,7 +24,7 @@ import {
 
 type TProps = Omit<TParentProps, 'type'>
 
-const TextWithImageCard: React.FC<TProps> = ({ item }) => {
+const TextWithImageCard: FC<TProps> = ({ item }) => {
   return (
     <Wrapper>
       <ContentsWrapper>
diff --git a/src/containers/content/MeetupsContent/Card/index.tsx b/src/containers/content/MeetupsContent/Card/index.tsx
index 57c983fd1..15bf26186 100644
--- a/src/containers/content/MeetupsContent/Card/index.tsx
+++ b/src/containers/content/MeetupsContent/Card/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TGALLERY_TEXT_ONLY, TGALLERY_TEXT_WITH_IMAGE } from '@/spec'
 import { GALLERY } from '@/constant'
@@ -19,7 +19,7 @@ export type TProps = {
   }
 }
 
-const Card: React.FC<TProps> = ({ item, type = GALLERY.TEXT_ONLY }) => {
+const Card: FC<TProps> = ({ item, type = GALLERY.TEXT_ONLY }) => {
   return type === GALLERY.TEXT_ONLY ? (
     <TextCard item={item} />
   ) : (
diff --git a/src/containers/content/MeetupsContent/DateSelector/Cell.tsx b/src/containers/content/MeetupsContent/DateSelector/Cell.tsx
index 6acf80849..73d2096d4 100755
--- a/src/containers/content/MeetupsContent/DateSelector/Cell.tsx
+++ b/src/containers/content/MeetupsContent/DateSelector/Cell.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { contains } from 'ramda'
 
 import DotDivider from '@/components/DotDivider'
@@ -23,7 +23,7 @@ type TProps = {
   isLeapMonth: boolean
 }
 
-const Cell: React.FC<TProps> = ({ item, isLeapMonth }) => {
+const Cell: FC<TProps> = ({ item, isLeapMonth }) => {
   return (
     <Wrapper
       key={item.id}
diff --git a/src/containers/content/MeetupsContent/FilterBar/index.tsx b/src/containers/content/MeetupsContent/FilterBar/index.tsx
index bfde2da26..9a8b1de8f 100644
--- a/src/containers/content/MeetupsContent/FilterBar/index.tsx
+++ b/src/containers/content/MeetupsContent/FilterBar/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TFiltersMenuItems } from '@/spec'
 import { ICON_CMD } from '@/config'
@@ -22,7 +22,7 @@ type TProps = {
   filtersItems: TFiltersMenuItems
 }
 
-const FilterBar: React.FC<TProps> = ({ filtersItems }) => {
+const FilterBar: FC<TProps> = ({ filtersItems }) => {
   return (
     <Wrapper>
       <Sticky offsetTop={30}>
diff --git a/src/containers/content/MeetupsContent/index.tsx b/src/containers/content/MeetupsContent/index.tsx
index dc1c487f7..e07b4ce4d 100755
--- a/src/containers/content/MeetupsContent/index.tsx
+++ b/src/containers/content/MeetupsContent/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ASSETS_ENDPOINT } from '@/config'
 import { GALLERY } from '@/constant'
@@ -48,7 +48,7 @@ type TProps = {
   metric?: string
 }
 
-const MeetupsContentContainer: React.FC<TProps> = ({
+const MeetupsContentContainer: FC<TProps> = ({
   meetupsContent: store,
   testid = 'meetups-content',
   metric,
@@ -84,4 +84,4 @@ const MeetupsContentContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(MeetupsContentContainer) as React.FC<TProps>
+export default pluggedIn(MeetupsContentContainer) as FC<TProps>
diff --git a/src/containers/content/MembershipContent/Support.tsx b/src/containers/content/MembershipContent/Support.tsx
index 2d72c6d07..1af1031de 100644
--- a/src/containers/content/MembershipContent/Support.tsx
+++ b/src/containers/content/MembershipContent/Support.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON, ICON_CMD } from '@/config'
 
@@ -25,7 +25,7 @@ type TProps = {
   pkgType: string
 }
 
-const Support: React.FC<TProps> = ({ active, items, not, pkgType }) => (
+const Support: FC<TProps> = ({ active, items, not, pkgType }) => (
   <React.Fragment>
     {pkgType !== 'free' && (
       <PkgItem active={active}>
diff --git a/src/containers/content/MembershipContent/index.tsx b/src/containers/content/MembershipContent/index.tsx
index de2a62627..e54dfaf7d 100755
--- a/src/containers/content/MembershipContent/index.tsx
+++ b/src/containers/content/MembershipContent/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 
@@ -72,7 +72,7 @@ type TProps = {
   testid?: string
 }
 
-const MembershipContentContainer: React.FC<TProps> = ({
+const MembershipContentContainer: FC<TProps> = ({
   membershipContent: store,
   testid = 'membership-content',
   metric,
@@ -159,4 +159,4 @@ const MembershipContentContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(MembershipContentContainer) as React.FC<TProps>
+export default pluggedIn(MembershipContentContainer) as FC<TProps>
diff --git a/src/containers/content/PostContent/DesktopView.tsx b/src/containers/content/PostContent/DesktopView.tsx
index bd3e00a76..5c3a881b8 100644
--- a/src/containers/content/PostContent/DesktopView.tsx
+++ b/src/containers/content/PostContent/DesktopView.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useRef } from 'react'
+import React, { FC, useRef } from 'react'
 import { Waypoint } from 'react-waypoint'
 
 import { pluggedIn, buildLog } from '@/utils'
@@ -39,7 +39,7 @@ type TProps = {
   metric?: string
 }
 
-const PostContentContainer: React.FC<TProps> = ({
+const PostContentContainer: FC<TProps> = ({
   postContent: store,
   metric,
   testid,
@@ -81,4 +81,4 @@ const PostContentContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(PostContentContainer) as React.FC<TProps>
+export default pluggedIn(PostContentContainer) as FC<TProps>
diff --git a/src/containers/content/PostContent/MobileView.tsx b/src/containers/content/PostContent/MobileView.tsx
index 2297e2c51..a1a955812 100644
--- a/src/containers/content/PostContent/MobileView.tsx
+++ b/src/containers/content/PostContent/MobileView.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import { Waypoint } from 'react-waypoint'
 
 import { pluggedIn, buildLog } from '@/utils'
@@ -36,7 +36,7 @@ type TProps = {
   testid?: string
 }
 
-const PostContentContainer: React.FC<TProps> = ({
+const PostContentContainer: FC<TProps> = ({
   postContent: store,
   testid = 'post-content',
 }) => {
@@ -64,4 +64,4 @@ const PostContentContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(PostContentContainer) as React.FC<TProps>
+export default pluggedIn(PostContentContainer) as FC<TProps>
diff --git a/src/containers/content/WorksContent/Brand.tsx b/src/containers/content/WorksContent/Brand.tsx
index c85d8ccc1..20d7099c9 100644
--- a/src/containers/content/WorksContent/Brand.tsx
+++ b/src/containers/content/WorksContent/Brand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { Wrapper, Title, Desc, Divider } from './styles/brand'
 
@@ -6,7 +6,7 @@ type TProps = {
   testid?: string
 }
 
-const Brand: React.FC<TProps> = ({ testid = 'works-content-brand' }) => {
+const Brand: FC<TProps> = ({ testid = 'works-content-brand' }) => {
   return (
     <Wrapper testid={testid}>
       <Title>作品集市</Title>
diff --git a/src/containers/content/WorksContent/FilterBar.tsx b/src/containers/content/WorksContent/FilterBar.tsx
index 7b7afb76b..148a4001f 100644
--- a/src/containers/content/WorksContent/FilterBar.tsx
+++ b/src/containers/content/WorksContent/FilterBar.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { mockNaviCatalogMenu } from '@/utils'
 
-import { Br } from '@/components/Common'
 // import FiltersMenu from '@/components/FiltersMenu'
 import NaviCatalog from '@/components/NaviCatalog'
 
@@ -17,7 +16,7 @@ type TProps = {
   activeView?: string
 }
 
-const FilterBar: React.FC<TProps> = ({ activeView }) => {
+const FilterBar: FC<TProps> = ({ activeView }) => {
   return (
     <Wrapper>
       <FilterWrapper>
diff --git a/src/containers/content/WorksContent/List/OptionTab.tsx b/src/containers/content/WorksContent/List/OptionTab.tsx
index 3c99bb0d3..fda9b28c5 100644
--- a/src/containers/content/WorksContent/List/OptionTab.tsx
+++ b/src/containers/content/WorksContent/List/OptionTab.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { Wrapper, ItemWrapper, Text } from '../styles/list/option_tab'
 
@@ -10,7 +10,7 @@ type TProps = {
   }[]
 }
 
-const BestTab: React.FC<TProps> = ({ items, activeKey }) => {
+const BestTab: FC<TProps> = ({ items, activeKey }) => {
   return (
     <Wrapper>
       {items.map((item) => (
diff --git a/src/containers/content/WorksContent/RightSidebar/InterviewsList.tsx b/src/containers/content/WorksContent/RightSidebar/InterviewsList.tsx
index 3b2685bd0..7a441a5a2 100644
--- a/src/containers/content/WorksContent/RightSidebar/InterviewsList.tsx
+++ b/src/containers/content/WorksContent/RightSidebar/InterviewsList.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import { SpaceGrow } from '@/components/Common'
@@ -41,7 +41,7 @@ type TProps = {
   testid?: string
 }
 
-const InterviewsList: React.FC<TProps> = ({
+const InterviewsList: FC<TProps> = ({
   testid = 'works-content-interviews',
 }) => {
   return (
diff --git a/src/containers/content/WorksContent/RightSidebar/index.tsx b/src/containers/content/WorksContent/RightSidebar/index.tsx
index d1aef36be..b310bd099 100644
--- a/src/containers/content/WorksContent/RightSidebar/index.tsx
+++ b/src/containers/content/WorksContent/RightSidebar/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON, ICON_CMD } from '@/config'
 
@@ -39,7 +39,7 @@ type TProps = {
   testid?: string
 }
 
-const RightSidebar: React.FC<TProps> = ({
+const RightSidebar: FC<TProps> = ({
   testid = 'works-content-right-sidebar',
 }) => {
   return (
diff --git a/src/containers/content/WorksContent/index.tsx b/src/containers/content/WorksContent/index.tsx
index 73a6952b0..668c186ca 100755
--- a/src/containers/content/WorksContent/index.tsx
+++ b/src/containers/content/WorksContent/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 
@@ -72,7 +72,7 @@ type TProps = {
   metric: string
   testid?: string
 }
-const WorksContentContainer: React.FC<TProps> = ({
+const WorksContentContainer: FC<TProps> = ({
   worksContent: store,
   metric,
   testid = 'worksContent',
@@ -103,4 +103,4 @@ const WorksContentContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(WorksContentContainer) as React.FC<TProps>
+export default pluggedIn(WorksContentContainer) as FC<TProps>
diff --git a/src/containers/digest/ArticleDigest/DesktopView/Author.tsx b/src/containers/digest/ArticleDigest/DesktopView/Author.tsx
index b45cc464f..a53488744 100644
--- a/src/containers/digest/ArticleDigest/DesktopView/Author.tsx
+++ b/src/containers/digest/ArticleDigest/DesktopView/Author.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TUser } from '@/spec'
 import { Button } from '@/components/Buttons'
@@ -10,7 +10,7 @@ type TProps = {
   user: TUser
 }
 
-const Author: React.FC<TProps> = ({ user }) => {
+const Author: FC<TProps> = ({ user }) => {
   return (
     <Wrapper>
       <TheAvatar user={user} metric="article-author" />
diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx
index 212a293b7..cfafdb00e 100644
--- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx
+++ b/src/containers/digest/ArticleDigest/DesktopView/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import { isNil } from 'ramda'
 import { Waypoint } from 'react-waypoint'
 
@@ -44,7 +44,7 @@ type TProps = {
   metric?: string
 }
 
-const ArticleDigestContainer: React.FC<TProps> = ({
+const ArticleDigestContainer: FC<TProps> = ({
   articleDigest: store,
   testid = 'article-digest',
   metric = METRIC.ARTICLE,
@@ -79,4 +79,4 @@ const ArticleDigestContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(ArticleDigestContainer) as React.FC<TProps>
+export default pluggedIn(ArticleDigestContainer) as FC<TProps>
diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 9747c1883..715a1133b 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useEffect } from 'react'
+import React, { FC, useEffect } from 'react'
 
 import type { Nullable, TSEO } from '@/spec'
 import { ANCHOR, SIZE } from '@/constant'
@@ -46,7 +46,7 @@ type TProps = {
   metric: string
 }
 
-const GlobalLayoutContainer: React.FC<TProps> = ({
+const GlobalLayoutContainer: FC<TProps> = ({
   globalLayout: store,
   seoConfig,
   errorCode,
@@ -130,4 +130,4 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(GlobalLayoutContainer) as React.FC<TProps>
+export default pluggedIn(GlobalLayoutContainer) as FC<TProps>
diff --git a/src/containers/thread/JobsThread/PublishNote.tsx b/src/containers/thread/JobsThread/PublishNote.tsx
index cbb569a42..5e6d3f8e9 100755
--- a/src/containers/thread/JobsThread/PublishNote.tsx
+++ b/src/containers/thread/JobsThread/PublishNote.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { DEFAULT_USER_AVATAR } from '@/config'
 import { ROUTE } from '@/constant'
@@ -13,7 +13,7 @@ type TProps = {
   show: boolean
 }
 
-const PublishNote: React.FC<TProps> = ({ show }) => (
+const PublishNote: FC<TProps> = ({ show }) => (
   <Modal show={show} showCloseBtn onClose={onNoteClose}>
     <Wrapper>
       <NoteIcon src={`${DEFAULT_USER_AVATAR}`} />
diff --git a/src/containers/thread/JobsThread/index.tsx b/src/containers/thread/JobsThread/index.tsx
index 88b484f9b..42ec6ad0e 100755
--- a/src/containers/thread/JobsThread/index.tsx
+++ b/src/containers/thread/JobsThread/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import { Waypoint } from 'react-waypoint'
 
 import { ICON_CMD } from '@/config'
@@ -56,7 +56,7 @@ type TProps = {
   jobsThread?: TStore
 }
 
-const JobsThreadContainer: React.FC<TProps> = ({ jobsThread: store }) => {
+const JobsThreadContainer: FC<TProps> = ({ jobsThread: store }) => {
   useInit(store)
 
   const {
@@ -132,4 +132,4 @@ const JobsThreadContainer: React.FC<TProps> = ({ jobsThread: store }) => {
   )
 }
 
-export default pluggedIn(JobsThreadContainer) as React.FC<TProps>
+export default pluggedIn(JobsThreadContainer) as FC<TProps>
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
index bfab17e52..932bcd7b4 100644
--- a/src/containers/tool/AbuseReport/Footer.tsx
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { YesOrNoButtons } from '@/components/Buttons'
 
@@ -8,7 +8,7 @@ type TProps = {
   view: 'main' | 'detail'
 }
 
-const Footer: React.FC<TProps> = ({ view }) => {
+const Footer: FC<TProps> = ({ view }) => {
   if (view !== 'detail') return null
 
   return (
diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
index 391053ad9..053f88085 100644
--- a/src/containers/tool/AbuseReport/Header.tsx
+++ b/src/containers/tool/AbuseReport/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { REPORT_TYPE } from '@/constant'
 import { ICON } from '@/config'
@@ -25,7 +25,7 @@ type TProps = {
   type: string
 }
 
-const Header: React.FC<TProps> = ({ type }) => {
+const Header: FC<TProps> = ({ type }) => {
   return (
     <Wrapper>
       <ReportIcon src={`${ICON}/article/report-solid.svg`} />
diff --git a/src/containers/tool/AbuseReport/ReportContent/Detail.tsx b/src/containers/tool/AbuseReport/ReportContent/Detail.tsx
index 3dd8cac0c..eea59ffcd 100644
--- a/src/containers/tool/AbuseReport/ReportContent/Detail.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Detail.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import Input from '@/components/Input'
 import { Br } from '@/components/Common'
@@ -12,7 +12,7 @@ type TProps = {
   activeItem: TREPORT_ITEM
 }
 
-const Detail: React.FC<TProps> = ({ activeItem }) => {
+const Detail: FC<TProps> = ({ activeItem }) => {
   return (
     <Wrapper>
       <ArrowButton
diff --git a/src/containers/tool/AbuseReport/ReportContent/Main.tsx b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
index 26befd6ce..936084014 100644
--- a/src/containers/tool/AbuseReport/ReportContent/Main.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { SpaceGrow } from '@/components/Common'
 import Checker from '@/components/Checker'
@@ -13,7 +13,7 @@ type TProps = {
   activeItem: TREPORT_ITEM
 }
 
-const Main: React.FC<TProps> = ({ items, activeItem }) => {
+const Main: FC<TProps> = ({ items, activeItem }) => {
   return (
     <React.Fragment>
       {items &&
diff --git a/src/containers/tool/AbuseReport/ReportContent/index.tsx b/src/containers/tool/AbuseReport/ReportContent/index.tsx
index 843e59b87..6a50e06b5 100644
--- a/src/containers/tool/AbuseReport/ReportContent/index.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TREPORT_ITEM } from '../spec'
 
@@ -11,7 +11,7 @@ type TProps = {
   activeItem: TREPORT_ITEM
 }
 
-const ReportContent: React.FC<TProps> = ({ view, items, activeItem }) => {
+const ReportContent: FC<TProps> = ({ view, items, activeItem }) => {
   switch (view) {
     case 'detail': {
       return <Detail activeItem={activeItem} />
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 936f221be..21005800d 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -6,10 +6,9 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
-
 import Modal from '@/components/Modal'
 
 import Header from './Header'
@@ -25,12 +24,12 @@ const log = buildLog('C:AbuseReport')
 
 type TProps = {
   abuseReport?: TStore
-  testid: string
+  testid?: string
 }
 
-const AbuseReportContainer: React.FC<TProps> = ({
+const AbuseReportContainer: FC<TProps> = ({
   abuseReport: store,
-  testid,
+  testid = 'abuse-report',
 }) => {
   useInit(store)
   const { show, type, view, itemsData, activeItem } = store
@@ -46,4 +45,4 @@ const AbuseReportContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(AbuseReportContainer)
+export default pluggedIn(AbuseReportContainer) as FC<TProps>
diff --git a/src/containers/tool/ArticleSticker/ArticleSticker.tsx b/src/containers/tool/ArticleSticker/ArticleSticker.tsx
index 66701624b..f2af4e274 100644
--- a/src/containers/tool/ArticleSticker/ArticleSticker.tsx
+++ b/src/containers/tool/ArticleSticker/ArticleSticker.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TArticle } from '@/spec'
 import { ICON } from '@/config'
@@ -20,7 +20,7 @@ type TProps = {
   viewing: TArticle
 }
 
-const ArticleSticker: React.FC<TProps> = ({ show, viewing }) => {
+const ArticleSticker: FC<TProps> = ({ show, viewing }) => {
   return (
     <Wrapper show={show}>
       <ItemWrapper>
diff --git a/src/containers/tool/ArticleSticker/CommentSticker.tsx b/src/containers/tool/ArticleSticker/CommentSticker.tsx
index 7b82fec20..799f6a38b 100644
--- a/src/containers/tool/ArticleSticker/CommentSticker.tsx
+++ b/src/containers/tool/ArticleSticker/CommentSticker.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 import T from 'prop-types'
 
 import { ICON } from '@/config'
@@ -34,7 +34,7 @@ type TProps = {
   data?: any // TODO
 }
 
-const CommentSticker: React.FC<TProps> = ({
+const CommentSticker: FC<TProps> = ({
   show,
   data: { pagedCommentsParticipators: users },
 }) => {
diff --git a/src/containers/tool/ArticleSticker/CommunitySticker.tsx b/src/containers/tool/ArticleSticker/CommunitySticker.tsx
index 5f75e9f72..7617f4fe2 100644
--- a/src/containers/tool/ArticleSticker/CommunitySticker.tsx
+++ b/src/containers/tool/ArticleSticker/CommunitySticker.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TViewing } from '@/spec'
 import { ICON_BASE } from '@/config'
@@ -16,7 +16,7 @@ type TProps = {
   show?: boolean
 }
 
-const CommunitySticker: React.FC<TProps> = ({ show, data }) => {
+const CommunitySticker: FC<TProps> = ({ show, data }) => {
   return (
     <React.Fragment>
       <ItemWrapper>
diff --git a/src/containers/tool/ArticleSticker/LeftSticker/Toc.tsx b/src/containers/tool/ArticleSticker/LeftSticker/Toc.tsx
index 8ef5261fa..81ad50d50 100644
--- a/src/containers/tool/ArticleSticker/LeftSticker/Toc.tsx
+++ b/src/containers/tool/ArticleSticker/LeftSticker/Toc.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 // import { cutRest } from '@/utils'
@@ -19,7 +19,7 @@ type TProps = {
   testid?: string
 }
 
-const Toc: React.FC<TProps> = ({ show, testid = 'article-sticker-toc' }) => {
+const Toc: FC<TProps> = ({ show, testid = 'article-sticker-toc' }) => {
   return (
     <Wrapper testid={testid}>
       <HeaderWrapper onClick={toggleTocMenu}>
diff --git a/src/containers/tool/ArticleSticker/LeftSticker/index.tsx b/src/containers/tool/ArticleSticker/LeftSticker/index.tsx
index 3732dce0c..df0541457 100644
--- a/src/containers/tool/ArticleSticker/LeftSticker/index.tsx
+++ b/src/containers/tool/ArticleSticker/LeftSticker/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import { cutRest } from '@/utils'
@@ -20,7 +20,7 @@ type TProps = {
   testid?: string
 }
 
-const LeftSticker: React.FC<TProps> = ({
+const LeftSticker: FC<TProps> = ({
   show,
   title,
   isTocMenuOpened,
diff --git a/src/containers/tool/ArticleSticker/index.tsx b/src/containers/tool/ArticleSticker/index.tsx
index 6ef2df994..24a2a0e45 100755
--- a/src/containers/tool/ArticleSticker/index.tsx
+++ b/src/containers/tool/ArticleSticker/index.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 
@@ -31,7 +31,7 @@ type TProps = {
   testid?: string
 }
 
-const ArticleStickerContainer: React.FC<TProps> = ({
+const ArticleStickerContainer: FC<TProps> = ({
   articleSticker: store,
   testid = 'article-sticker',
 }) => {
@@ -74,4 +74,4 @@ const ArticleStickerContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(ArticleStickerContainer) as React.FC<TProps>
+export default pluggedIn(ArticleStickerContainer) as FC<TProps>
diff --git a/src/containers/tool/Drawer/AddOn.tsx b/src/containers/tool/Drawer/AddOn.tsx
index 89eb3a9f5..a705a79ab 100755
--- a/src/containers/tool/Drawer/AddOn.tsx
+++ b/src/containers/tool/Drawer/AddOn.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON_CMD } from '@/config'
 // import { Wrapper } from './styles'
@@ -18,7 +18,7 @@ type TProps = {
   imageUploading?: boolean
 }
 
-const AddOn: React.FC<TProps> = ({ type, imageUploading = false }) => {
+const AddOn: FC<TProps> = ({ type, imageUploading = false }) => {
   return (
     <Wrapper>
       <CloseTab type={type} onClick={() => closeDrawer()}>
diff --git a/src/containers/tool/Drawer/Content/DesktopView.tsx b/src/containers/tool/Drawer/Content/DesktopView.tsx
index 91c63fafd..6aea6ce2c 100644
--- a/src/containers/tool/Drawer/Content/DesktopView.tsx
+++ b/src/containers/tool/Drawer/Content/DesktopView.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { FC, useEffect, useRef } from 'react'
 
 import CustomScroller from '@/components/CustomScroller'
 
@@ -12,7 +12,7 @@ type TProps = {
   attUser: any // TODO:
 }
 
-const Content: React.FC<TProps> = ({ visible, type, attachment, attUser }) => {
+const Content: FC<TProps> = ({ visible, type, attachment, attUser }) => {
   const ref = useRef(null)
 
   /*
diff --git a/src/containers/tool/Drawer/Content/MobileView.tsx b/src/containers/tool/Drawer/Content/MobileView.tsx
index 871841f9b..04a9dae15 100644
--- a/src/containers/tool/Drawer/Content/MobileView.tsx
+++ b/src/containers/tool/Drawer/Content/MobileView.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { FC, useEffect, useRef, useState } from 'react'
 
 import CustomScroller from '@/components/CustomScroller'
 
@@ -17,7 +17,7 @@ type TProps = {
   mmType: string // TODO
 }
 
-const Content: React.FC<TProps> = ({
+const Content: FC<TProps> = ({
   visible,
   options,
   type,
diff --git a/src/containers/tool/Drawer/Header/CloseLine.tsx b/src/containers/tool/Drawer/Header/CloseLine.tsx
index d950b33ce..b25e562c2 100644
--- a/src/containers/tool/Drawer/Header/CloseLine.tsx
+++ b/src/containers/tool/Drawer/Header/CloseLine.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { Wrapper, LeftLine, RightLine } from '../styles/header/close_line'
 
@@ -8,7 +8,7 @@ type TProps = {
   curve: boolean
 }
 
-const CloseLine: React.FC<TProps> = ({ curve }) => {
+const CloseLine: FC<TProps> = ({ curve }) => {
   return (
     <Wrapper onClick={() => closeDrawer()}>
       <LeftLine curve={curve} />
diff --git a/src/containers/tool/Drawer/Header/index.tsx b/src/containers/tool/Drawer/Header/index.tsx
index 35779d9eb..04aae957a 100644
--- a/src/containers/tool/Drawer/Header/index.tsx
+++ b/src/containers/tool/Drawer/Header/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { useSwipe } from '@/hooks'
 import { nilOrEmpty } from '@/utils'
@@ -19,7 +19,7 @@ type TProps = {
   showHeaderText: boolean
 }
 
-const Header: React.FC<TProps> = ({
+const Header: FC<TProps> = ({
   headerText,
   options,
   setSwipeUpY,
diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.tsx b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
index a8181f447..dcb5b77d4 100644
--- a/src/containers/tool/Drawer/Viewer/DesktopView.tsx
+++ b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TSwipeOption } from '../spec'
 import AddOn from '../AddOn'
@@ -16,7 +16,7 @@ type TProps = {
   children: React.ReactNode
 }
 
-const DesktopView: React.FC<TProps> = ({
+const DesktopView: FC<TProps> = ({
   testid = 'drawer-sidebar-panel',
   options,
   visible,
diff --git a/src/containers/tool/Drawer/Viewer/MobileView.tsx b/src/containers/tool/Drawer/Viewer/MobileView.tsx
index d8f2b5e21..808315134 100644
--- a/src/containers/tool/Drawer/Viewer/MobileView.tsx
+++ b/src/containers/tool/Drawer/Viewer/MobileView.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import { useTheme } from 'styled-components'
 
 import type { TThemeMap } from '@/spec'
@@ -35,7 +35,7 @@ type TProps = {
   children: React.ReactNode
 }
 
-const Viewer: React.FC<TProps> = ({
+const Viewer: FC<TProps> = ({
   testid = 'drawer-sidebar-panel',
   headerText,
   options,
diff --git a/src/containers/tool/Drawer/index.tsx b/src/containers/tool/Drawer/index.tsx
index 2a8a1bb18..fd7f18810 100755
--- a/src/containers/tool/Drawer/index.tsx
+++ b/src/containers/tool/Drawer/index.tsx
@@ -4,8 +4,7 @@
  *
  */
 
-import React from 'react'
-import T from 'prop-types'
+import React, { FC } from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 import { useShortcut, useResize } from '@/hooks'
@@ -24,7 +23,7 @@ type TProps = {
   drawer: TStore
 }
 
-const DrawerContainer: React.FC<TProps> = ({ drawer: store }) => {
+const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
   const { width: windowWidth } = useResize()
   useInit(store, windowWidth)
   useShortcut('Escape', closeDrawer)
@@ -68,10 +67,4 @@ const DrawerContainer: React.FC<TProps> = ({ drawer: store }) => {
   )
 }
 
-DrawerContainer.propTypes = {
-  drawer: T.any.isRequired,
-}
-
-DrawerContainer.defaultProps = {}
-
 export default pluggedIn(DrawerContainer)
diff --git a/src/containers/unit/Comments/Comment/Actions.tsx b/src/containers/unit/Comments/Comment/Actions.tsx
index 91eae31b0..fe9280f8f 100755
--- a/src/containers/unit/Comments/Comment/Actions.tsx
+++ b/src/containers/unit/Comments/Comment/Actions.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TAccount, TComment } from '@/spec'
 import { ICON } from '@/config'
@@ -18,7 +18,7 @@ type TProps = {
   accountInfo: TAccount
 }
 
-const Actions: React.FC<TProps> = ({ data, accountInfo }) => {
+const Actions: FC<TProps> = ({ data, accountInfo }) => {
   if (String(data.author.id) === accountInfo.id) {
     return (
       <Wrapper>
diff --git a/src/containers/unit/Comments/Comment/DeleteMask.tsx b/src/containers/unit/Comments/Comment/DeleteMask.tsx
index fc6703b35..8ce180481 100755
--- a/src/containers/unit/Comments/Comment/DeleteMask.tsx
+++ b/src/containers/unit/Comments/Comment/DeleteMask.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { Button } from '@/components/Buttons'
 
@@ -14,7 +14,7 @@ type TProps = {
   show: boolean
 }
 
-const DeleteMask: React.FC<TProps> = ({ show }) => {
+const DeleteMask: FC<TProps> = ({ show }) => {
   return (
     <DeleteOverlay show={show}>
       <DeleteHintText>删除后该该评论将不可恢复</DeleteHintText>
diff --git a/src/containers/unit/Comments/Comment/DesktopView.tsx b/src/containers/unit/Comments/Comment/DesktopView.tsx
index b840e8bd4..755ff7805 100644
--- a/src/containers/unit/Comments/Comment/DesktopView.tsx
+++ b/src/containers/unit/Comments/Comment/DesktopView.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { isEmpty } from 'ramda'
 
 import type { TAccount, TComment } from '@/spec'
@@ -44,7 +44,7 @@ type TProps = {
   withoutBottomDivider?: boolean
 }
 
-const Comment: React.FC<TProps> = ({
+const Comment: FC<TProps> = ({
   data,
   tobeDeleteId,
   accountInfo,
diff --git a/src/containers/unit/Comments/Comment/Footer.tsx b/src/containers/unit/Comments/Comment/Footer.tsx
index 193cf2889..535d32c71 100755
--- a/src/containers/unit/Comments/Comment/Footer.tsx
+++ b/src/containers/unit/Comments/Comment/Footer.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TAccount, TComment } from '@/spec'
 
@@ -17,7 +17,7 @@ type TProps = {
   hasReplies?: boolean
 }
 
-const Footer: React.FC<TProps> = ({
+const Footer: FC<TProps> = ({
   data,
   accountInfo,
   withoutBottomDivider = false,
diff --git a/src/containers/unit/Comments/Comment/Header.tsx b/src/containers/unit/Comments/Comment/Header.tsx
index 81896a302..e60d42f7b 100755
--- a/src/containers/unit/Comments/Comment/Header.tsx
+++ b/src/containers/unit/Comments/Comment/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import TimeAgo from 'timeago-react'
 
 import type { TComment } from '@/spec'
@@ -22,7 +22,7 @@ type TProps = {
   data: TComment
 }
 
-const CommentHeader: React.FC<TProps> = ({ data }) => {
+const CommentHeader: FC<TProps> = ({ data }) => {
   return (
     <Wrapper>
       <Avatar
diff --git a/src/containers/unit/Comments/Comment/MobileView/Header.tsx b/src/containers/unit/Comments/Comment/MobileView/Header.tsx
index d70371571..2308b75fc 100644
--- a/src/containers/unit/Comments/Comment/MobileView/Header.tsx
+++ b/src/containers/unit/Comments/Comment/MobileView/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TComment } from '@/spec'
 import ImgFallback from '@/components/ImgFallback'
@@ -17,7 +17,7 @@ type TProps = {
   data: TComment
 }
 
-const CommentHeader: React.FC<TProps> = ({ data }) => {
+const CommentHeader: FC<TProps> = ({ data }) => {
   return (
     <Wrapper>
       <Avatar
diff --git a/src/containers/unit/Comments/Comment/ReplyBar.tsx b/src/containers/unit/Comments/Comment/ReplyBar.tsx
index 71e58a216..2fd927892 100755
--- a/src/containers/unit/Comments/Comment/ReplyBar.tsx
+++ b/src/containers/unit/Comments/Comment/ReplyBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TComment } from '@/spec'
 import { ICON } from '@/config'
@@ -15,7 +15,7 @@ type TProps = {
   data: TComment
 }
 
-const CommentReplyBar: React.FC<TProps> = ({ data }) => {
+const CommentReplyBar: FC<TProps> = ({ data }) => {
   return (
     <Wrapper>
       <ReplyIcon src={`${ICON}/article/reply.svg`} />
diff --git a/src/containers/unit/Comments/Comment/Upvote.tsx b/src/containers/unit/Comments/Comment/Upvote.tsx
index 33cc01e77..d8f0a93b5 100755
--- a/src/containers/unit/Comments/Comment/Upvote.tsx
+++ b/src/containers/unit/Comments/Comment/Upvote.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TComment } from '@/spec'
 import { ICON } from '@/config'
@@ -12,7 +12,7 @@ type TProps = {
   data: TComment
 }
 
-const Upvote: React.FC<TProps> = ({ data }) => (
+const Upvote: FC<TProps> = ({ data }) => (
   <Wrapper>
     <InnerWrapper>
       <div onClick={() => toggleLikeComment(data)}>
diff --git a/src/containers/unit/Comments/CommentBodyEditor.tsx b/src/containers/unit/Comments/CommentBodyEditor.tsx
index afd19fd95..b40143080 100755
--- a/src/containers/unit/Comments/CommentBodyEditor.tsx
+++ b/src/containers/unit/Comments/CommentBodyEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import dynamic from 'next/dynamic'
 
 import type { TUser } from '@/spec'
@@ -30,7 +30,7 @@ type TProps = {
   creating: boolean
 }
 
-const CommentBodyEditor: React.FC<TProps> = ({
+const CommentBodyEditor: FC<TProps> = ({
   showInputEditor,
   showInputPreview,
   body,
diff --git a/src/containers/unit/Comments/CommentEditor.tsx b/src/containers/unit/Comments/CommentEditor.tsx
index 3defaa49c..1f742db04 100755
--- a/src/containers/unit/Comments/CommentEditor.tsx
+++ b/src/containers/unit/Comments/CommentEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TAccount, TUser } from '@/spec'
 import MarkDownRender from '@/components/MarkDownRender'
@@ -28,7 +28,7 @@ type TProps = {
   }
 }
 
-const CommentEditor: React.FC<TProps> = (props) => {
+const CommentEditor: FC<TProps> = (props) => {
   const {
     referUsers,
     accountInfo,
diff --git a/src/containers/unit/Comments/CommentReplyEditor.tsx b/src/containers/unit/Comments/CommentReplyEditor.tsx
index 9e90dce8f..add58487c 100755
--- a/src/containers/unit/Comments/CommentReplyEditor.tsx
+++ b/src/containers/unit/Comments/CommentReplyEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import dynamic from 'next/dynamic'
 
 import type { TAccount, TUser, TComment } from '@/spec'
@@ -46,7 +46,7 @@ type TProps = {
   }
 }
 
-const CommentReplyEditor: React.FC<TProps> = ({
+const CommentReplyEditor: FC<TProps> = ({
   referUsers,
   show,
   isEdit,
diff --git a/src/containers/unit/Comments/EditorFooter.tsx b/src/containers/unit/Comments/EditorFooter.tsx
index 15023bb68..7b6c14f27 100755
--- a/src/containers/unit/Comments/EditorFooter.tsx
+++ b/src/containers/unit/Comments/EditorFooter.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON, ICON_CMD } from '@/config'
 
@@ -28,7 +28,7 @@ type TProps = {
   showFold?: boolean
 }
 
-const EditorFooter: React.FC<TProps> = ({
+const EditorFooter: FC<TProps> = ({
   loading,
   showPreview,
   onCreate,
diff --git a/src/containers/unit/Comments/EditorHeader.tsx b/src/containers/unit/Comments/EditorHeader.tsx
index 43a145f55..15c517d4b 100755
--- a/src/containers/unit/Comments/EditorHeader.tsx
+++ b/src/containers/unit/Comments/EditorHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TAccount, TUser } from '@/spec'
 import { ICON, ICON_CMD } from '@/config'
@@ -29,7 +29,7 @@ type TProps = {
   referUsers: TUser[]
 }
 
-const EditorHeader: React.FC<TProps> = ({
+const EditorHeader: FC<TProps> = ({
   accountInfo,
   showInputEditor,
   showInputPreview,
diff --git a/src/containers/unit/Comments/List/DateDivider.tsx b/src/containers/unit/Comments/List/DateDivider.tsx
index 01a987e52..59e865e01 100644
--- a/src/containers/unit/Comments/List/DateDivider.tsx
+++ b/src/containers/unit/Comments/List/DateDivider.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { Wrapper, SlashSign, DateText } from '../styles/list/date_divider'
 
@@ -6,7 +6,7 @@ type TProps = {
   text: string
 }
 
-const DateDivider: React.FC<TProps> = ({ text }) => (
+const DateDivider: FC<TProps> = ({ text }) => (
   <Wrapper>
     <SlashSign>&#47;&#47;</SlashSign> <DateText>{text}</DateText>
   </Wrapper>
diff --git a/src/containers/unit/Comments/List/Header.tsx b/src/containers/unit/Comments/List/Header.tsx
index a386a4855..945d221c1 100644
--- a/src/containers/unit/Comments/List/Header.tsx
+++ b/src/containers/unit/Comments/List/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import Tooltip from '@/components/Tooltip'
@@ -41,7 +41,7 @@ const ActionTooltip: React.FC<TActionTooltip> = ({ children, desc }) => {
   )
 }
 
-const Header: React.FC<TProps> = ({ totalCount, filterType }) => {
+const Header: FC<TProps> = ({ totalCount, filterType }) => {
   const switchItems = [
     {
       key: 'reply',
diff --git a/src/containers/unit/Comments/List/List.tsx b/src/containers/unit/Comments/List/List.tsx
index 019674417..f6b88ae74 100644
--- a/src/containers/unit/Comments/List/List.tsx
+++ b/src/containers/unit/Comments/List/List.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TAccount, TComment } from '@/spec'
 import Comment from '../Comment'
@@ -12,7 +12,7 @@ type TProps = {
   accountInfo: TAccount
 }
 
-const List: React.FC<TProps> = ({ entries, tobeDeleteId, accountInfo }) => {
+const List: FC<TProps> = ({ entries, tobeDeleteId, accountInfo }) => {
   return (
     <React.Fragment>
       {entries.map((c) => (
diff --git a/src/containers/unit/Comments/List/RepliesList.tsx b/src/containers/unit/Comments/List/RepliesList.tsx
index ad8cd0c42..b99cf3302 100644
--- a/src/containers/unit/Comments/List/RepliesList.tsx
+++ b/src/containers/unit/Comments/List/RepliesList.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TAccount, TComment } from '@/spec'
 
@@ -13,11 +13,7 @@ type TProps = {
   accountInfo: TAccount
 }
 
-const RepliesList: React.FC<TProps> = ({
-  entries,
-  tobeDeleteId,
-  accountInfo,
-}) => {
+const RepliesList: FC<TProps> = ({ entries, tobeDeleteId, accountInfo }) => {
   return (
     <RepliesWrapper>
       {entries.slice(7, 9).map((c) => (
diff --git a/src/containers/unit/Comments/List/TogglerButton.tsx b/src/containers/unit/Comments/List/TogglerButton.tsx
index 1c0a0c10d..7f100bf20 100644
--- a/src/containers/unit/Comments/List/TogglerButton.tsx
+++ b/src/containers/unit/Comments/List/TogglerButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import {
   Wrapper,
@@ -11,7 +11,7 @@ type TProps = {
   text: string
 }
 
-const TogglerButton: React.FC<TProps> = ({ text }) => (
+const TogglerButton: FC<TProps> = ({ text }) => (
   <Wrapper>
     <SlashSign>&#47;&#47;</SlashSign>
     <DividerLine />
diff --git a/src/containers/unit/Comments/List/index.tsx b/src/containers/unit/Comments/List/index.tsx
index 28372ce64..afd2925b7 100644
--- a/src/containers/unit/Comments/List/index.tsx
+++ b/src/containers/unit/Comments/List/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TPagedComments, TUser } from '@/spec'
 import Pagi from '@/components/Pagi'
@@ -22,7 +22,7 @@ type TProps = {
   }
 }
 
-const CommentsList: React.FC<TProps> = ({
+const CommentsList: FC<TProps> = ({
   accountInfo,
   pagedComments: { entries, totalCount, pageSize, pageNumber },
   restProps: { loading, loadingFresh, tobeDeleteId, filterType },
diff --git a/src/containers/unit/Comments/ReplyEditorHeader.tsx b/src/containers/unit/Comments/ReplyEditorHeader.tsx
index 4d35c388e..399eccb53 100755
--- a/src/containers/unit/Comments/ReplyEditorHeader.tsx
+++ b/src/containers/unit/Comments/ReplyEditorHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TAccount, TUser } from '@/spec'
 import { ICON_CMD } from '@/config'
@@ -23,7 +23,7 @@ type TProps = {
   showPreview: boolean
 }
 
-const ReplyEditorHeader: React.FC<TProps> = ({
+const ReplyEditorHeader: FC<TProps> = ({
   accountInfo,
   countCurrent,
   referUsers,
diff --git a/src/containers/unit/Comments/ReplyToBar.tsx b/src/containers/unit/Comments/ReplyToBar.tsx
index 09261b147..0e736965e 100755
--- a/src/containers/unit/Comments/ReplyToBar.tsx
+++ b/src/containers/unit/Comments/ReplyToBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TComment } from '@/spec'
 // import { ICON_CMD } from '@/config'
@@ -10,7 +10,7 @@ type TProps = {
   comment: TComment
 }
 
-const ReplyToBar: React.FC<TProps> = ({ comment }) => {
+const ReplyToBar: FC<TProps> = ({ comment }) => {
   if (!comment) return null
   return (
     <ReplyBar>
diff --git a/src/containers/unit/Comments/WordsCounter.tsx b/src/containers/unit/Comments/WordsCounter.tsx
index f4a3ed902..203c352d8 100755
--- a/src/containers/unit/Comments/WordsCounter.tsx
+++ b/src/containers/unit/Comments/WordsCounter.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { WORD_LIMIT } from '@/config'
 
@@ -14,7 +14,7 @@ type TProps = {
   countCurrent: number
 }
 
-const WordsCounter: React.FC<TProps> = ({ countCurrent }) => (
+const WordsCounter: FC<TProps> = ({ countCurrent }) => (
   <Wrapper>
     <CounterCur num={countCurrent}>{countCurrent}</CounterCur>
     <CounterSplit>/</CounterSplit>
diff --git a/src/containers/unit/Comments/index.tsx b/src/containers/unit/Comments/index.tsx
index b948d6b40..074b71b22 100755
--- a/src/containers/unit/Comments/index.tsx
+++ b/src/containers/unit/Comments/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 
@@ -30,7 +30,7 @@ type TProps = {
   onCreate?: () => void
 }
 
-const CommentsContainer: React.FC<TProps> = ({
+const CommentsContainer: FC<TProps> = ({
   comments: store,
   ssr = false,
   locked = false,
@@ -95,4 +95,4 @@ const CommentsContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(CommentsContainer) as React.FC<TProps>
+export default pluggedIn(CommentsContainer) as FC<TProps>
diff --git a/src/containers/unit/Footer/DesktopView/BottomInfo.tsx b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx
index 7faea41ff..01f29a046 100755
--- a/src/containers/unit/Footer/DesktopView/BottomInfo.tsx
+++ b/src/containers/unit/Footer/DesktopView/BottomInfo.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import Link from 'next/link'
+import React, { FC } from 'react'
 
 import { ROUTE } from '@/constant'
 
@@ -14,7 +13,7 @@ type TProps = {
   metric: string
 }
 
-const BottomInfo: React.FC<TProps> = ({ metric }) => {
+const BottomInfo: FC<TProps> = ({ metric }) => {
   return (
     <Wrapper metric={metric}>
       <InnerWrapper>
diff --git a/src/containers/unit/Footer/DesktopView/BriefView.tsx b/src/containers/unit/Footer/DesktopView/BriefView.tsx
index 624cc187e..b593a618e 100755
--- a/src/containers/unit/Footer/DesktopView/BriefView.tsx
+++ b/src/containers/unit/Footer/DesktopView/BriefView.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TArticle } from '@/spec'
 import { ISSUE_ADDR, API_SERVER_ADDR } from '@/config'
@@ -19,7 +19,7 @@ type TProps = {
   metric: string
 }
 
-const BriefView: React.FC<TProps> = ({ curView, metric, viewingArticle }) => {
+const BriefView: FC<TProps> = ({ curView, metric, viewingArticle }) => {
   return (
     <Wrapper metric={metric}>
       <InnerWrapper>
diff --git a/src/containers/unit/Footer/DesktopView/DigestView/index.tsx b/src/containers/unit/Footer/DesktopView/DigestView/index.tsx
index dd10ed0fc..0dd89d539 100644
--- a/src/containers/unit/Footer/DesktopView/DigestView/index.tsx
+++ b/src/containers/unit/Footer/DesktopView/DigestView/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { useTheme } from 'styled-components'
 
 import type { TThemeMap } from '@/spec'
@@ -24,7 +24,7 @@ type TProps = {
   metric: string
 }
 
-const DigestView: React.FC<TProps> = ({ metric }) => {
+const DigestView: FC<TProps> = ({ metric }) => {
   const theme = useTheme() as TThemeMap
 
   const linkColors = {
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/Article.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/Article.tsx
index 74acf0ca8..4e3919e84 100644
--- a/src/containers/unit/Footer/DesktopView/TopInfo/Article.tsx
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/Article.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import type { TProps as TTopInfoProps } from './index'
@@ -14,10 +14,7 @@ import {
 
 type TProps = Pick<TTopInfoProps, 'title' | 'noBottomBorder'>
 
-const Article: React.FC<TProps> = ({
-  title = 'article',
-  noBottomBorder = false,
-}) => {
+const Article: FC<TProps> = ({ title = 'article', noBottomBorder = false }) => {
   return (
     <Wrapper noBottomBorder={noBottomBorder}>
       <InfoBar>
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/Community.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/Community.tsx
index 280329dc6..69d249e39 100644
--- a/src/containers/unit/Footer/DesktopView/TopInfo/Community.tsx
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/Community.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ICON } from '@/config'
 import type { TProps as TTopInfoProps } from './index'
@@ -13,7 +13,7 @@ import {
 
 type TProps = Pick<TTopInfoProps, 'title' | 'noBottomBorder'>
 
-const Community: React.FC<TProps> = ({
+const Community: FC<TProps> = ({
   title = 'javascript',
   noBottomBorder = false,
 }) => {
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx
index 62c90d4dc..48184cff0 100644
--- a/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/HomeCommunity.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TProps as TTopInfoProps } from './index'
 
@@ -12,7 +12,7 @@ import {
 
 type TProps = Pick<TTopInfoProps, 'title'>
 
-const HomeCommunity: React.FC<TProps> = ({ title = 'CoderPlanets' }) => {
+const HomeCommunity: FC<TProps> = ({ title = 'CoderPlanets' }) => {
   return (
     <Wrapper>
       <InfoBar>
diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
index b9c9dc480..fca8beb97 100644
--- a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
+++ b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import HomeCommunity from './HomeCommunity'
 import Community from './Community'
@@ -10,7 +10,7 @@ export type TProps = {
   noBottomBorder?: boolean
 }
 
-const TopInfo: React.FC<TProps> = ({ type, ...restProps }) => {
+const TopInfo: FC<TProps> = ({ type, ...restProps }) => {
   switch (type) {
     case 'home': {
       return <HomeCommunity {...restProps} />
diff --git a/src/containers/unit/Footer/DesktopView/index.tsx b/src/containers/unit/Footer/DesktopView/index.tsx
index adbaae622..68330d8a4 100644
--- a/src/containers/unit/Footer/DesktopView/index.tsx
+++ b/src/containers/unit/Footer/DesktopView/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useState, useEffect } from 'react'
+import React, { FC, useState, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 import { contains } from 'ramda'
 
@@ -38,7 +38,7 @@ type TProps = {
   metric?: string // TODO
 }
 
-const FooterContainer: React.FC<TProps> = ({ footer: store, metric }) => {
+const FooterContainer: FC<TProps> = ({ footer: store, metric }) => {
   useInit(store)
   const {
     showSponsor,
@@ -93,4 +93,4 @@ const FooterContainer: React.FC<TProps> = ({ footer: store, metric }) => {
   )
 }
 
-export default pluggedIn(FooterContainer) as React.FC<TProps>
+export default pluggedIn(FooterContainer) as FC<TProps>
diff --git a/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx b/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx
index e23c816e8..16ce68c26 100644
--- a/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx
+++ b/src/containers/unit/Header/DesktopView/ArticleEditorView.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useEffect } from 'react'
+import React, { FC, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 
 import { ICON } from '@/config'
@@ -34,7 +34,7 @@ type TProps = {
   metric?: string
 }
 
-const ArticleEditorHeader: React.FC<TProps> = ({ header: store, metric }) => {
+const ArticleEditorHeader: FC<TProps> = ({ header: store, metric }) => {
   useInit(store, metric)
 
   const { isOnline, leftOffset, accountInfo, isLogin, curCommunity } = store
@@ -74,4 +74,4 @@ const ArticleEditorHeader: React.FC<TProps> = ({ header: store, metric }) => {
   )
 }
 
-export default pluggedIn(ArticleEditorHeader, 'header') as React.FC<TProps>
+export default pluggedIn(ArticleEditorHeader, 'header') as FC<TProps>
diff --git a/src/containers/unit/Header/DesktopView/ArticleView.tsx b/src/containers/unit/Header/DesktopView/ArticleView.tsx
index 6ac5f57bf..8f2519bb6 100644
--- a/src/containers/unit/Header/DesktopView/ArticleView.tsx
+++ b/src/containers/unit/Header/DesktopView/ArticleView.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useEffect } from 'react'
+import React, { FC, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 
 import { ICON } from '@/config'
@@ -35,10 +35,7 @@ type TProps = {
   metric?: string
 }
 
-const ArticleHeaderContainer: React.FC<TProps> = ({
-  header: store,
-  metric,
-}) => {
+const ArticleHeaderContainer: FC<TProps> = ({ header: store, metric }) => {
   useInit(store, metric)
 
   const {
@@ -90,4 +87,4 @@ const ArticleHeaderContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(ArticleHeaderContainer, 'header') as React.FC<TProps>
+export default pluggedIn(ArticleHeaderContainer, 'header') as FC<TProps>
diff --git a/src/containers/unit/Header/DesktopView/CommunityVIew.tsx b/src/containers/unit/Header/DesktopView/CommunityVIew.tsx
index bf9eee55f..4b35952a5 100644
--- a/src/containers/unit/Header/DesktopView/CommunityVIew.tsx
+++ b/src/containers/unit/Header/DesktopView/CommunityVIew.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useEffect } from 'react'
+import React, { FC, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 
 import { METRIC } from '@/constant'
@@ -38,7 +38,7 @@ type TProps = {
   header?: TStore
 }
 
-const CommunityHeaderContainer: React.FC<TProps> = ({
+const CommunityHeaderContainer: FC<TProps> = ({
   header: store,
   metric = METRIC.COMMUNITY,
 }) => {
@@ -99,4 +99,4 @@ const CommunityHeaderContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(CommunityHeaderContainer, 'header') as React.FC<TProps>
+export default pluggedIn(CommunityHeaderContainer, 'header') as FC<TProps>
diff --git a/src/containers/unit/Header/DesktopView/index.tsx b/src/containers/unit/Header/DesktopView/index.tsx
index 10463d27b..ff924bdb3 100644
--- a/src/containers/unit/Header/DesktopView/index.tsx
+++ b/src/containers/unit/Header/DesktopView/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { METRIC } from '@/constant'
 
@@ -24,7 +24,7 @@ type TProps = {
   metric: string
 }
 
-const DesktopView: React.FC<TProps> = ({ metric }) => {
+const DesktopView: FC<TProps> = ({ metric }) => {
   return <React.Fragment>{renderHeader(metric)}</React.Fragment>
 }
 
diff --git a/src/containers/unit/Header/ThreadsNav.tsx b/src/containers/unit/Header/ThreadsNav.tsx
index 7a4b9a02e..cf4f80b6a 100755
--- a/src/containers/unit/Header/ThreadsNav.tsx
+++ b/src/containers/unit/Header/ThreadsNav.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import type { TCommunity, TThread } from '@/spec'
 import { Trans } from '@/utils'
@@ -23,7 +23,7 @@ type TProps = {
   }
 }
 
-const ThreadsNav: React.FC<TProps> = ({
+const ThreadsNav: FC<TProps> = ({
   activeInfo: { community, activeThread },
 }) => {
   return (
diff --git a/src/containers/unit/Header/UserAccount.tsx b/src/containers/unit/Header/UserAccount.tsx
index 8134199d8..c1f80216e 100755
--- a/src/containers/unit/Header/UserAccount.tsx
+++ b/src/containers/unit/Header/UserAccount.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { useRouter } from 'next/router'
 
 import type { TAccount } from '@/spec'
@@ -29,7 +29,7 @@ type TProps = {
   accountInfo: TAccount
 }
 
-const UserAccount: React.FC<TProps> = ({ isLogin, accountInfo }) => {
+const UserAccount: FC<TProps> = ({ isLogin, accountInfo }) => {
   const router = useRouter()
 
   return (
diff --git a/src/containers/unit/ModeLine/index.tsx b/src/containers/unit/ModeLine/index.tsx
index 904f9e2b7..f8b41309d 100755
--- a/src/containers/unit/ModeLine/index.tsx
+++ b/src/containers/unit/ModeLine/index.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect } from 'react'
+import React, { FC, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 
 import { METRIC } from '@/constant'
@@ -29,7 +29,7 @@ type TProps = {
   metric?: string
 }
 
-const ModeLineContainer: React.FC<TProps> = ({
+const ModeLineContainer: FC<TProps> = ({
   modeLine: store,
   metric = METRIC.COMMUNITY,
 }) => {
@@ -69,4 +69,4 @@ const ModeLineContainer: React.FC<TProps> = ({
   )
 }
 
-export default pluggedIn(ModeLineContainer) as React.FC<TProps>
+export default pluggedIn(ModeLineContainer) as FC<TProps>
diff --git a/utils/mobx.ts b/utils/mobx.ts
index 64992b4b3..8b8fdf54d 100755
--- a/utils/mobx.ts
+++ b/utils/mobx.ts
@@ -61,12 +61,12 @@ export const storePlug = curry((selectedStore, props) => ({
  * the place where this container is used, and it needs to be manually exported where it
  * is used, such as:
  *
- * export default pluggedIn(HelpCenterContentContainer) as React.FC<TProps>
+ * export default pluggedIn(HelpCenterContentContainer) as FC<TProps>
  * ---
  * 因为无法获取传入的 container 的类型信息，导致这里只能返回一个空的 React.FC,这
  * 会导致使用这个 container 的地方出现类型报错，需要在使用的地方手动导出，比如:
  *
- * export default pluggedIn(HelpCenterContentContainer) as React.FC<TProps>
+ * export default pluggedIn(HelpCenterContentContainer) as FC<TProps>
  */
 export const pluggedIn = (
   // container: React.FC<typeof container>,
diff --git a/utils/scripts/generators/component/stateless.tsx.hbs b/utils/scripts/generators/component/stateless.tsx.hbs
index 2b62adaf3..d2001d0f5 100755
--- a/utils/scripts/generators/component/stateless.tsx.hbs
+++ b/utils/scripts/generators/component/stateless.tsx.hbs
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { buildLog } from '@/utils'
 {{#if wantI18n}}
@@ -22,7 +22,7 @@ type TProps = {
   testid?: string
 }
 
-const {{ properCase name }}: React.FC<TProps> = ({{preCurly ""}} testid = '{{ dashCase name }}' {{afterCurly ""}}) => {
+const {{ properCase name }}: FC<TProps> = ({{preCurly ""}} testid = '{{ dashCase name }}' {{afterCurly ""}}) => {
   {{#if wantI18n}}
   const { t } = useTrans()
   {{/if}}
diff --git a/utils/scripts/generators/container/hooks.tsx.hbs b/utils/scripts/generators/container/hooks.tsx.hbs
index 1382788d6..61286d63a 100755
--- a/utils/scripts/generators/container/hooks.tsx.hbs
+++ b/utils/scripts/generators/container/hooks.tsx.hbs
@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
 {{#if wantI18n}}
@@ -26,7 +26,7 @@ type TProps = {
   testid: string
 }
 
-const {{ properCase name }}Container: React.FC<TProps> = ({{preCurly ""}} 
+const {{ properCase name }}Container: FC<TProps> = ({{preCurly ""}} 
   {{ camelCase name}}: store, 
   testid,
 {{afterCurly ""}}) => {
@@ -43,4 +43,4 @@ const {{ properCase name }}Container: React.FC<TProps> = ({{preCurly ""}}
   )
 }
 
-export default pluggedIn({{ properCase name }}Container)
+export default pluggedIn({{ properCase name }}Container) as FC<TProps>