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

feat(milestone): [milestone] The example is modified to adapt to the default theme. #2561

Merged
merged 1 commit into from
Nov 27, 2024
Merged

feat(milestone): [milestone] The example is modified to adapt to the default theme. #2561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ const statusMap = ref({
// 对应 status = completed
completed: '#1890ff',
// 对应 status = doing
doing: '#7eb7fc',
doing: '#e8faff',
// 对应 status = back
back: '#ff8800',
back: '#edf7df',
// 对应 status = end
end: '#faad14',
// 对应 status = cancel
cancel: '#fce2e0'
cancel: '#f230301A'
})

// 数据源
Expand Down
8 changes: 4 additions & 4 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 @@ -34,18 +34,18 @@ test('基本用法', async ({ page }) => {
'box-shadow': 'none'
},
{
'background-color': 'rgb(126, 183, 252)',
'background-color': 'rgb(232, 250, 255)',
'color': 'rgb(255, 255, 255)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(252, 226, 224)',
'color': 'rgba(242, 48, 48, 0.1)',
'box-shadow': 'none'
},
{
'background-color': 'rgb(255, 255, 255)',
'color': 'rgb(255, 136, 0)',
'color': 'rgb(237, 247, 223)',
'box-shadow': 'none'
},
{
Expand All @@ -56,7 +56,7 @@ test('基本用法', async ({ page }) => {
]
const titles = ['completed 状态', 'completed 状态', 'doing 状态', 'cancel 状态', 'back 状态', 'end 状态']
const flagContents = [/引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/, /test6/]
const flagLineColors = ['rgb(255, 136, 0)', 'rgb(255, 136, 0)', 'rgb(126, 183, 252)', 'rgb(252, 226, 224)']
const flagLineColors = ['rgb(237, 247, 223)', 'rgb(237, 247, 223)', 'rgb(232, 250, 255)', 'rgba(242, 48, 48, 0.1)']

await expect(nodes).toHaveCount(nodeCount)
await expect(nodeLines).toHaveCount(nodeCount)
Expand Down
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/milestone/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ export default {
// 对应 status = completed
completed: '#1890ff',
// 对应 status = doing
doing: '#7eb7fc',
doing: '#e8faff',
// 对应 status = back
back: '#ff8800',
back: '#edf7df',
// 对应 status = end
end: '#faad14',
// 对应 status = cancel
cancel: '#fce2e0'
cancel: '#f230301A'
},
// 数据源
milestoneData: [
Expand Down
11 changes: 4 additions & 7 deletions examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,12 @@
import { ref } from 'vue'
import { TinyMilestone } from '@opentiny/vue'

const timeActive1 = ref(1)
const normalActive = ref(2)
const advancedActive = ref(2)
const statusMap = ref({
completed: 'var(--tv-color-bg-disabled-control-active)',
doing: '#7ED321',
back: '#f5222d',
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#d9d9d9'
cancel: '#f230301A'
})
const milestoneData = ref([
{
Expand Down
11 changes: 4 additions & 7 deletions examples/sites/demos/pc/app/milestone/custom-flag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,12 @@ export default {
},
data() {
return {
timeActive1: 1,
normalActive: 2,
advancedActive: 2,
statusMap: {
completed: 'var(--tv-color-bg-disabled-control-active)',
doing: '#7ED321',
back: '#f5222d',
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#d9d9d9'
cancel: '#f230301A'
},
milestoneData: [
{
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ import { ref } from 'vue'
import { TinyMilestone } from '@opentiny/vue'

const statusMap = ref({
completed: 'var(--tv-color-bg-disabled-control-active)',
doing: '#7ED321',
back: '#f5222d',
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#d9d9d9'
cancel: '#f230301A'
})
const milestoneData = ref([
{
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/milestone/data-field-mapping.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ export default {
data() {
return {
statusMap: {
completed: 'var(--tv-color-bg-disabled-control-active)',
doing: '#7ED321',
back: '#f5222d',
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#d9d9d9'
cancel: '#f230301A'
},
milestoneData: [
{
Expand Down
11 changes: 4 additions & 7 deletions examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,12 @@
import { ref } from 'vue'
import { TinyMilestone, TinyNotify } from '@opentiny/vue'

const timeActive1 = ref(1)
const normalActive = ref(2)
const advancedActive = ref(2)
const statusMap = ref({
completed: 'var(--tv-color-bg-disabled-control-active)',
doing: '#7ED321',
back: '#f5222d',
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#d9d9d9'
cancel: '#f230301A'
Comment on lines +17 to +21
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Standardize color format and consider using theme variables

The color definitions have several inconsistencies:

  1. Mixed usage of 6-digit and 8-digit hex formats
  2. The alpha channel notation in #f230301A should use lowercase for consistency with other hex values
  3. Hardcoded color values make theme maintenance difficult

Consider these improvements:

 const statusMap = ref({
-  completed: '#f0f7ff',
-  doing: '#e8faff',
-  back: '#edf7df',
   end: '#faad14',
-  cancel: '#f230301A'
+  completed: 'var(--ti-milestone-completed-bg)',
+  doing: 'var(--ti-milestone-doing-bg)',
+  back: 'var(--ti-milestone-back-bg)',
+  cancel: '#f230301a'
 })

This approach:

  • Uses CSS variables for better theme support
  • Maintains consistent lowercase hex format
  • Allows for easier global color updates

Committable suggestion skipped: line range outside the PR's diff.

💡 Codebase verification

Based on the gathered information, I can now provide the final response:

Color changes are inconsistent with theme system

The hardcoded color values should be replaced with theme CSS custom properties. The milestone component has defined theme variables in packages/theme/src/milestone/vars.less:

  • Use var(--tv-Milestone-bg-color) for background colors
  • Use var(--tv-Milestone-flag-bg-color) for flag backgrounds
  • Use var(--tv-Milestone-text-color) for text colors
🔗 Analysis chain

Verify color consistency with default theme

Let's ensure these color changes are consistent with the default theme implementation across other components.

Let me gather more information about the theme implementation to ensure we have a complete picture.

Let me check the theme variables and color definitions one more time to ensure we have a complete picture.

Let me check the milestone variables file directly since we found a reference to it.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other color definitions in milestone components
rg -l "tiny-milestone" | xargs rg "(#f0f7ff|#e8faff|#edf7df|#f23030)"

# Search for theme variable definitions
rg "ti-milestone-.*-bg"

Length of output: 3472

Script:

#!/bin/bash
# Search for theme-related files and their content
fd -e less -e css | xargs rg "milestone"

# Search for any theme configuration files
fd "theme|style" -e json -e js | xargs rg "milestone"

# Look for any CSS custom properties related to milestone colors
rg --type=css --type=less "var\(.*milestone.*\)"

Length of output: 4991

Script:

#!/bin/bash
# Search for color variables in theme files
rg -g "*.less" "(@milestone.*color|@color-.*)" packages/theme

# Check for any default theme configuration
fd vars.less | xargs rg "milestone"

# Look for any CSS custom properties in the theme
rg "var\(--ti-milestone-.*\)" --type=less

Length of output: 1365

Script:

#!/bin/bash
# Check the milestone variables file content
cat packages/theme/src/milestone/vars.less

# Look for any theme token definitions
rg -g "*.ts" -g "*.js" "milestone.*color"

# Check for any theme configuration in the root level configuration
cat packages/theme/src/vars.less

Length of output: 5802

})
const milestoneData = ref([
{
Expand Down
11 changes: 4 additions & 7 deletions examples/sites/demos/pc/app/milestone/milestone-events.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,12 @@ export default {
},
data() {
return {
timeActive1: 1,
normalActive: 2,
advancedActive: 2,
statusMap: {
completed: 'var(--tv-color-bg-disabled-control-active)',
doing: '#7ED321',
back: '#f5222d',
completed: '#f0f7ff',
doing: '#e8faff',
back: '#edf7df',
end: '#faad14',
cancel: '#d9d9d9'
cancel: '#f230301A'
},
milestoneData: [
{
Expand Down
Loading