cx-chat 0.0.2 → 0.0.3

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

@@ -1,410 +0,0 @@
-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

@@ -1,51 +0,0 @@
-.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

@@ -1,87 +0,0 @@
-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>
-  )
-}