feat: 灵犀 Studio Web UI 定制版

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/client/markdown-rendering-mermaid-import-timeout.test.ts

@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+
+vi.mock('mermaid', () => new Promise(() => {}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock('naive-ui', () => ({
+  NDrawer: {
+    props: ['show'],
+    template: '<div v-if="show"><slot /></div>',
+  },
+  NDrawerContent: {
+    template: '<section><slot /></section>',
+  },
+  NSpin: {
+    template: '<div><slot /></div>',
+  },
+  useMessage: () => ({
+    error: vi.fn(),
+    success: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+  }),
+}))
+
+import MarkdownRenderer from '@/components/hermes/chat/MarkdownRenderer.vue'
+
+async function flushMermaidRender(): Promise<void> {
+  for (let i = 0; i < 16; i += 1) {
+    await nextTick()
+    await Promise.resolve()
+  }
+}
+
+describe('MarkdownRenderer Mermaid import timeout', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('falls back to copyable code when the mermaid dynamic import never settles', async () => {
+    vi.useFakeTimers()
+
+    const wrapper = mount(MarkdownRenderer, {
+      props: {
+        content: '```mermaid\nflowchart TD\nA --> B\n```',
+      },
+    })
+
+    await nextTick()
+    await Promise.resolve()
+    await vi.advanceTimersByTimeAsync(5_001)
+    await flushMermaidRender()
+
+    expect(wrapper.find('.mermaid-loading').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="mermaid-svg"]').exists()).toBe(false)
+    expect(wrapper.find('.hljs-code-block').exists()).toBe(true)
+    expect(wrapper.find('.code-lang').text()).toBe('mermaid')
+    expect(wrapper.find('code.hljs').text()).toContain('flowchart TD')
+  })
+})