diff --git a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx index f80f257ec..3f6c62a80 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx +++ b/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 = ({ {article.title} - {article.id === '239' && } - {article.id === '231' && } + {article.id === '239' && } + {article.id === '231' && } {article.id === '227' && ( - + )} {article.id === '228' && ( - + )} {article.id === '226' && ( - + )} {article.id === '225' && ( - + )} diff --git a/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx b/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx index 52b3354ca..f25571c2f 100644 --- a/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx +++ b/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 = ({ metric = METRIC.ARTICLE, article }) => { )} */}
- {article.id === '239' && } - {article.id === '231' && } + {article.id === '239' && } + {article.id === '231' && } {article.id === '227' && ( - + )} {article.id === '228' && ( - + )} {article.id === '226' && ( - + )} {article.id === '225' && ( - + )}
diff --git a/src/containers/tool/ArticleSticker/CommentSticker.tsx b/src/containers/tool/ArticleSticker/CommentSticker.tsx index bdb412853..fc2a243b8 100644 --- a/src/containers/tool/ArticleSticker/CommentSticker.tsx +++ b/src/containers/tool/ArticleSticker/CommentSticker.tsx @@ -48,7 +48,7 @@ const CommentSticker: FC = ({ show, commentsState }) => { } + content={} > { {tmpItems.map((item) => ( ))} + 关于日志 ) } diff --git a/src/containers/unit/ArticleFooter/index.tsx b/src/containers/unit/ArticleFooter/index.tsx index c9edd353a..ab2cea36b 100755 --- a/src/containers/unit/ArticleFooter/index.tsx +++ b/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 = ({ - - setCat(key)} - /> -
Emoji
 diff --git a/src/containers/unit/ArticleFooter/styles/index.ts b/src/containers/unit/ArticleFooter/styles/index.ts index d28b1983c..149f7023c 100755 --- a/src/containers/unit/ArticleFooter/styles/index.ts +++ b/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; -` diff --git a/src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx b/src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx index 362edfdd1..a33859ecc 100644 --- a/src/containers/unit/ArticleFooter/styles/panel/activity_info/index.tsx +++ b/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` - 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; ` diff --git a/src/containers/unit/TagsBar/DesktopView/Folder.tsx b/src/containers/unit/TagsBar/DesktopView/Folder.tsx index 2a19173ff..3b03abc15 100644 --- a/src/containers/unit/TagsBar/DesktopView/Folder.tsx +++ b/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 = ({ > - <FolderTitle>{title}</FolderTitle> + <FolderTitle $isOpen={isFolderOpen}>{title}</FolderTitle> {!isFolderOpen && <Count>{sortedTags.length}</Count>} {!isFolderOpen && isActiveTagInFolder && ( diff --git a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts index c5f968d5a..79efd402e 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts +++ b/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; ` diff --git a/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx b/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx index f839973bf..7c5cdd917 100644 --- a/src/containers/viewer/ArticleViewer/PostViewer/FixedHeader.tsx +++ b/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 = ({ article, visible, footerVisible }) => { {article.title} - {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && ( - - )} + {article.id === '239' && } + {article.id === '231' && } + {article.id === '227' && } {article.id === '228' && ( - + )} {article.id === '226' && ( - - )} - {article.id === '225' && ( - + )} + {article.id === '225' && } diff --git a/src/containers/viewer/ArticleViewer/PostViewer/Header.tsx b/src/containers/viewer/ArticleViewer/PostViewer/Header.tsx index ec5b771bf..b15afba07 100644 --- a/src/containers/viewer/ArticleViewer/PostViewer/Header.tsx +++ b/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 = ({ article }) => { )} - {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && } - {article.id === '228' && } + {article.id === '239' && ( + + )} + {article.id === '231' && } + {article.id === '227' && ( + + )} + {article.id === '228' && ( + + )} {article.id === '226' && ( - + )} {article.id === '225' && ( - + )} ) diff --git a/src/containers/viewer/ArticleViewer/styles/post_viewer/header.ts b/src/containers/viewer/ArticleViewer/styles/post_viewer/header.ts index cd9e869fd..bc9a34d93 100644 --- a/src/containers/viewer/ArticleViewer/styles/post_viewer/header.ts +++ b/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: '('; diff --git a/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx b/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx index 47cd1e736..7f13818e0 100644 --- a/src/containers/viewer/ArticleViewer/styles/post_viewer/index.tsx +++ b/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; ` diff --git a/src/schemas/pages/post.ts b/src/schemas/pages/post.ts index e030f3e9d..e5c271a99 100755 --- a/src/schemas/pages/post.ts +++ b/src/schemas/pages/post.ts @@ -15,6 +15,9 @@ export const pagedPosts = ` ${F.article} meta { thread + latestUpvotedUsers { + ${F.author} + } } digest linkAddr diff --git a/src/spec/article.d.ts b/src/spec/article.d.ts index cf82c92d5..8271ab699 100644 --- a/src/spec/article.d.ts +++ b/src/spec/article.d.ts @@ -4,7 +4,6 @@ import type { TID } from './utils' import type { TEmotion } from './emotion' export type TCopyright = 'cc' | 'approve' | 'forbid' -export type TArticleCat = 'feature' | 'bug' | 'question' | 'other' export type TArticleMeta = { thread?: string diff --git a/src/spec/index.ts b/src/spec/index.ts index 61236e3a4..d2dc65b2f 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -77,8 +77,8 @@ export type { TEditMode, TOnlineStatus, TModelineType, - TASType, - TASState, + TArticleCat, + TArticleState, TTagMode, TMenuOption, TToastOption, @@ -109,7 +109,6 @@ export type { TPagedComments, TArticleFilter, TCopyright, - TArticleCat, TUpvoteLayout, TCommentsState, TWorksTab, diff --git a/src/spec/utils.d.ts b/src/spec/utils.d.ts index f9714b03d..5a865b8f4 100644 --- a/src/spec/utils.d.ts +++ b/src/spec/utils.d.ts @@ -184,8 +184,14 @@ export type TModelineType = | 'search' | 'more' -export type TASType = 'BUG' | 'FEATURE' | 'DEFAULT' | 'QUESTION' | 'LOCK' -export type TASState = 'TODO' | 'WIP' | 'DONE' | 'DEFAULT' | 'RESOLVE' | 'LOCK' +export type TArticleCat = 'BUG' | 'FEATURE' | 'DEFAULT' | 'QUESTION' | 'LOCK' +export type TArticleState = + | 'TODO' + | 'WIP' + | 'DONE' + | 'DEFAULT' + | 'RESOLVE' + | 'LOCK' export type TTagMode = 'default' | 'label' diff --git a/src/widgets/ArticleCatLabel/Label.tsx b/src/widgets/ArticleCatLabel/Label.tsx deleted file mode 100644 index 5319e53e8..000000000 --- a/src/widgets/ArticleCatLabel/Label.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { FC, memo } from 'react' - -import type { TArticleCat } from '@/spec' -import { Wrapper, Icon, Text } from './styles/label' - -type TProps = { - type?: TArticleCat -} - -const Label: FC = ({ type }) => { - switch (type) { - case 'feature': { - return ( - - - 功能建议 - - ) - } - - case 'bug': { - return ( - - - Bug / 吐槽 - - ) - } - - default: { - return ( - - - 问题 / 求助 - - ) - } - } -} - -export default memo(Label) diff --git a/src/widgets/ArticleCatLabel/index.tsx b/src/widgets/ArticleCatLabel/index.tsx deleted file mode 100644 index 6b75950fb..000000000 --- a/src/widgets/ArticleCatLabel/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* - * - * Copyright - * - */ - -import { FC, memo } from 'react' - -import type { TArticleCat } from '@/spec' -import Tooltip from '@/widgets/Tooltip' -import { buildLog } from '@/utils/logger' - -import Label from './Label' -import SettingMenu from '@/widgets/SettingMenu' -import { Wrapper } from './styles' - -/* eslint-disable-next-line */ -const log = buildLog('c:Copyright:index') - -const options = [ - { - title: '功能建议', - desc: '功能需求等建议和需求', - key: 'feature', - }, - { - title: 'Bug / 吐槽', - desc: '使用中遇到的 Bug，以及对于产品的吐槽 ', - key: 'bug', - }, - { - title: '问题 / 求助', - desc: '使用中遇到问题', - key: 'question', - }, -] - -type TProps = { - testid?: string - type?: TArticleCat - mode?: 'readonly' | 'editable' - onChange?: (type: string) => void -} - -const ArticleCatLabel: FC = ({ - testid = 'article-cat-label', - type = 'feature', - mode = 'readonly', - onChange = log, -}) => { - return ( - - - } - placement="top" - delay={800} - noPadding - > - - - ) -} - -export default memo(ArticleCatLabel) diff --git a/src/widgets/ArticleCatLabel/styles/index.ts b/src/widgets/ArticleCatLabel/styles/index.ts deleted file mode 100644 index ad9595aba..000000000 --- a/src/widgets/ArticleCatLabel/styles/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components' - -import type { TTestable } from '@/spec' - -import Img from '@/Img' -import css, { theme } from '@/utils/css' - -export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ - 'data-test-id': testid, -}))`` - -export const Label = styled.div` - ${css.flex('align-center')}; -` -export const Icon = styled(Img)` - ${css.size(14)}; - fill: ${theme('thread.articleDigest')}; -` -export const Text = styled.div` - font-size: 12px; - color: ${theme('thread.articleDigest')}; - margin-right: 5px; -` diff --git a/src/widgets/ArticleCatLabel/styles/label.ts b/src/widgets/ArticleCatLabel/styles/label.ts deleted file mode 100644 index b2571e089..000000000 --- a/src/widgets/ArticleCatLabel/styles/label.ts +++ /dev/null @@ -1,50 +0,0 @@ -import styled from 'styled-components' - -import css, { theme } from '@/utils/css' - -import LightSVG from '@/icons/Light' -import BugSVG from '@/icons/Bug' -import QuestionSVG from '@/icons/Question' - -export const Wrapper = styled.div` - ${css.flex('align-center')}; - cursor: pointer; -` -const icon = ` - ${css.size(12)}; - - ${Wrapper}:hover & { - fill: ${theme('thread.articleTitle')}; - } - - transition: fill 0.2s; -` -const Feature = styled(LightSVG)` - ${icon}; - fill: ${theme('thread.extraInfo')}; -` -const Bug = styled(BugSVG)` - ${icon}; - fill: ${theme('thread.extraInfo')}; -` -const Question = styled(QuestionSVG)` - ${icon}; - fill: ${theme('thread.extraInfo')}; -` - -export const Icon = { - Feature, - Bug, - Question, -} - -export const Text = styled.div` - font-size: 12px; - color: ${theme('thread.extraInfo')}; - margin-left: 6px; - - ${Wrapper}:hover & { - color: ${theme('thread.articleTitle')}; - } - transition: color 0.2s; -` diff --git a/src/widgets/ArticleCatState/Label.tsx b/src/widgets/ArticleCatState/Label.tsx new file mode 100644 index 000000000..c036621c4 --- /dev/null +++ b/src/widgets/ArticleCatState/Label.tsx @@ -0,0 +1,55 @@ +import { FC, memo } from 'react' + +import type { TProps as TArticleStateBadgeProps } from './index' + +import { ARTICLE_STATE, ARTICLE_CAT } from '@/constant' + +import { + Wrapper, + BugWrapper, + QuestionWrapper, + LockWrapper, + OtherWrapper, +} from './styles/label' + +type TProps = Pick< + TArticleStateBadgeProps, + 'type' | 'kanbanLayout' | 'smaller' | 'state' +> + +const Label: FC = ({ type, state, kanbanLayout, smaller }) => { + switch (type) { + case ARTICLE_CAT.FEATURE: { + return ( + + 功能建议 + + ) + } + + case ARTICLE_CAT.BUG: { + return ( + + Bug / 吐槽 + + ) + } + + case ARTICLE_CAT.QUESTION: { + if (state === ARTICLE_STATE.RESOLVE) { + return 已解决 + } + + return 问题 / 求助 + } + + case ARTICLE_CAT.LOCK: { + return 重复问题 + } + + default: + return 其它 + } +} + +export default memo(Label) diff --git a/src/widgets/ArticleCatState/State.tsx b/src/widgets/ArticleCatState/State.tsx new file mode 100644 index 000000000..96fbd9dea --- /dev/null +++ b/src/widgets/ArticleCatState/State.tsx @@ -0,0 +1,76 @@ +import { FC, memo } from 'react' + +import { ARTICLE_STATE } from '@/constant' + +import type { TProps as TArticleStateBadgeProps } from './index' + +import { + Wrapper, + NoBgWrapper, + WipIcon, + TODOIcon, + DoneIcon, + ResolveIcon, + LockIcon, + // + NoBgIcon, +} from './styles/state' + +type TProps = Pick + +const State: FC = ({ state, type, smaller }) => { + switch (state) { + case ARTICLE_STATE.DONE: { + return ( + + + + ) + } + + case ARTICLE_STATE.WIP: { + return ( + + + + ) + } + + case ARTICLE_STATE.TODO: { + return ( + + + + ) + } + + case ARTICLE_STATE.RESOLVE: { + return ( + + + + ) + } + + case ARTICLE_STATE.LOCK: { + return ( + + + + ) + } + + default: { + const Icon = NoBgIcon[type] + if (!Icon) return null + + return ( + + + + ) + } + } +} + +export default memo(State) diff --git a/src/widgets/ArticleCatState/index.tsx b/src/widgets/ArticleCatState/index.tsx new file mode 100644 index 000000000..3053534ef --- /dev/null +++ b/src/widgets/ArticleCatState/index.tsx @@ -0,0 +1,53 @@ +/* + * + * ArticleCatState + * + */ + +import { FC, memo } from 'react' + +import type { TSpace, TArticleCat, TArticleState } from '@/spec' +import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant' +import { buildLog } from '@/utils/logger' + +import State from './State' +import Label from './Label' + +import { Wrapper } from './styles' + +/* eslint-disable-next-line */ +const log = buildLog('c:ArticleCatState:index') + +export type TProps = { + testid?: string + type?: TArticleCat + state?: TArticleState + kanbanLayout?: boolean + smaller?: boolean + // size? +} & TSpace + +const ArticleCatState: FC = ({ + testid = 'article-cat-state', + type = ARTICLE_CAT.DEFAULT, + state = ARTICLE_STATE.DEFAULT, + kanbanLayout = false, + smaller = true, + ...restProps +}) => { + return ( + + {type && } + {type && ( + + ) +} + +export default memo(ArticleCatState) diff --git a/src/widgets/ArticleStateBadge/styles/index.ts b/src/widgets/ArticleCatState/styles/index.ts similarity index 100% rename from src/widgets/ArticleStateBadge/styles/index.ts rename to src/widgets/ArticleCatState/styles/index.ts diff --git a/src/widgets/ArticleCatState/styles/label.ts b/src/widgets/ArticleCatState/styles/label.ts new file mode 100644 index 000000000..0901d7389 --- /dev/null +++ b/src/widgets/ArticleCatState/styles/label.ts @@ -0,0 +1,55 @@ +import { theme } from '@/utils' +import styled from 'styled-components' + +import type { TArticleState } from '@/spec' +import { ARTICLE_STATE } from '@/constant' +import { isNoBgCase, getPadding } from './metric' +// import { theme } from '@/utils/css' + +type TWrapper = { + kanbanLayout: boolean + state: TArticleState + smaller: boolean +} + +export const Wrapper = styled.div` + color: ${({ state }) => + state === ARTICLE_STATE.DEFAULT + ? theme('thread.extraInfo') + : theme('gtdBadge.feat')}; + background-color: ${({ kanbanLayout, state }) => + isNoBgCase(kanbanLayout, state) ? 'transparent' : theme('gtdBadge.featBg')}; + padding: ${({ kanbanLayout, state, smaller }) => + getPadding(kanbanLayout, state, smaller)}|; + + font-weight: ${({ kanbanLayout, state }) => + isNoBgCase(kanbanLayout, state) ? 400 : 600}; + border-radius: ${({ kanbanLayout, state }) => + isNoBgCase(kanbanLayout, state) ? 0 : '6px'}; + font-size: 12px; +` +export const BugWrapper = styled(Wrapper)` + color: ${({ state }) => + state === ARTICLE_STATE.DEFAULT + ? theme('thread.extraInfo') + : theme('gtdBadge.bug')}; + background-color: ${({ kanbanLayout, state }) => + isNoBgCase(kanbanLayout, state) ? 'transparent' : theme('gtdBadge.bugBg')}; + /* font-size: 12px; */ +` +export const QuestionWrapper = styled.div<{ smaller: boolean }>` + color: ${theme('baseColor.green')}; + font-weight: 600; + font-size: ${({ smaller }) => (smaller ? '12px' : '13px')}; + margin-right: ${({ smaller }) => (smaller ? '0' : '6px')}; +` +export const LockWrapper = styled.div<{ smaller: boolean }>` + color: ${theme('thread.extraInfo')}; + font-size: ${({ smaller }) => (smaller ? '12px' : '14px')}; + margin-right: ${({ smaller }) => (smaller ? '0' : '6px')}; +` + +export const OtherWrapper = styled.div` + color: ${theme('thread.extraInfo')}; + font-size: 12px; +` diff --git a/src/widgets/ArticleCatState/styles/metric.ts b/src/widgets/ArticleCatState/styles/metric.ts new file mode 100644 index 000000000..1a0dc4d49 --- /dev/null +++ b/src/widgets/ArticleCatState/styles/metric.ts @@ -0,0 +1,19 @@ +import type { TArticleState } from '@/spec' +import { ARTICLE_STATE } from '@/constant' + +export const isNoBgCase = ( + kanbanLayout: boolean, + state: TArticleState, +): boolean => { + return kanbanLayout || state === ARTICLE_STATE.DEFAULT +} + +export const getPadding = ( + kanbanLayout: boolean, + state: TArticleState, + smaller: boolean, +): number | string => { + const padding = smaller ? '1px 4px 1px 6px;' : '3px 8px;' + + return isNoBgCase(kanbanLayout, state) ? 0 : padding +} diff --git a/src/widgets/ArticleCatState/styles/state.ts b/src/widgets/ArticleCatState/styles/state.ts new file mode 100644 index 000000000..60ef62ba9 --- /dev/null +++ b/src/widgets/ArticleCatState/styles/state.ts @@ -0,0 +1,80 @@ +import styled from 'styled-components' + +import type { TArticleCat } from '@/spec' +import { ARTICLE_CAT } from '@/constant' + +import css, { theme } from '@/utils/css' + +import GtdWipSVG from '@/icons/GtdWip' +import GtdDoneSVG from '@/icons/GtdDone' +import GtdTodoSVG from '@/icons/GtdTodo' +import ResolveSVG from '@/icons/Checked' +import LockSVG from '@/icons/Lock' + +import LightSVG from '@/icons/Light' +import BugSVG from '@/icons/Bug' +import QuestionSVG from '@/icons/Question' + +type TType = { type: TArticleCat; smaller: boolean } + +export const Wrapper = styled.div` + ${({ smaller }) => (smaller ? css.size(14) : css.size(18))}; + ${css.flex('align-both')}; + background: ${({ type }) => + type === ARTICLE_CAT.BUG + ? theme('gtdBadge.bugBg') + : theme('gtdBadge.featBg')}; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + margin-right: ${({ smaller }) => (smaller ? '-3px' : '-5px')}; +` +export const NoBgWrapper = styled.div` + margin-right: 2px; + ${css.flex('align-both')}; +` +export const WipIcon = styled(GtdWipSVG)` + ${({ smaller }) => (smaller ? css.size(7) : css.size(9))}; + fill: ${({ type }) => + type === ARTICLE_CAT.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; +` +export const DoneIcon = styled(GtdDoneSVG)` + ${({ smaller }) => (smaller ? css.size(8) : css.size(10))}; + fill: ${({ type }) => + type === ARTICLE_CAT.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; +` +export const TODOIcon = styled(GtdTodoSVG)` + ${({ smaller }) => (smaller ? css.size(8) : css.size(10))}; + fill: ${({ type }) => + type === ARTICLE_CAT.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; +` +export const ResolveIcon = styled(ResolveSVG)<{ smaller: boolean }>` + ${({ smaller }) => (smaller ? css.size(16) : css.size(18))}; + fill: ${theme('baseColor.green')}; +` +export const LockIcon = styled(LockSVG)<{ smaller: boolean }>` + ${({ smaller }) => (smaller ? css.size(11) : css.size(13))}; + fill: ${theme('thread.extraInfo')}; + margin-right: 3px; +` +const LightIcon = styled(LightSVG)` + ${css.size(12)}; + fill: ${theme('thread.extraInfo')}; +` + +const BugIcon = styled(BugSVG)` + ${css.size(12)}; + fill: ${theme('thread.extraInfo')}; + margin-right: 2px; +` +const QuestionIcon = styled(QuestionSVG)` + ${css.size(9)}; + fill: ${theme('thread.extraInfo')}; + margin-right: 2px; + margin-top: -1px; +` + +export const NoBgIcon = { + [ARTICLE_CAT.FEATURE]: LightIcon, + [ARTICLE_CAT.BUG]: BugIcon, + [ARTICLE_CAT.QUESTION]: QuestionIcon, +} diff --git a/src/widgets/ArticleCatLabel/tests/index.test.ts b/src/widgets/ArticleCatState/tests/index.test.ts similarity index 64% rename from src/widgets/ArticleCatLabel/tests/index.test.ts rename to src/widgets/ArticleCatState/tests/index.test.ts index 53890bb26..783c73b67 100644 --- a/src/widgets/ArticleCatLabel/tests/index.test.ts +++ b/src/widgets/ArticleCatState/tests/index.test.ts @@ -1,9 +1,9 @@ // import React from 'react' // import { shallow } from 'enzyme' -// import Copyright from '../index' +// import ArticleCatState from '../index' -describe('TODO ', () => { +describe('TODO ', () => { it('Expect to have unit tests specified', () => { expect(true).toEqual(true) }) diff --git a/src/widgets/ArticlePinLabel/index.tsx b/src/widgets/ArticlePinLabel/index.tsx index 682b4e179..f388cc5ad 100755 --- a/src/widgets/ArticlePinLabel/index.tsx +++ b/src/widgets/ArticlePinLabel/index.tsx @@ -15,12 +15,12 @@ const log = buildLog('c:ArticlePinLabel:index') export type TProps = { top?: number left?: number - entry: { + article: { isPinned?: boolean } } -const ArticlePinLabel: FC = ({ entry, top = 24, left = -30 }) => { - if (entry.isPinned) return +const ArticlePinLabel: FC = ({ article, top = 24, left = -30 }) => { + if (article.isPinned) return return null } diff --git a/src/widgets/ArticleReadLabel/ReadLabel.tsx b/src/widgets/ArticleReadLabel/ReadLabel.tsx index 37b9e3665..0e6e94f0e 100755 --- a/src/widgets/ArticleReadLabel/ReadLabel.tsx +++ b/src/widgets/ArticleReadLabel/ReadLabel.tsx @@ -4,14 +4,14 @@ import { useAccount } from '@/hooks' import { ReadedLabel } from './styles' import type { TProps } from './index' -const ReadLabel: FC = ({ entry, top, left }) => { +const ReadLabel: FC = ({ article, top, left }) => { const accountInfo = useAccount() const isLogin = !!accountInfo if (!isLogin) return null const { markViewed } = accountInfo.customization - const { viewerHasViewed } = entry + const { viewerHasViewed } = article if (markViewed && viewerHasViewed) { return diff --git a/src/widgets/ArticleReadLabel/index.tsx b/src/widgets/ArticleReadLabel/index.tsx index 0403eb39b..892b5c596 100755 --- a/src/widgets/ArticleReadLabel/index.tsx +++ b/src/widgets/ArticleReadLabel/index.tsx @@ -16,18 +16,18 @@ const log = buildLog('c:ArticleReadLabel:index') export type TProps = { top?: number left?: number - entry: { + article: { viewerHasViewed?: boolean - pin?: boolean + isPinned?: boolean } } -const ArticleReadLabel: FC = ({ entry, top = 24, left = -30 }) => { +const ArticleReadLabel: FC = ({ article, top = 24, left = -30 }) => { const accountInfo = useAccount() + const { isPinned, viewerHasViewed } = article - if (nilOrEmpty(accountInfo) || entry.pin) return null + if (nilOrEmpty(accountInfo) || isPinned) return null const { markViewed } = accountInfo.customization - const { viewerHasViewed } = entry // return if (markViewed && !viewerHasViewed) { diff --git a/src/widgets/ArticleStateBadge/Label.tsx b/src/widgets/ArticleStateBadge/Label.tsx deleted file mode 100644 index 82cceecdc..000000000 --- a/src/widgets/ArticleStateBadge/Label.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { FC, memo } from 'react' - -import type { TProps as TArticleStateBadgeProps } from './index' - -import { AS_TYPE } from '@/constant' - -import { - Wrapper, - BugWrapper, - QuestionWrapper, - LockWrapper, -} from './styles/label' - -type TProps = Pick< - TArticleStateBadgeProps, - 'type' | 'kanbanLayout' | 'articleInfoLayout' -> - -const Label: FC = ({ type, kanbanLayout, articleInfoLayout }) => { - switch (type) { - case AS_TYPE.FEATURE: { - return 功能建议 - } - - case AS_TYPE.BUG: { - return Bug/吐槽 - } - - case AS_TYPE.QUESTION: { - return ( - - 已解决 - - ) - } - - case AS_TYPE.LOCK: { - return ( - - 重复问题 - - ) - } - - default: - return null - } -} - -export default memo(Label) diff --git a/src/widgets/ArticleStateBadge/State.tsx b/src/widgets/ArticleStateBadge/State.tsx deleted file mode 100644 index d368447a4..000000000 --- a/src/widgets/ArticleStateBadge/State.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { FC, memo } from 'react' - -import { AS_STATE } from '@/constant' - -import type { TProps as TArticleStateBadgeProps } from './index' - -import { - Wrapper, - NoBgWrapper, - WipIcon, - TODOIcon, - DoneIcon, - ResolveIcon, - LockIcon, -} from './styles/state' - -type TProps = Pick< - TArticleStateBadgeProps, - 'state' | 'type' | 'articleInfoLayout' -> - -const State: FC = ({ state, type, articleInfoLayout }) => { - switch (state) { - case AS_STATE.DONE: { - return ( - - - - ) - } - - case AS_STATE.WIP: { - return ( - - - - ) - } - - case AS_STATE.TODO: { - return ( - - - - ) - } - - case AS_STATE.RESOLVE: { - return ( - - - - ) - } - - case AS_STATE.LOCK: { - return ( - - - - ) - } - - default: { - return null - } - } -} - -export default memo(State) diff --git a/src/widgets/ArticleStateBadge/index.tsx b/src/widgets/ArticleStateBadge/index.tsx deleted file mode 100644 index 1bbe4e58c..000000000 --- a/src/widgets/ArticleStateBadge/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * - * ArticleStateBadge - * - */ - -import { FC, memo } from 'react' - -import type { TSpace, TASType, TASState } from '@/spec' -import { AS_TYPE, AS_STATE } from '@/constant' -import { buildLog } from '@/utils/logger' - -import State from './State' -import Label from './Label' - -import { Wrapper } from './styles' - -/* eslint-disable-next-line */ -const log = buildLog('c:ArticleStateBadge:index') - -export type TProps = { - testid?: string - type?: TASType - state?: TASState - kanbanLayout?: boolean - articleInfoLayout?: boolean - // size? -} & TSpace - -const ArticleStateBadge: FC = ({ - testid = 'gtd-badge', - type = AS_TYPE.DEFAULT, - state = AS_STATE.DEFAULT, - kanbanLayout = false, - articleInfoLayout = false, - ...restProps -}) => { - return ( - - {type && ( - - )} - {type && ( - - ) -} - -export default memo(ArticleStateBadge) diff --git a/src/widgets/ArticleStateBadge/styles/label.ts b/src/widgets/ArticleStateBadge/styles/label.ts deleted file mode 100644 index 2e41ca0fd..000000000 --- a/src/widgets/ArticleStateBadge/styles/label.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { theme } from '@/utils' -import styled from 'styled-components' - -// import { theme } from '@/utils/css' - -export const Wrapper = styled.div<{ kanbanLayout: boolean }>` - color: ${theme('gtdBadge.feat')}; - background-color: ${({ kanbanLayout }) => - kanbanLayout ? 'transparent' : theme('gtdBadge.featBg')}; - padding: ${({ kanbanLayout }) => (kanbanLayout ? 0 : '2px 6px')}; - font-weight: ${({ kanbanLayout }) => (kanbanLayout ? 400 : 600)}; - border-radius: ${({ kanbanLayout }) => (kanbanLayout ? 0 : '6px')}; - border-radius: 6px; - font-size: 12px; -` -export const BugWrapper = styled(Wrapper)<{ kanbanLayout: boolean }>` - color: ${theme('gtdBadge.bug')}; - background-color: ${({ kanbanLayout }) => - kanbanLayout ? 'transparent' : theme('gtdBadge.bugBg')}; -` -export const QuestionWrapper = styled.div<{ articleInfoLayout: boolean }>` - color: ${theme('baseColor.green')}; - font-weight: 600; - font-size: ${({ articleInfoLayout }) => - articleInfoLayout ? '13px' : '12px'}; - margin-right: ${({ articleInfoLayout }) => (articleInfoLayout ? '0' : '6px')}; - margin-top: 2px; -` -export const LockWrapper = styled.div<{ articleInfoLayout: boolean }>` - color: ${theme('thread.extraInfo')}; - font-size: ${({ articleInfoLayout }) => - articleInfoLayout ? '14px' : '12px'}; - margin-right: ${({ articleInfoLayout }) => (articleInfoLayout ? '0' : '6px')}; - margin-top: 2px; -` diff --git a/src/widgets/ArticleStateBadge/styles/state.ts b/src/widgets/ArticleStateBadge/styles/state.ts deleted file mode 100644 index b80dbf8c8..000000000 --- a/src/widgets/ArticleStateBadge/styles/state.ts +++ /dev/null @@ -1,56 +0,0 @@ -import styled from 'styled-components' - -import type { TASType } from '@/spec' -import { AS_TYPE } from '@/constant' - -import css, { theme } from '@/utils/css' - -import GtdWipSVG from '@/icons/GtdWip' -import GtdDoneSVG from '@/icons/GtdDone' -import GtdTodoSVG from '@/icons/GtdTodo' -import ResolveSVG from '@/icons/Checked' -import LockSVG from '@/icons/Lock' - -type TType = { type: TASType } - -export const Wrapper = styled.div` - ${css.size(18)}; - ${css.flex('align-both')}; - background: ${({ type }) => - type === AS_TYPE.BUG ? theme('gtdBadge.bugBg') : theme('gtdBadge.featBg')}; - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - margin-right: -4px; -` -export const NoBgWrapper = styled.div` - margin-right: 2px; - ${css.flex('align-both')}; -` -export const WipIcon = styled(GtdWipSVG)` - ${css.size(9)}; - fill: ${({ type }) => - type === AS_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; -` -export const DoneIcon = styled(GtdDoneSVG)` - ${css.size(10)}; - fill: ${({ type }) => - type === AS_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; -` -export const TODOIcon = styled(GtdTodoSVG)` - ${css.size(10)}; - fill: ${({ type }) => - type === AS_TYPE.BUG ? theme('gtdBadge.bug') : theme('gtdBadge.feat')}; -` -export const ResolveIcon = styled(ResolveSVG)<{ articleInfoLayout: boolean }>` - ${({ articleInfoLayout }) => - articleInfoLayout ? css.size(18) : css.size(16)}; - fill: ${theme('baseColor.green')}; - margin-top: 1px; -` -export const LockIcon = styled(LockSVG)<{ articleInfoLayout: boolean }>` - ${({ articleInfoLayout }) => - articleInfoLayout ? css.size(13) : css.size(11)}; - fill: ${theme('thread.extraInfo')}; - margin-top: 1px; - margin-right: 2px; -` diff --git a/src/widgets/ArticleStateBadge/tests/index.test.ts b/src/widgets/ArticleStateBadge/tests/index.test.ts deleted file mode 100644 index 9f560a0be..000000000 --- a/src/widgets/ArticleStateBadge/tests/index.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -// import React from 'react' -// import { shallow } from 'enzyme' - -// import ArticleStateBadge from '../index' - -describe('TODO ', () => { - it('Expect to have unit tests specified', () => { - expect(true).toEqual(true) - }) -}) diff --git a/src/widgets/BlogItem/DesktopView/Body.tsx b/src/widgets/BlogItem/DesktopView/Body.tsx index f47405b46..384b93de2 100644 --- a/src/widgets/BlogItem/DesktopView/Body.tsx +++ b/src/widgets/BlogItem/DesktopView/Body.tsx @@ -47,7 +47,7 @@ const Body: FC = ({ item }) => { } + content={} placement="bottom-start" delay={500} > diff --git a/src/widgets/BlogItem/DesktopView/index.tsx b/src/widgets/BlogItem/DesktopView/index.tsx index e60a7892f..2e2853c8e 100644 --- a/src/widgets/BlogItem/DesktopView/index.tsx +++ b/src/widgets/BlogItem/DesktopView/index.tsx @@ -21,8 +21,8 @@ type TProps = { const DigestView: FC = ({ entry }) => { return ( - - + +
diff --git a/src/widgets/Buttons/styles/icon_button.ts b/src/widgets/Buttons/styles/icon_button.ts index 2ff26b52b..3fbfdf0b7 100644 --- a/src/widgets/Buttons/styles/icon_button.ts +++ b/src/widgets/Buttons/styles/icon_button.ts @@ -21,8 +21,8 @@ export const Wrapper = styled.div` margin-left: ${({ left }) => `${left || 0}px`}; margin-right: ${({ right }) => `${right || 0}px`}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` export const Content = styled.div` z-index: 2; diff --git a/src/widgets/Cards/UserCard.tsx b/src/widgets/Cards/UserCard.tsx index d5477a701..fa027581d 100644 --- a/src/widgets/Cards/UserCard.tsx +++ b/src/widgets/Cards/UserCard.tsx @@ -11,7 +11,7 @@ import { Wrapper, Avatar, Info, - ShortBio, + // ShortBio, Header, Title, Nickname, @@ -20,11 +20,11 @@ import { } from './styles/user_card' type TProps = { - item: TUser | TAccount + user: TUser | TAccount } -const UserCard: FC = ({ item }) => { - const { avatar, nickname, login, bio } = item +const UserCard: FC = ({ user }) => { + const { avatar, nickname, login, bio } = user return (
diff --git a/src/widgets/Common/index.ts b/src/widgets/Common/index.ts index 4f8204bae..76684d430 100755 --- a/src/widgets/Common/index.ts +++ b/src/widgets/Common/index.ts @@ -4,8 +4,8 @@ import type { TActive, TSpace } from '@/spec' import { theme } from '@/utils/css' export const Br = styled.div` - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` export const Space = styled.span` margin-left: ${({ left }) => `${left}px` || 0}; diff --git a/src/widgets/Facepile/RealAvatar.tsx b/src/widgets/Facepile/RealAvatar.tsx index e4fa0af2b..9c4965f79 100644 --- a/src/widgets/Facepile/RealAvatar.tsx +++ b/src/widgets/Facepile/RealAvatar.tsx @@ -33,7 +33,7 @@ const RealAvatar: FC = ({ return ( } + content={} delay={0} contentHeight={getAvatarSize(size, 'number') as string} placement={popCardPlacement} diff --git a/src/widgets/Header/DesktopView/ArticleLayout.tsx b/src/widgets/Header/DesktopView/ArticleLayout.tsx index 0264ca911..2f68cfbb0 100644 --- a/src/widgets/Header/DesktopView/ArticleLayout.tsx +++ b/src/widgets/Header/DesktopView/ArticleLayout.tsx @@ -43,7 +43,7 @@ const ArticleHeader: FC = ({ metric, community, accountInfo }) => { ) : ( } + content={} delay={0} placement="bottom" interactive={false} diff --git a/src/widgets/Icons/Light.tsx b/src/widgets/Icons/Light.tsx index c94b1b76b..47131ea6b 100644 --- a/src/widgets/Icons/Light.tsx +++ b/src/widgets/Icons/Light.tsx @@ -10,7 +10,7 @@ const Light = (props: SVGProps) => { height={200} {...props} > - + ) } diff --git a/src/widgets/JobItem/index.tsx b/src/widgets/JobItem/index.tsx index 7a800afab..afb670479 100755 --- a/src/widgets/JobItem/index.tsx +++ b/src/widgets/JobItem/index.tsx @@ -27,8 +27,8 @@ type TProps = { const JobItem: FC = ({ entry, c11n }) => { return ( - - + + ) diff --git a/src/widgets/KanbanItem/index.tsx b/src/widgets/KanbanItem/index.tsx index 5214c3088..afec6618f 100644 --- a/src/widgets/KanbanItem/index.tsx +++ b/src/widgets/KanbanItem/index.tsx @@ -11,7 +11,7 @@ import { mockUsers } from '@/utils/mock' import { UPVOTE_LAYOUT } from '@/constant' import IconButton from '@/widgets/Buttons/IconButton' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' +import ArticleCatState from '@/widgets/ArticleCatState' import Upvote from '@/widgets/Upvote' import TagsList from '@/widgets/TagsList' @@ -39,7 +39,7 @@ const KanbanItem: FC = ({ testid = 'gtd-item' }) => {
- 增加看板，发布日志，与常见问题的功能和其他 + 增加看板，更新日志，与常见问题的功能和其他 服务于团队开发流程，以社区服务为基础，提供反馈社区工具箱，各种个性化设置等等 @@ -49,9 +49,9 @@ const KanbanItem: FC = ({ testid = 'gtd-item' }) => { avatarList={mockUsers(3)} type={UPVOTE_LAYOUT.KANBAN} /> - - {/* */} - {/* */} + + {/* */} + {/* */} ) diff --git a/src/widgets/Linker/styles/index.ts b/src/widgets/Linker/styles/index.ts index 4ef275903..2ea6381a2 100755 --- a/src/widgets/Linker/styles/index.ts +++ b/src/widgets/Linker/styles/index.ts @@ -12,8 +12,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ align-items: center; margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` export const holder = 1 diff --git a/src/widgets/Loading/styles/article_content_loading.ts b/src/widgets/Loading/styles/article_content_loading.ts index cba09785c..161325016 100644 --- a/src/widgets/Loading/styles/article_content_loading.ts +++ b/src/widgets/Loading/styles/article_content_loading.ts @@ -5,8 +5,8 @@ import type { TSpace } from '@/spec' export const Wrapper = styled.div` margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` // Config-page: http://danilowoz.com/create-react-content-loader/ diff --git a/src/widgets/Loading/styles/lava_lamp_loading.ts b/src/widgets/Loading/styles/lava_lamp_loading.ts index 2a497c725..06ff2ad21 100644 --- a/src/widgets/Loading/styles/lava_lamp_loading.ts +++ b/src/widgets/Loading/styles/lava_lamp_loading.ts @@ -23,8 +23,8 @@ export const Wrapper = styled.div` height: 18px; margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; transform: ${({ size }) => getLavaLampScale(size)}; ` diff --git a/src/widgets/Navigator/MainEntries/DesktopView.tsx b/src/widgets/Navigator/MainEntries/DesktopView.tsx index 33faadd15..a08047101 100644 --- a/src/widgets/Navigator/MainEntries/DesktopView.tsx +++ b/src/widgets/Navigator/MainEntries/DesktopView.tsx @@ -36,7 +36,7 @@ const DesktopView: FC = () => { active={mainPath === ROUTE.COOL_GUIDE} testid={`header-${ROUTE.COOL_GUIDE}`} > - 发布日志 + 更新日志 {/* diff --git a/src/widgets/NoticeBar/styles/index.ts b/src/widgets/NoticeBar/styles/index.ts index 8daa0cd81..942f47ed6 100755 --- a/src/widgets/NoticeBar/styles/index.ts +++ b/src/widgets/NoticeBar/styles/index.ts @@ -25,8 +25,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ background: ${({ noBg }) => (noBg ? 'transparent' : '#FDF6E8')}; border-radius: 8px; - margin-top: ${({ top }) => `${top || 0}px`}; - margin-bottom: ${({ bottom }) => `${bottom || 0}px`}; + margin-top: ${({ top }) => `${top}px` || 0}; + margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; ` diff --git a/src/widgets/PagedArticles/ArticleList.tsx b/src/widgets/PagedArticles/ArticleList.tsx index 6fa754f7d..9caff4015 100755 --- a/src/widgets/PagedArticles/ArticleList.tsx +++ b/src/widgets/PagedArticles/ArticleList.tsx @@ -70,7 +70,7 @@ const ArticleList = (props) => { {entries.map((entry) => ( diff --git a/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx new file mode 100644 index 000000000..64952a3f1 --- /dev/null +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/ActiveBadge.tsx @@ -0,0 +1,45 @@ +import { FC, memo } from 'react' +import TimeAgo from 'timeago-react' + +import type { TArticle } from '@/spec' +import { SVG } from '@/constant' +import IconButton from '@/widgets/Buttons/IconButton' +import ReadableDate from '@/widgets/ReadableDate' + +import { + Wrapper, + Hint, + TimeStr, +} from '../../styles/comment_fist_layout/desktop_view/active_badge' + +type TProps = { + article: TArticle +} + +const ActiveBadge: FC = ({ article }) => { + const isArchived = article.commentsCount === 24 + const icon = isArchived ? SVG.ARCHIVED : SVG.ACTIVITY + + return ( + 0}> + +
最后回复时间:
+ + + + + } + right={6} + hintPlacement="bottom" + hintDelay={0} + /> + + + ) +} + +export default memo(ActiveBadge) diff --git a/src/widgets/PostItem/DesktopView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx similarity index 54% rename from src/widgets/PostItem/DesktopView/Body.tsx rename to src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx index be19c8bb5..45a56bd9e 100644 --- a/src/widgets/PostItem/DesktopView/Body.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Body.tsx @@ -1,5 +1,6 @@ import { FC, Fragment } from 'react' import dynamic from 'next/dynamic' +import { includes } from 'ramda' import TimeAgo from 'timeago-react' import Link from 'next/link' @@ -9,15 +10,17 @@ import { EVENT } from '@/constant' import { send, changeToCommunity } from '@/utils/helper' import { Space, SpaceGrow } from '@/widgets/Common' -import DigestSentence from '@/widgets/DigestSentence' // import CommunityCard from '@/widgets/Cards/CommunityCard' // import UserCard from '@/widgets/Cards/UserCard' import Tooltip from '@/widgets/Tooltip' -import ArticleStateBadge from '@/widgets/ArticleStateBadge' -import ViewsCount from './ViewsCount' +import ArticleCatState from '@/widgets/ArticleCatState' +import ViewsCount from '../../ViewsCount' +import CommentsCount from '../../CommentsCount' import { Wrapper, + Digest, + Footer, Dot, PublishTime, Extra, @@ -26,7 +29,7 @@ import { LabelDivider, AuthorName, ArticleStateBadgeWrapper, -} from '../styles/desktop_view/body' +} from '../../styles/comment_fist_layout/desktop_view/body' const CommunityCard = dynamic(() => import('@/widgets/Cards/CommunityCard'), { ssr: false, @@ -42,15 +45,16 @@ const ActiveBadge = dynamic(() => import('./ActiveBadge'), { type TProps = { curCommunity: TCommunity | null - item: TPost + article: TPost } -const Body: FC = ({ item, curCommunity }) => { +const Body: FC = ({ article, curCommunity }) => { // console.log('# originalCommunity: ', originalCommunity) - const { originalCommunity, author } = item + const { originalCommunity, author } = article const showOriginalCommunity = curCommunity === null || curCommunity.raw !== originalCommunity.raw + const demoList = ['239', '231', '227', '228', '226', '225'] return ( @@ -59,7 +63,7 @@ const Body: FC = ({ item, curCommunity }) => { } + content={} placement="right" delay={1500} > @@ -75,7 +79,7 @@ const Body: FC = ({ item, curCommunity }) => { } + content={} placement="right" delay={500} > @@ -88,36 +92,46 @@ const Body: FC = ({ item, curCommunity }) => { - + - - {/* @ts-ignore */} - - - {item.id === '239' && } - {item.id === '231' && } - {item.id === '227' && } - {item.id === '228' && ( - - )} - {item.id === '226' && ( - - )} - {item.id === '225' && } - + - send(EVENT.PREVIEW_ARTICLE, { article: item })} - > - {item.digest} - + send(EVENT.PREVIEW_ARTICLE, { article })}> + {article.digest} + +
+ {!includes(article.id, demoList) ? ( + + ) : ( + + {article.id === '239' && } + {article.id === '231' && } + {article.id === '227' && ( + + )} + {article.id === '228' && ( + + )} + {article.id === '226' && ( + + )} + {article.id === '225' && ( + + )} + + )} + + + + {article.commentsCount !== 0 && ( + + )} +
) } diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx similarity index 60% rename from src/widgets/PostItem/DesktopView/Header.tsx rename to src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx index 1b561c75e..15ea08f2a 100644 --- a/src/widgets/PostItem/DesktopView/Header.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/Header.tsx @@ -13,33 +13,33 @@ import { Brief, Title, AvatarsWrapper, -} from '../styles/desktop_view/header' +} from '../../styles/comment_fist_layout/desktop_view/header' const TagsList = dynamic(() => import('@/widgets/TagsList'), { ssr: false, }) type TProps = { - item: TPost + article: TPost } -const Header: FC = ({ item }) => { +const Header: FC = ({ article }) => { // const gotoArticle = useCallback(() => { - // Router.push(`/${ARTICLE_THREAD.POST}/${item.id}`) - // }, [item.id]) + // Router.push(`/${ARTICLE_THREAD.POST}/${article.id}`) + // }, [article.id]) return ( - {/* send(EVENT.PREVIEW_ARTICLE, { article: item })}> */} - <Title onClick={() => callWallpaperEditor()}>{item.title} + {/* send(EVENT.PREVIEW_ARTICLE, { article: article })}> */} + <Title onClick={() => callWallpaperEditor()}>{article.title} {/* @ts-ignore */} - + diff --git a/src/widgets/PostItem/DesktopView/index.tsx b/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx similarity index 73% rename from src/widgets/PostItem/DesktopView/index.tsx rename to src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx index cd2f356b7..6279471f6 100644 --- a/src/widgets/PostItem/DesktopView/index.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/DesktopView/index.tsx @@ -6,7 +6,7 @@ import { UPVOTE_LAYOUT } from '@/constant' import { upvoteOnArticleList } from '@/utils/helper' import TheAvatar from '@/widgets/TheAvatar' -import ViewingSign from './ViewingSign' +import ViewingSign from '../../ViewingSign' import Header from './Header' import Body from './Body' @@ -16,7 +16,7 @@ import { AvatarWrapper, UpvoteWrapper, Main, -} from '../styles/desktop_view' +} from '../../styles/comment_fist_layout/desktop_view' let Upvote = null let ArticleReadLabel = null @@ -24,13 +24,13 @@ let ArticlePinLabel = null type TProps = { curCommunity: TCommunity | null - entry: TPost + article: TPost // onUserSelect?: (obj: TUser) => void // onAuthorSelect?: (obj: TAccount) => void } -const DigestView: FC = ({ curCommunity, entry }) => { +const DigestView: FC = ({ curCommunity, article }) => { const [loaded, setLoaded] = useState(false) // 如果同步渲染 Upvote, ArticleReadLabel, ArticlePinLabel 等组件会导致难以忍受的卡顿 @@ -54,29 +54,29 @@ const DigestView: FC = ({ curCommunity, entry }) => { {loaded && ( - - + + )} - + - + {loaded && ( - upvoteOnArticleList(entry, viewerHasUpvoted) + upvoteOnArticleList(article, viewerHasUpvoted) } /> )}
-
- +
+
) diff --git a/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx new file mode 100644 index 000000000..b1ad8b35b --- /dev/null +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Body.tsx @@ -0,0 +1,37 @@ +import { FC, memo, useCallback } from 'react' +import Router from 'next/router' + +import type { TPost } from '@/spec' +import { parseDomain } from '@/utils/route' +import { ARTICLE_THREAD } from '@/constant' + +import { + Wrapper, + TitleLink, + LinkIcon, + Title, +} from '../../styles/comment_fist_layout/mobile_view/body' + +type TProps = { + article: TPost +} + +const Body: FC = ({ article }) => { + const gotoArticle = useCallback(() => { + Router.push(`/${ARTICLE_THREAD.POST}/${article.id}`) + }, [article.id]) + + return ( + + {article.title} + {article.linkAddr && ( + + + {parseDomain(article.linkAddr)} + + )} + + ) +} + +export default memo(Body) diff --git a/src/widgets/PostItem/MobileView/Footer.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx similarity index 78% rename from src/widgets/PostItem/MobileView/Footer.tsx rename to src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx index 89001797b..de966a33e 100644 --- a/src/widgets/PostItem/MobileView/Footer.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Footer.tsx @@ -13,15 +13,15 @@ import { ExtraIcon, ExtraTexts, BodyDigest, -} from '../styles/mobile_view/footer' +} from '../../styles/comment_fist_layout/mobile_view/footer' type TProps = { - item: TPost + article: TPost curCommunity: TCommunity } -const Footer: FC = ({ item, curCommunity }) => { - const { originalCommunity } = item +const Footer: FC = ({ article, curCommunity }) => { + const { originalCommunity } = article const showOriginalCommunity = curCommunity === null || curCommunity?.raw !== originalCommunity.raw @@ -40,13 +40,13 @@ const Footer: FC = ({ item, curCommunity }) => { - {item.views} + {article.views} - {item.commentsCount} + {article.commentsCount} - {cutRest(item.digest, 20)} + {cutRest(article.digest, 20)} ) } diff --git a/src/widgets/PostItem/MobileView/Header.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx similarity index 59% rename from src/widgets/PostItem/MobileView/Header.tsx rename to src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx index c2bcef2d2..052a22aa7 100644 --- a/src/widgets/PostItem/MobileView/Header.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/Header.tsx @@ -14,31 +14,31 @@ import { AuthorInfo, TimeStamp, TagListWrapper, -} from '../styles/mobile_view/header' +} from '../../styles/comment_fist_layout/mobile_view/header' type TProps = { - item: TPost + article: TPost onAuthorSelect?: (obj: TAccount) => void } -const Header: FC = ({ item, onAuthorSelect }) => { +const Header: FC = ({ article, onAuthorSelect }) => { return ( - onAuthorSelect(item.author)}> + onAuthorSelect(article.author)}> } + src={article.author.avatar} + fallback={} /> -
{item.author.nickname}
+
{article.author.nickname}
- + - + ) diff --git a/src/widgets/PostItem/MobileView/index.tsx b/src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx similarity index 51% rename from src/widgets/PostItem/MobileView/index.tsx rename to src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx index 292d33933..8e7d92fd3 100644 --- a/src/widgets/PostItem/MobileView/index.tsx +++ b/src/widgets/PostItem/CommentFirstLayout/MobileView/index.tsx @@ -6,20 +6,20 @@ import Header from './Header' import Body from './Body' import Footer from './Footer' -import { Wrapper } from '../styles/mobile_view' +import { Wrapper } from '../../styles/comment_fist_layout/mobile_view' type TProps = { - entry: TPost + article: TPost curCommunity: TCommunity | null onAuthorSelect?: (obj: TAccount) => void } -const MobileView: FC = ({ entry, curCommunity, onAuthorSelect }) => { +const MobileView: FC = ({ article, curCommunity, onAuthorSelect }) => { return ( -
- -