引入ant design ui
ui 组件库介绍
组件总览 - Ant Design (antgroup.com)
安装 - Material-UI (mui.com)
Tailwind UI - Official Tailwind CSS Components & Templates
引入antd
Ant Design of React - Ant Design
常用组件
ts
// 引入antd 美化
import { Layout } from 'antd';
const { Header, Footer, Content } = Layout;
//引入组件
import {Button,Space,Divider} from 'antd';
//引入图标
import {
PlusOutlined ,
BarsOutlined,
StarOutlined,
DeleteOutlined,
} from '@ant-design/icons';
//引入组件
import {
Space,
Typography
} from 'antd';
//引入图标
import { FormOutlined } from '@ant-design/icons';
import { HOME_PATH } from '../router';
const { Title } = Typography;定义常用的路由常量
ts
export const HOME_PATH='/'
export const LOGIN_PATH='/login'
export const REGISTER_PATH='/register'
export const MANAGE_PATH='/manage/list'我的问卷: 列表卡片
问卷卡片 : 气泡弹出框使用
ts
<Popconfirm
title="复制问卷?"
okText="确定"
cancelText="取消"
onConfirm={duplicate}
>
<Button type="text" icon={<CopyOutlined/>} size="small">
复制
</Button>
</Popconfirm>问卷卡片:confirm弹出框
ts
const {confirm} = Modal;
confirm({
title: '确定删除吗?',
icon: <ExclamationCircleOutlined />,
content: '删除后问卷将无法恢复',
okText: '确定',
cancelText: '取消',
onOk() {
message.success("删除成功")
},
onCancel() {
message.error("取消删除")
},
})问卷卡片
ts
import React , { FC} from "react";
import styles from "./QuestionCard.module.scss";
import { Link, useNavigate } from "react-router-dom";
//引入组件
import{Divider, Space, Tag,Button, message, Popconfirm ,Modal} from "antd";
//引入icon图标
import { EditOutlined, StarOutlined ,BarsOutlined, CopyOutlined, DeleteOutlined ,ExclamationCircleOutlined} from "@ant-design/icons";
const {confirm} = Modal;
//组件传值
//定义属性
type PropsType={
id:string,
title:string,
isPublished:boolean,
isStar:boolean,
answerCount:number
createAt:string,
}
const QuestionCard:FC<PropsType> = (props:PropsType) => {
const {id,title,isPublished,isStar,answerCount,createAt}=props
const nav=useNavigate();
function duplicate(){
message.success("执行复制")
}
function del()
{
confirm({
title: '确定删除吗?',
icon: <ExclamationCircleOutlined />,
content: '删除后问卷将无法恢复',
okText: '确定',
cancelText: '取消',
onOk() {
message.success("删除成功")
},
onCancel() {
message.error("取消删除")
},
})
}
return (
<>
<div className={styles.container} >
<div className={styles.title}>
<div className={styles.left}>
<Link to={isPublished ? `/question/stat/${id}` : `/question/edit/${id}`}>
<Space>
{isStar && <StarOutlined style={{color:'red'}}/>}
{title}
</Space>
</Link>
</div>
<div className={styles.right}>
<Space>
{isPublished ? <Tag color="processing">已发布</Tag>: <Tag>未发布</Tag>}
<span> 答卷数量: {answerCount} </span>
<span>{createAt}</span>
</Space>
</div>
</div>
<Divider style={{margin:'10px 0'}}></Divider>
<div className={styles.bottom}>
<div className={styles.left}>
<Space>
<Button icon={<EditOutlined/>} type="text" size='small' onClick={()=>nav(`/question/edit/${id}`)} >编辑问卷</Button>
<Button icon={<BarsOutlined/>} type="text" size='small' onClick={()=>nav(`/question/stat/${id}`)}>问卷统计</Button>
</Space>
</div>
<div className={styles.right}>
<Space>
<Button type="text" icon={<StarOutlined/>} size="small">
{isStar ? "取消标星" : "标星问卷"}
</Button>
<Popconfirm
title="复制问卷?"
okText="确定"
cancelText="取消"
onConfirm={duplicate}
>
<Button type="text" icon={<CopyOutlined/>} size="small">
复制
</Button>
</Popconfirm>
<Button type="text" icon={<DeleteOutlined/>} size="small" onClick={del}>
删除
</Button>
</Space>
</div>
</div>
</div>
</>
)
}
export default QuestionCard;星标问卷:列表卡片+分页
和上面差不多
回收站 : 表格
ts
/表格列
const tableColums=[
{
title:"标题",
dataIndex:"title",
// key:"title"//循环的key,他会默认取dataIndex的值
},
{
title:"是否发布",
dataIndex:"isPublished",
render:(isPublished:boolean)=>{
return isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>
}
},
{
title:"答卷",
dataIndex:"answerCount"
},
{
title:"创建时间",
dataIndex:"createAt"
}
]
//问卷列表数据模拟
const rawQuestionList=[
{
//_id:"1" mondob数据库
id:'1',
title:"问卷1",
isPublished:false,
isStar:true,
answerCount:100,
createAt:"4月5日 12:23"
},
{
id:'2',
title:"问卷2",
isPublished:true,
isStar:false,
answerCount:100,
createAt:"4月5日 12:23"
},
{
id:'3',
title:"问卷3",
isPublished:true,
isStar:true,
answerCount:100,
createAt:"4月5日 12:23"
},
{
id:'4',
title:"问卷4",
isPublished:false,
isStar:false,
answerCount:100,
createAt:"4月5日 12:23"
}
]
<Table
dataSource={questionList}
columns={tableColums}
pagination={false}
rowKey={(record)=>record.id}
/>添加恢复删除功能
ts
//将jsx片段提取成为变量
//表格项提取出来
const TableElem = <>
<div style={{marginBottom:"16px"}}>
<Space>
<Button type="primary" disabled={selectedIds.length==0}>恢复</Button>
<Button danger disabled={selectedIds.length==0} onClick={del}>彻底删除</Button>
</Space>
</div>
<Table
dataSource={questionList}
columns={tableColums}
pagination={false}
rowKey={(record)=>record.id}
rowSelection={{
type:"checkbox",
onChange:(selectedRowKeys)=>{
setSelectedIds(selectedRowKeys as string[])
}
}}
/>
</>