diff --git a/frontend/src/api/system/plugin.js b/frontend/src/api/system/plugin.js
new file mode 100644
index 0000000000..cc22401f55
--- /dev/null
+++ b/frontend/src/api/system/plugin.js
@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+const pathMap = {
+  queryPath: '/api/plugin/pluginGrid/'
+}
+export function pluginLists(page, size, data) {
+  return request({
+    url: pathMap.queryPath + page + '/' + size,
+    method: 'post',
+    data,
+    loading: true
+  })
+}
+
diff --git a/frontend/src/components/AsyncComponent/index.vue b/frontend/src/components/AsyncComponent/index.vue
new file mode 100644
index 0000000000..08eae71e02
--- /dev/null
+++ b/frontend/src/components/AsyncComponent/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <component
+    :is="mode"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import Axios from 'axios'
+
+export default {
+  name: 'AsyncComponent',
+  inheritAttrs: true,
+  props: {
+    // 父组件提供请求地址
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      resData: '',
+      mode: ''
+    }
+  },
+  watch: {
+    url: {
+      immediate: true,
+      async handler(val, oldVal) {
+        if (!this.url) return
+        // Cache 缓存 根据 url 参数
+        if (!window.SyncComponentCache) {
+          window.SyncComponentCache = {}
+        }
+        let res
+        if (!window.SyncComponentCache[this.url]) {
+          window.SyncComponentCache[this.url] = Axios.get(this.url)
+          res = await window.SyncComponentCache[this.url]
+        } else {
+          res = await window.SyncComponentCache[this.url]
+        }
+        const Fn = Function
+        this.mode = new Fn(`return ${res.data}`)()
+      }
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/frontend/src/views/system/plugin/index.vue b/frontend/src/views/system/plugin/index.vue
new file mode 100644
index 0000000000..90feda6ea2
--- /dev/null
+++ b/frontend/src/views/system/plugin/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
+    <complex-table
+      :data="data"
+      :columns="columns"
+      :search-config="searchConfig"
+      :pagination-config="paginationConfig"
+      @search="search"
+    >
+      <template #toolbar>
+        <!-- <el-button @click="create">{{ $t('plugin.local_install') }}</el-button> -->
+
+        <el-upload
+          :action="baseUrl+'api/plugin/upload'"
+          :multiple="false"
+          :show-file-list="false"
+          :file-list="fileList"
+          accept=".zip"
+          :before-upload="beforeUpload"
+          :on-success="uploadSuccess"
+          :on-error="uploadFail"
+          name="file"
+          :headers="headers"
+        >
+          <el-button size="mini" type="primary" :disabled="uploading">
+            <span v-if="!uploading" style="font-size: 12px;">{{ $t('plugin.local_install') }}</span>
+            <span v-if="uploading" style="font-size: 12px;"><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
+          </el-button>
+        </el-upload>
+      </template>
+
+      <el-table-column prop="name" :label="$t('plugin.name')" />
+      <el-table-column prop="free" :label="$t('plugin.free')" />
+      <el-table-column prop="cost" :label="$t('plugin.cost')" />
+
+      <el-table-column :show-overflow-tooltip="true" prop="descript" :label="$t('plugin.descript')" />
+      <el-table-column prop="version" :label="$t('plugin.version')" />
+      <el-table-column prop="creator" :label="$t('plugin.creator')" />
+
+      <el-table-column prop="installTime" :label="$t('plugin.install_time')">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.installTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <fu-table-operations :buttons="buttons" label="操作" fix />
+    </complex-table>
+
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from '@/components/business/LayoutContent'
+import ComplexTable from '@/components/business/complex-table'
+
+import { checkPermission } from '@/utils/permission'
+import { formatCondition } from '@/utils/index'
+import { pluginLists } from '@/api/system/plugin'
+import { getToken } from '@/utils/auth'
+export default {
+
+  components: { ComplexTable, LayoutContent },
+  data() {
+    return {
+      header: '',
+      columns: [],
+      buttons: [
+        {
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
+          show: checkPermission(['user:del'])
+        }
+      ],
+      searchConfig: {
+        useQuickSearch: false,
+        quickPlaceholder: '按名称搜索',
+        components: [
+          { field: 'name', label: '名称', component: 'FuComplexInput' }
+
+        //   {
+        //     field: 'u.enabled',
+        //     label: '状态',
+        //     component: 'FuComplexSelect',
+        //     options: [
+        //       { label: '启用', value: '1' },
+        //       { label: '禁用', value: '0' }
+        //     ],
+        //     multiple: false
+        //   }
+        ]
+      },
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      data: [],
+      uploading: false,
+      baseUrl: process.env.VUE_APP_BASE_API,
+      fileList: [],
+      headers: { Authorization: getToken() }
+
+    }
+  },
+  mounted() {
+    this.search()
+  },
+
+  methods: {
+
+    search(condition) {
+      const temp = formatCondition(condition)
+      const param = temp || {}
+      const { currentPage, pageSize } = this.paginationConfig
+      pluginLists(currentPage, pageSize, param).then(response => {
+        this.data = response.data.listObject
+        this.paginationConfig.total = response.data.itemCount
+      })
+    },
+    beforeUpload(file) {
+      this.uploading = true
+    },
+    uploadFail(response, file, fileList) {
+      this.uploading = false
+    },
+    uploadSuccess(response, file, fileList) {
+      console.log(response)
+      console.log(file)
+      console.log(fileList)
+      //   this.path = response.data.path
+      //   this.fields = response.data.fields
+      //   this.data = response.data.data
+      //   const datas = this.data
+      //   this.$refs.plxTable.reloadData(datas)
+
+      //   if (file.name.lastIndexOf('.') > 0) {
+      //     this.name = file.name.substring(0, file.name.lastIndexOf('.'))
+      //   }
+      //   this.fileList = fileList
+      this.uploading = false
+    },
+
+    del(row) {
+      this.$confirm(this.$t('user.delete_confirm'), '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        cancelButtonText: this.$t('commons.cancel'),
+        type: 'warning'
+      }).then(() => {
+        // delUser(encodeURIComponent(row.userId)).then(res => {
+        //   this.$success(this.$t('commons.delete_success'))
+        //   this.search()
+        // })
+      }).catch(() => {
+        this.$info(this.$t('commons.delete_cancel'))
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>