cx-chat 0.0.1

package/src/views/page-system/menu/index.tsx

@@ -0,0 +1,410 @@
+import { deleteMenuAPI, getMenuTreeAPI } from '@/api/system/menu'
+import { useMenu } from '@/contexts/MenuContext'
+import { useToast } from '@/contexts/ToastContext'
+import type { MenuTreeItem } from '@/types/menu'
+import { parseMenuNameJson } from '@/utils/menuI18n'
+import { getIconComponent } from '@/utils/routeConfig'
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import {
+  CxButton,
+  CxForm,
+  CxFormItem,
+  CxInput,
+  CxInputNumber,
+  CxSwitch,
+  CxTreeSelect,
+} from '@cx-ui'
+import { Form } from 'antd'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAuth } from '@/contexts/AuthContext'
+import {
+  buildMenuFormRules,
+  resolveMenuSubmitLevel,
+  useMenuFormSubmit,
+} from './components/menuFormShared'
+import './index.less'
+import IconModal from './modal/icon-modal'
+import SubmitModal from './modal/submit-modal'
+
+/** 列表页标题区：菜单管理、管理系统菜单配置、菜单列表、新增菜单 */
+const useListPageConfig = createListPageConfig({
+  treeAPI: getMenuTreeAPI,
+  deleteAPI: deleteMenuAPI,
+  pageInfo: {
+    title: 'system.menu.page_title',
+    subTitle: 'system.menu.page_subtitle',
+  },
+  tree: {
+    title: 'system.menu.tree_list',
+    fieldNames: {
+      id: 'id',
+      label: 'title',
+      children: 'children',
+    },
+    autoSearch: false,
+    onSelect: () => {
+    },
+  },
+  submitAction: {
+    permission: 'menu:add',
+    submitType: 'modal',
+    labelKey: 'system.menu.add',
+  },
+})
+
+function IndexView() {
+  const {t, i18n} = useTranslation()
+  const { hasPermission } = useAuth()
+  const canEditMenu = hasPermission('menu:edit')
+  const canDeleteMenu = hasPermission('menu:delete')
+  const {refreshMenus} = useMenu()
+  const {showToast} = useToast()
+  const basePageConfig = useListPageConfig()
+  const [treeReloadSignal, setTreeReloadSignal] = useState(0)
+  const [listPageViewRefreshKey, setListPageViewRefreshKey] = useState(0)
+  const pageConfig = {...basePageConfig, treeReloadSignal}
+  const modalRef = React.useRef<any>(null)
+  /** 与 ListPageView 当前渲染的树同源，避免依赖 pageConfig.treeContext 的 useEffect 滞后 */
+  const treeDataRef = React.useRef<MenuTreeItem[]>([])
+  const [selectedMenu, setSelectedMenu] = useState<MenuTreeItem | null>(null)
+  const [iconModalOpen, setIconModalOpen] = useState(false)
+  /** 菜单层级不注册 Form，避免隐藏表单项；随树选中 / 父级变更更新 */
+  const [menuLevel, setMenuLevel] = useState(0)
+  const [form] = Form.useForm()
+  const menuRules = useMemo(() => buildMenuFormRules(), [i18n.language])
+  const {submitMenuForm, submitting} = useMenuFormSubmit()
+
+  pageConfig.tree!.onSelect = (node: MenuTreeItem) => {
+    setSelectedMenu(node)
+    const parsedTitle = parseMenuNameJson(node.title ?? '')
+    setMenuLevel(Number(node.level ?? 0))
+    form.setFieldsValue({
+      parentId: node.parentId && node.parentId !== '0' ? node.parentId : undefined,
+      code: node.code ?? '',
+      titleZh: parsedTitle?.zh ?? '',
+      titleEn: parsedTitle?.en ?? '',
+      description: node.description ?? '',
+      path: node.path ?? '',
+      component: node.component ?? '',
+      icon: node.icon ?? '',
+      sortOrder: node.sortOrder ?? 0,
+      status: Number(node.status ?? 1),
+      fullDisplay: Number(node.fullDisplay ?? 0),
+    })
+  }
+
+  const getNodeLabel = (node: MenuTreeItem): string => {
+    const parsed = parseMenuNameJson(node.title ?? '')
+    return parsed?.zh || parsed?.en || node.title || node.code || String(node.id)
+  }
+
+  const collectNodeAndDescendantIds = (node?: MenuTreeItem | null): Set<string> => {
+    const ids = new Set<string>()
+    const walk = (current?: MenuTreeItem) => {
+      if (!current?.id) return
+      ids.add(String(current.id))
+      ;(current.children || []).forEach((child) => walk(child))
+    }
+    if (node) walk(node)
+    return ids
+  }
+
+  const toParentTreeOptions = (
+    nodes: MenuTreeItem[] = [],
+    blockedIds: Set<string>,
+    depth = 0,
+  ): any[] =>
+    (nodes || [])
+      .filter((node) => {
+        if (blockedIds.has(String(node.id))) return false
+        const levelNum = Number(node.level)
+        const effectiveLevel = Number.isFinite(levelNum) ? levelNum : depth
+        // 父级仅一级、二级（不含三级）；自己由 blockedIds 排除，二级兄弟可互选
+        return effectiveLevel <= 1
+      })
+      .map((node) => ({
+        title: getNodeLabel(node),
+        value: node.id,
+        key: node.id,
+        children: toParentTreeOptions(node.children || [], blockedIds, depth + 1),
+      }))
+
+  const watchedIcon = Form.useWatch('icon', form)
+  const IconPreview = getIconComponent(
+    watchedIcon ? String(watchedIcon) : undefined,
+  )
+  const showRouteFields = menuLevel >= 2
+  const showFullDisplayField = menuLevel === 1
+
+  const handleAddSibling = () => {
+    const selectedNode = (pageConfig as any).treeContext?.selectedNode as MenuTreeItem | undefined
+    if (!selectedNode) {
+      showToast(String(t('system.menu.select_node_first')), 'warning')
+      return
+    }
+    const parentId = selectedNode.parentId || '0'
+    modalRef.current?.open({
+      opeType: 'add',
+      parentId,
+    })
+  }
+
+  const handleAddChild = () => {
+    const selectedNode = (pageConfig as any).treeContext?.selectedNode
+    if (!selectedNode) {
+      showToast(String(t('system.menu.select_node_first')), 'warning')
+      return
+    }
+    const selectedLevel = Number((selectedNode as MenuTreeItem).level ?? 0)
+    if (selectedLevel >= 2) {
+      showToast(String(t('system.menu.max_three_level_hint')), 'warning')
+      return
+    }
+    modalRef.current?.open({
+      opeType: 'add',
+      parentId: selectedNode.id,
+    })
+  }
+
+  const handleAddTopLevel = () => {
+    modalRef.current?.open({
+      opeType: 'add',
+    })
+  }
+
+  pageConfig.afterDelete = async () => {
+    setTreeReloadSignal((n) => n + 1)
+    setListPageViewRefreshKey((n) => n + 1)
+    await refreshMenus()
+    setSelectedMenu(null)
+    setMenuLevel(0)
+    form.resetFields()
+  }
+
+  const onSubmit = async () => {
+    if (!selectedMenu?.id) return
+    await submitMenuForm({
+      opeType: 'edit',
+      form,
+      getLevel: () => menuLevel,
+      existingMenu: selectedMenu,
+      onSuccess: async () => {
+        setTreeReloadSignal((n) => n + 1)
+        await refreshMenus()
+      },
+    })
+  }
+
+  return (
+    <div className="menu-page h-full min-h-0 flex flex-col overflow-hidden">
+      <ListPageView
+        key={`menu-list-${listPageViewRefreshKey}`}
+        pageConfig={pageConfig}
+        headerActions={({tree}) => {
+          const canAddMenu = hasPermission('menu:add')
+          const treeDataLoaded = !!tree?.treeDataLoaded
+          const hasMenuData = treeDataLoaded && (tree?.treeData?.length ?? 0) > 0
+          const selectedNode = tree?.selectedNode as MenuTreeItem | undefined
+          const selectedLevel = Number(selectedNode?.level ?? 0)
+          const disableAddSibling = !selectedNode
+          const disableAddChild = !selectedNode || selectedLevel >= 2
+          return (
+            <>
+              {treeDataLoaded && !hasMenuData && (
+                <CxButton.Add disabled={!canAddMenu} onClick={handleAddTopLevel}>
+                  {t('system.menu.add_top_level')}
+                </CxButton.Add>
+              )}
+              {treeDataLoaded && hasMenuData && (
+                <CxButton.Add
+                  disabled={!canAddMenu || disableAddSibling}
+                  onClick={handleAddSibling}
+                >
+                  {t('system.menu.add_sibling')}
+                </CxButton.Add>
+              )}
+              {treeDataLoaded && hasMenuData && (
+                <CxButton.Add
+                  disabled={!canAddMenu || disableAddChild}
+                  onClick={handleAddChild}
+                >
+                  {t('system.menu.add_child')}
+                </CxButton.Add>
+              )}
+            </>
+          )
+        }}
+        renderList={(ctx) => {
+          const treeDataForParent = (ctx.tree?.treeData || []) as MenuTreeItem[]
+          treeDataRef.current = treeDataForParent
+          const blockedIds = collectNodeAndDescendantIds(selectedMenu)
+          const parentTreeOptions = toParentTreeOptions(treeDataForParent, blockedIds)
+          if (!selectedMenu?.id) {
+            return (
+              <div className="flex items-center justify-center h-full text-gray-400">
+                <p>{t('system.menu.select_or_add_hint')}</p>
+              </div>
+            )
+          }
+
+          return (
+            <div className="h-full min-h-0 flex flex-col">
+              {/* 编辑菜单 */}
+              <h3 className="text-lg font-semibold px-4 pt-4">{t('system.menu.edit')}</h3>
+
+              <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
+                <CxForm
+                  form={form}
+                  rules={menuRules}
+                  layout="horizontal"
+                  labelCol={{flex: '132px'}}
+                  wrapperCol={{flex: '1'}}
+                  labelAlign="right"
+                  colon={false}
+                  className="menu-page__side-form w-full max-w-3xl [&_.ant-form-item]:mb-3"
+                >
+                  {/* 父级菜单（可空，空则为顶级） */}
+                  <CxFormItem label={t('system.menu.parent_menu')} name="parentId">
+                    <CxTreeSelect
+                      treeData={parentTreeOptions}
+                      placeholder={t('system.menu.parent_menu_placeholder')}
+                      allowClear
+                      treeDefaultExpandAll
+                      treeNodeFilterProp="title"
+                      onChange={(value) => {
+                        const pid =
+                          value !== undefined && value !== null && value !== ''
+                            ? String(value)
+                            : undefined
+                        const lvl = resolveMenuSubmitLevel(
+                          pid !== undefined ? {parentId: pid} : {},
+                          treeDataForParent,
+                        )
+                        setMenuLevel(lvl)
+                      }}
+                    />
+                  </CxFormItem>
+
+                  {/* 菜单编码 */}
+                  <CxFormItem label={t('system.menu.code')} name="code">
+                    <CxInput.Large placeholder={t('system.menu.code_placeholder')}/>
+                  </CxFormItem>
+
+                  {/* 菜单名称（中文） */}
+                  <CxFormItem label={t('system.menu.title_zh_label')} name="titleZh">
+                    <CxInput.Large placeholder={t('system.menu.title_placeholder_zh')}/>
+                  </CxFormItem>
+
+                  {/* 菜单名称（英文） */}
+                  <CxFormItem label={t('system.menu.title_en_label')} name="titleEn">
+                    <CxInput.Large placeholder={t('system.menu.title_placeholder_en')}/>
+                  </CxFormItem>
+                  <CxFormItem label={t('system.menu.icon')}>
+                    <div className="menu-icon-field">
+                      <CxFormItem name="icon" noStyle>
+                        <CxInput.Large
+                          placeholder={t('system.menu.icon_placeholder')}
+                          suffix={
+                            <span className="menu-icon-input__suffix" aria-hidden>
+                              {IconPreview ? <IconPreview size={16}/> : null}
+                            </span>
+                          }
+                        />
+                      </CxFormItem>
+                      <CxButton type="default" height={42} onClick={() => setIconModalOpen(true)}>
+                        {t('system.menu.pick_icon')}
+                      </CxButton>
+                    </div>
+                  </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.menu.sort_order_placeholder')}/>
+                  </CxFormItem>
+                  {showRouteFields && (
+                    <>
+                      {/* 访问路径 */}
+                      <CxFormItem label={t('system.menu.path')} name="path">
+                        <CxInput.Large placeholder={t('system.menu.path_placeholder')}/>
+                      </CxFormItem>
+
+                      {/* 组件路径 */}
+                      <CxFormItem label={t('system.menu.component')} name="component">
+                        <CxInput.Large placeholder={t('system.menu.component_placeholder')}/>
+                      </CxFormItem>
+                    </>
+                  )}
+
+                  {showFullDisplayField && (
+                    <>
+                      <CxFormItem
+                        label={t('system.menu.full_display')}
+                        name="fullDisplay"
+                        valuePropName="checked"
+                        getValueFromEvent={(checked: boolean) => (checked ? 1 : 0)}
+                        getValueProps={(v: unknown) => ({checked: Number(v) === 1})}
+                      >
+                        <CxSwitch/>
+                      </CxFormItem>
+                    </>
+                  )}
+                  <CxFormItem
+                    label={t('system.menu.enable_switch')}
+                    name="status"
+                    valuePropName="checked"
+                    getValueFromEvent={(checked: boolean) => (checked ? 1 : 0)}
+                    getValueProps={(v: unknown) => ({checked: Number(v) === 1})}
+                  >
+                    <CxSwitch/>
+                  </CxFormItem>
+                </CxForm>
+              </div>
+
+              <div className="shrink-0 px-4 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center gap-3">
+                {/* 保存 */}
+                <CxButton.Save
+                  className="!mb-0"
+                  loading={submitting}
+                  disabled={submitting || !canEditMenu}
+                  onClick={onSubmit}
+                />
+                {/* 删除 */}
+                <CxButton.Delete
+                  className="!mb-0"
+                  icon={null}
+                  disabled={!canDeleteMenu}
+                  onClick={() => pageConfig.onDelete?.(selectedMenu as MenuTreeItem)}
+                />
+              </div>
+            </div>
+          )
+        }}
+      />
+      <SubmitModal ref={modalRef} onOk={async () => {
+        try {
+          setTreeReloadSignal((n) => n + 1)
+          await refreshMenus()
+        } catch (error) {
+          console.error('保存失败:', error)
+        }
+      }}
+      onCancel={() => {
+        // 取消时的清理逻辑(可选)
+      }}
+      />
+      <IconModal
+        isOpen={iconModalOpen}
+        onClose={() => setIconModalOpen(false)}
+        selectedIcon={watchedIcon ? String(watchedIcon) : undefined}
+        onOk={(iconName) => {
+          form.setFieldsValue({ icon: iconName })
+          setIconModalOpen(false)
+        }}
+      />
+    </div>
+  )
+}
+
+export default IndexView

