pro/src/pages/system/menus/index.tsx

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, Alert } from 'antd'
import { useAtomValue } from 'jotai'
import { menuDataAtom, saveOrUpdateMenuAtom, selectedMenuAtom } from './store.ts'
import IconPicker from '@/components/icon/picker'
import ButtonTable from './components/ButtonTable.tsx'
import { Flexbox } from 'react-layout-kit'
import { DraggablePanel } from '@/components/draggable-panel'
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 { createLazyFileRoute } from '@tanstack/react-router'


const Menus = () => {

  const { styles, cx } = useStyle()
  const { t } = useTranslation()
  const [ form ] = Form.useForm()
  const { mutate, isPending, isSuccess, error, isError } = useAtomValue(saveOrUpdateMenuAtom)
  const { data = [] } = useAtomValue(menuDataAtom)
  const currentMenu = useAtomValue<MenuItem>(selectedMenuAtom) ?? {}

  useEffect(() => {
    if (isSuccess) {
      message.success(t('message.saveSuccess', '保存成功'))
    }

    if (isError) {
      notification.error({
        message: t('message.error', '错误'),
        description: (error as any).message ?? t('message.saveFail', '保存失败'),
      })
    }

  }, [ isError, isSuccess ])

  return (
    <PageContainer breadcrumbRender={false} title={false} className={styles.container}>

      <Flexbox horizontal>
        <DraggablePanel expandable={false}
                        placement="left"
                        defaultSize={{ width: 300 }}
                        maxWidth={500}
        >
          <ProCard title={t('system.menus.title', '菜单')}
                   extra={
                     <BatchButton/>
                   }
          >
            <MenuTree form={form}/>

          </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' }}
                  labelAlign="left"
                  labelWrap
                  wrapperCol={{ flex: 1 }}
                  colon={false}
                  className={cx(styles.form, styles.emptyForm, {
                    [styles.emptyForm]: currentMenu.id === undefined
                  })}
            >

              <ProCard title={t('system.menus.setting', '配置')}
                       className={styles.formSetting}
              >

                <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>
                <Form.Item label={t('system.menus.form.parent', '上级菜单')} name={'parent_id'}>
                  <TreeSelect
                    treeData={[
                      { id: 0, title: '顶级菜单', children: data as any },
                    ]}
                    treeDefaultExpandAll={true}
                    fieldNames={{
                      label: 'title',
                      value: 'id'
                    }}/>
                </Form.Item>
                <Form.Item label={t('system.menus.form.type', '类型')} name={'type'}>
                  <Radio.Group
                    options={[
                      {
                        label: t('system.menus.form.typeOptions.menu', '菜单'),
                        value: 'menu'
                      },
                      {
                        label: t('system.menus.form.typeOptions.iframe', 'iframe'),
                        value: 'iframe'
                      },
                      {
                        label: t('system.menus.form.typeOptions.link', '外链'),
                        value: 'link'
                      },
                      {
                        label: t('system.menus.form.typeOptions.button', '按钮'),
                        value: 'button'
                      },
                    ]}
                    optionType="button"
                    buttonStyle="solid"
                  />
                </Form.Item>
                <Form.Item label={t('system.menus.form.name', '别名')} name={'name'}>
                  <Input/>
                </Form.Item>
                <Form.Item label={t('system.menus.form.icon', '图标')} name={'icon'}>
                  <IconPicker placement={'left'}/>
                </Form.Item>
                <Form.Item label={t('system.menus.form.sort', '排序')} name={'sort'}>
                  <InputNumber/>
                </Form.Item>
                <Form.Item label={t('system.menus.form.path', '路由')} name={'path'}>
                  <Input/>
                </Form.Item>

                <Form.Item label={t('system.menus.form.component', '视图')}
                           name={'component'}
                           help={t('system.menus.form.componentHelp', '视图路径，相对于src/pages')}
                >
                  <Input addonBefore={'pages/'}/>
                </Form.Item>
                <Form.Item label={' '}>
                  <Button type="primary"
                          htmlType={'submit'}
                          loading={isPending}
                          onClick={() => {
                            form.validateFields().then((values) => {
                              mutate(values)
                            })
                          }}
                  >
                    {t('system.menus.form.save', '保存')}
                  </Button>
                </Form.Item>


              </ProCard>
              <ProCard title={t('system.menus.button', '按钮')}
                       className={styles.formButtons}
                       colSpan={8}>
                <Form.Item noStyle={true} name={'button'}
                           shouldUpdate={(prevValues: MenuItem, curValues) => {
                             return prevValues.id !== curValues.id
                           }}>
                  <ButtonTable form={form} key={(currentMenu as any).id}/>
                </Form.Item>

              </ProCard>
            </Form>
          </Glass>
        </Flexbox>
      </Flexbox>
    </PageContainer>
  )
}

export const Route = createLazyFileRoute('/system/menus')({
  component: Menus
})


export default Menus