基于nicegui库在浏览器中创建一个浮动窗口

前一阵在github上看到一个不错的基于浏览器的python GUI 项目，https://github.com/zauberzeug/nicegui，用了一下，感觉不错，可以用python来开发B/S架构的服务端程序，

NiceGUI is an easy-to-use, Python-based UI framework, which shows up in your web browser. You can create buttons, dialogs, Markdown, 3D scenes, plots and much more.

前一阵用pyqt开发过一个C/S架构的监控程序，现在想着能否基于nicegui开发一个B/S架构的监控程序。

监控程序中用到了弹出浮动窗口，nicegui默认没有提供浮动窗口控件，自己照着nicegui控件写了一个浮动窗口的类FloatWindow，可以实现在浏览其中弹出可定制化的浮动窗口。

# with FloatWindow('浮动窗口演示', content="This is a float window Demo, just show ..."):
#     ui.image('/images/cat_card.png').classes('w-full h-[320px]')

fw:FloatWindow = None

def promtWindow():
    counter = 0
    def showit():
        global fw
        nonlocal counter
        counter += 1
        if fw is None:
            with (fw := FloatWindow(f'浮动窗口演示-{counter}', content=f'<span style="color: red">This is a float window Demo{counter}</span>, just show ...')):
                 ui.label("1. xxxxx")
                 ui.image('/images/cat_card.png').classes('min-w-full h-[320px] resize')
        else:
            fw.updateTitle(f'浮动窗口演示-{counter}')
            if counter == 4:
                fw.updateContent()
            else:
                fw.updateContent(f'<span style="color: red">This is a float window Demo{counter}</span>, just show ...')
            fw.update()
    return showit



ui.button('Reset', on_click=counter.reset).props('small outline')
with ui.card():
    ui.button("FloatWindow", on_click=promtWindow()).props('small outline')
    with ui.row():
        ui.button("Hide", on_click=lambda:fw.hide())
        ui.button("Show", on_click=lambda:fw.show())

ui.run()

 基于nicegui创建浮动窗口