@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/pop-upload/upload-events.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('事件是否正常触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('pop-upload#upload-events')
+
+  const preview = page.locator('.all-demos-container')
+  const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
+  const uploadModal = page.locator('.tiny-popupload__modal')
+  const selectFilesBtn = uploadModal.getByRole('button', { name: '选择批量文件' })
+  const uploadsBtn = page.getByRole('button', { name: '开始上传' })
+  const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
+  const deleteIcon = uploadModal.getByRole('listitem').locator('svg')
+  const path = require('node:path')
+  const currentPath1 = path.resolve(__dirname, '测试.jpg')
+  const currentPath2 = path.resolve(__dirname, '测试.png')
+  const currentPath3 = path.resolve(__dirname, '测试.svg')
+
+  // 点击选择文件按钮，上传弹窗弹出
+  await modalAppearBtn.click()
+
+  // 没有文件被选择时，开始上传按钮禁用
+  await expect(lists).toHaveCount(0)
+  await expect(uploadsBtn).toBeDisabled()
+
+  // 点击选择文件后，文件被选择，开始上传按钮启用
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
+  await fileChooser.setFiles([currentPath1, currentPath2, currentPath3])
+  await page.getByText('触发文件超出个数限制回调事件').isVisible()
+
+  await fileChooser.setFiles(currentPath1)
+  await deleteIcon.click()
+  await page.getByText('触发删除文件回调事件').isVisible()
+
+  await page.waitForTimeout(200)
+  await fileChooser.setFiles(currentPath2)
+  await uploadsBtn.click()
+  await page.getByText('文件上传失败回调').isVisible()
+})

package/demos/pc/app/pop-upload/upload-events.vue

@@ -0,0 +1,44 @@
+<template>
+  <tiny-pop-upload
+    :action="action"
+    multiple
+    :limit="2"
+    @remove="handleRemove"
+    @error="handleError"
+    @exceed="handleExceed"
+    @progress="handleProgress"
+    @success="handleSuccess"
+  ></tiny-pop-upload>
+</template>
+
+<script lang="jsx">
+import { PopUpload, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopUpload: PopUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload'
+    }
+  },
+  methods: {
+    handleRemove() {
+      Modal.message('触发删除文件回调事件')
+    },
+    handleProgress() {
+      Modal.message('文件上传时的回调 返回进程')
+    },
+    handleError() {
+      Modal.message('文件上传失败回调')
+    },
+    handleExceed() {
+      Modal.message('触发文件超出个数限制回调事件')
+    },
+    handleSuccess() {
+      Modal.message('触发上传文件成功回调事件')
+    }
+  }
+}
+</script>

package/demos/pc/app/pop-upload/webdoc/pop-upload.cn.md

@@ -4,4 +4,4 @@ title: PopUpload 弹出框上传
 
 # PopUpload 弹出框上传
 
-<div>点击所设置的元素，弹出上传对话框。</div>
+<div>在弹出的对话框里，实现上传操作和展示。</div>

package/demos/pc/app/pop-upload/webdoc/pop-upload.en.md

@@ -1,7 +1,7 @@
 ---
-title: PopUpload dialog box
+title: PopUpload
 ---
 
-# PopUpload dialog box
+# PopUpload
 
-<div>Click the element to display the upload dialog box.</div>
+<div>In the pop-up dialog box, implement the upload operation and display.</div>

package/demos/pc/app/pop-upload/webdoc/pop-upload.js

