diff --git a/web/src/views/plugins/dvadmin-drag-h5-web/package.json b/web/src/views/plugins/dvadmin-drag-h5-web/package.json
new file mode 100644
index 0000000..56ff283
--- /dev/null
+++ b/web/src/views/plugins/dvadmin-drag-h5-web/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "luban-h5",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "npm run build:editor && npm run build:engine",
+    "lint": "vue-cli-service lint --fix",
+    "deploy": "rm -rf dist && npm run build:editor && npm run build:engine && ./deploy.sh",
+    "test:e2e": "vue-cli-service test:e2e",
+    "test:unit": "vue-cli-service test:unit",
+    "build:editor": "cross-env PAGE=EDITOR vue-cli-service build",
+    "build:engine": "cross-env PAGE=ENGINE vue-cli-service build --target lib --name engine ./src/engine-entry.js",
+    "build:core_editor": "cross-env PAGE=CORE_EDITOR vue-cli-service build --target lib --name core-editor ./src/components/core/index.js"
+  },
+  "dependencies": {
+    "@luban-h5/lbc-button": "^0.0.3",
+    "@luban-h5/lbp-slide": "^0.0.7",
+    "@luban-h5/lbs-text-align": "^0.0.5",
+    "@luban-h5/plugin-common-props": "0.2.8",
+    "@luban-h5/core-editor": "^0.0.4",
+    "@tinymce/tinymce-vue": "^3",
+    "x-data-spreadsheet": "^1.1.4"
+  },
+  "devDependencies": {
+  }
+}
diff --git a/web/src/views/plugins/dvadmin-drag-h5-web/src/index.js b/web/src/views/plugins/dvadmin-drag-h5-web/src/index.js
new file mode 100644
index 0000000..1eec011
--- /dev/null
+++ b/web/src/views/plugins/dvadmin-drag-h5-web/src/index.js
@@ -0,0 +1,38 @@
+// 导入各个组件
+// 把组件保存到一个数组中
+import { registerMicroApps, start } from 'qiankun'
+const components = [
+]
+
+// 定义 install 方法
+const install = function (Vue) {
+  if (install.installed) return
+  install.installed = true
+  // 遍历组件列表并注册全局组件
+  components.map(component => {
+    Vue.component(component.name, component) // component.name 此处使用到组件vue文件中的 name 属性
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+if (!window.qiankunActiveRule) {
+  window.qiankunActiveRule = []
+}
+window.qiankunActiveRule.push('drag-h5')
+registerMicroApps([
+  {
+    name: 'drag-h5', // 应用的名字
+    entry: '//localhost:8082', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
+    container: '#qiankun', // 容器id
+    activeRule: '/#/drag-h5' // 根据路由 激活的路径
+  }
+])
+start({ prefetch: 'all' })
+export default {
+  // 导出的对象必须具备一个 install 方法
+  install,
+  // 组件列表
+  ...components
+}
diff --git a/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/api.js b/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/api.js
new file mode 100644
index 0000000..cbf45c8
--- /dev/null
+++ b/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/api.js
@@ -0,0 +1,42 @@
+import { request } from '@/api/service'
+
+export const urlPrefix = '/api/dvadmin_drag_h5/work_manager/'
+
+export function GetList (query) {
+  return request({
+    url: urlPrefix,
+    method: 'get',
+    params: query
+  })
+}
+
+export function GetObj (obj) {
+  return request({
+    url: urlPrefix + obj.id + '/',
+    method: 'get'
+  })
+}
+
+export function createObj (obj) {
+  return request({
+    url: urlPrefix,
+    method: 'post',
+    data: obj
+  })
+}
+
+export function UpdateObj (obj) {
+  return request({
+    url: urlPrefix + obj.id + '/',
+    method: 'put',
+    data: obj
+  })
+}
+
+export function DelObj (id) {
+  return request({
+    url: urlPrefix + id + '/',
+    method: 'delete',
+    data: { id }
+  })
+}
diff --git a/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/crud.js b/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/crud.js
new file mode 100644
index 0000000..7e380dc
--- /dev/null
+++ b/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/crud.js
@@ -0,0 +1,179 @@
+export const crudOptions = (vm) => {
+  return {
+    pageOptions: {
+      compact: true
+    },
+    options: {
+      tableType: 'vxe-table',
+      rowKey: true, // 必须设置，true or false
+      rowId: 'id',
+      height: '100%', // 表格高度100%, 使用toolbar必须设置
+      highlightCurrentRow: false
+
+    },
+    rowHandle: {
+      view: {
+        thin: true,
+        text: '',
+        disabled () {
+          // return !vm.hasPermissions('Retrieve')
+        }
+      },
+      width: 230,
+      edit: {
+        thin: true,
+        text: '',
+        disabled () {
+          // return !vm.hasPermissions('Update')
+        }
+      },
+      remove: {
+        thin: true,
+        text: '',
+        disabled () {
+          // return !vm.hasPermissions('Delete')
+        }
+      },
+      custom: [{
+        show (index, row) {
+          return true
+        },
+        disabled () {
+          // return !vm.hasPermissions('Update')
+        },
+        text: '作品设计',
+        type: 'warning',
+        size: 'small',
+        emit: 'workDesign'
+      }]
+
+    },
+    indexRow: { // 或者直接传true,不显示title，不居中
+      title: '序号',
+      align: 'center',
+      width: 100
+    },
+
+    viewOptions: {
+      componentType: 'form'
+    },
+    formOptions: {
+      defaultSpan: 24, // 默认的表单 span
+      width: '35%'
+    },
+    columns: [{
+      title: '关键词',
+      key: 'search',
+      show: false,
+      disabled: true,
+      search: {
+        disabled: false
+      },
+      form: {
+        disabled: true,
+        component: {
+          props: {
+            clearable: true
+          },
+          placeholder: '请输入关键词'
+        }
+      },
+      view: { // 查看对话框组件的单独配置
+        disabled: true
+      }
+    },
+    {
+      title: 'ID',
+      key: 'id',
+      show: false,
+      width: 90,
+      form: {
+        disabled: true
+      }
+    },
+
+    {
+      title: '标题',
+      key: 'title',
+      sortable: true,
+      search: {
+        disabled: false,
+        component: {
+          props: {
+            clearable: true
+          }
+        }
+      },
+      type: 'input',
+      form: {
+        rules: [ // 表单校验规则
+          { required: true, message: '标题必填项' }
+        ],
+        component: {
+          props: {
+            clearable: true
+          },
+          placeholder: '请输入标题'
+        },
+        itemProps: {
+          class: { yxtInput: true }
+        }
+      }
+    },
+    {
+      title: '封面图片',
+      key: 'cover_image_url',
+      type: 'image-uploader',
+      sortable: true,
+      form: {
+        rules: [ // 表单校验规则
+          { required: true, message: '封面图片必填项' }
+        ],
+        component: {
+          props: {
+            clearable: true
+          },
+          placeholder: '请输入封面图片'
+        },
+        itemProps: {
+          class: { yxtInput: true }
+        }
+      }
+    },
+    {
+      title: '是否发布',
+      key: 'is_publish',
+      sortable: true,
+      type: 'radio',
+      dict: {
+        data: vm.dictionary('button_whether_bool')
+      },
+      form: {
+        value: false,
+        component: {
+          placeholder: '请选择是是否发布'
+        }
+      }
+    }, {
+      title: '是否模板',
+      key: 'is_template',
+      sortable: true,
+      type: 'radio',
+      dict: {
+        data: vm.dictionary('button_whether_bool')
+      },
+      form: {
+        value: false,
+        component: {
+          placeholder: '请选择是是否模板'
+        }
+      }
+    }
+    ].concat(vm.commonEndColumns({
+      description: {
+        showForm: true,
+        showTable: true
+      }
+    }))
+  }
+}
diff --git a/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/index.vue b/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/index.vue
new file mode 100644
index 0000000..dac4a44
--- /dev/null
+++ b/web/src/views/plugins/dvadmin-drag-h5-web/src/views/workManager/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
+    <d2-crud-x
+      ref="d2Crud"
+      v-bind="_crudProps"
+      v-on="_crudListeners"
+      @workDesign="workDesign"
+    >
+      <div slot="header">
+        <crud-search
+          ref="search"
+          :options="crud.searchOptions"
+          @submit="handleSearch"
+        />
+        <el-button-group>
+          <el-button
+            size="small"
+            v-permission="'Create'"
+            type="primary"
+            @click="addRow"
+          ><i class="el-icon-plus" /> 创建新作品</el-button
+          >
+        </el-button-group>
+        <crud-toolbar
+          :search.sync="crud.searchOptions.show"
+          :compact.sync="crud.pageOptions.compact"
+          :columns="crud.columns"
+          @refresh="doRefresh()"
+          @columns-filter-changed="handleColumnsFilterChanged"
+        />
+      </div>
+    </d2-crud-x>
+    <div id="vue"></div>
+  </d2-container>
+</template>
+
+<script>
+// 作品管理
+import * as api from './api'
+import { crudOptions } from './crud'
+import { d2CrudPlus } from 'd2-crud-plus'
+export default {
+  name: 'workManager',
+  mixins: [d2CrudPlus.crud],
+  data () {
+    return {
+    }
+  },
+  methods: {
+    getCrudOptions () {
+      return crudOptions(this)
+    },
+    pageRequest (query) {
+      return api.GetList(query)
+    },
+    addRequest (row) {
+      return api.createObj(row)
+    },
+    updateRequest (row) {
+      return api.UpdateObj(row)
+    },
+    delRequest (row) {
+      return api.DelObj(row.id)
+    },
+    workDesign (row) {
+      this.$router.push({ path: '/drag-h5/editor/' + row.row.id })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .yxtInput {
+    .el-form-item__label {
+      color: #49a1ff;
+    }
+  }
+</style>