<template>
  <div class="workspace-chat-container">
    <!-- 聊天头部 -->
    <div class="chat-header">
      <div class="header-title">
        <i class="fas fa-robot"></i>
        <span>AI 助手</span>
      </div>
      <div class="header-actions">
        <!-- 模型选择 -->
        <el-select
          v-model="currentModel"
          size="small"
          placeholder="选择模型"
          style="width: 150px"
        >
          <el-option
            v-for="model in availableModels"
            :key="model.value"
            :label="model.label"
            :value="model.value"
          />
        </el-select>
        <button class="header-btn" @click="handleNewChat" title="新建对话">
          <i class="fas fa-plus"></i>
        </button>
        <button class="header-btn" @click="handleClose" title="关闭">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>

    <!-- 聊天消息区域 -->
    <div class="chat-messages" ref="messagesContainer">
      <div v-if="messages.length === 0" class="empty-state">
        <i class="fas fa-comment-dots"></i>
        <p>开始与 AI 助手对话</p>
        <div class="quick-actions">
          <div
            v-for="(action, index) in quickActions"
            :key="index"
            class="quick-action-item"
            @click="handleQuickAction(action.text)"
          >
            <i :class="action.icon"></i>
            <span>{{ action.text }}</span>
          </div>
        </div>
      </div>

      <!-- 消息列表 -->
      <div
        v-for="(message, index) in messages"
        :key="index"
        class="message-item"
        :class="message.role"
      >
        <div class="message-avatar">
          <i
            :class="message.role === 'user' ? 'fas fa-user' : 'fas fa-robot'"
          ></i>
        </div>
        <div class="message-content">
          <!-- 用户消息 -->
          <div v-if="message.role === 'user'" class="message-text user-message">
            <div class="message-body">{{ message.content }}</div>
            <div class="message-actions">
              <button
                class="action-btn"
                @click="handleCopy(message.content)"
                title="复制"
              >
                <i class="fas fa-copy"></i>
              </button>
            </div>
          </div>

          <!-- AI 消息 - 使用 MarkdownPreview 组件 -->
          <MarkdownPreview
            v-else
            :content="message.content"
            :is-streaming="message.isStreaming"
            :model="currentModel"
          />
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="isLoading && !isStreaming" class="loading-indicator">
        <div class="typing-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="loading-text">AI 正在思考...</span>
      </div>
    </div>

    <!-- 输入区域 -->
    <div 
      class="chat-input-area"
      @dragenter.prevent="handleDragEnter"
      @dragleave.prevent="handleDragLeave"
      @dragover.prevent="handleDragOver"
      @drop.prevent="handleDrop"
    >
      <!-- 拖拽提示遮罩 -->
      <div v-show="isDragOver" class="drag-overlay">
        <div class="drag-content">
          <i class="fas fa-upload"></i>
          <span>拖拽文件到此处</span>
        </div>
      </div>
      <div class="input-wrapper">
        <textarea
          v-model="userInput"
          ref="inputTextarea"
          class="chat-textarea"
          placeholder="输入消息... (Enter 发送, Shift+Enter 换行)"
          rows="1"
          maxlength="4000"
          :disabled="isLoading"
          @keydown="handleKeydown"
          @input="adjustTextareaHeight"
        ></textarea>
        <button
          class="send-btn"
          :disabled="!canSend"
          @click="handleSend"
          :title="isLoading ? '发送中...' : '发送消息'"
        >
          <i
            :class="isLoading ? 'fas fa-spinner fa-spin' : 'fas fa-paper-plane'"
          ></i>
        </button>
      </div>
      <!-- 字数限制提示 -->
      <div v-if="userInput.length >= 3800" class="limit-tip" :class="{ 'at-limit': userInput.length >= 4000 }">
        <i class="fas fa-exclamation-triangle"></i>
        <span v-if="userInput.length >= 4000">字数已达上限 4000</span>
        <span v-else>接近字数限制 (当前: {{ userInput.length }}/4000)</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, watch, onMounted } from "vue";
