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/components/spotlight.tsx

@@ -0,0 +1,41 @@
+import { useIsDarkTheme } from '@/components/theme-provider';
+import React from 'react';
+
+interface SpotlightProps {
+  className?: string;
+  opcity?: number;
+  coverage?: number;
+}
+/**
+ *
+ * @param opcity 0~1 default 0.5
+ * @param coverage 0~100 default 60
+ * @returns
+ */
+const Spotlight: React.FC<SpotlightProps> = ({
+  className,
+  opcity = 0.5,
+  coverage = 60,
+}) => {
+  const isDark = useIsDarkTheme();
+  const rgb = isDark ? '255, 255, 255' : '194, 221, 243';
+  return (
+    <div
+      className={`absolute inset-0  opacity-80 ${className} rounded-lg`}
+      style={{
+        backdropFilter: 'blur(30px)',
+        zIndex: -1,
+      }}
+    >
+      <div
+        className="absolute inset-0"
+        style={{
+          background: `radial-gradient(circle at 50% 190%, rgba(${rgb},${opcity}) 0%, rgba(${rgb},0) ${coverage}%)`,
+          pointerEvents: 'none',
+        }}
+      ></div>
+    </div>
+  );
+};
+
+export default Spotlight;