refactor(upvote): new upvote active style & re-org

src/containers/content/LandingPage/EnjoyDev/UpdateBtn.tsx

@@ -29,7 +29,7 @@ const UpdateBtn: FC<TProps> = ({ text = '投票', num = 13, delay, dividerColor,
       <UpvoteIcon color={mainColor} />
       <Text color={mainColor}>{text}</Text>
       <Num>
-        <AnimatedCount count={count} color={mainColor} />
+        <AnimatedCount count={count} />
       </Num>
     </Wrapper>
   )

src/spec/theme.d.ts

@@ -11,6 +11,8 @@ export type TThemeMap = {
     category: string // TODO: 'dark' | 'light'
   }
   htmlBg?: string
+  link?: string
+  blackActive?: string
   alphaBg?: string
   rainbow?: {
     red: string

src/widgets/AnimatedCount/AnimatedCount.tsx

@@ -1,6 +1,9 @@
 import { FC, memo } from 'react'
 
+import type { TThemeName, TThemeMap, TColorName } from '@/spec'
 import SIZE from '@/constant/size'
+import { COLOR_NAME } from '@/constant/colors'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import useTheme from '@/hooks/useTheme'
 
 import FlipNumbers from 'react-flip-numbers'
@@ -9,22 +12,29 @@ import type { TProps } from '.'
 import { Wrapper } from './styles'
 import { getFontSize, getFlipNumOffset } from './styles/metric'
 
-const AnimatedCount: FC<TProps> = ({
-  count = 0,
-  size = SIZE.SMALL,
-  active = false,
-  color = '',
-}) => {
+const getCountColor = (active: boolean, themeMap: TThemeMap, primaryColor: TColorName): string => {
+  if (primaryColor === COLOR_NAME.BLACK) {
+    return themeMap.blackActive
+  }
+
+  return active ? themeMap.rainbow[primaryColor.toLowerCase()] : themeMap.article.digest
+}
+
+const AnimatedCount: FC<TProps> = ({ count = 0, size = SIZE.SMALL, $active = false }) => {
+  const primaryColor = usePrimaryColor()
+  const { themeMap } = useTheme()
+
   const numSize = getFontSize(size)
   const offset = getFlipNumOffset(size)
-  const { themeMap } = useTheme()
+
+  const countColor = getCountColor($active, themeMap, primaryColor)
 
   return (
-    <Wrapper $active={active} count={count}>
+    <Wrapper $active={$active} count={count} key={countColor}>
       <FlipNumbers
         height={numSize}
         width={numSize - offset}
-        color={color || themeMap.article.info}
+        color={countColor}
         perspective={400}
         duration={0.8}
         numbers={String(count)}

src/widgets/AnimatedCount/index.tsx

@@ -1,10 +1,13 @@
 import { FC, memo } from 'react'
 
-import type { TSize } from '@/spec'
+import type { TActive, TSize } from '@/spec'
+
 import SIZE from '@/constant/size'
-import { Wrapper } from './styles'
 
 import AnimatedCount from './AnimatedCount'
+
+import { Wrapper } from './styles'
+
 // @ts-ignore
 // const LoadingValueContext = createContext()
 
@@ -31,14 +34,12 @@ import AnimatedCount from './AnimatedCount'
 export type TProps = {
   count?: number
   size?: TSize
-  active?: boolean
-  color?: string
-}
+} & TActive
 
-const Count: FC<TProps> = ({ count = 0, size = SIZE.SMALL, active = false, color = '' }) => {
+const Count: FC<TProps> = ({ count = 0, size = SIZE.SMALL, $active = false }) => {
   return (
-    <Wrapper $active={active} count={count}>
-      <AnimatedCount count={count} size={size} active={active} color={color} />
+    <Wrapper $active={$active} count={count}>
+      <AnimatedCount count={count} size={size} $active={$active} />
     </Wrapper>
     // <LoadingValueContext.Provider value={{ count, size, active }}>
     //   <AnimatedCount count={count} size={size} active={active} />

src/widgets/AnimatedCount/styles/index.ts

@@ -7,6 +7,7 @@ type TWrapper = { count: number } & TActive
 export const Wrapper = styled.div<TWrapper>`
   font-weight: ${({ count }) => (count > 0 ? 500 : 400)};
   opacity: ${({ count }) => (count === 0 ? 0.85 : 1)};
-  filter: brightness(1.2);
+  /* filter: brightness(1.2); */
+  color: tomato;
 `
 export const holder = 1

src/widgets/Article/Post/SideInfo.tsx

@@ -5,6 +5,8 @@ import type { TPost } from '@/spec'
 import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant/gtd'
 import { AVATAR_LAYOUT } from '@/constant/layout'
 
+import { mockUsers } from '@/mock'
+
 import { Br } from '@/widgets/Common'
 import Upvote from '@/widgets/Upvote'
 import ArticleCatState from '@/widgets/ArticleCatState'
@@ -31,12 +33,14 @@ const SideInfo: FC<TProps> = ({ article }) => {
   const { insertedAt, articleTags, upvotesCount, meta, viewerHasUpvoted } = article
   const { latestUpvotedUsers } = meta
 
+  const users = mockUsers(5)
+
   return (
     <Wrapper>
       <InnerWrapper>
         <Upvote
           count={upvotesCount}
-          avatarList={meta.latestUpvotedUsers}
+          avatarList={users}
           viewerHasUpvoted={viewerHasUpvoted}
           type="article"
           bottom={35}

src/widgets/ColorSelector/index.tsx

@@ -46,6 +46,7 @@ const ColorSelector: FC<TProps> = ({
     <Tooltip
       placement={placement}
       trigger="click"
+      hideOnClick={false}
       offset={offset}
       content={
         <Wrapper testid={testid}>

src/widgets/Share/index.tsx

@@ -20,7 +20,7 @@ import useViewingArticle from '@/hooks/useViewingArticle'
 import Tooltip from '@/widgets/Tooltip'
 import { toast } from '@/signal'
 
-import { SITE_SHARE_TYPE } from './constant'
+import { SITE_SHARE_TYPE, SHARE_TYPE } from './constant'
 import { parseLinksData, toPlatform } from './helper'
 import { Wrapper, Panel, LinkTip, QRTip, Icon } from './styles'
 
@@ -62,13 +62,21 @@ const Share: FC<TProps> = ({ modalOffset = '', ...restProps }) => {
           <Panel>
             <QRCode value={articleLink} size={120} />
 
-            <QRTip>打开自带扫一扫，即可将本内容分享到应用</QRTip>
+            <QRTip>打开微信 &gt; 发现 &gt; 扫一扫，即可将本文分享到微信。</QRTip>
           </Panel>
         }
         placement="bottom"
         delay={200}
       >
-        <Icon.QRCode />
+        <Icon.WeChat />
+      </Tooltip>
+
+      <Tooltip content={<LinkTip>分享到微博</LinkTip>} placement="bottom" delay={500}>
+        <Icon.Weibo
+          onClick={() => {
+            toPlatform(article, SHARE_TYPE.WEIBO, articleLink)
+          }}
+        />
       </Tooltip>
 
       <Tooltip content={<LinkTip>更多分享</LinkTip>} placement="bottom" delay={500}>

src/widgets/Share/styles/index.ts

@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import LinkSVG from '@/icons/Link'
 import QRCodeSVG from '@/icons/QRCodeSolid'
 import MoreSVG from '@/icons/ShareArrow'
+import WeiboRawSVG from '@/icons/social/WeiboRaw'
+import WeChatRawSVG from '@/icons/social/WeChatRaw'
 
 import { WithMargin } from '@/widgets/Common'
 
@@ -31,7 +33,7 @@ const commonIcon = (comp) => {
   return styled(comp)`
     ${css.size(18)};
     fill: ${theme('hint')};
-    opacity: 0.65;
+    opacity: 0.85;
     margin-left: 15px;
     cursor: pointer;
 
@@ -50,4 +52,8 @@ export const Icon = {
   `,
   More: commonIcon(MoreSVG),
   QRCode: commonIcon(QRCodeSVG),
+  WeChat: commonIcon(WeChatRawSVG),
+  Weibo: styled(commonIcon(WeiboRawSVG))`
+    margin-top: -3px;
+  `,
 }

src/widgets/Upvote/ArticleLayout.tsx

@@ -9,10 +9,11 @@ import { FC, memo } from 'react'
 import { buildLog } from '@/logger'
 
 import usePrimaryColor from '@/hooks/usePrimaryColor'
-import useTheme from '@/hooks/useTheme'
 import AnimatedCount from '@/widgets/AnimatedCount'
 
-import { Wrapper, Button, UpvoteIcon, CountWrapper, Alias } from './styles/article_layout'
+import useUpvote from './useUpvote'
+import UpvoteBtn from './UpvoteBtn'
+import { Wrapper, Button, CountWrapper, Alias } from './styles/article_layout'
 
 /* eslint-disable-next-line */
 const log = buildLog('w:Upvote:index')
@@ -31,17 +32,18 @@ const Upvote: FC<TProps> = ({
   onAction = log,
 }) => {
   const primaryColor = usePrimaryColor()
-  const { themeMap } = useTheme()
-  const numColor = themeMap.rainbow[primaryColor.toLowerCase()]
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
 
   return (
     <Wrapper testid={testid}>
-      <Button color={primaryColor}>
-        <UpvoteIcon color={primaryColor} />
+      <Button color={primaryColor} $active={viewerHasUpvoted} onClick={handleClick}>
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
         <CountWrapper>
-          <AnimatedCount count={count} active={viewerHasUpvoted} size="medium" color={numColor} />
+          <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
         </CountWrapper>
-        <Alias color={primaryColor}>票</Alias>
+        <Alias color={primaryColor} $active={viewerHasUpvoted}>
+          票
+        </Alias>
       </Button>
     </Wrapper>
   )

src/widgets/Upvote/CommentLayout.tsx

@@ -8,8 +8,11 @@ import { FC, memo } from 'react'
 
 import { buildLog } from '@/logger'
 
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { UPVOTE_LAYOUT } from '@/constant/layout'
 import AnimatedCount from '@/widgets/AnimatedCount'
+
+import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
 
 import { Wrapper, Button, Alias, UpWrapper, CountWrapper } from './styles/comment_layout'
@@ -32,21 +35,26 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = log,
 }) => {
+  const primaryColor = usePrimaryColor()
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+
   return (
     <Wrapper testid={testid}>
-      <Button>
+      <Button color={primaryColor} $active={viewerHasUpvoted} onClick={handleClick}>
         <UpWrapper>
           <UpvoteBtn
             type={UPVOTE_LAYOUT.COMMENT}
             viewerHasUpvoted={viewerHasUpvoted}
-            onAction={onAction}
+            startAnimate={startAnimate}
             count={count}
           />
         </UpWrapper>
-        <Alias>{alias}</Alias>
+        <Alias color={primaryColor} $active={viewerHasUpvoted}>
+          {alias}
+        </Alias>
         {count !== 0 && (
           <CountWrapper>
-            <AnimatedCount count={count} active={viewerHasUpvoted} size="small" />
+            <AnimatedCount count={count} $active={viewerHasUpvoted} size="small" />
           </CountWrapper>
         )}
       </Button>

src/widgets/Upvote/DefaultLayout.tsx

@@ -8,8 +8,10 @@ import { FC } from 'react'
 import type { TUser } from '@/spec'
 import { buildLog } from '@/logger'
 
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import Facepile from '@/widgets/Facepile'
 
+import useUpvote from './useUpvote'
 import AnimatedCount from '../AnimatedCount'
 import UpvoteBtn from './UpvoteBtn'
 
@@ -43,16 +45,23 @@ const Upvote: FC<TProps> = ({
   onAction = log,
   avatarList,
 }) => {
+  const primaryColor = usePrimaryColor()
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+
   const noOne = count === 0
 
   return (
     <Wrapper testid={testid}>
-      <Button>
+      <Button $active={viewerHasUpvoted} color={primaryColor} onClick={handleClick}>
         <UpvoteBtnWrapper>
-          <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
+          <UpvoteBtn
+            viewerHasUpvoted={viewerHasUpvoted}
+            count={count}
+            startAnimate={startAnimate}
+          />
         </UpvoteBtnWrapper>
         <Count>
-          <AnimatedCount count={count} active={viewerHasUpvoted} size="medium" />
+          <AnimatedCount count={count} $active={viewerHasUpvoted} size="medium" />
         </Count>
       </Button>
       {!noOne && (

src/widgets/Upvote/FixedHeaderLayout.tsx

@@ -10,6 +10,7 @@ import { buildLog } from '@/logger'
 
 import { Space } from '@/widgets/Common'
 
+import useUpvote from './useUpvote'
 import UpvoteBtn from './UpvoteBtn'
 
 import { Wrapper, UpvoteBtnWrapper, Count } from './styles/fixed_header_layout'
@@ -30,12 +31,14 @@ const Upvote: FC<TProps> = ({
   viewerHasUpvoted = false,
   onAction = log,
 }) => {
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
+
   const noOne = count === 0
 
   return (
-    <Wrapper testid={testid}>
+    <Wrapper testid={testid} onClick={handleClick}>
       <UpvoteBtnWrapper>
-        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
       </UpvoteBtnWrapper>
       <Space right={2} />
       <Count noOne={noOne}>{count}</Count>

src/widgets/Upvote/GeneralLayout.tsx

@@ -12,6 +12,7 @@ import { buildLog } from '@/logger'
 import Facepile from '@/widgets/Facepile'
 import { DesktopOnly } from '@/widgets/Common'
 
+import useUpvote from './useUpvote'
 import AnimatedCount from '../AnimatedCount'
 import UpvoteBtn from './UpvoteBtn'
 
@@ -35,16 +36,17 @@ const Upvote: FC<TProps> = ({
   onAction = log,
   avatarList,
 }) => {
+  const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction })
   const noOne = count === 0
 
   return (
     <Wrapper testid={testid}>
-      <UpvoteBtnWrapper>
-        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} onAction={onAction} count={count} />
+      <UpvoteBtnWrapper onClick={handleClick}>
+        <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} count={count} startAnimate={startAnimate} />
       </UpvoteBtnWrapper>
       <AnimatedCount
         count={count}
-        active={viewerHasUpvoted}
+        $active={viewerHasUpvoted}
         size={count === 0 ? 'small' : 'medium'}
       />
       <DesktopOnly>{!noOne && <LineDivider />}</DesktopOnly>