HtmlDrag 使用指南：导入、编辑、AI 精修与导出 HTML

本指南按照从已有素材到完成 HTML 页面的真实流程编写。你可以学习如何导入已有页面、获取公开网页、使用 AI 精修、将支持的文件转成可编辑 HTML，并继续完成可视化编辑、保存、分享和导出。

⚡ 核心事实速览与 4 步极速上手（HtmlDrag Quickstart）

1. 核心定位：面向已有 HTML、AI 生成代码与公开网页的可视化“最后一公里”编辑器。无需编写代码，直接像编辑图片一样自由拖拽排版、修改文字与替换媒体。
2. 4 步极速上手工作流： ① 导入（上传 HTML / 粘贴代码 / URL 获取 / AI 创建）→ ② 可视化点选（双击改字、拖拽调位置、右侧栏精修样式与表格）→ ③ 定向 AI 精修（点选特定局部，提示词指令定向修改，绝不全页重构）→ ④ 纯净导出（一键导出标准独立 HTML 代码，彻底拒绝平台锁定）。
3. 五大核心导入入口：① 复制网页 (Clone Webpage)（抓取公开网页生成副本）；② Upload HTML（拖入本地 .html 页面）；③ Paste Code（从 ChatGPT/Claude/v0 复制 HTML 即时渲染）；④ AI Refinement（已有页面局部提示词微调）；⑤ File to HTML（文档/图片识别转可编辑页面）。
4. 零平台锁定承诺：所有导出的 HTML 均为标准独立代码，可随时部署到自建服务器、Vercel、Netlify 或无缝集成至任意前端项目。

一、将内容导入 HtmlDrag

根据你已有的素材选择最适合的入口。上传 HTML 和粘贴代码适合直接在已有页面上进行可视化编辑；复制网页适合获取公开网页副本；AI 精修支持对已有页面局部定向修改；文件转 HTML 则可把支持的文档和图片转为可编辑网页。

1.1 主页工作台

主页集中提供几种主要入口：HTML Editor 用于处理已有 HTML，AI Refinement 用于对导入页面进行定向修改，File to HTML 用于从源素材生成可编辑页面。根据你的起点选择入口，然后进入编辑器或预览工作区继续操作。

1.2 复制网页

复制网页会获取公开网页，并将结果转换为可编辑作品。适合已经有在线参考页面、但没有原始 HTML 文件的情况。

输入公开网页 URL

打开 复制网页 标签，粘贴公开的 http:// 或 https:// 地址，然后点击 Clone。不支持私有网络地址、本地文件路径，以及必须登录后才能访问的页面。

复制网页：粘贴公开网页地址并开始复制

检查获取后的页面

获取完成后，在预览或编辑器工作区检查页面。外部资源、防盗链图片或完全依赖 JavaScript 的内容可能无法完全复现；如果页面不完整，可以改用粘贴渲染后的 HTML 或上传原始 HTML。

1.3 上传 HTML

如果你已经有 .html 或 .htm 文件，可以使用 Upload HTML，直接在已有页面上进行视觉修改，无需从头重写。

选择已有 HTML 文件

选择 Upload HTML，然后点击或拖拽 HTML 文件到上传区域。原页面会作为编辑器的起点，HtmlDrag 不会把页面转换成静态截图。

上传 HTML：选择或拖拽已有的 .html 或 .htm 文件

检查导入结果

完成安全检测和解析后，打开预览或编辑器，检查布局、文字、图片、链接和外部资源是否正常，再开始编辑。

1.4 粘贴代码

如果 HTML 代码来自代码助手、本地编辑器、邮件或其他浏览器标签页，可以使用 Paste Code。

粘贴完整 HTML

将完整 HTML 粘贴到代码区域，包括页面所需的结构和样式，然后点击 Open editor。如果代码由 AI 工具生成，应粘贴准备进行可视化精修的版本，而不是只输入页面描述。

粘贴代码：插入 HTML 源代码并打开编辑器

检查资源和安全提示

HtmlDrag 会在打开前检查导入内容。对于脚本、本地资源、外部字体或嵌入内容的提示，应先确认页面在编辑器中的实际显示效果。

1.5 AI 定向精修

AI 精修适合对已有页面进行聚焦修改。你可以从上传 HTML、粘贴代码或 URL 获取开始，然后明确告诉 AI 要修改的区域，不要求它重建页面中没有变化的部分。

AI 精修：选择已有页面作为定向修改的起点

打开精修工作区

选择 AI 精修入口，等待页面预览加载。工作区会将指令区域与页面预览并列展示，方便你选中需要修改的具体内容。

AI 精修：正在处理已选中的页面

选择修改范围

使用 Click to select 选择单个元素，或使用 Area select 选择一个区域。页面较复杂时可以进入全屏模式，获得更大的选择空间。选中后，在输入框中说明修改要求，例如改写选中文字、替换图片或调整指定视觉区域。

