docs(components/boxed): add Boxed component documentation and preview image

Author: shadow3aaa

docs/en/components/boxed.md

@@ -0,0 +1,65 @@
+---
+title: Boxed component
+order: 8
+---
+
+# Boxed
+
+```rust
+pub fn boxed<F>(args: BoxedArgs, scope_config: F)
+where
+    F: FnOnce(&mut BoxedScope<'_>),
+```
+
+The `boxed` component is used to stack a set of child components.
+
+Unlike other container components, `boxed` requires you to use methods like `BoxedScope::child` to add children, instead of calling child component functions directly inside the closure.
+
+::: warning
+If you attempt to call child component functions directly inside the closure, the `boxed` component will panic at runtime.
+:::
+
+Below is a correct example of using `boxed`:
+
+```rust
+use tessera_ui_basic_components::{
+    boxed::{boxed, BoxedArgs},
+    surface::{surface, SurfaceArgs},
+    text::text,
+};
+
+boxed(
+    BoxedArgs {
+        alignment: Alignment::Center,
+        ..Default::default()
+    },
+    |scope| {
+        scope.child(|| {
+            surface(
+                SurfaceArgs {
+                    width: DimensionValue::from(Dp(300.0)),
+                    height: DimensionValue::from(Dp(300.0)),
+                    ..Default::default()
+                },
+                None,
+                || {},
+            )
+        });
+        scope.child(|| text("test"));
+    },
+);
+```
+
+## Arguments
+
+- `args: BoxedArgs`
+
+  This argument configures the `boxed` component's style, including width, height, alignment, etc. Use `BoxedArgsBuilder` to construct it.
+
+- `scope_config: F`
+
+  A closure used to add child components into the `boxed` component. The closure receives a `&mut BoxedScope` and you should use its `child`, `child_weighted`, etc. methods to add children.
+
+## Preview
+
+![boxed](/boxed_example.png)

docs/public/boxed_example.png

@@ -0,0 +1,64 @@
+---
+title: Boxed 组件
+order: 8
+---
+
+# Boxed
+
+```rust
+pub fn boxed<F>(args: BoxedArgs, scope_config: F)
+where
+    F: FnOnce(&mut BoxedScope<'_>),
+```
+
+`boxed` 组件用于堆叠一组子组件。
+
+不像别的容器组件，`boxed` 组件要求你使用 `BoxedScope::child` 等方法来添加子组件，而非直接在闭包中调用子组件函数。
+
+::: warning
+如果尝试在闭包中直接调用子组件函数，`boxed` 组件将在运行时崩溃。
+:::
+
+以下是一个正确使用 `boxed` 组件的例子：
+
+```rust
+use tessera_ui_basic_components::{
+    boxed::{boxed, BoxedArgs},
+    surface::{surface, SurfaceArgs},
+    text::text,
+};
+
+boxed(
+    BoxedArgs {
+        alignment: Alignment::Center,
+        ..Default::default()
+    },
+    |scope| {
+        scope.child(|| {
+            surface(
+                SurfaceArgs {
+                    width: DimensionValue::from(Dp(300.0)),
+                    height: DimensionValue::from(Dp(300.0)),
+                    ..Default::default()
+                },
+                None,
+                || {},
+            )
+        });
+        scope.child(|| text("test"));
+    },
+);
+```
+
+## 参数
+
+- `args: BoxedArgs`
+
+  该参数用于配置 `boxed` 组件的样式，包括宽高、对齐方式等。使用 `BoxedArgsBuilder` 来构建它。
+
+- `scope_config: F`
+  该参数是一个闭包，用于添加子组件到 `boxed` 组件中。闭包接收一个 `&mut BoxedScope` 参数，使用它的 `child`、`child_weighted` 等方法来添加子组件。
+
+## 预览
+
+![boxed](/boxed_example.png)