Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(milestone): [milestone] refactor the milestone theme. #2233

Merged
merged 2 commits into from
Oct 11, 2024
Merged

refactor(milestone): [milestone] refactor the milestone theme. #2233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e8afec
refactor(milestone): 重构milestone主题
chenxi-20 Oct 9, 2024
205a7dd
refactor(milestone): 修复新规范主题下的测试用例报错
chenxi-20 Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions examples/sites/demos/pc/app/milestone/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,33 +25,33 @@ test('基本用法', async ({ page }) => {
const iconStyles = [
{
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(94, 124, 224)',
'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px'
'color': 'rgb(25, 25, 25)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(94, 124, 224)',
'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px'
'color': 'rgb(25, 25, 25)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(158, 197, 145)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(158, 197, 145, 0.4) 0px 0px 0px 4px'
'box-shadow': 'none'
},
{
'background-color': 'rgb(217, 217, 217)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(217, 217, 217, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(217, 217, 217)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(151, 167, 219)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(151, 167, 219, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(151, 167, 219)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(250, 173, 20)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(250, 173, 20, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(250, 173, 20)',
'box-shadow': 'none'
}
]
const titles = ['completed 状态', 'completed 状态', 'doing 状态', 'cancel 状态', 'back 状态', 'end 状态']
Expand All @@ -64,13 +64,13 @@ test('基本用法', async ({ page }) => {
await expect(nodeTitles).toHaveCount(nodeCount)
await expect(nodeDates).toHaveCount(nodeCount)
const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
const nodeWidth = Math.floor(totalWidth / nodeCount)
const nodeWidth = Math.floor(totalWidth / nodeCount / 2)
const nodeHeight = totalHeight - 38
for (let i = 0; i < nodeCount; i++) {
const { width, height } = await nodes.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(nodeWidth)
await expect(height).toEqual(nodeHeight)
await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
await expect(nodeLines.nth(i)).toHaveCSS('height', '1px')
await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
await expect(nodeTitles.nth(i)).toHaveText(titles[i])
await expect(nodeDates.nth(i)).toHaveText(/2018-9/)
Expand All @@ -83,13 +83,13 @@ test('基本用法', async ({ page }) => {
await expect(lineWidth).toBeGreaterThanOrEqual(0)
}
if (i < 2) {
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px')
} else {
await expect(nodeIcons.nth(i)).toHaveText(String(i - 1))
}
if (i < 4) {
await expect(flags.nth(i)).toHaveCSS('width', '58px')
await expect(flags.nth(i)).toHaveCSS('padding', '0px 4px')
await expect(flags.nth(i)).toHaveCSS('width', '96px')
await expect(flags.nth(i)).toHaveCSS('padding', '4px')
await expect(flags.nth(i)).toHaveText(flagContents[i])
await expect(flagLines.nth(i)).toHaveCSS('width', '1px')
await expect(flagLines.nth(i)).toHaveCSS('height', '30px')
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/milestone/custom-icon-slot.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ test('自定义节点图标', async ({ page }) => {
await expect(nodeIcons).toHaveCount(nodeCount)
for (let i = 0; i < nodeCount; i++) {
await expect(nodeIcons.nth(i).locator('svg')).toHaveClass(/custom/)
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px')
}
})
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/milestone/flag-before.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)', 'rgb(94, 124, 224)']
const flagBeforeLineColors = ['rgb(94, 124, 224)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)']
const flagAfterLineColors = ['rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)', 'rgb(25, 25, 25)']
const flagBeforeLineColors = ['rgb(25, 25, 25)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)']

for (let i = 0; i < flagCount; i++) {
const { x, y, width, height } = await flags.nth(i).boundingBox()
Expand All @@ -26,7 +26,7 @@ test('旗子数据来源', async ({ page }) => {

await expect(x).toBeGreaterThanOrEqual(nodeX)
await expect(lineY - lineHeight).toBeGreaterThanOrEqual(y)
await expect(width).toEqual(58)
await expect(width).toEqual(96)
await expect(height).toBeGreaterThanOrEqual(34)
await expect(flags.nth(i)).toHaveText(flagAfterContents[i])
await expect(flagLines.nth(i)).toHaveCSS('width', '1px')
Expand All @@ -48,7 +48,7 @@ test('旗子数据来源', async ({ page }) => {

await expect(x).toBeGreaterThanOrEqual(nodeX, 2)
await expect(lineY - lineHeight).toBeGreaterThanOrEqual(y)
await expect(width).toEqual(58)
await expect(width).toEqual(96)
await expect(height).toBeGreaterThanOrEqual(34)
await expect(flags.nth(i)).toHaveText(flagBeforeContents[i])
await expect(flagLines.nth(i)).toHaveCSS('width', '1px')
Expand Down
36 changes: 18 additions & 18 deletions examples/sites/demos/pc/app/milestone/show-number.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,33 +23,33 @@ test('序号显示', async ({ page }) => {
const iconStyles = [
{
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(94, 124, 224)',
'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px'
'color': 'rgb(25, 25, 25)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(94, 124, 224)',
'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px'
'color': 'rgb(25, 25, 25)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(126, 211, 33)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(126, 211, 33, 0.4) 0px 0px 0px 4px'
'box-shadow': 'none'
},
{
'background-color': 'rgb(217, 217, 217)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(217, 217, 217, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(217, 217, 217)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(245, 34, 45)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(245, 34, 45, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(245, 34, 45)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(250, 173, 20)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(250, 173, 20, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(250, 173, 20)',
'box-shadow': 'none'
}
]
const titles = [
Expand All @@ -67,13 +67,13 @@ test('序号显示', async ({ page }) => {
await expect(nodeTitles).toHaveCount(nodeCount)
await expect(nodeDates).toHaveCount(nodeCount)
const { width: totalWidth } = await milestone.boundingBox()
const nodeWidth = Math.floor(totalWidth / nodeCount)
const nodeWidth = Math.floor(totalWidth / nodeCount / 2)

for (let i = 0; i < nodeCount; i++) {
const { width, height } = await nodes.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(nodeWidth)
await expect(height).toBeGreaterThan(84)
await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
await expect(nodeLines.nth(i)).toHaveCSS('height', '1px')
await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
await expect(nodeTitles.nth(i)).toHaveText(titles[i])
await expect(nodeDates.nth(i)).toHaveText(/2018-9/)
Expand All @@ -86,7 +86,7 @@ test('序号显示', async ({ page }) => {
await expect(lineWidth).toBeGreaterThanOrEqual(0)
}
if (i < 2) {
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px')
} else {
await expect(nodeIcons.nth(i)).toHaveText(String(i + 1))
}
Expand All @@ -100,7 +100,7 @@ test('序号显示', async ({ page }) => {

for (let i = 0; i < nodeCount; i++) {
if (i < 2) {
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px')
} else {
await expect(nodeIcons.nth(i)).toHaveText('')
}
Expand Down
36 changes: 18 additions & 18 deletions examples/sites/demos/pc/app/milestone/solid-style.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,33 +23,33 @@ test('实心显示', async ({ page }) => {
const iconStyles = [
{
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(94, 124, 224)',
'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px'
'color': 'rgb(25, 25, 25)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(94, 124, 224)',
'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px'
'color': 'rgb(25, 25, 25)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(126, 211, 33)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(126, 211, 33, 0.4) 0px 0px 0px 4px'
'box-shadow': 'none'
},
{
'background-color': 'rgb(217, 217, 217)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(217, 217, 217, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(217, 217, 217)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(245, 34, 45)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(245, 34, 45, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(245, 34, 45)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(250, 173, 20)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'rgba(250, 173, 20, 0.4) 0px 0px 0px 4px'
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(250, 173, 20)',
'box-shadow': 'none'
}
]
const titles = [
Expand All @@ -67,12 +67,12 @@ test('实心显示', async ({ page }) => {
await expect(nodeTitles).toHaveCount(nodeCount)
await expect(nodeDates).toHaveCount(nodeCount)
const { width: totalWidth } = await milestone.boundingBox()
const nodeWidth = Math.floor(totalWidth / nodeCount)
const nodeWidth = Math.floor(totalWidth / nodeCount / 2)
for (let i = 0; i < nodeCount; i++) {
const { width, height } = await nodes.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(nodeWidth)
await expect(height).toBeGreaterThan(84)
await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
await expect(nodeLines.nth(i)).toHaveCSS('height', '1px')
await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
await expect(nodeTitles.nth(i)).toHaveText(titles[i])
await expect(nodeDates.nth(i)).toHaveText(/2018-9/)
Expand All @@ -85,7 +85,7 @@ test('实心显示', async ({ page }) => {
await expect(lineWidth).toBeGreaterThanOrEqual(0)
}
if (i < 2) {
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px')
} else {
await expect(nodeIcons.nth(i)).toHaveText(String(i - 1))
}
Expand All @@ -98,6 +98,6 @@ test('实心显示', async ({ page }) => {
await button.click()

for (let i = 0; i < 2; i++) {
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(25, 25, 25)')
chenxi-20 marked this conversation as resolved.
Show resolved Hide resolved
}
})
2 changes: 1 addition & 1 deletion packages/theme/src/milestone/aurora-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export const tinyMilestoneAuroraTheme = {
'ti-milestone-icon-color': '#1890ff'
'tv-Milestone-icon-color': '#1890ff'
}
Loading
Loading