AI 精修：标记本次指令需要影响的元素

检查结果并继续编辑

生成完成后，对比修改后的预览和原页面。结果符合预期时，可以打开编辑器继续调整；如果修改范围不准确，应缩小选区或重新组织指令，不要让 AI 误改其他区域。

AI 精修：检查结果后打开编辑器或预览

1.6 AI 文件转可编辑 HTML

File to HTML可以把源素材整理成可编辑 HTML 页面。适合从 PDF、Word 文档、PPT/PPTX、Excel/XLSX、CSV、Markdown、TXT 或图片开始，而不是从已有 HTML 开始。

文件转 HTML：从文档、表格、演示文稿或图片开始

上传源文件

打开 File to HTML，附加源文件，并补充一段说明，告诉系统希望生成什么页面。可以说明页面用途、目标受众、语气、内容结构或视觉方向。

文件转 HTML：上传源文件并描述希望生成的页面

等待内容整理

HtmlDrag 会先读取源素材，识别内容层级并规划页面布局。长文档、表格、幻灯片和图片的处理时间可能不同。

文件转 HTML：正在将源素材整理为 HTML 页面

文件转 HTML：正在整理层级、布局和页面组件

检查可编辑结果

页面生成后，检查右侧预览，并根据需要选择 AI Refine、Open in Editor、Share 或 Download HTML。输出结果是可继续编辑的 HTML 页面，可以接着进入同一套可视化编辑流程。

文件转 HTML：生成的 HTML 页面已经可以检查和继续编辑

二、可视化编辑器核心功能

HtmlDrag 的核心是一个强大的所见即所得编辑器，让您在真实的 HTML 环境中直接操作，告别代码编辑的繁琐。

2.1 编辑器界面概览

可视化编辑器由画布、左侧导航、右侧控制面板以及保存和导出操作组成。画布会标出当前选中的元素，右侧面板则显示作用于当前选区的编辑控件。

编辑器工作区：选中元素后进行调整，并保存或导出作品

左侧导航与历史记录

左侧导航用于切换主页和作品区域，也可以从这里返回不同的创建入口或打开已有作品。

中央画布

画布展示导入或生成的 HTML 页面。可以直接选中元素；页面结构复杂时，可使用选择工具，并通过缩放或全屏控件获得更大的操作空间。

右侧面板（编辑 / 组件 / 图层 / 收藏）

右侧面板包含当前元素的编辑控件、组件插入、图层定位以及收藏组件复用功能。

顶部与底部操作

顶部区域提供作品标题、分享、图片导出和 HTML 导出操作；底部控件提供预览、还原、刷新和保存版本操作。

2.2 基础操作与元素选择

编辑器支持直接选择、区域选择、全屏查看和定向编辑。开始操作前，先用尽可能小的选区覆盖需要修改的内容。

选择界面：应用定向修改前先检查已选中的元素

元素识别

使用 Click to select 可以直接选中页面上的单个元素。编辑器会标出选区，并在选择状态中显示对应标签或内容。

区域选择与全屏模式

当多个相邻元素属于同一个视觉区域时，可以使用 Area select。页面较复杂时，使用 Full screen 获得更大的选择、检查和精修空间。

全屏选择：为复杂页面提供更大的操作空间

拖拽模式与编辑模式

使用拖拽模式调整选中元素的位置，使用编辑模式修改文字或支持编辑的元素内容。右侧控件会根据当前选区同步变化。

锁定、隐藏与删除元素

可以通过元素控件或右键菜单锁定元素，避免误编辑；也可以暂时隐藏元素，或将元素从当前 HTML 中删除。删除前应先确认选区，若需要回退，可使用撤销或还原功能。

右键快捷菜单

右键点击选中元素，可以使用复制、粘贴、添加到收藏、链接编辑、图层操作、锁定、隐藏和删除等快捷操作。

批量选择

当多个元素需要一起检查或调整时，可以使用批量选择。应用修改前先检查已选元素列表，如果某个元素不应受影响，应先将它移出选区。

2.3 画布快捷键体系

熟练使用快捷键可以大幅提升编辑效率。以下是画布区域支持的主要快捷键操作：

2.4 右侧面板 - 编辑栏目

"编辑"栏目是最常用的功能区，提供模式切换开关和丰富的样式调整工具。选中元素后，面板会根据元素类型智能显示对应的编辑选项。

编辑栏目：模式切换与样式工具

模式切换

面板顶部提供四个模式开关，用于控制编辑器的交互行为。每个开关都可独立开启或关闭，开关状态会通过消息提示告知当前状态。

提示：为了编辑组件，系统已默认阻止作品里的链接跳转。如需要开启，可在编辑台区域打开"链接跳转"开关。编辑模式下表单提交也会被阻止，以保护您的编辑内容。

