From 58e4cf27439d699c028089a0dc21012c20fd40cf Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Fri, 27 Dec 2024 21:51:01 +0800
Subject: [PATCH] 1

---
 frontend/src/components/ui/table.tsx          | 114 +++++++
 .../pages/Deploy/ProjectGroup/List/index.tsx  | 301 +++++++++---------
 frontend/src/pages/System/User/index.tsx      | 171 +++++-----
 frontend/src/pages/System/User/types.ts       |  63 ++--
 4 files changed, 392 insertions(+), 257 deletions(-)
 create mode 100644 frontend/src/components/ui/table.tsx

diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
new file mode 100644
index 00000000..7e9b20f6
--- /dev/null
+++ b/frontend/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLTableProps<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLTableSectionProps
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLTableSectionProps
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLTableSectionProps
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLTableRowProps
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} 
\ No newline at end of file
diff --git a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
index 377631d0..0cca560d 100644
--- a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
+++ b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
@@ -14,21 +14,52 @@ import type {ProjectGroup, ProjectGroupQueryParams} from './types';
 import {ProjectGroupTypeEnum} from './types';
 import {getProjectTypeInfo} from './utils';
 import ProjectGroupModal from './components/ProjectGroupModal';
-import {ProTable} from '@ant-design/pro-components';
-import type {ProColumns, ActionType} from '@ant-design/pro-components';
+import {
+    Table,
+    TableHeader,
+    TableBody,
+    TableHead,
+    TableRow,
+    TableCell,
+} from "@/components/ui/table";
+
+interface Column {
+    accessorKey?: keyof ProjectGroup;
+    id?: string;
+    header: string;
+    size: number;
+    cell?: (props: { row: { original: ProjectGroup } }) => React.ReactNode;
+}
 
 const ProjectGroupList: React.FC = () => {
     const [modalVisible, setModalVisible] = useState(false);
     const [currentProject, setCurrentProject] = useState<ProjectGroup>();
-    const actionRef = React.useRef<ActionType>();
+    const [list, setList] = useState<ProjectGroup[]>([]);
+    const [loading, setLoading] = useState(false);
     const [searchForm] = Form.useForm();
     const {message: messageApi} = App.useApp();
 
+    const loadData = async (params?: ProjectGroupQueryParams) => {
+        setLoading(true);
+        try {
+            const data = await getProjectGroupPage(params);
+            setList(data.content);
+        } catch (error) {
+            messageApi.error('加载数据失败');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    React.useEffect(() => {
+        loadData();
+    }, []);
+
     const handleDelete = async (id: number) => {
         try {
             await deleteProjectGroup(id);
             messageApi.success('删除成功');
-            actionRef.current?.reload();
+            loadData(searchForm.getFieldsValue());
         } catch (error) {
             messageApi.error('删除失败');
         }
@@ -52,45 +83,35 @@ const ProjectGroupList: React.FC = () => {
     const handleSuccess = () => {
         setModalVisible(false);
         setCurrentProject(undefined);
-        actionRef.current?.reload();
+        loadData(searchForm.getFieldsValue());
     };
 
     const handleSearch = async (values: any) => {
-        actionRef.current?.reload();
+        loadData(values);
     };
 
-    const columns: ProColumns<ProjectGroup>[] = [
+    const columns: Column[] = [
         {
-            title: '项目组编码',
-            dataIndex: 'projectGroupCode',
-            width: 120,
-            copyable: true,
-            ellipsis: true,
-            fixed: 'left',
-            filters: true,
-            filterSearch: true,
-            onFilter: (value: string, record) => record.projectGroupCode.toLowerCase().includes(value.toLowerCase()),
+            accessorKey: 'projectGroupCode',
+            header: '项目组编码',
+            size: 120,
         },
         {
-            title: '项目组名称',
-            dataIndex: 'projectGroupName',
-            width: 150,
-            ellipsis: true,
-            filters: true,
-            filterSearch: true,
-            onFilter: (value: string, record) => record.projectGroupName.toLowerCase().includes(value.toLowerCase()),
+            accessorKey: 'projectGroupName',
+            header: '项目组名称',
+            size: 150,
         },
         {
-            title: '项目组描述',
-            dataIndex: 'projectGroupDesc',
-            ellipsis: true,
+            accessorKey: 'projectGroupDesc',
+            header: '项目组描述',
+            size: 200,
         },
         {
-            title: '项目组类型',
-            dataIndex: 'type',
-            width: 150,
-            render: (type) => {
-                const typeInfo = getProjectTypeInfo(type as ProjectGroupTypeEnum);
+            accessorKey: 'type',
+            header: '项目组类型',
+            size: 150,
+            cell: ({ row }) => {
+                const typeInfo = getProjectTypeInfo(row.original.type);
                 return (
                     <Tag color={typeInfo.color}>
                         <Space>
@@ -100,84 +121,76 @@ const ProjectGroupList: React.FC = () => {
                     </Tag>
                 );
             },
-            filters: [
-                {text: '产品型', value: ProjectGroupTypeEnum.PRODUCT},
-                {text: '项目型', value: ProjectGroupTypeEnum.PROJECT},
-            ],
-            filterMode: 'menu',
-            filtered: false,
         },
         {
-            title: '状态',
-            dataIndex: 'enabled',
-            width: 100,
-            valueEnum: {
-                true: {text: '启用', status: 'Success'},
-                false: {text: '禁用', status: 'Default'},
-            },
+            accessorKey: 'enabled',
+            header: '状态',
+            size: 100,
+            cell: ({ row }) => (
+                <Tag color={row.original.enabled ? 'success' : 'default'}>
+                    {row.original.enabled ? '启用' : '禁用'}
+                </Tag>
+            ),
         },
         {
-            title: '环境数量',
-            dataIndex: 'environments',
-            width: 100,
-            render: (_, record) => (
+            accessorKey: 'totalEnvironments',
+            header: '环境数量',
+            size: 100,
+            cell: ({ row }) => (
                 <Space>
                     <EnvironmentOutlined/>
-                    {record?.totalEnvironments || 0}
+                    {row.original.totalEnvironments || 0}
                 </Space>
             ),
         },
         {
-            title: '项目数量',
-            dataIndex: 'applications',
-            width: 100,
-            render: (_, record) => (
+            accessorKey: 'totalApplications',
+            header: '项目数量',
+            size: 100,
+            cell: ({ row }) => (
                 <Space>
                     <TeamOutlined/>
-                    {record?.totalApplications || 0}
+                    {row.original.totalApplications || 0}
                 </Space>
             ),
         },
         {
-            title: '排序',
-            dataIndex: 'sort',
-            width: 80,
-            sorter: true,
+            accessorKey: 'sort',
+            header: '排序',
+            size: 80,
         },
         {
-            title: '操作',
-            width: 180,
-            key: 'action',
-            valueType: 'option',
-            fixed: 'right',
-            render: (_, record) => [
-                <Button
-                    key="edit"
-                    type="link"
-                    onClick={() => handleEdit(record)}
-                >
-                    <Space>
-                        <EditOutlined/>
-                        编辑
-                    </Space>
-                </Button>,
-                <Popconfirm
-                    key="delete"
-                    title="确定要删除该项目组吗？"
-                    description="删除后将无法恢复，请谨慎操作"
-                    onConfirm={() => handleDelete(record.id)}
-                >
+            id: 'actions',
+            header: '操作',
+            size: 180,
+            cell: ({ row }) => (
+                <Space>
                     <Button
                         type="link"
-                        danger
+                        onClick={() => handleEdit(row.original)}
                     >
                         <Space>
-                            <DeleteOutlined/>
-                            删除
+                            <EditOutlined/>
+                            编辑
                         </Space>
                     </Button>
-                </Popconfirm>
-            ],
+                    <Popconfirm
+                        title="确定要删除该项目组吗？"
+                        description="删除后将无法恢复，请谨慎操作"
+                        onConfirm={() => handleDelete(row.original.id)}
+                    >
+                        <Button
+                            type="link"
+                            danger
+                        >
+                            <Space>
+                                <DeleteOutlined/>
+                                删除
+                            </Space>
+                        </Button>
+                    </Popconfirm>
+                </Space>
+            ),
         },
     ];
 
@@ -233,75 +246,57 @@ const ProjectGroupList: React.FC = () => {
                     </Form.Item>
                 </Form>
             </Card>
-            <ProTable<ProjectGroup>
-                columns={columns}
-                actionRef={actionRef}
-                scroll={{x: 'max-content'}}
-                cardBordered
-                rowKey="id"
-                search={false}
-                options={{
-                    setting: false,
-                    density: false,
-                    fullScreen: false,
-                    reload: false,
-                }}
-                toolbar={{
-                    actions: [
-                        <Button
-                            key="add"
-                            type="primary"
-                            onClick={handleAdd}
-                            icon={<PlusOutlined/>}
-                        >
-                            新建项目组
-                        </Button>
-                    ],
-                }}
-                form={{
-                    syncToUrl: true,
-                    ignoreRules: false,
-                }}
-                pagination={{
-                    pageSize: 10,
-                    showQuickJumper: true,
-                }}
-                request={async (params) => {
-                    try {
-                        const formValues = searchForm.getFieldsValue();
-                        const queryParams: ProjectGroupQueryParams = {
-                            pageSize: params.pageSize,
-                            pageNum: params.current,
-                            projectGroupCode: formValues.projectGroupCode?.trim(),
-                            projectGroupName: formValues.projectGroupName?.trim(),
-                            type: formValues.type,
-                            enabled: formValues.enabled,
-                        };
-                        const data = await getProjectGroupPage(queryParams);
-                        return {
-                            data: data.content || [],
-                            success: true,
-                            total: data.totalElements || 0,
-                        };
-                    } catch (error) {
-                        messageApi.error('获取项目组列表失败');
-                        return {
-                            data: [],
-                            success: false,
-                            total: 0,
-                        };
-                    }
-                }}
-            />
 
-            {modalVisible && (
-                <ProjectGroupModal
-                    open={modalVisible}
-                    onCancel={handleModalClose}
-                    onSuccess={handleSuccess}
-                    initialValues={currentProject}
-                />
-            )}
+            <Card>
+                <div className="flex justify-between items-center mb-4">
+                    <Button
+                        type="primary"
+                        icon={<PlusOutlined/>}
+                        onClick={handleAdd}
+                    >
+                        新增项目组
+                    </Button>
+                </div>
+
+                <div className="rounded-md border">
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                {columns.map((column) => (
+                                    <TableHead
+                                        key={column.accessorKey || column.id}
+                                        style={{ width: column.size }}
+                                    >
+                                        {column.header}
+                                    </TableHead>
+                                ))}
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {list.map((row) => (
+                                <TableRow key={row.id}>
+                                    {columns.map((column) => (
+                                        <TableCell key={column.accessorKey || column.id}>
+                                            {column.cell
+                                                ? column.cell({ row: { original: row } })
+                                                : column.accessorKey
+                                                    ? String(row[column.accessorKey])
+                                                    : null}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            </Card>
+
+            <ProjectGroupModal
+                open={modalVisible}
+                onCancel={handleModalClose}
+                onSuccess={handleSuccess}
+                initialValues={currentProject}
+            />
         </PageContainer>
     );
 };
diff --git a/frontend/src/pages/System/User/index.tsx b/frontend/src/pages/System/User/index.tsx
index 2d0f7753..e9e67360 100644
--- a/frontend/src/pages/System/User/index.tsx
+++ b/frontend/src/pages/System/User/index.tsx
@@ -1,13 +1,28 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Table, Button, Modal, Form, Input, Space, message, Switch, TreeSelect, Select, Tag, Dropdown } from 'antd';
+import { Button, Modal, Form, Input, Space, message, Switch, TreeSelect, Select, Tag, Dropdown } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TeamOutlined, MoreOutlined } from '@ant-design/icons';
-import type { ColumnsType } from 'antd/es/table';
 import type { MenuProps } from 'antd';
 import { useTableData } from '@/hooks/useTableData';
 import * as service from './service';
 import type { UserResponse, UserRequest, UserQuery, Role } from './types';
 import type { DepartmentResponse } from '../Department/types';
 import { getDepartmentTree } from '../Department/service';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+} from "@/components/ui/table";
+
+interface Column {
+  accessorKey?: keyof UserResponse;
+  id?: string;
+  header: string;
+  size: number;
+  cell?: (props: { row: { original: UserResponse } }) => React.ReactNode;
+}
 
 interface TreeNode {
     title: string;
@@ -150,75 +165,68 @@ const UserPage: React.FC = () => {
         }
     };
 
-    const columns: ColumnsType<UserResponse> = [
+    const columns: Column[] = [
         {
-            title: 'ID',
-            dataIndex: 'id',
-            width: 60,
-            fixed: 'left',
-            sorter: true
+            accessorKey: 'id',
+            header: 'ID',
+            size: 60,
         },
         {
-            title: '用户名',
-            dataIndex: 'username',
-            width: 100,
-            sorter: true
+            accessorKey: 'username',
+            header: '用户名',
+            size: 100,
         },
         {
-            title: '昵称',
-            dataIndex: 'nickname',
-            width: 100,
+            accessorKey: 'nickname',
+            header: '昵称',
+            size: 100,
         },
         {
-            title: '邮箱',
-            dataIndex: 'email',
-            width: 200,
+            accessorKey: 'email',
+            header: '邮箱',
+            size: 200,
         },
         {
-            title: '部门',
-            dataIndex: 'departmentName',
-            width: 150,
+            accessorKey: 'departmentName',
+            header: '部门',
+            size: 150,
         },
         {
-            title: '状态',
-            dataIndex: 'enabled',
-            width: 100,
-            render: (enabled: boolean) => (
-                <Tag color={enabled ? 'success' : 'error'}>
-                    {enabled ? '启用' : '禁用'}
+            accessorKey: 'enabled',
+            header: '状态',
+            size: 100,
+            cell: ({ row }) => (
+                <Tag color={row.original.enabled ? 'success' : 'error'}>
+                    {row.original.enabled ? '启用' : '禁用'}
                 </Tag>
             ),
         },
         {
-            title: '手机号',
-            dataIndex: 'phone',
-            width: 120,
+            accessorKey: 'phone',
+            header: '手机号',
+            size: 120,
         },
         {
-            title: '角色',
-            dataIndex: 'roles',
-            width: 120,
-            ellipsis: true,
-            render: (roles: Role[]) => roles?.map(role => role.name).join(', ') || '-'
+            header: '角色',
+            size: 120,
+            cell: ({ row }) => row.original.roles?.map(role => role.name).join(', ') || '-',
         },
         {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            width: 150,
-            sorter: true,
+            accessorKey: 'createTime',
+            header: '创建时间',
+            size: 150,
         },
         {
-            title: '更新时间',
-            dataIndex: 'updateTime',
-            width: 150,
-            sorter: true
+            accessorKey: 'updateTime',
+            header: '更新时间',
+            size: 150,
         },
         {
-            title: '操作',
-            key: 'action',
-            width: 180,
-            fixed: 'right',
-            render: (_, record) => {
+            id: 'actions',
+            header: '操作',
+            size: 180,
+            cell: ({ row }) => {
+                const record = row.original;
                 const items: MenuProps['items'] = [
                     {
                         key: 'resetPassword',
@@ -235,7 +243,6 @@ const UserPage: React.FC = () => {
                     }
                 ];
 
-                // 如果不是 admin 用户，添加删除选项
                 if (record.username !== 'admin') {
                     items.push({
                         key: 'delete',
@@ -255,40 +262,58 @@ const UserPage: React.FC = () => {
                         >
                             编辑
                         </Button>
-                        <Dropdown
-                            menu={{ items }}
-                            placement="bottomRight"
-                            trigger={['click']}
-                        >
-                            <Button
-                                type="text"
-                                icon={<MoreOutlined />}
-                                style={{ padding: '4px 8px' }}
-                            />
+                        <Dropdown menu={{ items }} trigger={['click']}>
+                            <Button type="link" icon={<MoreOutlined />} />
                         </Dropdown>
                     </Space>
                 );
-            }
+            },
         },
     ];
 
     return (
-        <Card>
-            <div style={{ marginBottom: 16 }}>
-                <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
+        <div className="space-y-4">
+            <div className="flex justify-between items-center">
+                <Button
+                    type="primary"
+                    icon={<PlusOutlined />}
+                    onClick={handleAdd}
+                >
                     新增用户
                 </Button>
             </div>
 
-            <Table
-                columns={columns}
-                dataSource={list}
-                rowKey="id"
-                loading={loading}
-                scroll={{ x: 1500 }}
-                pagination={pagination}
-                onChange={handleTableChange}
-            />
+            <div className="rounded-md border bg-white">
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            {columns.map((column) => (
+                                <TableHead
+                                    key={column.accessorKey || column.id}
+                                    style={{ width: column.size }}
+                                >
+                                    {column.header}
+                                </TableHead>
+                            ))}
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {list.map((row) => (
+                            <TableRow key={row.id}>
+                                {columns.map((column) => (
+                                    <TableCell key={column.accessorKey || column.id}>
+                                        {column.cell
+                                            ? column.cell({ row: { original: row } })
+                                            : column.accessorKey
+                                                ? String(row[column.accessorKey])
+                                                : null}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
 
             <Modal
                 title={editingUser ? '编辑用户' : '新增用户'}
@@ -436,7 +461,7 @@ const UserPage: React.FC = () => {
                     </Form.Item>
                 </Form>
             </Modal>
-        </Card>
+        </div>
     );
 };
 
diff --git a/frontend/src/pages/System/User/types.ts b/frontend/src/pages/System/User/types.ts
index 8ffb59f0..d52da2bd 100644
--- a/frontend/src/pages/System/User/types.ts
+++ b/frontend/src/pages/System/User/types.ts
@@ -1,46 +1,47 @@
-import type { BaseResponse } from '@/types/base/response';
-import {BaseQuery} from "@/types/base";
+import type { BaseResponse } from '@/types/base';
 
 // 用户查询参数
-export interface UserQuery extends BaseQuery {
-  username?: string;
-  nickname?: string;
-  email?: string;
-  enabled?: boolean;
+export interface UserQuery {
+    username?: string;
+    nickname?: string;
+    email?: string;
+    enabled?: boolean;
+    pageNum?: number;
+    pageSize?: number;
+    sortField?: string;
+    sortOrder?: string;
 }
 
 // 用户请求参数
 export interface UserRequest {
-  username: string;
-  nickname?: string;
-  email?: string;
-  phone?: string;
-  password?: string;
-  enabled?: boolean;
-  departmentId?: number;
+    username: string;
+    nickname?: string;
+    email?: string;
+    phone?: string;
+    password?: string;
+    enabled?: boolean;
+    departmentId?: number;
 }
 
 // 角色类型定义
 export interface Role {
-  id: number;
-  code: string;
-  name: string;
-  description?: string;
-  type: number;
-  sort: number;
-  enabled: boolean;
+    id: number;
+    code: string;
+    name: string;
+    description?: string;
+    type: number;
+    sort: number;
+    enabled: boolean;
 }
 
 // 用户响应类型
 export interface UserResponse extends BaseResponse {
-  username: string;
-  nickname?: string;
-  email?: string;
-  phone?: string;
-  enabled: boolean;
-  roles: Role[];
-  departmentId?: number;
-  departmentName?: string;
-  createTime: string;
-  updateTime: string;
+    username: string;
+    nickname?: string;
+    email?: string;
+    phone?: string;
+    enabled: boolean;
+    roles: Role[];
+    departmentId?: number;
+    departmentName?: string;
 } 
\ No newline at end of file