feat(web): forum home page with boards, list, post
This commit is contained in:
parent
899c4eb42e
commit
fd84b0b0ff
|
|
@ -0,0 +1,126 @@
|
|||
import { defineConfig } from '@umijs/max'
|
||||
|
||||
const COLOR_PRIMARY = '#B43533'
|
||||
const COLOR_TEXT_PRIMARY = 'rgba(0, 0, 0, 0.88)'
|
||||
const COLOR_TEXT_DISABLED = 'rgba(0, 0, 0, 0.25)'
|
||||
|
||||
export default defineConfig({
|
||||
initialState: {},
|
||||
access: {},
|
||||
model: {},
|
||||
antd: {
|
||||
theme: {
|
||||
token: {
|
||||
colorPrimary: COLOR_PRIMARY,
|
||||
colorLink: COLOR_PRIMARY,
|
||||
colorTextDisabled: COLOR_TEXT_PRIMARY
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
defaultBorderColor: COLOR_PRIMARY,
|
||||
defaultColor: COLOR_PRIMARY,
|
||||
colorTextDisabled: COLOR_TEXT_DISABLED
|
||||
},
|
||||
Cascader: {
|
||||
dropdownHeight: 460
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
title: '装修室内空气质量预测系统',
|
||||
layout: {
|
||||
locale: false
|
||||
},
|
||||
tailwindcss: {},
|
||||
routes: [
|
||||
{
|
||||
name: '登录',
|
||||
path: '/login',
|
||||
component: './login',
|
||||
layout: false
|
||||
},
|
||||
{
|
||||
name: '落地页',
|
||||
path: '/landing',
|
||||
component: './landing',
|
||||
layout: false
|
||||
},
|
||||
{
|
||||
name: '健康装修大家谈',
|
||||
path: '/forum',
|
||||
component: './forum',
|
||||
layout: false
|
||||
},
|
||||
{
|
||||
name: '帖子详情',
|
||||
path: '/forum/thread/:id',
|
||||
component: './forum/thread',
|
||||
layout: false
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/landing'
|
||||
},
|
||||
{
|
||||
name: '首页',
|
||||
path: '/home',
|
||||
component: './home'
|
||||
},
|
||||
{
|
||||
name: '污染源识别',
|
||||
path: '/source',
|
||||
component: './source'
|
||||
},
|
||||
{
|
||||
name: '模板库',
|
||||
path: '/template',
|
||||
component: './template'
|
||||
},
|
||||
{
|
||||
name: '材料库',
|
||||
path: '/material',
|
||||
component: './material'
|
||||
},
|
||||
{
|
||||
name: '材料类别管理',
|
||||
path: '/material-category',
|
||||
component: './material-category',
|
||||
access: 'canMtrlCatMgmt'
|
||||
},
|
||||
{
|
||||
name: '历史记录',
|
||||
path: '/history-project',
|
||||
component: './history-project'
|
||||
},
|
||||
{
|
||||
name: '个人设置',
|
||||
path: '/personal-settings',
|
||||
component: './personal-settings',
|
||||
hideInMenu: true
|
||||
}
|
||||
],
|
||||
mock: false,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:6060',
|
||||
changeOrigin: true
|
||||
},
|
||||
'/socket.io': {
|
||||
target: 'http://localhost:6060',
|
||||
ws: true
|
||||
}
|
||||
},
|
||||
history: {
|
||||
type: 'hash'
|
||||
},
|
||||
publicPath: '/iapip-web/',
|
||||
favicons: ['/iapip-web/favicon.ico'],
|
||||
request: {
|
||||
dataField: ''
|
||||
},
|
||||
mfsu: {
|
||||
strategy: 'normal'
|
||||
},
|
||||
esbuildMinifyIIFE: true,
|
||||
npmClient: 'pnpm'
|
||||
})
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { history } from '@umijs/max'
|
||||
import { Tabs, List, Button, Modal, Form, Input, Select, Pagination, message, Empty } from 'antd'
|
||||
import api from '@/services/api'
|
||||
import type { ForumThreadListItem } from '@/services/api/forum'
|
||||
import { LOC_STOR_KEY } from '@/common/constants'
|
||||
import PhoneAuthModal from '@/components/phone-auth-modal'
|
||||
|
||||
const hasToken = () => !!localStorage.getItem(LOC_STOR_KEY.AUTH_TOKEN)
|
||||
const PAGE_SIZE = 10
|
||||
|
||||
export default function ForumHome() {
|
||||
const [boards, setBoards] = useState<{ board: string, count: number }[]>([])
|
||||
const [active, setActive] = useState<string>('all')
|
||||
const [list, setList] = useState<ForumThreadListItem[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const [authOpen, setAuthOpen] = useState(false)
|
||||
const [postOpen, setPostOpen] = useState(false)
|
||||
const [form] = Form.useForm()
|
||||
|
||||
const loadBoards = useCallback(async () => {
|
||||
try { setBoards(await api.forum.getBoards()) } catch { /* 全局提示 */ }
|
||||
}, [])
|
||||
|
||||
const loadThreads = useCallback(async (p: number, board: string) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await api.forum.getThreads({
|
||||
board: board === 'all' ? undefined : board,
|
||||
page: p,
|
||||
size: PAGE_SIZE
|
||||
})
|
||||
setList(res.list)
|
||||
setTotal(res.total)
|
||||
} catch { /* 全局提示 */ } finally { setLoading(false) }
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadBoards() }, [loadBoards])
|
||||
useEffect(() => { loadThreads(page, active) }, [page, active, loadThreads])
|
||||
|
||||
const onTab = (key: string) => { setActive(key); setPage(1) }
|
||||
|
||||
const openPost = () => {
|
||||
if (!hasToken()) { setAuthOpen(true); return }
|
||||
form.resetFields()
|
||||
setPostOpen(true)
|
||||
}
|
||||
|
||||
const submitPost = async () => {
|
||||
const v = await form.validateFields()
|
||||
try {
|
||||
await api.forum.createThread(v)
|
||||
message.success('发布成功')
|
||||
setPostOpen(false)
|
||||
setActive(v.board); setPage(1)
|
||||
loadThreads(1, v.board)
|
||||
loadBoards()
|
||||
} catch { /* 全局提示 */ }
|
||||
}
|
||||
|
||||
const boardOptions = boards.map(b => ({ label: `${b.board} (${b.count})`, value: b.board }))
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 900, margin: '0 auto', padding: '24px 16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
|
||||
<a onClick={() => history.push('/landing')} style={{ color: '#888' }}>← 返回首页</a>
|
||||
<h1 style={{ flex: 1, textAlign: 'center', margin: 0, fontSize: 22 }}>健康装修大家谈</h1>
|
||||
<Button type="primary" onClick={openPost}>发帖</Button>
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
activeKey={active}
|
||||
onChange={onTab}
|
||||
items={[{ key: 'all', label: '全部' }, ...boards.map(b => ({ key: b.board, label: `${b.board} (${b.count})` }))]}
|
||||
/>
|
||||
|
||||
<List
|
||||
loading={loading}
|
||||
locale={{ emptyText: <Empty description="还没有帖子，来发第一帖吧" /> }}
|
||||
dataSource={list}
|
||||
renderItem={t => (
|
||||
<List.Item
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => history.push(`/forum/thread/${t.id}`)}
|
||||
actions={[<span key="r">💬 {t.reply_count}</span>, <span key="l">👍 {t.like_count}</span>]}
|
||||
>
|
||||
<List.Item.Meta
|
||||
title={<span>[{t.board}] {t.title}</span>}
|
||||
description={`${t.author_name} · ${new Date(t.created_at).toLocaleString()}`}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
|
||||
{total > PAGE_SIZE && (
|
||||
<div style={{ textAlign: 'center', marginTop: 16 }}>
|
||||
<Pagination current={page} pageSize={PAGE_SIZE} total={total} onChange={setPage} showSizeChanger={false} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Modal title="发布新帖" open={postOpen} onOk={submitPost} onCancel={() => setPostOpen(false)} okText="发布" destroyOnClose>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="board" label="板块" rules={[{ required: true, message: '请选择板块' }]}>
|
||||
<Select options={boardOptions} placeholder="选择板块" />
|
||||
</Form.Item>
|
||||
<Form.Item name="title" label="标题" rules={[{ required: true, message: '请输入标题' }, { max: 60 }]}>
|
||||
<Input placeholder="一句话说清问题" />
|
||||
</Form.Item>
|
||||
<Form.Item name="content" label="正文" rules={[{ required: true, message: '请输入正文' }, { max: 5000 }]}>
|
||||
<Input.TextArea rows={6} placeholder="详细描述你的问题或经验" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<PhoneAuthModal
|
||||
open={authOpen}
|
||||
onSuccess={() => { setAuthOpen(false); openPost() }}
|
||||
onCancel={() => setAuthOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue