DocuSeal Vue 表单构建器嵌入实战DocusealBuilder 组件、JWT 鉴权与全属性解析【免费下载链接】docusealOpen source DocuSign alternative. Create, fill, and sign digital documents ✍️项目地址: https://gitcode.com/GitHub_Trending/do/docuseal本文基于 DocuSeal 仓库的官方嵌入文档 form-builder-vue.md系统讲解如何在 Vue 应用中通过docuseal/vue提供的DocusealBuilder组件嵌入 DocuSeal 表单构建器Form Builder包括 JWT 令牌的后台生成方式、组件全部属性含字段/签署人/日期格式/界面开关等的完整取值说明以及加载、上传、发送、变更、保存五类回调事件。读完本文你可以把一个可编辑、可预填字段、可配置签署人的模板构建器完整嵌入自己的 Web 应用并理解每个属性在仓库源码builder.vue中的真实落点。一、核心示例Vue 组件接入 后台签发 JWT官方文档给出的最小可用示例分两部分前端 Vue 组件 后端签发 JWT。1. 前端挂载 DocusealBuildertemplate DocusealBuilder v-iftoken :tokentoken / /template script import { DocusealBuilder } from docuseal/vue export default { name: App, components: { DocusealBuilder }, data () { return { token: } }, mounted () { fetch(/api/docuseal/builder_token, { method: POST }).then(async (resp) { const data await resp.json() this.token data.token }) } } /script要点docuseal/vue是 DocuSeal 官方的 Vue 封装包与 React、Angular 版本并列见 README.md 中 Embedded document form builder 能力说明。v-iftoken保证令牌到位后再渲染构建器避免组件在无鉴权状态下请求模板数据。令牌必须来自你自己的后端接口示例中的/api/docuseal/builder_token只是示意文档明确要求JWT 必须在后台生成防止未经授权访问你的文档。2. 后端用 API Key 签发 JWTHS256文档给出的 Node.js 签发示例原样保留仅将占位符换为语义化变量名const jwt require(jsonwebtoken); const token jwt.sign({ user_email: {{admin_user_email}}, integration_email: {{signer_email}}, external_id: TestForm123, name: Integration W-9 Test Form, document_urls: [https://www.irs.gov/pub/irs-pdf/fw9.pdf], }, {{api_key}});其中{{admin_user_email}}为拥有该 API Key 的管理员邮箱{{api_key}}为你的 DocuSeal API 密钥二者均需替换。关于令牌校验机制的源码佐证仓库自带的模板页面使用的是 Rails 侧封装的 JsonWebToken其encode/decode基于Rails.application.secret_key_base做 HS256 编解码。从源码结构看嵌入场景与站内场景遵循同一套思路——服务端签发 HS256 JWTDocuSeal 服务端校验签名后按 payload 决定为谁、打开哪个模板或创建哪个模板。因此嵌入集成时必须保证签名密钥只存在于服务器端。3. JWT Payload 字段说明token属性接收一个以 API Key 签名的 HS256 JWT 字符串必填其 payload 支持以下字段字段类型必填说明user_emailstring是API 签名密钥所有者的邮箱即管理员用户邮箱integration_emailstring否为其创建模板的用户邮箱例如signerexample.comtemplate_idnumber否要在构建器中打开的模板 ID指定了document_urls时可省略external_idstring否你的应用内用于唯一标识该模板的字符串键folder_namestring否模板应创建到的文件夹名称document_urlsarray否要在构建器中打开的 PDF 文件 URL 数组例如[https://www.irs.gov/pub/irs-pdf/fw9.pdf]指定了template_id时可省略namestring否通过document_urls新建模板时的模板名称例如Integration W-9 Test Formextract_fieldsboolean否传false可禁用自动提取 PDF 表单字段默认会自动添加 PDF 字段两种典型用法已有模板时传template_id或external_id直接编辑从零开始时传document_urlsname构建器会先创建模板再打开。template_id与document_urls二选一即可。二、DocusealBuilder 组件属性全表以下为文档中 Attributes 一节的完整属性定义逐项对应到组件上的 Vue prop 绑定方式。2.1 基础接入类属性属性类型默认值说明:tokenstring—必填以 API Key 签名的 HS256 JWT必须在后台生成hoststring无DocuSeal 主机域名。仅在自托管on-premises部署或 docuseal.eu Cloud 时使用例如yourdomain.comcustom-buttonobject无在构建器右上角显示自定义按钮子属性title按钮标题必填与url按钮链接必填仅支持绝对 URL2.2 字段与签署人定义类属性属性类型默认值说明only-defined-fieldsbooleanfalse为true时只允许添加在:fieldsprop 中定义过的字段rolesarray无表单中默认使用的签署人角色名数组field-typesarray全部字段类型允许在构建器中使用的字段类型名默认全部可用date-formatsarray无日期字段可选格式列表可包含日期YYYY、MM、DD、时间HH、hh、mm、ss、A与时区z部分列表中第一个格式作为默认。示例[MM/DD/YYYY, YYYY-MM-DD HH:mm:ss z]draw-field-typestringtext字段绘制工具默认创建的字段类型例如signaturefieldsarray无要预置到文档中的默认自定义字段数组每项必含namerequired-fieldsarray无需要预置的必填自定义字段数组结构与fields相同submittersarray无要预置到文档中的默认签署人数组每项必含rolefield-types的合法枚举19 种heading, text, signature, initials, date, datenow, number, image, checkbox, multiple, file, radio, select, cells, stamp, payment, phone, verification, kba, strikethroughfields/required-fields项内type字段的枚举与上述一致仅不含datenow。2.3 界面开关类属性属性类型默认值说明with-send-buttonbooleantrue显示 Recipients发送按钮with-titlebooleantrue设为false时从构建器中移除文档标题with-upload-buttonbooleantrue显示 Upload 按钮with-add-page-buttonbooleanfalse显示 Add Blank Page 按钮with-sign-yourself-buttonbooleantrue显示 Sign Yourself 按钮with-documents-listbooleantrue设为false时不显示左侧文档列表默认显示with-dynamic-documentsbooleanfalse设为true时允许将 DOCX 文件转换为可编辑的动态文档with-fields-listbooleantrue设为false时不显示右侧字段列表默认显示with-fields-detectionbooleanfalse显示一个按钮用 AI 自动检测并添加文档字段with-custom-fields-tabbooleanfalse设为true时在字段列表中显示独立的 Custom 字段标签页自定义字段可通过:fields或:required-fieldsprop 配置with-field-placeholderbooleanfalse设为true时以字段名占位符代替字段类型图标显示with-signature-idboolean无设为true时新添加的字段默认启用 Signature ID设为false时 Signature ID 开关显示在字段设置下方且默认关闭with-revisionsbooleanfalse设为true时保存修订版本并在 Save 按钮旁显示可访问模板修订历史的下拉菜单autosavebooleantrue设为false时禁用表单自动保存previewbooleanfalse以预览模式显示模板不可编辑input-modebooleanfalse以数据输入模式打开模板用于按默认值预填字段languagestringen界面语言支持en、es、de、fr、pt、nl、he、ari18nobject{}用自定义值替换默认界面文案的对象键见 template_builder/i18n.jsbackground-colorstring无构建器背景色仅支持 HEX 颜色码例如#ffffffcustom-cssstring无应用到构建器的自定义 CSS例如#sign_yourself_button { background-color: #FFA500; }2.4fields/required-fields字段项结构两个字段数组中的每一项object支持以下属性属性类型必填说明namestring是字段名typestring否字段类型枚举同上rolestring否该字段所属的签署人角色名default_valuestring否字段默认值titlestring否显示给用户替代字段名的标题在签署表单中显示支持 Markdowndescriptionstring否显示在签署表单中的字段描述支持 Markdownwidthnumber否字段宽度像素heightnumber否字段高度像素formatstring否字段格式取决于字段类型optionsarray否字段选项select类型必填validation.patternstring否字段正则校验例如^[0-9]{5}$validation.messagestring否校验失败时的错误提示文案2.5submitters签署人项结构属性类型必填说明rolestring是签署人角色名emailstring否签署人邮箱namestring否签署人姓名phonestring否签署人电话需符合 E.164 标准格式一个典型的完整配置示例在官方 payload 示例基础上叠加界面定制DocusealBuilder :tokentoken hostdoc.example.com :with-send-buttontrue :with-fields-detectiontrue :draw-field-typesignature :date-formats[MM/DD/YYYY, YYYY-MM-DD HH:mm:ss z] :fields[{ name: FIELD_1, type: date, role: Customer, default_value: 2021-01-01 }] :submitters[{ role: Customer, email: customerexample.com }] :custom-button{ title: Docs, url: https://docs.example.com } :autosavetrue languageen loadonBuilderLoad saveonBuilderSave /三、源码级印证这些属性在构建器组件中的落点上表并非凭空约定——仓库中构建器核心组件 builder.vue 的 props 定义约 811 行起与文档属性一一对应withSendButton、withSignYourselfButton、withUploadButton、withTitle、withAddPageButton、withDocumentsList、withFieldsList、withFieldsDetection、withCustomFieldsTab、withFieldPlaceholder、withSignatureId、autosave、inputMode、withRevisions、onlyDefinedFields、defaultDrawFieldType、fieldTypes、dateFormats、backgroundColor、locale对应language、i18n、defaultFields/defaultRequiredFields对应fields/required-fields、defaultSubmitters对应submitters均为该组件显式声明的 propswithDynamicDocuments同样是显式 propdefault: false与文档中with-dynamic-documents的默认值一致回调函数在组件内以onUpload、onSave、onChange等 Function 类型 prop 的形式接收默认值为空函数——这解释了文档中 Callback 一节的五个事件为何以可选函数形式存在。从源码结构看docuseal/vue封装包外部 npm 包负责在客户端完成 JWT 与模板数据的加载然后把 token 解码出的配置映射为上述 props 传入Builder组件渲染侧的证据例如withSignYourselfButton控制模板顶部 Sign Yourself 表单按钮的显示builder.vue 中v-ifwithSignYourselfButton ...分支backgroundColor直接绑定到标题容器样式:style{ backgroundColor }onlyDefinedFields参与拖拽占位符DragPlaceholder的默认/自定义字段判定。关于date-formats的默认行为builder.vue 中的defaultDateFormat计算属性给出了佐证当dateFormats非空时取第一个元素否则按浏览器 locale/时区在MM/DD/YYYY与DD/MM/YYYY之间自动选择。这与文档列表中第一个格式作为默认的描述一致。关于i18n属性文档指向的可用键集合正是仓库中的 template_builder/i18n.jsen词条表含sign_yourself、send、add_blank_page、autodetect_fields、uploaded_pdf_contains_form_fields_keep_or_remove_them等键自定义对象会在构建器初始化时覆盖这些默认文案。四、Callback 回调事件构建器在关键生命周期节点暴露五个可选回调文档 Callback 一节原文映射事件触发时机示例处理函数load构建器加载模板数据时onBuilderLoadupload向模板上传文档时onBuilderUploadsend将文档发送给签署人时onBuilderSendchange模板表单发生变更时onBuilderChangesave保存模板表单变更时onBuilderSave在源码侧builder.vue 中以onUpload、onSave、onChange等 Function prop 默认注入空函数default () { return () {} }说明未提供回调时组件内部会静默降级接入方可以按需监听任意子集。典型的集成方式是在save中通知业务后端模板已就绪在send中记录发送事件、在change中做未保存变更提示。五、实施清单与注意事项令牌安全token的签发必须在服务器端完成前端只接收成品 JWT切勿把{{api_key}}带入浏览器环境文档原文加粗强调。自托管部署仅当使用 on-premises 部署或 docuseal.eu Cloud 时才需要设置host属性指向你的 DocuSeal 域名。template_id与document_urls二选一编辑已有模板用template_id从 PDF URL 新建模板用document_urlsname此时默认还会自动提取 PDF 内表单字段extract_fields: false可关闭。字段约束组合若希望用户只能放置你预定义过的字段需同时设置:fields或:required-fields与only-defined-fieldstrue若要让预定义字段以独立 Custom 标签页呈现再加with-custom-fields-tabtrue。相关文档同一功能在其它技术栈的实现分别见 JavaScript 版Web Componentsdocuseal-builderdata-*属性、React 版、Angular 版其 JWT payload 定义与本文完全一致可对照迁移。完【免费下载链接】docusealOpen source DocuSign alternative. Create, fill, and sign digital documents ✍️项目地址: https://gitcode.com/GitHub_Trending/do/docuseal创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 DocuSeal Vue 表单构建器嵌入实战：DocusealBuilder 组件、JWT 鉴权与全属性解析
DocuSeal Vue 表单构建器嵌入实战DocusealBuilder 组件、JWT 鉴权与全属性解析【免费下载链接】docusealOpen source DocuSign alternative. Create, fill, and sign digital documents ✍️项目地址: https://gitcode.com/GitHub_Trending/do/docuseal本文基于 DocuSeal 仓库的官方嵌入文档 form-builder-vue.md系统讲解如何在 Vue 应用中通过docuseal/vue提供的DocusealBuilder组件嵌入 DocuSeal 表单构建器Form Builder包括 JWT 令牌的后台生成方式、组件全部属性含字段/签署人/日期格式/界面开关等的完整取值说明以及加载、上传、发送、变更、保存五类回调事件。读完本文你可以把一个可编辑、可预填字段、可配置签署人的模板构建器完整嵌入自己的 Web 应用并理解每个属性在仓库源码builder.vue中的真实落点。一、核心示例Vue 组件接入 后台签发 JWT官方文档给出的最小可用示例分两部分前端 Vue 组件 后端签发 JWT。1. 前端挂载 DocusealBuildertemplate DocusealBuilder v-iftoken :tokentoken / /template script import { DocusealBuilder } from docuseal/vue export default { name: App, components: { DocusealBuilder }, data () { return { token: } }, mounted () { fetch(/api/docuseal/builder_token, { method: POST }).then(async (resp) { const data await resp.json() this.token data.token }) } } /script要点docuseal/vue是 DocuSeal 官方的 Vue 封装包与 React、Angular 版本并列见 README.md 中 Embedded document form builder 能力说明。v-iftoken保证令牌到位后再渲染构建器避免组件在无鉴权状态下请求模板数据。令牌必须来自你自己的后端接口示例中的/api/docuseal/builder_token只是示意文档明确要求JWT 必须在后台生成防止未经授权访问你的文档。2. 后端用 API Key 签发 JWTHS256文档给出的 Node.js 签发示例原样保留仅将占位符换为语义化变量名const jwt require(jsonwebtoken); const token jwt.sign({ user_email: {{admin_user_email}}, integration_email: {{signer_email}}, external_id: TestForm123, name: Integration W-9 Test Form, document_urls: [https://www.irs.gov/pub/irs-pdf/fw9.pdf], }, {{api_key}});其中{{admin_user_email}}为拥有该 API Key 的管理员邮箱{{api_key}}为你的 DocuSeal API 密钥二者均需替换。关于令牌校验机制的源码佐证仓库自带的模板页面使用的是 Rails 侧封装的 JsonWebToken其encode/decode基于Rails.application.secret_key_base做 HS256 编解码。从源码结构看嵌入场景与站内场景遵循同一套思路——服务端签发 HS256 JWTDocuSeal 服务端校验签名后按 payload 决定为谁、打开哪个模板或创建哪个模板。因此嵌入集成时必须保证签名密钥只存在于服务器端。3. JWT Payload 字段说明token属性接收一个以 API Key 签名的 HS256 JWT 字符串必填其 payload 支持以下字段字段类型必填说明user_emailstring是API 签名密钥所有者的邮箱即管理员用户邮箱integration_emailstring否为其创建模板的用户邮箱例如signerexample.comtemplate_idnumber否要在构建器中打开的模板 ID指定了document_urls时可省略external_idstring否你的应用内用于唯一标识该模板的字符串键folder_namestring否模板应创建到的文件夹名称document_urlsarray否要在构建器中打开的 PDF 文件 URL 数组例如[https://www.irs.gov/pub/irs-pdf/fw9.pdf]指定了template_id时可省略namestring否通过document_urls新建模板时的模板名称例如Integration W-9 Test Formextract_fieldsboolean否传false可禁用自动提取 PDF 表单字段默认会自动添加 PDF 字段两种典型用法已有模板时传template_id或external_id直接编辑从零开始时传document_urlsname构建器会先创建模板再打开。template_id与document_urls二选一即可。二、DocusealBuilder 组件属性全表以下为文档中 Attributes 一节的完整属性定义逐项对应到组件上的 Vue prop 绑定方式。2.1 基础接入类属性属性类型默认值说明:tokenstring—必填以 API Key 签名的 HS256 JWT必须在后台生成hoststring无DocuSeal 主机域名。仅在自托管on-premises部署或 docuseal.eu Cloud 时使用例如yourdomain.comcustom-buttonobject无在构建器右上角显示自定义按钮子属性title按钮标题必填与url按钮链接必填仅支持绝对 URL2.2 字段与签署人定义类属性属性类型默认值说明only-defined-fieldsbooleanfalse为true时只允许添加在:fieldsprop 中定义过的字段rolesarray无表单中默认使用的签署人角色名数组field-typesarray全部字段类型允许在构建器中使用的字段类型名默认全部可用date-formatsarray无日期字段可选格式列表可包含日期YYYY、MM、DD、时间HH、hh、mm、ss、A与时区z部分列表中第一个格式作为默认。示例[MM/DD/YYYY, YYYY-MM-DD HH:mm:ss z]draw-field-typestringtext字段绘制工具默认创建的字段类型例如signaturefieldsarray无要预置到文档中的默认自定义字段数组每项必含namerequired-fieldsarray无需要预置的必填自定义字段数组结构与fields相同submittersarray无要预置到文档中的默认签署人数组每项必含rolefield-types的合法枚举19 种heading, text, signature, initials, date, datenow, number, image, checkbox, multiple, file, radio, select, cells, stamp, payment, phone, verification, kba, strikethroughfields/required-fields项内type字段的枚举与上述一致仅不含datenow。2.3 界面开关类属性属性类型默认值说明with-send-buttonbooleantrue显示 Recipients发送按钮with-titlebooleantrue设为false时从构建器中移除文档标题with-upload-buttonbooleantrue显示 Upload 按钮with-add-page-buttonbooleanfalse显示 Add Blank Page 按钮with-sign-yourself-buttonbooleantrue显示 Sign Yourself 按钮with-documents-listbooleantrue设为false时不显示左侧文档列表默认显示with-dynamic-documentsbooleanfalse设为true时允许将 DOCX 文件转换为可编辑的动态文档with-fields-listbooleantrue设为false时不显示右侧字段列表默认显示with-fields-detectionbooleanfalse显示一个按钮用 AI 自动检测并添加文档字段with-custom-fields-tabbooleanfalse设为true时在字段列表中显示独立的 Custom 字段标签页自定义字段可通过:fields或:required-fieldsprop 配置with-field-placeholderbooleanfalse设为true时以字段名占位符代替字段类型图标显示with-signature-idboolean无设为true时新添加的字段默认启用 Signature ID设为false时 Signature ID 开关显示在字段设置下方且默认关闭with-revisionsbooleanfalse设为true时保存修订版本并在 Save 按钮旁显示可访问模板修订历史的下拉菜单autosavebooleantrue设为false时禁用表单自动保存previewbooleanfalse以预览模式显示模板不可编辑input-modebooleanfalse以数据输入模式打开模板用于按默认值预填字段languagestringen界面语言支持en、es、de、fr、pt、nl、he、ari18nobject{}用自定义值替换默认界面文案的对象键见 template_builder/i18n.jsbackground-colorstring无构建器背景色仅支持 HEX 颜色码例如#ffffffcustom-cssstring无应用到构建器的自定义 CSS例如#sign_yourself_button { background-color: #FFA500; }2.4fields/required-fields字段项结构两个字段数组中的每一项object支持以下属性属性类型必填说明namestring是字段名typestring否字段类型枚举同上rolestring否该字段所属的签署人角色名default_valuestring否字段默认值titlestring否显示给用户替代字段名的标题在签署表单中显示支持 Markdowndescriptionstring否显示在签署表单中的字段描述支持 Markdownwidthnumber否字段宽度像素heightnumber否字段高度像素formatstring否字段格式取决于字段类型optionsarray否字段选项select类型必填validation.patternstring否字段正则校验例如^[0-9]{5}$validation.messagestring否校验失败时的错误提示文案2.5submitters签署人项结构属性类型必填说明rolestring是签署人角色名emailstring否签署人邮箱namestring否签署人姓名phonestring否签署人电话需符合 E.164 标准格式一个典型的完整配置示例在官方 payload 示例基础上叠加界面定制DocusealBuilder :tokentoken hostdoc.example.com :with-send-buttontrue :with-fields-detectiontrue :draw-field-typesignature :date-formats[MM/DD/YYYY, YYYY-MM-DD HH:mm:ss z] :fields[{ name: FIELD_1, type: date, role: Customer, default_value: 2021-01-01 }] :submitters[{ role: Customer, email: customerexample.com }] :custom-button{ title: Docs, url: https://docs.example.com } :autosavetrue languageen loadonBuilderLoad saveonBuilderSave /三、源码级印证这些属性在构建器组件中的落点上表并非凭空约定——仓库中构建器核心组件 builder.vue 的 props 定义约 811 行起与文档属性一一对应withSendButton、withSignYourselfButton、withUploadButton、withTitle、withAddPageButton、withDocumentsList、withFieldsList、withFieldsDetection、withCustomFieldsTab、withFieldPlaceholder、withSignatureId、autosave、inputMode、withRevisions、onlyDefinedFields、defaultDrawFieldType、fieldTypes、dateFormats、backgroundColor、locale对应language、i18n、defaultFields/defaultRequiredFields对应fields/required-fields、defaultSubmitters对应submitters均为该组件显式声明的 propswithDynamicDocuments同样是显式 propdefault: false与文档中with-dynamic-documents的默认值一致回调函数在组件内以onUpload、onSave、onChange等 Function 类型 prop 的形式接收默认值为空函数——这解释了文档中 Callback 一节的五个事件为何以可选函数形式存在。从源码结构看docuseal/vue封装包外部 npm 包负责在客户端完成 JWT 与模板数据的加载然后把 token 解码出的配置映射为上述 props 传入Builder组件渲染侧的证据例如withSignYourselfButton控制模板顶部 Sign Yourself 表单按钮的显示builder.vue 中v-ifwithSignYourselfButton ...分支backgroundColor直接绑定到标题容器样式:style{ backgroundColor }onlyDefinedFields参与拖拽占位符DragPlaceholder的默认/自定义字段判定。关于date-formats的默认行为builder.vue 中的defaultDateFormat计算属性给出了佐证当dateFormats非空时取第一个元素否则按浏览器 locale/时区在MM/DD/YYYY与DD/MM/YYYY之间自动选择。这与文档列表中第一个格式作为默认的描述一致。关于i18n属性文档指向的可用键集合正是仓库中的 template_builder/i18n.jsen词条表含sign_yourself、send、add_blank_page、autodetect_fields、uploaded_pdf_contains_form_fields_keep_or_remove_them等键自定义对象会在构建器初始化时覆盖这些默认文案。四、Callback 回调事件构建器在关键生命周期节点暴露五个可选回调文档 Callback 一节原文映射事件触发时机示例处理函数load构建器加载模板数据时onBuilderLoadupload向模板上传文档时onBuilderUploadsend将文档发送给签署人时onBuilderSendchange模板表单发生变更时onBuilderChangesave保存模板表单变更时onBuilderSave在源码侧builder.vue 中以onUpload、onSave、onChange等 Function prop 默认注入空函数default () { return () {} }说明未提供回调时组件内部会静默降级接入方可以按需监听任意子集。典型的集成方式是在save中通知业务后端模板已就绪在send中记录发送事件、在change中做未保存变更提示。五、实施清单与注意事项令牌安全token的签发必须在服务器端完成前端只接收成品 JWT切勿把{{api_key}}带入浏览器环境文档原文加粗强调。自托管部署仅当使用 on-premises 部署或 docuseal.eu Cloud 时才需要设置host属性指向你的 DocuSeal 域名。template_id与document_urls二选一编辑已有模板用template_id从 PDF URL 新建模板用document_urlsname此时默认还会自动提取 PDF 内表单字段extract_fields: false可关闭。字段约束组合若希望用户只能放置你预定义过的字段需同时设置:fields或:required-fields与only-defined-fieldstrue若要让预定义字段以独立 Custom 标签页呈现再加with-custom-fields-tabtrue。相关文档同一功能在其它技术栈的实现分别见 JavaScript 版Web Componentsdocuseal-builderdata-*属性、React 版、Angular 版其 JWT payload 定义与本文完全一致可对照迁移。完【免费下载链接】docusealOpen source DocuSign alternative. Create, fill, and sign digital documents ✍️项目地址: https://gitcode.com/GitHub_Trending/do/docuseal创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考