Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 92373a7

Browse files
mydearxymmydearxym
authored
refactor(cool-guide): redesign cover content, UI (#1050)
1 parent 534a284 commit 92373a7

File tree

10 files changed

+216
-26
lines changed

10 files changed

+216
-26
lines changed

‎src/components/Buttons/ArrowButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ type TProps = {
2020
children?: React.ReactNode
2121
onClick?: () => void
2222
size?: TSIZE
23-
direction: 'left' | 'right'
23+
direction?: 'left' | 'right'
2424
dimWhenIdle?: boolean
2525
disabled?: boolean
2626
arrowStyle?: string

‎src/containers/content/CoolGuideContent/Content.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,18 @@
77
import React from 'react'
88

99
import { GUIDE } from '@/constant'
10-
import { mockNaviCatalogMenu } from '@/utils'
1110

1211
import Pagi from '@/components/Pagi'
1312

1413
import {
15-
DirectoryGallery,
1614
ProductGallery,
1715
PeopleGallery,
1816
ImageGallery,
1917
} from '@/components/GalleryHub'
2018

19+
import SearchCover from './SearchCover'
2120
import Footer from './Footer'
22-
// import NormalList from './NormalList'
21+
2322
import { Wrapper, InnerWrapper, NormalListWrapper } from './styles/content'
2423

2524
type TProps = {
@@ -33,11 +32,7 @@ const Content: React.FC<TProps> = ({ displayType }) => {
3332
case GUIDE.PREVIEW: {
3433
DisplayContent = (
3534
<NormalListWrapper>
36-
<DirectoryGallery items={mockNaviCatalogMenu()} />
37-
<br />
38-
<Footer />
39-
<br />
40-
<br />
35+
<SearchCover />
4136
</NormalListWrapper>
4237
)
4338
break

‎src/containers/content/CoolGuideContent/Footer/index.js‎ renamed to ‎src/containers/content/CoolGuideContent/Footer/index.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,27 @@ import {
2020
const FAKE_AVATAR =
2121
'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/cmd/hot/hackernews.jpeg'
2222

23-
const Footer = () => {
23+
type TProps = {
24+
mode?: string
25+
}
26+
27+
const Footer: React.FC<TProps> = ({ mode }) => {
2428
return (
25-
<Wrapper>
29+
<Wrapper center={mode === 'cover'}>
2630
<AboutBlock>
27-
关于酷导游
31+
关于酷导航
2832
<Desc>共收录信息 3485 条，最后更新：3小时前</Desc>
29-
<ArrowButton>参与贡献</ArrowButton>
30-
</AboutBlock>
31-
<AboutBlock>
32-
关于本周热榜
33-
<Desc>共有 RSS 源 334 个，最后抓取：3小时前</Desc>
34-
<ArrowButton>参与贡献</ArrowButton>
33+
<ArrowButton>更多</ArrowButton>
3534
</AboutBlock>
35+
{mode !== 'cover' && (
36+
<AboutBlock>
37+
关于本周热榜
38+
<Desc>共有 RSS 源 334 个，最后抓取：3小时前</Desc>
39+
<ArrowButton>参与贡献</ArrowButton>
40+
</AboutBlock>
41+
)}
3642
<ContributorBlock>
37-
本条目贡献者
43+
贡献者们
3844
<ContributorsWrapper>
3945
<Avatar src={FAKE_AVATAR} />
4046
<Avatar src={FAKE_AVATAR} />

‎src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { useRef } from 'react'
2+
import T from 'prop-types'
3+
4+
import {
5+
Wrapper,
6+
InputWrapper,
7+
InputMask,
8+
MaskNumer,
9+
InputBar,
10+
} from '../styles/search_cover/input_box'
11+
12+
type TProps = {
13+
showMask?: boolean
14+
placeholder?: string
15+
value?: string
16+
autoFocus?: boolean
17+
noRound?: boolean
18+
19+
onChange?: (e) => void
20+
onBlur?: () => void
21+
}
22+
23+
const InputBox: React.FC<TProps> = ({
24+
showMask = false,
25+
value = '',
26+
placeholder = '',
27+
autoFocus = false,
28+
onChange = console.log,
29+
onBlur = console.log,
30+
noRound = false,
31+
}) => {
32+
const ref = useRef(null)
33+
34+
return (
35+
<Wrapper>
36+
<InputWrapper noRound={noRound}>
37+
<InputMask
38+
show={showMask}
39+
onClick={() => {
40+
ref.current.focus()
41+
}}
42+
>
43+
<MaskNumer>--</MaskNumer> xxx
44+
</InputMask>
45+
<InputBar
46+
ref={ref}
47+
onChange={onChange}
48+
value={value}
49+
autoFocus={autoFocus}
50+
placeholder={placeholder}
51+
onBlur={onBlur}
52+
/>
53+
</InputWrapper>
54+
</Wrapper>
55+
)
56+
}
57+
58+
export default React.memo(InputBox)

‎src/containers/content/CoolGuideContent/SearchCover/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
3+
import { Br } from '@/components/Common'
4+
5+
import Footer from '../Footer'
6+
import InputBox from './InputBox'
7+
8+
import { Wrapper, Header, Title, Slogan } from '../styles/search_cover'
9+
10+
type TProps = {
11+
testid?: string
12+
}
13+
14+
const SearchCover: React.FC<TProps> = ({ testid = 'search-cover' }) => {
15+
return (
16+
<Wrapper testid={testid}>
17+
<Header>
18+
<Title>「酷导航」</Title>
19+
<Slogan>实用指南，启发灵感，找到有趣</Slogan>
20+
</Header>
21+
<Br top={10} />
22+
<InputBox />
23+
<Br top={15} />
24+
<Footer mode="cover" />
25+
</Wrapper>
26+
)
27+
}
28+
29+
export default React.memo(SearchCover)

‎src/containers/content/CoolGuideContent/styles/footer/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import styled from 'styled-components'
33
import Img from '@/Img'
44
import { css, theme } from '@/utils'
55

6-
export const Wrapper = styled.div`
6+
export const Wrapper = styled.div<{ center: boolean }>`
77
${css.flex()};
8+
justify-content: ${({ center }) => (center ? 'center' : 'flex-start')};
89
width: 100%;
910
min-height: 160px;
1011
color: ${theme('thread.articleTitle')};

‎src/containers/content/CoolGuideContent/styles/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
99
}))<TTestable>`
1010
${css.flexColumn('align-both')}
1111
width: 100%;
12+
margin-top: 12px;
1213
`
1314
export const InnerWrapper = styled.div<{ metric: string }>`
1415
${css.flex('justify-center')};

‎src/containers/content/CoolGuideContent/styles/search_cover/index.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import styled from 'styled-components'
2+
3+
import type { TTestable } from '@/spec'
4+
import { css, theme } from '@/utils'
5+
6+
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
7+
'data-test-id': testid,
8+
}))<TTestable>`
9+
${css.flexColumn('align-both')};
10+
width: 100%;
11+
min-height: 70vh;
12+
padding-right: 10%;
13+
`
14+
export const Header = styled.div`
15+
${css.flexColumn('align-center')};
16+
margin-bottom: 20px;
17+
`
18+
export const Title = styled.div`
19+
font-size: 20px;
20+
color: ${theme('thread.articleTitle')};
21+
`
22+
export const Slogan = styled.div`
23+
font-size: 15px;
24+
color: ${theme('thread.articleDigest')};
25+
margin-top: 5px;
26+
`

‎src/containers/content/CoolGuideContent/styles/search_cover/input_box.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import styled from 'styled-components'
2+
3+
import type { TActive } from '@/spec'
4+
// import Img from '@/Img'
5+
import { theme, css } from '@/utils'
6+
7+
export const Wrapper = styled.div`
8+
display: flex;
9+
margin-bottom: 10px;
10+
`
11+
export const InputWrapper = styled.div<{ noRound: boolean }>`
12+
position: relative;
13+
width: 520px;
14+
${css.flex('align-center')};
15+
border-radius: ${({ noRound }) => (noRound ? '6px' : '20px')};
16+
padding: 10px 18px;
17+
background-color: #093342; // ${theme('content.cardBg')};
18+
margin-bottom: 8px;
19+
opacity: 0.8;
20+
border: 1px solid;
21+
border-color: ${theme('content.cardBg')};
22+
&:hover {
23+
background-color: ${theme('content.cardBg')};
24+
opacity: 1;
25+
border: 1px solid #1e6184;
26+
}
27+
28+
transition: all 0.25s ease-in;
29+
30+
${css.media.mobile`
31+
width: 70%;
32+
margin-left: 15%;
33+
padding: 8px;
34+
`};
35+
`
36+
export const InputMask = styled.div<TActive>`
37+
${css.flex('align-both')};
38+
position: absolute;
39+
display: ${({ show }) => (show ? 'flex' : 'none')};
40+
top: 0;
41+
left: 18px;
42+
width: 400px;
43+
height: 40px;
44+
`
45+
export const MaskNumer = styled.span`
46+
color: #327faf;
47+
margin-right: 4px;
48+
`
49+
export const InputBar = styled.input.attrs(() => ({
50+
spellCheck: 'false',
51+
autoComplete: 'off',
52+
autoCorrect: 'off',
53+
autoCapitalize: 'off',
54+
}))`
55+
text-align: left;
56+
caret-color: #33b7b3;
57+
flex-grow: 1;
58+
height: 100%;
59+
width: auto;
60+
min-width: 420px;
61+
outline: none;
62+
color: #33b7b3;
63+
font-size: 1.1rem;
64+
max-height: none;
65+
background-color: transparent;
66+
border: 0;
67+
border-radius: 0;
68+
transition: all 400ms ease;
69+
70+
::placeholder {
71+
color: #135868;
72+
}
73+
`

‎utils/mock.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,12 @@ export const mockNaviCatalogMenu = (): TMenuItem[] => {
306306
icon: `${ICON_CMD}/navi/sci-fi.svg`,
307307
displayType: 'IMAGE',
308308
},
309+
{
310+
id: uid.gen(),
311+
title: '在线教育',
312+
icon: `${ICON_CMD}/navi/sci-fi.svg`,
313+
displayType: 'IMAGE',
314+
},
309315
{
310316
id: uid.gen(),
311317
title: '算法体操',
@@ -625,7 +631,7 @@ export const mockNaviCatalogMenu = (): TMenuItem[] => {
625631
},
626632
{
627633
id: uid.gen(),
628-
title: '教程 / 翻译', // 技术书籍，中文文档, 翻译文章, 国外网校, 比如 https://web.stanford.edu/class/cs224n/
634+
title: '教程 / 101', // 技术书籍，中文文档, 翻译(放标签里吧), 国外网校, 比如 https://web.stanford.edu/class/cs224n/
629635
icon: `${ICON_CMD}/navi/glasses.svg`,
630636
childMenu: [
631637
{
@@ -658,11 +664,6 @@ export const mockNaviCatalogMenu = (): TMenuItem[] => {
658664
title: '产品',
659665
icon: `${ICON_CMD}/navi/translate.svg`,
660666
},
661-
{
662-
id: uid.gen(),
663-
title: '中文文档',
664-
icon: `${ICON_CMD}/navi/translate.svg`,
665-
},
666667
{
667668
id: uid.gen(),
668669
title: '奇奇怪怪',

0 commit comments

Comments
 (0)