diff --git a/ui/src/api/config.ts b/ui/src/api/config.ts
index 9cddf9f31..c755439fd 100644
--- a/ui/src/api/config.ts
+++ b/ui/src/api/config.ts
@@ -23,30 +23,46 @@ export const getDefaultConfigScriptData = () => ({
  * 获取未命名版本的配置文件列表
  * @param biz_id 空间ID
  * @param app_id 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param query 查询参数
  * @returns
  */
-export const getConfigList = (biz_id: string, app_id: number, query: ICommonQuery) =>
+export const getConfigList = (biz_id: string, app_id: number, projectId: string, envId: string, query: ICommonQuery) =>
   http
-    .post(`/config/biz/${biz_id}/apps/${app_id}/config_items`, { ...query, with_status: true })
+    .post(`/config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${app_id}/config_items`, { ...query, with_status: true })
     .then((res) => res.data);
 
 /**
  * 获取已发布版本的非模板配置文件列表
  * @param biz_id 空间ID
  * @param app_id 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param release_id 版本ID
  * @param params 查询参数
  * @returns
  */
-export const getReleasedConfigList = (biz_id: string, app_id: number, release_id: number, params: ICommonQuery) =>
-  http.post(`/config/biz/${biz_id}/apps/${app_id}/releases/${release_id}/config_items`, params).then((res) => {
-    res.data.details.forEach((item: any) => {
+export const getReleasedConfigList = (
+  biz_id: string,
+  app_id: number,
+  projectId: string,
+  envId: string,
+  release_id: number,
+  params: ICommonQuery,
+) =>
+  http
+    .post(
+      `/config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${app_id}/releases/${release_id}/config_items`,
+      params,
+    )
+    .then((res) => {
+      res.data.details.forEach((item: any) => {
       // 接口返回的config_item_id为实际的配置文件id，id字段没有到，统一替换
-      item.id = item.config_item_id;
+        item.id = item.config_item_id;
+      });
+      return res.data;
     });
-    return res.data;
-  });
 
 /**
  * 新增配置
@@ -83,26 +99,41 @@ export const deleteServiceConfigItem = (id: number, bizId: string, appId: number
  * 批量删除非模板配置
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param ids 配置项ID列表
  * @returns
  */
-export const batchDeleteServiceConfigs = (bizId: string, appId: number, ids: number[]) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/config_items/batch_delete`, { ids });
+export const batchDeleteServiceConfigs = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  ids: number[],
+) =>
+  http.post(
+    `/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/config_items/batch_delete`,
+    { ids },
+  );
 
 /**
  * 获取未命名版本配置文件详情
  * @param biz_id 空间ID
  * @param id 配置ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @returns
  */
-export const getConfigItemDetail = (biz_id: string, id: number, appId: number) =>
-  http.get(`/config/biz/${biz_id}/apps/${appId}/config_items/${id}`).then((resp) => resp.data);
+export const getConfigItemDetail = (biz_id: string, id: number, appId: number, projectId: string, envId: string) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${appId}/config_items/${id}`).then((resp) => resp.data);
 
 /**
  * 获取已发布版本配置文件详情
  * @param biz_id 空间ID
  * @param app_id 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param release_id 版本ID
  * @param config_item_id 配置文件ID
  * @returns
@@ -110,11 +141,13 @@ export const getConfigItemDetail = (biz_id: string, id: number, appId: number) =
 export const getReleasedConfigItemDetail = (
   biz_id: string,
   app_id: number,
+  projectId: string,
+  envId: string,
   release_id: number,
   config_item_id: number,
 ) =>
   http
-    .get(`/config/biz/${biz_id}/apps/${app_id}/releases/${release_id}/config_items/${config_item_id}`)
+    .get(`/config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${app_id}/releases/${release_id}/config_items/${config_item_id}`)
     .then((resp) => {
       resp.data.config_item.id = resp.data.config_item_id;
       return resp.data;
@@ -211,73 +244,98 @@ export const createVersion = (bizId: string, appId: number, params: ICreateVersi
  * 废弃版本
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId 版本ID
  * @returns
  */
-export const deprecateVersion = (bizId: string, appId: number, releaseId: number) =>
-  http.put(`/config/biz/${bizId}/apps/${appId}/releases/${releaseId}/deprecate`);
+export const deprecateVersion = (bizId: string, appId: number, projectId: string, envId: string, releaseId: number) =>
+  http.put(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/deprecate`);
 
 /**
  * 恢复版本
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId 版本ID
  * @returns
  */
-export const undeprecateVersion = (bizId: string, appId: number, releaseId: number) =>
-  http.put(`/config/biz/${bizId}/apps/${appId}/releases/${releaseId}/undeprecate`);
+export const undeprecateVersion = (bizId: string, appId: number, projectId: string, envId: string, releaseId: number) =>
+  http.put(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/undeprecate`);
 
 /**
  * 删除版本
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId 版本ID
  * @returns
  */
-export const deleteVersion = (bizId: string, appId: number, releaseId: number) =>
-  http.delete(`/config/biz/${bizId}/apps/${appId}/releases/${releaseId}`);
+export const deleteVersion = (bizId: string, appId: number, projectId: string, envId: string, releaseId: number) =>
+  http.delete(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}`);
 
 /**
  * 获取版本列表
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param params 查询参数
  * @returns
  */
-export const getConfigVersionList = (bizId: string, appId: number, params: IConfigVersionQueryParams) =>
-  http.get(`config/biz/${bizId}/apps/${appId}/releases`, { params }).then((res) => {
-    res.data.details.forEach((item: IConfigVersion) => {
-      const defaultGroup = item.status.released_groups.find((group) => group.id === 0);
-      if (defaultGroup) {
-        defaultGroup.name = localT('全部实例');
-      }
+export const getConfigVersionList = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  params: IConfigVersionQueryParams,
+) =>
+  http
+    .get(
+      `config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases`,
+      { params },
+    )
+    .then((res) => {
+      res.data.details.forEach((item: IConfigVersion) => {
+        const defaultGroup = item.status.released_groups.find((group) => group.id === 0);
+        if (defaultGroup) {
+          defaultGroup.name = localT('全部实例');
+        }
+      });
+      return res;
     });
-    return res;
-  });
 
 /**
  * 发布版本
  * @param bizId 业务ID
  * @param appId 应用ID
- * @param name 版本名称
+ * @param projectId 项目ID
+ * @param envId 环境ID
+ * @param releaseId 版本ID
  * @param data 参数
  * @returns
  */
 export const publishVersion = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   releaseId: number,
   data: {
     groups: Array<number>;
     all: boolean;
     memo: string;
   },
-) => http.post(`/config/update/strategy/publish/publish/release_id/${releaseId}/app_id/${appId}/biz_id/${bizId}`, data);
+) => http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/publish`, data);
 
 /**
  * 发布版本(增加审批)
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param data 参数
  * @param publish_type 上线方式
  * @param publish_time 定时上线时间
@@ -287,6 +345,8 @@ export const publishVersion = (
 export const publishVerSubmit = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   releaseId: number,
   data: {
     groups: Array<number>;
@@ -296,17 +356,19 @@ export const publishVerSubmit = (
     publish_time: Date | string;
     is_compare: boolean;
   },
-) => http.post(`/config/biz_id/${bizId}/app_id/${appId}/release_id/${releaseId}/submit`, data);
+) => http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/submit`, data);
 
 /**
  * 获取服务下初始化脚本引用配置
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId 版本ID
  * @returns
  */
-export const getConfigScript = (bizId: string, appId: number, releaseId: number) =>
-  http.get(`/config/biz/${bizId}/apps/${appId}/releases/${releaseId}/hooks`).then((response) => {
+export const getConfigScript = (bizId: string, appId: number, projectId: string, envId: string, releaseId: number) =>
+  http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/hooks`).then((response) => {
     const { pre_hook, post_hook } = response.data;
     const data = {
       pre_hook: getDefaultConfigScriptData(),
@@ -325,27 +387,35 @@ export const getConfigScript = (bizId: string, appId: number, releaseId: number)
  * 更新服务下初始化脚本引用配置
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param params 配置数据
  * @returns
  */
 export const updateConfigInitScript = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   params: { pre_hook_id: number | undefined; post_hook_id: number | undefined },
-) => http.put(`/config/biz/${bizId}/apps/${appId}/config_hooks`, params);
+) => http.put(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/config_hooks`, params);
 
 /**
  * 检测导入模板与已存在配置文件的冲突详情
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @returns
  */
 export const checkAppTemplateBinding = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   params: { bindings: ITemplateBoundByAppData[] },
 ) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/template_bindings/conflict_check`, params).then((res) => {
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/template_bindings/conflict_check`, params).then((res) => {
     const conflictData: { [key: number]: number[] } = {};
     res.data.details.forEach(
       (item: { template_id: number; template_name: string; template_set_id: number; template_set_name: string }) => {
@@ -363,19 +433,25 @@ export const checkAppTemplateBinding = (
  * 新建模板配置文件和服务绑定关系
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param params 查询参数
  * @returns
  */
 export const importTemplateConfigPkgs = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   params: { bindings: ITemplateBoundByAppData[] },
-) => http.post(`/config/biz/${bizId}/apps/${appId}/template_bindings`, params);
+) => http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/template_bindings`, params);
 
 /**
  * 更新模板配置文件和服务绑定关系
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param bindingId 模板和服务绑定关系ID
  * @param params 更新参数
  * @returns
@@ -383,38 +459,65 @@ export const importTemplateConfigPkgs = (
 export const updateTemplateConfigPkgs = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   bindingId: number,
   params: { bindings: ITemplateBoundByAppData[] },
-) => http.put(`/config/biz/${bizId}/apps/${appId}/template_bindings/${bindingId}`, params);
+) => http.put(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/template_bindings/${bindingId}`, params);
 
 /**
  * 获取服务下未命名版本绑定的模板配置文件列表
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param query 查询参数
  * @returns
  */
-export const getBoundTemplates = (bizId: string, appId: number, query: ICommonQuery) =>
+export const getBoundTemplates = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  query: ICommonQuery,
+) =>
   http
-    .post(`/config/biz/${bizId}/apps/${appId}/template_revisions`, { ...query, with_status: true })
+    .post(
+      `/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/template_revisions`,
+      { ...query, with_status: true },
+    )
     .then((res) => res.data);
 
 /**
  * 获取服务下已命名版本绑定的模板配置文件列表
  * @param bizId
  * @param appId
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId
  * @returns
  */
-export const getBoundTemplatesByAppVersion = (bizId: string, appId: number, releaseId: number, query: ICommonQuery) =>
+export const getBoundTemplatesByAppVersion = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  releaseId: number,
+  query: ICommonQuery,
+) =>
   http
-    .post(`/config/biz/${bizId}/apps/${appId}/releases/${releaseId}/template_revisions`, query)
+    .post(
+      `/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/template_revisions`,
+      query,
+    )
     .then((res) => res.data);
 
 /**
  * 更新服务下模板配置文件版本
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param bindingId 模板和服务绑定关系ID
  * @param params 更新参数
  * @returns
@@ -422,9 +525,11 @@ export const getBoundTemplatesByAppVersion = (bizId: string, appId: number, rele
 export const updateBoundTemplateVersion = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   bindingId: number,
   params: { bindings: ITemplateBoundByAppData[] },
-) => http.put(`/config/biz/${bizId}/apps/${appId}/template_bindings/${bindingId}/template_revisions`, params);
+) => http.put(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/template_bindings/${bindingId}/template_revisions`, params);
 
 /**
  * 删除服务下绑定的模板套餐
@@ -443,11 +548,13 @@ export const deleteBoundPkg = (bizId: string, appId: number, bindingId: number,
  * 删除服务下绑定的模板套餐
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param id 配置ID
  * @returns
  */
-export const deleteCurrBoundPkg = (bizId: string, appId: number, id: number) =>
-  http.delete(`/config/biz/${bizId}/apps/${appId}/template_set/${id}`);
+export const deleteCurrBoundPkg = (bizId: string, appId: number, projectId: string, envId: string, id: number) =>
+  http.delete(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/template_set/${id}`);
 
 /**
  * 导入非模板配置文件压缩包
@@ -479,36 +586,44 @@ export const importNonTemplateConfigFile = (
  * 批量添加非模板配置列表
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param bindingId 模板和服务绑定关系ID
  * @param template_set_ids 模板套餐ID列表
  * @returns
  */
-export const batchAddConfigList = (bizId: string, appId: number, query: any) =>
-  http.put(`/config/biz/${bizId}/apps/${appId}/config_items`, query).then((res) => res.data);
+export const batchAddConfigList = (bizId: string, appId: number, projectId: string, envId: string, query: any) =>
+  http.put(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/config_items`, query).then((res) => res.data);
 
 /**
  * 创建kv
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param kv 配置键值类型
  * @returns
  */
-export const createKv = (bizId: string, appId: number, kv: any) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/kvs`, kv);
+export const createKv = (bizId: string, appId: number, projectId: string, envId: string, kv: any) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs`, kv);
 
 /**
  * 获取kv
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @returns
  */
-export const getKvList = (bizId: string, appId: number, query: ICommonQuery) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/kvs/list`, query).then((res) => res.data);
+export const getKvList = (bizId: string, appId: number, projectId: string, envId: string, query: ICommonQuery) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/list`, query).then((res) => res.data);
 
 /**
  * 更新kv
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param key 配置键
  * @param value 配置值
  * @returns
@@ -516,115 +631,182 @@ export const getKvList = (bizId: string, appId: number, query: ICommonQuery) =>
 export const updateKv = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   key: string,
   editContent: { value: string; memo: string; secret_hidden?: boolean },
-) => http.put(`/config/biz/${bizId}/apps/${appId}/kvs/${key}`, editContent);
+) => http.put(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/${key}`, editContent);
 
 /**
  * 删除kv
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param configId 配置项ID
  * @returns
  */
-export const deleteKv = (bizId: string, appId: number, configId: number) =>
-  http.delete(`/config/biz/${bizId}/apps/${appId}/kvs/${configId}`);
+export const deleteKv = (bizId: string, appId: number, projectId: string, envId: string, configId: number) =>
+  http.delete(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/${configId}`);
 
 /**
  * 批量删除kv
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param ids 配置项ID列表
  * @param exclusion_operation 是否跨页
  */
-export const batchDeleteKv = (bizId: string, appId: number, ids: number[], exclusion_operation: boolean) =>
-  http.post(`config/biz/${bizId}/apps/${appId}/kvs/batch_delete`, { ids, exclusion_operation });
+export const batchDeleteKv = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  ids: number[],
+  exclusion_operation: boolean,
+) =>
+  http.post(
+    `config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/batch_delete`,
+    { ids, exclusion_operation },
+  );
 
 /**
  * 获取已发布kv
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId 版本id
  * @param key 配置键
  * @returns
  */
-export const getReleaseKv = (bizId: string, appId: number, releaseId: number, key: string) =>
-  http.get(`/config/biz/${bizId}/apps/${appId}/releases/${releaseId}/kvs/${key}`).then((res) => res.data);
+export const getReleaseKv = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  releaseId: number,
+  key: string,
+) =>
+  http
+    .get(
+      `/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/kvs/${key}`,
+    )
+    .then((res) => res.data);
 
 /**
  * 获取已发布kv列表
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId 版本id
  * @returns
  */
-export const getReleaseKvList = (bizId: string, appId: number, releaseId: number, query: ICommonQuery) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/releases/${releaseId}/kvs`, query).then((res) => res.data);
+export const getReleaseKvList = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  releaseId: number,
+  query: ICommonQuery,
+) =>
+  http
+    .post(
+      `/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/kvs`,
+      query,
+    )
+    .then((res) => res.data);
 
 /**
  * 撤销删除kv
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param kv 配置键值类型
  * @returns
  */
-export const undeleteKv = (bizId: string, appId: number, key: string) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/kvs/${key}/undelete`);
+export const undeleteKv = (bizId: string, appId: number, projectId: string, envId: string, key: string) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/${key}/undelete`);
 
 /**
  * 恢复修改kv
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param kv 配置键值类型
  * @returns
  */
-export const unModifyKv = (bizId: string, appId: number, key: string) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/kvs/${key}/undo`);
+export const unModifyKv = (bizId: string, appId: number, projectId: string, envId: string, key: string) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/${key}/undo`);
 
 /**
  * 批量导入kv配置文件
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param File 配置文件
  * @returns
  */
-export const batchImportKvFile = (bizId: string, appId: number, File: any) =>
-  http.post(`/biz/${bizId}/apps/${appId}/kvs/import`, File);
+export const batchImportKvFile = (bizId: string, appId: number, projectId: string, envId: string, File: any) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/import`, File);
 
 /**
  * 导出kv配置文件
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId 发布版本ID
  * @returns
  */
-export const getExportKvFile = (bizId: string, appId: number, releaseId: number, format: string) =>
-  http.get(`biz/${bizId}/apps/${appId}/releases/${releaseId}/kvs/export`, { params: { format } });
+export const getExportKvFile = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  releaseId: number,
+  format: string,
+) =>
+  http.get(
+    `config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/kvs/export`,
+    { params: { format } },
+  );
 
 /**
  * 撤销修改配置文件
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param id 配置文件ID
  * @returns
  */
-export const unModifyConfigItem = (bizId: string, appId: number, id: number) =>
-  http.post(`/config/undo/config_item/config_item/config_item_id/${id}/app_id/${appId}/biz_id/${bizId}`);
+export const unModifyConfigItem = (bizId: string, appId: number, projectId: string, envId: string, id: number) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/config_items/${id}/undo`);
 
 /**
  * 恢复删除配置文件
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param id 配置文件ID
  * @returns
  */
-export const unDeleteConfigItem = (bizId: string, appId: number, id: number) =>
-  http.post(`/config/undelete/config_item/config_item/config_item_id/${id}/app_id/${appId}/biz_id/${bizId}`);
+export const unDeleteConfigItem = (bizId: string, appId: number, projectId: string, envId: string, id: number) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/config_items/${id}/undelete`);
 
 /**
  * 从历史版本导入配置项
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param other_app_id 导入服务id
  * @param release_id 版本id
  * @returns
@@ -632,13 +814,17 @@ export const unDeleteConfigItem = (bizId: string, appId: number, id: number) =>
 export const importFromHistoryVersion = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   params: { other_app_id: number; release_id: number },
-) => http.get(`/config/biz/${bizId}/apps/${appId}/config_items/compare_conflicts`, { params });
+) => http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/config_items/compare_conflicts`, { params });
 
 /**
  * 从历史版本导入kv配置项
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param other_app_id 导入服务id
  * @param release_id 版本id
  * @returns
@@ -646,122 +832,167 @@ export const importFromHistoryVersion = (
 export const importKvFromHistoryVersion = (
   bizId: string,
   appId: number,
+  projectId: string,
+  envId: string,
   params: { other_app_id: number; release_id: number },
-) => http.get(`/config/biz/${bizId}/apps/${appId}/kvs/compare_conflicts`, { params });
+) => http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/compare_conflicts`, { params });
 
 /**
  * 简单文本导入kv配置项
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param kvs 上传kv列表
  * @returns
  */
-export const importKvFormText = (bizId: string, appId: number, kvs: any, replace_all: boolean) =>
-  http.put(`/config/biz/${bizId}/apps/${appId}/kvs`, { kvs, replace_all });
+export const importKvFormText = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  kvs: any,
+  replace_all: boolean,
+) =>
+  http.put(
+    `/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs`,
+    { kvs, replace_all },
+  );
 
 /**
  * json文本导入kv配置项
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param kvs 上传kv列表
  * @returns
  */
-export const importKvFormJson = (bizId: string, appId: number, content: string) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/kvs/json/import`, { data: content });
+export const importKvFormJson = (bizId: string, appId: number, projectId: string, envId: string, content: string) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/json/import`, { data: content });
 
 /**
  * yaml文本导入kv配置项
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param kvs 上传kv列表
  * @returns
  */
-export const importKvFormYaml = (bizId: string, appId: number, content: string) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/kvs/yaml/import`, { data: content });
+export const importKvFormYaml = (bizId: string, appId: number, projectId: string, envId: string, content: string) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/yaml/import`, { data: content });
 
 /**
  * 判断生成版本名称是否重名
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param kvs 上传kv列表
  * @returns
  */
-export const createVersionNameCheck = (bizId: string, appId: number, name: string) =>
-  http.get(`/config/biz_id/${bizId}/app_id/${appId}/release/${name}/check`);
+export const createVersionNameCheck = (bizId: string, appId: number, projectId: string, envId: string, name: string) =>
+  http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/name/${name}/check`);
 
 /**
  * 从配置模板导入配置文件
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param bindingId 模板和服务绑定关系ID
  * @param params 更新参数
  * @returns
  */
-export const importConfigFromTemplate = (bizId: string, appId: number, query: any) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/template_bindings/import_template_set`, query);
+export const importConfigFromTemplate = (bizId: string, appId: number, projectId: string, envId: string, query: any) =>
+  http.post(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/template_bindings/import_template_set`, query);
 
 /**
  * 上次上线方式查询
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @returns
  */
-export const publishType = (bizId: string, appId: number) =>
-  http.get(`/config/biz_id/${bizId}/app_id/${appId}/last/select`);
+export const publishType = (bizId: string, appId: number, projectId: string, envId: string) =>
+  http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/last/select`);
 
 /**
  * 当前版本状态查询
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param releaseId 版本ID
  * @returns
  */
-export const versionStatusQuery = (bizId: string, appId: number, releaseId: number) =>
-  http.get(`/config/biz_id/${bizId}/app_id/${appId}/release_id/${releaseId}/status`);
+export const versionStatusQuery = (bizId: string, appId: number, projectId: string, envId: string, releaseId: number) =>
+  http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/releases/${releaseId}/status`);
 
 /**
  * 当前服务下 所有版本上线状态检查
  * @param bizId 业务ID
  * @param appId 应用ID
- * @param releaseId 版本ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @returns
  */
-export const versionStatusCheck = (bizId: string, appId: number) =>
-  http.get(`/config/biz_id/${bizId}/app_id/${appId}/last/publish`);
+export const versionStatusCheck = (bizId: string, appId: number, projectId: string, envId: string) =>
+  http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/last/publish`);
 
 /**
  * 批量恢复kv配置项
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param ids 恢复的id列表
  * @returns
  */
-export const batchUndeleteKv = (bizId: string, appId: number, keys: string[], exclusion_operation: boolean) =>
-  http.post(`config/biz/${bizId}/apps/${appId}/kvs/batch_undelete`, { keys, exclusion_operation });
+export const batchUndeleteKv = (
+  bizId: string,
+  appId: number,
+  projectId: string,
+  envId: string,
+  keys: string[],
+  exclusion_operation: boolean,
+) =>
+  http.post(
+    `config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/batch_undelete`,
+    { keys, exclusion_operation },
+  );
 
 /**
  * 批量恢复服务型配置项
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param ids 恢复的id列表
  * @returns
  */
-export const batchUndeleteFile = (bizId: string, appId: number, ids: number[]) =>
-  http.post(`config/biz_id/${bizId}/app_id/${appId}/config_items/batch_undelete`, { ids });
+export const batchUndeleteFile = (bizId: string, appId: number, projectId: string, envId: string, ids: number[]) =>
+  http.post(`config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/config_items/batch_undelete`, { ids });
 
 /**
  * 获取即将过期证书列表
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @returns
  */
-export const getUnExpiredCertList = (bizId: string, appId: number, params: any) =>
-  http.get(`/config/biz/${bizId}/apps/${appId}/kvs/near_certificate`, { params });
+export const getUnExpiredCertList = (bizId: string, appId: number, projectId: string, envId: string, params: any) =>
+  http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/kvs/near_certificate`, { params });
 
 /**
  * 获取所有发布版本配置项列表
  * @param bizId 业务ID
  * @param appId 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  */
-export const getAllReleasedConfigList = (bizId: string, appId: number) =>
-  http.get(`/config/biz/${bizId}/apps/${appId}/published/all`);
+export const getAllReleasedConfigList = (bizId: string, appId: number, projectId: string, envId: string) =>
+  http.get(`/config/biz/${bizId}/projects/${projectId}/envs/${envId}/apps/${appId}/published/all`);
diff --git a/ui/src/api/env.ts b/ui/src/api/env.ts
index fc3a74ad1..f489824ed 100644
--- a/ui/src/api/env.ts
+++ b/ui/src/api/env.ts
@@ -5,7 +5,7 @@ import type { IUpdateEnvItem, IEnvQuery } from '../../types/env';
  * 获取环境列表
  */
 export function getEnvList(biz_id: string, project_id: string, query: IEnvQuery) {
-  return http.post(`/config/biz/${biz_id}/projects/${project_id}/envs/list`, {
+  return http.post(`/config/biz/${biz_id}/projects/${project_id}/envs:list`, {
     ...query,
   });
 }
diff --git a/ui/src/api/group.ts b/ui/src/api/group.ts
index 121f5d088..6facec16f 100644
--- a/ui/src/api/group.ts
+++ b/ui/src/api/group.ts
@@ -34,10 +34,12 @@ export const delCategory = (app_id: number, group_category_id: number) =>
  * 获取服务下分组列表
  * @param biz_id 空间ID
  * @param app_id 应用ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @returns
  */
-export const getServiceGroupList = (biz_id: string, app_id: number) =>
-  http.get(`/config/biz/${biz_id}/apps/${app_id}/groups`).then((res) => {
+export const getServiceGroupList = (biz_id: string, app_id: number, projectId: string, envId: string) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${app_id}/groups`).then((res) => {
     const defaultGroup = res.data.details.find((item: IGroupItemInService) => item.group_id === 0);
     if (defaultGroup) {
       defaultGroup.group_name = localT('全部实例');
@@ -48,63 +50,70 @@ export const getServiceGroupList = (biz_id: string, app_id: number) =>
 /**
  * 获取空间下分组
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @returns
  */
-export const getSpaceGroupList = (biz_id: string, topId?: number) =>
-  http.get(`/config/biz/${biz_id}/groups`, { params: { top_ids: topId } }).then((res) => res.data);
+export const getSpaceGroupList = (biz_id: string, projectId?: string, topId?: number) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/groups`, { params: { top_ids: topId } }).then((res) => res.data);
 
 /**
  * 新增分组
- * @param app_id 应用ID
+ * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param params 分组编辑参数
  * @returns
  */
-export const createGroup = (biz_id: string, params: IGroupEditArg) =>
-  http.post(`/config/biz/${biz_id}/groups`, params).then((res) => res.data);
+export const createGroup = (biz_id: string, projectId?: string, params: IGroupEditArg) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/groups`, params).then((res) => res.data);
 
 /**
  * 编辑分组
  * @param biz_id 空间ID
  * @param group_id 分组ID
+ * @param projectId 项目ID
  * @param params 分组编辑参数
  * @returns
  */
-export const updateGroup = (biz_id: string, group_id: number, params: IGroupEditArg) =>
-  http.put(`/config/biz/${biz_id}/groups/${group_id}`, params).then((res) => res.data);
+export const updateGroup = (biz_id: string, group_id: number, projectId?: string, params: IGroupEditArg) =>
+  http.put(`/config/biz/${biz_id}/projects/${projectId}/groups/${group_id}`, params).then((res) => res.data);
 
 /**
  * 删除分组
  * @param biz_id 空间ID
  * @param group_id 分组ID
+ * @param projectId 项目ID
  * @returns
  */
-export const deleteGroup = (biz_id: string, group_id: number) =>
-  http.delete(`/config/biz/${biz_id}/groups/${group_id}`);
+export const deleteGroup = (biz_id: string, group_id: number, projectId?: string) =>
+  http.delete(`/config/biz/${biz_id}/projects/${projectId}/groups/${group_id}`);
 
 /**
  * 批量删除分组
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param ids 分组ID列表
  * @returns
  */
-export const batchDeleteGroup = (biz_id: string, ids: number[]) =>
-  http.post(`/config/biz/${biz_id}/groups/batch_delete`, { ids });
+export const batchDeleteGroup = (biz_id: string, projectId?: string, ids: number[]) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/groups:batch_delete`, { ids });
 
 /**
  * 获取分组已上线服务
  * @param biz_id 空间ID
  * @param group_id 分组ID
  * @param params 查询参数
+ * @param projectId 项目ID
  * @returns
  */
-export const getGroupReleasedApps = (biz_id: string, group_id: number, params: ICommonQuery) =>
-  http.get(`/config/biz/${biz_id}/groups/${group_id}/released_apps`, { params }).then((res) => res.data);
+export const getGroupReleasedApps = (biz_id: string, group_id: number, params: ICommonQuery, projectId?: string) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/groups/${group_id}/released_apps`, { params }).then((res) => res.data);
 
 /**
  * 获取分组选择器
  * @param biz_id 空间ID
  * @param label_name 标签名称
+ * @param projectId 项目ID
  * @returns
  */
-export const getGroupSelector = (biz_id: string, label_name: string) =>
-  http.get(`/config/biz/${biz_id}/groups/selector/${label_name}`).then((res) => res.data);
+export const getGroupSelector = (biz_id: string, label_name: string, projectId?: string) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/groups:selector/${label_name}`).then((res) => res.data);
diff --git a/ui/src/api/index.ts b/ui/src/api/index.ts
index d54c5e8eb..7a3c9e8e8 100644
--- a/ui/src/api/index.ts
+++ b/ui/src/api/index.ts
@@ -41,11 +41,13 @@ export const getSpaceFeatureFlag = (biz: string) =>
 /**
  * 获取服务列表
  * @param biz_id 业务ID
- * @param params 查询过滤条件
+ * @param projectId 项目ID
+ * @param envId 环境ID
+ * @param query 查询过滤条件
  * @returns
  */
-export const getAppList = (biz_id: string, query: IAppListQuery = {}) =>
-  http.post(`config/list/app/app/biz_id/${biz_id}`, query).then((resp) => {
+export const getAppList = (biz_id: string, projectId: string, envId: string, query: IAppListQuery = {}) =>
+  http.post(`config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps:list`, query).then((resp) => {
     resp.data.details.forEach((item: IAppItem) => {
       // @ts-ignore
       item.permissions = resp.web_annotations.perms[item.id] || {};
@@ -53,56 +55,70 @@ export const getAppList = (biz_id: string, query: IAppListQuery = {}) =>
     return resp.data;
   });
 
-/**
+  /**
  * 获取服务下配置文件数量、更新时间等信息
+ * @param biz_id 业务ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
+ * @param app_id 服务ID数组
+ * @returns
  */
-export const getAppsConfigData = (biz_id: string, app_id: number[]) =>
-  http.post(`/config/config_item_count/biz_id/${biz_id}`, { biz_id, app_id }).then((resp) => resp.data);
+export const getAppsConfigData = (biz_id: string, projectId: string, envId: string, app_id: number[]) =>
+  http.post(`config/biz/${biz_id}/projects/${projectId}/envs/${envId}/config_items/count`, { biz_id, app_id }).then((resp) => resp.data);
 
 /**
  * 获取服务详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param app_id 服务ID
  * @returns
  */
-export const getAppDetail = (biz_id: string, app_id: number) =>
-  http.get(`config/biz/${biz_id}/apps/${app_id}`).then((resp) => resp.data);
+export const getAppDetail = (biz_id: string, projectId: string, envId: string, app_id: number) =>
+  http.get(`config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${app_id}`).then((resp) => resp.data);
 
 /**
  * 删除服务
- * @param id 服务ID
  * @param biz_id 业务ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
+ * @param id 服务ID
  * @returns
  */
-export const deleteApp = (id: number, biz_id: number) =>
-  http.delete(`config/delete/app/app/app_id/${id}/biz_id/${biz_id}`);
+export const deleteApp = (biz_id: string, projectId: string, envId: string, id: number) =>
+  http.delete(`config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${id}`);
 
 /**
  * 创建服务
  * @param biz_id 业务ID
- * @param params
+ * @param projectId 项目ID
+ * @param envId 环境ID
+ * @param params 服务参数
  * @returns
  */
-export const createApp = (biz_id: string, params: any) =>
-  http.post(`config/create/app/app/biz_id/${biz_id}`, { biz_id, ...params }).then((resp) => resp.data);
+export const createApp = (biz_id: string, projectId: string, envId: string, params: any) =>
+  http.post(`config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps`, { ...params, biz_id }).then((resp) => resp.data);
 
 /**
  * 更新服务
- * @param params { id, biz_id, name?, memo?, reload_type?, reload_file_path? }
+ * @param params { id, biz_id, projectId, envId, name?, memo?, reload_type?, reload_file_path? }
  * @returns
  */
 export const updateApp = (params: any) => {
-  const { id, biz_id, data } = params;
-  return http.put(`config/update/app/app/app_id/${id}/biz_id/${biz_id}`, data).then((resp) => resp.data);
+  const { biz_id, projectId, envId, id, data } = params;
+  return http.put(`config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${id}`, data).then((resp) => resp.data);
 };
 
 /**
  * 克隆服务
+ * @param biz_id 业务ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param params { id, biz_id, name?, memo?, reload_type?, reload_file_path? }
  * @returns
  */
-export const cloneApp = (biz_id: string, params: any) => {
-  return http.post(`config/biz/${biz_id}/clone_app`, { biz_id, ...params }).then((resp) => resp.data);
+export const cloneApp = (biz_id: string, projectId: string, envId: string, params: any) => {
+  return http.post(`config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps:clone`, { ...params, biz_id }).then((resp) => resp.data);
 };
 
 /**
diff --git a/ui/src/api/project.ts b/ui/src/api/project.ts
index 69debed00..ce480e2b6 100644
--- a/ui/src/api/project.ts
+++ b/ui/src/api/project.ts
@@ -8,7 +8,7 @@ import { IProjectQuery, IProjectEditArg } from '../../types/project';
  * @returns
  */
 export const getProjectList = (biz_id: string, params: IProjectQuery) =>
-  http.post(`/config/biz/${biz_id}/projects/list`, params);
+  http.post(`/config/biz/${biz_id}/projects:list`, params);
 
 /**
  * 创建项目
diff --git a/ui/src/api/script.ts b/ui/src/api/script.ts
index 08ba7a9f9..9a56a7ae4 100644
--- a/ui/src/api/script.ts
+++ b/ui/src/api/script.ts
@@ -4,151 +4,178 @@ import { IScriptEditingForm, IScriptCiteQuery, IScriptListQuery } from '../../ty
 /**
  * 创建脚本
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @returns
  */
-export const createScript = (biz_id: string, params: IScriptEditingForm) =>
-  http.post(`/config/biz/${biz_id}/hooks`, params).then((res) => res.data);
+export const createScript = (biz_id: string, projectId: string, params: IScriptEditingForm) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/hooks`, params).then((res) => res.data);
 
 /**
  * 更新脚本
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param hook_id 脚本ID
  * @param params 编辑参数
  * @returns
  */
-export const updateScript = (biz_id: string, hook_id: number, params: { memo: string; tags: string[] }) =>
-  http.put(`/config/biz/${biz_id}/hooks/${hook_id}`, params).then((res) => res.data);
+export const updateScript = (
+  biz_id: string,
+  projectId: string,
+  hook_id: number,
+  params: { memo: string; tags: string[] },
+) =>
+  http.put(`/config/biz/${biz_id}/projects/${projectId}/hooks/${hook_id}`, params).then((res) => res.data);
 
 /**
  * 获取脚本列表
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param params 查询参数
  * @returns
  */
-
-export const getScriptList = (biz_id: string, params: IScriptListQuery) =>
-  http.get(`/config/biz/${biz_id}/hooks`, { params }).then((res) => res.data);
+export const getScriptList = (biz_id: string, projectId: string, params: IScriptListQuery) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/hooks`, { params }).then((res) => res.data);
 
 /**
  * 获取脚本详情
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param id 脚本ID
  * @returns
  */
-export const getScriptDetail = (biz_id: string, id: number) =>
-  http.get(`/config/biz/${biz_id}/hooks/${id}`).then((res) => res.data);
+export const getScriptDetail = (biz_id: string, projectId: string, id: number) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/hooks/${id}`).then((res) => res.data);
 
 /**
  * 获取脚本某个版本下详情
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param id 脚本ID
  * @param release_id 版本ID
  * @returns
  */
-export const getScriptVersionDetail = (biz_id: string, id: number, release_id: number) =>
-  http.get(`/config/biz/${biz_id}/hooks/${id}/hook_revisions/${release_id}`).then((res) => res.data);
+export const getScriptVersionDetail = (biz_id: string, projectId: string, id: number, release_id: number) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/hooks/${id}/hook_revisions/${release_id}`).then((res) => res.data);
 
 /**
  * 删除脚本
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param id 脚本ID
  * @returns
  */
-export const deleteScript = (biz_id: string, id: number) =>
-  http.delete(`/config/biz/${biz_id}/hooks/${id}`, { params: { force: true } }).then((res) => res.data);
+export const deleteScript = (biz_id: string, projectId: string, id: number) =>
+  http.delete(`/config/biz/${biz_id}/projects/${projectId}/hooks/${id}`, { params: { force: true } }).then((res) => res.data);
 
 /**
  * 批量删除脚本
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param ids 脚本ID列表
  * @param exclusion_operation 是否跨页
  * @returns
  */
-export const batchDeleteScript = (biz_id: string, ids: number[], exclusion_operation: boolean) =>
+export const batchDeleteScript = (biz_id: string, projectId: string, ids: number[], exclusion_operation: boolean) =>
   http
-    .post(`/config/biz/${biz_id}/hooks/batch_delete`, { force: false, ids, exclusion_operation })
+    .post(`/config/biz/${biz_id}/projects/${projectId}/hooks:batch_delete`, { force: false, ids, exclusion_operation })
     .then((res) => res.data);
 
 /**
  * 获取脚本标签列表
  * @param biz_id 空间ID
- * @param params 查询参数
+ * @param projectId 项目ID
  * @returns
  */
-export const getScriptTagList = (biz_id: string) => http.get(`/config/biz/${biz_id}/hook_tags`).then((res) => res.data);
+export const getScriptTagList = (biz_id: string, projectId: string) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/hooks:tags`).then((res) => res.data);
 
 /**
  * 获取脚本版本列表
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param hook_id 脚本ID
- * @param params 查询参数
+ * @param query 查询参数
  * @returns
  */
 export const getScriptVersionList = (
   biz_id: string,
+  projectId: string,
   hook_id: number,
   query: { start: number; limit?: number; searchKey?: string; all?: boolean },
-) => http.post(`/config/biz/${biz_id}/hooks/${hook_id}/hook_revisions/list`, query).then((res) => res.data);
+) => http.post(`/config/biz/${biz_id}/projects/${projectId}/hooks/${hook_id}/hook_revisions/list`, query).then((res) => res.data);
 
 /**
  * 创建脚本版本
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param hook_id 脚本ID
  * @param params 查询参数
  * @returns
  */
