完善菜单模块

src/components/glass/index.tsx

@@ -0,0 +1,38 @@
+import { Flex } from 'antd'
+import { useStyle } from './style.ts'
+import React from 'react'
+
+export interface IClassProps {
+  enabled: boolean
+  className?: string
+  description?: JSX.Element | React.ReactNode
+  children?: JSX.Element | React.ReactNode
+}
+
+const Glass = (props: IClassProps) => {
+  const { styles } = useStyle(props)
+
+  if (!props.enabled) {
+    return props.children
+  }
+
+  return (
+    <div className={styles.container}>
+      <Flex justify={'center'} align={'center'} className={styles.description}>
+        {props.description}
+      </Flex>
+      <div className={styles.glass}/>
+      {props.children}
+    </div>
+  )
+}
+
+export const withGlass = (Component: React.Component | React.FC | JSX.Element | React.ReactNode) => (props) => {
+  return (
+    <Glass enabled={props.enabled}>
+      <Component {...props} />
+    </Glass>
+  )
+}
+
+export default Glass

src/components/glass/style.ts

@@ -0,0 +1,29 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
+  const prefix = `${prefixCls}-${token?.proPrefix}-glass-wrap`
+
+  const container = css`
+    position: relative;
+  `
+
+  const glass = css`
+    background-color: transparent;
+    backdrop-filter: blur(6px);
+    z-index: 100;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  `
+  const description = css`
+    position: absolute;
+    top: 20%;
+    width: 100%;
+    z-index: 101;
+  `
+  return {
+    container: cx(prefix, props.className, container),
+    glass,
+    description,
+  }
+})

src/i18n.ts

@@ -35,7 +35,7 @@ export const initI18n = (options?: InitOptions) => {
         },
       },
       fallbackLng: 'zh',
