Optimize the display of some colors

src/styles/index.scss

@@ -605,7 +605,7 @@ li.rmenu i.fa {
 }
 
 .fa-check-circle {
-  color: #1ab394 !important;
+  color: var(--color-primary) !important;
 }
 
 .el-alert.el-alert--info.is-light {

src/utils/theme/color.js

@@ -70,6 +70,44 @@ export function mix(color_1, color_2, weight) {
   return color
 }
 
+export function getCssVar(name, fallback = '') {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return fallback
+  }
+
+  const root = document.documentElement
+  const inlineValue = root.style.getPropertyValue(name)
+  const computedValue = window.getComputedStyle(root).getPropertyValue(name)
+  const defaultValue = fallback || defaultThemeConfig[name] || ''
+  return (inlineValue || computedValue || defaultValue).trim()
+}
+
+export function colorToRgba(color, alpha) {
+  const fallback = alpha === 0 ? 'transparent' : color
+  if (!color) {
+    return alpha === 0 ? 'transparent' : color
+  }
+
+  const normalizedColor = color.trim()
+  if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(normalizedColor)) {
+    const hex = normalizedColor.slice(1)
+    const fullHex = hex.length === 3
+      ? hex.split('').map(char => char + char).join('')
+      : hex
+    const r = Number.parseInt(fullHex.slice(0, 2), 16)
+    const g = Number.parseInt(fullHex.slice(2, 4), 16)
+    const b = Number.parseInt(fullHex.slice(4, 6), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+
+  const rgbValues = normalizedColor.match(/\d+/g)
+  if (normalizedColor.startsWith('rgb') && rgbValues && rgbValues.length >= 3) {
+    return `rgba(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]}, ${alpha})`
+  }
+
+  return fallback
+}
+
 export function setRootColors() {
   const themeColors = defaultThemeConfig || {}
   for (const [key, value] of Object.entries(themeColors)) {

src/views/reports/pam/Dashboard/RiskSummary.vue

@@ -12,6 +12,7 @@
 <script>
 import * as echarts from 'echarts'
 import Title from '@/components/Dashboard/Title.vue'
+import { colorRgbToHex, getCssVar, mix } from '@/utils/theme/color'
 
 export default {
   components: { Title },
@@ -115,6 +116,8 @@ export default {
       // 找出所有数据中最大的值，并设置为 x 轴的 max。如果全是零则设置为 10
       const maxValue = Math.max(...filteredData.map(item => item.value))
       const max = maxValue > 0 ? maxValue : 10
+      const primaryColor = this.getPrimaryColor()
+      const barColors = this.getPrimaryPalette(filteredData.length, primaryColor)
 
       return {
         grid: {
@@ -182,8 +185,13 @@ export default {
               distance: 10
             },
             itemStyle: {
-              color: '#1AB394',
+              color: (params) => barColors[params.dataIndex] || barColors[barColors.length - 1],
               borderRadius: [0, 4, 4, 0]
+            },
+            emphasis: {
+              itemStyle: {
+                color: primaryColor
+              }
             }
           }
         ]
@@ -211,6 +219,35 @@ export default {
     window.removeEventListener('resize', this.resizeChart)
   },
   methods: {
+    getPrimaryColor() {
+      const color = (getCssVar('--color-primary') || '').trim()
+      if (/^#([0-9a-f]{6})$/i.test(color)) {
+        return color
+      }
+      if (/^#([0-9a-f]{3})$/i.test(color)) {
+        const hex = color
+          .slice(1)
+          .split('')
+          .map((char) => char + char)
+          .join('')
+        return `#${hex}`
+      }
+      if (/^rgb/i.test(color)) {
+        return colorRgbToHex(color)
+      }
+      return '#1AB394'
+    },
+    getPrimaryPalette(length, primaryColor = this.getPrimaryColor()) {
+      const baseHex = primaryColor.replace('#', '')
+      const toneSteps = [-16, -10, -4, 0, 8, 16, 24]
+
+      return Array.from({ length }, (_, index) => {
+        const tone = toneSteps[index % toneSteps.length]
+        return tone < 0
+          ? mix('000000', baseHex, Math.abs(tone))
+          : mix('ffffff', baseHex, tone)
+      })
+    },
     async getResourcesCount() {
       return this.$axios.get('/api/v1/accounts/pam-dashboard/', {
         params: {

src/views/reports/pam/Dashboard/SummaryChart.vue

@@ -40,6 +40,7 @@
 <script>
 import * as echarts from 'echarts'
 import Title from '@/components/Dashboard/Title.vue'
+import { colorToRgba, getCssVar } from '@/utils/theme/color'
 
 export default {
   components: {
@@ -79,6 +80,8 @@ export default {
   },
   computed: {
     chartOption() {
+      const primaryColor = getCssVar('--color-primary')
+
       return {
         title: {
           show: false
@@ -114,22 +117,22 @@ export default {
             stack: 'Total',
             smooth: true,
             itemStyle: {
-              color: '#1AB394'
+              color: primaryColor
             },
             lineStyle: {
               width: 2,
-              color: '#1AB394'
+              color: primaryColor
             },
             showSymbol: false,
             areaStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: 'rgba(26, 179, 148, 0.3)'
+                  color: colorToRgba(primaryColor, 0.3)
                 },
                 {
                   offset: 1,
-                  color: 'rgba(26, 179, 148, 0)'
+                  color: colorToRgba(primaryColor, 0)
                 }
               ])
             },
@@ -296,7 +299,7 @@ $text-color: #646A73;
         transform: translateY(-0.2rem);
 
         .metric-value {
-          color: #1ab394;
+          color: var(--color-primary);
         }
       }
     }