refactor(dashboard): dashboard overview & article post item improve (#…

…129) * refactor(dashboard): do not inc views when view dashboard related pages * refactor(about): adjust layout & re-fmt css helpers * refactor(dashboard): add overview status * refactor(dashboard): style adjust * refactor(article): naming and hover effect for postitem
groupher · Sep 1, 2023 · 7191897 · 7191897
1 parent e2369a6
commit 7191897
Show file tree

Hide file tree

Showing 181 changed files with 670 additions and 422 deletions.
diff --git a/src/containers/content/ArticleContent/styles/desktop_view/article_layout.ts b/src/containers/content/ArticleContent/styles/desktop_view/article_layout.ts
@@ -1 +1 @@
-export { Wrapper, InnerWrapper, MainWrapper, ArticleWrapper, CommentsWrapper } from './index'
+export { Wrapper, InnerWrapper, MainWrapper, ArticleWrapper, CommentsWrapper } from '.'
diff --git a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_image.ts b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_image.ts
@@ -11,8 +11,7 @@ import CommentSVG from '@/icons/Heart'
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  ${css.column('align-both')};
-  flex-grow: 1;
+  ${css.columnGrow('align-both')};
   position: relative;
 
   ${css.media.mobile`

diff --git a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_image.ts b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_image.ts
@@ -11,8 +11,7 @@ import ShareSVG from '@/icons/Share'
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  ${css.column('align-both')};
-  flex-grow: 1;
+  ${css.columnGrow('align-both')};
   position: relative;
 
   ${css.media.mobile`

diff --git a/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_image.ts b/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_image.ts
@@ -11,8 +11,7 @@ import GoodSVG from './GoodSVG'
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  ${css.column('align-both')};
-  flex-grow: 1;
+  ${css.columnGrow('align-both')};
   position: relative;
 
   ${css.media.mobile`

diff --git a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_image.ts b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_image.ts
@@ -11,8 +11,7 @@ import GtdTodoSVG from '@/icons/GtdTodo'
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  ${css.column('align-both')};
-  flex-grow: 1;
+  ${css.columnGrow('align-both')};
   position: relative;
 
   ${css.media.mobile`

diff --git a/src/containers/digest/CommunityDigest/SimpleLayout/CommunityBrief.tsx b/src/containers/digest/CommunityDigest/SimpleLayout/CommunityBrief.tsx
@@ -7,7 +7,6 @@ import type { TCommunity } from '@/spec'
 import {
   Wrapper,
   Logo,
-  LogoWrapper,
   CommunityInfo,
   TitleWrapper,
   Title,
@@ -22,9 +21,7 @@ type TProps = {
 const CommunityBrief: FC<TProps> = ({ community }) => {
   return (
     <Wrapper>
-      <LogoWrapper>
-        <Logo src={community.logo} noLazy />
-      </LogoWrapper>
+      <Logo src={community.logo} noLazy />
       <CommunityInfo>
         <TitleWrapper>
           <Title>

diff --git a/src/containers/digest/CommunityDigest/logic.ts b/src/containers/digest/CommunityDigest/logic.ts
@@ -42,7 +42,7 @@ const loadCommunity = (): void => {
 
   markLoading(true)
 
-  sr71$.query(S.community, { slug, userHasLogin })
+  sr71$.query(S.community, { slug, userHasLogin, incViews: false })
 }
 
 // 查看当前社区志愿者列表

diff --git a/src/containers/digest/CommunityDigest/styles/classic_layout/community_brief.ts b/src/containers/digest/CommunityDigest/styles/classic_layout/community_brief.ts
@@ -73,8 +73,7 @@ export const ArrowIcon = styled(ArrowSVG)`
   margin-right: 5px;
 `
 export const Desc = styled.div`
-  color: ${theme('article.digest')};
-  opacity: 0.8;
+  color: ${theme('hint')};
   font-size: 15px;
 `
 export const LogoHolder = styled(Img)`

diff --git a/src/containers/digest/CommunityDigest/styles/sidebar_layout/community_brief.ts b/src/containers/digest/CommunityDigest/styles/sidebar_layout/community_brief.ts
@@ -44,7 +44,6 @@ export const ArrowIcon = styled(ArrowSVG)`
   margin-right: 5px;
 `
 export const Desc = styled.div`
-  color: ${theme('article.digest')};
-  opacity: 0.8;
+  color: ${theme('hint')};
   font-size: 13px;
 `
diff --git a/src/containers/digest/CommunityDigest/styles/simple_layout/community_brief.ts b/src/containers/digest/CommunityDigest/styles/simple_layout/community_brief.ts
@@ -13,12 +13,9 @@ export const Wrapper = styled.div`
     max-width: 150px;
   `};
 `
-export const LogoWrapper = styled.div`
-  position: relative;
-  width: 20px;
-`
 export const Logo = styled(Img)`
   ${css.size(20)};
+  margin-left: -1px;
 `
 export const CommunityInfo = styled.div`
   ${css.column('justify-center')};

diff --git a/src/containers/editor/AccountEditor/styles/index.ts b/src/containers/editor/AccountEditor/styles/index.ts
@@ -55,8 +55,7 @@ export const GithubIcon = styled(GithubSVG)`
   margin-bottom: 7px;
 `
 export const SectionHint = styled.div`
-  color: ${theme('article.digest')};
-  opacity: 0.8;
+  color: ${theme('hint')};
   font-size: 12px;
   margin-top: 6px;
   margin-left: 12px;

diff --git a/src/containers/editor/CommunityEditor/styles/banner/block_selector.ts b/src/containers/editor/CommunityEditor/styles/banner/block_selector.ts
@@ -4,8 +4,7 @@ import type { TActive } from '@/spec'
 import css, { theme } from '@/css'
 
 export const Wrapper = styled.div`
-  ${css.row('align-center')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-center')};
   color: ${theme('article.digest')};
   width: 300px;
   margin-top: 14px;

diff --git a/src/containers/editor/CommunityEditor/styles/banner/setup_extra.ts b/src/containers/editor/CommunityEditor/styles/banner/setup_extra.ts
@@ -22,8 +22,7 @@ export const IntroTitle = styled.div`
   font-size: 18px;
 `
 export const IntroDesc = styled.div`
-  color: ${theme('article.digest')};
-  opacity: 0.8;
+  color: ${theme('hint')};
   font-size: 13px;
   margin-top: 8px;
   margin-bottom: 42px;

diff --git a/src/containers/editor/CommunityEditor/styles/content/demo_community.ts b/src/containers/editor/CommunityEditor/styles/content/demo_community.ts
@@ -5,8 +5,7 @@ import css, { theme } from '@/css'
 import CommunityFaceLogo from '@/widgets/CommunityFaceLogo'
 
 export const Wrapper = styled.div`
-  ${css.row('align-center')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-center')};
 `
 /* header bg */
 export const Community = styled.div`

diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts
@@ -144,8 +144,7 @@ export const Slash = styled.div`
   margin-right: 1px;
   font-size: 10px;
   margin-top: 1px;
-  color: ${theme('article.digest')};
-  opacity: 0.8;
+  color: ${theme('hint')};
 `
 export const ThreadPath = styled.div<TActive>`
   ${css.row('align-center')};

diff --git a/src/containers/editor/CommunityEditor/styles/content/select_type.ts b/src/containers/editor/CommunityEditor/styles/content/select_type.ts
@@ -46,8 +46,7 @@ export const Desc = styled.div`
   line-height: 1.7;
 `
 export const CommunityDemoWrapper = styled.div`
-  ${css.row('align-center')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-center')};
   margin-bottom: 10px;
   margin-top: -4px;
 `
diff --git a/src/containers/editor/CoverEditor/styles/toolbox/background_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/background_block.ts
@@ -35,8 +35,7 @@ export const Title = styled.div`
 `
 
 export const BgRow = styled.div`
-  ${css.row('align-center')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-center')};
   gap: 10px;
 `
 
@@ -50,8 +49,7 @@ export const Divider = styled.div`
 `
 
 export const DirRow = styled.div`
-  ${css.row('align-center')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-center')};
   gap: 0 12px;
 `
 

diff --git a/src/containers/editor/CoverEditor/styles/toolbox/border_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/border_block.ts
@@ -70,8 +70,7 @@ export const BorderRow = styled.div`
   gap: 0 18px;
 `
 export const BorderContentsRow = styled.div`
-  ${css.row('align-center')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-center')};
   width: 160px;
   gap: 10px 12px;
   margin-left: -5px;

diff --git a/src/containers/editor/TagSettingEditor/PostLayout.tsx b/src/containers/editor/TagSettingEditor/PostLayout.tsx
@@ -29,8 +29,8 @@ type TProps = {
 const PostListLayout: FC<TProps> = ({ layout, onChange }) => {
   return (
     <Wrapper>
-      <Layout onClick={() => onChange(POST_LAYOUT.UPVOTE_FIRST)}>
-        <Block $active={layout === POST_LAYOUT.UPVOTE_FIRST}>
+      <Layout onClick={() => onChange(POST_LAYOUT.QUORA)}>
+        <Block $active={layout === POST_LAYOUT.QUORA}>
           <Bar thin long={30} />
           <Br bottom={7} />
           <Row>
@@ -52,17 +52,12 @@ const PostListLayout: FC<TProps> = ({ layout, onChange }) => {
             <Bar long={12} thin />
           </Row>
         </Block>
-        <LayoutTitle $active={layout === POST_LAYOUT.UPVOTE_FIRST}>
-          <CheckLabel
-            title="侧重投票"
-            $active={layout === POST_LAYOUT.UPVOTE_FIRST}
-            top={15}
-            left={-15}
-          />
+        <LayoutTitle $active={layout === POST_LAYOUT.QUORA}>
+          <CheckLabel title="侧重投票" $active={layout === POST_LAYOUT.QUORA} top={15} left={-15} />
         </LayoutTitle>
       </Layout>
-      <Layout onClick={() => onChange(POST_LAYOUT.COMMENT_FIRST)}>
-        <Block $active={layout === POST_LAYOUT.COMMENT_FIRST}>
+      <Layout onClick={() => onChange(POST_LAYOUT.PH)}>
+        <Block $active={layout === POST_LAYOUT.PH}>
           <Row>
             <Column center>
               <Circle />
@@ -95,13 +90,8 @@ const PostListLayout: FC<TProps> = ({ layout, onChange }) => {
             </Column>
           </Row>
         </Block>
-        <LayoutTitle $active={layout === POST_LAYOUT.COMMENT_FIRST}>
-          <CheckLabel
-            title="侧重评论"
-            $active={layout === POST_LAYOUT.COMMENT_FIRST}
-            top={15}
-            left={-15}
-          />
+        <LayoutTitle $active={layout === POST_LAYOUT.PH}>
+          <CheckLabel title="侧重评论" $active={layout === POST_LAYOUT.PH} top={15} left={-15} />
         </LayoutTitle>
       </Layout>
 

diff --git a/src/containers/editor/TagSettingEditor/index.tsx b/src/containers/editor/TagSettingEditor/index.tsx
@@ -122,7 +122,7 @@ const TagSettingEditorContainer: FC<TProps> = ({
         </Desc>
         <Br bottom={20} />
         <PostLayout
-          layout={editingTag.layout || POST_LAYOUT.UPVOTE_FIRST}
+          layout={editingTag.layout || POST_LAYOUT.QUORA}
           onChange={(v) => edit(v, 'layout')}
         />
       </CustomScroller>

diff --git a/src/containers/editor/TagSettingEditor/styles/post_layout.ts b/src/containers/editor/TagSettingEditor/styles/post_layout.ts
@@ -8,8 +8,7 @@ import UpvoteSVG from '@/icons/Upvote'
 import CommentSVG from '@/icons/Comment'
 
 export const Wrapper = styled.div`
-  ${css.row('align-center')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-center')};
   gap: 0 45px;
   width: 100%;
   padding-left: 35px;

diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/custom_gradient_editor.ts b/src/containers/editor/WallpaperEditor/styles/build_in/custom_gradient_editor.ts
@@ -39,8 +39,7 @@ export const Footer = styled.div`
 
 export const NoteText = styled.div`
   font-size: 11px;
-  color: ${theme('article.digest')};
-  opacity: 0.8;
+  color: ${theme('hint')};
 `
 
 export const Note = styled(Link)`

diff --git a/src/containers/thread/AboutThread/BasicStates/index.tsx b/src/containers/thread/AboutThread/BasicStates/index.tsx
@@ -47,7 +47,7 @@ const BasicStates: FC = () => {
         <UsersWrapper>
           <UsersIcon />
         </UsersWrapper>
-        <Title>参与者</Title>
+        <Title>互动人数</Title>
         <Desc>参与互动的用户</Desc>
         <Num>28</Num>
       </Block>
@@ -72,7 +72,7 @@ const BasicStates: FC = () => {
           <EmojiIcon />
         </EmojisWrapper>
         <Title>回应</Title>
-        <Desc>赞同与表情</Desc>
+        <Desc>投票和表情</Desc>
         <Num>374</Num>
       </Block>
     </Wrapper>

diff --git a/src/containers/thread/AboutThread/Members/AdminMember.tsx b/src/containers/thread/AboutThread/Members/AdminMember.tsx
@@ -14,7 +14,7 @@ type TProps = {
 const AdminMember: FC<TProps> = ({ user, avatarLayout }) => {
   return (
     <Wrapper>
-      <AdminAvatar user={user} right={10} avatarLayout={avatarLayout} />
+      <AdminAvatar user={user} right={15} top={4} avatarLayout={avatarLayout} />
       <Info>
         <Name>{user.nickname}</Name>
         <Bio>{user.bio}</Bio>

diff --git a/src/containers/thread/AboutThread/Members/index.tsx b/src/containers/thread/AboutThread/Members/index.tsx
@@ -1,9 +1,10 @@
 import { FC, memo } from 'react'
 
-import type { TAvatarLayout } from '@/spec'
+import type { TAvatarLayout, TModerator } from '@/spec'
 import { mockUsers } from '@/utils/mock'
 
 import ImgFallback from '@/widgets/ImgFallback'
+import NoteTip from '@/widgets/NoteTip'
 
 import AdminMember from './AdminMember'
 
@@ -13,53 +14,60 @@ import {
   BottomBlock,
   Header,
   Title,
-  Row,
+  AdminsRow,
   Admin,
-  NormalAvatar,
+  JoinersRow,
+  JoinersAvatar,
 } from '../styles/members'
 
 type TProps = {
   avatarLayout: TAvatarLayout
+  moderators: TModerator[]
 }
 
-const Members: FC<TProps> = ({ avatarLayout }) => {
+const Members: FC<TProps> = ({ avatarLayout, moderators }) => {
   return (
     <Wrapper>
       <Block>
         <Header>
-          <Title>团队成员</Title>
+          <Title>社区管理员</Title>
         </Header>
-        <Row>
-          {mockUsers(6).map((user) => (
-            <Admin key={user.id}>
-              <AdminMember user={user} avatarLayout={avatarLayout} />
+        <AdminsRow>
+          {moderators.map((moderator: TModerator) => (
+            <Admin key={moderator.user.login}>
+              <AdminMember user={moderator.user} avatarLayout={avatarLayout} />
             </Admin>
           ))}
-        </Row>
+        </AdminsRow>
       </Block>
 
       <BottomBlock>
         <Header>
-          <Title>参与者</Title>
+          <Title>
+            参与互动
+            <NoteTip fontSize={14} left={4} placement="right" offset={[-6, 10]}>
+              参与发布，投票，评论，以及 Emoji 反馈的用户
+            </NoteTip>
+          </Title>
         </Header>
-        <Row>
+        <JoinersRow>
           {mockUsers(15).map((user) => (
-            <NormalAvatar
+            <JoinersAvatar
               key={user.id}
               src={user.avatar}
               avatarLayout={avatarLayout}
               fallback={<ImgFallback size={26} user={user} avatarLayout={avatarLayout} />}
             />
           ))}
           {mockUsers(15).map((user) => (
-            <NormalAvatar
+            <JoinersAvatar
               key={user.id}
               src={user.avatar}
               avatarLayout={avatarLayout}
               fallback={<ImgFallback size={26} user={user} avatarLayout={avatarLayout} />}
             />
           ))}
-        </Row>
+        </JoinersRow>
       </BottomBlock>
     </Wrapper>
   )