1、完善菜单，角色模块

2、修正type类型提示

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host --port 3000",
+    "dev:proxy": "vite --mode=proxy --host --port 3000",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

src/components/switch/index.tsx

@@ -0,0 +1,12 @@
+import { convertToBool } from '@/utils'
+import { Switch as AntSwitch, SwitchProps } from 'antd'
+
+
+export const Switch = ({ value, ...props }: SwitchProps) => {
+  console.log(value, props)
+  return (
+    <AntSwitch {...props} value={convertToBool(value)}/>
+  )
+}
+
+export default Switch

src/locales/lang/zh-CN.ts

@@ -45,7 +45,7 @@ export default {
     roles
   },
   actions: {
-    news: '新增加',
+    news: '新增',
     add: '添加',
     edit: '编辑',
     cancel: '取消',
@@ -72,6 +72,9 @@ export default {
     emptyDataAdd: '暂无数据，点击添加',
     required: '此项为必填项',
   },
+  rules: {
+    required: '此项为必填项',
+  },
   tabs: {
     refresh: '刷新',
     maximize: '最大化',

src/pages/system/menus/index.tsx

@@ -1,9 +1,10 @@
 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 { Button, Form, Input, Radio, TreeSelect, InputNumber, notification, Alert } from 'antd'
-import { useAtomValue } from 'jotai'
-import { menuDataAtom, saveOrUpdateMenuAtom, selectedMenuAtom } from './store.ts'
+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 IconPicker from '@/components/icon/picker'
 import ButtonTable from './components/ButtonTable.tsx'
 import { Flexbox } from 'react-layout-kit'
@@ -12,7 +13,7 @@ import { useStyle } from './style.ts'
 import { MenuItem } from '@/types'
 import MenuTree from './components/MenuTree.tsx'
 import BatchButton from '@/pages/system/menus/components/BatchButton.tsx'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { createLazyFileRoute } from '@tanstack/react-router'
 
 
@@ -23,7 +24,8 @@ const Menus = () => {
   const [ form ] = Form.useForm()
   const { mutate, isPending, isSuccess, error, isError } = useAtomValue(saveOrUpdateMenuAtom)
   const { data = [] } = useAtomValue(menuDataAtom)
-  const currentMenu = useAtomValue<MenuItem>(selectedMenuAtom) ?? {}
+  const [ currentMenu, setMenuData ] = useAtom<MenuItem>(selectedMenuAtom) ?? {}
+  const menuInputRef = useRef<InputRef | undefined>(undefined)
 
   useEffect(() => {
 
@@ -35,6 +37,12 @@ const Menus = () => {
     }
   }, [ isError, isSuccess ])
 
+  useEffect(() => {
+    if (currentMenu.id === 0 && menuInputRef.current) {
+      menuInputRef.current.focus()
+    }
+  }, [ currentMenu ])
+
   return (
     <PageContainer breadcrumbRender={false} title={false} className={styles.container}>
 
@@ -43,15 +51,33 @@ const Menus = () => {
                         placement="left"
                         defaultSize={{ width: 300 }}
                         maxWidth={500}
+                        style={{ position: 'relative' }}
         >
           <ProCard title={t('system.menus.title', '菜单')}
                    extra={
+                     <>
                        <BatchButton/>
+                     </>
                    }
           >
             <MenuTree form={form}/>
 
           </ProCard>
+          <div className={styles.treeActions}>
+            <Divider style={{ flex: 1, margin: '8px 0' }}/>
+            <Button style={{ flex: 1 }} size={'small'}
+                    block={true} type={'dashed'}
+                    icon={<PlusOutlined/>}
+                    onClick={() => {
+                      const menu = {
+                        ...defaultMenu,
+                        parent_id: 0,
+                      }
+                      setMenuData(menu)
+                      form.setFieldsValue(menu)
+                    }}
+            >{t('actions.news')}</Button>
+          </div>
         </DraggablePanel>
         <Flexbox className={styles.box}>
           <Glass
@@ -83,8 +109,12 @@ const Menus = () => {
                 <Form.Item hidden={true} label={'id'} name={'id'}>
                   <Input disabled={true}/>
                 </Form.Item>
-                <Form.Item label={t('system.menus.form.title', '菜单名称')} name={'title'}>
-                  <Input/>
+                <Form.Item
+                  rules={[
+                    { 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', '菜单名称')}/>
                 </Form.Item>
                 <Form.Item label={t('system.menus.form.parent', '上级菜单')} name={'parent_id'}>
                   <TreeSelect
@@ -121,8 +151,12 @@ const Menus = () => {
                     buttonStyle="solid"
                   />
                 </Form.Item>
-                <Form.Item label={t('system.menus.form.name', '别名')} name={'name'}>
-                  <Input/>
+                <Form.Item
+                  rules={[
+                    { required: true, message: t('rules.required') }
+                  ]}
+                  label={t('system.menus.form.name', '别名')} name={'name'}>
+                  <Input placeholder={t('system.menus.form.name', '别名')}/>
                 </Form.Item>
                 <Form.Item label={t('system.menus.form.icon', '图标')} name={'icon'}>
                   <IconPicker placement={'left'}/>

src/pages/system/menus/store.ts

@@ -1,5 +1,5 @@
 import systemServ from '@/service/system.ts'
-import { IApiResult, IPage, IPageResult, MenuItem } from '@/types'
+import { IPage, IPageResult, MenuItem } from '@/types'
 import { IMenu } from '@/types/menus'
 import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
 import { atom, createStore } from 'jotai'
@@ -49,7 +49,7 @@ export const byIdMenuAtom = atomWithQuery((get) => ({
 }))
 
 
-export const saveOrUpdateMenuAtom = atomWithMutation<IApiResult<IMenu>>((get) => {
+export const saveOrUpdateMenuAtom = atomWithMutation<any, IMenu>((get) => {
 
   return {
     mutationKey: [ 'updateMenu', get(selectedMenuIdAtom) ],
@@ -61,7 +61,7 @@ export const saveOrUpdateMenuAtom = atomWithMutation<IApiResult<IMenu>>((get) =>
     },
     onSuccess: (res) => {
       const isAdd = !!res.data?.id
-            message.success(t( isAdd ? 'message.saveSuccess': 'message.editSuccess', '保存成功'))
+      message.success(t(isAdd ? 'message.saveSuccess' : 'message.editSuccess', '保存成功'))
       const menu = get(selectedMenuAtom)
       store.set(selectedMenuAtom, {
         ...menu,
@@ -70,7 +70,7 @@ export const saveOrUpdateMenuAtom = atomWithMutation<IApiResult<IMenu>>((get) =>
       //更新列表
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore fix
-            get(queryClientAtom).invalidateQueries({ queryKey: [ 'menus', get(menuPageAtom) ]}).then()
+      get(queryClientAtom).invalidateQueries({ queryKey: [ 'menus', get(menuPageAtom) ] }).then()
     }
   }
 })
@@ -86,7 +86,7 @@ export const deleteMenuAtom = atomWithMutation((get) => {
     onSuccess: () => {
       message.success(t('message.deleteSuccess', '删除成功'))
       store.set(batchIdsAtom, [])
-            get(queryClientAtom).invalidateQueries({ queryKey: [ 'menus', get(menuPageAtom) ]}).then()
+      get(queryClientAtom).invalidateQueries({ queryKey: [ 'menus', get(menuPageAtom) ] }).then()
     }
   }
 })

src/pages/system/menus/style.ts

@@ -26,8 +26,6 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
     background: ${token.colorBgContainer};
   `
   const emptyForm = css`
-    backdrop-filter: ${token.backdropFilter};
-    color: red;
   `
 
   const form = css`
@@ -62,7 +60,13 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
 
   `
   const treeActions = css`
-
+    padding: 0 10px 10px;
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: ${token.colorBgContainer};
   `
 
   return {

src/pages/system/roles/index.tsx

@@ -1,9 +1,10 @@
+import Switch from '@/components/switch'
 import {
   ActionType,
   PageContainer,
   ProColumns,
   ProTable,
-    BetaSchemaForm,
+  BetaSchemaForm, ProFormColumnsType,
 } from '@ant-design/pro-components'
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { useStyle } from './style.ts'
@@ -57,7 +58,7 @@ const Roles = memo(() => {
   const [ roleIds, setRoleIds ] = useAtom(roleIdsAtom)
   const { data, isLoading, isFetching, refetch } = useAtomValue(rolesAtom)
   const { isPending, mutate, isSuccess } = useAtomValue(saveOrUpdateRoleAtom)
-    const { mutate: deleteRole, isPending: isDeleteing } = useAtomValue(deleteRoleAtom)
+  const { mutate: deleteRole, isPending: isDeleting } = useAtomValue(deleteRoleAtom)
   const [ , setRole ] = useAtom(roleAtom)
   const [ open, setOpen ] = useState(false)
 
@@ -84,7 +85,12 @@ const Roles = memo(() => {
           rules: [ { required: true, message: t('message.required') } ]
         }
       },
-            { title: t('system.roles.columns.status'), dataIndex: 'status', valueType: 'switch', },
+      {
+        title: t('system.roles.columns.status'), dataIndex: 'status', valueType: 'switch',
+        render: (text) => {
+          return <Switch value={!!text} size={'small'}/>
+        }
+      },
       {
         title: t('system.roles.columns.sort'), dataIndex: 'sort', valueType: 'digit',
       },
@@ -102,7 +108,7 @@ const Roles = memo(() => {
       {
         title: t('system.roles.columns.option'), valueType: 'option',
         key: 'option',
-                render: (text, record, _, action) => [
+        render: (_, record) => [
           <a key="editable"
              onClick={() => {
                setRole(record)
@@ -114,11 +120,11 @@ const Roles = memo(() => {
           </a>,
           <Popconfirm
             key={'del_confirm'}
-                            onConfirm={()=>{
+            onConfirm={() => {
               deleteRole([ record.id ])
             }}
             title={t('message.deleteConfirm')}>
-                        <a key="del" >
+            <a key="del">
               {t('actions.delete', '删除')}
             </a>
           </Popconfirm>
@@ -160,7 +166,7 @@ const Roles = memo(() => {
                   deleteRole(roleIds)
                 }}
                 title={t('message.batchDelete')}>
-                                            <Button type={'link'} loading={isDeleteing}>{t('actions.batchDel')}</Button>
+                <Button type={'link'} loading={isDeleting}>{t('actions.batchDel')}</Button>
               </Popconfirm>
             </Space>
           )
@@ -222,11 +228,12 @@ const Roles = memo(() => {
           setOpen(open)
         }}
         loading={isPending}
-                        onFinish={(values) => {
+        onFinish={async (values) => {
           // console.log('values', values)
-                            return mutate(values)
+          mutate(values)
+          return true
         }}
-                        columns={columns}/>
+        columns={columns as ProFormColumnsType[]}/>
     </PageContainer>
   )
 })

src/pages/system/roles/store.ts

@@ -1,7 +1,8 @@
+import { convertToBool } from '@/utils'
 import { atom } from 'jotai/index'
 import { IRole } from '@/types/roles'
 import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
-import { IApiResult, IPage, IPageResult } from '@/types'
+import { IPage } from '@/types'
 import systemServ from '@/service/system.ts'
 import { message } from 'antd'
 import { t } from '@/i18n.ts'
@@ -23,26 +24,37 @@ export const pageAtom = atom<IPage>({
   page: 1,
 })
 
-export const rolesAtom = atomWithQuery<any, IPageResult<IRole>>((get) => {
+export const rolesAtom = atomWithQuery((get) => {
   return {
     queryKey: [ 'roles', get(searchAtom) ],
     queryFn: async ({ queryKey: [ , params ] }) => {
       return await systemServ.role.list(params as SearchParams)
     },
+    select: res => {
+      const data = res.data
+      data.rows = data.rows?.map(row => {
+        return {
+          ...row,
+          status: convertToBool(row.status)
+        }
+      })
+      return data
+    }
   }
 })
 
 //saveOrUpdateRoleAtom
 
-export const saveOrUpdateRoleAtom = atomWithMutation<IApiResult<IRole>>((get) => {
+export const saveOrUpdateRoleAtom = atomWithMutation<any, IRole>((get) => {
 
   return {
     mutationKey: [ 'updateMenu' ],
-        mutationFn: async (data: IRole) => {
+    mutationFn: async (data) => {
+      data.status = data.status ? '1' : '0'
       if (data.id === 0) {
-                return await systemServ.menus.add(data)
+        return await systemServ.role.add(data)
       }
-            return await systemServ.menus.update(data)
+      return await systemServ.role.update(data)
     },
     onSuccess: (res) => {
       const isAdd = !!res.data?.id
@@ -65,7 +77,7 @@ export const deleteRoleAtom = atomWithMutation((get) => {
       return await systemServ.role.batchDelete(ids ?? get(roleIdsAtom))
     },
     onSuccess: (res) => {
-            message.success('删除成功')
+      message.success('message.deleteSuccess')
       //更新列表
       get(queryClientAtom).invalidateQueries({ queryKey: [ 'roles', get(searchAtom) ] })
       return res

src/request.ts

@@ -1,12 +1,21 @@
 import { getToken, setToken } from '@/store/system.ts'
+import { IApiResult } from '@/types'
+import { Record } from '@icon-park/react'
 import { message } from 'antd'
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
+import axios, {
+  AxiosRequestConfig,
+  AxiosInstance, AxiosResponse,
+} from 'axios'
 
 
 export type { AxiosRequestConfig }
+type FetchMethod = <T = any, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>) => Promise<IApiResult<T>>
 
+interface RequestMethods extends Pick<AxiosInstance, 'get' | 'post' | 'put' | 'delete' | 'request' | 'postForm' | 'patch' | 'patchForm' | 'putForm' | 'options'> {
+}
 
-export const request = axios.create({
+
+const axiosInstance = axios.create({
   baseURL: '/api/v1',
   // timeout: 1000,
   headers: {
@@ -15,7 +24,7 @@ export const request = axios.create({
 })
 
 //拦截request，添加token
-request.interceptors.request.use((config) => {
+axiosInstance.interceptors.request.use((config) => {
 
   const token = getToken()
   if (token) {
@@ -30,22 +39,25 @@ request.interceptors.request.use((config) => {
 
 
 //拦截response，返回data
-request.interceptors.response.use((response: AxiosResponse) => {
+axiosInstance.interceptors.response.use(
+  (response) => {
     // console.log('response', response.data)
 
     message.destroy()
 
-    switch (response.data.code) {
+    const result = response.data as IApiResult
+
+    switch (result.code) {
       case 200:
         //login
         if (response.config.url?.includes('/sys/login')) {
-                setToken(response.data.data.token)
+          setToken(result.data.token)
         }
-            return response.data
+        return response
       case 401:
         setToken('')
         if (window.location.pathname === '/login') {
-                return
+          return Promise.reject(new Error('to login'))
         }
 
 
@@ -59,13 +71,13 @@ request.interceptors.response.use((response: AxiosResponse) => {
           redirect = window.location.pathname + '?=' + search.toString()
         }
         window.location.href = `/login?redirect=${encodeURIComponent(redirect)}`
-            return
+        return Promise.reject(new Error('to login'))
       default:
-            message.error(response.data.message)
+        message.error(result.message ?? '请求失败')
         return Promise.reject(response)
     }
 
-}, (error) => {
+  }, (error) => {
     // console.log('error', error)
     const { response } = error
     if (response) {
@@ -94,6 +106,35 @@ request.interceptors.response.use((response: AxiosResponse) => {
     }
 
     return Promise.reject(error)
-})
+  })
+
+
+export const createFetchMethods = () => {
+  const methods = {}
+
+  for (const method of Object.keys(axiosInstance)) {
+    methods[method] = <T = any, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>) => {
+      if (config && data) {
+        config = {
+          ...config,
+          data,
+        }
+      }
+      return axiosInstance[method](url, config)
+        .then((response: AxiosResponse<IApiResult<T>>) => {
+          if (response.data.code !== 200) {
+            throw new Error(response.data.message)
+          }
+          return response.data as IApiResult<T>
+        })
+        .catch((err) => {
+          throw err
+        })
+    }
+  }
+
+  return methods as Record<keyof RequestMethods, FetchMethod>
+}
 
+export const request = createFetchMethods()
 export default request

src/service/base.ts

@@ -6,19 +6,19 @@ export const createCURD = <TParams, TResult>(api: string, options?: AxiosRequest
 
   return {
     list: (params?: TParams & IPage) => {
-      return request.post<IPageResult<TResult>>(`${api}/list`, { ...options, ...params }).then(data => data.data)
+      return request.post<IPageResult<TResult>>(`${api}/list`, { ...options, ...params })
     },
     add: (data: TParams) => {
       return request.post<TResult>(`${api}/add`, data, options)
     },
     update: (data: TParams) => {
-      return request.post(`${api}/edit`, data, options)
+      return request.post<TResult>(`${api}/edit`, data, options)
     },
     delete: (id: number) => {
-      return request.post(`${api}/delete`, { id }, options)
+      return request.post<TResult>(`${api}/delete`, { id }, options)
     },
     batchDelete: (ids: number[]) => {
-      return request.post(`${api}/deletes`, { ids }, options )
+      return request.post<TResult>(`${api}/deletes`, { ids }, options)
     },
     info: (id: number) => {
       return request.get<TResult>(`${api}/${id}`, options)

src/types/roles.d.ts

@@ -1,4 +1,3 @@
-
 export interface IRole {
   id: number,
   sort: number,
@@ -6,7 +5,7 @@ export interface IRole {
   name: string,
   description: string,
   sequence: number,
-    status: string,
+  status: string | boolean,
   menu_ids: number[]
 }
 

src/utils/index.ts

@@ -92,3 +92,35 @@ export function flattenTree<T>(tree: TreeItem<T>[], fieldNames?: FiledNames) {
 
   return result
 }
+
+
+export const convertToBool = (value: any): boolean => {
+  // 特殊处理字符串 '0'、'true' 和 'false'
+  if (typeof value === 'string') {
+    switch (value.toLowerCase()) {
+      case '0':
+        return false
+      case 'true':
+        return true
+      case 'false':
+        return false
+      default:
+        // 对于其他非空字符串，转换为 true
+        return Boolean(value)
+    }
+  }
+
+  // 处理常见 falsy 值
+  if (value === undefined || value === null ||
+    value === false || value === 0 || value === '' || Number.isNaN(value)) {
+    return false
+  }
+
+  // 对于对象或数组，我们通常认为非空即为 true
+  if (Array.isArray(value) || typeof value === 'object') {
+    return !!Object.keys(value).length
+  }
+
+  // 其他情况，包括数字（非零）、字符串（已经被上述逻辑处理）和其他 truthy 值
+  return Boolean(value)
+}

src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly API_URL: string
+  // 更多环境变量...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

vite.config.ts

@@ -1,11 +1,17 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import { viteMockServe } from 'vite-plugin-mock'
 
 //import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
 
+
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+
+  // 根据当前工作目录中的 `mode` 加载 .env 文件
+  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
+  const env = loadEnv(mode, process.cwd(), '')
+  return {
     //定义别名的路径
     resolve: {
       alias: {
@@ -15,7 +21,7 @@ export default defineConfig({
     server: {
       proxy: {
         '/api': {
-                target: 'http://47.113.117.106:8000',
+          target: env.API_URL,
           changeOrigin: true,
           rewrite: (path) => path
         }
@@ -33,4 +39,5 @@ export default defineConfig({
       }),
       //TanStackRouterVite(),
     ],
+  }
 })