struts2 做的网站看书网站排名
DataGear的数据看板采用原生HTML作为模板，可以直接导入HTML网页，可以在看板设计时直接粘贴HTML代码，因而可以结合AI工具生成HTML代码，快速制作多端适配的数据看板。
本文将使用阿里的通义（https://tongyi.aliyun.com/）AI工具， 生成一个支持移动端、平板端、PC端的，且支持实时显示当前日期时间的HTML代码，然后使用这个HTML代码，在DataGear中制作数据看板。
首先，注册并登录通义AI工具，点击下面对话框中的代码模式按钮，然后在输入框里分三次输入下面的提示词，生成HTML代码：
第一个：
写一个html页面，包含一个两行一列的网格布局，填满整个屏幕，第一行填写“看板”，自适应内容高度，第二行填满剩余高度
第二个：
在这个页面第二行里插入一个三行三列的网格布局，网格条目里留空，支持移动端、平板端、PC端，在移动端时按一列布局，在平板端时按两列布局，在PC端时按三列布局，在移动端、平板端每行高度设为300像素，在PC端每行均分高度
第三个：
在这个页面右上角实时显示当前日期时间，在移动端时不显示
最终，将生成如下HTML代码（可能略有不同）：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式三行三列网格布局</title><style>body, html {margin: 0;padding: 0;height: 100%;font-family: Arial, sans-serif;}.container {display: grid;grid-template-rows: auto 1fr;height: 100vh;position: relative;}.header {background-color: #f0f0f0;padding: 20px;text-align: center;position: relative;}.content {display: grid;grid-template-columns: 1fr;gap: 10px;padding: 20px;}.grid-item {background-color: #ffffff;border: 1px solid #ccc;height: 300px; /* 移动端和平板端每行高度 */}@media (min-width: 768px) {.content {grid-template-columns: repeat(2, 1fr);}}@media (min-width: 1024px) {.content {grid-template-columns: repeat(3, 1fr);grid-auto-rows: minmax(auto, 1fr); /* PC端每行均分高度 */}.grid-item {height: auto; /* 取消固定高度以便均分 */}}.datetime {position: absolute;top: 10px;right: 10px;font-size: 14px;color: #333;}@media (max-width: 767px) {.datetime {display: none;}}</style>
</head>
<body><div class="container"><div class="header">看板<div id="datetime" class="datetime"></div></div><div class="content"><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div></div></div><script>function updateDateTime() {const now = new Date();const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };document.getElementById('datetime').textContent = now.toLocaleDateString('zh-CN', options);}setInterval(updateDateTime, 1000);updateDateTime(); // 初始化调用</script>
</body>
</html>然后，在DataGear里新建一个看板，点击【保存并设计】打开设计页面，在index.html页签内的【源码模式】编辑区内粘贴上述由AI生成的HTML代码，点击可视模式切换到可视编辑模式，依次点击选中页面中的网格条目，点击【插入】-【内部后置插入】-【图表（选择）】，插入已建立好的图表。
至此，一个支持移动端、平板端、PC端的简单数据看板制作完成！
各端效果图如下：
移动端：
平板端：
PC端：
官网地址：
http://www.datagear.tech
源码地址：
Github：https://github.com/datageartech/datagear
GitCode：https://gitcode.com/datageartech/datagear
Gitee：https://gitee.com/datagear/datagear