优化整体布局

src/pages/Create/index.tsx

@@ -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

src/pages/CreateRecord/index.tsx

@@ -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)]`}>
+            <Card className={`${titleSty} min-h-[calc(100vh-180px)]`}>
-                <div className="relative flex w-[800px] mx-auto mt-[50px]">
+                <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="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">
+                        <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}
+                                        width={80}
-                                        height={100}
+                                        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>
 

src/pages/Decycle/index.tsx

@@ -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}

src/pages/Draft/index.tsx

@@ -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}

src/pages/Role/index.tsx

@@ -134,8 +134,8 @@ const RolePage = () => {
         <>
             <Title value="角色管理" />
 
-            <div className='flex md:justify-between flex-col md:flex-row mx-auto mt-2'>
+            <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-96 min-h-[calc(100vh-180px)]">
+                <Card className="w-full md:w-[40%] h-94">
                     <Form
                         form={form}
                         layout="vertical"