import { ElSelect, ElOption, ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import MarkdownPreview from "./MarkdownPreview.vue";
import { askQuestion, streamAnswer, createChat } from "@/api/chat";

// 定义消息接口
interface Message {
  role: "user" | "assistant";
  content: string;
  isStreaming?: boolean;
  questionId?: string;
}

// Props
interface Props {
  fileContext?: {
    fileName?: string;
    fileContent?: string;
  };
}

const props = withDefaults(defineProps<Props>(), {
  fileContext: undefined,
});

// Emits
const emit = defineEmits<{
  (e: "close"): void;
}>();

// 国际化
const { t } = useI18n();

// 响应式数据
const messages = ref<Message[]>([]);
const userInput = ref("");
const currentModel = ref("external"); // 默认豆包模型
const currentChatId = ref<number | null>(null); // 当前会话ID
const currentQuestionId = ref<string | null>(null); // 当前问题ID
const isLoading = ref(false);
const isStreaming = ref(false);
const messagesContainer = ref<HTMLElement | null>(null);
const inputTextarea = ref<HTMLTextAreaElement | null>(null);
const isDragOver = ref(false);
const dragCounter = ref(0);

// 可用模型列表 - 使用原有系统的模型
const availableModels = ref([
  { label: "豆包模型 (Doubao)", value: "external" },
  { label: "百川模型 (Baichuan)", value: "baichuan" },
]);

// 快捷操作
const quickActions = ref([
  { text: "帮我总结这个文档", icon: "fas fa-file-alt" },
  { text: "解释这段代码", icon: "fas fa-code" },
  { text: "帮我写个大纲", icon: "fas fa-list-ul" },
  { text: "翻译成英文", icon: "fas fa-language" },
]);

// 计算属性
const canSend = computed(() => {
  return userInput.value.trim().length > 0 && !isLoading.value;
});

// 复制内容
const handleCopy = async (content: string) => {
  try {
    await navigator.clipboard.writeText(content);
    ElMessage.success("内容已复制到剪贴板");
  } catch (error) {
    console.error("复制失败:", error);
    ElMessage.error("复制失败");
  }
};

// 方法
const handleSend = async () => {
  if (!canSend.value) return;

  const question = userInput.value.trim();
  userInput.value = "";
  resetTextareaHeight();

  // 添加用户消息
  messages.value.push({
    role: "user",
    content: question,
  });

  // 添加 AI 消息占位
  const aiMessageIndex = messages.value.length;
  messages.value.push({
    role: "assistant",
    content: "",
    isStreaming: true,
  });

  isLoading.value = true;
  isStreaming.value = true;

  try {
    // 1. 创建或获取会话ID
    if (!currentChatId.value) {
      await createNewChat();
    }

    // 2. 发送问题
    const provider = currentModel.value === "baichuan" ? "baichuan" : undefined;
    const askResponse = await askQuestion({
      chatId: currentChatId.value!,
      questionContent: question,
      provider,
    });

    const { questionId } = askResponse.data.data;
    currentQuestionId.value = questionId;

    if (messages.value[aiMessageIndex]) {
      messages.value[aiMessageIndex].questionId = questionId;
    }

    // 3. 流式获取答案
    await streamResponse(currentChatId.value!, questionId, aiMessageIndex);
  } catch (error: any) {
    console.error("发送消息失败:", error);
    ElMessage.error(error.message || "发送消息失败,请重试");
    if (messages.value[aiMessageIndex]) {
      messages.value[aiMessageIndex].content = "抱歉,发生了错误,请稍后重试。";
    }
  } finally {
    isLoading.value = false;
    isStreaming.value = false;
    if (messages.value[aiMessageIndex]) {
      messages.value[aiMessageIndex].isStreaming = false;
    }
  }

  nextTick(() => {
    scrollToBottom();
  });
};

// 创建新会话
const createNewChat = async () => {
  try {
    const response = await createChat({
      title: "Workspace 对话",
    });
    currentChatId.value = response.data.id;
  } catch (error) {
    console.error("创建会话失败:", error);
    throw new Error("创建会话失败");
  }
};

// 流式响应处理
const streamResponse = async (
  chatId: number,
  questionId: string,
  messageIndex: number
) => {
  return new Promise<void>((resolve, reject) => {
    const provider = currentModel.value === "baichuan" ? "baichuan" : undefined;

    streamAnswer({
      chatId,
      questionId,
      provider,
      onMessage: (chunk) => {
        if (messages.value[messageIndex]) {
          // 处理不同格式的响应
          if (typeof chunk === "string") {
            messages.value[messageIndex].content += chunk;
          } else if (typeof chunk === "object" && chunk) {
            // 处理 JSON 格式的响应
            const content = extractContentFromChunk(chunk);
            if (content) {
              messages.value[messageIndex].content += content;
            }
          }
          scrollToBottom();
        }
      },
      onOpen: () => {
        console.log("流式连接已建立");
      },
      onError: (error) => {
        console.error("流式响应错误:", error);
        reject(error);
      },
      onEnd: () => {
        console.log("流式响应结束");
        resolve();
      },
    });
  });
};

// 从响应块中提取内容
const extractContentFromChunk = (chunk: any): string => {
  // 1. 如果是纯字符串,直接返回
  if (typeof chunk === "string") {
    return chunk;
  }

  // 2. 处理对象格式的响应
  if (typeof chunk === "object" && chunk !== null) {
    // 标准字段
    if (chunk.content) return chunk.content;
    if (chunk.text) return chunk.text;
    if (chunk.delta) return chunk.delta;
    if (chunk.answer) return chunk.answer;
    if (chunk.answerContent) return chunk.answerContent;
    
    // 嵌套字段
    if (chunk.choices && Array.isArray(chunk.choices) && chunk.choices.length > 0) {
      const choice = chunk.choices[0];
      if (choice.delta && choice.delta.content) return choice.delta.content;
      if (choice.message && choice.message.content) return choice.message.content;
    }
  }
  
  // 3. 无法识别的格式,返回空字符串
  return "";
};

// 处理键盘事件
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    handleSend();
  }
};

