<template>
  <div class="knowledge-file-tree" ref="treeContainerRef" @click.self="clearSelection" @keydown.esc="clearSelection" tabindex="-1"
    @mousedown.capture="onDragSelectStart" @dragstart.capture="onContainerDragStart">
    <div v-if="files && files.length > 0" class="file-tree-list">
      <file-tree-node
        v-for="node in files"
        :key="node.id"
        :node="node"
        :level="0"
        :current-file-folder-path="currentFileFolderPath"
        :current-file-id="currentFileId"
        :selected-folder-id="selectedFolderId"
        :selected-node-ids="selectedNodeIds"
        @file-drag="handleFileDrag"
        @file-double-click="handleFileDoubleClick"
        @folder-context-menu="handleFolderContextMenu"
        @file-context-menu="handleFileContextMenu"
        @new-folder="handleNewFolderClick"
        @create-file="handleNewFileClick"
        @search-file="handleSearchFileClick"
        @node-click="handleNodeClick"
        @upload-file="handleUploadFileComplete"
        @upload-files="handleUploadFiles"
        @file-move="handleFileMove"
        @load-children="(folderId) => emit('load-children', folderId)"
      />
    </div>
    <div v-else class="empty-tree">
      <i class="fas fa-folder-open empty-icon"></i>
      <p class="empty-text">暂无文件</p>
    </div>

    <!-- 文件夹右键菜单 -->
    <div
      v-show="contextMenuVisible && contextMenuType === 'folder'"
      :style="contextMenuStyle"
      class="context-menu"
      @click.stop
    >
      <div class="context-menu-item" @click="handleNewFolder">
        <i class="el-icon-folder-add"></i>
        <span>{{ t("KnowledgeBase.newFolder") }}</span>
      </div>
      <div class="context-menu-divider"></div>
      <div class="context-menu-item" @click="handleNewFile">
        <i class="el-icon-document-add"></i>
        <span>{{ t("KnowledgeBase.newFile") }}</span>
      </div>
      <div class="context-menu-divider" v-if="!isRootFolder"></div>
      <div
        class="context-menu-item"
        @click="handleRenameFolder"
        v-if="!isRootFolder"
      >
        <span style="margin-left: 24px">{{
          t("KnowledgeBase.renameFolder")
        }}</span>
      </div>
      <div class="context-menu-divider" v-if="!isRootFolder"></div>
      <div
        class="context-menu-item danger"
        @click="handleDeleteFolder"
        v-if="!isRootFolder"
      >
        <i class="el-icon-delete"></i>
        <span>{{ t("KnowledgeBase.deleteFolder") }}</span>
      </div>
      <!-- 多选批量操作（右键菜单中，仅当有多选时显示） -->
      <template v-if="selectedNodeIds.size > 1">
        <div class="context-menu-divider"></div>
        <div class="context-menu-item" @click="openBatchMove">
          <el-icon><Rank /></el-icon>
          <span>移动选中项（{{ selectedNodeIds.size }}个）</span>
        </div>
        <div class="context-menu-item danger" @click="handleBatchDelete">
          <el-icon><Delete /></el-icon>
          <span>删除选中项（{{ selectedNodeIds.size }}个）</span>
        </div>
      </template>
    </div>

    <!-- 文件右键菜单 -->
    <div
      v-show="contextMenuVisible && contextMenuType === 'file'"
      :style="contextMenuStyle"
      class="context-menu"
      @click.stop
    >
      <div class="context-menu-item" @click="handleEditFile">
        <el-icon><Edit /></el-icon>
        <span>{{ t("KnowledgeBase.edit") || "编辑" }}</span>
      </div>
      <div class="context-menu-item" @click="handleRenameFile">
        <el-icon><Edit /></el-icon>
        <span>{{ t("KnowledgeBase.rename") || "重命名" }}</span>
      </div>
      <div class="context-menu-item" @click="handleDownloadFile">
        <el-icon><Download /></el-icon>
        <span>{{ t("KnowledgeBase.download") || "下载" }}</span>
      </div>
      <div class="context-menu-item danger" @click="handleDeleteFile">
        <el-icon><Delete /></el-icon>
        <span>{{ t("KnowledgeBase.delete") || "删除" }}</span>
      </div>
      <!-- 多选批量操作（右键菜单中，仅当有多选时显示） -->
      <template v-if="selectedNodeIds.size > 1">
        <div class="context-menu-divider"></div>
        <div class="context-menu-item" @click="openBatchMove">
          <el-icon><Rank /></el-icon>
          <span>移动选中项（{{ selectedNodeIds.size }}个）</span>
        </div>
        <div class="context-menu-item danger" @click="handleBatchDelete">
          <el-icon><Delete /></el-icon>
          <span>删除选中项（{{ selectedNodeIds.size }}个）</span>
        </div>
      </template>
    </div>

    <!-- 多选浮动操作栏 -->
    <transition name="selection-toolbar-slide">
      <div v-if="selectedNodeIds.size > 0" class="selection-toolbar">
        <span class="selection-toolbar-label">已选 {{ selectedNodeIds.size }} 项</span>
        <div class="selection-toolbar-actions">
          <button class="selection-toolbar-btn" @click="openBatchMove">移动</button>
          <button class="selection-toolbar-btn danger" @click="handleBatchDelete">删除</button>
          <button class="selection-toolbar-btn" @click="clearSelection">取消</button>
        </div>
      </div>
    </transition>

    <!-- 文件夹选择对话框 -->
    <FolderPickerDialog
      v-model:visible="folderPickerVisible"
      :exclude-ids="batchMoveExcludeIds"
      @confirm="handleBatchMoveConfirm"
      @cancel="folderPickerVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from "vue";
