37 lines
1.0 KiB
Plaintext
37 lines
1.0 KiB
Plaintext
|
---
|
||
|
|
title: Devtool
|
||
|
|
description: 通过浮动开发界面检查和编辑词典。
|
||
|
|
order: 30
|
||
|
|
toc:
|
||
|
|
- id: mount-the-devtool
|
||
|
|
title: 挂载 Devtool
|
||
|
|
- id: theme-and-language
|
||
|
|
title: 主题与语言
|
||
|
|
- id: custom-surfaces
|
||
|
|
title: 自定义界面
|
||
|
|
---
|
||
|
|
|
||
|
|
## 挂载 Devtool {#mount-the-devtool}
|
||
|
|
|
||
|
|
将 Devtool 挂载在 `I18nProvider` 内，并且只在开发环境启用：
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { I18nDevtool } from "@workspace/i18n/devtool"
|
||
|
|
|
||
|
|
{
|
||
|
|
import.meta.env.DEV && (
|
||
|
|
<I18nDevtool locale="zh-Hans" dark={'[data-theme="dark"]'} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
组件通过 Portal 渲染，因此不会被应用的 overflow 或层叠上下文裁剪。
|
||
|
|
|
||
|
|
## 主题与语言 {#theme-and-language}
|
||
|
|
|
||
|
|
`dark` 选项接受类名或 CSS 选择器。控制面板语言独立于被翻译的应用语言，支持 `en-US` 和 `zh-Hans`，并会从 `navigator.languages` 回退到 `en-US`。
|
||
|
|
|
||
|
|
## 自定义界面 {#custom-surfaces}
|
||
|
|
|
||
|
|
当应用需要替换默认浮动面板时，可使用 `MessagePanel`、`MessageRepositoryProvider` 和 `createHttpMessageRepository` 构建自定义开发界面。
|