1、完善菜单，角色模块

2、修正type类型提示
7 months ago · 0f855a931f
15 changed files with 646 additions and 486 deletions
--- a/package.json
+++ b/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"
--- a/src/components/switch/index.tsx
+++ b/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
--- a/src/locales/lang/zh-CN.ts
+++ b/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: '最大化',
--- a/src/pages/system/menus/index.tsx
+++ b/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'}/>
--- a/src/pages/system/menus/store.ts
+++ b/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()
    }
  }
 })
--- a/src/pages/system/menus/style.ts
+++ b/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 {
--- a/src/pages/system/roles/index.tsx
+++ b/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>
  )
 })
--- a/src/pages/system/roles/store.ts
+++ b/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
--- a/src/request.ts
+++ b/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
--- a/src/service/base.ts
+++ b/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)
--- a/src/types/roles.d.ts
+++ b/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[]
 }

--- a/src/utils/index.ts
+++ b/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)
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -1 +1,9 @@
 /// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly API_URL: string
+  // 更多环境变量...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
--- a/vite.config.ts
+++ b/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(),
    ],
+  }
 })