-export const createScriptVersion = (biz_id: string, hook_id: number, params: { memo: string; content: string }) =>
-  http.post(`/config/biz/${biz_id}/hooks/${hook_id}/hook_revisions`, params).then((res) => res.data);
+export const createScriptVersion = (
+  biz_id: string,
+  projectId: string,
+  hook_id: number,
+  params: { memo: string; content: string },
+) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/hooks/${hook_id}/hook_revisions`, params).then((res) => res.data);
 
 /**
  * 更新脚本版本
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param hook_id 脚本ID
+ * @param release_id 版本ID
  * @param params 查询参数
  * @returns
  */
 export const updateScriptVersion = (
   biz_id: string,
+  projectId: string,
   hook_id: number,
   release_id: number,
   params: { name: string; memo: string; content: string },
-) => http.put(`/config/biz/${biz_id}/hooks/${hook_id}/hook_revisions/${release_id}`, params).then((res) => res.data);
+) => http.put(`/config/biz/${biz_id}/projects/${projectId}/hooks/${hook_id}/hook_revisions/${release_id}`, params).then((res) => res.data);
 
 /**
  * 删除脚本版本
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param hook_id 脚本ID
  * @param release_id 版本ID
  * @returns
  */
-export const deleteScriptVersion = (biz_id: string, hook_id: number, release_id: number) =>
+export const deleteScriptVersion = (biz_id: string, projectId: string, hook_id: number, release_id: number) =>
   http
-    .delete(`/config/biz/${biz_id}/hooks/${hook_id}/hook_revisions/${release_id}`, { params: { force: true } })
+    .delete(`/config/biz/${biz_id}/projects/${projectId}/hooks/${hook_id}/hook_revisions/${release_id}`, { params: { force: true } })
     .then((res) => res.data);
 
 /**
  * 上线版本
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param hook_id 脚本ID
  * @param release_id 版本ID
  * @returns
  */
-export const publishVersion = (biz_id: string, hook_id: number, release_id: number) =>
-  http.put(`/config/biz/${biz_id}/hooks/${hook_id}/hook_revisions/${release_id}/publish`).then((res) => res.data);
+export const publishVersion = (biz_id: string, projectId: string, hook_id: number, release_id: number) =>
+  http.put(`/config/biz/${biz_id}/projects/${projectId}/hooks/${hook_id}/hook_revisions/${release_id}/publish`).then((res) => res.data);
 
 /**
  * 获取脚本被引用列表
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param hook_id 脚本ID
  * @param params 查询参数
  * @returns
  */
-export const getScriptCiteList = (biz_id: string, hook_id: number, params: IScriptCiteQuery) =>
-  http.get(`/config/biz/${biz_id}/hooks/${hook_id}/references`, { params }).then((res) => res.data);
+export const getScriptCiteList = (biz_id: string, projectId: string, hook_id: number, params: IScriptCiteQuery) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/hooks/${hook_id}/references`, { params }).then((res) => res.data);
 
 /**
  * 获取脚本某个版本被引用列表
  * @param biz_id 空间ID
+ * @param projectId 项目ID
  * @param hook_id 脚本ID
  * @param version_id 版本ID
  * @param params 查询参数
@@ -156,12 +183,13 @@ export const getScriptCiteList = (biz_id: string, hook_id: number, params: IScri
  */
 export const getScriptVersionCiteList = (
   biz_id: string,
+  projectId: string,
   hook_id: number,
   version_id: number,
   params: IScriptCiteQuery,
 ) =>
   http
-    .get(`/config/biz/${biz_id}/hooks/${hook_id}/hook_revisions/${version_id}/references`, { params })
+    .get(`/config/biz/${biz_id}/projects/${projectId}/hooks/${hook_id}/hook_revisions/${version_id}/references`, { params })
     .then((res) => res.data);
 
 // // 获取配置文件版本下的初始化脚本配置
diff --git a/ui/src/api/template.ts b/ui/src/api/template.ts
index beb43d3c6..aa7a334f1 100644
--- a/ui/src/api/template.ts
+++ b/ui/src/api/template.ts
@@ -6,53 +6,64 @@ import { IConfigEditParams } from '../../types/config';
 /**
  * 获取模板空间列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param params 查询参数
  * @returns
  */
-export const getTemplateSpaceList = (biz_id: string, params: ICommonQuery) =>
-  http.get(`/config/biz/${biz_id}/template_spaces`, { params }).then((res) => res.data);
+export const getTemplateSpaceList = (biz_id: string, projectId: string, params: ICommonQuery) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/template_spaces`, { params }).then((res) => res.data);
 
 /**
  * 创建模板空间
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param params 创建模板参数
  * @returns
  */
-export const createTemplateSpace = (biz_id: string, params: { name: string; memo: string }) =>
-  http.post(`/config/biz/${biz_id}/template_spaces`, params).then((res) => res.data);
+export const createTemplateSpace = (biz_id: string, projectId: string, params: { name: string; memo: string }) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/template_spaces`, params).then((res) => res.data);
 
 /**
  * 更新模板空间
  * @param biz_id 业务ID
- * @param id 模板ID
+ * @param projectId 项目ID
+ * @param id 模板空间ID
  * @param params 模板参数
  * @returns
  */
-export const updateTemplateSpace = (biz_id: string, id: number, params: { memo: string }) =>
-  http.put(`/config/biz/${biz_id}/template_spaces/${id}`, params).then((res) => res.data);
+export const updateTemplateSpace = (biz_id: string, projectId: string, id: number, params: { memo: string }) =>
+  http.put(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${id}`, params).then((res) => res.data);
 
 /**
  * 删除模板空间
  * @param biz_id 业务ID
- * @param id 模板ID
+ * @param projectId 项目ID
+ * @param id 模板空间ID
  * @returns
  */
-export const deleteTemplateSpace = (biz_id: string, id: number) =>
-  http.delete(`/config/biz/${biz_id}/template_spaces/${id}`);
+export const deleteTemplateSpace = (biz_id: string, projectId: string, id: number) =>
+  http.delete(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${id}`);
 
 /**
  * 创建模板套餐
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @param params 创建模板套餐参数
  * @returns
  */
-export const createTemplatePackage = (biz_id: string, template_space_id: number, params: ITemplatePackageEditParams) =>
-  http.post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets`, params).then((res) => res.data);
+export const createTemplatePackage = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: number,
+  params: ITemplatePackageEditParams,
+) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets`, params).then((res) => res.data);
 
 /**
  * 编辑模板套餐
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @param template_set_id 模板套餐ID
  * @param params 编辑模板套餐参数
@@ -60,24 +71,31 @@ export const createTemplatePackage = (biz_id: string, template_space_id: number,
  */
 export const updateTemplatePackage = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_set_id: number,
   params: ITemplatePackageEditParams,
 ) =>
   http
-    .put(`/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets/${template_set_id}`, params)
+    .put(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets/${template_set_id}`, params)
     .then((res) => res.data);
 
 /**
  * 删除模板套餐
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @param template_set_id 模板套餐ID
  * @returns
  */
-export const deleteTemplatePackage = (biz_id: string, template_space_id: number, template_set_id: number) =>
+export const deleteTemplatePackage = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: number,
+  template_set_id: number,
+) =>
   http
-    .delete(`/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets/${template_set_id}`, {
+    .delete(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets/${template_set_id}`, {
       params: { force: true },
     })
     .then((res) => res.data);
@@ -85,14 +103,20 @@ export const deleteTemplatePackage = (biz_id: string, template_space_id: number,
 /**
  * 导出模板套餐
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @param template_id 模板套餐ID
  * @returns
  */
-export const exportTemplatePackage = (biz_id: string, template_space_id: number, template_id: number) =>
+export const exportTemplatePackage = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: number,
+  template_id: number
+) =>
   http
     .get<string, Blob | string>(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/export`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/export`,
       {
         transitional: {
           forcedJSONParsing: false,
@@ -105,49 +129,69 @@ export const exportTemplatePackage = (biz_id: string, template_space_id: number,
 /**
  * 获取空间下的模板套餐列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @param params 查询参数
  * @returns
  */
-export const getTemplatePackageList = (biz_id: string, template_space_id: string, params: ICommonQuery) =>
+export const getTemplatePackageList = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: string,
+  params: ICommonQuery,
+) =>
   http
-    .get(`/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets`, { params })
+    .get(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets`, { params })
     .then((res) => res.data);
 
 /**
  * 获取业务下所有模板套餐（按模板空间分组）
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param params 查询参数，传app_id可筛选服务下的套餐模板
  * @returns
  */
-export const getAllPackagesGroupBySpace = (biz_id: string, params: { app_id?: number }) =>
-  http.get(`/config/biz/${biz_id}/template_sets/list_all_of_biz`, { params }).then((res) => res.data);
+export const getAllPackagesGroupBySpace = (biz_id: string, projectId: string, params: { app_id?: number }) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/template_sets/list_all_of_biz`, { params }).then((res) => res.data);
 
 /**
  * 获取模板空间下的全部配置文件模板列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @returns
  */
-export const getTemplatesBySpaceId = (biz_id: string, template_space_id: number, params: ICommonQuery) =>
+export const getTemplatesBySpaceId = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: number,
+  params: ICommonQuery,
+) =>
   http
-    .post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/list`, params)
+    .post(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/list`, params)
     .then((res) => res.data);
 
 /**
  * 获取模板空间下未指定套餐的模板列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @returns
  */
-export const getTemplatesWithNoSpecifiedPackage = (biz_id: string, template_space_id: number, params: ICommonQuery) =>
+export const getTemplatesWithNoSpecifiedPackage = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: number,
+  params: ICommonQuery,
+) =>
   http
-    .post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/list_not_bound`, params)
+    .post(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/list_not_bound`, params)
     .then((res) => res.data);
 
 /**
  * 获取当前模板套餐被未命名版本引用的服务引用列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @param template_set_id 模板套餐Id
  * @param params 查询参数
@@ -155,13 +199,14 @@ export const getTemplatesWithNoSpecifiedPackage = (biz_id: string, template_spac
  */
 export const getUnNamedVersionAppsBoundByPackage = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_set_id: number,
   params: ICommonQuery,
 ) =>
   http
     .get(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets/${template_set_id}/bound_unnamed_app_details`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets/${template_set_id}/bound_unnamed_app_details`,
       { params },
     )
     .then((res) => res.data);
@@ -169,17 +214,19 @@ export const getUnNamedVersionAppsBoundByPackage = (
 /**
  * 获取多个模板套餐被未命名版本引用的服务引用列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @returns
  */
 export const getUnNamedVersionAppsBoundByPackages = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_sets: number[],
   params: ICommonQuery,
 ) =>
   http
