添加热力图

src/components/UserMenu.tsx

@@ -86,6 +86,7 @@ export const UserMenu: React.FC = () => {
   const [enableOptimization, setEnableOptimization] = useState(true);
   const [fluidSearch, setFluidSearch] = useState(true);
   const [liveDirectConnect, setLiveDirectConnect] = useState(false);
+  const [danmakuHeatmapDisabled, setDanmakuHeatmapDisabled] = useState(false);
   const [doubanDataSource, setDoubanDataSource] = useState('cmliussss-cdn-tencent');
   const [doubanImageProxyType, setDoubanImageProxyType] = useState('cmliussss-cdn-tencent');
   const [doubanImageProxyUrl, setDoubanImageProxyUrl] = useState('');
@@ -300,6 +301,11 @@ export const UserMenu: React.FC = () => {
       if (savedLiveDirectConnect !== null) {
         setLiveDirectConnect(JSON.parse(savedLiveDirectConnect));
       }
+
+      const savedDanmakuHeatmapDisabled = localStorage.getItem('danmaku_heatmap_disabled');
+      if (savedDanmakuHeatmapDisabled !== null) {
+        setDanmakuHeatmapDisabled(savedDanmakuHeatmapDisabled === 'true');
+      }
     }
   }, []);
 
@@ -497,6 +503,13 @@ export const UserMenu: React.FC = () => {
     }
   };
 
+  const handleDanmakuHeatmapDisabledToggle = (value: boolean) => {
+    setDanmakuHeatmapDisabled(value);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('danmaku_heatmap_disabled', String(value));
+    }
+  };
+
   const handleDoubanDataSourceChange = (value: string) => {
     setDoubanDataSource(value);
     if (typeof window !== 'undefined') {
@@ -553,6 +566,7 @@ export const UserMenu: React.FC = () => {
     setEnableOptimization(true);
     setFluidSearch(defaultFluidSearch);
     setLiveDirectConnect(false);
+    setDanmakuHeatmapDisabled(false);
     setDoubanProxyUrl(defaultDoubanProxy);
     setDoubanDataSource(defaultDoubanProxyType);
     setDoubanImageProxyType(defaultDoubanImageProxyType);
@@ -563,6 +577,7 @@ export const UserMenu: React.FC = () => {
       localStorage.setItem('enableOptimization', JSON.stringify(true));
       localStorage.setItem('fluidSearch', JSON.stringify(defaultFluidSearch));
       localStorage.setItem('liveDirectConnect', JSON.stringify(false));
+      localStorage.setItem('danmaku_heatmap_disabled', 'false');
       localStorage.setItem('doubanProxyUrl', defaultDoubanProxy);
       localStorage.setItem('doubanDataSource', defaultDoubanProxyType);
       localStorage.setItem('doubanImageProxyType', defaultDoubanImageProxyType);
@@ -1150,6 +1165,30 @@ export const UserMenu: React.FC = () => {
               </label>
             </div>
 
+            {/* 禁用弹幕热力 */}
+            <div className='flex items-center justify-between'>
+              <div>
+                <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                  禁用弹幕热力图
+                </h4>
+                <p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                  完全关闭弹幕热力图功能以提升性能（需手动刷新页面生效）
+                </p>
+              </div>
+              <label className='flex items-center cursor-pointer'>
+                <div className='relative'>
+                  <input
+                    type='checkbox'
+                    className='sr-only peer'
+                    checked={danmakuHeatmapDisabled}
+                    onChange={(e) => handleDanmakuHeatmapDisabledToggle(e.target.checked)}
+                  />
+                  <div className='w-11 h-6 bg-gray-300 rounded-full peer-checked:bg-green-500 transition-colors dark:bg-gray-600'></div>
+                  <div className='absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5'></div>
+                </div>
+              </label>
+            </div>
+
             {/* 分割线 */}
             <div className='border-t border-gray-200 dark:border-gray-700'></div>