发布消息组件开发中

pages/forum/components/publishMessage/index.tsx

+import { Form, Input, Modal } from "antd";
+import { useState } from "react";
+
+type Props = {
+  open: boolean;
+  onOk: () =>{},
+  onCancel: () => {}
+};
+
+export default function publishMessage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setConfirmLoading(true);
+    setTimeout(() => {
+      setIsModalOpen(false);
+      setConfirmLoading(false);
+    }, 2000);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+  return (
+    <Modal
+      title=""
+      open={isModalOpen}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      width={500}
+      confirmLoading={confirmLoading}
+      okText="发布"
+      okButtonProps={{ style: { height: 37, padding: "0 32px", fontSize: 16 } }}
+      cancelButtonProps={{ style: { display: "none" } }}
+    >
+      <Form style={{ paddingTop: 32 }}>
+        <Form.Item>
+          <Input placeholder="输入标题" style={{ height: 44 }}></Input>
+        </Form.Item>
+        <Form.Item>
+          <Input.TextArea
+            allowClear
+            showCount
+            placeholder="输入内容"
+            maxLength={100}
+            style={{ height: 120, resize: "none" }}
+          ></Input.TextArea>
+        </Form.Item>
+        <Form.Item></Form.Item>
+      </Form>
+    </Modal>
+  );
+}

pages/forum/index.module.scss

 .forum {
   width: 690px;
-  margin: 18px auto 0;
+  margin: 18px auto 88px;
 }
 
 .header {
@@ -133,6 +133,7 @@
 
     .btnCommentWrap {
       margin-top: 7px;
+      margin-bottom: 13px;
       text-align: right;
       padding-right: 30px;
     }
@@ -146,6 +147,7 @@
 
     .comments {
       border-top: 1px RGBA(246, 247, 249, 1) solid;
+      border-bottom: 1px RGBA(246, 247, 249, 1) solid;
 
       .commentItem {
         padding: 8px 26px;
@@ -190,4 +192,16 @@
       }
     }
   }
+
+  .showAll {
+    height: 50px;
+    font-size: 13px;
+    font-family: MicrosoftYaHei;
+    color: #000000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    cursor: pointer;
+  }
 }

pages/forum/index.tsx

-import { Button, Image, Space, Input } from "antd";
+import { Button, Image, Space, Input, Modal, Form } from "antd";
 import Layout from "~/components/layout";
 import styles from "./index.module.scss";
 import errImg from "./assets/errImg";
+import { RightOutlined } from "@ant-design/icons";
+
 
 export default function forum() {
+ 
+
   return (
     <Layout>
       <div className={styles.forum}>
         <div className={styles.header}>
           <div className={styles.title}>最新讨论</div>
-          <Button className={styles.btn} type="primary">
+          <Button className={styles.btn} type="primary" onClick={showModal}>
             发布动态
           </Button>
         </div>
@@ -36,14 +40,14 @@ export default function forum() {
                         className="img"
                         width={132}
                         height={132}
-                        src="errImg"
+                        src="error"
                         fallback={errImg}
                       />
                       <Image
                         className="img"
                         width={132}
                         height={132}
-                        src="errImg"
+                        src="error"
                         fallback={errImg}
                       />
                       <Image
@@ -128,11 +132,30 @@ export default function forum() {
                     </div>
                   </div>
                 </div>
+                <div className={styles.commentItem}>
+                  <div className={styles.commentHeadImg}></div>
+                  <div className={styles.info}>
+                    <div className={styles.nameWrap}>
+                      <div className={styles.commentName}>
+                        无人机爱好者111：
+                        <div className={styles.date}>05-16</div>
+                      </div>
+                      <div className={styles.commentContent}>
+                        无人机记录生活
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.showAll}>
+                查看全部15条评论
+                <RightOutlined size={14} />
               </div>
             </div>
           </div>
         </Space>
       </div>
+      
     </Layout>
   );
 }