diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 98bb323..c78c5c1 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -711,6 +711,7 @@ const local: App.I18n.Schema = {
     },
     notifyRecipient: {
       title: 'Notify Recipient List',
+      detail: 'Notify Recipient Detail',
       recipientName: 'Recipient Name',
       notifyType: 'Notification Type',
       notifyAttribute: 'Attribute Information',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 72bfb87..141e8aa 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -707,6 +707,7 @@ const local: App.I18n.Schema = {
     },
     notifyRecipient: {
       title: '通知人列表',
+      detail: '通知人详情',
       recipientName: '接收人名称',
       notifyType: '通知类型',
       notifyAttribute: '属性信息',
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index de7d32b..d89eef3 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -855,6 +855,7 @@ declare namespace App {
         };
         notifyRecipient: {
           title: string;
+          detail: string;
           recipientName: string;
           notifyType: string;
           notifyAttribute: string;
diff --git a/src/views/notify/recipient/index.vue b/src/views/notify/recipient/index.vue
index 27a16b6..6e48d70 100644
--- a/src/views/notify/recipient/index.vue
+++ b/src/views/notify/recipient/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="tsx">
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { ref } from 'vue';
 import { fetchGetNotifyRecipientPageList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
@@ -7,8 +8,13 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { alarmTypeRecord } from '@/constants/business';
 import NotifyRecipientOperateDrawer from './modules/notify-recipient-operate-drawer.vue';
 import NotifyRecipientSearch from './modules/notify-recipient-search.vue';
+import NotifyRecipientDetailDrawer from './modules/notify-recipient-detail-drawer.vue';
 
 const appStore = useAppStore();
+const detailData = ref();
+const detailVisible = defineModel<boolean>('detailVisible', {
+  default: false
+});
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetNotifyRecipientPageList,
@@ -36,7 +42,19 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'recipientName',
       title: $t('page.notifyRecipient.recipientName'),
       align: 'left',
-      minWidth: 120
+      minWidth: 120,
+      render: row => {
+        function showDetailDrawer() {
+          detailData.value = row || null;
+          detailVisible.value = true;
+        }
+
+        return (
+          <n-button text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.recipientName}
+          </n-button>
+        );
+      }
     },
     {
       key: 'notifyType',
@@ -150,6 +168,7 @@ function edit(id: string) {
         @submitted="getData"
       />
     </NCard>
+    <NotifyRecipientDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
   </div>
 </template>
 
diff --git a/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue b/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue
new file mode 100644
index 0000000..45ac9c8
--- /dev/null
+++ b/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { alarmTypeRecord } from '@/constants/business';
+import { $t } from '@/locales';
+import { tagColor } from '@/utils/common';
+import DingDingNotify = Api.NotifyRecipient.DingDingNotify;
+import EmailNotify = Api.NotifyRecipient.EmailNotify;
+
+defineOptions({
+  name: 'NotifyRecipientDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.NotifyRecipient.NotifyRecipient | null;
+}
+
+const props = defineProps<Props>();
+const notifyAttribute = ref<DingDingNotify | EmailNotify>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+watch(
+  () => props.rowData,
+  () => {
+    console.log(props.rowData);
+    const rowData = props.rowData?.notifyAttribute;
+    notifyAttribute.value = JSON.parse(rowData!) || {};
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="$t('page.notifyRecipient.detail')">
+    <NDescriptions label-placement="top" bordered :column="2">
+      <NDescriptionsItem :label="$t('page.notifyRecipient.recipientName')" :span="2">
+        {{ rowData?.recipientName }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.notifyRecipient.notifyType')" :span="2">
+        <NTag :type="tagColor(rowData?.notifyType!)">{{ $t(alarmTypeRecord[rowData?.notifyType!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem v-if="rowData?.notifyType !== 2" :label="$t('page.notifyRecipient.notifyType')" :span="2">
+        {{ (notifyAttribute as DingDingNotify)?.webhookUrl }}
+      </NDescriptionsItem>
+      <NDescriptionsItem v-if="rowData?.notifyType !== 2" :label="$t('page.notifyRecipient.ats')" :span="2">
+        <NTag
+          v-for="(item, index) in (notifyAttribute as DingDingNotify)?.ats"
+          :key="index"
+          :type="tagColor(index)"
+          style="margin-right: 10px"
+        >
+          {{ item }}
+        </NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem v-if="rowData?.notifyType == 2" :label="$t('page.notifyRecipient.tos')" :span="2">
+        <NTag
+          v-for="(item, index) in (notifyAttribute as EmailNotify)?.tos"
+          :key="index"
+          :type="tagColor(index)"
+          style="margin-right: 10px"
+        >
+          {{ item }}
+        </NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.notifyRecipient.description')" :span="2">
+        {{ rowData?.description }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>
diff --git a/src/views/notify/scene/index.vue b/src/views/notify/scene/index.vue
index 33bf9db..05bc1b0 100644
--- a/src/views/notify/scene/index.vue
+++ b/src/views/notify/scene/index.vue
@@ -8,6 +8,7 @@ import NotifyConfigOperateDrawer from '@/views/notify/scene/modules/notify-confi
 import NotifyConfigSearch from '@/views/notify/scene/modules/notify-config-search.vue';
 import StatusSwitch from '@/components/common/status-switch.vue';
 import { jobNotifyScene, retryNotifyScene } from '@/constants/business';
+import { tagColor } from '@/utils/common';
 
 const appStore = useAppStore();
 
@@ -74,24 +75,14 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
           return null;
         }
 
-        const tagMap: Record<number, NaiveUI.ThemeColor> = {
-          1: 'warning',
-          2: 'info',
-          3: 'warning',
-          4: 'success'
-        };
-
-        const index = row.notifyScene! % 4;
-
         if (row.systemTaskType === 1) {
           const label = $t(retryNotifyScene[row.notifyScene! as Api.NotifyConfig.RetryNotifyScene]);
-          const type = tagMap[index as Api.NotifyConfig.RetryNotifyScene];
-          return <NTag type={type}>{label}</NTag>;
+          return <NTag type={tagColor(row.notifyScene)}>{label}</NTag>;
         }
 
         if (row.systemTaskType === 3) {
           const label = $t(jobNotifyScene[row.notifyScene! as Api.NotifyConfig.JobNotifyScene]);
-          return <NTag type={tagMap[row.notifyScene!]}>{label}</NTag>;
+          return <NTag type={tagColor(row.notifyScene)}>{label}</NTag>;
         }
 
         return null;