diff --git a/.eslintignore b/.eslintignore
index e69de29b..600f5f45 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1 @@
+/src/views/Creative/3d
\ No newline at end of file
diff --git a/src/views/Creative/Creation.vue b/src/views/Creative/Creation.vue
index d92609f4..2c1baa71 100644
--- a/src/views/Creative/Creation.vue
+++ b/src/views/Creative/Creation.vue
@@ -1,15 +1,30 @@
 <template>
   <div style="height: 100%;">
-    <ShopEditorDemo :currentShopData="shopData" />
+    <ShopEditorDemo v-if="shopData" :currentShopData="shopData" />
   </div>
 </template>
 
 <script setup>
-import { reactive } from "@vue/reactivity";
+import { reactive, ref } from "@vue/reactivity";
+import { onMounted } from "@vue/runtime-core";
 import ShopEditorDemo from "./3d/crossyo/shelves-vue-demo/view/ShopEditorDemo.vue";
-import { currentMock } from "./creation.mock";
+import { getMaterialsById } from "./api";
+import { useRoute } from "vue-router";
 
-const shopData = reactive(currentMock[0]);
+const shopData = ref(null);
+
+const route = useRoute();
+
+onMounted(async () => {
+
+  const res = await getMaterialsById(route.query.id);
+  try{
+    shopData.value = res.data.materials[0].space_json;
+  }
+  catch(e){
+    console.error(`解析数据出错:` + e)
+  }
+})
 
 </script>
 
diff --git a/src/views/Creative/Material.vue b/src/views/Creative/Material.vue
index 982c5971..62459c89 100644
--- a/src/views/Creative/Material.vue
+++ b/src/views/Creative/Material.vue
@@ -1,89 +1,109 @@
 <template>
-  <div class="material">
-    <div class="search">
-      <a-menu v-model:selectedKeys="current" mode="horizontal">
-        <a-menu-item :key="0">全部 </a-menu-item>
-        <a-menu-item v-for="(item) in THREE_D_TYPE_S" :key="item.type">{{item.name}}</a-menu-item>
-      </a-menu>
-      <a-input v-model="userName" placeholder="请输入" style="width: 200px; margin-right: 5px;">
-        <template v-slot:prefix>
-          <SearchOutlined style="color: #BFBFBF;"/>
-        </template>
-        <template v-slot:suffix>
-          <span @click="search" class="searchBtn">
-            搜索
-          </span>
-        </template>
-      </a-input>
-      <a-button type="primary" @click="createMaterialRef.show(current.find(x => x))">
-        <PlusOutlined/> 新增
-      </a-button>
-    </div>
-    <div v-if="arr.length" class="result">
-      <div v-for="(i, index) in 15" :key="i" class="page-item">
-        <div v-if="arr[index]" class="page-item-content">
-          <div class="page-item-logo">
-          </div>
-          <div class="page-item-title">
-            <div class="pit-row" style="color: #262626;">
-              超市
-              <div class="pit-tag" style="color: #0CC126; ">
-                三维环境
-              </div>
+  <a-spin :spinning="loading">
+    <div class="material">
+      <div class="search">
+        <a-menu v-model:selectedKeys="current" mode="horizontal">
+          <a-menu-item :key="0">全部</a-menu-item>
+          <a-menu-item v-for="(item) in THREE_D_TYPE_S" :key="item.type">{{item.name}}</a-menu-item>
+        </a-menu>
+        <a-input v-model:value="title" placeholder="请输入" style="width: 200px; margin-right: 5px;">
+          <template v-slot:prefix>
+            <SearchOutlined style="color: #BFBFBF;"/>
+          </template>
+          <template v-slot:suffix>
+            <span @click="query" class="searchBtn">
+              搜索
+            </span>
+          </template>
+        </a-input>
+        <a-button type="primary" @click="createMaterialRef.show(current.find(x => x))">
+          <PlusOutlined/> 新增
+        </a-button>
+      </div>
+      <div v-if="rows.length" class="result">
+        <div v-for="(row, index) in rows" :key="index" class="page-item">
+          <div v-if="row" class="page-item-content">
+            <div class="page-item-logo">
             </div>
