Skip to content

Commit 87f4d43

Browse files
chenxi-20chenxi-20
authored
feat(fileupload): [file-upload] Fixed the issue of new specification review of the upload component. (#1952)
* feat(fileupload): [file-upload] 修复上传组件新规范检视问题 * feat(fileupload): [file-upload] 修复上传组件新规范检视 pictrue-card问题 * feat(fileupload): [file-upload] 修复测试用例报错
1 parent 61c012c commit 87f4d43

File tree

9 files changed

+123
-34
lines changed

9 files changed

+123
-34
lines changed

‎examples/sites/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<template>
2-
<tiny-file-upload ref="uploadRef" :action="action" accept=".jpg,.png" re-uploadable :re-upload-tip="reUploadTip">
2+
<tiny-file-upload
3+
ref="uploadRef"
4+
:action="action"
5+
accept=".jpg,.png"
6+
re-uploadable
7+
:file-list="fileList"
8+
:re-upload-tip="reUploadTip"
9+
>
310
<template #trigger>
4-
<tiny-button type="primary">选取文件</tiny-button>
11+
<tiny-button>选取文件</tiny-button>
512
</template>
613
<template #tip>
714
<div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
@@ -15,4 +22,22 @@ import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vu
1522
1623
const action = ref('http://localhost:3000/api/upload')
1724
const reUploadTip = (count) => `我是自定义重新上传的左侧提示，${count}个文件变红啦！`
25+
const fileList = ref([
26+
{
27+
name: 'test1',
28+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
29+
status: 'success'
30+
},
31+
{
32+
name: '上传中',
33+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
34+
status: 'uploading',
35+
percentage: 50
36+
},
37+
{
38+
name: 'test2',
39+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/book.jpg`,
40+
status: 'fail'
41+
}
42+
])
1843
</script>

‎examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<template>
2-
<tiny-file-upload ref="upload" :action="action" accept=".jpg,.png" re-uploadable :re-upload-tip="reUploadTip">
2+
<tiny-file-upload
3+
ref="upload"
4+
:action="action"
5+
accept=".jpg,.png"
6+
re-uploadable
7+
:file-list="fileList"
8+
:re-upload-tip="reUploadTip"
9+
>
310
<template #trigger>
4-
<tiny-button type="primary">选取文件</tiny-button>
11+
<tiny-button>选取文件</tiny-button>
512
</template>
613
<template #tip>
714
<div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
@@ -20,7 +27,25 @@ export default {
2027
data() {
2128
return {
2229
action: 'http://localhost:3000/api/upload',
23-
reUploadTip: (count) => `我是自定义重新上传的左侧提示，${count}个文件变红啦！`
30+
reUploadTip: (count) => `我是自定义重新上传的左侧提示，${count}个文件变红啦！`,
31+
fileList: [
32+
{
33+
name: 'test1',
34+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
35+
status: 'success'
36+
},
37+
{
38+
name: '上传中',
39+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
40+
status: 'uploading',
41+
percentage: 50
42+
},
43+
{
44+
name: 'test2',
45+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/book.jpg`,
46+
status: 'fail'
47+
}
48+
]
2449
}
2550
}
2651
}

