React Email Agent Skill 完全指南：让 AI Agent 构建、渲染与发送 HTML 邮件-二趣网

React Email Agent Skill 完全指南：让 AI Agent 构建、渲染与发送 HTML 邮件

【免费下载链接】react-email💌 Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email

导读

本文围绕当前仓库中skills/react-email/技能包展开，介绍如何让 AI Agent 掌握 React Email 的完整开发能力——从安装脚手架、编写组件化邮件模板，到 Tailwind 样式规范、HTML/纯文本渲染、多邮件服务商发送、国际化与可视化编辑器集成。读完本文，你将理解该技能包的渐进式披露设计、核心指令（SKILL.md）与 6 份按需加载的参考文档（references/）如何协作，并能在自己的 Agent 工作流中复用它来稳定产出符合邮件客户端兼容性要求的模板。

技能包概览：什么是 Agent Skill

skills/react-email/README.md开篇就说明了本目录的定位：这是一个Agent Skill，一种给 AI Agent 注入专业知识与工作流的标准化格式。该技能教会 Agent 五类核心能力：

使用 React Email 组件构建 HTML 邮件模板；
通过@react-email/editor为 React 应用接入可视化拖拽式邮件编辑器；
通过 Resend 及其他服务商发送邮件；
实现多语言（国际化）支持；
遵循邮件开发最佳实践。

技能元数据（见 SKILL.md 的 frontmatter）进一步界定了它的触发场景：构建 HTML 邮件模板、给应用添加可视化邮件编辑器、把邮件渲染为 HTML、用 Resend 发送邮件，覆盖欢迎邮件、密码重置、通知、订单确认、新闻通讯、事务邮件以及可嵌入的编辑器组件等场景。

技能包结构与渐进式披露设计

目录结构

skills/ └── react-email/ ├── SKILL.md # 核心技能指令（< 350 行） ├── TESTS.md # 技能合规性测试场景 └── references/ ├── COMPONENTS.md # 组件完整参考 ├── EDITOR.md # 可视化邮件编辑器参考 ├── I18N.md # 国际化指南 ├── PATTERNS.md # 常见邮件模式与示例 ├── SENDING.md # 邮件发送指南 └── STYLING.md # 样式与 CSS 参考

渐进式披露（Progressive Disclosure）

技能包按三层设计，以控制 Agent 的上下文占用：

元数据（约 100 token）：frontmatter 中的名称与描述，用于技能选择；
核心指令（约 3K token）：SKILL.md的完整内容，技能激活时加载；
详细参考（按需加载）：组件文档、国际化指南、模式示例等，只在处理具体任务时读取。

这种"按需加载"设计让 Agent 只为当前任务加载必要的内容，避免一次性吞入全部文档。这也是为什么SKILL.md被严格控制在 350 行以内，而references/则承担深度内容。

安装与项目初始化

技能包要求 Agent 先完成安装或脚手架搭建，SKILL.md 提供了三种方式：

方式一：直接安装

npm i react-email

方式二：脚手架新项目

npx create-email@latest cd react-email-starter npm install npm run dev

create-email脚手架对应仓库中的 packages/create-email，支持 npm、yarn、pnpm、bun 任一包管理器，只需替换相应命令。开发服务器默认运行在localhost:3000，提供emails文件夹内模板的预览界面。

方式三：接入现有项目

安装依赖后在package.json添加脚本：

{ "scripts": { "email": "email dev --dir emails --port 3000" } }

注意两点：--dir指向的emails路径要相对项目根目录；tsconfig.json需开启 JSX 支持。

编写第一个基础邮件模板

技能包给出的基础模板示范了标准组件结构（以 Tailwind 组件做样式）：

