国际化与无障碍

Incremark 提供了内置的国际化 (i18n) 和无障碍 (a11y) 支持，确保组件在不同语言环境下都能正常工作，并且对屏幕阅读器友好。

使用 ConfigProvider

ConfigProvider 用于提供全局的国际化配置：

Vue

<script setup>
import { IncremarkContent, ConfigProvider, zhCN } from '@incremark/vue'
</script>

<template>
  <ConfigProvider :locale="zhCN">
    <IncremarkContent :content="content" />
  </ConfigProvider>
</template>

React

import { IncremarkContent, ConfigProvider, zhCN } from '@incremark/react'

<ConfigProvider locale={zhCN}>
  <IncremarkContent content={content} />
</ConfigProvider>

Svelte

<script lang="ts">
  import { IncremarkContent, ConfigProvider, zhCN } from '@incremark/svelte'
</script>

<ConfigProvider locale={zhCN}>
  <IncremarkContent {content} />
</ConfigProvider>

Solid

import { IncremarkContent, ConfigProvider, zhCN } from '@incremark/solid'

<ConfigProvider locale={zhCN}>
  <IncremarkContent content={content()} />
</ConfigProvider>

内置语言包

Incremark 内置了以下语言包：

语言包	语言
en	英文（默认）
zhCN	简体中文

import { en, zhCN } from '@incremark/vue'
// 或
import { en, zhCN } from '@incremark/react'
// 或
import { en, zhCN } from '@incremark/svelte'
// 或
import { en, zhCN } from '@incremark/solid'

自定义语言包

你可以创建自定义语言包来支持其他语言：

import type { IncremarkLocale } from '@incremark/vue'

const jaJP: IncremarkLocale = {
  code: {
    copy: 'コードをコピー',
    copied: 'コピーしました'
  },
  mermaid: {
    copy: 'コードをコピー',
    copied: 'コピーしました',
    viewSource: 'ソースコードを表示',
    preview: 'プレビュー'
  }
}

无障碍支持

Incremark 的 UI 组件遵循 WAI-ARIA 规范，提供了完整的无障碍支持：

代码块

• 复制按钮使用 aria-label 提供清晰的操作描述
• 按钮状态变化（如复制成功）会更新 aria-label
• 语言标签清晰可读

<!-- 复制前 -->
<button aria-label="复制代码">...</button>

<!-- 复制后 -->
<button aria-label="代码已复制">...</button>

Mermaid 图表

• 切换按钮（源代码/预览）使用 aria-label
• 图表容器提供适当的语义标签

组合使用

ConfigProvider 可以与 ThemeProvider 组合使用：

Vue

<script setup>
import { 
  IncremarkContent, 
  ConfigProvider, 
  ThemeProvider, 
  zhCN 
} from '@incremark/vue'
</script>

<template>
  <ConfigProvider :locale="zhCN">
    <ThemeProvider theme="dark">
      <IncremarkContent :content="content" />
    </ThemeProvider>
  </ConfigProvider>
</template>

React

import { 
  IncremarkContent, 
  ConfigProvider, 
  ThemeProvider, 
  zhCN 
} from '@incremark/react'

<ConfigProvider locale={zhCN}>
  <ThemeProvider theme="dark">
    <IncremarkContent content={content} />
  </ThemeProvider>
</ConfigProvider>

Svelte

<script lang="ts">
  import {
    IncremarkContent,
    ConfigProvider,
    ThemeProvider,
    zhCN
  } from '@incremark/svelte'
</script>

<ConfigProvider locale={zhCN}>
  <ThemeProvider theme="dark">
    <IncremarkContent {content} />
  </ThemeProvider>
</ConfigProvider>

Solid

import {
  IncremarkContent,
  ConfigProvider,
  ThemeProvider,
  zhCN
} from '@incremark/solid'

<ConfigProvider locale={zhCN}>
  <ThemeProvider theme="dark">
    <IncremarkContent content={content()} />
  </ThemeProvider>
</ConfigProvider>

动态切换语言

语言可以在运行时动态切换：

Vue

<script setup>
import { ref, computed } from 'vue'
import { ConfigProvider, en, zhCN } from '@incremark/vue'

const lang = ref('en')
const locale = computed(() => lang.value === 'zh' ? zhCN : en)

function toggleLocale() {
  lang.value = lang.value === 'en' ? 'zh' : 'en'
}
</script>

<template>
  <button @click="toggleLocale">切换语言</button>
  <ConfigProvider :locale="locale">
    <IncremarkContent :content="content" />
  </ConfigProvider>
</template>

React

import { useState, useMemo } from 'react'
import { ConfigProvider, en, zhCN } from '@incremark/react'

function App() {
  const [lang, setLang] = useState('en')
  const locale = useMemo(() => lang === 'zh' ? zhCN : en, [lang])
  
  return (
    <>
      <button onClick={() => setLang(l => l === 'en' ? 'zh' : 'en')}>
        切换语言
      </button>
      <ConfigProvider locale={locale}>
        <IncremarkContent content={content} />
      </ConfigProvider>
    </>
  )
}

Svelte

<script lang="ts">
  import { ConfigProvider, en, zhCN } from '@incremark/svelte'

  let lang = $state('en')
  const locale = $derived(lang === 'zh' ? zhCN : en)

  function toggleLocale() {
    lang = lang === 'en' ? 'zh' : 'en'
  }
</script>

<button onclick={toggleLocale}>切换语言</button>
<ConfigProvider locale={locale}>
  <IncremarkContent {content} />
</ConfigProvider>

Solid

import { createSignal, Index } from 'solid-js'
import { ConfigProvider, en, zhCN } from '@incremark/solid'

function App() {
  const [lang, setLang] = createSignal('en')
  const locale = () => lang() === 'zh' ? zhCN : en
  const [key, setKey] = createSignal(0)

  function toggleLocale() {
    setLang(l => l === 'en' ? 'zh' : 'en')
    setKey(k => k + 1)
  }

  return (
    <>
      <button onClick={toggleLocale}>切换语言</button>
      <Index each={[key()]}>
        {() => (
          <ConfigProvider locale={locale()}>
            <IncremarkContent content={content()} />
          </ConfigProvider>
        )}
      </Index>
    </>
  )
}

Locale 类型定义

interface IncremarkLocale {
  /** 代码块相关翻译 */
  code: {
    /** 复制代码按钮文本 */
    copy: string
    /** 复制成功后的提示文本 */
    copied: string
  }
  /** Mermaid 图表相关翻译 */
  mermaid: {
    /** 复制代码按钮文本 */
    copy: string
    /** 复制成功后的提示文本 */
    copied: string
    /** 查看源代码按钮文本 */
    viewSource: string
    /** 预览图表按钮文本 */
    preview: string
  }
}