Merge pull request #114 from XuYouo/main

fix(ui): 优化侧边卡片设置页图标与布局

tests/settings-nav-icon.spec.ts

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+/** Settings-navigation icon marker tests (including delayed dialog mount). */
+import { afterEach, describe, expect, it } from 'vitest'
+import { registerSettingsNavIcon, SETTINGS_NAV_MARKER } from '../src/client/settings-nav-icon.ts'
+
+function navButton(label: string): HTMLButtonElement {
+  const button = document.createElement('button')
+  button.innerHTML = `<svg data-fallback="gear"></svg><span>${label}</span>`
+  return button
+}
+
+function dialogWith(...buttons: HTMLButtonElement[]): HTMLElement {
+  const dialog = document.createElement('div')
+  dialog.setAttribute('role', 'dialog')
+  const nav = document.createElement('nav')
+  nav.append(...buttons)
+  dialog.append(nav)
+  return dialog
+}
+
+async function mutationTick(): Promise<void> {
+  await new Promise<void>(resolve => { setTimeout(resolve, 0) })
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('registerSettingsNavIcon', () => {
+  it('marks only the matching settings row and preserves the shell icon DOM', () => {
+    const general = navButton('General')
+    const sideCard = navButton('Side card')
+    document.body.append(dialogWith(general, sideCard))
+
+    const dispose = registerSettingsNavIcon(() => 'Side card')
+
+    expect(general.hasAttribute(SETTINGS_NAV_MARKER)).toBe(false)
+    expect(sideCard.hasAttribute(SETTINGS_NAV_MARKER)).toBe(true)
+    expect(sideCard.querySelector('[data-fallback="gear"]')).not.toBeNull()
+    dispose()
+    expect(sideCard.hasAttribute(SETTINGS_NAV_MARKER)).toBe(false)
+  })
+
+  it('marks a dialog mounted later and follows a localized label change', async () => {
+    let label = 'Side card'
+    const dispose = registerSettingsNavIcon(() => label)
+    const english = navButton('Side card')
+    const chinese = navButton('侧边卡片')
+    const dialog = dialogWith(english, chinese)
+    document.body.append(dialog)
+    await mutationTick()
+
+    expect(english.hasAttribute(SETTINGS_NAV_MARKER)).toBe(true)
+    expect(chinese.hasAttribute(SETTINGS_NAV_MARKER)).toBe(false)
+
+    label = '侧边卡片'
+    chinese.querySelector('span')!.textContent = '侧边卡片 '
+    await mutationTick()
+    expect(english.hasAttribute(SETTINGS_NAV_MARKER)).toBe(false)
+    expect(chinese.hasAttribute(SETTINGS_NAV_MARKER)).toBe(true)
+
+    dispose()
+  })
+})