管理端页面补充

2025-06-28 17:07:18 +08:00
parent 7fcff7759d
commit 240dd5d2a4
16 changed files with 2106 additions and 165 deletions
@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { Card, Form, Input, Button, Space, Typography, message } from 'antd';
+import { VideoCameraOutlined, UserOutlined, HomeOutlined } from '@ant-design/icons';
+import { VideoCall } from '../../components/VideoCall/VideoCall';
+
+const { Title, Text } = Typography;
+
+export const VideoCallPage: React.FC = () => {
+  const [isInCall, setIsInCall] = useState(false);
+  const [roomName, setRoomName] = useState('');
+  const [identity, setIdentity] = useState('');
+  const [form] = Form.useForm();
+
+  const handleJoinCall = (values: { roomName: string; identity: string }) => {
+    if (!values.roomName.trim() || !values.identity.trim()) {
+      message.error('请填写房间名称和用户名');
+      return;
+    }
+
+    setRoomName(values.roomName.trim());
+    setIdentity(values.identity.trim());
+    setIsInCall(true);
+  };
+
+  const handleLeaveCall = () => {
+    setIsInCall(false);
+    setRoomName('');
+    setIdentity('');
+    form.resetFields();
+  };
+
+  if (isInCall) {
+    return (
+      <VideoCall
+        roomName={roomName}
+        identity={identity}
+        onLeave={handleLeaveCall}
+      />
+    );
+  }
+
+  return (
+    <div style={{ 
+      minHeight: '100vh', 
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '20px'
+    }}>
+      <Card 
+        style={{ 
+          width: '100%', 
+          maxWidth: '400px',
+          borderRadius: '16px',
+          boxShadow: '0 20px 40px rgba(0,0,0,0.1)'
+        }}
+      >
+        <div style={{ textAlign: 'center', marginBottom: '24px' }}>
+          <VideoCameraOutlined 
+            style={{ 
+              fontSize: '48px', 
+              color: '#1890ff', 
+              marginBottom: '16px' 
+            }} 
+          />
+          <Title level={2} style={{ margin: 0, color: '#1f1f1f' }}>
+            视频通话
+          </Title>
+          <Text type="secondary">
+            输入房间信息开始视频通话
+          </Text>
+        </div>
+
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleJoinCall}
+          size="large"
+        >
+          <Form.Item
+            name="roomName"
+            label="房间名称"
+            rules={[
+              { required: true, message: '请输入房间名称' },
+              { min: 3, message: '房间名称至少3个字符' }
+            ]}
+          >
+            <Input
+              prefix={<HomeOutlined />}
+              placeholder="输入房间名称"
+              style={{ borderRadius: '8px' }}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="identity"
+            label="您的姓名"
+            rules={[
+              { required: true, message: '请输入您的姓名' },
+              { min: 2, message: '姓名至少2个字符' }
+            ]}
+          >
+            <Input
+              prefix={<UserOutlined />}
+              placeholder="输入您的姓名"
+              style={{ borderRadius: '8px' }}
+            />
+          </Form.Item>
+
+          <Form.Item style={{ marginBottom: 0 }}>
+            <Button
+              type="primary"
+              htmlType="submit"
+              icon={<VideoCameraOutlined />}
+              style={{
+                width: '100%',
+                height: '48px',
+                borderRadius: '8px',
+                fontSize: '16px',
+                fontWeight: '500'
+              }}
+            >
+              加入视频通话
+            </Button>
+          </Form.Item>
+        </Form>
+
+        <div style={{ 
+          marginTop: '24px', 
+          padding: '16px', 
+          background: '#f8f9fa', 
+          borderRadius: '8px' 
+        }}>
+          <Text type="secondary" style={{ fontSize: '12px' }}>
+            <strong>使用说明：</strong><br />
+            • 输入相同房间名称的用户将进入同一个视频通话<br />
+            • 支持多人同时通话<br />
+            • 可以随时开启/关闭音频和视频<br />
+            • 点击红色按钮离开通话
+          </Text>
+        </div>
+      </Card>
+    </div>
+  );
+};