docs(components/dialog): add Dialog docs and preview video

Author: shadow3aaa

docs/en/components/dialog.md

@@ -0,0 +1,45 @@
+---
+title: Dialog
+order: 21
+---
+
+# Dialog
+
+```rust
+pub fn dialog_provider(
+    args: DialogProviderArgs,
+    state: Arc<RwLock<DialogProviderState>>,
+    main_content: impl FnOnce(),
+    dialog_content: impl FnOnce(f32) + Send + Sync + 'static,
+)
+```
+
+The `dialog_provider` component is used to display dialogs in an application.
+
+## Arguments
+
+- `args: DialogProviderArgs`
+
+  This argument configures the style of the dialog. Notably, `dialog_provider` supports both glass and non-glass dialog variants. It can be configured via the `style: DialogStyle` field of `DialogProviderArgs`. The default is `DialogStyle::Material`, i.e. the non-glass variant.
+
+- `state: Arc<RwLock<DialogProviderState>>`
+
+  This argument manages the dialog state, including whether the dialog is open and the animation progress.
+
+  Use its `open()` and `close()` methods to programmatically open and close the dialog.
+
+- `main_content: impl FnOnce()`
+
+  A closure that renders the main content — the content underneath the dialog.
+
+- `dialog_content: impl FnOnce(f32) + Send + Sync + 'static`
+
+  A closure that renders the dialog content. It receives an `f32` parameter representing the dialog's fade level. It is recommended to use this value as an alpha multiplier for content colors to achieve better visual effects.
+
+## Preview
+
+<video autoplay loop muted>
+
+<source src="/dialog_example.mp4" type="video/mp4">
+Your browser does not support the video tag
+</video>

docs/public/dialog_example.mp4

@@ -0,0 +1,45 @@
+---
+title: Dialog 组件
+order: 21
+---
+
+# Dialog
+
+```rust
+pub fn dialog_provider(
+    args: DialogProviderArgs,
+    state: Arc<RwLock<DialogProviderState>>,
+    main_content: impl FnOnce(),
+    dialog_content: impl FnOnce(f32) + Send + Sync + 'static,
+)
+```
+
+`dialog_provider` 组件用于在应用程序中显示对话框。
+
+## 参数
+
+- `args: DialogProviderArgs`
+
+  该参数配置对话框的样式。值得一提的是，`dialog_provider` 同时支持玻璃态版本和非玻璃态版本的对话框。它可以通过 `DialogProviderArgs` 的 `style: DialogStyle` 字段来配置。默认为 `DialogStyle::Material`，即非玻璃态版本。
+
+- `state: Arc<RwLock<DialogProviderState>>`
+
+  该参数管理对话框的状态，包括对话框是否打开以及动画进度。
+
+  使用其 `open()` 和 `close()` 方法可以程序化的打开和关闭对话框。
+
+- `main_content: impl FnOnce()`
+
+  该参数是一个闭包，用于渲染主内容。即对话框下方的内容。
+
+- `dialog_content: impl FnOnce(f32) + Send + Sync + 'static`
+
+  该参数是一个闭包，用于渲染对话框内容。它接受一个 `f32` 类型的参数，表示对话框的淡出程度。建议对对话框的内容的颜色也使用它作为透明度系数进行调节，以实现更好的视觉效果。
+
+## 预览
+
+<video autoplay loop muted>
+
+<source src="/dialog_example.mp4" type="video/mp4">
+Your browser does not support the video tag
+</video>