+
+ {/* 搜索栏 */}
+
+
+
+ setSearchText(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+ className="pl-10"
+ />
+
+
+
+
+ {/* 表格 */}
+
+
+
+
+ 用户ID
+ 用户名
+ 团队角色
+ 加入时间
+ 操作
+
+
+
+ {loading ? (
+
+
+
+
+ 加载中...
+
+
+
+ ) : data?.content && data.content.length > 0 ? (
+ data.content.map((record) => (
+
+
+ {record.userId}
+
+
+ {record.userName || '-'}
+
+
+ {record.roleInTeam || '-'}
+
+
+ {record.joinTime || '-'}
+
+
+
+
+
+
+
+
+ ))
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+ {/* 分页 */}
+ {data && data.totalElements > 0 && (
+
+ setPageNum(newPage)}
+ />
+
+ )}
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {/* 删除确认对话框 */}
+
+
+
+ 确认删除
+
+ 确定要将成员 "{deleteRecord?.userName}" 从团队中移除吗？此操作无法撤销。
+
+
+
+ setDeleteDialogOpen(false)}>
+ 取消
+
+
+ 确认删除
+
+
+
+
+
+ );
+};
+
+export default MemberManageDialog;
+
diff --git a/frontend/src/pages/Deploy/Team/List/components/TeamModal.tsx b/frontend/src/pages/Deploy/Team/List/components/TeamModal.tsx
new file mode 100644
index 00000000..f352ad59
--- /dev/null
+++ b/frontend/src/pages/Deploy/Team/List/components/TeamModal.tsx
@@ -0,0 +1,282 @@
+import React, { useEffect } from 'react';
+import type { TeamResponse } from '../types';
+import { createTeam, updateTeam } from '../service';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { teamFormSchema, type TeamFormValues } from "../schema";
+import { Textarea } from "@/components/ui/textarea";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface TeamModalProps {
+ open: boolean;
+ onCancel: () => void;
+ onSuccess: () => void;
+ initialValues?: TeamResponse;
+}
+
+const TeamModal: React.FC
= ({
+ open,
+ onCancel,
+ onSuccess,
+ initialValues,
+}) => {
+ const { toast } = useToast();
+ const isEdit = !!initialValues?.id;
+
+ const form = useForm({
+ resolver: zodResolver(teamFormSchema),
+ defaultValues: {
+ teamCode: "",
+ teamName: "",
+ description: "",
+ ownerId: undefined,
+ ownerName: "",
+ enabled: true,
+ sort: 0,
+ },
+ });
+
+ useEffect(() => {
+ if (open && initialValues) {
+ form.reset({
+ teamCode: initialValues.teamCode,
+ teamName: initialValues.teamName,
+ description: initialValues.description || "",
+ ownerId: initialValues.ownerId,
+ ownerName: initialValues.ownerName || "",
+ enabled: initialValues.enabled,
+ sort: initialValues.sort,
+ });
+ } else if (open && !initialValues) {
+ form.reset({
+ teamCode: "",
+ teamName: "",
+ description: "",
+ ownerId: undefined,
+ ownerName: "",
+ enabled: true,
+ sort: 0,
+ });
+ }
+ }, [open, initialValues, form]);
+
+ const handleSubmit = async (values: TeamFormValues) => {
+ try {
+ if (isEdit) {
+ await updateTeam(initialValues!.id, values as any);
+ toast({
+ title: "更新成功",
+ description: `团队 "${values.teamName}" 已更新`,
+ duration: 3000,
+ });
+ } else {
+ await createTeam(values as any);
+ toast({
+ title: "创建成功",
+ description: `团队 "${values.teamName}" 已创建`,
+ duration: 3000,
+ });
+ }
+ onSuccess();
+ onCancel();
+ } catch (error) {
+ console.error(error);
+ toast({
+ variant: "destructive",
+ title: isEdit ? "更新失败" : "创建失败",
+ description: error instanceof Error ? error.message : "未知错误",
+ duration: 3000,
+ });
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default TeamModal;
+
diff --git a/frontend/src/pages/Deploy/Team/List/index.tsx b/frontend/src/pages/Deploy/Team/List/index.tsx
new file mode 100644
index 00000000..0c2f3d1f
--- /dev/null
+++ b/frontend/src/pages/Deploy/Team/List/index.tsx
@@ -0,0 +1,410 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { PageContainer } from '@/components/ui/page-container';
+import { getTeams } from './service';
+import type { TeamResponse, TeamQuery } from './types';
+import TeamModal from './components/TeamModal';
+import DeleteDialog from './components/DeleteDialog';
+import MemberManageDialog from './components/MemberManageDialog';
+import {
+ Table,
+ TableHeader,
+ TableBody,
+ TableHead,
+ TableRow,
+ TableCell,
+} from '@/components/ui/table';
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+ CardDescription,
+} from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { searchFormSchema, type SearchFormValues } from './schema';
+import { DataTablePagination } from '@/components/ui/pagination';
+import { DEFAULT_PAGE_SIZE, DEFAULT_CURRENT } from '@/utils/page';
+import type { Page } from '@/types/base';
+import {
+ Plus,
+ Edit,
+ Trash2,
+ Users,
+ Activity,
+ Server,
+ Database,
+} from 'lucide-react';
+
+type Column = {
+ accessorKey?: keyof TeamResponse;
+ id?: string;
+ header: string;
+ size?: number;
+ cell?: (props: { row: { original: TeamResponse } }) => React.ReactNode;
+};
+
+const TeamList: React.FC = () => {
+ const [list, setList] = useState([]);
+ const [pagination, setPagination] = useState({
+ pageNum: DEFAULT_CURRENT,
+ pageSize: DEFAULT_PAGE_SIZE,
+ totalElements: 0,
+ });
+
+ const [modalVisible, setModalVisible] = useState(false);
+ const [currentTeam, setCurrentTeam] = useState();
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+ const [memberDialogOpen, setMemberDialogOpen] = useState(false);
+
+ const form = useForm({
+ resolver: zodResolver(searchFormSchema),
+ defaultValues: {
+ teamCode: '',
+ teamName: '',
+ enabled: undefined,
+ },
+ });
+
+ // 统计数据
+ const stats = useMemo(() => {
+ const total = pagination.totalElements;
+ const enabled = list.filter((item) => item.enabled).length;
+ const disabled = list.filter((item) => !item.enabled).length;
+ return { total, enabled, disabled };
+ }, [list, pagination.totalElements]);
+
+ // 加载数据
+ const loadData = async (searchValues?: SearchFormValues) => {
+ try {
+ const query: TeamQuery = {
+ pageNum: pagination.pageNum - 1,
+ pageSize: pagination.pageSize,
+ teamCode: searchValues?.teamCode || form.getValues('teamCode') || undefined,
+ teamName: searchValues?.teamName || form.getValues('teamName') || undefined,
+ enabled: searchValues?.enabled !== undefined ? searchValues.enabled : form.getValues('enabled'),
+ };
+
+ const response: Page | undefined = await getTeams(query);
+
+ if (response) {
+ setList(response.content || []);
+ setPagination({
+ ...pagination,
+ totalElements: response.totalElements || 0,
+ });
+ }
+ } catch (error) {
+ console.error('加载数据失败:', error);
+ }
+ };
+
+ useEffect(() => {
+ loadData();
+ }, [pagination.pageNum, pagination.pageSize]);
+
+ const handleSuccess = () => {
+ loadData();
+ };
+
+ const handleAdd = () => {
+ setCurrentTeam(undefined);
+ setModalVisible(true);
+ };
+
+ const handleEdit = (record: TeamResponse) => {
+ setCurrentTeam(record);
+ setModalVisible(true);
+ };
+
+ const handleDelete = (record: TeamResponse) => {
+ setCurrentTeam(record);
+ setDeleteDialogOpen(true);
+ };
+
+ const handleManageMembers = (record: TeamResponse) => {
+ setCurrentTeam(record);
+ setMemberDialogOpen(true);
+ };
+
+ const handleModalClose = () => {
+ setModalVisible(false);
+ setCurrentTeam(undefined);
+ };
+
+ const handlePageChange = (newPage: number) => {
+ setPagination({ ...pagination, pageNum: newPage + 1 });
+ };
+
+ const columns: Column[] = [
+ {
+ accessorKey: 'teamCode',
+ header: '团队编码',
+ size: 150,
+ },
+ {
+ accessorKey: 'teamName',
+ header: '团队名称',
+ size: 150,
+ },
+ {
+ accessorKey: 'description',
+ header: '团队描述',
+ size: 200,
+ },
+ {
+ accessorKey: 'ownerName',
+ header: '负责人',
+ size: 120,
+ cell: ({ row }) => row.original.ownerName || '-',
+ },
+ {
+ id: 'memberCount',
+ header: '成员数量',
+ size: 100,
+ cell: ({ row }) => (
+
+ {row.original.memberCount || 0}
+
+ ),
+ },
+ {
+ id: 'applicationCount',
+ header: '应用数量',
+ size: 100,
+ cell: ({ row }) => (
+
+ {row.original.applicationCount || 0}
+
+ ),
+ },
+ {
+ accessorKey: 'enabled',
+ header: '状态',
+ size: 100,
+ cell: ({ row }) => (
+
+ {row.original.enabled ? '启用' : '禁用'}
+
+ ),
+ },
+ {
+ accessorKey: 'sort',
+ header: '排序',
+ size: 80,
+ },
+ {
+ id: 'actions',
+ header: '操作',
+ size: 200,
+ cell: ({ row }) => (
+
+
+
+
+
+ ),
+ },
+ ];
+
+ return (
+
+ {/* 统计卡片 */}
+
+
+
+ 总团队数
+
+
+
+ {stats.total}
+ 所有团队
+
+
+
+
+ 已启用
+
+
+
+ {stats.enabled}
+ 正在使用中
+
+
+
+
+ 已禁用
+
+
+
+ {stats.disabled}
+ 暂时停用
+
+
+
+
+ 团队管理
+
+ 创建和管理团队，分配团队成员和应用
+
+
+
+
+ form.setValue('teamCode', e.target.value)}
+ className="max-w-[200px]"
+ />
+ form.setValue('teamName', e.target.value)}
+ className="max-w-[200px]"
+ />
+
+
+
+
+
+ {/* 数据表格 */}
+
+
+
+
+ {columns.map((column) => (
+
+ {column.header}
+
+ ))}
+
+
+
+ {list.length === 0 ? (
+
+
+ 暂无数据
+
+
+ ) : (
+ list.map((item) => (
+
+ {columns.map((column) => {
+ let cellContent;
+ if (column.cell) {
+ cellContent = column.cell({ row: { original: item } });
+ } else if (column.accessorKey) {
+ const value = item[column.accessorKey];
+ cellContent = value != null ? String(value) : '';
+ } else {
+ cellContent = '';
+ }
+ return (
+
+ {cellContent}
+
+ );
+ })}
+
+ ))
+ )}
+
+
+
+
+
+