diff --git a/web/src/commonData/i18n/common/en.json b/web/src/commonData/i18n/common/en.json
index 4cdf41d22b..6a2dd9bd63 100644
--- a/web/src/commonData/i18n/common/en.json
+++ b/web/src/commonData/i18n/common/en.json
@@ -103,6 +103,32 @@
             "deleteWtss": "Delete the scheduler project at the same time?",
             "noData": "No data please add"
         },
+        "workspace": {
+          "createWorkspace": "Create Workspace",
+          "searchWorkspace": "Search Workspace",
+          "workspaceList": "Workspace List",
+          "editWorkspace": "Edit",
+          "newWorkspace": "New Workspace",
+          "editor": "Edit Workspace",
+          "workName": "Name",
+          "department": "Department",
+          "selectDepartment": "Please Select Department",
+          "label": "Label",
+          "addLabel": "Add Label",
+          "description": "Description",
+          "pleaseInputWorkspaceDesc": "Please Input Workspace Description",
+          "createdSuccess": "Successfully created!",
+          "createdFailed": "Created failed!",
+          "display": "Display",
+          "tableDisplay": "Table",
+          "cardDisplay": "Card",
+          "createTime": "CreateTime"
+        },
+        "GLY": {
+          "ALTY": "Demos",
+          "KSRM": "Quick Start",
+          "HYP": "Change"
+        },
         "workflow": {
             "workflow": "Workflow",
             "createWorkflow": "Create workflow",
diff --git a/web/src/commonData/i18n/common/zh.json b/web/src/commonData/i18n/common/zh.json
index 1328e2b322..c0502a2fe4 100644
--- a/web/src/commonData/i18n/common/zh.json
+++ b/web/src/commonData/i18n/common/zh.json
@@ -17,7 +17,8 @@
             "nameLength": "名称长度不能大于",
             "validNameDesc": "必须以字母开头，且只支持字母、数字、下划线",
             "project": "工程",
-            "feedback": "反馈"
+            "feedback": "反馈",
+            "validNameExist": "名称不能重复"
         },
         "project": {
             "projectName": "工程名",
@@ -103,6 +104,32 @@
             "deleteWtss": "是否同时删除scheduler工程?",
             "noData": "暂无数据请添加"
         },
