refactor(changelog): adjust preview mode & type

src/containers/thread/ChangelogThread/index.tsx

@@ -33,9 +33,9 @@ const ChangelogThreadContainer: FC<TProps> = ({
   return (
     <Wrapper testid={testid}>
       <MainWrapper>
-        <ChangelogItem layout={globalLayout.changelog} />
+        <ChangelogItem layout={CHANGELOG_LAYOUT.PREVIEW} />
 
-        {globalLayout.changelog === CHANGELOG_LAYOUT.FOLD && (
+        {globalLayout.changelog === CHANGELOG_LAYOUT.OUTLINE && (
           <PreviousTitle>历史版本</PreviousTitle>
         )}
 

src/containers/thread/DashboardThread/UI/ChangelogLayout.tsx

@@ -61,8 +61,10 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
         }
       />
       <SelectWrapper>
-        <Layout onClick={() => edit(CHANGELOG_LAYOUT.FOLD, 'changelogLayout')}>
-          <Block $active={layout === CHANGELOG_LAYOUT.FOLD}>
+        <Layout
+          onClick={() => edit(CHANGELOG_LAYOUT.OUTLINE, 'changelogLayout')}
+        >
+          <Block $active={layout === CHANGELOG_LAYOUT.OUTLINE}>
             <Column>
               <Picture />
               <Br top={14} />
@@ -160,20 +162,20 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
               </MiniIntro>
             </MiniItem>
           </Block>
-          <LayoutTitle $active={layout === CHANGELOG_LAYOUT.FOLD}>
+          <LayoutTitle $active={layout === CHANGELOG_LAYOUT.OUTLINE}>
             <CheckLabel
               title="折叠历史发布"
-              $active={layout === CHANGELOG_LAYOUT.FOLD}
+              $active={layout === CHANGELOG_LAYOUT.OUTLINE}
               top={15}
               left={-15}
             />
           </LayoutTitle>
         </Layout>
         <Space right={40} />
         <Layout
-          onClick={() => edit(CHANGELOG_LAYOUT.NORMAL, 'changelogLayout')}
+          onClick={() => edit(CHANGELOG_LAYOUT.PREVIEW, 'changelogLayout')}
         >
-          <Block $active={layout === CHANGELOG_LAYOUT.NORMAL}>
+          <Block $active={layout === CHANGELOG_LAYOUT.PREVIEW}>
             <Column>
               <Picture small />
               <Br top={14} />
@@ -230,10 +232,10 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
               <Bar long={12} thin />
             </Row>
           </Block>
-          <LayoutTitle $active={layout === CHANGELOG_LAYOUT.NORMAL}>
+          <LayoutTitle $active={layout === CHANGELOG_LAYOUT.PREVIEW}>
             <CheckLabel
               title="全部展开"
-              $active={layout === CHANGELOG_LAYOUT.NORMAL}
+              $active={layout === CHANGELOG_LAYOUT.PREVIEW}
               top={15}
               left={-15}
             />

src/containers/thread/DashboardThread/store.ts

@@ -73,7 +73,7 @@ const settingsModalFields = {
   bannerNotifyBg: T.optional(T.enumeration(keys(COLORS)), 'BLACK'),
   changelogLayout: T.optional(
     T.enumeration(values(CHANGELOG_LAYOUT)),
-    CHANGELOG_LAYOUT.FOLD,
+    CHANGELOG_LAYOUT.OUTLINE,
   ),
   tags: T.optional(T.array(Tag), mockTags(12)),
   alias: T.optional(T.array(Alias), BUILDIN_ALIAS),

src/spec/article.d.ts

@@ -221,7 +221,7 @@ export type TBrandLayout = 'both' | 'logo' | 'text'
 export type TBannerLayout = 'header' | 'tabber'
 export type TBannerNotifyLayout = 'default' | 'center'
 export type TPostLayout = 'upvote_first' | 'comment_first'
-export type TChangelogLayout = 'fold' | 'normal'
+export type TChangelogLayout = 'preview' | 'outline'
 
 export type TGlobalLayout = {
   primaryColor: TColorName

src/widgets/ChangelogItem/DefaultLayout/index.tsx → src/widgets/ChangelogItem/PreviewtLayout/index.tsx

@@ -11,6 +11,7 @@ import { mockUsers } from '@/utils/mock'
 
 import { TAG_MODE } from '@/constant'
 
+import { SpaceGrow } from '@/widgets/Common'
 import DropdownButton from '@/widgets/Buttons/DropdownButton'
 import TagsList from '@/widgets/TagsList'
 import EmotionSelector from '@/widgets/EmotionSelector'
@@ -31,7 +32,7 @@ import {
   Publisher,
   Avatar,
   Username,
-} from '../styles/default_layout'
+} from '../styles/preview_layout'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:ChangelogItem:index')
@@ -40,7 +41,7 @@ type TProps = {
   testid?: string
 }
 
-const DefaultLayout: FC<TProps> = ({ testid = 'changelog-item' }) => {
+const PreviewLayout: FC<TProps> = ({ testid = 'changelog-item' }) => {
   const tags = [
     {
       title: 'Bug 修复',
@@ -120,18 +121,19 @@ const DefaultLayout: FC<TProps> = ({ testid = 'changelog-item' }) => {
             <CommentIcon />
             <Text>23</Text>
           </CommentWrapper>
+          <SpaceGrow />
+          <Publisher>
+            <Avatar src={publisher.avatar} />
+            <Username>{publisher.nickname}</Username>
+          </Publisher>
         </Footer>
       </Main>
       <Side>
         <DateTime>10天前</DateTime>
-        <Publisher>
-          <Avatar src={publisher.avatar} />
-          <Username>{publisher.nickname}</Username>
-        </Publisher>
-        <DropdownButton top={12}>获取</DropdownButton>
+        <DropdownButton top={5}>获取</DropdownButton>
       </Side>
     </Wrapper>
   )
 }
 
-export default memo(DefaultLayout)
+export default memo(PreviewLayout)

src/widgets/ChangelogItem/index.tsx

@@ -3,7 +3,7 @@ import { FC, memo, Fragment } from 'react'
 import type { TChangelogLayout } from '@/spec'
 import { CHANGELOG_LAYOUT } from '@/constant'
 
-import DefaultLayout from './DefaultLayout'
+import PreviewLayout from './PreviewtLayout'
 import OutlineLayout from './OutlineLayout'
 
 type TProps = {
@@ -13,8 +13,8 @@ type TProps = {
 const ChangelogItem: FC<TProps> = ({ layout }) => {
   return (
     <Fragment>
-      {layout === CHANGELOG_LAYOUT.NORMAL ? (
-        <DefaultLayout />
+      {layout === CHANGELOG_LAYOUT.PREVIEW ? (
+        <PreviewLayout />
       ) : (
         <OutlineLayout />
       )}

src/widgets/ChangelogItem/styles/outline_layout/index.ts

@@ -14,7 +14,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   cursor: pointer;
 `
 export const Main = styled.div`
-  width: 574px;
+  width: 550px;
 `
 export const Title = styled.div`
   color: ${theme('thread.articleDigest')};
@@ -41,6 +41,7 @@ export const Body = styled.div`
   ${css.lineClamp(1)};
   font-size: 14px;
   opacity: 0.65;
+  max-width: 500px;
 
   ${Wrapper}:hover & {
     opacity: 1;
@@ -67,7 +68,7 @@ export const Text = styled.div`
 export const Side = styled.div`
   ${css.flexColumn('align-end')};
   color: ${theme('thread.articleDigest')};
-  flex-grow: 1;
+  margin-top: -1px;
 `
 export const DateTime = styled.div`
   font-size: 12px;
@@ -81,7 +82,7 @@ export const TagsWrapper = styled.div`
   margin-right: 3px;
 `
 export const TagDot = styled.div<{ color: string }>`
-  ${css.circle(5)};
+  ${css.circle(6)};
   background-color: ${({ color }) => theme(`baseColor.${color.toLowerCase()}`)};
   margin-left: 6px;
 `

src/widgets/ChangelogItem/styles/default_layout/index.ts → src/widgets/ChangelogItem/styles/preview_layout/index.ts

@@ -17,7 +17,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   margin-bottom: 30px;
 `
 export const Main = styled.div`
-  width: 590px;
+  width: 550px;
   min-height: 220px;
   padding-bottom: 30px;
 `
@@ -29,7 +29,6 @@ export const Title = styled.div`
 `
 export const TagsWrapper = styled.div`
   margin-bottom: 10px;
-  margin-left: -2px;
 `
 export const Body = styled.div`
   color: ${theme('thread.articleDigest')};
@@ -58,11 +57,10 @@ export const Side = styled.div`
   ${css.flexColumn('align-end')};
   color: ${theme('thread.articleDigest')};
   flex-grow: 1;
-  margin-top: 5px;
+  margin-top: 10px;
 `
 export const DateTime = styled.div`
   font-size: 14px;
-  margin-top: 3px;
   opacity: 0.8;
 `
 export const Version = styled.span`
@@ -74,12 +72,12 @@ export const Version = styled.span`
 `
 export const Publisher = styled.div`
   ${css.flex('align-center')};
-  margin-top: 5px;
+  margin-right: 4px;
 `
 export const Avatar = styled(Img)`
   ${css.circle(14)};
 `
 export const Username = styled.div`
-  font-size: 14px;
-  margin-left: 5px;
+  font-size: 13px;
+  margin-left: 7px;
 `

utils/constant/layout.ts

@@ -45,8 +45,8 @@ export const POST_LAYOUT = {
 } as Record<SnakeUpperCase<TPostLayout>, TPostLayout>
 
 export const CHANGELOG_LAYOUT = {
-  FOLD: 'fold',
-  NORMAL: 'normal',
+  PREVIEW: 'preview',
+  OUTLINE: 'outline',
 } as Record<SnakeUpperCase<TChangelogLayout>, TChangelogLayout>
 
 export const DASHBOARD_DESC_LAYOUT = {