feat(web): add tool management

2025-12-26 11:57:50 +08:00
parent ad2f52c037
commit 44aac44a05
18 changed files with 2193 additions and 19 deletions
--- a/web/src/views/ToolManagement/Custom.tsx
+++ b/web/src/views/ToolManagement/Custom.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useRef, useEffect, type ReactNode } from 'react';
+import {
+  Button,
+  Row,
+  Col,
+  App,
+  List,
+  Space
+} from 'antd';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+
+import type { ToolItem, Query, CustomToolModalRef } from './types';
+import CustomToolModal from './components/CustomToolModal';
+import SearchInput from '@/components/SearchInput'
+import BodyWrapper from '@/components/Empty/BodyWrapper'
+import RbCard from '@/components/RbCard'
+import { getTools, deleteTool } from '@/api/tools'
+
+const Custom: React.FC<{ getStatusTag: (status: string) => ReactNode }> = ({ getStatusTag }) => {
+  const { t } = useTranslation();
+  const { message, modal } = App.useApp()
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<ToolItem[]>([]);
+  const [query, setQuery] = useState<Query>({ name: undefined, tool_type: 'custom' });
+  const customToolModalRef = useRef<CustomToolModalRef>(null);
+
+  useEffect(() => {
+    getData()
+  }, [query.name])
+
+  const getData = () => {
+    setLoading(true)
+    getTools(query)
+      .then((res) => {
+        setData(res as ToolItem[])
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+  const handleSearch = (value?: string) => {
+    setQuery(prev => ({ ...prev, name: value }))
+  }
+
+  // 打开添加服务弹窗
+  const handleEdit = (data?: ToolItem) => {
+    customToolModalRef.current?.handleOpen(data);
+  };
+
+  // 删除服务
+  const handleDeleteService = (item: ToolItem) => {
+    modal.confirm({
+      title: t('common.confirmDeleteDesc', { name: item.name }),
+      okText: t('common.delete'),
+      okType: 'danger',
+      onOk: () => {
+        deleteTool(item.id).then(() => {
+          message.success(t('common.deleteSuccess'));
+          getData()
+        })
+      }
+    })
+  };
+
+  return (
+    <div>
+      <Row gutter={16} className='rb:mb-4 rb:w-full'>
+        <Col span={8}>
+          <SearchInput
+            placeholder={t('tool.customSearchPlaceholder')}
+            onSearch={handleSearch}
+            style={{width: '100%'}}
+          />
+        </Col>
+        <Col span={16} className="rb:text-right">
+          <Button type="primary" onClick={() => {handleEdit()}}>{t('tool.addCustom')}</Button>
+        </Col>
+      </Row>
+      <BodyWrapper loading={loading} empty={data.length === 0}>
+        <List
+          grid={{ gutter: 16, column: 2 }}
+          dataSource={data}
+          renderItem={(item) => (
+            <List.Item key={item.id}>
+              <RbCard
+                // avatar={
+                //   <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
+                //     {item.name[0]}
+                //   </div>
+                // }
+                title={
+                  <div>
+                    {item.name}<br/>
+                    {/* <div className="rb:mt-1 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167]">xx个工具</div> */}
+                  </div>
+                }
+                extra={getStatusTag(item.status)}
+              >
+                <div>
+                  {['auth_type', 'tag', 'created_at'].map(key => (
+                    <div 
+                      key={key}
+                      className="rb:flex rb:gap-4 rb:justify-start rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
+                    >
+                      <div className="rb:whitespace-nowrap rb:w-27.5">{t(`tool.${key}`)}</div>
+                      <div className='rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-inline rb:text-left rb:py-px rb:rounded rb:font-medium'>
+                        {key === 'created_at' && item[key] ? dayjs(item[key]).format('YYYY-MM-DD HH:mm:ss') : (item.config_data as any)?.[key] || '-'}
+                      </div>
+                    </div>
+                  ))}
+                  <div className="rb:mt-4 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center rb:justify-end">
+                    <Space size={16}>
+                      <div 
+                        className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
+                        onClick={() => handleEdit(item)}
+                      ></div>
+                      <div 
+                        className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
+                        onClick={() => handleDeleteService(item)}
+                      ></div>
+                    </Space>
+                  </div>
+                </div>
+              </RbCard>
+            </List.Item>
+          )}
+          className="rb:h-[calc(100vh-178px)] rb:overflow-y-auto rb:overflow-x-hidden"
+        />
+      </BodyWrapper>
+
+      {/* 添加服务弹窗组件 */}
+      <CustomToolModal 
+        ref={customToolModalRef}
+        refresh={getData} 
+      />
+    </div>
+  );
+};
+
+export default Custom;