-            <div class="pit-row" style="color: #8A8A8A;">
-              2022-08-08
-              <div class="pit-more">
-                <a-dropdown placement="bottomCenter">
-                  <a class="ant-dropdown-link" @click.prevent>
-                    <i class="iconfont" style="color: #262626;">&#xe7ac;</i>
-                  </a>
-                  <template #overlay>
-                    <a-menu>
-                      <a-menu-item>
-                        <a href="javascript:;" @click="previewerRef.show()">预览</a>
-                      </a-menu-item>
-                      <a-menu-item>
-                        <a href="javascript:;" @click="renameMeterialRef.show()">重命名</a>
-                      </a-menu-item>
-                      <a-menu-item>
-                        <a href="javascript:;" style="color: red;" @click="del">删除</a>
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
+            <div class="page-item-title">
+              <div class="pit-row" style="color: #262626;">
+                超市
+                <div class="pit-tag" style="color: #0CC126; ">
+                  三维环境
+                </div>
+              </div>
+              <div class="pit-row" style="color: #8A8A8A;">
+                2022-08-08
+                <div class="pit-more">
+                  <a-dropdown placement="bottomCenter">
+                    <a class="ant-dropdown-link" @click.prevent>
+                      <i class="iconfont" style="color: #262626;">&#xe7ac;</i>
+                    </a>
+                    <template #overlay>
+                      <a-menu>
+                        <a-menu-item>
+                          <a href="javascript:;" @click="previewerRef.show()">预览</a>
+                        </a-menu-item>
+                        <a-menu-item>
+                          <a href="javascript:;" @click="renameMeterialRef.show()">重命名</a>
+                        </a-menu-item>
+                        <a-menu-item>
+                          <a href="javascript:;" style="color: red;" @click="del">删除</a>
+                        </a-menu-item>
+                      </a-menu>
+                    </template>
+                  </a-dropdown>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <Previewer ref="previewerRef" />
+      <RenameMeterial ref="renameMeterialRef" />
+      <CreateMaterial ref="createMaterialRef" />
     </div>
-    <Previewer ref="previewerRef" />
-    <RenameMeterial ref="renameMeterialRef" />
-    <CreateMaterial ref="createMaterialRef" />
-  </div>
+  </a-spin>
 </template>
 
 <script setup>
 
 import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue"
-import { computed, ref } from "@vue/runtime-core";
+import { computed, ref, watch } from "@vue/runtime-core";
 import { Modal } from "ant-design-vue";
 import Previewer from "./components/Previewer.vue";
 import RenameMeterial from "./components/RenameMeterial.vue";
 import CreateMaterial from "./components/CreateMaterial.vue";
-import { THREE_D_TYPE, THREE_D_TYPE_S } from "./components/CreateMaterial.constant"
+import { THREE_D_TYPE, THREE_D_TYPE_S } from "./components/CreateMaterial.constant";
+import { getMaterialLibrary } from "./api";
 
 const previewerRef = ref();
 const renameMeterialRef = ref();
 const createMaterialRef = ref();
 
-const current = ref([0])
+const current = ref([0]);
+
+const title = ref("");
+
+const rows = ref([]);
+
+const loading = ref(true);
 
 const search = () => {
   alert();
 }
 
