最新活动

config/routes.ts

@@ -42,6 +42,12 @@ export default [
     component: './Activity',
   },
   {
+    name: '最新活动',
+    locale: false,
+    path: '/new-activities',
+    component: './NewActivities',
+  },
+  {
     path: '/user',
     layout: false,
     routes: [
@@ -52,7 +58,6 @@ export default [
       },
     ],
   },
-
   {
     path: '/',
     redirect: '/match',

src/pages/Activity/index.tsx

@@ -9,7 +9,7 @@ import {
   ProFormUploadButton,
   ProTable,
 } from '@ant-design/pro-components';
-import { Button, message, Popconfirm } from 'antd';
+import { Button, FormInstance, message, Popconfirm } from 'antd';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
@@ -22,7 +22,6 @@ const modules = {
     ['link', 'image'],
     [{ align: [] }],
     [{ color: [] }, { background: [] }],
-    // ['clean'],
   ],
 };
 
@@ -31,6 +30,7 @@ const ActivityManagement: React.FC = () => {
   const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
   const [currentActivity, setCurrentActivity] = useState<API.ActivityItem | null>(null);
   const actionRef = useRef<ActionType>();
+  const formRef = useRef<FormInstance>(null);
 
   const [backgroundImageUrl, setBackgroundImageUrl] = useState<string>('');
 
@@ -42,13 +42,13 @@ const ActivityManagement: React.FC = () => {
       dataIndex: 'title',
       copyable: true,
       ellipsis: true,
-      tip: '标题过长会自动收缩',
+      //   tip: '标题过长会自动收缩',
     },
     {
       title: '活动内容',
       dataIndex: 'content',
       ellipsis: true,
-      tip: '内容过长会自动收缩',
+      //   tip: '内容过长会自动收缩',
     },
     {
       title: '是否激活',
@@ -98,9 +98,8 @@ const ActivityManagement: React.FC = () => {
     }
   };
 
-  const handleEdit = async (fields: API.ActivityItem) => {
+  const handleEdit = async (updateData: API.ActivityItem) => {
     try {
-      const { _id, ...updateData } = fields;
       const response = await updateActivity(currentActivity._id, updateData);
 
       if (response.success) {
@@ -181,10 +180,10 @@ const ActivityManagement: React.FC = () => {
       <ModalForm
         title="新建活动"
         width="400px"
+        formRef={formRef}
         open={createModalVisible}
         onOpenChange={setCreateModalVisible}
         onFinish={async (value) => {
-          console.log('value', value, backgroundImageUrl);
           const formData = {
             ...value,
             backgroundImage: backgroundImageUrl,
@@ -196,38 +195,21 @@ const ActivityManagement: React.FC = () => {
             if (actionRef.current) {
               actionRef.current.reload();
             }
+            formRef.current?.resetFields();
           }
         }}
       >
-        <ProForm.Item
-          name="title"
-          label="活动标题"
-          rules={[
-            {
-              required: true,
-              message: '活动标题为必填项',
-            },
-          ]}
-        >
+        <ProForm.Item name="title" label="活动标题">
           <ReactQuill
             theme="snow"
             modules={modules}
             style={{
-              height: '150px', // 增加高度
+              height: '150px',
               paddingBottom: '60px',
             }}
           />
         </ProForm.Item>
-        <ProForm.Item
-          name="content"
-          label="活动内容"
-          rules={[
-            {
-              required: true,
-              message: '活动内容为必填项',
-            },
-          ]}
-        >
+        <ProForm.Item name="content" label="活动内容">
           <ReactQuill
             theme="snow"
             modules={modules}
@@ -249,9 +231,9 @@ const ActivityManagement: React.FC = () => {
           onChange={(info) => {
             const { status } = info.file;
             if (status === 'done') {
-              message.success(`文件上传成功`);
+              message.success('图片上传成功');
             } else if (status === 'error') {
-              message.error(`文件上传失败`);
+              message.error('图片上传失败');
             }
           }}
         />
@@ -284,12 +266,12 @@ const ActivityManagement: React.FC = () => {
         <ProForm.Item
           name="title"
           label="活动标题"
-          rules={[
-            {
-              required: true,
-              message: '活动标题为必填项',
-            },
-          ]}
+          //   rules={[
+          //     {
+          //       required: true,
+          //       message: '活动标题为必填项',
+          //     },
+          //   ]}
         >
           <ReactQuill
             theme="snow"
@@ -304,12 +286,12 @@ const ActivityManagement: React.FC = () => {
         <ProForm.Item
           name="content"
           label="活动内容"
-          rules={[
-            {
-              required: true,
-              message: '活动内容为必填项',
-            },
-          ]}
+          //   rules={[
+          //     {
+          //       required: true,
+          //       message: '活动内容为必填项',
+          //     },
+          //   ]}
         >
           <ReactQuill
             theme="snow"

src/pages/Match/index.tsx

@@ -589,12 +589,12 @@ const MatchList: React.FC = () => {
           label="比赛日期"
         />
         <ProFormText
-          rules={[
-            {
-              required: true,
-              message: '联赛是必填项',
-            },
-          ]}
+          // rules={[
+          //   {
+          //     required: true,
+          //     message: '联赛是必填项',
+          //   },
+          // ]}
           width="md"
           name="league"
           label="联赛"

src/pages/NewActivities/index.tsx

@@ -0,0 +1,311 @@
+import {
+  createNewActivity,
+  deleteNewActivity,
+  getNewActivities,
+  updateNewActivity,
+} from '@/services/api';
+import { PlusOutlined } from '@ant-design/icons';
+import {
+  ActionType,
+  ModalForm,
+  ProColumns,
+  ProForm,
+  ProFormDigit,
+  ProFormSwitch,
+  ProFormText,
+  ProFormUploadButton,
+  ProTable,
+} from '@ant-design/pro-components';
+import { Button, FormInstance, message, Popconfirm } from 'antd';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+
+const modules = {
+  toolbar: [
+    [{ header: [1, 2, false] }],
+    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+    [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+    ['link', 'image'],
+    [{ align: [] }],
+    [{ color: [] }, { background: [] }],
+  ],
+};
+
+const ActivityManagement: React.FC = () => {
+  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
+  const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
+  const [currentActivity, setCurrentActivity] = useState<API.NewActivityItem | null>(null);
+  const actionRef = useRef<ActionType>();
+  const formRef = useRef<FormInstance>(null);
+
+  const [iconUrl, setIconUrl] = useState<string>('');
+
+  console.log('currentActivity', currentActivity);
+
+  const columns: ProColumns<API.NewActivityItem>[] = [
+    {
+      title: '活动标题',
+      dataIndex: 'title',
+      copyable: true,
+      ellipsis: true,
+    },
+    {
+      title: '链接',
+      dataIndex: 'link',
+      ellipsis: true,
+    },
+    {
+      title: '排序',
+      dataIndex: 'order',
+      sorter: true,
+    },
+    {
+      title: '是否激活',
+      dataIndex: 'isActive',
+      valueEnum: {
+        true: { text: '是', status: 'Success' },
+        false: { text: '否', status: 'Default' },
+      },
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      key: 'option',
+      render: (text, record) => [
+        <a
+          key="edit"
+          onClick={() => {
+            console.log('record', record);
+
+            setCurrentActivity(record);
+            setIconUrl(record.icon);
+            setEditModalVisible(true);
+          }}
+        >
+          编辑
+        </a>,
+        <Popconfirm
+          key="delete"
+          title="确认删除"
+          description={`您确定要删除活动 "${record.title}" 吗？`}
+          onConfirm={() => handleDelete(record)}
+          okText="确定"
+          cancelText="取消"
+        >
+          <a>删除</a>
+        </Popconfirm>,
+      ],
+    },
+  ];
+
+  const handleAdd = async (fields: API.NewActivityItem) => {
+    try {
+      const response = await createNewActivity(fields);
+      if (response.success) {
+        message.success('创建成功');
+        return true;
+      } else {
+        message.error(response.message || '创建失败，请重试！');
+        return false;
+      }
+    } catch (error) {
+      console.error('创建活动时出错:', error);
+      message.error('创建失败，请重试！');
+      return false;
+    }
+  };
+
+  const handleEdit = async (updateData: API.NewActivityItem) => {
+    try {
+      const response = await updateNewActivity(currentActivity._id, updateData);
+
+      if (response.success) {
+        message.success('更新成功');
+        return true;
+      } else {
+        message.error(response.message || '更新失败，请重试！');
+        return false;
+      }
+    } catch (error) {
+      console.error('更新活动时出错:', error);
+      return false;
+    }
+  };
+
+  const handleDelete = async (record: API.NewActivityItem) => {
+    try {
+      const res = await deleteNewActivity(record._id);
+      if (res.success) {
+        message.success('活动已成功删除');
+        actionRef.current?.reload();
+      } else {
+        message.error(res.message || '删除失败，请重试');
+      }
+    } catch (error) {
+      console.error('删除活动时出错:', error);
+      message.error('删除失败，请重试');
+    }
+  };
+
+  const handleUpload = useCallback(async (file) => {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const uploadResponse = await fetch(`${API_URL}/api/upload`, {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!uploadResponse.ok) {
+        throw new Error(`Upload failed with status ${uploadResponse.status}`);
+      }
+
+      const uploadData = await uploadResponse.json();
+
+      console.log('uploadData', uploadData);
+
+      if (uploadData.success) {
+        setIconUrl(uploadData.url);
+        return {
+          status: 'done',
+          url: uploadData.url,
+        };
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      message.error(`上传失败: ${error.message}`);
+      return {
+        status: 'error',
+        error: error.message,
+      };
+    }
+  }, []);
+
+  return (
+    <>
+      <ProTable<API.NewActivityItem>
+        headerTitle="最新活动"
+        actionRef={actionRef}
+        rowKey="_id"
+        search={false}
+        toolBarRender={() => [
+          <Button type="primary" key="primary" onClick={() => setCreateModalVisible(true)}>
+            <PlusOutlined /> 新建活动
+          </Button>,
+        ]}
+        request={getNewActivities}
+        columns={columns}
+      />
+
+      <ModalForm
+        title="新建活动"
+        width="400px"
+        formRef={formRef}
+        open={createModalVisible}
+        onOpenChange={setCreateModalVisible}
+        onFinish={async (value) => {
+          const formData = {
+            ...value,
+            icon: iconUrl,
+          };
+          console.log('formData', formData);
+          const success = await handleAdd(formData as API.NewActivityItem);
+          if (success) {
+            setCreateModalVisible(false);
+            actionRef.current?.reload();
+            formRef.current?.resetFields();
+          }
+        }}
+      >
+        <ProForm.Item name="title" label="活动标题">
+          <ReactQuill
+            theme="snow"
+            modules={modules}
+            style={{
+              height: '150px',
+              paddingBottom: '60px',
+            }}
+          />
+        </ProForm.Item>
+        <ProFormText name="link" label="链接" />
+        <ProFormUploadButton
+          name="icon"
+          label="图标"
+          max={1}
+          action={handleUpload}
+          fieldProps={{
+            name: 'file',
+            listType: 'picture-card',
+          }}
+          onChange={(info) => {
+            const { status } = info.file;
+            if (status === 'done') {
+              message.success('图标上传成功');
+            } else if (status === 'error') {
+              message.error('图标上传失败');
+            }
+          }}
+        />
+        <ProFormDigit name="order" label="排序" min={0} initialValue={0} />
+        <ProFormSwitch name="isActive" label="是否激活" initialValue={true} />
+      </ModalForm>
+
+      <ModalForm
+        key={currentActivity?._id}
+        title="编辑活动"
+        width="400px"
+        open={editModalVisible}
+        onOpenChange={setEditModalVisible}
+        onFinish={async (value) => {
+          console.log('edit value', value);
+          const formData = {
+            ...value,
+            icon: iconUrl,
+          };
+          const success = await handleEdit(formData as API.NewActivityItem);
+          if (success) {
+            setEditModalVisible(false);
+            actionRef.current?.reload();
+          }
+        }}
+        initialValues={currentActivity}
+      >
+        <ProForm.Item name="title" label="活动标题">
+          <ReactQuill
+            theme="snow"
+            modules={modules}
+            style={{
+              height: '150px',
+              paddingBottom: '60px',
+            }}
+          />
+        </ProForm.Item>
+        <ProFormText name="link" label="链接" />
+        <ProFormUploadButton
+          name="icon"
+          label="图标"
+          max={1}
+          action={handleUpload}
+          fieldProps={{
+            name: 'file',
+            listType: 'picture-card',
+          }}
+          fileList={useMemo(() => {
+            return iconUrl ? [{ url: `${API_URL}${iconUrl}` }] : [];
+          }, [iconUrl])}
+          onChange={({ fileList }) => {
+            if (fileList.length === 0) {
+              setIconUrl('');
+            }
+          }}
+        />
+        <ProFormDigit name="order" label="排序" min={0} />
+        <ProFormSwitch name="isActive" label="是否激活" />
+      </ModalForm>
+    </>
+  );
+};
+
+export default ActivityManagement;

src/pages/Prediction/index.tsx

@@ -22,6 +22,8 @@ const PredictionList: React.FC = () => {
       title: '比赛',
       dataIndex: 'matchInfo',
       valueType: 'text',
+      // ellipsis: true,
+      // width: 200, // 设置一个固定宽度
     },
     {
       title: '比赛时间',

src/services/api.ts

@@ -347,13 +347,6 @@ export async function getActivity(
   });
 }
 
-// export async function getActivityById(id: string, options?: { [key: string]: any }) {
-//   return request<API.ActivityList>(`${API_URL}/api/activity/${id}`, {
-//     method: 'GET',
-//     ...(options || {}),
-//   });
-// }
-
 export async function createActivity(options?: { [key: string]: any }) {
   return request<API.ActivityList>(`${API_URL}/api/activity`, {
     method: 'POST',
@@ -387,3 +380,54 @@ export async function deleteActivity(id: string) {
     },
   });
 }
+
+// 最新活动
+export async function getNewActivities(
+  params: {
+    current?: number;
+    pageSize?: number;
+  },
+  options?: { [key: string]: any },
+) {
+  return request<API.NewActivityList>(`${API_URL}/api/new-activities`, {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
+export async function createNewActivity(options?: { [key: string]: any }) {
+  return request<API.NewActivityList>(`${API_URL}/api/new-activities`, {
+    method: 'POST',
+    data: {
+      ...(options || {}),
+    },
+  });
+}
+
+export async function updateNewActivity(id: string, options?: { [key: string]: any }) {
+  console.log('Sending update request for new activity id:', id);
+  console.log('Update data:', options);
+  return request<API.NewActivityList>(`${API_URL}/api/new-activities`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: JSON.stringify({
+      id,
+      ...(options || {}),
+    }),
+  });
+}
+
+export async function deleteNewActivity(id: string) {
+  console.log('Sending delete request for new activity id:', id);
+  return request<{ success: boolean }>(`${API_URL}/api/new-activities?id=${id}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

src/services/typings.d.ts

@@ -181,4 +181,19 @@ declare namespace API {
     total: number;
     success: boolean;
   };
+
+  type NewActivityItem = {
+    _id: string;
+    title: string;
+    link: string;
+    icon: string;
+    isActive: boolean;
+    order: number;
+  };
+
+  type NewActivityList = {
+    data: NewActivityItem[];
+    total: number;
+    success: boolean;
+  };
 }