文字样式

选中文本元素或进入编辑模式后，面板会显示完整的文字样式工具。支持以下格式调整：

文字样式：字体、字号、颜色等设置

元素样式

选中任意元素后，可通过元素样式工具调整其外观属性：

图片样式

选中图片元素后，可调整图片的显示方式和进行图片替换：

表格样式

选中表格或表格单元格后，可使用专用的表格编辑工具调整表格结构和样式。详细说明请参见 4.10 表格编辑。

表格样式：行列操作、边框和单元格设置

链接编辑

可为任意元素添加点击跳转链接，或编辑已有链接：

对齐工具（多选时可用）

当选中多个元素时，面板会显示对齐和分布工具，帮助您快速整理元素布局：

2.5 右侧面板 - 组件栏目

"组件"栏目提供各类可插入元素的快捷入口，帮助您快速向画布添加新内容。点击对应按钮即可在画布中插入相应组件。

组件栏目：一键插入各类元素

2.6 右侧面板 - 管理栏目（DOM 图层树）

"管理"栏目提供画布中所有可编辑元素的列表视图，支持筛选、批量操作和精确定位，是管理复杂页面元素的利器。

管理栏目：图层管理与批量操作

元素卡片列表

面板以卡片形式列出页面中所有可管理的元素。每张卡片显示元素的标签类型（如 DIV、IMG、SPAN）和层级信息，文本元素还会显示内容预览。装饰层元素会标注"装饰"徽章。卡片右侧提供锁定/解锁和隐藏/显示的快捷操作图标。

筛选功能

点击筛选按钮可按元素状态过滤列表，支持以下筛选条件：

批量操作

在卡片列表中勾选多个元素后，可使用批量操作按钮进行统一处理：

精准识别开关

管理栏目提供精准识别开关，用于控制元素识别的精度：

点击卡片定位元素

点击任意元素卡片，画布会自动滚动并高亮显示对应的元素，方便您快速定位页面中的特定组件。这在处理复杂或层叠的页面布局时特别有用。

2.7 右侧面板 - 收藏栏目

"收藏"栏目是您的个人组件库，可以将常用的元素或组件收藏起来，在不同作品中重复使用，提高创作效率。

收藏栏目：个人组件库

收藏组件列表

面板以卡片形式展示您收藏的所有组件，每张卡片显示组件的缩略图和名称。收藏时系统会自动生成缩略图，未命名的组件显示为"未命名"。

搜索收藏

使用搜索框可以按名称快速查找收藏的组件。输入关键词后，列表会实时过滤显示匹配的结果。

插入收藏组件

点击收藏卡片上的"插入"按钮，即可将该组件插入到当前画布中。插入后的组件可以正常编辑和调整。

重命名/删除收藏

每张收藏卡片提供"重命名"和"删除"操作。点击重命名可修改组件名称，方便后续查找；删除操作会永久移除该收藏，请谨慎操作。

如何收藏组件

在画布中选中任意元素，通过右键菜单选择"收藏"，即可将该元素及其子元素作为组件保存到收藏库。收藏成功后会显示"已添加到收藏"提示。

2.8 右键快捷菜单

右键点击选中的元素会弹出快捷菜单，提供常用操作的快速入口。菜单内容会根据选中元素的类型动态调整。

右键菜单：快速访问常用操作

表格专属菜单

当右键点击表格单元格时，菜单会额外显示表格专属操作：

2.9 表格编辑

选中表格或表格单元格后，右侧面板会显示专用的表格编辑工具，提供完整的表格样式和结构调整功能。

表格编辑：行列操作与样式设置

行列操作

表格编辑面板的"行列操作"区域提供以下功能：

合并/拆分单元格

选中多个相邻单元格后，可使用"合并单元格"将它们合并为一个单元格。对于已合并的单元格，可使用"拆分单元格"将其还原为原始的多个单元格。

单元格对齐

设置单元格内容的对齐方式，分为水平和垂直两个维度：

边框样式

自定义表格边框的外观，包括：

设置完成后点击"应用"按钮生效。

单元格底纹

为单元格设置背景颜色，通过颜色选择器选择所需的底纹色，适合用于突出显示表头或重要数据行。

2.10 缩放控制与视口预设

缩放控制器位于画布底部，提供画布缩放和视口尺寸调整功能，帮助您在不同设备尺寸下预览作品效果。

缩放控制：调整画布缩放和视口尺寸

放大/缩小/重置

使用"+"和"-"按钮可放大或缩小画布视图，也可以按住 Ctrl/Cmd + 鼠标滚轮快速缩放。点击百分比数字可重置为默认缩放比例。按住空格键 + 鼠标拖拽可平移画布。

视口尺寸预设