// 调整文本框高度
const adjustTextareaHeight = () => {
  nextTick(() => {
    if (inputTextarea.value) {
      inputTextarea.value.style.height = "auto";
      const newHeight = Math.min(inputTextarea.value.scrollHeight, 200);
      inputTextarea.value.style.height = `${newHeight}px`;
    }
  });
};

// 重置文本框高度
const resetTextareaHeight = () => {
  nextTick(() => {
    if (inputTextarea.value) {
      inputTextarea.value.style.height = "auto";
    }
  });
};

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
    }
  });
};

// 新建对话
const handleNewChat = () => {
  if (messages.value.length > 0) {
    if (confirm("确定要开始新对话吗?当前对话内容将被清空。")) {
      messages.value = [];
      userInput.value = "";
      currentChatId.value = null;
      currentQuestionId.value = null;
    }
  }
};

// 快捷操作
const handleQuickAction = (text: string) => {
  userInput.value = text;
  adjustTextareaHeight();
};

// 关闭
const handleClose = () => {
  emit("close");
};

// 判断是否为视频文件
const isVideoFile = (fileName: string, mimeType?: string): boolean => {
  const videoExtensions = [
    'mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'm4v',
    '3gp', '3g2', 'asf', 'rm', 'rmvb', 'vob', 'ts', 'mts',
    'm2ts', 'ogv', 'divx', 'xvid', 'f4v', 'f4p', 'f4a', 'f4b'
  ];
  const extension = fileName.split('.').pop()?.toLowerCase() || '';
  const isVideoByExtension = videoExtensions.includes(extension);
  const isVideoByMime = mimeType ? mimeType.startsWith('video/') : false;
  return isVideoByExtension || isVideoByMime;
};

// 判断是否为图片文件
const isImageFile = (fileName: string, mimeType?: string): boolean => {
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
  const extension = fileName.split('.').pop()?.toLowerCase() || '';
  const isImageByExtension = imageExtensions.includes(extension);
  const isImageByMime = mimeType ? mimeType.startsWith('image/') : false;
  return isImageByExtension || isImageByMime;
};

// 判断是否为视频文件的 MIME 类型
const isVideoMimeType = (mimeType: string): boolean => {
  return mimeType.startsWith('video/');
};

// 处理拖拽进入
const handleDragEnter = (e: DragEvent) => {
  e.preventDefault();
  dragCounter.value = (dragCounter.value || 0) + 1;
  
  const hasFiles = (e.dataTransfer?.files.length ?? 0) > 0;
  const hasInternalData = e.dataTransfer?.types.includes("application/json") || e.dataTransfer?.types.includes("text/plain");
  
  if (hasFiles || hasInternalData) {
    isDragOver.value = true;
  }
};

// 处理拖拽离开
const handleDragLeave = (e: DragEvent) => {
  e.preventDefault();
  dragCounter.value = Math.max(0, (dragCounter.value || 0) - 1);
  
  if (dragCounter.value === 0) {
    setTimeout(() => {
      if (dragCounter.value === 0) {
        isDragOver.value = false;
      }
    }, 50);
  }
};

