import React, { useImperativeHandle, forwardRef, useRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
    const inputRef = useRef();

    // 使用 useImperativeHandle 自定义暴露给父组件的实例值
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus(); // 暴露 focus 方法
        },
        getValue: () => {
            return inputRef.current.value; // 暴露获取输入值的方法
        }
    }));

    return <input ref={inputRef} type="text" />;
});

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    const childRef = useRef();

    const handleFocus = () => {
        childRef.current.focus(); // 调用子组件的 focus 方法
    };

    const handleGetValue = () => {
        console.log(childRef.current.getValue()); // 获取子组件的输入值
    };

    return (
        <div>
            <ChildComponent ref={childRef} />
            <button onClick={handleFocus}>Focus Input</button>
            <button onClick={handleGetValue}>Get Input Value</button>
        </div>
    );
};

export default ParentComponent;

let captcha = null;

const Captcha = () => {
    const [show, setShow] = useState(false);
    const captchaRef = useRef(null);

    useImperativeHandle(captchaRef, () => ({
        show() {
            setShow(true); // 暴露 show 方法
        },
        hide() {
            setShow(false);// 暴露 hide 方法
        }
    }));

    useEffect(() => {
        captcha = {
            show: () => {
                captchaRef.current.show(); // 暴露 show 方法
            },
            hide: () => {
                captchaRef.current.hide(); // 暴露 hide 方法
            }
        };

        return () => {
            captcha = null;
        };
    }, []);

    return (
        show && <div className="captcha-b" ref={captchaRef}></div>
    );
};

export {
    Captcha,
    captcha
};

<div class="container">
  <div class="header">头部</div>
  <div class="content">内容</div>
  <div class="footer">尾部</div>
</div>

const newReg = (str: string) => {
  let data = '';

  const lines = str.split('\n\n');
  const jsonObj = isJSON(str);

  if (jsonObj) {
    const { message } = JSON.parse(str);
    if (message === "余额不足") {
      data = `[${message}, 请充值](/?recharge=true)`;
    } else {
      data = message;
    }
  } else {
    for (let i = 0; i < lines.length; i++) {
      const line = lines[i].trim();
      const jsonString = line.substring(5); // 去掉开头的 "data:"
      try {
        const obj = JSON.parse(jsonString);
        data += obj['content'];
      } catch (e) {
        const parsedObj = jsonString.slice(12, -2);
        data += parsedObj;
      }
    }
  }

  return data;
}

mdi.renderer.rules.code_inline = function (tokens, idx, options, env, slf) {
  var token = tokens[idx];
  if(token.markup == "```"){
    var newlineIndex = token.content.indexOf('\\n'),
        language = token.content.slice(0, newlineIndex),
        content = token.content.slice(newlineIndex+2,token.content.length).replace(/\\n/g, '\n').replace(/\\/g, '');

        // console.log(content)
        const validLang = !!(language && hljs.getLanguage(language))
        if (validLang) {
          const lang = language ?? ''
          return highlightBlock(hljs.highlight(content, { language: lang }).value, lang, content)
        }
        return highlightBlock(hljs.highlightAuto(content).value, '', content)
  }else{
    return `<code class="hljs code-block-body js" >${token.content}</code>`
  }
};

import TextUtil from 'diagram-js/lib/util/Text.js';
import { assign } from 'min-dash';

const defaultStyle = assign({
    fontFamily: 'Arial, sans-serif',
    fontSize: 12,
    fontWeight: 'normal',
    lineHeight: 1.2
});
const textUtil = new TextUtil({
    style: defaultStyle
});
const elementStyle = {
    size: {
        "width": 100
    },
    box: {
        "width": 100,
        "height": 80,
        "type": "bpmn:Task",
    },
    align: "center-middle",
    padding: 5,
    style: {
        "fill": "black"
    }
}

const text = textUtil.createText(element.businessObject.name, elementStyle);
svgAppend(parentNode, text);
return text;

setArrowColor() {
  const marker = svgCreate('marker')

  svgAttr(marker, {
    id: 'sequenceflow-arrow-normal',
    viewBox: '0 0 20 20',
    refX: '11',
    refY: '10',
    markerWidth: '10',
    markerHeight: '10',
    orient: 'auto'
  })

  const path = svgCreate('path')

  svgAttr(path, {
    d: 'M 1 5 L 11 10 L 1 15 Z',
    style:
      ' stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; '
  })

  const defs = domQuery('defs')
  svgAppend(marker, path)
  svgAppend(defs, marker)
}

a.xxx.com/
b.xxx.com/

xxx.com/a/
xxx.com/b/