点击视口选择器可切换不同的预览尺寸，模拟在不同设备上的显示效果：

预览补丁

对于特殊结构的 HTML 页面，系统提供三种预览补丁来优化显示效果。启用或关闭补丁后，系统会自动保存并刷新预览：

提示：如果补丁效果不明显，可执行一次"还原 HTML 为最初状态"后再尝试启用。

2.11 HTML 源码双向编辑器

HTML 源码编辑器允许您直接查看和编辑作品的完整 HTML 代码，适合需要精细调整或添加自定义代码的高级用户。此功能仅对Pro开放。

HTML 编辑器：直接编辑源代码（Pro）

查看/编辑完整 HTML

打开 HTML 编辑器后，会显示当前作品的完整 HTML 源代码（包含 <!DOCTYPE html>）。您可以直接在编辑器中修改代码，保存后即可应用更改。

搜索与替换

使用 Ctrl+F 打开查找功能，输入关键词可快速定位代码位置。使用 Ctrl+H 打开替换功能，可批量替换文本内容。工具栏显示匹配计数（如 "3 / 15"），支持逐个或全部替换。

跳转到行

使用 Ctrl+G 或工具栏的跳转功能，输入行号可快速定位到指定行，方便处理大型 HTML 文件。

区分大小写

搜索时可开启"区分大小写"选项，精确匹配大小写敏感的内容。

自动换行

开启自动换行后，过长的代码行会自动折行显示，无需水平滚动即可查看完整内容。

复制/保存

点击"复制 HTML"可将完整源代码复制到剪贴板。编辑完成后，点击保存按钮将更改应用到作品。如果内容为空或存在语法错误，保存时会提示相应信息。

注意：如果 HTML 内容过大超出容量限制，保存时会提示"容量不足，无法保存此次编辑"。请删除不必要的内容或升级订阅以扩容。

2.12 底部操作栏

底部操作栏提供编辑器最核心的操作按钮，包括预览、撤销/重做、还原和保存等功能。

编辑器工作区：底部控件用于预览、还原、刷新和保存版本

预览（新窗口打开）

点击预览按钮会在新窗口中打开作品的完整预览页面，展示作品的真实显示效果。预览页面会显示临时预览提示，提醒用户这是编辑阶段的预览，链接不可复用。

撤销/重做

撤销可回退上一步操作，重做可恢复被撤销的操作。支持多步撤销/重做。也可使用快捷键 Ctrl+Z（撤销）和 Ctrl+Y（重做）。

刷新预览

点击刷新按钮会重新加载预览区域。系统会先保存当前内容，然后刷新画布显示最新效果。适合在进行大量编辑后同步显示状态。

还原至上一次保存

将作品恢复到上一次手动保存的状态。所有未保存的编辑都会丢失，请谨慎操作。系统会在执行前提示确认。

还原 HTML 为最初状态

将作品的 HTML 恢复到首次创建时的原始状态。所有编辑历史都会清除。此操作不可逆，请确保已备份重要内容。

保存

手动保存当前作品的所有更改。系统也支持自动保存，但建议在完成重要编辑后手动保存确保数据安全。保存成功后会显示"保存成功"提示。

2.13 顶部操作栏

顶部操作栏显示作品信息和快捷操作按钮，提供分享和下载功能的快速入口。

编辑器工作区：顶部控件用于 HTML 下载、图片导出和分享

作品标题（双击编辑）

顶部显示当前作品的标题，双击标题区域可进入编辑模式，修改作品名称。标题不能为空，修改成功后会显示"标题修改成功"提示。未命名的作品显示为"未命名作品"。

分享按钮

点击分享按钮可开启作品分享功能，生成可访问的分享链接。详细说明请参见 4.16 分享功能。此功能仅对Pro开放。

下载按钮

右侧提供“下载图片”和“下载 HTML”按钮。详细下载选项和说明请参见 4.15 导出与下载 HTML。

三、项目管理、分享与导出

编辑完成后，你可以导出纯净的 HTML 文件、生成带密码的安全预览链接，或在项目中心统一管理与回滚版本快照。

3.1 导出与下载 HTML

使用右上角工具栏的 Download HTML 导出已经在编辑器中检查过的版本。导出弹窗会区分编辑后的页面和原始来源，同时提供复制 HTML 和交给 AI 的选项。

导出 HTML：选择编辑后或原始版本，也可以复制 HTML 或交给 AI

编辑后 HTML

Edited HTML 标签页导出当前版本，包含你在画布中完成的修改。

原始 HTML

Original HTML 标签页保留首次导入的源代码，适合对照或需要回到初始版本时使用。

复制 HTML 与 Export to AI

Copy HTML 会将当前源代码复制到剪贴板。Export to AI 会生成交接链接，让其他 AI 工作流读取当前 HTML，并从编辑后的结果继续处理。

