update

package.json

@@ -39,6 +39,7 @@
     "react-layout-kit": "^1.9.0",
     "react-rnd": "^10.4.2-test2",
     "react-use": "^17.5.0",
+    "throttle-debounce": "^5.0.0",
     "wonka": "^6.3.4"
   },
   "devDependencies": {

src/layout/_authenticated.tsx → src/_authenticatedRoute.tsx

@@ -1,7 +1,7 @@
 import { isAuthenticated } from '@/utils/auth.ts'
 import { createFileRoute, redirect } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/_authenticated')({
+export const AuthenticatedRoute = createFileRoute('/_authenticated')({
   beforeLoad: async ({ location }) => {
     if (!isAuthenticated()) {
       throw redirect({

src/components/loading/index.tsx

@@ -1,17 +1,43 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { useStyles } from './style.ts'
+import { debounce } from 'throttle-debounce'
 
 interface ILoading {
   loading: boolean,
   className?: string
+  //延时加载
+  delay?: number
 }
 
-export const Loading = ({ loading, className }: ILoading) => {
+function shouldDelay(loading?: boolean, delay?: number): boolean {
+  return !!loading && !!delay && !isNaN(Number(delay))
+}
+
+export const Loading = ({ loading, className, delay }: ILoading) => {
 
   const { styles, cx } = useStyles({ className })
 
-  return (
-    <div className={cx(styles.container, styles.base, loading ? styles.visible : styles.hidden)}>
+  const [ isLoading, setLoading ] = useState(() => {
+    return loading && !shouldDelay(loading, delay)
+  })
+
+  useEffect(() => {
+    if (loading) {
+      const loadingFunc = debounce(delay, () => {
+        setLoading(true)
+      })
+      loadingFunc()
+      return () => {
+        loadingFunc?.cancel?.()
+      }
+    }
+
+    setLoading(false)
+
+  }, [ loading, delay ])
+
+  const render = () => {
+    return <div className={cx(styles.container, styles.base, isLoading ? styles.visible : styles.hidden)}>
       <div className={styles.centeredElement}>
         <svg stroke="currentColor" fill="none" strokeWidth="0" viewBox="0 0 24 24" className={styles.svgIcon}
              height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
@@ -22,7 +48,9 @@ export const Loading = ({ loading, className }: ILoading) => {
         </svg>
       </div>
     </div>
-  )
+  }
+
+  return render()
 }
 
 export default Loading

src/components/loading/style.ts

@@ -1,12 +1,12 @@
 import { createStyles } from '@/theme'
 
 // Define styles using createStyles
-export const useStyles = createStyles(({ token, css, cx, prefixCls }, { className }) => {
+export const useStyles = createStyles(({ token, css, cx, prefixCls }, props: any) => {
   const prefix = `${prefixCls}-${token.proPrefix}-loading`
 
 
   return {
-    container: cx(prefix, className),
+    container: cx(prefix, props.className),
     base: css`
 
       --tw-translate-x: 0;

src/components/user-picker/Item.tsx

@@ -0,0 +1,22 @@
+import { IUser } from '@/types/user'
+import { useAtom } from 'jotai'
+import { useStyle } from './style.ts'
+import { Checkbox } from 'antd'
+
+export const Item = ( props: {
+  value: IUser,
+  onChange:( value: IUser)=>void
+} )=>{
+
+  const { styles } = useStyle()
+
+
+  return (
+    <div className={styles.listItem}>
+      <Checkbox value={props.value} onChange={e=>}>
+        <span>{props.value.name}</span>
+      </Checkbox>
+    </div>
+  )
+
+}

src/components/user-picker/UserPicker.tsx

@@ -0,0 +1,61 @@
+import { Modal, ModalProps, Select, SelectProps } from 'antd'
+import { memo } from 'react'
+import { Flexbox } from 'react-layout-kit'
+import { useStyle } from './style.ts'
+
+export interface UserSelectProps extends SelectProps {
+
+}
+
+export interface UserModelProps extends ModalProps {
+
+}
+
+export type UserPickerProps =
+  | {
+  type?: 'modal';
+  /** Props for the modal component */
+} & UserModelProps
+  | {
+  type: 'select';
+  /** Props for the select component */
+} & UserSelectProps
+
+const UserSelect = memo((props: UserSelectProps) => {
+  console.log(props)
+  return (
+    <Select {...props}>
+
+    </Select>
+  )
+})
+
+const UserModel = memo(({ open, ...props }: UserModelProps) => {
+  const { styles } = useStyle()
+
+
+  return (
+    <Modal
+      open={open}
+      {...props}
+    >
+      <Flexbox horizontal={true} className={styles.container}>
+        <Flexbox>
+
+        </Flexbox>
+        <Flexbox>
+
+        </Flexbox>
+      </Flexbox>
+
+    </Modal>
+  )
+})
+
+
+const UserPicker = memo(({ type, ...props }: UserPickerProps) => {
+
+  return type === 'modal' ? <UserModel {...props} /> : <UserSelect {...props as UserSelectProps} />
+})
+
+export default UserPicker

src/components/user-picker/index.ts

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

src/components/user-picker/store.ts

@@ -0,0 +1,5 @@
+import { IUser } from '@/types/user'
+import { atom } from 'jotai'
+
+export const userSelectedAtom = atom<IUser[]>([])
+

src/components/user-picker/style.ts

@@ -0,0 +1,25 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+  const prefix = `${prefixCls}-${token?.proPrefix}-user-picker`
+
+  const list = css``
+
+  const listItem = css`
+
+    padding: 5px;
+    height: 40px;
+    background-color: ${token.colorBgContainer};
+
+    :hover {
+      background-color: ${token.controlItemBgActiveHover};
+    }
+
+  `
+
+  return {
+    container: cx(prefix),
+    list,
+    listItem,
+  }
+})

src/pages/list/list.tsx

@@ -1,15 +0,0 @@
-import { createLazyRoute } from '@tanstack/react-router'
-import { ProCard } from '@ant-design/pro-components'
-const List = () => {
-    return (
-            <ProCard>
-                列表页面
-            </ProCard>
-    )
-}
-export const Route = createLazyRoute('/list/index')({
-    component: List,
-})
-
-
-export default List

src/pages/list/tree.tsx

@@ -1,146 +0,0 @@
-import { LightFilter, PageContainer, ProCard, ProColumns, ProTable } from '@ant-design/pro-components'
-import { Tree, Input, Space, Button } from 'antd'
-import { createLazyRoute } from '@tanstack/react-router'
-import { departmentAtom } from '../../store/department.ts'
-import { useAtomValue } from 'jotai'
-import { getIcon } from '../../components/icon'
-import dayjs from 'dayjs'
-
-//递归渲染树形结构，将name->title, id->key
-const renderTree = (data: any[]) => {
-    return data?.map((item) => {
-        if (item.children) {
-            return {
-                title: item.name,
-                key: item.id,
-                children: renderTree(item.children),
-            }
-        }
-        return {
-            title: item.name,
-            key: item.id,
-        }
-    })
-}
-
-
-const columns: ProColumns[] = [
-    {
-        title: '姓名',
-        dataIndex: 'name',
-        render: (_) => <a>{_}</a>,
-        formItemProps: {
-            lightProps: {
-                labelFormatter: (value) => `app-${value}`,
-            },
-        },
-    },
-    {
-        title: '帐号',
-        dataIndex: 'account',
-    },
-    {
-        title: '创建者',
-        dataIndex: 'creator',
-        valueType: 'select',
-        search: false,
-        valueEnum: {
-            all: { text: '全部' },
-            付小小: { text: '付小小' },
-            曲丽丽: { text: '曲丽丽' },
-            林东东: { text: '林东东' },
-            陈帅帅: { text: '陈帅帅' },
-            兼某某: { text: '兼某某' },
-        },
-    },
-    //操作
-    {
-        title: '操作',
-        valueType: 'option',
-        render: (_, record) => {
-            return [
-                <a key="editable" onClick={() => {
-                    alert('edit')
-                }}>编辑</a>,
-                <a key="delete" onClick={() => {
-                    alert('delete')
-                }}>删除</a>,
-            ]
-        }
-    },
-]
-
-const TreePage = () => {
-
-    const { data, isError, isPending } = useAtomValue(departmentAtom)
-
-    if (isError) {
-        return <div>Error</div>
-    }
-    // if (isPending){
-    //     return <div>Loading</div>
-    // }
-
-    return (
-            <PageContainer breadcrumbRender={false}>
-                <ProCard split="vertical">
-                    <ProCard title="部门"
-                             colSpan="25%"
-                             loading={isPending}
-                             extra={<>
-                                 <Button size={'small'} icon={getIcon('Plus')} shape={'circle'}/>
-                             </>}
-                    >
-                        <Tree showLine={true} treeData={renderTree(data)}/>
-                    </ProCard>
-                    <ProCard headerBordered>
-                        <div style={{ height: 360 }}>
-                            <ProTable
-                                    rowKey="account"
-                                    headerTitle={'帐号列表'}
-                                    columns={columns}
-                                    dataSource={[
-                                        {
-                                            name: '张三',
-                                            account: 'zhangsan',
-                                        },
-                                        {
-                                            name: '李四',
-                                            account: 'lisi',
-                                        },
-                                    ]}
-                                    // pagination={false}
-                                    options={{
-                                        search: true,
-                                    }}
-                                    search={false}
-                                    toolbar={{
-                                        search: {
-                                            onSearch: (value: string) => {
-                                                alert(value)
-                                            },
-                                        },
-                                        actions: [
-                                            <Button
-                                                    key="primary"
-                                                    type="primary"
-                                                    onClick={() => {
-                                                        alert('add')
-                                                    }}
-                                            >
-                                                添加
-                                            </Button>,
-                                        ],
-                                    }}
-
-                            />
-
-                        </div>
-                    </ProCard>
-                </ProCard>
-            </PageContainer>
-    )
-}
-
-
-export default TreePage

src/pages/system/departments/components/DepartmentTree.tsx

@@ -1,10 +1,11 @@
+import { usePageStoreOptions } from '@/store'
 import { Empty, Spin, Tree } from 'antd'
 import { useStyle } from '../style.ts'
 import { useTranslation } from '@/i18n.ts'
 import { useSetAtom } from 'jotai'
-import { selectedDepartAtom, departTreeAtom, batchIdsAtom } from '../store.ts'
+import { selectedDepartAtom, departTreeAtom, batchIdsAtom } from '@/store/department.ts'
 import { FormInstance } from 'antd/lib'
-import { useAtomValue } from 'jotai/index'
+import { useAtomValue } from 'jotai'
 import { TreeNodeRender } from './TreeNodeRender.tsx'
 import { useEffect, useRef } from 'react'
 import { flattenTree } from '@/utils'
@@ -15,9 +16,9 @@ export const DepartmentTree = ({ form }: { form: FormInstance }) => {
 
   const { styles } = useStyle()
   const { t } = useTranslation()
-    const setIds = useSetAtom(batchIdsAtom)
-    const setCurrent = useSetAtom(selectedDepartAtom)
-    const { data = [], isLoading } = useAtomValue(departTreeAtom)
+  const setIds = useSetAtom(batchIdsAtom, usePageStoreOptions())
+  const setCurrent = useSetAtom(selectedDepartAtom, usePageStoreOptions())
+  const { data = [], isLoading } = useAtomValue(departTreeAtom, usePageStoreOptions())
   const flattenMenusRef = useRef<IDepartment[]>([])
 
   useDeepCompareEffect(() => {

src/pages/system/departments/components/TreeNodeRender.tsx

@@ -1,11 +1,12 @@
+import { usePageStoreOptions } from '@/store'
 import { memo } from 'react'
 import { MenuItem } from '@/types'
 import { Popconfirm, Space, TreeDataNode } from 'antd'
 import { FormInstance } from 'antd/lib'
 import { useTranslation } from '@/i18n.ts'
 import { useStyle } from '../style.ts'
-import { useAtomValue, useSetAtom } from 'jotai/index'
-import { selectedDepartAtom, deleteDepartAtom, defaultDepart } from '../store.ts'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { selectedDepartAtom, deleteDepartAtom, defaultDepart } from '@/store/department.ts'
 import { PlusOutlined } from '@ant-design/icons'
 import ActionIcon, { DeleteAction } from '@/components/icon/action'
 
@@ -13,9 +14,9 @@ export const TreeNodeRender = memo(({ node, form }: { node: MenuItem & TreeDataN
   const { name } = node
   const { t } = useTranslation()
   const { styles } = useStyle()
-    const { mutate } = useAtomValue(deleteDepartAtom)
+  const { mutate } = useAtomValue(deleteDepartAtom, usePageStoreOptions())
 
-    const setCurrent = useSetAtom(selectedDepartAtom)
+  const setCurrent = useSetAtom(selectedDepartAtom, usePageStoreOptions())
 
   return (
     <div className={styles.treeNode}>

src/pages/system/departments/index.tsx

@@ -1,3 +1,4 @@
+import { usePageStoreOptions } from '@/store'
 import { PageContainer, ProCard } from '@ant-design/pro-components'
 import { Flexbox } from 'react-layout-kit'
 import { DraggablePanel } from '@/components/draggable-panel'
@@ -6,7 +7,7 @@ import { useStyle } from './style.ts'
 import DepartmentTree from './components/DepartmentTree.tsx'
 import { Alert, Button, Divider, Form, Input, InputNumber, InputRef, notification, TreeSelect } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
-import { defaultDepart, selectedDepartAtom, departTreeAtom, saveOrUpdateDepartAtom } from './store.ts'
+import { defaultDepart, selectedDepartAtom, departTreeAtom, saveOrUpdateDepartAtom } from '@/store/department.ts'
 import { useAtom, useAtomValue, } from 'jotai'
 import Glass from '@/components/glass'
 import { useEffect, useRef } from 'react'
@@ -17,9 +18,9 @@ const Departments = () => {
   const { styles, cx } = useStyle()
   const [ form ] = Form.useForm()
   const inputRef = useRef<InputRef>()
-    const { data } = useAtomValue(departTreeAtom)
-    const { mutate, isPending, isError, error } = useAtomValue(saveOrUpdateDepartAtom)
-    const [ current, setCurrent ] = useAtom(selectedDepartAtom)
+  const { data } = useAtomValue(departTreeAtom, usePageStoreOptions())
+  const { mutate, isPending, isError, error } = useAtomValue(saveOrUpdateDepartAtom, usePageStoreOptions())
+  const [ current, setCurrent ] = useAtom(selectedDepartAtom, usePageStoreOptions())
 
   useEffect(() => {
 

src/pages/system/departments/store.ts

@@ -1,84 +0,0 @@
-import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
-import systemServ from '@/service/system.ts'
-import { IApiResult, IPage } from '@/types'
-import { IDepartment } from '@/types/department'
-import { atom, createStore } from 'jotai'
-import { t } from 'i18next'
-import { message } from 'antd'
-
-
-const store = createStore()
-
-export const departPageAtom = atom<IPage>({})
-
-export const defaultDepart = {
-    id: 0,
-    parent_id: 0,
-    name: '',
-    manager_user_id: 0,
-    phone: '',
-    sort: 0,
-} as IDepartment
-
-export const batchIdsAtom = atom<number[]>([])
-
-export const selectedDepartAtom = atom<IDepartment>({} as IDepartment)
-
-export const departTreeAtom = atomWithQuery(() => {
-
-    return {
-        queryKey: [ 'departTree' ],
-        queryFn: async () => {
-            return await systemServ.dept.tree()
-        },
-        select: (res) => {
-            return res.data.tree ?? []
-        }
-    }
-})
-
-export const saveOrUpdateDepartAtom = atomWithMutation<IApiResult, IDepartment>((get) => {
-
-    return {
-        mutationKey: [ 'saveOrUpdateDepart' ],
-        mutationFn: async (data: IDepartment) => {
-            if (data.id) {
-                return await systemServ.dept.update(data)
-            }
-            return await systemServ.dept.add(data)
-        },
-        onSuccess: (res) => {
-            const isAdd = !!res.data?.id
-            message.success(t(isAdd ? 'message.saveSuccess' : 'message.editSuccess', '保存成功'))
-
-            if (isAdd) {
-                store.set(selectedDepartAtom, prev => ({
-                    ...prev,
-                    id: res.data.id
-                }))
-            }
-
-            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree' ] }).then()
-        }
-    }
-
-})
-
-
-export const deleteDepartAtom = atomWithMutation<IApiResult, number[]>((get) => {
-
-    return {
-        mutationKey: [ 'deleteDepart', get(batchIdsAtom) ],
-        mutationFn: async (ids: number[]) => {
-            return await systemServ.dept.batchDelete(ids)
-        },
-        onSuccess: () => {
-            message.success(t('message.deleteSuccess', '删除成功'))
-            store.set(batchIdsAtom, [])
-            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree' ] }).then()
-
-        }
-    }
-
-})
-

src/pages/system/menus/components/BatchButton.tsx

@@ -1,13 +1,14 @@
+import { usePageStoreOptions } from '@/store'
 import { Button, Popconfirm } from 'antd'
 import { useAtomValue } from 'jotai'
-import { batchIdsAtom, deleteMenuAtom } from '../store.ts'
+import { batchIdsAtom, deleteMenuAtom } from '@/store/menu.ts'
 import { useTranslation } from '@/i18n.ts'
 
 const BatchButton = () => {
 
   const { t } = useTranslation()
-    const { isPending, mutate, } = useAtomValue(deleteMenuAtom)
-    const ids = useAtomValue(batchIdsAtom)
+  const { isPending, mutate, } = useAtomValue(deleteMenuAtom, usePageStoreOptions())
+  const ids = useAtomValue(batchIdsAtom, usePageStoreOptions())
 
 
   if (ids.length === 0) {

src/pages/system/menus/components/MenuTree.tsx

@@ -1,11 +1,12 @@
+import { usePageStoreOptions } from '@/store'
 import { Empty, Spin, Tree } from 'antd'
 import { MenuItem } from '@/types'
 import { useStyle } from '../style.ts'
 import { useTranslation } from '@/i18n.ts'
 import { useSetAtom } from 'jotai'
-import { batchIdsAtom, menuDataAtom, selectedMenuAtom } from '../store.ts'
+import { batchIdsAtom, menuDataAtom, selectedMenuAtom } from '@/store/menu.ts'
 import { FormInstance } from 'antd/lib'
-import { useAtomValue } from 'jotai/index'
+import { useAtomValue } from 'jotai'
 import { TreeNodeRender } from './TreeNodeRender.tsx'
 import { useEffect, useRef } from 'react'
 import { flattenTree } from '@/utils'
@@ -16,9 +17,9 @@ const MenuTree = ({ form }: { form: FormInstance }) => {
 
   const { styles } = useStyle()
   const { t } = useTranslation()
-    const setCurrentMenu = useSetAtom(selectedMenuAtom)
-    const setIds = useSetAtom(batchIdsAtom)
-    const { data = [], isLoading } = useAtomValue(menuDataAtom)
+  const setCurrentMenu = useSetAtom(selectedMenuAtom, usePageStoreOptions())
+  const setIds = useSetAtom(batchIdsAtom, usePageStoreOptions())
+  const { data = [], isLoading } = useAtomValue(menuDataAtom, usePageStoreOptions())
   const flattenMenusRef = useRef<MenuItem[]>([])
 
   useDeepCompareEffect(() => {

src/pages/system/menus/components/TreeNodeRender.tsx

@@ -1,11 +1,12 @@
+import { usePageStoreOptions } from '@/store'
 import { memo } from 'react'
 import { MenuItem } from '@/types'
 import { Popconfirm, Space, TreeDataNode } from 'antd'
 import { FormInstance } from 'antd/lib'
 import { useTranslation } from '@/i18n.ts'
 import { useStyle } from '../style.ts'
-import { useAtomValue, useSetAtom } from 'jotai/index'
-import { defaultMenu, deleteMenuAtom, selectedMenuAtom } from '../store.ts'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { defaultMenu, deleteMenuAtom, selectedMenuAtom } from '@/store/menu.ts'
 import { PlusOutlined } from '@ant-design/icons'
 import ActionIcon, { DeleteAction } from '@/components/icon/action'
 
@@ -13,9 +14,9 @@ export const TreeNodeRender = memo(({ node, form }: { node: MenuItem & TreeDataN
   const { title } = node
   const { t } = useTranslation()
   const { styles } = useStyle()
-    const { mutate } = useAtomValue(deleteMenuAtom)
+  const { mutate } = useAtomValue(deleteMenuAtom, usePageStoreOptions())
 
-    const setMenuData = useSetAtom(selectedMenuAtom)
+  const setMenuData = useSetAtom(selectedMenuAtom, usePageStoreOptions())
 
   return (
     <div className={styles.treeNode}>

src/pages/system/menus/index.tsx

@@ -1,10 +1,11 @@
 import Glass from '@/components/glass'
 import { useTranslation } from '@/i18n.ts'
+import { usePageStoreOptions } from '@/store'
 import { PlusOutlined } from '@ant-design/icons'
 import { PageContainer, 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.ts'
+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'
@@ -20,9 +21,9 @@ const Menus = () => {
   const { styles, cx } = useStyle()
   const { t } = useTranslation()
   const [ form ] = Form.useForm()
-  const { mutate, isPending, error, isError } = useAtomValue(saveOrUpdateMenuAtom)
-  const { data = [] } = useAtomValue(menuDataAtom)
-  const [ currentMenu, setMenuData ] = useAtom<MenuItem>(selectedMenuAtom) ?? {}
+  const { mutate, isPending, error, isError } = useAtomValue(saveOrUpdateMenuAtom, usePageStoreOptions())
+  const { data = [] } = useAtomValue(menuDataAtom, usePageStoreOptions())
+  const [ currentMenu, setMenuData ] = useAtom<MenuItem>(selectedMenuAtom, usePageStoreOptions()) ?? {}
   const menuInputRef = useRef<InputRef | undefined>(undefined)
 
   useEffect(() => {

src/pages/system/roles/index.tsx

@@ -1,4 +1,5 @@
 import Switch from '@/components/switch'
+import { usePageStoreOptions } from '@/store'
 import { IMenu } from '@/types/menus'
 import {
   ActionType,
@@ -18,11 +19,11 @@ import {
   rolesAtom,
   saveOrUpdateRoleAtom,
   searchAtom
-} from './store.ts'
+} from '@/store/role.ts'
 import { useTranslation } from '@/i18n.ts'
 import { Button, Form, Space, Spin, Table, Tree, Popconfirm } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
-import { menuDataAtom } from '@/pages/system/menus/store.ts'
+import { menuDataAtom } from '@/store/menu.ts'
 import { getTreeCheckedStatus } from '@/utils/tree.ts'
 
 const MenuTree = (props: any) => {
@@ -53,13 +54,13 @@ const Roles = memo(() => {
   const { styles } = useStyle()
   const [ form ] = Form.useForm()
   const actionRef = useRef<ActionType>()
-  const [ page, setPage ] = useAtom(pageAtom)
-  const [ search, setSearch ] = useAtom(searchAtom)
-  const [ roleIds, setRoleIds ] = useAtom(roleIdsAtom)
-  const { data, isLoading, isFetching, refetch } = useAtomValue(rolesAtom)
-  const { isPending, mutate, isSuccess } = useAtomValue(saveOrUpdateRoleAtom)
-  const { mutate: deleteRole, isPending: isDeleting } = useAtomValue(deleteRoleAtom)
-  const [ , setRole ] = useAtom(roleAtom)
+  const [ page, setPage ] = useAtom(pageAtom, usePageStoreOptions())
+  const [ search, setSearch ] = useAtom(searchAtom, usePageStoreOptions())
+  const [ roleIds, setRoleIds ] = useAtom(roleIdsAtom, usePageStoreOptions())
+  const { data, isLoading, isFetching, refetch } = useAtomValue(rolesAtom, usePageStoreOptions())
+  const { isPending, mutate, isSuccess } = useAtomValue(saveOrUpdateRoleAtom, usePageStoreOptions())
+  const { mutate: deleteRole, isPending: isDeleting } = useAtomValue(deleteRoleAtom, usePageStoreOptions())
+  const [ , setRole ] = useAtom(roleAtom, usePageStoreOptions())
   const [ open, setOpen ] = useState(false)
 
   const columns = useMemo(() => {

src/routes.tsx

@@ -1,9 +1,11 @@
 import NotPermission from '@/components/error/403.tsx'
 import NotFound from '@/components/error/404.tsx'
 import ErrorPage from '@/components/error/error.tsx'
+import Loading from '@/components/loading'
 import FetchLoading from '@/components/loading/FetchLoading.tsx'
 import PageLoading from '@/components/page-loading'
-import { Route as AuthenticatedImport } from '@/layout/_authenticated.tsx'
+import { PageStoreProvider } from '@/store'
+import { AuthenticatedRoute as AuthenticatedImport } from './_authenticatedRoute.tsx'
 import EmptyLayout from '@/layout/EmptyLayout.tsx'
 // import ListPageLayout from '@/layout/ListPageLayout.tsx'
 // import { Route as DashboardImport } from '@/pages/dashboard'
@@ -25,6 +27,11 @@ import RootLayout from './layout/RootLayout'
 import { IRootContext, MenuItem } from './types'
 import { DevTools } from 'jotai-devtools'
 
+const PageRootLayout = () => {
+  return <PageStoreProvider>
+    <RootLayout/>
+  </PageStoreProvider>
+}
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -38,12 +45,12 @@ export const queryClient = new QueryClient({
 const rootRoute = createRootRouteWithContext<IRootContext>()({
   component: () => (
 
-            <div>
+    <>
       <FetchLoading/>
       <Outlet/>
       <DevTools/>
       <TanStackRouterDevtools position={'bottom-right'}/>
-            </div>
+    </>
   ),
   beforeLoad: ({ location }) => {
     if (location.pathname === '/') {
@@ -72,13 +79,13 @@ const authRoute = AuthenticatedImport.update({
 const layoutNormalRoute = createRoute({
   getParentRoute: () => rootRoute,
   id: '/_normal_layout',
-    component: RootLayout,
+  component: PageRootLayout,
 })
 
 const layoutAuthRoute = createRoute({
   getParentRoute: () => authRoute,
   id: '/_auth_layout',
-    component: RootLayout,
+  component: PageRootLayout,
 })
 
 const notAuthRoute = createRoute({
@@ -96,6 +103,7 @@ const loginRoute = LoginRouteImport.update({
   path: '/login',
   getParentRoute: () => emptyRoute,
 } as any)
+
 //
 // const menusRoute = createRoute({
 //     getParentRoute: () => layoutAuthRoute,
@@ -167,7 +175,7 @@ declare module '@tanstack/react-router' {
   }
 }
 
-export const generateDynamicRoutes = (menuData: MenuItem[], parentRoute: AnyRoute) => {
+const generateDynamicRoutes = (menuData: MenuItem[], parentRoute: AnyRoute) => {
   // 递归生成路由，如果有routes则递归生成子路由
 
   const generateRoutes = (menu: MenuItem, parentRoute: AnyRoute) => {
@@ -276,7 +284,8 @@ export const RootProvider = memo((props: { context: Partial<IRootContext> }) =>
   const router = createRouter({
     routeTree,
     context: { queryClient, menuData: [] },
-        defaultPreload: 'intent'
+    defaultPreload: 'intent',
+    defaultPendingComponent: () => <Loading loading={true} delay={300}/>
   })
 
   return (

src/store/department.ts

@@ -1,44 +1,84 @@
-import { atom } from 'jotai'
-import { IDepartment } from '../types/department'
-import { QueryClient } from '@tanstack/query-core'
-import { atomWithMutation, atomWithQuery } from 'jotai-tanstack-query'
-import { IApiResult } from '../types'
-import request from '../request.ts'
+import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
+import systemServ from '@/service/system.ts'
+import { IApiResult, IPage } from '@/types'
+import { IDepartment } from '@/types/department'
+import { atom, createStore } from 'jotai'
+import { t } from 'i18next'
+import { message } from 'antd'
 
 
-export const departmentSearchAtom = atom<Partial<IDepartment>>({})
+const store = createStore()
 
-export const departmentAtom = atomWithQuery<IApiResult<IDepartment[]>, any, IDepartment[]>((get) => ({
-    queryKey: [ 'departments', get(departmentSearchAtom) ],
-    queryFn: async ({ queryKey: [ , departSearch ] }) => {
-        await new Promise(resolve => setTimeout(resolve, 5000))
+export const departPageAtom = atom<IPage>({})
 
-        return await request('/departments', {
-            data: departSearch,
-        })
+export const defaultDepart = {
+  id: 0,
+  parent_id: 0,
+  name: '',
+  manager_user_id: 0,
+  phone: '',
+  sort: 0,
+} as IDepartment
+
+export const batchIdsAtom = atom<number[]>([])
+
+export const selectedDepartAtom = atom<IDepartment>({} as IDepartment)
+
+export const departTreeAtom = atomWithQuery(() => {
+
+  return {
+    queryKey: [ 'departTree' ],
+    queryFn: async () => {
+      return await systemServ.dept.tree()
     },
-    select: data => data.data,
-}))
+    select: (res) => {
+      return res.data.tree ?? []
+    }
+  }
+})
 
-export const departmentDetailAtom = atomWithQuery<IApiResult<IDepartment>>((get) => ({
-    queryKey: [ 'department', get(departmentSearchAtom) ],
-    queryFn: async ({ queryKey: [ , departSearch ] }) => {
-        return await request(`/departments/${(departSearch as IDepartment).id}`)
+export const saveOrUpdateDepartAtom = atomWithMutation<IApiResult, IDepartment>((get) => {
+
+  return {
+    mutationKey: [ 'saveOrUpdateDepart' ],
+    mutationFn: async (data: IDepartment) => {
+      if (data.id) {
+        return await systemServ.dept.update(data)
+      }
+      return await systemServ.dept.add(data)
     },
-    select: data => data,
+    onSuccess: (res) => {
+      const isAdd = !!res.data?.id
+      message.success(t(isAdd ? 'message.saveSuccess' : 'message.editSuccess', '保存成功'))
+
+      if (isAdd) {
+        store.set(selectedDepartAtom, prev => ({
+          ...prev,
+          id: res.data.id
         }))
+      }
 
-//add use atomWithMutation
-export const departmentAddAtom = (client: QueryClient) => atomWithMutation<IApiResult<IDepartment>, any, IDepartment>(() => ({
-    mutationKey: [ 'addDepartment', ],
-    mutationFn: async (depart: IDepartment) => {
-        return await request.post('/departments', depart)
-    },
-    onSuccess: (result) => {
-        console.log(result)
+      get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree' ] }).then()
+    }
+  }
+
+})
+
+
+export const deleteDepartAtom = atomWithMutation<IApiResult, number[]>((get) => {
+
+  return {
+    mutationKey: [ 'deleteDepart', get(batchIdsAtom) ],
+    mutationFn: async (ids: number[]) => {
+      return await systemServ.dept.batchDelete(ids)
     },
-    onSettled: () => {
-        //清空列表的缓存
-        void client.invalidateQueries({ queryKey: [ 'departments' ] })
+    onSuccess: () => {
+      message.success(t('message.deleteSuccess', '删除成功'))
+      store.set(batchIdsAtom, [])
+      get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree' ] }).then()
+
     }
-}))
+  }
+
+})
+

src/store/index.ts

@@ -0,0 +1,36 @@
+import { createStore } from 'jotai'
+import React, { useContext, createContext } from 'react'
+
+export type Store = ReturnType<typeof createStore>
+
+export const InternalPageContext = createContext<Store | undefined>(
+  undefined,
+)
+
+export const useInternalStore = (): Store => {
+  const store = useContext(InternalPageContext)
+  if (!store) {
+    throw new Error(
+      `Unable to find internal Page store, Did you wrap the component within PageStoreProvider?`,
+    )
+  }
+  return store
+}
+
+export const usePageStoreOptions = () => ({
+  store: useInternalStore(),
+})
+
+export const pageStore = createStore()
+
+export const PageStoreProvider = ({ children }: React.PropsWithChildren) => {
+  const internalStoreRef = React.useRef<Store>()
+
+  if (!internalStoreRef.current) {
+    internalStoreRef.current = pageStore
+  }
+
+  return React.createElement(InternalPageContext.Provider, {
+    value: internalStoreRef.current
+  }, children)
+}

src/pages/system/menus/store.ts → src/store/menu.ts

@@ -63,13 +63,6 @@ export const saveOrUpdateMenuAtom = atomWithMutation<IApiResult, IMenu>((get) =>
       const isAdd = !!res.data?.id
       message.success(t(isAdd ? 'message.saveSuccess' : 'message.editSuccess', '保存成功'))
 
-      if(isAdd) {
-        const menu = get(selectedMenuAtom)
-        store.set(selectedMenuAtom, {
-          ...menu,
-          id: res.data?.id
-        })
-      }
       //更新列表
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore fix

vite.config.ts

@@ -2,6 +2,9 @@ import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import { viteMockServe } from 'vite-plugin-mock'
 
+import jotaiDebugLabel from 'jotai/babel/plugin-debug-label'
+import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh'
+
 //import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
 
 
@@ -10,6 +13,7 @@ export default defineConfig(({ mode }) => {
 
   // 根据当前工作目录中的 `mode` 加载 .env 文件
   // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
+  // @ts-ignore fix process
   const env = loadEnv(mode, process.cwd(), '')
   return {
     //定义别名的路径
@@ -31,6 +35,7 @@ export default defineConfig(({ mode }) => {
       react({
         babel: {
           presets: [ 'jotai/babel/preset' ],
+          plugins: [ jotaiDebugLabel, jotaiReactRefresh ]
         },
       }),
       viteMockServe({