feat(strategy): 添加策略订阅者功能

- 新增 ModalSubscriber 组件用于显示策略订阅者列表
- 在策略列表页面添加订阅者按钮和相关逻辑
- 从 API 获取策略订阅者数据并展示
- 添加订阅者相关的通知类型展示

Author: aide-cloud

src/api/global.tsx

@@ -410,6 +410,8 @@ export enum ActionKey {
   CANCEL_SUBSCRIBE = '__cancel_subscribe__',
   /** 订阅 */
   SUBSCRIBE = '__subscribe__',
+  /** 订阅者 */
+  SUBSCRIBER = '__subscriber__',
   /** 启用 */
   ENABLE = '__enable__',
   /** 禁用 */

src/pages/strategy/list/index.tsx

@@ -30,6 +30,7 @@ import MetricEditModal from './edit-modal-metric'
 import { PortEditModal } from './edit-modal-port'
 import StrategyTypeModal from './edit-modal-strategy-type'
 import { ModalSubscribe } from './modal-subscribe'
+import ModalSubscriber from './modal-subscriber'
 import { formList, getColumnList } from './options'
 
 const { confirm } = Modal
@@ -64,6 +65,7 @@ const StrategyMetric: React.FC = () => {
   const [openHttpDetailModal, setOpenHttpDetailModal] = useState(false)
 
   const [openSubscribeModal, setOpenSubscribeModal] = useState(false)
+  const [openSubscriberModal, setOpenSubscriberModal] = useState(false)
 
   const [detail, setDetail] = useState<StrategyItem>()
 
@@ -104,6 +106,11 @@ const StrategyMetric: React.FC = () => {
     setOpenSubscribeModal(true)
   }
 
+  const handleOpenSubscriberModal = (item?: StrategyItem) => {
+    setDetail(item)
+    setOpenSubscriberModal(true)
+  }
+
   const handleMetricEditOk = () => {
     setOpenMetricEditModal(false)
     setDetail(undefined)
@@ -145,6 +152,11 @@ const StrategyMetric: React.FC = () => {
     setDetail(undefined)
   }
 
+  const handleCloseSubscriberModal = () => {
+    setOpenSubscriberModal(false)
+    setDetail(undefined)
+  }
+
   const handleDetailModal = (item: StrategyItem) => {
     setDetail(item)
     switch (item.strategyType) {
@@ -326,6 +338,9 @@ const StrategyMetric: React.FC = () => {
       case ActionKey.SUBSCRIBE:
         handleOpenSubscribeModal(item)
         break
+      case ActionKey.SUBSCRIBER:
+        handleOpenSubscriberModal(item)
+        break
       case ActionKey.DELETE:
         confirm({
           title: '请确认是否删除该策略组?',
@@ -385,6 +400,13 @@ const StrategyMetric: React.FC = () => {
 
   return (
     <div className='h-full flex flex-col gap-3 p-3'>
+      <ModalSubscriber
+        title={`【${detail?.name}】策略订阅者`}
+        width='60%'
+        open={openSubscriberModal}
+        onClose={handleCloseSubscriberModal}
+        strategyId={detail?.id}
+      />
       <ModalSubscribe
         title={`订阅【${detail?.name}】策略`}
         // width='60%'

src/pages/strategy/list/modal-subscriber.tsx

@@ -0,0 +1,118 @@
+import { NotifyType } from '@/api/enum'
+import { StrategySubscriberItem, UserItem } from '@/api/model-types'
+import { getStrategySubscriber, StrategySubscriberRequest } from '@/api/subscriber'
+import AutoTable from '@/components/table'
+import { useRequest } from 'ahooks'
+import { Avatar, Checkbox, Modal, ModalProps, theme } from 'antd'
+import { useEffect, useState } from 'react'
+
+export interface ModalSubscriberProps extends ModalProps {
+  strategyId?: number
+  onClose: () => void
+}
+
+const { useToken } = theme
+
+export default function ModalSubscriber({ open, strategyId = 0, onClose, ...reset }: ModalSubscriberProps) {
+  const { token } = useToken()
+  const [datasource, setDatasource] = useState<StrategySubscriberItem[]>([])
+  const [total, setTotal] = useState(0)
+  const { run: initStrategySubscriber, loading } = useRequest(getStrategySubscriber, {
+    manual: true,
+    onSuccess: (res) => {
+      setDatasource(res.subscribers)
+      setTotal(res.pagination.total)
+    }
+  })
+  const [searchParams, setSearchParams] = useState<StrategySubscriberRequest>({
+    strategyId: strategyId,
+    pagination: { pageNum: 1, pageSize: 100 }
+  })
+
+  useEffect(() => {
+    if (strategyId && open) {
+      initStrategySubscriber({ ...searchParams, strategyId })
+    }
+  }, [strategyId, open, initStrategySubscriber, searchParams])
+
+  const columns = [
+    {
+      title: '用户名',
+      dataIndex: 'user',
+      key: 'user',
+      render: (user: UserItem) => {
+        return (
+          <div>
+            <Avatar src={user.avatar} size={24} className='mr-2'>
+              {user.name.charAt(0).toUpperCase()}
+            </Avatar>
+            <span className='ml-2'>{`${user.name} (${user.nickname})`}</span>
+          </div>
+        )
+      }
+    },
+    {
+      title: '通知类型',
+      dataIndex: 'notifyType',
+      key: 'notifyType',
+      render: (notifyType: NotifyType) => {
+        const checkedList: NotifyType[] = []
+        if (notifyType & NotifyType.NOTIFY_PHONE) {
+          checkedList.push(NotifyType.NOTIFY_PHONE)
+        }
+        if (notifyType & NotifyType.NOTIFY_EMAIL) {
+          checkedList.push(NotifyType.NOTIFY_EMAIL)
+        }
+        if (notifyType & NotifyType.NOTIFY_SMS) {
+          checkedList.push(NotifyType.NOTIFY_SMS)
+        }
+        return (
+          <Checkbox.Group
+            value={checkedList}
+            options={[
+              { label: '手机', value: NotifyType.NOTIFY_PHONE },
+              { label: '邮件', value: NotifyType.NOTIFY_EMAIL },
+              { label: '短信', value: NotifyType.NOTIFY_SMS }
+            ]}
+          />
+        )
+      }
+    }
+  ]
+
+  // 切换分页
+  const handleTurnPage = (page: number, pageSize: number) => {
+    setSearchParams({
+      ...searchParams,
+      pagination: {
+        pageNum: page,
+        pageSize: pageSize
+      }
+    })
+  }
+
+  return (
+    <Modal title='订阅者' open={open} onClose={onClose} footer={null} loading={loading} {...reset}>
+      <AutoTable
+        rowKey={(record) => record.id}
+        dataSource={datasource}
+        total={total}
+        loading={loading}
+        columns={columns}
+        handleTurnPage={handleTurnPage}
+        pageSize={searchParams.pagination.pageSize}
+        pageNum={searchParams.pagination.pageNum}
+        showSizeChanger={true}
+        style={{
+          background: token.colorBgContainer,
+          borderRadius: token.borderRadius
+        }}
+        scroll={{
+          y: 500,
+          x: 1000
+        }}
+        size='middle'
+      />
+    </Modal>
+  )
+}

src/pages/strategy/list/options.tsx

@@ -173,6 +173,14 @@ export const getColumnList = (props: GroupColumnProps): ColumnsType<StrategyItem
         </Button>
       )
     },
+    {
+      key: ActionKey.SUBSCRIBER,
+      label: (
+        <Button size='small' type='link'>
+          订阅者
+        </Button>
+      )
+    },
     {
       key: ActionKey.OPERATION_LOG,
       label: (