diff --git a/src/components/AlertBar/styles/index.ts b/src/components/AlertBar/styles/index.ts
index b0e70c242..30bb7956c 100755
--- a/src/components/AlertBar/styles/index.ts
+++ b/src/components/AlertBar/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import Img from '@/Img'
 // import { theme } from '@/utils'
 
diff --git a/src/components/ArticleEditToolbar/styles/copyright_selector.ts b/src/components/ArticleEditToolbar/styles/copyright_selector.ts
index 08858c3cd..bb965f815 100755
--- a/src/components/ArticleEditToolbar/styles/copyright_selector.ts
+++ b/src/components/ArticleEditToolbar/styles/copyright_selector.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/components/Buttons/OrButton/HorizontalButton.tsx b/src/components/Buttons/OrButton/HorizontalButton.tsx
index f75a7ae8f..da65a3496 100644
--- a/src/components/Buttons/OrButton/HorizontalButton.tsx
+++ b/src/components/Buttons/OrButton/HorizontalButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
+import type { TSIZE } from '@/spec'
 import { SIZE } from '@/constant'
-import { TButtonSize } from '@/spec'
 
 import {
   Wrapper,
@@ -12,7 +12,7 @@ import {
 
 type TProps = {
   activeKey: string
-  size?: TButtonSize
+  size?: TSIZE
   onClick: (key: string) => void
   group: {
     key: string
@@ -22,7 +22,7 @@ type TProps = {
 
 const HorizontalButton: React.FC<TProps> = ({
   onClick,
-  size = SIZE.SMALL as TButtonSize,
+  size = SIZE.SMALL as TSIZE,
   activeKey,
   group,
 }) => {
diff --git a/src/components/Buttons/styles/button.ts b/src/components/Buttons/styles/button.ts
index 21fe7ff5f..a459530b4 100644
--- a/src/components/Buttons/styles/button.ts
+++ b/src/components/Buttons/styles/button.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { lighten } from 'polished'
 
 import { css, theme } from '@/utils'
-import { TButtonSize, TButton } from '@/spec'
+import type { TSIZE, TButton } from '@/spec'
 
 import {
   getColor,
@@ -67,7 +67,7 @@ export const Wrapper = styled.button<TButton>`
     opacity: 1;
   }
 `
-export const ChildrenWrapper = styled.div<{ size: TButtonSize }>`
+export const ChildrenWrapper = styled.div<{ size: TSIZE }>`
   ${css.flex('align-both')};
   font-size: ${({ size }) => getFontSize(size)};
   position: relative;
diff --git a/src/components/Buttons/styles/metircs/button.ts b/src/components/Buttons/styles/metircs/button.ts
index e02663e30..d90f0cb70 100644
--- a/src/components/Buttons/styles/metircs/button.ts
+++ b/src/components/Buttons/styles/metircs/button.ts
@@ -1,7 +1,7 @@
 import { SIZE } from '@/constant'
 import { theme } from '@/utils'
 
-import { TTheme } from '@/spec'
+import type { TTheme } from '@/spec'
 
 export const getColor = (ghost: boolean, disabled: boolean): TTheme => {
   if (ghost) {
diff --git a/src/components/Buttons/styles/notify_button/index.ts b/src/components/Buttons/styles/notify_button/index.ts
index 06e1b6df1..84f2803d9 100644
--- a/src/components/Buttons/styles/notify_button/index.ts
+++ b/src/components/Buttons/styles/notify_button/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/Buttons/styles/or_button/horizontal_button.ts b/src/components/Buttons/styles/or_button/horizontal_button.ts
index 43941b171..0d4097d36 100644
--- a/src/components/Buttons/styles/or_button/horizontal_button.ts
+++ b/src/components/Buttons/styles/or_button/horizontal_button.ts
@@ -1,13 +1,13 @@
 import styled from 'styled-components'
 // import { lighten } from 'polished'
 
-import { TButton, TButtonSize } from '@/spec'
+import type { TButton, TSIZE } from '@/spec'
 import { theme, css } from '@/utils'
 
 import { Wrapper as BaseBtnWrapper } from '../button'
 import { OrSignBase } from './index'
 
-export const Wrapper = styled.div<{ size: TButtonSize }>`
+export const Wrapper = styled.div<{ size: TSIZE }>`
   ${css.flex('align-center')};
   position: relative;
 `
diff --git a/src/components/Buttons/styles/or_button/vertical_button.ts b/src/components/Buttons/styles/or_button/vertical_button.ts
index 5876273aa..51ff97e17 100644
--- a/src/components/Buttons/styles/or_button/vertical_button.ts
+++ b/src/components/Buttons/styles/or_button/vertical_button.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 // import { lighten } from 'polished'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { css, theme } from '@/utils'
 
 import { Wrapper as BaseBtnWrapper } from '../button'
diff --git a/src/components/BuyMeChuanChuan/styles/chuan_selector.ts b/src/components/BuyMeChuanChuan/styles/chuan_selector.ts
index ca76b2a3e..1035b46dd 100755
--- a/src/components/BuyMeChuanChuan/styles/chuan_selector.ts
+++ b/src/components/BuyMeChuanChuan/styles/chuan_selector.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { animate, theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/components/Charger/styles/index.ts b/src/components/Charger/styles/index.ts
index 74cef1968..eb0fa7969 100755
--- a/src/components/Charger/styles/index.ts
+++ b/src/components/Charger/styles/index.ts
@@ -1,6 +1,6 @@
 import styled, { css as styledCss, keyframes } from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/components/Checker/styles/index.ts b/src/components/Checker/styles/index.ts
index 2748263e4..95d1f21be 100755
--- a/src/components/Checker/styles/index.ts
+++ b/src/components/Checker/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/CollapseMenu/styles/item.ts b/src/components/CollapseMenu/styles/item.ts
index d9b264682..1bbf4b34b 100644
--- a/src/components/CollapseMenu/styles/item.ts
+++ b/src/components/CollapseMenu/styles/item.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div<TActive>`
diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts
index 10c0e5e3e..149f9c080 100755
--- a/src/components/Common/index.ts
+++ b/src/components/Common/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TSpace } from '@/spec'
+import type { TSpace } from '@/spec'
 
 export const Br = styled.div<TSpace>`
   margin-top: ${({ top }) => `${top}px` || 0};
diff --git a/src/components/CommunityList/styles/index.ts b/src/components/CommunityList/styles/index.ts
index 10c3518ad..f08cd8823 100755
--- a/src/components/CommunityList/styles/index.ts
+++ b/src/components/CommunityList/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TSpace } from '@/spec'
+import type { TSpace } from '@/spec'
 import { css, theme } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/components/CommunityStatesPad/styles/index.ts b/src/components/CommunityStatesPad/styles/index.ts
index 8ed9953f7..c9abd66c4 100755
--- a/src/components/CommunityStatesPad/styles/index.ts
+++ b/src/components/CommunityStatesPad/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/components/ContentFilter/styles/filter_result.ts b/src/components/ContentFilter/styles/filter_result.ts
index 7aa6134f8..375632127 100755
--- a/src/components/ContentFilter/styles/filter_result.ts
+++ b/src/components/ContentFilter/styles/filter_result.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div`
diff --git a/src/components/ContentFilter/styles/index.ts b/src/components/ContentFilter/styles/index.ts
index 115cbdddd..6f3d19f1c 100755
--- a/src/components/ContentFilter/styles/index.ts
+++ b/src/components/ContentFilter/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/components/CrashErrorHint/styles/index.ts b/src/components/CrashErrorHint/styles/index.ts
index ae358037a..ebe24df92 100755
--- a/src/components/CrashErrorHint/styles/index.ts
+++ b/src/components/CrashErrorHint/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme, themeSkins } from '@/utils'
 
 type TThemeName = {
diff --git a/src/components/CustomScroller/styles/index.ts b/src/components/CustomScroller/styles/index.ts
index f46b5aa1b..d039e928c 100755
--- a/src/components/CustomScroller/styles/index.ts
+++ b/src/components/CustomScroller/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import { getShadowWidth } from './helpers'
 
 type TBox = { width: string; height: string }
diff --git a/src/components/DigestSentence/styles/index.ts b/src/components/DigestSentence/styles/index.ts
index e3e4c4038..31f5f3170 100755
--- a/src/components/DigestSentence/styles/index.ts
+++ b/src/components/DigestSentence/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TSpace } from '@/spec'
+import type { TTestable, TSpace } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/DivideText/styles/index.ts b/src/components/DivideText/styles/index.ts
index 8d37b511b..be69c68c3 100755
--- a/src/components/DivideText/styles/index.ts
+++ b/src/components/DivideText/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import Img from '@/Img'
 import { css } from '@/utils'
 
diff --git a/src/components/EmailSubscriber/styles/default_layout/index.ts b/src/components/EmailSubscriber/styles/default_layout/index.ts
index c1fdec422..00ab38c9d 100644
--- a/src/components/EmailSubscriber/styles/default_layout/index.ts
+++ b/src/components/EmailSubscriber/styles/default_layout/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/components/EmailSubscriber/styles/email_hint_icon.ts b/src/components/EmailSubscriber/styles/email_hint_icon.ts
index c2465cb13..3777a85dc 100644
--- a/src/components/EmailSubscriber/styles/email_hint_icon.ts
+++ b/src/components/EmailSubscriber/styles/email_hint_icon.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { theme, css, animate } from '@/utils'
 
diff --git a/src/components/EmailSubscriber/styles/index.ts b/src/components/EmailSubscriber/styles/index.ts
index 4816d0b12..2c4eb7d67 100755
--- a/src/components/EmailSubscriber/styles/index.ts
+++ b/src/components/EmailSubscriber/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
diff --git a/src/components/EmailSubscriber/styles/simple_layout.ts b/src/components/EmailSubscriber/styles/simple_layout.ts
index 21bef937d..aab02b2be 100644
--- a/src/components/EmailSubscriber/styles/simple_layout.ts
+++ b/src/components/EmailSubscriber/styles/simple_layout.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import Input from '@/components/Input'
 import { css } from '@/utils'
diff --git a/src/components/ErrorPage/styles/code_snippets.ts b/src/components/ErrorPage/styles/code_snippets.ts
index 036690d53..2ace98762 100644
--- a/src/components/ErrorPage/styles/code_snippets.ts
+++ b/src/components/ErrorPage/styles/code_snippets.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/components/ErrorPage/styles/index.ts b/src/components/ErrorPage/styles/index.ts
index ec3bf6b59..df47bf547 100755
--- a/src/components/ErrorPage/styles/index.ts
+++ b/src/components/ErrorPage/styles/index.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import { theme, css } from '@/utils'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 // import PromptIcon from '@/components/PromptIcon'
 
diff --git a/src/components/ErrorPage/styles/spin_planet.ts b/src/components/ErrorPage/styles/spin_planet.ts
index a70c8a2ed..8bbe2c1c1 100644
--- a/src/components/ErrorPage/styles/spin_planet.ts
+++ b/src/components/ErrorPage/styles/spin_planet.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { animate } from '@/utils'
 // import Img from '@/Img'
 // import PromptIcon from '@/components/PromptIcon'
diff --git a/src/components/ExpandIcon/styles/index.ts b/src/components/ExpandIcon/styles/index.ts
index e28620d1f..3d1cf6fa1 100755
--- a/src/components/ExpandIcon/styles/index.ts
+++ b/src/components/ExpandIcon/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/ExpandIcon/styles/metric.ts b/src/components/ExpandIcon/styles/metric.ts
index da20a703d..554c8f6ef 100644
--- a/src/components/ExpandIcon/styles/metric.ts
+++ b/src/components/ExpandIcon/styles/metric.ts
@@ -1,7 +1,7 @@
 import { theme } from '@/utils'
 import { SIZE } from '@/constant'
 
-import { TTheme } from '@/spec'
+import type { TTheme } from '@/spec'
 
 export const getNormalColor = (type: string): TTheme => {
   switch (type) {
diff --git a/src/components/FaqPeekList/styles/index.ts b/src/components/FaqPeekList/styles/index.ts
index b3726dbc4..197fcfe0d 100755
--- a/src/components/FaqPeekList/styles/index.ts
+++ b/src/components/FaqPeekList/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { theme } from '@/utils'
 
diff --git a/src/components/FiltersMenu/styles/filter/index.ts b/src/components/FiltersMenu/styles/filter/index.ts
index dcc022f25..71f94f858 100755
--- a/src/components/FiltersMenu/styles/filter/index.ts
+++ b/src/components/FiltersMenu/styles/filter/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/FiltersMenu/styles/header.ts b/src/components/FiltersMenu/styles/header.ts
index 6fb339b2b..9b4c3a812 100644
--- a/src/components/FiltersMenu/styles/header.ts
+++ b/src/components/FiltersMenu/styles/header.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/FiltersMenu/styles/index.ts b/src/components/FiltersMenu/styles/index.ts
index 1993f6120..9811fc2c2 100755
--- a/src/components/FiltersMenu/styles/index.ts
+++ b/src/components/FiltersMenu/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/FocusLine/styles/index.ts b/src/components/FocusLine/styles/index.ts
index 127c4f4cf..6fbda2caf 100755
--- a/src/components/FocusLine/styles/index.ts
+++ b/src/components/FocusLine/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/components/Folder/styles/index.ts b/src/components/Folder/styles/index.ts
index 914bea4e3..55156ebe8 100755
--- a/src/components/Folder/styles/index.ts
+++ b/src/components/Folder/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/FormItem/styles/index.ts b/src/components/FormItem/styles/index.ts
index ebeeb4319..01b710844 100755
--- a/src/components/FormItem/styles/index.ts
+++ b/src/components/FormItem/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TSpace } from '@/spec'
+import type { TSpace } from '@/spec'
 import { theme, css } from '@/utils'
 import Input from '@/components/Input'
 
diff --git a/src/components/GithubRepoPage/styles/index.ts b/src/components/GithubRepoPage/styles/index.ts
index 639c964ae..3fde3c2a1 100755
--- a/src/components/GithubRepoPage/styles/index.ts
+++ b/src/components/GithubRepoPage/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css, animate } from '@/utils'
 import { Button } from '@/components/Buttons'
 
diff --git a/src/components/GotoTop/styles/index.ts b/src/components/GotoTop/styles/index.ts
index 1b44629e0..a2ba45864 100755
--- a/src/components/GotoTop/styles/index.ts
+++ b/src/components/GotoTop/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/IconText/styles/index.ts b/src/components/IconText/styles/index.ts
index 353a8b18a..c136b6411 100755
--- a/src/components/IconText/styles/index.ts
+++ b/src/components/IconText/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/ImgFallback/styles/avatar.ts b/src/components/ImgFallback/styles/avatar.ts
index d01536ef0..2de427ecc 100644
--- a/src/components/ImgFallback/styles/avatar.ts
+++ b/src/components/ImgFallback/styles/avatar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TSpace } from '@/spec'
+import type { TTestable, TSpace } from '@/spec'
 import { css, theme } from '@/utils'
 import { getFontSize } from './metric/avatar'
 
diff --git a/src/components/ImgFallback/styles/index.ts b/src/components/ImgFallback/styles/index.ts
index 553824eb6..37c8a9b5a 100755
--- a/src/components/ImgFallback/styles/index.ts
+++ b/src/components/ImgFallback/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import Img from '@/Img'
 // import { theme } from '@/utils'
 
diff --git a/src/components/ImgFallback/styles/work.ts b/src/components/ImgFallback/styles/work.ts
index 851dca9b1..fd2b3edb8 100644
--- a/src/components/ImgFallback/styles/work.ts
+++ b/src/components/ImgFallback/styles/work.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TSpace } from '@/spec'
+import type { TTestable, TSpace } from '@/spec'
 // import Img from '@/Img'
 import { css } from '@/utils'
 
diff --git a/src/components/Input/styles/index.ts b/src/components/Input/styles/index.ts
index 44378d779..c3e5bd775 100755
--- a/src/components/Input/styles/index.ts
+++ b/src/components/Input/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/Input/styles/textarea.ts b/src/components/Input/styles/textarea.ts
index 018a23102..1a277bab1 100644
--- a/src/components/Input/styles/textarea.ts
+++ b/src/components/Input/styles/textarea.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme } from '@/utils'
 
 import { baseInput } from './index'
diff --git a/src/components/Modal/styles/index.ts b/src/components/Modal/styles/index.ts
index 3111923db..6133b35c3 100755
--- a/src/components/Modal/styles/index.ts
+++ b/src/components/Modal/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, animate, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/components/NaviCatalog/styles/header.ts b/src/components/NaviCatalog/styles/header.ts
index 98f01a7b0..80bb8255e 100644
--- a/src/components/NaviCatalog/styles/header.ts
+++ b/src/components/NaviCatalog/styles/header.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/NaviCatalog/styles/index.ts b/src/components/NaviCatalog/styles/index.ts
index 3811802b6..7ad319ddb 100755
--- a/src/components/NaviCatalog/styles/index.ts
+++ b/src/components/NaviCatalog/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/NaviCatalog/styles/list/index.ts b/src/components/NaviCatalog/styles/list/index.ts
index 93c3318be..0311c480e 100644
--- a/src/components/NaviCatalog/styles/list/index.ts
+++ b/src/components/NaviCatalog/styles/list/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/NaviIntro/styles/index.ts b/src/components/NaviIntro/styles/index.ts
index 0a9c62464..782606eb3 100755
--- a/src/components/NaviIntro/styles/index.ts
+++ b/src/components/NaviIntro/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/Navigator/styles/index.ts b/src/components/Navigator/styles/index.ts
index b5f759f0d..56c94e568 100755
--- a/src/components/Navigator/styles/index.ts
+++ b/src/components/Navigator/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { animate, theme, css } from '@/utils'
 import CommunityFaceLogo from '@/components/CommunityFaceLogo'
 
diff --git a/src/components/Navigator/styles/main_entries.ts b/src/components/Navigator/styles/main_entries.ts
index 4264de471..bd5c348b7 100755
--- a/src/components/Navigator/styles/main_entries.ts
+++ b/src/components/Navigator/styles/main_entries.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 import DotDividerBase from '@/components/DotDivider'
diff --git a/src/components/Pagi/styles/index.ts b/src/components/Pagi/styles/index.ts
index 2429523e4..d294ac59f 100755
--- a/src/components/Pagi/styles/index.ts
+++ b/src/components/Pagi/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TSpace } from '@/spec'
+import type { TSpace } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/PostItem/styles/index.ts b/src/components/PostItem/styles/index.ts
index b31e20cc2..3e993c3b3 100755
--- a/src/components/PostItem/styles/index.ts
+++ b/src/components/PostItem/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive, TUser } from '@/spec'
+import type { TActive, TUser } from '@/spec'
 import { theme, css } from '@/utils'
 
 import { getOpacity } from './metrics'
diff --git a/src/components/SectionLabel/styles/index.ts b/src/components/SectionLabel/styles/index.ts
index 80a284e10..c170f7d79 100755
--- a/src/components/SectionLabel/styles/index.ts
+++ b/src/components/SectionLabel/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, animate, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/components/Select/styles/index.ts b/src/components/Select/styles/index.ts
index 81d0cb898..ab03a9744 100755
--- a/src/components/Select/styles/index.ts
+++ b/src/components/Select/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { animate, css, theme } from '@/utils'
 
 export { getSelectStyles } from './metric'
diff --git a/src/components/Sticky/styles/index.ts b/src/components/Sticky/styles/index.ts
index 553824eb6..37c8a9b5a 100755
--- a/src/components/Sticky/styles/index.ts
+++ b/src/components/Sticky/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import Img from '@/Img'
 // import { theme } from '@/utils'
 
diff --git a/src/components/SubTitle/styles/index.ts b/src/components/SubTitle/styles/index.ts
index 7debfc4c0..c98886f45 100755
--- a/src/components/SubTitle/styles/index.ts
+++ b/src/components/SubTitle/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/Switcher/styles/icon_selector.ts b/src/components/Switcher/styles/icon_selector.ts
index 5cd610c81..3be85ddee 100644
--- a/src/components/Switcher/styles/icon_selector.ts
+++ b/src/components/Switcher/styles/icon_selector.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts b/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts
index 89d6763a0..72a3c7852 100644
--- a/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts
+++ b/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { css } from '@/utils'
 
 export const SwitchWrapper = styled.div`
diff --git a/src/components/Switcher/styles/radio.ts b/src/components/Switcher/styles/radio.ts
index 0a56f8ecf..38b666380 100644
--- a/src/components/Switcher/styles/radio.ts
+++ b/src/components/Switcher/styles/radio.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 import {
diff --git a/src/components/Switcher/styles/tabs/drawer_view.ts b/src/components/Switcher/styles/tabs/drawer_view.ts
index 684970d94..0bc852fd0 100644
--- a/src/components/Switcher/styles/tabs/drawer_view.ts
+++ b/src/components/Switcher/styles/tabs/drawer_view.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({
diff --git a/src/components/Switcher/styles/tabs/index.ts b/src/components/Switcher/styles/tabs/index.ts
index ec7467131..b9065f32b 100755
--- a/src/components/Switcher/styles/tabs/index.ts
+++ b/src/components/Switcher/styles/tabs/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 
 type TSlipBar = {
diff --git a/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts b/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts
index 151f80fa7..2330b0f10 100644
--- a/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts
+++ b/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts b/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts
index 465ec0d04..fc8281b3b 100644
--- a/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts
+++ b/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/Switcher/styles/tabs/tab_icon.ts b/src/components/Switcher/styles/tabs/tab_icon.ts
index 50d22e971..13d640e00 100644
--- a/src/components/Switcher/styles/tabs/tab_icon.ts
+++ b/src/components/Switcher/styles/tabs/tab_icon.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/Switcher/styles/tabs/tab_item.ts b/src/components/Switcher/styles/tabs/tab_item.ts
index f506357b3..43d64d4a7 100644
--- a/src/components/Switcher/styles/tabs/tab_item.ts
+++ b/src/components/Switcher/styles/tabs/tab_item.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { css, theme } from '@/utils'
 
 import { getMarginRight, getPadding, getMarginBottom } from '../metric/tabs'
diff --git a/src/components/TabBar/styles/desktop_view/brief_view.ts b/src/components/TabBar/styles/desktop_view/brief_view.ts
index 41eb86c20..57efcb2bb 100755
--- a/src/components/TabBar/styles/desktop_view/brief_view.ts
+++ b/src/components/TabBar/styles/desktop_view/brief_view.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div`
diff --git a/src/components/TabSelector/styles/index.ts b/src/components/TabSelector/styles/index.ts
index 19b5914a7..b83c43b76 100755
--- a/src/components/TabSelector/styles/index.ts
+++ b/src/components/TabSelector/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/components/Tag/styles/index.ts b/src/components/Tag/styles/index.ts
index 97c9510c6..f6db25b66 100755
--- a/src/components/Tag/styles/index.ts
+++ b/src/components/Tag/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/TheAvatar/styles/article_author_avatar.ts b/src/components/TheAvatar/styles/article_author_avatar.ts
index e4d2decca..58db1ecc3 100644
--- a/src/components/TheAvatar/styles/article_author_avatar.ts
+++ b/src/components/TheAvatar/styles/article_author_avatar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/TheAvatar/styles/index.ts b/src/components/TheAvatar/styles/index.ts
index ecf451329..8942d5e89 100755
--- a/src/components/TheAvatar/styles/index.ts
+++ b/src/components/TheAvatar/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/TheAvatar/styles/post_item_avatar.ts b/src/components/TheAvatar/styles/post_item_avatar.ts
index bf1bf575e..19710570b 100644
--- a/src/components/TheAvatar/styles/post_item_avatar.ts
+++ b/src/components/TheAvatar/styles/post_item_avatar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/components/ThemeSelector/styles/card_selector.ts b/src/components/ThemeSelector/styles/card_selector.ts
index af46a5033..2cc999db1 100755
--- a/src/components/ThemeSelector/styles/card_selector.ts
+++ b/src/components/ThemeSelector/styles/card_selector.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/components/ThemeSelector/styles/gallery_selector.ts b/src/components/ThemeSelector/styles/gallery_selector.ts
index 4da038f49..1e28aa252 100644
--- a/src/components/ThemeSelector/styles/gallery_selector.ts
+++ b/src/components/ThemeSelector/styles/gallery_selector.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 import { Dot } from './index'
diff --git a/src/components/ThemeSelector/styles/index.ts b/src/components/ThemeSelector/styles/index.ts
index 259047428..ba86d250b 100755
--- a/src/components/ThemeSelector/styles/index.ts
+++ b/src/components/ThemeSelector/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive, TThemeName } from '@/spec'
+import type { TActive, TThemeName } from '@/spec'
 import { theme, themeCoverMap, themeCoverIndexMap, css } from '@/utils'
 
 type TDot = TActive & { name: TThemeName }
diff --git a/src/components/ThreadSelector/styles/panel.ts b/src/components/ThreadSelector/styles/panel.ts
index c2bb8d580..56ee154e3 100755
--- a/src/components/ThreadSelector/styles/panel.ts
+++ b/src/components/ThreadSelector/styles/panel.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div`
diff --git a/src/components/WorksCard/styles/index.ts b/src/components/WorksCard/styles/index.ts
index 8fbabca17..dcea49964 100755
--- a/src/components/WorksCard/styles/index.ts
+++ b/src/components/WorksCard/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/Route/store.js b/src/containers/Route/store.ts
similarity index 87%
rename from src/containers/Route/store.js
rename to src/containers/Route/store.ts
index 7054f638e..acb748769 100755
--- a/src/containers/Route/store.js
+++ b/src/containers/Route/store.ts
@@ -3,10 +3,12 @@
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, getParent, Instance } from 'mobx-state-tree'
 import { merge, pickBy, omit, isEmpty } from 'ramda'
 
+import type { TRootStore, TRoute } from '@/spec'
 import { PAGE_SIZE } from '@/config'
+
 import {
   Global,
   isClientSide,
@@ -34,15 +36,13 @@ const RouteStore = T.model('RouteStore', {
   query: T.optional(Query, {}),
 })
   .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get curRoute() {
+    get curRoute(): TRoute {
       const { communityPath, threadPath, mainPath, subPath } = self
       return { communityPath, threadPath, mainPath, subPath }
     },
-    get isNotDesktop() {
-      const { isMobile } = self.root
+    get isNotDesktop(): boolean {
+      const root = getParent(self) as TRootStore
+      const { isMobile } = root
 
       return isMobile
     },
@@ -59,7 +59,7 @@ const RouteStore = T.model('RouteStore', {
      *
      * @returns {boolean}
      */
-    markRoute(query, opt) {
+    markRoute(query, opt = {}) {
       const defaultOpt = { onlyDesktop: false }
       const option = merge(defaultOpt, opt)
 
@@ -95,9 +95,11 @@ const RouteStore = T.model('RouteStore', {
       // NOTE:  Router.push(url, asPath, { shallow: true }) is not working on pruction env
       return Global.history.pushState({}, null, asPath)
     },
-    mark(sobj) {
+    mark(sobj: Record<string, unknown>): void {
       markStates(sobj, self)
     },
   }))
 
+export type TStore = Instance<typeof RouteStore>
+
 export default RouteStore
diff --git a/src/containers/content/CommunityContent/styles/index.ts b/src/containers/content/CommunityContent/styles/index.ts
index 0959a0bc6..34e050b69 100755
--- a/src/containers/content/CommunityContent/styles/index.ts
+++ b/src/containers/content/CommunityContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css, WIDTH, pixelAdd } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/content/CoolGuideContent/styles/filter_bar.ts b/src/containers/content/CoolGuideContent/styles/filter_bar.ts
index 399c5ddb7..5e33372a1 100644
--- a/src/containers/content/CoolGuideContent/styles/filter_bar.ts
+++ b/src/containers/content/CoolGuideContent/styles/filter_bar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/content/CoolGuideContent/styles/index.ts b/src/containers/content/CoolGuideContent/styles/index.ts
index 381455c64..681f00d0a 100755
--- a/src/containers/content/CoolGuideContent/styles/index.ts
+++ b/src/containers/content/CoolGuideContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 import { SIDEBAR_WIDTH } from './metric'
 
diff --git a/src/containers/content/DiscoveryContent/styles/banner.ts b/src/containers/content/DiscoveryContent/styles/banner.ts
index 6fa48e5c7..c97022b44 100755
--- a/src/containers/content/DiscoveryContent/styles/banner.ts
+++ b/src/containers/content/DiscoveryContent/styles/banner.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css } from '@/utils'
 
 import Img from '@/Img'
diff --git a/src/containers/content/DiscoveryContent/styles/search_box.ts b/src/containers/content/DiscoveryContent/styles/search_box.ts
index 9ae361e6d..13e6e4235 100755
--- a/src/containers/content/DiscoveryContent/styles/search_box.ts
+++ b/src/containers/content/DiscoveryContent/styles/search_box.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/content/DiscoveryContent/styles/sidebar.ts b/src/containers/content/DiscoveryContent/styles/sidebar.ts
index a5e0047da..68aabc71a 100644
--- a/src/containers/content/DiscoveryContent/styles/sidebar.ts
+++ b/src/containers/content/DiscoveryContent/styles/sidebar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div<TActive>`
diff --git a/src/containers/content/FriendsContent/styles/index.ts b/src/containers/content/FriendsContent/styles/index.ts
index bb18b0fd9..515054228 100755
--- a/src/containers/content/FriendsContent/styles/index.ts
+++ b/src/containers/content/FriendsContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts
index b3d4539af..440ab66f1 100755
--- a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts
+++ b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/content/HaveADrinkContent/styles/body/setting.ts b/src/containers/content/HaveADrinkContent/styles/body/setting.ts
index 08a6c0740..cdc6e55e2 100755
--- a/src/containers/content/HaveADrinkContent/styles/body/setting.ts
+++ b/src/containers/content/HaveADrinkContent/styles/body/setting.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/content/HelpCenterContent/Digest.tsx b/src/containers/content/HelpCenterContent/Digest.tsx
index d082a5b8d..a19fe033a 100644
--- a/src/containers/content/HelpCenterContent/Digest.tsx
+++ b/src/containers/content/HelpCenterContent/Digest.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 // import { METRIC } from '@/constant'
 
-import { TCommunity } from '@/spec'
+import type { TCommunity } from '@/spec'
 
 import {
   Wrapper,
diff --git a/src/containers/content/HelpCenterContent/index.tsx b/src/containers/content/HelpCenterContent/index.tsx
index 78c41e5cf..145a28f07 100755
--- a/src/containers/content/HelpCenterContent/index.tsx
+++ b/src/containers/content/HelpCenterContent/index.tsx
@@ -11,7 +11,7 @@ import React from 'react'
 import { METRIC } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
-import { TStore } from './store'
+import type { TStore } from './store'
 
 import Cover from './Cover'
 import Detail from './Detail'
diff --git a/src/containers/content/HelpCenterContent/logic.ts b/src/containers/content/HelpCenterContent/logic.ts
index 571fcba6f..e70731d2a 100755
--- a/src/containers/content/HelpCenterContent/logic.ts
+++ b/src/containers/content/HelpCenterContent/logic.ts
@@ -2,9 +2,11 @@ import { useEffect } from 'react'
 // import { } from 'ramda'
 
 import { buildLog } from '@/utils'
-// import S from './service'
+
+import type { TStore } from './store'
 import { VIEW } from './constant'
-import { TStore } from './store'
+
+// import S from './service'
 
 let store: TStore | undefined
 
diff --git a/src/containers/content/HelpCenterContent/store.ts b/src/containers/content/HelpCenterContent/store.ts
index 7fd6d4aa3..d40d644d6 100755
--- a/src/containers/content/HelpCenterContent/store.ts
+++ b/src/containers/content/HelpCenterContent/store.ts
@@ -6,9 +6,7 @@
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 import { values } from 'ramda'
 
-import { IRootStore } from '@/stores/RootStore'
-
-import { TCommunity } from '@/spec'
+import type { TRootStore, TCommunity } from '@/spec'
 import { markStates, buildLog, stripMobx } from '@/utils'
 
 import { VIEW } from './constant'
@@ -22,7 +20,7 @@ export const HelpCenterContent = T.model('HelpCenterContent', {
   .views((self) => ({
     get curCommunity(): TCommunity {
       // see https://github.com/mobxjs/mobx-state-tree/issues/371#issuecomment-479369372
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
 
       return stripMobx(root.viewing.community)
     },
diff --git a/src/containers/content/HelpCenterContent/styles/index.ts b/src/containers/content/HelpCenterContent/styles/index.ts
index 83af37357..bd039a5d4 100755
--- a/src/containers/content/HelpCenterContent/styles/index.ts
+++ b/src/containers/content/HelpCenterContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts b/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts
index b8c3f6dfb..3362556f9 100755
--- a/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts
+++ b/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/content/MeetupsContent/styles/date_selector/cell.ts b/src/containers/content/MeetupsContent/styles/date_selector/cell.ts
index 1ec95cfe2..0d454ae77 100755
--- a/src/containers/content/MeetupsContent/styles/date_selector/cell.ts
+++ b/src/containers/content/MeetupsContent/styles/date_selector/cell.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { css } from '@/utils'
 
diff --git a/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts b/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts
index b46c8e97f..c2363fcc2 100644
--- a/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts
+++ b/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 // import { theme, css } from '@/utils'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 
 const color = {
   dark: '#1d667d',
diff --git a/src/containers/content/MembershipContent/styles/illustrations/index.ts b/src/containers/content/MembershipContent/styles/illustrations/index.ts
index d90099698..98b83a87d 100644
--- a/src/containers/content/MembershipContent/styles/illustrations/index.ts
+++ b/src/containers/content/MembershipContent/styles/illustrations/index.ts
@@ -1,6 +1,6 @@
 import styled, { css as styledCss } from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { animate, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/content/MembershipContent/styles/illustrations/rocket.ts b/src/containers/content/MembershipContent/styles/illustrations/rocket.ts
index 7f16e278f..2ff9fcd73 100644
--- a/src/containers/content/MembershipContent/styles/illustrations/rocket.ts
+++ b/src/containers/content/MembershipContent/styles/illustrations/rocket.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/content/MembershipContent/styles/illustrations/ufo.ts b/src/containers/content/MembershipContent/styles/illustrations/ufo.ts
index dec94ecad..480ab06fb 100644
--- a/src/containers/content/MembershipContent/styles/illustrations/ufo.ts
+++ b/src/containers/content/MembershipContent/styles/illustrations/ufo.ts
@@ -1,6 +1,6 @@
 import styled, { css as styledCss } from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { animate, css } from '@/utils'
 
 import {
diff --git a/src/containers/content/MembershipContent/styles/index.ts b/src/containers/content/MembershipContent/styles/index.ts
index 1909f51b9..11c5b9457 100755
--- a/src/containers/content/MembershipContent/styles/index.ts
+++ b/src/containers/content/MembershipContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/content/MembershipContent/styles/monthly_warning.ts b/src/containers/content/MembershipContent/styles/monthly_warning.ts
index e085912b5..8ce75c415 100644
--- a/src/containers/content/MembershipContent/styles/monthly_warning.ts
+++ b/src/containers/content/MembershipContent/styles/monthly_warning.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/content/MembershipContent/styles/price_tag.ts b/src/containers/content/MembershipContent/styles/price_tag.ts
index c740ddf44..4c1f7c3d4 100644
--- a/src/containers/content/MembershipContent/styles/price_tag.ts
+++ b/src/containers/content/MembershipContent/styles/price_tag.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 import { Dashboard } from './index'
diff --git a/src/containers/content/MembershipContent/styles/qa.ts b/src/containers/content/MembershipContent/styles/qa.ts
index 27f145987..084094f08 100644
--- a/src/containers/content/MembershipContent/styles/qa.ts
+++ b/src/containers/content/MembershipContent/styles/qa.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/content/MembershipContent/styles/support.ts b/src/containers/content/MembershipContent/styles/support.ts
index 90d2b36f3..e7f868077 100644
--- a/src/containers/content/MembershipContent/styles/support.ts
+++ b/src/containers/content/MembershipContent/styles/support.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/content/RecipesContent/styles/filter_bar.ts b/src/containers/content/RecipesContent/styles/filter_bar.ts
index 4328326ce..53c66648e 100644
--- a/src/containers/content/RecipesContent/styles/filter_bar.ts
+++ b/src/containers/content/RecipesContent/styles/filter_bar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/content/RecipesContent/styles/index.ts b/src/containers/content/RecipesContent/styles/index.ts
index 7072bbf60..6d201e509 100755
--- a/src/containers/content/RecipesContent/styles/index.ts
+++ b/src/containers/content/RecipesContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 
 import { SIDEBAR_WIDTH } from './metric'
diff --git a/src/containers/content/SponsorContent/styles/banner.ts b/src/containers/content/SponsorContent/styles/banner.ts
index 886a9e1dd..21889b167 100644
--- a/src/containers/content/SponsorContent/styles/banner.ts
+++ b/src/containers/content/SponsorContent/styles/banner.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { css, theme } from '@/utils'
 
 import { ArrowLink } from '@/components/Buttons'
diff --git a/src/containers/content/SponsorContent/styles/index.ts b/src/containers/content/SponsorContent/styles/index.ts
index 69d0a9c9b..3bbf81c17 100755
--- a/src/containers/content/SponsorContent/styles/index.ts
+++ b/src/containers/content/SponsorContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/content/SponsorContent/styles/sponsor_type_title.ts b/src/containers/content/SponsorContent/styles/sponsor_type_title.ts
index 40b0c94a5..5e34c3254 100644
--- a/src/containers/content/SponsorContent/styles/sponsor_type_title.ts
+++ b/src/containers/content/SponsorContent/styles/sponsor_type_title.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/content/SubscribeContent/styles/actions/index.ts b/src/containers/content/SubscribeContent/styles/actions/index.ts
index 8a4f1330b..e21e8ed7a 100644
--- a/src/containers/content/SubscribeContent/styles/actions/index.ts
+++ b/src/containers/content/SubscribeContent/styles/actions/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { Button } from '@/components/Buttons'
 import { css, theme } from '@/utils'
diff --git a/src/containers/content/SubscribeContent/styles/index.ts b/src/containers/content/SubscribeContent/styles/index.ts
index e6c2701f6..d759748e1 100755
--- a/src/containers/content/SubscribeContent/styles/index.ts
+++ b/src/containers/content/SubscribeContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme, WIDTH } from '@/utils'
 import Sticky from '@/components/Sticky'
 
diff --git a/src/containers/content/WorksContent/styles/brand.ts b/src/containers/content/WorksContent/styles/brand.ts
index 26d5424a6..b905286ce 100644
--- a/src/containers/content/WorksContent/styles/brand.ts
+++ b/src/containers/content/WorksContent/styles/brand.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/content/WorksContent/styles/index.ts b/src/containers/content/WorksContent/styles/index.ts
index a7dfaa9e9..0337bf966 100755
--- a/src/containers/content/WorksContent/styles/index.ts
+++ b/src/containers/content/WorksContent/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/content/WorksContent/styles/list/option_tab.ts b/src/containers/content/WorksContent/styles/list/option_tab.ts
index 2b552e8d0..f76efa02f 100644
--- a/src/containers/content/WorksContent/styles/list/option_tab.ts
+++ b/src/containers/content/WorksContent/styles/list/option_tab.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/index.ts b/src/containers/content/WorksContent/styles/right_sidebar/index.ts
index 50732104c..34f26a70d 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/index.ts
+++ b/src/containers/content/WorksContent/styles/right_sidebar/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TSpace } from '@/spec'
+import type { TTestable, TSpace } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
index 0e76a2f29..7d02b2e24 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
+++ b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
index 22b5c23ac..e08d33542 100644
--- a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
+++ b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts b/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts
index 5a6f0b928..7abe2d7f3 100755
--- a/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts
+++ b/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css, animate } from '@/utils'
 
diff --git a/src/containers/digest/CommunityDigest/styles/index.ts b/src/containers/digest/CommunityDigest/styles/index.ts
index 84afe682f..5e8e5c237 100755
--- a/src/containers/digest/CommunityDigest/styles/index.ts
+++ b/src/containers/digest/CommunityDigest/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/editor/AccountEditor/styles/social_inputer.ts b/src/containers/editor/AccountEditor/styles/social_inputer.ts
index 8bbf43bd3..00c548851 100755
--- a/src/containers/editor/AccountEditor/styles/social_inputer.ts
+++ b/src/containers/editor/AccountEditor/styles/social_inputer.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts
index da88e8495..60bb5df6b 100644
--- a/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts
+++ b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts
index 42074ed9d..d756e35e6 100644
--- a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts
+++ b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/index.ts b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts
index 495c8e5a3..0b1293c11 100644
--- a/src/containers/editor/ArticleEditor/styles/editor/header/index.ts
+++ b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import Input from '@/components/Input'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/editor/ArticleEditor/styles/index.ts b/src/containers/editor/ArticleEditor/styles/index.ts
index 51b83b404..2c8316a5e 100755
--- a/src/containers/editor/ArticleEditor/styles/index.ts
+++ b/src/containers/editor/ArticleEditor/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/editor/CommunityEditor/styles/banner/index.ts b/src/containers/editor/CommunityEditor/styles/banner/index.ts
index 7037a0fe2..d3cbc74c9 100755
--- a/src/containers/editor/CommunityEditor/styles/banner/index.ts
+++ b/src/containers/editor/CommunityEditor/styles/banner/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/editor/CommunityEditor/styles/banner/input_box.ts b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts
index d0e928c2e..ed8b1f601 100755
--- a/src/containers/editor/CommunityEditor/styles/banner/input_box.ts
+++ b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts
index cdb749ce4..d6062450a 100755
--- a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts
+++ b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { css, theme } from '@/utils'
 // import Img from '@/Img'
 
diff --git a/src/containers/editor/JobEditor/styles/index.ts b/src/containers/editor/JobEditor/styles/index.ts
index fce22e948..1f0d8dc41 100755
--- a/src/containers/editor/JobEditor/styles/index.ts
+++ b/src/containers/editor/JobEditor/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Input from '@/components/Input'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/editor/PostEditor/styles/index.ts b/src/containers/editor/PostEditor/styles/index.ts
index 877acd5c0..7c94203ea 100755
--- a/src/containers/editor/PostEditor/styles/index.ts
+++ b/src/containers/editor/PostEditor/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Input from '@/components/Input'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/editor/VideoEditor/styles/source_options.ts b/src/containers/editor/VideoEditor/styles/source_options.ts
index 87dc00ed8..f1b3e75a9 100755
--- a/src/containers/editor/VideoEditor/styles/source_options.ts
+++ b/src/containers/editor/VideoEditor/styles/source_options.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/editor/WorksEditor/styles/content/article_part/index.ts b/src/containers/editor/WorksEditor/styles/content/article_part/index.ts
index 0efd925fc..80506dea8 100644
--- a/src/containers/editor/WorksEditor/styles/content/article_part/index.ts
+++ b/src/containers/editor/WorksEditor/styles/content/article_part/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts
index c197c5864..e69df61e2 100644
--- a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts
+++ b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts b/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts
index 2c9d8ea1b..f0c001261 100644
--- a/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts
+++ b/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import FormItem from '@/components/FormItem'
 
diff --git a/src/containers/editor/WorksEditor/styles/content/common_questions.ts b/src/containers/editor/WorksEditor/styles/content/common_questions.ts
index 784596d50..5936bdcb3 100644
--- a/src/containers/editor/WorksEditor/styles/content/common_questions.ts
+++ b/src/containers/editor/WorksEditor/styles/content/common_questions.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/editor/WorksEditor/styles/content/index.ts b/src/containers/editor/WorksEditor/styles/content/index.ts
index e4909a662..57a6be28c 100644
--- a/src/containers/editor/WorksEditor/styles/content/index.ts
+++ b/src/containers/editor/WorksEditor/styles/content/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import { CONTENT_WIDTH } from '../metric'
 
diff --git a/src/containers/editor/WorksEditor/styles/content/launch_part.ts b/src/containers/editor/WorksEditor/styles/content/launch_part.ts
index c81045ec2..b8fc982fd 100644
--- a/src/containers/editor/WorksEditor/styles/content/launch_part.ts
+++ b/src/containers/editor/WorksEditor/styles/content/launch_part.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/editor/WorksEditor/styles/content/name_part.ts b/src/containers/editor/WorksEditor/styles/content/name_part.ts
index 54a140dec..254a0991d 100644
--- a/src/containers/editor/WorksEditor/styles/content/name_part.ts
+++ b/src/containers/editor/WorksEditor/styles/content/name_part.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 import { BaseInput } from './index'
 
diff --git a/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts b/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts
index c81045ec2..b8fc982fd 100644
--- a/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts
+++ b/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/editor/WorksEditor/styles/index.ts b/src/containers/editor/WorksEditor/styles/index.ts
index 724afea5b..ebcaf3914 100755
--- a/src/containers/editor/WorksEditor/styles/index.ts
+++ b/src/containers/editor/WorksEditor/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/editor/WorksEditor/styles/preview.ts b/src/containers/editor/WorksEditor/styles/preview.ts
index b3d905170..d6b7854a8 100644
--- a/src/containers/editor/WorksEditor/styles/preview.ts
+++ b/src/containers/editor/WorksEditor/styles/preview.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 import { CONTENT_WIDTH, CONTENT_NARROW_WIDTH } from './metric'
 
diff --git a/src/containers/editor/WorksEditor/styles/steps.ts b/src/containers/editor/WorksEditor/styles/steps.ts
index 6a6373fac..2b0156a0a 100644
--- a/src/containers/editor/WorksEditor/styles/steps.ts
+++ b/src/containers/editor/WorksEditor/styles/steps.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 126591d3f..4a77e938d 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -6,11 +6,11 @@
 
 import React, { useEffect } from 'react'
 
+import type { Nullable, TSEO } from '@/spec'
 import { ANCHOR } from '@/constant'
 import AnalysisService from '@/services/Analysis'
 import { useNetwork, useShortcut, usePlatform, useDevice } from '@/hooks'
 import { pluggedIn } from '@/utils'
-import { Nullable, TSEO } from '@/spec'
 
 import ThemePalette from '@/containers/layout/ThemePalette'
 import Header from '@/containers/unit/Header'
@@ -19,7 +19,7 @@ import ModeLine from '@/containers/unit/ModeLine'
 import Drawer from '@/containers/tool/Drawer'
 import CustomScroller from '@/components/CustomScroller'
 
-import { TStore } from './store'
+import type { TStore } from './store'
 import SEO from './SEO'
 import { Doraemon, ErrorBox, Footer, ErrorPage } from './dynamic'
 
diff --git a/src/containers/layout/GlobalLayout/store.ts b/src/containers/layout/GlobalLayout/store.ts
index ad50c05b8..a6eb15ad8 100755
--- a/src/containers/layout/GlobalLayout/store.ts
+++ b/src/containers/layout/GlobalLayout/store.ts
@@ -5,8 +5,8 @@
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 
+import type { TRootStore, TAccount } from '@/spec'
 import { markStates, buildLog } from '@/utils'
-import { IRootStore, TAccount } from '@/spec'
 
 /* eslint-disable-next-line */
 const log = buildLog('S:GlobalLayoutStore')
@@ -28,17 +28,17 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
 })
   .views((self) => ({
     get accountInfo(): TAccount {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       return root.accountInfo
     },
     get sidebarPin(): boolean {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       return root.sidebar.pin
     },
   }))
   .actions((self) => ({
     openDoraemon(): void {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       root.openDoraemon()
     },
     mark(sobj) {
diff --git a/src/containers/thread/PostsThread/styles/index.ts b/src/containers/thread/PostsThread/styles/index.ts
index 84615bda4..72f342172 100755
--- a/src/containers/thread/PostsThread/styles/index.ts
+++ b/src/containers/thread/PostsThread/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
diff --git a/src/containers/thread/RoadmapThread/styles/index.ts b/src/containers/thread/RoadmapThread/styles/index.ts
index 791872aa3..3d1a2ebdf 100755
--- a/src/containers/thread/RoadmapThread/styles/index.ts
+++ b/src/containers/thread/RoadmapThread/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/thread/UsersThread/styles/num_dashboard.ts b/src/containers/thread/UsersThread/styles/num_dashboard.ts
index 40be003d4..f5c9ba9e8 100755
--- a/src/containers/thread/UsersThread/styles/num_dashboard.ts
+++ b/src/containers/thread/UsersThread/styles/num_dashboard.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 type TChartBar = TActive & { width: string }
diff --git a/src/containers/tool/ArticleSticker/styles/article_sticker.ts b/src/containers/tool/ArticleSticker/styles/article_sticker.ts
index 14fa211ce..3c89f0831 100644
--- a/src/containers/tool/ArticleSticker/styles/article_sticker.ts
+++ b/src/containers/tool/ArticleSticker/styles/article_sticker.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive, TSpace } from '@/spec'
+import type { TActive, TSpace } from '@/spec'
 import Img from '@/Img'
 import { theme, css, animate } from '@/utils'
 
diff --git a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts
index 483d7bd0d..df487ce34 100644
--- a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts
+++ b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts
index d6e1906ed..3ed02775f 100755
--- a/src/containers/tool/ArticleSticker/styles/index.ts
+++ b/src/containers/tool/ArticleSticker/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { animate, theme, css, WIDTH } from '@/utils'
 
diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts
index 06b07e291..f89297d45 100644
--- a/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts
+++ b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
index 09d803a59..bee6238f4 100644
--- a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
+++ b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
index fad9418fc..4664058f2 100644
--- a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
+++ b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/tool/C11NSettingPanel/styles/index.ts b/src/containers/tool/C11NSettingPanel/styles/index.ts
index c40dfaeb2..9bab7dd70 100755
--- a/src/containers/tool/C11NSettingPanel/styles/index.ts
+++ b/src/containers/tool/C11NSettingPanel/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts b/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts
index 1ae9dcddb..11a16586a 100644
--- a/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts
+++ b/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/tool/Cashier/styles/payment_sidebar.ts b/src/containers/tool/Cashier/styles/payment_sidebar.ts
index ff789e542..c5e7ecd71 100755
--- a/src/containers/tool/Cashier/styles/payment_sidebar.ts
+++ b/src/containers/tool/Cashier/styles/payment_sidebar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/tool/CommunityJoinBadge/styles/index.ts b/src/containers/tool/CommunityJoinBadge/styles/index.ts
index ca56908a9..60437b491 100755
--- a/src/containers/tool/CommunityJoinBadge/styles/index.ts
+++ b/src/containers/tool/CommunityJoinBadge/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import Img from '@/Img'
 import { theme } from '@/utils'
 
diff --git a/src/containers/tool/Doraemon/styles/index.ts b/src/containers/tool/Doraemon/styles/index.ts
index 9a311bb8a..8cdb62081 100755
--- a/src/containers/tool/Doraemon/styles/index.ts
+++ b/src/containers/tool/Doraemon/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const PageOverlay = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/tool/Doraemon/styles/input_editor.ts b/src/containers/tool/Doraemon/styles/input_editor.ts
index 1484b3f4d..823161d45 100755
--- a/src/containers/tool/Doraemon/styles/input_editor.ts
+++ b/src/containers/tool/Doraemon/styles/input_editor.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme } from '@/utils'
 
 import { BaseBar } from './index'
diff --git a/src/containers/tool/Doraemon/styles/results_list.ts b/src/containers/tool/Doraemon/styles/results_list.ts
index 2066e6c41..d9db2fe75 100755
--- a/src/containers/tool/Doraemon/styles/results_list.ts
+++ b/src/containers/tool/Doraemon/styles/results_list.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, animate, css } from '@/utils'
 
diff --git a/src/containers/tool/Doraemon/styles/thread_select_bar.ts b/src/containers/tool/Doraemon/styles/thread_select_bar.ts
index 29a83c8a9..660c0f5c4 100755
--- a/src/containers/tool/Doraemon/styles/thread_select_bar.ts
+++ b/src/containers/tool/Doraemon/styles/thread_select_bar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 // import Img from '@/Img'
 import { theme, css } from '@/utils'
 import { BaseBar } from './index'
diff --git a/src/containers/tool/Drawer/spec.ts b/src/containers/tool/Drawer/spec.ts
new file mode 100644
index 000000000..3f1f8076c
--- /dev/null
+++ b/src/containers/tool/Drawer/spec.ts
@@ -0,0 +1,21 @@
+import type { TTestable, TActive } from '@/spec'
+
+export type TSwipeOption = {
+  direction: 'bottom' | 'top'
+  position: 'H' | 'M' | 'L'
+}
+
+export type TSwipe = {
+  swipeUpY: number
+  swipeDownY: number
+  // options: Record<string, unknown>
+  options: TSwipeOption
+}
+
+export type TDrawer = TTestable &
+  TActive &
+  TSwipe & {
+    mobile: boolean
+    rightOffset: string
+    type: string
+  }
diff --git a/src/containers/tool/Drawer/store.js b/src/containers/tool/Drawer/store.ts
similarity index 83%
rename from src/containers/tool/Drawer/store.js
rename to src/containers/tool/Drawer/store.ts
index 32e0fae80..5c015d302 100755
--- a/src/containers/tool/Drawer/store.js
+++ b/src/containers/tool/Drawer/store.ts
@@ -3,10 +3,12 @@
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, getParent, Instance } from 'mobx-state-tree'
 import { merge, contains, values } from 'ramda'
 
+import type { TRootStore, TCommunity } from '@/spec'
 import { TYPE, THREAD } from '@/constant'
+
 import {
   markStates,
   stripMobx,
@@ -19,8 +21,11 @@ import {
 } from '@/utils'
 import { User } from '@/model'
 
+import { TSwipeOption } from './spec'
 import { SWIPE_THRESHOLD } from './styles/metrics'
 
+const defaultOptions: TSwipeOption = { direction: 'bottom', position: 'M' }
+
 const PREVIEWABLE_THREADS = [THREAD.POST, THREAD.JOB, THREAD.VIDEO, THREAD.REPO]
 const THREAD_CONTENT_CURD_TYPES = [
   // post
@@ -76,7 +81,6 @@ const Attachment = T.model('Attachment', {
   originalAuthorLink: T.maybeNull(T.string),
 })
 
-const defaultOptions = { direction: 'bottom', position: 'M' }
 const DrawerStore = T.model('DrawerStore', {
   visible: T.optional(T.boolean, false),
   // only works for mobile view
@@ -117,8 +121,9 @@ const DrawerStore = T.model('DrawerStore', {
     get root() {
       return getParent(self)
     },
-    get isMobile() {
-      return self.root.isMobile
+    get isMobile(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.isMobile
     },
     get optionsData() {
       return stripMobx(self.options)
@@ -134,11 +139,9 @@ const DrawerStore = T.model('DrawerStore', {
 
       return `${windowWidth <= MAX_WIDTH ? 0 : (windowWidth - MAX_WIDTH) / 2}px`
     },
-    get curCommunity() {
-      return stripMobx(self.root.viewing.community)
-    },
-    get curTheme() {
-      return self.root.theme.curTheme
+    get curCommunity(): TCommunity {
+      const root = getParent(self) as TRootStore
+      return stripMobx(root.viewing.community)
     },
     get attachmentData() {
       return stripMobx(self.attachment)
@@ -154,14 +157,14 @@ const DrawerStore = T.model('DrawerStore', {
       return self.visible && Global.innerWidth <= css.mediaBreakPoints.desktopL
     },
   }))
-  .actions((self) => ({
-    open({ type, data, thread, options = {} }) {
+  .actions((self: TStore) => ({
+    open({ type, data, thread, options = {} }: any): void {
       if (type === TYPE.DRAWER.MODELINE_MENU) {
         self.mmType = data
       } else if (data) {
         self.attachment = merge(data, { type })
       }
-      if ((thread, contains(thread, PREVIEWABLE_THREADS))) {
+      if (contains(thread, PREVIEWABLE_THREADS)) {
         self.setViewing({ [thread]: data, viewingThread: thread })
       }
 
@@ -174,10 +177,11 @@ const DrawerStore = T.model('DrawerStore', {
         self.canBeClose = false
       }
     },
-    setViewing(sobj) {
-      self.root.setViewing(sobj)
+    setViewing(sobj: Record<string, unknown>): void {
+      const root = getParent(self) as TRootStore
+      root.setViewing(sobj)
     },
-    close() {
+    close(): void {
       self.visible = false
       self.canBeClose = false
       unlockPage()
@@ -185,13 +189,16 @@ const DrawerStore = T.model('DrawerStore', {
         toggleGlobalBlur(false)
       }
     },
-    resetSwipeAviliable() {
+    resetSwipeAviliable(): void {
       self.swipeDownAviliable = true
       self.swipeUpAviliable = false
     },
-    mark(sobj) {
+    mark(sobj: Record<string, unknown>): void {
       markStates(sobj, self)
     },
   }))
 
+// @ts-ignore
+export type TStore = Instance<typeof DrawerStore>
+
 export default DrawerStore
diff --git a/src/containers/tool/Drawer/styles/add_on.ts b/src/containers/tool/Drawer/styles/add_on.ts
index 01720152f..c975364e3 100755
--- a/src/containers/tool/Drawer/styles/add_on.ts
+++ b/src/containers/tool/Drawer/styles/add_on.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { TYPE } from '@/constant'
 import { theme, animate, css } from '@/utils'
 
diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts
index ec2bdeb47..725f8c208 100755
--- a/src/containers/tool/Drawer/styles/index.ts
+++ b/src/containers/tool/Drawer/styles/index.ts
@@ -1,9 +1,10 @@
 import styled from 'styled-components'
 import { contains } from 'ramda'
 
-import { TTestable, TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
+import type { TDrawer, TSwipe } from '../spec'
 import {
   WIDE_CASE,
   WIDE_WIDTH,
@@ -14,20 +15,6 @@ import {
   getDim,
 } from './metrics'
 
-type TSwipe = {
-  swipeUpY: number
-  swipeDownY: number
-  options: Record<string, unknown>
-}
-
-type TDrawer = TTestable &
-  TActive &
-  TSwipe & {
-    mobile: boolean
-    rightOffset: string
-    type: string
-  }
-
 export const DrawerOverlay = styled.div<TActive>`
   bottom: 0;
   left: 0;
diff --git a/src/containers/tool/FavoritesCats/styles/editor.ts b/src/containers/tool/FavoritesCats/styles/editor.ts
index 031a361b6..9d4d5c4b1 100755
--- a/src/containers/tool/FavoritesCats/styles/editor.ts
+++ b/src/containers/tool/FavoritesCats/styles/editor.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div<TActive>`
diff --git a/src/containers/tool/FavoritesCats/styles/setter.ts b/src/containers/tool/FavoritesCats/styles/setter.ts
index ed9d94b8f..8735168c4 100755
--- a/src/containers/tool/FavoritesCats/styles/setter.ts
+++ b/src/containers/tool/FavoritesCats/styles/setter.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div<TActive>`
diff --git a/src/containers/tool/JoinModal/styles/index.ts b/src/containers/tool/JoinModal/styles/index.ts
index bafd1b783..15c44ddf6 100755
--- a/src/containers/tool/JoinModal/styles/index.ts
+++ b/src/containers/tool/JoinModal/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import Img from '@/Img'
 // import { css, theme } from '@/utils'
 
diff --git a/src/containers/tool/MailBox/styles/index.ts b/src/containers/tool/MailBox/styles/index.ts
index 45df1c289..eb60dc39b 100755
--- a/src/containers/tool/MailBox/styles/index.ts
+++ b/src/containers/tool/MailBox/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { css, theme } from '@/utils'
 import HeaderMailSVG from '@/SvgIcons/HeaderMailSVG'
 
diff --git a/src/containers/unit/ArticleFooter/styles/actions/index.ts b/src/containers/unit/ArticleFooter/styles/actions/index.ts
index 245bfdc8f..93a00ddc4 100644
--- a/src/containers/unit/ArticleFooter/styles/actions/index.ts
+++ b/src/containers/unit/ArticleFooter/styles/actions/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ArticleFooter/styles/author_info/index.ts b/src/containers/unit/ArticleFooter/styles/author_info/index.ts
index 363b9f7b9..c27c4d54b 100644
--- a/src/containers/unit/ArticleFooter/styles/author_info/index.ts
+++ b/src/containers/unit/ArticleFooter/styles/author_info/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/unit/ArticleFooter/styles/index.ts b/src/containers/unit/ArticleFooter/styles/index.ts
index 203988e23..008b59776 100755
--- a/src/containers/unit/ArticleFooter/styles/index.ts
+++ b/src/containers/unit/ArticleFooter/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/unit/ArticleViewerHeader/styles/reaction.ts b/src/containers/unit/ArticleViewerHeader/styles/reaction.ts
index 5e90b59d4..c1bf8ef1d 100755
--- a/src/containers/unit/ArticleViewerHeader/styles/reaction.ts
+++ b/src/containers/unit/ArticleViewerHeader/styles/reaction.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css, animate } from '@/utils'
 
diff --git a/src/containers/unit/Comments/styles/comment/delete_mask.ts b/src/containers/unit/Comments/styles/comment/delete_mask.ts
index 7ea2a1c6b..2be8f76cd 100755
--- a/src/containers/unit/Comments/styles/comment/delete_mask.ts
+++ b/src/containers/unit/Comments/styles/comment/delete_mask.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, animate, css } from '@/utils'
 
 export const DeleteHintText = styled.div`
diff --git a/src/containers/unit/Comments/styles/comment_editor.ts b/src/containers/unit/Comments/styles/comment_editor.ts
index 15c7b1b5b..b5395bef4 100755
--- a/src/containers/unit/Comments/styles/comment_editor.ts
+++ b/src/containers/unit/Comments/styles/comment_editor.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 // import Img from '@/Img'
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 
 export const Container = styled.div<TActive>`
diff --git a/src/containers/unit/Comments/styles/comments_filter.ts b/src/containers/unit/Comments/styles/comments_filter.ts
index 137ab2d4a..51ecc3e6d 100755
--- a/src/containers/unit/Comments/styles/comments_filter.ts
+++ b/src/containers/unit/Comments/styles/comments_filter.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/unit/Footer/styles/index.ts b/src/containers/unit/Footer/styles/index.ts
index 3a64d725f..9d2738d89 100755
--- a/src/containers/unit/Footer/styles/index.ts
+++ b/src/containers/unit/Footer/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { C11N } from '@/constant'
 import { css } from '@/utils'
 
diff --git a/src/containers/unit/Header/store.js b/src/containers/unit/Header/store.js
deleted file mode 100755
index 33149c65b..000000000
--- a/src/containers/unit/Header/store.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * HeaderStore store
- *
- */
-
-import { types as T, getParent } from 'mobx-state-tree'
-import { merge, contains, values } from 'ramda'
-
-import { METRIC } from '@/constant'
-import { markStates, buildLog, stripMobx } from '@/utils'
-
-/* eslint-disable-next-line */
-const log = buildLog('S:HeaderStore')
-
-const HeaderStore = T.model('HeaderStore', {
-  metric: T.optional(T.enumeration(values(METRIC)), METRIC.COMMUNITY),
-})
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get isOnline() {
-      return self.root.isOnline
-    },
-    get curCommunity() {
-      return stripMobx(self.root.viewing.community)
-    },
-    get accountInfo() {
-      return self.root.account.accountInfo
-    },
-    get isLogin() {
-      return self.root.account.isLogin
-    },
-    get hasNoBottomBorder() {
-      return contains(self.metric, [
-        METRIC.DISCOVERY,
-        METRIC.SPONSOR,
-        METRIC.FRIENDS,
-        METRIC.SUBSCRIBE,
-        METRIC.ARTICLE,
-        METRIC.MEMBERSHIP,
-        METRIC.USER,
-        METRIC.COMMUNITY_EDITOR,
-        METRIC.HELP_CENTER,
-      ])
-    },
-    get leftOffset() {
-      const curSidebarPin = self.root.sidebar.pin
-      if (
-        (!curSidebarPin && !self.preSidebarPin && !self.fixed) ||
-        (!curSidebarPin && !self.preSidebarPin) ||
-        (curSidebarPin && !self.preSidebarPin && !self.fixed) ||
-        (curSidebarPin && self.preSidebarPin && self.fixed) ||
-        (curSidebarPin && self.preSidebarPin && !self.fixed) ||
-        (!curSidebarPin && self.preSidebarPin && !self.fixed)
-      ) {
-        return 0
-      }
-
-      // 特殊情况： 当 sidebar 打开时下滑页面， 需要一个 preSidebarPin 的中间状态
-      if (!curSidebarPin && self.preSidebarPin && self.fixed) {
-        return '-180px'
-      }
-
-      // isPin && !self.preSidebarPin && self.fixed
-      return '180px'
-    },
-  }))
-  .actions((self) => ({
-    logout() {
-      self.root.account.logout()
-    },
-    updateSession(state) {
-      self.root.account.updateSession(state)
-    },
-    toastInfo(options) {
-      self.root.toast('info', merge({ position: 'topCenter' }, options))
-    },
-    markRoute(query) {
-      self.root.markRoute(query)
-    },
-    handleLogin() {
-      self.root.doraemon.handleLogin()
-    },
-    openDoraemon() {
-      self.root.openDoraemon()
-    },
-    setViewing(sobj) {
-      self.root.setViewing(sobj)
-    },
-    toast(type, options) {
-      self.root.toast(type, options)
-    },
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-  }))
-
-export default HeaderStore
diff --git a/src/containers/unit/Header/store.ts b/src/containers/unit/Header/store.ts
new file mode 100755
index 000000000..c40e6735d
--- /dev/null
+++ b/src/containers/unit/Header/store.ts
@@ -0,0 +1,114 @@
+/*
+ * HeaderStore store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+import { merge, contains, values } from 'ramda'
+
+import type { TRootStore, TCommunity, TAccount } from '@/spec'
+import { METRIC } from '@/constant'
+import { markStates, buildLog, stripMobx } from '@/utils'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:HeaderStore')
+
+const HeaderStore = T.model('HeaderStore', {
+  metric: T.optional(T.enumeration(values(METRIC)), METRIC.COMMUNITY),
+})
+  .views((self) => ({
+    get isOnline(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.isOnline
+    },
+    get curCommunity(): TCommunity {
+      const root = getParent(self) as TRootStore
+      return stripMobx(root.viewing.community)
+    },
+    get accountInfo(): TAccount {
+      const root = getParent(self) as TRootStore
+      return root.account.accountInfo
+    },
+    get isLogin(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.account.isLogin
+    },
+    get hasNoBottomBorder(): boolean {
+      return contains(self.metric, [
+        METRIC.DISCOVERY,
+        METRIC.SPONSOR,
+        METRIC.FRIENDS,
+        METRIC.SUBSCRIBE,
+        METRIC.ARTICLE,
+        METRIC.MEMBERSHIP,
+        METRIC.USER,
+        METRIC.COMMUNITY_EDITOR,
+        METRIC.HELP_CENTER,
+      ])
+    },
+    get leftOffset(): string {
+      const root = getParent(self) as TRootStore
+      const curSidebarPin = root.sidebar.pin
+
+      // if (
+      //   (!curSidebarPin && !self.preSidebarPin && !self.fixed) ||
+      //   (!curSidebarPin && !self.preSidebarPin) ||
+      //   (curSidebarPin && !self.preSidebarPin && !self.fixed) ||
+      //   (curSidebarPin && self.preSidebarPin && self.fixed) ||
+      //   (curSidebarPin && self.preSidebarPin && !self.fixed) ||
+      //   (!curSidebarPin && self.preSidebarPin && !self.fixed)
+      // ) {
+      //   return 0
+      // }
+
+      // 特殊情况： 当 sidebar 打开时下滑页面， 需要一个 preSidebarPin 的中间状态
+      // if (!curSidebarPin && self.preSidebarPin && self.fixed) {
+      if (!curSidebarPin) {
+        return '-180px'
+      }
+
+      // isPin && !self.preSidebarPin && self.fixed
+      return '180px'
+    },
+  }))
+  .actions((self) => ({
+    logout(): void {
+      const root = getParent(self) as TRootStore
+      root.account.logout()
+    },
+    updateSession(state): void {
+      const root = getParent(self) as TRootStore
+      root.account.updateSession(state)
+    },
+    toastInfo(options): void {
+      const root = getParent(self) as TRootStore
+      root.toast('info', merge({ position: 'topCenter' }, options))
+    },
+    markRoute(query): void {
+      const root = getParent(self) as TRootStore
+      root.markRoute(query)
+    },
+    handleLogin(): void {
+      const root = getParent(self) as TRootStore
+      root.doraemon.handleLogin()
+    },
+    openDoraemon(): void {
+      const root = getParent(self) as TRootStore
+      root.openDoraemon()
+    },
+    setViewing(sobj): void {
+      const root = getParent(self) as TRootStore
+      root.setViewing(sobj)
+    },
+    toast(type, options): void {
+      const root = getParent(self) as TRootStore
+      root.toast(type, options)
+    },
+    mark(sobj) {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof HeaderStore>
+
+export default HeaderStore
diff --git a/src/containers/unit/Header/styles/desktop_view/community_view.ts b/src/containers/unit/Header/styles/desktop_view/community_view.ts
index 2da9be437..0b9e8daf9 100644
--- a/src/containers/unit/Header/styles/desktop_view/community_view.ts
+++ b/src/containers/unit/Header/styles/desktop_view/community_view.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css } from '@/utils'
 import HeaderSearchSVG from '@/SvgIcons/HeaderSearchSVG'
 
diff --git a/src/containers/unit/Header/styles/index.ts b/src/containers/unit/Header/styles/index.ts
index 5468bc882..432015ee8 100644
--- a/src/containers/unit/Header/styles/index.ts
+++ b/src/containers/unit/Header/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
diff --git a/src/containers/unit/Header/styles/user_account.ts b/src/containers/unit/Header/styles/user_account.ts
index 1b8d42cdb..a217c5a63 100755
--- a/src/containers/unit/Header/styles/user_account.ts
+++ b/src/containers/unit/Header/styles/user_account.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/unit/Labeler/styles/options.ts b/src/containers/unit/Labeler/styles/options.ts
index 7ab180a56..fef898a15 100755
--- a/src/containers/unit/Labeler/styles/options.ts
+++ b/src/containers/unit/Labeler/styles/options.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/unit/ModeLine/index.tsx b/src/containers/unit/ModeLine/index.tsx
index 85cccbc82..904f9e2b7 100755
--- a/src/containers/unit/ModeLine/index.tsx
+++ b/src/containers/unit/ModeLine/index.tsx
@@ -13,7 +13,7 @@ import { METRIC } from '@/constant'
 import { useDevice } from '@/hooks'
 import { pluggedIn, buildLog } from '@/utils'
 
-import { TStore } from './store'
+import type { TStore } from './store'
 
 import TopBar from './TopBar'
 
diff --git a/src/containers/unit/ModeLine/store.ts b/src/containers/unit/ModeLine/store.ts
index 0df0e9a6f..a3c1ebf9b 100755
--- a/src/containers/unit/ModeLine/store.ts
+++ b/src/containers/unit/ModeLine/store.ts
@@ -6,7 +6,7 @@
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 import { values } from 'ramda'
 
-import { IRootStore, TViewing, TArticle } from '@/spec'
+import type { TRootStore, TViewing, TArticle } from '@/spec'
 import { TYPE, METRIC } from '@/constant'
 import { markStates, buildLog, stripMobx } from '@/utils'
 
@@ -20,11 +20,11 @@ const ModeLine = T.model('ModeLine', {
 })
   .views((self: any) => ({
     get isMobile(): boolean {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       return root.isMobile
     },
     get viewing(): TViewing {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       return stripMobx(root.viewing)
     },
     get isTopBarVisiable(): boolean {
@@ -34,7 +34,7 @@ const ModeLine = T.model('ModeLine', {
         metric,
         isArticleDigestInViewport,
       } = self
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       const { bodyScrollDirection } = root.globalLayout
 
       if (metric === METRIC.COMMUNITY && bodyScrollDirection === 'down') {
@@ -52,11 +52,11 @@ const ModeLine = T.model('ModeLine', {
       return true
     },
     get viewingArticle(): TArticle {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       return stripMobx(root.viewingArticle)
     },
     get leftOffset(): number | string {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       const curSidebarPin = root.sidebar.pin
       if (
         (!curSidebarPin && !self.preSidebarPin && !self.fixed) ||
@@ -81,7 +81,7 @@ const ModeLine = T.model('ModeLine', {
       return self.activeMenu !== ''
     },
     get isArticleDigestInViewport(): boolean {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       return root.articleDigest.inViewport
     },
     get isCommunityBlockExpand(): boolean {
@@ -97,11 +97,11 @@ const ModeLine = T.model('ModeLine', {
       self.topBarVisiable = bool
     },
     setViewing(sobj): void {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       root.setViewing(sobj)
     },
     markRoute(query): void {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
       root.markRoute(query, {})
     },
     mark(sobj) {
diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts b/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts
index 1a5b20b3c..0b38f3b8a 100644
--- a/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts
+++ b/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/index.ts b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts
index 7eddf2871..f0769a0fe 100644
--- a/src/containers/unit/ModeLine/styles/bottom_bar/index.ts
+++ b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts
index d33d42473..2158bbd78 100644
--- a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts
+++ b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import { css, theme, WIDTH } from '@/utils'
 // import { getMaxWidth } from '../metrics/top_bar'
 
diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts
index 42ac83bb8..9ec30b98b 100644
--- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts
+++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts
index 217912fee..732f94494 100644
--- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts
+++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div<TActive>`
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts
index a7d2cca76..19a09b1e6 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts
index a6f49b736..7653b588f 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 // import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts
index b68c316a5..c3d1db516 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 // import Img from '@/Img'
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts
index eb7dd6ff7..8e9137684 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts
index 4554cdf2d..ac98006b5 100644
--- a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts
+++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts b/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts
index 8c80b9613..c8192981f 100644
--- a/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts
+++ b/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts b/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts
index 7c83252f4..ddec6011a 100644
--- a/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts
+++ b/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLineMenu/styles/index.ts b/src/containers/unit/ModeLineMenu/styles/index.ts
index 5a636c250..291e431a6 100755
--- a/src/containers/unit/ModeLineMenu/styles/index.ts
+++ b/src/containers/unit/ModeLineMenu/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/unit/ModeLineMenu/styles/more_menu.ts b/src/containers/unit/ModeLineMenu/styles/more_menu.ts
index 72d4f6b6e..96ac05bba 100644
--- a/src/containers/unit/ModeLineMenu/styles/more_menu.ts
+++ b/src/containers/unit/ModeLineMenu/styles/more_menu.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css } from '@/utils'
 import { L_MENU_HEIGHT } from './metrics/index'
 
diff --git a/src/containers/unit/ModeLineMenu/styles/navi_button.ts b/src/containers/unit/ModeLineMenu/styles/navi_button.ts
index 2eb4ff5ab..d6b0c4bb5 100644
--- a/src/containers/unit/ModeLineMenu/styles/navi_button.ts
+++ b/src/containers/unit/ModeLineMenu/styles/navi_button.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/ModeLineMenu/styles/search_menu.ts b/src/containers/unit/ModeLineMenu/styles/search_menu.ts
index d51e5a4a0..b34dc5aee 100644
--- a/src/containers/unit/ModeLineMenu/styles/search_menu.ts
+++ b/src/containers/unit/ModeLineMenu/styles/search_menu.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
diff --git a/src/containers/unit/Sidebar/styles/footer.ts b/src/containers/unit/Sidebar/styles/footer.ts
index 84075f992..4c8b999dd 100755
--- a/src/containers/unit/Sidebar/styles/footer.ts
+++ b/src/containers/unit/Sidebar/styles/footer.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/unit/Sidebar/styles/index.ts b/src/containers/unit/Sidebar/styles/index.ts
index dec1d9bda..a49cc9a4d 100755
--- a/src/containers/unit/Sidebar/styles/index.ts
+++ b/src/containers/unit/Sidebar/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme, css } from '@/utils'
 
 import { getMainWidth, getShadow, SIDEBAR_WIDTH } from './metric'
diff --git a/src/containers/unit/Sidebar/styles/loading_blocks.ts b/src/containers/unit/Sidebar/styles/loading_blocks.ts
index 2ba40962f..f46781066 100644
--- a/src/containers/unit/Sidebar/styles/loading_blocks.ts
+++ b/src/containers/unit/Sidebar/styles/loading_blocks.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { animate, css, theme } from '@/utils'
 import { SIDEBAR_WIDTH } from './metric'
 
diff --git a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
index 9558cd3d8..d9734e036 100755
--- a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
+++ b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 import CommunityFaceLogo from '@/components/CommunityFaceLogo'
diff --git a/src/containers/unit/TagsBar/styles/card_view.ts b/src/containers/unit/TagsBar/styles/card_view.ts
index 65b0cbc52..0832a3548 100644
--- a/src/containers/unit/TagsBar/styles/card_view.ts
+++ b/src/containers/unit/TagsBar/styles/card_view.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
index aa1831c07..1ca7fb0fe 100644
--- a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
+++ b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
index 0828a08da..df0d088d7 100644
--- a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
+++ b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TActive } from '@/spec'
+import type { TActive } from '@/spec'
 import Img from '@/Img'
 import HashTagSVG from '@/SvgIcons/HashTagSVG'
 import { theme, css } from '@/utils'
diff --git a/src/containers/user/UserProfile/styles/index.ts b/src/containers/user/UserProfile/styles/index.ts
index 93b9c0cab..0568e0027 100755
--- a/src/containers/user/UserProfile/styles/index.ts
+++ b/src/containers/user/UserProfile/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/containers/user/UserProfile/styles/subscribed_communities.ts b/src/containers/user/UserProfile/styles/subscribed_communities.ts
index edca95c68..574a8c8ac 100644
--- a/src/containers/user/UserProfile/styles/subscribed_communities.ts
+++ b/src/containers/user/UserProfile/styles/subscribed_communities.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { TTestable } from '@/spec'
+import type { TTestable } from '@/spec'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/spec/comp.ts b/src/spec/comp.ts
new file mode 100644
index 000000000..361a280b0
--- /dev/null
+++ b/src/spec/comp.ts
@@ -0,0 +1,10 @@
+import { TSIZE } from './size'
+
+// button
+export type TButton = {
+  size: TSIZE
+  active: boolean
+  ghost?: boolean
+  disabled?: boolean
+  noBorder?: boolean
+}
diff --git a/src/spec/index.ts b/src/spec/index.ts
index 1bc06c312..1cc21891f 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -1,4 +1,7 @@
-import { IRootStore as RootStoreInterface } from '@/stores/RootStore'
+import { TRootStore as RootStoreType } from '@/stores/RootStore'
+
+export type { TSIZE, TSIZE_TS, TSIZE_TSM, TSIZE_SML } from './size'
+export type { TButton } from './comp'
 
 export type TThemeName =
   | 'cyan'
@@ -10,6 +13,13 @@ export type TThemeName =
   | 'ironGreen'
   | 'monokai'
 
+export type TRoute = {
+  communityPath?: string
+  threadPath?: string
+  mainPath?: string
+  subPath?: string
+}
+
 export type TTestable = {
   testid: string
 }
@@ -27,7 +37,7 @@ export type TSpace = {
   right?: number
 }
 
-export type IRootStore = RootStoreInterface
+export type TRootStore = RootStoreType
 
 // c# like
 export type Nullable<T> = T | null
@@ -87,14 +97,3 @@ export type TSEO = {
   title: string
   description: string
 }
-
-export type TButtonSize = 'tiny' | 'small' | 'medium' | 'large'
-
-// button
-export type TButton = {
-  size: TButtonSize
-  active: boolean
-  ghost?: boolean
-  disabled?: boolean
-  noBorder?: boolean
-}
diff --git a/src/spec/size.ts b/src/spec/size.ts
new file mode 100644
index 000000000..d97060a7f
--- /dev/null
+++ b/src/spec/size.ts
@@ -0,0 +1,6 @@
+// all size
+export type TSIZE = 'TINY' | 'SMALL' | 'MEDIUM' | 'LARGE'
+
+export type TSIZE_TS = 'TINY' | 'SMALL'
+export type TSIZE_TSM = 'TINY' | 'SMALL' | 'MEDIUM'
+export type TSIZE_SML = 'SMALL' | 'MEDIUM' | 'LARGE'
diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts
index 642f573b5..f1f3b55ff 100755
--- a/src/stores/RootStore/index.ts
+++ b/src/stores/RootStore/index.ts
@@ -265,10 +265,10 @@ const rootStore = T.model({
     },
   }))
   .actions((self) => ({
-    markRoute(query, opt): void {
+    markRoute(query, opt = {}): void {
       self.route.markRoute(query, opt)
     },
-    showTopModeline(bool): void {
+    showTopModeline(bool: boolean): void {
       self.modeLine.showTopBar(bool)
     },
     openDoraemon(): void {
@@ -339,9 +339,9 @@ const rootStore = T.model({
   }))
 
 /**
- *   NOTE: if use IRootStore in sub container, e.g:
+ *   NOTE: if use TRootStore in sub container, e.g:
  * get viewingArticle(): TArticle {
- *   const root = getParent(self) as IRootStore
+ *   const root = getParent(self) as TRootStore
  *   return stripMobx(root.viewingArticle)
  * },
  *
@@ -350,6 +350,6 @@ const rootStore = T.model({
  * completion fails
  *
  */
-export type IRootStore = Instance<typeof rootStore>
+export type TRootStore = Instance<typeof rootStore>
 
 export default rootStore
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 6673273c9..6dc12199f 100755
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -3,7 +3,7 @@
  * unless you're sure what you're doing
  */
 
-// IRootStore imported by container/xx/store, which is imported by RootStore index
+// TRootStore imported by container/xx/store, which is imported by RootStore index
 // cause the cycle import issue, but type info is removed after ts compile,
 // so cycle issue it's fine, ingore it
 /* eslint-disable import/no-cycle */
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 000000000..70d59d0d2
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,58 @@
+import { TRootStore as RootStoreInterface } from '@/stores/RootStore'
+
+export type TRootStore = RootStoreInterface
+
+// c# like
+export type Nullable<T> = T | null
+
+export type TCommunity = {
+  id: string
+  title: string
+  logo: string
+  raw: string
+}
+
+export type TAccount = {
+  id: string
+  login: string
+  nickname: string
+  avatar: string
+  customization?: {
+    theme: string
+    bannerLayout: string
+  }
+  // ...
+}
+export type TArticle = {
+  id: string
+  title: string
+  body: string
+  author: {
+    id: string
+    login: string
+    nickname: string
+    avatar: string
+  }
+  // ...
+}
+
+export type TViewing = {
+  community: TCommunity
+  post: TArticle
+}
+
+export type TTheme = ((obj: any) => unknown) | string
+
+// google analytis format
+export type GA_EVENT = {
+  action: string
+  category: string
+  label: string
+  value: string
+}
+
+export type TSEO = {
+  url: string
+  title: string
+  description: string
+}
diff --git a/utils/analytics.ts b/utils/analytics.ts
index ebc1e4f52..65f22f726 100755
--- a/utils/analytics.ts
+++ b/utils/analytics.ts
@@ -1,4 +1,4 @@
-import { GA_EVENT } from '@/spec'
+import type { GA_EVENT } from '@/spec'
 
 import { Global } from './helper'
 
diff --git a/utils/scripts/generators/container/hooks.tsx.hbs b/utils/scripts/generators/container/hooks.tsx.hbs
index 699928446..844ab9d61 100755
--- a/utils/scripts/generators/container/hooks.tsx.hbs
+++ b/utils/scripts/generators/container/hooks.tsx.hbs
@@ -13,7 +13,7 @@ import { pluggedIn, buildLog } from '@/utils'
 import { useTrans } from '@/hooks'
 {{/if}}
 
-import { IStore } from './store'
+import type { IStore } from './store'
 
 import { Wrapper } from './styles'
 import { useInit } from './logic'
diff --git a/utils/scripts/generators/container/logic.ts.hbs b/utils/scripts/generators/container/logic.ts.hbs
index 8fd1ab425..b38c4979f 100755
--- a/utils/scripts/generators/container/logic.ts.hbs
+++ b/utils/scripts/generators/container/logic.ts.hbs
@@ -4,7 +4,7 @@ import { useEffect } from 'react'
 import { buildLog } from '@/utils'
 
 // import S from './service'
-import { TStore } from './store'
+import type { TStore } from './store'
 
 let store: TStore | undefined
 
diff --git a/utils/scripts/generators/container/store.ts.hbs b/utils/scripts/generators/container/store.ts.hbs
index 2d5fc2c17..62912aada 100755
--- a/utils/scripts/generators/container/store.ts.hbs
+++ b/utils/scripts/generators/container/store.ts.hbs
@@ -1,12 +1,11 @@
 /*
- * {{ properCase name }} store
- *
- */
+* {{ properCase name }} store
+*/
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 // import {} from 'ramda'
 
-import { TCommunity, IRootStore } from '@/spec'
+import type { TCommunity, TRootStore } from '@/spec'
 import { markStates, buildLog, stripMobx } from '@/utils'
 
 /* eslint-disable-next-line */
@@ -15,7 +14,7 @@ const log = buildLog('S:{{ properCase name }}')
 const {{ properCase name }} = T.model('{{ properCase name }}', {})
   .views((self) => ({
     get curCommunity(): TCommunity {
-      const root = getParent(self) as IRootStore
+      const root = getParent(self) as TRootStore
 
       return stripMobx(root.viewing.community)
     },
@@ -28,4 +27,4 @@ const {{ properCase name }} = T.model('{{ properCase name }}', {})
 
 export type TStore = Instance<typeof {{ properCase name }}>
 
-export default {{ properCase name }}
+export default {{ properCase name }}
\ No newline at end of file
diff --git a/utils/scripts/generators/container/styles.ts.hbs b/utils/scripts/generators/container/styles.ts.hbs
index 0625b50d0..daaad5f8c 100755
--- a/utils/scripts/generators/container/styles.ts.hbs
+++ b/utils/scripts/generators/container/styles.ts.hbs
@@ -1,8 +1,11 @@
 import styled from 'styled-components'
 
+import type { TTestable } from '@/spec'
 // import { theme } from '@/utils'
 
-export const Wrapper = styled.div.attrs(props => ({
-'data-test-id': props.testid,
-}))``
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  //
+`
 export const Title = styled.div``
\ No newline at end of file
diff --git a/utils/themes/index.ts b/utils/themes/index.ts
index 50dae4f02..530dc7110 100755
--- a/utils/themes/index.ts
+++ b/utils/themes/index.ts
@@ -13,7 +13,7 @@
 
 import { map, path, split } from 'ramda'
 
-import { TTheme } from '@/spec'
+import type { TTheme } from '@/spec'
 import skinsData from './skins'
 
 export const themeSkins = { ...skinsData }