docs(components): add Surface component documentation

Author: shadow3aaa

docs/en/components/surface.md

@@ -0,0 +1,30 @@
+---
+title: surface component
+order: 1
+---
+
+# Surface
+
+```rust
+pub fn surface(
+    args: SurfaceArgs,
+    ripple_state: Option<Arc<RippleState>>,
+    child: impl FnOnce(),
+)
+```
+
+The `surface` component, as the name suggests, is a surface component, commonly used as a background or container for other components. It can set background color, border, shadow and other properties, and supports click interactions and ripple animations. It is the foundation for many interactive components.
+
+## Arguments
+
+- `args: SurfaceArgs`
+
+This argument configures the style and behavior of the `surface` component, including background color, border, shadow, corner radius, etc. Use `SurfaceArgsBuilder` to build this argument.
+
+- `ripple_state: Option<Arc<RippleState>>`
+
+The state used for the click ripple animation. Passing `None` disables the ripple animation.
+
+- `child: impl FnOnce()`
+
+The child component of `surface`, can be any `#[tessera]` function.

docs/zhHans/components/surface.md

@@ -0,0 +1,30 @@
+---
+title: surface 组件
+order: 1
+---
+
+# Surface
+
+```rust
+pub fn surface(
+    args: SurfaceArgs,
+    ripple_state: Option<Arc<RippleState>>,
+    child: impl FnOnce(),
+)
+```
+
+`surface` 组件，顾名思义，是一个平面组件，通常用作其他组件的背景或者容器使用。它可以设置背景颜色、边框、阴影等属性，同时具有点击交互，水波动画等高级效果，是很多交互组件的基础。
+
+## 参数
+
+- `args: SurfaceArgs`
+
+此参数用于配置`surface`组件的样式和行为，包括背景颜色、边框、阴影、圆角等属性。可以通过`SurfaceArgsBuilder`来构建这个参数。
+
+- `ripple_state: Option<Arc<RippleState>>`
+
+此参数为点击水波纹动画的状态，如果传入`None`，则表示不启用水波纹动画。
+
+- `child: impl FnOnce()`
+
+此参数为`surface`组件的子组件，可以是任何`#[tessera]`函数。