Menu
给右栏「预览」tab 加一种文件类型的渲染器(展示/编辑 + 导出)
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Write rigorous academic prose — papers, literature reviews, abstracts, theses — with proper structure, citations, and a formal tone.
Design APIs, data models, service boundaries, and reliable backend implementation plans.
Review code for bugs, regressions, maintainability risks, and missing tests.
Analyze datasets, produce charts, explain trends, and turn numbers into decisions.
Draft and generate structured Word documents, reports, proposals, and formal writeups.
Build useful spreadsheets, financial models, formulas, pivots, and editable xlsx outputs.
| name | add-preview-renderer |
| description | 给右栏「预览」tab 加一种文件类型的渲染器(展示/编辑 + 导出) |
给右栏「预览」支持一种新文件类型——按文件后缀/内容分派到一个渲染组件,展示(或所见即所得编辑),并提供导出。已用此流程做了 4 个:CrepeEditor(.md 文档 WYSIWYG)、MarpPreview(Marp 幻灯)、SheetPreview(.csv 表格)、HtmlPreview(.html 静态页)。
.vue、.json、.geojson、图片、Mermaid、.ipynb 等。docs/design/right-rail-roadmap.md),不是预览渲染器。Docker 跑项目已回滚,别复活。openCodeFile.content 是 UTF-8 文本,二进制会损坏),先评估。在 apps/web/src/components/preview/DocPreviewPane.tsx 的 docKind(path, content) 决定怎么识别(后缀,必要时看内容,如 Marp 靠 marp: true front-matter)。
pnpm add <lib>。优先纯前端、可离线的库(可移植硬约束)。
XxxPreview.tsxapps/web/src/components/preview/XxxPreview.tsx,约定:
{ content: string; fileName?: string }(content 来自 store.openCodeFile,代码 tab 编辑会实时镜像过来)。exportUtils)。api.workspaceFileWrite + useStore.getState().bumpWorkspaceFiles()(让 CodeTab 同步,防 stale 覆盖)。DocPreviewPane 分派docKind 加分支 + render 加 if (kind === "xxx") return <XxxPreview content={...} fileName={...} />;。
debounced content;WYSIWYG 编辑器用 file.content + key={file.path}。exportUtils.tsdownloadBlob / downloadText / printAsPdf(片段)/ printHtmlDoc(完整 html 文档)/ csvToXlsxBlob。新格式(如 docx/pptx)在组件里用对应库生成 Blob → downloadBlob。
./node_modules/.bin/tsc -b + 实测:打开该类型文件 → 切「预览」→ 看渲染、编辑、各导出按钮。必要时给纯函数(解析/转换)加 vitest(参考 diffUnified.test.ts)。
workspaceFileRead 返回 UTF-8;二进制文件(.xlsx/.docx)直接读会乱码 → 二进制要 raw fetch(后续)。defaultValue,之后自己持有状态;把 content 当受控 prop 回灌会跟光标打架。切文件用 key={path} 重挂,StrictMode 双挂载要 cancelled 守卫(别销毁半成品 editor)。bumpWorkspaceFiles,CodeTab 才会重读、不会用旧缓冲覆盖。sandbox="allow-scripts",别加 allow-same-origin(两者同时会让沙箱失效)。<html> 文档(如 .html 页)用 printHtmlDoc(保留其 head/style);body 片段(md 渲染、表格)用 printAsPdf(body, title, "<style>…</style>")。.docx 排版会打折、.pptx 丢主题样式;高保真留后端,UI 上如实标注。