import { useI18n } from "vue-i18n";
import { Edit, Download, Delete, Check, Rank } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import FileTreeNode from "./FileTreeNode.vue";
import FolderPickerDialog from "@/components/common/FolderPickerDialog.vue";
import { batchDeleteFiles, moveFile, moveFolder } from "@/api/files";
import type { CSSProperties } from "vue";

const { t } = useI18n();

interface FileNode {
  id: string | number;
  name: string;
  type: "file" | "folder";
  path?: string;
  level: number;
  parentId?: string | number;
  size?: string;
  fileType?: string;
  modified?: string;
  originalName?: string;
  fileCount?: number;
  folderCount?: number;
  totalSize?: number;
  children?: FileNode[];
}

interface Props {
  files: FileNode[];
  currentFileFolderPath?: (string | number)[];
  currentFileId?: string | number;
  selectedFolderId?: string | number | null;
}

interface Emits {
  (e: "file-drag", file: FileNode): void;
  (e: "file-double-click", file: FileNode): void;
  (e: "create-folder", parent: FileNode | null): void;
  (e: "create-file", parent: FileNode | null): void;
  (e: "rename-folder", folder: FileNode): void;
  (e: "delete-folder", folderId: string | number): void;
  (e: "edit-file", file: FileNode): void;
  (e: "rename-file", file: FileNode): void;
  (e: "download-file", file: FileNode): void;
  (e: "delete-file", fileId: string | number): void;
  (e: "new-folder"): void;
  (e: "new-file"): void;
  (e: "search-file", keyword: string): void;
  (e: "folder-selected", folderId: string | number | null): void;
  (e: "upload-file"): void;
  (e: "upload-files", files: File[], folderId: string | number | null): void;
  (e: "file-move", node: FileNode, targetFolderId: string | number | null): void;
  (e: "load-children", folderId: string | number): void;
  (e: "batch-deleted"): void;
  (e: "batch-moved"): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 树容器引用
const treeContainerRef = ref<HTMLElement | null>(null);

// ==================== 多选状态 ====================
const selectedNodeIds = ref<Set<string>>(new Set());
const lastClickedNodeId = ref<string | null>(null);

// 清除全部选中
const clearSelection = () => {
  if (selectedNodeIds.value.size > 0) {
    selectedNodeIds.value = new Set();
  }
  lastClickedNodeId.value = null;
};

// ==================== 拖拽多选 ====================
const isDragSelecting = ref(false);
const dragStartNodeId = ref<string | null>(null);
const justFinishedDragSelect = ref(false);

// 从鼠标坐标获取最近的节点 ID（通过 elementFromPoint 支持 document 级事件）
const getNodeIdFromPoint = (x: number, y: number): string | null => {
  const el = document.elementFromPoint(x, y);
  if (!el) return null;
  const nodeEl = (el as HTMLElement).closest?.(".node-content:not(.is-my-documents-root)");
  if (!nodeEl) return null;
  return nodeEl.getAttribute("data-file-id") || nodeEl.getAttribute("data-folder-id");
};

// 拦截容器内原生 dragstart，拖选模式下阻止原生拖拽
const onContainerDragStart = (event: DragEvent) => {
  if (dragStartNodeId.value) {
    event.preventDefault();
    event.stopPropagation();
  }
};

const onDocumentMouseMove = (event: MouseEvent) => {
  if (!dragStartNodeId.value || event.buttons !== 1) return;

  const currentNodeId = getNodeIdFromPoint(event.clientX, event.clientY);

  // 未移到不同节点时不进入拖选
  if (!isDragSelecting.value && (!currentNodeId || currentNodeId === dragStartNodeId.value)) {
    return;
  }

  // 进入拖选模式
  if (!isDragSelecting.value) {
    isDragSelecting.value = true;
    document.body.style.userSelect = "none";
    window.getSelection()?.removeAllRanges();
  }

  if (!currentNodeId) return;

  const visibleIds = getVisibleNodeIds();
  const startIdx = visibleIds.indexOf(dragStartNodeId.value);
  const currIdx = visibleIds.indexOf(currentNodeId);

  if (startIdx !== -1 && currIdx !== -1) {
    const start = Math.min(startIdx, currIdx);
    const end = Math.max(startIdx, currIdx);
    selectedNodeIds.value = new Set(visibleIds.slice(start, end + 1));
  }
};

const onDocumentMouseUp = () => {
  if (isDragSelecting.value) {
    document.body.style.userSelect = "";
    justFinishedDragSelect.value = true;
    if (dragStartNodeId.value) {
      lastClickedNodeId.value = dragStartNodeId.value;
    }
  }
  isDragSelecting.value = false;
  dragStartNodeId.value = null;
};

const onDragSelectStart = (event: MouseEvent) => {
  // 仅在按住 Shift 键时允许拖拽多选
  if (event.button !== 0 || !event.shiftKey) return;

  const target = event.target as HTMLElement;
  const nodeEl = target.closest(".node-content");
  if (!nodeEl || nodeEl.classList.contains("is-my-documents-root")) return;
  const nodeId = nodeEl.getAttribute("data-file-id") || nodeEl.getAttribute("data-folder-id");
  if (!nodeId) return;
  dragStartNodeId.value = String(nodeId);
  isDragSelecting.value = false;
};

// 通过 DOM 获取可见节点 ID 列表（用于 Shift+Click 范围选择）
const getVisibleNodeIds = (): string[] => {
  const container = treeContainerRef.value;
  if (!container) return [];

  const elements = container.querySelectorAll(
    ".node-content:not(.is-my-documents-root)"
  );
  const ids: string[] = [];

  elements.forEach((el) => {
    const fileId = el.getAttribute("data-file-id");
    const folderId = el.getAttribute("data-folder-id");
    if (fileId) ids.push(fileId);
    else if (folderId) ids.push(folderId);
  });

  return ids;
};

// 递归查找节点
const findNodeById = (nodes: FileNode[], id: string): FileNode | null => {
  for (const node of nodes) {
    if (String(node.id) === id) return node;
    if (node.children) {
      const found = findNodeById(node.children, id);
      if (found) return found;
    }
  }
  return null;
};

// 处理节点点击（多选逻辑）
const handleNodeClick = (node: FileNode, event: MouseEvent) => {
  // 拖选刚结束，跳过本次点击
  if (justFinishedDragSelect.value) {
    justFinishedDragSelect.value = false;
    return;
  }
  const nodeIdStr = String(node.id);

  if (event.shiftKey && lastClickedNodeId.value) {
    // Shift+Click：范围选择
    event.preventDefault();
    window.getSelection()?.removeAllRanges();

    const visibleIds = getVisibleNodeIds();
    const lastIdx = visibleIds.indexOf(lastClickedNodeId.value);
    const currIdx = visibleIds.indexOf(nodeIdStr);

    if (lastIdx !== -1 && currIdx !== -1) {
      const start = Math.min(lastIdx, currIdx);
      const end = Math.max(lastIdx, currIdx);
      selectedNodeIds.value = new Set(visibleIds.slice(start, end + 1));
    } else {
      selectedNodeIds.value = new Set([nodeIdStr]);
      lastClickedNodeId.value = nodeIdStr;
    }
  } else if (event.ctrlKey || event.metaKey) {
    // Ctrl/Cmd+Click：切换单个
    const newSet = new Set(selectedNodeIds.value);
    if (newSet.has(nodeIdStr)) {
      newSet.delete(nodeIdStr);
    } else {
      newSet.add(nodeIdStr);
    }
    selectedNodeIds.value = newSet;
    lastClickedNodeId.value = nodeIdStr;
  } else {
    // 普通点击：清除多选，执行单选导航
    selectedNodeIds.value = new Set();
    lastClickedNodeId.value = nodeIdStr;

    // 导航逻辑（原 FileTreeNode.handleClick 中的导航部分）
    if (node.type === "folder") {
      emit("folder-selected", node.id);
    } else {
      emit("folder-selected", null);
      window.dispatchEvent(
        new CustomEvent("file-click", { detail: { fileId: node.id } })
      );
    }
  }
};

// ==================== 批量操作 ====================

// 文件夹选择对话框
const folderPickerVisible = ref(false);

// 批量移动时排除的 ID（被移动的文件夹自身）
const batchMoveExcludeIds = computed(() => {
  const ids: string[] = [];
  selectedNodeIds.value.forEach((id) => {
    const node = findNodeById(props.files, id);
    if (node?.type === "folder") {
      ids.push(id);
    }
  });
  return ids;
});

// 打开移动对话框
const openBatchMove = () => {
  closeContextMenu();
  folderPickerVisible.value = true;
};

// 批量删除
const handleBatchDelete = async () => {
  closeContextMenu();

  if (selectedNodeIds.value.size === 0) return;

  try {
    await ElMessageBox.confirm(
      `确定删除选中的 ${selectedNodeIds.value.size} 个项目吗？此操作不可撤销。`,
      "批量删除",
      {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "el-button--danger",
      }
    );

    const ids = Array.from(selectedNodeIds.value);
    await batchDeleteFiles(ids);
    ElMessage.success("批量删除成功");
    clearSelection();
    emit("batch-deleted");
  } catch (err: any) {
    if (err !== "cancel") {
      console.error("批量删除失败:", err);
      ElMessage.error("批量删除失败");
    }
  }
};

// 批量移动确认
const handleBatchMoveConfirm = async (targetFolderId: string | number | null) => {
  if (selectedNodeIds.value.size === 0) return;

  const movePromises = Array.from(selectedNodeIds.value).map((id) => {
    const node = findNodeById(props.files, id);
    if (node?.type === "folder") {
      return moveFolder(id, targetFolderId);
    }
    return moveFile(id, targetFolderId);
  });

  const results = await Promise.allSettled(movePromises);
  const successCount = results.filter((r) => r.status === "fulfilled").length;
  const failCount = results.filter((r) => r.status === "rejected").length;

  if (failCount === 0) {
    ElMessage.success(`成功移动 ${successCount} 项`);
  } else if (successCount === 0) {
    ElMessage.error("移动失败");
  } else {
    ElMessage.warning(`${successCount} 项移动成功，${failCount} 项移动失败`);
  }

  clearSelection();
  emit("batch-moved");
};

// Esc 键清除选中
const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === "Escape" && selectedNodeIds.value.size > 0) {
    clearSelection();
  }
};