new Router({
  mode: 'history',
  saveScrollPosition: true,
  scrollBehavior: () => ({
    y: 0
  }),
  base: window.env.staticPath,
})

export const globalHistory = createBrowserHistory({
  basename: window.env.staticPath
})

output: {
  path: webpackConfigBase.resolve('dist'),
  publicPath: '/__PUBLIC_PATH_PLACEHOLDER__/',
  filename: 'static/js/[name].[chunkhash:8].js'
},

"homepage": "/__PUBLIC_PATH_PLACEHOLDER__",

run.sh 文件

sed -i "s|/__PUBLIC_PATH_PLACEHOLDER__|$BOOT_PUBLIC_PATH|g" /usr/share/nginx/html/*.html
sed -i "s|/__PUBLIC_PATH_PLACEHOLDER__|$BOOT_PUBLIC_PATH|g" /usr/share/nginx/html/static/css/*.css
sed -i "s|/__PUBLIC_PATH_PLACEHOLDER__|$BOOT_PUBLIC_PATH|g" /usr/share/nginx/html/static/js/*.js

exec nginx -g 'daemon off;'

在Dockerfile中 执行上面的脚本

CMD ["run.sh"]

最后在docker-compose.yml文件中，更改对应的路径及配置

environment:
    - NGINX_PORT=10021
    - XST_DOMAIN=
    - TZ=Asia/Shanghai
    - BOOT_PUBLIC_PATH=https://xxx.com/

import { Form, Input } from 'antd';
import { useEffect } from 'react';
 
const App = () => {
  const [form]= Form.useForm();
   
  useEffect(() => {
    form.setFieldsValue({
      a: {
        b: {
          c: 'ccc'
        }
      },
      d: {
        e : 'eee'
      }
    })
  }, []);
 
  return (
    <Form form={form}>
      <Form.Item name={['d', 'e']}>
        <Input/>
      </Form.Item>
    </Form>
  )
}
export default App;

const MyInput = (props) =>{
    return <div>
    <Input>
    </div>   
}

return (
  <Form form={form}>
    <Form.Item name={['d', 'e']}>
      <MyInput/>
    </Form.Item>
  </Form>
)

function MyInput(props) {
    const { value, onChange } = props;
    console.log(form.getFieldsValue())
    function onValueChange(event) {
      onChange(event.target.value.toUpperCase());
    }
    return <Input value={value} onChange={onValueChange}></Input>
}

import React, { useEffect, useState } from 'react'
import { message, Upload } from "antd";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";

const defaultUrl = ""
const imageURL = ""


const UploadImg = (props: any) => {
  const {value, onChange} = props;
  const [loading, setLoading] = useState(false);


  const handleChange = (info: any) => {
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      const url = info.file.response.data.url;
      onChange && onChange(url);
      setLoading(false);
    }
  };


  const beforeUpload = (file: any) => {
    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
    if (!isJpgOrPng) {
      message.error("只支持 JPG/PNG 文件!");
    }
    const isLt2M = file.size / 1024 / 1024 < 5;
    if (!isLt2M) {
      message.error("图片必须小于5MB!")
    }
    return isJpgOrPng && isLt2M;
  };

  return (
      <Upload
        name="file"
        // customRequest={customRequest}
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action={defaultUrl}
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {value ? (
          <img src={imageURL + value} alt="avatar" style={{ width: "100%" }} />
        ) : (
          <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>点击上传</div>
          </div>
        )}
      </Upload>
  )
}


export default UploadImg

game.physics.arcade.collide(player, platforms);

game.physics.arcade.overlap(player, platforms);

game.physics.arcade.overlap(player,stars,function (player,star) {
   scroe += 10;
   fonts.text = 'scroe: ' + scroe;
   star.kill();
})

if(cursors.left.isDown){
    player.body.velocity.x = -150;
    player.animations.play('left');
}else if(cursors.right.isDown){
    player.body.velocity.x = 150;
    player.animations.play('right');
}else{
    player.frame = 4;
    player.body.velocity.x = 0;
    player.animations.stop();
}

var game = new Phaser.Game(288,505,Phaser.AUTO,'game',state); 
var game = new Phaser.Game(288,505,Phaser.AUTO,'game',{proload:proload,create:create});

Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
width: 游戏场景的宽度，单位为px
height: 高度，
renderer: 渲染方式，有Phaser.CANVAS，Phaser.WebGL，Phaser.AUTO，auto是自动识别
parent: 用来放置canvas元素的父元素，可以是一个元素id，也可以是dom元素本身，phaser会自动创建一个canvas并插入到这个元素中
state: 场景，通常会有（init，proload，create，update等）

//state可以是一个自定义对象
var state1 = {
    preload : function(){ },
    create : function(){ },
    update : function(){ }    
}

//state也可以是一个构造函数
var state2 = function(){
    this.preload = function(){ };
    this.create = function(){ };
    this.update = function(){ };
}
//state里面可以存在其他的方法，和属性
//state里面只要存一个proload、create、update中一个即可
var state3 = function(){
    this.aaa = function(){};
    this.bbb = 'first';
    this.create=function(){}
}

this.create = function () {
    game.add.sprite(0,0,'sky')
}

game.add.sprite(0,0,'sky')

platforms = game.add.group();

var ground = platforms.create(0,0,'platform');

var ledge = platforms.create(400,200,'platform');

game.physics.startSystem(Phaser.Physics.ARCADE);

platforms.enableBody = true;

ground.body.immovable = true;
legs.body.immovable = true;

game.add.text(10,10,'score:0',{ font: "35px Arial", fill: "#ff0044"})

this.create=function () {
        //开启物理引擎
        game.physics.startSystem(Phaser.Physics.ARCADE);
        //添加天空
        game.add.sprite(0, 0, 'sky');
        //添加地板组
        platforms = game.add.group();
        //开启地板组的物理属性
        platforms.enableBody = true;
        //添加底部地板
        var grounds = platforms.create(0,game.world.height-32,'platform');
        //设置缩放
        grounds.scale.setTo(2,1);
        //禁止移动
        grounds.body.immovable = true;

        var legs = platforms.create(-150,120,'platform');
        legs.body.immovable = true;

        legs = platforms.create(400,270,'platform');
        legs.body.immovable = true;


        //添加人物
        player = game.add.sprite(32, 150, 'dude');
        game.physics.arcade.enable(player);

        player.body.bounce.y = 0.3;
        player.body.gravity.y = 500;
        player.body.collideWorldBounds = true;

        player.animations.add('left', [0, 1, 2, 3], 10, true);
        player.animations.add('right', [5, 6, 7, 8], 10, true);

        cursors = game.input.keyboard.createCursorKeys();

        //添加文字
        fonts = game.add.text(10,10,'score:0',{ font: "35px Arial", fill: "#ff0044"})
        //添加星星
        stars = game.add.group();
        stars.enableBody = true;
        for(var i =0;i<12;i++){
           var star = stars.create(i * 70 , 0, 'star');
           star.body.bounce.y = 0.7;
           star.body.gravity.y = 400;
           star.body.collideWorldBounds = true;
        }
    }

#!/usr/bin/expect -f
set user root
set host 192.168.1.109
set password test123###
set timeout -1

spawn ssh $user@$host
expect "*assword:*"
send "$password\r"
interact
expect eof

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

function drawImg(path, callback) {
                var img = new Image();
                img.src = path;
                img.onload = function () {
                    //默认按比例压缩    
                    var w = this.width,
                        h = this.height;
                    var quality = 0.75; // 默认图片质量为0.7    

                    //生成canvas    
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');

                    // 创建属性节点    
                    canvas.setAttribute("width", w);
                    canvas.setAttribute("height", h);

                    ctx.drawImage(this, 0, 0, w, h);
                    // quality值越小，所绘制出的图像越模糊    
                    var base64 = canvas.toDataURL('image/jpeg', quality);
                    console.log("压缩后的质量："+ base64.length / 1024 * quality);
                    // 回调函数返回base64的值    
                    callback(base64);
                };

            };

            drawImg("xinghaivps.png", function (base) {
                //直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了  
                document.getElementById("img").src = base;
            })

function render(src,size) {
               // 创建一个 Image 对象  
               var image = new Image();
               // 参数，最大高度  
               // 绑定 load 事件处理器，加载完成后执行  
               image.onload = function () {
                   // 获取 canvas DOM 对象  
                   var canvas = document.getElementById("myCanvas");
                   // 如果高度超标  
                   if (image.height > size) {
                       // 宽度等比例缩放 *=  
                       image.width *= size / image.height;
                       image.height = size;
                   }
                   // 获取 canvas的 2d 环境对象,  
                   // 可以理解Context是管理员，canvas是房子  
                   var ctx = canvas.getContext("2d");
                   // canvas清屏  
                   ctx.clearRect(0, 0, canvas.width, canvas.height);
                   // 重置canvas宽高  
                   canvas.width = image.width;
                   canvas.height = image.height;
                   // 将图像绘制到canvas上  
                   ctx.drawImage(image, 0, 0, image.width, image.height);
                   // !!! 注意，image 没有加入到 dom之中  
               };
               // 设置src属性，浏览器会自动加载。  
               // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。  
               image.src = src;
           };

           render('mei.jpg',1500)