diff --git a/km-console/packages/layout-clusters-fe/src/api/index.ts b/km-console/packages/layout-clusters-fe/src/api/index.ts
index 6967e243e..d07599524 100755
--- a/km-console/packages/layout-clusters-fe/src/api/index.ts
+++ b/km-console/packages/layout-clusters-fe/src/api/index.ts
@@ -108,6 +108,7 @@ const api = {
   getTopicState: (clusterPhyId: number, topicName: string) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/state`),
   getTopicMetadata: (clusterPhyId: number, topicName: string) =>
     getApi(`/clusters/${clusterPhyId}/topics/${topicName}/metadata-combine-exist`),
+  deleteTopicData: () => getApi(`/topics/truncate-topic`),
 
   // 最新的指标值
   getMetricPointsLatest: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/latest-metrics`),
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
index 4c3f88573..0a00fa049 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
@@ -1,7 +1,22 @@
 /* eslint-disable react/display-name */
 import React, { useState, useEffect } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { AppContainer, Input, ProTable, Select, Switch, Tooltip, Utils, Dropdown, Menu, Button, Divider, Tag } from 'knowdesign';
+import {
+  AppContainer,
+  Input,
+  ProTable,
+  Select,
+  Switch,
+  Tooltip,
+  Utils,
+  Dropdown,
+  Menu,
+  Button,
+  Divider,
+  Tag,
+  Popconfirm,
+  notification,
+} from 'knowdesign';
 import { IconFont } from '@knowdesign/icons';
 import Create from './Create';
 import './index.less';
@@ -85,6 +100,21 @@ const AutoPage = (props: any) => {
         setTopicListLoading(false);
       });
   };
+  const deleteTopicData = (record: any) => {
+    console.log(record, 'record');
+    const params = {
+      clusterId: Number(routeParams.clusterId),
+      topicName: record.topicName,
+    };
+    Utils.post(Api.deleteTopicData(), params).then((data: any) => {
+      if (data === null) {
+        notification.success({
+          message: '清除数据成功',
+        });
+        getTopicsList();
+      }
+    });
+  };
   useEffect(() => {
     getTopicsList();
   }, [sortObj, showInternalTopics, searchKeywords, pageIndex, pageSize]);
@@ -247,7 +277,7 @@ const AutoPage = (props: any) => {
         dataIndex: 'desc',
         key: 'desc',
         fixed: 'right',
-        width: 140,
+        width: 200,
         render: (value: any, record: any) => {
           return (
             <div className="operation-list">
@@ -257,6 +287,19 @@ const AutoPage = (props: any) => {
                 <></>
               )}
               {global.hasPermission(ClustersPermissionMap.TOPIC_DEL) ? <Delete record={record} onConfirm={getTopicsList}></Delete> : <></>}
+              {global.hasPermission(ClustersPermissionMap.TOPIC_DEL) ? ( // TODO：替换为清除数据的权限
+                <Popconfirm
+                  placement="topRight"
+                  title={`是否要清空当前Topic的数据？`}
+                  onConfirm={() => deleteTopicData(record)}
+                  okText="是"
+                  cancelText="否"
+                >
+                  <Button type="link">清除数据</Button>
+                </Popconfirm>
+              ) : (
+                <></>
+              )}
             </div>
           );
         },