cunkebao_v3/Cunkebao/src/pages/pc/ckbox/test.tsx

import React from "react";
import { Card, Typography, Space, Button, Tag } from "antd";
import {
  MessageOutlined,
  UserOutlined,
  TeamOutlined,
  PhoneOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";

const { Title, Paragraph } = Typography;

const CkboxTestPage: React.FC = () => {
  return (
    <div style={{ padding: "24px", maxWidth: "1200px", margin: "0 auto" }}>
      <Title level={2}>
        <MessageOutlined style={{ marginRight: "8px" }} />
        触客宝模块测试页面
      </Title>

      <Paragraph>
        这是一个类似微信的聊天系统，提供实时消息、联系人管理、群组聊天等功能。
      </Paragraph>

      <Space direction="vertical" size="large" style={{ width: "100%" }}>
        {/* 功能特性 */}
        <Card title="功能特性" size="small">
          <Space wrap>
            <Tag color="blue" icon={<MessageOutlined />}>
              实时聊天
            </Tag>
            <Tag color="green" icon={<UserOutlined />}>
              联系人管理
            </Tag>
            <Tag color="orange" icon={<TeamOutlined />}>
              群组聊天
            </Tag>
            <Tag color="purple" icon={<PhoneOutlined />}>
              语音通话
            </Tag>
            <Tag color="red" icon={<VideoCameraOutlined />}>
              视频通话
            </Tag>
          </Space>
        </Card>

        {/* 界面布局 */}
        <Card title="界面布局" size="small">
          <div
            style={{
              border: "1px solid #d9d9d9",
              borderRadius: "8px",
              padding: "16px",
              backgroundColor: "#fafafa",
            }}
          >
            <div style={{ display: "flex", gap: "16px", height: "400px" }}>
              {/* 左侧边栏 */}
              <div
                style={{
                  width: "300px",
                  backgroundColor: "#fff",
                  border: "1px solid #e8e8e8",
                  borderRadius: "8px",
                  padding: "16px",
                }}
              >
                <div style={{ marginBottom: "16px" }}>
                  <strong>左侧边栏</strong>
                </div>
                <div style={{ marginBottom: "8px" }}>• 搜索栏</div>
                <div style={{ marginBottom: "8px" }}>• 聊天标签页</div>
                <div style={{ marginBottom: "8px" }}>• 联系人标签页</div>
                <div style={{ marginBottom: "8px" }}>• 群组标签页</div>
              </div>

              {/* 主聊天区域 */}
              <div
                style={{
                  flex: 1,
                  backgroundColor: "#fff",
                  border: "1px solid #e8e8e8",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                {/* 聊天头部 */}
                <div
                  style={{
                    padding: "16px",
                    borderBottom: "1px solid #e8e8e8",
                    backgroundColor: "#fafafa",
                  }}
                >
                  <strong>聊天头部</strong>
                </div>

                {/* 聊天内容 */}
                <div
                  style={{
                    flex: 1,
                    padding: "16px",
                    backgroundColor: "#f5f5f5",
                  }}
                >
                  <strong>聊天内容区域</strong>
                  <div
                    style={{
                      marginTop: "16px",
                      fontSize: "12px",
                      color: "#666",
                    }}
                  >
                    • 消息气泡显示
                    <br />
                    • 支持文本、图片、文件
                    <br />
                    • 消息时间显示
                    <br />• 在线状态显示
                  </div>
                </div>

                {/* 输入区域 */}
                <div
                  style={{
                    padding: "16px",
                    borderTop: "1px solid #e8e8e8",
                    backgroundColor: "#fafafa",
                  }}
                >
                  <strong>输入区域</strong>
                </div>
              </div>

              {/* 右侧个人资料 */}
              <div
                style={{
                  width: "280px",
                  backgroundColor: "#fff",
                  border: "1px solid #e8e8e8",
                  borderRadius: "8px",
                  padding: "16px",
                }}
              >
                <div style={{ marginBottom: "16px" }}>
                  <strong>右侧个人资料</strong>
                </div>
                <div style={{ marginBottom: "8px" }}>• 基本信息</div>
                <div style={{ marginBottom: "8px" }}>• 联系信息</div>
                <div style={{ marginBottom: "8px" }}>• 标签</div>
                <div style={{ marginBottom: "8px" }}>• 个人简介</div>
                <div style={{ marginBottom: "8px" }}>• 操作按钮</div>
              </div>
            </div>
          </div>
        </Card>

        {/* 使用说明 */}
        <Card title="使用说明" size="small">
          <Paragraph>
            <strong>1. 开始聊天：</strong>
            在左侧联系人列表中选择一个联系人，点击进入聊天界面。
          </Paragraph>
          <Paragraph>
            <strong>2. 发送消息：</strong>
            在聊天窗口底部的输入框中输入消息，按Enter键或点击发送按钮发送消息。
          </Paragraph>
          <Paragraph>
            <strong>3. 查看资料：</strong>
            聊天时右侧会显示联系人的详细资料，包括基本信息、联系方式等。
          </Paragraph>
          <Paragraph>
            <strong>4. 搜索功能：</strong>
            使用顶部搜索栏可以快速搜索联系人或群组。
          </Paragraph>
          <Paragraph>
            <strong>5. 切换标签：</strong>
            在左侧可以切换聊天、联系人、群组等不同标签页。
          </Paragraph>
        </Card>

        {/* 技术特点 */}
        <Card title="技术特点" size="small">
          <Space direction="vertical" style={{ width: "100%" }}>
            <div>
              <strong>• React 18 + TypeScript：</strong>
              现代化的前端开发技术栈
            </div>
            <div>
              <strong>• Ant Design：</strong>
              企业级UI组件库，提供丰富的组件
            </div>
            <div>
              <strong>• SCSS Modules：</strong>
              样式隔离和模块化，避免样式冲突
            </div>
            <div>
              <strong>• 响应式设计：</strong>
              支持不同屏幕尺寸，移动端友好
            </div>
            <div>
              <strong>• 组件化架构：</strong>
              功能模块独立成组件，便于维护和扩展
            </div>
          </Space>
        </Card>

        {/* 操作按钮 */}
        <Card title="操作" size="small">
          <Space>
            <Button type="primary" icon={<MessageOutlined />}>
              进入聊天
            </Button>
            <Button icon={<UserOutlined />}>查看联系人</Button>
            <Button icon={<TeamOutlined />}>创建群组</Button>
          </Space>
        </Card>
      </Space>
    </div>
  );
};

export default CkboxTestPage;