-      debug: false,
+      debug: true,
       detection: detectionOptions,
       interpolation: {
         escapeValue: false,

src/locales/lang/en-US.ts

@@ -43,7 +43,31 @@ export default {
   system: {
     menus,
   },
-
+  actions: {
+    news: 'Add newly',
+    add: 'Add',
+    cancel: 'Cancel',
+    delete: 'Delete',
+    batchDel: 'Batch Delete',
+    reset: 'Reset',
+    clear: 'Clear',
+    close: 'Close',
+  },
+  message: {
+    infoTitle: 'Hint',
+    errorTitle: 'Error',
+    successTitle: 'Success',
+    warningTitle: 'Warning',
+    batchDelete: 'Are you sure to delete the selected data?',
+    deleteConfirm: 'Are you sure to delete it?',
+    success: 'Submission successful',
+    fail: 'Submission failed',
+    saveSuccess: 'Save successfully',
+    saveFail: 'Save failed',
+    emptyData: 'No Data',
+    emptyDataAdd: 'No data at present, click to add',
+    required: 'This item is a required field',
+  },
   errorTitle: 'Error',
   successTitle: 'Success',
   success: 'Submit Success',

src/locales/lang/pages/system/menus/en-US.ts

@@ -1,3 +1,32 @@
 export default {
-
+  title: 'Menu',
+  setting: 'Configuration',
+  saveSuccess: 'Save successfully',
+  form: {
+    title: 'Menu name',
+    parent: 'Upper-level menu',
+    type: 'Type',
+    typeOptions: {
+      menu: 'Menu',
+      iframe: 'Iframe',
+      link: 'External link',
+      button: 'Button',
+    },
+    name: 'Alias',
+    icon: 'Icon',
+    sort: 'Sorting',
+    path: 'Route',
+    component: 'View',
+    componentHelp: 'View path, relative to src/pages, menu groups can be left blank',
+    save: 'Save',
+    empty: 'Please select a row of data from the left for operation',
+    table: {
+      columns: {
+        name: 'Name',
+        code: 'Code',
+        option: 'Option',
+      }
+    }
+  },
+  button: 'Buttons'
 }

src/locales/lang/pages/system/menus/zh-CN.ts

@@ -19,6 +19,14 @@ export default {
     component: '视图',
     componentHelp: '视图路径，相对于src/pages，菜单组可以不填',
     save: '保存',
+    empty: '请从左侧选择一行数据操作',
+    table: {
+      columns: {
+        name: '名称',
+        code: '标识',
+        option: '操作',
+      }
+    }
   },
   button: '按钮'
 }

src/locales/lang/zh-CN.ts

@@ -43,12 +43,31 @@ export default {
   system: {
     menus,
   },
+  actions: {
+    news: '新增加',
+    add: '添加',
+    cancel: '取消',
+    delete: '删除',
+    batchDel: '批量删除',
+    reset: '重置',
+    clear: '清空',
+    close: '关闭',
+  },
+  message: {
+    infoTitle: '提示',
     errorTitle: '错误',
     successTitle: '成功',
+    warningTitle: '警告',
+    batchDelete: '确定要删除所选数据吗？',
+    deleteConfirm: '确定要删除吗？',
     success: '提交成功',
     fail: '提交失败',
     saveSuccess: '保存成功',
     saveFail: '保存失败',
+    emptyData: '暂无数据',
+    emptyDataAdd: '暂无数据，点击添加',
+    required: '此项为必填项',
+  },
   tabs: {
     refresh: '刷新',
     maximize: '最大化',

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

@@ -4,7 +4,7 @@ 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, defaultMenu, menuDataAtom, selectedMenuAtom } from '../store.ts'
 import { FormInstance } from 'antd/lib'
 import { useAtomValue } from 'jotai/index'
 import { TreeNodeRender } from '../components/TreeNodeRender.tsx'
@@ -42,26 +42,15 @@ const MenuTree = ({ form }: { form: FormInstance }) => {
 
   const renderEmpty = () => {
     if ((data as any).length > 0 || isLoading) return null
-        return <Empty description={t('system.menus.empty', '暂无数据，点击添加')}>
+    return <Empty description={t('message.emptyDataAdd', '暂无数据，点击添加')}>
       <Button type="default"
               icon={<PlusOutlined/>}
               onClick={() => {
-                        const menu = {
-                            parent_id: 0,
-                            type: 'menu',
-                            name: '',
-                            title: '',
-                            icon: '',
-                            path: '',
-                            component: '',
-                            sort: 0,
-                            id: 0,
-                        } as MenuItem
-                        setCurrentMenu(menu)
-                        form.setFieldsValue(menu)
+                setCurrentMenu(defaultMenu)
+                form.setFieldsValue(defaultMenu)
               }}
       >
-                {t('system.menus.add', '添加')}
+        {t('actions.add', '添加')}
       </Button>
     </Empty>
   }

src/pages/system/menus/index.tsx

@@ -1,6 +1,7 @@
+import Glass from '@/components/glass'
 import { useTranslation } from '@/i18n.ts'
 import { PageContainer, ProCard } from '@ant-design/pro-components'
-import { Button, Form, Input, message, Radio, TreeSelect, InputNumber, notification } from 'antd'
+import { Button, Form, Input, message, Radio, TreeSelect, InputNumber, notification, Alert } from 'antd'
 import { useAtomValue } from 'jotai'
 import { menuDataAtom, saveOrUpdateMenuAtom, selectedMenuAtom } from './store.ts'
 import IconPicker from '@/components/icon/picker'
@@ -17,7 +18,7 @@ import { createLazyFileRoute } from '@tanstack/react-router'
 
 const Menus = () => {
 
-  const { styles } = useStyle()
+  const { styles, cx } = useStyle()
   const { t } = useTranslation()
   const [ form ] = Form.useForm()
   const { mutate, isPending, isSuccess, error, isError } = useAtomValue(saveOrUpdateMenuAtom)
@@ -26,13 +27,13 @@ const Menus = () => {
 
   useEffect(() => {
     if (isSuccess) {
-      message.success(t('saveSuccess', '保存成功'))
+      message.success(t('message.saveSuccess', '保存成功'))
     }
 
     if (isError) {
       notification.error({
-        message: t('errorTitle', '错误'),
-        description: (error as any).message ?? t('saveFail', '保存失败'),
+        message: t('message.error', '错误'),
+        description: (error as any).message ?? t('message.saveFail', '保存失败'),
       })
     }
 
@@ -57,7 +58,16 @@ const Menus = () => {
           </ProCard>
         </DraggablePanel>
         <Flexbox className={styles.box}>
-
+          <Glass
+            enabled={currentMenu.id === undefined}
+            description={<>
+              <Alert
+                message={t('message.infoTitle', '提示')}
+                description={t('system.menus.form.empty', '请从左侧选择一行数据操作')}
+                type="info"
+              />
+            </>}
+          >
             <Form form={form}
                   initialValues={currentMenu!}
                   labelCol={{ flex: '110px' }}
@@ -65,7 +75,9 @@ const Menus = () => {
                   labelWrap
                   wrapperCol={{ flex: 1 }}
                   colon={false}
-                className={styles.form}
+                  className={cx(styles.form, styles.emptyForm, {
+                    [styles.emptyForm]: currentMenu.id === undefined
+                  })}
             >
 
               <ProCard title={t('system.menus.setting', '配置')}
@@ -128,7 +140,7 @@ const Menus = () => {
 
                 <Form.Item label={t('system.menus.form.component', '视图')}
                            name={'component'}
-                         help={t('system.menus.form.component.componentHelp', '视图路径，相对于src/pages')}
+                           help={t('system.menus.form.componentHelp', '视图路径，相对于src/pages')}
                 >
                   <Input addonBefore={'pages/'}/>
                 </Form.Item>
@@ -148,7 +160,7 @@ const Menus = () => {
 
 
               </ProCard>
-            <ProCard title={t('system.menus.form.button', '按钮')}
+              <ProCard title={t('system.menus.button', '按钮')}
                        className={styles.formButtons}
                        colSpan={8}>
                 <Form.Item noStyle={true} name={'button'}
@@ -160,7 +172,7 @@ const Menus = () => {
 
               </ProCard>
             </Form>
-
+          </Glass>
         </Flexbox>
       </Flexbox>
     </PageContainer>

src/pages/system/menus/store.ts

@@ -1,11 +1,27 @@
 import systemServ from '@/service/system.ts'
-import { IPage, IPageResult, MenuItem } from '@/types'
+import { IApiResult, IPage, IPageResult, MenuItem } from '@/types'
 import { IMenu } from '@/types/menus'
+import { AxiosResponse } from 'axios'
 import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
-import { atom } from 'jotai/index'
+import { atom, createStore } from 'jotai'
+
+
+export const defaultMenu = {
+  parent_id: 0,
+  type: 'menu',
+  name: '',
+  title: '',
+  icon: '',
+  path: '',
+  component: '',
+  sort: 0,
+  id: 0,
+  button: [],
+} as MenuItem
 
 export const menuPageAtom = atom<IPage>({})
 
+const store = createStore()
 
 export const menuDataAtom = atomWithQuery<any, IPageResult<IMenu>>((get) => {
 
@@ -32,7 +48,7 @@ export const byIdMenuAtom = atomWithQuery((get) => ({
 }))
 
 
-export const saveOrUpdateMenuAtom = atomWithMutation((get) => {
+export const saveOrUpdateMenuAtom = atomWithMutation<IApiResult<IMenu>>((get) => {
 
   return {
     mutationKey: [ 'updateMenu', get(selectedMenuIdAtom) ],
@@ -42,8 +58,16 @@ export const saveOrUpdateMenuAtom = atomWithMutation((get) => {
       }
       return await systemServ.menus.update(data)
     },
-        onSuccess: () => {
-            // console.log(data)
+    onSuccess: (res) => {
+      const menu = get(selectedMenuAtom)
+      console.log({
+        ...menu,
+        id: res.data?.id
+      })
+      store.set(selectedMenuAtom, {
+        ...menu,
+        id: res.data?.id
+      })
       //更新列表
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore fix
@@ -60,8 +84,9 @@ export const deleteMenuAtom = atomWithMutation((get) => {
     mutationFn: async (ids?: number[]) => {
       return await systemServ.menus.batchDelete(ids ?? get(batchIdsAtom))
     },
-        onSuccess: (data) => {
-            console.log(data)
+    onSuccess: () => {
+      store.set(batchIdsAtom, [])
+      get(queryClientAtom).refetchQueries([ 'menus', get(menuPageAtom) ]).then()
     }
   }
 })

src/pages/system/menus/style.ts

@@ -1,7 +1,7 @@
 import { createStyles } from '@/theme'
 
 export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
-    const prefix = `${prefixCls}-${token?.proPrefix}-menu-page`;
+  const prefix = `${prefixCls}-${token?.proPrefix}-menu-page`
 
   const tree = css`
     .ant-tree {
@@ -11,9 +11,11 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
       background: ${token.colorBgContainer};
 
     }
+
     .ant-tree-directory .ant-tree-treenode-selected::before {
       background: ${token.colorBgTextHover};
     }
+
     .ant-tree-treenode:before {
       border-radius: ${token.borderRadius}px;
     }
@@ -23,6 +25,10 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
     flex: 1;
     background: ${token.colorBgContainer};
   `
+  const emptyForm = css`
+    backdrop-filter: ${token.backdropFilter};
+    color: red;
+  `
 
   const form = css`
     display: flex;
@@ -62,6 +68,7 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
   return {
     container: cx(prefix),
     box,
+    emptyForm,
     tree,
     form,
     treeNode,

src/theme/themes/token.ts

@@ -8,6 +8,7 @@ export interface ProThemeToken {
   colorTypeBoolArray: string;
   colorTypeNumberArray: string;
   colorTypeStringArray: string;
+  filterBackdrop: string;
 }
 
 export const getProToken: GetCustomToken<ProThemeToken> = () => ({
@@ -19,6 +20,8 @@ export const getProToken: GetCustomToken<ProThemeToken> = () => ({
   colorTypeNumberArray: '#239BEF',
   colorTypeStringArray: '#62AE8D',
 
+  filterBackdrop: 'blur(6px)'
+
 })
 
 export const themeToken = getProToken({} as any)