3.4优化

src/Column/components/ColumnContentMessage.tsx

@@ -16,13 +16,18 @@ const ColumnContentMessage: React.FC<IColumnCenterProps> = props => {
   const currentIndex = 1
   const [inputShow, setInputShow] = useState<boolean>(false) // 是否显示留言输入框
   const [massageList, setMassageList] = useState<IMessageDetail[]>([]) // 是否显示留言输入框
+  const [massageNum, setMassageNum] = useState<number>(0) // 是否显示留言输入框
   const [messageContent, setMessageContent] = useState<string>('') // 是否显示留言输入框
 
   const handleChangeMessage = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setMessageContent(e.target.value)
   }
   const submitHandler = () => {
-    applyCheckColumnNote(detailId, messageContent)
+    if (messageContent) {
+      applyCheckColumnNote(detailId, messageContent)
+    } else {
+      message.error('留言不能为空!')
+    }
   }
   //   添加留言
   const { run: applyCheckColumnNote } = useRequest(ColumnService.postMessageAdd, {
@@ -41,6 +46,7 @@ const ColumnContentMessage: React.FC<IColumnCenterProps> = props => {
     formatResult: response => response.data.Data,
     onSuccess: res => {
       setMassageList(res.List)
+      setMassageNum(res.PublicMessageTotal)
     }
   })
   // 删除留言的按钮
@@ -99,7 +105,7 @@ const ColumnContentMessage: React.FC<IColumnCenterProps> = props => {
           留言会私信给作者，作者设置留言公开后将在文章下展示
         </div>
       ) : (
-        <div style={{ marginTop: 20 }}>
+        <div style={{ marginTop: 20, marginBottom: 20 }}>
           <Input.TextArea
             placeholder="留言会私信给作者，作者设置留言公开后将在文章下展示"
             autoSize={{ minRows: 3, maxRows: 3 }}
@@ -119,6 +125,7 @@ const ColumnContentMessage: React.FC<IColumnCenterProps> = props => {
           </div>
         </div>
       )}
+      <div className={styles['disclosure-num-msg']}>{massageNum}条公开留言</div>
       {massageList.length > 0 &&
         massageList.map(item => (
           <div

src/Column/css/ColumnMessage.module.scss

@@ -88,6 +88,11 @@
 .no-disclosure {
   background-color: #fff8e7;
 }
+.disclosure-num-msg {
+  color: #999999;
+  font-size: 14px;
+  margin: 20px 0;
+}
 .columndetail-messge-child-list {
   margin: 10px 0 20px 30px;
 }