refactor(dashboard): sync changelog layout to global

src/containers/thread/ChangelogThread/index.tsx

@@ -5,10 +5,11 @@
 
 import { FC } from 'react'
 
-// import { buildLog } from '@/utils/logger'
+import { CHANGELOG_LAYOUT } from '@/constant'
 import { bond } from '@/utils/mobx'
 
 import ChangelogItem from '@/widgets/ChangelogItem'
+
 import Filters from './Filters'
 
 import type { TStore } from './store'
@@ -27,23 +28,26 @@ const ChangelogThreadContainer: FC<TProps> = ({
   testid = 'changelog-thread',
 }) => {
   useInit(store)
+  const { globalLayout } = store
 
-  const layout = 'outline'
   return (
     <Wrapper testid={testid}>
       <MainWrapper>
-        <ChangelogItem />
-
-        {layout === 'outline' && <PreviousTitle>历史版本</PreviousTitle>}
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
-        <ChangelogItem layout={layout} />
+        <ChangelogItem layout={globalLayout.changelog} />
+
+        {globalLayout.changelog === CHANGELOG_LAYOUT.FOLD && (
+          <PreviousTitle>历史版本</PreviousTitle>
+        )}
+
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={globalLayout.changelog} />
       </MainWrapper>
       <Filters />
     </Wrapper>

src/containers/thread/ChangelogThread/store.ts

@@ -5,7 +5,7 @@
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 // import {} from 'ramda'
 
-import type { TCommunity, TRootStore } from '@/spec'
+import type { TCommunity, TRootStore, TGlobalLayout } from '@/spec'
 import { buildLog } from '@/utils/logger'
 import { markStates, toJS } from '@/utils/mobx'
 
@@ -19,6 +19,10 @@ const ChangelogThread = T.model('ChangelogThread', {})
 
       return toJS(root.viewing.community)
     },
+    get globalLayout(): TGlobalLayout {
+      const root = getParent(self) as TRootStore
+      return root.dashboardThread.globalLayout
+    },
   }))
   .actions((self) => ({
     mark(sobj: Record<string, unknown>): void {

src/widgets/ChangelogItem/index.tsx

@@ -1,16 +1,23 @@
 import { FC, memo, Fragment } from 'react'
 
+import type { TChangelogLayout } from '@/spec'
+import { CHANGELOG_LAYOUT } from '@/constant'
+
 import DefaultLayout from './DefaultLayout'
 import OutlineLayout from './OutlineLayout'
 
 type TProps = {
-  layout?: 'default' | 'outline'
+  layout: TChangelogLayout
 }
 
-const ChangelogItem: FC<TProps> = ({ layout = 'default' }) => {
+const ChangelogItem: FC<TProps> = ({ layout }) => {
   return (
     <Fragment>
-      {layout === 'default' ? <DefaultLayout /> : <OutlineLayout />}
+      {layout === CHANGELOG_LAYOUT.NORMAL ? (
+        <DefaultLayout />
+      ) : (
+        <OutlineLayout />
+      )}
     </Fragment>
   )
 }