3.2 分享功能与在线预览

分享功能会为当前作品生成公开链接，其他人无需进入编辑器即可查看。下方截图展示了发布链接前的分享设置。该功能面向 Pro 用户开放。

分享作品：选择链接有效期，并决定是否显示安全提示或侧边栏

选择分享设置

点击 Share，然后选择可用的有效期，例如 7 天、30 天、90 天或套餐剩余有效期。分享链接的有效期不会超过套餐到期时间。

设置访客页面显示

你可以选择隐藏安全提示，也可以选择隐藏分享页面的右侧边栏。这些设置只影响访客看到的页面，不会改变作品中的可编辑源代码。

分享页面与访问管理

分享成功后，复制生成的链接发送给评审者或客户。之后可以回到分享控制项更新链接，或者停止分享，让页面不再公开访问。

3.3 我的项目快捷操作栏

编辑器左侧提供“我的项目”快捷操作栏，支持展开/收起和快速切换作品，方便您在多个创作之间流畅跳转。

展开与收起

点击左上角的“我的项目”按钮，可展开作品列表侧边栏。再次点击或点击侧边栏外的区域即可收起。展开状态下，您可以直观地浏览历史作品缩略图和标题。

作品切换

在列表中点击任意作品卡片，编辑器将立即加载该作品的内容。这使您无需返回首页或个人中心，即可在不同设计方案之间快速比对和修改。

3.4 历史记录与版本快照

在左侧导航栏中，"我的项目"（历史记录）是您快速访问过往创作的入口。这里按时间顺序列出了您所有的编辑记录。

快速选择编辑

点击列表中的任意记录，即可快速载入编辑器，继续之前的创作。无需重新导入或查找文件。

预览窗口详情

将鼠标悬停在历史记录条目上，会显示该作品的预览窗口。在预览窗口中，您可以：

1. 直接编辑标题：点击标题文字即可直接修改作品名称。
2. 查看分享状态：图标指示该作品是否已开启分享。
3. 快速操作：提供进入编辑、删除等快捷按钮。

历史记录：快速预览和管理过往作品

3.5 项目中心与批量管理

项目管理模块集中展示您创建的所有作品，支持查看、编辑、分享和删除操作。

作品列表与筛选

作品以卡片或列表形式展示，您可以通过以下方式筛选：

1. 搜索：输入作品编码或标题进行搜索
2. 类型筛选：按 AI 生成、文件上传、复制网页、代码粘贴等类型筛选
3. 日期范围：选择开始和结束日期筛选特定时间段的作品
4. 排序方式：支持按最新优先、最旧优先、点赞数、浏览量排序

项目管理：查看、筛选和管理所有作品

作品查看与编辑

点击作品卡片的"查看"按钮可预览作品效果。在预览界面中，您可以：

1. 修改作品标题（双击标题编辑）
2. 点击"编辑"按钮进入可视化编辑器继续编辑
3. 查看作品的历史保存记录并恢复到指定版本

分享状态管理

Pro可以分享作品，让其他人通过链接查看：

1. 启用分享：点击"分享"按钮生成分享链接，有效期为 7 天
2. 更新分享：已分享的作品可更新链接，刷新有效期
3. 停止分享：点击"停止分享"立即使链接失效

作品删除

点击作品卡片的"删除"按钮可删除作品。系统会弹出两次确认对话框以防止误删：

1. 第一次确认：询问是否删除该作品
2. 第二次确认：提醒作品删除后不可恢复

提示：同一时间最多删除 3 条记录。删除作品后，其占用的存储空间会被释放。

我的项目页面是您查看和管理所有创作的专属空间。通过左侧导航栏或用户菜单均可快速访问。

作品展示

页面以卡片形式展示您的所有作品，每个卡片包含：

1. 缩略图预览：作品的视觉预览，方便快速识别
2. 作品标题：显示作品名称，支持点击编辑
3. 创建时间：记录作品的创建日期
4. 分享状态：显示作品是否已开启分享

我的项目：集中查看和管理您的所有创作

快捷操作

每个作品卡片提供便捷的操作按钮：

1. 编辑：进入可视化编辑器继续创作
2. 分享：生成或管理分享链接（Pro专享）

四、系统排查与环境规范

在使用过程中，您可能会遇到系统发出的各类检测提示或限制提醒。以下是常见系统提示的说明与应对建议。

4.1 HTML 检测与防盗链提示

为了保证导入效果和编辑体验，系统会在导入 URL 或上传文件时进行自动检测，并对潜在问题发出提示。

本地资源检测

如果导入的页面包含本地路径（如 file:// 或 C:/ 开头的图片/CSS链接），系统会提示资源无法加载。建议：确保所有资源均使用公开的 HTTP/HTTPS 网络链接。

图片防盗链提示