// ==================== 右键菜单 ====================
const contextMenuVisible = ref(false);
const contextMenuType = ref<"folder" | "file">("folder");
const contextMenuStyle = ref<CSSProperties>({
  position: "fixed" as const,
  top: "0px",
  left: "0px",
  zIndex: "1000",
});
const currentContextFolder = ref<FileNode | null>(null);
const currentContextFile = ref<FileNode | null>(null);

// 判断是否为根文件夹（在文件树的第一层）
const isRootFolder = computed(() => {
  if (!currentContextFolder.value || !props.files) return false;
  return props.files.some((node) => node.id === currentContextFolder.value?.id);
});

const handleFileDrag = (file: FileNode) => {
  emit("file-drag", file);
};

const handleFileDoubleClick = (file: FileNode) => {
  emit("file-double-click", file);
};

// 计算并显示右键菜单的通用函数
const showContextMenuAt = async (
  event: MouseEvent,
  type: "folder" | "file",
) => {
  // 计算菜单位置，确保不超出视窗
  const menuWidth = 180;
  const menuHeight = type === "folder" ? 300 : 200;
  const padding = 0;

  let top = event.clientY;
  let left = event.clientX;

  if (left + menuWidth > window.innerWidth) {
    left = event.clientX - menuWidth;
    if (left < padding) {
      left = window.innerWidth - menuWidth - padding;
    }
  }
  if (left < padding) {
    left = padding;
  }

  const spaceBelow = window.innerHeight - event.clientY - padding;
  const spaceAbove = event.clientY - padding;

  if (spaceBelow >= menuHeight) {
    top = event.clientY;
  } else if (spaceAbove >= menuHeight) {
    top = event.clientY - menuHeight;
  } else {
    if (spaceBelow > spaceAbove) {
      top = Math.max(event.clientY, window.innerHeight - menuHeight - padding);
    } else {
      top = Math.min(event.clientY - menuHeight, padding);
    }
  }

  if (top < padding) top = padding;
  if (top + menuHeight > window.innerHeight - padding) {
    top = window.innerHeight - menuHeight - padding;
  }

  contextMenuStyle.value = {
    position: "fixed",
    top: top + "px",
    left: left + "px",
    zIndex: "1000",
  };

  await nextTick();
  contextMenuType.value = type;
  contextMenuVisible.value = true;
};

