@nextclaw/ui 0.12.11 → 0.12.13

package/src/features/channels/components/config/channel-form.tsx

@@ -0,0 +1,382 @@
+import { useMemo, useState, useSyncExternalStore } from 'react';
+import type { Dispatch, FormEvent, SetStateAction } from 'react';
+import { BookOpen, ChevronDown } from 'lucide-react';
+import { toast } from 'sonner';
+import { LogoBadge } from '@/shared/components/common/logo-badge';
+import { Button } from '@/shared/components/ui/button';
+import { StatusDot } from '@/shared/components/ui/status-dot';
+import { appClient } from '@/shared/lib/transport';
+import { useConfig, useConfigMeta, useConfigSchema, useExecuteConfigAction, useUpdateChannel } from '@/shared/hooks/use-config';
+import type { ConfigActionManifest, ConfigUiHints } from '@/shared/lib/api';
+import { ChannelFormFieldsSection } from '@/features/channels/components/channel-form-fields-section';
+import { WeixinChannelAuthSection } from '@/features/channels/components/config/weixin-channel-auth-section';
+import { buildChannelFormDefinitions, type ChannelField, type ChannelFormBlock, type ChannelFormFieldSection } from '@/features/channels/utils/channel-form-fields.utils';
+import { ConfigSplitDetailPane, ConfigSplitEmptyPane, ConfigSplitPaneBody, ConfigSplitPaneFooter, ConfigSplitPaneHeader } from '@/shared/components/config-split-page';
+import { hintForPath } from '@/shared/lib/config-hints';
+import { resolveChannelTutorialUrl } from '@/features/channels/utils/channel-tutorials.utils';
+import { t } from '@/shared/lib/i18n';
+import { getChannelLogo } from '@/shared/lib/logos';
+import { cn } from '@/shared/lib/utils';
+
+type ChannelFormProps = { channelName?: string };
+type ChannelApplyState = { status: 'applying' | 'applied' | 'failed'; message?: string } | null;
+type ChannelFormEditorProps = {
+  actions: ConfigActionManifest[];
+  channelConfig: Record<string, unknown>;
+  channelLabel?: string;
+  channelName: string;
+  fields: ChannelField[];
+  layoutBlocks: ChannelFormBlock[];
+  tutorialUrl?: string;
+  uiHints?: ConfigUiHints;
+};
+
+const EMPTY_CHANNEL_FIELDS: ChannelField[] = [];
+const DEFAULT_CHANNEL_LAYOUT_BLOCKS: ChannelFormBlock[] = [{ type: 'fields', section: 'all' }];
+const channelApplyListeners = new Set<() => void>();
+const channelApplySnapshots = new Map<string, ChannelApplyState>();
+let channelApplyUnsubscribe: null | (() => void) = null;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function deepMergeRecords(base: Record<string, unknown>, patch: Record<string, unknown>): Record<string, unknown> {
+  const next: Record<string, unknown> = { ...base };
+  for (const [key, value] of Object.entries(patch)) {
+    next[key] = isRecord(next[key]) && isRecord(value) ? deepMergeRecords(next[key] as Record<string, unknown>, value) : value;
+  }
+  return next;
+}
+
+function buildScopeDraft(scope: string, value: Record<string, unknown>) {
+  const output: Record<string, unknown> = {};
+  let cursor = output;
+  const segments = scope.split('.');
+  for (let index = 0; index < segments.length - 1; index += 1) {
+    cursor[segments[index]] = {};
+    cursor = cursor[segments[index]] as Record<string, unknown>;
+  }
+  cursor[segments[segments.length - 1]] = value;
+  return output;
+}
+
+function resolveFieldsForSection(fields: ChannelField[], section: ChannelFormFieldSection) {
+  return section === 'all' ? fields : fields.filter((field) => section === 'primary' ? field.section === 'primary' : field.section !== 'primary');
+}
+
+function buildJsonDrafts(channelConfig: Record<string, unknown>, fields: ChannelField[]) {
+  const nextDrafts: Record<string, string> = {};
+  fields.filter((field) => field.type === 'json').forEach((field) => {
+    nextDrafts[field.name] = JSON.stringify(channelConfig[field.name] ?? {}, null, 2);
+  });
+  return nextDrafts;
+}
+
+function ensureChannelApplySubscription() {
+  if (channelApplyUnsubscribe) {
+    return;
+  }
+  channelApplyUnsubscribe = appClient.subscribe((event) => {
+    if (event.type !== 'channel.config.apply-status') {
+      return;
+    }
+    channelApplySnapshots.set(
+      event.payload.channel,
+      event.payload.status === 'started'
+        ? { status: 'applying' }
+        : event.payload.status === 'succeeded'
+          ? { status: 'applied' }
+          : { status: 'failed', message: event.payload.message }
+    );
+    channelApplyListeners.forEach((listener) => listener());
+  });
+}
+
+function subscribeChannelApplyStore(listener: () => void) {
+  channelApplyListeners.add(listener);
+  ensureChannelApplySubscription();
+  return () => {
+    channelApplyListeners.delete(listener);
+    if (!channelApplyListeners.size && channelApplyUnsubscribe) {
+      channelApplyUnsubscribe();
+      channelApplyUnsubscribe = null;
+      channelApplySnapshots.clear();
+    }
+  };
+}
+
+function useChannelApplyState(channelName: string | undefined) {
+  return useSyncExternalStore(subscribeChannelApplyStore, () => channelName ? channelApplySnapshots.get(channelName) ?? null : null, () => null);
+}
+
+function buildChannelApplyStatusView(channelApplyState: ChannelApplyState) {
+  if (!channelApplyState) {
+    return null;
+  }
+  if (channelApplyState.status === 'applying') {
+    return { className: 'text-amber-600', label: t('channelConfigApplying') };
+  }
+  if (channelApplyState.status === 'applied') {
+    return { className: 'text-emerald-600', label: t('channelConfigApplied') };
+  }
+  return { className: 'text-red-600', label: `${t('channelConfigApplyFailed')}${channelApplyState.message ? `: ${channelApplyState.message}` : ''}` };
+}
+
+function ChannelFormHeader(props: {
+  channelApplyStatus: ReturnType<typeof buildChannelApplyStatusView>;
+  channelLabel?: string;
+  channelName: string;
+  enabled: boolean;
+  tutorialUrl?: string;
+}) {
+  return (
+    <ConfigSplitPaneHeader className="px-6 py-5">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-3">
+            <LogoBadge
+              name={props.channelName}
+              src={getChannelLogo(props.channelName)}
+              className={cn('h-9 w-9 rounded-lg border', props.enabled ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white')}
+              imgClassName="h-5 w-5 object-contain"
+              fallback={<span className="text-sm font-semibold uppercase text-gray-500">{props.channelName[0]}</span>}
+            />
+            <h3 className="truncate text-lg font-semibold text-gray-900 capitalize">{props.channelLabel}</h3>
+          </div>
+          <p className="mt-2 text-sm text-gray-500">{t('channelsFormDescription')}</p>
+          {props.channelApplyStatus ? <p className={cn('mt-2 text-xs font-medium', props.channelApplyStatus.className)}>{props.channelApplyStatus.label}</p> : null}
+          {props.tutorialUrl ? (
+            <a href={props.tutorialUrl} className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
+              <BookOpen className="h-3.5 w-3.5" />
+              {t('channelsGuideTitle')}
+            </a>
+          ) : null}
+        </div>
+        <StatusDot status={props.enabled ? 'active' : 'inactive'} label={props.enabled ? t('statusActive') : t('statusInactive')} />
+      </div>
+    </ConfigSplitPaneHeader>
+  );
+}
+
+function ChannelFormBlocks(props: {
+  channelConfig: Record<string, unknown>;
+  channelName: string;
+  enabled: boolean;
+  fields: ChannelField[];
+  formData: Record<string, unknown>;
+  jsonDrafts: Record<string, string>;
+  layoutBlocks: ChannelFormBlock[];
+  setJsonDrafts: Dispatch<SetStateAction<Record<string, string>>>;
+  uiHints?: ConfigUiHints;
+  updateField: (name: string, value: unknown) => void;
+  disabled: boolean;
+}) {
+  return (
+    <>
+      {props.layoutBlocks.map((block, index) => {
+        if (block.type === 'fields') {
+          const blockFields = resolveFieldsForSection(props.fields, block.section);
+          if (blockFields.length === 0) {
+            return null;
+          }
+          const content = (
+            <ChannelFormFieldsSection
+              channelName={props.channelName}
+              fields={blockFields}
+              formData={props.formData}
+              jsonDrafts={props.jsonDrafts}
+              setJsonDrafts={props.setJsonDrafts}
+              updateField={props.updateField}
+              uiHints={props.uiHints}
+            />
+          );
+          if (!block.collapsible) {
+            return <div key={`${block.type}-${block.section}-${index}`}>{content}</div>;
+          }
+          return (
+            <details key={`${block.type}-${block.section}-${index}`} className="group rounded-2xl border border-gray-200/80 bg-white">
+              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-5 py-4 text-sm font-medium text-gray-900">
+                <div>
+                  <p>{block.collapsible.title}</p>
+                  {block.collapsible.description ? <p className="mt-1 text-xs font-normal text-gray-500">{block.collapsible.description}</p> : null}
+                </div>
+                <ChevronDown className="h-4 w-4 text-gray-400 transition-transform group-open:rotate-180" />
+              </summary>
+              <div className="space-y-6 border-t border-gray-100 px-5 py-5">{content}</div>
+            </details>
+          );
+        }
+        return block.sectionId === 'weixin-auth' ? (
+          <WeixinChannelAuthSection
+            key={`${block.type}-${block.sectionId}-${index}`}
+            channelConfig={props.channelConfig}
+            formData={props.formData}
+            channelEnabled={props.enabled}
+            disabled={props.disabled}
+          />
+        ) : null;
+      })}
+    </>
+  );
+}
+
+function ChannelFormEditor(props: ChannelFormEditorProps) {
+  const updateChannel = useUpdateChannel();
+  const executeAction = useExecuteConfigAction();
+  const [formData, setFormData] = useState<Record<string, unknown>>(() => ({ ...props.channelConfig }));
+  const [jsonDrafts, setJsonDrafts] = useState<Record<string, string>>(() => buildJsonDrafts(props.channelConfig, props.fields));
+  const [runningActionId, setRunningActionId] = useState<string | null>(null);
+  const channelApplyStatus = buildChannelApplyStatusView(useChannelApplyState(props.channelName));
+  const enabled = typeof formData.enabled === 'boolean' ? formData.enabled : Boolean(props.channelConfig.enabled);
+  const disabled = updateChannel.isPending || Boolean(runningActionId);
+
+  const updateField = (name: string, value: unknown) => setFormData((prev) => ({ ...prev, [name]: value }));
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    const payload: Record<string, unknown> = { ...formData };
+    for (const field of props.fields) {
+      if (field.type === 'password') {
+        const value = payload[field.name];
+        if (typeof value !== 'string' || value.length === 0) {
+          delete payload[field.name];
+        }
+      }
+      if (field.type === 'json') {
+        try {
+          payload[field.name] = (jsonDrafts[field.name] ?? '').trim() ? JSON.parse(jsonDrafts[field.name]) : {};
+        } catch {
+          toast.error(`${t('invalidJson')}: ${field.name}`);
+          return;
+        }
+      }
+    }
+    updateChannel.mutate({ channel: props.channelName, data: payload });
+  };
+
+  const applyActionPatchToForm = (patch?: Record<string, unknown>) => {
+    if (!isRecord(patch?.channels) || !isRecord(patch.channels[props.channelName])) {
+      return;
+    }
+    const channelPatch = patch.channels[props.channelName] as Record<string, unknown>;
+    setFormData((prev) => deepMergeRecords(prev, channelPatch));
+    setJsonDrafts((prev) => {
+      const nextDrafts = { ...prev };
+      let changed = false;
+      for (const field of props.fields) {
+        if (field.type !== 'json' || !Object.prototype.hasOwnProperty.call(channelPatch, field.name)) {
+          continue;
+        }
+        nextDrafts[field.name] = JSON.stringify(channelPatch[field.name] ?? {}, null, 2);
+        changed = true;
+      }
+      return changed ? nextDrafts : prev;
+    });
+  };
+
+  const handleManualAction = async (action: ConfigActionManifest) => {
+    setRunningActionId(action.id);
+    try {
+      const scope = `channels.${props.channelName}`;
+      let nextData = { ...formData };
+      if (action.saveBeforeRun) {
+        nextData = { ...nextData, ...(action.savePatch ?? {}) };
+        setFormData(nextData);
+        await updateChannel.mutateAsync({ channel: props.channelName, data: nextData });
+      }
+      const result = await executeAction.mutateAsync({ actionId: action.id, data: { scope, draftConfig: buildScopeDraft(scope, nextData) } });
+      applyActionPatchToForm(result.patch);
+      result.ok ? toast.success(result.message || t('success')) : toast.error(result.message || t('error'));
+    } catch (error) {
+      toast.error(`${t('error')}: ${error instanceof Error ? error.message : String(error)}`);
+    } finally {
+      setRunningActionId(null);
+    }
+  };
+
+  return (
+    <ConfigSplitDetailPane>
+      <ChannelFormHeader
+        channelName={props.channelName}
+        channelLabel={props.channelLabel}
+        enabled={enabled}
+        tutorialUrl={props.tutorialUrl}
+        channelApplyStatus={channelApplyStatus}
+      />
+
+      <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
+        <ConfigSplitPaneBody className="space-y-6 px-6 py-5">
+          <ChannelFormBlocks
+            channelConfig={props.channelConfig}
+            channelName={props.channelName}
+            enabled={enabled}
+            fields={props.fields}
+            formData={formData}
+            jsonDrafts={jsonDrafts}
+            layoutBlocks={props.layoutBlocks}
+            setJsonDrafts={setJsonDrafts}
+            uiHints={props.uiHints}
+            updateField={updateField}
+            disabled={disabled}
+          />
+        </ConfigSplitPaneBody>
+
+        <ConfigSplitPaneFooter className="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
+          <div className="flex flex-wrap items-center gap-2">
+            {props.actions.filter((action) => action.trigger === 'manual').map((action) => (
+              <Button key={action.id} type="button" onClick={() => void handleManualAction(action)} disabled={disabled} variant="secondary">
+                {runningActionId === action.id ? t('connecting') : action.title}
+              </Button>
+            ))}
+          </div>
+          <Button type="submit" disabled={disabled}>
+            {updateChannel.isPending ? t('saving') : t('save')}
+          </Button>
+        </ConfigSplitPaneFooter>
+      </form>
+    </ConfigSplitDetailPane>
+  );
+}
+
+export function ChannelForm({ channelName }: ChannelFormProps) {
+  const { data: config } = useConfig();
+  const { data: meta } = useConfigMeta();
+  const { data: schema } = useConfigSchema();
+  const channelConfig = channelName ? config?.channels[channelName] ?? null : null;
+  const channelMeta = meta?.channels.find((item) => item.name === channelName);
+  const channelDefinition = useMemo(() => buildChannelFormDefinitions()[channelName || ''], [channelName]);
+
+  if (!channelName || !channelMeta || !channelConfig) {
+    return (
+      <ConfigSplitEmptyPane>
+        <div>
+          <h3 className="text-base font-semibold text-gray-900">{t('channelsSelectTitle')}</h3>
+          <p className="mt-2 text-sm text-gray-500">{t('channelsSelectDescription')}</p>
+        </div>
+      </ConfigSplitEmptyPane>
+    );
+  }
+
+  const fields = channelDefinition?.fields ?? EMPTY_CHANNEL_FIELDS;
+  const layoutBlocks = channelDefinition?.layout ?? DEFAULT_CHANNEL_LAYOUT_BLOCKS;
+  const uiHints = schema?.uiHints;
+  const channelLabel = hintForPath(`channels.${channelName}`, uiHints)?.label ?? channelName;
+  const tutorialUrl = resolveChannelTutorialUrl(channelMeta);
+  const formKey = JSON.stringify({ channelName, channelConfig, jsonFields: fields.filter((field) => field.type === 'json').map((field) => field.name) });
+  const actions = schema?.actions?.filter((action) => action.scope === `channels.${channelName}`) ?? [];
+
+  return (
+    <ChannelFormEditor
+      key={formKey}
+      actions={actions}
+      channelConfig={channelConfig}
+      channelLabel={channelLabel}
+      channelName={channelName}
+      fields={fields}
+      layoutBlocks={layoutBlocks}
+      tutorialUrl={tutorialUrl}
+      uiHints={uiHints}
+    />
+  );
+}

package/src/{components → features/channels/components}/config/weixin-channel-auth-section.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type * as ReactQueryModule from '@tanstack/react-query';
-import { WeixinChannelAuthSection } from './weixin-channel-auth-section';
+import { WeixinChannelAuthSection } from '@/features/channels/components/config/weixin-channel-auth-section';
 
 const mocks = vi.hoisted(() => ({
   startChannelAuthMutateAsync: vi.fn(),
@@ -15,6 +15,9 @@ vi.mock('@tanstack/react-query', async () => {
     ...actual,
     useQueryClient: () => ({
       invalidateQueries: mocks.invalidateQueries
+    }),
+    useQuery: () => ({
+      data: 'data:image/png;base64,weixin-qr'
     })
   };
 });
@@ -23,7 +26,7 @@ vi.mock('qrcode', () => ({
   toDataURL: vi.fn().mockResolvedValue('data:image/png;base64,weixin-qr')
 }));
 
-vi.mock('@/hooks/use-channel-auth', () => ({
+vi.mock('@/features/channels/hooks/use-channel-auth', () => ({
   useStartChannelAuth: () => ({
     mutateAsync: mocks.startChannelAuthMutateAsync,
     isPending: false
@@ -91,7 +94,7 @@ describe('WeixinChannelAuthSection', () => {
     });
   });
 
-  it('shows connected-but-inactive state when account is authorized but channel is disabled', async () => {
+  it('shows connected-but-inactive state when account is authorized but channel is disabled', () => {
     render(
       <WeixinChannelAuthSection
         channelConfig={{

package/src/features/channels/components/config/weixin-channel-auth-section.tsx

@@ -0,0 +1,245 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toDataURL } from 'qrcode';
+import { ExternalLink, Loader2, MessageCircleMore, QrCode } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/shared/components/ui/button';
+import { usePollChannelAuth, useStartChannelAuth } from '@/features/channels/hooks/use-channel-auth';
+import { formatDateTime, t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+import type { ChannelAuthPollResult, ChannelAuthStartResult } from '@/shared/lib/api';
+
+type WeixinChannelAuthSectionProps = {
+  channelConfig: Record<string, unknown>;
+  formData: Record<string, unknown>;
+  channelEnabled: boolean;
+  disabled?: boolean;
+};
+
+function resolveConnectedAccountIds(channelConfig: Record<string, unknown>): string[] {
+  const accounts = channelConfig.accounts;
+  const ids = new Set<string>();
+  if (typeof channelConfig.defaultAccountId === 'string' && channelConfig.defaultAccountId.trim()) {
+    ids.add(channelConfig.defaultAccountId.trim());
+  }
+  if (accounts && typeof accounts === 'object' && !Array.isArray(accounts)) {
+    for (const accountId of Object.keys(accounts)) {
+      const trimmed = accountId.trim();
+      if (trimmed) {
+        ids.add(trimmed);
+      }
+    }
+  }
+  return [...ids];
+}
+
+function resolveBaseUrl(formData: Record<string, unknown>, channelConfig: Record<string, unknown>): string | undefined {
+  if (typeof formData.baseUrl === 'string' && formData.baseUrl.trim()) {
+    return formData.baseUrl.trim();
+  }
+  if (typeof channelConfig.baseUrl === 'string' && channelConfig.baseUrl.trim()) {
+    return channelConfig.baseUrl.trim();
+  }
+  return undefined;
+}
+
+function useWeixinQrDataUrl(qrCodeUrl: string | undefined) {
+  return useQuery({
+    queryKey: ['weixin-channel-qr', qrCodeUrl],
+    enabled: Boolean(qrCodeUrl),
+    queryFn: () => toDataURL(qrCodeUrl!, { errorCorrectionLevel: 'M', margin: 1, width: 480 })
+  }).data ?? null;
+}
+
+function WeixinAuthSummary(props: {
+  activeSession: ChannelAuthStartResult | null;
+  baseUrl?: string;
+  channelEnabled: boolean;
+  connectButtonLabel: string;
+  connectedAccountIds: string[];
+  disabled: boolean;
+  handleStartAuth: () => Promise<void>;
+  hasConnectedAccount: boolean;
+  primaryAccountId?: string;
+  statusLabel: string;
+}) {
+  return (
+    <div className="space-y-3">
+      <div className="inline-flex items-center gap-2 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-primary shadow-sm">
+        <QrCode className="h-3.5 w-3.5" />
+        {t('weixinAuthTitle')}
+      </div>
+      <div>
+        <h4 className="text-base font-semibold text-gray-900">{t('weixinAuthDescription')}</h4>
+        <p className="mt-1 text-sm text-gray-600">{t('weixinAuthHint')}</p>
+      </div>
+      <div
+        className={cn(
+          'inline-flex w-fit items-center gap-2 rounded-full px-3 py-1 text-xs font-medium',
+          props.activeSession ? 'bg-amber-50 text-amber-700' : props.hasConnectedAccount ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-600'
+        )}
+      >
+        {props.activeSession ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <MessageCircleMore className="h-3.5 w-3.5" />}
+        {props.statusLabel}
+      </div>
+      <div className="space-y-1 text-sm text-gray-600">
+        <p>{props.channelEnabled || !props.hasConnectedAccount ? t('weixinAuthCapabilityHint') : t('weixinAuthDisabledHint')}</p>
+        {props.primaryAccountId ? <p>{t('weixinAuthPrimaryAccount')}: <span className="font-mono text-xs text-gray-900">{props.primaryAccountId}</span></p> : null}
+        {props.connectedAccountIds.length > 1 ? <p>{t('weixinAuthConnectedAccounts')}: <span className="font-mono text-xs text-gray-900">{props.connectedAccountIds.join(', ')}</span></p> : null}
+        {props.baseUrl ? <p>{t('weixinAuthBaseUrl')}: <span className="font-mono text-xs text-gray-900">{props.baseUrl}</span></p> : null}
+      </div>
+      <Button type="button" onClick={() => void props.handleStartAuth()} disabled={props.disabled} className="rounded-xl">
+        {props.connectButtonLabel}
+      </Button>
+    </div>
+  );
+}
+
+function WeixinAuthQrPanel(props: {
+  activeSession: ChannelAuthStartResult | null;
+  authMessage?: string;
+  qrDataUrl: string | null;
+}) {
+  return (
+    <div className="w-full max-w-sm rounded-2xl border border-dashed border-primary/25 bg-white/85 p-4 shadow-sm">
+      {props.activeSession ? (
+        <div className="space-y-3">
+          <div className="overflow-hidden rounded-2xl border border-gray-100 bg-white p-3">
+            {props.qrDataUrl ? (
+              <img src={props.qrDataUrl} alt={t('weixinAuthQrAlt')} className="mx-auto aspect-square w-full max-w-[240px] object-contain" />
+            ) : (
+              <div className="flex aspect-square w-full items-center justify-center rounded-xl bg-gray-50 text-gray-500">
+                <div className="flex flex-col items-center gap-2 text-center">
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                  <p className="text-xs">{t('weixinAuthStarting')}</p>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="space-y-1 text-xs text-gray-500">
+            <p>{props.authMessage || props.activeSession.note || t('weixinAuthScanPrompt')}</p>
+            <p>{t('weixinAuthExpiresAt')}: {formatDateTime(props.activeSession.expiresAt)}</p>
+          </div>
+          <a href={props.activeSession.qrCodeUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
+            <ExternalLink className="h-3.5 w-3.5" />
+            {t('weixinAuthOpenQr')}
+          </a>
+        </div>
+      ) : (
+        <div className="flex min-h-[280px] flex-col items-center justify-center rounded-2xl bg-gray-50/80 px-6 text-center">
+          <QrCode className="h-9 w-9 text-gray-300" />
+          <p className="mt-3 text-sm font-medium text-gray-700">{t('weixinAuthReadyTitle')}</p>
+          <p className="mt-1 text-xs leading-5 text-gray-500">{t('weixinAuthReadyDescription')}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function WeixinChannelAuthSection(props: WeixinChannelAuthSectionProps) {
+  const queryClient = useQueryClient();
+  const startChannelAuth = useStartChannelAuth();
+  const pollChannelAuth = usePollChannelAuth();
+  const [activeSession, setActiveSession] = useState<ChannelAuthStartResult | null>(null);
+  const [authState, setAuthState] = useState<ChannelAuthPollResult | null>(null);
+  const [sessionStartedWhileConnected, setSessionStartedWhileConnected] = useState(false);
+  const connectedAccountIds = useMemo(() => resolveConnectedAccountIds(props.channelConfig), [props.channelConfig]);
+  const primaryAccountId = connectedAccountIds[0];
+  const baseUrl = resolveBaseUrl(props.formData, props.channelConfig);
+  const hasConnectedAccount = connectedAccountIds.length > 0;
+  const effectiveActiveSession = hasConnectedAccount && !sessionStartedWhileConnected ? null : activeSession;
+  const qrDataUrl = useWeixinQrDataUrl(effectiveActiveSession?.qrCodeUrl);
+
+  useEffect(() => {
+    if (!effectiveActiveSession) {
+      return;
+    }
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const runPoll = async () => {
+      try {
+        const result = await pollChannelAuth.mutateAsync({ channel: 'weixin', data: { sessionId: effectiveActiveSession.sessionId } });
+        if (cancelled) {
+          return;
+        }
+        setAuthState(result);
+        if (result.status === 'authorized') {
+          await queryClient.invalidateQueries({ queryKey: ['config'] });
+          await queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+          toast.success(result.message || t('weixinAuthAuthorized'));
+          setActiveSession(null);
+          return;
+        }
+        if (result.status === 'expired' || result.status === 'error') {
+          toast.error(result.message || t('weixinAuthRetryRequired'));
+          setActiveSession(null);
+          return;
+        }
+        timer = setTimeout(runPoll, result.nextPollMs ?? effectiveActiveSession.intervalMs);
+      } catch (error) {
+        if (!cancelled) {
+          toast.error(`${t('error')}: ${error instanceof Error ? error.message : String(error)}`);
+          setActiveSession(null);
+        }
+      }
+    };
+    timer = setTimeout(runPoll, effectiveActiveSession.intervalMs);
+    return () => {
+      cancelled = true;
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [effectiveActiveSession, pollChannelAuth, queryClient]);
+
+  const handleStartAuth = async () => {
+    try {
+      const result = await startChannelAuth.mutateAsync({
+        channel: 'weixin',
+        data: {
+          baseUrl,
+          accountId: typeof props.formData.defaultAccountId === 'string' && props.formData.defaultAccountId.trim() ? props.formData.defaultAccountId.trim() : undefined
+        }
+      });
+      setSessionStartedWhileConnected(hasConnectedAccount);
+      setActiveSession(result);
+      setAuthState({ channel: 'weixin', status: 'pending', message: result.note, nextPollMs: result.intervalMs });
+    } catch (error) {
+      toast.error(`${t('error')}: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
+  const statusLabel = effectiveActiveSession
+    ? authState?.status === 'scanned' ? t('weixinAuthScanned') : t('weixinAuthWaiting')
+    : hasConnectedAccount
+      ? props.channelEnabled ? t('weixinAuthAuthorized') : t('weixinAuthConnectedDisabled')
+      : t('weixinAuthNotConnected');
+  const connectButtonLabel = startChannelAuth.isPending
+    ? t('weixinAuthStarting')
+    : effectiveActiveSession
+      ? t('weixinAuthWaiting')
+      : hasConnectedAccount
+        ? t('weixinAuthReconnect')
+        : t('weixinAuthConnect');
+  const authMessage = hasConnectedAccount ? t('weixinAuthAuthorized') : authState?.message;
+
+  return (
+    <section className="rounded-2xl border border-primary/20 bg-gradient-to-br from-primary-50/70 via-white to-emerald-50/60 p-5">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <WeixinAuthSummary
+          activeSession={effectiveActiveSession}
+          baseUrl={baseUrl}
+          channelEnabled={props.channelEnabled}
+          connectButtonLabel={connectButtonLabel}
+          connectedAccountIds={connectedAccountIds}
+          disabled={props.disabled || startChannelAuth.isPending || Boolean(effectiveActiveSession)}
+          handleStartAuth={handleStartAuth}
+          hasConnectedAccount={hasConnectedAccount}
+          primaryAccountId={primaryAccountId}
+          statusLabel={statusLabel}
+        />
+        <WeixinAuthQrPanel activeSession={effectiveActiveSession} authMessage={authMessage} qrDataUrl={qrDataUrl} />
+      </div>
+    </section>
+  );
+}

package/src/{hooks → features/channels/hooks}/use-channel-auth.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { pollChannelAuth, startChannelAuth } from '@/api/channel-auth';
+import { pollChannelAuth, startChannelAuth } from '@/shared/lib/api';
 
 export function useStartChannelAuth() {
   return useMutation({

package/src/features/channels/index.ts

@@ -0,0 +1,5 @@
+export { ChannelForm } from './components/config/channel-form';
+export { ChannelFormFieldsSection } from './components/channel-form-fields-section';
+export { WeixinChannelAuthSection } from './components/config/weixin-channel-auth-section';
+export { ChannelsList } from './pages/channels-list-page';
+export { buildChannelFields, buildChannelFormDefinitions, type ChannelField, type ChannelFieldType, type ChannelFormBlock, type ChannelFormDefinition, type ChannelFormFieldSection, type ChannelOption } from './utils/channel-form-fields.utils';