基于 D2C 模式的运营场景下的工作流设计

在当今快速发展的软件开发领域，传统的研发模式已逐渐无法满足快速迭代和持续交付的需求。为了应对这一挑战，我们引入了一种全新的研发模式，旨在通过现代化的工具和流程，提高开发效率，加强团队协作，并确保软件质量和性能。基于 D2C 的新研发模式，重构端上的迭代开发流程，通过新的研发流程尽可能提高现有的端侧开发迭代流程效率。

一、新研发模式的工作流程

开发者首先接收到设计团队提供的设计稿视觉文件。由于原始设计稿可能在图层结构上不够合理，开发者需要重新编排这些图层，以确保它们能够更好地映射到代码结构上。这一步是至关重要的，因为合理的图层结构是实现设计到代码（D2C）转换的基础。

接着，开发者使用Locofy Plugin这款AI驱动的Figma插件，将经过重新编排的设计稿转换成静态代码。这个插件帮助自动化从视觉效果到代码的转换过程。

在Locofy Builder平台上，开发者将导出的静态代码进一步细化。他们编辑组件的props，调整样式和布局，但此时的代码还仅实现了页面的视觉效果，并没有添加任何交互功能。这个阶段可以理解为创建了一个“只能看不能用”的界面框架。

为了给这个框架添加交互功能，开发者需要使用codifytools工具。首先，在终端中使用codifytools load命令来初始化压缩包。这个命令允许开发者指定一个目录来放置工程源代码，并且可以选择是否自动生成特定类型的运营项目。

初始化完成后，开发者可能需要生成API类型的代码，这时可以使用codifytools gen --type=api命令，并提供必要的参数，如API ID和接口三要素的文件路径。

随着项目的进展，开发者可以使用codifytools block命令来创建、使用和发布可复用的组件块。例如，使用block create命令可以将目录下的组件代码升级为区块，并生成落库的代码；使用block use命令可以导入并复用指定的区块；而block release命令则用于将所有区块代码进行落库。

在整个开发过程中，开发者可能还需要使用codifytools push命令来推送代码，或者使用block view命令来查看所有区块的远程展示页面，以便查阅示例和文档说明。

当代码的业务逻辑和交互功能都实现并经过测试后，就来到了D2C Runtime环节。D2C Runtime是一个编译和部署工具，它提供了一系列的API接口，用于处理生成的静态代码和经过二次开发后的代码。它类似于一个无头CMS（Content Management System），没有界面只有接口，因此对外不可见，主要通过API进行操作。

由于D2C Runtime没有直接的用户界面，为了实现更直观且操作性更强的部署动作，可能需要设计一个额外的部署操作界面，从而提升使用者的体验。这个部署操作界面将与D2C Runtime的API接口协同工作，使得部署过程更加用户友好。因此为了提升用户体验，可以采用类似于AMIS或爱速搭的方案来搭建一个部署界面。这个界面将提供用户友好的操作方式，使得部署过程更加直观和易于管理。通过这个界面，开发者可以与D2C Runtime的API接口交互，执行编译、部署和其他相关操作。

最终，通过D2C Runtime的编译和部署能力，应用程序被成功部署到服务器或云环境。用户可以通过API网关与应用程序进行交互，体验到完整的应用功能。

整个流程从视觉设计到代码生成，再到交互功能的添加，最后通过D2C Runtime的编译和部署，以及通过类似AMIS或爱速搭的部署界面提升用户体验，展示了一个高效、自动化且用户友好的软件开发和发布过程。

1.1 加深理解

通过更具象化的例子帮助使用者更加了解新研发模式的完整内容和全部流程。

1. 设计阶段 - 想象新房子的蓝图

想象你要建一座新房子，首先你需要一个建筑师来设计蓝图。在软件开发中，设计团队就像建筑师，他们使用工具（如Figma）来设计应用程序或网站的界面和用户体验。

2. 图层编排 - 整理房间布局

就像在建房前需要决定每个房间的大小和位置，开发者需要重新编排设计稿中的图层结构，确保每个元素（如按钮、文本框）在代码中的位置和结构是合理的。

