feat(post-item): new post layout

src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx

@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
 import type { TArticle, TMetric, TThread } from '@/spec'
 import { METRIC } from '@/constant'
 
-import ArticleStateBadge from '@/widgets/ArticleStateBadge'
+import ArticleCatState from '@/widgets/ArticleCatState'
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
 
 import {
@@ -36,19 +36,19 @@ const FixedHeader: FC<TProps> = ({
         <ContentWrapper metric={metric}>
           <Title>{article.title}</Title>
           <ArticleStateBadgeWrapper>
-            {article.id === '239' && <ArticleStateBadge type="FEATURE" />}
-            {article.id === '231' && <ArticleStateBadge type="BUG" />}
+            {article.id === '239' && <ArticleCatState type="FEATURE" />}
+            {article.id === '231' && <ArticleCatState type="BUG" />}
             {article.id === '227' && (
-              <ArticleStateBadge type="BUG" state="TODO" />
+              <ArticleCatState type="BUG" state="TODO" />
             )}
             {article.id === '228' && (
-              <ArticleStateBadge type="FEATURE" state="WIP" />
+              <ArticleCatState type="FEATURE" state="WIP" />
             )}
             {article.id === '226' && (
-              <ArticleStateBadge type="QUESTION" state="RESOLVE" />
+              <ArticleCatState type="QUESTION" state="RESOLVE" />
             )}
             {article.id === '225' && (
-              <ArticleStateBadge type="LOCK" state="LOCK" />
+              <ArticleCatState type="LOCK" state="LOCK" />
             )}
           </ArticleStateBadgeWrapper>
         </ContentWrapper>

src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx

@@ -17,7 +17,7 @@ import ArticleBaseStats from '@/widgets/ArticleBaseStats'
 import DotDivider from '@/widgets/DotDivider'
 // import ArticleMenu from '@/widgets/ArticleMenu'
 import ReadableDate from '@/widgets/ReadableDate'
-import ArticleStateBadge from '@/widgets/ArticleStateBadge'
+import ArticleCatState from '@/widgets/ArticleCatState'
 
 import {
   Main,
@@ -69,19 +69,19 @@ const PostLayout: FC<TProps> = ({ metric = METRIC.ARTICLE, article }) => {
           )} */}
           <DotDivider space={12} />
           <div>
-            {article.id === '239' && <ArticleStateBadge type="FEATURE" />}
-            {article.id === '231' && <ArticleStateBadge type="BUG" />}
+            {article.id === '239' && <ArticleCatState type="FEATURE" />}
+            {article.id === '231' && <ArticleCatState type="BUG" />}
             {article.id === '227' && (
-              <ArticleStateBadge type="BUG" state="TODO" />
+              <ArticleCatState type="BUG" state="TODO" />
             )}
             {article.id === '228' && (
-              <ArticleStateBadge type="FEATURE" state="WIP" />
+              <ArticleCatState type="FEATURE" state="WIP" />
             )}
             {article.id === '226' && (
-              <ArticleStateBadge type="QUESTION" state="RESOLVE" />
+              <ArticleCatState type="QUESTION" state="RESOLVE" />
             )}
             {article.id === '225' && (
-              <ArticleStateBadge type="LOCK" state="LOCK" />
+              <ArticleCatState type="LOCK" state="LOCK" />
             )}
           </div>
         </Header>

src/containers/tool/ArticleSticker/CommentSticker.tsx

@@ -48,7 +48,7 @@ const CommentSticker: FC<TProps> = ({ show, commentsState }) => {
             <Tooltip
               key={user.login}
               placement="bottom"
-              content={<UserCard item={user} />}
+              content={<UserCard user={user} />}
             >
               <Avatar
                 src={user.avatar}

src/containers/unit/ArticleFooter/Panel/ActivityInfo/index.tsx

@@ -13,6 +13,7 @@ import {
   Highlight,
   Label,
   Content,
+  HelpHint,
 } from '../../styles/panel/activity_info'
 
 const tmpItems = [
@@ -65,6 +66,7 @@ const ActivityInfo: FC = () => {
       {tmpItems.map((item) => (
         <ActionItem key={item.id} item={item} />
       ))}
+      <HelpHint>关于日志</HelpHint>
     </Wrapper>
   )
 }

src/containers/unit/ArticleFooter/index.tsx

@@ -6,20 +6,19 @@
 
 import { FC, useState } from 'react'
 
-import type { TArticleCat, TMetric } from '@/spec'
+import type { TMetric } from '@/spec'
 import { METRIC } from '@/constant'
 
 import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
-import ArticleCatLabel from '@/widgets/ArticleCatLabel'
-import { SpaceGrow } from '@/widgets/Common'
+// import { SpaceGrow } from '@/widgets/Common'
 import TagsList from '@/widgets/TagsList'
 
 import Panel from './Panel'
 
 import type { TStore } from './store'
-import { Wrapper, BaseInfo, CatLabelWrapper } from './styles'
+import { Wrapper, BaseInfo } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
@@ -46,13 +45,6 @@ const ArticleFooterContainer: FC<TProps> = ({
     <Wrapper testid={testid}>
       <BaseInfo>
         <TagsList items={articleTags} size="small" />
-        <CatLabelWrapper>
-          <ArticleCatLabel
-            type={cat as TArticleCat}
-            mode="readonly"
-            onChange={(key) => setCat(key)}
-          />
-        </CatLabelWrapper>
         <div>Emoji</div>
       </BaseInfo>
 

src/containers/unit/ArticleFooter/styles/index.ts

@@ -17,7 +17,3 @@ export const BaseInfo = styled.div`
     margin-top: 20px;
   `};
 `
-
-export const CatLabelWrapper = styled.div`
-  margin-left: -25px;
-`

src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
 import css, { theme } from '@/utils/css'
 
 import EditPenSVG from '@/icons/Calendar'
@@ -9,6 +8,8 @@ import UpdateTimeSVG from '@/icons/UpdateTime'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
+  position: relative;
+  width: 100%;
 `
 export const Item = styled.div`
   ${css.flex('align-center')};
@@ -38,41 +39,23 @@ export const CommentIcon = styled(CommentSVG)`
   margin-right: 10px;
   opacity: 0.8;
 `
-
 export const Content = styled.div``
 export const Highlight = styled.span`
   color: ${theme('thread.articleTitle')};
 `
+export const HelpHint = styled.div`
+  position: absolute;
+  right: 8px;
+  top: -1px;
+  font-size: 11px;
+  color: ${theme('lightText')};
+  opacity: 0.8;
 
-export const ReferNum = styled.span`
-  font-size: 13px;
-  font-weight: bold;
-  color: #00a59b;
-  margin-right: 5px;
-`
-export const Text = styled.div<TActive>`
-  color: ${({ active }) =>
-    active ? theme('thread.articleTitle') : theme('thread.extraInfo')};
-  font-size: 13px;
-
-  ${Item}:hover & {
+  &:hover {
     color: ${theme('thread.articleTitle')};
+    opacity: 1;
+    cursor: pointer;
   }
 
-  transition: color 0.25s;
-`
-export const PanelWrapper = styled.div`
-  ${css.flexColumn()};
-  position: relative;
-  border-top: 1px solid;
-  border-top-color: #00424f;
-`
-export const PanelInnerWrapper = styled.div`
-  height: 100%;
-  border-left: 1px solid;
-  border-left-color: #00424f;
-  padding: 25px 0;
-  padding-right: 25px;
-  margin-left: 18px;
-  min-height: 120px;
+  transition: color 0.2s;
 `

src/containers/unit/TagsBar/DesktopView/Folder.tsx

@@ -1,7 +1,7 @@
 import { FC, useState, useRef, useEffect } from 'react'
 import { findIndex, reverse } from 'ramda'
 
-import type { TTag, TTagMode } from '@/spec'
+import type { TTag } from '@/spec'
 import { sortByColor } from '@/utils/helper'
 
 import TagItem from './TagItem'
@@ -79,7 +79,7 @@ const Folder: FC<TProps> = ({
       >
         <ArrowIcon $isOpen={isFolderOpen} />
         <Title>
-          <FolderTitle>{title}</FolderTitle>
+          <FolderTitle $isOpen={isFolderOpen}>{title}</FolderTitle>
           {!isFolderOpen && <Count>{sortedTags.length}</Count>}
         </Title>
         {!isFolderOpen && isActiveTagInFolder && (

src/containers/unit/TagsBar/styles/desktop_view/folder.ts

@@ -36,17 +36,17 @@ export const Title = styled.div`
   ${css.flex('align-center')};
   margin-left: 7px;
 `
-export const FolderTitle = styled.div`
-  color: ${theme('thread.extraInfo')};
-  opacity: 0.65;
+export const FolderTitle = styled.div<{ $isOpen: boolean }>`
+  color: ${({ $isOpen }) =>
+    !$isOpen ? theme('thread.articleDigest') : theme('lightText')};
+
   margin-left: 4px;
-  font-weight: 500;
   font-size: 13px;
   margin-right: 8px;
   ${css.cutRest('85px')};
 
   ${Header}:hover & {
-    opacity: 1;
+    color: ${theme('thread.articleDigest')};
   }
 `
 export const Count = styled.div`
@@ -74,22 +74,26 @@ export const SubToggle = styled.div`
   ${css.flex('align-center')};
   margin-top: 5px;
   margin-left: 3px;
-  opacity: 0.8;
 
   &:hover {
-    opacity: 1;
     cursor: pointer;
   }
 `
 export const SubToggleTitle = styled.div`
-  color: ${theme('thread.extraInfo')};
+  color: ${theme('lightText')};
   font-size: 12px;
-  margin-left: 10px;
+  margin-left: 11px;
   padding: 2px;
   border-radius: 5px;
+
+  &:hover {
+    color: ${theme('thread.articleDigest')};
+  }
+
+  transition: color 0.2s;
 `
 export const SubTogglePrefixIcon = styled(MoreSVG)`
-  fill: ${theme('thread.extraInfo')};
+  fill: ${theme('lightText')};
   ${css.size(12)};
   margin-right: 2px;
 `

src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx

@@ -2,7 +2,7 @@ import { FC, memo } from 'react'
 import type { TArticle } from '@/spec'
 
 import Upvote from '@/widgets/Upvote'
-import ArticleStateBadge from '@/widgets/ArticleStateBadge'
+import ArticleCatState from '@/widgets/ArticleCatState'
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
 
 import {
@@ -35,20 +35,16 @@ const FixedHeader: FC<TProps> = ({ article, visible, footerVisible }) => {
 
         <ArticleTitle>{article.title}</ArticleTitle>
         <ArticleStateBadgeWrapper>
-          {article.id === '239' && <ArticleStateBadge type="FEATURE" />}
-          {article.id === '231' && <ArticleStateBadge type="BUG" />}
-          {article.id === '227' && (
-            <ArticleStateBadge type="BUG" state="TODO" />
-          )}
+          {article.id === '239' && <ArticleCatState type="FEATURE" />}
+          {article.id === '231' && <ArticleCatState type="BUG" />}
+          {article.id === '227' && <ArticleCatState type="BUG" state="TODO" />}
           {article.id === '228' && (
-            <ArticleStateBadge type="FEATURE" state="WIP" />
+            <ArticleCatState type="FEATURE" state="WIP" />
           )}
           {article.id === '226' && (
-            <ArticleStateBadge type="QUESTION" state="RESOLVE" />
-          )}
-          {article.id === '225' && (
-            <ArticleStateBadge type="LOCK" state="LOCK" />
+            <ArticleCatState type="QUESTION" state="RESOLVE" />
           )}
+          {article.id === '225' && <ArticleCatState type="LOCK" state="LOCK" />}
         </ArticleStateBadgeWrapper>
       </LeftPart>
       <ArticleBaseStats article={article} container="drawer" />

src/containers/viewer/ArticleViewer/PostViewer/Header.tsx

@@ -4,7 +4,7 @@ import TimeAgo from 'timeago-react'
 import type { TPost } from '@/spec'
 
 import DotDivider from '@/widgets/DotDivider'
-import ArticleStateBadge from '@/widgets/ArticleStateBadge'
+import ArticleCatState from '@/widgets/ArticleCatState'
 
 import {
   Wrapper,
@@ -41,15 +41,21 @@ const Header: FC<TProps> = ({ article }) => {
         )}
       </PublishWrapper>
       <DotDivider space={10} />
-      {article.id === '239' && <ArticleStateBadge type="FEATURE" />}
-      {article.id === '231' && <ArticleStateBadge type="BUG" />}
-      {article.id === '227' && <ArticleStateBadge type="BUG" state="TODO" />}
-      {article.id === '228' && <ArticleStateBadge type="FEATURE" state="WIP" />}
+      {article.id === '239' && (
+        <ArticleCatState type="FEATURE" smaller={false} />
+      )}
+      {article.id === '231' && <ArticleCatState type="BUG" />}
+      {article.id === '227' && (
+        <ArticleCatState type="BUG" state="TODO" smaller={false} />
+      )}
+      {article.id === '228' && (
+        <ArticleCatState type="FEATURE" state="WIP" smaller={false} />
+      )}
       {article.id === '226' && (
-        <ArticleStateBadge type="QUESTION" state="RESOLVE" articleInfoLayout />
+        <ArticleCatState type="QUESTION" state="RESOLVE" smaller={false} />
       )}
       {article.id === '225' && (
-        <ArticleStateBadge type="LOCK" state="LOCK" articleInfoLayout />
+        <ArticleCatState type="LOCK" state="LOCK" smaller={false} />
       )}
     </Wrapper>
   )

src/containers/viewer/ArticleViewer/styles/post_viewer/header.ts

@@ -16,19 +16,19 @@ export const Avatar = styled(Img)`
   margin-right: 10px;
 `
 export const AuthorName = styled.div`
-  color: ${theme('thread.articleDigest')};
+  color: ${theme('thread.extraInfo')};
   font-size: 15px;
 `
 export const PublishWrapper = styled.div`
   ${css.flex('align-center')}
 `
 export const PubDate = styled.div`
-  color: ${theme('thread.articleDigest')};
+  color: ${theme('thread.extraInfo')};
   font-size: 13px;
 `
 export const EditedHint = styled.div`
   font-size: 13px;
-  color: ${theme('thread.articleDigest')};
+  color: ${theme('thread.extraInfo')};
 
   &:before {
     content: '(';

src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx

@@ -61,13 +61,15 @@ export const GoTopWrapper = styled.div<{ show: boolean }>`
   ${css.flex('align-end', 'justify-center')};
   position: fixed;
   bottom: 40px;
-  left: 65px;
-  width: 140px;
-  height: 400px;
-  opacity: 0;
+  left: 102px;
+  width: 60px;
+  height: 40px;
+  opacity: 0.8;
+
+  visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
 
   &:hover {
-    opacity: ${({ show }) => (show ? 1 : 0)};
+    opacity: 1;
   }
   transition: opacity 0.2s;
 `