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,117 +1,125 @@
-import React, { useState, useEffect } from 'react';
-import { Layout, Menu, Button, Avatar, Dropdown, message } from 'antd';
 import {
-    AppstoreOutlined,
-    UserOutlined,
-    LogoutOutlined,
-    MenuFoldOutlined,
-    MenuUnfoldOutlined,
+  AppstoreOutlined,
+  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;
 
 const MainLayout: React.FC = () => {
-    const [collapsed, setCollapsed] = useState(false);
-    const [username, setUsername] = useState('');
-    const location = useLocation();
+  const [collapsed, setCollapsed] = useState(false);
+  const [username, setUsername] = useState('');
+  const location = useLocation();
 
-    useEffect(() => {
-        // 检查登录状态
-        const isLoggedIn = localStorage.getItem('isLoggedIn');
-        const currentUsername = localStorage.getItem('username');
+  useEffect(() => {
+    // 检查登录状态
+    const isLoggedIn = localStorage.getItem('isLoggedIn');
+    const currentUsername = localStorage.getItem('username');
 
-        if (!isLoggedIn) {
-            message.error('请先登录！');
-            history.push('/login');
-            return;
-        }
+    if (!isLoggedIn) {
+      message.error('请先登录！');
+      history.push('/login');
+      return;
+    }
 
-        setUsername(currentUsername || '');
-    }, []);
+    setUsername(currentUsername || '');
+  }, []);
 
-    const handleMenuClick = (key: string) => {
-        // 使用路由导航
-        history.push(`/${key}`);
-    };
+  const handleMenuClick = (key: string) => {
+    // 使用路由导航
+    history.push(`/${key}`);
+  };
 
-    const handleLogout = () => {
-        localStorage.removeItem('isLoggedIn');
-        localStorage.removeItem('username');
-        message.success('已退出登录');
-        history.push('/login');
-    };
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('username');
+    message.success('已退出登录');
+    history.push('/login');
+  };
 
-    const userMenu = (
-        <Menu>
-            <Menu.Item key="profile" icon={<UserOutlined />} onClick={() => history.push('/profile')}>
-                个人资料
-            </Menu.Item>
-            <Menu.Divider />
-            <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
-                退出登录
-            </Menu.Item>
+  const userMenu = (
+    <Menu>
+      <Menu.Item
+        key="profile"
+        icon={<UserOutlined />}
+        onClick={() => history.push('/profile')}
+      >
+        个人资料
+      </Menu.Item>
+      <Menu.Divider />
+      <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
+        退出登录
+      </Menu.Item>
+    </Menu>
+  );
+
+  // 根据当前路径确定选中的菜单项
+  const getSelectedKey = () => {
+    const path = location.pathname;
+    if (path === '/images') return 'images';
+    if (path === '/profile') return 'profile';
+    return 'images'; // 默认选中镜像列表
+  };
+
+  return (
+    <Layout className="main-layout">
+      <Sider
+        trigger={null}
+        collapsible
+        collapsed={collapsed}
+        className="main-sider"
+      >
+        <div className="logo">{!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>
+          <Menu.Item key="profile" icon={<UserOutlined />}>
+            我的
+          </Menu.Item>
         </Menu>
-    );
+      </Sider>
 
-    // 根据当前路径确定选中的菜单项
-    const getSelectedKey = () => {
-        const path = location.pathname;
-        if (path === '/images') return 'images';
-        if (path === '/profile') return 'profile';
-        return 'images'; // 默认选中镜像列表
-    };
+      <Layout>
+        <Header className="main-header">
+          <Button
+            type="text"
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={() => setCollapsed(!collapsed)}
+            className="trigger"
+          />
 
-    return (
-        <Layout className="main-layout">
-            <Sider
-                trigger={null}
-                collapsible
-                collapsed={collapsed}
-                className="main-sider"
-            >
-                <div className="logo">
-                    {!collapsed && <span>VDI管理平台</span>}
-                </div>
-                <Menu
-                    theme="dark"
-                    mode="inline"
-                    selectedKeys={[getSelectedKey()]}
-                    onClick={({ key }) => handleMenuClick(key)}
-                >
-                    <Menu.Item key="images" icon={<AppstoreOutlined />}>
-                        镜像列表
-                    </Menu.Item>
-                    <Menu.Item key="profile" icon={<UserOutlined />}>
-                        我的
-                    </Menu.Item>
-                </Menu>
-            </Sider>
+          <div className="header-right">
+            <span className="welcome-text">欢迎，{username}</span>
+            <Dropdown overlay={userMenu} placement="bottomRight">
+              <Avatar icon={<UserOutlined />} className="user-avatar" />
+            </Dropdown>
+          </div>
+        </Header>
 
-            <Layout>
-                <Header className="main-header">
-                    <Button
-                        type="text"
-                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-                        onClick={() => setCollapsed(!collapsed)}
-                        className="trigger"
-                    />
-
-                    <div className="header-right">
-                        <span className="welcome-text">欢迎，{username}</span>
-                        <Dropdown overlay={userMenu} placement="bottomRight">
-                            <Avatar icon={<UserOutlined />} className="user-avatar" />
-                        </Dropdown>
-                    </div>
-                </Header>
-
-                <Content className="main-content">
-                    <Outlet />
-                </Content>
-            </Layout>
-        </Layout>
-    );
+        <Content className="main-content">
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  );
 };
 
 export default MainLayout;

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;