耻辱柱

src/components/UserMenu.tsx

@@ -67,6 +67,7 @@ export const UserMenu: React.FC = () => {
   const [isEmailSettingsOpen, setIsEmailSettingsOpen] = useState(false);
   const [isDeviceManagementOpen, setIsDeviceManagementOpen] = useState(false);
   const [isEcoAppsOpen, setIsEcoAppsOpen] = useState(false);
+  const [isReportOpen, setIsReportOpen] = useState(false);
   const [authInfo, setAuthInfo] = useState<AuthInfo | null>(null);
   const [storageType, setStorageType] = useState<string>('localstorage');
   const [mounted, setMounted] = useState(false);
@@ -80,7 +81,7 @@ export const UserMenu: React.FC = () => {
 
   // Body 滚动锁定 - 使用 overflow 方式避免布局问题
   useEffect(() => {
-    if (isSettingsOpen || isChangePasswordOpen || isSubscribeOpen || isOfflineDownloadPanelOpen || isEmailSettingsOpen || isDeviceManagementOpen || isEcoAppsOpen) {
+    if (isSettingsOpen || isChangePasswordOpen || isSubscribeOpen || isOfflineDownloadPanelOpen || isEmailSettingsOpen || isDeviceManagementOpen || isEcoAppsOpen || isReportOpen) {
       const body = document.body;
       const html = document.documentElement;
 
@@ -2988,6 +2989,78 @@ export const UserMenu: React.FC = () => {
     </>
   );
 
+  // 举报信息弹窗
+  const reportPanel = (
+    <>
+      {/* 背景遮罩 */}
+      <div
+        className='fixed inset-0 bg-black/50 backdrop-blur-sm z-[1002]'
+        onClick={() => setIsReportOpen(false)}
+        onTouchMove={(e) => {
+          e.preventDefault();
+        }}
+        onWheel={(e) => {
+          e.preventDefault();
+        }}
+        style={{
+          touchAction: 'none',
+        }}
+      />
+
+      {/* 举报信息面板 */}
+      <div
+        className='fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white dark:bg-gray-900 rounded-xl shadow-xl z-[1003] overflow-hidden'
+      >
+        <div
+          className='h-full max-h-[70vh] flex flex-col'
+          data-panel-content
+          onTouchMove={(e) => {
+            e.stopPropagation();
+          }}
+          style={{
+            touchAction: 'auto',
+          }}
+        >
+          {/* 标题栏 */}
+          <div className='flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700'>
+            <h3 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
+              耻辱柱
+            </h3>
+            <button
+              onClick={() => setIsReportOpen(false)}
+              className='w-8 h-8 p-1 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+              aria-label='Close'
+            >
+              <X className='w-full h-full' />
+            </button>
+          </div>
+
+          {/* 内容区域 */}
+          <div className='flex-1 overflow-y-auto p-6'>
+            <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4'>
+              <p className='text-gray-800 dark:text-gray-200 leading-relaxed'>
+                抄袭狗<span className='font-bold text-red-600 dark:text-red-400'>SzeMeng76</span>毫无廉耻，盯着本项目的commit区，疯狂抄袭。警告亦全当看不见，实为开源界耻辱。
+              </p>
+              <p className='text-gray-800 dark:text-gray-200 leading-relaxed mt-3'>
+                超分，观影室，豆瓣反爬，精确搜索等等等等，直接抄袭，最不要脸的就是，刚更新一版，几小时后直接抄走。
+              </p>
+            </div>
+          </div>
+
+          {/* 底部按钮 */}
+          <div className='p-6 border-t border-gray-200 dark:border-gray-700'>
+            <button
+              onClick={() => setIsReportOpen(false)}
+              className='w-full px-4 py-2.5 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-medium rounded-lg transition-colors'
+            >
+              我知道了
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+
   // 生态应用面板内容
   const ecoAppsPanel = (
     <>
@@ -3025,13 +3098,25 @@ export const UserMenu: React.FC = () => {
             <h3 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
               生态应用
             </h3>
-            <button
+            <div className='flex items-center gap-2'>
-              onClick={() => setIsEcoAppsOpen(false)}
+              {/* 举报按钮 */}
-              className='w-8 h-8 p-1 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+              <button
-              aria-label='Close'
+                onClick={() => setIsReportOpen(true)}
-            >
+                className='w-8 h-8 p-1 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-lg'
-              <X className='w-full h-full' />
+                aria-label='Report'
-            </button>
+                title='举报抄袭'
+              >
+                🐶
+              </button>
+              {/* 关闭按钮 */}
+              <button
+                onClick={() => setIsEcoAppsOpen(false)}
+                className='w-8 h-8 p-1 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+                aria-label='Close'
+              >
+                <X className='w-full h-full' />
+              </button>
+            </div>
           </div>
 
           {/* 应用列表 */}
@@ -3264,6 +3349,11 @@ export const UserMenu: React.FC = () => {
         mounted &&
         createPortal(ecoAppsPanel, document.body)}
 
+      {/* 使用 Portal 将举报信息面板渲染到 document.body */}
+      {isReportOpen &&
+        mounted &&
+        createPortal(reportPanel, document.body)}
+
       {/* 确认对话框 */}
       {confirmDialog.isOpen &&
         mounted &&