✨ feat(vscode): 代码阅读预览界面

Vite 加 code-reader.html 第二入口；代码块树（层级竖线、折叠、种类标签配色）、译文 / 源码按词性着色、块内直接编辑（防抖回写整行、Esc 回预览）、翻译下拉、解析失败提示；看板与代码阅读共用带类型的 acquireVsCodeApi 包装和 ErrorBoundary。
2026-09-24 21:01:34 +08:00
1 parent cab5ac0ebc
commit af56985d9a
@@ -0,0 +1,133 @@
+@import "tailwindcss";
+
+/* 词性与块种类的配色：暗色（含高对比）取 VS Code Dark+，亮色取 Light+。其余界面颜色一律用 --vscode-* 变量。 */
+body {
+  --cr-keyword: #c586c0;
+  --cr-storage: #569cd6;
+  --cr-variable: #9cdcfe;
+  --cr-function: #dcdcaa;
+  --cr-type: #4ec9b0;
+  --cr-string: #ce9178;
+  --cr-number: #b5cea8;
+  --cr-comment: #6a9955;
+
+  --cr-kind-import: #c586c0;
+  --cr-kind-function: #dcdcaa;
+  --cr-kind-type: #4ec9b0;
+  --cr-kind-data: #9cdcfe;
+  --cr-kind-branch: #ce9178;
+  --cr-kind-loop: #8f9cff;
+  --cr-kind-error: #f48771;
+  --cr-kind-return: #89d185;
+  --cr-kind-statement: #9d9d9d;
+  --cr-kind-comment: #6a9955;
+
+  margin: 0;
+  font-family: var(--vscode-font-family, system-ui, sans-serif);
+  font-size: var(--vscode-font-size, 13px);
+  color: var(--vscode-foreground);
+  background: var(--vscode-editor-background);
+}
+
+body.vscode-light,
+body.vscode-high-contrast-light {
+  --cr-keyword: #af00db;
+  --cr-storage: #0000ff;
+  --cr-variable: #001080;
+  --cr-function: #795e26;
+  --cr-type: #267f99;
+  --cr-string: #a31515;
+  --cr-number: #098658;
+  --cr-comment: #008000;
+
+  --cr-kind-import: #af00db;
+  --cr-kind-function: #795e26;
+  --cr-kind-type: #267f99;
+  --cr-kind-data: #001080;
+  --cr-kind-branch: #a31515;
+  --cr-kind-loop: #4f56d6;
+  --cr-kind-error: #b5452f;
+  --cr-kind-return: #388a34;
+  --cr-kind-statement: #6f6f6f;
+  --cr-kind-comment: #008000;
+}
+
+/* 种类颜色：同一类语义共用一个颜色，标签文字区分具体是哪种 */
+.cr-block[data-kind="import"] { --kind: var(--cr-kind-import); }
+.cr-block[data-kind="function"] { --kind: var(--cr-kind-function); }
+.cr-block:is([data-kind="class"], [data-kind="type"]) { --kind: var(--cr-kind-type); }
+.cr-block:is([data-kind="field"], [data-kind="const"], [data-kind="variable"]) { --kind: var(--cr-kind-data); }
+.cr-block:is([data-kind="if"], [data-kind="else"]) { --kind: var(--cr-kind-branch); }
+.cr-block[data-kind="loop"] { --kind: var(--cr-kind-loop); }
+.cr-block:is([data-kind="try"], [data-kind="catch"], [data-kind="finally"]) { --kind: var(--cr-kind-error); }
+.cr-block[data-kind="return"] { --kind: var(--cr-kind-return); }
+.cr-block[data-kind="statement"] { --kind: var(--cr-kind-statement); }
+.cr-block[data-kind="comment"] { --kind: var(--cr-kind-comment); }
+
+.cr-block {
+  background: color-mix(in srgb, var(--kind) 7%, transparent);
+  border: 1px solid color-mix(in srgb, var(--kind) 35%, transparent);
+}
+.cr-block[data-kind="comment"] {
+  border-style: dashed;
+}
+.cr-block[data-editing] {
+  background: var(--vscode-editor-background);
+  border-color: var(--vscode-focusBorder);
+}
+.cr-badge {
+  color: var(--kind);
+  background: color-mix(in srgb, var(--kind) 18%, transparent);
+}
+
+/* 译文和源码共用的文字排版；源码编辑时输入框和着色层都用它，两层逐字对齐 */
+.cr-code {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-family: var(--vscode-editor-font-family, monospace), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+  font-size: var(--vscode-editor-font-size, 12.5px);
+  font-weight: var(--vscode-editor-font-weight, normal);
+  line-height: 20px;
+  letter-spacing: 0;
+  tab-size: 4;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  color: var(--vscode-editor-foreground);
+}
+
+.cr-role-keyword { color: var(--cr-keyword); }
+.cr-role-storage,
+.cr-role-operator { color: var(--cr-storage); }
+.cr-role-variable { color: var(--cr-variable); }
+.cr-role-function { color: var(--cr-function); }
+.cr-role-type { color: var(--cr-type); }
+.cr-role-string { color: var(--cr-string); }
+.cr-role-number,
+.cr-role-literal { color: var(--cr-number); }
+.cr-role-comment { color: var(--cr-comment); }
+
+/* 编辑：透明输入框垫在底下接收输入和选区，着色层盖在上面只负责显示，高度由着色层撑开 */
+.cr-editor {
+  position: relative;
+}
+.cr-editor > textarea {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  overflow: hidden;
+  outline: none;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--vscode-editorCursor-foreground);
+}
+.cr-editor > textarea::selection {
+  color: transparent;
+  background: var(--vscode-editor-selectionBackground);
+}
+.cr-editor > pre {
+  position: relative;
+  pointer-events: none;
+}