fix frontend dependency resolution and VChart browser mode

web/classic/package.json

@@ -13,6 +13,7 @@
     "@visactor/vchart-semi-theme": "~1.8.8",
     "axios": "catalog:",
     "clsx": "catalog:",
+    "date-fns-v2": "npm:date-fns@^2.30.0",
     "dayjs": "catalog:",
     "history": "^5.3.0",
     "highlight.js": "^11.11.1",

web/classic/postcss.config.js

@@ -17,9 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: [tailwindcss(), autoprefixer()],
 };

web/classic/rsbuild.config.ts

@@ -10,6 +10,20 @@ const semiUiDir = path.resolve(
   path.dirname(require.resolve('@douyinfe/semi-ui')),
   '../..',
 )
+const dateFnsV2Dir = path.dirname(require.resolve('date-fns-v2/package.json'))
+const vchartDir = path.dirname(require.resolve('@visactor/vchart/package.json'))
+const vchartVisactorDir = path.join(vchartDir, 'node_modules/@visactor')
+const vchartDependencyAliases = Object.fromEntries(
+  [
+    'vdataset',
+    'vrender-components',
+    'vrender-core',
+    'vrender-kits',
+    'vscale',
+    'vutils',
+    'vutils-extension',
+  ].map((name) => [`@visactor/${name}`, path.join(vchartVisactorDir, name)]),
+)
 
 export default defineConfig(({ envMode }) => {
   const env = loadEnv({ mode: envMode, prefixes: ['VITE_'] })
@@ -43,6 +57,8 @@ export default defineConfig(({ envMode }) => {
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
+        'date-fns': dateFnsV2Dir,
+        ...vchartDependencyAliases,
         '@douyinfe/semi-ui/dist/css/semi.css': path.resolve(
           semiUiDir,
           'dist/css/semi.css',

web/classic/src/components/dashboard/ChartsPanel.jsx

@@ -70,22 +70,22 @@ const ChartsPanel = ({
     >
       <div className='h-96 p-2'>
         {activeChartTab === '1' && (
-          <VChart spec={spec_line} option={CHART_CONFIG} />
+          <VChart spec={spec_line} options={CHART_CONFIG} />
         )}
         {activeChartTab === '2' && (
-          <VChart spec={spec_model_line} option={CHART_CONFIG} />
+          <VChart spec={spec_model_line} options={CHART_CONFIG} />
         )}
         {activeChartTab === '3' && (
-          <VChart spec={spec_pie} option={CHART_CONFIG} />
+          <VChart spec={spec_pie} options={CHART_CONFIG} />
         )}
         {activeChartTab === '4' && (
-          <VChart spec={spec_rank_bar} option={CHART_CONFIG} />
+          <VChart spec={spec_rank_bar} options={CHART_CONFIG} />
         )}
         {activeChartTab === '5' && isAdminUser && (
-          <VChart spec={spec_user_rank} option={CHART_CONFIG} />
+          <VChart spec={spec_user_rank} options={CHART_CONFIG} />
         )}
         {activeChartTab === '6' && isAdminUser && (
-          <VChart spec={spec_user_trend} option={CHART_CONFIG} />
+          <VChart spec={spec_user_trend} options={CHART_CONFIG} />
         )}
       </div>
     </Card>

web/classic/src/components/dashboard/StatsCards.jsx

@@ -98,7 +98,7 @@ const StatsCards = ({
                       <div className='w-24 h-10'>
                         <VChart
                           spec={getTrendSpec(item.trendData, item.trendColor)}
-                          option={CHART_CONFIG}
+                          options={CHART_CONFIG}
                         />
                       </div>
                     )

web/classic/src/index.jsx

@@ -1,4 +1,5 @@
 import '@douyinfe/semi-ui/react19-adapter';
+import './lib/visactor-env';
 
 /*
 Copyright (C) 2025 QuantumNous

web/classic/src/lib/visactor-env.js

@@ -0,0 +1,24 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import { registerBrowserEnv } from '@visactor/vchart';
+
+if (typeof window !== 'undefined') {
+  registerBrowserEnv();
+}

web/default/src/lib/visactor-env.ts

@@ -0,0 +1,24 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import { registerBrowserEnv } from '@visactor/vchart'
+
+if (typeof window !== 'undefined') {
+  registerBrowserEnv()
+}

web/default/src/main.tsx

@@ -34,6 +34,7 @@ import '@/lib/dayjs'
 import { applyFaviconToDom } from '@/lib/dom-utils'
 import { initializeFrontendCache } from '@/lib/frontend-cache'
 import { handleServerError } from '@/lib/handle-server-error'
+import '@/lib/visactor-env'
 import { DirectionProvider } from './context/direction-provider'
 import { FontProvider } from './context/font-provider'
 import { ThemeProvider } from './context/theme-provider'