diff --git a/frontend/src/components/widget/DeWidget/index.vue b/frontend/src/components/widget/DeWidget/index.vue
new file mode 100644
index 0000000000..b7e3e949ae
--- /dev/null
+++ b/frontend/src/components/widget/DeWidget/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>de-widget</div>
+</template>
+
+<script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      widget: null
+    }
+  },
+  computed() {
+    this.widget = ApplicationContext.getService(this.options.name)
+    console.log(this.widget.name)
+  },
+  methods: {
+    onDraw() {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/frontend/src/components/widget/bean/widget.js b/frontend/src/components/widget/bean/widget.js
new file mode 100644
index 0000000000..cc719a363a
--- /dev/null
+++ b/frontend/src/components/widget/bean/widget.js
@@ -0,0 +1,8 @@
+export class Widget {
+  constructor(options = {}) {
+    this.type = options.type
+    this.default_style = options.default_style
+    this.icon = options.icon
+    this.lable = options.label
+  }
+}
diff --git a/frontend/src/components/widget/index.js b/frontend/src/components/widget/index.js
new file mode 100644
index 0000000000..6a389c4a8a
--- /dev/null
+++ b/frontend/src/components/widget/index.js
@@ -0,0 +1,10 @@
+// import store from '@/store'
+const req = require.context('./serviceImpl', false, /\.js$/)
+const requireAll = requireContext => requireContext.keys()
+
+const widgets = {}
+requireAll(req).forEach(key => {
+  widgets[key.replace(/(\.\/|\.js)/g, '')] = req(key).default
+})
+
+export default widgets
diff --git a/frontend/src/components/widget/service/DrawWidgetService.js b/frontend/src/components/widget/service/DrawWidgetService.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/src/components/widget/service/WidgetService.js b/frontend/src/components/widget/service/WidgetService.js
new file mode 100644
index 0000000000..ce6afea887
--- /dev/null
+++ b/frontend/src/components/widget/service/WidgetService.js
@@ -0,0 +1,17 @@
+import store from '@/store'
+export class WidgetService {
+  constructor(options) {
+    this.name = options.name
+    console.log('init parent class WidgetService')
+    this.storeWidget()
+  }
+  storeWidget() {
+    store.dispatch('application/loadBean', { key: this.name, value: this })
+  }
+  initWidget() {
+    console.log('this is initWidget')
+  }
+  toDrawWidget() {
+    console.log('this is toDrawWidget')
+  }
+}
diff --git a/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js b/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js
new file mode 100644
index 0000000000..0e4f28d254
--- /dev/null
+++ b/frontend/src/components/widget/serviceImpl/WidgetServiceImpl.js
@@ -0,0 +1,16 @@
+import { WidgetService } from '../service/WidgetService'
+class WidgetServiceImpl extends WidgetService {
+  constructor(options) {
+    super(options)
+    console.log('init child class WidgetServiceImpl')
+  }
+
+  initWidget() {
+    console.log('this is first initWidget')
+  }
+  toDrawWidget() {
+    console.log('this is first toDrawWidget')
+  }
+}
+const widgetServiceImpl = new WidgetServiceImpl({ name: 'testWidget' })
+export default widgetServiceImpl
diff --git a/frontend/src/main.js b/frontend/src/main.js
index b33e828134..9e950ec670 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -15,11 +15,12 @@ import api from '@/api/index.js'
 import filter from '@/filter/filter'
 import directives from './directive'
 import VueClipboard from 'vue-clipboard2'
+import widgets from '@/components/widget'
 
 import '@/custom-component' // 注册自定义组件
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
-
+Vue.use(widgets)
 Vue.prototype.$api = api
 
 import * as echarts from 'echarts'
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index 38282751a2..ff4205f835 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -17,6 +17,7 @@ const getters = {
   table: state => state.dataset.table,
   loadingMap: state => state.request.loadingMap,
   currentPath: state => state.permission.currentPath,
-  permissions: state => state.user.permissions
+  permissions: state => state.user.permissions,
+  beanMap: state => state.application.beanMap
 }
 export default getters
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 0c7f742e42..c7943cb8bc 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -9,6 +9,7 @@ import dataset from './modules/dataset'
 import chart from './modules/chart'
 import request from './modules/request'
 import panel from './modules/panel'
+import application from './modules/application'
 import animation from './animation'
 import compose from './compose'
 import contextmenu from './contextmenu'
@@ -111,7 +112,8 @@ const data = {
     dataset,
     chart,
     request,
-    panel
+    panel,
+    application
   },
   getters
 }
diff --git a/frontend/src/store/modules/application.js b/frontend/src/store/modules/application.js
new file mode 100644
index 0000000000..44233e23a4
--- /dev/null
+++ b/frontend/src/store/modules/application.js
@@ -0,0 +1,25 @@
+const state = {
+  beanMap: {}
+}
+
+const mutations = {
+
+  ADD_BEAN: (state, { key, value }) => {
+    state.beanMap[key] = value
+  }
+
+}
+
+const actions = {
+  loadBean({ commit }, data) {
+    commit('ADD_BEAN', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/frontend/src/utils/ApplicationContext.js b/frontend/src/utils/ApplicationContext.js
new file mode 100644
index 0000000000..11917f4866
--- /dev/null
+++ b/frontend/src/utils/ApplicationContext.js
@@ -0,0 +1,10 @@
+import store from '@/store'
+export class ApplicationContext {
+  static getService(name) {
+    if (!name) {
+      return null
+    }
+    const bean = store.getters.beanMap[name]
+    return bean
+  }
+}
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index 5eb5686d82..7c24f89a82 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -24,6 +24,7 @@
 </template>
 
 <script>import componentList from '@/custom-component/component-list'
+import { ApplicationContext } from '@/utils/ApplicationContext'
 export default {
   name: 'FilterGroup',
   data() {
@@ -31,6 +32,11 @@ export default {
       componentList
     }
   },
+  mounted() {
+    const wid = ApplicationContext.getService('testWidget')
+    console.log(wid)
+  },
+
   methods: {
     handleDragStart(ev) {
       ev.dataTransfer.effectAllowed = 'copy'