页面：论坛管理

.eslintrc

@@ -47,6 +47,7 @@
     ],
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
-    "react/display-name": "off"
+    "react/display-name": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": 'off'
   }
 }

src/components/richText/index.tsx

 import React, { useEffect } from 'react';
 import E from 'wangeditor';
 import { message } from 'antd';
-// import events from '@/events';
 import { CommonAPI } from '~/api';
 
 let editor: any = null;
@@ -13,7 +12,6 @@ interface PropsType {
   isDetail?: boolean;
   height?: number;
 }
-
 const RichText: React.FC<PropsType> = ({ onChange, value, isDetail, height }) => {
   useEffect(() => {
     // 注：class写法需要在componentDidMount 创建编辑器

src/pages/categoryManage/category/index.tsx

@@ -23,7 +23,7 @@ import Viewer from '~/components/viewer';
 import './index.scss';
 import events from '~/events';
 
-const Category: FC = (props: any) => {
+const Category: FC = () => {
   const location = useLocation();
   console.log('location', location);
   const navigate = useNavigate();
@@ -57,7 +57,7 @@ const Category: FC = (props: any) => {
       width: '12%',
       editable: true,
       ellipsis: true,
-      render: (text: string, record: categoryEntity, index: number) => {
+      render: (_text: string, record: categoryEntity) => {
         return (
           <Tooltip placement='top' title={<span>{record.classifyName}</span>}>
             <span
@@ -84,12 +84,13 @@ const Category: FC = (props: any) => {
       key: 'icon',
       width: '12%',
       align: 'center',
-      render: (text: string, record: categoryEntity, index: number) => {
+      render: (_text: string, record: categoryEntity) => {
         return record.icon ? (
           <img
             src={record.icon}
             style={{ width: '25px', height: '25px' }}
             onClick={() => imgClick(record.icon)}
+            alt='图片'
           />
         ) : (
           ''
@@ -104,7 +105,7 @@ const Category: FC = (props: any) => {
       align: 'center',
       editable: true,
       ellipsis: true,
-      render: (text: string, record: categoryEntity, index: number) => {
+      render: (_text: string, record: categoryEntity) => {
         return (
           <Tooltip placement='right' title={<span>{record.description}</span>}>
             <span>{record.description}</span>
@@ -124,7 +125,7 @@ const Category: FC = (props: any) => {
       width: '55%',
       key: 'option',
       align: 'center',
-      render: (text: string, record: categoryEntity, index: number) => {
+      render: (_text: string, record: categoryEntity) => {
         return (
           <div className='table-option-wrap'>
             {record.level == 1 ? (
@@ -165,7 +166,7 @@ const Category: FC = (props: any) => {
                   确定
                 </Button>
 
-                <Button type='link' onClick={() => cancelAddCldCgy(record, index)}>
+                <Button type='link' onClick={() => cancelAddCldCgy(record)}>
                   取消
                 </Button>
               </>
@@ -232,8 +233,6 @@ const Category: FC = (props: any) => {
   const [activeViewerIndex] = useState<number>(0);
   // 新增弹窗
   const [isVisible, setIsVisible] = useState<boolean>(false);
-  // 删除分类id
-  const [cgyId, setCgyId] = useState<number>(0);
   // 弹窗title
   const [title, setTitle] = useState<string>('');
   // 当前修改的行
@@ -245,13 +244,13 @@ const Category: FC = (props: any) => {
 
   // 分享码弹窗显示/隐藏
   const [isShareCodeVble, setShareCodeVble] = useState<boolean>(false);
-  const [shareCodeUrl, setShareCodeUrl] = useState<string>('');
+  const [shareCodeUrl] = useState<string>('');
   // 按钮权限
   const btnAdd = true; //useOption(22101);
   const btnUpperDown = true; //useOption(22102);
-  const btnDir = true; //useOption(22103);
+  // const btnDir = true; //useOption(22103);
   const btnAddChildCgy = true; //useOption(22104);
-  const btnShareCode = true; //useOption(22105);
+  // const btnShareCode = true; //useOption(22105);
   const btnEdit = true; //useOption(22106);
   const btnDelete = true; //useOption(22107);
   const btnDetail = true; //useOption(22108);
@@ -328,9 +327,7 @@ const Category: FC = (props: any) => {
   const handleOk = () => {
     const addForm = baseRef.current.getForm();
     if (title === '新增分类') {
-      addForm
-        .validateFields()
-        .then(async (values: any) => {
+      addForm.validateFields().then(async (values: any) => {
         const res = await CategoryManageAPI.addClassification({
           ...values,
           pid: 0,
@@ -344,12 +341,9 @@ const Category: FC = (props: any) => {
           getCategoryList(Number(activeTabKey));
           addForm.resetFields();
         }
-        })
-        .catch((err: any) => {});
+      });
     } else {
-      addForm
-        .validateFields()
-        .then(async (values: any) => {
+      addForm.validateFields().then(async (values: any) => {
         const res = await CategoryManageAPI.updateClassification({
           ...values,
           id: currentRecord.id,
@@ -364,8 +358,7 @@ const Category: FC = (props: any) => {
           events.emit('removeFileList');
           addForm.resetFields();
         }
-        })
-        .catch((err: any) => {});
+      });
     }
   };
   const handleCancel = () => {
@@ -403,7 +396,7 @@ const Category: FC = (props: any) => {
     }
   };
   //   展开监听
-  const onExpand = (expanded: boolean, record: categoryEntity) => {
+  const onExpand = (_expanded: boolean, record: categoryEntity) => {
     const index = expandedRowKeys.findIndex((item: any) => item === record.id);
     if (index != -1) {
       expandedRowKeys.splice(index, 1);
@@ -461,7 +454,7 @@ const Category: FC = (props: any) => {
     });
   };
   // 取消新增子分类
-  const cancelAddCldCgy = (record: categoryEntity, index: number) => {
+  const cancelAddCldCgy = (record: categoryEntity) => {
     categoryList.map((item: categoryEntity) => {
       if (item.children && item.children.length != 0) {
         const index: number = item.children.findIndex(
@@ -599,7 +592,7 @@ const Category: FC = (props: any) => {
     selectedRowKeys,
     onChange: onSelectChange,
     hideSelectAll: true,
-    renderCell: (checked: boolean, record: categoryEntity) => {
+    renderCell: (_checked: boolean, record: categoryEntity) => {
       return <>{record.level === 1 ? <Checkbox onChange={() => onSelectChange(record)} /> : ''}</>;
     },
   };
@@ -621,14 +614,14 @@ const Category: FC = (props: any) => {
     });
   };
   // 分享码弹窗显示
-  const showShareCode = async (record: any) => {
-    const res: any = await CategoryManageAPI.getAppletQRCode({
-      page: 'page-sort/sortDetail/index',
-      scene: `?id=${record.id}&backTip=1`,
-    });
-    setShareCodeUrl(`data:image/png;base64,${res.result}`);
-    setShareCodeVble(true);
-  };
+  // const showShareCode = async (record: any) => {
+  //   const res: any = await CategoryManageAPI.getAppletQRCode({
+  //     page: 'page-sort/sortDetail/index',
+  //     scene: `?id=${record.id}&backTip=1`,
+  //   });
+  //   setShareCodeUrl(`data:image/png;base64,${res.result}`);
+  //   setShareCodeVble(true);
+  // };
   const shareCodeHandleCancel = () => {
     setShareCodeVble(false);
   };
@@ -690,7 +683,7 @@ const Category: FC = (props: any) => {
             rowKey='id'
             bordered
             loading={isLoading}
-            rowClassName={(record: any, index: number) => {
+            rowClassName={(record: any) => {
               if (record.children) {
                 return '';
               }

src/pages/forumManage/dynamicList/components/dynamicDetailModal/index.scss

+.dynamic-detail{
+  padding: 20px 0;
+  &-media{
+
+  }
+  &-info{
+    margin-top: 40px;
+    .info-title{
+      color: #000;
+      font-size: 15px;
+      font-weight: bold;
+    }
+    .info-meta{
+      margin-top: 10px;
+    }
+    .info-footer{
+      margin-top: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #999;
+      .operate{
+        display: flex;
+        align-items: center;
+        padding-bottom: 15px;
+        div:first-child{
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  &-comment{
+    margin-top: 40px;
+    .comment-title{
+      color: #000;
+      font-size: 15px;
+      font-weight: bold;
+    }
+    .comment-item{
+      margin-top: 10px;
+      &-header{
+        display: flex;
+        align-items: center;
+        .user-avatar{
+          margin-right: 10px;
+          img{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+          }
+        }
+        .user-name{
+
+        }
+      }
+      &-info{
+        margin-left: 30px;
+        border-bottom: 1px solid #999;
+        .info-content{
+          margin: 10px 0;
+        }
+      }
+    }
+  }
+}

src/pages/forumManage/dynamicList/components/dynamicDetailModal/index.tsx

+import { FC } from 'react';
+import { Button, Image, Modal, ModalProps } from 'antd';
+import './index.scss';
+const DynamicDetailModal: FC<ModalProps> = ({ open, onCancel }) => {
+  return (
+    <Modal open={open} onCancel={onCancel} title='查看详情' width={800}>
+      <div className='dynamic-detail'>
+        <div className='dynamic-detail-media'>
+          <Image width={200} height={200} />
+        </div>
+        <div className='dynamic-detail-info'>
+          <div className='info-title'>和男同事两人去夜爬华山，男友提分手怎么办？</div>
+          <div className='info-meta'>十一假期和和男同事两人去夜爬华山，男友提分手怎么办？</div>
+          <div className='info-footer'>
+            <div className='time'>发布于10-18</div>
+            <div className='operate'>
+              <div>15人回答</div>
+              <Button type='link'>88人爱心赞</Button>
+            </div>
+          </div>
+        </div>
+        <div className='dynamic-detail-comment'>
+          <div className='comment-title'>15条评论</div>
+          <div className='comment-item'>
+            <div className='comment-item-header'>
+              <div className='user-avatar'>
+                <img
+                  src='https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/cf528825-b958-4ccf-bf0b-a880df9e464c.jpg'
+                  alt='头像'
+                />
+              </div>
+              <div className='user-name'>张三</div>
+            </div>
+            <div className='comment-item-info'>
+              <div className='info-content'>不吐槽不骂街，咱们平和来聊聊这件事的底层逻辑。</div>
+              <div className='info-time'>10-18</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default DynamicDetailModal;

src/pages/forumManage/dynamicList/index.tsx

+import SearchBox, { searchColumns } from '~/components/search-box';
+import { Button, Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { useState } from 'react';
+import DynamicDetailModal from './components/dynamicDetailModal';
+
+const DynamicList = () => {
+  const searchColumnsData: searchColumns[] = [
+    {
+      label: '作者',
+      type: 'input',
+      name: '',
+      placeholder: '用户名称/用户UID/用户手机号码',
+    },
+  ];
+  const tableColumns: ColumnsType<any> = [
+    {
+      title: '动态描述信息',
+      align: 'center',
+    },
+    {
+      title: '作者（用户名称）',
+      align: 'center',
+    },
+    {
+      title: '用户UID',
+      align: 'center',
+    },
+    {
+      title: '用户手机号',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      align: 'center',
+      render: () => (
+        <>
+          <Button type='link' onClick={lookDynamicDetail}>
+            查看详情
+          </Button>
+          <Button type='link'>强制删除</Button>
+          <Button type='link'>强制隐藏</Button>
+        </>
+      ),
+    },
+  ];
+  const [tableData, setTableData] = useState<any>([{ id: 1 }]);
+  const [dynamicDetailModalShow, setDynamicDetailModalShow] = useState<boolean>(false);
+  const dynamicDetailModalOnCancel = () => {
+    setDynamicDetailModalShow(false);
+  };
+  //查看详情
+  const lookDynamicDetail = () => {
+    setDynamicDetailModalShow(true);
+  };
+  return (
+    <div className='dynamic-list'>
+      <SearchBox search={searchColumnsData} />
+      <Table bordered columns={tableColumns} dataSource={tableData} rowKey='id' />
+      <DynamicDetailModal open={dynamicDetailModalShow} onCancel={dynamicDetailModalOnCancel} />
+    </div>
+  );
+};
+export default DynamicList;

src/router/router.tsx

@@ -27,6 +27,7 @@ import {
   BookOutlined,
   SketchOutlined,
   DribbbleOutlined,
+  MessageOutlined,
 } from '@ant-design/icons';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -34,6 +35,7 @@ import { AgnosticIndexRouteObject } from '@remix-run/router';
 import { Spin } from 'antd';
 // 登录
 import LoginView from '~/pages/common/login';
+
 // 积分
 // import { PointList } from '~/pages/pointManage/pointList';
 // import { PointDetail } from '~/pages/pointManage/pointList/detail';
@@ -42,18 +44,27 @@ import LoginView from '~/pages/common/login';
 // 分成
 // import DivideOrder from '~/pages/pointManage/divideOrder';
 // import DivideRules from '~/pages/pointManage/divideRules';
-// 客户列表
+// 活动
+// const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
+// 客户管理
 import CustomListView from '~/pages/customManage/customList';
 import CustomMoneyView from '~/pages/customManage/customMoney';
 import CustomMoneyDetail from '~/pages/customManage/customMoney/detail';
-import AccountManageView from '~/pages/systemManage/accountManage';
-import CourseManageView from '~/pages/mallManage/courseManage';
+//资源管理
 import MaterielManageView from '~/pages/resourceManage/materielManage';
 import MaterielManageDetail from '~/pages/resourceManage/materielManage/detail';
-// 活动
-// const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
+//论坛管理
+const DynamicListView = React.lazy(() => import('~/pages/forumManage/dynamicList'));
+// 订单
+const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
+const EquipmentOrderView = React.lazy(() => import('src/pages/orderManage/equipmentOrder')); //设备订单
+const ServiceOrderView = React.lazy(() => import('src/pages/orderManage/serviceOrder')); //服务订单
+const ProductOrderDetail = React.lazy(() => import('~/pages/orderManage/productOrder/detail'));
+const ServiceOrderDetail = React.lazy(() => import('~/pages/orderManage/serviceOrder/detail'));
+const EquipmentOrderDetail = React.lazy(() => import('~/pages/orderManage/equipmentOrder/detail'));
 
 //商品管理
+import CourseManageView from '~/pages/mallManage/courseManage'; //课程管理
 const ServiceListView = React.lazy(() => import('~/pages/mallManage/serviceManage/serviceList')); //服务列表
 const ServiceDetailView = React.lazy(
   () => import('~/pages/mallManage/serviceManage/serviceDetail'),
@@ -74,19 +85,20 @@ const ProduceDetailView = React.lazy(
   () => import('~/pages/mallManage/produceManage/produceDetail'),
 ); //产品详情
 const MakeListView = React.lazy(() => import('~/pages/mallManage/makeManage/makeList'));
+// 分类管理
+const CategoryManage = React.lazy(() => import('~/pages/categoryManage/category'));
+const CategoryDetail = React.lazy(() => import('~/pages/categoryManage/category/detail'));
+// 目录管理
+const DirectoryManage = React.lazy(() => import('~/pages/categoryManage/directoryManage'));
+
+// 系统管理
+import AccountManageView from '~/pages/systemManage/accountManage';
+
 // const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
 // const IndustryDetailView = React.lazy(
 //   () => import('~/pages/mallManage/industryManage/industryDetail'),
 // ); //行业详情
 
-// 订单
-const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
-const EquipmentOrderView = React.lazy(() => import('src/pages/orderManage/equipmentOrder')); //设备订单
-const ServiceOrderView = React.lazy(() => import('src/pages/orderManage/serviceOrder')); //服务订单
-const ProductOrderDetail = React.lazy(() => import('~/pages/orderManage/productOrder/detail'));
-const ServiceOrderDetail = React.lazy(() => import('~/pages/orderManage/serviceOrder/detail'));
-const EquipmentOrderDetail = React.lazy(() => import('~/pages/orderManage/equipmentOrder/detail'));
-
 // 优惠券
 // const CouponList = React.lazy(() => import('src/pages/couponManage/couponList')); //优惠券管理
 // const CouponDetail = React.lazy(() => import('src/pages/couponManage/couponList/detail')); //优惠券明细
@@ -96,11 +108,6 @@ const EquipmentOrderDetail = React.lazy(() => import('~/pages/orderManage/equipm
 // ); // 裂变优惠券操作
 // const CouponDetailed = React.lazy(() => import('src/pages/couponManage/couponDetailed')); //优惠券明细
 
-// 分类管理
-const CategoryManage = React.lazy(() => import('~/pages/categoryManage/category'));
-const CategoryDetail = React.lazy(() => import('~/pages/categoryManage/category/detail'));
-// 目录管理
-const DirectoryManage = React.lazy(() => import('~/pages/categoryManage/directoryManage'));
 export interface RouteObjectType {
   path: AgnosticIndexRouteObject['path'];
   element: any;
@@ -153,6 +160,99 @@ export const whiteRouterList: Array<RouteObject & RouteObjectType> = [
 // 路由数组
 export const routerList: Array<RouteObjectType> = [
   {
+    path: '/customManage',
+    element: <LayoutView />,
+    errorElement: <ErrorPage />,
+    meta: {
+      id: 22000,
+      icon: <TeamOutlined />,
+      title: '客户管理',
+    },
+    children: [
+      {
+        path: '/customManage/customList',
+        element: withLoadingComponent(<CustomListView />),
+        meta: {
+          id: 26100,
+          title: '客户列表',
+          icon: <SolutionOutlined />,
+        },
+      },
+      {
+        path: '/customManage/customMoney',
+        element: withLoadingComponent(<CustomMoneyView />),
+        meta: {
+          id: 26200,
+          title: '现金管理',
+          icon: <RedEnvelopeOutlined />,
+          hidden: true,
+        },
+      },
+      {
+        path: '/customManage/customMoney/detail',
+        element: withLoadingComponent(<CustomMoneyDetail />),
+        meta: {
+          id: 26200,
+          title: '现金变更',
+          icon: <RedEnvelopeOutlined />,
+          hidden: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/resourceManage',
+    element: <LayoutView />,
+    errorElement: <ErrorPage />,
+    meta: {
+      id: 30000,
+      icon: <DribbbleOutlined />,
+      title: '资源管理',
+    },
+    children: [
+      {
+        path: '/resourceManage/materielManage',
+        element: withLoadingComponent(<MaterielManageView />),
+        meta: {
+          id: 30100,
+          title: '宣传管理',
+          icon: <SketchOutlined />,
+        },
+      },
+      {
+        path: '/resourceManage/materielManage/detail',
+        element: withLoadingComponent(<MaterielManageDetail />),
+        meta: {
+          id: 30100,
+          title: '宣传管理详情',
+          icon: <SketchOutlined />,
+          hidden: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/forumManage',
+    element: <LayoutView />,
+    errorElement: <ErrorPage />,
+    meta: {
+      id: 40000,
+      icon: <MessageOutlined />,
+      title: '论坛管理',
+    },
+    children: [
+      {
+        path: '/forumManage/dynamicList',
+        element: withLoadingComponent(<DynamicListView />),
+        meta: {
+          id: 40100,
+          title: '动态列表',
+          icon: <SketchOutlined />,
+        },
+      },
+    ],
+  },
+  {
     path: '/orderManage',
     element: <LayoutView />,
     errorElement: <ErrorPage />,
@@ -472,47 +572,6 @@ export const routerList: Array<RouteObjectType> = [
       },
     ],
   },
-  {
-    path: '/customManage',
-    element: <LayoutView />,
-    errorElement: <ErrorPage />,
-    meta: {
-      id: 22000,
-      icon: <TeamOutlined />,
-      title: '客户管理',
-    },
-    children: [
-      {
-        path: '/customManage/customList',
-        element: withLoadingComponent(<CustomListView />),
-        meta: {
-          id: 26100,
-          title: '客户列表',
-          icon: <SolutionOutlined />,
-        },
-      },
-      {
-        path: '/customManage/customMoney',
-        element: withLoadingComponent(<CustomMoneyView />),
-        meta: {
-          id: 26200,
-          title: '现金管理',
-          icon: <RedEnvelopeOutlined />,
-          hidden: true,
-        },
-      },
-      {
-        path: '/customManage/customMoney/detail',
-        element: withLoadingComponent(<CustomMoneyDetail />),
-        meta: {
-          id: 26200,
-          title: '现金变更',
-          icon: <RedEnvelopeOutlined />,
-          hidden: true,
-        },
-      },
-    ],
-  },
   // {
   //   path: '/pointManage',
   //   element: <LayoutView />,
@@ -681,37 +740,6 @@ export const routerList: Array<RouteObjectType> = [
   //   ],
   // },
   {
-    path: '/resourceManage',
-    element: <LayoutView />,
-    errorElement: <ErrorPage />,
-    meta: {
-      id: 30000,
-      icon: <DribbbleOutlined />,
-      title: '资源管理',
-    },
-    children: [
-      {
-        path: '/resourceManage/materielManage',
-        element: withLoadingComponent(<MaterielManageView />),
-        meta: {
-          id: 30100,
-          title: '宣传管理',
-          icon: <SketchOutlined />,
-        },
-      },
-      {
-        path: '/resourceManage/materielManage/detail',
-        element: withLoadingComponent(<MaterielManageDetail />),
-        meta: {
-          id: 30100,
-          title: '宣传管理详情',
-          icon: <SketchOutlined />,
-          hidden: true,
-        },
-      },
-    ],
-  },
-  {
     path: '/systemManage',
     element: <LayoutView />,
     errorElement: <ErrorPage />,