opentiny
/
tiny-vue
2
0
Fork 29
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

feat(pop-upload): 刷新popupload规范，表格头部优化，增加上传数据统计能力,修复长度限制bug (#1852)

This commit is contained in:
chenxi-20 2024-08-07 14:52:26 +08:00 committed by GitHub
parent cdf28c399a
commit 0a693e7b56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 97 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/sites/demos/apis/pop-upload.js
View File

@ -297,6 +297,9 @@ export default {
'zh-CN': '自定义上传提示内容',
'en-US': 'Customize upload prompt content'
},
metaData: {
new: '3.18.0'
},
mode: ['pc'],
pcDemo: 'upload-tip'
}

34
packages/theme/src/pop-upload/index.less
View File

@ -29,7 +29,6 @@
font-size: var(--ti-popupload-font-size);
&__dialog {
max-height: 512px;
width: 100%;
display: flex;
flex-direction: column;
@ -74,12 +73,20 @@
margin-top: var(--ti-popupload-dialog-margin-top);
.header-col {
border-right: 1px solid var(--ti-popupload-dialog-table-border-color);
position: relative;
padding: var(--ti-popupload-table-header-col-padding-vertical)
var(--ti-popupload-table-header-col-padding-horizontal);
&:last-child {
border-right: none;
&:not(:last-child)::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
display: inline-block;
content: '';
width: 1px;
height: var(--ti-popupload-dialog-table-line-height);
background-color: var(--ti-popupload-dialog-table-line-bg-color);
}
}
@ -127,6 +134,14 @@
&__dialog-table-list {
list-style: none;
&-footer {
margin-top: 12px;
& > .footer-error-tip {
color: var(--ti-popupload-status-fail-icon-color);
}
}
}
&__dialog-table-item {
@ -134,6 +149,7 @@
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--ti-popupload-table-item-border-color);
&:nth-child(even) {
background: var(--ti-popupload-table-item-even-bg-color);
@ -146,8 +162,14 @@
}
}
&__modal .@{popupload__modal-prefix-cls}__body {
overflow-y: auto;
&__modal {
& .@{popupload__modal-prefix-cls}__body {
overflow-y: auto;
}
.tiny-file-upload .tiny-upload-list__text-title {
display: none;
}
}
// 新规范适配

8
packages/theme/src/pop-upload/smb-theme.js
View File

@ -1 +1,7 @@
export const tinyPopUploadSmbTheme = {}
export const tinyPopUploadSmbTheme = {
'ti-popupload-dialog-table-border-color': 'var(--ti-common-color-transparent)',
'ti-popupload-dialog-table-line-bg-color': 'var(--ti-common-bg-color-transparent-15)',
'ti-popupload-dialog-table-line-height': 'var(--ti-common-size-4x)',
'ti-popupload-table-item-even-bg-color': 'var(--ti-common-color-bg-white-normal)',
'ti-popupload-table-item-border-color': 'var(--ti-common-border-color-transparent-8)'
}

8
packages/theme/src/pop-upload/vars.less
View File

@ -21,8 +21,12 @@
--ti-popupload-dialog-table-font-size: var(--ti-common-font-size-1, 14px);
// 弹窗表格顶部外边距
--ti-popupload-dialog-margin-top: var(--ti-common-space-10, 10px);
// 弹窗表格头部分割线颜色
// 弹窗表格头部横向分割线颜色
--ti-popupload-dialog-table-border-color: var(--ti-common-color-line-normal, #adb0b8);
// 弹窗表格头部竖向分割线颜色(new)
--ti-popupload-dialog-table-line-bg-color: var(--ti-common-color-line-normal, #adb0b8);
// 弹窗表格头部竖向分割线高度(new)
--ti-popupload-dialog-table-line-height: var(--ti-common-size-height-normal, 28px);
// 弹窗表格头部高度
--ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small, 32px);
// 弹窗表格头部文本色
@ -47,6 +51,8 @@
--ti-popupload-table-body-col-line-height: var(--ti-common-line-height-4, 20px);
// 弹窗表格内容偶数行背景色
--ti-popupload-table-item-even-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06));
// 弹窗表格每行底部边框色(new)
--ti-popupload-table-item-border-color: var(--ti-common-color-transparent, transparent);
// 弹窗表格底部内边距
--ti-popupload-dialog-table-body-padding-bottom: var(--ti-common-space-10, 10px);
// 弹窗底部内边距

4
packages/theme/src/theme.config.js
View File

