完善菜单模块

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

@@ -5,28 +5,28 @@ import { useTranslation } from '@/i18n.ts'
 
 const BatchButton = () => {
 
-    const { t } = useTranslation()
-    const { isPending, mutate, } = useAtomValue(deleteMenuAtom)
-    const ids = useAtomValue(batchIdsAtom)
-    if (ids.length === 0) {
-        return null
-    }
+  const { t } = useTranslation()
+  const { isPending, mutate, } = useAtomValue(deleteMenuAtom)
+  const ids = useAtomValue(batchIdsAtom)
+  if (ids.length === 0) {
+    return null
+  }
 
-    return (
-            <Popconfirm
-                    onConfirm={()=>{
-                        mutate(ids as number[])
-                    }}
-                    title={t('system.menus.batchDel.confirm', '确定要删除所选数据吗？')}>
-                <Button
-                        type="primary"
-                        danger={true}
-                        size={'small'}
-                        disabled={ids.length === 0}
-                        loading={isPending}
-                >{t('t.system.menus.batchDel', '批量删除')}</Button>
-            </Popconfirm>
-    )
+  return (
+    <Popconfirm
+      onConfirm={() => {
+        mutate(ids as number[])
+      }}
+      title={t('message.batchDelete', '确定要删除所选数据吗？')}>
+      <Button
+        type="primary"
+        danger={true}
+        size={'small'}
+        disabled={ids.length === 0}
+        loading={isPending}
+      >{t('actions.batchDel', '批量删除')}</Button>
+    </Popconfirm>
+  )
 }
 
 export default BatchButton

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

@@ -1,97 +1,99 @@
+import { useTranslation } from '@/i18n.ts'
 import { EditableFormInstance, EditableProTable } from '@ant-design/pro-components'
 import { useMemo, useRef, useState } from 'react'
 import { IDataProps } from '@/types'
 import { FormInstance } from 'antd/lib'
 
 type DataSourceType = {
-    id: number,
-    name: string,
-    code: string,
+  id: number,
+  name: string,
+  code: string,
 }
 
 const fixRowKey = (data: DataSourceType[]) => {
-    return data.map((item, index) => ({ ...item, id: item.id ?? index+1 }))
+  return data.map((item, index) => ({ ...item, id: item.id ?? index + 1 }))
 }
 
 const ButtonTable = (props: IDataProps & {
-    form: FormInstance
+  form: FormInstance
 }) => {
 
-    const { value, onChange  } = props
-    const editorFormRef = useRef<EditableFormInstance<DataSourceType>>()
-    const [ editableKeys, setEditableRowKeys ] = useState<any[]>(() => {
-        return fixRowKey(value || []).map(item => item.id)
-    })
+  const { t } = useTranslation()
+  const { value, onChange } = props
+  const editorFormRef = useRef<EditableFormInstance<DataSourceType>>()
+  const [ editableKeys, setEditableRowKeys ] = useState<any[]>(() => {
+    return fixRowKey(value || []).map(item => item.id)
+  })
 
-    const values  = fixRowKey(value || [])
+  const values = fixRowKey(value || [])
 
-    const columns = useMemo(() => {
+  const columns = useMemo(() => {
 
-        return [
-            {
-                title: 'id',
-                dataIndex: 'id',
-                hideInTable: true,
-            },
-            {
-                title: '名称',
-                dataIndex: 'label',
-                formItemProps: () => {
-                    return {
-                        rules: [ { required: true, message: '此项为必填项' } ],
-                    }
-                },
-            },
-            {
-                title: '标识',
-                dataIndex: 'code',
-                formItemProps: () => {
-                    return {
-                        rules: [ { required: true, message: '此项为必填项' } ],
-                    }
-                },
-            },
+    return [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        hideInTable: true,
+      },
+      {
+        title: t('system.menus.form.table.columns.name', '名称'),
+        dataIndex: 'label',
+        formItemProps: () => {
+          return {
+            rules: [ { required: true, message: t('message.required') } ],
+          }
+        },
+      },
+      {
+        title: t('system.menus.form.table.columns.code', '标识'),
+        dataIndex: 'code',
+        formItemProps: () => {
+          return {
+            rules: [ { required: true, message: t('message.required') } ],
+          }
+        },
+      },
 
-            {
-                title: '操作',
-                valueType: 'option',
-                width: 80,
+      {
+        title: t('system.menus.form.table.columns.option', '操作'),
+        valueType: 'option',
+        width: 80,
 
-            }
-        ]
+      }
+    ]
 
-    }, [])
+  }, [])
 
 
-    return (
+  return (
 
-            <EditableProTable<DataSourceType>
-                    rowKey="id"
-                    value={values }
-                    onChange={onChange}
-                    editableFormRef={editorFormRef}
-                    recordCreatorProps={
-                           {
-                            newRecordType: 'dataSource',
-                            record: () => {
-                                return { id: ((value?? []).length + 1) } as DataSourceType
-                            },
-                        }
-                    }
-                    editable={{
-                        type: 'multiple',
-                        editableKeys,
-                        actionRender: (_row, _config, defaultDoms) => {
-                            return [ defaultDoms.delete ]
-                        },
-                        onValuesChange: (_record, recordList) => {
-                           onChange?.(recordList)
-                        },
-                        onChange: setEditableRowKeys,
-                    }}
-                    columns={columns as any}
-            />
-    )
+    <EditableProTable<DataSourceType>
+      rowKey="id"
+      value={values}
+      onChange={onChange}
+      editableFormRef={editorFormRef}
+      recordCreatorProps={
+        {
+          newRecordType: 'dataSource',
+          record: () => {
+            return { id: ((value ?? []).length + 1) } as DataSourceType
+          },
+        }
+      }
+      editable={{
+        type: 'multiple',
+        editableKeys,
+        actionRender: (_row, _config, defaultDoms) => {
+          return [ defaultDoms.delete ]
+        },
+        onValuesChange: (_record, recordList) => {
+          onChange?.(recordList)
+        },
+        onChange: setEditableRowKeys,
+      }}
+      columns={columns as any}
+    />
+  )
 }
 
 export default ButtonTable

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

