From 2f5852e3111c333c5886a99c9d5805761989d113 Mon Sep 17 00:00:00 2001
From: butubb <1422726308@qq.com>
Date: Wed, 7 Oct 2026 16:35:12 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E8=BF=90=E8=90=A5=E4=B8=8E=E6=89=AB?=
 =?UTF-8?q?=E7=A0=81=E7=99=BB=E5=BD=95=E6=80=81=E6=B2=A1=E8=B7=9F=E7=9D=80?=
 =?UTF-8?q?=E5=B9=B3=E5=8F=B0=E8=B5=B0=EF=BC=8C=E4=B8=94=E4=B8=A4=E4=B8=AA?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=9D=A2=E6=9D=BF=E5=88=86=E4=B8=8D=E6=B8=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

两个 bug 是同一类问题：没做平台门禁。

1) 切到抖音等平台，「运营」仍列出小红书账号。运营读的是小红书创作者后台，
   其它平台根本没有对应的后台接口。现在按平台门禁换掉整个视图并说明原因 ——
   与 MonitorDashboard / ReportView 用 isWired 的做法一致。

2) 扫码登录面板把小红书的会话当成任意平台的登录态报。它的检测读的是小红书页面的
   __INITIAL_STATE__，后端 qrlogin.LOGIN_URL 里也只有 xhs 一项；而标题写的是
   「{当前平台}登录态」，于是切到抖音照样显示已登录—— 这是个具体的谎。
   现在非小红书直接换掉整个面板（只改标题不够，下面的块读的仍是小红书的状态）。

3) 两个面板的标题都是「登录态」，看不出区别。它们其实是不同机制：
   - Cookie 面板：存进库、每轮以 --cookies_file 注入子进程 → 改名为「Cookie（定时任务用）」
   - 扫码面板：写进浏览器 profile、CDP 模式复用          → 改名为「浏览器登录态（扫码）」
---
 .../src/components/creator/OperationView.tsx  | 32 +++++++++++++
 webui/src/components/monitor/CookiePanel.tsx  |  5 ++-
 webui/src/components/monitor/QrLoginPanel.tsx | 45 +++++++++++++++++--
 3 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/webui/src/components/creator/OperationView.tsx b/webui/src/components/creator/OperationView.tsx
