perf: 调整邮件列表按钮大小、文字

dev/ckeditor
LiaoYijun 4 months ago
parent e9e409ed0d
commit 95a1b16085

@ -1,11 +1,11 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { ReloadOutlined, ReadOutlined, RightOutlined, LeftOutlined, ExpandOutlined } from '@ant-design/icons' import { ReloadOutlined, ReadOutlined, RightOutlined, LeftOutlined, SearchOutlined, MailOutlined } from '@ant-design/icons'
import { Flex, Button, Tooltip, List, Form, Row, Col, Input, Checkbox, DatePicker, Switch, Breadcrumb, Skeleton } from 'antd' import { Flex, Button, Tooltip, List, Form, Row, Col, Input, Checkbox, DatePicker, Switch, Breadcrumb, Skeleton } from 'antd'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { useEmailList } from '@/hooks/useEmail' import { useEmailList } from '@/hooks/useEmail'
import { isEmpty } from '@/utils/commons' import { isEmpty } from '@/utils/commons'
import { MailboxDirIcon } from './MailboxDirIcon' import { MailboxDirIcon } from './MailboxDirIcon'
import { AttachmentIcon, MailCheckIcon, MailOpenIcon, MailUnreadIcon } from '@/components/Icons' import { AttachmentIcon, MailCheckIcon, MailOpenIcon } from '@/components/Icons'
import NewEmailButton from './NewEmailButton' import NewEmailButton from './NewEmailButton'
const { RangePicker } = DatePicker const { RangePicker } = DatePicker
@ -131,8 +131,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
return ( return (
<> <>
<div className='bg-white h-auto px-1 flex gap-1 items-center'> <div className='bg-white h-auto px-1 flex gap-1 items-center'>
<NewEmailButton /> <Flex wrap gap='middle' justify={'center'} className='min-w-30 px-1'>
<Flex wrap gap='middle' justify={'center'} className='min-w-40'>
<Tooltip title='全选'> <Tooltip title='全选'>
<Checkbox <Checkbox
indeterminate={selectedItems.length > 0 && selectedItems.length < pagination.pagedList.length} indeterminate={selectedItems.length > 0 && selectedItems.length < pagination.pagedList.length}
@ -146,44 +145,34 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
} }
}}></Checkbox> }}></Checkbox>
</Tooltip> </Tooltip>
<Tooltip title='标记已读'> <Tooltip title='刷新'>
<Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} onClick={refresh} />
</Tooltip>
</Flex>
<NewEmailButton />
<Button <Button
shape='circle'
type='text'
size='small' size='small'
icon={<MailOpenIcon />} icon={<MailOpenIcon />}
onClick={() => { onClick={() => {
markAsRead(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([])) markAsRead(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
}} }}
/> >已读</Button>
</Tooltip> <Button
<Tooltip title='已处理'> size='small'
icon={<MailOutlined />}
onClick={() => {
console.info('未读未实现')
}}
>未读</Button>
<Button <Button
shape='circle'
type='text'
size='small' size='small'
icon={<MailCheckIcon />} icon={<MailCheckIcon />}
onClick={() => { onClick={() => {
markAsProcessed(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([])) markAsProcessed(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
}} }}
/> >已处理</Button>
</Tooltip> <Button size='small' icon={<SearchOutlined />}>查找</Button>
<Tooltip title='刷新'>
<Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} onClick={refresh} />
</Tooltip>
</Flex>
<Input.Search
className=''
allowClear
onChange={(e) => {}}
onPressEnter={(e) => {
return false
}}
placeholder={`邮件主题`}
/>
<Tooltip title='高级搜索'>
<Switch checkedChildren={<ExpandOutlined />} unCheckedChildren={<ExpandOutlined />} defaultChecked={false} />
</Tooltip>
</div> </div>
<div className='bg-white h-auto p-1 flex gap-1 items-center hidden'> <div className='bg-white h-auto p-1 flex gap-1 items-center hidden'>
<Form <Form

@ -25,6 +25,7 @@ const NewEmailButton = ({ ...props }) => {
return ( return (
<> <>
<Dropdown.Button <Dropdown.Button
size='small'
className={`w-auto ${props.className}`} className={`w-auto ${props.className}`}
placement='bottom' placement='bottom'
arrow arrow

Loading…
Cancel
Save