= (props) => {
67 | const navigate = useNavigate()
68 |
69 | return (
70 | }
73 | arrow={false}
74 | description={
75 |
76 |
{props.author.loginname}
77 |
78 |
34 |
35 |
36 |
37 |
38 |
39 |
44 |
45 |
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { useSearchParams, useNavigate, Link } from 'react-router-dom'
2 | import { fetchAPI } from '@/utils'
3 | import { Topic, TopicProps } from '@/components/topic'
4 | import { Badge, InfiniteScroll, List, Space, Tabs } from 'antd-mobile'
5 | import { BellOutline, UserOutline } from 'antd-mobile-icons'
6 | import { useAuth } from '@/hooks/auth'
7 | import { Header } from '@/components/header'
8 | import { useInfiniteQuery } from 'react-query'
9 | import { Loading } from '@/components/loading'
10 |
11 | export default function Home() {
12 | const [searchParams] = useSearchParams()
13 | const tab = searchParams.get('tab') ?? 'all'
14 | const navigate = useNavigate()
15 |
16 | const { count, loginname } = useAuth()
17 |
18 | const { data, fetchNextPage, hasNextPage } = useInfiniteQuery<{
19 | data: TopicProps[]
20 | cursor: number
21 | }>(
22 | ['topics', tab],
23 | async ({ pageParam = 1 }) => {
24 | const json = await fetchAPI(
25 | `/topics?mdrender=false&tab=${tab}&page=${pageParam}&limit=20`
26 | )
27 | json.cursor = pageParam + 1
28 | return json
29 | },
30 | {
31 | getNextPageParam: (lastPage) => lastPage.cursor,
32 | }
33 | )
34 |
35 | return (
36 |
37 |
41 |
42 | {count ? (
43 |
44 |
45 |
46 | ) : (
47 |
48 | )}
49 |
50 |
51 |
52 |
53 |
54 | }
55 | >
56 | CNode
57 |
58 | {
60 | navigate(key === 'all' ? '/' : '/?tab=' + key)
61 | }}
62 | >
63 | {[
64 | { id: 'all', title: '全部' },
65 | { id: 'good', title: '精华' },
66 | { id: 'share', title: '分享' },
67 | { id: 'ask', title: '问答' },
68 | { id: 'job', title: '招聘' },
69 | ].map(({ id, title }) => (
70 |
71 | ))}
72 |
73 |
74 | {!data ? (
75 |
76 | ) : (
77 |
78 | {data.pages
79 | .map((page) => {
80 | return page.data.map((topic) => {
81 | return
82 | })
83 | })
84 | .flat()}
85 |
86 | )}
87 | {
89 | await fetchNextPage()
90 | }}
91 | hasMore={hasNextPage}
92 | />
93 |
94 | {/* */}
102 |
103 | )
104 | }
105 |
--------------------------------------------------------------------------------
/src/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom'
2 | import { useAuth } from '@/hooks/auth'
3 | import { QrReader } from 'react-qr-reader'
4 | // import { colors } from '../../utils'
5 | // import style from './login.css'
6 |
7 | export default function Login() {
8 | const navigate = useNavigate()
9 | //
25 |
26 | const { verifyToken } = useAuth()
27 |
28 | return (
29 | {
31 | const token = res?.getText()
32 | console.log('scan', token)
33 | if (!token) return
34 |
35 | const isValid = await verifyToken(token)
36 | if (isValid) {
37 | navigate('/')
38 | }
39 | }}
40 | constraints={{
41 | facingMode: 'environment',
42 | }} // style={{ width: "100%" }}
43 | />
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/pages/message.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, FC } from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 | import { useAuth } from '@/hooks/auth'
4 | import { colors, fetchAPI } from '@/utils'
5 | import { CheckOutline } from 'antd-mobile-icons'
6 | import { Header } from '@/components/header'
7 | import { List, Toast } from 'antd-mobile'
8 | import { Loading } from '@/components/loading'
9 | import { NoMore } from '@/components/no-more'
10 | import { AvatarRow } from '@/components/avatar'
11 | import { Title } from '@/components/styled'
12 |
13 | const MessageItem: FC = (props) => {
14 | const navigate = useNavigate()
15 | return (
16 | {
18 | navigate(`/topic/${props.topic.id}`)
19 | }}
20 | style={props.has_read ? {} : { background: '#f4fcf0' }}
21 | >
22 |
23 |
24 | {props.author.loginname}{' '}
25 | 回复了你的话题
26 |
27 | {props.topic.title}
28 |
29 |
30 | )
31 | }
32 |
33 | export default function Message() {
34 | const [unread, setUnread] = useState([])
35 | const [read, setRead] = useState([])
36 | const [isLoading, setIsLoading] = useState(false)
37 | const { token } = useAuth()
38 |
39 | const updateMessages = async () => {
40 | setIsLoading(true)
41 | try {
42 | const { data } = await fetchAPI('/messages?accesstoken=' + token)
43 | setUnread(data.hasnot_read_messages)
44 | setRead(data.has_read_messages)
45 | } finally {
46 | setIsLoading(false)
47 | }
48 | }
49 |
50 | const markAllAsRead = async () => {
51 | await fetchAPI('/message/mark_all', {
52 | accesstoken: token,
53 | })
54 | }
55 |
56 | useEffect(() => {
57 | // this.props.runAfterTokenVerified(this.props.fetchMessages)
58 |
59 | if (token) {
60 | updateMessages()
61 | }
62 | }, [])
63 |
64 | if (!token) {
65 | // return // TODO:
66 | }
67 |
68 | return (
69 |
70 | {
74 | await markAllAsRead()
75 | Toast.show('已标记全部消息为已读')
76 | await updateMessages()
77 | }}
78 | >
79 | }
80 | >
81 | 消息
82 |
83 | {isLoading ? (
84 |
85 | ) : (
86 | <>
87 | {unread.map((message) => (
88 |
89 | ))}
90 | {read.map((message) => (
91 |
92 | ))}
93 |
94 |
95 | )}
96 |
97 | )
98 | }
99 |
--------------------------------------------------------------------------------
/src/pages/post.module.css:
--------------------------------------------------------------------------------
1 | .control {
2 | margin: 8px 0 !important;
3 | }
4 |
--------------------------------------------------------------------------------
/src/pages/post.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 | import { Header } from '@/components/header'
4 | import { fetchAPI } from '@/utils'
5 | import $s from './post.module.css'
6 | import { useAuth } from '@/hooks/auth'
7 | import { PlayOutline } from 'antd-mobile-icons'
8 | import { Input, Toast } from 'antd-mobile'
9 |
10 | const postTabs = [
11 | { id: 'ask', name: '问答' },
12 | { id: 'share', name: '分享' },
13 | { id: 'job', name: '招聘' },
14 | { id: 'dev', name: '客户端测试' },
15 | ]
16 |
17 | export default function Post() {
18 | const navigate = useNavigate()
19 | const [tab, setTab] = useState('ask')
20 | const [title, setTitle] = useState('')
21 | const [content, setContent] = useState('')
22 | const [titleErrorVisible, setTitleErrorVisible] = useState(false)
23 | const [contentErrorVisible, setContentErrorVisible] = useState(false)
24 |
25 | const { token } = useAuth()
26 |
27 | const showTitleError = titleErrorVisible && !title
28 | const showContentError = contentErrorVisible && !content
29 |
30 | return (
31 |
111 | )
112 | }
113 |
--------------------------------------------------------------------------------
/src/pages/topic/[id].tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { fetchAPI, shareCurrentUrl } from '@/utils'
3 | import $s from './detail.module.css'
4 | import { SendOutline } from 'antd-mobile-icons'
5 | import { Header } from '@/components/header'
6 | import { MarkdownViewer } from '@/components/markdown'
7 | import { Reply } from '@/components/reply'
8 | import { AvatarRow } from '@/components/avatar'
9 | import { Loading } from '@/components/loading'
10 | import { NoMore } from '@/components/no-more'
11 | import { TimeAgo } from '@/components/timeago'
12 | import { useParams } from 'react-router-dom'
13 |
14 | export default function Topic() {
15 | const params = useParams<'id'>()
16 |
17 | const [topic, setTopic] = useState(null)
18 | const [isLoading, setIsLoading] = useState(false)
19 |
20 | useEffect(() => {
21 | if (!params.id) return
22 |
23 | const init = async () => {
24 | try {
25 | setIsLoading(true)
26 | const { data } = await fetchAPI(`/topic/${params.id}?mdrender=false`)
27 | setTopic(data)
28 | } finally {
29 | setIsLoading(false)
30 | }
31 | }
32 |
33 | init()
34 | }, [params.id])
35 |
36 | return (
37 | <>
38 | {
42 | shareCurrentUrl(topic ? topic.title : '')
43 | }}
44 | />
45 | }
46 | >
47 | 话题
48 |
49 | {!topic ? (
50 |
51 | ) : (
52 |
53 |
{topic.title}
54 |
55 | {topic.author.loginname}
56 |
57 |
58 |
59 | {topic.visit_count}
60 | 次浏览
61 |
62 |
63 |
64 |
65 |
66 |
72 | {topic.reply_count
73 | ? `共 ${topic.reply_count} 条回复`
74 | : '暂无回复'}
75 |
76 | {topic.replies.map((reply) => (
77 |
78 | ))}
79 |
80 |
81 |
36 |
{
40 | shareCurrentUrl(author ? author.loginname : '')
41 | }}
42 | />
43 | }
44 | >
45 | 用户
46 |
47 | {author ? (
48 |
49 |
50 | {author.loginname}
51 |
52 |
53 |
54 |
55 |
{
58 | setTabKey(key)
59 | }}
60 | >
61 | {['最近参与', '最近发布', '话题收藏'].map((title, index) => {
62 | return
63 | })}
64 |
65 |
66 | {tabData[tabKey].map((topic) => (
67 |
68 | ))}
69 |
70 |
71 |
72 | ) : (
73 |
74 | )}
75 |