index d64b3d6..015718c 100644
--- a/webui/src/components/creator/OperationView.tsx
+++ b/webui/src/components/creator/OperationView.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import {
   AlertTriangle,
   ArrowLeft,
+  Briefcase,
   Clock,
   Plus,
   RefreshCw,
@@ -19,6 +20,7 @@ import {
   useSyncCreatorAccount,
 } from '@/hooks/useCreator'
 import { formatCount, formatDateTime, formatRelative } from '@/lib/monitorFormat'
+import { useCurrentPlatform } from '@/hooks/usePlatform'
 import type { CreatorNote, CreatorPermissionStatus } from '@/types/creator'
 
 import { AddAccountDialog } from './AddAccountDialog'
@@ -303,9 +305,39 @@ function AccountDetail({ accountId, onBack }: { accountId: number; onBack: () =>
  * 采集方式也不同（那边要浏览器登录态，这边是纯请求）。
  */
 export function OperationView() {
+  const { platform, capability } = useCurrentPlatform()
   const [selectedId, setSelectedId] = useState<number | null>(null)
   const [addOpen, setAddOpen] = useState(false)
 
+  // 运营只对小红书成立：它读的是小红书创作者后台。不挡住的话，切到抖音时这里照样
+  // 列出小红书的账号 —— 看起来像是"抖音账号"，其实平台维度根本没参与。
+  if (platform !== 'xhs') {
+    const label = capability?.label ?? platform
+    return (
+      <div className="flex-1 flex items-center justify-center overflow-y-auto terminal-scroll">
+        <div className="max-w-lg w-full mx-4 rounded-lg glass-panel float-panel p-6 space-y-3">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-md border border-cyber-neon-orange/40 bg-cyber-neon-orange/10">
+              <Briefcase className="w-5 h-5 text-cyber-neon-orange" />
+            </div>
+            <div>
+              <h2 className="font-mono text-sm text-cyber-text-primary">
+                {label} 没有运营模块
+              </h2>
+              <p className="text-[11px] font-mono text-cyber-text-muted">
+                运营读的是创作者后台的数据，目前只接入了小红书
+              </p>
+            </div>
+          </div>
+          <p className="text-[11px] font-mono text-cyber-text-muted leading-relaxed">
+            小红书之外，这里没有可用的后台接口 —— 能采的是公开数据，那属于「监控」。
+            切回小红书即可看到运营账号。
+          </p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="flex-1 overflow-y-auto terminal-scroll pr-1">
       <div className="max-w-5xl space-y-3 pb-6">
diff --git a/webui/src/components/monitor/CookiePanel.tsx b/webui/src/components/monitor/CookiePanel.tsx
index 7562b20..3206e24 100644
--- a/webui/src/components/monitor/CookiePanel.tsx
+++ b/webui/src/components/monitor/CookiePanel.tsx
@@ -31,8 +31,11 @@ export function CookiePanel() {
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-2">
           <KeyRound className="w-4 h-4 text-cyber-neon-cyan" />
+          {/* 标题要和扫码面板区分开：这个是"存进库里、每轮注入子进程"的 cookie，
+              那个是"写进浏览器 profile、CDP 模式复用"的登录态。两者是不同机制、
+              也都能同时算"登录着"，都叫「登录态」就分不清在说哪一个。 */}
           <span className="font-mono text-xs tracking-wider text-cyber-text-primary">
-            {label}登录态
+            {label} Cookie（定时任务用）
           </span>
           {status?.present ? (
             <Badge variant="success" className="text-[10px]">
diff --git a/webui/src/components/monitor/QrLoginPanel.tsx b/webui/src/components/monitor/QrLoginPanel.tsx
index 92f465a..fda0e81 100644
--- a/webui/src/components/monitor/QrLoginPanel.tsx
+++ b/webui/src/components/monitor/QrLoginPanel.tsx
@@ -39,8 +39,15 @@ export function QrLoginPanel() {
   const queryClient = useQueryClient()
   const [polling, setPolling] = useState(false)
 
-  const { data: state } = useQrLoginStatus(polling)
-  const { data: login } = useLoginState(polling)
+  // 登录态检测目前只实现了小红书：它读的是小红书页面的 __INITIAL_STATE__。
+  // 后端 qrlogin.LOGIN_URL 里也只有 xhs 一项。
+  //
+  // 不挡住的话会撒一个具体的谎 —— 切到抖音时，面板照样报"已登录"，因为小红书的
+  // 会话还在，而标题写的是「抖音登录态」。
+  const wired = platform === 'xhs'
+
+  const { data: state } = useQrLoginStatus(polling && wired)
+  const { data: login } = useLoginState(polling && wired)
   const start = useStartQrLogin()
   const cancel = useCancelQrLogin()
   const recheck = useRecheckLogin()
@@ -64,6 +71,29 @@ export function QrLoginPanel() {
     }
   }, [status, queryClient])
 
+  // 未接入的平台直接换掉整个面板。只改标题是不够的 —— 下面那些块读的是小红书的
+  // 状态，照渲染出来还是会显示"已登录"。
+  if (!wired) {
+    return (
+      <div className="rounded-lg glass-panel float-panel p-4 space-y-2">
+        <div className="flex items-center gap-2">
+          <KeyRound className="w-4 h-4 text-cyber-text-muted flex-shrink-0" />
+          <span className="font-mono text-xs tracking-wider text-cyber-text-primary">
+            浏览器登录态（扫码）
+          </span>
+          <Badge variant="outline" className="text-[10px]">
+            {label}未接入
+          </Badge>
+        </div>
+        <p className="text-[11px] font-mono text-cyber-text-muted leading-relaxed">
+          扫码登录目前只实现了<span className="text-cyber-neon-cyan">小红书</span> ——
+          登录态检测读的是小红书页面的登录状态，其它平台还没有对应的实现。
+          切回小红书即可使用。
+        </p>
+      </div>
+    )
+  }
+
   const begin = () => {
     setPolling(true)
     start.mutate()
@@ -76,10 +106,17 @@ export function QrLoginPanel() {
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-2 min-w-0">
           <KeyRound className="w-4 h-4 text-cyber-neon-cyan flex-shrink-0" />
+          {/* 标题必须和 Cookie 面板区分开：那个是"存进库、每轮注入"的 cookie，
+              这个是"写进浏览器 profile、CDP 模式复用"的浏览器登录态。两者是
+              不同的机制，都能算"登录着"，只写「登录态」会看不出指的是哪一个。 */}
           <span className="font-mono text-xs tracking-wider text-cyber-text-primary flex-shrink-0">
-            {label}登录态
+            浏览器登录态（扫码）
           </span>
-          {loggedIn ? (
+          {!wired ? (
+            <Badge variant="outline" className="text-[10px]">
+              {label}未接入
+            </Badge>
+          ) : loggedIn ? (
             <Badge variant="success" className="text-[10px]">
               已登录
             </Badge>