refactor(changelog): layout adjust (#1355)

* refactor(changelog): adjust preview mode & type

* refactor(dashboard): adjust changelog layout

* refactor(changelog): adjust preview mode & type

* refactor(changelog): adjust preview mode & type

* fix(changelog): damn ts error

* fix(changelog): damn ts error

* fix(changelog): damn ts error

* fix(changelog): damn ts error

* refactor(changelog): move demo data to constant

* fix(global-layout): add missing header anchor

Author: mydearxym

package-lock.json

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

src/containers/thread/ChangelogThread/index.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/UI/ChangelogLayout.tsx

@@ -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/containers/thread/DashboardThread/store.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/spec/article.d.ts

@@ -7,7 +7,7 @@
 import { FC, memo, Fragment } from 'react'
 
 import type { TMetric, TBannerNotifyLayout, TColorName } from '@/spec'
-import { BANNER_NOTIFY_LAYOUT } from '@/constant'
+import { BANNER_NOTIFY_LAYOUT, ANCHOR } from '@/constant'
 import { buildLog } from '@/utils/logger'
 
 import {
@@ -39,7 +39,7 @@ const BannerNotify: FC<TProps> = ({
   bg,
 }) => {
   return (
-    <Wrapper testid={testid} bg={bg}>
+    <Wrapper testid={testid} bg={bg} id={ANCHOR.GLOBAL_HEADER_ID}>
       <InnerWrapper
         metric={metric}
         center={layout === BANNER_NOTIFY_LAYOUT.CENTER}

src/widgets/BannerNotify/index.tsx

@@ -1,6 +1,8 @@
 import { FC, ReactNode, memo } from 'react'
 
-import type { TSpace } from '@/spec'
+import type { TSizeTS, TSpace } from '@/spec'
+import { SIZE } from '@/constant'
+
 import { buildLog } from '@/utils/logger'
 
 import {
@@ -14,19 +16,29 @@ const log = buildLog('C:DropdownButton')
 
 type TProps = {
   children: ReactNode
+  size?: TSizeTS
+  withBorder?: boolean
   onClick?: () => void
 } & TSpace
 
 const DropdownButton: FC<TProps> = ({
   children,
+  size = SIZE.SMALL,
+  withBorder = false,
   onClick = log,
   ...restProps
 }) => {
   return (
-    <Wrapper {...restProps}>
+    // @ts-ignore
+    <Wrapper
+      withBorder={withBorder}
+      size={size}
+      onClick={onClick}
+      {...restProps}
+    >
       <ButtonWrapper size="small" type="primary" ghost>
         <InnerBtnWrapper>
-          {children}
+          <>{children}</>
           <FilterIcon />
         </InnerBtnWrapper>
       </ButtonWrapper>

src/widgets/Buttons/DropdownButton/index.tsx

@@ -1,16 +1,25 @@
 import styled from 'styled-components'
 
-import type { TSpace } from '@/spec'
-import Button from '@/widgets/Buttons/Button'
+import type { TSizeTS, TSpace } from '@/spec'
+import { SIZE } from '@/constant'
 import css, { theme } from '@/utils/css'
 
+import Button from '@/widgets/Buttons/Button'
 import ArrowSVG from '@/icons/ArrowSimple'
 
-export const Wrapper = styled.div<TSpace>`
+type TWrapper = { withBorder: boolean; size: TSizeTS } & TSpace
+
+export const Wrapper = styled.div<TWrapper>`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
-  margin-right: -12px;
-  font-size: 13px;
+
+  border: ${({ withBorder }) => (withBorder ? '1px solid' : 'none')};
+  border-color: ${({ withBorder }) =>
+    withBorder ? theme('lightText') : theme('transparent')};
+
+  border-radius: 10px;
+
+  transform: ${({ size }) => (size === SIZE.TINY ? 'scale(0.85)' : 'none')};
 
   margin-top: ${({ top }) => `${top}px`};
   margin-bottom: ${({ bottom }) => `${bottom}px`};
@@ -42,6 +51,7 @@ export const FilterIcon = styled(ArrowSVG)`
   ${css.size(14)};
   transform: rotate(-90deg);
   margin-left: 5px;
+
   ${InnerBtnWrapper}:hover & {
     fill: ${theme('thread.articleDigest')};
   }