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

chenxi-20 · web-flow · commit e4a6369c185b · 2024-10-11T17:20:27.000+08:00
* refactor(milestone): 重构milestone主题

* refactor(milestone): 修复新规范主题下的测试用例报错
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts b/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts
@@ -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 状态']
@@ -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/)
@@ -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')
diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot.spec.ts b/examples/sites/demos/pc/app/milestone/custom-icon-slot.spec.ts
@@ -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')
   }
 })
diff --git a/examples/sites/demos/pc/app/milestone/flag-before.spec.ts b/examples/sites/demos/pc/app/milestone/flag-before.spec.ts
@@ -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()
@@ -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')
@@ -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')
diff --git a/examples/sites/demos/pc/app/milestone/show-number.spec.ts b/examples/sites/demos/pc/app/milestone/show-number.spec.ts
@@ -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 = [
@@ -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/)
@@ -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))
     }
@@ -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('')
     }
diff --git a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
@@ -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 = [
@@ -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/)
@@ -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))
     }
@@ -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)')
   }
 })
diff --git a/packages/theme/src/milestone/aurora-theme.js b/packages/theme/src/milestone/aurora-theme.js
@@ -1,3 +1,3 @@
 export const tinyMilestoneAuroraTheme = {
-  'ti-milestone-icon-color': '#1890ff'
+  'tv-Milestone-icon-color': '#1890ff'
 }
diff --git a/packages/theme/src/milestone/index.less b/packages/theme/src/milestone/index.less
diff --git a/packages/theme/src/milestone/old-theme.js b/packages/theme/src/milestone/old-theme.js
diff --git a/packages/theme/src/milestone/vars.less b/packages/theme/src/milestone/vars.less

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,6 @@ test('自定义节点图标', async ({ page }) => {`
`10`	`10`	`await expect(nodeIcons).toHaveCount(nodeCount)`
`11`	`11`	`for (let i = 0; i < nodeCount; i++) {`
`12`	`12`	`await expect(nodeIcons.nth(i).locator('svg')).toHaveClass(/custom/)`
`13`		`- await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')`
	`13`	`+ await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px')`
`14`	`14`	`}`
`15`	`15`	`})`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`export const tinyMilestoneAuroraTheme = {`
`2`		`- 'ti-milestone-icon-color': '#1890ff'`
	`2`	`+ 'tv-Milestone-icon-color': '#1890ff'`
`3`	`3`	`}`