coderplanets · mydearxym · Apr 3, 2021 · Apr 3, 2021 · Apr 3, 2021
diff --git a/src/components/Cards/JobCard.tsx b/src/components/Cards/JobCard.tsx
@@ -6,9 +6,9 @@ import React from 'react'
 import TimeAgo from 'timeago-react'
 
 import { ICON } from '@/config'
-import { buildLog } from '@/utils'
+import { buildLog, uid } from '@/utils'
 
-import { Space } from '@/components/Common'
+import { Space, SpaceGrow } from '@/components/Common'
 import IconText from '@/components/IconText'
 import Tooltip from '@/components/Tooltip'
 
@@ -19,17 +19,21 @@ import {
   Header,
   TeamScale,
   Title,
+  ShareIcon,
   Info,
   Sallery,
   Body,
   Footer,
-  Publisher,
-  Avatar,
   PublisherInfo,
   AuthorName,
   PublishExtra,
+  PublishTime,
+  TechstackWrapper,
+  TechTitle,
   TechKeywords,
   Keyword,
+  ImagesWrapper,
+  PreviewImage,
 } from './styles/job_card'
 
 /* eslint-disable-next-line */
@@ -46,11 +50,12 @@ type TProps = {
       title: string
       avatar: string
     }
+    images?: string[]
   }
 }
 
 const JobCard: React.FC<TProps> = ({
-  item: { title, body, author, insertedAt, commentsCount },
+  item: { title, body, author, insertedAt, commentsCount, images },
 }) => {
   const fakeCommunity = {
     id: '1',
@@ -67,39 +72,49 @@ const JobCard: React.FC<TProps> = ({
     <Wrapper>
       <Header>
         <Title>{title}</Title>
-        <TeamScale>10~15 人</TeamScale>
+        <ShareIcon src={`${ICON}/article/share.svg`} />
       </Header>
       <Info>
         <Sallery>成都</Sallery>
         <Sallery>前端</Sallery>
         <Sallery>15k-30k</Sallery>
+        <SpaceGrow />
+        <TeamScale>10~15 人</TeamScale>
       </Info>
       <Body>{body}</Body>
+      {images && (
+        <ImagesWrapper>
+          {images.map((imageSrc) => (
+            <PreviewImage key={uid.gen()} src={imageSrc} />
+          ))}
+        </ImagesWrapper>
+      )}
       <Footer>
-        <Publisher>
-          <Avatar src={author.avatar} />
-          <PublisherInfo>
-            <AuthorName>{author.title}</AuthorName>
-            <PublishExtra>
-              <IconText iconSrc={`${ICON}/edit/publish-pen.svg`}>
-                <TimeAgo datetime={insertedAt} locale="zh_CN" />
-              </IconText>
-              <Space right={10} />
-              <IconText iconSrc={`${ICON}/article/comment.svg`}>
-                {commentsCount}
-              </IconText>
-            </PublishExtra>
-          </PublisherInfo>
-        </Publisher>
-        <TechKeywords>
-          <Tooltip
-            content={<CommunityCard item={fakeCommunity} />}
-            placement="top"
-          >
-            <Keyword>React</Keyword>
-          </Tooltip>
-          <Keyword>TS</Keyword>
-        </TechKeywords>
+        <TechstackWrapper>
+          <TechTitle>技术栈</TechTitle>
+          <TechKeywords>
+            <Tooltip
+              content={<CommunityCard item={fakeCommunity} />}
+              placement="top"
+            >
+              <Keyword>React</Keyword>
+            </Tooltip>
+            <Keyword>TS</Keyword>
+          </TechKeywords>
+        </TechstackWrapper>
+
+        <PublisherInfo>
+          <AuthorName>{author.title}</AuthorName>
+          <PublishExtra>
+            <PublishTime>
+              <TimeAgo datetime={insertedAt} locale="zh_CN" />
+            </PublishTime>
+            <Space right={10} />
+            <IconText iconSrc={`${ICON}/article/comment.svg`} size="medium">
+              {commentsCount}
+            </IconText>
+          </PublishExtra>
+        </PublisherInfo>
       </Footer>
     </Wrapper>
   )

diff --git a/src/components/Cards/styles/job_card.ts b/src/components/Cards/styles/job_card.ts
@@ -7,12 +7,12 @@ import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   background: #08303e;
-  padding: 15px 20px;
+  padding: 24px 22px;
   width: auto;
   height: auto;
   min-width: 400px;
   margin-bottom: 30px;
-  border-radius: 4px;
+  border-radius: 10px;
 `
 export const Header = styled.div`
   ${css.flex('align-baseline', 'justify-between')};
@@ -21,6 +21,18 @@ export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 16px;
 `
+export const ShareIcon = styled(Img)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(13)};
+  margin-right: 4px;
+  opacity: 0;
+
+  ${Wrapper}:hover & {
+    opacity: 1;
+  }
+
+  transition: opacity 0.3s;
+`
 export const TeamScale = styled.div`
   color: ${theme('thread.articleDigest')};
   font-size: 12px;
@@ -41,26 +53,32 @@ export const Body = styled.div`
 `
 export const Footer = styled.div`
   width: 100%;
-  ${css.flex('align-center', 'justify-between')};
+  ${css.flex('align-end', 'justify-between')};
   margin-top: 20px;
 `
-export const Publisher = styled.div`
-  ${css.flex('align-center')};
-`
-export const Avatar = styled(Img)`
-  ${css.circle(22)};
-`
 export const PublisherInfo = styled.div`
-  ${css.flexColumn()};
-  margin-left: 14px;
+  ${css.flexColumn('align-end')};
 `
 export const AuthorName = styled.div`
   font-size: 14px;
-  color: ${theme('thread.articleTitle')};
+  color: ${theme('thread.articleDigest')};
+  margin-bottom: 3px;
 `
 export const PublishExtra = styled.div`
   ${css.flex('align-center')};
 `
+export const PublishTime = styled.div`
+  font-size: 11px;
+  color: ${theme('thread.articleDigest')};
+`
+export const TechstackWrapper = styled.div`
+  ${css.flexColumn()};
+`
+export const TechTitle = styled.div`
+  font-size: 11px;
+  color: ${theme('thread.articleDigest')};
+  margin-bottom: 2px;
+`
 export const TechKeywords = styled.div`
   ${css.flex('align-center')};
 `
@@ -74,3 +92,16 @@ export const Keyword = styled.a`
     cursor: pointer;
   }
 `
+export const ImagesWrapper = styled.div`
+  ${css.flex('align-center')};
+  width: 80%;
+  margin-top: 24px;
+  margin-bottom: 6px;
+`
+export const PreviewImage = styled(Img)`
+  width: auto;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-right: 12px;
+`
diff --git a/src/components/IconText/index.js → src/components/IconText/index.tsx b/src/components/IconText/index.js → src/components/IconText/index.tsx
@@ -5,9 +5,8 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
-import { values } from 'ramda'
 
+import type { TSIZE } from '@/spec'
 import { buildLog, nilOrEmpty } from '@/utils'
 import { SIZE } from '@/constant'
 
@@ -16,7 +15,21 @@ import { Wrapper, Icon, Text } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:IconText:index')
 
-const IconText = ({ iconSrc, round, children, size, margin }) => (
+type TProps = {
+  iconSrc: string
+  round?: boolean
+  children: React.ReactNode
+  size?: TSIZE
+  margin?: string
+}
+
+const IconText: React.FC<TProps> = ({
+  iconSrc,
+  round = false,
+  children,
+  size = SIZE.SMALL,
+  margin,
+}) => (
   <Wrapper testid="iconText">
     {!nilOrEmpty(iconSrc) && (
       <Icon src={iconSrc} size={size} round={round} margin={margin} />
@@ -25,19 +38,4 @@ const IconText = ({ iconSrc, round, children, size, margin }) => (
   </Wrapper>
 )
 
-IconText.propTypes = {
-  iconSrc: T.string,
-  round: T.bool,
-  children: T.oneOfType([T.node, T.string]).isRequired,
-  size: T.oneOf(values(SIZE)),
-  margin: T.oneOfType([T.string, T.instanceOf(null)]),
-}
-
-IconText.defaultProps = {
-  iconSrc: '',
-  round: false,
-  size: SIZE.SMALL,
-  margin: null,
-}
-
 export default React.memo(IconText)
diff --git a/src/components/IconText/styles/index.ts b/src/components/IconText/styles/index.ts
@@ -1,15 +1,15 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
+import type { TTestable, TSIZE } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 import { getIconSize, getTextSize, getMargin } from './metric'
 
 type TIcon = {
-  size: string
+  size: TSIZE
   margin: string
-  round: string
+  round: boolean
 }
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
@@ -25,7 +25,7 @@ export const Icon = styled(Img)<TIcon>`
   display: block;
   border-radius: ${({ round }) => (round ? '100%' : '0')};
 `
-export const Text = styled.div<{ size: string }>`
+export const Text = styled.div<{ size: TSIZE }>`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
   font-size: ${({ size }) => getTextSize(size)};

diff --git a/src/components/IconText/styles/metric.ts b/src/components/IconText/styles/metric.ts
@@ -1,8 +1,12 @@
+import type { TSIZE } from '@/spec'
 import { SIZE } from '@/constant'
 
-export const getIconSize = (size: string): string => {
+export const getIconSize = (size: TSIZE): string => {
   switch (size) {
     case SIZE.LARGE: {
+      return '14px'
+    }
+    case SIZE.MEDIUM: {
       return '13px'
     }
     case SIZE.TINY: {
@@ -17,7 +21,7 @@ export const getIconSize = (size: string): string => {
   }
 }
 
-export const getTextSize = (size: string): string => {
+export const getTextSize = (size: TSIZE): string => {
   switch (size) {
     case SIZE.LARGE: {
       return '15px'
@@ -31,11 +35,14 @@ export const getTextSize = (size: string): string => {
   }
 }
 
-export const getMargin = (size: string): string => {
+export const getMargin = (size: TSIZE): string => {
   switch (size) {
     case SIZE.LARGE: {
       return '8px'
     }
+    case SIZE.MEDIUM: {
+      return '5px'
+    }
     case SIZE.TINY: {
       return '2px'
     }

diff --git a/src/containers/thread/JobsThread/fakeFiltersItems.ts b/src/containers/thread/JobsThread/fakeFiltersItems.ts
@@ -63,7 +63,7 @@ const filtersItems = [
   },
   {
     id: '102',
-    title: '薪资待遇',
+    title: '月薪',
     icon: `${ICON_CMD}/navi/money-yuan.svg`,
 
     options: [
@@ -96,7 +96,7 @@ const filtersItems = [
   {
     // 非 IT，设计类的网站
     id: '103',
-    title: '规模',
+    title: '团队规模',
     icon: `${ICON_CMD}/navi/chair.svg`,
     options: [
       {

diff --git a/src/containers/thread/JobsThread/fakeJobItems.ts b/src/containers/thread/JobsThread/fakeJobItems.ts
@@ -1,3 +1,5 @@
+import { mockImages } from '@/utils'
+
 const fakeItems = [
   {
     id: '1',
@@ -10,6 +12,7 @@ const fakeItems = [
     },
     body:
       '美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习, 美团校招内推启动啦！！！内推的优势： 免简历筛选，直通笔试，更大概率被发起面试， 极大增加通过概率 !… ',
+    images: mockImages(2),
   },
   {
     id: '2',
@@ -34,6 +37,7 @@ const fakeItems = [
     },
     body:
       '岗位多样，开发，美术，市场，运营，产品，设计，财务，法律等。不卡学历！各类岗位面试难度一般，对学历无歧视，内推保证直通笔试面试，拿个保底offer吧各位',
+    images: mockImages(3),
   },
   {
     id: '4',
@@ -45,6 +49,7 @@ const fakeItems = [
       avatar: 'https://avatars.githubusercontent.com/u/809410?s=64&v=4',
     },
     body: '美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习',
+    images: mockImages(1),
   },
   {
     id: '5',

diff --git a/utils/index.ts b/utils/index.ts
@@ -143,3 +143,5 @@ export { Trans } from './i18n'
 export { default as GA } from './analytics'
 
 export { isMobile } from './device'
+
+export { mockImage, mockImages } from './mock'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -143,3 +143,5 @@ export { Trans } from './i18n'
		export { default as GA } from './analytics'

		export { isMobile } from './device'

		export { mockImage, mockImages } from './mock'