3. 使用Locofy Plugin - 蓝图转施工图

设计完成后，使用Locofy Plugin就像将建筑师的蓝图转换成施工图。这个插件帮助开发者将设计稿中的视觉效果转换成初步的代码结构。

4. Locofy Builder中的编辑 - 室内装修

在Locofy Builder中编辑代码，就像对房子进行室内装修。开发者在这里调整样式（如颜色、字体）、布局，并添加组件，让房子看起来更加美观和实用。

5. 添加交互功能 - 安装门铃和开关

仅仅有好看的界面还不够，我们需要让应用程序能够响应用户的操作。添加交互功能就像给房子安装门铃和电灯开关，让用户能够与房子互动。

6. 使用codifytools工具 - 施工队的工具箱

codifytools就像施工队的工具箱，提供了各种工具和命令来帮助开发者更高效地构建和组织代码。比如，生成API代码就像铺设电线，确保房子的各个部分能够正常工作。

7. D2C Runtime的角色 - 建筑验收

D2C Runtime的角色可以类比为建筑验收过程，它确保所有代码都符合标准，能够编译和部署。就像验收团队确保房子的每个部分都安全、可靠。

8. 部署界面的搭建 - 装修展示

使用AMIS或爱速搭搭建的部署界面，就像将房子装修完成后的展示。这个界面让开发者能够更容易地管理和操作部署过程，就像房产经纪人展示房子的亮点。

9. 部署和发布 - 开放参观日

部署和发布应用程序，就像开放参观日，让所有人都能来看看这座新房子。用户现在可以访问网站或下载应用程序，体验所有功能。

10. 用户体验 - 入住体验

最终，用户体验就像搬进新房子的第一天。用户会探索每个角落，使用所有的设施，看看是否满足他们的需求和期望。

二、新研发模式中需要重点关注的概念

2.1 什么是 D2C ？

解释D2C（Design to Code）是什么，它如何帮助提高开发效率。

在传统的开发流程中，设计师完成设计稿后，前端开发者需要手动将这些设计实现为代码。这个过程不仅耗时，而且容易出现误差，特别是在细节处理上。D2C的出现正是为了解决这些问题。D2C是一种创新的软件开发方法，它允许开发者通过特定的工具和流程，将视觉设计（如UI/UX设计稿）直接转换为可执行的代码。这种方法减少了设计师和开发者之间的沟通成本，加速了产品从概念到实现的过程。

D2C 除了关注视觉效果的复原外，对于页面中的交互事件以及页面元素中对应的数据绑定这些内容就非常吃力。D2C技术确实在将设计稿转换为静态代码方面表现出色，它能够快速复原设计稿中的视觉效果，包括布局、颜色、字体等。然而，D2C在处理页面中的交互事件和数据绑定方面可能会面临一些挑战：

1. 交互逻辑复杂性：设计稿通常只包含静态的视觉元素，而不会明确指出交互逻辑。例如，按钮点击后应该触发什么事件，这些细节需要开发者根据需求来实现。
2. 数据绑定的实现：在动态网页应用中，页面元素经常需要根据数据的变化来更新。这种数据绑定通常需要额外的编程工作，而D2C工具可能无法自动处理这些逻辑。
3. 前端框架的特定需求：不同的前端框架（如React, Vue, Angular等）有不同的数据绑定和状态管理机制，D2C工具需要能够适应这些框架的特定需求。

2.2 设计到代码的转换

重点讲解设计稿如何通过工具转换成代码，特别是Locofy Plugin的使用和它在这一过程中的作用。

在D2C（Design to Code）的流程中，设计稿转换成代码是一个关键步骤，它涉及到将视觉设计自动化地转化为可执行的前端代码。

1. 安装Locofy插件：

首先，需要在Figma中找到并安装Locofy插件。这通常可以在Figma的插件库中完成。然后选中需要转换代码的图层，选择 Classic 模式。

Locofy.ai 提供了两种模式，Lightning和Classic，它们在设计到代码的转换过程中有不同的特点和使用场景。如果设计较为标准，Lightning模式可能更快；如果设计需要特殊处理，Classic模式可能更合适（显然当前的网盘更适合 classic 模式）

