增加用户页面，登录日志页面

.gitignore

@@ -1,6 +1,7 @@
 # Logs
 logs
 *.log
+!src/system/logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

src/components/cascader/Cascader.tsx

@@ -0,0 +1,35 @@
+import { Cascader as AntCascader, CascaderProps as AntCascaderProps } from 'antd'
+import { DefaultOptionType } from 'antd/es/cascader'
+import { findValuePath } from '@/utils/tree.ts'
+
+export  type CascaderProps<T extends DefaultOptionType> = AntCascaderProps<T> & {
+    key?: string
+}
+
+const getValue = (options: DefaultOptionType[], value?: any, fieldNames?: any) => {
+    if (value === undefined || value === null) return []
+    if (Array.isArray(value)) return value
+    return findValuePath(options as any, value, fieldNames) ?? []
+}
+
+export const Cascader = ({ value, options = [], fieldNames, ...props }: CascaderProps<DefaultOptionType>) => {
+
+    const f = {
+        key: fieldNames?.value ?? 'value',
+        title: fieldNames?.label ?? 'label',
+        children: fieldNames?.children ?? 'children',
+    } as any
+    return (
+            <AntCascader {...props}
+                         options={options}
+                         fieldNames={fieldNames}
+                         value={getValue(options, value, f)}>
+            </AntCascader>
+    )
+}
+
+Cascader.displayName = 'Cascader'
+Cascader.SHOW_CHILD = AntCascader.SHOW_CHILD
+Cascader.SHOW_PARENT = AntCascader.SHOW_PARENT
+
+export default Cascader

src/components/cascader/index.ts

@@ -0,0 +1 @@
+export * from './Cascader.tsx'

src/components/department-tree/DepartmentCascader.tsx

@@ -0,0 +1,39 @@
+import { Cascader, CascaderProps } from '@/components/cascader'
+import { useAtomValue } from 'jotai/index'
+import { departTreeAtom } from '@/store/department.ts'
+import { usePageStoreOptions } from '@/store'
+import { Spin } from 'antd'
+import { useTranslation } from '@/i18n.ts'
+
+export interface DepartmentCascaderProps extends Omit<CascaderProps<any>, 'options'> {
+    onChange?: (value: any) => void
+}
+
+const displayRender = (labels: string[]) => labels[labels.length - 1]
+
+export const DepartmentCascader = (props: DepartmentCascaderProps) => {
+
+    const { t } = useTranslation()
+    const { data = [], isLoading } = useAtomValue(departTreeAtom, usePageStoreOptions())
+
+    const onChange = (value) => {
+
+        props?.onChange?.(value[value.length - 1])
+    }
+
+    return (
+            <Spin spinning={isLoading} size={'small'}>
+                <Cascader changeOnSelect={true} {...props as any}
+                          fieldNames={{
+                              label: 'name',
+                              value: 'id',
+                          }}
+                          placeholder={t('component.DepartmentCascader.placeholder', '请选择部门')}
+                          onChange={onChange}
+                          displayRender={displayRender}
+                          showCheckedStrategy={Cascader.SHOW_CHILD}
+                          options={data as any}>
+                </Cascader>
+            </Spin>
+    )
+}

src/components/department-tree/DepartmentTree.tsx

