fix(uploader): 修复官网蒙层层级、demo中ListItem类型的引入并更新文档

src/packages/uploader/demos/h5/demo1.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
-import { Uploader, Cell, FileItem, Space } from '@nutui/nutui-react'
+import { Uploader, Cell, UploaderFileItem, Space } from '@nutui/nutui-react'
 import { Dongdong } from '@nutui/icons-react'
 
 const Demo1 = () => {
-  const [list, setList] = useState<FileItem[]>([
+  const [list, setList] = useState<UploaderFileItem[]>([
     {
       url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
       uid: 133,
@@ -23,7 +23,7 @@ const Demo1 = () => {
       url: URL.createObjectURL(file),
     }
   }
-  async function uploadFail(file: File): Promise<FileItem> {
+  async function uploadFail(file: File): Promise<UploaderFileItem> {
     await sleep(2000)
     throw new Error('Fail to upload')
   }

src/packages/uploader/demos/h5/demo10.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import { Loading, Star } from '@nutui/icons-react'
-import { Uploader, Button, FileItem } from '@nutui/nutui-react'
+import { Uploader, Button, UploaderFileItem } from '@nutui/nutui-react'
 
 const Demo10 = () => {
-  const [list, setList] = useState<FileItem[]>([
+  const [list, setList] = useState<UploaderFileItem[]>([
     {
       name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
       url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',

src/packages/uploader/demos/h5/demo2.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Uploader, FileItem } from '@nutui/nutui-react'
+import { Uploader, UploaderFileItem } from '@nutui/nutui-react'
 import { Dongdong, Loading, Star } from '@nutui/icons-react'
 
 const Demo2 = () => {
-  const defaultList: FileItem[] = [
+  const defaultList: UploaderFileItem[] = [
     {
       uid: 111,
       name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
@@ -44,7 +44,7 @@ const Demo2 = () => {
       loadingIcon: <Loading className="nut-icon-Loading" color="#fff" />,
     },
   ]
-  const onDelete = (file: FileItem, fileList: FileItem[]) => {
+  const onDelete = (file: UploaderFileItem, fileList: UploaderFileItem[]) => {
     console.log('delete事件触发', file, fileList)
   }
   return (

src/packages/uploader/demos/h5/demo3.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { Uploader, Cell, FileItem, Space } from '@nutui/nutui-react'
+import { Uploader, Cell, UploaderFileItem, Space } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  const [list, setList] = useState<FileItem[]>([])
+  const [list, setList] = useState<UploaderFileItem[]>([])
   function sleep(time: number) {
     return new Promise<void>((resolve) => {
       setTimeout(() => {

src/packages/uploader/demos/h5/demo4.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { Uploader, Cell, FileItem } from '@nutui/nutui-react'
+import { Uploader, Cell, UploaderFileItem } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  const [list, setList] = useState<FileItem[]>([])
+  const [list, setList] = useState<UploaderFileItem[]>([])
   const onOversize = (files: File[]) => {
     console.log('oversize 触发 文件大小不能超过 50kb', files)
   }

src/packages/uploader/demos/h5/demo5.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { Uploader, Cell, FileItem } from '@nutui/nutui-react'
+import { Uploader, Cell, UploaderFileItem } from '@nutui/nutui-react'
 
 const Demo5 = () => {
-  const [list, setList] = useState<FileItem[]>([])
+  const [list, setList] = useState<UploaderFileItem[]>([])
   const beforeUpload = async (files: File[]) => {
     const allowedTypes = ['image/png']
     const filteredFiles = Array.from(files).filter((file) =>

src/packages/uploader/demos/h5/demo7.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Uploader, Cell, FileItem } from '@nutui/nutui-react'
+import { Uploader, Cell, UploaderFileItem } from '@nutui/nutui-react'
 import { Dongdong, Star } from '@nutui/icons-react'
 
-const defaultFileList: FileItem[] = [
+const defaultFileList: UploaderFileItem[] = [
   {
     name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
     url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',

src/packages/uploader/demos/taro/demo1.tsx

@@ -1,12 +1,17 @@
 import React, { useState } from 'react'
-import { Uploader, Cell, FileItem, Space } from '@nutui/nutui-react-taro'
+import {
+  Uploader,
+  Cell,
+  UploaderFileItem,
+  Space,
+} from '@nutui/nutui-react-taro'
 import { Dongdong } from '@nutui/icons-react-taro'
 
 const Demo1 = () => {
   const demoUrl =
     'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif'
 
-  const [list, setList] = useState<FileItem[]>([
+  const [list, setList] = useState<UploaderFileItem[]>([
     {
       url: demoUrl,
       uid: 133,
@@ -24,7 +29,7 @@ const Demo1 = () => {
     await sleep(2000)
     return { url: demoUrl }
   }
-  async function uploadFail(file: File): Promise<FileItem> {
+  async function uploadFail(file: File): Promise<UploaderFileItem> {
     await sleep(2000)
     throw new Error('Fail to upload')
   }

src/packages/uploader/demos/taro/demo10.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import { Loading, Star } from '@nutui/icons-react'
-import { Uploader, Button, FileItem } from '@nutui/nutui-react-taro'
+import { Uploader, Button, UploaderFileItem } from '@nutui/nutui-react-taro'
 
 const Demo10 = () => {
-  const [list, setList] = useState<FileItem[]>([
+  const [list, setList] = useState<UploaderFileItem[]>([
     {
       name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
       url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',

src/packages/uploader/demos/taro/demo2.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Uploader, FileItem } from '@nutui/nutui-react-taro'
+import { Uploader, UploaderFileItem } from '@nutui/nutui-react-taro'
 import { Dongdong, Loading, Star } from '@nutui/icons-react-taro'
 
 const Demo2 = () => {
-  const defaultList: FileItem[] = [
+  const defaultList: UploaderFileItem[] = [
     {
       uid: 111,
       name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
@@ -44,7 +44,7 @@ const Demo2 = () => {
       loadingIcon: <Loading className="nut-icon-Loading" color="#fff" />,
     },
   ]
-  const onDelete = (file: FileItem, fileList: FileItem[]) => {
+  const onDelete = (file: UploaderFileItem, fileList: UploaderFileItem[]) => {
     console.log('delete事件触发', file, fileList)
   }
   return (

src/packages/uploader/demos/taro/demo3.tsx

@@ -1,11 +1,16 @@
 import React, { useState } from 'react'
-import { Uploader, Cell, FileItem, Space } from '@nutui/nutui-react-taro'
+import {
+  Uploader,
+  Cell,
+  UploaderFileItem,
+  Space,
+} from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   const demoUrl =
     'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif'
 
-  const [list, setList] = useState<FileItem[]>([])
+  const [list, setList] = useState<UploaderFileItem[]>([])
   function sleep(time: number) {
     return new Promise<void>((resolve) => {
       setTimeout(() => {

src/packages/uploader/demos/taro/demo4.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
-import { Uploader, Cell, FileItem } from '@nutui/nutui-react-taro'
+import { Uploader, Cell, UploaderFileItem } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   const demoUrl =
     'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif'
 
-  const [list, setList] = useState<FileItem[]>([])
+  const [list, setList] = useState<UploaderFileItem[]>([])
 
   function sleep(time: number) {
     return new Promise<void>((resolve) => {

src/packages/uploader/demos/taro/demo5.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { Uploader, Cell, FileItem } from '@nutui/nutui-react-taro'
+import { Uploader, Cell, UploaderFileItem } from '@nutui/nutui-react-taro'
 
 const Demo5 = () => {
-  const [list, setList] = useState<FileItem[]>([])
+  const [list, setList] = useState<UploaderFileItem[]>([])
   const beforeUpload = async (files: File[]) => {
     const allowedTypes = ['image/png']
     const filteredFiles = Array.from(files).filter((file) =>

src/packages/uploader/demos/taro/demo7.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Uploader, Cell, FileItem } from '@nutui/nutui-react-taro'
+import { Uploader, Cell, UploaderFileItem } from '@nutui/nutui-react-taro'
 import { Dongdong, Star } from '@nutui/icons-react-taro'
 
-const defaultFileList: FileItem[] = [
+const defaultFileList: UploaderFileItem[] = [
   {
     name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
     url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',

src/packages/uploader/doc.taro.md

@@ -66,22 +66,30 @@ import { Uploader } from '@nutui/nutui-react-taro'
 
 :::
 
-### 选中文件后，通过按钮手动执行上传
+### 直接调起摄像头（移动端生效）
 
 :::demo
 
 <CodeBlock src='taro/demo8.tsx'></CodeBlock>
 
 :::
 
-### 基础用法-上传列表展示
+### 选中文件后，通过按钮手动执行上传
 
 :::demo
 
 <CodeBlock src='taro/demo9.tsx'></CodeBlock>
 
 :::
 
+### 基础用法-上传列表展示
+
+:::demo
+
+<CodeBlock src='taro/demo10.tsx'></CodeBlock>
+
+:::
+
 ## Uploader
 
 ### Props

src/packages/uploader/uploader.scss

@@ -87,6 +87,7 @@
       height: 100%;
       background: $uploader-preview-progress-background;
       border-radius: $uploader-image-border-radius;
+      z-index: 10;
 
       i {
         margin-bottom: $uploader-image-icon-margin-bottom;