• Lightning模式：

  • 自动化程度高：Lightning模式利用了机器学习算法，经过数百万设计的训练，能够自动识别设计元素并生成相应的前端代码。
  • 一键操作：正如其名，Lightning模式提供了快速的一键式转换体验，适合需要迅速从设计到代码的场景。
  • 适用性：对于标准的设计元素和常见的设计模式，Lightning模式可以非常快速地生成代码，减少手动干预。

• Classic模式：

  • 手动控制：Classic模式提供了更多的手动控制选项，允许用户选择特定的设计元素进行代码生成。
  • 定制化：适合需要高度定制化代码的场景，用户可以精确选择哪些元素需要转换，以及如何转换。
  • 复杂设计处理：对于包含复杂交互或非常规布局的设计，Classic模式提供了更多的灵活性来处理这些情况。

2. 打开你的Figma设计：

打开Figma，并加载你想要转换为代码的设计文件。

3. 启动Locofy插件：

在Figma中，找到并点击Locofy插件图标以启动它。

4. 选择Classic模式：

在Locofy插件中，选择Classic模式。这个模式允许你手动选择设计元素并转换为代码。classic 模式下的主要能力：

• 页面结构设计与可响应性

  • 设计稿优化：获取更加干净代码
  • 自响应性：根据宿主设备自动适应布局
  • 实时预览：实时预览 D2C 效果

• 给元素打标签

  • AI 自动打标签
  • 根据 Fiama 图层名称自动打标签
  • 语义化标签

• 添加交互时间

  • Scroll to
  • Open link
  • Navigate to
  • Open overlay
  • Close overlay

• 路由配置

  • 使用 figma prototype 配置页面导航

• • 使用 locofy.ai Actions 配置路由
• UI 组件库以及设计系统

5. 选择设计元素：

使用Locofy插件，选择你想要转换的设计元素。你可以逐个选择元素，或者选择整个设计。

6. 配置响应性和交互：

利用Locofy插件，配置所选元素的响应性，确保它们在不同屏幕尺寸和状态下表现良好。同时，你可以为元素添加交互动作，如点击事件。

7. 一键转换：

Locofy的Lightning flow技术允许你在点击一下后，自动完成设计元素的转换工作。

8. 预览原型：

在Figma中，你可以预览经过Locofy处理后的实时、响应式原型，确保设计在各种交互状态下的表现。

9. 同步到Locofy.ai Builder：

当你对原型满意时，将你的设计同步到Locofy.ai Builder。这是一个在线平台，可以让你进一步操作和定制代码。

2.3 图层编排的重要性

解释为什么设计稿的图层结构需要重新编排，以及这对后续开发流程的影响。

在D2C（Design to Code）的领域里，图层预编排是一个至关重要的步骤，它直接影响到设计稿向代码转换的效率和准确性。当你准备将一个创意转化为数字产品时，设计是第一步。在Figma这样的设计工具中，你的每一个设计决策——从按钮的大小到字体的选择——都被转化为视觉元素，组织在不同的图层上。这就是图层预编排的起点。

为什么图层预编排如此重要？

1. 映射到代码结构：良好的图层结构可以更容易地映射到代码结构。在Figma中精心组织的图层，可以确保Locofy.ai插件在转换过程中能够准确识别每个元素的用途和属性。
2. 提高自动化效率：Locofy.ai的智能算法依赖于清晰、逻辑性强的图层结构来实现高效的自动化转换。如果图层混乱无序，转换的代码可能难以理解和维护。
3. 减少错误和返工：通过预编排图层，你可以在设计阶段就发现并解决问题，避免在代码实现阶段出现错误，从而减少返工和修改的时间。
4. 增强设计的可复用性：合理编排的图层可以轻松地识别出可复用的组件，这在Locofy.ai中可以一键生成可复用的代码块，加速开发过程。
5. 优化团队协作：在团队中，清晰的图层结构有助于设计师和开发者之间的沟通，确保双方对设计的理解一致，减少误解。

通过图层预编排，不仅仅是在设计一个界面，它是在为代码的生成打下坚实的基础。这不仅能加快开发速度，还能提升最终产品的质量。

