From 7a4f5f37c2d12b1df5621b922c58d650c54bce71 Mon Sep 17 00:00:00 2001 From: dengqichen Date: Fri, 28 Nov 2025 16:52:43 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=B6=88=E6=81=AF=E9=80=9A?= =?UTF-8?q?=E7=9F=A5=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Deploy/Environment/List/index.tsx | 308 +++++++----------- 1 file changed, 119 insertions(+), 189 deletions(-) diff --git a/frontend/src/pages/Deploy/Environment/List/index.tsx b/frontend/src/pages/Deploy/Environment/List/index.tsx index 937c09e4..0bf11743 100644 --- a/frontend/src/pages/Deploy/Environment/List/index.tsx +++ b/frontend/src/pages/Deploy/Environment/List/index.tsx @@ -1,41 +1,24 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useMemo, useRef } from 'react'; import { PageContainer } from '@/components/ui/page-container'; import { Card, CardContent, CardHeader, CardTitle, + CardDescription, } from '@/components/ui/card'; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from '@/components/ui/table'; import { Button } from '@/components/ui/button'; -import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; -import { useToast } from '@/components/ui/use-toast'; -import { DataTablePagination } from '@/components/ui/pagination'; +import { Separator } from '@/components/ui/separator'; +import { PaginatedTable, type ColumnDef, type SearchFieldDef, type PaginatedTableRef } from '@/components/ui/paginated-table'; import { Plus, Edit, Trash2, Server, Activity, Database } from 'lucide-react'; import EditDialog from './components/EditDialog'; import DeleteDialog from './components/DeleteDialog'; -import { getEnvironmentPage, deleteEnvironment } from './service'; +import { getEnvironmentPage } from './service'; import type { Environment, EnvironmentQueryParams } from './types'; -const DEFAULT_PAGE_SIZE = 10; - const EnvironmentList: React.FC = () => { - const { toast } = useToast(); - const [list, setList] = useState([]); - const [loading, setLoading] = useState(false); - const [query, setQuery] = useState({ - pageNum: 0, - pageSize: DEFAULT_PAGE_SIZE, - }); - const [total, setTotal] = useState(0); + const tableRef = useRef>(null); const [stats, setStats] = useState({ total: 0, enabled: 0, disabled: 0 }); // 对话框状态 @@ -43,59 +26,107 @@ const EnvironmentList: React.FC = () => { const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [currentRecord, setCurrentRecord] = useState(); - // 加载数据 - const loadData = async () => { - setLoading(true); - try { - const response = await getEnvironmentPage(query); - if (response) { - setList(response.content || []); - setTotal(response.totalElements || 0); - // 计算统计数据 - const all = response.content || []; - setStats({ - total: all.length, - enabled: all.filter((item) => item.enabled).length, - disabled: all.filter((item) => !item.enabled).length, - }); - } - } catch (error) { - toast({ title: '加载失败', description: '无法加载环境列表', variant: 'destructive' }); - } finally { - setLoading(false); - } + // 包装 fetchFn，同时更新统计数据 + const fetchData = async (query: EnvironmentQueryParams) => { + const result = await getEnvironmentPage(query); + // 更新统计 + const all = result.content || []; + setStats({ + total: result.totalElements || 0, + enabled: all.filter((item) => item.enabled).length, + disabled: all.filter((item) => !item.enabled).length, + }); + return result; }; - useEffect(() => { - loadData(); - }, [query.pageNum, query.pageSize]); - - // 搜索 - const handleSearch = () => { - setQuery({ ...query, pageNum: 0 }); - loadData(); + const handleAdd = () => { + setCurrentRecord(undefined); + setEditDialogOpen(true); }; - // 重置 - const handleReset = () => { - setQuery({ pageNum: 0, pageSize: DEFAULT_PAGE_SIZE }); - loadData(); + const handleEdit = (environment: Environment) => { + setCurrentRecord(environment); + setEditDialogOpen(true); }; + const handleSuccess = () => { + setEditDialogOpen(false); + setDeleteDialogOpen(false); + setCurrentRecord(undefined); + tableRef.current?.refresh(); + }; + + // 搜索字段定义 + const searchFields: SearchFieldDef[] = useMemo(() => [ + { key: 'envCode', type: 'input', placeholder: '环境编码', width: 'w-[180px]' }, + { key: 'envName', type: 'input', placeholder: '环境名称', width: 'w-[180px]' }, + { + key: 'enabled', + type: 'select', + placeholder: '状态', + width: 'w-[120px]', + options: [ + { label: '启用', value: 'true' }, + { label: '禁用', value: 'false' }, + ], + }, + ], []); + + // 列定义 + const columns: ColumnDef[] = useMemo(() => [ + { key: 'id', title: 'ID', dataIndex: 'id', width: '80px' }, + { key: 'envCode', title: '环境编码', dataIndex: 'envCode', width: '150px' }, + { key: 'envName', title: '环境名称', dataIndex: 'envName', width: '150px' }, + { key: 'envDesc', title: '环境描述', dataIndex: 'envDesc', width: '200px' }, + { key: 'teamCount', title: '团队数', dataIndex: 'teamCount', width: '100px' }, + { key: 'applicationCount', title: '应用数', dataIndex: 'applicationCount', width: '100px' }, + { + key: 'enabled', + title: '状态', + width: '100px', + render: (_, record) => ( + + {record.enabled ? '启用' : '禁用'} + + ), + }, + { key: 'sort', title: '排序', dataIndex: 'sort', width: '80px' }, + { + key: 'actions', + title: '操作', + width: '160px', + sticky: true, + render: (_, record) => ( +
+ + +
+ ), + }, + ], []); + + // 工具栏 + const toolbar = ( + + ); + return ( - {/* 页面标题 */} -
-

环境管理

- -
- {/* 统计卡片 */}
@@ -130,128 +161,27 @@ const EnvironmentList: React.FC = () => {
- {/* 搜索过滤 */} - -
-
- setQuery({ ...query, envCode: e.target.value })} - className="max-w-[200px]" - /> - setQuery({ ...query, envName: e.target.value })} - className="max-w-[200px]" - /> - - -
-
- - - {/* 数据表格 */} + {/* 环境管理 */} - 环境列表 - - -
- - - - 环境编码 - 环境名称 - 环境描述 - 团队数 - 应用数 - 排序 - 状态 - 操作 - - - - {list.length === 0 ? ( - - - 暂无数据 - - - ) : ( - list.map((item) => { - return ( - - {item.envCode} - {item.envName} - {item.envDesc || '-'} - -
- - {item.teamCount || 0} - -
- - -
- - {item.applicationCount || 0} - -
- - {item.sort} - - - {item.enabled ? '启用' : '禁用'} - - - -
- - -
- - - ); - }) - )} - -
-
- setQuery({ ...query, pageNum: page })} - /> -
+
+ 环境管理 + + 创建和管理部署环境，配置环境参数 +
+ + + + + ref={tableRef} + fetchFn={fetchData} + columns={columns} + searchFields={searchFields} + toolbar={toolbar} + rowKey="id" + minWidth="1200px" + /> @@ -260,13 +190,13 @@ const EnvironmentList: React.FC = () => { open={editDialogOpen} record={currentRecord} onOpenChange={setEditDialogOpen} - onSuccess={loadData} + onSuccess={handleSuccess} /> );