✨ feat(vscode): 代码阅读加 FastAPI 接口卡片：请求表（URL、方法、路径 / 查询参数、请求头、Cookie、请求体）、按状态码的响应表（成功、responses、函数里抛的异常、自动带的 422）；别的文件里的异常状态码、类型别名经工作区索引和语言扩展查

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

@@ -0,0 +1,22 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { SegmentText } from './SegmentText'
+
+// 高亮的上下文所在的模块连着和 VS Code 收发消息的那一套，渲染成 HTML 用不着
+vi.mock('./useOccurrences', async () => {
+  const { createContext } = await import('react')
+  return { HighlightContext: createContext(undefined) }
+})
+
+describe('着色的词', () => {
+  it('按词性上色；带自己颜色的词（库规则给的）把暗色、亮色写在 style 上，CSS 按主题挑', () => {
+    const html = renderToStaticMarkup(
+      <SegmentText segments={[
+        { text: 'PUT', role: 'keyword', color: { dark: '#fca130', light: '#b35f00' } },
+        { text: ' /users', role: 'string' },
+      ]}
+      />,
+    )
+    expect(html).toBe('<span class="cr-role-keyword cr-colored" style="--color-dark:#fca130;--color-light:#b35f00">PUT</span><span class="cr-role-string"> /users</span>')
+  })
+})

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

@@ -1,5 +1,5 @@
 import type { LucideIcon } from 'lucide-react'
-import type { ReactElement } from 'react'
+import type { CSSProperties, ReactElement } from 'react'
 import type { GroupStyle, Inline, SegmentGroup } from './types'
 import { useContext } from 'react'
 import { DisplayNameContext, shownName } from './displayNames'
@@ -8,7 +8,7 @@ import { isCurrent, segmentOccurrence } from './occurrences'
 import { HighlightContext } from './useOccurrences'
 
 /**
- * 按词性给每一段上色，颜色在 codeReader.css 的 .cr-role-* 里按主题切换；带源码下标的名字记在 data-offset 上，
+ * 按词性给每一段上色，颜色在 codeReader.css 的 .cr-role-* 里按主题切换，带自己颜色（color）的段用它（.cr-colored）；带源码下标的名字记在 data-offset 上，
  * 跳到定义、高亮各处出现用；是眼下高亮着的名字的一处出现时 data-occurrence 标出底色，是当前那一处（点中的、用键盘跳到的）时
  * 再标 data-current。起了中文名的名字显示中文名（data-name），悬停看原名，定义处本身在后面淡淡写原名；下标照旧，跳到定义、高亮照常。
  * 框起来的一组词画成小框，框里的词同样处理。
@@ -25,7 +25,8 @@ export function SegmentText({ segments }: { segments: Inline[] }): ReactElement
         return (
           <span
             key={index}
-            className={`cr-role-${piece.role}`}
+            className={piece.color ? `cr-role-${piece.role} cr-colored` : `cr-role-${piece.role}`}
+            style={piece.color && { '--color-dark': piece.color.dark, '--color-light': piece.color.light } as CSSProperties}
             data-offset={piece.offset}
             data-occurrence={highlight && segmentOccurrence(piece, highlight.occurrences)}
             data-current={highlight && isCurrent(piece, highlight) ? '' : undefined}

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

@@ -205,6 +205,9 @@ body:is(.vscode-light, .vscode-high-contrast-light) [data-badge] { --kind: var(-
 .cr-role-literal { color: var(--cr-number); }
 .cr-role-comment { color: var(--cr-comment); }
 .cr-role-hint { color: var(--vscode-descriptionForeground); }
+/* 带自己颜色的词（Segment.color，库规则按库的配色给）：暗色、亮色两个写在元素的 style 上，这里按主题挑，盖过词性的颜色 */
+.cr-colored { color: var(--color-dark); }
+body:is(.vscode-light, .vscode-high-contrast-light) .cr-colored { color: var(--color-light); }
 
 /* 注释块、函数说明的 Markdown：正文界面字体、注释色，和属性名一样的行高；代码用编辑器字体、垫代码块底色。
    间距压紧：一行注释和一行译文一样高，标题只比正文稍大 */

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

@@ -16,9 +16,10 @@ export type TokenRole
 
 /**
  * offset：照抄自源码里的名字、字符串时它在源码里的起始下标，⌘ / Ctrl 悬停、点击时拿它查定义；译词、提示词没有。
- * reference：库规则自己查定义的名字（Celery 的任务名）才有；webview 不看它，照样只报 offset，扩展端按 offset 认出来交给规则查
+ * reference：库规则自己查定义的名字（Celery 的任务名）才有；webview 不看它，照样只报 offset，扩展端按 offset 认出来交给规则查。
+ * color：这段自己的颜色（库规则按库自己的配色给的，例如 HTTP 方法），盖过词性的颜色，按主题挑暗色、亮色
  */
-export interface Segment { text: string, role: TokenRole, offset?: number, reference?: RuleReference }
+export interface Segment { text: string, role: TokenRole, offset?: number, reference?: RuleReference, color?: ThemeColor }
 
 /** 规则自己查得到定义的一个名字：哪个规则、规则自己认的键 */
 export interface RuleReference { rule: string, key: string }