♻️ refactor(vscode): 代码阅读的种类图标改成插件自己定义的一组（契约里的封闭名字集合），webview 只带这些图标，不再打包 lucide 全套
This commit is contained in:
cruldra committed
1 parent
c1d0dd3753
commit
b186b007a4
11 files changed
+139
-47
No files matched your search
@@ -3,7 +3,7 @@ import type { CSSProperties, ReactElement } from 'react'
|
||||
import type { GroupStyle, Inline, SegmentGroup } from './types'
|
||||
import { useContext } from 'react'
|
||||
import { DisplayNameContext, shownName } from './displayNames'
|
||||
import { KIND_ICONS, lucideIcon } from './kindIcons'
|
||||
import { KIND_ICON_COMPONENTS, KIND_ICONS } from './kindIcons'
|
||||
import { isCurrent, segmentOccurrence } from './occurrences'
|
||||
import { HighlightContext } from './useOccurrences'
|
||||
|
||||
@@ -43,7 +43,7 @@ export function SegmentText({ segments }: { segments: Inline[] }): ReactElement
|
||||
}
|
||||
|
||||
/** 框的样式 → 框头图标：遍历同「循环」块的图标；颜色在 codeReader.css 的 .cr-group[data-style] 里。 */
|
||||
const GROUP_ICONS: Record<GroupStyle, LucideIcon> = { iteration: lucideIcon(KIND_ICONS.loop) }
|
||||
const GROUP_ICONS: Record<GroupStyle, LucideIcon> = { iteration: KIND_ICON_COMPONENTS[KIND_ICONS.loop] }
|
||||
|
||||
/** 框起来的一组词：嵌在前后文字里的小框，放不下时整个挪到下一行，比一行还长时在框里换行。 */
|
||||
function GroupBox({ group }: { group: SegmentGroup }): ReactElement {
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { KIND_ICON_NAMES } from '../../../src/codeReader/contract'
|
||||
import { KIND_ICON_COMPONENTS } from './kindIcons'
|
||||
|
||||
// webview 的类型照扩展端手抄一份（types.ts）；这组图标名两边对不上时，规则给的图标在页面上就没有图，这里核对
|
||||
describe('种类图标这组名字', () => {
|
||||
it('webview 给扩展端 contract 里的每个名字都配了图标，没有多的', () => {
|
||||
expect(Object.keys(KIND_ICON_COMPONENTS).sort()).toEqual([...KIND_ICON_NAMES].sort())
|
||||
})
|
||||
})
|
||||
@@ -1,8 +1,7 @@
|
||||
import type { BlockView } from './types'
|
||||
import { Database, SquareDashed, SquareFunction } from 'lucide-react'
|
||||
import type { BlockView, KindIconName } from './types'
|
||||
import { renderToStaticMarkup } from 'react-dom/server'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { KIND_ICONS, KindIcon, lucideIcon } from './kindIcons'
|
||||
import { KIND_ICON_COMPONENTS, KIND_ICONS, KindIcon } from './kindIcons'
|
||||
|
||||
function render(block: Pick<BlockView, 'kind' | 'badge'>, name: string): string {
|
||||
return renderToStaticMarkup(<KindIcon block={block} name={name} />)
|
||||
@@ -33,14 +32,13 @@ describe('块的种类图标', () => {
|
||||
statement: 'code',
|
||||
comment: 'message-square-text',
|
||||
})
|
||||
for (const name of Object.values(KIND_ICONS))
|
||||
expect(lucideIcon(name), name).not.toBe(SquareDashed)
|
||||
})
|
||||
|
||||
it('lucide 图标名按 kebab-case 认；认不出的名字画虚线方块', () => {
|
||||
expect(lucideIcon('square-function')).toBe(SquareFunction)
|
||||
expect(lucideIcon('database')).toBe(Database)
|
||||
expect(lucideIcon('no-such-icon')).toBe(SquareDashed)
|
||||
it('这组图标里每个名字画的就是 lucide 里同名的图标', () => {
|
||||
for (const name of Object.keys(KIND_ICON_COMPONENTS) as KindIconName[]) {
|
||||
const html = render({ kind: 'sqlalchemy.table', badge: { label: name, color: { dark: '#fff', light: '#000' }, icon: name } }, name)
|
||||
expect(html, name).toContain(`class="lucide lucide-${name}"`)
|
||||
}
|
||||
})
|
||||
|
||||
it('只画图标不带字，名字在悬停提示和 aria-label 里；20px 的框、16px 的图形', () => {
|
||||
|
||||
@@ -1,13 +1,64 @@
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
import type { ReactElement } from 'react'
|
||||
import type { BlockKind, BlockView } from './types'
|
||||
import { icons, SquareDashed } from 'lucide-react'
|
||||
import type { BlockKind, BlockView, KindIconName } from './types'
|
||||
import {
|
||||
Box,
|
||||
Braces,
|
||||
CalendarClock,
|
||||
Code,
|
||||
CornerDownLeft,
|
||||
CornerDownRight,
|
||||
Database,
|
||||
Globe,
|
||||
Import,
|
||||
ListOrdered,
|
||||
Lock,
|
||||
MessageSquareText,
|
||||
Package,
|
||||
Repeat,
|
||||
ServerCog,
|
||||
Shield,
|
||||
ShieldAlert,
|
||||
ShieldCheck,
|
||||
Split,
|
||||
SquareFunction,
|
||||
Tag,
|
||||
TriangleAlert,
|
||||
Variable,
|
||||
} from 'lucide-react'
|
||||
|
||||
/** 插件定义的这组种类图标，每个名字一个 lucide 图标（逐个 import，打包只带这些）。 */
|
||||
export const KIND_ICON_COMPONENTS: Record<KindIconName, LucideIcon> = {
|
||||
'import': Import,
|
||||
'square-function': SquareFunction,
|
||||
'box': Box,
|
||||
'braces': Braces,
|
||||
'list-ordered': ListOrdered,
|
||||
'triangle-alert': TriangleAlert,
|
||||
'tag': Tag,
|
||||
'lock': Lock,
|
||||
'variable': Variable,
|
||||
'split': Split,
|
||||
'corner-down-right': CornerDownRight,
|
||||
'repeat': Repeat,
|
||||
'shield': Shield,
|
||||
'shield-alert': ShieldAlert,
|
||||
'shield-check': ShieldCheck,
|
||||
'corner-down-left': CornerDownLeft,
|
||||
'code': Code,
|
||||
'message-square-text': MessageSquareText,
|
||||
'database': Database,
|
||||
'package': Package,
|
||||
'server-cog': ServerCog,
|
||||
'calendar-clock': CalendarClock,
|
||||
'globe': Globe,
|
||||
}
|
||||
|
||||
/**
|
||||
* 内置种类的图标（lucide 图标名，和库规则给的 badge.icon 同一种写法）：块左边只画图标，名字是悬停提示。
|
||||
* 内置种类的图标：块左边只画图标，名字是悬停提示。
|
||||
* 同一类语义共用一个颜色（codeReader.css 的 --cr-kind-*：常量 / 变量 / 字段都是数据，尝试 / 捕获都是异常处理），图标区分具体是哪种。
|
||||
*/
|
||||
export const KIND_ICONS: Record<BlockKind, string> = {
|
||||
export const KIND_ICONS: Record<BlockKind, KindIconName> = {
|
||||
import: 'import',
|
||||
function: 'square-function',
|
||||
class: 'box',
|
||||
@@ -28,21 +79,13 @@ export const KIND_ICONS: Record<BlockKind, string> = {
|
||||
comment: 'message-square-text',
|
||||
}
|
||||
|
||||
const LUCIDE: Record<string, LucideIcon | undefined> = icons
|
||||
|
||||
/** lucide 图标名（kebab-case，`square-function`）→ 图标组件；认不出的名字（规则写错了）画虚线方块。 */
|
||||
export function lucideIcon(name: string): LucideIcon {
|
||||
return LUCIDE[name.replace(/(?:^|-)([a-z0-9])/g, (_, first: string) => first.toUpperCase())] ?? SquareDashed
|
||||
}
|
||||
|
||||
const BUILT_IN: Partial<Record<string, string>> = KIND_ICONS
|
||||
|
||||
/**
|
||||
* 块左边的种类：只画图标，和一行字等高（20px 的框、16px 的图形），颜色是种类色（--kind）。图标是库规则给的（badge.icon），
|
||||
* 没有就按内置种类查 KIND_ICONS；名字（翻译插件给种类起的，库规则的种类是规则给的）写在悬停提示（title）和读屏念的 aria-label 里。
|
||||
* 没有就是内置种类的（KIND_ICONS，没带 badge 的块 kind 是 BlockKind）；名字（翻译插件给种类起的，库规则的种类是规则给的）
|
||||
* 写在悬停提示（title）和读屏念的 aria-label 里。
|
||||
*/
|
||||
export function KindIcon({ block, name }: { block: Pick<BlockView, 'kind' | 'badge'>, name: string }): ReactElement {
|
||||
const Icon = lucideIcon(block.badge?.icon ?? BUILT_IN[block.kind] ?? '')
|
||||
const Icon = KIND_ICON_COMPONENTS[block.badge?.icon ?? KIND_ICONS[block.kind as BlockKind]]
|
||||
return (
|
||||
<span className="cr-kind flex size-5 shrink-0 items-center justify-center" role="img" title={name} aria-label={name}>
|
||||
<Icon size={16} strokeWidth={2.2} aria-hidden />
|
||||
|
||||
@@ -73,8 +73,14 @@ export interface PropertyRow extends Defines {
|
||||
/** 一种颜色在暗色、亮色主题下各用哪个（CSS 颜色值）；高对比主题跟着暗 / 亮走 */
|
||||
export interface ThemeColor { dark: string, light: string }
|
||||
|
||||
/** 库规则的种类：名字（悬停提示、读屏念的文字）、颜色和 lucide 图标名；块左边只画图标 */
|
||||
export interface KindBadge { label: string, color: ThemeColor, icon: string }
|
||||
/** 种类图标：插件自己定义的一组 lucide 图标（同扩展端 contract 的 KIND_ICON_NAMES），每个名字在 kindIcons.tsx 里配一个图标 */
|
||||
export type KindIconName
|
||||
= | 'import' | 'square-function' | 'box' | 'braces' | 'list-ordered' | 'triangle-alert' | 'tag' | 'lock' | 'variable'
|
||||
| 'split' | 'corner-down-right' | 'repeat' | 'shield' | 'shield-alert' | 'shield-check' | 'corner-down-left' | 'code'
|
||||
| 'message-square-text' | 'database' | 'package' | 'server-cog' | 'calendar-clock' | 'globe'
|
||||
|
||||
/** 库规则的种类：名字（悬停提示、读屏念的文字）、颜色和图标（从 KindIconName 里挑）；块左边只画图标 */
|
||||
export interface KindBadge { label: string, color: ThemeColor, icon: KindIconName }
|
||||
|
||||
interface BlockViewBase {
|
||||
/** 在树里的位置，例如 '6.1.0' */
|
||||
|
||||
Reference in new issue
Block a user