图层编排时的方法论

• 组织图层：确保每个图层都有明确的目的，并且按照逻辑进行分组。
• 命名规范：使用一致且描述性的命名规则，这样在Locofy.ai中转换时，生成的代码也易于理解。
• 考虑交互性：在设计时考虑元素的交互状态，如悬停、点击等，并在图层结构中体现这些状态。
• 利用组件：创建可复用的组件，减少重复劳动，并在Locofy.ai中生成更干净、更高效的代码。

因为图层结构直接决定了代码结构，所以需要再编排图层时完全遵守视觉编码的规范进行操作。

2.4 Locofy Builder的使用

详细介绍在Locofy Builder平台上如何编辑和细化静态代码，包括编辑组件的props和调整样式。

Locofy Builder 是一个功能强大的设计到代码的转换工具，它允许用户在 Figma 中设计界面后，通过 Locofy 插件同步项目，并在 Locofy Builder 中进一步编辑和管理代码。以下是对 Locofy Builder 的主要功能和特点的自然语言总结：

1. 访问方式：用户需要在 Figma 中打开设计并通过 Locofy 插件同步项目，然后点击“View code in Builder”打开 Locofy Builder。
2. 系统要求：为了完整显示所有功能，Locofy Builder 需要至少 1024px 屏幕宽度的显示器或笔记本电脑。
3. 主要部分：

• 顶部工具栏：提供项目管理、团队协作和媒体查询切换等基本功能。
• 预览屏幕面板：允许用户实时查看设计预览，并包含实时预览、屏幕画廊、页面导航、缩放和原型模式等功能。
• 代码查看器面板：用户可以查看项目背后的代码，并更新框架设置。
• 左侧面板：包含文件浏览器、图层面板、Locofy 组件、GitHub 同步等工具。
• 右侧面板：用于管理组件、配置、导出和部署等。

4. 重点功能：

• 实时预览：设计更改会即时反映在预览中，确保所见即所得。
• 屏幕画廊：快速查看和切换所有屏幕和组件。
• 代码编辑和管理：用户可以编辑文件名、管理文件夹结构，并在代码查看器中查看和复制代码。
• 组件管理：通过 Locofy 组件窗口集中管理和修改所有组件及其属性。
• GitHub 同步：将代码推送到 GitHub 仓库，支持新仓库创建或现有仓库更新。
• 数据绑定：简化动态数据与 Locofy 生成代码的集成。
• 配置代码：允许用户根据需要修改框架设置，如打包、样式、单位、文件命名等。
• 同步/导出/部署：支持与 GitHub 同步项目或组件，将代码拉取到 VS Code，以及将项目部署到 Netlify、Vercel 和 GitHub Pages 等平台。

2.5 codifytools工具

解释codifytools工具的用途，包括如何使用它来生成API代码、创建和管理可复用的组件块。

这个工具是由百度开发的名为 @baidu/codify-tools-cli 的命令行界面（CLI）工具，主要用于帮助开发者快速生成业务代码。它通过脚手架的方式，简化了开发流程，使得开发者可以更加专注于业务逻辑的实现。

工具的作用：

• 初始化开发环境：通过加载压缩包来准备开发环境和项目初始化。
• 生成代码：根据 EASY 平台返回的 API ID 或者提供的三要素文件，自动生成接口胶水代码。
• 代码推送：将项目代码推送到渲染服务，便于后续渲染和预览。
• 区块管理：支持区块（组件）的创建、使用、发布和查看，以实现代码的复用和共享。

如何使用：

1. 安装：

$ npm install @baidu/codify-tools-cli --global
$ codifytools --help

1. 初始化项目：

$ codifytools load ./output.zip --dir=./projects --category=vue3

load 命令在处理由 locofy builder 导出的压缩包时，其主要目的是将静态的视觉代码转换为符合当前团队工程规范的动态项目代码。以下是详细步骤和原理：

