网站搭建指南（Website Builder）

本指南覆盖 MihootCRM 的官方网站搭建功能——通过可视化编辑器和 AI 智能建站，快速搭建和发布企业官网，无需编写代码。

访问入口：Website 页面管理

1. 功能概述

网站搭建器让你在一个地方完成网站从创建到发布的全流程：

创建页面 → 可视化编辑 → 预览 → 发布

3 种建站方式：

2. 页面管理

使用场景

• 管理网站页面结构：查看、创建、删除网站的所有页面
• 首页保护：确保网站始终有首页

操作步骤

1. 进入 Website 页面列表
2. 查看所有已创建的网站页面（路径、标题、更新时间）
3. 点击**"创建页面"**（CreateWebsitePageDialog）：
   • 填写页面路径（如 /about）
   • 填写页面标题
4. 点击页面进入可视化编辑器进行设计
5. 不再需要的页面可删除

如果路径 /（首页）不存在，系统会自动创建默认首页。

3. 可视化编辑器

入口：/website/editor/[pageId]（从页面列表点击某个页面进入）

编辑器功能

操作步骤：编辑页面

1. 进入编辑器后，画布展示当前页面的布局
2. 从左侧组件面板选择需要的模块：
   • 文本模块：标题、段落、引用
   • 媒体模块：图片、视频、轮播图
   • 布局模块：分栏、容器、间距
   • 功能模块：表单、按钮、地图
3. 拖拽模块到画布的目标位置
4. 点击模块，右侧配置面板修改内容和样式
5. 调整模块顺序、间距、对齐等
6. 编辑完成后点击保存

4. AI 智能建站

使用场景

• 零基础建站：完全不懂设计，只需用自然语言描述想要的网站内容
• 快速原型：需要快速生成页面框架，再手动微调细节

操作步骤

1. 在页面列表或编辑器中，打开 AI 建站对话（WebsiteBuilderChat）
2. 用自然语言描述你的需求，例如：
   • "创建一个口腔诊所首页，包含预约咨询入口、医生团队介绍、服务项目和患者评价"
   • "创建一个关于我们的页面，介绍我们诊所的历史和使命"
3. AI 分析你的描述，自动生成页面内容
4. 实时跟踪生成进度（内容生成 → 模块布局 → 样式匹配）
5. 生成完成后，页面内容自动填充到编辑器
6. 审阅结果，可继续手动微调或重新生成

AI 建站依赖：使用租户配置的 AI 模型，需确保 AI 模型配置 已正确设置。

AI 建站技巧

• 描述越详细越好：包含行业、目标受众、核心内容板块、风格偏好
• 分块生成：一个页面一次，不要试图一次描述整个网站
• 生成后微调：AI 生成的是骨架，手动微调细节（颜色、图片、文案）

5. 主题选择

使用场景

• 快速换装：在不改内容的前提下，一键切换网站整体风格
• 品牌试装：尝试不同配色方案，选择最符合品牌调性的

操作步骤

1. 在编辑器中点击主题选择（SiteThemeSelect）
2. 从多套预设主题模板中选择：
   • 简约白：白色为主，适合专业服务类
   • 医疗蓝：蓝色系，适合医疗健康行业
   • 活力橙：暖色系，适合年轻品牌
3. 选择后，页面全局样式（颜色、字体、间距、按钮样式等）即时更新
4. 满意后保存

6. 资源管理

使用场景

• 管理网站静态资源：图片、CSS 文件、JavaScript 文件等
• 统一素材库：页面上引用的所有图片统一管理

操作步骤

1. 在编辑器中打开 资源管理（WebsiteAssetList）
2. 查看已上传的资源列表
3. 上传新资源：支持图片、CSS、JS 等文件
4. 在页面编辑器中选择资源引用，或在组件配置中指定

7. 预览与发布

站点预览

1. 编辑完成后，点击**"预览站点"**
2. 系统生成预览 Token，在新标签页中打开完整预览
3. 预览的效果即为发布后的实际效果（含响应式适配）

发布说明

网站的发布配置由企业管理员在部署层面处理（域名绑定、CDN 配置等）。做好内容后，联系管理员确认发布流程。

8. 典型建站流程示例

场景：口腔诊所快速建站（30 分钟）

1. 首页 AI 生成（5 分钟）：描述 → AI 生成 → 微调
   • 对话："创建口腔诊所首页，包含预约入口、医生团队介绍、服务项目（种植/正畸/修复/美白）、患者评价轮播"
2. 关于我们（5 分钟）：AI 生成诊所介绍页面
3. 服务项目（5 分钟）：为每个服务创建独立页面
4. 选择主题（2 分钟）：选择"医疗蓝"主题
5. 预览检查（5 分钟）：全站预览，检查移动端效果
6. 微调（8 分钟）：修正细节、替换图片、添加联系方式

总耗时：约 30 分钟完成一个完整的诊所官网。

9. 相关文档

• 营销管理指南 — 内容营销场景总览
• AI 智能助理指南 — AI 模型配置
• 公众号营销指南 — 图文 + 网站双向导流