48 lines
1.0 KiB
Plaintext
48 lines
1.0 KiB
Plaintext
|
---
|
|||
|
|
title: 安装与接入
|
|||
|
|
description: 添加 Search、注册翻译目录并挂载搜索界面。
|
|||
|
|
order: 10
|
|||
|
|
toc:
|
|||
|
|
- id: add-the-package
|
|||
|
|
title: 添加包
|
|||
|
|
- id: import-styles
|
|||
|
|
title: 导入样式
|
|||
|
|
- id: mount-search
|
|||
|
|
title: 挂载搜索
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 添加包 {#add-the-package}
|
|||
|
|
|
|||
|
|
将 Search 加入应用依赖：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"dependencies": {
|
|||
|
|
"@workspace/search": "workspace:*"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 导入样式 {#import-styles}
|
|||
|
|
|
|||
|
|
在应用的全局样式入口导入一次 Search 样式，使 Tailwind 扫描包内使用的 utilities：
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
@import "@workspace/search/globals.css";
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
同时将 `@workspace/search/locales/{locale}` 加入应用的国际化目录来源。
|
|||
|
|
|
|||
|
|
## 挂载搜索 {#mount-search}
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import { SearchDialog, SearchProvider, SearchTrigger } from "@workspace/search"
|
|||
|
|
|
|||
|
|
;<SearchProvider adapter={searchAdapter} onSelect={openResult}>
|
|||
|
|
<SearchTrigger>搜索</SearchTrigger>
|
|||
|
|
<SearchDialog />
|
|||
|
|
</SearchProvider>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`SearchDialog` 默认注册 `Mod+K`。如果应用已经统一管理快捷键，可以传入 `hotkey={false}`。
|