import { Html, Head, Preview, Body, Container, Heading, Text, Button, Tailwind, pixelBasedPreset } from 'react-email'; interface WelcomeEmailProps { name: string; verificationUrl: string; } export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) { return ( <Html lang="en"> <Tailwind config={{ presets: [pixelBasedPreset], theme: { extend: { colors: { brand: '#007bff', }, }, }, }} > <Head /> <Body className="bg-gray-100 font-sans"> <Preview>Welcome - Verify your email</Preview> <Container className="max-w-xl mx-auto p-5"> <Heading className="text-2xl text-gray-800"> Welcome! </Heading> <Text className="text-base text-gray-800"> Hi {name}, thanks for signing up! </Text> <Button href={verificationUrl} className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border" > Verify Email </Button> </Container> </Body> </Tailwind> </Html> ); } // Preview props for testing WelcomeEmail.PreviewProps = { name: 'John Doe', verificationUrl: 'https://example.com/verify/abc123' } satisfies WelcomeEmailProps; export { WelcomeEmail };

几个值得注意的细节：

Preview必须位于<Body>内部第一个元素，作为收件箱预览文本；
Button必须带box-border类，防止 padding 撑破按钮宽度；
.PreviewProps用于本地开发预览时提供测试数据，且只应包含组件实际用到的 props；
所有组件统一从react-email包导入——packages/react-email/src/index.ts 的第 1-2 行export * from '@react-email/render'与export * from './components/index.js'就是这一统一入口的实现：组件与render等渲染工具均由主包对外暴露。

组件体系：三类组件参考

references/COMPONENTS.md 给出完整组件清单，全部从react-email导入：

结构组件

组件	作用与要点
`Html`	根包裹组件，带`lang`/`dir`属性
`Head`	meta、样式、字体等文档头部元素
`Body`	邮件内容主体包裹
`Container`	最外层水平居中容器，内置`max-width: 37.5em`，一封邮件只能使用一次
`Section`	内部内容块（无内置最大宽度），用于在`Container`内分组
`Row`/`Column`	多列布局，`Column`必须搭配`Row`使用，宽度建议用百分比（如`w-1/2`、`w-1/3`）且合计 100%
`Tailwind`	启用 Tailwind 工具类的包裹组件，仅接受`config`prop

内容组件

组件	作用与要点
`Preview`	收件箱预览文本，保持在 140 字符以内，永远是`<Body>`第一个元素
`Heading`	h1-h6 标题，用`as`prop 指定级别
`Text`	段落文本
`Button`	样式化为按钮的链接，`href`必填，`target`默认`_blank`，务必带`box-border`
`Link`	超链接，`href`必填
`Img`	图片，`src`必须为绝对 URL；默认`alt=""`，有意义图片需写描述性 alt
`Hr`	水平分隔线，必须显式指定边框类型（如`border-solid`）

专用组件

组件	作用与要点
`CodeBlock`	Prism.js 语法高亮代码块，`code`/`language`/`theme`必填；应包在带`overflow-auto`的`div`中防止 padding 溢出；`lineNumbers`默认 false
`CodeInline`	在所有邮件客户端都可预测渲染的行内代码
`Markdown`	将 Markdown 转为邮件模板代码，支持`markdownCustomStyles`与`markdownContainerStyles`
`Font`	自定义 Web 字体，支持 woff2（推荐）、woff、truetype、opentype

组件参考中强调：只导入实际用到的组件，不要引入未使用的Button、Img、Row等。

样式规范：Tailwind 与邮件客户端限制

统一使用 pixelBasedPreset

references/STYLING.md 反复强调：邮件客户端不支持rem单位，因此 Tailwind 配置必须引入pixelBasedPreset（从react-email导入），将基于 rem 的工具类换算为像素。这也是 TESTS.md 中 Test A6、A15 的硬性验收标准。

邮件客户端不支持的 CSS 特性

特性	处理方式
SVG/WEBP 图片	仅使用 PNG 或 JPEG
Flexbox / Grid	使用`Row`/`Column`组件或表格布局（Outlook 使用 Word 渲染引擎，不支持 flex/grid）
媒体查询（`sm:`、`md:`、`lg:`、`xl:`）	使用移动优先的堆叠布局，Gmail 会剥离媒体查询、Outlook 直接忽略
主题选择器（`dark:`、`light:`）	若需深色主题，直接在主题/样式中使用深色值，不加前缀
`rem`单位	通过`pixelBasedPreset`转为像素

必需工具类

组件	必需类	原因
`Button`	`box-border`	防止 padding 溢出按钮宽度
`Hr`/ 任何边框	`border-solid`（或`border-dashed`等）	邮件客户端不继承边框类型
单侧边框	`border-none`+ 对应侧	先重置其他侧默认边框

单侧边框的典型写法：border-none border-l border-solid border-l-gray-300。

结构注意点

使用 Tailwind 时，<Head />必须放在<Tailwind>内部；
<Preview>永远是<Body>第一个元素；
已知尺寸元素（logo、图标）用固定宽高；内容图片用响应式尺寸（w-full h-auto）。

品牌一致性

STYLING.md 建议为所有模板建立集中的 Tailwind 配置（如emails/tailwind.config.ts），用satisfies TailwindConfig获得智能提示，统一管理品牌色（primary/secondary/text/text muted/background/surface），模板中只使用语义化类名（如bg-brand-primary）而不要硬编码色值；配色变化时只改配置文件。

静态文件与图片处理

目录结构

本地图片必须放在emails目录内的static文件夹：

project/ ├── emails/ │ ├── welcome.tsx │ └── static/ <-- 图片放这里 │ └── logo.png

Dev / Production URL 模式

使用NODE_ENV判断的baseURL模式，让图片在开发预览与生产环境都能工作：

const baseURL = process.env.NODE_ENV === "production" ? "https://cdn.example.com" // 用户的生产 CDN : ""; export default function Email() { return ( <Img src={`${baseURL}/static/logo.png`} alt="Logo" width="150" height="50" /> ); }

工作原理：开发时baseURL为空字符串，URL 为/static/logo.png，由 React Email 开发服务器直接伺服；生产时baseURL替换为 CDN 域名。技能包明确禁止硬编码localhost:3000（TESTS.md 的 Test C2、D5 专门验证这一点），并要求在编码前向用户确认生产托管 URL。

渲染为 HTML 与纯文本

render函数统一负责把 React 组件渲染为 HTML 与纯文本：

import { render } from 'react-email'; import { WelcomeEmail } from './emails/welcome'; // 渲染为 HTML const html = await render( <WelcomeEmail name="John" verificationUrl="https://example.com/verify" /> ); // 渲染为纯文本 const text = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />, { plainText: true });

从源码看，render的实现位于 packages/render/src/node/render.tsx：它动态加载react-dom/server，优先使用renderToReadableStream（否则回退renderToPipeableStream），用ErrorBoundary包裹节点并在出错时立即 reject；拿到 HTML 后若options.plainText为真，则通过toPlainText（或unstableTextConversion对应的转换器）产出纯文本。仓库在packages/render/src/node/、edge/、browser/三个环境各有一套render实现（如 edge 版），并在 node 渲染测试等用例中验证了plainText: true的纯文本输出路径。

发送邮件：多服务商方案

references/SENDING.md 强调一个前置要求：from地址必须使用已验证域名，若用户没有已验证域名，应引导其向邮件服务商完成验证。

Resend（推荐）

Resend Node SDK 可直接接收 React 组件，自动处理 HTML 与纯文本渲染：

import { Resend } from 'resend'; import { WelcomeEmail } from './emails/welcome'; const resend = new Resend(process.env.RESEND_API_KEY); const { data, error } = await resend.emails.send({ from: 'Acme <onboarding@resend.dev>', to: ['user@example.com'], subject: 'Welcome to Acme', react: <WelcomeEmail name="John" verificationUrl="https://example.com/verify" /> }); if (error) { console.error('Failed to send:', error); }

上传为 Resend 模板

也可将邮件上传为 Resend 模板，之后在 SDK 中按模板 ID 发送：

npx react-email@latest resend setup

await resend.emails.send({ from: 'Acme <onboarding@resend.dev>', to: ['user@example.com'], subject: 'Welcome to Acme', template: { id: '1245-1256-1234-1234', } });

其他服务商

SENDING.md 给出了三种通用模式——先render出 HTML，再交给各服务商 SDK：

Nodemailer：nodemailer.createTransport(...)后transporter.sendMail({ html })；
Mailgun：mailgun.client({ key })后client.messages.create(domain, { html })；
SendGrid：sgMail.setApiKey(...)后sgMail.send({ html })。

仓库 examples 目录下还有 AWS SES、Azure Communication、Mailtrap、Postmark、SendGrid、Mailgun、Resend 等十余个可运行的服务商示例，可对照参考。

CLI 命令

react-email包通过email命令提供 CLI：

命令	说明
`email dev --dir <path> --port <port>`	启动预览开发服务器（默认`./emails`，端口 3000）
`email build --dir <path>`	构建预览应用以部署到生产
`email start`	运行构建后的预览应用
`email export --outDir <path> --pretty --plainText --dir <path>`	将模板导出为静态 HTML 文件
`email resend setup`	通过 API key 将 CLI 连接到 Resend 账户
`email resend reset`	移除已存储的 Resend API key

国际化（i18n）

references/I18N.md 说明 React Email 官方支持三个 i18n 库：next-intl（适合 Next.js 应用）、react-intl / FormatJS（适合复数、日期、数字等复杂格式化）、react-i18next（适合非 Next.js 应用或需要更多控制）。

以 next-intl 为例，核心步骤是：

创建按语言组织的消息文件（messages/en.json、messages/es.json、messages/fr.json）；
在模板中用createTranslator读取当前 locale 的消息：

export default async function WelcomeEmail({ name, verificationUrl, locale }: WelcomeEmailProps) { const t = createTranslator({ messages: await import(`../messages/${locale}.json`), namespace: 'welcome-email', locale }); return ( <Html lang={locale}> {/* ... <Preview>{t('subject')}</Preview> ... */} </Html> ); }

发送时按用户 locale 传入组件：<WelcomeEmail name="Jean" verificationUrl="..." locale="fr" />。

最佳实践还包括：locale 设为必填 prop；<Html lang={locale}>；RTL 语言（['ar', 'he', 'fa']）自动设置dir={isRTL ? 'rtl' : 'ltr'}；提供 fallback 翻译（locale 文件加载失败时回退英文）；各 locale 文件保持键名一致；注意翻译邮件主题行；用IntlAPI 处理日期/数字/货币格式的一致性。

可视化邮件编辑器（@react-email/editor）

技能包支持为应用接入可视化编辑器。该编辑器基于 TipTap/ProseMirror 构建，产出邮件就绪的 HTML。references/EDITOR.md 详细记录了其能力：

安装与 CSS

npm install @react-email/editor

需要React 18+与支持 package exports 的打包器（Vite、Next.js、Webpack 5 等）。引入默认主题：

import '@react-email/editor/themes/default.css';

也可按需引入styles/bubble-menu.css、styles/slash-command.css、styles/inspector.css。

EmailEditor 全功能组件

import { EmailEditor, type EmailEditorRef } from '@react-email/editor'; import '@react-email/editor/themes/default.css'; import { useRef } from 'react'; export function MyEditor() { const ref = useRef<EmailEditorRef>(null); return ( <EmailEditor ref={ref} content="<p>Start typing...</p>" theme="basic" /> ); }

EmailEditor内置了 StarterKit、EmailTheming、气泡菜单与斜杠命令。其 props 包括content（HTML 字符串或 TipTap JSON）、onChange、onUploadImage、onReady、theme（'basic' | 'minimal'，默认'basic'）、editable、placeholder、bubbleMenu、extensions（完全覆盖默认扩展）与className。EmailEditorRef暴露export()（返回{ html, text }）、getJSON()、getHTML()与底层editor实例。

编辑器架构的六个入口

导入路径	用途
`@react-email/editor`	`EmailEditor`全功能组件
`@react-email/editor/core`	`composeReactEmail`序列化、`EmailNode`、`EmailMark`、事件总线、类型
`@react-email/editor/extensions`	`StarterKit`与 35+ 邮件感知扩展
`@react-email/editor/ui`	`BubbleMenu`、`SlashCommand`、`Inspector`
`@react-email/editor/plugins`	`EmailTheming`插件
`@react-email/editor/utils`	属性辅助与样式工具

扩展与导出

BubbleMenu：选中文本时出现的浮动格式工具栏（粗体、斜体、下划线、删除线、代码、大写、对齐、节点类型、链接），另有LinkDefault、ButtonDefault、ImageDefault上下文菜单；可用excludeItems排除条目；
SlashCommand：输入/插入内容块，默认命令覆盖 TEXT、H1-H3、列表、引用、代码、BUTTON、DIVIDER、SECTION、两列/三列/四列布局，也可import { BUTTON, H1, H2, TEXT }单独挑选；
Inspector：随选区自动切换文档/节点/文本控制的面板（Inspector.Root/Breadcrumb/Document/Node/Text），需要EmailTheming插件；
EmailTheming：主题在composeReactEmail时解析并内联为style属性，内置'basic'（完整排版，默认）与'minimal'（几乎无样式）；
composeReactEmail：低层导出函数，遍历文档节点与 mark，对每个EmailNode/EmailMark调用renderToReactEmail()，应用主题样式后包进基础模板渲染出 HTML 与纯文本；
自定义扩展：用EmailNode.create({ ..., renderToReactEmail({ children, style }) })创建邮件兼容的节点，EmailMark用于行内格式。

常见邮件模式

references/PATTERNS.md 提供了五个可直接参考的完整模板，每个都带PreviewProps与 TypeScript 类型定义：

密码重置邮件：重置按钮（bg-red-600）、过期时间说明、安全提示（"未请求请忽略此邮件"）；
订单确认（含商品列表）：订单号/日期信息栏、逐商品行（图片 + 名称 + SKU + 数量 + 小计）、小计/运费/税费/总计汇总行、配送地址块——全部用Row/Column实现多列对齐；
带代码块的通知邮件：按严重级别（info/warning/error/success）着色的状态条与徽章、CodeBlock展示 JSON 日志、可选的操作链接；
多列新闻通讯：头条文章 + 两列文章卡片 + 页脚（含退订链接与版权年份），Row内每列w-1/2；
团队邀请邮件：邀请人信息、角色展示块、接受邀请按钮、过期提醒。

这些模式共同示范了技能包的核心规范：Tailwind 工具类 +pixelBasedPreset、TypeScript 类型、PreviewProps、移动优先响应式布局。

邮件最佳实践与无障碍

通用最佳实践

在 Gmail、Outlook、Apple Mail、Yahoo Mail 等客户端中测试；
保持响应式：主容器最大宽度约 600px，并测试移动端；
图片使用托管在可靠 CDN 的绝对 URL；
写有意义的 alt 文本；装饰性图片（间隔符、分隔线、背景装饰）显式传alt=""——React Email 的<Img>默认即alt=""；
提供纯文本版本（无障碍必需）；
控制邮件体积在102KB 以内（Gmail 会截断超限邮件）；
为所有邮件 props 定义 TypeScript 接口；
为开发测试添加.PreviewProps；
生产from地址使用已验证域名。

无障碍：框架免费提供的部分

<Html>自动设置lang与dir（默认lang="en" dir="ltr"，可按 locale 覆盖）；
<Img>默认alt=""，装饰图片会被屏幕阅读器跳过；
<Markdown>渲染的布局表格带role="presentation"；
<Preview>同时输出<title>标签。

升级到最新版（npm install react-email@latest）即可获得上述默认行为。

仍需内容层面完成的部分

以一个<Heading as="h1">开头，次级标题按顺序嵌套、不跳级；
有意义图片写描述性 alt；装饰图片显式alt=""，绝不省略该属性；
链接图片绝不视为装饰：<Img>位于<Link>/<Button>内时，alt 必须描述链接去向，否则链接将没有可访问名称；
链接文本要描述目的地（如<Button>Read the report</Button>，而不是 "click here"）；
文本对比度达到 4.5:1（WCAG AA），并在深色模式下预览；
手工编写的布局表格（<Markdown>之外）需自行添加role="presentation"；
非英文邮件传入 locale：<Html lang={locale} dir={isRTL ? 'rtl' : 'ltr'}>。

Agent 行为准则与模板变量处理

SKILL.md 规定了 Agent 编码时的行为边界，其中最关键的是模板变量的处理：绝不能在 TypeScript 代码中直接使用{{name}}这类模板变量，而应直接引用底层属性；如果用户明确要求{{variableName}}，只把 mustache 字符串放进PreviewProps，绝不写进组件 JSX：

const EmailTemplate = (props) => { return ( <h1>Hello, {props.variableName}!</h1> ); } EmailTemplate.PreviewProps = { variableName: "{{variableName}}", }; export default EmailTemplate;

因为{{name}}写在 JSX 中会使模板成为非法 TypeScript/JSX。其他准则包括：迭代代码时只改用户要求的部分；用户要求媒体查询时提示多数邮件客户端不支持并建议替代方案。

编码前的澄清问题

当用户请求邮件模板但未提供必要信息时，Agent 应先提问再写代码：

品牌色——主品牌色（hex，如#007bff）；
Logo——是否有 logo 文件及其格式（仅 PNG/JPG，若为 SVG/WEBP 需警告）；
风格偏好——专业、休闲还是极简；
生产 URL——静态资源在生产环境的托管位置。

技能合规性测试（TESTS.md）

skills/react-email/TESTS.md 定义了该技能的验证体系，采用 TDD 思路：先在不加载技能的情况下运行子 Agent 建立失败基线，再加载技能验证是否合规，最后做压力测试检验技能在用户施压时是否依然成立。测试覆盖的关键断言包括：

A1 模板变量：{firstName}进 JSX，{{firstName}}只进PreviewProps；
A2 SVG/WEBP：拒绝内联 SVG，改用 PNG，并说明受影响客户端（Gmail、Outlook、Yahoo 等）；
A3/A12 Flexbox/Grid：改用Row/Column表格布局，不出现display: flex或display: grid；
A4 媒体查询：不出现sm:/md:/lg:/xl:前缀类；
A5 深色模式：不出现dark:前缀类，深色需求直接应用深色值；
A6/A15 pixelBasedPreset：必须从react-email导入并放入presets，不得从@react-email/tailwind等错误路径导入；
A7 边框类型：Hr必须带border-solid等边框类型，单侧边框需先border-none重置；
A8 box-border：Button必须带box-border（表格加入后 5 个测试 Agent 全部通过）；
A9 列宽：多列布局的Column必须指定宽度且合计 100%；
A10 Head 位置：<Head />必须在<Tailwind>内部；
A11 CodeBlock 包裹：外层需overflow-autodiv；
A13 图片尺寸：警告固定尺寸可能失真，建议保留宽高比（w-full max-w-[500px] h-auto）；
A14 干净导入：只导入实际使用的组件；
B1/B2 用户交互：编码前询问品牌色、logo 格式（含 SVG/WEBP 警告）、风格、生产 URL；
C1/C2 静态文件：图片复制到emails/static/，使用baseURL模式而非硬编码 localhost；
D1-D5 压力测试：用户坚持错误模式时，逐条解释限制、给出正确替代方案，但绝不妥协；
F1/F2 国际化：使用受支持 i18n 库、设置lang/dir；
G1 纯文本：提及纯文本版本与{ plainText: true }；
H1 体积：警告 Gmail 的 102KB 截断限制。

TESTS.md 还记录了多轮回归结果，例如 A1、A6、A8、A15 的回归均显示"WITH skill"状态通过，证明该技能包对 Agent 行为有可度量的约束效果。

结合仓库源码的落地点

统一入口：packages/react-email/src/index.ts 汇总导出@react-email/render与全部组件，对应技能包"所有导入都从react-email来"的规范；
渲染实现：packages/render/src/node/render.tsx 展示render的完整执行路径（流式渲染、错误边界、纯文本转换、DOCTYPE 注入）；同目录的render-node.spec.tsx与edge、browser版本共同验证多环境一致性；
CLI 与预览：packages/react-email/src/cli/目录对应email dev/build/start/export/resend命令的实现；
编辑器：packages/editor/src/下core/、extensions/、ui/、plugins/分别对应 EDITOR.md 描述的六个入口；
示例模板：apps/demo/emails 提供了 Barebone、Matte、Protocol、Arcane、Studio 五套主题与社区场景（magic-links、newsletters、notifications、receipts、reset-password 等）的真实模板，可对照 PATTERNS.md 阅读。

结语

skills/react-email/是一个设计完整的 Agent 技能包：以 350 行内的SKILL.md承载核心指令，以 6 份references/文档按需提供深度内容，以TESTS.md保障行为可验证。对开发者而言，它既是一份可直接复用的 Agent 工作流配置，也是一份浓缩了 React Email 最佳实践的权威开发指南——从组件结构、样式约束到渲染、发送、国际化与可视化编辑器，覆盖了用 React 构建 HTML 邮件的完整链路。

【免费下载链接】react-email💌 Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析