refactor(dashboard): sync banner layout to global

src/containers/digest/CommunityDigest/index.tsx

@@ -6,7 +6,7 @@
 import { FC, Fragment } from 'react'
 
 import type { TMetric } from '@/spec'
-import { METRIC, C11N } from '@/constant'
+import { METRIC, BANNER_LAYOUT } from '@/constant'
 import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
@@ -30,17 +30,11 @@ const CommunityDigestContainer: FC<TProps> = ({
 }) => {
   useInit(store)
 
-  const {
-    accountInfo: {
-      customization: { bannerLayout },
-    },
-    curThread,
-    curCommunity,
-  } = store
+  const { curThread, curCommunity, globalLayout } = store
 
   return (
     <Fragment>
-      {bannerLayout === C11N.CLASSIC ? (
+      {globalLayout.banner === BANNER_LAYOUT.TABBER ? (
         <ClassicLayout
           metric={metric}
           community={curCommunity}

src/containers/digest/CommunityDigest/store.ts

@@ -10,8 +10,8 @@ import type {
   TViewing,
   TRoute,
   TCommunity,
-  TAccount,
   TThread,
+  TGlobalLayout,
 } from '@/spec'
 import { markStates, toJS } from '@/utils/mobx'
 
@@ -37,10 +37,6 @@ const CommunityDigest = T.model('CommunityDigest', {
       const root = getParent(self) as TRootStore
       return root.footer.realtimeVisitors
     },
-    get accountInfo(): TAccount {
-      const root = getParent(self) as TRootStore
-      return root.accountInfo
-    },
     get curThread(): TThread {
       const root = getParent(self) as TRootStore
       return root.viewing.activeThread
@@ -50,6 +46,10 @@ const CommunityDigest = T.model('CommunityDigest', {
 
       return toJS(root.viewing.community)
     },
+    get globalLayout(): TGlobalLayout {
+      const root = getParent(self) as TRootStore
+      return root.dashboardThread.globalLayout
+    },
   }))
   .actions((self) => ({
     authWarning(options): void {

src/containers/layout/GlobalLayout/index.tsx

@@ -13,9 +13,8 @@ import { SIZE, BODY_SCROLLER } from '@/constant'
 import { bond } from '@/utils/mobx'
 
 import ThemePalette from '@/containers/layout/ThemePalette'
-import Header from '@/widgets/Header'
+// import Header from '@/widgets/Header'
 
-// import Header from '@/containers/unit/Header'
 // import Footer from '@/containers/unit/Footer'
 // import ModeLine from '@/containers/unit/ModeLine'
 
@@ -62,7 +61,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
   // load debug graph
   useInit(store, { isMobile })
 
-  const { accountInfo, sidebarPin, curCommunity, wallpaper, wallpapers } = store
+  const { sidebarPin, wallpaper, wallpapers } = store
 
   return (
     <ThemePalette>
@@ -87,11 +86,11 @@ const GlobalLayoutContainer: FC<TProps> = ({
               <ContentWrapper offsetLeft={sidebarPin}>
                 {/* @ts-ignore */}
 
-                <Header
+                {/* <Header
                   metric={metric}
                   accountInfo={accountInfo}
                   community={curCommunity}
-                />
+                /> */}
                 <BodyWrapper isMobile={isMobile}>
                   {childrenWithProps(children, { metric })}
                 </BodyWrapper>

src/widgets/Switcher/Tabs/DesktopView.tsx

@@ -5,7 +5,7 @@
  */
 
 import { FC, useEffect, useRef, useState, useCallback, memo } from 'react'
-import { isEmpty, findIndex } from 'ramda'
+import { isEmpty, findIndex, pluck, includes } from 'ramda'
 import { isMobile } from 'react-device-detect'
 
 import type { TSizeSM, TTabItem, TC11NLayout } from '@/spec'
@@ -70,6 +70,8 @@ const Tabs: FC<TProps> = ({
   bottomSpace = 0,
 }) => {
   const defaultActiveTabIndex = getDefaultActiveTabIndex(items, activeKey)
+  // @ts-ignore
+  const hasActiveItem: boolean = includes(activeKey, pluck('raw', items))
 
   const [active, setActive] = useState(defaultActiveTabIndex)
   const [slipWidth, setSlipWidth] = useState(0)
@@ -87,7 +89,7 @@ const Tabs: FC<TProps> = ({
       setSlipWidth(activeSlipWidth)
     }
     setActive(defaultActiveTabIndex)
-  }, [defaultActiveTabIndex])
+  }, [defaultActiveTabIndex, hasActiveItem])
 
   // set slipbar with for current nav item
   // 为下面的滑动条设置当前 TabItem 的宽度
@@ -133,15 +135,15 @@ const Tabs: FC<TProps> = ({
           />
         ))}
 
-        <SlipBar
-          translateX={translateX}
-          width={`${tabWidthList[active]}px`}
-          slipHeight={slipHeight}
-        >
-          <RealBar
-            width={`${size === SIZE.MEDIUM ? slipWidth : slipWidth - 6}px`}
-          />
-        </SlipBar>
+        {hasActiveItem && (
+          <SlipBar
+            translateX={translateX}
+            width={`${tabWidthList[active]}px`}
+            slipHeight={slipHeight}
+          >
+            <RealBar width={`${slipWidth}px`} />
+          </SlipBar>
+        )}
       </Nav>
     </Wrapper>
   )