自定义应用配置管理服务#

为方便演示, 在 React SPA 版本中，我们默认使用 LocalStorage 进行应用配置管理，而在 Next.js 版本中，我们默认使用的是本地 JSON 文件。

如果你想自定义应用配置管理服务，可以参考以下步骤。

确定运行模式#

在开始配置之前，确保你的运行模式是多应用模式。

// 初始化全局运行时配置
difyChatRuntimeConfig.init('multiApp')

修改默认应用配置管理服务#

React SPA 版本#

应用管理服务定义入口：

// 默认使用 LocalStorage 存储
import DifyAppService from './localstorage';

export const appService = new DifyAppService();

在 packages/react-app/src/services/app/multiApp 目录下，分别有三种应用配置存储的实现形式：

• static-readonly, 写死在代码中的数据，只支持查询，不支持修改数据
• localstorage, 使用 LocalStorage 存储，支持完整的 CRUD，但无法跨浏览器同步
• restful, 通过 API 接口存储，支持完整的 CRUD，推荐使用🌟

你可以根据你的需要自行选择，也可以修改代码或扩展其他实现形式，最终只要通过 src/services/app/multiApp/index.ts 导出即可。

Next.js 版本#

应用管理服务定义入口：

# 使用 fs 实现
export * from "./fs";

在 packages/nextjs-app/services/app 目录下，实现了两种应用配置的存储形式：

• fs, 基于本地文件的存储，支持完整的 CRUD，但存在丢失数据的风险
• restful, 通过 API 接口管理，支持完整的 CRUD，推荐使用🌟

你可以根据你的需要自行选择，也可以修改代码或扩展其他实现形式，最终只要通过 packages/nextjs-app/services/app/index.ts 导出即可。

预设应用配置管理服务#

React SPA 版本#

1. LocalStorage 实现

使用 LocalStorage 数据进行存储，当用户切换浏览器后，数据会丢失，仅作为演示用。

2. 静态数据实现

使用静态数据进行存储，仅支持查询，不支持修改数据，适用于修改频率不高，用户无需自定义应用的场景。

定义用户可访问的应用列表：

import { AppModeEnums, IDifyAppItem } from '@dify-chat/core'

/**
 * 静态的应用列表，用于演示
 */
export const staticAppList: IDifyAppItem[] = [
	{
		// 应用唯一标识，不重复即可
		id: '0.270357011315995',
		// 应用信息，包括名称、描述、标签、模式等
		info: {
			// 应用名称
			name: 'My Chatflow APP',
			// 应用描述
			description: '我的 Chatflow 应用',
			// 应用标签
			tags: [],
			// 应用模式
			mode: AppModeEnums.CHATFLOW,
		},
		// API 请求配置，包括 API Base 和 API Key
		requestConfig: {
			// API Base 地址
			apiBase: 'https://api.dify.ai/v1',
			// API 密钥
			apiKey: 'app-xxxxxxx',
		},
	},
]

3. Restful 实现

通过 API 接口管理，支持完整的 CRUD，推荐使用🌟

默认请求的后端服务地址为 http://localhost:3000，你可以根据你的需要修改。

启动后端服务：

pnpm dev

Next.js 版本#

1. 本地文件实现

使用本地文件进行存储，支持完整的 CRUD，但存在丢失数据的风险。

2. Restful 实现

通过 API 接口管理，支持完整的 CRUD，推荐使用🌟

默认请求的后端服务地址为 http://localhost:3000，你可以根据你的需要修改。

启动后端服务：

pnpm dev

自定义后端服务#

如果预设的 Restful 实现无法满足你的需求，或者技术栈与你的后端服务不一致，你可以自定义你的后端服务，请遵循以下步骤进行操作。

首先，参考 packages/server，实现以下接口：

然后在对应的 restful 实现中，修改调用的 BaseURL 即可。

const API_BASE_URL = 'http://localhost:3000'