// 处理拖拽悬停
const handleDragOver = (e: DragEvent) => {
  e.preventDefault();
  const hasFiles = (e.dataTransfer?.files.length ?? 0) > 0;
  const hasInternalData = e.dataTransfer?.types.includes("application/json") || e.dataTransfer?.types.includes("text/plain");
  
  if (hasFiles || hasInternalData) {
    if (e.dataTransfer) {
      e.dataTransfer.dropEffect = "copy";
    }
    if (!isDragOver.value) {
      isDragOver.value = true;
    }
  }
};

// 处理文件拖放
// 判断是否为音频文件
const isAudioFile = (fileName: string, mimeType?: string): boolean => {
  const audioExtensions = ["mp3", "wav", "ogg", "m4a", "aac", "flac", "wma"];
  const extension = fileName.split(".").pop()?.toLowerCase() || "";
  const isAudioByExtension = audioExtensions.includes(extension);
  const isAudioByMime = mimeType ? mimeType.startsWith("audio/") : false;
  return isAudioByExtension || isAudioByMime;
};

const handleDrop = (e: DragEvent) => {
  e.preventDefault();
  isDragOver.value = false;
  dragCounter.value = 0;

  const files = Array.from(e.dataTransfer?.files || []);

  // 1. 处理本地文件拖拽
  if (files.length > 0) {
    for (const file of files) {
      if (isVideoFile(file.name, file.type) || isVideoMimeType(file.type)) {
        ElMessage.error(
          t("agentPanel.chat.videoFileNotSupported") || "暂时无法分析视频文件",
        );
        return;
      }
      if (isImageFile(file.name, file.type)) {
        ElMessage.error(
          t("agentPanel.chat.imageFileNotSupported") || "暂时无法分析图片文件",
        );
        return;
      }
      if (isAudioFile(file.name, file.type)) {
        ElMessage.error("暂时无法分析音频文件");
        return;
      }
    }
    // 目前暂时不处理其他文件
    ElMessage.info("文件拖拽功能开发中，请使用其他方式上传文件");
    return;
  }

  // 2. 处理内部文件树拖拽
  let dragData = e.dataTransfer?.getData("application/json");
  if (!dragData) {
    dragData = e.dataTransfer?.getData("text/plain") || "";
  }

  if (dragData) {
    try {
      const data = JSON.parse(dragData);
      if (
        data.from === "FileTree" ||
        data.from === "FileList" ||
        data.from === "WorkspaceTab"
      ) {
        const node = data.node || (data.files && data.files[0]);
        if (node) {
          const fileName = node.name || node.fileName || "";
          const fileType = node.type || node.fileType || "";

          if (isVideoFile(fileName, fileType)) {
            ElMessage.error(
              t("agentPanel.chat.videoFileNotSupported") || "暂时无法分析视频文件",
            );
            return;
          }
          if (isImageFile(fileName, fileType)) {
            ElMessage.error(
              t("agentPanel.chat.imageFileNotSupported") || "暂时无法分析图片文件",
            );
            return;
          }
          if (isAudioFile(fileName, fileType)) {
            ElMessage.error("暂时无法分析音频文件");
            return;
          }

          // 其他文件类型目前也不支持
          ElMessage.info("文件拖拽功能开发中，请使用其他方式上传文件");
        }
      }
    } catch (err) {
      console.error("解析拖拽数据失败:", err);
    }
  }
};

// 监听文件上下文变化
watch(
  () => props.fileContext,
  (newContext) => {
    if (newContext && messages.value.length === 0) {
      // 可以自动发送一条欢迎消息
      console.log("文件上下文已加载:", newContext.fileName);
    }
  },
  { immediate: true, deep: true }
);

/**
 * 加载会话历史（可选功能 - 预留接口,暂未使用）
 * 如需启用,请取消注释并导入 listMessages
 * 
 * import { listMessages } from "@/api/chat";
 * 
 * const loadChatHistory = async (chatId: number) => {
 *   try {
 *     const response = await listMessages(chatId, { limit: 50 });
 *     const history = response.data;
 *     
 *     const historyMessages: Message[] = [];
 *     for (const msg of history) {
 *       historyMessages.push({ role: "user", content: msg.question });
 *       if (msg.answer) {
 *         historyMessages.push({
 *           role: "assistant",
 *           content: msg.answer,
 *           questionId: msg.questionId,
 *         });
 *       }
 *     }
 *     
 *     messages.value = historyMessages;
 *     nextTick(() => scrollToBottom());
 *   } catch (error) {
 *     console.error("加载历史消息失败:", error);
 *   }
 * };
 */