@@ -4,212 +4,218 @@ export default {
   demos: [
     {
       'demoId': 'basic-usage',
-      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic usage' },
       'desc': {
-        'zh-CN': '<p>通过 <code>action</code> 属性设置上传的服务接口。</p>\n',
-        'en-US': '<p>Set the upload service interface through the <code>action</code> attribute. </p>\n'
+        'zh-CN': `通过 <code>action</code> 设置上传的服务接口， <code>upload-name</code> 设置上传的文件字段名，<code>data</code> 自定义上传时附带的额外参数。`,
+        'en-US': `Set the service interface for uploading through<code>action</code>,<code>upload-name</code>set the file field name for uploading, 
+              and<code>data</code>customize the additional parameters that come with uploading.`
       },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'custom-request-headers',
-      'name': { 'zh-CN': '自定义请求头', 'en-US': 'Custom Request Header' },
+      'name': { 'zh-CN': '请求头部配置', 'en-US': 'Request header configuration' },
       'desc': {
-        'zh-CN': '<p>通过 <code>headers</code> 属性自定义上传请求头信息。</p>\n',
+        'zh-CN':
+          '通过 <code>with-credentials</code> 开启支持发送 cookie 凭证信息，<code>headers</code> 自定义上传请求头信息。',
         'en-US':
-          '<p>The <code>headers</code> attribute is used to customize the upload request header information. </p>\n'
+          'Enable support for sending cookie credential information through<code>with-credentials</code>, and customize upload request header information through<code>headers</code>.'
       },
       'codeFiles': ['custom-request-headers.vue']
     },
-    {
-      'demoId': 'data',
-      'name': { 'zh-CN': '上传时附带的额外参数', 'en-US': 'Extra parameters attached during upload' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>data</code> 属性自定义上传时附带的额外参数。</p>\n',
-        'en-US':
-          '<p>The <code>data</code> attribute is used to customize the additional parameters attached to the upload. </p>\n'
-      },
-      'codeFiles': ['data.vue']
-    },
     {
       'demoId': 'size',
-      'name': { 'zh-CN': '设置组件大小', 'en-US': 'Set Component Size' },
+      'name': { 'zh-CN': '尺寸和禁用', 'en-US': 'Size and disabled' },
       'desc': {
         'zh-CN':
-          '<p>可设置为：<code>medium</code>，<code>small</code>，<code>mini</code>\n通过 <code>disabled</code> 属性设置是否禁用，默认值为 false 。</p>\n',
+          '通过 <code>medium</code>，<code>small</code>，<code>mini</code> 设置组件尺寸，<code>disabled</code> 设置是否禁用，默认值为 false 。',
         'en-US':
-          '<p>The options are as follows: <code>medium</code>, <code>small</code>, <code>mini</code>\nThe <code>disabled</code> attribute is used to set whether to disable. The default value is false. </p>\n'
+          'Set the component size through<code>media</code>,<code>small</code>,<code>mini</code>, and whether to <code>disabled</code> it. The default value is false.'
       },
       'codeFiles': ['size.vue']
     },
     {
       'demoId': 'http-request',
-      'name': { 'zh-CN': '覆盖默认请求', 'en-US': 'Override the default request' },
+      'name': { 'zh-CN': '自定义上传', 'en-US': 'Custom Upload' },
       'desc': {
-        'zh-CN': '<p>通过配置 <code>http-request</code> 覆盖默认的上传行为，可以自定义上传的实现</p>\n',
+        'zh-CN': '通过 <code>http-request</code> 配置覆盖默认的上传行为，自定义上传的实现。',
         'en-US':
-          '<p>You can configure <code>http-request</code> to overwrite the default upload behavior and customize the upload implementation</p>\n'
+          'You can configure <code>http-request</code> to overwrite the default upload behavior and customize the upload implementation'
       },
       'codeFiles': ['http-request.vue']
     },
     {
-      'demoId': 'upload-name1',
-      'name': { 'zh-CN': '上传的文件字段名', 'en-US': 'Field name of the uploaded file' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>upload-name</code> 属性设置上传的文件字段名，默认值为 file 。</p>\n',
-        'en-US':
-          '<p>Use the <code>upload-name</code> attribute to set the field name of the file to be uploaded. The default value is file. </p>\n'
-      },
-      'codeFiles': ['upload-name.vue']
-    },
-    {
-      'demoId': 'upload-name',
-      'name': { 'zh-CN': '发送 cookie 凭证信息', 'en-US': 'Send cookie credential information' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['upload-name.vue']
-    },
-    {
-      'demoId': 'fill-button-text1',
+      'demoId': 'fill-button-text',
       'name': {
-        'zh-CN': '文件上传弹框中取消按钮的文本',
-        'en-US': 'Text of the Cancel button in the dialog box for uploading files'
+        'zh-CN': '定义按钮和标题',
+        'en-US': 'Define Buttons And Titles'
       },
       'desc': {
-        'zh-CN': '<p>通过 <code>cancel-button-text</code> 属性指定取消按钮的文本内容</p>\n',
-        'en-US':
-          '<p>Specify the text content of the cancel button through the <code>cancel-button-text</code> attribute</p>\n'
-      },
-      'codeFiles': ['fill-button-text.vue']
-    },
-    {
-      'demoId': 'fill-button-text2',
-      'name': {
-        'zh-CN': '文件上传弹框中提交按钮的文本',
-        'en-US': 'Text of the Submit button in the dialog box for uploading files'
+        'zh-CN': `通过 <code>dialog-title</code> 设置弹框的标题，<code>cancel-button-text</code> 设置取消按钮的文本, 
+          <code>submit-button-text</code> 设置提交按钮的文本， <code>cancel-button-text</code> 设置上传按钮的文本。`,
+        'en-US': `Set the title of the pop-up box through<code>dialog-title</code>, and set the text of the cancel button through<code>cancel-button-text</code>,
+          <code>submit-button-text</code>Set the text for the submit button,<code>cancel-button-text</code>Set the text for the upload button.`
       },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['fill-button-text.vue']
-    },
-    {
-      'demoId': 'fill-button-text4',
-      'name': { 'zh-CN': '打开弹出框的按钮的文本', 'en-US': 'Text of the button for opening a dialog box' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['fill-button-text.vue']
     },
     {
       'demoId': 'file-limit',
-      'name': { 'zh-CN': '最大上传文件数', 'en-US': 'Maximum number of files to be uploaded' },
+      'name': { 'zh-CN': '上传数限制', 'en-US': 'Upload Quantity Limit' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>limit</code> 属性可以指定最大上传的文件数量，配置 <code>multiple</code> 属性后可同时选择多个文件。</p>\n',
+        'zh-CN': '通过 <code>limit</code> 设置最大上传的文件数量，<code>multiple</code> 设置是否可同时选择多个文件。',
         'en-US':
-          '<p>You can use the <code>limit</code> attribute to specify the maximum number of files to be uploaded. After the <code>multiple</code> attribute is configured, you can select multiple files at the same time. </p>\n'
+          'Set the maximum number of uploaded files through<code>limit</code>, and whether <code>multiple</code> files can be selected simultaneously.'
       },
       'codeFiles': ['file-limit.vue']
     },
     {
       'demoId': 'file-type',
-      'name': { 'zh-CN': '可上传文件类型', 'en-US': 'File types that can be uploaded' },
+      'name': { 'zh-CN': '限制文件类型和大小', 'en-US': 'Restrict file types and sizes' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>accept</code> 属性可以对选择文件时的文件类型进行控制，而 <code>upload-file-type</code> 属性可以指定在上传时进行校验的文件类型。</p>\n',
+          '通过 <code>max-upload-file-size</code> 设置上传文件的大小， <code>accept</code> 设置可上传的文件类型，还可通过 <code>upload-file-type</code> 指定在上传时进行校验的文件类型。',
         'en-US':
-          '<p>The <code>accept</code> attribute can be used to control the file type when a file is selected, and the <code>upload-file-type</code> attribute can be used to specify the file type to be verified during upload. </p>\n'
+          'Set the size of the uploaded file through<code>max-upload-file-size</code>,<code>accept</code>to set the file types that can be uploaded, and also specify the file types to be verified during upload through<code>upload-file-type</code>.'
       },
       'codeFiles': ['file-type.vue']
     },
-    {
-      'demoId': 'max-upload-file-size',
-      'name': { 'zh-CN': '可上传文件大小', 'en-US': 'Size of files that can be uploaded' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>max-upload-file-size</code> 属性指定可上传文件的大小。</p>\n',
-        'en-US':
-          '<p>The <code>max-upload-file-size</code> attribute specifies the size of the file that can be uploaded. </p>\n'
-      },
-      'codeFiles': ['max-upload-file-size.vue']
-    },
     {
       'demoId': 'prevent-delete-file',
-      'name': { 'zh-CN': '阻止删除文件', 'en-US': 'Do not delete files' },
+      'name': { 'zh-CN': '阻止删除', 'en-US': 'Block deletion' },
       'desc': {
-        'zh-CN': '<p>:before-remove（移除文件前回调事件）,方法里面return true/false，表示是否可以删除</p>\n',
+        'zh-CN':
+          '在 <code>before-remove</code> 处理移除文件前的逻辑，若返回 false 或者返回 Promise 且被 reject，则阻止删除。',
         'en-US':
-          '<p>:before-remove (callback event before removing a file). In the method, return true/false indicates whether the file can be deleted.</p>\n'
+          'Process the logic before removing files in<code>before-remove</code>. If it returns false or Promise and is rejected, the deletion will be blocked.'
       },
       'codeFiles': ['prevent-delete-file.vue']
     },
     {
       'demoId': 'before-upload',
-      'name': { 'zh-CN': '阻止上传文件', 'en-US': 'Do not upload files' },
+      'name': { 'zh-CN': '阻止上传', 'en-US': 'Block uploads' },
       'desc': {
         'zh-CN':
-          '<p>:before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传</p>\n',
+          '在 <code>before-upload</code> 回调中处理文件上传前的逻辑，若返回 false 或者返回 Promise 且被 reject，则阻止上传。',
         'en-US':
-          '<p>:before-upload Indicates the hook before uploading a file. The parameter is the uploaded file. If false is returned or Promise is returned and rejected, the upload stops.</p>\n'
+          'Process the logic before file upload in the<code>before-upload</code>callback. If it returns false or Promise and is rejected, the upload is blocked.'
       },
       'codeFiles': ['before-upload.vue']
+    },
+    {
+      'demoId': 'upload-events',
+      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
+      'desc': {
+        'zh-CN': `<div class="tip custom-block"><code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
+          <code>exceed</code> 监听文件超出个数限制事件；<br/> <code>progress</code> 监听文件上传过程事件；<br/>
+          <code>success</code> 监听文件上传成功事件。</div>`,
+        'en-US': `<div class="tip custom-block"> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
+        <code>exceeded</code> Listen for events where the number of files exceeds the limit; <br/> <code>progress</code> Listen for file upload process events;<br/> 
+        <code>success</code> Listen for file upload success events.</div>`
+      },
+      'codeFiles': ['upload-events.vue']
     }
   ],
   apis: [
     {
       'name': 'pop-upload',
       'type': 'component',
-      'properties': [
+      'props': [
         {
-          'name': 'dialog-title',
+          'name': 'accept',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '接受上传的文件类型', 'en-US': 'File type to be uploaded' },
+          'demoId': 'file-type'
+        },
+        {
+          'name': 'action',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置文件上传弹框的标题;默认为 文件上传',
-            'en-US': 'Set the title of the file upload dialog box. The default value is file upload'
+            'zh-CN': '必选参数，设置上传的地址',
+            'en-US': 'This parameter is mandatory and specifies the upload address.'
           },
-          'demoId': 'fill-button-text1'
+          'demoId': 'basic-usage'
         },
         {
-          'name': 'size',
-          'type': 'string',
+          'name': 'before-remove',
+          'type': '(file: IFile) => void',
+          'typeAnchorName': 'file-upload#IFile',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置组件大小', 'en-US': 'Set the component size' },
-          'demoId': 'size'
+          'desc': {
+            'zh-CN':
+              '删除文件之间的钩子函数，若返回 false 或者返回 Promise 且被 reject，则取消删除，反之则执行删除；入参为点击删除的文件信息',
+            'en-US':
+              'Delete the hook function between files. If it returns false or Promise and is rejected, cancel the deletion. Otherwise, execute the deletion; Enter the file information that was deleted by clicking on the input parameter'
+          },
+          'demoId': 'prevent-delete-file'
         },
         {
-          'name': 'submit-button-text',
-          'type': 'string',
+          'name': 'before-upload',
+          'type': '(file: IFile) => void',
+          'typeAnchorName': 'file-upload#IFile',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置文件上传弹框中提交按钮的文本;默认为 开始上传',
+            'zh-CN':
+              '上传文件之前的钩子，若返回 false 或者返回 Promise 且被 reject，则停止上传，反之则继续上传；入参为上传的文件信息',
             'en-US':
-              'Set the text of the Submit button in the file upload dialog box. The default value is Start uploading'
+              'If the hook before uploading the file returns false or Promise and is rejected, the upload will be stopped. Otherwise, the upload will continue; Enter the uploaded file information as input'
           },
-          'demoId': 'fill-button-text2'
+          'demoId': 'before-upload'
         },
         {
           'name': 'cancel-button-text',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置文件上传弹框中取消按钮的文本;默认为 取消',
+            'zh-CN': '设置文件上传弹框中取消按钮的文本；默认为 取消',
             'en-US': 'Set the text of the Cancel button in the file upload dialog box. The default value is Cancel'
           },
-          'demoId': 'fill-button-text1'
+          'demoId': 'fill-button-text'
         },
         {
-          'name': 'action',
+          'name': 'data',
+          'type': 'ICustomObject',
+          'typeAnchorName': 'ICustomObject',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '上传时附带的额外参数', 'en-US': 'Extra parameters attached during upload' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'dialog-title',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '必选参数，设置上传的地址',
-            'en-US': 'This parameter is mandatory and specifies the upload address.'
+            'zh-CN': '设置文件上传弹框的标题;默认为 文件上传',
+            'en-US': 'Set the title of the file upload dialog box. The default value is file upload'
           },
-          'demoId': 'custom-request-headers'
+          'demoId': 'fill-button-text'
+        },
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '是否禁用;默认为 false', 'en-US': 'Whether to disable; The default value is false' },
+          'demoId': 'size'
         },
         {
           'name': 'headers',
-          'type': 'object',
+          'type': 'ICustomObject',
+          'typeAnchorName': 'ICustomObject',
           'defaultValue': '',
           'desc': { 'zh-CN': '设置上传的请求头部', 'en-US': 'Set the upload request header' },
           'demoId': 'custom-request-headers'
         },
