diff --git a/frontend/src/request/plugin.ts b/frontend/src/request/plugin.ts
index 7e19bed84c4b1898282559fd737258e340b7fa6e..b8594cf11c1cd5a3a81703057970e6a5078397f7 100644
--- a/frontend/src/request/plugin.ts
+++ b/frontend/src/request/plugin.ts
@@ -15,4 +15,30 @@ export function getPlugins() {
         url: '/plugins',
         method: 'get',
     })
-}
\ No newline at end of file
+}
+
+export function addPlugin(data: any) {
+    return request({
+        url: '/plugins',
+        method: 'put',
+        data
+    })
+}
+
+// 启用/停用插件
+export function togglePlugin(data: any) {
+    return request({
+        url: '/plugins/' + data.uuid,
+        method: 'post',
+        data
+    })
+}
+
+//删除插件
+export function deletePlugins(data: any) {
+    return request({
+        url: '/plugins/' + data.UUID,
+        method: 'delete',
+        data
+    })
+}
diff --git a/frontend/src/views/Plugin/Plugin.vue b/frontend/src/views/Plugin/Plugin.vue
index f98b2b3bb0687772a3db8261685726b501a36391..69ce59d371504dcd1d2696d2729dea99e8fd30ca 100644
--- a/frontend/src/views/Plugin/Plugin.vue
+++ b/frontend/src/views/Plugin/Plugin.vue
@@ -1,9 +1,8 @@
 <template>
     <div class="container">
-        <PGTable :data="plugins" title="插件列表" :showSelect="true" :total="total" :currentPage="currentPage">
+        <PGTable :data="plugins" title="插件列表" :total="total" :currentPage="currentPage">
             <template v-slot:action>
-                <el-button type="primary">添加插件</el-button>
-                <el-button type="primary">移除</el-button>
+                <el-button type="primary" @click="displayDialog = true">添加插件</el-button>
             </template>
             <template v-slot:content>
                 <el-table-column prop="name" label="名称" width="150">
@@ -21,14 +20,19 @@
                 </el-table-column>
                 <el-table-column label="操作" fixed="right">
                     <template #default="scope">
-                        <el-button size="small" type="primary" plain name="default_all">
+                        <el-button type="primary" plain name="default_all"
+                            @click="togglePluginState(scope.row)">
                             {{ scope.row.enabled === 1 ? '禁用' : '启用' }}
                         </el-button>
+                        <el-button type="danger"  @click="onDeletePlugin(scope.row)">移除</el-button>
                     </template>
                 </el-table-column>
             </template>
         </PGTable>
-    </div>
+        <el-dialog title="添加插件" v-model="displayDialog" width="560px">
+            <AddPlugin @pluginUpdated="updatePluginList" @close="displayDialog = false" />
+        </el-dialog>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -36,16 +40,24 @@ import { ref, onMounted } from "vue";
 import { ElMessage } from 'element-plus';
 
 import PGTable from "@/components/PGTable.vue";
+import AddPlugin from "./components/AddPlugin.vue";
 
-import { getPluginsPaged } from "@/request/plugin";
+import {  updatePlugins } from "@/views/Plugin/plugin";
+import { getPluginsPaged, togglePlugin, deletePlugins } from "@/request/plugin";
 import { RespCodeOK } from "@/request/request";
 
+const displayDialog = ref(false)
+
 const plugins = ref([])
 const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
 
 onMounted(() => {
+    updatePluginList()
+})
+
+function updatePluginList() {
     getPluginsPaged({
         page: currentPage.value,
         size: pageSize.value,
@@ -61,7 +73,54 @@ onMounted(() => {
     }).catch((err: any) => {
         ElMessage.error("failed to get plugins:" + err.msg)
     })
-})
+}
+
+function togglePluginState(item: any) {
+    let targetEnabled = item.enabled === 1 ? 0 : 1
+    togglePlugin({ uuid: item.uuid, enable: targetEnabled }).then((res:any) => {
+        if (res.code === RespCodeOK) {
+            ElMessage.success(res.msg);
+            // 更新插件列表
+            updatePluginList();
+            // 更新页面插件路由、sidebar等
+            updatePlugins();
+            // 删除插件tagview
+            if (targetEnabled === 0) {
+                clearTagview(item);
+            }
+        } else {
+            ElMessage.error(res.msg);
+        }
+    })
+}
+
+function onDeletePlugin(item: any) {
+    deletePlugins({ UUID: item.uuid}).then((res:any) => {
+        if (res.code === RespCodeOK) {
+            ElMessage.success(res.msg);
+            // 更新插件列表
+            updatePluginList();
+            // 更新页面插件路由、sidebar等
+            updatePlugins();
+            // 删除插件tagview
+            clearTagview(item);
+        } else {
+            ElMessage.error(res.msg);
+        }
+    })
+}
+
+import { tagviewStore} from '@/stores/tagview';
+function clearTagview(item:any) {
+    for (let i = 0; i < tagviewStore().taginfos.length; i++) {
+        if (tagviewStore().taginfos[i].path === "/plugin-"+item.name) {
+            tagviewStore().taginfos.splice(i, 1)
+        }
+    }
+}
+
+
+
 
 </script>
 
diff --git a/frontend/src/views/Plugin/components/AddPlugin.vue b/frontend/src/views/Plugin/components/AddPlugin.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33c5a602caef50a86fade65df7c4a86e71ad769d
--- /dev/null
+++ b/frontend/src/views/Plugin/components/AddPlugin.vue
@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+            <el-form-item label="插件名称:" prop="name">
+                <el-input class="ipInput" controls-position="right" v-model="form.name" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="主机地址:" prop="url">
+                <el-input class="ipInput" controls-position="right" v-model="form.url" autocomplete="off"></el-input>
+            </el-form-item>
+        </el-form>
+
+        <div class="dialog-footer">
+            <el-button type="primary" @click="onAddPlugin">确 定</el-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineEmits } from "vue";
+import { ElMessage } from 'element-plus';
+
+import { RespCodeOK } from "@/request/request";
+import { addPlugin } from '@/request/plugin';
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '插件名称不能为空',
+            trigger: "blur"
+        },
+    ],
+    url: [
+        {
+            required: true,
+            message: 'url不能为空',
+            trigger: "blur"
+        },
+    ]
+}
+
+const emits = defineEmits(["pluginUpdated", "close"])
+
+const formRef = ref()
+const form = ref<any>({
+    name: "",
+    url: "",
+});
+
+function onDepartSelected(data: any) {
+    if (data) {
+        form.value.departName = data.label;
+        form.value.departId = data.id;
+        form.value.departPid = data.pid;
+    }
+}
+
+function onAddPlugin() {
+    let params = {
+        name: form.value.name,
+        url: form.value.url,
+    }
+    formRef.value.validate((valid: boolean) => {
+        if (valid) {
+            addPlugin(params).then((res: any) => {
+                if (res.code === RespCodeOK) {
+                    emits('pluginUpdated')
+                    ElMessage.success(res.msg);
+                    formRef.value.resetFields();
+                } else {
+                    ElMessage.error("添加插件失败:"+ res.msg);
+                }
+            }).catch((err: any) => {
+                ElMessage.error("添加插件失败2:"+ err.msg);
+                emits('close')
+            });
+            emits('close')
+        } else {
+            ElMessage.error("内容填写错误");
+        }
+    });
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+    text-align: right;
+}
+</style>
\ No newline at end of file