@@ -11,6 +11,7 @@ import { IDepartment } from '@/types/department'
 
 export interface DepartmentTreeProps extends TreeProps {
     root?: TreeDataNode | boolean | string
+    onItemClick?: (item: IDepartment) => void
 }
 
 function getTopDataNode(root?: TreeDataNode | boolean | string, fieldNames?: TreeProps['fieldNames']) {
@@ -50,6 +51,7 @@ export const DepartmentTree = ({ root, ...props }: DepartmentTreeProps) => {
     const { t } = useTranslation()
     const { data = [], isLoading } = useAtomValue(departTreeAtom, usePageStoreOptions())
     const flattenMenusRef = useRef<IDepartment[]>([])
+    const topData = getTopDataNode(root, props.fieldNames)
 
     useDeepCompareEffect(() => {
 
@@ -59,17 +61,18 @@ export const DepartmentTree = ({ root, ...props }: DepartmentTreeProps) => {
         // @ts-ignore array
         if (data.length) {
             // @ts-ignore flattenTree
-            flattenMenusRef.current = flattenTree<IDepartment[]>(data as any)
+            flattenMenusRef.current = [ topData ].concat(flattenTree<IDepartment[]>(data as any))
+        } else {
+            flattenMenusRef.current = topData ? [ topData as unknown as IDepartment ] : [] as IDepartment[]
         }
 
-    }, [ data, isLoading ])
+    }, [ data, isLoading, topData ])
 
 
     const renderEmpty = () => {
         if ((data as any).length > 0 || isLoading) return null
         return <Empty description={t('message.emptyDataAdd', '暂无数据，点击添加')}/>
     }
-    const topData = getTopDataNode(root, props.fieldNames)
     const treeData = topData ? [ topData, ...data as Array<any> ] : data
 
     return (<>
@@ -84,6 +87,14 @@ export const DepartmentTree = ({ root, ...props }: DepartmentTreeProps) => {
                             // checkable={true}
                             showIcon={false}
                             {...props}
+                            onSelect={(keys, info) => {
+                                if (props.onSelect) {
+                                    props.onSelect(keys, info)
+                                }
+                                const current = flattenMenusRef.current?.find((menu) => menu.id === keys[0])
+                                props?.onItemClick?.(current!)
+                            }}
+
                     />
                 </Spin>
             </>

src/components/department-tree/index.ts

@@ -0,0 +1,2 @@
+export * from './DepartmentTree'
+export * from './DepartmentCascader.tsx'

src/components/error/404.tsx

@@ -1,12 +1,19 @@
 import { useTranslation } from '@/i18n.ts'
 import { useNavigate } from '@tanstack/react-router'
 import { Button, Result } from 'antd'
+import { useAtomValue } from 'jotai'
+import { userMenuDataAtom } from '@/store/user.ts'
 
 const NotFound = () => {
 
     const navigate = useNavigate()
     const { t } = useTranslation()
+    const { data } = useAtomValue(userMenuDataAtom)
 
+    if (!data) {
+        return null
+
+    }
     return (
             <Result
                     className="error-page"

src/components/icon/index.tsx

@@ -1,4 +1,4 @@
-import IconAll, { ALL_ICON_KEYS, IconType, IIconAllProps } from '@icon-park/react/es/all'
+import IconAll, { ALL_ICON_KEYS, IconType as ParkIconType, IIconAllProps } from '@icon-park/react/es/all'
 import React, { Fragment } from 'react'
 import * as AntIcons from '@ant-design/icons/es/icons'
 
@@ -35,7 +35,7 @@ export function Icon(props: IconProps) {
     return <img src={type} alt="icon" width={16} height={16} {...other}/>
   }
 
-  if (ALL_ICON_KEYS.indexOf(type as IconType) < 0) {
+  if (ALL_ICON_KEYS.indexOf(type as ParkIconType) < 0) {
     return null
   }
 

src/components/icon/picker/index.tsx

@@ -26,6 +26,8 @@ const IconPicker: FC = (props: PickerProps) => {
         if (value) {
             const [ type, componentName ] = value.split(':')
             selectIcon({ type, componentName } as any)
+        }else{
+            selectIcon(null as any)
         }
     }, [ value ])
 

src/components/role-picker/RolePicker.tsx

@@ -0,0 +1,52 @@
+import { convertToBool } from '@/utils'
+import { Select, SelectProps } from 'antd'
+import { useAtomValue } from 'jotai'
+import { rolesAtom } from '@/store/role.ts'
+import { memo } from 'react'
+import { useTranslation } from '@/i18n.ts'
+
+export interface RolePickerProps extends SelectProps {
+    value?: any
+    onChange?: (value: any) => void
+    view?: boolean
+}
+
+const formatValue = (value: any) => {
+    if (value === undefined || value === null) {
+        return []
+    }
+    if (Array.isArray(value) && typeof value?.[0] === 'object') {
+        return (value as Array<object>).map(i => i['id'])
+    }
+    return value
+}
+
+const RolePicker = memo(({ value, view, ...props }: RolePickerProps) => {
+
+    const { t } = useTranslation()
+    const { data: roles, isPending } = useAtomValue(rolesAtom)
+
+    if (view) {
+        return value
+    }
+
+    return (
+            <>
+                <Select showSearch={true}
+                        {...props}
+                        value={formatValue(value)}
+                        mode={'multiple'}
+                        placeholder={t('component.RolePicker.placeholder', '请选择角色')}
+                        options={
+                            (roles?.rows ?? []).map(i => ({
+                                label: i.name,
+                                value: i.id,
+                                disabled: !convertToBool(i.status)
+                            }))
+                        }
+                        loading={isPending}/>
+            </>
+    )
+})
+
+export default RolePicker

src/components/switch/index.tsx

@@ -2,7 +2,9 @@ import { convertToBool } from '@/utils'
 import { Switch as AntSwitch, SwitchProps } from 'antd'
 
 
-export const Switch = ({ value, ...props }: SwitchProps) => {
+export const Switch = ({ value, ...props }: Omit<SwitchProps, 'value'> & {
+    value: any
+}) => {
     return (
             <AntSwitch {...props} value={convertToBool(value)}/>
     )

src/layout/TreePageLayout.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { createLazyRoute, Outlet } from '@tanstack/react-router'
-
-interface ITreePageLayoutProps {
-    children: React.ReactNode
-
-}
-
-const TreePageLayout: React.FC<ITreePageLayoutProps> = (props) => {
-    return (
-            <>
-                {props.children}
-                <Outlet/>
-            </>
-    )
-}
-
-export const GenRoute = (id: string) => createLazyRoute(id)({
-    component: TreePageLayout,
-})

src/layout/TwoColPageLayout.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { PageContainer, PageContainerProps } from '@ant-design/pro-components'
+import { Flexbox } from 'react-layout-kit'
+import { DraggablePanel, DraggablePanelProps } from '@/components/draggable-panel'
+import { useStyle } from './style'
+
+interface ITreePageLayoutProps {
+    children?: React.ReactNode
+    draggableProps?: DraggablePanelProps
+    pageProps?: PageContainerProps
+    leftPanel?: React.ReactNode
+}
+
+export const TwoColPageLayout: React.FC<ITreePageLayoutProps> = (props) => {
+    const { styles } = useStyle({ className: 'two-col' })
+    return (
+            <PageContainer
+                    breadcrumbRender={false} title={false} className={styles.container}
+                    {...props.pageProps}
+            >
+                <Flexbox horizontal className={styles.authHeight}>
+                    <DraggablePanel expandable={false}
+                                    placement="left"
+                                    defaultSize={{ width: 300 }}
+                                    maxWidth={500}
+                                    style={{ position: 'relative' }}
+                                    {...props.draggableProps}
+                    >
+                        {props.leftPanel}
+                    </DraggablePanel>
+                    <Flexbox className={styles.box}>
+                        {props.children}
+                    </Flexbox>
+                </Flexbox>
+            </PageContainer>
+    )
+}
+
+export default TwoColPageLayout

src/layout/style.ts

@@ -5,6 +5,8 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
 
   const container = {
     [prefix]: css`
+      
+      
       .ant-pro-global-header-logo,
       .ant-pro-layout-bg-list {
         user-select: none;
@@ -27,9 +29,19 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
     }
     
   `
+  const box = css`
+    flex: 1;
+    background: ${token.colorBgContainer};
+  `
+  const authHeight = css`
+    min-height: calc(100vh - 122px); 
+    background-color: ${token.colorBgContainer};
+  `
 
   return {
     container: cx(container[prefix], props?.className),
+    box,
+    authHeight,
     pageContext,
     sideMenu,
   }

src/pages/system/departments/index.tsx

@@ -11,6 +11,7 @@ import { useAtom, useAtomValue, } from 'jotai'
 import Glass from '@/components/glass'
 import { useEffect, useRef } from 'react'
 import UserPicker from '@/components/user-picker/UserPicker.tsx'
+import TwoColPageLayout from '@/layout/TwoColPageLayout.tsx'
 
 const Departments = () => {
 
@@ -39,15 +40,8 @@ const Departments = () => {
     }, [ current ])
 
     return (
-            <PageContainer breadcrumbRender={false} title={false} className={styles.container}>
-
-                <Flexbox horizontal>
-                    <DraggablePanel expandable={false}
-                                    placement="left"
-                                    defaultSize={{ width: 300 }}
-                                    maxWidth={500}
-                                    style={{ position: 'relative' }}
-                    >
+            <TwoColPageLayout
+                    leftPanel={<>
                         <ProCard title={t('system.departments.title', '部门')}>
                             <DepartmentTree form={form}/>
                         </ProCard>
@@ -66,8 +60,8 @@ const Departments = () => {
                                     }}
                             >{t('actions.news')}</Button>
                         </div>
-                    </DraggablePanel>
-                    <Flexbox className={styles.box}>
+                    </>}
+            >
                 <Glass
                         enabled={current.id === undefined}
                         description={<>
@@ -147,9 +141,7 @@ const Departments = () => {
                     </ProCard>
 
                 </Glass>
-                    </Flexbox>
-                </Flexbox>
-            </PageContainer>
+            </TwoColPageLayout>
     )
 }
 

src/pages/system/departments/style.ts

@@ -32,7 +32,8 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
             padding: 0 10px;
         }
 
-    &:hover .actions { {
+        &:hover .actions {
+        {
             display: flex;
         }
 
@@ -59,9 +60,13 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
     `
     const emptyForm = css`
     `
-
+    const authHeight = css`
+        min-height: calc(100vh - 122px);
+        background-color: ${token.colorBgContainer};
+    `
     return {
         container: cx(prefix),
+        authHeight,
         box,
         form,
         emptyForm,

src/pages/system/logs/login/index.tsx

@@ -0,0 +1,144 @@
+import Switch from '@/components/switch'
+import {
+    ActionType,
+    PageContainer,
+    ProColumns,
+    ProTable,
+} from '@ant-design/pro-components'
+import { useStyle } from './style.ts'
+import { memo, useMemo, useRef, useState } from 'react'
+import { useAtom, useAtomValue } from 'jotai'
+
+import { useTranslation } from '@/i18n.ts'
+import { Button, Space, Table, Popconfirm } from 'antd'
+import { deleteLoginLogAtom, loginLogPageAtom, loginLogsAtom, loginLogSearchAtom } from '@/store/logs.ts'
+
+const LoginLog = memo(() => {
+
+    const { t } = useTranslation()
+    const { styles } = useStyle()
+    const actionRef = useRef<ActionType>()
+    const [ page, setPage ] = useAtom(loginLogPageAtom)
+    const [ search, setSearch ] = useAtom(loginLogSearchAtom)
+    const { data, isLoading, isFetching, refetch } = useAtomValue(loginLogsAtom)
+    const { mutate: deleteLog, isPending: isDeleting } = useAtomValue(deleteLoginLogAtom)
+    const [ ids, setIds ] = useState<number[]>([])
+
+    const columns = useMemo(() => {
+
+        return [
+            {
+                title: 'id', dataIndex: 'id',
+                hideInTable: true,
+                hideInSearch: true,
+                formItemProps: {
+                    hidden: true
+                }
+            },
+            {
+                title: t('system.logs.login.columns.username', '登录帐号'), dataIndex: 'username', valueType: 'text',
+            },
+            {
+                title: t('system.logs.login.columns.ip', '登录IP'), dataIndex: 'ip', valueType: 'text',
+            },
+            {
+                title: t('system.logs.login.columns.user_agent', '浏览器'), dataIndex: 'user_agent', valueType: 'text',
+            },
+            {
+                title: t('system.logs.login.columns.status', '状态'), dataIndex: 'status', valueType: 'switch',
+                render: (_, record) => {
+                    return <Switch value={record.status} size={'small'}/>
+                },
+            },
+            {
+                title: t('system.logs.login.columns.created_at', '登录时间'),
+                dataIndex: 'created_at',
+                valueType: 'dateTime',
+            },
+            {
+                title: t('system.logs.login.columns.option','操作'), valueType: 'option',
+                key: 'option',
+                render: (_, record) => [
+                    <Popconfirm
+                            key={'del_confirm'}
+                            onConfirm={() => {
+                                deleteLog([ record.id ])
+                            }}
+                            title={t('message.deleteConfirm')}>
+                        <a key="del">
+                            {t('actions.delete', '删除')}
+                        </a>
+                    </Popconfirm>
+                    ,
+                ],
+            },
+        ] as ProColumns[]
+    }, [])
+
+    return (
+            <PageContainer breadcrumbRender={false} title={false} className={styles.container}>
+                <div className={styles.authHeight}>
+                    <ProTable
+                            rowKey={'id'}
+                            actionRef={actionRef}
+                            headerTitle={t('system.logs.login.title', '登录日志')}
+                            columns={columns}
+                            loading={isLoading || isFetching}
+                            dataSource={data?.rows}
+                            search={false}
+                            rowSelection={{
+                                onChange: (selectedRowKeys) => {
+                                    setIds(selectedRowKeys as number[])
+                                },
+                                selectedRowKeys: ids,
+                                selections: [ Table.SELECTION_ALL, Table.SELECTION_INVERT ],
+                            }}
+                            tableAlertOptionRender={() => {
+                                return (
+                                        <Space size={16}>
+                                            <Popconfirm
+                                                    onConfirm={() => {
+                                                        deleteLog(ids)
+                                                    }}
+                                                    title={t('message.batchDelete')}>
+                                                <Button type={'link'}
+                                                        loading={isDeleting}>{t('actions.batchDel')}</Button>
+                                            </Popconfirm>
+                                        </Space>
+                                )
+                            }}
+                            options={{
+                                reload: () => {
+                                    refetch()
+                                },
+                            }}
+                            toolbar={{
+                                search: {
+                                    loading: isFetching && !!search.key,
+                                    onSearch: (value: string) => {
+                                        setSearch({ key: value })
+                                    },
+                                    placeholder: t('system.logs.login.search.placeholder','请输入用户名查询')
+                                },
+                                actions: []
+                            }}
+                            pagination={{
+                                total: data?.total,
+                                current: page.page,
+                                pageSize: page.pageSize,
+                                onChange: (page) => {
+
+                                    setPage((prev) => {
+                                        return { ...prev, page }
+                                    })
+                                }
+                            }}
+                    />
+                </div>
+
+
+            </PageContainer>
+    )
+})
+
+export default LoginLog

src/pages/system/logs/login/style.ts

@@ -0,0 +1,14 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+    const prefix = `${prefixCls}-${token?.proPrefix}-logs-login-page`
+    const authHeight = css`
+        min-height: calc(100vh - 122px);
+        background-color: ${token.colorBgContainer};
+    `
+
+    return {
+        container: cx(prefix),
+        authHeight,
+    }
+})

src/pages/system/menus/index.tsx

@@ -1,20 +1,18 @@
 import Glass from '@/components/glass'
 import { useTranslation } from '@/i18n.ts'
-
 import { PlusOutlined } from '@ant-design/icons'
-import { PageContainer, ProCard } from '@ant-design/pro-components'
+import { ProCard } from '@ant-design/pro-components'
 import { Button, Form, Input, Radio, TreeSelect, InputNumber, notification, Alert, InputRef, Divider } from 'antd'
 import { useAtom, useAtomValue } from 'jotai'
 import { defaultMenu, menuDataAtom, saveOrUpdateMenuAtom, selectedMenuAtom } from '@/store/menu.ts'
 import IconPicker from '@/components/icon/picker'
 import ButtonTable from './components/ButtonTable.tsx'
-import { Flexbox } from 'react-layout-kit'
-import { DraggablePanel } from '@/components/draggable-panel'
 import { useStyle } from './style.ts'
 import { MenuItem } from '@/global'
 import MenuTree from './components/MenuTree.tsx'
 import BatchButton from '@/pages/system/menus/components/BatchButton.tsx'
 import { useEffect, useRef } from 'react'
+import TwoColPageLayout from '@/layout/TwoColPageLayout.tsx'
 
 const Menus = () => {
 
@@ -43,15 +41,8 @@ const Menus = () => {
     }, [ currentMenu ])
 
     return (
-    <PageContainer breadcrumbRender={false} title={false} className={styles.container}>
-
-      <Flexbox horizontal>
-        <DraggablePanel expandable={false}
-                        placement="left"
-                        defaultSize={{ width: 300 }}
-                        maxWidth={500}
-                        style={{ position: 'relative' }}
-        >
+            <TwoColPageLayout
+                    leftPanel={<>
                         <ProCard title={t('system.menus.title', '菜单')}
                                  extra={
                                      <>
@@ -77,8 +68,10 @@ const Menus = () => {
                                     }}
                             >{t('actions.news')}</Button>
                         </div>
-        </DraggablePanel>
-        <Flexbox className={styles.box}>
+                    </>}
+            >
+
+
                 <Glass
                         enabled={currentMenu.id === undefined}
                         description={<>
@@ -113,7 +106,8 @@ const Menus = () => {
                                         { required: true, message: t('rules.required') }
                                     ]}
                                     label={t('system.menus.form.title', '菜单名称')} name={'title'}>
-                  <Input ref={menuInputRef as any} placeholder={t('system.menus.form.title', '菜单名称')}/>
+                                <Input ref={menuInputRef as any}
+                                       placeholder={t('system.menus.form.title', '菜单名称')}/>
                             </Form.Item>
                             <Form.Item label={t('system.menus.form.parent', '上级菜单')} name={'parent_id'}>
                                 <TreeSelect
@@ -202,9 +196,8 @@ const Menus = () => {
                         </ProCard>
                     </Form>
                 </Glass>
-        </Flexbox>
-      </Flexbox>
-    </PageContainer>
+
+            </TwoColPageLayout>
     )
 }
 

src/pages/system/roles/index.tsx

@@ -88,9 +88,12 @@ const Roles = memo(() => {
       },
       {
         title: t('system.roles.columns.status'), dataIndex: 'status', valueType: 'switch',
-        render: (text) => {
-          return <Switch value={!!text} size={'small'}/>
-        }
+        render: (_,record) => {
+          return <Switch value={record.status} size={'small'}/>
+        },
+        renderFormItem: (item, config) => {
+          return <Switch {...item.fieldProps as any} {...config}/>
+        },
       },
       {
         title: t('system.roles.columns.sort'), dataIndex: 'sort', valueType: 'digit',
@@ -144,6 +147,7 @@ const Roles = memo(() => {
 
   return (
     <PageContainer breadcrumbRender={false} title={false} className={styles.container}>
+      <div className={styles.authHeight}>
         <ProTable
                 rowKey={'id'}
                 actionRef={actionRef}
@@ -214,11 +218,13 @@ const Roles = memo(() => {
                   }
                 }}
         />
+      </div>
+
       <BetaSchemaForm
         width={600}
         form={form}
         layout={'horizontal'}
-        title={t('system.roles.edit.title', '角色编辑')}
+        title={t(`system.roles.title_${form.getFieldValue('id') !== 0 ? 'edit' : 'add'}`, form.getFieldValue('id') !== 0 ? '角色编辑' : '角色添加')}
         colProps={{ span: 24 }}
         labelCol={{ span: 6 }}
         wrapperCol={{ span: 16 }}

src/pages/system/roles/style.ts

@@ -1,7 +1,7 @@
 import { createStyles } from '@/theme'
 
 export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
-    const prefix = `${prefixCls}-${token?.proPrefix}-role-page`;
+    const prefix = `${prefixCls}-${token?.proPrefix}-role-page`
 
 
     const box = css`
@@ -13,9 +13,14 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
         flex-wrap: wrap;
         min-width: 500px;
     `
+    const authHeight = css`
+        min-height: calc(100vh - 122px);
+        background-color: ${token.colorBgContainer};
+    `
 
     return {
         container: cx(prefix),
+        authHeight,
         box,
         form,
     }

src/pages/system/users/index.tsx

@@ -1,10 +1,245 @@
-import { PageContainer } from '@ant-design/pro-components'
+import TwoColPageLayout from '@/layout/TwoColPageLayout.tsx'
+import {
+    ActionType,
+    BetaSchemaForm,
+    ProCard,
+    ProColumns,
+    ProFormColumnsType,
+    ProTable
+} from '@ant-design/pro-components'
+import { Button, Form, Popconfirm } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import { useTranslation } from '@/i18n.ts'
+import DepartmentTree from '@/components/department-tree/DepartmentTree.tsx'
+import { useAtom, useAtomValue } from 'jotai'
+import {
+    deleteUserAtom, resetPasswordAtom,
+    saveOrUpdateUserAtom,
+    userListAtom,
+    userPageAtom,
+    userSearchAtom,
+    userSelectedAtom
+} from '@/store/user.ts'
+import { useMemo, useRef, useState } from 'react'
+import Switch from '@/components/switch'
+import { DepartmentCascader } from '@/components/department-tree'
+import RolePicker from '@/components/role-picker/RolePicker.tsx'
 
 const Users = () => {
-    return (
-            <PageContainer breadcrumbRender={false}>
 
-            </PageContainer>
+    const { t } = useTranslation()
+    const [ page, setPage ] = useAtom(userPageAtom)
+    const [ search, setSearch ] = useAtom(userSearchAtom)
+    const [ , setCurrent ] = useAtom(userSelectedAtom)
+    const { mutate: saveOrUpdate, isPending: isSubmitting } = useAtomValue(saveOrUpdateUserAtom)
+    const { data, isFetching, isLoading, refetch } = useAtomValue(userListAtom)
+    const { mutate: deleteUser, isPending, } = useAtomValue(deleteUserAtom)
+    const { mutate: resetPass, isPending: isResetting } = useAtomValue(resetPasswordAtom)
+    const [ form ] = Form.useForm()
+    const actionRef = useRef<ActionType>()
+    const [ open, setOpen ] = useState(false)
+
+    const columns = useMemo(() => {
+
+        return [
+            {
+                title: 'id', dataIndex: 'id',
+                hideInTable: true,
+                hideInSearch: true,
+                formItemProps: {
+                    hidden: true
+                }
+            },
+            {
+                title: t('system.users.columns.name', '姓名'), dataIndex: 'name', valueType: 'text',
+                formItemProps: {
+                    rules: [ { required: true, message: t('message.required') } ]
+                }
+            },
+            {
+                title: t('system.users.columns.username', '用户名'), dataIndex: 'username', valueType: 'text',
+                formItemProps: {
+                    rules: [ { required: true, message: t('message.required') } ]
+                }
+            },
+            {
+                title: t('system.users.columns.roles', '角色'), dataIndex: 'roles', valueType: 'select',
+                render: (_, record) => {
+                    return record.roles?.map(role => role.name).join(',') || ''
+                },
+                renderFormItem: (item, config) => {
+                    const { mode, ...other } = config as any
+                    return <RolePicker {...item.fieldProps as any}
+                                       view={mode !== 'edit'} {...other}/>
+                },
+
+            },
+            {
+                title: t('system.users.columns.dept_id', '所属部门'), dataIndex: 'dept_id',
+                render: (_, record) => {
+                    return record.dept_name || ''
+                },
+                renderFormItem: (item, config) => {
+                    return <DepartmentCascader {...item.fieldProps as any} {...config} />
+                }
+            },
+            {
+                title: t('system.users.columns.status', '状态'), dataIndex: 'status', valueType: 'switch',
+                render: (_, record) => {
+                    return <Switch value={record.status} size={'small'}/>
+                },
+                renderFormItem: (item, config) => {
+                    return <Switch {...item.fieldProps as any} {...config}/>
+                },
+            },
+            {
+                title: t('system.users.columns.update_at', '更新时间'),
+                hideInTable: true,
+                hideInSearch: true,
+                hideInForm: true,
+                dataIndex: 'update_at',
+                valueType: 'dateTime',
+            },
+            {
+                title: t('system.users.columns.option', '操作'), valueType: 'option',
+                key: 'option',
+                render: (_, record) => [
+                    <a key="editable"
+                       onClick={() => {
+                           setCurrent(record)
+                           setOpen(true)
+                           form.setFieldsValue(record)
+                       }}
+                    >
+                        {t('actions.edit', '编辑')}
+                    </a>,
+                    <Popconfirm
+                            disabled={isResetting}
+                            key={'reset_password_confirm'}
+                            onConfirm={() => {
+                                resetPass(record.id)
+                            }}
+                            title={
+                                <span dangerouslySetInnerHTML={{
+                                    __html: t('message.resetPassConfirm', '密码会重置为{{password}}操作不可回滚，是否继续？', {
+                                        password: '<span style="color:red;">kk123456</span>'
+                                    })
+                                }}></span>
+                            }>
+                        <a key="del">
+                            {t('actions.resetPass', '重置密码')}
+                        </a>
+                    </Popconfirm>,
+                    <Popconfirm
+                            key={'del_confirm'}
+                            disabled={isPending}
+                            onConfirm={() => {
+                                deleteUser([ record.id ])
+                            }}
+                            title={t('message.deleteConfirm')}>
+                        <a key="del">
+                            {t('actions.delete', '删除')}
+                        </a>
+                    </Popconfirm>
+                    ,
+                ],
+            },
+        ] as ProColumns[]
+    }, [])
+
+    return (
+            <TwoColPageLayout leftPanel={
+                <>
+                    <ProCard title={t('system.users.title', '部门')}>
+                        <DepartmentTree
+                                root={true}
+                                fieldNames={{
+                                    title: 'name',
+                                    key: 'id',
+                                }}
+                                onItemClick={(item) => {
+                                    setSearch({
+                                        dept_id: item.id,
+                                    })
+                                }}
+                        />
+                    </ProCard>
+                </>
+            }>
+                <ProTable
+                        rowKey={'id'}
+                        actionRef={actionRef}
+                        headerTitle={t('system.users.title', '用户管理')}
+                        columns={columns}
+                        loading={isLoading || isFetching}
+                        dataSource={data?.rows}
+                        search={false}
+                        options={{
+                            reload: () => {
+                                refetch()
+                            },
+                        }}
+                        toolbar={{
+                            search: {
+                                loading: isFetching && !!search.key,
+                                onSearch: (value: string) => {
+                                    setSearch({ key: value })
+                                },
+                                placeholder: t('system.users.search.placeholder', '输入用户名')
+                            },
+                            actions: [
+                                <Button
+                                        key="button"
+                                        icon={<PlusOutlined/>}
+                                        onClick={() => {
+                                            form.resetFields()
+                                            form.setFieldsValue({
+                                                id: 0,
+                                                dept_id: search.dept_id ?? 0,
+                                            })
+                                            setOpen(true)
+                                        }}
+                                        type="primary"
+                                >
+                                    {t('actions.add', '添加')}
+                                </Button>,
+                            ]
+                        }}
+                        pagination={{
+                            total: data?.total,
+                            current: page.page,
+                            pageSize: page.pageSize,
+                            onChange: (page) => {
+                                setPage((prev) => {
+                                    return { ...prev, page }
+                                })
+                            }
+                        }}
+                />
+                <BetaSchemaForm
+                        width={600}
+                        form={form}
+                        layout={'horizontal'}
+                        title={t(`system.users.title_${form.getFieldValue('id') !== 0 ? 'edit' : 'add'}`, form.getFieldValue('id') !== 0 ? '用户编辑' : '用户添加')}
+                        colProps={{ span: 24 }}
+                        labelCol={{ span: 6 }}
+                        wrapperCol={{ span: 16 }}
+                        layoutType={'ModalForm'}
+                        open={open}
+                        modalProps={{
+                            maskClosable: false,
+                        }}
+                        onOpenChange={(open) => {
+                            setOpen(open)
+                        }}
+                        loading={isSubmitting}
+                        onFinish={async (values) => {
+                            // console.log('values', values)
+                            saveOrUpdate(values)
+                            return true
+                        }}
+                        columns={columns as ProFormColumnsType[]}/>
+            </TwoColPageLayout>
     )
 }
 

src/pages/system/users/style.ts

@@ -0,0 +1,71 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+    const prefix = `${prefixCls}-${token?.proPrefix}-user-page`;
+
+    const tree = css`
+        .ant-tree {
+            overflow: auto;
+            height: 100%;
+            border-right: 1px solid ${token.colorBorder};
+            background: ${token.colorBgContainer};
+
+        }
+
+        .ant-tree-directory .ant-tree-treenode-selected::before {
+            background: ${token.colorBgTextHover};
+        }
+
+        .ant-tree-treenode:before {
+            border-radius: ${token.borderRadius}px;
+        }
+    `
+
+    const treeNode = css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .actions {
+            display: none;
+            padding: 0 10px;
+        }
+
+        &:hover .actions { {
+            display: flex;
+        }
+
+    `
+    const treeActions = css`
+    padding: 0 24px 16px;
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: ${token.colorBgContainer};
+  `
+
+    const box = css`
+    flex: 1;
+    background: ${token.colorBgContainer};
+  `
+    const form = css`
+        //display: flex;
+        //flex-wrap: wrap;
+        min-width: 300px;
+        max-width: 800px;
+    `
+    const emptyForm = css`
+  `
+
+    return {
+        container: cx(prefix),
+        box,
+        form,
+        emptyForm,
+        tree,
+        treeNode,
+        treeActions
+    }
+})

src/service/system.ts

@@ -20,6 +20,9 @@ const systemServ = {
     login: (data: LoginRequest) => {
         return request.post<LoginResponse>('/sys/login', data)
     },
+    logout:()=>{
+       //
+    },
     user: {
         ...createCURD<any, IUser>('/sys/user'),
         current: () => {
@@ -28,11 +31,23 @@ const systemServ = {
         menus: () => {
             return request.get<IPageResult<IMenu[]>>('/sys/user/menus')
         },
-
-
+        resetPassword: (id: number) => {
+            return request.post<any>(`/sys/user/reset/password`, { id })
+        }
     },
     role: {
         ...createCURD<any, IRole>('/sys/role')
+    },
+    logs: {
+        login: {
+            ...createCURD<any, ILoginLog>('/sys/log/login'),
+            clear: (params: {
+                start: string,
+                end: string
+            }) => {
+                return request.post<any>('/sys/log/login/clear', params)
+            }
+        }
     }
 
 

src/store/logs.ts

@@ -0,0 +1,58 @@
+import { atomWithMutation, atomWithQuery } from 'jotai-tanstack-query'
+import { atom } from 'jotai/index'
+import { IPage } from '@/global'
+import systemServ from '@/service/system.ts'
+import { message } from 'antd'
+import { t } from '@/i18n.ts'
+
+
+export const loginLogPageAtom = atom<IPage>({
+    page: 1,
+    pageSize: 10,
+})
+
+type LogSearch = {
+    key?: string,
+}
+
+export const loginLogSearchAtom = atom<LogSearch>({
+    key: ''
+})
+
+export const loginLogsAtom = atomWithQuery((get) => ({
+    queryKey: [ 'loginLogs', get(loginLogPageAtom), get(loginLogSearchAtom) ],
+    queryFn: async ({ queryKey: [ , page, search ] }) => {
+        return await systemServ.logs.login.list({
+            ...page as any,
+            ...search as any,
+        })
+    },
+    select: (data) => {
+        return data.data
+    },
+}))
+
+export const loginLogIdsAtom = atom<number[]>([])
+
+export const deleteLoginLogAtom = atomWithMutation<any, number[]>((get) => ({
+    mutationKey: [ 'deleteLoginLog' ],
+    mutationFn: async (ids) => {
+        return await systemServ.logs.login.batchDelete(ids)
+    },
+    onSuccess: () => {
+        message.success(t('message.deleteSuccess', '删除成功'))
+        get(loginLogsAtom).refetch()
+    },
+}))
+
+//clear
+export const clearLoginLogAtom = atomWithMutation<any, { start: string, end: string }>((get) => ({
+    mutationKey: [ 'clearLoginLog' ],
+    mutationFn: async (params) => {
+        return await systemServ.logs.login.clear(params)
+    },
+    onSuccess: () => {
+        message.success(t('message.deleteSuccess', '删除成功'))
+        get(loginLogsAtom).refetch()
+    }
+}))

src/store/route.ts

@@ -1,12 +0,0 @@
-import { IRootContext } from '@/global'
-import { atom } from 'jotai'
-
-export const routeContextAtom = atom<IRootContext>({})
-
-export const updateRouteContextAtom = atom(null, (set, get, update) => {
-  console.log(update)
-  set(routeContextAtom, {
-    ...get(routeContextAtom),
-    ...update,
-  })
-})

src/store/system.ts

@@ -2,7 +2,6 @@ import { IAppData } from '@/global'
 import { createStore } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { changeLanguage as setLang } from 'i18next'
-import { userMenuDataAtom } from '@/store/user.ts'
 
 /**
  * app全局状态
@@ -16,12 +15,8 @@ export const appAtom = atomWithStorage<Partial<IAppData>>('app', {
 })
 
 appStore.sub(appAtom, () => {
-  const token = appStore.get(appAtom).token
-  const { data = [], refetch } = appStore.get(userMenuDataAtom)
-  //如果没有menus数据，则请求
-  if (token && data.length === 0) {
-    refetch()
-  }
+    // const token = appStore.get(appAtom).token
+
 })
 
 
@@ -53,5 +48,6 @@ export const getToken = () => {
 }
 
 export const setToken = (token: string) => {
+    console.log('settoken', token)
     updateAppData({ token })
 }

src/store/user.ts

@@ -1,12 +1,14 @@
-import { appAtom } from '@/store/system.ts'
+import { appAtom, setToken } from '@/store/system.ts'
 import { IMenu } from '@/types/menus'
-import {   IUserInfo } from '@/types/user'
+import { IUser, IUserInfo } from '@/types/user'
 import { atom } from 'jotai/index'
-import { IApiResult, IAuth, IPageResult, MenuItem } from '@/global'
+import { IApiResult, IAuth, IPage, IPageResult, MenuItem } from '@/global'
 import { LoginRequest } from '@/types/login'
-import { atomWithMutation, atomWithQuery } from 'jotai-tanstack-query'
+import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
 import systemServ from '@/service/system.ts'
 import { formatMenuData, isDev } from '@/utils'
+import { message } from 'antd'
+import { t } from 'i18next'
 
 export const authAtom = atom<IAuth>({
     isLogin: false,
@@ -22,17 +24,28 @@ export const loginFormAtom = atom<LoginRequest>({
     ...(isDev ? devLogin : {})
 } as LoginRequest)
 
-export const loginAtom = atomWithMutation<any, LoginRequest>(() => ({
+export const loginAtom = atomWithMutation<any, LoginRequest>((get) => ({
     mutationKey: [ 'login' ],
     mutationFn: async (params) => {
         return await systemServ.login(params)
     },
-    onSuccess: () => {
-        // console.log('login success', data)
+    onSuccess: (res) => {
+        message.success(t('login.success'))
+        // console.log('login success', res)
+        get(userMenuDataAtom).refetch().then()
+        return res.data
     },
     retry: false,
 }))
 
+export const logoutAtom = atomWithMutation(() => ({
+    mutationKey: [ 'logout' ],
+    mutationFn: async () => {
+        setToken('')
+        return true
+    },
+}))
+
 export const currentUserAtom = atomWithQuery<IApiResult<IUserInfo>, any, IUserInfo>((get) => {
     return {
         queryKey: [ 'user_info', get(appAtom).token ],
@@ -54,24 +67,100 @@ export const userMenuDataAtom = atomWithQuery<IApiResult<IPageResult<IMenu[]>>,
     select: (data) => {
         return formatMenuData(data.data.rows as any ?? [])
     },
-    cacheTime: 1000 * 60,
     retry: false,
 }))
 
-export const userSearchAtom = atom<{
-    dept_id: number,
-    key: string
-} | unknown>({})
+export type UserSearch = {
+    dept_id?: any,
+    key?: string
+}
+
+export const userSearchAtom = atom<UserSearch>({} as UserSearch)
+
+//=======user page store======
+
+export const userPageAtom = atom<IPage>({
+    pageSize: 10,
+    page: 1
+})
 
 // user list
 export const userListAtom = atomWithQuery((get) => {
     return {
-        queryKey: [ 'user_list', get(userSearchAtom) ],
-        queryFn: async ({ queryKey: [ , params ] }) => {
-            return await systemServ.user.list(params)
+        queryKey: [ 'user_list', get(userSearchAtom), get(userPageAtom) ],
+        queryFn: async ({ queryKey: [ , params, page ] }) => {
+            return await systemServ.user.list({
+                ...params as any,
+                ...page as any,
+            })
         },
         select: (data) => {
             return data.data
         },
+
     }
 })
+
+// user selected
+export const userSelectedAtom = atom<IUser>({} as IUser)
+
+export const defaultUserData = {
+    id: 0,
+    dept_id: 0,
+    role_id: 0,
+} as IUser
+
+//save or update user
+export const saveOrUpdateUserAtom = atomWithMutation<IApiResult, IUser>((get) => ({
+    mutationKey: [ 'save_user' ],
+    mutationFn: async (params) => {
+        params.status = params.status ? '1' : '0'
+        const isAdd = 0 === params.id
+        if (isAdd) {
+            return await systemServ.user.add(params)
+        }
+        return await systemServ.user.update(params)
+    },
+    onSuccess: (res) => {
+        const isAdd = !!res.data?.id
+        message.success(t(isAdd ? 'message.saveSuccess' : 'message.editSuccess', '保存成功'))
+
+        //刷新userList
+        get(queryClientAtom).invalidateQueries({ queryKey: [ 'user_list' ] })
+
+        return res
+    },
+}))
+
+//delete user
+
+export const batchUserIdsAtom = atom<number[]>([])
+export const deleteUserAtom = atomWithMutation<IApiResult, number[]>((get) => ({
+    mutationKey: [ 'delete_user' ],
+    mutationFn: async (params) => {
+        return await systemServ.user.batchDelete(params)
+    },
+    onSuccess: () => {
+        message.success(t('message.deleteSuccess', '删除成功'))
+        //刷新userList
+        get(queryClientAtom).invalidateQueries({ queryKey: [ 'user_list' ] })
+        return true
+    },
+}))
+
+//reset password
+export const resetPasswordAtom = atomWithMutation<IApiResult, number>(() => ({
+    mutationKey: [ 'reset_password' ],
+    mutationFn: async (id) => {
+        return await systemServ.user.resetPassword(id)
+    },
+    onSuccess: () => {
+        message.success(t('message.resetSuccess', '重置成功'))
+        //刷新userList
+        // get(queryClientAtom).invalidateQueries({ queryKey: [ 'user_list' ] })
+        return true
+    },
+    onError: () => {
+        message.error(t('message.resetError', '重置失败'))
+    },
+}))

src/types/logs.d.ts

@@ -0,0 +1,11 @@
+interface ILoginLog {
+    id: string;
+    username: string;
+    ip: string;
+    user_agent: string;
+    os: string;
+    browser: string;
+    status: string;
+    note: string;
+    created_at: string;
+}

src/types/user.d.ts

@@ -7,6 +7,7 @@ export interface IUser {
     updated_at: string,
     updated_by: number,
     username: string,
+    role_id: number,
     dept_id: number,
     dept_name: string,
     name: string,

src/utils/tree.ts

@@ -1,3 +1,5 @@
+import { FiledNames } from '@/global'
+
 type TreeKey = string | number;
 
 type TreeNode<T> = {
@@ -57,3 +59,38 @@ export function getTreeCheckedStatus<T>(tree: TreeNode<T>[], selectKeys: TreeKey
     tree.forEach(node => checkNode(node, []))
     return { checked, halfChecked }
 }
+
+export function findValuePath<T>(tree: TreeNode<T>[], targetValue: string | number, filedNames?: FiledNames): (string | number)[] | null {
+
+    const f = {
+        key: filedNames?.key ?? 'key',
+        title: filedNames?.title ?? 'title',
+        children: filedNames?.children ?? 'children',
+    }
+
+    const findPathRecursive = (node: TreeNode<T>, pathSoFar: (string | number)[]): (string | number)[] | null => {
+        if (node[f.key] === targetValue) {
+            return [ ...pathSoFar, node[f.key] ]
+        }
+
+        if (node[f.children]) {
+            for (const child of node[f.children]) {
+                const result = findPathRecursive(child, [ ...pathSoFar, node[f.key] ])
+                if (result !== null) {
+                    return result
+                }
+            }
+        }
+
+        return null
+    }
+
+    for (const root of tree) {
+        const result = findPathRecursive(root, [])
+        if (result !== null) {
+            return result
+        }
+    }
+
+    return null // 如果未找到目标值，则返回null
+}