maxjhandsome
/
tiny-vue
forked from opentiny/tiny-vue
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:走查修改以及用例修复 (#3143)

This commit is contained in:
liukun 2025-03-18 21:48:09 +08:00 committed by GitHub
parent 1071d61807
commit 73b6b21931
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
32 changed files with 133 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
View File

@ -19,6 +19,6 @@ const IconMinus = iconMinus()
}
.my-date-picker {
background: #f0f0f0;
background: #a1a1a1;
}
</style>

2
examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
View File

@ -27,6 +27,6 @@ export default {
}
.my-date-picker {
background-color: #f0f0f0;
background-color: #a1a1a1;
}
</style>

10
examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
View File

@ -13,11 +13,11 @@ import { ref } from 'vue'
import { TinyMilestone } from '@opentiny/vue'
const statusMap = ref({
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#f230301A'
completed: '#1890ff',
doing: '#86edff',
back: '#93fda6',
end: '#faad18',
cancel: '#f230305A'
})
const milestoneData = ref([
{

10
examples/sites/demos/pc/app/milestone/custom-flag.vue
View File

@ -18,11 +18,11 @@ export default {
data() {
return {
statusMap: {
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#f230301A'
completed: '#1890ff',
doing: '#86edff',
back: '#93fda6',
end: '#faad18',
cancel: '#f230305A'
},
milestoneData: [
{

10
examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
View File

@ -20,11 +20,11 @@ import { ref } from 'vue'
import { TinyMilestone } from '@opentiny/vue'
const statusMap = ref({
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#f230301A'
completed: '#1890ff',
doing: '#86edff',
back: '#93fda6',
end: '#faad18',
cancel: '#f230305A'
})
const milestoneData = ref([
{

10
examples/sites/demos/pc/app/milestone/data-field-mapping.vue
View File

@ -25,11 +25,11 @@ export default {
data() {
return {
statusMap: {
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#f230301A'
completed: '#1890ff',
doing: '#86edff',
back: '#93fda6',
end: '#faad18',
cancel: '#f230305A'
},
milestoneData: [
{

8
examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
View File

@ -14,10 +14,10 @@ import { TinyMilestone, TinyButton } from '@opentiny/vue'
const isBefore = ref(false)
const statusMap = ref({
completed: 'var(--tv-color-bg-disabled-control-active)', // 组件库基础变量
doing: '#9edb58',
back: '#c2c2c2',
end: '#edf7df',
cancel: '#f23030'
doing: '#86edff',
back: '#93fda6',
end: '#faad18',
cancel: '#f230305A'
})
const milestoneData = ref([
{

4
examples/sites/demos/pc/app/milestone/flag-before.spec.ts
View File

@ -12,8 +12,8 @@ test('旗子数据来源', async ({ page }) => {
const flagAfterContents = [/引导用户按照流程完成任务/, /test7欢迎使用 vui/, /test8/, /test6/]
const flagBeforeContents = [/test1已完成/, /引导用户按照流程完成任务/, /test7欢迎使用 vui/, /test8/]
const button = page.getByRole('button').filter({ hasText: '设置 flag-before 值为 true' })
const flagAfterLineColors = ['rgb(194, 194, 194)', 'rgb(194, 194, 194)', 'rgb(158, 219, 88)', 'rgb(179, 214, 255)']
const flagBeforeLineColors = ['rgb(179, 214, 255)', 'rgb(194, 194, 194)', 'rgb(194, 194, 194)', 'rgb(158, 219, 88)']
const flagAfterLineColors = ['rgb(147, 253, 166)', 'rgb(147, 253, 166)', 'rgb(134, 237, 255)', 'rgb(179, 214, 255)']
const flagBeforeLineColors = ['rgb(179, 214, 255)', 'rgb(147, 253, 166)', 'rgb(147, 253, 166)', 'rgb(134, 237, 255)']
for (let i = 0; i < flagCount; i++) {
const { x, y, width, height } = await flags.nth(i).boundingBox()

8
examples/sites/demos/pc/app/milestone/flag-before.vue
View File

@ -20,10 +20,10 @@ export default {
isBefore: false,
statusMap: {
completed: 'var(--tv-color-bg-disabled-control-active)', // 组件库基础变量
doing: '#9edb58',
back: '#c2c2c2',
end: '#edf7df',
cancel: '#f23030'
doing: '#86edff',
back: '#93fda6',
end: '#faad18',
cancel: '#f230305A'
},
milestoneData: [
{

10
examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
View File

@ -14,11 +14,11 @@ import { ref } from 'vue'
import { TinyMilestone, TinyNotify } from '@opentiny/vue'
const statusMap = ref({
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#f230301A'
completed: '#1890ff',
doing: '#86edff',
back: '#93fda6',
end: '#faad18',
cancel: '#f230305A'
})
const milestoneData = ref([
{

10
examples/sites/demos/pc/app/milestone/milestone-events.vue
View File

@ -19,11 +19,11 @@ export default {
data() {
return {
statusMap: {
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#f230301A'
completed: '#1890ff',
doing: '#86edff',
back: '#93fda6',
end: '#faad18',
cancel: '#f230305A'
},
milestoneData: [
{

10
examples/sites/demos/pc/app/milestone/show-number.spec.ts
View File

@ -22,11 +22,11 @@ test('序号显示', async ({ page }) => {
]
const iconStyles = [
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(179, 214, 255)',
'box-shadow': 'none'
},
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(179, 214, 255)',
'box-shadow': 'none'
},
{
@ -34,15 +34,15 @@ test('序号显示', async ({ page }) => {
'box-shadow': 'none'
},
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(217, 217, 217)',
'box-shadow': 'none'
},
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(245, 34, 45)',
'box-shadow': 'none'
},
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(250, 173, 20)',
'box-shadow': 'none'
}
]

10
examples/sites/demos/pc/app/milestone/solid-style.spec.ts
View File

@ -22,11 +22,11 @@ test('实心显示', async ({ page }) => {
]
const iconStyles = [
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(179, 214, 255)',
'box-shadow': 'none'
},
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(179, 214, 255)',
'box-shadow': 'none'
},
{
@ -34,15 +34,15 @@ test('实心显示', async ({ page }) => {
'box-shadow': 'none'
},
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(217, 217, 217)',
'box-shadow': 'none'
},
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(245, 34, 45)',
'box-shadow': 'none'
},
{
'color': 'rgb(25, 25, 25)',
'color': 'rgb(250, 173, 20)',
'box-shadow': 'none'
}
]

8
examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue
View File

@ -6,9 +6,15 @@
import { TinyMindMap } from '@opentiny/vue'
</script>
<style scoped>
<style lang="less" scoped>
.demo-mind-map-basic {
width: 100%;
height: 400px;
:deep(.map-container) {
.map-canvas {
background-color: var(--tv-color-bg);
}
}
}
</style>

8
examples/sites/demos/pc/app/mind-map/basic-usage.vue
View File

@ -12,9 +12,15 @@ export default {
}
</script>
<style scoped>
<style lang="less" scoped>
.demo-mind-map-basic {
width: 100%;
height: 400px;
:deep(.map-container) {
.map-canvas {
background-color: var(--tv-color-bg);
}
}
}
</style>

8
examples/sites/demos/pc/app/mind-map/event-composition-api.vue
View File

@ -85,9 +85,15 @@ const onExpandNode = () => {
}
</script>
<style scoped>
<style lang="less" scoped>
.demo-mind-map-event {
width: 100%;
height: 400px;
:deep(.map-container) {
.map-canvas {
background-color: var(--tv-color-bg);
}
}
}
</style>

8
examples/sites/demos/pc/app/mind-map/event.vue
View File

@ -98,9 +98,15 @@ export default {
}
</script>
<style scoped>
<style lang="less" scoped>
.demo-mind-map-event {
width: 100%;
height: 400px;
:deep(.map-container) {
.map-canvas {
background-color: var(--tv-color-bg);
}
}
}
</style>

9
examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
View File

@ -97,10 +97,15 @@ const clearData = () => {
}
</script>
<style scoped>
<style lang="less" scoped>
.demo-mind-map-export-date {
width: 100%;
height: 400px;
margin-top: 10px;
:deep(.map-container) {
.map-canvas {
background-color: var(--tv-color-bg);
}
}
}
</style>

9
examples/sites/demos/pc/app/mind-map/export-data.vue
View File

@ -110,10 +110,15 @@ export default {
}
</script>
<style scoped>
<style lang="less" scoped>
.demo-mind-map-date {
width: 100%;
height: 400px;
margin-top: 10px;
:deep(.map-container) {
.map-canvas {
background-color: var(--tv-color-bg);
}
}
}
</style>

2
examples/sites/demos/pc/app/wizard/base-usage.spec.ts
View File

@ -36,7 +36,7 @@ test('基本用法', async ({ page }) => {
await expect(middle).toHaveCSS('background-color', 'rgb(255, 255, 255)')
} else {
await expect(first).toHaveCSS('background-color', 'rgb(219, 219, 219)')
await expect(middle).toHaveCSS('background-color', 'rgb(240, 240, 240)')
await expect(middle).toHaveCSS('background-color', 'rgb(245, 245, 245)')
}
}
})

2
examples/sites/demos/pc/app/wizard/vertical.spec.ts
View File

@ -22,7 +22,7 @@ test('垂直流程图', async ({ page }) => {
if (i === 4) {
await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(240, 240, 240)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(245, 245, 245)')
} else if (i === 3) {
await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(219, 219, 219)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(255, 255, 255)')

4
packages/renderless/src/picker/index.ts
View File

@ -940,10 +940,10 @@ export const handleClose =
}
export const handleFocus =
({ emit, vm, state, api }) =>
({ emit, vm, state, api, props }) =>
() => {
const type = state.type
if (state.pickerDisabled) {
if (props.readonly || state.pickerDisabled) {
return
}

2
packages/renderless/src/picker/vue.ts
View File

@ -190,7 +190,7 @@ const initApi = ({ api, props, hooks, state, vnode, others, utils, parent }) =>
hidePicker: hidePicker({ destroyPopper, state }),
handleSelectChange: ({ tz, date }) => !state.ranged && emit('select-change', { tz, date }),
getPanel: getPanel(others),
handleFocus: handleFocus({ emit, vm, state, api }),
handleFocus: handleFocus({ emit, vm, state, api, props }),
getTimezone: getTimezone({ props, utils }),
emitChange: emitChange({ api, dispatch, emit, props, state }),
parsedValue: parsedValue({ api, props, state, t }),

4
packages/theme/src/date-table/vars.less
View File

@ -69,7 +69,7 @@
// 单元格宽度度
--tv-DateTable-td-div-width: 28px;
// 单元格顶部间距
--tv-DateTable-td-span-top: 3px;
--tv-DateTable-td-span-top: 4px;
// 开始日期圆角
--tv-DateTable-start-date-border-radius: var(--tv-border-radius-brand, 999px);
// 选中日期圆角
@ -80,4 +80,4 @@
--tv-DateTable-td-border-radius-disabled: var(--tv-border-radius-brand, 999px);
// 星期行高
--tv-DateTable-week-height: var(--tv-size-height-md, 32px);
}
}

24
packages/theme/src/steps/index.less
View File

@ -226,7 +226,7 @@
}
&.fault {
.block-status-mixin(var(--tv-Steps-advance-node-error-bg-color), var(--tv-Steps-advance-node-error-bg-color-hover),var(--tv-Steps-advance-node-error-bg-color));
.block-status-mixin(var(--tv-Steps-advance-node-error-bg-color), var(--tv-Steps-advance-node-error-bg-color-hover), var(--tv-Steps-advance-node-error-bg-color));
color: var(--tv-Steps-advance-error-icon-color);
.@{steps-prefix-cls}-text-name {
@ -236,11 +236,11 @@
&.disabled {
cursor: not-allowed;
color: var(--tv-color-icon-inverse-disabled);
color: var(--tv-Steps-advance-node-disable-icon-color);
.block-status-mixin(var(--tv-Steps-advance-node-disable-bg-color), var(--tv-Steps-advance-node-disable-bg-color-hover), var(--tv-Steps-advance-node-disable-bg-color-active));
.@{steps-prefix-cls}-icon {
border: 1px solid var(--tv-color-icon-inverse-disabled);
border: 1px solid var(--tv-Steps-advance-node-disable-icon-color);
}
}
}
@ -266,6 +266,7 @@
height: 16px;
margin-right: 8px;
display: flex;
font-size: 12px;
flex: none;
align-items: center;
justify-content: center;
@ -361,13 +362,13 @@
height: 48px;
&:after {
border-top-width: 24px;
border-bottom-width: 24px;
border-top-width: 23px;
border-bottom-width: 23px;
}
&:before {
border-top-width: 24px;
border-bottom-width: 24px;
border-top-width: 23px;
border-bottom-width: 23px;
}
.@{steps-prefix-cls}-content {
@ -517,7 +518,6 @@
z-index: 10;
border: 1px solid var(--tv-Steps-node-border-color);
border-radius: 50%;
background-color: var(--tv-Steps-node-icon-bg-color);
}
}
}
@ -542,7 +542,6 @@
.@{steps-prefix-cls}-icon {
font-size: 14px;
border-radius: 9999px;
background-color: var(--tv-Steps-node-icon-bg-color);
color: var(--tv-Steps-unselected-icon-color);
&:hover {
@ -769,7 +768,7 @@
}
&.not-vertical {
margin-top: 10px;
margin-top: 8px;
}
}
@ -878,7 +877,6 @@
flex: none;
border-radius: 9999px;
border: 1px solid var(--tv-Steps-line-bg-color);
background-color: var(--tv-Steps-node-icon-bg-color);
font-weight: 500;
position: absolute;
}
@ -1165,13 +1163,13 @@
}
}
&.icon-success {
.timeline-icon-status-mixin( none, var(--tv-Steps-node-done-border-color),var(--tv-Steps-done-icon-color));
.timeline-icon-status-mixin(none, var(--tv-Steps-node-done-border-color), var(--tv-Steps-done-icon-color));
}
&.icon-warning {
.timeline-icon-status-mixin(var(--tv-Steps-warning-icon-bg-color), var(--tv-Steps-warning-icon-bg-color), var(--tv-Steps-warning-icon-color));
}
&.icon-error {
.timeline-icon-status-mixin( none, var(--tv-Steps-error-border-color),var(--tv-Steps-error-icon-color));
.timeline-icon-status-mixin(none, var(--tv-Steps-error-border-color), var(--tv-Steps-error-icon-color));
}
.fixicon,

7
packages/theme/src/steps/vars.less
View File

@ -55,8 +55,8 @@
--tv-Steps-line-bg-color: var(--tv-color-border-divider, #f0f0f0);
// 未完成节点的背景色
--tv-Steps-node-icon-bg-color: var(--tv-color-bg-dark, #ffffff);
// 未完成节点序号图标色
--tv-Steps-unselected-icon-color: var(--tv-color-icon, #808080);
// 未完成节点序号图标文本色
--tv-Steps-unselected-icon-color: var(--tv-color-text-weaken, #808080);
// 未完成节点边框色
--tv-Steps-node-border-color: var(--tv-color-border-divider-short, #dbdbdb);
// 未完成节点内容文本色
@ -108,8 +108,7 @@
// 高级向导异常节点图标色
--tv-Steps-advance-error-icon-color: var(--tv-color-error-icon, #f23030);
// 高级向导禁用节点文本以及图标色
--tv-Steps-advance-node-disable-text-color: var(--tv-color-icon-inverse-disabled, #fff);
--tv-Steps-advance-node-disable-icon-color: var(--tv-color-icon-inverse-disabled, #fff);
--tv-Steps-advance-node-disable-icon-color: var(--tv-color-icon, #808080);
// 高级向导禁用节点背景色
--tv-Steps-advance-node-disable-bg-color: var(--tv-color-bg-disabled-control-unactive, #dbdbdb);
// 高级向导禁用节点悬浮背景色

2
packages/theme/src/tabs/index.less
View File

@ -46,6 +46,7 @@
justify-content: space-between;
.@{tabs-prefix-cls} {
// 活跃块
&__active-bar {
position: absolute;
@ -607,7 +608,6 @@
&:hover {
color: var(--tv-Tabs-button-card-item-hover-text-color);
font-weight: var(--tv-Tabs-button-card-font-weight);
}
&.is-active {

12
packages/theme/src/tabs/vars.less
View File

@ -38,7 +38,7 @@
// card类型(无size属性)标签项高度
--tv-Tabs-height: var(--tv-size-height-xl, 48px);
// card类型未选中项文本色
--tv-Tabs-header-font-normal-text-color: var(--tv-color-text, #191919);
--tv-Tabs-header-font-normal-text-color: var(--tv-color-text-secondary, #595959);
// 分隔符类型未选中项文本色
--tv-Tabs-header-separator-normal-text-color: var(--tv-color-text-secondary, #595959);
// 分隔符高度(new)
@ -84,7 +84,7 @@
// bordercard类型非选中项文本色
--tv-Tabs-dark-text-color: var(--tv-color-text-disabled, #c2c2c2);
// bordercard类型标签项上外边距
--tv-Tabs-dark-margin-top: 5px;
--tv-Tabs-dark-margin-top: 4px;
// bordercard类型首个标签项左外边距
--tv-Tabs-dark-first-margin-left: 20px;
// bordercard类型标签栏边框厚度
@ -150,15 +150,15 @@
// buttoncard类型选项文本色
--tv-Tabs-button-card-item-text-color: var(--tv-color-text-secondary, #595959);
// buttoncard类型选项悬浮文本色
--tv-Tabs-button-card-item-hover-text-color: #191919;
--tv-Tabs-button-card-item-hover-text-color: var(--tv-color-text-hover, #191919);
// buttoncard类型选项字号
--tv-Tabs-button-card-item-font-size: var(--tv-font-size-default, 14px);
// buttoncard类型选项高度
--tv-Tabs-button-card-item-height: var(--tv-size-height-md, 32px);
// buttoncard类型选中项背景色
--tv-Tabs-button-card-item-active-bg-color: var(--tv-color-bg-active-emphasize-1, #ffffff);
--tv-Tabs-button-card-item-active-bg-color: var(--tv-color-bg-inverse-tint-1, #ffffff);
// buttoncard类型选中项文本色
--tv-Tabs-button-card-item-active-text-color: var(--tv-color-act-primary-text, #191919);
--tv-Tabs-button-card-item-active-text-color: var(--tv-color-text, #191919);
// buttoncard类型选中项边框色
--tv-Tabs-button-card-item-active-border-color: var(--tv-color-border-active, #191919);
// buttoncard类型圆角
@ -167,4 +167,4 @@
--tv-Tabs-button-card-title-padding-horizontal: 24px;
// buttoncard类型字重
--tv-Tabs-button-card-font-weight: var(--tv-font-weight-bold, bold);
}
}

5
packages/theme/src/upload-list/index.less
View File

@ -468,6 +468,7 @@
&:hover {
opacity: 1;
background-color: var(--tv-UploadList-picture-card-item-bg-color-hover);
span {
display: inline-block;
@ -635,9 +636,10 @@
margin-right: 8px;
border: 1px solid #dfdfdf;
border-radius: 4px;
background-color: var(--tv-UploadList-bg-color);
&:hover {
background-color: #f5f6f8;
background-color: var(--tv-UploadList-bg-color-hover);
.operate-panel {
visibility: visible;
@ -744,7 +746,6 @@
margin-right: 24px;
font-size: 12px;
line-height: 12px;
color: #191919;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

6
packages/theme/src/upload-list/vars.less
View File

@ -29,6 +29,10 @@
--tv-UploadList-svg-close-icon-color: var(--tv-color-icon);
// 上传文件列表项右侧悬浮图标色
--tv-UploadList-svg-close-hover-icon-color: var(--tv-color-icon-hover);
// 上传文件列表项悬浮背景色
--tv-UploadList-bg-color: var(--tv-color-bg);
// 上传文件列表项悬浮背景色hover
--tv-UploadList-bg-color-hover: var(--tv-color-bg-hover-secondary);
// 上传文件列表项图标尺寸
--tv-UploadList-svg-icon-font-size: var(--tv-icon-size);
// 上传文件列表项成功图标尺寸
@ -37,6 +41,8 @@
--tv-UploadList-picture-card-item-border-color: var(--tv-color-border);
// 照片墙上传列表项背景色
--tv-UploadList-picture-card-item-bg-color: var(--tv-color-bg-secondary);
// 照片墙上传列表项背景色hover
--tv-UploadList-picture-card-item-bg-color-hover: var(--tv-color-bg-mask);
// 照片墙上传列表项右上角图标填充色
--tv-UploadList-picture-card-item-icon-color: var(--tv-color-icon-inverse);
// 上传列表项成功状态图标色或背景色

2
packages/theme/src/upload/index.less
View File

@ -134,7 +134,7 @@
}
.prompt-tip {
fill: #aeaeae;
fill: var(--tv-Upload-tip-text-color);
margin-left: 8px;
line-height: 30px;
}

2
packages/theme/src/wizard/index.less
View File

@ -142,7 +142,7 @@
&__chart-name {
position: relative;
top: -5px;
top: -15px;
transform: translateY(-50%);
margin-left: var(--tv-Wizard-vertical-text-margin-left);
display: inline-flex;