cx-chat 0.0.1 → 0.0.3

package/src/views/page-system/permission/modal/submit-modal.tsx

@@ -1,650 +0,0 @@
-import { getMenuTreeAPI } from '@/api/system/menu'
-import {
-  addPermissionAPI,
-  editPermissionAPI,
-  getPermissionDetailAPI,
-} from '@/api/system/permission'
-import { useAuth } from '@/contexts/AuthContext'
-import { useModalSubmit } from '@/hooks/useModalSubmit'
-import { ENUM_DATA } from '@/meta'
-import type { DictOptionItem } from '@/meta/index-dict'
-import { DICT_DATA, DICT_KEY, loadCommonDictData } from '@/meta/index-dict'
-import type { MenuTreeItem } from '@/types/menu'
-import {
-  findMenuCodeInTree,
-  mapMenuTreeForPermissionBindSelect,
-} from '@/utils/menuI18n'
-import type { PermissionCrudCopyVariant } from '@/utils/permission-crud'
-import {
-  getEffectiveCodeSuffix,
-  inferCrudFromSuffix,
-  toPermissionCrudSlice,
-} from '@/utils/permission-crud'
-import { QuestionCircleOutlined } from '@ant-design/icons'
-import {
-  CxForm,
-  CxFormItem,
-  CxInput,
-  CxInputNumber,
-  CxModal,
-  CxSelect,
-  CxSwitch,
-  CxTreeSelect,
-  useCxModal,
-} from '@cx-ui'
-import { Col, Form, Input, Radio, Row, Tooltip } from 'antd'
-import type { FormInstance, Rule } from 'antd/es/form'
-import type { TFunction } from 'i18next'
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import './submit-modal.less'
-
-interface PermissionModalProps {
-  onOk?: (values: any) => void | Promise<void>
-  onCancel?: () => void
-}
-
-type ModalMode = 'add' | 'edit'
-
-type OpenPayload = {
-  opeType?: ModalMode
-  opeId?: number | string
-  record?: any
-  menuId?: string
-  /** 从列表行打开新增：回显行数据；带 variant 时按「复制为×」改写标题/方法/编码后缀，省略 variant 则为仅复制原样回显 */
-  copyOpen?: {
-    record: any
-    variant?: PermissionCrudCopyVariant
-  }
-}
-
-function emptyPermissionFormValues() {
-  return {
-    menuId: '',
-    title: '',
-    code: '',
-    codePreset: undefined as string | undefined,
-    codeCustom: '',
-    description: '',
-    path: '',
-    httpMethod: 'POST',
-    apiType: 1,
-    noLoginStatus: 0,
-    logStatus: 1,
-    sortOrder: 0,
-  }
-}
-
-function buildPermissionFormRules(t: TFunction): {
-  apiType: Rule[]
-  menuId: Rule[]
-  title: Rule[]
-  code: Rule[]
-  httpMethod: Rule[]
-  path: Rule[]
-  sortOrder: Rule[]
-} {
-  return {
-    apiType: [{ required: true, message: t('system.permission.api_type_required') }],
-    menuId: [{ required: true, message: t('system.permission.menu_required') }],
-    title: [{ required: true, message: t('system.permission.title_required') }],
-    code: [{ required: true, message: t('system.permission.code_required') }],
-    httpMethod: [{ required: true, message: t('system.permission.http_method_required') }],
-    path: [{ required: true, message: t('system.permission.path_required') }],
-    sortOrder: [{ required: true, message: t('common.sort_order_required') }],
-  }
-}
-
-function normalizePermissionDetail(raw: any) {
-  if (raw?.data?.data) return raw.data.data
-  if (raw?.data) return raw.data
-  return raw || {}
-}
-
-/** 完整权限编码 → 表单仅保留首个 `:` 之后的片段（前缀为菜单 code，提交时再拼回） */
-function splitPermissionCodeSuffix(full: unknown): string {
-  if (full == null) return ''
-  const s = String(full)
-  const i = s.indexOf(':')
-  if (i < 0) return s
-  return s.slice(i + 1)
-}
-
-/** 将接口/列表回显的编码后缀拆到「字典下拉 + 可选输入框」；整段在字典里则只填下拉 */
-function initPermissionCodeFields(form: FormInstance, suffix: unknown) {
-  const s = String(suffix ?? '').trim()
-  const dictSet = new Set(
-    DICT_DATA[DICT_KEY.permission].option.map((o) => String(o.value)),
-  )
-  if (s && dictSet.has(s)) {
-    form.setFieldsValue({ codePreset: s, codeCustom: '', code: s })
-  } else if (s) {
-    form.setFieldsValue({ codePreset: undefined, codeCustom: s, code: s })
-  } else {
-    form.setFieldsValue({ codePreset: undefined, codeCustom: '', code: '' })
-  }
-}
-
-function mapDetailToForm(detail: any) {
-  const anonymous = detail?.anonymous
-  const noLoginFallback =
-    anonymous === true ? 1 : anonymous === false ? 0 : undefined
-  return {
-    menuId: String(detail?.menuId ?? ''),
-    title: detail?.title ?? detail?.name ?? '',
-    code: splitPermissionCodeSuffix(detail?.code ?? ''),
-    description: detail?.description ?? '',
-    path: detail?.path ?? detail?.apiPath ?? '',
-    httpMethod: detail?.httpMethod ?? detail?.method ?? 'POST',
-    apiType: Number(detail?.apiType ?? 1),
-    noLoginStatus: Number(
-      detail?.noLoginStatus ?? noLoginFallback ?? 0,
-    ),
-    logStatus: Number(detail?.logStatus ?? 1),
-    sortOrder: Number(detail?.sortOrder ?? 0),
-  }
-}
-
-/** 记录日志等：1=开，0=关 */
-const switchCheckedProps = {
-  valuePropName: 'checked' as const,
-  getValueFromEvent: (checked: boolean) => (checked ? 1 : 0),
-  getValueProps: (v: unknown) => ({ checked: Number(v) === 1 }),
-}
-
-/**
- * noLoginStatus 字段语义不变：0=需登录（需要认证），1=可匿名。
- * 开关展示「需要认证」：打开=0，关闭=1。
- */
-const noLoginStatusSwitchProps = {
-  valuePropName: 'checked' as const,
-  getValueFromEvent: (checked: boolean) => (checked ? 0 : 1),
-  getValueProps: (v: unknown) => ({ checked: Number(v) === 0 }),
-}
-
-function normalizeMenuTreeResult(raw: unknown): MenuTreeItem[] {
-  const r = raw as { data?: unknown } | null | undefined
-  if (Array.isArray(raw)) return raw as MenuTreeItem[]
-  if (Array.isArray(r?.data)) return r.data as MenuTreeItem[]
-  const d = r?.data as { data?: unknown } | undefined
-  if (Array.isArray(d?.data)) return d.data as MenuTreeItem[]
-  return []
-}
-
-const SubmitModal = forwardRef<any, PermissionModalProps>(function SubmitModal(
-  _props,
-  ref,
-) {
-  const { onOk, onCancel } = _props
-  const { t } = useTranslation()
-  const { commonDictRevision } = useAuth()
-  const [menuTreeData, setMenuTreeData] = useState<MenuTreeItem[]>([])
-
-  /** 编码「提交态」快照：字典 onChange、自定义 onBlur 后与上次比较，用于同步名称/方法 */
-  const suffixSyncBaselineRef = useRef('')
-
-  const modal = useCxModal({
-    onOpen: async (payload) => {
-      const nextType = payload.opeType === 'edit' ? 'edit' : 'add'
-      const nextOpeId = payload.opeId ?? payload.data?.id
-      const record = payload.data
-      const { form, opeType, setOpeId } = modal
-      
-      void loadCommonDictData()
-
-      let tree: MenuTreeItem[] = []
-      try {
-        const treeRes = await getMenuTreeAPI()
-        tree = normalizeMenuTreeResult(treeRes)
-      } catch {
-        tree = []
-      }
-      setMenuTreeData(tree)
-
-      const defaultMenuId = String(
-        payload.menuId ??
-          record?.menuId ??
-          '',
-      )
-
-      if (nextType === 'edit' && nextOpeId) {
-        setOpeId(nextOpeId)
-        try {
-          const detailRes = await getPermissionDetailAPI(nextOpeId)
-          const detail = normalizePermissionDetail(detailRes)
-          form.resetFields()
-          const fv = mapDetailToForm(detail)
-          form.setFieldsValue(fv)
-          initPermissionCodeFields(form, fv.code)
-        } catch {
-          form.resetFields()
-          const fv = mapDetailToForm(record || {})
-          form.setFieldsValue(fv)
-          initPermissionCodeFields(form, fv.code)
-        }
-      } else if (nextType === 'edit' && record) {
-        setOpeId(record?.id)
-        form.resetFields()
-        const fv = mapDetailToForm(record)
-        form.setFieldsValue(fv)
-        initPermissionCodeFields(form, fv.code)
-      } else if (nextType === 'add' && payload.copyOpen) {
-        setOpeId(undefined)
-        form.resetFields()
-        const { data: src, variant } = payload.copyOpen
-        const base = mapDetailToForm(src)
-        const menuIdResolved =
-          String(base.menuId ?? '').trim() ||
-          String(src?.menuId ?? defaultMenuId ?? '')
-        if (variant) {
-          const crud = toPermissionCrudSlice(
-            {
-              title: String(base.title ?? ''),
-              httpMethod: String(base.httpMethod ?? 'POST'),
-              codeSuffix: String(base.code ?? ''),
-            },
-            variant,
-          )
-          form.setFieldsValue({
-            ...emptyPermissionFormValues(),
-            ...base,
-            title: crud.title,
-            httpMethod: crud.httpMethod,
-            code: crud.codeSuffix,
-            menuId: menuIdResolved,
-          })
-          initPermissionCodeFields(form, crud.codeSuffix)
-          // 复制为×后，立即更新基线，避免首次打开时误触发同步
-          suffixSyncBaselineRef.current = crud.codeSuffix
-        } else {
-          form.setFieldsValue({
-            ...emptyPermissionFormValues(),
-            ...base,
-            menuId: menuIdResolved,
-          })
-          initPermissionCodeFields(form, base.code)
-          // 仅复制时，基线设为原始后缀
-          const rawSuffix = splitPermissionCodeSuffix(src?.code ?? '')
-          suffixSyncBaselineRef.current = rawSuffix
-        }
-      } else {
-        setOpeId(undefined)
-        form.resetFields()
-        const def = DICT_DATA[DICT_KEY.permission].defaultValue
-        form.setFieldsValue({
-          ...emptyPermissionFormValues(),
-          menuId: defaultMenuId,
-          ...(def && { codePreset: def, codeCustom: '', code: def }),
-        })
-        suffixSyncBaselineRef.current = def || ''
-      }
-    },
-    onClose: () => {
-      setMenuTreeData([])
-      suffixSyncBaselineRef.current = ''
-      onCancel?.()
-    },
-  })
-  
-  const { isOpen, close, form, opeType, opeId } = modal
-  const menuIdWatched = Form.useWatch('menuId', form)
-  const codePresetWatched = Form.useWatch('codePreset', form)
-  const codeCustomWatched = Form.useWatch('codeCustom', form)
-  const hasMenu = useMemo(
-    () => menuIdWatched != null && String(menuIdWatched).trim() !== '',
-    [menuIdWatched],
-  )
-
-  const permissionDictOptions = useMemo(
-    () => DICT_DATA[DICT_KEY.permission].option,
-    [commonDictRevision],
-  )
-
-  /** 字典晚于弹窗打开时到达：补全新增默认值，并重新按字典拆分编辑/复制态编码 */
-  useEffect(() => {
-    if (!isOpen) return
-    if (opeType === 'add') {
-      const def = DICT_DATA[DICT_KEY.permission].defaultValue
-      // 普通新增：字段都为空时设置默认值
-      const preset = form.getFieldValue('codePreset')
-      const custom = String(form.getFieldValue('codeCustom') ?? '').trim()
-      const code = String(form.getFieldValue('code') ?? '').trim()
-      if (!preset && !custom && !code && def) {
-        form.setFieldsValue({ codePreset: def, codeCustom: '', code: def })
-        suffixSyncBaselineRef.current = def
-        return
-      }
-      // 复制新增：字典加载后重新拆分编码后缀
-      if (code && !preset && !custom) {
-        initPermissionCodeFields(form, code)
-        suffixSyncBaselineRef.current = code
-      }
-      return
-    }
-    if (opeType === 'edit') {
-      const suffix = getEffectiveCodeSuffix(
-        form.getFieldValue('codeCustom'),
-        form.getFieldValue('codePreset'),
-      )
-      initPermissionCodeFields(form, suffix)
-      suffixSyncBaselineRef.current = suffix
-    }
-  }, [commonDictRevision, form, isOpen, opeType])
-
-  const handlePermissionSuffixCommitted = useCallback(() => {
-    if (!hasMenu) return
-    const next = getEffectiveCodeSuffix(
-      form.getFieldValue('codeCustom'),
-      form.getFieldValue('codePreset'),
-    )
-    const prev = suffixSyncBaselineRef.current
-    if (next === prev) return
-    const opPrev = inferCrudFromSuffix(prev)
-    const opNext = inferCrudFromSuffix(next)
-    suffixSyncBaselineRef.current = next
-    if (opNext == null || opNext === opPrev) return
-    const out = toPermissionCrudSlice(
-      {
-        title: String(form.getFieldValue('title') ?? ''),
-        httpMethod: String(form.getFieldValue('httpMethod') ?? 'POST'),
-        codeSuffix: next,
-      },
-      opNext,
-    )
-    // 同步更新标题、方法、编码后缀到字典下拉框
-    form.setFieldsValue({
-      title: out.title,
-      httpMethod: out.httpMethod,
-      codePreset: out.codeSuffix,
-      codeCustom: '',
-    })
-  }, [form, hasMenu])
-
-  const menuCodePrefix = useMemo(
-    () => findMenuCodeInTree(menuTreeData, menuIdWatched),
-    [menuTreeData, menuIdWatched],
-  )
-  const [permissionCodeSelectOptions, setPermissionCodeSelectOptions] = useState<
-    { name: string; value: string }[]
-  >([])
-  const codeCustomHasOverride = useMemo(
-    () => String(codeCustomWatched ?? '').trim() !== '',
-    [codeCustomWatched],
-  )
-
-  const effectiveCodeSuffix = useMemo(
-    () => getEffectiveCodeSuffix(codeCustomWatched, codePresetWatched),
-    [codePresetWatched, codeCustomWatched],
-  )
-
-  const fullPermissionCodePreview = useMemo(() => {
-    if (!effectiveCodeSuffix) return ''
-    return menuCodePrefix
-      ? `${menuCodePrefix}:${effectiveCodeSuffix}`
-      : effectiveCodeSuffix
-  }, [effectiveCodeSuffix, menuCodePrefix])
-
-  /** 输入框有值优先，否则用字典选中项；写回 code 供校验与提交 */
-  useEffect(() => {
-    if (!hasMenu) return
-    form.setFieldValue(
-      'code',
-      getEffectiveCodeSuffix(codeCustomWatched, codePresetWatched),
-    )
-  }, [hasMenu, codePresetWatched, codeCustomWatched, form])
-
-  const { submitting, handleSubmit } = useModalSubmit<any, any>()
-  const permissionRules = useMemo(() => buildPermissionFormRules(t), [t])
-
-  const menuTreeSelectData = useMemo(
-    () => mapMenuTreeForPermissionBindSelect(menuTreeData),
-    [menuTreeData],
-  )
-
-  /** 未选菜单时不能选「扩展」：强制回到基础（1） */
-  useEffect(() => {
-    if (!hasMenu) {
-      const cur = form.getFieldValue('apiType')
-      if (Number(cur) === 2) {
-        form.setFieldValue('apiType', 1)
-      }
-    }
-  }, [hasMenu, form])
-
-  const modalTitle = useMemo(
-    () =>
-      opeType === 'edit'
-        ? t('system.permission.edit')
-        : t('system.permission.add'),
-    [opeType, t],
-  )
-
-  useImperativeHandle(ref, () => ({
-    open: modal.open,
-    close,
-  }), [modal.open, close])
-
-  const buildPayload = (values: any) => {
-    const mc = findMenuCodeInTree(menuTreeData, values.menuId)
-    const suffix = String(values.code ?? '').trim()
-    const fullCode = mc ? `${mc}:${suffix}` : suffix
-    return {
-    apiType: Number(values.apiType ?? 1),
-    title: values.title,
-    code: fullCode,
-    httpMethod: values.httpMethod,
-    path: values.path,
-    noLoginStatus: Number(values.noLoginStatus ?? 0),
-    logStatus: Number(values.logStatus ?? 0),
-    sortOrder: Number(values.sortOrder ?? 0),
-    description: values.description?.trim() || undefined,
-    menuId: String(values.menuId ?? ''),
-    ...(opeType === 'edit' && opeId != null ? { id: opeId } : {}),
-    }
-  }
-
-  const onOkClick = async () => {
-    if (opeType === 'detail') return
-    const result = await handleSubmit({
-      opeType,
-      validate: () => form.validateFields(),
-      addAPI: addPermissionAPI,
-      editAPI: (payload) => editPermissionAPI(payload),
-      transform: (values) => buildPayload(values),
-      // successMessage: {
-      //   add: t('system.permission.add_success'),
-      //   edit: t('system.permission.edit_success'),
-      // },
-      onSuccess: async ({ payload }) => {
-        await onOk?.(payload)
-      },
-    })
-    if (result) close()
-  }
-
-  return (
-    <CxModal
-      title={modalTitle}
-      isOpen={isOpen}
-      onClose={close}
-      modalConfig={{ width: 680 }}
-      opeType={opeType}
-      submitting={submitting}
-      onSubmit={onOkClick}>
-      <CxForm
-        className="permission-submit-modal-form"
-        form={form}
-        rules={permissionRules}
-        layout="vertical"
-        initialValues={emptyPermissionFormValues()}>
-        <CxFormItem
-          label={t('system.permission.belong_menu')}
-          name="menuId">
-          <CxTreeSelect
-            treeData={menuTreeSelectData}
-            placeholder={t('system.permission.menu_select_placeholder')}
-            allowClear
-            showSearch
-            treeDefaultExpandAll
-            treeNodeFilterProp="title"
-          />
-        </CxFormItem>
-        <CxFormItem
-          className="permission-submit-modal-code"
-          label={t('system.permission.code')}
-          required
-          extra={
-            hasMenu && fullPermissionCodePreview ? (
-              <span className="inline-flex flex-wrap items-center gap-x-1 text-xs text-gray-500 dark:text-gray-400">
-                <span className="inline-flex items-center gap-0.5">
-                  {t('system.permission.code_full_preview')}
-                  <Tooltip
-                    title={t('system.permission.code_full_preview_hint')}
-                    placement="top">
-                    <QuestionCircleOutlined
-                      className="cursor-help text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
-                      aria-label={t('system.permission.code_full_preview_hint')}
-                    />
-                  </Tooltip>
-                </span>
-                <span>：</span>
-                <code className="max-w-full break-all rounded bg-gray-100 px-1.5 py-0.5 font-mono text-gray-800 dark:bg-gray-800 dark:text-gray-100">
-                  {fullPermissionCodePreview}
-                </code>
-              </span>
-            ) : null
-          }>
-          <div className="permission-submit-modal-code-fields w-full max-w-full">
-            <Row className="w-full max-w-full" gutter={0} wrap={false}>
-              <Col
-                span={12}
-                className={
-                  codeCustomHasOverride
-                    ? 'permission-submit-modal-code-col permission-submit-modal-code-col--dict-muted'
-                    : 'permission-submit-modal-code-col'
-                }>
-                {/*
-                  CxSelect + 数据字典范例：DICT_DATA[DICT_KEY.permission].option（键合法可写 DICT_KEY.permission），fieldNames 对齐 { value, name }；
-                  optionRender 下拉、labelRender 收起（此处仅 value）；字典由登录/打开时 void 触发，commonDictRevision 驱动刷新。
-                */}
-                <CxFormItem name="codePreset" noStyle>
-                  <CxSelect.Large
-                    className={`w-full min-w-0${codeCustomHasOverride ? ' permission-code-select-looks-disabled' : ''}`}
-                    disabled={!hasMenu}
-                    prefix={
-                      menuCodePrefix ? (
-                        <span className="max-w-[45%] shrink-0 truncate font-mono text-gray-600 dark:text-gray-300">
-                          {menuCodePrefix}:
-                        </span>
-                      ) : undefined
-                    }
-                    placeholder={t('system.permission.code_dict_select_placeholder')}
-                    options={permissionDictOptions}
-                    fieldNames={{ label: 'name', value: 'value' }}
-                    optionRender={(ori) => {
-                      const o = ori.data as DictOptionItem
-                      return `${o.value}（${o.name}）`
-                    }}
-                    labelRender={(item) => String(item.value)}
-                    onChange={(v) => {
-                      form.setFieldsValue({
-                        codePreset: v,
-                        codeCustom: '',
-                      })
-                      handlePermissionSuffixCommitted()
-                    }}
-                  />
-                </CxFormItem>
-              </Col>
-              <Col span={12} className="permission-submit-modal-code-col">
-                <CxFormItem name="codeCustom" noStyle>
-                  <CxInput.Large
-                    className="w-full min-w-0"
-                    disabled={!hasMenu}
-                    placeholder={t('system.permission.code_input_override_placeholder')}
-                    onBlur={() => {
-                      handlePermissionSuffixCommitted()
-                    }}
-                  />
-                </CxFormItem>
-              </Col>
-            </Row>
-            <Form.Item name="code" hidden rules={permissionRules.code}>
-              <Input />
-            </Form.Item>
-          </div>
-        </CxFormItem>
-        <CxFormItem
-          label={t('system.permission.title')}
-          name="title">
-          <CxInput.Large placeholder={t('system.permission.title_placeholder')} />
-        </CxFormItem>
-        <CxFormItem
-          label={t('system.permission.path')}
-          name="path">
-          <CxInput.Large placeholder={t('system.permission.path_placeholder')} />
-        </CxFormItem>
-        <CxFormItem
-          label={t('system.permission.http_method')}
-          name="httpMethod">
-          <CxSelect.Large options={ENUM_DATA.httpMethod.option} />
-        </CxFormItem>
-        <CxFormItem
-          label={t('system.permission.api_type')}
-          name="apiType"
-          extra={
-            !hasMenu ? (
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                {t('system.permission.api_type_menu_hint')}
-              </span>
-            ) : null
-          }>
-          <Radio.Group className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:gap-x-6 sm:gap-y-2">
-            {ENUM_DATA.permissionApiType.option.map((o) => (
-              <Radio
-                key={String(o.value)}
-                value={o.value}
-                disabled={!hasMenu && Number(o.value) === 2}>
-                {t(o.label)}
-              </Radio>
-            ))}
-          </Radio.Group>
-        </CxFormItem>
-        <CxFormItem
-          label={t('system.permission.no_login_status')}
-          name="noLoginStatus"
-          {...noLoginStatusSwitchProps}>
-          <CxSwitch />
-        </CxFormItem>
-        <CxFormItem
-          label={t('system.permission.log_status')}
-          name="logStatus"
-          {...switchCheckedProps}>
-          <CxSwitch />
-        </CxFormItem>
-        <CxFormItem label={t('common.description')} name="description">
-          <CxInput.Large placeholder={t('common.description_placeholder')} />
-        </CxFormItem>
-        <CxFormItem
-          label={t('common.sort_order')}
-          name="sortOrder">
-          <CxInputNumber.Large
-            min={0}
-            precision={0}
-            placeholder={t('system.permission.sort_order_placeholder')}
-          />
-        </CxFormItem>
-      </CxForm>
-    </CxModal>
-  )
-})
-
-export default SubmitModal