@ -49,10 +49,12 @@ export default {
'month-table': 'month-table,year-table,quarter-panel__table',
'nav-menu': 'nav-menu',
'option-group': 'option-group',
'picker-panel': 'picker-panel',
'popup-horiz-menu': 'popup-horiz-menu',
'popup-menu': 'popup-menu',
'popconfirm-popover': 'popconfirm-popover',
'picker-panel': 'picker-panel',
'popupload-dialog': 'popupload__modal',
'popupload-table': 'popupload__modal',
'quick-link-menu': 'quick-link-menu',
'time-picker': 'time-picker',
'time-spinner': 'time-spinner',

2
packages/vue-locale/src/lang/en.ts
View File

@ -526,6 +526,8 @@ export default {
waitUpload: 'Waiting for upload',
operation: 'Operation',
success: 'Upload successful',
listTip: 'There are a total of {0} pieces of data: ',
errorListTip: 'There are {0} errors in them. Please modify them and try again',
limitUploadFileType: 'Upload file type is limited to',
limitUploadFileNumber: 'Limit the number of uploaded files to',
limitUploadFileSize: 'The size of the uploaded file does not exceed',

2
packages/vue-locale/src/lang/zh-CN.ts
View File

@ -526,6 +526,8 @@ export default {
waitUpload: '等待上传',
operation: '操作',
success: '上传成功',
listTip: '共{0}条数据：',
errorListTip: '其中{0}条出错，请修改后重试',
limitUploadFileNumber: '上传文件数限制为',
limitUploadFileType: '上传文件类型限制为',
limitUploadFileSize: '上传文件大小不超过'

82
packages/vue/src/pop-upload/src/pc.vue
View File

@ -22,43 +22,44 @@
<div class="tiny-popupload__dialog">
<div class="tiny-popupload__dialog-header">
<slot name="uploadTip"></slot>
<tiny-alert
size="large"
v-if="
!slots.uploadTip &&
(state.tipsTitle[0] !== undefined || state.tipsTitle[1] !== undefined || state.tipsTitle[2] !== undefined)
"
:title="state.tipsTitleText"
>
<div class="tiny-popupload__dialog-tips">
<p
v-for="(item, index) in state.tipsTitle.filter((value) => value !== undefined)"
:key="index"
class="tiny-popupload__dialog-tips-item"
>
{{ item.count !== undefined ? state.limitCountTips + ':' + item.count : '' }}
{{ item.type !== undefined ? state.limitTypeTips + ':' + item.type : '' }}
{{ item.size !== undefined ? state.limitSizeTips + ':' + item.size : '' }}
</p>
</div>
</tiny-alert>
<tiny-alert type="error" size="large" v-if="state.errorTips.length > 0" @close="closeErrorTips">
<div class="tiny-popupload__dialog-tips">
<p v-for="(item, index) in state.errorTips" :key="index" class="tiny-popupload__dialog-tips-item">
{{ item.size !== undefined ? item.size + ':' + state.errorSizeTips : '' }}
{{ item.type !== undefined ? item.type + ':' + state.errorTypeTips : '' }}
{{ item.num !== undefined ? state.errorNumTips : '' }}
{{ item.error !== undefined ? state.uploadErrorTips : '' }}
</p>
</div>
</tiny-alert>
<tiny-alert type="success" size="large" v-if="state.successTips.length > 0" @close="closeSuccessTips">
<div class="tiny-popupload__dialog-tips">
<p v-for="(item, index) in state.successTips" :key="index" class="tiny-popupload__dialog-tips-item">
{{ item }},{{ state.uploadSuccessTips }}
</p>
</div>
</tiny-alert>
<template v-if="!slots.uploadTip">
<tiny-alert
size="large"
v-if="
state.tipsTitle[0] !== undefined || state.tipsTitle[1] !== undefined || state.tipsTitle[2] !== undefined
"
:title="state.tipsTitleText"
>
<div class="tiny-popupload__dialog-tips">
<p
v-for="(item, index) in state.tipsTitle.filter((value) => value !== undefined)"
:key="index"
class="tiny-popupload__dialog-tips-item"
>
{{ item.count !== undefined ? state.limitCountTips + ':' + item.count : '' }}
{{ item.type !== undefined ? state.limitTypeTips + ':' + item.type : '' }}
{{ item.size !== undefined ? state.limitSizeTips + ':' + item.size : '' }}
</p>
</div>
</tiny-alert>
<tiny-alert type="error" size="large" v-if="state.errorTips.length > 0" @close="closeErrorTips">
<div class="tiny-popupload__dialog-tips">
<p v-for="(item, index) in state.errorTips" :key="index" class="tiny-popupload__dialog-tips-item">
{{ item.size !== undefined ? item.size + ':' + state.errorSizeTips : '' }}
{{ item.type !== undefined ? item.type + ':' + state.errorTypeTips : '' }}
{{ item.num !== undefined ? state.errorNumTips : '' }}
{{ item.error !== undefined ? state.uploadErrorTips : '' }}
</p>
</div>
</tiny-alert>
<tiny-alert type="success" size="large" v-if="state.successTips.length > 0" @close="closeSuccessTips">
<div class="tiny-popupload__dialog-tips">
<p v-for="(item, index) in state.successTips" :key="index" class="tiny-popupload__dialog-tips-item">
{{ item }},{{ state.uploadSuccessTips }}
</p>
</div>
</tiny-alert>
</template>
</div>
<div class="tiny-popupload__dialog-body">
<tiny-file-upload
@ -80,6 +81,7 @@
:headers="state.headers"
:action="state.action"
:auto-upload="false"
:re-uploadable="slots.uploadTip"
>
<template #trigger>
<tiny-button>{{ state.multiple ? state.uploadsButtonText : state.uploadButtonText }}</tiny-button>
@ -128,6 +130,12 @@
</p>
</li>
</ul>
<div v-if="slots.uploadTip" class="tiny-popupload__dialog-table-list-footer">
{{ t('ui.popupload.listTip', [state.uploadList.length])
}}<span v-show="state.errorTips.length > 0" class="footer-error-tip">{{
t('ui.popupload.errorListTip', [state.errorTips.length])
}}</span>
</div>
</div>
</div>
</div>