fix(web): clean up remaining Next.js artifacts in Vite migration

- Add vite-env.d.ts for import.meta.env and asset type declarations
- Remove dead layout.tsx (providers already in main.tsx)
- Fix useSearchParams destructuring to [searchParams] tuple (11 locations)
- Replace process.env.NEXT_PUBLIC_* with import.meta.env.VITE_*
- Fix langbotIcon.src to langbotIcon (Vite returns URL string)
- Fix Link href to Link to for react-router-dom
- Fix navigate({ scroll: false }) to { preventScrollReset: true }
- Fix [router] dependency arrays to [navigate]
- Remove Next.js plugin from tsconfig, set rsc: false in components.json
- Replace next lint with eslint in lint-staged

web/.env.example

@@ -1 +1 @@
-NEXT_PUBLIC_API_BASE_URL=http://localhost:5300
+VITE_API_BASE_URL=http://localhost:5300

web/components.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "new-york",
-  "rsc": true,
+  "rsc": false,
   "tsx": true,
   "tailwind": {
     "config": "",

web/package.json

@@ -11,7 +11,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "next lint --fix",
+      "eslint --fix",
       "prettier --write"
     ]
   },

web/src/app/auth/space/callback/page.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, Suspense } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +22,7 @@ import langbotIcon from '@/app/assets/langbot-logo.webp';
 
 function SpaceOAuthCallbackContent() {
   const navigate = useNavigate();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const { t } = useTranslation();
 
   const [status, setStatus] = useState<
@@ -62,7 +62,7 @@ function SpaceOAuthCallbackContent() {
         }
       }
     },
-    [router, t],
+    [navigate, t],
   );
 
   const [bindState, setBindState] = useState<string | null>(null);
@@ -94,7 +94,7 @@ function SpaceOAuthCallbackContent() {
         setIsProcessing(false);
       }
     },
