Browse Source

✨ feat(classroom): 增加教室链接复制功能

- 添加CopyOutlined图标用于链接复制功能
- 实现复制链接到剪贴板的copyLink方法,支持股票训练、答题卡和管理员三种链接类型
- 在表格中新增"链接"列,显示三个链接复制按钮
- 添加链接复制成功/失败的消息提示
yourname 5 months ago
parent
commit
2e7d6ca1ee
1 changed files with 68 additions and 8 deletions
  1. 68 8
      src/client/admin/pages/ClassroomDataPage.tsx

+ 68 - 8
src/client/admin/pages/ClassroomDataPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Table, Button, Modal, Form, Input, DatePicker, Space, Typography, message, Select } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
+import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, CopyOutlined } from '@ant-design/icons';
 import { classroomDataClient } from '@/client/api';
 import type { InferResponseType, InferRequestType } from 'hono/client';
 import { App } from 'antd';
@@ -152,6 +152,34 @@ export const ClassroomDataPage: React.FC = () => {
     }
   };
 
+  // 复制链接到剪贴板
+  const copyLink = (type: 'exam' | 'stock' | 'admin', classroomNo: string) => {
+    const baseUrl = window.location.origin;
+    let url = '';
+    let successMsg = '';
+
+    switch(type) {
+      case 'exam':
+        url = `${baseUrl}/mobile/exam/card?classroom=${classroomNo}`;
+        successMsg = '答题卡链接已复制';
+        break;
+      case 'stock':
+        url = `${baseUrl}/mobile/stock?classroom=${classroomNo}`;
+        successMsg = '股票训练链接已复制';
+        break;
+      case 'admin':
+        url = `${baseUrl}/mobile/exam/admin?classroom=${classroomNo}`;
+        successMsg = '管理员链接已复制';
+        break;
+    }
+
+    navigator.clipboard.writeText(url).then(() => {
+      antMessage.success(successMsg);
+    }).catch(() => {
+      antMessage.error('复制失败,请手动复制');
+    });
+  };
+
   // 表格列定义
   const columns = [
     {
@@ -203,22 +231,54 @@ export const ClassroomDataPage: React.FC = () => {
         return statusMap[status as keyof typeof statusMap] || '-';
       },
     },
+    {
+      title: '链接',
+      key: 'links',
+      render: (_: any, record: ClassroomDataItem) => (
+        <Space direction="vertical" size={4}>
+          <Button
+            type="link"
+            size="small"
+            icon={<CopyOutlined />}
+            onClick={() => copyLink('stock', record.classroomNo || '')}
+          >
+            复制股票训练链接
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            icon={<CopyOutlined />}
+            onClick={() => copyLink('exam', record.classroomNo || '')}
+          >
+            复制答题卡链接
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            icon={<CopyOutlined />}
+            onClick={() => copyLink('admin', record.classroomNo || '')}
+          >
+            复制管理员链接
+          </Button>
+        </Space>
+      ),
+    },
     {
       title: '操作',
       key: 'action',
       render: (_: any, record: ClassroomDataItem) => (
         <Space size="small">
-          <Button 
-            type="text" 
-            icon={<EditOutlined />} 
+          <Button
+            type="text"
+            icon={<EditOutlined />}
             onClick={() => showEditModal(record)}
           >
             编辑
           </Button>
-          <Button 
-            type="text" 
-            danger 
-            icon={<DeleteOutlined />} 
+          <Button
+            type="text"
+            danger
+            icon={<DeleteOutlined />}
             onClick={() => handleDelete(record.id)}
           >
             删除