页面预览

约束与限制

预览功能目前仅适用于华为云码道IDE开发工具。

基于外部网站内容生成新页面

1. 参考IDE中操作，登录华为云码道。
2. 单击IDE顶部菜单栏中的展开AI侧栏图标 ，打开华为云码道聊天窗口。
3. 在聊天界面的输入框下方选择“智能体”，切换到智能体模式。
4. 打开外部网站。
   1. 在聊天界面的输入框中，输入需要预览的网页链接，单击发送图标 。
      图1 输入需要浏览的网页

      

   2. 单击“接受”，即可在浏览器中预览网页。
      

      如果您想预览其他网页，只需在浏览器地址栏中输入网址，然后单击 图标，即可快速打开对应网站。

      图2 单击接受
      
      图3 预览目标网页

      

5. 基于外部网页中元素，生成新页面。
   1. 在聊天界面的输入框中，输入如下指令，单击发送图标 。

      在当前工程的doc-demo文件夹下为浏览器中内容创建一个搜索页面，并使用node-server启动预览，全部接受并运行

   2. 在“资源管理器”中展开文件夹doc-demo，将鼠标放生成的“***.html”文件上，单击右键选择“打开预览”。
      图4 生成的搜索页效果
      
   3. 在地址栏输入外部网站链接，单击选择元素图标 ，从页面中选取所需信息。
      图5 选择待添加的元素

      

   4. 在聊天界面的输入框中，输入如下指令，单击发送图标 ，等待执行完成查看效果。

      将文档热搜的内容适配到当前工程搜索页面并预览生成后的页面

      图6 搜索内容已添加

      

调整项目内页面元素

1. 参考IDE中操作，登录华为云码道。
   

   如果没有正常显示华为云码道的聊天窗口，请在顶部菜单栏的右上方，单击展开AI侧栏图标 ，即可打开华为云码道。

2. 在“资源管理器”中展开文件夹，将鼠标放在“***.html”格式的文件上，单击右键选择“打开预览”。
3. 优化项目页面中的元素。选中目标元素，根据设计需求对尺寸、位置、样式或层级进行优化调整，确保页面布局美观、结构合理、用户体验流畅。
   1. 在打开的浏览器页签中，单击选择元素图标 。
   2. 单击待添加的元素，元素会被添加到聊天界面的输入框中。
      图7 添加一个元素

      

   3. 在聊天界面的输入框中，输入指令如“请将选中元素的字体颜色设置为红色”，单击发送图标 。

      执行完成后，您会看到所选元素的字体颜色已变为红色。

      图8 颜色修改效果

      

4. 元素卡片布局美化。在打开的浏览器页签中，单击选择元素图标 。将鼠标放在对应的元素上，单击“卡片布局美化”，即可对选中元素进行布局美化。
   图9 单击卡片布局美化
   

5. 一键美化页面。在打开的浏览器页签中，单击一键美化图标 ，选择“美化页面”，即可自动优化当前页面的视觉呈现。
   图10 一键美化页面
   

6. 一键美化工程中所有文件。在打开的浏览器页签中，单击一键美化图标 ，选择“美化工程”，即可自动优化当前工程中所有页面的视觉呈现。
   图11 一键美化工程中所有文件
   

相关操作

在浏览器中，单击地址栏后的打开开发者工具图标 ，即可启动开发者工具。如果当前项目中存在Info、Warnings或Errors类型的日志，相关信息会实时显示在工具中。您可将日志内容复制并粘贴到华为云码道中，快速获取问题分析与解决方案。