DTStack / DTStack/monaco-sql-languages

替换 Monaco 内置的图标

Đang mở
#105 5 bình luận 2 reaction 1 người được giao Được @liuxy0551 nhận Xem trên GitHub
new features
Ngôn ngữ chính
TypeScript
Star
295
Fork
50
Merge trung bình
1 giờ 21 phút
Pull request đã merge (30 ngày)
1

Mô tả

## Why?
monaco-sql-languages 支持的 language 都是各种 SQL,与之对应的就会有许多符号/icon是SQL语言特有的,比如 database 、table 等,而monaco 内置并不支持这些符号/icon,目前自动补全项左侧的 icon 问题尤为明显:

![image](https://github.com/DTStack/monaco-sql-languages/assets/58289241/ad0d55ec-eab0-43d5-b08c-2a4d4358a108)

## 方案概述
1. 制作自动补全项对应的 iconfont
2. 新增 css 文件,覆盖monaco 内置的字体图标

## 字体图标风格
与monaco/vscode 的字体图标风格保持一致 https://code.visualstudio.com/api/references/icons-in-labels#icon-listing
![image](https://github.com/DTStack/monaco-sql-languages/assets/58289241/5ad00f63-92c9-4bf7-bff6-d22a48dfff1c)

## 字体图标表

类型 | icon name
-- | --
keyword 关键字 | symbol-keyword
Snippet 代码片段 | symbol-snippet
catalog | symbol-catalog
database/schema 数据库 | symbol-database
table 表 | symbol-table
view 视图 | symbol-view
column 字段 | symbol-column
function 函数 | symbol-function
procedure 存储过程 | symbol-procedure

## SQL 补全项类型与 monaco 内置的 CompletionItemKind 映射表
自动补全项左侧会根据不同的自动补全项的 `CompletionItemKind` 属性显示不同的 icon,但是内置的类型并不能覆盖所有的 SQL 补全项类型,比如 table、database 等,所以需要一个类型映射

类型 | CompletionItemKind
-- | --
keyword 关键字 | CompletionItemKind.Keyword
Snippet 代码片段 | CompletionItemKind.Snippet
catalog | CompletionItemKind.Folder
database/schema 数据库 | CompletionItemKind.File
table 表 | CompletionItemKind.Class
view 视图 | CompletionItemKind.Interface
column 字段 | CompletionItemKind.Field
function 函数 | CompletionItemKind.Function
procedure 存储过程 | CompletionItemKind.Constructor

同时,monaco-sql-languages 需要新增公开的辅助方法,用于将 dt-sql-parser 中的 实体类型(`EntityContextType`/ `SyntaxContextType` )转换为 `CompletionItemKind`

```typescript
import { SyntaxContextType } from 'dt-sql-parser';
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';

export function toCompletionItemKind(type: SyntaxContextType): languages.CompletionItemKind {
switch(type) {
case SyntaxContextType.CATALOG:
return languages.CompletionItemKind.Folder;
case SyntaxContextType.DATABASE:
return languages.CompletionItemKind.File;
// ...
default:
return languages.CompletionItemKind.Text;
}
}
```

## 覆盖 icon 的 css 文件参考
每一种类型对应的icon 类名格式为: `.codicon-${built-in-icon-name}`

内置的 icon 名称看这里: https://code.visualstudio.com/api/references/icons-in-labels#icon-listing

自动补全项的icon名称都是以 `symbol-` 为前缀的

```css
.codicon-symbol-text:before {
content: '\eb01';
}
.codicon-symbol-function:before {
content: '\eb02';
}
.codicon-symbol-folder:before {
content: '\eb03';
}
.codicon-symbol-field:before {
content: '\eb04';
}
```

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.