// 处理文件夹右键菜单
const handleFolderContextMenu = async (event: MouseEvent, folder: FileNode) => {
  event.preventDefault();
  event.stopPropagation();

  currentContextFolder.value = folder;
  currentContextFile.value = null;

  await showContextMenuAt(event, "folder");
};

// 处理文件右键菜单
const handleFileContextMenu = async (event: MouseEvent, file: FileNode) => {
  event.preventDefault();
  event.stopPropagation();

  currentContextFile.value = file;
  currentContextFolder.value = null;

  await showContextMenuAt(event, "file");
};

// 关闭右键菜单
const closeContextMenu = () => {
  contextMenuVisible.value = false;
};

// 从右键菜单新建文件夹
const handleNewFolder = () => {
  emit("create-folder", currentContextFolder.value);
  closeContextMenu();
};

// 从右键菜单新建文件
const handleNewFile = () => {
  emit("create-file", currentContextFolder.value);
  closeContextMenu();
};

// 重命名文件夹
const handleRenameFolder = () => {
  if (currentContextFolder.value) {
    emit("rename-folder", currentContextFolder.value);
  }
  closeContextMenu();
};

// 删除文件夹
const handleDeleteFolder = () => {
  if (currentContextFolder.value) {
    emit("delete-folder", currentContextFolder.value.id);
  }
  closeContextMenu();
};

