暂停 等ui

src/Column/Column.service.ts

@@ -118,6 +118,17 @@ export interface IColumnDetail {
   Detail: IActivityDetialBase
 }
 
+export interface IMessageDetail {
+  Msg: string
+  CheckIds: number[]
+  Id: number
+  ChildrenList: IMsgChildrenList[]
+}
+
+export interface IMsgChildrenList {
+  Msg: string
+  Ind: number
+}
 export interface IActivityDetialBase {
   IsNeedBusinessCard: boolean // 是否需要上传名片
   CompanyTags: string[] // 公司标签

src/Column/ColumnIndex.tsx

@@ -21,6 +21,9 @@ import { MaterialService } from 'Material/Material.service'
 import ColumnContent from './components/ColumnContent'
 import ColumnInfoEdit from './components/ColumnInfoEdit'
 import ColumnCenter from './components/ColumnCenter'
+import ColumnMessage from './components/ColumnMessage'
+import LikesCollections from './components/LikesCollections'
+import ColumnFansModal from './components/ColumnFansModal'
 import styles from './css/ColumnIndex.module.scss'
 
 interface IColumnIndexProps {
@@ -45,6 +48,7 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
   const pageSize = 20
   const [editInfoVisible, setEditInfoVisible] = useState<boolean>(false) // 修改专栏信息
   const [openCenter, setOpenCenter] = useState<boolean>(false) // 打开内容中心
+  const [openMessage, setOpenMessage] = useState<boolean>(false) // 打开留言管理
   const [actColumnAuthorID, setActColumnAuthorID] = useState<number | undefined>(undefined) // 当前选中的专栏ID
   const [columnAuthorListHasMore, setColumnAuthorListHasMore] = useState<boolean>(true) // 专栏作者列表的加载更多
   const [columnAuthorListCurrentPage, setColumnAuthorListCurrentPage] = useState<number>(1) // 专栏作者列表的当前页码
@@ -54,6 +58,9 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
   const [columnListCurrentPage, setColumnListCurrentPage] = useState<number>(1) // 专栏文章列表的当前页码
   const [columnList, setColumnList] = useState<IColumnDetail[]>([]) // 专栏文章列表
 
+  const [collectionsShow, setCollectionsShow] = useState<boolean>(false) // 获赞与收藏的开关
+  const [fansModalShow, setFansModalShow] = useState<boolean>(false) // 粉丝开关
+
   useEffect(() => {
     getColumnAuthorList(pageSize, 1)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -155,7 +162,7 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
     imgWindow?.document.write(image.outerHTML)
   }
 
-  const handleOpenModel = (type: 'editInfo' | 'openCenter' | 'openCreate') => {
+  const handleOpenModel = (type: 'editInfo' | 'openCenter' | 'openCreate' | 'openMessage') => {
     if (type !== 'editInfo' && !columnAuthor?.IsImproveInformation) {
       message.error('请先完善专栏信息')
       return
@@ -167,6 +174,9 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
       case 'openCenter':
         setOpenCenter(true)
         break
+      case 'openMessage':
+        setOpenMessage(true)
+        break
       case 'openCreate':
         window.open(`/column/editor/${props.columnId}`)
         break
@@ -175,7 +185,7 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
     }
   }
 
-  const handleClose = (type: 'editInfo' | 'openCenter') => {
+  const handleClose = (type: 'editInfo' | 'openCenter' | 'openMessage') => {
     switch (type) {
       case 'editInfo':
         setEditInfoVisible(false)
@@ -183,6 +193,9 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
       case 'openCenter':
         setOpenCenter(false)
         break
+      case 'openMessage':
+        setOpenMessage(false)
+        break
       default:
         break
     }
@@ -247,6 +260,16 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
     getColumnAuthorList(pageSize, 1)
   }
 
+  // 显示获赞和收藏弹框
+  const showCollectionsFansModal = (type: string) => {
+    type === '粉丝' ? setFansModalShow(true) : setCollectionsShow(true)
+  }
+  // 获赞和收藏弹框的关闭事件
+  const CollectionFansClose = (type: string) => {
+    console.log(type)
+    type === 'Fans' ? setFansModalShow(false) : setCollectionsShow(false)
+  }
+
   if (columnAuthor?.List?.length === 0)
     return (
       <div className={styles['column-empty-wrapper']}>
@@ -351,11 +374,21 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
                     <div className="columnindex-count">{columnInfo?.SpecialArticleNum || 0}</div>
                     <div className="columnindex-count-title">文章</div>
                   </div>
-                  <div className="columnindex-count-item">
+                  <div
+                    className="columnindex-count-item"
+                    onClick={() => {
+                      showCollectionsFansModal('收藏')
+                    }}
+                  >
                     <div className="columnindex-count">{columnInfo?.CollectNum || 0}</div>
-                    <div className="columnindex-count-title">被收藏</div>
+                    <div className="columnindex-count-title">获赞与收藏</div>
                   </div>
-                  <div className="columnindex-count-item">
+                  <div
+                    className="columnindex-count-item"
+                    onClick={() => {
+                      showCollectionsFansModal('粉丝')
+                    }}
+                  >
                     <div className="columnindex-count">{columnInfo?.FollowNum || 0}</div>
                     <div className="columnindex-count-title">粉丝</div>
                   </div>
@@ -423,6 +456,11 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
             onClick={handleOpenModel.bind(this, 'openCenter')}
           />
           <div className="columnindex-right-text">内容中心</div>
+          <ColumnCenterSvg
+            className="columnindex-right-svg columnindex-svg-center"
+            onClick={handleOpenModel.bind(this, 'openMessage')}
+          />
+          <div className="columnindex-right-text">留言管理</div>
         </div>
       ) : null}
       {editInfoVisible ? (
@@ -440,6 +478,9 @@ const ColumnIndex: React.FC<IColumnIndexProps> = props => {
         />
       ) : null}
       {openCenter ? <ColumnCenter open={openCenter} onClose={handleClose} /> : null}
+      {openMessage ? <ColumnMessage open={openMessage} onClose={handleClose} /> : null}
+      <LikesCollections open={collectionsShow} onClose={CollectionFansClose} />
+      <ColumnFansModal open={fansModalShow} onClose={CollectionFansClose} />
     </div>
   )
 }

src/Column/components/ColumnFansModal.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request/es'
+
+import { Modal } from 'antd'
+
+interface IColumnCenterProps {
+  open: boolean // 是否打开
+  onClose: (type: 'Collection' | 'Fans') => void // 关闭
+}
+
+/**研选专栏 */
+const ColumnFansModal: React.FC<IColumnCenterProps> = props => {
+  const { open, onClose } = props
+
+  const handleOnClose = () => {
+    props.onClose('Fans')
+  }
+  return (
+    <Modal title="粉丝列表" open={open} onCancel={handleOnClose} footer={null}>
+      <div>暂时没有粉丝</div>
+    </Modal>
+  )
+}
+
+export default ColumnFansModal

src/Column/components/ColumnMessage.tsx

@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request/es'
+
+import { Checkbox, Drawer, Modal, Tabs, TabsProps, message, Button, Form, Input, Row } from 'antd'
+import { ReactComponent as Close } from 'assets/close.svg'
+import { ColumnService, IMessageDetail } from 'Column/Column.service'
+import styles from '../css/ColumnIndex.module.scss'
+const { Item } = Form
+interface IColumnCenterProps {
+  open: boolean // 是否打开
+  onClose: (type: 'editInfo' | 'openCenter' | 'openMessage') => void // 关闭
+}
+
+/**研选专栏 留言管理 */
+const ColumnMessage: React.FC<IColumnCenterProps> = props => {
+  const [messageList, setMessageList] = useState<IMessageDetail[]>([
+    {
+      Msg: 'Item 1',
+      CheckIds: [],
+      Id: 1,
+      ChildrenList: [
+        { Msg: 'Child 1-1', Ind: 11 },
+        { Msg: 'Child 1-2', Ind: 12 }
+      ]
+    },
+    {
+      Msg: 'Item 2',
+      CheckIds: [],
+      Id: 2,
+      ChildrenList: [
+        { Msg: 'Child 2-1', Ind: 22 },
+        { Msg: 'Child 2-2', Ind: 21 }
+      ]
+    }
+  ]) // 列表
+  const [selectCheckbox, setSelectCheckbox] = useState<(string | number)[]>([]) // 选择Id
+  const [msgTextVisible, setMsgTextVisible] = useState<boolean>(false) // 选择Id
+  const [form] = Form.useForm()
+  useEffect(() => {
+    console.log(11)
+  }, [])
+
+  // 列表
+  // const { run: getColumnCenterList } = useRequest(ColumnService.getColumnCenterList, {
+  //   manual: true,
+  //   formatResult: response => response.data.Data,
+  //   onSuccess: res => {
+  //     setMessageList(res)
+  //   }
+  // })
+  const handleChange = (checkedValues: number[], item: IMessageDetail) => {
+    const updatedMessage = messageList.map(msg => {
+      if (msg.Id === item.Id) {
+        return { ...msg, CheckIds: checkedValues }
+      }
+      return msg
+    })
+    if (checkedValues.length > 0) {
+      setSelectCheckbox([...selectCheckbox, item.Id])
+    } else {
+      setSelectCheckbox(selectCheckbox.filter(key => key !== item.Id))
+    }
+    setMessageList(updatedMessage)
+  }
+
+  const handleChildChange = (checkedId: number, parentId: number) => {
+    const checkedValues: Array<number> = []
+    if (checkedId) {
+      messageList.forEach(item => {
+        if (item.Id === parentId) {
+          checkedValues.push(item.Id)
+          item.ChildrenList.forEach(child => checkedValues.push(child.Ind))
+        }
+      })
+      handleChange(checkedValues, messageList.find(item => item.Id === parentId)!)
+    }
+  }
+  // 设置共开的按钮点击事件
+  const setupClickHandler = () => {
+    console.log(selectCheckbox)
+  }
+  // 留言的确定事件
+  const handleFinish = (value: { Content: string }) => {
+    console.log(value)
+  }
+  // 留言的取消事件
+
+  const handleOnModalClose = () => {
+    form.resetFields()
+    setMsgTextVisible(false)
+  }
+  // 算出留言回复的按钮
+  const deleteHandle = (id: number) => {
+    Modal.confirm({
+      title: '提醒',
+      content: '确定要删除此回复内容吗？',
+      okText: '确定',
+      cancelText: '取消',
+      centered: true,
+      closable: true,
+      onOk: () => {
+        console.log('点击了')
+
+        // 这里就是删除的请求了
+      }
+    })
+  }
+  // 点击回复的按钮
+  const replyMsgHandler = (item: IMessageDetail) => {
+    console.log(item)
+    setMsgTextVisible(true)
+  }
+
+  // 点击了置顶按钮
+  const toppingHandler = (item: IMessageDetail) => {
+    console.log(item)
+  }
+
+  // 点击取消精选
+  const cancelSelectionHandler = (item: IMessageDetail) => {
+    console.log(item)
+    Modal.confirm({
+      title: '提醒',
+      content: '取消精选后，留言将回到普通留言栏下',
+      okText: '确定',
+      cancelText: '取消',
+      centered: true,
+      closable: true,
+      onOk: () => {
+        console.log('点击了')
+
+        // 这里就是删除的请求了
+      }
+    })
+  }
+
+  const items: TabsProps['items'] = [
+    {
+      key: '1',
+      label: <span className="column-tabs">普通留言</span>,
+      children: (
+        <div className="columncenter-content">
+          <div>
+            <Button type="primary" size="small" disabled={!selectCheckbox.length} onClick={setupClickHandler}>
+              设为公开
+            </Button>
+            留言设为公开后将在文章下展示
+          </div>
+          {messageList.map(item => (
+            <div key={item.Id}>
+              <Checkbox
+                key={item.Id}
+                checked={item.CheckIds.length > 0} // 当Item有任何一个Child被选中时，Item被选中
+                onChange={e => {
+                  const allChildIds = (item.ChildrenList || []).map(child => child.Ind)
+                  // 当Item的Checkbox被点击时，选择或取消选择所有子项
+                  handleChange(e.target.checked ? allChildIds : [], item)
+                }}
+              >
+                {item.Msg}
+              </Checkbox>
+              <p>
+                <Button type="primary" size="small" onClick={() => replyMsgHandler(item)}>
+                  回复
+                </Button>
+              </p>
+              {item.ChildrenList?.map(child => (
+                <div key={child.Ind} style={{ marginLeft: 20 }}>
+                  <Checkbox
+                    disabled={item.CheckIds.length > 0}
+                    key={child.Ind}
+                    checked={item.CheckIds.includes(child.Ind)}
+                    onChange={() => handleChildChange(child.Ind, item.Id)}
+                  >
+                    {child.Msg}
+                  </Checkbox>
+                  <p>
+                    <Button type="primary" size="small" onClick={() => deleteHandle(child.Ind)} danger>
+                      删除
+                    </Button>
+                  </p>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )
+    },
+
+    {
+      key: '2',
+      label: <span className="column-tabs">公开的留言</span>,
+      children: (
+        <div className="columncenter-content">
+          {messageList.map(item => (
+            <div key={item.Id}>
+              {item.Msg}
+
+              <p>
+                <Button type="primary" size="small" onClick={() => toppingHandler(item)}>
+                  置顶
+                </Button>
+                <Button type="primary" size="small" onClick={() => cancelSelectionHandler(item)}>
+                  取消精选
+                </Button>
+              </p>
+              {item.ChildrenList?.map(child => (
+                <div key={child.Ind} style={{ marginLeft: 20 }}>
+                  {child.Msg}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )
+    }
+  ]
+
+  // 点击了tabs的change
+  const onChange = (key: string) => {
+    // setMessageList()
+    // getColumnCenterList(Number(key))
+  }
+
+  // 关闭了侧边Drawer
+  const handleOnClose = () => {
+    props.onClose('openMessage')
+  }
+
+  return (
+    <Drawer
+      title="留言管理"
+      placement="right"
+      width="625px"
+      closable={false}
+      onClose={handleOnClose}
+      open={props.open}
+      extra={<Close className="com-cursor-p" onClick={handleOnClose} />}
+      className={styles['columnindex-drawer']}
+    >
+      <Modal title="留言回复" centered open={msgTextVisible} onCancel={handleOnModalClose} footer={null}>
+        <Form form={form} onFinish={handleFinish} labelAlign="left" preserve>
+          <Item
+            label=""
+            name="Content"
+            wrapperCol={{ span: 24 }}
+            rules={[
+              { required: true, message: '请输入内容!' },
+              {
+                pattern: /^[^\s]*$/,
+                message: '禁止输入空格'
+              }
+            ]}
+          >
+            <Input.TextArea
+              placeholder="留言回复将私信给读者，设为公开后可在文章下展示"
+              maxLength={100}
+              showCount={true}
+              autoSize={{ minRows: 5, maxRows: 5 }}
+            />
+          </Item>
+          <Row align="middle" justify="center">
+            <Item>
+              <Button onClick={handleOnModalClose} className="m-r-xs">
+                取消
+              </Button>
+              <Button type="primary" htmlType="submit">
+                提交
+              </Button>
+            </Item>
+          </Row>
+        </Form>
+      </Modal>
+      <Tabs defaultActiveKey={'1'} items={items} onChange={onChange} className="columnindex-tab-wrapper" />
+    </Drawer>
+  )
+}
+
+export default ColumnMessage

src/Column/components/LikesCollections.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request/es'
+
+import { Modal } from 'antd'
+
+interface IColumnCenterProps {
+  open: boolean // 是否打开
+  onClose: (type: 'Collection' | 'Fans') => void // 关闭
+}
+
+/**研选专栏 */
+const LikesCollections: React.FC<IColumnCenterProps> = props => {
+  const { open, onClose } = props
+
+  const handleOnClose = () => {
+    props.onClose('Collection')
+  }
+  return (
+    <Modal title="获赞与收藏" open={open} onCancel={handleOnClose} footer={null}>
+      <div>当前获得点赞数 999+</div>
+      <div>当前获得收藏数 999+</div>
+    </Modal>
+  )
+}
+
+export default LikesCollections

src/Column/css/ColumnIndex.module.scss

@@ -133,9 +133,13 @@
           .columnindex-count-item {
             margin-right: 40px;
             text-align: center;
+            cursor: pointer;
             &:last-child {
               margin-right: 0;
             }
+            &:first-child {
+              cursor: default;
+            }
             .columnindex-count {
               font-size: 36px;
               font-weight: bold;