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

Commit d1f1be3

Browse files
mydearxymmydearxym
authored
refactor(drinks): re-org demo (#1191)
* chore(rename): UserList -> TeamList * refactor(have-a-drink): new contents for demo * refactor(have-a-drink): re-org * refactor(have-a-drink): update category desc * refactor(have-a-drink): upvote alias * refactor(have-a-drink): category change * refactor(have-a-drink): react & categoy re-org * refactor(have-a-drink): re-org * refactor(have-a-drink): template concept
1 parent 510a06e commit d1f1be3

Some content is hidden

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

64 files changed

+980
-338
lines changed

‎src/containers/content/HaveADrinkContent/Body/About.tsx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,34 @@
66

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

9-
import { Wrapper, Title, Body } from '../styles/body/about'
9+
import Button from '@/widgets/Buttons/Button'
10+
import Linker from '@/widgets/Linker'
11+
12+
import { Wrapper, Title, Body, Indent } from '../styles/body/about'
13+
import { setView } from '../logic'
1014

1115
const About: FC = () => {
1216
return (
1317
<Wrapper>
14-
<Title>关于『来一杯』</Title>
18+
<Title>关于「来一杯」</Title>
1519
<Body>
16-
以前一直觉得开3系的人都是花30万买个车标的装逼犯，动不动就说什么“人车合一”张口闭口谈操控，要不要这么假啊。
17-
巴伐利亚拖拉机厂骗钱的小玩意儿，老子的大尼桑还不是照样开得飞起，只要哥愿意分分钟把你秒成渣……哈哈，有点夸张，
18-
总之就是各种看不起3系。直到前段时间亲戚买了一辆，机缘巧合我正好拿着开了几天……其实不用几天，握着方向起步的一瞬间就已经能感觉出来宝马的行驶质感比普通B级车细腻得多，
19-
然后在省道上转过第一个急弯我才知道所谓“车的操控感”并不是一个虚无缥缈的东西……
20+
<Indent />
21+
来一杯版块是对碎片知识呈现与互动的一个尝试，目前还在雏形阶段。所收集的片段、案列、黑料等都与本行业相关，大多来自网络。
22+
如果你对此有任何建议请到
23+
<Linker
24+
src="/feedback"
25+
external={false}
26+
text="Feedback"
27+
left={4}
28+
right={4}
29+
inline
30+
/>
31+
参与讨论。
2032
</Body>
33+
34+
<Button size="medium" onClick={() => setView('default')} noBorder ghost>
35+
返回
36+
</Button>
2137
</Wrapper>
2238
)
2339
}

‎src/containers/content/HaveADrinkContent/Body/Catalog.tsx‎

Lines changed: 72 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -6,147 +6,102 @@
66

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

9-
import { ICON_CMD } from '@/config'
10-
import { cutRest } from '@/utils/helper'
119
import { buildLog } from '@/utils/logger'
10+
import { ICON } from '@/config'
1211

12+
import MenuButton from '@/widgets/Buttons/MenuButton'
13+
import ArrowButton from '@/widgets/Buttons/ArrowButton'
14+
import Linker from '@/widgets/Linker'
15+
16+
import { VIEW } from '../constant'
1317
import {
1418
Wrapper,
19+
BackWrapper,
20+
BackHeader,
21+
LineDivider,
22+
Note,
23+
Content,
1524
Block,
1625
Header,
1726
Intro,
18-
Timestamp,
27+
MoreIcon,
1928
Body,
2029
Title,
2130
Desc,
2231
Icon,
2332
} from '../styles/body/catalog'
24-
// import { useInit } from './logic'
33+
import { setView, changeCategory } from '../logic'
34+
35+
import demo from '../demo'
2536

2637
/* eslint-disable-next-line */
2738
const log = buildLog('C:HaveADrinkContent')
2839

29-
const items = [
30-
{
31-
id: '0',
32-
icon: `${ICON_CMD}/drink/it-cold.svg`,
33-
title: 'it 冷知识',
34-
total: '224',
35-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
36-
updatedAt: '3天前',
37-
},
38-
{
39-
id: '00',
40-
icon: `${ICON_CMD}/drink/image.svg`,
41-
title: '程序员趣图',
42-
total: '22',
43-
lastMsg: '--',
44-
updatedAt: '3天前',
45-
},
46-
{
47-
id: '1',
48-
icon: `${ICON_CMD}/drink/number.svg`,
49-
title: '数据酷',
50-
total: '224',
51-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
52-
updatedAt: '3天前',
53-
active: true,
54-
},
55-
{
56-
id: '12',
57-
icon: `${ICON_CMD}/drink/naming.svg`,
58-
title: 'Naming 101',
59-
// 既包括常见的 naming 技巧，也包括精彩的命名，比如 treeshake
60-
// 常见的易错的程序员英语等等
61-
total: '224',
62-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
63-
updatedAt: '3天前',
64-
},
65-
{
66-
id: '2',
67-
icon: `${ICON_CMD}/drink/chicken.svg`,
68-
title: '毒鸡汤',
69-
total: '224',
70-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
71-
updatedAt: '3天前',
72-
},
40+
const menuOptions = [
7341
{
74-
id: '3',
75-
icon: `${ICON_CMD}/drink/muscle.svg`,
76-
title: '励志鸡汤',
77-
total: '224',
78-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
79-
updatedAt: '3天前',
42+
key: 'time',
43+
icon: `${ICON}/edit/publish-pen.svg`,
44+
title: '参与编辑',
8045
},
8146
{
82-
id: '31',
83-
icon: `${ICON_CMD}/drink/driver.svg`,
84-
title: '老司机',
85-
total: '224',
86-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
87-
updatedAt: '3天前',
88-
},
89-
{
90-
id: '32',
91-
icon: `${ICON_CMD}/drink/zhihu.svg`,
92-
title: '一句话知乎',
93-
total: '224',
94-
sourceTitle: '在中国做一款抗衡 PS 和 Xbox 的主机很难吗？ - 申权者的回答',
95-
lastMsg: '开窑子没姑娘，那还是窑子吗?',
96-
updatedAt: '3天前',
97-
},
98-
{
99-
id: '4',
100-
icon: `${ICON_CMD}/drink/smile.svg`,
101-
title: '神问答（语言可选）',
102-
total: '224',
103-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
104-
updatedAt: '3天前',
105-
},
106-
{
107-
id: '5',
108-
icon: `${ICON_CMD}/drink/brain.svg`,
109-
title: '脑筋急转弯',
110-
total: '224',
111-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
112-
updatedAt: '3天前',
113-
},
114-
{
115-
id: '6',
116-
icon: `${ICON_CMD}/drink/chicken.svg`,
117-
title: '俚语迷宫',
118-
total: '224',
119-
lastMsg: '看见一个算命大师，我刚坐下他就问我，你算什么东西?',
120-
updatedAt: '3天前',
121-
},
122-
{
123-
id: '7',
124-
icon: `${ICON_CMD}/drink/rap.svg`,
125-
title: '灵魂 RAP',
126-
total: '22',
127-
lastMsg: '太阳不起我不起 老子就是了不起',
128-
updatedAt: '3天前',
47+
key: 'hot',
48+
icon: `${ICON}/menu/hot.svg`,
49+
title: '贡献者',
12950
},
13051
]
13152

132-
const Catalog: FC = () => {
53+
type TProps = {
54+
category: string
55+
}
56+
57+
const Catalog: FC<TProps> = ({ category }) => {
13358
return (
13459
<Wrapper>
135-
{items.map((item) => (
136-
<Block key={item.id} active={item.active}>
137-
<Header>
138-
<Intro>
139-
<Icon src={item.icon} />
140-
{item.total} 条
141-
</Intro>
142-
<Timestamp>{item.updatedAt}</Timestamp>
143-
</Header>
144-
<Body>
145-
<Title>{item.title}</Title>
146-
<Desc>{cutRest(item.lastMsg, 13)}</Desc>
147-
</Body>
148-
</Block>
149-
))}
60+
<BackWrapper>
61+
<BackHeader>
62+
<ArrowButton
63+
size="medium"
64+
direction="left"
65+
onClick={() => setView(VIEW.DEFAULT)}
66+
>
67+
返回
68+
</ArrowButton>
69+
</BackHeader>
70+
<LineDivider />
71+
<Note>
72+
目前确定的分类已全部列出，如果你对现有分类有建议或有更适合的分类，欢迎参与
73+
<Linker
74+
src="/feedback"
75+
external={false}
76+
text="feedback"
77+
inline
78+
left={2}
79+
/>
80+
</Note>
81+
</BackWrapper>
82+
<Content>
83+
{demo.map((item) => (
84+
<Block key={item.id} active={category === item.title}>
85+
<Header>
86+
<Intro>
87+
<Icon src={item.icon} />
88+
{item.entries?.length} 条
89+
</Intro>
90+
<MenuButton
91+
placement="bottom-end"
92+
options={menuOptions}
93+
onClick={() => setView(VIEW.EDIT)}
94+
>
95+
<MoreIcon />
96+
</MenuButton>
97+
</Header>
98+
<Body onClick={() => changeCategory(item.title)}>
99+
<Title>{item.title}</Title>
100+
<Desc>{item.desc}</Desc>
101+
</Body>
102+
</Block>
103+
))}
104+
</Content>
150105
</Wrapper>
151106
)
152107
}

‎src/containers/content/HaveADrinkContent/Body/Content.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { FC, memo } from 'react'
2+
3+
import Linker from '@/widgets/Linker'
4+
5+
import type { TDrinkItem } from '../spec'
6+
import {
7+
Wrapper,
8+
TextWrapper,
9+
ImageContentWrapper,
10+
Image,
11+
Text,
12+
} from '../styles/body/content'
13+
14+
type TProps = {
15+
item: TDrinkItem
16+
}
17+
18+
const Content: FC<TProps> = ({ item }) => {
19+
const refLink = item.reference
20+
21+
if (item.images && item.images.length === 1) {
22+
const imageSrc = item.images[0]
23+
24+
return (
25+
<ImageContentWrapper>
26+
<Image src={imageSrc} />
27+
{refLink && <Linker src={refLink} hint="参考" top={8} />}
28+
<Text>{item.text}</Text>
29+
</ImageContentWrapper>
30+
)
31+
}
32+
33+
return (
34+
<Wrapper>
35+
<TextWrapper>{item.text}</TextWrapper>
36+
{refLink && <Linker src={refLink} hint="参考" top={8} />}
37+
</Wrapper>
38+
)
39+
}
40+
41+
export default memo(Content)

‎src/containers/content/HaveADrinkContent/Body/Publish.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
*
3+
* HaveADrink Body
4+
*
5+
*/
6+
7+
import { FC, memo } from 'react'
8+
9+
import Button from '@/widgets/Buttons/Button'
10+
import Linker from '@/widgets/Linker'
11+
12+
import { Wrapper, Title, Body, Indent } from '../styles/body/about'
13+
import { setView } from '../logic'
14+
15+
const Publish: FC = () => {
16+
return (
17+
<Wrapper>
18+
<Title>参与「来一杯」</Title>
19+
<Body>
20+
<Indent />
21+
目前是内测阶段，前端仅作产品层面展示，还无法编辑或互动 --
22+
在针对条目的富文本编辑、协同管理等方面还有很多细节有待梳理完善，欢迎任何形式的参与:
23+
<Linker
24+
src="/feedback"
25+
external={false}
26+
text="feedback"
27+
inline
28+
left={2}
29+
/>
30+
</Body>
31+
32+
<Button size="medium" onClick={() => setView('default')} noBorder ghost>
33+
返回
34+
</Button>
35+
</Wrapper>
36+
)
37+
}
38+
39+
export default memo(Publish)

0 commit comments

Comments
 (0)