+        "workspace": {
+          "createWorkspace": "创建工作空间",
+          "searchWorkspace": "搜索工作空间",
+          "workspaceList": "工作空间列表",
+          "editWorkspace": "编辑",
+          "newWorkspace": "新建工作空间",
+          "editor": "编辑工作空间",
+          "workName": "工作空间名",
+          "department": "归属部门",
+          "selectDepartment": "请选择部门",
+          "label": "标签",
+          "addLabel": "添加标签",
+          "description": "描述",
+          "pleaseInputWorkspaceDesc": "请输入工作空间描述",
+          "createdSuccess": "工作空间创建成功！",
+          "createdFailed": "工作空间创建失败！",
+          "display": "展示方式",
+          "tableDisplay": "列表展示",
+          "cardDisplay": "图标展示",
+          "createTime": "创建时间"
+        },
+        "GLY": {
+          "ALTY": "案例体验",
+          "KSRM": "快速入门",
+          "HYP": "换一批"
+        },
         "workflow": {
             "workflow": "工作流",
             "createWorkflow": "创建工作流",
diff --git a/web/src/js/component/vue-process/style/index.scss b/web/src/js/component/vue-process/style/index.scss
index bd2cbbc500..bf7ea68d15 100644
--- a/web/src/js/component/vue-process/style/index.scss
+++ b/web/src/js/component/vue-process/style/index.scss
@@ -400,7 +400,7 @@ $mask-color: rgba(55, 55, 55, .6);
 
         .designer-control-header {
             background: #5c5c5c;
-            background-image: linear-gradient(top, #5c5c5c, #3e3e3e);
+            background-image: linear-gradient(to top, #5c5c5c, #3e3e3e);
             height: 8px;
             border-left: 1px solid #5c5c5c;
             border-right: 1px solid #5c5c5c;
diff --git a/web/src/js/service/router.js b/web/src/js/service/router.js
index 6a6697cc74..15456a21ea 100644
--- a/web/src/js/service/router.js
+++ b/web/src/js/service/router.js
@@ -29,13 +29,22 @@ const router = new VueRouter({
     {
       path: '',
       name: 'layout',
-      redirect: '/project',
+      redirect: '/newhome',
       component: Layout,
       meta: {
         title: 'DataSphere Studio',
         publicPage: true, // 权限公开
       },
       children: [
+        {
+          path: 'newhome',
+          name: 'Newhome',
+          meta: {
+            title: 'DataSphere Studio',
+            publicPage: true,
+          },
+          component: () => import('../view/newhome/index.vue'),
+        },
         {
           path: 'home',
           name: 'Home',
diff --git a/web/src/js/view/newhome/images/workspace.png b/web/src/js/view/newhome/images/workspace.png
new file mode 100644
index 0000000000..c2f5022344
Binary files /dev/null and b/web/src/js/view/newhome/images/workspace.png differ
diff --git a/web/src/js/view/newhome/index.vue b/web/src/js/view/newhome/index.vue
index 09d9d0d42e..cb998cdaaa 100644
--- a/web/src/js/view/newhome/index.vue
+++ b/web/src/js/view/newhome/index.vue
@@ -1,3 +1,15 @@
 <template>
-  <div>首页</div>
+  <div>
+    <workspace />
+  </div>
 </template>
+
+<script>
+import workspace from './module/workspace';
+
+export default {
+  components: {
+    workspace: workspace.component
+  }
+}
+</script>
diff --git a/web/src/js/view/newhome/module/caseAndIntroduction/index.vue b/web/src/js/view/newhome/module/caseAndIntroduction/index.vue
index 6a84b08139..761b3d05eb 100644
--- a/web/src/js/view/newhome/module/caseAndIntroduction/index.vue
+++ b/web/src/js/view/newhome/module/caseAndIntroduction/index.vue
@@ -6,30 +6,29 @@
         <div class="admin-left-content">
           <div class="content-box" v-for="(item, index) in demos" :key="index">
             <div style="width: 30%;margin: auto;">
-              <img style="width: 100%;margin-top:10px" :src="getsrc(item,index)" alt />
+              <img style="width: 100%;margin-top:10px" :src="getsrc(item)" alt />
             </div>
 
             <div style="margin-top: 15px;">
-              <h3 style="font-size: 12px;text-align: center;margin-bottom: 25px;">{{index}}</h3>
-              <div class="demo-item" v-for="(text,index) in item" :key="index">
+              <h3 style="font-size: 12px;text-align: center;margin-bottom: 25px;">{{item.title}}</h3>
+              <div class="demo-item" v-for="(text, index) in item.demoInstances" :key="index">
                 <a class="demo-title" :href="filterValid(text.url)">{{text.title}}</a>
-
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="admin-box-right">
+      <!-- <div class="admin-box-right">
         <p class="title">{{$t('message.GLY.KSRM')}}</p>
         <div class="admin-box-video">
-          <div v-for="(item,index) in data.videos" :key="index" class="video-item" @click="play(item)">
+          <div v-for="(item, index) in videos" :key="index" class="video-item" @click="play(item)">
             <video width="100%" height="100" controls>
               <source :src="item.url" type="video/mp4" />
             </video>
             <h3 class="video-title">{{item.title}}</h3>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <Modal
       v-model="showVideo"
@@ -44,13 +43,20 @@
   </div>
 </template>
 <script>
+import api from '@/js/service/api';
+
 export default {
-  props: {
-    applist: Array,
-    data: Object
-  },
   data() {
+    const src = {
+      workflow: require("../../images/edit1.png"),
+      application: require("../../images/333.png"),
+      visualization: require("../../images/111.png"),
+      工作流: require("../../images/edit1.png"),
+      应用场景: require("../../images/333.png"),
+      可视化: require("../../images/111.png")
+    };
     return {
+      src,
       menuurl: [
         {title: 'Schedulis',url: '/workspaceHome/scheduleCenter',icon: 'fi-schedule'},
         {title: 'Scriptis',url: '/home',icon: 'fi-scriptis'},
@@ -58,27 +64,33 @@ export default {
       ],
       showVideo: false,
       video: {},
-      demos: {
-
-      }
+      demos: [],
+      videos: []
     }
   },
-  watch: {
-    data(val) {
-      let temDemo = {workflow: '',
-        application: '',
-        visualization: '',
-        工作流: '',
-        应用场景: '',
-        可视化: '',}
-      Object.keys(temDemo).map((key) => {
-        if (this.data.demos[key]) {
-          this.demos[key] = this.data.demos[key]
-        }
-      })
-    }
+  created() {
+    // this.getVideos();
+    this.getDemos();
   },
   methods: {
+    getDemos() {
+      this.loading = true;
+      api.fetch('dss/workspaces/demos', {}, 'get').then((res) => {
+        this.demos = res.demos;
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+    getVideos() {
+      this.loading = true;
+      api.fetch('dss/workspaces/videos', {}, 'get').then((res) => {
+        this.videos = res.videos;
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
     // 过滤a标签url，防止XSS
     filterValid(url) {
       const reg = /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
@@ -88,17 +100,8 @@ export default {
         return 'javascript:;';
       }
     },
-    getsrc(v, index) {
-      let src = {
-        workflow: require("../images/edit1.png"),
-        application: require("../images/333.png"),
-        visualization: require("../images/111.png"),
-        工作流: require("../images/edit1.png"),
-        应用场景: require("../images/333.png"),
-        可视化: require("../images/111.png"),
-
-      };
-      return src[index];
+    getsrc(item) {
+      return this.src[item.name];
     },
     play(item) {
       this.showVideo = true;
@@ -123,7 +126,7 @@ export default {
     display: flex;
     justify-content: space-between;
     .admin-box-left {
-      padding: 10px;
+      padding: 0px 10px;
       // width: 70%;
       flex: 1;
       .content-box {
diff --git a/web/src/js/view/newhome/module/workspace/index.scss b/web/src/js/view/newhome/module/workspace/index.scss
index 45d914b50b..b15cd07a98 100644
--- a/web/src/js/view/newhome/module/workspace/index.scss
+++ b/web/src/js/view/newhome/module/workspace/index.scss
@@ -19,133 +19,158 @@
   .workspace-main {
     padding: 10px 25px;
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: flex-start;
 
-    .left {
+    .workspace-main-left {
       flex: 1;
-      box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
-      border-color: #eee;
-      min-height: 500px;
-
-      .workspace-type-header {
-        padding: 10px 20px 0;
-        line-height: 30px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-
-        .workspace-type-header-label {
-          font-size: 14px;
-          display: inline-block;
-          margin: 0 5px;
-          font-weight: 900;
-        }
-      }
-
-      .workspace-create-search {
-        padding: 0 35px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        margin: 10px 0 50px;
-
-        .workspace-create {
-          flex-basis: 200px;
+      .left {
+        // flex: 1;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
+        border-color: #eee;
+        max-height: 500px;
+
+        .workspace-create-search {
+          padding: 0 35px;
           display: flex;
           justify-content: flex-start;
           align-items: center;
-          padding: 15px 10px;
-
-          &:hover {
-            box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
-            border-radius: 4px;
+          margin: 10px 0 20px 0;
+
+          .workspace-create {
+            flex-basis: 200px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding: 15px 10px;
+            &:hover {
+              box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
+              border-radius: 4px;
+            }
+            .workspace-create-text {
+              margin-left: 10px;
+              cursor: pointer;
+            }
           }
 
-          .workspace-create-text {
-            margin-left: 10px;
-            cursor: pointer;
+          .header-search {
+            flex: 50%;
           }
         }
 
-        .header-search {
-          flex: 50%;
+        .item-header {
+          font-size: 14px;
+          margin: 20px 15px 10px;
+          font-weight: bold;
+          padding-left: 5px;
+          border-left: 3px solid $primary-color;
         }
-      }
-
-      .item-header {
-        font-size: 14px;
-        margin: 20px 25px 10px;
-        font-weight: bold;
-        padding-left: 5px;
-        border-left: 3px solid $primary-color;
-      }
-
-      .workspace-content {
-        .content-item {
-          .workspace-item {
-            cursor: pointer;
-            height: 180px;
-            margin: 15px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
-            background: #fff;
-            padding: 10px;
-            position: relative;
-            // background: url("../../../../../assets/images/workspace.png") center center no-repeat;
-            background-size: cover;
-            min-width: 222px;
-
-            .name {
-              display: block;
-              font-size: 16px;
-              font-weight: 600;
-              color: white;
-            }
 
-            .desc {
-              width: 100%;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 2;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              word-break: break-all;
-              color: white;
-            }
+        .workspace-content {
+          .content-item {
+            .workspace-item {
+              cursor: pointer;
+              height: 180px;
+              margin: 15px;
+              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+              background: #fff;
+              padding: 10px;
+              position: relative;
+              background: url("../../images/workspace.png") center center no-repeat;
+              background-size: cover;
+              min-width: 222px;
+              .name {
+                display: block;
+                font-size: 16px;
+                font-weight: 600;
+                color: white;
+              }
 
-            .lable-list {
-              position: absolute;
-              left: 10px;
-              bottom: 30px;
-              display: flex;
-              justify-content: flex-start;
-              align-items: flex-start;
-              width: 100%;
-
-              .item {
-                display: inline-block;
-                font-size: 10px;
-                padding: .3em .9em;
-                margin: 0 .5em .5em 0;
-                white-space: nowrap;
-                background-color: #f1f8ff;
-                border-radius: 3px;
-                color: #0366d6;
+              .desc {
+                width: 100%;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                max-width: 31%;
+                word-break: break-all;
+                color: white;
+              }
+
+              .lable-list {
+                position: absolute;
+                left: 10px;
+                bottom: 30px;
+                display: flex;
+                justify-content: flex-start;
+                align-items: flex-start;
+                width: 100%;
+                .item {
+                  display: inline-block;
+                  font-size: 10px;
+                  padding: .3em .9em;
+                  margin: 0 .5em .5em 0;
+                  white-space: nowrap;
+                  background-color: #f1f8ff;
+                  border-radius: 3px;
+                  color: #0366d6;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  max-width: 31%;
+                }
               }
-            }
 
-            .editor {
-              position: absolute;
-              right: 10px;
-              bottom: 10px;
+              .editor {
+                position: absolute;
+                right: 10px;
+                bottom: 10px;
+              }
             }
           }
+          .workspace-table {
+            margin: 20px 15px 10px;
+          }
+          .page {
+            display: flex;
+            justify-content: flex-end;
+          }
         }
       }
     }
+
+    .workspace-main-right {
+      flex-basis: 200px;
+      padding: 0 20px 0 20px;
+      .video-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .title {
+        font-size: 14px;
+        border-left: 3px solid #2d8cf0;
+        padding-left: 5px;
+        font-weight: 900;
+        height: 25px;
+        color: #333;
+      }
+      .admin-box-video {
+        padding: 15px 15px 15px 0;
+      }
+      .video-title {
+        padding: 5px 0;
+        text-align: center;
+        font-size: 12px;
+      }
+      .video-item {
+        background: #f2f2f2;
+        margin-bottom: 20px;
+        cursor: pointer;
+      }
+      video {
+        pointer-events: none
+      }
+    }
   }
 
 }
diff --git a/web/src/js/view/newhome/module/workspace/index.vue b/web/src/js/view/newhome/module/workspace/index.vue
index 953c1f68a4..ea82a3da70 100644
--- a/web/src/js/view/newhome/module/workspace/index.vue
+++ b/web/src/js/view/newhome/module/workspace/index.vue
@@ -8,56 +8,93 @@
       </div>
     </div>
     <div class="workspace-main">
-      <Card class="left">
-        <div class="workspace-type-header">
-          <svg t="1573033007700" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="113086" width="20" height="20"><path d="M451.310305 529.689024L50.690586 339.234666a72.444333 72.444333 0 0 1 0-135.09716L451.374302 13.619151a144.888665 144.888665 0 0 1 122.041821 0l400.491726 190.518355a72.444333 72.444333 0 0 1 0 135.033163L573.416123 529.753021c-38.71804 17.98309-83.387778 17.98309-122.041821 0z" fill="#5580EB" p-id="113087"></path><path d="M512.299218 784.460127c-29.118526 0-57.853071-6.655663-84.027747-19.519012l-392.940107-195.190119a54.333249 54.333249 0 1 1 48.18956-96.891095l392.556127 195.190119c22.91084 11.135436 49.597489 11.135436 72.444333 0l392.940107-195.190119a54.333249 54.333249 0 1 1 48.189561 96.891095l-393.324088 195.190119a189.43041 189.43041 0 0 1-84.027746 19.519012z m0 229.620375a189.43041 189.43041 0 0 1-84.027747-19.519012l-392.940107-195.190118a54.333249 54.333249 0 1 1 48.18956-96.891095l392.556127 195.190118c22.846843 11.26343 49.597489 11.26343 72.444333 0l392.940107-195.190118a54.333249 54.333249 0 1 1 48.189561 96.827098l-393.324088 195.190119a189.43041 189.43041 0 0 1-84.027746 19.583008z" fill="#5580EB" opacity=".5" p-id="113088"></path></svg>
-          <span class="workspace-type-header-label">{{$t('message.project.applicationStudio')}}</span>
-        </div>
-        <div class="workspace-create-search">
-          <div class="workspace-create">
-            <svg t="1572508997540" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3412" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
-              <path d="M468.89187555 244.16003161L405.84786173 124.9330568H77.68240987v774.65170172h368.68449976c-9.0617679-19.02971259-16.44063605-38.96560197-21.8776968-59.54876049H133.6064632V303.7087921h782.03056989v197.15817876c7.24941431 6.47269136 15.01664395 12.03920592 21.74824296 19.15916642 12.81592889 13.72210569 23.81950419 28.60929581 34.04635654 44.14375507V244.16003161H468.89187555z m-335.28541235-59.67821433h239.74848791l31.45728 59.5487605H133.6064632v-59.5487605z m614.38786371 536.32720592h111.71865284v59.5487605h-111.71865284v119.22697482h-55.92405333v-119.22697482h-111.71865283v-59.5487605h111.71865283v-119.22697481h55.92405333v119.22697481z m-27.83257283-238.32449579c-138.77450272 0-251.39933235 120.00369778-251.39933235 268.09887606 0 148.09517827 112.49537581 268.22832987 251.26987852 268.22832986 138.90395653 0 251.39933235-120.00369778 251.39933234-268.09887605 0-71.07015111-26.40858075-139.29231803-73.52977383-189.64985678s-111.0713837-78.57847309-177.74010468-78.57847309z m-0.12945383 476.64899161c-107.83503803-0.25890765-195.21637136-93.4656632-195.34582519-208.55011555 0.12945383-115.21390617 87.51078717-208.42066173 195.47527902-208.67956939 52.16989235 0 101.36234667 21.74824297 138.2566874 61.10220642 37.02379457 39.35396347 57.21859161 91.78276347 57.21859161 147.57736297-0.12945383 115.21390617-87.64024098 208.55011555-195.60473284 208.55011555z" fill="#2d8cf0" p-id="3413"></path>
-            </svg>
-            <p
-              class="workspace-create-text"
-              style="color:#2d8cf0"
-              @click="createWorkspace">
-              {{ $t('message.workspace.CREATEDWORKSPACE') }}
-            </p>
+      <div class="workspace-main-left">
+        <Card class="left">
+          <div class="workspace-create-search">
+            <div class="workspace-create">
+              <svg t="1572508997540" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3412" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
+                <path d="M468.89187555 244.16003161L405.84786173 124.9330568H77.68240987v774.65170172h368.68449976c-9.0617679-19.02971259-16.44063605-38.96560197-21.8776968-59.54876049H133.6064632V303.7087921h782.03056989v197.15817876c7.24941431 6.47269136 15.01664395 12.03920592 21.74824296 19.15916642 12.81592889 13.72210569 23.81950419 28.60929581 34.04635654 44.14375507V244.16003161H468.89187555z m-335.28541235-59.67821433h239.74848791l31.45728 59.5487605H133.6064632v-59.5487605z m614.38786371 536.32720592h111.71865284v59.5487605h-111.71865284v119.22697482h-55.92405333v-119.22697482h-111.71865283v-59.5487605h111.71865283v-119.22697481h55.92405333v119.22697481z m-27.83257283-238.32449579c-138.77450272 0-251.39933235 120.00369778-251.39933235 268.09887606 0 148.09517827 112.49537581 268.22832987 251.26987852 268.22832986 138.90395653 0 251.39933235-120.00369778 251.39933234-268.09887605 0-71.07015111-26.40858075-139.29231803-73.52977383-189.64985678s-111.0713837-78.57847309-177.74010468-78.57847309z m-0.12945383 476.64899161c-107.83503803-0.25890765-195.21637136-93.4656632-195.34582519-208.55011555 0.12945383-115.21390617 87.51078717-208.42066173 195.47527902-208.67956939 52.16989235 0 101.36234667 21.74824297 138.2566874 61.10220642 37.02379457 39.35396347 57.21859161 91.78276347 57.21859161 147.57736297-0.12945383 115.21390617-87.64024098 208.55011555-195.60473284 208.55011555z" fill="#2d8cf0" p-id="3413"></path>
+              </svg>
+              <p
+                class="workspace-create-text"
+                style="color:#2d8cf0"
+                @click="createWorkspace">
+                {{ $t('message.workspace.createWorkspace') }}
+              </p>
+            </div>
+            <div class="header-search">
+              <Input
+                search
+                class="search-input"
+                :placeholder="$t('message.workspace.searchWorkspace')"
+                @on-search="searchWorkspace"/>
+            </div>
+            <div class="workspace-header-right">
+              <Dropdown @on-click="changeVisual">
+                <Icon type="gear-a" />
+                <a>
+                  {{ $t('message.workspace.display') }}
+                </a>
+                <Dropdown-menu slot="list">
+                  <Dropdown-item v-for="(item, index) in visualCates" :key="index" :name="item.name">{{item.title}}</Dropdown-item>
+                </Dropdown-menu>
+              </Dropdown>
+            </div>
           </div>
-          <div class="header-search">
-            <Input
-              search
-              class="search-input"
-              :placeholder="$t('message.workspace.SEARCHWORKSPACE')"
-              @on-search="searchWorkspace"/>
+          <div class="workspace-content">
+            <h3 class="item-header">
+              <span>{{ $t('message.workspace.workspaceList') }}</span>
+            </h3>
+            <Row class="content-item" v-show="visual === 'card'">
+              <i-col
+                class="workspace-item"
+                :xs="12" :sm="8" :md="4" :lg="4"
+                v-for="item in originWorkspaceData"
+                :key="item.id"
+                @click.native="gotoWorkspace(item)"
+              >
+                <span class="name">{{item.name}}</span>
+                <p class="desc">{{item.description}}</p>
+                <ul class="lable-list">
+                  <template v-for="(tag, tagIndex) in item.label.split(',')">
+                    <li v-if="tag && tagIndex <= 2"  class="item" :key="tagIndex">{{tag}}</li>
+                  </template>
+                </ul>
+                <!-- <Button size="small" class="editor" @click.stop="editor(item)">{{ $t('message.workspace.editWorkspace') }}</Button> -->
+              </i-col>
+            </Row>
+            <div v-show="visual === 'table'" class="workspace-table">
+              <WorkspaceTable
+                :data="originWorkspaceData"
+              />
+            </div>
+            <div class="page">
+              <Page
+                :total="total"
+                size="small"
+                :page-size="pageSize"
+                :current.sync="pageNum"
+                @on-change="changePage"
+              />
+            </div>
           </div>
+        </Card>
+        <caseAndIntroduction />
+      </div>
+      <div class="workspace-main-right">
+        <div class="video-header">
+          <p class="title">{{$t('message.GLY.KSRM')}}</p>
+          <Button type="text" @click="changeVideos">{{$t('message.GLY.HYP')}}</Button>
         </div>
-        <div class="workspace-content">
-          <h3 class="item-header">
-            <span>{{ $t('message.workspace.WORKSPACELIST') }}</span>
-          </h3>
-          <Row
-            class="content-item">
-            <i-col
-              class="workspace-item"
-              :xs="12" :sm="8" :md="6" :lg="5"
-              v-for="item in originWorkspaceData"
-              :key="item.id"
-              @click.native="gotoWorkspace(item)"
-            >
-              <span class="name">{{item.name}}</span>
-              <p class="desc">{{item.description}}</p>
-              <ul class="lable-list">
-                <template v-for="(tag, tagIndex) in item.tags.split(',')">
-                  <li v-if="tag && tagIndex <= 2"  class="item" :key="tagIndex">{{tag}}</li>
-                </template>
-              </ul>
-              <Button size="small" disabled class="editor" @click.stop="editor(item)">{{ $t('message.workspace.Administration') }}</Button>
-            </i-col>
-          </Row>
+        <div class="admin-box-video">
+          <div v-for="(item, index) in videos" :key="index" class="video-item" @click="play(item)">
+            <video width="100%" height="100" controls>
+              <source :src="item.url" type="video/mp4" />
+            </video>
+            <h3 class="video-title">{{item.title}}</h3>
+          </div>
         </div>
-      </Card>
+      </div>
     </div>
     <WorkspaceForm
       ref="workspaceForm"
@@ -74,52 +111,92 @@
 </template>
 <script>
 import api from '@/js/service/api';
+import caseAndIntroduction from '../caseAndIntroduction';
 import WorkspaceForm from './module/workspaceForm.vue';
+import WorkspaceTable from './module/workspaceTable.vue';
 import storage from "@/js/helper/storage";
+
 export default {
   components: {
-    WorkspaceForm
+    WorkspaceForm,
+    WorkspaceTable,
+    caseAndIntroduction: caseAndIntroduction.component,
   },
   data() {
     return {
       loading: false,
       actionType: '',
       currentWorkspaceData: {
-        workspaceName: '',
+        name: '',
         description: '',
-        tags: '',
-        department: '',
-        productName: ''
+        label: '',
+        department: ''
       },
       workspaceShow: false,
       originWorkspaceData: [],
-      cacheData: []
+      cacheData: [],
+      filteredData: [],
+      visual: 'card',
+      videos: [],
+      videoCache: [],
+      visualCates: [
+        { name: 'table', title: this.$t('message.workspace.tableDisplay') },
+        { name: 'card', title: this.$t('message.workspace.cardDisplay') }
+      ],
+      total: null,
+      pageSize: 4,
+      pageNum: 1,
+      videosClick: 1,
+      videosMaxClick: null
     }
   },
   created() {
     this.getWorkspaces();
-
+    this.getVideos();
   },
   methods: {
     getWorkspaces() {
       // 获取工作空间数据
       this.loading = true;
-      api.fetch('dss/getWorkspaces', {}, 'get').then((res) => {
-        this.originWorkspaceData = this.cacheData = res.workspaces;
+      api.fetch('dss/workspaces', {}, 'get').then((res) => {
+        this.filteredData = this.cacheData = res.workspaces;
+        this.initWorkspace();
         this.loading = false;
       }).catch(() => {
         this.loading = false;
-      })
+      });
+    },
+    initWorkspace() {
+      this.total = this.cacheData.length;
+      if (this.total < this.pageSize){
+        this.originWorkspaceData = this.cacheData;
+      } else {
+        this.originWorkspaceData = this.cacheData.slice(0, this.pageSize);
+      }
+    },
+    changePage(currentPage){
+      const start = ( currentPage - 1 ) * this.pageSize;
+      const end = currentPage * this.pageSize;
+      this.originWorkspaceData = this.filteredData.slice(start, end);
+    },
+    getVideos() {
+      this.loading = true;
+      api.fetch('dss/workspaces/videos', {}, 'get').then((res) => {
+        this.videoCache = res.videos;
+        this.initVideos();
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
     },
     createWorkspace() {
       this.actionType = 'add';
       this.workspaceShow = true;
       this.currentWorkspaceData = {
-        workspaceName: '',
+        name: '',
         description: '',
-        tags: '',
+        label: '',
         department: '',
-        productName: ''
       }
     },
     editor(workspace) {
@@ -131,25 +208,51 @@ export default {
       // 通过名称模糊搜索
       value = value.trim()
       if (value) {
-        this.originWorkspaceData = this.cacheData.filter((item) => item.name.indexOf(value) != -1);
+        this.filteredData = this.cacheData.filter((item) => item.name.indexOf(value) != -1);
       } else {
-        this.originWorkspaceData = this.cacheData;
+        this.filteredData = this.cacheData;
       }
+      this.total = this.filteredData.length;
+      // 搜索后回到第一页
+      this.pageNum = 1;
+      this.changePage(this.pageNum);
     },
     gotoWorkspace(workspace) {
-      this.$router.push({path: '/workspaceHome/homepage', query: {workspaceId: workspace.id}})
+      this.$router.push({ path: '/workspace', query: { workspaceId: workspace.id }});
     },
     workspaceShowAction(val) {
       this.workspaceShow = val;
     },
     workspaceConfirm(params) {
-      api.fetch('dss/createWorkspace', params, 'post').then(() => {
-        this.$Message.success(this.$t('message.workspace.CREATEDSCUCCESS'));
-        // 重新获取工作空间列表
-        this.getWorkspaces();
+      api.fetch('dss/workspaces', params, 'post').then((res) => {
+        this.$Message.success(this.$t('message.workspace.createdSuccess'));
+        // 创建成功后跳到工作空间首页
+        this.gotoWorkspace(res);
       }).catch(() => {
-        this.$Message.error(this.$t('message.workspace.CREATEDDFAILD'));
+        this.$Message.error(this.$t('message.workspace.createdFailed'));
       })
+    },
+    changeVisual(type) {
+      this.visual = type;
+      // 切换视图后回到第一页
+      this.pageNum = 1;
+      this.changePage(this.pageNum);
+    },
+    changeVideos() {
+      this.videosClick += 1;
+      this.videosClick = this.videosClick > this.videosMaxClick ? 1 : this.videosClick;
+      const start = ( this.videosClick - 1 ) * this.pageSize;
+      const end = this.videosClick * this.pageSize;
+      this.videos = this.videoCache.slice(start, end);
+    },
+    initVideos() {
+      const videosTotal = this.videoCache.length;
+      this.videosMaxClick = Math.ceil(videosTotal / this.pageSize);
+      if (videosTotal < this.pageSize) {
+        this.videos = this.videoCache;
+      } else {
+        this.videos = this.videoCache.slice(0, this.pageSize);
+      }
     }
   }
 }
diff --git a/web/src/js/view/newhome/module/workspace/module/workspaceForm.vue b/web/src/js/view/newhome/module/workspace/module/workspaceForm.vue
index e297a552ad..f68e2a0a8c 100644
--- a/web/src/js/view/newhome/module/workspace/module/workspaceForm.vue
+++ b/web/src/js/view/newhome/module/workspace/module/workspaceForm.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal
     v-model="ProjectShow"
-    :title="actionType === 'add' ? $t('message.workspace.NEWWORKSPACE') : $t('message.workspace.EIDITOR')"
+    :title="actionType === 'add' ? $t('message.workspace.newWorkspace') : $t('message.workspace.editor')"
     :closable="false">
     <Form
       :label-width="100"
@@ -11,49 +11,42 @@
       :rules="formValid"
       v-if="ProjectShow">
       <FormItem
-        :label="$t('message.workspace.WORKNAME')"
-        prop="workspaceName">
+        :label="$t('message.workspace.workName')"
+        prop="name">
         <Input
-          v-model="projectDataCurrent.workspaceName"
+          v-model="projectDataCurrent.name"
           :placeholder="$t('message.newConst.enterName')"
-          :disabled="actionType === 'modify'"></Input>
+          :disabled="actionType === 'modify'" />
       </FormItem>
       <FormItem
-        :label="$t('message.workspace.DEPARTMNET')"
+        :label="$t('message.workspace.department')"
         prop="department">
         <Select
           v-model="projectDataCurrent.department"
-          :placeholder="$t('message.workspace.SELECTDEPARTMNET')">
+          :placeholder="$t('message.workspace.selectDepartment')">
           <Option
             v-for="(item, index) in departments"
-            :label="item.frontName"
-            :value="item.frontName"
+            :label="item.name"
+            :value="String(item.id)"
             :key="index"/>
         </Select>
       </FormItem>
       <FormItem
-        :label="$t('message.workspace.PRODUCT')"
-        prop="productName">
-        <Input
-          v-model="projectDataCurrent.productName"
-          :placeholder="$t('message.workspace.ENTERPRODUCTNAME')"></Input>
-      </FormItem>
-      <FormItem
-        :label="$t('message.workspace.LABEL')"
-        prop="business">
+        :label="$t('message.workspace.label')"
+        prop="label">
         <we-tag
-          :new-label="$t('message.project.addBusiness')"
-          :tag-list="projectDataCurrent.tags"
+          :new-label="$t('message.workspace.addLabel')"
+          :tag-list="projectDataCurrent.label"
           @add-tag="addTag"
           @delete-tag="deleteTag"></we-tag>
       </FormItem>
       <FormItem
-        :label="$t('message.workspace.DESCRIPTION')"
+        :label="$t('message.workspace.description')"
         prop="description">
         <Input
           v-model="projectDataCurrent.description"
           type="textarea"
-          :placeholder="$t('message.project.pleaseInputProjectDesc')"></Input>
+          :placeholder="$t('message.workspace.pleaseInputWorkspaceDesc')" />
       </FormItem>
     </Form>
     <div slot="footer">
@@ -93,7 +86,6 @@ export default {
     return {
       ProjectShow: false,
       departments: [],
-      originBusiness: '',
     };
   },
   computed: {
@@ -102,40 +94,44 @@ export default {
     },
     formValid() {
       return {
-        workspaceName: [
+        name: [
           { required: true, message: this.$t('message.newConst.enterName'), trigger: 'blur' },
           { message: `${this.$t('message.newConst.nameLength')}128`, max: 128 },
           { type: 'string', pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: this.$t('message.newConst.validNameDesc'), trigger: 'blur' },
+          { validator: this.checkNameExist, message: this.$t('message.newConst.validNameExist'), trigger: 'blur' },
         ],
         description: [
-          { required: true, message: this.$t('message.project.pleaseInputProjectDesc'), trigger: 'blur' },
-        ],
-        productName: [
-          { required: true, message: this.$t('message.project.selectProduct'), trigger: 'change' },
+          { required: true, message: this.$t('message.workspace.pleaseInputWorkspaceDesc'), trigger: 'blur' },
         ],
         department: [
-          { required: true, message: this.$t('message.project.selectAppArea'), trigger: 'change', type: 'string' },
+          { required: true, message: this.$t('message.workspace.selectDepartment'), trigger: 'change' },
         ],
       }
     }
   },
   mounted() {
-    api.fetch('/dss/listDepartments', 'get').then((res) => {
-      this.departments = res.departments
-    })
+    api.fetch('dss/workspaces/departments', 'get').then((res) => {
+      this.departments = res.departments;
+    });
   },
   watch: {
     addProjectShow(val) {
       this.ProjectShow = val;
     },
     ProjectShow(val) {
-      if (val) {
-        this.originBusiness = this.projectDataCurrent.tags;
-      }
       this.$emit('show', val);
     },
   },
   methods: {
+    checkNameExist(rule, value, callback) {
+      api.fetch('dss/workspaces/exists', { name: value }, 'get').then((res) => {
+        if (res.workspaceNameExists) {
+          callback(new Error('不可重复'));
+        } else {
+          callback();
+        }
+      });
+    },
     Ok() {
       this.$refs.projectForm.validate((valid) => {
         if (valid) {
@@ -148,20 +144,19 @@ export default {
     },
     Cancel() {
       this.ProjectShow = false;
-      this.projectData.tags = this.originBusiness;
     },
     addTag(label) {
-      if (this.projectDataCurrent.tags) {
-        this.projectDataCurrent.tags += `,${label}`;
+      if (this.projectDataCurrent.label) {
+        this.projectDataCurrent.label += `,${label}`;
       } else {
-        this.projectDataCurrent.tags = label;
+        this.projectDataCurrent.label = label;
       }
     },
     deleteTag(label) {
-      const tmpArr = this.projectDataCurrent.tags.split(',');
+      const tmpArr = this.projectDataCurrent.label.split(',');
       const index = tmpArr.findIndex((item) => item === label);
       tmpArr.splice(index, 1);
-      this.projectData.tags = tmpArr.toString();
+      this.projectData.label = tmpArr.toString();
     }
   },
 };
diff --git a/web/src/js/view/newhome/module/workspace/module/workspaceTable.vue b/web/src/js/view/newhome/module/workspace/module/workspaceTable.vue
new file mode 100644
index 0000000000..da1eea4be9
--- /dev/null
+++ b/web/src/js/view/newhome/module/workspace/module/workspaceTable.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="workspace-table">
+    <Table :columns="columns" :data="tableData" style="margin-bottom: 10px;">
+      <template slot-scope="{ row }" slot="name">
+        <span>{{ row.name }}</span>
+      </template>
+
+      <template slot-scope="{ row }" slot="createTime">
+        <span>{{ dateFormat(row.createTime) }}</span>
+      </template>
+
+      <template slot-scope="{ row }" slot="label" >
+        <Tag color="blue" v-for="(label, index) in row.label.split(',')" :key="index">{{label}}</Tag>
+      </template>
+
+      <template slot-scope="{ row }" slot="description">
+        <span>{{ row.description }}</span>
+      </template>
+    </Table>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        {
+          title: this.$t('message.workspace.workName'),
+          slot: 'name'
+        },
+        {
+          title: this.$t('message.workspace.createTime'),
+          slot: 'createTime',
+          sortable: true
+        },
+        {
+          title: this.$t('message.workspace.label'),
+          slot: 'label'
+        },
+        {
+          title: this.$t('message.workspace.description'),
+          slot: 'description',
+          ellipsis: true
+        }
+      ]
+    }
+  },
+  watch: {
+    data(val) {
+      // 保存取到的所有数据
+      this.tableData = val;
+    }
+  },
+  methods: {
+    dateFormat(date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss');
+    },
+  }
+}
+</script>