diff --git a/web/bun.lock b/web/bun.lock
index 3e51d4f8082..0fe078b30a1 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -17,6 +17,7 @@
         "@visactor/vchart-semi-theme": "~1.8.8",
         "axios": "catalog:",
         "clsx": "catalog:",
+        "date-fns-v2": "npm:date-fns@^2.30.0",
         "dayjs": "catalog:",
         "highlight.js": "^11.11.1",
         "history": "^5.3.0",
@@ -1598,6 +1599,8 @@
 
     "date-fns-tz": ["date-fns-tz@1.3.8", "", { "peerDependencies": { "date-fns": ">=2.0.0" } }, "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ=="],
 
+    "date-fns-v2": ["date-fns@2.30.0", "", { "dependencies": { "@babel/runtime": "^7.21.0" } }, "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw=="],
+
     "dayjs": ["dayjs@1.11.21", "", {}, "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
diff --git a/web/classic/package.json b/web/classic/package.json
index 8a840d67e7c..90ef94d212c 100644
--- a/web/classic/package.json
+++ b/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",
diff --git a/web/classic/postcss.config.js b/web/classic/postcss.config.js
index 5731ce76eb1..00c633a7fde 100644
--- a/web/classic/postcss.config.js
+++ b/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()],
 };
diff --git a/web/classic/rsbuild.config.ts b/web/classic/rsbuild.config.ts
index 0a37a0bb7b8..3cbe5fd1ce6 100644
--- a/web/classic/rsbuild.config.ts
+++ b/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',
diff --git a/web/classic/src/components/dashboard/ChartsPanel.jsx b/web/classic/src/components/dashboard/ChartsPanel.jsx
index 0034ffd9006..265520f7352 100644
--- a/web/classic/src/components/dashboard/ChartsPanel.jsx
+++ b/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>
diff --git a/web/classic/src/components/dashboard/StatsCards.jsx b/web/classic/src/components/dashboard/StatsCards.jsx
index ce72568354c..2ac0bf63fb4 100644
--- a/web/classic/src/components/dashboard/StatsCards.jsx
+++ b/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>
                     )
diff --git a/web/classic/src/index.jsx b/web/classic/src/index.jsx
index f24f0ec0898..be6de5ba67e 100644
--- a/web/classic/src/index.jsx
+++ b/web/classic/src/index.jsx
@@ -1,4 +1,5 @@
 import '@douyinfe/semi-ui/react19-adapter';
+import './lib/visactor-env';
 
 /*
 Copyright (C) 2025 QuantumNous
diff --git a/web/classic/src/lib/visactor-env.js b/web/classic/src/lib/visactor-env.js
new file mode 100644
index 00000000000..2fbef7e06c5
--- /dev/null
+++ b/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();
+}
diff --git a/web/default/src/lib/visactor-env.ts b/web/default/src/lib/visactor-env.ts
new file mode 100644
index 00000000000..5b9a3fbcea2
--- /dev/null
+++ b/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()
+}
diff --git a/web/default/src/main.tsx b/web/default/src/main.tsx
index cd420d83256..3816a1ec371 100644
--- a/web/default/src/main.tsx
+++ b/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'