+        {
+          'name': 'http-request',
+          'type': '() => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现',
+            'en-US': 'Overwrite the default upload behavior. You can customize the upload implementation.'
+          },
+          'demoId': 'http-request'
+        },
         {
           'name': 'limit',
           'type': 'number',
@@ -217,6 +223,13 @@ export default {
           'desc': { 'zh-CN': '最大允许上传个数', 'en-US': 'Maximum number of files that can be uploaded' },
           'demoId': 'file-limit'
         },
+        {
+          'name': 'max-upload-file-size',
+          'type': 'number',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '最大上传文件大小', 'en-US': 'Maximum size of files to be uploaded' },
+          'demoId': 'file-type'
+        },
         {
           'name': 'multiple',
           'type': 'boolean',
@@ -225,18 +238,32 @@ export default {
           'demoId': 'file-limit'
         },
         {
-          'name': 'disabled',
-          'type': 'boolean',
+          'name': 'size',
+          'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '是否禁用;默认为 false', 'en-US': 'Whether to disable; The default value is false' },
+          'desc': { 'zh-CN': '设置组件大小', 'en-US': 'Set the component size' },
           'demoId': 'size'
         },
         {
-          'name': 'accept',
+          'name': 'submit-button-text',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '接受上传的文件类型', 'en-US': 'File type to be uploaded' },
-          'demoId': 'file-type'
+          'desc': {
+            'zh-CN': '设置文件上传弹框中提交按钮的文本;默认为 开始上传',
+            'en-US':
+              'Set the text of the Submit button in the file upload dialog box. The default value is Start uploading'
+          },
+          'demoId': 'fill-button-text'
+        },
+        {
+          'name': 'upload-button-text',
+          'type': 'string',
+          'defaultValue': "'选择文件'",
+          'desc': {
+            'zh-CN': '打开弹出框的按钮的文本配置属性',
+            'en-US': 'Text configuration attribute of the button for opening a dialog box'
+          },
+          'demoId': 'fill-button-text'
         },
         {
           'name': 'upload-file-type',
@@ -248,80 +275,92 @@ export default {
           },
           'demoId': 'file-type'
         },
