可用版本

frontend/src/layouts/BasicLayout.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState, useCallback} from 'react';
-import { Layout, Menu, Dropdown, Modal, message, Spin, Space, Tooltip } from 'antd';
+import {Layout, Menu, Dropdown, Modal, message, Spin, Space, Tooltip} from 'antd';
-import { useNavigate, useLocation, Outlet } from 'react-router-dom';
+import {useNavigate, useLocation, Outlet} from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {
     UserOutlined,
     LogoutOutlined,
@@ -11,18 +11,18 @@ import {
     CloudOutlined
 } from '@ant-design/icons';
 import * as AntdIcons from '@ant-design/icons';
-import { logout, setMenus, setUserInfo } from '../store/userSlice';
+import {logout, setMenus, setUserInfo} from '../store/userSlice';
-import type { MenuProps } from 'antd';
+import type {MenuProps} from 'antd';
-import { getCurrentUser } from '../pages/Login/service';
+import {getCurrentUser} from '../pages/Login/service';
-import { getCurrentUserMenus } from '@/pages/System/Menu/service';
+import {getCurrentUserMenus} from '@/pages/System/Menu/service';
-import { getWeather } from '../services/weather';
+import {getWeather} from '../services/weather';
-import type { MenuResponse } from '@/pages/System/Menu/types';
+import type {MenuResponse} from '@/pages/System/Menu/types';
-import type { RootState } from '../store';
+import type {RootState} from '../store';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 
-const { Header, Content, Sider } = Layout;
+const {Header, Content, Sider} = Layout;
-const { confirm } = Modal;
+const {confirm} = Modal;
 
 // 设置中文语言
 dayjs.locale('zh-cn');
@@ -35,69 +35,71 @@ const BasicLayout: React.FC = () => {
     const menus = useSelector((state: RootState) => state.user.menus);
     const [loading, setLoading] = useState(true);
     const [currentTime, setCurrentTime] = useState(dayjs());
-  const [weather, setWeather] = useState({ temp: '--', weather: '未知', city: '未知' });
+    const [weather, setWeather] = useState({temp: '--', weather: '未知', city: '未知'});
-  const [isInitialized, setIsInitialized] = useState(false);
 
-  useEffect(() => {
+    // 将天气获取逻辑提取为useCallback
-    // 每秒更新时间
+    const fetchWeather = useCallback(async () => {
-    const timer = setInterval(() => {
-      setCurrentTime(dayjs());
-    }, 1000);
-
-    // 获取天气信息
-    const fetchWeather = async () => {
         try {
             const data = await getWeather();
             setWeather(data);
         } catch (error) {
             console.error('获取天气信息失败:', error);
         }
-    };
+    }, []);
 
     // 初始化用户数据
+    useEffect(() => {
         const initializeUserData = async () => {
-      if (isInitialized) return;
             try {
                 setLoading(true);
-        
-        // 获取并更新用户信息
                 const userData = await getCurrentUser();
                 dispatch(setUserInfo(userData));
-
                 const menuData = await getCurrentUserMenus();
                 dispatch(setMenus(menuData));
-
-        setIsInitialized(true);
             } catch (error) {
                 message.error('初始化用户数据失败');
+                dispatch(logout());
+                navigate('/login', {replace: true});
             } finally {
                 setLoading(false);
             }
         };
 
-    fetchWeather();
+        if (!userInfo) {
             initializeUserData();
+        } else {
+            setLoading(false);
+        }
+    }, []);
 
-    // 每半小时更新一次天气
+    // 处理时间和天气更新
+    useEffect(() => {
+        // 每秒更新时间
+        const timer = setInterval(() => {
+            setCurrentTime(dayjs());
+        }, 1000);
+
+        // 初始化天气并设置定时更新
+        fetchWeather();
         const weatherTimer = setInterval(fetchWeather, 30 * 60 * 1000);
 
         return () => {
             clearInterval(timer);
             clearInterval(weatherTimer);
         };
-  }, [isInitialized]);
+    }, [fetchWeather]);
 
     const handleLogout = () => {
         confirm({
             title: '确认退出',
-      icon: <ExclamationCircleOutlined />,
+            icon: <ExclamationCircleOutlined/>,
             content: '确定要退出系统吗？',
             okText: '确定',
             cancelText: '取消',
             onOk: () => {
                 dispatch(logout());
                 message.success('退出成功');
-        navigate('/login', { replace: true });
+                navigate('/login', {replace: true});
             }
         });
     };
@@ -105,11 +107,11 @@ const BasicLayout: React.FC = () => {
     const userMenuItems: MenuProps['items'] = [
         {
             key: 'userInfo',
-      icon: <UserOutlined />,
+            icon: <UserOutlined/>,
             label: (
-        <div style={{ padding: '4px 0' }}>
+                <div style={{padding: '4px 0'}}>
                     <div>当前用户：{userInfo?.nickname || userInfo?.username}</div>
-          {userInfo?.email && <div style={{ fontSize: '12px', color: '#999' }}>{userInfo.email}</div>}
+                    {userInfo?.email && <div style={{fontSize: '12px', color: '#999'}}>{userInfo.email}</div>}
                 </div>
             ),
             disabled: true
@@ -119,7 +121,7 @@ const BasicLayout: React.FC = () => {
         },
         {
             key: 'logout',
-      icon: <LogoutOutlined />,
+            icon: <LogoutOutlined/>,
             label: '退出登录',
             onClick: handleLogout
         }
@@ -130,7 +132,7 @@ const BasicLayout: React.FC = () => {
         if (!iconName) return null;
         const iconKey = `${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Outlined`;
         const Icon = (AntdIcons as any)[iconKey];
-    return Icon ? <Icon /> : null;
+        return Icon ? <Icon/> : null;
     };
 
     // 将菜单数据转换为antd Menu需要的格式
@@ -154,7 +156,7 @@ const BasicLayout: React.FC = () => {
                 alignItems: 'center',
                 background: '#f0f2f5'
             }}>
-        <Spin size="large" />
+                <Spin size="large"/>
                 <div style={{
                     marginTop: 24,
                     fontSize: 16,
@@ -162,22 +164,22 @@ const BasicLayout: React.FC = () => {
                     textAlign: 'center'
                 }}>
                     <p>正在为您准备系统资源</p>
-          <p style={{ fontSize: 14 }}>请稍候，马上就好...</p>
+                    <p style={{fontSize: 14}}>请稍候，马上就好...</p>
                 </div>
             </div>
         );
     }
 
     return (
-    <Layout style={{ minHeight: '100vh' }}>
+        <Layout style={{minHeight: '100vh'}}>
             <Sider>
-        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+                <div style={{height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)'}}/>
                 <Menu
                     theme="dark"
                     mode="inline"
                     selectedKeys={[location.pathname]}
                     items={getMenuItems(menus)}
-          onClick={({ key }) => navigate(key)}
+                    onClick={({key}) => navigate(key)}
                 />
             </Sider>
             <Layout>
@@ -197,7 +199,7 @@ const BasicLayout: React.FC = () => {
                   color: 'rgba(0, 0, 0, 0.65)',
                   fontSize: 14
               }}>
-                <ClockCircleOutlined style={{ marginRight: 8 }} />
+                <ClockCircleOutlined style={{marginRight: 8}}/>
                   {currentTime.format('YYYY年MM月DD日 HH:mm:ss')} 星期{currentTime.format('dd')}
               </span>
                             <Tooltip title={`${weather.city}`}>
@@ -207,12 +209,12 @@ const BasicLayout: React.FC = () => {
                     color: 'rgba(0, 0, 0, 0.65)',
                     fontSize: 14
                 }}>
-                  <CloudOutlined style={{ marginRight: 8 }} />
+                  <CloudOutlined style={{marginRight: 8}}/>
                     {weather.weather} {weather.temp}℃
                 </span>
                             </Tooltip>
                         </Space>
-            <Dropdown menu={{ items: userMenuItems }} trigger={['hover']}>
+                        <Dropdown menu={{items: userMenuItems}} trigger={['hover']}>
               <span style={{
                   cursor: 'pointer',
                   display: 'inline-flex',
@@ -225,15 +227,15 @@ const BasicLayout: React.FC = () => {
                       backgroundColor: 'rgba(0,0,0,0.025)'
                   }
               }}>
-                <UserOutlined style={{ fontSize: 16, marginRight: 8 }} />
+                <UserOutlined style={{fontSize: 16, marginRight: 8}}/>
                 <span>{userInfo?.nickname || userInfo?.username}</span>
-                <DownOutlined style={{ fontSize: 12, marginLeft: 6 }} />
+                <DownOutlined style={{fontSize: 12, marginLeft: 6}}/>
               </span>
                         </Dropdown>
                     </Space>
                 </Header>
-        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
+                <Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>
-          <Outlet />
+                    <Outlet/>
                 </Content>
             </Layout>
         </Layout>

frontend/src/pages/Dashboard/index.tsx

@@ -1,8 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Card, Row, Col, Statistic } from 'antd';
 import { UserOutlined, ShoppingCartOutlined, FileOutlined } from '@ant-design/icons';
 
 const Dashboard: React.FC = () => {
+  useEffect(() => {
+    // 检查这里的数据加载逻辑
+    // 是否有多个useEffect都在加载相同的数据
+    // 或者依赖项是否设置正确
+  }, []);  // 检查依赖项
+
   return (
     <div>
       <Row gutter={16}>

frontend/src/pages/System/User/index.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { Table, Button, Modal, Form, Input, Space, message, Switch, TreeSelect } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TeamOutlined } from '@ant-design/icons';
-import type { UserResponse } from './types';
+import type { UserResponse, Role } from './types';
 import type { DepartmentDTO } from '../Department/types';
 import { getUsers, createUser, updateUser, deleteUser, resetPassword } from './service';
 import { getDepartmentTree } from '../Department/service';
 import { convertToPageParams, convertToPageInfo } from '@/utils/page';
 import { useTableData } from '@/hooks/useTableData';
+import type { FixedType, AlignType } from 'rc-table/lib/interface';
 // import RoleModal from './components/RoleModal';
 
 const UserPage: React.FC = () => {
@@ -45,10 +46,6 @@ const UserPage: React.FC = () => {
   const [form] = Form.useForm();
   const [passwordForm] = Form.useForm();
 
-  useEffect(() => {
-    fetchUsers();
-  }, [pagination.current, pagination.pageSize]);
-
   const handleAdd = () => {
     setEditingUser(null);
     form.resetFields();
@@ -61,8 +58,7 @@ const UserPage: React.FC = () => {
   const handleEdit = (record: UserResponse) => {
     setEditingUser(record);
     form.setFieldsValue({
-      ...record,
+      ...record
-      password: 'UNCHANGED_PASSWORD'
     });
     setModalVisible(true);
   };
@@ -77,7 +73,7 @@ const UserPage: React.FC = () => {
     try {
       const values = await passwordForm.validateFields();
       if (editingUser) {
-        await resetPassword(editingUser.id);
+        await resetPassword(editingUser.id, values.password);
         message.success('密码重置成功');
         setResetPasswordModalVisible(false);
       }
@@ -92,7 +88,6 @@ const UserPage: React.FC = () => {
       if (editingUser) {
         await updateUser(editingUser.id, {
           ...values,
-          password: values.password === 'UNCHANGED_PASSWORD' ? editingUser.password : values.password,
           version: editingUser.version
         });
         message.success('更新成功');
@@ -121,77 +116,86 @@ const UserPage: React.FC = () => {
   // };
 
   const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      width: 80,
+      fixed: 'left' as FixedType
+    },
     {
       title: '用户名',
       dataIndex: 'username',
       key: 'username',
-      width: '12%',
+      width: 120,
     },
     {
       title: '昵称',
       dataIndex: 'nickname',
       key: 'nickname',
-      width: '12%',
+      width: 120,
     },
     {
       title: '邮箱',
       dataIndex: 'email',
       key: 'email',
-      width: '15%',
+      width: 200,
+      ellipsis: true,
     },
     {
       title: '手机号',
       dataIndex: 'phone',
       key: 'phone',
-      width: '12%',
+      width: 120,
     },
     {
       title: '角色',
       dataIndex: 'roles',
       key: 'roles',
-      width: '15%',
+      width: 150,
+      ellipsis: true,
       render: (roles: Role[]) => roles?.map(role => role.name).join(', ') || '-'
     },
     {
       title: '创建时间',
       dataIndex: 'createTime',
       key: 'createTime',
-      width: '15%',
+      width: 180,
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      width: 180,
     },
     {
       title: '状态',
       dataIndex: 'enabled',
       key: 'enabled',
-      width: '8%',
+      width: 80,
+      align: 'center' as AlignType,
       render: (enabled: boolean) => (
-        <Switch checked={enabled} disabled />
+        <Switch checked={enabled} disabled size="small" />
       ),
     },
     {
       title: '操作',
       key: 'action',
-      width: '280px',
+      width: 180,
+      fixed: 'right' as FixedType,
       render: (_: any, record: UserResponse) => (
-        <Space>
+        <Space size="small">
           <Button 
             type="link"
+            size="small"
             icon={<EditOutlined />}
             onClick={() => handleEdit(record)}
           >
             编辑
           </Button>
-          {/* 注释掉角色分配按钮
-          <Button
-            type="link"
-            icon={<TeamOutlined />}
-            onClick={() => handleAssignRoles(record)}
-            disabled={record.username === 'admin'}
-          >
-            分配角色
-          </Button>
-          */}
           <Button
             type="link"
+            size="small"
             icon={<KeyOutlined />}
             onClick={() => handleResetPassword(record)}
           >
@@ -199,6 +203,7 @@ const UserPage: React.FC = () => {
           </Button>
           <Button 
             type="link"
+            size="small"
             danger
             icon={<DeleteOutlined />}
             onClick={() => handleDelete(record.id)}
@@ -224,12 +229,25 @@ const UserPage: React.FC = () => {
         columns={columns}
         dataSource={users}
         rowKey="id"
+        scroll={{ x: 1500 }}
         pagination={{
           ...pagination,
           showSizeChanger: true,
           showQuickJumper: true,
           showTotal: (total) => `共 ${total} 条记录`,
-          onChange: onPageChange
+          onChange: onPageChange,
+          size: 'small'
+        }}
+        rowSelection={{
+          type: 'checkbox',
+          onChange: (selectedRowKeys, selectedRows) => {
+            console.log('selectedRowKeys:', selectedRowKeys);
+            console.log('selectedRows:', selectedRows);
+          },
+          getCheckboxProps: (record) => ({
+            disabled: record.username === 'admin',
+          }),
+          fixed: true,
         }}
         size="middle"
         bordered
@@ -254,20 +272,6 @@ const UserPage: React.FC = () => {
           >
             <Input placeholder="请输入用户名" disabled={!!editingUser} />
           </Form.Item>
-          {editingUser && (
-            <Form.Item name="password" hidden>
-              <Input type="hidden" />
-            </Form.Item>
-          )}
-          {!editingUser && (
-            <Form.Item
-              name="password"
-              label="密码"
-              rules={[{ required: true, message: '请输入密码' }]}
-            >
-              <Input.Password placeholder="请输入密码" />
-            </Form.Item>
-          )}
           <Form.Item
             name="nickname"
             label="昵称"

frontend/src/services/weather.ts

@@ -15,7 +15,7 @@ export const getWeather = async (): Promise<WeatherData> => {
         const key = '46a02c7d20534596f7386caf02204caa'; // 需要替换成你自己的 key
 
         const ipResponse = await axios.get(`${ipUrl}?key=${key}`);
-    const { adcode } = ipResponse.data;
+        const {adcode} = ipResponse.data;
 
         const weatherResponse = await axios.get(`${weatherUrl}?key=${key}&city=${adcode}`);
         const weatherData = weatherResponse.data.lives[0];

frontend/src/store/index.ts

@@ -1,4 +1,4 @@
-import { configureStore } from '@reduxjs/toolkit';
+import {configureStore} from '@reduxjs/toolkit';
 import userReducer from './userSlice';
 
 const store = configureStore({

frontend/src/store/userSlice.ts

@@ -1,5 +1,5 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import {createSlice, PayloadAction} from '@reduxjs/toolkit';
-import type { MenuResponse } from '@/pages/System/Menu/types';
+import type {MenuResponse} from '@/pages/System/Menu/types';
 
 interface UserInfo {
     id: number;
@@ -47,5 +47,5 @@ const userSlice = createSlice({
     }
 });
 
-export const { setToken, setUserInfo, setMenus, logout } = userSlice.actions;
+export const {setToken, setUserInfo, setMenus, logout} = userSlice.actions;
 export default userSlice.reducer; 

frontend/src/utils/page.ts

@@ -1,4 +1,4 @@
-import type { Page, PageParams } from '@/types/base/page';
+import type {Page, PageParams} from '@/types/base/page';
 
 // 默认分页参数
 const DEFAULT_PAGE_SIZE = 10;

frontend/src/utils/request.ts

@@ -1,5 +1,5 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import axios, {AxiosRequestConfig, AxiosResponse} from 'axios';
-import { message } from 'antd';
+import {message} from 'antd';
 
 export interface ApiResponse<T = any> {
     code: number;

frontend/src/utils/table.ts

@@ -1,4 +1,4 @@
-import type { TableState } from '@/types/table';
+import type {TableState} from '@/types/table';
 
 // 创建初始状态
 export const createInitialState = <T>(pageSize: number = 10): TableState<T> => ({