更新文档

apps/ai/main.py

@@ -0,0 +1,24 @@
+from fastapi import FastAPI
+from nicegui import app as gui, ui
+
+class status_label(ui.label):
+    def _handle_text_change(self, text: str) -> None:
+        super()._handle_text_change(text)
+        if text == 'ok':
+            self.classes(replace='text-positive')
+        else:
+            self.classes(replace='text-negative')
+
+@ui.page('/')
+async def home():
+    model = {'status': 'error'}
+    status_label().bind_text_from(model, 'status')
+    ui.switch(on_change=lambda e: model.update(status='ok' if e.value else 'error'))
+
+
+app = FastAPI()
+ui.run_with(
+    app,
+    # mount_path='/gui',  # NOTE 如果你希望传递给 `@ui.page` 的路径位于根目录，这个可以省略
+    storage_secret='在这里选择你的私人密钥',  # NOTE 设置密钥是可选的，但允许每个用户进行持久存储。
+)

apps/index.md

@@ -3,5 +3,5 @@
 启动服务：
 
 ```bash
-uvicorn simple.main:app --reload --proxy-headers --host 0.0.0.0 --port 9000
+uvicorn ai.main:app --reload --proxy-headers --port 9000 --host 0.0.0.0 
 ```

doc/ui/nicegui/intro.md

@@ -0,0 +1,37 @@
+# NiceGUI 简介
+
+```{topic} 概述
+通过按钮、对话框、3D场景、图表等与 Python 进行交互。
+
+[NiceGUI](https://nicegui.io) 处理了 Web 开发的细节，让你专注于编写各种应用的 Python 代码，包括机器人技术、物联网解决方案、智能家居自动化和机器学习。NiceGUI 专为与连接的外部设备（如网络摄像头和 IoT 设置中的 GPIO 引脚）顺畅工作而设计，简化了在一个地方管理所有代码的过程。
+
+NiceGUI 学习曲线平缓，对初学者友好，并为有经验的用户提供高级定制功能，确保基本任务的简单性和复杂项目的可行性。
+```
+
+NiceGUI 是开源的 Python 库，用于编写在浏览器中运行的图形用户界面。它具有非常平缓的学习曲线，同时仍提供高级定制选项。NiceGUI 遵循后端优先的理念：它处理所有 web 开发细节。您可以专注于编写 Python 代码。这使得它非常适合各种项目，包括短脚本、仪表板、机器人项目、物联网解决方案、智能家居自动化和机器学习。
+
+## NiceGUI 基本概念
+
+NiceGUI 提供了各种 UI 组件（或元素），如按钮、滑块、文本、图像、图表等等。你的应用将这些组件组装成页面。当用户与页面上的某个项目交互时，NiceGUI 会触发事件（或动作）。你需要定义处理每个事件的代码，比如当用户点击名为 "Go" 的按钮时要执行的操作。
+
+组件通过布局在页面上进行排列。布局提供诸如网格、标签页、轮播图、展开菜单以及其他用于排列组件的工具。许多组件都与你代码中的数据对象（模型）相关联，当值发生变化时，它会自动更新用户界面。
+
+样式和外观可以通过多种方式控制。NiceGUI 接受某些样式的可选参数，例如按钮上的图标。其他样式可以用你稍后将学习到的函数，如 `.styles`、`.classes` 或 `.props` 来设置。像颜色和字体这样的全局样式可以用专用属性来设置。或者如果你更喜欢，几乎任何内容都可以用 CSS 来设置样式。
+
+## NiceGUI 动作、事件和任务
+
+NiceGUI 使用了异步/等待的事件循环来处理并发，这种方式资源效率高，并且有一个很大的好处，就是无需担心线程安全。这一部分展示了如何处理用户输入和其他事件，比如定时器和键盘绑定。同时，它还描述了一些辅助函数，用于将长时间运行的任务包装在异步函数中，以保持 UI 的响应性。请记住，所有的 UI 更新都必须在主线程上与其事件循环一起发生。
+
+## NiceGUI 实现
+
+NiceGUI 是通过 HTTP 服务器（FastAPI）提供的 HTML 组件来实现的，即使是对于原生窗口。如果你已经了解 HTML，一切都会感觉非常熟悉。如果你不了解 HTML，也没关系！NiceGUI 抽象了细节，因此你可以专注于创建美观的界面，而不必担心它们是如何实现的。
+
+## 运行 NiceGUI 应用
+
+部署 NiceGUI 有几种选项。默认情况下，NiceGUI 在本地主机上运行服务器，并在本地机器上作为私有网页运行你的应用。以这种方式运行时，你的应用会出现在网页浏览器窗口中。你也可以在独立于网页浏览器的原生窗口中运行 NiceGUI。或者你可以处理多个客户端的服务器上运行的 NiceGUI - [NiceGUI 网站](https://nicegui.io/documentation) 就是由 NiceGUI 提供的。
+
+在使用组件创建了你的应用程序页面之后，你调用 {func}`ui.run` 来启动 NiceGUI 服务器。{func}`ui.run` 的可选参数可以设置像网络地址和服务器绑定的端口、应用是否以原生模式运行、初始窗口大小以及其他许多选项。
+
+## 定制 NiceGUI
+
+如果你在应用中想要更多的定制，你可以使用底层的 Tailwind 类和 Quasar 组件来控制你的组件的样式或行为。你还可以通过对现有的 NiceGUI 组件进行子类化或者从 Quasar 导入新的组件来扩展可用的组件。所有这些都是可选的。NiceGUI 默认提供了你所需的一切，用来创建现代、时尚、响应式的用户界面。

doc/ui/nicegui/text/label.md

@@ -0,0 +1,35 @@
+# `ui.label` 标签
+
+显示一些文本。
+
+- `text`：标签的内容
+
+```python
+from nicegui import ui
+
+ui.label('some label')
+
+ui.run()
+```
+
+## 根据内容改变 `ui.label` 外观
+
+您可以重写 `_handle_text_change` 方法，根据标签的内容来更新其他属性。这种技术也适用于[绑定](../binding/index)，如下所示的示例中所示。
+
+```python
+from nicegui import ui
+
+class status_label(ui.label):
+    def _handle_text_change(self, text: str) -> None:
+        super()._handle_text_change(text)
+        if text == 'ok':
+            self.classes(replace='text-positive')
+        else:
+            self.classes(replace='text-negative')
+
+model = {'status': 'error'}
+status_label().bind_text_from(model, 'status')
+ui.switch(on_change=lambda e: model.update(status='ok' if e.value else 'error'))
+
+ui.run()
+```

tests/apps/index.md

@@ -3,5 +3,5 @@
 启动服务：
 
 ```bash
-uvicorn simple.main:app --reload --port 9000 --proxy-headers --host 0.0.0.0 --port 9000
+uvicorn ai.main:app --reload --port 9000 --proxy-headers --host 0.0.0.0
 ```