diff --git a/src/api/scene.ts b/src/api/scene.ts
new file mode 100644
index 0000000..301e46e
--- /dev/null
+++ b/src/api/scene.ts
@@ -0,0 +1,59 @@
+import axios from 'axios';
+import { apiResData, monitorCfg, querySceneParams } from '@/api/interface/index';
+
+export interface sceneModel {
+  id?: string;
+  name?: string;
+  description?: string;
+  identify?: string;
+  logo?: string;
+  published?: boolean | number;
+  createBy?: string;
+  createTime?: string;
+  updateBy?: string;
+  updateTime?: string;
+  createUser?: string;
+  configUrls?: Array<monitorCfg>;
+}
+
+const urlPrefix = '/api/v1/bpms-workbench';
+
+// 场景管理-个人分页
+export function getMySceneList(data: querySceneParams) {
+  return axios.post<apiResData>(`${urlPrefix}/scenes/minePage`, data);
+}
+
+// 场景管理-公共分页
+export function getPublicSceneList(data: querySceneParams) {
+  return axios.post<apiResData>(`${urlPrefix}/scenes/publicPage`, data);
+}
+
+// 场景管理-协同分页
+export function getTeamSceneList(data: querySceneParams) {
+  return axios.post<apiResData>(`${urlPrefix}/scenes/teamPage`, data);
+}
+
+// 场景管理-获取场景
+export function getScene(appId: string) {
+  return axios.get(`${urlPrefix}/scenes$${appId}`);
+}
+
+// 场景管理-新增场景
+export function addScene(data: sceneModel) {
+  return axios.post(`${urlPrefix}/scenes`, data);
+}
+
+// 场景管理-修改场景
+export function editScene(data: sceneModel) {
+  return axios.put(`${urlPrefix}/scenes`, data);
+}
+
+// 场景管理-删除场景
+export function deleteScene(id: string) {
+  return axios.delete(`${urlPrefix}/scenes/${id}`);
+}
+
+// 场景管理-获取场景名和对应的ID
+export function getSceneAndId() {
+  return axios.get(`${urlPrefix}/scenes/idAndName`);
+}
\ No newline at end of file
diff --git a/src/pages/scene/cardWrap.tsx b/src/pages/scene/cardWrap.tsx
new file mode 100644
index 0000000..76240a2
--- /dev/null
+++ b/src/pages/scene/cardWrap.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from './style/cardWrap.module.less';
+import { getImageUrl } from '@/utils/pubUse';
+import { Image } from '@arco-design/web-react';
+import { IconEdit, IconDelete } from '@arco-design/web-react/icon';
+
+interface CardWrapProps {
+  item: any;
+}
+
+const CardWrap: React.FC<CardWrapProps> = ({ item }) => {
+  return (
+    <div className={styles['card-wrap']}>
+      <div className={styles['card-header']}>
+        <Image
+          preview={false}
+          src={getImageUrl(item.logo)}
+        />
+      </div>
+      <div className={styles['card-content']}>
+        <div className={styles['card-title']}>{item.name}</div>
+        <div className={styles['card-desc']}>{item.description}</div>
+      </div>
+      <div className={styles['card-footer']}>
+        <div className={styles['owner']}>
+          {/*<Image*/}
+          {/*/>*/}
+          <span>头像&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          <span>{item.createUser}</span>
+        </div>
+        <div className={styles['operation']}>
+          <IconEdit />
+          <IconDelete />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardWrap;
\ No newline at end of file
diff --git a/src/pages/scene/style/cardWrap.module.less b/src/pages/scene/style/cardWrap.module.less
new file mode 100644
index 0000000..f97f324
--- /dev/null
+++ b/src/pages/scene/style/cardWrap.module.less
@@ -0,0 +1,36 @@
+.card-wrap {
+  height: 100%;
+  overflow: hidden;
+
+  .card-header {
+    height: 150px;
+    background-color: #e3f0fc;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .card-content {
+    padding: 10px 12px;
+
+    .card-desc {
+      color: rgb(var(--gray-6));
+      min-height: 54px;
+    }
+  }
+
+  .card-footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 10px 12px;
+
+    .operation {
+      svg {
+        margin-right: 15px;
+        font-size: 16px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/utils/pubUse.ts b/src/utils/pubUse.ts
new file mode 100644
index 0000000..8a22462
--- /dev/null
+++ b/src/utils/pubUse.ts
@@ -0,0 +1,22 @@
+import scene01 from '@/assets/images/scene01.jpg';
+import scene02 from '@/assets/images/scene02.jpg';
+import scene03 from '@/assets/images/scene03.jpeg';
+import scene04 from '@/assets/images/scene04.png';
+import scene05 from '@/assets/images/scene05.jpg';
+import scene06 from '@/assets/images/scene06.png';
+import scene07 from '@/assets/images/scene07.png';
+import scene08 from '@/assets/images/scene08.jpg';
+
+const imageList: any[] = [scene01, scene02, scene03, scene04, scene05, scene06, scene07, scene08];
+
+// 获取assets静态资源
+export function getImageUrl(imageName: string) {
+  let imageUrl;
+  const name = imageName.split('.')[0];
+  imageList.forEach((url: any) => {
+    if (url.src.includes(name)) imageUrl = url.src;
+  });
+  return imageUrl;
+}
+
+export default null;