@nextclaw/ui 0.9.16 → 0.10.0

package/src/components/config/ChannelsList.test.tsx

@@ -53,6 +53,10 @@ const mocks = vi.hoisted(() => ({
   }
 }));
 
+vi.mock('qrcode', () => ({
+  toDataURL: vi.fn().mockResolvedValue('data:image/png;base64,weixin-qr')
+}));
+
 vi.mock('@tanstack/react-query', async () => {
   const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
   return {
@@ -129,6 +133,10 @@ describe('ChannelsList', () => {
         })
       });
     });
+
+    await waitFor(() => {
+      expect(screen.getByAltText('Weixin login QR code').getAttribute('src')).toBe('data:image/png;base64,weixin-qr');
+    });
   });
 
   it('saves weixin advanced settings from the advanced section', async () => {

package/src/components/config/channel-form-fields.ts

@@ -70,7 +70,15 @@ export function buildChannelFields(): Record<string, ChannelField[]> {
       { name: 'appSecret', type: 'password', label: t('appSecret') },
       { name: 'encryptKey', type: 'password', label: t('encryptKey') },
       { name: 'verificationToken', type: 'password', label: t('verificationToken') },
-      { name: 'allowFrom', type: 'tags', label: t('allowFrom') }
+      { name: 'domain', type: 'text', label: 'Domain' },
+      { name: 'allowFrom', type: 'tags', label: t('allowFrom') },
+      { name: 'dmPolicy', type: 'select', label: t('dmPolicy'), options: DM_POLICY_OPTIONS },
+      { name: 'groupPolicy', type: 'select', label: t('groupPolicy'), options: GROUP_POLICY_OPTIONS },
+      { name: 'groupAllowFrom', type: 'tags', label: t('groupAllowFrom') },
+      { name: 'requireMention', type: 'boolean', label: t('requireMention') },
+      { name: 'mentionPatterns', type: 'tags', label: t('mentionPatterns') },
+      { name: 'groups', type: 'json', label: t('groupRulesJson') },
+      { name: 'accounts', type: 'json', label: t('accountsJson') }
     ],
     dingtalk: [
       { name: 'enabled', type: 'boolean', label: t('enabled') },

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

@@ -0,0 +1,90 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { WeixinChannelAuthSection } from './weixin-channel-auth-section';
+
+const mocks = vi.hoisted(() => ({
+  startChannelAuthMutateAsync: vi.fn(),
+  pollChannelAuthMutateAsync: vi.fn(),
+  invalidateQueries: vi.fn().mockResolvedValue(undefined)
+}));
+
+vi.mock('@tanstack/react-query', async () => {
+  const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+  return {
+    ...actual,
+    useQueryClient: () => ({
+      invalidateQueries: mocks.invalidateQueries
+    })
+  };
+});
+
+vi.mock('qrcode', () => ({
+  toDataURL: vi.fn().mockResolvedValue('data:image/png;base64,weixin-qr')
+}));
+
+vi.mock('@/hooks/use-channel-auth', () => ({
+  useStartChannelAuth: () => ({
+    mutateAsync: mocks.startChannelAuthMutateAsync,
+    isPending: false
+  }),
+  usePollChannelAuth: () => ({
+    mutateAsync: mocks.pollChannelAuthMutateAsync,
+    isPending: false
+  })
+}));
+
+describe('WeixinChannelAuthSection', () => {
+  beforeEach(() => {
+    mocks.startChannelAuthMutateAsync.mockReset();
+    mocks.pollChannelAuthMutateAsync.mockReset();
+    mocks.invalidateQueries.mockClear();
+  });
+
+  it('switches to connected state when channel config becomes authorized during an active session', async () => {
+    const user = userEvent.setup();
+    mocks.startChannelAuthMutateAsync.mockResolvedValue({
+      channel: 'weixin',
+      kind: 'qr_code',
+      sessionId: 'session-1',
+      qrCode: 'qr-token',
+      qrCodeUrl: 'https://example.com/weixin-qr.png',
+      expiresAt: '2026-03-24T10:00:00.000Z',
+      intervalMs: 60_000,
+      note: '请扫码'
+    });
+    mocks.pollChannelAuthMutateAsync.mockImplementation(() => new Promise(() => {}));
+
+    const { rerender } = render(
+      <WeixinChannelAuthSection
+        channelConfig={{ enabled: false }}
+        formData={{}}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Scan QR to connect Weixin' }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Waiting for scan confirmation' })).toBeTruthy();
+    });
+
+    rerender(
+      <WeixinChannelAuthSection
+        channelConfig={{
+          enabled: true,
+          defaultAccountId: 'bot-1@im.bot',
+          accounts: {
+            'bot-1@im.bot': {
+              enabled: true
+            }
+          }
+        }}
+        formData={{}}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Connected')).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Reconnect with QR' })).toBeTruthy();
+    });
+  });
+});

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

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { toDataURL } from 'qrcode';
 import { Button } from '@/components/ui/button';
 import { formatDateTime, t } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