-        {
-          'name': 'max-upload-file-size',
-          'type': 'number',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '最大上传文件大小', 'en-US': 'Maximum size of files to be uploaded' },
-          'demoId': 'max-upload-file-size'
-        },
         {
           'name': 'upload-name',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 file',
+          'defaultValue': "'file'",
           'desc': { 'zh-CN': '上传的文件字段名', 'en-US': 'Field name of the uploaded file' },
-          'demoId': 'upload-name'
-        },
-        {
-          'name': 'upload-button-text',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 选择文件',
-          'desc': {
-            'zh-CN': '打开弹出框的按钮的文本配置属性',
-            'en-US': 'Text configuration attribute of the button for opening a dialog box'
-          },
-          'demoId': 'fill-button-text4'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'with-credentials',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': { 'zh-CN': '支持发送 cookie 凭证信息', 'en-US': 'Cookie credential information can be sent.' },
-          'demoId': 'upload-name'
+          'demoId': 'custom-request-headers'
+        }
+      ],
+      'events': [
+        {
+          'name': 'error',
+          'type': '(file: IFile) => void',
+          'typeAnchorName': 'file-upload#IFile',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '文件上传失败时触发的事件； file 为当前上传失败文件信息',
+            'en-US': 'Event triggered when file upload fails; file is the current upload failure file information'
+          },
+          'demoId': 'upload-events'
         },
         {
-          'name': 'before-remove',
-          'type': 'Function(arg1)',
+          'name': 'exceed',
+          'type': '(files: File | File[], fileList: IFile[]) => void',
+          'typeAnchorName': 'file-upload#IFile',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '在上传文件列表点击删除成功前触发;arg1:{object 点击删除的文件信息}',
-            'en-US':
-              'This event is triggered before the upload file list is deleted successfully. arg1:{Information about the file to be deleted by clicking object}'
+            'zh-CN': '文件超出个数限制时触发的事件； files 为上传的文件',
+            'en-US': 'Event triggered when the number of files exceeds the limit; Files are uploaded files'
           },
