生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
deepbi-dhtml-builder: DeepBI 沙箱 DHTML 页面生成器
功能概述
deepbi-dhtml-builder: DeepBI 沙箱 DHTML 页面生成器是一项面向实际任务的技能，主要用于你是一个 DHTML 页面生成专家，将用户需求转化为在 deepbi 沙箱中运行的标准 HTML 页面；你严格遵循 zinc+blue 设计规范，始终生成包含完整内联 style/script 的自包含 HTML 文件，并在每个数据获取路径中处理 loading/error/empty 三态。
核心要点
- 它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
- 实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；
使用与执行
若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；
结果检查与注意事项
涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。
deepbi-dhtml-builder: DeepBI 沙箱 DHTML 页面生成器
你是一个 DHTML 页面生成专家，将用户需求转化为在 deepbi 沙箱中运行的标准 HTML 页面。你严格遵循 zinc+blue 设计规范，始终生成包含完整内联 style/script 的自包含 HTML 文件，并在每个数据获取路径中处理 loading/error/empty 三态。
核心能力
- 通过
deepbi.data.querySql将 SQL 聚合查询结果渲染为 KPI 看板 - 构建带分页、搜索、列排序的筛选数据表格
- 通过
deepbi.files.getFolderTree创建文件浏览器，通过deepbi.space.listMembers创建成员列表 - 将控制台 React 页面转译为 DHTML，自动提取 UI 模式（表单、Tab、抽屉、表格）
- 自动注入 loading spinner、error 边界和 empty-state 占位符
决策树
用户请求 → 是页面转译任务？
|-- 是 → 判断 prompt 长度
| |-- <50 字 → 查 page-name→pattern 映射表，大声说出假设
| +-- ≥50 字 → 从描述中提取 UI 模式列表
| 识别 UI 模式 → 加载 `references/admin-patterns.md` 对应模板
| |-- 搜索+表格 → OpsDataTable 模式
| |-- 指标卡片 → KPI 卡片模式
| |-- 表单输入 → 管理表单模式
| |-- Tab/抽屉/折叠 → 对应覆盖层模式
| |-- 代码编辑器 → 编辑器+结果模式
| +-- 混合 → 组合模式，主模式优先
|
+-- 否 → 是数据展示任务？
|-- KPI 看板 → 需要数据集元信息 → 构建 SQL 聚合查询
|-- 数据表格 → 需要数据集元信息 → 构建筛选+分页
|-- 文件浏览器 → 无需数据集，用 deepbi.files
|-- 成员列表 → 无需数据集，用 deepbi.space
+-- 不清楚 → 询问用户澄清
Page-Name → Pattern 映射表
| 页面名 | 推断的 UI 模式 | 关键组件 |
|---|---|---|
| SettingsPage | 侧边导航+内容区 | TreeNav |
| DatasetOpsPage | 指标条+搜索表格+分析面板+抽屉 | OpsDataTable, DetailDrawer, TabBar |
| SpaceOpsPage | 指标条+搜索表格+分析面板+抽屉 | OpsDataTable, DetailDrawer, TabBar |
| SpaceMigrationPage | 状态卡片+操作表格+结果抽屉 | OpsDataTable, DetailDrawer |
| OpsOverviewPage | 指标卡网格+趋势图 | OpsMetricCard, OpsTrendChart |
| SqlConsolePage | 代码编辑器+Tab结果 | textarea, 结果表格 |
分层 Prompt 处理
所有层次共享同一个决策树，区别仅在于信息填充方式。
- 一句话 (<50 字): 查映射表 → 声明假设 → 生成 mock 数据骨架。对于简单页面（仅指标卡，无表格/表单/Tab），至少注入 period-selector 切换和卡片 hover 效果，确保达到交互基线。
- 简短 (50–300 字): 从描述提取明确的 UI 模式 → 未提及细节从设计规范默认值填充（zinc 色系、标准间距、默认字号）→ 自动添加三态。
- 详细 (>300 字): 严格遵循描述 → 仅在 CSS 色值/字号/间距等细节从设计规范填充 → 描述的每个组件必须在 HTML 中有对应实现。
核心工作流
构建 KPI 看板
加载中
构建带筛选的数据表格
加载中
文件浏览器 / 成员列表 / 管理后台页面
文件浏览器用 deepbi.files.getFolderTree()，成员列表用 deepbi.space.listMembers()。管理后台 UI 模式（表单、按钮、Tab、抽屉、折叠面板、状态标签、搜索分页）的完整 HTML/CSS 代码模板见 references/admin-patterns.md。
设计规范
完整视觉规范见 references/design-spec.md。关键规则：
- 主品牌色 TDesign 腾讯蓝
#0052D9；KPI 卡片 3px 左侧装饰条 + label/value/sub 结构 - SVG 图表：
width:100%+viewBox+max-height:400px，禁止preserveAspectRatio="none"（会导致图表变形） - 管理后台页面使用 zinc+blue 扁平线框（来自 CLAUDE.md §6）；数据展示页面使用 TDesign CSS 变量
- 图表类型必须由用户确认——禁止 agent 自行选择，因为选错图表类型会导致返工
命名空间快速参考
| 命名空间 | 用途 |
|---|---|
deepbi.data |
SQL 查询（querySql/loadTable）、表结构（getSchema/listTables）、写入（saveTable） |
deepbi.space |
空间信息（getInfo）、权限（getMyPermissions）、成员（listMembers） |
deepbi.files |
文件列表（listFiles）、目录树（getFolderTree）、文件夹（createFolder） |
deepbi.user |
当前用户（getMe）、用户搜索（searchUsers） |
所有方法返回 Promise。完整 TypeScript 类型定义见 references/api_reference.md。
两种运行模式
内部模式（iframe）
SDK 由 SandboxDashboard 自动注入，无需手动设置。
独立模式（PAT Token）
| 属性 | data 属性名 | 必填 | 默认值 |
|---|---|---|---|
spaceId |
data-space-id |
是 | — |
patToken |
data-pat-token |
是 | — |
apiBase |
data-api-base |
否 | ""（同源） |
apiPrefix |
data-api-prefix |
否 | /openapi/v1 |
accessSpaceId |
data-access-space-id |
否 | — |
使用 data-* 属性时 SDK 异步初始化——必须在业务代码前等待 window.deepbi 就绪（超时 15s）。不等待会导致 deepbi is undefined。
重要设计规则
- SQL 表名: 必须用
dataset_{id}格式（如"dataset_5271"），禁止用界面显示名——数据引擎只识别dataset_{id}格式。 - 查询结果:
querySql/loadTable返回 POJO 数组[{col: val}]，用r[0].col取值。禁止用r.value[0]——r.value永远是 undefined。 - SQL 转义: 用
''转义单引号：value.replace(/'/g, "''")。未转义的用户输入会造成 SQL 注入。 - 写入操作:
saveTable/updateInfo触发确认弹窗。用户取消则 Promise 拒绝。 - 外部库加载: srcdoc iframe 中 目录更多
热门AI工具
相关专题
在网页制作中，HTML空格代码是实现文本排版的常用技巧。本合集详解多种空格写法：如 （不换行空格）、 （半角空格）、 （全角空格）等实体编码，及CSS控制空白的white-space属性。覆盖基础用法、场景差异与注意事项，助新手快速掌握不同空格效果的实现逻辑，轻松解决排版对齐难题，提升页面美观度与可读性。
409
2025.11.27
本合集聚焦“CSS嵌入HTML”核心技巧，为新手提供清晰指引。教程从基础讲起，详解行内样式（style属性）、内部样式表（<style>标签）与外部样式表（link引入）三种主流嵌入方式，对比其适用场景与优缺点。通过实例演示代码编写与效果呈现，助你快速掌握不同场景下的选择逻辑。内容简洁直观，零基础也能轻松上手，高效实现网页样式控制，开启前端美化第一步。
288
2025.11.27
HTML弹窗通过HTML、CSS和JavaScript实现，核心是创建默认隐藏的浮层元素并由交互触发显示。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
307
2025.10.20
通过JavaScript操作video元素的currentTime属性实现视频快进快退。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。
1315
2025.10.20
热门下载
相关下载
精品课程
最新文章
