#国际化

<script lang="ts" setup vapor>
import { markdown } from '@codemirror/lang-markdown';
import { ref } from 'vue';
import CodeMirror from 'vue-codemirror6';

const value = ref('');
const lang = markdown();

/**
 * 界面翻译(本例为中文)
 *
 * @see {@link https://codemirror.net/examples/translate/}
 */
const phrases: Record<string, string> = {
  // @codemirror/view
  'Control character': '控制字符',
  // @codemirror/commands
  'Selection deleted': '已删除所选内容',
  // @codemirror/language
  'Folded lines': '已折叠的行',
  'Unfolded lines': '已展开的行',
  to: '至',
  'folded code': '已折叠的代码',
  unfold: '展开',
  'Fold line': '折叠行',
  'Unfold line': '展开行',
  // @codemirror/search
  'Go to line': '跳转到行',
  go: '确定',
  Find: '查找',
  Replace: '替换',
  next: '下一个',
  previous: '上一个',
  all: '全部',
  'match case': '区分大小写',
  'by word': '全字匹配',
  regexp: '正则表达式',
  replace: '替换',
  'replace all': '全部替换',
  close: '关闭',
  'current match': '当前匹配',
  'replaced $ matches': '已替换 $ 处匹配',
  'replaced match on line $': '已替换第 $ 行的匹配',
  'on line': '所在行',
  // @codemirror/autocomplete
  Completions: '自动补全',
  // @codemirror/lint
  Diagnostics: '诊断',
  'No diagnostics': '无诊断信息'
};
</script>

<template>
  <code-mirror v-model="value" basic :lang="lang" :phrases="phrases" />
</template>

<script lang="ts" setup vapor>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import CodeMirror from 'vue-codemirror6';

const { locale } = useI18n();

/** 各语言的翻译表 */
const phrasesByLocale: Record<string, Record<string, string>> = {
  zh: {
    Find: '查找',
    Replace: '替换',
    close: '关闭'
    // ...
  },
  en: {} // 留空时使用 CodeMirror 默认的英文文本
};

const phrases = computed(() => phrasesByLocale[locale.value]);
</script>

<template>
  <code-mirror basic :phrases="phrases" />
</template>