部分网站对图片启用了防盗链保护，导致在编辑器中无法显示。建议：使用"替换图片"功能上传本地图片，或将图片转存到可公开访问的图床。

动态渲染页面（SPA）提示

对于完全依赖 JavaScript 动态渲染的单页应用（SPA），由于无法直接抓取其动态生成的 DOM 结构，可能会导致导入内容为空或不完整。建议：尝试使用"粘贴代码"功能，在浏览器中复制渲染后的完整 HTML 代码进行导入。

外部字体/图标库提示

如果页面使用了特殊的网络字体或图标库且未正确跨域授权（CORS），可能会显示为默认字体或乱码。建议：在编辑器中使用系统内置的字体和图标库进行替换。

嵌入内容（iframe）提示

出于安全考虑，部分嵌入的 iframe 内容可能会被拦截或无法交互。系统会尽可能保留占位符。

4.2 容量与限制说明

HtmlDrag 对不同账户等级设有相应的资源配额限制。当达到限制时，系统会弹出"容量不足，操作未完成"或"作品数量上限"的提示对话框。

容量不足处理

当您的存储空间不足时，将无法保存新的编辑内容或上传文件。解决方法：

1. 进入"我的项目"删除不再需要的旧作品以释放空间。
2. 点击提示框中的"升级订阅"按钮，订阅 Pro 以获取更大的存储容量。

作品数量上限

Free 用户可保存的作品数量有限。达到上限后，需删除旧作品才能创建新作品，或升级订阅以提升作品数量限制。

图片上传限制

上传图片时，系统会检查单张图片大小及批量上传总大小。如果提示"文件内容超过服务器允许的大小"或"批量大小不可超过限制"，请压缩图片或分批上传。Pro通常拥有更高的单文件上传额度。

4.3 安全检测与沙箱防护

系统内置了强大的安全扫描机制（Security Scan），在导入 URL、上传文件或粘贴代码时会自动评估内容的风险等级，以保护您的账户安全。

风险等级说明

扫描完成后，系统会根据检测到的威胁类型（如 XSS 攻击、恶意脚本注入、危险 HTML 标签等）判定风险等级：

1. 低风险：检测到轻微告警，通常不影响使用，建议确认后继续。
2. 中风险：存在潜在隐患，需谨慎操作。
3. 高风险：检测到严重安全风险，建议仅在完全信任来源的情况下继续。
4. 严重风险：包含极高风险的恶意内容（如恶意软件站点、网络钓鱼特征），系统将直接拒绝处理并阻止保存。

安全加载模式

对于存在一定风险但可处理的文件，系统会提供"安全保障措施"，包括自动清理危险脚本与标签（Auto Sanitize）。您可以选择"采用安全加载模式"继续，系统将移除可疑代码并尽可能保留页面原本的视觉与功能，确保您能在编辑器内安全地进行修改。

4.4 消息通知中心

消息模块用于接收系统发送的重要通知，包括账户状态、订单提醒、订阅到期提醒以及功能更新公告等。

消息：接收系统通知和提醒

系统消息列表

消息列表按时间倒序排列，展示消息的标题、摘要、创建时间及过期时间。点击单条消息可查看详情或进行相关操作（如"继续支付"、"前往续费"等）。

未读筛选

勾选列表右上角的"只看未读"复选框，可快速筛选出所有未读消息，帮助您聚焦重要通知。

全部标记已读

点击"全部标记已读"按钮，可一键将当前列表中的所有消息状态更新为已读，消除红点提示。

消息详情

点击消息卡片进入详情页，查看完整的通知内容。对于订单或订阅相关的消息，详情页通常会提供快捷跳转按钮，方便您处理相关事务。

4.5 意见与工单反馈

如果您在使用过程中遇到问题或有功能建议，可以通过意见反馈模块提交给我们。支持上传图片以更直观地描述问题。

意见反馈：提交问题或建议

反馈列表与状态

反馈列表展示您提交的所有历史反馈及其当前状态。状态包括：

1. 处理中：反馈已提交，等待管理员查阅。
2. 已回复：管理员已对您的反馈进行了回复，请点击查看。
3. 已关闭：该反馈已归档或问题已解决，无法继续回复。

提交新反馈

点击"新建反馈"按钮，填写反馈内容（必填，至少10个字）。您还可以点击"上传图片"添加相关截图（最多支持上传特定数量的图片，单张大小限制为2MB），帮助我们更快定位问题。填写完成后点击"提交反馈"。

反馈详情与对话记录

点击反馈列表项进入详情页，您可以查看完整的对话记录，包括您的提问和管理员的回复。页面上方会显示反馈ID和附件图片预览。

继续回复

对于"处理中"或"已回复"状态的反馈，您可以在详情页底部的输入框中继续补充内容或回复管理员，保持沟通直至问题解决。