-    [router, t],
+    [navigate, t],
   );
 
   useEffect(() => {
@@ -152,7 +152,7 @@ function SpaceOAuthCallbackContent() {
       <Card className="w-[400px] shadow-lg dark:shadow-white/10">
         <CardHeader className="text-center">
           <img
-            src={langbotIcon.src}
+            src={langbotIcon}
             alt="LangBot"
             className="w-16 h-16 mb-4 mx-auto"
           />

web/src/app/home/bots/page.tsx

@@ -4,7 +4,7 @@ import BotDetailContent from './BotDetailContent';
 
 export default function BotConfigPage() {
   const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const detailId = searchParams.get('id');
 
   if (detailId) {

web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { Copy, Check, Trash2, Plus } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
 import {
   Dialog,
   DialogContent,
@@ -68,7 +68,7 @@ export default function ApiIntegrationDialog({
   const navigate = useNavigate();
   const location = useLocation();
   const pathname = location.pathname;
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const [activeTab, setActiveTab] = useState('apikeys');
   const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
   const [webhooks, setWebhooks] = useState<Webhook[]>([]);
@@ -93,7 +93,9 @@ export default function ApiIntegrationDialog({
     if (open) {
       const params = new URLSearchParams(searchParams.toString());
       params.set('action', 'showApiIntegrationSettings');
-      navigate(`${pathname}?${params.toString()}`, { scroll: false });
+      navigate(`${pathname}?${params.toString()}`, {
+        preventScrollReset: true,
+      });
     }
   }, [open]);
 
@@ -107,7 +109,7 @@ export default function ApiIntegrationDialog({
       const newUrl = params.toString()
         ? `${pathname}?${params.toString()}`
         : pathname;
-      navigate(newUrl, { scroll: false });
+      navigate(newUrl, { preventScrollReset: true });
     }
     onOpenChange(newOpen);
   };

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
 import { sidebarConfigList } from '@/app/home/components/home-sidebar/sidbarConfigList';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
 import { systemInfo, httpClient } from '@/app/infra/http/HttpClient';
@@ -245,7 +245,7 @@ function NavItems({
   const navigate = useNavigate();
   const location = useLocation();
   const pathname = location.pathname;
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const sidebarData = useSidebarData();
   const { setPendingPluginInstallAction } = sidebarData;
   const { state: sidebarState, isMobile } = useSidebar();
@@ -1031,7 +1031,7 @@ export default function HomeSidebar({
   const navigate = useNavigate();
   const location = useLocation();
   const pathname = location.pathname;
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const { isMobile } = useSidebar();
 
   useEffect(() => {
@@ -1071,14 +1071,16 @@ export default function HomeSidebar({
     if (open) {
       const params = new URLSearchParams(searchParams.toString());
       params.set('action', 'showModelSettings');
-      navigate(`${pathname}?${params.toString()}`, { scroll: false });
+      navigate(`${pathname}?${params.toString()}`, {
+        preventScrollReset: true,
+      });
     } else {
       const params = new URLSearchParams(searchParams.toString());
       params.delete('action');
       const newUrl = params.toString()
         ? `${pathname}?${params.toString()}`
         : pathname;
-      navigate(newUrl, { scroll: false });
+      navigate(newUrl, { preventScrollReset: true });
     }
   }
 
@@ -1087,14 +1089,16 @@ export default function HomeSidebar({
     if (open) {
       const params = new URLSearchParams(searchParams.toString());
       params.set('action', 'showAccountSettings');
-      navigate(`${pathname}?${params.toString()}`, { scroll: false });
+      navigate(`${pathname}?${params.toString()}`, {
+        preventScrollReset: true,
+      });
     } else {
       const params = new URLSearchParams(searchParams.toString());
       params.delete('action');
       const newUrl = params.toString()
         ? `${pathname}?${params.toString()}`
         : pathname;
-      navigate(newUrl, { scroll: false });
+      navigate(newUrl, { preventScrollReset: true });
     }
   }
 
@@ -1226,7 +1230,7 @@ export default function HomeSidebar({
                 tooltip="LangBot"
               >
                 <img
-                  src={langbotIcon.src}
+                  src={langbotIcon}
                   alt="LangBot"
                   className="size-8 rounded-lg"
                 />

web/src/app/home/components/models-dialog/components/ProviderCard.tsx

@@ -133,7 +133,7 @@ export default function ProviderCard({
               {isLangBotModels ? (
                 <div className="w-9 h-9 rounded-lg overflow-hidden flex-shrink-0">
                   <img
-                    src={langbotIcon.src}
+                    src={langbotIcon}
                     alt="LangBot"
                     className="w-full h-full object-cover"
                   />

web/src/app/home/knowledge/components/kb-form/KBForm.tsx

@@ -304,7 +304,7 @@ export default function KBForm({
           {t('knowledge.noEnginesAvailable')}
         </p>
         <Link
-          href="/home/market?category=KnowledgeEngine"
+          to="/home/market?category=KnowledgeEngine"
           className="text-sm text-primary hover:underline"
         >
           {t('knowledge.installEngineHint')}

web/src/app/home/knowledge/page.tsx

@@ -8,7 +8,7 @@ import KBDetailContent from './KBDetailContent';
 
 export default function KnowledgePage() {
   const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const detailId = searchParams.get('id');
   const { refreshKnowledgeBases } = useSidebarData();
 

web/src/app/home/layout.tsx

@@ -19,7 +19,7 @@ import {
   initializeUserInfo,
   initializeSystemInfo,
 } from '@/app/infra/http';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { CircleHelp } from 'lucide-react';
@@ -80,7 +80,7 @@ export default function HomeLayout({
       }
     };
     checkWizard();
-  }, [router]);
+  }, [navigate]);
 
   return (
     <SidebarDataProvider>

web/src/app/home/mcp/page.tsx

@@ -4,7 +4,7 @@ import MCPDetailContent from './MCPDetailContent';
 
 export default function MCPPage() {
   const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const detailId = searchParams.get('id');
 
   if (detailId) {

web/src/app/home/monitoring/hooks/useMonitoringFilters.ts

@@ -7,7 +7,7 @@ import { getPresetDateRange } from '../utils/dateUtils';
  * Custom hook for managing monitoring filters
  */
 export function useMonitoringFilters() {
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
 
   // Initialize filters from URL params
   const [selectedBots, setSelectedBots] = useState<string[]>(() => {

web/src/app/home/pipelines/page.tsx

@@ -4,7 +4,7 @@ import PipelineDetailContent from './PipelineDetailContent';
 
 export default function PipelineConfigPage() {
   const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const detailId = searchParams.get('id');
 
   if (detailId) {

web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx

@@ -45,7 +45,7 @@ function MarketPageContent({
   installPlugin: (plugin: PluginV4) => void;
 }) {
   const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
 
   const validCategories = [
     'Tool',

web/src/app/home/plugins/page.tsx

@@ -44,7 +44,7 @@ import {
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -83,7 +83,7 @@ interface GithubAsset {
 }
 
 export default function PluginConfigPage() {
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const detailId = searchParams.get('id');
 
   // Show plugin detail view when ?id= query param is present

web/src/app/infra/http/index.ts

@@ -31,8 +31,8 @@ export let userInfo: {
  * 获取基础 URL
  */
 const getBaseURL = (): string => {
-  if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_API_BASE_URL) {
+  if (typeof window !== 'undefined' && import.meta.env.VITE_API_BASE_URL) {
-    return process.env.NEXT_PUBLIC_API_BASE_URL;
+    return import.meta.env.VITE_API_BASE_URL;
   }
   return '/';
 };

web/src/app/infra/websocket/WebSocketClient.ts

@@ -78,10 +78,10 @@ export class WebSocketClient {
 
         // 构建WebSocket URL
         const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        // extract host from process.env.NEXT_PUBLIC_API_BASE_URL
+        // extract host from import.meta.env.VITE_API_BASE_URL
-        // 如果环境变量未定义,使用当前页面的 host (适配生产环境)
+        // If env var is undefined, use current page host (for production)
         const host =
-          process.env.NEXT_PUBLIC_API_BASE_URL?.split('://')[1] ||
+          import.meta.env.VITE_API_BASE_URL?.split('://')[1] ||
           window.location.host;
         const url = `${protocol}//${host}/api/v1/pipelines/${this.pipelineId}/ws/connect?session_type=${this.sessionType}`;
 

web/src/app/layout.tsx

@@ -1,31 +0,0 @@
-import './global.css';
-import 'react-photo-view/dist/react-photo-view.css';
-import type { Metadata } from 'next';
-import { Toaster } from '@/components/ui/sonner';
-import I18nProvider from '@/i18n/I18nProvider';
-import { ThemeProvider } from '@/components/providers/theme-provider';
-
-export const metadata: Metadata = {
-  title: 'LangBot',
-  description:
-    'Production-grade platform for building agentic IM bots, integrated with Telegram, Slack, Discord, WeChat, QQ, etc.',
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="zh" suppressHydrationWarning>
-      <body className={``}>
-        <ThemeProvider>
-          <I18nProvider>
-            {children}
-            <Toaster />
-          </I18nProvider>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}

web/src/app/login/page.tsx

@@ -153,7 +153,7 @@ export default function Login() {
               <LanguageSelector />
             </div>
             <img
-              src={langbotIcon.src}
+              src={langbotIcon}
               alt="LangBot"
               className="w-16 h-16 mb-4 mx-auto"
             />
@@ -204,7 +204,7 @@ export default function Login() {
             <LanguageSelector />
           </div>
           <img
-            src={langbotIcon.src}
+            src={langbotIcon}
             alt="LangBot"
             className="w-16 h-16 mb-4 mx-auto"
           />
@@ -312,7 +312,7 @@ export default function Login() {
                       <div className="flex justify-between">
                         <FormLabel>{t('common.password')}</FormLabel>
                         <Link
-                          href="/reset-password"
+                          to="/reset-password"
                           className="text-sm text-blue-500"
                         >
                           {t('common.forgotPassword')}

web/src/app/register/page.tsx

@@ -113,7 +113,7 @@ export default function Register() {
             <LanguageSelector />
           </div>
           <img
-            src={langbotIcon.src}
+            src={langbotIcon}
             alt="LangBot"
             className="w-16 h-16 mb-4 mx-auto"
           />

web/src/app/reset-password/page.tsx

@@ -87,7 +87,7 @@ export default function ResetPassword() {
         <CardHeader>
           <div className="flex justify-between items-center mb-6">
             <Link
-              href="/login"
+              to="/login"
               className="flex items-center text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"
             >
               <ArrowLeft className="h-4 w-4 mr-1" />

web/src/app/wizard/page.tsx

@@ -518,7 +518,7 @@ export default function WizardPage() {
     setIsSkipping(false);
     setShowSkipConfirm(false);
     navigate('/home');
-  }, [router, t]);
+  }, [navigate, t]);
 
   // ---- Render ----
 
@@ -1212,7 +1212,7 @@ function StepDone() {
     }
     setIsCompleting(false);
     navigate('/home/bots');
-  }, [router, t]);
+  }, [navigate, t]);
 
   return (
     <div className="relative flex flex-col items-center justify-center h-full min-h-[400px]">
@@ -1242,7 +1242,7 @@ function StepDone() {
         {t('wizard.done.backToWorkbench')}
       </Button>
 
-      <style jsx>{`
+      <style>{`
         @keyframes wizardConfetti {
           0% {
             transform: translateY(100vh) rotate(0deg);

web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

web/tsconfig.json

@@ -13,20 +13,13 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
     "paths": {
       "@/*": ["./src/*"]
     }
   },
   "include": [
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx"
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
   ],
   "exclude": ["node_modules"]
 }