feat(article-footer): add cat select concept (#1323)

* chore: adjust tags & upvote for posts

* chore: add cat to article footer & re-org

Author: mydearxym

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

@@ -37,7 +37,7 @@ type TProps = {
 
 export const TAB_ITEMS = [
   {
-    title: '关于作者',
+    title: '帖作者',
     raw: 'author-info',
   },
   {

src/containers/unit/ArticleFooter/TagList.tsx

@@ -6,22 +6,20 @@
 
 import { FC, useState } from 'react'
 
-import type { TCopyright, TMetric } from '@/spec'
+import type { TArticleCat, TMetric } from '@/spec'
 import { METRIC } from '@/constant'
 
 import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
-import Copyright from '@/widgets/Copyright'
+import ArticleCatLabel from '@/widgets/ArticleCatLabel'
 import { SpaceGrow } from '@/widgets/Common'
+import TagsList from '@/widgets/TagsList'
 
-// import TagList from '@/widgets/TagList'
-
-import TagList from './TagList'
 import Panel from './Panel'
 
 import type { TStore } from './store'
-import { Wrapper, BaseInfo } from './styles'
+import { Wrapper, BaseInfo, CatLabelWrapper } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
@@ -42,18 +40,20 @@ const ArticleFooterContainer: FC<TProps> = ({
   const { viewingArticle } = store
   const { author, articleTags } = viewingArticle
 
-  const [copyright, setCopyright] = useState('cc')
+  const [cat, setCat] = useState('feature')
 
   return (
     <Wrapper testid={testid}>
       <BaseInfo>
-        <TagList items={articleTags} />
-        <Copyright
-          type={copyright as TCopyright}
-          mode="readonly"
-          onChange={(key) => setCopyright(key)}
-        />
-        <SpaceGrow />
+        <TagsList items={articleTags} size="small" />
+        <CatLabelWrapper>
+          <ArticleCatLabel
+            type={cat as TArticleCat}
+            mode="readonly"
+            onChange={(key) => setCat(key)}
+          />
+        </CatLabelWrapper>
+        <div>Emoji</div>
       </BaseInfo>
 
       <Panel author={author} />

src/containers/unit/ArticleFooter/index.tsx

@@ -8,7 +8,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 }))<TTestable>``
 
 export const BaseInfo = styled.div`
-  ${css.flex('align-center')};
+  ${css.flex('align-center', 'justify-between')};
   margin-bottom: 30px;
   padding-left: 0;
   padding-right: 10px;
@@ -17,3 +17,7 @@ export const BaseInfo = styled.div`
     margin-top: 20px;
   `};
 `
+
+export const CatLabelWrapper = styled.div`
+  margin-left: -25px;
+`

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

@@ -21,7 +21,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 export const TabsWrapper = styled.div`
   position: absolute;
   top: -36px;
-  left: -15px;
+  left: -14px;
 `
 export const ReportWrapper = styled.div`
   position: absolute;

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

@@ -111,7 +111,7 @@ const Folder: FC<TProps> = ({
           >
             <SubTogglePrefixIcon />
             <SubToggleTitle>
-              {curDisplayCount === maxDisplayCount ? '展开全部' : '收起'}
+              {curDisplayCount === maxDisplayCount ? '展开' : '收起'}
             </SubToggleTitle>
           </SubToggle>
         )}

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

@@ -30,7 +30,7 @@ const TagItem: FC<TProps> = ({ tag, active, onSelect }) => {
         <DotSign color={tag.color} $active={active} />
       </DotWrapper>
       <Tag $active={active} color={tag.color} onClick={() => onSelect(tag)}>
-        <Title color={tag.color}>{cutRest(Trans(tag.title), 10)}</Title>
+        <Title>{cutRest(Trans(tag.title), 10)}</Title>
         <RawWrapper $active={active}>
           {/* <DotDivider radius={2} space={6} /> */}
           <Raw>{tag.raw}</Raw>

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

@@ -10,52 +10,58 @@ export const Header = styled.div<TActive>`
   ${css.flex('align-center')};
   display: ${({ show }) => (show ? 'flex' : 'none')};
   margin-bottom: 8px;
+  margin-left: -25px;
   &:hover {
     cursor: pointer;
   }
 `
 export const ArrowIcon = styled(ArrowSVG)<{ $isOpen: boolean }>`
   fill: ${theme('tags.text')};
   ${css.size(16)};
-  opacity: 0.5;
+  opacity: 0;
   transform: ${({ $isOpen }) =>
     $isOpen ? 'rotate(270deg)' : 'rotate(180deg)'};
   transition: transform 0.5s;
+
+  ${Wrapper}:hover & {
+    opacity: 0.6;
+  }
+
   ${Header}:hover & {
-    opacity: 0.65;
+    opacity: 1;
   }
+  transition: all 0.2s;
 `
 export const Title = styled.div`
   ${css.flex('align-center')};
   margin-left: 7px;
 `
 export const FolderTitle = styled.div`
   color: ${theme('thread.extraInfo')};
+  opacity: 0.65;
   margin-left: 4px;
-  font-size: 14px;
+  font-weight: 500;
+  font-size: 13px;
   margin-right: 8px;
   ${css.cutRest('85px')};
 
   ${Header}:hover & {
-    opacity: 0.65;
+    opacity: 1;
   }
 `
 export const Count = styled.div`
-  color: ${theme('thread.articleTitle')};
+  color: ${theme('thread.extraInfo')};
   font-size: 13px;
-  margin-top: 2px;
 
   &:before {
     content: '(';
     margin-right: 2px;
     font-size: 12px;
-    color: ${theme('thread.articleDigest')};
   }
   &:after {
     content: ')';
     margin-left: 2px;
     font-size: 12px;
-    color: ${theme('thread.articleDigest')};
   }
 `
 
@@ -71,7 +77,7 @@ export const SubToggle = styled.div`
   opacity: 0.8;
 
   &:hover {
-    opacity: 0.1;
+    opacity: 1;
     cursor: pointer;
   }
 `
@@ -84,5 +90,6 @@ export const SubToggleTitle = styled.div`
 `
 export const SubTogglePrefixIcon = styled(MoreSVG)`
   fill: ${theme('thread.extraInfo')};
-  ${css.size(13)};
+  ${css.size(12)};
+  margin-right: 2px;
 `

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

@@ -16,7 +16,7 @@ export const Wrapper = styled.div<TTag>`
   max-width: 180px;
   border-radius: 5px;
 
-  background: ${({ $active }) => (!$active ? 'transparent' : '#0e303d')};
+  background: ${({ $active }) => (!$active ? 'transparent' : theme('hoverBg'))};
 
   &:hover {
     background: ${theme('textBadge')}; // to-theme
@@ -69,21 +69,19 @@ export const Tag = styled.div<TTag>`
   width: 100%;
   font-size: 14px;
   padding-left: 4px;
-  color: ${({ color, $active }) =>
-    !$active ? theme('tags.text') : theme(`baseColor.${color.toLowerCase()}`)};
 
-  /* color: ${({ color }) => theme(`baseColor.${color.toLowerCase()}`)}; */
+  font-weight: ${({ $active }) => (!$active ? 'bold' : 'normal')};
 
   ${Wrapper}:hover & {
     cursor: pointer;
   }
 
   transition: all 0.1s;
 `
-export const Title = styled.div<THashSign>`
+export const Title = styled.div`
   letter-spacing: 1px;
   font-weight: 400;
-  color: ${({ color }) => theme(`baseColor.${color.toLowerCase()}`)};
+  color: ${theme('tags.text')};
   filter: saturate(0);
 
   ${Wrapper}:hover & {