• 参数接收：load 函数接收一个包含压缩包路径、目标目录和项目类别的参数对象。
• 路径处理：确定压缩包的绝对路径，并根据提供的相对或绝对目标目录路径，计算出最终的解压路径。
• 环境检查：检查压缩包是否存在，并且目标目录是否为空，这是为了确保初始化过程不会覆盖已有的文件。
• 环境初始化：通过 ora 库启动一个旋转器，向用户展示当前的加载状态。
• 上传压缩包：调用 uploadZipToRenderService 函数，将压缩包上传到渲染服务。这个服务可能是团队内部用来处理和转换代码的后端服务。上传过程中，会获取当前环境的用户名，这可能用于在渲染服务中标识用户或团队。
• 用户验证：在 macOS 系统中，通过检查 duGuanJia（度管家）的配置文件来获取当前登录用户的信息，确保用户已经登录并且有权使用服务。
• 处理压缩包：上传成功后，开始处理压缩包内容。这可能包括解压压缩包，以及根据团队规范对代码进行必要的重构。
• 替换组件：如果项目类别是 yunying（运营），则调用 replaceRelateComponents 函数，替换源码中的组件以符合团队的基础工程规范。
• 下载和解压源码：调用 getAndUnzipSourceCode 函数，从渲染服务下载处理后的源代码压缩包，并解压到目标目录。
• 清理和完成：解压完成后，清理临时文件，如下载的 ZIP 文件，并通知用户环境初始化成功。
• 错误处理：在整个过程中，如果遇到任何错误，如文件不存在、网络请求失败或解压错误，都会捕获异常并打印错误信息，同时终止程序执行。

通过这一系列步骤，load 命令确保了 locofy builder 导出的压缩包中的视觉代码能够被正确地转换和重构，以符合团队的开发规范和工作流程。这样，开发者就可以在符合团队规范的基础上，继续进行项目的动态开发和维护。

项目类型

目前支持 vue3、vue2 和 yunying。它们分别对应 vue3、vue2 和 yunying 业务。具体如下表：

类型	描述
vue3	百度网盘新研发模式架构，基于 Vue3.x + Vite + Pinia
vue2	百度网盘新研发模式架构，基于 Vue2.7 + Vite + VueX 3.x
yunying	百度网盘运营侧存量业务，基于 Vue2.7 + Vite + VueX 3.x

3. 生成代码：

# 使用 gen 命令根据 API ID 生成接口胶水代码
$ codifytools gen --type=api --apiid=22321

# 使用接口三要素生成代码
$ codifytools gen --type=api --factors=./factors_v1.txt

1. 推送代码：仅限运营类型的项目

$ codifytools push

演示视频：www.bilibili.com/video/BV1ie…

1. 区块管理：

# 针对当前工程下./components/demo-block文件夹穿件一个名称为 demo-block 的组件。
$ codifytools block create ./components/demo-block --name=demo-block

# 在当前项目使用民初为 demo-block 组件
$ codifytools block use demo-block

# 发布当前工程下所有的组件
$ codifytools block release

# 查看远程组件库中所有组件演示
$ codifytools block view

演示视频：www.bilibili.com/video/BV1de…

2.6 D2C Runtime的角色 （仅运营场景需要）

阐述D2C Runtime在编译和部署过程中的作用，以及它如何作为一个无头CMS（Content Management System）来工作。

D2C Runtime 是一个基于 Nest.js 框架构建的 Node.js 应用，它为项目提供了一个完整的开发、部署和管理的运行时环境。以下是对 D2C Runtime 角色和能力的总结：

角色定位：

• 开发支持：D2C Runtime 提供了一套完整的 API 接口，支持开发者进行项目的构建和开发工作。
• 部署管理：通过 API 接口，D2C Runtime 能够触发项目的流水线构建，实现自动化部署。
• 配置管理：它允许用户获取和管理项目的不同版本，确保项目的配置和依赖得到妥善管理。

核心能力：

1. 流水线构建触发：

• 提供 POST /d2c-api/ipipe/pipelineBuilds 接口，用户可以通过发送请求来触发项目的流水线构建。
• 请求参数包括项目 ID、项目分类和页面路由前缀等。
• 响应包含流水线构建 ID、任务构建 ID、阶段构建 ID、构建版本号和工作区 ID 等信息。

