98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { useOutletContext, useParams } from 'react-router-dom'
|
||
import { api, ApiError } from '../api/client'
|
||
import { DevToolsPanel } from '../components/DevToolsPanel'
|
||
import { OnboardingGuideTarget } from '../components/OnboardingGuide'
|
||
import { AcLink, Badge, Card, ErrorText, Notice, SectionTitle, SuccessText } from '../components/ui'
|
||
import type { ThreadsAccountConnectionData, ThreadsAccountData } from '../types/api'
|
||
|
||
type WorkspaceContext = {
|
||
accountId: string
|
||
account: ThreadsAccountData | null
|
||
loading: boolean
|
||
error: string
|
||
}
|
||
|
||
export function ThreadsAccountConnectionsPage() {
|
||
const { id = '' } = useParams()
|
||
const { account, loading: workspaceLoading } = useOutletContext<WorkspaceContext>()
|
||
const [connection, setConnection] = useState<ThreadsAccountConnectionData | null>(null)
|
||
const [message, setMessage] = useState('')
|
||
const [error, setError] = useState('')
|
||
|
||
const load = async () => {
|
||
if (!id) return
|
||
setError('')
|
||
const conn = await api.get<ThreadsAccountConnectionData>(
|
||
`/api/v1/threads-accounts/${encodeURIComponent(id)}/connection`,
|
||
{ auth: true },
|
||
)
|
||
setConnection(conn)
|
||
}
|
||
|
||
useEffect(() => {
|
||
load().catch((e) => setError(e instanceof ApiError ? e.message : '載入連線設定失敗'))
|
||
}, [id])
|
||
|
||
const apiReady = !!connection?.api_connected
|
||
|
||
return (
|
||
<div className="grid gap-4">
|
||
<OnboardingGuideTarget step="connection">
|
||
<Card className="grid gap-4">
|
||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||
<div className="grid gap-2">
|
||
<SectionTitle>Threads API 連線</SectionTitle>
|
||
<p className="text-sm leading-relaxed text-ink-secondary">
|
||
正式流程的唯一通道。搜尋、發文、留言都走官方 API；帳號建立後預設使用此模式。
|
||
</p>
|
||
</div>
|
||
<Badge tone={apiReady ? 'success' : 'warning'}>
|
||
{apiReady ? 'API 已連線' : 'API 尚未設定'}
|
||
</Badge>
|
||
</div>
|
||
|
||
{apiReady ? (
|
||
<Notice
|
||
tone="success"
|
||
title="Threads API 就緒"
|
||
message={
|
||
account?.username
|
||
? `目前帳號 @${account.username.replace(/^@/, '')} 可透過 API 操作。`
|
||
: '此帳號已具備 API 憑證，可執行任務。'
|
||
}
|
||
/>
|
||
) : (
|
||
<Notice
|
||
tone="warning"
|
||
title="尚未完成 API 連線"
|
||
message="請完成 Threads OAuth / API token 設定（之後會在此頁提供授權按鈕）。在此之前任務可能無法發文或搜尋。"
|
||
/>
|
||
)}
|
||
|
||
<p className="ac-hint">
|
||
AI 產文用的 API key 在側欄「設定」管理；人設在 <AcLink to="/personas">人設庫</AcLink>{' '}
|
||
建立，發文時於 <AcLink to={`/threads/${id}/publish`}>發文頁</AcLink> 選擇。
|
||
</p>
|
||
</Card>
|
||
</OnboardingGuideTarget>
|
||
|
||
{id && connection ? (
|
||
<DevToolsPanel
|
||
accountId={id}
|
||
connection={connection}
|
||
workspaceLoading={workspaceLoading}
|
||
onConnectionChange={(data) => {
|
||
setConnection(data)
|
||
load().catch(() => undefined)
|
||
}}
|
||
onMessage={setMessage}
|
||
onError={setError}
|
||
/>
|
||
) : null}
|
||
|
||
<ErrorText message={error} />
|
||
<SuccessText message={message} />
|
||
</div>
|
||
)
|
||
} |