-    .get(`/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets/bound_unnamed_app_details`, {
+    .get(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets/bound_unnamed_app_details`, {
       params: { template_set_ids: template_sets.join(','), ...params },
     })
     .then((res) => res.data);
@@ -194,6 +241,7 @@ export const getUnNamedVersionAppsBoundByPackages = (
  */
 export const getCheckTemplateSetReferencesApps = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_set_ids: number[],
   items: {
@@ -203,7 +251,7 @@ export const getCheckTemplateSetReferencesApps = (
 ) =>
   http
     .post(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets/check_template_set_references_apps`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets/check_template_set_references_apps`,
       {
         template_set_ids,
         items,
@@ -214,6 +262,7 @@ export const getCheckTemplateSetReferencesApps = (
 /**
  * 获取当前模板套餐被已生成版本引用的服务引用列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @param template_set_id 模板套餐Id
  * @param params 查询参数
@@ -221,13 +270,14 @@ export const getCheckTemplateSetReferencesApps = (
  */
 export const getReleasedVersionAppsBoundByPackage = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_set_id: number,
   params: ICommonQuery,
 ) =>
   http
     .get(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets/${template_set_id}/bound_unnamed_app_details`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets/${template_set_id}/bound_unnamed_app_details`,
       { params },
     )
     .then((res) => res.data);
@@ -235,18 +285,20 @@ export const getReleasedVersionAppsBoundByPackage = (
 /**
  * 获取模板套餐下的配置文件模板列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 模板空间ID
  * @returns
  */
 export const getTemplatesByPackageId = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_set_id: number,
   params: ICommonQuery,
 ) =>
   http
     .post(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/template_sets/${template_set_id}/templates`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_sets/${template_set_id}/templates`,
       params,
     )
     .then((res) => res.data);
@@ -254,12 +306,18 @@ export const getTemplatesByPackageId = (
 /**
  * 创建模板
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param params 配置文件参数
  * @returns
  */
-export const createTemplate = (biz_id: string, template_space_id: number, params: IConfigEditParams) =>
-  http.post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates`, params);
+export const createTemplate = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: number,
+  params: IConfigEditParams,
+) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates`, params);
 
 /**
  * 上传模板配置内容
@@ -336,6 +394,7 @@ export const getTemplateUploadFileIsExist = (bizId: string, templateSpaceId: num
 /**
  * 批量删除模板
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_ids 模板ID列表
  * @param exclusion_operation 是否跨页全选
@@ -343,26 +402,29 @@ export const getTemplateUploadFileIsExist = (bizId: string, templateSpaceId: num
  */
 export const deleteTemplate = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_ids: number[],
   exclusion_operation: boolean,
 ) =>
-  http.delete(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates`, {
+  http.delete(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates`, {
     params: { template_ids: template_ids.join(','), exclusion_operation },
   });
 
 /**
  * 根据模板id列表查询对应模板详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param ids 模板ID列表
  * @returns
  */
-export const getTemplatesDetailByIds = (biz_id: string, ids: number[]) =>
-  http.post(`/config/biz/${biz_id}/templates/list_by_ids`, { ids }).then((res) => res.data);
+export const getTemplatesDetailByIds = (biz_id: string, projectId: string, ids: number[]) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/templates/list_by_ids`, { ids }).then((res) => res.data);
 
 /**
  * 添加模版到模版套餐(多个模板添加到多个套餐)
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param template_set_ids 模板套餐列表
@@ -373,6 +435,7 @@ export const getTemplatesDetailByIds = (biz_id: string, ids: number[]) =>
  */
 export const addTemplateToPackage = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_ids: number[],
   template_set_ids: number[],
@@ -381,7 +444,7 @@ export const addTemplateToPackage = (
   no_set_specified: boolean,
 ) =>
   http.post(
-    `/config/biz/${biz_id}/template_spaces/${template_space_id}/template_set/${template_set_id}/templates/add_to_template_sets`,
+    `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/template_set/${template_set_id}/templates/add_to_template_sets`,
     {
       template_set_ids,
       template_ids,
@@ -393,22 +456,22 @@ export const addTemplateToPackage = (
 /**
  * 将模版移出套餐(多个模板移出多个套餐)
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param template_set_ids 模板套餐列表
  * @param exclusion_operation 是否跨页全选
- * @param template_set_id 正在操作的套餐id，全部套餐和未指定套餐传0
- * @param no_set_specified 是否未指定套餐
  * @returns
  */
 export const moveOutTemplateFromPackage = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_ids: number[],
   template_set_ids: number[],
   exclusion_operation: boolean,
 ) =>
-  http.post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/delete_from_template_sets`, {
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/delete_from_template_sets`, {
     template_ids,
     template_set_ids,
     exclusion_operation,
@@ -417,6 +480,7 @@ export const moveOutTemplateFromPackage = (
 /**
  * 查询单个模板被套餐引用详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param params 列表查询参数
@@ -424,13 +488,14 @@ export const moveOutTemplateFromPackage = (
  */
 export const getPackagesByTemplateId = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   params: ICommonQuery,
 ) =>
   http
     .get(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/bound_template_set_details`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/bound_template_set_details`,
       { params },
     )
     .then((res) => res.data);
@@ -438,19 +503,24 @@ export const getPackagesByTemplateId = (
 /**
  * 查询多个模板被套餐引用详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_ids 模板ID
  * @param params 列表查询参数
  * @returns
  */
-export const getPackagesByTemplateIds = (biz_id: string, template_space_id: number, template_ids: number[]) => {
+export const getPackagesByTemplateIds = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: number,
+  template_ids: number[]) => {
   const params = {
     template_ids: template_ids.join(','),
     start: 0,
     all: true,
   };
   return http
-    .get(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/bound_template_set_details`, { params })
+    .get(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/bound_template_set_details`, { params })
     .then((res) => {
       const list: ITemplateCitedByPkgs[][] = [];
       template_ids.forEach((id, index) => {
@@ -464,18 +534,24 @@ export const getPackagesByTemplateIds = (biz_id: string, template_space_id: numb
 /**
  * 查询模板被引用计数
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_ids 模板ID列表
  * @returns
  */
-export const getCountsByTemplateIds = (biz_id: string, template_space_id: number, template_ids: number[]) =>
+export const getCountsByTemplateIds = (
+  biz_id: string,
+  projectId: string,
+  template_space_id: number,
+  template_ids: number[]) =>
   http
-    .post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/bound_counts`, { template_ids })
+    .post(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/bound_counts`, { template_ids })
     .then((res) => res.data);
 
 /**
  * 查询模板被未命名版本服务引用详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param params 列表查询参数
@@ -483,13 +559,14 @@ export const getCountsByTemplateIds = (biz_id: string, template_space_id: number
  */
 export const getUnNamedVersionAppsBoundByTemplate = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   params: ICommonQuery,
 ) =>
   http
     .get(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/bound_unnamed_app_details`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/bound_unnamed_app_details`,
       { params },
     )
     .then((res) => res.data);
@@ -497,6 +574,7 @@ export const getUnNamedVersionAppsBoundByTemplate = (
 /**
  * 创建模板版本
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param params 模板配置参数
@@ -504,13 +582,14 @@ export const getUnNamedVersionAppsBoundByTemplate = (
  */
 export const createTemplateVersion = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   params: ITemplateVersionEditingData,
 ) =>
   http
     .post(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions`,
       params,
     )
     .then((res) => res.data);
@@ -518,6 +597,7 @@ export const createTemplateVersion = (
 /**
  * 获取模板版本列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param params 查询参数
@@ -525,13 +605,14 @@ export const createTemplateVersion = (
  */
 export const getTemplateVersionList = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   params: ICommonQuery,
 ) =>
   http
     .post(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions/list`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions/list`,
       params,
     )
     .then((res) => res.data);
@@ -539,15 +620,17 @@ export const getTemplateVersionList = (
 /**
  * 根据模板版本id列表查询对应模板版本详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param ids 模板版本ID列表
  * @returns
  */
-export const getTemplateVersionsDetailByIds = (biz_id: string, ids: number[]) =>
-  http.post(`/config/biz/${biz_id}/template_revisions/list_by_ids`, { ids }).then((res) => res.data);
+export const getTemplateVersionsDetailByIds = (biz_id: string, projectId: string, ids: number[]) =>
+  http.post(`/config/biz/${biz_id}/projects/${projectId}/template_revisions/list_by_ids`, { ids }).then((res) => res.data);
 
 /**
  *
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param app_id 应用ID
  * @param release_id 应用版本ID
  * @param template_revision_id 模板版本ID
@@ -555,12 +638,13 @@ export const getTemplateVersionsDetailByIds = (biz_id: string, ids: number[]) =>
  */
 export const getTemplateVersionDetail = (
   biz_id: string,
+  projectId: string,
   app_id: number,
   release_id: number,
   template_revision_id: number,
 ) =>
   http
-    .get(`/config/biz/${biz_id}/apps/${app_id}/releases/${release_id}/template_revisions/${template_revision_id}`)
+    .get(`/config/biz/${biz_id}/projects/${projectId}/apps/${app_id}/releases/${release_id}/template_revisions/${template_revision_id}`)
     .then((res) => res.data);
 
 /**
@@ -584,6 +668,7 @@ export const deleteTemplateVersion = (
 /**
  * 查询模板版本被引用计数
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param ids 版本ID列表
@@ -591,13 +676,14 @@ export const deleteTemplateVersion = (
  */
 export const getCountsByTemplateVersionIds = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   ids: number[],
 ) =>
   http
     .post(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions/bound_counts`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions/bound_counts`,
       { template_revision_ids: ids },
     )
     .then((res) => res.data);
@@ -605,6 +691,7 @@ export const getCountsByTemplateVersionIds = (
 /**
  * 获取模板版本被未命名版本服务引用详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param template_revision_id 版本ID
@@ -612,6 +699,7 @@ export const getCountsByTemplateVersionIds = (
  */
 export const getUnNamedVersionAppsBoundByTemplateVersion = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   template_revision_id: number,
@@ -619,7 +707,7 @@ export const getUnNamedVersionAppsBoundByTemplateVersion = (
 ) =>
   http
     .get(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions/${template_revision_id}/bound_unnamed_app_details`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions/${template_revision_id}/bound_unnamed_app_details`,
       { params },
     )
     .then((res) => res.data);
@@ -627,19 +715,21 @@ export const getUnNamedVersionAppsBoundByTemplateVersion = (
 /**
  * 获取模板latest版本被未命名版本服务引用详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @returns
  */
 export const getUnNamedVersionAppsBoundByLatestTemplateVersion = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   params: ICommonQuery,
 ) =>
   http
     .get(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/latest/bound_unnamed_app_details`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/latest/bound_unnamed_app_details`,
       { params },
     )
     .then((res) => res.data);
@@ -647,6 +737,7 @@ export const getUnNamedVersionAppsBoundByLatestTemplateVersion = (
 /**
  * 获取模板版被已生成版本服务引用详情
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param template_revision_id 版本ID
@@ -654,6 +745,7 @@ export const getUnNamedVersionAppsBoundByLatestTemplateVersion = (
  */
 export const getAppsVersionBoundByTemplateVersion = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   template_revision_id: number,
@@ -661,7 +753,7 @@ export const getAppsVersionBoundByTemplateVersion = (
 ) =>
   http
     .get(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions/${template_revision_id}/bound_named_app_details`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions/${template_revision_id}/bound_named_app_details`,
       { params },
     )
     .then((res) => res.data);
@@ -669,32 +761,37 @@ export const getAppsVersionBoundByTemplateVersion = (
 /**
  * 查询模板套餐和服务的绑定关系
  * @param biz_id 业务ID
+ * @param projectId 项目ID
+ * @param envId 环境ID
  * @param app_id 应用ID
  * @returns
  */
-export const getAppPkgBindingRelations = (biz_id: string, app_id: number) =>
-  http.get(`/config/biz/${biz_id}/apps/${app_id}/template_bindings`).then((res) => res.data);
+export const getAppPkgBindingRelations = (biz_id: string, projectId: string, envId: string, app_id: number) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/envs/${envId}/apps/${app_id}/template_bindings`).then((res) => res.data);
 
 /**
  * 批量查询模板的版本名称
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_ids 模板ID列表
  * @returns
  */
-export const getTemplateVersionsNameByIds = (biz_id: string, template_ids: number[]) =>
+export const getTemplateVersionsNameByIds = (biz_id: string, projectId: string, template_ids: number[]) =>
   http
-    .post(`/config/biz/${biz_id}/template_revisions/list_names_by_template_ids`, { template_ids })
+    .post(`/config/biz/${biz_id}/projects/${projectId}/template_revisions/list_names_by_template_ids`, { template_ids })
     .then((res) => res.data);
 
 /**
  * 导入配置文件压缩包
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间id
- * @param fill 导入文件
+ * @param file 导入文件
  * @returns
  */
 export const importTemplateFile = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   file: any,
   isDecompression: boolean,
@@ -702,7 +799,7 @@ export const importTemplateFile = (
 ) =>
   http
     .post(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/import/${encodeURIComponent(file.name)}`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/import/${encodeURIComponent(file.name)}`,
       file,
       {
         headers: {
@@ -719,18 +816,20 @@ export const importTemplateFile = (
 /**
  * 模板批量新增
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间id
  * @param configData 配置列表
  * @returns
  */
 export const importTemplateBatchAdd = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   configData: any,
   template_set_ids: number[],
 ) =>
   http
-    .post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/batch_upsert_templates`, {
+    .post(`/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/batch_upsert_templates`, {
       items: configData,
       template_set_ids,
     })
@@ -739,32 +838,34 @@ export const importTemplateBatchAdd = (
 /**
  * 批量修改模板权限
  * @param biz_id 业务ID
- * @param template_space_id 空间id
- * @param configData 配置列表
+ * @param projectId 项目ID
+ * @param query 配置列表
  * @param exclusion_operation // 是否跨页
  * @param template_set_id // 正在操作的套餐id，全部套餐和未指定传0
  * @param no_set_specified // 是否未指定套餐
  * @returns
  */
-export const batchEditTemplatePermission = (biz_id: string, query: any) =>
+export const batchEditTemplatePermission = (biz_id: string, projectId: string, query: any) =>
   http.post(
-    `/config/biz/${biz_id}/template_spaces/${query.template_space_id}/template_set/${query.template_set_id}/templates/batch_update_templates_permissions`,
+    `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${query.template_space_id}/template_set/${query.template_set_id}/templates/batch_update_templates_permissions`,
     query,
   );
 
 /**
  * 获取配置模板配置项元信息
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_id 模板id
  * @param revision_name 版本名称
  * @returns
  */
-export const getTemplateConfigMeta = (biz_id: string, template_id: number, revision_name?: string) =>
-  http.get(`/config/biz/${biz_id}/templates/${template_id}/template_revisions`, { params: { revision_name } });
+export const getTemplateConfigMeta = (biz_id: string, projectId: string, template_id: number, revision_name?: string) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/templates/${template_id}/template_revisions`, { params: { revision_name } });
 
 /**
  * 编辑模板配置文件
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param params 模板配置参数
@@ -772,13 +873,14 @@ export const getTemplateConfigMeta = (biz_id: string, template_id: number, revis
  */
 export const updateTemplateConfig = (
   biz_id: string,
+  projectId: string,
   template_space_id: number,
   template_id: number,
   params: ITemplateVersionEditingData,
 ) =>
   http
     .put(
-      `/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions`,
+      `/config/biz/${biz_id}/projects/${projectId}/template_spaces/${template_space_id}/templates/${template_id}/template_revisions`,
       params,
     )
     .then((res) => res.data);
@@ -786,8 +888,9 @@ export const updateTemplateConfig = (
 /**
  * 根据模板套餐获取模板版本列表
  * @param biz_id 业务ID
+ * @param projectId 项目ID
  * @param template_id 模板ID
  * @returns
  */
-export const getTemplateRevisionsFromPkgId = (biz_id: string, pkgId: number) =>
-  http.get(`/config/biz/${biz_id}/template_sets/${pkgId}/template_revisions`).then((res) => res.data);
+export const getTemplateRevisionsFromPkgId = (biz_id: string, projectId: string, pkgId: number) =>
+  http.get(`/config/biz/${biz_id}/projects/${projectId}/template_sets/${pkgId}/template_revisions`).then((res) => res.data);
diff --git a/ui/src/api/variable.ts b/ui/src/api/variable.ts
index 33be8db23..f12c2fd02 100644
--- a/ui/src/api/variable.ts
+++ b/ui/src/api/variable.ts
@@ -5,156 +5,212 @@ import { IVariableEditParams, IVariableImportParams } from '../../types/variable
 /**
  * 查询变量列表
  * @param biz_id 业务ID
+ * @param project_id 项目ID
  * @param params
  * @returns
  */
-export const getVariableList = (biz_id: string, params: ICommonQuery) =>
-  http.post(`/config/biz/${biz_id}/template_variables/list`, params).then((res) => res.data);
+export const getVariableList = (biz_id: string, project_id: string, params: ICommonQuery) =>
+  http.post(`/config/biz/${biz_id}/projects/${project_id}/template_variables:list`, params).then((res) => res.data);
 
 /**
  * 创建变量
  * @param biz_id 业务ID
+ * @param project_id 项目ID
  * @param params 创建参数
  * @returns
  */
-export const createVariable = (biz_id: string, params: IVariableEditParams) =>
-  http.post(`/config/biz/${biz_id}/template_variables`, params);
+export const createVariable = (biz_id: string, project_id: string, params: IVariableEditParams) =>
+  http.post(`/config/biz/${biz_id}/projects/${project_id}/template_variables`, params);
 
 /**
  * 编辑变量
  * @param biz_id 业务ID
+ * @param project_id 项目ID
  * @param template_variable_id 变量ID
  * @param params 编辑参数
  * @returns
  */
 export const updateVariable = (
   biz_id: string,
+  project_id: string,
   template_variable_id: number,
   params: { default_val: string; memo: string },
-) => http.put(`/config/biz/${biz_id}/template_variables/${template_variable_id}`, params);
+) => http.put(`/config/biz/${biz_id}/projects/${project_id}/template_variables/${template_variable_id}`, params);
 
 /**
  * 删除变量
  * @param biz_id 业务ID
+ * @param project_id 项目ID
  * @param template_variable_id 变量ID
  * @returns
  */
-export const deleteVariable = (biz_id: string, template_variable_id: number) =>
-  http.delete(`/config/biz/${biz_id}/template_variables/${template_variable_id}`);
+export const deleteVariable = (biz_id: string, project_id: string, template_variable_id: number) =>
+  http.delete(`/config/biz/${biz_id}/projects/${project_id}/template_variables/${template_variable_id}`);
 
 /**
  * 批量删除变量
  * @param bizId 业务ID
+ * @param project_id 项目ID
  * @param ids 变量ID列表
  * @param exclusion_operation 是否跨页
  */
-export const batchDeleteVariable = (biz_id: string, ids: number[], exclusion_operation: boolean) =>
-  http.post(`/config/biz/${biz_id}/template_variables/batch_delete`, { ids, exclusion_operation });
+export const batchDeleteVariable = (biz_id: string, project_id: string, ids: number[], exclusion_operation: boolean) =>
+  http.post(`/config/biz/${biz_id}/projects/${project_id}/template_variables:batch_delete`, { ids, exclusion_operation });
 
 /**
  * 获取未命名版本服务变量列表
  * @param biz_id 业务ID
+ * @param project_id 项目ID
+ * @param env_id 环境ID
  * @param app_id 应用ID
  * @returns
  */
-export const getUnReleasedAppVariables = (biz_id: string, app_id: number) =>
-  http.get(`/config/biz/${biz_id}/apps/${app_id}/template_variables`).then((res) => res.data);
+export const getUnReleasedAppVariables = (biz_id: string, project_id: string, env_id: string, app_id: number) =>
+  http.get(`/config/biz/${biz_id}/projects/${project_id}/envs/${env_id}/apps/${app_id}/template_variables`).then((res) => res.data);
 
 /**
  * 更新未命名版本服务变量列表
  * @param biz_id 业务ID
+ * @param project_id 项目ID
+ * @param env_id 环境ID
  * @param app_id 应用ID
  * @returns
  */
-export const updateUnReleasedAppVariables = (biz_id: string, app_id: number, variables: IVariableEditParams[]) =>
-  http.put(`/config/biz/${biz_id}/apps/${app_id}/template_variables`, { variables }).then((res) => res.data);
+export const updateUnReleasedAppVariables = (
+  biz_id: string,
+  project_id: string,
+  env_id: string,
+  app_id: number,
+  variables: IVariableEditParams[]
+) =>
+  http.put(`/config/biz/${biz_id}/projects/${project_id}/envs/${env_id}/apps/${app_id}/template_variables`, { variables }).then((res) => res.data);
 
 /**
  * 获取服务某个版本的变量列表
  * @param biz_id 业务ID
+ * @param project_id 项目ID
+ * @param env_id 环境ID
  * @param app_id 应用ID
  * @param release_id 服务版本ID
  * @returns
  */
-export const getReleasedAppVariables = (biz_id: string, app_id: number, release_id: number) =>
+export const getReleasedAppVariables = (
+  biz_id: string,
+  project_id: string,
+  env_id: string,
+  app_id: number,
+  release_id: number) =>
   http
-    .get(`/config/biz/${biz_id}/apps/${app_id}/releases/${release_id}/template_variables`, { params: {} })
+    .get(`/config/biz/${biz_id}/projects/${project_id}/envs/${env_id}/apps/${app_id}/releases/${release_id}/template_variables`, { params: {} })
     .then((res) => res.data);
 
 /**
  * 查询未命名版本服务中变量被配置文件引用详情
  * @param biz_id 业务ID
+ * @param project_id 项目ID
+ * @param env_id 环境ID
  * @param app_id 应用ID
  * @returns
  */
-export const getUnReleasedAppVariablesCitedDetail = (biz_id: string, app_id: number) =>
-  http.get(`/config/biz/${biz_id}/apps/${app_id}/template_variables_references`).then((res) => res.data);
+export const getUnReleasedAppVariablesCitedDetail = (
+  biz_id: string,
+  project_id: string,
+  env_id: string,
+  app_id: number) =>
+  http.get(`/config/biz/${biz_id}/projects/${project_id}/envs/${env_id}/apps/${app_id}/template_variables_references`).then((res) => res.data);
 
 /**
  * 查询服务某个版本的变量被配置文件引用详情
  * @param biz_id 业务ID
+ * @param project_id 项目ID
+ * @param env_id 环境ID
  * @param app_id 应用ID
  * @param release_id 服务版本ID
  * @returns
  */
-export const getReleasedAppVariablesCitedDetail = (biz_id: string, app_id: number, release_id: number) =>
+export const getReleasedAppVariablesCitedDetail = (
+  biz_id: string,
+  project_id: string,
+  env_id: string,
+  app_id: number,
+  release_id: number) =>
   http
-    .get(`/config/biz/${biz_id}/apps/${app_id}/releases/${release_id}/template_variables_references`)
+    .get(`/config/biz/${biz_id}/projects/${project_id}/envs/${env_id}/apps/${app_id}/releases/${release_id}/template_variables_references`)
     .then((res) => res.data);
 
 /**
  * 批量导入变量文本
  * @param biz_id 业务ID
- * @param release_id 服务版本ID
+ * @param project_id 项目ID
+ * @param params 导入参数
  * @returns
  */
-export const importVariablesText = (biz_id: string, params: IVariableImportParams) =>
-  http.post(`config/biz/${biz_id}/template_variables/import`, params);
+export const importVariablesText = (biz_id: string, project_id: string, params: IVariableImportParams) =>
+  http.post(`config/biz/${biz_id}/projects/${project_id}/template_variables:import`, params);
 
 /**
  * 批量导入JSON
  * @param biz_id 业务ID
- * @param release_id 服务版本ID
+ * @param project_id 项目ID
+ * @param content JSON内容
  * @returns
  */
-export const importVariablesJSON = (biz_id: string, content: string) =>
-  http.post(`config/biz/${biz_id}/template_variables/json/import`, { data: content });
+export const importVariablesJSON = (biz_id: string, project_id: string, content: string) =>
+  http.post(`config/biz/${biz_id}/projects/${project_id}/template_variables:import/json`, { data: content });
 
 /**
  * 批量导入YAML
  * @param biz_id 业务ID
- * @param release_id 服务版本ID
+ * @param project_id 项目ID
+ * @param content YAML内容
  * @returns
  */
-export const importVariablesYaml = (biz_id: string, content: string) =>
-  http.post(`config/biz/${biz_id}/template_variables/yaml/import`, { data: content });
+export const importVariablesYaml = (biz_id: string, project_id: string, content: string) =>
+  http.post(`config/biz/${biz_id}/projects/${project_id}/template_variables:import/yaml`, { data: content });
 
 /**
  * 导出变量
  * @param biz_id 业务ID
+ * @param project_id 项目ID
  * @param type 导出格式
  * @returns
  */
-export const exportVariables = (biz_id: string, type: string) =>
-  http.get(`config/biz/${biz_id}/variables/export?format=${type}`);
+export const exportVariables = (biz_id: string, project_id: string, type: string) =>
+  http.get(`config/biz/${biz_id}/projects/${project_id}/variables/export?format=${type}`);
 
 /**
  * 导出未命名版本变量
  * @param bizId 业务ID
+ * @param project_id 项目ID
+ * @param env_id 环境ID
  * @param appId 应用ID
  * @param format 导出格式
  * @returns
  */
-export const exportUnReleasedVariables = (bizId: string, appId: number, format: string) =>
-  http.get(`config/biz/${bizId}/apps/${appId}/variables/export`, { params: { format } });
+export const exportUnReleasedVariables = (
+  bizId: string,
+  project_id: string,
+  env_id: string,
+  appId: number,
+  format: string) =>
+  http.get(`config/biz/${bizId}/projects/${project_id}/envs/${env_id}/apps/${appId}/variables/export`, { params: { format } });
 
 /**
  * 导出已发布版本变量
  * @param bizId 业务ID
+ * @param project_id 项目ID
+ * @param env_id 环境ID
  * @param appId 应用ID
  * @param release_id 服务版本ID
  * @param format 导出格式
  * @returns
  */
-export const exportReleasedVaribles = (bizId: string, appId: number, release_id: number, format: string) =>
-  http.get(`config/biz/${bizId}/apps/${appId}/releases/${release_id}/variables/export`, { params: { format } });
+export const exportReleasedVaribles = (
+  bizId: string,
+  project_id: string,
+  env_id: string,
+  appId: number,
+  release_id: number,
+  format: string
+) =>
+  http.get(`config/biz/${bizId}/projects/${project_id}/envs/${env_id}/apps/${appId}/releases/${release_id}/variables/export`, { params: { format } });
diff --git a/ui/src/components/biz-project-selector.vue b/ui/src/components/biz-project-selector.vue
index 1fb0e41be..657a3812b 100644
--- a/ui/src/components/biz-project-selector.vue
+++ b/ui/src/components/biz-project-selector.vue
@@ -117,9 +117,8 @@
   import useTemplateStore from '../store/template';
   import useGlobalStore from '../store/global';
   import { ISpaceDetail } from '../../types/index';
-  import { getProjectList } from '../api/project';
   import type { IProjectItem } from '../../types/project';
-  import { hasProjectConcept, saveSpaceToProjectId } from '../utils/project';
+  import { hasProjectConcept, getCachedProjectList } from '../utils/project';
 
   const { t } = useI18n();
   const route = useRoute();
@@ -159,17 +158,11 @@
   // 当前正在加载项目列表的业务ID
   const projectLoading = ref(false);
 
-  // 获取指定业务的项目列表（公共方法，消除重复逻辑）
+  // 获取指定业务的项目列表（走模块级共享缓存，避免重复请求）
   const fetchProjectList = async (bizId: string) => {
-    // 如果已缓存且不为空，直接返回缓存数据
-    if (bizProjectsMap.value[bizId]?.length > 0) {
-      return bizProjectsMap.value[bizId];
-    }
-
     projectLoading.value = true;
     try {
-      const res = await getProjectList(bizId, { all: true });
-      const projects = res.data?.projects || [];
+      const projects = await getCachedProjectList(bizId);
       // 使用 Vue 3 的响应式 API 正确更新
       bizProjectsMap.value = {
         ...bizProjectsMap.value,
@@ -361,9 +354,6 @@
     selectedProjectId.value = strProjectId;
     tempSelectedBizId.value = '';
 
-    // 保存 spaceId 到 projectId 的映射
-    saveSpaceToProjectId(selectedBizId.value, strProjectId);
-
     const bizItem = optionList.value.find((b) => String(b.space_id) === selectedBizId.value);
     if (bizItem) {
       // 跳转到当前模块，并带上 projectId 参数
diff --git a/ui/src/components/code-editor/index.vue b/ui/src/components/code-editor/index.vue
index f6d6c4bd4..43fbd6a84 100644
--- a/ui/src/components/code-editor/index.vue
+++ b/ui/src/components/code-editor/index.vue
@@ -72,6 +72,7 @@
       alwaysConsumeMouseWheel?: boolean;
       contextmenu?: boolean;
       fileEditor?: boolean;
+      envId?: string
     }>(),
     {
       variables: () => [],
@@ -88,6 +89,7 @@
       alwaysConsumeMouseWheel: true,
       contextmenu: true,
       fileEditor: true,
+      envId: '0'
     },
   );
 
@@ -100,6 +102,7 @@
   const localVal = ref(props.modelValue);
   const route = useRoute();
   const bkBizId = ref(String(route.params.spaceId));
+  const projectId = ref(String(route.params.projectId || ''));
   const appId = ref(Number(route.params.appId));
   const variableNameList = ref<string[]>(['']);
   const privateVariableNameList = ref<string[]>(['']);
@@ -265,10 +268,14 @@
 
   // 获取全局变量和私有变量列表
   const handleVariableList = async () => {
-    const variableList = await getVariableList(bkBizId.value, { start: 0, limit: 1000 });
+    const variableList = await getVariableList(bkBizId.value, projectId.value, { start: 0, limit: 1000 });
     variableNameList.value = variableList.details.map((item: any) => ` .${item.spec.name} `);
     if (appId.value) {
-      const privateVariableList = await getUnReleasedAppVariables(bkBizId.value, appId.value);
+      const privateVariableList = await getUnReleasedAppVariables(
+        bkBizId.value,
+        projectId.value,
+        props.envId,
+        appId.value);
       privateVariableNameList.value = privateVariableList.details.map((item: any) => ` .${item.name} `);
       variableNameList.value!.filter((item) => !privateVariableNameList.value!.includes(item));
     }
diff --git a/ui/src/components/env-alert-bar.vue b/ui/src/components/env-alert-bar.vue
new file mode 100644
index 000000000..61355ba71
--- /dev/null
+++ b/ui/src/components/env-alert-bar.vue
@@ -0,0 +1,150 @@
+<template>
+  <div
+    :class="`env-alert-bar env-alert-bar--${envType}`"
+    :style="{
+      backgroundColor: ENV_TYPE_CONFIG[envType]?.bgColor || '#F5F7FA',
+    }">
+    <div
+      class="env-tag"
+      :style="{
+        backgroundColor: ENV_TYPE_CONFIG[envType]?.bgColor || '#F5F7FA',
+        color: ENV_TYPE_CONFIG[envType]?.textColor || '#63656E',
+      }">
+      <i
+       :class="`bk-bscp-icon ${ENV_TYPE_CONFIG[envType].iconClass} env-icon`"
+       :style="{ color: ENV_TYPE_CONFIG[envType]?.iconColor || '#979BA5' }"></i>
+      <span class="env-name">{{ envName }}</span>
+    </div>
+    <div class="env-message">{{ ENV_TYPE_CONFIG[envType].tip }}</div>
+    <env-selector
+      class="env-alert-switch"
+      :model-value="modelValue"
+      @change="handleChange">
+      <template #trigger>
+        <bk-button class="env-switch-btn" size="small">
+          <Transfer class="switch-icon"/>
+          {{ t('切换环境') }}
+        </bk-button>
+      </template>
+    </env-selector>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import EnvSelector from './env-selector.vue';
+  import { EnvType, IEnvItem } from '../../types/env';
+  import { ENV_TYPE_CONFIG } from '../constants/env';
+  import { Transfer } from 'bkui-vue/lib/icon';
+
+  const { t } = useI18n();
+
+  withDefaults(
+    defineProps<{
+      modelValue?: string;
+    }>(),
+    {
+      modelValue: '',
+    },
+  );
+
+  // eslint-disable-next-line func-call-spacing
+  const emit = defineEmits<{
+    (e: 'change', env: IEnvItem, isManual?: boolean): void;
+  }>();
+
+  const envType = ref(EnvType.PRODUCTION);
+  const envName = ref('');
+  const handleChange = (env: IEnvItem, isManual?: boolean) => {
+    envType.value = env.spec.type;
+    envName.value = env.spec.name || '';
+    emit('change', env, isManual);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .env-alert-bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 36px;
+    padding: 6px 0;
+    box-sizing: border-box;
+    border-bottom: 2px solid transparent;
+    color: #313238;
+
+    .env-tag {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 24px;
+      .env-icon {
+        font-size: 20px;
+        margin-right: 6px;
+      }
+      .env-name {
+        font-weight: 700;
+      }
+    }
+
+    .env-message {
+      min-width: 432px;
+      margin-right: 31px;
+      font-size: 12px;
+      font-weight: 400;
+    }
+
+    .env-switch-btn {
+      font-size: 12px;
+      font-weight: 400;
+      padding: 0 6px;
+      background: transparent;
+      .switch-icon {
+        font-size: 16px;
+        margin-right: 4px;
+      }
+    }
+
+    &--prod {
+      border-image:
+      linear-gradient(90deg, #FFF0F0 0%, #FFF0F0 20%, #EA3636 40%, #EA3636 60%, #FFF0F0 80%, #FFF0F0 100%) 1;
+      .env-switch-btn {
+        color: #E71818;
+        border-color: #FF5656;
+        .switch-icon {
+            color: #EA3636;
+        }
+      }
+    }
+    &--staging {
+      border-image:
+      linear-gradient(90deg, #FDF4E8 0%, #FDF4E8 20%, #F59500 40%, #F59500 60%, #FDF4E8 80%, #FDF4E8 100%) 1;
+      .env-switch-btn {
+        color: #CC8800;
+        border-color: #F8B64F;
+      }
+    }
+    &--test {
+      border-image:
+       linear-gradient(90deg, #F0F5FF 0%, #F0F5FF 20%, #699DF4 40%, #699DF4 60%, #F0F5FF 80%, #F0F5FF 100%) 1;
+      .env-switch-btn {
+        color: #3a84ff;
+        border-color: #699DF4;
+        .switch-icon {
+            color: #699DF4;
+        }
+      }
+    }
+    &--dev {
+      border-image:
+      linear-gradient(90deg, #E8F5E8 0%, #E8F5E8 20%, #2DCB56 40%, #2DCB56 60%, #E8F5E8 80%, #E8F5E8 100%) 1;
+      .env-switch-btn {
+        color: #299E56;
+        border-color: #65C389;
+        .switch-icon {
+            color: #2CAF5E;
+        }
+      }
+    }
+  }
+</style>
diff --git a/ui/src/components/env-selector.vue b/ui/src/components/env-selector.vue
new file mode 100644
index 000000000..22a075ffe
--- /dev/null
+++ b/ui/src/components/env-selector.vue
@@ -0,0 +1,393 @@
+<template>
+  <bk-select
+    v-model="selectedEnvId"
+    :popover-options="{ extCls: 'env-selector-popover', offset }"
+    :clearable="false"
+    :filterable="true"
+    search-placeholder="搜索环境名称"
+    :input-search="false"
+    :disabled="props.disabled"
+    :popover-min-width="240"
+    @change="(value: string) => handleChange(value)"
+    @toggle="handleToggle">
+    <!-- 自定义触发器：useDefaultTrigger 为 true 或传入了 #trigger 插槽时使用 -->
+    <template v-if="useDefaultTrigger || hasTriggerSlot" #trigger>
+      <slot
+        name="trigger"
+        :select-info="selectedEnvInfo"
+        :is-open="isOpen">
+        <!-- 默认触发器样式 -->
+        <div class="env-select-trigger">
+          <div v-if="selectedEnvInfo" class="env-display">
+            <i
+              :class="`
+                bk-bscp-icon ${ENV_TYPE_CONFIG[selectedEnvInfo.group.type].iconClass} env-icon
+              `"
+              :style="{ color: ENV_TYPE_CONFIG[selectedEnvInfo.group.type]?.iconColor || '#979BA5' }">
+            </i>
+            <span>{{ selectedEnvInfo.env?.spec?.name || '' }}</span>
+          </div>
+          <div v-else class="placeholder-cls">{{ props.placeholder }}</div>
+          <AngleDown :class="['angle-down-icon', { 'icon-rotate': isOpen }]" />
+        </div>
+      </slot>
+    </template>
+    <!-- 分组环境列表 -->
+    <bk-option-group
+      v-for="group in envGroups"
+      :key="group.type"
+      :label="group.name"
+      collapsible>
+      <template #label>
+        <div class="env-group-label" @click.stop="toggleGroupCollapse(group.type)">
+          <AngleUpFill class="collapse-icon" :class="{ 'is-collapsed': collapsedGroups[group.type] }" />
+          <div
+            class="group-name"
+            :style="{
+              backgroundColor: ENV_TYPE_CONFIG[group.type]?.bgColor || '#F5F7FA',
+              color: ENV_TYPE_CONFIG[group.type]?.textColor || '#63656E',
+            }">
+            <i
+              :class="`bk-bscp-icon ${ENV_TYPE_CONFIG[group.type]?.iconClass || ''} env-icon`"
+              :style="{ color: ENV_TYPE_CONFIG[group.type]?.iconColor || '#979BA5' }"></i>
+            <span>{{ group.name }}</span>
+          </div>
+        </div>
+      </template>
+      <bk-option
+        v-for="env in group.envs"
+        v-if="!collapsedGroups[group.type]"
+        :key="env.id"
+        :id="String(env.id)"
+        :name="env.spec?.name || ''">
+      </bk-option>
+    </bk-option-group>
+    <!-- 底部操作 -->
+    <template #extension>
+      <div class="env-footer" @click="handleToEnvManage">
+        <i class="bk-bscp-icon icon-setting footer-icon"></i>
+        <span>{{ t('环境管理') }}</span>
+      </div>
+    </template>
+  </bk-select>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch, useSlots } from 'vue';
+  import { storeToRefs } from 'pinia';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import { AngleUpFill, AngleDown } from 'bkui-vue/lib/icon';
+  import { EnvType, IEnvItem, IEnvGroupItem } from '../../types/env';
+  import { ENV_TYPE_CONFIG } from '../constants/env';
+  import { getEnvList } from '../api/env';
+  import useGlobalStore from '../store/global';
+
+  const slots = useSlots();
+  const hasTriggerSlot = computed(() => !!slots.trigger);
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const globalStore = useGlobalStore();
+  const { spaceId: bizId, projectId } = storeToRefs(globalStore);
+
+  const props = withDefaults(
+    defineProps<{
+      modelValue?: string;
+      placeholder?: string;
+      disabled?: boolean;
+      offset?: number;
+      useDefaultTrigger?: boolean; // 是否使用默认触发器样式
+    }>(),
+    {
+      modelValue: '',
+      placeholder: '请选择环境',
+      disabled: false,
+      offset: 6,
+      useDefaultTrigger: false, // 默认 false，保持现有逻辑（使用 bk-select 原生触发器）
+    },
+  );
+
+  // eslint-disable-next-line func-call-spacing
+  const emits = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', env: IEnvItem, isManual?: boolean): void;
+  }>();
+
+  const selectedEnvId = ref<string>(props.modelValue);
+
+  // 每个 group 的折叠状态，默认全部展开
+  const collapsedGroups = ref<Record<EnvType, boolean>>({
+    [EnvType.PRODUCTION]: false,
+    [EnvType.STAGING]: false,
+    [EnvType.TESTING]: false,
+    [EnvType.DEVELOPMENT]: false,
+  });
+
+  const toggleGroupCollapse = (groupType: EnvType) => {
+    collapsedGroups.value[groupType] = !collapsedGroups.value[groupType];
+  };
+
+  // 环境类型名称映射
+  const getEnvTypeName = (type: EnvType): string => {
+    const nameMap: Record<EnvType, string> = {
+      [EnvType.PRODUCTION]: t('生产环境'),
+      [EnvType.STAGING]: t('预发布环境'),
+      [EnvType.TESTING]: t('测试环境'),
+      [EnvType.DEVELOPMENT]: t('开发环境'),
+    };
+    return nameMap[type] || type;
+  };
+
+  // 环境分组数据
+  const envGroups = ref<IEnvGroupItem[]>([]);
+  const isLoading = ref(false);
+
+  // 获取环境列表并分组
+  const fetchEnvGroups = async () => {
+    if (!bizId.value || !projectId.value) {
+      // 如果缺少参数，不使用内部数据，依赖外部传入的 envGroups
+      return;
+    }
+
+    isLoading.value = true;
+    try {
+      const res = await getEnvList(bizId.value, projectId.value, { all: true });
+      const data = res.data || {};
+
+      const groups: IEnvGroupItem[] = [];
+
+      // 字段名到 EnvType 的映射
+      const fieldMapping: Array<{ field: string; type: EnvType }> = [
+        { field: 'prod_environments', type: EnvType.PRODUCTION },
+        { field: 'staging_environments', type: EnvType.STAGING },
+        { field: 'test_environments', type: EnvType.TESTING },
+        { field: 'dev_environments', type: EnvType.DEVELOPMENT },
+      ];
+
+      for (const { field, type } of fieldMapping) {
+        const envList = data[field] as IEnvItem[] | undefined;
+        if (Array.isArray(envList)) {
+          groups.push({
+            type,
+            name: getEnvTypeName(type),
+            envs: envList,
+          });
+        }
+      }
+
+      envGroups.value = groups;
+
+      const firstGroup = groups.find((g) => g.envs.length > 0);
+      if (firstGroup && !selectedEnvId.value) {
+        selectedEnvId.value = String(firstGroup.envs[0].id);
+      }
+      handleChange(selectedEnvId.value, false);
+    } catch (e) {
+      console.error('获取环境列表失败', e);
+      envGroups.value = [];
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  // 监听 bizId 和 projectId 变化，重新获取环境列表
+  watch(
+    () => [bizId.value, projectId.value],
+    () => {
+      fetchEnvGroups();
+    },
+    { immediate: true },
+  );
+
+  const selectedEnvInfo = computed(() => {
+    const groups = envGroups.value;
+    let result: { env: IEnvItem; group: IEnvGroupItem } | null = null;
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const group of groups) {
+      const env = group.envs.find((e: IEnvItem) => String(e.id) === selectedEnvId.value);
+      if (env) {
+        result = { env, group };
+        break;
+      }
+    }
+
+    return result;
+  });
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      selectedEnvId.value = val;
+    }
+  );
+
+  const handleChange = (value: string, isManual = true) => {
+    emits('update:modelValue', value);
+    const info = selectedEnvInfo.value;
+    if (info) {
+      emits('change', info.env, isManual);
+    }
+  };
+
+  const handleToEnvManage = () => {
+    router.push({ name: 'env-manage' });
+  };
+
+  const isOpen = ref(false);
+  const handleToggle = (val: boolean) => {
+    isOpen.value = val;
+  };
+</script>
+
+<style lang="scss" scoped>
+  // 默认触发器样式
+  .env-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 4px 0 12px;
+    height: 32px;
+    border: 1px solid #c4c6cc;
+    border-radius: 2px;
+    background: #fff;
+    cursor: pointer;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: #979ba5;
+    }
+
+    .env-display {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      overflow: hidden;
+
+      .env-icon {
+        font-size: 20px;
+        flex-shrink: 0;
+      }
+
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 12px;
+        color: #63656e;
+      }
+    }
+
+    .placeholder-cls {
+      color: #c4c6cc;
+      font-size: 12px;
+    }
+
+    .angle-down-icon {
+      font-size: 20px;
+      color: #979ba5;
+      transition: transform 0.2s;
+      flex-shrink: 0;
+
+      &.icon-rotate {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+  .bk-select.is-focus .bk-select-trigger .env-select-trigger {
+    border-color: #3A84FF;
+    box-shadow: 0 0 3px #a3c5fd;
+  }
+  .bk-form-item.is-error .env-select-trigger {
+    border-color: #ea3636;
+    transition: all .15s;
+  }
+  .bk-select.is-disabled .bk-select-trigger .env-select-trigger {
+    cursor: not-allowed;
+    background-color: #fafbfd;
+    border-color: #dcdee5;
+  }
+</style>
+
+<style lang="scss">
+  .env-selector-popover {
+    border-radius: 4px !important;
+    box-shadow: 0 2px 4px 0 #1919290d !important;
+    .bk-select-option {
+      padding: 0 12px !important;
+    }
+    .env-option-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      .env-type-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .env-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+    .env-group-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      cursor: pointer;
+      .collapse-icon {
+        color: #979ba5;
+        transition: transform 0.2s;
+        &.is-collapsed {
+          transform: rotate(-90deg);
+        }
+      }
+      .group-name {
+        display: flex;
+        padding: 2px 6px 2px 4px;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        border-radius: 4px;
+        line-height: 20px;
+        .env-icon {
+          font-size: 20px;
+        }
+        & > span {
+          font-size: 12px;
+          font-weight: 400;
+        }
+      }
+    }
+    .bk-select-extension {
+      height: 32px !important;
+      background-color: #F5F7FA !important;
+      border-radius: 0 0 4px 4px !important;
+    }
+    .env-footer {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      color: #4D4F56;
+      font-size: 12px;
+      cursor: pointer;
+      .footer-icon {
+        font-size: 16px;
+        color: #979ba5;
+      }
+      &:hover {
+        color: #3a84ff;
+        .footer-icon {
+          color: #3a84ff;
+        }
+      }
+    }
+  }
+</style>
diff --git a/ui/src/components/head.vue b/ui/src/components/head.vue
index 32e5b008a..cb91e113f 100644
--- a/ui/src/components/head.vue
+++ b/ui/src/components/head.vue
@@ -260,14 +260,11 @@
       if (lastAccessedServiceDetail) {
         const detail = JSON.parse(lastAccessedServiceDetail);
         if (detail.spaceId === spaceId.value) {
-          const targetParams: any = { spaceId: detail.spaceId, appId: detail.appId };
-          // 如果目标路由有项目概念，添加 projectId
-          if (targetHasProjectConcept && params.projectId) {
-            targetParams.projectId = params.projectId;
-          }
+          const routeName = navId === 'service-all' && !showPermApplyPage.value ? 'service-config' : (navId as RouteRecordName);
+          const { envId, ...other } = detail;
           router.push({
-            name: navId === 'service-all' && !showPermApplyPage.value ? 'service-config' : (navId as RouteRecordName),
-            params: targetParams,
+            name: routeName,
+            params: routeName === 'service-config' ? { envId, ...other} : other,
           });
           return;
         }
diff --git a/ui/src/components/service-selector.vue b/ui/src/components/service-selector.vue
index 282d99728..29d3ceb12 100644
--- a/ui/src/components/service-selector.vue
+++ b/ui/src/components/service-selector.vue
@@ -56,10 +56,12 @@
   const { showApplyPermDialog, permissionQuery } = storeToRefs(useGlobalStore());
 
   const bizId = route.params.spaceId as string;
+  const projectId = route.params.projectId as string;
 
   const props = withDefaults(
     defineProps<{
       value?: number;
+      envId: string;
       customTrigger?: boolean;
       isRecord?: boolean;
     }>(),
@@ -118,7 +120,7 @@
         start: 0,
         all: true,
       };
-      const resp = await getAppList(bizId, query);
+      const resp = await getAppList(bizId, projectId, props.envId, query);
       serviceList.value = resp.details;
     } catch (e) {
       console.error(e);
diff --git a/ui/src/router.ts b/ui/src/router.ts
index dbab53bc3..1d6b03ea9 100644
--- a/ui/src/router.ts
+++ b/ui/src/router.ts
@@ -3,7 +3,7 @@ import useGlobalStore from './store/global';
 import { ISpaceDetail } from '../types/index';
 import { getSpaceFeatureFlag } from './api';
 import { storeToRefs } from 'pinia';
-import { hasProjectConcept, getDefaultProjectId, saveSpaceToProjectId, getSpaceToProjectId } from './utils/project';
+import { hasProjectConcept, getDefaultProjectId, getSpaceToProjectId } from './utils/project';
 
 const routes = [
   {
@@ -47,7 +47,7 @@ const routes = [
             component: () => import('./views/space/service/list/index.vue'),
           },
           {
-            path: ':appId(\\d+)',
+            path: ':appId(\\d+)/:envId',
             component: () => import('./views/space/service/detail/index.vue'),
             children: [
               {
@@ -312,7 +312,7 @@ router.afterEach(() => {
 
 router.beforeEach(async (to, _from, next) => {
   const globalStore = storeToRefs(useGlobalStore());
-  const { spaceFeatureFlags, projectId } = globalStore;
+  const { spaceFeatureFlags } = globalStore;
 
   // 页面刷新后 spaceFeatureFlags会重置，重新获取权限信息
   if (!spaceFeatureFlags.value.BIZ_VIEW) {
@@ -331,8 +331,6 @@ router.beforeEach(async (to, _from, next) => {
         // 获取默认 projectId：优先 localStorage，没有则取项目列表第一个
         const targetProjectId = await getDefaultProjectId(currentSpaceId);
         if (targetProjectId) {
-          projectId.value = targetProjectId;
-          saveSpaceToProjectId(currentSpaceId, targetProjectId);
           // 重定向到带 projectId 的路由
           const params: Record<string, string> = { ...to.params, projectId: targetProjectId };
           next({
@@ -345,10 +343,6 @@ router.beforeEach(async (to, _from, next) => {
       } catch (error) {
         console.error('获取项目列表失败', error);
       }
-    } else {
-      // projectId 已存在，同步到全局状态并保存映射
-      projectId.value = currentProjectId;
-      saveSpaceToProjectId(currentSpaceId, currentProjectId);
     }
   }
 
diff --git a/ui/src/utils/env.ts b/ui/src/utils/env.ts
new file mode 100644
index 000000000..7e421efc5
--- /dev/null
+++ b/ui/src/utils/env.ts
@@ -0,0 +1,15 @@
+import { EnvType } from '../../types/env';
+
+export const getEnvObj = (envDisplay: string): { envName: string; type: EnvType } => {
+  if (!envDisplay) {
+    return { envName: '--', type: EnvType.PRODUCTION };
+  }
+  const lastDashIndex = envDisplay.lastIndexOf('-');
+  if (lastDashIndex === -1) {
+    return { envName: envDisplay, type: EnvType.PRODUCTION };
+  }
+  return {
+    envName: envDisplay.substring(0, lastDashIndex),
+    type: envDisplay.substring(lastDashIndex + 1) as EnvType
+  };
+};
diff --git a/ui/src/utils/project.ts b/ui/src/utils/project.ts
index ecfcd7d24..c993e6b39 100644
--- a/ui/src/utils/project.ts
+++ b/ui/src/utils/project.ts
@@ -1,6 +1,28 @@
 import { getProjectList } from '../api/project';
 import type { ISpaceProject, IProjectItem } from '../../types/project';
 
+/**
+ * 模块级缓存：某空间的全部项目列表
+ */
+const projectListCache: Record<string, IProjectItem[]> = {};
+
+/**
+ * 共享数据入口：所有需要"某空间全部项目"的逻辑统一走这里
+ * 同一 spaceId 只发一次请求，后续直接复用缓存
+ * @param spaceId 空间ID
+ * @returns 项目列表
+ */
+export const getCachedProjectList = (spaceId: string): Promise<IProjectItem[]> => {
+  if (projectListCache[spaceId]?.length > 0) {
+    return Promise.resolve(projectListCache[spaceId]);
+  }
+  return getProjectList(spaceId, { all: true }).then((res) => {
+    const projects = res.data?.projects || [];
+    projectListCache[spaceId] = projects;
+    return projects;
+  });
+};
+
 /**
  * 无项目概念的模块列表
  * 这些模块不需要 projectId 参数
@@ -64,9 +86,8 @@ export const getDefaultProjectId = async (spaceId: string): Promise<string> => {
   // 1. 先从 localStorage 获取上次使用的 projectId
   const lastProjectId = getSpaceToProjectId(spaceId);
 
-  // 2. 获取项目列表
-  const res = await getProjectList(spaceId, { all: true });
-  const projects = res.data?.projects || [];
+  // 2. 获取项目列表（走共享缓存入口）
+  const projects = await getCachedProjectList(spaceId);
 
   // 3. 如果 localStorage 中有值，且存在于项目列表中，则使用它
   if (lastProjectId) {
diff --git a/ui/src/views/space/groups/batch-delete-btn.vue b/ui/src/views/space/groups/batch-delete-btn.vue
index f594d8339..4acef34fd 100644
--- a/ui/src/views/space/groups/batch-delete-btn.vue
+++ b/ui/src/views/space/groups/batch-delete-btn.vue
@@ -27,6 +27,7 @@
   const props = defineProps<{
     bkBizId: string;
     selectedIds: number[];
+    projectId?: string;
   }>();
 
   const emits = defineEmits(['deleted']);
@@ -36,7 +37,7 @@
 
   const handleBatchDeleteConfirm = async () => {
     batchDeletePending.value = true;
-    await batchDeleteGroup(props.bkBizId, props.selectedIds);
+    await batchDeleteGroup(props.bkBizId, props.projectId, props.selectedIds);
     Message({
       theme: 'success',
       message: t('批量删除分组成功'),
diff --git a/ui/src/views/space/groups/components/group-edit-form.vue b/ui/src/views/space/groups/components/group-edit-form.vue
index c071a0d7b..5dcd16dda 100644
--- a/ui/src/views/space/groups/components/group-edit-form.vue
+++ b/ui/src/views/space/groups/components/group-edit-form.vue
@@ -8,21 +8,31 @@
         <bk-radio :label="true">{{ t('公开') }}</bk-radio>
         <bk-radio :label="false">{{ t('指定服务') }}</bk-radio>
       </bk-radio-group>
-      <bk-select
-        v-if="!formData.public"
-        v-model="formData.bind_apps"
-        class="service-selector"
-        multiple
-        filterable
-        :placeholder="t('请选择服务')"
-        :input-search="false"
-        @change="change">
-        <bk-option
-          v-for="service in serviceList"
-          :key="service.id"
-          :label="service.spec.name"
-          :value="service.id"></bk-option>
-      </bk-select>
+      <div v-if="!formData.public" class="env-service-row">
+        <bk-form-item :label="t('环境')" required property="env_id" class="env-selector">
+          <env-selector
+            v-model="formData.env_id"
+            :placeholder="t('请选择环境')"
+            :use-default-trigger="true"
+            @change="handleEnvInfoChange" />
+        </bk-form-item>
+        <bk-form-item :label="t('绑定服务')" required property="bind_apps" class="service-selector">
+          <bk-select
+            v-model="formData.bind_apps"
+            multiple
+            filterable
+            :placeholder="t('请选择服务')"
+            :input-search="false"
+            :loading="serviceLoading"
+            @change="change">
+            <bk-option
+              v-for="service in serviceList"
+              :key="service.id"
+              :label="service.spec.name"
+              :value="service.id"></bk-option>
+          </bk-select>
+        </bk-form-item>
+      </div>
     </bk-form-item>
     <bk-form-item class="radio-group-form" :label="t('标签选择器')" required property="rules">
       <template #label>
@@ -44,6 +54,7 @@
           :rule="rule"
           :length="index"
           :bk-biz-id="(route.params.spaceId as string)"
+          :project-id="(route.params.projectId as string)"
           @change="handleRuleChange(index, $event)"
           @add="handleAddRule(index)"
           @delete="handleDeleteRule(index)" />
@@ -52,7 +63,7 @@
   </bk-form>
 </template>
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue';
+  import { ref } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router';
   import { cloneDeep } from 'lodash';
@@ -61,6 +72,8 @@
   import { IAppItem } from '../../../../../types/app';
   import { Info } from 'bkui-vue/lib/icon';
   import TagSelector from './tag-selector.vue';
+  import EnvSelector from '../../../../components/env-selector.vue';
+  import { IEnvItem } from '../../../../../types/env';
 
   const getDefaultRuleConfig = (): IGroupRuleItem => ({ key: '', op: 'eq', value: '' });
 
@@ -95,31 +108,29 @@
         message: t('仅允许使用中文、英文、数字、下划线、中划线，且必须以中文、英文、数字开头和结尾'),
       },
     ],
-    public: [
+    bind_apps: [
       {
-        validator: (val: boolean) => {
-          if (!val && formData.value.bind_apps.length === 0) {
+        validator: (val: number[]) => {
+          if (!formData.value.public && val.length === 0) {
             return false;
           }
           return true;
         },
-        message: t('指定服务不能为空'),
+        message: t('绑定服务不能为空'),
+        trigger: 'blur',
       },
     ],
   };
 
-  onMounted(() => {
-    getServiceList();
-  });
-
   const getServiceList = async () => {
     serviceLoading.value = true;
     try {
       const bizId = route.params.spaceId as string;
+      const projectId = route.params.projectId as string;
       const query = {
         all: true,
       };
-      const resp = await getAppList(bizId, query);
+      const resp = await getAppList(bizId, projectId, formData.value.env_id, query);
       serviceList.value = resp.details;
     } catch (e) {
       console.error(e);
@@ -128,6 +139,14 @@
     }
   };
 
+  // 环境选择变化（带环境信息）
+  const handleEnvInfoChange = (_env: IEnvItem, isManual?: boolean) => {
+    if (isManual) {
+      formData.value.bind_apps = [];
+    };
+    getServiceList();
+  };
+
   // 增加规则
   const handleAddRule = (index: number) => {
     if (formData.value.rules.length === 5) {
@@ -152,9 +171,9 @@
     emits('change', formData.value);
   };
 
-  const validate = () => {
+  const validate = async () => {
     const validate = tagSelectorRef.value.every((item: any) => item.validate());
-    return formRef.value.validate() && validate;
+    return await formRef.value.validate() && validate;
   };
 
   defineExpose({
@@ -170,9 +189,25 @@
       line-height: 1;
     }
   }
-  .service-selector {
-    margin-top: 10px;
+  .env-service-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 8px;
+    padding: 16px 16px 24px;
+    border-radius: 2px;
+    background-color: #F5F7FA;
+    :deep(.bk-form-item) {
+      margin-bottom: 0;
+    }
+    .env-selector {
+      flex: 1;
+    }
+    .service-selector {
+      width: 392px;
+    }
   }
+
   .published-version {
     line-height: 16px;
     font-size: 12px;
diff --git a/ui/src/views/space/groups/components/tag-selector.vue b/ui/src/views/space/groups/components/tag-selector.vue
index 17a8ff402..a80ab3ccf 100644
--- a/ui/src/views/space/groups/components/tag-selector.vue
+++ b/ui/src/views/space/groups/components/tag-selector.vue
@@ -104,6 +104,7 @@
     rule: IGroupRuleItem;
     length: number;
     bkBizId: string;
+    projectId?: string;
   }>();
   const emits = defineEmits(['change', 'add', 'delete']);
   const showKeyError = ref(false);
@@ -144,7 +145,7 @@
 
   const getValueList = async () => {
     try {
-      const res = await getGroupSelector(props.bkBizId, rule.value.key);
+      const res = await getGroupSelector(props.bkBizId, rule.value.key, props.projectId);
       valueList.value = res.values;
     } catch (error) {
       console.error(error);
diff --git a/ui/src/views/space/groups/create-group.vue b/ui/src/views/space/groups/create-group.vue
index 6825ce574..074f46f7b 100644
--- a/ui/src/views/space/groups/create-group.vue
+++ b/ui/src/views/space/groups/create-group.vue
@@ -29,6 +29,8 @@
   import { ref, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router';
+  import { storeToRefs } from 'pinia';
+  import useGlobalStore from '../../../store/global';
   import { IGroupEditing, ECategoryType } from '../../../../types/group';
   import { createGroup } from '../../../api/group';
   import groupEditForm from './components/group-edit-form.vue';
@@ -36,6 +38,7 @@
 
   const route = useRoute();
   const { t } = useI18n();
+  const { projectId } = storeToRefs(useGlobalStore());
 
   const props = defineProps<{
     show: boolean;
@@ -47,6 +50,7 @@
     name: '',
     public: true,
     bind_apps: [],
+    env_id: '',
     rule_logic: 'AND',
     rules: [{ key: '', op: 'eq', value: '' }],
   });
@@ -61,6 +65,7 @@
           name: '',
           public: true,
           bind_apps: [],
+          env_id: '',
           rule_logic: 'AND',
           rules: [{ key: '', op: 'eq', value: '' }],
         };
@@ -79,16 +84,16 @@
     }
     try {
       pending.value = true;
-      const { name, public: isPublic, bind_apps, rule_logic, rules } = groupData.value;
+      const { name, public: isPublic, bind_apps, env_id, rule_logic, rules } = groupData.value;
       const params = {
-        biz_id: route.params.spaceId,
         name,
         public: isPublic,
         bind_apps: isPublic ? [] : bind_apps,
+        env_id,
         mode: ECategoryType.Custom,
         selector: rule_logic === 'AND' ? { labels_and: rules } : { labels_or: rules },
       };
-      const res = await createGroup(route.params.spaceId as string, params);
+      const res = await createGroup(route.params.spaceId as string, projectId.value, params);
       Message({
         message: t('创建分组成功'),
         theme: 'success',
diff --git a/ui/src/views/space/groups/edit-group.vue b/ui/src/views/space/groups/edit-group.vue
index 6448fc0e9..32aceb2af 100644
--- a/ui/src/views/space/groups/edit-group.vue
+++ b/ui/src/views/space/groups/edit-group.vue
@@ -34,7 +34,7 @@
   import groupEditForm from './components/group-edit-form.vue';
   import Message from 'bkui-vue/lib/message';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -49,6 +49,7 @@
     name: '',
     public: true,
     bind_apps: [],
+    env_id: '',
     rule_logic: 'AND',
     rules: [{ key: '', op: '', value: '' }],
   });
@@ -65,6 +66,7 @@
           name,
           bind_apps: bind_apps.map((item) => item.id),
           public: isPublic,
+          env_id: String((props.group as any).env_id || ''),
           rule_logic: selector.labels_and ? 'AND' : 'OR',
           rules: (selector.labels_and || selector.labels_or) as IGroupRuleItem[],
         };
@@ -85,14 +87,15 @@
     }
     pending.value = true;
     try {
-      const { id, name, public: isPublic, bind_apps, rule_logic, rules } = groupData.value;
+      const { id, name, public: isPublic, bind_apps, env_id, rule_logic, rules } = groupData.value;
       const params = {
         name,
         public: isPublic,
         bind_apps: isPublic ? [] : bind_apps,
+        env_id,
         selector: rule_logic === 'AND' ? { labels_and: rules } : { labels_or: rules },
       };
-      await updateGroup(spaceId.value, id as number, params);
+      await updateGroup(spaceId.value, id as number, projectId.value, params);
       Message({
         message: t('编辑分组成功'),
         theme: 'success',
diff --git a/ui/src/views/space/groups/index.vue b/ui/src/views/space/groups/index.vue
index d3ea574ef..8d945d65e 100644
--- a/ui/src/views/space/groups/index.vue
+++ b/ui/src/views/space/groups/index.vue
@@ -10,7 +10,11 @@
           <Plus class="button-icon" />
           {{ t('新增分组') }}
         </bk-button>
-        <BatchDeleteBtn :bk-biz-id="spaceId" :selected-ids="selectedIds" @deleted="refreshAfterBatchDelete" />
+        <BatchDeleteBtn
+          :bk-biz-id="spaceId"
+          :project-id="projectId"
+          :selected-ids="selectedIds"
+          @deleted="refreshAfterBatchDelete" />
       </div>
       <div class="filter-actions">
         <bk-checkbox
@@ -186,7 +190,7 @@
   import DeleteConfirmDialog from '../../../components/delete-confirm-dialog.vue';
   import acrossCheckBox from '../../../components/across-checkbox.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t, locale } = useI18n();
   const { pagination, updatePagination } = useTablePagination('groupList');
 
@@ -241,7 +245,7 @@
     });
 
   watch(
-    () => spaceId.value,
+    [() => spaceId.value, () => projectId.value],
     async () => {
       pagination.value.current = 1;
       await loadGroupList();
@@ -259,7 +263,7 @@
     try {
       listLoading.value = true;
       topId.value = id;
-      const res = await getSpaceGroupList(spaceId.value, id);
+      const res = await getSpaceGroupList(spaceId.value, projectId.value, id);
       groupList.value = res.details;
       searchGroupList.value = res.details;
       categorizedGroupList.value = categorizingData(res.details);
@@ -401,7 +405,7 @@
   };
 
   const handleDeleteGroupConfirm = async () => {
-    await deleteGroup(spaceId.value, deleteGroupItem.value!.id);
+    await deleteGroup(spaceId.value, deleteGroupItem.value!.id, projectId.value);
     Message({
       theme: 'success',
       message: t('删除分组成功'),
diff --git a/ui/src/views/space/groups/services-to-published.vue b/ui/src/views/space/groups/services-to-published.vue
index 68c3a7691..b0840377e 100644
--- a/ui/src/views/space/groups/services-to-published.vue
+++ b/ui/src/views/space/groups/services-to-published.vue
@@ -14,6 +14,17 @@
           @page-limit-change="handlePageLimitChange"
           @page-value-change="loadServicesList">
           <bk-table-column :label="t('服务名称')" prop="app_name"></bk-table-column>
+          <bk-table-column :label="t('环境')">
+            <template #default="{ row }">
+              <i
+               :class="`
+                bk-bscp-icon ${ENV_TYPE_CONFIG?.[getEnvObj(row.env_display).type]?.iconClass} env-icon
+              `"
+               :style="{ color: ENV_TYPE_CONFIG?.[getEnvObj(row.env_display).type]?.iconColor || '#979BA5' }">
+              </i>
+              {{ getEnvObj(row.env_display).envName }}
+            </template>
+          </bk-table-column>
           <bk-table-column :label="t('服务版本')">
             <template #default="{ row }">
               <bk-link v-if="row.app_id" class="link-btn" theme="primary" target="_blank" :href="getHref(row)">{{
@@ -44,12 +55,14 @@
   import { ICommonQuery } from '../../../../types/index';
   import SearchInput from '../../../components/search-input.vue';
   import tableEmpty from '../../../components/table/table-empty.vue';
+  import { ENV_TYPE_CONFIG } from '../../../constants/env';
+  import { getEnvObj } from '../../../utils/env';
 
   const router = useRouter();
   const { t } = useI18n();
   const { pagination, updatePagination } = useTablePagination('serviceToPublish');
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
 
   const props = defineProps<{
     show: boolean;
@@ -83,7 +96,7 @@
     if (searchStr.value) {
       params.search_key = searchStr.value;
     }
-    const res = await getGroupReleasedApps(spaceId.value, props.id, params);
+    const res = await getGroupReleasedApps(spaceId.value, props.id, params, projectId.value);
     list.value = res.details;
     pagination.value.count = res.count;
     loading.value = false;
@@ -144,4 +157,8 @@
       min-width: 88px;
     }
   }
+  .env-icon {
+    font-size: 16px;
+    margin-right: 4px;
+  }
 </style>
diff --git a/ui/src/views/space/index.vue b/ui/src/views/space/index.vue
index 37000c654..3bbd41be8 100644
--- a/ui/src/views/space/index.vue
+++ b/ui/src/views/space/index.vue
@@ -13,6 +13,7 @@
   import { getSpaceFeatureFlag } from '../../api';
   import whitelistApplyPage from './whitelist-apply-page.vue';
   import applyPermPage from './apply-perm-page.vue';
+  import { saveSpaceToProjectId } from '../../utils/project';
 
   const { spaceId, projectId, spaceFeatureFlags, showPermApplyPage } = storeToRefs(useGlobalStore());
 
@@ -34,13 +35,16 @@
   watch(
     () => route.params,
     (params) => {
-      if (params.spaceId) {
-        spaceId.value = params.spaceId as string;
-        setLastAccessedSpace(params.spaceId as string);
+      const pSpaceId = params.spaceId as string;
+      const pProjectId = params.projectId as string;
+      if (pSpaceId) {
+        spaceId.value = pSpaceId;
+        setLastAccessedSpace(pSpaceId);
         getFeatureFlagsData();
       }
-      if (params.projectId) {
-        projectId.value = params.projectId as string;
+      if (pProjectId) {
+        projectId.value = pProjectId;
+        saveSpaceToProjectId(pSpaceId, pProjectId);
       }
     },
     { immediate: true },
diff --git a/ui/src/views/space/scripts/list/batch-delete-btn.vue b/ui/src/views/space/scripts/list/batch-delete-btn.vue
index ea86373bb..e60fc3fe5 100644
--- a/ui/src/views/space/scripts/list/batch-delete-btn.vue
+++ b/ui/src/views/space/scripts/list/batch-delete-btn.vue
@@ -30,6 +30,7 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
     selectedIds: number[];
     isAcrossChecked: boolean;
     dataCount: number;
@@ -42,7 +43,7 @@
 
   const handleBatchDeleteConfirm = async () => {
     batchDeletePending.value = true;
-    await batchDeleteScript(props.bkBizId, props.selectedIds, props.isAcrossChecked);
+    await batchDeleteScript(props.bkBizId, props.projectId, props.selectedIds, props.isAcrossChecked);
     Message({
       theme: 'success',
       message: t('批量删除脚本成功'),
diff --git a/ui/src/views/space/scripts/list/create-script.vue b/ui/src/views/space/scripts/list/create-script.vue
index b2f816eda..3d68df55e 100644
--- a/ui/src/views/space/scripts/list/create-script.vue
+++ b/ui/src/views/space/scripts/list/create-script.vue
@@ -74,7 +74,7 @@
   import InternalVariable from '../components/internal-variable.vue';
   import dayjs from 'dayjs';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const emits = defineEmits(['update:show', 'created']);
@@ -161,7 +161,7 @@
   // 获取标签列表
   const getTags = async () => {
     tagsLoading.value = true;
-    const res = await getScriptTagList(spaceId.value);
+    const res = await getScriptTagList(spaceId.value, projectId.value);
     tagsData.value = res.details;
     tagsLoading.value = false;
   };
@@ -175,7 +175,7 @@
       if (!formData.value.content.endsWith('\n')) {
         formData.value.content += '\n';
       }
-      const res = await createScript(spaceId.value, formData.value);
+      const res = await createScript(spaceId.value, projectId.value, formData.value);
       BkMessage({
         theme: 'success',
         message: t('脚本创建成功'),
diff --git a/ui/src/views/space/scripts/list/script-cited.vue b/ui/src/views/space/scripts/list/script-cited.vue
index 0a1336ac6..9ca328dfe 100644
--- a/ui/src/views/space/scripts/list/script-cited.vue
+++ b/ui/src/views/space/scripts/list/script-cited.vue
@@ -56,7 +56,7 @@
   import useTablePagination from '../../../../utils/hooks/use-table-pagination';
   import SearchInput from '../../../../components/search-input.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
   const router = useRouter();
 
@@ -94,9 +94,9 @@
       params.searchKey = searchStr.value;
     }
     if (props.versionId) {
-      res = await getScriptVersionCiteList(spaceId.value, props.id, props.versionId, params);
+      res = await getScriptVersionCiteList(spaceId.value, projectId.value, props.id, props.versionId, params);
     } else {
-      res = await getScriptCiteList(spaceId.value, props.id, params);
+      res = await getScriptCiteList(spaceId.value, projectId.value, props.id, params);
     }
     list.value = res.details;
     pagination.value.count = res.count;
diff --git a/ui/src/views/space/scripts/list/script-list.vue b/ui/src/views/space/scripts/list/script-list.vue
index 1018c4a98..e1225f17f 100644
--- a/ui/src/views/space/scripts/list/script-list.vue
+++ b/ui/src/views/space/scripts/list/script-list.vue
@@ -30,6 +30,7 @@
           </bk-button>
           <BatchDeleteBtn
             :bk-biz-id="spaceId"
+            :project-id="projectId"
             :selected-ids="selectedIds"
             :is-across-checked="isAcrossChecked"
             :data-count="selecTableDataCount"
@@ -243,7 +244,7 @@
   import UserName from '../../../../components/user-name.vue';
   import { debounce } from 'lodash';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const scriptStore = useScriptStore();
   const { versionListPageShouldOpenEdit, versionListPageShouldOpenView } = storeToRefs(scriptStore);
   const router = useRouter();
@@ -351,7 +352,7 @@
       topIds.value = undefined;
     }
 
-    const res = await getScriptList(spaceId.value, params);
+    const res = await getScriptList(spaceId.value, projectId.value, params);
     scriptsData.value = res.details;
     scriptsData.value.forEach((item) => {
       item.hook.spec.type = item.hook.spec.type.charAt(0).toUpperCase() + item.hook.spec.type.slice(1);
@@ -364,14 +365,14 @@
   // 获取标签列表
   const getTags = async () => {
     tagsLoading.value = true;
-    const res = await getScriptTagList(spaceId.value);
+    const res = await getScriptTagList(spaceId.value, projectId.value);
     tagsData.value = res.details;
     tagsLoading.value = false;
   };
 
   // 编辑脚本标签、描述
   const editScript = async (id: number, params: { memo: string; tags: string[] }) => {
-    await updateScript(spaceId.value, id, params);
+    await updateScript(spaceId.value, projectId.value, id, params);
     Message({
       theme: 'success',
       message: t('脚本更新成功'),
@@ -462,7 +463,7 @@
       start: (pagination.value.current - 1) * pagination.value.limit,
       limit: pagination.value.limit,
     };
-    const res = await getScriptCiteList(spaceId.value, script.hook.id, params);
+    const res = await getScriptCiteList(spaceId.value, projectId.value, script.hook.id, params);
     const allAppInfo = res.details.map((item: any) => {
       const { app_id, app_name } = item;
       return {
@@ -483,7 +484,7 @@
   };
 
   const handleDeleteScriptConfirm = async () => {
-    await deleteScript(spaceId.value, deleteScriptItem.value!.hook.id);
+    await deleteScript(spaceId.value, projectId.value, deleteScriptItem.value!.hook.id);
     if (scriptsData.value.length === 1 && pagination.value.current > 1) {
       pagination.value.current = pagination.value.current - 1;
     }
diff --git a/ui/src/views/space/scripts/version-manage/create-version.vue b/ui/src/views/space/scripts/version-manage/create-version.vue
index 991aa218e..30f9ebabe 100644
--- a/ui/src/views/space/scripts/version-manage/create-version.vue
+++ b/ui/src/views/space/scripts/version-manage/create-version.vue
@@ -62,7 +62,7 @@
   import { IScriptVersionListItem, IScriptMapItem } from '../../../../../types/script';
   import { getScriptVersionList } from '../../../../api/script';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = withDefaults(
@@ -89,7 +89,7 @@
     if (val) {
       selectedScript.value = '';
       listLoading.value = true;
-      const res = await getScriptVersionList(spaceId.value, props.scriptId, { start: 0, all: true });
+      const res = await getScriptVersionList(spaceId.value, projectId.value, props.scriptId, { start: 0, all: true });
       list.value = res.details.map((item: IScriptVersionListItem) => {
         const { id, spec } = item.hook_revision;
         const name = spec.memo ? `${spec.name}(${spec.memo})` : spec.name;
diff --git a/ui/src/views/space/scripts/version-manage/index.vue b/ui/src/views/space/scripts/version-manage/index.vue
index 6aa1ef3de..e3dfff867 100644
--- a/ui/src/views/space/scripts/version-manage/index.vue
+++ b/ui/src/views/space/scripts/version-manage/index.vue
@@ -106,6 +106,7 @@
     :type="scriptDetail.spec.type"
     :crt-version="crtVersion as IScriptVersion"
     :space-id="spaceId"
+    :project-id="projectId"
     :script-id="scriptId" />
   <DeleteConfirmDialog
     v-model:is-show="isDeleteScriptVersionDialogShow"
@@ -149,7 +150,7 @@
   import DeleteConfirmDialog from '../../../../components/delete-confirm-dialog.vue';
   import SearchSelector from '../../../../components/search-selector.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { versionListPageShouldOpenEdit, versionListPageShouldOpenView } = storeToRefs(useScriptStore());
   const router = useRouter();
   const route = useRoute();
@@ -201,6 +202,7 @@
     if (scriptDetail.value.not_release_id) {
       unPublishVersion.value = await getScriptVersionDetail(
         spaceId.value,
+        projectId.value,
         scriptId.value,
         scriptDetail.value.not_release_id,
       );
@@ -223,7 +225,7 @@
   // 获取脚本详情
   const getScriptDetailData = async () => {
     detailLoading.value = true;
-    const res = await getScriptDetail(spaceId.value, scriptId.value);
+    const res = await getScriptDetail(spaceId.value, projectId.value, scriptId.value);
     const { name, type, releases } = res.spec;
     scriptDetail.value = { spec: { name, type }, not_release_id: releases.not_release_id };
     detailLoading.value = false;
@@ -237,7 +239,7 @@
       limit: pagination.value.limit,
     };
     params.search = searchQuery.value;
-    const res = await getScriptVersionList(spaceId.value, scriptId.value, params);
+    const res = await getScriptVersionList(spaceId.value, projectId.value, scriptId.value, params);
     versionList.value = res.details;
     pagination.value.count = res.count;
     versionLoading.value = false;
@@ -302,7 +304,7 @@
       confirmText: t('确定'),
       cancelText: t('取消'),
       onConfirm: async () => {
-        await publishVersion(spaceId.value, scriptId.value, version.id);
+        await publishVersion(spaceId.value, projectId.value, scriptId.value, version.id);
         unPublishVersion.value = null;
         versionEditData.value.panelOpen = false;
         getVersionList();
@@ -321,7 +323,7 @@
   };
 
   const handleDeleteScriptVersionConfirm = async () => {
-    await deleteScriptVersion(spaceId.value, scriptId.value, deleteScriptVersionItem.value!.id);
+    await deleteScriptVersion(spaceId.value, projectId.value, scriptId.value, deleteScriptVersionItem.value!.id);
     if (versionList.value.length === 1 && pagination.value.current > 1) {
       pagination.value.current = pagination.value.current - 1;
     }
@@ -348,6 +350,7 @@
       scriptDetail.value.not_release_id = data.id;
       unPublishVersion.value = await getScriptVersionDetail(
         spaceId.value,
+        projectId.value,
         scriptId.value,
         scriptDetail.value.not_release_id,
       );
diff --git a/ui/src/views/space/scripts/version-manage/script-version-diff.vue b/ui/src/views/space/scripts/version-manage/script-version-diff.vue
index 91ad3319b..59b000ac4 100644
--- a/ui/src/views/space/scripts/version-manage/script-version-diff.vue
+++ b/ui/src/views/space/scripts/version-manage/script-version-diff.vue
@@ -41,6 +41,7 @@
 
   const props = defineProps<{
     spaceId: string;
+    projectId: string;
     scriptId: number;
     type: string;
     show: boolean;
@@ -65,7 +66,7 @@
       start: 0,
       all: true,
     };
-    const res = await getScriptVersionList(props.spaceId, props.scriptId, params);
+    const res = await getScriptVersionList(props.spaceId, props.projectId, props.scriptId, params);
     versionList.value = (res.details as IScriptVersionListItem[])
       .filter((item) => item.hook_revision.id !== props.crtVersion.id)
       .map((item) => item.hook_revision);
diff --git a/ui/src/views/space/scripts/version-manage/version-edit.vue b/ui/src/views/space/scripts/version-manage/version-edit.vue
index 5b17dc8c7..d40d78410 100644
--- a/ui/src/views/space/scripts/version-manage/version-edit.vue
+++ b/ui/src/views/space/scripts/version-manage/version-edit.vue
@@ -82,7 +82,7 @@
   import ScriptEditor from '../components/script-editor.vue';
   import InternalVariable from '../components/internal-variable.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = withDefaults(
@@ -168,14 +168,14 @@
       const { name, memo, content } = localVal.value;
       const params = { name, memo, content };
       if (localVal.value.id) {
-        await updateScriptVersion(spaceId.value, props.scriptId, localVal.value.id, params);
+        await updateScriptVersion(spaceId.value, projectId.value, props.scriptId, localVal.value.id, params);
         emits('submitted', { ...localVal.value }, 'update');
         BkMessage({
           theme: 'success',
           message: t('编辑版本成功'),
         });
       } else {
-        const res = await createScriptVersion(spaceId.value, props.scriptId, params);
+        const res = await createScriptVersion(spaceId.value, projectId.value, props.scriptId, params);
         emits('submitted', { ...localVal.value, id: res.id }, 'create');
         BkMessage({
           theme: 'success',
diff --git a/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue b/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue
index 95913fd22..27dc90b96 100644
--- a/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue
+++ b/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue
@@ -38,6 +38,7 @@
           <ResetDefaultValue
             class="reset-default-btn"
             :bk-biz-id="bkBizId"
+            :project-id="projectId"
             :list="initialVariables"
             @reset="handleResetDefault" />
           <VariablesTable ref="tableRef" :list="variableList" :editable="true" @change="handleVariablesChange" />
@@ -67,6 +68,8 @@
   const props = defineProps<{
     show: boolean;
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     isDiffSliderShow: boolean;
   }>();
@@ -103,7 +106,7 @@
       {
         validator: async (value: string) => {
           if (value.length > 0) {
-            const res = await createVersionNameCheck(props.bkBizId, props.appId, value);
+            const res = await createVersionNameCheck(props.bkBizId, props.appId, props.projectId, props.envId, value);
             return !res.data.exist;
           }
           return true;
@@ -135,7 +138,8 @@
 
   const getVariableList = async () => {
     loading.value = true;
-    const res = await getUnReleasedAppVariables(props.bkBizId, props.appId);
+    const { bkBizId, appId, projectId, envId} = props;
+    const res = await getUnReleasedAppVariables(bkBizId, projectId, envId, appId);
     initialVariables.value = res.details.slice();
     variableList.value = res.details.slice();
     loading.value = false;
diff --git a/ui/src/views/space/service/detail/components/create-version/index.vue b/ui/src/views/space/service/detail/components/create-version/index.vue
index 7c40b020a..22d3cdd2d 100644
--- a/ui/src/views/space/service/detail/components/create-version/index.vue
+++ b/ui/src/views/space/service/detail/components/create-version/index.vue
@@ -18,6 +18,8 @@
     v-model:show="isVersionSliderShow"
     ref="createSliderRef"
     :bk-biz-id="props.bkBizId"
+    :project-id="projectId"
+    :env-id="envId"
     :app-id="props.appId"
     :is-diff-slider-show="isDiffSliderShow"
     @created="handleCreated" />
@@ -40,6 +42,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     permCheckLoading: boolean;
     hasPerm: boolean;
@@ -122,7 +126,7 @@
     try {
       const { bkBizId, appId } = props;
       const queryParams = { days: 30, all: true };
-      const res = await getUnExpiredCertList(bkBizId, appId, queryParams);
+      const res = await getUnExpiredCertList(bkBizId, appId, props.projectId, props.envId, queryParams);
       unExpiredCertList.value = res.data.details.map((item: IConfigKvType) => {
         const {
           spec: { key: name, certificate_expiration_date },
diff --git a/ui/src/views/space/service/detail/components/detail-header.vue b/ui/src/views/space/service/detail/components/detail-header.vue
index 6904241f8..f5c644155 100644
--- a/ui/src/views/space/service/detail/components/detail-header.vue
+++ b/ui/src/views/space/service/detail/components/detail-header.vue
@@ -24,6 +24,8 @@
         <ReleasedGroupViewer
           v-if="isShowReleasedGroups"
           :bk-biz-id="props.bkBizId"
+          :project-id="projectId"
+          :env-id="envId"
           :app-id="props.appId"
           :groups="versionData.status.released_groups"
           :disabled="publishStatus === 'full_released'">
@@ -50,6 +52,8 @@
           @send-data="getVerApproveStatus" />
         <CreateVersion
           :bk-biz-id="props.bkBizId"
+          :project-id="projectId"
+          :env-id="envId"
           :app-id="props.appId"
           :perm-check-loading="permCheckLoading"
           :has-perm="perms.create"
@@ -57,6 +61,8 @@
         <PublishVersion
           ref="publishVersionRef"
           :bk-biz-id="props.bkBizId"
+          :project-id="props.projectId"
+          :env-id="props.envId"
           :app-id="props.appId"
           :perm-check-loading="permCheckLoading"
           :has-perm="perms.publish"
@@ -65,6 +71,8 @@
           @confirm="handleRefresh" />
         <ModifyGroupPublish
           :bk-biz-id="props.bkBizId"
+          :project-id="props.projectId"
+          :env-id="props.envId"
           :app-id="props.appId"
           :perm-check-loading="permCheckLoading"
           :has-perm="perms.publish"
@@ -115,6 +123,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     versionDetailView: Boolean;
   }>();
@@ -262,7 +272,7 @@
     const tab = tabs.value.find((item) => item.name === val);
     if (tab) {
       const params = route.params.versionId ? { versionId: route.params.versionId } : {};
-      router.push({ name: tab.routeName, params });
+      router.push({ name: tab.routeName, params: { ...route.params, ...params}});
     }
   };
 
diff --git a/ui/src/views/space/service/detail/components/modify-group-publish.vue b/ui/src/views/space/service/detail/components/modify-group-publish.vue
index b3ee82949..dd013240e 100644
--- a/ui/src/views/space/service/detail/components/modify-group-publish.vue
+++ b/ui/src/views/space/service/detail/components/modify-group-publish.vue
@@ -94,6 +94,8 @@
     <ConfirmDialog
       v-model:show="isConfirmDialogShow"
       :bk-biz-id="props.bkBizId"
+      :project-id="props.projectId"
+      :env-id="props.envId"
       :app-id="props.appId"
       :group-list="treeNodeGroups"
       :version-list="versionList"
@@ -106,6 +108,8 @@
       @second-confirm="handleSecondConfirm" />
     <PublishVersionDiff
       :bk-biz-id="props.bkBizId"
+      :project-id="props.projectId"
+      :env-id="props.envId"
       :app-id="props.appId"
       :show="isDiffSliderShow"
       :current-version="versionData"
@@ -154,6 +158,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     permCheckLoading: boolean;
     hasPerm: boolean;
@@ -298,7 +304,13 @@
   const getVersionList = async () => {
     try {
       versionListLoading.value = true;
-      const res = await getConfigVersionList(props.bkBizId, props.appId, { start: 0, all: true });
+      const res = await getConfigVersionList(
+        props.bkBizId,
+        props.appId,
+        props.projectId,
+        props.envId,
+        { start: 0, all: true },
+      );
       versionList.value = res.data.details.filter((item: IConfigVersion) => {
         return item.status.publish_status !== 'not_released';
       });
@@ -311,7 +323,7 @@
   // 获取所有分组，并组装tree组件节点需要的数据
   const getAllGroupData = async () => {
     groupListLoading.value = true;
-    const res = await getServiceGroupList(props.bkBizId, appData.value.id as number);
+    const res = await getServiceGroupList(props.bkBizId, appData.value.id as number, props.projectId, props.envId,);
     groupList.value = res.details;
     treeNodeGroups.value = res.details.map((group: IGroupItemInService) => {
       const { group_id, group_name, release_id, release_name } = group;
@@ -480,7 +492,7 @@
 
   // 检查是否有正在上线的版本 或 2小时内有无其他版本上线
   const checkVersionStatus = async () => {
-    const resp = await versionStatusCheck(props.bkBizId, props.appId);
+    const resp = await versionStatusCheck(props.bkBizId, props.appId, props.projectId, props.envId);
     const { data } = resp;
     warnDialogData.value = data;
     if (data?.is_publishing) {
diff --git a/ui/src/views/space/service/detail/components/publish-version-diff.vue b/ui/src/views/space/service/detail/components/publish-version-diff.vue
index 33a3904b1..2cb2a68f5 100644
--- a/ui/src/views/space/service/detail/components/publish-version-diff.vue
+++ b/ui/src/views/space/service/detail/components/publish-version-diff.vue
@@ -3,6 +3,9 @@
     ref="diffRef"
     :btn-loading="props.btnLoading"
     :show="props.show"
+    :bk-biz-id="props.bkBizId"
+    :project-id="props.projectId"
+    :env-id="props.envId"
     :current-version="props.currentVersion"
     :base-version-id="baseVersionId"
     :show-publish-btn="true"
@@ -23,6 +26,8 @@
                   <ReleasedGroupViewer
                     placement="bottom-start"
                     :bk-biz-id="props.bkBizId"
+                    :project-id="props.projectId"
+                    :env-id="props.envId"
                     :app-id="props.appId"
                     :groups="version.status.released_groups">
                     <i class="bk-bscp-icon icon-resources-fill view-detail-icon" />
@@ -42,6 +47,8 @@
           <ReleasedGroupViewer
             placement="bottom-start"
             :bk-biz-id="props.bkBizId"
+            :project-id="props.projectId"
+            :env-id="props.envId"
             :app-id="props.appId"
             :groups="props.currentVersionGroups"
             :is-pending="true">
@@ -60,6 +67,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     show: boolean;
     currentVersion: IConfigVersion; // 当前版本详情信息
diff --git a/ui/src/views/space/service/detail/components/publish-version/confirm-dialog.vue b/ui/src/views/space/service/detail/components/publish-version/confirm-dialog.vue
index d24c540d4..9a688bcc3 100644
--- a/ui/src/views/space/service/detail/components/publish-version/confirm-dialog.vue
+++ b/ui/src/views/space/service/detail/components/publish-version/confirm-dialog.vue
@@ -181,6 +181,8 @@
     defineProps<{
       show: boolean;
       bkBizId: string;
+      projectId: string;
+      envId: string;
       appId: number;
       groupList: IGroupToPublish[];
       releaseType: string;
@@ -320,7 +322,14 @@
       // 非定时上线，publishTime清空
       params.publish_time =
         localVal.value.publish_type === 'scheduled' ? convertTime(params.publish_time as string, 'utc', false) : '';
-      const resp = await publishVerSubmit(props.bkBizId, props.appId, versionData.value.id, params);
+      const resp = await publishVerSubmit(
+        props.bkBizId,
+        props.appId,
+        props.projectId,
+        props.envId,
+        versionData.value.id,
+        params,
+      );
       handleClose();
       // 目前组件库dialog关闭自带250ms的延迟，所以这里延时300ms
       setTimeout(() => {
@@ -370,7 +379,7 @@
   const loadPublishType = async () => {
     try {
       pending.value = true;
-      const resp = await publishType(props.bkBizId, props.appId);
+      const resp = await publishType(props.bkBizId, props.appId, props.projectId, props.envId);
       const { is_approve, publish_type } = resp.data;
       isApprove.value = is_approve;
       // 需要审批
diff --git a/ui/src/views/space/service/detail/components/publish-version/index.vue b/ui/src/views/space/service/detail/components/publish-version/index.vue
index 217434b02..fcc6fa8b7 100644
--- a/ui/src/views/space/service/detail/components/publish-version/index.vue
+++ b/ui/src/views/space/service/detail/components/publish-version/index.vue
@@ -90,6 +90,8 @@
     <ConfirmDialog
       v-model:show="isConfirmDialogShow"
       :bk-biz-id="props.bkBizId"
+      :project-id="props.projectId"
+      :env-id="props.envId"
       :app-id="props.appId"
       :group-list="treeNodeGroups"
       :version-list="versionList"
@@ -101,6 +103,8 @@
       @second-confirm="handleSecondConfirm" />
     <PublishVersionDiff
       :bk-biz-id="props.bkBizId"
+      :project-id="props.projectId"
+      :env-id="props.envId"
       :app-id="props.appId"
       :show="isDiffSliderShow"
       :current-version="versionData"
@@ -150,6 +154,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     permCheckLoading: boolean;
     hasPerm: boolean;
@@ -265,7 +271,8 @@
   // 获取所有分组，并组装tree组件节点需要的数据
   const getAllGroupData = async () => {
     groupListLoading.value = true;
-    const res = await getServiceGroupList(props.bkBizId, appData.value.id as number);
+    console.log('getAllGroupData', appData.value);
+    const res = await getServiceGroupList(props.bkBizId, appData.value.id as number, props.projectId, props.envId,);
     groupList.value = res.details;
     treeNodeGroups.value = res.details.map((group: IGroupItemInService) => {
       const { group_id, group_name, release_id, release_name } = group;
@@ -293,7 +300,10 @@
   const getVersionList = async () => {
     try {
       versionListLoading.value = true;
-      const res = await getConfigVersionList(props.bkBizId, props.appId, { start: 0, all: true });
+      const res = await getConfigVersionList(props.bkBizId, props.appId, props.projectId, props.envId, {
+        start: 0,
+        all: true,
+      });
       versionList.value = res.data.details.filter((item: IConfigVersion) => {
         const { id, status } = item;
         return id !== versionData.value.id && status.publish_status !== 'not_released';
@@ -427,7 +437,7 @@
 
   // 检查是否有正在上线的版本 或 2小时内有无其他版本上线
   const checkVersionStatus = async () => {
-    const resp = await versionStatusCheck(props.bkBizId, props.appId);
+    const resp = await versionStatusCheck(props.bkBizId, props.appId, props.projectId, props.envId);
     const { data } = resp;
     warnDialogData.value = data;
     if (data?.is_publishing) {
diff --git a/ui/src/views/space/service/detail/components/service-selector.vue b/ui/src/views/space/service/detail/components/service-selector.vue
index 649a5842a..7292c01e9 100644
--- a/ui/src/views/space/service/detail/components/service-selector.vue
+++ b/ui/src/views/space/service/detail/components/service-selector.vue
@@ -62,9 +62,11 @@
   const { showApplyPermDialog, permissionQuery } = storeToRefs(useGlobalStore());
 
   const bizId = route.params.spaceId as string;
+  const projectId = route.params.projectId as string;
 
   const props = defineProps<{
     value: number;
+    envId: string;
   }>();
 
   const emits = defineEmits(['change']);
@@ -103,7 +105,7 @@
         start: 0,
         all: true,
       };
-      const resp = await getAppList(bizId, query);
+      const resp = await getAppList(bizId, projectId, props.envId, query);
       serviceList.value = resp.details;
     } catch (e) {
       console.error(e);
@@ -147,7 +149,7 @@
         name = 'service-config';
       }
 
-      router.push({ name, params: { spaceId: service.space_id, appId: id } });
+      router.push({ name, params: { spaceId: service.space_id, envId: props.envId, appId: id } });
       emits('change', service);
     }
   };
diff --git a/ui/src/views/space/service/detail/components/version-approve-status.vue b/ui/src/views/space/service/detail/components/version-approve-status.vue
index 1e7f0692b..3a0d1cc05 100644
--- a/ui/src/views/space/service/detail/components/version-approve-status.vue
+++ b/ui/src/views/space/service/detail/components/version-approve-status.vue
@@ -122,9 +122,14 @@
       clearInterval(interval);
     }
     if (route.params.versionId) {
-      const { spaceId, appId, versionId } = route.params;
+      const { spaceId, projectId, appId, envId, versionId } = route.params;
       try {
-        const resp = await versionStatusQuery(String(spaceId), Number(appId), Number(versionId));
+        const resp = await versionStatusQuery(
+          String(spaceId),
+          Number(appId),
+          String(projectId),
+          String(envId),
+          Number(versionId));
         const {
           app,
           spec,
diff --git a/ui/src/views/space/service/detail/config/components/config-content-editor.vue b/ui/src/views/space/service/detail/config/components/config-content-editor.vue
index bd9359707..82ce24577 100644
--- a/ui/src/views/space/service/detail/config/components/config-content-editor.vue
+++ b/ui/src/views/space/service/detail/config/components/config-content-editor.vue
@@ -52,6 +52,7 @@
           :variables="props.variables"
           :editable="editable"
           :language="props.language"
+          :env-id="envId"
           @update:model-value="emits('change', $event)" />
       </div>
     </div>
@@ -77,6 +78,7 @@
       language?: string;
       showTips?: boolean;
       height?: number;
+      envId?: string;
     }>(),
     {
       variables: () => [],
@@ -85,6 +87,7 @@
       language: '',
       showTips: true,
       height: 640,
+      envId: '0'
     },
   );
 
diff --git a/ui/src/views/space/service/detail/config/components/kv-config-content-editor.vue b/ui/src/views/space/service/detail/config/components/kv-config-content-editor.vue
index d61e4e50b..8010cd4ee 100644
--- a/ui/src/views/space/service/detail/config/components/kv-config-content-editor.vue
+++ b/ui/src/views/space/service/detail/config/components/kv-config-content-editor.vue
@@ -33,6 +33,7 @@
           :language="languages"
           :always-consume-mouse-wheel="false"
           :file-editor="false"
+          :env-id="envId"
           @update:model-value="emits('change', $event)" />
       </div>
     </div>
@@ -52,10 +53,12 @@
       languages: string;
       editable?: boolean;
       height?: number;
+      envId?: string;
     }>(),
     {
       editable: true,
       height: 640,
+      envId: '0',
     },
   );
 
diff --git a/ui/src/views/space/service/detail/config/components/kv-import-editor.vue b/ui/src/views/space/service/detail/config/components/kv-import-editor.vue
index 8a7e12658..5074f7403 100644
--- a/ui/src/views/space/service/detail/config/components/kv-import-editor.vue
+++ b/ui/src/views/space/service/detail/config/components/kv-import-editor.vue
@@ -71,6 +71,7 @@
           :error-line="errorLine"
           :language="format"
           :file-editor="false"
+          :env-id="envId"
           @enter="separatorShow = true"
           @paste="handlePaste"
           @update:model-value="handleContentChange" />
@@ -85,6 +86,7 @@
 <script setup lang="ts">
   import { ref, onBeforeUnmount, watch, computed, nextTick } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import { storeToRefs } from 'pinia';
   import BkMessage from 'bkui-vue/lib/message';
   import { InfoLine, FilliscreenLine, UnfullScreen, Search, Upload } from 'bkui-vue/lib/icon';
   import CodeEditor from '../../../../../../components/code-editor/index.vue';
@@ -92,6 +94,7 @@
   import { IConfigKvItem } from '../../../../../../../types/config';
   import { importKvFormText, importKvFormJson, importKvFormYaml } from '../../../../../../api/config';
   import useServiceStore from '../../../../../../store/service';
+  import useGlobalStore from '../../../../../../store/global';
   import yaml from 'js-yaml';
 
   interface errorLineItem {
@@ -103,6 +106,7 @@
   const emits = defineEmits(['hasError', 'update:modelValue']);
 
   const serviceStore = useServiceStore();
+  const { projectId } = storeToRefs(useGlobalStore());
 
   const isOpenFullScreen = ref(false);
   const codeEditorRef = ref();
@@ -117,6 +121,7 @@
 
   const props = defineProps<{
     bkBizId: string;
+    envId: string;
     appId: number;
     modelValue: boolean;
     format: string;
@@ -309,12 +314,13 @@
   // 导入kv
   const handleImport = async () => {
     let res;
-    if (props.format === 'text') {
-      res = await importKvFormText(props.bkBizId, props.appId, kvs.value, false);
-    } else if (props.format === 'json') {
-      res = await importKvFormJson(props.bkBizId, props.appId, jsonContent.value);
+    const {format, bkBizId, appId, envId} = props;
+    if (format === 'text') {
+      res = await importKvFormText(bkBizId, appId, projectId.value, envId, kvs.value, false);
+    } else if (format === 'json') {
+      res = await importKvFormJson(bkBizId, appId, projectId.value, envId, jsonContent.value);
     } else {
-      res = await importKvFormYaml(props.bkBizId, props.appId, yamlContent.value);
+      res = await importKvFormYaml(bkBizId, appId, projectId.value, envId, yamlContent.value);
     }
     serviceStore.$patch((state) => {
       state.topIds = res.data.ids;
diff --git a/ui/src/views/space/service/detail/config/components/released-group-viewer.vue b/ui/src/views/space/service/detail/config/components/released-group-viewer.vue
index c760b8c4f..52105f9bd 100644
--- a/ui/src/views/space/service/detail/config/components/released-group-viewer.vue
+++ b/ui/src/views/space/service/detail/config/components/released-group-viewer.vue
@@ -45,6 +45,8 @@
   const props = withDefaults(
     defineProps<{
       bkBizId: string;
+      projectId: string;
+      envId: string;
       appId: number;
       disabled?: boolean;
       placement?: string;
@@ -80,13 +82,14 @@
   // 获取默认分组下的排除分组
   const getExcludeGroups = async () => {
     loading.value = true;
-    const res = await getServiceGroupList(props.bkBizId, props.appId);
+    const { bkBizId, appId, projectId, envId, groups } = props;
+    const res = await getServiceGroupList(bkBizId, appId, projectId, envId);
     groupList.value = res.details
       .filter((item: IGroupItemInService) => {
         return (
           item.group_id > 0 &&
           item.release_id > 0 &&
-          props.groups.findIndex((group) => group.id === item.group_id) === -1
+          groups.findIndex((group) => group.id === item.group_id) === -1
         );
       })
       .map((item: IGroupItemInService) => ({ ...item, name: item.group_name, id: item.group_id }));
diff --git a/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs-kv.vue b/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs-kv.vue
index 3542c60bc..1aff996df 100644
--- a/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs-kv.vue
+++ b/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs-kv.vue
@@ -55,11 +55,13 @@
   import { ref, computed, watch, onMounted, nextTick } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router';
+  import { storeToRefs } from 'pinia';
   import { Search, RightShape } from 'bkui-vue/lib/icon';
   import { IConfigKvType } from '../../../../../../../../../types/config';
   import { ISingleLineKVDIffItem } from '../../../../../../../../../types/service';
   import { getKvList, getReleaseKvList } from '../../../../../../../../api/config';
   import SearchInput from '../../../../../../../../components/search-input.vue';
+  import useGlobalStore from '../../../../../../../../store/global';
   import tableEmpty from '../../../../../../../../components/table/table-empty.vue';
 
   interface IConfigDiffItem {
@@ -94,6 +96,7 @@
 
   const { t } = useI18n();
   const route = useRoute();
+  const { projectId } = storeToRefs(useGlobalStore());
 
   const emits = defineEmits(['selected', 'render']);
 
@@ -101,6 +104,7 @@
 
   const bkBizId = ref(String(route.params.spaceId));
   const appId = ref(Number(route.params.appId));
+  const envId = ref(String(route.params.envId));
   const diffCount = ref(0);
   const selected = ref();
   const currentList = ref<IConfigKvType[]>([]);
@@ -167,12 +171,12 @@
     let res;
     if (releaseId === 0) {
       // 未命名版本
-      res = await getKvList(bkBizId.value, Number(currentAppId), {
+      res = await getKvList(bkBizId.value, Number(currentAppId), projectId.value, envId.value, {
         start: 0,
         all: true,
       });
     } else {
-      res = await getReleaseKvList(bkBizId.value, Number(currentAppId), releaseId, {
+      res = await getReleaseKvList(bkBizId.value, Number(currentAppId), projectId.value, envId.value, releaseId, {
         start: 0,
         all: true,
       });
diff --git a/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue b/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue
index 9e6f5c854..85ef4a474 100644
--- a/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue
+++ b/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue
@@ -152,6 +152,8 @@
 
   const route = useRoute();
   const bkBizId = ref(String(route.params.spaceId));
+  const projectId = ref(String(route.params.projectId));
+  const envId = ref(String(route.params.envId));
   const { appData } = storeToRefs(useServiceStore());
 
   const diffCount = ref(0);
@@ -263,9 +265,15 @@
     let configsRes;
 
     if (unNamedVersion) {
-      configsRes = await getConfigList(bkBizId.value, appData.value.id as number, params);
+      configsRes = await getConfigList(bkBizId.value, appData.value.id as number, projectId.value, envId.value, params);
     } else {
-      configsRes = await getReleasedConfigList(bkBizId.value, appData.value.id as number, id, params);
+      configsRes = await getReleasedConfigList(
+        bkBizId.value,
+        appData.value.id as number,
+        projectId.value,
+        envId.value,
+        id,
+        params);
     }
 
     // 未命名版本中包含被删除的配置文件，需要过滤掉
@@ -309,9 +317,15 @@
     };
     let res;
     if (unNamedVersion) {
-      res = await getBoundTemplates(bkBizId.value, appData.value.id as number, params);
+      res = await getBoundTemplates(bkBizId.value, appData.value.id as number, projectId.value, envId.value, params);
     } else {
-      res = await getBoundTemplatesByAppVersion(bkBizId.value, appData.value.id as number, id, params);
+      res = await getBoundTemplatesByAppVersion(
+        bkBizId.value,
+        appData.value.id as number,
+        projectId.value,
+        envId.value,
+        id,
+        params);
     }
     return res.details.map((groupItem: IBoundTemplateGroup) => {
       const { template_space_id, template_space_name, template_set_id, template_set_name } = groupItem;
@@ -364,7 +378,12 @@
     if (id === undefined || isUnNamedVersion(id)) {
       return [];
     }
-    const res = await getReleasedAppVariables(bkBizId.value, appData.value.id as number, id);
+    const res = await getReleasedAppVariables(
+      bkBizId.value,
+      projectId.value,
+      envId.value,
+      appData.value.id as number,
+      id);
     return res.details;
   };
 
diff --git a/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/scripts.vue b/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/scripts.vue
index 12def7011..e2e845eec 100644
--- a/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/scripts.vue
+++ b/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/scripts.vue
@@ -21,6 +21,8 @@
   const { t } = useI18n();
   const route = useRoute();
   const bkBizId = ref(String(route.params.spaceId));
+  const projectId = ref(String(route.params.projectId));
+  const envId = ref(String(route.params.envId));
   const { appData } = storeToRefs(useServiceStore());
 
   const props = defineProps<{
@@ -108,7 +110,12 @@
   };
 
   const getScriptDetail = async (id: number, type: 'current' | 'base') => {
-    const scriptSetting = await getConfigScript(bkBizId.value, appData.value.id as number, id);
+    const scriptSetting = await getConfigScript(
+      bkBizId.value,
+      appData.value.id as number,
+      projectId.value,
+      envId.value,
+      id);
     const { pre_hook, post_hook } = scriptSetting;
     scriptDetailList.value[0][type] = {
       language: pre_hook.type,
diff --git a/ui/src/views/space/service/detail/config/components/version-diff/index.vue b/ui/src/views/space/service/detail/config/components/version-diff/index.vue
index 87d766a44..9cfeb3f15 100644
--- a/ui/src/views/space/service/detail/config/components/version-diff/index.vue
+++ b/ui/src/views/space/service/detail/config/components/version-diff/index.vue
@@ -105,6 +105,9 @@
 
   const { t, locale } = useI18n();
   const props = defineProps<{
+    bkBizId?: string;
+    projectId: string;
+    envId: string;
     appId?: number;
     show: boolean;
     showPublishBtn?: boolean; // 是否显示发布按钮
@@ -172,7 +175,13 @@
         versionList.value = props.versionDiffList;
         return;
       }
-      const res = await getConfigVersionList(bkBizId.value, Number(currentAppId), { start: 0, all: true });
+      const res = await getConfigVersionList(
+        bkBizId.value,
+        Number(currentAppId),
+        props.projectId,
+        props.envId,
+        { start: 0, all: true },
+      );
       versionList.value = res.data.details.filter((item: IConfigVersion) => item.id !== props.currentVersion.id);
     } catch (e) {
       console.error(e);
diff --git a/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-kv-with-template.vue b/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-kv-with-template.vue
index d8c700acf..c2c0e1727 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-kv-with-template.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-kv-with-template.vue
@@ -15,11 +15,16 @@
     <EditConfig
       v-model:show="isShowEdit"
       :bk-biz-id="props.bkBizId"
+      :project-id="projectId"
+      :env-id="envId"
       :app-id="props.appId"
       :config="selectedConfig.spec"
       :editable="true"
       @confirm="getListData" />
-    <ViewConfig v-model:show="isShowView" :config="selectedConfig" />
+    <ViewConfig
+      v-model:show="isShowView"
+      :env-id="envId"
+      :config="selectedConfig" />
   </section>
 </template>
 <script setup lang="ts">
@@ -42,6 +47,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 
@@ -91,10 +98,17 @@
         params.search_key = searchStr.value;
       }
       let res;
+      const { bkBizId, projectId, envId, appId} = props;
       if (isUnNamedVersion.value) {
-        res = await getKvList(props.bkBizId, props.appId, params);
+        res = await getKvList(bkBizId, appId, projectId, envId, params);
       } else {
-        res = await getReleaseKvList(props.bkBizId, props.appId, versionData.value.id, params);
+        res = await getReleaseKvList(
+          bkBizId,
+          appId,
+          projectId,
+          envId,
+          versionData.value.id,
+          params);
       }
       configList.value = res.details;
     } catch (e) {
diff --git a/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue b/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
index a0a406247..049059a37 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
@@ -31,12 +31,16 @@
     <EditConfig
       v-model:show="editConfigSliderData.open"
       :bk-biz-id="props.bkBizId"
+      :project-id="projectId"
+      :env-id="envId"
       :app-id="props.appId"
       :config-id="editConfigSliderData.id" />
     <ViewConfig
       v-model:show="viewConfigSliderData.open"
       v-bind="viewConfigSliderData.data"
       :bk-biz-id="props.bkBizId"
+      :project-id="projectId"
+      :env-id="envId"
       :app-id="props.appId"
       :version-id="versionData.id"
       @open-edit="handleOpenEdit" />
@@ -101,6 +105,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 
@@ -192,10 +198,17 @@
         params.search_value = searchStr.value;
       }
       let res;
+      const { bkBizId, appId, projectId, envId } = props;
       if (isUnNamedVersion.value) {
-        res = await getConfigList(props.bkBizId, props.appId, params);
+        res = await getConfigList(bkBizId, appId, projectId, envId, params);
       } else {
-        res = await getReleasedConfigList(props.bkBizId, props.appId, versionData.value.id, params);
+        res = await getReleasedConfigList(
+          bkBizId,
+          appId,
+          projectId,
+          envId,
+          versionData.value.id,
+          params);
       }
 
       configList.value = res.details;
@@ -220,10 +233,17 @@
       }
 
       let res;
+      const { bkBizId, appId, projectId, envId } = props;
       if (isUnNamedVersion.value) {
-        res = await getBoundTemplates(props.bkBizId, props.appId, params);
+        res = await getBoundTemplates(bkBizId, appId, projectId, envId, params);
       } else {
-        res = await getBoundTemplatesByAppVersion(props.bkBizId, props.appId, versionData.value.id, params);
+        res = await getBoundTemplatesByAppVersion(
+          bkBizId,
+          appId,
+          projectId,
+          envId,
+          versionData.value.id,
+          params);
       }
       templateGroupList.value = res.details;
     } catch (e) {
diff --git a/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list.vue b/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list.vue
index 60928f41a..c536ee83a 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list.vue
@@ -13,7 +13,13 @@
       </div>
       <bk-exception v-else scene="part" type="empty" :description="t('暂无数据')"></bk-exception>
     </bk-loading>
-    <EditConfig v-model:show="editDialogShow" :bk-biz-id="props.bkBizId" :app-id="props.appId" :config-id="configId" />
+    <EditConfig
+      v-model:show="editDialogShow"
+      :bk-biz-id="props.bkBizId"
+      :project-id="projectId"
+      :env-id="envId"
+      :app-id="props.appId"
+      :config-id="configId" />
   </section>
 </template>
 <script setup lang="ts">
@@ -33,6 +39,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 
@@ -64,11 +72,11 @@
         start: 0,
         all: true,
       };
-
+      const { bkBizId, appId, projectId, envId } = props;
       if (versionData.value.id === 0) {
-        await getConfigList(props.bkBizId, props.appId, params);
+        await getConfigList(bkBizId, appId, projectId, envId, params);
       } else {
-        await getReleasedConfigList(props.bkBizId, props.appId, versionData.value.id, params);
+        await getReleasedConfigList(bkBizId, appId, projectId, envId, versionData.value.id, params);
       }
     } catch (e) {
       console.error(e);
diff --git a/ui/src/views/space/service/detail/config/config-list/config-simple-list/index.vue b/ui/src/views/space/service/detail/config/config-list/config-simple-list/index.vue
index 318125050..33a533fd9 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-simple-list/index.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-simple-list/index.vue
@@ -1,6 +1,16 @@
 <template>
-  <ConfigTableWithTemplate v-if="isFileType" :bk-biz-id="bkBizId" :app-id="appId" />
-  <ConfigTableKvWithTemplate v-else :bk-biz-id="bkBizId" :app-id="appId" />
+  <ConfigTableWithTemplate
+    v-if="isFileType"
+    :bk-biz-id="bkBizId"
+    :project-id="projectId"
+    :env-id="envId"
+    :app-id="appId" />
+  <ConfigTableKvWithTemplate
+    v-else
+    :bk-biz-id="bkBizId"
+    :project-id="projectId"
+    :env-id="envId"
+    :app-id="appId" />
 </template>
 
 <script lang="ts" setup>
@@ -12,6 +22,8 @@
   const { isFileType } = serviceStore;
   defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 </script>
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/batch-operation-btn.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/batch-operation-btn.vue
index e74dc6c6e..e54d631a8 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/batch-operation-btn.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/batch-operation-btn.vue
@@ -98,6 +98,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     selectedIds: number[];
     selectedKeys: string[];
@@ -122,9 +124,22 @@
     loading.value = true;
     try {
       if (props.isFileType) {
-        await batchDeleteServiceConfigs(props.bkBizId, props.appId, props.selectedIds);
+        await batchDeleteServiceConfigs(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          props.selectedIds,
+        );
       } else {
-        await batchDeleteKv(props.bkBizId, props.appId, props.selectedIds, props.isAcrossChecked);
+        await batchDeleteKv(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          props.selectedIds,
+          props.isAcrossChecked,
+        );
       }
       Message({
         theme: 'success',
@@ -145,9 +160,22 @@
     loading.value = true;
     try {
       if (props.isFileType) {
-        await batchUndeleteFile(props.bkBizId, props.appId, props.selectedIds);
+        await batchUndeleteFile(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          props.selectedIds,
+        );
       } else {
-        await batchUndeleteKv(props.bkBizId, props.appId, props.selectedKeys, props.isAcrossChecked);
+        await batchUndeleteKv(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          props.selectedKeys,
+          props.isAcrossChecked,
+        );
       }
       Message({
         theme: 'success',
@@ -194,7 +222,7 @@
           sign: commit_spec.content.signature,
         };
       });
-      await batchAddConfigList(props.bkBizId, props.appId, { items: editConfigList });
+      await batchAddConfigList(props.bkBizId, props.appId, props.projectId, props.envId, { items: editConfigList });
       Message({
         theme: 'success',
         message: t('配置文件权限批量修改成功'),
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/config-export.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/config-export.vue
index a113456c6..1c9f9035d 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/config-export.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/config-export.vue
@@ -33,13 +33,16 @@
   import { storeToRefs } from 'pinia';
   import useServiceStore from '../../../../../../../store/service';
   import useConfigStore from '../../../../../../../store/config';
+  import useGlobalStore from '../../../../../../../store/global';
   const serviceStore = useServiceStore();
+  const { projectId } = storeToRefs(useGlobalStore());
   const configStore = useConfigStore();
   const { appData, isFileType } = storeToRefs(serviceStore);
   const { allExistConfigCount, conflictFileCount } = storeToRefs(configStore);
 
   const props = defineProps<{
     bkBizId: string;
+    envId: string;
     appId: number;
     versionId: number;
     versionName: string;
@@ -60,7 +63,7 @@
   ]);
 
   const handleExportKv = async (type: string) => {
-    const res = await getExportKvFile(props.bkBizId, props.appId, props.versionId, type);
+    const res = await getExportKvFile(props.bkBizId, props.appId, projectId.value, props.envId, props.versionId, type);
     let content: any;
     let mimeType: string;
     let extension: string;
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
index 3b9fbb397..706d164e1 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
@@ -149,6 +149,7 @@
         :editable="true"
         :variables="props.variables"
         :size-limit="props.fileSizeLimit"
+        :env-id="envId"
         @change="handleStringContentChange" />
     </bk-form-item>
   </bk-form>
@@ -207,6 +208,7 @@
       content?: string | IFileConfigContentSummary;
       variables?: IVariableEditParams[];
       bkBizId: string;
+      envId: string;
       id: number; // 服务ID或者模板空间ID
       fileUploading?: boolean;
       fileSizeLimit?: number;
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-form-other-service.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-form-other-service.vue
index e9a063c20..0e48dce50 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-form-other-service.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-form-other-service.vue
@@ -57,6 +57,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
   const emits = defineEmits(['selectVersion', 'clear']);
@@ -84,7 +86,7 @@
         start: 0,
         all: true,
       };
-      const resp = await getAppList(props.bkBizId, query);
+      const resp = await getAppList(props.bkBizId, props.projectId, props.envId, query);
       serviceList.value = resp.details.filter((app: IAppItem) => {
         if (isFileType.value) {
           return app.spec.config_type === 'file' && app.id !== props.appId;
@@ -123,7 +125,7 @@
         start: 0,
         all: true,
       };
-      const res = await getConfigVersionList(props.bkBizId, selectAppId.value, params);
+      const res = await getConfigVersionList(props.bkBizId, selectAppId.value, props.projectId, props.envId, params);
       versionList.value = res.data.details;
     } catch (e) {
       console.error(e);
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-from-local-file.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-from-local-file.vue
index aeba498ff..8ce27cfc7 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-from-local-file.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-from-local-file.vue
@@ -86,7 +86,7 @@
   }
 
   const { t } = useI18n();
-  const { spaceFeatureFlags } = storeToRefs(useGlobalStore());
+  const { spaceFeatureFlags, projectId } = storeToRefs(useGlobalStore());
 
   const props = defineProps<{
     isTemplate: boolean; // 是否是配置模板导入
@@ -189,6 +189,7 @@
       if (props.isTemplate) {
         res = await importTemplateFile(
           props.spaceId!,
+          projectId.value,
           props.currentTemplateSpace!,
           option.file,
           isDecompression.value,
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-from-templates.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-from-templates.vue
index 62544ec5f..e6fd7c5cb 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-from-templates.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/import-from-templates.vue
@@ -72,6 +72,8 @@
   import { ref, onMounted, computed, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { Share } from 'bkui-vue/lib/icon';
+  import { storeToRefs } from 'pinia';
+  import useGlobalStore from '../../../../../../../../../store/global';
   import { ITemplatePkgs, ITemplateRevision } from '../../../../../../../../../../types/config';
   import { IAllPkgsGroupBySpaceInBiz } from '../../../../../../../../../../types/template';
   import { importConfigFromTemplate } from '../../../../../../../../../api/config';
@@ -81,9 +83,11 @@
 
   const route = useRoute();
   const router = useRouter();
+  const { projectId } = storeToRefs(useGlobalStore());
 
   const props = defineProps<{
     bkBizId: string;
+    envId: string;
     appId: number;
   }>();
 
@@ -134,14 +138,14 @@
 
   const getPkgList = async () => {
     pkgListLoading.value = true;
-    const res = await getAllPackagesGroupBySpace(props.bkBizId, { app_id: props.appId });
+    const res = await getAllPackagesGroupBySpace(props.bkBizId, projectId.value, { app_id: props.appId });
     pkgList.value = res.details;
     pkgListLoading.value = false;
   };
 
   const getImportedPkgsData = async () => {
     importedPkgsLoading.value = true;
-    const res = await getAppPkgBindingRelations(props.bkBizId, props.appId);
+    const res = await getAppPkgBindingRelations(props.bkBizId, projectId.value, props.envId, props.appId);
     if (res.details.length === 1) {
       bindingId.value = res.details[0].id;
       importedPkgs.value = res.details[0].spec.bindings;
@@ -205,7 +209,7 @@
   };
 
   const handleImportConfirm = async () => {
-    await importConfigFromTemplate(props.bkBizId, props.appId, {
+    await importConfigFromTemplate(props.bkBizId, props.appId, projectId.value, props.envId, {
       bindings: [...selectedPkgs.value, ...importedPkgs.value],
     });
     close();
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/index.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/index.vue
index c42b5362d..5a504794b 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/index.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/index.vue
@@ -34,6 +34,7 @@
         <ImportFromTemplate
           ref="importFromTemplateRef"
           :bk-biz-id="props.bkBizId"
+          :env-id="envId"
           :app-id="props.appId"
           @toggle-disabled="templateImportBtnDisabled = $event"
           @close="handleClose" />
@@ -56,6 +57,8 @@
       <div v-else-if="importType === 'otherService'">
         <ImportFormOtherService
           :bk-biz-id="props.bkBizId"
+          :project-id="projectId"
+          :env-id="envId"
           :app-id="props.appId"
           @select-version="handleSelectVersion"
           @clear="handleClearTable" />
@@ -171,6 +174,8 @@
   const props = defineProps<{
     show: boolean;
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
   const emits = defineEmits(['update:show', 'confirm']);
@@ -310,7 +315,7 @@
           replace_all: isClearDraft.value,
           variables: allVariables,
         };
-        const res = await batchAddConfigList(props.bkBizId, props.appId, query);
+        const res = await batchAddConfigList(props.bkBizId, props.appId, props.projectId, props.envId, query);
         serviceStore.$patch((state) => {
           state.topIds = res.ids;
         });
@@ -336,7 +341,7 @@
         start: 0,
         all: true,
       };
-      const res = await getConfigVersionList(props.bkBizId, props.appId, params);
+      const res = await getConfigVersionList(props.bkBizId, props.appId, props.projectId, props.envId, params);
       versionList.value = res.data.details;
     } catch (e) {
       console.error(e);
@@ -351,7 +356,7 @@
     try {
       handleClearTable();
       const params = { other_app_id, release_id };
-      const res = await importFromHistoryVersion(props.bkBizId, props.appId, params);
+      const res = await importFromHistoryVersion(props.bkBizId, props.appId, props.projectId, props.envId, params);
       res.data.non_template_configs.forEach((item: any) => {
         const config = {
           ...item,
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/pkg-templates-table.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/pkg-templates-table.vue
index 735adb0a1..2bc89f831 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/pkg-templates-table.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-file/pkg-templates-table.vue
@@ -53,10 +53,12 @@
 <script lang="ts" setup>
   import { ref, onMounted, computed } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import { storeToRefs } from 'pinia';
   import { RightShape, Close } from 'bkui-vue/lib/icon';
   import { IAllPkgsGroupBySpaceInBiz, ITemplateConfigItem } from '../../../../../../../../../../types/template';
   import { ITemplateRevision } from '../../../../../../../../../../types/config';
   import { getTemplateRevisionsFromPkgId } from '../../../../../../../../../api/template';
+  import useGlobalStore from '../../../../../../../../../store/global';
 
   interface ITemplateVersions {
     id: number;
@@ -71,6 +73,7 @@
     versions: ITemplateVersions[];
   }
   const { t } = useI18n();
+  const { projectId } = storeToRefs(useGlobalStore());
 
   const props = defineProps<{
     bkBizId: string;
@@ -116,7 +119,7 @@
   const getTemplateList = async () => {
     listLoading.value = true;
     try {
-      const res = await getTemplateRevisionsFromPkgId(props.bkBizId, props.pkgId);
+      const res = await getTemplateRevisionsFromPkgId(props.bkBizId, projectId.value, props.pkgId);
       configTemplateList.value = res.details.map((item: any) => {
         const { template, template_revision } = item;
         const versions = template_revision.map((version: any) => {
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-kv/index.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-kv/index.vue
index 967067602..2a0f12c70 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-kv/index.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-kv/index.vue
@@ -20,7 +20,7 @@
         </bk-radio-group>
       </div>
       <div v-if="importType === 'text'">
-        <TextImport ref="textImport" :bk-biz-id="bkBizId" :app-id="appId" />
+        <TextImport ref="textImport" :bk-biz-id="bkBizId" :env-id="envId" :app-id="appId" />
       </div>
       <div v-else-if="importType === 'historyVersion'">
         <div class="wrap">
@@ -40,6 +40,8 @@
       <div v-else>
         <ImportFormOtherService
           :bk-biz-id="bkBizId"
+          :project-id="projectId"
+          :env-id="envId"
           :app-id="appId"
           @select-version="handleSelectVersion"
           @clear="handleClearTable" />
@@ -123,6 +125,8 @@
   const props = defineProps<{
     show: boolean;
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
   const emits = defineEmits(['update:show', 'confirm']);
@@ -186,7 +190,7 @@
         start: 0,
         all: true,
       };
-      const res = await getConfigVersionList(props.bkBizId, props.appId, params);
+      const res = await getConfigVersionList(props.bkBizId, props.appId, props.projectId, props.envId, params);
       versionList.value = res.data.details;
     } catch (e) {
       console.error(e);
@@ -200,7 +204,7 @@
     tableLoading.value = true;
     try {
       const params = { other_app_id, release_id };
-      const res = await importKvFromHistoryVersion(props.bkBizId, props.appId, params);
+      const res = await importKvFromHistoryVersion(props.bkBizId, props.appId, props.projectId, props.envId, params);
       existConfigList.value = res.data.exist;
       nonExistConfigList.value = res.data.non_exist;
       existConfigList.value = existConfigList.value.map((item) => ({ ...item, is_exist: true }));
@@ -232,7 +236,13 @@
       if (importType.value === 'text') {
         await textImport.value.handleImport();
       } else {
-        const res = await importKvFormText(props.bkBizId, props.appId, importConfigList.value, isClearDraft.value);
+        const res = await importKvFormText(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          importConfigList.value,
+          isClearDraft.value);
         serviceStore.$patch((state) => {
           state.topIds = res.data.ids;
         });
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-kv/text-import.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-kv/text-import.vue
index a9dacda81..c0d4f61fe 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-kv/text-import.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/import-kv/text-import.vue
@@ -13,6 +13,7 @@
       ref="editorRef"
       v-model="isShowFormateExample"
       :bk-biz-id="props.bkBizId"
+      :env-id="envId"
       :app-id="props.appId"
       :format="selectFormat"
       @has-error="hasTextImportError = $event">
@@ -33,6 +34,7 @@
 
   const props = defineProps<{
     bkBizId: string;
+    envId: string;
     appId: number;
   }>();
 
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/index.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/index.vue
index 76e994549..74e802aa1 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/index.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/index.vue
@@ -32,21 +32,27 @@
   <ManualCreate
     v-model:show="isManualCreateSliderOpen"
     :bk-biz-id="props.bkBizId"
+    :env-id="envId"
     :app-id="props.appId"
     @confirm="emits('created')" />
   <ManualCreateKv
     v-model:show="isManualCreateKvSliderOpen"
     :bk-biz-id="props.bkBizId"
+    :env-id="envId"
     :app-id="props.appId"
     @confirm="emits('created')" />
   <BatchImportKv
     v-model:show="isBatchImportKvDialogOpen"
     :bk-biz-id="props.bkBizId"
+    :project-id="projectId"
+    :env-id="envId"
     :app-id="props.appId"
     @confirm="emits('imported')" />
   <BatchImportFile
     v-model:show="isBatchImportDialogOpen"
     :bk-biz-id="props.bkBizId"
+    :project-id="projectId"
+    :env-id="envId"
     :app-id="props.appId"
     @confirm="emits('imported')" />
 </template>
@@ -71,6 +77,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 
@@ -80,13 +88,13 @@
   const isPopoverOpen = ref(false);
   const isManualCreateSliderOpen = ref(false);
   const isManualCreateKvSliderOpen = ref(false);
-  const isImportTemplatesDialogOpen = ref(false);
   const isBatchImportDialogOpen = ref(false);
   const isBatchImportKvDialogOpen = ref(false);
 
   onMounted(() => {
-    if (route.query.pkg_id) {
-      isImportTemplatesDialogOpen.value = true;
+    const {pkg_id, isOpenDialog} = route.query;
+    if (pkg_id && isOpenDialog === '1') {
+      isBatchImportDialogOpen.value = true;
     }
   });
 
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create-kv.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create-kv.vue
index 6ad8ae4db..a770ab9df 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create-kv.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create-kv.vue
@@ -22,22 +22,26 @@
 <script lang="ts" setup>
   import { ref, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import { storeToRefs } from 'pinia';
   import Message from 'bkui-vue/lib/message';
   import { IConfigKvEditParams } from '../../../../../../../../../types/config';
   import { createKv } from '../../../../../../../../api/config';
   import useModalCloseConfirmation from '../../../../../../../../utils/hooks/use-modal-close-confirmation';
   import ConfigForm from '../config-form-kv/index.vue';
   import useServiceStore from '../../../../../../../../store/service';
+  import useGlobalStore from '../../../../../../../../store/global';
 
   const serviceStore = useServiceStore();
 
   const props = defineProps<{
     show: boolean;
     bkBizId: string;
+    envId: string;
     appId: number;
   }>();
 
   const { t } = useI18n();
+  const { projectId } = storeToRefs(useGlobalStore());
 
   const emits = defineEmits(['update:show', 'confirm']);
   const content = ref('');
@@ -91,7 +95,7 @@
       configForm.value.value = configForm.value.value.replace(/^0+(?=\d|$)/, '');
     }
     try {
-      const res = await createKv(props.bkBizId, props.appId, { ...configForm.value });
+      const res = await createKv(props.bkBizId, props.appId, projectId.value, props.envId, { ...configForm.value });
       serviceStore.$patch((state) => {
         state.topIds = [res.data.id];
       });
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue
index ebbadb88f..6dd37d5ee 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue
@@ -13,6 +13,7 @@
       :content="content"
       :is-edit="false"
       :bk-biz-id="props.bkBizId"
+      :env-id="envId"
       :id="props.appId"
       :file-size-limit="spaceFeatureFlags.RESOURCE_LIMIT.maxFileSize"
       @change="handleFormChange" />
@@ -42,6 +43,7 @@
   const props = defineProps<{
     show: boolean;
     bkBizId: string;
+    envId: string;
     appId: number;
   }>();
 
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/download-config-btn.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/download-config-btn.vue
index bb7ed6c6a..c078ec11d 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/download-config-btn.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/download-config-btn.vue
@@ -17,12 +17,15 @@
     downloadTemplateContent,
   } from '../../../../../../../api/template';
   import useConfigStore from '../../../../../../../store/config';
+  import useGlobalStore from '../../../../../../../store/global';
   import { fileDownload } from '../../../../../../../utils/file';
 
   const { versionData } = storeToRefs(useConfigStore());
+  const { projectId } = storeToRefs(useGlobalStore());
 
   const props = defineProps<{
     bkBizId: string;
+    envId: string;
     appId: number;
     id: number;
     type: string; // 取值为config/template，分别表示非模板套餐下配置文件和模板套餐下配置文件
@@ -36,31 +39,37 @@
     let content;
     let fileName;
     pending.value = true;
+    const { bkBizId, appId, envId, id} = props;
     if (props.type === 'config') {
       let res;
       if (versionData.value.id) {
-        res = await getReleasedConfigItemDetail(props.bkBizId, props.appId, versionData.value.id, props.id);
+        res = await getReleasedConfigItemDetail(bkBizId, appId, projectId.value, envId, versionData.value.id, id);
         signature = res.config_item.commit_spec.content.signature;
       } else {
-        res = await getConfigItemDetail(props.bkBizId, props.id, props.appId);
+        res = await getConfigItemDetail(bkBizId, id, appId, projectId.value, envId);
         signature = res.content.signature;
       }
       fileName = res.config_item.spec.name;
-      content = await downloadConfigContent(props.bkBizId, props.appId, signature, true);
+      content = await downloadConfigContent(bkBizId, appId, signature, true);
     } else {
       let templateSpaceId;
       if (versionData.value.id) {
-        const res = await getTemplateVersionDetail(props.bkBizId, props.appId, versionData.value.id, props.id);
+        const res = await getTemplateVersionDetail(
+          bkBizId,
+          projectId.value,
+          appId,
+          versionData.value.id,
+          id);
         signature = res.detail.signature;
         fileName = res.detail.name;
         templateSpaceId = res.detail.template_space_id;
       } else {
-        const res = await getTemplateVersionsDetailByIds(props.bkBizId, [props.id]);
+        const res = await getTemplateVersionsDetailByIds(bkBizId, projectId.value, [id]);
         signature = res.details[0].spec.content_spec.signature;
         fileName = res.details[0].spec.name;
         templateSpaceId = res.details[0].attachment.template_space_id;
       }
-      content = await downloadTemplateContent(props.bkBizId, templateSpaceId, signature, true);
+      content = await downloadTemplateContent(bkBizId, templateSpaceId, signature, true);
     }
     fileDownload(content, fileName);
 
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config-kv.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config-kv.vue
index 0c69211d7..c1f0bca27 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config-kv.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config-kv.vue
@@ -34,6 +34,8 @@
   const { t } = useI18n();
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     config: IConfigKvItem;
     show: boolean;
@@ -86,7 +88,7 @@
     }
     try {
       pending.value = true;
-      await updateKv(props.bkBizId, props.appId, configForm.value!.key, editForm);
+      await updateKv(props.bkBizId, props.appId, props.projectId, props.envId, configForm.value!.key, editForm);
       emits('confirm');
       close();
       Message({
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue
index d22b31ffa..b9cb3e9ba 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue
@@ -56,6 +56,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     configId: number;
     show: Boolean;
@@ -89,12 +91,19 @@
       let signature;
       let byte_size;
       if (versionData.value.id) {
-        detail = await getReleasedConfigItemDetail(props.bkBizId, props.appId, versionData.value.id, props.configId);
+        detail = await getReleasedConfigItemDetail(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          versionData.value.id,
+          props.configId,
+        );
         const { origin_byte_size, origin_signature } = detail.config_item.commit_spec.content;
         byte_size = origin_byte_size;
         signature = origin_signature;
       } else {
-        detail = await getConfigItemDetail(props.bkBizId, props.configId, props.appId);
+        detail = await getConfigItemDetail(props.bkBizId, props.configId, props.appId, props.projectId, props.envId);
         byte_size = detail.content.byte_size;
         signature = detail.content.signature;
       }
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue
index 0bee87f8a..b49923711 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue
@@ -19,6 +19,8 @@
         <template v-if="versionData.status.publish_status === 'editing'">
           <CreateConfig
             :bk-biz-id="props.bkBizId"
+            :project-id="projectId"
+            :env-id="envId"
             :app-id="props.appId"
             @created="refreshConfigList(true)"
             @imported="handleImported" />
@@ -27,21 +29,32 @@
             :current="allExistConfigCount"
             :is-temp="false"
             :is-file-type="isFileType" />
-          <EditVariables v-if="isFileType" ref="editVariablesRef" :bk-biz-id="props.bkBizId" :app-id="props.appId" />
+          <EditVariables
+            v-if="isFileType"
+            ref="editVariablesRef"
+            :bk-biz-id="props.bkBizId"
+            :project-id="projectId"
+            :env-id="envId"
+            :app-id="props.appId" />
         </template>
         <ViewVariables
           v-else-if="isFileType"
           :bk-biz-id="props.bkBizId"
+          :project-id="projectId"
+          :env-id="envId"
           :app-id="props.appId"
           :verision-id="versionData.id" />
         <ConfigExport
           :bk-biz-id="props.bkBizId"
+          :env-id="envId"
           :app-id="props.appId"
           :version-id="versionData.id"
           :version-name="versionData.spec.name" />
         <BatchOperationBtn
           v-if="versionData.status.publish_status === 'editing'"
           :bk-biz-id="props.bkBizId"
+          :project-id="projectId"
+          :env-id="envId"
           :app-id="props.appId"
           :selected-ids="selectedIds"
           :is-file-type="isFileType"
@@ -66,6 +79,8 @@
         v-if="isFileType"
         ref="tableRef"
         :bk-biz-id="props.bkBizId"
+        :project-id="props.projectId"
+        :env-id="props.envId"
         :app-id="props.appId"
         :search-query="searchQuery"
         @clear-str="handleClearsearchQuery"
@@ -75,6 +90,8 @@
         v-else
         ref="tableRef"
         :bk-biz-id="props.bkBizId"
+        :project-id="props.projectId"
+        :env-id="props.envId"
         :app-id="props.appId"
         :search-query="searchQuery"
         @send-table-data-count="selecTableDataCount = $event"
@@ -117,6 +134,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/replace-template-version.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/replace-template-version.vue
index d22bdd9b7..d15951763 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/replace-template-version.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/replace-template-version.vue
@@ -39,10 +39,12 @@
 <script lang="ts" setup>
   import { ref, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import { storeToRefs } from 'pinia';
   import { getTemplateVersionsNameByIds } from '../../../../../../../api/template';
   import { updateBoundTemplateVersion } from '../../../../../../../api/config';
   import { ITemplateVersionsName } from '../../../../../../../../types/template';
   import Message from 'bkui-vue/lib/message';
+  import useGlobalStore from '../../../../../../../store/global';
 
   interface ITplVersionItem {
     id: number;
@@ -54,6 +56,7 @@
   const props = defineProps<{
     show: boolean;
     bkBizId: string;
+    envId: string;
     appId: number;
     pkgId: number;
     bindingId: number;
@@ -63,6 +66,7 @@
   }>();
 
   const { t, locale } = useI18n();
+  const { projectId } = storeToRefs(useGlobalStore());
   const emits = defineEmits(['update:show', 'updated']);
 
   const loading = ref(false);
@@ -83,7 +87,7 @@
 
   const getTemplateVersions = async () => {
     loading.value = true;
-    const res = await getTemplateVersionsNameByIds(props.bkBizId, [props.templateId]);
+    const res = await getTemplateVersionsNameByIds(props.bkBizId, projectId.value, [props.templateId]);
     const templateVersion: ITemplateVersionsName = res.details[0];
     const list: ITplVersionItem[] = [];
     templateVersion.template_revisions.forEach((item) => {
@@ -138,7 +142,13 @@
         },
       ],
     };
-    await updateBoundTemplateVersion(props.bkBizId, props.appId, props.bindingId, params);
+    await updateBoundTemplateVersion(
+      props.bkBizId,
+      props.appId,
+      projectId.value,
+      props.envId,
+      props.bindingId,
+      params);
     emits('updated');
     close();
     Message({
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue
index 1f925ec43..8ce922c97 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue
@@ -167,6 +167,8 @@
     v-model:show="editPanelShow"
     :config="operationConfig.spec as IConfigKvItem"
     :bk-biz-id="props.bkBizId"
+    :project-id="projectId"
+    :env-id="envId"
     :app-id="props.appId"
     :editable="true"
     @confirm="handleUpdateConfig" />
@@ -174,8 +176,14 @@
     v-model:show="viewPanelShow"
     :config="operationConfig"
     :show-edit-btn="isUnNamedVersion && operationConfig.kv_state !== 'DELETE'"
+    :env-id="envId"
     @open-edit="handleSwitchToEdit" />
-  <VersionDiff v-model:show="isDiffPanelShow" :current-version="versionData" :selected-kv-config-id="diffConfig" />
+  <VersionDiff
+    v-model:show="isDiffPanelShow"
+    :project-id="projectId"
+    :env-id="envId"
+    :current-version="versionData"
+    :selected-kv-config-id="diffConfig" />
   <DeleteConfirmDialog
     v-model:is-show="isDeleteConfigDialogShow"
     :title="t('确认删除该配置项？')"
@@ -234,6 +242,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     searchQuery: { [key: string]: string };
   }>();
@@ -389,9 +399,16 @@
         if (statusFilterChecked.value!.length > 0) {
           params.status = statusFilterChecked.value;
         }
-        res = await getKvList(props.bkBizId, props.appId, params);
+        res = await getKvList(props.bkBizId, props.appId, props.projectId, props.envId, params);
       } else {
-        res = await getReleaseKvList(props.bkBizId, props.appId, versionData.value.id, params);
+        res = await getReleaseKvList(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          versionData.value.id,
+          params,
+        );
       }
       configList.value = res.details.sort((a: IConfigKvType, b: IConfigKvType) => {
         if (a.kv_state === 'DELETE' && b.kv_state !== 'DELETE') {
@@ -498,7 +515,7 @@
     if (permCheckLoading.value || !checkPermBeforeOperate('update')) {
       return;
     }
-    await unModifyKv(props.bkBizId, props.appId, config.spec.key);
+    await unModifyKv(props.bkBizId, props.appId, props.projectId, props.envId, config.spec.key);
     Message({ theme: 'success', message: t('撤销修改配置项成功') });
     operationConfig.value = config;
     operationConfigIndex.value = index;
@@ -515,7 +532,7 @@
 
   // 删除单个配置项
   const handleDeleteConfigConfirm = async () => {
-    await deleteKv(props.bkBizId, props.appId, operationConfig.value.id);
+    await deleteKv(props.bkBizId, props.appId, props.projectId, props.envId, operationConfig.value.id);
 
     // 删除的配置项如果在多选列表里，需要去掉
     const index = selectedConfigIds.value.findIndex((id) => id === operationConfig.value?.id);
@@ -549,7 +566,7 @@
   };
 
   const handleRecoverConfigConfirm = async () => {
-    await undeleteKv(props.bkBizId, props.appId, operationConfig.value!.spec.key);
+    await undeleteKv(props.bkBizId, props.appId, props.projectId, props.envId, operationConfig.value!.spec.key);
     Message({ theme: 'success', message: t('恢复配置项成功') });
     isRecoverConfigDialogShow.value = false;
     handleUpdateConfig();
@@ -557,7 +574,7 @@
 
   // 操作配置文件后，更新配置文件内容，不刷新列表
   const handleUpdateConfig = async () => {
-    const res = await getKvList(props.bkBizId, props.appId, { start: 0, all: true });
+    const res = await getKvList(props.bkBizId, props.appId, props.projectId, props.envId, { start: 0, all: true });
     const replaceConfig = res.details.find((item: IConfigKvType) => item.spec.key === operationConfig.value?.spec.key);
     if (replaceConfig) {
       // 非删除操作
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
index bb86b80dc..be010b6d0 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
@@ -157,6 +157,7 @@
                                       <DownloadConfigBtn
                                         type="config"
                                         :bk-biz-id="props.bkBizId"
+                                        :env-id="envId"
                                         :app-id="props.appId"
                                         :id="item.id"
                                         :disabled="item.file_state === 'DELETE'" />
@@ -195,6 +196,7 @@
                                     <DownloadConfigBtn
                                       type="config"
                                       :bk-biz-id="props.bkBizId"
+                                      :env-id="envId"
                                       :app-id="props.appId"
                                       :id="item.id" />
                                   </template>
@@ -225,6 +227,7 @@
                                   <DownloadConfigBtn
                                     type="template"
                                     :bk-biz-id="props.bkBizId"
+                                    :env-id="envId"
                                     :app-id="props.appId"
                                     :id="item.versionId"
                                     :disabled="item.file_state === 'DELETE'" />
@@ -253,21 +256,31 @@
     v-model:show="editPanelShow"
     :config-id="activeConfig"
     :bk-biz-id="props.bkBizId"
+    :project-id="projectId"
+    :env-id="envId"
     :app-id="props.appId"
     @confirm="handleEditConfigConfirm" />
   <ViewConfig
     v-model:show="viewConfigSliderData.open"
     v-bind="viewConfigSliderData.data"
     :bk-biz-id="props.bkBizId"
+    :project-id="projectId"
+    :env-id="envId"
     :app-id="props.appId"
     :version-id="versionData.id"
     @open-edit="handleSwitchToEdit" />
-  <VersionDiff v-model:show="isDiffPanelShow" :current-version="versionData" :selected-config="diffConfig" />
+  <VersionDiff
+    v-model:show="isDiffPanelShow"
+    :project-id="projectId"
+    :env-id="envId"
+    :current-version="versionData"
+    :selected-config="diffConfig" />
   <ReplaceTemplateVersion
     v-model:show="replaceDialogData.open"
     v-bind="replaceDialogData.data"
     :binding-id="bindingId"
     :bk-biz-id="props.bkBizId"
+    :env-id="envId"
     :app-id="props.appId"
     @updated="getAllConfigList" />
   <DeleteConfirmDialog
@@ -384,6 +397,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     searchQuery: { [key: string]: string };
   }>();
@@ -555,7 +570,8 @@
   });
 
   const getBindingId = async () => {
-    const res = await getAppPkgBindingRelations(props.bkBizId, props.appId);
+    const { bkBizId, appId, projectId, envId } = props;
+    const res = await getAppPkgBindingRelations(bkBizId, projectId, envId, appId);
     bindingId.value = res.details.length === 1 ? res.details[0].id : 0;
   };
 
@@ -593,10 +609,17 @@
       let res;
       if (isUnNamedVersion.value) {
         if (statusFilterChecked.value.length > 0) params.status = statusFilterChecked.value;
-        res = await getConfigList(props.bkBizId, props.appId, params);
+        res = await getConfigList(props.bkBizId, props.appId, props.projectId, props.envId, params);
         allExistConfigCount.value = res.total_quantity;
       } else {
-        res = await getReleasedConfigList(props.bkBizId, props.appId, versionData.value.id, params);
+        res = await getReleasedConfigList(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          versionData.value.id,
+          params,
+        );
       }
       configList.value = res.details.sort((a: IConfigItem, b: IConfigItem) => {
         if (a.file_state === 'DELETE' && b.file_state !== 'DELETE') {
@@ -633,9 +656,16 @@
       let res;
       if (isUnNamedVersion.value) {
         if (statusFilterChecked.value.length > 0) params.status = statusFilterChecked.value;
-        res = await getBoundTemplates(props.bkBizId, props.appId, params);
+        res = await getBoundTemplates(props.bkBizId, props.appId, props.projectId, props.envId, params);
       } else {
-        res = await getBoundTemplatesByAppVersion(props.bkBizId, props.appId, versionData.value.id, params);
+        res = await getBoundTemplatesByAppVersion(
+          props.bkBizId,
+          props.appId,
+          props.projectId,
+          props.envId,
+          versionData.value.id,
+          params,
+        );
       }
       templateGroupList.value = res.details;
       templatesCount.value = res.details.reduce(
@@ -826,7 +856,7 @@
   const handleDeletePkgConfirm = async () => {
     try {
       removePkgLoading.value = true;
-      await deleteCurrBoundPkg(props.bkBizId, props.appId, templateSetId.value);
+      await deleteCurrBoundPkg(props.bkBizId, props.appId, props.projectId, props.envId, templateSetId.value);
       await getBoundTemplateList();
       tableGroupsData.value = transListToTableData();
       emits('deleteConfig');
@@ -903,7 +933,7 @@
     if (permCheckLoading.value || !checkPermBeforeOperate('update')) {
       return;
     }
-    await unModifyConfigItem(props.bkBizId, props.appId, config.id);
+    await unModifyConfigItem(props.bkBizId, props.appId, props.projectId, props.envId, config.id);
     Message({ theme: 'success', message: t('撤销修改配置文件成功') });
     operationConfig.value = {
       config,
@@ -934,7 +964,13 @@
   };
 
   const handleRecoverConfigConfirm = async () => {
-    await unDeleteConfigItem(props.bkBizId, props.appId, operationConfig.value!.config.id);
+    await unDeleteConfigItem(
+      props.bkBizId,
+      props.appId,
+      props.projectId,
+      props.envId,
+      operationConfig.value!.config.id,
+    );
     isRecoverConfigDialogShow.value = false;
     Message({ theme: 'success', message: t('恢复配置文件成功') });
     handleUpdateConfig();
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/edit-variables.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/edit-variables.vue
index 03e8be64a..1e3fda90f 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/edit-variables.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/edit-variables.vue
@@ -22,6 +22,7 @@
         <ResetDefaultValue
           class="reset-default"
           :bk-biz-id="bkBizId"
+          :project-id="projectId"
           :list="initialVariables"
           @reset="handleResetDefault" />
       </div>
@@ -65,6 +66,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 
@@ -83,9 +86,10 @@
 
   const getVariableList = async () => {
     loading.value = true;
+    const { bkBizId, projectId, envId, appId } = props;
     const [variableListRes, citedListRes] = await Promise.all([
-      getUnReleasedAppVariables(props.bkBizId, props.appId),
-      getUnReleasedAppVariablesCitedDetail(props.bkBizId, props.appId),
+      getUnReleasedAppVariables(bkBizId, projectId, envId, appId),
+      getUnReleasedAppVariablesCitedDetail(bkBizId, projectId, envId, appId),
     ]);
     initialVariables.value = variableListRes.details.slice();
     variableList.value = variableListRes.details.slice();
@@ -108,7 +112,8 @@
 
   // 导出变量
   const handleExport = async (type: string) => {
-    const res = await exportUnReleasedVariables(props.bkBizId, props.appId, type);
+    const { bkBizId, projectId, envId, appId } = props;
+    const res = await exportUnReleasedVariables(bkBizId, projectId, envId, appId, type);
     let content: any;
     let mimeType: string;
     let extension: string;
@@ -121,7 +126,7 @@
       mimeType = 'text/yaml';
       extension = 'yaml';
     }
-    downloadFile(content, mimeType, `bscp_variables_${props.bkBizId}.${extension}`);
+    downloadFile(content, mimeType, `bscp_variables_${bkBizId}.${extension}`);
   };
 
   const handleResetDefault = (list: IVariableEditParams[]) => {
@@ -134,7 +139,8 @@
     }
     try {
       pending.value = true;
-      await updateUnReleasedAppVariables(props.bkBizId, props.appId, variableList.value);
+      const { bkBizId, projectId, envId, appId } = props;
+      await updateUnReleasedAppVariables(bkBizId, projectId, envId, appId, variableList.value);
       close();
       Message({
         theme: 'success',
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/reset-default-value.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/reset-default-value.vue
index 94c2c9c6a..1905e362f 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/reset-default-value.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/reset-default-value.vue
@@ -22,6 +22,7 @@
   const props = defineProps<{
     list: IVariableEditParams[];
     bkBizId: string;
+    projectId: string;
   }>();
 
   const emits = defineEmits(['reset']);
@@ -45,7 +46,7 @@
       start: 0,
       all: true,
     };
-    const res = await getVariableList(props.bkBizId, params);
+    const res = await getVariableList(props.bkBizId, props.projectId, params);
     variableList.value = res.details;
   };
 
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/view-variables.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/view-variables.vue
index b893bbffc..1eda1f6f8 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/view-variables.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/view-variables.vue
@@ -33,6 +33,8 @@
   const { t } = useI18n();
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     verisionId: number;
   }>();
@@ -44,9 +46,10 @@
 
   const getVariableList = async () => {
     loading.value = true;
+    const { bkBizId, projectId, envId, appId, verisionId} = props;
     const [variableListRes, citedListRes] = await Promise.all([
-      getReleasedAppVariables(props.bkBizId, props.appId, props.verisionId),
-      getReleasedAppVariablesCitedDetail(props.bkBizId, props.appId, props.verisionId),
+      getReleasedAppVariables(bkBizId, projectId, envId, appId, verisionId),
+      getReleasedAppVariablesCitedDetail(bkBizId, projectId, envId, appId, verisionId),
     ]);
     variableList.value = variableListRes.details;
     citedList.value = citedListRes.details;
@@ -55,7 +58,13 @@
 
   // 导出变量
   const handleExport = async (type: string) => {
-    const res = await exportReleasedVaribles(props.bkBizId, props.appId, props.verisionId, type);
+    const res = await exportReleasedVaribles(
+      props.bkBizId,
+      props.projectId,
+      props.envId,
+      props.appId,
+      props.verisionId,
+      type);
     let content: any;
     let mimeType: string;
     let extension: string;
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config-kv.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config-kv.vue
index 76c8f3f8b..2890bf9d9 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config-kv.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config-kv.vue
@@ -51,7 +51,8 @@
                   :content="props.config.spec.value"
                   :editable="false"
                   :height="editorHeight"
-                  :languages="props.config.spec.kv_type" />
+                  :languages="props.config.spec.kv_type"
+                  :env-id="envId" />
               </div>
             </bk-form-item>
           </bk-form>
@@ -62,7 +63,8 @@
               language="json"
               :content="JSON.stringify(metaData, null, 2)"
               :editable="false"
-              :show-tips="false" />
+              :show-tips="false"
+              :env-id="envId" />
           </div>
         </bk-tab-panel>
       </bk-tab>
@@ -90,6 +92,7 @@
     config: IConfigKvType;
     show: boolean;
     showEditBtn?: boolean;
+    envId: string;
   }>();
 
   const emits = defineEmits(['update:show', 'confirm', 'openEdit']);
diff --git a/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue b/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
index be8e81beb..9a85b79ee 100644
--- a/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
+++ b/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
@@ -42,7 +42,8 @@
                 :editable="false"
                 :show-tips="false"
                 :height="editorHeight"
-                :variables="variables" />
+                :variables="variables"
+                :env-id="envId" />
             </bk-form-item>
           </bk-form>
         </bk-tab-panel>
@@ -51,7 +52,8 @@
             language="json"
             :content="JSON.stringify(configDetail, null, 2)"
             :editable="false"
-            :show-tips="false" />
+            :show-tips="false"
+            :env-id="envId" />
         </bk-tab-panel>
       </bk-tab>
     </bk-loading>
@@ -125,6 +127,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
     id: number;
     versionId: number;
@@ -200,8 +204,16 @@
   // 获取非模板套餐下配置文件详情配置，非文件类型配置文件内容下载内容，文件类型手动点击时再下载
   const getConfigDetail = async () => {
     try {
+      const { bkBizId, appId, projectId, envId, id } = props;
       if (versionData.value.id) {
-        const res = await getReleasedConfigItemDetail(props.bkBizId, props.appId, versionData.value.id, props.id);
+        const res = await getReleasedConfigItemDetail(
+          bkBizId,
+          appId,
+          projectId,
+          envId,
+          versionData.value.id,
+          id,
+        );
         const { content, memo } = res.config_item.commit_spec;
         const { byte_size, origin_byte_size, signature, origin_signature, md5 } = content;
         const { create_at, creator, update_at, reviser } = res.config_item.revision;
@@ -228,7 +240,7 @@
           // charset,
         });
       } else {
-        const res = await getConfigItemDetail(props.bkBizId, props.id, props.appId);
+        const res = await getConfigItemDetail(bkBizId, id, appId, projectId, envId);
         const { create_at, creator, update_at, reviser } = res.config_item.revision;
         const { name, memo, path, file_type, file_mode, permission } = res.config_item.spec;
         const { user, user_group, privilege } = permission;
@@ -258,7 +270,7 @@
       if (configDetail.value.file_type === 'binary') {
         content.value = { name: configDetail.value.name, size: configDetail.value.byte_size, signature };
       } else {
-        const configContent = await downloadConfigContent(props.bkBizId, props.appId, signature);
+        const configContent = await downloadConfigContent(bkBizId, appId, signature);
         content.value = String(configContent);
       }
     } catch (e) {
@@ -273,8 +285,14 @@
     try {
       detailLoading.value = true;
       let template_space_id;
+      const { bkBizId, appId, projectId, id } = props;
       if (versionData.value.id) {
-        const res = await getTemplateVersionDetail(props.bkBizId, props.appId, versionData.value.id, props.id);
+        const res = await getTemplateVersionDetail(
+          bkBizId,
+          projectId,
+          appId,
+          versionData.value.id,
+          id);
         delete res.detail.update_at;
         delete res.detail.reviser;
         configDetail.value = sortObjectKeysByAscii({
@@ -286,9 +304,9 @@
         let res;
         if (props.isLatest) {
           // 版本为latest拉取最新版本 不传递版本名
-          res = await getTemplateConfigMeta(props.bkBizId, props.id);
+          res = await getTemplateConfigMeta(bkBizId, projectId, id);
         } else {
-          res = await getTemplateConfigMeta(props.bkBizId, props.id, props.versionName);
+          res = await getTemplateConfigMeta(bkBizId, projectId, id, props.versionName);
         }
         configDetail.value = sortObjectKeysByAscii({
           ...props.templateMeta,
@@ -309,7 +327,7 @@
           size: String(configDetail.value.byte_size),
         };
       } else {
-        const configContent = await downloadTemplateContent(props.bkBizId, template_space_id, signature);
+        const configContent = await downloadTemplateContent(bkBizId, template_space_id, signature);
         content.value = String(configContent);
       }
     } catch (e) {
@@ -321,7 +339,8 @@
 
   const getVariableList = async () => {
     variablesLoading.value = true;
-    const res = await getReleasedAppVariables(props.bkBizId, props.appId, props.versionId);
+    const { bkBizId, appId, projectId, envId, versionId } = props;
+    const res = await getReleasedAppVariables(bkBizId, projectId, envId, appId, versionId);
     variables.value = res.details;
     variablesLoading.value = false;
   };
diff --git a/ui/src/views/space/service/detail/config/config-list/index.vue b/ui/src/views/space/service/detail/config/config-list/index.vue
index 21c7ebc7f..b9130fa0b 100644
--- a/ui/src/views/space/service/detail/config/config-list/index.vue
+++ b/ui/src/views/space/service/detail/config/config-list/index.vue
@@ -1,16 +1,29 @@
 <template>
   <div class="config-list-area">
-    <ConfigSimpleList v-if="versionDetailView" :bk-biz-id="props.bkBizId" :app-id="props.appId" />
-    <ConfigTableList v-else :bk-biz-id="props.bkBizId" :app-id="props.appId" />
+    <ConfigSimpleList
+      v-if="versionDetailView"
+      :bk-biz-id="props.bkBizId"
+      :project-id="props.projectId"
+      :env-id="props.envId"
+      :app-id="props.appId" />
+    <ConfigTableList
+      v-else
+      :bk-biz-id="props.bkBizId"
+      :project-id="props.projectId"
+      :env-id="props.envId"
+      :app-id="props.appId" />
   </div>
 </template>
 <script setup lang="ts">
   import ConfigSimpleList from './config-simple-list/index.vue';
+  // vue/html-closing-bracket-newline
   import ConfigTableList from './config-table-list/index.vue';
 
   const props = defineProps<{
     versionDetailView: boolean;
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 </script>
diff --git a/ui/src/views/space/service/detail/config/index.vue b/ui/src/views/space/service/detail/config/index.vue
index 67f116143..858bf4090 100644
--- a/ui/src/views/space/service/detail/config/index.vue
+++ b/ui/src/views/space/service/detail/config/index.vue
@@ -1,6 +1,11 @@
 <template>
   <section class="version-config-content">
-    <ConfigList :version-detail-view="versionDetailView" :bk-biz-id="props.bkBizId" :app-id="props.appId" />
+    <ConfigList
+      :version-detail-view="versionDetailView"
+      :bk-biz-id="props.bkBizId"
+      :project-id="projectId"
+      :env-id="envId"
+      :app-id="props.appId" />
   </section>
 </template>
 <script setup lang="ts">
@@ -12,6 +17,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 </script>
diff --git a/ui/src/views/space/service/detail/config/version-list-aside/index.vue b/ui/src/views/space/service/detail/config/version-list-aside/index.vue
index 241002634..54462af44 100644
--- a/ui/src/views/space/service/detail/config/version-list-aside/index.vue
+++ b/ui/src/views/space/service/detail/config/version-list-aside/index.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="version-list-aside">
-    <VersionTableList v-if="versionDetailView" :bk-biz-id="props.bkBizId" :app-id="props.appId" />
-    <VersionSimpleList v-else :bk-biz-id="props.bkBizId" :app-id="props.appId" />
+    <VersionTableList
+      v-if="versionDetailView"
+      :bk-biz-id="props.bkBizId"
+      :project-id="props.projectId"
+      :env-id="props.envId"
+      :app-id="props.appId" />
+    <VersionSimpleList
+      v-else
+      :bk-biz-id="props.bkBizId"
+      :project-id="props.projectId"
+      :env-id="props.envId"
+      :app-id="props.appId" />
   </div>
 </template>
 <script setup lang="ts">
@@ -11,6 +21,8 @@
   const props = defineProps<{
     versionDetailView: Boolean;
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 </script>
diff --git a/ui/src/views/space/service/detail/config/version-list-aside/version-simple-list.vue b/ui/src/views/space/service/detail/config/version-list-aside/version-simple-list.vue
index 5b62e477d..5cdcfbce0 100644
--- a/ui/src/views/space/service/detail/config/version-list-aside/version-simple-list.vue
+++ b/ui/src/views/space/service/detail/config/version-list-aside/version-simple-list.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="version-container">
     <div class="service-selector-wrapper">
-      <ServiceSelector ref="serviceSelectorRef" :value="props.appId" @change="handleAppChange">
+      <ServiceSelector ref="serviceSelectorRef" :value="props.appId" :env-id="envId" @change="handleAppChange">
         <template #trigger>
           <div class="selector-trigger">
             <input readonly :value="editingService.spec.name" />
@@ -61,7 +61,11 @@
         <TableEmpty v-if="searchStr && versionsInView.length === 0" :is-search-empty="true" @clear="searchStr = ''" />
       </section>
     </bk-loading>
-    <VersionDiff v-model:show="showDiffPanel" :current-version="currentOperatingVersion" />
+    <VersionDiff
+      v-model:show="showDiffPanel"
+      :project-id="projectId"
+      :env-id="envId"
+      :current-version="currentOperatingVersion" />
     <VersionOperateConfirmDialog
       v-model:show="showOperateConfirmDialog"
       :title="t('确认废弃该版本')"
@@ -120,6 +124,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 
@@ -140,6 +146,8 @@
   const editingService = ref<IAppItem>({
     id: 0,
     biz_id: 0,
+    project_id: 0,
+    env_id: 0,
     space_id: '',
     spec: {
       name: '',
@@ -203,7 +211,7 @@
         versionData.value = versionDetail;
         refreshVersionListFlag.value = false;
         // 默认选中新增的版本时，路由参数versionId需要更新
-        router.push({ name: route.name as string, params: { versionId: versionDetail.id } });
+        router.push({ name: route.name as string, params: { ...route.params, versionId: versionDetail.id } });
       }
     }
   });
@@ -223,7 +231,7 @@
     await getVersionList();
     if (pendingApprovalVersion.value) {
       versionData.value = pendingApprovalVersion.value;
-      router.push({ name: route.name as string, params: { versionId: versionData.value.id } });
+      router.push({ name: route.name as string, params: { ...route.params, versionId: versionData.value.id } });
     }
     if (route.params.versionId) {
       const version = versionList.value.find((item) => item.id === Number(route.params.versionId));
@@ -241,7 +249,7 @@
         start: 0,
         all: true,
       };
-      const res = await getConfigVersionList(props.bkBizId, props.appId, params);
+      const res = await getConfigVersionList(props.bkBizId, props.appId, props.projectId, props.envId, params);
       versionList.value = [unNamedVersion, ...res.data.details];
       const index = versionList.value.findIndex((version: IConfigVersion) =>
         version.status.released_groups.some((group) => group.id === 0),
@@ -261,7 +269,7 @@
         start: 0,
         all: true,
       };
-      const res = await getConfigVersionList(props.bkBizId, props.appId, params);
+      const res = await getConfigVersionList(props.bkBizId, props.appId, props.projectId, props.envId, params);
       versionList.value.forEach((version: IConfigVersion) => {
         const newVersion = res.data.details.find((item: IConfigVersion) => item.id === version.id);
         if (newVersion) {
@@ -278,9 +286,11 @@
       state.conflictFileCount = 0;
     });
     versionData.value = version;
-    const params: { spaceId: string; appId: number; versionId?: number } = {
+    const params: { spaceId: string; projectId: string; appId: number; envId: string; versionId?: number } = {
       spaceId: props.bkBizId,
+      projectId: props.projectId,
       appId: props.appId,
+      envId: props.envId,
     };
     if (version.id !== 0) {
       params.versionId = version.id;
@@ -306,7 +316,7 @@
   const handleDeprecateVersion = () =>
     new Promise(() => {
       const id = currentOperatingVersion.value.id;
-      deprecateVersion(props.bkBizId, props.appId, id).then(() => {
+      deprecateVersion(props.bkBizId, props.appId, props.projectId, props.envId, id).then(() => {
         showOperateConfirmDialog.value = false;
         Message({
           theme: 'success',
@@ -378,7 +388,7 @@
     }
     router.push({
       name,
-      params: { spaceId: service.space_id, appId: service.id },
+      params: { spaceId: service.space_id, appId: service.id, envId: props.envId },
     });
   };
 </script>
diff --git a/ui/src/views/space/service/detail/config/version-list-aside/version-table-list.vue b/ui/src/views/space/service/detail/config/version-list-aside/version-table-list.vue
index 0139f24c6..8f7e05e8c 100644
--- a/ui/src/views/space/service/detail/config/version-list-aside/version-table-list.vue
+++ b/ui/src/views/space/service/detail/config/version-list-aside/version-table-list.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="version-detail-table">
     <div class="service-selector-wrapper">
-      <ServiceSelector :value="props.appId" />
+      <ServiceSelector :value="props.appId" :env-id="envId" />
     </div>
     <div class="content-container">
       <div class="head-operate-wrapper">
@@ -46,6 +46,8 @@
                   v-else
                   placement="bottom-start"
                   :bk-biz-id="props.bkBizId"
+                  :project-id="projectId"
+                  :env-id="envId"
                   :app-id="props.appId"
                   :groups="row.status.released_groups">
                   <div>{{ getGroupNames(row) }}</div>
@@ -121,7 +123,11 @@
         </bk-table>
       </bk-loading>
     </div>
-    <VersionDiff v-model:show="showDiffPanel" :current-version="diffVersion" />
+    <VersionDiff
+      v-model:show="showDiffPanel"
+      :project-id="projectId"
+      :env-id="envId"
+      :current-version="diffVersion" />
     <VersionOperateConfirmDialog
       v-model:show="operateConfirmDialog.open"
       :title="operateConfirmDialog.title"
@@ -164,6 +170,8 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
+    envId: string;
     appId: number;
   }>();
 
@@ -210,7 +218,7 @@
     if (searchStr.value) {
       params.searchKey = searchStr.value;
     }
-    const res = await getConfigVersionList(props.bkBizId, props.appId, params);
+    const res = await getConfigVersionList(props.bkBizId, props.appId, props.projectId, props.envId, params);
     const count = isAvaliableView.value ? res.data.count + 1 : res.data.count;
     if (isAvaliableView.value && current === 1) {
       versionList.value = [UN_NAMED_VERSION, ...res.data.details];
@@ -250,9 +258,11 @@
     configStore.$patch((state) => {
       state.versionData = data;
     });
-    const params: { spaceId: string; appId: number; versionId?: number } = {
+    const params: { spaceId: string; projectId: string; appId: number; envId: string; versionId?: number } = {
       spaceId: props.bkBizId,
+      projectId: props.projectId,
       appId: props.appId,
+      envId: props.envId,
     };
     if (data.id !== 0) {
       params.versionId = data.id;
@@ -274,7 +284,7 @@
     operateConfirmDialog.value.version = version;
     operateConfirmDialog.value.confirmFn = () =>
       new Promise(() => {
-        deprecateVersion(props.bkBizId, props.appId, version.id).then(() => {
+        deprecateVersion(props.bkBizId, props.appId, props.projectId, props.envId, version.id).then(() => {
           operateConfirmDialog.value.open = false;
           Message({
             theme: 'success',
@@ -293,7 +303,7 @@
     operateConfirmDialog.value.version = version;
     operateConfirmDialog.value.confirmFn = () =>
       new Promise(() => {
-        undeprecateVersion(props.bkBizId, props.appId, version.id).then(() => {
+        undeprecateVersion(props.bkBizId, props.appId, props.projectId, props.envId, version.id).then(() => {
           operateConfirmDialog.value.open = false;
           Message({
             theme: 'success',
@@ -312,7 +322,7 @@
     operateConfirmDialog.value.version = version;
     operateConfirmDialog.value.confirmFn = () =>
       new Promise(() => {
-        deleteVersion(props.bkBizId, props.appId, version.id).then(() => {
+        deleteVersion(props.bkBizId, props.appId, props.projectId, props.envId, version.id).then(() => {
           operateConfirmDialog.value.open = false;
           Message({
             theme: 'success',
diff --git a/ui/src/views/space/service/detail/index.vue b/ui/src/views/space/service/detail/index.vue
index 215384fea..7bcedafa0 100644
--- a/ui/src/views/space/service/detail/index.vue
+++ b/ui/src/views/space/service/detail/index.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="service-detail-page">
+    <EnvAlertBar
+      :model-value="envId"
+      @change="handleEnvChange" />
     <div :class="['page-detail-content', { 'version-detail-view': versionDetailView }]">
       <div class="version-list-area">
-        <VersionListAside :version-detail-view="versionDetailView" :bk-biz-id="bkBizId" :app-id="appId" />
+        <VersionListAside
+          :version-detail-view="versionDetailView"
+          :bk-biz-id="bkBizId"
+          :project-id="projectId"
+          :env-id="envId"
+          :app-id="appId" />
         <div :class="['view-change-trigger', { extend: versionDetailView }]" @click="handleToggleView">
           <AngleDoubleRight class="arrow-icon" />
           <span :class="['text', { 'en-text': locale === 'en' }]">{{ t('版本详情') }} </span>
@@ -12,17 +20,25 @@
         <detail-header
           :class="{ 'version-detail-header': versionDetailView }"
           :bk-biz-id="bkBizId"
+          :project-id="projectId"
+          :env-id="envId"
           :app-id="appId"
           :version-detail-view="versionDetailView" />
         <div class="setting-content-container">
-          <router-view v-if="!appDataLoading" :bk-biz-id="bkBizId" :app-id="appId"></router-view>
+          <router-view
+            v-if="!appDataLoading"
+            :bk-biz-id="bkBizId"
+            :project-id="projectId"
+            :env-id="envId"
+            :app-id="appId">
+          </router-view>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-  import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import { onBeforeUnmount, onMounted, ref, watch, computed } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useI18n } from 'vue-i18n';
   import { storeToRefs } from 'pinia';
@@ -32,8 +48,10 @@
   import useConfigStore from '../../../../store/config';
   import { GET_UNNAMED_VERSION_DATA } from '../../../../constants/config';
   import { permissionCheck, getAppDetail } from '../../../../api';
+  import { IEnvItem } from '../../../../../types/env';
   import DetailHeader from './components/detail-header.vue';
   import VersionListAside from './config/version-list-aside/index.vue';
+  import EnvAlertBar from '../../../../components/env-alert-bar.vue';
   import { AxiosError } from 'axios';
 
   const route = useRoute();
@@ -46,8 +64,11 @@
   const { versionData, versionDetailView } = storeToRefs(configStore);
 
   const bkBizId = ref(String(route.params.spaceId));
+  const projectId = ref(String(route.params.projectId));
   const appId = ref(Number(route.params.appId));
   const appDataLoading = ref(true);
+  const env = ref<IEnvItem>();
+  const envId = computed(() => String(route.params.envId));
 
   watch(
     () => route.params.appId,
@@ -55,6 +76,7 @@
       if (val) {
         appId.value = Number(val);
         bkBizId.value = String(route.params.spaceId);
+        projectId.value = String(route.params.projectId);
         versionData.value = GET_UNNAMED_VERSION_DATA();
         getPermData();
         getAppData();
@@ -65,8 +87,6 @@
 
   onMounted(() => {
     getPermData();
-    getAppData();
-    setLastAccessedServiceDetail();
   });
 
   onBeforeUnmount(() => {
@@ -96,7 +116,7 @@
   const getAppData = async () => {
     appDataLoading.value = true;
     try {
-      const res = await getAppDetail(bkBizId.value, appId.value);
+      const res = await getAppDetail(bkBizId.value, projectId.value, envId.value, appId.value);
       serviceStore.$patch((state) => {
         state.appData = res;
       });
@@ -113,22 +133,43 @@
   };
 
   const setLastAccessedServiceDetail = () => {
-    localStorage.setItem('lastAccessedServiceDetail', JSON.stringify({ spaceId: bkBizId.value, appId: appId.value }));
+    localStorage.setItem('lastAccessedServiceDetail', JSON.stringify({ spaceId: bkBizId.value, projectId: projectId.value, envId: envId.value, appId: appId.value }));
   };
 
+  watch(
+    () => envId.value,
+    (val) => {
+      if (val) {
+        getAppData();
+        setLastAccessedServiceDetail();
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+
   // 切换视图
   const handleToggleView = () => {
     // 非配置管理tab切换为版本详情视图
     if (!versionDetailView.value && route.name !== 'service-config') {
-      router.push({ name: 'service-config', params: { spaceId: bkBizId.value, appId: appId.value } });
+      router.push({ name: 'service-config', params: { spaceId: bkBizId.value, appId: appId.value, envId: envId.value } });
     }
 
     // 版本详情视图下，选中版本为废弃版本时，切换到配置详情视图，需要默认选中未命名版本
     if (versionDetailView.value && versionData.value.spec.deprecated) {
-      router.push({ name: 'service-config', params: { spaceId: bkBizId.value, appId: appId.value, versionId: 0 } });
+      router.push({ name: 'service-config', params: { spaceId: bkBizId.value, appId: appId.value, envId: envId.value, versionId: 0 } });
     }
     versionDetailView.value = !versionDetailView.value;
   };
+
+  // 环境切换
+  const handleEnvChange = (envItem: IEnvItem, isManual?: boolean) => {
+    env.value = envItem;
+    if (isManual) {
+      router.push({ name: route.name, params: { ...route.params, envId: env.value.id } });
+    }
+  };
 </script>
 <style lang="scss" scoped>
   .service-detail-page {
@@ -137,7 +178,7 @@
   .page-detail-content {
     display: flex;
     align-items: top;
-    height: 100%;
+    height: calc(100% - 36px);
     &.version-detail-view {
       .version-list-area {
         width: calc(100% - 366px);
diff --git a/ui/src/views/space/service/detail/init-script/index.vue b/ui/src/views/space/service/detail/init-script/index.vue
index 931d57039..0b7467b20 100644
--- a/ui/src/views/space/service/detail/init-script/index.vue
+++ b/ui/src/views/space/service/detail/init-script/index.vue
@@ -101,7 +101,8 @@
   import ScriptEditor from '../../../scripts/components/script-editor.vue';
   import ScriptSelector from './script-selector.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  // @typescript-eslint/no-unused-vars
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const configStore = useConfigStore();
   const serviceStore = useServiceStore();
   const { versionData } = storeToRefs(configStore);
@@ -111,6 +112,7 @@
 
   const props = defineProps<{
     appId: number;
+    envId: string;
     cloneMode?: boolean;
   }>();
 
@@ -171,7 +173,7 @@
       start: 0,
       all: true,
     };
-    const res = await getScriptList(spaceId.value, params);
+    const res = await getScriptList(spaceId.value, projectId.value, params);
     const list = (res.details as IScriptItem[])
       .map((item) => ({
         id: item.hook.id,
@@ -187,7 +189,12 @@
   // 获取初始化脚本配置
   const getScriptSetting = async () => {
     scriptCiteDataLoading.value = true;
-    scriptCiteData.value = await getConfigScript(spaceId.value, props.appId, versionData.value.id);
+    scriptCiteData.value = await getConfigScript(
+      spaceId.value,
+      props.appId,
+      projectId.value,
+      props.envId,
+      versionData.value.id);
     scriptCiteDataLoading.value = false;
     formData.value = {
       pre: {
@@ -205,7 +212,7 @@
   // 获取脚本预览内容
   const getPreviewContent = async (scriptId: number, versionId: number) => {
     contentLoading.value = true;
-    const res = await getScriptVersionDetail(spaceId.value, scriptId, versionId);
+    const res = await getScriptVersionDetail(spaceId.value, projectId.value, scriptId, versionId);
     previewConfig.value.content = res.spec.content;
     contentLoading.value = false;
   };
@@ -227,7 +234,7 @@
       start: 0,
       all: true,
     };
-    const res = await getConfigList(spaceId.value, props.appId, params);
+    const res = await getConfigList(spaceId.value, props.appId, projectId.value, props.envId, params);
     return res.details.filter((item: any) => item.file_state !== 'DELETE').length;
   };
 
@@ -237,7 +244,7 @@
       start: 0,
       all: true,
     };
-    const res = await getBoundTemplates(spaceId.value, props.appId, params);
+    const res = await getBoundTemplates(spaceId.value, props.appId, projectId.value, props.envId, params);
     return res.details.reduce((acc: number, crt: IBoundTemplateGroup) => acc + crt.template_revisions.length, 0);
   };
 
@@ -288,7 +295,7 @@
         pre_hook_id: pre.id,
         post_hook_id: post.id,
       };
-      await updateConfigInitScript(spaceId.value, props.appId, params);
+      await updateConfigInitScript(spaceId.value, props.appId, projectId.value, props.envId, params);
       BkMessage({
         theme: 'success',
         message: t('初始化脚本设置成功'),
diff --git a/ui/src/views/space/service/list/components/card.vue b/ui/src/views/space/service/list/components/card.vue
index 4d0aaf03e..fe916a0e9 100644
--- a/ui/src/views/space/service/list/components/card.vue
+++ b/ui/src/views/space/service/list/components/card.vue
@@ -62,6 +62,7 @@
 
   const props = defineProps<{
     service: IAppItem;
+    envId: string;
   }>();
 
   const emits = defineEmits(['edit', 'update', 'delete']);
@@ -113,7 +114,7 @@
   };
 
   const goToDetail = () => {
-    router.push({ name: 'service-config', params: { spaceId: route.params.spaceId, appId: props.service.id } });
+    router.push({ name: 'service-config', params: { spaceId: route.params.spaceId, envId: props.envId, appId: props.service.id } });
   };
 </script>
 <style lang="scss" scoped>
diff --git a/ui/src/views/space/service/list/components/clone-service/import-config.vue b/ui/src/views/space/service/list/components/clone-service/import-config.vue
index 38455a58f..e99de5f7a 100644
--- a/ui/src/views/space/service/list/components/clone-service/import-config.vue
+++ b/ui/src/views/space/service/list/components/clone-service/import-config.vue
@@ -59,6 +59,7 @@
 
 <script lang="ts" setup>
   import { ref, onMounted, computed } from 'vue';
+  import { storeToRefs } from 'pinia';
   import type { IAppItem } from '../../../../../../../types/app';
   import type { IConfigVersion, IConfigImportItem, IConfigKvItem } from '../../../../../../../types/config';
   import {
@@ -68,6 +69,7 @@
   } from '../../../../../../api/config';
   import type { ImportTemplateConfigItem } from '../../../../../../../types/template';
   import ConfigSelector from '../../../../../../components/config-selector.vue';
+  import useGlobalStore from '../../../../../../store/global';
   import ConfigTable from '../../../../templates/list/package-detail/operations/add-configs/import-configs/config-table.vue';
   import TemplateConfigTable from '../../../detail/config/config-list/config-table-list/create-config/import-file/template-config-table.vue';
   import KvConfigTable from '../../../detail/config/config-list/config-table-list/create-config/import-kv/kv-config-table.vue';
@@ -77,6 +79,8 @@
     bkBizId: string;
   }>();
 
+  const { projectId, envId } = storeToRefs(useGlobalStore());
+
   const emits = defineEmits(['select']);
 
   const formData = ref({
@@ -112,7 +116,7 @@
         start: 0,
         all: true,
       };
-      const res = await getConfigVersionList(props.bkBizId, props.service.id!, params);
+      const res = await getConfigVersionList(props.bkBizId, props.service.id!, projectId.value, envId.value, params);
       versionList.value = res.data.details;
     } catch (e) {
       console.error(e);
@@ -140,7 +144,12 @@
         release_id: id,
       };
       if (isFileType.value) {
-        const res = await importFromHistoryVersion(props.bkBizId, props.service.id!, params);
+        const res = await importFromHistoryVersion(
+          props.bkBizId,
+          props.service.id!,
+          projectId.value,
+          envId.value,
+          params);
         res.data.non_template_configs.forEach((item: any) => {
           const config = {
             ...item,
@@ -162,7 +171,12 @@
           importTemplateConfigList.value.push(item);
         });
       } else {
-        const res = await importKvFromHistoryVersion(props.bkBizId, props.service.id!, params);
+        const res = await importKvFromHistoryVersion(
+          props.bkBizId,
+          props.service.id!,
+          projectId.value,
+          envId.value,
+          params);
         res.data.exist.forEach((item: IConfigKvItem) => {
           kvConfigList.value.push(item);
           importKvConfigList.value.push(item);
diff --git a/ui/src/views/space/service/list/components/clone-service/index.vue b/ui/src/views/space/service/list/components/clone-service/index.vue
index 9ebdf211b..8233b6a7b 100644
--- a/ui/src/views/space/service/list/components/clone-service/index.vue
+++ b/ui/src/views/space/service/list/components/clone-service/index.vue
@@ -22,7 +22,12 @@
         :bk-biz-id="spaceId"
         :service="service"
         @select="handleSelectConfig" />
-      <ImportScript v-show="stepsStatus.curStep === 3" :app-id="service.id!" clone-mode @select="handleSelectScript" />
+      <ImportScript
+        v-show="stepsStatus.curStep === 3"
+        :env-id="serviceEditForm.envId"
+        :app-id="service.id!"
+        clone-mode
+        @select="handleSelectScript" />
     </div>
     <div class="clone-app-footer">
       <bk-button v-if="stepsStatus.curStep > 1" @click="stepsStatus.curStep--">
@@ -45,6 +50,7 @@
   <CreateSuccessDialog
     v-model:is-show="isShowConfirmDialog"
     :bk-biz-id="spaceId"
+    :env-id="serviceEditForm.envId"
     :app-id="appId"
     :service-data="serviceEditForm"
     :is-create="false" />
@@ -77,7 +83,7 @@
   const isFormChange = ref(false);
   const pending = ref(false);
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const serviceEditForm = ref<IServiceEditForm>({
     name: '',
     alias: '',
@@ -87,6 +93,8 @@
     is_approve: true,
     approver: '',
     approve_type: 'or_sign',
+    projectId: '',
+    envId: '',
   });
   const scriptIds = ref({ pre_hook_id: 0, post_hook_id: 0 });
   const serviceFormRef = ref();
@@ -115,7 +123,7 @@
         stepsStatus.value.objectSteps = isFileType.value
           ? [{ title: t('填写服务信息') }, { title: t('导入配置项') }, { title: t('导入脚本') }]
           : [{ title: t('填写服务信息') }, { title: t('导入配置项') }];
-        const { spec } = props.service;
+        const { spec, env_id } = props.service;
         const { name, memo, config_type, data_type, alias, is_approve, approver, approve_type } = spec;
         serviceEditForm.value = {
           name: `${name}_copy`,
@@ -126,6 +134,8 @@
           is_approve,
           approver,
           approve_type,
+          projectId: projectId.value,
+          envId: String(env_id),
         };
         configList.value = [];
         templateConfigList.value = [];
@@ -210,22 +220,24 @@
             ...rest,
           });
         });
+        const { projectId, envId, ...other } = serviceEditForm.value;
         const query = {
-          ...serviceEditForm.value,
+          ...other,
           bindings: allTemplateConfigList,
           config_items: allConfigList,
           variables: allVariables,
           ...scriptIds.value,
         };
-        const res = await cloneApp(spaceId.value, query);
+        const res = await cloneApp(spaceId.value, projectId, envId, query);
         appId.value = res.id;
       } else {
         await configRef.value.validate();
+        const { projectId, envId, ...other } = serviceEditForm.value;
         const query = {
-          ...serviceEditForm.value,
+          ...other,
           kv_items: kvConfigList.value,
         };
-        const res = await cloneApp(spaceId.value, query);
+        const res = await cloneApp(spaceId.value, projectId, envId, query);
         appId.value = res.id;
       }
       emits('reload');
diff --git a/ui/src/views/space/service/list/components/create-service.vue b/ui/src/views/space/service/list/components/create-service.vue
index 3f4ad7791..3ee281733 100644
--- a/ui/src/views/space/service/list/components/create-service.vue
+++ b/ui/src/views/space/service/list/components/create-service.vue
@@ -21,6 +21,7 @@
   <CreateSuccessDialog
     v-model:is-show="isShowConfirmDialog"
     :bk-biz-id="spaceId"
+    :env-id="envId"
     :app-id="appId"
     :service-data="serviceData" />
 </template>
@@ -39,10 +40,11 @@
 
   const props = defineProps<{
     show: boolean;
+    envId: string;
   }>();
   const emits = defineEmits(['update:show', 'reload']);
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
 
   const serviceData = ref<IServiceEditForm>({
     name: '',
@@ -53,6 +55,8 @@
     is_approve: true,
     approver: '',
     approve_type: 'or_sign',
+    projectId: '',
+    envId: '',
     // encryptionSwtich: false,
     // encryptionKey: '',
   });
@@ -76,8 +80,8 @@
           is_approve: true,
           approver: '',
           approve_type: 'or_sign',
-          // encryptionSwtich: false,
-          // encryptionKey: '',
+          projectId: projectId.value,
+          envId: props.envId,
         };
       }
     },
@@ -93,7 +97,12 @@
     await formCompRef.value.validate();
     pending.value = false;
     try {
-      const resp = await createApp(spaceId.value, serviceData.value);
+      const { projectId, envId, ...other } = serviceData.value;
+      const resp = await createApp(
+        spaceId.value,
+        projectId,
+        envId,
+        other);
       appId.value = resp.id;
       emits('reload');
       isShowConfirmDialog.value = true;
@@ -119,7 +128,7 @@
 </script>
 <style lang="scss" scoped>
   .create-app-form {
-    padding: 20px 24px;
+    padding: 0 24px 20px;
     height: calc(100vh - 101px);
     overflow: auto;
   }
diff --git a/ui/src/views/space/service/list/components/create-success-dialog.vue b/ui/src/views/space/service/list/components/create-success-dialog.vue
index e1f9bca91..5cda09b32 100644
--- a/ui/src/views/space/service/list/components/create-success-dialog.vue
+++ b/ui/src/views/space/service/list/components/create-success-dialog.vue
@@ -34,6 +34,7 @@
   const props = withDefaults(
     defineProps<{
       bkBizId: string;
+      envId: string;
       appId: number;
       isShow: boolean;
       serviceData: IServiceEditForm;
@@ -55,6 +56,7 @@
         params: {
           spaceId: props.bkBizId,
           appId: props.appId,
+          envId: props.envId,
         },
       });
     }, 300);
diff --git a/ui/src/views/space/service/list/components/edit-service.vue b/ui/src/views/space/service/list/components/edit-service.vue
index ebe0374f9..b54ec5884 100644
--- a/ui/src/views/space/service/list/components/edit-service.vue
+++ b/ui/src/views/space/service/list/components/edit-service.vue
@@ -112,6 +112,8 @@
     is_approve: true,
     approver: '',
     approve_type: 'or_sign',
+    projectId: '',
+    envId: '',
   });
   const serviceData = ref<IAppItem>();
   const pending = ref(false);
@@ -134,7 +136,7 @@
       if (val) {
         isFormChange.value = false;
         isViewMode.value = true;
-        const { spec } = props.service;
+        const { spec, project_id, env_id } = props.service;
         const { name, memo, config_type, data_type, alias, is_approve, approver, approve_type } = spec;
         serviceEditForm.value = {
           name,
@@ -145,6 +147,8 @@
           is_approve,
           approver,
           approve_type,
+          projectId: String(project_id),
+          envId: String(env_id),
         };
         if (approver) {
           selectionsApprover.value = approver.split(',');
@@ -181,11 +185,16 @@
       return;
     }
     await formCompRef.value.validate();
-    const { id, biz_id } = props.service;
+    const { id, biz_id, project_id, env_id } = props.service;
     const dataType = serviceEditForm.value.data_type;
     const configType = serviceEditForm.value.config_type;
     if (configType === 'kv' && dataType !== 'any') {
-      const configList = await getKvList(String(biz_id), id as number, { all: true, start: 0 });
+      const configList = await getKvList(
+        String(biz_id),
+        id as number,
+        String(project_id),
+        String(env_id),
+        { all: true, start: 0 });
       const res = configList.details.some((config: IConfigKvType) => config.spec.kv_type !== dataType);
       if (res) {
         InfoBox({
@@ -210,7 +219,7 @@
       ...serviceEditForm.value,
     };
 
-    const res = await updateApp({ id, biz_id, data });
+    const res = await updateApp({ biz_id, projectId: String(project_id), envId: String(env_id), id, data });
     serviceData.value = res;
     Message({
       theme: 'success',
diff --git a/ui/src/views/space/service/list/components/service-form.vue b/ui/src/views/space/service/list/components/service-form.vue
index 928f6422b..d90d286d8 100644
--- a/ui/src/views/space/service/list/components/service-form.vue
+++ b/ui/src/views/space/service/list/components/service-form.vue
@@ -1,5 +1,50 @@
 <template>
   <bk-form form-type="vertical" ref="formRef" :model="localData" :rules="rules">
+    <!-- 项目和环境选择 -->
+    <div :class="`${cloneMode ? 'project-env-clone' : 'project-env-section'}`">
+      <div v-if="!cloneMode" class="section-hint">{{ t('服务将创建到以下项目和环境下') }}</div>
+      <div v-else>
+        <div class="clone-title">{{ t('选择克隆目标环境') }}</div>
+        <div class="clone-tip-top">{{ t('将源服务的配置克隆到以下环境中，创建为一个新的服务') }}</div>
+      </div>
+      <div class="project-env-row">
+        <!-- 项目选择器 -->
+        <bk-form-item
+          :label="t(`${cloneMode ? '目标' : '所属'}项目`)"
+          :required="!cloneMode"
+          property="projectId"
+          class="project-selector">
+          <bk-select
+            v-model="localData.projectId"
+            :clearable="false"
+            :filterable="true"
+            :disabled="true"
+            :loading="projectListLoading"
+            :placeholder="t('请选择项目')"
+            search-placeholder="搜索项目名称">
+            <bk-option
+              v-for="proj in projectList"
+              :key="proj.id"
+              :id="String(proj.id)"
+              :name="proj.spec.name" />
+          </bk-select>
+        </bk-form-item>
+        <!-- 环境选择器 -->
+        <bk-form-item
+          :label="t(`${cloneMode ? '目标' : '所属'}环境`)"
+          required
+          property="envId"
+          class="env-selector">
+          <env-selector
+            v-model="localData.envId"
+            :project-id="localData.projectId"
+            :placeholder="t('请选择环境')"
+            :disabled="true"
+            :use-default-trigger="true" />
+        </bk-form-item>
+      </div>
+      <div v-if="cloneMode" class="clone-tip-bottom">{{ t('当前版本仅支持克隆到当前项目') }}</div>
+    </div>
     <bk-form-item :label="t('form_服务名称')" property="name" required>
       <bk-input
         v-model="localData.name"
@@ -143,8 +188,15 @@
   import { CONFIG_KV_TYPE } from '../../../../../constants/config';
   import { Help, ExclamationCircleShape } from 'bkui-vue/lib/icon';
   import BkUserSelector from '../../../../../components/user-selector/index.vue';
+  import EnvSelector from '../../../../../components/env-selector.vue';
+  import type { IProjectItem } from '../../../../../../types/project';
+  import { storeToRefs } from 'pinia';
+  import useGlobalStore from '../../../../../store/global';
+  import { getProjectList } from '../../../../../api/project';
 
   const { t, locale } = useI18n();
+  const globalStore = useGlobalStore();
+  const { spaceId } = storeToRefs(globalStore);
 
   const emits = defineEmits(['change', 'approvalChange']);
 
@@ -198,6 +250,23 @@
   const approvalDialogShow = ref(false);
   const selectionsApprover = ref<string[]>([]);
   const selValidationError = ref(false);
+  const projectListLoading = ref(false);
+
+  // 项目数据
+  const projectList = ref<IProjectItem[]>([]);
+
+  // 获取项目列表
+  const fetchProjectList = async () => {
+    try {
+      projectListLoading.value = true;
+      const res = await getProjectList(spaceId.value, { all: true });
+      projectList.value = res.data?.projects || [];
+    } catch (e) {
+      console.error('获取项目列表失败', e);
+    } finally {
+      projectListLoading.value = false;
+    }
+  };
 
   watch(
     () => props.formData,
@@ -209,8 +278,9 @@
     },
   );
 
-  onBeforeMount(() => {
+  onBeforeMount(async () => {
     formatApprover();
+    await fetchProjectList();
   });
 
   // 审批开关
@@ -269,6 +339,49 @@
 </script>
 
 <style lang="scss" scoped>
+  .project-env-section {
+    position: relative;
+    left: -24px;
+    min-width: 640px;
+    padding: 24px;
+    margin-bottom: 24px;
+    background-color: #F5F7FA;
+    .section-hint {
+      margin-bottom: 12px;
+      color: #979BA5;
+      line-height: 20px;
+    }
+  }
+  .project-env-clone {
+    padding: 16px;
+    border-radius: 2px;
+    margin-bottom: 24px;
+    background-color: #F5F7FA;
+    .clone-title {
+      color: #4d4f56;
+      font-weight: 700;
+      line-height: 22px;
+      margin-bottom: 2px;
+    }
+    .clone-tip-top {
+      font-size: 12px;
+      color: #979BA5;
+      margin-bottom: 16px;
+    }
+    .clone-tip-bottom {
+      font-size: 12px;
+      color: #979BA5;
+      margin-top: 4px;
+    }
+  }
+  .project-env-row {
+    display: flex;
+    gap: 24px;
+    .project-selector, .env-selector {
+      flex: 1;
+      margin-bottom: 0;
+    }
+  }
   .type-select {
     width: 240px;
   }
diff --git a/ui/src/views/space/service/list/components/service-list-content.vue b/ui/src/views/space/service/list/components/service-list-content.vue
index 8b9d9edcb..f41f1b51a 100644
--- a/ui/src/views/space/service/list/components/service-list-content.vue
+++ b/ui/src/views/space/service/list/components/service-list-content.vue
@@ -59,6 +59,7 @@
                 v-for="service in serviceList"
                 :key="service.id"
                 :service="service"
+                :env-id="envId"
                 @edit="handleEditService"
                 @delete="handleDeleteService"
                 @update="handleDeletedUpdate" />
@@ -79,6 +80,7 @@
       <ServiceTable
         v-else
         :space-id="props.spaceId"
+        :env-id="envId"
         :data="serviceList"
         :pagination="pagination"
         :loading="isLoading"
@@ -97,7 +99,7 @@
         </template>
       </ServiceTable>
     </div>
-    <CreateService v-model:show="isCreateServiceOpen" @reload="loadAppList" />
+    <CreateService v-model:show="isCreateServiceOpen" :env-id="envId" @reload="loadAppList" />
     <EditService v-model:show="isEditServiceOpen" :service="editingService" @reload="loadAppList" />
     <CloneService v-model:show="isCloneServiceOpen" :service="editingService" @reload="loadAppList" />
     <bk-dialog
@@ -142,7 +144,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, computed, watch, onMounted } from 'vue';
+  import { ref, computed, watch } from 'vue';
   import { storeToRefs } from 'pinia';
   import { useI18n } from 'vue-i18n';
   import { Plus } from 'bkui-vue/lib/icon';
@@ -160,12 +162,13 @@
   import SearchSelector from '../../../../../components/search-selector.vue';
   import CloneService from './clone-service/index.vue';
 
-  const { permissionQuery, showApplyPermDialog } = storeToRefs(useGlobalStore());
+  const { permissionQuery, showApplyPermDialog, projectId } = storeToRefs(useGlobalStore());
   const { userInfo } = storeToRefs(useUserStore());
   const { t } = useI18n();
 
   const props = defineProps<{
     spaceId: string;
+    envId: string;
     permCheckLoading: boolean;
     hasCreateServicePerm: boolean;
   }>();
@@ -183,6 +186,8 @@
   const editingService = ref<IAppItem>({
     id: 0,
     biz_id: 0,
+    project_id: 0,
+    env_id: 0,
     space_id: '',
     spec: {
       name: '',
@@ -251,20 +256,17 @@
     },
   );
 
-  onMounted(() => {
-    loadAppList();
-  });
-
   // 加载服务列表
   const loadAppList = async () => {
     isLoading.value = true;
     try {
       const bizId = props.spaceId;
-      const resp = await getAppList(bizId, filters.value);
+      const envId = props.envId;
+      const resp = await getAppList(bizId, projectId.value, props.envId, filters.value);
       const { file_apps_count, kv_apps_count, details, count } = resp;
       if (details.length > 0) {
         const appIds = details.map((item: IAppItem) => item.id);
-        const appsConfigData = await getAppsConfigData(bizId, appIds);
+        const appsConfigData = await getAppsConfigData(bizId, projectId.value, envId, appIds);
         details.forEach((item: IAppItem, index: number) => {
           const { count, update_at } = appsConfigData.details[index];
           item.config = { count, update_at };
@@ -325,13 +327,26 @@
     loadAppList();
   };
 
+  // 监听环境变化，重新加载服务列表
+  watch(
+    () => props.envId,
+    (val) => {
+      if (val) {
+        refreshSeviceList();
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+
   // 删除服务
   const handleDeleteService = (service: IAppItem) => {
     deleteService.value = service;
     isShowDeleteDialog.value = true;
   };
   const handleDeleteConfirm = async () => {
-    await deleteApp(deleteService.value!.id as number, deleteService.value!.biz_id);
+    await deleteApp(props.spaceId, projectId.value, props.envId, deleteService.value!.id as number);
     Message({
       message: t('删除服务成功'),
       theme: 'success',
diff --git a/ui/src/views/space/service/list/components/service-table.vue b/ui/src/views/space/service/list/components/service-table.vue
index fafa1c6f4..c65ea8522 100644
--- a/ui/src/views/space/service/list/components/service-table.vue
+++ b/ui/src/views/space/service/list/components/service-table.vue
@@ -118,6 +118,7 @@
 
   const props = defineProps<{
     spaceId: string;
+    envId: string;
     data: IAppItem[];
     pagination: IPagination;
     loading: boolean;
@@ -150,7 +151,7 @@
 
   const handleJump = (id: number, name: string) => {
     if (name === 'service-config') {
-      router.push({ name, params: { spaceId: props.spaceId, appId: id } });
+      router.push({ name, params: { spaceId: props.spaceId, appId: id, envId: props.envId, } });
     } else {
       const routeData = router.resolve({
         name,
diff --git a/ui/src/views/space/service/list/index.vue b/ui/src/views/space/service/list/index.vue
index 7aaed9704..69aff039c 100644
--- a/ui/src/views/space/service/list/index.vue
+++ b/ui/src/views/space/service/list/index.vue
@@ -1,10 +1,15 @@
 <template>
-  <div class="service-wrap">
-    <ServiceListContent
-      :space-id="spaceId"
-      :perm-check-loading="permCheckLoading"
-      :has-create-service-perm="hasCreateServicePerm" />
-    <AppFooter />
+  <div>
+    <EnvAlertBar
+      @change="handleEnvChange" />
+    <div class="service-wrap">
+      <ServiceListContent
+        :space-id="spaceId"
+        :env-id="envId"
+        :perm-check-loading="permCheckLoading"
+        :has-create-service-perm="hasCreateServicePerm" />
+      <AppFooter />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -12,15 +17,24 @@
   import { storeToRefs } from 'pinia';
   import useGlobalStore from '../../../../store/global';
   import { permissionCheck } from '../../../../api/index';
+  import { IEnvItem } from '../../../../../types/env';
 
   import ServiceListContent from './components/service-list-content.vue';
   import AppFooter from '../../../../components/footer.vue';
+  import EnvAlertBar from '../../../../components/env-alert-bar.vue';
 
   const { spaceId } = storeToRefs(useGlobalStore());
 
   const hasCreateServicePerm = ref(false);
   const permCheckLoading = ref(false);
 
+  const envId = ref();
+  // 环境切换
+  const handleEnvChange = (env: IEnvItem) => {
+    envId.value = String(env.id);
+  };
+
+
   watch(
     () => spaceId.value,
     () => {
@@ -57,7 +71,7 @@
     display: flex;
     flex-direction: column;
     background: #f5f7fa;
-    height: calc(100vh - 52px);
+    height: calc(100vh - 88px);
     width: 100%;
   }
 </style>
diff --git a/ui/src/views/space/templates/list/package-detail/apps-bound-by-template.vue b/ui/src/views/space/templates/list/package-detail/apps-bound-by-template.vue
index caba7da9c..e107c64a5 100644
--- a/ui/src/views/space/templates/list/package-detail/apps-bound-by-template.vue
+++ b/ui/src/views/space/templates/list/package-detail/apps-bound-by-template.vue
@@ -49,6 +49,7 @@
   const props = defineProps<{
     show: boolean;
     spaceId: string;
+    projectId: string;
     currentTemplateSpace: number;
     config: { id: number; name: string };
   }>();
@@ -84,6 +85,7 @@
     }
     const res = await getUnNamedVersionAppsBoundByTemplate(
       props.spaceId,
+      props.projectId,
       props.currentTemplateSpace,
       props.config.id,
       params,
diff --git a/ui/src/views/space/templates/list/package-detail/index.vue b/ui/src/views/space/templates/list/package-detail/index.vue
index ef55d9da0..8891fb281 100644
--- a/ui/src/views/space/templates/list/package-detail/index.vue
+++ b/ui/src/views/space/templates/list/package-detail/index.vue
@@ -90,7 +90,7 @@
     height: 100%;
     &.with-apps-panel {
       .detail-container {
-        width: calc(100% - 240px);
+        width: calc(100% - 280px);
       }
       .use-package-apps {
         display: block;
diff --git a/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-button.vue b/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-button.vue
index 7fa7dddaa..a3e7e203e 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-button.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-button.vue
@@ -52,7 +52,7 @@
 
   const emits = defineEmits(['refresh']);
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace, currentPkg } = storeToRefs(useTemplateStore());
   const packageGroups = ref<IPackageTableGroup[]>([]); // 所有套餐配置文件数据
   const buttonRef = ref();
@@ -78,8 +78,8 @@
       all: true,
     };
     const [packagesRes, configsRes] = await Promise.all([
-      getTemplatePackageList(spaceId.value, currentTemplateSpace.value, params),
-      getTemplatesBySpaceId(spaceId.value, currentTemplateSpace.value, params),
+      getTemplatePackageList(spaceId.value, projectId.value, currentTemplateSpace.value, params),
+      getTemplatesBySpaceId(spaceId.value, projectId.value, currentTemplateSpace.value, params),
     ]);
     // 第一个分组默认为“全部配置文件”
     const packages: IPackageTableGroup[] = [
diff --git a/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue b/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
index fd8164bd2..0484a7d8f 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
@@ -77,7 +77,7 @@
     configs: ITemplateConfigItem[];
   }
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace, currentPkg } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -168,6 +168,7 @@
       const configIds = selectedConfigs.value.map((item) => item.id);
       await addTemplateToPackage(
         spaceId.value,
+        projectId.value,
         currentTemplateSpace.value,
         configIds,
         [currentPkg.value as number],
diff --git a/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue b/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
index daa46e8fd..518ca37b3 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
@@ -46,7 +46,7 @@
 
   const templateStore = useTemplateStore();
 
-  const { spaceId, spaceFeatureFlags } = storeToRefs(useGlobalStore());
+  const { spaceId, spaceFeatureFlags, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -107,7 +107,7 @@
         ...{ sign, byte_size: size },
         template_set_ids: pkgIds[0] === 0 ? [] : pkgIds,
       };
-      const res = await createTemplate(spaceId.value, currentTemplateSpace.value, params);
+      const res = await createTemplate(spaceId.value, projectId.value, currentTemplateSpace.value, params);
       templateStore.$patch((state) => {
         state.topIds = [res.data.id];
       });
diff --git a/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/select-package.vue b/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/select-package.vue
index 4376afb31..d4a74b7b5 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/select-package.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/select-package.vue
@@ -63,7 +63,7 @@
   import { getUnNamedVersionAppsBoundByPackages } from '../../../../../../../../api/template';
   import LinkToApp from '../../../../components/link-to-app.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace, currentPkg, packageList } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -126,6 +126,7 @@
     };
     const res = await getUnNamedVersionAppsBoundByPackages(
       spaceId.value,
+      projectId.value,
       currentTemplateSpace.value,
       selectedPkgs.value,
       params,
diff --git a/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/index.vue b/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/index.vue
index 13315fbea..f9e58ddf1 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/index.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/index.vue
@@ -126,7 +126,7 @@
   const templateStore = useTemplateStore();
 
   const emits = defineEmits(['update:show', 'added']);
-  const { spaceId, spaceFeatureFlags } = storeToRefs(useGlobalStore());
+  const { spaceId, spaceFeatureFlags, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace } = storeToRefs(useTemplateStore());
   const isShow = ref(false);
   const isFormChange = ref(false);
@@ -207,6 +207,7 @@
     try {
       const res = await importTemplateBatchAdd(
         spaceId.value,
+        projectId.value,
         currentTemplateSpace.value,
         [...existConfigList.value, ...nonExistConfigList.value],
         pkgIds[0] === 0 ? [] : pkgIds,
diff --git a/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/select-package.vue b/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/select-package.vue
index 9f2b14cf5..340ac0dbf 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/select-package.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/select-package.vue
@@ -84,7 +84,7 @@
   import { getCheckTemplateSetReferencesApps } from '../../../../../../../../api/template';
   import LinkToApp from '../../../../components/link-to-app.vue';
 
-  const { spaceId, spaceFeatureFlags } = storeToRefs(useGlobalStore());
+  const { spaceId, spaceFeatureFlags, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace, currentPkg, packageList } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -146,6 +146,7 @@
     loading.value = true;
     const res = await getCheckTemplateSetReferencesApps(
       spaceId.value,
+      projectId.value,
       currentTemplateSpace.value,
       selectedPkgs.value,
       props.configIdList,
diff --git a/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue b/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
index efaa86188..74887c15f 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
@@ -71,7 +71,7 @@
   import { addTemplateToPackage, getUnNamedVersionAppsBoundByPackages } from '../../../../../../../api/template';
   import LinkToApp from '../../../components/link-to-app.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { packageList, currentTemplateSpace, currentPkg } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -149,6 +149,7 @@
     };
     const res = await getUnNamedVersionAppsBoundByPackages(
       spaceId.value,
+      projectId.value,
       currentTemplateSpace.value,
       selectedPkgs.value,
       params,
@@ -178,6 +179,7 @@
       const templateIds = props.value.map((item) => item.id);
       await addTemplateToPackage(
         spaceId.value,
+        projectId.value,
         currentTemplateSpace.value,
         templateIds,
         selectedPkgs.value,
diff --git a/ui/src/views/space/templates/list/package-detail/operations/batch-operations/batch-operation-btn.vue b/ui/src/views/space/templates/list/package-detail/operations/batch-operations/batch-operation-btn.vue
index a5edf9617..9907dac8a 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/batch-operations/batch-operation-btn.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/batch-operations/batch-operation-btn.vue
@@ -87,6 +87,7 @@
 
   const props = defineProps<{
     spaceId: string;
+    projectId: string;
     currentTemplateSpace: number;
     configs: ITemplateConfigItem[];
     pkgType: string;
@@ -152,7 +153,7 @@
         template_set_id: props.currentPkg !== undefined ? props.currentPkg : 0,
         no_set_specified: props.pkgType === 'without',
       };
-      await batchEditTemplatePermission(bkBizId.value, query);
+      await batchEditTemplatePermission(bkBizId.value, props.projectId, query);
       Message({
         theme: 'success',
         message: t('配置文件权限批量修改成功'),
diff --git a/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue b/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
index 69fa8da1a..9bd80e081 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
@@ -53,7 +53,7 @@
   import { ITemplateConfigItem } from '../../../../../../../../types/template';
   import { deleteTemplate } from '../../../../../../../api/template';
   import DeleteConfirmDialog from '../../../../../../../components/delete-confirm-dialog.vue';
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -82,7 +82,7 @@
     try {
       pending.value = true;
       const ids = props.configs.map((config) => config.id);
-      await deleteTemplate(spaceId.value, currentTemplateSpace.value, ids, props.isAcrossChecked);
+      await deleteTemplate(spaceId.value, projectId.value, currentTemplateSpace.value, ids, props.isAcrossChecked);
       close();
       setTimeout(() => {
         emits('deleted');
diff --git a/ui/src/views/space/templates/list/package-detail/operations/download-config/download-config.vue b/ui/src/views/space/templates/list/package-detail/operations/download-config/download-config.vue
index af3a66135..25c2052aa 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/download-config/download-config.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/download-config/download-config.vue
@@ -16,6 +16,7 @@
   const props = withDefaults(
     defineProps<{
       spaceId: string;
+      projectId: string;
       templateSpaceId: number;
       templateId: number;
       theme: string;
@@ -32,7 +33,7 @@
     if (pending.value) return;
     try {
       pending.value = true;
-      const res = await getTemplateVersionsNameByIds(props.spaceId, [props.templateId]);
+      const res = await getTemplateVersionsNameByIds(props.spaceId, props.projectId, [props.templateId]);
       const { template_name, latest_signature, latest_revision_name } = res.details[0];
       const content = await downloadTemplateContent(props.spaceId, props.templateSpaceId, latest_signature, true);
       fileDownload(content, `${template_name}_${latest_revision_name}`);
diff --git a/ui/src/views/space/templates/list/package-detail/operations/edit-config/edit-config.vue b/ui/src/views/space/templates/list/package-detail/operations/edit-config/edit-config.vue
index 2d075938f..27cc97449 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/edit-config/edit-config.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/edit-config/edit-config.vue
@@ -53,6 +53,7 @@
   const props = defineProps<{
     id: number;
     spaceId: string;
+    projectId: string;
     show: Boolean;
     memo: string;
   }>();
@@ -88,7 +89,7 @@
   const getConfigDetail = async () => {
     try {
       configDetailLoading.value = true;
-      const res = await getTemplateConfigMeta(props.spaceId, props.id);
+      const res = await getTemplateConfigMeta(props.spaceId, props.projectId, props.id);
       const {
         name,
         path,
@@ -157,6 +158,7 @@
       };
       await updateTemplateConfig(
         props.spaceId,
+        props.projectId,
         currentTemplateSpace.value,
         props.id,
         formData as ITemplateVersionEditingData,
diff --git a/ui/src/views/space/templates/list/package-detail/operations/edit-permission/edit-permission-dialog.vue b/ui/src/views/space/templates/list/package-detail/operations/edit-permission/edit-permission-dialog.vue
index 33a1d0682..49e22e389 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/edit-permission/edit-permission-dialog.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/edit-permission/edit-permission-dialog.vue
@@ -107,7 +107,7 @@
   import useTemplateStore from '../../../../../../../store/template';
   import LinkToApp from '../../../components/link-to-app.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace, currentPkg } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
   const router = useRouter();
@@ -215,7 +215,7 @@
   // 配置项被套餐引用数据
   const loadCiteByPkgsCountList = async () => {
     const ids = props.configs!.map((item) => item.id);
-    const res = await getPackagesByTemplateIds(spaceId.value, currentTemplateSpace.value, ids);
+    const res = await getPackagesByTemplateIds(spaceId.value, projectId.value, currentTemplateSpace.value, ids);
     res.details.forEach((item) =>
       item.forEach((template) => {
         if (pkgsIds.value?.includes(template.template_set_id)) return;
@@ -236,6 +236,7 @@
     const template_set_ids: number[] = currentPkg.value === 'all' ? pkgsIds.value : [currentPkg.value as number];
     const res = await getUnNamedVersionAppsBoundByPackages(
       spaceId.value,
+      projectId.value,
       currentTemplateSpace.value,
       template_set_ids,
       params,
diff --git a/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue b/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
index 36cc71916..539f80c74 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
@@ -44,7 +44,7 @@
   import { moveOutTemplateFromPackage, getUnNamedVersionAppsBoundByPackages } from '../../../../../../../api/template';
   import LinkToApp from '../../../components/link-to-app.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { packageList, currentTemplateSpace } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -93,6 +93,7 @@
     };
     const res = await getUnNamedVersionAppsBoundByPackages(
       spaceId.value,
+      projectId.value,
       currentTemplateSpace.value,
       [props.currentPkg],
       params,
@@ -111,6 +112,7 @@
       const ids = props.value.map((item) => item.id);
       await moveOutTemplateFromPackage(
         spaceId.value,
+        projectId.value,
         currentTemplateSpace.value,
         ids,
         [props.currentPkg as number],
diff --git a/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue b/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
index 9a2107c7c..146a81b6d 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
@@ -73,7 +73,7 @@
     appNames: string;
   }
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -112,7 +112,11 @@
 
   const getCitedData = async () => {
     loading.value = true;
-    const citedPkgsRes = await getPackagesByTemplateIds(spaceId.value, currentTemplateSpace.value, [props.id]);
+    const citedPkgsRes = await getPackagesByTemplateIds(
+      spaceId.value,
+      projectId.value,
+      currentTemplateSpace.value,
+      [props.id]);
     if (citedPkgsRes.details.length === 1) {
       const pkgs = citedPkgsRes.details[0].map((item) => item.template_set_id);
       const params = {
@@ -122,6 +126,7 @@
       let list: ICitedItem[] = [];
       const citedAppsRes = await getUnNamedVersionAppsBoundByPackages(
         spaceId.value,
+        projectId.value,
         currentTemplateSpace.value,
         pkgs,
         params,
@@ -189,6 +194,7 @@
       pending.value = true;
       await moveOutTemplateFromPackage(
         spaceId.value,
+        projectId.value,
         currentTemplateSpace.value,
         [props.id],
         selectedPkgs.value,
diff --git a/ui/src/views/space/templates/list/package-detail/operations/view-config/view-config.vue b/ui/src/views/space/templates/list/package-detail/operations/view-config/view-config.vue
index 49b4f0c64..208fbe1bd 100644
--- a/ui/src/views/space/templates/list/package-detail/operations/view-config/view-config.vue
+++ b/ui/src/views/space/templates/list/package-detail/operations/view-config/view-config.vue
@@ -108,6 +108,7 @@
   const props = defineProps<{
     id: number;
     spaceId: string;
+    projectId: string;
     show: Boolean;
     memo: string;
   }>();
@@ -163,7 +164,7 @@
   const getTemplateDetail = async () => {
     try {
       detailLoading.value = true;
-      const res = await getTemplateConfigMeta(props.spaceId, props.id);
+      const res = await getTemplateConfigMeta(props.spaceId, props.projectId, props.id);
       configDetail.value = sortObjectKeysByAscii({
         ...res.data.detail,
         create_at: datetimeFormat(res.data.detail.create_at),
diff --git a/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue b/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
index 1b07c5c79..2cd601443 100644
--- a/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
+++ b/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
@@ -118,6 +118,7 @@
                         theme=""
                         :text="$t('下载模板文件')"
                         :space-id="spaceId"
+                        :project-id="projectId"
                         :template-space-id="currentTemplateSpace"
                         :template-id="row.id" />
                       <div v-if="props.showDeleteAction" class="action-item" @click="handleDeleteClick(row)">
@@ -151,6 +152,7 @@
     <AppsBoundByTemplate
       v-model:show="appBoundByTemplateSliderData.open"
       :space-id="spaceId"
+      :project-id="projectId"
       :current-template-space="currentTemplateSpace"
       :config="appBoundByTemplateSliderData.data" />
     <DeleteConfigDialog
@@ -162,6 +164,7 @@
     <ViewConfig
       v-model:show="isViewConfigShow"
       :space-id="spaceId"
+      :project-id="projectId"
       :id="viewConfig?.id as number"
       :memo="selectConfigMemo"
       @open-edit="handleEditConfig(viewConfig as ITemplateConfigItem)" />
@@ -169,6 +172,7 @@
       v-model:show="isEditConfigShow"
       :memo="selectConfigMemo"
       :space-id="spaceId"
+      :project-id="projectId"
       :id="editConfigId"
       @edited="refreshList" />
   </div>
@@ -207,7 +211,7 @@
 
   const router = useRouter();
   const { t, locale } = useI18n();
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const templateStore = useTemplateStore();
   const { currentTemplateSpace, topIds } = storeToRefs(templateStore);
   const { pagination, updatePagination } = useTablePagination('commonConfigTable');
@@ -337,14 +341,14 @@
   // 配置项被套餐引用数据
   const loadCiteByPkgsCountList = async (ids: number[]) => {
     citedByPkgsLoading.value = true;
-    const res = await getPackagesByTemplateIds(spaceId.value, currentTemplateSpace.value, ids);
+    const res = await getPackagesByTemplateIds(spaceId.value, projectId.value, currentTemplateSpace.value, ids);
     citeByPkgsList.value = res.details;
     citedByPkgsLoading.value = false;
   };
 
   const loadBoundByAppsList = async (ids: number[]) => {
     boundByAppsCountLoading.value = true;
-    const res = await getCountsByTemplateIds(spaceId.value, currentTemplateSpace.value, ids);
+    const res = await getCountsByTemplateIds(spaceId.value, projectId.value, currentTemplateSpace.value, ids);
     boundByAppsCountList.value = res.details;
     boundByAppsCountLoading.value = false;
   };
diff --git a/ui/src/views/space/templates/list/package-detail/tables/config-in-all.vue b/ui/src/views/space/templates/list/package-detail/tables/config-in-all.vue
index 400661c18..214b093a6 100644
--- a/ui/src/views/space/templates/list/package-detail/tables/config-in-all.vue
+++ b/ui/src/views/space/templates/list/package-detail/tables/config-in-all.vue
@@ -18,6 +18,7 @@
       <AddConfigs @refresh="refreshConfigList" />
       <BatchOperationButton
         :space-id="spaceId"
+        :project-id="projectId"
         :configs="selectedConfigs"
         :current-template-space="currentTemplateSpace"
         pkg-type="all"
@@ -39,7 +40,7 @@
   import AddConfigs from '../operations/add-configs/add-button.vue';
   import BatchOperationButton from '../operations/batch-operations/batch-operation-btn.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const templateStore = useTemplateStore();
   const { currentTemplateSpace } = storeToRefs(templateStore);
 
@@ -52,7 +53,7 @@
 
   const getConfigList = (params: ICommonQuery) => {
     console.log('All Config List Loading');
-    return getTemplatesBySpaceId(spaceId.value, currentTemplateSpace.value, params);
+    return getTemplatesBySpaceId(spaceId.value, projectId.value, currentTemplateSpace.value, params);
   };
 
   const refreshConfigList = (createConfig = false) => {
diff --git a/ui/src/views/space/templates/list/package-detail/tables/config-in-package.vue b/ui/src/views/space/templates/list/package-detail/tables/config-in-package.vue
index 48a4d3815..106ed5740 100644
--- a/ui/src/views/space/templates/list/package-detail/tables/config-in-package.vue
+++ b/ui/src/views/space/templates/list/package-detail/tables/config-in-package.vue
@@ -24,6 +24,7 @@
         :is-file-type="false" />
       <BatchOperationButton
         :space-id="spaceId"
+        :project-id="projectId"
         :configs="selectedConfigs"
         :current-template-space="currentTemplateSpace"
         pkg-type="pkg"
@@ -55,7 +56,7 @@
   import BatchOperationButton from '../operations/batch-operations/batch-operation-btn.vue';
   import CountTips from '../../../../service/detail/config/components/count-tips.vue';
 
-  const { spaceId, spaceFeatureFlags } = storeToRefs(useGlobalStore());
+  const { spaceId, spaceFeatureFlags, projectId } = storeToRefs(useGlobalStore());
   const templateStore = useTemplateStore();
   const { currentTemplateSpace, currentPkg, currentPkgName, countOfTemplatesForCurrentPackage } =
     storeToRefs(templateStore);
@@ -70,7 +71,8 @@
 
   const getConfigList = (params: ICommonQuery) => {
     console.log('Package Config List Loading', currentTemplateSpace.value);
-    return getTemplatesByPackageId(spaceId.value, currentTemplateSpace.value, currentPkg.value as number, params);
+    return getTemplatesByPackageId(
+      spaceId.value, projectId.value, currentTemplateSpace.value, currentPkg.value as number, params);
   };
 
   const handleMovedOut = () => {
@@ -97,7 +99,11 @@
   const handleExportPakage = async () => {
     try {
       exportLoading.value = true;
-      const res = await exportTemplatePackage(spaceId.value, currentTemplateSpace.value, currentPkg.value as number);
+      const res = await exportTemplatePackage(
+        spaceId.value,
+        projectId.value,
+        currentTemplateSpace.value,
+        currentPkg.value as number);
       downloadFile(res, 'application/zip', `${currentPkgName.value}.zip`);
     } catch (error) {
       console.error(error);
diff --git a/ui/src/views/space/templates/list/package-detail/tables/config-without-package.vue b/ui/src/views/space/templates/list/package-detail/tables/config-without-package.vue
index 39c87d4ba..9af56422b 100644
--- a/ui/src/views/space/templates/list/package-detail/tables/config-without-package.vue
+++ b/ui/src/views/space/templates/list/package-detail/tables/config-without-package.vue
@@ -18,6 +18,7 @@
     <template #tableOperations>
       <BatchOperationButton
         :space-id="spaceId"
+        :project-id="projectId"
         :configs="selectedConfigs"
         :current-template-space="currentTemplateSpace"
         pkg-type="without"
@@ -39,7 +40,7 @@
   import CommonConfigTable from './common-config-table.vue';
   import BatchOperationButton from '../operations/batch-operations/batch-operation-btn.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const templateStore = useTemplateStore();
   const { currentTemplateSpace } = storeToRefs(templateStore);
 
@@ -51,7 +52,7 @@
   });
 
   const getConfigList = (params: ICommonQuery) => {
-    const res = getTemplatesWithNoSpecifiedPackage(spaceId.value, currentTemplateSpace.value, params);
+    const res = getTemplatesWithNoSpecifiedPackage(spaceId.value, projectId.value, currentTemplateSpace.value, params);
     return res;
   };
 
diff --git a/ui/src/views/space/templates/list/package-detail/use-package-apps.vue b/ui/src/views/space/templates/list/package-detail/use-package-apps.vue
index 97e48b691..83850107a 100644
--- a/ui/src/views/space/templates/list/package-detail/use-package-apps.vue
+++ b/ui/src/views/space/templates/list/package-detail/use-package-apps.vue
@@ -1,29 +1,54 @@
 <template>
   <div class="use-package-apps">
-    <bk-select
-      :value="''"
-      :disabled="tplCounts === 0"
-      :filterable="true"
-      :input-search="false"
-      :search-placeholder="$t('请输入关键字')">
-      <template #trigger>
-        <div
-          :class="['select-app-trigger', { disabled: tplCounts === 0 }]"
-          v-bk-tooltips="{
-            disabled: tplCounts > 0,
-            content: t('该套餐中没有可用配置文件，无法被导入到服务配置中'),
-          }">
-          <Plus class="plus-icon" />
-          {{ t('新服务中使用') }}
-        </div>
-      </template>
-      <bk-option v-for="app in unBoundApps" :key="app.id" :id="app.id" :label="app.spec.name">
-        <div class="app-option" @click="goToConfigPageImport(app.id as number)">
-          <div class="name-text">{{ app.spec.name }}</div>
-          <LinkToApp class="link-icon" :id="app.id as number" />
-        </div>
-      </bk-option>
-    </bk-select>
+    <div
+      v-if="!showForm"
+      :class="['select-app-trigger', { disabled: tplCounts === 0 }]"
+      v-bk-tooltips="{
+        disabled: tplCounts > 0,
+        content: t('该套餐中没有可用配置文件，无法被导入到服务配置中'),
+      }"
+      @click="handleTriggerClick">
+      <Plus class="plus-icon" />
+      {{ t('新服务中使用') }}
+    </div>
+    <div v-else class="form-panel">
+      <bk-form ref="formRef" :model="formData" :rules="rules" form-type="vertical">
+        <!-- 所属环境 -->
+        <bk-form-item :label="t('所属环境')" required property="envId">
+          <env-selector
+            v-model="formData.envId"
+            :placeholder="t('请选择环境')"
+            :use-default-trigger="true"
+            @change="handleEnvChange" />
+        </bk-form-item>
+        <!-- 待使用模板套餐的服务 -->
+        <bk-form-item :label="t('待使用模板套餐的服务')" property="appId" required>
+          <bk-select
+            v-model="formData.appId"
+            :placeholder="formData.envId ? t('请选择服务') : t('请先选择环境')"
+            :disabled="!formData.envId"
+            :filterable="true"
+            :input-search="false">
+            <bk-option
+              v-for="app in unBoundApps"
+              :key="app.id"
+              :id="app.id"
+              :label="app.spec.name" />
+          </bk-select>
+        </bk-form-item>
+      </bk-form>
+      <!-- 按钮区域 -->
+      <div class="form-actions">
+        <bk-button
+          theme="primary"
+          :disabled="!formData.envId || !formData.appId"
+          @click="handleConfirm">
+            <LinkToApp class="link-icon" :id="formData.appId as number" />
+            <span>{{ t('前往服务使用') }}</span>
+        </bk-button>
+        <bk-button @click="handleCancel">{{ t('取消') }}</bk-button>
+      </div>
+    </div>
     <div class="table-wrapper">
       <bk-loading :loading="boundAppsLoading">
         <div class="refresh-header">
@@ -33,9 +58,25 @@
         <bk-table :border="['outer']" :data="boundApps" :thead="{ isShow: false }" :empty-text="t('暂无数据')">
           <bk-table-column label="">
             <template #default="{ row }">
-              <div v-if="row.app_id" class="app-info" @click="goToConfigPageImport(row.app_id)">
-                <div v-overflow-title class="name-text">{{ row.app_name }}</div>
-                <LinkToApp class="link-icon" :id="row.app_id" />
+              <div v-if="row.app_id" class="app-info">
+                <div class="app-info-left" @click="goToConfigPageImport(row.app_id, row.env_id)">
+                  <div v-overflow-title class="name-text">{{ row.app_name }}</div>
+                  <LinkToApp class="link-icon" :id="row.app_id" />
+                </div>
+                 <!-- 环境标签 -->
+                <div
+                  v-if="row.env_display"
+                  class="env-tag"
+                  :style="{
+                    backgroundColor: ENV_TYPE_CONFIG?.[getEnvObj(row.env_display).type]?.bgColor || '#F5F7FA',
+                    color: ENV_TYPE_CONFIG?.[getEnvObj(row.env_display).type]?.textColor || '#63656E',
+                  }">
+                  <i
+                    :class="
+                      `bk-bscp-icon ${ENV_TYPE_CONFIG?.[getEnvObj(row.env_display).type]?.iconClass || ''} env-icon`"
+                    :style="{ color: ENV_TYPE_CONFIG?.[getEnvObj(row.env_display).type]?.iconColor || '#979BA5' }"></i>
+                  {{ getEnvObj(row.env_display).envName }}
+                </div>
               </div>
             </template>
           </bk-table-column>
@@ -60,19 +101,49 @@
   import { IAppItem } from '../../../../../../types/app';
   import { IPackageCitedByApps } from '../../../../../../types/template';
   import LinkToApp from '../components/link-to-app.vue';
+  import EnvSelector from '../../../../../components/env-selector.vue';
+  import { ENV_TYPE_CONFIG } from '../../../../../constants/env';
+  import { getEnvObj } from '../../../../../utils/env';
 
   const router = useRouter();
   const { t } = useI18n();
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   // const { userInfo } = storeToRefs(useUserStore());
   const templateStore = useTemplateStore();
   const { currentTemplateSpace, currentPkg } = storeToRefs(templateStore);
 
-  defineProps<{
+  const props = defineProps<{
     tplCounts: number;
   }>();
 
+  // 表单相关状态
+  const showForm = ref(false);
+  const formRef = ref<any>(null);
+  const formData = ref<{
+    envId: string;
+    appId: number | undefined;
+  }>({
+    envId: '',
+    appId: undefined,
+  });
+  const rules = {
+    env: [
+      {
+        validator: (value: string) => !!value,
+        message: t('请选择所属环境'),
+        trigger: 'blur',
+      },
+    ],
+    appId: [
+      {
+        validator: (value: number | undefined) => value !== undefined,
+        message: t('请选择待使用模板套餐的服务'),
+        trigger: 'blur',
+      },
+    ],
+  };
+
   const userApps = ref<IAppItem[]>([]);
   const userAppListLoading = ref(false);
   const boundApps = ref<IPackageCitedByApps[]>([]);
@@ -95,7 +166,6 @@
 
   onMounted(() => {
     getBoundApps();
-    getUserApps();
   });
 
   const getUserApps = async () => {
@@ -104,7 +174,7 @@
       start: 0,
       all: true,
     };
-    const res = await getAppList(spaceId.value, params);
+    const res = await getAppList(spaceId.value, projectId.value, formData.value.envId,  params);
     userApps.value = res.details;
     userAppListLoading.value = false;
   };
@@ -118,6 +188,7 @@
     };
     const res = await getUnNamedVersionAppsBoundByPackage(
       spaceId.value,
+      projectId.value,
       currentTemplateSpace.value,
       currentPkg.value as number,
       params,
@@ -126,19 +197,51 @@
     boundAppsLoading.value = false;
   };
 
-  const goToConfigPageImport = (id: number) => {
+  const goToConfigPageImport = (id: number, envId: number | string, isOpenDialog = '0') => {
     const { href } = router.resolve({
       name: 'service-config',
-      params: { appId: id },
-      query: { pkg_id: currentPkg.value },
+      params: { appId: id, envId },
+      query: { pkg_id: currentPkg.value, isOpenDialog },
     });
     window.open(href, '_blank');
   };
+
+  // 点击「新服务中使用」按钮
+  const handleTriggerClick = () => {
+    if (props.tplCounts === 0) return;
+    showForm.value = true;
+  };
+
+  // 环境变化
+  const handleEnvChange = () => {
+    formData.value.appId = undefined;
+    getUserApps();
+  };
+
+  // 确认：前往服务使用
+  const handleConfirm = async () => {
+    const result = await formRef.value?.validate();
+    if (!result) return;
+    const { envId, appId } = formData.value;
+    // 跳转至服务配置页面
+    goToConfigPageImport(appId as number, envId, '1');
+    handleCancel();
+  };
+
+  // 取消：返回默认状态
+  const handleCancel = () => {
+    showForm.value = false;
+    formRef.value?.clearValidate();
+    formData.value = {
+      envId: '',
+      appId: undefined,
+    };
+  };
 </script>
 <style lang="scss" scoped>
   .use-package-apps {
     padding: 16px 24px;
-    width: 240px;
+    width: 280px;
     height: 100%;
     background: #ffffff;
   }
@@ -147,7 +250,6 @@
     align-items: center;
     justify-content: center;
     padding: 5px;
-    width: 192px;
     height: 32px;
     line-height: 22px;
     border: 1px solid #c4c6cc;
@@ -165,8 +267,16 @@
       font-size: 20px;
     }
   }
-  .app-option,
   .app-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .app-info-left {
+    flex: 1;
+  }
+  .app-option,
+  .app-info-left {
     display: flex;
     align-items: center;
     overflow: hidden;
@@ -174,10 +284,20 @@
   }
   .table-wrapper {
     margin-top: 16px;
-    .app-info {
+    .app-info-left {
       display: flex;
       align-items: center;
       overflow: hidden;
+      &:hover {
+        .link-icon {
+          visibility: visible;
+        }
+      }
+    }
+    .link-icon {
+      visibility: hidden;
+      flex-shrink: 0;
+      margin-left: 10px;
     }
     .table-pagination {
       margin-top: 16px;
@@ -211,9 +331,18 @@
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .link-icon {
-    flex-shrink: 0;
-    margin-left: 10px;
+  // 环境标签样式
+  .env-tag {
+    padding: 2px 6px;
+    margin-left: 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
+
+    .env-icon {
+      font-size: 16px;
+    }
   }
   .rotate {
     animation: rotate 0.5s infinite linear;
@@ -227,4 +356,30 @@
       transform: rotate(360deg);
     }
   }
+
+  // 表单面板样式
+  .form-panel {
+    padding: 12px 16px 16px;
+    border-radius: 2px;
+    background-color: #F5F7FA;
+    .form-title {
+      margin-bottom: 16px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #313238;
+    }
+    .form-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 24px;
+      .bk-button + .bk-button {
+        flex: 1;
+      }
+      .link-icon {
+        color: #fff;
+        margin-left: 0;
+        margin-right: 6px;
+      }
+    }
+  }
 </style>
diff --git a/ui/src/views/space/templates/list/package-menu/menu.vue b/ui/src/views/space/templates/list/package-menu/menu.vue
index de233f306..708de9f0b 100644
--- a/ui/src/views/space/templates/list/package-menu/menu.vue
+++ b/ui/src/views/space/templates/list/package-menu/menu.vue
@@ -84,7 +84,7 @@
   import TableEmpty from '../../../../../components/table/table-empty.vue';
 
   const router = useRouter();
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t, locale } = useI18n();
   const templateStore = useTemplateStore();
   const {
@@ -175,7 +175,7 @@
       start: 0,
       limit: 1,
     };
-    const res = await getTemplatesBySpaceId(spaceId.value, currentTemplateSpace.value, params);
+    const res = await getTemplatesBySpaceId(spaceId.value, projectId.value, currentTemplateSpace.value, params);
     templateStore.$patch((state) => {
       state.CountOfAllTemplatesInSpace = res.count;
     });
@@ -187,7 +187,8 @@
       start: 0,
       limit: 1,
     };
-    const res = await getTemplatesWithNoSpecifiedPackage(spaceId.value, currentTemplateSpace.value, params);
+    const res = await getTemplatesWithNoSpecifiedPackage(
+      spaceId.value, projectId.value, currentTemplateSpace.value, params);
     templateStore.$patch((state) => {
       state.countOfTemplatesForNoSpecifiedPackage = res.count;
     });
@@ -200,7 +201,7 @@
       start: 0,
       all: true,
     };
-    const res = await getTemplatePackageList(spaceId.value, currentTemplateSpace.value, params);
+    const res = await getTemplatePackageList(spaceId.value, projectId.value, currentTemplateSpace.value, params);
     packages.value = res.details;
     menuList.value = res.details.map((item: ITemplatePackageItem) => {
       const { id, spec } = item;
diff --git a/ui/src/views/space/templates/list/package-menu/package-clone.vue b/ui/src/views/space/templates/list/package-menu/package-clone.vue
index e81f07d31..009dc3acb 100644
--- a/ui/src/views/space/templates/list/package-menu/package-clone.vue
+++ b/ui/src/views/space/templates/list/package-menu/package-clone.vue
@@ -6,7 +6,7 @@
     :before-close="handleBeforeClose"
     @closed="close">
     <div class="package-form">
-      <PackageForm ref="formRef" :space-id="spaceId" :data="data" @change="handleChange" />
+      <PackageForm ref="formRef" :space-id="spaceId" :project-id="projectId" :data="data" @change="handleChange" />
     </div>
     <div class="action-btns">
       <bk-button theme="primary" :loading="pending" @click="handleSave">{{ t('创建') }}</bk-button>
@@ -25,7 +25,7 @@
   import useModalCloseConfirmation from '../../../../../utils/hooks/use-modal-close-confirmation';
   import PackageForm from './package-form.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -43,6 +43,7 @@
     memo: '',
     public: true,
     template_ids: [],
+    env_id: '',
     bound_apps: [],
   });
   const isFormChange = ref(false);
@@ -53,8 +54,8 @@
     (val) => {
       isShow.value = val;
       isFormChange.value = false;
-      const { name, memo, public: isPublic, bound_apps, template_ids } = props.pkg.spec;
-      data.value = { name, memo, public: isPublic, bound_apps, template_ids };
+      const { name, memo, public: isPublic, env_id, bound_apps, template_ids } = props.pkg.spec;
+      data.value = { name, memo, public: isPublic, env_id, bound_apps, template_ids };
     },
   );
 
@@ -67,7 +68,7 @@
     formRef.value.validate().then(async () => {
       try {
         pending.value = true;
-        await createTemplatePackage(spaceId.value, props.templateSpaceId, data.value);
+        await createTemplatePackage(spaceId.value, projectId.value, props.templateSpaceId, data.value);
         close();
         emits('created');
         Message({
diff --git a/ui/src/views/space/templates/list/package-menu/package-create.vue b/ui/src/views/space/templates/list/package-menu/package-create.vue
index 64376555f..d3383b87a 100644
--- a/ui/src/views/space/templates/list/package-menu/package-create.vue
+++ b/ui/src/views/space/templates/list/package-menu/package-create.vue
@@ -6,7 +6,7 @@
     :before-close="handleBeforeClose"
     @closed="close">
     <div class="create-package-form">
-      <PackageForm ref="formRef" :space-id="spaceId" :data="data" @change="handleChange" />
+      <PackageForm ref="formRef" :space-id="spaceId" :project-id="projectId" :data="data" @change="handleChange" />
     </div>
     <div class="action-btns">
       <bk-button theme="primary" :loading="pending" @click="handleCreate">{{ t('创建') }}</bk-button>
@@ -25,7 +25,7 @@
   import useModalCloseConfirmation from '../../../../../utils/hooks/use-modal-close-confirmation';
   import PackageForm from './package-form.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -42,6 +42,7 @@
     memo: '',
     public: true,
     template_ids: [],
+    env_id: '',
     bound_apps: [],
   });
   const isFormChange = ref(false);
@@ -64,7 +65,7 @@
     formRef.value.validate().then(async () => {
       try {
         pending.value = true;
-        const res = await createTemplatePackage(spaceId.value, props.templateSpaceId, data.value);
+        const res = await createTemplatePackage(spaceId.value, projectId.value, props.templateSpaceId, data.value);
         close();
         emits('created', res.id);
         Message({
@@ -89,7 +90,7 @@
 
   const close = () => {
     emits('update:show', false);
-    data.value = { name: '', memo: '', public: true, template_ids: [], bound_apps: [] };
+    data.value = { name: '', memo: '', public: true, template_ids: [], env_id: '', bound_apps: [] };
   };
 </script>
 <style lang="scss" scoped>
diff --git a/ui/src/views/space/templates/list/package-menu/package-delete.vue b/ui/src/views/space/templates/list/package-menu/package-delete.vue
index 09e8b49ef..b2597131b 100644
--- a/ui/src/views/space/templates/list/package-menu/package-delete.vue
+++ b/ui/src/views/space/templates/list/package-menu/package-delete.vue
@@ -39,7 +39,7 @@
   import LinkToApp from '../components/link-to-app.vue';
   import DeleteConfirmDialog from '../../../../../components/delete-confirm-dialog.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { currentTemplateSpace } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
@@ -88,14 +88,15 @@
       start: 0,
       all: true,
     };
-    const res = await getUnNamedVersionAppsBoundByPackage(spaceId.value, props.templateSpaceId, props.pkg.id, params);
+    const res = await getUnNamedVersionAppsBoundByPackage(
+      spaceId.value, projectId.value, props.templateSpaceId, props.pkg.id, params);
     appList.value = res.details;
     appsLoading.value = false;
   };
 
   const handleDelete = async () => {
     pending.value = true;
-    await deleteTemplatePackage(spaceId.value, props.templateSpaceId, props.pkg.id);
+    await deleteTemplatePackage(spaceId.value, projectId.value, props.templateSpaceId, props.pkg.id);
     close();
     emits('deleted', props.pkg.id);
     Message({
diff --git a/ui/src/views/space/templates/list/package-menu/package-edit.vue b/ui/src/views/space/templates/list/package-menu/package-edit.vue
index 874c5f804..7fb762093 100644
--- a/ui/src/views/space/templates/list/package-menu/package-edit.vue
+++ b/ui/src/views/space/templates/list/package-menu/package-edit.vue
@@ -6,7 +6,13 @@
     :before-close="handleBeforeClose"
     @closed="close">
     <div class="package-form">
-      <PackageForm ref="formRef" :space-id="spaceId" :data="data" :apps="apps" @change="handleChange" />
+      <PackageForm
+        ref="formRef"
+        :space-id="spaceId"
+        :project-id="projectId"
+        :data="data"
+        :apps="apps"
+        @change="handleChange" />
     </div>
     <div class="action-btns">
       <bk-button theme="primary" :loading="pending" @click="handleSave">{{ t('保存') }}</bk-button>
@@ -25,7 +31,7 @@
   import useModalCloseConfirmation from '../../../../../utils/hooks/use-modal-close-confirmation';
   import PackageForm from './package-form.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -42,6 +48,7 @@
     name: '',
     memo: '',
     public: true,
+    env_id: '',
     bound_apps: [],
     template_ids: [],
   });
@@ -55,8 +62,8 @@
       isShow.value = val;
       if (val) {
         isFormChange.value = false;
-        const { name, memo, public: isPublic, bound_apps, template_ids } = props.pkg.spec;
-        data.value = { name, memo, public: isPublic, bound_apps, template_ids };
+        const { name, memo, public: isPublic, env_id, bound_apps, template_ids } = props.pkg.spec;
+        data.value = { name, memo, public: isPublic, env_id, bound_apps, template_ids };
         apps.value = bound_apps.slice();
       }
     },
@@ -75,7 +82,7 @@
           data.value.bound_apps = [];
         }
 
-        await updateTemplatePackage(spaceId.value, props.templateSpaceId, props.pkg.id, data.value);
+        await updateTemplatePackage(spaceId.value, projectId.value, props.templateSpaceId, props.pkg.id, data.value);
         close();
         emits('edited');
         Message({
diff --git a/ui/src/views/space/templates/list/package-menu/package-form.vue b/ui/src/views/space/templates/list/package-menu/package-form.vue
index 995f2b83a..0095aab2f 100644
--- a/ui/src/views/space/templates/list/package-menu/package-form.vue
+++ b/ui/src/views/space/templates/list/package-menu/package-form.vue
@@ -18,18 +18,28 @@
         <bk-radio :label="true">{{ t('公开') }}</bk-radio>
         <bk-radio :label="false">{{ t('指定服务') }}</bk-radio>
       </bk-radio-group>
-      <bk-select
-        v-if="!localVal.public"
-        v-model="localVal.bound_apps"
-        class="service-selector"
-        multiple
-        filterable
-        :placeholder="t('请选择服务')"
-        :loading="serviceLoading"
-        @change="handleServiceChange">
-        <bk-option v-for="service in serviceList" :key="service.id" :label="service.spec.name" :value="service.id">
-        </bk-option>
-      </bk-select>
+      <div v-if="!localVal.public" class="env-service-row">
+        <bk-form-item :label="t('环境')" required property="env_id" class="env-selector">
+          <env-selector
+            v-model="localVal.env_id"
+            :placeholder="t('请选择环境')"
+            :use-default-trigger="true"
+            @change="handleEnvInfoChange" />
+        </bk-form-item>
+        <bk-form-item :label="t('绑定服务')" required property="bound_apps" class="service-selector">
+          <bk-select
+            v-model="localVal.bound_apps"
+            multiple
+            filterable
+            :placeholder="t('请选择服务')"
+            :input-search="false"
+            :loading="serviceLoading"
+            @change="handleServiceChange">
+            <bk-option v-for="service in serviceList" :key="service.id" :label="service.spec.name" :value="service.id">
+            </bk-option>
+          </bk-select>
+        </bk-form-item>
+      </div>
       <p v-if="!localVal.public && deletedApps.length > 0" class="tips">
         {{ t('提醒：修改可见范围后，服务') }}
         <span v-for="item in deletedApps" :key="item.id">【{{ item.spec.name }}】</span>
@@ -39,20 +49,20 @@
   </bk-form>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, watch } from 'vue';
+  import { ref, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { cloneDeep } from 'lodash';
-  import { storeToRefs } from 'pinia';
-  import useUserStore from '../../../../../store/user';
   import { ITemplatePackageEditParams } from '../../../../../../types/template';
   import { getAppList } from '../../../../../api/index';
   import { IAppItem } from '../../../../../../types/app';
+  import EnvSelector from '../../../../../components/env-selector.vue';
+  import { IEnvItem } from '../../../../../../types/env';
 
-  const { userInfo } = storeToRefs(useUserStore());
   const { t } = useI18n();
 
   const props = defineProps<{
     spaceId: string;
+    projectId: string;
     data: ITemplatePackageEditParams;
     apps?: number[]; // 套餐绑定的服务，编辑时需要区分哪些服务被去掉
   }>();
@@ -65,21 +75,22 @@
   const serviceList = ref<IAppItem[]>([]);
   const deletedApps = ref<IAppItem[]>([]);
   const rules = {
-    public: [
+    memo: [
+      {
+        validator: (value: string) => value.length <= 200,
+        message: t('最大长度200个字符'),
+      },
+    ],
+    bound_apps: [
       {
-        validator: (val: boolean) => {
-          if (!val && localVal.value.bound_apps.length === 0) {
+        validator: (val: number[]) => {
+          if (!localVal.value.public && val.length === 0) {
             return false;
           }
           return true;
         },
-        message: t('指定服务不能为空'),
-      },
-    ],
-    memo: [
-      {
-        validator: (value: string) => value.length <= 200,
-        message: t('最大长度200个字符'),
+        message: t('绑定服务不能为空'),
+        trigger: 'blur',
       },
     ],
   };
@@ -91,20 +102,14 @@
     },
   );
 
-  onMounted(() => {
-    getServiceList();
-  });
-
   const getServiceList = async () => {
     serviceLoading.value = true;
     try {
       const bizId = props.spaceId;
       const query = {
-        start: 0,
-        limit: 1000, // @todo 确认拉全量列表参数
-        operator: userInfo.value.username,
+        all: true,
       };
-      const resp = await getAppList(bizId, query);
+      const resp = await getAppList(bizId, props.projectId, localVal.value.env_id, query);
       serviceList.value = resp.details.filter((service: IAppItem) => service.spec.config_type === 'file');
     } catch (e) {
       console.error(e);
@@ -113,6 +118,14 @@
     }
   };
 
+  // 环境选择变化（带环境信息）
+  const handleEnvInfoChange = (_env: IEnvItem, isManual?: boolean) => {
+    if (isManual) {
+      localVal.value.bound_apps = [];
+    };
+    getServiceList();
+  };
+
   const handleServiceChange = () => {
     const changed: IAppItem[] = [];
     if (!localVal.value.public && props.apps) {
@@ -146,4 +159,22 @@
     font-size: 12px;
     color: #ff9c01;
   }
+  .env-service-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 8px;
+    padding: 16px 16px 24px;
+    border-radius: 2px;
+    background-color: #F5F7FA;
+    :deep(.bk-form-item) {
+      margin-bottom: 0;
+    }
+    .env-selector {
+      flex: 1;
+    }
+    .service-selector {
+      width: 392px;
+    }
+  }
 </style>
diff --git a/ui/src/views/space/templates/list/space/create.vue b/ui/src/views/space/templates/list/space/create.vue
index b52a6de3d..6806f2f13 100644
--- a/ui/src/views/space/templates/list/space/create.vue
+++ b/ui/src/views/space/templates/list/space/create.vue
@@ -35,7 +35,7 @@
   import useGlobalStore from '../../../../../store/global';
   import { createTemplateSpace } from '../../../../../api/template';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -66,7 +66,7 @@
     formRef.value.validate().then(async () => {
       try {
         pending.value = true;
-        const res = await createTemplateSpace(spaceId.value, localVal.value);
+        const res = await createTemplateSpace(spaceId.value, projectId.value, localVal.value);
         handleClose();
         emits('created', res.id);
         Message({
diff --git a/ui/src/views/space/templates/list/space/edit.vue b/ui/src/views/space/templates/list/space/edit.vue
index 743d30190..d79eeb4b8 100644
--- a/ui/src/views/space/templates/list/space/edit.vue
+++ b/ui/src/views/space/templates/list/space/edit.vue
@@ -31,7 +31,7 @@
   import useGlobalStore from '../../../../../store/global';
   import { updateTemplateSpace } from '../../../../../api/template';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -60,7 +60,7 @@
     formRef.value.validate().then(async () => {
       try {
         pending.value = true;
-        await updateTemplateSpace(spaceId.value, props.data.id, { memo: memo.value });
+        await updateTemplateSpace(spaceId.value, projectId.value, props.data.id, { memo: memo.value });
         handleClose();
         emits('edited');
         Message({
diff --git a/ui/src/views/space/templates/list/space/selector.vue b/ui/src/views/space/templates/list/space/selector.vue
index 9bdfe86ef..3ffe7e99c 100644
--- a/ui/src/views/space/templates/list/space/selector.vue
+++ b/ui/src/views/space/templates/list/space/selector.vue
@@ -71,7 +71,7 @@
   import Edit from './edit.vue';
 
   const router = useRouter();
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const templateStore = useTemplateStore();
   const { currentTemplateSpace, templateSpaceList } = storeToRefs(templateStore);
   const { t } = useI18n();
@@ -131,7 +131,7 @@
       start: 0,
       all: true,
     };
-    const res = await getTemplateSpaceList(spaceId.value, params);
+    const res = await getTemplateSpaceList(spaceId.value, projectId.value, params);
     const index = (res.details as ITemplateSpaceItem[]).findIndex((item) =>
       ['默认空间', 'default_space'].includes(item.spec.name),
     );
@@ -184,8 +184,8 @@
       start: 0,
       all: true,
     };
-    const res = await getTemplatesBySpaceId(spaceId.value, space.id, params);
-    const packageRes = await getTemplatePackageList(spaceId.value, String(space.id), packageParams);
+    const res = await getTemplatesBySpaceId(spaceId.value, projectId.value, space.id, params);
+    const packageRes = await getTemplatePackageList(spaceId.value, projectId.value, String(space.id), packageParams);
     if (res.count > 0) {
       InfoBox({
         title: `${t('未能删除')}【${space.spec.name}】`,
@@ -210,7 +210,7 @@
   };
 
   const handleDeleteTemplateSpaceConfirm = async () => {
-    await deleteTemplateSpace(spaceId.value, deleteTemplateSpaceItem.value!.id);
+    await deleteTemplateSpace(spaceId.value, projectId.value, deleteTemplateSpaceItem.value!.id);
     if (deleteTemplateSpaceItem.value!.id === currentTemplateSpace.value) {
       templateStore.$patch((state) => {
         state.currentTemplateSpace = '';
diff --git a/ui/src/views/space/templates/version-manage/index.vue b/ui/src/views/space/templates/version-manage/index.vue
index 6d0bf2162..bc85eb028 100644
--- a/ui/src/views/space/templates/version-manage/index.vue
+++ b/ui/src/views/space/templates/version-manage/index.vue
@@ -25,6 +25,7 @@
       <VersionFullTable
         v-if="!versionDetailModeData.open"
         :space-id="spaceId"
+        :project-id="projectId"
         :template-space-id="templateSpaceId"
         :template-id="templateId"
         :list="versionList"
@@ -38,6 +39,7 @@
       <VersionDetailTable
         v-else
         :space-id="spaceId"
+        :project-id="projectId"
         :template-space-id="templateSpaceId"
         :template-id="templateId"
         :list="versionList"
@@ -97,7 +99,7 @@
     return 0;
   };
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { versionListPageShouldOpenEdit, versionListPageShouldOpenView } = storeToRefs(useTemplateStore());
   const route = useRoute();
   const router = useRouter();
@@ -146,7 +148,7 @@
 
   const getTemplateDetail = async () => {
     templateDetailLoading.value = true;
-    const res = await getTemplatesDetailByIds(spaceId.value, [templateId.value]);
+    const res = await getTemplatesDetailByIds(spaceId.value, projectId.value, [templateId.value]);
     if (res.details.length > 0) {
       templateDetail.value = res.details[0];
     }
@@ -160,7 +162,11 @@
       limit: pagination.value.limit,
     };
     params.search = searchQuery.value;
-    const res = await getTemplateVersionList(spaceId.value, templateSpaceId.value, templateId.value, params);
+    const res = await getTemplateVersionList(
+      spaceId.value,
+      projectId.value,
+      templateSpaceId.value,
+      templateId.value, params);
     versionList.value = res.details;
     pagination.value.count = res.count;
     versionListLoading.value = false;
@@ -173,7 +179,7 @@
 
   const getAllVersionList = async () => {
     allVersionListLoading.value = true;
-    const res = await getTemplateVersionList(spaceId.value, templateSpaceId.value, templateId.value, {
+    const res = await getTemplateVersionList(spaceId.value, projectId.value, templateSpaceId.value, templateId.value, {
       start: 0,
       all: true,
     });
@@ -187,7 +193,11 @@
 
   const loadBoundByAppsList = async (ids: number[]) => {
     boundByAppsCountLoading.value = true;
-    const res = await getCountsByTemplateVersionIds(spaceId.value, templateSpaceId.value, templateId.value, ids);
+    const res = await getCountsByTemplateVersionIds(
+      spaceId.value,
+      projectId.value,
+      templateSpaceId.value,
+      templateId.value, ids);
     boundByAppsCountList.value = res.details;
     boundByAppsCountLoading.value = false;
   };
diff --git a/ui/src/views/space/templates/version-manage/template-version-diff.vue b/ui/src/views/space/templates/version-manage/template-version-diff.vue
index a4cc6475f..4af559342 100644
--- a/ui/src/views/space/templates/version-manage/template-version-diff.vue
+++ b/ui/src/views/space/templates/version-manage/template-version-diff.vue
@@ -55,6 +55,7 @@
   const props = defineProps<{
     show: boolean;
     spaceId: string;
+    projectId: string;
     templateSpaceId: number;
     crtVersion: DiffSliderDataType;
     createMode?: boolean; // 新建版本对比没有版本id
@@ -111,7 +112,12 @@
       start: 0,
       all: true,
     };
-    const res = await getTemplateVersionList(props.spaceId, props.templateSpaceId, props.crtVersion.id, params);
+    const res = await getTemplateVersionList(
+      props.spaceId,
+      props.projectId,
+      props.templateSpaceId,
+      props.crtVersion.id,
+      params);
     // 新建版本时可以选中载入版本进行diff
     versionList.value = props.createMode
       ? res.details
@@ -120,7 +126,8 @@
   };
 
   const getTemplateVersionDetail = async (versionId: number) => {
-    const res = getTemplateVersionsDetailByIds(props.spaceId, [versionId]).then((res) => res.details[0]);
+    const res = getTemplateVersionsDetailByIds(
+      props.spaceId, props.projectId, [versionId]).then((res) => res.details[0]);
     return res;
   };
 
diff --git a/ui/src/views/space/templates/version-manage/version-bound-by-apps-detail.vue b/ui/src/views/space/templates/version-manage/version-bound-by-apps-detail.vue
index 7f58ed6d9..f28c2383f 100644
--- a/ui/src/views/space/templates/version-manage/version-bound-by-apps-detail.vue
+++ b/ui/src/views/space/templates/version-manage/version-bound-by-apps-detail.vue
@@ -49,6 +49,7 @@
   const props = defineProps<{
     show: boolean;
     spaceId: string;
+    projectId: string;
     currentTemplateSpace: number;
     config: { id: number; versionId: number; name: string };
   }>();
@@ -84,6 +85,7 @@
     }
     const res = await getUnNamedVersionAppsBoundByTemplateVersion(
       props.spaceId,
+      props.projectId,
       props.currentTemplateSpace,
       props.config.id,
       props.config.versionId,
diff --git a/ui/src/views/space/templates/version-manage/version-detail/create-version-confirm-dialog.vue b/ui/src/views/space/templates/version-manage/version-detail/create-version-confirm-dialog.vue
index 6095aa953..412e04939 100644
--- a/ui/src/views/space/templates/version-manage/version-detail/create-version-confirm-dialog.vue
+++ b/ui/src/views/space/templates/version-manage/version-detail/create-version-confirm-dialog.vue
@@ -49,6 +49,7 @@
   const props = defineProps<{
     show: boolean;
     spaceId: string;
+    projectId: string;
     templateSpaceId: number;
     templateId: number;
     versionId: number;
@@ -93,6 +94,7 @@
     };
     const res = await getUnNamedVersionAppsBoundByLatestTemplateVersion(
       props.spaceId,
+      props.projectId,
       props.templateSpaceId,
       props.templateId,
       params,
diff --git a/ui/src/views/space/templates/version-manage/version-detail/version-detail-table.vue b/ui/src/views/space/templates/version-manage/version-detail/version-detail-table.vue
index b96c4beb0..7e37c72cb 100644
--- a/ui/src/views/space/templates/version-manage/version-detail/version-detail-table.vue
+++ b/ui/src/views/space/templates/version-manage/version-detail/version-detail-table.vue
@@ -14,6 +14,7 @@
     <div class="version-detail-content">
       <VersionEditor
         :space-id="props.spaceId"
+        :project-id="props.projectId"
         :template-space-id="props.templateSpaceId"
         :template-id="props.templateId"
         :version-id="props.versionId"
@@ -40,6 +41,7 @@
   const { t } = useI18n();
   const props = defineProps<{
     spaceId: string;
+    projectId: string;
     templateSpaceId: number;
     templateId: number;
     list: ITemplateVersionItem[];
diff --git a/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue b/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue
index 2e5a0e270..67a2e2f81 100644
--- a/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue
+++ b/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue
@@ -68,6 +68,7 @@
   <CreateVersionConfirmDialog
     v-model:show="isConfirmDialogShow"
     :space-id="props.spaceId"
+    :project-id="props.projectId"
     :template-space-id="props.templateSpaceId"
     :template-id="props.templateId"
     :version-id="props.versionId"
@@ -99,6 +100,7 @@
   const { t } = useI18n();
   const props = defineProps<{
     spaceId: string;
+    projectId: string;
     templateSpaceId: number;
     templateId: number;
     versionId: number;
@@ -216,9 +218,12 @@
 
   const getBoundCount = async () => {
     boundCountLoading.value = true;
-    const res = await getCountsByTemplateVersionIds(props.spaceId, props.templateSpaceId, props.templateId, [
-      props.versionId,
-    ]);
+    const res = await getCountsByTemplateVersionIds(
+      props.spaceId,
+      props.projectId,
+      props.templateSpaceId,
+      props.templateId,
+      [props.versionId,]);
     boundCount.value = res.details[0].bound_unnamed_app_count;
     boundCountLoading.value = false;
   };
@@ -313,7 +318,12 @@
       if (formData.value.file_type !== 'binary') {
         await uploadContent();
       }
-      const res = await createTemplateVersion(props.spaceId, props.templateSpaceId, props.templateId, formData.value);
+      const res = await createTemplateVersion(
+        props.spaceId,
+        props.projectId,
+        props.templateSpaceId,
+        props.templateId,
+        formData.value);
       isConfirmDialogShow.value = false;
       emits('created', res.id);
       Message({
diff --git a/ui/src/views/space/templates/version-manage/version-full-table.vue b/ui/src/views/space/templates/version-manage/version-full-table.vue
index e3082b23f..2b5df744b 100644
--- a/ui/src/views/space/templates/version-manage/version-full-table.vue
+++ b/ui/src/views/space/templates/version-manage/version-full-table.vue
@@ -63,11 +63,13 @@
   <VersionBoundByAppsDetail
     v-model:show="boundDetailSliderData.open"
     :space-id="spaceId"
+    :project-id="projectId"
     :current-template-space="templateSpaceId"
     :config="boundDetailSliderData.data" />
   <TemplateVersionDiff
     v-model:show="diffSliderData.open"
     :space-id="spaceId"
+    :project-id="projectId"
     :template-space-id="templateSpaceId"
     :crt-version="diffSliderData.data" />
 </template>
@@ -91,6 +93,7 @@
   const { t } = useI18n();
   const props = defineProps<{
     spaceId: string;
+    projectId: string;
     templateSpaceId: number;
     templateId: number;
     list: ITemplateVersionItem[];
diff --git a/ui/src/views/space/variables/batch-delete-btn.vue b/ui/src/views/space/variables/batch-delete-btn.vue
index db1692679..778fec64c 100644
--- a/ui/src/views/space/variables/batch-delete-btn.vue
+++ b/ui/src/views/space/variables/batch-delete-btn.vue
@@ -30,6 +30,7 @@
 
   const props = defineProps<{
     bkBizId: string;
+    projectId: string;
     selectedIds: number[];
     isAcrossChecked: boolean;
     dataCount: number;
@@ -42,7 +43,7 @@
 
   const handleBatchDeleteConfirm = async () => {
     batchDeletePending.value = true;
-    await batchDeleteVariable(props.bkBizId, props.selectedIds, props.isAcrossChecked);
+    await batchDeleteVariable(props.bkBizId, props.projectId, props.selectedIds, props.isAcrossChecked);
     Message({
       theme: 'success',
       message: t('批量删除变量成功'),
diff --git a/ui/src/views/space/variables/index.vue b/ui/src/views/space/variables/index.vue
index f4842b333..4fe09f1ed 100644
--- a/ui/src/views/space/variables/index.vue
+++ b/ui/src/views/space/variables/index.vue
@@ -18,6 +18,7 @@
         <ExportVariables :disabled="list.length === 0" @export="handleExport" />
         <BatchDeleteBtn
           :bk-biz-id="spaceId"
+          :project-id="projectId"
           :selected-ids="selectedIds"
           :is-across-checked="isAcrossChecked"
           :data-count="pagination.count"
@@ -127,7 +128,7 @@
   import ExportVariables from '../service/detail/config/config-list/config-table-list/variables/export-variables.vue';
   import VarValuePreview from '../service/detail/config/config-list/config-table-list/tables/kv-value-preview.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
   const { pagination, updatePagination } = useTablePagination('variableList');
 
@@ -208,7 +209,7 @@
       if (topIds.value.length > 0) {
         params.top_ids = topIds.value;
       }
-      const res = await getVariableList(spaceId.value, params);
+      const res = await getVariableList(spaceId.value, projectId.value, params);
       list.value = res.details;
       pagination.value.count = res.count;
     } catch (error) {
@@ -225,7 +226,7 @@
 
   // 导出变量
   const handleExport = async (type: string) => {
-    const res = await exportVariables(spaceId.value, type);
+    const res = await exportVariables(spaceId.value, projectId.value, type);
     let content: any;
     let mimeType: string;
     let extension: string;
@@ -274,7 +275,7 @@
   };
 
   const handleDeleteVarConfirm = async () => {
-    await deleteVariable(spaceId.value, deleteVariableItem.value!.id);
+    await deleteVariable(spaceId.value, projectId.value, deleteVariableItem.value!.id);
     BkMessage({
       message: t('删除变量成功'),
       theme: 'success',
diff --git a/ui/src/views/space/variables/variable-create.vue b/ui/src/views/space/variables/variable-create.vue
index 914565723..0026290b3 100644
--- a/ui/src/views/space/variables/variable-create.vue
+++ b/ui/src/views/space/variables/variable-create.vue
@@ -25,7 +25,7 @@
   import { IVariableEditParams } from '../../../../types/variable';
   import EditingForm from './editing-form.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -73,7 +73,7 @@
     try {
       pending.value = true;
       const params = { ...variableConfig.value, name: `${prefix.value}${variableConfig.value.name}` };
-      const res = await createVariable(spaceId.value, params);
+      const res = await createVariable(spaceId.value, projectId.value, params);
       close();
       emits('created', res.data.id);
       Message({
diff --git a/ui/src/views/space/variables/variable-edit.vue b/ui/src/views/space/variables/variable-edit.vue
index 26fd54c41..a63b38c5f 100644
--- a/ui/src/views/space/variables/variable-edit.vue
+++ b/ui/src/views/space/variables/variable-edit.vue
@@ -25,7 +25,7 @@
   import { IVariableEditParams } from '../../../../types/variable';
   import EditingForm from './editing-form.vue';
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -76,7 +76,7 @@
     try {
       pending.value = true;
       const { default_val, memo } = variableConfig.value;
-      await updateVariable(spaceId.value, props.id, { default_val, memo });
+      await updateVariable(spaceId.value, projectId.value, props.id, { default_val, memo });
       close();
       emits('edited');
       Message({
diff --git a/ui/src/views/space/variables/variable-import/variables-content-editor.vue b/ui/src/views/space/variables/variable-import/variables-content-editor.vue
index ba57f5dc4..96b22821f 100644
--- a/ui/src/views/space/variables/variable-import/variables-content-editor.vue
+++ b/ui/src/views/space/variables/variable-import/variables-content-editor.vue
@@ -98,7 +98,7 @@
 
   const { t } = useI18n();
 
-  const { spaceId } = storeToRefs(useGlobalStore());
+  const { spaceId, projectId } = storeToRefs(useGlobalStore());
 
   const props = defineProps<{
     modelValue: boolean;
@@ -229,11 +229,11 @@
         separator: separator.value === ' ' ? 'white-space' : separator.value,
         variables: editorContent.value,
       };
-      res = await importVariablesText(spaceId.value, params);
+      res = await importVariablesText(spaceId.value, projectId.value, params);
     } else if (props.format === 'json') {
-      res = await importVariablesJSON(spaceId.value, editorContent.value);
+      res = await importVariablesJSON(spaceId.value, projectId.value, editorContent.value);
     } else {
-      res = await importVariablesYaml(spaceId.value, editorContent.value);
+      res = await importVariablesYaml(spaceId.value, projectId.value, editorContent.value);
     }
     return res.data.ids;
   };
diff --git a/ui/types/app.ts b/ui/types/app.ts
index d9d814d79..2a27997c3 100644
--- a/ui/types/app.ts
+++ b/ui/types/app.ts
@@ -11,6 +11,8 @@ export interface IAppListQuery {
 export interface IAppItem {
   id?: number;
   biz_id: number;
+  project_id: number;
+  env_id: number;
   space_id: string;
   spec: {
     name: string;
diff --git a/ui/types/group.ts b/ui/types/group.ts
index e71aa1e2f..db3e2c70d 100644
--- a/ui/types/group.ts
+++ b/ui/types/group.ts
@@ -92,6 +92,7 @@ export interface IGroupEditing {
   name: string;
   public: boolean;
   bind_apps: number[];
+  env_id: string;
   rules: IGroupRuleItem[];
   rule_logic: string;
   uid?: string;
@@ -135,6 +136,7 @@ export interface IGroupBindService {
   release_id: number;
   release_name: string;
   edited: boolean;
+  env_display: string;
 }
 
 // 服务下的分组数据
diff --git a/ui/types/service.ts b/ui/types/service.ts
index 5d7bedd37..04401cf0a 100644
--- a/ui/types/service.ts
+++ b/ui/types/service.ts
@@ -10,6 +10,8 @@ export interface IServiceEditForm {
   is_approve: boolean;
   approver: string;
   approve_type: string;
+  projectId: string;
+  envId: string;
   // encryptionSwtich: boolean;
   // encryptionKey: string;
 }
diff --git a/ui/types/template.ts b/ui/types/template.ts
index ed4505a55..db092ef4a 100644
--- a/ui/types/template.ts
+++ b/ui/types/template.ts
@@ -24,6 +24,7 @@ export interface ITemplatePackageItem {
     memo: string;
     template_ids: number[];
     public: boolean;
+    env_id: string;
     bound_apps: number[];
   };
   attachment: {
@@ -52,6 +53,7 @@ export interface ITemplatePackageEditParams {
   memo: string;
   template_ids?: number[];
   public: boolean;
+  env_id: string;
   bound_apps: number[];
   force?: boolean;
 }
@@ -84,12 +86,15 @@ export interface ITemplateCitedByPkgs {
 }
 
 // 单个模板套餐被多个服务引用数据
+import { EnvType } from './env';
 
 export interface IPackageCitedByApps {
   template_revision_id: number;
   template_revision_name: string;
   app_id: number;
   app_name: string;
+  env_type?: EnvType; // 环境类型
+  env_name?: string;   // 环境名称
 }
 
 // 多个模板套餐被多个服务引用数据