neko-ui 2.8.21 → 2.8.22

package/es/avatar/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 头像
+subtitle: n-avatar
+icon: 🎧
+---
+
+# 带轮廓的头像
+
+> 带 logo 轮廓的头像

package/es/avatar/examples/basic.md

@@ -0,0 +1,14 @@
+---
+title: 最简单的用法
+description: 通过 `src` 属性设置头像
+order: 1
+col: 50%
+---
+
+```html
+<n-avatar src="https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png"></n-avatar>
+```
+
+```jsx
+<n-avatar src="https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png" />
+```

package/es/avatar/examples/group.md

@@ -0,0 +1,57 @@
+---
+title: 头像组
+description: 使用 AvatarGroup 将头像组合展现。
+order: 3
+---
+
+```html
+<n-avatar-group></n-avatar-group>
+<n-avatar-group max-count="10"></n-avatar-group>
+<script>
+  const el = container.querySelectorAll('n-avatar-group');
+
+  el[0].data = Array(4).fill({
+    src: 'https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png',
+  });
+  el[1].data = Array(20)
+    .fill(0)
+    .map((_, i) => {
+      if (i % 2) {
+        return {
+          src: 'https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png',
+        };
+      }
+      return {
+        username: ['avatar', 'gw', 'bjec', '#zos'][i % 3],
+        color: ['#cabdeb', 'green', '#e9887c', '#e989ua'][i % 3],
+      };
+    });
+</script>
+```
+
+```jsx
+const data1 = Array(4).fill({
+  src: 'https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png',
+});
+const data2 = Array(20)
+  .fill(0)
+  .map((_, i) => {
+    if (i % 2) {
+      return {
+        src: 'https://gw.alipayobjects.com/zos/alicdn/HJtErOC0O/avatar.png',
+      };
+    }
+    return {
+      username: ['avatar', 'gw', 'bjec', '#zos'][i % 3],
+      color: ['#cabdeb', 'green', '#e9887c', '#e989ua'][i % 3],
+    };
+  });
+
+render(
+  <>
+    <n-avatar-group data={data1} />
+    <br />
+    <n-avatar-group data={data2} max-count={10} />
+  </>
+);
+```

package/es/avatar/examples/size.md