‎examples/sites/demos/pc/app/file-upload/picture-card-composition-api.vue

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
:file-list="fileList"
88
@preview="previewPicture"
99
>
10-
<tiny-icon-plus class="tiny-svg-size" />
10+
<tiny-icon-add-picture class="tiny-svg-size" />
1111
</tiny-file-upload>
1212
<tiny-dialog-box v-model:visible="dialogVisible1" width="50%">
1313
<img style="width: 100%" :src="dialogImageUrl1" alt="Preview Image" />
@@ -18,19 +18,36 @@
1818
<script setup>
1919
import { ref } from 'vue'
2020
import { FileUpload as TinyFileUpload, DialogBox as TinyDialogBox } from '@opentiny/vue'
21-
import { iconPlus } from '@opentiny/vue-icon'
21+
import { iconAddPicture } from '@opentiny/vue-icon'
2222
2323
const action = ref('http://localhost:3000/api/upload')
2424
const dialogVisible1 = ref(false)
2525
const dialogImageUrl1 = ref('')
2626
const fileList = ref([
2727
{
2828
name: 'fruit',
29-
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
29+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
30+
status: 'ready'
31+
},
32+
{
33+
name: 'fruit',
34+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
35+
status: 'uploading',
36+
percentage: 50
37+
},
38+
{
39+
name: 'fruit',
40+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
41+
status: 'success'
42+
},
43+
{
44+
name: 'fruit',
45+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
46+
status: 'fail'
3047
}
3148
])
3249
33-
const TinyIconPlus = iconPlus()
50+
const TinyIconAddPicture = iconAddPicture()
3451
3552
function previewPicture(file) {
3653
dialogImageUrl1.value = file.url

‎examples/sites/demos/pc/app/file-upload/picture-card.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ test('照片墙', async ({ page }) => {
2626

2727
await expect(width).toEqual(148)
2828
await expect(height).toEqual(148)
29-
await expect(li).toHaveCount(1)
29+
await expect(li).toHaveCount(4)
3030
await fileChooser.setFiles(currentPath)
3131
await first.hover()
3232
await prevPic.click()

‎examples/sites/demos/pc/app/file-upload/picture-card.vue

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
:file-list="fileList"
88
@preview="previewPicture"
99
>
10-
<icon-plus class="tiny-svg-size" />
10+
<tiny-icon-add-picture class="tiny-svg-size" />
1111
</tiny-file-upload>
1212
<tiny-dialog-box v-model:visible="dialogVisible1" width="50%">
1313
<img style="width: 100%" :src="dialogImageUrl1" alt="Preview Image" />
@@ -17,23 +17,41 @@
1717

1818
<script>
1919
import { FileUpload, DialogBox } from '@opentiny/vue'
20-
import { IconPlus } from '@opentiny/vue-icon'
20+
import { iconAddPicture } from '@opentiny/vue-icon'
2121
2222
export default {
2323
components: {
2424
TinyFileUpload: FileUpload,
2525
TinyDialogBox: DialogBox,
26-
IconPlus: IconPlus()
26+
TinyIconAddPicture: iconAddPicture()
2727
},
2828
data() {
29+
console.log('--ti-upload-list-picture-card-success-border-weight'.length)
2930
return {
3031
action: 'http://localhost:3000/api/upload',
3132
dialogVisible1: false,
3233
dialogImageUrl1: '',
3334
fileList: [
3435
{
3536
name: 'fruit',
36-
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
37+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
38+
status: 'ready'
39+
},
40+
{
41+
name: 'fruit',
42+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
43+
status: 'uploading',
44+
percentage: 50
45+
},
46+
{
47+
name: 'fruit',
48+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
49+
status: 'success'
50+
},
51+
{
52+
name: 'fruit',
53+
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
54+
status: 'fail'
3755
}
3856
]
3957
}

‎packages/theme/src/upload-list/index.less

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
// 提高优先级覆盖ul.li样式
4747
&--text {
4848
li:first-of-type > .@{upload-list-prefix-cls}__item {
49-
margin-top: calc(var(--ti-upload-list-item-margin-top) + 3px);
49+
margin-top: calc(var(--ti-upload-list-item-margin-top) + 4px);
5050
}
5151

5252
li:not(:first-of-type) > .@{upload-list-prefix-cls}__item {
@@ -60,8 +60,7 @@
6060
li + li {
6161
.@{upload-list-prefix-cls}__item.is-uploading,
6262
.@{upload-list-prefix-cls}__item.is-downloading {
63-
margin-top: 18px;
64-
margin-bottom: 18px;
63+
margin-bottom: 14px;
6564
}
6665
}
6766
}
@@ -388,6 +387,10 @@
388387
margin: 0 var(--ti-upload-list-picture-card-item-margin-right) 8px 0;
389388
display: inline-block;
390389

390+
&.is-success {
391+
border-width: var(--ti-upload-list-picture-success-border-weight);
392+
}
393+
391394
&.is-fail {
392395
border-color: var(--ti-upload-list-item-fail-text-color);
393396
background-color: #fce3e1;

‎packages/theme/src/upload-list/smb-theme.js

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
export const tinyUploadListSmbTheme = {
2-
'ti-upload-list-picture-card-width': '100px',
3-
'ti-upload-list-picture-card-height': '100px',
4-
'ti-upload-list-picture-card-progress-size': '68px',
5-
'ti-upload-list-picture-card-item-icon-color': '#FFFFFF',
6-
'ti-upload-list-item-progress-top': '26px',
7-
'ti-upload-list-item-line-height': '22px',
2+
'ti-upload-list-picture-card-width': 'var(--ti-common-size-25x)',
3+
'ti-upload-list-picture-card-height': 'var(--ti-common-size-25x)',
4+
'ti-upload-list-picture-card-progress-size': 'var(--ti-common-size-17x)',
5+
'ti-upload-list-picture-card-item-icon-color': 'var(--ti-common-color-light)',
6+
'ti-upload-list-item-line-height': 'var(--ti-common-line-height-1)',
87
'ti-upload-list-item-margin-top': 'var(--ti-common-space-2x)',
98
'ti-upload-list-picture-card-item-margin-right': 'var(--ti-common-space-4x)',
10-
'ti-upload-list-item-border-radius': 'var(--ti-common-border-radius-1)',
9+
'ti-upload-list-item-border-radius': 'var(--ti-common-border-radius-4)',
1110
'ti-upload-picture-card-border-radius': 'var(--ti-common-border-radius-4)',
12-
'ti-upload-list-item-hover-background-color': 'rgba(0, 0, 0, 0.05)',
13-
'ti-upload-list-svg-icon-font-size': '16px',
14-
'ti-upload-list-svg-refresh-position-right': '35px',
15-
'ti-upload-list-svg-close-position-right': '9px',
16-
'ti-upload-list-picture-card-item-hover-bg-color': 'rgba(0, 0, 0, 0.4)'
11+
'ti-upload-list-item-hover-background-color': 'var(--ti-common-bg-color-disabled-transparent-5)',
12+
'ti-upload-list-svg-icon-font-size': 'var(--ti-common-font-size-2)',
13+
'ti-upload-list-svg-refresh-position-right': 'var(--ti-common-space-8x)',
14+
'ti-upload-list-picture-card-item-hover-bg-color': 'var(--ti-common-bg-color-hover-40)',
15+
'ti-upload-list-picture-success-border-weight': '0'
1716
}

‎packages/theme/src/upload-list/vars.less

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
--ti-upload-list-successful-icon-font-size: var(--ti-common-font-size-1, 14px);
3636
// 照片墙上传列表项边框色
3737
--ti-upload-list-picture-card-item-border-color: var(--ti-common-color-border, #adb0b8);
38+
// 照片墙上传成功列表项边框厚度
39+
--ti-upload-list-picture-success-border-weight: var(--ti-common-border-weight-normal, 1px);
3840
// 照片墙上传列表项背景色
3941
--ti-upload-list-picture-card-item-bg-color: var(--ti-common-color-light, #fff);
4042
// 照片墙上传列表项右上角图标填充色
@@ -52,7 +54,7 @@
5254
// 照片墙上传列表项右外边距(new)
5355
--ti-upload-list-picture-card-item-margin-right: 8px;
5456
// 非picturecard模式上传列表进度条上外边距(hide)
55-
--ti-upload-list-item-progress-top: 22px;
57+
--ti-upload-list-item-progress-top: calc(var(--ti-common-line-height-2) + 2px);
5658
// 非picturecard模式上传文件列表文本行高(new)
5759
--ti-upload-list-item-line-height: 1.8;
5860
// 非picturecard模式上传文件列表文本上外边距(new)
@@ -62,7 +64,7 @@
6264
// 上传文件列表项刷新图标右边距(hide)
6365
--ti-upload-list-svg-refresh-position-right: 28px;
6466
// 上传文件列表项删除图标右边距(hide)
65-
--ti-upload-list-svg-close-position-right: 8px;
67+
--ti-upload-list-svg-close-position-right: var(--ti-common-space-2x);
6668
// 照片墙上传列表项悬浮背景色(new)
6769
--ti-upload-list-picture-card-item-hover-bg-color: rgba(0, 0, 0, 0.5);
6870
}

‎packages/vue/src/upload-list/src/pc.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@
209209
:title="t('ui.fileUpload.reUploadFile')"
210210
@click="$emit('reUpload', file)"
211211
>
212-
<icon-refres class="tiny-svg-size icon-refres" :fill="isEdm ? '#f5222d' : ''"></icon-refres>
212+
<icon-refresh class="tiny-svg-size icon-refres" :fill="isEdm ? '#f5222d' : ''"></icon-refresh>
213213
</span>
214214
<span
215215
v-if="!disabled && listOption.showDel"
@@ -330,7 +330,7 @@ import {
330330
iconFileCloudupload,
331331
iconDownload,
332332
iconCueL,
333-
iconRefres,
333+
iconRefresh,
334334
iconOperationfaild,
335335
iconFullscreenLeft,
336336
iconRight,
@@ -369,7 +369,7 @@ export default defineComponent({
369369
IconFileCloudupload: iconFileCloudupload(),
370370
IconDownload: iconDownload(),
371371
IconCueL: iconCueL(),
372-
IconRefres: iconRefres(),
372+
IconRefresh: iconRefresh(),
373373
IconOperationfaild: iconOperationfaild(),
374374
IconFullscreenLeft: iconFullscreenLeft(),
375375
IconRight: iconRight(),

0 commit comments

Comments
 (0)