// 组件挂载
onMounted(() => {
  // 聚焦输入框
  nextTick(() => {
    inputTextarea.value?.focus();
  });

  // 加载历史会话（可选）
  // loadChatSessions();
});
</script>

<style scoped lang="scss">
.workspace-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-secondary, #1a1a1a);
  border-radius: 8px;
  overflow: hidden;
}

// 聊天头部
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-card, #2a2a2a);
  border-bottom: 1px solid var(--color-border, #3a3a3a);

  .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #fff);

    i {
      color: var(--color-primary, #409eff);
    }
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary, #999);
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: var(--color-bg-hover, #3a3a3a);
      color: var(--color-text, #fff);
    }
  }
}

// 消息区域
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;

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

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

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--color-text-secondary, #999);

  i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }

  p {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 400px;
  }

  .quick-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-card, #2a2a2a);
    border: 1px solid var(--color-border, #3a3a3a);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text, #fff);

    i {
      font-size: 16px;
      color: var(--color-primary, #409eff);
    }

    &:hover {
      background: var(--color-bg-hover, #3a3a3a);
      border-color: var(--color-primary, #409eff);
    }
  }
}

// 消息项
.message-item {
  display: flex;
  gap: 12px;
  animation: fadeIn 0.3s ease-in-out;

  .message-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-card, #2a2a2a);
    color: var(--color-text, #fff);
    font-size: 16px;
  }

  .message-content {
    flex: 1;
    min-width: 0;
  }

  .user-message {
    padding: 12px 16px;
    background: var(--color-primary, #409eff);
    color: #fff;
    border-radius: 12px;
    line-height: 1.6;
    word-wrap: break-word;
    position: relative;

    .message-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
      opacity: 0;
      transition: opacity 0.2s;
    }

    &:hover .message-actions {
      opacity: 1;
    }

    .action-btn {
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      padding: 4px;
      font-size: 12px;
      transition: color 0.2s;

      &:hover {
        color: #fff;
      }
    }
  }

  &.user {
    .message-avatar {
      background: var(--color-primary, #409eff);
    }
  }

  &.assistant {
    .message-avatar {
      background: var(--color-success, #67c23a);
    }
  }
}

// 加载指示器
.loading-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;

  .typing-dots {
    display: flex;
    gap: 4px;

    span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-primary, #409eff);
      animation: typing 1.4s infinite;

      &:nth-child(2) {
        animation-delay: 0.2s;
      }

      &:nth-child(3) {
        animation-delay: 0.4s;
      }
    }
  }

  .loading-text {
    color: var(--color-text-secondary, #999);
    font-size: 14px;
  }
}

// 输入区域
.chat-input-area {
  position: relative;
  padding: 16px;
  background: var(--color-card, #2a2a2a);
  border-top: 1px solid var(--color-border, #3a3a3a);

  .input-wrapper {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: var(--color-bg-secondary, #1a1a1a);
    border: 1px solid var(--color-border, #3a3a3a);
    border-radius: 8px;
    padding: 8px;
    transition: border-color 0.2s;

    &:focus-within {
      border-color: var(--color-primary, #409eff);
    }
  }

  .chat-textarea {
    flex: 1;
    min-height: 40px;
    max-height: 200px;
    border: none;
    background: transparent;
    color: var(--color-text, #fff);
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    font-family: inherit;

    &::placeholder {
      color: var(--color-text-secondary, #666);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  .send-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 6px;
    background: var(--color-primary, #409eff);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover:not(:disabled) {
      background: var(--color-primary-light, #66b1ff);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .limit-tip {
    position: absolute;
    bottom: -25px;
    right: 16px;
    font-size: 12px;
    color: var(--color-warning, #e6a23c);
    display: flex;
    align-items: center;
    gap: 4px;
    animation: fadeIn 0.3s ease-out;
    z-index: 5;

    &.at-limit {
      color: var(--color-error, #f56c6c);
    }

    i {
      font-size: 12px;
    }
  }
}

// 拖拽遮罩层
.drag-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(64, 158, 255, 0.1);
  border: 2px dashed var(--color-primary, #409eff);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;

  .drag-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--color-primary, #409eff);
    font-size: 16px;
    font-weight: 500;

    i {
      font-size: 32px;
    }
  }
}

// 动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typing {
  0%,
  60%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  30% {
    transform: scale(1.4);
    opacity: 1;
  }
}
</style>