coze源码解读： space develop 页面

layout 组件解释完了之后，我们顺着路由配置一个个往下看。前面几个 Redirect 都不用看，调整过，直接来到 space 页面。

space 下面就一个大的子路由:SpaceIdLayout,SpaceIdLayout大概有 8 个页面。我们先来看Develop（Space 和 SpaceIdLayout 都没什么特别的），核心代码在：/entry-adapter/src/pages/develop/index.tsx。

启动服务之后打开，可以看到页面大概长这样：

页面比较简单，一个标题，两个 select，以及具体创建的项目列表（app 或者 agent）。

接下来我们来看看具体的实现。

先看逻辑部分。

页面状态读取

useSpaceStore,useCachedQueryParams,isFilterHighlight，通过三个方法去获取当前状态，主要是用来控制渲染。

typescript 复制代码

const isPersonal = useSpaceStore(
  state => state.space.space_type === SpaceType.Personal,
);

// Keyword Search & Filtering
const [filterParams, setFilterParams, debouncedSetSearchValue] =
  useCachedQueryParams();

const {
  isIntelligenceTypeFilterHighlight,
  isOwnerFilterHighlight,
  isPublishAndOpenFilterHighlight,
} = isFilterHighlight(filterParams);

useSpaceStore逻辑比较简单，从 store 中获取 space 类型。 useCachedQueryParams主要是从 localstorage 中获取当前 select 的查询状态，以便在页面刷新的时候可以保留（该说不说，感觉这功能没啥用）。该 hooks 会返回两个方法：setFilterParams,debouncedSetSearchValue。分别用来设置 select 和搜索框的状态。

isFilterHighlight是一个工具方法，负责解析 filterParams，控制页面展示。

列表展示控制

这里主要有两个 hooks:useIntelligenceList,useGlobalEventListeners。

useIntelligenceList底层封装了useInfiniteScroll,负责列表数据的获取和更新，对外暴露一些控制方法，例如reload，mutate等。

useGlobalEventListeners监听了在refreshFavList等事件派发的时候主动调用reload方法刷新列表。主要是在列表删除、负责或者创建的时候会执行这些动作。事件是基于 mitt 封装了一层。

接下来有两个useEffect，一个是在 spaceId 变化的时候更新 select,一个应该是监控相关的一些逻辑。都不太重要，一起放在这里讲了。

应用的创建和复制

接下来还有三个 hooks，分别是控制应用的创建、复制、删除等逻辑。

typescript 复制代码

useProjectCopyPolling({
  listData: data?.list,
  spaceId,
  mutate,
});

const { contextHolder: cardActionsContextHolder, actions: cardActions } =
  useCardActions({
    isPersonalSpace: isPersonal,
    mutate,
  });

/**
 * Create project
 */
const { contextHolder, actions } = useIntelligenceActions({
  spaceId,
  mutateList: mutate,
  reloadList: reload,
});

useProjectCopyPolling这个 hooks 主要是监听了onCopyTaskUpdate事件，事件完成的时候更新列表状态。应该是任务复制是一个比较耗时的操作，所有用了 polling 的方式去做状态监听（这块逻辑感觉还是不错的）。

接下来是两个 actions:useCardActions,useIntelligenceActions,用来控制弹框的渲染和执行，以及删除、复制等逻辑。。

就是这两个：

不展开了，没什么好说的（这种逻辑和视图耦合在一起的做法，不知道是怎么被设计出来的，可能是我孤陋寡闻了）。

ui

逻辑部分讲完了，接下来讲讲 ui 部分。

ui 部分比较长，但是核心就是:BotCard。但是其实也没什么好讲的，核心逻辑都在上面提到的两个 action 里面。

develop 部分就差不多到这里吧。