-          'demoId': 'prevent-delete-file'
+          'demoId': 'upload-events'
         },
         {
-          'name': 'before-upload',
-          'type': 'Function(arg1)',
+          'name': 'progress',
+          'type': '(file: IFile) => void',
+          'typeAnchorName': 'file-upload#IFile',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。;arg1:{object 上传的文件信息}',
-            'en-US':
-              'Hook before uploading a file. The parameter is the file to be uploaded. If false is returned or Promise is returned and rejected, the upload stops. ;arg1:{object uploaded file information}'
+            'zh-CN': '文件上传时触发的事件',
+            'en-US': 'Event triggered during file upload'
           },
-          'demoId': 'before-upload'
+          'demoId': 'upload-events'
         },
         {
-          'name': 'http-request',
-          'type': 'Function',
+          'name': 'remove',
+          'type': '(file: IFile, fileList: IFile[]) => void',
+          'typeAnchorName': 'file-upload#IFile',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现',
-            'en-US': 'Overwrite the default upload behavior. You can customize the upload implementation.'
+            'zh-CN': '从文件列表移除文件时触发的事件； file 为当前移除的文件信息',
+            'en-US':
+              'Event triggered when removing a file from the file list; File is the information of the currently removed file'
           },
-          'demoId': 'http-request'
+          'demoId': 'upload-events'
         },
         {
-          'name': 'data',
-          'type': 'object',
+          'name': 'success',
+          'type': '(res: ProgressEvent, file: IFile) => void',
+          'typeAnchorName': 'IFile',
           'defaultValue': '',
-          'desc': { 'zh-CN': '上传时附带的额外参数', 'en-US': 'Extra parameters attached during upload' },
-          'demoId': 'data'
+          'desc': {
+            'zh-CN': '文件上传成功时触发的事件； res 为上传成功后的响应信息事件对象，file 为当前上传的文件',
+            'en-US':
+              'Event triggered when the file is successfully uploaded; Res is the response information event object after successful upload'
+          },
+          'demoId': 'upload-events'
         }
       ],
-      'events': [],
       'slots': []
     }
+  ],
+  types: [
+    {
+      name: 'ICustomObject',
+      type: 'interface',
+      code: `
+interface ICustomObject {
+  [propName: string]: any // 自定义属性
+}
+      `
+    }
   ]
 }

package/demos/pc/app/popover/basic-usage-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-popover placement="top-start" title="标题" content="这是一段内容。" width="200">
     <template #reference>
-      <tiny-button>悬浮我提示</tiny-button>
+      <tiny-button>点击我提示</tiny-button>
     </template>
   </tiny-popover>
 </template>