diff --git a/automation/web/src/api/dangerousHostApi.ts b/automation/web/src/api/dangerousHostApi.ts
new file mode 100644
index 0000000000000000000000000000000000000000..51e5973700627eaaeee51a0ce5ec0541f76a64ae
--- /dev/null
+++ b/automation/web/src/api/dangerousHostApi.ts
@@ -0,0 +1,52 @@
+
+import request from '@/utils/request';
+export const getDangerousRuleList = (data: any) => {
+  // 处理数组参数，将数组转换为字符串
+  const processedData = { ...data };
+  return request({
+    url: `/dangerousRule/list`,
+    method: 'get',
+    params: processedData,
+  });
+};
+export const getScriptType = () => {
+  return request({
+    url: `/enum/scriptType`,
+    method: 'get',
+  });
+};
+export const getAction = () => {
+  return request({
+    url: `/enum/ruleAction`,
+    method: 'get',
+  });
+};
+export const dangerousRuleAdd = (data: any) => {
+  return request({
+    url: `/dangerousRule/add`,
+    method: 'post',
+    data: data,
+  });
+};
+export const dangerousRuleUpdate = (data: any) => {
+  return request({
+    url: `/dangerousRule/update`,
+    method: 'put',
+    data: data,
+  });
+};
+
+export const dangerousRuleDelete = (data: any) => {
+  return request({
+    url: `/dangerousRule/delete`,
+    method: 'delete',
+    data: data,
+  });
+};
+export const dangerousRuleChangeStatus = (data: any) => {
+  return request({
+    url: `/dangerousRule/changeStatus`,
+    method: 'put',
+    data: data,
+  });
+};
diff --git a/automation/web/src/views/dangerous/form/pagination.vue b/automation/web/src/views/dangerous/form/pagination.vue
new file mode 100644
index 0000000000000000000000000000000000000000..470a4c4c3f49558d4e442ba38885ac94356a3fcf
--- /dev/null
+++ b/automation/web/src/views/dangerous/form/pagination.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="pagination">
+    <el-pagination
+      size="small"
+      background
+      @size-change="handleSizeChangeFun"
+      @current-change="handleCurrentChangeFun"
+      :current-page="props.tablePagination.page"
+      :page-sizes="[10, 20, 50, 75, 100]"
+      :page-size="props.tablePagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="props.total"
+    >
+    </el-pagination>
+  </div>
+</template>
+<script lang="ts" setup>
+import { defineEmits, defineProps } from 'vue';
+
+const props = defineProps({
+  tablePagination: {
+    type: Object,
+    required: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'handleSizeChange', size: number): void;
+  (e: 'handleCurrentChange', page: number): void;   
+}>();
+
+const handleSizeChangeFun = (size: number) => {
+  emit('handleSizeChange', size)
+}
+
+const handleCurrentChangeFun = (page: number) => {
+  emit('handleCurrentChange', page)
+}
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/automation/web/src/views/dangerous/index.vue b/automation/web/src/views/dangerous/index.vue
index 17ad13f04ccf546bd26826350660ab293e381953..748ebf6ae4f2159375f1a642fe1c8d445714ca25 100644
--- a/automation/web/src/views/dangerous/index.vue
+++ b/automation/web/src/views/dangerous/index.vue
@@ -1,11 +1,149 @@
 <template>
-  <h1>高危语句规则</h1>
+  <Page>
+    <el-card>
+      <template #header>高危语句规则</template>
+      <el-table :data="tableData" stripe style="width: 100%" v-if="tableData.length > 0">
+        <el-table-column prop="expression" label="语法检测表达式" />
+        <el-table-column prop="description" label="规则说明" />
+        <el-table-column prop="script_types" label="脚本类型"/>
+        <el-table-column prop="action" label="动作">
+          <template #default="scope">
+            <el-tag type="primary" size="small">{{scope.row.action}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="" label="操作" width="180">
+          <template #default="scope">
+            <div class="operation-box">
+              <el-switch v-model="scope.row.status" size="small"  @click="handleSwitch(scope.row)" />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <template #footer>
+        <Pagination v-if="tableData.length > 0" ref="paginationRef" :total="total" :tablePagination="tablePagination" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
+      </template>
+    </el-card>
+  </Page>
 </template>
 
 <script lang="ts" setup>
-
+import { ref,defineAsyncComponent,onMounted } from 'vue';
+import { getDangerousRuleList,dangerousRuleDelete,dangerousRuleChangeStatus } from '@/api/dangerousHostApi';
+import { ElMessage,ElMessageBox } from 'element-plus'
+const Pagination = defineAsyncComponent(() => import('./form/pagination.vue')); 
+const paginationRef = ref();
+let total:number = 0
+const tablePagination = ref({
+  size:10,
+  page:1
+})
+const tableData:any = ref([])
+const isEdit = ref(false)
+const rowData = ref({})
+const handleDelete = async(row: any) => {
+  ElMessageBox.confirm('确定删除该规则吗？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    await deleteDangerousRule(row)
+  })
+}
+const deleteDangerousRule = async (row: any) =>{
+  const data = {
+    id: [row.id]
+  }
+  const res = await dangerousRuleDelete(data)
+  if(res.data.code === 200){
+    getDangerousRuleListData()
+  }else{
+    ElMessage.error(res.data.msg)
+  }
+}
+const handleSwitch = async(row: any) => {
+  console.log('切换', row)
+  const res = await dangerousRuleChangeStatus({id: row.id,status: row.status})
+  if(res.data.code === 200){
+    ElMessage.success('操作成功')
+  }else{
+    row.status = !row.status
+    ElMessage.error(res.data.msg)
+  }
+}
+// 分页切换
+const handleSizeChange = (size: number) => {
+  tablePagination.value.size = size;
+  tablePagination.value.page = 1; // 重置到第一页
+  getDangerousRuleListData();
+};
+const handleCurrentChange = (page: number) => {
+  tablePagination.value.page = page;
+  getDangerousRuleListData();
+};
+const getDangerousRuleListData = async() =>{
+  const res = await getDangerousRuleList({
+    current_page: tablePagination.value.page,
+    page_size: tablePagination.value.size,
+  })
+  if(res.data.code === 200 && res.data.data !== null){
+    tableData.value = res.data.data
+    total = res.data.total
+    tablePagination.value.page = res.data.current_page
+    tablePagination.value.size = res.data.page_size
+  }
+}
+onMounted(()=>{
+  getDangerousRuleListData()
+})
 </script>
 
 <style lang="scss" scoped>
+.add-btn{
+  float: right;
+}
+.operation-box{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .el-switch{
+    margin-right: 10px;
+  }
+  .el-icon{
+    margin-right: 10px;
+    padding: 3px;
+    :hover{
+      cursor: pointer;
+      color: #409eff;
+    }
+  }
+}
 
+.pagination {
+    margin-top: 16px;
+    .el-pagination {
+      text-align: right;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      border-top: 0px;
+      justify-content: flex-end;
+      .el-pagination__sizes,
+      .el-pagination__total {
+        float: left;
+      }
+    }
+  }
+:deep(.pagination .el-pagination) {
+  & > * {
+    flex: none;
+  }
+  .el-pagination__sizes {
+    width: 100%;
+    text-align: left;
+    flex-shrink: 1;
+  }
+  .el-pagination__jump .el-input__inner {
+    min-width: 26px;
+  }
+}
 </style>
\ No newline at end of file