开发工具数据科学【免费下载链接】archived-desktop-appThe old electron based nteract notebook项目地址https://gitcode.com/gh_mirrors/nt/archived-desktop-app点击查看免费下载本指南以 nteract 仓库中packages/presentational-components/src/components/prompt.md文档为主体系统讲解Prompt组件的作用、props 语义与在 Notebook 前端中的实际接入方式。读完本文你将掌握如何用counter、running、queued、blank四个 props 复刻 Jupyter 风格的In [n]/Out [n]提示符并理解它如何与Input容器、Redux 状态层配合完成单元格执行状态的实时展示。Prompt 组件是什么Prompt组件通常作为Input组件的子组件出现承担两个职责输入入口的视觉指示告诉用户当前区域是可供输入/执行单元格的区域单元格状态信息展示把单元格当前处于“未执行、正在执行、排队中、已执行过 N 次”等状态以 Jupyter 用户熟悉的形式呈现出来。在 nteract 的组件分层中Prompt属于“展示型组件presentational component”定义于 packages/presentational-components/src/components/prompt.tsx。它不感知 Redux 状态只根据传入的 props 决定渲染什么文本因此既可以在纯 React 环境下独立使用也可以被上层“有状态组件”包一层后接入数据流。快速上手从导入到第一个 Prompt从nteract/presentational-components导入import { Prompt } from nteract/presentational-components该包的统一出口在 packages/presentational-components/src/index.ts其中同时导出了Prompt与PromptBufferimport { Prompt, PromptBuffer } from ./components/prompt; // ... export { // ... Prompt, PromptBuffer, // ... }不带任何 props 的Prompt /会渲染一对空括号Prompt /渲染结果对应 Jupyter 中尚未执行代码时的默认提示符[ ]用 counter 展示执行计数counter接受一个数字渲染时会把该数字填进括号内Prompt counter{12} /[12]在 Jupyter 生态中这个数字通常是 Jupyter kernel 返回的execution_count表示当前单元格在整个会话中被执行到的序号。用户在jupyter console或 IPython 中常见的In [n]/Out [n]中的 n就是这个计数。源码注释中给出了对应的经典形态In [1]: 2 2 Out[1]: 4 In [2]: woohoo Out[2]: woohoo在 nteract 的数据流中execution_count保存在单元格的 Immutable 记录里cell.get(execution_count, undefined)由有状态层读取后传入展示层详见后文“有状态接入”一节。用 running 表示正在执行传入running布尔 prop组件会在括号中间渲染一个星号*向用户标明该单元格正处于执行中Prompt counter{12} running /[*]星号是 Jupyter 生态约定俗成的“执行中”标志——用户看到[*]就能立刻意识到内核正在运行该单元格且尚未产生输出。用 queued 表示排队等待执行传入queued布尔 prop组件渲染省略号形态的提示符Prompt counter{12} queued /[…]queued通常配合“Run all cells”运行全部单元格这类批量执行功能使用当多个单元格被一次性提交执行时尚未轮到执行的单元格以[…]呈现视觉上与“正在执行”的[*]、以及“已执行”的[n]区分开。用 blank 渲染空白提示符传入blank后Prompt 不再渲染括号或任何指示符只保留一个留白区域Prompt blank /空不渲染 [ ]这用于 Markdown 单元格等不需要执行计数的场景。仓库为此专门提供了派生组件PromptBuffer它把blank默认置为trueexport const PromptBuffer styled(Prompt); PromptBuffer.defaultProps { blank: true, };也就是说PromptBuffer /等价于Prompt blank /。在Prompt的 styled 样式中min-height: 22px正是“为Prompt blank /创建缓冲区域”而设置的见源码注释保证 Markdown 单元格的提示符区域与代码单元格高度对齐。源码级解析promptText 的优先级规则prompt.tsx中用纯函数promptText统一决定渲染文本这是理解整个组件行为的关键function promptText(props: PromptProps): string { if (props.running) { return [*]; } if (props.queued) { return […]; } if (typeof props.counter number) { return [${props.counter}]; } if (props.blank) { return ; } return [ ]; }注意其中的判定优先级running优先级最高其次是queued只有既非 running 也非 queued 时counter才会被渲染counter判定使用typeof props.counter number因此传入0也会正常显示[0]第 0 次执行是合法状态而null、undefined则不会进入此分支blank的优先级低于前三者仅在没有其他状态命中时生效兜底返回[ ]。四个 props 的默认值定义在Prompt.defaultProps中全部为“未激活”状态Prompt.defaultProps { counter: null, running: false, queued: false, blank: false, };PromptProps接口还允许传入className配合 styled-components 实现样式的组合与覆盖。外观与主题定制Prompt是基于styled-components构建的先把纯渲染逻辑放进BarePrompt再通过styled(BarePrompt)注入样式导出最终的Promptexport const Prompt styled(BarePrompt) font-family: monospace; font-size: 12px; line-height: 22px; min-height: 22px; padding: 9px 0; text-align: center; color: var(--theme-cell-prompt-fg, black); background-color: var(--theme-cell-prompt-bg, #fafafa); ;几个值得注意的细节等宽字体font-family: monospace保证[1]、[10]、[100]宽度一致提示符列对齐不跳动主题变量颜色通过 CSS 变量--theme-cell-prompt-fg与--theme-cell-prompt-bg提供并给出默认值black与#fafafa。这意味着上层应用可以在全局样式参见 packages/styles 下的主题文件中覆盖这两个变量即可整体改变提示符配色无需逐个实例传参。与 Input、Source 组合成单元格输入区Prompt很少单独出现它通常与Input、Source一起构成单元格的输入区块。Input是一个轻量容器组件见 packages/presentational-components/src/components/input.md 与 input.tsx提供hiddenprop 控制子节点是否渲染其 styled 样式通过 flex 布局把Prompt与Source排布在同一行export const Input styled(BareInput) { display: flex; flex-direction: row; } // ... ${Prompt} { flex: 0 0 auto; } ${Source} { flex: 1 1 auto; overflow: visible; background-color: var(--theme-cell-input-bg, #fafafa); } ;Prompt使用flex: 0 0 auto固定宽度不伸缩Source使用flex: 1 1 auto占据剩余空间。标准组合方式const { Prompt, Source } require(nteract/presentational-components); Input Prompt/ Source/ /Input有状态接入从 Redux 状态到提示符文本展示层Prompt只负责“翻译”props真正的数据来自有状态层。在 packages/stateful-components/src/inputs/prompt.tsx 中存在一个同名的、通过connect连接 Redux 的容器组件它从 notebook 模型的 transient 区域读取单元格status从单元格记录读取execution_count并通过 render-prop 把{ id, contentRef, status, executionCount }传给子函数if (model model.type notebook) { status model.transient.getIn([cellMap, id, status]); const cell selectors.notebook.cellById(model, { id }); if (cell) { executionCount cell.get(execution_count, undefined); } }而 packages/stateful-components/src/cells/code-cell.tsx 中给出了默认的 prompt 槽位实现展示了四种状态如何映射为最终文本Prompt id{props.id} contentRef{props.contentRef} {(props: PassedPromptProps) { if (props.status busy) { return React.Fragment{[*]}/React.Fragment; } if (props.status queued) { return React.Fragment{[…]}/React.Fragment; } if (typeof props.executionCount number) { return React.Fragment{[${props.executionCount}]}/React.Fragment; } return React.Fragment{[ ]}/React.Fragment; }} /Prompt这条调用链完整对应了prompt.md中的四个 props 语义单元格状态数据来源展示层 props渲染文本执行中transient 中的status busyrunning[*]排队中transient 中的status queuedqueued[…]已执行单元格的execution_countcounter[n]未执行 / Markdown无blank或PromptBuffer空同时CodeCell还通过children.prompt暴露了插槽机制调用方可以传入自定义的 prompt 渲染函数覆盖默认实现实现如自定义提示符文本、隐藏执行计数等个性化需求const prompt children?.prompt || defaults.prompt;。单元格渲染时prompt 与编辑器一起被包进InputInput id{id} contentRef{contentRef} {prompt({ id, contentRef })} Source classNamenteract-cell-source Editor id{id} contentRef{contentRef}{editor}/Editor /Source /Input相关组件输入请求提示PromptRequest与“展示执行状态”的Prompt不同packages/stateful-components/src/outputs/input-prompts.tsx 中的PromptRequest负责内核发起的交互式输入请求如密码、input()调用。它根据selectors.notebook.cellPromptsById读取待处理的InputRequestMessage渲染一个表单提交时通过actions.sendInputReply({ value, contentRef })把用户输入回传内核form onSubmit{this.handleSubmitPromptReply} label{prompt.prompt}/label input type{prompt.password ? password : text} value{this.state.value} onChange{this.handleChange} / input typesubmit/ /form注意实现细节prompt.password为真时输入框类型切换为password用于安全输入且只展示prompts.last(undefined)即最后一条未处理的请求源码注释 #5592 说明原因——状态中只保存单一值其余请求已被处理。它与展示型Prompt在职责上互补Prompt反映单元格执行生命周期PromptRequest处理内核的即时输入请求。小结Prompt是 nteract 组件体系中连接“视觉呈现”与“单元格状态”的关键节点四个 props 语义清晰counter执行计数、running[*]、queued[…]、blank空白 / Markdown 单元格判定优先级为 running → queued → counter → blank → 兜底空括号纯展示、易定制基于 styled-components 实现颜色通过--theme-cell-prompt-fg/--theme-cell-prompt-bg主题变量全局控制上下层配合展示层在 prompt.tsx有状态接入在 stateful-components/src/inputs/prompt.tsx默认行为定义于 code-cell.tsx生态扩展PromptBuffer提供空白提示符PromptRequest处理内核输入请求三者共同支撑完整的 Notebook 交互体验。如需了解相邻组件如Input、Source的更多用法可继续阅读 input.md 与 source.md组件的统一导出见 index.ts。赞分享开发工具数据科学【免费下载链接】archived-desktop-appThe old electron based nteract notebook项目地址https://gitcode.com/gh_mirrors/nt/archived-desktop-app点击查看免费下载相关推荐nteract presentational-components 中的 Input 组件notebook 单元格输入容器的设计与实战nteract presentational components 中的 Input 组件notebook 单元格输入容器的设计与实战 本文是 nteract开发工具数据科学给苹果已停更的旧Mac装上新系统OpenCore Legacy Patcher一步步实操手册给苹果已停更的旧Mac装上新系统OpenCore Legacy Patcher一步步实操手册 升级时 2013 年的 iMac 在选盘环节直接被卡住或者装完开发工具数据科学Jupytext MyST Markdown 格式实战从 nteract 参数化 Notebook 看代码单元格的 YAML 元数据表示Jupytext MyST Markdown 格式实战从 nteract 参数化 Notebook 看代码单元格的 YAML 元数据表示 导读 本文以 Jup开发工具上一篇深度解析uos-dovecot-exporter 如何高效收集 Dovecot 邮件服务器性能指标下一篇深度解析kconfigDetector如何快速检测Linux内核配置错误的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 nteract 中的 Prompt 组件：构建 Notebook 单元格执行状态指示器
开发工具数据科学【免费下载链接】archived-desktop-appThe old electron based nteract notebook项目地址https://gitcode.com/gh_mirrors/nt/archived-desktop-app点击查看免费下载本指南以 nteract 仓库中packages/presentational-components/src/components/prompt.md文档为主体系统讲解Prompt组件的作用、props 语义与在 Notebook 前端中的实际接入方式。读完本文你将掌握如何用counter、running、queued、blank四个 props 复刻 Jupyter 风格的In [n]/Out [n]提示符并理解它如何与Input容器、Redux 状态层配合完成单元格执行状态的实时展示。Prompt 组件是什么Prompt组件通常作为Input组件的子组件出现承担两个职责输入入口的视觉指示告诉用户当前区域是可供输入/执行单元格的区域单元格状态信息展示把单元格当前处于“未执行、正在执行、排队中、已执行过 N 次”等状态以 Jupyter 用户熟悉的形式呈现出来。在 nteract 的组件分层中Prompt属于“展示型组件presentational component”定义于 packages/presentational-components/src/components/prompt.tsx。它不感知 Redux 状态只根据传入的 props 决定渲染什么文本因此既可以在纯 React 环境下独立使用也可以被上层“有状态组件”包一层后接入数据流。快速上手从导入到第一个 Prompt从nteract/presentational-components导入import { Prompt } from nteract/presentational-components该包的统一出口在 packages/presentational-components/src/index.ts其中同时导出了Prompt与PromptBufferimport { Prompt, PromptBuffer } from ./components/prompt; // ... export { // ... Prompt, PromptBuffer, // ... }不带任何 props 的Prompt /会渲染一对空括号Prompt /渲染结果对应 Jupyter 中尚未执行代码时的默认提示符[ ]用 counter 展示执行计数counter接受一个数字渲染时会把该数字填进括号内Prompt counter{12} /[12]在 Jupyter 生态中这个数字通常是 Jupyter kernel 返回的execution_count表示当前单元格在整个会话中被执行到的序号。用户在jupyter console或 IPython 中常见的In [n]/Out [n]中的 n就是这个计数。源码注释中给出了对应的经典形态In [1]: 2 2 Out[1]: 4 In [2]: woohoo Out[2]: woohoo在 nteract 的数据流中execution_count保存在单元格的 Immutable 记录里cell.get(execution_count, undefined)由有状态层读取后传入展示层详见后文“有状态接入”一节。用 running 表示正在执行传入running布尔 prop组件会在括号中间渲染一个星号*向用户标明该单元格正处于执行中Prompt counter{12} running /[*]星号是 Jupyter 生态约定俗成的“执行中”标志——用户看到[*]就能立刻意识到内核正在运行该单元格且尚未产生输出。用 queued 表示排队等待执行传入queued布尔 prop组件渲染省略号形态的提示符Prompt counter{12} queued /[…]queued通常配合“Run all cells”运行全部单元格这类批量执行功能使用当多个单元格被一次性提交执行时尚未轮到执行的单元格以[…]呈现视觉上与“正在执行”的[*]、以及“已执行”的[n]区分开。用 blank 渲染空白提示符传入blank后Prompt 不再渲染括号或任何指示符只保留一个留白区域Prompt blank /空不渲染 [ ]这用于 Markdown 单元格等不需要执行计数的场景。仓库为此专门提供了派生组件PromptBuffer它把blank默认置为trueexport const PromptBuffer styled(Prompt); PromptBuffer.defaultProps { blank: true, };也就是说PromptBuffer /等价于Prompt blank /。在Prompt的 styled 样式中min-height: 22px正是“为Prompt blank /创建缓冲区域”而设置的见源码注释保证 Markdown 单元格的提示符区域与代码单元格高度对齐。源码级解析promptText 的优先级规则prompt.tsx中用纯函数promptText统一决定渲染文本这是理解整个组件行为的关键function promptText(props: PromptProps): string { if (props.running) { return [*]; } if (props.queued) { return […]; } if (typeof props.counter number) { return [${props.counter}]; } if (props.blank) { return ; } return [ ]; }注意其中的判定优先级running优先级最高其次是queued只有既非 running 也非 queued 时counter才会被渲染counter判定使用typeof props.counter number因此传入0也会正常显示[0]第 0 次执行是合法状态而null、undefined则不会进入此分支blank的优先级低于前三者仅在没有其他状态命中时生效兜底返回[ ]。四个 props 的默认值定义在Prompt.defaultProps中全部为“未激活”状态Prompt.defaultProps { counter: null, running: false, queued: false, blank: false, };PromptProps接口还允许传入className配合 styled-components 实现样式的组合与覆盖。外观与主题定制Prompt是基于styled-components构建的先把纯渲染逻辑放进BarePrompt再通过styled(BarePrompt)注入样式导出最终的Promptexport const Prompt styled(BarePrompt) font-family: monospace; font-size: 12px; line-height: 22px; min-height: 22px; padding: 9px 0; text-align: center; color: var(--theme-cell-prompt-fg, black); background-color: var(--theme-cell-prompt-bg, #fafafa); ;几个值得注意的细节等宽字体font-family: monospace保证[1]、[10]、[100]宽度一致提示符列对齐不跳动主题变量颜色通过 CSS 变量--theme-cell-prompt-fg与--theme-cell-prompt-bg提供并给出默认值black与#fafafa。这意味着上层应用可以在全局样式参见 packages/styles 下的主题文件中覆盖这两个变量即可整体改变提示符配色无需逐个实例传参。与 Input、Source 组合成单元格输入区Prompt很少单独出现它通常与Input、Source一起构成单元格的输入区块。Input是一个轻量容器组件见 packages/presentational-components/src/components/input.md 与 input.tsx提供hiddenprop 控制子节点是否渲染其 styled 样式通过 flex 布局把Prompt与Source排布在同一行export const Input styled(BareInput) { display: flex; flex-direction: row; } // ... ${Prompt} { flex: 0 0 auto; } ${Source} { flex: 1 1 auto; overflow: visible; background-color: var(--theme-cell-input-bg, #fafafa); } ;Prompt使用flex: 0 0 auto固定宽度不伸缩Source使用flex: 1 1 auto占据剩余空间。标准组合方式const { Prompt, Source } require(nteract/presentational-components); Input Prompt/ Source/ /Input有状态接入从 Redux 状态到提示符文本展示层Prompt只负责“翻译”props真正的数据来自有状态层。在 packages/stateful-components/src/inputs/prompt.tsx 中存在一个同名的、通过connect连接 Redux 的容器组件它从 notebook 模型的 transient 区域读取单元格status从单元格记录读取execution_count并通过 render-prop 把{ id, contentRef, status, executionCount }传给子函数if (model model.type notebook) { status model.transient.getIn([cellMap, id, status]); const cell selectors.notebook.cellById(model, { id }); if (cell) { executionCount cell.get(execution_count, undefined); } }而 packages/stateful-components/src/cells/code-cell.tsx 中给出了默认的 prompt 槽位实现展示了四种状态如何映射为最终文本Prompt id{props.id} contentRef{props.contentRef} {(props: PassedPromptProps) { if (props.status busy) { return React.Fragment{[*]}/React.Fragment; } if (props.status queued) { return React.Fragment{[…]}/React.Fragment; } if (typeof props.executionCount number) { return React.Fragment{[${props.executionCount}]}/React.Fragment; } return React.Fragment{[ ]}/React.Fragment; }} /Prompt这条调用链完整对应了prompt.md中的四个 props 语义单元格状态数据来源展示层 props渲染文本执行中transient 中的status busyrunning[*]排队中transient 中的status queuedqueued[…]已执行单元格的execution_countcounter[n]未执行 / Markdown无blank或PromptBuffer空同时CodeCell还通过children.prompt暴露了插槽机制调用方可以传入自定义的 prompt 渲染函数覆盖默认实现实现如自定义提示符文本、隐藏执行计数等个性化需求const prompt children?.prompt || defaults.prompt;。单元格渲染时prompt 与编辑器一起被包进InputInput id{id} contentRef{contentRef} {prompt({ id, contentRef })} Source classNamenteract-cell-source Editor id{id} contentRef{contentRef}{editor}/Editor /Source /Input相关组件输入请求提示PromptRequest与“展示执行状态”的Prompt不同packages/stateful-components/src/outputs/input-prompts.tsx 中的PromptRequest负责内核发起的交互式输入请求如密码、input()调用。它根据selectors.notebook.cellPromptsById读取待处理的InputRequestMessage渲染一个表单提交时通过actions.sendInputReply({ value, contentRef })把用户输入回传内核form onSubmit{this.handleSubmitPromptReply} label{prompt.prompt}/label input type{prompt.password ? password : text} value{this.state.value} onChange{this.handleChange} / input typesubmit/ /form注意实现细节prompt.password为真时输入框类型切换为password用于安全输入且只展示prompts.last(undefined)即最后一条未处理的请求源码注释 #5592 说明原因——状态中只保存单一值其余请求已被处理。它与展示型Prompt在职责上互补Prompt反映单元格执行生命周期PromptRequest处理内核的即时输入请求。小结Prompt是 nteract 组件体系中连接“视觉呈现”与“单元格状态”的关键节点四个 props 语义清晰counter执行计数、running[*]、queued[…]、blank空白 / Markdown 单元格判定优先级为 running → queued → counter → blank → 兜底空括号纯展示、易定制基于 styled-components 实现颜色通过--theme-cell-prompt-fg/--theme-cell-prompt-bg主题变量全局控制上下层配合展示层在 prompt.tsx有状态接入在 stateful-components/src/inputs/prompt.tsx默认行为定义于 code-cell.tsx生态扩展PromptBuffer提供空白提示符PromptRequest处理内核输入请求三者共同支撑完整的 Notebook 交互体验。如需了解相邻组件如Input、Source的更多用法可继续阅读 input.md 与 source.md组件的统一导出见 index.ts。赞分享开发工具数据科学【免费下载链接】archived-desktop-appThe old electron based nteract notebook项目地址https://gitcode.com/gh_mirrors/nt/archived-desktop-app点击查看免费下载相关推荐nteract presentational-components 中的 Input 组件notebook 单元格输入容器的设计与实战nteract presentational components 中的 Input 组件notebook 单元格输入容器的设计与实战 本文是 nteract开发工具数据科学给苹果已停更的旧Mac装上新系统OpenCore Legacy Patcher一步步实操手册给苹果已停更的旧Mac装上新系统OpenCore Legacy Patcher一步步实操手册 升级时 2013 年的 iMac 在选盘环节直接被卡住或者装完开发工具数据科学Jupytext MyST Markdown 格式实战从 nteract 参数化 Notebook 看代码单元格的 YAML 元数据表示Jupytext MyST Markdown 格式实战从 nteract 参数化 Notebook 看代码单元格的 YAML 元数据表示 导读 本文以 Jup开发工具上一篇深度解析uos-dovecot-exporter 如何高效收集 Dovecot 邮件服务器性能指标下一篇深度解析kconfigDetector如何快速检测Linux内核配置错误的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考