update

layout/includes/third-party/math/chartjs.pug

@@ -1,79 +1,91 @@
+- const { fontColor, borderColor, scale_ticks_backdropColor } = theme.chartjs
+
 script.
-    (() => {
-        const $chartjs = document.querySelectorAll('#article-container .chartjs-wrap')
-        if ($chartjs.length === 0) return
+  (() => {
+    const $chartjs = document.querySelectorAll('#article-container .chartjs-container')
+    if ($chartjs.length === 0) return
 
-        const applyThemeDefaultsConfig = (theme) => {
-            if (theme === 'dark-mode') {
-                Chart.defaults.color = "!{theme.chartjs.color.dark}"
-                Chart.defaults.borderColor = "!{theme.chartjs.borderColor.dark}"
-                Chart.defaults.scale.ticks.backdropColor = "!{theme.chartjs.scale.ticks.backdropColor.dark}"
-            } else {
-                Chart.defaults.color = "!{theme.chartjs.color.light}"
-                Chart.defaults.borderColor = "!{theme.chartjs.borderColor.light}"
-                Chart.defaults.scale.ticks.backdropColor = "!{theme.chartjs.scale.ticks.backdropColor.light}"
-            }
+    const applyThemeDefaultsConfig = theme => {
+      if (theme === 'dark-mode') {
+        Chart.defaults.color = "!{fontColor.dark}"
+        Chart.defaults.borderColor = "!{borderColor.dark}"
+        Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.dark}"
+      } else {
+        Chart.defaults.color = "!{fontColor.light}"
+        Chart.defaults.borderColor = "!{borderColor.light}"
+        Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.light}"
+      }
+    }
+
+    // Recursively traverse the config object and automatically apply theme-specific color schemes
+    const applyThemeConfig = (obj, theme) => {
+      if (typeof obj !== 'object' || obj === null) return
+      
+      Object.keys(obj).forEach(key => {
+        const value = obj[key]
+        // If the property is an object and has theme-specific options, apply them
+        if (typeof value === 'object' && value !== null) {
+          if (value[theme]) {
+            obj[key] = value[theme] // Apply the value for the current theme
+          } else {
+            // Recursively process child objects
+            applyThemeConfig(value, theme)
+          }
+        }
+      })
+    }
+
+    const runChartJS = () => {
+      window.loadChartJS = true
+
+      Array.from($chartjs).forEach((item, index) => {
+        const chartSrc = item.firstElementChild
+        const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // Use custom ID or default ID
+        const width = item.getAttribute('data-width')
+        const existingCanvas = document.getElementById(chartID)
+
+        // If a canvas already exists, remove it to avoid rendering duplicates
+        if (existingCanvas) {
+            existingCanvas.parentNode.remove()
         }
 
-        // 递归遍历 config 对象，自动根据当前主题选择双模式配色方案
-        const applyThemeConfig = (obj, theme) => {
-            if (typeof obj !== 'object' || obj === null) return
-            
-            Object.keys(obj).forEach(key => {
-                const value = obj[key]
-                // 如果属性是对象，并且有与主题相关的选项，进行应用
-                if (typeof value === 'object' && value !== null) {
-                    if (value[theme]) {
-                        obj[key] = value[theme] // 应用当前主题的值
-                    } else {
-                        // 递归处理子对象
-                        applyThemeConfig(value, theme)
-                    }
-                }
-            })
+        const chartDefinition = chartSrc.textContent
+        const canvas = document.createElement('canvas')
+        canvas.id = chartID
+
+        const div = document.createElement('div')
+        div.className = 'chartjs-wrap'
+
+        if (width) {
+          div.style.width = width
         }
 
-        const runChartJS = () => {
-            window.loadChartJS = true
+        div.appendChild(canvas)
+        chartSrc.insertAdjacentElement('afterend', div)
 
-            Array.from($chartjs).forEach((item, index) => {
-                const chartSrc = item.firstElementChild
-                const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // 使用自定义 ID 或默认 ID
-                const existingCanvas = document.getElementById(chartID)
+        const ctx = document.getElementById(chartID).getContext('2d')
 
-                // 如果已经存在 canvas，先将其移除，避免重复渲染
-                if (existingCanvas) {
-                    existingCanvas.remove()
-                }
+        const config = JSON.parse(chartDefinition)
 
-                const chartDefinition = chartSrc.textContent
-                const canvas = document.createElement('canvas')
-                canvas.id = chartID
-                chartSrc.insertAdjacentElement('afterend', canvas)
+        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark-mode' : 'light-mode'
 
-                const ctx = document.getElementById(chartID).getContext('2d')
+        // Set default styles (initial setup)
+        applyThemeDefaultsConfig(theme)
 
-                const config = JSON.parse(chartDefinition)
+        // Automatically traverse the config and apply dual-mode color schemes
+        applyThemeConfig(config, theme)
 
-                // 根据当前主题选择相应的配色方案
-                const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark-mode' : 'light-mode'
+        new Chart(ctx, config)
+      })
+    }
 
-                // 设置默认样式（默认初始化）
-                applyThemeDefaultsConfig(theme)
+    const loadChartJS = () => {
+      window.loadChartJS ? runChartJS() : btf.getScript('!{url_for(theme.asset.chartjs)}').then(runChartJS)
+    }
 
-                // 自动遍历 config，应用双模式配色方案
-                applyThemeConfig(config, theme)
+    // Listen for theme change events
+    btf.addGlobalFn('themeChange', runChartJS, 'chartjs')
+    btf.addGlobalFn('encrypt', runChartJS, 'chartjs')
 
-                new Chart(ctx, config)
-            })
-        }
-
-        const loadChartJS = () => {
-            window.loadChartJS ? runChartJS() : btf.getScript('!{url_for(theme.asset.chartjs)}').then(runChartJS)
-        }
-
-        // 监听主题切换
-        btf.addGlobalFn('themeChange', runChartJS, 'chartjs')
-
-        window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
-    })()
+    window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
+  })()