✨ feat(vscode): 代码阅读的 React 钩子统一成一张钩子卡片，照签名排参数和返回，自定义钩子有自己的卡片

vscode/webview-ui/src/codeReader/BlockTree.test.tsx

@@ -150,6 +150,14 @@ describe('路由筛选后展开函数体', () => {
   })
 })
 
+describe('库规则卡片的淡底', () => {
+  it('卡片给了 tint 时淡底用它、描边仍是种类色（React 钩子卡片按来源分底色）：两个颜色都写在卡片上', () => {
+    const tinted: BlockView = { ...view('0', 'react.hook', 'useRouter'), badge: BADGE, tint: { dark: '#e5c07b', light: '#9a6a00' } }
+    expect(markup([tinted], tree())).toContain('data-kind="react.hook" data-badge="" data-tint="" style="--kind-dark:#61dafb;--kind-light:#0a7ea4;--tint-dark:#e5c07b;--tint-light:#9a6a00"')
+    expect(markup([{ ...tinted, tint: undefined }], tree())).not.toContain('data-tint')
+  })
+})
+
 describe('挂在卡片子行上的子块', () => {
   it('默认不画，子行的名称是展开它的按钮；卡片收着时留下的子块不画', () => {
     const html = render({})

vscode/webview-ui/src/codeReader/BlockTree.tsx

@@ -189,15 +189,17 @@ function shown(block: BlockView, state: BlockTreeState): boolean {
 
 /**
  * 块的种类色写在哪：内置种类按 data-kind 取 CSS 里的配色；库规则认领的块（带 badge）按规则给的颜色，
- * 暗色、亮色两个都写在 style 上，CSS 按主题挑一个（见 [data-badge]）。
+ * 暗色、亮色两个都写在 style 上，CSS 按主题挑一个（见 [codeReader.css](vscode/webview-ui/src/codeReader/codeReader.css) 的 `[data-badge]`）。
+ * 规则给了淡底的颜色（`tint`）时同样写上，卡片的淡底用它（见同一文件的 `[data-tint]`）。
  */
-export function kindProps(block: Pick<BlockView, 'kind' | 'badge'> | undefined): { 'data-kind'?: string, 'data-badge'?: '', 'style'?: CSSProperties } {
+export function kindProps(block: Pick<BlockView, 'kind' | 'badge' | 'tint'> | undefined): { 'data-kind'?: string, 'data-badge'?: '', 'data-tint'?: '', 'style'?: CSSProperties } {
   if (!block)
     return {}
   if (!block.badge)
     return { 'data-kind': block.kind }
   const { dark, light } = block.badge.color
-  return { 'data-kind': block.kind, 'data-badge': '', 'style': { '--kind-dark': dark, '--kind-light': light } as CSSProperties }
+  const tint = block.tint && { '--tint-dark': block.tint.dark, '--tint-light': block.tint.light }
+  return { 'data-kind': block.kind, 'data-badge': '', ...(tint && { 'data-tint': '' as const }), 'style': { '--kind-dark': dark, '--kind-light': light, ...tint } as CSSProperties }
 }
 
 /** 一块画成什么样要的块树状态：只选这一块自己的，别的块变了它不重画。 */

vscode/webview-ui/src/codeReader/codeReader.css

@@ -37,6 +37,9 @@ body {
 /* 库规则认领的块：颜色由规则给，暗色、亮色两个写在元素的 style 上（--kind-dark / --kind-light），这里按主题挑 */
 [data-badge] { --kind: var(--kind-dark); }
 body:is(.vscode-light, .vscode-high-contrast-light) [data-badge] { --kind: var(--kind-light); }
+/* 库规则给了淡底颜色的卡片（React 钩子卡片按来源分底色）：淡底用它，边框仍是种类色；同样按主题挑一个 */
+[data-tint] { --tint: var(--tint-dark); }
+body:is(.vscode-light, .vscode-high-contrast-light) [data-tint] { --tint: var(--tint-light); }
 
 /* 卡片和它的子层是相邻兄弟，:hover 只落在鼠标下最里面那张卡片上，父卡片不跟着亮 */
 .cr-block {
@@ -48,6 +51,12 @@ body:is(.vscode-light, .vscode-high-contrast-light) [data-badge] { --kind: var(-
   background: color-mix(in srgb, var(--kind) 14%, transparent);
   border-color: var(--kind);
 }
+.cr-block[data-tint] {
+  background: color-mix(in srgb, var(--tint) 7%, transparent);
+}
+.cr-block[data-tint]:hover {
+  background: color-mix(in srgb, var(--tint) 14%, transparent);
+}
 .cr-block[data-kind="comment"] {
   border-style: dashed;
 }

vscode/webview-ui/src/codeReader/kindIcons.test.tsx

@@ -58,9 +58,10 @@ describe('块的种类图标', () => {
   })
 
   it('这组图标里每个名字画的就是 lucide 里同名的图标', () => {
+    // 名字里带数字的图标 lucide 另加一个按组件名起的类（share-2 的 lucide-share2），同名的那个类排在最后
     for (const name of Object.keys(KIND_ICON_COMPONENTS) as KindIconName[]) {
       const html = render([concept(name, name, name)])
-      expect(html, name).toContain(`class="lucide lucide-${name}"`)
+      expect(html, name).toMatch(new RegExp(`class="lucide (?:[\\w-]+ )?lucide-${name}"`))
     }
   })
 

vscode/webview-ui/src/codeReader/kindIcons.tsx

@@ -13,8 +13,9 @@ import {
   CornerDownLeft,
   CornerDownRight,
   Database,
-  Download,
+  FishingHook,
   Globe,
+  Hourglass,
   Import,
   Layers,
   LayoutTemplate,
@@ -27,6 +28,7 @@ import {
   Play,
   Repeat,
   ServerCog,
+  Share2,
   Shield,
   ShieldAlert,
   ShieldCheck,
@@ -84,9 +86,11 @@ export const KIND_ICON_COMPONENTS: Record<KindIconName, LucideIcon> = {
   'mouse-pointer-click': MousePointerClick,
   'toggle-right': ToggleRight,
   'anchor': Anchor,
-  'download': Download,
   'sigma': Sigma,
   'layout-template': LayoutTemplate,
+  'fishing-hook': FishingHook,
+  'share-2': Share2,
+  'hourglass': Hourglass,
 }
 
 /**

vscode/webview-ui/src/codeReader/types.ts

@@ -124,7 +124,7 @@ export type KindIconName
     | 'split' | 'corner-down-right' | 'repeat' | 'shield' | 'shield-alert' | 'shield-check' | 'corner-down-left' | 'code'
     | 'message-square-text' | 'terminal' | 'sliders-horizontal' | 'signpost' | 'square-terminal' | 'layers' | 'copy' | 'activity' | 'play'
     | 'database' | 'package' | 'server-cog' | 'calendar-clock' | 'globe' | 'network' | 'atom' | 'zap' | 'mouse-pointer-click'
-    | 'toggle-right' | 'anchor' | 'download' | 'sigma' | 'layout-template'
+    | 'toggle-right' | 'anchor' | 'sigma' | 'layout-template' | 'fishing-hook' | 'share-2' | 'hourglass'
 
 /**
  * 一块上认出的一个概念。宿主放进预览数据：稳定 id、悬停名、图标名。
@@ -171,6 +171,8 @@ interface CardViewBase {
   commentTarget?: 'replace' | 'insert'
   /** 库规则的卡片才有：卡片边框的颜色，筛选栏里这个种类的名字。和类块一样默认收起子块 */
   badge?: KindBadge
+  /** 库规则的卡片给了淡底的颜色才有：淡底用它，边框仍是 `badge` 的颜色（React 钩子卡片按钩子从哪来分底色） */
+  tint?: ThemeColor
   /** 库规则挂在父卡片子行上的子块才有：展开时画在父卡片属性表第 row 行下面，不排在父卡片的子块里；见 BlockSlot */
   slot?: BlockSlot
   /** 挂在父卡片链式调用某一步下面的子块才有：画在那一步下面，不排在父卡片的子块里；见 ChainSlot */
@@ -179,8 +181,12 @@ interface CardViewBase {
   callTree?: CallTreeTarget
 }
 
-/** 一块能看调用树：接口卡片带上它讲的接口（扩展端查前端调用者用，这边只看有没有 callTree）。 */
+/**
+ * 一块能看调用树：接口卡片带上它讲的接口，查的不是块自己的名字时带上那个名字在块里的范围（React 钩子卡片查返回的 `setOpen`）；
+ * 都是扩展端查调用者用的，这边只看有没有 callTree。
+ */
 export interface CallTreeTarget {
+  name?: SourceRange
   endpoint?: { method: string, path: string, operationIdPrefix?: string, sameRouter?: { method: string, path: string }[] }
 }