release: bump version to 0.27.7

frontend/src/pages/DataSources/DataSources.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCollapsedActions } from '../../hooks'
+import { TableActions, actionCellProps } from '../../components/TableActions/TableActions'
 import {
   Table, Tag, Space, Button, Form, Input, Select, Progress, Checkbox, message, Modal,
   Drawer, Tabs, Empty, Tooltip, Popconfirm, Collapse, InputNumber, Row, Col, Card
@@ -213,6 +215,8 @@ function DataSources() {
   const customTableRegionRef = useRef<HTMLDivElement | null>(null)
   const [builtinTableHeight, setBuiltinTableHeight] = useState(360)
   const [customTableHeight, setCustomTableHeight] = useState(360)
+  const [builtinActionsCollapsed, builtinContainerRef] = useCollapsedActions()
+  const [customActionsCollapsed, customContainerRef] = useCollapsedActions()
   const [form] = Form.useForm()
 
   const fetchData = useCallback(async () => {
@@ -940,10 +944,29 @@ function DataSources() {
     {
       title: '操作',
       key: 'action',
-      width: 200,
       fixed: 'right' as const,
+      width: builtinActionsCollapsed ? 40 : 164,
+      onCell: () => actionCellProps,
       render: (_: unknown, record: BuiltInDataSource) => (
-        <Space size="small">
+        <TableActions
+          collapsed={builtinActionsCollapsed}
+          items={[
+            {
+              key: 'trigger',
+              label: '触发',
+              icon: <SyncOutlined />,
+              disabled: !record.is_active,
+              onClick: () => handleTrigger(record.id),
+            },
+            {
+              key: 'toggle',
+              label: record.is_active ? '禁用' : '启用',
+              icon: record.is_active ? <PauseCircleOutlined /> : <PlayCircleOutlined />,
+              danger: record.is_active,
+              onClick: () => handleToggle(record.id, record.is_active),
+            },
+          ]}
+        >
           <Button
             type="link"
             size="small"
@@ -963,7 +986,7 @@ function DataSources() {
           >
             {record.is_active ? '禁用' : '启用'}
           </Button>
-        </Space>
+        </TableActions>
       ),
     },
   ]
@@ -1001,30 +1024,56 @@ function DataSources() {
     {
       title: '操作',
       key: 'action',
-      width: 150,
       fixed: 'right' as const,
+      width: customActionsCollapsed ? 40 : 228,
+      onCell: () => actionCellProps,
       render: (_: unknown, record: CustomDataSource) => (
-        <Space size="small">
-          <Tooltip title="编辑">
-            <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openDrawer(record)} />
-          </Tooltip>
-          <Tooltip title={record.is_active ? '禁用' : '启用'}>
-            <Button
-              type="link"
-              size="small"
-              icon={record.is_active ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
-              onClick={() => handleToggleCustom(record.id, record.is_active)}
-            />
-          </Tooltip>
-          <Popconfirm
-            title="确定删除此配置?"
-            onConfirm={() => handleDelete(record.id)}
+        <TableActions
+          collapsed={customActionsCollapsed}
+          items={[
+            {
+              key: 'edit',
+              label: '编辑',
+              icon: <EditOutlined />,
+              onClick: () => openDrawer(record),
+            },
+            {
+              key: 'toggle',
+              label: record.is_active ? '禁用' : '启用',
+              icon: record.is_active ? <PauseCircleOutlined /> : <PlayCircleOutlined />,
+              danger: record.is_active,
+              onClick: () => handleToggleCustom(record.id, record.is_active),
+            },
+            { type: 'divider' },
+            {
+              key: 'delete',
+              label: '删除',
+              icon: <DeleteOutlined />,
+              danger: true,
+              onClick: () => {
+                Modal.confirm({
+                  title: '确定删除此配置?',
+                  onOk: () => handleDelete(record.id),
+                })
+              },
+            },
+          ]}
+        >
+          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openDrawer(record)}>编辑</Button>
+          <Button
+            type="link"
+            size="small"
+            icon={record.is_active ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+            danger={record.is_active}
+            style={record.is_active ? undefined : { color: '#52c41a' }}
+            onClick={() => handleToggleCustom(record.id, record.is_active)}
           >
-            <Tooltip title="删除">
-              <Button type="link" size="small" danger icon={<DeleteOutlined />} />
-            </Tooltip>
+            {record.is_active ? '禁用' : '启用'}
+          </Button>
+          <Popconfirm title="确定删除此配置?" onConfirm={() => handleDelete(record.id)}>
+            <Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
           </Popconfirm>
-        </Space>
+        </TableActions>
       ),
     },
   ]
@@ -1034,7 +1083,7 @@ function DataSources() {
       key: 'builtin',
       label: '内置数据源',
       children: (
-        <div className="page-shell__body data-source-builtin-tab">
+        <div className="page-shell__body data-source-builtin-tab" ref={builtinContainerRef}>
           <div className="data-source-bulk-toolbar">
             <div className="data-source-bulk-toolbar__meta">
               <div className="data-source-bulk-toolbar__title">采集实时进度</div>
@@ -1120,7 +1169,7 @@ function DataSources() {
         </span>
       ),
       children: (
-        <div className="page-shell__body data-source-custom-tab">
+        <div className="page-shell__body data-source-custom-tab" ref={customContainerRef}>
           <div className="data-source-custom-toolbar">
             <Button type="primary" icon={<PlusOutlined />} onClick={() => openDrawer()}>
               添加数据源