@@ -0,0 +1,21 @@
+---
+title: 最简单的用法
+description: 头像内置有大、中、小三种尺寸。通过设置 `size` 为 `large`、`small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中 'normal'。也可以将 `size` 设置为实际大小 `number`
+order: 2
+---
+
+```html
+<n-avatar size="100" username="100"></n-avatar>
+<n-avatar size="50" username="50"></n-avatar>
+<n-avatar size="large" username="large"></n-avatar>
+<n-avatar size="normal" username="normal"></n-avatar>
+<n-avatar size="small" username="small"></n-avatar>
+```
+
+```jsx
+<n-avatar size="100" username="100"></n-avatar>
+<n-avatar size="50" username="50"></n-avatar>
+<n-avatar size="large" username="large"></n-avatar>
+<n-avatar size="normal" username="normal"></n-avatar>
+<n-avatar size="small" username="small"></n-avatar>
+```

package/es/avatar/style.js

@@ -1,4 +1,4 @@
-import{css as e}from"@moneko/css";import i from"./favicon.svg";let t=`data:image/svg+xml;base64,${window.btoa(decodeURIComponent(i.replace("data:image/svg+xml,","")))}`;export const style=e`
+import{css as e}from"@moneko/css";import i from"./favicon.svg";export const style=e`
   .avatar {
     position: relative;
     display: inline-flex;
@@ -33,7 +33,7 @@ import{css as e}from"@moneko/css";import i from"./favicon.svg";let t=`data:image
     }
 
     &::after {
-      background: url(${t}) no-repeat center/contain;
+      background: url(${i}) no-repeat center/contain;
     }
 
     &:hover {

package/es/avatar/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/avatar/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\nimport favicon from './favicon.svg';\n\nconst faviconBg = `data:image/svg+xml;base64,${window.btoa(\n  decodeURIComponent(favicon.replace('data:image/svg+xml,', '')),\n)}`;\n\nexport const style = css`\n  .avatar {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    inline-size: 32px;\n    block-size: 32px;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    user-select: none;\n    animation: avatar-morph-effect 8s var(--transition-timing-function) infinite;\n    background-image: linear-gradient(\n      45deg,\n      var(--primary-outline) 0%,\n      var(--success-outline) 100%\n    );\n\n    &::before,\n    &::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      clip-path: url('#clipPathAvatar');\n    }\n\n    &::after {\n      background: url(${faviconBg}) no-repeat center/contain;\n    }\n\n    &:hover {\n      transform: scale(1.2);\n    }\n\n    img {\n      position: absolute;\n      inset-inline-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      clip-path: url('#clipPathAvatar');\n    }\n  }\n\n  @keyframes avatar-morph-effect {\n    0% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n\n    50% {\n      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n    }\n\n    100% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n  }\n`;\n"],"names":["css","favicon","faviconBg","window","btoa","decodeURIComponent","replace","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAAOC,MAAa,eAAgB,CAEpC,IAAMC,EAAY,CAAC,0BAA0B,EAAEC,OAAOC,IAAI,CACxDC,mBAAmBJ,EAAQK,OAAO,CAAC,sBAAuB,MAC1D,CAAC,AAEH,QAAO,MAAMC,MAAQP,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCH,EAAEE,EAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BlC,CAAC,AAAC"}
+{"version":3,"sources":["../../components/avatar/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\nimport favicon from './favicon.svg';\n\nexport const style = css`\n  .avatar {\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    inline-size: 32px;\n    block-size: 32px;\n    transition: transform var(--transition-duration);\n    cursor: pointer;\n    user-select: none;\n    animation: avatar-morph-effect 8s var(--transition-timing-function) infinite;\n    background-image: linear-gradient(\n      45deg,\n      var(--primary-outline) 0%,\n      var(--success-outline) 100%\n    );\n\n    &::before,\n    &::after {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      content: '';\n      pointer-events: none;\n    }\n\n    &::before {\n      clip-path: url('#clipPathAvatar');\n    }\n\n    &::after {\n      background: url(${favicon}) no-repeat center/contain;\n    }\n\n    &:hover {\n      transform: scale(1.2);\n    }\n\n    img {\n      position: absolute;\n      inset-inline-start: 0;\n      inline-size: 100%;\n      block-size: 100%;\n      clip-path: url('#clipPathAvatar');\n    }\n  }\n\n  @keyframes avatar-morph-effect {\n    0% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n\n    50% {\n      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n    }\n\n    100% {\n      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n    }\n  }\n`;\n"],"names":["css","favicon","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAClC,QAAOC,MAAa,eAAgB,AAEpC,QAAO,MAAMC,MAAQF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCH,EAAEC,EAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BhC,CAAC,AAAC"}

package/es/back-top/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 回到顶部
+subtitle: n-back-top
+icon: ⇪
+---
+
+# BackTop 回到顶部
+
+> 返回页面顶部的操作按钮。

package/es/back-top/examples/basic.md

@@ -0,0 +1,19 @@
+---
+title: 最简单的用法
+description: 最简单的用法
+order: 1
+---
+
+```html
+<div style="width:100%;">
+  <n-back-top css=":host{float:right;}"></n-back-top>
+  根据 window 滚动浮现在
+</div>
+```
+
+```jsx
+<div style={{ width: '100%' }}>
+  根据 window 滚动浮现在
+  <n-back-top css=":host{float:right;}" />
+</div>
+```

package/es/back-top/examples/mount.md

@@ -0,0 +1,36 @@
+---
+title: 指定挂载位置
+description: 指定返回顶部的按钮挂载位置, 默认为 n-back-top 所在位置的 shadowRoot 中
+order: 2
+---
+
+```html
+<p>这里返回顶部的按钮挂载到 body 上, 根据 window 滚动浮现在左下角</p>
+<n-back-top></n-back-top>
+<script>
+  var el = container.querySelector('n-back-top');
+
+  el.mount = document.body;
+  el.css = `.back-top {
+        position: fixed;
+        right: unset;
+        left: 300px;
+      }`;
+</script>
+```
+
+```jsx
+<p>
+  这里返回顶部的按钮挂载到 body 上, 根据 window 滚动浮现在左下角
+  <n-back-top
+    css={`
+      .back-top {
+        position: fixed;
+        right: unset;
+        left: 300px;
+      }
+    `}
+    mount={() => document.body}
+  />
+</p>
+```

package/es/back-top/examples/target.md

@@ -0,0 +1,46 @@
+---
+title: 指定滚动容器
+description: 通过 `target` 属性设置滚动容器, 通过 `visibility-height` 属性设置容器滚动到 200 时出现返回顶部
+order: 3
+---
+
+```html
+<div
+  id="custom-back-top-target"
+  style="height: 200px; width: 100%; overflow: auto; position: relative;"
+>
+  <div>
+    <p style="height: 100px;">1</p>
+    <p style="height: 100px;">2</p>
+    <p style="height: 100px;">3</p>
+    <p style="height: 100px;">4</p>
+  </div>
+  <n-back-top visibility-height="200"></n-back-top>
+</div>
+<script>
+  const el = container.querySelector('n-back-top');
+
+  el.target = container.getElementById('custom-back-top-target');
+</script>
+```
+
+```jsx
+let el: HTMLDivElement;
+
+render(
+  <div
+    ref={(e) => {
+      el = e;
+    }}
+    style={{ height: '200px', width: '100%', overflow: 'auto', position: 'relative' }}
+  >
+    <div>
+      <p style="height: 100px;">1</p>
+      <p style="height: 100px;">2</p>
+      <p style="height: 100px;">3</p>
+      <p style="height: 100px;">4</p>
+    </div>
+    <n-back-top visibility-height={200} target={() => el} />
+  </div>
+);
+```

package/es/basic-config/README.mdx

@@ -0,0 +1,11 @@
+---
+type: 全局
+title: 通用配置项
+subtitle: Basic Config
+icon: ⚙️
+order: 0
+---
+
+# 通用配置项
+
+> 组件继承的类型你都可以在这里找到对应的描述

package/es/button/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 按钮
+subtitle: n-button
+icon: 💠
+---
+
+# 按钮
+
+按钮用于开始一个即时操作，响应用户点击行为，触发相应的业务逻辑。

package/es/button/examples/basic.md

@@ -0,0 +1,21 @@
+---
+title: 基本使用
+description: 内置 5 种类型：`default`、`primary`、`success`、`warning`、`error`。
+order: 1
+---
+
+```html
+<n-button>按钮</n-button>
+<n-button type="primary">按钮</n-button>
+<n-button type="success">按钮</n-button>
+<n-button type="warning">按钮</n-button>
+<n-button type="error">按钮</n-button>
+```
+
+```jsx
+<n-button>按钮</n-button>
+<n-button type="primary">按钮</n-button>
+<n-button type="success">按钮</n-button>
+<n-button type="warning">按钮</n-button>
+<n-button type="error">按钮</n-button>
+```

package/es/button/examples/block.md

@@ -0,0 +1,33 @@
+---
+title: 块状按钮
+description: 添加 `block` 属性将使按钮适合其父宽度。
+order: 6
+---
+
+```html
+<n-button block="true">一行</n-button>
+<n-button type="primary" block="true">一行</n-button>
+<n-button type="success" block="true">一行</n-button>
+<n-button type="warning" block="true">一行</n-button>
+<n-button type="error" block="true">一行</n-button>
+<n-button link="true" block="true">一行</n-button>
+```
+
+```jsx
+<n-button block>一行</n-button>
+<n-button type="primary" block>
+  一行
+</n-button>
+<n-button type="success" block>
+  一行
+</n-button>
+<n-button type="error" block>
+  一行
+</n-button>
+<n-button type="warning" block>
+  一行
+</n-button>
+<n-button link block>
+  一行
+</n-button>
+```

package/es/button/examples/circle.md

@@ -0,0 +1,21 @@
+---
+title: 圆形按钮
+description: 添加 `circle` 属性将按钮设置成圆形，通常在只有图标的按钮上使用
+order: 5
+---
+
+```html
+<n-button circle="true">🤔</n-button>
+<n-button type="primary" circle="true">🤔</n-button>
+<n-button type="success" circle="true">🤔</n-button>
+<n-button type="warning" circle="true">🤔</n-button>
+<n-button type="error" circle="true">🤔</n-button>
+```
+
+```jsx
+<n-button circle>🤔</n-button>
+<n-button type="primary" circle>🤔</n-button>
+<n-button type="success" circle>🤔</n-button>
+<n-button type="warning" circle>🤔</n-button>
+<n-button type="error" circle>🤔</n-button>
+```

package/es/button/examples/danger.md

@@ -0,0 +1,23 @@
+---
+title: 危险按钮
+description: 添加 `danger` 属性将按钮标记为危险操作
+order: 8
+---
+
+```html
+<n-button danger="true">default</n-button>
+<n-button fill="true" danger="true"> fill </n-button>
+<n-button dashed="true" danger="true"> dashed </n-button>
+<n-button ghost="true" danger="true"> ghost </n-button>
+<n-button flat="true" danger="true"> flat </n-button>
+<n-button link="true" danger="true"> link </n-button>
+```
+
+```jsx
+<n-button danger>default</n-button>
+<n-button fill danger>fill</n-button>
+<n-button dashed danger>dashed</n-button>
+<n-button ghost danger>ghost</n-button>
+<n-button flat danger>flat</n-button>
+<n-button link danger>link</n-button>
+```

package/es/button/examples/dashed.md

@@ -0,0 +1,21 @@
+---
+title: 虚线按钮
+description: 添加 `dashed` 属性将按钮的边框设置成虚线
+order: 9
+---
+
+```html
+<n-button dashed="true" ghost="true">虚线</n-button>
+<n-button type="primary" dashed="true" ghost="true">虚线</n-button>
+<n-button type="success" dashed="true" ghost="true">虚线</n-button>
+<n-button type="warning" dashed="true" ghost="true">虚线</n-button>
+<n-button type="error" dashed="true" ghost="true">虚线</n-button>
+```
+
+```jsx
+<n-button dashed ghost>虚线</n-button>
+<n-button type="primary" dashed ghost>虚线</n-button>
+<n-button type="success" dashed ghost>虚线</n-button>
+<n-button type="warning" dashed ghost>虚线</n-button>
+<n-button type="error" dashed ghost>虚线</n-button>
+```

package/es/button/examples/disabled.md

@@ -0,0 +1,35 @@
+---
+title: 不可用状态
+description: 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变
+order: 11
+---
+
+```html
+<n-button disabled="true">normal [disabled]</n-button>
+<n-button type="primary" disabled="true"> primary </n-button>
+<n-button disabled="true" fill="true"> fill </n-button>
+<n-button disabled="true" link="true"> link </n-button>
+<n-button disabled="true" type="primary" flat="true"> flat </n-button>
+<n-button disabled="true" dashed="true"> dashed </n-button>
+<div style="background-color: #827f7f; padding: 8px;">
+  <n-button type="primary" disabled="true" ghost="true">
+    ghost
+    <!-- 注释 -->
+  </n-button>
+</div>
+```
+
+```jsx
+<n-button disabled>normal [disabled]</n-button>
+<n-button type="primary" disabled> primary </n-button>
+<n-button disabled fill> fill </n-button>
+<n-button disabled link> link </n-button>
+<n-button disabled type="primary" flat> flat </n-button>
+<n-button disabled dashed> dashed </n-button>
+<div style={{ 'background-color': '#827f7f', padding: '8px' }}>
+  <n-button type="primary" disabled ghost>
+    ghost
+    {/* 注释 */}
+  </n-button>
+</div>
+```

package/es/button/examples/fill.md

@@ -0,0 +1,21 @@
+---
+title: 填充背景
+description: 添加 `fill` 属性使按钮更加注目
+order: 3
+---
+
+```html
+<n-button fill="true">实底</n-button>
+<n-button type="primary" fill="true">实底</n-button>
+<n-button type="success" fill="true">实底</n-button>
+<n-button type="warning" fill="true">实底</n-button>
+<n-button type="error" fill="true">实底</n-button>
+```
+
+```jsx
+<n-button fill>实底</n-button>
+<n-button type="primary" fill> 实底 </n-button>
+<n-button type="success" fill> 实底 </n-button>
+<n-button type="warning" fill> 实底 </n-button>
+<n-button type="error" fill> 实底 </n-button>
+```

package/es/button/examples/flat.md

@@ -0,0 +1,21 @@
+---
+title: 扁平按钮
+description: 添加 `flat` 属性将其设置为扁平按钮。
+order: 4
+---
+
+```html
+<n-button flat="true">按钮</n-button>
+<n-button type="primary" flat="true"> 按钮 </n-button>
+<n-button type="success" flat="true"> 按钮 </n-button>
+<n-button type="warning" flat="true"> 按钮 </n-button>
+<n-button type="error" flat="true"> 按钮 </n-button>
+```
+
+```jsx
+<n-button flat>按钮</n-button>
+<n-button type="primary" flat> 按钮 </n-button>
+<n-button type="success" flat> 按钮 </n-button>
+<n-button type="warning" flat> 按钮 </n-button>
+<n-button type="error" flat> 按钮 </n-button>
+```

package/es/button/examples/ghost.md

@@ -0,0 +1,21 @@
+---
+title: 幽灵按钮
+description: 将按钮的内容反色，背景变为透明，常用在有色背景上。
+order: 10
+---
+
+```html
+<n-button ghost="true">ghost</n-button>
+<n-button type="primary" ghost="true">ghost</n-button>
+<n-button type="success" ghost="true">ghost</n-button>
+<n-button type="warning" ghost="true">ghost</n-button>
+<n-button type="error" ghost="true">ghost</n-button>
+```
+
+```jsx
+<n-button ghost>ghost</n-button>
+<n-button type="primary" ghost> ghost </n-button>
+<n-button type="success" ghost> ghost </n-button>
+<n-button type="warning" ghost> ghost </n-button>
+<n-button type="error" ghost> ghost </n-button>
+```

package/es/button/examples/icon.md

@@ -0,0 +1,30 @@
+---
+title: 图标
+description: 在文字前面添加图标
+order: 12
+---
+
+```html
+<n-button icon="😂">按钮</n-button>
+<n-button type="primary" size="small" icon="😂">按钮</n-button>
+<n-button type="success" size="large" icon="😂">按钮</n-button>
+<n-button type="warning">按钮</n-button>
+<script>
+  const el = container.querySelectorAll('n-button');
+
+  el[3].icon = function () {
+    const b = document.createElement('b');
+
+    b.style.color = 'red';
+    b.textContent = 'icon';
+    return b;
+  };
+</script>
+```
+
+```jsx
+<n-button icon="😂">按钮</n-button>
+<n-button type="primary" size="small" icon="😂">按钮</n-button>
+<n-button type="success" size="large" icon="😂">按钮</n-button>
+<n-button type="warning" icon={() => <b style={{color:'red'}}>icon</b>}>按钮</n-button>
+```

package/es/button/examples/link.md

@@ -0,0 +1,21 @@
+---
+title: 链接按钮
+description: 添加 `link` 属性将其设置为链接按钮，并渲染为 a 标签
+order: 7
+---
+
+```html
+<n-button link="true">链接</n-button>
+<n-button type="primary" link="true">链接</n-button>
+<n-button type="success" link="true">链接</n-button>
+<n-button type="warning" link="true">链接</n-button>
+<n-button type="error" link="true">链接</n-button>
+```
+
+```jsx
+<n-button link>链接</n-button>
+<n-button type="primary" link>链接</n-button>
+<n-button type="success" link>链接</n-button>
+<n-button type="warning" link>链接</n-button>
+<n-button type="error" link>链接</n-button>
+```

package/es/button/examples/size.md

@@ -0,0 +1,23 @@
+---
+title: 不同尺寸
+description: 按钮有大、中、小三种尺寸。通过设置 `size` 为 `large`、`small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+order: 2
+---
+
+```html
+<n-button type="primary" size="small">小按钮</n-button>
+<n-button type="primary">默认按钮</n-button>
+<n-button type="primary" size="large">大按钮</n-button>
+<n-button type="success" size="small" circle="true">🤔</n-button>
+<n-button type="success" circle="true">🤔</n-button>
+<n-button type="success" size="large" circle="true">🤔</n-button>
+```
+
+```jsx
+<n-button type="primary" size="small"> 小按钮 </n-button>
+<n-button type="primary">默认按钮</n-button>
+<n-button type="primary" size="large"> 大按钮 </n-button>
+<n-button type="success" size="small" circle> 🤔 </n-button>
+<n-button type="success" circle> 🤔 </n-button>
+<n-button type="success" size="large" circle> 🤔 </n-button>
+```

package/es/capture-screen/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 捕获屏幕
+subtitle: n-capture-screen
+icon: 🍀
+---
+
+# 捕获、录制屏幕
+
+> 捕获、录制屏幕

package/es/capture-screen/examples/basic.md

@@ -0,0 +1,13 @@
+---
+title: 直接使用
+description: 最简单的使用方式
+order: 1
+---
+
+```html
+<n-capture-screen></n-capture-screen>
+```
+
+```jsx
+<n-capture-screen />
+```

package/es/capture-screen/examples/custom-save.md

@@ -0,0 +1,30 @@
+---
+title: 自定义保存录制视频方法
+description: 如果需要自定义保存视频或者对录制内容进行修改，可以通过 `onSaveRecorder` 回调函数进行操作
+order: 4
+---
+
+```html
+<n-capture-screen recorder="true" filename="自定义保存录制视频文件名"></n-capture-screen>
+<script>
+  const el = container.querySelector('n-capture-screen');
+
+  el.addEventListener('saverecorder', function (e) {
+    const { blob, fileName } = e.detail;
+    console.log('停止录制', fileName, 'size:', (blob.size / 1048576).toFixed(2) + 'mb');
+    // save event
+  });
+</script>
+```
+
+```jsx
+<n-capture-screen
+  recorder
+  filename="自定义保存录制视频文件名"
+  onSaveRecorder={(e) => {
+    const { blob, fileName } = e.detail;
+    console.log('停止录制', fileName, 'size:', (blob.size / 1048576).toFixed(2) + 'mb');
+    // save event
+  }}
+/>
+```

package/es/capture-screen/examples/preview.md

@@ -0,0 +1,13 @@
+---
+title: 捕获屏幕时预览
+description: 要想在预览捕获的图像，可以设置 `preview`属性;
+order: 2
+---
+
+```html
+<n-capture-screen preview="true"></n-capture-screen>
+```
+
+```jsx
+<n-capture-screen preview />
+```