网页生成

简介 #

网页生成智能体通过向大模型提供 SmartChart 的标准 HTML 模板格式，让大模型直接生成可以在 SmartChart 中运行的可视化页面代码。适合快速原型开发和无前端背景的用户快速生成大屏效果。生成的代码直接粘贴到仪表盘模板中即可使用。

应用场景 #

  • smartchart大屏及网页开发

使用方法 #

大模型连接已抽象化为数据源，请参考基础操作 –> 第一个AI场景

  • 新建数据集，选择类型为：智能体，连接器选择：大模型数据源, 名称"网页生成"
你可以基于模板格式生成html，并将相应的CSS,HTML,JS填在模板的相应区域内。
注意模板已经自动引入了jquery,echarts不用再引入。
demo数据请用带表头的二维数据格式
### 以下为模板内容:
{% extends "echart/base.html" %}{% block head %}
<style>
此处放样式
</style>
{% endblock %}{% block body %}
<body>
此处放html
</body>
{% endblock %}{% block javascript %}
<script>
此处放js
</script>
{% endblock %}{% block footer %}{% endblock %}
### 以下是我的需求：
$prompt
  • 将生成的模板贴入仪表盘的模板中即可
你是我的前端代码助手。
请基于以下技术约束和需求，生成完整的 Django 模板代码（包含 HTML、CSS、JS）。

【技术栈约束】
1. 环境已自动引入：**jQuery, ECharts, Vue2, Element UI**，代码中禁止再次引入。
2. 数据交互必须使用以下两个全局方法（注意返回格式）：
   - **写入数据**：`let result = ds_save(1, dataset);`
     - 返回值：`{status: 200, msg: 'success'}`
     - 规则：`dataset` 为 JSON 对象，数据库字段名必须与 `dataset` 的 key 完全一致。
   - **读取数据**：`let data = ds_refresh(2, filter_param, type);`
     - `type='map'`：返回对象数组 `[{key:value}, ...]`（用于表格/表单）。
     - `type='list'`：返回二维数组 `[['head1','head2'],['val1','val2']]`（用于 ECharts）。
4. 数据库使用 SQLite，字段命名风格需与 dataset key 保持一致（小驼峰或下划线需统一）。
5. 你需要同时提供建表和相应的查询语句。

【代码格式要求】
1. 严格按照以下模板结构填充代码，不要省略 block：
   {% extends "echart/basevue.html" %}
   {% block head %}<style>此处放样式</style>{% endblock %}
   {% block body %}<body>此处放HTML</body>{% endblock %}
   {% block javascript %}<script>此处放JS</script>{% endblock %}
   {% block footer %}
   <script>var vapp=new Vue({el:'#app',delimiters:['{[',']}'], ...});</script>
   {% endblock %}
2. Vue的初始化需要使用以下格式：
3. **Demo 数据策略**：
   - 为了支持“先预览”，请在 JS 的 `mounted` 或初始化方法中，**先使用硬编码的 Demo 数据（带表头的二维数据或对象数组）初始化页面**。
   - 同时，**注释掉**真实的 `ds_refresh` 调用，方便我后续开启。
   - 注意demo数据要与实际数据一致，特别是字段名。
   - 表单提交时，先用 `ds_save` 占位（注释状态），并在其后紧跟一段“模拟成功”的代码（`this.$message.success` + 本地 push 数据），确保页面有交互反馈。
4. 样式：简洁清爽，尽量使用 Element UI 组件。

【本次具体需求】
请帮我实现一个 [这里填写你的页面名称，例如：酒店访客登记] 页面：

请生成完整可运行的代码。
Edit Edit this page