package/src/views/page-system/menu/modal/icon-modal.less

@@ -0,0 +1,51 @@
+.menu-icon-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .cx-input {
+    flex: 1;
+  }
+
+  /** 无选中图标时也占位，避免 suffix 有无导致输入区宽度跳动 */
+  .menu-icon-input__suffix {
+    display: inline-flex;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.menu-icon-picker-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.menu-icon-picker-modal__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 10px;
+  max-height: 380px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.menu-icon-picker-modal__item {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.menu-icon-picker-modal__item-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.menu-icon-picker-modal__empty {
+  text-align: center;
+  color: #9ca3af;
+  padding: 12px 0;
+}

package/src/views/page-system/menu/modal/icon-modal.tsx

@@ -0,0 +1,87 @@
+import { CxButton, CxInput, CxModal } from '@cx-ui'
+import { getIconComponent, iconMap } from '@/utils/routeConfig'
+import { Search } from 'lucide-react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import './icon-modal.less'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  /** 当前表单里的图标（打开弹窗时作为初始选中，取消不关表单） */
+  selectedIcon?: string
+  /** 点击「确定」时再写入表单等；参数为当前在弹窗中选中的图标名 */
+  onOk: (iconName: string) => void
+}
+
+export default function IconModal({
+  isOpen,
+  onClose,
+  onOk,
+  selectedIcon,
+}: Props) {
+  const { t } = useTranslation()
+  const [keyword, setKeyword] = useState('')
+  /** 弹窗内预览选中，仅确定时交给 onOk */
+  const [pendingIcon, setPendingIcon] = useState('')
+  const iconNames = useMemo(() => Object.keys(iconMap).sort(), [])
+
+  useEffect(() => {
+    if (isOpen) {
+      setPendingIcon(selectedIcon ?? '')
+      setKeyword('')
+    }
+  }, [isOpen, selectedIcon])
+
+  const filteredIconNames = useMemo(() => {
+    const q = keyword.trim().toLowerCase()
+    if (!q) return iconNames
+    return iconNames.filter((name) => name.toLowerCase().includes(q))
+  }, [iconNames, keyword])
+
+  return (
+    <CxModal
+      title={t('system.menu.icon_picker_title')}
+      isOpen={isOpen}
+      onClose={onClose}
+      onOk={() => onOk(pendingIcon)}
+      opeType="select"
+      modalConfig={{ width: 760 }}
+    >
+      <div className="menu-icon-picker-modal">
+        <CxInput
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          placeholder={t('system.menu.icon_picker_search_placeholder')}
+          prefix={<Search size={16} />}
+        />
+
+        <div className="menu-icon-picker-modal__grid">
+          {filteredIconNames.map((iconName) => {
+            const Icon = getIconComponent(iconName)
+            const active = pendingIcon === iconName
+            return (
+              <CxButton
+                key={iconName}
+                type={active ? 'primary' : 'default'}
+                className="menu-icon-picker-modal__item"
+                onClick={() => setPendingIcon(iconName)}
+              >
+                <span className="menu-icon-picker-modal__item-inner">
+                  {Icon ? <Icon size={18} /> : null}
+                  <span>{iconName}</span>
+                </span>
+              </CxButton>
+            )
+          })}
+        </div>
+
+        {filteredIconNames.length === 0 && (
+          <div className="menu-icon-picker-modal__empty">
+            {t('system.menu.icon_picker_empty')}
+          </div>
+        )}
+      </div>
+    </CxModal>
+  )
+}