style: 修复图标 样式 #46

Fixes https://github.com/Wxw-Gu/TraceMemo/issues/46

tests/component/account-database-controls.test.tsx

@@ -1,7 +1,10 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
+import { AccountSummary } from '../../src/renderer/src/components/account/AccountSummary'
 import { AccountOverview } from '../../src/renderer/src/features/settings/account-database/AccountOverview'
+import { ConnectionHealthSection } from '../../src/renderer/src/features/settings/account-database/ConnectionHealthSection'
+import type { ConnectionDiagnostic } from '../../src/renderer/src/features/settings/account-database/types'
 import { TooltipProvider } from '../../src/renderer/src/components/ui'
 
 describe('account database controls', () => {
@@ -61,4 +64,54 @@ describe('account database controls', () => {
     expect(screen.getByRole('button', { name: '打开账号目录' })).toBeDisabled()
     expect(screen.getByRole('button', { name: '复制账号目录' })).toBeDisabled()
   })
+
+  it('renders connection states with SVG glyphs and keeps checking accessible', () => {
+    const diagnostics: ConnectionDiagnostic[] = [
+      { id: 'db-key', label: '数据库密钥', status: 'success', result: '已用于当前连接' },
+      { id: 'contacts', label: '联系人索引', status: 'warning', result: '索引待更新' },
+      { id: 'messages', label: '消息数据库', status: 'error', result: '读取失败' },
+      { id: 'identity', label: '账号身份', status: 'idle', result: '尚未检测' },
+      { id: 'image-key', label: '图片解密密钥', status: 'unavailable', result: '未配置' }
+    ]
+    const { container, rerender } = render(<ConnectionHealthSection diagnostics={diagnostics} />)
+
+    const icons = container.querySelectorAll('.settings-diagnostic-icon:not(.checking)')
+    expect(icons).toHaveLength(diagnostics.length)
+    icons.forEach((icon) => {
+      expect(icon).toHaveAttribute('aria-hidden', 'true')
+      expect(icon.querySelector('svg')).toHaveAttribute('viewBox', '0 0 24 24')
+    })
+    expect(container.textContent).not.toMatch(/[✓!×—]/)
+
+    rerender(
+      <ConnectionHealthSection
+        diagnostics={[{ id: 'db-key', label: '数据库密钥', status: 'checking', result: '检测中' }]}
+      />
+    )
+    expect(screen.getByLabelText('检测中')).toHaveClass('checking')
+    expect(container.querySelector('.checking svg')).toBeNull()
+  })
+
+  it('keeps the account settings button clickable with a centered-viewBox SVG', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    render(
+      <AccountSummary
+        selfInfo={{
+          wxid: 'wxid_fixture',
+          nickname: '测试账号',
+          accountRoot: '/fixture/account'
+        }}
+        dbReady
+        onClick={onClick}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: '设置' })
+    expect(button.querySelector('svg')).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(button.querySelector('svg circle')).toHaveAttribute('cx', '12')
+    expect(button.querySelector('svg circle')).toHaveAttribute('cy', '12')
+    await user.click(button)
+    expect(onClick).toHaveBeenCalledOnce()
+  })
 })