在提交反馈时，您可以选择添加相关截图或文件，帮助我们更好地理解您的需求。同时，您也可以在反馈详情页中查看管理员的回复和对话记录，方便您跟踪问题的处理进展。

我们重视每一条反馈，并会尽快处理您的反馈。感谢您的参与和支持！

五、账户体系、积分与订阅（附录）

账户中心用于管理个人登录信息、积分充值、订单记录以及会员订阅方案。

5.1 注册账号

HtmlDrag 采用邮箱注册方式，您只需填写几项基本信息即可完成账户创建，注册成功后自动登录并跳转到首页。

邮箱注册流程

在注册页面，按以下步骤完成账户创建：

1. 输入邮箱：填写您常用的邮箱地址，该邮箱将作为登录凭证和接收通知的渠道。请确保邮箱格式正确，如 [email protected]。
2. 设置密码：密码必须包含字母和数字，长度在 8-32 位之间。建议使用强密码以保障账户安全。
3. 确认密码：再次输入密码，确保两次输入一致。
4. 设置昵称（选填）：您可以自定义昵称，若不填写，系统将自动为您生成一个默认昵称。
5. 同意服务条款：勾选"我已阅读并同意《服务条款》和《隐私政策》"后，点击"立即注册"按钮完成注册。

注册页面：输入邮箱和基本信息完成注册

邮箱验证与积分奖励

注册成功后，系统会向您的邮箱发送一封验证邮件。完成邮箱验证后，您将获得注册积分奖励，可用于 AI 生成和复制网页等付费功能。如果没有收到邮件，请检查垃圾邮件文件夹；3 分钟后可点击"重新发送"按钮再次获取验证邮件。

提示：完成邮箱验证不仅能获得积分奖励，还能解锁完整使用体验并提升账号安全性。

5.2 登录账号

HtmlDrag 支持多种登录方式，您可以根据个人偏好选择最便捷的方式登录。

邮箱密码登录

使用注册时填写的邮箱和密码进行登录：

1. 在登录页面输入您的邮箱地址
2. 输入密码（可点击眼睛图标切换密码显示/隐藏）
3. 点击"登录"按钮完成登录

登录成功后，页面将自动跳转到首页，您可以开始创作。

第三方登录（Google / GitHub）

如果您希望更快捷地登录，可以使用 Google 或 GitHub 账号：

1. 使用 Google 账号登录：点击"使用 Google 账号登录"按钮，在弹出的 Google 授权页面中选择您的账号并确认授权。
2. 使用 GitHub 账号登录：点击"使用 GitHub 账号登录"按钮，页面将跳转到 GitHub 授权页面，确认授权后自动返回 HtmlDrag。

登录页面：支持邮箱密码和第三方账号登录

提示：使用 Google 或 GitHub 登录可自动创建账号，无需单独注册。首次使用第三方登录时，系统会自动为您创建一个关联账户。

忘记密码入口

如果您忘记了登录密码，可以点击登录页面右下方的"忘记密码？"链接，进入密码重置流程（详见 1.3 节）。

5.3 找回与重置密码

如果您忘记了登录密码，可以通过邮箱验证码重置密码。整个流程在一个页面完成，无需跳转。

重置密码流程

按照以下步骤完成密码重置：

1. 输入邮箱：填写您注册时使用的邮箱地址
2. 获取验证码：点击"获取验证码"按钮，系统会向您的邮箱发送一封包含 6 位数字验证码的邮件
3. 输入验证码：在验证码输入框填入您收到的 6 位数字验证码
4. 设置新密码：输入新密码（必须包含字母和数字，长度 8-32 位）
5. 确认新密码：再次输入新密码确保一致
6. 点击"重置密码"：完成密码重置，系统提示成功后将自动跳转到登录页面

找回密码：通过邮箱验证码重置密码

验证码有效期

验证码有效期有限，请在收到邮件后尽快使用。如果验证码已过期，可以点击"重新发送"按钮获取新的验证码（需等待倒计时结束后才能重新发送）。

注意：如果您的邮箱尚未在系统中注册，将无法发送验证码。请确认输入的是注册时使用的邮箱地址。

5.4 个人资料与头像设置

个人资料模块让您管理账户的基本信息，包括头像、昵称、邮箱、个人简介和密码设置。

头像修改

点击头像区域的"更换头像"按钮，选择本地图片文件上传。系统会自动裁剪并保存您的新头像。

昵称修改

点击昵称旁的编辑按钮，输入新的昵称后点击"保存"。昵称将在您的所有作品和评论中显示。

邮箱管理

邮箱区域显示当前绑定的邮箱地址及验证状态：

1. 已验证：邮箱已完成验证，可正常使用所有功能
2. 未验证：可点击"发送验证邮件"完成验证，验证后可获得积分奖励
3. 修改邮箱：需先验证当前邮箱，然后输入新邮箱地址完成更换

