优化整体布局
This commit is contained in:
@@ -11,6 +11,7 @@ import { getArticleDataAPI } from '@/api/Article'
|
||||
|
||||
import { BiSave } from "react-icons/bi";
|
||||
import { AiOutlineEdit, AiOutlineSend } from 'react-icons/ai';
|
||||
import { titleSty } from '@/styles/sty';
|
||||
|
||||
const CreatePage = () => {
|
||||
const [params] = useSearchParams()
|
||||
@@ -175,7 +176,7 @@ const CreatePage = () => {
|
||||
</div>
|
||||
</Title>
|
||||
|
||||
<Card className='[&>.ant-card-body]:!p-0 overflow-hidden rounded-xl'>
|
||||
<Card className={`${titleSty} overflow-hidden rounded-xl min-h-[calc(100vh-180px)]`}>
|
||||
<Editor value={content} onChange={(value) => setContent(value)} />
|
||||
|
||||
<Drawer
|
||||
|
||||
@@ -69,12 +69,22 @@ export default () => {
|
||||
{
|
||||
key: 'upload',
|
||||
label: '上传图片',
|
||||
onClick: () => setIsModalOpen(true)
|
||||
onClick: () => {
|
||||
if (imageList.length >= 4) {
|
||||
message.warning('最多只能上传 4 张图片');
|
||||
return;
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'input',
|
||||
label: '输入链接',
|
||||
onClick: () => {
|
||||
if (imageList.length >= 4) {
|
||||
message.warning('最多只能上传 4 张图片');
|
||||
return;
|
||||
}
|
||||
let inputUrl = '';
|
||||
Modal.confirm({
|
||||
title: '输入图片链接',
|
||||
@@ -107,18 +117,19 @@ export default () => {
|
||||
<>
|
||||
<Title value="闪念" />
|
||||
|
||||
<Card className={`${titleSty} min-h-[calc(100vh-270px)]`}>
|
||||
<div className="relative flex w-[800px] mx-auto mt-[50px]">
|
||||
<Card className={`${titleSty} min-h-[calc(100vh-180px)]`}>
|
||||
<div className="relative flex w-[90%] xl:w-[800px] mx-auto mt-[50px]">
|
||||
<TextArea
|
||||
rows={10}
|
||||
maxLength={500}
|
||||
placeholder="记录此刻!"
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
className="w-[800px] p-4 border-2 border-[#eee] dark:border-strokedark text-base rounded-md" />
|
||||
className="w-full p-4 border-2 border-[#eee] dark:border-strokedark text-base rounded-md"
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-4 left-4 flex items-end space-x-3">
|
||||
<div className="flex space-x-2 overflow-x-auto">
|
||||
<div className="absolute bottom-4 left-4 flex items-end space-x-3 max-w-[calc(100%-80px)]">
|
||||
<div className="flex space-x-2 overflow-x-auto scrollbar-hide">
|
||||
{imageList.length > 0 && imageList.map((item, index) => (
|
||||
<div key={index} className="group overflow-hidden relative shrink-0">
|
||||
<div className="absolute top-0 -right-6 group-hover:right-0 z-10 bg-slate-600 rounded-full cursor-pointer p-1" onClick={() => handleDelImage(item)}>
|
||||
@@ -128,21 +139,27 @@ export default () => {
|
||||
<Image
|
||||
key={index}
|
||||
src={item}
|
||||
width={100}
|
||||
height={100}
|
||||
width={80}
|
||||
height={80}
|
||||
preview={false}
|
||||
className='rounded-lg'
|
||||
className='rounded-lg md:w-[100px] md:h-[100px] xs:w-20 xs:h-20 w-15 h-15 object-cover'
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Dropdown menu={dropdownItems} placement="top">
|
||||
<LuImagePlus className="mb-1 text-4xl text-slate-700 dark:text-white hover:text-primary dark:hover:text-primary cursor-pointer shrink-0" />
|
||||
<LuImagePlus className="mb-1 text-3xl md:text-4xl text-slate-700 dark:text-white hover:text-primary dark:hover:text-primary cursor-pointer shrink-0" />
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<Button type="primary" size="large" icon={<BiLogoTelegram className="text-xl" />} className="absolute bottom-4 right-4" onClick={onSubmit} />
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
icon={<BiLogoTelegram className="text-xl" />}
|
||||
className="absolute bottom-4 right-4"
|
||||
onClick={onSubmit}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
|
||||
@@ -146,7 +146,7 @@ export default () => {
|
||||
<>
|
||||
<Title value="回收站" />
|
||||
|
||||
<Card className={`${titleSty} mt-2 min-h-[calc(100vh-270px)]`}>
|
||||
<Card className={`${titleSty} mt-2 min-h-[calc(100vh-180px)]`}>
|
||||
<Table
|
||||
rowKey="id"
|
||||
dataSource={articleList}
|
||||
|
||||
@@ -107,7 +107,7 @@ export default () => {
|
||||
<>
|
||||
<Title value="草稿箱" />
|
||||
|
||||
<Card className={`${titleSty} mt-2 min-h-[calc(100vh-270px)]`}>
|
||||
<Card className={`${titleSty} mt-2 min-h-[calc(100vh-180px)]`}>
|
||||
<Table
|
||||
rowKey="id"
|
||||
dataSource={articleList}
|
||||
|
||||
@@ -134,8 +134,8 @@ const RolePage = () => {
|
||||
<>
|
||||
<Title value="角色管理" />
|
||||
|
||||
<div className='flex md:justify-between flex-col md:flex-row mx-auto mt-2'>
|
||||
<Card className="w-full md:w-[40%] h-96 min-h-[calc(100vh-180px)]">
|
||||
<div className='flex md:justify-between flex-col md:flex-row mx-auto mt-2 min-h-[calc(100vh-180px)]'>
|
||||
<Card className="w-full md:w-[40%] h-94">
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
|
||||
Reference in New Issue
Block a user