fix(milestone): [milestone] repair component sample document (#2463)

* fix(milestones): [milestone] 修复组件示例文档

* fix(milestones): [milestone] 修复测试用例

Author: chenxi-20

examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue

@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #top="data">
-        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+        <span class="status f18 ml50 mb8">{{ data.slotScope.status }}</span>
       </template>
       <template #bottom="data">
         <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
@@ -19,7 +19,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',
@@ -55,4 +55,7 @@ const milestoneData = ref([
 .demo-milestone ::v-deep .tiny-milestone__description-status {
   margin-top: 4px;
 }
+.status {
+  display: inline-block;
+}
 </style>

examples/sites/demos/pc/app/milestone/custom-bottom-top.vue

@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #top="data">
-        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+        <span class="status f18 ml50 mb8">{{ data.slotScope.status }}</span>
       </template>
       <template #bottom="data">
         <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
@@ -24,7 +24,7 @@ export default {
       normalActive: 2,
       advancedActive: 2,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',
@@ -63,4 +63,7 @@ export default {
 .demo-milestone ::v-deep .tiny-milestone__description-status {
   margin-top: 4px;
 }
+.status {
+  display: inline-block;
+}
 </style>

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

@@ -16,7 +16,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',

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

@@ -21,7 +21,7 @@ export default {
       normalActive: 2,
       advancedActive: 2,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',

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

@@ -20,7 +20,7 @@ import { ref } from 'vue'
 import { TinyMilestone } from '@opentiny/vue'
 
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',

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

@@ -25,7 +25,7 @@ export default {
   data() {
     return {
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',

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

@@ -13,11 +13,11 @@ import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const isBefore = ref(false)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
-  doing: '#7ED321',
-  back: '#f5222d',
-  end: '#faad14',
-  cancel: '#d9d9d9'
+  completed: 'var(--tv-color-bg-disabled-control-active)', // 组件库基础变量
+  doing: '#9edb58',
+  back: '#c2c2c2',
+  end: '#edf7df',
+  cancel: '#f23030'
 })
 const milestoneData = ref([
   {

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)', 'rgba(0, 0, 0, 0)']
-  const flagBeforeLineColors = ['rgba(0, 0, 0, 0)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)']
+  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)']
 
   for (let i = 0; i < flagCount; i++) {
     const { x, y, width, height } = await flags.nth(i).boundingBox()

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

@@ -19,11 +19,11 @@ export default {
     return {
       isBefore: false,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
-        doing: '#7ED321',
-        back: '#f5222d',
-        end: '#faad14',
-        cancel: '#d9d9d9'
+        completed: 'var(--tv-color-bg-disabled-control-active)', // 组件库基础变量
+        doing: '#9edb58',
+        back: '#c2c2c2',
+        end: '#edf7df',
+        cancel: '#f23030'
       },
       milestoneData: [
         {

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

@@ -17,7 +17,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',