features: supports WeChat channel

2026-04-02 00:17:23 +08:00
parent a34d14bf59
commit 8050e30a55
25 changed files with 1223 additions and 65 deletions
--- a/src/components/settings/add-chat-channel-dialog.tsx
+++ b/src/components/settings/add-chat-channel-dialog.tsx
@@ -44,6 +44,7 @@ export function AddChatChannelDialog({
  const [token, setToken] = useState("")
  const [chatId, setChatId] = useState("")
  const [appId, setAppId] = useState("")
+  const [baseUrl, setBaseUrl] = useState("https://ilinkai.weixin.qq.com")
  const [dailyReportEnabled, setDailyReportEnabled] = useState(false)
  const [dailyReportTime, setDailyReportTime] = useState("18:00")

@@ -53,6 +54,7 @@ export function AddChatChannelDialog({
    setToken("")
    setChatId("")
    setAppId("")
+    setBaseUrl("https://ilinkai.weixin.qq.com")
    setDailyReportEnabled(false)
    setDailyReportTime("18:00")
    setError(null)
@@ -71,11 +73,11 @@ export function AddChatChannelDialog({
      setError(t("nameRequired"))
      return
    }
-    if (!token.trim()) {
+    if (channelType !== "weixin" && !token.trim()) {
      setError(t("tokenRequired"))
      return
    }
-    if (!chatId.trim()) {
+    if (channelType !== "weixin" && !chatId.trim()) {
      setError(t("chatIdRequired"))
      return
    }
@@ -84,9 +86,11 @@ export function AddChatChannelDialog({
    setError(null)
    try {
      const configJson =
-        channelType === "lark"
-          ? JSON.stringify({ app_id: appId, chat_id: chatId })
-          : JSON.stringify({ chat_id: chatId })
+        channelType === "weixin"
+          ? JSON.stringify({ base_url: baseUrl })
+          : channelType === "lark"
+            ? JSON.stringify({ app_id: appId, chat_id: chatId })
+            : JSON.stringify({ chat_id: chatId })

      const channel = await createChatChannel({
        name: name.trim(),
@@ -97,7 +101,9 @@ export function AddChatChannelDialog({
        dailyReportTime: dailyReportEnabled ? dailyReportTime : null,
      })

-      await saveChatChannelToken(channel.id, token.trim())
+      if (channelType !== "weixin" && token.trim()) {
+        await saveChatChannelToken(channel.id, token.trim())
+      }

      handleOpenChange(false)
      onChannelAdded()
@@ -113,6 +119,7 @@ export function AddChatChannelDialog({
    chatId,
    channelType,
    appId,
+    baseUrl,
    dailyReportEnabled,
    dailyReportTime,
    handleOpenChange,
@@ -149,6 +156,7 @@ export function AddChatChannelDialog({
              <SelectContent>
                <SelectItem value="telegram">Telegram</SelectItem>
                <SelectItem value="lark">{t("lark")}</SelectItem>
+                <SelectItem value="weixin">{t("weixin")}</SelectItem>
              </SelectContent>
            </Select>
          </div>
@@ -164,30 +172,40 @@ export function AddChatChannelDialog({
            </div>
          )}

-          <div className="space-y-1.5">
-            <label className="text-xs font-medium">
-              {channelType === "telegram" ? "Bot Token" : "App Secret"}
-            </label>
-            <Input
-              type="password"
-              value={token}
-              onChange={(e) => setToken(e.target.value)}
-              placeholder={
-                channelType === "telegram" ? "123456:ABC-DEF..." : "xxxxx"
-              }
-            />
-          </div>
+          {channelType !== "weixin" && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium">
+                {channelType === "telegram" ? "Bot Token" : "App Secret"}
+              </label>
+              <Input
+                type="password"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                placeholder={
+                  channelType === "telegram" ? "123456:ABC-DEF..." : "xxxxx"
+                }
+              />
+            </div>
+          )}

-          <div className="space-y-1.5">
-            <label className="text-xs font-medium">Chat ID</label>
-            <Input
-              value={chatId}
-              onChange={(e) => setChatId(e.target.value)}
-              placeholder={
-                channelType === "telegram" ? "-100123456789" : "oc_xxxxx"
-              }
-            />
-          </div>
+          {channelType !== "weixin" && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium">Chat ID</label>
+              <Input
+                value={chatId}
+                onChange={(e) => setChatId(e.target.value)}
+                placeholder={
+                  channelType === "telegram" ? "-100123456789" : "oc_xxxxx"
+                }
+              />
+            </div>
+          )}
+
+          {channelType === "weixin" && (
+            <p className="text-xs text-muted-foreground">
+              {t("weixinScanDescription")}
+            </p>
+          )}

          <div className="flex items-center justify-between">
            <label className="text-xs font-medium">{t("dailyReport")}</label>
--- a/src/components/settings/channel-list-tab.tsx
+++ b/src/components/settings/channel-list-tab.tsx
@@ -37,9 +37,14 @@ import {
  getChatChannelStatus,
 } from "@/lib/api"
 import { subscribe } from "@/lib/platform"
-import type { ChatChannelInfo, ChannelStatusInfo } from "@/lib/types"
+import type {
+  ChatChannelInfo,
+  ChannelStatusInfo,
+  ChannelType,
+} from "@/lib/types"
 import { AddChatChannelDialog } from "./add-chat-channel-dialog"
 import { EditChatChannelDialog } from "./edit-chat-channel-dialog"
+import { WeixinQrcodeDialog } from "./weixin-qrcode-dialog"

 export function ChannelListTab() {
  const t = useTranslations("ChatChannelSettings")
@@ -50,6 +55,7 @@ export function ChannelListTab() {
  const [editTarget, setEditTarget] = useState<ChatChannelInfo | null>(null)
  const [deleteTarget, setDeleteTarget] = useState<ChatChannelInfo | null>(null)
  const [actionLoading, setActionLoading] = useState<number | null>(null)
+  const [qrcodeChannelId, setQrcodeChannelId] = useState<number | null>(null)

  const loadChannels = useCallback(async () => {
    try {
@@ -114,12 +120,35 @@ export function ChannelListTab() {
  )

  const handleConnect = useCallback(
-    async (id: number) => {
+    async (id: number, channelType?: ChannelType) => {
      setActionLoading(id)
      try {
        await connectChatChannel(id)
        toast.success(t("connectSuccess"))
        await loadChannels()
+      } catch (err: unknown) {
+        if (channelType === "weixin") {
+          // No token or token expired — show QR code dialog
+          setQrcodeChannelId(id)
+        } else {
+          const msg = err instanceof Error ? err.message : String(err)
+          toast.error(t("connectFailed") + ": " + msg)
+        }
+      } finally {
+        setActionLoading(null)
+      }
+    },
+    [loadChannels, t]
+  )
+
+  const handleWeixinAuthSuccess = useCallback(
+    async (channelId: number) => {
+      setQrcodeChannelId(null)
+      setActionLoading(channelId)
+      try {
+        await connectChatChannel(channelId)
+        toast.success(t("connectSuccess"))
+        await loadChannels()
      } catch (err: unknown) {
        const msg = err instanceof Error ? err.message : String(err)
        toast.error(t("connectFailed") + ": " + msg)
@@ -270,7 +299,7 @@ export function ChannelListTab() {
                      size="sm"
                      title={t("connect")}
                      disabled={isLoading || !ch.enabled}
-                      onClick={() => handleConnect(ch.id)}
+                      onClick={() => handleConnect(ch.id, ch.channel_type)}
                    >
                      {isLoading ? (
                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -327,6 +356,15 @@ export function ChannelListTab() {
        />
      )}

+      {qrcodeChannelId !== null && (
+        <WeixinQrcodeDialog
+          open
+          channelId={qrcodeChannelId}
+          onOpenChange={(open) => !open && setQrcodeChannelId(null)}
+          onAuthSuccess={handleWeixinAuthSuccess}
+        />
+      )}
+
      <AlertDialog
        open={!!deleteTarget}
        onOpenChange={(open) => !open && setDeleteTarget(null)}
--- a/src/components/settings/edit-chat-channel-dialog.tsx
+++ b/src/components/settings/edit-chat-channel-dialog.tsx
@@ -44,6 +44,7 @@ export function EditChatChannelDialog({
  const [token, setToken] = useState("")
  const [chatId, setChatId] = useState(config.chat_id ?? "")
  const [appId, setAppId] = useState(config.app_id ?? "")
+  const [baseUrl] = useState(config.base_url ?? "")
  const [dailyReportEnabled, setDailyReportEnabled] = useState(
    channel.daily_report_enabled
  )
@@ -65,7 +66,7 @@ export function EditChatChannelDialog({
      setError(t("nameRequired"))
      return
    }
-    if (!chatId.trim()) {
+    if (channel.channel_type !== "weixin" && !chatId.trim()) {
      setError(t("chatIdRequired"))
      return
    }
@@ -74,9 +75,11 @@ export function EditChatChannelDialog({
    setError(null)
    try {
      const configJson =
-        channel.channel_type === "lark"
-          ? JSON.stringify({ app_id: appId, chat_id: chatId })
-          : JSON.stringify({ chat_id: chatId })
+        channel.channel_type === "weixin"
+          ? JSON.stringify({ base_url: baseUrl })
+          : channel.channel_type === "lark"
+            ? JSON.stringify({ app_id: appId, chat_id: chatId })
+            : JSON.stringify({ chat_id: chatId })

      await updateChatChannel({
        id: channel.id,
@@ -105,6 +108,7 @@ export function EditChatChannelDialog({
    chatId,
    channel,
    appId,
+    baseUrl,
    dailyReportEnabled,
    dailyReportTime,
    onOpenChange,
@@ -140,32 +144,45 @@ export function EditChatChannelDialog({
            </div>
          )}

-          <div className="space-y-1.5">
-            <label className="text-xs font-medium">
-              {channel.channel_type === "telegram" ? "Bot Token" : "App Secret"}
-            </label>
-            <Input
-              type="password"
-              value={token}
-              onChange={(e) => setToken(e.target.value)}
-              placeholder={
-                hasToken ? t("tokenPlaceholderKeep") : t("tokenRequired")
-              }
-            />
-          </div>
+          {channel.channel_type !== "weixin" && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium">
+                {channel.channel_type === "telegram"
+                  ? "Bot Token"
+                  : "App Secret"}
+              </label>
+              <Input
+                type="password"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                placeholder={
+                  hasToken ? t("tokenPlaceholderKeep") : t("tokenRequired")
+                }
+              />
+            </div>
+          )}

-          <div className="space-y-1.5">
-            <label className="text-xs font-medium">Chat ID</label>
-            <Input
-              value={chatId}
-              onChange={(e) => setChatId(e.target.value)}
-              placeholder={
-                channel.channel_type === "telegram"
-                  ? "-100123456789"
-                  : "oc_xxxxx"
-              }
-            />
-          </div>
+          {channel.channel_type !== "weixin" && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium">Chat ID</label>
+              <Input
+                value={chatId}
+                onChange={(e) => setChatId(e.target.value)}
+                placeholder={
+                  channel.channel_type === "telegram"
+                    ? "-100123456789"
+                    : "oc_xxxxx"
+                }
+              />
+            </div>
+          )}
+
+          {channel.channel_type === "weixin" && baseUrl && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium">Base URL</label>
+              <Input value={baseUrl} disabled />
+            </div>
+          )}

          <div className="flex items-center justify-between">
            <label className="text-xs font-medium">{t("dailyReport")}</label>
--- a/src/components/settings/weixin-qrcode-dialog.tsx
+++ b/src/components/settings/weixin-qrcode-dialog.tsx
@@ -0,0 +1,206 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { ExternalLink, Loader2, RefreshCw } from "lucide-react"
+import { useTranslations } from "next-intl"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { weixinGetQrcode, weixinCheckQrcode } from "@/lib/api"
+
+interface WeixinQrcodeDialogProps {
+  open: boolean
+  channelId: number
+  onOpenChange: (open: boolean) => void
+  onAuthSuccess: (channelId: number) => void
+}
+
+function WeixinQrcodeContent({
+  channelId,
+  onAuthSuccess,
+  onClose,
+}: {
+  channelId: number
+  onAuthSuccess: (channelId: number) => void
+  onClose: () => void
+}) {
+  const t = useTranslations("ChatChannelSettings")
+  const [qrcodeImg, setQrcodeImg] = useState<string | null>(null)
+  const [qrcodeUrl, setQrcodeUrl] = useState<string | null>(null)
+  const [imgFailed, setImgFailed] = useState(false)
+  const [qrcodeId, setQrcodeId] = useState<string | null>(null)
+  const [status, setStatus] = useState<"loading" | "waiting" | "expired">(
+    "loading"
+  )
+  const [error, setError] = useState<string | null>(null)
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const stopPolling = useCallback(() => {
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current)
+      pollingRef.current = null
+    }
+  }, [])
+
+  const fetchQrcode = useCallback(async () => {
+    setStatus("loading")
+    setError(null)
+    setQrcodeImg(null)
+    setQrcodeUrl(null)
+    setImgFailed(false)
+    setQrcodeId(null)
+    stopPolling()
+
+    try {
+      const result = await weixinGetQrcode()
+      setQrcodeId(result.qrcode_id)
+
+      if (result.qrcode_img_content) {
+        const raw = result.qrcode_img_content
+        // Keep the original URL for fallback link
+        if (raw.startsWith("http")) {
+          setQrcodeUrl(raw)
+        }
+        const imgSrc = raw.startsWith("data:")
+          ? raw
+          : raw.startsWith("http")
+            ? raw
+            : `data:image/png;base64,${raw}`
+        setQrcodeImg(imgSrc)
+      }
+
+      setStatus("waiting")
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setError(msg)
+      setStatus("expired")
+    }
+  }, [stopPolling])
+
+  // Fetch QR code on mount + cleanup polling on unmount
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- initial data fetch on mount
+    fetchQrcode()
+    return () => stopPolling()
+  }, [fetchQrcode, stopPolling])
+
+  // Start polling when we have a qrcodeId
+  useEffect(() => {
+    if (!qrcodeId || status !== "waiting") return
+
+    pollingRef.current = setInterval(async () => {
+      try {
+        const result = await weixinCheckQrcode(channelId, qrcodeId)
+        if (result.status === "confirmed") {
+          stopPolling()
+          onAuthSuccess(channelId)
+          onClose()
+        } else if (result.status === "expired") {
+          stopPolling()
+          setStatus("expired")
+        }
+      } catch {
+        // Polling error — keep trying
+      }
+    }, 2000)
+
+    return () => stopPolling()
+  }, [qrcodeId, status, channelId, stopPolling, onAuthSuccess, onClose])
+
+  return (
+    <div className="flex flex-col items-center gap-4 py-4">
+      <p className="text-sm text-muted-foreground text-center">
+        {t("weixinScanDescription")}
+      </p>
+
+      {status === "loading" && (
+        <div className="flex h-48 w-48 items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {status === "waiting" && qrcodeImg && (
+        <>
+          {!imgFailed ? (
+            <>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={qrcodeImg}
+                alt="WeChat QR Code"
+                className="h-48 w-48 rounded-md"
+                referrerPolicy="no-referrer"
+                onError={() => setImgFailed(true)}
+              />
+            </>
+          ) : qrcodeUrl ? (
+            <a
+              href={qrcodeUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex h-48 w-48 flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm text-muted-foreground hover:bg-muted"
+            >
+              <ExternalLink className="h-6 w-6" />
+              {t("weixinOpenQrcode")}
+            </a>
+          ) : null}
+          <p className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            {t("weixinWaitingScan")}
+          </p>
+        </>
+      )}
+
+      {status === "expired" && (
+        <>
+          <div className="flex h-48 w-48 items-center justify-center rounded-md bg-muted">
+            <p className="text-sm text-muted-foreground">
+              {t("weixinQrcodeExpired")}
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={fetchQrcode}>
+            <RefreshCw className="h-3.5 w-3.5 mr-1" />
+            {t("weixinRefreshQrcode")}
+          </Button>
+        </>
+      )}
+
+      {error && (
+        <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
+          {error}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function WeixinQrcodeDialog({
+  open,
+  channelId,
+  onOpenChange,
+  onAuthSuccess,
+}: WeixinQrcodeDialogProps) {
+  const t = useTranslations("ChatChannelSettings")
+  const handleClose = useCallback(() => onOpenChange(false), [onOpenChange])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("weixinScanTitle")}</DialogTitle>
+        </DialogHeader>
+        {open && (
+          <WeixinQrcodeContent
+            channelId={channelId}
+            onAuthSuccess={onAuthSuccess}
+            onClose={handleClose}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}