@@ -51,12 +52,61 @@ export function WeixinChannelAuthSection({
   const pollChannelAuth = usePollChannelAuth();
   const [activeSession, setActiveSession] = useState<ChannelAuthStartResult | null>(null);
   const [authState, setAuthState] = useState<ChannelAuthPollResult | null>(null);
+  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
 
   const connectedAccountIds = useMemo(() => resolveConnectedAccountIds(channelConfig), [channelConfig]);
   const primaryAccountId = connectedAccountIds[0];
   const baseUrl = resolveBaseUrl(formData, channelConfig);
   const hasConnectedAccount = connectedAccountIds.length > 0;
 
+  useEffect(() => {
+    if (!hasConnectedAccount) {
+      return;
+    }
+
+    setActiveSession(null);
+    setAuthState((prev) => {
+      if (prev?.status === 'authorized') {
+        return prev;
+      }
+      return {
+        channel: 'weixin',
+        status: 'authorized',
+        message: t('weixinAuthAuthorized'),
+        accountId: primaryAccountId ?? null
+      };
+    });
+  }, [hasConnectedAccount, primaryAccountId]);
+
+  useEffect(() => {
+    if (!activeSession) {
+      setQrDataUrl(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    void toDataURL(activeSession.qrCodeUrl, {
+      errorCorrectionLevel: 'M',
+      margin: 1,
+      width: 480
+    })
+      .then((dataUrl: string) => {
+        if (!cancelled) {
+          setQrDataUrl(dataUrl);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setQrDataUrl(null);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeSession]);
+
   useEffect(() => {
     if (!activeSession) {
       return;
@@ -210,7 +260,16 @@ export function WeixinChannelAuthSection({
           {activeSession ? (
             <div className="space-y-3">
               <div className="overflow-hidden rounded-2xl border border-gray-100 bg-white p-3">
-                <img src={activeSession.qrCodeUrl} alt={t('weixinAuthQrAlt')} className="mx-auto aspect-square w-full max-w-[240px] object-contain" />
+                {qrDataUrl ? (
+                  <img src={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>{authState?.message || activeSession.note || t('weixinAuthScanPrompt')}</p>

package/src/components/layout/Sidebar.tsx

@@ -122,147 +122,155 @@ export function Sidebar({ mode }: SidebarProps) {
   const navItems = mode === 'main' ? mainNavItems : settingsNavItems;
 
   return (
-    <aside className="w-[240px] shrink-0 flex flex-col h-full py-6 px-4 bg-secondary">
+    <aside className="w-[240px] shrink-0 flex h-full min-h-0 flex-col overflow-hidden bg-secondary px-4 py-6">
       {mode === 'settings' ? (
-        <div className="px-2 mb-6">
-          <NavLink
-            to="/chat"
-            className="group inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900"
+        <div className="shrink-0 px-2 pb-3">
+          <div
+            className="flex items-center gap-2 px-1 py-1"
+            data-testid="settings-sidebar-header"
           >
-            <ArrowLeft className="h-3.5 w-3.5 text-gray-500 group-hover:text-gray-800" />
-            <span>{t('backToMain')}</span>
-          </NavLink>
-          <div className="mt-5 px-1">
-            <div className="flex items-center gap-2.5">
-              <Settings className="h-5 w-5 text-gray-700" />
-              <h1 className="text-[28px] leading-none font-semibold tracking-[-0.02em] text-gray-900">{t('settings')}</h1>
-            </div>
+            <NavLink
+              to="/chat"
+              className="group inline-flex min-w-0 items-center gap-1.5 rounded-lg px-1 py-1 text-[12px] font-medium text-gray-500 transition-colors hover:text-gray-900"
+            >
+              <ArrowLeft className="h-3.5 w-3.5 shrink-0 text-gray-400 group-hover:text-gray-700" />
+              <span className="truncate">{t('backToMain')}</span>
+            </NavLink>
+            <span className="h-4 w-px shrink-0 bg-[#dddfe6]" aria-hidden="true" />
+            <h1 className="truncate text-[15px] font-semibold tracking-[-0.01em] text-gray-800">{t('settings')}</h1>
           </div>
         </div>
       ) : (
-        <div className="px-2 mb-8">
+        <div className="shrink-0 px-2 pb-8">
           <BrandHeader className="flex items-center gap-2.5 cursor-pointer" />
         </div>
       )}
 
-      {/* Navigation */}
-      <nav className="flex-1 flex flex-col">
-        <ul className="space-y-1">
-          {navItems.map((item) => {
-            const Icon = item.icon;
+      <div className="flex min-h-0 flex-1 flex-col">
+        {/* Navigation */}
+        <nav className="custom-scrollbar min-h-0 flex-1 overflow-y-auto pr-1">
+          <ul className="space-y-1 pb-4">
+            {navItems.map((item) => {
+              const Icon = item.icon;
 
-            return (
-              <li key={item.target}>
-                <NavLink
-                  to={item.target}
-                  className={({ isActive }) => cn(
-                    'group w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base',
-                    isActive
-                      ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                      : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
-                  )}
-                >
-                  {({ isActive }) => (
-                    <>
-                      <Icon className={cn(
-                        'h-[17px] w-[17px] transition-colors',
-                        isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
-                      )} />
-                      <span className="flex-1 text-left">{item.label}</span>
-                    </>
-                  )}
-                </NavLink>
-              </li>
+              return (
+                <li key={item.target}>
+                  <NavLink
+                    to={item.target}
+                    className={({ isActive }) =>
+                      cn(
+                        'group w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium transition-all duration-base',
+                        isActive
+                          ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
+                          : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
+                      )
+                    }
+                  >
+                    {({ isActive }) => (
+                      <>
+                        <Icon
+                          className={cn(
+                            'h-[17px] w-[17px] transition-colors',
+                            isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
+                          )}
+                        />
+                        <span className="flex-1 text-left">{item.label}</span>
+                      </>
+                    )}
+                  </NavLink>
+                </li>
               );
             })}
           </ul>
-      </nav>
+        </nav>
 
-      {/* Help Button */}
-      <div className="pt-3 border-t border-[#dde0ea] mt-3">
-        {mode === 'settings' ? (
-          <button
-            onClick={() => presenter.accountManager.openAccountPanel()}
-            className="mb-2 w-full rounded-xl px-3 py-2.5 text-left transition-all duration-base text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900"
-          >
-            <div className="flex items-start gap-3">
-              <KeyRound className={cn('mt-0.5 h-[17px] w-[17px]', accountConnected ? 'text-emerald-600' : 'text-gray-400')} />
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center justify-between gap-3">
-                  <p className="truncate text-[14px] font-medium text-gray-900">
-                    {accountEmail || t('remoteAccountEntryManage')}
+        {/* Footer actions stay reachable while the nav scrolls independently. */}
+        <div className="mt-3 shrink-0 border-t border-[#dde0ea] bg-secondary pt-3">
+          {mode === 'settings' ? (
+            <button
+              onClick={() => presenter.accountManager.openAccountPanel()}
+              className="mb-2 w-full rounded-xl px-3 py-2.5 text-left text-gray-600 transition-all duration-base hover:bg-[#e4e7ef] hover:text-gray-900"
+              data-testid="settings-sidebar-account-entry"
+            >
+              <div className="flex items-start gap-3">
+                <KeyRound className="mt-0.5 h-[17px] w-[17px] shrink-0 text-gray-400" />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-[14px] font-medium text-gray-600">
+                    {t('remoteAccountEntryManage')}
+                  </p>
+                  <p className="mt-1 truncate text-xs text-gray-500">
+                    {accountConnected ? accountEmail || t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
                   </p>
                 </div>
-                <p className="mt-1 truncate text-xs text-gray-500">
-                  {accountConnected ? t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
-                </p>
               </div>
+            </button>
+          ) : null}
+          {mode === 'main' && (
+            <div className="mb-2">
+              <NavLink
+                to="/settings"
+                className={({ isActive }) =>
+                  cn(
+                    'group w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium transition-all duration-base',
+                    isActive
+                      ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
+                      : 'text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900'
+                  )
+                }
+              >
+                {({ isActive }) => (
+                  <>
+                    <Settings className={cn('h-[17px] w-[17px] transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
+                    <span className="flex-1 text-left">{t('settings')}</span>
+                  </>
+                )}
+              </NavLink>
             </div>
-          </button>
-        ) : null}
-        {mode === 'main' && (
+          )}
           <div className="mb-2">
-            <NavLink
-              to="/settings"
-              className={({ isActive }) => cn(
-                'group w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base',
-                isActive
-                  ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                  : 'text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900'
-              )}
-            >
-              {({ isActive }) => (
-                <>
-                  <Settings className={cn('h-[17px] w-[17px] transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
-                  <span className="flex-1 text-left">{t('settings')}</span>
-                </>
-              )}
-            </NavLink>
+            <Select value={theme} onValueChange={(value) => handleThemeSwitch(value as UiTheme)}>
+              <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent px-3 py-2.5 text-[14px] font-medium text-gray-600 shadow-none hover:bg-[#e4e7ef] focus:ring-0">
+                <div className="flex min-w-0 items-center gap-3">
+                  <Palette className="h-[17px] w-[17px] text-gray-400" />
+                  <span className="text-left">{t('theme')}</span>
+                </div>
+                <span className="ml-auto text-xs text-gray-500">{currentThemeLabel}</span>
+              </SelectTrigger>
+              <SelectContent>
+                {THEME_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value} className="text-xs">
+                    {t(option.labelKey)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-        )}
-        <div className="mb-2">
-          <Select value={theme} onValueChange={(value) => handleThemeSwitch(value as UiTheme)}>
-            <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2.5 text-[14px] font-medium text-gray-600 hover:bg-[#e4e7ef] focus:ring-0">
-              <div className="flex items-center gap-3 min-w-0">
-                <Palette className="h-[17px] w-[17px] text-gray-400" />
-                <span className="text-left">{t('theme')}</span>
-              </div>
-              <span className="ml-auto text-xs text-gray-500">{currentThemeLabel}</span>
-            </SelectTrigger>
-            <SelectContent>
-              {THEME_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value} className="text-xs">
-                  {t(option.labelKey)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="mb-2">
-          <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
-            <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2.5 text-[14px] font-medium text-gray-600 hover:bg-[#e4e7ef] focus:ring-0">
-              <div className="flex items-center gap-3 min-w-0">
-                <Languages className="h-[17px] w-[17px] text-gray-400" />
-                <span className="text-left">{t('language')}</span>
-              </div>
-              <span className="ml-auto text-xs text-gray-500">{currentLanguageLabel}</span>
-            </SelectTrigger>
-            <SelectContent>
-              {LANGUAGE_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value} className="text-xs">
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="mb-2">
+            <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
+              <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent px-3 py-2.5 text-[14px] font-medium text-gray-600 shadow-none hover:bg-[#e4e7ef] focus:ring-0">
+                <div className="flex min-w-0 items-center gap-3">
+                  <Languages className="h-[17px] w-[17px] text-gray-400" />
+                  <span className="text-left">{t('language')}</span>
+                </div>
+                <span className="ml-auto text-xs text-gray-500">{currentLanguageLabel}</span>
+              </SelectTrigger>
+              <SelectContent>
+                {LANGUAGE_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value} className="text-xs">
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <button
+            onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
+            className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium text-gray-600 transition-all duration-base hover:bg-[#e4e7ef] hover:text-gray-800"
+          >
+            <BookOpen className="h-[17px] w-[17px] text-gray-400" />
+            <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
+          </button>
         </div>
-        <button
-          onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-          className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-800"
-        >
-          <BookOpen className="h-[17px] w-[17px] text-gray-400" />
-          <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
-        </button>
       </div>
     </aside>
   );

package/src/components/layout/sidebar.layout.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { Sidebar } from '@/components/layout/Sidebar';
+
+const mocks = vi.hoisted(() => ({
+  openAccountPanel: vi.fn(),
+  docOpen: vi.fn(),
+  remoteStatus: {
+    data: {
+      account: {
+        loggedIn: true,
+        email: 'user@example.com'
+      }
+    }
+  }
+}));
+
+vi.mock('@/components/doc-browser', () => ({
+  useDocBrowser: () => ({
+    open: mocks.docOpen
+  })
+}));
+
+vi.mock('@/presenter/app-presenter-context', () => ({
+  useAppPresenter: () => ({
+    accountManager: {
+      openAccountPanel: mocks.openAccountPanel
+    }
+  })
+}));
+
+vi.mock('@/hooks/useRemoteAccess', () => ({
+  useRemoteStatus: () => mocks.remoteStatus
+}));
+
+vi.mock('@/components/providers/I18nProvider', () => ({
+  useI18n: () => ({
+    language: 'en',
+    setLanguage: vi.fn()
+  })
+}));
+
+vi.mock('@/components/providers/ThemeProvider', () => ({
+  useTheme: () => ({
+    theme: 'warm',
+    setTheme: vi.fn()
+  })
+}));
+
+describe('Sidebar', () => {
+  it('keeps the settings sidebar bounded and lets the navigation scroll independently', () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={['/model']}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>
+    );
+
+    const aside = container.querySelector('aside');
+    const nav = container.querySelector('nav');
+
+    expect(aside?.className).toContain('min-h-0');
+    expect(aside?.className).toContain('overflow-hidden');
+    expect(nav?.className).toContain('flex-1');
+    expect(nav?.className).toContain('min-h-0');
+    expect(nav?.className).toContain('overflow-y-auto');
+  });
+
+  it('uses a compact single-row header for settings mode', () => {
+    render(
+      <MemoryRouter initialEntries={['/model']}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>
+    );
+
+    const header = screen.getByTestId('settings-sidebar-header');
+
+    expect(header).toBeTruthy();
+    expect(screen.getByRole('heading', { name: 'Settings' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: 'Back to Main' })).toBeTruthy();
+    expect(header.className).not.toContain('bg-white');
+    expect(header.className).not.toContain('rounded-2xl');
+  });
+
+  it('renders the account entry with the same neutral visual tone as other footer items', () => {
+    render(
+      <MemoryRouter initialEntries={['/model']}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>
+    );
+
+    const accountEntry = screen.getByTestId('settings-sidebar-account-entry');
+
+    expect(accountEntry).toBeTruthy();
+    expect(screen.getByText('Account and Device Entry')).toBeTruthy();
+    expect(screen.getByText('user@example.com')).toBeTruthy();
+    expect(accountEntry.className).toContain('text-gray-600');
+  });
+});

package/src/lib/i18n.channels.ts

@@ -29,6 +29,7 @@ export const CHANNEL_LABELS: Record<string, { zh: string; en: string }> = {
   botToken: { zh: 'Bot Token', en: 'Bot Token' },
   appToken: { zh: 'App Token', en: 'App Token' },
   appId: { zh: 'App ID', en: 'App ID' },
+  domain: { zh: '域名', en: 'Domain' },
   corpId: { zh: '企业 ID', en: 'Corp ID' },
   agentId: { zh: '应用 Agent ID', en: 'Agent ID' },
   appSecret: { zh: 'App Secret', en: 'App Secret' },

package/src/qrcode.d.ts

@@ -0,0 +1,10 @@
+declare module 'qrcode' {
+  export function toDataURL(
+    text: string,
+    options?: {
+      errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+      margin?: number;
+      width?: number;
+    }
+  ): Promise<string>;
+}