@@ -5,62 +5,54 @@ import { FormInstance } from 'antd/lib'
 import { useTranslation } from '@/i18n.ts'
 import { useStyle } from '../style.ts'
 import { useAtomValue, useSetAtom } from 'jotai/index'
-import { deleteMenuAtom, selectedMenuAtom } from '../store.ts'
+import { defaultMenu, deleteMenuAtom, selectedMenuAtom } from '../store.ts'
 import { PlusOutlined } from '@ant-design/icons'
 import ActionIcon, { DeleteAction } from '@/components/icon/action'
 
 export const TreeNodeRender = memo(({ node, form }: { node: MenuItem & TreeDataNode, form: FormInstance }) => {
-    const { title } = node
-    const { t } = useTranslation()
-    const { styles } = useStyle()
-    const { mutate, } = useAtomValue(deleteMenuAtom)
+  const { title } = node
+  const { t } = useTranslation()
+  const { styles } = useStyle()
+  const { mutate, } = useAtomValue(deleteMenuAtom)
 
-    const setMenuData = useSetAtom(selectedMenuAtom)
+  const setMenuData = useSetAtom(selectedMenuAtom)
 
-    return (
-            <div className={styles.treeNode}>
-                <span>{title as any}</span>
-                <span className={'actions'}>
+  return (
+    <div className={styles.treeNode}>
+      <span>{title as any}</span>
+      <span className={'actions'}>
                     <Space size={'middle'}>
                         <ActionIcon
-                                size={12}
-                                icon={<PlusOutlined/>}
-                                title={t('system.menus.add', '添加')}
-                                onClick={(e) => {
-                                    // console.log('add')
-                                    e.stopPropagation()
-                                    e.preventDefault()
+                          size={12}
+                          icon={<PlusOutlined/>}
+                          title={t('actions.add', '添加')}
+                          onClick={(e) => {
+                            // console.log('add')
+                            e.stopPropagation()
+                            e.preventDefault()
+                            const menu = {
+                              ...defaultMenu,
+                              parent_id: node.id,
+                            }
+                            setMenuData(menu)
+                            form.setFieldsValue(menu)
 
-                                    const menu = {
-                                        parent_id: node.id,
-                                        type: 'menu',
-                                        name: '',
-                                        title: '',
-                                        icon: '',
-                                        path: '',
-                                        component: '',
-                                        sort: 0,
-                                        id: 0,
-                                    } as MenuItem
-                                    setMenuData(menu)
-                                    form.setFieldsValue(menu)
-
-                                }}/>
+                          }}/>
                         <Popconfirm
-                                title={t('system.menus.delConfirm', '确定要删除吗？')}
-                                onConfirm={() => {
-                                    mutate([ (node as any).id ])
-                                }}
+                          title={t('message.deleteConfirm', '确定要删除吗？')}
+                          onConfirm={() => {
+                            mutate([ (node as any).id ])
+                          }}
                         >
                           <DeleteAction
-                                  size={12}
-                                  onClick={(e) => {
-                                      e.stopPropagation()
-                                      e.stopPropagation()
-                                  }}/>
+                            size={12}
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              e.stopPropagation()
+                            }}/>
                         </Popconfirm>
                     </Space>
                 </span>
-            </div>
-    )
+    </div>
+  )
 })