feat: Added UI functions related to data-flow knowledge base #3221 (#10038)

### What problem does this PR solve?

feat: Added UI functions related to data-flow knowledge base #3221

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-search/search-home.tsx

@@ -1,4 +1,5 @@
 import { Input } from '@/components/originui/input';
+import Spotlight from '@/components/spotlight';
 import message from '@/components/ui/message';
 import { IUserInfo } from '@/interfaces/database/user-setting';
 import { cn } from '@/lib/utils';
@@ -6,7 +7,6 @@ import { Search } from 'lucide-react';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import './index.less';
-import Spotlight from './spotlight';
 
 export default function SearchPage({
   isSearching,

web/src/pages/next-search/spotlight.tsx

@@ -1,31 +0,0 @@
-import { useIsDarkTheme } from '@/components/theme-provider';
-import React from 'react';
-
-interface SpotlightProps {
-  className?: string;
-}
-
-const Spotlight: React.FC<SpotlightProps> = ({ className }) => {
-  const isDark = useIsDarkTheme();
-  return (
-    <div
-      className={`absolute inset-0  opacity-80 ${className} rounded-lg`}
-      style={{
-        backdropFilter: 'blur(30px)',
-        zIndex: -1,
-      }}
-    >
-      <div
-        className="absolute inset-0"
-        style={{
-          background: isDark
-            ? 'radial-gradient(circle at 50% 190%, #fff4 0%, #fff0 60%)'
-            : 'radial-gradient(circle at 50% 190%, #E4F3FF 0%, #E4F3FF00  60%)',
-          pointerEvents: 'none',
-        }}
-      ></div>
-    </div>
-  );
-};
-
-export default Spotlight;