React + 项目(从基础到实战) -- 第六期

引入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

常用组件

// 引入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;

定义常用的路由常量

export const HOME_PATH='/'

  

export const LOGIN_PATH='/login'

  

export const REGISTER_PATH='/register'

  

export const MANAGE_PATH='/manage/list'

我的问卷: 列表卡片

问卷卡片 : 气泡弹出框使用

 <Popconfirm

                    title="复制问卷?"

                    okText="确定"

                    cancelText="取消"

                    onConfirm={duplicate}

                >

                  <Button type="text" icon={<CopyOutlined/>} size="small">

                        复制

                  </Button>

                </Popconfirm>

问卷卡片:confirm弹出框

const {confirm} = Modal;


 confirm({

         title: '确定删除吗?',

         icon: <ExclamationCircleOutlined />,

         content: '删除后问卷将无法恢复',

         okText: '确定',

         cancelText: '取消',

         onOk() {

           message.success("删除成功")

         },

         onCancel() {

           message.error("取消删除")

         },

     })

问卷卡片

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;

星标问卷:列表卡片+分页

和上面差不多

回收站 : 表格

/表格列

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}

                />

添加恢复删除功能

 //将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[])

                   }

                 }}

               />

      </>