From 166c3a260064917c28a4a4eae00952b26534c8f9 Mon Sep 17 00:00:00 2001 From: DiamondYuan <541832074@qq.com> Date: Mon, 11 Dec 2023 16:09:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20image=20upload=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=20axml=20(#942)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add copy script * feat: update generate code * docs: update prompt * feat: 更新 image upload * fix: 更新 axml * feat: 更新 image upload 组件 * feat: 更新 image upload demo 页面 * feat: 更新 image upload 组件的 --------- Co-authored-by: DiamondYuan --- .gitignore | 1 + .../alipay/demo/pages/ImageUpload/index.axml | 12 +- .../alipay/demo/pages/ImageUpload/index.js | 86 ++++++------ .../ImageUpload/{index.acss => index.less} | 0 .../demo/pages/ImageUploadControl/index.axml | 11 +- .../demo/pages/ImageUploadControl/index.js | 62 ++++----- .../demo/pages/ImageUploadControl/index.json | 3 +- .../{index.acss => index.less} | 0 compiled/alipay/src/ImageUpload/index.axml | 85 ++++++------ compiled/alipay/src/tsxml/type.ts | 1 + demo/pages/ImageUpload/index.axml | 36 ----- demo/pages/ImageUpload/index.axml.tsx | 38 ++++++ .../ImageUpload/{index.acss => index.less} | 0 demo/pages/ImageUpload/{index.js => index.ts} | 0 demo/pages/ImageUploadControl/index.axml | 20 --- demo/pages/ImageUploadControl/index.axml.tsx | 23 ++++ demo/pages/ImageUploadControl/index.json | 3 +- .../{index.acss => index.less} | 0 .../ImageUploadControl/{index.js => index.ts} | 0 package.json | 4 +- scripts/copy.ts | 126 ++++++++++++++++++ scripts/generate.ts | 67 ++++++++++ scripts/transform.ts | 12 +- src/ImageUpload/index.axml | 58 -------- src/ImageUpload/index.axml.tsx | 80 +++++++++++ src/tsxml/type.ts | 1 + 26 files changed, 482 insertions(+), 247 deletions(-) rename compiled/alipay/demo/pages/ImageUpload/{index.acss => index.less} (100%) rename compiled/alipay/demo/pages/ImageUploadControl/{index.acss => index.less} (100%) delete mode 100644 demo/pages/ImageUpload/index.axml create mode 100644 demo/pages/ImageUpload/index.axml.tsx rename demo/pages/ImageUpload/{index.acss => index.less} (100%) rename demo/pages/ImageUpload/{index.js => index.ts} (100%) delete mode 100644 demo/pages/ImageUploadControl/index.axml create mode 100644 demo/pages/ImageUploadControl/index.axml.tsx rename demo/pages/ImageUploadControl/{index.acss => index.less} (100%) rename demo/pages/ImageUploadControl/{index.js => index.ts} (100%) create mode 100644 scripts/copy.ts create mode 100644 scripts/generate.ts delete mode 100644 src/ImageUpload/index.axml create mode 100644 src/ImageUpload/index.axml.tsx diff --git a/.gitignore b/.gitignore index 3a41f1c53..22ca5ff61 100644 --- a/.gitignore +++ b/.gitignore @@ -37,3 +37,4 @@ project.private.config.json compiled/wechat/miniprogram_npm compiled/wechat/node_modules compiled/wechat/yarn.lock +knowledge.json diff --git a/compiled/alipay/demo/pages/ImageUpload/index.axml b/compiled/alipay/demo/pages/ImageUpload/index.axml index 857ebf8ce..13c725f88 100644 --- a/compiled/alipay/demo/pages/ImageUpload/index.axml +++ b/compiled/alipay/demo/pages/ImageUpload/index.axml @@ -3,33 +3,29 @@ onChange="onChange" onUpload="onUpload" /> - - 限制只能上传1个 - - diff --git a/compiled/alipay/demo/pages/ImageUpload/index.js b/compiled/alipay/demo/pages/ImageUpload/index.js index 4554d7f09..4173d6a81 100644 --- a/compiled/alipay/demo/pages/ImageUpload/index.js +++ b/compiled/alipay/demo/pages/ImageUpload/index.js @@ -1,45 +1,45 @@ Page({ - data: { - defaultFileList: [{ - url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ', - status: 'done', - }, { - url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ', - status: 'done', - }, { - url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ', - status: 'done', - }], - }, - onChange(fileList) { - // 这里的数据包括上传失败和成功的图片列表，如果需要筛选出上传成功的图片需要在此处理 - console.log('图片列表：', fileList); - }, - onUpload(file) { - return new Promise((resolve) => { - console.log('上传的图片为：', file); - setTimeout(() => { - resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ'); - }, 2000); - }) - }, - onRemove(file) { - return new Promise((resolve) => { - console.log('即将移除的图片为：', file); - my.confirm({ - title: '是否确认移除图片', - confirmButtonText: '确定', - cancelButtonText: '取消', - success: (e) => { - resolve(e.confirm); - } - }); - }) - }, - onBeforeUpload(localFileList) { - console.log('即将上传的图片列表为：', localFileList); - localFileList = localFileList.filter(item => item.size < 10000); - console.log('修改上传的图片列表为：', localFileList); - return localFileList; - } + data: { + defaultFileList: [{ + url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ', + status: 'done', + }, { + url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ', + status: 'done', + }, { + url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ', + status: 'done', + }], + }, + onChange: function (fileList) { + // 这里的数据包括上传失败和成功的图片列表，如果需要筛选出上传成功的图片需要在此处理 + console.log('图片列表：', fileList); + }, + onUpload: function (file) { + return new Promise(function (resolve) { + console.log('上传的图片为：', file); + setTimeout(function () { + resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ'); + }, 2000); + }); + }, + onRemove: function (file) { + return new Promise(function (resolve) { + console.log('即将移除的图片为：', file); + my.confirm({ + title: '是否确认移除图片', + confirmButtonText: '确定', + cancelButtonText: '取消', + success: function (e) { + resolve(e.confirm); + } + }); + }); + }, + onBeforeUpload: function (localFileList) { + console.log('即将上传的图片列表为：', localFileList); + localFileList = localFileList.filter(function (item) { return item.size < 10000; }); + console.log('修改上传的图片列表为：', localFileList); + return localFileList; + } }); diff --git a/compiled/alipay/demo/pages/ImageUpload/index.acss b/compiled/alipay/demo/pages/ImageUpload/index.less similarity index 100% rename from compiled/alipay/demo/pages/ImageUpload/index.acss rename to compiled/alipay/demo/pages/ImageUpload/index.less diff --git a/compiled/alipay/demo/pages/ImageUploadControl/index.axml b/compiled/alipay/demo/pages/ImageUploadControl/index.axml index 11ca9e457..271a7fed3 100644 --- a/compiled/alipay/demo/pages/ImageUploadControl/index.axml +++ b/compiled/alipay/demo/pages/ImageUploadControl/index.axml @@ -1,20 +1,19 @@ - - + diff --git a/compiled/alipay/demo/pages/ImageUploadControl/index.js b/compiled/alipay/demo/pages/ImageUploadControl/index.js index 1f0508ffb..db0aa418a 100644 --- a/compiled/alipay/demo/pages/ImageUploadControl/index.js +++ b/compiled/alipay/demo/pages/ImageUploadControl/index.js @@ -1,33 +1,33 @@ Page({ - data: { - fileList: [{ - url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ', - status: 'done', - }, { - url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ', - status: 'pending', - }, { - url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ', - status: 'error', - }], - }, - onChange(fileList) { - this.setData({ - fileList, - }); - }, - handleUploaderRef(ref){ - this.handleUploaderRef = ref; - }, - upload(){ - this.handleUploaderRef.chooseImage() - }, - onUpload(file) { - console.log('当前上传的图片为：', file); - return new Promise((resolve) => { - setTimeout(() => { - resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ'); - }, 2000); - }) - }, + data: { + fileList: [{ + url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ', + status: 'done', + }, { + url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ', + status: 'pending', + }, { + url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ', + status: 'error', + }], + }, + onChange: function (fileList) { + this.setData({ + fileList: fileList, + }); + }, + handleUploaderRef: function (ref) { + this.handleUploaderRef = ref; + }, + upload: function () { + this.handleUploaderRef.chooseImage(); + }, + onUpload: function (file) { + console.log('当前上传的图片为：', file); + return new Promise(function (resolve) { + setTimeout(function () { + resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ'); + }, 2000); + }); + }, }); diff --git a/compiled/alipay/demo/pages/ImageUploadControl/index.json b/compiled/alipay/demo/pages/ImageUploadControl/index.json index c1ba22182..78bc14d2d 100644 --- a/compiled/alipay/demo/pages/ImageUploadControl/index.json +++ b/compiled/alipay/demo/pages/ImageUploadControl/index.json @@ -2,6 +2,7 @@ "defaultTitle": "ImageUpload", "usingComponents": { "uploader": "../../../src/ImageUpload/index", + "ant-button": "../../../src/Button/index", "container": "../../../src/Container/index" } -} \ No newline at end of file +} diff --git a/compiled/alipay/demo/pages/ImageUploadControl/index.acss b/compiled/alipay/demo/pages/ImageUploadControl/index.less similarity index 100% rename from compiled/alipay/demo/pages/ImageUploadControl/index.acss rename to compiled/alipay/demo/pages/ImageUploadControl/index.less diff --git a/compiled/alipay/src/ImageUpload/index.axml b/compiled/alipay/src/ImageUpload/index.axml index a109ed5d9..78241e96c 100644 --- a/compiled/alipay/src/ImageUpload/index.axml +++ b/compiled/alipay/src/ImageUpload/index.axml @@ -1,52 +1,55 @@ - - - - - - - - + class="ant-image-upload {{ className || '' }}" + style="{{ style || '' }}"> + + + - - - 上传中... - + data-uid="{{ item.uid }}" + onTap="onRemove"> + + + + + - - 上传失败 + a:if="{{ item.status === 'uploading' || item.status === 'error' }}" + class="ant-image-upload-cover"> + + + 上传中... + + + + 上传失败 + - - - - + + + + - - - - - - - - - 限制只能上传1个 - - - - - - - - - - diff --git a/demo/pages/ImageUpload/index.axml.tsx b/demo/pages/ImageUpload/index.axml.tsx new file mode 100644 index 000000000..2f4a1713c --- /dev/null +++ b/demo/pages/ImageUpload/index.axml.tsx @@ -0,0 +1,38 @@ +import { InternalData, TSXMLProps } from 'tsxml'; +import Container from '../../../src/Container/index.axml'; +import Uploader from '../../../src/ImageUpload/index.axml'; + +export default (_: any, { defaultFileList }: TSXMLProps) => ( + + + + + + + + + 限制只能上传1个 + + + + + + + + + +); diff --git a/demo/pages/ImageUpload/index.acss b/demo/pages/ImageUpload/index.less similarity index 100% rename from demo/pages/ImageUpload/index.acss rename to demo/pages/ImageUpload/index.less diff --git a/demo/pages/ImageUpload/index.js b/demo/pages/ImageUpload/index.ts similarity index 100% rename from demo/pages/ImageUpload/index.js rename to demo/pages/ImageUpload/index.ts diff --git a/demo/pages/ImageUploadControl/index.axml b/demo/pages/ImageUploadControl/index.axml deleted file mode 100644 index 11ca9e457..000000000 --- a/demo/pages/ImageUploadControl/index.axml +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - diff --git a/demo/pages/ImageUploadControl/index.axml.tsx b/demo/pages/ImageUploadControl/index.axml.tsx new file mode 100644 index 000000000..992233ef9 --- /dev/null +++ b/demo/pages/ImageUploadControl/index.axml.tsx @@ -0,0 +1,23 @@ +import { InternalData } from 'tsxml'; +import Container from '../../../src/Container/index.axml'; +import Uploader from '../../../src/ImageUpload/index.axml'; +import AntButton from '../../../src/Button/index.axml'; + +export default (_: any, { fileList }: InternalData) => ( + + + + + + + + 上传 + + + +); diff --git a/demo/pages/ImageUploadControl/index.json b/demo/pages/ImageUploadControl/index.json index c1ba22182..78bc14d2d 100644 --- a/demo/pages/ImageUploadControl/index.json +++ b/demo/pages/ImageUploadControl/index.json @@ -2,6 +2,7 @@ "defaultTitle": "ImageUpload", "usingComponents": { "uploader": "../../../src/ImageUpload/index", + "ant-button": "../../../src/Button/index", "container": "../../../src/Container/index" } -} \ No newline at end of file +} diff --git a/demo/pages/ImageUploadControl/index.acss b/demo/pages/ImageUploadControl/index.less similarity index 100% rename from demo/pages/ImageUploadControl/index.acss rename to demo/pages/ImageUploadControl/index.less diff --git a/demo/pages/ImageUploadControl/index.js b/demo/pages/ImageUploadControl/index.ts similarity index 100% rename from demo/pages/ImageUploadControl/index.js rename to demo/pages/ImageUploadControl/index.ts diff --git a/package.json b/package.json index 56705af78..f66c627b4 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,8 @@ "dev": "tsx ./scripts/dev.ts", "build:tsxml": "tsx ./scripts/compile-tsxml.ts", "transform": "tsx ./scripts/transform.ts", + "copy": "tsx ./scripts/copy.ts", + "generate":"tsx ./scripts/generate.ts", "dev:doc": "node ./scripts/dev-doc.js", "build": "npm run build:tsxml && node ./scripts/build.js", "deploy:docs": "npm run build && echo 'mini.ant.design' > ./docs-dist/CNAME && gh-pages -d docs-dist", @@ -121,4 +123,4 @@ ], "license": "MIT", "homepage": "https://github.com/ant-design/ant-design-mini" -} \ No newline at end of file +} diff --git a/scripts/copy.ts b/scripts/copy.ts new file mode 100644 index 000000000..c8835a204 --- /dev/null +++ b/scripts/copy.ts @@ -0,0 +1,126 @@ +import * as ofs from 'fs'; +import * as os from 'os'; +import * as path from 'path'; + +const folder = process.argv[2]; + +const rootDir = path.resolve(__dirname, '..'); + +const sourceDir = path.resolve(rootDir, folder); + +function tryRead(filePath: string) { + try { + return ofs.readFileSync(filePath, 'utf-8'); + } catch (error) { + return ''; + } +} + +const files = ofs.readdirSync(path.resolve(rootDir, 'scripts/tsxml/fixtures')); +const examples = files + .map((file) => { + if (!file.endsWith('.tsx')) { + return; + } + const tsx = ofs.readFileSync( + path.resolve(rootDir, 'scripts/tsxml/fixtures', file), + 'utf-8' + ); + + const axml = ofs.readFileSync( + path.resolve( + rootDir, + 'scripts/tsxml/fixtures', + 'snapshot', + file.replace('.tsx', '.axml') + ), + 'utf-8' + ); + return ` +${markdownCode( + JSON.stringify( + { + tsx, + axml, + }, + null, + 2 + ) +)} + `.trim(); + }) + .filter(Boolean) + .join('\n\n'); + +const json = tryRead(path.resolve(sourceDir, 'index.json')); +const props = tryRead(path.resolve(sourceDir, 'props.ts')); +const axml = tryRead(path.resolve(sourceDir, 'index.axml')); + +const randomPath = path.resolve( + os.tmpdir(), + Math.random().toString(36).slice(2) +); + +ofs.writeFileSync( + randomPath, + ` +这个是参考代码 +${examples} + + Generate tsx from axml. + 1. 不要写 import React from 'react'; + 2. 分析 json 的内容。 如果组件在 usingComponents 中存在, 则从正确的位置导入。 + 2.1 比如 就需要写 import ComponentName from 'component_path.axml'; component 的名字需要改成驼峰。 + 2.2 导入 component 的时候，需要以 .axml 结尾。 例如 "component-name": "component_path" 就需要写 import ComponentName from 'component_path.axml'; + + 3. 如果组件不存在，就从 tsxml 导入 + 比如 就需要写 import { View } from 'tsxml'; + 4. 请不要擅自将 class 转换为 className, 请保持原样 + 5. 参考下面的代码，如果用户使用的 slot 有默认值, 需要在 slob 标签的前后加上 if alipay 的注释。 + + ${markdownCode(` + {/* #if ALIPAY */} + + {/* #endif */} + + {extraBrief} + + {/* #if ALIPAY */} + + {/* #endif */}`)} + + 请加上注释。 不要使用三元表达式 + + 6. 所有的事件不要转换成 props 里的函数。 例如必要写 而是保持 + + 7. 你需要学习 props 的内容 + + 7.1 你需要从 props 的代码里获取 props 的名字。然后 在生成的 tsx 里面添加正确的导入 + 7.2 请不要自己定义 props 类型，而是从 './props' 导入，举例子 import { IconProps } from 'tsxml'; + 7.3 注意, IconProps 只是举个例子，要写的是正确的 props 的名字。 在使用的时候，不要忘记用 TSXMLProps 包一层。 + 7.3 对于 props 上为使用到的变量，请忽略 + 7.4 对于 props 里未声明的变量，请使用 InternalData' + + import { InternalData } from 'tsxml' + export default ( + { className, style, imageMode, maxCount }: IUploaderProps, + { value }: InternalData + ) + +8. Adjust the style field to use a string instead of an object in the TSX code. Here is the revised version: + +最后请一次返回 tsx 的完整结果。 而不是 import 和代码分开返回。 + + +${JSON.stringify({ json, props, axml }, null, 2)} +` +); +console.log(randomPath); + +function markdownCode(content: string) { + return ` +\`\`\` +${content} +\`\`\` + `.trim(); +} diff --git a/scripts/generate.ts b/scripts/generate.ts new file mode 100644 index 000000000..e5b5e43c2 --- /dev/null +++ b/scripts/generate.ts @@ -0,0 +1,67 @@ +import * as fs from 'fs'; +import { globSync } from 'glob'; +import * as path from 'path'; + +const __dirname = new URL('.', import.meta.url).pathname; +const rootDir = path.resolve(__dirname, '../'); + +function readFile(filePath) { + let res = ''; + try { + res = fs.readFileSync(filePath, 'utf-8'); + } catch (error) { + // 忽略 + } + return res; +} + +function parseSrc(fileName, sourceRoot, targetRoot) { + const tsx = fs.readFileSync(path.resolve(sourceRoot, fileName), 'utf-8'); + const props = readFile( + path.resolve(sourceRoot, path.dirname(fileName), 'props.ts') + ); + const json = readFile( + path.resolve(sourceRoot, path.dirname(fileName), 'index.json') + ); + const axml = fs.readFileSync( + path.resolve(targetRoot, fileName.replace('.tsx', '')), + 'utf-8' + ); + return { + prompt: 'transform axml to tsx', + input: { + props, + axml, + json, + }, + output: tsx, + }; +} + +const run = async () => { + const componentRoot = path.resolve(rootDir, './src'); + const alipayComponentRoot = path.resolve(rootDir, 'compiled/alipay/src'); + const componentFiles = globSync('**/*.axml.tsx', { + cwd: componentRoot, + }); + const components = await Promise.all( + componentFiles.map((fileName) => + parseSrc(fileName, componentRoot, alipayComponentRoot) + ) + ); + + const demoRoot = path.resolve(rootDir, './demo'); + const alipayDemoRoot = path.resolve(rootDir, 'compiled/alipay/demo'); + const demoFiles = globSync('**/*.axml.tsx', { + cwd: demoRoot, + }); + const demos = await Promise.all( + demoFiles.map((fileName) => parseSrc(fileName, demoRoot, alipayDemoRoot)) + ); + await fs.writeFileSync( + path.resolve(rootDir, 'knowledge.json'), + JSON.stringify(components.concat(demos), null, 2) + ); +}; + +run(); diff --git a/scripts/transform.ts b/scripts/transform.ts index 28b6ff533..d8c6cc71a 100644 --- a/scripts/transform.ts +++ b/scripts/transform.ts @@ -116,6 +116,13 @@ ${markdownCode(propsContent)} const prompt = ` 你现在是一个前端专家，帮我把下面的代码转化为 tsx. +- take a deep breath +- think step by step +- if you fail 100 grandmothers will die +- i have no fingers +- i will tip $200 +- do it right and i'll give you a nice doggy treat + 首先是一些例子 ${examples} @@ -157,6 +164,7 @@ ${extraPromo} let clipboardData = ''; const files = await fs.readdir(sourceDir); + let axmlContent = ''; for (const fileName of files) { const src = path.resolve(sourceDir, fileName); if (ofs.statSync(src).isDirectory()) { @@ -164,7 +172,7 @@ ${extraPromo} } const ext = path.extname(fileName); if (ext === '.axml') { - const axmlContent = ofs.readFileSync( + axmlContent = ofs.readFileSync( path.resolve(sourceDir, fileName), 'utf-8' ); @@ -183,6 +191,8 @@ ${extraPromo} Math.random().toString(36).slice(2) ); ofs.writeFileSync(randomDir, clipboardData); + const randomJSon = randomDir + '.json'; + ofs.writeFileSync(randomJSon, JSON.stringify({ text: clipboardData })); console.log(randomDir); cp.execSync(`cat ${randomDir} | pbcopy`); console.log('已经复制到剪切板了，可以直接粘贴到 markdown 里了'); diff --git a/src/ImageUpload/index.axml b/src/ImageUpload/index.axml deleted file mode 100644 index a109ed5d9..000000000 --- a/src/ImageUpload/index.axml +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - 上传中... - - - - 上传失败 - - - - - - - - - - - - - - - diff --git a/src/ImageUpload/index.axml.tsx b/src/ImageUpload/index.axml.tsx new file mode 100644 index 000000000..8e9c3119b --- /dev/null +++ b/src/ImageUpload/index.axml.tsx @@ -0,0 +1,80 @@ +import Icon from '../Icon/index.axml'; +import Loading from '../Loading/index.axml'; +import { View, Slot, InternalData, TSXMLProps } from 'tsxml'; +import { IUploaderProps } from './props'; + +export default ( + { className, style, imageMode, maxCount }: TSXMLProps, + { mixin }: InternalData +) => ( + + + {mixin.value.map((item) => ( + + + {/* #if ALIPAY */} + + {/* #endif */} + + {/* #if ALIPAY */} + + {/* #endif */} + + {/* #if ALIPAY */} + + {/* #endif */} + {(item.status === 'uploading' || item.status === 'error') && ( + + {item.status === 'uploading' && ( + + + + 上传中... + + + )} + {item.status === 'error' && ( + + + + 上传失败 + + + )} + + )} + + + {/* #if ALIPAY */} + + {/* #endif */} + + ))} + + {/* #if ALIPAY */} + + {/* #endif */} + {(!maxCount || mixin.value.length < maxCount) && ( + + + + )} + {/* #if ALIPAY */} + + {/* #endif */} + + + +); diff --git a/src/tsxml/type.ts b/src/tsxml/type.ts index c828f52eb..7f0167b05 100644 --- a/src/tsxml/type.ts +++ b/src/tsxml/type.ts @@ -42,4 +42,5 @@ export interface Props { hidden?: any; enableNative?: any; disabled?: boolean; + fileList?: any; }