2. 项目列表获取：

• 通过 GET /d2c-api/project/d2c/list 请求，用户可以获取当前所有项目的列表。
• 返回数据包括项目 ID、名称、类别、创建者、创建时间和修改时间，以及项目包的相关信息。

3. 项目版本信息获取：

• 使用 GET /d2c-api/project/:projectId/versions 接口，根据项目 ID 获取所有已触发构建动作的版本内容。
• 可以指定版本号来获取特定版本的详细信息。
• 返回数据包括版本号、类别、创建时间、创建用户和 HTML 内容等。

4. 项目上线：

• POST /d2c-api/project/release 接口用于执行项目上线操作。
• 请求必须包含项目 ID 和版本号。

5. 编译完成后的 HTML 文件内容获取：

• 提供 GET /project/:projectID 和 GET /project/:projectID/version/:versionID 请求，分别用于获取状态为 online 的版本内容和指定版本的 HTML 内容。

使用场景：

• 开发者在本地 IDE 完成开发后，可以使用 push 命令将代码推送到远程渲染服务。
• 在运营平台配置成功后，D2C Runtime 将接管后续的构建和部署流程。
• 开发者可以通过 D2C Runtime 的 API 接口来触发构建、获取项
• 目信息、管理版本和执行上线操作。

D2C Runtime 是一个强大的后端服务，它通过提供一系列的 API 接口，使得项目管理、构建、部署和上线过程变得更加自动化和高效。它不仅简化了开发者的工作流程，还提高了项目的迭代速度和质量。通过 D2C Runtime，团队可以更加专注于业务逻辑的开发，而将重复性的工作交给自动化的流程来处理。

三、实际操作演示

演示视频，完整运营流程：www.bilibili.com/video/BV1de…

51 活动完整流程演示：www.bilibili.com/video/BV1ve…

四、问题解决和调试

4.1 常见问题解答（FAQ）

1. 生成的代码结构不符合预期？

这种情况通常是因为没有合理编排图层或直接使用 UI 设计稿中的原始图层导致，请重新编排图层并生成代码。

2. 图层结构不合理，影响D2C转换效率和准确性？

请参考毕业季图层编排的最佳实践示例：www.figma.com/design/L5Sr…

3. 移动端布局自适应如何实现？

在 locofy plugin 预览是设置整个项目的配置为 rem，另外通过 codifytools load 加载项目时，会自动生成 postcss.config.js文件，使用 post-css 的插件实现 px 单位转 rem 或 vw 。

4. 如何实现组件复用以及设计系统标准化提效？

设计系统暂时没有支持，但是组件复用的功能 codifytools 提供了基础的区块管理能力。可以参考 codifytools 工具的相关文档。

5. locofy plugin 和 locofy builder 的使用问题？

在使用 locofy 之前请认真阅读相关的官方文档，可以事半功倍。

6. 应用性能不达标，如加载时间长、响应慢？

通常情况下 locofy 生成的代码中会引入一些国外的第三方库，如 googlefonts 或使用 jsdelivr 相关的 cdn delivery 服务加载外部的资源。因为国内的网络环境问题会导致加载速度慢。

7. 在添加交互功能时，事件处理器或数据绑定出现问题？

在 codify builder 中使用 Create Component 功能创建组件配置 Props 时可能无法直接达到完美的状态，最好是使用写死的数据，待导出压缩包之后在本地进行优化和修改。

8. 使用codifytools生成API代码时出现参数错误或配置问题？

codifytools 是直接请求 EASY 平台的 API ID 生成对应的 Store 状态信息的。请检查 EASY 返回的接口 Schema 格式是否符合预期。可通过 http://10.138.34.59:8089/api/thirdParty/info?apiid=2482 获取接口的结构信息。

9. 设计稿中的某些视觉元素或布局无法正确转换为代码？

locofy 只适合静态交互效果，对于携带动效的效果无法实现，仍需使用人工手写代码完成需求。如抽奖动效。

4.2 调试工具和技术

Nodejs、Chrome、Locofy.ai、Storybook、BOS、TableStorage、百度智能云相关服务