refactor: 使用 Naive UI 重构后台布局与黑白双主题

src/testing/naive.ts

@@ -0,0 +1,21 @@
+import { flushPromises, type VueWrapper } from '@vue/test-utils'
+import { NSelect } from 'naive-ui'
+
+/** 展开真实折叠面板后再测试内部操作，避免对不可见控件进行断言。 */
+export async function expandSections() {
+    for (let depth = 0; depth < 4; depth++) {
+        const headers = document.querySelectorAll<HTMLElement>(
+            '.n-collapse-item:not(.n-collapse-item--active) > .n-collapse-item__header .n-collapse-item__header-main'
+        )
+        if (!headers.length) return
+        headers.forEach(header => header.click())
+        await flushPromises()
+    }
+}
+
+/** Naive Select 没有原生 select，通过公开事件模拟选项变化并保留业务守卫。 */
+export function selectControl(wrapper: VueWrapper, attribute: string, value: string) {
+    const select = wrapper.findAllComponents(NSelect).find(item => item.attributes(attribute) === value)
+    if (!select) throw new Error('找不到选择框：' + value)
+    return select
+}