blockly-CocoPi2/src/components/deviceOperations/AdbHeader.tsx

import React, { useState } from "react";
import type { FormProps } from 'antd';
import { Modal, Select, Button, Form, Input,Image  } from "antd";
import QRCode from "react-qr-code";
import { updateConnectType, AppState } from "../../states/global";
import { useDispatch, useSelector } from "react-redux";
import disConnectImg from "../../asstes/icon/uploader_disconnect.png";
import connectImg from "../../asstes/icon/uploader_connect.png";
import WifiImg from "../../asstes/icon/wifi.png";
import adb1 from "../../asstes/img/adb1.png";
import adb2 from "../../asstes/img/adb2.png";
import adb3 from "../../asstes/img/adb3.png";
import adb4 from "../../asstes/img/adb4.jpg";
import "../../asstes/css/updateLog.css"

type FieldType = {
    name?: string;
    password?: string;
    remember?: string;
};
const adbHeaderStyle: React.CSSProperties = {
    backgroundColor: "#f1f2f5",
    padding: '10px 0',
    textAlign: "left"
}

const imgStyle: React.CSSProperties = {
    width: '20px',
    height: '20px',
    margin: '0 5px',
    cursor: 'pointer'
}
const wifiStyle: React.CSSProperties = {
    width: '20px',
    height: '20px',
    margin: '0 15px 0 5px',
    float: 'right',
    cursor: 'pointer'
}

const Pstyle: React.CSSProperties = {
    position: 'absolute',
    bottom: "-250px",
    left: "50%",
    transform: "translate(-50%, 0)"
}

const AdbHeader: React.FC = () => {
    const dispatch = useDispatch();
    const currentBackend = useSelector(
        (state: AppState) => state.currentBackend,
    );
    const [wifiModalVisible, setWifiModalVisible] = useState(false);
    const [codeValue, setCodeValue] = useState("");
    const [adbVisible, setAdbVisible] = useState(false);
    const switchConnectType = (e: any) => {
        console.log(e)
        dispatch(updateConnectType(e));
    }
    const getQRCode = (val: any) => {
        setCodeValue(val)
    }
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        if (values.name && values.password) {
            getQRCode(values.name + values.password)
        }
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
        setCodeValue("")
    };
    return (
        <div style={adbHeaderStyle} className="adb-header">
            <span>设备</span>
            <Select defaultValue="1" style={{ width: 100, margin: '0 5px' }} onChange={switchConnectType}>
                <Select.Option value="1">有线连接</Select.Option>
                <Select.Option value="2">无线连接</Select.Option>
            </Select>
            {!currentBackend && <img style={imgStyle} onClick={()=>setAdbVisible(true)} src={disConnectImg} alt="" />}
            {currentBackend && <img style={imgStyle} src={connectImg} alt="" />}
            <img onClick={() => setWifiModalVisible(true)} style={wifiStyle} src={WifiImg} alt="WiFi" />
            <Modal visible={wifiModalVisible} footer={null} width={800} title="扫描二维码，连接网络" onCancel={() => setWifiModalVisible(false)}>
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 14 }}
                    style={{ width: '100%' }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off">
                    <Form.Item<FieldType>
                        label="WiFi 名"
                        name="name"
                        rules={[{ required: true, message: 'Please input your WiFi name!' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' }]}>
                        <Input />
                    </Form.Item>
                    <div style={{ textAlign: 'center', position: 'relative' }}>
                        <Button type="primary" htmlType="submit">
                            生成二维码
                        </Button>
                    </div>
                </Form>
                <div style={{ textAlign: 'center', position: 'relative', marginTop: '40px' }}>
                    {codeValue && <QRCodeGenerator url={codeValue} />}
                    <p style={Pstyle}>打开CocoPi上的扫码联网样例，扫描屏幕二维码，连接上网</p>
                </div>
            </Modal>
            <Modal visible={adbVisible} footer={null} width={800} title="无法连接问题处理" onCancel={() => setAdbVisible(false)}>
                <div className="update-log-step">
                    <h2>windows</h2>
                    <p>一、 下载驱动精灵帮助文档</p>
                    <div style={{ margin: "10px 0" }}>
                        <a download href="./static/docx/如何通过驱动精灵更新Android手机驱动.docx">
                            <Button type="primary">下载</Button>
                        </a>
                        <a href="//file.drivergenius.com/DGSetup_Home_KZ.exe" style={{ marginLeft: 15 }}>
                            <Button type="primary">下载安装包</Button>
                        </a>
                    </div>
                    <p>二、adb 驱动升级步骤</p>
                    <a  download href="//cocorobo.cn/downloads/usb_driver_r13-windows.zip">
                        <Button type="primary">点击下载</Button>
                    </a>
                    <ul className="update-log-adb-step">
                        <li>
                            <p>将文件下载至电脑并解压</p>
                        </li>
                        <li>
                            <p>计算机 -- 右击 -- 管理 -- 设备管理器</p>
                            <Image src={adb1} alt="" />
                        </li>
                        <li>
                            <p>双击带黄色感叹号的ADB Interface</p>
                            <Image src={adb2} alt="" />
                        </li>
                        <li>
                            <p>点击更新驱动程序</p>
                        </li>
                        <li>
                            <p>点击 “浏览计算机以查找驱动程序软件”</p>
                            <Image src={adb3} alt="" />
                        </li>
                        <li>
                            <p>
                                点击“从计算机的设备驱动程序列表中选择”
                            </p>
                            <Image src={adb4} alt="" />
                        </li>
                        <li>
                            <p>然后一直点击下一步，直至安装成功</p>
                        </li>
                    </ul>
                </div>
            </Modal>
        </div>
    )
}

interface QRCodeGeneratorProps {
    url: string;
}

const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({ url }) => {
    return (
        <div style={{ position: 'absolute', left: '50%', transform: 'translate(-50%, 0)' }}>
            <QRCode value={url} size={200} fgColor="#000000" />
        </div>
    );
};

export default AdbHeader;