// 处理编辑文件
const handleEditFile = () => {
  if (currentContextFile.value) {
    emit("edit-file", currentContextFile.value);
  }
  closeContextMenu();
};

// 处理重命名文件
const handleRenameFile = () => {
  if (currentContextFile.value) {
    emit("rename-file", currentContextFile.value);
  }
  closeContextMenu();
};

// 处理下载文件
const handleDownloadFile = () => {
  if (currentContextFile.value) {
    emit("download-file", currentContextFile.value);
  }
  closeContextMenu();
};

// 处理删除文件
const handleDeleteFile = () => {
  if (currentContextFile.value) {
    emit("delete-file", currentContextFile.value.id);
  }
  closeContextMenu();
};

// 处理文件上传完成
const handleUploadFileComplete = () => {
  console.log("KnowledgeFileTree 收到 upload-file 事件，传递给父组件");
  emit("upload-file");
};

// 处理文件上传请求
const handleUploadFiles = (files: File[], folderId: string | number | null) => {
  console.log("KnowledgeFileTree 收到 upload-files 事件", files.length, "个文件，folderId:", folderId);
  emit("upload-files", files, folderId);
};

const handleFileMove = (node: FileNode, targetFolderId: string | number | null) => {
  console.log("KnowledgeFileTree 收到 file-move 事件", node.name, "->", targetFolderId);
  emit("file-move", node, targetFolderId);
};

