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

Commit ebe8f72

Browse files
mydearxymmydearxym
authored
refactor(cool-guide): reorg with demo data (#1193)
* refactor(cool-guide): basic readme part * refactor(cool-guide): adjust text * refactor(cool-guide): adjust parent categories * refactor(drink): add arrow icon * style(upvote): spaceing * style(link): hint style * refactor(drink): refreshDrink re-org * refactor(drink): more demo terms * refactor(drink): a title template * refactor(pages): clean up * refactor(guide): mock re-org * refactor(guide): mock re-org * refactor(guide): adjust general gallery look * refactor(guide): mock people gallery * refactor(guide): re-org
1 parent d1f1be3 commit ebe8f72

File tree

128 files changed

+2162
-1654
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

128 files changed

+2162
-1654
lines changed

‎src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ArrowIcon = styled(Img)<{ reverse?: boolean }>`
1616
fill: ${theme('thread.articleTitle')};
1717
}
1818
19-
transition: all 0.25s;
19+
transition: all 0.2s;
2020
`
2121
export const Text = styled.div`
2222
color: ${theme('thread.articleDigest')};
@@ -27,5 +27,5 @@ export const Text = styled.div`
2727
fill: ${theme('thread.articleTitle')};
2828
}
2929
30-
transition: all 0.25s;
30+
transition: all 0.2s;
3131
`

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ import {
1414
PeopleGallery,
1515
ImageGallery,
1616
} from '@/widgets/GalleryHub'
17+
import NoticeBar from '@/widgets/NoticeBar'
1718

18-
import SearchCover from './SearchCover'
19+
import HomeCover from './HomeCover'
1920
import Footer from './Footer'
2021

2122
import { Wrapper, InnerWrapper, NormalListWrapper } from './styles/content'
@@ -28,10 +29,10 @@ const Content: FC<TProps> = ({ displayType }) => {
2829
let DisplayContent
2930

3031
switch (displayType) {
31-
case GUIDE.PREVIEW: {
32+
case GUIDE.HOME: {
3233
DisplayContent = (
3334
<NormalListWrapper>
34-
<SearchCover />
35+
<HomeCover />
3536
</NormalListWrapper>
3637
)
3738
break
@@ -70,7 +71,7 @@ const Content: FC<TProps> = ({ displayType }) => {
7071
DisplayContent = (
7172
<NormalListWrapper>
7273
<ProductGallery />
73-
<Pagi margin={{ top: '40px', bottom: '60px' }} />
74+
<Pagi margin={{ top: '20px', bottom: '20px' }} />
7475
<Footer />
7576
<br />
7677
</NormalListWrapper>
@@ -81,6 +82,14 @@ const Content: FC<TProps> = ({ displayType }) => {
8182

8283
return (
8384
<Wrapper>
85+
{displayType !== GUIDE.HOME && (
86+
<NoticeBar
87+
type="info"
88+
content="当前条目仅作无分类无立场 UI 展示，协作编辑系统、模板等功能仍在开发调试中，欢迎任何形式的参与。"
89+
bottom={15}
90+
right={10}
91+
/>
92+
)}
8493
<InnerWrapper>{DisplayContent}</InnerWrapper>
8594
</Wrapper>
8695
)

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

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@ import {
1313
TopFilter,
1414
Option,
1515
OptionItem,
16-
// FavoriteIcon,
1716
ClockIcon,
1817
} from './styles/filter_bar'
1918

20-
import { topFilterOnChange } from './logic'
19+
import { topFilterOnChange, goHomeContent } from './logic'
2120

2221
type TProps = {
2322
topFilter: string
@@ -28,21 +27,18 @@ const FilterBar: FC<TProps> = ({ topFilter, menuOnSelect }) => {
2827
return (
2928
<Wrapper testid="filter-bar">
3029
<TopFilter>
31-
<BrandTitle title="酷导航" desc="实用指南，启发灵感，找到有趣" />
30+
<BrandTitle
31+
title="酷导航"
32+
desc="实用指南，启发灵感，找到有趣"
33+
onClick={() => goHomeContent()}
34+
/>
3235
<Divider />
3336
{topFilter !== 'all' && (
3437
<Option onClick={() => topFilterOnChange('all')}>全部</Option>
3538
)}
36-
{/* <Option
37-
active={topFilter === 'favorite'}
38-
onClick={() => topFilterOnChange('favorite')}
39-
>
39+
<Option>
4040
<OptionItem>我的收藏</OptionItem>
41-
<FavoriteIcon
42-
src={`${ICON_CMD}/navi/heart.svg`}
43-
active={topFilter === 'favorite'}
44-
/>
45-
</Option> */}
41+
</Option>
4642
<Option
4743
active={topFilter === 'latest'}
4844
onClick={() => topFilterOnChange('latest')}
@@ -55,11 +51,13 @@ const FilterBar: FC<TProps> = ({ topFilter, menuOnSelect }) => {
5551
</Option>
5652
</TopFilter>
5753
<Divider />
58-
<Sticky offsetTop={30}>
54+
<Sticky offsetTop={100}>
5955
<Fragment>
6056
<NaviCatalog
61-
title="分类"
62-
onSelect={(id: string, type: string) => menuOnSelect(id, type)}
57+
title="类别"
58+
onSelect={(id: string, type: string) => {
59+
menuOnSelect(id, type)
60+
}}
6361
withDivider={false}
6462
tags={mockNaviCatalogTags()}
6563
/>

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

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@
66

77
import { FC, memo } from 'react'
88

9+
import { mockUsers } from '@/utils/mock'
10+
911
import ArrowButton from '@/widgets/Buttons/ArrowButton'
12+
import TeamList from '@/widgets/TeamList'
13+
import { SpaceGrow } from '@/widgets/Common'
1014

1115
import {
1216
Wrapper,
1317
AboutBlock,
1418
ContributorBlock,
1519
ContributorsWrapper,
1620
Desc,
17-
Avatar,
21+
ButtomWraper,
1822
} from '../styles/footer'
1923

20-
const FAKE_AVATAR =
21-
'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/cmd/hot/hackernews.jpeg'
22-
2324
type TProps = {
2425
mode?: string
2526
}
@@ -29,26 +30,33 @@ const Footer: FC<TProps> = ({ mode }) => {
2930
<Wrapper center={mode === 'cover'}>
3031
<AboutBlock>
3132
关于酷导航
32-
<Desc>共收录信息 3485 条，最后更新：3小时前</Desc>
33-
<ArrowButton>更多</ArrowButton>
33+
<Desc>
34+
收集各种和开发设计群体直接间接相关的，具有一定水准的工具、产品、资源以及视角。
35+
</Desc>
36+
<ButtomWraper>
37+
<ArrowButton>更多</ArrowButton>
38+
<SpaceGrow />
39+
</ButtomWraper>
3440
</AboutBlock>
3541
{mode !== 'cover' && (
3642
<AboutBlock>
37-
关于本周热榜
38-
<Desc>共有 RSS 源 334 个，最后抓取：3小时前</Desc>
39-
<ArrowButton>参与贡献</ArrowButton>
43+
关于本类别
44+
<Desc>本类别收录日常使用频率较高的效率工具，最后更新于 5 天前</Desc>
45+
<ButtomWraper>
46+
<ArrowButton>参与贡献</ArrowButton>
47+
<SpaceGrow />
48+
</ButtomWraper>
4049
</AboutBlock>
4150
)}
4251
<ContributorBlock>
43-
贡献者们
52+
贡献者
4453
<ContributorsWrapper>
45-
<Avatar src={FAKE_AVATAR} />
46-
<Avatar src={FAKE_AVATAR} />
47-
<Avatar src={FAKE_AVATAR} />
48-
<Avatar src={FAKE_AVATAR} />
49-
<Avatar src={FAKE_AVATAR} />
54+
<TeamList users={mockUsers(5)} layout="guide-contribute" />
5055
</ContributorsWrapper>
51-
<ArrowButton>参与贡献</ArrowButton>
56+
<ButtomWraper>
57+
<ArrowButton>参与贡献</ArrowButton>
58+
<SpaceGrow />
59+
</ButtomWraper>
5260
</ContributorBlock>
5361
</Wrapper>
5462
)

‎src/containers/content/CoolGuideContent/SearchCover/InputBox.tsx‎ renamed to ‎src/containers/content/CoolGuideContent/HomeCover/InputBox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
InputMask,
77
MaskNumer,
88
InputBar,
9-
} from '../styles/search_cover/input_box'
9+
} from '../styles/home_cover/input_box'
1010

1111
type TProps = {
1212
showMask?: boolean

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/* eslint-disable jsx-a11y/accessible-emoji */
2+
import { FC, memo } from 'react'
3+
4+
import Linker from '@/widgets/Linker'
5+
6+
// import Footer from '../Footer'
7+
// import InputBox from './InputBox'
8+
9+
import {
10+
Wrapper,
11+
Block,
12+
Title,
13+
Ul,
14+
Li,
15+
Strike,
16+
Bold,
17+
} from '../styles/home_cover'
18+
19+
type TProps = {
20+
testid?: string
21+
}
22+
23+
const HomeCover: FC<TProps> = ({ testid = 'search-cover' }) => {
24+
return (
25+
<Wrapper testid={testid}>
26+
<Block>
27+
<Title>关于酷导航</Title>
28+
<Ul>
29+
<Li>
30+
这里收集各种和开发设计群体直接间接相关的，有<Strike>逼格</Strike>
31+
一定水准的工具、产品、资源以及视角。
32+
</Li>
33+
<Li>
34+
每个条目都会有客观的帖子介绍基本概况、使用场景、公认的一些优缺点等等。
35+
</Li>
36+
<Li>
37+
是否收录与所在地域，是否开源，免费或付费等因素无关，但会列出。
38+
</Li>
39+
<Li>
40+
大多数目录的收录标准只有一个：<Bold>The best or the unique</Bold>
41+
</Li>
42+
<Li>不恰烂钱，不讲人情，你行你上。</Li>
43+
</Ul>
44+
</Block>
45+
<Block>
46+
<Title>当前状态</Title>
47+
<Ul>
48+
<Li>
49+
👈 &nbsp;初始分类及 UI 雏形已完成，欢迎体验后
50+
<Linker
51+
src="/feedback"
52+
external={false}
53+
text="给我们反馈"
54+
inline
55+
left={4}
56+
right={4}
57+
/>
58+
。
59+
</Li>
60+
<Li>目前已经完成大部分的后端工作。</Li>
61+
<Li>前端富文本编辑/显示模板还有不少工作量</Li>
62+
<Li>
63+
协作编辑，编辑历史，参与贡献体系等已经基本设计完成，但还未正式编写相关模块。
64+
</Li>
65+
</Ul>
66+
</Block>
67+
<Block>
68+
<Title>开发计划</Title>
69+
<Ul>
70+
<Li>
71+
收集社区
72+
<Linker
73+
src="/feedback"
74+
external={false}
75+
text="建议反馈"
76+
inline
77+
left={4}
78+
right={4}
79+
/>
80+
，完善设计。
81+
</Li>
82+
<Li>编码实施。计划在内测阶段完成。</Li>
83+
</Ul>
84+
</Block>
85+
{/* <Br top={10} /> */}
86+
{/* <InputBox /> */}
87+
{/* <Br top={15} /> */}
88+
{/* <Footer mode="cover" /> */}
89+
</Wrapper>
90+
)
91+
}
92+
93+
export default memo(HomeCover)

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

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/containers/content/CoolGuideContent/logic.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect } from 'react'
22

3-
import { ERR } from '@/constant'
3+
import { ERR, GUIDE } from '@/constant'
44
import { errRescue } from '@/utils/helper'
55
import asyncSuit from '@/utils/async'
66
import { buildLog } from '@/utils/logger'
@@ -30,6 +30,10 @@ export const menuOnSelect = (
3030
store.mark({ activeMenuId, displayType })
3131
}
3232

33+
export const goHomeContent = (): void => {
34+
store.mark({ displayType: GUIDE.HOME })
35+
}
36+
3337
/**
3438
* favorite or latestUpdated filter change
3539
*

‎src/containers/content/CoolGuideContent/store.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const CoolGuideContent = T.model('CoolGuideContent', {
1414
activeMenuId: T.maybeNull(T.string),
1515
// initActiveMenuId: T.optional(T.string, ''),
1616
topFilter: T.optional(T.string, 'all'),
17-
displayType: T.optional(T.enumeration(values(GUIDE)), GUIDE.PREVIEW),
17+
displayType: T.optional(T.enumeration(values(GUIDE)), GUIDE.HOME),
1818
}).actions((self) => ({
1919
markRoute(query): void {
2020
const root = getParent(self) as TRootStore

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const Option = styled.div<TActive>`
3838
cursor: pointer;
3939
}
4040
41-
transition: all 0.25s;
41+
transition: all 0.2s;
4242
`
4343
export const OptionItem = styled.div`
4444
flex-grow: 1;
@@ -47,7 +47,7 @@ const OptionIconBase = styled(Img)<TActive>`
4747
${css.size(12)};
4848
opacity: ${({ active }) => (active ? '1' : '0')};
4949
50-
transition: all 0.25s;
50+
transition: all 0.2s;
5151
`
5252
export const FavoriteIcon = styled(OptionIconBase)`
5353
fill: ${theme('baseColor.red')};

0 commit comments

Comments
 (0)