NapCatQQ/napcat.webui/src/components/file_manage/move_modal.tsx

import { Button } from '@heroui/button';
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
} from '@heroui/modal';
import { Spinner } from '@heroui/spinner';
import clsx from 'clsx';
import path from 'path-browserify';
import { useState } from 'react';
import { IoAdd, IoRemove } from 'react-icons/io5';

import FileManager from '@/controllers/file_manager';

interface MoveModalProps {
  isOpen: boolean
  moveTargetPath: string
  selectionInfo: string
  onClose: () => void
  onMove: () => void
  onSelect: (dir: string) => void // 新增回调
}

// 将 DirectoryTree 改为递归组件
// 新增 selectedPath 属性，用于标识当前选中的目录
function DirectoryTree ({
  basePath,
  onSelect,
  selectedPath,
}: {
  basePath: string
  onSelect: (dir: string) => void
  selectedPath?: string
}) {
  const [dirs, setDirs] = useState<string[]>([]);
  const [expanded, setExpanded] = useState(false);
  // 新增loading状态
  const [loading, setLoading] = useState(false);

  const fetchDirectories = async () => {
    try {
      // 直接使用 basePath 调用接口，移除 process.platform 判断
      const list = await FileManager.listDirectories(basePath);
      setDirs(list.map((item) => item.name));
    } catch (error) {
      // ...error handling...
    }
  };

  const handleToggle = async () => {
    if (!expanded) {
      setExpanded(true);
      setLoading(true);
      await fetchDirectories();
      setLoading(false);
    } else {
      setExpanded(false);
    }
  };

  const handleClick = () => {
    onSelect(basePath);
    handleToggle();
  };

  // 计算显示的名称
  const getDisplayName = () => {
    if (basePath === '/') return '/';
    if (/^[A-Z]:$/i.test(basePath)) return basePath;
    return path.basename(basePath);
  };

  // 更新 Button 的 variant 逻辑
  const isSeleted = selectedPath === basePath;
  const variant = isSeleted
    ? 'solid'
    : selectedPath && path.dirname(selectedPath) === basePath
      ? 'flat'
      : 'light';

  return (
    <div className='ml-4'>
      <Button
        onPress={handleClick}
        className='py-1 px-2 text-left justify-start min-w-0 min-h-0 h-auto text-sm rounded-md'
        size='sm'
        color='primary'
        variant={variant}
        startContent={
          <div
            className={clsx(
              'rounded-md',
              isSeleted ? 'bg-primary-600' : 'bg-primary-50'
            )}
          >
            {expanded ? <IoRemove /> : <IoAdd />}
          </div>
        }
      >
        {getDisplayName()}
      </Button>
      {expanded && (
        <div>
          {loading
            ? (
              <div className='flex py-1 px-8'>
                <Spinner size='sm' color='primary' />
              </div>
            )
            : (
              dirs.map((dirName) => {
                const childPath =
                basePath === '/' && /^[A-Z]:$/i.test(dirName)
                  ? dirName
                  : path.join(basePath, dirName);
                return (
                  <DirectoryTree
                    key={childPath}
                    basePath={childPath}
                    onSelect={onSelect}
                    selectedPath={selectedPath}
                  />
                );
              })
            )}
        </div>
      )}
    </div>
  );
}

export default function MoveModal ({
  isOpen,
  moveTargetPath,
  selectionInfo,
  onClose,
  onMove,
  onSelect,
}: MoveModalProps) {
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalContent>
        <ModalHeader>选择目标目录</ModalHeader>
        <ModalBody>
          <div className='rounded-md p-2 border border-default-300 overflow-auto max-h-60'>
            <DirectoryTree
              basePath='/'
              onSelect={onSelect}
              selectedPath={moveTargetPath}
            />
          </div>
          <p className='text-sm text-default-500 mt-2'>
            当前选择：{moveTargetPath || '未选择'}
          </p>
          <p className='text-sm text-default-500'>移动项：{selectionInfo}</p>
        </ModalBody>
        <ModalFooter>
          <Button color='primary' variant='flat' onPress={onClose}>
            取消
          </Button>
          <Button color='primary' onPress={onMove}>
            确定
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}