// 处理我的文档操作按钮点击
const handleNewFolderClick = () => {
  emit("new-folder");
};

const handleNewFileClick = () => {
  emit("new-file");
};

const handleSearchFileClick = (keyword: string) => {
  emit("search-file", keyword);
};

onMounted(() => {
  document.addEventListener("click", closeContextMenu);
  document.addEventListener("keydown", handleKeyDown);
  document.addEventListener("mousemove", onDocumentMouseMove);
  document.addEventListener("mouseup", onDocumentMouseUp);
});

onBeforeUnmount(() => {
  document.removeEventListener("click", closeContextMenu);
  document.removeEventListener("keydown", handleKeyDown);
  document.removeEventListener("mousemove", onDocumentMouseMove);
  document.removeEventListener("mouseup", onDocumentMouseUp);
});
</script>

<style scoped lang="scss">
.knowledge-file-tree {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  outline: none; // 去掉 tabindex 产生的焦点边框
  position: relative;

  // 文件树列表占满剩余高度
  > .file-tree-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .empty-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--color-text-secondary);
    text-align: center;

    .empty-icon {
      font-size: 32px;
      margin-bottom: 12px;
      opacity: 0.5;
    }

    .empty-text {
      font-size: 14px;
      margin: 0;
    }
  }
}

// 右键菜单样式
.context-menu {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 0;
  z-index: 1000;
  min-width: 160px;
  max-width: 220px;
  max-height: 80vh;
  overflow-y: auto;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--color-text);
  font-size: 14px;
  transition: all 0.2s ease;

  &:hover {
    background: var(--color-hover);
    color: var(--color-primary);
  }

  &.danger {
    color: var(--color-danger);

    &:hover {
      background: rgba(255, 77, 79, 0.1);
      color: var(--color-danger);
    }
  }

  i {
    margin-right: 8px;
    font-size: 14px;
    width: 16px;
    text-align: center;
  }

  .el-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }
}

.context-menu-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

// 多选浮动操作栏
.selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.selection-toolbar-label {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 500;
  white-space: nowrap;
}

.selection-toolbar-actions {
  display: flex;
  gap: 4px;
}

.selection-toolbar-btn {
  padding: 3px 10px;
  font-size: 12px;
  line-height: 20px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;

  &:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  &.danger {
    color: var(--color-danger);
    border-color: var(--color-danger);

    &:hover {
      background: rgba(255, 77, 79, 0.08);
    }
  }
}

// 操作栏动画
.selection-toolbar-slide-enter-active,
.selection-toolbar-slide-leave-active {
  transition: all 0.2s ease;
}

.selection-toolbar-slide-enter-from,
.selection-toolbar-slide-leave-to {
  opacity: 0;
  transform: translateY(8px);
}
</style>