个人简介

在个人简介区域输入您的自我介绍（建议不超过 200 字），点击"保存"即可更新。

修改密码 / 设置密码

点击"修改密码"按钮打开密码设置对话框：

1. 已设置密码的用户：需输入当前密码，然后设置新密码（8-32位，包含字母和数字）
2. 未设置密码的用户：直接设置新密码即可，设置后可使用邮箱和密码登录

注销账号

如需注销账号，点击页面底部的"注销账号"按钮。出于安全考虑，需要先通过邮箱验证码验证身份。

注意：提交注销后，账号将进入保留期（通常为 30 天），期间无法登录。保留期结束后，系统会永久删除您的作品、积分和历史记录。

个人资料：管理头像、昵称、邮箱和密码

5.5 容量使用监控

容量使用模块展示您账户的存储使用情况，帮助您了解剩余空间并合理规划创作。

容量概览

顶部显示总体使用情况，包括：

1. 已用容量：当前已使用的存储空间
2. 总容量：您的账户存储上限（Pro享有更大容量）
3. 剩余容量：可用于创建新作品的空间
4. 已储存作品：当前保存的作品数量及上限

容量分布

系统将存储空间分为三类统计：

1. HTML 内容：作品的网页代码占用空间
2. 图片资源：上传的图片文件占用空间
3. 其他资源：其他附加资源占用空间

作品数量限制

Free和Pro的作品数量上限不同。当达到上限时，需删除部分作品或升级订阅后才能创建新作品。

容量刷新与升级

点击刷新按钮可更新容量信息。如需更大存储空间，可点击"升级扩容"按钮进入订阅中心选择适合的订阅方案。

提示：如果账户容量已满或作品数量达到上限，系统会冻结新增作品权限。请删除部分作品或升级订阅以恢复上传权限。

5.6 积分记录与消耗明细

积分记录模块展示您账户的积分交易历史，包括消耗和获取记录。

积分交易历史

积分记录以表格形式展示，包含以下信息：

1. 日期：积分变动的时间
2. 类型：积分变动的操作类型
3. 积分变化：增加（正数）或减少（负数）的积分数量
4. 描述：详细的变动说明

您可以通过日期范围筛选查看特定时间段的记录。

积分类型说明

1. AI 生成：使用 AI 生成功能时消耗积分
2. 复制网页：使用复制网页功能时消耗积分
3. 注册奖励：新用户注册并完成邮箱验证后获得的积分奖励
4. 平台赠送：平台赠送的积分
5. 订阅赠送：Pro每月赠送的积分额度
6. 购买积分：通过积分充值获得的积分
7. 管理员调整：由管理员手动调整的积分

积分记录：查看积分收支明细

提示：Pro每月可获得额外的赠送积分，积分可用于 AI 生成和复制网页等付费功能。

5.7 订单记录与账单

订单记录模块展示您的购买历史和支付记录，方便您查询和管理订单。

订单管理

订单列表展示您的购买记录，您可以：

1. 查看订单状态和详情
2. 通过筛选功能快速查找特定订单
3. 对待支付订单继续完成支付
4. 关闭或删除不需要的订单

提示：如果订单支付遇到问题，可以关闭当前订单后重新下单。

5.8 订阅中心与会员方案

订阅中心页面是管理您的订阅和积分充值的入口。选择适合您的方案，解锁更多创作可能。

订阅方案

HtmlDrag 提供 Pro 和 Pro Max 订阅方案，订阅后可在有效期内使用对应权益：

Pro：适合常规创作者使用完整的 HTML 编辑、AI 生成、分享与导出能力。

Pro Max：适合更高频的 AI 创作、更大的项目和更高配额需求。

订阅会按照结账页展示的计费周期续订，您可以在账户或支付平台中管理或取消续订。

订阅中心：选择适合您的订阅方案

积分充值

如果您只需要临时使用 AI 生成或复制网页功能，可以选择积分充值。充值的积分永久有效，不会过期，积分不足时可随时充值，无需等待。

功能对比

Free 与 Pro 的主要功能差异如下：

积分使用说明

每次 AI 生成作品消耗固定积分。Free每月获得基础赠送积分，Pro每月获得更多赠送积分。充值的积分永久有效，不会过期，积分不足时可随时充值，无需等待额度恢复。

开始使用 HtmlDrag

你可以从已有 HTML、公开网页 URL、AI 精修指令或支持的文件开始。HtmlDrag 帮助你从源素材进入可视化编辑、分享预览或干净 HTML 导出的完整流程。

立即开始创作

本指南涵盖 HTML 上传、代码粘贴、复制网页、AI 精修、文件转 HTML，以及文字、图片、表格、组件、图层、链接、元素锁定与删除、保存、分享和 HTML 导出。