+const query = async () => {
+  loading.value = true;
+  const res = await getMaterialLibrary({
+    type: current.value[0] || "",
+    title: title.value
+  });
+
+  loading.value = false;
+  rows.value = res.data;
+}
+
 const del = () => {
   Modal.confirm({
     title: "确认删除",
@@ -93,7 +113,13 @@ const del = () => {
   });
 }
 
-const arr = ref([1,2,3,4,5,6,7])
+watch(
+  () => current.value,
+  async () => {
+    await query();
+  },
+  { immediate: true }
+);
 
 </script>
 
diff --git a/src/views/Creative/MyCreation.vue b/src/views/Creative/MyCreation.vue
index 8e3c9edd..a2f9210b 100644
--- a/src/views/Creative/MyCreation.vue
+++ b/src/views/Creative/MyCreation.vue
@@ -1,126 +1,136 @@
 <template>
-  <div class="myCreation">
-    <div class="search">
-      <a-menu v-model:selectedKeys="current" mode="horizontal">
-        <a-menu-item key="all">全部 </a-menu-item>
-        <a-menu-item key="app1">3D虚拟门店</a-menu-item>
-        <a-menu-item key="app2">3D环物</a-menu-item>
-        <a-menu-item key="app3">3D商品模型</a-menu-item>
-      </a-menu>
-      <a-input v-model="userName" placeholder="请输入" style="width: 200px; margin-right: 5px;">
-        <template v-slot:prefix>
-          <SearchOutlined style="color: #BFBFBF;"/>
-        </template>
-        <template v-slot:suffix>
-          <span @click="search" class="searchBtn">
-            搜索
-          </span>
-        </template>
-      </a-input>
-      <a-button type="primary">
-        <PlusOutlined/> 新增
-      </a-button>
-    </div>
-    <div v-if="arr.length" class="result">
-      <div v-for="(i, index) in currentMock" :key="i" class="page-item">
-        <div v-if="arr[index]" class="page-item-content">
-          <div class="page-item-logo">
-          </div>
-          <div class="page-item-title">
-            <div class="pit-row" style="color: #262626;">
-              超市
-              <div class="pit-tag" style="color: #0CC126; ">
-                三维环境
-              </div>
+  <a-spin :spinning="loading">
+    <div class="myCreation">
+      <div class="search">
+        <a-menu v-model:selectedKeys="current" mode="horizontal">
+          <a-menu-item :key="0">全部 </a-menu-item>
+          <a-menu-item :key="1">3D虚拟门店</a-menu-item>
+          <a-menu-item :key="2">3D环物</a-menu-item>
+          <a-menu-item :key="3">3D商品模型</a-menu-item>
+        </a-menu>
+        <a-input v-model:value="title" placeholder="请输入" style="width: 200px; margin-right: 5px;">
+          <template v-slot:prefix>
+            <SearchOutlined style="color: #BFBFBF;"/>
+          </template>
+          <template v-slot:suffix>
+            <span @click="query" class="searchBtn">
+              搜索
+            </span>
+          </template>
+        </a-input>
+        <a-button type="primary">
+          <PlusOutlined/> 新增
+        </a-button>
+      </div>
+      <div v-if="rows.length" class="result">
+        <div v-for="(row, index) in rows" :key="index" class="page-item">
+          <div v-if="rows[index]" class="page-item-content">
+            <div class="page-item-logo">
             </div>
-            <div class="pit-row" style="color: #8A8A8A;">
-              2022-08-08
-              <div class="pit-more">
-                <a-dropdown placement="bottomCenter">
-                  <a class="ant-dropdown-link" @click.prevent>
-                    <i class="iconfont" style="color: #262626;">&#xe7ac;</i>
-                  </a>
-                  <template #overlay>
-                    <a-menu>
-                      <a-menu-item>
-                        <a href="javascript:;" @click="$router.push('/edit-creative')">编辑</a>
-                      </a-menu-item>
-                      <a-menu-item>
-                        <a href="javascript:;" @click="renameCreationRef.show()">重命名</a>
-                      </a-menu-item>
-                      <a-menu-item>
-                        <a href="javascript:;" style="color: red;" @click="del">删除</a>
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
+            <div class="page-item-title">
+              <div class="pit-row" style="color: #262626;">
+                {{row.title}}
+                <div v-if="row.type==1" class="pit-tag" style="color: #0CC126; ">
+                  3D虚拟门店
+                </div>
+                <div v-if="row.type==2" class="pit-tag" style="color: #0CC126; ">
+                  3D环物
+                </div>
+                <div v-if="row.type==3" class="pit-tag" style="color: #0CC126; ">
+                  3D商品模型
+                </div>
+              </div>
+              <div class="pit-row" style="color: #8A8A8A;">
+                2022-08-08
+                <div class="pit-more">
+                  <a-dropdown placement="bottomCenter">
+                    <a class="ant-dropdown-link" @click.prevent>
+                      <i class="iconfont" style="color: #262626;">&#xe7ac;</i>
+                    </a>
+                    <template #overlay>
+                      <a-menu>
+                        <a-menu-item>
+                          <a href="javascript:;" @click="edit(row)">编辑</a>
+                        </a-menu-item>
+                        <a-menu-item>
+                          <a href="javascript:;" @click="renameCreationRef.show()">重命名</a>
+                        </a-menu-item>
+                        <a-menu-item>
+                          <a href="javascript:;" style="color: red;" @click="del">删除</a>
+                        </a-menu-item>
+                      </a-menu>
+                    </template>
+                  </a-dropdown>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <div v-else class="empty">
+        <div v-if="[0, 1].includes(current[0])" class="empty-new">
+          <img src="@/assets/creative/3dshop.png" alt="">
+          <div class="title">
+            3D虚拟门店
+          </div>
+          <div class="desc">
+            在线VR场景搭建，沉浸式业务模拟
+          </div>
+          <div class="btn">
+            <a-button type="primary">开始创作</a-button>
+          </div>
+        </div>
+        <div v-if="[0, 2].includes(current[0])" class="empty-new">
+          <img src="@/assets/creative/3daround.png" alt="">
+          <div class="title">
+            3D环物
+          </div>
+          <div class="desc">
+            3D环物和产品相结合，可以让消费者看的更加真实
+          </div>
+          <div class="btn">
+            <a-button type="primary">开始创作</a-button>
+          </div>
+        </div>
+        <div v-if="[0, 3].includes(current[0])" class="empty-new">
+          <img src="@/assets/creative/3dmodel.png" alt="">
+          <div class="title">
+            3D模型
+          </div>
+          <div class="desc">
+            3D交互建模，高可真体感展示
+          </div>
+          <div class="btn">
+            <a-button type="primary">开始创作</a-button>
+          </div>
+        </div>
+      </div>
+      <RenameCreation ref="renameCreationRef" />
     </div>
-    <div v-else class="empty">
-      <div class="empty-new">
-        <img src="@/assets/creative/3dshop.png" alt="">
-        <div class="title">
-          3D虚拟门店
-        </div>
-        <div class="desc">
-          在线VR场景搭建，沉浸式业务模拟
-        </div>
-        <div class="btn">
-          <a-button type="primary">开始创作</a-button>
-        </div>
-      </div>
-      <div class="empty-new">
-        <img src="@/assets/creative/3daround.png" alt="">
-        <div class="title">
-          3D环物
-        </div>
-        <div class="desc">
-          3D环物和产品相结合，可以让消费者看的更加真实
-        </div>
-        <div class="btn">
-          <a-button type="primary">开始创作</a-button>
-        </div>
-      </div>
-      <div class="empty-new">
-        <img src="@/assets/creative/3dmodel.png" alt="">
-        <div class="title">
-          3D模型
-        </div>
-        <div class="desc">
-          3D交互建模，高可真体感展示
-        </div>
-        <div class="btn">
-          <a-button type="primary">开始创作</a-button>
-        </div>
-      </div>
-    </div>
-    <RenameCreation ref="renameCreationRef" />
-  </div>
+  </a-spin>
 </template>
 
 <script setup>
 
 import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue"
-import { computed, ref } from "@vue/runtime-core";
+import { computed, onMounted, ref, watch } from "@vue/runtime-core";
 import { Modal } from "ant-design-vue";
 import RenameCreation from "./components/RenameCreation.vue";
 import { currentMock } from "./creation.mock";
+import { getMaterials } from "./api";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 const renameCreationRef = ref();
 
-const current = ref(["all"]);
+const current = ref([0]);
 
-const search = () => {
-  alert();
-}
+const rows = ref([]);
 
-console.log(currentMock.length)
+const loading = ref(true);
 
-const arr = ref(currentMock)
+const title = ref("");
 
 const del = () => {
   Modal.confirm({
@@ -131,6 +141,33 @@ const del = () => {
   });
 }
 
+const query = async () => {
+  loading.value = true;
+  const res = await getMaterials({
+    type: current.value[0] || "",
+    title: title.value
+  });
+  loading.value = false;
+  rows.value = res.data;
+}
+
+const edit = (row) => {
+  router.push({
+    path: '/edit-creative',
+    query: {
+      id: row.id
+    }
+  })
+}
+
+watch(
+  () => current.value,
+  async () => {
+    await query();
+  },
+  { immediate: true }
+);
+
 </script>
 
 <style lang="scss" scoped>
@@ -196,7 +233,7 @@ const del = () => {
           display: block;
         }
         .pit-tag{
-          width: 64px;
+          min-width: 64px;
           height: 20px;
           line-height: 20px;
           border-radius: 3px 3px 3px 3px;
diff --git a/src/views/Creative/api.js b/src/views/Creative/api.js
new file mode 100644
index 00000000..600918e4
--- /dev/null
+++ b/src/views/Creative/api.js
@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+/* 3D场景列表 */
+export function getMaterials(params) {
+  return request({
+    url: `/console/materials?type=${params.type}&title=${params.title}`,
+    method: 'GET'
+  })
+}
+
+
+/* 3D场景单个 */
+export function getMaterialsById(id) {
+  return request({
+    url: `/console/materials/${id}`,
+    method: 'GET'
+  })
+}
+
+
+/* 素材库列表 */
+export function getMaterialLibrary(params) {
+  return request({
+    url: `/console/material_library?type=${params.type}&title=${params.title}`,
+    method: 'GET'
+  })
+}
+