feat(前端):用户列表

web-fe/.umirc.ts

@@ -26,6 +26,14 @@ export default defineConfig({
           path: '/profile',
           component: '@/pages/profile',
         },
+        {
+          path: '/userList',
+          component: '@/pages/userList',
+        },
+        {
+          path:"/terminal",
+           component: '@/pages/terminal',
+        }
       ],
     },
   ],

web-fe/src/components/Guide/Layout/index.tsx

@@ -83,6 +83,12 @@ const MainLayout: React.FC = () => {
                     <Menu.Item key="images" icon={<AppstoreOutlined />}>
                         镜像列表
                     </Menu.Item>
+                    <Menu.Item key="userList" icon={<AppstoreOutlined />}>
+                        用户
+                    </Menu.Item>
+                    <Menu.Item key="terminal" icon={<AppstoreOutlined />}>
+                        终端
+                    </Menu.Item>
                     <Menu.Item key="profile" icon={<UserOutlined />}>
                         我的
                     </Menu.Item>

web-fe/src/pages/components/Layout/index.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react';
-import { Layout, Menu, Button, Avatar, Dropdown, message } from 'antd';
 import {
   AppstoreOutlined,
-    UserOutlined,
   LogoutOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
+  UserOutlined,
 } from '@ant-design/icons';
-import { history, useLocation, Outlet } from 'umi';
+import { Avatar, Button, Dropdown, Layout, Menu, message } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { history, Outlet, useLocation } from 'umi';
 import './index.less';
 
 const { Header, Sider, Content } = Layout;
@@ -45,7 +45,11 @@ const MainLayout: React.FC = () => {
 
   const userMenu = (
     <Menu>
-            <Menu.Item key="profile" icon={<UserOutlined />} onClick={() => history.push('/profile')}>
+      <Menu.Item
+        key="profile"
+        icon={<UserOutlined />}
+        onClick={() => history.push('/profile')}
+      >
         个人资料
       </Menu.Item>
       <Menu.Divider />
@@ -71,15 +75,19 @@ const MainLayout: React.FC = () => {
         collapsed={collapsed}
         className="main-sider"
       >
-                <div className="logo">
+        <div className="logo">{!collapsed && <span>VDI管理平台</span>}</div>
-                    {!collapsed && <span>VDI管理平台</span>}
-                </div>
         <Menu
           theme="dark"
           mode="inline"
           selectedKeys={[getSelectedKey()]}
           onClick={({ key }) => handleMenuClick(key)}
         >
+          <Menu.Item key="userList" icon={<AppstoreOutlined />}>
+            用户
+          </Menu.Item>
+          <Menu.Item key="terminal" icon={<AppstoreOutlined />}>
+            终端
+          </Menu.Item>
           <Menu.Item key="images" icon={<AppstoreOutlined />}>
             镜像列表
           </Menu.Item>

web-fe/src/pages/userList/index.less

@@ -0,0 +1,31 @@
+.user_content {
+  width: 100%;
+  height: 100%;
+  background-color: #f7f8fa;
+  .left_content {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    background-color: #fff;
+    .search {
+      width: 100%;
+      height: 70px;
+    }
+    .tree_box {
+      width: 100%;
+      height: calc(100% - 70px);
+      overflow: auto;
+      padding-top: 10px;
+    }
+  }
+  .right_content {
+    width: 100%;
+    height: 100%;
+    .teble_content {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      padding: 8px;
+    }
+  }
+}

web-fe/src/pages/userList/index.tsx

@@ -0,0 +1,299 @@
+import { DeleteOutlined, PlusOutlined, TeamOutlined } from '@ant-design/icons';
+import { Button, Col, Input, Pagination, Row, Table, Tree } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import type { DataNode } from 'antd/es/tree';
+import React, { useEffect, useState } from 'react';
+import styles from './index.less';
+
+// Define types for our data
+interface User {
+  id: string;
+  username: string;
+  loginName: string;
+  userGroup: string;
+  userType: string;
+}
+
+interface OrganizationNode {
+  id: string;
+  name: string;
+  children?: OrganizationNode[];
+}
+
+const UserListPage: React.FC = () => {
+  // State for organization tree
+  const [orgTreeData, setOrgTreeData] = useState<DataNode[]>([]);
+  const [selectedOrg, setSelectedOrg] = useState<string>('');
+  const [treeSelect, setTreeSelect] = useState<React.Key[]>([]);
+
+  // State for user list
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState<string>('');
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  // State for pagination
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+  const [totalUsers, setTotalUsers] = useState<number>(0);
+
+  // Mock data for organization tree
+  useEffect(() => {
+    // In a real application, this would come from an API
+    const mockOrgData: DataNode[] = [
+      {
+        title: 'Headquarters',
+        key: '1',
+        children: [
+          {
+            title: 'HR Department',
+            key: '2',
+          },
+          {
+            title: 'IT Department',
+            key: '3',
+            children: [
+              {
+                title: 'Frontend Team',
+                key: '4',
+              },
+              {
+                title: 'Backend Team',
+                key: '5',
+              },
+            ],
+          },
+          {
+            title: 'Finance Department',
+            key: '6',
+          },
+        ],
+      },
+    ];
+    setSelectedOrg(mockOrgData[0].key as string);
+    setOrgTreeData(mockOrgData);
+  }, []);
+
+  // Mock data for users with pagination
+  useEffect(() => {
+    // In a real application, this would come from an API based on selected organization
+    setLoading(true);
+
+    // Simulate API call delay
+    setTimeout(() => {
+      // Generate mock users based on current page and page size
+      const startIndex = (currentPage - 1) * pageSize;
+      const mockUsers: User[] = Array.from(
+        { length: pageSize },
+        (_, index) => ({
+          id: `${startIndex + index + 1}`,
+          username: `User ${startIndex + index + 1}`,
+          loginName: `login${startIndex + index + 1}`,
+          userGroup:
+            index % 3 === 0 ? 'Admin' : index % 3 === 1 ? 'Manager' : 'User',
+          userType:
+            index % 4 === 0
+              ? 'Full-time'
+              : index % 4 === 1
+              ? 'Part-time'
+              : index % 4 === 2
+              ? 'Contractor'
+              : 'Intern',
+        }),
+      );
+
+      setUsers(mockUsers);
+      setTotalUsers(100); // Mock total count
+      setLoading(false);
+    }, 300);
+  }, [selectedOrg, currentPage, pageSize]);
+
+  // Define columns for the user table
+  const columns: ColumnsType<User> = [
+    {
+      title: '登录名',
+      dataIndex: 'username',
+      key: 'username',
+    },
+    {
+      title: '用户姓名',
+      dataIndex: 'loginName',
+      key: 'loginName',
+    },
+    {
+      title: '用户分组',
+      dataIndex: 'userGroup',
+      key: 'userGroup',
+    },
+    {
+      title: '性别',
+      dataIndex: 'sex',
+      key: 'sex',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+    },
+    {
+      title: '用户类别',
+      dataIndex: 'userType',
+      key: 'userType',
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      render: (_, record) => (
+        <div>
+          <Button type="link" onClick={() => handleUserAction(record)}>
+            重置密码
+          </Button>
+          <Button type="link" onClick={() => handleUserAction(record)}>
+            编辑
+          </Button>
+          <Button type="link" onClick={() => handleUserAction(record)}>
+            删除
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const handleUserAction = (user: User) => {
+    console.log('Editing user:', user);
+    // Implement user edit logic here
+  };
+
+  const onOrgSelect = (selectedKeys: React.Key[]) => {
+    if (selectedKeys.length > 0) {
+      setSelectedOrg(selectedKeys[0] as string);
+      // Reset to first page when organization changes
+      setCurrentPage(1);
+    }
+  };
+
+  const handlePageChange = (page: number, size: number) => {
+    setCurrentPage(page);
+    setPageSize(size);
+  };
+
+  const handlePageSizeChange = (current: number, size: number) => {
+    setCurrentPage(1); // Reset to first page when page size changes
+    setPageSize(size);
+  };
+
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+
+  return (
+    <div className={styles.user_content}>
+      <Row gutter={8} style={{ height: '100%' }}>
+        <Col span={5}>
+          <div className={styles.left_content}>
+            <div className={styles.search}>
+              <div style={{ paddingBottom: '5px' }}>
+                <Button
+                  type="text"
+                  style={{ marginRight: '8px', fontSize: '16px' }}
+                  icon={<PlusOutlined />}
+                />
+                <Button
+                  type="text"
+                  style={{ fontSize: '16px' }}
+                  icon={<DeleteOutlined />}
+                />
+              </div>
+              <Input.Search
+                placeholder="请输入名称"
+                style={{ marginBottom: 6 }}
+                onSearch={(value) => console.log('Search org:', value)}
+              />
+            </div>
+            <div className={styles.tree_box}>
+              <Tree
+                showIcon
+                treeData={orgTreeData}
+                defaultExpandAll
+                onSelect={onOrgSelect}
+                selectedKeys={[selectedOrg]}
+                switcherIcon={<TeamOutlined style={{fontSize:"16px"}} />}
+              >
+                {/* {orgTreeData.map((data) => (
+                  <TreeNode />
+                ))} */}
+              </Tree>
+            </div>
+          </div>
+        </Col>
+        <Col span={19}>
+          <div className={styles.right_content}>
+            <div className={styles.teble_content}>
+              <div
+                style={{
+                  marginBottom: 16,
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div>
+                  <Button style={{ marginRight: '8px' }}>刷新</Button>
+                  <Button
+                    disabled={selectedRowKeys.length === 0}
+                    style={{ marginRight: '8px' }}
+                  >
+                    删除
+                  </Button>
+                </div>
+                <div>
+                  <div>
+                    <Input.Search
+                      placeholder="Search users"
+                      value={searchText}
+                      onChange={(e) => setSearchText(e.target.value)}
+                      style={{ width: 300 }}
+                      onSearch={(value) => {
+                        console.log('Search user:', value);
+                        setCurrentPage(1); // Reset to first page when searching
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <Table
+                columns={columns}
+                dataSource={users}
+                loading={loading}
+                rowKey="id"
+                pagination={false}
+                rowSelection={{
+                  selectedRowKeys,
+                  onChange: onSelectChange,
+                }}
+              />
+
+              <div style={{ marginTop: 16, textAlign: 'right' }}>
+                <Pagination
+                  current={currentPage}
+                  pageSize={pageSize}
+                  total={totalUsers}
+                  onChange={handlePageChange}
+                  onShowSizeChange={handlePageSizeChange}
+                  showSizeChanger
+                  showQuickJumper
+                  showTotal={(total, range) =>
+                    `Showing ${range[0]}-${range[1]} of ${total} items`
+                  }
+                />
+              </div>
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default UserListPage;